@economic/taco 1.1.8 → 1.1.9-alpha.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Tour/Tour.d.ts +2 -0
- package/dist/esm/components/Badge/Badge.js +14 -14
- package/dist/esm/components/Badge/Badge.js.map +1 -1
- package/dist/esm/components/Calendar/Calendar.js +56 -71
- package/dist/esm/components/Calendar/Calendar.js.map +1 -1
- package/dist/esm/components/Card/Card.js +15 -12
- package/dist/esm/components/Card/Card.js.map +1 -1
- package/dist/esm/components/Checkbox/Checkbox.js +15 -18
- package/dist/esm/components/Checkbox/Checkbox.js.map +1 -1
- package/dist/esm/components/Combobox/Combobox.js +23 -25
- package/dist/esm/components/Combobox/Combobox.js.map +1 -1
- package/dist/esm/components/Datepicker/Datepicker.js +48 -52
- package/dist/esm/components/Datepicker/Datepicker.js.map +1 -1
- package/dist/esm/components/Dialog/Dialog.js +39 -58
- package/dist/esm/components/Dialog/Dialog.js.map +1 -1
- package/dist/esm/components/Field/Field.js +10 -12
- package/dist/esm/components/Field/Field.js.map +1 -1
- package/dist/esm/components/Form/Form.js +6 -8
- package/dist/esm/components/Form/Form.js.map +1 -1
- package/dist/esm/components/Group/Group.js +6 -8
- package/dist/esm/components/Group/Group.js.map +1 -1
- package/dist/esm/components/Hanger/Hanger.js +27 -35
- package/dist/esm/components/Hanger/Hanger.js.map +1 -1
- package/dist/esm/components/HoverCard/HoverCard.js +8 -9
- package/dist/esm/components/HoverCard/HoverCard.js.map +1 -1
- package/dist/esm/components/Icon/Icon.js +7 -8
- package/dist/esm/components/Icon/Icon.js.map +1 -1
- package/dist/esm/components/IconButton/IconButton.js +9 -11
- package/dist/esm/components/IconButton/IconButton.js.map +1 -1
- package/dist/esm/components/Input/Input.js +25 -25
- package/dist/esm/components/Input/Input.js.map +1 -1
- package/dist/esm/components/Listbox/Listbox.js +24 -25
- package/dist/esm/components/Listbox/Listbox.js.map +1 -1
- package/dist/esm/components/Menu/Menu.js +16 -34
- package/dist/esm/components/Menu/Menu.js.map +1 -1
- package/dist/esm/components/Navigation/Navigation.js +35 -44
- package/dist/esm/components/Navigation/Navigation.js.map +1 -1
- package/dist/esm/components/Pagination/Pagination.js +39 -56
- package/dist/esm/components/Pagination/Pagination.js.map +1 -1
- package/dist/esm/components/Popover/Popover.js +29 -34
- package/dist/esm/components/Popover/Popover.js.map +1 -1
- package/dist/esm/components/Progress/Progress.js +11 -15
- package/dist/esm/components/Progress/Progress.js.map +1 -1
- package/dist/esm/components/Provider/Provider.js +13 -18
- package/dist/esm/components/Provider/Provider.js.map +1 -1
- package/dist/esm/components/RadioGroup/RadioGroup.js +45 -57
- package/dist/esm/components/RadioGroup/RadioGroup.js.map +1 -1
- package/dist/esm/components/SearchInput/SearchInput.js +12 -11
- package/dist/esm/components/SearchInput/SearchInput.js.map +1 -1
- package/dist/esm/components/Select/Select.js +30 -31
- package/dist/esm/components/Select/Select.js.map +1 -1
- package/dist/esm/components/Spinner/Spinner.js +12 -19
- package/dist/esm/components/Spinner/Spinner.js.map +1 -1
- package/dist/esm/components/Switch/Switch.js +9 -10
- package/dist/esm/components/Switch/Switch.js.map +1 -1
- package/dist/esm/components/Tabs/Tabs.js +25 -27
- package/dist/esm/components/Tabs/Tabs.js.map +1 -1
- package/dist/esm/components/Textarea/Textarea.js +11 -9
- package/dist/esm/components/Textarea/Textarea.js.map +1 -1
- package/dist/esm/components/Toast/Toaster.js +88 -118
- package/dist/esm/components/Toast/Toaster.js.map +1 -1
- package/dist/esm/components/Tooltip/Tooltip.js +7 -8
- package/dist/esm/components/Tooltip/Tooltip.js.map +1 -1
- package/dist/esm/components/Tour/Tour.js +46 -50
- package/dist/esm/components/Tour/Tour.js.map +1 -1
- package/dist/esm/components/Treeview/Treeview.js +26 -36
- package/dist/esm/components/Treeview/Treeview.js.map +1 -1
- package/dist/esm/components/VisuallyHidden/VisuallyHidden.js +1 -1
- package/dist/esm/components/VisuallyHidden/VisuallyHidden.js.map +1 -1
- package/dist/esm/index.js +2 -0
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/utils/hooks/useDropTarget.js +10 -7
- 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 +2 -0
- package/dist/taco.cjs.development.js +802 -951
- 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 +130 -131
- package/tailwind.config.js +9 -0
- package/types.json +7 -1
@@ -3188,17 +3188,17 @@ const icons = {
|
|
3188
3188
|
zoom: Zoom
|
3189
3189
|
};
|
3190
3190
|
|
3191
|
-
|
3192
|
-
var Icon = /*#__PURE__*/React__default.forwardRef(function Icon(props, ref) {
|
3191
|
+
const Icon = /*#__PURE__*/React__default.forwardRef(function Icon(props, ref) {
|
3193
3192
|
var _props$className;
|
3194
3193
|
|
3195
|
-
|
3196
|
-
|
3197
|
-
|
3198
|
-
|
3194
|
+
const {
|
3195
|
+
name,
|
3196
|
+
...otherProps
|
3197
|
+
} = props;
|
3198
|
+
const Component = icons[name];
|
3199
3199
|
/* 24x24 _at the base body font_ - must be em so that they scale with font size - tailwind spacing uses rem */
|
3200
3200
|
|
3201
|
-
|
3201
|
+
const className = cn('inline-flex h-[1.715em] w-[1.715em] flex-shrink-0', props.className, {
|
3202
3202
|
'p-[3px]': (_props$className = props.className) === null || _props$className === void 0 ? void 0 : _props$className.includes('rounded-full')
|
3203
3203
|
});
|
3204
3204
|
return Component ? React__default.createElement(Component, Object.assign({}, otherProps, {
|
@@ -3210,7 +3210,7 @@ var Icon = /*#__PURE__*/React__default.forwardRef(function Icon(props, ref) {
|
|
3210
3210
|
})) : null;
|
3211
3211
|
});
|
3212
3212
|
|
3213
|
-
var _excluded
|
3213
|
+
var _excluded = ["id"],
|
3214
3214
|
_excluded2 = ["id", "defaultId", "onChange", "as"];
|
3215
3215
|
var AccordionContext = /*#__PURE__*/React__default.createContext({
|
3216
3216
|
as: 'h2'
|
@@ -3248,7 +3248,7 @@ var Content = /*#__PURE__*/React__default.forwardRef(function AccordionContent(p
|
|
3248
3248
|
|
3249
3249
|
var Item = function Item(props) {
|
3250
3250
|
var id = props.id,
|
3251
|
-
otherProps = _objectWithoutPropertiesLoose(props, _excluded
|
3251
|
+
otherProps = _objectWithoutPropertiesLoose(props, _excluded);
|
3252
3252
|
|
3253
3253
|
return React__default.createElement(AccordionPrimitive.Item, Object.assign({}, otherProps, {
|
3254
3254
|
value: id
|
@@ -3303,7 +3303,7 @@ var Backdrop = /*#__PURE__*/React.forwardRef(function Backdrop(props, ref) {
|
|
3303
3303
|
}));
|
3304
3304
|
});
|
3305
3305
|
|
3306
|
-
|
3306
|
+
const VisuallyHidden = /*#__PURE__*/React.forwardRef(function VisuallyHidden(props, ref) {
|
3307
3307
|
return React.createElement("span", Object.assign({}, props, {
|
3308
3308
|
className: "sr-only",
|
3309
3309
|
ref: ref
|
@@ -3349,19 +3349,20 @@ const getOutlineClasses = state => {
|
|
3349
3349
|
}
|
3350
3350
|
};
|
3351
3351
|
|
3352
|
-
|
3353
|
-
|
3354
|
-
|
3355
|
-
|
3356
|
-
|
3357
|
-
|
3358
|
-
|
3359
|
-
|
3360
|
-
|
3361
|
-
|
3362
|
-
|
3363
|
-
|
3364
|
-
|
3352
|
+
const Badge = /*#__PURE__*/React.forwardRef(function Badge(props, ref) {
|
3353
|
+
const {
|
3354
|
+
children,
|
3355
|
+
compact = false,
|
3356
|
+
outline = false,
|
3357
|
+
state,
|
3358
|
+
...otherProps
|
3359
|
+
} = props;
|
3360
|
+
const className = cn('rounded-full border font-bold text-xs uppercase overflow-hidden whitespace-nowrap inline-flex items-center justify-center h-5', {
|
3361
|
+
[getOutlineClasses(state)]: outline,
|
3362
|
+
[`border-transparent ${getStateClasses(state)}`]: !outline,
|
3363
|
+
'h-2 w-2 min-w-0': compact,
|
3364
|
+
'h-5 py-0 px-1.5': !compact
|
3365
|
+
}, props.className);
|
3365
3366
|
return React.createElement("span", Object.assign({}, otherProps, {
|
3366
3367
|
"aria-atomic": "true",
|
3367
3368
|
"aria-live": "polite",
|
@@ -3421,13 +3422,13 @@ const Button = /*#__PURE__*/React.forwardRef(function Button(props, ref) {
|
|
3421
3422
|
}), React.Children.count(props.children) > 1 ? React.Children.map(props.children, child => typeof child === 'string' ? React.createElement("span", null, child) : child) : props.children);
|
3422
3423
|
});
|
3423
3424
|
|
3424
|
-
|
3425
|
-
|
3426
|
-
|
3427
|
-
|
3428
|
-
|
3429
|
-
|
3430
|
-
|
3425
|
+
const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(props, ref) {
|
3426
|
+
const {
|
3427
|
+
title,
|
3428
|
+
children,
|
3429
|
+
placement,
|
3430
|
+
...otherProps
|
3431
|
+
} = props;
|
3431
3432
|
return React.createElement(TooltipPrimitive.Root, {
|
3432
3433
|
delayDuration: 50
|
3433
3434
|
}, React.createElement(TooltipPrimitive.Trigger, {
|
@@ -3519,14 +3520,13 @@ const createButton = (props, className, ref) => {
|
|
3519
3520
|
return button;
|
3520
3521
|
};
|
3521
3522
|
|
3522
|
-
|
3523
|
-
|
3524
|
-
|
3525
|
-
|
3526
|
-
|
3527
|
-
|
3528
|
-
|
3529
|
-
var className = cn('w-8', getButtonClasses(), getAppearanceClasses(otherProps.appearance, true), {
|
3523
|
+
const IconButton = /*#__PURE__*/React.forwardRef(function IconButton(props, ref) {
|
3524
|
+
const {
|
3525
|
+
icon,
|
3526
|
+
rounded = false,
|
3527
|
+
...otherProps
|
3528
|
+
} = props;
|
3529
|
+
const className = cn('w-8', getButtonClasses(), getAppearanceClasses(otherProps.appearance, true), {
|
3530
3530
|
'rounded-full': rounded,
|
3531
3531
|
rounded: !rounded,
|
3532
3532
|
'cursor-not-allowed opacity-50': props.disabled,
|
@@ -3537,13 +3537,13 @@ var IconButton = /*#__PURE__*/React.forwardRef(function IconButton(props, ref) {
|
|
3537
3537
|
return null;
|
3538
3538
|
}
|
3539
3539
|
|
3540
|
-
return createButton(
|
3540
|
+
return createButton({ ...otherProps,
|
3541
3541
|
children: React.createElement(Icon, {
|
3542
3542
|
name: icon,
|
3543
3543
|
className: "m-0 p-0"
|
3544
3544
|
}),
|
3545
3545
|
'data-taco': 'icon-button'
|
3546
|
-
}
|
3546
|
+
}, className, ref);
|
3547
3547
|
});
|
3548
3548
|
|
3549
3549
|
var Banner = /*#__PURE__*/React.forwardRef(function Banner(props, ref) {
|
@@ -3563,10 +3563,10 @@ var Banner = /*#__PURE__*/React.forwardRef(function Banner(props, ref) {
|
|
3563
3563
|
}) : null);
|
3564
3564
|
});
|
3565
3565
|
|
3566
|
-
var _excluded$
|
3566
|
+
var _excluded$1 = ["fluid"];
|
3567
3567
|
var Button$1 = /*#__PURE__*/React.forwardRef(function Button(props, ref) {
|
3568
3568
|
var fluid = props.fluid,
|
3569
|
-
otherProps = _objectWithoutPropertiesLoose(props, _excluded$
|
3569
|
+
otherProps = _objectWithoutPropertiesLoose(props, _excluded$1);
|
3570
3570
|
|
3571
3571
|
var className = cn(getButtonClasses(), getAppearanceClasses(otherProps.appearance), 'rounded px-3', {
|
3572
3572
|
'cursor-not-allowed opacity-50': props.disabled,
|
@@ -3637,27 +3637,21 @@ function useTimer(duration = 0, callback) {
|
|
3637
3637
|
};
|
3638
3638
|
}
|
3639
3639
|
|
3640
|
-
|
3641
|
-
|
3642
|
-
|
3643
|
-
|
3644
|
-
|
3645
|
-
|
3646
|
-
|
3647
|
-
|
3648
|
-
|
3649
|
-
setVisibility = _React$useState[1];
|
3650
|
-
|
3651
|
-
React__default.useEffect(function () {
|
3652
|
-
var timeout;
|
3640
|
+
const Spinner$1 = /*#__PURE__*/React__default.forwardRef(function Spinner(props, ref) {
|
3641
|
+
const {
|
3642
|
+
delay = 500,
|
3643
|
+
label,
|
3644
|
+
...otherProps
|
3645
|
+
} = props;
|
3646
|
+
const [visible, setVisibility] = React__default.useState(!delay);
|
3647
|
+
React__default.useEffect(() => {
|
3648
|
+
let timeout;
|
3653
3649
|
|
3654
3650
|
if (delay) {
|
3655
|
-
timeout = window.setTimeout(
|
3656
|
-
return setVisibility(true);
|
3657
|
-
}, delay);
|
3651
|
+
timeout = window.setTimeout(() => setVisibility(true), delay);
|
3658
3652
|
}
|
3659
3653
|
|
3660
|
-
return
|
3654
|
+
return () => {
|
3661
3655
|
if (timeout) {
|
3662
3656
|
clearTimeout(timeout);
|
3663
3657
|
}
|
@@ -3668,7 +3662,7 @@ var Spinner$1 = /*#__PURE__*/React__default.forwardRef(function Spinner(props, r
|
|
3668
3662
|
return null;
|
3669
3663
|
}
|
3670
3664
|
|
3671
|
-
|
3665
|
+
const className = cn('inline-flex flex-col relative items-center', otherProps.className);
|
3672
3666
|
return React__default.createElement("div", Object.assign({}, otherProps, {
|
3673
3667
|
className: className,
|
3674
3668
|
"data-taco": "spinner",
|
@@ -3794,62 +3788,49 @@ const Toast = ({
|
|
3794
3788
|
}));
|
3795
3789
|
};
|
3796
3790
|
|
3797
|
-
|
3798
|
-
|
3799
|
-
var ToastContext = /*#__PURE__*/React.createContext({});
|
3791
|
+
const DEFAULT_AUTO_CLOSE_TIMEOUT = 7500;
|
3792
|
+
const ToastContext = /*#__PURE__*/React.createContext({});
|
3800
3793
|
|
3801
|
-
|
3802
|
-
|
3803
|
-
|
3804
|
-
return JSON.stringify(toast.content) === JSON.stringify(content);
|
3805
|
-
});
|
3794
|
+
const insertToastWithoutDuplicates = (currentToasts, id, content, options, close) => {
|
3795
|
+
const nextToasts = [...currentToasts];
|
3796
|
+
const existingToastIndex = currentToasts.findIndex(toast => JSON.stringify(toast.content) === JSON.stringify(content));
|
3806
3797
|
|
3807
3798
|
if (existingToastIndex > -1) {
|
3808
3799
|
nextToasts[existingToastIndex].lastDuplicateId = id;
|
3809
3800
|
nextToasts[existingToastIndex].lastUpdated = Date.now();
|
3810
3801
|
} else {
|
3811
3802
|
nextToasts.push({
|
3812
|
-
id
|
3803
|
+
id,
|
3813
3804
|
content: typeof content === 'function' ? content(close) : content,
|
3814
|
-
options
|
3805
|
+
options
|
3815
3806
|
});
|
3816
3807
|
}
|
3817
3808
|
|
3818
3809
|
return nextToasts;
|
3819
3810
|
};
|
3820
3811
|
|
3821
|
-
|
3822
|
-
|
3823
|
-
|
3824
|
-
|
3825
|
-
|
3826
|
-
toasts = _React$useState[0],
|
3827
|
-
setToasts = _React$useState[1];
|
3812
|
+
const ToastProvider = ({
|
3813
|
+
children,
|
3814
|
+
...props
|
3815
|
+
}) => {
|
3816
|
+
const [toasts, setToasts] = React.useState([]);
|
3828
3817
|
|
3829
|
-
|
3830
|
-
setToasts(
|
3831
|
-
return currentToasts.filter(function (toast) {
|
3832
|
-
return toast.id !== id;
|
3833
|
-
});
|
3834
|
-
});
|
3818
|
+
const handleClose = id => {
|
3819
|
+
setToasts(currentToasts => currentToasts.filter(toast => toast.id !== id));
|
3835
3820
|
}; // memoize (useCallback) this function,
|
3836
3821
|
// it is the value of the context provider and we don't want it to trigger state tree re-renders on provider children
|
3837
3822
|
|
3838
3823
|
|
3839
|
-
|
3840
|
-
|
3824
|
+
const toaster = React.useCallback((content, options) => {
|
3825
|
+
const id = uuid.v4();
|
3841
3826
|
|
3842
|
-
|
3843
|
-
return handleClose(id);
|
3844
|
-
};
|
3827
|
+
const close = () => handleClose(id);
|
3845
3828
|
|
3846
|
-
setToasts(
|
3847
|
-
return insertToastWithoutDuplicates(currentToasts, id, content, options, close);
|
3848
|
-
});
|
3829
|
+
setToasts(currentToasts => insertToastWithoutDuplicates(currentToasts, id, content, options, close));
|
3849
3830
|
|
3850
|
-
|
3851
|
-
setToasts(
|
3852
|
-
|
3831
|
+
const update = (content, options) => {
|
3832
|
+
setToasts(currentToasts => {
|
3833
|
+
const nextToasts = currentToasts.filter(toast => {
|
3853
3834
|
if (toast.lastDuplicateId) {
|
3854
3835
|
return toast.lastDuplicateId !== id;
|
3855
3836
|
}
|
@@ -3860,80 +3841,70 @@ var ToastProvider = function ToastProvider(_ref) {
|
|
3860
3841
|
});
|
3861
3842
|
};
|
3862
3843
|
|
3863
|
-
|
3864
|
-
update(content,
|
3865
|
-
autoClose: DEFAULT_AUTO_CLOSE_TIMEOUT
|
3866
|
-
|
3844
|
+
const success = (content, options) => {
|
3845
|
+
update(content, {
|
3846
|
+
autoClose: DEFAULT_AUTO_CLOSE_TIMEOUT,
|
3847
|
+
...options,
|
3867
3848
|
type: 'success'
|
3868
|
-
})
|
3849
|
+
});
|
3869
3850
|
};
|
3870
3851
|
|
3871
|
-
|
3872
|
-
update(content,
|
3852
|
+
const error = (content, options) => {
|
3853
|
+
update(content, { ...options,
|
3873
3854
|
type: 'error'
|
3874
|
-
})
|
3855
|
+
});
|
3875
3856
|
};
|
3876
3857
|
|
3877
|
-
|
3878
|
-
update(content,
|
3858
|
+
const warning = (content, options) => {
|
3859
|
+
update(content, { ...options,
|
3879
3860
|
type: 'warning'
|
3880
|
-
})
|
3861
|
+
});
|
3881
3862
|
};
|
3882
3863
|
|
3883
|
-
|
3884
|
-
update(content,
|
3864
|
+
const information = (content, options) => {
|
3865
|
+
update(content, { ...options,
|
3885
3866
|
type: 'information'
|
3886
|
-
})
|
3867
|
+
});
|
3887
3868
|
};
|
3888
3869
|
|
3889
|
-
|
3890
|
-
update(content,
|
3870
|
+
const loading = (content, options) => {
|
3871
|
+
update(content, { ...options,
|
3891
3872
|
type: 'loading'
|
3892
|
-
})
|
3873
|
+
});
|
3893
3874
|
};
|
3894
3875
|
|
3895
3876
|
return {
|
3896
|
-
success
|
3897
|
-
error
|
3898
|
-
warning
|
3899
|
-
information
|
3900
|
-
loading
|
3901
|
-
close
|
3877
|
+
success,
|
3878
|
+
error,
|
3879
|
+
warning,
|
3880
|
+
information,
|
3881
|
+
loading,
|
3882
|
+
close
|
3902
3883
|
};
|
3903
3884
|
}, []); // no need to rebind these every render, do them once in an effect
|
3904
3885
|
|
3905
|
-
React.useEffect(
|
3906
|
-
toaster.success =
|
3907
|
-
|
3908
|
-
|
3909
|
-
|
3910
|
-
|
3911
|
-
}));
|
3912
|
-
};
|
3886
|
+
React.useEffect(() => {
|
3887
|
+
toaster.success = (content, options) => toaster(content, {
|
3888
|
+
autoClose: DEFAULT_AUTO_CLOSE_TIMEOUT,
|
3889
|
+
...options,
|
3890
|
+
type: 'success'
|
3891
|
+
});
|
3913
3892
|
|
3914
|
-
toaster.error =
|
3915
|
-
|
3916
|
-
|
3917
|
-
}));
|
3918
|
-
};
|
3893
|
+
toaster.error = (content, options) => toaster(content, { ...options,
|
3894
|
+
type: 'error'
|
3895
|
+
});
|
3919
3896
|
|
3920
|
-
toaster.warning =
|
3921
|
-
|
3922
|
-
|
3923
|
-
}));
|
3924
|
-
};
|
3897
|
+
toaster.warning = (content, options) => toaster(content, { ...options,
|
3898
|
+
type: 'warning'
|
3899
|
+
});
|
3925
3900
|
|
3926
|
-
toaster.information =
|
3927
|
-
|
3928
|
-
|
3929
|
-
}));
|
3930
|
-
};
|
3901
|
+
toaster.information = (content, options) => toaster(content, { ...options,
|
3902
|
+
type: 'information'
|
3903
|
+
});
|
3931
3904
|
|
3932
|
-
toaster.loading =
|
3933
|
-
|
3934
|
-
|
3935
|
-
}));
|
3936
|
-
};
|
3905
|
+
toaster.loading = (content, options) => toaster(content, { ...options,
|
3906
|
+
type: 'loading'
|
3907
|
+
});
|
3937
3908
|
}, []);
|
3938
3909
|
return React.createElement(ToastContext.Provider, Object.assign({}, props, {
|
3939
3910
|
value: toaster
|
@@ -3943,43 +3914,37 @@ var ToastProvider = function ToastProvider(_ref) {
|
|
3943
3914
|
role: "log"
|
3944
3915
|
}, React.createElement(framerMotion.AnimatePresence, {
|
3945
3916
|
initial: false
|
3946
|
-
}, toasts.map(
|
3947
|
-
|
3948
|
-
|
3917
|
+
}, toasts.map(toast => React.createElement(framerMotion.motion.div, {
|
3918
|
+
key: toast.id,
|
3919
|
+
transition: {
|
3920
|
+
type: 'spring',
|
3921
|
+
damping: 20,
|
3922
|
+
stiffness: 300
|
3923
|
+
},
|
3924
|
+
initial: {
|
3925
|
+
opacity: 0,
|
3926
|
+
y: 10,
|
3927
|
+
scale: 0.5
|
3928
|
+
},
|
3929
|
+
animate: {
|
3930
|
+
opacity: 1,
|
3931
|
+
y: 0,
|
3932
|
+
scale: 1
|
3933
|
+
},
|
3934
|
+
exit: {
|
3935
|
+
opacity: 0,
|
3936
|
+
scale: 0.5,
|
3949
3937
|
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
|
-
}
|
3938
|
+
duration: 0.2
|
3970
3939
|
}
|
3971
|
-
}
|
3972
|
-
|
3973
|
-
|
3974
|
-
|
3975
|
-
})));
|
3976
|
-
}))));
|
3977
|
-
};
|
3978
|
-
var useToast = function useToast() {
|
3979
|
-
return React.useContext(ToastContext);
|
3940
|
+
}
|
3941
|
+
}, React.createElement(Toast, Object.assign({}, toast, {
|
3942
|
+
onClose: () => handleClose(toast.id)
|
3943
|
+
})))))));
|
3980
3944
|
};
|
3945
|
+
const useToast = () => React.useContext(ToastContext);
|
3981
3946
|
|
3982
|
-
|
3947
|
+
const defaultLocalisationTexts = {
|
3983
3948
|
calendar: {
|
3984
3949
|
months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
|
3985
3950
|
weekdaysShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
|
@@ -4054,67 +4019,62 @@ var defaultLocalisationTexts = {
|
|
4054
4019
|
inputLabel: 'Search...'
|
4055
4020
|
}
|
4056
4021
|
};
|
4057
|
-
|
4022
|
+
const defaultLocalizationContext = {
|
4058
4023
|
locale: 'en-GB',
|
4059
4024
|
texts: defaultLocalisationTexts,
|
4060
4025
|
formatting: {
|
4061
4026
|
date: 'dd.mm.yy'
|
4062
4027
|
}
|
4063
4028
|
};
|
4064
|
-
|
4029
|
+
const Context = /*#__PURE__*/React.createContext({
|
4065
4030
|
localization: defaultLocalizationContext
|
4066
4031
|
});
|
4067
|
-
|
4068
|
-
|
4069
|
-
|
4070
|
-
|
4071
|
-
|
4072
|
-
|
4073
|
-
|
4074
|
-
|
4075
|
-
}, [localization]);
|
4032
|
+
const Provider = props => {
|
4033
|
+
const {
|
4034
|
+
children,
|
4035
|
+
localization = defaultLocalizationContext
|
4036
|
+
} = props;
|
4037
|
+
const value = React.useMemo(() => ({
|
4038
|
+
localization
|
4039
|
+
}), [localization]);
|
4076
4040
|
return React.createElement(Context.Provider, {
|
4077
4041
|
value: value
|
4078
4042
|
}, React.createElement(ToastProvider, null, children));
|
4079
4043
|
};
|
4080
|
-
|
4081
|
-
|
4082
|
-
};
|
4083
|
-
var useLocalization = function useLocalization() {
|
4084
|
-
return useTaco().localization;
|
4085
|
-
};
|
4044
|
+
const useTaco = () => React.useContext(Context);
|
4045
|
+
const useLocalization = () => useTaco().localization;
|
4086
4046
|
|
4087
|
-
|
4047
|
+
const renderDay = (day, modifiers) => modifiers.disabled ? React.createElement("span", {
|
4048
|
+
className: "dot"
|
4049
|
+
}) : day.getDate();
|
4088
4050
|
|
4089
|
-
|
4090
|
-
|
4091
|
-
className: "dot"
|
4092
|
-
}) : day.getDate();
|
4093
|
-
};
|
4094
|
-
|
4095
|
-
var thisYear = /*#__PURE__*/new Date().getFullYear();
|
4096
|
-
var years = [];
|
4051
|
+
const thisYear = /*#__PURE__*/new Date().getFullYear();
|
4052
|
+
const years = [];
|
4097
4053
|
|
4098
|
-
for (
|
4054
|
+
for (let i = thisYear - 10; i <= thisYear + 10; i += 1) {
|
4099
4055
|
years.push(i);
|
4100
4056
|
}
|
4101
4057
|
|
4102
|
-
|
4103
|
-
|
4104
|
-
|
4105
|
-
|
4106
|
-
|
4107
|
-
|
4108
|
-
|
4109
|
-
|
4110
|
-
|
4111
|
-
|
4112
|
-
|
4058
|
+
const Navbar = /*#__PURE__*/React.memo(({
|
4059
|
+
onMonthChange,
|
4060
|
+
onNextClick,
|
4061
|
+
onPreviousClick,
|
4062
|
+
value = new Date()
|
4063
|
+
}) => {
|
4064
|
+
const {
|
4065
|
+
texts: {
|
4066
|
+
calendar: {
|
4067
|
+
actions,
|
4068
|
+
months
|
4069
|
+
}
|
4070
|
+
}
|
4071
|
+
} = useLocalization();
|
4113
4072
|
|
4114
|
-
|
4115
|
-
|
4116
|
-
|
4117
|
-
|
4073
|
+
const handleChange = function handleChange(event) {
|
4074
|
+
const {
|
4075
|
+
year,
|
4076
|
+
month
|
4077
|
+
} = event.target.form;
|
4118
4078
|
onMonthChange(new Date(year.value, month.value));
|
4119
4079
|
};
|
4120
4080
|
|
@@ -4127,59 +4087,49 @@ var Navbar = /*#__PURE__*/React.memo(function (_ref) {
|
|
4127
4087
|
name: "month",
|
4128
4088
|
onChange: handleChange,
|
4129
4089
|
value: value.getMonth()
|
4130
|
-
}, months.map(
|
4131
|
-
|
4132
|
-
|
4133
|
-
|
4134
|
-
}, month);
|
4135
|
-
})), React.createElement("select", {
|
4090
|
+
}, months.map((month, i) => React.createElement("option", {
|
4091
|
+
key: month,
|
4092
|
+
value: i
|
4093
|
+
}, month))), React.createElement("select", {
|
4136
4094
|
className: "h-8 px-2",
|
4137
4095
|
name: "year",
|
4138
4096
|
onChange: handleChange,
|
4139
4097
|
value: value.getFullYear()
|
4140
|
-
}, years.map(
|
4141
|
-
|
4142
|
-
|
4143
|
-
|
4144
|
-
}, String(year));
|
4145
|
-
}))), React.createElement("div", null, React.createElement(IconButton, {
|
4098
|
+
}, years.map(year => React.createElement("option", {
|
4099
|
+
key: year,
|
4100
|
+
value: year
|
4101
|
+
}, String(year))))), React.createElement("div", null, React.createElement(IconButton, {
|
4146
4102
|
appearance: "discrete",
|
4147
4103
|
icon: "chevron-left",
|
4148
4104
|
"aria-label": actions.previousMonth,
|
4149
|
-
onClick:
|
4150
|
-
return onPreviousClick();
|
4151
|
-
},
|
4105
|
+
onClick: () => onPreviousClick(),
|
4152
4106
|
rounded: true
|
4153
4107
|
}), React.createElement(IconButton, {
|
4154
4108
|
appearance: "discrete",
|
4155
4109
|
icon: "chevron-right",
|
4156
4110
|
"aria-label": actions.nextMonth,
|
4157
|
-
onClick:
|
4158
|
-
return onNextClick();
|
4159
|
-
},
|
4111
|
+
onClick: () => onNextClick(),
|
4160
4112
|
rounded: true
|
4161
4113
|
})));
|
4162
4114
|
});
|
4163
|
-
|
4164
|
-
|
4165
|
-
|
4166
|
-
|
4167
|
-
|
4168
|
-
|
4169
|
-
|
4170
|
-
|
4171
|
-
|
4172
|
-
|
4173
|
-
|
4174
|
-
|
4175
|
-
|
4176
|
-
React.useEffect(function () {
|
4115
|
+
const Calendar$1 = /*#__PURE__*/React.forwardRef(function Calendar(props, ref) {
|
4116
|
+
const {
|
4117
|
+
onChange: handleChange,
|
4118
|
+
value,
|
4119
|
+
...otherProps
|
4120
|
+
} = props;
|
4121
|
+
const {
|
4122
|
+
locale,
|
4123
|
+
texts
|
4124
|
+
} = useLocalization();
|
4125
|
+
const [visibleMonth, setVisibleMonth] = React.useState(value !== null && value !== void 0 ? value : new Date());
|
4126
|
+
React.useEffect(() => {
|
4177
4127
|
if (visibleMonth !== value) {
|
4178
4128
|
setVisibleMonth(value !== null && value !== void 0 ? value : new Date());
|
4179
4129
|
}
|
4180
4130
|
}, [value]);
|
4181
4131
|
|
4182
|
-
|
4132
|
+
const handleDayClick = (date, modifiers, event) => {
|
4183
4133
|
if (modifiers.outside || modifiers.disabled) {
|
4184
4134
|
return;
|
4185
4135
|
}
|
@@ -4187,8 +4137,8 @@ var Calendar$1 = /*#__PURE__*/React.forwardRef(function Calendar(props, ref) {
|
|
4187
4137
|
handleChange(date, event);
|
4188
4138
|
};
|
4189
4139
|
|
4190
|
-
|
4191
|
-
|
4140
|
+
const handleCalendarClickToday = () => {
|
4141
|
+
const today = new Date(); // set to midday to avoid UTC offset causing dates to be mismatched server side
|
4192
4142
|
|
4193
4143
|
today.setHours(12);
|
4194
4144
|
today.setMinutes(0);
|
@@ -4196,7 +4146,7 @@ var Calendar$1 = /*#__PURE__*/React.forwardRef(function Calendar(props, ref) {
|
|
4196
4146
|
handleChange(today);
|
4197
4147
|
};
|
4198
4148
|
|
4199
|
-
|
4149
|
+
const className = cn('flex bg-white text-xs p-4', otherProps.className);
|
4200
4150
|
return React.createElement("div", {
|
4201
4151
|
"data-taco": "calendar"
|
4202
4152
|
}, React.createElement(ReactDayPicker, Object.assign({}, otherProps, {
|
@@ -4207,18 +4157,14 @@ var Calendar$1 = /*#__PURE__*/React.forwardRef(function Calendar(props, ref) {
|
|
4207
4157
|
firstDayOfWeek: 1,
|
4208
4158
|
months: texts.calendar.months,
|
4209
4159
|
weekdaysShort: texts.calendar.weekdaysShort,
|
4210
|
-
navbarElement:
|
4211
|
-
|
4212
|
-
|
4213
|
-
|
4214
|
-
}));
|
4215
|
-
},
|
4160
|
+
navbarElement: navProps => React.createElement(Navbar, Object.assign({}, navProps, {
|
4161
|
+
onMonthChange: setVisibleMonth,
|
4162
|
+
value: visibleMonth
|
4163
|
+
})),
|
4216
4164
|
onDayClick: handleDayClick,
|
4217
4165
|
onMonthChange: setVisibleMonth,
|
4218
4166
|
onTodayButtonClick: handleCalendarClickToday,
|
4219
|
-
captionElement:
|
4220
|
-
return null;
|
4221
|
-
},
|
4167
|
+
captionElement: () => null,
|
4222
4168
|
todayButton: texts.calendar.actions.today,
|
4223
4169
|
showOutsideDays: true,
|
4224
4170
|
renderDay: renderDay,
|
@@ -4227,32 +4173,30 @@ var Calendar$1 = /*#__PURE__*/React.forwardRef(function Calendar(props, ref) {
|
|
4227
4173
|
})));
|
4228
4174
|
});
|
4229
4175
|
|
4230
|
-
|
4231
|
-
|
4232
|
-
|
4233
|
-
|
4234
|
-
|
4235
|
-
|
4236
|
-
|
4237
|
-
|
4238
|
-
|
4239
|
-
|
4240
|
-
|
4176
|
+
const Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(props, ref) {
|
4177
|
+
const {
|
4178
|
+
checked,
|
4179
|
+
highlighted,
|
4180
|
+
indeterminate,
|
4181
|
+
invalid,
|
4182
|
+
label,
|
4183
|
+
onChange,
|
4184
|
+
...otherProps
|
4185
|
+
} = props;
|
4186
|
+
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
4187
|
props.className, {
|
4242
4188
|
'border-grey-dark text-blue hover:text-blue-light focus:border-blue focus:hover:border-blue-light': !props.disabled && !invalid,
|
4243
4189
|
'border-grey text-blue-light cursor-not-allowed': props.disabled,
|
4244
4190
|
'bg-[rgba(255,255,0,0.2)] disabled:bg-[rgba(255,255,0,0.075)]': highlighted,
|
4245
4191
|
'border-red text-red hover:text-red-light hover:border-red-light focus:border-red focus:hover:border-red-light': invalid && !props.disabled
|
4246
4192
|
});
|
4247
|
-
|
4193
|
+
let handleChange;
|
4248
4194
|
|
4249
4195
|
if (onChange) {
|
4250
|
-
handleChange =
|
4251
|
-
return onChange(checked === 'indeterminate' ? false : checked);
|
4252
|
-
};
|
4196
|
+
handleChange = checked => onChange(checked === 'indeterminate' ? false : checked);
|
4253
4197
|
}
|
4254
4198
|
|
4255
|
-
|
4199
|
+
const element = React.createElement(CheckboxPrimitive.Root, Object.assign({}, otherProps, {
|
4256
4200
|
"data-taco": "checkbox",
|
4257
4201
|
checked: indeterminate ? 'indeterminate' : checked,
|
4258
4202
|
className: className,
|
@@ -4266,7 +4210,7 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(props, ref) {
|
|
4266
4210
|
})));
|
4267
4211
|
|
4268
4212
|
if (label) {
|
4269
|
-
|
4213
|
+
const labelClassName = cn('flex items-center cursor-pointer gap-2', {
|
4270
4214
|
'cursor-not-allowed text-grey-dark': props.disabled
|
4271
4215
|
}, props.className);
|
4272
4216
|
return React.createElement("label", {
|
@@ -4277,9 +4221,9 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(props, ref) {
|
|
4277
4221
|
return element;
|
4278
4222
|
});
|
4279
4223
|
|
4280
|
-
|
4281
|
-
|
4282
|
-
React.useEffect(()
|
4224
|
+
var useProxiedRef = function useProxiedRef(ref) {
|
4225
|
+
var internalRef = React.useRef(null);
|
4226
|
+
React.useEffect(function () {
|
4283
4227
|
if (ref) {
|
4284
4228
|
if (typeof ref === 'function') {
|
4285
4229
|
ref(internalRef.current);
|
@@ -4309,21 +4253,22 @@ const getButtonStateClasses = invalid => {
|
|
4309
4253
|
return '!border-grey-dark focus:!border-blue-light peer-focus:!border-blue-light peer-focus:peer-active:!border-blue-dark';
|
4310
4254
|
};
|
4311
4255
|
|
4312
|
-
|
4313
|
-
|
4314
|
-
|
4315
|
-
|
4316
|
-
|
4317
|
-
|
4318
|
-
|
4319
|
-
|
4320
|
-
|
4321
|
-
|
4322
|
-
|
4323
|
-
|
4256
|
+
const Input = /*#__PURE__*/React.forwardRef(function Input(props, ref) {
|
4257
|
+
const {
|
4258
|
+
button,
|
4259
|
+
icon,
|
4260
|
+
highlighted,
|
4261
|
+
invalid,
|
4262
|
+
onKeyDown,
|
4263
|
+
autoFocus,
|
4264
|
+
...otherProps
|
4265
|
+
} = props;
|
4266
|
+
const inputRef = useProxiedRef(ref);
|
4267
|
+
const hasContainer = button || icon;
|
4268
|
+
const className = cn(getInputClasses(props), 'min-h-[theme(spacing.8)] pointer-events-all', {
|
4324
4269
|
'pr-8': !!hasContainer
|
4325
4270
|
}, !hasContainer && otherProps.className);
|
4326
|
-
React.useEffect(
|
4271
|
+
React.useEffect(() => {
|
4327
4272
|
if (autoFocus && inputRef.current) {
|
4328
4273
|
inputRef.current.focus();
|
4329
4274
|
}
|
@@ -4331,10 +4276,10 @@ var Input = /*#__PURE__*/React.forwardRef(function Input(props, ref) {
|
|
4331
4276
|
// if it has scroll height then the browser reverts to native scrolling behaviour only
|
4332
4277
|
// so we manually override it to ensure _our_ desired behaviour remains intact
|
4333
4278
|
|
4334
|
-
|
4279
|
+
const handleKeyDown = event => {
|
4335
4280
|
if (!event.shiftKey && (event.key === 'Home' || event.key === 'End')) {
|
4336
4281
|
event.preventDefault();
|
4337
|
-
|
4282
|
+
const position = event.key === 'End' ? event.currentTarget.value.length : 0;
|
4338
4283
|
event.currentTarget.setSelectionRange(position, position);
|
4339
4284
|
}
|
4340
4285
|
|
@@ -4343,7 +4288,7 @@ var Input = /*#__PURE__*/React.forwardRef(function Input(props, ref) {
|
|
4343
4288
|
}
|
4344
4289
|
};
|
4345
4290
|
|
4346
|
-
|
4291
|
+
const input = React.createElement("input", Object.assign({}, otherProps, {
|
4347
4292
|
className: className,
|
4348
4293
|
"data-taco": "input",
|
4349
4294
|
onKeyDown: handleKeyDown,
|
@@ -4351,19 +4296,19 @@ var Input = /*#__PURE__*/React.forwardRef(function Input(props, ref) {
|
|
4351
4296
|
}));
|
4352
4297
|
|
4353
4298
|
if (hasContainer) {
|
4354
|
-
|
4299
|
+
let extra;
|
4355
4300
|
|
4356
4301
|
if (button) {
|
4357
|
-
|
4358
|
-
|
4359
|
-
|
4360
|
-
|
4302
|
+
const disabled = button.props.disabled || otherProps.disabled;
|
4303
|
+
const buttonClassName = cn('items-center flex justify-center border absolute rounded-l-none rounded-r right-0 h-full focus:rounded focus:outline-none', {
|
4304
|
+
[getButtonStateClasses(invalid)]: !props.disabled
|
4305
|
+
}, button.props.className);
|
4361
4306
|
extra = React.cloneElement(button, {
|
4362
4307
|
className: buttonClassName,
|
4363
|
-
disabled
|
4308
|
+
disabled
|
4364
4309
|
});
|
4365
4310
|
} else if (icon) {
|
4366
|
-
|
4311
|
+
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
4312
|
'text-grey-dark': props.disabled,
|
4368
4313
|
'text-grey-darkest': !props.disabled
|
4369
4314
|
});
|
@@ -4375,7 +4320,7 @@ var Input = /*#__PURE__*/React.forwardRef(function Input(props, ref) {
|
|
4375
4320
|
});
|
4376
4321
|
}
|
4377
4322
|
|
4378
|
-
|
4323
|
+
const containerClassName = cn('bg-white inline-flex relative rounded w-full', otherProps.className);
|
4379
4324
|
return React.createElement("div", {
|
4380
4325
|
className: containerClassName,
|
4381
4326
|
"data-taco": "input-container"
|
@@ -5146,27 +5091,26 @@ var useBoundingClientRectListener = function useBoundingClientRectListener(ref)
|
|
5146
5091
|
return dimensions;
|
5147
5092
|
};
|
5148
5093
|
|
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', {
|
5094
|
+
const Combobox = /*#__PURE__*/React.forwardRef(function Combobox(props, ref) {
|
5095
|
+
const {
|
5096
|
+
className: externalClassName,
|
5097
|
+
dialog,
|
5098
|
+
style,
|
5099
|
+
...otherProps
|
5100
|
+
} = props;
|
5101
|
+
const {
|
5102
|
+
combobox,
|
5103
|
+
button,
|
5104
|
+
input,
|
5105
|
+
popover,
|
5106
|
+
list
|
5107
|
+
} = useCombobox(otherProps, ref);
|
5108
|
+
const internalRef = React.useRef(null);
|
5109
|
+
const {
|
5110
|
+
texts
|
5111
|
+
} = useLocalization();
|
5112
|
+
const selectDimensions = useBoundingClientRectListener(internalRef);
|
5113
|
+
const className = cn('inline-flex relative', {
|
5170
5114
|
'yt-combobox--inline': props.inline
|
5171
5115
|
}, externalClassName);
|
5172
5116
|
return React.createElement("span", {
|
@@ -5185,7 +5129,7 @@ var Combobox = /*#__PURE__*/React.forwardRef(function Combobox(props, ref) {
|
|
5185
5129
|
appearance: "discrete",
|
5186
5130
|
className: "!border-l-0 focus:!border-none focus:!shadow-none active:!border-none",
|
5187
5131
|
icon: popover.open ? 'chevron-up' : 'chevron-down',
|
5188
|
-
onClick:
|
5132
|
+
onClick: () => {
|
5189
5133
|
var _input$ref$current;
|
5190
5134
|
|
5191
5135
|
popover.onOpenChange(true);
|
@@ -5196,7 +5140,7 @@ var Combobox = /*#__PURE__*/React.forwardRef(function Combobox(props, ref) {
|
|
5196
5140
|
icon: "list-search",
|
5197
5141
|
disabled: props.readOnly || props.disabled,
|
5198
5142
|
dialog: dialog,
|
5199
|
-
onFocus:
|
5143
|
+
onFocus: event => {
|
5200
5144
|
var _input$ref$current2;
|
5201
5145
|
|
5202
5146
|
// Prevents the default focus behaviour of showing the tooltip, on parent tooltip element
|
@@ -5209,7 +5153,7 @@ var Combobox = /*#__PURE__*/React.forwardRef(function Combobox(props, ref) {
|
|
5209
5153
|
}) : undefined
|
5210
5154
|
})))), React.createElement(PopoverPrimitive.Content, {
|
5211
5155
|
align: "start",
|
5212
|
-
onOpenAutoFocus:
|
5156
|
+
onOpenAutoFocus: event => {
|
5213
5157
|
event.preventDefault();
|
5214
5158
|
},
|
5215
5159
|
sideOffset: 4
|
@@ -5443,19 +5387,18 @@ function mergeRefs(refs) {
|
|
5443
5387
|
};
|
5444
5388
|
}
|
5445
5389
|
|
5446
|
-
|
5447
|
-
var PopoverContext = /*#__PURE__*/React.createContext({
|
5390
|
+
const PopoverContext = /*#__PURE__*/React.createContext({
|
5448
5391
|
props: {},
|
5449
5392
|
ref: null
|
5450
5393
|
});
|
5451
|
-
|
5394
|
+
const Trigger$1 = /*#__PURE__*/React.forwardRef(function PopoverTrigger(props, ref) {
|
5452
5395
|
var _props$children;
|
5453
5396
|
|
5454
|
-
|
5455
|
-
|
5397
|
+
const context = React.useContext(PopoverContext);
|
5398
|
+
let children = props.children;
|
5456
5399
|
|
5457
5400
|
if (React.isValidElement(props.children) && typeof ((_props$children = props.children) === null || _props$children === void 0 ? void 0 : _props$children.type) === 'function') {
|
5458
|
-
console.warn(
|
5401
|
+
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
5402
|
children = React.createElement("span", null, props.children);
|
5460
5403
|
}
|
5461
5404
|
|
@@ -5465,22 +5408,22 @@ var Trigger$1 = /*#__PURE__*/React.forwardRef(function PopoverTrigger(props, ref
|
|
5465
5408
|
asChild: true
|
5466
5409
|
}));
|
5467
5410
|
});
|
5468
|
-
|
5469
|
-
|
5470
|
-
|
5471
|
-
|
5472
|
-
|
5411
|
+
const RenderPropWrapper = /*#__PURE__*/React.forwardRef(function RenderPropWrapper({
|
5412
|
+
children,
|
5413
|
+
onClick
|
5414
|
+
}, ref) {
|
5415
|
+
const close = () => {
|
5473
5416
|
onClick(new CustomEvent('hide'));
|
5474
5417
|
};
|
5475
5418
|
|
5476
5419
|
return children({
|
5477
|
-
close
|
5478
|
-
ref
|
5420
|
+
close,
|
5421
|
+
ref
|
5479
5422
|
});
|
5480
5423
|
});
|
5481
|
-
|
5482
|
-
|
5483
|
-
|
5424
|
+
const Content$1 = /*#__PURE__*/React.forwardRef(function PopoverContent(props, ref) {
|
5425
|
+
const className = cn('bg-white focus:border-blue-light', props.className);
|
5426
|
+
let output;
|
5484
5427
|
|
5485
5428
|
if (typeof props.children === 'function') {
|
5486
5429
|
output = React.createElement(PopoverPrimitive.Close, {
|
@@ -5498,23 +5441,20 @@ var Content$1 = /*#__PURE__*/React.forwardRef(function PopoverContent(props, ref
|
|
5498
5441
|
className: "text-white"
|
5499
5442
|
}));
|
5500
5443
|
});
|
5501
|
-
|
5502
|
-
|
5503
|
-
|
5504
|
-
|
5505
|
-
|
5506
|
-
|
5507
|
-
|
5508
|
-
|
5509
|
-
|
5510
|
-
|
5511
|
-
|
5512
|
-
|
5513
|
-
|
5514
|
-
|
5515
|
-
ref: ref
|
5516
|
-
};
|
5517
|
-
}, [otherProps]);
|
5444
|
+
const Close$1 = /*#__PURE__*/React.forwardRef((props, ref) => React.createElement(PopoverPrimitive.Close, Object.assign({}, props, {
|
5445
|
+
ref: ref,
|
5446
|
+
asChild: true
|
5447
|
+
})));
|
5448
|
+
const Popover = /*#__PURE__*/React.forwardRef(function Popover(props, ref) {
|
5449
|
+
const {
|
5450
|
+
children,
|
5451
|
+
trigger,
|
5452
|
+
...otherProps
|
5453
|
+
} = props;
|
5454
|
+
const context = React.useMemo(() => ({
|
5455
|
+
props: otherProps,
|
5456
|
+
ref
|
5457
|
+
}), [otherProps]);
|
5518
5458
|
return React.createElement(PopoverContext.Provider, {
|
5519
5459
|
value: context
|
5520
5460
|
}, React.createElement(PopoverPrimitive.Root, null, trigger && React.createElement(Trigger$1, null, trigger), children));
|
@@ -5523,23 +5463,23 @@ Popover.Trigger = Trigger$1;
|
|
5523
5463
|
Popover.Content = Content$1;
|
5524
5464
|
Popover.Close = Close$1;
|
5525
5465
|
|
5526
|
-
|
5527
|
-
|
5528
|
-
|
5529
|
-
|
5530
|
-
|
5531
|
-
|
5532
|
-
|
5533
|
-
|
5534
|
-
|
5535
|
-
|
5536
|
-
|
5537
|
-
|
5538
|
-
|
5539
|
-
|
5540
|
-
|
5541
|
-
|
5542
|
-
|
5466
|
+
const Datepicker = /*#__PURE__*/React.forwardRef(function Datepicker(props, ref) {
|
5467
|
+
const {
|
5468
|
+
className: externalClassName,
|
5469
|
+
onReset: handleReset,
|
5470
|
+
style,
|
5471
|
+
shortcuts,
|
5472
|
+
shortcutsText,
|
5473
|
+
...otherProps
|
5474
|
+
} = props;
|
5475
|
+
const {
|
5476
|
+
calendar,
|
5477
|
+
input
|
5478
|
+
} = useDatepicker(otherProps, ref);
|
5479
|
+
const {
|
5480
|
+
texts
|
5481
|
+
} = useLocalization();
|
5482
|
+
const className = cn('inline-flex w-full text-black font-normal', externalClassName);
|
5543
5483
|
return React.createElement("span", {
|
5544
5484
|
className: className,
|
5545
5485
|
"data-taco": "datepicker",
|
@@ -5549,40 +5489,37 @@ var Datepicker = /*#__PURE__*/React.forwardRef(function Datepicker(props, ref) {
|
|
5549
5489
|
"aria-label": texts.datepicker.expand,
|
5550
5490
|
disabled: input.disabled || input.readOnly,
|
5551
5491
|
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
|
-
}))
|
5492
|
+
})), React.createElement(Popover.Content, null, ({
|
5493
|
+
close
|
5494
|
+
}) => React.createElement("div", {
|
5495
|
+
className: "-m-3 flex"
|
5496
|
+
}, React.createElement(Calendar$1, Object.assign({}, calendar, {
|
5497
|
+
onChange: (date, event) => {
|
5498
|
+
calendar.onChange(date, event);
|
5499
|
+
close();
|
5500
|
+
},
|
5501
|
+
tabIndex: -1
|
5502
|
+
})), shortcuts && React.createElement("div", {
|
5503
|
+
className: "border-grey-dark flex flex-col border-l"
|
5504
|
+
}, React.createElement("span", {
|
5505
|
+
className: "m-4 mb-3 flex h-8 w-32 items-center text-xs font-semibold"
|
5506
|
+
}, shortcutsText !== null && shortcutsText !== void 0 ? shortcutsText : texts.datepicker.shortcuts), React.createElement("ul", null, shortcuts.map((shortcut, i) => React.createElement("li", {
|
5507
|
+
key: i
|
5508
|
+
}, React.createElement("button", {
|
5509
|
+
className: "hover:bg-grey-light flex w-full items-start px-4 py-1 text-xs",
|
5510
|
+
onClick: event => {
|
5511
|
+
event.persist();
|
5512
|
+
shortcut.onClick(event);
|
5513
|
+
close();
|
5514
|
+
}
|
5515
|
+
}, shortcut.text)))), handleReset && React.createElement("button", {
|
5516
|
+
className: "text-blue hover:text-blue-light my-4 mx-auto mt-auto inline-flex cursor-pointer border-none bg-transparent text-xs",
|
5517
|
+
onClick: event => {
|
5518
|
+
event.persist();
|
5519
|
+
handleReset(event);
|
5520
|
+
close();
|
5521
|
+
}
|
5522
|
+
}, texts.datepicker.clear)))))
|
5586
5523
|
})));
|
5587
5524
|
});
|
5588
5525
|
|
@@ -5825,14 +5762,12 @@ const Extra = /*#__PURE__*/React.forwardRef(function DialogExtra(props, ref) {
|
|
5825
5762
|
});
|
5826
5763
|
Extra.displayName = 'DialogExtra';
|
5827
5764
|
|
5828
|
-
|
5829
|
-
|
5830
|
-
|
5831
|
-
|
5832
|
-
|
5833
|
-
|
5834
|
-
var extra;
|
5835
|
-
React.Children.toArray(initialChildren).forEach(function (child) {
|
5765
|
+
const useSeparatedChildren = initialChildren => {
|
5766
|
+
return React.useMemo(() => {
|
5767
|
+
const children = [];
|
5768
|
+
let drawer;
|
5769
|
+
let extra;
|
5770
|
+
React.Children.toArray(initialChildren).forEach(child => {
|
5836
5771
|
var _child$type, _child$type2;
|
5837
5772
|
|
5838
5773
|
if (((_child$type = child.type) === null || _child$type === void 0 ? void 0 : _child$type.displayName) === Drawer.displayName) {
|
@@ -5847,55 +5782,39 @@ var useSeparatedChildren = function useSeparatedChildren(initialChildren) {
|
|
5847
5782
|
}, [initialChildren]);
|
5848
5783
|
};
|
5849
5784
|
|
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]);
|
5785
|
+
const Dialog = /*#__PURE__*/React.forwardRef(function Dialog(props, ref) {
|
5786
|
+
const {
|
5787
|
+
children: initialChildren,
|
5788
|
+
closeOnEscape = true,
|
5789
|
+
defaultOpen,
|
5790
|
+
draggable = false,
|
5791
|
+
onChange,
|
5792
|
+
onClose,
|
5793
|
+
open,
|
5794
|
+
showCloseButton = true,
|
5795
|
+
size = 'sm',
|
5796
|
+
trigger,
|
5797
|
+
...otherProps
|
5798
|
+
} = props;
|
5799
|
+
const [children, drawer, extra] = useSeparatedChildren(initialChildren);
|
5800
|
+
const [drawerOpen, setDrawerOpen] = React.useState(false);
|
5801
|
+
const context = React.useMemo(() => ({
|
5802
|
+
closeOnEscape,
|
5803
|
+
draggable,
|
5804
|
+
drawer: {
|
5805
|
+
open: drawerOpen,
|
5806
|
+
toggle: () => setDrawerOpen(isDrawerOpen => !isDrawerOpen)
|
5807
|
+
},
|
5808
|
+
elements: {
|
5809
|
+
drawer,
|
5810
|
+
extra
|
5811
|
+
},
|
5812
|
+
onClose,
|
5813
|
+
props: otherProps,
|
5814
|
+
showCloseButton,
|
5815
|
+
size,
|
5816
|
+
ref
|
5817
|
+
}), [closeOnEscape, drawerOpen, draggable, drawer, extra, open, otherProps, showCloseButton]);
|
5899
5818
|
return React.createElement(DialogContext.Provider, {
|
5900
5819
|
value: context
|
5901
5820
|
}, React.createElement(DialogPrimitive.Root, {
|
@@ -5912,19 +5831,18 @@ Dialog.Extra = Extra;
|
|
5912
5831
|
Dialog.Drawer = Drawer;
|
5913
5832
|
Dialog.Close = Close$2;
|
5914
5833
|
|
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)]', {
|
5834
|
+
const Field = /*#__PURE__*/React.forwardRef(function Field(props, ref) {
|
5835
|
+
const {
|
5836
|
+
disabled,
|
5837
|
+
children,
|
5838
|
+
invalid = false,
|
5839
|
+
message,
|
5840
|
+
...otherProps
|
5841
|
+
} = props;
|
5842
|
+
const className = cn('flex flex-col font-bold text-xs leading-loose pb-4 min-h-[theme(spacing.18)]', {
|
5925
5843
|
'text-grey-dark': disabled
|
5926
5844
|
}, props.className);
|
5927
|
-
|
5845
|
+
const messageClassName = cn('h-4 text-xs text-left leading-normal font-normal truncate -mb-4', {
|
5928
5846
|
'text-grey-darkest': !invalid,
|
5929
5847
|
'text-red': invalid,
|
5930
5848
|
'opacity-50': disabled
|
@@ -5939,13 +5857,12 @@ var Field = /*#__PURE__*/React.forwardRef(function Field(props, ref) {
|
|
5939
5857
|
}, message));
|
5940
5858
|
});
|
5941
5859
|
|
5942
|
-
|
5943
|
-
|
5944
|
-
|
5945
|
-
|
5946
|
-
|
5947
|
-
|
5948
|
-
var className = cn('yt-form', {
|
5860
|
+
const Form = /*#__PURE__*/React.forwardRef(function Form(props, ref) {
|
5861
|
+
const {
|
5862
|
+
horizontal = false,
|
5863
|
+
...otherProps
|
5864
|
+
} = props;
|
5865
|
+
const className = cn('yt-form', {
|
5949
5866
|
'yt-form--horizontal flex flex-wrap': horizontal
|
5950
5867
|
}, props.className);
|
5951
5868
|
return React.createElement("form", Object.assign({}, otherProps, {
|
@@ -5955,13 +5872,12 @@ var Form = /*#__PURE__*/React.forwardRef(function Form(props, ref) {
|
|
5955
5872
|
}));
|
5956
5873
|
});
|
5957
5874
|
|
5958
|
-
|
5959
|
-
|
5960
|
-
|
5961
|
-
|
5962
|
-
|
5963
|
-
|
5964
|
-
var className = cn('flex ', props.className);
|
5875
|
+
const Group = /*#__PURE__*/React.forwardRef(function Group(props, ref) {
|
5876
|
+
const {
|
5877
|
+
as: Tag = 'span',
|
5878
|
+
...otherProps
|
5879
|
+
} = props;
|
5880
|
+
const className = cn('flex ', props.className);
|
5965
5881
|
return React.createElement(Tag, Object.assign({}, otherProps, {
|
5966
5882
|
className: className,
|
5967
5883
|
"data-taco": "group",
|
@@ -5969,19 +5885,18 @@ var Group = /*#__PURE__*/React.forwardRef(function Group(props, ref) {
|
|
5969
5885
|
}));
|
5970
5886
|
});
|
5971
5887
|
|
5972
|
-
|
5973
|
-
var HangerContext = /*#__PURE__*/React.createContext({
|
5888
|
+
const HangerContext = /*#__PURE__*/React.createContext({
|
5974
5889
|
props: {},
|
5975
5890
|
ref: null
|
5976
5891
|
});
|
5977
|
-
|
5892
|
+
const Anchor = /*#__PURE__*/React.forwardRef(function HangerAnchor(props, ref) {
|
5978
5893
|
var _props$children;
|
5979
5894
|
|
5980
|
-
|
5981
|
-
|
5895
|
+
const context = React.useContext(HangerContext);
|
5896
|
+
let children = props.children;
|
5982
5897
|
|
5983
5898
|
if (React.isValidElement(props.children) && typeof ((_props$children = props.children) === null || _props$children === void 0 ? void 0 : _props$children.type) === 'function') {
|
5984
|
-
console.warn(
|
5899
|
+
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
5900
|
children = React.createElement("span", null, props.children);
|
5986
5901
|
}
|
5987
5902
|
|
@@ -5991,22 +5906,21 @@ var Anchor = /*#__PURE__*/React.forwardRef(function HangerAnchor(props, ref) {
|
|
5991
5906
|
asChild: true
|
5992
5907
|
}));
|
5993
5908
|
});
|
5994
|
-
|
5995
|
-
|
5909
|
+
const Title$1 = /*#__PURE__*/React.forwardRef(function DialogTitle(props, ref) {
|
5910
|
+
const className = cn('mb-1 text-base font-bold flex w-full', props.className);
|
5996
5911
|
return React.createElement("span", Object.assign({}, props, {
|
5997
5912
|
className: className,
|
5998
5913
|
ref: ref
|
5999
5914
|
}));
|
6000
5915
|
});
|
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);
|
5916
|
+
const Content$3 = /*#__PURE__*/React.forwardRef(function HangerContent(props, ref) {
|
5917
|
+
const context = React.useContext(HangerContext);
|
5918
|
+
const {
|
5919
|
+
texts
|
5920
|
+
} = useLocalization();
|
5921
|
+
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
5922
|
|
6009
|
-
|
5923
|
+
const handleInteractOutside = event => {
|
6010
5924
|
event.preventDefault();
|
6011
5925
|
};
|
6012
5926
|
|
@@ -6028,25 +5942,20 @@ var Content$3 = /*#__PURE__*/React.forwardRef(function HangerContent(props, ref)
|
|
6028
5942
|
onClick: context.props.onClose
|
6029
5943
|
})));
|
6030
5944
|
});
|
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];
|
5945
|
+
const Hanger = /*#__PURE__*/React.forwardRef(function Hanger(props, ref) {
|
5946
|
+
const {
|
5947
|
+
anchor,
|
5948
|
+
children,
|
5949
|
+
defaultOpen = true,
|
5950
|
+
...otherProps
|
5951
|
+
} = props;
|
5952
|
+
const context = React.useMemo(() => ({
|
5953
|
+
props: otherProps,
|
5954
|
+
ref
|
5955
|
+
}), [otherProps]); // we do this to ensure hangers are mounted after their containers, e.g. if the container is another portal
|
6048
5956
|
|
6049
|
-
React.
|
5957
|
+
const [open, setOpen] = React.useState(false);
|
5958
|
+
React.useEffect(() => {
|
6050
5959
|
if (defaultOpen) {
|
6051
5960
|
setOpen(defaultOpen);
|
6052
5961
|
}
|
@@ -6062,25 +5971,25 @@ Hanger.Anchor = Anchor;
|
|
6062
5971
|
Hanger.Content = Content$3;
|
6063
5972
|
Hanger.Title = Title$1;
|
6064
5973
|
|
6065
|
-
|
6066
|
-
var Trigger$3 = /*#__PURE__*/React.forwardRef(function HoverCardTrigger(props, ref) {
|
5974
|
+
const Trigger$3 = /*#__PURE__*/React.forwardRef(function HoverCardTrigger(props, ref) {
|
6067
5975
|
return React.createElement(HoverCardPrimitive.Trigger, Object.assign({}, props, {
|
6068
5976
|
asChild: true,
|
6069
5977
|
ref: ref
|
6070
5978
|
}));
|
6071
5979
|
});
|
6072
|
-
|
6073
|
-
|
6074
|
-
|
6075
|
-
|
6076
|
-
|
5980
|
+
const Content$4 = /*#__PURE__*/React.forwardRef(function HoverCardContent(externalProps, ref) {
|
5981
|
+
const {
|
5982
|
+
placement,
|
5983
|
+
...props
|
5984
|
+
} = externalProps;
|
5985
|
+
const className = cn('bg-white rounded p-3 yt-shadow', props.className);
|
6077
5986
|
return React.createElement(HoverCardPrimitive.Content, Object.assign({}, props, {
|
6078
5987
|
className: className,
|
6079
5988
|
ref: ref,
|
6080
5989
|
side: placement
|
6081
5990
|
}));
|
6082
5991
|
});
|
6083
|
-
|
5992
|
+
const HoverCard = props => {
|
6084
5993
|
return React.createElement(HoverCardPrimitive.Root, Object.assign({}, props, {
|
6085
5994
|
openDelay: 300
|
6086
5995
|
}));
|
@@ -6088,24 +5997,24 @@ var HoverCard = function HoverCard(props) {
|
|
6088
5997
|
HoverCard.Trigger = Trigger$3;
|
6089
5998
|
HoverCard.Content = Content$4;
|
6090
5999
|
|
6091
|
-
|
6092
|
-
|
6093
|
-
|
6094
|
-
|
6095
|
-
|
6096
|
-
|
6097
|
-
|
6000
|
+
const SearchInput = /*#__PURE__*/React.forwardRef(function SearchInput({
|
6001
|
+
onSearch,
|
6002
|
+
...props
|
6003
|
+
}, ref) {
|
6004
|
+
const {
|
6005
|
+
texts
|
6006
|
+
} = useLocalization();
|
6098
6007
|
|
6099
|
-
|
6008
|
+
const handleClick = () => {
|
6100
6009
|
if (!props.disabled) {
|
6101
6010
|
onSearch === null || onSearch === void 0 ? void 0 : onSearch(props.value);
|
6102
6011
|
}
|
6103
6012
|
};
|
6104
6013
|
|
6105
|
-
|
6014
|
+
const handleKeyDown = event => {
|
6106
6015
|
var _props$onKeyDown;
|
6107
6016
|
|
6108
|
-
|
6017
|
+
const isEnterKeyPressed = event.keyCode === keycode('enter');
|
6109
6018
|
|
6110
6019
|
if (isEnterKeyPressed) {
|
6111
6020
|
handleClick();
|
@@ -6474,49 +6383,49 @@ const useMultiListbox = ({
|
|
6474
6383
|
};
|
6475
6384
|
};
|
6476
6385
|
|
6477
|
-
|
6478
|
-
|
6479
|
-
|
6480
|
-
|
6481
|
-
|
6482
|
-
|
6483
|
-
|
6484
|
-
|
6485
|
-
|
6486
|
-
|
6487
|
-
var className = cn('bg-white inline-flex relative w-full', externalClassName);
|
6386
|
+
const Listbox = /*#__PURE__*/React.forwardRef(function Listbox(props, ref) {
|
6387
|
+
const {
|
6388
|
+
className: externalClassName,
|
6389
|
+
...otherProps
|
6390
|
+
} = props;
|
6391
|
+
const {
|
6392
|
+
list,
|
6393
|
+
input
|
6394
|
+
} = useListbox(otherProps, ref);
|
6395
|
+
const className = cn('bg-white inline-flex relative w-full', externalClassName);
|
6488
6396
|
return React.createElement("span", {
|
6489
6397
|
"data-taco": "listbox",
|
6490
6398
|
className: className
|
6491
6399
|
}, React.createElement(ScrollableList, Object.assign({}, list, {
|
6492
|
-
style:
|
6400
|
+
style: { ...list.style,
|
6493
6401
|
maxHeight: 'calc(12rem + 2px)'
|
6494
6402
|
/* (6 * option height) + listbox border */
|
6495
6403
|
|
6496
|
-
}
|
6404
|
+
}
|
6497
6405
|
})), React.createElement("input", Object.assign({}, input, {
|
6498
6406
|
className: "hidden",
|
6499
6407
|
type: "text"
|
6500
6408
|
})));
|
6501
6409
|
});
|
6502
|
-
|
6503
|
-
|
6504
|
-
|
6505
|
-
|
6506
|
-
|
6507
|
-
|
6508
|
-
|
6509
|
-
|
6510
|
-
|
6410
|
+
const MultiListbox = /*#__PURE__*/React.forwardRef(function Listbox(props, ref) {
|
6411
|
+
const {
|
6412
|
+
className: externalClassName,
|
6413
|
+
...otherProps
|
6414
|
+
} = props;
|
6415
|
+
const {
|
6416
|
+
list,
|
6417
|
+
input
|
6418
|
+
} = useMultiListbox(otherProps, ref);
|
6419
|
+
const className = cn('bg-white inline-flex relative w-full', externalClassName);
|
6511
6420
|
return React.createElement("span", {
|
6512
6421
|
"data-taco": "listbox",
|
6513
6422
|
className: className
|
6514
6423
|
}, React.createElement(ScrollableList, Object.assign({}, list, {
|
6515
|
-
style:
|
6424
|
+
style: { ...list.style,
|
6516
6425
|
maxHeight: 'calc(12rem + 2px + 2px)'
|
6517
6426
|
/* (6 * option height) + listbox border + ALL_OPTIONS bottom border */
|
6518
6427
|
|
6519
|
-
}
|
6428
|
+
}
|
6520
6429
|
})), React.createElement("input", Object.assign({}, input, {
|
6521
6430
|
className: "hidden",
|
6522
6431
|
type: "text"
|
@@ -6699,34 +6608,26 @@ const Checkbox$1 = props => {
|
|
6699
6608
|
})), children);
|
6700
6609
|
};
|
6701
6610
|
|
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({
|
6611
|
+
const getRadioGroupItemValueAsString = value => String(value !== null && value !== void 0 ? value : '');
|
6612
|
+
const findByValue$1 = (values, valueAsString) => values.find(value => getRadioGroupItemValueAsString(value) === valueAsString);
|
6613
|
+
const RadioGroupContext = /*#__PURE__*/React.createContext({
|
6713
6614
|
disabled: false,
|
6714
6615
|
invalid: false
|
6715
6616
|
});
|
6716
|
-
|
6717
|
-
|
6718
|
-
|
6719
|
-
|
6720
|
-
|
6721
|
-
|
6722
|
-
|
6723
|
-
|
6724
|
-
|
6617
|
+
const RadioGroupItem = /*#__PURE__*/React.forwardRef(function RadioGroupItem(props, ref) {
|
6618
|
+
const context = React.useContext(RadioGroupContext);
|
6619
|
+
const {
|
6620
|
+
children,
|
6621
|
+
value,
|
6622
|
+
...otherProps
|
6623
|
+
} = props;
|
6624
|
+
const isDisabled = context.disabled || props.disabled;
|
6625
|
+
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
6626
|
'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
6627
|
'border-grey cursor-not-allowed aria-checked:bg-blue-light aria-checked:border-blue-light ': isDisabled,
|
6727
6628
|
'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
6629
|
});
|
6729
|
-
|
6630
|
+
const labelClassName = cn('flex items-center gap-2', {
|
6730
6631
|
'cursor-pointer': !isDisabled,
|
6731
6632
|
'cursor-not-allowed text-grey-dark': isDisabled
|
6732
6633
|
}, props.className);
|
@@ -6741,38 +6642,34 @@ var RadioGroupItem = /*#__PURE__*/React.forwardRef(function RadioGroupItem(props
|
|
6741
6642
|
className: "h-2 w-2 rounded-full bg-white"
|
6742
6643
|
})), children);
|
6743
6644
|
});
|
6744
|
-
|
6745
|
-
|
6746
|
-
|
6747
|
-
|
6748
|
-
|
6749
|
-
|
6750
|
-
|
6751
|
-
|
6752
|
-
|
6753
|
-
|
6754
|
-
|
6755
|
-
|
6756
|
-
|
6757
|
-
React.Children.forEach(children,
|
6645
|
+
const useRadioGroup = props => {
|
6646
|
+
const {
|
6647
|
+
children,
|
6648
|
+
defaultValue,
|
6649
|
+
disabled,
|
6650
|
+
invalid,
|
6651
|
+
onChange,
|
6652
|
+
orientation = 'vertical',
|
6653
|
+
value,
|
6654
|
+
...otherProps
|
6655
|
+
} = props;
|
6656
|
+
const values = React.useMemo(() => {
|
6657
|
+
const radioGroupItemValues = [];
|
6658
|
+
React.Children.forEach(children, child => {
|
6758
6659
|
if (React.isValidElement(child)) {
|
6759
6660
|
radioGroupItemValues.push(child.props.value);
|
6760
6661
|
}
|
6761
6662
|
});
|
6762
6663
|
return radioGroupItemValues;
|
6763
6664
|
}, [children]);
|
6764
|
-
|
6765
|
-
|
6766
|
-
|
6767
|
-
|
6768
|
-
|
6769
|
-
}, [disabled, invalid]);
|
6770
|
-
var valueProps;
|
6665
|
+
const context = React.useMemo(() => ({
|
6666
|
+
disabled: disabled !== null && disabled !== void 0 ? disabled : false,
|
6667
|
+
invalid: invalid !== null && invalid !== void 0 ? invalid : false
|
6668
|
+
}), [disabled, invalid]);
|
6669
|
+
let valueProps;
|
6771
6670
|
|
6772
6671
|
if (onChange !== undefined) {
|
6773
|
-
|
6774
|
-
return onChange(findByValue$1(values, value));
|
6775
|
-
};
|
6672
|
+
const handleChange = value => onChange(findByValue$1(values, value));
|
6776
6673
|
|
6777
6674
|
valueProps = {
|
6778
6675
|
onValueChange: handleChange,
|
@@ -6785,19 +6682,20 @@ var useRadioGroup = function useRadioGroup(props) {
|
|
6785
6682
|
}
|
6786
6683
|
|
6787
6684
|
return {
|
6788
|
-
context
|
6789
|
-
props:
|
6790
|
-
|
6791
|
-
|
6792
|
-
|
6685
|
+
context,
|
6686
|
+
props: { ...otherProps,
|
6687
|
+
...valueProps,
|
6688
|
+
children,
|
6689
|
+
orientation
|
6690
|
+
}
|
6793
6691
|
};
|
6794
6692
|
};
|
6795
|
-
|
6796
|
-
|
6797
|
-
|
6798
|
-
|
6799
|
-
|
6800
|
-
|
6693
|
+
const RadioGroup = /*#__PURE__*/React.forwardRef(function RadioGroup(props, ref) {
|
6694
|
+
const {
|
6695
|
+
context,
|
6696
|
+
props: otherProps
|
6697
|
+
} = useRadioGroup(props);
|
6698
|
+
const className = cn('flex items-start gap-y-2', {
|
6801
6699
|
'flex-wrap gap-x-4 ': otherProps.orientation === 'horizontal',
|
6802
6700
|
'flex-col': otherProps.orientation === 'vertical'
|
6803
6701
|
}, otherProps.className);
|
@@ -6868,39 +6766,22 @@ const Header = props => {
|
|
6868
6766
|
}));
|
6869
6767
|
};
|
6870
6768
|
|
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]);
|
6769
|
+
const Menu$1 = externalProps => {
|
6770
|
+
const {
|
6771
|
+
children,
|
6772
|
+
trigger,
|
6773
|
+
...props
|
6774
|
+
} = externalProps;
|
6775
|
+
const [open, setOpen] = React.useState(false);
|
6776
|
+
const [indented, setIndented] = React.useState(false);
|
6777
|
+
const [minWidth, setMinWidth] = React.useState(undefined);
|
6778
|
+
const context = React.useMemo(() => ({
|
6779
|
+
indented,
|
6780
|
+
registerIndentation: () => setIndented(true),
|
6781
|
+
minWidth,
|
6782
|
+
setMinWidth: width => setMinWidth(width),
|
6783
|
+
close: () => setOpen(false)
|
6784
|
+
}), [indented, minWidth]);
|
6904
6785
|
return React.createElement(MenuContext.Provider, {
|
6905
6786
|
value: context
|
6906
6787
|
}, React.createElement(DropdownMenuPrimitive.Root, Object.assign({}, props, {
|
@@ -6918,44 +6799,39 @@ Menu$1.Separator = Separator;
|
|
6918
6799
|
Menu$1.Header = Header;
|
6919
6800
|
Menu$1.RadioGroup = RadioGroup$1;
|
6920
6801
|
|
6921
|
-
|
6922
|
-
var TreeviewItem = /*#__PURE__*/React__default.forwardRef(function TreeviewItem(props, ref) {
|
6802
|
+
const TreeviewItem = /*#__PURE__*/React__default.forwardRef(function TreeviewItem(props, ref) {
|
6923
6803
|
return React__default.createElement("a", Object.assign({}, props, {
|
6924
6804
|
ref: ref
|
6925
6805
|
}));
|
6926
6806
|
});
|
6927
|
-
|
6928
|
-
|
6929
|
-
|
6930
|
-
|
6931
|
-
|
6932
|
-
|
6933
|
-
|
6934
|
-
|
6935
|
-
|
6936
|
-
|
6937
|
-
|
6938
|
-
|
6939
|
-
setExpanded = _React$useState[1];
|
6940
|
-
|
6941
|
-
React__default.useEffect(function () {
|
6807
|
+
const TreeviewGroup = /*#__PURE__*/React__default.forwardRef(function TreeviewGroup(props, ref) {
|
6808
|
+
const {
|
6809
|
+
children,
|
6810
|
+
className: externalClassName,
|
6811
|
+
expanded: initialExpanded = false,
|
6812
|
+
title,
|
6813
|
+
fixed,
|
6814
|
+
onClick,
|
6815
|
+
...otherProps
|
6816
|
+
} = props;
|
6817
|
+
const [expanded, setExpanded] = React__default.useState(fixed || initialExpanded);
|
6818
|
+
React__default.useEffect(() => {
|
6942
6819
|
if (!fixed) {
|
6943
6820
|
setExpanded(fixed || initialExpanded);
|
6944
6821
|
}
|
6945
6822
|
}, [fixed, initialExpanded]);
|
6946
|
-
|
6823
|
+
const listClassName = cn('flex-col mb-0', {
|
6947
6824
|
flex: expanded,
|
6948
6825
|
hidden: !expanded
|
6949
6826
|
});
|
6950
|
-
|
6951
|
-
var itemProps = _extends({}, otherProps, {
|
6827
|
+
const itemProps = { ...otherProps,
|
6952
6828
|
'aria-expanded': expanded,
|
6953
6829
|
role: 'treeitem',
|
6954
6830
|
tabIndex: -1
|
6955
|
-
}
|
6831
|
+
};
|
6956
6832
|
|
6957
|
-
|
6958
|
-
|
6833
|
+
const handleClick = event => {
|
6834
|
+
const nextState = !expanded;
|
6959
6835
|
|
6960
6836
|
if (!fixed) {
|
6961
6837
|
setExpanded(nextState);
|
@@ -6966,7 +6842,7 @@ var TreeviewGroup = /*#__PURE__*/React__default.forwardRef(function TreeviewGrou
|
|
6966
6842
|
}
|
6967
6843
|
};
|
6968
6844
|
|
6969
|
-
|
6845
|
+
const className = typeof externalClassName === 'function' ? externalClassName(expanded) : externalClassName;
|
6970
6846
|
return React__default.createElement("div", Object.assign({}, itemProps, {
|
6971
6847
|
className: className,
|
6972
6848
|
ref: ref
|
@@ -6975,18 +6851,14 @@ var TreeviewGroup = /*#__PURE__*/React__default.forwardRef(function TreeviewGrou
|
|
6975
6851
|
}, typeof title === 'function' ? title(expanded) : title), React__default.createElement("ul", {
|
6976
6852
|
role: "group",
|
6977
6853
|
className: listClassName
|
6978
|
-
}, React__default.Children.toArray(children).filter(
|
6979
|
-
|
6980
|
-
|
6981
|
-
|
6982
|
-
|
6983
|
-
|
6984
|
-
}, React__default.cloneElement(item, {
|
6985
|
-
role: 'treeitem'
|
6986
|
-
}));
|
6987
|
-
})));
|
6854
|
+
}, React__default.Children.toArray(children).filter(item => !!item).map((item, i) => React__default.createElement("li", {
|
6855
|
+
key: i,
|
6856
|
+
role: "none"
|
6857
|
+
}, React__default.cloneElement(item, {
|
6858
|
+
role: 'treeitem'
|
6859
|
+
})))));
|
6988
6860
|
});
|
6989
|
-
|
6861
|
+
const Treeview = /*#__PURE__*/React__default.forwardRef(function Treeview(props, ref) {
|
6990
6862
|
return React__default.createElement("div", Object.assign({}, props, {
|
6991
6863
|
ref: ref,
|
6992
6864
|
role: "tree"
|
@@ -6995,23 +6867,26 @@ var Treeview = /*#__PURE__*/React__default.forwardRef(function Treeview(props, r
|
|
6995
6867
|
Treeview.Group = TreeviewGroup;
|
6996
6868
|
Treeview.Item = TreeviewItem;
|
6997
6869
|
|
6998
|
-
|
6999
|
-
|
7000
|
-
|
6870
|
+
var useDropTarget = function useDropTarget(onDrop) {
|
6871
|
+
var _React$useState = React__default.useState(false),
|
6872
|
+
isDraggedOver = _React$useState[0],
|
6873
|
+
setDraggedOver = _React$useState[1];
|
6874
|
+
|
6875
|
+
var handleDragEnter = React__default.useCallback(function (event) {
|
7001
6876
|
event.preventDefault();
|
7002
6877
|
setDraggedOver(true);
|
7003
6878
|
}, []);
|
7004
|
-
|
6879
|
+
var handleDragLeave = React__default.useCallback(function (event) {
|
7005
6880
|
event.preventDefault();
|
7006
6881
|
|
7007
6882
|
if (event.target === event.currentTarget) {
|
7008
6883
|
setDraggedOver(false);
|
7009
6884
|
}
|
7010
6885
|
}, []);
|
7011
|
-
|
6886
|
+
var handleDragOver = React__default.useCallback(function (event) {
|
7012
6887
|
event.preventDefault();
|
7013
6888
|
}, []);
|
7014
|
-
|
6889
|
+
var handleDrop = React__default.useCallback(function (event) {
|
7015
6890
|
event.preventDefault();
|
7016
6891
|
event.persist();
|
7017
6892
|
setDraggedOver(false);
|
@@ -7020,7 +6895,7 @@ const useDropTarget = onDrop => {
|
|
7020
6895
|
onDrop(event);
|
7021
6896
|
}
|
7022
6897
|
}, [onDrop]);
|
7023
|
-
|
6898
|
+
var props = onDrop ? {
|
7024
6899
|
onDragEnter: handleDragEnter,
|
7025
6900
|
onDragLeave: handleDragLeave,
|
7026
6901
|
onDragOver: handleDragOver,
|
@@ -7029,25 +6904,20 @@ const useDropTarget = onDrop => {
|
|
7029
6904
|
return [isDraggedOver, props];
|
7030
6905
|
};
|
7031
6906
|
|
7032
|
-
|
7033
|
-
|
7034
|
-
|
7035
|
-
|
7036
|
-
|
7037
|
-
|
7038
|
-
|
7039
|
-
|
7040
|
-
|
7041
|
-
|
7042
|
-
|
7043
|
-
|
7044
|
-
|
7045
|
-
|
7046
|
-
isDraggedOver = _useDropTarget[0],
|
7047
|
-
dropTargetProps = _useDropTarget[1];
|
7048
|
-
|
7049
|
-
var isTreeitem = role === 'treeitem';
|
7050
|
-
var className = cn('yt-navigation__item cursor-pointer', {
|
6907
|
+
const Item$2 = /*#__PURE__*/React__default.forwardRef(function Item(props, ref) {
|
6908
|
+
const {
|
6909
|
+
active,
|
6910
|
+
children,
|
6911
|
+
onDrop,
|
6912
|
+
postfix,
|
6913
|
+
prefix,
|
6914
|
+
role,
|
6915
|
+
...otherProps
|
6916
|
+
} = props;
|
6917
|
+
const proxyRef = useProxiedRef(ref);
|
6918
|
+
const [isDraggedOver, dropTargetProps] = useDropTarget(onDrop);
|
6919
|
+
const isTreeitem = role === 'treeitem';
|
6920
|
+
const className = cn('yt-navigation__item cursor-pointer', {
|
7051
6921
|
'w-full mb-px py-1 px-3 flex items-center hover:bg-grey-dark': isTreeitem,
|
7052
6922
|
'bg-white w-full h-10 px-3 flex-shrink-0 flex items-center justify-between cursor-pointer': !isTreeitem,
|
7053
6923
|
'yt-navigation__item--active': active && !isDraggedOver,
|
@@ -7055,7 +6925,7 @@ var Item$2 = /*#__PURE__*/React__default.forwardRef(function Item(props, ref) {
|
|
7055
6925
|
'yt-navigation__item--dropping bg-blue': isDraggedOver
|
7056
6926
|
}, props.className);
|
7057
6927
|
|
7058
|
-
|
6928
|
+
const handleClick = event => {
|
7059
6929
|
if (event.target instanceof HTMLAnchorElement || event.target instanceof HTMLButtonElement) {
|
7060
6930
|
return;
|
7061
6931
|
}
|
@@ -7078,19 +6948,19 @@ var Item$2 = /*#__PURE__*/React__default.forwardRef(function Item(props, ref) {
|
|
7078
6948
|
className: "yt-navigation__item__postfix ml-1"
|
7079
6949
|
}, postfix));
|
7080
6950
|
});
|
7081
|
-
|
6951
|
+
const Panel = /*#__PURE__*/React__default.forwardRef(function Panel(props, ref) {
|
7082
6952
|
return React__default.createElement("div", Object.assign({}, props, {
|
7083
6953
|
className: cn('w-full bg-white p-3', props.className),
|
7084
6954
|
ref: ref
|
7085
6955
|
}));
|
7086
6956
|
});
|
7087
|
-
|
7088
|
-
|
6957
|
+
const MenuGroup = /*#__PURE__*/React__default.forwardRef(function MenuGroup(props, ref) {
|
6958
|
+
const className = cn('flex-shrink-0 space-y-1 outline-none', {
|
7089
6959
|
'bg-white pb-2': props.fixed
|
7090
6960
|
}, props.className);
|
7091
6961
|
|
7092
|
-
|
7093
|
-
|
6962
|
+
const title = expanded => {
|
6963
|
+
const className = cn('bg-white h-10 pl-3 pr-1 flex items-center justify-between w-full', {
|
7094
6964
|
'mb-1': expanded,
|
7095
6965
|
'cursor-pointer hover:text-blue': !props.fixed
|
7096
6966
|
});
|
@@ -7107,16 +6977,14 @@ var MenuGroup = /*#__PURE__*/React__default.forwardRef(function MenuGroup(props,
|
|
7107
6977
|
ref: ref
|
7108
6978
|
}));
|
7109
6979
|
});
|
7110
|
-
|
7111
|
-
|
7112
|
-
|
7113
|
-
React__default.Children.toArray(props.children).filter(
|
7114
|
-
return !!child;
|
7115
|
-
}).map(function (child) {
|
6980
|
+
const Menu$2 = /*#__PURE__*/React__default.forwardRef(function Menu(props, ref) {
|
6981
|
+
const scrollableAreas = React__default.useMemo(() => {
|
6982
|
+
const scrollableAreas = [];
|
6983
|
+
React__default.Children.toArray(props.children).filter(child => !!child).map(child => {
|
7116
6984
|
if (child.props.fixed) {
|
7117
6985
|
scrollableAreas.push(child);
|
7118
6986
|
} else {
|
7119
|
-
|
6987
|
+
const x = scrollableAreas[scrollableAreas.length - 1];
|
7120
6988
|
|
7121
6989
|
if (Array.isArray(x)) {
|
7122
6990
|
x.push(child);
|
@@ -7130,19 +6998,18 @@ var Menu$2 = /*#__PURE__*/React__default.forwardRef(function Menu(props, ref) {
|
|
7130
6998
|
return React__default.createElement(Treeview, Object.assign({}, props, {
|
7131
6999
|
className: cn('divide-grey-light flex flex-grow flex-col divide-y-2 overflow-y-auto', props.className),
|
7132
7000
|
ref: ref
|
7133
|
-
}), scrollableAreas.map(
|
7134
|
-
|
7135
|
-
|
7136
|
-
|
7137
|
-
}, area) : area;
|
7138
|
-
}));
|
7001
|
+
}), scrollableAreas.map((area, i) => Array.isArray(area) ? React__default.createElement("div", {
|
7002
|
+
className: "divide-grey-light flex h-0 flex-auto flex-shrink-0 flex-grow flex-col divide-y-2 overflow-y-auto",
|
7003
|
+
key: i
|
7004
|
+
}, area) : area));
|
7139
7005
|
});
|
7140
7006
|
Menu$2.Group = MenuGroup;
|
7141
|
-
|
7142
|
-
|
7143
|
-
|
7144
|
-
|
7145
|
-
|
7007
|
+
const Navigation = /*#__PURE__*/React__default.forwardRef(function Navigation(props, ref) {
|
7008
|
+
const {
|
7009
|
+
children,
|
7010
|
+
...otherProps
|
7011
|
+
} = props;
|
7012
|
+
const className = cn('h-full flex flex-col bg-grey-light divide-y-2 divide-grey-light', props.className);
|
7146
7013
|
return React__default.createElement("div", Object.assign({}, otherProps, {
|
7147
7014
|
className: className,
|
7148
7015
|
"data-taco": "navigation",
|
@@ -7398,54 +7265,52 @@ const useSelect = ({
|
|
7398
7265
|
};
|
7399
7266
|
};
|
7400
7267
|
|
7401
|
-
|
7402
|
-
|
7403
|
-
|
7404
|
-
|
7405
|
-
|
7406
|
-
|
7407
|
-
|
7408
|
-
|
7409
|
-
|
7410
|
-
|
7411
|
-
|
7412
|
-
|
7413
|
-
|
7414
|
-
|
7415
|
-
|
7416
|
-
|
7417
|
-
|
7418
|
-
|
7419
|
-
|
7420
|
-
var className = cn('inline-flex relative w-full', {
|
7268
|
+
const BaseSelect = /*#__PURE__*/React.forwardRef(function BaseSelect(props, ref) {
|
7269
|
+
const {
|
7270
|
+
autoFocus,
|
7271
|
+
className: externalClassName,
|
7272
|
+
highlighted,
|
7273
|
+
style,
|
7274
|
+
...otherProps
|
7275
|
+
} = props;
|
7276
|
+
const {
|
7277
|
+
button,
|
7278
|
+
listbox,
|
7279
|
+
popover,
|
7280
|
+
input,
|
7281
|
+
text,
|
7282
|
+
more = 0
|
7283
|
+
} = useSelect(otherProps, ref);
|
7284
|
+
const internalRef = React.useRef(null);
|
7285
|
+
const selectDimensions = useBoundingClientRectListener(internalRef);
|
7286
|
+
const className = cn('inline-flex relative w-full', {
|
7421
7287
|
'yt-select--readonly': props.readOnly
|
7422
7288
|
}, externalClassName);
|
7423
|
-
|
7289
|
+
const inputClassname = cn(getInputClasses(props), 'h-8 text-left pr-0', {
|
7424
7290
|
'border-blue': popover.open
|
7425
7291
|
});
|
7426
|
-
React.useEffect(
|
7292
|
+
React.useEffect(() => {
|
7427
7293
|
if (autoFocus && internalRef.current) {
|
7428
7294
|
internalRef.current.focus();
|
7429
7295
|
}
|
7430
7296
|
}, []);
|
7431
7297
|
|
7432
|
-
|
7298
|
+
const renderMultiSelection = () => {
|
7433
7299
|
return React.createElement(React.Fragment, null, React.createElement("span", {
|
7434
7300
|
className: "flex-grow truncate text-left"
|
7435
7301
|
}, text), more > 0 && React.createElement(Badge, {
|
7436
7302
|
className: "ml-2"
|
7437
|
-
},
|
7303
|
+
}, `+${more}`));
|
7438
7304
|
};
|
7439
7305
|
|
7440
|
-
|
7306
|
+
const commonListboxProps = { ...listbox,
|
7441
7307
|
className: 'w-auto',
|
7442
7308
|
invalid: undefined,
|
7443
7309
|
style: {
|
7444
7310
|
minWidth: selectDimensions === null || selectDimensions === void 0 ? void 0 : selectDimensions.width
|
7445
7311
|
},
|
7446
7312
|
tabIndex: popover.open ? 0 : -1
|
7447
|
-
}
|
7448
|
-
|
7313
|
+
};
|
7449
7314
|
return React.createElement("span", {
|
7450
7315
|
className: className,
|
7451
7316
|
"data-taco": "select",
|
@@ -7468,9 +7333,11 @@ var BaseSelect = /*#__PURE__*/React.forwardRef(function BaseSelect(props, ref) {
|
|
7468
7333
|
type: "text"
|
7469
7334
|
}))));
|
7470
7335
|
});
|
7471
|
-
|
7472
|
-
|
7473
|
-
|
7336
|
+
const Select = /*#__PURE__*/React.forwardRef(function Select(props, ref) {
|
7337
|
+
const {
|
7338
|
+
editable,
|
7339
|
+
...otherProps
|
7340
|
+
} = props;
|
7474
7341
|
|
7475
7342
|
if (editable) {
|
7476
7343
|
return React.createElement(Combobox, Object.assign({}, otherProps, {
|
@@ -7541,47 +7408,41 @@ const usePagination = (initialPageIndex = 0, initialPageSize = 10) => {
|
|
7541
7408
|
};
|
7542
7409
|
};
|
7543
7410
|
|
7544
|
-
|
7545
|
-
|
7546
|
-
|
7547
|
-
var minItemIndex = pageIndex * pageSize + 1;
|
7548
|
-
var maxItemIndex = (pageIndex + 1) * pageSize;
|
7411
|
+
const getShowingLabel = (length, pageIndex, pageSize, texts) => {
|
7412
|
+
const minItemIndex = pageIndex * pageSize + 1;
|
7413
|
+
const maxItemIndex = (pageIndex + 1) * pageSize;
|
7549
7414
|
return texts.pagination.showingXofYofTotal.replace('[X]', length === 0 ? '0' : String(minItemIndex)).replace('[Y]', String(maxItemIndex > length ? length : maxItemIndex)).replace('[total]', String(length));
|
7550
7415
|
};
|
7551
7416
|
|
7552
|
-
|
7553
|
-
|
7554
|
-
|
7555
|
-
|
7556
|
-
|
7557
|
-
|
7558
|
-
|
7559
|
-
|
7560
|
-
|
7561
|
-
|
7562
|
-
|
7563
|
-
|
7564
|
-
|
7565
|
-
|
7566
|
-
|
7567
|
-
|
7568
|
-
|
7569
|
-
|
7570
|
-
|
7571
|
-
texts = _useLocalization.texts;
|
7572
|
-
|
7573
|
-
var maxPageIndex = Math.ceil(length / pageSize) - 1;
|
7574
|
-
var showShortcutTexts = dangerouslyHijackGlobalKeyboardNavigation;
|
7417
|
+
const Pagination = /*#__PURE__*/React.forwardRef(function Pagination(props, ref) {
|
7418
|
+
const {
|
7419
|
+
length,
|
7420
|
+
pageIndex,
|
7421
|
+
pageSize,
|
7422
|
+
pageSizes = [10, 25, 50, 100, 500],
|
7423
|
+
setPageIndex,
|
7424
|
+
setPageSize,
|
7425
|
+
showPageControls = true,
|
7426
|
+
showPageNumbers = true,
|
7427
|
+
showPageSize = true,
|
7428
|
+
dangerouslyHijackGlobalKeyboardNavigation = false,
|
7429
|
+
...otherProps
|
7430
|
+
} = props;
|
7431
|
+
const {
|
7432
|
+
texts
|
7433
|
+
} = useLocalization();
|
7434
|
+
const maxPageIndex = Math.ceil(length / pageSize) - 1;
|
7435
|
+
const showShortcutTexts = dangerouslyHijackGlobalKeyboardNavigation;
|
7575
7436
|
usePaginationShortcuts({
|
7576
|
-
setPageIndex
|
7577
|
-
maxPageIndex
|
7578
|
-
pageIndex
|
7579
|
-
dangerouslyHijackGlobalKeyboardNavigation
|
7437
|
+
setPageIndex,
|
7438
|
+
maxPageIndex,
|
7439
|
+
pageIndex,
|
7440
|
+
dangerouslyHijackGlobalKeyboardNavigation
|
7580
7441
|
});
|
7581
|
-
|
7582
|
-
|
7583
|
-
|
7584
|
-
|
7442
|
+
const pageCount = Math.ceil(length / pageSize);
|
7443
|
+
const canPreviousPage = pageIndex > 0;
|
7444
|
+
const canNextPage = pageIndex < pageCount - 1;
|
7445
|
+
const className = cn('inline-flex relative justify-between items-center', props.className);
|
7585
7446
|
return React.createElement("div", Object.assign({}, otherProps, {
|
7586
7447
|
className: className,
|
7587
7448
|
"data-taco": "pagination",
|
@@ -7591,13 +7452,11 @@ var Pagination = /*#__PURE__*/React.forwardRef(function Pagination(props, ref) {
|
|
7591
7452
|
}, getShowingLabel(length, pageIndex, pageSize, texts), React.createElement(Select, {
|
7592
7453
|
"aria-label": texts.pagination.pageSize,
|
7593
7454
|
className: "ml-4 !w-20",
|
7594
|
-
data: pageSizes.map(
|
7595
|
-
|
7596
|
-
|
7597
|
-
|
7598
|
-
|
7599
|
-
}),
|
7600
|
-
onChange: function onChange(event) {
|
7455
|
+
data: pageSizes.map(pageSize => ({
|
7456
|
+
text: String(pageSize),
|
7457
|
+
value: pageSize
|
7458
|
+
})),
|
7459
|
+
onChange: event => {
|
7601
7460
|
setPageIndex(0);
|
7602
7461
|
setPageSize(Number(event.target.value));
|
7603
7462
|
},
|
@@ -7609,18 +7468,14 @@ var Pagination = /*#__PURE__*/React.forwardRef(function Pagination(props, ref) {
|
|
7609
7468
|
appearance: "default",
|
7610
7469
|
disabled: !canPreviousPage,
|
7611
7470
|
icon: "arrow-start",
|
7612
|
-
onClick:
|
7613
|
-
return setPageIndex(0);
|
7614
|
-
},
|
7471
|
+
onClick: () => setPageIndex(0),
|
7615
7472
|
"aria-label": showShortcutTexts ? texts.pagination.actions.firstPageWithShortcut : texts.pagination.actions.firstPage,
|
7616
7473
|
tooltip: showShortcutTexts ? texts.pagination.actions.firstPageWithShortcut : texts.pagination.actions.firstPage
|
7617
7474
|
}), React.createElement(IconButton, {
|
7618
7475
|
appearance: "default",
|
7619
7476
|
disabled: !canPreviousPage,
|
7620
7477
|
icon: "arrow-left",
|
7621
|
-
onClick:
|
7622
|
-
return setPageIndex(pageIndex - 1);
|
7623
|
-
},
|
7478
|
+
onClick: () => setPageIndex(pageIndex - 1),
|
7624
7479
|
"aria-label": showShortcutTexts ? texts.pagination.actions.previousPageWithShortcut : texts.pagination.actions.previousPage,
|
7625
7480
|
tooltip: showShortcutTexts ? texts.pagination.actions.previousPageWithShortcut : texts.pagination.actions.previousPage
|
7626
7481
|
}), showPageNumbers && pageCount > 0 && React.createElement(PageNumbers, {
|
@@ -7631,43 +7486,36 @@ var Pagination = /*#__PURE__*/React.forwardRef(function Pagination(props, ref) {
|
|
7631
7486
|
appearance: "default",
|
7632
7487
|
disabled: !canNextPage,
|
7633
7488
|
icon: "arrow-right",
|
7634
|
-
onClick:
|
7635
|
-
return setPageIndex(pageIndex + 1);
|
7636
|
-
},
|
7489
|
+
onClick: () => setPageIndex(pageIndex + 1),
|
7637
7490
|
"aria-label": showShortcutTexts ? texts.pagination.actions.nextPageWithShortcut : texts.pagination.actions.nextPage,
|
7638
7491
|
tooltip: showShortcutTexts ? texts.pagination.actions.nextPageWithShortcut : texts.pagination.actions.nextPage
|
7639
7492
|
}), React.createElement(IconButton, {
|
7640
7493
|
appearance: "default",
|
7641
7494
|
disabled: !canNextPage,
|
7642
7495
|
icon: "arrow-end",
|
7643
|
-
onClick:
|
7644
|
-
return setPageIndex(pageCount - 1);
|
7645
|
-
},
|
7496
|
+
onClick: () => setPageIndex(pageCount - 1),
|
7646
7497
|
"aria-label": showShortcutTexts ? texts.pagination.actions.lastPageWithShortcut : texts.pagination.actions.lastPage,
|
7647
7498
|
tooltip: showShortcutTexts ? texts.pagination.actions.lastPageWithShortcut : texts.pagination.actions.lastPage
|
7648
7499
|
})));
|
7649
7500
|
});
|
7650
7501
|
|
7651
|
-
|
7652
|
-
|
7653
|
-
|
7654
|
-
|
7655
|
-
|
7656
|
-
duration = _ref$duration === void 0 ? undefined : _ref$duration,
|
7657
|
-
props = _objectWithoutPropertiesLoose(_ref, _excluded$s);
|
7658
|
-
|
7659
|
-
var style;
|
7502
|
+
const Progress = ({
|
7503
|
+
duration = undefined,
|
7504
|
+
...props
|
7505
|
+
}) => {
|
7506
|
+
let style;
|
7660
7507
|
|
7661
7508
|
if (duration) {
|
7662
7509
|
style = {
|
7663
|
-
animationDuration: duration
|
7510
|
+
animationDuration: `${duration}ms`
|
7664
7511
|
};
|
7665
7512
|
}
|
7666
7513
|
|
7667
|
-
|
7668
|
-
|
7669
|
-
"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
|
7670
|
-
|
7514
|
+
const className = cn('bg-grey-light rounded block h-1 overflow-hidden w-full', props.className);
|
7515
|
+
const progressClassName = cn('yt-progress__bar block h-1', {
|
7516
|
+
"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,
|
7517
|
+
[`w-0 bg-grey-dark animate-[progress_linear]`]: duration
|
7518
|
+
});
|
7671
7519
|
return React__default.createElement("span", Object.assign({}, props, {
|
7672
7520
|
"data-taco": "progress",
|
7673
7521
|
className: className
|
@@ -9282,19 +9130,16 @@ const useTableRowCreation = (data, tableRef) => {
|
|
9282
9130
|
};
|
9283
9131
|
};
|
9284
9132
|
|
9285
|
-
|
9286
|
-
|
9287
|
-
|
9288
|
-
|
9289
|
-
|
9290
|
-
|
9291
|
-
|
9292
|
-
|
9293
|
-
|
9294
|
-
|
9295
|
-
otherProps = _objectWithoutPropertiesLoose(props, _excluded$t);
|
9296
|
-
|
9297
|
-
var className = cn('yt-tabs', "yt-tabs--" + orientation, {
|
9133
|
+
const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(props, ref) {
|
9134
|
+
const {
|
9135
|
+
id,
|
9136
|
+
defaultId,
|
9137
|
+
children,
|
9138
|
+
onChange,
|
9139
|
+
orientation = 'horizontal',
|
9140
|
+
...otherProps
|
9141
|
+
} = props;
|
9142
|
+
const className = cn('yt-tabs', `yt-tabs--${orientation}`, {
|
9298
9143
|
'flex w-full': orientation === 'vertical'
|
9299
9144
|
}, props.className);
|
9300
9145
|
return React.createElement(TabsPrimitive.Root, Object.assign({}, otherProps, {
|
@@ -9308,19 +9153,20 @@ var Tabs = /*#__PURE__*/React.forwardRef(function Tabs(props, ref) {
|
|
9308
9153
|
value: id
|
9309
9154
|
}), children);
|
9310
9155
|
});
|
9311
|
-
|
9312
|
-
|
9156
|
+
const TabList = /*#__PURE__*/React.forwardRef(function Tab(props, ref) {
|
9157
|
+
const className = cn('yt-tab__list border-b border-grey-light flex flex-row m-0 mb-4', props.className);
|
9313
9158
|
return React.createElement(TabsPrimitive.List, Object.assign({}, props, {
|
9314
9159
|
className: className,
|
9315
9160
|
ref: ref
|
9316
9161
|
}));
|
9317
9162
|
});
|
9318
|
-
|
9319
|
-
|
9320
|
-
|
9321
|
-
|
9322
|
-
|
9323
|
-
|
9163
|
+
const TabTrigger = /*#__PURE__*/React.forwardRef(function Tab(props, ref) {
|
9164
|
+
const {
|
9165
|
+
id,
|
9166
|
+
disabled,
|
9167
|
+
...otherProps
|
9168
|
+
} = props;
|
9169
|
+
const className = cn('yt-tab bg-transparent border-b-2 border-transparent text-grey-darkest m-0 py-2 px-4', disabled ? 'cursor-not-allowed !text-grey-darker' : 'cursor-pointer rounded-t hover:border-grey-dark aria-selected:border-blue aria-selected:text-black aria-selected:hover:border-blue-light hover:text-black active:yt-focus active:border-blue focus:yt-focus focus:border-blue', props.className);
|
9324
9170
|
return React.createElement(TabsPrimitive.Trigger, Object.assign({}, otherProps, {
|
9325
9171
|
className: className,
|
9326
9172
|
disabled: disabled,
|
@@ -9331,11 +9177,12 @@ var TabTrigger = /*#__PURE__*/React.forwardRef(function Tab(props, ref) {
|
|
9331
9177
|
value: id
|
9332
9178
|
}));
|
9333
9179
|
});
|
9334
|
-
|
9335
|
-
|
9336
|
-
|
9337
|
-
|
9338
|
-
|
9180
|
+
const TabContent = /*#__PURE__*/React.forwardRef(function Tab(props, ref) {
|
9181
|
+
const {
|
9182
|
+
id,
|
9183
|
+
...otherProps
|
9184
|
+
} = props;
|
9185
|
+
const className = cn('yt-tab__panel outline-none', props.className);
|
9339
9186
|
return React.createElement(TabsPrimitive.Content, Object.assign({}, otherProps, {
|
9340
9187
|
className: className,
|
9341
9188
|
ref: ref,
|
@@ -9346,19 +9193,22 @@ Tabs.List = TabList;
|
|
9346
9193
|
Tabs.Trigger = TabTrigger;
|
9347
9194
|
Tabs.Content = TabContent;
|
9348
9195
|
|
9349
|
-
|
9350
|
-
|
9351
|
-
|
9352
|
-
|
9353
|
-
|
9354
|
-
|
9196
|
+
const Textarea = /*#__PURE__*/React.forwardRef(function Textarea(props, ref) {
|
9197
|
+
const {
|
9198
|
+
defaultValue: _,
|
9199
|
+
highlighted,
|
9200
|
+
invalid,
|
9201
|
+
onKeyDown,
|
9202
|
+
...otherProps
|
9203
|
+
} = props;
|
9204
|
+
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
|
9355
9205
|
// if it has scroll height then the browser reverts to native scrolling behaviour only
|
9356
9206
|
// so we manually override it to ensure _our_ desired behaviour remains intact
|
9357
9207
|
|
9358
|
-
|
9208
|
+
const handleKeyDown = event => {
|
9359
9209
|
if (event.key === 'Home' || event.key === 'End') {
|
9360
9210
|
event.preventDefault();
|
9361
|
-
|
9211
|
+
const position = event.key === 'End' ? event.currentTarget.value.length : 0;
|
9362
9212
|
event.currentTarget.setSelectionRange(position, position);
|
9363
9213
|
event.currentTarget.scrollTop = event.key === 'End' ? event.currentTarget.scrollHeight : 0;
|
9364
9214
|
}
|
@@ -9376,18 +9226,18 @@ var Textarea = /*#__PURE__*/React.forwardRef(function Textarea(props, ref) {
|
|
9376
9226
|
}));
|
9377
9227
|
});
|
9378
9228
|
|
9379
|
-
|
9380
|
-
|
9381
|
-
|
9382
|
-
|
9383
|
-
|
9384
|
-
|
9385
|
-
|
9229
|
+
const Switch = /*#__PURE__*/React.forwardRef(function Switch(props, ref) {
|
9230
|
+
const {
|
9231
|
+
label,
|
9232
|
+
onChange,
|
9233
|
+
...otherProps
|
9234
|
+
} = props;
|
9235
|
+
const className = cn('group h-5 w-9 flex rounded-full inline-flex', {
|
9386
9236
|
'mr-2': !!label,
|
9387
9237
|
'bg-grey-darker hover:bg-grey-dark aria-checked:bg-blue aria-checked:hover:bg-blue-light focus:yt-focus': !props.disabled,
|
9388
9238
|
'bg-grey-light cursor-not-allowed aria-checked:bg-blue-light': props.disabled
|
9389
9239
|
}, props.className);
|
9390
|
-
|
9240
|
+
const element = React.createElement(PrimitiveSwitch.Root, Object.assign({}, otherProps, {
|
9391
9241
|
className: className,
|
9392
9242
|
onCheckedChange: onChange,
|
9393
9243
|
ref: ref
|
@@ -9396,7 +9246,7 @@ var Switch = /*#__PURE__*/React.forwardRef(function Switch(props, ref) {
|
|
9396
9246
|
}));
|
9397
9247
|
|
9398
9248
|
if (label) {
|
9399
|
-
|
9249
|
+
const labelClassName = cn('flex items-center cursor-pointer', {
|
9400
9250
|
'cursor-not-allowed text-grey-dark': props.disabled
|
9401
9251
|
});
|
9402
9252
|
return React.createElement("label", {
|
@@ -9407,23 +9257,22 @@ var Switch = /*#__PURE__*/React.forwardRef(function Switch(props, ref) {
|
|
9407
9257
|
return element;
|
9408
9258
|
});
|
9409
9259
|
|
9410
|
-
|
9411
|
-
|
9412
|
-
|
9413
|
-
|
9414
|
-
|
9415
|
-
|
9416
|
-
|
9417
|
-
|
9418
|
-
|
9419
|
-
|
9420
|
-
|
9421
|
-
|
9422
|
-
|
9423
|
-
|
9424
|
-
|
9425
|
-
|
9426
|
-
var onWindowKeyDown = function onWindowKeyDown(event) {
|
9260
|
+
const Tooltip$1 = ({
|
9261
|
+
continuous,
|
9262
|
+
index,
|
9263
|
+
isLastStep,
|
9264
|
+
step,
|
9265
|
+
backProps,
|
9266
|
+
primaryProps,
|
9267
|
+
skipProps,
|
9268
|
+
tooltipProps,
|
9269
|
+
size,
|
9270
|
+
locale,
|
9271
|
+
disableTourSkipOnEsc
|
9272
|
+
}) => {
|
9273
|
+
const skipButtonRef = React.useRef(null);
|
9274
|
+
React.useEffect(() => {
|
9275
|
+
const onWindowKeyDown = event => {
|
9427
9276
|
if (!disableTourSkipOnEsc) {
|
9428
9277
|
if (event.keyCode === keycode('esc') && skipButtonRef.current !== null) {
|
9429
9278
|
event.preventDefault();
|
@@ -9434,7 +9283,7 @@ var Tooltip$1 = function Tooltip(_ref) {
|
|
9434
9283
|
};
|
9435
9284
|
|
9436
9285
|
window.addEventListener('keydown', onWindowKeyDown);
|
9437
|
-
return
|
9286
|
+
return () => {
|
9438
9287
|
window.removeEventListener('keydown', onWindowKeyDown);
|
9439
9288
|
};
|
9440
9289
|
}, []);
|
@@ -9453,30 +9302,31 @@ var Tooltip$1 = function Tooltip(_ref) {
|
|
9453
9302
|
appearance: "discrete"
|
9454
9303
|
}), locale.back), React.createElement(Button$1, Object.assign({}, primaryProps, {
|
9455
9304
|
appearance: "primary"
|
9456
|
-
}), continuous ? isLastStep ? locale.last
|
9305
|
+
}), continuous ? isLastStep ? `${locale.last} (${index + 1}/${size})` : `${locale.next} (${index + 1}/${size})` : locale.close)));
|
9457
9306
|
}; // eslint-disable-next-line @typescript-eslint/no-unused-vars
|
9458
9307
|
|
9459
9308
|
|
9460
|
-
|
9461
|
-
|
9462
|
-
|
9463
|
-
|
9464
|
-
|
9465
|
-
|
9466
|
-
|
9467
|
-
|
9468
|
-
|
9469
|
-
|
9470
|
-
|
9471
|
-
|
9472
|
-
|
9473
|
-
|
9474
|
-
|
9475
|
-
|
9476
|
-
|
9477
|
-
|
9478
|
-
|
9479
|
-
|
9309
|
+
const TourStep = _props => null;
|
9310
|
+
const Tour = props => {
|
9311
|
+
const {
|
9312
|
+
texts: {
|
9313
|
+
tour
|
9314
|
+
}
|
9315
|
+
} = useLocalization();
|
9316
|
+
const {
|
9317
|
+
autoStart: run,
|
9318
|
+
onComplete,
|
9319
|
+
onClose,
|
9320
|
+
onReady,
|
9321
|
+
spotlightClicks,
|
9322
|
+
disableCloseOnEsc: disableTourSkipOnEsc,
|
9323
|
+
disableScrollParentFix = false,
|
9324
|
+
scrollOffset,
|
9325
|
+
...rest
|
9326
|
+
} = props;
|
9327
|
+
const steps = React.useMemo(() => {
|
9328
|
+
return React.Children.map(props.children, child => {
|
9329
|
+
const step = {
|
9480
9330
|
disableBeacon: !child.props.showBeacon,
|
9481
9331
|
target: child.props.selector,
|
9482
9332
|
placement: child.props.position,
|
@@ -9486,12 +9336,10 @@ var Tour = function Tour(props) {
|
|
9486
9336
|
return step;
|
9487
9337
|
});
|
9488
9338
|
}, [props.children]);
|
9489
|
-
|
9339
|
+
const getStep = React.useCallback(selector => {
|
9490
9340
|
var _props$children$find;
|
9491
9341
|
|
9492
|
-
return (_props$children$find = props.children.find(
|
9493
|
-
return child.props.selector === selector;
|
9494
|
-
})) === null || _props$children$find === void 0 ? void 0 : _props$children$find.props;
|
9342
|
+
return (_props$children$find = props.children.find(child => child.props.selector === selector)) === null || _props$children$find === void 0 ? void 0 : _props$children$find.props;
|
9495
9343
|
}, [props.children]);
|
9496
9344
|
|
9497
9345
|
function callback(state) {
|
@@ -9521,17 +9369,16 @@ var Tour = function Tour(props) {
|
|
9521
9369
|
floaterProps: {
|
9522
9370
|
disableAnimation: true
|
9523
9371
|
},
|
9524
|
-
tooltipComponent:
|
9525
|
-
|
9526
|
-
|
9527
|
-
|
9528
|
-
}));
|
9529
|
-
},
|
9372
|
+
tooltipComponent: tooltipProps => React.createElement(Tooltip$1, Object.assign({}, tooltipProps, {
|
9373
|
+
locale: tour,
|
9374
|
+
disableTourSkipOnEsc: disableTourSkipOnEsc
|
9375
|
+
})),
|
9530
9376
|
locale: tour,
|
9531
9377
|
spotlightPadding: 8,
|
9532
9378
|
spotlightClicks: spotlightClicks,
|
9533
9379
|
disableScrollParentFix: disableScrollParentFix,
|
9534
9380
|
callback: callback,
|
9381
|
+
scrollOffset: scrollOffset,
|
9535
9382
|
styles: {
|
9536
9383
|
/** style beacon */
|
9537
9384
|
options: {
|
@@ -9567,12 +9414,12 @@ var useOnClickOutside = function useOnClickOutside(ref, callback) {
|
|
9567
9414
|
}, [ref, callback]);
|
9568
9415
|
};
|
9569
9416
|
|
9570
|
-
|
9571
|
-
|
9572
|
-
|
9573
|
-
|
9574
|
-
|
9575
|
-
|
9417
|
+
const Content$6 = /*#__PURE__*/React.forwardRef(function CardContent(externalProps, ref) {
|
9418
|
+
const {
|
9419
|
+
noPadding,
|
9420
|
+
...props
|
9421
|
+
} = externalProps;
|
9422
|
+
const className = cn('flex-grow overflow-auto', {
|
9576
9423
|
'mx-4 mb-4': !noPadding
|
9577
9424
|
}, props.className);
|
9578
9425
|
return React.createElement("div", Object.assign({}, props, {
|
@@ -9580,11 +9427,13 @@ var Content$6 = /*#__PURE__*/React.forwardRef(function CardContent(externalProps
|
|
9580
9427
|
ref: ref
|
9581
9428
|
}));
|
9582
9429
|
});
|
9583
|
-
|
9584
|
-
|
9585
|
-
|
9586
|
-
|
9587
|
-
|
9430
|
+
const Card = /*#__PURE__*/React.forwardRef(function Card(props, ref) {
|
9431
|
+
const {
|
9432
|
+
title,
|
9433
|
+
menu,
|
9434
|
+
children
|
9435
|
+
} = props;
|
9436
|
+
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);
|
9588
9437
|
return React.createElement("div", {
|
9589
9438
|
className: className,
|
9590
9439
|
"data-taco": "card",
|
@@ -9661,11 +9510,13 @@ exports.parseFromISOString = parseFromISOString;
|
|
9661
9510
|
exports.removeChildTableRow = removeChildTableRow;
|
9662
9511
|
exports.setByRowIndexPath = setByRowIndexPath;
|
9663
9512
|
exports.useBoundingClientRectListener = useBoundingClientRectListener;
|
9513
|
+
exports.useDropTarget = useDropTarget;
|
9664
9514
|
exports.useListKeyboardNavigation = useListKeyboardNavigation;
|
9665
9515
|
exports.useListScrollTo = useListScrollTo;
|
9666
9516
|
exports.useLocalization = useLocalization;
|
9667
9517
|
exports.useOnClickOutside = useOnClickOutside;
|
9668
9518
|
exports.usePagination = usePagination;
|
9519
|
+
exports.useProxiedRef = useProxiedRef;
|
9669
9520
|
exports.useRadioGroup = useRadioGroup;
|
9670
9521
|
exports.useTableRowCreation = useTableRowCreation;
|
9671
9522
|
exports.useTaco = useTaco;
|