@economic/taco 0.0.33-alpha.0 → 0.0.33-alpha.6
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/components/Listbox/useMultiListbox.d.ts +1 -1
- package/dist/components/Select/useSelect.d.ts +13 -8
- package/dist/esm/components/Banner/Banner.js +7 -5
- package/dist/esm/components/Banner/Banner.js.map +1 -1
- package/dist/esm/components/Checkbox/Checkbox.js +15 -18
- package/dist/esm/components/Checkbox/Checkbox.js.map +1 -1
- package/dist/esm/components/Datepicker/Datepicker.js +48 -52
- package/dist/esm/components/Datepicker/Datepicker.js.map +1 -1
- package/dist/esm/components/Dialog/Dialog.js +39 -58
- package/dist/esm/components/Dialog/Dialog.js.map +1 -1
- package/dist/esm/components/Field/Field.js +10 -12
- package/dist/esm/components/Field/Field.js.map +1 -1
- package/dist/esm/components/Form/Form.js +6 -8
- package/dist/esm/components/Form/Form.js.map +1 -1
- package/dist/esm/components/Group/Group.js +6 -8
- package/dist/esm/components/Group/Group.js.map +1 -1
- package/dist/esm/components/Hanger/Hanger.js +25 -33
- package/dist/esm/components/Hanger/Hanger.js.map +1 -1
- package/dist/esm/components/Icon/Icon.js +7 -8
- package/dist/esm/components/Icon/Icon.js.map +1 -1
- package/dist/esm/components/IconButton/IconButton.js +9 -11
- package/dist/esm/components/IconButton/IconButton.js.map +1 -1
- package/dist/esm/components/Input/Input.js +26 -24
- package/dist/esm/components/Input/Input.js.map +1 -1
- package/dist/esm/components/Listbox/Listbox.js +24 -25
- package/dist/esm/components/Listbox/Listbox.js.map +1 -1
- package/dist/esm/components/Listbox/useListbox.js +1 -1
- package/dist/esm/components/Listbox/useListbox.js.map +1 -1
- package/dist/esm/components/Listbox/useMultiListbox.js +1 -0
- package/dist/esm/components/Listbox/useMultiListbox.js.map +1 -1
- package/dist/esm/components/Listbox/util.js +4 -7
- package/dist/esm/components/Listbox/util.js.map +1 -1
- package/dist/esm/components/Menu/Menu.js +20 -43
- package/dist/esm/components/Menu/Menu.js.map +1 -1
- package/dist/esm/components/Navigation/Navigation.js +35 -44
- package/dist/esm/components/Navigation/Navigation.js.map +1 -1
- package/dist/esm/components/Pagination/Pagination.js +39 -56
- package/dist/esm/components/Pagination/Pagination.js.map +1 -1
- package/dist/esm/components/Popover/Popover.js +29 -34
- package/dist/esm/components/Popover/Popover.js.map +1 -1
- package/dist/esm/components/Progress/Progress.js +11 -15
- package/dist/esm/components/Progress/Progress.js.map +1 -1
- package/dist/esm/components/Provider/Provider.js +13 -18
- package/dist/esm/components/Provider/Provider.js.map +1 -1
- package/dist/esm/components/RadioGroup/RadioGroup.js +45 -57
- package/dist/esm/components/RadioGroup/RadioGroup.js.map +1 -1
- package/dist/esm/components/SearchInput/SearchInput.js +10 -11
- package/dist/esm/components/SearchInput/SearchInput.js.map +1 -1
- package/dist/esm/components/Select/Select.js +30 -31
- package/dist/esm/components/Select/Select.js.map +1 -1
- package/dist/esm/components/Select/useSelect.js +48 -30
- package/dist/esm/components/Select/useSelect.js.map +1 -1
- package/dist/taco.cjs.development.js +570 -667
- 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
@@ -5,5 +5,5 @@ declare type useListbox = {
|
|
5
5
|
list: ScrollableListProps;
|
6
6
|
input: Omit<React.HTMLAttributes<HTMLInputElement>, 'defaultValue'>;
|
7
7
|
};
|
8
|
-
export declare const useMultiListbox: ({ data: externalData, defaultValue, disabled, id: nativeId, name, onClick, onChange, onFocus, onKeyDown, value, ...otherProps }: ListboxProps, ref: React.Ref<HTMLInputElement>) => useListbox;
|
8
|
+
export declare const useMultiListbox: ({ data: externalData, defaultValue, disabled, emptyValue: _, id: nativeId, name, onClick, onChange, onFocus, onKeyDown, value, ...otherProps }: ListboxProps, ref: React.Ref<HTMLInputElement>) => useListbox;
|
9
9
|
export {};
|
@@ -1,16 +1,21 @@
|
|
1
1
|
import * as React from 'react';
|
2
|
+
import * as PopoverPrimitive from '@radix-ui/react-popover';
|
2
3
|
import { SelectProps } from './Select';
|
3
4
|
import { ListboxProps } from '../Listbox/Listbox';
|
5
|
+
declare type InternalButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement>;
|
6
|
+
declare type InternalListboxProps = ListboxProps & {
|
7
|
+
ref: React.ForwardedRef<HTMLInputElement>;
|
8
|
+
};
|
9
|
+
declare type InternalInputProps = React.InputHTMLAttributes<HTMLInputElement> & {
|
10
|
+
ref: React.ForwardedRef<HTMLInputElement>;
|
11
|
+
};
|
4
12
|
declare type useSelect = React.HtmlHTMLAttributes<HTMLDivElement> & {
|
5
|
-
button:
|
6
|
-
listbox:
|
7
|
-
input:
|
8
|
-
popover:
|
9
|
-
open: boolean;
|
10
|
-
onOpenChange: (open: boolean) => void;
|
11
|
-
};
|
13
|
+
button: InternalButtonProps;
|
14
|
+
listbox: InternalListboxProps;
|
15
|
+
input: InternalInputProps;
|
16
|
+
popover: Pick<PopoverPrimitive.PopoverProps, 'onOpenChange' | 'open'>;
|
12
17
|
text: string | JSX.Element;
|
13
18
|
more?: number;
|
14
19
|
};
|
15
|
-
export declare const useSelect: ({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, data, defaultValue, disabled, emptyValue, id: nativeId, multiselect, onClick, onChange, readOnly, value, ...otherProps }: SelectProps, ref: React.Ref<HTMLInputElement>) => useSelect;
|
20
|
+
export declare const useSelect: ({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, data, defaultValue, disabled, emptyValue, id: nativeId, multiselect, onBlur, onClick, onChange, readOnly, value, ...otherProps }: SelectProps, ref: React.Ref<HTMLInputElement>) => useSelect;
|
16
21
|
export {};
|
@@ -3,11 +3,13 @@ import cn from 'classnames';
|
|
3
3
|
import { getBannerIcon } from './util.js';
|
4
4
|
import { IconButton } from '../IconButton/IconButton.js';
|
5
5
|
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
6
|
+
const Banner = /*#__PURE__*/forwardRef(function Banner(props, ref) {
|
7
|
+
const {
|
8
|
+
children,
|
9
|
+
state,
|
10
|
+
onClose
|
11
|
+
} = props;
|
12
|
+
const className = cn('bg-white relative flex items-center px-4 h-12 shadow-lg z-10', props.className);
|
11
13
|
return createElement("div", {
|
12
14
|
className: className,
|
13
15
|
"data-taco": "banner",
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Banner.js","sources":["../../../../src/components/Banner/Banner.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport cn from 'classnames';\r\nimport { State } from '../../types';\r\nimport { getBannerIcon } from './util';\r\nimport { IconButton } from '../IconButton/IconButton';\r\n\r\nexport type BannerProps = React.HTMLAttributes<HTMLDivElement> & {\r\n /** Content can be any react element, for e.g. a `div` */\r\n children: React.ReactNode;\r\n /** State will change the icon displayed in banner */\r\n state: State;\r\n onClose?: () => void;\r\n};\r\n\r\nexport const Banner = React.forwardRef(function Banner(props: BannerProps, ref: React.Ref<HTMLDivElement>) {\r\n const { children, state, onClose } = props;\r\n const className = cn('bg-white relative flex items-center px-4 h-12 shadow-lg z-10', props.className);\r\n\r\n return (\r\n <div className={className} data-taco=\"banner\" ref={ref}>\r\n {getBannerIcon(state)}\r\n {children}\r\n {onClose ? <IconButton className=\"ml-auto -mr-2\" icon=\"close\" appearance=\"discrete\" onClick={onClose} /> : null}\r\n </div>\r\n );\r\n});\r\n"],"names":["Banner","React","props","ref","children","state","onClose","className","cn","getBannerIcon","IconButton","icon","appearance","onClick"],"mappings":";;;;;
|
1
|
+
{"version":3,"file":"Banner.js","sources":["../../../../src/components/Banner/Banner.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport cn from 'classnames';\r\nimport { State } from '../../types';\r\nimport { getBannerIcon } from './util';\r\nimport { IconButton } from '../IconButton/IconButton';\r\n\r\nexport type BannerProps = React.HTMLAttributes<HTMLDivElement> & {\r\n /** Content can be any react element, for e.g. a `div` */\r\n children: React.ReactNode;\r\n /** State will change the icon displayed in banner */\r\n state: State;\r\n onClose?: () => void;\r\n};\r\n\r\nexport const Banner = React.forwardRef(function Banner(props: BannerProps, ref: React.Ref<HTMLDivElement>) {\r\n const { children, state, onClose } = props;\r\n const className = cn('bg-white relative flex items-center px-4 h-12 shadow-lg z-10', props.className);\r\n\r\n return (\r\n <div className={className} data-taco=\"banner\" ref={ref}>\r\n {getBannerIcon(state)}\r\n {children}\r\n {onClose ? <IconButton className=\"ml-auto -mr-2\" icon=\"close\" appearance=\"discrete\" onClick={onClose} /> : null}\r\n </div>\r\n );\r\n});\r\n"],"names":["Banner","React","props","ref","children","state","onClose","className","cn","getBannerIcon","IconButton","icon","appearance","onClick"],"mappings":";;;;;MAcaA,MAAM,gBAAGC,UAAA,CAAiB,SAASD,MAAT,CAAgBE,KAAhB,EAAoCC,GAApC;AACnC,QAAM;AAAEC,IAAAA,QAAF;AAAYC,IAAAA,KAAZ;AAAmBC,IAAAA;AAAnB,MAA+BJ,KAArC;AACA,QAAMK,SAAS,GAAGC,EAAE,CAAC,8DAAD,EAAiEN,KAAK,CAACK,SAAvE,CAApB;AAEA,SACIN,aAAA,MAAA;AAAKM,IAAAA,SAAS,EAAEA;iBAAqB;AAASJ,IAAAA,GAAG,EAAEA;GAAnD,EACKM,aAAa,CAACJ,KAAD,CADlB,EAEKD,QAFL,EAGKE,OAAO,GAAGL,aAAA,CAACS,UAAD;AAAYH,IAAAA,SAAS,EAAC;AAAgBI,IAAAA,IAAI,EAAC;AAAQC,IAAAA,UAAU,EAAC;AAAWC,IAAAA,OAAO,EAAEP;GAAlF,CAAH,GAAmG,IAH/G,CADJ;AAOH,CAXqB;;;;"}
|
@@ -1,35 +1,32 @@
|
|
1
|
-
import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
2
1
|
import { forwardRef, createElement } from 'react';
|
3
2
|
import cn from 'classnames';
|
4
3
|
import { Icon } from '../Icon/Icon.js';
|
5
4
|
import { Root, Indicator } from '@radix-ui/react-checkbox';
|
6
5
|
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
6
|
+
const Checkbox = /*#__PURE__*/forwardRef(function Checkbox(props, ref) {
|
7
|
+
const {
|
8
|
+
checked,
|
9
|
+
highlighted,
|
10
|
+
indeterminate,
|
11
|
+
invalid,
|
12
|
+
label,
|
13
|
+
onChange,
|
14
|
+
...otherProps
|
15
|
+
} = props;
|
16
|
+
const className = cn('bg-white h-5 w-5 border rounded text-sm flex-shrink-0 self-start mt-[0.1rem]', {
|
18
17
|
'mr-2': !!label,
|
19
18
|
'border-grey-dark text-blue focus:border-blue focus:yt-focus': !props.disabled && !invalid,
|
20
19
|
'border-grey text-blue-light cursor-not-allowed': props.disabled,
|
21
20
|
'bg-[rgba(255,255,0,0.2)] disabled:bg-[rgba(255,255,0,0.075)]': highlighted,
|
22
21
|
'border-red text-red focus:border-red focus:yt-focus-red': invalid && !props.disabled
|
23
22
|
});
|
24
|
-
|
23
|
+
let handleChange;
|
25
24
|
|
26
25
|
if (onChange) {
|
27
|
-
handleChange =
|
28
|
-
return onChange(checked === 'indeterminate' ? false : checked);
|
29
|
-
};
|
26
|
+
handleChange = checked => onChange(checked === 'indeterminate' ? false : checked);
|
30
27
|
}
|
31
28
|
|
32
|
-
|
29
|
+
const element = createElement(Root, Object.assign({}, otherProps, {
|
33
30
|
"data-taco": "checkbox",
|
34
31
|
checked: indeterminate ? 'indeterminate' : checked,
|
35
32
|
className: className,
|
@@ -43,7 +40,7 @@ var Checkbox = /*#__PURE__*/forwardRef(function Checkbox(props, ref) {
|
|
43
40
|
})));
|
44
41
|
|
45
42
|
if (label) {
|
46
|
-
|
43
|
+
const labelClassName = cn('flex items-center cursor-pointer', {
|
47
44
|
'cursor-not-allowed text-grey-dark': props.disabled
|
48
45
|
}, props.className);
|
49
46
|
return createElement("label", {
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Checkbox.js","sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport cn from 'classnames';\r\nimport * as CheckboxPrimitive from '@radix-ui/react-checkbox';\r\nimport { Icon } from '../Icon/Icon';\r\n\r\ntype CheckedState = boolean | 'indeterminate';\r\n\r\ntype CheckboxBaseProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'onChange'> & {\r\n /* Increases visual prominenance of the checkbox */\r\n highlighted?: boolean;\r\n /**\r\n * Indeterminate state should only be used with sub-checkboxes. The indeterminate state is shown if not all\r\n * sub-checkboxes are selected. This only affects the style, changing the icon in the checkbox.\r\n */\r\n indeterminate?: boolean;\r\n /* Whether the checkbox is in an invalid state */\r\n invalid?: boolean;\r\n /** Label for the checkbox */\r\n label?: React.ReactNode;\r\n /* Whether user input is required */\r\n required?: boolean;\r\n};\r\n\r\ninterface UncontrolledCheckboxProps extends CheckboxBaseProps {\r\n checked?: never;\r\n onChange?: never;\r\n /* The default checked state (uncontrolled) */\r\n defaultChecked?: boolean;\r\n}\r\n\r\ninterface ControlledCheckboxProps extends CheckboxBaseProps {\r\n defaultChecked?: never;\r\n /* The current checked state (controlled) */\r\n checked: boolean;\r\n /* Handler called when the checked state changes */\r\n onChange: (checked: boolean) => void;\r\n}\r\n\r\nexport type CheckboxProps = UncontrolledCheckboxProps | ControlledCheckboxProps;\r\n\r\nexport const Checkbox = React.forwardRef(function Checkbox(props: CheckboxProps, ref: React.Ref<HTMLButtonElement>) {\r\n const { checked, highlighted, indeterminate, invalid, label, onChange, ...otherProps } = props;\r\n\r\n const className = cn('bg-white h-5 w-5 border rounded text-sm flex-shrink-0 self-start mt-[0.1rem]', {\r\n 'mr-2': !!label,\r\n 'border-grey-dark text-blue focus:border-blue focus:yt-focus': !props.disabled && !invalid,\r\n 'border-grey text-blue-light cursor-not-allowed': props.disabled,\r\n 'bg-[rgba(255,255,0,0.2)] disabled:bg-[rgba(255,255,0,0.075)]': highlighted,\r\n 'border-red text-red focus:border-red focus:yt-focus-red': invalid && !props.disabled,\r\n });\r\n\r\n let handleChange: ((checked: CheckedState) => void) | undefined;\r\n\r\n if (onChange) {\r\n handleChange = (checked: CheckedState) => onChange(checked === 'indeterminate' ? false : checked);\r\n }\r\n\r\n const element = (\r\n <CheckboxPrimitive.Root\r\n {...otherProps}\r\n data-taco=\"checkbox\"\r\n checked={indeterminate ? 'indeterminate' : checked}\r\n className={className}\r\n onCheckedChange={handleChange}\r\n ref={ref}\r\n >\r\n <CheckboxPrimitive.Indicator className=\"flex h-full w-full\">\r\n <Icon name={indeterminate ? 'line' : 'tick'} className=\"!h-full !w-full\" />\r\n </CheckboxPrimitive.Indicator>\r\n </CheckboxPrimitive.Root>\r\n );\r\n\r\n if (label) {\r\n const labelClassName = cn(\r\n 'flex items-center cursor-pointer',\r\n {\r\n 'cursor-not-allowed text-grey-dark': props.disabled,\r\n },\r\n props.className\r\n );\r\n\r\n return (\r\n <label className={labelClassName}>\r\n {element}\r\n {label}\r\n </label>\r\n );\r\n }\r\n\r\n return element;\r\n});\r\n"],"names":["Checkbox","React","props","ref","checked","highlighted","indeterminate","invalid","label","onChange","otherProps","className","cn","disabled","handleChange","element","CheckboxPrimitive","onCheckedChange","Icon","name","labelClassName"],"mappings":"
|
1
|
+
{"version":3,"file":"Checkbox.js","sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport cn from 'classnames';\r\nimport * as CheckboxPrimitive from '@radix-ui/react-checkbox';\r\nimport { Icon } from '../Icon/Icon';\r\n\r\ntype CheckedState = boolean | 'indeterminate';\r\n\r\ntype CheckboxBaseProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'onChange'> & {\r\n /* Increases visual prominenance of the checkbox */\r\n highlighted?: boolean;\r\n /**\r\n * Indeterminate state should only be used with sub-checkboxes. The indeterminate state is shown if not all\r\n * sub-checkboxes are selected. This only affects the style, changing the icon in the checkbox.\r\n */\r\n indeterminate?: boolean;\r\n /* Whether the checkbox is in an invalid state */\r\n invalid?: boolean;\r\n /** Label for the checkbox */\r\n label?: React.ReactNode;\r\n /* Whether user input is required */\r\n required?: boolean;\r\n};\r\n\r\ninterface UncontrolledCheckboxProps extends CheckboxBaseProps {\r\n checked?: never;\r\n onChange?: never;\r\n /* The default checked state (uncontrolled) */\r\n defaultChecked?: boolean;\r\n}\r\n\r\ninterface ControlledCheckboxProps extends CheckboxBaseProps {\r\n defaultChecked?: never;\r\n /* The current checked state (controlled) */\r\n checked: boolean;\r\n /* Handler called when the checked state changes */\r\n onChange: (checked: boolean) => void;\r\n}\r\n\r\nexport type CheckboxProps = UncontrolledCheckboxProps | ControlledCheckboxProps;\r\n\r\nexport const Checkbox = React.forwardRef(function Checkbox(props: CheckboxProps, ref: React.Ref<HTMLButtonElement>) {\r\n const { checked, highlighted, indeterminate, invalid, label, onChange, ...otherProps } = props;\r\n\r\n const className = cn('bg-white h-5 w-5 border rounded text-sm flex-shrink-0 self-start mt-[0.1rem]', {\r\n 'mr-2': !!label,\r\n 'border-grey-dark text-blue focus:border-blue focus:yt-focus': !props.disabled && !invalid,\r\n 'border-grey text-blue-light cursor-not-allowed': props.disabled,\r\n 'bg-[rgba(255,255,0,0.2)] disabled:bg-[rgba(255,255,0,0.075)]': highlighted,\r\n 'border-red text-red focus:border-red focus:yt-focus-red': invalid && !props.disabled,\r\n });\r\n\r\n let handleChange: ((checked: CheckedState) => void) | undefined;\r\n\r\n if (onChange) {\r\n handleChange = (checked: CheckedState) => onChange(checked === 'indeterminate' ? false : checked);\r\n }\r\n\r\n const element = (\r\n <CheckboxPrimitive.Root\r\n {...otherProps}\r\n data-taco=\"checkbox\"\r\n checked={indeterminate ? 'indeterminate' : checked}\r\n className={className}\r\n onCheckedChange={handleChange}\r\n ref={ref}\r\n >\r\n <CheckboxPrimitive.Indicator className=\"flex h-full w-full\">\r\n <Icon name={indeterminate ? 'line' : 'tick'} className=\"!h-full !w-full\" />\r\n </CheckboxPrimitive.Indicator>\r\n </CheckboxPrimitive.Root>\r\n );\r\n\r\n if (label) {\r\n const labelClassName = cn(\r\n 'flex items-center cursor-pointer',\r\n {\r\n 'cursor-not-allowed text-grey-dark': props.disabled,\r\n },\r\n props.className\r\n );\r\n\r\n return (\r\n <label className={labelClassName}>\r\n {element}\r\n {label}\r\n </label>\r\n );\r\n }\r\n\r\n return element;\r\n});\r\n"],"names":["Checkbox","React","props","ref","checked","highlighted","indeterminate","invalid","label","onChange","otherProps","className","cn","disabled","handleChange","element","CheckboxPrimitive","onCheckedChange","Icon","name","labelClassName"],"mappings":";;;;;MAwCaA,QAAQ,gBAAGC,UAAA,CAAiB,SAASD,QAAT,CAAkBE,KAAlB,EAAwCC,GAAxC;AACrC,QAAM;AAAEC,IAAAA,OAAF;AAAWC,IAAAA,WAAX;AAAwBC,IAAAA,aAAxB;AAAuCC,IAAAA,OAAvC;AAAgDC,IAAAA,KAAhD;AAAuDC,IAAAA,QAAvD;AAAiE,OAAGC;AAApE,MAAmFR,KAAzF;AAEA,QAAMS,SAAS,GAAGC,EAAE,CAAC,8EAAD,EAAiF;AACjG,YAAQ,CAAC,CAACJ,KADuF;AAEjG,mEAA+D,CAACN,KAAK,CAACW,QAAP,IAAmB,CAACN,OAFc;AAGjG,sDAAkDL,KAAK,CAACW,QAHyC;AAIjG,oEAAgER,WAJiC;AAKjG,+DAA2DE,OAAO,IAAI,CAACL,KAAK,CAACW;AALoB,GAAjF,CAApB;AAQA,MAAIC,YAAJ;;AAEA,MAAIL,QAAJ,EAAc;AACVK,IAAAA,YAAY,GAAIV,OAAD,IAA2BK,QAAQ,CAACL,OAAO,KAAK,eAAZ,GAA8B,KAA9B,GAAsCA,OAAvC,CAAlD;AACH;;AAED,QAAMW,OAAO,GACTd,aAAA,CAACe,IAAD,oBACQN;iBACM;AACVN,IAAAA,OAAO,EAAEE,aAAa,GAAG,eAAH,GAAqBF;AAC3CO,IAAAA,SAAS,EAAEA;AACXM,IAAAA,eAAe,EAAEH;AACjBX,IAAAA,GAAG,EAAEA;IANT,EAQIF,aAAA,CAACe,SAAD;AAA6BL,IAAAA,SAAS,EAAC;GAAvC,EACIV,aAAA,CAACiB,IAAD;AAAMC,IAAAA,IAAI,EAAEb,aAAa,GAAG,MAAH,GAAY;AAAQK,IAAAA,SAAS,EAAC;GAAvD,CADJ,CARJ,CADJ;;AAeA,MAAIH,KAAJ,EAAW;AACP,UAAMY,cAAc,GAAGR,EAAE,CACrB,kCADqB,EAErB;AACI,2CAAqCV,KAAK,CAACW;AAD/C,KAFqB,EAKrBX,KAAK,CAACS,SALe,CAAzB;AAQA,WACIV,aAAA,QAAA;AAAOU,MAAAA,SAAS,EAAES;KAAlB,EACKL,OADL,EAEKP,KAFL,CADJ;AAMH;;AAED,SAAOO,OAAP;AACH,CAlDuB;;;;"}
|
@@ -1,4 +1,3 @@
|
|
1
|
-
import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
2
1
|
import { forwardRef, createElement } from 'react';
|
3
2
|
import cn from 'classnames';
|
4
3
|
import { IconButton } from '../IconButton/IconButton.js';
|
@@ -8,25 +7,25 @@ import { Input } from '../Input/Input.js';
|
|
8
7
|
import { useDatepicker } from './useDatepicker.js';
|
9
8
|
import { Popover } from '../Popover/Popover.js';
|
10
9
|
|
11
|
-
|
12
|
-
var Datepicker = /*#__PURE__*/forwardRef(function Datepicker(props, ref) {
|
10
|
+
const Datepicker = /*#__PURE__*/forwardRef(function Datepicker(props, ref) {
|
13
11
|
var _input$disabled;
|
14
12
|
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
13
|
+
const {
|
14
|
+
className: externalClassName,
|
15
|
+
onReset: handleReset,
|
16
|
+
style,
|
17
|
+
shortcuts,
|
18
|
+
shortcutsText,
|
19
|
+
...otherProps
|
20
|
+
} = props;
|
21
|
+
const {
|
22
|
+
calendar,
|
23
|
+
input
|
24
|
+
} = useDatepicker(otherProps, ref);
|
25
|
+
const {
|
26
|
+
texts
|
27
|
+
} = useLocalization();
|
28
|
+
const className = cn('inline-flex w-full text-black font-normal', externalClassName);
|
30
29
|
return createElement("span", {
|
31
30
|
className: className,
|
32
31
|
"data-taco": "datepicker",
|
@@ -36,40 +35,37 @@ var Datepicker = /*#__PURE__*/forwardRef(function Datepicker(props, ref) {
|
|
36
35
|
"aria-label": texts.datepicker.expand,
|
37
36
|
disabled: (_input$disabled = input.disabled) !== null && _input$disabled !== void 0 ? _input$disabled : input.readOnly,
|
38
37
|
icon: "calendar"
|
39
|
-
})), createElement(Popover.Content, null,
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
|
60
|
-
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
}
|
71
|
-
}, texts.datepicker.clear)));
|
72
|
-
}))
|
38
|
+
})), createElement(Popover.Content, null, ({
|
39
|
+
close
|
40
|
+
}) => createElement("div", {
|
41
|
+
className: "flex -m-3"
|
42
|
+
}, createElement(Calendar, Object.assign({}, calendar, {
|
43
|
+
onChange: (date, event) => {
|
44
|
+
calendar.onChange(date, event);
|
45
|
+
close();
|
46
|
+
},
|
47
|
+
tabIndex: -1
|
48
|
+
})), shortcuts && createElement("div", {
|
49
|
+
className: "border-l border-grey-dark flex flex-col"
|
50
|
+
}, createElement("span", {
|
51
|
+
className: "font-semibold text-xs m-4 flex items-center h-8 w-32 mb-3"
|
52
|
+
}, shortcutsText !== null && shortcutsText !== void 0 ? shortcutsText : texts.datepicker.shortcuts), createElement("ul", null, shortcuts.map((shortcut, i) => createElement("li", {
|
53
|
+
key: i
|
54
|
+
}, createElement("button", {
|
55
|
+
className: "w-full px-4 py-1 flex items-start hover:bg-grey-light text-xs",
|
56
|
+
onClick: event => {
|
57
|
+
event.persist();
|
58
|
+
shortcut.onClick(event);
|
59
|
+
close();
|
60
|
+
}
|
61
|
+
}, shortcut.text)))), handleReset && createElement("button", {
|
62
|
+
className: "text-blue hover:text-blue-light inline-flex border-none bg-transparent text-xs cursor-pointer mt-auto my-4 mx-auto",
|
63
|
+
onClick: event => {
|
64
|
+
event.persist();
|
65
|
+
handleReset(event);
|
66
|
+
close();
|
67
|
+
}
|
68
|
+
}, texts.datepicker.clear)))))
|
73
69
|
})));
|
74
70
|
});
|
75
71
|
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Datepicker.js","sources":["../../../../src/components/Datepicker/Datepicker.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport cn from 'classnames';\r\nimport { Calendar, CalendarProps } from '../Calendar/Calendar';\r\nimport { Input, InputProps } from '../Input/Input';\r\nimport { useLocalization } from '../Provider/Provider';\r\nimport { useDatepicker } from './useDatepicker';\r\nimport { IconButton } from '../IconButton/IconButton';\r\nimport { Popover } from '../Popover/Popover';\r\n\r\nexport type DatepickerTexts = {\r\n /** Aria-label for calendar */\r\n calendar: string;\r\n /** Clear button text */\r\n clear: string;\r\n /**\r\n * Aria-label for calendar icon button in the input.\r\n * Calendar will open when user clicks this icon button.\r\n */\r\n expand: string;\r\n /** Shortcut heading text */\r\n shortcuts: string;\r\n};\r\n\r\nexport type DatepickerProps = Omit<InputProps, 'value'> & {\r\n /** [Calendar](component:calendar) component associated with the DatePicker */\r\n calendar?: CalendarProps;\r\n /** List of shortcuts */\r\n shortcuts?: any;\r\n /** Title for the shortcuts panel */\r\n shortcutsText?: string;\r\n /** Handler to be called when the clear button is clicked */\r\n onReset?: (event: React.MouseEvent<HTMLButtonElement>) => void;\r\n /**\r\n * Date value of the calendar.\r\n * This will be displayed in DatePicker's input in the format given to the [Provider](component:provider) component\r\n */\r\n value?: Date;\r\n};\r\n\r\nexport const Datepicker = React.forwardRef(function Datepicker(props: DatepickerProps, ref: React.Ref<HTMLInputElement>) {\r\n const { className: externalClassName, onReset: handleReset, style, shortcuts, shortcutsText, ...otherProps } = props;\r\n const { calendar, input } = useDatepicker(otherProps, ref);\r\n const { texts } = useLocalization();\r\n const className = cn('inline-flex w-full text-black font-normal', externalClassName);\r\n\r\n return (\r\n <span className={className} data-taco=\"datepicker\" style={style}>\r\n <Input\r\n {...input}\r\n button={\r\n <Popover>\r\n <Popover.Trigger>\r\n <IconButton\r\n aria-label={texts.datepicker.expand}\r\n disabled={input.disabled ?? input.readOnly}\r\n icon=\"calendar\"\r\n />\r\n </Popover.Trigger>\r\n <Popover.Content>\r\n {({ close }) => (\r\n <div className=\"flex -m-3\">\r\n <Calendar\r\n {...calendar}\r\n onChange={(date: Date, event?: React.MouseEvent<HTMLDivElement>) => {\r\n calendar.onChange(date, event);\r\n close();\r\n }}\r\n tabIndex={-1}\r\n />\r\n {shortcuts && (\r\n <div className=\"border-l border-grey-dark flex flex-col\">\r\n <span className=\"font-semibold text-xs m-4 flex items-center h-8 w-32 mb-3\">\r\n {shortcutsText ?? texts.datepicker.shortcuts}\r\n </span>\r\n <ul>\r\n {shortcuts.map((shortcut, i) => (\r\n <li key={i}>\r\n <button\r\n className=\"w-full px-4 py-1 flex items-start hover:bg-grey-light text-xs\"\r\n onClick={event => {\r\n event.persist();\r\n shortcut.onClick(event);\r\n close();\r\n }}\r\n >\r\n {shortcut.text}\r\n </button>\r\n </li>\r\n ))}\r\n </ul>\r\n {handleReset && (\r\n <button\r\n className=\"text-blue hover:text-blue-light inline-flex border-none bg-transparent text-xs cursor-pointer mt-auto my-4 mx-auto\"\r\n onClick={event => {\r\n event.persist();\r\n handleReset(event);\r\n close();\r\n }}\r\n >\r\n {texts.datepicker.clear}\r\n </button>\r\n )}\r\n </div>\r\n )}\r\n </div>\r\n )}\r\n </Popover.Content>\r\n </Popover>\r\n }\r\n />\r\n </span>\r\n );\r\n});\r\n"],"names":["Datepicker","React","props","ref","
|
1
|
+
{"version":3,"file":"Datepicker.js","sources":["../../../../src/components/Datepicker/Datepicker.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport cn from 'classnames';\r\nimport { Calendar, CalendarProps } from '../Calendar/Calendar';\r\nimport { Input, InputProps } from '../Input/Input';\r\nimport { useLocalization } from '../Provider/Provider';\r\nimport { useDatepicker } from './useDatepicker';\r\nimport { IconButton } from '../IconButton/IconButton';\r\nimport { Popover } from '../Popover/Popover';\r\n\r\nexport type DatepickerTexts = {\r\n /** Aria-label for calendar */\r\n calendar: string;\r\n /** Clear button text */\r\n clear: string;\r\n /**\r\n * Aria-label for calendar icon button in the input.\r\n * Calendar will open when user clicks this icon button.\r\n */\r\n expand: string;\r\n /** Shortcut heading text */\r\n shortcuts: string;\r\n};\r\n\r\nexport type DatepickerProps = Omit<InputProps, 'value'> & {\r\n /** [Calendar](component:calendar) component associated with the DatePicker */\r\n calendar?: CalendarProps;\r\n /** List of shortcuts */\r\n shortcuts?: any;\r\n /** Title for the shortcuts panel */\r\n shortcutsText?: string;\r\n /** Handler to be called when the clear button is clicked */\r\n onReset?: (event: React.MouseEvent<HTMLButtonElement>) => void;\r\n /**\r\n * Date value of the calendar.\r\n * This will be displayed in DatePicker's input in the format given to the [Provider](component:provider) component\r\n */\r\n value?: Date;\r\n};\r\n\r\nexport const Datepicker = React.forwardRef(function Datepicker(props: DatepickerProps, ref: React.Ref<HTMLInputElement>) {\r\n const { className: externalClassName, onReset: handleReset, style, shortcuts, shortcutsText, ...otherProps } = props;\r\n const { calendar, input } = useDatepicker(otherProps, ref);\r\n const { texts } = useLocalization();\r\n const className = cn('inline-flex w-full text-black font-normal', externalClassName);\r\n\r\n return (\r\n <span className={className} data-taco=\"datepicker\" style={style}>\r\n <Input\r\n {...input}\r\n button={\r\n <Popover>\r\n <Popover.Trigger>\r\n <IconButton\r\n aria-label={texts.datepicker.expand}\r\n disabled={input.disabled ?? input.readOnly}\r\n icon=\"calendar\"\r\n />\r\n </Popover.Trigger>\r\n <Popover.Content>\r\n {({ close }) => (\r\n <div className=\"flex -m-3\">\r\n <Calendar\r\n {...calendar}\r\n onChange={(date: Date, event?: React.MouseEvent<HTMLDivElement>) => {\r\n calendar.onChange(date, event);\r\n close();\r\n }}\r\n tabIndex={-1}\r\n />\r\n {shortcuts && (\r\n <div className=\"border-l border-grey-dark flex flex-col\">\r\n <span className=\"font-semibold text-xs m-4 flex items-center h-8 w-32 mb-3\">\r\n {shortcutsText ?? texts.datepicker.shortcuts}\r\n </span>\r\n <ul>\r\n {shortcuts.map((shortcut, i) => (\r\n <li key={i}>\r\n <button\r\n className=\"w-full px-4 py-1 flex items-start hover:bg-grey-light text-xs\"\r\n onClick={event => {\r\n event.persist();\r\n shortcut.onClick(event);\r\n close();\r\n }}\r\n >\r\n {shortcut.text}\r\n </button>\r\n </li>\r\n ))}\r\n </ul>\r\n {handleReset && (\r\n <button\r\n className=\"text-blue hover:text-blue-light inline-flex border-none bg-transparent text-xs cursor-pointer mt-auto my-4 mx-auto\"\r\n onClick={event => {\r\n event.persist();\r\n handleReset(event);\r\n close();\r\n }}\r\n >\r\n {texts.datepicker.clear}\r\n </button>\r\n )}\r\n </div>\r\n )}\r\n </div>\r\n )}\r\n </Popover.Content>\r\n </Popover>\r\n }\r\n />\r\n </span>\r\n );\r\n});\r\n"],"names":["Datepicker","React","props","ref","className","externalClassName","onReset","handleReset","style","shortcuts","shortcutsText","otherProps","calendar","input","useDatepicker","texts","useLocalization","cn","Input","button","Popover","Trigger","IconButton","datepicker","expand","disabled","readOnly","icon","Content","close","Calendar","onChange","date","event","tabIndex","map","shortcut","i","key","onClick","persist","text","clear"],"mappings":";;;;;;;;;MAuCaA,UAAU,gBAAGC,UAAA,CAAiB,SAASD,UAAT,CAAoBE,KAApB,EAA4CC,GAA5C;;;AACvC,QAAM;AAAEC,IAAAA,SAAS,EAAEC,iBAAb;AAAgCC,IAAAA,OAAO,EAAEC,WAAzC;AAAsDC,IAAAA,KAAtD;AAA6DC,IAAAA,SAA7D;AAAwEC,IAAAA,aAAxE;AAAuF,OAAGC;AAA1F,MAAyGT,KAA/G;AACA,QAAM;AAAEU,IAAAA,QAAF;AAAYC,IAAAA;AAAZ,MAAsBC,aAAa,CAACH,UAAD,EAAaR,GAAb,CAAzC;AACA,QAAM;AAAEY,IAAAA;AAAF,MAAYC,eAAe,EAAjC;AACA,QAAMZ,SAAS,GAAGa,EAAE,CAAC,2CAAD,EAA8CZ,iBAA9C,CAApB;AAEA,SACIJ,aAAA,OAAA;AAAMG,IAAAA,SAAS,EAAEA;iBAAqB;AAAaI,IAAAA,KAAK,EAAEA;GAA1D,EACIP,aAAA,CAACiB,KAAD,oBACQL;AACJM,IAAAA,MAAM,EACFlB,aAAA,CAACmB,OAAD,MAAA,EACInB,aAAA,CAACmB,OAAO,CAACC,OAAT,MAAA,EACIpB,aAAA,CAACqB,UAAD;oBACgBP,KAAK,CAACQ,UAAN,CAAiBC;AAC7BC,MAAAA,QAAQ,qBAAEZ,KAAK,CAACY,QAAR,6DAAoBZ,KAAK,CAACa;AAClCC,MAAAA,IAAI,EAAC;KAHT,CADJ,CADJ,EAQI1B,aAAA,CAACmB,OAAO,CAACQ,OAAT,MAAA,EACK,CAAC;AAAEC,MAAAA;AAAF,KAAD,KACG5B,aAAA,MAAA;AAAKG,MAAAA,SAAS,EAAC;KAAf,EACIH,aAAA,CAAC6B,QAAD,oBACQlB;AACJmB,MAAAA,QAAQ,EAAE,CAACC,IAAD,EAAaC,KAAb;AACNrB,QAAAA,QAAQ,CAACmB,QAAT,CAAkBC,IAAlB,EAAwBC,KAAxB;AACAJ,QAAAA,KAAK;AACR;AACDK,MAAAA,QAAQ,EAAE,CAAC;MANf,CADJ,EASKzB,SAAS,IACNR,aAAA,MAAA;AAAKG,MAAAA,SAAS,EAAC;KAAf,EACIH,aAAA,OAAA;AAAMG,MAAAA,SAAS,EAAC;KAAhB,EACKM,aADL,aACKA,aADL,cACKA,aADL,GACsBK,KAAK,CAACQ,UAAN,CAAiBd,SADvC,CADJ,EAIIR,aAAA,KAAA,MAAA,EACKQ,SAAS,CAAC0B,GAAV,CAAc,CAACC,QAAD,EAAWC,CAAX,KACXpC,aAAA,KAAA;AAAIqC,MAAAA,GAAG,EAAED;KAAT,EACIpC,aAAA,SAAA;AACIG,MAAAA,SAAS,EAAC;AACVmC,MAAAA,OAAO,EAAEN,KAAK;AACVA,QAAAA,KAAK,CAACO,OAAN;AACAJ,QAAAA,QAAQ,CAACG,OAAT,CAAiBN,KAAjB;AACAJ,QAAAA,KAAK;AACR;KANL,EAQKO,QAAQ,CAACK,IARd,CADJ,CADH,CADL,CAJJ,EAoBKlC,WAAW,IACRN,aAAA,SAAA;AACIG,MAAAA,SAAS,EAAC;AACVmC,MAAAA,OAAO,EAAEN,KAAK;AACVA,QAAAA,KAAK,CAACO,OAAN;AACAjC,QAAAA,WAAW,CAAC0B,KAAD,CAAX;AACAJ,QAAAA,KAAK;AACR;KANL,EAQKd,KAAK,CAACQ,UAAN,CAAiBmB,KARtB,CArBR,CAVR,CAFR,CARJ;IAHR,CADJ,CADJ;AAmEH,CAzEyB;;;;"}
|
@@ -1,4 +1,3 @@
|
|
1
|
-
import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
2
1
|
import { forwardRef, useMemo, Children, useState, createElement } from 'react';
|
3
2
|
import { Root } from '@radix-ui/react-dialog';
|
4
3
|
import { DialogContext } from './Context.js';
|
@@ -7,14 +6,12 @@ import { Content, Title, Footer, Close } from './components/Content.js';
|
|
7
6
|
import { Drawer } from './components/Drawer.js';
|
8
7
|
import { Extra } from './components/Extra.js';
|
9
8
|
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
var extra;
|
17
|
-
Children.toArray(initialChildren).forEach(function (child) {
|
9
|
+
const useSeparatedChildren = initialChildren => {
|
10
|
+
return useMemo(() => {
|
11
|
+
const children = [];
|
12
|
+
let drawer;
|
13
|
+
let extra;
|
14
|
+
Children.toArray(initialChildren).forEach(child => {
|
18
15
|
var _child$type, _child$type2;
|
19
16
|
|
20
17
|
if (((_child$type = child.type) === null || _child$type === void 0 ? void 0 : _child$type.displayName) === Drawer.displayName) {
|
@@ -29,55 +26,39 @@ var useSeparatedChildren = function useSeparatedChildren(initialChildren) {
|
|
29
26
|
}, [initialChildren]);
|
30
27
|
};
|
31
28
|
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
|
60
|
-
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
return setDrawerOpen(function (isDrawerOpen) {
|
66
|
-
return !isDrawerOpen;
|
67
|
-
});
|
68
|
-
}
|
69
|
-
},
|
70
|
-
elements: {
|
71
|
-
drawer: drawer,
|
72
|
-
extra: extra
|
73
|
-
},
|
74
|
-
onClose: onClose,
|
75
|
-
props: otherProps,
|
76
|
-
showCloseButton: showCloseButton,
|
77
|
-
size: size,
|
78
|
-
ref: ref
|
79
|
-
};
|
80
|
-
}, [closeOnEscape, drawerOpen, draggable, drawer, extra, open, otherProps, showCloseButton]);
|
29
|
+
const Dialog = /*#__PURE__*/forwardRef(function Dialog(props, ref) {
|
30
|
+
const {
|
31
|
+
children: initialChildren,
|
32
|
+
closeOnEscape = true,
|
33
|
+
defaultOpen,
|
34
|
+
draggable = false,
|
35
|
+
onChange,
|
36
|
+
onClose,
|
37
|
+
open,
|
38
|
+
showCloseButton = true,
|
39
|
+
size = 'sm',
|
40
|
+
trigger,
|
41
|
+
...otherProps
|
42
|
+
} = props;
|
43
|
+
const [children, drawer, extra] = useSeparatedChildren(initialChildren);
|
44
|
+
const [drawerOpen, setDrawerOpen] = useState(false);
|
45
|
+
const context = useMemo(() => ({
|
46
|
+
closeOnEscape,
|
47
|
+
draggable,
|
48
|
+
drawer: {
|
49
|
+
open: drawerOpen,
|
50
|
+
toggle: () => setDrawerOpen(isDrawerOpen => !isDrawerOpen)
|
51
|
+
},
|
52
|
+
elements: {
|
53
|
+
drawer,
|
54
|
+
extra
|
55
|
+
},
|
56
|
+
onClose,
|
57
|
+
props: otherProps,
|
58
|
+
showCloseButton,
|
59
|
+
size,
|
60
|
+
ref
|
61
|
+
}), [closeOnEscape, drawerOpen, draggable, drawer, extra, open, otherProps, showCloseButton]);
|
81
62
|
return createElement(DialogContext.Provider, {
|
82
63
|
value: context
|
83
64
|
}, createElement(Root, {
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Dialog.js","sources":["../../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport * as DialogPrimitive from '@radix-ui/react-dialog';\r\nimport './Dialog.css';\r\nimport { DialogTriggerProps, Trigger } from './components/Trigger';\r\nimport {\r\n Content,\r\n Title,\r\n Footer,\r\n Close,\r\n DialogContentProps,\r\n DialogContentRenderProps,\r\n DialogContentDrawerRenderProps,\r\n DialogTitleProps,\r\n DialogFooterProps,\r\n DialogCloseProps,\r\n} from './components/Content';\r\nimport { DialogDrawerProps, DialogDrawerRenderProps, Drawer } from './components/Drawer';\r\nimport { DialogExtraProps, Extra } from './components/Extra';\r\nimport { DialogContext } from './Context';\r\nimport { DialogSize } from './types';\r\n\r\nexport {\r\n DialogCloseProps,\r\n DialogContentDrawerRenderProps,\r\n DialogContentProps,\r\n DialogContentRenderProps,\r\n DialogDrawerProps,\r\n DialogDrawerRenderProps,\r\n DialogFooterProps,\r\n DialogSize,\r\n DialogTitleProps,\r\n};\r\n\r\nexport type DialogTexts = {\r\n /**\r\n * Aria-label for close icon button in dialog.\r\n * To read more about how to provide the text, see [Provider](component:provider) component\r\n */\r\n close: string;\r\n drag: string;\r\n};\r\n\r\nexport type DialogProps = {\r\n children: React.ReactNode | React.ReactNode[];\r\n /** When `true`, pressing escape will close the dialog */\r\n closeOnEscape?: boolean;\r\n /** Set whether the dialog is open by default or not, use when not providing a trigger */\r\n defaultOpen?: boolean;\r\n /** Allows dragging the dialog around the screen (window constrained) */\r\n draggable?: boolean;\r\n /** Handler called when dialog closes by user interaction */\r\n onClose?: () => void;\r\n /** Called when the dialog opens or closes, must be used in conjunction with open */\r\n onChange?: (open: boolean) => void;\r\n /** Control the open state of the dialog from outside the component */\r\n open?: boolean;\r\n /** Shows the close icon button of the dialog */\r\n showCloseButton?: boolean;\r\n /** Size of the dialog. This is the recommended way to set a size for dialog component. */\r\n size?: DialogSize;\r\n /** A trigger to be used for the dialog, should not be set if `children` already contains a trigger */\r\n trigger?: JSX.Element;\r\n};\r\n\r\nconst useSeparatedChildren = initialChildren => {\r\n return React.useMemo(() => {\r\n const children: any[] = [];\r\n let drawer;\r\n let extra;\r\n\r\n React.Children.toArray(initialChildren).forEach((child: any) => {\r\n if (child.type?.displayName === Drawer.displayName) {\r\n drawer = child;\r\n } else if (child.type?.displayName === Extra.displayName) {\r\n extra = child;\r\n } else {\r\n children.push(child);\r\n }\r\n });\r\n\r\n return [children, drawer, extra];\r\n }, [initialChildren]);\r\n};\r\n\r\nexport type ForwardedDialogWithStatics = React.ForwardRefExoticComponent<DialogProps & React.RefAttributes<HTMLElement>> & {\r\n Trigger: React.ForwardRefExoticComponent<DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;\r\n Content: React.ForwardRefExoticComponent<DialogContentProps & React.RefAttributes<HTMLDivElement>>;\r\n Title: React.ForwardRefExoticComponent<DialogTitleProps & React.RefAttributes<HTMLHeadingElement>>;\r\n Footer: React.ForwardRefExoticComponent<DialogFooterProps & React.RefAttributes<HTMLDivElement>>;\r\n Extra: React.ForwardRefExoticComponent<DialogExtraProps & React.RefAttributes<HTMLDivElement>>;\r\n Drawer: React.ForwardRefExoticComponent<DialogDrawerProps & React.RefAttributes<HTMLDivElement>>;\r\n Close: React.ForwardRefExoticComponent<DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;\r\n};\r\n\r\nexport const Dialog = React.forwardRef(function Dialog(props: DialogProps, ref: React.Ref<HTMLElement>) {\r\n const {\r\n children: initialChildren,\r\n closeOnEscape = true,\r\n defaultOpen,\r\n draggable = false,\r\n onChange,\r\n onClose,\r\n open,\r\n showCloseButton = true,\r\n size = 'sm',\r\n trigger,\r\n ...otherProps\r\n } = props;\r\n const [children, drawer, extra] = useSeparatedChildren(initialChildren);\r\n const [drawerOpen, setDrawerOpen] = React.useState(false);\r\n\r\n const context = React.useMemo(\r\n () => ({\r\n closeOnEscape,\r\n draggable,\r\n drawer: {\r\n open: drawerOpen,\r\n toggle: () => setDrawerOpen(isDrawerOpen => !isDrawerOpen),\r\n },\r\n elements: {\r\n drawer,\r\n extra,\r\n },\r\n onClose,\r\n props: otherProps,\r\n showCloseButton,\r\n size,\r\n ref,\r\n }),\r\n [closeOnEscape, drawerOpen, draggable, drawer, extra, open, otherProps, showCloseButton]\r\n );\r\n\r\n return (\r\n <DialogContext.Provider value={context}>\r\n <DialogPrimitive.Root defaultOpen={defaultOpen} open={open} onOpenChange={onChange}>\r\n {trigger && <Trigger>{trigger}</Trigger>}\r\n {children}\r\n </DialogPrimitive.Root>\r\n </DialogContext.Provider>\r\n );\r\n}) as ForwardedDialogWithStatics;\r\n\r\nDialog.Trigger = Trigger;\r\nDialog.Content = Content;\r\nDialog.Title = Title;\r\nDialog.Footer = Footer;\r\nDialog.Extra = Extra;\r\nDialog.Drawer = Drawer;\r\nDialog.Close = Close;\r\n"],"names":["useSeparatedChildren","initialChildren","React","children","drawer","extra","toArray","forEach","child","type","displayName","Drawer","Extra","push","Dialog","props","ref","closeOnEscape","defaultOpen","draggable","onChange","onClose","open","showCloseButton","size","trigger","otherProps","drawerOpen","setDrawerOpen","context","toggle","isDrawerOpen","elements","DialogContext","Provider","value","DialogPrimitive","onOpenChange","Trigger","Content","Title","Footer","Close"],"mappings":"
|
1
|
+
{"version":3,"file":"Dialog.js","sources":["../../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport * as DialogPrimitive from '@radix-ui/react-dialog';\r\nimport './Dialog.css';\r\nimport { DialogTriggerProps, Trigger } from './components/Trigger';\r\nimport {\r\n Content,\r\n Title,\r\n Footer,\r\n Close,\r\n DialogContentProps,\r\n DialogContentRenderProps,\r\n DialogContentDrawerRenderProps,\r\n DialogTitleProps,\r\n DialogFooterProps,\r\n DialogCloseProps,\r\n} from './components/Content';\r\nimport { DialogDrawerProps, DialogDrawerRenderProps, Drawer } from './components/Drawer';\r\nimport { DialogExtraProps, Extra } from './components/Extra';\r\nimport { DialogContext } from './Context';\r\nimport { DialogSize } from './types';\r\n\r\nexport {\r\n DialogCloseProps,\r\n DialogContentDrawerRenderProps,\r\n DialogContentProps,\r\n DialogContentRenderProps,\r\n DialogDrawerProps,\r\n DialogDrawerRenderProps,\r\n DialogFooterProps,\r\n DialogSize,\r\n DialogTitleProps,\r\n};\r\n\r\nexport type DialogTexts = {\r\n /**\r\n * Aria-label for close icon button in dialog.\r\n * To read more about how to provide the text, see [Provider](component:provider) component\r\n */\r\n close: string;\r\n drag: string;\r\n};\r\n\r\nexport type DialogProps = {\r\n children: React.ReactNode | React.ReactNode[];\r\n /** When `true`, pressing escape will close the dialog */\r\n closeOnEscape?: boolean;\r\n /** Set whether the dialog is open by default or not, use when not providing a trigger */\r\n defaultOpen?: boolean;\r\n /** Allows dragging the dialog around the screen (window constrained) */\r\n draggable?: boolean;\r\n /** Handler called when dialog closes by user interaction */\r\n onClose?: () => void;\r\n /** Called when the dialog opens or closes, must be used in conjunction with open */\r\n onChange?: (open: boolean) => void;\r\n /** Control the open state of the dialog from outside the component */\r\n open?: boolean;\r\n /** Shows the close icon button of the dialog */\r\n showCloseButton?: boolean;\r\n /** Size of the dialog. This is the recommended way to set a size for dialog component. */\r\n size?: DialogSize;\r\n /** A trigger to be used for the dialog, should not be set if `children` already contains a trigger */\r\n trigger?: JSX.Element;\r\n};\r\n\r\nconst useSeparatedChildren = initialChildren => {\r\n return React.useMemo(() => {\r\n const children: any[] = [];\r\n let drawer;\r\n let extra;\r\n\r\n React.Children.toArray(initialChildren).forEach((child: any) => {\r\n if (child.type?.displayName === Drawer.displayName) {\r\n drawer = child;\r\n } else if (child.type?.displayName === Extra.displayName) {\r\n extra = child;\r\n } else {\r\n children.push(child);\r\n }\r\n });\r\n\r\n return [children, drawer, extra];\r\n }, [initialChildren]);\r\n};\r\n\r\nexport type ForwardedDialogWithStatics = React.ForwardRefExoticComponent<DialogProps & React.RefAttributes<HTMLElement>> & {\r\n Trigger: React.ForwardRefExoticComponent<DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;\r\n Content: React.ForwardRefExoticComponent<DialogContentProps & React.RefAttributes<HTMLDivElement>>;\r\n Title: React.ForwardRefExoticComponent<DialogTitleProps & React.RefAttributes<HTMLHeadingElement>>;\r\n Footer: React.ForwardRefExoticComponent<DialogFooterProps & React.RefAttributes<HTMLDivElement>>;\r\n Extra: React.ForwardRefExoticComponent<DialogExtraProps & React.RefAttributes<HTMLDivElement>>;\r\n Drawer: React.ForwardRefExoticComponent<DialogDrawerProps & React.RefAttributes<HTMLDivElement>>;\r\n Close: React.ForwardRefExoticComponent<DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;\r\n};\r\n\r\nexport const Dialog = React.forwardRef(function Dialog(props: DialogProps, ref: React.Ref<HTMLElement>) {\r\n const {\r\n children: initialChildren,\r\n closeOnEscape = true,\r\n defaultOpen,\r\n draggable = false,\r\n onChange,\r\n onClose,\r\n open,\r\n showCloseButton = true,\r\n size = 'sm',\r\n trigger,\r\n ...otherProps\r\n } = props;\r\n const [children, drawer, extra] = useSeparatedChildren(initialChildren);\r\n const [drawerOpen, setDrawerOpen] = React.useState(false);\r\n\r\n const context = React.useMemo(\r\n () => ({\r\n closeOnEscape,\r\n draggable,\r\n drawer: {\r\n open: drawerOpen,\r\n toggle: () => setDrawerOpen(isDrawerOpen => !isDrawerOpen),\r\n },\r\n elements: {\r\n drawer,\r\n extra,\r\n },\r\n onClose,\r\n props: otherProps,\r\n showCloseButton,\r\n size,\r\n ref,\r\n }),\r\n [closeOnEscape, drawerOpen, draggable, drawer, extra, open, otherProps, showCloseButton]\r\n );\r\n\r\n return (\r\n <DialogContext.Provider value={context}>\r\n <DialogPrimitive.Root defaultOpen={defaultOpen} open={open} onOpenChange={onChange}>\r\n {trigger && <Trigger>{trigger}</Trigger>}\r\n {children}\r\n </DialogPrimitive.Root>\r\n </DialogContext.Provider>\r\n );\r\n}) as ForwardedDialogWithStatics;\r\n\r\nDialog.Trigger = Trigger;\r\nDialog.Content = Content;\r\nDialog.Title = Title;\r\nDialog.Footer = Footer;\r\nDialog.Extra = Extra;\r\nDialog.Drawer = Drawer;\r\nDialog.Close = Close;\r\n"],"names":["useSeparatedChildren","initialChildren","React","children","drawer","extra","toArray","forEach","child","type","displayName","Drawer","Extra","push","Dialog","props","ref","closeOnEscape","defaultOpen","draggable","onChange","onClose","open","showCloseButton","size","trigger","otherProps","drawerOpen","setDrawerOpen","context","toggle","isDrawerOpen","elements","DialogContext","Provider","value","DialogPrimitive","onOpenChange","Trigger","Content","Title","Footer","Close"],"mappings":";;;;;;;;AAgEA,MAAMA,oBAAoB,GAAGC,eAAe;AACxC,SAAOC,OAAA,CAAc;AACjB,UAAMC,QAAQ,GAAU,EAAxB;AACA,QAAIC,MAAJ;AACA,QAAIC,KAAJ;AAEAH,IAAAA,QAAA,CAAeI,OAAf,CAAuBL,eAAvB,EAAwCM,OAAxC,CAAiDC,KAAD;;;AAC5C,UAAI,gBAAAA,KAAK,CAACC,IAAN,4DAAYC,WAAZ,MAA4BC,MAAM,CAACD,WAAvC,EAAoD;AAChDN,QAAAA,MAAM,GAAGI,KAAT;AACH,OAFD,MAEO,IAAI,iBAAAA,KAAK,CAACC,IAAN,8DAAYC,WAAZ,MAA4BE,KAAK,CAACF,WAAtC,EAAmD;AACtDL,QAAAA,KAAK,GAAGG,KAAR;AACH,OAFM,MAEA;AACHL,QAAAA,QAAQ,CAACU,IAAT,CAAcL,KAAd;AACH;AACJ,KARD;AAUA,WAAO,CAACL,QAAD,EAAWC,MAAX,EAAmBC,KAAnB,CAAP;AACH,GAhBM,EAgBJ,CAACJ,eAAD,CAhBI,CAAP;AAiBH,CAlBD;;MA8Baa,MAAM,gBAAGZ,UAAA,CAAiB,SAASY,MAAT,CAAgBC,KAAhB,EAAoCC,GAApC;AACnC,QAAM;AACFb,IAAAA,QAAQ,EAAEF,eADR;AAEFgB,IAAAA,aAAa,GAAG,IAFd;AAGFC,IAAAA,WAHE;AAIFC,IAAAA,SAAS,GAAG,KAJV;AAKFC,IAAAA,QALE;AAMFC,IAAAA,OANE;AAOFC,IAAAA,IAPE;AAQFC,IAAAA,eAAe,GAAG,IARhB;AASFC,IAAAA,IAAI,GAAG,IATL;AAUFC,IAAAA,OAVE;AAWF,OAAGC;AAXD,MAYFX,KAZJ;AAaA,QAAM,CAACZ,QAAD,EAAWC,MAAX,EAAmBC,KAAnB,IAA4BL,oBAAoB,CAACC,eAAD,CAAtD;AACA,QAAM,CAAC0B,UAAD,EAAaC,aAAb,IAA8B1B,QAAA,CAAe,KAAf,CAApC;AAEA,QAAM2B,OAAO,GAAG3B,OAAA,CACZ,OAAO;AACHe,IAAAA,aADG;AAEHE,IAAAA,SAFG;AAGHf,IAAAA,MAAM,EAAE;AACJkB,MAAAA,IAAI,EAAEK,UADF;AAEJG,MAAAA,MAAM,EAAE,MAAMF,aAAa,CAACG,YAAY,IAAI,CAACA,YAAlB;AAFvB,KAHL;AAOHC,IAAAA,QAAQ,EAAE;AACN5B,MAAAA,MADM;AAENC,MAAAA;AAFM,KAPP;AAWHgB,IAAAA,OAXG;AAYHN,IAAAA,KAAK,EAAEW,UAZJ;AAaHH,IAAAA,eAbG;AAcHC,IAAAA,IAdG;AAeHR,IAAAA;AAfG,GAAP,CADY,EAkBZ,CAACC,aAAD,EAAgBU,UAAhB,EAA4BR,SAA5B,EAAuCf,MAAvC,EAA+CC,KAA/C,EAAsDiB,IAAtD,EAA4DI,UAA5D,EAAwEH,eAAxE,CAlBY,CAAhB;AAqBA,SACIrB,aAAA,CAAC+B,aAAa,CAACC,QAAf;AAAwBC,IAAAA,KAAK,EAAEN;GAA/B,EACI3B,aAAA,CAACkC,IAAD;AAAsBlB,IAAAA,WAAW,EAAEA;AAAaI,IAAAA,IAAI,EAAEA;AAAMe,IAAAA,YAAY,EAAEjB;GAA1E,EACKK,OAAO,IAAIvB,aAAA,CAACoC,OAAD,MAAA,EAAUb,OAAV,CADhB,EAEKtB,QAFL,CADJ,CADJ;AAQH,CA9CqB;AAgDtBW,MAAM,CAACwB,OAAP,GAAiBA,OAAjB;AACAxB,MAAM,CAACyB,OAAP,GAAiBA,OAAjB;AACAzB,MAAM,CAAC0B,KAAP,GAAeA,KAAf;AACA1B,MAAM,CAAC2B,MAAP,GAAgBA,MAAhB;AACA3B,MAAM,CAACF,KAAP,GAAeA,KAAf;AACAE,MAAM,CAACH,MAAP,GAAgBA,MAAhB;AACAG,MAAM,CAAC4B,KAAP,GAAeA,KAAf;;;;"}
|
@@ -1,20 +1,18 @@
|
|
1
|
-
import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
2
1
|
import { forwardRef, createElement } from 'react';
|
3
2
|
import cn from 'classnames';
|
4
3
|
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
var className = cn('flex flex-col font-bold text-xs leading-loose pb-4 min-h-[theme(spacing.18)]', {
|
4
|
+
const Field = /*#__PURE__*/forwardRef(function Field(props, ref) {
|
5
|
+
const {
|
6
|
+
disabled,
|
7
|
+
children,
|
8
|
+
invalid = false,
|
9
|
+
message,
|
10
|
+
...otherProps
|
11
|
+
} = props;
|
12
|
+
const className = cn('flex flex-col font-bold text-xs leading-loose pb-4 min-h-[theme(spacing.18)]', {
|
15
13
|
'text-grey-dark': disabled
|
16
14
|
}, props.className);
|
17
|
-
|
15
|
+
const messageClassName = cn('h-4 text-xs text-left leading-normal font-normal truncate -mb-4', {
|
18
16
|
'text-grey-darkest': !invalid,
|
19
17
|
'text-red': invalid,
|
20
18
|
'opacity-50': disabled
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Field.js","sources":["../../../../src/components/Field/Field.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport cn from 'classnames';\r\n\r\nimport './Field.css';\r\n\r\nexport type FieldProps = React.LabelHTMLAttributes<HTMLLabelElement> & {\r\n /** Content of the field */\r\n children: React.ReactNode;\r\n /**\tChanges the style to indicate the element is disabled */\r\n disabled?: boolean;\r\n /* Whether the input is in an invalid state */\r\n invalid?: boolean;\r\n /**\r\n * Text displayed below the children of Field.\r\n * Should be a short text that indicates feedback for user.\r\n */\r\n message?: string;\r\n};\r\n\r\nexport const Field = React.forwardRef(function Field(props: FieldProps, ref: React.Ref<HTMLLabelElement>) {\r\n const { disabled, children, invalid = false, message, ...otherProps } = props;\r\n const className = cn(\r\n 'flex flex-col font-bold text-xs leading-loose pb-4 min-h-[theme(spacing.18)]',\r\n {\r\n 'text-grey-dark': disabled,\r\n },\r\n props.className\r\n );\r\n const messageClassName = cn(\r\n 'h-4 text-xs text-left leading-normal font-normal truncate -mb-4',\r\n {\r\n 'text-grey-darkest': !invalid,\r\n 'text-red': invalid,\r\n 'opacity-50': disabled,\r\n },\r\n props.className\r\n );\r\n\r\n return (\r\n <label {...otherProps} className={className} data-taco=\"label\" ref={ref}>\r\n {children}\r\n {message && (\r\n <span className={messageClassName} role={invalid ? 'alert' : undefined}>\r\n {message}\r\n </span>\r\n )}\r\n </label>\r\n );\r\n});\r\n"],"names":["Field","React","props","ref","disabled","children","invalid","message","otherProps","className","cn","messageClassName","role","undefined"],"mappings":"
|
1
|
+
{"version":3,"file":"Field.js","sources":["../../../../src/components/Field/Field.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport cn from 'classnames';\r\n\r\nimport './Field.css';\r\n\r\nexport type FieldProps = React.LabelHTMLAttributes<HTMLLabelElement> & {\r\n /** Content of the field */\r\n children: React.ReactNode;\r\n /**\tChanges the style to indicate the element is disabled */\r\n disabled?: boolean;\r\n /* Whether the input is in an invalid state */\r\n invalid?: boolean;\r\n /**\r\n * Text displayed below the children of Field.\r\n * Should be a short text that indicates feedback for user.\r\n */\r\n message?: string;\r\n};\r\n\r\nexport const Field = React.forwardRef(function Field(props: FieldProps, ref: React.Ref<HTMLLabelElement>) {\r\n const { disabled, children, invalid = false, message, ...otherProps } = props;\r\n const className = cn(\r\n 'flex flex-col font-bold text-xs leading-loose pb-4 min-h-[theme(spacing.18)]',\r\n {\r\n 'text-grey-dark': disabled,\r\n },\r\n props.className\r\n );\r\n const messageClassName = cn(\r\n 'h-4 text-xs text-left leading-normal font-normal truncate -mb-4',\r\n {\r\n 'text-grey-darkest': !invalid,\r\n 'text-red': invalid,\r\n 'opacity-50': disabled,\r\n },\r\n props.className\r\n );\r\n\r\n return (\r\n <label {...otherProps} className={className} data-taco=\"label\" ref={ref}>\r\n {children}\r\n {message && (\r\n <span className={messageClassName} role={invalid ? 'alert' : undefined}>\r\n {message}\r\n </span>\r\n )}\r\n </label>\r\n );\r\n});\r\n"],"names":["Field","React","props","ref","disabled","children","invalid","message","otherProps","className","cn","messageClassName","role","undefined"],"mappings":";;;MAmBaA,KAAK,gBAAGC,UAAA,CAAiB,SAASD,KAAT,CAAeE,KAAf,EAAkCC,GAAlC;AAClC,QAAM;AAAEC,IAAAA,QAAF;AAAYC,IAAAA,QAAZ;AAAsBC,IAAAA,OAAO,GAAG,KAAhC;AAAuCC,IAAAA,OAAvC;AAAgD,OAAGC;AAAnD,MAAkEN,KAAxE;AACA,QAAMO,SAAS,GAAGC,EAAE,CAChB,8EADgB,EAEhB;AACI,sBAAkBN;AADtB,GAFgB,EAKhBF,KAAK,CAACO,SALU,CAApB;AAOA,QAAME,gBAAgB,GAAGD,EAAE,CACvB,iEADuB,EAEvB;AACI,yBAAqB,CAACJ,OAD1B;AAEI,gBAAYA,OAFhB;AAGI,kBAAcF;AAHlB,GAFuB,EAOvBF,KAAK,CAACO,SAPiB,CAA3B;AAUA,SACIR,aAAA,QAAA,oBAAWO;AAAYC,IAAAA,SAAS,EAAEA;iBAAqB;AAAQN,IAAAA,GAAG,EAAEA;IAApE,EACKE,QADL,EAEKE,OAAO,IACJN,aAAA,OAAA;AAAMQ,IAAAA,SAAS,EAAEE;AAAkBC,IAAAA,IAAI,EAAEN,OAAO,GAAG,OAAH,GAAaO;GAA7D,EACKN,OADL,CAHR,CADJ;AAUH,CA7BoB;;;;"}
|
@@ -1,14 +1,12 @@
|
|
1
|
-
import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
2
1
|
import { forwardRef, createElement } from 'react';
|
3
2
|
import cn from 'classnames';
|
4
3
|
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
var className = cn('yt-form', {
|
4
|
+
const Form = /*#__PURE__*/forwardRef(function Form(props, ref) {
|
5
|
+
const {
|
6
|
+
horizontal = false,
|
7
|
+
...otherProps
|
8
|
+
} = props;
|
9
|
+
const className = cn('yt-form', {
|
12
10
|
'yt-form--horizontal flex flex-wrap': horizontal
|
13
11
|
}, props.className);
|
14
12
|
return createElement("form", Object.assign({}, otherProps, {
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Form.js","sources":["../../../../src/components/Form/Form.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport cn from 'classnames';\r\nimport './Form.css';\r\n\r\nexport type FormProps = React.FormHTMLAttributes<HTMLFormElement> & {\r\n /** Content should be composed of other Taco form elements */\r\n children: React.ReactNode;\r\n /** Display the form fields in a horizontal layout */\r\n horizontal?: boolean;\r\n};\r\n\r\nexport const Form = React.forwardRef(function Form(props: FormProps, ref: React.Ref<HTMLFormElement>) {\r\n const { horizontal = false, ...otherProps } = props;\r\n const className = cn(\r\n 'yt-form',\r\n {\r\n 'yt-form--horizontal flex flex-wrap': horizontal,\r\n },\r\n props.className\r\n );\r\n\r\n return <form {...otherProps} className={className} data-taco=\"form\" ref={ref} />;\r\n});\r\n"],"names":["Form","React","props","ref","horizontal","otherProps","className","cn"],"mappings":"
|
1
|
+
{"version":3,"file":"Form.js","sources":["../../../../src/components/Form/Form.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport cn from 'classnames';\r\nimport './Form.css';\r\n\r\nexport type FormProps = React.FormHTMLAttributes<HTMLFormElement> & {\r\n /** Content should be composed of other Taco form elements */\r\n children: React.ReactNode;\r\n /** Display the form fields in a horizontal layout */\r\n horizontal?: boolean;\r\n};\r\n\r\nexport const Form = React.forwardRef(function Form(props: FormProps, ref: React.Ref<HTMLFormElement>) {\r\n const { horizontal = false, ...otherProps } = props;\r\n const className = cn(\r\n 'yt-form',\r\n {\r\n 'yt-form--horizontal flex flex-wrap': horizontal,\r\n },\r\n props.className\r\n );\r\n\r\n return <form {...otherProps} className={className} data-taco=\"form\" ref={ref} />;\r\n});\r\n"],"names":["Form","React","props","ref","horizontal","otherProps","className","cn"],"mappings":";;;MAWaA,IAAI,gBAAGC,UAAA,CAAiB,SAASD,IAAT,CAAcE,KAAd,EAAgCC,GAAhC;AACjC,QAAM;AAAEC,IAAAA,UAAU,GAAG,KAAf;AAAsB,OAAGC;AAAzB,MAAwCH,KAA9C;AACA,QAAMI,SAAS,GAAGC,EAAE,CAChB,SADgB,EAEhB;AACI,0CAAsCH;AAD1C,GAFgB,EAKhBF,KAAK,CAACI,SALU,CAApB;AAQA,SAAOL,aAAA,OAAA,oBAAUI;AAAYC,IAAAA,SAAS,EAAEA;iBAAqB;AAAOH,IAAAA,GAAG,EAAEA;IAAlE,CAAP;AACH,CAXmB;;;;"}
|
@@ -1,14 +1,12 @@
|
|
1
|
-
import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
2
1
|
import { forwardRef, createElement } from 'react';
|
3
2
|
import cn from 'classnames';
|
4
3
|
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
var className = cn('flex ', props.className);
|
4
|
+
const Group = /*#__PURE__*/forwardRef(function Group(props, ref) {
|
5
|
+
const {
|
6
|
+
as: Tag = 'span',
|
7
|
+
...otherProps
|
8
|
+
} = props;
|
9
|
+
const className = cn('flex ', props.className);
|
12
10
|
return createElement(Tag, Object.assign({}, otherProps, {
|
13
11
|
className: className,
|
14
12
|
"data-taco": "group",
|