@economic/taco 0.0.28-alpha.0 → 0.0.30-alpha.0

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

@@ -1 +1 @@
-{"version":3,"file":"Dialog.js","sources":["../../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport * as DialogPrimitive from '@radix-ui/react-dialog';\r\nimport './Dialog.css';\r\nimport { DialogTriggerProps, Trigger } from './components/Trigger';\r\nimport {\r\n    Content,\r\n    Title,\r\n    Footer,\r\n    Close,\r\n    DialogContentProps,\r\n    DialogContentRenderProps,\r\n    DialogContentDrawerRenderProps,\r\n    DialogTitleProps,\r\n    DialogFooterProps,\r\n    DialogCloseProps,\r\n} from './components/Content';\r\nimport { DialogDrawerProps, DialogDrawerRenderProps, Drawer } from './components/Drawer';\r\nimport { DialogExtraProps, Extra } from './components/Extra';\r\nimport { DialogContext } from './Context';\r\nimport { DialogSize } from './types';\r\n\r\nexport {\r\n    DialogCloseProps,\r\n    DialogContentDrawerRenderProps,\r\n    DialogContentProps,\r\n    DialogContentRenderProps,\r\n    DialogDrawerProps,\r\n    DialogDrawerRenderProps,\r\n    DialogFooterProps,\r\n    DialogSize,\r\n    DialogTitleProps,\r\n};\r\n\r\nexport type DialogTexts = {\r\n    /**\r\n     * Aria-label for close icon button in dialog.\r\n     * To read more about how to provide the text, see [Provider](component:provider) component\r\n     */\r\n    close: string;\r\n    drag: string;\r\n};\r\n\r\nexport type DialogProps = {\r\n    children: React.ReactNode | React.ReactNode[];\r\n    /** When `true`, pressing escape will close the dialog */\r\n    closeOnEscape?: boolean;\r\n    /** Set whether the dialog is open by default or not, use when not providing a trigger  */\r\n    defaultOpen?: boolean;\r\n    /** Allows dragging the dialog around the screen (window constrained) */\r\n    draggable?: boolean;\r\n    /** Handler called when dialog closes by user interaction */\r\n    onClose?: () => void;\r\n    /** Called when the dialog opens or closes, must be used in conjunction with open  */\r\n    onChange?: (open: boolean) => void;\r\n    /** Control the open state of the dialog from outside the component  */\r\n    open?: boolean;\r\n    /** Shows the close icon button of the dialog */\r\n    showCloseButton?: boolean;\r\n    /** Size of the dialog. This is the recommended way to set a size for dialog component. */\r\n    size?: DialogSize;\r\n    /** A trigger to be used for the dialog, should not be set if `children` already contains a trigger */\r\n    trigger?: JSX.Element;\r\n};\r\n\r\nconst useSeparatedChildren = initialChildren => {\r\n    return React.useMemo(() => {\r\n        const children: any[] = [];\r\n        let drawer;\r\n        let extra;\r\n\r\n        React.Children.toArray(initialChildren).forEach((child: any) => {\r\n            if (child.type?.displayName === Drawer.displayName) {\r\n                drawer = child;\r\n            } else if (child.type?.displayName === Extra.displayName) {\r\n                extra = child;\r\n            } else {\r\n                children.push(child);\r\n            }\r\n        });\r\n\r\n        return [children, drawer, extra];\r\n    }, [initialChildren]);\r\n};\r\n\r\nexport type ForwardedDialogWithStatics = React.ForwardRefExoticComponent<DialogProps & React.RefAttributes<HTMLElement>> & {\r\n    Trigger: React.ForwardRefExoticComponent<DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;\r\n    Content: React.ForwardRefExoticComponent<DialogContentProps & React.RefAttributes<HTMLDivElement>>;\r\n    Title: React.ForwardRefExoticComponent<DialogTitleProps & React.RefAttributes<HTMLHeadingElement>>;\r\n    Footer: React.ForwardRefExoticComponent<DialogFooterProps & React.RefAttributes<HTMLDivElement>>;\r\n    Extra: React.ForwardRefExoticComponent<DialogExtraProps & React.RefAttributes<HTMLDivElement>>;\r\n    Drawer: React.ForwardRefExoticComponent<DialogDrawerProps & React.RefAttributes<HTMLDivElement>>;\r\n    Close: React.ForwardRefExoticComponent<DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;\r\n};\r\n\r\nexport const Dialog = React.forwardRef(function Dialog(props: DialogProps, ref: React.Ref<HTMLElement>) {\r\n    const {\r\n        children: initialChildren,\r\n        closeOnEscape = true,\r\n        defaultOpen,\r\n        draggable = false,\r\n        onChange,\r\n        onClose,\r\n        open,\r\n        showCloseButton = true,\r\n        size = 'sm',\r\n        trigger,\r\n        ...otherProps\r\n    } = props;\r\n    const [children, drawer, extra] = useSeparatedChildren(initialChildren);\r\n    const [drawerOpen, setDrawerOpen] = React.useState(false);\r\n\r\n    const context = React.useMemo(\r\n        () => ({\r\n            closeOnEscape,\r\n            draggable,\r\n            drawer: {\r\n                open: drawerOpen,\r\n                toggle: () => setDrawerOpen(isDrawerOpen => !isDrawerOpen),\r\n            },\r\n            elements: {\r\n                drawer,\r\n                extra,\r\n            },\r\n            onClose,\r\n            props: otherProps,\r\n            showCloseButton,\r\n            size,\r\n            ref,\r\n        }),\r\n        [closeOnEscape, drawerOpen, draggable, drawer, extra, open, otherProps, showCloseButton]\r\n    );\r\n\r\n    return (\r\n        <DialogContext.Provider value={context}>\r\n            <DialogPrimitive.Root defaultOpen={defaultOpen} open={open} onOpenChange={onChange}>\r\n                {trigger && <Trigger>{trigger}</Trigger>}\r\n                {children}\r\n            </DialogPrimitive.Root>\r\n        </DialogContext.Provider>\r\n    );\r\n}) as ForwardedDialogWithStatics;\r\n\r\nDialog.Trigger = Trigger;\r\nDialog.Content = Content;\r\nDialog.Title = Title;\r\nDialog.Footer = Footer;\r\nDialog.Extra = Extra;\r\nDialog.Drawer = Drawer;\r\nDialog.Close = Close;\r\n"],"names":["useSeparatedChildren","initialChildren","React","children","drawer","extra","toArray","forEach","child","type","displayName","Drawer","Extra","push","Dialog","props","ref","closeOnEscape","defaultOpen","draggable","onChange","onClose","open","showCloseButton","size","trigger","otherProps","drawerOpen","setDrawerOpen","context","toggle","isDrawerOpen","elements","DialogContext","Provider","value","DialogPrimitive","onOpenChange","Trigger","Content","Title","Footer","Close"],"mappings":"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"}
+{"version":3,"file":"Dialog.js","sources":["../../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport * as DialogPrimitive from '@radix-ui/react-dialog';\r\nimport './Dialog.css';\r\nimport { DialogTriggerProps, Trigger } from './components/Trigger';\r\nimport {\r\n    Content,\r\n    Title,\r\n    Footer,\r\n    Close,\r\n    DialogContentProps,\r\n    DialogContentRenderProps,\r\n    DialogContentDrawerRenderProps,\r\n    DialogTitleProps,\r\n    DialogFooterProps,\r\n    DialogCloseProps,\r\n} from './components/Content';\r\nimport { DialogDrawerProps, DialogDrawerRenderProps, Drawer } from './components/Drawer';\r\nimport { DialogExtraProps, Extra } from './components/Extra';\r\nimport { DialogContext } from './Context';\r\nimport { DialogSize } from './types';\r\n\r\nexport {\r\n    DialogCloseProps,\r\n    DialogContentDrawerRenderProps,\r\n    DialogContentProps,\r\n    DialogContentRenderProps,\r\n    DialogDrawerProps,\r\n    DialogDrawerRenderProps,\r\n    DialogFooterProps,\r\n    DialogSize,\r\n    DialogTitleProps,\r\n};\r\n\r\nexport type DialogTexts = {\r\n    /**\r\n     * Aria-label for close icon button in dialog.\r\n     * To read more about how to provide the text, see [Provider](component:provider) component\r\n     */\r\n    close: string;\r\n    drag: string;\r\n};\r\n\r\nexport type DialogProps = {\r\n    children: React.ReactNode | React.ReactNode[];\r\n    /** When `true`, pressing escape will close the dialog */\r\n    closeOnEscape?: boolean;\r\n    /** Set whether the dialog is open by default or not, use when not providing a trigger  */\r\n    defaultOpen?: boolean;\r\n    /** Allows dragging the dialog around the screen (window constrained) */\r\n    draggable?: boolean;\r\n    /** Handler called when dialog closes by user interaction */\r\n    onClose?: () => void;\r\n    /** Called when the dialog opens or closes, must be used in conjunction with open  */\r\n    onChange?: (open: boolean) => void;\r\n    /** Control the open state of the dialog from outside the component  */\r\n    open?: boolean;\r\n    /** Shows the close icon button of the dialog */\r\n    showCloseButton?: boolean;\r\n    /** Size of the dialog. This is the recommended way to set a size for dialog component. */\r\n    size?: DialogSize;\r\n    /** A trigger to be used for the dialog, should not be set if `children` already contains a trigger */\r\n    trigger?: JSX.Element;\r\n};\r\n\r\nconst useSeparatedChildren = initialChildren => {\r\n    return React.useMemo(() => {\r\n        const children: any[] = [];\r\n        let drawer;\r\n        let extra;\r\n\r\n        React.Children.toArray(initialChildren).forEach((child: any) => {\r\n            if (child.type?.displayName === Drawer.displayName) {\r\n                drawer = child;\r\n            } else if (child.type?.displayName === Extra.displayName) {\r\n                extra = child;\r\n            } else {\r\n                children.push(child);\r\n            }\r\n        });\r\n\r\n        return [children, drawer, extra];\r\n    }, [initialChildren]);\r\n};\r\n\r\nexport type ForwardedDialogWithStatics = React.ForwardRefExoticComponent<DialogProps & React.RefAttributes<HTMLElement>> & {\r\n    Trigger: React.ForwardRefExoticComponent<DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;\r\n    Content: React.ForwardRefExoticComponent<DialogContentProps & React.RefAttributes<HTMLDivElement>>;\r\n    Title: React.ForwardRefExoticComponent<DialogTitleProps & React.RefAttributes<HTMLHeadingElement>>;\r\n    Footer: React.ForwardRefExoticComponent<DialogFooterProps & React.RefAttributes<HTMLDivElement>>;\r\n    Extra: React.ForwardRefExoticComponent<DialogExtraProps & React.RefAttributes<HTMLDivElement>>;\r\n    Drawer: React.ForwardRefExoticComponent<DialogDrawerProps & React.RefAttributes<HTMLDivElement>>;\r\n    Close: React.ForwardRefExoticComponent<DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;\r\n};\r\n\r\nexport const Dialog = React.forwardRef(function Dialog(props: DialogProps, ref: React.Ref<HTMLElement>) {\r\n    const {\r\n        children: initialChildren,\r\n        closeOnEscape = true,\r\n        defaultOpen,\r\n        draggable = false,\r\n        onChange,\r\n        onClose,\r\n        open,\r\n        showCloseButton = true,\r\n        size = 'sm',\r\n        trigger,\r\n        ...otherProps\r\n    } = props;\r\n    const [children, drawer, extra] = useSeparatedChildren(initialChildren);\r\n    const [drawerOpen, setDrawerOpen] = React.useState(false);\r\n\r\n    const context = React.useMemo(\r\n        () => ({\r\n            closeOnEscape,\r\n            draggable,\r\n            drawer: {\r\n                open: drawerOpen,\r\n                toggle: () => setDrawerOpen(isDrawerOpen => !isDrawerOpen),\r\n            },\r\n            elements: {\r\n                drawer,\r\n                extra,\r\n            },\r\n            onClose,\r\n            props: otherProps,\r\n            showCloseButton,\r\n            size,\r\n            ref,\r\n        }),\r\n        [closeOnEscape, drawerOpen, draggable, drawer, extra, open, otherProps, showCloseButton]\r\n    );\r\n\r\n    return (\r\n        <DialogContext.Provider value={context}>\r\n            <DialogPrimitive.Root defaultOpen={defaultOpen} open={open} onOpenChange={onChange}>\r\n                {trigger && <Trigger>{trigger}</Trigger>}\r\n                {children}\r\n            </DialogPrimitive.Root>\r\n        </DialogContext.Provider>\r\n    );\r\n}) as ForwardedDialogWithStatics;\r\n\r\nDialog.Trigger = Trigger;\r\nDialog.Content = Content;\r\nDialog.Title = Title;\r\nDialog.Footer = Footer;\r\nDialog.Extra = Extra;\r\nDialog.Drawer = Drawer;\r\nDialog.Close = Close;\r\n"],"names":["useSeparatedChildren","initialChildren","React","children","drawer","extra","toArray","forEach","child","type","displayName","Drawer","Extra","push","Dialog","props","ref","closeOnEscape","defaultOpen","draggable","onChange","onClose","open","showCloseButton","size","trigger","otherProps","drawerOpen","setDrawerOpen","context","toggle","isDrawerOpen","elements","DialogContext","Provider","value","DialogPrimitive","onOpenChange","Trigger","Content","Title","Footer","Close"],"mappings":"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"}

