@lumx/react 3.0.1 → 3.0.2-alpha-react-utils.1

package/_internal/a6fad025.d.ts

@@ -0,0 +1,107 @@
+import { l as GenericProps, m as HasTheme, k as Comp, n as ValueOf } from './eca6d4dc.js';
+
+/**
+ * Defines the props of the component.
+ */
+interface TableProps extends GenericProps, HasTheme {
+    /** Whether the table has checkbox or thumbnail on first cell or not. */
+    hasBefore?: boolean;
+    /** Whether the table has dividers or not. */
+    hasDividers?: boolean;
+}
+/**
+ * Table component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+declare const Table: Comp<TableProps, HTMLTableElement>;
+
+/**
+ * Defines the props of the component.
+ */
+declare type TableBodyProps = GenericProps;
+/**
+ * TableBody component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+declare const TableBody: Comp<TableBodyProps, HTMLTableSectionElement>;
+
+/**
+ * Table head cell sort order.
+ */
+declare const ThOrder: {
+    readonly asc: "asc";
+    readonly desc: "desc";
+};
+declare type ThOrder = ValueOf<typeof ThOrder>;
+/**
+ * Table cell variants.
+ */
+declare const TableCellVariant: {
+    readonly body: "body";
+    readonly head: "head";
+};
+declare type TableCellVariant = ValueOf<typeof TableCellVariant>;
+/**
+ * Defines the props of the component.
+ */
+interface TableCellProps extends GenericProps {
+    /** Icon (SVG path).(thead only). */
+    icon?: string;
+    /** Whether the column is sortable or not (thead only). */
+    isSortable?: boolean;
+    /** Sort order displayed as icon (sortable thead only). */
+    sortOrder?: ThOrder;
+    /** Variant. */
+    variant?: TableCellVariant;
+    /** On header cell click callback. */
+    onHeaderClick?(): void;
+}
+/**
+ * TableCell component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+declare const TableCell: Comp<TableCellProps, HTMLTableCellElement>;
+
+/**
+ * Defines the props of the component.
+ */
+declare type TableHeaderProps = GenericProps;
+/**
+ * TableHeader component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+declare const TableHeader: Comp<TableHeaderProps, HTMLTableSectionElement>;
+
+/**
+ * Defines the props of the component.
+ */
+interface TableRowProps extends GenericProps {
+    /** Whether the component is clickable or not. */
+    isClickable?: boolean;
+    /** Whether the component is disabled or not. */
+    isDisabled?: boolean;
+    /** Whether the component is selected or not. */
+    isSelected?: boolean;
+}
+/**
+ * TableRow component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+declare const TableRow: Comp<TableRowProps, HTMLTableRowElement>;
+
+export { TableProps as T, Table as a, TableBodyProps as b, TableBody as c, ThOrder as d, TableCellVariant as e, TableCellProps as f, TableCell as g, TableHeaderProps as h, TableHeader as i, TableRowProps as j, TableRow as k };

package/{esm/_internal/Lightbox2.js → _internal/a8fa525f.js}

@@ -1,16 +1,17 @@
-import { b as _objectWithoutProperties, c as _extends } from './_rollupPluginBabelHelpers.js';
-import { ColorPalette, Emphasis } from './components.js';
+import { b as _objectWithoutProperties, c as _extends } from './6340c129.js';
+import { ColorPalette, Emphasis } from '../components.js';
 import React, { forwardRef, useRef, useEffect } from 'react';
-import { g as getRootClassName, c as classnames, h as handleBasicClasses } from './getRootClassName.js';
-import { d as mdiClose } from './Icon2.js';
-import { D as DOCUMENT } from './constants.js';
-import { m as mergeRefs } from './mergeRefs.js';
-import { I as IconButton } from './IconButton.js';
-import { u as useCallbackOnEscape, C as ClickAwayProvider } from './ClickAwayProvider.js';
-import { u as useFocusTrap } from './useFocusTrap.js';
+import { g as getRootClassName, c as classnames, h as handleBasicClasses } from './fd867c9d.js';
+import { d as mdiClose } from './a521723d.js';
+import { D as DOCUMENT } from './288dfd0f.js';
+import { m as mergeRefs } from './853713cd.js';
+import { I as IconButton } from './377b2f44.js';
+import { u as useCallbackOnEscape } from './5d8ed4ee.js';
+import { u as useFocusTrap } from './2cc0aec5.js';
 import { createPortal } from 'react-dom';
-import { u as useDelayedVisibility } from './useDelayedVisibility.js';
-import { u as useDisableBodyScroll } from './useDisableBodyScroll.js';
+import { C as ClickAwayProvider } from './53a831be.js';
+import { u as useDelayedVisibility } from './7e03266f.js';
+import { u as useDisableBodyScroll } from './0062d1bc.js';
 
 var LIGHTBOX_TRANSITION_DURATION = 400;
 /**
@@ -120,4 +121,4 @@ Lightbox.displayName = COMPONENT_NAME;
 Lightbox.className = CLASSNAME;
 
 export { Lightbox as L };
-//# sourceMappingURL=Lightbox2.js.map
+//# sourceMappingURL=a8fa525f.js.map

package/_internal/a8fa525f.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"a8fa525f.js","sources":["../../src/components/lightbox/Lightbox.tsx"],"sourcesContent":["import React, { forwardRef, RefObject, useRef, useEffect } from 'react';\n\nimport classNames from 'classnames';\nimport { createPortal } from 'react-dom';\n\nimport { mdiClose } from '@lumx/icons';\nimport { ColorPalette, Emphasis, IconButton, IconButtonProps } from '@lumx/react';\nimport { DOCUMENT } from '@lumx/react/constants';\nimport { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';\nimport { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';\n\nimport { useFocusTrap } from '@lumx/react/hooks/useFocusTrap';\nimport { useDelayedVisibility } from '@lumx/react/hooks/useDelayedVisibility';\nimport { useDisableBodyScroll } from '@lumx/react/hooks/useDisableBodyScroll';\nimport { ClickAwayProvider } from '@lumx/react/utils/ClickAwayProvider';\nimport { mergeRefs } from '@lumx/react/utils/mergeRefs';\nimport { useCallbackOnEscape } from '@lumx/react/hooks/useCallbackOnEscape';\n\nconst LIGHTBOX_TRANSITION_DURATION = 400;\n\n/**\n * Defines the props of the component.\n */\nexport interface LightboxProps extends GenericProps, HasTheme {\n    /** Props to pass to the close button (minus those already set by the Lightbox props). */\n    closeButtonProps?: Pick<IconButtonProps, 'label'> &\n        Omit<IconButtonProps, 'label' | 'onClick' | 'icon' | 'emphasis' | 'color'>;\n    /** Whether the component is open or not. */\n    isOpen?: boolean;\n    /** Reference to the element that triggered modal opening to set focus on. */\n    parentElement: RefObject<any>;\n    /** Whether to keep the dialog open on clickaway or escape press. */\n    preventAutoClose?: boolean;\n    /** Z-axis position. */\n    zIndex?: number;\n    /** On close callback. */\n    onClose?(): void;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Lightbox';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * Lightbox component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const Lightbox: Comp<LightboxProps, HTMLDivElement> = forwardRef((props, ref) => {\n    const {\n        ariaLabel,\n        children,\n        className,\n        closeButtonProps,\n        isOpen,\n        onClose,\n        parentElement,\n        preventAutoClose,\n        theme,\n        zIndex,\n        ...forwardedProps\n    } = props;\n    if (!DOCUMENT) {\n        // Can't render in SSR.\n        return null;\n    }\n\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const childrenRef = useRef<any>(null);\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const wrapperRef = useRef<HTMLDivElement>(null);\n\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    useDisableBodyScroll(isOpen && wrapperRef.current);\n\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const isVisible = useDelayedVisibility(!!isOpen, LIGHTBOX_TRANSITION_DURATION);\n\n    // Handle focus trap.\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    useFocusTrap(isOpen && wrapperRef.current, childrenRef.current?.firstChild);\n\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const previousOpen = useRef(isOpen);\n\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    useEffect(() => {\n        if (isOpen !== previousOpen.current) {\n            previousOpen.current = isOpen;\n\n            // Focus the parent element on close.\n            if (!isOpen && parentElement && parentElement.current) {\n                parentElement.current.focus();\n            }\n        }\n    }, [isOpen, parentElement]);\n\n    // Close lightbox on escape key pressed.\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    useCallbackOnEscape(onClose);\n\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const clickAwayRefs = useRef([wrapperRef]);\n\n    if (!isOpen && !isVisible) return null;\n\n    return createPortal(\n        /* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */\n        <div\n            ref={mergeRefs(ref, wrapperRef)}\n            {...forwardedProps}\n            aria-label={ariaLabel}\n            aria-modal=\"true\"\n            className={classNames(\n                className,\n                handleBasicClasses({\n                    prefix: CLASSNAME,\n                    isHidden: !isOpen,\n                    isShown: isOpen || isVisible,\n                    theme,\n                }),\n            )}\n            style={{ zIndex }}\n        >\n            {closeButtonProps && (\n                <IconButton\n                    {...closeButtonProps}\n                    className={`${CLASSNAME}__close`}\n                    color={ColorPalette.light}\n                    emphasis={Emphasis.low}\n                    icon={mdiClose}\n                    theme={theme}\n                    type=\"button\"\n                    onClick={onClose}\n                />\n            )}\n            <ClickAwayProvider callback={!preventAutoClose && onClose} childrenRefs={clickAwayRefs}>\n                <div ref={childrenRef} className={`${CLASSNAME}__wrapper`} role=\"presentation\">\n                    {children}\n                </div>\n            </ClickAwayProvider>\n        </div>,\n        document.body,\n    );\n});\nLightbox.displayName = COMPONENT_NAME;\nLightbox.className = CLASSNAME;\n"],"names":["LIGHTBOX_TRANSITION_DURATION","COMPONENT_NAME","CLASSNAME","getRootClassName","Lightbox","forwardRef","props","ref","ariaLabel","children","className","closeButtonProps","isOpen","onClose","parentElement","preventAutoClose","theme","zIndex","forwardedProps","DOCUMENT","childrenRef","useRef","wrapperRef","useDisableBodyScroll","current","isVisible","useDelayedVisibility","useFocusTrap","firstChild","previousOpen","useEffect","focus","useCallbackOnEscape","clickAwayRefs","createPortal","mergeRefs","classNames","handleBasicClasses","prefix","isHidden","isShown","ColorPalette","light","Emphasis","low","mdiClose","document","body","displayName"],"mappings":"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"}

