@economic/taco 15.0.0-EC-87288-remove-form.0 → 15.0.0

package/dist/components/Breadcrumbs/Breadcrumbs.cjs

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+;/* empty css                  */
+const Localization = require("../Provider/Localization.cjs");
+const Link = require("../actions/Link/Link.cjs");
+function Breadcrumbs({ currentPageTitle, children }) {
+  const { texts } = Localization.useLocalization();
+  return /* @__PURE__ */ React.createElement("nav", { "data-taco": "breadcrumbs", "aria-label": texts.breadcrumbs.nav }, /* @__PURE__ */ React.createElement(
+    "ol",
+    {
+      role: "list",
+      className: "group/breadcrumbs mb-0 flex list-none flex-wrap items-baseline gap-1",
+      "data-taco": "breadcrumbs-list"
+    },
+    children,
+    /* @__PURE__ */ React.createElement("li", { "data-taco": "breadcrumbs-page", "aria-current": "page", className: "sr-only" }, currentPageTitle)
+  ));
+}
+const BreadcrumbLink = (props) => {
+  return /* @__PURE__ */ React.createElement("li", { "data-taco": "breadcrumbs-link" }, /* @__PURE__ */ React.createElement(Link.Link, { ...props, size: "sm" }));
+};
+Breadcrumbs.Link = BreadcrumbLink;
+exports.Breadcrumbs = Breadcrumbs;
+//# sourceMappingURL=Breadcrumbs.cjs.map

package/dist/components/Breadcrumbs/Breadcrumbs.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumbs.cjs","sources":["../../../src/components/Breadcrumbs/Breadcrumbs.tsx"],"sourcesContent":["import React, { type PropsWithChildren } from 'react';\n\nimport type { LinkOwnProps } from '@/components';\nimport { Link, useLocalization } from '@/components';\n\nimport './Breadcrumbs.css';\n\nexport type BreadcrumbsTexts = {\n    /* Aria-label used for breadcrumb nav */\n    nav: string;\n};\n\nexport type BreadcrumbsProps = PropsWithChildren<{\n    /**\n     * The title of the current page. Rendered as the last crumb with `aria-current=\"page\"` to\n     * indicate to screen readers that this is the active page in the trail. It is visually hidden\n     * since the page heading already communicates this — the crumb exists for assistive technology only.\n     */\n    currentPageTitle: string;\n}>;\n\nexport function Breadcrumbs({ currentPageTitle, children }: BreadcrumbsProps) {\n    const { texts } = useLocalization();\n\n    return (\n        <nav data-taco=\"breadcrumbs\" aria-label={texts.breadcrumbs.nav}>\n            {/* Explicitly adding the role here due to an old Safari quirk when setting `list-style: none;` */}\n            <ol\n                role=\"list\"\n                className=\"group/breadcrumbs mb-0 flex list-none flex-wrap items-baseline gap-1\"\n                data-taco=\"breadcrumbs-list\">\n                {children}\n\n                <li data-taco=\"breadcrumbs-page\" aria-current=\"page\" className=\"sr-only\">\n                    {currentPageTitle}\n                </li>\n            </ol>\n        </nav>\n    );\n}\n\n/**\n * Composed from the same pieces as `LinkProps` (rather than an `Omit` over the finished intersection)\n * so the spread below is structurally identical to what `Link` expects — TS cannot relate\n * `Omit<LinkProps<T>, ...>` back to `LinkProps<T>` while `T` is unresolved\n */\ntype BreadcrumbLinkProps<T extends React.ElementType = 'a'> = Pick<LinkOwnProps<T>, 'as'> &\n    Omit<React.ComponentPropsWithoutRef<T>, keyof LinkOwnProps<T> | 'className' | 'style'> & {\n        children: string;\n    };\n\n// `props` is deliberately not rest-destructured — a rest element wraps the type in\n// `Omit<BreadcrumbLinkProps<T>, ...>`, which TS cannot relate back to `LinkProps<T>` (see above)\nconst BreadcrumbLink = <T extends React.ElementType = 'a'>(props: BreadcrumbLinkProps<T>) => {\n    return (\n        <li data-taco=\"breadcrumbs-link\">\n            <Link<T> {...props} size=\"sm\" />\n        </li>\n    );\n};\n\nBreadcrumbs.Link = BreadcrumbLink;\n"],"names":["useLocalization","Link"],"mappings":";;;;;;AAqBO,SAAS,YAAY,EAAE,kBAAkB,YAA8B;AAC1E,QAAM,EAAE,MAAA,IAAUA,6BAAA;AAElB,6CACK,OAAA,EAAI,aAAU,eAAc,cAAY,MAAM,YAAY,IAAA,GAEvD,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,MAAK;AAAA,MACL,WAAU;AAAA,MACV,aAAU;AAAA,IAAA;AAAA,IACT;AAAA,IAED,sBAAA,cAAC,QAAG,aAAU,oBAAmB,gBAAa,QAAO,WAAU,aAC1D,gBACL;AAAA,EAAA,CAER;AAER;AAcA,MAAM,iBAAiB,CAAoC,UAAkC;AACzF,SACI,sBAAA,cAAC,MAAA,EAAG,aAAU,mBAAA,GACV,sBAAA,cAACC,KAAAA,QAAS,GAAG,OAAO,MAAK,KAAA,CAAK,CAClC;AAER;AAEA,YAAY,OAAO;;"}

package/dist/components/Breadcrumbs/Breadcrumbs.d.ts

@@ -0,0 +1,26 @@
+import { default as React, PropsWithChildren } from 'react';
+import { LinkOwnProps } from '..';
+export type BreadcrumbsTexts = {
+    nav: string;
+};
+export type BreadcrumbsProps = PropsWithChildren<{
+    /**
+     * The title of the current page. Rendered as the last crumb with `aria-current="page"` to
+     * indicate to screen readers that this is the active page in the trail. It is visually hidden
+     * since the page heading already communicates this — the crumb exists for assistive technology only.
+     */
+    currentPageTitle: string;
+}>;
+export declare function Breadcrumbs({ currentPageTitle, children }: BreadcrumbsProps): React.JSX.Element;
+export declare namespace Breadcrumbs {
+    var Link: <T extends React.ElementType = "a">(props: BreadcrumbLinkProps<T>) => React.JSX.Element;
+}
+/**
+ * Composed from the same pieces as `LinkProps` (rather than an `Omit` over the finished intersection)
+ * so the spread below is structurally identical to what `Link` expects — TS cannot relate
+ * `Omit<LinkProps<T>, ...>` back to `LinkProps<T>` while `T` is unresolved
+ */
+type BreadcrumbLinkProps<T extends React.ElementType = 'a'> = Pick<LinkOwnProps<T>, 'as'> & Omit<React.ComponentPropsWithoutRef<T>, keyof LinkOwnProps<T> | 'className' | 'style'> & {
+    children: string;
+};
+export {};

package/dist/components/Breadcrumbs/Breadcrumbs.js

@@ -0,0 +1,25 @@
+import React__default from "react";
+/* empty css                */
+import { useLocalization } from "../Provider/Localization.js";
+import { Link } from "../actions/Link/Link.js";
+function Breadcrumbs({ currentPageTitle, children }) {
+  const { texts } = useLocalization();
+  return /* @__PURE__ */ React__default.createElement("nav", { "data-taco": "breadcrumbs", "aria-label": texts.breadcrumbs.nav }, /* @__PURE__ */ React__default.createElement(
+    "ol",
+    {
+      role: "list",
+      className: "group/breadcrumbs mb-0 flex list-none flex-wrap items-baseline gap-1",
+      "data-taco": "breadcrumbs-list"
+    },
+    children,
+    /* @__PURE__ */ React__default.createElement("li", { "data-taco": "breadcrumbs-page", "aria-current": "page", className: "sr-only" }, currentPageTitle)
+  ));
+}
+const BreadcrumbLink = (props) => {
+  return /* @__PURE__ */ React__default.createElement("li", { "data-taco": "breadcrumbs-link" }, /* @__PURE__ */ React__default.createElement(Link, { ...props, size: "sm" }));
+};
+Breadcrumbs.Link = BreadcrumbLink;
+export {
+  Breadcrumbs
+};
+//# sourceMappingURL=Breadcrumbs.js.map

package/dist/components/Breadcrumbs/Breadcrumbs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumbs.js","sources":["../../../src/components/Breadcrumbs/Breadcrumbs.tsx"],"sourcesContent":["import React, { type PropsWithChildren } from 'react';\n\nimport type { LinkOwnProps } from '@/components';\nimport { Link, useLocalization } from '@/components';\n\nimport './Breadcrumbs.css';\n\nexport type BreadcrumbsTexts = {\n    /* Aria-label used for breadcrumb nav */\n    nav: string;\n};\n\nexport type BreadcrumbsProps = PropsWithChildren<{\n    /**\n     * The title of the current page. Rendered as the last crumb with `aria-current=\"page\"` to\n     * indicate to screen readers that this is the active page in the trail. It is visually hidden\n     * since the page heading already communicates this — the crumb exists for assistive technology only.\n     */\n    currentPageTitle: string;\n}>;\n\nexport function Breadcrumbs({ currentPageTitle, children }: BreadcrumbsProps) {\n    const { texts } = useLocalization();\n\n    return (\n        <nav data-taco=\"breadcrumbs\" aria-label={texts.breadcrumbs.nav}>\n            {/* Explicitly adding the role here due to an old Safari quirk when setting `list-style: none;` */}\n            <ol\n                role=\"list\"\n                className=\"group/breadcrumbs mb-0 flex list-none flex-wrap items-baseline gap-1\"\n                data-taco=\"breadcrumbs-list\">\n                {children}\n\n                <li data-taco=\"breadcrumbs-page\" aria-current=\"page\" className=\"sr-only\">\n                    {currentPageTitle}\n                </li>\n            </ol>\n        </nav>\n    );\n}\n\n/**\n * Composed from the same pieces as `LinkProps` (rather than an `Omit` over the finished intersection)\n * so the spread below is structurally identical to what `Link` expects — TS cannot relate\n * `Omit<LinkProps<T>, ...>` back to `LinkProps<T>` while `T` is unresolved\n */\ntype BreadcrumbLinkProps<T extends React.ElementType = 'a'> = Pick<LinkOwnProps<T>, 'as'> &\n    Omit<React.ComponentPropsWithoutRef<T>, keyof LinkOwnProps<T> | 'className' | 'style'> & {\n        children: string;\n    };\n\n// `props` is deliberately not rest-destructured — a rest element wraps the type in\n// `Omit<BreadcrumbLinkProps<T>, ...>`, which TS cannot relate back to `LinkProps<T>` (see above)\nconst BreadcrumbLink = <T extends React.ElementType = 'a'>(props: BreadcrumbLinkProps<T>) => {\n    return (\n        <li data-taco=\"breadcrumbs-link\">\n            <Link<T> {...props} size=\"sm\" />\n        </li>\n    );\n};\n\nBreadcrumbs.Link = BreadcrumbLink;\n"],"names":["React"],"mappings":";;;;AAqBO,SAAS,YAAY,EAAE,kBAAkB,YAA8B;AAC1E,QAAM,EAAE,MAAA,IAAU,gBAAA;AAElB,sDACK,OAAA,EAAI,aAAU,eAAc,cAAY,MAAM,YAAY,IAAA,GAEvDA,+BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,MAAK;AAAA,MACL,WAAU;AAAA,MACV,aAAU;AAAA,IAAA;AAAA,IACT;AAAA,IAEDA,+BAAA,cAAC,QAAG,aAAU,oBAAmB,gBAAa,QAAO,WAAU,aAC1D,gBACL;AAAA,EAAA,CAER;AAER;AAcA,MAAM,iBAAiB,CAAoC,UAAkC;AACzF,SACIA,+BAAA,cAAC,MAAA,EAAG,aAAU,mBAAA,GACVA,+BAAA,cAAC,QAAS,GAAG,OAAO,MAAK,KAAA,CAAK,CAClC;AAER;AAEA,YAAY,OAAO;"}

