@lumx/react 3.20.1-alpha.8 → 3.21.0

package/package.json

@@ -6,17 +6,14 @@
         "url": "https://github.com/lumapps/design-system/issues"
     },
     "dependencies": {
-        "@lumx/core": "^3.20.1-alpha.8",
-        "@lumx/icons": "^3.20.1-alpha.8",
+        "@lumx/core": "^3.21.0",
+        "@lumx/icons": "^3.21.0",
         "@popperjs/core": "^2.5.4",
         "body-scroll-lock": "^3.1.5",
         "classnames": "^2.3.2",
         "react-is": ">=16.13.0",
         "react-popper": "^2.2.4"
     },
-    "installConfig": {
-        "hoistingLimits": "workspaces"
-    },
     "devDependencies": {
         "@babel/core": "^7.26.10",
         "@babel/plugin-proposal-class-properties": "^7.18.6",
@@ -33,7 +30,6 @@
         "@rollup/plugin-babel": "^6.0.4",
         "@rollup/plugin-commonjs": "^19.0.2",
         "@rollup/plugin-node-resolve": "16.0.0",
-        "@rollup/pluginutils": "5.2.0",
         "@storybook/addon-a11y": "^9.1.4",
         "@storybook/addon-docs": "^9.1.4",
         "@storybook/react-vite": "^9.1.4",
@@ -76,8 +72,8 @@
     },
     "peerDependencies": {
         "lodash": "4.17.21",
-        "react": ">= 17.0.2",
-        "react-dom": ">= 17.0.2"
+        "react": ">= 16.13.0",
+        "react-dom": ">= 16.13.0"
     },
     "description": "The official LumApps Design System (LumX) for React applications",
     "homepage": "https://github.com/lumapps/design-system",
@@ -107,5 +103,5 @@
         "build:storybook": "storybook build"
     },
     "sideEffects": false,
-    "version": "3.20.1-alpha.8"
+    "version": "3.21.0"
 }

package/src/components/alert-dialog/AlertDialog.stories.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable react-hooks/rules-of-hooks */
-import { RefObject, useRef } from 'react';
+import React, { RefObject, useRef } from 'react';
 import { Button, Link, Kind } from '@lumx/react';
 import { DIALOG_TRANSITION_DURATION } from '@lumx/core/js/constants';
 import { useBooleanState } from '@lumx/react/hooks/useBooleanState';

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

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
 import { queryByClassName } from '@lumx/react/testing/utils/queries';
 import { render } from '@testing-library/react';

package/src/components/autocomplete/Autocomplete.stories.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useRef, useState } from 'react';
+import React, { useMemo, useRef, useState } from 'react';
 
 import { Autocomplete, List, ListItem, Size } from '@lumx/react';
 

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

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { Dropdown, List, ListItem, Size, TextField } from '@lumx/react';
 import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
 import { getByClassName, getByTagName, queryByClassName } from '@lumx/react/testing/utils/queries';

package/src/components/autocomplete/Autocomplete.tsx

@@ -1,4 +1,4 @@
-import { ReactNode, SyntheticEvent, useRef } from 'react';
+import React, { ReactNode, SyntheticEvent, useRef } from 'react';
 
 import classNames from 'classnames';
 

package/src/components/autocomplete/AutocompleteMultiple.stories.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useRef, useState } from 'react';
+import React, { useMemo, useRef, useState } from 'react';
 
 import { AutocompleteMultiple, Chip, ChipGroup, Icon, List, ListItem, Size } from '@lumx/react';
 

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

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { Dropdown, List, ListItem, Size, TextField } from '@lumx/react';
 import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
 import { getByClassName, queryByClassName } from '@lumx/react/testing/utils/queries';

package/src/components/autocomplete/AutocompleteMultiple.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 
 import classNames from 'classnames';
 

package/src/components/avatar/Avatar.stories.tsx

@@ -1,4 +1,6 @@
 /* eslint-disable react/display-name */
