@lumx/react 3.20.1-alpha.35 → 3.20.1-alpha.36

package/_internal/fdcf3942.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"fdcf3942.js","sources":["../../src/components/list/useInteractiveList.tsx"],"sourcesContent":["import { ListItemProps } from '@lumx/react';\nimport { isClickable } from '@lumx/react/components/list/ListItem';\n\nimport { isComponent } from '@lumx/react/utils/type';\nimport { flattenChildren } from '@lumx/react/utils/react/flattenChildren';\nimport { mergeRefs } from '@lumx/react/utils/react/mergeRefs';\nimport get from 'lodash/get';\nimport {\n    cloneElement,\n    Key,\n    ReactElement,\n    ReactNode,\n    RefObject,\n    SyntheticEvent,\n    useEffect,\n    useMemo,\n    useState,\n} from 'react';\n\ntype Listener = (evt: KeyboardEvent) => void;\n\ninterface Options {\n    /** List of items to navigate on. */\n    items: ReactNode[] | ReactNode;\n    /** Reference to the list-like element controlling the navigation. */\n    ref: RefObject<HTMLElement>;\n\n    /**\n     * On list item navigated callback (triggered on ARROW key navigation).\n     *\n     * @param index Index of the navigated item among the sibling items.\n     * @param key   React key of the navigated item.\n     */\n    onListItemNavigated?(index: number, key: Key | null): void;\n\n    /**\n     * On list item selected callback (via ENTER key or click).\n     *\n     * @param index Index of the selected item among the sibling items.\n     * @param key   React key of the selected item.\n     * @param evt   Source event (either mouse or keyboard event).\n     */\n    onListItemSelected?(index: number, key: Key | null, evt: SyntheticEvent): void;\n}\n\ninterface Output {\n    /** List of items transformed to accommodate keyboard navigation. */\n    items: ReactNode[];\n    /** Whether the list contains clickable items or not. */\n    hasClickableItem: boolean;\n}\n\nexport type useInteractiveList = (options: Options) => Output;\n\nconst INITIAL_INDEX = -1;\n\nfunction onKeyboardFocus(props: any, handler: (evt: FocusEvent) => void) {\n    let isMouseDown = false;\n    return {\n        onFocus(evt: FocusEvent) {\n            props.onFocus?.(evt);\n            if (!isMouseDown) {\n                handler(evt);\n            }\n        },\n        onMouseDown(evt: MouseEvent) {\n            props.onMouseDown?.(evt);\n            isMouseDown = true;\n        },\n        onMouseUp(evt: MouseEvent) {\n            props.onMouseUp?.(evt);\n            isMouseDown = false;\n        },\n    };\n}\n\nconst isNavigableItem = (node: ReactNode): node is ReactElement => {\n    return isComponent('ListItem')(node) && isClickable(node.props) && !node.props.isDisabled;\n};\n\n/**\n * This custom hook detects clickable list item in a list and make them navigable with the keyboard.\n *\n * @param  options See {@link Options}\n * @return See {@link Output}\n */\nexport const useInteractiveList: useInteractiveList = (options) => {\n    const { ref, onListItemSelected, onListItemNavigated } = options;\n    const items = useMemo(() => flattenChildren(options.items), [options.items]);\n    const [activeItemIndex, setActiveItemIndex] = useState(INITIAL_INDEX);\n\n    // Attach listeners to the list.\n    useEffect(() => {\n        const { current: listElement } = ref;\n        if (!listElement) {\n            return undefined;\n        }\n\n        /**\n         * This function calculates the next index in the list to be active\n         * @param  index current index\n         * @param  code  key code pressed\n         * @return next index\n         */\n        const getNextIndex = (index: number, key: string): number => {\n            switch (key) {\n                case 'ArrowDown':\n                    return index + 1 < items.length ? index + 1 : 0;\n                case 'ArrowUp':\n                    return index - 1 >= 0 ? index - 1 : items.length - 1;\n                default:\n                    return INITIAL_INDEX;\n            }\n        };\n\n        /**\n         * Resets the active index to the initial state\n         */\n        const resetActiveIndex = () => {\n            setActiveItemIndex(INITIAL_INDEX);\n        };\n\n        /**\n         * Handles navigation with the arrows using the keyboard\n         * @param evt Key event\n         */\n        const onArrowPressed: Listener = (evt) => {\n            const { key } = evt;\n            if (key !== 'ArrowUp' && key !== 'ArrowDown') {\n                return;\n            }\n\n            let nextIndex = activeItemIndex;\n            let iterations = 0;\n\n            // Move to next navigable item.\n            do {\n                nextIndex = getNextIndex(nextIndex, key);\n                iterations += 1;\n            } while (\n                nextIndex !== INITIAL_INDEX &&\n                nextIndex !== activeItemIndex &&\n                !isNavigableItem(items[nextIndex] as any) &&\n                iterations < items.length\n            );\n\n            setActiveItemIndex(nextIndex);\n            evt.preventDefault();\n            evt.stopPropagation();\n            onListItemNavigated?.(nextIndex, get(items, [nextIndex, 'key']));\n        };\n\n        /**\n         * Reset active list item index when focusing outside the list.\n         * @param evt Focus out event\n         */\n        const onFocusOut = (evt: FocusEvent) => {\n            if (!evt.relatedTarget || !listElement.contains(evt.relatedTarget as any)) {\n                resetActiveIndex();\n            }\n        };\n\n        listElement.addEventListener('focusout', onFocusOut);\n        listElement.addEventListener('keydown', onArrowPressed);\n        return () => {\n            listElement.removeEventListener('focusout', onFocusOut);\n            listElement.removeEventListener('keydown', onArrowPressed);\n        };\n    }, [ref, activeItemIndex, items, onListItemNavigated]);\n\n    return useMemo(() => {\n        let hasClickableItem = false;\n        const transformedItems = items.map((item, index) => {\n            // Ignore if list not clickable or item is not a simple list item.\n            if (!isNavigableItem(item)) {\n                return item;\n            }\n\n            hasClickableItem = true;\n            const isHighlighted = index === activeItemIndex;\n\n            // Clone list item: inject ref, add tab index and active state.\n            return cloneElement<ListItemProps>(item, {\n                ...item.props,\n                isHighlighted: item.props.isHighlighted ?? isHighlighted,\n                linkRef: mergeRefs(item.props.linkRef, (element: any) => {\n                    if (isHighlighted) {\n                        element?.focus();\n                    }\n                }),\n                onItemSelected(evt) {\n                    item.props.onItemSelected?.();\n                    onListItemSelected?.(index, item.key, evt);\n                },\n                ...onKeyboardFocus(item.props, () => {\n                    setActiveItemIndex(index);\n                }),\n            });\n        });\n        return { items: transformedItems, hasClickableItem };\n    }, [items, activeItemIndex, onListItemSelected]);\n};\n"],"names":["INITIAL_INDEX","onKeyboardFocus","props","handler","isMouseDown","onFocus","evt","onMouseDown","onMouseUp","isNavigableItem","node","isComponent","isClickable","isDisabled","useInteractiveList","options","ref","onListItemSelected","onListItemNavigated","items","useMemo","flattenChildren","activeItemIndex","setActiveItemIndex","useState","useEffect","current","listElement","undefined","getNextIndex","index","key","length","resetActiveIndex","onArrowPressed","nextIndex","iterations","preventDefault","stopPropagation","get","onFocusOut","relatedTarget","contains","addEventListener","removeEventListener","hasClickableItem","transformedItems","map","item","isHighlighted","cloneElement","linkRef","mergeRefs","element","focus","onItemSelected"],"mappings":";;;;;;;AAsDA,MAAMA,aAAa,GAAG,CAAC,CAAC,CAAA;AAExB,SAASC,eAAeA,CAACC,KAAU,EAAEC,OAAkC,EAAE;EACrE,IAAIC,WAAW,GAAG,KAAK,CAAA;EACvB,OAAO;IACHC,OAAOA,CAACC,GAAe,EAAE;AACrBJ,MAAAA,KAAK,CAACG,OAAO,GAAGC,GAAG,CAAC,CAAA;MACpB,IAAI,CAACF,WAAW,EAAE;QACdD,OAAO,CAACG,GAAG,CAAC,CAAA;AAChB,OAAA;KACH;IACDC,WAAWA,CAACD,GAAe,EAAE;AACzBJ,MAAAA,KAAK,CAACK,WAAW,GAAGD,GAAG,CAAC,CAAA;AACxBF,MAAAA,WAAW,GAAG,IAAI,CAAA;KACrB;IACDI,SAASA,CAACF,GAAe,EAAE;AACvBJ,MAAAA,KAAK,CAACM,SAAS,GAAGF,GAAG,CAAC,CAAA;AACtBF,MAAAA,WAAW,GAAG,KAAK,CAAA;AACvB,KAAA;GACH,CAAA;AACL,CAAA;AAEA,MAAMK,eAAe,GAAIC,IAAe,IAA2B;EAC/D,OAAOC,WAAW,CAAC,UAAU,CAAC,CAACD,IAAI,CAAC,IAAIE,WAAW,CAACF,IAAI,CAACR,KAAK,CAAC,IAAI,CAACQ,IAAI,CAACR,KAAK,CAACW,UAAU,CAAA;AAC7F,CAAC,CAAA;;AAED;AACA;AACA;AACA;AACA;AACA;AACaC,MAAAA,kBAAsC,GAAIC,OAAO,IAAK;EAC/D,MAAM;IAAEC,GAAG;IAAEC,kBAAkB;AAAEC,IAAAA,mBAAAA;AAAoB,GAAC,GAAGH,OAAO,CAAA;AAChE,EAAA,MAAMI,KAAK,GAAGC,OAAO,CAAC,MAAMC,eAAe,CAACN,OAAO,CAACI,KAAK,CAAC,EAAE,CAACJ,OAAO,CAACI,KAAK,CAAC,CAAC,CAAA;EAC5E,MAAM,CAACG,eAAe,EAAEC,kBAAkB,CAAC,GAAGC,QAAQ,CAACxB,aAAa,CAAC,CAAA;;AAErE;AACAyB,EAAAA,SAAS,CAAC,MAAM;IACZ,MAAM;AAAEC,MAAAA,OAAO,EAAEC,WAAAA;AAAY,KAAC,GAAGX,GAAG,CAAA;IACpC,IAAI,CAACW,WAAW,EAAE;AACd,MAAA,OAAOC,SAAS,CAAA;AACpB,KAAA;;AAEA;AACR;AACA;AACA;AACA;AACA;AACQ,IAAA,MAAMC,YAAY,GAAGA,CAACC,KAAa,EAAEC,GAAW,KAAa;AACzD,MAAA,QAAQA,GAAG;AACP,QAAA,KAAK,WAAW;AACZ,UAAA,OAAOD,KAAK,GAAG,CAAC,GAAGX,KAAK,CAACa,MAAM,GAAGF,KAAK,GAAG,CAAC,GAAG,CAAC,CAAA;AACnD,QAAA,KAAK,SAAS;AACV,UAAA,OAAOA,KAAK,GAAG,CAAC,IAAI,CAAC,GAAGA,KAAK,GAAG,CAAC,GAAGX,KAAK,CAACa,MAAM,GAAG,CAAC,CAAA;AACxD,QAAA;AACI,UAAA,OAAOhC,aAAa,CAAA;AAC5B,OAAA;KACH,CAAA;;AAED;AACR;AACA;IACQ,MAAMiC,gBAAgB,GAAGA,MAAM;MAC3BV,kBAAkB,CAACvB,aAAa,CAAC,CAAA;KACpC,CAAA;;AAED;AACR;AACA;AACA;IACQ,MAAMkC,cAAwB,GAAI5B,GAAG,IAAK;MACtC,MAAM;AAAEyB,QAAAA,GAAAA;AAAI,OAAC,GAAGzB,GAAG,CAAA;AACnB,MAAA,IAAIyB,GAAG,KAAK,SAAS,IAAIA,GAAG,KAAK,WAAW,EAAE;AAC1C,QAAA,OAAA;AACJ,OAAA;MAEA,IAAII,SAAS,GAAGb,eAAe,CAAA;MAC/B,IAAIc,UAAU,GAAG,CAAC,CAAA;;AAElB;MACA,GAAG;AACCD,QAAAA,SAAS,GAAGN,YAAY,CAACM,SAAS,EAAEJ,GAAG,CAAC,CAAA;AACxCK,QAAAA,UAAU,IAAI,CAAC,CAAA;OAClB,QACGD,SAAS,KAAKnC,aAAa,IAC3BmC,SAAS,KAAKb,eAAe,IAC7B,CAACb,eAAe,CAACU,KAAK,CAACgB,SAAS,CAAQ,CAAC,IACzCC,UAAU,GAAGjB,KAAK,CAACa,MAAM,EAAA;MAG7BT,kBAAkB,CAACY,SAAS,CAAC,CAAA;MAC7B7B,GAAG,CAAC+B,cAAc,EAAE,CAAA;MACpB/B,GAAG,CAACgC,eAAe,EAAE,CAAA;AACrBpB,MAAAA,mBAAmB,GAAGiB,SAAS,EAAEI,GAAG,CAACpB,KAAK,EAAE,CAACgB,SAAS,EAAE,KAAK,CAAC,CAAC,CAAC,CAAA;KACnE,CAAA;;AAED;AACR;AACA;AACA;IACQ,MAAMK,UAAU,GAAIlC,GAAe,IAAK;AACpC,MAAA,IAAI,CAACA,GAAG,CAACmC,aAAa,IAAI,CAACd,WAAW,CAACe,QAAQ,CAACpC,GAAG,CAACmC,aAAoB,CAAC,EAAE;AACvER,QAAAA,gBAAgB,EAAE,CAAA;AACtB,OAAA;KACH,CAAA;AAEDN,IAAAA,WAAW,CAACgB,gBAAgB,CAAC,UAAU,EAAEH,UAAU,CAAC,CAAA;AACpDb,IAAAA,WAAW,CAACgB,gBAAgB,CAAC,SAAS,EAAET,cAAc,CAAC,CAAA;AACvD,IAAA,OAAO,MAAM;AACTP,MAAAA,WAAW,CAACiB,mBAAmB,CAAC,UAAU,EAAEJ,UAAU,CAAC,CAAA;AACvDb,MAAAA,WAAW,CAACiB,mBAAmB,CAAC,SAAS,EAAEV,cAAc,CAAC,CAAA;KAC7D,CAAA;GACJ,EAAE,CAAClB,GAAG,EAAEM,eAAe,EAAEH,KAAK,EAAED,mBAAmB,CAAC,CAAC,CAAA;EAEtD,OAAOE,OAAO,CAAC,MAAM;IACjB,IAAIyB,gBAAgB,GAAG,KAAK,CAAA;IAC5B,MAAMC,gBAAgB,GAAG3B,KAAK,CAAC4B,GAAG,CAAC,CAACC,IAAI,EAAElB,KAAK,KAAK;AAChD;AACA,MAAA,IAAI,CAACrB,eAAe,CAACuC,IAAI,CAAC,EAAE;AACxB,QAAA,OAAOA,IAAI,CAAA;AACf,OAAA;AAEAH,MAAAA,gBAAgB,GAAG,IAAI,CAAA;AACvB,MAAA,MAAMI,aAAa,GAAGnB,KAAK,KAAKR,eAAe,CAAA;;AAE/C;MACA,oBAAO4B,YAAY,CAAgBF,IAAI,EAAE;QACrC,GAAGA,IAAI,CAAC9C,KAAK;AACb+C,QAAAA,aAAa,EAAED,IAAI,CAAC9C,KAAK,CAAC+C,aAAa,IAAIA,aAAa;QACxDE,OAAO,EAAEC,SAAS,CAACJ,IAAI,CAAC9C,KAAK,CAACiD,OAAO,EAAGE,OAAY,IAAK;AACrD,UAAA,IAAIJ,aAAa,EAAE;YACfI,OAAO,EAAEC,KAAK,EAAE,CAAA;AACpB,WAAA;AACJ,SAAC,CAAC;QACFC,cAAcA,CAACjD,GAAG,EAAE;AAChB0C,UAAAA,IAAI,CAAC9C,KAAK,CAACqD,cAAc,IAAI,CAAA;UAC7BtC,kBAAkB,GAAGa,KAAK,EAAEkB,IAAI,CAACjB,GAAG,EAAEzB,GAAG,CAAC,CAAA;SAC7C;AACD,QAAA,GAAGL,eAAe,CAAC+C,IAAI,CAAC9C,KAAK,EAAE,MAAM;UACjCqB,kBAAkB,CAACO,KAAK,CAAC,CAAA;SAC5B,CAAA;AACL,OAAC,CAAC,CAAA;AACN,KAAC,CAAC,CAAA;IACF,OAAO;AAAEX,MAAAA,KAAK,EAAE2B,gBAAgB;AAAED,MAAAA,gBAAAA;KAAkB,CAAA;GACvD,EAAE,CAAC1B,KAAK,EAAEG,eAAe,EAAEL,kBAAkB,CAAC,CAAC,CAAA;AACpD;;;;"}

