@economic/taco 1.1.5-alpha.0 → 1.1.5-alpha.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/esm/components/Card/Card.js +14 -12
- package/dist/esm/components/Card/Card.js.map +1 -1
- package/dist/esm/components/Checkbox/Checkbox.js +15 -18
- package/dist/esm/components/Checkbox/Checkbox.js.map +1 -1
- package/dist/esm/components/Combobox/Combobox.js +23 -25
- package/dist/esm/components/Combobox/Combobox.js.map +1 -1
- package/dist/esm/components/Datepicker/Datepicker.js +48 -52
- package/dist/esm/components/Datepicker/Datepicker.js.map +1 -1
- package/dist/esm/components/Dialog/Dialog.js +39 -58
- package/dist/esm/components/Dialog/Dialog.js.map +1 -1
- package/dist/esm/components/Field/Field.js +10 -12
- package/dist/esm/components/Field/Field.js.map +1 -1
- package/dist/esm/components/Form/Form.js +6 -8
- package/dist/esm/components/Form/Form.js.map +1 -1
- package/dist/esm/components/Group/Group.js +6 -8
- package/dist/esm/components/Group/Group.js.map +1 -1
- package/dist/esm/components/Hanger/Hanger.js +27 -35
- package/dist/esm/components/Hanger/Hanger.js.map +1 -1
- package/dist/esm/components/HoverCard/HoverCard.js +8 -9
- package/dist/esm/components/HoverCard/HoverCard.js.map +1 -1
- package/dist/esm/components/Icon/Icon.js +7 -8
- package/dist/esm/components/Icon/Icon.js.map +1 -1
- package/dist/esm/components/IconButton/IconButton.js +9 -11
- package/dist/esm/components/IconButton/IconButton.js.map +1 -1
- package/dist/esm/components/Input/Input.js +25 -25
- package/dist/esm/components/Input/Input.js.map +1 -1
- package/dist/esm/components/Listbox/Listbox.js +24 -25
- package/dist/esm/components/Listbox/Listbox.js.map +1 -1
- package/dist/esm/components/Menu/Menu.js +16 -34
- package/dist/esm/components/Menu/Menu.js.map +1 -1
- package/dist/esm/components/Navigation/Navigation.js +35 -44
- package/dist/esm/components/Navigation/Navigation.js.map +1 -1
- package/dist/esm/components/Pagination/Pagination.js +39 -56
- package/dist/esm/components/Pagination/Pagination.js.map +1 -1
- package/dist/esm/components/Popover/Popover.js +29 -34
- package/dist/esm/components/Popover/Popover.js.map +1 -1
- package/dist/esm/components/Progress/Progress.js +11 -15
- package/dist/esm/components/Progress/Progress.js.map +1 -1
- package/dist/esm/components/Provider/Provider.js +13 -18
- package/dist/esm/components/Provider/Provider.js.map +1 -1
- package/dist/esm/components/RadioGroup/RadioGroup.js +45 -57
- package/dist/esm/components/RadioGroup/RadioGroup.js.map +1 -1
- package/dist/esm/components/SearchInput/SearchInput.js +11 -11
- package/dist/esm/components/SearchInput/SearchInput.js.map +1 -1
- package/dist/esm/components/Select/Select.js +30 -31
- package/dist/esm/components/Select/Select.js.map +1 -1
- package/dist/esm/components/Spinner/Spinner.js +12 -19
- package/dist/esm/components/Spinner/Spinner.js.map +1 -1
- package/dist/esm/components/Switch/Switch.js +9 -10
- package/dist/esm/components/Switch/Switch.js.map +1 -1
- package/dist/esm/components/Tabs/Tabs.js +25 -27
- package/dist/esm/components/Tabs/Tabs.js.map +1 -1
- package/dist/esm/components/Textarea/Textarea.js +11 -9
- package/dist/esm/components/Textarea/Textarea.js.map +1 -1
- package/dist/esm/components/Toast/Toaster.js +88 -118
- package/dist/esm/components/Toast/Toaster.js.map +1 -1
- package/dist/esm/components/Tooltip/Tooltip.js +7 -8
- package/dist/esm/components/Tooltip/Tooltip.js.map +1 -1
- package/dist/esm/components/Tour/Tour.js +44 -50
- package/dist/esm/components/Tour/Tour.js.map +1 -1
- package/dist/esm/components/Treeview/Treeview.js +26 -36
- package/dist/esm/components/Treeview/Treeview.js.map +1 -1
- package/dist/esm/components/VisuallyHidden/VisuallyHidden.js +1 -1
- package/dist/esm/components/VisuallyHidden/VisuallyHidden.js.map +1 -1
- package/dist/esm/index.js +1 -0
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/utils/hooks/useProxiedRef.js +3 -3
- package/dist/esm/utils/hooks/useProxiedRef.js.map +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/taco.cjs.development.js +710 -850
- 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 +3 -3
@@ -3139,17 +3139,17 @@ const icons = {
|
|
3139
3139
|
zoom: Zoom
|
3140
3140
|
};
|
3141
3141
|
|
3142
|
-
|
3143
|
-
var Icon = /*#__PURE__*/React__default.forwardRef(function Icon(props, ref) {
|
3142
|
+
const Icon = /*#__PURE__*/React__default.forwardRef(function Icon(props, ref) {
|
3144
3143
|
var _props$className;
|
3145
3144
|
|
3146
|
-
|
3147
|
-
|
3148
|
-
|
3149
|
-
|
3145
|
+
const {
|
3146
|
+
name,
|
3147
|
+
...otherProps
|
3148
|
+
} = props;
|
3149
|
+
const Component = icons[name];
|
3150
3150
|
/* 24x24 _at the base body font_ - must be em so that they scale with font size - tailwind spacing uses rem */
|
3151
3151
|
|
3152
|
-
|
3152
|
+
const className = cn('inline-flex h-[1.715em] w-[1.715em] flex-shrink-0', props.className, {
|
3153
3153
|
'p-[3px]': (_props$className = props.className) === null || _props$className === void 0 ? void 0 : _props$className.includes('rounded-full')
|
3154
3154
|
});
|
3155
3155
|
return Component ? React__default.createElement(Component, Object.assign({}, otherProps, {
|
@@ -3161,7 +3161,7 @@ var Icon = /*#__PURE__*/React__default.forwardRef(function Icon(props, ref) {
|
|
3161
3161
|
})) : null;
|
3162
3162
|
});
|
3163
3163
|
|
3164
|
-
var _excluded
|
3164
|
+
var _excluded = ["id"],
|
3165
3165
|
_excluded2 = ["id", "defaultId", "onChange", "as"];
|
3166
3166
|
var AccordionContext = /*#__PURE__*/React__default.createContext({
|
3167
3167
|
as: 'h2'
|
@@ -3199,7 +3199,7 @@ var Content = /*#__PURE__*/React__default.forwardRef(function AccordionContent(p
|
|
3199
3199
|
|
3200
3200
|
var Item = function Item(props) {
|
3201
3201
|
var id = props.id,
|
3202
|
-
otherProps = _objectWithoutPropertiesLoose(props, _excluded
|
3202
|
+
otherProps = _objectWithoutPropertiesLoose(props, _excluded);
|
3203
3203
|
|
3204
3204
|
return React__default.createElement(AccordionPrimitive.Item, Object.assign({}, otherProps, {
|
3205
3205
|
value: id
|
@@ -3254,7 +3254,7 @@ var Backdrop = /*#__PURE__*/React.forwardRef(function Backdrop(props, ref) {
|
|
3254
3254
|
}));
|
3255
3255
|
});
|
3256
3256
|
|
3257
|
-
|
3257
|
+
const VisuallyHidden = /*#__PURE__*/React.forwardRef(function VisuallyHidden(props, ref) {
|
3258
3258
|
return React.createElement("span", Object.assign({}, props, {
|
3259
3259
|
className: "sr-only",
|
3260
3260
|
ref: ref
|
@@ -3300,7 +3300,7 @@ const getOutlineClasses = state => {
|
|
3300
3300
|
}
|
3301
3301
|
};
|
3302
3302
|
|
3303
|
-
var _excluded$
|
3303
|
+
var _excluded$1 = ["children", "compact", "outline", "state"];
|
3304
3304
|
var Badge = /*#__PURE__*/React.forwardRef(function Badge(props, ref) {
|
3305
3305
|
var _cn;
|
3306
3306
|
|
@@ -3310,7 +3310,7 @@ var Badge = /*#__PURE__*/React.forwardRef(function Badge(props, ref) {
|
|
3310
3310
|
_props$outline = props.outline,
|
3311
3311
|
outline = _props$outline === void 0 ? false : _props$outline,
|
3312
3312
|
state = props.state,
|
3313
|
-
otherProps = _objectWithoutPropertiesLoose(props, _excluded$
|
3313
|
+
otherProps = _objectWithoutPropertiesLoose(props, _excluded$1);
|
3314
3314
|
|
3315
3315
|
var className = cn('rounded-full border font-bold text-xs uppercase overflow-hidden whitespace-nowrap inline-flex items-center justify-center h-5', (_cn = {}, _cn[getOutlineClasses(state)] = outline, _cn["border-transparent " + getStateClasses(state)] = !outline, _cn['h-2 w-2 min-w-0'] = compact, _cn['h-5 py-0 px-1.5'] = !compact, _cn), props.className);
|
3316
3316
|
return React.createElement("span", Object.assign({}, otherProps, {
|
@@ -3372,13 +3372,13 @@ const Button = /*#__PURE__*/React.forwardRef(function Button(props, ref) {
|
|
3372
3372
|
}), React.Children.count(props.children) > 1 ? React.Children.map(props.children, child => typeof child === 'string' ? React.createElement("span", null, child) : child) : props.children);
|
3373
3373
|
});
|
3374
3374
|
|
3375
|
-
|
3376
|
-
|
3377
|
-
|
3378
|
-
|
3379
|
-
|
3380
|
-
|
3381
|
-
|
3375
|
+
const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(props, ref) {
|
3376
|
+
const {
|
3377
|
+
title,
|
3378
|
+
children,
|
3379
|
+
placement,
|
3380
|
+
...otherProps
|
3381
|
+
} = props;
|
3382
3382
|
return React.createElement(TooltipPrimitive.Root, {
|
3383
3383
|
delayDuration: 50
|
3384
3384
|
}, React.createElement(TooltipPrimitive.Trigger, {
|
@@ -3470,14 +3470,13 @@ const createButton = (props, className, ref) => {
|
|
3470
3470
|
return button;
|
3471
3471
|
};
|
3472
3472
|
|
3473
|
-
|
3474
|
-
|
3475
|
-
|
3476
|
-
|
3477
|
-
|
3478
|
-
|
3479
|
-
|
3480
|
-
var className = cn('w-8', getButtonClasses(), getAppearanceClasses(otherProps.appearance, true), {
|
3473
|
+
const IconButton = /*#__PURE__*/React.forwardRef(function IconButton(props, ref) {
|
3474
|
+
const {
|
3475
|
+
icon,
|
3476
|
+
rounded = false,
|
3477
|
+
...otherProps
|
3478
|
+
} = props;
|
3479
|
+
const className = cn('w-8', getButtonClasses(), getAppearanceClasses(otherProps.appearance, true), {
|
3481
3480
|
'rounded-full': rounded,
|
3482
3481
|
rounded: !rounded,
|
3483
3482
|
'cursor-not-allowed opacity-50': props.disabled,
|
@@ -3488,13 +3487,13 @@ var IconButton = /*#__PURE__*/React.forwardRef(function IconButton(props, ref) {
|
|
3488
3487
|
return null;
|
3489
3488
|
}
|
3490
3489
|
|
3491
|
-
return createButton(
|
3490
|
+
return createButton({ ...otherProps,
|
3492
3491
|
children: React.createElement(Icon, {
|
3493
3492
|
name: icon,
|
3494
3493
|
className: "m-0 p-0"
|
3495
3494
|
}),
|
3496
3495
|
'data-taco': 'icon-button'
|
3497
|
-
}
|
3496
|
+
}, className, ref);
|
3498
3497
|
});
|
3499
3498
|
|
3500
3499
|
var Banner = /*#__PURE__*/React.forwardRef(function Banner(props, ref) {
|
@@ -3514,10 +3513,10 @@ var Banner = /*#__PURE__*/React.forwardRef(function Banner(props, ref) {
|
|
3514
3513
|
}) : null);
|
3515
3514
|
});
|
3516
3515
|
|
3517
|
-
var _excluded$
|
3516
|
+
var _excluded$2 = ["fluid"];
|
3518
3517
|
var Button$1 = /*#__PURE__*/React.forwardRef(function Button(props, ref) {
|
3519
3518
|
var fluid = props.fluid,
|
3520
|
-
otherProps = _objectWithoutPropertiesLoose(props, _excluded$
|
3519
|
+
otherProps = _objectWithoutPropertiesLoose(props, _excluded$2);
|
3521
3520
|
|
3522
3521
|
var className = cn(getButtonClasses(), getAppearanceClasses(otherProps.appearance), 'rounded px-3', {
|
3523
3522
|
'cursor-not-allowed opacity-50': props.disabled,
|
@@ -3588,27 +3587,21 @@ function useTimer(duration = 0, callback) {
|
|
3588
3587
|
};
|
3589
3588
|
}
|
3590
3589
|
|
3591
|
-
|
3592
|
-
|
3593
|
-
|
3594
|
-
|
3595
|
-
|
3596
|
-
|
3597
|
-
|
3598
|
-
|
3599
|
-
|
3600
|
-
setVisibility = _React$useState[1];
|
3601
|
-
|
3602
|
-
React__default.useEffect(function () {
|
3603
|
-
var timeout;
|
3590
|
+
const Spinner$1 = /*#__PURE__*/React__default.forwardRef(function Spinner(props, ref) {
|
3591
|
+
const {
|
3592
|
+
delay = 500,
|
3593
|
+
label,
|
3594
|
+
...otherProps
|
3595
|
+
} = props;
|
3596
|
+
const [visible, setVisibility] = React__default.useState(!delay);
|
3597
|
+
React__default.useEffect(() => {
|
3598
|
+
let timeout;
|
3604
3599
|
|
3605
3600
|
if (delay) {
|
3606
|
-
timeout = window.setTimeout(
|
3607
|
-
return setVisibility(true);
|
3608
|
-
}, delay);
|
3601
|
+
timeout = window.setTimeout(() => setVisibility(true), delay);
|
3609
3602
|
}
|
3610
3603
|
|
3611
|
-
return
|
3604
|
+
return () => {
|
3612
3605
|
if (timeout) {
|
3613
3606
|
clearTimeout(timeout);
|
3614
3607
|
}
|
@@ -3619,7 +3612,7 @@ var Spinner$1 = /*#__PURE__*/React__default.forwardRef(function Spinner(props, r
|
|
3619
3612
|
return null;
|
3620
3613
|
}
|
3621
3614
|
|
3622
|
-
|
3615
|
+
const className = cn('inline-flex flex-col relative items-center', otherProps.className);
|
3623
3616
|
return React__default.createElement("div", Object.assign({}, otherProps, {
|
3624
3617
|
className: className,
|
3625
3618
|
"data-taco": "spinner",
|
@@ -3745,62 +3738,49 @@ const Toast = ({
|
|
3745
3738
|
}));
|
3746
3739
|
};
|
3747
3740
|
|
3748
|
-
|
3749
|
-
|
3750
|
-
var ToastContext = /*#__PURE__*/React.createContext({});
|
3741
|
+
const DEFAULT_AUTO_CLOSE_TIMEOUT = 7500;
|
3742
|
+
const ToastContext = /*#__PURE__*/React.createContext({});
|
3751
3743
|
|
3752
|
-
|
3753
|
-
|
3754
|
-
|
3755
|
-
return JSON.stringify(toast.content) === JSON.stringify(content);
|
3756
|
-
});
|
3744
|
+
const insertToastWithoutDuplicates = (currentToasts, id, content, options, close) => {
|
3745
|
+
const nextToasts = [...currentToasts];
|
3746
|
+
const existingToastIndex = currentToasts.findIndex(toast => JSON.stringify(toast.content) === JSON.stringify(content));
|
3757
3747
|
|
3758
3748
|
if (existingToastIndex > -1) {
|
3759
3749
|
nextToasts[existingToastIndex].lastDuplicateId = id;
|
3760
3750
|
nextToasts[existingToastIndex].lastUpdated = Date.now();
|
3761
3751
|
} else {
|
3762
3752
|
nextToasts.push({
|
3763
|
-
id
|
3753
|
+
id,
|
3764
3754
|
content: typeof content === 'function' ? content(close) : content,
|
3765
|
-
options
|
3755
|
+
options
|
3766
3756
|
});
|
3767
3757
|
}
|
3768
3758
|
|
3769
3759
|
return nextToasts;
|
3770
3760
|
};
|
3771
3761
|
|
3772
|
-
|
3773
|
-
|
3774
|
-
|
3775
|
-
|
3776
|
-
|
3777
|
-
toasts = _React$useState[0],
|
3778
|
-
setToasts = _React$useState[1];
|
3762
|
+
const ToastProvider = ({
|
3763
|
+
children,
|
3764
|
+
...props
|
3765
|
+
}) => {
|
3766
|
+
const [toasts, setToasts] = React.useState([]);
|
3779
3767
|
|
3780
|
-
|
3781
|
-
setToasts(
|
3782
|
-
return currentToasts.filter(function (toast) {
|
3783
|
-
return toast.id !== id;
|
3784
|
-
});
|
3785
|
-
});
|
3768
|
+
const handleClose = id => {
|
3769
|
+
setToasts(currentToasts => currentToasts.filter(toast => toast.id !== id));
|
3786
3770
|
}; // memoize (useCallback) this function,
|
3787
3771
|
// it is the value of the context provider and we don't want it to trigger state tree re-renders on provider children
|
3788
3772
|
|
3789
3773
|
|
3790
|
-
|
3791
|
-
|
3774
|
+
const toaster = React.useCallback((content, options) => {
|
3775
|
+
const id = uuid.v4();
|
3792
3776
|
|
3793
|
-
|
3794
|
-
return handleClose(id);
|
3795
|
-
};
|
3777
|
+
const close = () => handleClose(id);
|
3796
3778
|
|
3797
|
-
setToasts(
|
3798
|
-
return insertToastWithoutDuplicates(currentToasts, id, content, options, close);
|
3799
|
-
});
|
3779
|
+
setToasts(currentToasts => insertToastWithoutDuplicates(currentToasts, id, content, options, close));
|
3800
3780
|
|
3801
|
-
|
3802
|
-
setToasts(
|
3803
|
-
|
3781
|
+
const update = (content, options) => {
|
3782
|
+
setToasts(currentToasts => {
|
3783
|
+
const nextToasts = currentToasts.filter(toast => {
|
3804
3784
|
if (toast.lastDuplicateId) {
|
3805
3785
|
return toast.lastDuplicateId !== id;
|
3806
3786
|
}
|
@@ -3811,80 +3791,70 @@ var ToastProvider = function ToastProvider(_ref) {
|
|
3811
3791
|
});
|
3812
3792
|
};
|
3813
3793
|
|
3814
|
-
|
3815
|
-
update(content,
|
3816
|
-
autoClose: DEFAULT_AUTO_CLOSE_TIMEOUT
|
3817
|
-
|
3794
|
+
const success = (content, options) => {
|
3795
|
+
update(content, {
|
3796
|
+
autoClose: DEFAULT_AUTO_CLOSE_TIMEOUT,
|
3797
|
+
...options,
|
3818
3798
|
type: 'success'
|
3819
|
-
})
|
3799
|
+
});
|
3820
3800
|
};
|
3821
3801
|
|
3822
|
-
|
3823
|
-
update(content,
|
3802
|
+
const error = (content, options) => {
|
3803
|
+
update(content, { ...options,
|
3824
3804
|
type: 'error'
|
3825
|
-
})
|
3805
|
+
});
|
3826
3806
|
};
|
3827
3807
|
|
3828
|
-
|
3829
|
-
update(content,
|
3808
|
+
const warning = (content, options) => {
|
3809
|
+
update(content, { ...options,
|
3830
3810
|
type: 'warning'
|
3831
|
-
})
|
3811
|
+
});
|
3832
3812
|
};
|
3833
3813
|
|
3834
|
-
|
3835
|
-
update(content,
|
3814
|
+
const information = (content, options) => {
|
3815
|
+
update(content, { ...options,
|
3836
3816
|
type: 'information'
|
3837
|
-
})
|
3817
|
+
});
|
3838
3818
|
};
|
3839
3819
|
|
3840
|
-
|
3841
|
-
update(content,
|
3820
|
+
const loading = (content, options) => {
|
3821
|
+
update(content, { ...options,
|
3842
3822
|
type: 'loading'
|
3843
|
-
})
|
3823
|
+
});
|
3844
3824
|
};
|
3845
3825
|
|
3846
3826
|
return {
|
3847
|
-
success
|
3848
|
-
error
|
3849
|
-
warning
|
3850
|
-
information
|
3851
|
-
loading
|
3852
|
-
close
|
3827
|
+
success,
|
3828
|
+
error,
|
3829
|
+
warning,
|
3830
|
+
information,
|
3831
|
+
loading,
|
3832
|
+
close
|
3853
3833
|
};
|
3854
3834
|
}, []); // no need to rebind these every render, do them once in an effect
|
3855
3835
|
|
3856
|
-
React.useEffect(
|
3857
|
-
toaster.success =
|
3858
|
-
|
3859
|
-
|
3860
|
-
|
3861
|
-
|
3862
|
-
}));
|
3863
|
-
};
|
3836
|
+
React.useEffect(() => {
|
3837
|
+
toaster.success = (content, options) => toaster(content, {
|
3838
|
+
autoClose: DEFAULT_AUTO_CLOSE_TIMEOUT,
|
3839
|
+
...options,
|
3840
|
+
type: 'success'
|
3841
|
+
});
|
3864
3842
|
|
3865
|
-
toaster.error =
|
3866
|
-
|
3867
|
-
|
3868
|
-
}));
|
3869
|
-
};
|
3843
|
+
toaster.error = (content, options) => toaster(content, { ...options,
|
3844
|
+
type: 'error'
|
3845
|
+
});
|
3870
3846
|
|
3871
|
-
toaster.warning =
|
3872
|
-
|
3873
|
-
|
3874
|
-
}));
|
3875
|
-
};
|
3847
|
+
toaster.warning = (content, options) => toaster(content, { ...options,
|
3848
|
+
type: 'warning'
|
3849
|
+
});
|
3876
3850
|
|
3877
|
-
toaster.information =
|
3878
|
-
|
3879
|
-
|
3880
|
-
}));
|
3881
|
-
};
|
3851
|
+
toaster.information = (content, options) => toaster(content, { ...options,
|
3852
|
+
type: 'information'
|
3853
|
+
});
|
3882
3854
|
|
3883
|
-
toaster.loading =
|
3884
|
-
|
3885
|
-
|
3886
|
-
}));
|
3887
|
-
};
|
3855
|
+
toaster.loading = (content, options) => toaster(content, { ...options,
|
3856
|
+
type: 'loading'
|
3857
|
+
});
|
3888
3858
|
}, []);
|
3889
3859
|
return React.createElement(ToastContext.Provider, Object.assign({}, props, {
|
3890
3860
|
value: toaster
|
@@ -3894,43 +3864,37 @@ var ToastProvider = function ToastProvider(_ref) {
|
|
3894
3864
|
role: "log"
|
3895
3865
|
}, React.createElement(framerMotion.AnimatePresence, {
|
3896
3866
|
initial: false
|
3897
|
-
}, toasts.map(
|
3898
|
-
|
3899
|
-
|
3867
|
+
}, toasts.map(toast => React.createElement(framerMotion.motion.div, {
|
3868
|
+
key: toast.id,
|
3869
|
+
transition: {
|
3870
|
+
type: 'spring',
|
3871
|
+
damping: 20,
|
3872
|
+
stiffness: 300
|
3873
|
+
},
|
3874
|
+
initial: {
|
3875
|
+
opacity: 0,
|
3876
|
+
y: 10,
|
3877
|
+
scale: 0.5
|
3878
|
+
},
|
3879
|
+
animate: {
|
3880
|
+
opacity: 1,
|
3881
|
+
y: 0,
|
3882
|
+
scale: 1
|
3883
|
+
},
|
3884
|
+
exit: {
|
3885
|
+
opacity: 0,
|
3886
|
+
scale: 0.5,
|
3900
3887
|
transition: {
|
3901
|
-
|
3902
|
-
damping: 20,
|
3903
|
-
stiffness: 300
|
3904
|
-
},
|
3905
|
-
initial: {
|
3906
|
-
opacity: 0,
|
3907
|
-
y: 10,
|
3908
|
-
scale: 0.5
|
3909
|
-
},
|
3910
|
-
animate: {
|
3911
|
-
opacity: 1,
|
3912
|
-
y: 0,
|
3913
|
-
scale: 1
|
3914
|
-
},
|
3915
|
-
exit: {
|
3916
|
-
opacity: 0,
|
3917
|
-
scale: 0.5,
|
3918
|
-
transition: {
|
3919
|
-
duration: 0.2
|
3920
|
-
}
|
3888
|
+
duration: 0.2
|
3921
3889
|
}
|
3922
|
-
}
|
3923
|
-
|
3924
|
-
|
3925
|
-
|
3926
|
-
})));
|
3927
|
-
}))));
|
3928
|
-
};
|
3929
|
-
var useToast = function useToast() {
|
3930
|
-
return React.useContext(ToastContext);
|
3890
|
+
}
|
3891
|
+
}, React.createElement(Toast, Object.assign({}, toast, {
|
3892
|
+
onClose: () => handleClose(toast.id)
|
3893
|
+
})))))));
|
3931
3894
|
};
|
3895
|
+
const useToast = () => React.useContext(ToastContext);
|
3932
3896
|
|
3933
|
-
|
3897
|
+
const defaultLocalisationTexts = {
|
3934
3898
|
calendar: {
|
3935
3899
|
months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
|
3936
3900
|
weekdaysShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
|
@@ -4005,37 +3969,32 @@ var defaultLocalisationTexts = {
|
|
4005
3969
|
inputLabel: 'Search...'
|
4006
3970
|
}
|
4007
3971
|
};
|
4008
|
-
|
3972
|
+
const defaultLocalizationContext = {
|
4009
3973
|
locale: 'en-GB',
|
4010
3974
|
texts: defaultLocalisationTexts,
|
4011
3975
|
formatting: {
|
4012
3976
|
date: 'dd.mm.yy'
|
4013
3977
|
}
|
4014
3978
|
};
|
4015
|
-
|
3979
|
+
const Context = /*#__PURE__*/React.createContext({
|
4016
3980
|
localization: defaultLocalizationContext
|
4017
3981
|
});
|
4018
|
-
|
4019
|
-
|
4020
|
-
|
4021
|
-
|
4022
|
-
|
4023
|
-
|
4024
|
-
|
4025
|
-
|
4026
|
-
}, [localization]);
|
3982
|
+
const Provider = props => {
|
3983
|
+
const {
|
3984
|
+
children,
|
3985
|
+
localization = defaultLocalizationContext
|
3986
|
+
} = props;
|
3987
|
+
const value = React.useMemo(() => ({
|
3988
|
+
localization
|
3989
|
+
}), [localization]);
|
4027
3990
|
return React.createElement(Context.Provider, {
|
4028
3991
|
value: value
|
4029
3992
|
}, React.createElement(ToastProvider, null, children));
|
4030
3993
|
};
|
4031
|
-
|
4032
|
-
|
4033
|
-
};
|
4034
|
-
var useLocalization = function useLocalization() {
|
4035
|
-
return useTaco().localization;
|
4036
|
-
};
|
3994
|
+
const useTaco = () => React.useContext(Context);
|
3995
|
+
const useLocalization = () => useTaco().localization;
|
4037
3996
|
|
4038
|
-
var _excluded$
|
3997
|
+
var _excluded$3 = ["onChange", "value"];
|
4039
3998
|
|
4040
3999
|
var renderDay = function renderDay(day, modifiers) {
|
4041
4000
|
return modifiers.disabled ? React.createElement("span", {
|
@@ -4114,7 +4073,7 @@ var Navbar = /*#__PURE__*/React.memo(function (_ref) {
|
|
4114
4073
|
var Calendar$1 = /*#__PURE__*/React.forwardRef(function Calendar(props, ref) {
|
4115
4074
|
var handleChange = props.onChange,
|
4116
4075
|
value = props.value,
|
4117
|
-
otherProps = _objectWithoutPropertiesLoose(props, _excluded$
|
4076
|
+
otherProps = _objectWithoutPropertiesLoose(props, _excluded$3);
|
4118
4077
|
|
4119
4078
|
var _useLocalization2 = useLocalization(),
|
4120
4079
|
locale = _useLocalization2.locale,
|
@@ -4178,7 +4137,7 @@ var Calendar$1 = /*#__PURE__*/React.forwardRef(function Calendar(props, ref) {
|
|
4178
4137
|
})));
|
4179
4138
|
});
|
4180
4139
|
|
4181
|
-
var _excluded$
|
4140
|
+
var _excluded$4 = ["checked", "highlighted", "indeterminate", "invalid", "label", "onChange"];
|
4182
4141
|
var Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(props, ref) {
|
4183
4142
|
var checked = props.checked,
|
4184
4143
|
highlighted = props.highlighted,
|
@@ -4186,7 +4145,7 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(props, ref) {
|
|
4186
4145
|
invalid = props.invalid,
|
4187
4146
|
label = props.label,
|
4188
4147
|
onChange = props.onChange,
|
4189
|
-
otherProps = _objectWithoutPropertiesLoose(props, _excluded$
|
4148
|
+
otherProps = _objectWithoutPropertiesLoose(props, _excluded$4);
|
4190
4149
|
|
4191
4150
|
var 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)]
|
4192
4151
|
props.className, {
|
@@ -4228,9 +4187,9 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(props, ref) {
|
|
4228
4187
|
return element;
|
4229
4188
|
});
|
4230
4189
|
|
4231
|
-
|
4232
|
-
|
4233
|
-
React.useEffect(()
|
4190
|
+
var useProxiedRef = function useProxiedRef(ref) {
|
4191
|
+
var internalRef = React.useRef(null);
|
4192
|
+
React.useEffect(function () {
|
4234
4193
|
if (ref) {
|
4235
4194
|
if (typeof ref === 'function') {
|
4236
4195
|
ref(internalRef.current);
|
@@ -4260,21 +4219,22 @@ const getButtonStateClasses = invalid => {
|
|
4260
4219
|
return '!border-grey-dark focus:!border-blue-light peer-focus:!border-blue-light peer-focus:peer-active:!border-blue-dark';
|
4261
4220
|
};
|
4262
4221
|
|
4263
|
-
|
4264
|
-
|
4265
|
-
|
4266
|
-
|
4267
|
-
|
4268
|
-
|
4269
|
-
|
4270
|
-
|
4271
|
-
|
4272
|
-
|
4273
|
-
|
4274
|
-
|
4222
|
+
const Input = /*#__PURE__*/React.forwardRef(function Input(props, ref) {
|
4223
|
+
const {
|
4224
|
+
button,
|
4225
|
+
icon,
|
4226
|
+
highlighted,
|
4227
|
+
invalid,
|
4228
|
+
onKeyDown,
|
4229
|
+
autoFocus,
|
4230
|
+
...otherProps
|
4231
|
+
} = props;
|
4232
|
+
const inputRef = useProxiedRef(ref);
|
4233
|
+
const hasContainer = button || icon;
|
4234
|
+
const className = cn(getInputClasses(props), 'min-h-[theme(spacing.8)] pointer-events-all', {
|
4275
4235
|
'pr-8': !!hasContainer
|
4276
4236
|
}, !hasContainer && otherProps.className);
|
4277
|
-
React.useEffect(
|
4237
|
+
React.useEffect(() => {
|
4278
4238
|
if (autoFocus && inputRef.current) {
|
4279
4239
|
inputRef.current.focus();
|
4280
4240
|
}
|
@@ -4282,10 +4242,10 @@ var Input = /*#__PURE__*/React.forwardRef(function Input(props, ref) {
|
|
4282
4242
|
// if it has scroll height then the browser reverts to native scrolling behaviour only
|
4283
4243
|
// so we manually override it to ensure _our_ desired behaviour remains intact
|
4284
4244
|
|
4285
|
-
|
4245
|
+
const handleKeyDown = event => {
|
4286
4246
|
if (!event.shiftKey && (event.key === 'Home' || event.key === 'End')) {
|
4287
4247
|
event.preventDefault();
|
4288
|
-
|
4248
|
+
const position = event.key === 'End' ? event.currentTarget.value.length : 0;
|
4289
4249
|
event.currentTarget.setSelectionRange(position, position);
|
4290
4250
|
}
|
4291
4251
|
|
@@ -4294,7 +4254,7 @@ var Input = /*#__PURE__*/React.forwardRef(function Input(props, ref) {
|
|
4294
4254
|
}
|
4295
4255
|
};
|
4296
4256
|
|
4297
|
-
|
4257
|
+
const input = React.createElement("input", Object.assign({}, otherProps, {
|
4298
4258
|
className: className,
|
4299
4259
|
"data-taco": "input",
|
4300
4260
|
onKeyDown: handleKeyDown,
|
@@ -4302,19 +4262,19 @@ var Input = /*#__PURE__*/React.forwardRef(function Input(props, ref) {
|
|
4302
4262
|
}));
|
4303
4263
|
|
4304
4264
|
if (hasContainer) {
|
4305
|
-
|
4265
|
+
let extra;
|
4306
4266
|
|
4307
4267
|
if (button) {
|
4308
|
-
|
4309
|
-
|
4310
|
-
|
4311
|
-
|
4268
|
+
const disabled = button.props.disabled || otherProps.disabled;
|
4269
|
+
const buttonClassName = cn('items-center flex justify-center border absolute rounded-l-none rounded-r right-0 h-full focus:rounded focus:outline-none', {
|
4270
|
+
[getButtonStateClasses(invalid)]: !props.disabled
|
4271
|
+
}, button.props.className);
|
4312
4272
|
extra = React.cloneElement(button, {
|
4313
4273
|
className: buttonClassName,
|
4314
|
-
disabled
|
4274
|
+
disabled
|
4315
4275
|
});
|
4316
4276
|
} else if (icon) {
|
4317
|
-
|
4277
|
+
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', {
|
4318
4278
|
'text-grey-dark': props.disabled,
|
4319
4279
|
'text-grey-darkest': !props.disabled
|
4320
4280
|
});
|
@@ -4326,7 +4286,7 @@ var Input = /*#__PURE__*/React.forwardRef(function Input(props, ref) {
|
|
4326
4286
|
});
|
4327
4287
|
}
|
4328
4288
|
|
4329
|
-
|
4289
|
+
const containerClassName = cn('bg-white inline-flex relative rounded w-full', otherProps.className);
|
4330
4290
|
return React.createElement("div", {
|
4331
4291
|
className: containerClassName,
|
4332
4292
|
"data-taco": "input-container"
|
@@ -5097,27 +5057,26 @@ var useBoundingClientRectListener = function useBoundingClientRectListener(ref)
|
|
5097
5057
|
return dimensions;
|
5098
5058
|
};
|
5099
5059
|
|
5100
|
-
|
5101
|
-
|
5102
|
-
|
5103
|
-
|
5104
|
-
|
5105
|
-
|
5106
|
-
|
5107
|
-
|
5108
|
-
|
5109
|
-
|
5110
|
-
|
5111
|
-
|
5112
|
-
|
5113
|
-
|
5114
|
-
|
5115
|
-
|
5116
|
-
|
5117
|
-
|
5118
|
-
|
5119
|
-
|
5120
|
-
var className = cn('inline-flex relative', {
|
5060
|
+
const Combobox = /*#__PURE__*/React.forwardRef(function Combobox(props, ref) {
|
5061
|
+
const {
|
5062
|
+
className: externalClassName,
|
5063
|
+
dialog,
|
5064
|
+
style,
|
5065
|
+
...otherProps
|
5066
|
+
} = props;
|
5067
|
+
const {
|
5068
|
+
combobox,
|
5069
|
+
button,
|
5070
|
+
input,
|
5071
|
+
popover,
|
5072
|
+
list
|
5073
|
+
} = useCombobox(otherProps, ref);
|
5074
|
+
const internalRef = React.useRef(null);
|
5075
|
+
const {
|
5076
|
+
texts
|
5077
|
+
} = useLocalization();
|
5078
|
+
const selectDimensions = useBoundingClientRectListener(internalRef);
|
5079
|
+
const className = cn('inline-flex relative', {
|
5121
5080
|
'yt-combobox--inline': props.inline
|
5122
5081
|
}, externalClassName);
|
5123
5082
|
return React.createElement("span", {
|
@@ -5136,7 +5095,7 @@ var Combobox = /*#__PURE__*/React.forwardRef(function Combobox(props, ref) {
|
|
5136
5095
|
appearance: "discrete",
|
5137
5096
|
className: "!border-l-0 focus:!border-none focus:!shadow-none active:!border-none",
|
5138
5097
|
icon: popover.open ? 'chevron-up' : 'chevron-down',
|
5139
|
-
onClick:
|
5098
|
+
onClick: () => {
|
5140
5099
|
var _input$ref$current;
|
5141
5100
|
|
5142
5101
|
popover.onOpenChange(true);
|
@@ -5147,7 +5106,7 @@ var Combobox = /*#__PURE__*/React.forwardRef(function Combobox(props, ref) {
|
|
5147
5106
|
icon: "list-search",
|
5148
5107
|
disabled: props.readOnly || props.disabled,
|
5149
5108
|
dialog: dialog,
|
5150
|
-
onFocus:
|
5109
|
+
onFocus: event => {
|
5151
5110
|
var _input$ref$current2;
|
5152
5111
|
|
5153
5112
|
// Prevents the default focus behaviour of showing the tooltip, on parent tooltip element
|
@@ -5160,7 +5119,7 @@ var Combobox = /*#__PURE__*/React.forwardRef(function Combobox(props, ref) {
|
|
5160
5119
|
}) : undefined
|
5161
5120
|
})))), React.createElement(PopoverPrimitive.Content, {
|
5162
5121
|
align: "start",
|
5163
|
-
onOpenAutoFocus:
|
5122
|
+
onOpenAutoFocus: event => {
|
5164
5123
|
event.preventDefault();
|
5165
5124
|
},
|
5166
5125
|
sideOffset: 4
|
@@ -5394,19 +5353,18 @@ function mergeRefs(refs) {
|
|
5394
5353
|
};
|
5395
5354
|
}
|
5396
5355
|
|
5397
|
-
|
5398
|
-
var PopoverContext = /*#__PURE__*/React.createContext({
|
5356
|
+
const PopoverContext = /*#__PURE__*/React.createContext({
|
5399
5357
|
props: {},
|
5400
5358
|
ref: null
|
5401
5359
|
});
|
5402
|
-
|
5360
|
+
const Trigger$1 = /*#__PURE__*/React.forwardRef(function PopoverTrigger(props, ref) {
|
5403
5361
|
var _props$children;
|
5404
5362
|
|
5405
|
-
|
5406
|
-
|
5363
|
+
const context = React.useContext(PopoverContext);
|
5364
|
+
let children = props.children;
|
5407
5365
|
|
5408
5366
|
if (React.isValidElement(props.children) && typeof ((_props$children = props.children) === null || _props$children === void 0 ? void 0 : _props$children.type) === 'function') {
|
5409
|
-
console.warn(
|
5367
|
+
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`);
|
5410
5368
|
children = React.createElement("span", null, props.children);
|
5411
5369
|
}
|
5412
5370
|
|
@@ -5416,22 +5374,22 @@ var Trigger$1 = /*#__PURE__*/React.forwardRef(function PopoverTrigger(props, ref
|
|
5416
5374
|
asChild: true
|
5417
5375
|
}));
|
5418
5376
|
});
|
5419
|
-
|
5420
|
-
|
5421
|
-
|
5422
|
-
|
5423
|
-
|
5377
|
+
const RenderPropWrapper = /*#__PURE__*/React.forwardRef(function RenderPropWrapper({
|
5378
|
+
children,
|
5379
|
+
onClick
|
5380
|
+
}, ref) {
|
5381
|
+
const close = () => {
|
5424
5382
|
onClick(new CustomEvent('hide'));
|
5425
5383
|
};
|
5426
5384
|
|
5427
5385
|
return children({
|
5428
|
-
close
|
5429
|
-
ref
|
5386
|
+
close,
|
5387
|
+
ref
|
5430
5388
|
});
|
5431
5389
|
});
|
5432
|
-
|
5433
|
-
|
5434
|
-
|
5390
|
+
const Content$1 = /*#__PURE__*/React.forwardRef(function PopoverContent(props, ref) {
|
5391
|
+
const className = cn('bg-white focus:border-blue-light', props.className);
|
5392
|
+
let output;
|
5435
5393
|
|
5436
5394
|
if (typeof props.children === 'function') {
|
5437
5395
|
output = React.createElement(PopoverPrimitive.Close, {
|
@@ -5449,23 +5407,20 @@ var Content$1 = /*#__PURE__*/React.forwardRef(function PopoverContent(props, ref
|
|
5449
5407
|
className: "text-white"
|
5450
5408
|
}));
|
5451
5409
|
});
|
5452
|
-
|
5453
|
-
|
5454
|
-
|
5455
|
-
|
5456
|
-
|
5457
|
-
|
5458
|
-
|
5459
|
-
|
5460
|
-
|
5461
|
-
|
5462
|
-
|
5463
|
-
|
5464
|
-
|
5465
|
-
|
5466
|
-
ref: ref
|
5467
|
-
};
|
5468
|
-
}, [otherProps]);
|
5410
|
+
const Close$1 = /*#__PURE__*/React.forwardRef((props, ref) => React.createElement(PopoverPrimitive.Close, Object.assign({}, props, {
|
5411
|
+
ref: ref,
|
5412
|
+
asChild: true
|
5413
|
+
})));
|
5414
|
+
const Popover = /*#__PURE__*/React.forwardRef(function Popover(props, ref) {
|
5415
|
+
const {
|
5416
|
+
children,
|
5417
|
+
trigger,
|
5418
|
+
...otherProps
|
5419
|
+
} = props;
|
5420
|
+
const context = React.useMemo(() => ({
|
5421
|
+
props: otherProps,
|
5422
|
+
ref
|
5423
|
+
}), [otherProps]);
|
5469
5424
|
return React.createElement(PopoverContext.Provider, {
|
5470
5425
|
value: context
|
5471
5426
|
}, React.createElement(PopoverPrimitive.Root, null, trigger && React.createElement(Trigger$1, null, trigger), children));
|
@@ -5474,23 +5429,23 @@ Popover.Trigger = Trigger$1;
|
|
5474
5429
|
Popover.Content = Content$1;
|
5475
5430
|
Popover.Close = Close$1;
|
5476
5431
|
|
5477
|
-
|
5478
|
-
|
5479
|
-
|
5480
|
-
|
5481
|
-
|
5482
|
-
|
5483
|
-
|
5484
|
-
|
5485
|
-
|
5486
|
-
|
5487
|
-
|
5488
|
-
|
5489
|
-
|
5490
|
-
|
5491
|
-
|
5492
|
-
|
5493
|
-
|
5432
|
+
const Datepicker = /*#__PURE__*/React.forwardRef(function Datepicker(props, ref) {
|
5433
|
+
const {
|
5434
|
+
className: externalClassName,
|
5435
|
+
onReset: handleReset,
|
5436
|
+
style,
|
5437
|
+
shortcuts,
|
5438
|
+
shortcutsText,
|
5439
|
+
...otherProps
|
5440
|
+
} = props;
|
5441
|
+
const {
|
5442
|
+
calendar,
|
5443
|
+
input
|
5444
|
+
} = useDatepicker(otherProps, ref);
|
5445
|
+
const {
|
5446
|
+
texts
|
5447
|
+
} = useLocalization();
|
5448
|
+
const className = cn('inline-flex w-full text-black font-normal', externalClassName);
|
5494
5449
|
return React.createElement("span", {
|
5495
5450
|
className: className,
|
5496
5451
|
"data-taco": "datepicker",
|
@@ -5500,40 +5455,37 @@ var Datepicker = /*#__PURE__*/React.forwardRef(function Datepicker(props, ref) {
|
|
5500
5455
|
"aria-label": texts.datepicker.expand,
|
5501
5456
|
disabled: input.disabled || input.readOnly,
|
5502
5457
|
icon: "calendar"
|
5503
|
-
})), React.createElement(Popover.Content, null,
|
5504
|
-
|
5505
|
-
|
5506
|
-
|
5507
|
-
|
5508
|
-
|
5509
|
-
|
5510
|
-
|
5511
|
-
|
5512
|
-
|
5513
|
-
|
5514
|
-
|
5515
|
-
|
5516
|
-
|
5517
|
-
|
5518
|
-
|
5519
|
-
|
5520
|
-
|
5521
|
-
|
5522
|
-
|
5523
|
-
|
5524
|
-
|
5525
|
-
|
5526
|
-
|
5527
|
-
|
5528
|
-
|
5529
|
-
|
5530
|
-
|
5531
|
-
|
5532
|
-
|
5533
|
-
|
5534
|
-
}
|
5535
|
-
}, texts.datepicker.clear)));
|
5536
|
-
}))
|
5458
|
+
})), React.createElement(Popover.Content, null, ({
|
5459
|
+
close
|
5460
|
+
}) => React.createElement("div", {
|
5461
|
+
className: "-m-3 flex"
|
5462
|
+
}, React.createElement(Calendar$1, Object.assign({}, calendar, {
|
5463
|
+
onChange: (date, event) => {
|
5464
|
+
calendar.onChange(date, event);
|
5465
|
+
close();
|
5466
|
+
},
|
5467
|
+
tabIndex: -1
|
5468
|
+
})), shortcuts && React.createElement("div", {
|
5469
|
+
className: "border-grey-dark flex flex-col border-l"
|
5470
|
+
}, React.createElement("span", {
|
5471
|
+
className: "m-4 mb-3 flex h-8 w-32 items-center text-xs font-semibold"
|
5472
|
+
}, shortcutsText !== null && shortcutsText !== void 0 ? shortcutsText : texts.datepicker.shortcuts), React.createElement("ul", null, shortcuts.map((shortcut, i) => React.createElement("li", {
|
5473
|
+
key: i
|
5474
|
+
}, React.createElement("button", {
|
5475
|
+
className: "hover:bg-grey-light flex w-full items-start px-4 py-1 text-xs",
|
5476
|
+
onClick: event => {
|
5477
|
+
event.persist();
|
5478
|
+
shortcut.onClick(event);
|
5479
|
+
close();
|
5480
|
+
}
|
5481
|
+
}, shortcut.text)))), handleReset && React.createElement("button", {
|
5482
|
+
className: "text-blue hover:text-blue-light my-4 mx-auto mt-auto inline-flex cursor-pointer border-none bg-transparent text-xs",
|
5483
|
+
onClick: event => {
|
5484
|
+
event.persist();
|
5485
|
+
handleReset(event);
|
5486
|
+
close();
|
5487
|
+
}
|
5488
|
+
}, texts.datepicker.clear)))))
|
5537
5489
|
})));
|
5538
5490
|
});
|
5539
5491
|
|
@@ -5776,14 +5728,12 @@ const Extra = /*#__PURE__*/React.forwardRef(function DialogExtra(props, ref) {
|
|
5776
5728
|
});
|
5777
5729
|
Extra.displayName = 'DialogExtra';
|
5778
5730
|
|
5779
|
-
|
5780
|
-
|
5781
|
-
|
5782
|
-
|
5783
|
-
|
5784
|
-
|
5785
|
-
var extra;
|
5786
|
-
React.Children.toArray(initialChildren).forEach(function (child) {
|
5731
|
+
const useSeparatedChildren = initialChildren => {
|
5732
|
+
return React.useMemo(() => {
|
5733
|
+
const children = [];
|
5734
|
+
let drawer;
|
5735
|
+
let extra;
|
5736
|
+
React.Children.toArray(initialChildren).forEach(child => {
|
5787
5737
|
var _child$type, _child$type2;
|
5788
5738
|
|
5789
5739
|
if (((_child$type = child.type) === null || _child$type === void 0 ? void 0 : _child$type.displayName) === Drawer.displayName) {
|
@@ -5798,55 +5748,39 @@ var useSeparatedChildren = function useSeparatedChildren(initialChildren) {
|
|
5798
5748
|
}, [initialChildren]);
|
5799
5749
|
};
|
5800
5750
|
|
5801
|
-
|
5802
|
-
|
5803
|
-
|
5804
|
-
|
5805
|
-
|
5806
|
-
|
5807
|
-
|
5808
|
-
|
5809
|
-
|
5810
|
-
|
5811
|
-
|
5812
|
-
|
5813
|
-
|
5814
|
-
|
5815
|
-
|
5816
|
-
|
5817
|
-
|
5818
|
-
|
5819
|
-
|
5820
|
-
|
5821
|
-
|
5822
|
-
|
5823
|
-
|
5824
|
-
|
5825
|
-
|
5826
|
-
|
5827
|
-
|
5828
|
-
|
5829
|
-
|
5830
|
-
|
5831
|
-
|
5832
|
-
|
5833
|
-
|
5834
|
-
return setDrawerOpen(function (isDrawerOpen) {
|
5835
|
-
return !isDrawerOpen;
|
5836
|
-
});
|
5837
|
-
}
|
5838
|
-
},
|
5839
|
-
elements: {
|
5840
|
-
drawer: drawer,
|
5841
|
-
extra: extra
|
5842
|
-
},
|
5843
|
-
onClose: onClose,
|
5844
|
-
props: otherProps,
|
5845
|
-
showCloseButton: showCloseButton,
|
5846
|
-
size: size,
|
5847
|
-
ref: ref
|
5848
|
-
};
|
5849
|
-
}, [closeOnEscape, drawerOpen, draggable, drawer, extra, open, otherProps, showCloseButton]);
|
5751
|
+
const Dialog = /*#__PURE__*/React.forwardRef(function Dialog(props, ref) {
|
5752
|
+
const {
|
5753
|
+
children: initialChildren,
|
5754
|
+
closeOnEscape = true,
|
5755
|
+
defaultOpen,
|
5756
|
+
draggable = false,
|
5757
|
+
onChange,
|
5758
|
+
onClose,
|
5759
|
+
open,
|
5760
|
+
showCloseButton = true,
|
5761
|
+
size = 'sm',
|
5762
|
+
trigger,
|
5763
|
+
...otherProps
|
5764
|
+
} = props;
|
5765
|
+
const [children, drawer, extra] = useSeparatedChildren(initialChildren);
|
5766
|
+
const [drawerOpen, setDrawerOpen] = React.useState(false);
|
5767
|
+
const context = React.useMemo(() => ({
|
5768
|
+
closeOnEscape,
|
5769
|
+
draggable,
|
5770
|
+
drawer: {
|
5771
|
+
open: drawerOpen,
|
5772
|
+
toggle: () => setDrawerOpen(isDrawerOpen => !isDrawerOpen)
|
5773
|
+
},
|
5774
|
+
elements: {
|
5775
|
+
drawer,
|
5776
|
+
extra
|
5777
|
+
},
|
5778
|
+
onClose,
|
5779
|
+
props: otherProps,
|
5780
|
+
showCloseButton,
|
5781
|
+
size,
|
5782
|
+
ref
|
5783
|
+
}), [closeOnEscape, drawerOpen, draggable, drawer, extra, open, otherProps, showCloseButton]);
|
5850
5784
|
return React.createElement(DialogContext.Provider, {
|
5851
5785
|
value: context
|
5852
5786
|
}, React.createElement(DialogPrimitive.Root, {
|
@@ -5863,19 +5797,18 @@ Dialog.Extra = Extra;
|
|
5863
5797
|
Dialog.Drawer = Drawer;
|
5864
5798
|
Dialog.Close = Close$2;
|
5865
5799
|
|
5866
|
-
|
5867
|
-
|
5868
|
-
|
5869
|
-
|
5870
|
-
|
5871
|
-
|
5872
|
-
|
5873
|
-
|
5874
|
-
|
5875
|
-
var className = cn('flex flex-col font-bold text-xs leading-loose pb-4 min-h-[theme(spacing.18)]', {
|
5800
|
+
const Field = /*#__PURE__*/React.forwardRef(function Field(props, ref) {
|
5801
|
+
const {
|
5802
|
+
disabled,
|
5803
|
+
children,
|
5804
|
+
invalid = false,
|
5805
|
+
message,
|
5806
|
+
...otherProps
|
5807
|
+
} = props;
|
5808
|
+
const className = cn('flex flex-col font-bold text-xs leading-loose pb-4 min-h-[theme(spacing.18)]', {
|
5876
5809
|
'text-grey-dark': disabled
|
5877
5810
|
}, props.className);
|
5878
|
-
|
5811
|
+
const messageClassName = cn('h-4 text-xs text-left leading-normal font-normal truncate -mb-4', {
|
5879
5812
|
'text-grey-darkest': !invalid,
|
5880
5813
|
'text-red': invalid,
|
5881
5814
|
'opacity-50': disabled
|
@@ -5890,13 +5823,12 @@ var Field = /*#__PURE__*/React.forwardRef(function Field(props, ref) {
|
|
5890
5823
|
}, message));
|
5891
5824
|
});
|
5892
5825
|
|
5893
|
-
|
5894
|
-
|
5895
|
-
|
5896
|
-
|
5897
|
-
|
5898
|
-
|
5899
|
-
var className = cn('yt-form', {
|
5826
|
+
const Form = /*#__PURE__*/React.forwardRef(function Form(props, ref) {
|
5827
|
+
const {
|
5828
|
+
horizontal = false,
|
5829
|
+
...otherProps
|
5830
|
+
} = props;
|
5831
|
+
const className = cn('yt-form', {
|
5900
5832
|
'yt-form--horizontal flex flex-wrap': horizontal
|
5901
5833
|
}, props.className);
|
5902
5834
|
return React.createElement("form", Object.assign({}, otherProps, {
|
@@ -5906,13 +5838,12 @@ var Form = /*#__PURE__*/React.forwardRef(function Form(props, ref) {
|
|
5906
5838
|
}));
|
5907
5839
|
});
|
5908
5840
|
|
5909
|
-
|
5910
|
-
|
5911
|
-
|
5912
|
-
|
5913
|
-
|
5914
|
-
|
5915
|
-
var className = cn('flex ', props.className);
|
5841
|
+
const Group = /*#__PURE__*/React.forwardRef(function Group(props, ref) {
|
5842
|
+
const {
|
5843
|
+
as: Tag = 'span',
|
5844
|
+
...otherProps
|
5845
|
+
} = props;
|
5846
|
+
const className = cn('flex ', props.className);
|
5916
5847
|
return React.createElement(Tag, Object.assign({}, otherProps, {
|
5917
5848
|
className: className,
|
5918
5849
|
"data-taco": "group",
|
@@ -5920,19 +5851,18 @@ var Group = /*#__PURE__*/React.forwardRef(function Group(props, ref) {
|
|
5920
5851
|
}));
|
5921
5852
|
});
|
5922
5853
|
|
5923
|
-
|
5924
|
-
var HangerContext = /*#__PURE__*/React.createContext({
|
5854
|
+
const HangerContext = /*#__PURE__*/React.createContext({
|
5925
5855
|
props: {},
|
5926
5856
|
ref: null
|
5927
5857
|
});
|
5928
|
-
|
5858
|
+
const Anchor = /*#__PURE__*/React.forwardRef(function HangerAnchor(props, ref) {
|
5929
5859
|
var _props$children;
|
5930
5860
|
|
5931
|
-
|
5932
|
-
|
5861
|
+
const context = React.useContext(HangerContext);
|
5862
|
+
let children = props.children;
|
5933
5863
|
|
5934
5864
|
if (React.isValidElement(props.children) && typeof ((_props$children = props.children) === null || _props$children === void 0 ? void 0 : _props$children.type) === 'function') {
|
5935
|
-
console.warn(
|
5865
|
+
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`);
|
5936
5866
|
children = React.createElement("span", null, props.children);
|
5937
5867
|
}
|
5938
5868
|
|
@@ -5942,22 +5872,21 @@ var Anchor = /*#__PURE__*/React.forwardRef(function HangerAnchor(props, ref) {
|
|
5942
5872
|
asChild: true
|
5943
5873
|
}));
|
5944
5874
|
});
|
5945
|
-
|
5946
|
-
|
5875
|
+
const Title$1 = /*#__PURE__*/React.forwardRef(function DialogTitle(props, ref) {
|
5876
|
+
const className = cn('mb-1 text-base font-bold flex w-full', props.className);
|
5947
5877
|
return React.createElement("span", Object.assign({}, props, {
|
5948
5878
|
className: className,
|
5949
5879
|
ref: ref
|
5950
5880
|
}));
|
5951
5881
|
});
|
5952
|
-
|
5953
|
-
|
5954
|
-
|
5955
|
-
|
5956
|
-
|
5957
|
-
|
5958
|
-
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);
|
5882
|
+
const Content$3 = /*#__PURE__*/React.forwardRef(function HangerContent(props, ref) {
|
5883
|
+
const context = React.useContext(HangerContext);
|
5884
|
+
const {
|
5885
|
+
texts
|
5886
|
+
} = useLocalization();
|
5887
|
+
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);
|
5959
5888
|
|
5960
|
-
|
5889
|
+
const handleInteractOutside = event => {
|
5961
5890
|
event.preventDefault();
|
5962
5891
|
};
|
5963
5892
|
|
@@ -5979,25 +5908,20 @@ var Content$3 = /*#__PURE__*/React.forwardRef(function HangerContent(props, ref)
|
|
5979
5908
|
onClick: context.props.onClose
|
5980
5909
|
})));
|
5981
5910
|
});
|
5982
|
-
|
5983
|
-
|
5984
|
-
|
5985
|
-
|
5986
|
-
|
5987
|
-
|
5988
|
-
|
5989
|
-
|
5990
|
-
|
5991
|
-
|
5992
|
-
|
5993
|
-
};
|
5994
|
-
}, [otherProps]); // we do this to ensure hangers are mounted after their containers, e.g. if the container is another portal
|
5995
|
-
|
5996
|
-
var _React$useState = React.useState(false),
|
5997
|
-
open = _React$useState[0],
|
5998
|
-
setOpen = _React$useState[1];
|
5911
|
+
const Hanger = /*#__PURE__*/React.forwardRef(function Hanger(props, ref) {
|
5912
|
+
const {
|
5913
|
+
anchor,
|
5914
|
+
children,
|
5915
|
+
defaultOpen = true,
|
5916
|
+
...otherProps
|
5917
|
+
} = props;
|
5918
|
+
const context = React.useMemo(() => ({
|
5919
|
+
props: otherProps,
|
5920
|
+
ref
|
5921
|
+
}), [otherProps]); // we do this to ensure hangers are mounted after their containers, e.g. if the container is another portal
|
5999
5922
|
|
6000
|
-
React.
|
5923
|
+
const [open, setOpen] = React.useState(false);
|
5924
|
+
React.useEffect(() => {
|
6001
5925
|
if (defaultOpen) {
|
6002
5926
|
setOpen(defaultOpen);
|
6003
5927
|
}
|
@@ -6013,25 +5937,25 @@ Hanger.Anchor = Anchor;
|
|
6013
5937
|
Hanger.Content = Content$3;
|
6014
5938
|
Hanger.Title = Title$1;
|
6015
5939
|
|
6016
|
-
|
6017
|
-
var Trigger$3 = /*#__PURE__*/React.forwardRef(function HoverCardTrigger(props, ref) {
|
5940
|
+
const Trigger$3 = /*#__PURE__*/React.forwardRef(function HoverCardTrigger(props, ref) {
|
6018
5941
|
return React.createElement(HoverCardPrimitive.Trigger, Object.assign({}, props, {
|
6019
5942
|
asChild: true,
|
6020
5943
|
ref: ref
|
6021
5944
|
}));
|
6022
5945
|
});
|
6023
|
-
|
6024
|
-
|
6025
|
-
|
6026
|
-
|
6027
|
-
|
5946
|
+
const Content$4 = /*#__PURE__*/React.forwardRef(function HoverCardContent(externalProps, ref) {
|
5947
|
+
const {
|
5948
|
+
placement,
|
5949
|
+
...props
|
5950
|
+
} = externalProps;
|
5951
|
+
const className = cn('bg-white rounded p-3 yt-shadow', props.className);
|
6028
5952
|
return React.createElement(HoverCardPrimitive.Content, Object.assign({}, props, {
|
6029
5953
|
className: className,
|
6030
5954
|
ref: ref,
|
6031
5955
|
side: placement
|
6032
5956
|
}));
|
6033
5957
|
});
|
6034
|
-
|
5958
|
+
const HoverCard = props => {
|
6035
5959
|
return React.createElement(HoverCardPrimitive.Root, Object.assign({}, props, {
|
6036
5960
|
openDelay: 300
|
6037
5961
|
}));
|
@@ -6039,24 +5963,24 @@ var HoverCard = function HoverCard(props) {
|
|
6039
5963
|
HoverCard.Trigger = Trigger$3;
|
6040
5964
|
HoverCard.Content = Content$4;
|
6041
5965
|
|
6042
|
-
|
6043
|
-
|
6044
|
-
|
6045
|
-
|
6046
|
-
|
6047
|
-
|
6048
|
-
|
5966
|
+
const SearchInput = /*#__PURE__*/React.forwardRef(function SearchInput({
|
5967
|
+
onSearch,
|
5968
|
+
...props
|
5969
|
+
}, ref) {
|
5970
|
+
const {
|
5971
|
+
texts
|
5972
|
+
} = useLocalization();
|
6049
5973
|
|
6050
|
-
|
5974
|
+
const handleClick = () => {
|
6051
5975
|
if (!props.disabled) {
|
6052
5976
|
onSearch === null || onSearch === void 0 ? void 0 : onSearch(props.value);
|
6053
5977
|
}
|
6054
5978
|
};
|
6055
5979
|
|
6056
|
-
|
5980
|
+
const handleKeyDown = event => {
|
6057
5981
|
var _props$onKeyDown;
|
6058
5982
|
|
6059
|
-
|
5983
|
+
const isEnterKeyPressed = event.keyCode === keycode('enter');
|
6060
5984
|
|
6061
5985
|
if (isEnterKeyPressed) {
|
6062
5986
|
handleClick();
|
@@ -6425,49 +6349,49 @@ const useMultiListbox = ({
|
|
6425
6349
|
};
|
6426
6350
|
};
|
6427
6351
|
|
6428
|
-
|
6429
|
-
|
6430
|
-
|
6431
|
-
|
6432
|
-
|
6433
|
-
|
6434
|
-
|
6435
|
-
|
6436
|
-
|
6437
|
-
|
6438
|
-
var className = cn('bg-white inline-flex relative w-full', externalClassName);
|
6352
|
+
const Listbox = /*#__PURE__*/React.forwardRef(function Listbox(props, ref) {
|
6353
|
+
const {
|
6354
|
+
className: externalClassName,
|
6355
|
+
...otherProps
|
6356
|
+
} = props;
|
6357
|
+
const {
|
6358
|
+
list,
|
6359
|
+
input
|
6360
|
+
} = useListbox(otherProps, ref);
|
6361
|
+
const className = cn('bg-white inline-flex relative w-full', externalClassName);
|
6439
6362
|
return React.createElement("span", {
|
6440
6363
|
"data-taco": "listbox",
|
6441
6364
|
className: className
|
6442
6365
|
}, React.createElement(ScrollableList, Object.assign({}, list, {
|
6443
|
-
style:
|
6366
|
+
style: { ...list.style,
|
6444
6367
|
maxHeight: 'calc(12rem + 2px)'
|
6445
6368
|
/* (6 * option height) + listbox border */
|
6446
6369
|
|
6447
|
-
}
|
6370
|
+
}
|
6448
6371
|
})), React.createElement("input", Object.assign({}, input, {
|
6449
6372
|
className: "hidden",
|
6450
6373
|
type: "text"
|
6451
6374
|
})));
|
6452
6375
|
});
|
6453
|
-
|
6454
|
-
|
6455
|
-
|
6456
|
-
|
6457
|
-
|
6458
|
-
|
6459
|
-
|
6460
|
-
|
6461
|
-
|
6376
|
+
const MultiListbox = /*#__PURE__*/React.forwardRef(function Listbox(props, ref) {
|
6377
|
+
const {
|
6378
|
+
className: externalClassName,
|
6379
|
+
...otherProps
|
6380
|
+
} = props;
|
6381
|
+
const {
|
6382
|
+
list,
|
6383
|
+
input
|
6384
|
+
} = useMultiListbox(otherProps, ref);
|
6385
|
+
const className = cn('bg-white inline-flex relative w-full', externalClassName);
|
6462
6386
|
return React.createElement("span", {
|
6463
6387
|
"data-taco": "listbox",
|
6464
6388
|
className: className
|
6465
6389
|
}, React.createElement(ScrollableList, Object.assign({}, list, {
|
6466
|
-
style:
|
6390
|
+
style: { ...list.style,
|
6467
6391
|
maxHeight: 'calc(12rem + 2px + 2px)'
|
6468
6392
|
/* (6 * option height) + listbox border + ALL_OPTIONS bottom border */
|
6469
6393
|
|
6470
|
-
}
|
6394
|
+
}
|
6471
6395
|
})), React.createElement("input", Object.assign({}, input, {
|
6472
6396
|
className: "hidden",
|
6473
6397
|
type: "text"
|
@@ -6650,34 +6574,26 @@ const Checkbox$1 = props => {
|
|
6650
6574
|
})), children);
|
6651
6575
|
};
|
6652
6576
|
|
6653
|
-
|
6654
|
-
|
6655
|
-
|
6656
|
-
return String(value !== null && value !== void 0 ? value : '');
|
6657
|
-
};
|
6658
|
-
var findByValue$1 = function findByValue(values, valueAsString) {
|
6659
|
-
return values.find(function (value) {
|
6660
|
-
return getRadioGroupItemValueAsString(value) === valueAsString;
|
6661
|
-
});
|
6662
|
-
};
|
6663
|
-
var RadioGroupContext = /*#__PURE__*/React.createContext({
|
6577
|
+
const getRadioGroupItemValueAsString = value => String(value !== null && value !== void 0 ? value : '');
|
6578
|
+
const findByValue$1 = (values, valueAsString) => values.find(value => getRadioGroupItemValueAsString(value) === valueAsString);
|
6579
|
+
const RadioGroupContext = /*#__PURE__*/React.createContext({
|
6664
6580
|
disabled: false,
|
6665
6581
|
invalid: false
|
6666
6582
|
});
|
6667
|
-
|
6668
|
-
|
6669
|
-
|
6670
|
-
|
6671
|
-
|
6672
|
-
|
6673
|
-
|
6674
|
-
|
6675
|
-
|
6583
|
+
const RadioGroupItem = /*#__PURE__*/React.forwardRef(function RadioGroupItem(props, ref) {
|
6584
|
+
const context = React.useContext(RadioGroupContext);
|
6585
|
+
const {
|
6586
|
+
children,
|
6587
|
+
value,
|
6588
|
+
...otherProps
|
6589
|
+
} = props;
|
6590
|
+
const isDisabled = context.disabled || props.disabled;
|
6591
|
+
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', {
|
6676
6592
|
'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,
|
6677
6593
|
'border-grey cursor-not-allowed aria-checked:bg-blue-light aria-checked:border-blue-light ': isDisabled,
|
6678
6594
|
'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
|
6679
6595
|
});
|
6680
|
-
|
6596
|
+
const labelClassName = cn('flex items-center gap-2', {
|
6681
6597
|
'cursor-pointer': !isDisabled,
|
6682
6598
|
'cursor-not-allowed text-grey-dark': isDisabled
|
6683
6599
|
}, props.className);
|
@@ -6692,38 +6608,34 @@ var RadioGroupItem = /*#__PURE__*/React.forwardRef(function RadioGroupItem(props
|
|
6692
6608
|
className: "h-2 w-2 rounded-full bg-white"
|
6693
6609
|
})), children);
|
6694
6610
|
});
|
6695
|
-
|
6696
|
-
|
6697
|
-
|
6698
|
-
|
6699
|
-
|
6700
|
-
|
6701
|
-
|
6702
|
-
|
6703
|
-
|
6704
|
-
|
6705
|
-
|
6706
|
-
|
6707
|
-
|
6708
|
-
React.Children.forEach(children,
|
6611
|
+
const useRadioGroup = props => {
|
6612
|
+
const {
|
6613
|
+
children,
|
6614
|
+
defaultValue,
|
6615
|
+
disabled,
|
6616
|
+
invalid,
|
6617
|
+
onChange,
|
6618
|
+
orientation = 'vertical',
|
6619
|
+
value,
|
6620
|
+
...otherProps
|
6621
|
+
} = props;
|
6622
|
+
const values = React.useMemo(() => {
|
6623
|
+
const radioGroupItemValues = [];
|
6624
|
+
React.Children.forEach(children, child => {
|
6709
6625
|
if (React.isValidElement(child)) {
|
6710
6626
|
radioGroupItemValues.push(child.props.value);
|
6711
6627
|
}
|
6712
6628
|
});
|
6713
6629
|
return radioGroupItemValues;
|
6714
6630
|
}, [children]);
|
6715
|
-
|
6716
|
-
|
6717
|
-
|
6718
|
-
|
6719
|
-
|
6720
|
-
}, [disabled, invalid]);
|
6721
|
-
var valueProps;
|
6631
|
+
const context = React.useMemo(() => ({
|
6632
|
+
disabled: disabled !== null && disabled !== void 0 ? disabled : false,
|
6633
|
+
invalid: invalid !== null && invalid !== void 0 ? invalid : false
|
6634
|
+
}), [disabled, invalid]);
|
6635
|
+
let valueProps;
|
6722
6636
|
|
6723
6637
|
if (onChange !== undefined) {
|
6724
|
-
|
6725
|
-
return onChange(findByValue$1(values, value));
|
6726
|
-
};
|
6638
|
+
const handleChange = value => onChange(findByValue$1(values, value));
|
6727
6639
|
|
6728
6640
|
valueProps = {
|
6729
6641
|
onValueChange: handleChange,
|
@@ -6736,19 +6648,20 @@ var useRadioGroup = function useRadioGroup(props) {
|
|
6736
6648
|
}
|
6737
6649
|
|
6738
6650
|
return {
|
6739
|
-
context
|
6740
|
-
props:
|
6741
|
-
|
6742
|
-
|
6743
|
-
|
6651
|
+
context,
|
6652
|
+
props: { ...otherProps,
|
6653
|
+
...valueProps,
|
6654
|
+
children,
|
6655
|
+
orientation
|
6656
|
+
}
|
6744
6657
|
};
|
6745
6658
|
};
|
6746
|
-
|
6747
|
-
|
6748
|
-
|
6749
|
-
|
6750
|
-
|
6751
|
-
|
6659
|
+
const RadioGroup = /*#__PURE__*/React.forwardRef(function RadioGroup(props, ref) {
|
6660
|
+
const {
|
6661
|
+
context,
|
6662
|
+
props: otherProps
|
6663
|
+
} = useRadioGroup(props);
|
6664
|
+
const className = cn('flex items-start gap-y-2', {
|
6752
6665
|
'flex-wrap gap-x-4 ': otherProps.orientation === 'horizontal',
|
6753
6666
|
'flex-col': otherProps.orientation === 'vertical'
|
6754
6667
|
}, otherProps.className);
|
@@ -6819,39 +6732,22 @@ const Header = props => {
|
|
6819
6732
|
}));
|
6820
6733
|
};
|
6821
6734
|
|
6822
|
-
|
6823
|
-
|
6824
|
-
|
6825
|
-
|
6826
|
-
|
6827
|
-
|
6828
|
-
|
6829
|
-
|
6830
|
-
|
6831
|
-
|
6832
|
-
|
6833
|
-
|
6834
|
-
|
6835
|
-
|
6836
|
-
|
6837
|
-
|
6838
|
-
_setMinWidth = _React$useState3[1];
|
6839
|
-
|
6840
|
-
var context = React.useMemo(function () {
|
6841
|
-
return {
|
6842
|
-
indented: indented,
|
6843
|
-
registerIndentation: function registerIndentation() {
|
6844
|
-
return setIndented(true);
|
6845
|
-
},
|
6846
|
-
minWidth: minWidth,
|
6847
|
-
setMinWidth: function setMinWidth(width) {
|
6848
|
-
return _setMinWidth(width);
|
6849
|
-
},
|
6850
|
-
close: function close() {
|
6851
|
-
return setOpen(false);
|
6852
|
-
}
|
6853
|
-
};
|
6854
|
-
}, [indented, minWidth]);
|
6735
|
+
const Menu = externalProps => {
|
6736
|
+
const {
|
6737
|
+
children,
|
6738
|
+
trigger,
|
6739
|
+
...props
|
6740
|
+
} = externalProps;
|
6741
|
+
const [open, setOpen] = React.useState(false);
|
6742
|
+
const [indented, setIndented] = React.useState(false);
|
6743
|
+
const [minWidth, setMinWidth] = React.useState(undefined);
|
6744
|
+
const context = React.useMemo(() => ({
|
6745
|
+
indented,
|
6746
|
+
registerIndentation: () => setIndented(true),
|
6747
|
+
minWidth,
|
6748
|
+
setMinWidth: width => setMinWidth(width),
|
6749
|
+
close: () => setOpen(false)
|
6750
|
+
}), [indented, minWidth]);
|
6855
6751
|
return React.createElement(MenuContext.Provider, {
|
6856
6752
|
value: context
|
6857
6753
|
}, React.createElement(DropdownMenuPrimitive.Root, Object.assign({}, props, {
|
@@ -6869,44 +6765,39 @@ Menu.Separator = Separator;
|
|
6869
6765
|
Menu.Header = Header;
|
6870
6766
|
Menu.RadioGroup = RadioGroup$1;
|
6871
6767
|
|
6872
|
-
|
6873
|
-
var TreeviewItem = /*#__PURE__*/React__default.forwardRef(function TreeviewItem(props, ref) {
|
6768
|
+
const TreeviewItem = /*#__PURE__*/React__default.forwardRef(function TreeviewItem(props, ref) {
|
6874
6769
|
return React__default.createElement("a", Object.assign({}, props, {
|
6875
6770
|
ref: ref
|
6876
6771
|
}));
|
6877
6772
|
});
|
6878
|
-
|
6879
|
-
|
6880
|
-
|
6881
|
-
|
6882
|
-
|
6883
|
-
|
6884
|
-
|
6885
|
-
|
6886
|
-
|
6887
|
-
|
6888
|
-
|
6889
|
-
|
6890
|
-
setExpanded = _React$useState[1];
|
6891
|
-
|
6892
|
-
React__default.useEffect(function () {
|
6773
|
+
const TreeviewGroup = /*#__PURE__*/React__default.forwardRef(function TreeviewGroup(props, ref) {
|
6774
|
+
const {
|
6775
|
+
children,
|
6776
|
+
className: externalClassName,
|
6777
|
+
expanded: initialExpanded = false,
|
6778
|
+
title,
|
6779
|
+
fixed,
|
6780
|
+
onClick,
|
6781
|
+
...otherProps
|
6782
|
+
} = props;
|
6783
|
+
const [expanded, setExpanded] = React__default.useState(fixed || initialExpanded);
|
6784
|
+
React__default.useEffect(() => {
|
6893
6785
|
if (!fixed) {
|
6894
6786
|
setExpanded(fixed || initialExpanded);
|
6895
6787
|
}
|
6896
6788
|
}, [fixed, initialExpanded]);
|
6897
|
-
|
6789
|
+
const listClassName = cn('flex-col mb-0', {
|
6898
6790
|
flex: expanded,
|
6899
6791
|
hidden: !expanded
|
6900
6792
|
});
|
6901
|
-
|
6902
|
-
var itemProps = _extends({}, otherProps, {
|
6793
|
+
const itemProps = { ...otherProps,
|
6903
6794
|
'aria-expanded': expanded,
|
6904
6795
|
role: 'treeitem',
|
6905
6796
|
tabIndex: -1
|
6906
|
-
}
|
6797
|
+
};
|
6907
6798
|
|
6908
|
-
|
6909
|
-
|
6799
|
+
const handleClick = event => {
|
6800
|
+
const nextState = !expanded;
|
6910
6801
|
|
6911
6802
|
if (!fixed) {
|
6912
6803
|
setExpanded(nextState);
|
@@ -6917,7 +6808,7 @@ var TreeviewGroup = /*#__PURE__*/React__default.forwardRef(function TreeviewGrou
|
|
6917
6808
|
}
|
6918
6809
|
};
|
6919
6810
|
|
6920
|
-
|
6811
|
+
const className = typeof externalClassName === 'function' ? externalClassName(expanded) : externalClassName;
|
6921
6812
|
return React__default.createElement("div", Object.assign({}, itemProps, {
|
6922
6813
|
className: className,
|
6923
6814
|
ref: ref
|
@@ -6926,18 +6817,14 @@ var TreeviewGroup = /*#__PURE__*/React__default.forwardRef(function TreeviewGrou
|
|
6926
6817
|
}, typeof title === 'function' ? title(expanded) : title), React__default.createElement("ul", {
|
6927
6818
|
role: "group",
|
6928
6819
|
className: listClassName
|
6929
|
-
}, React__default.Children.toArray(children).filter(
|
6930
|
-
|
6931
|
-
|
6932
|
-
|
6933
|
-
|
6934
|
-
|
6935
|
-
}, React__default.cloneElement(item, {
|
6936
|
-
role: 'treeitem'
|
6937
|
-
}));
|
6938
|
-
})));
|
6820
|
+
}, React__default.Children.toArray(children).filter(item => !!item).map((item, i) => React__default.createElement("li", {
|
6821
|
+
key: i,
|
6822
|
+
role: "none"
|
6823
|
+
}, React__default.cloneElement(item, {
|
6824
|
+
role: 'treeitem'
|
6825
|
+
})))));
|
6939
6826
|
});
|
6940
|
-
|
6827
|
+
const Treeview = /*#__PURE__*/React__default.forwardRef(function Treeview(props, ref) {
|
6941
6828
|
return React__default.createElement("div", Object.assign({}, props, {
|
6942
6829
|
ref: ref,
|
6943
6830
|
role: "tree"
|
@@ -6980,25 +6867,20 @@ const useDropTarget = onDrop => {
|
|
6980
6867
|
return [isDraggedOver, props];
|
6981
6868
|
};
|
6982
6869
|
|
6983
|
-
|
6984
|
-
|
6985
|
-
|
6986
|
-
|
6987
|
-
|
6988
|
-
|
6989
|
-
|
6990
|
-
|
6991
|
-
|
6992
|
-
|
6993
|
-
|
6994
|
-
|
6995
|
-
|
6996
|
-
|
6997
|
-
isDraggedOver = _useDropTarget[0],
|
6998
|
-
dropTargetProps = _useDropTarget[1];
|
6999
|
-
|
7000
|
-
var isTreeitem = role === 'treeitem';
|
7001
|
-
var className = cn('yt-navigation__item cursor-pointer', {
|
6870
|
+
const Item$2 = /*#__PURE__*/React__default.forwardRef(function Item(props, ref) {
|
6871
|
+
const {
|
6872
|
+
active,
|
6873
|
+
children,
|
6874
|
+
onDrop,
|
6875
|
+
postfix,
|
6876
|
+
prefix,
|
6877
|
+
role,
|
6878
|
+
...otherProps
|
6879
|
+
} = props;
|
6880
|
+
const proxyRef = useProxiedRef(ref);
|
6881
|
+
const [isDraggedOver, dropTargetProps] = useDropTarget(onDrop);
|
6882
|
+
const isTreeitem = role === 'treeitem';
|
6883
|
+
const className = cn('yt-navigation__item cursor-pointer', {
|
7002
6884
|
'w-full mb-px py-1 px-3 flex items-center hover:bg-grey-dark': isTreeitem,
|
7003
6885
|
'bg-white w-full h-10 px-3 flex-shrink-0 flex items-center justify-between cursor-pointer': !isTreeitem,
|
7004
6886
|
'yt-navigation__item--active': active && !isDraggedOver,
|
@@ -7006,7 +6888,7 @@ var Item$2 = /*#__PURE__*/React__default.forwardRef(function Item(props, ref) {
|
|
7006
6888
|
'yt-navigation__item--dropping bg-blue': isDraggedOver
|
7007
6889
|
}, props.className);
|
7008
6890
|
|
7009
|
-
|
6891
|
+
const handleClick = event => {
|
7010
6892
|
if (event.target instanceof HTMLAnchorElement || event.target instanceof HTMLButtonElement) {
|
7011
6893
|
return;
|
7012
6894
|
}
|
@@ -7029,19 +6911,19 @@ var Item$2 = /*#__PURE__*/React__default.forwardRef(function Item(props, ref) {
|
|
7029
6911
|
className: "yt-navigation__item__postfix ml-1"
|
7030
6912
|
}, postfix));
|
7031
6913
|
});
|
7032
|
-
|
6914
|
+
const Panel = /*#__PURE__*/React__default.forwardRef(function Panel(props, ref) {
|
7033
6915
|
return React__default.createElement("div", Object.assign({}, props, {
|
7034
6916
|
className: cn('w-full bg-white p-3', props.className),
|
7035
6917
|
ref: ref
|
7036
6918
|
}));
|
7037
6919
|
});
|
7038
|
-
|
7039
|
-
|
6920
|
+
const MenuGroup = /*#__PURE__*/React__default.forwardRef(function MenuGroup(props, ref) {
|
6921
|
+
const className = cn('flex-shrink-0 space-y-1 outline-none', {
|
7040
6922
|
'bg-white pb-2': props.fixed
|
7041
6923
|
}, props.className);
|
7042
6924
|
|
7043
|
-
|
7044
|
-
|
6925
|
+
const title = expanded => {
|
6926
|
+
const className = cn('bg-white h-10 pl-3 pr-1 flex items-center justify-between w-full', {
|
7045
6927
|
'mb-1': expanded,
|
7046
6928
|
'cursor-pointer hover:text-blue': !props.fixed
|
7047
6929
|
});
|
@@ -7058,16 +6940,14 @@ var MenuGroup = /*#__PURE__*/React__default.forwardRef(function MenuGroup(props,
|
|
7058
6940
|
ref: ref
|
7059
6941
|
}));
|
7060
6942
|
});
|
7061
|
-
|
7062
|
-
|
7063
|
-
|
7064
|
-
React__default.Children.toArray(props.children).filter(
|
7065
|
-
return !!child;
|
7066
|
-
}).map(function (child) {
|
6943
|
+
const Menu$1 = /*#__PURE__*/React__default.forwardRef(function Menu(props, ref) {
|
6944
|
+
const scrollableAreas = React__default.useMemo(() => {
|
6945
|
+
const scrollableAreas = [];
|
6946
|
+
React__default.Children.toArray(props.children).filter(child => !!child).map(child => {
|
7067
6947
|
if (child.props.fixed) {
|
7068
6948
|
scrollableAreas.push(child);
|
7069
6949
|
} else {
|
7070
|
-
|
6950
|
+
const x = scrollableAreas[scrollableAreas.length - 1];
|
7071
6951
|
|
7072
6952
|
if (Array.isArray(x)) {
|
7073
6953
|
x.push(child);
|
@@ -7081,19 +6961,18 @@ var Menu$1 = /*#__PURE__*/React__default.forwardRef(function Menu(props, ref) {
|
|
7081
6961
|
return React__default.createElement(Treeview, Object.assign({}, props, {
|
7082
6962
|
className: cn('divide-grey-light flex flex-grow flex-col divide-y-2 overflow-y-auto', props.className),
|
7083
6963
|
ref: ref
|
7084
|
-
}), scrollableAreas.map(
|
7085
|
-
|
7086
|
-
|
7087
|
-
|
7088
|
-
}, area) : area;
|
7089
|
-
}));
|
6964
|
+
}), scrollableAreas.map((area, i) => Array.isArray(area) ? React__default.createElement("div", {
|
6965
|
+
className: "divide-grey-light flex h-0 flex-auto flex-shrink-0 flex-grow flex-col divide-y-2 overflow-y-auto",
|
6966
|
+
key: i
|
6967
|
+
}, area) : area));
|
7090
6968
|
});
|
7091
6969
|
Menu$1.Group = MenuGroup;
|
7092
|
-
|
7093
|
-
|
7094
|
-
|
7095
|
-
|
7096
|
-
|
6970
|
+
const Navigation = /*#__PURE__*/React__default.forwardRef(function Navigation(props, ref) {
|
6971
|
+
const {
|
6972
|
+
children,
|
6973
|
+
...otherProps
|
6974
|
+
} = props;
|
6975
|
+
const className = cn('h-full flex flex-col bg-grey-light divide-y-2 divide-grey-light', props.className);
|
7097
6976
|
return React__default.createElement("div", Object.assign({}, otherProps, {
|
7098
6977
|
className: className,
|
7099
6978
|
"data-taco": "navigation",
|
@@ -7349,54 +7228,52 @@ const useSelect = ({
|
|
7349
7228
|
};
|
7350
7229
|
};
|
7351
7230
|
|
7352
|
-
|
7353
|
-
|
7354
|
-
|
7355
|
-
|
7356
|
-
|
7357
|
-
|
7358
|
-
|
7359
|
-
|
7360
|
-
|
7361
|
-
|
7362
|
-
|
7363
|
-
|
7364
|
-
|
7365
|
-
|
7366
|
-
|
7367
|
-
|
7368
|
-
|
7369
|
-
|
7370
|
-
|
7371
|
-
var className = cn('inline-flex relative w-full', {
|
7231
|
+
const BaseSelect = /*#__PURE__*/React.forwardRef(function BaseSelect(props, ref) {
|
7232
|
+
const {
|
7233
|
+
autoFocus,
|
7234
|
+
className: externalClassName,
|
7235
|
+
highlighted,
|
7236
|
+
style,
|
7237
|
+
...otherProps
|
7238
|
+
} = props;
|
7239
|
+
const {
|
7240
|
+
button,
|
7241
|
+
listbox,
|
7242
|
+
popover,
|
7243
|
+
input,
|
7244
|
+
text,
|
7245
|
+
more = 0
|
7246
|
+
} = useSelect(otherProps, ref);
|
7247
|
+
const internalRef = React.useRef(null);
|
7248
|
+
const selectDimensions = useBoundingClientRectListener(internalRef);
|
7249
|
+
const className = cn('inline-flex relative w-full', {
|
7372
7250
|
'yt-select--readonly': props.readOnly
|
7373
7251
|
}, externalClassName);
|
7374
|
-
|
7252
|
+
const inputClassname = cn(getInputClasses(props), 'h-8 text-left pr-0', {
|
7375
7253
|
'border-blue': popover.open
|
7376
7254
|
});
|
7377
|
-
React.useEffect(
|
7255
|
+
React.useEffect(() => {
|
7378
7256
|
if (autoFocus && internalRef.current) {
|
7379
7257
|
internalRef.current.focus();
|
7380
7258
|
}
|
7381
7259
|
}, []);
|
7382
7260
|
|
7383
|
-
|
7261
|
+
const renderMultiSelection = () => {
|
7384
7262
|
return React.createElement(React.Fragment, null, React.createElement("span", {
|
7385
7263
|
className: "flex-grow truncate text-left"
|
7386
7264
|
}, text), more > 0 && React.createElement(Badge, {
|
7387
7265
|
className: "ml-2"
|
7388
|
-
},
|
7266
|
+
}, `+${more}`));
|
7389
7267
|
};
|
7390
7268
|
|
7391
|
-
|
7269
|
+
const commonListboxProps = { ...listbox,
|
7392
7270
|
className: 'w-auto',
|
7393
7271
|
invalid: undefined,
|
7394
7272
|
style: {
|
7395
7273
|
minWidth: selectDimensions === null || selectDimensions === void 0 ? void 0 : selectDimensions.width
|
7396
7274
|
},
|
7397
7275
|
tabIndex: popover.open ? 0 : -1
|
7398
|
-
}
|
7399
|
-
|
7276
|
+
};
|
7400
7277
|
return React.createElement("span", {
|
7401
7278
|
className: className,
|
7402
7279
|
"data-taco": "select",
|
@@ -7419,9 +7296,11 @@ var BaseSelect = /*#__PURE__*/React.forwardRef(function BaseSelect(props, ref) {
|
|
7419
7296
|
type: "text"
|
7420
7297
|
}))));
|
7421
7298
|
});
|
7422
|
-
|
7423
|
-
|
7424
|
-
|
7299
|
+
const Select = /*#__PURE__*/React.forwardRef(function Select(props, ref) {
|
7300
|
+
const {
|
7301
|
+
editable,
|
7302
|
+
...otherProps
|
7303
|
+
} = props;
|
7425
7304
|
|
7426
7305
|
if (editable) {
|
7427
7306
|
return React.createElement(Combobox, Object.assign({}, otherProps, {
|
@@ -7492,47 +7371,41 @@ const usePagination = (initialPageIndex = 0, initialPageSize = 10) => {
|
|
7492
7371
|
};
|
7493
7372
|
};
|
7494
7373
|
|
7495
|
-
|
7496
|
-
|
7497
|
-
|
7498
|
-
var minItemIndex = pageIndex * pageSize + 1;
|
7499
|
-
var maxItemIndex = (pageIndex + 1) * pageSize;
|
7374
|
+
const getShowingLabel = (length, pageIndex, pageSize, texts) => {
|
7375
|
+
const minItemIndex = pageIndex * pageSize + 1;
|
7376
|
+
const maxItemIndex = (pageIndex + 1) * pageSize;
|
7500
7377
|
return texts.pagination.showingXofYofTotal.replace('[X]', length === 0 ? '0' : String(minItemIndex)).replace('[Y]', String(maxItemIndex > length ? length : maxItemIndex)).replace('[total]', String(length));
|
7501
7378
|
};
|
7502
7379
|
|
7503
|
-
|
7504
|
-
|
7505
|
-
|
7506
|
-
|
7507
|
-
|
7508
|
-
|
7509
|
-
|
7510
|
-
|
7511
|
-
|
7512
|
-
|
7513
|
-
|
7514
|
-
|
7515
|
-
|
7516
|
-
|
7517
|
-
|
7518
|
-
|
7519
|
-
|
7520
|
-
|
7521
|
-
|
7522
|
-
texts = _useLocalization.texts;
|
7523
|
-
|
7524
|
-
var maxPageIndex = Math.ceil(length / pageSize) - 1;
|
7525
|
-
var showShortcutTexts = dangerouslyHijackGlobalKeyboardNavigation;
|
7380
|
+
const Pagination = /*#__PURE__*/React.forwardRef(function Pagination(props, ref) {
|
7381
|
+
const {
|
7382
|
+
length,
|
7383
|
+
pageIndex,
|
7384
|
+
pageSize,
|
7385
|
+
pageSizes = [10, 25, 50, 100, 500],
|
7386
|
+
setPageIndex,
|
7387
|
+
setPageSize,
|
7388
|
+
showPageControls = true,
|
7389
|
+
showPageNumbers = true,
|
7390
|
+
showPageSize = true,
|
7391
|
+
dangerouslyHijackGlobalKeyboardNavigation = false,
|
7392
|
+
...otherProps
|
7393
|
+
} = props;
|
7394
|
+
const {
|
7395
|
+
texts
|
7396
|
+
} = useLocalization();
|
7397
|
+
const maxPageIndex = Math.ceil(length / pageSize) - 1;
|
7398
|
+
const showShortcutTexts = dangerouslyHijackGlobalKeyboardNavigation;
|
7526
7399
|
usePaginationShortcuts({
|
7527
|
-
setPageIndex
|
7528
|
-
maxPageIndex
|
7529
|
-
pageIndex
|
7530
|
-
dangerouslyHijackGlobalKeyboardNavigation
|
7400
|
+
setPageIndex,
|
7401
|
+
maxPageIndex,
|
7402
|
+
pageIndex,
|
7403
|
+
dangerouslyHijackGlobalKeyboardNavigation
|
7531
7404
|
});
|
7532
|
-
|
7533
|
-
|
7534
|
-
|
7535
|
-
|
7405
|
+
const pageCount = Math.ceil(length / pageSize);
|
7406
|
+
const canPreviousPage = pageIndex > 0;
|
7407
|
+
const canNextPage = pageIndex < pageCount - 1;
|
7408
|
+
const className = cn('inline-flex relative justify-between items-center', props.className);
|
7536
7409
|
return React.createElement("div", Object.assign({}, otherProps, {
|
7537
7410
|
className: className,
|
7538
7411
|
"data-taco": "pagination",
|
@@ -7542,13 +7415,11 @@ var Pagination = /*#__PURE__*/React.forwardRef(function Pagination(props, ref) {
|
|
7542
7415
|
}, getShowingLabel(length, pageIndex, pageSize, texts), React.createElement(Select, {
|
7543
7416
|
"aria-label": texts.pagination.pageSize,
|
7544
7417
|
className: "ml-4 !w-20",
|
7545
|
-
data: pageSizes.map(
|
7546
|
-
|
7547
|
-
|
7548
|
-
|
7549
|
-
|
7550
|
-
}),
|
7551
|
-
onChange: function onChange(event) {
|
7418
|
+
data: pageSizes.map(pageSize => ({
|
7419
|
+
text: String(pageSize),
|
7420
|
+
value: pageSize
|
7421
|
+
})),
|
7422
|
+
onChange: event => {
|
7552
7423
|
setPageIndex(0);
|
7553
7424
|
setPageSize(Number(event.target.value));
|
7554
7425
|
},
|
@@ -7560,18 +7431,14 @@ var Pagination = /*#__PURE__*/React.forwardRef(function Pagination(props, ref) {
|
|
7560
7431
|
appearance: "default",
|
7561
7432
|
disabled: !canPreviousPage,
|
7562
7433
|
icon: "arrow-start",
|
7563
|
-
onClick:
|
7564
|
-
return setPageIndex(0);
|
7565
|
-
},
|
7434
|
+
onClick: () => setPageIndex(0),
|
7566
7435
|
"aria-label": showShortcutTexts ? texts.pagination.actions.firstPageWithShortcut : texts.pagination.actions.firstPage,
|
7567
7436
|
tooltip: showShortcutTexts ? texts.pagination.actions.firstPageWithShortcut : texts.pagination.actions.firstPage
|
7568
7437
|
}), React.createElement(IconButton, {
|
7569
7438
|
appearance: "default",
|
7570
7439
|
disabled: !canPreviousPage,
|
7571
7440
|
icon: "arrow-left",
|
7572
|
-
onClick:
|
7573
|
-
return setPageIndex(pageIndex - 1);
|
7574
|
-
},
|
7441
|
+
onClick: () => setPageIndex(pageIndex - 1),
|
7575
7442
|
"aria-label": showShortcutTexts ? texts.pagination.actions.previousPageWithShortcut : texts.pagination.actions.previousPage,
|
7576
7443
|
tooltip: showShortcutTexts ? texts.pagination.actions.previousPageWithShortcut : texts.pagination.actions.previousPage
|
7577
7444
|
}), showPageNumbers && pageCount > 0 && React.createElement(PageNumbers, {
|
@@ -7582,43 +7449,36 @@ var Pagination = /*#__PURE__*/React.forwardRef(function Pagination(props, ref) {
|
|
7582
7449
|
appearance: "default",
|
7583
7450
|
disabled: !canNextPage,
|
7584
7451
|
icon: "arrow-right",
|
7585
|
-
onClick:
|
7586
|
-
return setPageIndex(pageIndex + 1);
|
7587
|
-
},
|
7452
|
+
onClick: () => setPageIndex(pageIndex + 1),
|
7588
7453
|
"aria-label": showShortcutTexts ? texts.pagination.actions.nextPageWithShortcut : texts.pagination.actions.nextPage,
|
7589
7454
|
tooltip: showShortcutTexts ? texts.pagination.actions.nextPageWithShortcut : texts.pagination.actions.nextPage
|
7590
7455
|
}), React.createElement(IconButton, {
|
7591
7456
|
appearance: "default",
|
7592
7457
|
disabled: !canNextPage,
|
7593
7458
|
icon: "arrow-end",
|
7594
|
-
onClick:
|
7595
|
-
return setPageIndex(pageCount - 1);
|
7596
|
-
},
|
7459
|
+
onClick: () => setPageIndex(pageCount - 1),
|
7597
7460
|
"aria-label": showShortcutTexts ? texts.pagination.actions.lastPageWithShortcut : texts.pagination.actions.lastPage,
|
7598
7461
|
tooltip: showShortcutTexts ? texts.pagination.actions.lastPageWithShortcut : texts.pagination.actions.lastPage
|
7599
7462
|
})));
|
7600
7463
|
});
|
7601
7464
|
|
7602
|
-
|
7603
|
-
|
7604
|
-
|
7605
|
-
|
7606
|
-
|
7607
|
-
duration = _ref$duration === void 0 ? undefined : _ref$duration,
|
7608
|
-
props = _objectWithoutPropertiesLoose(_ref, _excluded$s);
|
7609
|
-
|
7610
|
-
var style;
|
7465
|
+
const Progress = ({
|
7466
|
+
duration = undefined,
|
7467
|
+
...props
|
7468
|
+
}) => {
|
7469
|
+
let style;
|
7611
7470
|
|
7612
7471
|
if (duration) {
|
7613
7472
|
style = {
|
7614
|
-
animationDuration: duration
|
7473
|
+
animationDuration: `${duration}ms`
|
7615
7474
|
};
|
7616
7475
|
}
|
7617
7476
|
|
7618
|
-
|
7619
|
-
|
7620
|
-
"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
|
7621
|
-
|
7477
|
+
const className = cn('bg-grey-light rounded block h-1 overflow-hidden w-full', props.className);
|
7478
|
+
const progressClassName = cn('yt-progress__bar block h-1', {
|
7479
|
+
"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,
|
7480
|
+
[`w-0 bg-grey-dark animate-[progress_linear]`]: duration
|
7481
|
+
});
|
7622
7482
|
return React__default.createElement("span", Object.assign({}, props, {
|
7623
7483
|
"data-taco": "progress",
|
7624
7484
|
className: className
|
@@ -9233,19 +9093,16 @@ const useTableRowCreation = (data, tableRef) => {
|
|
9233
9093
|
};
|
9234
9094
|
};
|
9235
9095
|
|
9236
|
-
|
9237
|
-
|
9238
|
-
|
9239
|
-
|
9240
|
-
|
9241
|
-
|
9242
|
-
|
9243
|
-
|
9244
|
-
|
9245
|
-
|
9246
|
-
otherProps = _objectWithoutPropertiesLoose(props, _excluded$t);
|
9247
|
-
|
9248
|
-
var className = cn('yt-tabs', "yt-tabs--" + orientation, {
|
9096
|
+
const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(props, ref) {
|
9097
|
+
const {
|
9098
|
+
id,
|
9099
|
+
defaultId,
|
9100
|
+
children,
|
9101
|
+
onChange,
|
9102
|
+
orientation = 'horizontal',
|
9103
|
+
...otherProps
|
9104
|
+
} = props;
|
9105
|
+
const className = cn('yt-tabs', `yt-tabs--${orientation}`, {
|
9249
9106
|
'flex w-full': orientation === 'vertical'
|
9250
9107
|
}, props.className);
|
9251
9108
|
return React.createElement(TabsPrimitive.Root, Object.assign({}, otherProps, {
|
@@ -9259,19 +9116,20 @@ var Tabs = /*#__PURE__*/React.forwardRef(function Tabs(props, ref) {
|
|
9259
9116
|
value: id
|
9260
9117
|
}), children);
|
9261
9118
|
});
|
9262
|
-
|
9263
|
-
|
9119
|
+
const TabList = /*#__PURE__*/React.forwardRef(function Tab(props, ref) {
|
9120
|
+
const className = cn('yt-tab__list border-b border-grey-light flex flex-row m-0 mb-4', props.className);
|
9264
9121
|
return React.createElement(TabsPrimitive.List, Object.assign({}, props, {
|
9265
9122
|
className: className,
|
9266
9123
|
ref: ref
|
9267
9124
|
}));
|
9268
9125
|
});
|
9269
|
-
|
9270
|
-
|
9271
|
-
|
9272
|
-
|
9273
|
-
|
9274
|
-
|
9126
|
+
const TabTrigger = /*#__PURE__*/React.forwardRef(function Tab(props, ref) {
|
9127
|
+
const {
|
9128
|
+
id,
|
9129
|
+
disabled,
|
9130
|
+
...otherProps
|
9131
|
+
} = props;
|
9132
|
+
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);
|
9275
9133
|
return React.createElement(TabsPrimitive.Trigger, Object.assign({}, otherProps, {
|
9276
9134
|
className: className,
|
9277
9135
|
disabled: disabled,
|
@@ -9282,11 +9140,12 @@ var TabTrigger = /*#__PURE__*/React.forwardRef(function Tab(props, ref) {
|
|
9282
9140
|
value: id
|
9283
9141
|
}));
|
9284
9142
|
});
|
9285
|
-
|
9286
|
-
|
9287
|
-
|
9288
|
-
|
9289
|
-
|
9143
|
+
const TabContent = /*#__PURE__*/React.forwardRef(function Tab(props, ref) {
|
9144
|
+
const {
|
9145
|
+
id,
|
9146
|
+
...otherProps
|
9147
|
+
} = props;
|
9148
|
+
const className = cn('yt-tab__panel outline-none', props.className);
|
9290
9149
|
return React.createElement(TabsPrimitive.Content, Object.assign({}, otherProps, {
|
9291
9150
|
className: className,
|
9292
9151
|
ref: ref,
|
@@ -9297,19 +9156,22 @@ Tabs.List = TabList;
|
|
9297
9156
|
Tabs.Trigger = TabTrigger;
|
9298
9157
|
Tabs.Content = TabContent;
|
9299
9158
|
|
9300
|
-
|
9301
|
-
|
9302
|
-
|
9303
|
-
|
9304
|
-
|
9305
|
-
|
9159
|
+
const Textarea = /*#__PURE__*/React.forwardRef(function Textarea(props, ref) {
|
9160
|
+
const {
|
9161
|
+
defaultValue: _,
|
9162
|
+
highlighted,
|
9163
|
+
invalid,
|
9164
|
+
onKeyDown,
|
9165
|
+
...otherProps
|
9166
|
+
} = props;
|
9167
|
+
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
|
9306
9168
|
// if it has scroll height then the browser reverts to native scrolling behaviour only
|
9307
9169
|
// so we manually override it to ensure _our_ desired behaviour remains intact
|
9308
9170
|
|
9309
|
-
|
9171
|
+
const handleKeyDown = event => {
|
9310
9172
|
if (event.key === 'Home' || event.key === 'End') {
|
9311
9173
|
event.preventDefault();
|
9312
|
-
|
9174
|
+
const position = event.key === 'End' ? event.currentTarget.value.length : 0;
|
9313
9175
|
event.currentTarget.setSelectionRange(position, position);
|
9314
9176
|
event.currentTarget.scrollTop = event.key === 'End' ? event.currentTarget.scrollHeight : 0;
|
9315
9177
|
}
|
@@ -9327,18 +9189,18 @@ var Textarea = /*#__PURE__*/React.forwardRef(function Textarea(props, ref) {
|
|
9327
9189
|
}));
|
9328
9190
|
});
|
9329
9191
|
|
9330
|
-
|
9331
|
-
|
9332
|
-
|
9333
|
-
|
9334
|
-
|
9335
|
-
|
9336
|
-
|
9192
|
+
const Switch = /*#__PURE__*/React.forwardRef(function Switch(props, ref) {
|
9193
|
+
const {
|
9194
|
+
label,
|
9195
|
+
onChange,
|
9196
|
+
...otherProps
|
9197
|
+
} = props;
|
9198
|
+
const className = cn('group h-5 w-9 flex rounded-full inline-flex', {
|
9337
9199
|
'mr-2': !!label,
|
9338
9200
|
'bg-grey-darker hover:bg-grey-dark aria-checked:bg-blue aria-checked:hover:bg-blue-light focus:yt-focus': !props.disabled,
|
9339
9201
|
'bg-grey-light cursor-not-allowed aria-checked:bg-blue-light': props.disabled
|
9340
9202
|
}, props.className);
|
9341
|
-
|
9203
|
+
const element = React.createElement(PrimitiveSwitch.Root, Object.assign({}, otherProps, {
|
9342
9204
|
className: className,
|
9343
9205
|
onCheckedChange: onChange,
|
9344
9206
|
ref: ref
|
@@ -9347,7 +9209,7 @@ var Switch = /*#__PURE__*/React.forwardRef(function Switch(props, ref) {
|
|
9347
9209
|
}));
|
9348
9210
|
|
9349
9211
|
if (label) {
|
9350
|
-
|
9212
|
+
const labelClassName = cn('flex items-center cursor-pointer', {
|
9351
9213
|
'cursor-not-allowed text-grey-dark': props.disabled
|
9352
9214
|
});
|
9353
9215
|
return React.createElement("label", {
|
@@ -9358,23 +9220,22 @@ var Switch = /*#__PURE__*/React.forwardRef(function Switch(props, ref) {
|
|
9358
9220
|
return element;
|
9359
9221
|
});
|
9360
9222
|
|
9361
|
-
|
9362
|
-
|
9363
|
-
|
9364
|
-
|
9365
|
-
|
9366
|
-
|
9367
|
-
|
9368
|
-
|
9369
|
-
|
9370
|
-
|
9371
|
-
|
9372
|
-
|
9373
|
-
|
9374
|
-
|
9375
|
-
|
9376
|
-
|
9377
|
-
var onWindowKeyDown = function onWindowKeyDown(event) {
|
9223
|
+
const Tooltip$1 = ({
|
9224
|
+
continuous,
|
9225
|
+
index,
|
9226
|
+
isLastStep,
|
9227
|
+
step,
|
9228
|
+
backProps,
|
9229
|
+
primaryProps,
|
9230
|
+
skipProps,
|
9231
|
+
tooltipProps,
|
9232
|
+
size,
|
9233
|
+
locale,
|
9234
|
+
disableTourSkipOnEsc
|
9235
|
+
}) => {
|
9236
|
+
const skipButtonRef = React.useRef(null);
|
9237
|
+
React.useEffect(() => {
|
9238
|
+
const onWindowKeyDown = event => {
|
9378
9239
|
if (!disableTourSkipOnEsc) {
|
9379
9240
|
if (event.keyCode === keycode('esc') && skipButtonRef.current !== null) {
|
9380
9241
|
event.preventDefault();
|
@@ -9385,7 +9246,7 @@ var Tooltip$1 = function Tooltip(_ref) {
|
|
9385
9246
|
};
|
9386
9247
|
|
9387
9248
|
window.addEventListener('keydown', onWindowKeyDown);
|
9388
|
-
return
|
9249
|
+
return () => {
|
9389
9250
|
window.removeEventListener('keydown', onWindowKeyDown);
|
9390
9251
|
};
|
9391
9252
|
}, []);
|
@@ -9404,30 +9265,30 @@ var Tooltip$1 = function Tooltip(_ref) {
|
|
9404
9265
|
appearance: "discrete"
|
9405
9266
|
}), locale.back), React.createElement(Button$1, Object.assign({}, primaryProps, {
|
9406
9267
|
appearance: "primary"
|
9407
|
-
}), continuous ? isLastStep ? locale.last
|
9268
|
+
}), continuous ? isLastStep ? `${locale.last} (${index + 1}/${size})` : `${locale.next} (${index + 1}/${size})` : locale.close)));
|
9408
9269
|
}; // eslint-disable-next-line @typescript-eslint/no-unused-vars
|
9409
9270
|
|
9410
9271
|
|
9411
|
-
|
9412
|
-
|
9413
|
-
|
9414
|
-
|
9415
|
-
|
9416
|
-
|
9417
|
-
|
9418
|
-
|
9419
|
-
|
9420
|
-
|
9421
|
-
|
9422
|
-
|
9423
|
-
|
9424
|
-
|
9425
|
-
|
9426
|
-
|
9427
|
-
|
9428
|
-
|
9429
|
-
return React.Children.map(props.children,
|
9430
|
-
|
9272
|
+
const TourStep = _props => null;
|
9273
|
+
const Tour = props => {
|
9274
|
+
const {
|
9275
|
+
texts: {
|
9276
|
+
tour
|
9277
|
+
}
|
9278
|
+
} = useLocalization();
|
9279
|
+
const {
|
9280
|
+
autoStart: run,
|
9281
|
+
onComplete,
|
9282
|
+
onClose,
|
9283
|
+
onReady,
|
9284
|
+
spotlightClicks,
|
9285
|
+
disableCloseOnEsc: disableTourSkipOnEsc,
|
9286
|
+
disableScrollParentFix = false,
|
9287
|
+
...rest
|
9288
|
+
} = props;
|
9289
|
+
const steps = React.useMemo(() => {
|
9290
|
+
return React.Children.map(props.children, child => {
|
9291
|
+
const step = {
|
9431
9292
|
disableBeacon: !child.props.showBeacon,
|
9432
9293
|
target: child.props.selector,
|
9433
9294
|
placement: child.props.position,
|
@@ -9437,12 +9298,10 @@ var Tour = function Tour(props) {
|
|
9437
9298
|
return step;
|
9438
9299
|
});
|
9439
9300
|
}, [props.children]);
|
9440
|
-
|
9301
|
+
const getStep = React.useCallback(selector => {
|
9441
9302
|
var _props$children$find;
|
9442
9303
|
|
9443
|
-
return (_props$children$find = props.children.find(
|
9444
|
-
return child.props.selector === selector;
|
9445
|
-
})) === null || _props$children$find === void 0 ? void 0 : _props$children$find.props;
|
9304
|
+
return (_props$children$find = props.children.find(child => child.props.selector === selector)) === null || _props$children$find === void 0 ? void 0 : _props$children$find.props;
|
9446
9305
|
}, [props.children]);
|
9447
9306
|
|
9448
9307
|
function callback(state) {
|
@@ -9472,12 +9331,10 @@ var Tour = function Tour(props) {
|
|
9472
9331
|
floaterProps: {
|
9473
9332
|
disableAnimation: true
|
9474
9333
|
},
|
9475
|
-
tooltipComponent:
|
9476
|
-
|
9477
|
-
|
9478
|
-
|
9479
|
-
}));
|
9480
|
-
},
|
9334
|
+
tooltipComponent: tooltipProps => React.createElement(Tooltip$1, Object.assign({}, tooltipProps, {
|
9335
|
+
locale: tour,
|
9336
|
+
disableTourSkipOnEsc: disableTourSkipOnEsc
|
9337
|
+
})),
|
9481
9338
|
locale: tour,
|
9482
9339
|
spotlightPadding: 8,
|
9483
9340
|
spotlightClicks: spotlightClicks,
|
@@ -9518,12 +9375,12 @@ var useOnClickOutside = function useOnClickOutside(ref, callback) {
|
|
9518
9375
|
}, [ref, callback]);
|
9519
9376
|
};
|
9520
9377
|
|
9521
|
-
|
9522
|
-
|
9523
|
-
|
9524
|
-
|
9525
|
-
|
9526
|
-
|
9378
|
+
const Content$6 = /*#__PURE__*/React.forwardRef(function CardContent(externalProps, ref) {
|
9379
|
+
const {
|
9380
|
+
noPadding,
|
9381
|
+
...props
|
9382
|
+
} = externalProps;
|
9383
|
+
const className = cn('flex-grow overflow-auto', {
|
9527
9384
|
'mx-4 mb-4': !noPadding
|
9528
9385
|
}, props.className);
|
9529
9386
|
return React.createElement("div", Object.assign({}, props, {
|
@@ -9531,11 +9388,13 @@ var Content$6 = /*#__PURE__*/React.forwardRef(function CardContent(externalProps
|
|
9531
9388
|
ref: ref
|
9532
9389
|
}));
|
9533
9390
|
});
|
9534
|
-
|
9535
|
-
|
9536
|
-
|
9537
|
-
|
9538
|
-
|
9391
|
+
const Card = /*#__PURE__*/React.forwardRef(function Card(props, ref) {
|
9392
|
+
const {
|
9393
|
+
title,
|
9394
|
+
menu,
|
9395
|
+
children
|
9396
|
+
} = props;
|
9397
|
+
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);
|
9539
9398
|
return React.createElement("div", {
|
9540
9399
|
className: className,
|
9541
9400
|
"data-taco": "card",
|
@@ -9617,6 +9476,7 @@ exports.useListScrollTo = useListScrollTo;
|
|
9617
9476
|
exports.useLocalization = useLocalization;
|
9618
9477
|
exports.useOnClickOutside = useOnClickOutside;
|
9619
9478
|
exports.usePagination = usePagination;
|
9479
|
+
exports.useProxiedRef = useProxiedRef;
|
9620
9480
|
exports.useRadioGroup = useRadioGroup;
|
9621
9481
|
exports.useTableRowCreation = useTableRowCreation;
|
9622
9482
|
exports.useTaco = useTaco;
|