package/{esm/_internal/AlertDialog.js → _internal/aca2ecf5.js}

@@ -1,12 +1,12 @@
-import { a as _defineProperty, b as _objectWithoutProperties, c as _extends, _ as _objectSpread2 } from './_rollupPluginBabelHelpers.js';
-import { Size, Emphasis, ColorPalette, Kind } from './components.js';
+import { a as _defineProperty, b as _objectWithoutProperties, c as _extends, _ as _objectSpread2 } from './6340c129.js';
+import { Size, Emphasis, ColorPalette, Kind } from '../components.js';
 import React, { forwardRef } from 'react';
-import { g as getRootClassName, c as classnames, h as handleBasicClasses } from './getRootClassName.js';
-import { I as Icon, m as mdiAlert, a as mdiInformation, b as mdiCheckCircle, c as mdiAlertCircle } from './Icon2.js';
-import { u as uid } from '../index2.js';
-import { a as Button } from './Button2.js';
-import { D as Dialog } from './Dialog2.js';
-import { T as Toolbar } from './Toolbar2.js';
+import { g as getRootClassName, c as classnames, h as handleBasicClasses } from './fd867c9d.js';
+import { I as Icon, m as mdiAlert, a as mdiInformation, b as mdiCheckCircle, c as mdiAlertCircle } from './a521723d.js';
+import { u as uid } from './fc608bd9.js';
+import { a as Button } from './7e8d0ac5.js';
+import { D as Dialog } from './b89517ea.js';
+import { T as Toolbar } from './9ca3f59c.js';
 
 var _CONFIG;
 
