@economic/taco 2.30.2 → 2.31.0

package/dist/components/Table3/Table3.d.ts

@@ -12,11 +12,27 @@ declare namespace Group {
 export declare const Table3: (<TType = unknown>(props: (import("../..").TableClientProps<TType> & {
     enableEditing?: boolean | undefined;
     onSave?: import("./types").Table3EditingSaveHandler<TType> | undefined;
-    validator?: import("./types").Table3EditingValidatorFn<TType> | undefined;
+} & {
+    validator: import("./types").Table3EditingValidatorFn<TType>;
+    rowIdentityColumnId: string | string[] | undefined;
 } & React.RefAttributes<Table3Ref>) | (import("../..").TableServerProps<TType> & {
     enableEditing?: boolean | undefined;
     onSave?: import("./types").Table3EditingSaveHandler<TType> | undefined;
-    validator?: import("./types").Table3EditingValidatorFn<TType> | undefined;
+} & {
+    validator: import("./types").Table3EditingValidatorFn<TType>;
+    rowIdentityColumnId: string | string[] | undefined;
+} & React.RefAttributes<Table3Ref>) | (import("../..").TableClientProps<TType> & {
+    enableEditing?: boolean | undefined;
+    onSave?: import("./types").Table3EditingSaveHandler<TType> | undefined;
+} & {
+    validator?: undefined;
+    rowIdentityColumnId?: undefined;
+} & React.RefAttributes<Table3Ref>) | (import("../..").TableServerProps<TType> & {
+    enableEditing?: boolean | undefined;
+    onSave?: import("./types").Table3EditingSaveHandler<TType> | undefined;
+} & {
+    validator?: undefined;
+    rowIdentityColumnId?: undefined;
 } & React.RefAttributes<Table3Ref>)) => JSX.Element) & {
     Column: typeof Column;
     Group: typeof Group;

package/dist/components/Table3/types.d.ts

@@ -9,11 +9,19 @@ export declare type Table3EditingValidatorFn<TType = unknown> = (row: TType) =>
 export declare type Table3FeatureProps = TableFeatureProps & {
     enableEditing?: boolean;
 };
-export declare type Table3Props<TType = unknown> = TableProps<TType> & {
+declare type TableWithEditingProps<TType> = TableProps<TType> & {
     enableEditing?: boolean;
     onSave?: Table3EditingSaveHandler<TType>;
-    validator?: Table3EditingValidatorFn<TType>;
 };
+declare type TableWithValidationProps<TType> = TableWithEditingProps<TType> & {
+    validator: Table3EditingValidatorFn<TType>;
+    rowIdentityColumnId: Required<TableProps<TType>['rowIdentityColumnId']>;
+};
+declare type TableWithoutValidationProps<TType> = TableWithEditingProps<TType> & {
+    validator?: never;
+    rowIdentityColumnId?: never;
+};
+export declare type Table3Props<TType = unknown> = TableWithValidationProps<TType> | TableWithoutValidationProps<TType>;
 export declare type Table3ColumnProps<TType = unknown> = TableColumnProps<TType>;
 export declare type Table3GroupProps = TableGroupProps;
 export declare type Table3Texts = {
@@ -64,3 +72,4 @@ export declare type Table3Texts = {
         };
     };
 };
+export {};

package/dist/esm/packages/taco/src/components/Combobox/Combobox.js

@@ -42,7 +42,7 @@ const Combobox = /*#__PURE__*/forwardRef(function Combobox(props, ref) {
     ref: ref
   }), /*#__PURE__*/createElement(Input, Object.assign({}, input, {
     autoComplete: "off",
-    button: props.inline ? ( /*#__PURE__*/createElement(IconButton
+    button: props.readOnly ? undefined : props.inline ? ( /*#__PURE__*/createElement(IconButton
     // In case of inline combobox, this icon button acts only as visual chevron representation,
     // so should be taken out of screen reader scope.
     , {

package/dist/esm/packages/taco/src/components/Combobox/Combobox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Combobox.js","sources":["../../../../../../../src/components/Combobox/Combobox.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\nimport { Input, InputProps } from '../Input/Input';\nimport { useCombobox } from './useCombobox';\nimport { ScrollableList, ScrollableListItem, ScrollableListItemValue } from '../Listbox/ScrollableList';\nimport { useBoundingClientRectListener } from '../../hooks/useBoundingClientRectListener';\nimport { IconButton } from '../IconButton/IconButton';\nimport './Combobox.css';\nimport { DialogProps } from '../Dialog/Dialog';\nimport { useLocalization } from '../Provider/Localization';\n\nexport type ComboboxTexts = {\n    /* Tooltip shown for the dialog button */\n    tooltip: string;\n};\n\nexport type ComboboxItem = ScrollableListItem;\nexport type ComboboxValue = ScrollableListItemValue;\n\ntype ComboboxBaseProps = Omit<InputProps, 'defaultValue' | 'button' | 'onChange' | 'value'> & {\n    /** Array of options in combobox */\n    data?: ComboboxItem[];\n    /**\n     * Initial value of the input in combobox.\n     * This is used when combobox is mounted, if no value is provided.\n     * *Note* that combobox is a controlled component, setting this will also trigger the `onChange` event\n     */\n    defaultValue?: ComboboxValue;\n    /** Set what value should have an empty option in combobox */\n    emptyValue?: ComboboxValue;\n    /** Draws attention to the combobox by changing its style and making it visually prominent */\n    highlighted?: boolean;\n    /** Displays loading state in listbox */\n    loading?: boolean;\n    /**\n     * Handler called when user chooses an option from the provided suggestions.\n     * Suggestions will be calculated based on the input value.\n     * There are two ways to choose an option: either click on it, or navigate using keyboard and press `enter`\n     */\n    onChange?: React.ChangeEventHandler<HTMLInputElement>;\n    /** Handler called when the user enters a query **/\n    onSearch?: (query: string) => void | Promise<void>;\n    /** Value of the input in combobox */\n    value?: ComboboxValue;\n};\n\ninterface InlineComboboxProps extends ComboboxBaseProps {\n    dialog?: never;\n    /**\n     * Combobox will display its data when input is clicked/focused, even if the input is empty.\n     * *Note* that default combobox will display matching data only when user starts typing in input.\n     */\n    inline: boolean; // Example 3 on https://www.w3.org/TR/wai-aria-practices/examples/combobox/aria1.1pattern/listbox-combo.html\n}\n\ninterface DialogComboboxProps extends ComboboxBaseProps {\n    dialog: (props: Partial<DialogProps>) => JSX.Element;\n    inline?: never;\n}\n\nexport type ComboboxProps = InlineComboboxProps | DialogComboboxProps;\n\nexport const Combobox = React.forwardRef(function Combobox(props: ComboboxProps, ref: React.Ref<HTMLInputElement>) {\n    const { className: externalClassName, dialog, style, ...otherProps } = props;\n    const { combobox, button, input, popover, list } = useCombobox(otherProps, ref);\n    const internalRef = React.useRef<HTMLDivElement>(null);\n    const { texts } = useLocalization();\n    const selectDimensions = useBoundingClientRectListener(internalRef);\n    const className = cn(\n        'inline-flex relative',\n        {\n            'yt-combobox--inline': props.inline,\n        },\n        externalClassName\n    );\n\n    return (\n        <span className={className} data-taco=\"combobox\" style={style}>\n            <PopoverPrimitive.Root {...popover}>\n                <PopoverPrimitive.Anchor asChild ref={internalRef}>\n                    <div {...combobox} className=\"inline w-full\" ref={ref}>\n                        <Input\n                            {...input}\n                            autoComplete=\"off\"\n                            button={\n                                props.inline ? (\n                                    <IconButton\n                                        // In case of inline combobox, this icon button acts only as visual chevron representation,\n                                        // so should be taken out of screen reader scope.\n                                        aria-hidden\n                                        appearance=\"discrete\"\n                                        className=\"!border-l-0 focus:!border-none focus:!shadow-none active:!border-none\"\n                                        icon={popover.open ? 'chevron-up' : 'chevron-down'}\n                                        onClick={() => {\n                                            popover.onOpenChange(true);\n                                            input.ref.current?.focus();\n                                        }}\n                                        tabIndex={-1}\n                                    />\n                                ) : dialog ? (\n                                    <IconButton\n                                        aria-label={texts.combobox.tooltip}\n                                        icon=\"list-search\"\n                                        disabled={props.readOnly || props.disabled}\n                                        dialog={dialog}\n                                        onFocus={(event: React.FocusEvent<HTMLButtonElement>) => {\n                                            // Prevents the default focus behaviour of showing the tooltip, on parent tooltip element\n                                            event.preventDefault();\n                                            input.ref.current?.focus();\n                                        }}\n                                        ref={button.ref}\n                                        tabIndex={-1}\n                                        tooltip={texts.combobox.tooltip}\n                                    />\n                                ) : undefined\n                            }\n                        />\n                    </div>\n                </PopoverPrimitive.Anchor>\n                <PopoverPrimitive.Portal>\n                    <PopoverPrimitive.Content\n                        align=\"start\"\n                        onOpenAutoFocus={event => {\n                            event.preventDefault();\n                        }}\n                        sideOffset={4}>\n                        <ScrollableList\n                            {...list}\n                            className={cn('max-h-[calc(12rem+2px)] w-auto max-w-[theme(spacing.96)] !border-blue-500')}\n                            style={{ minWidth: selectDimensions?.width }}\n                            tabIndex={popover.open ? 0 : -1}\n                        />\n                    </PopoverPrimitive.Content>\n                </PopoverPrimitive.Portal>\n            </PopoverPrimitive.Root>\n        </span>\n    );\n});\n"],"names":["Combobox","React","props","ref","className","externalClassName","dialog","style","otherProps","combobox","button","input","popover","list","useCombobox","internalRef","texts","useLocalization","selectDimensions","useBoundingClientRectListener","cn","inline","PopoverPrimitive","asChild","Input","autoComplete","IconButton","appearance","icon","open","onClick","onOpenChange","_input$ref$current","current","focus","tabIndex","tooltip","disabled","readOnly","onFocus","event","preventDefault","_input$ref$current2","undefined","align","onOpenAutoFocus","sideOffset","ScrollableList","minWidth","width"],"mappings":";;;;;;;;;;MA+DaA,QAAQ,gBAAGC,UAAgB,CAAC,SAASD,QAAQA,CAACE,KAAoB,EAAEC,GAAgC;EAC7G,MAAM;IAAEC,SAAS,EAAEC,iBAAiB;IAAEC,MAAM;IAAEC,KAAK;IAAE,GAAGC;GAAY,GAAGN,KAAK;EAC5E,MAAM;IAAEO,QAAQ;IAAEC,MAAM;IAAEC,KAAK;IAAEC,OAAO;IAAEC;GAAM,GAAGC,WAAW,CAACN,UAAU,EAAEL,GAAG,CAAC;EAC/E,MAAMY,WAAW,GAAGd,MAAY,CAAiB,IAAI,CAAC;EACtD,MAAM;IAAEe;GAAO,GAAGC,eAAe,EAAE;EACnC,MAAMC,gBAAgB,GAAGC,6BAA6B,CAACJ,WAAW,CAAC;EACnE,MAAMX,SAAS,GAAGgB,EAAE,CAChB,sBAAsB,EACtB;IACI,qBAAqB,EAAElB,KAAK,CAACmB;GAChC,EACDhB,iBAAiB,CACpB;EAED,oBACIJ;IAAMG,SAAS,EAAEA,SAAS;iBAAY,UAAU;IAACG,KAAK,EAAEA;kBACpDN,cAACqB,IAAqB,oBAAKV,OAAO,gBAC9BX,cAACqB,MAAuB;IAACC,OAAO;IAACpB,GAAG,EAAEY;kBAClCd,uCAASQ,QAAQ;IAAEL,SAAS,EAAC,eAAe;IAACD,GAAG,EAAEA;mBAC9CF,cAACuB,KAAK,oBACEb,KAAK;IACTc,YAAY,EAAC,KAAK;IAClBf,MAAM,EACFR,KAAK,CAACmB,MAAM,kBACRpB,cAACyB;;;;;MAIGC,UAAU,EAAC,UAAU;MACrBvB,SAAS,EAAC,uEAAuE;MACjFwB,IAAI,EAAEhB,OAAO,CAACiB,IAAI,GAAG,YAAY,GAAG,cAAc;MAClDC,OAAO,EAAEA;;QACLlB,OAAO,CAACmB,YAAY,CAAC,IAAI,CAAC;QAC1B,CAAAC,kBAAA,GAAArB,KAAK,CAACR,GAAG,CAAC8B,OAAO,cAAAD,kBAAA,uBAAjBA,kBAAA,CAAmBE,KAAK,EAAE;OAC7B;MACDC,QAAQ,EAAE,CAAC;MACb,IACF7B,MAAM,kBACNL,cAACyB,UAAU;oBACKV,KAAK,CAACP,QAAQ,CAAC2B,OAAO;MAClCR,IAAI,EAAC,aAAa;MAClBS,QAAQ,EAAEnC,KAAK,CAACoC,QAAQ,IAAIpC,KAAK,CAACmC,QAAQ;MAC1C/B,MAAM,EAAEA,MAAM;MACdiC,OAAO,EAAGC,KAA0C;;;QAEhDA,KAAK,CAACC,cAAc,EAAE;QACtB,CAAAC,mBAAA,GAAA/B,KAAK,CAACR,GAAG,CAAC8B,OAAO,cAAAS,mBAAA,uBAAjBA,mBAAA,CAAmBR,KAAK,EAAE;OAC7B;MACD/B,GAAG,EAAEO,MAAM,CAACP,GAAG;MACfgC,QAAQ,EAAE,CAAC,CAAC;MACZC,OAAO,EAAEpB,KAAK,CAACP,QAAQ,CAAC2B;MAC1B,IACFO;KAEV,CACA,CACgB,eAC1B1C,cAACqB,MAAuB,qBACpBrB,cAACqB,OAAwB;IACrBsB,KAAK,EAAC,OAAO;IACbC,eAAe,EAAEL,KAAK;MAClBA,KAAK,CAACC,cAAc,EAAE;KACzB;IACDK,UAAU,EAAE;kBACZ7C,cAAC8C,cAAc,oBACPlC,IAAI;IACRT,SAAS,EAAEgB,EAAE,CAAC,2EAA2E,CAAC;IAC1Fb,KAAK,EAAE;MAAEyC,QAAQ,EAAE9B,gBAAgB,aAAhBA,gBAAgB,uBAAhBA,gBAAgB,CAAE+B;KAAO;IAC5Cd,QAAQ,EAAEvB,OAAO,CAACiB,IAAI,GAAG,CAAC,GAAG,CAAC;KAChC,CACqB,CACL,CACN,CACrB;AAEf,CAAC;;;;"}
+{"version":3,"file":"Combobox.js","sources":["../../../../../../../src/components/Combobox/Combobox.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\nimport { Input, InputProps } from '../Input/Input';\nimport { useCombobox } from './useCombobox';\nimport { ScrollableList, ScrollableListItem, ScrollableListItemValue } from '../Listbox/ScrollableList';\nimport { useBoundingClientRectListener } from '../../hooks/useBoundingClientRectListener';\nimport { IconButton } from '../IconButton/IconButton';\nimport './Combobox.css';\nimport { DialogProps } from '../Dialog/Dialog';\nimport { useLocalization } from '../Provider/Localization';\n\nexport type ComboboxTexts = {\n    /* Tooltip shown for the dialog button */\n    tooltip: string;\n};\n\nexport type ComboboxItem = ScrollableListItem;\nexport type ComboboxValue = ScrollableListItemValue;\n\ntype ComboboxBaseProps = Omit<InputProps, 'defaultValue' | 'button' | 'onChange' | 'value'> & {\n    /** Array of options in combobox */\n    data?: ComboboxItem[];\n    /**\n     * Initial value of the input in combobox.\n     * This is used when combobox is mounted, if no value is provided.\n     * *Note* that combobox is a controlled component, setting this will also trigger the `onChange` event\n     */\n    defaultValue?: ComboboxValue;\n    /** Set what value should have an empty option in combobox */\n    emptyValue?: ComboboxValue;\n    /** Draws attention to the combobox by changing its style and making it visually prominent */\n    highlighted?: boolean;\n    /** Displays loading state in listbox */\n    loading?: boolean;\n    /**\n     * Handler called when user chooses an option from the provided suggestions.\n     * Suggestions will be calculated based on the input value.\n     * There are two ways to choose an option: either click on it, or navigate using keyboard and press `enter`\n     */\n    onChange?: React.ChangeEventHandler<HTMLInputElement>;\n    /** Handler called when the user enters a query **/\n    onSearch?: (query: string) => void | Promise<void>;\n    /** Value of the input in combobox */\n    value?: ComboboxValue;\n};\n\ninterface InlineComboboxProps extends ComboboxBaseProps {\n    dialog?: never;\n    /**\n     * Combobox will display its data when input is clicked/focused, even if the input is empty.\n     * *Note* that default combobox will display matching data only when user starts typing in input.\n     */\n    inline: boolean; // Example 3 on https://www.w3.org/TR/wai-aria-practices/examples/combobox/aria1.1pattern/listbox-combo.html\n}\n\ninterface DialogComboboxProps extends ComboboxBaseProps {\n    dialog: (props: Partial<DialogProps>) => JSX.Element;\n    inline?: never;\n}\n\nexport type ComboboxProps = InlineComboboxProps | DialogComboboxProps;\n\nexport const Combobox = React.forwardRef(function Combobox(props: ComboboxProps, ref: React.Ref<HTMLInputElement>) {\n    const { className: externalClassName, dialog, style, ...otherProps } = props;\n    const { combobox, button, input, popover, list } = useCombobox(otherProps, ref);\n    const internalRef = React.useRef<HTMLDivElement>(null);\n    const { texts } = useLocalization();\n    const selectDimensions = useBoundingClientRectListener(internalRef);\n    const className = cn(\n        'inline-flex relative',\n        {\n            'yt-combobox--inline': props.inline,\n        },\n        externalClassName\n    );\n\n    return (\n        <span className={className} data-taco=\"combobox\" style={style}>\n            <PopoverPrimitive.Root {...popover}>\n                <PopoverPrimitive.Anchor asChild ref={internalRef}>\n                    <div {...combobox} className=\"inline w-full\" ref={ref}>\n                        <Input\n                            {...input}\n                            autoComplete=\"off\"\n                            button={\n                                props.readOnly ? undefined : props.inline ? (\n                                    <IconButton\n                                        // In case of inline combobox, this icon button acts only as visual chevron representation,\n                                        // so should be taken out of screen reader scope.\n                                        aria-hidden\n                                        appearance=\"discrete\"\n                                        className=\"!border-l-0 focus:!border-none focus:!shadow-none active:!border-none\"\n                                        icon={popover.open ? 'chevron-up' : 'chevron-down'}\n                                        onClick={() => {\n                                            popover.onOpenChange(true);\n                                            input.ref.current?.focus();\n                                        }}\n                                        tabIndex={-1}\n                                    />\n                                ) : dialog ? (\n                                    <IconButton\n                                        aria-label={texts.combobox.tooltip}\n                                        icon=\"list-search\"\n                                        disabled={props.readOnly || props.disabled}\n                                        dialog={dialog}\n                                        onFocus={(event: React.FocusEvent<HTMLButtonElement>) => {\n                                            // Prevents the default focus behaviour of showing the tooltip, on parent tooltip element\n                                            event.preventDefault();\n                                            input.ref.current?.focus();\n                                        }}\n                                        ref={button.ref}\n                                        tabIndex={-1}\n                                        tooltip={texts.combobox.tooltip}\n                                    />\n                                ) : undefined\n                            }\n                        />\n                    </div>\n                </PopoverPrimitive.Anchor>\n                <PopoverPrimitive.Portal>\n                    <PopoverPrimitive.Content\n                        align=\"start\"\n                        onOpenAutoFocus={event => {\n                            event.preventDefault();\n                        }}\n                        sideOffset={4}>\n                        <ScrollableList\n                            {...list}\n                            className={cn('max-h-[calc(12rem+2px)] w-auto max-w-[theme(spacing.96)] !border-blue-500')}\n                            style={{ minWidth: selectDimensions?.width }}\n                            tabIndex={popover.open ? 0 : -1}\n                        />\n                    </PopoverPrimitive.Content>\n                </PopoverPrimitive.Portal>\n            </PopoverPrimitive.Root>\n        </span>\n    );\n});\n"],"names":["Combobox","React","props","ref","className","externalClassName","dialog","style","otherProps","combobox","button","input","popover","list","useCombobox","internalRef","texts","useLocalization","selectDimensions","useBoundingClientRectListener","cn","inline","PopoverPrimitive","asChild","Input","autoComplete","readOnly","undefined","IconButton","appearance","icon","open","onClick","onOpenChange","_input$ref$current","current","focus","tabIndex","tooltip","disabled","onFocus","event","preventDefault","_input$ref$current2","align","onOpenAutoFocus","sideOffset","ScrollableList","minWidth","width"],"mappings":";;;;;;;;;;MA+DaA,QAAQ,gBAAGC,UAAgB,CAAC,SAASD,QAAQA,CAACE,KAAoB,EAAEC,GAAgC;EAC7G,MAAM;IAAEC,SAAS,EAAEC,iBAAiB;IAAEC,MAAM;IAAEC,KAAK;IAAE,GAAGC;GAAY,GAAGN,KAAK;EAC5E,MAAM;IAAEO,QAAQ;IAAEC,MAAM;IAAEC,KAAK;IAAEC,OAAO;IAAEC;GAAM,GAAGC,WAAW,CAACN,UAAU,EAAEL,GAAG,CAAC;EAC/E,MAAMY,WAAW,GAAGd,MAAY,CAAiB,IAAI,CAAC;EACtD,MAAM;IAAEe;GAAO,GAAGC,eAAe,EAAE;EACnC,MAAMC,gBAAgB,GAAGC,6BAA6B,CAACJ,WAAW,CAAC;EACnE,MAAMX,SAAS,GAAGgB,EAAE,CAChB,sBAAsB,EACtB;IACI,qBAAqB,EAAElB,KAAK,CAACmB;GAChC,EACDhB,iBAAiB,CACpB;EAED,oBACIJ;IAAMG,SAAS,EAAEA,SAAS;iBAAY,UAAU;IAACG,KAAK,EAAEA;kBACpDN,cAACqB,IAAqB,oBAAKV,OAAO,gBAC9BX,cAACqB,MAAuB;IAACC,OAAO;IAACpB,GAAG,EAAEY;kBAClCd,uCAASQ,QAAQ;IAAEL,SAAS,EAAC,eAAe;IAACD,GAAG,EAAEA;mBAC9CF,cAACuB,KAAK,oBACEb,KAAK;IACTc,YAAY,EAAC,KAAK;IAClBf,MAAM,EACFR,KAAK,CAACwB,QAAQ,GAAGC,SAAS,GAAGzB,KAAK,CAACmB,MAAM,kBACrCpB,cAAC2B;;;;;MAIGC,UAAU,EAAC,UAAU;MACrBzB,SAAS,EAAC,uEAAuE;MACjF0B,IAAI,EAAElB,OAAO,CAACmB,IAAI,GAAG,YAAY,GAAG,cAAc;MAClDC,OAAO,EAAEA;;QACLpB,OAAO,CAACqB,YAAY,CAAC,IAAI,CAAC;QAC1B,CAAAC,kBAAA,GAAAvB,KAAK,CAACR,GAAG,CAACgC,OAAO,cAAAD,kBAAA,uBAAjBA,kBAAA,CAAmBE,KAAK,EAAE;OAC7B;MACDC,QAAQ,EAAE,CAAC;MACb,IACF/B,MAAM,kBACNL,cAAC2B,UAAU;oBACKZ,KAAK,CAACP,QAAQ,CAAC6B,OAAO;MAClCR,IAAI,EAAC,aAAa;MAClBS,QAAQ,EAAErC,KAAK,CAACwB,QAAQ,IAAIxB,KAAK,CAACqC,QAAQ;MAC1CjC,MAAM,EAAEA,MAAM;MACdkC,OAAO,EAAGC,KAA0C;;;QAEhDA,KAAK,CAACC,cAAc,EAAE;QACtB,CAAAC,mBAAA,GAAAhC,KAAK,CAACR,GAAG,CAACgC,OAAO,cAAAQ,mBAAA,uBAAjBA,mBAAA,CAAmBP,KAAK,EAAE;OAC7B;MACDjC,GAAG,EAAEO,MAAM,CAACP,GAAG;MACfkC,QAAQ,EAAE,CAAC,CAAC;MACZC,OAAO,EAAEtB,KAAK,CAACP,QAAQ,CAAC6B;MAC1B,IACFX;KAEV,CACA,CACgB,eAC1B1B,cAACqB,MAAuB,qBACpBrB,cAACqB,OAAwB;IACrBsB,KAAK,EAAC,OAAO;IACbC,eAAe,EAAEJ,KAAK;MAClBA,KAAK,CAACC,cAAc,EAAE;KACzB;IACDI,UAAU,EAAE;kBACZ7C,cAAC8C,cAAc,oBACPlC,IAAI;IACRT,SAAS,EAAEgB,EAAE,CAAC,2EAA2E,CAAC;IAC1Fb,KAAK,EAAE;MAAEyC,QAAQ,EAAE9B,gBAAgB,aAAhBA,gBAAgB,uBAAhBA,gBAAgB,CAAE+B;KAAO;IAC5CZ,QAAQ,EAAEzB,OAAO,CAACmB,IAAI,GAAG,CAAC,GAAG,CAAC;KAChC,CACqB,CACL,CACN,CACrB;AAEf,CAAC;;;;"}

package/dist/esm/packages/taco/src/components/Datepicker/Datepicker.js

@@ -29,7 +29,7 @@ const Datepicker = /*#__PURE__*/forwardRef(function Datepicker(props, ref) {
     "data-taco": "datepicker",
     style: style
   }, /*#__PURE__*/createElement(Input, Object.assign({}, input, {
-    button: /*#__PURE__*/createElement(IconButton, {
+    button: input.readOnly ? undefined : ( /*#__PURE__*/createElement(IconButton, {
       "aria-label": texts.datepicker.expand,
       disabled: input.disabled || input.readOnly,
       icon: "calendar",
@@ -67,7 +67,7 @@ const Datepicker = /*#__PURE__*/forwardRef(function Datepicker(props, ref) {
         }
       }, texts.datepicker.clear))))))))),
       tooltip: texts.datepicker.calendar
-    })
+    }))
   })));
 });
 Datepicker.displayName = 'Datepicker';