package/_internal/fdebc718.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"fdebc718.js","sources":["../../src/components/flex-box/FlexBox.tsx"],"sourcesContent":["import { ReactNode } from 'react';\n\nimport classNames from 'classnames';\nimport castArray from 'lodash/castArray';\n\nimport { Alignment, Orientation, HorizontalAlignment, Size, VerticalAlignment } from '@lumx/core/js/constants';\nimport { GenericProps } from '@lumx/react/utils/type';\nimport { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\nexport type MarginAutoAlignment = Extract<Alignment, 'top' | 'bottom' | 'right' | 'left'>;\nexport type GapSize = Extract<Size, 'tiny' | 'regular' | 'medium' | 'big' | 'huge'>;\ntype SpaceAlignment = Extract<Alignment, 'space-between' | 'space-evenly' | 'space-around'>;\nexport type FlexVerticalAlignment = VerticalAlignment | SpaceAlignment;\nexport type FlexHorizontalAlignment = HorizontalAlignment | SpaceAlignment;\n\n/**\n * Defines the props of the component.\n */\nexport interface FlexBoxProps extends GenericProps {\n    /** Customize the root element. */\n    as?: React.ElementType;\n    /** Children elements. */\n    children?: ReactNode;\n    /** Whether the \"content filling space\" is enabled or not. */\n    fillSpace?: boolean;\n    /** Gap space between flexbox items. */\n    gap?: GapSize;\n    /** Flex horizontal alignment. */\n    hAlign?: FlexVerticalAlignment;\n    /** Whether the \"auto margin\" is enabled all around or not. */\n    marginAuto?: MarginAutoAlignment | MarginAutoAlignment[];\n    /** Whether the \"content shrink\" is disabled or not. */\n    noShrink?: boolean;\n    /** Flex direction. */\n    orientation?: Orientation;\n    /** Flex vertical alignment. */\n    vAlign?: FlexHorizontalAlignment;\n    /** Whether the \"flex wrap\" is enabled or not. */\n    wrap?: boolean;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'FlexBox';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * FlexBox component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const FlexBox = forwardRef<FlexBoxProps, HTMLDivElement>((props, ref) => {\n    const {\n        as: Component = 'div',\n        children,\n        className,\n        fillSpace,\n        gap,\n        hAlign,\n        marginAuto,\n        noShrink,\n        orientation,\n        vAlign,\n        wrap,\n        ...forwardedProps\n    } = props;\n\n    return (\n        <Component\n            ref={ref}\n            {...forwardedProps}\n            className={classNames(\n                className,\n                handleBasicClasses({\n                    prefix: CLASSNAME,\n                    orientation: orientation ?? (wrap || hAlign || vAlign ? Orientation.horizontal : null),\n                    vAlign,\n                    hAlign,\n                    gap,\n                }),\n                wrap && `${CLASSNAME}--wrap`,\n                fillSpace && `${CLASSNAME}--fill-space`,\n                noShrink && `${CLASSNAME}--no-shrink`,\n                marginAuto && castArray(marginAuto).map((align) => `${CLASSNAME}--margin-auto-${align}`),\n            )}\n        >\n            {children}\n        </Component>\n    );\n});\nFlexBox.displayName = COMPONENT_NAME;\nFlexBox.className = CLASSNAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","FlexBox","forwardRef","props","ref","as","Component","children","className","fillSpace","gap","hAlign","marginAuto","noShrink","orientation","vAlign","wrap","forwardedProps","_jsx","classNames","handleBasicClasses","prefix","Orientation","horizontal","castArray","map","align","displayName"],"mappings":";;;;;;;AA0CA;AACA;AACA;AACA,MAAMA,cAAc,GAAG,SAAS,CAAA;;AAEhC;AACA;AACA;AACA,MAAMC,SAAS,GAAGC,gBAAgB,CAACF,cAAc,CAAC,CAAA;;AAElD;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMG,OAAO,GAAGC,UAAU,CAA+B,CAACC,KAAK,EAAEC,GAAG,KAAK;EAC5E,MAAM;IACFC,EAAE,EAAEC,SAAS,GAAG,KAAK;IACrBC,QAAQ;IACRC,SAAS;IACTC,SAAS;IACTC,GAAG;IACHC,MAAM;IACNC,UAAU;IACVC,QAAQ;IACRC,WAAW;IACXC,MAAM;IACNC,IAAI;IACJ,GAAGC,cAAAA;AACP,GAAC,GAAGd,KAAK,CAAA;EAET,oBACIe,GAAA,CAACZ,SAAS,EAAA;AACNF,IAAAA,GAAG,EAAEA,GAAI;AAAA,IAAA,GACLa,cAAc;AAClBT,IAAAA,SAAS,EAAEW,UAAU,CACjBX,SAAS,EACTY,kBAAkB,CAAC;AACfC,MAAAA,MAAM,EAAEtB,SAAS;AACjBe,MAAAA,WAAW,EAAEA,WAAW,KAAKE,IAAI,IAAIL,MAAM,IAAII,MAAM,GAAGO,WAAW,CAACC,UAAU,GAAG,IAAI,CAAC;MACtFR,MAAM;MACNJ,MAAM;AACND,MAAAA,GAAAA;AACJ,KAAC,CAAC,EACFM,IAAI,IAAI,CAAA,EAAGjB,SAAS,CAAQ,MAAA,CAAA,EAC5BU,SAAS,IAAI,GAAGV,SAAS,CAAA,YAAA,CAAc,EACvCc,QAAQ,IAAI,CAAGd,EAAAA,SAAS,CAAa,WAAA,CAAA,EACrCa,UAAU,IAAIY,SAAS,CAACZ,UAAU,CAAC,CAACa,GAAG,CAAEC,KAAK,IAAK,CAAG3B,EAAAA,SAAS,iBAAiB2B,KAAK,CAAA,CAAE,CAC3F,CAAE;AAAAnB,IAAAA,QAAA,EAEDA,QAAAA;AAAQ,GACF,CAAC,CAAA;AAEpB,CAAC,EAAC;AACFN,OAAO,CAAC0B,WAAW,GAAG7B,cAAc,CAAA;AACpCG,OAAO,CAACO,SAAS,GAAGT,SAAS;;;;"}