@@ -138,4 +138,4 @@ AlertDialog.className = CLASSNAME;
 AlertDialog.defaultProps = DEFAULT_PROPS;
 
 export { AlertDialog as A };
-//# sourceMappingURL=AlertDialog.js.map
+//# sourceMappingURL=aca2ecf5.js.map

package/_internal/aca2ecf5.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"aca2ecf5.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 } from '@lumx/react/utils/type';\nimport { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';\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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"}

package/{esm/_internal/Divider2.js → _internal/aef2ef1c.js}

@@ -1,7 +1,7 @@
-import { b as _objectWithoutProperties, c as _extends } from './_rollupPluginBabelHelpers.js';
-import { Theme } from './components.js';
+import { b as _objectWithoutProperties, c as _extends } from './6340c129.js';
+import { Theme } from '../components.js';
 import React, { forwardRef } from 'react';
-import { g as getRootClassName, c as classnames, h as handleBasicClasses } from './getRootClassName.js';
+import { g as getRootClassName, c as classnames, h as handleBasicClasses } from './fd867c9d.js';
 
 /**
  * Defines the props of the component.
@@ -49,5 +49,5 @@ Divider.displayName = COMPONENT_NAME;
 Divider.className = CLASSNAME;
 Divider.defaultProps = DEFAULT_PROPS;
 
-export { DEFAULT_PROPS as D, Divider as a };
-//# sourceMappingURL=Divider2.js.map
+export { Divider as D };
+//# sourceMappingURL=aef2ef1c.js.map

package/_internal/aef2ef1c.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"aef2ef1c.js","sources":["../../src/components/divider/Divider.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { Theme } from '@lumx/react';\nimport { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';\nimport { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';\n\n/**\n * Defines the props of the component.\n */\nexport interface DividerProps extends GenericProps, HasTheme {}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Divider';\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<DividerProps> = {\n    theme: Theme.light,\n};\n\n/**\n * Divider component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const Divider: Comp<DividerProps, HTMLHRElement> = forwardRef((props, ref) => {\n    const { className, theme, ...forwardedProps } = props;\n\n    return (\n        <hr\n            ref={ref}\n            {...forwardedProps}\n            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, theme }))}\n        />\n    );\n});\nDivider.displayName = COMPONENT_NAME;\nDivider.className = CLASSNAME;\nDivider.defaultProps = DEFAULT_PROPS;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","theme","Theme","light","Divider","forwardRef","props","ref","className","forwardedProps","classNames","handleBasicClasses","prefix","displayName","defaultProps"],"mappings":";;;;;AAQA;;;;AAKA;;;AAGA,IAAMA,cAAc,GAAG,SAAvB;AAEA;;;;AAGA,IAAMC,SAAS,GAAGC,gBAAgB,CAACF,cAAD,CAAlC;AAEA;;;;AAGA,IAAMG,aAAoC,GAAG;AACzCC,EAAAA,KAAK,EAAEC,KAAK,CAACC;AAD4B,CAA7C;AAIA;;;;;;;;IAOaC,OAA0C,GAAGC,UAAU,CAAC,UAACC,KAAD,EAAQC,GAAR,EAAgB;AAAA,MACzEC,SADyE,GACjCF,KADiC,CACzEE,SADyE;AAAA,MAC9DP,KAD8D,GACjCK,KADiC,CAC9DL,KAD8D;AAAA,MACpDQ,cADoD,4BACjCH,KADiC;;AAGjF,SACI;AACI,IAAA,GAAG,EAAEC;AADT,KAEQE,cAFR;AAGI,IAAA,SAAS,EAAEC,UAAU,CAACF,SAAD,EAAYG,kBAAkB,CAAC;AAAEC,MAAAA,MAAM,EAAEd,SAAV;AAAqBG,MAAAA,KAAK,EAALA;AAArB,KAAD,CAA9B;AAHzB,KADJ;AAOH,CAVmE;AAWpEG,OAAO,CAACS,WAAR,GAAsBhB,cAAtB;AACAO,OAAO,CAACI,SAAR,GAAoBV,SAApB;AACAM,OAAO,CAACU,YAAR,GAAuBd,aAAvB;;;;"}