+import React from 'react';
+
 import { mdiDelete, mdiEye, mdiPencil, mdiStar } from '@lumx/icons';
 import { AvatarSize, Badge, ColorPalette, FlexBox, Icon, IconButton, Size } from '@lumx/react';
 import { avatarImageArgType, AVATAR_IMAGES } from '@lumx/react/stories/controls/image';

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

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
 import { render } from '@testing-library/react';
 import { queryByClassName } from '@lumx/react/testing/utils/queries';

package/src/components/avatar/Avatar.tsx

@@ -1,4 +1,4 @@
-import { KeyboardEventHandler, MouseEventHandler, ReactElement, ReactNode } from 'react';
+import React, { KeyboardEventHandler, MouseEventHandler, ReactElement, ReactNode } from 'react';
 
 import classNames from 'classnames';
 

package/src/components/badge/Badge.stories.tsx

@@ -1,5 +1,6 @@
 import { mdiHeart } from '@lumx/icons';
 import { AspectRatio, Badge, ColorPalette, Icon, Size, Thumbnail, ThumbnailVariant } from '@lumx/react';
+import React from 'react';
 import { colorArgType } from '@lumx/react/stories/controls/color';
 import { withCombinations } from '@lumx/react/stories/decorators/withCombinations';
 import { withUndefined } from '@lumx/react/stories/controls/withUndefined';

package/src/components/badge/Badge.test.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { ColorPalette } from '@lumx/react';
 import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
 import { getByClassName } from '@lumx/react/testing/utils/queries';

package/src/components/badge/Badge.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 
 import classNames from 'classnames';
 

package/src/components/badge/BadgeWrapper.stories.tsx

@@ -1,5 +1,6 @@
 import { mdiAccount, mdiBee, mdiHeart } from '@lumx/icons';
 import { Badge, BadgeWrapper, Button, Chip, ColorPalette, FlexBox, Icon, Orientation, Size } from '@lumx/react';
