diff --git a/config/jest.setup.js b/config/jest.setup.js index 34b1706d0..b3556585c 100644 --- a/config/jest.setup.js +++ b/config/jest.setup.js @@ -16,3 +16,8 @@ Object.defineProperty(window, 'matchMedia', { dispatchEvent: jest.fn(), })), }); +global.ResizeObserver = jest.fn().mockImplementation(() => ({ + observe: jest.fn(), + unobserve: jest.fn(), + disconnect: jest.fn(), +})); diff --git a/package.json b/package.json index 8e9617c17..4de7f3ba2 100644 --- a/package.json +++ b/package.json @@ -125,6 +125,9 @@ "webpack-cli": "^4.9.1", "webpack-dev-server": "^4.7.3" }, + "resolutions": { + "react-is": "^19.0.0" + }, "release": { "monorepo": "./packages", "branches": [ diff --git a/packages/carbon-component-mapper/demo/index.html b/packages/carbon-component-mapper/demo/index.html index 9e396b9bd..dd23c0799 100644 --- a/packages/carbon-component-mapper/demo/index.html +++ b/packages/carbon-component-mapper/demo/index.html @@ -4,7 +4,7 @@ - + Data driven forms diff --git a/packages/carbon-component-mapper/demo/index.js b/packages/carbon-component-mapper/demo/index.js index 27b250407..c1e6a778d 100644 --- a/packages/carbon-component-mapper/demo/index.js +++ b/packages/carbon-component-mapper/demo/index.js @@ -7,7 +7,7 @@ import { wizardSchema } from './demo-schemas/wizard-schema'; import sandboxSchema from './demo-schemas/sandbox'; import demoSchema from '../../../shared/demoschema'; -import { Button } from 'carbon-components-react'; +import { Button } from '@carbon/react'; const fieldArrayState = { schema: arraySchemaDDF, diff --git a/packages/carbon-component-mapper/package.json b/packages/carbon-component-mapper/package.json index 7392180fa..5b4d362b0 100644 --- a/packages/carbon-component-mapper/package.json +++ b/packages/carbon-component-mapper/package.json @@ -29,11 +29,7 @@ "javascript" ], "devDependencies": { - "@carbon/icons-react": "^10.41.0", - "@types/carbon-components-react": "^7.44.1", - "carbon-components": "^10.46.0", - "carbon-components-react": "^7.46.0", - "carbon-icons": "^7.0.7" + "@carbon/react": "^1.95.0" }, "peerDependencies": { "react": "^17.0.2 || ^18.0.0 || ^19.0.0", diff --git a/packages/carbon-component-mapper/src/checkbox/checkbox.d.ts b/packages/carbon-component-mapper/src/checkbox/checkbox.d.ts index 5afef1b97..8ba81740f 100644 --- a/packages/carbon-component-mapper/src/checkbox/checkbox.d.ts +++ b/packages/carbon-component-mapper/src/checkbox/checkbox.d.ts @@ -2,7 +2,7 @@ import { UseFieldApiComponentConfig } from "@data-driven-forms/react-form-render import { ReactNode } from "react"; import { FormGroupProps } from "../form-group"; -import { CheckboxProps as CarbonCheckboxProps } from 'carbon-components-react'; +import { CheckboxProps as CarbonCheckboxProps } from '@carbon/react'; export interface CheckboxOption extends CarbonCheckboxProps { value?: any; diff --git a/packages/carbon-component-mapper/src/checkbox/checkbox.js b/packages/carbon-component-mapper/src/checkbox/checkbox.js index c8ece3a90..c35ab92ae 100644 --- a/packages/carbon-component-mapper/src/checkbox/checkbox.js +++ b/packages/carbon-component-mapper/src/checkbox/checkbox.js @@ -2,7 +2,7 @@ import React from 'react'; import { useFieldApi } from '@data-driven-forms/react-form-renderer'; import MultipleChoiceListCommon from '@data-driven-forms/common/multiple-choice-list'; -import { Checkbox as CarbonCheckbox, FormGroup } from 'carbon-components-react'; +import { Checkbox as CarbonCheckbox, FormGroup } from '@carbon/react'; import WithDescription from '../with-description'; import prepareProps, { buildLabel } from '../prepare-props'; @@ -33,7 +33,7 @@ const SingleCheckbox = (props) => { }; const SingleCheckboxInCommon = ({ label, isDisabled, id, meta, option: { value, name, ...rest }, onChange, ...props }) => ( - onChange(event)} /> + onChange(event, data)} /> ); const Checkbox = ({ options, ...props }) => diff --git a/packages/carbon-component-mapper/src/date-picker/date-picker.d.ts b/packages/carbon-component-mapper/src/date-picker/date-picker.d.ts index 5796be018..0922e4a30 100644 --- a/packages/carbon-component-mapper/src/date-picker/date-picker.d.ts +++ b/packages/carbon-component-mapper/src/date-picker/date-picker.d.ts @@ -1,7 +1,7 @@ import { FormGroupProps } from "../form-group"; import { UseFieldApiComponentConfig } from "@data-driven-forms/react-form-renderer"; -import { DatePickerProps as CarbonDatePickerProps, DatePickerInputProps } from 'carbon-components-react'; +import { DatePickerProps as CarbonDatePickerProps, DatePickerInputProps } from '@carbon/react'; interface InternalDatePickerProps extends DatePickerInputProps { datePickerType?: string; diff --git a/packages/carbon-component-mapper/src/date-picker/date-picker.js b/packages/carbon-component-mapper/src/date-picker/date-picker.js index a81a0cd41..eebc6659c 100644 --- a/packages/carbon-component-mapper/src/date-picker/date-picker.js +++ b/packages/carbon-component-mapper/src/date-picker/date-picker.js @@ -1,7 +1,7 @@ import React from 'react'; import { useFieldApi } from '@data-driven-forms/react-form-renderer'; -import { DatePicker as CarbonDatePicker, DatePickerInput } from 'carbon-components-react'; +import { DatePicker as CarbonDatePicker, DatePickerInput } from '@carbon/react'; import prepareProps from '../prepare-props'; import HelperTextBlock from '../helper-text-block/helper-text-block'; @@ -23,8 +23,8 @@ const DatePicker = (props) => { return (
- - + +
diff --git a/packages/carbon-component-mapper/src/dual-list-select/dual-list-select.d.ts b/packages/carbon-component-mapper/src/dual-list-select/dual-list-select.d.ts index 2044c68bb..dcabcd26e 100644 --- a/packages/carbon-component-mapper/src/dual-list-select/dual-list-select.d.ts +++ b/packages/carbon-component-mapper/src/dual-list-select/dual-list-select.d.ts @@ -10,7 +10,7 @@ import { StructuredListProps, StructuredListBodyProps, AllStructuredListRowProps, StructuredListCellProps -} from 'carbon-components-react'; +} from '@carbon/react'; export interface DualListSelectValue extends AnyObject { value: any; diff --git a/packages/carbon-component-mapper/src/dual-list-select/dual-list-select.js b/packages/carbon-component-mapper/src/dual-list-select/dual-list-select.js index b3fd760b2..51f4ccd3f 100644 --- a/packages/carbon-component-mapper/src/dual-list-select/dual-list-select.js +++ b/packages/carbon-component-mapper/src/dual-list-select/dual-list-select.js @@ -5,7 +5,6 @@ import { createUseStyles } from 'react-jss'; import { Grid, - Row, Column, Button, FormGroup, @@ -14,9 +13,8 @@ import { StructuredListRow, StructuredListBody, StructuredListCell, - TooltipIcon, -} from 'carbon-components-react'; -import { CheckmarkFilled16, ChevronRight32, ChevronLeft32, CaretSortDown32, CaretSortUp32 } from '@carbon/icons-react'; +} from '@carbon/react'; +import { CheckmarkFilled, ChevronRight, ChevronLeft, CaretSortDown, CaretSortUp } from '@carbon/react/icons'; import { buildLabel } from '../prepare-props'; @@ -50,9 +48,13 @@ const useStyles = createUseStyles({ }, toolbar: { display: 'flex', + '& .cds--tooltip-trigger__wrapper': { + height: '100%', + }, }, tooltipButton: { background: '#c2c1c1 !important', + height: '100%', }, }); @@ -72,18 +74,16 @@ const List = ({ options, selectedValues, handleOptionsClick, noTitle, ListProps, return options.length > 0 ? ( - {options.map(({ value, label, ListRowProps, ListCellProps, GridProps, RowProps, LabelProps, CheckmarkProps }) => ( + {options.map(({ value, label, ListRowProps, ListCellProps, GridProps, LabelProps, CheckmarkProps }) => ( handleOptionsClick({ ...e, ctrlKey: true }, value)}> - - - - {label} - - - {selectedValues.includes(value) && } - - + + + {label} + + + {selectedValues.includes(value) && } + @@ -101,9 +101,18 @@ const Toolbar = ({ sortTitle, onFilter, onSort, sortDirection, placeholder, Tool return (
onFilter(e.target.value)} labelText="" placeholder={placeholder} {...SearchProps} /> - - {sortDirection ? : } - +
); }; @@ -146,7 +155,6 @@ const DualListSelectInner = ({ filterValueText = 'Remove your filter to see all selected', FormGroupProps = {}, GridProps = {}, - RowProps = {}, OptionsColumnProps = {}, ButtonColumnProps = {}, ValuesColumnProps = {}, @@ -169,77 +177,75 @@ const DualListSelectInner = ({ return ( - - - - {React.createElement(LeftTitleElement, LeftTitleProps, leftTitle)} - - - - - - - - - - - {React.createElement(RightTitleElement, RightTitleProps, rightTitle)} - - - - + + + {React.createElement(LeftTitleElement, LeftTitleProps, leftTitle)} + + + + + + + + + + + {React.createElement(RightTitleElement, RightTitleProps, rightTitle)} + + + ); diff --git a/packages/carbon-component-mapper/src/field-array/field-array.d.ts b/packages/carbon-component-mapper/src/field-array/field-array.d.ts index f7addf876..7bb578fcb 100644 --- a/packages/carbon-component-mapper/src/field-array/field-array.d.ts +++ b/packages/carbon-component-mapper/src/field-array/field-array.d.ts @@ -1,6 +1,6 @@ import { FieldArrayField, UseFieldApiComponentConfig } from "@data-driven-forms/react-form-renderer"; import { ReactNode } from "react"; -import { ButtonProps, FormGroupProps as CarbonFormGroupProps } from "carbon-components-react"; +import { ButtonProps, FormGroupProps as CarbonFormGroupProps } from "@carbon/react"; import { FormGroupProps } from '../form-group'; diff --git a/packages/carbon-component-mapper/src/field-array/field-array.js b/packages/carbon-component-mapper/src/field-array/field-array.js index 89c9ba803..6fccbbe7d 100644 --- a/packages/carbon-component-mapper/src/field-array/field-array.js +++ b/packages/carbon-component-mapper/src/field-array/field-array.js @@ -5,8 +5,8 @@ import { createUseStyles } from 'react-jss'; import { useFieldApi, useFormApi, FieldArray as FieldArrayFF } from '@data-driven-forms/react-form-renderer'; -import { Button, FormGroup } from 'carbon-components-react'; -import { AddAlt32, Subtract32 } from '@carbon/icons-react'; +import { Button, FormGroup } from '@carbon/react'; +import { AddAlt, Subtract } from '@carbon/react/icons'; import prepareProps from '../prepare-props'; @@ -45,7 +45,7 @@ const ArrayItem = memo( {formOptions.renderForm(editedFields, formOptions)}