@lumx/react 3.20.1-alpha.1 → 3.20.1-alpha.11

package/CONTRIBUTING.md

@@ -4,7 +4,7 @@ We'd love for you to contribute to our source code and to make it even better th
 
 ## Getting the source code
 
-To be able to contribute, you will have to use the global LumX package from our [GitHub repository](https://github.com/lumapps/design-system). You won't be able to contribute from the distributed packages `@lumx/<angularjs|react>`, so be sure to clone the repository before starting contributing:
+To be able to contribute, you will have to use the global LumX package from our [GitHub repository](https://github.com/lumapps/design-system). You won't be able to contribute from the distributed packages, so be sure to clone the repository before starting contributing:
 
 ```bash
 git clone git@github.com:lumapps/design-system.git
@@ -25,10 +25,6 @@ Here are the guidelines we'd like you to follow.
 -   [Coding rules](#coding-rules)
 -   [Git commit guidelines](#git-commit-guidelines)
 
-## <a name="code-of-conduct"></a> Code of Conduct
-
-As heavy users of [AngularJS](https://github.com/angular/angular.js) and [React](https://github.com/facebook/react/), we encourage you to read and follow the [AngularJS Code of Conduct](https://github.com/angular/code-of-conduct/blob/master/CODE_OF_CONDUCT.md) and the [React Code of Conduct](https://github.com/facebook/react/blob/master/CODE_OF_CONDUCT.md).
-
 ## <a name="got-a-question-or-a-problem-"></a> Got a question or a problem?
 
 If you have questions about how to use LumX, please direct these to [StackOverflow](http://stackoverflow.com/questions/tagged/LumX).

package/README.md

@@ -30,9 +30,7 @@ Please refer to our [contributing guidelines](CONTRIBUTING.md).
 
 Code and documentation copyright 2019 LumApps. Code released under the [MIT license](LICENSE.md).
 
-[angularjs]: https://angularjs.org/
 [react]: https://react.org/
 [material]: http://www.google.com/design/spec/material-design/introduction.html
-[angularjs-release]: https://www.npmjs.com/package/@lumx/angularjs
 [react-release]: https://www.npmjs.com/package/@lumx/react
 [webpack]: https://webpack.js.org/

package/_internal/01bc8fcf.js

@@ -0,0 +1,114 @@
+import { n as forwardRef, d as Emphasis, b as Theme, j as ColorPalette, l as classNames, _ as _extends, C as CSS_PREFIX } from './d3321a86.js';
+import './b3bfbe72.js';
+import { h as handleBasicClasses } from './4ceaf17c.js';
+import { R as RawClickable } from './432c85a7.js';
+import { u as useDisableStateProps } from './60923026.js';
+
+/**
+ * Button size definition.
+ */
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'ButtonRoot';
+const BUTTON_WRAPPER_CLASSNAME = `${CSS_PREFIX}-button-wrapper`;
+const BUTTON_CLASSNAME = `${CSS_PREFIX}-button`;
+
+/**
+ * Render a button wrapper with the ButtonRoot inside.
+ *
+ * @param  props Component props.
+ * @return React element.
+ */
+const renderButtonWrapper = props => {
+  const {
+    color,
+    emphasis,
+    variant,
+    fullWidth
+  } = props;
+  const adaptedColor = emphasis === Emphasis.low && (color === ColorPalette.light ? ColorPalette.dark : ColorPalette.light);
+  const wrapperClassName = classNames(handleBasicClasses({
+    color: adaptedColor,
+    prefix: BUTTON_WRAPPER_CLASSNAME,
+    variant,
+    fullWidth
+  }));
+  const buttonProps = {
+    ...props,
+    hasBackground: false
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: wrapperClassName
+  }, /*#__PURE__*/React.createElement(ButtonRoot, buttonProps));
+};
+
+/**
+ * ButtonRoot component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const ButtonRoot = forwardRef((props, ref) => {
+  const {
+    isAnyDisabled,
+    disabledStateProps,
+    otherProps
+  } = useDisableStateProps(props);
+  const {
+    'aria-label': ariaLabel,
+    children,
+    className,
+    color,
+    emphasis,
+    hasBackground,
+    isSelected,
+    isActive,
+    isFocused,
+    isHovered,
+    linkAs,
+    size,
+    theme,
+    variant,
+    fullWidth,
+    ...forwardedProps
+  } = otherProps;
+  const adaptedColor = color || emphasis !== Emphasis.high && theme === Theme.dark && ColorPalette.light || emphasis === Emphasis.high && ColorPalette.primary || ColorPalette.dark;
+  if (hasBackground) {
+    return renderButtonWrapper({
+      ...props,
+      ref,
+      variant,
+      color: adaptedColor
+    });
+  }
+  const buttonClassName = classNames(className, handleBasicClasses({
+    color: adaptedColor,
+    emphasis,
+    isSelected,
+    isDisabled: props.isDisabled || props['aria-disabled'],
+    isActive,
+    isFocused,
+    isHovered,
+    prefix: BUTTON_CLASSNAME,
+    size,
+    theme: emphasis === Emphasis.high && theme,
+    variant,
+    fullWidth
+  }));
+  return /*#__PURE__*/React.createElement(RawClickable, _extends({
+    as: linkAs || (forwardedProps.href ? 'a' : 'button')
+  }, forwardedProps, disabledStateProps, {
+    "aria-disabled": isAnyDisabled,
+    "aria-label": ariaLabel,
+    ref: ref,
+    className: buttonClassName
+  }), children);
+});
+ButtonRoot.displayName = COMPONENT_NAME;
+ButtonRoot.defaultProps = {};
+
+export { ButtonRoot as B };
+//# sourceMappingURL=01bc8fcf.js.map

package/_internal/01bc8fcf.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"01bc8fcf.js","sources":["../../src/components/button/ButtonRoot.tsx"],"sourcesContent":["import { AriaAttributes, ButtonHTMLAttributes, DetailedHTMLProps, RefObject } from 'react';\n\nimport classNames from 'classnames';\n\nimport { ColorPalette, Emphasis, Size, Theme } from '@lumx/react';\nimport { CSS_PREFIX } from '@lumx/react/constants';\nimport { GenericProps, HasTheme } from '@lumx/react/utils/type';\nimport { handleBasicClasses } from '@lumx/core/js/utils/className';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\nimport { HasAriaDisabled } from '@lumx/react/utils/type/HasAriaDisabled';\nimport { RawClickable } from '@lumx/react/utils/react/RawClickable';\nimport { useDisableStateProps } from '@lumx/react/utils/disabled';\n\ntype HTMLButtonProps = DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;\n\n/**\n * Button size definition.\n */\nexport type ButtonSize = Extract<Size, 's' | 'm'>;\n\nexport interface BaseButtonProps\n    extends GenericProps,\n        Pick<AriaAttributes, 'aria-expanded' | 'aria-haspopup' | 'aria-pressed' | 'aria-label'>,\n        HasTheme,\n        HasAriaDisabled {\n    /** Color variant. */\n    color?: ColorPalette;\n    /** Emphasis variant. */\n    emphasis?: Emphasis;\n    /** Whether or not the button has a background color in low emphasis. */\n    hasBackground?: boolean;\n    /** Native anchor href property. It determines whether the Button will be a <button> or an <a>. */\n    href?: string;\n    /** Whether the component is disabled or not. */\n    isDisabled?: boolean;\n    /** Whether the component is selected or not (unsupported in `high` emphasis). */\n    isSelected?: boolean;\n    /** Native button name property. */\n    name?: string;\n    /** Size variant. */\n    size?: ButtonSize;\n    /** Native anchor target property. */\n    target?: '_self' | '_blank' | '_parent' | '_top';\n    /** Native button type. */\n    type?: HTMLButtonProps['type'];\n    /** Custom react component for the link (can be used to inject react router Link). */\n    linkAs?: 'a' | any;\n}\n\nexport interface ButtonRootProps extends BaseButtonProps {\n    variant: 'button' | 'icon';\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'ButtonRoot';\n\nexport const BUTTON_WRAPPER_CLASSNAME = `${CSS_PREFIX}-button-wrapper`;\nexport const BUTTON_CLASSNAME = `${CSS_PREFIX}-button`;\n\n/**\n * Render a button wrapper with the ButtonRoot inside.\n *\n * @param  props Component props.\n * @return React element.\n */\nconst renderButtonWrapper: React.FC<ButtonRootProps> = (props) => {\n    const { color, emphasis, variant, fullWidth } = props;\n\n    const adaptedColor =\n        emphasis === Emphasis.low && (color === ColorPalette.light ? ColorPalette.dark : ColorPalette.light);\n\n    const wrapperClassName = classNames(\n        handleBasicClasses({\n            color: adaptedColor,\n            prefix: BUTTON_WRAPPER_CLASSNAME,\n            variant,\n            fullWidth,\n        }),\n    );\n    const buttonProps = { ...props, hasBackground: false };\n\n    return (\n        <div className={wrapperClassName}>\n            {/* eslint-disable-next-line @typescript-eslint/no-use-before-define */}\n            <ButtonRoot {...buttonProps} />\n        </div>\n    );\n};\n\n/**\n * ButtonRoot component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const ButtonRoot = forwardRef<ButtonRootProps, HTMLButtonElement | HTMLAnchorElement>((props, ref) => {\n    const { isAnyDisabled, disabledStateProps, otherProps } = useDisableStateProps(props);\n    const {\n        'aria-label': ariaLabel,\n        children,\n        className,\n        color,\n        emphasis,\n        hasBackground,\n        isSelected,\n        isActive,\n        isFocused,\n        isHovered,\n        linkAs,\n        size,\n        theme,\n        variant,\n        fullWidth,\n        ...forwardedProps\n    } = otherProps;\n\n    const adaptedColor =\n        color ||\n        (emphasis !== Emphasis.high && theme === Theme.dark && ColorPalette.light) ||\n        (emphasis === Emphasis.high && ColorPalette.primary) ||\n        ColorPalette.dark;\n\n    if (hasBackground) {\n        return renderButtonWrapper({ ...props, ref, variant, color: adaptedColor });\n    }\n\n    const buttonClassName = classNames(\n        className,\n        handleBasicClasses({\n            color: adaptedColor,\n            emphasis,\n            isSelected,\n            isDisabled: props.isDisabled || props['aria-disabled'],\n            isActive,\n            isFocused,\n            isHovered,\n            prefix: BUTTON_CLASSNAME,\n            size,\n            theme: emphasis === Emphasis.high && theme,\n            variant,\n            fullWidth,\n        }),\n    );\n\n    return (\n        <RawClickable\n            as={linkAs || (forwardedProps.href ? 'a' : 'button')}\n            {...forwardedProps}\n            {...disabledStateProps}\n            aria-disabled={isAnyDisabled}\n            aria-label={ariaLabel}\n            ref={ref as RefObject<HTMLButtonElement>}\n            className={buttonClassName}\n        >\n            {children}\n        </RawClickable>\n    );\n});\nButtonRoot.displayName = COMPONENT_NAME;\nButtonRoot.defaultProps = {};\n"],"names":["COMPONENT_NAME","BUTTON_WRAPPER_CLASSNAME","CSS_PREFIX","BUTTON_CLASSNAME","renderButtonWrapper","props","color","emphasis","variant","fullWidth","adaptedColor","Emphasis","low","ColorPalette","light","dark","wrapperClassName","classNames","handleBasicClasses","prefix","buttonProps","hasBackground","React","createElement","className","ButtonRoot","forwardRef","ref","isAnyDisabled","disabledStateProps","otherProps","useDisableStateProps","ariaLabel","children","isSelected","isActive","isFocused","isHovered","linkAs","size","theme","forwardedProps","high","Theme","primary","buttonClassName","isDisabled","RawClickable","_extends","as","href","displayName","defaultProps"],"mappings":"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"}

package/_internal/0361b7fb.js

@@ -0,0 +1,15 @@
+import { k as ColorVariant } from './d3321a86.js';
+import { r as resolveColorWithVariants } from './7b221b05.js';
+
+/**
+ * Returns the classname associated to the given color and variant.
+ * For example, for 'dark' and 'L2' it returns `lumx-color-font-dark-L2`
+ */
+function fontColorClass(propColor, propColorVariant) {
+  if (!propColor) return undefined;
+  const [color, colorVariant = ColorVariant.N] = resolveColorWithVariants(propColor, propColorVariant);
+  return `lumx-color-font-${color}-${colorVariant}`;
+}
+
+export { fontColorClass as f };
+//# sourceMappingURL=0361b7fb.js.map

package/_internal/0361b7fb.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"0361b7fb.js","sources":["../../../lumx-core/src/js/utils/className/fontColorClass.ts"],"sourcesContent":["import { ColorVariant, ColorWithVariants } from '../../constants';\nimport { resolveColorWithVariants } from './resolveColorWithVariants';\n\n/**\n * Returns the classname associated to the given color and variant.\n * For example, for 'dark' and 'L2' it returns `lumx-color-font-dark-L2`\n */\nexport function fontColorClass(propColor?: ColorWithVariants, propColorVariant?: ColorVariant) {\n    if (!propColor) return undefined;\n    const [color, colorVariant = ColorVariant.N] = resolveColorWithVariants(propColor, propColorVariant);\n    return `lumx-color-font-${color}-${colorVariant}`;\n}\n"],"names":["fontColorClass","propColor","propColorVariant","undefined","color","colorVariant","ColorVariant","N","resolveColorWithVariants"],"mappings":";;;AAGA;AACA;AACA;AACA;AACO,SAASA,cAAcA,CAACC,SAA6B,EAAEC,gBAA+B,EAAE;AAC3F,EAAA,IAAI,CAACD,SAAS,EAAE,OAAOE,SAAS,CAAA;AAChC,EAAA,MAAM,CAACC,KAAK,EAAEC,YAAY,GAAGC,YAAY,CAACC,CAAC,CAAC,GAAGC,wBAAwB,CAACP,SAAS,EAAEC,gBAAgB,CAAC,CAAA;AACpG,EAAA,OAAO,CAAmBE,gBAAAA,EAAAA,KAAK,CAAIC,CAAAA,EAAAA,YAAY,CAAE,CAAA,CAAA;AACrD;;;;"}

package/_internal/077b7bef.js

@@ -0,0 +1,29 @@
+import React__default, { useContext } from 'react';
+
+/** Disable state */
+
+const DisabledStateContext = /*#__PURE__*/React__default.createContext({
+  state: null
+});
+/**
+ * Disabled state provider.
+ * All nested LumX Design System components inherit this disabled state.
+ */
+function DisabledStateProvider({
+  children,
+  ...value
+}) {
+  return /*#__PURE__*/React__default.createElement(DisabledStateContext.Provider, {
+    value: value
+  }, children);
+}
+
+/**
+ * Get DisabledState context value
+ */
+function useDisabledStateContext() {
+  return useContext(DisabledStateContext);
+}
+
+export { DisabledStateProvider as D, useDisabledStateContext as u };
+//# sourceMappingURL=077b7bef.js.map

package/_internal/077b7bef.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"077b7bef.js","sources":["../../src/utils/disabled/DisabledStateContext.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"],"names":["DisabledStateContext","React","createContext","state","DisabledStateProvider","children","value","createElement","Provider","useDisabledStateContext","useContext"],"mappings":";;AAEA;;AAOO,MAAMA,oBAAoB,gBAAGC,cAAK,CAACC,aAAa,CAA4B;AAAEC,EAAAA,KAAK,EAAE,IAAA;AAAK,CAAC,CAAC,CAAA;AAMnG;AACA;AACA;AACA;AACO,SAASC,qBAAqBA,CAAC;EAAEC,QAAQ;EAAE,GAAGC,KAAAA;AAAkC,CAAC,EAAE;AACtF,EAAA,oBAAOL,cAAA,CAAAM,aAAA,CAACP,oBAAoB,CAACQ,QAAQ,EAAA;AAACF,IAAAA,KAAK,EAAEA,KAAAA;AAAM,GAAA,EAAED,QAAwC,CAAC,CAAA;AAClG,CAAA;;AAEA;AACA;AACA;AACO,SAASI,uBAAuBA,GAA8B;EACjE,OAAOC,UAAU,CAACV,oBAAoB,CAAC,CAAA;AAC3C;;;;"}

package/_internal/07e0bd90.js

@@ -0,0 +1,147 @@
+import { K as Kind, j as ColorPalette, m as getRootClassName, c as Size, n as forwardRef, _ as _extends, l as classNames, d as Emphasis } from './d3321a86.js';
+import React__default from 'react';
+import { h as handleBasicClasses } from './4ceaf17c.js';
+import { u as useId } from './3a1facc0.js';
+import { m as mdiAlert, a as mdiInformation } from './49bbeed3.js';
+import { m as mdiCheckCircle } from './de24f857.js';
+import { m as mdiAlertCircle, I as Icon } from './4e1dde79.js';
+import { Dialog } from './bba7d4c4.js';
+import { Toolbar } from './1e4b7ad5.js';
+import { a as Button } from './baa0a23b.js';
+
+/**
+ * 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 = {
+  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.
+ */
+const AlertDialog = forwardRef((props, ref) => {
+  const {
+    id,
+    title,
+    className,
+    cancelProps,
+    confirmProps,
+    kind = DEFAULT_PROPS.kind,
+    size = DEFAULT_PROPS.size,
+    dialogProps,
+    children,
+    ...forwardedProps
+  } = props;
+  const cancelButtonRef = React__default.useRef(null);
+  const confirmationButtonRef = React__default.useRef(null);
+  const {
+    color,
+    icon
+  } = CONFIG[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 /*#__PURE__*/React__default.createElement(Dialog, _extends({
+    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), /*#__PURE__*/React__default.createElement("header", null, /*#__PURE__*/React__default.createElement(Toolbar, {
+    className: "lumx-spacing-margin-horizontal",
+    before: /*#__PURE__*/React__default.createElement(Icon, {
+      icon: icon,
+      size: Size.s,
+      color: color
+    }),
+    label: /*#__PURE__*/React__default.createElement("h2", {
+      id: titleId,
+      className: "lumx-typography-title"
+    }, title)
+  })), children && /*#__PURE__*/React__default.createElement(DescriptionElement, {
+    id: descriptionId,
+    className: "lumx-typography-body2 lumx-spacing-padding-vertical-big lumx-spacing-padding-horizontal-huge"
+  }, children), /*#__PURE__*/React__default.createElement("footer", null, /*#__PURE__*/React__default.createElement(Toolbar, {
+    className: "lumx-spacing-margin-horizontal",
+    after: /*#__PURE__*/React__default.createElement(React__default.Fragment, null, cancelProps && /*#__PURE__*/React__default.createElement(Button, _extends({}, forwardedCancelProps, {
+      ref: cancelButtonRef,
+      emphasis: Emphasis.medium,
+      onClick: cancelOnClick
+    }), cancelLabel), /*#__PURE__*/React__default.createElement(Button, _extends({}, forwardedConfirmProps, {
+      ref: confirmationButtonRef,
+      color: color,
+      className: "lumx-spacing-margin-left-regular",
+      onClick: confirmOnClick
+    }), confirmLabel))
+  })));
+});
+AlertDialog.displayName = COMPONENT_NAME;
+AlertDialog.className = CLASSNAME;
+AlertDialog.defaultProps = DEFAULT_PROPS;
+
+export { AlertDialog };
+//# sourceMappingURL=07e0bd90.js.map

package/_internal/07e0bd90.js.map

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