+import React from 'react';
 
 export default {
     title: 'LumX components/badge/BadgeWrapper',

package/src/components/badge/BadgeWrapper.test.tsx

@@ -1,4 +1,6 @@
 import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
+import React from 'react';
+
 import omit from 'lodash/omit';
 import last from 'lodash/last';
 

package/src/components/badge/BadgeWrapper.tsx

@@ -1,4 +1,4 @@
-import { ReactElement, ReactNode } from 'react';
+import React, { ReactElement, ReactNode } from 'react';
 
 import classNames from 'classnames';
 

package/src/components/button/Button.stories.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import omit from 'lodash/omit';
 import pick from 'lodash/pick';
 

package/src/components/button/Button.test.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { mdiCheck, mdiPlus } from '@lumx/icons';
 import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
 import { render, screen, within } from '@testing-library/react';

package/src/components/button/Button.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import classNames from 'classnames';
 import isEmpty from 'lodash/isEmpty';
 

package/src/components/button/ButtonGroup.stories.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { Button, ButtonGroup, Emphasis, IconButton, Size } from '@lumx/react';
 import { mdiAbjadArabic, mdiFoodApple, mdiMenuDown } from '@lumx/icons';
 import { withCombinations } from '@lumx/react/stories/decorators/withCombinations';

package/src/components/button/ButtonGroup.test.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { mdiPlus } from '@lumx/icons';
 import { Button, IconButton } from '@lumx/react';
 import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';

package/src/components/button/ButtonGroup.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import classNames from 'classnames';
 
 import { GenericProps } from '@lumx/react/utils/type';

package/src/components/button/ButtonRoot.tsx

@@ -1,4 +1,4 @@
-import { AriaAttributes, ButtonHTMLAttributes, DetailedHTMLProps, RefObject } from 'react';
+import React, { AriaAttributes, ButtonHTMLAttributes, DetailedHTMLProps, RefObject } from 'react';
 
 import classNames from 'classnames';
 

package/src/components/button/IconButton.test.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
 import { Button } from '@lumx/react';
 import { render, screen } from '@testing-library/react';

package/src/components/button/IconButton.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { Emphasis, Icon, Size, Theme, ThemeProvider, Tooltip, TooltipProps } from '@lumx/react';
 import { BaseButtonProps, ButtonRoot } from '@lumx/react/components/button/ButtonRoot';
 import { getRootClassName } from '@lumx/core/js/utils/className';

package/src/components/checkbox/Checkbox.test.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
 
 import { getByClassName, getByTagName, queryByClassName } from '@lumx/react/testing/utils/queries';

package/src/components/chip/Chip.stories.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import omit from 'lodash/omit';
 import { mdiClose, mdiViewList } from '@lumx/icons';
 import { Chip, ChipProps, ColorPalette, Icon, Size, Theme } from '@lumx/react';

package/src/components/chip/Chip.test.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { Theme } from '@lumx/react';
 import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
 import { fireEvent, render, screen } from '@testing-library/react';

package/src/components/chip/Chip.tsx

@@ -1,4 +1,4 @@
-import { MouseEventHandler, ReactNode } from 'react';
+import React, { MouseEventHandler, ReactNode } from 'react';
 
 import classNames from 'classnames';
 import isFunction from 'lodash/isFunction';

package/src/components/chip/ChipGroup.stories.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { Chip, ChipGroup, Size } from '@lumx/react';
 
 export default {

package/src/components/chip/ChipGroup.test.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { render } from '@testing-library/react';
 import { getByClassName } from '@lumx/react/testing/utils/queries';
 import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';

package/src/components/chip/ChipGroup.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 
 import classNames from 'classnames';
 

package/src/components/comment-block/CommentBlock.stories.tsx

@@ -1,4 +1,5 @@
 /* eslint-disable react/jsx-key,react/display-name */
+import React from 'react';
 import { mdiDotsHorizontal, mdiHeart, mdiReply } from '@lumx/icons';
 import { Button, CommentBlock } from '@lumx/react';
 import { IconButton } from '@lumx/react/components/button/IconButton';

package/src/components/comment-block/CommentBlock.test.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
 
 import { render } from '@testing-library/react';

package/src/components/comment-block/CommentBlock.tsx

@@ -1,4 +1,4 @@
-import { Children, ReactNode } from 'react';
+import React, { Children, ReactNode } from 'react';
 
 import classNames from 'classnames';
 

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

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { DatePickerProps } from '@lumx/react';
 import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
 import { getByClassName } from '@lumx/react/testing/utils/queries';

package/src/components/date-picker/DatePicker.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import React, { useState } from 'react';
 
 import { addMonthResetDay } from '@lumx/react/utils/date/addMonthResetDay';
 import { isDateValid } from '@lumx/react/utils/date/isDateValid';

package/src/components/date-picker/DatePickerControlled.test.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { render, screen, waitFor } from '@testing-library/react';
 import { getByClassName, queryByClassName } from '@lumx/react/testing/utils/queries';
 import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';

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

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
 import { render, screen } from '@testing-library/react';
 import { getByClassName, getByTagName, queryByClassName } from '@lumx/react/testing/utils/queries';

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

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { Dialog, DialogProps } from '@lumx/react/components/dialog/Dialog';
 import { queryByClassName } from '@lumx/react/testing/utils/queries';
 import { render, screen } from '@testing-library/react';

package/src/components/divider/Divider.test.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
 
 import { Theme } from '@lumx/react';

package/src/components/divider/Divider.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import classNames from 'classnames';
 
 import { Theme } from '@lumx/react';

package/src/components/drag-handle/DragHandle.test.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
 
 import { render } from '@testing-library/react';

package/src/components/drag-handle/DragHandle.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import classNames from 'classnames';
 
 import { mdiDragVertical } from '@lumx/icons';

package/src/components/dropdown/Dropdown.stories.tsx

@@ -1,5 +1,5 @@
 import range from 'lodash/range';
-import { useRef, useState } from 'react';
+import React, { useRef, useState } from 'react';
 
 import { Button, Dropdown, List, ListItem } from '@lumx/react';
 

package/src/components/dropdown/Dropdown.tsx

@@ -1,4 +1,4 @@
-import { cloneElement, useMemo, useRef } from 'react';
+import React, { cloneElement, useMemo, useRef } from 'react';
 
 import classNames from 'classnames';
 

package/src/components/expansion-panel/ExpansionPanel.test.tsx

@@ -1,4 +1,6 @@
 import { Mock } from 'vitest';
+import React from 'react';
+
 import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
 import { queryByRole, render, screen } from '@testing-library/react';
 import { getByClassName, queryByClassName } from '@lumx/react/testing/utils/queries';

package/src/components/flag/Flag.test.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { ColorPalette, Theme } from '@lumx/react';
 import { mdiAbTesting } from '@lumx/icons';
 import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';

package/src/components/flag/Flag.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import classNames from 'classnames';
 
 import { ColorPalette, Icon, Size, Theme, Text } from '@lumx/react';

package/src/components/flex-box/FlexBox.stories.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { Alignment, Button, IconButton, Orientation, Size, Text } from '@lumx/react';
 
 import { getSelectArgType } from '@lumx/react/stories/controls/selectArgType';

package/src/components/flex-box/FlexBox.test.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
 
 import { queryByClassName } from '@lumx/react/testing/utils/queries';

package/src/components/flex-box/FlexBox.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 
 import classNames from 'classnames';
 import castArray from 'lodash/castArray';

package/src/components/generic-block/GenericBlock.test.tsx

@@ -1,4 +1,4 @@
-import { createRef } from 'react';
+import React, { createRef } from 'react';
 
 import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
 import { render } from '@testing-library/react';

package/src/components/grid/Grid.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import classNames from 'classnames';
 
 import { Alignment, Orientation, Size } from '@lumx/react';

package/src/components/grid/GridItem.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import classNames from 'classnames';
 
 import { Alignment } from '@lumx/react';

package/src/components/grid-column/GridColumn.stories.tsx

@@ -1,4 +1,5 @@
 /* eslint-disable react/display-name */
+import React from 'react';
 import range from 'lodash/range';
 
 import { GridColumn, GridColumnProps } from '@lumx/react/components/grid-column/GridColumn';

package/src/components/grid-column/GridColumn.test.jsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
 import { render } from '@testing-library/react';
 import { getByClassName } from '@lumx/react/testing/utils/queries';

package/src/components/grid-column/GridColumn.tsx

@@ -1,4 +1,4 @@
-import { ReactElement, ReactNode } from 'react';
+import React, { ReactElement, ReactNode } from 'react';
 
 import isInteger from 'lodash/isInteger';
 import classNames from 'classnames';

package/src/components/heading/Heading.stories.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { headingElementArgType, HEADING_ELEMENTS } from '@lumx/react/stories/controls/element';
 import { withCombinations } from '@lumx/react/stories/decorators/withCombinations';
 import { ALL_TYPOGRAPHY } from '@lumx/react/stories/controls/typography';

package/src/components/heading/Heading.test.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { render, screen } from '@testing-library/react';
 
 import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';

package/src/components/heading/Heading.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import classNames from 'classnames';
 
 import { HeadingElement } from '@lumx/react/utils/type';

package/src/components/heading/HeadingLevelProvider.tsx

@@ -1,5 +1,5 @@
 import { HeadingElement } from '@lumx/react/utils/type';
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 import { MAX_HEADING_LEVEL } from './constants';
 import { HeadingLevelContext } from './context';
 import { useHeadingLevel } from './useHeadingLevel';

package/src/components/icon/Icon.test.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { mdiAlertCircle } from '@lumx/icons';
 import { ColorPalette, ColorVariant, Size, Theme } from '@lumx/react';
 import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';