@lumx/react 3.20.1-alpha.5 → 3.20.1-alpha.50

package/package.json

@@ -6,77 +6,58 @@
         "url": "https://github.com/lumapps/design-system/issues"
     },
     "dependencies": {
-        "@lumx/core": "^3.20.1-alpha.5",
-        "@lumx/icons": "^3.20.1-alpha.5",
+        "@lumx/core": "^3.20.1-alpha.50",
+        "@lumx/icons": "^3.20.1-alpha.50",
         "@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"
     },
     "devDependencies": {
         "@babel/core": "^7.26.10",
-        "@babel/plugin-proposal-class-properties": "^7.18.6",
-        "@babel/plugin-proposal-export-default-from": "^7.25.9",
-        "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
-        "@babel/plugin-proposal-object-rest-spread": "^7.20.7",
-        "@babel/plugin-proposal-optional-chaining": "^7.21.0",
-        "@babel/plugin-proposal-private-methods": "^7.18.6",
-        "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
-        "@babel/preset-env": "^7.26.9",
         "@babel/preset-react": "^7.26.3",
         "@babel/preset-typescript": "^7.26.0",
         "@chromatic-com/storybook": "^4.1.1",
-        "@rollup/plugin-babel": "^6.0.4",
-        "@rollup/plugin-commonjs": "^19.0.2",
-        "@rollup/plugin-node-resolve": "16.0.0",
-        "@rollup/pluginutils": "5.2.0",
+        "@rollup/plugin-babel": "^6.1.0",
+        "@rollup/plugin-commonjs": "^29.0.0",
+        "@rollup/plugin-node-resolve": "^16.0.3",
         "@storybook/addon-a11y": "^9.1.4",
         "@storybook/addon-docs": "^9.1.4",
         "@storybook/react-vite": "^9.1.4",
-        "@testing-library/dom": "^9.3.4",
-        "@testing-library/jest-dom": "^5.16.4",
+        "@testing-library/dom": "^10.4.1",
         "@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/dom-view-transitions": "^1.0.5",
-        "@types/jest": "^29.2.1",
         "@types/lodash": "^4.14.149",
         "@types/react": "^17.0.2",
         "@types/react-dom": "^17.0.2",
-        "@types/react-is": "^17.0.2",
+        "@vitest/ui": "^3.0.0",
         "autoprefixer": "^9.7.4",
-        "babel-jest": "29.1.2",
-        "babel-loader": "^8.0.6",
         "chromatic": "^13.1.4",
-        "core-js": "^3.6.4",
         "focus-visible": "^5.0.2",
         "glob": "^7.1.6",
-        "install-peers-cli": "^2.2.0",
-        "is-ci": "^2.0.0",
-        "jest": "29.1.2",
-        "jest-environment-jsdom": "29.1.2",
-        "node-notifier": "^10.0.1",
+        "jsdom": "^27.2.0",
+        "lodash": "4.17.21",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
-        "rollup": "3.29.5",
+        "rollup": "^4.53.3",
         "rollup-plugin-analyzer": "^4.0.0",
         "rollup-plugin-cleaner": "^1.0.0",
         "rollup-plugin-copy": "^3.5.0",
-        "rollup-plugin-dts": "^6.1.1",
+        "rollup-plugin-dts": "^6.3.0",
         "rollup-plugin-peer-deps-external": "^2.2.4",
         "rollup-plugin-ts-paths-resolve": "^1.7.1",
         "storybook": "^9.1.4",
         "typescript": "^5.4.3",
         "vite": "^6.3.5",
         "vite-tsconfig-paths": "^5.1.4",
-        "yargs": "^15.4.1"
+        "vitest": "^3.0.0"
     },
     "peerDependencies": {
         "lodash": "4.17.21",
-        "react": ">= 17.0.0",
-        "react-dom": ">= 17.0.0"
+        "react": ">= 17.0.2",
+        "react-dom": ">= 17.0.2"
     },
     "description": "The official LumApps Design System (LumX) for React applications",
     "homepage": "https://github.com/lumapps/design-system",
