@lumx/react 3.20.1-alpha.33 → 3.20.1-alpha.34

package/_internal/1d7267a1.js

@@ -0,0 +1,173 @@
+import React__default, { useCallback, useMemo } from 'react';
+import classNames from 'classnames';
+import range from 'lodash/range';
+import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
+import { WINDOW } from './6af61e2f.js';
+import { useSlideshowControls, DEFAULT_OPTIONS } from './1c1cdfa2.js';
+import { useRovingTabIndex } from './bb8088e1.js';
+import { forwardRef } from './bd8b3ec8.js';
+import { useTheme } from './d8ee966d.js';
+import { useSwipeNavigate } from './de52a4b9.js';
+import { PAGINATION_ITEM_SIZE, PAGINATION_ITEMS_MAX } from './e50f2a75.js';
+import { usePaginationVisibleRange } from './5da9ff06.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { mdiPauseCircleOutline } from './4bb19934.js';
+import { mdiPlayCircleOutline } from './185778b8.js';
+import { Theme, Emphasis } from '@lumx/core/js/constants';
+import { IconButton } from './5a0207d9.js';
+import { mdiChevronLeft } from './e9c3b1e0.js';
+import { mdiChevronRight } from './aeba575c.js';
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'SlideshowControls';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS = {
+  activeIndex: 0
+};
+
+/**
+ * SlideshowControls component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const InternalSlideshowControls = forwardRef((props, ref) => {
+  const defaultTheme = useTheme() || Theme.light;
+  const {
+    activeIndex = DEFAULT_PROPS.activeIndex,
+    className,
+    nextButtonProps,
+    onNextClick,
+    onPaginationClick,
+    onPreviousClick,
+    parentRef,
+    previousButtonProps,
+    paginationProps,
+    slidesCount,
+    theme = defaultTheme,
+    isAutoPlaying = false,
+    playButtonProps,
+    paginationItemLabel,
+    paginationItemProps,
+    ...forwardedProps
+  } = props;
+  let parent;
+  if (WINDOW) {
+    // Checking window object to avoid errors in SSR.
+    parent = parentRef instanceof HTMLElement ? parentRef : parentRef?.current;
+  }
+  const paginationRef = React__default.useRef(null);
+  // Listen to touch swipe navigate left & right.
+  useSwipeNavigate(parent,
+  // Go next without loopback.
+  useCallback(() => onNextClick?.(false), [onNextClick]),
+  // Go previous without loopback.
+  useCallback(() => onPreviousClick?.(false), [onPreviousClick]));
+
+  /**
+   * Add roving tab index pattern to pagination items and activate slide on focus.
+   */
+  useRovingTabIndex({
+    parentRef: paginationRef,
+    elementSelector: 'button',
+    keepTabIndex: true,
+    onElementFocus: element => {
+      element.click();
+    }
+  });
+
+  // Pagination "bullet" range.
+  const visibleRange = usePaginationVisibleRange(activeIndex, slidesCount);
+
+  // Inline style of wrapper element.
+  const wrapperStyle = {
+    transform: `translateX(-${PAGINATION_ITEM_SIZE * visibleRange.min}px)`
+  };
+  return /*#__PURE__*/jsxs("div", {
+    ref: ref,
+    ...forwardedProps,
+    className: classNames(className, handleBasicClasses({
+      prefix: CLASSNAME,
+      theme
+    }), {
+      [`${CLASSNAME}--has-infinite-pagination`]: slidesCount > PAGINATION_ITEMS_MAX
+    }),
+    children: [/*#__PURE__*/jsx(IconButton, {
+      ...previousButtonProps,
+      icon: mdiChevronLeft,
+      className: `${CLASSNAME}__navigation`,
+      color: theme === Theme.dark ? 'light' : 'dark',
+      emphasis: Emphasis.low,
+      onClick: onPreviousClick
+    }), /*#__PURE__*/jsx("div", {
+      ref: paginationRef,
+      className: `${CLASSNAME}__pagination`,
+      children: /*#__PURE__*/jsx("div", {
+        className: `${CLASSNAME}__pagination-items`,
+        style: wrapperStyle,
+        role: "tablist",
+        ...paginationProps,
+        children: useMemo(() => range(slidesCount).map(index => {
+          const isOnEdge = index !== 0 && index !== slidesCount - 1 && (index === visibleRange.min || index === visibleRange.max);
+          const isActive = activeIndex === index;
+          const isOutRange = index < visibleRange.min || index > visibleRange.max;
+          const {
+            className: itemClassName = undefined,
+            label = undefined,
+            ...itemProps
+          } = paginationItemProps ? paginationItemProps(index) : {};
+          const ariaLabel = label || paginationItemLabel?.(index) || `${index + 1} / ${slidesCount}`;
+          return /*#__PURE__*/jsx("button", {
+            className: classNames(handleBasicClasses({
+              prefix: `${CLASSNAME}__pagination-item`,
+              isActive,
+              isOnEdge,
+              isOutRange
+            }), itemClassName),
+            type: "button",
+            tabIndex: isActive ? undefined : -1,
+            role: "tab",
+            "aria-selected": isActive,
+            onClick: () => onPaginationClick?.(index),
+            "aria-label": ariaLabel,
+            ...itemProps
+          }, index);
+        }), [slidesCount, visibleRange.min, visibleRange.max, activeIndex, paginationItemProps, paginationItemLabel, onPaginationClick])
+      })
+    }), playButtonProps ? /*#__PURE__*/jsx(IconButton, {
+      ...playButtonProps,
+      icon: isAutoPlaying ? mdiPauseCircleOutline : mdiPlayCircleOutline,
+      className: `${CLASSNAME}__play`,
+      color: theme === Theme.dark ? 'light' : 'dark',
+      emphasis: Emphasis.low
+    }) : null, /*#__PURE__*/jsx(IconButton, {
+      ...nextButtonProps,
+      icon: mdiChevronRight,
+      className: `${CLASSNAME}__navigation`,
+      color: theme === Theme.dark ? 'light' : 'dark',
+      emphasis: Emphasis.low,
+      onClick: onNextClick
+    })]
+  });
+});
+InternalSlideshowControls.displayName = COMPONENT_NAME;
+InternalSlideshowControls.className = CLASSNAME;
+InternalSlideshowControls.defaultProps = DEFAULT_PROPS;
+const SlideshowControls = Object.assign(InternalSlideshowControls, {
+  useSlideshowControls,
+  useSlideshowControlsDefaultOptions: DEFAULT_OPTIONS
+});
+
+export { SlideshowControls };
+//# sourceMappingURL=1d7267a1.js.map

