@economic/taco 0.0.30-alpha.0 → 0.0.31-alpha.2
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/Button/util.js +1 -1
- package/dist/esm/components/Button/util.js.map +1 -1
- package/dist/esm/components/Datepicker/Datepicker.js +52 -48
- package/dist/esm/components/Datepicker/Datepicker.js.map +1 -1
- package/dist/esm/components/Form/Form.js +8 -6
- package/dist/esm/components/Form/Form.js.map +1 -1
- package/dist/esm/components/Group/Group.js +8 -6
- package/dist/esm/components/Group/Group.js.map +1 -1
- package/dist/esm/components/Hanger/Hanger.js +33 -25
- package/dist/esm/components/Hanger/Hanger.js.map +1 -1
- package/dist/esm/components/Icon/Icon.js +8 -7
- package/dist/esm/components/Icon/Icon.js.map +1 -1
- package/dist/esm/components/IconButton/IconButton.js +11 -9
- package/dist/esm/components/IconButton/IconButton.js.map +1 -1
- package/dist/esm/components/Input/Input.js +24 -26
- package/dist/esm/components/Input/Input.js.map +1 -1
- package/dist/esm/components/Listbox/Listbox.js +25 -24
- package/dist/esm/components/Listbox/Listbox.js.map +1 -1
- package/dist/esm/components/Menu/Menu.js +43 -20
- package/dist/esm/components/Menu/Menu.js.map +1 -1
- package/dist/esm/components/Menu/components/Item.js +5 -5
- package/dist/esm/components/Menu/components/Item.js.map +1 -1
- package/dist/esm/components/Navigation/Navigation.js +44 -35
- package/dist/esm/components/Navigation/Navigation.js.map +1 -1
- package/dist/esm/components/Pagination/Pagination.js +56 -39
- package/dist/esm/components/Pagination/Pagination.js.map +1 -1
- package/dist/esm/components/Popover/Popover.js +34 -29
- package/dist/esm/components/Popover/Popover.js.map +1 -1
- package/dist/esm/components/Progress/Progress.js +15 -11
- package/dist/esm/components/Progress/Progress.js.map +1 -1
- package/dist/esm/components/Provider/Provider.js +18 -13
- package/dist/esm/components/Provider/Provider.js.map +1 -1
- package/dist/esm/components/RadioGroup/RadioGroup.js +57 -45
- package/dist/esm/components/RadioGroup/RadioGroup.js.map +1 -1
- package/dist/esm/components/SearchInput/SearchInput.js +11 -10
- package/dist/esm/components/SearchInput/SearchInput.js.map +1 -1
- package/dist/esm/components/Select/Select.js +31 -30
- package/dist/esm/components/Select/Select.js.map +1 -1
- package/dist/esm/components/Spinner/Spinner.js +19 -12
- package/dist/esm/components/Spinner/Spinner.js.map +1 -1
- package/dist/esm/components/Switch/Switch.js +10 -9
- package/dist/esm/components/Switch/Switch.js.map +1 -1
- package/dist/esm/components/Tabs/Tabs.js +27 -25
- package/dist/esm/components/Tabs/Tabs.js.map +1 -1
- package/dist/esm/components/Textarea/Textarea.js +9 -11
- package/dist/esm/components/Textarea/Textarea.js.map +1 -1
- package/dist/esm/components/Toast/Toaster.js +118 -88
- package/dist/esm/components/Toast/Toaster.js.map +1 -1
- package/dist/esm/components/Tooltip/Tooltip.js +8 -7
- package/dist/esm/components/Tooltip/Tooltip.js.map +1 -1
- package/dist/esm/components/Treeview/Treeview.js +36 -26
- package/dist/esm/components/Treeview/Treeview.js.map +1 -1
- package/dist/esm/components/VisuallyHidden/VisuallyHidden.js +1 -1
- package/dist/esm/components/VisuallyHidden/VisuallyHidden.js.map +1 -1
- package/dist/esm/index.css +8 -5
- package/dist/index.css +8 -5
- package/dist/taco.cjs.development.js +754 -628
- 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 +3 -3
@@ -1,27 +1,36 @@
|
|
1
|
+
import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
1
2
|
import { useMemo, Children, isValidElement, forwardRef, createElement, createContext, useContext } from 'react';
|
2
3
|
import cn from 'classnames';
|
3
4
|
import { Root, Item, Indicator } from '@radix-ui/react-radio-group';
|
4
5
|
|
5
|
-
|
6
|
-
|
7
|
-
|
6
|
+
var _excluded = ["children", "value"],
|
7
|
+
_excluded2 = ["children", "defaultValue", "disabled", "invalid", "onChange", "orientation", "value"];
|
8
|
+
var getRadioGroupItemValueAsString = function getRadioGroupItemValueAsString(value) {
|
9
|
+
return value === null ? '' : String(value);
|
10
|
+
};
|
11
|
+
var findByValue = function findByValue(values, valueAsString) {
|
12
|
+
return values.find(function (value) {
|
13
|
+
return getRadioGroupItemValueAsString(value) === valueAsString;
|
14
|
+
});
|
15
|
+
};
|
16
|
+
var RadioGroupContext = /*#__PURE__*/createContext({
|
8
17
|
disabled: false,
|
9
18
|
invalid: false
|
10
19
|
});
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
+
var RadioGroupItem = /*#__PURE__*/forwardRef(function RadioGroupItem(props, ref) {
|
21
|
+
var context = useContext(RadioGroupContext);
|
22
|
+
|
23
|
+
var children = props.children,
|
24
|
+
value = props.value,
|
25
|
+
otherProps = _objectWithoutPropertiesLoose(props, _excluded);
|
26
|
+
|
27
|
+
var disabled = context.disabled || props.disabled;
|
28
|
+
var className = cn('flex flex-shrink-0 self-start items-center justify-center h-4 w-4 mr-2 mt-[0.2rem] rounded-full bg-white border-2 ', {
|
20
29
|
'border-grey-dark focus:border-blue focus:yt-focus aria-checked:bg-blue aria-checked:border-blue': !disabled && !context.invalid,
|
21
30
|
'border-grey cursor-not-allowed aria-checked:bg-grey-dark aria-checked:border-grey-dark': disabled,
|
22
31
|
'border-red text-red focus:border-red focus:yt-focus-red aria-checked:bg-red aria-checked:border-red': context.invalid && !disabled
|
23
32
|
});
|
24
|
-
|
33
|
+
var labelClassName = cn('flex items-center cursor-pointer', {
|
25
34
|
'cursor-not-allowed text-grey-dark': disabled
|
26
35
|
}, props.className);
|
27
36
|
return createElement("label", {
|
@@ -35,34 +44,38 @@ const RadioGroupItem = /*#__PURE__*/forwardRef(function RadioGroupItem(props, re
|
|
35
44
|
className: "h-2 w-2 rounded-full bg-white"
|
36
45
|
})), children);
|
37
46
|
});
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
Children.forEach(children, child
|
47
|
+
var useRadioGroup = function useRadioGroup(props) {
|
48
|
+
var children = props.children,
|
49
|
+
defaultValue = props.defaultValue,
|
50
|
+
disabled = props.disabled,
|
51
|
+
invalid = props.invalid,
|
52
|
+
onChange = props.onChange,
|
53
|
+
_props$orientation = props.orientation,
|
54
|
+
orientation = _props$orientation === void 0 ? 'vertical' : _props$orientation,
|
55
|
+
value = props.value,
|
56
|
+
otherProps = _objectWithoutPropertiesLoose(props, _excluded2);
|
57
|
+
|
58
|
+
var values = useMemo(function () {
|
59
|
+
var radioGroupItemValues = [];
|
60
|
+
Children.forEach(children, function (child) {
|
52
61
|
if (isValidElement(child)) {
|
53
62
|
radioGroupItemValues.push(child.props.value);
|
54
63
|
}
|
55
64
|
});
|
56
65
|
return radioGroupItemValues;
|
57
66
|
}, [children]);
|
58
|
-
|
59
|
-
|
60
|
-
|
61
|
-
|
62
|
-
|
67
|
+
var context = useMemo(function () {
|
68
|
+
return {
|
69
|
+
disabled: disabled !== null && disabled !== void 0 ? disabled : false,
|
70
|
+
invalid: invalid !== null && invalid !== void 0 ? invalid : false
|
71
|
+
};
|
72
|
+
}, [disabled, invalid]);
|
73
|
+
var valueProps;
|
63
74
|
|
64
75
|
if (onChange !== undefined) {
|
65
|
-
|
76
|
+
var handleChange = function handleChange(value) {
|
77
|
+
return onChange(findByValue(values, value));
|
78
|
+
};
|
66
79
|
|
67
80
|
valueProps = {
|
68
81
|
onValueChange: handleChange,
|
@@ -75,20 +88,19 @@ const useRadioGroup = props => {
|
|
75
88
|
}
|
76
89
|
|
77
90
|
return {
|
78
|
-
context,
|
79
|
-
props: {
|
80
|
-
|
81
|
-
|
82
|
-
|
83
|
-
}
|
91
|
+
context: context,
|
92
|
+
props: _extends({}, otherProps, valueProps, {
|
93
|
+
children: children,
|
94
|
+
orientation: orientation
|
95
|
+
})
|
84
96
|
};
|
85
97
|
};
|
86
|
-
|
87
|
-
|
88
|
-
|
89
|
-
|
90
|
-
|
91
|
-
|
98
|
+
var RadioGroup = /*#__PURE__*/forwardRef(function RadioGroup(props, ref) {
|
99
|
+
var _useRadioGroup = useRadioGroup(props),
|
100
|
+
context = _useRadioGroup.context,
|
101
|
+
otherProps = _useRadioGroup.props;
|
102
|
+
|
103
|
+
var className = cn('flex items-start', {
|
92
104
|
'flex-wrap space-x-4': otherProps.orientation === 'horizontal',
|
93
105
|
'flex-col space-y-2': otherProps.orientation === 'vertical'
|
94
106
|
}, otherProps.className);
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"RadioGroup.js","sources":["../../../../src/components/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport cn from 'classnames';\r\nimport * as RadioGroupPrimitive from '@radix-ui/react-radio-group';\r\nimport { Orientation } from '../../types';\r\n\r\nexport type RadioGroupItemValue = string | number | boolean | null;\r\n\r\nexport const getRadioGroupItemValueAsString = (value: RadioGroupItemValue): string => (value === null ? '' : String(value));\r\n\r\nexport const findByValue = (values: RadioGroupItemValue[], valueAsString: string): RadioGroupItemValue =>\r\n values.find(value => getRadioGroupItemValueAsString(value) === valueAsString) as RadioGroupItemValue;\r\n\r\nconst RadioGroupContext = React.createContext({ disabled: false, invalid: false });\r\n\r\nexport type RadioGroupItemProps<T = HTMLButtonElement> = Omit<\r\n React.ButtonHTMLAttributes<T>,\r\n 'children' | 'onSelect' | 'value'\r\n> & {\r\n /** Label for the radio group item */\r\n children: React.ReactNode;\r\n /* Whether the radio group item is disabled */\r\n disabled?: boolean;\r\n /** Value of the radio button */\r\n value: RadioGroupItemValue;\r\n};\r\n\r\nconst RadioGroupItem = React.forwardRef(function RadioGroupItem(props: RadioGroupItemProps, ref: React.Ref<HTMLButtonElement>) {\r\n const context = React.useContext(RadioGroupContext);\r\n const { children, value, ...otherProps } = props;\r\n\r\n const disabled = context.disabled || props.disabled;\r\n\r\n const className = cn(\r\n 'flex flex-shrink-0 self-start items-center justify-center h-4 w-4 mr-2 mt-[0.2rem] rounded-full bg-white border-2 ',\r\n {\r\n 'border-grey-dark focus:border-blue focus:yt-focus aria-checked:bg-blue aria-checked:border-blue':\r\n !disabled && !context.invalid,\r\n 'border-grey cursor-not-allowed aria-checked:bg-grey-dark aria-checked:border-grey-dark': disabled,\r\n 'border-red text-red focus:border-red focus:yt-focus-red aria-checked:bg-red aria-checked:border-red':\r\n context.invalid && !disabled,\r\n }\r\n );\r\n const labelClassName = cn(\r\n 'flex items-center cursor-pointer',\r\n {\r\n 'cursor-not-allowed text-grey-dark': disabled,\r\n },\r\n props.className\r\n );\r\n\r\n return (\r\n <label className={labelClassName}>\r\n <RadioGroupPrimitive.Item\r\n {...otherProps}\r\n className={className}\r\n disabled={disabled}\r\n ref={ref}\r\n value={getRadioGroupItemValueAsString(value)}\r\n >\r\n <RadioGroupPrimitive.Indicator className=\"h-2 w-2 rounded-full bg-white\" />\r\n </RadioGroupPrimitive.Item>\r\n {children}\r\n </label>\r\n );\r\n});\r\n\r\ntype ReactGroupBaseChild = React.ReactElement<RadioGroupItemProps> | boolean | null;\r\n\r\ntype RadioGroupBaseProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children' | 'defaultValue' | 'onChange' | 'value'> & {\r\n children: ReactGroupBaseChild[];\r\n /* Whether the radio group is disabled */\r\n disabled?: boolean;\r\n /* Whether the radio group is in an invalid state */\r\n invalid?: boolean;\r\n /** The name of the radio group, used when submitting an HTML form */\r\n name?: string;\r\n /**\r\n * Orientation of the radio group\r\n * @defaultValue vertical\r\n */\r\n orientation?: Orientation;\r\n /* Whether the radio group requires user input */\r\n required?: boolean;\r\n};\r\n\r\ninterface UncontrolledRadioGroupProps extends RadioGroupBaseProps {\r\n /* The default value (uncontrolled) */\r\n defaultValue?: RadioGroupItemValue;\r\n onChange?: never;\r\n value?: never;\r\n}\r\n\r\ninterface ControlledRadioGroupProps extends RadioGroupBaseProps {\r\n defaultValue?: never;\r\n /** Handler called when the value changes */\r\n onChange: (value: RadioGroupItemValue) => void;\r\n /** The current value (controlled) */\r\n value?: RadioGroupItemValue;\r\n}\r\n\r\nexport type RadioGroupProps = UncontrolledRadioGroupProps | ControlledRadioGroupProps;\r\n\r\nexport type ForwardedRadioGroupWithStatics = React.ForwardRefExoticComponent<\r\n RadioGroupProps & React.RefAttributes<HTMLDivElement>\r\n> & {\r\n /** Item component rendered in a `RadioGroup` component */\r\n Item: React.ForwardRefExoticComponent<RadioGroupItemProps>;\r\n};\r\n\r\nexport const useRadioGroup = (props: RadioGroupProps) => {\r\n const { children, defaultValue, disabled, invalid, onChange, orientation = 'vertical', value, ...otherProps } = props;\r\n\r\n const values = React.useMemo<RadioGroupItemValue[]>(() => {\r\n const radioGroupItemValues: RadioGroupItemValue[] = [];\r\n\r\n React.Children.forEach(children, child => {\r\n if (React.isValidElement(child)) {\r\n radioGroupItemValues.push(child.props.value);\r\n }\r\n });\r\n\r\n return radioGroupItemValues;\r\n }, [children]);\r\n\r\n const context = React.useMemo(() => ({ disabled: disabled ?? false, invalid: invalid ?? false }), [disabled, invalid]);\r\n\r\n let valueProps;\r\n\r\n if (onChange !== undefined) {\r\n const handleChange = (value: string): void => onChange(findByValue(values, value));\r\n\r\n valueProps = {\r\n onValueChange: handleChange,\r\n value: value !== undefined ? getRadioGroupItemValueAsString(value) : undefined,\r\n };\r\n } else {\r\n valueProps = {\r\n defaultValue: defaultValue !== undefined ? getRadioGroupItemValueAsString(defaultValue) : undefined,\r\n };\r\n }\r\n\r\n return {\r\n context,\r\n props: {\r\n ...otherProps,\r\n ...valueProps,\r\n children,\r\n orientation,\r\n },\r\n };\r\n};\r\n\r\nexport const RadioGroup = React.forwardRef(function RadioGroup(props: RadioGroupProps, ref: React.Ref<HTMLDivElement>) {\r\n const { context, props: otherProps } = useRadioGroup(props);\r\n const className = cn(\r\n 'flex items-start',\r\n {\r\n 'flex-wrap space-x-4': otherProps.orientation === 'horizontal',\r\n 'flex-col space-y-2': otherProps.orientation === 'vertical',\r\n },\r\n otherProps.className\r\n );\r\n\r\n return (\r\n <RadioGroupContext.Provider value={context}>\r\n <RadioGroupPrimitive.Root {...otherProps} className={className} data-taco=\"radio-group\" ref={ref} />\r\n </RadioGroupContext.Provider>\r\n );\r\n}) as ForwardedRadioGroupWithStatics;\r\nRadioGroup.Item = RadioGroupItem;\r\n"],"names":["getRadioGroupItemValueAsString","value","String","findByValue","values","valueAsString","find","RadioGroupContext","React","disabled","invalid","RadioGroupItem","props","ref","context","children","otherProps","className","cn","labelClassName","RadioGroupPrimitive","useRadioGroup","defaultValue","onChange","orientation","radioGroupItemValues","forEach","child","push","valueProps","undefined","handleChange","onValueChange","RadioGroup","Provider","Item"],"mappings":";;;;MAOaA,8BAA8B,GAAIC,KAAD,IAAyCA,KAAK,KAAK,IAAV,GAAiB,EAAjB,GAAsBC,MAAM,CAACD,KAAD;MAEtGE,WAAW,GAAG,CAACC,MAAD,EAAgCC,aAAhC,KACvBD,MAAM,CAACE,IAAP,CAAYL,KAAK,IAAID,8BAA8B,CAACC,KAAD,CAA9B,KAA0CI,aAA/D;AAEJ,MAAME,iBAAiB,gBAAGC,aAAA,CAAoB;AAAEC,EAAAA,QAAQ,EAAE,KAAZ;AAAmBC,EAAAA,OAAO,EAAE;AAA5B,CAApB,CAA1B;AAcA,MAAMC,cAAc,gBAAGH,UAAA,CAAiB,SAASG,cAAT,CAAwBC,KAAxB,EAAoDC,GAApD;AACpC,QAAMC,OAAO,GAAGN,UAAA,CAAiBD,iBAAjB,CAAhB;AACA,QAAM;AAAEQ,IAAAA,QAAF;AAAYd,IAAAA,KAAZ;AAAmB,OAAGe;AAAtB,MAAqCJ,KAA3C;AAEA,QAAMH,QAAQ,GAAGK,OAAO,CAACL,QAAR,IAAoBG,KAAK,CAACH,QAA3C;AAEA,QAAMQ,SAAS,GAAGC,EAAE,CAChB,oHADgB,EAEhB;AACI,uGACI,CAACT,QAAD,IAAa,CAACK,OAAO,CAACJ,OAF9B;AAGI,8FAA0FD,QAH9F;AAII,2GACIK,OAAO,CAACJ,OAAR,IAAmB,CAACD;AAL5B,GAFgB,CAApB;AAUA,QAAMU,cAAc,GAAGD,EAAE,CACrB,kCADqB,EAErB;AACI,yCAAqCT;AADzC,GAFqB,EAKrBG,KAAK,CAACK,SALe,CAAzB;AAQA,SACIT,aAAA,QAAA;AAAOS,IAAAA,SAAS,EAAEE;GAAlB,EACIX,aAAA,CAACY,IAAD,oBACQJ;AACJC,IAAAA,SAAS,EAAEA;AACXR,IAAAA,QAAQ,EAAEA;AACVI,IAAAA,GAAG,EAAEA;AACLZ,IAAAA,KAAK,EAAED,8BAA8B,CAACC,KAAD;IALzC,EAOIO,aAAA,CAACY,SAAD;AAA+BH,IAAAA,SAAS,EAAC;GAAzC,CAPJ,CADJ,EAUKF,QAVL,CADJ;AAcH,CAtCsB,CAAvB;MAmFaM,aAAa,GAAIT,KAAD;AACzB,QAAM;AAAEG,IAAAA,QAAF;AAAYO,IAAAA,YAAZ;AAA0Bb,IAAAA,QAA1B;AAAoCC,IAAAA,OAApC;AAA6Ca,IAAAA,QAA7C;AAAuDC,IAAAA,WAAW,GAAG,UAArE;AAAiFvB,IAAAA,KAAjF;AAAwF,OAAGe;AAA3F,MAA0GJ,KAAhH;AAEA,QAAMR,MAAM,GAAGI,OAAA,CAAqC;AAChD,UAAMiB,oBAAoB,GAA0B,EAApD;AAEAjB,IAAAA,QAAA,CAAekB,OAAf,CAAuBX,QAAvB,EAAiCY,KAAK;AAClC,UAAInB,cAAA,CAAqBmB,KAArB,CAAJ,EAAiC;AAC7BF,QAAAA,oBAAoB,CAACG,IAArB,CAA0BD,KAAK,CAACf,KAAN,CAAYX,KAAtC;AACH;AACJ,KAJD;AAMA,WAAOwB,oBAAP;AACH,GAVc,EAUZ,CAACV,QAAD,CAVY,CAAf;AAYA,QAAMD,OAAO,GAAGN,OAAA,CAAc,OAAO;AAAEC,IAAAA,QAAQ,EAAEA,QAAF,aAAEA,QAAF,cAAEA,QAAF,GAAc,KAAxB;AAA+BC,IAAAA,OAAO,EAAEA,OAAF,aAAEA,OAAF,cAAEA,OAAF,GAAa;AAAnD,GAAP,CAAd,EAAkF,CAACD,QAAD,EAAWC,OAAX,CAAlF,CAAhB;AAEA,MAAImB,UAAJ;;AAEA,MAAIN,QAAQ,KAAKO,SAAjB,EAA4B;AACxB,UAAMC,YAAY,GAAI9B,KAAD,IAAyBsB,QAAQ,CAACpB,WAAW,CAACC,MAAD,EAASH,KAAT,CAAZ,CAAtD;;AAEA4B,IAAAA,UAAU,GAAG;AACTG,MAAAA,aAAa,EAAED,YADN;AAET9B,MAAAA,KAAK,EAAEA,KAAK,KAAK6B,SAAV,GAAsB9B,8BAA8B,CAACC,KAAD,CAApD,GAA8D6B;AAF5D,KAAb;AAIH,GAPD,MAOO;AACHD,IAAAA,UAAU,GAAG;AACTP,MAAAA,YAAY,EAAEA,YAAY,KAAKQ,SAAjB,GAA6B9B,8BAA8B,CAACsB,YAAD,CAA3D,GAA4EQ;AADjF,KAAb;AAGH;;AAED,SAAO;AACHhB,IAAAA,OADG;AAEHF,IAAAA,KAAK,EAAE,EACH,GAAGI,UADA;AAEH,SAAGa,UAFA;AAGHd,MAAAA,QAHG;AAIHS,MAAAA;AAJG;AAFJ,GAAP;AASH;MAEYS,UAAU,gBAAGzB,UAAA,CAAiB,SAASyB,UAAT,CAAoBrB,KAApB,EAA4CC,GAA5C;AACvC,QAAM;AAAEC,IAAAA,OAAF;AAAWF,IAAAA,KAAK,EAAEI;AAAlB,MAAiCK,aAAa,CAACT,KAAD,CAApD;AACA,QAAMK,SAAS,GAAGC,EAAE,CAChB,kBADgB,EAEhB;AACI,2BAAuBF,UAAU,CAACQ,WAAX,KAA2B,YADtD;AAEI,0BAAsBR,UAAU,CAACQ,WAAX,KAA2B;AAFrD,GAFgB,EAMhBR,UAAU,CAACC,SANK,CAApB;AASA,SACIT,aAAA,CAACD,iBAAiB,CAAC2B,QAAnB;AAA4BjC,IAAAA,KAAK,EAAEa;GAAnC,EACIN,aAAA,CAACY,IAAD,oBAA8BJ;AAAYC,IAAAA,SAAS,EAAEA;iBAAqB;AAAcJ,IAAAA,GAAG,EAAEA;IAA7F,CADJ,CADJ;AAKH,CAhByB;AAiB1BoB,UAAU,CAACE,IAAX,GAAkBxB,cAAlB;;;;"}
|
1
|
+
{"version":3,"file":"RadioGroup.js","sources":["../../../../src/components/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport cn from 'classnames';\r\nimport * as RadioGroupPrimitive from '@radix-ui/react-radio-group';\r\nimport { Orientation } from '../../types';\r\n\r\nexport type RadioGroupItemValue = string | number | boolean | null;\r\n\r\nexport const getRadioGroupItemValueAsString = (value: RadioGroupItemValue): string => (value === null ? '' : String(value));\r\n\r\nexport const findByValue = (values: RadioGroupItemValue[], valueAsString: string): RadioGroupItemValue =>\r\n values.find(value => getRadioGroupItemValueAsString(value) === valueAsString) as RadioGroupItemValue;\r\n\r\nconst RadioGroupContext = React.createContext({ disabled: false, invalid: false });\r\n\r\nexport type RadioGroupItemProps<T = HTMLButtonElement> = Omit<\r\n React.ButtonHTMLAttributes<T>,\r\n 'children' | 'onSelect' | 'value'\r\n> & {\r\n /** Label for the radio group item */\r\n children: React.ReactNode;\r\n /* Whether the radio group item is disabled */\r\n disabled?: boolean;\r\n /** Value of the radio button */\r\n value: RadioGroupItemValue;\r\n};\r\n\r\nconst RadioGroupItem = React.forwardRef(function RadioGroupItem(props: RadioGroupItemProps, ref: React.Ref<HTMLButtonElement>) {\r\n const context = React.useContext(RadioGroupContext);\r\n const { children, value, ...otherProps } = props;\r\n\r\n const disabled = context.disabled || props.disabled;\r\n\r\n const className = cn(\r\n 'flex flex-shrink-0 self-start items-center justify-center h-4 w-4 mr-2 mt-[0.2rem] rounded-full bg-white border-2 ',\r\n {\r\n 'border-grey-dark focus:border-blue focus:yt-focus aria-checked:bg-blue aria-checked:border-blue':\r\n !disabled && !context.invalid,\r\n 'border-grey cursor-not-allowed aria-checked:bg-grey-dark aria-checked:border-grey-dark': disabled,\r\n 'border-red text-red focus:border-red focus:yt-focus-red aria-checked:bg-red aria-checked:border-red':\r\n context.invalid && !disabled,\r\n }\r\n );\r\n const labelClassName = cn(\r\n 'flex items-center cursor-pointer',\r\n {\r\n 'cursor-not-allowed text-grey-dark': disabled,\r\n },\r\n props.className\r\n );\r\n\r\n return (\r\n <label className={labelClassName}>\r\n <RadioGroupPrimitive.Item\r\n {...otherProps}\r\n className={className}\r\n disabled={disabled}\r\n ref={ref}\r\n value={getRadioGroupItemValueAsString(value)}\r\n >\r\n <RadioGroupPrimitive.Indicator className=\"h-2 w-2 rounded-full bg-white\" />\r\n </RadioGroupPrimitive.Item>\r\n {children}\r\n </label>\r\n );\r\n});\r\n\r\ntype ReactGroupBaseChild = React.ReactElement<RadioGroupItemProps> | boolean | null;\r\n\r\ntype RadioGroupBaseProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children' | 'defaultValue' | 'onChange' | 'value'> & {\r\n children: ReactGroupBaseChild[];\r\n /* Whether the radio group is disabled */\r\n disabled?: boolean;\r\n /* Whether the radio group is in an invalid state */\r\n invalid?: boolean;\r\n /** The name of the radio group, used when submitting an HTML form */\r\n name?: string;\r\n /**\r\n * Orientation of the radio group\r\n * @defaultValue vertical\r\n */\r\n orientation?: Orientation;\r\n /* Whether the radio group requires user input */\r\n required?: boolean;\r\n};\r\n\r\ninterface UncontrolledRadioGroupProps extends RadioGroupBaseProps {\r\n /* The default value (uncontrolled) */\r\n defaultValue?: RadioGroupItemValue;\r\n onChange?: never;\r\n value?: never;\r\n}\r\n\r\ninterface ControlledRadioGroupProps extends RadioGroupBaseProps {\r\n defaultValue?: never;\r\n /** Handler called when the value changes */\r\n onChange: (value: RadioGroupItemValue) => void;\r\n /** The current value (controlled) */\r\n value?: RadioGroupItemValue;\r\n}\r\n\r\nexport type RadioGroupProps = UncontrolledRadioGroupProps | ControlledRadioGroupProps;\r\n\r\nexport type ForwardedRadioGroupWithStatics = React.ForwardRefExoticComponent<\r\n RadioGroupProps & React.RefAttributes<HTMLDivElement>\r\n> & {\r\n /** Item component rendered in a `RadioGroup` component */\r\n Item: React.ForwardRefExoticComponent<RadioGroupItemProps>;\r\n};\r\n\r\nexport const useRadioGroup = (props: RadioGroupProps) => {\r\n const { children, defaultValue, disabled, invalid, onChange, orientation = 'vertical', value, ...otherProps } = props;\r\n\r\n const values = React.useMemo<RadioGroupItemValue[]>(() => {\r\n const radioGroupItemValues: RadioGroupItemValue[] = [];\r\n\r\n React.Children.forEach(children, child => {\r\n if (React.isValidElement(child)) {\r\n radioGroupItemValues.push(child.props.value);\r\n }\r\n });\r\n\r\n return radioGroupItemValues;\r\n }, [children]);\r\n\r\n const context = React.useMemo(() => ({ disabled: disabled ?? false, invalid: invalid ?? false }), [disabled, invalid]);\r\n\r\n let valueProps;\r\n\r\n if (onChange !== undefined) {\r\n const handleChange = (value: string): void => onChange(findByValue(values, value));\r\n\r\n valueProps = {\r\n onValueChange: handleChange,\r\n value: value !== undefined ? getRadioGroupItemValueAsString(value) : undefined,\r\n };\r\n } else {\r\n valueProps = {\r\n defaultValue: defaultValue !== undefined ? getRadioGroupItemValueAsString(defaultValue) : undefined,\r\n };\r\n }\r\n\r\n return {\r\n context,\r\n props: {\r\n ...otherProps,\r\n ...valueProps,\r\n children,\r\n orientation,\r\n },\r\n };\r\n};\r\n\r\nexport const RadioGroup = React.forwardRef(function RadioGroup(props: RadioGroupProps, ref: React.Ref<HTMLDivElement>) {\r\n const { context, props: otherProps } = useRadioGroup(props);\r\n const className = cn(\r\n 'flex items-start',\r\n {\r\n 'flex-wrap space-x-4': otherProps.orientation === 'horizontal',\r\n 'flex-col space-y-2': otherProps.orientation === 'vertical',\r\n },\r\n otherProps.className\r\n );\r\n\r\n return (\r\n <RadioGroupContext.Provider value={context}>\r\n <RadioGroupPrimitive.Root {...otherProps} className={className} data-taco=\"radio-group\" ref={ref} />\r\n </RadioGroupContext.Provider>\r\n );\r\n}) as ForwardedRadioGroupWithStatics;\r\nRadioGroup.Item = RadioGroupItem;\r\n"],"names":["getRadioGroupItemValueAsString","value","String","findByValue","values","valueAsString","find","RadioGroupContext","React","disabled","invalid","RadioGroupItem","props","ref","context","children","otherProps","className","cn","labelClassName","RadioGroupPrimitive","useRadioGroup","defaultValue","onChange","orientation","radioGroupItemValues","forEach","child","push","valueProps","undefined","handleChange","onValueChange","RadioGroup","Provider","Item"],"mappings":"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"}
|
@@ -1,3 +1,4 @@
|
|
1
|
+
import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
1
2
|
import { forwardRef, createElement } from 'react';
|
2
3
|
import '../Icon/components/index.js';
|
3
4
|
import '../Icon/Icon.js';
|
@@ -48,22 +49,22 @@ import '../Switch/Switch.js';
|
|
48
49
|
import '../Tour/Tour.js';
|
49
50
|
import '../../utils/hooks/useOnClickOutside.js';
|
50
51
|
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
const {
|
56
|
-
texts
|
57
|
-
} = useLocalization();
|
52
|
+
var _excluded = ["onSearch"];
|
53
|
+
var SearchInput = /*#__PURE__*/forwardRef(function SearchInput(_ref, ref) {
|
54
|
+
var onSearch = _ref.onSearch,
|
55
|
+
props = _objectWithoutPropertiesLoose(_ref, _excluded);
|
58
56
|
|
59
|
-
|
57
|
+
var _useLocalization = useLocalization(),
|
58
|
+
texts = _useLocalization.texts;
|
59
|
+
|
60
|
+
var handleClick = function handleClick() {
|
60
61
|
if (!props.disabled) {
|
61
62
|
onSearch === null || onSearch === void 0 ? void 0 : onSearch(props.value);
|
62
63
|
}
|
63
64
|
};
|
64
65
|
|
65
|
-
|
66
|
-
|
66
|
+
var handleKeyDown = function handleKeyDown(event) {
|
67
|
+
var isEnterKeyPressed = event.keyCode === keycode('enter');
|
67
68
|
|
68
69
|
if (isEnterKeyPressed) {
|
69
70
|
handleClick();
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"SearchInput.js","sources":["../../../../src/components/SearchInput/SearchInput.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport keycode from 'keycode';\r\nimport { Input, InputProps, useLocalization, IconButton } from '../..';\r\n\r\nexport type SearchInputTexts = {\r\n /**\r\n * aria-label text for input\r\n */\r\n inputLabel: string;\r\n};\r\n\r\nexport type SearchInputProps = Omit<InputProps, 'icon'> & {\r\n /** Current input value will be passed to the method. In order to get the value, the component must be controlled otherwise value will always be undefined */\r\n onSearch?: (value: string | number | readonly string[] | undefined) => void;\r\n};\r\n\r\nexport const SearchInput = React.forwardRef(function SearchInput(\r\n { onSearch, ...props }: SearchInputProps,\r\n ref: React.Ref<HTMLInputElement>\r\n) {\r\n const { texts } = useLocalization();\r\n\r\n const handleClick = (): void => {\r\n if (!props.disabled) {\r\n onSearch?.(props.value);\r\n }\r\n };\r\n\r\n const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>): void => {\r\n const isEnterKeyPressed = event.keyCode === keycode('enter');\r\n\r\n if (isEnterKeyPressed) {\r\n handleClick();\r\n }\r\n };\r\n\r\n return (\r\n <Input\r\n aria-label={texts.searchInput.inputLabel}\r\n {...props}\r\n button={\r\n <IconButton\r\n icon=\"search\"\r\n className=\"!border-transparent !bg-transparent focus:!border-transparent peer-focus:!border-transparent peer-focus:peer-active:!border-transparent\"\r\n disabled={props.disabled}\r\n onClick={handleClick}\r\n />\r\n }\r\n onKeyDown={handleKeyDown}\r\n ref={ref}\r\n type=\"search\"\r\n />\r\n );\r\n});\r\n"],"names":["SearchInput","React","onSearch","props","
|
1
|
+
{"version":3,"file":"SearchInput.js","sources":["../../../../src/components/SearchInput/SearchInput.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport keycode from 'keycode';\r\nimport { Input, InputProps, useLocalization, IconButton } from '../..';\r\n\r\nexport type SearchInputTexts = {\r\n /**\r\n * aria-label text for input\r\n */\r\n inputLabel: string;\r\n};\r\n\r\nexport type SearchInputProps = Omit<InputProps, 'icon'> & {\r\n /** Current input value will be passed to the method. In order to get the value, the component must be controlled otherwise value will always be undefined */\r\n onSearch?: (value: string | number | readonly string[] | undefined) => void;\r\n};\r\n\r\nexport const SearchInput = React.forwardRef(function SearchInput(\r\n { onSearch, ...props }: SearchInputProps,\r\n ref: React.Ref<HTMLInputElement>\r\n) {\r\n const { texts } = useLocalization();\r\n\r\n const handleClick = (): void => {\r\n if (!props.disabled) {\r\n onSearch?.(props.value);\r\n }\r\n };\r\n\r\n const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>): void => {\r\n const isEnterKeyPressed = event.keyCode === keycode('enter');\r\n\r\n if (isEnterKeyPressed) {\r\n handleClick();\r\n }\r\n };\r\n\r\n return (\r\n <Input\r\n aria-label={texts.searchInput.inputLabel}\r\n {...props}\r\n button={\r\n <IconButton\r\n icon=\"search\"\r\n className=\"!border-transparent !bg-transparent focus:!border-transparent peer-focus:!border-transparent peer-focus:peer-active:!border-transparent\"\r\n disabled={props.disabled}\r\n onClick={handleClick}\r\n />\r\n }\r\n onKeyDown={handleKeyDown}\r\n ref={ref}\r\n type=\"search\"\r\n />\r\n );\r\n});\r\n"],"names":["SearchInput","React","ref","onSearch","props","useLocalization","texts","handleClick","disabled","value","handleKeyDown","event","isEnterKeyPressed","keyCode","keycode","Input","searchInput","inputLabel","button","IconButton","icon","className","onClick","onKeyDown","type"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAgBaA,WAAW,gBAAGC,UAAA,CAAiB,SAASD,WAAT,OAExCE,GAFwC;MACtCC,gBAAAA;MAAaC;;AAGf,yBAAkBC,eAAe,EAAjC;AAAA,MAAQC,KAAR,oBAAQA,KAAR;;AAEA,MAAMC,WAAW,GAAG,SAAdA,WAAc;AAChB,QAAI,CAACH,KAAK,CAACI,QAAX,EAAqB;AACjBL,MAAAA,QAAQ,SAAR,IAAAA,QAAQ,WAAR,YAAAA,QAAQ,CAAGC,KAAK,CAACK,KAAT,CAAR;AACH;AACJ,GAJD;;AAMA,MAAMC,aAAa,GAAG,SAAhBA,aAAgB,CAACC,KAAD;AAClB,QAAMC,iBAAiB,GAAGD,KAAK,CAACE,OAAN,KAAkBC,OAAO,CAAC,OAAD,CAAnD;;AAEA,QAAIF,iBAAJ,EAAuB;AACnBL,MAAAA,WAAW;AACd;AACJ,GAND;;AAQA,SACIN,aAAA,CAACc,KAAD;kBACgBT,KAAK,CAACU,WAAN,CAAkBC;KAC1Bb;AACJc,IAAAA,MAAM,EACFjB,aAAA,CAACkB,UAAD;AACIC,MAAAA,IAAI,EAAC;AACLC,MAAAA,SAAS,EAAC;AACVb,MAAAA,QAAQ,EAAEJ,KAAK,CAACI;AAChBc,MAAAA,OAAO,EAAEf;KAJb;AAOJgB,IAAAA,SAAS,EAAEb;AACXR,IAAAA,GAAG,EAAEA;AACLsB,IAAAA,IAAI,EAAC;IAbT,CADJ;AAiBH,CArC0B;;;;"}
|
@@ -1,3 +1,4 @@
|
|
1
|
+
import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
1
2
|
import { forwardRef, createElement, useRef, useEffect, Fragment } from 'react';
|
2
3
|
import cn from 'classnames';
|
3
4
|
import { Icon } from '../Icon/Icon.js';
|
@@ -9,52 +10,54 @@ import { Combobox } from '../Combobox/Combobox.js';
|
|
9
10
|
import { MultiListbox, Listbox } from '../Listbox/Listbox.js';
|
10
11
|
import { useSelect } from './useSelect.js';
|
11
12
|
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
13
|
+
var _excluded = ["autoFocus", "className", "highlighted", "style"],
|
14
|
+
_excluded2 = ["editable"];
|
15
|
+
var BaseSelect = /*#__PURE__*/forwardRef(function BaseSelect(props, ref) {
|
16
|
+
var autoFocus = props.autoFocus,
|
17
|
+
externalClassName = props.className,
|
18
|
+
style = props.style,
|
19
|
+
otherProps = _objectWithoutPropertiesLoose(props, _excluded);
|
20
|
+
|
21
|
+
var _useSelect = useSelect(otherProps, ref),
|
22
|
+
button = _useSelect.button,
|
23
|
+
listbox = _useSelect.listbox,
|
24
|
+
popover = _useSelect.popover,
|
25
|
+
input = _useSelect.input,
|
26
|
+
text = _useSelect.text,
|
27
|
+
_useSelect$more = _useSelect.more,
|
28
|
+
more = _useSelect$more === void 0 ? 0 : _useSelect$more;
|
29
|
+
|
30
|
+
var internalRef = useRef(null);
|
31
|
+
var selectDimensions = useBoundingClientRectListener(internalRef);
|
32
|
+
var className = cn('inline-flex relative w-full', {
|
31
33
|
'yt-select--readonly': props.readOnly
|
32
34
|
}, externalClassName);
|
33
|
-
|
35
|
+
var inputClassname = cn(getInputClasses(props), 'h-8 text-left pr-0', {
|
34
36
|
'border-blue': popover.open
|
35
37
|
});
|
36
|
-
useEffect(()
|
38
|
+
useEffect(function () {
|
37
39
|
if (autoFocus && internalRef.current) {
|
38
40
|
internalRef.current.focus();
|
39
41
|
}
|
40
42
|
}, []);
|
41
43
|
|
42
|
-
|
44
|
+
var renderMultiSelection = function renderMultiSelection() {
|
43
45
|
return createElement(Fragment, null, createElement("span", {
|
44
46
|
className: "flex-grow truncate text-left"
|
45
47
|
}, text), more > 0 && createElement(Badge, {
|
46
48
|
className: "ml-2"
|
47
|
-
},
|
49
|
+
}, "+" + more));
|
48
50
|
};
|
49
51
|
|
50
|
-
|
52
|
+
var commonListboxProps = _extends({}, listbox, {
|
51
53
|
className: 'w-auto',
|
52
54
|
invalid: undefined,
|
53
55
|
style: {
|
54
56
|
minWidth: selectDimensions === null || selectDimensions === void 0 ? void 0 : selectDimensions.width
|
55
57
|
},
|
56
58
|
tabIndex: popover.open ? 0 : -1
|
57
|
-
};
|
59
|
+
});
|
60
|
+
|
58
61
|
return createElement("span", {
|
59
62
|
className: className,
|
60
63
|
"data-taco": "select",
|
@@ -77,11 +80,9 @@ const BaseSelect = /*#__PURE__*/forwardRef(function BaseSelect(props, ref) {
|
|
77
80
|
type: "text"
|
78
81
|
}))));
|
79
82
|
});
|
80
|
-
|
81
|
-
|
82
|
-
|
83
|
-
...otherProps
|
84
|
-
} = props;
|
83
|
+
var Select = /*#__PURE__*/forwardRef(function Select(props, ref) {
|
84
|
+
var editable = props.editable,
|
85
|
+
otherProps = _objectWithoutPropertiesLoose(props, _excluded2);
|
85
86
|
|
86
87
|
if (editable) {
|
87
88
|
return createElement(Combobox, Object.assign({}, otherProps, {
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Select.js","sources":["../../../../src/components/Select/Select.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport cn from 'classnames';\r\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\r\nimport { Icon } from '../Icon/Icon';\r\nimport { Listbox, MultiListbox, ListboxProps } from '../Listbox/Listbox';\r\nimport { useBoundingClientRectListener } from '../../utils/hooks/useBoundingClientRectListener';\r\nimport { useSelect } from './useSelect';\r\nimport { Combobox, ComboboxProps } from '../Combobox/Combobox';\r\nimport { Badge } from '../Badge/Badge';\r\nimport { getInputClasses } from '../Input/util';\r\n\r\nexport type SelectTexts = {\r\n /**\r\n * The text displayed when all options are selected when multiselect mode in on.\r\n */\r\n allOptionsSelected: string;\r\n};\r\n\r\nexport type BaseSelectProps = Omit<ListboxProps, 'dialog'> &\r\n Omit<ComboboxProps, 'inline'> & {\r\n /**\r\n * Allows to select multiple values.\r\n * All the selected values will be combined in a comma-seperated string as the value of the input.\r\n */\r\n multiselect?: boolean;\r\n };\r\n\r\nexport type SelectProps = BaseSelectProps & {\r\n /**\r\n * Creates an editable select.\r\n * Setting this will render a inline Combobox which will display the provided data on click/focus,\r\n * even if there is no value in the input.\r\n * After user starts typing, matching data will be displayed.\r\n */\r\n editable?: boolean;\r\n};\r\n\r\nconst BaseSelect = React.forwardRef(function BaseSelect(props: BaseSelectProps, ref: React.Ref<HTMLInputElement>) {\r\n const { autoFocus, className: externalClassName, highlighted, style, ...otherProps } = props;\r\n const { button, listbox, popover, input, text, more = 0 } = useSelect(otherProps, ref);\r\n const internalRef = React.useRef<HTMLButtonElement>(null);\r\n const selectDimensions = useBoundingClientRectListener(internalRef);\r\n const className = cn('inline-flex relative w-full', { 'yt-select--readonly': props.readOnly }, externalClassName);\r\n const inputClassname = cn(getInputClasses(props), 'h-8 text-left pr-0', {\r\n 'border-blue': popover.open,\r\n });\r\n\r\n React.useEffect(() => {\r\n if (autoFocus && internalRef.current) {\r\n internalRef.current.focus();\r\n }\r\n }, []);\r\n\r\n const renderMultiSelection = (): React.ReactNode => {\r\n return (\r\n <>\r\n <span className=\"flex-grow truncate text-left\">{text}</span>\r\n {more > 0 && <Badge className=\"ml-2\">{`+${more}`}</Badge>}\r\n </>\r\n );\r\n };\r\n\r\n const commonListboxProps = {\r\n ...listbox,\r\n className: 'w-auto',\r\n invalid: undefined,\r\n style: { minWidth: selectDimensions?.width },\r\n tabIndex: popover.open ? 0 : -1,\r\n };\r\n\r\n return (\r\n <span className={className} data-taco=\"select\" style={style}>\r\n <PopoverPrimitive.Root {...popover}>\r\n <PopoverPrimitive.Trigger {...button} className={inputClassname} ref={internalRef}>\r\n {props.multiselect ? renderMultiSelection() : <span className=\"flex-grow truncate text-left\">{text}</span>}\r\n <span className=\"flex h-8 w-8 items-center justify-center\">\r\n <Icon className=\"pointer-events-none\" name={popover.open ? 'chevron-up' : 'chevron-down'} />\r\n </span>\r\n </PopoverPrimitive.Trigger>\r\n <PopoverPrimitive.Content align=\"start\" sideOffset={4}>\r\n {props.multiselect ? <MultiListbox {...commonListboxProps} /> : <Listbox {...commonListboxProps} />}\r\n </PopoverPrimitive.Content>\r\n <input {...input} className=\"hidden\" type=\"text\" />\r\n </PopoverPrimitive.Root>\r\n </span>\r\n );\r\n});\r\n\r\nexport const Select = React.forwardRef(function Select(props: SelectProps, ref: React.Ref<HTMLInputElement>) {\r\n const { editable, ...otherProps } = props;\r\n\r\n if (editable) {\r\n return <Combobox {...otherProps} dialog={undefined} inline ref={ref} />;\r\n }\r\n\r\n return <BaseSelect {...otherProps} ref={ref} />;\r\n});\r\n"],"names":["BaseSelect","React","props","ref","autoFocus","
|
1
|
+
{"version":3,"file":"Select.js","sources":["../../../../src/components/Select/Select.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport cn from 'classnames';\r\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\r\nimport { Icon } from '../Icon/Icon';\r\nimport { Listbox, MultiListbox, ListboxProps } from '../Listbox/Listbox';\r\nimport { useBoundingClientRectListener } from '../../utils/hooks/useBoundingClientRectListener';\r\nimport { useSelect } from './useSelect';\r\nimport { Combobox, ComboboxProps } from '../Combobox/Combobox';\r\nimport { Badge } from '../Badge/Badge';\r\nimport { getInputClasses } from '../Input/util';\r\n\r\nexport type SelectTexts = {\r\n /**\r\n * The text displayed when all options are selected when multiselect mode in on.\r\n */\r\n allOptionsSelected: string;\r\n};\r\n\r\nexport type BaseSelectProps = Omit<ListboxProps, 'dialog'> &\r\n Omit<ComboboxProps, 'inline'> & {\r\n /**\r\n * Allows to select multiple values.\r\n * All the selected values will be combined in a comma-seperated string as the value of the input.\r\n */\r\n multiselect?: boolean;\r\n };\r\n\r\nexport type SelectProps = BaseSelectProps & {\r\n /**\r\n * Creates an editable select.\r\n * Setting this will render a inline Combobox which will display the provided data on click/focus,\r\n * even if there is no value in the input.\r\n * After user starts typing, matching data will be displayed.\r\n */\r\n editable?: boolean;\r\n};\r\n\r\nconst BaseSelect = React.forwardRef(function BaseSelect(props: BaseSelectProps, ref: React.Ref<HTMLInputElement>) {\r\n const { autoFocus, className: externalClassName, highlighted, style, ...otherProps } = props;\r\n const { button, listbox, popover, input, text, more = 0 } = useSelect(otherProps, ref);\r\n const internalRef = React.useRef<HTMLButtonElement>(null);\r\n const selectDimensions = useBoundingClientRectListener(internalRef);\r\n const className = cn('inline-flex relative w-full', { 'yt-select--readonly': props.readOnly }, externalClassName);\r\n const inputClassname = cn(getInputClasses(props), 'h-8 text-left pr-0', {\r\n 'border-blue': popover.open,\r\n });\r\n\r\n React.useEffect(() => {\r\n if (autoFocus && internalRef.current) {\r\n internalRef.current.focus();\r\n }\r\n }, []);\r\n\r\n const renderMultiSelection = (): React.ReactNode => {\r\n return (\r\n <>\r\n <span className=\"flex-grow truncate text-left\">{text}</span>\r\n {more > 0 && <Badge className=\"ml-2\">{`+${more}`}</Badge>}\r\n </>\r\n );\r\n };\r\n\r\n const commonListboxProps = {\r\n ...listbox,\r\n className: 'w-auto',\r\n invalid: undefined,\r\n style: { minWidth: selectDimensions?.width },\r\n tabIndex: popover.open ? 0 : -1,\r\n };\r\n\r\n return (\r\n <span className={className} data-taco=\"select\" style={style}>\r\n <PopoverPrimitive.Root {...popover}>\r\n <PopoverPrimitive.Trigger {...button} className={inputClassname} ref={internalRef}>\r\n {props.multiselect ? renderMultiSelection() : <span className=\"flex-grow truncate text-left\">{text}</span>}\r\n <span className=\"flex h-8 w-8 items-center justify-center\">\r\n <Icon className=\"pointer-events-none\" name={popover.open ? 'chevron-up' : 'chevron-down'} />\r\n </span>\r\n </PopoverPrimitive.Trigger>\r\n <PopoverPrimitive.Content align=\"start\" sideOffset={4}>\r\n {props.multiselect ? <MultiListbox {...commonListboxProps} /> : <Listbox {...commonListboxProps} />}\r\n </PopoverPrimitive.Content>\r\n <input {...input} className=\"hidden\" type=\"text\" />\r\n </PopoverPrimitive.Root>\r\n </span>\r\n );\r\n});\r\n\r\nexport const Select = React.forwardRef(function Select(props: SelectProps, ref: React.Ref<HTMLInputElement>) {\r\n const { editable, ...otherProps } = props;\r\n\r\n if (editable) {\r\n return <Combobox {...otherProps} dialog={undefined} inline ref={ref} />;\r\n }\r\n\r\n return <BaseSelect {...otherProps} ref={ref} />;\r\n});\r\n"],"names":["BaseSelect","React","props","ref","autoFocus","externalClassName","className","style","otherProps","useSelect","button","listbox","popover","input","text","more","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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"}
|
@@ -1,21 +1,28 @@
|
|
1
|
+
import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
1
2
|
import React__default from 'react';
|
2
3
|
import cn from 'classnames';
|
3
4
|
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
React__default.
|
12
|
-
|
5
|
+
var _excluded = ["delay", "label"];
|
6
|
+
var Spinner = /*#__PURE__*/React__default.forwardRef(function Spinner(props, ref) {
|
7
|
+
var _props$delay = props.delay,
|
8
|
+
delay = _props$delay === void 0 ? 500 : _props$delay,
|
9
|
+
label = props.label,
|
10
|
+
otherProps = _objectWithoutPropertiesLoose(props, _excluded);
|
11
|
+
|
12
|
+
var _React$useState = React__default.useState(!delay),
|
13
|
+
visible = _React$useState[0],
|
14
|
+
setVisibility = _React$useState[1];
|
15
|
+
|
16
|
+
React__default.useEffect(function () {
|
17
|
+
var timeout;
|
13
18
|
|
14
19
|
if (delay) {
|
15
|
-
timeout = window.setTimeout(
|
20
|
+
timeout = window.setTimeout(function () {
|
21
|
+
return setVisibility(true);
|
22
|
+
}, delay);
|
16
23
|
}
|
17
24
|
|
18
|
-
return ()
|
25
|
+
return function () {
|
19
26
|
if (timeout) {
|
20
27
|
clearTimeout(timeout);
|
21
28
|
}
|
@@ -26,7 +33,7 @@ const Spinner = /*#__PURE__*/React__default.forwardRef(function Spinner(props, r
|
|
26
33
|
return null;
|
27
34
|
}
|
28
35
|
|
29
|
-
|
36
|
+
var className = cn('inline-flex flex-col relative items-center', otherProps.className);
|
30
37
|
return React__default.createElement("div", Object.assign({}, otherProps, {
|
31
38
|
className: className,
|
32
39
|
"data-taco": "spinner",
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Spinner.js","sources":["../../../../src/components/Spinner/Spinner.tsx"],"sourcesContent":["import React from 'react';\r\nimport cn from 'classnames';\r\nimport './Spinner.css';\r\n\r\nexport type SpinnerProps = React.HTMLAttributes<HTMLDivElement> & {\r\n /**\r\n * Define a delay in milliseconds after which the spinner is shown.\r\n * Default value is `500`ms\r\n */\r\n delay?: number;\r\n /** Define a text that will be displayed below spinner */\r\n label?: string;\r\n};\r\n\r\nexport const Spinner = React.forwardRef(function Spinner(props: SpinnerProps, ref: React.Ref<HTMLDivElement>) {\r\n const { delay = 500, label, ...otherProps } = props;\r\n const [visible, setVisibility] = React.useState(!delay);\r\n\r\n React.useEffect(() => {\r\n let timeout: number;\r\n\r\n if (delay) {\r\n timeout = window.setTimeout(() => setVisibility(true), delay);\r\n }\r\n\r\n return () => {\r\n if (timeout) {\r\n clearTimeout(timeout);\r\n }\r\n };\r\n }, [delay]);\r\n\r\n if (!visible) {\r\n return null;\r\n }\r\n\r\n const className = cn('inline-flex flex-col relative items-center', otherProps.className);\r\n\r\n return (\r\n <div {...otherProps} className={className} data-taco=\"spinner\" ref={ref}>\r\n <svg\r\n className=\"h-10 w-10 animate-[spinnerRotation_2s_linear_infinite]\"\r\n viewBox=\"0 0 100 100\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n >\r\n <circle cx=\"50\" cy=\"50\" r=\"45\"></circle>\r\n </svg>\r\n {label && <span className=\"mt-4\">{label}</span>}\r\n </div>\r\n );\r\n});\r\n"],"names":["Spinner","React","forwardRef","props","ref","delay","label","otherProps","
|
1
|
+
{"version":3,"file":"Spinner.js","sources":["../../../../src/components/Spinner/Spinner.tsx"],"sourcesContent":["import React from 'react';\r\nimport cn from 'classnames';\r\nimport './Spinner.css';\r\n\r\nexport type SpinnerProps = React.HTMLAttributes<HTMLDivElement> & {\r\n /**\r\n * Define a delay in milliseconds after which the spinner is shown.\r\n * Default value is `500`ms\r\n */\r\n delay?: number;\r\n /** Define a text that will be displayed below spinner */\r\n label?: string;\r\n};\r\n\r\nexport const Spinner = React.forwardRef(function Spinner(props: SpinnerProps, ref: React.Ref<HTMLDivElement>) {\r\n const { delay = 500, label, ...otherProps } = props;\r\n const [visible, setVisibility] = React.useState(!delay);\r\n\r\n React.useEffect(() => {\r\n let timeout: number;\r\n\r\n if (delay) {\r\n timeout = window.setTimeout(() => setVisibility(true), delay);\r\n }\r\n\r\n return () => {\r\n if (timeout) {\r\n clearTimeout(timeout);\r\n }\r\n };\r\n }, [delay]);\r\n\r\n if (!visible) {\r\n return null;\r\n }\r\n\r\n const className = cn('inline-flex flex-col relative items-center', otherProps.className);\r\n\r\n return (\r\n <div {...otherProps} className={className} data-taco=\"spinner\" ref={ref}>\r\n <svg\r\n className=\"h-10 w-10 animate-[spinnerRotation_2s_linear_infinite]\"\r\n viewBox=\"0 0 100 100\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n >\r\n <circle cx=\"50\" cy=\"50\" r=\"45\"></circle>\r\n </svg>\r\n {label && <span className=\"mt-4\">{label}</span>}\r\n </div>\r\n );\r\n});\r\n"],"names":["Spinner","React","forwardRef","props","ref","delay","label","otherProps","useState","visible","setVisibility","useEffect","timeout","window","setTimeout","clearTimeout","className","cn","viewBox","xmlns","cx","cy","r"],"mappings":";;;;;IAcaA,OAAO,gBAAGC,cAAK,CAACC,UAAN,CAAiB,SAASF,OAAT,CAAiBG,KAAjB,EAAsCC,GAAtC;AACpC,qBAA8CD,KAA9C,CAAQE,KAAR;AAAA,MAAQA,KAAR,6BAAgB,GAAhB;AAAA,MAAqBC,KAArB,GAA8CH,KAA9C,CAAqBG,KAArB;AAAA,MAA+BC,UAA/B,iCAA8CJ,KAA9C;;AACA,wBAAiCF,cAAK,CAACO,QAAN,CAAe,CAACH,KAAhB,CAAjC;AAAA,MAAOI,OAAP;AAAA,MAAgBC,aAAhB;;AAEAT,EAAAA,cAAK,CAACU,SAAN,CAAgB;AACZ,QAAIC,OAAJ;;AAEA,QAAIP,KAAJ,EAAW;AACPO,MAAAA,OAAO,GAAGC,MAAM,CAACC,UAAP,CAAkB;AAAA,eAAMJ,aAAa,CAAC,IAAD,CAAnB;AAAA,OAAlB,EAA6CL,KAA7C,CAAV;AACH;;AAED,WAAO;AACH,UAAIO,OAAJ,EAAa;AACTG,QAAAA,YAAY,CAACH,OAAD,CAAZ;AACH;AACJ,KAJD;AAKH,GAZD,EAYG,CAACP,KAAD,CAZH;;AAcA,MAAI,CAACI,OAAL,EAAc;AACV,WAAO,IAAP;AACH;;AAED,MAAMO,SAAS,GAAGC,EAAE,CAAC,4CAAD,EAA+CV,UAAU,CAACS,SAA1D,CAApB;AAEA,SACIf,4BAAA,MAAA,oBAASM;AAAYS,IAAAA,SAAS,EAAEA;iBAAqB;AAAUZ,IAAAA,GAAG,EAAEA;IAApE,EACIH,4BAAA,MAAA;AACIe,IAAAA,SAAS,EAAC;AACVE,IAAAA,OAAO,EAAC;AACRC,IAAAA,KAAK,EAAC;GAHV,EAKIlB,4BAAA,SAAA;AAAQmB,IAAAA,EAAE,EAAC;AAAKC,IAAAA,EAAE,EAAC;AAAKC,IAAAA,CAAC,EAAC;GAA1B,CALJ,CADJ,EAQKhB,KAAK,IAAIL,4BAAA,OAAA;AAAMe,IAAAA,SAAS,EAAC;GAAhB,EAAwBV,KAAxB,CARd,CADJ;AAYH,CApCsB;;;;"}
|
@@ -1,19 +1,20 @@
|
|
1
|
+
import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
1
2
|
import { forwardRef, createElement } from 'react';
|
2
3
|
import cn from 'classnames';
|
3
4
|
import { Root, Thumb } from '@radix-ui/react-switch';
|
4
5
|
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
6
|
+
var _excluded = ["label", "onChange"];
|
7
|
+
var Switch = /*#__PURE__*/forwardRef(function Switch(props, ref) {
|
8
|
+
var label = props.label,
|
9
|
+
onChange = props.onChange,
|
10
|
+
otherProps = _objectWithoutPropertiesLoose(props, _excluded);
|
11
|
+
|
12
|
+
var className = cn('group h-6 w-10 flex rounded-full inline-flex', {
|
12
13
|
'mr-2': !!label,
|
13
14
|
'bg-grey-darker aria-checked:bg-blue focus:yt-focus': !props.disabled,
|
14
15
|
'bg-grey-light cursor-not-allowed aria-checked:bg-blue-light': props.disabled
|
15
16
|
}, props.className);
|
16
|
-
|
17
|
+
var element = createElement(Root, Object.assign({}, otherProps, {
|
17
18
|
className: className,
|
18
19
|
onCheckedChange: onChange,
|
19
20
|
ref: ref
|
@@ -22,7 +23,7 @@ const Switch = /*#__PURE__*/forwardRef(function Switch(props, ref) {
|
|
22
23
|
}));
|
23
24
|
|
24
25
|
if (label) {
|
25
|
-
|
26
|
+
var labelClassName = cn('flex items-center cursor-pointer', {
|
26
27
|
'cursor-not-allowed text-grey-dark': props.disabled
|
27
28
|
});
|
28
29
|
return createElement("label", {
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Switch.js","sources":["../../../../src/components/Switch/Switch.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport cn from 'classnames';\r\nimport * as PrimitiveSwitch from '@radix-ui/react-switch';\r\n\r\ntype SwitchBaseProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'onChange'> & {\r\n /** Label for the switch */\r\n label?: React.ReactNode;\r\n /* Whether user input is required */\r\n required?: boolean;\r\n};\r\n\r\ninterface UncontrolledSwitchProps extends SwitchBaseProps {\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 ControlledSwitchProps extends SwitchBaseProps {\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 SwitchProps = UncontrolledSwitchProps | ControlledSwitchProps;\r\n\r\nexport const Switch = React.forwardRef(function Switch(props: SwitchProps, ref: React.Ref<HTMLButtonElement>) {\r\n const { label, onChange, ...otherProps } = props;\r\n\r\n const className = cn(\r\n 'group h-6 w-10 flex rounded-full inline-flex',\r\n {\r\n 'mr-2': !!label,\r\n 'bg-grey-darker aria-checked:bg-blue focus:yt-focus': !props.disabled,\r\n 'bg-grey-light cursor-not-allowed aria-checked:bg-blue-light': props.disabled,\r\n },\r\n props.className\r\n );\r\n\r\n const element = (\r\n <PrimitiveSwitch.Root {...otherProps} className={className} onCheckedChange={onChange} ref={ref}>\r\n <PrimitiveSwitch.Thumb className=\"'will-change-transform transition-transform translate-x-1 group-aria-checked:translate-x-5 h-4 w-4 mt-1 bg-white rounded-full\" />\r\n </PrimitiveSwitch.Root>\r\n );\r\n\r\n if (label) {\r\n const labelClassName = cn('flex items-center cursor-pointer', {\r\n 'cursor-not-allowed text-grey-dark': props.disabled,\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":["Switch","React","props","ref","label","onChange","otherProps","className","cn","disabled","element","PrimitiveSwitch","onCheckedChange","labelClassName"],"mappings":"
|
1
|
+
{"version":3,"file":"Switch.js","sources":["../../../../src/components/Switch/Switch.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport cn from 'classnames';\r\nimport * as PrimitiveSwitch from '@radix-ui/react-switch';\r\n\r\ntype SwitchBaseProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'onChange'> & {\r\n /** Label for the switch */\r\n label?: React.ReactNode;\r\n /* Whether user input is required */\r\n required?: boolean;\r\n};\r\n\r\ninterface UncontrolledSwitchProps extends SwitchBaseProps {\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 ControlledSwitchProps extends SwitchBaseProps {\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 SwitchProps = UncontrolledSwitchProps | ControlledSwitchProps;\r\n\r\nexport const Switch = React.forwardRef(function Switch(props: SwitchProps, ref: React.Ref<HTMLButtonElement>) {\r\n const { label, onChange, ...otherProps } = props;\r\n\r\n const className = cn(\r\n 'group h-6 w-10 flex rounded-full inline-flex',\r\n {\r\n 'mr-2': !!label,\r\n 'bg-grey-darker aria-checked:bg-blue focus:yt-focus': !props.disabled,\r\n 'bg-grey-light cursor-not-allowed aria-checked:bg-blue-light': props.disabled,\r\n },\r\n props.className\r\n );\r\n\r\n const element = (\r\n <PrimitiveSwitch.Root {...otherProps} className={className} onCheckedChange={onChange} ref={ref}>\r\n <PrimitiveSwitch.Thumb className=\"'will-change-transform transition-transform translate-x-1 group-aria-checked:translate-x-5 h-4 w-4 mt-1 bg-white rounded-full\" />\r\n </PrimitiveSwitch.Root>\r\n );\r\n\r\n if (label) {\r\n const labelClassName = cn('flex items-center cursor-pointer', {\r\n 'cursor-not-allowed text-grey-dark': props.disabled,\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":["Switch","React","props","ref","label","onChange","otherProps","className","cn","disabled","element","PrimitiveSwitch","onCheckedChange","labelClassName"],"mappings":";;;;;;IA4BaA,MAAM,gBAAGC,UAAA,CAAiB,SAASD,MAAT,CAAgBE,KAAhB,EAAoCC,GAApC;AACnC,MAAQC,KAAR,GAA2CF,KAA3C,CAAQE,KAAR;AAAA,MAAeC,QAAf,GAA2CH,KAA3C,CAAeG,QAAf;AAAA,MAA4BC,UAA5B,iCAA2CJ,KAA3C;;AAEA,MAAMK,SAAS,GAAGC,EAAE,CAChB,8CADgB,EAEhB;AACI,YAAQ,CAAC,CAACJ,KADd;AAEI,0DAAsD,CAACF,KAAK,CAACO,QAFjE;AAGI,mEAA+DP,KAAK,CAACO;AAHzE,GAFgB,EAOhBP,KAAK,CAACK,SAPU,CAApB;AAUA,MAAMG,OAAO,GACTT,aAAA,CAACU,IAAD,oBAA0BL;AAAYC,IAAAA,SAAS,EAAEA;AAAWK,IAAAA,eAAe,EAAEP;AAAUF,IAAAA,GAAG,EAAEA;IAA5F,EACIF,aAAA,CAACU,KAAD;AAAuBJ,IAAAA,SAAS,EAAC;GAAjC,CADJ,CADJ;;AAMA,MAAIH,KAAJ,EAAW;AACP,QAAMS,cAAc,GAAGL,EAAE,CAAC,kCAAD,EAAqC;AAC1D,2CAAqCN,KAAK,CAACO;AADe,KAArC,CAAzB;AAIA,WACIR,aAAA,QAAA;AAAOM,MAAAA,SAAS,EAAEM;KAAlB,EACKH,OADL,EAEKN,KAFL,CADJ;AAMH;;AAED,SAAOM,OAAP;AACH,CAjCqB;;;;"}
|
@@ -1,17 +1,21 @@
|
|
1
|
+
import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
1
2
|
import { forwardRef, createElement } from 'react';
|
2
3
|
import cn from 'classnames';
|
3
4
|
import { Root, List, Trigger, Content } from '@radix-ui/react-tabs';
|
4
5
|
|
5
|
-
|
6
|
-
|
7
|
-
id
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
6
|
+
var _excluded = ["id", "defaultId", "children", "onChange", "orientation"],
|
7
|
+
_excluded2 = ["id", "disabled"],
|
8
|
+
_excluded3 = ["id"];
|
9
|
+
var Tabs = /*#__PURE__*/forwardRef(function Tabs(props, ref) {
|
10
|
+
var id = props.id,
|
11
|
+
defaultId = props.defaultId,
|
12
|
+
children = props.children,
|
13
|
+
onChange = props.onChange,
|
14
|
+
_props$orientation = props.orientation,
|
15
|
+
orientation = _props$orientation === void 0 ? 'horizontal' : _props$orientation,
|
16
|
+
otherProps = _objectWithoutPropertiesLoose(props, _excluded);
|
17
|
+
|
18
|
+
var className = cn('yt-tabs', "yt-tabs--" + orientation, {
|
15
19
|
'flex w-full': orientation === 'vertical'
|
16
20
|
}, props.className);
|
17
21
|
return createElement(Root, Object.assign({}, otherProps, {
|
@@ -25,20 +29,19 @@ const Tabs = /*#__PURE__*/forwardRef(function Tabs(props, ref) {
|
|
25
29
|
value: id
|
26
30
|
}), children);
|
27
31
|
});
|
28
|
-
|
29
|
-
|
32
|
+
var TabList = /*#__PURE__*/forwardRef(function Tab(props, ref) {
|
33
|
+
var className = cn('yt-tab__list border-b border-grey-light flex flex-row m-0 mb-4', props.className);
|
30
34
|
return createElement(List, Object.assign({}, props, {
|
31
35
|
className: className,
|
32
36
|
ref: ref
|
33
37
|
}));
|
34
38
|
});
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
const className = cn('yt-tab bg-transparent border-b-2 border-transparent text-grey-darkest m-0 py-2 px-4', disabled ? 'cursor-not-allowed !text-grey' : 'cursor-pointer rounded-t hover:border-grey-light hover:text-black active:yt-focus active:border-blue focus:yt-focus focus:border-blue', props.className);
|
39
|
+
var TabTrigger = /*#__PURE__*/forwardRef(function Tab(props, ref) {
|
40
|
+
var id = props.id,
|
41
|
+
disabled = props.disabled,
|
42
|
+
otherProps = _objectWithoutPropertiesLoose(props, _excluded2);
|
43
|
+
|
44
|
+
var className = cn('yt-tab bg-transparent border-b-2 border-transparent text-grey-darkest m-0 py-2 px-4', disabled ? 'cursor-not-allowed !text-grey' : 'cursor-pointer rounded-t hover:border-grey-light hover:text-black active:yt-focus active:border-blue focus:yt-focus focus:border-blue', props.className);
|
42
45
|
return createElement(Trigger, Object.assign({}, otherProps, {
|
43
46
|
className: className,
|
44
47
|
disabled: disabled,
|
@@ -49,12 +52,11 @@ const TabTrigger = /*#__PURE__*/forwardRef(function Tab(props, ref) {
|
|
49
52
|
value: id
|
50
53
|
}));
|
51
54
|
});
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
const className = cn('yt-tab__panel outline-none', props.className);
|
55
|
+
var TabContent = /*#__PURE__*/forwardRef(function Tab(props, ref) {
|
56
|
+
var id = props.id,
|
57
|
+
otherProps = _objectWithoutPropertiesLoose(props, _excluded3);
|
58
|
+
|
59
|
+
var className = cn('yt-tab__panel outline-none', props.className);
|
58
60
|
return createElement(Content, Object.assign({}, otherProps, {
|
59
61
|
className: className,
|
60
62
|
ref: ref,
|