@economic/taco 1.1.8 → 1.1.9-alpha.0
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/Badge/Badge.js +14 -14
- package/dist/esm/components/Badge/Badge.js.map +1 -1
- package/dist/esm/components/Calendar/Calendar.js +56 -71
- package/dist/esm/components/Calendar/Calendar.js.map +1 -1
- package/dist/esm/components/Card/Card.js +14 -12
- package/dist/esm/components/Card/Card.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/Combobox/Combobox.js +23 -25
- package/dist/esm/components/Combobox/Combobox.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 +27 -35
- package/dist/esm/components/Hanger/Hanger.js.map +1 -1
- package/dist/esm/components/HoverCard/HoverCard.js +8 -9
- package/dist/esm/components/HoverCard/HoverCard.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 +25 -25
- 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/Menu/Menu.js +16 -34
- 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 +11 -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/Spinner/Spinner.js +12 -19
- package/dist/esm/components/Spinner/Spinner.js.map +1 -1
- package/dist/esm/components/Switch/Switch.js +9 -10
- package/dist/esm/components/Switch/Switch.js.map +1 -1
- package/dist/esm/components/Tabs/Tabs.js +25 -27
- package/dist/esm/components/Tabs/Tabs.js.map +1 -1
- package/dist/esm/components/Textarea/Textarea.js +11 -9
- package/dist/esm/components/Textarea/Textarea.js.map +1 -1
- package/dist/esm/components/Toast/Toaster.js +88 -118
- package/dist/esm/components/Toast/Toaster.js.map +1 -1
- package/dist/esm/components/Tooltip/Tooltip.js +7 -8
- package/dist/esm/components/Tooltip/Tooltip.js.map +1 -1
- package/dist/esm/components/Tour/Tour.js +44 -50
- package/dist/esm/components/Tour/Tour.js.map +1 -1
- package/dist/esm/components/Treeview/Treeview.js +26 -36
- 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.js +1 -0
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/utils/hooks/useProxiedRef.js +3 -3
- package/dist/esm/utils/hooks/useProxiedRef.js.map +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/taco.cjs.development.js +789 -944
- 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 +130 -131
- package/tailwind.config.js +5 -0
@@ -1,22 +1,22 @@
|
|
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 { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.js';
|
5
4
|
import { getOutlineClasses, getStateClasses } from '../../utils/taillwind.js';
|
6
5
|
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
6
|
+
const Badge = /*#__PURE__*/forwardRef(function Badge(props, ref) {
|
7
|
+
const {
|
8
|
+
children,
|
9
|
+
compact = false,
|
10
|
+
outline = false,
|
11
|
+
state,
|
12
|
+
...otherProps
|
13
|
+
} = props;
|
14
|
+
const className = cn('rounded-full border font-bold text-xs uppercase overflow-hidden whitespace-nowrap inline-flex items-center justify-center h-5', {
|
15
|
+
[getOutlineClasses(state)]: outline,
|
16
|
+
[`border-transparent ${getStateClasses(state)}`]: !outline,
|
17
|
+
'h-2 w-2 min-w-0': compact,
|
18
|
+
'h-5 py-0 px-1.5': !compact
|
19
|
+
}, props.className);
|
20
20
|
return createElement("span", Object.assign({}, otherProps, {
|
21
21
|
"aria-atomic": "true",
|
22
22
|
"aria-live": "polite",
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Badge.js","sources":["../../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport cn from 'classnames';\r\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\r\nimport { State } from '../../types';\r\nimport { getStateClasses, getOutlineClasses } from '../../utils/taillwind';\r\nimport './Badge.css';\r\n\r\nexport type BadgeProps = React.HTMLAttributes<HTMLSpanElement> & {\r\n /** Content should be a numerical value or tag/status like text **/\r\n children: React.ReactNode;\r\n /** Show compact version **/\r\n compact?: boolean;\r\n /** Show outlined version **/\r\n outline?: boolean;\r\n /** State will change the style of the badge **/\r\n state?: State;\r\n};\r\n\r\nexport const Badge = React.forwardRef(function Badge(props: BadgeProps, ref: React.Ref<HTMLSpanElement>) {\r\n const { children, compact = false, outline = false, state, ...otherProps } = props;\r\n const className = cn(\r\n 'rounded-full border font-bold text-xs uppercase overflow-hidden whitespace-nowrap inline-flex items-center justify-center h-5',\r\n {\r\n [getOutlineClasses(state)]: outline,\r\n [`border-transparent ${getStateClasses(state)}`]: !outline,\r\n 'h-2 w-2 min-w-0': compact,\r\n 'h-5 py-0 px-1.5': !compact, // custom padding keeps single digits in a perfect circle\r\n },\r\n props.className\r\n );\r\n\r\n return (\r\n <span\r\n {...otherProps}\r\n aria-atomic=\"true\"\r\n aria-live=\"polite\"\r\n className={className}\r\n data-taco=\"badge\"\r\n ref={ref}\r\n role=\"status\"\r\n title={props['aria-label']}\r\n >\r\n {compact ? <VisuallyHidden>{children}</VisuallyHidden> : children}\r\n </span>\r\n );\r\n});\r\n"],"names":["Badge","React","props","ref","children","compact","outline","state","otherProps","className","cn","getOutlineClasses","getStateClasses","role","title","VisuallyHidden"],"mappings":"
|
1
|
+
{"version":3,"file":"Badge.js","sources":["../../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport cn from 'classnames';\r\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\r\nimport { State } from '../../types';\r\nimport { getStateClasses, getOutlineClasses } from '../../utils/taillwind';\r\nimport './Badge.css';\r\n\r\nexport type BadgeProps = React.HTMLAttributes<HTMLSpanElement> & {\r\n /** Content should be a numerical value or tag/status like text **/\r\n children: React.ReactNode;\r\n /** Show compact version **/\r\n compact?: boolean;\r\n /** Show outlined version **/\r\n outline?: boolean;\r\n /** State will change the style of the badge **/\r\n state?: State;\r\n};\r\n\r\nexport const Badge = React.forwardRef(function Badge(props: BadgeProps, ref: React.Ref<HTMLSpanElement>) {\r\n const { children, compact = false, outline = false, state, ...otherProps } = props;\r\n const className = cn(\r\n 'rounded-full border font-bold text-xs uppercase overflow-hidden whitespace-nowrap inline-flex items-center justify-center h-5',\r\n {\r\n [getOutlineClasses(state)]: outline,\r\n [`border-transparent ${getStateClasses(state)}`]: !outline,\r\n 'h-2 w-2 min-w-0': compact,\r\n 'h-5 py-0 px-1.5': !compact, // custom padding keeps single digits in a perfect circle\r\n },\r\n props.className\r\n );\r\n\r\n return (\r\n <span\r\n {...otherProps}\r\n aria-atomic=\"true\"\r\n aria-live=\"polite\"\r\n className={className}\r\n data-taco=\"badge\"\r\n ref={ref}\r\n role=\"status\"\r\n title={props['aria-label']}\r\n >\r\n {compact ? <VisuallyHidden>{children}</VisuallyHidden> : children}\r\n </span>\r\n );\r\n});\r\n"],"names":["Badge","React","props","ref","children","compact","outline","state","otherProps","className","cn","getOutlineClasses","getStateClasses","role","title","VisuallyHidden"],"mappings":";;;;;MAkBaA,KAAK,gBAAGC,UAAA,CAAiB,SAASD,KAAT,CAAeE,KAAf,EAAkCC,GAAlC;EAClC,MAAM;IAAEC,QAAF;IAAYC,OAAO,GAAG,KAAtB;IAA6BC,OAAO,GAAG,KAAvC;IAA8CC,KAA9C;IAAqD,GAAGC;MAAeN,KAA7E;EACA,MAAMO,SAAS,GAAGC,EAAE,CAChB,+HADgB,EAEhB;IACI,CAACC,iBAAiB,CAACJ,KAAD,CAAlB,GAA4BD,OADhC;IAEI,uBAAuBM,eAAe,CAACL,KAAD,GAAtC,GAAkD,CAACD,OAFvD;IAGI,mBAAmBD,OAHvB;IAII,mBAAmB,CAACA;GANR,EAQhBH,KAAK,CAACO,SARU,CAApB;EAWA,OACIR,aAAA,OAAA,oBACQO;mBACQ;iBACF;IACVC,SAAS,EAAEA;iBACD;IACVN,GAAG,EAAEA;IACLU,IAAI,EAAC;IACLC,KAAK,EAAEZ,KAAK,CAAC,YAAD;IARhB,EAUKG,OAAO,GAAGJ,aAAA,CAACc,cAAD,MAAA,EAAiBX,QAAjB,CAAH,GAAiDA,QAV7D,CADJ;AAcH,CA3BoB;;;;"}
|
@@ -1,41 +1,40 @@
|
|
1
|
-
import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
2
1
|
import { forwardRef, useState, useEffect, createElement, memo } from 'react';
|
3
2
|
import cn from 'classnames';
|
4
3
|
import { IconButton } from '../IconButton/IconButton.js';
|
5
4
|
import ReactDayPicker from 'react-day-picker';
|
6
5
|
import { useLocalization } from '../Provider/Provider.js';
|
7
6
|
|
8
|
-
|
7
|
+
const renderDay = (day, modifiers) => modifiers.disabled ? createElement("span", {
|
8
|
+
className: "dot"
|
9
|
+
}) : day.getDate();
|
9
10
|
|
10
|
-
|
11
|
-
|
12
|
-
className: "dot"
|
13
|
-
}) : day.getDate();
|
14
|
-
};
|
11
|
+
const thisYear = /*#__PURE__*/new Date().getFullYear();
|
12
|
+
const years = [];
|
15
13
|
|
16
|
-
|
17
|
-
var years = [];
|
18
|
-
|
19
|
-
for (var i = thisYear - 10; i <= thisYear + 10; i += 1) {
|
14
|
+
for (let i = thisYear - 10; i <= thisYear + 10; i += 1) {
|
20
15
|
years.push(i);
|
21
16
|
}
|
22
17
|
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
18
|
+
const Navbar = /*#__PURE__*/memo(({
|
19
|
+
onMonthChange,
|
20
|
+
onNextClick,
|
21
|
+
onPreviousClick,
|
22
|
+
value = new Date()
|
23
|
+
}) => {
|
24
|
+
const {
|
25
|
+
texts: {
|
26
|
+
calendar: {
|
27
|
+
actions,
|
28
|
+
months
|
29
|
+
}
|
30
|
+
}
|
31
|
+
} = useLocalization();
|
34
32
|
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
33
|
+
const handleChange = function handleChange(event) {
|
34
|
+
const {
|
35
|
+
year,
|
36
|
+
month
|
37
|
+
} = event.target.form;
|
39
38
|
onMonthChange(new Date(year.value, month.value));
|
40
39
|
};
|
41
40
|
|
@@ -48,59 +47,49 @@ var Navbar = /*#__PURE__*/memo(function (_ref) {
|
|
48
47
|
name: "month",
|
49
48
|
onChange: handleChange,
|
50
49
|
value: value.getMonth()
|
51
|
-
}, months.map(
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
}, month);
|
56
|
-
})), createElement("select", {
|
50
|
+
}, months.map((month, i) => createElement("option", {
|
51
|
+
key: month,
|
52
|
+
value: i
|
53
|
+
}, month))), createElement("select", {
|
57
54
|
className: "h-8 px-2",
|
58
55
|
name: "year",
|
59
56
|
onChange: handleChange,
|
60
57
|
value: value.getFullYear()
|
61
|
-
}, years.map(
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
}, String(year));
|
66
|
-
}))), createElement("div", null, createElement(IconButton, {
|
58
|
+
}, years.map(year => createElement("option", {
|
59
|
+
key: year,
|
60
|
+
value: year
|
61
|
+
}, String(year))))), createElement("div", null, createElement(IconButton, {
|
67
62
|
appearance: "discrete",
|
68
63
|
icon: "chevron-left",
|
69
64
|
"aria-label": actions.previousMonth,
|
70
|
-
onClick:
|
71
|
-
return onPreviousClick();
|
72
|
-
},
|
65
|
+
onClick: () => onPreviousClick(),
|
73
66
|
rounded: true
|
74
67
|
}), createElement(IconButton, {
|
75
68
|
appearance: "discrete",
|
76
69
|
icon: "chevron-right",
|
77
70
|
"aria-label": actions.nextMonth,
|
78
|
-
onClick:
|
79
|
-
return onNextClick();
|
80
|
-
},
|
71
|
+
onClick: () => onNextClick(),
|
81
72
|
rounded: true
|
82
73
|
})));
|
83
74
|
});
|
84
|
-
|
85
|
-
|
86
|
-
|
87
|
-
|
88
|
-
|
89
|
-
|
90
|
-
|
91
|
-
|
92
|
-
|
93
|
-
|
94
|
-
|
95
|
-
|
96
|
-
|
97
|
-
useEffect(function () {
|
75
|
+
const Calendar = /*#__PURE__*/forwardRef(function Calendar(props, ref) {
|
76
|
+
const {
|
77
|
+
onChange: handleChange,
|
78
|
+
value,
|
79
|
+
...otherProps
|
80
|
+
} = props;
|
81
|
+
const {
|
82
|
+
locale,
|
83
|
+
texts
|
84
|
+
} = useLocalization();
|
85
|
+
const [visibleMonth, setVisibleMonth] = useState(value !== null && value !== void 0 ? value : new Date());
|
86
|
+
useEffect(() => {
|
98
87
|
if (visibleMonth !== value) {
|
99
88
|
setVisibleMonth(value !== null && value !== void 0 ? value : new Date());
|
100
89
|
}
|
101
90
|
}, [value]);
|
102
91
|
|
103
|
-
|
92
|
+
const handleDayClick = (date, modifiers, event) => {
|
104
93
|
if (modifiers.outside || modifiers.disabled) {
|
105
94
|
return;
|
106
95
|
}
|
@@ -108,8 +97,8 @@ var Calendar = /*#__PURE__*/forwardRef(function Calendar(props, ref) {
|
|
108
97
|
handleChange(date, event);
|
109
98
|
};
|
110
99
|
|
111
|
-
|
112
|
-
|
100
|
+
const handleCalendarClickToday = () => {
|
101
|
+
const today = new Date(); // set to midday to avoid UTC offset causing dates to be mismatched server side
|
113
102
|
|
114
103
|
today.setHours(12);
|
115
104
|
today.setMinutes(0);
|
@@ -117,7 +106,7 @@ var Calendar = /*#__PURE__*/forwardRef(function Calendar(props, ref) {
|
|
117
106
|
handleChange(today);
|
118
107
|
};
|
119
108
|
|
120
|
-
|
109
|
+
const className = cn('flex bg-white text-xs p-4', otherProps.className);
|
121
110
|
return createElement("div", {
|
122
111
|
"data-taco": "calendar"
|
123
112
|
}, createElement(ReactDayPicker, Object.assign({}, otherProps, {
|
@@ -128,18 +117,14 @@ var Calendar = /*#__PURE__*/forwardRef(function Calendar(props, ref) {
|
|
128
117
|
firstDayOfWeek: 1,
|
129
118
|
months: texts.calendar.months,
|
130
119
|
weekdaysShort: texts.calendar.weekdaysShort,
|
131
|
-
navbarElement:
|
132
|
-
|
133
|
-
|
134
|
-
|
135
|
-
}));
|
136
|
-
},
|
120
|
+
navbarElement: navProps => createElement(Navbar, Object.assign({}, navProps, {
|
121
|
+
onMonthChange: setVisibleMonth,
|
122
|
+
value: visibleMonth
|
123
|
+
})),
|
137
124
|
onDayClick: handleDayClick,
|
138
125
|
onMonthChange: setVisibleMonth,
|
139
126
|
onTodayButtonClick: handleCalendarClickToday,
|
140
|
-
captionElement:
|
141
|
-
return null;
|
142
|
-
},
|
127
|
+
captionElement: () => null,
|
143
128
|
todayButton: texts.calendar.actions.today,
|
144
129
|
showOutsideDays: true,
|
145
130
|
renderDay: renderDay,
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Calendar.js","sources":["../../../../src/components/Calendar/Calendar.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport cn from 'classnames';\r\nimport ReactDayPicker, { NavbarElementProps, DayModifiers } from 'react-day-picker';\r\nimport { useLocalization } from '../Provider/Provider';\r\nimport './Calendar.css';\r\nimport { IconButton } from '../IconButton/IconButton';\r\n\r\nexport type CalendarTextsActions = {\r\n /** Aria-label for previous month action button */\r\n previousMonth: string;\r\n /** Aria-label for next month action button */\r\n nextMonth: string;\r\n /** Aria-label for previous year action button */\r\n previousYear: string;\r\n /** Aria-label for next year action button */\r\n nextYear: string;\r\n /** Text displayed within today action button */\r\n today: string;\r\n};\r\n\r\nexport type CalendarTexts = {\r\n /** Text and aria-label for action buttons in Calendar */\r\n actions: CalendarTextsActions;\r\n /** Text abbreviation for months in Calendar's header, starting with January */\r\n months: string[];\r\n /** Text abbreviation for days in Calendar's header, starting with Sunday */\r\n weekdaysShort: string[];\r\n};\r\n\r\nconst renderDay = (day: Date, modifiers: DayModifiers): React.ReactNode =>\r\n modifiers.disabled ? <span className=\"dot\" /> : day.getDate();\r\n\r\n/** @internal */\r\ntype CustomNavbarElementProps = NavbarElementProps & {\r\n showYearControls?: boolean;\r\n onMonthChange: (month: Date) => void;\r\n value?: Date;\r\n};\r\n\r\nconst thisYear = new Date().getFullYear();\r\nconst years: number[] = [];\r\n\r\nfor (let i = thisYear - 10; i <= thisYear + 10; i += 1) {\r\n years.push(i);\r\n}\r\n\r\nconst Navbar = React.memo(\r\n ({ onMonthChange, onNextClick, onPreviousClick, value = new Date() }: CustomNavbarElementProps): JSX.Element => {\r\n const {\r\n texts: {\r\n calendar: { actions, months },\r\n },\r\n } = useLocalization();\r\n\r\n const handleChange = function handleChange(event) {\r\n const { year, month } = event.target.form;\r\n onMonthChange(new Date(year.value, month.value));\r\n };\r\n\r\n return (\r\n <div className=\"mb-2 flex items-center justify-between\">\r\n <form className=\"inline-flex space-x-1\">\r\n <select className=\"h-8 px-2\" name=\"month\" onChange={handleChange} value={value.getMonth()}>\r\n {months.map((month, i) => (\r\n <option key={month} value={i}>\r\n {month}\r\n </option>\r\n ))}\r\n </select>\r\n <select className=\"h-8 px-2\" name=\"year\" onChange={handleChange} value={value.getFullYear()}>\r\n {years.map(year => (\r\n <option key={year} value={year}>\r\n {String(year)}\r\n </option>\r\n ))}\r\n </select>\r\n </form>\r\n <div>\r\n <IconButton\r\n appearance=\"discrete\"\r\n icon=\"chevron-left\"\r\n aria-label={actions.previousMonth}\r\n onClick={() => onPreviousClick()}\r\n rounded\r\n />\r\n <IconButton\r\n appearance=\"discrete\"\r\n icon=\"chevron-right\"\r\n aria-label={actions.nextMonth}\r\n onClick={() => onNextClick()}\r\n rounded\r\n />\r\n </div>\r\n </div>\r\n );\r\n }\r\n);\r\n\r\nexport type CalendarProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'value'> & {\r\n /** Handler called when a day is clicked in calendar */\r\n onChange: (date: Date, event?: React.MouseEvent<HTMLDivElement>) => void;\r\n value?: Date;\r\n};\r\n\r\nexport const Calendar = React.forwardRef(function Calendar(props: CalendarProps, ref: React.Ref<ReactDayPicker>) {\r\n const { onChange: handleChange, value, ...otherProps } = props;\r\n const { locale, texts } = useLocalization();\r\n const [visibleMonth, setVisibleMonth] = React.useState(value ?? new Date());\r\n\r\n React.useEffect(() => {\r\n if (visibleMonth !== value) {\r\n setVisibleMonth(value ?? new Date());\r\n }\r\n }, [value]);\r\n\r\n const handleDayClick = (date, modifiers, event) => {\r\n if (modifiers.outside || modifiers.disabled) {\r\n return;\r\n }\r\n\r\n handleChange(date, event);\r\n };\r\n\r\n const handleCalendarClickToday = (): void => {\r\n const today = new Date();\r\n\r\n // set to midday to avoid UTC offset causing dates to be mismatched server side\r\n today.setHours(12);\r\n today.setMinutes(0);\r\n today.setSeconds(0);\r\n\r\n handleChange(today);\r\n };\r\n\r\n const className = cn('flex bg-white text-xs p-4', otherProps.className);\r\n\r\n return (\r\n <div data-taco=\"calendar\">\r\n <ReactDayPicker\r\n {...otherProps}\r\n className={className}\r\n month={visibleMonth}\r\n selectedDays={value}\r\n locale={locale.substring(0, 2)}\r\n firstDayOfWeek={1}\r\n months={texts.calendar.months}\r\n weekdaysShort={texts.calendar.weekdaysShort}\r\n navbarElement={navProps => <Navbar {...navProps} onMonthChange={setVisibleMonth} value={visibleMonth} />}\r\n onDayClick={handleDayClick}\r\n onMonthChange={setVisibleMonth}\r\n onTodayButtonClick={handleCalendarClickToday}\r\n captionElement={() => null}\r\n todayButton={texts.calendar.actions.today}\r\n showOutsideDays\r\n renderDay={renderDay}\r\n numberOfMonths={1}\r\n ref={ref}\r\n />\r\n </div>\r\n );\r\n});\r\n"],"names":["renderDay","day","modifiers","disabled","React","className","getDate","thisYear","Date","getFullYear","years","i","push","Navbar","onMonthChange","onNextClick","onPreviousClick","value","useLocalization","texts","calendar","actions","months","handleChange","event","target","form","year","month","name","onChange","getMonth","map","key","String","IconButton","appearance","icon","previousMonth","onClick","rounded","nextMonth","Calendar","props","ref","otherProps","locale","visibleMonth","setVisibleMonth","handleDayClick","date","outside","handleCalendarClickToday","today","setHours","setMinutes","setSeconds","cn","ReactDayPicker","selectedDays","substring","firstDayOfWeek","weekdaysShort","navbarElement","navProps","onDayClick","onTodayButtonClick","captionElement","todayButton","showOutsideDays","numberOfMonths"],"mappings":"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"}
|
1
|
+
{"version":3,"file":"Calendar.js","sources":["../../../../src/components/Calendar/Calendar.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport cn from 'classnames';\r\nimport ReactDayPicker, { NavbarElementProps, DayModifiers } from 'react-day-picker';\r\nimport { useLocalization } from '../Provider/Provider';\r\nimport './Calendar.css';\r\nimport { IconButton } from '../IconButton/IconButton';\r\n\r\nexport type CalendarTextsActions = {\r\n /** Aria-label for previous month action button */\r\n previousMonth: string;\r\n /** Aria-label for next month action button */\r\n nextMonth: string;\r\n /** Aria-label for previous year action button */\r\n previousYear: string;\r\n /** Aria-label for next year action button */\r\n nextYear: string;\r\n /** Text displayed within today action button */\r\n today: string;\r\n};\r\n\r\nexport type CalendarTexts = {\r\n /** Text and aria-label for action buttons in Calendar */\r\n actions: CalendarTextsActions;\r\n /** Text abbreviation for months in Calendar's header, starting with January */\r\n months: string[];\r\n /** Text abbreviation for days in Calendar's header, starting with Sunday */\r\n weekdaysShort: string[];\r\n};\r\n\r\nconst renderDay = (day: Date, modifiers: DayModifiers): React.ReactNode =>\r\n modifiers.disabled ? <span className=\"dot\" /> : day.getDate();\r\n\r\n/** @internal */\r\ntype CustomNavbarElementProps = NavbarElementProps & {\r\n showYearControls?: boolean;\r\n onMonthChange: (month: Date) => void;\r\n value?: Date;\r\n};\r\n\r\nconst thisYear = new Date().getFullYear();\r\nconst years: number[] = [];\r\n\r\nfor (let i = thisYear - 10; i <= thisYear + 10; i += 1) {\r\n years.push(i);\r\n}\r\n\r\nconst Navbar = React.memo(\r\n ({ onMonthChange, onNextClick, onPreviousClick, value = new Date() }: CustomNavbarElementProps): JSX.Element => {\r\n const {\r\n texts: {\r\n calendar: { actions, months },\r\n },\r\n } = useLocalization();\r\n\r\n const handleChange = function handleChange(event) {\r\n const { year, month } = event.target.form;\r\n onMonthChange(new Date(year.value, month.value));\r\n };\r\n\r\n return (\r\n <div className=\"mb-2 flex items-center justify-between\">\r\n <form className=\"inline-flex space-x-1\">\r\n <select className=\"h-8 px-2\" name=\"month\" onChange={handleChange} value={value.getMonth()}>\r\n {months.map((month, i) => (\r\n <option key={month} value={i}>\r\n {month}\r\n </option>\r\n ))}\r\n </select>\r\n <select className=\"h-8 px-2\" name=\"year\" onChange={handleChange} value={value.getFullYear()}>\r\n {years.map(year => (\r\n <option key={year} value={year}>\r\n {String(year)}\r\n </option>\r\n ))}\r\n </select>\r\n </form>\r\n <div>\r\n <IconButton\r\n appearance=\"discrete\"\r\n icon=\"chevron-left\"\r\n aria-label={actions.previousMonth}\r\n onClick={() => onPreviousClick()}\r\n rounded\r\n />\r\n <IconButton\r\n appearance=\"discrete\"\r\n icon=\"chevron-right\"\r\n aria-label={actions.nextMonth}\r\n onClick={() => onNextClick()}\r\n rounded\r\n />\r\n </div>\r\n </div>\r\n );\r\n }\r\n);\r\n\r\nexport type CalendarProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'value'> & {\r\n /** Handler called when a day is clicked in calendar */\r\n onChange: (date: Date, event?: React.MouseEvent<HTMLDivElement>) => void;\r\n value?: Date;\r\n};\r\n\r\nexport const Calendar = React.forwardRef(function Calendar(props: CalendarProps, ref: React.Ref<ReactDayPicker>) {\r\n const { onChange: handleChange, value, ...otherProps } = props;\r\n const { locale, texts } = useLocalization();\r\n const [visibleMonth, setVisibleMonth] = React.useState(value ?? new Date());\r\n\r\n React.useEffect(() => {\r\n if (visibleMonth !== value) {\r\n setVisibleMonth(value ?? new Date());\r\n }\r\n }, [value]);\r\n\r\n const handleDayClick = (date, modifiers, event) => {\r\n if (modifiers.outside || modifiers.disabled) {\r\n return;\r\n }\r\n\r\n handleChange(date, event);\r\n };\r\n\r\n const handleCalendarClickToday = (): void => {\r\n const today = new Date();\r\n\r\n // set to midday to avoid UTC offset causing dates to be mismatched server side\r\n today.setHours(12);\r\n today.setMinutes(0);\r\n today.setSeconds(0);\r\n\r\n handleChange(today);\r\n };\r\n\r\n const className = cn('flex bg-white text-xs p-4', otherProps.className);\r\n\r\n return (\r\n <div data-taco=\"calendar\">\r\n <ReactDayPicker\r\n {...otherProps}\r\n className={className}\r\n month={visibleMonth}\r\n selectedDays={value}\r\n locale={locale.substring(0, 2)}\r\n firstDayOfWeek={1}\r\n months={texts.calendar.months}\r\n weekdaysShort={texts.calendar.weekdaysShort}\r\n navbarElement={navProps => <Navbar {...navProps} onMonthChange={setVisibleMonth} value={visibleMonth} />}\r\n onDayClick={handleDayClick}\r\n onMonthChange={setVisibleMonth}\r\n onTodayButtonClick={handleCalendarClickToday}\r\n captionElement={() => null}\r\n todayButton={texts.calendar.actions.today}\r\n showOutsideDays\r\n renderDay={renderDay}\r\n numberOfMonths={1}\r\n ref={ref}\r\n />\r\n </div>\r\n );\r\n});\r\n"],"names":["renderDay","day","modifiers","disabled","React","className","getDate","thisYear","Date","getFullYear","years","i","push","Navbar","onMonthChange","onNextClick","onPreviousClick","value","texts","calendar","actions","months","useLocalization","handleChange","event","year","month","target","form","name","onChange","getMonth","map","key","String","IconButton","appearance","icon","previousMonth","onClick","rounded","nextMonth","Calendar","props","ref","otherProps","locale","visibleMonth","setVisibleMonth","handleDayClick","date","outside","handleCalendarClickToday","today","setHours","setMinutes","setSeconds","cn","ReactDayPicker","selectedDays","substring","firstDayOfWeek","weekdaysShort","navbarElement","navProps","onDayClick","onTodayButtonClick","captionElement","todayButton","showOutsideDays","numberOfMonths"],"mappings":"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"}
|
@@ -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 '../Icon/components/index.js';
|
@@ -16,6 +15,7 @@ import '../Toast/Toaster.js';
|
|
16
15
|
import '../Provider/Provider.js';
|
17
16
|
import '../Calendar/Calendar.js';
|
18
17
|
import '../Checkbox/Checkbox.js';
|
18
|
+
import '../../utils/hooks/useProxiedRef.js';
|
19
19
|
import '../Input/Input.js';
|
20
20
|
import '../../utils/hooks/useListKeyboardNavigation.js';
|
21
21
|
import '../../utils/hooks/useListScrollTo.js';
|
@@ -51,12 +51,12 @@ import '../Switch/Switch.js';
|
|
51
51
|
import '../Tour/Tour.js';
|
52
52
|
import '../../utils/hooks/useOnClickOutside.js';
|
53
53
|
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
|
54
|
+
const Content = /*#__PURE__*/forwardRef(function CardContent(externalProps, ref) {
|
55
|
+
const {
|
56
|
+
noPadding,
|
57
|
+
...props
|
58
|
+
} = externalProps;
|
59
|
+
const className = cn('flex-grow overflow-auto', {
|
60
60
|
'mx-4 mb-4': !noPadding
|
61
61
|
}, props.className);
|
62
62
|
return createElement("div", Object.assign({}, props, {
|
@@ -64,11 +64,13 @@ var Content = /*#__PURE__*/forwardRef(function CardContent(externalProps, ref) {
|
|
64
64
|
ref: ref
|
65
65
|
}));
|
66
66
|
});
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
|
67
|
+
const Card = /*#__PURE__*/forwardRef(function Card(props, ref) {
|
68
|
+
const {
|
69
|
+
title,
|
70
|
+
menu,
|
71
|
+
children
|
72
|
+
} = props;
|
73
|
+
const className = cn('bg-white flex flex-col rounded-xl shadow-[0px_0px_1px_rgba(0,0,0,0.1),0px_6px_18px_rgba(47,51,68,0.2)]', props.className);
|
72
74
|
return createElement("div", {
|
73
75
|
className: className,
|
74
76
|
"data-taco": "card",
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Card.js","sources":["../../../../src/components/Card/Card.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport cn from 'classnames';\r\n\r\nimport { MenuProps, IconButton } from '../..';\r\n\r\nexport type CardContentProps = React.HTMLAttributes<HTMLDivElement> & {\r\n noPadding?: boolean;\r\n};\r\n\r\nconst Content = React.forwardRef<HTMLDivElement, CardContentProps>(function CardContent(externalProps, ref) {\r\n const { noPadding, ...props } = externalProps;\r\n const className = cn(\r\n 'flex-grow overflow-auto',\r\n {\r\n 'mx-4 mb-4': !noPadding,\r\n },\r\n props.className\r\n );\r\n return <div {...props} className={className} ref={ref} />;\r\n});\r\n\r\nexport type CardProps = React.HTMLAttributes<HTMLDivElement> & {\r\n /** Title of the Card */\r\n title: string | React.ReactElement;\r\n /** Menu component associated with the Card */\r\n menu?: (props: Partial<MenuProps>) => JSX.Element;\r\n};\r\n\r\nexport const Card = React.forwardRef<HTMLDivElement, CardProps>(function Card(props, ref) {\r\n const { title, menu, children } = props;\r\n const className = cn(\r\n 'bg-white flex flex-col rounded-xl shadow-[0px_0px_1px_rgba(0,0,0,0.1),0px_6px_18px_rgba(47,51,68,0.2)]',\r\n props.className\r\n );\r\n\r\n return (\r\n <div className={className} data-taco=\"card\" ref={ref}>\r\n <div className=\"mx-4 mt-4 mb-2 flex\">\r\n {title && <h4 className=\"mb-0 flex-grow text-left\">{title}</h4>}\r\n {menu ? <IconButton icon=\"ellipsis-horizontal\" appearance=\"discrete\" menu={menu} className=\"-mt-[4px]\" /> : null}\r\n </div>\r\n {children}\r\n </div>\r\n );\r\n}) as React.ForwardRefExoticComponent<CardProps> & {\r\n Content: React.ForwardRefExoticComponent<CardContentProps>;\r\n};\r\nCard.Content = Content;\r\n"],"names":["Content","React","CardContent","externalProps","ref","noPadding","props","className","cn","Card","title","menu","children","IconButton","icon","appearance"],"mappings":"
|
1
|
+
{"version":3,"file":"Card.js","sources":["../../../../src/components/Card/Card.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport cn from 'classnames';\r\n\r\nimport { MenuProps, IconButton } from '../..';\r\n\r\nexport type CardContentProps = React.HTMLAttributes<HTMLDivElement> & {\r\n noPadding?: boolean;\r\n};\r\n\r\nconst Content = React.forwardRef<HTMLDivElement, CardContentProps>(function CardContent(externalProps, ref) {\r\n const { noPadding, ...props } = externalProps;\r\n const className = cn(\r\n 'flex-grow overflow-auto',\r\n {\r\n 'mx-4 mb-4': !noPadding,\r\n },\r\n props.className\r\n );\r\n return <div {...props} className={className} ref={ref} />;\r\n});\r\n\r\nexport type CardProps = React.HTMLAttributes<HTMLDivElement> & {\r\n /** Title of the Card */\r\n title: string | React.ReactElement;\r\n /** Menu component associated with the Card */\r\n menu?: (props: Partial<MenuProps>) => JSX.Element;\r\n};\r\n\r\nexport const Card = React.forwardRef<HTMLDivElement, CardProps>(function Card(props, ref) {\r\n const { title, menu, children } = props;\r\n const className = cn(\r\n 'bg-white flex flex-col rounded-xl shadow-[0px_0px_1px_rgba(0,0,0,0.1),0px_6px_18px_rgba(47,51,68,0.2)]',\r\n props.className\r\n );\r\n\r\n return (\r\n <div className={className} data-taco=\"card\" ref={ref}>\r\n <div className=\"mx-4 mt-4 mb-2 flex\">\r\n {title && <h4 className=\"mb-0 flex-grow text-left\">{title}</h4>}\r\n {menu ? <IconButton icon=\"ellipsis-horizontal\" appearance=\"discrete\" menu={menu} className=\"-mt-[4px]\" /> : null}\r\n </div>\r\n {children}\r\n </div>\r\n );\r\n}) as React.ForwardRefExoticComponent<CardProps> & {\r\n Content: React.ForwardRefExoticComponent<CardContentProps>;\r\n};\r\nCard.Content = Content;\r\n"],"names":["Content","React","CardContent","externalProps","ref","noPadding","props","className","cn","Card","title","menu","children","IconButton","icon","appearance"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA,MAAMA,OAAO,gBAAGC,UAAA,CAAmD,SAASC,WAAT,CAAqBC,aAArB,EAAoCC,GAApC;EAC/D,MAAM;IAAEC,SAAF;IAAa,GAAGC;MAAUH,aAAhC;EACA,MAAMI,SAAS,GAAGC,EAAE,CAChB,yBADgB,EAEhB;IACI,aAAa,CAACH;GAHF,EAKhBC,KAAK,CAACC,SALU,CAApB;EAOA,OAAON,aAAA,MAAA,oBAASK;IAAOC,SAAS,EAAEA;IAAWH,GAAG,EAAEA;IAA3C,CAAP;AACH,CAVe,CAAhB;MAmBaK,IAAI,gBAAGR,UAAA,CAA4C,SAASQ,IAAT,CAAcH,KAAd,EAAqBF,GAArB;EAC5D,MAAM;IAAEM,KAAF;IAASC,IAAT;IAAeC;MAAaN,KAAlC;EACA,MAAMC,SAAS,GAAGC,EAAE,CAChB,wGADgB,EAEhBF,KAAK,CAACC,SAFU,CAApB;EAKA,OACIN,aAAA,MAAA;IAAKM,SAAS,EAAEA;iBAAqB;IAAOH,GAAG,EAAEA;GAAjD,EACIH,aAAA,MAAA;IAAKM,SAAS,EAAC;GAAf,EACKG,KAAK,IAAIT,aAAA,KAAA;IAAIM,SAAS,EAAC;GAAd,EAA0CG,KAA1C,CADd,EAEKC,IAAI,GAAGV,aAAA,CAACY,UAAD;IAAYC,IAAI,EAAC;IAAsBC,UAAU,EAAC;IAAWJ,IAAI,EAAEA;IAAMJ,SAAS,EAAC;GAAnF,CAAH,GAAuG,IAFhH,CADJ,EAKKK,QALL,CADJ;AASH,CAhBmB;AAmBpBH,IAAI,CAACT,OAAL,GAAeA,OAAf;;;;"}
|
@@ -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] focus:yt-focus', //hover:shadow-[0_0_0_1px_rgba(235,235,235,1)]
|
18
17
|
props.className, {
|
19
18
|
'border-grey-dark text-blue hover:text-blue-light focus:border-blue focus:hover:border-blue-light': !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 hover:text-red-light hover:border-red-light focus:border-red focus:hover:border-red-light': 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 gap-2', {
|
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(\r\n 'bg-white h-5 w-5 border rounded text-sm flex-shrink-0 self-start mt-[0.1rem] focus:yt-focus', //hover:shadow-[0_0_0_1px_rgba(235,235,235,1)]\r\n props.className,\r\n {\r\n 'border-grey-dark text-blue hover:text-blue-light focus:border-blue focus:hover:border-blue-light':\r\n !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 hover:text-red-light hover:border-red-light focus:border-red focus:hover:border-red-light':\r\n invalid && !props.disabled,\r\n }\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 gap-2',\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(\r\n 'bg-white h-5 w-5 border rounded text-sm flex-shrink-0 self-start mt-[0.1rem] focus:yt-focus', //hover:shadow-[0_0_0_1px_rgba(235,235,235,1)]\r\n props.className,\r\n {\r\n 'border-grey-dark text-blue hover:text-blue-light focus:border-blue focus:hover:border-blue-light':\r\n !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 hover:text-red-light hover:border-red-light focus:border-red focus:hover:border-red-light':\r\n invalid && !props.disabled,\r\n }\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 gap-2',\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;EACrC,MAAM;IAAEC,OAAF;IAAWC,WAAX;IAAwBC,aAAxB;IAAuCC,OAAvC;IAAgDC,KAAhD;IAAuDC,QAAvD;IAAiE,GAAGC;MAAeR,KAAzF;EAEA,MAAMS,SAAS,GAAGC,EAAE,CAChB,6FADgB;EAEhBV,KAAK,CAACS,SAFU,EAGhB;IACI,oGACI,CAACT,KAAK,CAACW,QAAP,IAAmB,CAACN,OAF5B;IAGI,kDAAkDL,KAAK,CAACW,QAH5D;IAII,gEAAgER,WAJpE;IAKI,iHACIE,OAAO,IAAI,CAACL,KAAK,CAACW;GATV,CAApB;EAaA,IAAIC,YAAJ;;EAEA,IAAIL,QAAJ,EAAc;IACVK,YAAY,GAAIV,OAAD,IAA2BK,QAAQ,CAACL,OAAO,KAAK,eAAZ,GAA8B,KAA9B,GAAsCA,OAAvC,CAAlD;;;EAGJ,MAAMW,OAAO,GACTd,aAAA,CAACe,IAAD,oBACQN;iBACM;IACVN,OAAO,EAAEE,aAAa,GAAG,eAAH,GAAqBF;IAC3CO,SAAS,EAAEA;IACXM,eAAe,EAAEH;IACjBX,GAAG,EAAEA;IANT,EAQIF,aAAA,CAACe,SAAD;IAA6BL,SAAS,EAAC;GAAvC,EACIV,aAAA,CAACiB,IAAD;IAAMC,IAAI,EAAEb,aAAa,GAAG,MAAH,GAAY;IAAQK,SAAS,EAAC;GAAvD,CADJ,CARJ,CADJ;;EAeA,IAAIH,KAAJ,EAAW;IACP,MAAMY,cAAc,GAAGR,EAAE,CACrB,wCADqB,EAErB;MACI,qCAAqCV,KAAK,CAACW;KAH1B,EAKrBX,KAAK,CAACS,SALe,CAAzB;IAQA,OACIV,aAAA,QAAA;MAAOU,SAAS,EAAES;KAAlB,EACKL,OADL,EAEKP,KAFL,CADJ;;;EAQJ,OAAOO,OAAP;AACH,CAvDuB;;;;"}
|
@@ -1,4 +1,3 @@
|
|
1
|
-
import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
2
1
|
import { forwardRef, useRef, createElement } from 'react';
|
3
2
|
import cn from 'classnames';
|
4
3
|
import { IconButton } from '../IconButton/IconButton.js';
|
@@ -9,27 +8,26 @@ import { ScrollableList } from '../Listbox/ScrollableList.js';
|
|
9
8
|
import { useCombobox } from './useCombobox.js';
|
10
9
|
import { useBoundingClientRectListener } from '../../utils/hooks/useBoundingClientRectListener.js';
|
11
10
|
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
var className = cn('inline-flex relative', {
|
11
|
+
const Combobox = /*#__PURE__*/forwardRef(function Combobox(props, ref) {
|
12
|
+
const {
|
13
|
+
className: externalClassName,
|
14
|
+
dialog,
|
15
|
+
style,
|
16
|
+
...otherProps
|
17
|
+
} = props;
|
18
|
+
const {
|
19
|
+
combobox,
|
20
|
+
button,
|
21
|
+
input,
|
22
|
+
popover,
|
23
|
+
list
|
24
|
+
} = useCombobox(otherProps, ref);
|
25
|
+
const internalRef = useRef(null);
|
26
|
+
const {
|
27
|
+
texts
|
28
|
+
} = useLocalization();
|
29
|
+
const selectDimensions = useBoundingClientRectListener(internalRef);
|
30
|
+
const className = cn('inline-flex relative', {
|
33
31
|
'yt-combobox--inline': props.inline
|
34
32
|
}, externalClassName);
|
35
33
|
return createElement("span", {
|
@@ -48,7 +46,7 @@ var Combobox = /*#__PURE__*/forwardRef(function Combobox(props, ref) {
|
|
48
46
|
appearance: "discrete",
|
49
47
|
className: "!border-l-0 focus:!border-none focus:!shadow-none active:!border-none",
|
50
48
|
icon: popover.open ? 'chevron-up' : 'chevron-down',
|
51
|
-
onClick:
|
49
|
+
onClick: () => {
|
52
50
|
var _input$ref$current;
|
53
51
|
|
54
52
|
popover.onOpenChange(true);
|
@@ -59,7 +57,7 @@ var Combobox = /*#__PURE__*/forwardRef(function Combobox(props, ref) {
|
|
59
57
|
icon: "list-search",
|
60
58
|
disabled: props.readOnly || props.disabled,
|
61
59
|
dialog: dialog,
|
62
|
-
onFocus:
|
60
|
+
onFocus: event => {
|
63
61
|
var _input$ref$current2;
|
64
62
|
|
65
63
|
// Prevents the default focus behaviour of showing the tooltip, on parent tooltip element
|
@@ -72,7 +70,7 @@ var Combobox = /*#__PURE__*/forwardRef(function Combobox(props, ref) {
|
|
72
70
|
}) : undefined
|
73
71
|
})))), createElement(Content, {
|
74
72
|
align: "start",
|
75
|
-
onOpenAutoFocus:
|
73
|
+
onOpenAutoFocus: event => {
|
76
74
|
event.preventDefault();
|
77
75
|
},
|
78
76
|
sideOffset: 4
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Combobox.js","sources":["../../../../src/components/Combobox/Combobox.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport cn from 'classnames';\r\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\r\nimport { Input, InputProps } from '../Input/Input';\r\nimport { useCombobox } from './useCombobox';\r\nimport { ScrollableList, ScrollableListItem, ScrollableListItemValue } from '../Listbox/ScrollableList';\r\nimport { useBoundingClientRectListener } from '../../utils/hooks/useBoundingClientRectListener';\r\nimport { IconButton } from '../IconButton/IconButton';\r\nimport './Combobox.css';\r\nimport { DialogProps } from '../Dialog/Dialog';\r\nimport { useLocalization } from '../Provider/Provider';\r\n\r\nexport type ComboboxTexts = {\r\n /* Tooltip shown for the dialog button */\r\n tooltip: string;\r\n};\r\n\r\nexport type ComboboxItem = ScrollableListItem;\r\nexport type ComboboxValue = ScrollableListItemValue;\r\n\r\ntype ComboboxBaseProps = Omit<InputProps, 'defaultValue' | 'button' | 'onChange' | 'value'> & {\r\n /** Array of options in combobox */\r\n data?: ComboboxItem[];\r\n /**\r\n * Initial value of the input in combobox.\r\n * This is used when combobox is mounted, if no value is provided.\r\n * *Note* that combobox is a controlled component, setting this will also trigger the `onChange` event\r\n */\r\n defaultValue?: ComboboxValue;\r\n /** Set what value should have an empty option in combobox */\r\n emptyValue?: ComboboxValue;\r\n /** Draws attention to the combobox by changing its style and making it visually prominent */\r\n highlighted?: boolean;\r\n /** Displays loading state in listbox */\r\n loading?: boolean;\r\n /**\r\n * Handler called when user chooses an option from the provided suggestions.\r\n * Suggestions will be calculated based on the input value.\r\n * There are two ways to choose an option: either click on it, or navigate using keyboard and press `enter`\r\n */\r\n onChange?: React.ChangeEventHandler<HTMLInputElement>;\r\n /** Handler called when the user enters a query **/\r\n onSearch?: (query: string) => void | Promise<void>;\r\n /** Value of the input in combobox */\r\n value?: ComboboxValue;\r\n};\r\n\r\ninterface InlineComboboxProps extends ComboboxBaseProps {\r\n dialog?: never;\r\n /**\r\n * Combobox will display its data when input is clicked/focused, even if the input is empty.\r\n * *Note* that default combobox will display matching data only when user starts typing in input.\r\n */\r\n inline: boolean; // Example 3 on https://www.w3.org/TR/wai-aria-practices/examples/combobox/aria1.1pattern/listbox-combo.html\r\n}\r\n\r\ninterface DialogComboboxProps extends ComboboxBaseProps {\r\n dialog: (props: Partial<DialogProps>) => JSX.Element;\r\n inline?: never;\r\n}\r\n\r\nexport type ComboboxProps = InlineComboboxProps | DialogComboboxProps;\r\n\r\nexport const Combobox = React.forwardRef(function Combobox(props: ComboboxProps, ref: React.Ref<HTMLInputElement>) {\r\n const { className: externalClassName, dialog, style, ...otherProps } = props;\r\n const { combobox, button, input, popover, list } = useCombobox(otherProps, ref);\r\n const internalRef = React.useRef<HTMLDivElement>(null);\r\n const { texts } = useLocalization();\r\n const selectDimensions = useBoundingClientRectListener(internalRef);\r\n const className = cn(\r\n 'inline-flex relative',\r\n {\r\n 'yt-combobox--inline': props.inline,\r\n },\r\n externalClassName\r\n );\r\n\r\n return (\r\n <span className={className} data-taco=\"combobox\" style={style}>\r\n <PopoverPrimitive.Root {...popover}>\r\n <PopoverPrimitive.Anchor asChild ref={internalRef}>\r\n <div {...combobox} className=\"inline w-full\" ref={ref}>\r\n <Input\r\n {...input}\r\n autoComplete=\"off\"\r\n button={\r\n props.inline ? (\r\n <IconButton\r\n appearance=\"discrete\"\r\n className=\"!border-l-0 focus:!border-none focus:!shadow-none active:!border-none\"\r\n icon={popover.open ? 'chevron-up' : 'chevron-down'}\r\n onClick={() => {\r\n popover.onOpenChange(true);\r\n input.ref.current?.focus();\r\n }}\r\n tabIndex={-1}\r\n />\r\n ) : dialog ? (\r\n <IconButton\r\n icon=\"list-search\"\r\n disabled={props.readOnly || props.disabled}\r\n dialog={dialog}\r\n onFocus={(event: React.FocusEvent<HTMLButtonElement>) => {\r\n // Prevents the default focus behaviour of showing the tooltip, on parent tooltip element\r\n event.preventDefault();\r\n input.ref.current?.focus();\r\n }}\r\n ref={button.ref}\r\n tabIndex={-1}\r\n tooltip={texts.combobox.tooltip}\r\n />\r\n ) : undefined\r\n }\r\n />\r\n </div>\r\n </PopoverPrimitive.Anchor>\r\n <PopoverPrimitive.Content\r\n align=\"start\"\r\n onOpenAutoFocus={event => {\r\n event.preventDefault();\r\n }}\r\n sideOffset={4}\r\n >\r\n <ScrollableList\r\n {...list}\r\n className={cn('!border-blue max-h-[calc(12rem+2px)] w-auto max-w-[theme(spacing.96)]')}\r\n style={{ minWidth: selectDimensions?.width }}\r\n tabIndex={popover.open ? 0 : -1}\r\n />\r\n </PopoverPrimitive.Content>\r\n </PopoverPrimitive.Root>\r\n </span>\r\n );\r\n});\r\n"],"names":["Combobox","React","props","ref","
|
1
|
+
{"version":3,"file":"Combobox.js","sources":["../../../../src/components/Combobox/Combobox.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport cn from 'classnames';\r\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\r\nimport { Input, InputProps } from '../Input/Input';\r\nimport { useCombobox } from './useCombobox';\r\nimport { ScrollableList, ScrollableListItem, ScrollableListItemValue } from '../Listbox/ScrollableList';\r\nimport { useBoundingClientRectListener } from '../../utils/hooks/useBoundingClientRectListener';\r\nimport { IconButton } from '../IconButton/IconButton';\r\nimport './Combobox.css';\r\nimport { DialogProps } from '../Dialog/Dialog';\r\nimport { useLocalization } from '../Provider/Provider';\r\n\r\nexport type ComboboxTexts = {\r\n /* Tooltip shown for the dialog button */\r\n tooltip: string;\r\n};\r\n\r\nexport type ComboboxItem = ScrollableListItem;\r\nexport type ComboboxValue = ScrollableListItemValue;\r\n\r\ntype ComboboxBaseProps = Omit<InputProps, 'defaultValue' | 'button' | 'onChange' | 'value'> & {\r\n /** Array of options in combobox */\r\n data?: ComboboxItem[];\r\n /**\r\n * Initial value of the input in combobox.\r\n * This is used when combobox is mounted, if no value is provided.\r\n * *Note* that combobox is a controlled component, setting this will also trigger the `onChange` event\r\n */\r\n defaultValue?: ComboboxValue;\r\n /** Set what value should have an empty option in combobox */\r\n emptyValue?: ComboboxValue;\r\n /** Draws attention to the combobox by changing its style and making it visually prominent */\r\n highlighted?: boolean;\r\n /** Displays loading state in listbox */\r\n loading?: boolean;\r\n /**\r\n * Handler called when user chooses an option from the provided suggestions.\r\n * Suggestions will be calculated based on the input value.\r\n * There are two ways to choose an option: either click on it, or navigate using keyboard and press `enter`\r\n */\r\n onChange?: React.ChangeEventHandler<HTMLInputElement>;\r\n /** Handler called when the user enters a query **/\r\n onSearch?: (query: string) => void | Promise<void>;\r\n /** Value of the input in combobox */\r\n value?: ComboboxValue;\r\n};\r\n\r\ninterface InlineComboboxProps extends ComboboxBaseProps {\r\n dialog?: never;\r\n /**\r\n * Combobox will display its data when input is clicked/focused, even if the input is empty.\r\n * *Note* that default combobox will display matching data only when user starts typing in input.\r\n */\r\n inline: boolean; // Example 3 on https://www.w3.org/TR/wai-aria-practices/examples/combobox/aria1.1pattern/listbox-combo.html\r\n}\r\n\r\ninterface DialogComboboxProps extends ComboboxBaseProps {\r\n dialog: (props: Partial<DialogProps>) => JSX.Element;\r\n inline?: never;\r\n}\r\n\r\nexport type ComboboxProps = InlineComboboxProps | DialogComboboxProps;\r\n\r\nexport const Combobox = React.forwardRef(function Combobox(props: ComboboxProps, ref: React.Ref<HTMLInputElement>) {\r\n const { className: externalClassName, dialog, style, ...otherProps } = props;\r\n const { combobox, button, input, popover, list } = useCombobox(otherProps, ref);\r\n const internalRef = React.useRef<HTMLDivElement>(null);\r\n const { texts } = useLocalization();\r\n const selectDimensions = useBoundingClientRectListener(internalRef);\r\n const className = cn(\r\n 'inline-flex relative',\r\n {\r\n 'yt-combobox--inline': props.inline,\r\n },\r\n externalClassName\r\n );\r\n\r\n return (\r\n <span className={className} data-taco=\"combobox\" style={style}>\r\n <PopoverPrimitive.Root {...popover}>\r\n <PopoverPrimitive.Anchor asChild ref={internalRef}>\r\n <div {...combobox} className=\"inline w-full\" ref={ref}>\r\n <Input\r\n {...input}\r\n autoComplete=\"off\"\r\n button={\r\n props.inline ? (\r\n <IconButton\r\n appearance=\"discrete\"\r\n className=\"!border-l-0 focus:!border-none focus:!shadow-none active:!border-none\"\r\n icon={popover.open ? 'chevron-up' : 'chevron-down'}\r\n onClick={() => {\r\n popover.onOpenChange(true);\r\n input.ref.current?.focus();\r\n }}\r\n tabIndex={-1}\r\n />\r\n ) : dialog ? (\r\n <IconButton\r\n icon=\"list-search\"\r\n disabled={props.readOnly || props.disabled}\r\n dialog={dialog}\r\n onFocus={(event: React.FocusEvent<HTMLButtonElement>) => {\r\n // Prevents the default focus behaviour of showing the tooltip, on parent tooltip element\r\n event.preventDefault();\r\n input.ref.current?.focus();\r\n }}\r\n ref={button.ref}\r\n tabIndex={-1}\r\n tooltip={texts.combobox.tooltip}\r\n />\r\n ) : undefined\r\n }\r\n />\r\n </div>\r\n </PopoverPrimitive.Anchor>\r\n <PopoverPrimitive.Content\r\n align=\"start\"\r\n onOpenAutoFocus={event => {\r\n event.preventDefault();\r\n }}\r\n sideOffset={4}\r\n >\r\n <ScrollableList\r\n {...list}\r\n className={cn('!border-blue max-h-[calc(12rem+2px)] w-auto max-w-[theme(spacing.96)]')}\r\n style={{ minWidth: selectDimensions?.width }}\r\n tabIndex={popover.open ? 0 : -1}\r\n />\r\n </PopoverPrimitive.Content>\r\n </PopoverPrimitive.Root>\r\n </span>\r\n );\r\n});\r\n"],"names":["Combobox","React","props","ref","className","externalClassName","dialog","style","otherProps","combobox","button","input","popover","list","useCombobox","internalRef","texts","useLocalization","selectDimensions","useBoundingClientRectListener","cn","inline","PopoverPrimitive","asChild","Input","autoComplete","IconButton","appearance","icon","open","onClick","onOpenChange","current","focus","tabIndex","disabled","readOnly","onFocus","event","preventDefault","tooltip","undefined","align","onOpenAutoFocus","sideOffset","ScrollableList","minWidth","width"],"mappings":";;;;;;;;;;MA+DaA,QAAQ,gBAAGC,UAAA,CAAiB,SAASD,QAAT,CAAkBE,KAAlB,EAAwCC,GAAxC;EACrC,MAAM;IAAEC,SAAS,EAAEC,iBAAb;IAAgCC,MAAhC;IAAwCC,KAAxC;IAA+C,GAAGC;MAAeN,KAAvE;EACA,MAAM;IAAEO,QAAF;IAAYC,MAAZ;IAAoBC,KAApB;IAA2BC,OAA3B;IAAoCC;MAASC,WAAW,CAACN,UAAD,EAAaL,GAAb,CAA9D;EACA,MAAMY,WAAW,GAAGd,MAAA,CAA6B,IAA7B,CAApB;EACA,MAAM;IAAEe;MAAUC,eAAe,EAAjC;EACA,MAAMC,gBAAgB,GAAGC,6BAA6B,CAACJ,WAAD,CAAtD;EACA,MAAMX,SAAS,GAAGgB,EAAE,CAChB,sBADgB,EAEhB;IACI,uBAAuBlB,KAAK,CAACmB;GAHjB,EAKhBhB,iBALgB,CAApB;EAQA,OACIJ,aAAA,OAAA;IAAMG,SAAS,EAAEA;iBAAqB;IAAWG,KAAK,EAAEA;GAAxD,EACIN,aAAA,CAACqB,IAAD,oBAA2BV,QAA3B,EACIX,aAAA,CAACqB,MAAD;IAAyBC,OAAO;IAACpB,GAAG,EAAEY;GAAtC,EACId,aAAA,MAAA,oBAASQ;IAAUL,SAAS,EAAC;IAAgBD,GAAG,EAAEA;IAAlD,EACIF,aAAA,CAACuB,KAAD,oBACQb;IACJc,YAAY,EAAC;IACbf,MAAM,EACFR,KAAK,CAACmB,MAAN,GACIpB,aAAA,CAACyB,UAAD;MACIC,UAAU,EAAC;MACXvB,SAAS,EAAC;MACVwB,IAAI,EAAEhB,OAAO,CAACiB,IAAR,GAAe,YAAf,GAA8B;MACpCC,OAAO,EAAE;;;QACLlB,OAAO,CAACmB,YAAR,CAAqB,IAArB;QACA,sBAAApB,KAAK,CAACR,GAAN,CAAU6B,OAAV,0EAAmBC,KAAnB;;MAEJC,QAAQ,EAAE,CAAC;KARf,CADJ,GAWI5B,MAAM,GACNL,aAAA,CAACyB,UAAD;MACIE,IAAI,EAAC;MACLO,QAAQ,EAAEjC,KAAK,CAACkC,QAAN,IAAkBlC,KAAK,CAACiC;MAClC7B,MAAM,EAAEA;MACR+B,OAAO,EAAGC,KAAD;;;;QAELA,KAAK,CAACC,cAAN;QACA,uBAAA5B,KAAK,CAACR,GAAN,CAAU6B,OAAV,4EAAmBC,KAAnB;;MAEJ9B,GAAG,EAAEO,MAAM,CAACP;MACZ+B,QAAQ,EAAE,CAAC;MACXM,OAAO,EAAExB,KAAK,CAACP,QAAN,CAAe+B;KAX5B,CADM,GAcNC;IA7BZ,CADJ,CADJ,CADJ,EAqCIxC,aAAA,CAACqB,OAAD;IACIoB,KAAK,EAAC;IACNC,eAAe,EAAEL,KAAK;MAClBA,KAAK,CAACC,cAAN;;IAEJK,UAAU,EAAE;GALhB,EAOI3C,aAAA,CAAC4C,cAAD,oBACQhC;IACJT,SAAS,EAAEgB,EAAE,CAAC,uEAAD;IACbb,KAAK,EAAE;MAAEuC,QAAQ,EAAE5B,gBAAF,aAAEA,gBAAF,uBAAEA,gBAAgB,CAAE6B;;IACrCb,QAAQ,EAAEtB,OAAO,CAACiB,IAAR,GAAe,CAAf,GAAmB,CAAC;IAJlC,CAPJ,CArCJ,CADJ,CADJ;AAwDH,CAtEuB;;;;"}
|