package/_internal/1d7267a1.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"1d7267a1.js","sources":["../../src/components/slideshow/SlideshowControls.tsx"],"sourcesContent":["import React, { RefObject, useCallback, useMemo } from 'react';\n\nimport classNames from 'classnames';\nimport range from 'lodash/range';\n\nimport { mdiChevronLeft, mdiChevronRight, mdiPlayCircleOutline, mdiPauseCircleOutline } from '@lumx/icons';\nimport { Emphasis, IconButton, IconButtonProps, Theme } from '@lumx/react';\nimport { GenericProps, HasTheme } from '@lumx/react/utils/type';\nimport { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';\nimport { WINDOW } from '@lumx/react/constants';\nimport { useSlideshowControls, DEFAULT_OPTIONS } from '@lumx/react/hooks/useSlideshowControls';\nimport { useRovingTabIndex } from '@lumx/react/hooks/useRovingTabIndex';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\nimport { useTheme } from '@lumx/react/utils/theme/ThemeContext';\nimport { useSwipeNavigate } from './useSwipeNavigate';\nimport { PAGINATION_ITEM_SIZE, PAGINATION_ITEMS_MAX } from './constants';\nimport { usePaginationVisibleRange } from './usePaginationVisibleRange';\n\n/**\n * Defines the props of the component.\n */\nexport interface SlideshowControlsProps extends GenericProps, HasTheme {\n    /** Index of the current slide. */\n    activeIndex?: number;\n    /** Props to pass to the next button (minus those already set by the SlideshowControls props). */\n    nextButtonProps: Pick<IconButtonProps, 'label'> &\n        Omit<IconButtonProps, 'label' | 'onClick' | 'icon' | 'emphasis' | 'color'>;\n    /** Reference to the parent element on which we want to listen touch swipe. */\n    parentRef?: RefObject<HTMLDivElement> | HTMLDivElement | null;\n    /** Props to pass to the previous button (minus those already set by the SlideshowControls props). */\n    previousButtonProps: Pick<IconButtonProps, 'label'> &\n        Omit<IconButtonProps, 'label' | 'onClick' | 'icon' | 'emphasis' | 'color'>;\n    /** Props to pass to the pagination wrapper */\n    paginationProps?: Omit<React.HTMLAttributes<HTMLDivElement>, 'className' | 'style' | 'role'>;\n    /** Number of slides. */\n    slidesCount: number;\n    /** On next button click callback. */\n    onNextClick?(loopback?: boolean): void;\n    /** On pagination change callback. */\n    onPaginationClick?(index: number): void;\n    /** On previous button click callback. */\n    onPreviousClick?(loopback?: boolean): void;\n    /** whether the slideshow is currently playing */\n    isAutoPlaying?: boolean;\n    /**\n     * function to be executed in order to retrieve the label for the pagination item\n     * @deprecated Use paginationItemProps instead.\n     * */\n    paginationItemLabel?: (index: number) => string;\n    /**\n     * function to be executed in order to retrieve the props for a pagination item.\n     */\n    paginationItemProps?: (itemIndex: number) => React.HTMLAttributes<HTMLButtonElement> & { label?: string };\n    /** Props to pass to the lay button (minus those already set by the SlideshowControls props). */\n    playButtonProps?: Pick<IconButtonProps, 'label'> &\n        Omit<IconButtonProps, 'label' | 'onClick' | 'icon' | 'emphasis' | 'color'>;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'SlideshowControls';\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<SlideshowControlsProps> = {\n    activeIndex: 0,\n};\n\n/**\n * SlideshowControls component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nconst InternalSlideshowControls = forwardRef<SlideshowControlsProps, HTMLDivElement>((props, ref) => {\n    const defaultTheme = useTheme() || Theme.light;\n    const {\n        activeIndex = DEFAULT_PROPS.activeIndex,\n        className,\n        nextButtonProps,\n        onNextClick,\n        onPaginationClick,\n        onPreviousClick,\n        parentRef,\n        previousButtonProps,\n        paginationProps,\n        slidesCount,\n        theme = defaultTheme,\n        isAutoPlaying = false,\n        playButtonProps,\n        paginationItemLabel,\n        paginationItemProps,\n        ...forwardedProps\n    } = props;\n\n    let parent;\n    if (WINDOW) {\n        // Checking window object to avoid errors in SSR.\n        parent = parentRef instanceof HTMLElement ? parentRef : parentRef?.current;\n    }\n    const paginationRef = React.useRef(null);\n    // Listen to touch swipe navigate left & right.\n    useSwipeNavigate(\n        parent,\n        // Go next without loopback.\n        useCallback(() => onNextClick?.(false), [onNextClick]),\n        // Go previous without loopback.\n        useCallback(() => onPreviousClick?.(false), [onPreviousClick]),\n    );\n\n    /**\n     * Add roving tab index pattern to pagination items and activate slide on focus.\n     */\n    useRovingTabIndex({\n        parentRef: paginationRef,\n        elementSelector: 'button',\n        keepTabIndex: true,\n        onElementFocus: (element) => {\n            element.click();\n        },\n    });\n\n    // Pagination \"bullet\" range.\n    const visibleRange = usePaginationVisibleRange(activeIndex as number, slidesCount);\n\n    // Inline style of wrapper element.\n    const wrapperStyle = { transform: `translateX(-${PAGINATION_ITEM_SIZE * visibleRange.min}px)` };\n\n    return (\n        <div\n            ref={ref}\n            {...forwardedProps}\n            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, theme }), {\n                [`${CLASSNAME}--has-infinite-pagination`]: slidesCount > PAGINATION_ITEMS_MAX,\n            })}\n        >\n            <IconButton\n                {...previousButtonProps}\n                icon={mdiChevronLeft}\n                className={`${CLASSNAME}__navigation`}\n                color={theme === Theme.dark ? 'light' : 'dark'}\n                emphasis={Emphasis.low}\n                onClick={onPreviousClick}\n            />\n            <div ref={paginationRef} className={`${CLASSNAME}__pagination`}>\n                <div\n                    className={`${CLASSNAME}__pagination-items`}\n                    style={wrapperStyle}\n                    role=\"tablist\"\n                    {...paginationProps}\n                >\n                    {useMemo(\n                        () =>\n                            range(slidesCount).map((index) => {\n                                const isOnEdge =\n                                    index !== 0 &&\n                                    index !== slidesCount - 1 &&\n                                    (index === visibleRange.min || index === visibleRange.max);\n                                const isActive = activeIndex === index;\n                                const isOutRange = index < visibleRange.min || index > visibleRange.max;\n                                const {\n                                    className: itemClassName = undefined,\n                                    label = undefined,\n                                    ...itemProps\n                                } = paginationItemProps ? paginationItemProps(index) : {};\n\n                                const ariaLabel =\n                                    label || paginationItemLabel?.(index) || `${index + 1} / ${slidesCount}`;\n\n                                return (\n                                    <button\n                                        className={classNames(\n                                            handleBasicClasses({\n                                                prefix: `${CLASSNAME}__pagination-item`,\n                                                isActive,\n                                                isOnEdge,\n                                                isOutRange,\n                                            }),\n                                            itemClassName,\n                                        )}\n                                        key={index}\n                                        type=\"button\"\n                                        tabIndex={isActive ? undefined : -1}\n                                        role=\"tab\"\n                                        aria-selected={isActive}\n                                        onClick={() => onPaginationClick?.(index)}\n                                        aria-label={ariaLabel}\n                                        {...itemProps}\n                                    />\n                                );\n                            }),\n                        [\n                            slidesCount,\n                            visibleRange.min,\n                            visibleRange.max,\n                            activeIndex,\n                            paginationItemProps,\n                            paginationItemLabel,\n                            onPaginationClick,\n                        ],\n                    )}\n                </div>\n            </div>\n\n            {playButtonProps ? (\n                <IconButton\n                    {...playButtonProps}\n                    icon={isAutoPlaying ? mdiPauseCircleOutline : mdiPlayCircleOutline}\n                    className={`${CLASSNAME}__play`}\n                    color={theme === Theme.dark ? 'light' : 'dark'}\n                    emphasis={Emphasis.low}\n                />\n            ) : null}\n\n            <IconButton\n                {...nextButtonProps}\n                icon={mdiChevronRight}\n                className={`${CLASSNAME}__navigation`}\n                color={theme === Theme.dark ? 'light' : 'dark'}\n                emphasis={Emphasis.low}\n                onClick={onNextClick}\n            />\n        </div>\n    );\n});\n\nInternalSlideshowControls.displayName = COMPONENT_NAME;\nInternalSlideshowControls.className = CLASSNAME;\nInternalSlideshowControls.defaultProps = DEFAULT_PROPS;\n\nexport const SlideshowControls = Object.assign(InternalSlideshowControls, {\n    useSlideshowControls,\n    useSlideshowControlsDefaultOptions: DEFAULT_OPTIONS,\n});\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","activeIndex","InternalSlideshowControls","forwardRef","props","ref","defaultTheme","useTheme","Theme","light","className","nextButtonProps","onNextClick","onPaginationClick","onPreviousClick","parentRef","previousButtonProps","paginationProps","slidesCount","theme","isAutoPlaying","playButtonProps","paginationItemLabel","paginationItemProps","forwardedProps","parent","WINDOW","HTMLElement","current","paginationRef","React","useRef","useSwipeNavigate","useCallback","useRovingTabIndex","elementSelector","keepTabIndex","onElementFocus","element","click","visibleRange","usePaginationVisibleRange","wrapperStyle","transform","PAGINATION_ITEM_SIZE","min","_jsxs","classNames","handleBasicClasses","prefix","PAGINATION_ITEMS_MAX","children","_jsx","IconButton","icon","mdiChevronLeft","color","dark","emphasis","Emphasis","low","onClick","style","role","useMemo","range","map","index","isOnEdge","max","isActive","isOutRange","itemClassName","undefined","label","itemProps","ariaLabel","type","tabIndex","mdiPauseCircleOutline","mdiPlayCircleOutline","mdiChevronRight","displayName","defaultProps","SlideshowControls","Object","assign","useSlideshowControls","useSlideshowControlsDefaultOptions","DEFAULT_OPTIONS"],"mappings":"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"}