package/{esm/_internal/Mosaic2.js → _internal/af048b0c.js}

@@ -1,9 +1,9 @@
-import { b as _objectWithoutProperties, c as _extends, a as _defineProperty } from './_rollupPluginBabelHelpers.js';
-import { Alignment, AspectRatio, Theme } from './components.js';
+import { b as _objectWithoutProperties, c as _extends, a as _defineProperty } from './6340c129.js';
+import { Alignment, AspectRatio, Theme } from '../components.js';
 import React, { forwardRef, useMemo } from 'react';
-import { g as getRootClassName, c as classnames, h as handleBasicClasses } from './getRootClassName.js';
+import { g as getRootClassName, c as classnames, h as handleBasicClasses } from './fd867c9d.js';
 import take from 'lodash/take';
-import { T as Thumbnail } from './Thumbnail2.js';
+import { T as Thumbnail } from './616f2912.js';
 
 /**
  * Defines the props of the component.
@@ -86,4 +86,4 @@ Mosaic.className = CLASSNAME;
 Mosaic.defaultProps = DEFAULT_PROPS;
 
 export { Mosaic as M };
-//# sourceMappingURL=Mosaic2.js.map
+//# sourceMappingURL=af048b0c.js.map

package/_internal/af048b0c.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"af048b0c.js","sources":["../../src/components/mosaic/Mosaic.tsx"],"sourcesContent":["import React, { forwardRef, MouseEventHandler, useMemo } from 'react';\n\nimport { Alignment, AspectRatio, Theme, Thumbnail, ThumbnailProps } from '@lumx/react';\nimport { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';\nimport { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';\nimport classNames from 'classnames';\nimport take from 'lodash/take';\n\n/**\n * Defines the props of the component.\n */\nexport interface MosaicProps extends GenericProps, HasTheme {\n    /** Thumbnails. */\n    thumbnails: ThumbnailProps[];\n    /** On image click callback. */\n    onImageClick?(index: number): void;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Mosaic';\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<MosaicProps> = {\n    theme: Theme.light,\n};\n\n/**\n * Mosaic component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const Mosaic: Comp<MosaicProps, HTMLDivElement> = forwardRef((props, ref) => {\n    const { className, theme, thumbnails, onImageClick, ...forwardedProps } = props;\n    const handleImageClick = useMemo(() => {\n        if (!onImageClick) return undefined;\n\n        return (index: number, onClick?: MouseEventHandler): MouseEventHandler => (event) => {\n            onClick?.(event);\n            onImageClick?.(index);\n        };\n    }, [onImageClick]);\n\n    return (\n        <div\n            ref={ref}\n            {...forwardedProps}\n            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, theme }), {\n                [`${CLASSNAME}--has-1-thumbnail`]: thumbnails?.length === 1,\n                [`${CLASSNAME}--has-2-thumbnails`]: thumbnails?.length === 2,\n                [`${CLASSNAME}--has-3-thumbnails`]: thumbnails?.length === 3,\n                [`${CLASSNAME}--has-4-thumbnails`]: thumbnails?.length >= 4,\n            })}\n        >\n            <div className={`${CLASSNAME}__wrapper`}>\n                {take(thumbnails, 4).map((thumbnail: any, index: number) => {\n                    const { image, onClick, align, ...thumbnailProps } = thumbnail;\n\n                    return (\n                        <div key={index} className={`${CLASSNAME}__thumbnail`}>\n                            <Thumbnail\n                                {...thumbnailProps}\n                                align={align || Alignment.left}\n                                image={image}\n                                theme={theme}\n                                aspectRatio={AspectRatio.free}\n                                fillHeight\n                                onClick={handleImageClick?.(index, onClick) || onClick}\n                            />\n\n                            {thumbnails.length > 4 && index === 3 && (\n                                <div className={`${CLASSNAME}__overlay`}>\n                                    <span>+{thumbnails.length - 4}</span>\n                                </div>\n                            )}\n                        </div>\n                    );\n                })}\n            </div>\n        </div>\n    );\n});\nMosaic.displayName = COMPONENT_NAME;\nMosaic.className = CLASSNAME;\nMosaic.defaultProps = DEFAULT_PROPS;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","theme","Theme","light","Mosaic","forwardRef","props","ref","className","thumbnails","onImageClick","forwardedProps","handleImageClick","useMemo","undefined","index","onClick","event","classNames","handleBasicClasses","prefix","length","take","map","thumbnail","image","align","thumbnailProps","Alignment","left","AspectRatio","free","displayName","defaultProps"],"mappings":"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"}

package/_internal/af2cd0cd.d.ts

@@ -0,0 +1,17 @@
+import { l as GenericProps, m as HasTheme, k as Comp } from './eca6d4dc.js';
+
+/**
+ * Defines the props of the component.
+ */
+interface DragHandleProps extends GenericProps, HasTheme {
+}
+/**
+ * DragHandle component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+declare const DragHandle: Comp<DragHandleProps, HTMLDivElement>;
+
+export { DragHandleProps as D, DragHandle as a };