@lumx/react 2.2.18-alpha-hooks.1 → 2.2.20-alpha.xss.datatable

package/src/components/tooltip/Tooltip.tsx

@@ -65,12 +65,9 @@ const ARROW_SIZE = 8;
  * @return React element.
  */
 export const Tooltip: Comp<TooltipProps, HTMLDivElement> = forwardRef((props, ref) => {
-    if (!DOCUMENT) {
-        // Can't render in SSR.
-        return null;
-    }
     const { label, children, className, delay, placement, forceOpen, ...forwardedProps } = props;
-    if (!label) {
+    // Disable in SSR or without a label.
+    if (!DOCUMENT || !label) {
         return <>{children}</>;
     }
 

package/src/components/tooltip/useTooltipOpen.tsx

@@ -95,13 +95,16 @@ export function useTooltipOpen(delay: number | undefined, anchorElement: HTMLEle
         );
 
         // Attach events
-        for (const [node, eventType, evenHandler] of events) {
-            node.addEventListener(eventType, evenHandler);
+        for (const [node, eventType, eventHandler] of events) {
+            node.addEventListener(eventType, eventHandler);
         }
         return () => {
+            // Clear pending timers.
+            if (timer) clearTimeout(timer);
+
             // Detach events.
-            for (const [node, eventType, evenHandler] of events) {
-                node.removeEventListener(eventType, evenHandler);
+            for (const [node, eventType, eventHandler] of events) {
+                node.removeEventListener(eventType, eventHandler);
             }
         };
     }, [anchorElement, delay]);

package/src/components/user-block/UserBlock.stories.tsx

@@ -17,7 +17,7 @@ export const Default = ({ theme }: any) => (
         theme={theme}
         name="Emmitt O. Lum"
         fields={['Creative developer', 'Denpasar']}
-        avatarProps={{ image: avatarImageKnob(), alt: 'Avatar' }}
+        avatarProps={{ image: avatarImageKnob() }}
         onMouseEnter={logAction('Mouse entered')}
         onMouseLeave={logAction('Mouse left')}
     />
@@ -30,7 +30,7 @@ export const Sizes = ({ theme }: any) =>
             theme={theme}
             name="Emmitt O. Lum"
             fields={['Creative developer', 'Denpasar']}
-            avatarProps={{ image: avatarImageKnob(), alt: 'Avatar' }}
+            avatarProps={{ image: avatarImageKnob() }}
             size={size}
             onMouseEnter={logAction('Mouse entered')}
             onMouseLeave={logAction('Mouse left')}
@@ -41,8 +41,9 @@ export const Clickable = ({ theme }: any) => {
     const baseProps = {
         theme,
         name: 'Emmitt O. Lum',
+        nameProps: { 'aria-label': 'Emmitt O. Lum - open user profile' },
         fields: ['Creative developer', 'Denpasar'],
-        avatarProps: { image: avatarImageKnob(), alt: 'Avatar' },
+        avatarProps: { image: avatarImageKnob() },
     } as any;
     return (
         <>
@@ -65,7 +66,6 @@ export const WithBadge = ({ theme }: any) => (
         fields={['Creative developer', 'Denpasar']}
         avatarProps={{
             image: avatarImageKnob(),
-            alt: 'Avatar',
             badge: (
                 <Badge color={ColorPalette.blue}>
                     <Icon icon={mdiStar} />

package/src/components/user-block/UserBlock.tsx

@@ -1,6 +1,7 @@
 import React, { forwardRef, ReactNode } from 'react';
 import isEmpty from 'lodash/isEmpty';
 import classNames from 'classnames';
+import set from 'lodash/set';
 
 import { Avatar, ColorPalette, Link, Orientation, Size, Theme } from '@lumx/react';
 import { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';
@@ -17,7 +18,7 @@ export type UserBlockSize = Extract<Size, 's' | 'm' | 'l'>;
  */
 export interface UserBlockProps extends GenericProps {
     /** Props to pass to the avatar. */
-    avatarProps?: AvatarProps;
+    avatarProps?: Omit<AvatarProps, 'alt'>;
     /** Additional fields used to describe the user. */
     fields?: string[];
     /** Props to pass to the link wrapping the avatar thumbnail. */
@@ -121,8 +122,12 @@ export const UserBlock: Comp<UserBlockProps, HTMLDivElement> = forwardRef((props
                 color: ColorPalette.dark,
             });
         }
+        // Disable avatar focus since the name block is the same link / same button.
+        if (avatarProps) {
+            set(avatarProps, ['thumbnailProps', 'tabIndex'], -1);
+        }
         return <NameComponent {...nProps}>{name}</NameComponent>;
-    }, [isClickable, linkAs, linkProps, name, nameProps, onClick]);
+    }, [avatarProps, isClickable, linkAs, linkProps, name, nameProps, onClick]);
 
     const fieldsBlock: ReactNode = fields && componentSize !== Size.s && (
         <div className={`${CLASSNAME}__fields`}>
@@ -149,7 +154,8 @@ export const UserBlock: Comp<UserBlockProps, HTMLDivElement> = forwardRef((props
                 <Avatar
                     linkAs={linkAs}
                     linkProps={linkProps}
-                    {...avatarProps}
+                    alt=""
+                    {...(avatarProps as any)}
                     className={classNames(`${CLASSNAME}__avatar`, avatarProps.className)}
                     size={componentSize}
                     onClick={onClick}

package/src/components/user-block/__snapshots__/UserBlock.test.tsx.snap

@@ -6,17 +6,23 @@ Array [
     className="lumx-user-block lumx-user-block--orientation-horizontal lumx-user-block--size-m lumx-user-block--theme-light lumx-user-block--is-clickable"
   >
     <Avatar
-      alt="Avatar"
+      alt=""
       className="lumx-user-block__avatar"
       image="/demo-assets/avatar1.jpg"
       onClick={[Function]}
       size="m"
       theme="light"
+      thumbnailProps={
+        Object {
+          "tabIndex": -1,
+        }
+      }
     />
     <div
       className="lumx-user-block__wrapper"
     >
       <Link
+        aria-label="Emmitt O. Lum - open user profile"
         className="lumx-user-block__name"
         color="dark"
         onClick={[Function]}
@@ -45,7 +51,7 @@ Array [
     className="lumx-user-block lumx-user-block--orientation-horizontal lumx-user-block--size-m lumx-user-block--theme-light lumx-user-block--is-clickable"
   >
     <Avatar
-      alt="Avatar"
+      alt=""
       className="lumx-user-block__avatar"
       image="/demo-assets/avatar1.jpg"
       linkProps={
@@ -55,11 +61,17 @@ Array [
       }
       size="m"
       theme="light"
+      thumbnailProps={
+        Object {
+          "tabIndex": -1,
+        }
+      }
     />
     <div
       className="lumx-user-block__wrapper"
     >
       <Link
+        aria-label="Emmitt O. Lum - open user profile"
         className="lumx-user-block__name"
         color="dark"
         href="https://example.com"
@@ -88,17 +100,23 @@ Array [
     className="lumx-user-block lumx-user-block--orientation-horizontal lumx-user-block--size-m lumx-user-block--theme-light lumx-user-block--is-clickable"
   >
     <Avatar
-      alt="Avatar"
+      alt=""
       className="lumx-user-block__avatar"
       image="/demo-assets/avatar1.jpg"
       linkAs={[Function]}
       size="m"
       theme="light"
+      thumbnailProps={
+        Object {
+          "tabIndex": -1,
+        }
+      }
     />
     <div
       className="lumx-user-block__wrapper"
     >
       <Link
+        aria-label="Emmitt O. Lum - open user profile"
         className="lumx-user-block__name"
         color="dark"
         linkAs={[Function]}
@@ -133,11 +151,16 @@ exports[`<UserBlock> Snapshots and structure should render story 'Default' 1`] =
   onMouseLeave={[Function]}
 >
   <Avatar
-    alt="Avatar"
+    alt=""
     className="lumx-user-block__avatar"
     image="/demo-assets/avatar1.jpg"
     size="m"
     theme="light"
+    thumbnailProps={
+      Object {
+        "tabIndex": -1,
+      }
+    }
   />
   <div
     className="lumx-user-block__wrapper"
@@ -175,11 +198,16 @@ Array [
     onMouseLeave={[Function]}
   >
     <Avatar
-      alt="Avatar"
+      alt=""
       className="lumx-user-block__avatar"
       image="/demo-assets/avatar1.jpg"
       size="s"
       theme="light"
+      thumbnailProps={
+        Object {
+          "tabIndex": -1,
+        }
+      }
     />
     <div
       className="lumx-user-block__wrapper"
@@ -197,11 +225,16 @@ Array [
     onMouseLeave={[Function]}
   >
     <Avatar
-      alt="Avatar"
+      alt=""
       className="lumx-user-block__avatar"
       image="/demo-assets/avatar1.jpg"
       size="m"
       theme="light"
+      thumbnailProps={
+        Object {
+          "tabIndex": -1,
+        }
+      }
     />
     <div
       className="lumx-user-block__wrapper"
@@ -235,11 +268,16 @@ Array [
     onMouseLeave={[Function]}
   >
     <Avatar
-      alt="Avatar"
+      alt=""
       className="lumx-user-block__avatar"
       image="/demo-assets/avatar1.jpg"
       size="l"
       theme="light"
+      thumbnailProps={
+        Object {
+          "tabIndex": -1,
+        }
+      }
     />
     <div
       className="lumx-user-block__wrapper"
@@ -275,7 +313,7 @@ exports[`<UserBlock> Snapshots and structure should render story 'WithBadge' 1`]
   className="lumx-user-block lumx-user-block--orientation-horizontal lumx-user-block--size-m lumx-user-block--theme-light"
 >
   <Avatar
-    alt="Avatar"
+    alt=""
     badge={
       <Badge
         color="blue"
@@ -289,6 +327,11 @@ exports[`<UserBlock> Snapshots and structure should render story 'WithBadge' 1`]
     image="/demo-assets/avatar1.jpg"
     size="m"
     theme="light"
+    thumbnailProps={
+      Object {
+        "tabIndex": -1,
+      }
+    }
   />
   <div
     className="lumx-user-block__wrapper"

package/src/hooks/useBooleanState.tsx

@@ -1,19 +1,13 @@
-import { useState } from 'react';
+import { useCallback, useState } from 'react';
 
 export const useBooleanState = (defaultValue: boolean): [boolean, () => void, () => void, () => void] => {
     const [booleanValue, setBoolean] = useState<boolean>(defaultValue);
 
-    const setToFalse = () => {
-        setBoolean(false);
-    };
+    const setToFalse = useCallback(() => setBoolean(false), []);
 
-    const setToTrue = () => {
-        setBoolean(true);
-    };
+    const setToTrue = useCallback(() => setBoolean(true), []);
 
-    const toggleBoolean = () => {
-        setBoolean(!booleanValue);
-    };
+    const toggleBoolean = useCallback(() => setBoolean((previousValue) => !previousValue), []);
 
     return [booleanValue, setToFalse, setToTrue, toggleBoolean];
 };

package/src/hooks/useFocusTrap.ts

@@ -1,33 +1,7 @@
 import { useEffect } from 'react';
 
 import { DOCUMENT } from '@lumx/react/constants';
-
-/** CSS selector listing all tabbable elements. */
-const TABBABLE_ELEMENTS_SELECTOR = `a[href]:not([tabindex="-1"], [disabled], [aria-disabled]),
-button:not([tabindex="-1"], [disabled], [aria-disabled]),
-textarea:not([tabindex="-1"], [disabled], [aria-disabled]),
-input[type="text"]:not([tabindex="-1"], [disabled], [aria-disabled]),
-input[type="radio"]:not([tabindex="-1"], [disabled], [aria-disabled]),
-input[type="checkbox"]:not([tabindex="-1"], [disabled], [aria-disabled]),
-[tabindex]:not([tabindex="-1"], [disabled], [aria-disabled])`;
-
-/**
- * Get first and last elements focusable in an element.
- *
- * @param parentElement The element in which to search focusable elements.
- * @return first and last focusable elements
- */
-function getFocusable(parentElement: HTMLElement) {
-    const focusableElements = parentElement.querySelectorAll<HTMLElement>(TABBABLE_ELEMENTS_SELECTOR);
-
-    if (focusableElements.length <= 0) {
-        return {};
-    }
-
-    const first = focusableElements[0];
-    const last = focusableElements[focusableElements.length - 1];
-    return { first, last };
-}
+import { getFirstAndLastFocusable } from '@lumx/react/utils/focus/getFirstAndLastFocusable';
 
 /**
  * Add a key down event handler to the given root element (document.body by default) to trap the move of focus
@@ -55,7 +29,7 @@ export function useFocusTrap(
                 if (key !== 'Tab') {
                     return;
                 }
-                const focusable = getFocusable(focusZoneElement);
+                const focusable = getFirstAndLastFocusable(focusZoneElement);
 
                 // Prevent focus switch if no focusable available.
                 if (!focusable.first) {

package/src/stories/generated/Dialog/Demos.stories.tsx

@@ -6,4 +6,5 @@ export default { title: 'LumX components/dialog/Dialog Demos' };
 export { App as Alert } from './alert';
 export { App as Confirm } from './confirm';
 export { App as Default } from './default';
+export { App as Isloading } from './isloading';
 export { App as Sizes } from './sizes';

package/src/utils/focus/getFirstAndLastFocusable.test.ts

@@ -0,0 +1,128 @@
+import { getFirstAndLastFocusable } from '@lumx/react/utils/focus/getFirstAndLastFocusable';
+
+function htmlToElement(html: string): any {
+    const template = document.createElement('template');
+    template.innerHTML = html.trim();
+    return template.content.firstChild;
+}
+
+describe(getFirstAndLastFocusable.name, () => {
+    it('should get empty', () => {
+        const element = htmlToElement(`<div></div>`);
+        const focusable = getFirstAndLastFocusable(element);
+        expect(focusable).toEqual({});
+    });
+
+    it('should get single item', () => {
+        const element = htmlToElement(`<div><button /></div>`);
+        const focusable = getFirstAndLastFocusable(element);
+        expect(focusable.last).toBe(focusable.first);
+    });
+
+    it('should get first and last', () => {
+        const element = htmlToElement(`
+            <div>
+                <div>Non focusable div</div>
+                <button>Simple button</button>
+                <div>Non focusable div</div>
+                <input />
+                <div>Non focusable div</div>
+            </div>
+        `);
+        const focusable = getFirstAndLastFocusable(element);
+        expect(focusable.first).toMatchInlineSnapshot(`
+            <button>
+              Simple button
+            </button>
+        `);
+        expect(focusable.first).toMatchInlineSnapshot(`
+            <button>
+              Simple button
+            </button>
+        `);
+    });
+
+    describe('match focusable elements', () => {
+        it('should match input element', () => {
+            const element = htmlToElement(`<div><input /></div>`);
+            const focusable = getFirstAndLastFocusable(element);
+            expect(focusable.first).toMatchInlineSnapshot(`<input />`);
+        });
+
+        it('should match link element', () => {
+            const element = htmlToElement(`<div><a href="#" /></div>`);
+            const focusable = getFirstAndLastFocusable(element);
+            expect(focusable.first).toMatchInlineSnapshot(`
+                <a
+                  href="#"
+                />
+            `);
+        });
+
+        it('should match textarea element', () => {
+            const element = htmlToElement(`<div><textarea /></div>`);
+            const focusable = getFirstAndLastFocusable(element);
+            expect(focusable.first).toMatchInlineSnapshot(`
+                <textarea>
+                  &lt;/div&gt;
+                </textarea>
+            `);
+        });
+
+        it('should match element with tabindex', () => {
+            const element = htmlToElement(`<div><span tabindex="0" /></div>`);
+            const focusable = getFirstAndLastFocusable(element);
+            expect(focusable.first).toMatchInlineSnapshot(`
+                <span
+                  tabindex="0"
+                />
+            `);
+        });
+
+        it('should keep disabled=false', () => {
+            const element = htmlToElement(`<div><button disabled="false" /><button /></div>`);
+            const focusable = getFirstAndLastFocusable(element);
+            expect(focusable.first).toMatchInlineSnapshot(`
+                <button
+                  disabled="false"
+                />
+            `);
+        });
+
+        it('should keep aria-disabled=false', () => {
+            const element = htmlToElement(`<div><button aria-disabled="false" /><button /></div>`);
+            const focusable = getFirstAndLastFocusable(element);
+            expect(focusable.first).toMatchInlineSnapshot(`
+                <button
+                  aria-disabled="false"
+                />
+            `);
+        });
+    });
+
+    describe('skip disabled elements', () => {
+        it('should skip disabled', () => {
+            const element = htmlToElement(`<div><button disabled /><button /></div>`);
+            const focusable = getFirstAndLastFocusable(element);
+            expect(focusable.first).toMatchInlineSnapshot(`<button />`);
+        });
+
+        it('should skip aria-disabled', () => {
+            const element = htmlToElement(`<div><button aria-disabled /><button /></div>`);
+            const focusable = getFirstAndLastFocusable(element);
+            expect(focusable.first).toMatchInlineSnapshot(`<button />`);
+        });
+
+        it('should skip tabindex=-1', () => {
+            const element = htmlToElement(`<div><button tabindex="-1" /><button /></div>`);
+            const focusable = getFirstAndLastFocusable(element);
+            expect(focusable.first).toMatchInlineSnapshot(`<button />`);
+        });
+
+        it('should skip input type hidden', () => {
+            const element = htmlToElement(`<div><input type="hidden" /><button /></div>`);
+            const focusable = getFirstAndLastFocusable(element);
+            expect(focusable.first).toMatchInlineSnapshot(`<button />`);
+        });
+    });
+});

package/src/utils/focus/getFirstAndLastFocusable.ts

@@ -0,0 +1,27 @@
+/** CSS selector listing all tabbable elements. */
+const TABBABLE_ELEMENTS_SELECTOR = `a[href], button, textarea, input:not([type="hidden"]), [tabindex]`;
+
+/** CSS selector matching element that are disabled (should not receive focus). */
+const DISABLED_SELECTOR = `[tabindex="-1"], [disabled]:not([disabled="false"]), [aria-disabled]:not([aria-disabled="false"])`;
+
+const isNotDisabled = (element: HTMLElement) => !element.matches(DISABLED_SELECTOR);
+
+/**
+ * Get first and last elements focusable in an element.
+ *
+ * @param parentElement The element in which to search focusable elements.
+ * @return first and last focusable elements
+ */
+export function getFirstAndLastFocusable(parentElement: HTMLElement) {
+    const focusableElements = Array.from(parentElement.querySelectorAll<HTMLElement>(TABBABLE_ELEMENTS_SELECTOR));
+
+    // First non disabled element.
+    const first = focusableElements.find(isNotDisabled);
+    // Last non disabled element.
+    const last = focusableElements.reverse().find(isNotDisabled);
+
+    if (last && first) {
+        return { first, last };
+    }
+    return {};
+}

package/{index.d.ts → types.d.ts}

@@ -1,4 +1,4 @@
-// Generated by dts-bundle-generator v5.9.0
+// Generated by dts-bundle-generator v5.6.0
 
 /// <reference types="react" />
 
@@ -476,9 +476,7 @@ export declare type HTMLButtonProps = DetailedHTMLProps<ButtonHTMLAttributes<HTM
  * Button size definition.
  */
 export declare type ButtonSize = Extract<Size, "s" | "m">;
-export interface BaseButtonProps extends GenericProps {
-	/** ARIA button label. */
-	["aria-label"]?: string;
+export interface BaseButtonProps extends GenericProps, Pick<AriaAttributes, "aria-expanded" | "aria-haspopup" | "aria-pressed" | "aria-label"> {
 	/** Color variant. */
 	color?: Color;
 	/** Emphasis variant. */
@@ -671,7 +669,7 @@ export interface ChipGroupProps extends GenericProps {
 	children: ReactNode;
 }
 export declare const ChipGroup: Comp<ChipGroupProps, HTMLDivElement> & {
-	useChipGroupNavigation: import("@lumx/react/hooks/useChipGroupNavigation").useChipGroupNavigationType<any>;
+	useChipGroupNavigation: import("../../hooks/useChipGroupNavigation").useChipGroupNavigationType<any>;
 };
 /**
  * Comment block variants.
@@ -1495,7 +1493,7 @@ export interface ListProps extends GenericProps {
 	onListItemSelected?(key: Key, index: number, evt: SyntheticEvent): void;
 }
 export declare const List: Comp<ListProps, HTMLUListElement> & {
-	useKeyboardListNavigation: import("@lumx/react/hooks/useKeyboardListNavigation").useKeyboardListNavigationType;
+	useKeyboardListNavigation: import("../../hooks/useKeyboardListNavigation").useKeyboardListNavigationType;
 };
 export declare type ListItemSize = Extract<Size, "tiny" | "regular" | "big" | "huge">;
 /**
@@ -1957,6 +1955,11 @@ export interface SideNavigationItemProps extends GenericProps {
 	linkProps?: React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;
 	/** Props to pass to the toggle button (minus those already set by the SideNavigationItem props). */
 	toggleButtonProps: Pick<IconButtonProps, "label"> & Omit<IconButtonProps, "label" | "onClick" | "icon" | "emphasis" | "color" | "size">;
+	/**
+	 * Choose how the children are hidden when closed
+	 * ('hide' keeps the children in DOM but hide them, 'unmount' remove the children from the DOM).
+	 */
+	closeMode?: "hide" | "unmount";
 	/** On action button click callback. */
 	onActionClick?(evt: React.MouseEvent): void;
 	/** On click callback. */
@@ -2220,8 +2223,8 @@ export interface SlideshowControlsProps extends GenericProps {
 	playButtonProps?: Pick<IconButtonProps, "label"> & Omit<IconButtonProps, "label" | "onClick" | "icon" | "emphasis" | "color">;
 }
 export declare const SlideshowControls: Comp<SlideshowControlsProps, HTMLDivElement> & {
-	useSlideshowControls: ({ activeIndex, groupBy, interval, autoPlay, defaultActiveIndex, onChange, itemsCount, id, slidesId, }: import("@lumx/react/hooks/useSlideshowControls").UseSlideshowControlsOptions) => import("@lumx/react/hooks/useSlideshowControls").UseSlideshowControls;
-	useSlideshowControlsDefaultOptions: Partial<import("@lumx/react/hooks/useSlideshowControls").UseSlideshowControlsOptions>;
+	useSlideshowControls: ({ activeIndex, groupBy, interval, autoPlay, defaultActiveIndex, onChange, itemsCount, id, slidesId, }: import("../../hooks/useSlideshowControls").UseSlideshowControlsOptions) => import("../../hooks/useSlideshowControls").UseSlideshowControls;
+	useSlideshowControlsDefaultOptions: Partial<import("../../hooks/useSlideshowControls").UseSlideshowControlsOptions>;
 };
 export interface SlidesProps extends GenericProps {
 	/** current slide active */
@@ -2547,6 +2550,7 @@ export interface TextFieldProps extends GenericProps {
  * @return React element.
  */
 export declare const TextField: Comp<TextFieldProps, HTMLDivElement>;
+export declare const useFocusPointStyle: ({ image, aspectRatio, focusPoint, imgProps: { width, height } }: ThumbnailProps, element: HTMLImageElement | undefined, isLoaded: boolean) => CSSProperties;
 /**
  * Defines the props of the component.
  */
@@ -2640,7 +2644,7 @@ export declare type UserBlockSize = Extract<Size, "s" | "m" | "l">;
  */
 export interface UserBlockProps extends GenericProps {
 	/** Props to pass to the avatar. */
-	avatarProps?: AvatarProps;
+	avatarProps?: Omit<AvatarProps, "alt">;
 	/** Additional fields used to describe the user. */
 	fields?: string[];
 	/** Props to pass to the link wrapping the avatar thumbnail. */

package/esm/_internal/_rolluppluginbabelhelpers.53.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"_rolluppluginbabelhelpers.53.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/esm/_internal/alertdialog.1.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"alertdialog.1.js","sources":["../../../src/components/alert-dialog/AlertDialog.tsx"],"sourcesContent":["import React, { forwardRef } 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';\n\nimport { mdiAlert, mdiAlertCircle, mdiCheckCircle, mdiInformation } from '@lumx/icons/';\nimport { uid } from 'uid';\nimport { Comp, getRootClassName, handleBasicClasses } from '@lumx/react/utils';\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\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: Comp<AlertDialogProps, HTMLDivElement> = forwardRef((props, ref) => {\n    const {\n        id,\n        title,\n        className,\n        cancelProps,\n        confirmProps,\n        kind,\n        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 uniqueId = React.useMemo(() => id || uid(), [id]);\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","uniqueId","useMemo","uid","titleId","descriptionId","DescriptionElement","confirmLabel","label","confirmOnClick","onClick","forwardedConfirmProps","cancelLabel","cancelOnClick","forwardedCancelProps","role","classNames","handleBasicClasses","prefix","s","Emphasis","medium","displayName","defaultProps"],"mappings":"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"}