package/_internal/1df25415.js

@@ -0,0 +1,53 @@
+import classNames from 'classnames';
+import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
+import { forwardRef } from './bd8b3ec8.js';
+import { jsx } from 'react/jsx-runtime';
+import { ColorPalette } from '@lumx/core/js/constants';
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'Badge';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS = {
+  color: ColorPalette.primary
+};
+
+/**
+ * Badge component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const Badge = forwardRef((props, ref) => {
+  const {
+    children,
+    className,
+    color = DEFAULT_PROPS.color,
+    ...forwardedProps
+  } = props;
+  return /*#__PURE__*/jsx("div", {
+    ref: ref,
+    ...forwardedProps,
+    className: classNames(className, handleBasicClasses({
+      prefix: CLASSNAME,
+      color
+    })),
+    children: children
+  });
+});
+Badge.displayName = COMPONENT_NAME;
+Badge.className = CLASSNAME;
+Badge.defaultProps = DEFAULT_PROPS;
+
+export { Badge };
+//# sourceMappingURL=1df25415.js.map

package/_internal/1df25415.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"1df25415.js","sources":["../../src/components/badge/Badge.tsx"],"sourcesContent":["import { ReactNode } from 'react';\n\nimport classNames from 'classnames';\n\nimport { ColorPalette } from '@lumx/react';\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\n/**\n * Defines the props of the component.\n */\nexport interface BadgeProps extends GenericProps {\n    /** Badge content. */\n    children?: ReactNode;\n    /** Color variant. */\n    color?: ColorPalette;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Badge';\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<BadgeProps> = {\n    color: ColorPalette.primary,\n};\n\n/**\n * Badge component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const Badge = forwardRef<BadgeProps, HTMLDivElement>((props, ref) => {\n    const { children, className, color = DEFAULT_PROPS.color, ...forwardedProps } = props;\n    return (\n        <div\n            ref={ref}\n            {...forwardedProps}\n            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, color }))}\n        >\n            {children}\n        </div>\n    );\n});\nBadge.displayName = COMPONENT_NAME;\nBadge.className = CLASSNAME;\nBadge.defaultProps = DEFAULT_PROPS;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","color","ColorPalette","primary","Badge","forwardRef","props","ref","children","className","forwardedProps","_jsx","classNames","handleBasicClasses","prefix","displayName","defaultProps"],"mappings":";;;;;;AAmBA;AACA;AACA;AACA,MAAMA,cAAc,GAAG,OAAO,CAAA;;AAE9B;AACA;AACA;AACA,MAAMC,SAAS,GAAGC,gBAAgB,CAACF,cAAc,CAAC,CAAA;;AAElD;AACA;AACA;AACA,MAAMG,aAAkC,GAAG;EACvCC,KAAK,EAAEC,YAAY,CAACC,OAAAA;AACxB,CAAC,CAAA;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,KAAK,GAAGC,UAAU,CAA6B,CAACC,KAAK,EAAEC,GAAG,KAAK;EACxE,MAAM;IAAEC,QAAQ;IAAEC,SAAS;IAAER,KAAK,GAAGD,aAAa,CAACC,KAAK;IAAE,GAAGS,cAAAA;AAAe,GAAC,GAAGJ,KAAK,CAAA;AACrF,EAAA,oBACIK,GAAA,CAAA,KAAA,EAAA;AACIJ,IAAAA,GAAG,EAAEA,GAAI;AAAA,IAAA,GACLG,cAAc;AAClBD,IAAAA,SAAS,EAAEG,UAAU,CAACH,SAAS,EAAEI,kBAAkB,CAAC;AAAEC,MAAAA,MAAM,EAAEhB,SAAS;AAAEG,MAAAA,KAAAA;AAAM,KAAC,CAAC,CAAE;AAAAO,IAAAA,QAAA,EAElFA,QAAAA;AAAQ,GACR,CAAC,CAAA;AAEd,CAAC,EAAC;AACFJ,KAAK,CAACW,WAAW,GAAGlB,cAAc,CAAA;AAClCO,KAAK,CAACK,SAAS,GAAGX,SAAS,CAAA;AAC3BM,KAAK,CAACY,YAAY,GAAGhB,aAAa;;;;"}

