@economic/taco 1.1.7 → 1.1.8

package/dist/esm/components/Input/util.js

@@ -0,0 +1,22 @@
+import cn from 'classnames';
+
+const getInputClasses = props => {
+  return cn('peer bg-white text-black text-sm border font-normal not-italic no-underline rounded inline-flex leading-6 px-2 relative w-full text-ellipsis flex items-center', {
+    'cursor-not-allowed text-black bg-grey': props.readOnly,
+    'border-grey text-opacity-25 cursor-not-allowed': props.disabled,
+    'bg-[rgba(255,255,0,0.075)]': props.highlighted && props.disabled,
+    'bg-[rgba(255,255,0,0.2)]': props.highlighted && !props.disabled,
+    'border-grey-dark hover:shadow-[0_0_0.1rem_theme(colors.grey.darker)] focus:border-blue-light focus:yt-focus active:border-blue-dark': !props.invalid,
+    'border-red hover:shadow-[0_0_0.15rem_theme(colors.red.DEFAULT)] focus:border-red-light focus:yt-focus-red active:border-red-dark': props.invalid
+  });
+};
+const getButtonStateClasses = invalid => {
+  if (invalid) {
+    return '!border-red focus:!border-red-light focus:yt-focus-red peer-focus:!border-red-light peer-focus:peer-active:!border-red-dark';
+  }
+
+  return '!border-grey-dark focus:!border-blue-light peer-focus:!border-blue-light peer-focus:peer-active:!border-blue-dark';
+};
+
+export { getButtonStateClasses, getInputClasses };
+//# sourceMappingURL=util.js.map

package/dist/esm/components/Input/util.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"util.js","sources":["../../../../src/components/Input/util.ts"],"sourcesContent":["import cn from 'classnames';\r\n\r\nexport const getInputClasses = props => {\r\n    return cn(\r\n        'peer bg-white text-black text-sm border font-normal not-italic no-underline rounded inline-flex leading-6 px-2 relative w-full text-ellipsis flex items-center',\r\n        {\r\n            'cursor-not-allowed text-black bg-grey': props.readOnly,\r\n            'border-grey text-opacity-25 cursor-not-allowed': props.disabled,\r\n            'bg-[rgba(255,255,0,0.075)]': props.highlighted && props.disabled,\r\n            'bg-[rgba(255,255,0,0.2)]': props.highlighted && !props.disabled,\r\n            'border-grey-dark hover:shadow-[0_0_0.1rem_theme(colors.grey.darker)] focus:border-blue-light focus:yt-focus active:border-blue-dark':\r\n                !props.invalid,\r\n            'border-red hover:shadow-[0_0_0.15rem_theme(colors.red.DEFAULT)] focus:border-red-light focus:yt-focus-red active:border-red-dark':\r\n                props.invalid,\r\n        }\r\n    );\r\n};\r\n\r\nexport const getButtonStateClasses = (invalid: boolean | undefined): string => {\r\n    if (invalid) {\r\n        return '!border-red focus:!border-red-light focus:yt-focus-red peer-focus:!border-red-light peer-focus:peer-active:!border-red-dark';\r\n    }\r\n\r\n    return '!border-grey-dark focus:!border-blue-light peer-focus:!border-blue-light peer-focus:peer-active:!border-blue-dark';\r\n};\r\n"],"names":["getInputClasses","props","cn","readOnly","disabled","highlighted","invalid","getButtonStateClasses"],"mappings":";;MAEaA,eAAe,GAAGC,KAAK;EAChC,OAAOC,EAAE,CACL,gKADK,EAEL;IACI,yCAAyCD,KAAK,CAACE,QADnD;IAEI,kDAAkDF,KAAK,CAACG,QAF5D;IAGI,8BAA8BH,KAAK,CAACI,WAAN,IAAqBJ,KAAK,CAACG,QAH7D;IAII,4BAA4BH,KAAK,CAACI,WAAN,IAAqB,CAACJ,KAAK,CAACG,QAJ5D;IAKI,uIACI,CAACH,KAAK,CAACK,OANf;IAOI,oIACIL,KAAK,CAACK;GAVT,CAAT;AAaH;MAEYC,qBAAqB,GAAID,OAAD;EACjC,IAAIA,OAAJ,EAAa;IACT,OAAO,6HAAP;;;EAGJ,OAAO,mHAAP;AACH;;;;"}

