@economic/taco 2.46.9-alpha.0 → 2.46.9
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/components/AlertDialog/AlertDialog.d.ts +1 -2
- package/dist/components/AlertDialog/components/Content.d.ts +0 -2
- package/dist/components/Dialog/components/Content.d.ts +3 -3
- package/dist/components/Menu/components/Content.d.ts +1 -1
- package/dist/components/Menu/components/SubMenu.d.ts +1 -1
- package/dist/components/Popover/Popover.d.ts +1 -1
- package/dist/esm/packages/taco/src/components/AlertDialog/AlertDialog.js +1 -2
- package/dist/esm/packages/taco/src/components/AlertDialog/AlertDialog.js.map +1 -1
- package/dist/esm/packages/taco/src/components/AlertDialog/components/Content.js +2 -7
- package/dist/esm/packages/taco/src/components/AlertDialog/components/Content.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Dialog/components/Content.js +1 -2
- package/dist/esm/packages/taco/src/components/Dialog/components/Content.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Drawer/components/Content.js +0 -1
- package/dist/esm/packages/taco/src/components/Drawer/components/Content.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Popover/Popover.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Select/Select.js +1 -2
- package/dist/esm/packages/taco/src/components/Select/Select.js.map +1 -1
- package/dist/taco.cjs.development.js +2 -11
- 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 +17 -17
- package/tailwind.colors.js +121 -0
|
@@ -1 +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 '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}
|
|
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 '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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"}
|
|
@@ -3946,11 +3946,6 @@ const Title = /*#__PURE__*/React.forwardRef(function AlertDialogTitle(props, ref
|
|
|
3946
3946
|
className: "mr-2"
|
|
3947
3947
|
})) : undefined, props.children);
|
|
3948
3948
|
});
|
|
3949
|
-
const Description = /*#__PURE__*/React.forwardRef(function AlertDialogDescription(props, ref) {
|
|
3950
|
-
return /*#__PURE__*/React.createElement(AlertDialogPrimitive.Description, Object.assign({
|
|
3951
|
-
ref: ref
|
|
3952
|
-
}, props));
|
|
3953
|
-
});
|
|
3954
3949
|
const Content = /*#__PURE__*/React.forwardRef(function AlertDialogContent(props, ref) {
|
|
3955
3950
|
const className = cn('p-6', getDialogPositionClassnames(), getDialogStylingClassnames(), getDialogSizeClassnames('dialog'));
|
|
3956
3951
|
return /*#__PURE__*/React.createElement(AlertDialogPrimitive.Portal, null, /*#__PURE__*/React.createElement(AlertDialogPrimitive.Overlay, {
|
|
@@ -3985,7 +3980,6 @@ const AlertDialog = /*#__PURE__*/React.forwardRef(function AlertDialog(props, re
|
|
|
3985
3980
|
});
|
|
3986
3981
|
AlertDialog.Trigger = Trigger;
|
|
3987
3982
|
AlertDialog.Content = Content;
|
|
3988
|
-
AlertDialog.Description = Description;
|
|
3989
3983
|
AlertDialog.Title = Title;
|
|
3990
3984
|
AlertDialog.Cancel = Cancel;
|
|
3991
3985
|
AlertDialog.Action = Action;
|
|
@@ -6625,7 +6619,7 @@ const useDraggable = ref => {
|
|
|
6625
6619
|
};
|
|
6626
6620
|
|
|
6627
6621
|
const Title$1 = /*#__PURE__*/React.forwardRef(function DialogTitle(props, ref) {
|
|
6628
|
-
const className = cn(
|
|
6622
|
+
const className = cn('text-center', props.className);
|
|
6629
6623
|
return /*#__PURE__*/React.createElement(DialogPrimitive.Title, Object.assign({}, props, {
|
|
6630
6624
|
className: className,
|
|
6631
6625
|
ref: ref
|
|
@@ -6698,7 +6692,6 @@ const Content$4 = /*#__PURE__*/React.forwardRef(function DialogContent(props, re
|
|
|
6698
6692
|
return /*#__PURE__*/React.createElement(DialogPrimitive.Portal, null, /*#__PURE__*/React.createElement(DialogPrimitive.Overlay, {
|
|
6699
6693
|
asChild: true
|
|
6700
6694
|
}, /*#__PURE__*/React.createElement(Backdrop, null, /*#__PURE__*/React.createElement(DialogPrimitive.Content, Object.assign({}, props, {
|
|
6701
|
-
"aria-describedby": undefined,
|
|
6702
6695
|
className: className,
|
|
6703
6696
|
onEscapeKeyDown: handleEscapeKeyDown,
|
|
6704
6697
|
onInteractOutside: handleInteractOutside,
|
|
@@ -7226,7 +7219,6 @@ const DrawerContent = /*#__PURE__*/React__default.forwardRef(function Content(pr
|
|
|
7226
7219
|
return focusTrap ? (/*#__PURE__*/React__default.createElement(DialogPrimitive.Content, Object.assign({
|
|
7227
7220
|
forceMount: true
|
|
7228
7221
|
}, otherProps, {
|
|
7229
|
-
"aria-describedby": undefined,
|
|
7230
7222
|
className: contentClassName,
|
|
7231
7223
|
onEscapeKeyDown: handleEscapeKeyDown,
|
|
7232
7224
|
onInteractOutside: variant === 'overlay' ? undefined : event => event.preventDefault(),
|
|
@@ -9350,8 +9342,7 @@ const BaseSelect = /*#__PURE__*/React.forwardRef(function BaseSelect(props, ref)
|
|
|
9350
9342
|
name: popover.open ? 'chevron-up' : 'chevron-down'
|
|
9351
9343
|
}))), /*#__PURE__*/React.createElement(PopoverPrimitive.Portal, null, /*#__PURE__*/React.createElement(PopoverPrimitive.Content, {
|
|
9352
9344
|
align: "start",
|
|
9353
|
-
sideOffset: 4
|
|
9354
|
-
onEscapeKeyDown: event => event.preventDefault()
|
|
9345
|
+
sideOffset: 4
|
|
9355
9346
|
}, props.multiselect ? /*#__PURE__*/React.createElement(MultiListbox, Object.assign({}, commonListboxProps)) : /*#__PURE__*/React.createElement(Listbox, Object.assign({}, commonListboxProps)))), /*#__PURE__*/React.createElement("input", Object.assign({}, input, {
|
|
9356
9347
|
className: "hidden",
|
|
9357
9348
|
type: "text"
|