package/dist/esm/components/Field/Field.js

@@ -1,23 +1,22 @@
+import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { forwardRef, createElement } from 'react';
 import cn from 'classnames';
 
-const Field = /*#__PURE__*/forwardRef(function Field(props, ref) {
-  const {
-    disabled,
-    children,
-    message,
-    state,
-    ...otherProps
-  } = props;
-  const className = cn('flex flex-col font-bold text-xs leading-loose pb-4 min-h-[theme(spacing.18)]', {
+var _excluded = ["disabled", "children", "invalid", "message"];
+var Field = /*#__PURE__*/forwardRef(function Field(props, ref) {
+  var disabled = props.disabled,
+      children = props.children,
+      _props$invalid = props.invalid,
+      invalid = _props$invalid === void 0 ? false : _props$invalid,
+      message = props.message,
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded);
+
+  var className = cn('flex flex-col font-bold text-xs leading-loose pb-4 min-h-[theme(spacing.18)]', {
     'text-grey-dark': disabled
   }, props.className);
-  const messageClassName = cn('h-4 text-xs text-left leading-normal font-normal truncate -mb-4', {
-    'text-grey-darkest': !state || state === 'default',
-    'text-red': state === 'error',
-    'text-green': state === 'success',
-    'text-blue': state === 'information',
-    'text-yellow-dark': state === 'warning',
+  var messageClassName = cn('h-4 text-xs text-left leading-normal font-normal truncate -mb-4', {
+    'text-grey-darkest': !invalid,
+    'text-red': invalid,
     'opacity-50': disabled
   }, props.className);
   return createElement("label", Object.assign({}, otherProps, {
@@ -26,7 +25,7 @@ const Field = /*#__PURE__*/forwardRef(function Field(props, ref) {
     ref: ref
   }), children, message && createElement("span", {
     className: messageClassName,
-    role: state === 'error' ? 'alert' : undefined
+    role: invalid ? 'alert' : undefined
   }, message));
 });
 

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

@@ -1 +1 @@
-{"version":3,"file":"Field.js","sources":["../../../../src/components/Field/Field.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport cn from 'classnames';\r\n\r\nimport { State } from '../../types';\r\nimport './Field.css';\r\n\r\nexport type FieldProps = React.LabelHTMLAttributes<HTMLLabelElement> & {\r\n    /** Content of the field */\r\n    children: React.ReactNode;\r\n    /**\tChanges the style to indicate the element is disabled */\r\n    disabled?: boolean;\r\n    /**\r\n     * Text displayed below the children of Field.\r\n     * Should be a short text that indicates feedback for user.\r\n     */\r\n    message?: string;\r\n    /** State will change the style of the field */\r\n    state?: State;\r\n};\r\n\r\nexport const Field = React.forwardRef(function Field(props: FieldProps, ref: React.Ref<HTMLLabelElement>) {\r\n    const { disabled, children, message, state, ...otherProps } = props;\r\n    const className = cn(\r\n        'flex flex-col font-bold text-xs leading-loose pb-4 min-h-[theme(spacing.18)]',\r\n        {\r\n            'text-grey-dark': disabled,\r\n        },\r\n        props.className\r\n    );\r\n    const messageClassName = cn(\r\n        'h-4 text-xs text-left leading-normal font-normal truncate -mb-4',\r\n        {\r\n            'text-grey-darkest': !state || state === 'default',\r\n            'text-red': state === 'error',\r\n            'text-green': state === 'success',\r\n            'text-blue': state === 'information',\r\n            'text-yellow-dark': state === 'warning',\r\n            'opacity-50': disabled,\r\n        },\r\n        props.className\r\n    );\r\n\r\n    return (\r\n        <label {...otherProps} className={className} data-taco=\"label\" ref={ref}>\r\n            {children}\r\n            {message && (\r\n                <span className={messageClassName} role={state === 'error' ? 'alert' : undefined}>\r\n                    {message}\r\n                </span>\r\n            )}\r\n        </label>\r\n    );\r\n});\r\n"],"names":["Field","React","props","ref","disabled","children","message","state","otherProps","className","cn","messageClassName","role","undefined"],"mappings":";;;MAoBaA,KAAK,gBAAGC,UAAA,CAAiB,SAASD,KAAT,CAAeE,KAAf,EAAkCC,GAAlC;AAClC,QAAM;AAAEC,IAAAA,QAAF;AAAYC,IAAAA,QAAZ;AAAsBC,IAAAA,OAAtB;AAA+BC,IAAAA,KAA/B;AAAsC,OAAGC;AAAzC,MAAwDN,KAA9D;AACA,QAAMO,SAAS,GAAGC,EAAE,CAChB,8EADgB,EAEhB;AACI,sBAAkBN;AADtB,GAFgB,EAKhBF,KAAK,CAACO,SALU,CAApB;AAOA,QAAME,gBAAgB,GAAGD,EAAE,CACvB,iEADuB,EAEvB;AACI,yBAAqB,CAACH,KAAD,IAAUA,KAAK,KAAK,SAD7C;AAEI,gBAAYA,KAAK,KAAK,OAF1B;AAGI,kBAAcA,KAAK,KAAK,SAH5B;AAII,iBAAaA,KAAK,KAAK,aAJ3B;AAKI,wBAAoBA,KAAK,KAAK,SALlC;AAMI,kBAAcH;AANlB,GAFuB,EAUvBF,KAAK,CAACO,SAViB,CAA3B;AAaA,SACIR,aAAA,QAAA,oBAAWO;AAAYC,IAAAA,SAAS,EAAEA;iBAAqB;AAAQN,IAAAA,GAAG,EAAEA;IAApE,EACKE,QADL,EAEKC,OAAO,IACJL,aAAA,OAAA;AAAMQ,IAAAA,SAAS,EAAEE;AAAkBC,IAAAA,IAAI,EAAEL,KAAK,KAAK,OAAV,GAAoB,OAApB,GAA8BM;GAAvE,EACKP,OADL,CAHR,CADJ;AAUH,CAhCoB;;;;"}
+{"version":3,"file":"Field.js","sources":["../../../../src/components/Field/Field.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport cn from 'classnames';\r\n\r\nimport './Field.css';\r\n\r\nexport type FieldProps = React.LabelHTMLAttributes<HTMLLabelElement> & {\r\n    /** Content of the field */\r\n    children: React.ReactNode;\r\n    /**\tChanges the style to indicate the element is disabled */\r\n    disabled?: boolean;\r\n    /* Whether the input is in an invalid state */\r\n    invalid?: boolean;\r\n    /**\r\n     * Text displayed below the children of Field.\r\n     * Should be a short text that indicates feedback for user.\r\n     */\r\n    message?: string;\r\n};\r\n\r\nexport const Field = React.forwardRef(function Field(props: FieldProps, ref: React.Ref<HTMLLabelElement>) {\r\n    const { disabled, children, invalid = false, message, ...otherProps } = props;\r\n    const className = cn(\r\n        'flex flex-col font-bold text-xs leading-loose pb-4 min-h-[theme(spacing.18)]',\r\n        {\r\n            'text-grey-dark': disabled,\r\n        },\r\n        props.className\r\n    );\r\n    const messageClassName = cn(\r\n        'h-4 text-xs text-left leading-normal font-normal truncate -mb-4',\r\n        {\r\n            'text-grey-darkest': !invalid,\r\n            'text-red': invalid,\r\n            'opacity-50': disabled,\r\n        },\r\n        props.className\r\n    );\r\n\r\n    return (\r\n        <label {...otherProps} className={className} data-taco=\"label\" ref={ref}>\r\n            {children}\r\n            {message && (\r\n                <span className={messageClassName} role={invalid ? 'alert' : undefined}>\r\n                    {message}\r\n                </span>\r\n            )}\r\n        </label>\r\n    );\r\n});\r\n"],"names":["Field","React","props","ref","disabled","children","invalid","message","otherProps","className","cn","messageClassName","role","undefined"],"mappings":";;;;;IAmBaA,KAAK,gBAAGC,UAAA,CAAiB,SAASD,KAAT,CAAeE,KAAf,EAAkCC,GAAlC;AAClC,MAAQC,QAAR,GAAwEF,KAAxE,CAAQE,QAAR;AAAA,MAAkBC,QAAlB,GAAwEH,KAAxE,CAAkBG,QAAlB;AAAA,uBAAwEH,KAAxE,CAA4BI,OAA5B;AAAA,MAA4BA,OAA5B,+BAAsC,KAAtC;AAAA,MAA6CC,OAA7C,GAAwEL,KAAxE,CAA6CK,OAA7C;AAAA,MAAyDC,UAAzD,iCAAwEN,KAAxE;;AACA,MAAMO,SAAS,GAAGC,EAAE,CAChB,8EADgB,EAEhB;AACI,sBAAkBN;AADtB,GAFgB,EAKhBF,KAAK,CAACO,SALU,CAApB;AAOA,MAAME,gBAAgB,GAAGD,EAAE,CACvB,iEADuB,EAEvB;AACI,yBAAqB,CAACJ,OAD1B;AAEI,gBAAYA,OAFhB;AAGI,kBAAcF;AAHlB,GAFuB,EAOvBF,KAAK,CAACO,SAPiB,CAA3B;AAUA,SACIR,aAAA,QAAA,oBAAWO;AAAYC,IAAAA,SAAS,EAAEA;iBAAqB;AAAQN,IAAAA,GAAG,EAAEA;IAApE,EACKE,QADL,EAEKE,OAAO,IACJN,aAAA,OAAA;AAAMQ,IAAAA,SAAS,EAAEE;AAAkBC,IAAAA,IAAI,EAAEN,OAAO,GAAG,OAAH,GAAaO;GAA7D,EACKN,OADL,CAHR,CADJ;AAUH,CA7BoB;;;;"}

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

@@ -9,8 +9,8 @@ const Input = /*#__PURE__*/forwardRef(function Input(props, ref) {
     button,
     icon,
     highlighted,
+    invalid,
     onKeyDown,
-    state,
     autoFocus,
     ...otherProps
   } = props;
@@ -54,7 +54,7 @@ const Input = /*#__PURE__*/forwardRef(function Input(props, ref) {
 
       const disabled = (_button$props$disable = button.props.disabled) !== null && _button$props$disable !== void 0 ? _button$props$disable : otherProps.disabled;
       const buttonClassName = cn('items-center flex justify-center border absolute rounded-l-none rounded-r right-0 h-full focus:rounded focus:outline-none', {
-        [getButtonStateClasses(state)]: !props.disabled
+        [getButtonStateClasses(invalid)]: !props.disabled
       }, button.props.className);
       extra = cloneElement(button, {
         className: buttonClassName,

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

@@ -1 +1 @@
-{"version":3,"file":"Input.js","sources":["../../../../src/components/Input/Input.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport cn from 'classnames';\r\nimport { State } from '../../types';\r\nimport { Icon, IconName } from '../Icon/Icon';\r\nimport { useProxiedRef } from '../../utils/hooks/useProxiedRef';\r\nimport { getButtonStateClasses, getInputClasses } from './util';\r\n\r\nexport type InputProps = React.InputHTMLAttributes<HTMLInputElement> & {\r\n    /** Shows a button within the input field */\r\n    button?: React.ReactElement;\r\n    /** Shows an icon within the input field  */\r\n    icon?: IconName | JSX.Element;\r\n    /** Draws attention to the input by changing its style and making it visually prominent */\r\n    highlighted?: boolean;\r\n    /** State will change the style of the input **/\r\n    state?: State;\r\n};\r\n\r\nexport const Input = React.forwardRef(function Input(props: InputProps, ref: React.Ref<HTMLInputElement>) {\r\n    const { button, icon, highlighted, onKeyDown, state, autoFocus, ...otherProps } = props;\r\n    const inputRef = useProxiedRef<HTMLInputElement>(ref);\r\n    const hasContainer = button || icon;\r\n    const className = cn(\r\n        getInputClasses(props),\r\n        'min-h-[theme(spacing.8)] pointer-events-all',\r\n        {\r\n            'pr-8': !!hasContainer,\r\n        },\r\n        !hasContainer && otherProps.className\r\n    );\r\n\r\n    React.useEffect(() => {\r\n        if (autoFocus && inputRef.current) {\r\n            inputRef.current.focus();\r\n        }\r\n    }, []);\r\n\r\n    // home and end keys only navigate to the start/end of input value if the input container does not scroll\r\n    // if it has scroll height then the browser reverts to native scrolling behaviour only\r\n    // so we manually override it to ensure _our_ desired behaviour remains intact\r\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\r\n        if (event.key === 'Home' || event.key === 'End') {\r\n            event.preventDefault();\r\n            const position = event.key === 'End' ? event.currentTarget.value.length : 0;\r\n            event.currentTarget.setSelectionRange(position, position);\r\n        }\r\n\r\n        if (onKeyDown) {\r\n            onKeyDown(event);\r\n        }\r\n    };\r\n\r\n    const input = <input {...otherProps} className={className} data-taco=\"input\" onKeyDown={handleKeyDown} ref={inputRef} />;\r\n\r\n    if (hasContainer) {\r\n        let extra: any;\r\n\r\n        if (button) {\r\n            const disabled = button.props.disabled ?? otherProps.disabled;\r\n            const buttonClassName = cn(\r\n                'items-center flex justify-center border absolute rounded-l-none rounded-r right-0 h-full focus:rounded focus:outline-none',\r\n                {\r\n                    [getButtonStateClasses(state)]: !props.disabled,\r\n                },\r\n                button.props.className\r\n            );\r\n            extra = React.cloneElement(button, {\r\n                className: buttonClassName,\r\n                disabled,\r\n            });\r\n        } else if (icon) {\r\n            const iconClassName = cn(\r\n                'items-center flex justify-center absolute pointer-events-none mr-1 p-px right-0 w-5 top-1/2 -translate-y-1/2',\r\n                {\r\n                    'text-grey-dark': props.disabled,\r\n                    'text-grey-darkest': !props.disabled,\r\n                }\r\n            );\r\n            extra =\r\n                typeof icon === 'string' ? (\r\n                    <Icon className={iconClassName} name={icon} />\r\n                ) : (\r\n                    React.cloneElement(icon, { className: cn(iconClassName, icon.props.className) })\r\n                );\r\n        }\r\n\r\n        const containerClassName = cn('bg-white inline-flex relative rounded w-full', otherProps.className);\r\n\r\n        return (\r\n            <div className={containerClassName} data-taco=\"input-container\">\r\n                {input}\r\n                {extra}\r\n            </div>\r\n        );\r\n    }\r\n\r\n    return input;\r\n});\r\n"],"names":["Input","React","props","ref","button","icon","highlighted","onKeyDown","state","autoFocus","otherProps","inputRef","useProxiedRef","hasContainer","className","cn","getInputClasses","current","focus","handleKeyDown","event","key","preventDefault","position","currentTarget","value","length","setSelectionRange","input","extra","disabled","buttonClassName","getButtonStateClasses","iconClassName","Icon","name","containerClassName"],"mappings":"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"}
+{"version":3,"file":"Input.js","sources":["../../../../src/components/Input/Input.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport cn from 'classnames';\r\nimport { Icon, IconName } from '../Icon/Icon';\r\nimport { useProxiedRef } from '../../utils/hooks/useProxiedRef';\r\nimport { getButtonStateClasses, getInputClasses } from './util';\r\n\r\nexport type InputProps = React.InputHTMLAttributes<HTMLInputElement> & {\r\n    /** Shows a button within the input field */\r\n    button?: React.ReactElement;\r\n    /** Shows an icon within the input field  */\r\n    icon?: IconName | JSX.Element;\r\n    /** Draws attention to the input 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\r\nexport const Input = React.forwardRef(function Input(props: InputProps, ref: React.Ref<HTMLInputElement>) {\r\n    const { button, icon, highlighted, invalid, onKeyDown, autoFocus, ...otherProps } = props;\r\n    const inputRef = useProxiedRef<HTMLInputElement>(ref);\r\n    const hasContainer = button || icon;\r\n    const className = cn(\r\n        getInputClasses(props),\r\n        'min-h-[theme(spacing.8)] pointer-events-all',\r\n        {\r\n            'pr-8': !!hasContainer,\r\n        },\r\n        !hasContainer && otherProps.className\r\n    );\r\n\r\n    React.useEffect(() => {\r\n        if (autoFocus && inputRef.current) {\r\n            inputRef.current.focus();\r\n        }\r\n    }, []);\r\n\r\n    // home and end keys only navigate to the start/end of input value if the input container does not scroll\r\n    // if it has scroll height then the browser reverts to native scrolling behaviour only\r\n    // so we manually override it to ensure _our_ desired behaviour remains intact\r\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\r\n        if (event.key === 'Home' || event.key === 'End') {\r\n            event.preventDefault();\r\n            const position = event.key === 'End' ? event.currentTarget.value.length : 0;\r\n            event.currentTarget.setSelectionRange(position, position);\r\n        }\r\n\r\n        if (onKeyDown) {\r\n            onKeyDown(event);\r\n        }\r\n    };\r\n\r\n    const input = <input {...otherProps} className={className} data-taco=\"input\" onKeyDown={handleKeyDown} ref={inputRef} />;\r\n\r\n    if (hasContainer) {\r\n        let extra: any;\r\n\r\n        if (button) {\r\n            const disabled = button.props.disabled ?? otherProps.disabled;\r\n            const buttonClassName = cn(\r\n                'items-center flex justify-center border absolute rounded-l-none rounded-r right-0 h-full focus:rounded focus:outline-none',\r\n                {\r\n                    [getButtonStateClasses(invalid)]: !props.disabled,\r\n                },\r\n                button.props.className\r\n            );\r\n            extra = React.cloneElement(button, {\r\n                className: buttonClassName,\r\n                disabled,\r\n            });\r\n        } else if (icon) {\r\n            const iconClassName = cn(\r\n                'items-center flex justify-center absolute pointer-events-none mr-1 p-px right-0 w-5 top-1/2 -translate-y-1/2',\r\n                {\r\n                    'text-grey-dark': props.disabled,\r\n                    'text-grey-darkest': !props.disabled,\r\n                }\r\n            );\r\n            extra =\r\n                typeof icon === 'string' ? (\r\n                    <Icon className={iconClassName} name={icon} />\r\n                ) : (\r\n                    React.cloneElement(icon, { className: cn(iconClassName, icon.props.className) })\r\n                );\r\n        }\r\n\r\n        const containerClassName = cn('bg-white inline-flex relative rounded w-full', otherProps.className);\r\n\r\n        return (\r\n            <div className={containerClassName} data-taco=\"input-container\">\r\n                {input}\r\n                {extra}\r\n            </div>\r\n        );\r\n    }\r\n\r\n    return input;\r\n});\r\n"],"names":["Input","React","props","ref","button","icon","highlighted","invalid","onKeyDown","autoFocus","otherProps","inputRef","useProxiedRef","hasContainer","className","cn","getInputClasses","current","focus","handleKeyDown","event","key","preventDefault","position","currentTarget","value","length","setSelectionRange","input","extra","disabled","buttonClassName","getButtonStateClasses","iconClassName","Icon","name","containerClassName"],"mappings":"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"}

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

@@ -4,47 +4,19 @@ 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,
-    [getStateClasses(props.state)]: !props.disabled,
     'bg-[rgba(255,255,0,0.075)]': props.highlighted && props.disabled,
-    'bg-[rgba(255,255,0,0.2)]': 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 getStateClasses = value => {
-  switch (value) {
-    case 'success':
-      return 'border-green hover:shadow-[0_0_0.15rem_theme(colors.green.DEFAULT)] focus:border-green-light focus:yt-focus-green active:border-green-dark';
-
-    case 'error':
-      return 'border-red hover:shadow-[0_0_0.15rem_theme(colors.red.DEFAULT)] focus:border-red-light focus:yt-focus-red active:border-red-dark';
-
-    case 'warning':
-      return 'border-yellow-dark hover:shadow-[0_0_0.15rem_theme(colors.yellow.dark)] focus:yt-focus-yellow active:border-yellow-dark';
-
-    case 'information':
-      return 'border-blue hover:shadow-[0_0_0.15rem_theme(colors.blue.dark)] focus:border-blue-light focus:yt-focus active:border-blue-dark';
-
-    default:
-      return 'border-grey-dark hover:shadow-[0_0_0.1rem_theme(colors.grey.darker)] focus:border-blue-light focus:yt-focus active:border-blue-dark';
+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';
   }
-};
-const getButtonStateClasses = value => {
-  switch (value) {
-    case 'success':
-      return '!border-green focus:!border-green-light focus:yt-focus-green peer-focus:!border-green-light peer-focus:peer-active:!border-green-dark';
 
-    case 'error':
-      return '!border-red focus:!border-red-light focus:yt-focus-red peer-focus:!border-red-light peer-focus:peer-active:!border-red-dark';
-
-    case 'warning':
-      return '!border-yellow-dark focus:!border-yellow-dark focus:yt-focus-yellow peer-focus:peer-active:!border-yellow-dark';
-
-    case 'information':
-      return '!border-blue focus:!border-blue-light peer-focus:!border-blue-light peer-focus:peer-active:!border-blue-dark';
-
-    default:
-      return '!border-grey-dark focus:!border-blue-light peer-focus:!border-blue-light peer-focus:peer-active:!border-blue-dark';
-  }
+  return '!border-grey-dark focus:!border-blue-light peer-focus:!border-blue-light peer-focus:peer-active:!border-blue-dark';
 };
 
-export { getButtonStateClasses, getInputClasses, getStateClasses };
+export { getButtonStateClasses, getInputClasses };
 //# sourceMappingURL=util.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"util.js","sources":["../../../../src/components/Input/util.ts"],"sourcesContent":["import cn from 'classnames';\r\nimport { State } from '../../types';\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            [getStateClasses(props.state)]: !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        }\r\n    );\r\n};\r\n\r\nexport const getStateClasses = (value: State | undefined): string => {\r\n    switch (value) {\r\n        case 'success':\r\n            return 'border-green hover:shadow-[0_0_0.15rem_theme(colors.green.DEFAULT)] focus:border-green-light focus:yt-focus-green active:border-green-dark';\r\n\r\n        case 'error':\r\n            return '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\r\n        case 'warning':\r\n            return 'border-yellow-dark hover:shadow-[0_0_0.15rem_theme(colors.yellow.dark)] focus:yt-focus-yellow active:border-yellow-dark';\r\n\r\n        case 'information':\r\n            return 'border-blue hover:shadow-[0_0_0.15rem_theme(colors.blue.dark)] focus:border-blue-light focus:yt-focus active:border-blue-dark';\r\n\r\n        default:\r\n            return '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    }\r\n};\r\n\r\nexport const getButtonStateClasses = (value: State | undefined): string => {\r\n    switch (value) {\r\n        case 'success':\r\n            return '!border-green focus:!border-green-light focus:yt-focus-green peer-focus:!border-green-light peer-focus:peer-active:!border-green-dark';\r\n\r\n        case 'error':\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        case 'warning':\r\n            return '!border-yellow-dark focus:!border-yellow-dark focus:yt-focus-yellow peer-focus:peer-active:!border-yellow-dark';\r\n\r\n        case 'information':\r\n            return '!border-blue focus:!border-blue-light peer-focus:!border-blue-light peer-focus:peer-active:!border-blue-dark';\r\n\r\n        default:\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};\r\n"],"names":["getInputClasses","props","cn","readOnly","disabled","getStateClasses","state","highlighted","value","getButtonStateClasses"],"mappings":";;MAGaA,eAAe,GAAGC,KAAK;AAChC,SAAOC,EAAE,CACL,gKADK,EAEL;AACI,6CAAyCD,KAAK,CAACE,QADnD;AAEI,sDAAkDF,KAAK,CAACG,QAF5D;AAGI,KAACC,eAAe,CAACJ,KAAK,CAACK,KAAP,CAAhB,GAAgC,CAACL,KAAK,CAACG,QAH3C;AAII,kCAA8BH,KAAK,CAACM,WAAN,IAAqBN,KAAK,CAACG,QAJ7D;AAKI,gCAA4BH,KAAK,CAACM,WAAN,IAAqB,CAACN,KAAK,CAACG;AAL5D,GAFK,CAAT;AAUH;MAEYC,eAAe,GAAIG,KAAD;AAC3B,UAAQA,KAAR;AACI,SAAK,SAAL;AACI,aAAO,4IAAP;;AAEJ,SAAK,OAAL;AACI,aAAO,kIAAP;;AAEJ,SAAK,SAAL;AACI,aAAO,yHAAP;;AAEJ,SAAK,aAAL;AACI,aAAO,+HAAP;;AAEJ;AACI,aAAO,qIAAP;AAdR;AAgBH;MAEYC,qBAAqB,GAAID,KAAD;AACjC,UAAQA,KAAR;AACI,SAAK,SAAL;AACI,aAAO,uIAAP;;AAEJ,SAAK,OAAL;AACI,aAAO,6HAAP;;AAEJ,SAAK,SAAL;AACI,aAAO,gHAAP;;AAEJ,SAAK,aAAL;AACI,aAAO,8GAAP;;AAEJ;AACI,aAAO,mHAAP;AAdR;AAgBH;;;;"}
+{"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;AAChC,SAAOC,EAAE,CACL,gKADK,EAEL;AACI,6CAAyCD,KAAK,CAACE,QADnD;AAEI,sDAAkDF,KAAK,CAACG,QAF5D;AAGI,kCAA8BH,KAAK,CAACI,WAAN,IAAqBJ,KAAK,CAACG,QAH7D;AAII,gCAA4BH,KAAK,CAACI,WAAN,IAAqB,CAACJ,KAAK,CAACG,QAJ5D;AAKI,2IACI,CAACH,KAAK,CAACK,OANf;AAOI,wIACIL,KAAK,CAACK;AARd,GAFK,CAAT;AAaH;MAEYC,qBAAqB,GAAID,OAAD;AACjC,MAAIA,OAAJ,EAAa;AACT,WAAO,6HAAP;AACH;;AAED,SAAO,mHAAP;AACH;;;;"}

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

@@ -1 +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\nimport { State } from '../../types';\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        /**\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        /** State will change the style of the listbox */\r\n        state?: State;\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","className","externalClassName","otherProps","list","input","useListbox","cn","ScrollableList","style","maxHeight","type","MultiListbox","useMultiListbox"],"mappings":";;;;;;MAwDaA,OAAO,gBAAGC,UAAA,CAAiB,SAASD,OAAT,CAAiBE,KAAjB,EAAsCC,GAAtC;AACpC,QAAM;AAAEC,IAAAA,SAAS,EAAEC,iBAAb;AAAgC,OAAGC;AAAnC,MAAkDJ,KAAxD;AACA,QAAM;AAAEK,IAAAA,IAAF;AAAQC,IAAAA;AAAR,MAAkBC,UAAU,CAACH,UAAD,EAAaH,GAAb,CAAlC;AACA,QAAMC,SAAS,GAAGM,EAAE,CAAC,sCAAD,EAAyCL,iBAAzC,CAApB;AAEA,SACIJ,aAAA,OAAA;iBAAgB;AAAUG,IAAAA,SAAS,EAAEA;GAArC,EACIH,aAAA,CAACU,cAAD,oBACQJ;AACJK,IAAAA,KAAK,EAAE,EAAE,GAAGL,IAAI,CAACK,KAAV;AAAiBC,MAAAA,SAAS,EAAE;AAAoB;;AAAhD;IAFX,CADJ,EAKIZ,aAAA,QAAA,oBAAWO;AAAOJ,IAAAA,SAAS,EAAC;AAASU,IAAAA,IAAI,EAAC;IAA1C,CALJ,CADJ;AASH,CAdsB;MAgBVC,YAAY,gBAAGd,UAAA,CAAiB,SAASD,OAAT,CAAiBE,KAAjB,EAAsCC,GAAtC;AACzC,QAAM;AAAEC,IAAAA,SAAS,EAAEC,iBAAb;AAAgC,OAAGC;AAAnC,MAAkDJ,KAAxD;AACA,QAAM;AAAEK,IAAAA,IAAF;AAAQC,IAAAA;AAAR,MAAkBQ,eAAe,CAACV,UAAD,EAAaH,GAAb,CAAvC;AACA,QAAMC,SAAS,GAAGM,EAAE,CAAC,sCAAD,EAAyCL,iBAAzC,CAApB;AAEA,SACIJ,aAAA,OAAA;iBAAgB;AAAUG,IAAAA,SAAS,EAAEA;GAArC,EACIH,aAAA,CAACU,cAAD,oBACQJ;AACJK,IAAAA,KAAK,EAAE,EACH,GAAGL,IAAI,CAACK,KADL;AAEHC,MAAAA,SAAS,EAAE;AAA0B;;AAFlC;IAFX,CADJ,EAQIZ,aAAA,QAAA,oBAAWO;AAAOJ,IAAAA,SAAS,EAAC;AAASU,IAAAA,IAAI,EAAC;IAA1C,CARJ,CADJ;AAYH,CAjB2B;;;;"}
+{"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","className","externalClassName","otherProps","list","input","useListbox","cn","ScrollableList","style","maxHeight","type","MultiListbox","useMultiListbox"],"mappings":";;;;;;MAuDaA,OAAO,gBAAGC,UAAA,CAAiB,SAASD,OAAT,CAAiBE,KAAjB,EAAsCC,GAAtC;AACpC,QAAM;AAAEC,IAAAA,SAAS,EAAEC,iBAAb;AAAgC,OAAGC;AAAnC,MAAkDJ,KAAxD;AACA,QAAM;AAAEK,IAAAA,IAAF;AAAQC,IAAAA;AAAR,MAAkBC,UAAU,CAACH,UAAD,EAAaH,GAAb,CAAlC;AACA,QAAMC,SAAS,GAAGM,EAAE,CAAC,sCAAD,EAAyCL,iBAAzC,CAApB;AAEA,SACIJ,aAAA,OAAA;iBAAgB;AAAUG,IAAAA,SAAS,EAAEA;GAArC,EACIH,aAAA,CAACU,cAAD,oBACQJ;AACJK,IAAAA,KAAK,EAAE,EAAE,GAAGL,IAAI,CAACK,KAAV;AAAiBC,MAAAA,SAAS,EAAE;AAAoB;;AAAhD;IAFX,CADJ,EAKIZ,aAAA,QAAA,oBAAWO;AAAOJ,IAAAA,SAAS,EAAC;AAASU,IAAAA,IAAI,EAAC;IAA1C,CALJ,CADJ;AASH,CAdsB;MAgBVC,YAAY,gBAAGd,UAAA,CAAiB,SAASD,OAAT,CAAiBE,KAAjB,EAAsCC,GAAtC;AACzC,QAAM;AAAEC,IAAAA,SAAS,EAAEC,iBAAb;AAAgC,OAAGC;AAAnC,MAAkDJ,KAAxD;AACA,QAAM;AAAEK,IAAAA,IAAF;AAAQC,IAAAA;AAAR,MAAkBQ,eAAe,CAACV,UAAD,EAAaH,GAAb,CAAvC;AACA,QAAMC,SAAS,GAAGM,EAAE,CAAC,sCAAD,EAAyCL,iBAAzC,CAApB;AAEA,SACIJ,aAAA,OAAA;iBAAgB;AAAUG,IAAAA,SAAS,EAAEA;GAArC,EACIH,aAAA,CAACU,cAAD,oBACQJ;AACJK,IAAAA,KAAK,EAAE,EACH,GAAGL,IAAI,CAACK,KADL;AAEHC,MAAAA,SAAS,EAAE;AAA0B;;AAFlC;IAFX,CADJ,EAQIZ,aAAA,QAAA,oBAAWO;AAAOJ,IAAAA,SAAS,EAAC;AAASU,IAAAA,IAAI,EAAC;IAA1C,CARJ,CADJ;AAYH,CAjB2B;;;;"}

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

@@ -30,6 +30,7 @@ const ScrollableList = /*#__PURE__*/forwardRef(function ScrollableList(props, re
     disabled,
     highlighted,
     id,
+    invalid: _,
     loading,
     onChange: setCurrentIndex,
     onClick,
@@ -37,7 +38,6 @@ const ScrollableList = /*#__PURE__*/forwardRef(function ScrollableList(props, re
     onKeyDown,
     readOnly,
     scrollOnFocus = false,
-    state,
     value: currentIndex,
     multiselect,
     selectedIndexes = [],

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

@@ -1 +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 { State } from '../../types';\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    /**\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    /** State will change the style of the scrollable list */\r\n    state?: State;\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        loading,\r\n        onChange: setCurrentIndex,\r\n        onClick,\r\n        onFocus,\r\n        onKeyDown,\r\n        readOnly,\r\n        scrollOnFocus = false,\r\n        state,\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 flex items-center justify-end overflow-visible 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","loading","onChange","setCurrentIndex","onClick","onFocus","onKeyDown","readOnly","scrollOnFocus","state","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":";;;;;;;;;;MA4FaA,KAAK,GAAG,CAACC,EAAD,EAAaC,KAAb,QAA2DD,MAAMC;;AAEtF,MAAMC,kBAAkB,GAAG,CACvBC,KADuB,EAEvBC,IAFuB,EAGvBC,KAHuB;AAKvB,QAAMC,SAAS,GAAGC,uBAAuB,CAACJ,KAAK,CAACK,OAAP,EAAgBJ,IAAI,CAACK,MAArB,EAA6BJ,KAA7B,CAAzC;;AAEA,MAAIC,SAAJ,EAAe;AACX,QAAIA,SAAS,KAAKD,KAAlB,EAAyB;AACrB,aAAOA,KAAP;AACH,KAFD,MAEO,IAAID,IAAI,CAACE,SAAD,CAAJ,IAAmBF,IAAI,CAACE,SAAD,CAAJ,CAAgBI,QAAvC,EAAiD;AACpD,aAAOR,kBAAkB,CAACC,KAAD,EAAQC,IAAR,EAAcE,SAAd,CAAzB;AACH;AACJ;;AAED,SAAOA,SAAP;AACH,CAhBD;;MAkBaK,cAAc,gBAAGC,UAAA,CAAiB,SAASD,cAAT,CAC3CE,KAD2C,EAE3CC,GAF2C;AAI3C,QAAM;AACFV,IAAAA,IADE;AAEFM,IAAAA,QAFE;AAGFK,IAAAA,WAHE;AAIFf,IAAAA,EAJE;AAKFgB,IAAAA,OALE;AAMFC,IAAAA,QAAQ,EAAEC,eANR;AAOFC,IAAAA,OAPE;AAQFC,IAAAA,OARE;AASFC,IAAAA,SATE;AAUFC,IAAAA,QAVE;AAWFC,IAAAA,aAAa,GAAG,KAXd;AAYFC,IAAAA,KAZE;AAaFvB,IAAAA,KAAK,EAAEwB,YAbL;AAcFC,IAAAA,WAdE;AAeFC,IAAAA,eAAe,GAAG,EAfhB;AAgBFC,IAAAA,kBAAkB,GAAG,KAhBnB;AAiBF,OAAGC;AAjBD,MAkBFhB,KAlBJ;AAmBA,QAAMiB,OAAO,GAAGC,aAAa,CAAmBjB,GAAnB,CAA7B;AACA,QAAMkB,QAAQ,GAAGpB,OAAA,CAAc,MAAMR,IAAI,CAAC6B,GAAL,CAAS,MAAMrB,SAAA,EAAf,CAApB,EAAsE,CAACR,IAAD,CAAtE,CAAjB;AACA,QAAM;AAAE8B,IAAAA;AAAF,MAAYC,eAAe,EAAjC;AACA,QAAM;AAAEC,IAAAA;AAAF,MAAeC,eAAe,CAACP,OAAD,EAAUE,QAAV,CAApC;AAEApB,EAAAA,SAAA,CAAgB;;;AACZ,QAAIa,YAAY,6BAAIO,QAAQ,CAACP,YAAD,CAAZ,kDAAI,sBAAwBa,OAA5C,EAAqD;AAAA;;AACjD,gCAAAN,QAAQ,CAACP,YAAD,CAAR,CAAuBa,OAAvB,kFAAgCC,cAAhC,CAA+C;AAC3CC,QAAAA,KAAK,EAAE;AADoC,OAA/C;AAGH;AACJ,GAND,EAMG,EANH;AAQA5B,EAAAA,SAAA,CAAgB;AACZwB,IAAAA,QAAQ,CAACX,YAAD,CAAR;AACH,GAFD,EAEG,CAACA,YAAD,CAFH;;AAIA,QAAMgB,aAAa,GAAItC,KAAD;AAClB,UAAMG,SAAS,GAAGJ,kBAAkB,CAACC,KAAD,EAAQC,IAAR,EAAcqB,YAAd,CAApC;;AAEA,QAAInB,SAAS,KAAKoC,SAAd,IAA2BpC,SAAS,KAAKmB,YAA7C,EAA2D;AACvDtB,MAAAA,KAAK,CAACwC,cAAN;AACAP,MAAAA,QAAQ,CAAC9B,SAAD,CAAR;AACAY,MAAAA,eAAe,CAACZ,SAAD,CAAf;AACH;;AAED,QAAIe,SAAJ,EAAe;AACXlB,MAAAA,KAAK,CAACyC,OAAN;AACA,YAAMvC,KAAK,GAAGC,SAAS,KAAKoC,SAAd,GAA0BpC,SAA1B,GAAsCmB,YAApD;AACAJ,MAAAA,SAAS,CAAClB,KAAD,EAAQE,KAAR,CAAT;AACH;AACJ,GAdD;;AAgBA,QAAMwC,WAAW,GAAIxC,KAAD,IAAoBF,KAAD;AACnCe,IAAAA,eAAe,CAACb,KAAD,CAAf;;AAEA,QAAIc,OAAJ,EAAa;AACThB,MAAAA,KAAK,CAACyC,OAAN;AACAzB,MAAAA,OAAO,CAAChB,KAAD,EAAQE,KAAR,CAAP;AACH;AACJ,GAPD;;AASA,QAAMyC,WAAW,GAAI3C,KAAD;AAChB,QAAIoB,aAAJ,EAAmB;AACfa,MAAAA,QAAQ,CAACX,YAAD,CAAR;AACH;;AAED,QAAIL,OAAJ,EAAa;AACTjB,MAAAA,KAAK,CAACyC,OAAN;AACAxB,MAAAA,OAAO,CAACjB,KAAD,CAAP;AACH;AACJ,GATD;;AAWA,QAAM4C,qBAAqB,GAAG,CAACC,WAAD,EAAsB3C,KAAtB;AAC1B,QAAI2C,WAAW,KAAK,eAApB,EAAqC;AACjC,aAAOpB,kBAAP;AACH,KAFD,MAEO,IAAI,CAACoB,WAAD,IAAgB,CAACrB,eAArB,EAAsC;AACzC,aAAO,KAAP;AACH,KAFM,MAEA;AACH,aAAOA,eAAe,CAACsB,SAAhB,CAA0BC,CAAC,IAAIA,CAAC,KAAK7C,KAArC,MAAgD,CAAC,CAAxD;AACH;AACJ,GARD;;AAUA,QAAM8C,IAAI,GAC+E,EACrF,GAAGtB,UADkF;AAErFuB,IAAAA,SAAS,EAAEC,EAAE,CACT,gEADS,EAETC,eAAe,CAACzC,KAAD,CAFN,EAGT;AACI,8BAAwBa,WAD5B;AAEI,6BAAuBhB,QAF3B;AAGI,4BAAsBA,QAAQ,IAAIY;AAHtC,KAHS,EAQTO,UAAU,CAACuB,SARF,CAFwE;AAYrF1C,IAAAA,QAZqF;AAarFV,IAAAA,EAbqF;AAcrFoB,IAAAA,OAAO,EAAE,CAACV,QAAD,IAAa,CAACY,QAAd,GAAyBwB,WAAzB,GAAuCJ,SAdqC;AAerFrB,IAAAA,SAAS,EAAE,CAACX,QAAD,IAAa,CAACY,QAAd,GAAyBmB,aAAzB,GAAyCC,SAfiC;AAgBrFpB,IAAAA,QAhBqF;AAiBrFR,IAAAA,GAAG,EAAEgB,OAjBgF;AAkBrFyB,IAAAA,IAAI,EAAE,SAlB+E;AAmBrFC,IAAAA,QAAQ,EAAE3B,UAAU,CAAC2B,QAAX,IAAuB;AAnBoD,GADzF;AAuBA,QAAMC,OAAO,GAAGrD,IAAI,CAAC6B,GAAL,CAAS,CAACyB,MAAD,EAASrD,KAAT;AACrB,UAAMsD,KAAK,GAAGD,MAAM,CAACE,IAAP,GAAcF,MAAM,CAACE,IAAP,CAAYC,KAAZ,CAAkB,GAAlB,EAAuBpD,MAAvB,GAAgC,CAA9C,GAAkD,CAAhE;AAEA,WAAO;AACH,uBAAiBiB,WAAW,GAAGqB,qBAAqB,CAACe,MAAM,CAACJ,MAAM,CAACzD,KAAR,CAAP,EAAuBI,KAAvB,CAAxB,GAAwDoB,YAAY,KAAKpB,KADlG;AAEH,sBAAgBoB,YAAY,KAAKpB,KAF9B;AAGH0D,MAAAA,QAAQ,EAAEL,MAAM,CAACM,IAHd;AAIHZ,MAAAA,SAAS,EAAEC,EAAE,CACT,yGADS,EAET;AACI,kCAA0BM,KAAK,KAAK,CAAV,IAAe,CAAC,CAACD,MAAM,CAACO;AADtD,OAFS,CAJV;AAUHvD,MAAAA,QAAQ,EAAEgD,MAAM,CAAChD,QAVd;AAWHwD,MAAAA,IAAI,EAAER,MAAM,CAACQ,IAXV;AAYHlE,MAAAA,EAAE,EAAED,KAAK,CAACC,EAAD,EAAK0D,MAAM,CAACzD,KAAZ,CAZN;AAaHkE,MAAAA,GAAG,EAAEpE,KAAK,CAACC,EAAD,EAAK0D,MAAM,CAACzD,KAAZ,CAbP;AAcHkB,MAAAA,OAAO,EAAE,CAACT,QAAD,IAAa,CAACY,QAAd,GAAyBuB,WAAW,CAACxC,KAAD,CAApC,GAA8CqC,SAdpD;AAeH5B,MAAAA,GAAG,EAAEkB,QAAQ,CAAC3B,KAAD,CAfV;AAgBHkD,MAAAA,IAAI,EAAE,QAhBH;AAiBHa,MAAAA,KAAK,EACDT,KAAK,GAAG,CAAR,GACM;AACIU,QAAAA,WAAW,KAAKV,KAAK,GAAG;AAD5B,OADN,GAIMjB;AAtBP,KAAP;AAwBH,GA3Be,CAAhB;AA6BA,SACI9B,aAAA,KAAA,oBAAQuC;iBAAgB;IAAxB,EACKnC,OAAO,GACJJ,aAAA,KAAA;AAAIwC,IAAAA,SAAS,EAAC;GAAd,EACIxC,aAAA,OAAA,MAAA,EACIA,aAAA,CAAC0D,OAAD;AAASC,IAAAA,KAAK,EAAE;GAAhB,CADJ,CADJ,EAII3D,aAAA,OAAA,MAAA,EAAOsB,KAAK,CAACsC,OAAN,CAAcxD,OAArB,CAJJ,CADI,GAOJyC,OAAO,CAAChD,MAAR,GACAgD,OAAO,CAACxB,GAAR,CAAY,CAAC;AAAE8B,IAAAA,QAAF;AAAYG,IAAAA,IAAZ;AAAkB,OAAGO;AAArB,GAAD,KACR7D,aAAA,KAAA,oBAAQ6D,YAAR,EACKP,IADL,EAEItD,aAAA,OAAA;AAAMwC,IAAAA,SAAS,EAAC;GAAhB,EAAgDW,QAAhD,CAFJ,EAGKrC,WAAW,IACRd,aAAA,CAAC8D,QAAD;AACIC,IAAAA,OAAO,EAAEF,WAAW,CAAC,eAAD;AACpBxD,IAAAA,QAAQ,EAAE,MAAM;AAChBmC,IAAAA,SAAS,EAAC;GAHd,CAJR,CADJ,CADA,GAeAxC,aAAA,KAAA;AAAIwC,IAAAA,SAAS,EAAC;GAAd,EACIxC,aAAA,OAAA,MAAA,EAAOsB,KAAK,CAACsC,OAAN,CAAcI,KAArB,CADJ,CAvBR,CADJ;AA8BH,CAxK6B;;;;"}
+{"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 flex items-center justify-end overflow-visible 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

@@ -10,6 +10,7 @@ const useListbox = ({
   disabled,
   emptyValue,
   id: nativeId,
+  invalid,
   name,
   onChange,
   onFocus,
@@ -119,6 +120,7 @@ const useListbox = ({
     data,
     disabled,
     id,
+    invalid,
     onChange: handleListboxChange,
     onFocus: handleListboxFocus,
     onKeyDown: handleListboxKeyDown,

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

@@ -1 +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        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        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 === undefined || value === null ? '' : value,\r\n    };\r\n\r\n    return { list, input };\r\n};\r\n"],"names":["useListbox","data","externalData","defaultValue","disabled","emptyValue","id","nativeId","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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"}
+{"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 === undefined || value === null ? '' : 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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"}

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

@@ -30,7 +30,7 @@ const BaseSelect = /*#__PURE__*/forwardRef(function BaseSelect(props, ref) {
   const className = cn('inline-flex relative w-full', {
     'yt-select--readonly': props.readOnly
   }, externalClassName);
-  const inputClassname = cn(getInputClasses(props), 'text-left pr-0', {
+  const inputClassname = cn(getInputClasses(props), 'h-8 text-left pr-0', {
     'border-blue': popover.open
   });
   useEffect(() => {
@@ -49,6 +49,7 @@ const BaseSelect = /*#__PURE__*/forwardRef(function BaseSelect(props, ref) {
 
   const commonListboxProps = { ...listbox,
     className: 'w-auto',
+    invalid: undefined,
     style: {
       minWidth: selectDimensions === null || selectDimensions === void 0 ? void 0 : selectDimensions.width
     },

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

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

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

@@ -41,7 +41,10 @@ const useSelect = ({
     }
   }, [defaultValue]);
   useEffect(() => {
-    if (value !== undefined) {
+    // If emptyValue is defined, then set emptyValue
+    if (emptyValue !== undefined && value === emptyValue) {
+      setInputValueByRef(internalInputRef.current, value);
+    } else if (value !== undefined && data.some(option => option.value === value)) {
       setInputValueByRef(internalInputRef.current, value);
     } else if (data.length && defaultValue === undefined) {
       setInputValueByRef(internalInputRef.current, data[0].value);