package/_internal/1ee5415f.js

@@ -0,0 +1,27 @@
+import React__default from 'react';
+import throttle from 'lodash/throttle';
+
+/**
+ * Observe element size (only works if it's size depends on the window size).
+ *
+ * (Not using ResizeObserver for better browser backward compat)
+ *
+ * @param elementRef Element to observe
+ * @return the size and a manual update callback
+ */
+function useSizeOnWindowResize(elementRef) {
+  const [size, setSize] = React__default.useState(null);
+  const updateSize = React__default.useMemo(() => throttle(() => {
+    const newSize = elementRef.current?.getBoundingClientRect();
+    if (newSize) setSize(newSize);
+  }, 10), [elementRef]);
+  React__default.useEffect(() => {
+    updateSize();
+    window.addEventListener('resize', updateSize);
+    return () => window.removeEventListener('resize', updateSize);
+  }, [updateSize]);
+  return [size, updateSize];
+}
+
+export { useSizeOnWindowResize };
+//# sourceMappingURL=1ee5415f.js.map

package/_internal/1ee5415f.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"1ee5415f.js","sources":["../../src/hooks/useSizeOnWindowResize.ts"],"sourcesContent":["import React from 'react';\n\nimport throttle from 'lodash/throttle';\nimport { RectSize } from '@lumx/react/utils/type';\n\n/**\n * Observe element size (only works if it's size depends on the window size).\n *\n * (Not using ResizeObserver for better browser backward compat)\n *\n * @param elementRef Element to observe\n * @return the size and a manual update callback\n */\nexport function useSizeOnWindowResize(elementRef: React.RefObject<HTMLElement>): [RectSize | null, () => void] {\n    const [size, setSize] = React.useState<null | RectSize>(null);\n    const updateSize = React.useMemo(\n        () =>\n            throttle(() => {\n                const newSize = elementRef.current?.getBoundingClientRect();\n                if (newSize) setSize(newSize);\n            }, 10),\n        [elementRef],\n    );\n    React.useEffect(() => {\n        updateSize();\n        window.addEventListener('resize', updateSize);\n        return () => window.removeEventListener('resize', updateSize);\n    }, [updateSize]);\n    return [size, updateSize];\n}\n"],"names":["useSizeOnWindowResize","elementRef","size","setSize","React","useState","updateSize","useMemo","throttle","newSize","current","getBoundingClientRect","useEffect","window","addEventListener","removeEventListener"],"mappings":";;;AAKA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASA,qBAAqBA,CAACC,UAAwC,EAAiC;EAC3G,MAAM,CAACC,IAAI,EAAEC,OAAO,CAAC,GAAGC,cAAK,CAACC,QAAQ,CAAkB,IAAI,CAAC,CAAA;EAC7D,MAAMC,UAAU,GAAGF,cAAK,CAACG,OAAO,CAC5B,MACIC,QAAQ,CAAC,MAAM;IACX,MAAMC,OAAO,GAAGR,UAAU,CAACS,OAAO,EAAEC,qBAAqB,EAAE,CAAA;AAC3D,IAAA,IAAIF,OAAO,EAAEN,OAAO,CAACM,OAAO,CAAC,CAAA;AACjC,GAAC,EAAE,EAAE,CAAC,EACV,CAACR,UAAU,CACf,CAAC,CAAA;EACDG,cAAK,CAACQ,SAAS,CAAC,MAAM;AAClBN,IAAAA,UAAU,EAAE,CAAA;AACZO,IAAAA,MAAM,CAACC,gBAAgB,CAAC,QAAQ,EAAER,UAAU,CAAC,CAAA;IAC7C,OAAO,MAAMO,MAAM,CAACE,mBAAmB,CAAC,QAAQ,EAAET,UAAU,CAAC,CAAA;AACjE,GAAC,EAAE,CAACA,UAAU,CAAC,CAAC,CAAA;AAChB,EAAA,OAAO,CAACJ,IAAI,EAAEI,UAAU,CAAC,CAAA;AAC7B;;;;"}

package/_internal/1ff933af.js

@@ -0,0 +1,5 @@
+/** Return true if the browser does not support pointer hover */
+const isHoverNotSupported = () => !!window.matchMedia?.('(hover: none)').matches;
+
+export { isHoverNotSupported };
+//# sourceMappingURL=1ff933af.js.map

package/_internal/1ff933af.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"1ff933af.js","sources":["../../src/utils/browser/isHoverNotSupported.ts"],"sourcesContent":["/** Return true if the browser does not support pointer hover */\nexport const isHoverNotSupported = (): boolean => !!window.matchMedia?.('(hover: none)').matches;\n"],"names":["isHoverNotSupported","window","matchMedia","matches"],"mappings":"AAAA;AACaA,MAAAA,mBAAmB,GAAGA,MAAe,CAAC,CAACC,MAAM,CAACC,UAAU,GAAG,eAAe,CAAC,CAACC;;;;"}

package/_internal/200c2ce1.js

@@ -0,0 +1,17 @@
+function mergeByName(modifiers) {
+  var merged = modifiers.reduce(function (merged, current) {
+    var existing = merged[current.name];
+    merged[current.name] = existing ? Object.assign(Object.assign(Object.assign({}, existing), current), {}, {
+      options: Object.assign(Object.assign({}, existing.options), current.options),
+      data: Object.assign(Object.assign({}, existing.data), current.data)
+    }) : current;
+    return merged;
+  }, {}); // IE11 does not support Object.values
+
+  return Object.keys(merged).map(function (key) {
+    return merged[key];
+  });
+}
+
+export { mergeByName as default };
+//# sourceMappingURL=200c2ce1.js.map