package/dist/esm/components/Listbox/Listbox.js

@@ -0,0 +1,58 @@
+import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { forwardRef, createElement } from 'react';
+import cn from 'classnames';
+import { ScrollableList } from './ScrollableList.js';
+import { useListbox } from './useListbox.js';
+import { useMultiListbox } from './useMultiListbox.js';
+
+var _excluded = ["className"],
+    _excluded2 = ["className"];
+var Listbox = /*#__PURE__*/forwardRef(function Listbox(props, ref) {
+  var externalClassName = props.className,
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded);
+
+  var _useListbox = useListbox(otherProps, ref),
+      list = _useListbox.list,
+      input = _useListbox.input;
+
+  var className = cn('bg-white inline-flex relative w-full', externalClassName);
+  return createElement("span", {
+    "data-taco": "listbox",
+    className: className
+  }, createElement(ScrollableList, Object.assign({}, list, {
+    style: _extends({}, list.style, {
+      maxHeight: 'calc(12rem + 2px)'
+      /* (6 * option height) + listbox border */
+
+    })
+  })), createElement("input", Object.assign({}, input, {
+    className: "hidden",
+    type: "text"
+  })));
+});
+var MultiListbox = /*#__PURE__*/forwardRef(function Listbox(props, ref) {
+  var externalClassName = props.className,
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded2);
+
+  var _useMultiListbox = useMultiListbox(otherProps, ref),
+      list = _useMultiListbox.list,
+      input = _useMultiListbox.input;
+
+  var className = cn('bg-white inline-flex relative w-full', externalClassName);
+  return createElement("span", {
+    "data-taco": "listbox",
+    className: className
+  }, createElement(ScrollableList, Object.assign({}, list, {
+    style: _extends({}, list.style, {
+      maxHeight: 'calc(12rem + 2px + 2px)'
+      /* (6 * option height) + listbox border + ALL_OPTIONS bottom border */
+
+    })
+  })), createElement("input", Object.assign({}, input, {
+    className: "hidden",
+    type: "text"
+  })));
+});
+
+export { Listbox, MultiListbox };
+//# sourceMappingURL=Listbox.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Listbox.js","sources":["../../../../src/components/Listbox/Listbox.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport cn from 'classnames';\r\nimport { useListbox } from './useListbox';\r\nimport { useMultiListbox } from './useMultiListbox';\r\nimport { ScrollableList, ScrollableListItemValue, ScrollableListItem } from './ScrollableList';\r\n\r\nexport type ListboxItem = ScrollableListItem;\r\nexport type ListboxValue = ScrollableListItemValue;\r\n\r\nexport type ListboxTexts = {\r\n    /**\r\n     * Text displayed in the listbox if no data provided.\r\n     * To read more about how to provide the text, see [Provider](component:provider) component\r\n     */\r\n    empty: string;\r\n    /**\r\n     * Text displayed in the listbox to indicate the data is loading.\r\n     * Read more about how to provide the text in [Provider](component:provider) component\r\n     */\r\n    loading: string;\r\n    /**\r\n     * The first option displayed in a multiselect listbox that selects all available options.\r\n     * Read more about how to provide the text in [Provider](component:provider) component\r\n     */\r\n    allOption: string;\r\n};\r\n\r\nexport type ListboxProps = Pick<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'onFocus'> &\r\n    Omit<React.InputHTMLAttributes<HTMLElement>, 'defaultValue' | 'onChange' | 'value'> & {\r\n        /** Data indicating the options in listbox */\r\n        data?: ListboxItem[];\r\n        /**\r\n         * Initial value of the listbox.\r\n         * This is used when listbox is mounted, if no value is provided.\r\n         * *Note* that listbox is a controlled component, setting this will also trigger the `onChange` event\r\n         */\r\n        defaultValue?: ListboxValue;\r\n        /** Set what value should have an empty option in listbox */\r\n        emptyValue?: ListboxValue;\r\n        /** Draws attention to the listbox by changing its style and making it visually prominent */\r\n        highlighted?: boolean;\r\n        /* Whether the input is in an invalid state */\r\n        invalid?: boolean;\r\n        /**\r\n         * Shows a loading indicator with a text next to it.\r\n         * Read more about how to provide the text in [Provider](component:provider) component\r\n         */\r\n        loading?: boolean;\r\n        /**\r\n         * Value of the listbox representing the selected item.\r\n         * It needs to be an existing value from the provided data\r\n         */\r\n        value?: ListboxValue;\r\n    };\r\n\r\nexport const Listbox = React.forwardRef(function Listbox(props: ListboxProps, ref: React.Ref<HTMLInputElement>) {\r\n    const { className: externalClassName, ...otherProps } = props;\r\n    const { list, input } = useListbox(otherProps, ref);\r\n    const className = cn('bg-white inline-flex relative w-full', externalClassName);\r\n\r\n    return (\r\n        <span data-taco=\"listbox\" className={className}>\r\n            <ScrollableList\r\n                {...list}\r\n                style={{ ...list.style, maxHeight: 'calc(12rem + 2px)' /* (6 * option height) + listbox border */ }}\r\n            />\r\n            <input {...input} className=\"hidden\" type=\"text\" />\r\n        </span>\r\n    );\r\n});\r\n\r\nexport const MultiListbox = React.forwardRef(function Listbox(props: ListboxProps, ref: React.Ref<HTMLInputElement>) {\r\n    const { className: externalClassName, ...otherProps } = props;\r\n    const { list, input } = useMultiListbox(otherProps, ref);\r\n    const className = cn('bg-white inline-flex relative w-full', externalClassName);\r\n\r\n    return (\r\n        <span data-taco=\"listbox\" className={className}>\r\n            <ScrollableList\r\n                {...list}\r\n                style={{\r\n                    ...list.style,\r\n                    maxHeight: 'calc(12rem + 2px + 2px)' /* (6 * option height) + listbox border + ALL_OPTIONS bottom border */,\r\n                }}\r\n            />\r\n            <input {...input} className=\"hidden\" type=\"text\" />\r\n        </span>\r\n    );\r\n});\r\n"],"names":["Listbox","React","props","ref","externalClassName","className","otherProps","useListbox","list","input","cn","ScrollableList","style","maxHeight","type","MultiListbox","useMultiListbox"],"mappings":";;;;;;;;;IAuDaA,OAAO,gBAAGC,UAAA,CAAiB,SAASD,OAAT,CAAiBE,KAAjB,EAAsCC,GAAtC;EACpC,IAAmBC,iBAAnB,GAAwDF,KAAxD,CAAQG,SAAR;MAAyCC,UAAzC,iCAAwDJ,KAAxD;;EACA,kBAAwBK,UAAU,CAACD,UAAD,EAAaH,GAAb,CAAlC;MAAQK,IAAR,eAAQA,IAAR;MAAcC,KAAd,eAAcA,KAAd;;EACA,IAAMJ,SAAS,GAAGK,EAAE,CAAC,sCAAD,EAAyCN,iBAAzC,CAApB;EAEA,OACIH,aAAA,OAAA;iBAAgB;IAAUI,SAAS,EAAEA;GAArC,EACIJ,aAAA,CAACU,cAAD,oBACQH;IACJI,KAAK,eAAOJ,IAAI,CAACI,KAAZ;MAAmBC,SAAS,EAAE;;;;IAFvC,CADJ,EAKIZ,aAAA,QAAA,oBAAWQ;IAAOJ,SAAS,EAAC;IAASS,IAAI,EAAC;IAA1C,CALJ,CADJ;AASH,CAdsB;IAgBVC,YAAY,gBAAGd,UAAA,CAAiB,SAASD,OAAT,CAAiBE,KAAjB,EAAsCC,GAAtC;EACzC,IAAmBC,iBAAnB,GAAwDF,KAAxD,CAAQG,SAAR;MAAyCC,UAAzC,iCAAwDJ,KAAxD;;EACA,uBAAwBc,eAAe,CAACV,UAAD,EAAaH,GAAb,CAAvC;MAAQK,IAAR,oBAAQA,IAAR;MAAcC,KAAd,oBAAcA,KAAd;;EACA,IAAMJ,SAAS,GAAGK,EAAE,CAAC,sCAAD,EAAyCN,iBAAzC,CAApB;EAEA,OACIH,aAAA,OAAA;iBAAgB;IAAUI,SAAS,EAAEA;GAArC,EACIJ,aAAA,CAACU,cAAD,oBACQH;IACJI,KAAK,eACEJ,IAAI,CAACI,KADP;MAEDC,SAAS,EAAE;;;;IAJnB,CADJ,EAQIZ,aAAA,QAAA,oBAAWQ;IAAOJ,SAAS,EAAC;IAASS,IAAI,EAAC;IAA1C,CARJ,CADJ;AAYH,CAjB2B;;;;"}

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