package/_internal/ff96951d.js

@@ -1,8 +0,0 @@
-import getWindow from './a0a42aca.js';
-
-function getComputedStyle(element) {
-  return getWindow(element).getComputedStyle(element);
-}
-
-export { getComputedStyle as default };
-//# sourceMappingURL=ff96951d.js.map

package/_internal/ff96951d.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ff96951d.js","sources":["../../../../node_modules/@popperjs/core/lib/dom-utils/getComputedStyle.js"],"sourcesContent":["import getWindow from \"./getWindow.js\";\nexport default function getComputedStyle(element) {\n  return getWindow(element).getComputedStyle(element);\n}"],"names":[],"mappings":";;AACe,SAAS,gBAAgB,CAAC,OAAO,EAAE;AAClD,EAAE,OAAO,SAAS,CAAC,OAAO,CAAC,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC;AACtD;;;;","x_google_ignoreList":[0]}

package/_internal/ffb2f7fa.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ffb2f7fa.js","sources":["../../src/components/avatar/Avatar.tsx"],"sourcesContent":["import { KeyboardEventHandler, MouseEventHandler, ReactElement, ReactNode } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AspectRatio, Size, Theme, Thumbnail, ThumbnailProps } from '@lumx/react';\n\nimport { GenericProps, HasTheme } from '@lumx/react/utils/type';\nimport { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';\nimport { useTheme } from '@lumx/react/utils/theme/ThemeContext';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\n/**\n * Avatar sizes.\n */\nexport type AvatarSize = Extract<Size, 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl'>;\n\n/**\n * Defines the props of the component.\n */\nexport interface AvatarProps extends GenericProps, HasTheme {\n    /** Action toolbar content. */\n    actions?: ReactNode;\n    /** Image alternative text. */\n    alt: string;\n    /** Badge. */\n    badge?: ReactElement;\n    /** Image URL. */\n    image: string;\n    /** Props to pass to the link wrapping the thumbnail. */\n    linkProps?: React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;\n    /** Custom react component for the link (can be used to inject react router Link). */\n    linkAs?: 'a' | any;\n    /** On click callback. */\n    onClick?: MouseEventHandler<HTMLDivElement>;\n    /** On key press callback. */\n    onKeyPress?: KeyboardEventHandler<HTMLDivElement>;\n    /** Size variant. */\n    size?: AvatarSize;\n    /** Props to pass to the thumbnail (minus those already set by the Avatar props). */\n    thumbnailProps?: Omit<\n        ThumbnailProps,\n        'image' | 'alt' | 'size' | 'theme' | 'align' | 'fillHeight' | 'variant' | 'aspectRatio'\n    >;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Avatar';\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<AvatarProps> = {\n    size: Size.m,\n};\n\n/**\n * Avatar component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const Avatar = forwardRef<AvatarProps, HTMLDivElement>((props, ref) => {\n    const defaultTheme = useTheme() || Theme.light;\n    const {\n        actions,\n        alt,\n        badge,\n        className,\n        image,\n        linkProps,\n        linkAs,\n        onClick,\n        onKeyPress,\n        size = DEFAULT_PROPS.size,\n        theme = defaultTheme,\n        thumbnailProps,\n        ...forwardedProps\n    } = props;\n\n    return (\n        <div\n            ref={ref}\n            {...forwardedProps}\n            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, size, theme }))}\n        >\n            <Thumbnail\n                linkProps={linkProps}\n                linkAs={linkAs}\n                className={`${CLASSNAME}__thumbnail`}\n                onClick={onClick}\n                onKeyPress={onKeyPress}\n                {...thumbnailProps}\n                aspectRatio={AspectRatio.square}\n                size={size}\n                image={image}\n                alt={alt}\n                theme={theme}\n            />\n            {actions && <div className={`${CLASSNAME}__actions`}>{actions}</div>}\n            {badge && <div className={`${CLASSNAME}__badge`}>{badge}</div>}\n        </div>\n    );\n});\nAvatar.displayName = COMPONENT_NAME;\nAvatar.className = CLASSNAME;\nAvatar.defaultProps = DEFAULT_PROPS;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","size","Size","m","Avatar","forwardRef","props","ref","defaultTheme","useTheme","Theme","light","actions","alt","badge","className","image","linkProps","linkAs","onClick","onKeyPress","theme","thumbnailProps","forwardedProps","_jsxs","classNames","handleBasicClasses","prefix","children","_jsx","Thumbnail","aspectRatio","AspectRatio","square","displayName","defaultProps"],"mappings":";;;;;;;;AA6CA;AACA;AACA;AACA,MAAMA,cAAc,GAAG,QAAQ,CAAA;;AAE/B;AACA;AACA;AACA,MAAMC,SAAS,GAAGC,gBAAgB,CAACF,cAAc,CAAC,CAAA;;AAElD;AACA;AACA;AACA,MAAMG,aAAmC,GAAG;EACxCC,IAAI,EAAEC,IAAI,CAACC,CAAAA;AACf,CAAC,CAAA;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,MAAM,GAAGC,UAAU,CAA8B,CAACC,KAAK,EAAEC,GAAG,KAAK;EAC1E,MAAMC,YAAY,GAAGC,QAAQ,EAAE,IAAIC,KAAK,CAACC,KAAK,CAAA;EAC9C,MAAM;IACFC,OAAO;IACPC,GAAG;IACHC,KAAK;IACLC,SAAS;IACTC,KAAK;IACLC,SAAS;IACTC,MAAM;IACNC,OAAO;IACPC,UAAU;IACVnB,IAAI,GAAGD,aAAa,CAACC,IAAI;AACzBoB,IAAAA,KAAK,GAAGb,YAAY;IACpBc,cAAc;IACd,GAAGC,cAAAA;AACP,GAAC,GAAGjB,KAAK,CAAA;AAET,EAAA,oBACIkB,IAAA,CAAA,KAAA,EAAA;AACIjB,IAAAA,GAAG,EAAEA,GAAI;AAAA,IAAA,GACLgB,cAAc;AAClBR,IAAAA,SAAS,EAAEU,UAAU,CAACV,SAAS,EAAEW,kBAAkB,CAAC;AAAEC,MAAAA,MAAM,EAAE7B,SAAS;MAAEG,IAAI;AAAEoB,MAAAA,KAAAA;AAAM,KAAC,CAAC,CAAE;IAAAO,QAAA,EAAA,cAEzFC,GAAA,CAACC,SAAS,EAAA;AACNb,MAAAA,SAAS,EAAEA,SAAU;AACrBC,MAAAA,MAAM,EAAEA,MAAO;MACfH,SAAS,EAAE,CAAGjB,EAAAA,SAAS,CAAc,WAAA,CAAA;AACrCqB,MAAAA,OAAO,EAAEA,OAAQ;AACjBC,MAAAA,UAAU,EAAEA,UAAW;AAAA,MAAA,GACnBE,cAAc;MAClBS,WAAW,EAAEC,WAAW,CAACC,MAAO;AAChChC,MAAAA,IAAI,EAAEA,IAAK;AACXe,MAAAA,KAAK,EAAEA,KAAM;AACbH,MAAAA,GAAG,EAAEA,GAAI;AACTQ,MAAAA,KAAK,EAAEA,KAAAA;AAAM,KAChB,CAAC,EACDT,OAAO,iBAAIiB,GAAA,CAAA,KAAA,EAAA;MAAKd,SAAS,EAAE,CAAGjB,EAAAA,SAAS,CAAY,SAAA,CAAA;AAAA8B,MAAAA,QAAA,EAAEhB,OAAAA;AAAO,KAAM,CAAC,EACnEE,KAAK,iBAAIe,GAAA,CAAA,KAAA,EAAA;MAAKd,SAAS,EAAE,CAAGjB,EAAAA,SAAS,CAAU,OAAA,CAAA;AAAA8B,MAAAA,QAAA,EAAEd,KAAAA;AAAK,KAAM,CAAC,CAAA;AAAA,GAC7D,CAAC,CAAA;AAEd,CAAC,EAAC;AACFV,MAAM,CAAC8B,WAAW,GAAGrC,cAAc,CAAA;AACnCO,MAAM,CAACW,SAAS,GAAGjB,SAAS,CAAA;AAC5BM,MAAM,CAAC+B,YAAY,GAAGnC,aAAa;;;;"}

package/index.js.map

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

package/utils/index.js.map

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