package/_internal/200c2ce1.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"200c2ce1.js","sources":["../../../../node_modules/@popperjs/core/lib/utils/mergeByName.js"],"sourcesContent":["export default function mergeByName(modifiers) {\n  var merged = modifiers.reduce(function (merged, current) {\n    var existing = merged[current.name];\n    merged[current.name] = existing ? Object.assign(Object.assign(Object.assign({}, existing), current), {}, {\n      options: Object.assign(Object.assign({}, existing.options), current.options),\n      data: Object.assign(Object.assign({}, existing.data), current.data)\n    }) : current;\n    return merged;\n  }, {}); // IE11 does not support Object.values\n\n  return Object.keys(merged).map(function (key) {\n    return merged[key];\n  });\n}"],"names":[],"mappings":"AAAe,SAAS,WAAW,CAAC,SAAS,EAAE;AAC/C,EAAE,IAAI,MAAM,GAAG,SAAS,CAAC,MAAM,CAAC,UAAU,MAAM,EAAE,OAAO,EAAE;AAC3D,IAAI,IAAI,QAAQ,GAAG,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;AACxC,IAAI,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,QAAQ,GAAG,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,EAAE,QAAQ,CAAC,EAAE,OAAO,CAAC,EAAE,EAAE,EAAE;AAC7G,MAAM,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,EAAE,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC,OAAO,CAAC;AAClF,MAAM,IAAI,EAAE,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,EAAE,QAAQ,CAAC,IAAI,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC;AACzE,KAAK,CAAC,GAAG,OAAO,CAAC;AACjB,IAAI,OAAO,MAAM,CAAC;AAClB,GAAG,EAAE,EAAE,CAAC,CAAC;AACT;AACA,EAAE,OAAO,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,UAAU,GAAG,EAAE;AAChD,IAAI,OAAO,MAAM,CAAC,GAAG,CAAC,CAAC;AACvB,GAAG,CAAC,CAAC;AACL;;;;","x_google_ignoreList":[0]}

package/_internal/203b01d8.js

@@ -0,0 +1,88 @@
+import classNames from 'classnames';
+import { getRootClassName, getTypographyClassName, handleBasicClasses, fontColorClass } from '@lumx/core/js/utils/className';
+import { useOverflowTooltipLabel } from './9a0544c4.js';
+import { useMergeRefs } from './27df0cb6.js';
+import { forwardRef } from './bd8b3ec8.js';
+import { wrapChildrenIconWithSpaces } from './16f5497d.js';
+import { jsx } from 'react/jsx-runtime';
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'Text';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS = {};
+
+/**
+ * Text component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const Text = forwardRef((props, ref) => {
+  const {
+    as: Component,
+    children,
+    className,
+    color,
+    colorVariant,
+    noWrap,
+    typography,
+    truncate,
+    whiteSpace,
+    style,
+    ...forwardedProps
+  } = props;
+  const typographyClass = typography && getTypographyClassName(typography);
+
+  // Truncate mode
+  const truncateLinesStyle = typeof truncate === 'object' && truncate.lines > 1 && {
+    '--lumx-text-truncate-lines': truncate.lines
+  };
+  const isTruncatedMultiline = !!truncateLinesStyle;
+  const isTruncated = !!truncate;
+
+  /**
+   * Add custom white-space style if specified
+   * Disabled if noWrap is specified
+   * Disabled if truncated on one-line
+   * */
+  const whiteSpaceStyle = !noWrap && !(isTruncated && !isTruncatedMultiline) && whiteSpace && {
+    '--lumx-text-white-space': whiteSpace
+  };
+  const {
+    tooltipLabel,
+    labelRef
+  } = useOverflowTooltipLabel(children);
+  return /*#__PURE__*/jsx(Component, {
+    ref: useMergeRefs(ref, labelRef),
+    className: classNames(className, handleBasicClasses({
+      prefix: CLASSNAME,
+      isTruncated: isTruncated && !isTruncatedMultiline,
+      isTruncatedMultiline
+    }), typographyClass, fontColorClass(color, colorVariant), noWrap && `${CLASSNAME}--no-wrap`),
+    title: tooltipLabel,
+    style: {
+      ...truncateLinesStyle,
+      ...whiteSpaceStyle,
+      ...style
+    },
+    ...forwardedProps,
+    children: wrapChildrenIconWithSpaces(children)
+  });
+});
+Text.displayName = COMPONENT_NAME;
+Text.className = CLASSNAME;
+Text.defaultProps = DEFAULT_PROPS;
+
+export { Text };
+//# sourceMappingURL=203b01d8.js.map