@@ -0,0 +1,174 @@
+import { forwardRef, useMemo, createRef, useEffect, createElement } from 'react';
+import cn from 'classnames';
+import { Spinner } from '../Spinner/Spinner.js';
+import { useLocalization } from '../Provider/Provider.js';
+import { Checkbox } from '../Checkbox/Checkbox.js';
+import { useProxiedRef } from '../../utils/hooks/useProxiedRef.js';
+import { getInputClasses } from '../Input/util.js';
+import { getNextIndexFromKeycode } from '../../utils/hooks/useListKeyboardNavigation.js';
+import { useListScrollTo } from '../../utils/hooks/useListScrollTo.js';
+
+const getId = (id, value) => `${id}_${value}`;
+
+const getNextEnabledItem = (event, data, index) => {
+  const nextIndex = getNextIndexFromKeycode(event.keyCode, data.length, index);
+
+  if (nextIndex) {
+    if (nextIndex === index) {
+      return index;
+    } else if (data[nextIndex] && data[nextIndex].disabled) {
+      return getNextEnabledItem(event, data, nextIndex);
+    }
+  }
+
+  return nextIndex;
+};
+
+const ScrollableList = /*#__PURE__*/forwardRef(function ScrollableList(props, ref) {
+  const {
+    data,
+    disabled,
+    highlighted,
+    id,
+    invalid: _,
+    loading,
+    onChange: setCurrentIndex,
+    onClick,
+    onFocus,
+    onKeyDown,
+    readOnly,
+    scrollOnFocus = false,
+    value: currentIndex,
+    multiselect,
+    selectedIndexes = [],
+    allOptionsSelected = false,
+    ...otherProps
+  } = props;
+  const listRef = useProxiedRef(ref);
+  const itemRefs = useMemo(() => data.map(() => createRef()), [data]);
+  const {
+    texts
+  } = useLocalization();
+  const {
+    scrollTo
+  } = useListScrollTo(listRef, itemRefs);
+  useEffect(() => {
+    var _itemRefs$currentInde;
+
+    if (currentIndex && (_itemRefs$currentInde = itemRefs[currentIndex]) !== null && _itemRefs$currentInde !== void 0 && _itemRefs$currentInde.current) {
+      var _itemRefs$currentInde2;
+
+      (_itemRefs$currentInde2 = itemRefs[currentIndex].current) === null || _itemRefs$currentInde2 === void 0 ? void 0 : _itemRefs$currentInde2.scrollIntoView({
+        block: 'center'
+      });
+    }
+  }, []);
+  useEffect(() => {
+    scrollTo(currentIndex);
+  }, [currentIndex]);
+
+  const handleKeyDown = event => {
+    const nextIndex = getNextEnabledItem(event, data, currentIndex);
+
+    if (nextIndex !== undefined && nextIndex !== currentIndex) {
+      event.preventDefault();
+      scrollTo(nextIndex);
+      setCurrentIndex(nextIndex);
+    }
+
+    if (onKeyDown) {
+      event.persist();
+      const index = nextIndex !== undefined ? nextIndex : currentIndex;
+      onKeyDown(event, index);
+    }
+  };
+
+  const handleClick = index => event => {
+    setCurrentIndex(index);
+
+    if (onClick) {
+      event.persist();
+      onClick(event, index);
+    }
+  };
+
+  const handleFocus = event => {
+    if (scrollOnFocus) {
+      scrollTo(currentIndex);
+    }
+
+    if (onFocus) {
+      event.persist();
+      onFocus(event);
+    }
+  };
+
+  const getOptionCheckedState = (optionValue, index) => {
+    if (optionValue === '#ALL-OPTIONS#') {
+      return allOptionsSelected;
+    } else if (!optionValue || !selectedIndexes) {
+      return false;
+    } else {
+      return selectedIndexes.findIndex(i => i === index) !== -1;
+    }
+  };
+
+  const list = { ...otherProps,
+    className: cn('inline-flex flex-col list-none !p-0 m-0 overflow-y-auto h-auto', getInputClasses(props), {
+      'yt-list--multiselect': multiselect,
+      'pointer-events-none': disabled,
+      'cursor-not-allowed': disabled || readOnly
+    }, otherProps.className),
+    disabled,
+    id,
+    onFocus: !disabled && !readOnly ? handleFocus : undefined,
+    onKeyDown: !disabled && !readOnly ? handleKeyDown : undefined,
+    readOnly,
+    ref: listRef,
+    role: 'listbox',
+    tabIndex: otherProps.tabIndex || 0
+  };
+  const options = data.map((option, index) => {
+    const depth = option.path ? option.path.split('.').length - 1 : 0;
+    return {
+      'aria-selected': multiselect ? getOptionCheckedState(String(option.value), index) : currentIndex === index,
+      'data-focused': currentIndex === index,
+      children: option.text,
+      className: cn('flex items-center px-3 w-full cursor-pointer bg-white flex-[0_0_2rem] focus:wcag-blue focus:border-blue', {
+        'sticky top-0 font-bold': depth === 0 && !!option.hasChildren
+      }),
+      disabled: option.disabled,
+      icon: option.icon,
+      id: getId(id, option.value),
+      key: getId(id, option.value),
+      onClick: !disabled && !readOnly ? handleClick(index) : undefined,
+      ref: itemRefs[index],
+      role: 'option',
+      style: depth > 0 ? {
+        paddingLeft: `${depth + 1}rem`
+      } : undefined
+    };
+  });
+  return createElement("ul", Object.assign({}, list, {
+    "data-taco": "scrollable-list"
+  }), loading ? createElement("li", {
+    className: "yt-list__empty"
+  }, createElement("span", null, createElement(Spinner, {
+    delay: 0
+  })), createElement("span", null, texts.listbox.loading)) : options.length ? options.map(({
+    children,
+    icon,
+    ...optionProps
+  }) => createElement("li", Object.assign({}, optionProps), icon, createElement("span", {
+    className: "flex-grow truncate text-left"
+  }, children), multiselect && createElement(Checkbox, {
+    checked: optionProps['aria-selected'],
+    onChange: () => null,
+    className: "pointer-events-none ml-2 self-center p-px"
+  }))) : createElement("li", {
+    className: "yt-list__empty"
+  }, createElement("span", null, texts.listbox.empty)));
+});
+
+export { ScrollableList, getId };
+//# sourceMappingURL=ScrollableList.js.map

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

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

