@economic/taco 1.11.0 → 1.11.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/esm/components/Combobox/Combobox.js +1 -0
- package/dist/esm/components/Combobox/Combobox.js.map +1 -1
- package/dist/esm/components/Select/Select.js +1 -0
- package/dist/esm/components/Select/Select.js.map +1 -1
- package/dist/esm/components/Tooltip/Tooltip.js +6 -3
- package/dist/esm/components/Tooltip/Tooltip.js.map +1 -1
- package/dist/taco.cjs.development.js +6 -2
- package/dist/taco.cjs.development.js.map +1 -1
- package/dist/taco.cjs.production.min.js +1 -1
- package/dist/taco.cjs.production.min.js.map +1 -1
- package/package.json +2 -2
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Combobox.js","sources":["../../../../src/components/Combobox/Combobox.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\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 '../../utils/hooks/useBoundingClientRectListener';\nimport { IconButton } from '../IconButton/IconButton';\nimport './Combobox.css';\nimport { DialogProps } from '../Dialog/Dialog';\nimport { useLocalization } from '../Provider/Provider';\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 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.Content\n align=\"start\"\n onOpenAutoFocus={event => {\n event.preventDefault();\n }}\n sideOffset={4}>\n <ScrollableList\n {...list}\n className={cn('!border-blue max-h-[calc(12rem+2px)] w-auto max-w-[theme(spacing.96)]')}\n style={{ minWidth: selectDimensions?.width }}\n tabIndex={popover.open ? 0 : -1}\n />\n </PopoverPrimitive.Content>\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","current","focus","tabIndex","tooltip","disabled","readOnly","onFocus","event","preventDefault","undefined","align","onOpenAutoFocus","sideOffset","ScrollableList","minWidth","width"],"mappings":";;;;;;;;;;MA+DaA,QAAQ,gBAAGC,UAAA,CAAiB,SAASD,QAAT,CAAkBE,KAAlB,EAAwCC,GAAxC;EACrC,MAAM;IAAEC,SAAS,EAAEC,iBAAb;IAAgCC,MAAhC;IAAwCC,KAAxC;IAA+C,GAAGC;MAAeN,KAAvE;EACA,MAAM;IAAEO,QAAF;IAAYC,MAAZ;IAAoBC,KAApB;IAA2BC,OAA3B;IAAoCC;MAASC,WAAW,CAACN,UAAD,EAAaL,GAAb,CAA9D;EACA,MAAMY,WAAW,GAAGd,MAAA,CAA6B,IAA7B,CAApB;EACA,MAAM;IAAEe;MAAUC,eAAe,EAAjC;EACA,MAAMC,gBAAgB,GAAGC,6BAA6B,CAACJ,WAAD,CAAtD;EACA,MAAMX,SAAS,GAAGgB,EAAE,CAChB,sBADgB,EAEhB;IACI,uBAAuBlB,KAAK,CAACmB;GAHjB,EAKhBhB,iBALgB,CAApB;EAQA,oBACIJ,aAAA,OAAA;IAAMG,SAAS,EAAEA;iBAAqB;IAAWG,KAAK,EAAEA;GAAxD,eACIN,aAAA,CAACqB,IAAD,oBAA2BV,QAA3B,eACIX,aAAA,CAACqB,MAAD;IAAyBC,OAAO;IAACpB,GAAG,EAAEY;GAAtC,eACId,aAAA,MAAA,oBAASQ;IAAUL,SAAS,EAAC;IAAgBD,GAAG,EAAEA;IAAlD,eACIF,aAAA,CAACuB,KAAD,oBACQb;IACJc,YAAY,EAAC;IACbf,MAAM,EACFR,KAAK,CAACmB,MAAN,gBACIpB,aAAA,CAACyB,UAAD;MACIC,UAAU,EAAC;MACXvB,SAAS,EAAC;MACVwB,IAAI,EAAEhB,OAAO,CAACiB,IAAR,GAAe,YAAf,GAA8B;MACpCC,OAAO,EAAE;;;QACLlB,OAAO,CAACmB,YAAR,CAAqB,IAArB;QACA,sBAAApB,KAAK,CAACR,GAAN,CAAU6B,OAAV,0EAAmBC,KAAnB;;MAEJC,QAAQ,EAAE,CAAC;KARf,CADJ,GAWI5B,MAAM,gBACNL,aAAA,CAACyB,UAAD;oBACgBV,KAAK,CAACP,QAAN,CAAe0B;MAC3BP,IAAI,EAAC;MACLQ,QAAQ,EAAElC,KAAK,CAACmC,QAAN,IAAkBnC,KAAK,CAACkC;MAClC9B,MAAM,EAAEA;MACRgC,OAAO,EAAGC,KAAD;;;;QAELA,KAAK,CAACC,cAAN;QACA,uBAAA7B,KAAK,CAACR,GAAN,CAAU6B,OAAV,4EAAmBC,KAAnB;;MAEJ9B,GAAG,EAAEO,MAAM,CAACP;MACZ+B,QAAQ,EAAE,CAAC;MACXC,OAAO,EAAEnB,KAAK,CAACP,QAAN,CAAe0B;KAZ5B,CADM,GAeNM;IA9BZ,CADJ,CADJ,CADJ,eAsCIxC,aAAA,CAACqB,OAAD;IACIoB,KAAK,EAAC;
|
1
|
+
{"version":3,"file":"Combobox.js","sources":["../../../../src/components/Combobox/Combobox.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\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 '../../utils/hooks/useBoundingClientRectListener';\nimport { IconButton } from '../IconButton/IconButton';\nimport './Combobox.css';\nimport { DialogProps } from '../Dialog/Dialog';\nimport { useLocalization } from '../Provider/Provider';\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 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.Content\n align=\"start\"\n className=\"z-10\"\n onOpenAutoFocus={event => {\n event.preventDefault();\n }}\n sideOffset={4}>\n <ScrollableList\n {...list}\n className={cn('!border-blue max-h-[calc(12rem+2px)] w-auto max-w-[theme(spacing.96)]')}\n style={{ minWidth: selectDimensions?.width }}\n tabIndex={popover.open ? 0 : -1}\n />\n </PopoverPrimitive.Content>\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","current","focus","tabIndex","tooltip","disabled","readOnly","onFocus","event","preventDefault","undefined","align","onOpenAutoFocus","sideOffset","ScrollableList","minWidth","width"],"mappings":";;;;;;;;;;MA+DaA,QAAQ,gBAAGC,UAAA,CAAiB,SAASD,QAAT,CAAkBE,KAAlB,EAAwCC,GAAxC;EACrC,MAAM;IAAEC,SAAS,EAAEC,iBAAb;IAAgCC,MAAhC;IAAwCC,KAAxC;IAA+C,GAAGC;MAAeN,KAAvE;EACA,MAAM;IAAEO,QAAF;IAAYC,MAAZ;IAAoBC,KAApB;IAA2BC,OAA3B;IAAoCC;MAASC,WAAW,CAACN,UAAD,EAAaL,GAAb,CAA9D;EACA,MAAMY,WAAW,GAAGd,MAAA,CAA6B,IAA7B,CAApB;EACA,MAAM;IAAEe;MAAUC,eAAe,EAAjC;EACA,MAAMC,gBAAgB,GAAGC,6BAA6B,CAACJ,WAAD,CAAtD;EACA,MAAMX,SAAS,GAAGgB,EAAE,CAChB,sBADgB,EAEhB;IACI,uBAAuBlB,KAAK,CAACmB;GAHjB,EAKhBhB,iBALgB,CAApB;EAQA,oBACIJ,aAAA,OAAA;IAAMG,SAAS,EAAEA;iBAAqB;IAAWG,KAAK,EAAEA;GAAxD,eACIN,aAAA,CAACqB,IAAD,oBAA2BV,QAA3B,eACIX,aAAA,CAACqB,MAAD;IAAyBC,OAAO;IAACpB,GAAG,EAAEY;GAAtC,eACId,aAAA,MAAA,oBAASQ;IAAUL,SAAS,EAAC;IAAgBD,GAAG,EAAEA;IAAlD,eACIF,aAAA,CAACuB,KAAD,oBACQb;IACJc,YAAY,EAAC;IACbf,MAAM,EACFR,KAAK,CAACmB,MAAN,gBACIpB,aAAA,CAACyB,UAAD;MACIC,UAAU,EAAC;MACXvB,SAAS,EAAC;MACVwB,IAAI,EAAEhB,OAAO,CAACiB,IAAR,GAAe,YAAf,GAA8B;MACpCC,OAAO,EAAE;;;QACLlB,OAAO,CAACmB,YAAR,CAAqB,IAArB;QACA,sBAAApB,KAAK,CAACR,GAAN,CAAU6B,OAAV,0EAAmBC,KAAnB;;MAEJC,QAAQ,EAAE,CAAC;KARf,CADJ,GAWI5B,MAAM,gBACNL,aAAA,CAACyB,UAAD;oBACgBV,KAAK,CAACP,QAAN,CAAe0B;MAC3BP,IAAI,EAAC;MACLQ,QAAQ,EAAElC,KAAK,CAACmC,QAAN,IAAkBnC,KAAK,CAACkC;MAClC9B,MAAM,EAAEA;MACRgC,OAAO,EAAGC,KAAD;;;;QAELA,KAAK,CAACC,cAAN;QACA,uBAAA7B,KAAK,CAACR,GAAN,CAAU6B,OAAV,4EAAmBC,KAAnB;;MAEJ9B,GAAG,EAAEO,MAAM,CAACP;MACZ+B,QAAQ,EAAE,CAAC;MACXC,OAAO,EAAEnB,KAAK,CAACP,QAAN,CAAe0B;KAZ5B,CADM,GAeNM;IA9BZ,CADJ,CADJ,CADJ,eAsCIxC,aAAA,CAACqB,OAAD;IACIoB,KAAK,EAAC;IACNtC,SAAS,EAAC;IACVuC,eAAe,EAAEJ,KAAK;MAClBA,KAAK,CAACC,cAAN;;IAEJI,UAAU,EAAE;GANhB,eAOI3C,aAAA,CAAC4C,cAAD,oBACQhC;IACJT,SAAS,EAAEgB,EAAE,CAAC,uEAAD;IACbb,KAAK,EAAE;MAAEuC,QAAQ,EAAE5B,gBAAF,aAAEA,gBAAF,uBAAEA,gBAAgB,CAAE6B;;IACrCb,QAAQ,EAAEtB,OAAO,CAACiB,IAAR,GAAe,CAAf,GAAmB,CAAC;IAJlC,CAPJ,CAtCJ,CADJ,CADJ;AAyDH,CAvEuB;;;;"}
|
@@ -71,6 +71,7 @@ const BaseSelect = /*#__PURE__*/forwardRef(function BaseSelect(props, ref) {
|
|
71
71
|
name: popover.open ? 'chevron-up' : 'chevron-down'
|
72
72
|
}))), /*#__PURE__*/createElement(Content, {
|
73
73
|
align: "start",
|
74
|
+
className: "z-10",
|
74
75
|
sideOffset: 4
|
75
76
|
}, props.multiselect ? /*#__PURE__*/createElement(MultiListbox, Object.assign({}, commonListboxProps)) : /*#__PURE__*/createElement(Listbox, Object.assign({}, commonListboxProps))), /*#__PURE__*/createElement("input", Object.assign({}, input, {
|
76
77
|
className: "hidden",
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Select.js","sources":["../../../../src/components/Select/Select.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\nimport { Icon } from '../Icon/Icon';\nimport { Listbox, MultiListbox, ListboxProps } from '../Listbox/Listbox';\nimport { useBoundingClientRectListener } from '../../utils/hooks/useBoundingClientRectListener';\nimport { useSelect } from './useSelect';\nimport { Combobox, ComboboxProps } from '../Combobox/Combobox';\nimport { Badge } from '../Badge/Badge';\nimport { getInputClasses } from '../Input/util';\n\nexport type SelectTexts = {\n /**\n * The text displayed when all options are selected when multiselect mode in on.\n */\n allOptionsSelected: string;\n};\n\nexport type BaseSelectProps = 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': 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.Content align=\"start\" sideOffset={4}>\n {props.multiselect ? <MultiListbox {...commonListboxProps} /> : <Listbox {...commonListboxProps} />}\n </PopoverPrimitive.Content>\n <input {...input} className=\"hidden\" type=\"text\" />\n </PopoverPrimitive.Root>\n </span>\n );\n});\n\nexport const Select = React.forwardRef(function Select(props: SelectProps, ref: React.Ref<HTMLInputElement>) {\n const { editable, ...otherProps } = props;\n\n if (editable) {\n return <Combobox {...otherProps} 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":";;;;;;;;;;;AAqCA,MAAMA,UAAU,gBAAGC,UAAA,CAAiB,SAASD,UAAT,CAAoBE,KAApB,EAA4CC,GAA5C;EAChC,MAAM;IAAEC,SAAF;IAAaC,SAAS,EAAEC,iBAAxB;IAA2CC,WAA3C;IAAwDC,KAAxD;IAA+D,GAAGC;MAAeP,KAAvF;EACA,MAAM;IAAEQ,MAAF;IAAUC,OAAV;IAAmBC,OAAnB;IAA4BC,KAA5B;IAAmCC,IAAnC;IAAyCC,IAAI,GAAG;MAAMC,SAAS,CAACP,UAAD,EAAaN,GAAb,CAArE;EACA,MAAMc,WAAW,GAAGhB,MAAA,CAAgC,IAAhC,CAApB;EACA,MAAMiB,gBAAgB,GAAGC,6BAA6B,CAACF,WAAD,CAAtD;EACA,MAAMZ,SAAS,GAAGe,EAAE,CAAC,6BAAD,EAAgC;IAAE,uBAAuBlB,KAAK,CAACmB;GAA/D,EAA2Ef,iBAA3E,CAApB;EACA,MAAMgB,cAAc,GAAGF,EAAE,CAACG,eAAe,CAACrB,KAAD,CAAhB,EAAyB,oBAAzB,EAA+C;IACpE,eAAeU,OAAO,CAACY;GADF,CAAzB;EAIAvB,SAAA,CAAgB;IACZ,IAAIG,SAAS,IAAIa,WAAW,CAACQ,OAA7B,EAAsC;MAClCR,WAAW,CAACQ,OAAZ,CAAoBC,KAApB;;GAFR,EAIG,EAJH;;EAMA,MAAMC,oBAAoB,GAAG;IACzB,oBACI1B,aAAA,SAAA,MAAA,eACIA,aAAA,OAAA;MAAMI,SAAS,EAAC;KAAhB,EAAgDS,IAAhD,CADJ,EAEKC,IAAI,GAAG,CAAP,iBAAYd,aAAA,CAAC2B,KAAD;MAAOvB,SAAS,EAAC;KAAjB,MAA6BU,MAA7B,CAFjB,CADJ;GADJ;;EASA,MAAMc,kBAAkB,GAAiB,EACrC,GAAGlB,OADkC;IAErCN,SAAS,EAAE,QAF0B;IAGrCyB,OAAO,EAAEC,SAH4B;IAIrCvB,KAAK,EAAE;MAAEwB,QAAQ,EAAEd,gBAAF,aAAEA,gBAAF,uBAAEA,gBAAgB,CAAEe;KAJA;IAKrCC,QAAQ,EAAEtB,OAAO,CAACY,IAAR,GAAe,CAAf,GAAmB,CAAC;GALlC;EAQA,oBACIvB,aAAA,OAAA;IAAMI,SAAS,EAAEA;iBAAqB;IAASG,KAAK,EAAEA;GAAtD,eACIP,aAAA,CAACkC,IAAD,oBAA2BvB,QAA3B,eACIX,aAAA,CAACkC,OAAD,oBAA8BzB;IAAQL,SAAS,EAAEiB;IAAgBnB,GAAG,EAAEc;IAAtE,EACKf,KAAK,CAACkC,WAAN,GAAoBT,oBAAoB,EAAxC,gBAA6C1B,aAAA,OAAA;IAAMI,SAAS,EAAC;GAAhB,EAAgDS,IAAhD,CADlD,eAEIb,aAAA,OAAA;IAAMI,SAAS,EAAC;GAAhB,eACIJ,aAAA,CAACoC,IAAD;IAAMhC,SAAS,EAAC;IAAsBiC,IAAI,EAAE1B,OAAO,CAACY,IAAR,GAAe,YAAf,GAA8B;GAA1E,CADJ,CAFJ,CADJ,eAOIvB,aAAA,CAACkC,OAAD;IAA0BI,KAAK,EAAC;
|
1
|
+
{"version":3,"file":"Select.js","sources":["../../../../src/components/Select/Select.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\nimport { Icon } from '../Icon/Icon';\nimport { Listbox, MultiListbox, ListboxProps } from '../Listbox/Listbox';\nimport { useBoundingClientRectListener } from '../../utils/hooks/useBoundingClientRectListener';\nimport { useSelect } from './useSelect';\nimport { Combobox, ComboboxProps } from '../Combobox/Combobox';\nimport { Badge } from '../Badge/Badge';\nimport { getInputClasses } from '../Input/util';\n\nexport type SelectTexts = {\n /**\n * The text displayed when all options are selected when multiselect mode in on.\n */\n allOptionsSelected: string;\n};\n\nexport type BaseSelectProps = 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': 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.Content align=\"start\" className=\"z-10\" sideOffset={4}>\n {props.multiselect ? <MultiListbox {...commonListboxProps} /> : <Listbox {...commonListboxProps} />}\n </PopoverPrimitive.Content>\n <input {...input} className=\"hidden\" type=\"text\" />\n </PopoverPrimitive.Root>\n </span>\n );\n});\n\nexport const Select = React.forwardRef(function Select(props: SelectProps, ref: React.Ref<HTMLInputElement>) {\n const { editable, ...otherProps } = props;\n\n if (editable) {\n return <Combobox {...otherProps} 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":";;;;;;;;;;;AAqCA,MAAMA,UAAU,gBAAGC,UAAA,CAAiB,SAASD,UAAT,CAAoBE,KAApB,EAA4CC,GAA5C;EAChC,MAAM;IAAEC,SAAF;IAAaC,SAAS,EAAEC,iBAAxB;IAA2CC,WAA3C;IAAwDC,KAAxD;IAA+D,GAAGC;MAAeP,KAAvF;EACA,MAAM;IAAEQ,MAAF;IAAUC,OAAV;IAAmBC,OAAnB;IAA4BC,KAA5B;IAAmCC,IAAnC;IAAyCC,IAAI,GAAG;MAAMC,SAAS,CAACP,UAAD,EAAaN,GAAb,CAArE;EACA,MAAMc,WAAW,GAAGhB,MAAA,CAAgC,IAAhC,CAApB;EACA,MAAMiB,gBAAgB,GAAGC,6BAA6B,CAACF,WAAD,CAAtD;EACA,MAAMZ,SAAS,GAAGe,EAAE,CAAC,6BAAD,EAAgC;IAAE,uBAAuBlB,KAAK,CAACmB;GAA/D,EAA2Ef,iBAA3E,CAApB;EACA,MAAMgB,cAAc,GAAGF,EAAE,CAACG,eAAe,CAACrB,KAAD,CAAhB,EAAyB,oBAAzB,EAA+C;IACpE,eAAeU,OAAO,CAACY;GADF,CAAzB;EAIAvB,SAAA,CAAgB;IACZ,IAAIG,SAAS,IAAIa,WAAW,CAACQ,OAA7B,EAAsC;MAClCR,WAAW,CAACQ,OAAZ,CAAoBC,KAApB;;GAFR,EAIG,EAJH;;EAMA,MAAMC,oBAAoB,GAAG;IACzB,oBACI1B,aAAA,SAAA,MAAA,eACIA,aAAA,OAAA;MAAMI,SAAS,EAAC;KAAhB,EAAgDS,IAAhD,CADJ,EAEKC,IAAI,GAAG,CAAP,iBAAYd,aAAA,CAAC2B,KAAD;MAAOvB,SAAS,EAAC;KAAjB,MAA6BU,MAA7B,CAFjB,CADJ;GADJ;;EASA,MAAMc,kBAAkB,GAAiB,EACrC,GAAGlB,OADkC;IAErCN,SAAS,EAAE,QAF0B;IAGrCyB,OAAO,EAAEC,SAH4B;IAIrCvB,KAAK,EAAE;MAAEwB,QAAQ,EAAEd,gBAAF,aAAEA,gBAAF,uBAAEA,gBAAgB,CAAEe;KAJA;IAKrCC,QAAQ,EAAEtB,OAAO,CAACY,IAAR,GAAe,CAAf,GAAmB,CAAC;GALlC;EAQA,oBACIvB,aAAA,OAAA;IAAMI,SAAS,EAAEA;iBAAqB;IAASG,KAAK,EAAEA;GAAtD,eACIP,aAAA,CAACkC,IAAD,oBAA2BvB,QAA3B,eACIX,aAAA,CAACkC,OAAD,oBAA8BzB;IAAQL,SAAS,EAAEiB;IAAgBnB,GAAG,EAAEc;IAAtE,EACKf,KAAK,CAACkC,WAAN,GAAoBT,oBAAoB,EAAxC,gBAA6C1B,aAAA,OAAA;IAAMI,SAAS,EAAC;GAAhB,EAAgDS,IAAhD,CADlD,eAEIb,aAAA,OAAA;IAAMI,SAAS,EAAC;GAAhB,eACIJ,aAAA,CAACoC,IAAD;IAAMhC,SAAS,EAAC;IAAsBiC,IAAI,EAAE1B,OAAO,CAACY,IAAR,GAAe,YAAf,GAA8B;GAA1E,CADJ,CAFJ,CADJ,eAOIvB,aAAA,CAACkC,OAAD;IAA0BI,KAAK,EAAC;IAAQlC,SAAS,EAAC;IAAOmC,UAAU,EAAE;GAArE,EACKtC,KAAK,CAACkC,WAAN,gBAAoBnC,aAAA,CAACwC,YAAD,oBAAkBZ,mBAAlB,CAApB,gBAA+D5B,aAAA,CAACyC,OAAD,oBAAab,mBAAb,CADpE,CAPJ,eAUI5B,aAAA,QAAA,oBAAWY;IAAOR,SAAS,EAAC;IAASsC,IAAI,EAAC;IAA1C,CAVJ,CADJ,CADJ;AAgBH,CAjDkB,CAAnB;MAmDaC,MAAM,gBAAG3C,UAAA,CAAiB,SAAS2C,MAAT,CAAgB1C,KAAhB,EAAoCC,GAApC;EACnC,MAAM;IAAE0C,QAAF;IAAY,GAAGpC;MAAeP,KAApC;;EAEA,IAAI2C,QAAJ,EAAc;IACV,oBAAO5C,aAAA,CAAC6C,QAAD,oBAAcrC;MAAYsC,MAAM,EAAEhB;MAAWiB,MAAM;MAAC7C,GAAG,EAAEA;MAAzD,CAAP;;;EAGJ,oBAAOF,aAAA,CAACD,UAAD,oBAAgBS;IAAYN,GAAG,EAAEA;IAAjC,CAAP;AACH,CARqB;;;;"}
|
@@ -1,5 +1,6 @@
|
|
1
1
|
import { forwardRef, createElement } from 'react';
|
2
|
-
import
|
2
|
+
import cn from 'classnames';
|
3
|
+
import { Root, Trigger, Portal, Content, Arrow } from '@radix-ui/react-tooltip';
|
3
4
|
|
4
5
|
const Tooltip = /*#__PURE__*/forwardRef(function Tooltip(props, ref) {
|
5
6
|
const {
|
@@ -8,13 +9,15 @@ const Tooltip = /*#__PURE__*/forwardRef(function Tooltip(props, ref) {
|
|
8
9
|
placement,
|
9
10
|
...otherProps
|
10
11
|
} = props;
|
12
|
+
const className = cn('z-[999]', otherProps.className);
|
11
13
|
return /*#__PURE__*/createElement(Root, {
|
12
14
|
delayDuration: 50
|
13
15
|
}, /*#__PURE__*/createElement(Trigger, {
|
14
16
|
asChild: true,
|
15
17
|
ref: ref
|
16
|
-
}, children), /*#__PURE__*/createElement(Content, Object.assign({}, otherProps, {
|
18
|
+
}, children), /*#__PURE__*/createElement(Portal, null, /*#__PURE__*/createElement(Content, Object.assign({}, otherProps, {
|
17
19
|
asChild: true,
|
20
|
+
className: className,
|
18
21
|
side: placement,
|
19
22
|
sideOffset: 3
|
20
23
|
}), /*#__PURE__*/createElement("div", {
|
@@ -25,7 +28,7 @@ const Tooltip = /*#__PURE__*/forwardRef(function Tooltip(props, ref) {
|
|
25
28
|
}
|
26
29
|
}, /*#__PURE__*/createElement(Arrow, {
|
27
30
|
className: "fill-purple stroke-purple -mt-px"
|
28
|
-
}), title)));
|
31
|
+
}), title))));
|
29
32
|
});
|
30
33
|
|
31
34
|
export { Tooltip };
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Tooltip.js","sources":["../../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as TooltipPrimitive from '@radix-ui/react-tooltip';\n\nexport type TooltipProps = React.HTMLAttributes<HTMLDivElement> & {\n /** The element which activates the tooltip when hovered. Should be a single React/HTML element */\n children: React.ReactElement | any;\n /** Text displayed in the tooltip */\n title: string;\n /**\n * Placement of the tooltip relative to the reference element. Placement will be reversed if a collision occurs\n * @defaultValue bottom\n */\n placement?: 'top' | 'right' | 'bottom' | 'left';\n};\n\nexport const Tooltip = React.forwardRef(function Tooltip(props: TooltipProps, ref: React.Ref<HTMLElement>) {\n const { title, children, placement, ...otherProps } = props;\n\n return (\n <TooltipPrimitive.Root delayDuration={50}>\n <TooltipPrimitive.Trigger asChild ref={ref as any}>\n {children}\n </TooltipPrimitive.Trigger>\n <TooltipPrimitive.Content {...otherProps} asChild side={placement} sideOffset={3}>\n
|
1
|
+
{"version":3,"file":"Tooltip.js","sources":["../../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as TooltipPrimitive from '@radix-ui/react-tooltip';\nimport cn from 'classnames';\n\nexport type TooltipProps = React.HTMLAttributes<HTMLDivElement> & {\n /** The element which activates the tooltip when hovered. Should be a single React/HTML element */\n children: React.ReactElement | any;\n /** Text displayed in the tooltip */\n title: string;\n /**\n * Placement of the tooltip relative to the reference element. Placement will be reversed if a collision occurs\n * @defaultValue bottom\n */\n placement?: 'top' | 'right' | 'bottom' | 'left';\n};\n\nexport const Tooltip = React.forwardRef(function Tooltip(props: TooltipProps, ref: React.Ref<HTMLElement>) {\n const { title, children, placement, ...otherProps } = props;\n const className = cn('z-[999]', otherProps.className);\n\n return (\n <TooltipPrimitive.Root delayDuration={50}>\n <TooltipPrimitive.Trigger asChild ref={ref as any}>\n {children}\n </TooltipPrimitive.Trigger>\n <TooltipPrimitive.Portal>\n <TooltipPrimitive.Content {...otherProps} asChild className={className} side={placement} sideOffset={3}>\n <div\n className=\"wcag-purple xs:max-w-[theme(spacing.56)] max-w-[theme(spacing.32)] animate-[fade-in_150ms] rounded-sm px-2 py-1 text-xs font-bold opacity-90\"\n data-taco=\"tooltip\"\n style={{\n transformOrigin: 'var(--radix-tooltip-content-transform-origin)',\n }}>\n <TooltipPrimitive.Arrow className=\"fill-purple stroke-purple -mt-px\" />\n {title}\n </div>\n </TooltipPrimitive.Content>\n </TooltipPrimitive.Portal>\n </TooltipPrimitive.Root>\n );\n});\n"],"names":["Tooltip","React","props","ref","title","children","placement","otherProps","className","cn","TooltipPrimitive","delayDuration","asChild","side","sideOffset","style","transformOrigin"],"mappings":";;;;MAgBaA,OAAO,gBAAGC,UAAA,CAAiB,SAASD,OAAT,CAAiBE,KAAjB,EAAsCC,GAAtC;EACpC,MAAM;IAAEC,KAAF;IAASC,QAAT;IAAmBC,SAAnB;IAA8B,GAAGC;MAAeL,KAAtD;EACA,MAAMM,SAAS,GAAGC,EAAE,CAAC,SAAD,EAAYF,UAAU,CAACC,SAAvB,CAApB;EAEA,oBACIP,aAAA,CAACS,IAAD;IAAuBC,aAAa,EAAE;GAAtC,eACIV,aAAA,CAACS,OAAD;IAA0BE,OAAO;IAACT,GAAG,EAAEA;GAAvC,EACKE,QADL,CADJ,eAIIJ,aAAA,CAACS,MAAD,MAAA,eACIT,aAAA,CAACS,OAAD,oBAA8BH;IAAYK,OAAO;IAACJ,SAAS,EAAEA;IAAWK,IAAI,EAAEP;IAAWQ,UAAU,EAAE;IAArG,eACIb,aAAA,MAAA;IACIO,SAAS,EAAC;iBACA;IACVO,KAAK,EAAE;MACHC,eAAe,EAAE;;GAJzB,eAMIf,aAAA,CAACS,KAAD;IAAwBF,SAAS,EAAC;GAAlC,CANJ,EAOKJ,KAPL,CADJ,CADJ,CAJJ,CADJ;AAoBH,CAxBsB;;;;"}
|
@@ -3443,13 +3443,15 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(props, ref) {
|
|
3443
3443
|
placement,
|
3444
3444
|
...otherProps
|
3445
3445
|
} = props;
|
3446
|
+
const className = cn('z-[999]', otherProps.className);
|
3446
3447
|
return /*#__PURE__*/React.createElement(TooltipPrimitive.Root, {
|
3447
3448
|
delayDuration: 50
|
3448
3449
|
}, /*#__PURE__*/React.createElement(TooltipPrimitive.Trigger, {
|
3449
3450
|
asChild: true,
|
3450
3451
|
ref: ref
|
3451
|
-
}, children), /*#__PURE__*/React.createElement(TooltipPrimitive.Content, Object.assign({}, otherProps, {
|
3452
|
+
}, children), /*#__PURE__*/React.createElement(TooltipPrimitive.Portal, null, /*#__PURE__*/React.createElement(TooltipPrimitive.Content, Object.assign({}, otherProps, {
|
3452
3453
|
asChild: true,
|
3454
|
+
className: className,
|
3453
3455
|
side: placement,
|
3454
3456
|
sideOffset: 3
|
3455
3457
|
}), /*#__PURE__*/React.createElement("div", {
|
@@ -3460,7 +3462,7 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(props, ref) {
|
|
3460
3462
|
}
|
3461
3463
|
}, /*#__PURE__*/React.createElement(TooltipPrimitive.Arrow, {
|
3462
3464
|
className: "fill-purple stroke-purple -mt-px"
|
3463
|
-
}), title)));
|
3465
|
+
}), title))));
|
3464
3466
|
});
|
3465
3467
|
|
3466
3468
|
const getButtonClasses = () => {
|
@@ -5186,6 +5188,7 @@ const Combobox = /*#__PURE__*/React.forwardRef(function Combobox(props, ref) {
|
|
5186
5188
|
}) : undefined
|
5187
5189
|
})))), /*#__PURE__*/React.createElement(PopoverPrimitive.Content, {
|
5188
5190
|
align: "start",
|
5191
|
+
className: "z-10",
|
5189
5192
|
onOpenAutoFocus: event => {
|
5190
5193
|
event.preventDefault();
|
5191
5194
|
},
|
@@ -7385,6 +7388,7 @@ const BaseSelect = /*#__PURE__*/React.forwardRef(function BaseSelect(props, ref)
|
|
7385
7388
|
name: popover.open ? 'chevron-up' : 'chevron-down'
|
7386
7389
|
}))), /*#__PURE__*/React.createElement(PopoverPrimitive.Content, {
|
7387
7390
|
align: "start",
|
7391
|
+
className: "z-10",
|
7388
7392
|
sideOffset: 4
|
7389
7393
|
}, props.multiselect ? /*#__PURE__*/React.createElement(MultiListbox, Object.assign({}, commonListboxProps)) : /*#__PURE__*/React.createElement(Listbox, Object.assign({}, commonListboxProps))), /*#__PURE__*/React.createElement("input", Object.assign({}, input, {
|
7390
7394
|
className: "hidden",
|