package/_internal/203b01d8.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"203b01d8.js","sources":["../../src/components/text/Text.tsx"],"sourcesContent":["import classNames from 'classnames';\n\nimport { ColorWithVariants, ColorVariant, Typography, WhiteSpace } from '@lumx/react';\nimport { GenericProps, TextElement } from '@lumx/react/utils/type';\nimport {\n    fontColorClass,\n    getRootClassName,\n    handleBasicClasses,\n    getTypographyClassName,\n} from '@lumx/core/js/utils/className';\nimport { useOverflowTooltipLabel } from '@lumx/react/hooks/useOverflowTooltipLabel';\nimport { useMergeRefs } from '@lumx/react/utils/react/mergeRefs';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\nimport { wrapChildrenIconWithSpaces } from '@lumx/react/utils/react/wrapChildrenIconWithSpaces';\n\n/**\n * Defines the props of the component.\n */\nexport interface TextProps extends GenericProps {\n    /**\n     * Color variant.\n     */\n    color?: ColorWithVariants;\n    /**\n     * Lightened or darkened variant of the selected color.\n     */\n    colorVariant?: ColorVariant;\n    /**\n     * Typography variant.\n     */\n    typography?: Typography;\n    /**\n     * Custom component to render the text.\n     */\n    as: TextElement;\n    /**\n     * Control whether the text should truncate or not.\n     * Setting as `true` will make the text truncate on a single line.\n     * Setting as `{ lines: number }` will make the text truncate on a multiple lines.\n     */\n    truncate?: boolean | { lines: number };\n    /**\n     * Prevents text to wrap on multiple lines\n     * (automatically activated when single line text truncate is activated).\n     */\n    noWrap?: boolean;\n    /**\n     * WhiteSpace variant\n     * Ignored when `noWrap` is set to true\n     * Ignored when `truncate` is set to true or lines: 1\n     * */\n    whiteSpace?: WhiteSpace;\n    /**\n     * Children\n     */\n    children?: React.ReactNode;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Text';\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 = {} as const;\n\n/**\n * Text component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const Text = forwardRef<TextProps>((props, ref) => {\n    const {\n        as: Component,\n        children,\n        className,\n        color,\n        colorVariant,\n        noWrap,\n        typography,\n        truncate,\n        whiteSpace,\n        style,\n        ...forwardedProps\n    } = props;\n\n    const typographyClass = typography && getTypographyClassName(typography);\n\n    // Truncate mode\n    const truncateLinesStyle = typeof truncate === 'object' &&\n        truncate.lines > 1 && { '--lumx-text-truncate-lines': truncate.lines };\n    const isTruncatedMultiline = !!truncateLinesStyle;\n    const isTruncated = !!truncate;\n\n    /**\n     * Add custom white-space style if specified\n     * Disabled if noWrap is specified\n     * Disabled if truncated on one-line\n     * */\n    const whiteSpaceStyle = !noWrap &&\n        !(isTruncated && !isTruncatedMultiline) &&\n        whiteSpace && { '--lumx-text-white-space': whiteSpace };\n\n    const { tooltipLabel, labelRef } = useOverflowTooltipLabel(children);\n\n    return (\n        <Component\n            ref={useMergeRefs(ref as React.Ref<any>, labelRef)}\n            className={classNames(\n                className,\n                handleBasicClasses({\n                    prefix: CLASSNAME,\n                    isTruncated: isTruncated && !isTruncatedMultiline,\n                    isTruncatedMultiline,\n                }),\n                typographyClass,\n                fontColorClass(color, colorVariant),\n                noWrap && `${CLASSNAME}--no-wrap`,\n            )}\n            title={tooltipLabel}\n            style={{ ...truncateLinesStyle, ...whiteSpaceStyle, ...style }}\n            {...forwardedProps}\n        >\n            {wrapChildrenIconWithSpaces(children)}\n        </Component>\n    );\n});\nText.displayName = COMPONENT_NAME;\nText.className = CLASSNAME;\nText.defaultProps = DEFAULT_PROPS;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","Text","forwardRef","props","ref","as","Component","children","className","color","colorVariant","noWrap","typography","truncate","whiteSpace","style","forwardedProps","typographyClass","getTypographyClassName","truncateLinesStyle","lines","isTruncatedMultiline","isTruncated","whiteSpaceStyle","tooltipLabel","labelRef","useOverflowTooltipLabel","_jsx","useMergeRefs","classNames","handleBasicClasses","prefix","fontColorClass","title","wrapChildrenIconWithSpaces","displayName","defaultProps"],"mappings":";;;;;;;;AA0DA;AACA;AACA;AACA,MAAMA,cAAc,GAAG,MAAM,CAAA;;AAE7B;AACA;AACA;AACA,MAAMC,SAAS,GAAGC,gBAAgB,CAACF,cAAc,CAAC,CAAA;;AAElD;AACA;AACA;AACA,MAAMG,aAAa,GAAG,EAAW,CAAA;;AAEjC;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,IAAI,GAAGC,UAAU,CAAY,CAACC,KAAK,EAAEC,GAAG,KAAK;EACtD,MAAM;AACFC,IAAAA,EAAE,EAAEC,SAAS;IACbC,QAAQ;IACRC,SAAS;IACTC,KAAK;IACLC,YAAY;IACZC,MAAM;IACNC,UAAU;IACVC,QAAQ;IACRC,UAAU;IACVC,KAAK;IACL,GAAGC,cAAAA;AACP,GAAC,GAAGb,KAAK,CAAA;AAET,EAAA,MAAMc,eAAe,GAAGL,UAAU,IAAIM,sBAAsB,CAACN,UAAU,CAAC,CAAA;;AAExE;AACA,EAAA,MAAMO,kBAAkB,GAAG,OAAON,QAAQ,KAAK,QAAQ,IACnDA,QAAQ,CAACO,KAAK,GAAG,CAAC,IAAI;IAAE,4BAA4B,EAAEP,QAAQ,CAACO,KAAAA;GAAO,CAAA;AAC1E,EAAA,MAAMC,oBAAoB,GAAG,CAAC,CAACF,kBAAkB,CAAA;AACjD,EAAA,MAAMG,WAAW,GAAG,CAAC,CAACT,QAAQ,CAAA;;AAE9B;AACJ;AACA;AACA;AACA;AACI,EAAA,MAAMU,eAAe,GAAG,CAACZ,MAAM,IAC3B,EAAEW,WAAW,IAAI,CAACD,oBAAoB,CAAC,IACvCP,UAAU,IAAI;AAAE,IAAA,yBAAyB,EAAEA,UAAAA;GAAY,CAAA;EAE3D,MAAM;IAAEU,YAAY;AAAEC,IAAAA,QAAAA;AAAS,GAAC,GAAGC,uBAAuB,CAACnB,QAAQ,CAAC,CAAA;EAEpE,oBACIoB,GAAA,CAACrB,SAAS,EAAA;AACNF,IAAAA,GAAG,EAAEwB,YAAY,CAACxB,GAAG,EAAoBqB,QAAQ,CAAE;AACnDjB,IAAAA,SAAS,EAAEqB,UAAU,CACjBrB,SAAS,EACTsB,kBAAkB,CAAC;AACfC,MAAAA,MAAM,EAAEjC,SAAS;AACjBwB,MAAAA,WAAW,EAAEA,WAAW,IAAI,CAACD,oBAAoB;AACjDA,MAAAA,oBAAAA;AACJ,KAAC,CAAC,EACFJ,eAAe,EACfe,cAAc,CAACvB,KAAK,EAAEC,YAAY,CAAC,EACnCC,MAAM,IAAI,CAAGb,EAAAA,SAAS,WAC1B,CAAE;AACFmC,IAAAA,KAAK,EAAET,YAAa;AACpBT,IAAAA,KAAK,EAAE;AAAE,MAAA,GAAGI,kBAAkB;AAAE,MAAA,GAAGI,eAAe;MAAE,GAAGR,KAAAA;KAAQ;AAAA,IAAA,GAC3DC,cAAc;IAAAT,QAAA,EAEjB2B,0BAA0B,CAAC3B,QAAQ,CAAA;AAAC,GAC9B,CAAC,CAAA;AAEpB,CAAC,EAAC;AACFN,IAAI,CAACkC,WAAW,GAAGtC,cAAc,CAAA;AACjCI,IAAI,CAACO,SAAS,GAAGV,SAAS,CAAA;AAC1BG,IAAI,CAACmC,YAAY,GAAGpC,aAAa;;;;"}

package/_internal/2040beb8.js

