@economic/taco 0.0.1-alpha.8 → 0.0.2-alpha.0

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

@@ -1,4 +1,4 @@
-import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+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';
@@ -15,10 +15,18 @@ var Listbox = /*#__PURE__*/forwardRef(function Listbox(props, ref) {
       list = _useListbox.list,
       input = _useListbox.input;
 
-  var className = cn('yt-listbox', externalClassName);
+  var className = cn('bg-white inline-flex relative w-full', externalClassName);
   return createElement("span", {
+    "data-taco": "listbox",
     className: className
-  }, createElement(ScrollableList, Object.assign({}, list)), createElement("input", Object.assign({}, input, {
+  }, 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"
   })));
 });
@@ -30,10 +38,18 @@ var MultiListbox = /*#__PURE__*/forwardRef(function Listbox(props, ref) {
       list = _useMultiListbox.list,
       input = _useMultiListbox.input;
 
-  var className = cn('yt-listbox', externalClassName);
+  var className = cn('bg-white inline-flex relative w-full', externalClassName);
   return createElement("span", {
+    "data-taco": "listbox",
     className: className
-  }, createElement(ScrollableList, Object.assign({}, list)), createElement("input", Object.assign({}, input, {
+  }, 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"
   })));
 });

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

@@ -1 +1 @@
-{"version":3,"file":"Listbox.js","sources":["../../../../../src/components/Listbox/Listbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport { useListbox } from './useListbox';\nimport { useMultiListbox } from './useMultiListbox';\nimport { ScrollableList, ScrollableListItemValue, ScrollableListItem } from './ScrollableList';\nimport './Listbox.css';\nimport { State } from '../../types';\n\nexport type ListboxItem = ScrollableListItem;\nexport type ListboxValue = ScrollableListItemValue;\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     * The first option displayed in a multiselect listbox that selects all available options.\n     * Read more about how to provide the text in [Provider](component:provider) component\n     */\n    allOption: string;\n};\n\nexport type ListboxProps = Pick<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'onFocus'> &\n    Omit<React.InputHTMLAttributes<HTMLElement>, 'defaultValue' | 'onChange' | 'value'> & {\n        /** Data indicating the options in listbox */\n        data?: ListboxItem[];\n        /**\n         * Initial value of the listbox.\n         * This is used when listbox is mounted, if no value is provided.\n         * *Note* that listbox is a controlled component, setting this will also trigger the `onChange` event\n         */\n        defaultValue?: ListboxValue;\n        /** Set what value should have an empty option in listbox */\n        emptyValue?: ListboxValue;\n        /** Draws attention to the listbox by changing its style and making it visually prominent */\n        highlighted?: 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:provider) component\n         */\n        loading?: boolean;\n        /** State will change the style of the listbox */\n        state?: State;\n        /**\n         * Value of the listbox representing the selected item.\n         * It needs to be an existing value from the provided data\n         */\n        value?: ListboxValue;\n    };\n\nexport const Listbox = React.forwardRef(function Listbox(props: ListboxProps, ref: React.Ref<HTMLInputElement>) {\n    const { className: externalClassName, ...otherProps } = props;\n    const { list, input } = useListbox(otherProps, ref);\n    const className = cn('yt-listbox', externalClassName);\n\n    return (\n        <span className={className}>\n            <ScrollableList {...list} />\n            <input {...input} type=\"text\" />\n        </span>\n    );\n});\n\nexport const MultiListbox = React.forwardRef(function Listbox(props: ListboxProps, ref: React.Ref<HTMLInputElement>) {\n    const { className: externalClassName, ...otherProps } = props;\n    const { list, input } = useMultiListbox(otherProps, ref);\n    const className = cn('yt-listbox', externalClassName);\n\n    return (\n        <span className={className}>\n            <ScrollableList {...list} />\n            <input {...input} type=\"text\" />\n        </span>\n    );\n});\n"],"names":["Listbox","React","props","ref","externalClassName","className","otherProps","useListbox","list","input","cn","ScrollableList","type","MultiListbox","useMultiListbox"],"mappings":";;;;;;;;;IAyDaA,OAAO,gBAAGC,UAAA,CAAiB,SAASD,OAAT,CAAiBE,KAAjB,EAAsCC,GAAtC;AACpC,MAAmBC,iBAAnB,GAAwDF,KAAxD,CAAQG,SAAR;AAAA,MAAyCC,UAAzC,iCAAwDJ,KAAxD;;AACA,oBAAwBK,UAAU,CAACD,UAAD,EAAaH,GAAb,CAAlC;AAAA,MAAQK,IAAR,eAAQA,IAAR;AAAA,MAAcC,KAAd,eAAcA,KAAd;;AACA,MAAMJ,SAAS,GAAGK,EAAE,CAAC,YAAD,EAAeN,iBAAf,CAApB;AAEA,SACIH,aAAA,OAAA;AAAMI,IAAAA,SAAS,EAAEA;GAAjB,EACIJ,aAAA,CAACU,cAAD,oBAAoBH,KAApB,CADJ,EAEIP,aAAA,QAAA,oBAAWQ;AAAOG,IAAAA,IAAI,EAAC;IAAvB,CAFJ,CADJ;AAMH,CAXsB;IAaVC,YAAY,gBAAGZ,UAAA,CAAiB,SAASD,OAAT,CAAiBE,KAAjB,EAAsCC,GAAtC;AACzC,MAAmBC,iBAAnB,GAAwDF,KAAxD,CAAQG,SAAR;AAAA,MAAyCC,UAAzC,iCAAwDJ,KAAxD;;AACA,yBAAwBY,eAAe,CAACR,UAAD,EAAaH,GAAb,CAAvC;AAAA,MAAQK,IAAR,oBAAQA,IAAR;AAAA,MAAcC,KAAd,oBAAcA,KAAd;;AACA,MAAMJ,SAAS,GAAGK,EAAE,CAAC,YAAD,EAAeN,iBAAf,CAApB;AAEA,SACIH,aAAA,OAAA;AAAMI,IAAAA,SAAS,EAAEA;GAAjB,EACIJ,aAAA,CAACU,cAAD,oBAAoBH,KAApB,CADJ,EAEIP,aAAA,QAAA,oBAAWQ;AAAOG,IAAAA,IAAI,EAAC;IAAvB,CAFJ,CADJ;AAMH,CAX2B;;;;"}
+{"version":3,"file":"Listbox.js","sources":["../../../../../src/components/Listbox/Listbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport { useListbox } from './useListbox';\nimport { useMultiListbox } from './useMultiListbox';\nimport { ScrollableList, ScrollableListItemValue, ScrollableListItem } from './ScrollableList';\nimport { State } from '../../types';\n\nexport type ListboxItem = ScrollableListItem;\nexport type ListboxValue = ScrollableListItemValue;\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     * The first option displayed in a multiselect listbox that selects all available options.\n     * Read more about how to provide the text in [Provider](component:provider) component\n     */\n    allOption: string;\n};\n\nexport type ListboxProps = Pick<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'onFocus'> &\n    Omit<React.InputHTMLAttributes<HTMLElement>, 'defaultValue' | 'onChange' | 'value'> & {\n        /** Data indicating the options in listbox */\n        data?: ListboxItem[];\n        /**\n         * Initial value of the listbox.\n         * This is used when listbox is mounted, if no value is provided.\n         * *Note* that listbox is a controlled component, setting this will also trigger the `onChange` event\n         */\n        defaultValue?: ListboxValue;\n        /** Set what value should have an empty option in listbox */\n        emptyValue?: ListboxValue;\n        /** Draws attention to the listbox by changing its style and making it visually prominent */\n        highlighted?: 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:provider) component\n         */\n        loading?: boolean;\n        /** State will change the style of the listbox */\n        state?: State;\n        /**\n         * Value of the listbox representing the selected item.\n         * It needs to be an existing value from the provided data\n         */\n        value?: ListboxValue;\n    };\n\nexport const Listbox = React.forwardRef(function Listbox(props: ListboxProps, ref: React.Ref<HTMLInputElement>) {\n    const { className: externalClassName, ...otherProps } = props;\n    const { list, input } = useListbox(otherProps, ref);\n    const className = cn('bg-white inline-flex relative w-full', externalClassName);\n\n    return (\n        <span data-taco=\"listbox\" className={className}>\n            <ScrollableList\n                {...list}\n                style={{ ...list.style, maxHeight: 'calc(12rem + 2px)' /* (6 * option height) + listbox border */ }}\n            />\n            <input {...input} className=\"hidden\" type=\"text\" />\n        </span>\n    );\n});\n\nexport const MultiListbox = React.forwardRef(function Listbox(props: ListboxProps, ref: React.Ref<HTMLInputElement>) {\n    const { className: externalClassName, ...otherProps } = props;\n    const { list, input } = useMultiListbox(otherProps, ref);\n    const className = cn('bg-white inline-flex relative w-full', externalClassName);\n\n    return (\n        <span data-taco=\"listbox\" className={className}>\n            <ScrollableList\n                {...list}\n                style={{\n                    ...list.style,\n                    maxHeight: 'calc(12rem + 2px + 2px)' /* (6 * option height) + listbox border + ALL_OPTIONS bottom border */,\n                }}\n            />\n            <input {...input} className=\"hidden\" type=\"text\" />\n        </span>\n    );\n});\n"],"names":["Listbox","React","props","ref","externalClassName","className","otherProps","useListbox","list","input","cn","ScrollableList","style","maxHeight","type","MultiListbox","useMultiListbox"],"mappings":";;;;;;;;;IAwDaA,OAAO,gBAAGC,UAAA,CAAiB,SAASD,OAAT,CAAiBE,KAAjB,EAAsCC,GAAtC;AACpC,MAAmBC,iBAAnB,GAAwDF,KAAxD,CAAQG,SAAR;AAAA,MAAyCC,UAAzC,iCAAwDJ,KAAxD;;AACA,oBAAwBK,UAAU,CAACD,UAAD,EAAaH,GAAb,CAAlC;AAAA,MAAQK,IAAR,eAAQA,IAAR;AAAA,MAAcC,KAAd,eAAcA,KAAd;;AACA,MAAMJ,SAAS,GAAGK,EAAE,CAAC,sCAAD,EAAyCN,iBAAzC,CAApB;AAEA,SACIH,aAAA,OAAA;iBAAgB;AAAUI,IAAAA,SAAS,EAAEA;GAArC,EACIJ,aAAA,CAACU,cAAD,oBACQH;AACJI,IAAAA,KAAK,eAAOJ,IAAI,CAACI,KAAZ;AAAmBC,MAAAA,SAAS,EAAE;AAAoB;;AAAlD;IAFT,CADJ,EAKIZ,aAAA,QAAA,oBAAWQ;AAAOJ,IAAAA,SAAS,EAAC;AAASS,IAAAA,IAAI,EAAC;IAA1C,CALJ,CADJ;AASH,CAdsB;IAgBVC,YAAY,gBAAGd,UAAA,CAAiB,SAASD,OAAT,CAAiBE,KAAjB,EAAsCC,GAAtC;AACzC,MAAmBC,iBAAnB,GAAwDF,KAAxD,CAAQG,SAAR;AAAA,MAAyCC,UAAzC,iCAAwDJ,KAAxD;;AACA,yBAAwBc,eAAe,CAACV,UAAD,EAAaH,GAAb,CAAvC;AAAA,MAAQK,IAAR,oBAAQA,IAAR;AAAA,MAAcC,KAAd,oBAAcA,KAAd;;AACA,MAAMJ,SAAS,GAAGK,EAAE,CAAC,sCAAD,EAAyCN,iBAAzC,CAApB;AAEA,SACIH,aAAA,OAAA;iBAAgB;AAAUI,IAAAA,SAAS,EAAEA;GAArC,EACIJ,aAAA,CAACU,cAAD,oBACQH;AACJI,IAAAA,KAAK,eACEJ,IAAI,CAACI,KADP;AAEDC,MAAAA,SAAS,EAAE;AAA0B;;AAFpC;IAFT,CADJ,EAQIZ,aAAA,QAAA,oBAAWQ;AAAOJ,IAAAA,SAAS,EAAC;AAASS,IAAAA,IAAI,EAAC;IAA1C,CARJ,CADJ;AAYH,CAjB2B;;;;"}

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