package/dist/esm/packages/taco/src/components/Datepicker/Datepicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"Datepicker.js","sources":["../../../../../../../src/components/Datepicker/Datepicker.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { Calendar, CalendarProps } from '../Calendar/Calendar';\nimport { Input, InputProps } from '../Input/Input';\nimport { useLocalization } from '../Provider/Localization';\nimport { useDatepicker } from './useDatepicker';\nimport { IconButton } from '../IconButton/IconButton';\nimport { Popover } from '../Popover/Popover';\n\nexport type DatepickerTexts = {\n    /** Aria-label for calendar */\n    calendar: string;\n    /** Clear button text */\n    clear: string;\n    /**\n     * Aria-label for calendar icon button in the input.\n     * Calendar will open when user clicks this icon button.\n     */\n    expand: string;\n    /** Shortcut heading text */\n    shortcuts: string;\n};\n\nexport type DatePickerShortcut = {\n    onClick: (event: React.MouseEvent) => void;\n    text: string;\n};\n\nexport type DatepickerProps = Omit<InputProps, 'value'> & {\n    /** [Calendar](component:calendar) component associated with the DatePicker */\n    calendar?: CalendarProps;\n    /** List of shortcuts */\n    shortcuts?: DatePickerShortcut[];\n    /** Title for the shortcuts panel */\n    shortcutsText?: string;\n    /** Handler to be called when the clear button is clicked */\n    onReset?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n    /**\n     * Date value of the calendar.\n     * This will be displayed in DatePicker's input in the format given to the [Provider](component:provider) component\n     */\n    value?: Date;\n};\n\nexport const Datepicker = React.forwardRef(function Datepicker(props: DatepickerProps, ref: React.Ref<HTMLInputElement>) {\n    const { className: externalClassName, onReset: handleReset, style, shortcuts, shortcutsText, ...otherProps } = props;\n    const { calendar, input } = useDatepicker(otherProps, ref);\n    const { texts } = useLocalization();\n    const className = cn('inline-flex w-full text-black font-normal', externalClassName);\n\n    return (\n        <span className={className} data-taco=\"datepicker\" style={style}>\n            <Input\n                {...input}\n                button={\n                    <IconButton\n                        aria-label={texts.datepicker.expand}\n                        disabled={input.disabled || input.readOnly}\n                        icon=\"calendar\"\n                        tabIndex={-1}\n                        popover={props => (\n                            <Popover {...props}>\n                                <Popover.Content>\n                                    {({ close }) => (\n                                        <div className=\"-m-3 flex\">\n                                            <Calendar\n                                                {...calendar}\n                                                onChange={(date: Date, event?: React.MouseEvent<Element>) => {\n                                                    calendar.onChange(date, event);\n                                                    close();\n                                                }}\n                                            />\n                                            {shortcuts && (\n                                                <div className=\"border-grey-300 flex flex-col border-l\">\n                                                    <span className=\"m-4 mb-3 flex h-8 w-32 items-center text-xs font-semibold\">\n                                                        {shortcutsText ?? texts.datepicker.shortcuts}\n                                                    </span>\n                                                    <ul>\n                                                        {shortcuts.map(shortcut => (\n                                                            <li key={shortcut.text}>\n                                                                <button\n                                                                    type=\"button\"\n                                                                    className=\"hover:wcag-grey-200 flex w-full items-start px-4 py-1 text-xs\"\n                                                                    onClick={event => {\n                                                                        event.persist();\n                                                                        shortcut.onClick(event);\n                                                                        close();\n                                                                    }}>\n                                                                    {shortcut.text}\n                                                                </button>\n                                                            </li>\n                                                        ))}\n                                                    </ul>\n                                                    {handleReset && (\n                                                        <button\n                                                            type=\"button\"\n                                                            className=\"mx-auto my-4 mt-auto inline-flex cursor-pointer border-none bg-transparent text-xs text-blue-500 hover:text-blue-300\"\n                                                            onClick={event => {\n                                                                event.persist();\n                                                                handleReset(event);\n                                                                close();\n                                                            }}>\n                                                            {texts.datepicker.clear}\n                                                        </button>\n                                                    )}\n                                                </div>\n                                            )}\n                                        </div>\n                                    )}\n                                </Popover.Content>\n                            </Popover>\n                        )}\n                        tooltip={texts.datepicker.calendar}\n                    />\n                }\n            />\n        </span>\n    );\n});\nDatepicker.displayName = 'Datepicker';\n"],"names":["Datepicker","React","props","ref","className","externalClassName","onReset","handleReset","style","shortcuts","shortcutsText","otherProps","calendar","input","useDatepicker","texts","useLocalization","cn","Input","button","IconButton","datepicker","expand","disabled","readOnly","icon","tabIndex","popover","Popover","Content","close","Calendar","onChange","date","event","map","shortcut","key","text","type","onClick","persist","clear","tooltip","displayName"],"mappings":";;;;;;;;;MA4CaA,UAAU,gBAAGC,UAAgB,CAAC,SAASD,UAAUA,CAACE,KAAsB,EAAEC,GAAgC;EACnH,MAAM;IAAEC,SAAS,EAAEC,iBAAiB;IAAEC,OAAO,EAAEC,WAAW;IAAEC,KAAK;IAAEC,SAAS;IAAEC,aAAa;IAAE,GAAGC;GAAY,GAAGT,KAAK;EACpH,MAAM;IAAEU,QAAQ;IAAEC;GAAO,GAAGC,aAAa,CAACH,UAAU,EAAER,GAAG,CAAC;EAC1D,MAAM;IAAEY;GAAO,GAAGC,eAAe,EAAE;EACnC,MAAMZ,SAAS,GAAGa,EAAE,CAAC,2CAA2C,EAAEZ,iBAAiB,CAAC;EAEpF,oBACIJ;IAAMG,SAAS,EAAEA,SAAS;iBAAY,YAAY;IAACI,KAAK,EAAEA;kBACtDP,cAACiB,KAAK,oBACEL,KAAK;IACTM,MAAM,eACFlB,cAACmB,UAAU;oBACKL,KAAK,CAACM,UAAU,CAACC,MAAM;MACnCC,QAAQ,EAAEV,KAAK,CAACU,QAAQ,IAAIV,KAAK,CAACW,QAAQ;MAC1CC,IAAI,EAAC,UAAU;MACfC,QAAQ,EAAE,CAAC,CAAC;MACZC,OAAO,EAAEzB,KAAK,mBACVD,cAAC2B,OAAO,oBAAK1B,KAAK,gBACdD,cAAC2B,OAAO,CAACC,OAAO,QACX,CAAC;QAAEC;OAAO,oBACP7B;QAAKG,SAAS,EAAC;sBACXH,cAAC8B,QAAQ,oBACDnB,QAAQ;QACZoB,QAAQ,EAAEA,CAACC,IAAU,EAAEC,KAAiC;UACpDtB,QAAQ,CAACoB,QAAQ,CAACC,IAAI,EAAEC,KAAK,CAAC;UAC9BJ,KAAK,EAAE;;SAEb,EACDrB,SAAS,mBACNR;QAAKG,SAAS,EAAC;sBACXH;QAAMG,SAAS,EAAC;SACXM,aAAa,aAAbA,aAAa,cAAbA,aAAa,GAAIK,KAAK,CAACM,UAAU,CAACZ,SAAS,CACzC,eACPR,0BACKQ,SAAS,CAAC0B,GAAG,CAACC,QAAQ,mBACnBnC;QAAIoC,GAAG,EAAED,QAAQ,CAACE;sBACdrC;QACIsC,IAAI,EAAC,QAAQ;QACbnC,SAAS,EAAC,+DAA+D;QACzEoC,OAAO,EAAEN,KAAK;UACVA,KAAK,CAACO,OAAO,EAAE;UACfL,QAAQ,CAACI,OAAO,CAACN,KAAK,CAAC;UACvBJ,KAAK,EAAE;;SAEVM,QAAQ,CAACE,IAAI,CACT,CACR,CACR,CAAC,CACD,EACJ/B,WAAW,mBACRN;QACIsC,IAAI,EAAC,QAAQ;QACbnC,SAAS,EAAC,sHAAsH;QAChIoC,OAAO,EAAEN,KAAK;UACVA,KAAK,CAACO,OAAO,EAAE;UACflC,WAAW,CAAC2B,KAAK,CAAC;UAClBJ,KAAK,EAAE;;SAEVf,KAAK,CAACM,UAAU,CAACqB,KAAK,CAClB,CACZ,CACC,CACT,CACC,CACT,CACa,CACZ,CACb;MACDC,OAAO,EAAE5B,KAAK,CAACM,UAAU,CAACT;;KAGpC,CACC;AAEf,CAAC;AACDZ,UAAU,CAAC4C,WAAW,GAAG,YAAY;;;;"}
+{"version":3,"file":"Datepicker.js","sources":["../../../../../../../src/components/Datepicker/Datepicker.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { Calendar, CalendarProps } from '../Calendar/Calendar';\nimport { Input, InputProps } from '../Input/Input';\nimport { useLocalization } from '../Provider/Localization';\nimport { useDatepicker } from './useDatepicker';\nimport { IconButton } from '../IconButton/IconButton';\nimport { Popover } from '../Popover/Popover';\n\nexport type DatepickerTexts = {\n    /** Aria-label for calendar */\n    calendar: string;\n    /** Clear button text */\n    clear: string;\n    /**\n     * Aria-label for calendar icon button in the input.\n     * Calendar will open when user clicks this icon button.\n     */\n    expand: string;\n    /** Shortcut heading text */\n    shortcuts: string;\n};\n\nexport type DatePickerShortcut = {\n    onClick: (event: React.MouseEvent) => void;\n    text: string;\n};\n\nexport type DatepickerProps = Omit<InputProps, 'value'> & {\n    /** [Calendar](component:calendar) component associated with the DatePicker */\n    calendar?: CalendarProps;\n    /** List of shortcuts */\n    shortcuts?: DatePickerShortcut[];\n    /** Title for the shortcuts panel */\n    shortcutsText?: string;\n    /** Handler to be called when the clear button is clicked */\n    onReset?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n    /**\n     * Date value of the calendar.\n     * This will be displayed in DatePicker's input in the format given to the [Provider](component:provider) component\n     */\n    value?: Date;\n};\n\nexport const Datepicker = React.forwardRef(function Datepicker(props: DatepickerProps, ref: React.Ref<HTMLInputElement>) {\n    const { className: externalClassName, onReset: handleReset, style, shortcuts, shortcutsText, ...otherProps } = props;\n    const { calendar, input } = useDatepicker(otherProps, ref);\n    const { texts } = useLocalization();\n    const className = cn('inline-flex w-full text-black font-normal', externalClassName);\n\n    return (\n        <span className={className} data-taco=\"datepicker\" style={style}>\n            <Input\n                {...input}\n                button={\n                    input.readOnly ? undefined : (\n                        <IconButton\n                            aria-label={texts.datepicker.expand}\n                            disabled={input.disabled || input.readOnly}\n                            icon=\"calendar\"\n                            tabIndex={-1}\n                            popover={props => (\n                                <Popover {...props}>\n                                    <Popover.Content>\n                                        {({ close }) => (\n                                            <div className=\"-m-3 flex\">\n                                                <Calendar\n                                                    {...calendar}\n                                                    onChange={(date: Date, event?: React.MouseEvent<Element>) => {\n                                                        calendar.onChange(date, event);\n                                                        close();\n                                                    }}\n                                                />\n                                                {shortcuts && (\n                                                    <div className=\"border-grey-300 flex flex-col border-l\">\n                                                        <span className=\"m-4 mb-3 flex h-8 w-32 items-center text-xs font-semibold\">\n                                                            {shortcutsText ?? texts.datepicker.shortcuts}\n                                                        </span>\n                                                        <ul>\n                                                            {shortcuts.map(shortcut => (\n                                                                <li key={shortcut.text}>\n                                                                    <button\n                                                                        type=\"button\"\n                                                                        className=\"hover:wcag-grey-200 flex w-full items-start px-4 py-1 text-xs\"\n                                                                        onClick={event => {\n                                                                            event.persist();\n                                                                            shortcut.onClick(event);\n                                                                            close();\n                                                                        }}>\n                                                                        {shortcut.text}\n                                                                    </button>\n                                                                </li>\n                                                            ))}\n                                                        </ul>\n                                                        {handleReset && (\n                                                            <button\n                                                                type=\"button\"\n                                                                className=\"mx-auto my-4 mt-auto inline-flex cursor-pointer border-none bg-transparent text-xs text-blue-500 hover:text-blue-300\"\n                                                                onClick={event => {\n                                                                    event.persist();\n                                                                    handleReset(event);\n                                                                    close();\n                                                                }}>\n                                                                {texts.datepicker.clear}\n                                                            </button>\n                                                        )}\n                                                    </div>\n                                                )}\n                                            </div>\n                                        )}\n                                    </Popover.Content>\n                                </Popover>\n                            )}\n                            tooltip={texts.datepicker.calendar}\n                        />\n                    )\n                }\n            />\n        </span>\n    );\n});\nDatepicker.displayName = 'Datepicker';\n"],"names":["Datepicker","React","props","ref","className","externalClassName","onReset","handleReset","style","shortcuts","shortcutsText","otherProps","calendar","input","useDatepicker","texts","useLocalization","cn","Input","button","readOnly","undefined","IconButton","datepicker","expand","disabled","icon","tabIndex","popover","Popover","Content","close","Calendar","onChange","date","event","map","shortcut","key","text","type","onClick","persist","clear","tooltip","displayName"],"mappings":";;;;;;;;;MA4CaA,UAAU,gBAAGC,UAAgB,CAAC,SAASD,UAAUA,CAACE,KAAsB,EAAEC,GAAgC;EACnH,MAAM;IAAEC,SAAS,EAAEC,iBAAiB;IAAEC,OAAO,EAAEC,WAAW;IAAEC,KAAK;IAAEC,SAAS;IAAEC,aAAa;IAAE,GAAGC;GAAY,GAAGT,KAAK;EACpH,MAAM;IAAEU,QAAQ;IAAEC;GAAO,GAAGC,aAAa,CAACH,UAAU,EAAER,GAAG,CAAC;EAC1D,MAAM;IAAEY;GAAO,GAAGC,eAAe,EAAE;EACnC,MAAMZ,SAAS,GAAGa,EAAE,CAAC,2CAA2C,EAAEZ,iBAAiB,CAAC;EAEpF,oBACIJ;IAAMG,SAAS,EAAEA,SAAS;iBAAY,YAAY;IAACI,KAAK,EAAEA;kBACtDP,cAACiB,KAAK,oBACEL,KAAK;IACTM,MAAM,EACFN,KAAK,CAACO,QAAQ,GAAGC,SAAS,kBACtBpB,cAACqB,UAAU;oBACKP,KAAK,CAACQ,UAAU,CAACC,MAAM;MACnCC,QAAQ,EAAEZ,KAAK,CAACY,QAAQ,IAAIZ,KAAK,CAACO,QAAQ;MAC1CM,IAAI,EAAC,UAAU;MACfC,QAAQ,EAAE,CAAC,CAAC;MACZC,OAAO,EAAE1B,KAAK,mBACVD,cAAC4B,OAAO,oBAAK3B,KAAK,gBACdD,cAAC4B,OAAO,CAACC,OAAO,QACX,CAAC;QAAEC;OAAO,oBACP9B;QAAKG,SAAS,EAAC;sBACXH,cAAC+B,QAAQ,oBACDpB,QAAQ;QACZqB,QAAQ,EAAEA,CAACC,IAAU,EAAEC,KAAiC;UACpDvB,QAAQ,CAACqB,QAAQ,CAACC,IAAI,EAAEC,KAAK,CAAC;UAC9BJ,KAAK,EAAE;;SAEb,EACDtB,SAAS,mBACNR;QAAKG,SAAS,EAAC;sBACXH;QAAMG,SAAS,EAAC;SACXM,aAAa,aAAbA,aAAa,cAAbA,aAAa,GAAIK,KAAK,CAACQ,UAAU,CAACd,SAAS,CACzC,eACPR,0BACKQ,SAAS,CAAC2B,GAAG,CAACC,QAAQ,mBACnBpC;QAAIqC,GAAG,EAAED,QAAQ,CAACE;sBACdtC;QACIuC,IAAI,EAAC,QAAQ;QACbpC,SAAS,EAAC,+DAA+D;QACzEqC,OAAO,EAAEN,KAAK;UACVA,KAAK,CAACO,OAAO,EAAE;UACfL,QAAQ,CAACI,OAAO,CAACN,KAAK,CAAC;UACvBJ,KAAK,EAAE;;SAEVM,QAAQ,CAACE,IAAI,CACT,CACR,CACR,CAAC,CACD,EACJhC,WAAW,mBACRN;QACIuC,IAAI,EAAC,QAAQ;QACbpC,SAAS,EAAC,sHAAsH;QAChIqC,OAAO,EAAEN,KAAK;UACVA,KAAK,CAACO,OAAO,EAAE;UACfnC,WAAW,CAAC4B,KAAK,CAAC;UAClBJ,KAAK,EAAE;;SAEVhB,KAAK,CAACQ,UAAU,CAACoB,KAAK,CAClB,CACZ,CACC,CACT,CACC,CACT,CACa,CACZ,CACb;MACDC,OAAO,EAAE7B,KAAK,CAACQ,UAAU,CAACX;MAC5B;KAGZ,CACC;AAEf,CAAC;AACDZ,UAAU,CAAC6C,WAAW,GAAG,YAAY;;;;"}

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