@@ -0,0 +1,169 @@
+import { useState, useEffect } from 'react';
+import get from 'lodash/get';
+
+const INITIAL_INDEX = -1;
+
+/**
+ * This custom hook provides the necessary set of functions and values to properly navigate
+ * a list using the keyboard.
+ *
+ * @param  items                    the list of items that will be navigated using the keyboard.
+ * @param  ref                      A reference to the element that is controlling the navigation.
+ * @param  onListItemSelected       callback to be executed when the ENTER key is pressed on an item.
+ * @param  onListItemNavigated      callback to be executed when the Arrow keys are pressed.
+ * @param  onEnterPressed           callback to be executed when the ENTER key is pressed.
+ * @param  onBackspacePressed       callback to be executed when the BACKSPACE key is pressed.
+ * @param  keepFocusAfterSelection  determines whether after selecting an item, the focus should be maintained on the current target or not.
+ * @param  initialIndex             where should the navigation start from. it defaults to `-1`, so the first item navigated is the item on position `0`.
+ * @param  preventTabOnEnteredValue determines whether upon TAB, if there is a value entered, the event is prevented or not.
+ * @return useKeyboardListNavigation helpers.
+ */
+const useKeyboardListNavigation = (items, ref, onListItemSelected, onListItemNavigated, onEnterPressed, onBackspacePressed, keepFocusAfterSelection = false, initialIndex = INITIAL_INDEX, preventTabOnEnteredValue = true) => {
+  const [activeItemIndex, setActiveItemIndex] = useState(initialIndex);
+
+  /**
+   * This function calculates the next index in the list to be highlighted
+   * @param key - key code pressed
+   * @return next active index
+   */
+  const calculateActiveIndex = key => {
+    switch (key) {
+      case 'ArrowDown':
+        return activeItemIndex + 1 < items.length ? activeItemIndex + 1 : 0;
+      case 'ArrowUp':
+        return activeItemIndex - 1 >= 0 ? activeItemIndex - 1 : items.length - 1;
+      default:
+        return initialIndex;
+    }
+  };
+
+  /**
+   * Resets the active index to the initial state
+   */
+  const resetActiveIndex = () => {
+    setActiveItemIndex(initialIndex);
+  };
+
+  /**
+   * Prevents the default event and stops the propagation of said event
+   * @param evt - key pressed event
+   */
+  const preventDefaultAndStopPropagation = evt => {
+    evt.preventDefault();
+    evt.stopPropagation();
+  };
+
+  /**
+   * Handles navigation with the arrows using the keyboard
+   * @param evt - key pressed event
+   */
+  const onArrowPressed = evt => {
+    const {
+      key
+    } = evt;
+    const nextActiveIndex = calculateActiveIndex(key);
+    setActiveItemIndex(nextActiveIndex);
+    preventDefaultAndStopPropagation(evt);
+    if (onListItemNavigated) {
+      const selectedItem = items[nextActiveIndex];
+      onListItemNavigated(selectedItem);
+    }
+  };
+
+  /**
+   * Handles the event when the backspace key is pressed
+   * @param evt - key pressed event
+   */
+  const onBackspaceKeyPressed = evt => {
+    if (onBackspacePressed) {
+      onBackspacePressed(evt);
+    }
+  };
+
+  /**
+   * Handles when the ENTER key is pressed
+   * @param evt - key pressed event
+   */
+  const onEnterKeyPressed = evt => {
+    if (!onListItemSelected) {
+      return;
+    }
+    preventDefaultAndStopPropagation(evt);
+    if (!keepFocusAfterSelection) {
+      evt.currentTarget.blur();
+    }
+    const selectedItem = items[activeItemIndex];
+    if (selectedItem) {
+      onListItemSelected(selectedItem);
+      resetActiveIndex();
+    } else if (activeItemIndex === initialIndex && onEnterPressed) {
+      const value = get(evt, 'target.value');
+      onEnterPressed(value);
+      resetActiveIndex();
+    }
+  };
+
+  /**
+   * Handles when the TAB key is pressed
+   * @param evt - key pressed event
+   */
+  const onTabKeyPressed = evt => {
+    const value = get(evt, 'target.value');
+    if (preventTabOnEnteredValue && value && value.length > 0) {
+      preventDefaultAndStopPropagation(evt);
+    }
+  };
+
+  /**
+   * In order to make it easier in the future to add new events depending on the key
+   * a map was created to add these handlers. In the future, if there is another event
+   * that we need to manage depending on a specific key, we just need to add the key code
+   * here, and as a value, the handler for said key.
+   */
+  const eventsForKeyPressed = {
+    ArrowDown: onArrowPressed,
+    Tab: onTabKeyPressed,
+    ArrowUp: onArrowPressed,
+    Enter: onEnterKeyPressed,
+    Backspace: onBackspaceKeyPressed
+  };
+
+  /**
+   * Calculates the next active item index depending on the key pressed.
+   * If the key pressed was ENTER, the function executes the callback `onListItemSelected`
+   * and resets the active index, since an item was selected.
+   * @param evt - key pressed or key down event
+   */
+  const onKeyboardNavigation = evt => {
+    const {
+      key
+    } = evt;
+    const handler = eventsForKeyPressed[key];
+    if (handler) {
+      handler(evt);
+    }
+  };
+  useEffect(() => {
+    const {
+      current: currentElement
+    } = ref;
+    if (!currentElement) {
+      return undefined;
+    }
+    currentElement.addEventListener('focus', resetActiveIndex);
+    currentElement.addEventListener('keydown', onKeyboardNavigation);
+    return () => {
+      currentElement.removeEventListener('focus', resetActiveIndex);
+      currentElement.removeEventListener('keydown', onKeyboardNavigation);
+    };
+  });
+  return {
+    activeItemIndex,
+    onKeyboardNavigation,
+    resetActiveIndex,
+    setActiveItemIndex
+  };
+};
+
+export { useKeyboardListNavigation };
+//# sourceMappingURL=2040beb8.js.map