@@ -118,7 +118,9 @@ var ScrollableList = /*#__PURE__*/forwardRef(function ScrollableList(props, ref)
 
   var list = _extends({}, otherProps, {
     className: cn('inline-flex flex-col list-none !p-0 m-0 overflow-y-auto h-auto', getInputClasses(props), {
-      'yt-list--multiselect': multiselect
+      'yt-list--multiselect': multiselect,
+      'pointer-events-none': disabled,
+      'cursor-not-allowed': disabled || readOnly
     }, otherProps.className),
     disabled: disabled,
     id: id,
@@ -136,7 +138,7 @@ var ScrollableList = /*#__PURE__*/forwardRef(function ScrollableList(props, ref)
       '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', {
+      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,
@@ -163,13 +165,13 @@ var ScrollableList = /*#__PURE__*/forwardRef(function ScrollableList(props, ref)
         optionProps = _objectWithoutPropertiesLoose(_ref, _excluded2);
 
     return createElement("li", Object.assign({}, optionProps), icon, createElement("span", {
-      className: "flex-grow text-left truncate"
+      className: "flex-grow truncate text-left"
     }, children), multiselect && createElement(Checkbox, {
       checked: optionProps['aria-selected'],
       onChange: function onChange() {
         return null;
       },
-      className: "ml-2 flex items-center justify-end pointer-events-none overflow-visible p-px"
+      className: "pointer-events-none ml-2 flex items-center justify-end overflow-visible p-px"
     }));
   }) : createElement("li", {
     className: "yt-list__empty"

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

@@ -1 +1 @@
-{"version":3,"file":"ScrollableList.js","sources":["../../../../../src/components/Listbox/ScrollableList.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport { useProxiedRef } from '../../utils/hooks/useProxiedRef';\nimport { getNextIndexFromKeycode } from '../../utils/hooks/useListKeyboardNavigation';\nimport { useListScrollTo } from '../../utils/hooks/useListScrollTo';\nimport './ScrollableList.css';\nimport { Spinner } from '../Spinner/Spinner';\nimport { useLocalization } from '../Provider/Provider';\nimport { State } from '../../types';\nimport { Checkbox } from '../Checkbox/Checkbox';\nimport { getInputClasses } from '../Input/util';\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;\n    /* The index path to the item -- intended for internal use only */\n    path?: string;\n    /** Text describing the item */\n    text: string | 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    /**\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    /** State will change the style of the scrollable list */\n    state?: State;\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 = getNextIndexFromKeycode(event.keyCode, data.length, index);\n\n    if (nextIndex) {\n        if (nextIndex === index) {\n            return index;\n        } else 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,\n        id,\n        loading,\n        onChange: setCurrentIndex,\n        onClick,\n        onFocus,\n        onKeyDown,\n        readOnly,\n        scrollOnFocus = false,\n        state,\n        value: currentIndex,\n        multiselect,\n        selectedIndexes = [],\n        allOptionsSelected = false,\n        ...otherProps\n    } = props;\n    const listRef = useProxiedRef<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        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 ? nextIndex : currentIndex;\n            onKeyDown(event, index);\n        }\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        } else if (!optionValue || !selectedIndexes) {\n            return false;\n        } else {\n            return selectedIndexes.findIndex(i => i === index) !== -1;\n        }\n    };\n\n    const list: React.HTMLAttributes<HTMLUListElement> &\n        React.RefAttributes<HTMLUListElement> & { disabled?: boolean; readOnly?: boolean } = {\n        ...otherProps,\n        className: cn(\n            'inline-flex flex-col list-none !p-0 m-0 overflow-y-auto h-auto',\n            getInputClasses(props),\n            {\n                'yt-list--multiselect': multiselect,\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: 'listbox',\n        tabIndex: otherProps.tabIndex || 0,\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('flex items-center px-3 w-full cursor-pointer bg-white flex-[0_0_2rem] focus:wcag-blue', {\n                'sticky top-0 font-bold': depth === 0 && !!option.hasChildren,\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    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 className=\"flex-grow text-left truncate\">{children}</span>\n                        {multiselect && (\n                            <Checkbox\n                                checked={optionProps['aria-selected']}\n                                onChange={() => null}\n                                className=\"ml-2 flex items-center justify-end pointer-events-none overflow-visible 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":["getId","id","value","getNextEnabledItem","event","data","index","nextIndex","getNextIndexFromKeycode","keyCode","length","disabled","ScrollableList","React","props","ref","loading","setCurrentIndex","onChange","onClick","onFocus","onKeyDown","readOnly","scrollOnFocus","currentIndex","multiselect","selectedIndexes","allOptionsSelected","otherProps","listRef","useProxiedRef","itemRefs","map","useLocalization","texts","useListScrollTo","scrollTo","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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"}
+{"version":3,"file":"ScrollableList.js","sources":["../../../../../src/components/Listbox/ScrollableList.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport { useProxiedRef } from '../../utils/hooks/useProxiedRef';\nimport { getNextIndexFromKeycode } from '../../utils/hooks/useListKeyboardNavigation';\nimport { useListScrollTo } from '../../utils/hooks/useListScrollTo';\nimport './ScrollableList.css';\nimport { Spinner } from '../Spinner/Spinner';\nimport { useLocalization } from '../Provider/Provider';\nimport { State } from '../../types';\nimport { Checkbox } from '../Checkbox/Checkbox';\nimport { getInputClasses } from '../Input/util';\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;\n    /* The index path to the item -- intended for internal use only */\n    path?: string;\n    /** Text describing the item */\n    text: string | 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    /**\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    /** State will change the style of the scrollable list */\n    state?: State;\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 = getNextIndexFromKeycode(event.keyCode, data.length, index);\n\n    if (nextIndex) {\n        if (nextIndex === index) {\n            return index;\n        } else 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,\n        id,\n        loading,\n        onChange: setCurrentIndex,\n        onClick,\n        onFocus,\n        onKeyDown,\n        readOnly,\n        scrollOnFocus = false,\n        state,\n        value: currentIndex,\n        multiselect,\n        selectedIndexes = [],\n        allOptionsSelected = false,\n        ...otherProps\n    } = props;\n    const listRef = useProxiedRef<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        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 ? nextIndex : currentIndex;\n            onKeyDown(event, index);\n        }\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        } else if (!optionValue || !selectedIndexes) {\n            return false;\n        } else {\n            return selectedIndexes.findIndex(i => i === index) !== -1;\n        }\n    };\n\n    const list: React.HTMLAttributes<HTMLUListElement> &\n        React.RefAttributes<HTMLUListElement> & { disabled?: boolean; readOnly?: boolean } = {\n        ...otherProps,\n        className: cn(\n            'inline-flex flex-col list-none !p-0 m-0 overflow-y-auto h-auto',\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: 'listbox',\n        tabIndex: otherProps.tabIndex || 0,\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 items-center px-3 w-full cursor-pointer bg-white flex-[0_0_2rem] focus:wcag-blue focus:border-blue',\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    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 className=\"flex-grow truncate text-left\">{children}</span>\n                        {multiselect && (\n                            <Checkbox\n                                checked={optionProps['aria-selected']}\n                                onChange={() => null}\n                                className=\"pointer-events-none ml-2 flex items-center justify-end overflow-visible 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":["getId","id","value","getNextEnabledItem","event","data","index","nextIndex","getNextIndexFromKeycode","keyCode","length","disabled","ScrollableList","React","props","ref","loading","setCurrentIndex","onChange","onClick","onFocus","onKeyDown","readOnly","scrollOnFocus","currentIndex","multiselect","selectedIndexes","allOptionsSelected","otherProps","listRef","useProxiedRef","itemRefs","map","useLocalization","texts","useListScrollTo","scrollTo","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/src/components/RadioGroup/RadioGroup.js

@@ -6,7 +6,7 @@ import { Root, Item, Indicator } from '@radix-ui/react-radio-group';
 var _excluded = ["children", "value"],
     _excluded2 = ["children", "defaultValue", "disabled", "invalid", "onChange", "orientation", "value"];
 var getRadioGroupItemValueAsString = function getRadioGroupItemValueAsString(value) {
-  return value === undefined || value === null ? '' : String(value);
+  return value === null ? '' : String(value);
 };
 var findByValue = function findByValue(values, valueAsString) {
   return values.find(function (value) {
@@ -56,11 +56,11 @@ var useRadioGroup = function useRadioGroup(props) {
       otherProps = _objectWithoutPropertiesLoose(props, _excluded2);
 
   var values = useMemo(function () {
-    var _React$Children$map;
-
-    return (_React$Children$map = Children.map(children, function (child) {
-      return child.props.value;
-    })) !== null && _React$Children$map !== void 0 ? _React$Children$map : [];
+    var radioGroupItemValues = [];
+    Children.forEach(children, function (child) {
+      return radioGroupItemValues.push(child.props.value);
+    });
+    return radioGroupItemValues;
   }, [children]);
   var context = useMemo(function () {
     return {
@@ -70,17 +70,18 @@ var useRadioGroup = function useRadioGroup(props) {
   }, [disabled, invalid]);
   var valueProps;
 
-  if (defaultValue) {
+  if (onChange !== undefined) {
+    var handleChange = function handleChange(value) {
+      return onChange(findByValue(values, value));
+    };
+
     valueProps = {
-      defaultValue: getRadioGroupItemValueAsString(defaultValue) || undefined
+      onValueChange: handleChange,
+      value: value !== undefined ? getRadioGroupItemValueAsString(value) : undefined
     };
   } else {
-    var handleChange = onChange ? function (value) {
-      return onChange(findByValue(values, value));
-    } : undefined;
     valueProps = {
-      onValueChange: handleChange,
-      value: getRadioGroupItemValueAsString(value) || undefined
+      defaultValue: defaultValue !== undefined ? getRadioGroupItemValueAsString(defaultValue) : undefined
     };
   }
 
@@ -98,9 +99,9 @@ var RadioGroup = /*#__PURE__*/forwardRef(function RadioGroup(props, ref) {
       otherProps = _useRadioGroup.props;
 
   var className = cn('flex items-start', {
-    'flex-wrap space-x-4': props.orientation === 'horizontal',
-    'flex-col space-y-2': props.orientation === 'vertical'
-  }, props.className);
+    'flex-wrap space-x-4': otherProps.orientation === 'horizontal',
+    'flex-col space-y-2': otherProps.orientation === 'vertical'
+  }, otherProps.className);
   return createElement(RadioGroupContext.Provider, {
     value: context
   }, createElement(Root, Object.assign({}, otherProps, {

package/dist/esm/src/components/RadioGroup/RadioGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.js","sources":["../../../../../src/components/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport * as RadioGroupPrimitive from '@radix-ui/react-radio-group';\nimport { Orientation } from '../../types';\n\nexport type RadioGroupItemValue = string | number | boolean | undefined;\n\nexport const getRadioGroupItemValueAsString = (value: RadioGroupItemValue): string =>\n    value === undefined || value === null ? '' : String(value);\n\nexport const findByValue = (values: RadioGroupItemValue[], valueAsString: string): RadioGroupItemValue | undefined =>\n    values.find(value => getRadioGroupItemValueAsString(value) === valueAsString);\n\nconst RadioGroupContext = React.createContext({ disabled: false, invalid: false });\n\nexport type RadioGroupItemProps<T = HTMLButtonElement> = Omit<\n    React.ButtonHTMLAttributes<T>,\n    'children' | 'onSelect' | 'value'\n> & {\n    /** Label for the radio group item */\n    children: React.ReactNode;\n    /* Whether the radio group item is disabled */\n    disabled?: boolean;\n    /** Value of the radio button */\n    value: RadioGroupItemValue;\n};\n\nconst RadioGroupItem = React.forwardRef(function RadioGroupItem(props: RadioGroupItemProps, ref: React.Ref<HTMLButtonElement>) {\n    const context = React.useContext(RadioGroupContext);\n    const { children, value, ...otherProps } = props;\n\n    const disabled = context.disabled || props.disabled;\n\n    const className = cn('flex items-center justify-center h-4 w-4 mr-2 rounded-full bg-white border-2 ', {\n        'border-grey-dark focus:border-blue focus:yt-focus aria-checked:bg-blue aria-checked:border-blue':\n            !disabled && !context.invalid,\n        'border-grey cursor-not-allowed aria-checked:bg-grey-dark aria-checked:border-grey-dark': disabled,\n        'border-red text-red focus:border-red focus:yt-focus-red aria-checked:bg-red aria-checked:border-red':\n            context.invalid && !disabled,\n    });\n    const labelClassName = cn('flex items-center cursor-pointer', {\n        'cursor-not-allowed text-grey-dark': disabled,\n    });\n\n    return (\n        <label className={labelClassName}>\n            <RadioGroupPrimitive.Item\n                {...otherProps}\n                className={className}\n                disabled={disabled}\n                ref={ref}\n                value={getRadioGroupItemValueAsString(value)}\n            >\n                <RadioGroupPrimitive.Indicator className=\"h-2 w-2 rounded-full bg-white\" />\n            </RadioGroupPrimitive.Item>\n            {children}\n        </label>\n    );\n});\n\ntype RadioGroupBaseProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children' | 'defaultValue' | 'onChange' | 'value'> & {\n    children: React.ReactElement<RadioGroupItemProps>[];\n    /* Whether the radio group is disabled */\n    disabled?: boolean;\n    /* Whether the radio group is in an invalid state */\n    invalid?: boolean;\n    /** The name of the radio group, used when submitting an HTML form */\n    name?: string;\n    /**\n     * Orientation of the radio group\n     * @defaultValue vertical\n     */\n    orientation?: Orientation;\n    /* Whether the radio group requires user input */\n    required?: boolean;\n};\n\ninterface UncontrolledRadioGroupProps extends RadioGroupBaseProps {\n    /* The default value (uncontrolled) */\n    defaultValue?: RadioGroupItemValue;\n    onChange?: never;\n    value?: never;\n}\n\ninterface ControlledRadioGroupProps extends RadioGroupBaseProps {\n    defaultValue?: never;\n    /** Handler called when the value changes */\n    onChange: (value: RadioGroupItemValue) => void;\n    /** The current value (controlled) */\n    value: RadioGroupItemValue;\n}\n\nexport type RadioGroupProps = UncontrolledRadioGroupProps | ControlledRadioGroupProps;\n\nexport type ForwardedRadioGroupWithStatics = React.ForwardRefExoticComponent<\n    RadioGroupProps & React.RefAttributes<HTMLDivElement>\n> & {\n    /** Item component rendered in a `RadioGroup` component */\n    Item: React.ForwardRefExoticComponent<RadioGroupItemProps>;\n};\n\nexport const useRadioGroup = (props: RadioGroupProps) => {\n    const { children, defaultValue, disabled, invalid, onChange, orientation = 'vertical', value, ...otherProps } = props;\n\n    const values = React.useMemo<RadioGroupItemValue[]>(\n        () => React.Children.map(children, (child: React.ReactElement<RadioGroupItemProps>) => child.props.value) ?? [],\n        [children]\n    );\n\n    const context = React.useMemo(() => ({ disabled: disabled ?? false, invalid: invalid ?? false }), [disabled, invalid]);\n\n    let valueProps;\n\n    if (defaultValue) {\n        valueProps = {\n            defaultValue: getRadioGroupItemValueAsString(defaultValue) || undefined,\n        };\n    } else {\n        const handleChange = onChange ? (value: string): void => onChange(findByValue(values, value)) : undefined;\n\n        valueProps = {\n            onValueChange: handleChange,\n            value: getRadioGroupItemValueAsString(value) || undefined,\n        };\n    }\n\n    return {\n        context,\n        props: {\n            ...otherProps,\n            ...valueProps,\n            children,\n            orientation,\n        },\n    };\n};\n\nexport const RadioGroup = React.forwardRef(function RadioGroup(props: RadioGroupProps, ref: React.Ref<HTMLDivElement>) {\n    const { context, props: otherProps } = useRadioGroup(props);\n    const className = cn(\n        'flex items-start',\n        {\n            'flex-wrap space-x-4': props.orientation === 'horizontal',\n            'flex-col space-y-2': props.orientation === 'vertical',\n        },\n        props.className\n    );\n\n    return (\n        <RadioGroupContext.Provider value={context}>\n            <RadioGroupPrimitive.Root {...otherProps} className={className} data-taco=\"radio-group\" ref={ref} />\n        </RadioGroupContext.Provider>\n    );\n}) as ForwardedRadioGroupWithStatics;\nRadioGroup.Item = RadioGroupItem;\n"],"names":["getRadioGroupItemValueAsString","value","undefined","String","findByValue","values","valueAsString","find","RadioGroupContext","React","disabled","invalid","RadioGroupItem","props","ref","context","children","otherProps","className","cn","labelClassName","RadioGroupPrimitive","useRadioGroup","defaultValue","onChange","orientation","map","child","valueProps","handleChange","onValueChange","RadioGroup","Provider","Item"],"mappings":"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"}
+{"version":3,"file":"RadioGroup.js","sources":["../../../../../src/components/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport * as RadioGroupPrimitive from '@radix-ui/react-radio-group';\nimport { Orientation } from '../../types';\n\nexport type RadioGroupItemValue = string | number | boolean | null;\n\nexport const getRadioGroupItemValueAsString = (value: RadioGroupItemValue): string => (value === null ? '' : String(value));\n\nexport const findByValue = (values: RadioGroupItemValue[], valueAsString: string): RadioGroupItemValue =>\n    values.find(value => getRadioGroupItemValueAsString(value) === valueAsString) as RadioGroupItemValue;\n\nconst RadioGroupContext = React.createContext({ disabled: false, invalid: false });\n\nexport type RadioGroupItemProps<T = HTMLButtonElement> = Omit<\n    React.ButtonHTMLAttributes<T>,\n    'children' | 'onSelect' | 'value'\n> & {\n    /** Label for the radio group item */\n    children: React.ReactNode;\n    /* Whether the radio group item is disabled */\n    disabled?: boolean;\n    /** Value of the radio button */\n    value: RadioGroupItemValue;\n};\n\nconst RadioGroupItem = React.forwardRef(function RadioGroupItem(props: RadioGroupItemProps, ref: React.Ref<HTMLButtonElement>) {\n    const context = React.useContext(RadioGroupContext);\n    const { children, value, ...otherProps } = props;\n\n    const disabled = context.disabled || props.disabled;\n\n    const className = cn('flex items-center justify-center h-4 w-4 mr-2 rounded-full bg-white border-2 ', {\n        'border-grey-dark focus:border-blue focus:yt-focus aria-checked:bg-blue aria-checked:border-blue':\n            !disabled && !context.invalid,\n        'border-grey cursor-not-allowed aria-checked:bg-grey-dark aria-checked:border-grey-dark': disabled,\n        'border-red text-red focus:border-red focus:yt-focus-red aria-checked:bg-red aria-checked:border-red':\n            context.invalid && !disabled,\n    });\n    const labelClassName = cn('flex items-center cursor-pointer', {\n        'cursor-not-allowed text-grey-dark': disabled,\n    });\n\n    return (\n        <label className={labelClassName}>\n            <RadioGroupPrimitive.Item\n                {...otherProps}\n                className={className}\n                disabled={disabled}\n                ref={ref}\n                value={getRadioGroupItemValueAsString(value)}\n            >\n                <RadioGroupPrimitive.Indicator className=\"h-2 w-2 rounded-full bg-white\" />\n            </RadioGroupPrimitive.Item>\n            {children}\n        </label>\n    );\n});\n\ntype RadioGroupBaseProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children' | 'defaultValue' | 'onChange' | 'value'> & {\n    children: React.ReactElement<RadioGroupItemProps>[];\n    /* Whether the radio group is disabled */\n    disabled?: boolean;\n    /* Whether the radio group is in an invalid state */\n    invalid?: boolean;\n    /** The name of the radio group, used when submitting an HTML form */\n    name?: string;\n    /**\n     * Orientation of the radio group\n     * @defaultValue vertical\n     */\n    orientation?: Orientation;\n    /* Whether the radio group requires user input */\n    required?: boolean;\n};\n\ninterface UncontrolledRadioGroupProps extends RadioGroupBaseProps {\n    /* The default value (uncontrolled) */\n    defaultValue?: RadioGroupItemValue;\n    onChange?: never;\n    value?: never;\n}\n\ninterface ControlledRadioGroupProps extends RadioGroupBaseProps {\n    defaultValue?: never;\n    /** Handler called when the value changes */\n    onChange: (value: RadioGroupItemValue) => void;\n    /** The current value (controlled) */\n    value?: RadioGroupItemValue;\n}\n\nexport type RadioGroupProps = UncontrolledRadioGroupProps | ControlledRadioGroupProps;\n\nexport type ForwardedRadioGroupWithStatics = React.ForwardRefExoticComponent<\n    RadioGroupProps & React.RefAttributes<HTMLDivElement>\n> & {\n    /** Item component rendered in a `RadioGroup` component */\n    Item: React.ForwardRefExoticComponent<RadioGroupItemProps>;\n};\n\nexport const useRadioGroup = (props: RadioGroupProps) => {\n    const { children, defaultValue, disabled, invalid, onChange, orientation = 'vertical', value, ...otherProps } = props;\n\n    const values = React.useMemo<RadioGroupItemValue[]>(() => {\n        const radioGroupItemValues: RadioGroupItemValue[] = [];\n\n        React.Children.forEach(children, (child: React.ReactElement<RadioGroupItemProps>) =>\n            radioGroupItemValues.push(child.props.value)\n        );\n\n        return radioGroupItemValues;\n    }, [children]);\n\n    const context = React.useMemo(() => ({ disabled: disabled ?? false, invalid: invalid ?? false }), [disabled, invalid]);\n\n    let valueProps;\n\n    if (onChange !== undefined) {\n        const handleChange = (value: string): void => onChange(findByValue(values, value));\n\n        valueProps = {\n            onValueChange: handleChange,\n            value: value !== undefined ? getRadioGroupItemValueAsString(value) : undefined,\n        };\n    } else {\n        valueProps = {\n            defaultValue: defaultValue !== undefined ? getRadioGroupItemValueAsString(defaultValue) : undefined,\n        };\n    }\n\n    return {\n        context,\n        props: {\n            ...otherProps,\n            ...valueProps,\n            children,\n            orientation,\n        },\n    };\n};\n\nexport const RadioGroup = React.forwardRef(function RadioGroup(props: RadioGroupProps, ref: React.Ref<HTMLDivElement>) {\n    const { context, props: otherProps } = useRadioGroup(props);\n    const className = cn(\n        'flex items-start',\n        {\n            'flex-wrap space-x-4': otherProps.orientation === 'horizontal',\n            'flex-col space-y-2': otherProps.orientation === 'vertical',\n        },\n        otherProps.className\n    );\n\n    return (\n        <RadioGroupContext.Provider value={context}>\n            <RadioGroupPrimitive.Root {...otherProps} className={className} data-taco=\"radio-group\" ref={ref} />\n        </RadioGroupContext.Provider>\n    );\n}) as ForwardedRadioGroupWithStatics;\nRadioGroup.Item = RadioGroupItem;\n"],"names":["getRadioGroupItemValueAsString","value","String","findByValue","values","valueAsString","find","RadioGroupContext","React","disabled","invalid","RadioGroupItem","props","ref","context","children","otherProps","className","cn","labelClassName","RadioGroupPrimitive","useRadioGroup","defaultValue","onChange","orientation","radioGroupItemValues","forEach","child","push","valueProps","undefined","handleChange","onValueChange","RadioGroup","Provider","Item"],"mappings":"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"}

package/dist/esm/src/components/Select/Select.js

@@ -3,7 +3,7 @@ import { forwardRef, createElement, useRef, useEffect, Fragment } from 'react';
 import cn from 'classnames';
 import { Icon } from '../Icon/Icon.js';
 import { Badge } from '../Badge/Badge.js';
-import { PopoverDisclosure, Popover } from 'reakit/Popover';
+import { Root, Trigger, Content } from '@radix-ui/react-popover';
 import { getInputClasses } from '../Input/util.js';
 import { useBoundingClientRectListener } from '../../utils/hooks/useBoundingClientRectListener.js';
 import { Combobox } from '../Combobox/Combobox.js';
@@ -11,8 +11,7 @@ import { MultiListbox, Listbox } from '../Listbox/Listbox.js';
 import { useSelect } from './useSelect.js';
 
 var _excluded = ["autoFocus", "className", "highlighted", "style"],
-    _excluded2 = ["container"],
-    _excluded3 = ["editable"];
+    _excluded2 = ["editable"];
 var BaseSelect = /*#__PURE__*/forwardRef(function BaseSelect(props, ref) {
   var autoFocus = props.autoFocus,
       externalClassName = props.className,
@@ -23,19 +22,19 @@ var BaseSelect = /*#__PURE__*/forwardRef(function BaseSelect(props, ref) {
       button = _useSelect.button,
       listbox = _useSelect.listbox,
       popover = _useSelect.popover,
+      input = _useSelect.input,
       text = _useSelect.text,
       _useSelect$more = _useSelect.more,
       more = _useSelect$more === void 0 ? 0 : _useSelect$more;
 
-  var container = popover.container,
-      base = _objectWithoutPropertiesLoose(popover, _excluded2);
-
   var internalRef = useRef(null);
   var selectDimensions = useBoundingClientRectListener(internalRef);
   var className = cn('inline-flex relative w-full', {
     'yt-select--readonly': props.readOnly
   }, externalClassName);
-  var inputClassname = cn(getInputClasses(props), 'text-left pr-0');
+  var inputClassname = cn(getInputClasses(props), 'text-left pr-0', {
+    'border-blue': popover.open
+  });
   useEffect(function () {
     if (autoFocus && internalRef.current) {
       internalRef.current.focus();
@@ -43,7 +42,9 @@ var BaseSelect = /*#__PURE__*/forwardRef(function BaseSelect(props, ref) {
   }, []);
 
   var renderMultiSelection = function renderMultiSelection() {
-    return createElement(Fragment, null, createElement("span", null, text), more > 0 && createElement(Badge, {
+    return createElement(Fragment, null, createElement("span", {
+      className: "flex-grow truncate text-left"
+    }, text), more > 0 && createElement(Badge, {
       className: "ml-2"
     }, "+" + more));
   };
@@ -53,34 +54,34 @@ var BaseSelect = /*#__PURE__*/forwardRef(function BaseSelect(props, ref) {
     style: {
       minWidth: selectDimensions === null || selectDimensions === void 0 ? void 0 : selectDimensions.width
     },
-    tabIndex: popover.visible ? 0 : -1
+    tabIndex: popover.open ? 0 : -1
   });
 
   return createElement("span", {
     className: className,
     "data-taco": "select",
     style: style
-  }, createElement(PopoverDisclosure, Object.assign({}, base, {
+  }, createElement(Root, Object.assign({}, popover), createElement(Trigger, Object.assign({}, button, {
+    className: inputClassname,
     ref: internalRef
-  }), function (_ref) {
-    var disclosureRef = _ref.ref;
-    return createElement("button", Object.assign({
-      ref: disclosureRef
-    }, button, {
-      className: inputClassname
-    }), props.multiselect ? renderMultiSelection() : createElement("span", {
-      className: "flex-grow"
-    }, text), createElement("span", {
-      className: "flex h-8 w-8 items-center justify-center"
-    }, createElement(Icon, {
-      className: "group-hover:text-grey-darkest text-black",
-      name: popover.visible ? 'chevron-up' : 'chevron-down'
-    })));
-  }), !otherProps.disabled && createElement(Popover, Object.assign({}, base, container), props.multiselect ? createElement(MultiListbox, Object.assign({}, commonListboxProps)) : createElement(Listbox, Object.assign({}, commonListboxProps))));
+  }), props.multiselect ? renderMultiSelection() : createElement("span", {
+    className: "flex-grow truncate text-left"
+  }, text), createElement("span", {
+    className: "flex h-8 w-8 items-center justify-center"
+  }, createElement(Icon, {
+    className: "pointer-events-none",
+    name: popover.open ? 'chevron-up' : 'chevron-down'
+  }))), createElement(Content, {
+    align: "start",
+    sideOffset: 4
+  }, props.multiselect ? createElement(MultiListbox, Object.assign({}, commonListboxProps)) : createElement(Listbox, Object.assign({}, commonListboxProps))), createElement("input", Object.assign({}, input, {
+    className: "hidden",
+    type: "text"
+  }))));
 });
 var Select = /*#__PURE__*/forwardRef(function Select(props, ref) {
   var editable = props.editable,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded3);
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded2);
 
   if (editable) {
     return createElement(Combobox, Object.assign({}, otherProps, {

package/dist/esm/src/components/Select/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sources":["../../../../../src/components/Select/Select.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport { Popover as BasePopover, PopoverDisclosure } from 'reakit/Popover';\n\nimport { Icon } from '../Icon/Icon';\nimport { Listbox, MultiListbox, ListboxProps } from '../Listbox/Listbox';\nimport { useBoundingClientRectListener } from '../../utils/hooks/useBoundingClientRectListener';\nimport { useSelect } from './useSelect';\nimport { Combobox, ComboboxProps } from '../Combobox/Combobox';\nimport './Select.css';\nimport { Badge } from '../Badge/Badge';\nimport { getInputClasses } from '../Input/util';\n\nexport type SelectTexts = {\n    /**\n     * The text displayed when all options are selected when multiselect mode in on.\n     */\n    allOptionsSelected: string;\n};\n\nexport type BaseSelectProps = ListboxProps &\n    Omit<ComboboxProps, 'inline'> & {\n        /**\n         * Allows to select multiple values.\n         * All the selected values will be combined in a comma-seperated string as the value of the input.\n         */\n        multiselect?: boolean;\n        /** Optionally shows the icon for the selected option */\n        showSelectedIcon?: boolean;\n    };\n\nexport type SelectProps = BaseSelectProps & {\n    /**\n     * Creates an editable select.\n     * Setting this will render a inline Combobox which will display the provided data on click/focus,\n     * even if there is no value in the input.\n     * After user starts typing, matching data will be displayed.\n     */\n    editable?: boolean;\n};\n\nconst BaseSelect = React.forwardRef(function BaseSelect(props: BaseSelectProps, ref: React.Ref<HTMLInputElement>) {\n    const { autoFocus, className: externalClassName, highlighted, style, ...otherProps } = props;\n    const { button, listbox, popover, text, more = 0 } = useSelect(otherProps, ref);\n    const { container, ...base } = popover;\n    const internalRef = React.useRef<HTMLButtonElement>(null);\n    const selectDimensions = useBoundingClientRectListener(internalRef);\n    const className = cn('inline-flex relative w-full', { 'yt-select--readonly': props.readOnly }, externalClassName);\n    const inputClassname = cn(getInputClasses(props), 'text-left pr-0');\n\n    React.useEffect(() => {\n        if (autoFocus && internalRef.current) {\n            internalRef.current.focus();\n        }\n    }, []);\n\n    const renderMultiSelection = (): React.ReactNode => {\n        return (\n            <>\n                <span>{text}</span>\n                {more > 0 && <Badge className=\"ml-2\">{`+${more}`}</Badge>}\n            </>\n        );\n    };\n\n    const commonListboxProps = {\n        ...listbox,\n        className: 'w-auto',\n        style: { minWidth: selectDimensions?.width },\n        tabIndex: popover.visible ? 0 : -1,\n    };\n\n    return (\n        <span className={className} data-taco=\"select\" style={style}>\n            <PopoverDisclosure {...base} ref={internalRef}>\n                {({ ref: disclosureRef }) => (\n                    <button ref={disclosureRef} {...button} className={inputClassname}>\n                        {props.multiselect ? renderMultiSelection() : <span className=\"flex-grow\">{text}</span>}\n                        <span className=\"flex h-8 w-8 items-center justify-center\">\n                            <Icon\n                                className=\"group-hover:text-grey-darkest text-black\"\n                                name={popover.visible ? 'chevron-up' : 'chevron-down'}\n                            />\n                        </span>\n                    </button>\n                )}\n            </PopoverDisclosure>\n            {!otherProps.disabled && (\n                <BasePopover {...base} {...container}>\n                    {props.multiselect ? <MultiListbox {...commonListboxProps} /> : <Listbox {...commonListboxProps} />}\n                </BasePopover>\n            )}\n        </span>\n    );\n});\n\nexport const Select = React.forwardRef(function Select(props: SelectProps, ref: React.Ref<HTMLInputElement>) {\n    const { editable, ...otherProps } = props;\n\n    if (editable) {\n        return <Combobox {...otherProps} inline ref={ref} />;\n    }\n\n    return <BaseSelect {...otherProps} ref={ref} />;\n});\n"],"names":["BaseSelect","React","props","ref","autoFocus","externalClassName","className","style","otherProps","useSelect","button","listbox","popover","text","more","container","base","internalRef","selectDimensions","useBoundingClientRectListener","cn","readOnly","inputClassname","getInputClasses","current","focus","renderMultiSelection","Badge","commonListboxProps","minWidth","width","tabIndex","visible","PopoverDisclosure","disclosureRef","multiselect","Icon","name","disabled","BasePopover","MultiListbox","Listbox","Select","editable","Combobox","inline"],"mappings":"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"}
+{"version":3,"file":"Select.js","sources":["../../../../../src/components/Select/Select.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\nimport { Icon } from '../Icon/Icon';\nimport { Listbox, MultiListbox, ListboxProps } from '../Listbox/Listbox';\nimport { useBoundingClientRectListener } from '../../utils/hooks/useBoundingClientRectListener';\nimport { useSelect } from './useSelect';\nimport { Combobox, ComboboxProps } from '../Combobox/Combobox';\nimport { Badge } from '../Badge/Badge';\nimport { getInputClasses } from '../Input/util';\n\nexport type SelectTexts = {\n    /**\n     * The text displayed when all options are selected when multiselect mode in on.\n     */\n    allOptionsSelected: string;\n};\n\nexport type BaseSelectProps = ListboxProps &\n    Omit<ComboboxProps, 'inline'> & {\n        /**\n         * Allows to select multiple values.\n         * All the selected values will be combined in a comma-seperated string as the value of the input.\n         */\n        multiselect?: boolean;\n    };\n\nexport type SelectProps = BaseSelectProps & {\n    /**\n     * Creates an editable select.\n     * Setting this will render a inline Combobox which will display the provided data on click/focus,\n     * even if there is no value in the input.\n     * After user starts typing, matching data will be displayed.\n     */\n    editable?: boolean;\n};\n\nconst BaseSelect = React.forwardRef(function BaseSelect(props: BaseSelectProps, ref: React.Ref<HTMLInputElement>) {\n    const { autoFocus, className: externalClassName, highlighted, style, ...otherProps } = props;\n    const { button, listbox, popover, input, text, more = 0 } = useSelect(otherProps, ref);\n    const internalRef = React.useRef<HTMLButtonElement>(null);\n    const selectDimensions = useBoundingClientRectListener(internalRef);\n    const className = cn('inline-flex relative w-full', { 'yt-select--readonly': props.readOnly }, externalClassName);\n    const inputClassname = cn(getInputClasses(props), 'text-left pr-0', {\n        'border-blue': popover.open,\n    });\n\n    React.useEffect(() => {\n        if (autoFocus && internalRef.current) {\n            internalRef.current.focus();\n        }\n    }, []);\n\n    const renderMultiSelection = (): React.ReactNode => {\n        return (\n            <>\n                <span className=\"flex-grow truncate text-left\">{text}</span>\n                {more > 0 && <Badge className=\"ml-2\">{`+${more}`}</Badge>}\n            </>\n        );\n    };\n\n    const commonListboxProps = {\n        ...listbox,\n        className: 'w-auto',\n        style: { minWidth: selectDimensions?.width },\n        tabIndex: popover.open ? 0 : -1,\n    };\n\n    return (\n        <span className={className} data-taco=\"select\" style={style}>\n            <PopoverPrimitive.Root {...popover}>\n                <PopoverPrimitive.Trigger {...button} className={inputClassname} ref={internalRef}>\n                    {props.multiselect ? renderMultiSelection() : <span className=\"flex-grow truncate text-left\">{text}</span>}\n                    <span className=\"flex h-8 w-8 items-center justify-center\">\n                        <Icon className=\"pointer-events-none\" name={popover.open ? 'chevron-up' : 'chevron-down'} />\n                    </span>\n                </PopoverPrimitive.Trigger>\n                <PopoverPrimitive.Content align=\"start\" sideOffset={4}>\n                    {props.multiselect ? <MultiListbox {...commonListboxProps} /> : <Listbox {...commonListboxProps} />}\n                </PopoverPrimitive.Content>\n                <input {...input} className=\"hidden\" type=\"text\" />\n            </PopoverPrimitive.Root>\n        </span>\n    );\n});\n\nexport const Select = React.forwardRef(function Select(props: SelectProps, ref: React.Ref<HTMLInputElement>) {\n    const { editable, ...otherProps } = props;\n\n    if (editable) {\n        return <Combobox {...otherProps} inline ref={ref} />;\n    }\n\n    return <BaseSelect {...otherProps} ref={ref} />;\n});\n"],"names":["BaseSelect","React","props","ref","autoFocus","externalClassName","className","style","otherProps","useSelect","button","listbox","popover","input","text","more","internalRef","selectDimensions","useBoundingClientRectListener","cn","readOnly","inputClassname","getInputClasses","open","current","focus","renderMultiSelection","Badge","commonListboxProps","minWidth","width","tabIndex","PopoverPrimitive","multiselect","Icon","name","align","sideOffset","MultiListbox","Listbox","type","Select","editable","Combobox","inline"],"mappings":"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"}