@@ -87,6 +68,7 @@
         "React"
     ],
     "license": "MIT",
+    "type": "module",
     "module": "index.js",
     "main": "index.js",
     "types": "index.d.ts",
@@ -100,11 +82,10 @@
     },
     "scripts": {
         "build": "rollup -c",
-        "prepare": "install-peers || exit 0",
-        "test": "jest --config jest/index.js --coverage --notify --passWithNoTests --detectOpenHandles --runInBand",
+        "test": "vitest run",
         "start:storybook": "storybook dev -p 9000",
         "build:storybook": "storybook build"
     },
     "sideEffects": false,
-    "version": "3.20.1-alpha.5"
+    "version": "3.20.1-alpha.50"
 }

package/utils/index.d.ts

@@ -1,5 +1,6 @@
-import React, { RefObject } from 'react';
-import { F as Falsy } from '../_internal/Falsy.js';
+import React__default, { RefObject } from 'react';
+import { Falsy } from '@lumx/core/js/types';
+import * as _lumx_core_js_utils_classNames_bem_generateBEMClass from '@lumx/core/js/utils/classNames/bem/generateBEMClass';
 
 interface ClickAwayParameters {
     /**
@@ -40,23 +41,23 @@ type PortalInit = () => {
     teardown?: () => void;
 };
 interface PortalProviderProps {
-    children?: React.ReactNode;
+    children?: React__default.ReactNode;
     value: PortalInit;
 }
 /**
  * Customize where <Portal> wrapped elements render (tooltip, popover, dialog, etc.)
  */
-declare const PortalProvider: React.FC<PortalProviderProps>;
+declare const PortalProvider: React__default.FC<PortalProviderProps>;
 
 interface PortalProps {
     enabled?: boolean;
-    children: React.ReactNode;
+    children: React__default.ReactNode;
 }
 /**
  * Render children in a portal outside the current DOM position
  * (defaults to `document.body` but can be customized with the PortalContextProvider)
  */
-declare const Portal: React.FC<PortalProps>;
+declare const Portal: React__default.FC<PortalProps>;
 
 /** Disable state */
 type DisabledStateContextValue = {
@@ -65,7 +66,7 @@ type DisabledStateContextValue = {
     state: undefined | null;
 };
 type DisabledStateProviderProps = DisabledStateContextValue & {
-    children: React.ReactNode;
+    children: React__default.ReactNode;
 };
 /**
  * Disabled state provider.
@@ -77,4 +78,56 @@ declare function DisabledStateProvider({ children, ...value }: DisabledStateProv
  */
 declare function useDisabledStateContext(): DisabledStateContextValue;
 
-export { ClickAwayProvider, DisabledStateProvider, Portal, type PortalInit, type PortalProps, PortalProvider, type PortalProviderProps, useDisabledStateContext };
+// This is the only way I found to break circular references between ClassArray and ClassValue
+// https://github.com/Microsoft/TypeScript/issues/3496#issuecomment-128553540
+interface ClassArray extends Array<ClassValue> {} // tslint:disable-line no-empty-interface
+
+interface ClassDictionary {
+    [id: string]: any;
+}
+
+type ClassValue = string | number | ClassDictionary | ClassArray | undefined | null | boolean;
+
+/**
+ * Hook that provides BEM class name utilities for a component.
+ *
+ * @param className - Base component class name (kebab-case)
+ * @returns Object with `block` and `element` utility functions
+ *
+ * @example
+ * const { block, element } = useClassnames('my-component');
+ */
+declare function useClassnames(className: string): {
+    /**
+     * Generates BEM block class names with optional modifiers.
+     *
+     * @param modifier - Modifier string, object, or additional class names
+     * @param additionalClasses - Additional CSS classes to append
+     * @returns Generated class name string
+     *
+     * @example
+     * block() // 'my-component'
+     * block('active') // 'my-component my-component--active'
+     * block({ active: true, disabled: false }) // 'my-component my-component--active'
+     * block(['custom-class']) // 'my-component custom-class'
+     */
+    block: (modifier?: _lumx_core_js_utils_classNames_bem_generateBEMClass.Modifier | undefined, additionalClasses?: ClassValue | ClassValue[]) => string;
+    /**
+     * Generates BEM element class names with optional modifiers.
+     *
+     * @param elementName - Element name
+     * @param modifier - Modifier string, object, or additional class names
+     * @param additionalClasses - Additional CSS classes to append
+     * @returns Generated class name string
+     *
+     * @example
+     * element('header') // 'my-component__header'
+     * element('header', 'large') // 'my-component__header my-component__header--large'
+     * element('header', { large: true, small: false }) // 'my-component__header my-component__header--large'
+     * element('header', ['custom-class']) // 'my-component__header custom-class'
+     */
+    element: (elem: string, modifier?: _lumx_core_js_utils_classNames_bem_generateBEMClass.Modifier | undefined, additionalClasses?: ClassValue | ClassValue[]) => string;
+};
+
+export { ClickAwayProvider, DisabledStateProvider, Portal, PortalProvider, useClassnames, useDisabledStateContext };
+export type { PortalInit, PortalProps, PortalProviderProps };

package/utils/index.js

@@ -1,2 +1,2 @@
-export { C as ClickAwayProvider, D as DisabledStateProvider, P as Portal, b as PortalProvider, u as useDisabledStateContext } from '../_internal/index.js';
+export { C as ClickAwayProvider, D as DisabledStateProvider, P as Portal, a as PortalProvider, b as useClassnames, u as useDisabledStateContext } from '../_internal/Cd8LPzmx.js';
 //# sourceMappingURL=index.js.map

package/_internal/Falsy.d.ts

@@ -1,7 +0,0 @@
-/**
- * JS falsy values.
- * (excluding `NaN` as it can't be distinguished from `number`)
- */
-type Falsy = false | undefined | null | 0 | '';
-
-export type { Falsy as F };

package/_internal/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":["../../src/utils/disabled/DisabledStateContext.tsx","../../src/hooks/useClickAway.tsx","../../src/utils/ClickAwayProvider/ClickAwayProvider.tsx","../../src/utils/Portal/PortalProvider.tsx","../../src/utils/Portal/Portal.tsx"],"sourcesContent":["import React, { useContext } from 'react';\n\n/** Disable state */\ntype DisabledStateContextValue =\n    | {\n          state: 'disabled';\n      }\n    | { state: undefined | null };\n\nexport const DisabledStateContext = React.createContext<DisabledStateContextValue>({ state: null });\n\nexport type DisabledStateProviderProps = DisabledStateContextValue & {\n    children: React.ReactNode;\n};\n\n/**\n * Disabled state provider.\n * All nested LumX Design System components inherit this disabled state.\n */\nexport function DisabledStateProvider({ children, ...value }: DisabledStateProviderProps) {\n    return <DisabledStateContext.Provider value={value}>{children}</DisabledStateContext.Provider>;\n}\n\n/**\n * Get DisabledState context value\n */\nexport function useDisabledStateContext(): DisabledStateContextValue {\n    return useContext(DisabledStateContext);\n}\n","import { RefObject, useEffect } from 'react';\n\nimport { Falsy } from '@lumx/react/utils/type';\n\nimport isEmpty from 'lodash/isEmpty';\n\nconst EVENT_TYPES = ['mousedown', 'touchstart'];\n\nfunction isClickAway(targets: HTMLElement[], refs: Array<RefObject<HTMLElement>>): boolean {\n    // The targets elements are not contained in any of the listed element references.\n    return !refs.some((ref) => targets.some((target) => ref?.current?.contains(target)));\n}\n\nexport interface ClickAwayParameters {\n    /**\n     * A callback function to call when the user clicks away from the elements.\n     */\n    callback: EventListener | Falsy;\n    /**\n     * Elements considered within the click away context (clicking outside them will trigger the click away callback).\n     */\n    childrenRefs: RefObject<Array<RefObject<HTMLElement>>>;\n}\n\n/**\n * Listen to clicks away from the given elements and callback the passed in function.\n *\n * Warning: If you need to detect click away on nested React portals, please use the `ClickAwayProvider` component.\n */\nexport function useClickAway({ callback, childrenRefs }: ClickAwayParameters): void {\n    useEffect(() => {\n        const { current: currentRefs } = childrenRefs;\n        if (!callback || !currentRefs || isEmpty(currentRefs)) {\n            return undefined;\n        }\n        const listener: EventListener = (evt) => {\n            const targets = [evt.composedPath?.()[0], evt.target] as HTMLElement[];\n            if (isClickAway(targets, currentRefs)) {\n                callback(evt);\n            }\n        };\n\n        EVENT_TYPES.forEach((evtType) => document.addEventListener(evtType, listener));\n        return () => {\n            EVENT_TYPES.forEach((evtType) => document.removeEventListener(evtType, listener));\n        };\n    }, [callback, childrenRefs]);\n}\n","import React, { createContext, RefObject, useContext, useEffect, useMemo, useRef } from 'react';\nimport { ClickAwayParameters, useClickAway } from '@lumx/react/hooks/useClickAway';\n\ninterface ContextValue {\n    childrenRefs: Array<RefObject<HTMLElement>>;\n    addRefs(...newChildrenRefs: Array<RefObject<HTMLElement>>): void;\n}\n\nconst ClickAwayAncestorContext = createContext<ContextValue | null>(null);\n\ninterface ClickAwayProviderProps extends ClickAwayParameters {\n    /**\n     * (Optional) Element that should be considered as part of the parent\n     */\n    parentRef?: RefObject<HTMLElement>;\n    /**\n     * Children\n     */\n    children?: React.ReactNode;\n}\n\n/**\n * Component combining the `useClickAway` hook with a React context to hook into the React component tree and make sure\n * we take into account both the DOM tree and the React tree to detect click away.\n *\n * @return the react component.\n */\nexport const ClickAwayProvider: React.FC<ClickAwayProviderProps> = ({\n    children,\n    callback,\n    childrenRefs,\n    parentRef,\n}) => {\n    const parentContext = useContext(ClickAwayAncestorContext);\n    const currentContext = useMemo(() => {\n        const context: ContextValue = {\n            childrenRefs: [],\n            /**\n             * Add element refs to the current context and propagate to the parent context.\n             */\n            addRefs(...newChildrenRefs) {\n                // Add element refs that should be considered as inside the click away context.\n                context.childrenRefs.push(...newChildrenRefs);\n\n                if (parentContext) {\n                    // Also add then to the parent context\n                    parentContext.addRefs(...newChildrenRefs);\n                    if (parentRef) {\n                        // The parent element is also considered as inside the parent click away context but not inside the current context\n                        parentContext.addRefs(parentRef);\n                    }\n                }\n            },\n        };\n        return context;\n    }, [parentContext, parentRef]);\n\n    useEffect(() => {\n        const { current: currentRefs } = childrenRefs;\n        if (!currentRefs) {\n            return;\n        }\n        currentContext.addRefs(...currentRefs);\n    }, [currentContext, childrenRefs]);\n\n    useClickAway({ callback, childrenRefs: useRef(currentContext.childrenRefs) });\n    return <ClickAwayAncestorContext.Provider value={currentContext}>{children}</ClickAwayAncestorContext.Provider>;\n};\nClickAwayProvider.displayName = 'ClickAwayProvider';\n","import React from 'react';\n\ntype Container = DocumentFragment | Element;\n\n/**\n * Portal initializing function.\n * If it does not provide a container, the Portal children will render in classic React tree and not in a portal.\n */\nexport type PortalInit = () => {\n    container?: Container;\n    teardown?: () => void;\n};\n\nexport const PortalContext = React.createContext<PortalInit>(() => ({ container: document.body }));\n\nexport interface PortalProviderProps {\n    children?: React.ReactNode;\n    value: PortalInit;\n}\n\n/**\n * Customize where <Portal> wrapped elements render (tooltip, popover, dialog, etc.)\n */\nexport const PortalProvider: React.FC<PortalProviderProps> = PortalContext.Provider;\n","import React from 'react';\nimport { createPortal } from 'react-dom';\nimport { PortalContext } from './PortalProvider';\n\nexport interface PortalProps {\n    enabled?: boolean;\n    children: React.ReactNode;\n}\n\n/**\n * Render children in a portal outside the current DOM position\n * (defaults to `document.body` but can be customized with the PortalContextProvider)\n */\nexport const Portal: React.FC<PortalProps> = ({ children, enabled = true }) => {\n    const init = React.useContext(PortalContext);\n    const context = React.useMemo(\n        () => {\n            return enabled ? init() : null;\n        },\n        // Only update on 'enabled'\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n        [enabled],\n    );\n\n    React.useLayoutEffect(() => {\n        return context?.teardown;\n    }, [context?.teardown, enabled]);\n\n    if (!context?.container) {\n        return <>{children}</>;\n    }\n    return createPortal(children, context.container);\n};\n"],"names":["DisabledStateContext","React","createContext","state","DisabledStateProvider","_ref","children","value","_objectWithoutProperties","_excluded","_jsx","Provider","useDisabledStateContext","useContext","EVENT_TYPES","isClickAway","targets","refs","some","ref","target","_ref$current","current","contains","useClickAway","callback","childrenRefs","useEffect","currentRefs","isEmpty","undefined","listener","evt","_evt$composedPath","composedPath","call","forEach","evtType","document","addEventListener","removeEventListener","ClickAwayAncestorContext","ClickAwayProvider","parentRef","parentContext","currentContext","useMemo","context","addRefs","newChildrenRefs","push","useRef","displayName","PortalContext","container","body","PortalProvider","Portal","enabled","init","useLayoutEffect","teardown","_Fragment","createPortal"],"mappings":"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"}

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

@@ -1,127 +0,0 @@
-/* eslint-disable react-hooks/rules-of-hooks */
-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';
-import { withNestedProps } from '@lumx/react/stories/decorators/withNestedProps';
-import { loremIpsum } from '@lumx/react/stories/utils/lorem';
-import { getSelectArgType } from '@lumx/react/stories/controls/selectArgType';
-import { withChromaticForceScreenSize } from '../../stories/decorators/withChromaticForceScreenSize';
-import { AlertDialog } from './AlertDialog';
-import DialogStories from '../dialog/Dialog.stories';
-
-export default {
-    title: 'LumX components/alert-dialog/AlertDialog',
-    component: AlertDialog,
-    args: {
-        ...AlertDialog.defaultProps,
-        'confirmProps.label': 'Ok',
-    },
-    argTypes: {
-        size: DialogStories.argTypes.size,
-        kind: getSelectArgType(Kind),
-        'confirmProps.onClick': { action: true },
-    },
-    parameters: {
-        // Delay Chromatic snapshot to wait for dialog to open.
-        chromatic: {
-            pauseAnimationAtEnd: true,
-            delay: DIALOG_TRANSITION_DURATION,
-        },
-    },
-    decorators: [
-        // Force minimum chromatic screen size to make sure the dialog appears in view.
-        withChromaticForceScreenSize(),
-        withNestedProps(),
-    ],
-    render(props: any) {
-        const buttonRef = useRef() as RefObject<HTMLButtonElement>;
-        const [isOpen, close, open] = useBooleanState(true);
-        return (
-            <>
-                <Button ref={buttonRef} onClick={open}>
-                    Open dialog
-                </Button>
-                <AlertDialog {...props} isOpen={isOpen} onClose={close} parentElement={buttonRef} />
-            </>
-        );
-    },
-};
-
-/**
- * Alert dialog with default kind
- */
-export const DefaultKind = {
-    args: {
-        title: 'Default (info)',
-        children: loremIpsum('tiny'),
-    },
-};
-
-/**
- * Alert dialog as warning
- */
-export const Warning = {
-    args: {
-        ...DefaultKind.args,
-        kind: Kind.warning,
-        title: 'Warning',
-    },
-};
-
-/**
- * Alert dialog as success
- */
-export const Success = {
-    args: {
-        ...DefaultKind.args,
-        kind: Kind.success,
-        title: 'Success',
-    },
-};
-
-/**
- * Alert dialog as error
- */
-export const Error = {
-    args: {
-        ...DefaultKind.args,
-        kind: Kind.error,
-        title: 'Error',
-    },
-};
-
-/**
- * Alert dialog with cancel button
- */
-export const WithCancel = {
-    argTypes: {
-        'cancelProps.onClick': { action: true },
-    },
-    args: {
-        ...DefaultKind.args,
-        title: 'With Cancel',
-        'cancelProps.label': 'Cancel',
-    },
-};
-
-/**
- * Alert dialog with rich description
- */
-export const RichDescription = {
-    argTypes: { children: { control: false } },
-    args: {
-        ...DefaultKind.args,
-        title: 'With Rich Description',
-        children: (
-            <>
-                Amet ut elit dolore irure mollit <strong>sunt culpa esse</strong>.<br />
-                Ea ut Lorem.
-                <br />
-                <Link href="https://example.com" target="_blank">
-                    Link
-                </Link>
-            </>
-        ),
-    },
-};

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

@@ -1,35 +0,0 @@
-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';
-import { AlertDialog, AlertDialogProps } from './AlertDialog';
-
-jest.mock('@lumx/react/hooks/useId', () => ({ useId: () => ':r1:' }));
-
-const CLASSNAME = AlertDialog.className as string;
-
-/**
- * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
- */
-const setup = (propsOverride: Partial<AlertDialogProps> = {}) => {
-    const props: AlertDialogProps = {
-        title: 'Alert',
-        isOpen: true,
-        description: 'Deserunt et sunt qui consequat sint sit.',
-        confirmProps: { onClick: jest.fn(), label: 'OK' },
-        ...propsOverride,
-    };
-    render(<AlertDialog {...props} />);
-    const alertDialog = queryByClassName(document.body, CLASSNAME);
-    return { alertDialog, props };
-};
-
-describe(`<${AlertDialog.displayName}>`, () => {
-    // Common tests suite.
-    commonTestsSuiteRTL(setup, {
-        baseClassName: CLASSNAME,
-        forwardClassName: 'alertDialog',
-        forwardAttributes: 'alertDialog',
-    });
-});

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

@@ -1,189 +0,0 @@
-import React from 'react';
-
-import classNames from 'classnames';
-
-import {
-    DialogProps,
-    Dialog,
-    Button,
-    Emphasis,
-    ColorPalette,
-    Icon,
-    Size,
-    Kind,
-    Toolbar,
-    ButtonProps,
-} from '@lumx/react';
-import { mdiAlert, mdiAlertCircle, mdiCheckCircle, mdiInformation } from '@lumx/icons';
-import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
-import { useId } from '@lumx/react/hooks/useId';
-import { forwardRef } from '@lumx/react/utils/react/forwardRef';
-
-export interface AlertDialogProps extends Omit<DialogProps, 'header' | 'footer'> {
-    /** Message variant. */
-    kind?: Kind;
-    /** Dialog title. */
-    title?: string;
-    /** Props forwarded to the confirm button */
-    confirmProps: ButtonProps & {
-        onClick(): void;
-        label: string;
-    };
-    /**
-     * Props forwarded to the cancel button.
-     * Will not render a cancel button if undefined.
-     */
-    cancelProps?: ButtonProps & {
-        onClick(): void;
-        label: string;
-    };
-    /**
-     * Children
-     */
-    children?: React.ReactNode;
-}
-
-/**
- * Associative map from message kind to color and icon.
- */
-const CONFIG = {
-    [Kind.error]: { color: ColorPalette.red, icon: mdiAlert },
-    [Kind.info]: { color: ColorPalette.blue, icon: mdiInformation },
-    [Kind.success]: { color: ColorPalette.green, icon: mdiCheckCircle },
-    [Kind.warning]: { color: ColorPalette.yellow, icon: mdiAlertCircle },
-};
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'AlertDialog';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS: Partial<DialogProps> = {
-    size: Size.tiny,
-    kind: Kind.info,
-};
-
-/**
- * AlertDialog component.
- *
- * An alert dialog is a modal dialog that interrupts the user's workflow to
- * communicate an important message and acquire a response.
- *
- * It should not have a complex content.
- * Children of this component should only be strings, paragraphs or links.
- */
-export const AlertDialog = forwardRef<AlertDialogProps, HTMLDivElement>((props, ref) => {
-    const {
-        id,
-        title,
-        className,
-        cancelProps,
-        confirmProps,
-        kind = DEFAULT_PROPS.kind,
-        size = DEFAULT_PROPS.size,
-        dialogProps,
-        children,
-        ...forwardedProps
-    } = props;
-
-    const cancelButtonRef = React.useRef(null);
-    const confirmationButtonRef = React.useRef(null);
-    const { color, icon } = CONFIG[kind as Kind] || {};
-
-    // Define a unique ID to target title and description for aria attributes.
-    const generatedId = useId();
-    const uniqueId = id || generatedId;
-    const titleId = `${uniqueId}-title`;
-    const descriptionId = `${uniqueId}-description`;
-
-    // If content is a string, set in a paragraph.
-    const DescriptionElement = typeof children === 'string' ? 'p' : 'div';
-
-    const { label: confirmLabel, onClick: confirmOnClick, ...forwardedConfirmProps } = confirmProps;
-    const { label: cancelLabel, onClick: cancelOnClick, ...forwardedCancelProps } = cancelProps || {};
-
-    return (
-        <Dialog
-            ref={ref}
-            focusElement={cancelProps ? cancelButtonRef : confirmationButtonRef}
-            size={size}
-            dialogProps={{
-                id: uniqueId,
-                role: 'alertdialog',
-                'aria-labelledby': titleId,
-                'aria-describedby': descriptionId,
-                ...dialogProps,
-            }}
-            className={classNames(
-                className,
-                handleBasicClasses({
-                    kind,
-                    prefix: CLASSNAME,
-                }),
-            )}
-            {...forwardedProps}
-        >
-            <header>
-                <Toolbar
-                    className="lumx-spacing-margin-horizontal"
-                    before={<Icon icon={icon} size={Size.s} color={color} />}
-                    label={
-                        <h2 id={titleId} className="lumx-typography-title">
-                            {title}
-                        </h2>
-                    }
-                />
-            </header>
-
-            {children && (
-                <DescriptionElement
-                    id={descriptionId}
-                    className="lumx-typography-body2 lumx-spacing-padding-vertical-big lumx-spacing-padding-horizontal-huge"
-                >
-                    {children}
-                </DescriptionElement>
-            )}
-
-            <footer>
-                <Toolbar
-                    className="lumx-spacing-margin-horizontal"
-                    after={
-                        <>
-                            {cancelProps && (
-                                <Button
-                                    {...forwardedCancelProps}
-                                    ref={cancelButtonRef}
-                                    emphasis={Emphasis.medium}
-                                    onClick={cancelOnClick}
-                                >
-                                    {cancelLabel}
-                                </Button>
-                            )}
-                            <Button
-                                {...forwardedConfirmProps}
-                                ref={confirmationButtonRef}
-                                color={color}
-                                className="lumx-spacing-margin-left-regular"
-                                onClick={confirmOnClick}
-                            >
-                                {confirmLabel}
-                            </Button>
-                        </>
-                    }
-                />
-            </footer>
-        </Dialog>
-    );
-});
-
-AlertDialog.displayName = COMPONENT_NAME;
-AlertDialog.className = CLASSNAME;
-AlertDialog.defaultProps = DEFAULT_PROPS;

package/src/components/alert-dialog/index.ts

@@ -1 +0,0 @@
-export * from './AlertDialog';