package/_internal/2040beb8.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"2040beb8.js","sources":["../../src/hooks/useKeyboardListNavigation.tsx"],"sourcesContent":["import { RefObject, SetStateAction, useEffect, useState } from 'react';\n\nimport get from 'lodash/get';\n\ntype Listener = (evt: KeyboardEvent) => void;\n\ninterface UseKeyboardListNavigationType {\n    /** the current active index */\n    activeItemIndex: number;\n    /** callback to be used when a key is pressed. usually used with the native prop `onKeyDown` */\n    onKeyboardNavigation: Listener;\n    /** Resets the active index to the initial state */\n    resetActiveIndex(): void;\n    /** Sets the active index to a given value */\n    setActiveItemIndex(value: SetStateAction<number>): void;\n}\n\nexport type useKeyboardListNavigationType = <I>(\n    items: I[],\n    ref: RefObject<HTMLElement>,\n    onListItemSelected: (itemSelected: I) => void,\n    onListItemNavigated?: (itemSelected: I) => void,\n    onEnterPressed?: (itemSelected: string) => void,\n    onBackspacePressed?: Listener,\n    keepFocusAfterSelection?: boolean,\n    initialIndex?: number,\n    preventTabOnEnteredValue?: boolean,\n) => UseKeyboardListNavigationType;\n\nconst INITIAL_INDEX = -1;\n\n/**\n * This custom hook provides the necessary set of functions and values to properly navigate\n * a list using the keyboard.\n *\n * @param  items                    the list of items that will be navigated using the keyboard.\n * @param  ref                      A reference to the element that is controlling the navigation.\n * @param  onListItemSelected       callback to be executed when the ENTER key is pressed on an item.\n * @param  onListItemNavigated      callback to be executed when the Arrow keys are pressed.\n * @param  onEnterPressed           callback to be executed when the ENTER key is pressed.\n * @param  onBackspacePressed       callback to be executed when the BACKSPACE key is pressed.\n * @param  keepFocusAfterSelection  determines whether after selecting an item, the focus should be maintained on the current target or not.\n * @param  initialIndex             where should the navigation start from. it defaults to `-1`, so the first item navigated is the item on position `0`.\n * @param  preventTabOnEnteredValue determines whether upon TAB, if there is a value entered, the event is prevented or not.\n * @return useKeyboardListNavigation helpers.\n */\nexport const useKeyboardListNavigation: useKeyboardListNavigationType = (\n    items,\n    ref,\n    onListItemSelected,\n    onListItemNavigated,\n    onEnterPressed,\n    onBackspacePressed,\n    keepFocusAfterSelection = false,\n    initialIndex = INITIAL_INDEX,\n    preventTabOnEnteredValue = true,\n) => {\n    const [activeItemIndex, setActiveItemIndex] = useState(initialIndex);\n\n    /**\n     * This function calculates the next index in the list to be highlighted\n     * @param key - key code pressed\n     * @return next active index\n     */\n    const calculateActiveIndex = (key: string): number => {\n        switch (key) {\n            case 'ArrowDown':\n                return activeItemIndex + 1 < items.length ? activeItemIndex + 1 : 0;\n            case 'ArrowUp':\n                return activeItemIndex - 1 >= 0 ? activeItemIndex - 1 : items.length - 1;\n            default:\n                return initialIndex;\n        }\n    };\n\n    /**\n     * Resets the active index to the initial state\n     */\n    const resetActiveIndex = () => {\n        setActiveItemIndex(initialIndex);\n    };\n\n    /**\n     * Prevents the default event and stops the propagation of said event\n     * @param evt - key pressed event\n     */\n    const preventDefaultAndStopPropagation: Listener = (evt) => {\n        evt.preventDefault();\n        evt.stopPropagation();\n    };\n\n    /**\n     * Handles navigation with the arrows using the keyboard\n     * @param evt - key pressed event\n     */\n    const onArrowPressed: Listener = (evt) => {\n        const { key } = evt;\n        const nextActiveIndex = calculateActiveIndex(key);\n        setActiveItemIndex(nextActiveIndex);\n        preventDefaultAndStopPropagation(evt);\n        if (onListItemNavigated) {\n            const selectedItem = items[nextActiveIndex];\n            onListItemNavigated(selectedItem);\n        }\n    };\n\n    /**\n     * Handles the event when the backspace key is pressed\n     * @param evt - key pressed event\n     */\n    const onBackspaceKeyPressed: Listener = (evt) => {\n        if (onBackspacePressed) {\n            onBackspacePressed(evt);\n        }\n    };\n\n    /**\n     * Handles when the ENTER key is pressed\n     * @param evt - key pressed event\n     */\n    const onEnterKeyPressed: Listener = (evt) => {\n        if (!onListItemSelected) {\n            return;\n        }\n\n        preventDefaultAndStopPropagation(evt);\n\n        if (!keepFocusAfterSelection) {\n            (evt.currentTarget as HTMLElement).blur();\n        }\n\n        const selectedItem = items[activeItemIndex];\n\n        if (selectedItem) {\n            onListItemSelected(selectedItem);\n            resetActiveIndex();\n        } else if (activeItemIndex === initialIndex && onEnterPressed) {\n            const value = get(evt, 'target.value');\n            onEnterPressed(value);\n            resetActiveIndex();\n        }\n    };\n\n    /**\n     * Handles when the TAB key is pressed\n     * @param evt - key pressed event\n     */\n    const onTabKeyPressed: Listener = (evt) => {\n        const value = get(evt, 'target.value');\n\n        if (preventTabOnEnteredValue && value && value.length > 0) {\n            preventDefaultAndStopPropagation(evt);\n        }\n    };\n\n    /**\n     * In order to make it easier in the future to add new events depending on the key\n     * a map was created to add these handlers. In the future, if there is another event\n     * that we need to manage depending on a specific key, we just need to add the key code\n     * here, and as a value, the handler for said key.\n     */\n    const eventsForKeyPressed: Record<string, Listener> = {\n        ArrowDown: onArrowPressed,\n        Tab: onTabKeyPressed,\n        ArrowUp: onArrowPressed,\n        Enter: onEnterKeyPressed,\n        Backspace: onBackspaceKeyPressed,\n    };\n\n    /**\n     * Calculates the next active item index depending on the key pressed.\n     * If the key pressed was ENTER, the function executes the callback `onListItemSelected`\n     * and resets the active index, since an item was selected.\n     * @param evt - key pressed or key down event\n     */\n    const onKeyboardNavigation: Listener = (evt) => {\n        const { key } = evt;\n        const handler = eventsForKeyPressed[key];\n\n        if (handler) {\n            handler(evt);\n        }\n    };\n\n    useEffect(() => {\n        const { current: currentElement } = ref;\n        if (!currentElement) {\n            return undefined;\n        }\n        currentElement.addEventListener('focus', resetActiveIndex);\n        currentElement.addEventListener('keydown', onKeyboardNavigation);\n        return () => {\n            currentElement.removeEventListener('focus', resetActiveIndex);\n            currentElement.removeEventListener('keydown', onKeyboardNavigation);\n        };\n    });\n\n    return {\n        activeItemIndex,\n        onKeyboardNavigation,\n        resetActiveIndex,\n        setActiveItemIndex,\n    };\n};\n"],"names":["INITIAL_INDEX","useKeyboardListNavigation","items","ref","onListItemSelected","onListItemNavigated","onEnterPressed","onBackspacePressed","keepFocusAfterSelection","initialIndex","preventTabOnEnteredValue","activeItemIndex","setActiveItemIndex","useState","calculateActiveIndex","key","length","resetActiveIndex","preventDefaultAndStopPropagation","evt","preventDefault","stopPropagation","onArrowPressed","nextActiveIndex","selectedItem","onBackspaceKeyPressed","onEnterKeyPressed","currentTarget","blur","value","get","onTabKeyPressed","eventsForKeyPressed","ArrowDown","Tab","ArrowUp","Enter","Backspace","onKeyboardNavigation","handler","useEffect","current","currentElement","undefined","addEventListener","removeEventListener"],"mappings":"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"}