diff --git a/.changeset/few-mayflies-confess.md b/.changeset/few-mayflies-confess.md
new file mode 100644
index 00000000000..0557ac98f7b
--- /dev/null
+++ b/.changeset/few-mayflies-confess.md
@@ -0,0 +1,8 @@
+---
+'@talend/react-components': major
+---
+
+Typeahead - Changed input to DS Form.Text
+
+#### BREAKING CHANGE
+Some props and styles that were previously working on bootstrap input might no longer work. Check classNames and overriding styles passed to Typeahead to check that it still integrates well within your pages
diff --git a/.changeset/hot-dancers-search.md b/.changeset/hot-dancers-search.md
new file mode 100644
index 00000000000..38de3b624b8
--- /dev/null
+++ b/.changeset/hot-dancers-search.md
@@ -0,0 +1,5 @@
+---
+'@talend/react-containers': minor
+---
+
+Removed dependency on react-bootstrap on SelectObject component
diff --git a/.changeset/light-houses-give.md b/.changeset/light-houses-give.md
new file mode 100644
index 00000000000..05e569bbead
--- /dev/null
+++ b/.changeset/light-houses-give.md
@@ -0,0 +1,5 @@
+---
+'@talend/ui-playground': minor
+---
+
+Remove dependency on react-bootstrap
diff --git a/.changeset/slow-forks-remain.md b/.changeset/slow-forks-remain.md
new file mode 100644
index 00000000000..69b171c15d4
--- /dev/null
+++ b/.changeset/slow-forks-remain.md
@@ -0,0 +1,5 @@
+---
+'@talend/react-forms': minor
+---
+
+Remove dependency on react-bootstrap
diff --git a/packages/components/package.json b/packages/components/package.json
index 46663518e87..ebe241cf278 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -9,6 +9,7 @@
"build:prod": "talend-scripts build --umd --prod",
"pre-release": "yarn build:dev && yarn build:prod",
"build:lib": "talend-scripts build && yarn run tsc",
+ "watch": "talend-scripts build --watch",
"tsc": "tsc --emitDeclarationOnly --project ./tsconfig.json --outDir ./types",
"test": "cross-env TZ=UTC talend-scripts test",
"test:watch": "cross-env TZ=UTC talend-scripts test --watch",
diff --git a/packages/components/src/Datalist/Datalist.component.test.js b/packages/components/src/Datalist/Datalist.component.test.js
index 5b6e7c60928..e3aadca9f98 100644
--- a/packages/components/src/Datalist/Datalist.component.test.js
+++ b/packages/components/src/Datalist/Datalist.component.test.js
@@ -30,6 +30,8 @@ const multiSectionMap = [
{ title: 'cat 4', suggestions: [{ name: 'My lol', value: 'lol' }] },
];
+jest.unmock('@talend/design-system');
+
describe('Datalist component', () => {
it('should render a input', () => {
// when
diff --git a/packages/components/src/Drawer/Drawer.stories.js b/packages/components/src/Drawer/Drawer.stories.js
index c63b1856347..10159645e5b 100644
--- a/packages/components/src/Drawer/Drawer.stories.js
+++ b/packages/components/src/Drawer/Drawer.stories.js
@@ -1,15 +1,16 @@
import { useState } from 'react';
+
import { action } from '@storybook/addon-actions';
-import { TagVariantsNames } from '@talend/design-system';
-import { Nav, NavItem, Tab } from '@talend/react-bootstrap';
-import Drawer from './Drawer.component';
+import { TagVariantsNames } from '@talend/design-system';
import ActionBar from '../ActionBar';
+import { ActionButton } from '../Actions';
import HeaderBar from '../HeaderBar';
import Layout from '../Layout';
import SidePanel from '../SidePanel';
-import { ActionButton } from '../Actions';
+import TabBar from '../TabBar';
+import Drawer from './Drawer.component';
const header = ;
@@ -418,49 +419,52 @@ export const WithTabsWithSpecificFooters = () => {
export const Custom = () => {
function CustomDrawer() {
+ const [selectedTab, setSelectedTab] = useState('info');
return (
-
-
-
-
-
-
-
- {scrollableContent()}
- Test
-
-
- {scrollableContent()}
-
-
-
- {scrollableContent()}
-
-
-
- {scrollableContent()}
-
-
-
-
-
+
+ setSelectedTab(tab.key)}
+ selectedKey={selectedTab}
+ />
+
+
+ {selectedTab === 'info' && (
+ <>
+ {scrollableContent()}
+ Test
+ >
+ )}
+ {selectedTab === 'navigator' && (
+ <>
+ {scrollableContent()}
+
+ >
+ )}
+ {selectedTab === 'profile' && (
+ <>
+ {scrollableContent()}
+
+ >
+ )}
+
);
}
@@ -482,20 +486,16 @@ export const CustomStacked = () => {
function CustomDrawer() {
return (
-
-
-
-
- {scrollableContent()}
-
-
-
-
-
-
+
+
+
{scrollableContent()}
+
+
+
+
);
}
diff --git a/packages/components/src/Enumeration/Items/Item/Item.component.js b/packages/components/src/Enumeration/Items/Item/Item.component.js
index 734d3b36bbd..61b66d640b1 100644
--- a/packages/components/src/Enumeration/Items/Item/Item.component.js
+++ b/packages/components/src/Enumeration/Items/Item/Item.component.js
@@ -1,15 +1,16 @@
-import classNames from 'classnames';
-import { Button } from '@talend/react-bootstrap';
import { withTranslation } from 'react-i18next';
-import { removeDuplicates, allIndexOf } from './utils';
+import classNames from 'classnames';
+
import Action from '../../../Actions/Action';
-import theme from './Item.module.scss';
import Checkbox from '../../../Checkbox';
-import ItemPropTypes from './Item.propTypes';
import I18N_DOMAIN_COMPONENTS from '../../../constants';
import Icon from '../../../Icon';
import TooltipTrigger from '../../../TooltipTrigger';
+import ItemPropTypes from './Item.propTypes';
+import { allIndexOf, removeDuplicates } from './utils';
+
+import theme from './Item.module.scss';
function itemClasses(isSelected) {
return classNames({
@@ -89,7 +90,7 @@ function Item({ id, item, searchCriteria, showCheckboxes, style, t }) {
}
return (
-
+
);
}
diff --git a/packages/components/src/PieChart/PieChartButton.component.js b/packages/components/src/PieChart/PieChartButton.component.js
index 94552b78064..2e95396ed6d 100644
--- a/packages/components/src/PieChart/PieChartButton.component.js
+++ b/packages/components/src/PieChart/PieChartButton.component.js
@@ -1,9 +1,11 @@
import PropTypes from 'prop-types';
-import { Button, Popover } from '@talend/react-bootstrap';
-import PieChartIcon, { pieChartIconPropTypes } from './PieChartIcon.component';
-import pieChartCssModule from './PieChart.module.scss';
+
+import { Action } from '../Actions';
import OverlayTrigger from '../OverlayTrigger';
import { getTheme } from '../theme';
+import PieChartIcon, { pieChartIconPropTypes } from './PieChartIcon.component';
+
+import pieChartCssModule from './PieChart.module.scss';
const theme = getTheme(pieChartCssModule);
@@ -31,7 +33,7 @@ export function decorateWithOverlay(
trigger="click"
rootClose
placement={overlayPlacement}
- overlay={{overlayComponent}}
+ overlay={
{overlayComponent}
}
ref={overlayRef}
>
{btn}
@@ -85,11 +87,11 @@ export default function PieChartButtonComponent({
const rClick = wrapMouseEvent(onClick, overlayComponent, label, rest, model);
const rMouseDown = wrapMouseEvent(onMouseDown, overlayComponent, label, rest, model);
const btn = (
-
-
+
);
return decorateWithOverlay(btn, overlayPlacement, overlayComponent, overlayId, overlayRef);
}
diff --git a/packages/components/src/PieChart/__snapshots__/PieChart.test.js.snap b/packages/components/src/PieChart/__snapshots__/PieChart.test.js.snap
index 98866d1924f..2fdfbf564e5 100644
--- a/packages/components/src/PieChart/__snapshots__/PieChart.test.js.snap
+++ b/packages/components/src/PieChart/__snapshots__/PieChart.test.js.snap
@@ -2,10 +2,11 @@
exports[`PieChart should render a PieChartButton 1`] = `