package/dist/esm/components/Listbox/useListbox.js

@@ -0,0 +1,145 @@
+import { useMemo, useEffect } from 'react';
+import { v4 } from 'uuid';
+import { useProxiedRef } from '../../utils/hooks/useProxiedRef.js';
+import { useFlattenedData, getIndexFromValue, getActiveDescendant, setInputValueByRef, findByValue, sanitizeItem } from './util.js';
+import { useTypeahead } from './useTypeahead.js';
+
+const useListbox = ({
+  data: externalData = [],
+  defaultValue,
+  disabled,
+  emptyValue,
+  id: nativeId,
+  invalid,
+  name,
+  onChange,
+  onFocus,
+  onKeyDown,
+  value = emptyValue,
+  ...otherProps
+}, ref) => {
+  const data = useFlattenedData(emptyValue !== undefined ? [{
+    text: '',
+    value: emptyValue
+  }, ...externalData] : externalData);
+  const id = useMemo(() => nativeId || v4(), [nativeId]);
+  const inputRef = useProxiedRef(ref);
+  const currentIndex = value !== undefined ? getIndexFromValue(data, value) : undefined;
+  const {
+    getNextIndex
+  } = useTypeahead({
+    data,
+    currentIndex
+  });
+
+  const setInputValueByIndex = index => {
+    if (index !== undefined) {
+      const option = data[index];
+
+      if (option && !option.disabled) {
+        setInputValueByRef(inputRef.current, option.value);
+      }
+    }
+  };
+
+  const handleListboxChange = index => {
+    setInputValueByIndex(index);
+  };
+
+  useEffect(() => {
+    if (data.length && currentIndex === undefined) {
+      if (defaultValue !== undefined) {
+        const defaultValueIndex = getIndexFromValue(data, defaultValue);
+
+        if (defaultValueIndex !== undefined) {
+          setInputValueByIndex(defaultValueIndex);
+        }
+      } else {
+        setInputValueByIndex(0);
+      }
+    }
+  }, [data]);
+
+  const handleListboxKeyDown = event => {
+    const charKey = String.fromCharCode(event.keyCode);
+
+    if (charKey.match(/(\w)/g)) {
+      const nextIndex = getNextIndex(charKey);
+
+      if (nextIndex > -1 && nextIndex !== currentIndex) {
+        setInputValueByIndex(nextIndex);
+      }
+
+      return;
+    }
+
+    if (onKeyDown) {
+      event.persist();
+      onKeyDown(event);
+    }
+  };
+
+  const handleListboxFocus = event => {
+    if (currentIndex === undefined && data.length) {
+      setInputValueByIndex(0);
+    }
+
+    if (onFocus) {
+      event.persist();
+      onFocus(event);
+    }
+  };
+
+  const handleInputChange = event => {
+    event.persist();
+
+    if (onChange) {
+      var _item$path$split, _item$path;
+
+      const item = findByValue(data, event.target.value);
+      event.detail = sanitizeItem(item);
+      const indexes = (_item$path$split = item === null || item === void 0 ? void 0 : (_item$path = item.path) === null || _item$path === void 0 ? void 0 : _item$path.split('.')) !== null && _item$path$split !== void 0 ? _item$path$split : [];
+
+      if (indexes.length > 1) {
+        // we don't want to map the current item
+        indexes.pop(); // we need to rebuild the path as we map
+
+        let lastPath;
+        event.detail.parents = indexes.map(i => {
+          lastPath = lastPath ? [lastPath, i].join('.') : i;
+          return sanitizeItem(data.find(i => i.path === lastPath));
+        });
+      }
+
+      onChange(event);
+    }
+  };
+
+  const list = { ...otherProps,
+    'aria-activedescendant': getActiveDescendant(data, currentIndex, id),
+    data,
+    disabled,
+    id,
+    invalid,
+    onChange: handleListboxChange,
+    onFocus: handleListboxFocus,
+    onKeyDown: handleListboxKeyDown,
+    scrollOnFocus: true,
+    tabIndex: disabled ? -1 : otherProps.tabIndex ? otherProps.tabIndex : 0,
+    value: currentIndex
+  };
+  const input = {
+    name,
+    onChange: handleInputChange,
+    ref: inputRef,
+    tabIndex: -1,
+    value: value !== null && value !== void 0 ? value : ''
+  };
+  return {
+    list,
+    input
+  };
+};
+
+export { useListbox };
+//# sourceMappingURL=useListbox.js.map

