@economic/taco 0.0.31-alpha.2 → 0.0.33-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/Button/util.js +1 -1
- package/dist/esm/components/Button/util.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 +20 -43
- package/dist/esm/components/Menu/Menu.js.map +1 -1
- package/dist/esm/components/Navigation/Navigation.js +35 -44
- package/dist/esm/components/Navigation/Navigation.js.map +1 -1
- package/dist/esm/components/Pagination/Pagination.js +39 -56
- package/dist/esm/components/Pagination/Pagination.js.map +1 -1
- package/dist/esm/components/Popover/Popover.js +29 -34
- package/dist/esm/components/Popover/Popover.js.map +1 -1
- package/dist/esm/components/Progress/Progress.js +11 -15
- package/dist/esm/components/Progress/Progress.js.map +1 -1
- package/dist/esm/components/Provider/Provider.js +13 -18
- package/dist/esm/components/Provider/Provider.js.map +1 -1
- package/dist/esm/components/RadioGroup/RadioGroup.js +45 -57
- package/dist/esm/components/RadioGroup/RadioGroup.js.map +1 -1
- package/dist/esm/components/SearchInput/SearchInput.js +10 -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/Select/useSelect.js +3 -6
- package/dist/esm/components/Select/useSelect.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/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.css +3 -3
- package/dist/index.css +3 -3
- package/dist/taco.cjs.development.js +531 -647
- 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 +2 -2
@@ -3237,7 +3237,7 @@ var Backdrop = /*#__PURE__*/React.forwardRef(function Backdrop(props, ref) {
|
|
3237
3237
|
}));
|
3238
3238
|
});
|
3239
3239
|
|
3240
|
-
|
3240
|
+
const VisuallyHidden = /*#__PURE__*/React.forwardRef(function VisuallyHidden(props, ref) {
|
3241
3241
|
return React.createElement("span", Object.assign({}, props, {
|
3242
3242
|
className: "sr-only",
|
3243
3243
|
ref: ref
|
@@ -3355,13 +3355,13 @@ const Button = /*#__PURE__*/React.forwardRef(function Button(props, ref) {
|
|
3355
3355
|
}), React.Children.count(props.children) > 1 ? React.Children.map(props.children, child => typeof child === 'string' ? React.createElement("span", null, child) : child) : props.children);
|
3356
3356
|
});
|
3357
3357
|
|
3358
|
-
|
3359
|
-
|
3360
|
-
|
3361
|
-
|
3362
|
-
|
3363
|
-
|
3364
|
-
|
3358
|
+
const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(props, ref) {
|
3359
|
+
const {
|
3360
|
+
title,
|
3361
|
+
children,
|
3362
|
+
placement,
|
3363
|
+
...otherProps
|
3364
|
+
} = props;
|
3365
3365
|
return React.createElement(TooltipPrimitive.Root, {
|
3366
3366
|
delayDuration: 50
|
3367
3367
|
}, React.createElement(TooltipPrimitive.Trigger, {
|
@@ -3383,7 +3383,7 @@ var Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(props, ref) {
|
|
3383
3383
|
});
|
3384
3384
|
|
3385
3385
|
const getButtonClasses = () => {
|
3386
|
-
return 'min-h-[theme(spacing.8)] min-w-[theme(spacing.8)] h-max inline-flex items-center justify-center border';
|
3386
|
+
return 'min-h-[theme(spacing.8)] min-w-[theme(spacing.8)] gap-1 h-max inline-flex items-center justify-center border';
|
3387
3387
|
};
|
3388
3388
|
const getAppearanceClasses = (value, icon = false) => {
|
3389
3389
|
switch (value) {
|
@@ -3453,12 +3453,12 @@ const createButton = (props, className, ref) => {
|
|
3453
3453
|
return button;
|
3454
3454
|
};
|
3455
3455
|
|
3456
|
-
var _excluded$
|
3456
|
+
var _excluded$3 = ["icon", "rounded"];
|
3457
3457
|
var IconButton = /*#__PURE__*/React.forwardRef(function IconButton(props, ref) {
|
3458
3458
|
var icon = props.icon,
|
3459
3459
|
_props$rounded = props.rounded,
|
3460
3460
|
rounded = _props$rounded === void 0 ? false : _props$rounded,
|
3461
|
-
otherProps = _objectWithoutPropertiesLoose(props, _excluded$
|
3461
|
+
otherProps = _objectWithoutPropertiesLoose(props, _excluded$3);
|
3462
3462
|
|
3463
3463
|
var className = cn('w-8', getButtonClasses(), getAppearanceClasses(otherProps.appearance, true), {
|
3464
3464
|
'rounded-full': rounded,
|
@@ -3497,10 +3497,10 @@ var Banner = /*#__PURE__*/React.forwardRef(function Banner(props, ref) {
|
|
3497
3497
|
}) : null);
|
3498
3498
|
});
|
3499
3499
|
|
3500
|
-
var _excluded$
|
3500
|
+
var _excluded$4 = ["fluid"];
|
3501
3501
|
var Button$1 = /*#__PURE__*/React.forwardRef(function Button(props, ref) {
|
3502
3502
|
var fluid = props.fluid,
|
3503
|
-
otherProps = _objectWithoutPropertiesLoose(props, _excluded$
|
3503
|
+
otherProps = _objectWithoutPropertiesLoose(props, _excluded$4);
|
3504
3504
|
|
3505
3505
|
var className = cn(getButtonClasses(), getAppearanceClasses(otherProps.appearance), 'rounded px-3', {
|
3506
3506
|
'cursor-not-allowed opacity-50': props.disabled,
|
@@ -3571,27 +3571,21 @@ function useTimer(duration = 0, callback) {
|
|
3571
3571
|
};
|
3572
3572
|
}
|
3573
3573
|
|
3574
|
-
|
3575
|
-
|
3576
|
-
|
3577
|
-
|
3578
|
-
|
3579
|
-
|
3580
|
-
|
3581
|
-
|
3582
|
-
|
3583
|
-
setVisibility = _React$useState[1];
|
3584
|
-
|
3585
|
-
React__default.useEffect(function () {
|
3586
|
-
var timeout;
|
3574
|
+
const Spinner$1 = /*#__PURE__*/React__default.forwardRef(function Spinner(props, ref) {
|
3575
|
+
const {
|
3576
|
+
delay = 500,
|
3577
|
+
label,
|
3578
|
+
...otherProps
|
3579
|
+
} = props;
|
3580
|
+
const [visible, setVisibility] = React__default.useState(!delay);
|
3581
|
+
React__default.useEffect(() => {
|
3582
|
+
let timeout;
|
3587
3583
|
|
3588
3584
|
if (delay) {
|
3589
|
-
timeout = window.setTimeout(
|
3590
|
-
return setVisibility(true);
|
3591
|
-
}, delay);
|
3585
|
+
timeout = window.setTimeout(() => setVisibility(true), delay);
|
3592
3586
|
}
|
3593
3587
|
|
3594
|
-
return
|
3588
|
+
return () => {
|
3595
3589
|
if (timeout) {
|
3596
3590
|
clearTimeout(timeout);
|
3597
3591
|
}
|
@@ -3602,7 +3596,7 @@ var Spinner$1 = /*#__PURE__*/React__default.forwardRef(function Spinner(props, r
|
|
3602
3596
|
return null;
|
3603
3597
|
}
|
3604
3598
|
|
3605
|
-
|
3599
|
+
const className = cn('inline-flex flex-col relative items-center', otherProps.className);
|
3606
3600
|
return React__default.createElement("div", Object.assign({}, otherProps, {
|
3607
3601
|
className: className,
|
3608
3602
|
"data-taco": "spinner",
|
@@ -3728,62 +3722,49 @@ const Toast = ({
|
|
3728
3722
|
}));
|
3729
3723
|
};
|
3730
3724
|
|
3731
|
-
|
3732
|
-
|
3733
|
-
var ToastContext = /*#__PURE__*/React.createContext({});
|
3725
|
+
const DEFAULT_AUTO_CLOSE_TIMEOUT = 7500;
|
3726
|
+
const ToastContext = /*#__PURE__*/React.createContext({});
|
3734
3727
|
|
3735
|
-
|
3736
|
-
|
3737
|
-
|
3738
|
-
return JSON.stringify(toast.content) === JSON.stringify(content);
|
3739
|
-
});
|
3728
|
+
const insertToastWithoutDuplicates = (currentToasts, id, content, options, close) => {
|
3729
|
+
const nextToasts = [...currentToasts];
|
3730
|
+
const existingToastIndex = currentToasts.findIndex(toast => JSON.stringify(toast.content) === JSON.stringify(content));
|
3740
3731
|
|
3741
3732
|
if (existingToastIndex > -1) {
|
3742
3733
|
nextToasts[existingToastIndex].lastDuplicateId = id;
|
3743
3734
|
nextToasts[existingToastIndex].lastUpdated = Date.now();
|
3744
3735
|
} else {
|
3745
3736
|
nextToasts.push({
|
3746
|
-
id
|
3737
|
+
id,
|
3747
3738
|
content: typeof content === 'function' ? content(close) : content,
|
3748
|
-
options
|
3739
|
+
options
|
3749
3740
|
});
|
3750
3741
|
}
|
3751
3742
|
|
3752
3743
|
return nextToasts;
|
3753
3744
|
};
|
3754
3745
|
|
3755
|
-
|
3756
|
-
|
3757
|
-
|
3758
|
-
|
3759
|
-
|
3760
|
-
toasts = _React$useState[0],
|
3761
|
-
setToasts = _React$useState[1];
|
3746
|
+
const ToastProvider = ({
|
3747
|
+
children,
|
3748
|
+
...props
|
3749
|
+
}) => {
|
3750
|
+
const [toasts, setToasts] = React.useState([]);
|
3762
3751
|
|
3763
|
-
|
3764
|
-
setToasts(
|
3765
|
-
return currentToasts.filter(function (toast) {
|
3766
|
-
return toast.id !== id;
|
3767
|
-
});
|
3768
|
-
});
|
3752
|
+
const handleClose = id => {
|
3753
|
+
setToasts(currentToasts => currentToasts.filter(toast => toast.id !== id));
|
3769
3754
|
}; // memoize (useCallback) this function,
|
3770
3755
|
// it is the value of the context provider and we don't want it to trigger state tree re-renders on provider children
|
3771
3756
|
|
3772
3757
|
|
3773
|
-
|
3774
|
-
|
3758
|
+
const toaster = React.useCallback((content, options) => {
|
3759
|
+
const id = uuid.v4();
|
3775
3760
|
|
3776
|
-
|
3777
|
-
return handleClose(id);
|
3778
|
-
};
|
3761
|
+
const close = () => handleClose(id);
|
3779
3762
|
|
3780
|
-
setToasts(
|
3781
|
-
return insertToastWithoutDuplicates(currentToasts, id, content, options, close);
|
3782
|
-
});
|
3763
|
+
setToasts(currentToasts => insertToastWithoutDuplicates(currentToasts, id, content, options, close));
|
3783
3764
|
|
3784
|
-
|
3785
|
-
setToasts(
|
3786
|
-
|
3765
|
+
const update = (content, options) => {
|
3766
|
+
setToasts(currentToasts => {
|
3767
|
+
const nextToasts = currentToasts.filter(toast => {
|
3787
3768
|
if (toast.lastDuplicateId) {
|
3788
3769
|
return toast.lastDuplicateId !== id;
|
3789
3770
|
}
|
@@ -3794,80 +3775,70 @@ var ToastProvider = function ToastProvider(_ref) {
|
|
3794
3775
|
});
|
3795
3776
|
};
|
3796
3777
|
|
3797
|
-
|
3798
|
-
update(content,
|
3799
|
-
autoClose: DEFAULT_AUTO_CLOSE_TIMEOUT
|
3800
|
-
|
3778
|
+
const success = (content, options) => {
|
3779
|
+
update(content, {
|
3780
|
+
autoClose: DEFAULT_AUTO_CLOSE_TIMEOUT,
|
3781
|
+
...options,
|
3801
3782
|
type: 'success'
|
3802
|
-
})
|
3783
|
+
});
|
3803
3784
|
};
|
3804
3785
|
|
3805
|
-
|
3806
|
-
update(content,
|
3786
|
+
const error = (content, options) => {
|
3787
|
+
update(content, { ...options,
|
3807
3788
|
type: 'error'
|
3808
|
-
})
|
3789
|
+
});
|
3809
3790
|
};
|
3810
3791
|
|
3811
|
-
|
3812
|
-
update(content,
|
3792
|
+
const warning = (content, options) => {
|
3793
|
+
update(content, { ...options,
|
3813
3794
|
type: 'warning'
|
3814
|
-
})
|
3795
|
+
});
|
3815
3796
|
};
|
3816
3797
|
|
3817
|
-
|
3818
|
-
update(content,
|
3798
|
+
const information = (content, options) => {
|
3799
|
+
update(content, { ...options,
|
3819
3800
|
type: 'information'
|
3820
|
-
})
|
3801
|
+
});
|
3821
3802
|
};
|
3822
3803
|
|
3823
|
-
|
3824
|
-
update(content,
|
3804
|
+
const loading = (content, options) => {
|
3805
|
+
update(content, { ...options,
|
3825
3806
|
type: 'loading'
|
3826
|
-
})
|
3807
|
+
});
|
3827
3808
|
};
|
3828
3809
|
|
3829
3810
|
return {
|
3830
|
-
success
|
3831
|
-
error
|
3832
|
-
warning
|
3833
|
-
information
|
3834
|
-
loading
|
3835
|
-
close
|
3811
|
+
success,
|
3812
|
+
error,
|
3813
|
+
warning,
|
3814
|
+
information,
|
3815
|
+
loading,
|
3816
|
+
close
|
3836
3817
|
};
|
3837
3818
|
}, []); // no need to rebind these every render, do them once in an effect
|
3838
3819
|
|
3839
|
-
React.useEffect(
|
3840
|
-
toaster.success =
|
3841
|
-
|
3842
|
-
|
3843
|
-
|
3844
|
-
|
3845
|
-
}));
|
3846
|
-
};
|
3820
|
+
React.useEffect(() => {
|
3821
|
+
toaster.success = (content, options) => toaster(content, {
|
3822
|
+
autoClose: DEFAULT_AUTO_CLOSE_TIMEOUT,
|
3823
|
+
...options,
|
3824
|
+
type: 'success'
|
3825
|
+
});
|
3847
3826
|
|
3848
|
-
toaster.error =
|
3849
|
-
|
3850
|
-
|
3851
|
-
}));
|
3852
|
-
};
|
3827
|
+
toaster.error = (content, options) => toaster(content, { ...options,
|
3828
|
+
type: 'error'
|
3829
|
+
});
|
3853
3830
|
|
3854
|
-
toaster.warning =
|
3855
|
-
|
3856
|
-
|
3857
|
-
}));
|
3858
|
-
};
|
3831
|
+
toaster.warning = (content, options) => toaster(content, { ...options,
|
3832
|
+
type: 'warning'
|
3833
|
+
});
|
3859
3834
|
|
3860
|
-
toaster.information =
|
3861
|
-
|
3862
|
-
|
3863
|
-
}));
|
3864
|
-
};
|
3835
|
+
toaster.information = (content, options) => toaster(content, { ...options,
|
3836
|
+
type: 'information'
|
3837
|
+
});
|
3865
3838
|
|
3866
|
-
toaster.loading =
|
3867
|
-
|
3868
|
-
|
3869
|
-
}));
|
3870
|
-
};
|
3839
|
+
toaster.loading = (content, options) => toaster(content, { ...options,
|
3840
|
+
type: 'loading'
|
3841
|
+
});
|
3871
3842
|
}, []);
|
3872
3843
|
return React.createElement(ToastContext.Provider, Object.assign({}, props, {
|
3873
3844
|
value: toaster
|
@@ -3877,43 +3848,37 @@ var ToastProvider = function ToastProvider(_ref) {
|
|
3877
3848
|
role: "log"
|
3878
3849
|
}, React.createElement(framerMotion.AnimatePresence, {
|
3879
3850
|
initial: false
|
3880
|
-
}, toasts.map(
|
3881
|
-
|
3882
|
-
|
3851
|
+
}, toasts.map(toast => React.createElement(framerMotion.motion.div, {
|
3852
|
+
key: toast.id,
|
3853
|
+
transition: {
|
3854
|
+
type: 'spring',
|
3855
|
+
damping: 20,
|
3856
|
+
stiffness: 300
|
3857
|
+
},
|
3858
|
+
initial: {
|
3859
|
+
opacity: 0,
|
3860
|
+
y: 10,
|
3861
|
+
scale: 0.5
|
3862
|
+
},
|
3863
|
+
animate: {
|
3864
|
+
opacity: 1,
|
3865
|
+
y: 0,
|
3866
|
+
scale: 1
|
3867
|
+
},
|
3868
|
+
exit: {
|
3869
|
+
opacity: 0,
|
3870
|
+
scale: 0.5,
|
3883
3871
|
transition: {
|
3884
|
-
|
3885
|
-
damping: 20,
|
3886
|
-
stiffness: 300
|
3887
|
-
},
|
3888
|
-
initial: {
|
3889
|
-
opacity: 0,
|
3890
|
-
y: 10,
|
3891
|
-
scale: 0.5
|
3892
|
-
},
|
3893
|
-
animate: {
|
3894
|
-
opacity: 1,
|
3895
|
-
y: 0,
|
3896
|
-
scale: 1
|
3897
|
-
},
|
3898
|
-
exit: {
|
3899
|
-
opacity: 0,
|
3900
|
-
scale: 0.5,
|
3901
|
-
transition: {
|
3902
|
-
duration: 0.2
|
3903
|
-
}
|
3872
|
+
duration: 0.2
|
3904
3873
|
}
|
3905
|
-
}
|
3906
|
-
|
3907
|
-
|
3908
|
-
|
3909
|
-
})));
|
3910
|
-
}))));
|
3911
|
-
};
|
3912
|
-
var useToast = function useToast() {
|
3913
|
-
return React.useContext(ToastContext);
|
3874
|
+
}
|
3875
|
+
}, React.createElement(Toast, Object.assign({}, toast, {
|
3876
|
+
onClose: () => handleClose(toast.id)
|
3877
|
+
})))))));
|
3914
3878
|
};
|
3879
|
+
const useToast = () => React.useContext(ToastContext);
|
3915
3880
|
|
3916
|
-
|
3881
|
+
const defaultLocalisationTexts = {
|
3917
3882
|
calendar: {
|
3918
3883
|
months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
|
3919
3884
|
weekdaysShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
|
@@ -3988,37 +3953,32 @@ var defaultLocalisationTexts = {
|
|
3988
3953
|
inputLabel: 'Search...'
|
3989
3954
|
}
|
3990
3955
|
};
|
3991
|
-
|
3956
|
+
const defaultLocalizationContext = {
|
3992
3957
|
locale: 'en-GB',
|
3993
3958
|
texts: defaultLocalisationTexts,
|
3994
3959
|
formatting: {
|
3995
3960
|
date: 'dd.mm.yy'
|
3996
3961
|
}
|
3997
3962
|
};
|
3998
|
-
|
3963
|
+
const Context = /*#__PURE__*/React.createContext({
|
3999
3964
|
localization: defaultLocalizationContext
|
4000
3965
|
});
|
4001
|
-
|
4002
|
-
|
4003
|
-
|
4004
|
-
|
4005
|
-
|
4006
|
-
|
4007
|
-
|
4008
|
-
|
4009
|
-
}, [localization]);
|
3966
|
+
const Provider = props => {
|
3967
|
+
const {
|
3968
|
+
children,
|
3969
|
+
localization = defaultLocalizationContext
|
3970
|
+
} = props;
|
3971
|
+
const value = React.useMemo(() => ({
|
3972
|
+
localization
|
3973
|
+
}), [localization]);
|
4010
3974
|
return React.createElement(Context.Provider, {
|
4011
3975
|
value: value
|
4012
3976
|
}, React.createElement(ToastProvider, null, children));
|
4013
3977
|
};
|
4014
|
-
|
4015
|
-
|
4016
|
-
};
|
4017
|
-
var useLocalization = function useLocalization() {
|
4018
|
-
return useTaco().localization;
|
4019
|
-
};
|
3978
|
+
const useTaco = () => React.useContext(Context);
|
3979
|
+
const useLocalization = () => useTaco().localization;
|
4020
3980
|
|
4021
|
-
var _excluded$
|
3981
|
+
var _excluded$5 = ["onChange", "value"];
|
4022
3982
|
|
4023
3983
|
var renderDay = function renderDay(day, modifiers) {
|
4024
3984
|
return modifiers.disabled ? React.createElement("span", {
|
@@ -4097,7 +4057,7 @@ var Navbar = /*#__PURE__*/React.memo(function (_ref) {
|
|
4097
4057
|
var Calendar$1 = /*#__PURE__*/React.forwardRef(function Calendar(props, ref) {
|
4098
4058
|
var handleChange = props.onChange,
|
4099
4059
|
value = props.value,
|
4100
|
-
otherProps = _objectWithoutPropertiesLoose(props, _excluded$
|
4060
|
+
otherProps = _objectWithoutPropertiesLoose(props, _excluded$5);
|
4101
4061
|
|
4102
4062
|
var _useLocalization2 = useLocalization(),
|
4103
4063
|
locale = _useLocalization2.locale,
|
@@ -4161,7 +4121,7 @@ var Calendar$1 = /*#__PURE__*/React.forwardRef(function Calendar(props, ref) {
|
|
4161
4121
|
})));
|
4162
4122
|
});
|
4163
4123
|
|
4164
|
-
var _excluded$
|
4124
|
+
var _excluded$6 = ["checked", "highlighted", "indeterminate", "invalid", "label", "onChange"];
|
4165
4125
|
var Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(props, ref) {
|
4166
4126
|
var checked = props.checked,
|
4167
4127
|
highlighted = props.highlighted,
|
@@ -4169,7 +4129,7 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(props, ref) {
|
|
4169
4129
|
invalid = props.invalid,
|
4170
4130
|
label = props.label,
|
4171
4131
|
onChange = props.onChange,
|
4172
|
-
otherProps = _objectWithoutPropertiesLoose(props, _excluded$
|
4132
|
+
otherProps = _objectWithoutPropertiesLoose(props, _excluded$6);
|
4173
4133
|
|
4174
4134
|
var className = cn('bg-white h-5 w-5 border rounded text-sm flex-shrink-0 self-start mt-[0.1rem]', {
|
4175
4135
|
'mr-2': !!label,
|
@@ -4243,21 +4203,22 @@ const getButtonStateClasses = invalid => {
|
|
4243
4203
|
return '!border-grey-dark focus:!border-blue-light peer-focus:!border-blue-light peer-focus:peer-active:!border-blue-dark';
|
4244
4204
|
};
|
4245
4205
|
|
4246
|
-
|
4247
|
-
|
4248
|
-
|
4249
|
-
|
4250
|
-
|
4251
|
-
|
4252
|
-
|
4253
|
-
|
4254
|
-
|
4255
|
-
|
4256
|
-
|
4257
|
-
|
4206
|
+
const Input = /*#__PURE__*/React.forwardRef(function Input(props, ref) {
|
4207
|
+
const {
|
4208
|
+
button,
|
4209
|
+
icon,
|
4210
|
+
highlighted,
|
4211
|
+
invalid,
|
4212
|
+
onKeyDown,
|
4213
|
+
autoFocus,
|
4214
|
+
...otherProps
|
4215
|
+
} = props;
|
4216
|
+
const inputRef = useProxiedRef(ref);
|
4217
|
+
const hasContainer = button || icon;
|
4218
|
+
const className = cn(getInputClasses(props), 'min-h-[theme(spacing.8)] pointer-events-all', {
|
4258
4219
|
'pr-8': !!hasContainer
|
4259
4220
|
}, !hasContainer && otherProps.className);
|
4260
|
-
React.useEffect(
|
4221
|
+
React.useEffect(() => {
|
4261
4222
|
if (autoFocus && inputRef.current) {
|
4262
4223
|
inputRef.current.focus();
|
4263
4224
|
}
|
@@ -4265,10 +4226,10 @@ var Input = /*#__PURE__*/React.forwardRef(function Input(props, ref) {
|
|
4265
4226
|
// if it has scroll height then the browser reverts to native scrolling behaviour only
|
4266
4227
|
// so we manually override it to ensure _our_ desired behaviour remains intact
|
4267
4228
|
|
4268
|
-
|
4229
|
+
const handleKeyDown = event => {
|
4269
4230
|
if (event.key === 'Home' || event.key === 'End') {
|
4270
4231
|
event.preventDefault();
|
4271
|
-
|
4232
|
+
const position = event.key === 'End' ? event.currentTarget.value.length : 0;
|
4272
4233
|
event.currentTarget.setSelectionRange(position, position);
|
4273
4234
|
}
|
4274
4235
|
|
@@ -4277,7 +4238,7 @@ var Input = /*#__PURE__*/React.forwardRef(function Input(props, ref) {
|
|
4277
4238
|
}
|
4278
4239
|
};
|
4279
4240
|
|
4280
|
-
|
4241
|
+
const input = React.createElement("input", Object.assign({}, otherProps, {
|
4281
4242
|
className: className,
|
4282
4243
|
"data-taco": "input",
|
4283
4244
|
onKeyDown: handleKeyDown,
|
@@ -4285,19 +4246,21 @@ var Input = /*#__PURE__*/React.forwardRef(function Input(props, ref) {
|
|
4285
4246
|
}));
|
4286
4247
|
|
4287
4248
|
if (hasContainer) {
|
4288
|
-
|
4249
|
+
let extra;
|
4289
4250
|
|
4290
4251
|
if (button) {
|
4291
|
-
var _button$props$disable
|
4252
|
+
var _button$props$disable;
|
4292
4253
|
|
4293
|
-
|
4294
|
-
|
4254
|
+
const disabled = (_button$props$disable = button.props.disabled) !== null && _button$props$disable !== void 0 ? _button$props$disable : otherProps.disabled;
|
4255
|
+
const buttonClassName = cn('items-center flex justify-center border absolute rounded-l-none rounded-r right-0 h-full focus:rounded focus:outline-none', {
|
4256
|
+
[getButtonStateClasses(invalid)]: !props.disabled
|
4257
|
+
}, button.props.className);
|
4295
4258
|
extra = React.cloneElement(button, {
|
4296
4259
|
className: buttonClassName,
|
4297
|
-
disabled
|
4260
|
+
disabled
|
4298
4261
|
});
|
4299
4262
|
} else if (icon) {
|
4300
|
-
|
4263
|
+
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', {
|
4301
4264
|
'text-grey-dark': props.disabled,
|
4302
4265
|
'text-grey-darkest': !props.disabled
|
4303
4266
|
});
|
@@ -4309,7 +4272,7 @@ var Input = /*#__PURE__*/React.forwardRef(function Input(props, ref) {
|
|
4309
4272
|
});
|
4310
4273
|
}
|
4311
4274
|
|
4312
|
-
|
4275
|
+
const containerClassName = cn('bg-white inline-flex relative rounded w-full', otherProps.className);
|
4313
4276
|
return React.createElement("div", {
|
4314
4277
|
className: containerClassName,
|
4315
4278
|
"data-taco": "input-container"
|
@@ -5083,12 +5046,12 @@ var useBoundingClientRectListener = function useBoundingClientRectListener(ref)
|
|
5083
5046
|
return dimensions;
|
5084
5047
|
};
|
5085
5048
|
|
5086
|
-
var _excluded$
|
5049
|
+
var _excluded$7 = ["className", "dialog", "style"];
|
5087
5050
|
var Combobox = /*#__PURE__*/React.forwardRef(function Combobox(props, ref) {
|
5088
5051
|
var externalClassName = props.className,
|
5089
5052
|
dialog = props.dialog,
|
5090
5053
|
style = props.style,
|
5091
|
-
otherProps = _objectWithoutPropertiesLoose(props, _excluded$
|
5054
|
+
otherProps = _objectWithoutPropertiesLoose(props, _excluded$7);
|
5092
5055
|
|
5093
5056
|
var _useCombobox = useCombobox(otherProps, ref),
|
5094
5057
|
combobox = _useCombobox.combobox,
|
@@ -5380,19 +5343,18 @@ function mergeRefs(refs) {
|
|
5380
5343
|
};
|
5381
5344
|
}
|
5382
5345
|
|
5383
|
-
|
5384
|
-
var PopoverContext = /*#__PURE__*/React.createContext({
|
5346
|
+
const PopoverContext = /*#__PURE__*/React.createContext({
|
5385
5347
|
props: {},
|
5386
5348
|
ref: null
|
5387
5349
|
});
|
5388
|
-
|
5350
|
+
const Trigger$1 = /*#__PURE__*/React.forwardRef(function PopoverTrigger(props, ref) {
|
5389
5351
|
var _props$children;
|
5390
5352
|
|
5391
|
-
|
5392
|
-
|
5353
|
+
const context = React.useContext(PopoverContext);
|
5354
|
+
let children = props.children;
|
5393
5355
|
|
5394
5356
|
if (React.isValidElement(props.children) && typeof ((_props$children = props.children) === null || _props$children === void 0 ? void 0 : _props$children.type) === 'function') {
|
5395
|
-
console.warn(
|
5357
|
+
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`);
|
5396
5358
|
children = React.createElement("span", null, props.children);
|
5397
5359
|
}
|
5398
5360
|
|
@@ -5402,22 +5364,22 @@ var Trigger$1 = /*#__PURE__*/React.forwardRef(function PopoverTrigger(props, ref
|
|
5402
5364
|
asChild: true
|
5403
5365
|
}));
|
5404
5366
|
});
|
5405
|
-
|
5406
|
-
|
5407
|
-
|
5408
|
-
|
5409
|
-
|
5367
|
+
const RenderPropWrapper = /*#__PURE__*/React.forwardRef(function RenderPropWrapper({
|
5368
|
+
children,
|
5369
|
+
onClick
|
5370
|
+
}, ref) {
|
5371
|
+
const close = () => {
|
5410
5372
|
onClick(new CustomEvent('hide'));
|
5411
5373
|
};
|
5412
5374
|
|
5413
5375
|
return children({
|
5414
|
-
close
|
5415
|
-
ref
|
5376
|
+
close,
|
5377
|
+
ref
|
5416
5378
|
});
|
5417
5379
|
});
|
5418
|
-
|
5419
|
-
|
5420
|
-
|
5380
|
+
const Content$1 = /*#__PURE__*/React.forwardRef(function PopoverContent(props, ref) {
|
5381
|
+
const className = cn('bg-white focus:border-blue-light', props.className);
|
5382
|
+
let output;
|
5421
5383
|
|
5422
5384
|
if (typeof props.children === 'function') {
|
5423
5385
|
output = React.createElement(PopoverPrimitive.Close, {
|
@@ -5435,23 +5397,20 @@ var Content$1 = /*#__PURE__*/React.forwardRef(function PopoverContent(props, ref
|
|
5435
5397
|
className: "text-white"
|
5436
5398
|
}));
|
5437
5399
|
});
|
5438
|
-
|
5439
|
-
|
5440
|
-
|
5441
|
-
|
5442
|
-
|
5443
|
-
|
5444
|
-
|
5445
|
-
|
5446
|
-
|
5447
|
-
|
5448
|
-
|
5449
|
-
|
5450
|
-
|
5451
|
-
|
5452
|
-
ref: ref
|
5453
|
-
};
|
5454
|
-
}, [otherProps]);
|
5400
|
+
const Close$1 = /*#__PURE__*/React.forwardRef((props, ref) => React.createElement(PopoverPrimitive.Close, Object.assign({}, props, {
|
5401
|
+
ref: ref,
|
5402
|
+
asChild: true
|
5403
|
+
})));
|
5404
|
+
const Popover = /*#__PURE__*/React.forwardRef(function Popover(props, ref) {
|
5405
|
+
const {
|
5406
|
+
children,
|
5407
|
+
trigger,
|
5408
|
+
...otherProps
|
5409
|
+
} = props;
|
5410
|
+
const context = React.useMemo(() => ({
|
5411
|
+
props: otherProps,
|
5412
|
+
ref
|
5413
|
+
}), [otherProps]);
|
5455
5414
|
return React.createElement(PopoverContext.Provider, {
|
5456
5415
|
value: context
|
5457
5416
|
}, React.createElement(PopoverPrimitive.Root, null, trigger && React.createElement(Trigger$1, null, trigger), children));
|
@@ -5460,7 +5419,7 @@ Popover.Trigger = Trigger$1;
|
|
5460
5419
|
Popover.Content = Content$1;
|
5461
5420
|
Popover.Close = Close$1;
|
5462
5421
|
|
5463
|
-
var _excluded$
|
5422
|
+
var _excluded$8 = ["className", "onReset", "style", "shortcuts", "shortcutsText"];
|
5464
5423
|
var Datepicker = /*#__PURE__*/React.forwardRef(function Datepicker(props, ref) {
|
5465
5424
|
var _input$disabled;
|
5466
5425
|
|
@@ -5469,7 +5428,7 @@ var Datepicker = /*#__PURE__*/React.forwardRef(function Datepicker(props, ref) {
|
|
5469
5428
|
style = props.style,
|
5470
5429
|
shortcuts = props.shortcuts,
|
5471
5430
|
shortcutsText = props.shortcutsText,
|
5472
|
-
otherProps = _objectWithoutPropertiesLoose(props, _excluded$
|
5431
|
+
otherProps = _objectWithoutPropertiesLoose(props, _excluded$8);
|
5473
5432
|
|
5474
5433
|
var _useDatepicker = useDatepicker(otherProps, ref),
|
5475
5434
|
calendar = _useDatepicker.calendar,
|
@@ -5764,7 +5723,7 @@ const Extra = /*#__PURE__*/React.forwardRef(function DialogExtra(props, ref) {
|
|
5764
5723
|
});
|
5765
5724
|
Extra.displayName = 'DialogExtra';
|
5766
5725
|
|
5767
|
-
var _excluded$
|
5726
|
+
var _excluded$9 = ["children", "closeOnEscape", "defaultOpen", "draggable", "onChange", "onClose", "open", "showCloseButton", "size", "trigger"];
|
5768
5727
|
|
5769
5728
|
var useSeparatedChildren = function useSeparatedChildren(initialChildren) {
|
5770
5729
|
return React.useMemo(function () {
|
@@ -5801,7 +5760,7 @@ var Dialog = /*#__PURE__*/React.forwardRef(function Dialog(props, ref) {
|
|
5801
5760
|
_props$size = props.size,
|
5802
5761
|
size = _props$size === void 0 ? 'sm' : _props$size,
|
5803
5762
|
trigger = props.trigger,
|
5804
|
-
otherProps = _objectWithoutPropertiesLoose(props, _excluded$
|
5763
|
+
otherProps = _objectWithoutPropertiesLoose(props, _excluded$9);
|
5805
5764
|
|
5806
5765
|
var _useSeparatedChildren = useSeparatedChildren(initialChildren),
|
5807
5766
|
children = _useSeparatedChildren[0],
|
@@ -5851,14 +5810,14 @@ Dialog.Extra = Extra;
|
|
5851
5810
|
Dialog.Drawer = Drawer;
|
5852
5811
|
Dialog.Close = Close$2;
|
5853
5812
|
|
5854
|
-
var _excluded$
|
5813
|
+
var _excluded$a = ["disabled", "children", "invalid", "message"];
|
5855
5814
|
var Field = /*#__PURE__*/React.forwardRef(function Field(props, ref) {
|
5856
5815
|
var disabled = props.disabled,
|
5857
5816
|
children = props.children,
|
5858
5817
|
_props$invalid = props.invalid,
|
5859
5818
|
invalid = _props$invalid === void 0 ? false : _props$invalid,
|
5860
5819
|
message = props.message,
|
5861
|
-
otherProps = _objectWithoutPropertiesLoose(props, _excluded$
|
5820
|
+
otherProps = _objectWithoutPropertiesLoose(props, _excluded$a);
|
5862
5821
|
|
5863
5822
|
var className = cn('flex flex-col font-bold text-xs leading-loose pb-4 min-h-[theme(spacing.18)]', {
|
5864
5823
|
'text-grey-dark': disabled
|
@@ -5878,11 +5837,11 @@ var Field = /*#__PURE__*/React.forwardRef(function Field(props, ref) {
|
|
5878
5837
|
}, message));
|
5879
5838
|
});
|
5880
5839
|
|
5881
|
-
var _excluded$
|
5840
|
+
var _excluded$b = ["horizontal"];
|
5882
5841
|
var Form = /*#__PURE__*/React.forwardRef(function Form(props, ref) {
|
5883
5842
|
var _props$horizontal = props.horizontal,
|
5884
5843
|
horizontal = _props$horizontal === void 0 ? false : _props$horizontal,
|
5885
|
-
otherProps = _objectWithoutPropertiesLoose(props, _excluded$
|
5844
|
+
otherProps = _objectWithoutPropertiesLoose(props, _excluded$b);
|
5886
5845
|
|
5887
5846
|
var className = cn('yt-form', {
|
5888
5847
|
'yt-form--horizontal flex flex-wrap': horizontal
|
@@ -5894,11 +5853,11 @@ var Form = /*#__PURE__*/React.forwardRef(function Form(props, ref) {
|
|
5894
5853
|
}));
|
5895
5854
|
});
|
5896
5855
|
|
5897
|
-
var _excluded$
|
5856
|
+
var _excluded$c = ["as"];
|
5898
5857
|
var Group = /*#__PURE__*/React.forwardRef(function Group(props, ref) {
|
5899
5858
|
var _props$as = props.as,
|
5900
5859
|
Tag = _props$as === void 0 ? 'span' : _props$as,
|
5901
|
-
otherProps = _objectWithoutPropertiesLoose(props, _excluded$
|
5860
|
+
otherProps = _objectWithoutPropertiesLoose(props, _excluded$c);
|
5902
5861
|
|
5903
5862
|
var className = cn('flex ', props.className);
|
5904
5863
|
return React.createElement(Tag, Object.assign({}, otherProps, {
|
@@ -5908,7 +5867,7 @@ var Group = /*#__PURE__*/React.forwardRef(function Group(props, ref) {
|
|
5908
5867
|
}));
|
5909
5868
|
});
|
5910
5869
|
|
5911
|
-
var _excluded$
|
5870
|
+
var _excluded$d = ["anchor", "children", "defaultOpen"];
|
5912
5871
|
var HangerContext = /*#__PURE__*/React.createContext({
|
5913
5872
|
props: {},
|
5914
5873
|
ref: null
|
@@ -5965,7 +5924,7 @@ var Hanger = /*#__PURE__*/React.forwardRef(function Hanger(props, ref) {
|
|
5965
5924
|
children = props.children,
|
5966
5925
|
_props$defaultOpen = props.defaultOpen,
|
5967
5926
|
defaultOpen = _props$defaultOpen === void 0 ? true : _props$defaultOpen,
|
5968
|
-
otherProps = _objectWithoutPropertiesLoose(props, _excluded$
|
5927
|
+
otherProps = _objectWithoutPropertiesLoose(props, _excluded$d);
|
5969
5928
|
|
5970
5929
|
var context = React.useMemo(function () {
|
5971
5930
|
return {
|
@@ -6337,49 +6296,49 @@ const useMultiListbox = ({
|
|
6337
6296
|
};
|
6338
6297
|
};
|
6339
6298
|
|
6340
|
-
|
6341
|
-
|
6342
|
-
|
6343
|
-
|
6344
|
-
|
6345
|
-
|
6346
|
-
|
6347
|
-
|
6348
|
-
|
6349
|
-
|
6350
|
-
var className = cn('bg-white inline-flex relative w-full', externalClassName);
|
6299
|
+
const Listbox = /*#__PURE__*/React.forwardRef(function Listbox(props, ref) {
|
6300
|
+
const {
|
6301
|
+
className: externalClassName,
|
6302
|
+
...otherProps
|
6303
|
+
} = props;
|
6304
|
+
const {
|
6305
|
+
list,
|
6306
|
+
input
|
6307
|
+
} = useListbox(otherProps, ref);
|
6308
|
+
const className = cn('bg-white inline-flex relative w-full', externalClassName);
|
6351
6309
|
return React.createElement("span", {
|
6352
6310
|
"data-taco": "listbox",
|
6353
6311
|
className: className
|
6354
6312
|
}, React.createElement(ScrollableList, Object.assign({}, list, {
|
6355
|
-
style:
|
6313
|
+
style: { ...list.style,
|
6356
6314
|
maxHeight: 'calc(12rem + 2px)'
|
6357
6315
|
/* (6 * option height) + listbox border */
|
6358
6316
|
|
6359
|
-
}
|
6317
|
+
}
|
6360
6318
|
})), React.createElement("input", Object.assign({}, input, {
|
6361
6319
|
className: "hidden",
|
6362
6320
|
type: "text"
|
6363
6321
|
})));
|
6364
6322
|
});
|
6365
|
-
|
6366
|
-
|
6367
|
-
|
6368
|
-
|
6369
|
-
|
6370
|
-
|
6371
|
-
|
6372
|
-
|
6373
|
-
|
6323
|
+
const MultiListbox = /*#__PURE__*/React.forwardRef(function Listbox(props, ref) {
|
6324
|
+
const {
|
6325
|
+
className: externalClassName,
|
6326
|
+
...otherProps
|
6327
|
+
} = props;
|
6328
|
+
const {
|
6329
|
+
list,
|
6330
|
+
input
|
6331
|
+
} = useMultiListbox(otherProps, ref);
|
6332
|
+
const className = cn('bg-white inline-flex relative w-full', externalClassName);
|
6374
6333
|
return React.createElement("span", {
|
6375
6334
|
"data-taco": "listbox",
|
6376
6335
|
className: className
|
6377
6336
|
}, React.createElement(ScrollableList, Object.assign({}, list, {
|
6378
|
-
style:
|
6337
|
+
style: { ...list.style,
|
6379
6338
|
maxHeight: 'calc(12rem + 2px + 2px)'
|
6380
6339
|
/* (6 * option height) + listbox border + ALL_OPTIONS bottom border */
|
6381
6340
|
|
6382
|
-
}
|
6341
|
+
}
|
6383
6342
|
})), React.createElement("input", Object.assign({}, input, {
|
6384
6343
|
className: "hidden",
|
6385
6344
|
type: "text"
|
@@ -6642,34 +6601,26 @@ const Checkbox$1 = props => {
|
|
6642
6601
|
})), children);
|
6643
6602
|
};
|
6644
6603
|
|
6645
|
-
|
6646
|
-
|
6647
|
-
|
6648
|
-
return value === null ? '' : String(value);
|
6649
|
-
};
|
6650
|
-
var findByValue$1 = function findByValue(values, valueAsString) {
|
6651
|
-
return values.find(function (value) {
|
6652
|
-
return getRadioGroupItemValueAsString(value) === valueAsString;
|
6653
|
-
});
|
6654
|
-
};
|
6655
|
-
var RadioGroupContext = /*#__PURE__*/React.createContext({
|
6604
|
+
const getRadioGroupItemValueAsString = value => value === null ? '' : String(value);
|
6605
|
+
const findByValue$1 = (values, valueAsString) => values.find(value => getRadioGroupItemValueAsString(value) === valueAsString);
|
6606
|
+
const RadioGroupContext = /*#__PURE__*/React.createContext({
|
6656
6607
|
disabled: false,
|
6657
6608
|
invalid: false
|
6658
6609
|
});
|
6659
|
-
|
6660
|
-
|
6661
|
-
|
6662
|
-
|
6663
|
-
|
6664
|
-
|
6665
|
-
|
6666
|
-
|
6667
|
-
|
6610
|
+
const RadioGroupItem = /*#__PURE__*/React.forwardRef(function RadioGroupItem(props, ref) {
|
6611
|
+
const context = React.useContext(RadioGroupContext);
|
6612
|
+
const {
|
6613
|
+
children,
|
6614
|
+
value,
|
6615
|
+
...otherProps
|
6616
|
+
} = props;
|
6617
|
+
const disabled = context.disabled || props.disabled;
|
6618
|
+
const className = cn('flex flex-shrink-0 self-start items-center justify-center h-4 w-4 mr-2 mt-[0.2rem] rounded-full bg-white border-2 ', {
|
6668
6619
|
'border-grey-dark focus:border-blue focus:yt-focus aria-checked:bg-blue aria-checked:border-blue': !disabled && !context.invalid,
|
6669
6620
|
'border-grey cursor-not-allowed aria-checked:bg-grey-dark aria-checked:border-grey-dark': disabled,
|
6670
6621
|
'border-red text-red focus:border-red focus:yt-focus-red aria-checked:bg-red aria-checked:border-red': context.invalid && !disabled
|
6671
6622
|
});
|
6672
|
-
|
6623
|
+
const labelClassName = cn('flex items-center cursor-pointer', {
|
6673
6624
|
'cursor-not-allowed text-grey-dark': disabled
|
6674
6625
|
}, props.className);
|
6675
6626
|
return React.createElement("label", {
|
@@ -6683,38 +6634,34 @@ var RadioGroupItem = /*#__PURE__*/React.forwardRef(function RadioGroupItem(props
|
|
6683
6634
|
className: "h-2 w-2 rounded-full bg-white"
|
6684
6635
|
})), children);
|
6685
6636
|
});
|
6686
|
-
|
6687
|
-
|
6688
|
-
|
6689
|
-
|
6690
|
-
|
6691
|
-
|
6692
|
-
|
6693
|
-
|
6694
|
-
|
6695
|
-
|
6696
|
-
|
6697
|
-
|
6698
|
-
|
6699
|
-
React.Children.forEach(children,
|
6637
|
+
const useRadioGroup = props => {
|
6638
|
+
const {
|
6639
|
+
children,
|
6640
|
+
defaultValue,
|
6641
|
+
disabled,
|
6642
|
+
invalid,
|
6643
|
+
onChange,
|
6644
|
+
orientation = 'vertical',
|
6645
|
+
value,
|
6646
|
+
...otherProps
|
6647
|
+
} = props;
|
6648
|
+
const values = React.useMemo(() => {
|
6649
|
+
const radioGroupItemValues = [];
|
6650
|
+
React.Children.forEach(children, child => {
|
6700
6651
|
if (React.isValidElement(child)) {
|
6701
6652
|
radioGroupItemValues.push(child.props.value);
|
6702
6653
|
}
|
6703
6654
|
});
|
6704
6655
|
return radioGroupItemValues;
|
6705
6656
|
}, [children]);
|
6706
|
-
|
6707
|
-
|
6708
|
-
|
6709
|
-
|
6710
|
-
|
6711
|
-
}, [disabled, invalid]);
|
6712
|
-
var valueProps;
|
6657
|
+
const context = React.useMemo(() => ({
|
6658
|
+
disabled: disabled !== null && disabled !== void 0 ? disabled : false,
|
6659
|
+
invalid: invalid !== null && invalid !== void 0 ? invalid : false
|
6660
|
+
}), [disabled, invalid]);
|
6661
|
+
let valueProps;
|
6713
6662
|
|
6714
6663
|
if (onChange !== undefined) {
|
6715
|
-
|
6716
|
-
return onChange(findByValue$1(values, value));
|
6717
|
-
};
|
6664
|
+
const handleChange = value => onChange(findByValue$1(values, value));
|
6718
6665
|
|
6719
6666
|
valueProps = {
|
6720
6667
|
onValueChange: handleChange,
|
@@ -6727,19 +6674,20 @@ var useRadioGroup = function useRadioGroup(props) {
|
|
6727
6674
|
}
|
6728
6675
|
|
6729
6676
|
return {
|
6730
|
-
context
|
6731
|
-
props:
|
6732
|
-
|
6733
|
-
|
6734
|
-
|
6677
|
+
context,
|
6678
|
+
props: { ...otherProps,
|
6679
|
+
...valueProps,
|
6680
|
+
children,
|
6681
|
+
orientation
|
6682
|
+
}
|
6735
6683
|
};
|
6736
6684
|
};
|
6737
|
-
|
6738
|
-
|
6739
|
-
|
6740
|
-
|
6741
|
-
|
6742
|
-
|
6685
|
+
const RadioGroup = /*#__PURE__*/React.forwardRef(function RadioGroup(props, ref) {
|
6686
|
+
const {
|
6687
|
+
context,
|
6688
|
+
props: otherProps
|
6689
|
+
} = useRadioGroup(props);
|
6690
|
+
const className = cn('flex items-start', {
|
6743
6691
|
'flex-wrap space-x-4': otherProps.orientation === 'horizontal',
|
6744
6692
|
'flex-col space-y-2': otherProps.orientation === 'vertical'
|
6745
6693
|
}, otherProps.className);
|
@@ -6852,48 +6800,26 @@ const Header = props => {
|
|
6852
6800
|
}));
|
6853
6801
|
};
|
6854
6802
|
|
6855
|
-
|
6856
|
-
|
6857
|
-
|
6858
|
-
|
6859
|
-
|
6860
|
-
|
6861
|
-
|
6862
|
-
|
6863
|
-
|
6864
|
-
|
6865
|
-
|
6866
|
-
|
6867
|
-
|
6868
|
-
|
6869
|
-
|
6870
|
-
|
6871
|
-
|
6872
|
-
|
6873
|
-
|
6874
|
-
|
6875
|
-
minWidth = _React$useState4[0],
|
6876
|
-
_setMinWidth = _React$useState4[1];
|
6877
|
-
|
6878
|
-
var context = React.useMemo(function () {
|
6879
|
-
return {
|
6880
|
-
appearance: appearance,
|
6881
|
-
setAppearance: function setAppearance(appearance) {
|
6882
|
-
return _setAppearance(appearance);
|
6883
|
-
},
|
6884
|
-
indented: indented,
|
6885
|
-
registerIndentation: function registerIndentation() {
|
6886
|
-
return setIndented(true);
|
6887
|
-
},
|
6888
|
-
minWidth: minWidth,
|
6889
|
-
setMinWidth: function setMinWidth(width) {
|
6890
|
-
return _setMinWidth(width);
|
6891
|
-
},
|
6892
|
-
close: function close() {
|
6893
|
-
return setOpen(false);
|
6894
|
-
}
|
6895
|
-
};
|
6896
|
-
}, [indented, minWidth, appearance]);
|
6803
|
+
const Menu = externalProps => {
|
6804
|
+
const {
|
6805
|
+
appearance: externalAppearance,
|
6806
|
+
children,
|
6807
|
+
trigger,
|
6808
|
+
...props
|
6809
|
+
} = externalProps;
|
6810
|
+
const [open, setOpen] = React.useState(false);
|
6811
|
+
const [appearance, setAppearance] = React.useState(externalAppearance !== null && externalAppearance !== void 0 ? externalAppearance : 'default');
|
6812
|
+
const [indented, setIndented] = React.useState(false);
|
6813
|
+
const [minWidth, setMinWidth] = React.useState(undefined);
|
6814
|
+
const context = React.useMemo(() => ({
|
6815
|
+
appearance,
|
6816
|
+
setAppearance: appearance => setAppearance(appearance),
|
6817
|
+
indented,
|
6818
|
+
registerIndentation: () => setIndented(true),
|
6819
|
+
minWidth,
|
6820
|
+
setMinWidth: width => setMinWidth(width),
|
6821
|
+
close: () => setOpen(false)
|
6822
|
+
}), [indented, minWidth, appearance]);
|
6897
6823
|
return React.createElement(MenuContext.Provider, {
|
6898
6824
|
value: context
|
6899
6825
|
}, React.createElement(DropdownMenuPrimitive.Root, Object.assign({}, props, {
|
@@ -6911,44 +6837,39 @@ Menu.Separator = Separator;
|
|
6911
6837
|
Menu.Header = Header;
|
6912
6838
|
Menu.RadioGroup = RadioGroup$1;
|
6913
6839
|
|
6914
|
-
|
6915
|
-
var TreeviewItem = /*#__PURE__*/React__default.forwardRef(function TreeviewItem(props, ref) {
|
6840
|
+
const TreeviewItem = /*#__PURE__*/React__default.forwardRef(function TreeviewItem(props, ref) {
|
6916
6841
|
return React__default.createElement("a", Object.assign({}, props, {
|
6917
6842
|
ref: ref
|
6918
6843
|
}));
|
6919
6844
|
});
|
6920
|
-
|
6921
|
-
|
6922
|
-
|
6923
|
-
|
6924
|
-
|
6925
|
-
|
6926
|
-
|
6927
|
-
|
6928
|
-
|
6929
|
-
|
6930
|
-
|
6931
|
-
|
6932
|
-
setExpanded = _React$useState[1];
|
6933
|
-
|
6934
|
-
React__default.useEffect(function () {
|
6845
|
+
const TreeviewGroup = /*#__PURE__*/React__default.forwardRef(function TreeviewGroup(props, ref) {
|
6846
|
+
const {
|
6847
|
+
children,
|
6848
|
+
className: externalClassName,
|
6849
|
+
expanded: initialExpanded = false,
|
6850
|
+
title,
|
6851
|
+
fixed,
|
6852
|
+
onClick,
|
6853
|
+
...otherProps
|
6854
|
+
} = props;
|
6855
|
+
const [expanded, setExpanded] = React__default.useState(fixed || initialExpanded);
|
6856
|
+
React__default.useEffect(() => {
|
6935
6857
|
if (!fixed) {
|
6936
6858
|
setExpanded(fixed || initialExpanded);
|
6937
6859
|
}
|
6938
6860
|
}, [fixed, initialExpanded]);
|
6939
|
-
|
6861
|
+
const listClassName = cn('flex-col mb-0', {
|
6940
6862
|
flex: expanded,
|
6941
6863
|
hidden: !expanded
|
6942
6864
|
});
|
6943
|
-
|
6944
|
-
var itemProps = _extends({}, otherProps, {
|
6865
|
+
const itemProps = { ...otherProps,
|
6945
6866
|
'aria-expanded': expanded,
|
6946
6867
|
role: 'treeitem',
|
6947
6868
|
tabIndex: -1
|
6948
|
-
}
|
6869
|
+
};
|
6949
6870
|
|
6950
|
-
|
6951
|
-
|
6871
|
+
const handleClick = event => {
|
6872
|
+
const nextState = !expanded;
|
6952
6873
|
|
6953
6874
|
if (!fixed) {
|
6954
6875
|
setExpanded(nextState);
|
@@ -6959,7 +6880,7 @@ var TreeviewGroup = /*#__PURE__*/React__default.forwardRef(function TreeviewGrou
|
|
6959
6880
|
}
|
6960
6881
|
};
|
6961
6882
|
|
6962
|
-
|
6883
|
+
const className = typeof externalClassName === 'function' ? externalClassName(expanded) : externalClassName;
|
6963
6884
|
return React__default.createElement("div", Object.assign({}, itemProps, {
|
6964
6885
|
className: className,
|
6965
6886
|
ref: ref
|
@@ -6968,18 +6889,14 @@ var TreeviewGroup = /*#__PURE__*/React__default.forwardRef(function TreeviewGrou
|
|
6968
6889
|
}, typeof title === 'function' ? title(expanded) : title), React__default.createElement("ul", {
|
6969
6890
|
role: "group",
|
6970
6891
|
className: listClassName
|
6971
|
-
}, React__default.Children.toArray(children).filter(
|
6972
|
-
|
6973
|
-
|
6974
|
-
|
6975
|
-
|
6976
|
-
|
6977
|
-
}, React__default.cloneElement(item, {
|
6978
|
-
role: 'treeitem'
|
6979
|
-
}));
|
6980
|
-
})));
|
6892
|
+
}, React__default.Children.toArray(children).filter(item => !!item).map((item, i) => React__default.createElement("li", {
|
6893
|
+
key: i,
|
6894
|
+
role: "none"
|
6895
|
+
}, React__default.cloneElement(item, {
|
6896
|
+
role: 'treeitem'
|
6897
|
+
})))));
|
6981
6898
|
});
|
6982
|
-
|
6899
|
+
const Treeview = /*#__PURE__*/React__default.forwardRef(function Treeview(props, ref) {
|
6983
6900
|
return React__default.createElement("div", Object.assign({}, props, {
|
6984
6901
|
ref: ref,
|
6985
6902
|
role: "tree"
|
@@ -7022,25 +6939,20 @@ const useDropTarget = onDrop => {
|
|
7022
6939
|
return [isDraggedOver, props];
|
7023
6940
|
};
|
7024
6941
|
|
7025
|
-
|
7026
|
-
|
7027
|
-
|
7028
|
-
|
7029
|
-
|
7030
|
-
|
7031
|
-
|
7032
|
-
|
7033
|
-
|
7034
|
-
|
7035
|
-
|
7036
|
-
|
7037
|
-
|
7038
|
-
|
7039
|
-
isDraggedOver = _useDropTarget[0],
|
7040
|
-
dropTargetProps = _useDropTarget[1];
|
7041
|
-
|
7042
|
-
var isTreeitem = role === 'treeitem';
|
7043
|
-
var className = cn('yt-navigation__item cursor-pointer', {
|
6942
|
+
const Item$2 = /*#__PURE__*/React__default.forwardRef(function Item(props, ref) {
|
6943
|
+
const {
|
6944
|
+
active,
|
6945
|
+
children,
|
6946
|
+
onDrop,
|
6947
|
+
postfix,
|
6948
|
+
prefix,
|
6949
|
+
role,
|
6950
|
+
...otherProps
|
6951
|
+
} = props;
|
6952
|
+
const proxyRef = useProxiedRef(ref);
|
6953
|
+
const [isDraggedOver, dropTargetProps] = useDropTarget(onDrop);
|
6954
|
+
const isTreeitem = role === 'treeitem';
|
6955
|
+
const className = cn('yt-navigation__item cursor-pointer', {
|
7044
6956
|
'w-full mb-px py-1 px-3 flex items-center hover:bg-grey-dark': isTreeitem,
|
7045
6957
|
'bg-white w-full h-10 px-3 flex-shrink-0 flex items-center justify-between cursor-pointer': !isTreeitem,
|
7046
6958
|
'yt-navigation__item--active': active && !isDraggedOver,
|
@@ -7048,7 +6960,7 @@ var Item$2 = /*#__PURE__*/React__default.forwardRef(function Item(props, ref) {
|
|
7048
6960
|
'yt-navigation__item--dropping bg-blue': isDraggedOver
|
7049
6961
|
}, props.className);
|
7050
6962
|
|
7051
|
-
|
6963
|
+
const handleClick = event => {
|
7052
6964
|
if (event.target instanceof HTMLAnchorElement || event.target instanceof HTMLButtonElement) {
|
7053
6965
|
return;
|
7054
6966
|
}
|
@@ -7071,19 +6983,19 @@ var Item$2 = /*#__PURE__*/React__default.forwardRef(function Item(props, ref) {
|
|
7071
6983
|
className: "yt-navigation__item__postfix ml-1"
|
7072
6984
|
}, postfix));
|
7073
6985
|
});
|
7074
|
-
|
6986
|
+
const Panel = /*#__PURE__*/React__default.forwardRef(function Panel(props, ref) {
|
7075
6987
|
return React__default.createElement("div", Object.assign({}, props, {
|
7076
6988
|
className: cn('w-full bg-white p-3', props.className),
|
7077
6989
|
ref: ref
|
7078
6990
|
}));
|
7079
6991
|
});
|
7080
|
-
|
7081
|
-
|
6992
|
+
const MenuGroup = /*#__PURE__*/React__default.forwardRef(function MenuGroup(props, ref) {
|
6993
|
+
const className = cn('flex-shrink-0 space-y-1 outline-none', {
|
7082
6994
|
'bg-white pb-2': props.fixed
|
7083
6995
|
}, props.className);
|
7084
6996
|
|
7085
|
-
|
7086
|
-
|
6997
|
+
const title = expanded => {
|
6998
|
+
const className = cn('bg-white h-10 pl-3 pr-1 flex items-center justify-between w-full', {
|
7087
6999
|
'mb-1': expanded,
|
7088
7000
|
'cursor-pointer hover:text-blue': !props.fixed
|
7089
7001
|
});
|
@@ -7100,16 +7012,14 @@ var MenuGroup = /*#__PURE__*/React__default.forwardRef(function MenuGroup(props,
|
|
7100
7012
|
ref: ref
|
7101
7013
|
}));
|
7102
7014
|
});
|
7103
|
-
|
7104
|
-
|
7105
|
-
|
7106
|
-
React__default.Children.toArray(props.children).filter(
|
7107
|
-
return !!child;
|
7108
|
-
}).map(function (child) {
|
7015
|
+
const Menu$1 = /*#__PURE__*/React__default.forwardRef(function Menu(props, ref) {
|
7016
|
+
const scrollableAreas = React__default.useMemo(() => {
|
7017
|
+
const scrollableAreas = [];
|
7018
|
+
React__default.Children.toArray(props.children).filter(child => !!child).map(child => {
|
7109
7019
|
if (child.props.fixed) {
|
7110
7020
|
scrollableAreas.push(child);
|
7111
7021
|
} else {
|
7112
|
-
|
7022
|
+
const x = scrollableAreas[scrollableAreas.length - 1];
|
7113
7023
|
|
7114
7024
|
if (Array.isArray(x)) {
|
7115
7025
|
x.push(child);
|
@@ -7123,19 +7033,18 @@ var Menu$1 = /*#__PURE__*/React__default.forwardRef(function Menu(props, ref) {
|
|
7123
7033
|
return React__default.createElement(Treeview, Object.assign({}, props, {
|
7124
7034
|
className: cn('divide-grey-light flex flex-grow flex-col divide-y-2 overflow-y-auto', props.className),
|
7125
7035
|
ref: ref
|
7126
|
-
}), scrollableAreas.map(
|
7127
|
-
|
7128
|
-
|
7129
|
-
|
7130
|
-
}, area) : area;
|
7131
|
-
}));
|
7036
|
+
}), scrollableAreas.map((area, i) => Array.isArray(area) ? React__default.createElement("div", {
|
7037
|
+
className: "divide-grey-light flex h-0 flex-auto flex-shrink-0 flex-grow flex-col divide-y-2 overflow-y-auto",
|
7038
|
+
key: i
|
7039
|
+
}, area) : area));
|
7132
7040
|
});
|
7133
7041
|
Menu$1.Group = MenuGroup;
|
7134
|
-
|
7135
|
-
|
7136
|
-
|
7137
|
-
|
7138
|
-
|
7042
|
+
const Navigation = /*#__PURE__*/React__default.forwardRef(function Navigation(props, ref) {
|
7043
|
+
const {
|
7044
|
+
children,
|
7045
|
+
...otherProps
|
7046
|
+
} = props;
|
7047
|
+
const className = cn('h-full flex flex-col bg-grey-light divide-y-2 divide-grey-light', props.className);
|
7139
7048
|
return React__default.createElement("div", Object.assign({}, otherProps, {
|
7140
7049
|
className: className,
|
7141
7050
|
"data-taco": "navigation",
|
@@ -7219,18 +7128,15 @@ const useSelect = ({
|
|
7219
7128
|
React.useEffect(() => {
|
7220
7129
|
setLastValue(value);
|
7221
7130
|
}, [open]);
|
7222
|
-
React.useEffect(() => {
|
7223
|
-
if (defaultValue !== undefined && value === undefined) {
|
7224
|
-
setInputValueByRef$1(internalInputRef.current, defaultValue);
|
7225
|
-
}
|
7226
|
-
}, [defaultValue]);
|
7227
7131
|
React.useEffect(() => {
|
7228
7132
|
// If emptyValue is defined, then set emptyValue
|
7229
7133
|
if (emptyValue !== undefined && value === emptyValue) {
|
7230
7134
|
setInputValueByRef$1(internalInputRef.current, value);
|
7231
7135
|
} else if (value !== undefined && data.some(option => option.value === value)) {
|
7232
7136
|
setInputValueByRef$1(internalInputRef.current, value);
|
7233
|
-
} else if (
|
7137
|
+
} else if (value === undefined && defaultValue !== undefined && data.some(option => option.value === defaultValue)) {
|
7138
|
+
setInputValueByRef$1(internalInputRef.current, defaultValue);
|
7139
|
+
} else if (value === undefined && data.length && defaultValue === undefined) {
|
7234
7140
|
setInputValueByRef$1(internalInputRef.current, data[0].value);
|
7235
7141
|
}
|
7236
7142
|
}, []); // event handlers
|
@@ -7376,54 +7282,52 @@ const useSelect = ({
|
|
7376
7282
|
};
|
7377
7283
|
};
|
7378
7284
|
|
7379
|
-
|
7380
|
-
|
7381
|
-
|
7382
|
-
|
7383
|
-
|
7384
|
-
|
7385
|
-
|
7386
|
-
|
7387
|
-
|
7388
|
-
|
7389
|
-
|
7390
|
-
|
7391
|
-
|
7392
|
-
|
7393
|
-
|
7394
|
-
|
7395
|
-
|
7396
|
-
|
7397
|
-
|
7398
|
-
var className = cn('inline-flex relative w-full', {
|
7285
|
+
const BaseSelect = /*#__PURE__*/React.forwardRef(function BaseSelect(props, ref) {
|
7286
|
+
const {
|
7287
|
+
autoFocus,
|
7288
|
+
className: externalClassName,
|
7289
|
+
highlighted,
|
7290
|
+
style,
|
7291
|
+
...otherProps
|
7292
|
+
} = props;
|
7293
|
+
const {
|
7294
|
+
button,
|
7295
|
+
listbox,
|
7296
|
+
popover,
|
7297
|
+
input,
|
7298
|
+
text,
|
7299
|
+
more = 0
|
7300
|
+
} = useSelect(otherProps, ref);
|
7301
|
+
const internalRef = React.useRef(null);
|
7302
|
+
const selectDimensions = useBoundingClientRectListener(internalRef);
|
7303
|
+
const className = cn('inline-flex relative w-full', {
|
7399
7304
|
'yt-select--readonly': props.readOnly
|
7400
7305
|
}, externalClassName);
|
7401
|
-
|
7306
|
+
const inputClassname = cn(getInputClasses(props), 'h-8 text-left pr-0', {
|
7402
7307
|
'border-blue': popover.open
|
7403
7308
|
});
|
7404
|
-
React.useEffect(
|
7309
|
+
React.useEffect(() => {
|
7405
7310
|
if (autoFocus && internalRef.current) {
|
7406
7311
|
internalRef.current.focus();
|
7407
7312
|
}
|
7408
7313
|
}, []);
|
7409
7314
|
|
7410
|
-
|
7315
|
+
const renderMultiSelection = () => {
|
7411
7316
|
return React.createElement(React.Fragment, null, React.createElement("span", {
|
7412
7317
|
className: "flex-grow truncate text-left"
|
7413
7318
|
}, text), more > 0 && React.createElement(Badge, {
|
7414
7319
|
className: "ml-2"
|
7415
|
-
},
|
7320
|
+
}, `+${more}`));
|
7416
7321
|
};
|
7417
7322
|
|
7418
|
-
|
7323
|
+
const commonListboxProps = { ...listbox,
|
7419
7324
|
className: 'w-auto',
|
7420
7325
|
invalid: undefined,
|
7421
7326
|
style: {
|
7422
7327
|
minWidth: selectDimensions === null || selectDimensions === void 0 ? void 0 : selectDimensions.width
|
7423
7328
|
},
|
7424
7329
|
tabIndex: popover.open ? 0 : -1
|
7425
|
-
}
|
7426
|
-
|
7330
|
+
};
|
7427
7331
|
return React.createElement("span", {
|
7428
7332
|
className: className,
|
7429
7333
|
"data-taco": "select",
|
@@ -7446,9 +7350,11 @@ var BaseSelect = /*#__PURE__*/React.forwardRef(function BaseSelect(props, ref) {
|
|
7446
7350
|
type: "text"
|
7447
7351
|
}))));
|
7448
7352
|
});
|
7449
|
-
|
7450
|
-
|
7451
|
-
|
7353
|
+
const Select = /*#__PURE__*/React.forwardRef(function Select(props, ref) {
|
7354
|
+
const {
|
7355
|
+
editable,
|
7356
|
+
...otherProps
|
7357
|
+
} = props;
|
7452
7358
|
|
7453
7359
|
if (editable) {
|
7454
7360
|
return React.createElement(Combobox, Object.assign({}, otherProps, {
|
@@ -7519,47 +7425,41 @@ const usePagination = (initialPageIndex = 0, initialPageSize = 10) => {
|
|
7519
7425
|
};
|
7520
7426
|
};
|
7521
7427
|
|
7522
|
-
|
7523
|
-
|
7524
|
-
|
7525
|
-
var minItemIndex = pageIndex * pageSize + 1;
|
7526
|
-
var maxItemIndex = (pageIndex + 1) * pageSize;
|
7428
|
+
const getShowingLabel = (length, pageIndex, pageSize, texts) => {
|
7429
|
+
const minItemIndex = pageIndex * pageSize + 1;
|
7430
|
+
const maxItemIndex = (pageIndex + 1) * pageSize;
|
7527
7431
|
return texts.pagination.showingXofYofTotal.replace('[X]', length === 0 ? '0' : String(minItemIndex)).replace('[Y]', String(maxItemIndex > length ? length : maxItemIndex)).replace('[total]', String(length));
|
7528
7432
|
};
|
7529
7433
|
|
7530
|
-
|
7531
|
-
|
7532
|
-
|
7533
|
-
|
7534
|
-
|
7535
|
-
|
7536
|
-
|
7537
|
-
|
7538
|
-
|
7539
|
-
|
7540
|
-
|
7541
|
-
|
7542
|
-
|
7543
|
-
|
7544
|
-
|
7545
|
-
|
7546
|
-
|
7547
|
-
|
7548
|
-
|
7549
|
-
texts = _useLocalization.texts;
|
7550
|
-
|
7551
|
-
var maxPageIndex = Math.ceil(length / pageSize) - 1;
|
7552
|
-
var showShortcutTexts = dangerouslyHijackGlobalKeyboardNavigation;
|
7434
|
+
const Pagination = /*#__PURE__*/React.forwardRef(function Pagination(props, ref) {
|
7435
|
+
const {
|
7436
|
+
length,
|
7437
|
+
pageIndex,
|
7438
|
+
pageSize,
|
7439
|
+
pageSizes = [10, 25, 50, 100, 500],
|
7440
|
+
setPageIndex,
|
7441
|
+
setPageSize,
|
7442
|
+
showPageControls = true,
|
7443
|
+
showPageNumbers = true,
|
7444
|
+
showPageSize = true,
|
7445
|
+
dangerouslyHijackGlobalKeyboardNavigation = false,
|
7446
|
+
...otherProps
|
7447
|
+
} = props;
|
7448
|
+
const {
|
7449
|
+
texts
|
7450
|
+
} = useLocalization();
|
7451
|
+
const maxPageIndex = Math.ceil(length / pageSize) - 1;
|
7452
|
+
const showShortcutTexts = dangerouslyHijackGlobalKeyboardNavigation;
|
7553
7453
|
usePaginationShortcuts({
|
7554
|
-
setPageIndex
|
7555
|
-
maxPageIndex
|
7556
|
-
pageIndex
|
7557
|
-
dangerouslyHijackGlobalKeyboardNavigation
|
7454
|
+
setPageIndex,
|
7455
|
+
maxPageIndex,
|
7456
|
+
pageIndex,
|
7457
|
+
dangerouslyHijackGlobalKeyboardNavigation
|
7558
7458
|
});
|
7559
|
-
|
7560
|
-
|
7561
|
-
|
7562
|
-
|
7459
|
+
const pageCount = Math.ceil(length / pageSize);
|
7460
|
+
const canPreviousPage = pageIndex > 0;
|
7461
|
+
const canNextPage = pageIndex < pageCount - 1;
|
7462
|
+
const className = cn('inline-flex relative justify-between items-center', props.className);
|
7563
7463
|
return React.createElement("div", Object.assign({}, otherProps, {
|
7564
7464
|
className: className,
|
7565
7465
|
"data-taco": "pagination",
|
@@ -7569,13 +7469,11 @@ var Pagination = /*#__PURE__*/React.forwardRef(function Pagination(props, ref) {
|
|
7569
7469
|
}, getShowingLabel(length, pageIndex, pageSize, texts), React.createElement(Select, {
|
7570
7470
|
"aria-label": texts.pagination.pageSize,
|
7571
7471
|
className: "ml-4 !w-20",
|
7572
|
-
data: pageSizes.map(
|
7573
|
-
|
7574
|
-
|
7575
|
-
|
7576
|
-
|
7577
|
-
}),
|
7578
|
-
onChange: function onChange(event) {
|
7472
|
+
data: pageSizes.map(pageSize => ({
|
7473
|
+
text: String(pageSize),
|
7474
|
+
value: pageSize
|
7475
|
+
})),
|
7476
|
+
onChange: event => {
|
7579
7477
|
setPageIndex(0);
|
7580
7478
|
setPageSize(Number(event.target.value));
|
7581
7479
|
},
|
@@ -7587,18 +7485,14 @@ var Pagination = /*#__PURE__*/React.forwardRef(function Pagination(props, ref) {
|
|
7587
7485
|
appearance: "default",
|
7588
7486
|
disabled: !canPreviousPage,
|
7589
7487
|
icon: "arrow-start",
|
7590
|
-
onClick:
|
7591
|
-
return setPageIndex(0);
|
7592
|
-
},
|
7488
|
+
onClick: () => setPageIndex(0),
|
7593
7489
|
"aria-label": showShortcutTexts ? texts.pagination.actions.firstPageWithShortcut : texts.pagination.actions.firstPage,
|
7594
7490
|
tooltip: showShortcutTexts ? texts.pagination.actions.firstPageWithShortcut : texts.pagination.actions.firstPage
|
7595
7491
|
}), React.createElement(IconButton, {
|
7596
7492
|
appearance: "default",
|
7597
7493
|
disabled: !canPreviousPage,
|
7598
7494
|
icon: "arrow-left",
|
7599
|
-
onClick:
|
7600
|
-
return setPageIndex(pageIndex - 1);
|
7601
|
-
},
|
7495
|
+
onClick: () => setPageIndex(pageIndex - 1),
|
7602
7496
|
"aria-label": showShortcutTexts ? texts.pagination.actions.previousPageWithShortcut : texts.pagination.actions.previousPage,
|
7603
7497
|
tooltip: showShortcutTexts ? texts.pagination.actions.previousPageWithShortcut : texts.pagination.actions.previousPage
|
7604
7498
|
}), showPageNumbers && pageCount > 0 && React.createElement(PageNumbers, {
|
@@ -7609,43 +7503,36 @@ var Pagination = /*#__PURE__*/React.forwardRef(function Pagination(props, ref) {
|
|
7609
7503
|
appearance: "default",
|
7610
7504
|
disabled: !canNextPage,
|
7611
7505
|
icon: "arrow-right",
|
7612
|
-
onClick:
|
7613
|
-
return setPageIndex(pageIndex + 1);
|
7614
|
-
},
|
7506
|
+
onClick: () => setPageIndex(pageIndex + 1),
|
7615
7507
|
"aria-label": showShortcutTexts ? texts.pagination.actions.nextPageWithShortcut : texts.pagination.actions.nextPage,
|
7616
7508
|
tooltip: showShortcutTexts ? texts.pagination.actions.nextPageWithShortcut : texts.pagination.actions.nextPage
|
7617
7509
|
}), React.createElement(IconButton, {
|
7618
7510
|
appearance: "default",
|
7619
7511
|
disabled: !canNextPage,
|
7620
7512
|
icon: "arrow-end",
|
7621
|
-
onClick:
|
7622
|
-
return setPageIndex(pageCount - 1);
|
7623
|
-
},
|
7513
|
+
onClick: () => setPageIndex(pageCount - 1),
|
7624
7514
|
"aria-label": showShortcutTexts ? texts.pagination.actions.lastPageWithShortcut : texts.pagination.actions.lastPage,
|
7625
7515
|
tooltip: showShortcutTexts ? texts.pagination.actions.lastPageWithShortcut : texts.pagination.actions.lastPage
|
7626
7516
|
})));
|
7627
7517
|
});
|
7628
7518
|
|
7629
|
-
|
7630
|
-
|
7631
|
-
|
7632
|
-
|
7633
|
-
|
7634
|
-
duration = _ref$duration === void 0 ? undefined : _ref$duration,
|
7635
|
-
props = _objectWithoutPropertiesLoose(_ref, _excluded$q);
|
7636
|
-
|
7637
|
-
var style;
|
7519
|
+
const Progress = ({
|
7520
|
+
duration = undefined,
|
7521
|
+
...props
|
7522
|
+
}) => {
|
7523
|
+
let style;
|
7638
7524
|
|
7639
7525
|
if (duration) {
|
7640
7526
|
style = {
|
7641
|
-
animationDuration: duration
|
7527
|
+
animationDuration: `${duration}ms`
|
7642
7528
|
};
|
7643
7529
|
}
|
7644
7530
|
|
7645
|
-
|
7646
|
-
|
7647
|
-
"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
|
7648
|
-
|
7531
|
+
const className = cn('bg-grey-light rounded block h-1 overflow-hidden w-full', props.className);
|
7532
|
+
const progressClassName = cn('yt-progress__bar block h-1', {
|
7533
|
+
"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,
|
7534
|
+
[`w-0 bg-grey-dark animate-[progress_linear]`]: duration
|
7535
|
+
});
|
7649
7536
|
return React__default.createElement("span", Object.assign({}, props, {
|
7650
7537
|
"data-taco": "progress",
|
7651
7538
|
className: className
|
@@ -9255,19 +9142,16 @@ const useTableRowCreation = (data, tableRef) => {
|
|
9255
9142
|
};
|
9256
9143
|
};
|
9257
9144
|
|
9258
|
-
|
9259
|
-
|
9260
|
-
|
9261
|
-
|
9262
|
-
|
9263
|
-
|
9264
|
-
|
9265
|
-
|
9266
|
-
|
9267
|
-
|
9268
|
-
otherProps = _objectWithoutPropertiesLoose(props, _excluded$r);
|
9269
|
-
|
9270
|
-
var className = cn('yt-tabs', "yt-tabs--" + orientation, {
|
9145
|
+
const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(props, ref) {
|
9146
|
+
const {
|
9147
|
+
id,
|
9148
|
+
defaultId,
|
9149
|
+
children,
|
9150
|
+
onChange,
|
9151
|
+
orientation = 'horizontal',
|
9152
|
+
...otherProps
|
9153
|
+
} = props;
|
9154
|
+
const className = cn('yt-tabs', `yt-tabs--${orientation}`, {
|
9271
9155
|
'flex w-full': orientation === 'vertical'
|
9272
9156
|
}, props.className);
|
9273
9157
|
return React.createElement(TabsPrimitive.Root, Object.assign({}, otherProps, {
|
@@ -9281,19 +9165,20 @@ var Tabs = /*#__PURE__*/React.forwardRef(function Tabs(props, ref) {
|
|
9281
9165
|
value: id
|
9282
9166
|
}), children);
|
9283
9167
|
});
|
9284
|
-
|
9285
|
-
|
9168
|
+
const TabList = /*#__PURE__*/React.forwardRef(function Tab(props, ref) {
|
9169
|
+
const className = cn('yt-tab__list border-b border-grey-light flex flex-row m-0 mb-4', props.className);
|
9286
9170
|
return React.createElement(TabsPrimitive.List, Object.assign({}, props, {
|
9287
9171
|
className: className,
|
9288
9172
|
ref: ref
|
9289
9173
|
}));
|
9290
9174
|
});
|
9291
|
-
|
9292
|
-
|
9293
|
-
|
9294
|
-
|
9295
|
-
|
9296
|
-
|
9175
|
+
const TabTrigger = /*#__PURE__*/React.forwardRef(function Tab(props, ref) {
|
9176
|
+
const {
|
9177
|
+
id,
|
9178
|
+
disabled,
|
9179
|
+
...otherProps
|
9180
|
+
} = props;
|
9181
|
+
const className = cn('yt-tab bg-transparent border-b-2 border-transparent text-grey-darkest m-0 py-2 px-4', disabled ? 'cursor-not-allowed !text-grey' : 'cursor-pointer rounded-t hover:border-grey-light hover:text-black active:yt-focus active:border-blue focus:yt-focus focus:border-blue', props.className);
|
9297
9182
|
return React.createElement(TabsPrimitive.Trigger, Object.assign({}, otherProps, {
|
9298
9183
|
className: className,
|
9299
9184
|
disabled: disabled,
|
@@ -9304,11 +9189,12 @@ var TabTrigger = /*#__PURE__*/React.forwardRef(function Tab(props, ref) {
|
|
9304
9189
|
value: id
|
9305
9190
|
}));
|
9306
9191
|
});
|
9307
|
-
|
9308
|
-
|
9309
|
-
|
9310
|
-
|
9311
|
-
|
9192
|
+
const TabContent = /*#__PURE__*/React.forwardRef(function Tab(props, ref) {
|
9193
|
+
const {
|
9194
|
+
id,
|
9195
|
+
...otherProps
|
9196
|
+
} = props;
|
9197
|
+
const className = cn('yt-tab__panel outline-none', props.className);
|
9312
9198
|
return React.createElement(TabsPrimitive.Content, Object.assign({}, otherProps, {
|
9313
9199
|
className: className,
|
9314
9200
|
ref: ref,
|
@@ -9319,19 +9205,22 @@ Tabs.List = TabList;
|
|
9319
9205
|
Tabs.Trigger = TabTrigger;
|
9320
9206
|
Tabs.Content = TabContent;
|
9321
9207
|
|
9322
|
-
|
9323
|
-
|
9324
|
-
|
9325
|
-
|
9326
|
-
|
9327
|
-
|
9208
|
+
const Textarea = /*#__PURE__*/React.forwardRef(function Textarea(props, ref) {
|
9209
|
+
const {
|
9210
|
+
defaultValue: _,
|
9211
|
+
highlighted,
|
9212
|
+
invalid,
|
9213
|
+
onKeyDown,
|
9214
|
+
...otherProps
|
9215
|
+
} = props;
|
9216
|
+
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
|
9328
9217
|
// if it has scroll height then the browser reverts to native scrolling behaviour only
|
9329
9218
|
// so we manually override it to ensure _our_ desired behaviour remains intact
|
9330
9219
|
|
9331
|
-
|
9220
|
+
const handleKeyDown = event => {
|
9332
9221
|
if (event.key === 'Home' || event.key === 'End') {
|
9333
9222
|
event.preventDefault();
|
9334
|
-
|
9223
|
+
const position = event.key === 'End' ? event.currentTarget.value.length : 0;
|
9335
9224
|
event.currentTarget.setSelectionRange(position, position);
|
9336
9225
|
event.currentTarget.scrollTop = event.key === 'End' ? event.currentTarget.scrollHeight : 0;
|
9337
9226
|
}
|
@@ -9349,18 +9238,18 @@ var Textarea = /*#__PURE__*/React.forwardRef(function Textarea(props, ref) {
|
|
9349
9238
|
}));
|
9350
9239
|
});
|
9351
9240
|
|
9352
|
-
|
9353
|
-
|
9354
|
-
|
9355
|
-
|
9356
|
-
|
9357
|
-
|
9358
|
-
|
9241
|
+
const Switch = /*#__PURE__*/React.forwardRef(function Switch(props, ref) {
|
9242
|
+
const {
|
9243
|
+
label,
|
9244
|
+
onChange,
|
9245
|
+
...otherProps
|
9246
|
+
} = props;
|
9247
|
+
const className = cn('group h-6 w-10 flex rounded-full inline-flex', {
|
9359
9248
|
'mr-2': !!label,
|
9360
9249
|
'bg-grey-darker aria-checked:bg-blue focus:yt-focus': !props.disabled,
|
9361
9250
|
'bg-grey-light cursor-not-allowed aria-checked:bg-blue-light': props.disabled
|
9362
9251
|
}, props.className);
|
9363
|
-
|
9252
|
+
const element = React.createElement(PrimitiveSwitch.Root, Object.assign({}, otherProps, {
|
9364
9253
|
className: className,
|
9365
9254
|
onCheckedChange: onChange,
|
9366
9255
|
ref: ref
|
@@ -9369,7 +9258,7 @@ var Switch = /*#__PURE__*/React.forwardRef(function Switch(props, ref) {
|
|
9369
9258
|
}));
|
9370
9259
|
|
9371
9260
|
if (label) {
|
9372
|
-
|
9261
|
+
const labelClassName = cn('flex items-center cursor-pointer', {
|
9373
9262
|
'cursor-not-allowed text-grey-dark': props.disabled
|
9374
9263
|
});
|
9375
9264
|
return React.createElement("label", {
|
@@ -9380,23 +9269,22 @@ var Switch = /*#__PURE__*/React.forwardRef(function Switch(props, ref) {
|
|
9380
9269
|
return element;
|
9381
9270
|
});
|
9382
9271
|
|
9383
|
-
|
9384
|
-
|
9385
|
-
|
9386
|
-
|
9387
|
-
|
9388
|
-
|
9389
|
-
|
9390
|
-
|
9391
|
-
|
9392
|
-
|
9393
|
-
|
9394
|
-
|
9395
|
-
|
9396
|
-
|
9397
|
-
|
9398
|
-
|
9399
|
-
var onWindowKeyDown = function onWindowKeyDown(event) {
|
9272
|
+
const Tooltip$1 = ({
|
9273
|
+
continuous,
|
9274
|
+
index,
|
9275
|
+
isLastStep,
|
9276
|
+
step,
|
9277
|
+
backProps,
|
9278
|
+
primaryProps,
|
9279
|
+
skipProps,
|
9280
|
+
tooltipProps,
|
9281
|
+
size,
|
9282
|
+
locale,
|
9283
|
+
disableTourSkipOnEsc
|
9284
|
+
}) => {
|
9285
|
+
const skipButtonRef = React.useRef(null);
|
9286
|
+
React.useEffect(() => {
|
9287
|
+
const onWindowKeyDown = event => {
|
9400
9288
|
if (!disableTourSkipOnEsc) {
|
9401
9289
|
if (event.keyCode === keycode('esc') && skipButtonRef.current !== null) {
|
9402
9290
|
event.preventDefault();
|
@@ -9407,7 +9295,7 @@ var Tooltip$1 = function Tooltip(_ref) {
|
|
9407
9295
|
};
|
9408
9296
|
|
9409
9297
|
window.addEventListener('keydown', onWindowKeyDown);
|
9410
|
-
return
|
9298
|
+
return () => {
|
9411
9299
|
window.removeEventListener('keydown', onWindowKeyDown);
|
9412
9300
|
};
|
9413
9301
|
}, []);
|
@@ -9426,30 +9314,30 @@ var Tooltip$1 = function Tooltip(_ref) {
|
|
9426
9314
|
appearance: "discrete"
|
9427
9315
|
}), locale.back), React.createElement(Button$1, Object.assign({}, primaryProps, {
|
9428
9316
|
appearance: "primary"
|
9429
|
-
}), continuous ? isLastStep ? locale.last
|
9317
|
+
}), continuous ? isLastStep ? `${locale.last} (${index + 1}/${size})` : `${locale.next} (${index + 1}/${size})` : locale.close)));
|
9430
9318
|
}; // eslint-disable-next-line @typescript-eslint/no-unused-vars
|
9431
9319
|
|
9432
9320
|
|
9433
|
-
|
9434
|
-
|
9435
|
-
|
9436
|
-
|
9437
|
-
|
9438
|
-
|
9439
|
-
|
9440
|
-
|
9441
|
-
|
9442
|
-
|
9443
|
-
|
9444
|
-
|
9445
|
-
|
9446
|
-
|
9447
|
-
|
9448
|
-
|
9449
|
-
|
9450
|
-
|
9451
|
-
return React.Children.map(props.children,
|
9452
|
-
|
9321
|
+
const TourStep = _props => null;
|
9322
|
+
const Tour = props => {
|
9323
|
+
const {
|
9324
|
+
texts: {
|
9325
|
+
tour
|
9326
|
+
}
|
9327
|
+
} = useLocalization();
|
9328
|
+
const {
|
9329
|
+
autoStart: run,
|
9330
|
+
onComplete,
|
9331
|
+
onClose,
|
9332
|
+
onReady,
|
9333
|
+
spotlightClicks,
|
9334
|
+
disableCloseOnEsc: disableTourSkipOnEsc,
|
9335
|
+
disableScrollParentFix = false,
|
9336
|
+
...rest
|
9337
|
+
} = props;
|
9338
|
+
const steps = React.useMemo(() => {
|
9339
|
+
return React.Children.map(props.children, child => {
|
9340
|
+
const step = {
|
9453
9341
|
disableBeacon: !child.props.showBeacon,
|
9454
9342
|
target: child.props.selector,
|
9455
9343
|
placement: child.props.position,
|
@@ -9459,12 +9347,10 @@ var Tour = function Tour(props) {
|
|
9459
9347
|
return step;
|
9460
9348
|
});
|
9461
9349
|
}, [props.children]);
|
9462
|
-
|
9350
|
+
const getStep = React.useCallback(selector => {
|
9463
9351
|
var _props$children$find;
|
9464
9352
|
|
9465
|
-
return (_props$children$find = props.children.find(
|
9466
|
-
return child.props.selector === selector;
|
9467
|
-
})) === null || _props$children$find === void 0 ? void 0 : _props$children$find.props;
|
9353
|
+
return (_props$children$find = props.children.find(child => child.props.selector === selector)) === null || _props$children$find === void 0 ? void 0 : _props$children$find.props;
|
9468
9354
|
}, [props.children]);
|
9469
9355
|
|
9470
9356
|
function callback(state) {
|
@@ -9494,12 +9380,10 @@ var Tour = function Tour(props) {
|
|
9494
9380
|
floaterProps: {
|
9495
9381
|
disableAnimation: true
|
9496
9382
|
},
|
9497
|
-
tooltipComponent:
|
9498
|
-
|
9499
|
-
|
9500
|
-
|
9501
|
-
}));
|
9502
|
-
},
|
9383
|
+
tooltipComponent: tooltipProps => React.createElement(Tooltip$1, Object.assign({}, tooltipProps, {
|
9384
|
+
locale: tour,
|
9385
|
+
disableTourSkipOnEsc: disableTourSkipOnEsc
|
9386
|
+
})),
|
9503
9387
|
locale: tour,
|
9504
9388
|
spotlightPadding: 8,
|
9505
9389
|
spotlightClicks: spotlightClicks,
|
@@ -9540,22 +9424,22 @@ var useOnClickOutside = function useOnClickOutside(ref, callback) {
|
|
9540
9424
|
}, [ref, callback]);
|
9541
9425
|
};
|
9542
9426
|
|
9543
|
-
|
9544
|
-
|
9545
|
-
|
9546
|
-
|
9547
|
-
|
9548
|
-
|
9549
|
-
|
9427
|
+
const SearchInput = /*#__PURE__*/React.forwardRef(function SearchInput({
|
9428
|
+
onSearch,
|
9429
|
+
...props
|
9430
|
+
}, ref) {
|
9431
|
+
const {
|
9432
|
+
texts
|
9433
|
+
} = useLocalization();
|
9550
9434
|
|
9551
|
-
|
9435
|
+
const handleClick = () => {
|
9552
9436
|
if (!props.disabled) {
|
9553
9437
|
onSearch === null || onSearch === void 0 ? void 0 : onSearch(props.value);
|
9554
9438
|
}
|
9555
9439
|
};
|
9556
9440
|
|
9557
|
-
|
9558
|
-
|
9441
|
+
const handleKeyDown = event => {
|
9442
|
+
const isEnterKeyPressed = event.keyCode === keycode('enter');
|
9559
9443
|
|
9560
9444
|
if (isEnterKeyPressed) {
|
9561
9445
|
handleClick();
|