@lumx/react 3.0.3 → 3.0.4-alpha.0

package/package.json

@@ -7,8 +7,8 @@
     },
     "dependencies": {
         "@juggle/resize-observer": "^3.2.0",
-        "@lumx/core": "^3.0.3",
-        "@lumx/icons": "^3.0.3",
+        "@lumx/core": "^3.0.4-alpha.0",
+        "@lumx/icons": "^3.0.4-alpha.0",
         "@popperjs/core": "^2.5.4",
         "body-scroll-lock": "^3.1.5",
         "classnames": "^2.2.6",
@@ -30,37 +30,33 @@
         "@babel/preset-typescript": "^7.12.7",
         "@rollup/plugin-commonjs": "^15.0.0",
         "@rollup/plugin-node-resolve": "9.0.0",
+        "@testing-library/jest-dom": "^5.16.4",
+        "@testing-library/react": "^12.1.2",
+        "@testing-library/user-event": "^14.4.3",
         "@types/body-scroll-lock": "^2.6.1",
         "@types/classnames": "^2.2.9",
-        "@types/enzyme": "^3.10.5",
-        "@types/jest": "^26.0.9",
+        "@types/enzyme": "^3.10.12",
+        "@types/jest": "^29.2.1",
         "@types/lodash": "^4.14.149",
         "@types/react": "^16.9.11",
         "@types/react-dom": "^16.9.4",
         "@types/react-is": "^16.7.1",
         "autoprefixer": "^9.7.4",
+        "babel-jest": "29.1.2",
         "babel-loader": "^8.0.6",
         "chromatic": "^6.0.6",
         "core-js": "^3.6.4",
-        "dts-bundle-generator": "^5.5.0",
         "enzyme": "^3.11.0",
-        "enzyme-adapter-react-16": "^1.15.2",
+        "enzyme-adapter-react-16": "^1.15.4",
         "enzyme-to-json": "^3.5.0",
-        "expect-more-jest": "^5.2.0",
         "focus-visible": "^5.0.2",
         "glob": "^7.1.6",
         "install-peers-cli": "^2.2.0",
         "is-ci": "^2.0.0",
-        "jest": "^26.3.0",
-        "jest-chain": "^1.1.5",
-        "jest-environment-enzyme": "^7.1.1",
-        "jest-enzyme": "^7.1.1",
-        "jest-html-reporters": "^2.0.2",
-        "jest-mock-console": "^1.0.1",
-        "jest-validate": "^26.3.0",
-        "jest-watch-master": "^1.0.0",
-        "jest-watch-suspend": "^1.1.2",
-        "jest-watch-typeahead": "^0.6.0",
+        "jest": "29.1.2",
+        "jest-environment-jsdom": "29.1.2",
+        "jest-enzyme": "^7.1.2",
+        "react-dom": "16.13.0",
         "rollup": "2.26.10",
         "rollup-plugin-analyzer": "^3.3.0",
         "rollup-plugin-babel": "^4.4.0",
@@ -71,7 +67,6 @@
         "rollup-plugin-ts-paths-resolve": "^1.3.0",
         "rollup-plugin-typescript-paths": "^1.2.2",
         "test-data-bot": "^0.8.0",
-        "ts-jest": "^26.2.0",
         "tsconfig-paths-webpack-plugin": "^3.3.0",
         "typescript": "^4.1.2",
         "yargs": "^15.4.1",
@@ -100,7 +95,7 @@
     "license": "MIT",
     "module": "index.js",
     "main": "index.js",
-    "types": "types.d.ts",
+    "types": "index.d.ts",
     "name": "@lumx/react",
     "publishConfig": {
         "directory": "dist"
@@ -110,8 +105,7 @@
         "url": "git+https://github.com/lumapps/design-system.git"
     },
     "scripts": {
-        "build": "rollup -c && yarn generate:types",
-        "generate:types": "dts-bundle-generator --no-check --external-imports=react -o dist/types.d.ts src/index.ts",
+        "build": "rollup -c",
         "prepare": "install-peers || exit 0",
         "prepublishOnly": "yarn build",
         "test": "jest --config jest/index.js --coverage --notify --passWithNoTests --detectOpenHandles --runInBand",
@@ -120,6 +114,6 @@
         "build:storybook": "cd storybook && ./build"
     },
     "sideEffects": false,
-    "version": "3.0.3",
-    "gitHead": "ef387e8b0e7742f3057f34f3d966ffbc84b93277"
+    "version": "3.0.4-alpha.0",
+    "gitHead": "6ae2717c530ab17282f7bcf723ffaeca1bf36415"
 }