@@ -31,7 +31,8 @@ const BaseSelect = /*#__PURE__*/forwardRef(function BaseSelect(props, ref) {
     'yt-select--readonly': props.readOnly
   }, externalClassName);
   const inputClassname = cn(getInputClasses(props), 'h-8 text-left !pr-0', {
-    'border-blue-500': popover.open
+    'border-blue-500': popover.open,
+    'select-text': otherProps.readOnly
   });
   useEffect(() => {
     if (autoFocus && internalRef.current) {

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

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

@@ -140,12 +140,30 @@ const useSelect = ({
       onChange(event);
     }
   };
+  const handleButtonClick = event => {
+    if (readOnly) {
+      event.preventDefault();
+    }
+  };
+  // select the value text if the select is readonly
+  const handleButtonFocus = event => {
+    if (readOnly) {
+      const value = event.currentTarget.querySelector(':first-child');
+      if (value) {
+        var _window$getSelection, _window$getSelection$;
+        (_window$getSelection = window.getSelection()) === null || _window$getSelection === void 0 ? void 0 : (_window$getSelection$ = _window$getSelection.selectAllChildren) === null || _window$getSelection$ === void 0 ? void 0 : _window$getSelection$.call(_window$getSelection, value);
+      }
+    }
+  };
   const button = {
     'aria-haspopup': 'listbox',
     'aria-label': ariaLabel ? `${ariaLabel} ${text}` : undefined,
     'aria-labelledby': ariaLabelledBy ? `${ariaLabelledBy} ${buttonId}` : undefined,
-    disabled: disabled || readOnly,
+    'aria-readonly': readOnly ? 'true' : undefined,
+    disabled: disabled,
     id: buttonId,
+    onClick: handleButtonClick,
+    onFocus: handleButtonFocus,
     onKeyDown: !disabled && !readOnly ? handleButtonKeyDown : undefined,
     tabIndex,
     type: 'button'

package/dist/esm/packages/taco/src/components/Select/useSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"useSelect.js","sources":["../../../../../../../src/components/Select/useSelect.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { v4 as uuid } from 'uuid';\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\nimport { useLocalization } from '../Provider/Localization';\nimport { SelectProps } from './Select';\nimport { ListboxProps } from '../Listbox/Listbox';\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { setInputValueByRef, findByValue, useFlattenedData, sanitizeItem } from '../Listbox/util';\nimport { ScrollableListItemValue } from '../Listbox/ScrollableList';\nimport { createCustomEvent } from '../../utils/input';\n\ntype InternalButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement>;\ntype InternalListboxProps = ListboxProps & { ref: React.ForwardedRef<HTMLInputElement> };\ntype InternalInputProps = React.InputHTMLAttributes<HTMLInputElement> & { ref: React.ForwardedRef<HTMLInputElement> };\n\ntype useSelect = React.HtmlHTMLAttributes<HTMLDivElement> & {\n    button: InternalButtonProps;\n    listbox: InternalListboxProps;\n    input: InternalInputProps;\n    popover: Pick<PopoverPrimitive.PopoverProps, 'onOpenChange' | 'open'>;\n    text: string | JSX.Element;\n    more?: number;\n};\n\nexport const useSelect = (\n    {\n        'aria-label': ariaLabel,\n        'aria-labelledby': ariaLabelledBy,\n        data = [],\n        defaultValue,\n        disabled,\n        emptyValue,\n        id: nativeId,\n        multiselect,\n        onBlur,\n        onClick,\n        onChange,\n        readOnly,\n        tabIndex,\n        value,\n        ...otherProps\n    }: SelectProps,\n    ref: React.Ref<HTMLInputElement>\n): useSelect => {\n    const { texts } = useLocalization();\n    const flattenedData = useFlattenedData(data);\n    const listboxInputRef = useMergedRef<HTMLInputElement>(ref);\n    const [open, setOpen] = React.useState(false);\n    const id = React.useMemo(() => nativeId || `select_${uuid()}`, [nativeId]);\n    const inputRef = React.useRef<HTMLInputElement>(null);\n    const buttonId = `${id}-button`;\n    // support 'escape' resetting to the value that was set when the listbox opened\n    const [lastValue, setLastValue] = React.useState<ScrollableListItemValue | undefined>(value);\n\n    React.useEffect(() => {\n        setLastValue(value);\n    }, [open]);\n\n    React.useEffect(() => {\n        if (value === undefined) {\n            if (defaultValue !== undefined && findByValue(flattenedData, defaultValue)) {\n                setInputValueByRef(inputRef.current, defaultValue);\n            } else {\n                if (emptyValue !== undefined) {\n                    setInputValueByRef(inputRef.current, emptyValue);\n                } else if (data.length > 0) {\n                    setInputValueByRef(inputRef.current, data[0].value);\n                }\n            }\n        } else {\n            if (!multiselect && !findByValue(flattenedData, value)) {\n                if (emptyValue !== undefined) {\n                    setInputValueByRef(inputRef.current, emptyValue);\n                } else if (data.length > 0) {\n                    setInputValueByRef(inputRef.current, data[0].value);\n                }\n            }\n        }\n    }, []);\n\n    // event handlers\n    const handleButtonKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>): void => {\n        if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {\n            event.preventDefault();\n            setOpen(true);\n        }\n    };\n\n    const handleListboxKeyDown = (event: React.KeyboardEvent<HTMLElement>): void => {\n        switch (event.key) {\n            case 'Escape': {\n                event.preventDefault();\n                if (lastValue !== undefined) {\n                    setInputValueByRef(listboxInputRef.current, lastValue);\n                }\n\n                setOpen(false);\n                break;\n            }\n\n            case 'Tab':\n            case 'Enter': {\n                if (event.key !== 'Tab') {\n                    event.preventDefault();\n                }\n                setOpen(false);\n                break;\n            }\n\n            default:\n        }\n\n        if (otherProps.onKeyDown) {\n            otherProps.onKeyDown(event);\n        }\n    };\n\n    const handleListboxClick = (event: React.MouseEvent<HTMLLIElement>): void => {\n        event.preventDefault();\n        if (!multiselect) {\n            setOpen(false);\n            if (onBlur) {\n                onBlur(createCustomEvent('blur'));\n            }\n        }\n    };\n\n    let text: string | JSX.Element = '';\n    let more = 0;\n\n    if (value !== undefined) {\n        if (multiselect) {\n            const selectedValues = value?.toString().split(',') || [];\n\n            if (selectedValues.length === flattenedData.filter(item => !item.disabled).length) {\n                text = texts.select.allOptionsSelected;\n            } else {\n                text = findByValue(flattenedData, selectedValues[0])?.text ?? '';\n                more = selectedValues.length > 1 ? selectedValues.length - 1 : 0;\n            }\n        } else {\n            const item = findByValue(flattenedData, value);\n\n            if (item) {\n                text = item.icon ? (\n                    <>\n                        {React.cloneElement(item.icon, {\n                            className: cn(item.icon.props.className, 'mr-1 -mt-px'),\n                        })}\n                        {item.text}\n                    </>\n                ) : (\n                    item.text\n                );\n            }\n        }\n    }\n\n    const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>): void => {\n        event.persist();\n\n        if (onChange) {\n            const item = findByValue(flattenedData, event.target.value);\n            (event as any).detail = sanitizeItem(item);\n\n            const indexes = item?.path?.split('.') ?? [];\n\n            if (indexes.length > 1) {\n                // we don't want to map the current item\n                indexes.pop();\n                // we need to rebuild the path as we map\n                let lastPath: string;\n\n                (event as any).detail.parents = indexes.map(i => {\n                    lastPath = lastPath ? [lastPath, i].join('.') : i;\n                    return sanitizeItem(flattenedData.find(i => i.path === lastPath));\n                });\n            }\n\n            onChange(event);\n        }\n    };\n\n    const button: InternalButtonProps = {\n        'aria-haspopup': 'listbox' as const,\n        'aria-label': ariaLabel ? `${ariaLabel} ${text}` : undefined,\n        'aria-labelledby': ariaLabelledBy ? `${ariaLabelledBy} ${buttonId}` : undefined,\n        disabled: disabled || readOnly,\n        id: buttonId,\n        onKeyDown: !disabled && !readOnly ? handleButtonKeyDown : undefined,\n        tabIndex,\n        type: 'button',\n    };\n\n    const listbox: InternalListboxProps = {\n        ...otherProps,\n        'aria-label': ariaLabel,\n        'aria-labelledby': ariaLabelledBy,\n        data,\n        disabled,\n        emptyValue,\n        onBlur,\n        onClick: handleListboxClick,\n        onChange: event => {\n            setInputValueByRef(inputRef.current, event.target.value);\n        },\n        onKeyDown: handleListboxKeyDown,\n        ref: listboxInputRef,\n        value,\n    };\n\n    const input: InternalInputProps = {\n        onChange: handleInputChange,\n        ref: inputRef,\n        value: String(value ?? ''),\n    };\n\n    return {\n        button,\n        listbox,\n        input,\n        popover: {\n            open,\n            onOpenChange: open => {\n                if (!open && onBlur) {\n                    onBlur(createCustomEvent('blur'));\n                }\n                setOpen(open);\n            },\n        },\n        text,\n        more,\n    };\n};\n"],"names":["useSelect","ariaLabel","ariaLabelledBy","data","defaultValue","disabled","emptyValue","id","nativeId","multiselect","onBlur","onClick","onChange","readOnly","tabIndex","value","otherProps","ref","texts","useLocalization","flattenedData","useFlattenedData","listboxInputRef","useMergedRef","open","setOpen","React","uuid","inputRef","buttonId","lastValue","setLastValue","undefined","findByValue","setInputValueByRef","current","length","handleButtonKeyDown","event","key","preventDefault","handleListboxKeyDown","onKeyDown","handleListboxClick","createCustomEvent","text","more","selectedValues","toString","split","filter","item","select","allOptionsSelected","_findByValue$text","_findByValue","icon","className","cn","props","handleInputChange","persist","_item$path$split","_item$path","target","detail","sanitizeItem","indexes","path","pop","lastPath","parents","map","i","join","find","button","type","listbox","input","String","popover","onOpenChange"],"mappings":"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"}
+{"version":3,"file":"useSelect.js","sources":["../../../../../../../src/components/Select/useSelect.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { v4 as uuid } from 'uuid';\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\nimport { useLocalization } from '../Provider/Localization';\nimport { SelectProps } from './Select';\nimport { ListboxProps } from '../Listbox/Listbox';\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { setInputValueByRef, findByValue, useFlattenedData, sanitizeItem } from '../Listbox/util';\nimport { ScrollableListItemValue } from '../Listbox/ScrollableList';\nimport { createCustomEvent } from '../../utils/input';\n\ntype InternalButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement>;\ntype InternalListboxProps = ListboxProps & { ref: React.ForwardedRef<HTMLInputElement> };\ntype InternalInputProps = React.InputHTMLAttributes<HTMLInputElement> & { ref: React.ForwardedRef<HTMLInputElement> };\n\ntype useSelect = React.HtmlHTMLAttributes<HTMLDivElement> & {\n    button: InternalButtonProps;\n    listbox: InternalListboxProps;\n    input: InternalInputProps;\n    popover: Pick<PopoverPrimitive.PopoverProps, 'onOpenChange' | 'open'>;\n    text: string | JSX.Element;\n    more?: number;\n};\n\nexport const useSelect = (\n    {\n        'aria-label': ariaLabel,\n        'aria-labelledby': ariaLabelledBy,\n        data = [],\n        defaultValue,\n        disabled,\n        emptyValue,\n        id: nativeId,\n        multiselect,\n        onBlur,\n        onClick,\n        onChange,\n        readOnly,\n        tabIndex,\n        value,\n        ...otherProps\n    }: SelectProps,\n    ref: React.Ref<HTMLInputElement>\n): useSelect => {\n    const { texts } = useLocalization();\n    const flattenedData = useFlattenedData(data);\n    const listboxInputRef = useMergedRef<HTMLInputElement>(ref);\n    const [open, setOpen] = React.useState(false);\n    const id = React.useMemo(() => nativeId || `select_${uuid()}`, [nativeId]);\n    const inputRef = React.useRef<HTMLInputElement>(null);\n    const buttonId = `${id}-button`;\n    // support 'escape' resetting to the value that was set when the listbox opened\n    const [lastValue, setLastValue] = React.useState<ScrollableListItemValue | undefined>(value);\n\n    React.useEffect(() => {\n        setLastValue(value);\n    }, [open]);\n\n    React.useEffect(() => {\n        if (value === undefined) {\n            if (defaultValue !== undefined && findByValue(flattenedData, defaultValue)) {\n                setInputValueByRef(inputRef.current, defaultValue);\n            } else {\n                if (emptyValue !== undefined) {\n                    setInputValueByRef(inputRef.current, emptyValue);\n                } else if (data.length > 0) {\n                    setInputValueByRef(inputRef.current, data[0].value);\n                }\n            }\n        } else {\n            if (!multiselect && !findByValue(flattenedData, value)) {\n                if (emptyValue !== undefined) {\n                    setInputValueByRef(inputRef.current, emptyValue);\n                } else if (data.length > 0) {\n                    setInputValueByRef(inputRef.current, data[0].value);\n                }\n            }\n        }\n    }, []);\n\n    // event handlers\n    const handleButtonKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>): void => {\n        if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {\n            event.preventDefault();\n            setOpen(true);\n        }\n    };\n\n    const handleListboxKeyDown = (event: React.KeyboardEvent<HTMLElement>): void => {\n        switch (event.key) {\n            case 'Escape': {\n                event.preventDefault();\n                if (lastValue !== undefined) {\n                    setInputValueByRef(listboxInputRef.current, lastValue);\n                }\n\n                setOpen(false);\n                break;\n            }\n\n            case 'Tab':\n            case 'Enter': {\n                if (event.key !== 'Tab') {\n                    event.preventDefault();\n                }\n                setOpen(false);\n                break;\n            }\n\n            default:\n        }\n\n        if (otherProps.onKeyDown) {\n            otherProps.onKeyDown(event);\n        }\n    };\n\n    const handleListboxClick = (event: React.MouseEvent<HTMLLIElement>): void => {\n        event.preventDefault();\n        if (!multiselect) {\n            setOpen(false);\n            if (onBlur) {\n                onBlur(createCustomEvent('blur'));\n            }\n        }\n    };\n\n    let text: string | JSX.Element = '';\n    let more = 0;\n\n    if (value !== undefined) {\n        if (multiselect) {\n            const selectedValues = value?.toString().split(',') || [];\n\n            if (selectedValues.length === flattenedData.filter(item => !item.disabled).length) {\n                text = texts.select.allOptionsSelected;\n            } else {\n                text = findByValue(flattenedData, selectedValues[0])?.text ?? '';\n                more = selectedValues.length > 1 ? selectedValues.length - 1 : 0;\n            }\n        } else {\n            const item = findByValue(flattenedData, value);\n\n            if (item) {\n                text = item.icon ? (\n                    <>\n                        {React.cloneElement(item.icon, {\n                            className: cn(item.icon.props.className, 'mr-1 -mt-px'),\n                        })}\n                        {item.text}\n                    </>\n                ) : (\n                    item.text\n                );\n            }\n        }\n    }\n\n    const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>): void => {\n        event.persist();\n\n        if (onChange) {\n            const item = findByValue(flattenedData, event.target.value);\n            (event as any).detail = sanitizeItem(item);\n\n            const indexes = item?.path?.split('.') ?? [];\n\n            if (indexes.length > 1) {\n                // we don't want to map the current item\n                indexes.pop();\n                // we need to rebuild the path as we map\n                let lastPath: string;\n\n                (event as any).detail.parents = indexes.map(i => {\n                    lastPath = lastPath ? [lastPath, i].join('.') : i;\n                    return sanitizeItem(flattenedData.find(i => i.path === lastPath));\n                });\n            }\n\n            onChange(event);\n        }\n    };\n\n    const handleButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n        if (readOnly) {\n            event.preventDefault();\n        }\n    };\n\n    // select the value text if the select is readonly\n    const handleButtonFocus = (event: React.FocusEvent<HTMLButtonElement>) => {\n        if (readOnly) {\n            const value = event.currentTarget.querySelector(':first-child');\n\n            if (value) {\n                window.getSelection()?.selectAllChildren?.(value);\n            }\n        }\n    };\n\n    const button: InternalButtonProps = {\n        'aria-haspopup': 'listbox' as const,\n        'aria-label': ariaLabel ? `${ariaLabel} ${text}` : undefined,\n        'aria-labelledby': ariaLabelledBy ? `${ariaLabelledBy} ${buttonId}` : undefined,\n        'aria-readonly': readOnly ? 'true' : undefined,\n        disabled: disabled,\n        id: buttonId,\n        onClick: handleButtonClick,\n        onFocus: handleButtonFocus,\n        onKeyDown: !disabled && !readOnly ? handleButtonKeyDown : undefined,\n        tabIndex,\n        type: 'button',\n    };\n\n    const listbox: InternalListboxProps = {\n        ...otherProps,\n        'aria-label': ariaLabel,\n        'aria-labelledby': ariaLabelledBy,\n        data,\n        disabled,\n        emptyValue,\n        onBlur,\n        onClick: handleListboxClick,\n        onChange: event => {\n            setInputValueByRef(inputRef.current, event.target.value);\n        },\n        onKeyDown: handleListboxKeyDown,\n        ref: listboxInputRef,\n        value,\n    };\n\n    const input: InternalInputProps = {\n        onChange: handleInputChange,\n        ref: inputRef,\n        value: String(value ?? ''),\n    };\n\n    return {\n        button,\n        listbox,\n        input,\n        popover: {\n            open,\n            onOpenChange: open => {\n                if (!open && onBlur) {\n                    onBlur(createCustomEvent('blur'));\n                }\n                setOpen(open);\n            },\n        },\n        text,\n        more,\n    };\n};\n"],"names":["useSelect","ariaLabel","ariaLabelledBy","data","defaultValue","disabled","emptyValue","id","nativeId","multiselect","onBlur","onClick","onChange","readOnly","tabIndex","value","otherProps","ref","texts","useLocalization","flattenedData","useFlattenedData","listboxInputRef","useMergedRef","open","setOpen","React","uuid","inputRef","buttonId","lastValue","setLastValue","undefined","findByValue","setInputValueByRef","current","length","handleButtonKeyDown","event","key","preventDefault","handleListboxKeyDown","onKeyDown","handleListboxClick","createCustomEvent","text","more","selectedValues","toString","split","filter","item","select","allOptionsSelected","_findByValue$text","_findByValue","icon","className","cn","props","handleInputChange","persist","_item$path$split","_item$path","target","detail","sanitizeItem","indexes","path","pop","lastPath","parents","map","i","join","find","handleButtonClick","handleButtonFocus","currentTarget","querySelector","_window$getSelection","_window$getSelection$","window","getSelection","selectAllChildren","call","button","onFocus","type","listbox","input","String","popover","onOpenChange"],"mappings":"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"}

package/dist/esm/packages/taco/src/components/Select2/components/Trigger.js

@@ -13,13 +13,19 @@ import { useSelect2Context } from './Context.js';
 
 const Placeholder = ({
   disabled,
+  readOnly,
   ...props
-}) => ( /*#__PURE__*/React__default.createElement("div", Object.assign({}, props, {
-  className: cn({
-    'text-grey-700': disabled,
-    'text-grey-500': !disabled
-  })
-})));
+}) => {
+  if (readOnly) {
+    return null;
+  }
+  return /*#__PURE__*/React__default.createElement("div", Object.assign({}, props, {
+    className: cn({
+      'text-grey-700': disabled,
+      'text-grey-500': !disabled
+    })
+  }));
+};
 const Trigger = /*#__PURE__*/React__default.forwardRef(function Select2Trigger(props, ref) {
   const {
     multiple,
@@ -53,13 +59,14 @@ const Button = /*#__PURE__*/React__default.forwardRef(function Select2TriggerBut
     open,
     readOnly
   } = useSelect2Context();
-  const className = cn('cursor-pointer px-1.5 h-fit', getInputClasses({
+  const className = cn('px-1.5 h-fit', getInputClasses({
     ...props,
     disabled,
     highlighted,
     invalid,
     readOnly
   }).replace('w-full', '').replace('px-2', ''), getFontSize(fontSize), {
+    'select-text': readOnly,
     'w-full': !((_props$className = props.className) !== null && _props$className !== void 0 && _props$className.includes('w-'))
   }, props.className);
   const handleClick = event => {
@@ -71,17 +78,28 @@ const Button = /*#__PURE__*/React__default.forwardRef(function Select2TriggerBut
       onClick(event);
     }
   };
+  // select the value text if the select is readonly
+  const handleFocus = event => {
+    if (readOnly) {
+      const value = event.currentTarget.querySelector(':first-child');
+      if (value) {
+        var _window$getSelection, _window$getSelection$;
+        (_window$getSelection = window.getSelection()) === null || _window$getSelection === void 0 ? void 0 : (_window$getSelection$ = _window$getSelection.selectAllChildren) === null || _window$getSelection$ === void 0 ? void 0 : _window$getSelection$.call(_window$getSelection, value);
+      }
+    }
+  };
   return /*#__PURE__*/React__default.createElement("button", Object.assign({}, otherProps, {
     "aria-invalid": invalid ? true : undefined,
     "aria-readonly": readOnly ? true : undefined,
     className: className,
     disabled: disabled,
     onClick: handleClick,
+    onFocus: handleFocus,
     ref: ref,
     role: "combobox",
-    tabIndex: disabled || readOnly ? -1 : tabIndex,
+    tabIndex: disabled ? -1 : tabIndex,
     type: "button"
-  }), children, /*#__PURE__*/React__default.createElement(Icon, {
+  }), children, readOnly ? null : /*#__PURE__*/React__default.createElement(Icon, {
     name: open ? 'chevron-up' : 'chevron-down',
     className: "pointer-events-none -mr-1 ml-auto"
   }));
@@ -104,7 +122,8 @@ const Single = /*#__PURE__*/React__default.forwardRef(function Select2TriggerSin
   let output;
   if (placeholder && currentValue === undefined) {
     output = /*#__PURE__*/React__default.createElement(Placeholder, {
-      disabled: disabled
+      disabled: disabled,
+      readOnly: readOnly
     }, placeholder);
   } else if (currentValue) {
     if (tags && emptyValue !== value) {
@@ -157,7 +176,8 @@ const Multiple = /*#__PURE__*/React__default.forwardRef(function Select2TriggerM
     }, /*#__PURE__*/React__default.createElement("div", {
       className: "flex flex-wrap gap-1"
     }, valuesAsChildren.length === 0 ? ( /*#__PURE__*/React__default.createElement(Placeholder, {
-      disabled: disabled
+      disabled: disabled,
+      readOnly: readOnly
     }, placeholder)) : valuesAsChildren.map(child => ( /*#__PURE__*/React__default.createElement(Tag, {
       key: String(child.props.value),
       className: "truncate",
@@ -217,7 +237,8 @@ const MultipleValue = ({
     className: "flex gap-1 truncate",
     ref: el => setContentRef(el)
   }, valuesAsChildren.length === 0 ? ( /*#__PURE__*/React__default.createElement(Placeholder, {
-    disabled: disabled
+    disabled: disabled,
+    readOnly: readOnly
   }, placeholder)) : valuesAsChildren.map((child, index) => {
     const tag = /*#__PURE__*/React__default.createElement(Tag, {
       key: String(child.props.value),

package/dist/esm/packages/taco/src/components/Select2/components/Trigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"Trigger.js","sources":["../../../../../../../../src/components/Select2/components/Trigger.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { Tag } from '../../Tag/Tag';\nimport { Tooltip } from '../../Tooltip/Tooltip';\nimport { Icon } from '../../Icon/Icon';\nimport { Badge } from '../../Badge/Badge';\nimport { getInputClasses } from '../../Input/util';\nimport { Select2OptionValue } from '../types';\nimport { useSelect2Context } from './Context';\nimport { Select2OptionProps } from './Option';\nimport { getIndexOfFirstChildOverflowingParent } from '../../../utils/dom';\nimport { ScrollArea } from '../../ScrollArea/ScrollArea';\nimport { useMergedRef } from '../../../hooks/useMergedRef';\nimport { getFontSize } from '../utilities';\n\ntype Select2TriggerProps = Omit<React.HTMLAttributes<HTMLButtonElement>, 'children' | 'defaultValue' | 'onChange' | 'value'> & {\n    emptyValue?: Select2OptionValue;\n    placeholder?: string;\n    children: React.ReactElement<Select2OptionProps>[];\n};\n\nconst Placeholder = ({ disabled, ...props }) => (\n    <div {...props} className={cn({ 'text-grey-700': disabled, 'text-grey-500': !disabled })} />\n);\n\nexport const Trigger = React.forwardRef<HTMLButtonElement, Select2TriggerProps>(function Select2Trigger(props, ref) {\n    const { multiple, value } = useSelect2Context();\n\n    if (Array.isArray(value) || multiple) {\n        const values = Array.isArray(value) ? value : value !== undefined ? [value] : undefined;\n        return <Multiple {...props} ref={ref} values={values} />;\n    }\n\n    return <Single {...props} ref={ref} value={value} />;\n});\n\ntype ButtonProps = React.HTMLAttributes<HTMLButtonElement> &\n    Omit<Select2TriggerProps, 'children' | 'open' | 'setValue' | 'value'>;\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function Select2TriggerButton(props, ref) {\n    const { children, onClick, tabIndex = 0, ...otherProps } = props;\n    const { disabled, fontSize, highlighted, invalid, open, readOnly } = useSelect2Context();\n\n    const className = cn(\n        'cursor-pointer px-1.5 h-fit',\n        getInputClasses({ ...props, disabled, highlighted, invalid, readOnly })\n            .replace('w-full', '')\n            .replace('px-2', ''),\n        getFontSize(fontSize),\n        {\n            'w-full': !props.className?.includes('w-'),\n        },\n        props.className\n    );\n\n    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n        if (disabled || readOnly) {\n            event.preventDefault();\n            return;\n        }\n\n        if (typeof onClick === 'function') {\n            onClick(event);\n        }\n    };\n\n    return (\n        <button\n            {...otherProps}\n            aria-invalid={invalid ? true : undefined}\n            aria-readonly={readOnly ? true : undefined}\n            className={className}\n            disabled={disabled}\n            onClick={handleClick}\n            ref={ref}\n            role=\"combobox\"\n            tabIndex={disabled || readOnly ? -1 : tabIndex}\n            type=\"button\">\n            {children}\n            <Icon name={open ? 'chevron-up' : 'chevron-down'} className=\"pointer-events-none -mr-1 ml-auto\" />\n        </button>\n    );\n});\n\ntype SingleProps = Omit<Select2TriggerProps, 'value'> & { value?: Select2OptionValue; placeholder?: string };\n\nconst Single = React.forwardRef<HTMLButtonElement, SingleProps>(function Select2TriggerSingle(props, ref) {\n    const { children, emptyValue, value, placeholder, ...buttonProps } = props;\n    const { disabled, readOnly, tags } = useSelect2Context();\n    const contentClassName = cn('truncate items-center gap-1');\n\n    const currentValue = children.find(matchesValue(value));\n\n    let output;\n\n    if (placeholder && currentValue === undefined) {\n        output = <Placeholder disabled={disabled}>{placeholder}</Placeholder>;\n    } else if (currentValue) {\n        if (tags && emptyValue !== value) {\n            output = (\n                <Tag\n                    className=\"truncate\"\n                    color={currentValue.props.color}\n                    disabled={disabled}\n                    icon={currentValue.props.prefix}\n                    readOnly={readOnly}>\n                    {currentValue.props.children}\n                </Tag>\n            );\n        } else {\n            output = (\n                <>\n                    {currentValue.props.prefix ? (\n                        typeof currentValue.props.prefix === 'string' ? (\n                            <Icon name={currentValue.props.prefix} className=\"mr-1 !h-5 !w-5\" />\n                        ) : (\n                            currentValue.props.prefix\n                        )\n                    ) : null}\n                    {currentValue.props.children}\n                </>\n            );\n        }\n    }\n\n    return (\n        <Button {...buttonProps} ref={ref}>\n            <div className={contentClassName}>{output}</div>\n        </Button>\n    );\n});\n\ntype MultipleProps = Omit<Select2TriggerProps, 'value'> & {\n    values?: Select2OptionValue[];\n};\n\nconst Multiple = React.forwardRef<HTMLButtonElement, MultipleProps>(function Select2TriggerMultiple(props, ref) {\n    const { children, emptyValue: _, values = [], placeholder, ...buttonProps } = props;\n    const { disabled, open, readOnly, setValue, tags } = useSelect2Context();\n    const buttonRef = useMergedRef<HTMLButtonElement>(ref);\n\n    const valuesAsChildren = values\n        .map(value => children.find(c => c.props.value === value))\n        .filter(c => !!c) as React.ReactElement<Select2OptionProps>[];\n\n    let content;\n    let { className } = buttonProps;\n\n    if (open) {\n        className = cn('!absolute z-20 !h-fit', buttonProps.className);\n        content = (\n            <ScrollArea className=\"my-1 flex max-h-[5.5rem] flex-col\">\n                <div className=\"flex flex-wrap gap-1\">\n                    {valuesAsChildren.length === 0 ? (\n                        <Placeholder disabled={disabled}>{placeholder}</Placeholder>\n                    ) : (\n                        valuesAsChildren.map(child => (\n                            <Tag\n                                key={String(child.props.value)}\n                                className=\"truncate\"\n                                color={tags ? child.props.color : undefined}\n                                disabled={disabled}\n                                icon={child.props.prefix}\n                                onDelete={event => {\n                                    event?.stopPropagation();\n                                    event?.preventDefault();\n\n                                    if (!disabled && !readOnly) {\n                                        setValue(child.props.value);\n                                    }\n                                }}\n                                readOnly={readOnly}>\n                                {child.props.children}\n                            </Tag>\n                        ))\n                    )}\n                </div>\n            </ScrollArea>\n        );\n    } else {\n        content = <MultipleValue key={String(open)} valuesAsChildren={valuesAsChildren} placeholder={placeholder} />;\n    }\n\n    return (\n        <div\n            className=\"relative inline-flex h-fit flex-grow\"\n            data-taco=\"select2-container\"\n            style={{ width: open ? buttonRef.current?.offsetWidth : undefined }}>\n            <Button {...buttonProps} className={className} ref={buttonRef}>\n                {content}\n            </Button>\n        </div>\n    );\n});\n\ntype MultipleValueProps = Omit<Select2TriggerProps, 'value' | 'children'> & {\n    valuesAsChildren: React.ReactElement<Select2OptionProps>[];\n    placeholder?: string;\n};\n\nconst MultipleValue = ({ valuesAsChildren, placeholder }: MultipleValueProps) => {\n    const { disabled, open, readOnly, setValue, tags } = useSelect2Context();\n    const [contentRef, setContentRef] = React.useState<HTMLDivElement | null>(null);\n    const boundaryIndex = contentRef ? getIndexOfFirstChildOverflowingParent(contentRef, 30) : undefined;\n\n    const createClickHandler = tagValue => event => {\n        event?.stopPropagation();\n        event?.preventDefault();\n\n        if (!disabled && !readOnly) {\n            setValue(tagValue);\n        }\n    };\n\n    return (\n        <div className=\"relative flex items-center gap-1 overflow-hidden\">\n            <div className=\"flex gap-1 truncate\" ref={el => setContentRef(el)}>\n                {valuesAsChildren.length === 0 ? (\n                    <Placeholder disabled={disabled}>{placeholder}</Placeholder>\n                ) : (\n                    valuesAsChildren.map((child, index) => {\n                        const tag = (\n                            <Tag\n                                key={String(child.props.value)}\n                                className={cn('cursor-pointer', {\n                                    truncate: index === boundaryIndex,\n                                    hidden: boundaryIndex !== undefined && boundaryIndex !== null ? index > boundaryIndex : false,\n                                })}\n                                color={tags ? child.props.color : undefined}\n                                disabled={disabled}\n                                icon={child.props.prefix}\n                                onDelete={open ? createClickHandler(child.props.value) : undefined}\n                                readOnly={readOnly}>\n                                {child.props.children}\n                            </Tag>\n                        );\n\n                        if (index === boundaryIndex) {\n                            return (\n                                <Tooltip key={String(child.props.value)} title={String(child.props.children)}>\n                                    {tag}\n                                </Tooltip>\n                            );\n                        }\n\n                        return tag;\n                    })\n                )}\n            </div>\n            {boundaryIndex !== undefined && boundaryIndex !== null && boundaryIndex < valuesAsChildren.length - 1 ? (\n                <Tooltip\n                    title={valuesAsChildren\n                        .slice(boundaryIndex + 1)\n                        .map(child => (child ? String(child.props.children) : ''))\n                        .join(', ')}>\n                    <Badge className=\"flex-shrink-0\">+{valuesAsChildren.length - (boundaryIndex + 1)}</Badge>\n                </Tooltip>\n            ) : null}\n        </div>\n    );\n};\n\nconst matchesValue = (value: undefined | any | any[]) => (child: React.ReactElement<any>) => {\n    if (Array.isArray(value)) {\n        return value.includes(child.props.value);\n    }\n\n    return child.props.value === value;\n};\n"],"names":["Placeholder","disabled","props","React","className","cn","Trigger","forwardRef","Select2Trigger","ref","multiple","value","useSelect2Context","Array","isArray","values","undefined","Multiple","Single","Button","Select2TriggerButton","children","onClick","tabIndex","otherProps","fontSize","highlighted","invalid","open","readOnly","getInputClasses","replace","getFontSize","_props$className","includes","handleClick","event","preventDefault","role","type","Icon","name","Select2TriggerSingle","emptyValue","placeholder","buttonProps","tags","contentClassName","currentValue","find","matchesValue","output","Tag","color","icon","prefix","Select2TriggerMultiple","_","setValue","buttonRef","useMergedRef","valuesAsChildren","map","c","filter","content","ScrollArea","length","child","key","String","onDelete","stopPropagation","MultipleValue","style","width","_buttonRef$current","current","offsetWidth","contentRef","setContentRef","useState","boundaryIndex","getIndexOfFirstChildOverflowingParent","createClickHandler","tagValue","el","index","tag","truncate","hidden","Tooltip","title","slice","join","Badge"],"mappings":"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"}
+{"version":3,"file":"Trigger.js","sources":["../../../../../../../../src/components/Select2/components/Trigger.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { Tag } from '../../Tag/Tag';\nimport { Tooltip } from '../../Tooltip/Tooltip';\nimport { Icon } from '../../Icon/Icon';\nimport { Badge } from '../../Badge/Badge';\nimport { getInputClasses } from '../../Input/util';\nimport { Select2OptionValue } from '../types';\nimport { useSelect2Context } from './Context';\nimport { Select2OptionProps } from './Option';\nimport { getIndexOfFirstChildOverflowingParent } from '../../../utils/dom';\nimport { ScrollArea } from '../../ScrollArea/ScrollArea';\nimport { useMergedRef } from '../../../hooks/useMergedRef';\nimport { getFontSize } from '../utilities';\n\ntype Select2TriggerProps = Omit<React.HTMLAttributes<HTMLButtonElement>, 'children' | 'defaultValue' | 'onChange' | 'value'> & {\n    emptyValue?: Select2OptionValue;\n    placeholder?: string;\n    children: React.ReactElement<Select2OptionProps>[];\n};\n\nconst Placeholder = ({ disabled, readOnly, ...props }) => {\n    if (readOnly) {\n        return null;\n    }\n    return <div {...props} className={cn({ 'text-grey-700': disabled, 'text-grey-500': !disabled })} />;\n};\n\nexport const Trigger = React.forwardRef<HTMLButtonElement, Select2TriggerProps>(function Select2Trigger(props, ref) {\n    const { multiple, value } = useSelect2Context();\n\n    if (Array.isArray(value) || multiple) {\n        const values = Array.isArray(value) ? value : value !== undefined ? [value] : undefined;\n        return <Multiple {...props} ref={ref} values={values} />;\n    }\n\n    return <Single {...props} ref={ref} value={value} />;\n});\n\ntype ButtonProps = React.HTMLAttributes<HTMLButtonElement> &\n    Omit<Select2TriggerProps, 'children' | 'open' | 'setValue' | 'value'>;\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function Select2TriggerButton(props, ref) {\n    const { children, onClick, tabIndex = 0, ...otherProps } = props;\n    const { disabled, fontSize, highlighted, invalid, open, readOnly } = useSelect2Context();\n\n    const className = cn(\n        'px-1.5 h-fit',\n        getInputClasses({ ...props, disabled, highlighted, invalid, readOnly })\n            .replace('w-full', '')\n            .replace('px-2', ''),\n        getFontSize(fontSize),\n        {\n            'select-text': readOnly,\n            'w-full': !props.className?.includes('w-'),\n        },\n        props.className\n    );\n\n    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n        if (disabled || readOnly) {\n            event.preventDefault();\n            return;\n        }\n\n        if (typeof onClick === 'function') {\n            onClick(event);\n        }\n    };\n\n    // select the value text if the select is readonly\n    const handleFocus = (event: React.FocusEvent<HTMLButtonElement>) => {\n        if (readOnly) {\n            const value = event.currentTarget.querySelector(':first-child');\n\n            if (value) {\n                window.getSelection()?.selectAllChildren?.(value);\n            }\n        }\n    };\n\n    return (\n        <button\n            {...otherProps}\n            aria-invalid={invalid ? true : undefined}\n            aria-readonly={readOnly ? true : undefined}\n            className={className}\n            disabled={disabled}\n            onClick={handleClick}\n            onFocus={handleFocus}\n            ref={ref}\n            role=\"combobox\"\n            tabIndex={disabled ? -1 : tabIndex}\n            type=\"button\">\n            {children}\n            {readOnly ? null : <Icon name={open ? 'chevron-up' : 'chevron-down'} className=\"pointer-events-none -mr-1 ml-auto\" />}\n        </button>\n    );\n});\n\ntype SingleProps = Omit<Select2TriggerProps, 'value'> & { value?: Select2OptionValue; placeholder?: string };\n\nconst Single = React.forwardRef<HTMLButtonElement, SingleProps>(function Select2TriggerSingle(props, ref) {\n    const { children, emptyValue, value, placeholder, ...buttonProps } = props;\n    const { disabled, readOnly, tags } = useSelect2Context();\n    const contentClassName = cn('truncate items-center gap-1');\n\n    const currentValue = children.find(matchesValue(value));\n\n    let output;\n\n    if (placeholder && currentValue === undefined) {\n        output = (\n            <Placeholder disabled={disabled} readOnly={readOnly}>\n                {placeholder}\n            </Placeholder>\n        );\n    } else if (currentValue) {\n        if (tags && emptyValue !== value) {\n            output = (\n                <Tag\n                    className=\"truncate\"\n                    color={currentValue.props.color}\n                    disabled={disabled}\n                    icon={currentValue.props.prefix}\n                    readOnly={readOnly}>\n                    {currentValue.props.children}\n                </Tag>\n            );\n        } else {\n            output = (\n                <>\n                    {currentValue.props.prefix ? (\n                        typeof currentValue.props.prefix === 'string' ? (\n                            <Icon name={currentValue.props.prefix} className=\"mr-1 !h-5 !w-5\" />\n                        ) : (\n                            currentValue.props.prefix\n                        )\n                    ) : null}\n                    {currentValue.props.children}\n                </>\n            );\n        }\n    }\n\n    return (\n        <Button {...buttonProps} ref={ref}>\n            <div className={contentClassName}>{output}</div>\n        </Button>\n    );\n});\n\ntype MultipleProps = Omit<Select2TriggerProps, 'value'> & {\n    values?: Select2OptionValue[];\n};\n\nconst Multiple = React.forwardRef<HTMLButtonElement, MultipleProps>(function Select2TriggerMultiple(props, ref) {\n    const { children, emptyValue: _, values = [], placeholder, ...buttonProps } = props;\n    const { disabled, open, readOnly, setValue, tags } = useSelect2Context();\n    const buttonRef = useMergedRef<HTMLButtonElement>(ref);\n\n    const valuesAsChildren = values\n        .map(value => children.find(c => c.props.value === value))\n        .filter(c => !!c) as React.ReactElement<Select2OptionProps>[];\n\n    let content;\n    let { className } = buttonProps;\n\n    if (open) {\n        className = cn('!absolute z-20 !h-fit', buttonProps.className);\n        content = (\n            <ScrollArea className=\"my-1 flex max-h-[5.5rem] flex-col\">\n                <div className=\"flex flex-wrap gap-1\">\n                    {valuesAsChildren.length === 0 ? (\n                        <Placeholder disabled={disabled} readOnly={readOnly}>\n                            {placeholder}\n                        </Placeholder>\n                    ) : (\n                        valuesAsChildren.map(child => (\n                            <Tag\n                                key={String(child.props.value)}\n                                className=\"truncate\"\n                                color={tags ? child.props.color : undefined}\n                                disabled={disabled}\n                                icon={child.props.prefix}\n                                onDelete={event => {\n                                    event?.stopPropagation();\n                                    event?.preventDefault();\n\n                                    if (!disabled && !readOnly) {\n                                        setValue(child.props.value);\n                                    }\n                                }}\n                                readOnly={readOnly}>\n                                {child.props.children}\n                            </Tag>\n                        ))\n                    )}\n                </div>\n            </ScrollArea>\n        );\n    } else {\n        content = <MultipleValue key={String(open)} valuesAsChildren={valuesAsChildren} placeholder={placeholder} />;\n    }\n\n    return (\n        <div\n            className=\"relative inline-flex h-fit flex-grow\"\n            data-taco=\"select2-container\"\n            style={{ width: open ? buttonRef.current?.offsetWidth : undefined }}>\n            <Button {...buttonProps} className={className} ref={buttonRef}>\n                {content}\n            </Button>\n        </div>\n    );\n});\n\ntype MultipleValueProps = Omit<Select2TriggerProps, 'value' | 'children'> & {\n    valuesAsChildren: React.ReactElement<Select2OptionProps>[];\n    placeholder?: string;\n};\n\nconst MultipleValue = ({ valuesAsChildren, placeholder }: MultipleValueProps) => {\n    const { disabled, open, readOnly, setValue, tags } = useSelect2Context();\n    const [contentRef, setContentRef] = React.useState<HTMLDivElement | null>(null);\n    const boundaryIndex = contentRef ? getIndexOfFirstChildOverflowingParent(contentRef, 30) : undefined;\n\n    const createClickHandler = tagValue => event => {\n        event?.stopPropagation();\n        event?.preventDefault();\n\n        if (!disabled && !readOnly) {\n            setValue(tagValue);\n        }\n    };\n\n    return (\n        <div className=\"relative flex items-center gap-1 overflow-hidden\">\n            <div className=\"flex gap-1 truncate\" ref={el => setContentRef(el)}>\n                {valuesAsChildren.length === 0 ? (\n                    <Placeholder disabled={disabled} readOnly={readOnly}>\n                        {placeholder}\n                    </Placeholder>\n                ) : (\n                    valuesAsChildren.map((child, index) => {\n                        const tag = (\n                            <Tag\n                                key={String(child.props.value)}\n                                className={cn('cursor-pointer', {\n                                    truncate: index === boundaryIndex,\n                                    hidden: boundaryIndex !== undefined && boundaryIndex !== null ? index > boundaryIndex : false,\n                                })}\n                                color={tags ? child.props.color : undefined}\n                                disabled={disabled}\n                                icon={child.props.prefix}\n                                onDelete={open ? createClickHandler(child.props.value) : undefined}\n                                readOnly={readOnly}>\n                                {child.props.children}\n                            </Tag>\n                        );\n\n                        if (index === boundaryIndex) {\n                            return (\n                                <Tooltip key={String(child.props.value)} title={String(child.props.children)}>\n                                    {tag}\n                                </Tooltip>\n                            );\n                        }\n\n                        return tag;\n                    })\n                )}\n            </div>\n            {boundaryIndex !== undefined && boundaryIndex !== null && boundaryIndex < valuesAsChildren.length - 1 ? (\n                <Tooltip\n                    title={valuesAsChildren\n                        .slice(boundaryIndex + 1)\n                        .map(child => (child ? String(child.props.children) : ''))\n                        .join(', ')}>\n                    <Badge className=\"flex-shrink-0\">+{valuesAsChildren.length - (boundaryIndex + 1)}</Badge>\n                </Tooltip>\n            ) : null}\n        </div>\n    );\n};\n\nconst matchesValue = (value: undefined | any | any[]) => (child: React.ReactElement<any>) => {\n    if (Array.isArray(value)) {\n        return value.includes(child.props.value);\n    }\n\n    return child.props.value === value;\n};\n"],"names":["Placeholder","disabled","readOnly","props","React","className","cn","Trigger","forwardRef","Select2Trigger","ref","multiple","value","useSelect2Context","Array","isArray","values","undefined","Multiple","Single","Button","Select2TriggerButton","children","onClick","tabIndex","otherProps","fontSize","highlighted","invalid","open","getInputClasses","replace","getFontSize","_props$className","includes","handleClick","event","preventDefault","handleFocus","currentTarget","querySelector","_window$getSelection","_window$getSelection$","window","getSelection","selectAllChildren","call","onFocus","role","type","Icon","name","Select2TriggerSingle","emptyValue","placeholder","buttonProps","tags","contentClassName","currentValue","find","matchesValue","output","Tag","color","icon","prefix","Select2TriggerMultiple","_","setValue","buttonRef","useMergedRef","valuesAsChildren","map","c","filter","content","ScrollArea","length","child","key","String","onDelete","stopPropagation","MultipleValue","style","width","_buttonRef$current","current","offsetWidth","contentRef","setContentRef","useState","boundaryIndex","getIndexOfFirstChildOverflowingParent","createClickHandler","tagValue","el","index","tag","truncate","hidden","Tooltip","title","slice","join","Badge"],"mappings":"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"}