@economic/taco 1.1.10-alpha.0 → 1.1.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Icon/components/Numbers.d.ts +3 -0
- package/dist/components/Icon/components/index.d.ts +1 -1
- package/dist/components/Input/Input.d.ts +1 -1
- package/dist/components/Menu/Menu.d.ts +2 -2
- package/dist/components/Menu/components/Item.d.ts +1 -1
- package/dist/components/Menu/components/Link.d.ts +1 -1
- package/dist/esm/_virtual/_rollupPluginBabelHelpers.js +1 -18
- package/dist/esm/_virtual/_rollupPluginBabelHelpers.js.map +1 -1
- package/dist/esm/components/Button/Button.js +12 -13
- package/dist/esm/components/Button/Button.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 +13 -14
- 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/Icon/components/Numbers.js +18 -0
- package/dist/esm/components/Icon/components/Numbers.js.map +1 -0
- package/dist/esm/components/Icon/components/index.js +2 -0
- package/dist/esm/components/Icon/components/index.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 +10 -13
- 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/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 +45 -51
- 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 +0 -2
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/utils/hooks/useDropTarget.js +7 -10
- package/dist/esm/utils/hooks/useDropTarget.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 +0 -2
- package/dist/taco.cjs.development.js +796 -958
- 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/dist/utils/tailwind.d.ts +1 -1
- package/package.json +131 -130
- package/tailwind.config.js +0 -9
- package/types.json +3 -2
@@ -38,23 +38,6 @@ var PrimitiveSwitch = require('@radix-ui/react-switch');
|
|
38
38
|
var Joyride = require('react-joyride');
|
39
39
|
var Joyride__default = _interopDefault(Joyride);
|
40
40
|
|
41
|
-
function _extends() {
|
42
|
-
_extends = Object.assign ? Object.assign.bind() : function (target) {
|
43
|
-
for (var i = 1; i < arguments.length; i++) {
|
44
|
-
var source = arguments[i];
|
45
|
-
|
46
|
-
for (var key in source) {
|
47
|
-
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
48
|
-
target[key] = source[key];
|
49
|
-
}
|
50
|
-
}
|
51
|
-
}
|
52
|
-
|
53
|
-
return target;
|
54
|
-
};
|
55
|
-
return _extends.apply(this, arguments);
|
56
|
-
}
|
57
|
-
|
58
41
|
function _objectWithoutPropertiesLoose(source, excluded) {
|
59
42
|
if (source == null) return {};
|
60
43
|
var target = {};
|
@@ -2076,6 +2059,20 @@ function IconNote(props, svgRef) {
|
|
2076
2059
|
|
2077
2060
|
var Note = /*#__PURE__*/React.forwardRef(IconNote);
|
2078
2061
|
|
2062
|
+
function IconNumbers(props, svgRef) {
|
2063
|
+
return React.createElement("svg", Object.assign({
|
2064
|
+
fill: "none",
|
2065
|
+
xmlns: "http://www.w3.org/2000/svg",
|
2066
|
+
viewBox: "0 0 24 24",
|
2067
|
+
ref: svgRef
|
2068
|
+
}, props), React.createElement("path", {
|
2069
|
+
d: "M3.203 16.625c0 .602.328.96.875.96.555 0 .875-.35.875-.96V7.898c0-.671-.437-1.132-1.078-1.132-.375 0-.742.14-1.273.515L1.125 8.344c-.367.25-.54.508-.54.789 0 .367.282.656.65.656.195 0 .382-.07.663-.266l1.258-.898h.047v8zm4.149.031c0 .516.414.844 1.046.844h5.22c.53 0 .843-.281.843-.734 0-.461-.328-.743-.844-.743H9.648v-.101l2.665-2.953c1.367-1.492 1.812-2.313 1.812-3.36 0-1.742-1.43-2.984-3.422-2.984-2.086 0-3.492 1.375-3.492 2.742 0 .485.312.813.766.813.367 0 .617-.211.804-.657.266-.906.93-1.43 1.82-1.43 1.063 0 1.774.665 1.774 1.657 0 .688-.344 1.313-1.21 2.266l-3.071 3.406c-.563.601-.742.89-.742 1.234zm8.562-1.375c0 1.242 1.555 2.446 3.617 2.446 2.274 0 3.867-1.297 3.867-3.141 0-1.352-.992-2.484-2.296-2.617v-.11c1.078-.171 1.953-1.257 1.953-2.421 0-1.649-1.461-2.813-3.524-2.813-1.984 0-3.414 1.156-3.414 2.39 0 .454.305.766.742.766.344 0 .578-.164.782-.578.367-.742 1.007-1.156 1.851-1.156 1.086 0 1.828.648 1.828 1.61 0 .952-.758 1.64-1.804 1.64h-.813c-.43 0-.726.305-.726.71 0 .423.304.735.726.735h.86c1.25 0 2.085.719 2.085 1.79 0 1.077-.82 1.765-2.093 1.765-.961 0-1.711-.422-2.14-1.188-.25-.414-.47-.57-.782-.57-.422 0-.719.313-.719.742z",
|
2070
|
+
fill: "currentColor"
|
2071
|
+
}));
|
2072
|
+
}
|
2073
|
+
|
2074
|
+
var Numbers = /*#__PURE__*/React.forwardRef(IconNumbers);
|
2075
|
+
|
2079
2076
|
function IconPartnerApi(props, svgRef) {
|
2080
2077
|
return React.createElement("svg", Object.assign({
|
2081
2078
|
xmlns: "http://www.w3.org/2000/svg",
|
@@ -3122,6 +3119,7 @@ const icons = {
|
|
3122
3119
|
'note-follow-up': NoteFollowUp,
|
3123
3120
|
'note-read': NoteRead,
|
3124
3121
|
note: Note,
|
3122
|
+
numbers: Numbers,
|
3125
3123
|
'partner-api': PartnerApi,
|
3126
3124
|
period: Period,
|
3127
3125
|
'person-change': PersonChange,
|
@@ -3188,17 +3186,17 @@ const icons = {
|
|
3188
3186
|
zoom: Zoom
|
3189
3187
|
};
|
3190
3188
|
|
3191
|
-
|
3192
|
-
var Icon = /*#__PURE__*/React__default.forwardRef(function Icon(props, ref) {
|
3189
|
+
const Icon = /*#__PURE__*/React__default.forwardRef(function Icon(props, ref) {
|
3193
3190
|
var _props$className;
|
3194
3191
|
|
3195
|
-
|
3196
|
-
|
3197
|
-
|
3198
|
-
|
3192
|
+
const {
|
3193
|
+
name,
|
3194
|
+
...otherProps
|
3195
|
+
} = props;
|
3196
|
+
const Component = icons[name];
|
3199
3197
|
/* 24x24 _at the base body font_ - must be em so that they scale with font size - tailwind spacing uses rem */
|
3200
3198
|
|
3201
|
-
|
3199
|
+
const className = cn('inline-flex h-[1.715em] w-[1.715em] flex-shrink-0', props.className, {
|
3202
3200
|
'p-[3px]': (_props$className = props.className) === null || _props$className === void 0 ? void 0 : _props$className.includes('rounded-full')
|
3203
3201
|
});
|
3204
3202
|
return Component ? React__default.createElement(Component, Object.assign({}, otherProps, {
|
@@ -3210,7 +3208,7 @@ var Icon = /*#__PURE__*/React__default.forwardRef(function Icon(props, ref) {
|
|
3210
3208
|
})) : null;
|
3211
3209
|
});
|
3212
3210
|
|
3213
|
-
var _excluded
|
3211
|
+
var _excluded = ["id"],
|
3214
3212
|
_excluded2 = ["id", "defaultId", "onChange", "as"];
|
3215
3213
|
var AccordionContext = /*#__PURE__*/React__default.createContext({
|
3216
3214
|
as: 'h2'
|
@@ -3248,7 +3246,7 @@ var Content = /*#__PURE__*/React__default.forwardRef(function AccordionContent(p
|
|
3248
3246
|
|
3249
3247
|
var Item = function Item(props) {
|
3250
3248
|
var id = props.id,
|
3251
|
-
otherProps = _objectWithoutPropertiesLoose(props, _excluded
|
3249
|
+
otherProps = _objectWithoutPropertiesLoose(props, _excluded);
|
3252
3250
|
|
3253
3251
|
return React__default.createElement(AccordionPrimitive.Item, Object.assign({}, otherProps, {
|
3254
3252
|
value: id
|
@@ -3303,7 +3301,7 @@ var Backdrop = /*#__PURE__*/React.forwardRef(function Backdrop(props, ref) {
|
|
3303
3301
|
}));
|
3304
3302
|
});
|
3305
3303
|
|
3306
|
-
|
3304
|
+
const VisuallyHidden = /*#__PURE__*/React.forwardRef(function VisuallyHidden(props, ref) {
|
3307
3305
|
return React.createElement("span", Object.assign({}, props, {
|
3308
3306
|
className: "sr-only",
|
3309
3307
|
ref: ref
|
@@ -3349,19 +3347,20 @@ const getOutlineClasses = state => {
|
|
3349
3347
|
}
|
3350
3348
|
};
|
3351
3349
|
|
3352
|
-
|
3353
|
-
|
3354
|
-
|
3355
|
-
|
3356
|
-
|
3357
|
-
|
3358
|
-
|
3359
|
-
|
3360
|
-
|
3361
|
-
|
3362
|
-
|
3363
|
-
|
3364
|
-
|
3350
|
+
const Badge = /*#__PURE__*/React.forwardRef(function Badge(props, ref) {
|
3351
|
+
const {
|
3352
|
+
children,
|
3353
|
+
compact = false,
|
3354
|
+
outline = false,
|
3355
|
+
state,
|
3356
|
+
...otherProps
|
3357
|
+
} = props;
|
3358
|
+
const className = cn('rounded-full border font-bold text-xs uppercase overflow-hidden whitespace-nowrap inline-flex items-center justify-center h-5', {
|
3359
|
+
[getOutlineClasses(state)]: outline,
|
3360
|
+
[`border-transparent ${getStateClasses(state)}`]: !outline,
|
3361
|
+
'h-2 w-2 min-w-0': compact,
|
3362
|
+
'h-5 py-0 px-1.5': !compact
|
3363
|
+
}, props.className);
|
3365
3364
|
return React.createElement("span", Object.assign({}, otherProps, {
|
3366
3365
|
"aria-atomic": "true",
|
3367
3366
|
"aria-live": "polite",
|
@@ -3421,13 +3420,13 @@ const Button = /*#__PURE__*/React.forwardRef(function Button(props, ref) {
|
|
3421
3420
|
}), React.Children.count(props.children) > 1 ? React.Children.map(props.children, child => typeof child === 'string' ? React.createElement("span", null, child) : child) : props.children);
|
3422
3421
|
});
|
3423
3422
|
|
3424
|
-
|
3425
|
-
|
3426
|
-
|
3427
|
-
|
3428
|
-
|
3429
|
-
|
3430
|
-
|
3423
|
+
const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(props, ref) {
|
3424
|
+
const {
|
3425
|
+
title,
|
3426
|
+
children,
|
3427
|
+
placement,
|
3428
|
+
...otherProps
|
3429
|
+
} = props;
|
3431
3430
|
return React.createElement(TooltipPrimitive.Root, {
|
3432
3431
|
delayDuration: 50
|
3433
3432
|
}, React.createElement(TooltipPrimitive.Trigger, {
|
@@ -3519,14 +3518,13 @@ const createButton = (props, className, ref) => {
|
|
3519
3518
|
return button;
|
3520
3519
|
};
|
3521
3520
|
|
3522
|
-
|
3523
|
-
|
3524
|
-
|
3525
|
-
|
3526
|
-
|
3527
|
-
|
3528
|
-
|
3529
|
-
var className = cn('w-8', getButtonClasses(), getAppearanceClasses(otherProps.appearance, true), {
|
3521
|
+
const IconButton = /*#__PURE__*/React.forwardRef(function IconButton(props, ref) {
|
3522
|
+
const {
|
3523
|
+
icon,
|
3524
|
+
rounded = false,
|
3525
|
+
...otherProps
|
3526
|
+
} = props;
|
3527
|
+
const className = cn('w-8', getButtonClasses(), getAppearanceClasses(otherProps.appearance, true), {
|
3530
3528
|
'rounded-full': rounded,
|
3531
3529
|
rounded: !rounded,
|
3532
3530
|
'cursor-not-allowed opacity-50': props.disabled,
|
@@ -3537,13 +3535,13 @@ var IconButton = /*#__PURE__*/React.forwardRef(function IconButton(props, ref) {
|
|
3537
3535
|
return null;
|
3538
3536
|
}
|
3539
3537
|
|
3540
|
-
return createButton(
|
3538
|
+
return createButton({ ...otherProps,
|
3541
3539
|
children: React.createElement(Icon, {
|
3542
3540
|
name: icon,
|
3543
3541
|
className: "m-0 p-0"
|
3544
3542
|
}),
|
3545
3543
|
'data-taco': 'icon-button'
|
3546
|
-
}
|
3544
|
+
}, className, ref);
|
3547
3545
|
});
|
3548
3546
|
|
3549
3547
|
var Banner = /*#__PURE__*/React.forwardRef(function Banner(props, ref) {
|
@@ -3563,32 +3561,32 @@ var Banner = /*#__PURE__*/React.forwardRef(function Banner(props, ref) {
|
|
3563
3561
|
}) : null);
|
3564
3562
|
});
|
3565
3563
|
|
3566
|
-
|
3567
|
-
|
3568
|
-
|
3569
|
-
|
3570
|
-
|
3571
|
-
|
3564
|
+
const Button$1 = /*#__PURE__*/React.forwardRef(function Button(props, ref) {
|
3565
|
+
const {
|
3566
|
+
fluid,
|
3567
|
+
...otherProps
|
3568
|
+
} = props;
|
3569
|
+
const className = cn(getButtonClasses(), getAppearanceClasses(otherProps.appearance), 'rounded px-3', {
|
3572
3570
|
'cursor-not-allowed opacity-50': props.disabled,
|
3573
3571
|
'focus:yt-focus active:focus:yt-focus': !props.disabled,
|
3574
3572
|
'w-full': fluid
|
3575
3573
|
}, props.className);
|
3576
|
-
|
3574
|
+
let children = otherProps.children; // add a chevron icon to menu buttons
|
3577
3575
|
|
3578
3576
|
if (typeof otherProps.menu === 'function') {
|
3579
|
-
children = Array.isArray(children) ? [
|
3577
|
+
children = Array.isArray(children) ? [...children, React.createElement(Icon, {
|
3580
3578
|
key: "chevron-down",
|
3581
3579
|
name: "chevron-down"
|
3582
|
-
})]
|
3580
|
+
})] : [children, React.createElement(Icon, {
|
3583
3581
|
key: "chevron-down",
|
3584
3582
|
name: "chevron-down"
|
3585
3583
|
})];
|
3586
3584
|
}
|
3587
3585
|
|
3588
|
-
return createButton(
|
3589
|
-
children
|
3586
|
+
return createButton({ ...otherProps,
|
3587
|
+
children,
|
3590
3588
|
'data-taco': 'button'
|
3591
|
-
}
|
3589
|
+
}, className, ref);
|
3592
3590
|
});
|
3593
3591
|
|
3594
3592
|
function useTimer(duration = 0, callback) {
|
@@ -3637,27 +3635,21 @@ function useTimer(duration = 0, callback) {
|
|
3637
3635
|
};
|
3638
3636
|
}
|
3639
3637
|
|
3640
|
-
|
3641
|
-
|
3642
|
-
|
3643
|
-
|
3644
|
-
|
3645
|
-
|
3646
|
-
|
3647
|
-
|
3648
|
-
|
3649
|
-
setVisibility = _React$useState[1];
|
3650
|
-
|
3651
|
-
React__default.useEffect(function () {
|
3652
|
-
var timeout;
|
3638
|
+
const Spinner$1 = /*#__PURE__*/React__default.forwardRef(function Spinner(props, ref) {
|
3639
|
+
const {
|
3640
|
+
delay = 500,
|
3641
|
+
label,
|
3642
|
+
...otherProps
|
3643
|
+
} = props;
|
3644
|
+
const [visible, setVisibility] = React__default.useState(!delay);
|
3645
|
+
React__default.useEffect(() => {
|
3646
|
+
let timeout;
|
3653
3647
|
|
3654
3648
|
if (delay) {
|
3655
|
-
timeout = window.setTimeout(
|
3656
|
-
return setVisibility(true);
|
3657
|
-
}, delay);
|
3649
|
+
timeout = window.setTimeout(() => setVisibility(true), delay);
|
3658
3650
|
}
|
3659
3651
|
|
3660
|
-
return
|
3652
|
+
return () => {
|
3661
3653
|
if (timeout) {
|
3662
3654
|
clearTimeout(timeout);
|
3663
3655
|
}
|
@@ -3668,7 +3660,7 @@ var Spinner$1 = /*#__PURE__*/React__default.forwardRef(function Spinner(props, r
|
|
3668
3660
|
return null;
|
3669
3661
|
}
|
3670
3662
|
|
3671
|
-
|
3663
|
+
const className = cn('inline-flex flex-col relative items-center', otherProps.className);
|
3672
3664
|
return React__default.createElement("div", Object.assign({}, otherProps, {
|
3673
3665
|
className: className,
|
3674
3666
|
"data-taco": "spinner",
|
@@ -3794,62 +3786,49 @@ const Toast = ({
|
|
3794
3786
|
}));
|
3795
3787
|
};
|
3796
3788
|
|
3797
|
-
|
3798
|
-
|
3799
|
-
var ToastContext = /*#__PURE__*/React.createContext({});
|
3789
|
+
const DEFAULT_AUTO_CLOSE_TIMEOUT = 7500;
|
3790
|
+
const ToastContext = /*#__PURE__*/React.createContext({});
|
3800
3791
|
|
3801
|
-
|
3802
|
-
|
3803
|
-
|
3804
|
-
return JSON.stringify(toast.content) === JSON.stringify(content);
|
3805
|
-
});
|
3792
|
+
const insertToastWithoutDuplicates = (currentToasts, id, content, options, close) => {
|
3793
|
+
const nextToasts = [...currentToasts];
|
3794
|
+
const existingToastIndex = currentToasts.findIndex(toast => JSON.stringify(toast.content) === JSON.stringify(content));
|
3806
3795
|
|
3807
3796
|
if (existingToastIndex > -1) {
|
3808
3797
|
nextToasts[existingToastIndex].lastDuplicateId = id;
|
3809
3798
|
nextToasts[existingToastIndex].lastUpdated = Date.now();
|
3810
3799
|
} else {
|
3811
3800
|
nextToasts.push({
|
3812
|
-
id
|
3801
|
+
id,
|
3813
3802
|
content: typeof content === 'function' ? content(close) : content,
|
3814
|
-
options
|
3803
|
+
options
|
3815
3804
|
});
|
3816
3805
|
}
|
3817
3806
|
|
3818
3807
|
return nextToasts;
|
3819
3808
|
};
|
3820
3809
|
|
3821
|
-
|
3822
|
-
|
3823
|
-
|
3824
|
-
|
3825
|
-
|
3826
|
-
toasts = _React$useState[0],
|
3827
|
-
setToasts = _React$useState[1];
|
3810
|
+
const ToastProvider = ({
|
3811
|
+
children,
|
3812
|
+
...props
|
3813
|
+
}) => {
|
3814
|
+
const [toasts, setToasts] = React.useState([]);
|
3828
3815
|
|
3829
|
-
|
3830
|
-
setToasts(
|
3831
|
-
return currentToasts.filter(function (toast) {
|
3832
|
-
return toast.id !== id;
|
3833
|
-
});
|
3834
|
-
});
|
3816
|
+
const handleClose = id => {
|
3817
|
+
setToasts(currentToasts => currentToasts.filter(toast => toast.id !== id));
|
3835
3818
|
}; // memoize (useCallback) this function,
|
3836
3819
|
// it is the value of the context provider and we don't want it to trigger state tree re-renders on provider children
|
3837
3820
|
|
3838
3821
|
|
3839
|
-
|
3840
|
-
|
3822
|
+
const toaster = React.useCallback((content, options) => {
|
3823
|
+
const id = uuid.v4();
|
3841
3824
|
|
3842
|
-
|
3843
|
-
return handleClose(id);
|
3844
|
-
};
|
3825
|
+
const close = () => handleClose(id);
|
3845
3826
|
|
3846
|
-
setToasts(
|
3847
|
-
return insertToastWithoutDuplicates(currentToasts, id, content, options, close);
|
3848
|
-
});
|
3827
|
+
setToasts(currentToasts => insertToastWithoutDuplicates(currentToasts, id, content, options, close));
|
3849
3828
|
|
3850
|
-
|
3851
|
-
setToasts(
|
3852
|
-
|
3829
|
+
const update = (content, options) => {
|
3830
|
+
setToasts(currentToasts => {
|
3831
|
+
const nextToasts = currentToasts.filter(toast => {
|
3853
3832
|
if (toast.lastDuplicateId) {
|
3854
3833
|
return toast.lastDuplicateId !== id;
|
3855
3834
|
}
|
@@ -3860,80 +3839,70 @@ var ToastProvider = function ToastProvider(_ref) {
|
|
3860
3839
|
});
|
3861
3840
|
};
|
3862
3841
|
|
3863
|
-
|
3864
|
-
update(content,
|
3865
|
-
autoClose: DEFAULT_AUTO_CLOSE_TIMEOUT
|
3866
|
-
|
3842
|
+
const success = (content, options) => {
|
3843
|
+
update(content, {
|
3844
|
+
autoClose: DEFAULT_AUTO_CLOSE_TIMEOUT,
|
3845
|
+
...options,
|
3867
3846
|
type: 'success'
|
3868
|
-
})
|
3847
|
+
});
|
3869
3848
|
};
|
3870
3849
|
|
3871
|
-
|
3872
|
-
update(content,
|
3850
|
+
const error = (content, options) => {
|
3851
|
+
update(content, { ...options,
|
3873
3852
|
type: 'error'
|
3874
|
-
})
|
3853
|
+
});
|
3875
3854
|
};
|
3876
3855
|
|
3877
|
-
|
3878
|
-
update(content,
|
3856
|
+
const warning = (content, options) => {
|
3857
|
+
update(content, { ...options,
|
3879
3858
|
type: 'warning'
|
3880
|
-
})
|
3859
|
+
});
|
3881
3860
|
};
|
3882
3861
|
|
3883
|
-
|
3884
|
-
update(content,
|
3862
|
+
const information = (content, options) => {
|
3863
|
+
update(content, { ...options,
|
3885
3864
|
type: 'information'
|
3886
|
-
})
|
3865
|
+
});
|
3887
3866
|
};
|
3888
3867
|
|
3889
|
-
|
3890
|
-
update(content,
|
3868
|
+
const loading = (content, options) => {
|
3869
|
+
update(content, { ...options,
|
3891
3870
|
type: 'loading'
|
3892
|
-
})
|
3871
|
+
});
|
3893
3872
|
};
|
3894
3873
|
|
3895
3874
|
return {
|
3896
|
-
success
|
3897
|
-
error
|
3898
|
-
warning
|
3899
|
-
information
|
3900
|
-
loading
|
3901
|
-
close
|
3875
|
+
success,
|
3876
|
+
error,
|
3877
|
+
warning,
|
3878
|
+
information,
|
3879
|
+
loading,
|
3880
|
+
close
|
3902
3881
|
};
|
3903
3882
|
}, []); // no need to rebind these every render, do them once in an effect
|
3904
3883
|
|
3905
|
-
React.useEffect(
|
3906
|
-
toaster.success =
|
3907
|
-
|
3908
|
-
|
3909
|
-
|
3910
|
-
|
3911
|
-
}));
|
3912
|
-
};
|
3884
|
+
React.useEffect(() => {
|
3885
|
+
toaster.success = (content, options) => toaster(content, {
|
3886
|
+
autoClose: DEFAULT_AUTO_CLOSE_TIMEOUT,
|
3887
|
+
...options,
|
3888
|
+
type: 'success'
|
3889
|
+
});
|
3913
3890
|
|
3914
|
-
toaster.error =
|
3915
|
-
|
3916
|
-
|
3917
|
-
}));
|
3918
|
-
};
|
3891
|
+
toaster.error = (content, options) => toaster(content, { ...options,
|
3892
|
+
type: 'error'
|
3893
|
+
});
|
3919
3894
|
|
3920
|
-
toaster.warning =
|
3921
|
-
|
3922
|
-
|
3923
|
-
}));
|
3924
|
-
};
|
3895
|
+
toaster.warning = (content, options) => toaster(content, { ...options,
|
3896
|
+
type: 'warning'
|
3897
|
+
});
|
3925
3898
|
|
3926
|
-
toaster.information =
|
3927
|
-
|
3928
|
-
|
3929
|
-
}));
|
3930
|
-
};
|
3899
|
+
toaster.information = (content, options) => toaster(content, { ...options,
|
3900
|
+
type: 'information'
|
3901
|
+
});
|
3931
3902
|
|
3932
|
-
toaster.loading =
|
3933
|
-
|
3934
|
-
|
3935
|
-
}));
|
3936
|
-
};
|
3903
|
+
toaster.loading = (content, options) => toaster(content, { ...options,
|
3904
|
+
type: 'loading'
|
3905
|
+
});
|
3937
3906
|
}, []);
|
3938
3907
|
return React.createElement(ToastContext.Provider, Object.assign({}, props, {
|
3939
3908
|
value: toaster
|
@@ -3943,43 +3912,37 @@ var ToastProvider = function ToastProvider(_ref) {
|
|
3943
3912
|
role: "log"
|
3944
3913
|
}, React.createElement(framerMotion.AnimatePresence, {
|
3945
3914
|
initial: false
|
3946
|
-
}, toasts.map(
|
3947
|
-
|
3948
|
-
|
3915
|
+
}, toasts.map(toast => React.createElement(framerMotion.motion.div, {
|
3916
|
+
key: toast.id,
|
3917
|
+
transition: {
|
3918
|
+
type: 'spring',
|
3919
|
+
damping: 20,
|
3920
|
+
stiffness: 300
|
3921
|
+
},
|
3922
|
+
initial: {
|
3923
|
+
opacity: 0,
|
3924
|
+
y: 10,
|
3925
|
+
scale: 0.5
|
3926
|
+
},
|
3927
|
+
animate: {
|
3928
|
+
opacity: 1,
|
3929
|
+
y: 0,
|
3930
|
+
scale: 1
|
3931
|
+
},
|
3932
|
+
exit: {
|
3933
|
+
opacity: 0,
|
3934
|
+
scale: 0.5,
|
3949
3935
|
transition: {
|
3950
|
-
|
3951
|
-
damping: 20,
|
3952
|
-
stiffness: 300
|
3953
|
-
},
|
3954
|
-
initial: {
|
3955
|
-
opacity: 0,
|
3956
|
-
y: 10,
|
3957
|
-
scale: 0.5
|
3958
|
-
},
|
3959
|
-
animate: {
|
3960
|
-
opacity: 1,
|
3961
|
-
y: 0,
|
3962
|
-
scale: 1
|
3963
|
-
},
|
3964
|
-
exit: {
|
3965
|
-
opacity: 0,
|
3966
|
-
scale: 0.5,
|
3967
|
-
transition: {
|
3968
|
-
duration: 0.2
|
3969
|
-
}
|
3936
|
+
duration: 0.2
|
3970
3937
|
}
|
3971
|
-
}
|
3972
|
-
|
3973
|
-
|
3974
|
-
|
3975
|
-
})));
|
3976
|
-
}))));
|
3977
|
-
};
|
3978
|
-
var useToast = function useToast() {
|
3979
|
-
return React.useContext(ToastContext);
|
3938
|
+
}
|
3939
|
+
}, React.createElement(Toast, Object.assign({}, toast, {
|
3940
|
+
onClose: () => handleClose(toast.id)
|
3941
|
+
})))))));
|
3980
3942
|
};
|
3943
|
+
const useToast = () => React.useContext(ToastContext);
|
3981
3944
|
|
3982
|
-
|
3945
|
+
const defaultLocalisationTexts = {
|
3983
3946
|
calendar: {
|
3984
3947
|
months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
|
3985
3948
|
weekdaysShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
|
@@ -4054,67 +4017,62 @@ var defaultLocalisationTexts = {
|
|
4054
4017
|
inputLabel: 'Search...'
|
4055
4018
|
}
|
4056
4019
|
};
|
4057
|
-
|
4020
|
+
const defaultLocalizationContext = {
|
4058
4021
|
locale: 'en-GB',
|
4059
4022
|
texts: defaultLocalisationTexts,
|
4060
4023
|
formatting: {
|
4061
4024
|
date: 'dd.mm.yy'
|
4062
4025
|
}
|
4063
4026
|
};
|
4064
|
-
|
4027
|
+
const Context = /*#__PURE__*/React.createContext({
|
4065
4028
|
localization: defaultLocalizationContext
|
4066
4029
|
});
|
4067
|
-
|
4068
|
-
|
4069
|
-
|
4070
|
-
|
4071
|
-
|
4072
|
-
|
4073
|
-
|
4074
|
-
|
4075
|
-
}, [localization]);
|
4030
|
+
const Provider = props => {
|
4031
|
+
const {
|
4032
|
+
children,
|
4033
|
+
localization = defaultLocalizationContext
|
4034
|
+
} = props;
|
4035
|
+
const value = React.useMemo(() => ({
|
4036
|
+
localization
|
4037
|
+
}), [localization]);
|
4076
4038
|
return React.createElement(Context.Provider, {
|
4077
4039
|
value: value
|
4078
4040
|
}, React.createElement(ToastProvider, null, children));
|
4079
4041
|
};
|
4080
|
-
|
4081
|
-
|
4082
|
-
};
|
4083
|
-
var useLocalization = function useLocalization() {
|
4084
|
-
return useTaco().localization;
|
4085
|
-
};
|
4086
|
-
|
4087
|
-
var _excluded$8 = ["onChange", "value"];
|
4042
|
+
const useTaco = () => React.useContext(Context);
|
4043
|
+
const useLocalization = () => useTaco().localization;
|
4088
4044
|
|
4089
|
-
|
4090
|
-
|
4091
|
-
|
4092
|
-
}) : day.getDate();
|
4093
|
-
};
|
4045
|
+
const renderDay = (day, modifiers) => modifiers.disabled ? React.createElement("span", {
|
4046
|
+
className: "dot"
|
4047
|
+
}) : day.getDate();
|
4094
4048
|
|
4095
|
-
|
4096
|
-
|
4049
|
+
const thisYear = /*#__PURE__*/new Date().getFullYear();
|
4050
|
+
const years = [];
|
4097
4051
|
|
4098
|
-
for (
|
4052
|
+
for (let i = thisYear - 10; i <= thisYear + 10; i += 1) {
|
4099
4053
|
years.push(i);
|
4100
4054
|
}
|
4101
4055
|
|
4102
|
-
|
4103
|
-
|
4104
|
-
|
4105
|
-
|
4106
|
-
|
4107
|
-
|
4108
|
-
|
4109
|
-
|
4110
|
-
|
4111
|
-
|
4112
|
-
|
4056
|
+
const Navbar = /*#__PURE__*/React.memo(({
|
4057
|
+
onMonthChange,
|
4058
|
+
onNextClick,
|
4059
|
+
onPreviousClick,
|
4060
|
+
value = new Date()
|
4061
|
+
}) => {
|
4062
|
+
const {
|
4063
|
+
texts: {
|
4064
|
+
calendar: {
|
4065
|
+
actions,
|
4066
|
+
months
|
4067
|
+
}
|
4068
|
+
}
|
4069
|
+
} = useLocalization();
|
4113
4070
|
|
4114
|
-
|
4115
|
-
|
4116
|
-
|
4117
|
-
|
4071
|
+
const handleChange = function handleChange(event) {
|
4072
|
+
const {
|
4073
|
+
year,
|
4074
|
+
month
|
4075
|
+
} = event.target.form;
|
4118
4076
|
onMonthChange(new Date(year.value, month.value));
|
4119
4077
|
};
|
4120
4078
|
|
@@ -4127,59 +4085,49 @@ var Navbar = /*#__PURE__*/React.memo(function (_ref) {
|
|
4127
4085
|
name: "month",
|
4128
4086
|
onChange: handleChange,
|
4129
4087
|
value: value.getMonth()
|
4130
|
-
}, months.map(
|
4131
|
-
|
4132
|
-
|
4133
|
-
|
4134
|
-
}, month);
|
4135
|
-
})), React.createElement("select", {
|
4088
|
+
}, months.map((month, i) => React.createElement("option", {
|
4089
|
+
key: month,
|
4090
|
+
value: i
|
4091
|
+
}, month))), React.createElement("select", {
|
4136
4092
|
className: "h-8 px-2",
|
4137
4093
|
name: "year",
|
4138
4094
|
onChange: handleChange,
|
4139
4095
|
value: value.getFullYear()
|
4140
|
-
}, years.map(
|
4141
|
-
|
4142
|
-
|
4143
|
-
|
4144
|
-
}, String(year));
|
4145
|
-
}))), React.createElement("div", null, React.createElement(IconButton, {
|
4096
|
+
}, years.map(year => React.createElement("option", {
|
4097
|
+
key: year,
|
4098
|
+
value: year
|
4099
|
+
}, String(year))))), React.createElement("div", null, React.createElement(IconButton, {
|
4146
4100
|
appearance: "discrete",
|
4147
4101
|
icon: "chevron-left",
|
4148
4102
|
"aria-label": actions.previousMonth,
|
4149
|
-
onClick:
|
4150
|
-
return onPreviousClick();
|
4151
|
-
},
|
4103
|
+
onClick: () => onPreviousClick(),
|
4152
4104
|
rounded: true
|
4153
4105
|
}), React.createElement(IconButton, {
|
4154
4106
|
appearance: "discrete",
|
4155
4107
|
icon: "chevron-right",
|
4156
4108
|
"aria-label": actions.nextMonth,
|
4157
|
-
onClick:
|
4158
|
-
return onNextClick();
|
4159
|
-
},
|
4109
|
+
onClick: () => onNextClick(),
|
4160
4110
|
rounded: true
|
4161
4111
|
})));
|
4162
4112
|
});
|
4163
|
-
|
4164
|
-
|
4165
|
-
|
4166
|
-
|
4167
|
-
|
4168
|
-
|
4169
|
-
|
4170
|
-
|
4171
|
-
|
4172
|
-
|
4173
|
-
|
4174
|
-
|
4175
|
-
|
4176
|
-
React.useEffect(function () {
|
4113
|
+
const Calendar$1 = /*#__PURE__*/React.forwardRef(function Calendar(props, ref) {
|
4114
|
+
const {
|
4115
|
+
onChange: handleChange,
|
4116
|
+
value,
|
4117
|
+
...otherProps
|
4118
|
+
} = props;
|
4119
|
+
const {
|
4120
|
+
locale,
|
4121
|
+
texts
|
4122
|
+
} = useLocalization();
|
4123
|
+
const [visibleMonth, setVisibleMonth] = React.useState(value !== null && value !== void 0 ? value : new Date());
|
4124
|
+
React.useEffect(() => {
|
4177
4125
|
if (visibleMonth !== value) {
|
4178
4126
|
setVisibleMonth(value !== null && value !== void 0 ? value : new Date());
|
4179
4127
|
}
|
4180
4128
|
}, [value]);
|
4181
4129
|
|
4182
|
-
|
4130
|
+
const handleDayClick = (date, modifiers, event) => {
|
4183
4131
|
if (modifiers.outside || modifiers.disabled) {
|
4184
4132
|
return;
|
4185
4133
|
}
|
@@ -4187,8 +4135,8 @@ var Calendar$1 = /*#__PURE__*/React.forwardRef(function Calendar(props, ref) {
|
|
4187
4135
|
handleChange(date, event);
|
4188
4136
|
};
|
4189
4137
|
|
4190
|
-
|
4191
|
-
|
4138
|
+
const handleCalendarClickToday = () => {
|
4139
|
+
const today = new Date(); // set to midday to avoid UTC offset causing dates to be mismatched server side
|
4192
4140
|
|
4193
4141
|
today.setHours(12);
|
4194
4142
|
today.setMinutes(0);
|
@@ -4196,7 +4144,7 @@ var Calendar$1 = /*#__PURE__*/React.forwardRef(function Calendar(props, ref) {
|
|
4196
4144
|
handleChange(today);
|
4197
4145
|
};
|
4198
4146
|
|
4199
|
-
|
4147
|
+
const className = cn('flex bg-white text-xs p-4', otherProps.className);
|
4200
4148
|
return React.createElement("div", {
|
4201
4149
|
"data-taco": "calendar"
|
4202
4150
|
}, React.createElement(ReactDayPicker, Object.assign({}, otherProps, {
|
@@ -4207,18 +4155,14 @@ var Calendar$1 = /*#__PURE__*/React.forwardRef(function Calendar(props, ref) {
|
|
4207
4155
|
firstDayOfWeek: 1,
|
4208
4156
|
months: texts.calendar.months,
|
4209
4157
|
weekdaysShort: texts.calendar.weekdaysShort,
|
4210
|
-
navbarElement:
|
4211
|
-
|
4212
|
-
|
4213
|
-
|
4214
|
-
}));
|
4215
|
-
},
|
4158
|
+
navbarElement: navProps => React.createElement(Navbar, Object.assign({}, navProps, {
|
4159
|
+
onMonthChange: setVisibleMonth,
|
4160
|
+
value: visibleMonth
|
4161
|
+
})),
|
4216
4162
|
onDayClick: handleDayClick,
|
4217
4163
|
onMonthChange: setVisibleMonth,
|
4218
4164
|
onTodayButtonClick: handleCalendarClickToday,
|
4219
|
-
captionElement:
|
4220
|
-
return null;
|
4221
|
-
},
|
4165
|
+
captionElement: () => null,
|
4222
4166
|
todayButton: texts.calendar.actions.today,
|
4223
4167
|
showOutsideDays: true,
|
4224
4168
|
renderDay: renderDay,
|
@@ -4227,32 +4171,30 @@ var Calendar$1 = /*#__PURE__*/React.forwardRef(function Calendar(props, ref) {
|
|
4227
4171
|
})));
|
4228
4172
|
});
|
4229
4173
|
|
4230
|
-
|
4231
|
-
|
4232
|
-
|
4233
|
-
|
4234
|
-
|
4235
|
-
|
4236
|
-
|
4237
|
-
|
4238
|
-
|
4239
|
-
|
4240
|
-
|
4174
|
+
const Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(props, ref) {
|
4175
|
+
const {
|
4176
|
+
checked,
|
4177
|
+
highlighted,
|
4178
|
+
indeterminate,
|
4179
|
+
invalid,
|
4180
|
+
label,
|
4181
|
+
onChange,
|
4182
|
+
...otherProps
|
4183
|
+
} = props;
|
4184
|
+
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)]
|
4241
4185
|
props.className, {
|
4242
4186
|
'border-grey-dark text-blue hover:text-blue-light focus:border-blue focus:hover:border-blue-light': !props.disabled && !invalid,
|
4243
4187
|
'border-grey text-blue-light cursor-not-allowed': props.disabled,
|
4244
4188
|
'bg-[rgba(255,255,0,0.2)] disabled:bg-[rgba(255,255,0,0.075)]': highlighted,
|
4245
4189
|
'border-red text-red hover:text-red-light hover:border-red-light focus:border-red focus:hover:border-red-light': invalid && !props.disabled
|
4246
4190
|
});
|
4247
|
-
|
4191
|
+
let handleChange;
|
4248
4192
|
|
4249
4193
|
if (onChange) {
|
4250
|
-
handleChange =
|
4251
|
-
return onChange(checked === 'indeterminate' ? false : checked);
|
4252
|
-
};
|
4194
|
+
handleChange = checked => onChange(checked === 'indeterminate' ? false : checked);
|
4253
4195
|
}
|
4254
4196
|
|
4255
|
-
|
4197
|
+
const element = React.createElement(CheckboxPrimitive.Root, Object.assign({}, otherProps, {
|
4256
4198
|
"data-taco": "checkbox",
|
4257
4199
|
checked: indeterminate ? 'indeterminate' : checked,
|
4258
4200
|
className: className,
|
@@ -4266,7 +4208,7 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(props, ref) {
|
|
4266
4208
|
})));
|
4267
4209
|
|
4268
4210
|
if (label) {
|
4269
|
-
|
4211
|
+
const labelClassName = cn('flex items-center cursor-pointer gap-2', {
|
4270
4212
|
'cursor-not-allowed text-grey-dark': props.disabled
|
4271
4213
|
}, props.className);
|
4272
4214
|
return React.createElement("label", {
|
@@ -4277,9 +4219,9 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(props, ref) {
|
|
4277
4219
|
return element;
|
4278
4220
|
});
|
4279
4221
|
|
4280
|
-
|
4281
|
-
|
4282
|
-
React.useEffect(
|
4222
|
+
const useProxiedRef = ref => {
|
4223
|
+
const internalRef = React.useRef(null);
|
4224
|
+
React.useEffect(() => {
|
4283
4225
|
if (ref) {
|
4284
4226
|
if (typeof ref === 'function') {
|
4285
4227
|
ref(internalRef.current);
|
@@ -4309,21 +4251,22 @@ const getButtonStateClasses = invalid => {
|
|
4309
4251
|
return '!border-grey-dark focus:!border-blue-light peer-focus:!border-blue-light peer-focus:peer-active:!border-blue-dark';
|
4310
4252
|
};
|
4311
4253
|
|
4312
|
-
|
4313
|
-
|
4314
|
-
|
4315
|
-
|
4316
|
-
|
4317
|
-
|
4318
|
-
|
4319
|
-
|
4320
|
-
|
4321
|
-
|
4322
|
-
|
4323
|
-
|
4254
|
+
const Input = /*#__PURE__*/React.forwardRef(function Input(props, ref) {
|
4255
|
+
const {
|
4256
|
+
button,
|
4257
|
+
icon,
|
4258
|
+
highlighted,
|
4259
|
+
invalid,
|
4260
|
+
onKeyDown,
|
4261
|
+
autoFocus,
|
4262
|
+
...otherProps
|
4263
|
+
} = props;
|
4264
|
+
const inputRef = useProxiedRef(ref);
|
4265
|
+
const hasContainer = button || icon;
|
4266
|
+
const className = cn(getInputClasses(props), 'min-h-[theme(spacing.8)] pointer-events-all', {
|
4324
4267
|
'pr-8': !!hasContainer
|
4325
4268
|
}, !hasContainer && otherProps.className);
|
4326
|
-
React.useEffect(
|
4269
|
+
React.useEffect(() => {
|
4327
4270
|
if (autoFocus && inputRef.current) {
|
4328
4271
|
inputRef.current.focus();
|
4329
4272
|
}
|
@@ -4331,10 +4274,10 @@ var Input = /*#__PURE__*/React.forwardRef(function Input(props, ref) {
|
|
4331
4274
|
// if it has scroll height then the browser reverts to native scrolling behaviour only
|
4332
4275
|
// so we manually override it to ensure _our_ desired behaviour remains intact
|
4333
4276
|
|
4334
|
-
|
4277
|
+
const handleKeyDown = event => {
|
4335
4278
|
if (!event.shiftKey && (event.key === 'Home' || event.key === 'End')) {
|
4336
4279
|
event.preventDefault();
|
4337
|
-
|
4280
|
+
const position = event.key === 'End' ? event.currentTarget.value.length : 0;
|
4338
4281
|
event.currentTarget.setSelectionRange(position, position);
|
4339
4282
|
}
|
4340
4283
|
|
@@ -4343,7 +4286,7 @@ var Input = /*#__PURE__*/React.forwardRef(function Input(props, ref) {
|
|
4343
4286
|
}
|
4344
4287
|
};
|
4345
4288
|
|
4346
|
-
|
4289
|
+
const input = React.createElement("input", Object.assign({}, otherProps, {
|
4347
4290
|
className: className,
|
4348
4291
|
"data-taco": "input",
|
4349
4292
|
onKeyDown: handleKeyDown,
|
@@ -4351,19 +4294,19 @@ var Input = /*#__PURE__*/React.forwardRef(function Input(props, ref) {
|
|
4351
4294
|
}));
|
4352
4295
|
|
4353
4296
|
if (hasContainer) {
|
4354
|
-
|
4297
|
+
let extra;
|
4355
4298
|
|
4356
4299
|
if (button) {
|
4357
|
-
|
4358
|
-
|
4359
|
-
|
4360
|
-
|
4300
|
+
const disabled = button.props.disabled || otherProps.disabled;
|
4301
|
+
const buttonClassName = cn('items-center flex justify-center border absolute rounded-l-none rounded-r right-0 h-full focus:rounded focus:outline-none', {
|
4302
|
+
[getButtonStateClasses(invalid)]: !props.disabled
|
4303
|
+
}, button.props.className);
|
4361
4304
|
extra = React.cloneElement(button, {
|
4362
4305
|
className: buttonClassName,
|
4363
|
-
disabled
|
4306
|
+
disabled
|
4364
4307
|
});
|
4365
4308
|
} else if (icon) {
|
4366
|
-
|
4309
|
+
const iconClassName = cn('items-center flex justify-center absolute pointer-events-none mr-1 p-px right-0 w-5 top-1/2 -translate-y-1/2', {
|
4367
4310
|
'text-grey-dark': props.disabled,
|
4368
4311
|
'text-grey-darkest': !props.disabled
|
4369
4312
|
});
|
@@ -4375,7 +4318,7 @@ var Input = /*#__PURE__*/React.forwardRef(function Input(props, ref) {
|
|
4375
4318
|
});
|
4376
4319
|
}
|
4377
4320
|
|
4378
|
-
|
4321
|
+
const containerClassName = cn('bg-white inline-flex relative rounded w-full', otherProps.className);
|
4379
4322
|
return React.createElement("div", {
|
4380
4323
|
className: containerClassName,
|
4381
4324
|
"data-taco": "input-container"
|
@@ -5146,27 +5089,26 @@ var useBoundingClientRectListener = function useBoundingClientRectListener(ref)
|
|
5146
5089
|
return dimensions;
|
5147
5090
|
};
|
5148
5091
|
|
5149
|
-
|
5150
|
-
|
5151
|
-
|
5152
|
-
|
5153
|
-
|
5154
|
-
|
5155
|
-
|
5156
|
-
|
5157
|
-
|
5158
|
-
|
5159
|
-
|
5160
|
-
|
5161
|
-
|
5162
|
-
|
5163
|
-
|
5164
|
-
|
5165
|
-
|
5166
|
-
|
5167
|
-
|
5168
|
-
|
5169
|
-
var className = cn('inline-flex relative', {
|
5092
|
+
const Combobox = /*#__PURE__*/React.forwardRef(function Combobox(props, ref) {
|
5093
|
+
const {
|
5094
|
+
className: externalClassName,
|
5095
|
+
dialog,
|
5096
|
+
style,
|
5097
|
+
...otherProps
|
5098
|
+
} = props;
|
5099
|
+
const {
|
5100
|
+
combobox,
|
5101
|
+
button,
|
5102
|
+
input,
|
5103
|
+
popover,
|
5104
|
+
list
|
5105
|
+
} = useCombobox(otherProps, ref);
|
5106
|
+
const internalRef = React.useRef(null);
|
5107
|
+
const {
|
5108
|
+
texts
|
5109
|
+
} = useLocalization();
|
5110
|
+
const selectDimensions = useBoundingClientRectListener(internalRef);
|
5111
|
+
const className = cn('inline-flex relative', {
|
5170
5112
|
'yt-combobox--inline': props.inline
|
5171
5113
|
}, externalClassName);
|
5172
5114
|
return React.createElement("span", {
|
@@ -5185,7 +5127,7 @@ var Combobox = /*#__PURE__*/React.forwardRef(function Combobox(props, ref) {
|
|
5185
5127
|
appearance: "discrete",
|
5186
5128
|
className: "!border-l-0 focus:!border-none focus:!shadow-none active:!border-none",
|
5187
5129
|
icon: popover.open ? 'chevron-up' : 'chevron-down',
|
5188
|
-
onClick:
|
5130
|
+
onClick: () => {
|
5189
5131
|
var _input$ref$current;
|
5190
5132
|
|
5191
5133
|
popover.onOpenChange(true);
|
@@ -5196,7 +5138,7 @@ var Combobox = /*#__PURE__*/React.forwardRef(function Combobox(props, ref) {
|
|
5196
5138
|
icon: "list-search",
|
5197
5139
|
disabled: props.readOnly || props.disabled,
|
5198
5140
|
dialog: dialog,
|
5199
|
-
onFocus:
|
5141
|
+
onFocus: event => {
|
5200
5142
|
var _input$ref$current2;
|
5201
5143
|
|
5202
5144
|
// Prevents the default focus behaviour of showing the tooltip, on parent tooltip element
|
@@ -5209,7 +5151,7 @@ var Combobox = /*#__PURE__*/React.forwardRef(function Combobox(props, ref) {
|
|
5209
5151
|
}) : undefined
|
5210
5152
|
})))), React.createElement(PopoverPrimitive.Content, {
|
5211
5153
|
align: "start",
|
5212
|
-
onOpenAutoFocus:
|
5154
|
+
onOpenAutoFocus: event => {
|
5213
5155
|
event.preventDefault();
|
5214
5156
|
},
|
5215
5157
|
sideOffset: 4
|
@@ -5443,19 +5385,18 @@ function mergeRefs(refs) {
|
|
5443
5385
|
};
|
5444
5386
|
}
|
5445
5387
|
|
5446
|
-
|
5447
|
-
var PopoverContext = /*#__PURE__*/React.createContext({
|
5388
|
+
const PopoverContext = /*#__PURE__*/React.createContext({
|
5448
5389
|
props: {},
|
5449
5390
|
ref: null
|
5450
5391
|
});
|
5451
|
-
|
5392
|
+
const Trigger$1 = /*#__PURE__*/React.forwardRef(function PopoverTrigger(props, ref) {
|
5452
5393
|
var _props$children;
|
5453
5394
|
|
5454
|
-
|
5455
|
-
|
5395
|
+
const context = React.useContext(PopoverContext);
|
5396
|
+
let children = props.children;
|
5456
5397
|
|
5457
5398
|
if (React.isValidElement(props.children) && typeof ((_props$children = props.children) === null || _props$children === void 0 ? void 0 : _props$children.type) === 'function') {
|
5458
|
-
console.warn(
|
5399
|
+
console.warn(`Popover.Trigger requires its child to forwardRef so that it can attach to the dom element. Did you mean to wrap '${props.children.type.name}' in React.forwardRef()? Taco has wrapped '${props.children.type.name}' in a 'span' to maintain functionality, but this may cause unintended behaviour`);
|
5459
5400
|
children = React.createElement("span", null, props.children);
|
5460
5401
|
}
|
5461
5402
|
|
@@ -5465,22 +5406,22 @@ var Trigger$1 = /*#__PURE__*/React.forwardRef(function PopoverTrigger(props, ref
|
|
5465
5406
|
asChild: true
|
5466
5407
|
}));
|
5467
5408
|
});
|
5468
|
-
|
5469
|
-
|
5470
|
-
|
5471
|
-
|
5472
|
-
|
5409
|
+
const RenderPropWrapper = /*#__PURE__*/React.forwardRef(function RenderPropWrapper({
|
5410
|
+
children,
|
5411
|
+
onClick
|
5412
|
+
}, ref) {
|
5413
|
+
const close = () => {
|
5473
5414
|
onClick(new CustomEvent('hide'));
|
5474
5415
|
};
|
5475
5416
|
|
5476
5417
|
return children({
|
5477
|
-
close
|
5478
|
-
ref
|
5418
|
+
close,
|
5419
|
+
ref
|
5479
5420
|
});
|
5480
5421
|
});
|
5481
|
-
|
5482
|
-
|
5483
|
-
|
5422
|
+
const Content$1 = /*#__PURE__*/React.forwardRef(function PopoverContent(props, ref) {
|
5423
|
+
const className = cn('bg-white focus:border-blue-light', props.className);
|
5424
|
+
let output;
|
5484
5425
|
|
5485
5426
|
if (typeof props.children === 'function') {
|
5486
5427
|
output = React.createElement(PopoverPrimitive.Close, {
|
@@ -5498,23 +5439,20 @@ var Content$1 = /*#__PURE__*/React.forwardRef(function PopoverContent(props, ref
|
|
5498
5439
|
className: "text-white"
|
5499
5440
|
}));
|
5500
5441
|
});
|
5501
|
-
|
5502
|
-
|
5503
|
-
|
5504
|
-
|
5505
|
-
|
5506
|
-
|
5507
|
-
|
5508
|
-
|
5509
|
-
|
5510
|
-
|
5511
|
-
|
5512
|
-
|
5513
|
-
|
5514
|
-
|
5515
|
-
ref: ref
|
5516
|
-
};
|
5517
|
-
}, [otherProps]);
|
5442
|
+
const Close$1 = /*#__PURE__*/React.forwardRef((props, ref) => React.createElement(PopoverPrimitive.Close, Object.assign({}, props, {
|
5443
|
+
ref: ref,
|
5444
|
+
asChild: true
|
5445
|
+
})));
|
5446
|
+
const Popover = /*#__PURE__*/React.forwardRef(function Popover(props, ref) {
|
5447
|
+
const {
|
5448
|
+
children,
|
5449
|
+
trigger,
|
5450
|
+
...otherProps
|
5451
|
+
} = props;
|
5452
|
+
const context = React.useMemo(() => ({
|
5453
|
+
props: otherProps,
|
5454
|
+
ref
|
5455
|
+
}), [otherProps]);
|
5518
5456
|
return React.createElement(PopoverContext.Provider, {
|
5519
5457
|
value: context
|
5520
5458
|
}, React.createElement(PopoverPrimitive.Root, null, trigger && React.createElement(Trigger$1, null, trigger), children));
|
@@ -5523,23 +5461,23 @@ Popover.Trigger = Trigger$1;
|
|
5523
5461
|
Popover.Content = Content$1;
|
5524
5462
|
Popover.Close = Close$1;
|
5525
5463
|
|
5526
|
-
|
5527
|
-
|
5528
|
-
|
5529
|
-
|
5530
|
-
|
5531
|
-
|
5532
|
-
|
5533
|
-
|
5534
|
-
|
5535
|
-
|
5536
|
-
|
5537
|
-
|
5538
|
-
|
5539
|
-
|
5540
|
-
|
5541
|
-
|
5542
|
-
|
5464
|
+
const Datepicker = /*#__PURE__*/React.forwardRef(function Datepicker(props, ref) {
|
5465
|
+
const {
|
5466
|
+
className: externalClassName,
|
5467
|
+
onReset: handleReset,
|
5468
|
+
style,
|
5469
|
+
shortcuts,
|
5470
|
+
shortcutsText,
|
5471
|
+
...otherProps
|
5472
|
+
} = props;
|
5473
|
+
const {
|
5474
|
+
calendar,
|
5475
|
+
input
|
5476
|
+
} = useDatepicker(otherProps, ref);
|
5477
|
+
const {
|
5478
|
+
texts
|
5479
|
+
} = useLocalization();
|
5480
|
+
const className = cn('inline-flex w-full text-black font-normal', externalClassName);
|
5543
5481
|
return React.createElement("span", {
|
5544
5482
|
className: className,
|
5545
5483
|
"data-taco": "datepicker",
|
@@ -5549,40 +5487,37 @@ var Datepicker = /*#__PURE__*/React.forwardRef(function Datepicker(props, ref) {
|
|
5549
5487
|
"aria-label": texts.datepicker.expand,
|
5550
5488
|
disabled: input.disabled || input.readOnly,
|
5551
5489
|
icon: "calendar"
|
5552
|
-
})), React.createElement(Popover.Content, null,
|
5553
|
-
|
5554
|
-
|
5555
|
-
|
5556
|
-
|
5557
|
-
|
5558
|
-
|
5559
|
-
|
5560
|
-
|
5561
|
-
|
5562
|
-
|
5563
|
-
|
5564
|
-
|
5565
|
-
|
5566
|
-
|
5567
|
-
|
5568
|
-
|
5569
|
-
|
5570
|
-
|
5571
|
-
|
5572
|
-
|
5573
|
-
|
5574
|
-
|
5575
|
-
|
5576
|
-
|
5577
|
-
|
5578
|
-
|
5579
|
-
|
5580
|
-
|
5581
|
-
|
5582
|
-
|
5583
|
-
}
|
5584
|
-
}, texts.datepicker.clear)));
|
5585
|
-
}))
|
5490
|
+
})), React.createElement(Popover.Content, null, ({
|
5491
|
+
close
|
5492
|
+
}) => React.createElement("div", {
|
5493
|
+
className: "-m-3 flex"
|
5494
|
+
}, React.createElement(Calendar$1, Object.assign({}, calendar, {
|
5495
|
+
onChange: (date, event) => {
|
5496
|
+
calendar.onChange(date, event);
|
5497
|
+
close();
|
5498
|
+
},
|
5499
|
+
tabIndex: -1
|
5500
|
+
})), shortcuts && React.createElement("div", {
|
5501
|
+
className: "border-grey-dark flex flex-col border-l"
|
5502
|
+
}, React.createElement("span", {
|
5503
|
+
className: "m-4 mb-3 flex h-8 w-32 items-center text-xs font-semibold"
|
5504
|
+
}, shortcutsText !== null && shortcutsText !== void 0 ? shortcutsText : texts.datepicker.shortcuts), React.createElement("ul", null, shortcuts.map((shortcut, i) => React.createElement("li", {
|
5505
|
+
key: i
|
5506
|
+
}, React.createElement("button", {
|
5507
|
+
className: "hover:bg-grey-light flex w-full items-start px-4 py-1 text-xs",
|
5508
|
+
onClick: event => {
|
5509
|
+
event.persist();
|
5510
|
+
shortcut.onClick(event);
|
5511
|
+
close();
|
5512
|
+
}
|
5513
|
+
}, shortcut.text)))), handleReset && React.createElement("button", {
|
5514
|
+
className: "text-blue hover:text-blue-light my-4 mx-auto mt-auto inline-flex cursor-pointer border-none bg-transparent text-xs",
|
5515
|
+
onClick: event => {
|
5516
|
+
event.persist();
|
5517
|
+
handleReset(event);
|
5518
|
+
close();
|
5519
|
+
}
|
5520
|
+
}, texts.datepicker.clear)))))
|
5586
5521
|
})));
|
5587
5522
|
});
|
5588
5523
|
|
@@ -5825,14 +5760,12 @@ const Extra = /*#__PURE__*/React.forwardRef(function DialogExtra(props, ref) {
|
|
5825
5760
|
});
|
5826
5761
|
Extra.displayName = 'DialogExtra';
|
5827
5762
|
|
5828
|
-
|
5829
|
-
|
5830
|
-
|
5831
|
-
|
5832
|
-
|
5833
|
-
|
5834
|
-
var extra;
|
5835
|
-
React.Children.toArray(initialChildren).forEach(function (child) {
|
5763
|
+
const useSeparatedChildren = initialChildren => {
|
5764
|
+
return React.useMemo(() => {
|
5765
|
+
const children = [];
|
5766
|
+
let drawer;
|
5767
|
+
let extra;
|
5768
|
+
React.Children.toArray(initialChildren).forEach(child => {
|
5836
5769
|
var _child$type, _child$type2;
|
5837
5770
|
|
5838
5771
|
if (((_child$type = child.type) === null || _child$type === void 0 ? void 0 : _child$type.displayName) === Drawer.displayName) {
|
@@ -5847,55 +5780,39 @@ var useSeparatedChildren = function useSeparatedChildren(initialChildren) {
|
|
5847
5780
|
}, [initialChildren]);
|
5848
5781
|
};
|
5849
5782
|
|
5850
|
-
|
5851
|
-
|
5852
|
-
|
5853
|
-
|
5854
|
-
|
5855
|
-
|
5856
|
-
|
5857
|
-
|
5858
|
-
|
5859
|
-
|
5860
|
-
|
5861
|
-
|
5862
|
-
|
5863
|
-
|
5864
|
-
|
5865
|
-
|
5866
|
-
|
5867
|
-
|
5868
|
-
|
5869
|
-
|
5870
|
-
|
5871
|
-
|
5872
|
-
|
5873
|
-
|
5874
|
-
|
5875
|
-
|
5876
|
-
|
5877
|
-
|
5878
|
-
|
5879
|
-
|
5880
|
-
|
5881
|
-
|
5882
|
-
|
5883
|
-
return setDrawerOpen(function (isDrawerOpen) {
|
5884
|
-
return !isDrawerOpen;
|
5885
|
-
});
|
5886
|
-
}
|
5887
|
-
},
|
5888
|
-
elements: {
|
5889
|
-
drawer: drawer,
|
5890
|
-
extra: extra
|
5891
|
-
},
|
5892
|
-
onClose: onClose,
|
5893
|
-
props: otherProps,
|
5894
|
-
showCloseButton: showCloseButton,
|
5895
|
-
size: size,
|
5896
|
-
ref: ref
|
5897
|
-
};
|
5898
|
-
}, [closeOnEscape, drawerOpen, draggable, drawer, extra, open, otherProps, showCloseButton]);
|
5783
|
+
const Dialog = /*#__PURE__*/React.forwardRef(function Dialog(props, ref) {
|
5784
|
+
const {
|
5785
|
+
children: initialChildren,
|
5786
|
+
closeOnEscape = true,
|
5787
|
+
defaultOpen,
|
5788
|
+
draggable = false,
|
5789
|
+
onChange,
|
5790
|
+
onClose,
|
5791
|
+
open,
|
5792
|
+
showCloseButton = true,
|
5793
|
+
size = 'sm',
|
5794
|
+
trigger,
|
5795
|
+
...otherProps
|
5796
|
+
} = props;
|
5797
|
+
const [children, drawer, extra] = useSeparatedChildren(initialChildren);
|
5798
|
+
const [drawerOpen, setDrawerOpen] = React.useState(false);
|
5799
|
+
const context = React.useMemo(() => ({
|
5800
|
+
closeOnEscape,
|
5801
|
+
draggable,
|
5802
|
+
drawer: {
|
5803
|
+
open: drawerOpen,
|
5804
|
+
toggle: () => setDrawerOpen(isDrawerOpen => !isDrawerOpen)
|
5805
|
+
},
|
5806
|
+
elements: {
|
5807
|
+
drawer,
|
5808
|
+
extra
|
5809
|
+
},
|
5810
|
+
onClose,
|
5811
|
+
props: otherProps,
|
5812
|
+
showCloseButton,
|
5813
|
+
size,
|
5814
|
+
ref
|
5815
|
+
}), [closeOnEscape, drawerOpen, draggable, drawer, extra, open, otherProps, showCloseButton]);
|
5899
5816
|
return React.createElement(DialogContext.Provider, {
|
5900
5817
|
value: context
|
5901
5818
|
}, React.createElement(DialogPrimitive.Root, {
|
@@ -5912,19 +5829,18 @@ Dialog.Extra = Extra;
|
|
5912
5829
|
Dialog.Drawer = Drawer;
|
5913
5830
|
Dialog.Close = Close$2;
|
5914
5831
|
|
5915
|
-
|
5916
|
-
|
5917
|
-
|
5918
|
-
|
5919
|
-
|
5920
|
-
|
5921
|
-
|
5922
|
-
|
5923
|
-
|
5924
|
-
var className = cn('flex flex-col font-bold text-xs leading-loose pb-4 min-h-[theme(spacing.18)]', {
|
5832
|
+
const Field = /*#__PURE__*/React.forwardRef(function Field(props, ref) {
|
5833
|
+
const {
|
5834
|
+
disabled,
|
5835
|
+
children,
|
5836
|
+
invalid = false,
|
5837
|
+
message,
|
5838
|
+
...otherProps
|
5839
|
+
} = props;
|
5840
|
+
const className = cn('flex flex-col font-bold text-xs leading-loose pb-4 min-h-[theme(spacing.18)]', {
|
5925
5841
|
'text-grey-dark': disabled
|
5926
5842
|
}, props.className);
|
5927
|
-
|
5843
|
+
const messageClassName = cn('h-4 text-xs text-left leading-normal font-normal truncate -mb-4', {
|
5928
5844
|
'text-grey-darkest': !invalid,
|
5929
5845
|
'text-red': invalid,
|
5930
5846
|
'opacity-50': disabled
|
@@ -5939,13 +5855,12 @@ var Field = /*#__PURE__*/React.forwardRef(function Field(props, ref) {
|
|
5939
5855
|
}, message));
|
5940
5856
|
});
|
5941
5857
|
|
5942
|
-
|
5943
|
-
|
5944
|
-
|
5945
|
-
|
5946
|
-
|
5947
|
-
|
5948
|
-
var className = cn('yt-form', {
|
5858
|
+
const Form = /*#__PURE__*/React.forwardRef(function Form(props, ref) {
|
5859
|
+
const {
|
5860
|
+
horizontal = false,
|
5861
|
+
...otherProps
|
5862
|
+
} = props;
|
5863
|
+
const className = cn('yt-form', {
|
5949
5864
|
'yt-form--horizontal flex flex-wrap': horizontal
|
5950
5865
|
}, props.className);
|
5951
5866
|
return React.createElement("form", Object.assign({}, otherProps, {
|
@@ -5955,13 +5870,12 @@ var Form = /*#__PURE__*/React.forwardRef(function Form(props, ref) {
|
|
5955
5870
|
}));
|
5956
5871
|
});
|
5957
5872
|
|
5958
|
-
|
5959
|
-
|
5960
|
-
|
5961
|
-
|
5962
|
-
|
5963
|
-
|
5964
|
-
var className = cn('flex ', props.className);
|
5873
|
+
const Group = /*#__PURE__*/React.forwardRef(function Group(props, ref) {
|
5874
|
+
const {
|
5875
|
+
as: Tag = 'span',
|
5876
|
+
...otherProps
|
5877
|
+
} = props;
|
5878
|
+
const className = cn('flex ', props.className);
|
5965
5879
|
return React.createElement(Tag, Object.assign({}, otherProps, {
|
5966
5880
|
className: className,
|
5967
5881
|
"data-taco": "group",
|
@@ -5969,19 +5883,18 @@ var Group = /*#__PURE__*/React.forwardRef(function Group(props, ref) {
|
|
5969
5883
|
}));
|
5970
5884
|
});
|
5971
5885
|
|
5972
|
-
|
5973
|
-
var HangerContext = /*#__PURE__*/React.createContext({
|
5886
|
+
const HangerContext = /*#__PURE__*/React.createContext({
|
5974
5887
|
props: {},
|
5975
5888
|
ref: null
|
5976
5889
|
});
|
5977
|
-
|
5890
|
+
const Anchor = /*#__PURE__*/React.forwardRef(function HangerAnchor(props, ref) {
|
5978
5891
|
var _props$children;
|
5979
5892
|
|
5980
|
-
|
5981
|
-
|
5893
|
+
const context = React.useContext(HangerContext);
|
5894
|
+
let children = props.children;
|
5982
5895
|
|
5983
5896
|
if (React.isValidElement(props.children) && typeof ((_props$children = props.children) === null || _props$children === void 0 ? void 0 : _props$children.type) === 'function') {
|
5984
|
-
console.warn(
|
5897
|
+
console.warn(`Hanger.Anchor requires its child to forwardRef so that it can attach to the dom element. Did you mean to wrap '${props.children.type.name}' in React.forwardRef()? Taco has wrapped '${props.children.type.name}' in a 'span' to maintain functionality, but this may cause unintended behaviour`);
|
5985
5898
|
children = React.createElement("span", null, props.children);
|
5986
5899
|
}
|
5987
5900
|
|
@@ -5991,22 +5904,21 @@ var Anchor = /*#__PURE__*/React.forwardRef(function HangerAnchor(props, ref) {
|
|
5991
5904
|
asChild: true
|
5992
5905
|
}));
|
5993
5906
|
});
|
5994
|
-
|
5995
|
-
|
5907
|
+
const Title$1 = /*#__PURE__*/React.forwardRef(function DialogTitle(props, ref) {
|
5908
|
+
const className = cn('mb-1 text-base font-bold flex w-full', props.className);
|
5996
5909
|
return React.createElement("span", Object.assign({}, props, {
|
5997
5910
|
className: className,
|
5998
5911
|
ref: ref
|
5999
5912
|
}));
|
6000
5913
|
});
|
6001
|
-
|
6002
|
-
|
6003
|
-
|
6004
|
-
|
6005
|
-
|
6006
|
-
|
6007
|
-
var className = cn('wcag-blue border border-transparent rounded p-3 pr-12 yt-shadow z-[996] focus:border-transparent max-w-sm', props.className);
|
5914
|
+
const Content$3 = /*#__PURE__*/React.forwardRef(function HangerContent(props, ref) {
|
5915
|
+
const context = React.useContext(HangerContext);
|
5916
|
+
const {
|
5917
|
+
texts
|
5918
|
+
} = useLocalization();
|
5919
|
+
const className = cn('wcag-blue border border-transparent rounded p-3 pr-12 yt-shadow z-[996] focus:border-transparent max-w-sm', props.className);
|
6008
5920
|
|
6009
|
-
|
5921
|
+
const handleInteractOutside = event => {
|
6010
5922
|
event.preventDefault();
|
6011
5923
|
};
|
6012
5924
|
|
@@ -6028,25 +5940,20 @@ var Content$3 = /*#__PURE__*/React.forwardRef(function HangerContent(props, ref)
|
|
6028
5940
|
onClick: context.props.onClose
|
6029
5941
|
})));
|
6030
5942
|
});
|
6031
|
-
|
6032
|
-
|
6033
|
-
|
6034
|
-
|
6035
|
-
|
6036
|
-
|
6037
|
-
|
6038
|
-
|
6039
|
-
|
6040
|
-
|
6041
|
-
|
6042
|
-
};
|
6043
|
-
}, [otherProps]); // we do this to ensure hangers are mounted after their containers, e.g. if the container is another portal
|
6044
|
-
|
6045
|
-
var _React$useState = React.useState(false),
|
6046
|
-
open = _React$useState[0],
|
6047
|
-
setOpen = _React$useState[1];
|
5943
|
+
const Hanger = /*#__PURE__*/React.forwardRef(function Hanger(props, ref) {
|
5944
|
+
const {
|
5945
|
+
anchor,
|
5946
|
+
children,
|
5947
|
+
defaultOpen = true,
|
5948
|
+
...otherProps
|
5949
|
+
} = props;
|
5950
|
+
const context = React.useMemo(() => ({
|
5951
|
+
props: otherProps,
|
5952
|
+
ref
|
5953
|
+
}), [otherProps]); // we do this to ensure hangers are mounted after their containers, e.g. if the container is another portal
|
6048
5954
|
|
6049
|
-
React.
|
5955
|
+
const [open, setOpen] = React.useState(false);
|
5956
|
+
React.useEffect(() => {
|
6050
5957
|
if (defaultOpen) {
|
6051
5958
|
setOpen(defaultOpen);
|
6052
5959
|
}
|
@@ -6062,25 +5969,25 @@ Hanger.Anchor = Anchor;
|
|
6062
5969
|
Hanger.Content = Content$3;
|
6063
5970
|
Hanger.Title = Title$1;
|
6064
5971
|
|
6065
|
-
|
6066
|
-
var Trigger$3 = /*#__PURE__*/React.forwardRef(function HoverCardTrigger(props, ref) {
|
5972
|
+
const Trigger$3 = /*#__PURE__*/React.forwardRef(function HoverCardTrigger(props, ref) {
|
6067
5973
|
return React.createElement(HoverCardPrimitive.Trigger, Object.assign({}, props, {
|
6068
5974
|
asChild: true,
|
6069
5975
|
ref: ref
|
6070
5976
|
}));
|
6071
5977
|
});
|
6072
|
-
|
6073
|
-
|
6074
|
-
|
6075
|
-
|
6076
|
-
|
5978
|
+
const Content$4 = /*#__PURE__*/React.forwardRef(function HoverCardContent(externalProps, ref) {
|
5979
|
+
const {
|
5980
|
+
placement,
|
5981
|
+
...props
|
5982
|
+
} = externalProps;
|
5983
|
+
const className = cn('bg-white rounded p-3 yt-shadow', props.className);
|
6077
5984
|
return React.createElement(HoverCardPrimitive.Content, Object.assign({}, props, {
|
6078
5985
|
className: className,
|
6079
5986
|
ref: ref,
|
6080
5987
|
side: placement
|
6081
5988
|
}));
|
6082
5989
|
});
|
6083
|
-
|
5990
|
+
const HoverCard = props => {
|
6084
5991
|
return React.createElement(HoverCardPrimitive.Root, Object.assign({}, props, {
|
6085
5992
|
openDelay: 300
|
6086
5993
|
}));
|
@@ -6088,24 +5995,24 @@ var HoverCard = function HoverCard(props) {
|
|
6088
5995
|
HoverCard.Trigger = Trigger$3;
|
6089
5996
|
HoverCard.Content = Content$4;
|
6090
5997
|
|
6091
|
-
|
6092
|
-
|
6093
|
-
|
6094
|
-
|
6095
|
-
|
6096
|
-
|
6097
|
-
|
5998
|
+
const SearchInput = /*#__PURE__*/React.forwardRef(function SearchInput({
|
5999
|
+
onSearch,
|
6000
|
+
...props
|
6001
|
+
}, ref) {
|
6002
|
+
const {
|
6003
|
+
texts
|
6004
|
+
} = useLocalization();
|
6098
6005
|
|
6099
|
-
|
6006
|
+
const handleClick = () => {
|
6100
6007
|
if (!props.disabled) {
|
6101
6008
|
onSearch === null || onSearch === void 0 ? void 0 : onSearch(props.value);
|
6102
6009
|
}
|
6103
6010
|
};
|
6104
6011
|
|
6105
|
-
|
6012
|
+
const handleKeyDown = event => {
|
6106
6013
|
var _props$onKeyDown;
|
6107
6014
|
|
6108
|
-
|
6015
|
+
const isEnterKeyPressed = event.keyCode === keycode('enter');
|
6109
6016
|
|
6110
6017
|
if (isEnterKeyPressed) {
|
6111
6018
|
handleClick();
|
@@ -6474,49 +6381,49 @@ const useMultiListbox = ({
|
|
6474
6381
|
};
|
6475
6382
|
};
|
6476
6383
|
|
6477
|
-
|
6478
|
-
|
6479
|
-
|
6480
|
-
|
6481
|
-
|
6482
|
-
|
6483
|
-
|
6484
|
-
|
6485
|
-
|
6486
|
-
|
6487
|
-
var className = cn('bg-white inline-flex relative w-full', externalClassName);
|
6384
|
+
const Listbox = /*#__PURE__*/React.forwardRef(function Listbox(props, ref) {
|
6385
|
+
const {
|
6386
|
+
className: externalClassName,
|
6387
|
+
...otherProps
|
6388
|
+
} = props;
|
6389
|
+
const {
|
6390
|
+
list,
|
6391
|
+
input
|
6392
|
+
} = useListbox(otherProps, ref);
|
6393
|
+
const className = cn('bg-white inline-flex relative w-full', externalClassName);
|
6488
6394
|
return React.createElement("span", {
|
6489
6395
|
"data-taco": "listbox",
|
6490
6396
|
className: className
|
6491
6397
|
}, React.createElement(ScrollableList, Object.assign({}, list, {
|
6492
|
-
style:
|
6398
|
+
style: { ...list.style,
|
6493
6399
|
maxHeight: 'calc(12rem + 2px)'
|
6494
6400
|
/* (6 * option height) + listbox border */
|
6495
6401
|
|
6496
|
-
}
|
6402
|
+
}
|
6497
6403
|
})), React.createElement("input", Object.assign({}, input, {
|
6498
6404
|
className: "hidden",
|
6499
6405
|
type: "text"
|
6500
6406
|
})));
|
6501
6407
|
});
|
6502
|
-
|
6503
|
-
|
6504
|
-
|
6505
|
-
|
6506
|
-
|
6507
|
-
|
6508
|
-
|
6509
|
-
|
6510
|
-
|
6408
|
+
const MultiListbox = /*#__PURE__*/React.forwardRef(function Listbox(props, ref) {
|
6409
|
+
const {
|
6410
|
+
className: externalClassName,
|
6411
|
+
...otherProps
|
6412
|
+
} = props;
|
6413
|
+
const {
|
6414
|
+
list,
|
6415
|
+
input
|
6416
|
+
} = useMultiListbox(otherProps, ref);
|
6417
|
+
const className = cn('bg-white inline-flex relative w-full', externalClassName);
|
6511
6418
|
return React.createElement("span", {
|
6512
6419
|
"data-taco": "listbox",
|
6513
6420
|
className: className
|
6514
6421
|
}, React.createElement(ScrollableList, Object.assign({}, list, {
|
6515
|
-
style:
|
6422
|
+
style: { ...list.style,
|
6516
6423
|
maxHeight: 'calc(12rem + 2px + 2px)'
|
6517
6424
|
/* (6 * option height) + listbox border + ALL_OPTIONS bottom border */
|
6518
6425
|
|
6519
|
-
}
|
6426
|
+
}
|
6520
6427
|
})), React.createElement("input", Object.assign({}, input, {
|
6521
6428
|
className: "hidden",
|
6522
6429
|
type: "text"
|
@@ -6699,34 +6606,26 @@ const Checkbox$1 = props => {
|
|
6699
6606
|
})), children);
|
6700
6607
|
};
|
6701
6608
|
|
6702
|
-
|
6703
|
-
|
6704
|
-
|
6705
|
-
return String(value !== null && value !== void 0 ? value : '');
|
6706
|
-
};
|
6707
|
-
var findByValue$1 = function findByValue(values, valueAsString) {
|
6708
|
-
return values.find(function (value) {
|
6709
|
-
return getRadioGroupItemValueAsString(value) === valueAsString;
|
6710
|
-
});
|
6711
|
-
};
|
6712
|
-
var RadioGroupContext = /*#__PURE__*/React.createContext({
|
6609
|
+
const getRadioGroupItemValueAsString = value => String(value !== null && value !== void 0 ? value : '');
|
6610
|
+
const findByValue$1 = (values, valueAsString) => values.find(value => getRadioGroupItemValueAsString(value) === valueAsString);
|
6611
|
+
const RadioGroupContext = /*#__PURE__*/React.createContext({
|
6713
6612
|
disabled: false,
|
6714
6613
|
invalid: false
|
6715
6614
|
});
|
6716
|
-
|
6717
|
-
|
6718
|
-
|
6719
|
-
|
6720
|
-
|
6721
|
-
|
6722
|
-
|
6723
|
-
|
6724
|
-
|
6615
|
+
const RadioGroupItem = /*#__PURE__*/React.forwardRef(function RadioGroupItem(props, ref) {
|
6616
|
+
const context = React.useContext(RadioGroupContext);
|
6617
|
+
const {
|
6618
|
+
children,
|
6619
|
+
value,
|
6620
|
+
...otherProps
|
6621
|
+
} = props;
|
6622
|
+
const isDisabled = context.disabled || props.disabled;
|
6623
|
+
const className = cn('flex flex-shrink-0 self-start items-center justify-center h-4 w-4 mt-[0.2rem] rounded-full bg-white border-2', {
|
6725
6624
|
'border-grey-dark hover:border-4 focus:yt-focus aria-checked:bg-blue aria-checked:border-blue hover:aria-checked:border-blue-light': !isDisabled && !context.invalid,
|
6726
6625
|
'border-grey cursor-not-allowed aria-checked:bg-blue-light aria-checked:border-blue-light ': isDisabled,
|
6727
6626
|
'border-red hover:border-4 text-red focus:border-red focus:yt-focus-red aria-checked:bg-red aria-checked:border-red': context.invalid && !isDisabled
|
6728
6627
|
});
|
6729
|
-
|
6628
|
+
const labelClassName = cn('flex items-center gap-2', {
|
6730
6629
|
'cursor-pointer': !isDisabled,
|
6731
6630
|
'cursor-not-allowed text-grey-dark': isDisabled
|
6732
6631
|
}, props.className);
|
@@ -6741,38 +6640,34 @@ var RadioGroupItem = /*#__PURE__*/React.forwardRef(function RadioGroupItem(props
|
|
6741
6640
|
className: "h-2 w-2 rounded-full bg-white"
|
6742
6641
|
})), children);
|
6743
6642
|
});
|
6744
|
-
|
6745
|
-
|
6746
|
-
|
6747
|
-
|
6748
|
-
|
6749
|
-
|
6750
|
-
|
6751
|
-
|
6752
|
-
|
6753
|
-
|
6754
|
-
|
6755
|
-
|
6756
|
-
|
6757
|
-
React.Children.forEach(children,
|
6643
|
+
const useRadioGroup = props => {
|
6644
|
+
const {
|
6645
|
+
children,
|
6646
|
+
defaultValue,
|
6647
|
+
disabled,
|
6648
|
+
invalid,
|
6649
|
+
onChange,
|
6650
|
+
orientation = 'vertical',
|
6651
|
+
value,
|
6652
|
+
...otherProps
|
6653
|
+
} = props;
|
6654
|
+
const values = React.useMemo(() => {
|
6655
|
+
const radioGroupItemValues = [];
|
6656
|
+
React.Children.forEach(children, child => {
|
6758
6657
|
if (React.isValidElement(child)) {
|
6759
6658
|
radioGroupItemValues.push(child.props.value);
|
6760
6659
|
}
|
6761
6660
|
});
|
6762
6661
|
return radioGroupItemValues;
|
6763
6662
|
}, [children]);
|
6764
|
-
|
6765
|
-
|
6766
|
-
|
6767
|
-
|
6768
|
-
|
6769
|
-
}, [disabled, invalid]);
|
6770
|
-
var valueProps;
|
6663
|
+
const context = React.useMemo(() => ({
|
6664
|
+
disabled: disabled !== null && disabled !== void 0 ? disabled : false,
|
6665
|
+
invalid: invalid !== null && invalid !== void 0 ? invalid : false
|
6666
|
+
}), [disabled, invalid]);
|
6667
|
+
let valueProps;
|
6771
6668
|
|
6772
6669
|
if (onChange !== undefined) {
|
6773
|
-
|
6774
|
-
return onChange(findByValue$1(values, value));
|
6775
|
-
};
|
6670
|
+
const handleChange = value => onChange(findByValue$1(values, value));
|
6776
6671
|
|
6777
6672
|
valueProps = {
|
6778
6673
|
onValueChange: handleChange,
|
@@ -6785,19 +6680,20 @@ var useRadioGroup = function useRadioGroup(props) {
|
|
6785
6680
|
}
|
6786
6681
|
|
6787
6682
|
return {
|
6788
|
-
context
|
6789
|
-
props:
|
6790
|
-
|
6791
|
-
|
6792
|
-
|
6683
|
+
context,
|
6684
|
+
props: { ...otherProps,
|
6685
|
+
...valueProps,
|
6686
|
+
children,
|
6687
|
+
orientation
|
6688
|
+
}
|
6793
6689
|
};
|
6794
6690
|
};
|
6795
|
-
|
6796
|
-
|
6797
|
-
|
6798
|
-
|
6799
|
-
|
6800
|
-
|
6691
|
+
const RadioGroup = /*#__PURE__*/React.forwardRef(function RadioGroup(props, ref) {
|
6692
|
+
const {
|
6693
|
+
context,
|
6694
|
+
props: otherProps
|
6695
|
+
} = useRadioGroup(props);
|
6696
|
+
const className = cn('flex items-start gap-y-2', {
|
6801
6697
|
'flex-wrap gap-x-4 ': otherProps.orientation === 'horizontal',
|
6802
6698
|
'flex-col': otherProps.orientation === 'vertical'
|
6803
6699
|
}, otherProps.className);
|
@@ -6868,39 +6764,22 @@ const Header = props => {
|
|
6868
6764
|
}));
|
6869
6765
|
};
|
6870
6766
|
|
6871
|
-
|
6872
|
-
|
6873
|
-
|
6874
|
-
|
6875
|
-
|
6876
|
-
|
6877
|
-
|
6878
|
-
|
6879
|
-
|
6880
|
-
|
6881
|
-
|
6882
|
-
|
6883
|
-
|
6884
|
-
|
6885
|
-
|
6886
|
-
|
6887
|
-
_setMinWidth = _React$useState3[1];
|
6888
|
-
|
6889
|
-
var context = React.useMemo(function () {
|
6890
|
-
return {
|
6891
|
-
indented: indented,
|
6892
|
-
registerIndentation: function registerIndentation() {
|
6893
|
-
return setIndented(true);
|
6894
|
-
},
|
6895
|
-
minWidth: minWidth,
|
6896
|
-
setMinWidth: function setMinWidth(width) {
|
6897
|
-
return _setMinWidth(width);
|
6898
|
-
},
|
6899
|
-
close: function close() {
|
6900
|
-
return setOpen(false);
|
6901
|
-
}
|
6902
|
-
};
|
6903
|
-
}, [indented, minWidth]);
|
6767
|
+
const Menu$1 = externalProps => {
|
6768
|
+
const {
|
6769
|
+
children,
|
6770
|
+
trigger,
|
6771
|
+
...props
|
6772
|
+
} = externalProps;
|
6773
|
+
const [open, setOpen] = React.useState(false);
|
6774
|
+
const [indented, setIndented] = React.useState(false);
|
6775
|
+
const [minWidth, setMinWidth] = React.useState(undefined);
|
6776
|
+
const context = React.useMemo(() => ({
|
6777
|
+
indented,
|
6778
|
+
registerIndentation: () => setIndented(true),
|
6779
|
+
minWidth,
|
6780
|
+
setMinWidth: width => setMinWidth(width),
|
6781
|
+
close: () => setOpen(false)
|
6782
|
+
}), [indented, minWidth]);
|
6904
6783
|
return React.createElement(MenuContext.Provider, {
|
6905
6784
|
value: context
|
6906
6785
|
}, React.createElement(DropdownMenuPrimitive.Root, Object.assign({}, props, {
|
@@ -6918,44 +6797,39 @@ Menu$1.Separator = Separator;
|
|
6918
6797
|
Menu$1.Header = Header;
|
6919
6798
|
Menu$1.RadioGroup = RadioGroup$1;
|
6920
6799
|
|
6921
|
-
|
6922
|
-
var TreeviewItem = /*#__PURE__*/React__default.forwardRef(function TreeviewItem(props, ref) {
|
6800
|
+
const TreeviewItem = /*#__PURE__*/React__default.forwardRef(function TreeviewItem(props, ref) {
|
6923
6801
|
return React__default.createElement("a", Object.assign({}, props, {
|
6924
6802
|
ref: ref
|
6925
6803
|
}));
|
6926
6804
|
});
|
6927
|
-
|
6928
|
-
|
6929
|
-
|
6930
|
-
|
6931
|
-
|
6932
|
-
|
6933
|
-
|
6934
|
-
|
6935
|
-
|
6936
|
-
|
6937
|
-
|
6938
|
-
|
6939
|
-
setExpanded = _React$useState[1];
|
6940
|
-
|
6941
|
-
React__default.useEffect(function () {
|
6805
|
+
const TreeviewGroup = /*#__PURE__*/React__default.forwardRef(function TreeviewGroup(props, ref) {
|
6806
|
+
const {
|
6807
|
+
children,
|
6808
|
+
className: externalClassName,
|
6809
|
+
expanded: initialExpanded = false,
|
6810
|
+
title,
|
6811
|
+
fixed,
|
6812
|
+
onClick,
|
6813
|
+
...otherProps
|
6814
|
+
} = props;
|
6815
|
+
const [expanded, setExpanded] = React__default.useState(fixed || initialExpanded);
|
6816
|
+
React__default.useEffect(() => {
|
6942
6817
|
if (!fixed) {
|
6943
6818
|
setExpanded(fixed || initialExpanded);
|
6944
6819
|
}
|
6945
6820
|
}, [fixed, initialExpanded]);
|
6946
|
-
|
6821
|
+
const listClassName = cn('flex-col mb-0', {
|
6947
6822
|
flex: expanded,
|
6948
6823
|
hidden: !expanded
|
6949
6824
|
});
|
6950
|
-
|
6951
|
-
var itemProps = _extends({}, otherProps, {
|
6825
|
+
const itemProps = { ...otherProps,
|
6952
6826
|
'aria-expanded': expanded,
|
6953
6827
|
role: 'treeitem',
|
6954
6828
|
tabIndex: -1
|
6955
|
-
}
|
6829
|
+
};
|
6956
6830
|
|
6957
|
-
|
6958
|
-
|
6831
|
+
const handleClick = event => {
|
6832
|
+
const nextState = !expanded;
|
6959
6833
|
|
6960
6834
|
if (!fixed) {
|
6961
6835
|
setExpanded(nextState);
|
@@ -6966,7 +6840,7 @@ var TreeviewGroup = /*#__PURE__*/React__default.forwardRef(function TreeviewGrou
|
|
6966
6840
|
}
|
6967
6841
|
};
|
6968
6842
|
|
6969
|
-
|
6843
|
+
const className = typeof externalClassName === 'function' ? externalClassName(expanded) : externalClassName;
|
6970
6844
|
return React__default.createElement("div", Object.assign({}, itemProps, {
|
6971
6845
|
className: className,
|
6972
6846
|
ref: ref
|
@@ -6975,18 +6849,14 @@ var TreeviewGroup = /*#__PURE__*/React__default.forwardRef(function TreeviewGrou
|
|
6975
6849
|
}, typeof title === 'function' ? title(expanded) : title), React__default.createElement("ul", {
|
6976
6850
|
role: "group",
|
6977
6851
|
className: listClassName
|
6978
|
-
}, React__default.Children.toArray(children).filter(
|
6979
|
-
|
6980
|
-
|
6981
|
-
|
6982
|
-
|
6983
|
-
|
6984
|
-
}, React__default.cloneElement(item, {
|
6985
|
-
role: 'treeitem'
|
6986
|
-
}));
|
6987
|
-
})));
|
6852
|
+
}, React__default.Children.toArray(children).filter(item => !!item).map((item, i) => React__default.createElement("li", {
|
6853
|
+
key: i,
|
6854
|
+
role: "none"
|
6855
|
+
}, React__default.cloneElement(item, {
|
6856
|
+
role: 'treeitem'
|
6857
|
+
})))));
|
6988
6858
|
});
|
6989
|
-
|
6859
|
+
const Treeview = /*#__PURE__*/React__default.forwardRef(function Treeview(props, ref) {
|
6990
6860
|
return React__default.createElement("div", Object.assign({}, props, {
|
6991
6861
|
ref: ref,
|
6992
6862
|
role: "tree"
|
@@ -6995,26 +6865,23 @@ var Treeview = /*#__PURE__*/React__default.forwardRef(function Treeview(props, r
|
|
6995
6865
|
Treeview.Group = TreeviewGroup;
|
6996
6866
|
Treeview.Item = TreeviewItem;
|
6997
6867
|
|
6998
|
-
|
6999
|
-
|
7000
|
-
|
7001
|
-
setDraggedOver = _React$useState[1];
|
7002
|
-
|
7003
|
-
var handleDragEnter = React__default.useCallback(function (event) {
|
6868
|
+
const useDropTarget = onDrop => {
|
6869
|
+
const [isDraggedOver, setDraggedOver] = React__default.useState(false);
|
6870
|
+
const handleDragEnter = React__default.useCallback(event => {
|
7004
6871
|
event.preventDefault();
|
7005
6872
|
setDraggedOver(true);
|
7006
6873
|
}, []);
|
7007
|
-
|
6874
|
+
const handleDragLeave = React__default.useCallback(event => {
|
7008
6875
|
event.preventDefault();
|
7009
6876
|
|
7010
6877
|
if (event.target === event.currentTarget) {
|
7011
6878
|
setDraggedOver(false);
|
7012
6879
|
}
|
7013
6880
|
}, []);
|
7014
|
-
|
6881
|
+
const handleDragOver = React__default.useCallback(event => {
|
7015
6882
|
event.preventDefault();
|
7016
6883
|
}, []);
|
7017
|
-
|
6884
|
+
const handleDrop = React__default.useCallback(event => {
|
7018
6885
|
event.preventDefault();
|
7019
6886
|
event.persist();
|
7020
6887
|
setDraggedOver(false);
|
@@ -7023,7 +6890,7 @@ var useDropTarget = function useDropTarget(onDrop) {
|
|
7023
6890
|
onDrop(event);
|
7024
6891
|
}
|
7025
6892
|
}, [onDrop]);
|
7026
|
-
|
6893
|
+
const props = onDrop ? {
|
7027
6894
|
onDragEnter: handleDragEnter,
|
7028
6895
|
onDragLeave: handleDragLeave,
|
7029
6896
|
onDragOver: handleDragOver,
|
@@ -7032,25 +6899,20 @@ var useDropTarget = function useDropTarget(onDrop) {
|
|
7032
6899
|
return [isDraggedOver, props];
|
7033
6900
|
};
|
7034
6901
|
|
7035
|
-
|
7036
|
-
|
7037
|
-
|
7038
|
-
|
7039
|
-
|
7040
|
-
|
7041
|
-
|
7042
|
-
|
7043
|
-
|
7044
|
-
|
7045
|
-
|
7046
|
-
|
7047
|
-
|
7048
|
-
|
7049
|
-
isDraggedOver = _useDropTarget[0],
|
7050
|
-
dropTargetProps = _useDropTarget[1];
|
7051
|
-
|
7052
|
-
var isTreeitem = role === 'treeitem';
|
7053
|
-
var className = cn('yt-navigation__item cursor-pointer', {
|
6902
|
+
const Item$2 = /*#__PURE__*/React__default.forwardRef(function Item(props, ref) {
|
6903
|
+
const {
|
6904
|
+
active,
|
6905
|
+
children,
|
6906
|
+
onDrop,
|
6907
|
+
postfix,
|
6908
|
+
prefix,
|
6909
|
+
role,
|
6910
|
+
...otherProps
|
6911
|
+
} = props;
|
6912
|
+
const proxyRef = useProxiedRef(ref);
|
6913
|
+
const [isDraggedOver, dropTargetProps] = useDropTarget(onDrop);
|
6914
|
+
const isTreeitem = role === 'treeitem';
|
6915
|
+
const className = cn('yt-navigation__item cursor-pointer', {
|
7054
6916
|
'w-full mb-px py-1 px-3 flex items-center hover:bg-grey-dark': isTreeitem,
|
7055
6917
|
'bg-white w-full h-10 px-3 flex-shrink-0 flex items-center justify-between cursor-pointer': !isTreeitem,
|
7056
6918
|
'yt-navigation__item--active': active && !isDraggedOver,
|
@@ -7058,7 +6920,7 @@ var Item$2 = /*#__PURE__*/React__default.forwardRef(function Item(props, ref) {
|
|
7058
6920
|
'yt-navigation__item--dropping bg-blue': isDraggedOver
|
7059
6921
|
}, props.className);
|
7060
6922
|
|
7061
|
-
|
6923
|
+
const handleClick = event => {
|
7062
6924
|
if (event.target instanceof HTMLAnchorElement || event.target instanceof HTMLButtonElement) {
|
7063
6925
|
return;
|
7064
6926
|
}
|
@@ -7081,19 +6943,19 @@ var Item$2 = /*#__PURE__*/React__default.forwardRef(function Item(props, ref) {
|
|
7081
6943
|
className: "yt-navigation__item__postfix ml-1"
|
7082
6944
|
}, postfix));
|
7083
6945
|
});
|
7084
|
-
|
6946
|
+
const Panel = /*#__PURE__*/React__default.forwardRef(function Panel(props, ref) {
|
7085
6947
|
return React__default.createElement("div", Object.assign({}, props, {
|
7086
6948
|
className: cn('w-full bg-white p-3', props.className),
|
7087
6949
|
ref: ref
|
7088
6950
|
}));
|
7089
6951
|
});
|
7090
|
-
|
7091
|
-
|
6952
|
+
const MenuGroup = /*#__PURE__*/React__default.forwardRef(function MenuGroup(props, ref) {
|
6953
|
+
const className = cn('flex-shrink-0 space-y-1 outline-none', {
|
7092
6954
|
'bg-white pb-2': props.fixed
|
7093
6955
|
}, props.className);
|
7094
6956
|
|
7095
|
-
|
7096
|
-
|
6957
|
+
const title = expanded => {
|
6958
|
+
const className = cn('bg-white h-10 pl-3 pr-1 flex items-center justify-between w-full', {
|
7097
6959
|
'mb-1': expanded,
|
7098
6960
|
'cursor-pointer hover:text-blue': !props.fixed
|
7099
6961
|
});
|
@@ -7110,16 +6972,14 @@ var MenuGroup = /*#__PURE__*/React__default.forwardRef(function MenuGroup(props,
|
|
7110
6972
|
ref: ref
|
7111
6973
|
}));
|
7112
6974
|
});
|
7113
|
-
|
7114
|
-
|
7115
|
-
|
7116
|
-
React__default.Children.toArray(props.children).filter(
|
7117
|
-
return !!child;
|
7118
|
-
}).map(function (child) {
|
6975
|
+
const Menu$2 = /*#__PURE__*/React__default.forwardRef(function Menu(props, ref) {
|
6976
|
+
const scrollableAreas = React__default.useMemo(() => {
|
6977
|
+
const scrollableAreas = [];
|
6978
|
+
React__default.Children.toArray(props.children).filter(child => !!child).map(child => {
|
7119
6979
|
if (child.props.fixed) {
|
7120
6980
|
scrollableAreas.push(child);
|
7121
6981
|
} else {
|
7122
|
-
|
6982
|
+
const x = scrollableAreas[scrollableAreas.length - 1];
|
7123
6983
|
|
7124
6984
|
if (Array.isArray(x)) {
|
7125
6985
|
x.push(child);
|
@@ -7133,19 +6993,18 @@ var Menu$2 = /*#__PURE__*/React__default.forwardRef(function Menu(props, ref) {
|
|
7133
6993
|
return React__default.createElement(Treeview, Object.assign({}, props, {
|
7134
6994
|
className: cn('divide-grey-light flex flex-grow flex-col divide-y-2 overflow-y-auto', props.className),
|
7135
6995
|
ref: ref
|
7136
|
-
}), scrollableAreas.map(
|
7137
|
-
|
7138
|
-
|
7139
|
-
|
7140
|
-
}, area) : area;
|
7141
|
-
}));
|
6996
|
+
}), scrollableAreas.map((area, i) => Array.isArray(area) ? React__default.createElement("div", {
|
6997
|
+
className: "divide-grey-light flex h-0 flex-auto flex-shrink-0 flex-grow flex-col divide-y-2 overflow-y-auto",
|
6998
|
+
key: i
|
6999
|
+
}, area) : area));
|
7142
7000
|
});
|
7143
7001
|
Menu$2.Group = MenuGroup;
|
7144
|
-
|
7145
|
-
|
7146
|
-
|
7147
|
-
|
7148
|
-
|
7002
|
+
const Navigation = /*#__PURE__*/React__default.forwardRef(function Navigation(props, ref) {
|
7003
|
+
const {
|
7004
|
+
children,
|
7005
|
+
...otherProps
|
7006
|
+
} = props;
|
7007
|
+
const className = cn('h-full flex flex-col bg-grey-light divide-y-2 divide-grey-light', props.className);
|
7149
7008
|
return React__default.createElement("div", Object.assign({}, otherProps, {
|
7150
7009
|
className: className,
|
7151
7010
|
"data-taco": "navigation",
|
@@ -7401,54 +7260,52 @@ const useSelect = ({
|
|
7401
7260
|
};
|
7402
7261
|
};
|
7403
7262
|
|
7404
|
-
|
7405
|
-
|
7406
|
-
|
7407
|
-
|
7408
|
-
|
7409
|
-
|
7410
|
-
|
7411
|
-
|
7412
|
-
|
7413
|
-
|
7414
|
-
|
7415
|
-
|
7416
|
-
|
7417
|
-
|
7418
|
-
|
7419
|
-
|
7420
|
-
|
7421
|
-
|
7422
|
-
|
7423
|
-
var className = cn('inline-flex relative w-full', {
|
7263
|
+
const BaseSelect = /*#__PURE__*/React.forwardRef(function BaseSelect(props, ref) {
|
7264
|
+
const {
|
7265
|
+
autoFocus,
|
7266
|
+
className: externalClassName,
|
7267
|
+
highlighted,
|
7268
|
+
style,
|
7269
|
+
...otherProps
|
7270
|
+
} = props;
|
7271
|
+
const {
|
7272
|
+
button,
|
7273
|
+
listbox,
|
7274
|
+
popover,
|
7275
|
+
input,
|
7276
|
+
text,
|
7277
|
+
more = 0
|
7278
|
+
} = useSelect(otherProps, ref);
|
7279
|
+
const internalRef = React.useRef(null);
|
7280
|
+
const selectDimensions = useBoundingClientRectListener(internalRef);
|
7281
|
+
const className = cn('inline-flex relative w-full', {
|
7424
7282
|
'yt-select--readonly': props.readOnly
|
7425
7283
|
}, externalClassName);
|
7426
|
-
|
7284
|
+
const inputClassname = cn(getInputClasses(props), 'h-8 text-left pr-0', {
|
7427
7285
|
'border-blue': popover.open
|
7428
7286
|
});
|
7429
|
-
React.useEffect(
|
7287
|
+
React.useEffect(() => {
|
7430
7288
|
if (autoFocus && internalRef.current) {
|
7431
7289
|
internalRef.current.focus();
|
7432
7290
|
}
|
7433
7291
|
}, []);
|
7434
7292
|
|
7435
|
-
|
7293
|
+
const renderMultiSelection = () => {
|
7436
7294
|
return React.createElement(React.Fragment, null, React.createElement("span", {
|
7437
7295
|
className: "flex-grow truncate text-left"
|
7438
7296
|
}, text), more > 0 && React.createElement(Badge, {
|
7439
7297
|
className: "ml-2"
|
7440
|
-
},
|
7298
|
+
}, `+${more}`));
|
7441
7299
|
};
|
7442
7300
|
|
7443
|
-
|
7301
|
+
const commonListboxProps = { ...listbox,
|
7444
7302
|
className: 'w-auto',
|
7445
7303
|
invalid: undefined,
|
7446
7304
|
style: {
|
7447
7305
|
minWidth: selectDimensions === null || selectDimensions === void 0 ? void 0 : selectDimensions.width
|
7448
7306
|
},
|
7449
7307
|
tabIndex: popover.open ? 0 : -1
|
7450
|
-
}
|
7451
|
-
|
7308
|
+
};
|
7452
7309
|
return React.createElement("span", {
|
7453
7310
|
className: className,
|
7454
7311
|
"data-taco": "select",
|
@@ -7471,9 +7328,11 @@ var BaseSelect = /*#__PURE__*/React.forwardRef(function BaseSelect(props, ref) {
|
|
7471
7328
|
type: "text"
|
7472
7329
|
}))));
|
7473
7330
|
});
|
7474
|
-
|
7475
|
-
|
7476
|
-
|
7331
|
+
const Select = /*#__PURE__*/React.forwardRef(function Select(props, ref) {
|
7332
|
+
const {
|
7333
|
+
editable,
|
7334
|
+
...otherProps
|
7335
|
+
} = props;
|
7477
7336
|
|
7478
7337
|
if (editable) {
|
7479
7338
|
return React.createElement(Combobox, Object.assign({}, otherProps, {
|
@@ -7544,47 +7403,41 @@ const usePagination = (initialPageIndex = 0, initialPageSize = 10) => {
|
|
7544
7403
|
};
|
7545
7404
|
};
|
7546
7405
|
|
7547
|
-
|
7548
|
-
|
7549
|
-
|
7550
|
-
var minItemIndex = pageIndex * pageSize + 1;
|
7551
|
-
var maxItemIndex = (pageIndex + 1) * pageSize;
|
7406
|
+
const getShowingLabel = (length, pageIndex, pageSize, texts) => {
|
7407
|
+
const minItemIndex = pageIndex * pageSize + 1;
|
7408
|
+
const maxItemIndex = (pageIndex + 1) * pageSize;
|
7552
7409
|
return texts.pagination.showingXofYofTotal.replace('[X]', length === 0 ? '0' : String(minItemIndex)).replace('[Y]', String(maxItemIndex > length ? length : maxItemIndex)).replace('[total]', String(length));
|
7553
7410
|
};
|
7554
7411
|
|
7555
|
-
|
7556
|
-
|
7557
|
-
|
7558
|
-
|
7559
|
-
|
7560
|
-
|
7561
|
-
|
7562
|
-
|
7563
|
-
|
7564
|
-
|
7565
|
-
|
7566
|
-
|
7567
|
-
|
7568
|
-
|
7569
|
-
|
7570
|
-
|
7571
|
-
|
7572
|
-
|
7573
|
-
|
7574
|
-
texts = _useLocalization.texts;
|
7575
|
-
|
7576
|
-
var maxPageIndex = Math.ceil(length / pageSize) - 1;
|
7577
|
-
var showShortcutTexts = dangerouslyHijackGlobalKeyboardNavigation;
|
7412
|
+
const Pagination = /*#__PURE__*/React.forwardRef(function Pagination(props, ref) {
|
7413
|
+
const {
|
7414
|
+
length,
|
7415
|
+
pageIndex,
|
7416
|
+
pageSize,
|
7417
|
+
pageSizes = [10, 25, 50, 100, 500],
|
7418
|
+
setPageIndex,
|
7419
|
+
setPageSize,
|
7420
|
+
showPageControls = true,
|
7421
|
+
showPageNumbers = true,
|
7422
|
+
showPageSize = true,
|
7423
|
+
dangerouslyHijackGlobalKeyboardNavigation = false,
|
7424
|
+
...otherProps
|
7425
|
+
} = props;
|
7426
|
+
const {
|
7427
|
+
texts
|
7428
|
+
} = useLocalization();
|
7429
|
+
const maxPageIndex = Math.ceil(length / pageSize) - 1;
|
7430
|
+
const showShortcutTexts = dangerouslyHijackGlobalKeyboardNavigation;
|
7578
7431
|
usePaginationShortcuts({
|
7579
|
-
setPageIndex
|
7580
|
-
maxPageIndex
|
7581
|
-
pageIndex
|
7582
|
-
dangerouslyHijackGlobalKeyboardNavigation
|
7432
|
+
setPageIndex,
|
7433
|
+
maxPageIndex,
|
7434
|
+
pageIndex,
|
7435
|
+
dangerouslyHijackGlobalKeyboardNavigation
|
7583
7436
|
});
|
7584
|
-
|
7585
|
-
|
7586
|
-
|
7587
|
-
|
7437
|
+
const pageCount = Math.ceil(length / pageSize);
|
7438
|
+
const canPreviousPage = pageIndex > 0;
|
7439
|
+
const canNextPage = pageIndex < pageCount - 1;
|
7440
|
+
const className = cn('inline-flex relative justify-between items-center', props.className);
|
7588
7441
|
return React.createElement("div", Object.assign({}, otherProps, {
|
7589
7442
|
className: className,
|
7590
7443
|
"data-taco": "pagination",
|
@@ -7594,13 +7447,11 @@ var Pagination = /*#__PURE__*/React.forwardRef(function Pagination(props, ref) {
|
|
7594
7447
|
}, getShowingLabel(length, pageIndex, pageSize, texts), React.createElement(Select, {
|
7595
7448
|
"aria-label": texts.pagination.pageSize,
|
7596
7449
|
className: "ml-4 !w-20",
|
7597
|
-
data: pageSizes.map(
|
7598
|
-
|
7599
|
-
|
7600
|
-
|
7601
|
-
|
7602
|
-
}),
|
7603
|
-
onChange: function onChange(event) {
|
7450
|
+
data: pageSizes.map(pageSize => ({
|
7451
|
+
text: String(pageSize),
|
7452
|
+
value: pageSize
|
7453
|
+
})),
|
7454
|
+
onChange: event => {
|
7604
7455
|
setPageIndex(0);
|
7605
7456
|
setPageSize(Number(event.target.value));
|
7606
7457
|
},
|
@@ -7612,18 +7463,14 @@ var Pagination = /*#__PURE__*/React.forwardRef(function Pagination(props, ref) {
|
|
7612
7463
|
appearance: "default",
|
7613
7464
|
disabled: !canPreviousPage,
|
7614
7465
|
icon: "arrow-start",
|
7615
|
-
onClick:
|
7616
|
-
return setPageIndex(0);
|
7617
|
-
},
|
7466
|
+
onClick: () => setPageIndex(0),
|
7618
7467
|
"aria-label": showShortcutTexts ? texts.pagination.actions.firstPageWithShortcut : texts.pagination.actions.firstPage,
|
7619
7468
|
tooltip: showShortcutTexts ? texts.pagination.actions.firstPageWithShortcut : texts.pagination.actions.firstPage
|
7620
7469
|
}), React.createElement(IconButton, {
|
7621
7470
|
appearance: "default",
|
7622
7471
|
disabled: !canPreviousPage,
|
7623
7472
|
icon: "arrow-left",
|
7624
|
-
onClick:
|
7625
|
-
return setPageIndex(pageIndex - 1);
|
7626
|
-
},
|
7473
|
+
onClick: () => setPageIndex(pageIndex - 1),
|
7627
7474
|
"aria-label": showShortcutTexts ? texts.pagination.actions.previousPageWithShortcut : texts.pagination.actions.previousPage,
|
7628
7475
|
tooltip: showShortcutTexts ? texts.pagination.actions.previousPageWithShortcut : texts.pagination.actions.previousPage
|
7629
7476
|
}), showPageNumbers && pageCount > 0 && React.createElement(PageNumbers, {
|
@@ -7634,43 +7481,36 @@ var Pagination = /*#__PURE__*/React.forwardRef(function Pagination(props, ref) {
|
|
7634
7481
|
appearance: "default",
|
7635
7482
|
disabled: !canNextPage,
|
7636
7483
|
icon: "arrow-right",
|
7637
|
-
onClick:
|
7638
|
-
return setPageIndex(pageIndex + 1);
|
7639
|
-
},
|
7484
|
+
onClick: () => setPageIndex(pageIndex + 1),
|
7640
7485
|
"aria-label": showShortcutTexts ? texts.pagination.actions.nextPageWithShortcut : texts.pagination.actions.nextPage,
|
7641
7486
|
tooltip: showShortcutTexts ? texts.pagination.actions.nextPageWithShortcut : texts.pagination.actions.nextPage
|
7642
7487
|
}), React.createElement(IconButton, {
|
7643
7488
|
appearance: "default",
|
7644
7489
|
disabled: !canNextPage,
|
7645
7490
|
icon: "arrow-end",
|
7646
|
-
onClick:
|
7647
|
-
return setPageIndex(pageCount - 1);
|
7648
|
-
},
|
7491
|
+
onClick: () => setPageIndex(pageCount - 1),
|
7649
7492
|
"aria-label": showShortcutTexts ? texts.pagination.actions.lastPageWithShortcut : texts.pagination.actions.lastPage,
|
7650
7493
|
tooltip: showShortcutTexts ? texts.pagination.actions.lastPageWithShortcut : texts.pagination.actions.lastPage
|
7651
7494
|
})));
|
7652
7495
|
});
|
7653
7496
|
|
7654
|
-
|
7655
|
-
|
7656
|
-
|
7657
|
-
|
7658
|
-
|
7659
|
-
duration = _ref$duration === void 0 ? undefined : _ref$duration,
|
7660
|
-
props = _objectWithoutPropertiesLoose(_ref, _excluded$s);
|
7661
|
-
|
7662
|
-
var style;
|
7497
|
+
const Progress = ({
|
7498
|
+
duration = undefined,
|
7499
|
+
...props
|
7500
|
+
}) => {
|
7501
|
+
let style;
|
7663
7502
|
|
7664
7503
|
if (duration) {
|
7665
7504
|
style = {
|
7666
|
-
animationDuration: duration
|
7505
|
+
animationDuration: `${duration}ms`
|
7667
7506
|
};
|
7668
7507
|
}
|
7669
7508
|
|
7670
|
-
|
7671
|
-
|
7672
|
-
"w-full before:h-1 before:bg-grey-dark before:block before:animate-[progress-indeterminate_2s_cubic-bezier(0.4,0,0.2,1)_infinite] before:content-[' ']": !duration
|
7673
|
-
|
7509
|
+
const className = cn('bg-grey-light rounded block h-1 overflow-hidden w-full', props.className);
|
7510
|
+
const progressClassName = cn('yt-progress__bar block h-1', {
|
7511
|
+
"w-full before:h-1 before:bg-grey-dark before:block before:animate-[progress-indeterminate_2s_cubic-bezier(0.4,0,0.2,1)_infinite] before:content-[' ']": !duration,
|
7512
|
+
[`w-0 bg-grey-dark animate-[progress_linear]`]: duration
|
7513
|
+
});
|
7674
7514
|
return React__default.createElement("span", Object.assign({}, props, {
|
7675
7515
|
"data-taco": "progress",
|
7676
7516
|
className: className
|
@@ -9348,19 +9188,22 @@ Tabs.List = TabList;
|
|
9348
9188
|
Tabs.Trigger = TabTrigger;
|
9349
9189
|
Tabs.Content = TabContent;
|
9350
9190
|
|
9351
|
-
|
9352
|
-
|
9353
|
-
|
9354
|
-
|
9355
|
-
|
9356
|
-
|
9191
|
+
const Textarea = /*#__PURE__*/React.forwardRef(function Textarea(props, ref) {
|
9192
|
+
const {
|
9193
|
+
defaultValue: _,
|
9194
|
+
highlighted,
|
9195
|
+
invalid,
|
9196
|
+
onKeyDown,
|
9197
|
+
...otherProps
|
9198
|
+
} = props;
|
9199
|
+
const classNames = cn(getInputClasses(props), 'py-1 min-h-[75px] disabled:resize-none', props.className); // home and end keys only navigate to the start/end of textarea value if the textarea container does not scroll
|
9357
9200
|
// if it has scroll height then the browser reverts to native scrolling behaviour only
|
9358
9201
|
// so we manually override it to ensure _our_ desired behaviour remains intact
|
9359
9202
|
|
9360
|
-
|
9203
|
+
const handleKeyDown = event => {
|
9361
9204
|
if (event.key === 'Home' || event.key === 'End') {
|
9362
9205
|
event.preventDefault();
|
9363
|
-
|
9206
|
+
const position = event.key === 'End' ? event.currentTarget.value.length : 0;
|
9364
9207
|
event.currentTarget.setSelectionRange(position, position);
|
9365
9208
|
event.currentTarget.scrollTop = event.key === 'End' ? event.currentTarget.scrollHeight : 0;
|
9366
9209
|
}
|
@@ -9378,18 +9221,18 @@ var Textarea = /*#__PURE__*/React.forwardRef(function Textarea(props, ref) {
|
|
9378
9221
|
}));
|
9379
9222
|
});
|
9380
9223
|
|
9381
|
-
|
9382
|
-
|
9383
|
-
|
9384
|
-
|
9385
|
-
|
9386
|
-
|
9387
|
-
|
9224
|
+
const Switch = /*#__PURE__*/React.forwardRef(function Switch(props, ref) {
|
9225
|
+
const {
|
9226
|
+
label,
|
9227
|
+
onChange,
|
9228
|
+
...otherProps
|
9229
|
+
} = props;
|
9230
|
+
const className = cn('group h-5 w-9 flex rounded-full inline-flex', {
|
9388
9231
|
'mr-2': !!label,
|
9389
9232
|
'bg-grey-darker hover:bg-grey-dark aria-checked:bg-blue aria-checked:hover:bg-blue-light focus:yt-focus': !props.disabled,
|
9390
9233
|
'bg-grey-light cursor-not-allowed aria-checked:bg-blue-light': props.disabled
|
9391
9234
|
}, props.className);
|
9392
|
-
|
9235
|
+
const element = React.createElement(PrimitiveSwitch.Root, Object.assign({}, otherProps, {
|
9393
9236
|
className: className,
|
9394
9237
|
onCheckedChange: onChange,
|
9395
9238
|
ref: ref
|
@@ -9398,7 +9241,7 @@ var Switch = /*#__PURE__*/React.forwardRef(function Switch(props, ref) {
|
|
9398
9241
|
}));
|
9399
9242
|
|
9400
9243
|
if (label) {
|
9401
|
-
|
9244
|
+
const labelClassName = cn('flex items-center cursor-pointer', {
|
9402
9245
|
'cursor-not-allowed text-grey-dark': props.disabled
|
9403
9246
|
});
|
9404
9247
|
return React.createElement("label", {
|
@@ -9409,23 +9252,22 @@ var Switch = /*#__PURE__*/React.forwardRef(function Switch(props, ref) {
|
|
9409
9252
|
return element;
|
9410
9253
|
});
|
9411
9254
|
|
9412
|
-
|
9413
|
-
|
9414
|
-
|
9415
|
-
|
9416
|
-
|
9417
|
-
|
9418
|
-
|
9419
|
-
|
9420
|
-
|
9421
|
-
|
9422
|
-
|
9423
|
-
|
9424
|
-
|
9425
|
-
|
9426
|
-
|
9427
|
-
|
9428
|
-
var onWindowKeyDown = function onWindowKeyDown(event) {
|
9255
|
+
const Tooltip$1 = ({
|
9256
|
+
continuous,
|
9257
|
+
index,
|
9258
|
+
isLastStep,
|
9259
|
+
step,
|
9260
|
+
backProps,
|
9261
|
+
primaryProps,
|
9262
|
+
skipProps,
|
9263
|
+
tooltipProps,
|
9264
|
+
size,
|
9265
|
+
locale,
|
9266
|
+
disableTourSkipOnEsc
|
9267
|
+
}) => {
|
9268
|
+
const skipButtonRef = React.useRef(null);
|
9269
|
+
React.useEffect(() => {
|
9270
|
+
const onWindowKeyDown = event => {
|
9429
9271
|
if (!disableTourSkipOnEsc) {
|
9430
9272
|
if (event.keyCode === keycode('esc') && skipButtonRef.current !== null) {
|
9431
9273
|
event.preventDefault();
|
@@ -9436,7 +9278,7 @@ var Tooltip$1 = function Tooltip(_ref) {
|
|
9436
9278
|
};
|
9437
9279
|
|
9438
9280
|
window.addEventListener('keydown', onWindowKeyDown);
|
9439
|
-
return
|
9281
|
+
return () => {
|
9440
9282
|
window.removeEventListener('keydown', onWindowKeyDown);
|
9441
9283
|
};
|
9442
9284
|
}, []);
|
@@ -9455,31 +9297,31 @@ var Tooltip$1 = function Tooltip(_ref) {
|
|
9455
9297
|
appearance: "discrete"
|
9456
9298
|
}), locale.back), React.createElement(Button$1, Object.assign({}, primaryProps, {
|
9457
9299
|
appearance: "primary"
|
9458
|
-
}), continuous ? isLastStep ? locale.last
|
9300
|
+
}), continuous ? isLastStep ? `${locale.last} (${index + 1}/${size})` : `${locale.next} (${index + 1}/${size})` : locale.close)));
|
9459
9301
|
}; // eslint-disable-next-line @typescript-eslint/no-unused-vars
|
9460
9302
|
|
9461
9303
|
|
9462
|
-
|
9463
|
-
|
9464
|
-
|
9465
|
-
|
9466
|
-
|
9467
|
-
|
9468
|
-
|
9469
|
-
|
9470
|
-
|
9471
|
-
|
9472
|
-
|
9473
|
-
|
9474
|
-
|
9475
|
-
|
9476
|
-
|
9477
|
-
|
9478
|
-
|
9479
|
-
|
9480
|
-
|
9481
|
-
return React.Children.map(props.children,
|
9482
|
-
|
9304
|
+
const TourStep = _props => null;
|
9305
|
+
const Tour = props => {
|
9306
|
+
const {
|
9307
|
+
texts: {
|
9308
|
+
tour
|
9309
|
+
}
|
9310
|
+
} = useLocalization();
|
9311
|
+
const {
|
9312
|
+
autoStart: run,
|
9313
|
+
onComplete,
|
9314
|
+
onClose,
|
9315
|
+
onReady,
|
9316
|
+
spotlightClicks,
|
9317
|
+
disableCloseOnEsc: disableTourSkipOnEsc,
|
9318
|
+
disableScrollParentFix = false,
|
9319
|
+
scrollOffset,
|
9320
|
+
...rest
|
9321
|
+
} = props;
|
9322
|
+
const steps = React.useMemo(() => {
|
9323
|
+
return React.Children.map(props.children, child => {
|
9324
|
+
const step = {
|
9483
9325
|
disableBeacon: !child.props.showBeacon,
|
9484
9326
|
target: child.props.selector,
|
9485
9327
|
placement: child.props.position,
|
@@ -9489,12 +9331,10 @@ var Tour = function Tour(props) {
|
|
9489
9331
|
return step;
|
9490
9332
|
});
|
9491
9333
|
}, [props.children]);
|
9492
|
-
|
9334
|
+
const getStep = React.useCallback(selector => {
|
9493
9335
|
var _props$children$find;
|
9494
9336
|
|
9495
|
-
return (_props$children$find = props.children.find(
|
9496
|
-
return child.props.selector === selector;
|
9497
|
-
})) === null || _props$children$find === void 0 ? void 0 : _props$children$find.props;
|
9337
|
+
return (_props$children$find = props.children.find(child => child.props.selector === selector)) === null || _props$children$find === void 0 ? void 0 : _props$children$find.props;
|
9498
9338
|
}, [props.children]);
|
9499
9339
|
|
9500
9340
|
function callback(state) {
|
@@ -9524,12 +9364,10 @@ var Tour = function Tour(props) {
|
|
9524
9364
|
floaterProps: {
|
9525
9365
|
disableAnimation: true
|
9526
9366
|
},
|
9527
|
-
tooltipComponent:
|
9528
|
-
|
9529
|
-
|
9530
|
-
|
9531
|
-
}));
|
9532
|
-
},
|
9367
|
+
tooltipComponent: tooltipProps => React.createElement(Tooltip$1, Object.assign({}, tooltipProps, {
|
9368
|
+
locale: tour,
|
9369
|
+
disableTourSkipOnEsc: disableTourSkipOnEsc
|
9370
|
+
})),
|
9533
9371
|
locale: tour,
|
9534
9372
|
spotlightPadding: 8,
|
9535
9373
|
spotlightClicks: spotlightClicks,
|
@@ -9571,12 +9409,12 @@ var useOnClickOutside = function useOnClickOutside(ref, callback) {
|
|
9571
9409
|
}, [ref, callback]);
|
9572
9410
|
};
|
9573
9411
|
|
9574
|
-
|
9575
|
-
|
9576
|
-
|
9577
|
-
|
9578
|
-
|
9579
|
-
|
9412
|
+
const Content$6 = /*#__PURE__*/React.forwardRef(function CardContent(externalProps, ref) {
|
9413
|
+
const {
|
9414
|
+
noPadding,
|
9415
|
+
...props
|
9416
|
+
} = externalProps;
|
9417
|
+
const className = cn('flex-grow overflow-auto', {
|
9580
9418
|
'mx-4 mb-4': !noPadding
|
9581
9419
|
}, props.className);
|
9582
9420
|
return React.createElement("div", Object.assign({}, props, {
|
@@ -9584,11 +9422,13 @@ var Content$6 = /*#__PURE__*/React.forwardRef(function CardContent(externalProps
|
|
9584
9422
|
ref: ref
|
9585
9423
|
}));
|
9586
9424
|
});
|
9587
|
-
|
9588
|
-
|
9589
|
-
|
9590
|
-
|
9591
|
-
|
9425
|
+
const Card = /*#__PURE__*/React.forwardRef(function Card(props, ref) {
|
9426
|
+
const {
|
9427
|
+
title,
|
9428
|
+
menu,
|
9429
|
+
children
|
9430
|
+
} = props;
|
9431
|
+
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);
|
9592
9432
|
return React.createElement("div", {
|
9593
9433
|
className: className,
|
9594
9434
|
"data-taco": "card",
|
@@ -9665,13 +9505,11 @@ exports.parseFromISOString = parseFromISOString;
|
|
9665
9505
|
exports.removeChildTableRow = removeChildTableRow;
|
9666
9506
|
exports.setByRowIndexPath = setByRowIndexPath;
|
9667
9507
|
exports.useBoundingClientRectListener = useBoundingClientRectListener;
|
9668
|
-
exports.useDropTarget = useDropTarget;
|
9669
9508
|
exports.useListKeyboardNavigation = useListKeyboardNavigation;
|
9670
9509
|
exports.useListScrollTo = useListScrollTo;
|
9671
9510
|
exports.useLocalization = useLocalization;
|
9672
9511
|
exports.useOnClickOutside = useOnClickOutside;
|
9673
9512
|
exports.usePagination = usePagination;
|
9674
|
-
exports.useProxiedRef = useProxiedRef;
|
9675
9513
|
exports.useRadioGroup = useRadioGroup;
|
9676
9514
|
exports.useTableRowCreation = useTableRowCreation;
|
9677
9515
|
exports.useTaco = useTaco;
|