package/dist/components/Listbox/ScrollableList.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollableList.cjs","sources":["../../../src/components/Listbox/ScrollableList.tsx"],"sourcesContent":["import cn from 'clsx';\nimport * as React from 'react';\n\nimport { Checkbox, Spinner, useLocalization } from '@/components';\nimport { getInputClasses } from '@/components/Input/util';\nimport { useMergedRef } from '@/hooks/useMergedRef';\nimport { getNextIndexFromKey } from '@/utils/hooks/useListKeyboardNavigation';\nimport { useListScrollTo } from '@/utils/hooks/useListScrollTo';\n\nimport './ScrollableList.css';\n\nexport type ScrollableListItemValue = string | number | boolean | null;\n\nexport type ScrollableListItem = {\n    /**\n     * Set whether the item is disabled.\n     * This will both change the style and make the item unselectable\n     */\n    disabled?: boolean;\n    /** Specifies whether the item has child items -- intended for internal use only */\n    hasChildren?: boolean;\n    /** Place an icon before the item's text */\n    icon?: React.ReactElement<{ className?: string }>;\n    /** The index path to the item -- intended for internal use only */\n    path?: string;\n    /** Text describing the item */\n    text: string | React.JSX.Element;\n    /** Value of the item */\n    value: ScrollableListItemValue;\n    /** Child items to show hierarchical data */\n    children?: ScrollableListItem[];\n};\n\n/** @internal */\nexport type ScrollableListProps = Omit<\n    React.HTMLAttributes<HTMLUListElement>,\n    'defaultValue' | 'id' | 'onChange' | 'onClick' | 'onKeyDown'\n> & {\n    /** Data indicating the options in scrollable list */\n    data: ScrollableListItem[];\n    /** Sets the list to be disabled */\n    disabled?: boolean;\n    /** Draws attention to the scrollable list by changing its style and making it visually prominent */\n    highlighted?: boolean;\n    /** Set an id for the scrollable list */\n    id: string;\n    /** Whether the input is in an invalid state */\n    invalid?: boolean;\n    /**\n     * Shows a loading indicator with a text next to it.\n     * Read more about how to provide the text in `Provider` component.\n     */\n    loading?: boolean;\n    /**\n     * Handler called when current active/selected option changes in a scrollable list.\n     * @param index indicates the index of the current active option\n     */\n    onChange: (index: number) => void;\n    /** Handler called when option is clicked */\n    onClick?: (event: React.MouseEvent<HTMLLIElement>, index: number) => void;\n    /**\n     * Set whether the selected item should be scrolled into view when listbox is focused.\n     * Default value is `false`\n     */\n    scrollOnFocus?: boolean;\n    /** Handler called when a key is pressed */\n    onKeyDown?: (event: React.KeyboardEvent<HTMLUListElement>, index: number | undefined) => void;\n    /** Sets the list to read only mode */\n    readOnly?: boolean;\n    /**\n     * Value of the scrollable list representing the selected item.\n     * It needs to be an existing value from the provided data.\n     */\n    value: number | undefined;\n    /**\n     * Allows to select multiple items from the list\n     */\n    multiselect?: boolean;\n    /**\n     * Contains the currently selected values when multiselect mode is ON.\n     */\n    selectedIndexes?: number[];\n    /**\n     * True when all available (not disabled) options are selected\n     */\n    allOptionsSelected?: boolean;\n};\n\n/** @internal */\nexport type ScrollableListPropsWithRef = ScrollableListProps & React.RefAttributes<HTMLUListElement>;\n\nexport const getId = (id: string, value: ScrollableListItemValue): string => `${id}_${value}`;\n\nconst getNextEnabledItem = (\n    event: React.KeyboardEvent<HTMLElement>,\n    data: ScrollableListItem[],\n    index: number | undefined\n): number | undefined => {\n    const nextIndex = getNextIndexFromKey(event.key, data.length, index);\n\n    if (nextIndex) {\n        if (nextIndex === index) {\n            return index;\n        }\n        if (data[nextIndex] && data[nextIndex].disabled) {\n            return getNextEnabledItem(event, data, nextIndex);\n        }\n    }\n\n    return nextIndex;\n};\n\nexport const ScrollableList = React.forwardRef(function ScrollableList(\n    props: ScrollableListProps,\n    ref: React.Ref<HTMLUListElement>\n) {\n    const {\n        data,\n        disabled,\n        highlighted: _1,\n        id,\n        invalid: _2,\n        loading,\n        onChange: setCurrentIndex,\n        onClick,\n        onFocus,\n        onKeyDown,\n        readOnly,\n        scrollOnFocus = false,\n        value: currentIndex,\n        multiselect,\n        selectedIndexes = [],\n        allOptionsSelected = false,\n        ...otherProps\n    } = props;\n    const listRef = useMergedRef<HTMLUListElement>(ref);\n    const itemRefs = React.useMemo(() => data.map(() => React.createRef<HTMLLIElement>()), [data]);\n    const { texts } = useLocalization();\n    const { scrollTo } = useListScrollTo(listRef, itemRefs);\n\n    React.useEffect(() => {\n        if (currentIndex && itemRefs[currentIndex]?.current) {\n            itemRefs[currentIndex].current?.scrollIntoView({\n                block: 'center',\n            });\n        }\n    }, []);\n\n    React.useEffect(() => {\n        scrollTo(currentIndex);\n    }, [currentIndex]);\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLUListElement>): void => {\n        const nextIndex = getNextEnabledItem(event, data, currentIndex);\n\n        if (nextIndex !== undefined && nextIndex !== currentIndex) {\n            event.preventDefault();\n            scrollTo(nextIndex);\n            setCurrentIndex(nextIndex);\n        }\n\n        if (onKeyDown) {\n            event.persist();\n            const index = nextIndex === undefined ? currentIndex : nextIndex;\n            onKeyDown(event, index);\n        }\n\n        // Stops the keyboard event from propagating so that keyboard event on other components outside the scrollable\n        // list are not executed.\n        event.stopPropagation();\n    };\n\n    const handleClick = (index: number) => (event: React.MouseEvent<HTMLLIElement>) => {\n        setCurrentIndex(index);\n\n        if (onClick) {\n            event.persist();\n            onClick(event, index);\n        }\n    };\n\n    const handleFocus = (event: React.FocusEvent<HTMLUListElement>): void => {\n        if (scrollOnFocus) {\n            scrollTo(currentIndex);\n        }\n\n        if (onFocus) {\n            event.persist();\n            onFocus(event);\n        }\n    };\n\n    const getOptionCheckedState = (optionValue: string, index: number): boolean => {\n        if (optionValue === '#ALL-OPTIONS#') {\n            return allOptionsSelected;\n        }\n\n        if (!optionValue || !selectedIndexes) {\n            return false;\n        }\n\n        return selectedIndexes.some(i => i === index);\n    };\n\n    const options = data.map((option, index) => {\n        const depth = option.path ? option.path.split('.').length - 1 : 0;\n\n        return {\n            'aria-selected': multiselect ? getOptionCheckedState(String(option.value), index) : currentIndex === index,\n            'data-focused': currentIndex === index,\n            children: option.text,\n            className: cn(\n                'flex w-full flex-[0_0_2rem] cursor-pointer items-center bg-white px-3 focus:border-blue-500 focus:bg-blue-500 focus:text-white',\n                {\n                    'sticky top-0 font-bold': depth === 0 && !!option.hasChildren,\n                }\n            ),\n            disabled: option.disabled,\n            icon: option.icon,\n            id: getId(id, option.value),\n            key: getId(id, option.value),\n            onClick: !disabled && !readOnly ? handleClick(index) : undefined,\n            ref: itemRefs[index],\n            role: 'option',\n            style:\n                depth > 0\n                    ? {\n                          paddingLeft: `${depth + 1}rem`,\n                      }\n                    : undefined,\n        };\n    });\n\n    const list: React.HTMLAttributes<HTMLUListElement> &\n        React.RefAttributes<HTMLUListElement> & { disabled?: boolean; readOnly?: boolean } = {\n        ...otherProps,\n        className: cn(\n            'm-0 inline-flex h-auto list-none flex-col overflow-y-auto !p-0',\n            getInputClasses(props),\n            {\n                'yt-list--multiselect': multiselect,\n                'pointer-events-none': disabled,\n                'cursor-not-allowed': disabled || readOnly,\n            },\n            otherProps.className\n        ),\n        disabled,\n        id,\n        onFocus: !disabled && !readOnly ? handleFocus : undefined,\n        onKeyDown: !disabled && !readOnly ? handleKeyDown : undefined,\n        readOnly,\n        ref: listRef,\n        role: options.length <= 0 || loading ? 'presentation' : 'listbox',\n        tabIndex: otherProps.tabIndex || 0,\n    };\n\n    return (\n        <ul {...list} data-taco=\"scrollable-list\">\n            {loading ? (\n                <li className=\"yt-list__empty\">\n                    <span>\n                        <Spinner delay={0} />\n                    </span>\n                    <span>{texts.listbox.loading}</span>\n                </li>\n            ) : options.length ? (\n                options.map(({ children, icon, ...optionProps }) => (\n                    <li {...optionProps}>\n                        {icon}\n                        <span data-taco=\"list-option\" className=\"flex-grow truncate text-left\">\n                            {children}\n                        </span>\n                        {multiselect && (\n                            <Checkbox\n                                // In multiselect variant, this checkbox only acts as visual representation of item being selected,\n                                // so need to be taken out of screen reader scope.\n                                aria-hidden\n                                tabIndex={-1}\n                                checked={optionProps['aria-selected']}\n                                onChange={() => null}\n                                className=\"pointer-events-none ml-2 self-center p-px\"\n                            />\n                        )}\n                    </li>\n                ))\n            ) : (\n                <li className=\"yt-list__empty\">\n                    <span>{texts.listbox.empty}</span>\n                </li>\n            )}\n        </ul>\n    );\n});\n"],"names":["getNextIndexFromKey","React","ScrollableList","useMergedRef","useLocalization","useListScrollTo","getInputClasses","Spinner","Checkbox"],"mappings":"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"}
+{"version":3,"file":"ScrollableList.cjs","sources":["../../../src/components/Listbox/ScrollableList.tsx"],"sourcesContent":["import cn from 'clsx';\nimport * as React from 'react';\n\nimport { Checkbox, Spinner, useLocalization } from '@/components';\nimport { getInputClasses } from '@/components/Input/util';\nimport { useMergedRef } from '@/hooks/useMergedRef';\nimport { getNextIndexFromKey } from '@/utils/hooks/useListKeyboardNavigation';\nimport { useListScrollTo } from '@/utils/hooks/useListScrollTo';\n\nimport './ScrollableList.css';\n\nexport type ListboxTexts = {\n    /**\n     * Text displayed in the listbox if no data provided.\n     * To read more about how to provide the text, see [Provider](component:provider) component\n     */\n    empty: string;\n    /**\n     * Text displayed in the listbox to indicate the data is loading.\n     * Read more about how to provide the text in [Provider](component:provider) component\n     */\n    loading: string;\n};\n\nexport type ScrollableListItemValue = string | number | boolean | null;\n\nexport type ScrollableListItem = {\n    /**\n     * Set whether the item is disabled.\n     * This will both change the style and make the item unselectable\n     */\n    disabled?: boolean;\n    /** Specifies whether the item has child items -- intended for internal use only */\n    hasChildren?: boolean;\n    /** Place an icon before the item's text */\n    icon?: React.ReactElement<{ className?: string }>;\n    /** The index path to the item -- intended for internal use only */\n    path?: string;\n    /** Text describing the item */\n    text: string | React.JSX.Element;\n    /** Value of the item */\n    value: ScrollableListItemValue;\n    /** Child items to show hierarchical data */\n    children?: ScrollableListItem[];\n};\n\n/** @internal */\nexport type ScrollableListProps = Omit<\n    React.HTMLAttributes<HTMLUListElement>,\n    'defaultValue' | 'id' | 'onChange' | 'onClick' | 'onKeyDown'\n> & {\n    /** Data indicating the options in scrollable list */\n    data: ScrollableListItem[];\n    /** Sets the list to be disabled */\n    disabled?: boolean;\n    /** Draws attention to the scrollable list by changing its style and making it visually prominent */\n    highlighted?: boolean;\n    /** Set an id for the scrollable list */\n    id: string;\n    /** Whether the input is in an invalid state */\n    invalid?: boolean;\n    /**\n     * Shows a loading indicator with a text next to it.\n     * Read more about how to provide the text in `Provider` component.\n     */\n    loading?: boolean;\n    /**\n     * Handler called when current active/selected option changes in a scrollable list.\n     * @param index indicates the index of the current active option\n     */\n    onChange: (index: number) => void;\n    /** Handler called when option is clicked */\n    onClick?: (event: React.MouseEvent<HTMLLIElement>, index: number) => void;\n    /**\n     * Set whether the selected item should be scrolled into view when listbox is focused.\n     * Default value is `false`\n     */\n    scrollOnFocus?: boolean;\n    /** Handler called when a key is pressed */\n    onKeyDown?: (event: React.KeyboardEvent<HTMLUListElement>, index: number | undefined) => void;\n    /** Sets the list to read only mode */\n    readOnly?: boolean;\n    /**\n     * Value of the scrollable list representing the selected item.\n     * It needs to be an existing value from the provided data.\n     */\n    value: number | undefined;\n    /**\n     * Allows to select multiple items from the list\n     */\n    multiselect?: boolean;\n    /**\n     * Contains the currently selected values when multiselect mode is ON.\n     */\n    selectedIndexes?: number[];\n    /**\n     * True when all available (not disabled) options are selected\n     */\n    allOptionsSelected?: boolean;\n};\n\n/** @internal */\nexport type ScrollableListPropsWithRef = ScrollableListProps & React.RefAttributes<HTMLUListElement>;\n\nexport const getId = (id: string, value: ScrollableListItemValue): string => `${id}_${value}`;\n\nconst getNextEnabledItem = (\n    event: React.KeyboardEvent<HTMLElement>,\n    data: ScrollableListItem[],\n    index: number | undefined\n): number | undefined => {\n    const nextIndex = getNextIndexFromKey(event.key, data.length, index);\n\n    if (nextIndex) {\n        if (nextIndex === index) {\n            return index;\n        }\n        if (data[nextIndex] && data[nextIndex].disabled) {\n            return getNextEnabledItem(event, data, nextIndex);\n        }\n    }\n\n    return nextIndex;\n};\n\nexport const ScrollableList = React.forwardRef(function ScrollableList(\n    props: ScrollableListProps,\n    ref: React.Ref<HTMLUListElement>\n) {\n    const {\n        data,\n        disabled,\n        highlighted: _1,\n        id,\n        invalid: _2,\n        loading,\n        onChange: setCurrentIndex,\n        onClick,\n        onFocus,\n        onKeyDown,\n        readOnly,\n        scrollOnFocus = false,\n        value: currentIndex,\n        multiselect,\n        selectedIndexes = [],\n        allOptionsSelected = false,\n        ...otherProps\n    } = props;\n    const listRef = useMergedRef<HTMLUListElement>(ref);\n    const itemRefs = React.useMemo(() => data.map(() => React.createRef<HTMLLIElement>()), [data]);\n    const { texts } = useLocalization();\n    const { scrollTo } = useListScrollTo(listRef, itemRefs);\n\n    React.useEffect(() => {\n        if (currentIndex && itemRefs[currentIndex]?.current) {\n            itemRefs[currentIndex].current?.scrollIntoView({\n                block: 'center',\n            });\n        }\n    }, []);\n\n    React.useEffect(() => {\n        scrollTo(currentIndex);\n    }, [currentIndex]);\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLUListElement>): void => {\n        const nextIndex = getNextEnabledItem(event, data, currentIndex);\n\n        if (nextIndex !== undefined && nextIndex !== currentIndex) {\n            event.preventDefault();\n            scrollTo(nextIndex);\n            setCurrentIndex(nextIndex);\n        }\n\n        if (onKeyDown) {\n            event.persist();\n            const index = nextIndex === undefined ? currentIndex : nextIndex;\n            onKeyDown(event, index);\n        }\n\n        // Stops the keyboard event from propagating so that keyboard event on other components outside the scrollable\n        // list are not executed.\n        event.stopPropagation();\n    };\n\n    const handleClick = (index: number) => (event: React.MouseEvent<HTMLLIElement>) => {\n        setCurrentIndex(index);\n\n        if (onClick) {\n            event.persist();\n            onClick(event, index);\n        }\n    };\n\n    const handleFocus = (event: React.FocusEvent<HTMLUListElement>): void => {\n        if (scrollOnFocus) {\n            scrollTo(currentIndex);\n        }\n\n        if (onFocus) {\n            event.persist();\n            onFocus(event);\n        }\n    };\n\n    const getOptionCheckedState = (optionValue: string, index: number): boolean => {\n        if (optionValue === '#ALL-OPTIONS#') {\n            return allOptionsSelected;\n        }\n\n        if (!optionValue || !selectedIndexes) {\n            return false;\n        }\n\n        return selectedIndexes.some(i => i === index);\n    };\n\n    const options = data.map((option, index) => {\n        const depth = option.path ? option.path.split('.').length - 1 : 0;\n\n        return {\n            'aria-selected': multiselect ? getOptionCheckedState(String(option.value), index) : currentIndex === index,\n            'data-focused': currentIndex === index,\n            children: option.text,\n            className: cn(\n                'flex w-full flex-[0_0_2rem] cursor-pointer items-center bg-white px-3 focus:border-blue-500 focus:bg-blue-500 focus:text-white',\n                {\n                    'sticky top-0 font-bold': depth === 0 && !!option.hasChildren,\n                }\n            ),\n            disabled: option.disabled,\n            icon: option.icon,\n            id: getId(id, option.value),\n            key: getId(id, option.value),\n            onClick: !disabled && !readOnly ? handleClick(index) : undefined,\n            ref: itemRefs[index],\n            role: 'option',\n            style:\n                depth > 0\n                    ? {\n                          paddingLeft: `${depth + 1}rem`,\n                      }\n                    : undefined,\n        };\n    });\n\n    const list: React.HTMLAttributes<HTMLUListElement> &\n        React.RefAttributes<HTMLUListElement> & { disabled?: boolean; readOnly?: boolean } = {\n        ...otherProps,\n        className: cn(\n            'm-0 inline-flex h-auto list-none flex-col overflow-y-auto !p-0',\n            getInputClasses(props),\n            {\n                'yt-list--multiselect': multiselect,\n                'pointer-events-none': disabled,\n                'cursor-not-allowed': disabled || readOnly,\n            },\n            otherProps.className\n        ),\n        disabled,\n        id,\n        onFocus: !disabled && !readOnly ? handleFocus : undefined,\n        onKeyDown: !disabled && !readOnly ? handleKeyDown : undefined,\n        readOnly,\n        ref: listRef,\n        role: options.length <= 0 || loading ? 'presentation' : 'listbox',\n        tabIndex: otherProps.tabIndex || 0,\n    };\n\n    return (\n        <ul {...list} data-taco=\"scrollable-list\">\n            {loading ? (\n                <li className=\"yt-list__empty\">\n                    <span>\n                        <Spinner delay={0} />\n                    </span>\n                    <span>{texts.listbox.loading}</span>\n                </li>\n            ) : options.length ? (\n                options.map(({ children, icon, ...optionProps }) => (\n                    <li {...optionProps}>\n                        {icon}\n                        <span data-taco=\"list-option\" className=\"flex-grow truncate text-left\">\n                            {children}\n                        </span>\n                        {multiselect && (\n                            <Checkbox\n                                // In multiselect variant, this checkbox only acts as visual representation of item being selected,\n                                // so need to be taken out of screen reader scope.\n                                aria-hidden\n                                tabIndex={-1}\n                                checked={optionProps['aria-selected']}\n                                onChange={() => null}\n                                className=\"pointer-events-none ml-2 self-center p-px\"\n                            />\n                        )}\n                    </li>\n                ))\n            ) : (\n                <li className=\"yt-list__empty\">\n                    <span>{texts.listbox.empty}</span>\n                </li>\n            )}\n        </ul>\n    );\n});\n"],"names":["getNextIndexFromKey","React","ScrollableList","useMergedRef","useLocalization","useListScrollTo","getInputClasses","Spinner","Checkbox"],"mappings":"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"}

package/dist/components/Listbox/ScrollableList.d.ts

@@ -1,4 +1,16 @@
 import * as React from 'react';
+export type ListboxTexts = {
+    /**
+     * Text displayed in the listbox if no data provided.
+     * To read more about how to provide the text, see [Provider](component:provider) component
+     */
+    empty: string;
+    /**
+     * Text displayed in the listbox to indicate the data is loading.
+     * Read more about how to provide the text in [Provider](component:provider) component
+     */
+    loading: string;
+};
 export type ScrollableListItemValue = string | number | boolean | null;
 export type ScrollableListItem = {
     /**

package/dist/components/Listbox/ScrollableList.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollableList.js","sources":["../../../src/components/Listbox/ScrollableList.tsx"],"sourcesContent":["import cn from 'clsx';\nimport * as React from 'react';\n\nimport { Checkbox, Spinner, useLocalization } from '@/components';\nimport { getInputClasses } from '@/components/Input/util';\nimport { useMergedRef } from '@/hooks/useMergedRef';\nimport { getNextIndexFromKey } from '@/utils/hooks/useListKeyboardNavigation';\nimport { useListScrollTo } from '@/utils/hooks/useListScrollTo';\n\nimport './ScrollableList.css';\n\nexport type ScrollableListItemValue = string | number | boolean | null;\n\nexport type ScrollableListItem = {\n    /**\n     * Set whether the item is disabled.\n     * This will both change the style and make the item unselectable\n     */\n    disabled?: boolean;\n    /** Specifies whether the item has child items -- intended for internal use only */\n    hasChildren?: boolean;\n    /** Place an icon before the item's text */\n    icon?: React.ReactElement<{ className?: string }>;\n    /** The index path to the item -- intended for internal use only */\n    path?: string;\n    /** Text describing the item */\n    text: string | React.JSX.Element;\n    /** Value of the item */\n    value: ScrollableListItemValue;\n    /** Child items to show hierarchical data */\n    children?: ScrollableListItem[];\n};\n\n/** @internal */\nexport type ScrollableListProps = Omit<\n    React.HTMLAttributes<HTMLUListElement>,\n    'defaultValue' | 'id' | 'onChange' | 'onClick' | 'onKeyDown'\n> & {\n    /** Data indicating the options in scrollable list */\n    data: ScrollableListItem[];\n    /** Sets the list to be disabled */\n    disabled?: boolean;\n    /** Draws attention to the scrollable list by changing its style and making it visually prominent */\n    highlighted?: boolean;\n    /** Set an id for the scrollable list */\n    id: string;\n    /** Whether the input is in an invalid state */\n    invalid?: boolean;\n    /**\n     * Shows a loading indicator with a text next to it.\n     * Read more about how to provide the text in `Provider` component.\n     */\n    loading?: boolean;\n    /**\n     * Handler called when current active/selected option changes in a scrollable list.\n     * @param index indicates the index of the current active option\n     */\n    onChange: (index: number) => void;\n    /** Handler called when option is clicked */\n    onClick?: (event: React.MouseEvent<HTMLLIElement>, index: number) => void;\n    /**\n     * Set whether the selected item should be scrolled into view when listbox is focused.\n     * Default value is `false`\n     */\n    scrollOnFocus?: boolean;\n    /** Handler called when a key is pressed */\n    onKeyDown?: (event: React.KeyboardEvent<HTMLUListElement>, index: number | undefined) => void;\n    /** Sets the list to read only mode */\n    readOnly?: boolean;\n    /**\n     * Value of the scrollable list representing the selected item.\n     * It needs to be an existing value from the provided data.\n     */\n    value: number | undefined;\n    /**\n     * Allows to select multiple items from the list\n     */\n    multiselect?: boolean;\n    /**\n     * Contains the currently selected values when multiselect mode is ON.\n     */\n    selectedIndexes?: number[];\n    /**\n     * True when all available (not disabled) options are selected\n     */\n    allOptionsSelected?: boolean;\n};\n\n/** @internal */\nexport type ScrollableListPropsWithRef = ScrollableListProps & React.RefAttributes<HTMLUListElement>;\n\nexport const getId = (id: string, value: ScrollableListItemValue): string => `${id}_${value}`;\n\nconst getNextEnabledItem = (\n    event: React.KeyboardEvent<HTMLElement>,\n    data: ScrollableListItem[],\n    index: number | undefined\n): number | undefined => {\n    const nextIndex = getNextIndexFromKey(event.key, data.length, index);\n\n    if (nextIndex) {\n        if (nextIndex === index) {\n            return index;\n        }\n        if (data[nextIndex] && data[nextIndex].disabled) {\n            return getNextEnabledItem(event, data, nextIndex);\n        }\n    }\n\n    return nextIndex;\n};\n\nexport const ScrollableList = React.forwardRef(function ScrollableList(\n    props: ScrollableListProps,\n    ref: React.Ref<HTMLUListElement>\n) {\n    const {\n        data,\n        disabled,\n        highlighted: _1,\n        id,\n        invalid: _2,\n        loading,\n        onChange: setCurrentIndex,\n        onClick,\n        onFocus,\n        onKeyDown,\n        readOnly,\n        scrollOnFocus = false,\n        value: currentIndex,\n        multiselect,\n        selectedIndexes = [],\n        allOptionsSelected = false,\n        ...otherProps\n    } = props;\n    const listRef = useMergedRef<HTMLUListElement>(ref);\n    const itemRefs = React.useMemo(() => data.map(() => React.createRef<HTMLLIElement>()), [data]);\n    const { texts } = useLocalization();\n    const { scrollTo } = useListScrollTo(listRef, itemRefs);\n\n    React.useEffect(() => {\n        if (currentIndex && itemRefs[currentIndex]?.current) {\n            itemRefs[currentIndex].current?.scrollIntoView({\n                block: 'center',\n            });\n        }\n    }, []);\n\n    React.useEffect(() => {\n        scrollTo(currentIndex);\n    }, [currentIndex]);\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLUListElement>): void => {\n        const nextIndex = getNextEnabledItem(event, data, currentIndex);\n\n        if (nextIndex !== undefined && nextIndex !== currentIndex) {\n            event.preventDefault();\n            scrollTo(nextIndex);\n            setCurrentIndex(nextIndex);\n        }\n\n        if (onKeyDown) {\n            event.persist();\n            const index = nextIndex === undefined ? currentIndex : nextIndex;\n            onKeyDown(event, index);\n        }\n\n        // Stops the keyboard event from propagating so that keyboard event on other components outside the scrollable\n        // list are not executed.\n        event.stopPropagation();\n    };\n\n    const handleClick = (index: number) => (event: React.MouseEvent<HTMLLIElement>) => {\n        setCurrentIndex(index);\n\n        if (onClick) {\n            event.persist();\n            onClick(event, index);\n        }\n    };\n\n    const handleFocus = (event: React.FocusEvent<HTMLUListElement>): void => {\n        if (scrollOnFocus) {\n            scrollTo(currentIndex);\n        }\n\n        if (onFocus) {\n            event.persist();\n            onFocus(event);\n        }\n    };\n\n    const getOptionCheckedState = (optionValue: string, index: number): boolean => {\n        if (optionValue === '#ALL-OPTIONS#') {\n            return allOptionsSelected;\n        }\n\n        if (!optionValue || !selectedIndexes) {\n            return false;\n        }\n\n        return selectedIndexes.some(i => i === index);\n    };\n\n    const options = data.map((option, index) => {\n        const depth = option.path ? option.path.split('.').length - 1 : 0;\n\n        return {\n            'aria-selected': multiselect ? getOptionCheckedState(String(option.value), index) : currentIndex === index,\n            'data-focused': currentIndex === index,\n            children: option.text,\n            className: cn(\n                'flex w-full flex-[0_0_2rem] cursor-pointer items-center bg-white px-3 focus:border-blue-500 focus:bg-blue-500 focus:text-white',\n                {\n                    'sticky top-0 font-bold': depth === 0 && !!option.hasChildren,\n                }\n            ),\n            disabled: option.disabled,\n            icon: option.icon,\n            id: getId(id, option.value),\n            key: getId(id, option.value),\n            onClick: !disabled && !readOnly ? handleClick(index) : undefined,\n            ref: itemRefs[index],\n            role: 'option',\n            style:\n                depth > 0\n                    ? {\n                          paddingLeft: `${depth + 1}rem`,\n                      }\n                    : undefined,\n        };\n    });\n\n    const list: React.HTMLAttributes<HTMLUListElement> &\n        React.RefAttributes<HTMLUListElement> & { disabled?: boolean; readOnly?: boolean } = {\n        ...otherProps,\n        className: cn(\n            'm-0 inline-flex h-auto list-none flex-col overflow-y-auto !p-0',\n            getInputClasses(props),\n            {\n                'yt-list--multiselect': multiselect,\n                'pointer-events-none': disabled,\n                'cursor-not-allowed': disabled || readOnly,\n            },\n            otherProps.className\n        ),\n        disabled,\n        id,\n        onFocus: !disabled && !readOnly ? handleFocus : undefined,\n        onKeyDown: !disabled && !readOnly ? handleKeyDown : undefined,\n        readOnly,\n        ref: listRef,\n        role: options.length <= 0 || loading ? 'presentation' : 'listbox',\n        tabIndex: otherProps.tabIndex || 0,\n    };\n\n    return (\n        <ul {...list} data-taco=\"scrollable-list\">\n            {loading ? (\n                <li className=\"yt-list__empty\">\n                    <span>\n                        <Spinner delay={0} />\n                    </span>\n                    <span>{texts.listbox.loading}</span>\n                </li>\n            ) : options.length ? (\n                options.map(({ children, icon, ...optionProps }) => (\n                    <li {...optionProps}>\n                        {icon}\n                        <span data-taco=\"list-option\" className=\"flex-grow truncate text-left\">\n                            {children}\n                        </span>\n                        {multiselect && (\n                            <Checkbox\n                                // In multiselect variant, this checkbox only acts as visual representation of item being selected,\n                                // so need to be taken out of screen reader scope.\n                                aria-hidden\n                                tabIndex={-1}\n                                checked={optionProps['aria-selected']}\n                                onChange={() => null}\n                                className=\"pointer-events-none ml-2 self-center p-px\"\n                            />\n                        )}\n                    </li>\n                ))\n            ) : (\n                <li className=\"yt-list__empty\">\n                    <span>{texts.listbox.empty}</span>\n                </li>\n            )}\n        </ul>\n    );\n});\n"],"names":["ScrollableList"],"mappings":"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"}
+{"version":3,"file":"ScrollableList.js","sources":["../../../src/components/Listbox/ScrollableList.tsx"],"sourcesContent":["import cn from 'clsx';\nimport * as React from 'react';\n\nimport { Checkbox, Spinner, useLocalization } from '@/components';\nimport { getInputClasses } from '@/components/Input/util';\nimport { useMergedRef } from '@/hooks/useMergedRef';\nimport { getNextIndexFromKey } from '@/utils/hooks/useListKeyboardNavigation';\nimport { useListScrollTo } from '@/utils/hooks/useListScrollTo';\n\nimport './ScrollableList.css';\n\nexport type ListboxTexts = {\n    /**\n     * Text displayed in the listbox if no data provided.\n     * To read more about how to provide the text, see [Provider](component:provider) component\n     */\n    empty: string;\n    /**\n     * Text displayed in the listbox to indicate the data is loading.\n     * Read more about how to provide the text in [Provider](component:provider) component\n     */\n    loading: string;\n};\n\nexport type ScrollableListItemValue = string | number | boolean | null;\n\nexport type ScrollableListItem = {\n    /**\n     * Set whether the item is disabled.\n     * This will both change the style and make the item unselectable\n     */\n    disabled?: boolean;\n    /** Specifies whether the item has child items -- intended for internal use only */\n    hasChildren?: boolean;\n    /** Place an icon before the item's text */\n    icon?: React.ReactElement<{ className?: string }>;\n    /** The index path to the item -- intended for internal use only */\n    path?: string;\n    /** Text describing the item */\n    text: string | React.JSX.Element;\n    /** Value of the item */\n    value: ScrollableListItemValue;\n    /** Child items to show hierarchical data */\n    children?: ScrollableListItem[];\n};\n\n/** @internal */\nexport type ScrollableListProps = Omit<\n    React.HTMLAttributes<HTMLUListElement>,\n    'defaultValue' | 'id' | 'onChange' | 'onClick' | 'onKeyDown'\n> & {\n    /** Data indicating the options in scrollable list */\n    data: ScrollableListItem[];\n    /** Sets the list to be disabled */\n    disabled?: boolean;\n    /** Draws attention to the scrollable list by changing its style and making it visually prominent */\n    highlighted?: boolean;\n    /** Set an id for the scrollable list */\n    id: string;\n    /** Whether the input is in an invalid state */\n    invalid?: boolean;\n    /**\n     * Shows a loading indicator with a text next to it.\n     * Read more about how to provide the text in `Provider` component.\n     */\n    loading?: boolean;\n    /**\n     * Handler called when current active/selected option changes in a scrollable list.\n     * @param index indicates the index of the current active option\n     */\n    onChange: (index: number) => void;\n    /** Handler called when option is clicked */\n    onClick?: (event: React.MouseEvent<HTMLLIElement>, index: number) => void;\n    /**\n     * Set whether the selected item should be scrolled into view when listbox is focused.\n     * Default value is `false`\n     */\n    scrollOnFocus?: boolean;\n    /** Handler called when a key is pressed */\n    onKeyDown?: (event: React.KeyboardEvent<HTMLUListElement>, index: number | undefined) => void;\n    /** Sets the list to read only mode */\n    readOnly?: boolean;\n    /**\n     * Value of the scrollable list representing the selected item.\n     * It needs to be an existing value from the provided data.\n     */\n    value: number | undefined;\n    /**\n     * Allows to select multiple items from the list\n     */\n    multiselect?: boolean;\n    /**\n     * Contains the currently selected values when multiselect mode is ON.\n     */\n    selectedIndexes?: number[];\n    /**\n     * True when all available (not disabled) options are selected\n     */\n    allOptionsSelected?: boolean;\n};\n\n/** @internal */\nexport type ScrollableListPropsWithRef = ScrollableListProps & React.RefAttributes<HTMLUListElement>;\n\nexport const getId = (id: string, value: ScrollableListItemValue): string => `${id}_${value}`;\n\nconst getNextEnabledItem = (\n    event: React.KeyboardEvent<HTMLElement>,\n    data: ScrollableListItem[],\n    index: number | undefined\n): number | undefined => {\n    const nextIndex = getNextIndexFromKey(event.key, data.length, index);\n\n    if (nextIndex) {\n        if (nextIndex === index) {\n            return index;\n        }\n        if (data[nextIndex] && data[nextIndex].disabled) {\n            return getNextEnabledItem(event, data, nextIndex);\n        }\n    }\n\n    return nextIndex;\n};\n\nexport const ScrollableList = React.forwardRef(function ScrollableList(\n    props: ScrollableListProps,\n    ref: React.Ref<HTMLUListElement>\n) {\n    const {\n        data,\n        disabled,\n        highlighted: _1,\n        id,\n        invalid: _2,\n        loading,\n        onChange: setCurrentIndex,\n        onClick,\n        onFocus,\n        onKeyDown,\n        readOnly,\n        scrollOnFocus = false,\n        value: currentIndex,\n        multiselect,\n        selectedIndexes = [],\n        allOptionsSelected = false,\n        ...otherProps\n    } = props;\n    const listRef = useMergedRef<HTMLUListElement>(ref);\n    const itemRefs = React.useMemo(() => data.map(() => React.createRef<HTMLLIElement>()), [data]);\n    const { texts } = useLocalization();\n    const { scrollTo } = useListScrollTo(listRef, itemRefs);\n\n    React.useEffect(() => {\n        if (currentIndex && itemRefs[currentIndex]?.current) {\n            itemRefs[currentIndex].current?.scrollIntoView({\n                block: 'center',\n            });\n        }\n    }, []);\n\n    React.useEffect(() => {\n        scrollTo(currentIndex);\n    }, [currentIndex]);\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLUListElement>): void => {\n        const nextIndex = getNextEnabledItem(event, data, currentIndex);\n\n        if (nextIndex !== undefined && nextIndex !== currentIndex) {\n            event.preventDefault();\n            scrollTo(nextIndex);\n            setCurrentIndex(nextIndex);\n        }\n\n        if (onKeyDown) {\n            event.persist();\n            const index = nextIndex === undefined ? currentIndex : nextIndex;\n            onKeyDown(event, index);\n        }\n\n        // Stops the keyboard event from propagating so that keyboard event on other components outside the scrollable\n        // list are not executed.\n        event.stopPropagation();\n    };\n\n    const handleClick = (index: number) => (event: React.MouseEvent<HTMLLIElement>) => {\n        setCurrentIndex(index);\n\n        if (onClick) {\n            event.persist();\n            onClick(event, index);\n        }\n    };\n\n    const handleFocus = (event: React.FocusEvent<HTMLUListElement>): void => {\n        if (scrollOnFocus) {\n            scrollTo(currentIndex);\n        }\n\n        if (onFocus) {\n            event.persist();\n            onFocus(event);\n        }\n    };\n\n    const getOptionCheckedState = (optionValue: string, index: number): boolean => {\n        if (optionValue === '#ALL-OPTIONS#') {\n            return allOptionsSelected;\n        }\n\n        if (!optionValue || !selectedIndexes) {\n            return false;\n        }\n\n        return selectedIndexes.some(i => i === index);\n    };\n\n    const options = data.map((option, index) => {\n        const depth = option.path ? option.path.split('.').length - 1 : 0;\n\n        return {\n            'aria-selected': multiselect ? getOptionCheckedState(String(option.value), index) : currentIndex === index,\n            'data-focused': currentIndex === index,\n            children: option.text,\n            className: cn(\n                'flex w-full flex-[0_0_2rem] cursor-pointer items-center bg-white px-3 focus:border-blue-500 focus:bg-blue-500 focus:text-white',\n                {\n                    'sticky top-0 font-bold': depth === 0 && !!option.hasChildren,\n                }\n            ),\n            disabled: option.disabled,\n            icon: option.icon,\n            id: getId(id, option.value),\n            key: getId(id, option.value),\n            onClick: !disabled && !readOnly ? handleClick(index) : undefined,\n            ref: itemRefs[index],\n            role: 'option',\n            style:\n                depth > 0\n                    ? {\n                          paddingLeft: `${depth + 1}rem`,\n                      }\n                    : undefined,\n        };\n    });\n\n    const list: React.HTMLAttributes<HTMLUListElement> &\n        React.RefAttributes<HTMLUListElement> & { disabled?: boolean; readOnly?: boolean } = {\n        ...otherProps,\n        className: cn(\n            'm-0 inline-flex h-auto list-none flex-col overflow-y-auto !p-0',\n            getInputClasses(props),\n            {\n                'yt-list--multiselect': multiselect,\n                'pointer-events-none': disabled,\n                'cursor-not-allowed': disabled || readOnly,\n            },\n            otherProps.className\n        ),\n        disabled,\n        id,\n        onFocus: !disabled && !readOnly ? handleFocus : undefined,\n        onKeyDown: !disabled && !readOnly ? handleKeyDown : undefined,\n        readOnly,\n        ref: listRef,\n        role: options.length <= 0 || loading ? 'presentation' : 'listbox',\n        tabIndex: otherProps.tabIndex || 0,\n    };\n\n    return (\n        <ul {...list} data-taco=\"scrollable-list\">\n            {loading ? (\n                <li className=\"yt-list__empty\">\n                    <span>\n                        <Spinner delay={0} />\n                    </span>\n                    <span>{texts.listbox.loading}</span>\n                </li>\n            ) : options.length ? (\n                options.map(({ children, icon, ...optionProps }) => (\n                    <li {...optionProps}>\n                        {icon}\n                        <span data-taco=\"list-option\" className=\"flex-grow truncate text-left\">\n                            {children}\n                        </span>\n                        {multiselect && (\n                            <Checkbox\n                                // In multiselect variant, this checkbox only acts as visual representation of item being selected,\n                                // so need to be taken out of screen reader scope.\n                                aria-hidden\n                                tabIndex={-1}\n                                checked={optionProps['aria-selected']}\n                                onChange={() => null}\n                                className=\"pointer-events-none ml-2 self-center p-px\"\n                            />\n                        )}\n                    </li>\n                ))\n            ) : (\n                <li className=\"yt-list__empty\">\n                    <span>{texts.listbox.empty}</span>\n                </li>\n            )}\n        </ul>\n    );\n});\n"],"names":["ScrollableList"],"mappings":"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"}

package/dist/components/Listbox/util.cjs

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
 const input = require("../../utils/input.cjs");
-const ScrollableList = require("./ScrollableList.cjs");
+require("./ScrollableList.cjs");
 const getValue = (value) => String(value ?? "");
 const setInputValueByRef = (input$1, value, event = "change") => {
   input.setInputValueByRef(input$1, getValue(value), event);
@@ -11,10 +11,6 @@ const getIndexFromValue = (data, value) => {
   const index = data.findIndex((option) => getValue(option.value) === getValue(value));
   return index > -1 ? index : void 0;
 };
-const getSelectedIndexesFromValue = (data, value) => {
-  if (typeof value !== "string") return [];
-  return value.split(",").map((v) => data.findIndex((o) => String(o.value) === v)).filter((v) => v !== -1);
-};
 const findByValue = (data, value) => {
   return data.find((option) => getValue(option.value) === getValue(value));
 };
@@ -33,26 +29,6 @@ const searchForString = (child, value, strategy = "includes") => {
     return false;
   }
 };
-const getIndexInRangeByValue = (data, query, firstIndex, lastIndex = data.length) => {
-  const index = data.slice(firstIndex, lastIndex).findIndex((option) => {
-    if (option.disabled) {
-      return false;
-    }
-    return searchForString(option.text, query, "startsWith");
-  });
-  return index > -1 ? index + firstIndex : -1;
-};
-const findNextIndexByValue = (data, query, activeIndex) => {
-  const firstIndex = activeIndex === void 0 ? 0 : activeIndex + 1;
-  let index = getIndexInRangeByValue(data, query, firstIndex);
-  if (index === -1) {
-    index = getIndexInRangeByValue(data, query, 0, activeIndex);
-  }
-  return index;
-};
-const getActiveDescendant = (data, currentIndex, id) => {
-  return currentIndex !== void 0 && data[currentIndex] ? ScrollableList.getId(id, data[currentIndex].value) : void 0;
-};
 const useFlattenedData = (data) => {
   return React.useMemo(() => {
     const items = [];
@@ -120,11 +96,8 @@ const filterData = (data, value = "") => {
 };
 exports.filterData = filterData;
 exports.findByValue = findByValue;
-exports.findNextIndexByValue = findNextIndexByValue;
-exports.getActiveDescendant = getActiveDescendant;
 exports.getIndexFromValue = getIndexFromValue;
 exports.getOptionParents = getOptionParents;
-exports.getSelectedIndexesFromValue = getSelectedIndexesFromValue;
 exports.sanitizeItem = sanitizeItem;
 exports.searchForString = searchForString;
 exports.setInputValueByRef = setInputValueByRef;

package/dist/components/Listbox/util.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"util.cjs","sources":["../../../src/components/Listbox/util.ts"],"sourcesContent":["import React from 'react';\n\nimport { setInputValueByRef as setInputValueByRefBase } from '@/utils/input';\n\nimport type { ScrollableListItem, ScrollableListItemValue } from './ScrollableList';\nimport { getId } from './ScrollableList';\n\nconst getValue = (value: ScrollableListItemValue | undefined): string => String(value ?? '');\n\nexport const setInputValueByRef = (\n    input: HTMLInputElement | null,\n    value: ScrollableListItemValue | undefined,\n    event = 'change'\n): void => {\n    setInputValueByRefBase(input, getValue(value), event);\n};\n\nexport const getIndexFromValue = (data: ScrollableListItem[], value: ScrollableListItemValue | undefined): number | undefined => {\n    const index = data.findIndex(option => getValue(option.value) === getValue(value));\n    return index > -1 ? index : undefined;\n};\n\nexport const getSelectedIndexesFromValue = (data: ScrollableListItem[], value: ScrollableListItemValue | undefined): number[] => {\n    if (typeof value !== 'string') return [];\n\n    return value\n        .split(',')\n        .map(v => data.findIndex(o => String(o.value) === v))\n        .filter(v => v !== -1);\n};\n\nexport const findByValue = (\n    data: ScrollableListItem[],\n    value: ScrollableListItemValue | undefined\n): ScrollableListItem | undefined => {\n    return data.find(option => getValue(option.value) === getValue(value));\n};\n\nexport const searchForString = (child: React.JSX.Element | string, value: string, strategy = 'includes'): boolean => {\n    try {\n        if (typeof child !== 'string' && child.props?.children) {\n            if (Array.isArray(child.props?.children)) {\n                return !!child.props.children.some((subChild: React.JSX.Element | string) =>\n                    searchForString(subChild, value, strategy)\n                );\n            }\n\n            return searchForString(child.props?.children, value, strategy);\n        }\n\n        // @ts-expect-error - This will need to be refactored\n        return child.toString().toLowerCase()[strategy](String(value).toLowerCase());\n    } catch {\n        return false;\n    }\n};\n\nconst getIndexInRangeByValue = (\n    data: ScrollableListItem[],\n    query: string,\n    firstIndex: number,\n    lastIndex: number = data.length\n): number => {\n    const index = data.slice(firstIndex, lastIndex).findIndex(option => {\n        if (option.disabled) {\n            return false;\n        }\n\n        return searchForString(option.text, query, 'startsWith');\n    });\n\n    return index > -1 ? index + firstIndex : -1;\n};\n\nexport const findNextIndexByValue = (data: ScrollableListItem[], query: string, activeIndex: number | undefined): number => {\n    const firstIndex = activeIndex === undefined ? 0 : activeIndex + 1;\n    let index = getIndexInRangeByValue(data, query, firstIndex);\n\n    if (index === -1) {\n        index = getIndexInRangeByValue(data, query, 0, activeIndex);\n    }\n\n    return index;\n};\n\nexport const getActiveDescendant = (data: ScrollableListItem[], currentIndex: number | undefined, id: string): any => {\n    return currentIndex !== undefined && data[currentIndex] ? getId(id, data[currentIndex].value) : undefined;\n};\n\nexport const useFlattenedData = (data: ScrollableListItem[]): ScrollableListItem[] => {\n    return React.useMemo(() => {\n        const items: ScrollableListItem[] = [];\n\n        const flatten = (item: ScrollableListItem, path: number, parentPath?: string, parentDisabled?: boolean) => {\n            const currentPath = parentPath ? `${parentPath}.${path}` : `${path}`;\n            const isItemDisabled = parentDisabled || item.disabled;\n\n            items.push({\n                ...item,\n                disabled: isItemDisabled,\n                path: currentPath,\n                hasChildren: !!item.children,\n            });\n\n            if (item.children) {\n                item.children.forEach((childItem: ScrollableListItem, childPath: number) =>\n                    flatten(childItem, childPath, currentPath, isItemDisabled)\n                );\n            }\n        };\n\n        data.forEach((item, index) => {\n            flatten(item, index);\n        });\n\n        return items;\n    }, [data]);\n};\n\nexport const sanitizeItem = (item: ScrollableListItem | undefined) => {\n    if (item) {\n        const { hasChildren: _1, path: _2, ...rest } = item;\n        return rest;\n    }\n\n    return undefined;\n};\n\nexport const getOptionParents = (data: ScrollableListItem[], path?: string) => {\n    const indexes = path?.split('.') ?? [];\n\n    if (indexes.length > 1) {\n        // we don't want to map the current item\n        indexes.pop();\n        // we need to rebuild the path as we map\n        let lastPath: string;\n\n        return indexes.map(i => {\n            lastPath = lastPath ? [lastPath, i].join('.') : i;\n            return sanitizeItem(data.find((i: ScrollableListItem) => i.path === lastPath));\n        });\n    }\n\n    return null;\n};\n\nexport const filterData = (data: ScrollableListItem[], value: ScrollableListItemValue = ''): ScrollableListItem[] => {\n    if (value === '' || value === null) {\n        return data;\n    }\n\n    const filteredOptionValues = new Set();\n    const shouldFilterOption = (option: ScrollableListItem): boolean => {\n        if (option.disabled) {\n            return false;\n        }\n\n        return searchForString(option.text, String(value));\n    };\n\n    data.forEach(option => {\n        if (shouldFilterOption(option)) {\n            const parents = getOptionParents(data, option.path);\n\n            filteredOptionValues.add(option.value);\n\n            if (parents !== null) {\n                parents.forEach(option => filteredOptionValues.add(option?.value));\n            }\n        }\n    });\n\n    return data.filter(({ value }) => filteredOptionValues.has(value));\n};\n"],"names":["input","setInputValueByRefBase","getId","i","option","value"],"mappings":"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"}
+{"version":3,"file":"util.cjs","sources":["../../../src/components/Listbox/util.ts"],"sourcesContent":["import React from 'react';\n\nimport { setInputValueByRef as setInputValueByRefBase } from '@/utils/input';\n\nimport type { ScrollableListItem, ScrollableListItemValue } from './ScrollableList';\nimport { getId } from './ScrollableList';\n\nconst getValue = (value: ScrollableListItemValue | undefined): string => String(value ?? '');\n\nexport const setInputValueByRef = (\n    input: HTMLInputElement | null,\n    value: ScrollableListItemValue | undefined,\n    event = 'change'\n): void => {\n    setInputValueByRefBase(input, getValue(value), event);\n};\n\nexport const getIndexFromValue = (data: ScrollableListItem[], value: ScrollableListItemValue | undefined): number | undefined => {\n    const index = data.findIndex(option => getValue(option.value) === getValue(value));\n    return index > -1 ? index : undefined;\n};\n\nexport const getSelectedIndexesFromValue = (data: ScrollableListItem[], value: ScrollableListItemValue | undefined): number[] => {\n    if (typeof value !== 'string') return [];\n\n    return value\n        .split(',')\n        .map(v => data.findIndex(o => String(o.value) === v))\n        .filter(v => v !== -1);\n};\n\nexport const findByValue = (\n    data: ScrollableListItem[],\n    value: ScrollableListItemValue | undefined\n): ScrollableListItem | undefined => {\n    return data.find(option => getValue(option.value) === getValue(value));\n};\n\nexport const searchForString = (child: React.JSX.Element | string, value: string, strategy = 'includes'): boolean => {\n    try {\n        if (typeof child !== 'string' && child.props?.children) {\n            if (Array.isArray(child.props?.children)) {\n                return !!child.props.children.some((subChild: React.JSX.Element | string) =>\n                    searchForString(subChild, value, strategy)\n                );\n            }\n\n            return searchForString(child.props?.children, value, strategy);\n        }\n\n        // @ts-expect-error - This will need to be refactored\n        return child.toString().toLowerCase()[strategy](String(value).toLowerCase());\n    } catch {\n        return false;\n    }\n};\n\nconst getIndexInRangeByValue = (\n    data: ScrollableListItem[],\n    query: string,\n    firstIndex: number,\n    lastIndex: number = data.length\n): number => {\n    const index = data.slice(firstIndex, lastIndex).findIndex(option => {\n        if (option.disabled) {\n            return false;\n        }\n\n        return searchForString(option.text, query, 'startsWith');\n    });\n\n    return index > -1 ? index + firstIndex : -1;\n};\n\nexport const findNextIndexByValue = (data: ScrollableListItem[], query: string, activeIndex: number | undefined): number => {\n    const firstIndex = activeIndex === undefined ? 0 : activeIndex + 1;\n    let index = getIndexInRangeByValue(data, query, firstIndex);\n\n    if (index === -1) {\n        index = getIndexInRangeByValue(data, query, 0, activeIndex);\n    }\n\n    return index;\n};\n\nexport const getActiveDescendant = (data: ScrollableListItem[], currentIndex: number | undefined, id: string): any => {\n    return currentIndex !== undefined && data[currentIndex] ? getId(id, data[currentIndex].value) : undefined;\n};\n\nexport const useFlattenedData = (data: ScrollableListItem[]): ScrollableListItem[] => {\n    return React.useMemo(() => {\n        const items: ScrollableListItem[] = [];\n\n        const flatten = (item: ScrollableListItem, path: number, parentPath?: string, parentDisabled?: boolean) => {\n            const currentPath = parentPath ? `${parentPath}.${path}` : `${path}`;\n            const isItemDisabled = parentDisabled || item.disabled;\n\n            items.push({\n                ...item,\n                disabled: isItemDisabled,\n                path: currentPath,\n                hasChildren: !!item.children,\n            });\n\n            if (item.children) {\n                item.children.forEach((childItem: ScrollableListItem, childPath: number) =>\n                    flatten(childItem, childPath, currentPath, isItemDisabled)\n                );\n            }\n        };\n\n        data.forEach((item, index) => {\n            flatten(item, index);\n        });\n\n        return items;\n    }, [data]);\n};\n\nexport const sanitizeItem = (item: ScrollableListItem | undefined) => {\n    if (item) {\n        const { hasChildren: _1, path: _2, ...rest } = item;\n        return rest;\n    }\n\n    return undefined;\n};\n\nexport const getOptionParents = (data: ScrollableListItem[], path?: string) => {\n    const indexes = path?.split('.') ?? [];\n\n    if (indexes.length > 1) {\n        // we don't want to map the current item\n        indexes.pop();\n        // we need to rebuild the path as we map\n        let lastPath: string;\n\n        return indexes.map(i => {\n            lastPath = lastPath ? [lastPath, i].join('.') : i;\n            return sanitizeItem(data.find((i: ScrollableListItem) => i.path === lastPath));\n        });\n    }\n\n    return null;\n};\n\nexport const filterData = (data: ScrollableListItem[], value: ScrollableListItemValue = ''): ScrollableListItem[] => {\n    if (value === '' || value === null) {\n        return data;\n    }\n\n    const filteredOptionValues = new Set();\n    const shouldFilterOption = (option: ScrollableListItem): boolean => {\n        if (option.disabled) {\n            return false;\n        }\n\n        return searchForString(option.text, String(value));\n    };\n\n    data.forEach(option => {\n        if (shouldFilterOption(option)) {\n            const parents = getOptionParents(data, option.path);\n\n            filteredOptionValues.add(option.value);\n\n            if (parents !== null) {\n                parents.forEach(option => filteredOptionValues.add(option?.value));\n            }\n        }\n    });\n\n    return data.filter(({ value }) => filteredOptionValues.has(value));\n};\n"],"names":["input","setInputValueByRefBase","i","option","value"],"mappings":"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"}

package/dist/components/Listbox/util.js

@@ -1,6 +1,6 @@
 import React__default from "react";
 import { setInputValueByRef as setInputValueByRef$1 } from "../../utils/input.js";
-import { getId } from "./ScrollableList.js";
+import "./ScrollableList.js";
 const getValue = (value) => String(value ?? "");
 const setInputValueByRef = (input, value, event = "change") => {
   setInputValueByRef$1(input, getValue(value), event);
@@ -9,10 +9,6 @@ const getIndexFromValue = (data, value) => {
   const index = data.findIndex((option) => getValue(option.value) === getValue(value));
   return index > -1 ? index : void 0;
 };
-const getSelectedIndexesFromValue = (data, value) => {
-  if (typeof value !== "string") return [];
-  return value.split(",").map((v) => data.findIndex((o) => String(o.value) === v)).filter((v) => v !== -1);
-};
 const findByValue = (data, value) => {
   return data.find((option) => getValue(option.value) === getValue(value));
 };
@@ -31,26 +27,6 @@ const searchForString = (child, value, strategy = "includes") => {
     return false;
   }
 };
-const getIndexInRangeByValue = (data, query, firstIndex, lastIndex = data.length) => {
-  const index = data.slice(firstIndex, lastIndex).findIndex((option) => {
-    if (option.disabled) {
-      return false;
-    }
-    return searchForString(option.text, query, "startsWith");
-  });
-  return index > -1 ? index + firstIndex : -1;
-};
-const findNextIndexByValue = (data, query, activeIndex) => {
-  const firstIndex = activeIndex === void 0 ? 0 : activeIndex + 1;
-  let index = getIndexInRangeByValue(data, query, firstIndex);
-  if (index === -1) {
-    index = getIndexInRangeByValue(data, query, 0, activeIndex);
-  }
-  return index;
-};
-const getActiveDescendant = (data, currentIndex, id) => {
-  return currentIndex !== void 0 && data[currentIndex] ? getId(id, data[currentIndex].value) : void 0;
-};
 const useFlattenedData = (data) => {
   return React__default.useMemo(() => {
     const items = [];
@@ -119,11 +95,8 @@ const filterData = (data, value = "") => {
 export {
   filterData,
   findByValue,
-  findNextIndexByValue,
-  getActiveDescendant,
   getIndexFromValue,
   getOptionParents,
-  getSelectedIndexesFromValue,
   sanitizeItem,
   searchForString,
   setInputValueByRef,

package/dist/components/Listbox/util.js.map

@@ -1 +1 @@
-{"version":3,"file":"util.js","sources":["../../../src/components/Listbox/util.ts"],"sourcesContent":["import React from 'react';\n\nimport { setInputValueByRef as setInputValueByRefBase } from '@/utils/input';\n\nimport type { ScrollableListItem, ScrollableListItemValue } from './ScrollableList';\nimport { getId } from './ScrollableList';\n\nconst getValue = (value: ScrollableListItemValue | undefined): string => String(value ?? '');\n\nexport const setInputValueByRef = (\n    input: HTMLInputElement | null,\n    value: ScrollableListItemValue | undefined,\n    event = 'change'\n): void => {\n    setInputValueByRefBase(input, getValue(value), event);\n};\n\nexport const getIndexFromValue = (data: ScrollableListItem[], value: ScrollableListItemValue | undefined): number | undefined => {\n    const index = data.findIndex(option => getValue(option.value) === getValue(value));\n    return index > -1 ? index : undefined;\n};\n\nexport const getSelectedIndexesFromValue = (data: ScrollableListItem[], value: ScrollableListItemValue | undefined): number[] => {\n    if (typeof value !== 'string') return [];\n\n    return value\n        .split(',')\n        .map(v => data.findIndex(o => String(o.value) === v))\n        .filter(v => v !== -1);\n};\n\nexport const findByValue = (\n    data: ScrollableListItem[],\n    value: ScrollableListItemValue | undefined\n): ScrollableListItem | undefined => {\n    return data.find(option => getValue(option.value) === getValue(value));\n};\n\nexport const searchForString = (child: React.JSX.Element | string, value: string, strategy = 'includes'): boolean => {\n    try {\n        if (typeof child !== 'string' && child.props?.children) {\n            if (Array.isArray(child.props?.children)) {\n                return !!child.props.children.some((subChild: React.JSX.Element | string) =>\n                    searchForString(subChild, value, strategy)\n                );\n            }\n\n            return searchForString(child.props?.children, value, strategy);\n        }\n\n        // @ts-expect-error - This will need to be refactored\n        return child.toString().toLowerCase()[strategy](String(value).toLowerCase());\n    } catch {\n        return false;\n    }\n};\n\nconst getIndexInRangeByValue = (\n    data: ScrollableListItem[],\n    query: string,\n    firstIndex: number,\n    lastIndex: number = data.length\n): number => {\n    const index = data.slice(firstIndex, lastIndex).findIndex(option => {\n        if (option.disabled) {\n            return false;\n        }\n\n        return searchForString(option.text, query, 'startsWith');\n    });\n\n    return index > -1 ? index + firstIndex : -1;\n};\n\nexport const findNextIndexByValue = (data: ScrollableListItem[], query: string, activeIndex: number | undefined): number => {\n    const firstIndex = activeIndex === undefined ? 0 : activeIndex + 1;\n    let index = getIndexInRangeByValue(data, query, firstIndex);\n\n    if (index === -1) {\n        index = getIndexInRangeByValue(data, query, 0, activeIndex);\n    }\n\n    return index;\n};\n\nexport const getActiveDescendant = (data: ScrollableListItem[], currentIndex: number | undefined, id: string): any => {\n    return currentIndex !== undefined && data[currentIndex] ? getId(id, data[currentIndex].value) : undefined;\n};\n\nexport const useFlattenedData = (data: ScrollableListItem[]): ScrollableListItem[] => {\n    return React.useMemo(() => {\n        const items: ScrollableListItem[] = [];\n\n        const flatten = (item: ScrollableListItem, path: number, parentPath?: string, parentDisabled?: boolean) => {\n            const currentPath = parentPath ? `${parentPath}.${path}` : `${path}`;\n            const isItemDisabled = parentDisabled || item.disabled;\n\n            items.push({\n                ...item,\n                disabled: isItemDisabled,\n                path: currentPath,\n                hasChildren: !!item.children,\n            });\n\n            if (item.children) {\n                item.children.forEach((childItem: ScrollableListItem, childPath: number) =>\n                    flatten(childItem, childPath, currentPath, isItemDisabled)\n                );\n            }\n        };\n\n        data.forEach((item, index) => {\n            flatten(item, index);\n        });\n\n        return items;\n    }, [data]);\n};\n\nexport const sanitizeItem = (item: ScrollableListItem | undefined) => {\n    if (item) {\n        const { hasChildren: _1, path: _2, ...rest } = item;\n        return rest;\n    }\n\n    return undefined;\n};\n\nexport const getOptionParents = (data: ScrollableListItem[], path?: string) => {\n    const indexes = path?.split('.') ?? [];\n\n    if (indexes.length > 1) {\n        // we don't want to map the current item\n        indexes.pop();\n        // we need to rebuild the path as we map\n        let lastPath: string;\n\n        return indexes.map(i => {\n            lastPath = lastPath ? [lastPath, i].join('.') : i;\n            return sanitizeItem(data.find((i: ScrollableListItem) => i.path === lastPath));\n        });\n    }\n\n    return null;\n};\n\nexport const filterData = (data: ScrollableListItem[], value: ScrollableListItemValue = ''): ScrollableListItem[] => {\n    if (value === '' || value === null) {\n        return data;\n    }\n\n    const filteredOptionValues = new Set();\n    const shouldFilterOption = (option: ScrollableListItem): boolean => {\n        if (option.disabled) {\n            return false;\n        }\n\n        return searchForString(option.text, String(value));\n    };\n\n    data.forEach(option => {\n        if (shouldFilterOption(option)) {\n            const parents = getOptionParents(data, option.path);\n\n            filteredOptionValues.add(option.value);\n\n            if (parents !== null) {\n                parents.forEach(option => filteredOptionValues.add(option?.value));\n            }\n        }\n    });\n\n    return data.filter(({ value }) => filteredOptionValues.has(value));\n};\n"],"names":["setInputValueByRefBase","React","i","option","value"],"mappings":"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"}
+{"version":3,"file":"util.js","sources":["../../../src/components/Listbox/util.ts"],"sourcesContent":["import React from 'react';\n\nimport { setInputValueByRef as setInputValueByRefBase } from '@/utils/input';\n\nimport type { ScrollableListItem, ScrollableListItemValue } from './ScrollableList';\nimport { getId } from './ScrollableList';\n\nconst getValue = (value: ScrollableListItemValue | undefined): string => String(value ?? '');\n\nexport const setInputValueByRef = (\n    input: HTMLInputElement | null,\n    value: ScrollableListItemValue | undefined,\n    event = 'change'\n): void => {\n    setInputValueByRefBase(input, getValue(value), event);\n};\n\nexport const getIndexFromValue = (data: ScrollableListItem[], value: ScrollableListItemValue | undefined): number | undefined => {\n    const index = data.findIndex(option => getValue(option.value) === getValue(value));\n    return index > -1 ? index : undefined;\n};\n\nexport const getSelectedIndexesFromValue = (data: ScrollableListItem[], value: ScrollableListItemValue | undefined): number[] => {\n    if (typeof value !== 'string') return [];\n\n    return value\n        .split(',')\n        .map(v => data.findIndex(o => String(o.value) === v))\n        .filter(v => v !== -1);\n};\n\nexport const findByValue = (\n    data: ScrollableListItem[],\n    value: ScrollableListItemValue | undefined\n): ScrollableListItem | undefined => {\n    return data.find(option => getValue(option.value) === getValue(value));\n};\n\nexport const searchForString = (child: React.JSX.Element | string, value: string, strategy = 'includes'): boolean => {\n    try {\n        if (typeof child !== 'string' && child.props?.children) {\n            if (Array.isArray(child.props?.children)) {\n                return !!child.props.children.some((subChild: React.JSX.Element | string) =>\n                    searchForString(subChild, value, strategy)\n                );\n            }\n\n            return searchForString(child.props?.children, value, strategy);\n        }\n\n        // @ts-expect-error - This will need to be refactored\n        return child.toString().toLowerCase()[strategy](String(value).toLowerCase());\n    } catch {\n        return false;\n    }\n};\n\nconst getIndexInRangeByValue = (\n    data: ScrollableListItem[],\n    query: string,\n    firstIndex: number,\n    lastIndex: number = data.length\n): number => {\n    const index = data.slice(firstIndex, lastIndex).findIndex(option => {\n        if (option.disabled) {\n            return false;\n        }\n\n        return searchForString(option.text, query, 'startsWith');\n    });\n\n    return index > -1 ? index + firstIndex : -1;\n};\n\nexport const findNextIndexByValue = (data: ScrollableListItem[], query: string, activeIndex: number | undefined): number => {\n    const firstIndex = activeIndex === undefined ? 0 : activeIndex + 1;\n    let index = getIndexInRangeByValue(data, query, firstIndex);\n\n    if (index === -1) {\n        index = getIndexInRangeByValue(data, query, 0, activeIndex);\n    }\n\n    return index;\n};\n\nexport const getActiveDescendant = (data: ScrollableListItem[], currentIndex: number | undefined, id: string): any => {\n    return currentIndex !== undefined && data[currentIndex] ? getId(id, data[currentIndex].value) : undefined;\n};\n\nexport const useFlattenedData = (data: ScrollableListItem[]): ScrollableListItem[] => {\n    return React.useMemo(() => {\n        const items: ScrollableListItem[] = [];\n\n        const flatten = (item: ScrollableListItem, path: number, parentPath?: string, parentDisabled?: boolean) => {\n            const currentPath = parentPath ? `${parentPath}.${path}` : `${path}`;\n            const isItemDisabled = parentDisabled || item.disabled;\n\n            items.push({\n                ...item,\n                disabled: isItemDisabled,\n                path: currentPath,\n                hasChildren: !!item.children,\n            });\n\n            if (item.children) {\n                item.children.forEach((childItem: ScrollableListItem, childPath: number) =>\n                    flatten(childItem, childPath, currentPath, isItemDisabled)\n                );\n            }\n        };\n\n        data.forEach((item, index) => {\n            flatten(item, index);\n        });\n\n        return items;\n    }, [data]);\n};\n\nexport const sanitizeItem = (item: ScrollableListItem | undefined) => {\n    if (item) {\n        const { hasChildren: _1, path: _2, ...rest } = item;\n        return rest;\n    }\n\n    return undefined;\n};\n\nexport const getOptionParents = (data: ScrollableListItem[], path?: string) => {\n    const indexes = path?.split('.') ?? [];\n\n    if (indexes.length > 1) {\n        // we don't want to map the current item\n        indexes.pop();\n        // we need to rebuild the path as we map\n        let lastPath: string;\n\n        return indexes.map(i => {\n            lastPath = lastPath ? [lastPath, i].join('.') : i;\n            return sanitizeItem(data.find((i: ScrollableListItem) => i.path === lastPath));\n        });\n    }\n\n    return null;\n};\n\nexport const filterData = (data: ScrollableListItem[], value: ScrollableListItemValue = ''): ScrollableListItem[] => {\n    if (value === '' || value === null) {\n        return data;\n    }\n\n    const filteredOptionValues = new Set();\n    const shouldFilterOption = (option: ScrollableListItem): boolean => {\n        if (option.disabled) {\n            return false;\n        }\n\n        return searchForString(option.text, String(value));\n    };\n\n    data.forEach(option => {\n        if (shouldFilterOption(option)) {\n            const parents = getOptionParents(data, option.path);\n\n            filteredOptionValues.add(option.value);\n\n            if (parents !== null) {\n                parents.forEach(option => filteredOptionValues.add(option?.value));\n            }\n        }\n    });\n\n    return data.filter(({ value }) => filteredOptionValues.has(value));\n};\n"],"names":["setInputValueByRefBase","React","i","option","value"],"mappings":"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"}

package/dist/components/Provider/Localization.cjs

@@ -22,6 +22,9 @@ const defaultLocalisationTexts = {
   banner: {
     close: "Close"
   },
+  breadcrumbs: {
+    nav: "Breadcrumbs"
+  },
   button: {
     busyMessage: "Loading"
   },
@@ -78,8 +81,7 @@ const defaultLocalisationTexts = {
   },
   listbox: {
     loading: "Loading results...",
-    empty: "No results found",
-    allOption: "All"
+    empty: "No results found"
   },
   pagination: {
     label: "Pagination",
@@ -308,9 +310,6 @@ const defaultLocalisationTexts = {
     placeholder: "Search...",
     clear: "Clear"
   },
-  select: {
-    allOptionsSelected: "All"
-  },
   select2: {
     allSelect: "Select all",
     allDeselect: "Deselect all",