package/dist/esm/components/Listbox/useListbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useListbox.js","sources":["../../../../src/components/Listbox/useListbox.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport { v4 as uuid } from 'uuid';\r\nimport { ListboxProps } from './Listbox';\r\nimport { useProxiedRef } from '../../utils/hooks/useProxiedRef';\r\nimport { setInputValueByRef, getIndexFromValue, findByValue, getActiveDescendant, useFlattenedData, sanitizeItem } from './util';\r\nimport { ScrollableListProps } from './ScrollableList';\r\nimport { useTypeahead } from './useTypeahead';\r\n\r\ntype useListbox = {\r\n    list: ScrollableListProps;\r\n    input: Omit<React.HTMLAttributes<HTMLInputElement>, 'defaultValue'>;\r\n};\r\n\r\nexport const useListbox = (\r\n    {\r\n        data: externalData = [],\r\n        defaultValue,\r\n        disabled,\r\n        emptyValue,\r\n        id: nativeId,\r\n        invalid,\r\n        name,\r\n        onChange,\r\n        onFocus,\r\n        onKeyDown,\r\n        value = emptyValue,\r\n        ...otherProps\r\n    }: ListboxProps,\r\n    ref: React.Ref<HTMLInputElement>\r\n): useListbox => {\r\n    const data = useFlattenedData(emptyValue !== undefined ? [{ text: '', value: emptyValue }, ...externalData] : externalData);\r\n    const id = React.useMemo(() => nativeId || uuid(), [nativeId]);\r\n    const inputRef = useProxiedRef<HTMLInputElement>(ref);\r\n    const currentIndex = value !== undefined ? getIndexFromValue(data, value) : undefined;\r\n    const { getNextIndex } = useTypeahead({ data, currentIndex });\r\n\r\n    const setInputValueByIndex = (index: number | undefined): void => {\r\n        if (index !== undefined) {\r\n            const option = data[index];\r\n\r\n            if (option && !option.disabled) {\r\n                setInputValueByRef(inputRef.current, option.value);\r\n            }\r\n        }\r\n    };\r\n\r\n    const handleListboxChange = (index: number): void => {\r\n        setInputValueByIndex(index);\r\n    };\r\n\r\n    React.useEffect(() => {\r\n        if (data.length && currentIndex === undefined) {\r\n            if (defaultValue !== undefined) {\r\n                const defaultValueIndex = getIndexFromValue(data, defaultValue);\r\n\r\n                if (defaultValueIndex !== undefined) {\r\n                    setInputValueByIndex(defaultValueIndex);\r\n                }\r\n            } else {\r\n                setInputValueByIndex(0);\r\n            }\r\n        }\r\n    }, [data]);\r\n\r\n    const handleListboxKeyDown = (event: React.KeyboardEvent<HTMLElement>): void => {\r\n        const charKey = String.fromCharCode(event.keyCode);\r\n\r\n        if (charKey.match(/(\\w)/g)) {\r\n            const nextIndex = getNextIndex(charKey);\r\n\r\n            if (nextIndex > -1 && nextIndex !== currentIndex) {\r\n                setInputValueByIndex(nextIndex);\r\n            }\r\n            return;\r\n        }\r\n\r\n        if (onKeyDown) {\r\n            event.persist();\r\n            onKeyDown(event);\r\n        }\r\n    };\r\n\r\n    const handleListboxFocus = (event: React.FocusEvent<HTMLElement>): void => {\r\n        if (currentIndex === undefined && data.length) {\r\n            setInputValueByIndex(0);\r\n        }\r\n\r\n        if (onFocus) {\r\n            event.persist();\r\n            onFocus(event);\r\n        }\r\n    };\r\n\r\n    const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>): void => {\r\n        event.persist();\r\n\r\n        if (onChange) {\r\n            const item = findByValue(data, event.target.value);\r\n            (event as any).detail = sanitizeItem(item);\r\n\r\n            const indexes = item?.path?.split('.') ?? [];\r\n\r\n            if (indexes.length > 1) {\r\n                // we don't want to map the current item\r\n                indexes.pop();\r\n                // we need to rebuild the path as we map\r\n                let lastPath: string;\r\n\r\n                (event as any).detail.parents = indexes.map(i => {\r\n                    lastPath = lastPath ? [lastPath, i].join('.') : i;\r\n                    return sanitizeItem(data.find(i => i.path === lastPath));\r\n                });\r\n            }\r\n\r\n            onChange(event);\r\n        }\r\n    };\r\n\r\n    const list: ScrollableListProps = {\r\n        ...otherProps,\r\n        'aria-activedescendant': getActiveDescendant(data, currentIndex, id),\r\n        data,\r\n        disabled,\r\n        id,\r\n        invalid,\r\n        onChange: handleListboxChange,\r\n        onFocus: handleListboxFocus,\r\n        onKeyDown: handleListboxKeyDown,\r\n        scrollOnFocus: true,\r\n        tabIndex: disabled ? -1 : otherProps.tabIndex ? otherProps.tabIndex : 0,\r\n        value: currentIndex,\r\n    };\r\n\r\n    const input = {\r\n        name,\r\n        onChange: handleInputChange,\r\n        ref: inputRef,\r\n        tabIndex: -1,\r\n        value: value ?? '',\r\n    };\r\n\r\n    return { list, input };\r\n};\r\n"],"names":["useListbox","data","externalData","defaultValue","disabled","emptyValue","id","nativeId","invalid","name","onChange","onFocus","onKeyDown","value","otherProps","ref","useFlattenedData","undefined","text","React","uuid","inputRef","useProxiedRef","currentIndex","getIndexFromValue","getNextIndex","useTypeahead","setInputValueByIndex","index","option","setInputValueByRef","current","handleListboxChange","length","defaultValueIndex","handleListboxKeyDown","event","charKey","String","fromCharCode","keyCode","match","nextIndex","persist","handleListboxFocus","handleInputChange","item","findByValue","target","detail","sanitizeItem","indexes","path","split","pop","lastPath","parents","map","i","join","find","list","getActiveDescendant","scrollOnFocus","tabIndex","input"],"mappings":"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"}