package/src/components/alert-dialog/__snapshots__/AlertDialog.test.tsx.snap

@@ -4,7 +4,7 @@ exports[`<AlertDialog> Snapshots and structure should render story 'Default' 1`]
 <Dialog
   className="lumx-alert-dialog lumx-alert-dialog--kind-info"
   dialogProps={
-    Object {
+    {
       "aria-describedby": "uid-description",
       "aria-labelledby": "uid-title",
       "id": "uid",
@@ -12,14 +12,14 @@ exports[`<AlertDialog> Snapshots and structure should render story 'Default' 1`]
     }
   }
   focusElement={
-    Object {
+    {
       "current": null,
     }
   }
   isOpen={true}
   onClose={[Function]}
   parentElement={
-    Object {
+    {
       "current": undefined,
     }
   }
@@ -77,7 +77,7 @@ exports[`<AlertDialog> Snapshots and structure should render story 'Error' 1`] =
 <Dialog
   className="lumx-alert-dialog lumx-alert-dialog--kind-error"
   dialogProps={
-    Object {
+    {
       "aria-describedby": "alert-dialog-description",
       "aria-labelledby": "alert-dialog-title",
       "id": "alert-dialog",
@@ -85,14 +85,14 @@ exports[`<AlertDialog> Snapshots and structure should render story 'Error' 1`] =
     }
   }
   focusElement={
-    Object {
+    {
       "current": null,
     }
   }
   isOpen={true}
   onClose={[Function]}
   parentElement={
-    Object {
+    {
       "current": undefined,
     }
   }
@@ -150,7 +150,7 @@ exports[`<AlertDialog> Snapshots and structure should render story 'RichDescript
 <Dialog
   className="lumx-alert-dialog lumx-alert-dialog--kind-info"
   dialogProps={
-    Object {
+    {
       "aria-describedby": "alert-dialog-description",
       "aria-labelledby": "alert-dialog-title",
       "id": "alert-dialog",
@@ -158,14 +158,14 @@ exports[`<AlertDialog> Snapshots and structure should render story 'RichDescript
     }
   }
   focusElement={
-    Object {
+    {
       "current": null,
     }
   }
   isOpen={true}
   onClose={[Function]}
   parentElement={
-    Object {
+    {
       "current": undefined,
     }
   }
@@ -236,7 +236,7 @@ exports[`<AlertDialog> Snapshots and structure should render story 'Success' 1`]
 <Dialog
   className="lumx-alert-dialog lumx-alert-dialog--kind-success"
   dialogProps={
-    Object {
+    {
       "aria-describedby": "alert-dialog-description",
       "aria-labelledby": "alert-dialog-title",
       "id": "alert-dialog",
@@ -244,14 +244,14 @@ exports[`<AlertDialog> Snapshots and structure should render story 'Success' 1`]
     }
   }
   focusElement={
-    Object {
+    {
       "current": null,
     }
   }
   isOpen={true}
   onClose={[Function]}
   parentElement={
-    Object {
+    {
       "current": undefined,
     }
   }
@@ -309,7 +309,7 @@ exports[`<AlertDialog> Snapshots and structure should render story 'Warning' 1`]
 <Dialog
   className="lumx-alert-dialog lumx-alert-dialog--kind-warning"
   dialogProps={
-    Object {
+    {
       "aria-describedby": "alert-dialog-description",
       "aria-labelledby": "alert-dialog-title",
       "id": "alert-dialog",
@@ -317,14 +317,14 @@ exports[`<AlertDialog> Snapshots and structure should render story 'Warning' 1`]
     }
   }
   focusElement={
-    Object {
+    {
       "current": null,
     }
   }
   isOpen={true}
   onClose={[Function]}
   parentElement={
-    Object {
+    {
       "current": undefined,
     }
   }
@@ -382,7 +382,7 @@ exports[`<AlertDialog> Snapshots and structure should render story 'WithCancel'
 <Dialog
   className="lumx-alert-dialog lumx-alert-dialog--kind-info"
   dialogProps={
-    Object {
+    {
       "aria-describedby": "alert-dialog-description",
       "aria-labelledby": "alert-dialog-title",
       "id": "alert-dialog",
@@ -390,14 +390,14 @@ exports[`<AlertDialog> Snapshots and structure should render story 'WithCancel'
     }
   }
   focusElement={
-    Object {
+    {
       "current": null,
     }
   }
   isOpen={true}
   onClose={[Function]}
   parentElement={
-    Object {
+    {
       "current": undefined,
     }
   }
@@ -463,7 +463,7 @@ exports[`<AlertDialog> Snapshots and structure should render story 'WithForwarde
 <Dialog
   className="lumx-alert-dialog lumx-alert-dialog--kind-info"
   dialogProps={
-    Object {
+    {
       "aria-describedby": "alert-dialog-description",
       "aria-labelledby": "alert-dialog-title",
       "id": "alert-dialog",
@@ -471,14 +471,14 @@ exports[`<AlertDialog> Snapshots and structure should render story 'WithForwarde
     }
   }
   focusElement={
-    Object {
+    {
       "current": null,
     }
   }
   isOpen={true}
   onClose={[Function]}
   parentElement={
-    Object {
+    {
       "current": undefined,
     }
   }
@@ -519,7 +519,7 @@ exports[`<AlertDialog> Snapshots and structure should render story 'WithForwarde
             onClick={[Function]}
             size="m"
             style={
-              Object {
+              {
                 "color": "blue",
               }
             }
@@ -534,7 +534,7 @@ exports[`<AlertDialog> Snapshots and structure should render story 'WithForwarde
             onClick={[Function]}
             size="m"
             style={
-              Object {
+              {
                 "color": "red",
               }
             }

package/src/components/autocomplete/Autocomplete.tsx

@@ -155,6 +155,12 @@ export interface AutocompleteProps extends GenericProps, HasTheme {
      * @see {@link DropdownProps#onInfiniteScroll}
      */
     onInfiniteScroll?(): void;
+    /**
+     * Props forwarded to the underlying TextField component.
+     * Only the props not managed by the Autocomplete can be set.
+     * @see {@link TextFieldProps}
+     */
+    textFieldProps?: TextFieldProps;
 }
 
 /**
@@ -219,6 +225,7 @@ export const Autocomplete: Comp<AutocompleteProps, HTMLDivElement> = forwardRef(
         shouldFocusOnClose,
         theme,
         value,
+        textFieldProps = {},
         ...forwardedProps
     } = props;
     const inputAnchorRef = useRef<HTMLElement>(null);
@@ -237,6 +244,7 @@ export const Autocomplete: Comp<AutocompleteProps, HTMLDivElement> = forwardRef(
             )}
         >
             <TextField
+                {...textFieldProps}
                 chips={chips}
                 error={error}
                 hasError={hasError}

package/src/components/autocomplete/__snapshots__/Autocomplete.test.tsx.snap

@@ -8,7 +8,7 @@ exports[`<Autocomplete> Props should render correctly when the dropdown is close
     inputRef={[Function]}
     onChange={[MockFunction]}
     textFieldRef={
-      Object {
+      {
         "current": null,
       }
     }
@@ -18,7 +18,7 @@ exports[`<Autocomplete> Props should render correctly when the dropdown is close
   />
   <Dropdown
     anchorRef={
-      Object {
+      {
         "current": null,
       }
     }
@@ -115,7 +115,7 @@ exports[`<Autocomplete> Snapshots and structure should render correctly 1`] = `
     label="Field label"
     onChange={[MockFunction]}
     textFieldRef={
-      Object {
+      {
         "current": null,
       }
     }
@@ -125,7 +125,7 @@ exports[`<Autocomplete> Snapshots and structure should render correctly 1`] = `
   />
   <Dropdown
     anchorRef={
-      Object {
+      {
         "current": null,
       }
     }

package/src/components/autocomplete/__snapshots__/AutocompleteMultiple.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`<AutocompleteMultiple> Snapshots and structure should render correctly 1`] = `
 <Autocomplete
   anchorToInput={false}
-  chips={Array []}
+  chips={[]}
   className="lumx-autocomplete-multiple"
   closeOnClick={false}
   closeOnClickAway={true}

package/src/components/avatar/__snapshots__/Avatar.test.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<Avatar> Snapshots and structure should render story 'Clickable' 1`] = `
-Array [
+[
   <div
     className="lumx-avatar lumx-avatar--size-l lumx-avatar--theme-light"
   >
@@ -27,7 +27,7 @@ Array [
       fallback="M19,3A2,2 0 0,1 21,5V11H19V13H19L17,13V15H15V17H13V19H11V21H5C3.89,21 3,20.1 3,19V5A2,2 0 0,1 5,3H19M21,15V19A2,2 0 0,1 19,21H19L15,21V19H17V17H19V15H21M19,8.5A0.5,0.5 0 0,0 18.5,8H5.5A0.5,0.5 0 0,0 5,8.5V15.5A0.5,0.5 0 0,0 5.5,16H11V15H13V13H15V11H17V9H19V8.5Z"
       image="/demo-assets/avatar2.jpg"
       linkProps={
-        Object {
+        {
           "href": "https://example.com",
         }
       }
@@ -55,7 +55,7 @@ Array [
 `;
 
 exports[`<Avatar> Snapshots and structure should render story 'Sizes' 1`] = `
-Array [
+[
   <div
     className="lumx-spacing-margin-bottom lumx-avatar lumx-avatar--size-xs lumx-avatar--theme-light"
   >
@@ -144,7 +144,7 @@ Array [
 `;
 
 exports[`<Avatar> Snapshots and structure should render story 'WithActions' 1`] = `
-Array [
+[
   <div
     className="lumx-avatar lumx-avatar--size-xs lumx-avatar--theme-light"
   >
@@ -437,7 +437,7 @@ Array [
 `;
 
 exports[`<Avatar> Snapshots and structure should render story 'WithBadge' 1`] = `
-Array [
+[
   <div
     className="lumx-spacing-margin-bottom lumx-avatar lumx-avatar--size-xs lumx-avatar--theme-light"
   >
@@ -592,7 +592,7 @@ Array [
 `;
 
 exports[`<Avatar> Snapshots and structure should render story 'WithRectangularImage' 1`] = `
-Array [
+[
   <div
     className="lumx-spacing-margin-bottom lumx-avatar lumx-avatar--size-xs lumx-avatar--theme-light"
   >

package/src/components/button/__snapshots__/ButtonRoot.test.tsx.snap

@@ -150,7 +150,7 @@ exports[`<ButtonRoot> Snapshots and structure should render custom link 1`] = `
       className="lumx-button lumx-button--color-dark"
       href="foo"
       style={
-        Object {
+        {
           "color": "red",
         }
       }

package/src/components/date-picker/__snapshots__/DatePicker.test.tsx.snap

@@ -4,7 +4,7 @@ exports[`<DatePicker> Snapshots and structure should render correctly 1`] = `
 <DatePickerControlled
   locale="fr"
   nextButtonProps={
-    Object {
+    {
       "label": "Next month",
     }
   }
@@ -12,7 +12,7 @@ exports[`<DatePicker> Snapshots and structure should render correctly 1`] = `
   onNextMonthChange={[Function]}
   onPrevMonthChange={[Function]}
   previousButtonProps={
-    Object {
+    {
       "label": "Previous month",
     }
   }

package/src/components/date-picker/__snapshots__/DatePickerField.test.tsx.snap

@@ -10,7 +10,7 @@ exports[`<DatePickerField> Snapshots and structure should render correctly 1`] =
     onKeyPress={[Function]}
     readOnly={true}
     textFieldRef={
-      Object {
+      {
         "current": null,
       }
     }
@@ -31,7 +31,7 @@ exports[`<DatePickerField> Snapshots and structure should render correctly when
     onKeyPress={[Function]}
     readOnly={true}
     textFieldRef={
-      Object {
+      {
         "current": null,
       }
     }

package/src/components/dialog/__snapshots__/Dialog.test.tsx.snap

@@ -12,14 +12,14 @@ exports[`<Dialog> Snapshots and structure should render story DialogFocusTrap 1`
   </Button>
   <Dialog
     focusElement={
-      Object {
+      {
         "current": null,
       }
     }
     isOpen={true}
     onClose={[Function]}
     parentElement={
-      Object {
+      {
         "current": undefined,
       }
     }
@@ -64,7 +64,7 @@ exports[`<Dialog> Snapshots and structure should render story DialogFocusTrap 1`
       <TextField
         className="lumx-spacing-margin-bottom-huge"
         inputRef={
-          Object {
+          {
             "current": null,
           }
         }
@@ -99,7 +99,7 @@ exports[`<Dialog> Snapshots and structure should render story DialogFocusTrap 1`
           isOpen={false}
           onClose={[Function]}
           parentElement={
-            Object {
+            {
               "current": null,
             }
           }
@@ -133,14 +133,14 @@ exports[`<Dialog> Snapshots and structure should render story DialogFocusTrap 1`
               label="Start date"
               locale="fr"
               nextButtonProps={
-                Object {
+                {
                   "label": "Next month",
                 }
               }
               onChange={[Function]}
               placeholder="Pick a date"
               previousButtonProps={
-                Object {
+                {
                   "label": "Previous month",
                 }
               }
@@ -151,14 +151,14 @@ exports[`<Dialog> Snapshots and structure should render story DialogFocusTrap 1`
               label="Start date"
               locale="fr"
               nextButtonProps={
-                Object {
+                {
                   "label": "Next month",
                 }
               }
               onChange={[Function]}
               placeholder="Pick a date"
               previousButtonProps={
-                Object {
+                {
                   "label": "Previous month",
                 }
               }
@@ -245,7 +245,7 @@ exports[`<Dialog> Snapshots and structure should render story DialogWithAlertDia
     isOpen={true}
     onClose={[Function]}
     parentElement={
-      Object {
+      {
         "current": undefined,
       }
     }
@@ -286,7 +286,7 @@ tertiam. Cras mattis iudicium purus sit amet fermentum
   </Dialog>
   <AlertDialog
     confirmProps={
-      Object {
+      {
         "label": "Confirm",
         "onClick": [Function],
       }
@@ -295,7 +295,7 @@ tertiam. Cras mattis iudicium purus sit amet fermentum
     kind="info"
     onClose={[Function]}
     parentElement={
-      Object {
+      {
         "current": undefined,
       }
     }
@@ -323,7 +323,7 @@ exports[`<Dialog> Snapshots and structure should render story DialogWithHeaderFo
     isOpen={true}
     onClose={[Function]}
     parentElement={
-      Object {
+      {
         "current": undefined,
       }
     }
@@ -375,7 +375,7 @@ exports[`<Dialog> Snapshots and structure should render story DialogWithHeaderFo
     isOpen={true}
     onClose={[Function]}
     parentElement={
-      Object {
+      {
         "current": undefined,
       }
     }
@@ -429,7 +429,7 @@ exports[`<Dialog> Snapshots and structure should render story DialogWithHeaderFo
     isOpen={true}
     onClose={[Function]}
     parentElement={
-      Object {
+      {
         "current": undefined,
       }
     }
@@ -473,7 +473,7 @@ exports[`<Dialog> Snapshots and structure should render story DialogWithHeaderFo
     isOpen={true}
     onClose={[Function]}
     parentElement={
-      Object {
+      {
         "current": undefined,
       }
     }
@@ -526,7 +526,7 @@ exports[`<Dialog> Snapshots and structure should render story LoadingDialog 1`]
     isOpen={true}
     onClose={[Function]}
     parentElement={
-      Object {
+      {
         "current": undefined,
       }
     }
@@ -568,7 +568,7 @@ exports[`<Dialog> Snapshots and structure should render story PreventDialogAutoC
     isOpen={true}
     onClose={[Function]}
     parentElement={
-      Object {
+      {
         "current": undefined,
       }
     }
@@ -625,7 +625,7 @@ exports[`<Dialog> Snapshots and structure should render story ScrollableDialog 1
     isOpen={true}
     onClose={[Function]}
     parentElement={
-      Object {
+      {
         "current": undefined,
       }
     }
@@ -709,7 +709,7 @@ exports[`<Dialog> Snapshots and structure should render story ScrollableDialogWi
     isOpen={true}
     onClose={[Function]}
     parentElement={
-      Object {
+      {
         "current": undefined,
       }
     }
@@ -803,7 +803,7 @@ exports[`<Dialog> Snapshots and structure should render story SimpleDialog 1`] =
     isOpen={true}
     onClose={[Function]}
     parentElement={
-      Object {
+      {
         "current": undefined,
       }
     }
@@ -846,7 +846,7 @@ exports[`<Dialog> Snapshots and structure should render story Sizes 1`] = `
     isOpen={true}
     onClose={[Function]}
     parentElement={
-      Object {
+      {
         "current": undefined,
       }
     }
@@ -931,7 +931,7 @@ exports[`<Dialog> Snapshots and structure should render story WithAnimationCallb
     onClose={[Function]}
     onVisibilityChange={[Function]}
     parentElement={
-      Object {
+      {
         "current": undefined,
       }
     }

package/src/components/dropdown/Dropdown.tsx

@@ -60,6 +60,8 @@ export interface DropdownProps extends GenericProps {
     placement?: Placement;
     /** Whether the focus should be set on the list when the dropdown is open or not. */
     shouldFocusOnOpen?: boolean;
+    /** Whether the dropdown should be rendered into a DOM node that exists outside the DOM hierarchy of the parent component. */
+    usePortal?: boolean;
     /** Whether the focus should go back on the anchor when dropdown closes and focus is within. */
     focusAnchorOnClose?: boolean;
     /**

package/src/components/dropdown/__snapshots__/Dropdown.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`<Dropdown> Snapshots and structure should render correctly 1`] = `
 <Popover
   anchorRef={
-    Object {
+    {
       "current": null,
     }
   }
@@ -15,7 +15,7 @@ exports[`<Dropdown> Snapshots and structure should render correctly 1`] = `
   fitWithinViewportHeight={true}
   focusAnchorOnClose={true}
   focusElement={
-    Object {
+    {
       "current": null,
     }
   }