@economic/taco 1.1.5-alpha.102 → 1.1.5-alpha.108
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/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 +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/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 +45 -51
- package/dist/esm/components/Tour/Tour.js.map +1 -1
- package/dist/esm/components/Treeview/Treeview.js +26 -36
- package/dist/esm/components/Treeview/Treeview.js.map +1 -1
- package/dist/esm/components/VisuallyHidden/VisuallyHidden.js +1 -1
- package/dist/esm/components/VisuallyHidden/VisuallyHidden.js.map +1 -1
- package/dist/taco.cjs.development.js +534 -645
- 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
@@ -3318,7 +3318,7 @@ var Backdrop = /*#__PURE__*/React.forwardRef(function Backdrop(props, ref) {
|
|
3318
3318
|
}));
|
3319
3319
|
});
|
3320
3320
|
|
3321
|
-
|
3321
|
+
const VisuallyHidden = /*#__PURE__*/React.forwardRef(function VisuallyHidden(props, ref) {
|
3322
3322
|
return React.createElement("span", Object.assign({}, props, {
|
3323
3323
|
className: "sr-only",
|
3324
3324
|
ref: ref
|
@@ -3436,13 +3436,13 @@ const Button = /*#__PURE__*/React.forwardRef(function Button(props, ref) {
|
|
3436
3436
|
}), React.Children.count(props.children) > 1 ? React.Children.map(props.children, child => typeof child === 'string' ? React.createElement("span", null, child) : child) : props.children);
|
3437
3437
|
});
|
3438
3438
|
|
3439
|
-
|
3440
|
-
|
3441
|
-
|
3442
|
-
|
3443
|
-
|
3444
|
-
|
3445
|
-
|
3439
|
+
const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(props, ref) {
|
3440
|
+
const {
|
3441
|
+
title,
|
3442
|
+
children,
|
3443
|
+
placement,
|
3444
|
+
...otherProps
|
3445
|
+
} = props;
|
3446
3446
|
return React.createElement(TooltipPrimitive.Root, {
|
3447
3447
|
delayDuration: 50
|
3448
3448
|
}, React.createElement(TooltipPrimitive.Trigger, {
|
@@ -3534,14 +3534,13 @@ const createButton = (props, className, ref) => {
|
|
3534
3534
|
return button;
|
3535
3535
|
};
|
3536
3536
|
|
3537
|
-
|
3538
|
-
|
3539
|
-
|
3540
|
-
|
3541
|
-
|
3542
|
-
|
3543
|
-
|
3544
|
-
var className = cn('w-8', getButtonClasses(), getAppearanceClasses(otherProps.appearance, true), {
|
3537
|
+
const IconButton = /*#__PURE__*/React.forwardRef(function IconButton(props, ref) {
|
3538
|
+
const {
|
3539
|
+
icon,
|
3540
|
+
rounded = false,
|
3541
|
+
...otherProps
|
3542
|
+
} = props;
|
3543
|
+
const className = cn('w-8', getButtonClasses(), getAppearanceClasses(otherProps.appearance, true), {
|
3545
3544
|
'rounded-full': rounded,
|
3546
3545
|
rounded: !rounded,
|
3547
3546
|
'cursor-not-allowed opacity-50': props.disabled,
|
@@ -3552,13 +3551,13 @@ var IconButton = /*#__PURE__*/React.forwardRef(function IconButton(props, ref) {
|
|
3552
3551
|
return null;
|
3553
3552
|
}
|
3554
3553
|
|
3555
|
-
return createButton(
|
3554
|
+
return createButton({ ...otherProps,
|
3556
3555
|
children: React.createElement(Icon, {
|
3557
3556
|
name: icon,
|
3558
3557
|
className: "m-0 p-0"
|
3559
3558
|
}),
|
3560
3559
|
'data-taco': 'icon-button'
|
3561
|
-
}
|
3560
|
+
}, className, ref);
|
3562
3561
|
});
|
3563
3562
|
|
3564
3563
|
var Banner = /*#__PURE__*/React.forwardRef(function Banner(props, ref) {
|
@@ -3578,10 +3577,10 @@ var Banner = /*#__PURE__*/React.forwardRef(function Banner(props, ref) {
|
|
3578
3577
|
}) : null);
|
3579
3578
|
});
|
3580
3579
|
|
3581
|
-
var _excluded$
|
3580
|
+
var _excluded$3 = ["fluid"];
|
3582
3581
|
var Button$1 = /*#__PURE__*/React.forwardRef(function Button(props, ref) {
|
3583
3582
|
var fluid = props.fluid,
|
3584
|
-
otherProps = _objectWithoutPropertiesLoose(props, _excluded$
|
3583
|
+
otherProps = _objectWithoutPropertiesLoose(props, _excluded$3);
|
3585
3584
|
|
3586
3585
|
var className = cn(getButtonClasses(), getAppearanceClasses(otherProps.appearance), 'rounded px-3', {
|
3587
3586
|
'cursor-not-allowed opacity-50': props.disabled,
|
@@ -3652,27 +3651,21 @@ function useTimer(duration = 0, callback) {
|
|
3652
3651
|
};
|
3653
3652
|
}
|
3654
3653
|
|
3655
|
-
|
3656
|
-
|
3657
|
-
|
3658
|
-
|
3659
|
-
|
3660
|
-
|
3661
|
-
|
3662
|
-
|
3663
|
-
|
3664
|
-
setVisibility = _React$useState[1];
|
3665
|
-
|
3666
|
-
React__default.useEffect(function () {
|
3667
|
-
var timeout;
|
3654
|
+
const Spinner$1 = /*#__PURE__*/React__default.forwardRef(function Spinner(props, ref) {
|
3655
|
+
const {
|
3656
|
+
delay = 500,
|
3657
|
+
label,
|
3658
|
+
...otherProps
|
3659
|
+
} = props;
|
3660
|
+
const [visible, setVisibility] = React__default.useState(!delay);
|
3661
|
+
React__default.useEffect(() => {
|
3662
|
+
let timeout;
|
3668
3663
|
|
3669
3664
|
if (delay) {
|
3670
|
-
timeout = window.setTimeout(
|
3671
|
-
return setVisibility(true);
|
3672
|
-
}, delay);
|
3665
|
+
timeout = window.setTimeout(() => setVisibility(true), delay);
|
3673
3666
|
}
|
3674
3667
|
|
3675
|
-
return
|
3668
|
+
return () => {
|
3676
3669
|
if (timeout) {
|
3677
3670
|
clearTimeout(timeout);
|
3678
3671
|
}
|
@@ -3683,7 +3676,7 @@ var Spinner$1 = /*#__PURE__*/React__default.forwardRef(function Spinner(props, r
|
|
3683
3676
|
return null;
|
3684
3677
|
}
|
3685
3678
|
|
3686
|
-
|
3679
|
+
const className = cn('inline-flex flex-col relative items-center', otherProps.className);
|
3687
3680
|
return React__default.createElement("div", Object.assign({}, otherProps, {
|
3688
3681
|
className: className,
|
3689
3682
|
"data-taco": "spinner",
|
@@ -3809,62 +3802,49 @@ const Toast = ({
|
|
3809
3802
|
}));
|
3810
3803
|
};
|
3811
3804
|
|
3812
|
-
|
3813
|
-
|
3814
|
-
var ToastContext = /*#__PURE__*/React.createContext({});
|
3805
|
+
const DEFAULT_AUTO_CLOSE_TIMEOUT = 7500;
|
3806
|
+
const ToastContext = /*#__PURE__*/React.createContext({});
|
3815
3807
|
|
3816
|
-
|
3817
|
-
|
3818
|
-
|
3819
|
-
return JSON.stringify(toast.content) === JSON.stringify(content);
|
3820
|
-
});
|
3808
|
+
const insertToastWithoutDuplicates = (currentToasts, id, content, options, close) => {
|
3809
|
+
const nextToasts = [...currentToasts];
|
3810
|
+
const existingToastIndex = currentToasts.findIndex(toast => JSON.stringify(toast.content) === JSON.stringify(content));
|
3821
3811
|
|
3822
3812
|
if (existingToastIndex > -1) {
|
3823
3813
|
nextToasts[existingToastIndex].lastDuplicateId = id;
|
3824
3814
|
nextToasts[existingToastIndex].lastUpdated = Date.now();
|
3825
3815
|
} else {
|
3826
3816
|
nextToasts.push({
|
3827
|
-
id
|
3817
|
+
id,
|
3828
3818
|
content: typeof content === 'function' ? content(close) : content,
|
3829
|
-
options
|
3819
|
+
options
|
3830
3820
|
});
|
3831
3821
|
}
|
3832
3822
|
|
3833
3823
|
return nextToasts;
|
3834
3824
|
};
|
3835
3825
|
|
3836
|
-
|
3837
|
-
|
3838
|
-
|
3839
|
-
|
3840
|
-
|
3841
|
-
toasts = _React$useState[0],
|
3842
|
-
setToasts = _React$useState[1];
|
3826
|
+
const ToastProvider = ({
|
3827
|
+
children,
|
3828
|
+
...props
|
3829
|
+
}) => {
|
3830
|
+
const [toasts, setToasts] = React.useState([]);
|
3843
3831
|
|
3844
|
-
|
3845
|
-
setToasts(
|
3846
|
-
return currentToasts.filter(function (toast) {
|
3847
|
-
return toast.id !== id;
|
3848
|
-
});
|
3849
|
-
});
|
3832
|
+
const handleClose = id => {
|
3833
|
+
setToasts(currentToasts => currentToasts.filter(toast => toast.id !== id));
|
3850
3834
|
}; // memoize (useCallback) this function,
|
3851
3835
|
// it is the value of the context provider and we don't want it to trigger state tree re-renders on provider children
|
3852
3836
|
|
3853
3837
|
|
3854
|
-
|
3855
|
-
|
3838
|
+
const toaster = React.useCallback((content, options) => {
|
3839
|
+
const id = uuid.v4();
|
3856
3840
|
|
3857
|
-
|
3858
|
-
return handleClose(id);
|
3859
|
-
};
|
3841
|
+
const close = () => handleClose(id);
|
3860
3842
|
|
3861
|
-
setToasts(
|
3862
|
-
return insertToastWithoutDuplicates(currentToasts, id, content, options, close);
|
3863
|
-
});
|
3843
|
+
setToasts(currentToasts => insertToastWithoutDuplicates(currentToasts, id, content, options, close));
|
3864
3844
|
|
3865
|
-
|
3866
|
-
setToasts(
|
3867
|
-
|
3845
|
+
const update = (content, options) => {
|
3846
|
+
setToasts(currentToasts => {
|
3847
|
+
const nextToasts = currentToasts.filter(toast => {
|
3868
3848
|
if (toast.lastDuplicateId) {
|
3869
3849
|
return toast.lastDuplicateId !== id;
|
3870
3850
|
}
|
@@ -3875,80 +3855,70 @@ var ToastProvider = function ToastProvider(_ref) {
|
|
3875
3855
|
});
|
3876
3856
|
};
|
3877
3857
|
|
3878
|
-
|
3879
|
-
update(content,
|
3880
|
-
autoClose: DEFAULT_AUTO_CLOSE_TIMEOUT
|
3881
|
-
|
3858
|
+
const success = (content, options) => {
|
3859
|
+
update(content, {
|
3860
|
+
autoClose: DEFAULT_AUTO_CLOSE_TIMEOUT,
|
3861
|
+
...options,
|
3882
3862
|
type: 'success'
|
3883
|
-
})
|
3863
|
+
});
|
3884
3864
|
};
|
3885
3865
|
|
3886
|
-
|
3887
|
-
update(content,
|
3866
|
+
const error = (content, options) => {
|
3867
|
+
update(content, { ...options,
|
3888
3868
|
type: 'error'
|
3889
|
-
})
|
3869
|
+
});
|
3890
3870
|
};
|
3891
3871
|
|
3892
|
-
|
3893
|
-
update(content,
|
3872
|
+
const warning = (content, options) => {
|
3873
|
+
update(content, { ...options,
|
3894
3874
|
type: 'warning'
|
3895
|
-
})
|
3875
|
+
});
|
3896
3876
|
};
|
3897
3877
|
|
3898
|
-
|
3899
|
-
update(content,
|
3878
|
+
const information = (content, options) => {
|
3879
|
+
update(content, { ...options,
|
3900
3880
|
type: 'information'
|
3901
|
-
})
|
3881
|
+
});
|
3902
3882
|
};
|
3903
3883
|
|
3904
|
-
|
3905
|
-
update(content,
|
3884
|
+
const loading = (content, options) => {
|
3885
|
+
update(content, { ...options,
|
3906
3886
|
type: 'loading'
|
3907
|
-
})
|
3887
|
+
});
|
3908
3888
|
};
|
3909
3889
|
|
3910
3890
|
return {
|
3911
|
-
success
|
3912
|
-
error
|
3913
|
-
warning
|
3914
|
-
information
|
3915
|
-
loading
|
3916
|
-
close
|
3891
|
+
success,
|
3892
|
+
error,
|
3893
|
+
warning,
|
3894
|
+
information,
|
3895
|
+
loading,
|
3896
|
+
close
|
3917
3897
|
};
|
3918
3898
|
}, []); // no need to rebind these every render, do them once in an effect
|
3919
3899
|
|
3920
|
-
React.useEffect(
|
3921
|
-
toaster.success =
|
3922
|
-
|
3923
|
-
|
3924
|
-
|
3925
|
-
|
3926
|
-
}));
|
3927
|
-
};
|
3900
|
+
React.useEffect(() => {
|
3901
|
+
toaster.success = (content, options) => toaster(content, {
|
3902
|
+
autoClose: DEFAULT_AUTO_CLOSE_TIMEOUT,
|
3903
|
+
...options,
|
3904
|
+
type: 'success'
|
3905
|
+
});
|
3928
3906
|
|
3929
|
-
toaster.error =
|
3930
|
-
|
3931
|
-
|
3932
|
-
}));
|
3933
|
-
};
|
3907
|
+
toaster.error = (content, options) => toaster(content, { ...options,
|
3908
|
+
type: 'error'
|
3909
|
+
});
|
3934
3910
|
|
3935
|
-
toaster.warning =
|
3936
|
-
|
3937
|
-
|
3938
|
-
}));
|
3939
|
-
};
|
3911
|
+
toaster.warning = (content, options) => toaster(content, { ...options,
|
3912
|
+
type: 'warning'
|
3913
|
+
});
|
3940
3914
|
|
3941
|
-
toaster.information =
|
3942
|
-
|
3943
|
-
|
3944
|
-
}));
|
3945
|
-
};
|
3915
|
+
toaster.information = (content, options) => toaster(content, { ...options,
|
3916
|
+
type: 'information'
|
3917
|
+
});
|
3946
3918
|
|
3947
|
-
toaster.loading =
|
3948
|
-
|
3949
|
-
|
3950
|
-
}));
|
3951
|
-
};
|
3919
|
+
toaster.loading = (content, options) => toaster(content, { ...options,
|
3920
|
+
type: 'loading'
|
3921
|
+
});
|
3952
3922
|
}, []);
|
3953
3923
|
return React.createElement(ToastContext.Provider, Object.assign({}, props, {
|
3954
3924
|
value: toaster
|
@@ -3958,43 +3928,37 @@ var ToastProvider = function ToastProvider(_ref) {
|
|
3958
3928
|
role: "log"
|
3959
3929
|
}, React.createElement(framerMotion.AnimatePresence, {
|
3960
3930
|
initial: false
|
3961
|
-
}, toasts.map(
|
3962
|
-
|
3963
|
-
|
3931
|
+
}, toasts.map(toast => React.createElement(framerMotion.motion.div, {
|
3932
|
+
key: toast.id,
|
3933
|
+
transition: {
|
3934
|
+
type: 'spring',
|
3935
|
+
damping: 20,
|
3936
|
+
stiffness: 300
|
3937
|
+
},
|
3938
|
+
initial: {
|
3939
|
+
opacity: 0,
|
3940
|
+
y: 10,
|
3941
|
+
scale: 0.5
|
3942
|
+
},
|
3943
|
+
animate: {
|
3944
|
+
opacity: 1,
|
3945
|
+
y: 0,
|
3946
|
+
scale: 1
|
3947
|
+
},
|
3948
|
+
exit: {
|
3949
|
+
opacity: 0,
|
3950
|
+
scale: 0.5,
|
3964
3951
|
transition: {
|
3965
|
-
|
3966
|
-
damping: 20,
|
3967
|
-
stiffness: 300
|
3968
|
-
},
|
3969
|
-
initial: {
|
3970
|
-
opacity: 0,
|
3971
|
-
y: 10,
|
3972
|
-
scale: 0.5
|
3973
|
-
},
|
3974
|
-
animate: {
|
3975
|
-
opacity: 1,
|
3976
|
-
y: 0,
|
3977
|
-
scale: 1
|
3978
|
-
},
|
3979
|
-
exit: {
|
3980
|
-
opacity: 0,
|
3981
|
-
scale: 0.5,
|
3982
|
-
transition: {
|
3983
|
-
duration: 0.2
|
3984
|
-
}
|
3985
|
-
}
|
3986
|
-
}, React.createElement(Toast, Object.assign({}, toast, {
|
3987
|
-
onClose: function onClose() {
|
3988
|
-
return handleClose(toast.id);
|
3952
|
+
duration: 0.2
|
3989
3953
|
}
|
3990
|
-
}
|
3991
|
-
}
|
3992
|
-
|
3993
|
-
|
3994
|
-
return React.useContext(ToastContext);
|
3954
|
+
}
|
3955
|
+
}, React.createElement(Toast, Object.assign({}, toast, {
|
3956
|
+
onClose: () => handleClose(toast.id)
|
3957
|
+
})))))));
|
3995
3958
|
};
|
3959
|
+
const useToast = () => React.useContext(ToastContext);
|
3996
3960
|
|
3997
|
-
|
3961
|
+
const defaultLocalisationTexts = {
|
3998
3962
|
calendar: {
|
3999
3963
|
months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
|
4000
3964
|
weekdaysShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
|
@@ -4069,37 +4033,32 @@ var defaultLocalisationTexts = {
|
|
4069
4033
|
inputLabel: 'Search...'
|
4070
4034
|
}
|
4071
4035
|
};
|
4072
|
-
|
4036
|
+
const defaultLocalizationContext = {
|
4073
4037
|
locale: 'en-GB',
|
4074
4038
|
texts: defaultLocalisationTexts,
|
4075
4039
|
formatting: {
|
4076
4040
|
date: 'dd.mm.yy'
|
4077
4041
|
}
|
4078
4042
|
};
|
4079
|
-
|
4043
|
+
const Context = /*#__PURE__*/React.createContext({
|
4080
4044
|
localization: defaultLocalizationContext
|
4081
4045
|
});
|
4082
|
-
|
4083
|
-
|
4084
|
-
|
4085
|
-
|
4086
|
-
|
4087
|
-
|
4088
|
-
|
4089
|
-
|
4090
|
-
}, [localization]);
|
4046
|
+
const Provider = props => {
|
4047
|
+
const {
|
4048
|
+
children,
|
4049
|
+
localization = defaultLocalizationContext
|
4050
|
+
} = props;
|
4051
|
+
const value = React.useMemo(() => ({
|
4052
|
+
localization
|
4053
|
+
}), [localization]);
|
4091
4054
|
return React.createElement(Context.Provider, {
|
4092
4055
|
value: value
|
4093
4056
|
}, React.createElement(ToastProvider, null, children));
|
4094
4057
|
};
|
4095
|
-
|
4096
|
-
|
4097
|
-
};
|
4098
|
-
var useLocalization = function useLocalization() {
|
4099
|
-
return useTaco().localization;
|
4100
|
-
};
|
4058
|
+
const useTaco = () => React.useContext(Context);
|
4059
|
+
const useLocalization = () => useTaco().localization;
|
4101
4060
|
|
4102
|
-
var _excluded$
|
4061
|
+
var _excluded$4 = ["onChange", "value"];
|
4103
4062
|
|
4104
4063
|
var renderDay = function renderDay(day, modifiers) {
|
4105
4064
|
return modifiers.disabled ? React.createElement("span", {
|
@@ -4178,7 +4137,7 @@ var Navbar = /*#__PURE__*/React.memo(function (_ref) {
|
|
4178
4137
|
var Calendar$1 = /*#__PURE__*/React.forwardRef(function Calendar(props, ref) {
|
4179
4138
|
var handleChange = props.onChange,
|
4180
4139
|
value = props.value,
|
4181
|
-
otherProps = _objectWithoutPropertiesLoose(props, _excluded$
|
4140
|
+
otherProps = _objectWithoutPropertiesLoose(props, _excluded$4);
|
4182
4141
|
|
4183
4142
|
var _useLocalization2 = useLocalization(),
|
4184
4143
|
locale = _useLocalization2.locale,
|
@@ -4242,7 +4201,7 @@ var Calendar$1 = /*#__PURE__*/React.forwardRef(function Calendar(props, ref) {
|
|
4242
4201
|
})));
|
4243
4202
|
});
|
4244
4203
|
|
4245
|
-
var _excluded$
|
4204
|
+
var _excluded$5 = ["checked", "highlighted", "indeterminate", "invalid", "label", "onChange"];
|
4246
4205
|
var Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(props, ref) {
|
4247
4206
|
var checked = props.checked,
|
4248
4207
|
highlighted = props.highlighted,
|
@@ -4250,7 +4209,7 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(props, ref) {
|
|
4250
4209
|
invalid = props.invalid,
|
4251
4210
|
label = props.label,
|
4252
4211
|
onChange = props.onChange,
|
4253
|
-
otherProps = _objectWithoutPropertiesLoose(props, _excluded$
|
4212
|
+
otherProps = _objectWithoutPropertiesLoose(props, _excluded$5);
|
4254
4213
|
|
4255
4214
|
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)]
|
4256
4215
|
props.className, {
|
@@ -4324,21 +4283,22 @@ const getButtonStateClasses = invalid => {
|
|
4324
4283
|
return '!border-grey-dark focus:!border-blue-light peer-focus:!border-blue-light peer-focus:peer-active:!border-blue-dark';
|
4325
4284
|
};
|
4326
4285
|
|
4327
|
-
|
4328
|
-
|
4329
|
-
|
4330
|
-
|
4331
|
-
|
4332
|
-
|
4333
|
-
|
4334
|
-
|
4335
|
-
|
4336
|
-
|
4337
|
-
|
4338
|
-
|
4286
|
+
const Input = /*#__PURE__*/React.forwardRef(function Input(props, ref) {
|
4287
|
+
const {
|
4288
|
+
button,
|
4289
|
+
icon,
|
4290
|
+
highlighted,
|
4291
|
+
invalid,
|
4292
|
+
onKeyDown,
|
4293
|
+
autoFocus,
|
4294
|
+
...otherProps
|
4295
|
+
} = props;
|
4296
|
+
const inputRef = useProxiedRef(ref);
|
4297
|
+
const hasContainer = button || icon;
|
4298
|
+
const className = cn(getInputClasses(props), 'min-h-[theme(spacing.8)] pointer-events-all', {
|
4339
4299
|
'pr-8': !!hasContainer
|
4340
4300
|
}, !hasContainer && otherProps.className);
|
4341
|
-
React.useEffect(
|
4301
|
+
React.useEffect(() => {
|
4342
4302
|
if (autoFocus && inputRef.current) {
|
4343
4303
|
inputRef.current.focus();
|
4344
4304
|
}
|
@@ -4346,10 +4306,10 @@ var Input = /*#__PURE__*/React.forwardRef(function Input(props, ref) {
|
|
4346
4306
|
// if it has scroll height then the browser reverts to native scrolling behaviour only
|
4347
4307
|
// so we manually override it to ensure _our_ desired behaviour remains intact
|
4348
4308
|
|
4349
|
-
|
4309
|
+
const handleKeyDown = event => {
|
4350
4310
|
if (!event.shiftKey && (event.key === 'Home' || event.key === 'End')) {
|
4351
4311
|
event.preventDefault();
|
4352
|
-
|
4312
|
+
const position = event.key === 'End' ? event.currentTarget.value.length : 0;
|
4353
4313
|
event.currentTarget.setSelectionRange(position, position);
|
4354
4314
|
}
|
4355
4315
|
|
@@ -4358,7 +4318,7 @@ var Input = /*#__PURE__*/React.forwardRef(function Input(props, ref) {
|
|
4358
4318
|
}
|
4359
4319
|
};
|
4360
4320
|
|
4361
|
-
|
4321
|
+
const input = React.createElement("input", Object.assign({}, otherProps, {
|
4362
4322
|
className: className,
|
4363
4323
|
"data-taco": "input",
|
4364
4324
|
onKeyDown: handleKeyDown,
|
@@ -4366,19 +4326,19 @@ var Input = /*#__PURE__*/React.forwardRef(function Input(props, ref) {
|
|
4366
4326
|
}));
|
4367
4327
|
|
4368
4328
|
if (hasContainer) {
|
4369
|
-
|
4329
|
+
let extra;
|
4370
4330
|
|
4371
4331
|
if (button) {
|
4372
|
-
|
4373
|
-
|
4374
|
-
|
4375
|
-
|
4332
|
+
const disabled = button.props.disabled || otherProps.disabled;
|
4333
|
+
const buttonClassName = cn('items-center flex justify-center border absolute rounded-l-none rounded-r right-0 h-full focus:rounded focus:outline-none', {
|
4334
|
+
[getButtonStateClasses(invalid)]: !props.disabled
|
4335
|
+
}, button.props.className);
|
4376
4336
|
extra = React.cloneElement(button, {
|
4377
4337
|
className: buttonClassName,
|
4378
|
-
disabled
|
4338
|
+
disabled
|
4379
4339
|
});
|
4380
4340
|
} else if (icon) {
|
4381
|
-
|
4341
|
+
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', {
|
4382
4342
|
'text-grey-dark': props.disabled,
|
4383
4343
|
'text-grey-darkest': !props.disabled
|
4384
4344
|
});
|
@@ -4390,7 +4350,7 @@ var Input = /*#__PURE__*/React.forwardRef(function Input(props, ref) {
|
|
4390
4350
|
});
|
4391
4351
|
}
|
4392
4352
|
|
4393
|
-
|
4353
|
+
const containerClassName = cn('bg-white inline-flex relative rounded w-full', otherProps.className);
|
4394
4354
|
return React.createElement("div", {
|
4395
4355
|
className: containerClassName,
|
4396
4356
|
"data-taco": "input-container"
|
@@ -5161,12 +5121,12 @@ var useBoundingClientRectListener = function useBoundingClientRectListener(ref)
|
|
5161
5121
|
return dimensions;
|
5162
5122
|
};
|
5163
5123
|
|
5164
|
-
var _excluded$
|
5124
|
+
var _excluded$6 = ["className", "dialog", "style"];
|
5165
5125
|
var Combobox = /*#__PURE__*/React.forwardRef(function Combobox(props, ref) {
|
5166
5126
|
var externalClassName = props.className,
|
5167
5127
|
dialog = props.dialog,
|
5168
5128
|
style = props.style,
|
5169
|
-
otherProps = _objectWithoutPropertiesLoose(props, _excluded$
|
5129
|
+
otherProps = _objectWithoutPropertiesLoose(props, _excluded$6);
|
5170
5130
|
|
5171
5131
|
var _useCombobox = useCombobox(otherProps, ref),
|
5172
5132
|
combobox = _useCombobox.combobox,
|
@@ -5459,19 +5419,18 @@ function mergeRefs(refs) {
|
|
5459
5419
|
};
|
5460
5420
|
}
|
5461
5421
|
|
5462
|
-
|
5463
|
-
var PopoverContext = /*#__PURE__*/React.createContext({
|
5422
|
+
const PopoverContext = /*#__PURE__*/React.createContext({
|
5464
5423
|
props: {},
|
5465
5424
|
ref: null
|
5466
5425
|
});
|
5467
|
-
|
5426
|
+
const Trigger$1 = /*#__PURE__*/React.forwardRef(function PopoverTrigger(props, ref) {
|
5468
5427
|
var _props$children;
|
5469
5428
|
|
5470
|
-
|
5471
|
-
|
5429
|
+
const context = React.useContext(PopoverContext);
|
5430
|
+
let children = props.children;
|
5472
5431
|
|
5473
5432
|
if (React.isValidElement(props.children) && typeof ((_props$children = props.children) === null || _props$children === void 0 ? void 0 : _props$children.type) === 'function') {
|
5474
|
-
console.warn(
|
5433
|
+
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`);
|
5475
5434
|
children = React.createElement("span", null, props.children);
|
5476
5435
|
}
|
5477
5436
|
|
@@ -5481,22 +5440,22 @@ var Trigger$1 = /*#__PURE__*/React.forwardRef(function PopoverTrigger(props, ref
|
|
5481
5440
|
asChild: true
|
5482
5441
|
}));
|
5483
5442
|
});
|
5484
|
-
|
5485
|
-
|
5486
|
-
|
5487
|
-
|
5488
|
-
|
5443
|
+
const RenderPropWrapper = /*#__PURE__*/React.forwardRef(function RenderPropWrapper({
|
5444
|
+
children,
|
5445
|
+
onClick
|
5446
|
+
}, ref) {
|
5447
|
+
const close = () => {
|
5489
5448
|
onClick(new CustomEvent('hide'));
|
5490
5449
|
};
|
5491
5450
|
|
5492
5451
|
return children({
|
5493
|
-
close
|
5494
|
-
ref
|
5452
|
+
close,
|
5453
|
+
ref
|
5495
5454
|
});
|
5496
5455
|
});
|
5497
|
-
|
5498
|
-
|
5499
|
-
|
5456
|
+
const Content$1 = /*#__PURE__*/React.forwardRef(function PopoverContent(props, ref) {
|
5457
|
+
const className = cn('bg-white focus:border-blue-light', props.className);
|
5458
|
+
let output;
|
5500
5459
|
|
5501
5460
|
if (typeof props.children === 'function') {
|
5502
5461
|
output = React.createElement(PopoverPrimitive.Close, {
|
@@ -5514,23 +5473,20 @@ var Content$1 = /*#__PURE__*/React.forwardRef(function PopoverContent(props, ref
|
|
5514
5473
|
className: "text-white"
|
5515
5474
|
}));
|
5516
5475
|
});
|
5517
|
-
|
5518
|
-
|
5519
|
-
|
5520
|
-
|
5521
|
-
|
5522
|
-
|
5523
|
-
|
5524
|
-
|
5525
|
-
|
5526
|
-
|
5527
|
-
|
5528
|
-
|
5529
|
-
|
5530
|
-
|
5531
|
-
ref: ref
|
5532
|
-
};
|
5533
|
-
}, [otherProps]);
|
5476
|
+
const Close$1 = /*#__PURE__*/React.forwardRef((props, ref) => React.createElement(PopoverPrimitive.Close, Object.assign({}, props, {
|
5477
|
+
ref: ref,
|
5478
|
+
asChild: true
|
5479
|
+
})));
|
5480
|
+
const Popover = /*#__PURE__*/React.forwardRef(function Popover(props, ref) {
|
5481
|
+
const {
|
5482
|
+
children,
|
5483
|
+
trigger,
|
5484
|
+
...otherProps
|
5485
|
+
} = props;
|
5486
|
+
const context = React.useMemo(() => ({
|
5487
|
+
props: otherProps,
|
5488
|
+
ref
|
5489
|
+
}), [otherProps]);
|
5534
5490
|
return React.createElement(PopoverContext.Provider, {
|
5535
5491
|
value: context
|
5536
5492
|
}, React.createElement(PopoverPrimitive.Root, null, trigger && React.createElement(Trigger$1, null, trigger), children));
|
@@ -5539,14 +5495,14 @@ Popover.Trigger = Trigger$1;
|
|
5539
5495
|
Popover.Content = Content$1;
|
5540
5496
|
Popover.Close = Close$1;
|
5541
5497
|
|
5542
|
-
var _excluded$
|
5498
|
+
var _excluded$7 = ["className", "onReset", "style", "shortcuts", "shortcutsText"];
|
5543
5499
|
var Datepicker = /*#__PURE__*/React.forwardRef(function Datepicker(props, ref) {
|
5544
5500
|
var externalClassName = props.className,
|
5545
5501
|
handleReset = props.onReset,
|
5546
5502
|
style = props.style,
|
5547
5503
|
shortcuts = props.shortcuts,
|
5548
5504
|
shortcutsText = props.shortcutsText,
|
5549
|
-
otherProps = _objectWithoutPropertiesLoose(props, _excluded$
|
5505
|
+
otherProps = _objectWithoutPropertiesLoose(props, _excluded$7);
|
5550
5506
|
|
5551
5507
|
var _useDatepicker = useDatepicker(otherProps, ref),
|
5552
5508
|
calendar = _useDatepicker.calendar,
|
@@ -5841,7 +5797,7 @@ const Extra = /*#__PURE__*/React.forwardRef(function DialogExtra(props, ref) {
|
|
5841
5797
|
});
|
5842
5798
|
Extra.displayName = 'DialogExtra';
|
5843
5799
|
|
5844
|
-
var _excluded$
|
5800
|
+
var _excluded$8 = ["children", "closeOnEscape", "defaultOpen", "draggable", "onChange", "onClose", "open", "showCloseButton", "size", "trigger"];
|
5845
5801
|
|
5846
5802
|
var useSeparatedChildren = function useSeparatedChildren(initialChildren) {
|
5847
5803
|
return React.useMemo(function () {
|
@@ -5878,7 +5834,7 @@ var Dialog = /*#__PURE__*/React.forwardRef(function Dialog(props, ref) {
|
|
5878
5834
|
_props$size = props.size,
|
5879
5835
|
size = _props$size === void 0 ? 'sm' : _props$size,
|
5880
5836
|
trigger = props.trigger,
|
5881
|
-
otherProps = _objectWithoutPropertiesLoose(props, _excluded$
|
5837
|
+
otherProps = _objectWithoutPropertiesLoose(props, _excluded$8);
|
5882
5838
|
|
5883
5839
|
var _useSeparatedChildren = useSeparatedChildren(initialChildren),
|
5884
5840
|
children = _useSeparatedChildren[0],
|
@@ -5928,14 +5884,14 @@ Dialog.Extra = Extra;
|
|
5928
5884
|
Dialog.Drawer = Drawer;
|
5929
5885
|
Dialog.Close = Close$2;
|
5930
5886
|
|
5931
|
-
var _excluded$
|
5887
|
+
var _excluded$9 = ["disabled", "children", "invalid", "message"];
|
5932
5888
|
var Field = /*#__PURE__*/React.forwardRef(function Field(props, ref) {
|
5933
5889
|
var disabled = props.disabled,
|
5934
5890
|
children = props.children,
|
5935
5891
|
_props$invalid = props.invalid,
|
5936
5892
|
invalid = _props$invalid === void 0 ? false : _props$invalid,
|
5937
5893
|
message = props.message,
|
5938
|
-
otherProps = _objectWithoutPropertiesLoose(props, _excluded$
|
5894
|
+
otherProps = _objectWithoutPropertiesLoose(props, _excluded$9);
|
5939
5895
|
|
5940
5896
|
var className = cn('flex flex-col font-bold text-xs leading-loose pb-4 min-h-[theme(spacing.18)]', {
|
5941
5897
|
'text-grey-dark': disabled
|
@@ -5955,11 +5911,11 @@ var Field = /*#__PURE__*/React.forwardRef(function Field(props, ref) {
|
|
5955
5911
|
}, message));
|
5956
5912
|
});
|
5957
5913
|
|
5958
|
-
var _excluded$
|
5914
|
+
var _excluded$a = ["horizontal"];
|
5959
5915
|
var Form = /*#__PURE__*/React.forwardRef(function Form(props, ref) {
|
5960
5916
|
var _props$horizontal = props.horizontal,
|
5961
5917
|
horizontal = _props$horizontal === void 0 ? false : _props$horizontal,
|
5962
|
-
otherProps = _objectWithoutPropertiesLoose(props, _excluded$
|
5918
|
+
otherProps = _objectWithoutPropertiesLoose(props, _excluded$a);
|
5963
5919
|
|
5964
5920
|
var className = cn('yt-form', {
|
5965
5921
|
'yt-form--horizontal flex flex-wrap': horizontal
|
@@ -5971,11 +5927,11 @@ var Form = /*#__PURE__*/React.forwardRef(function Form(props, ref) {
|
|
5971
5927
|
}));
|
5972
5928
|
});
|
5973
5929
|
|
5974
|
-
var _excluded$
|
5930
|
+
var _excluded$b = ["as"];
|
5975
5931
|
var Group = /*#__PURE__*/React.forwardRef(function Group(props, ref) {
|
5976
5932
|
var _props$as = props.as,
|
5977
5933
|
Tag = _props$as === void 0 ? 'span' : _props$as,
|
5978
|
-
otherProps = _objectWithoutPropertiesLoose(props, _excluded$
|
5934
|
+
otherProps = _objectWithoutPropertiesLoose(props, _excluded$b);
|
5979
5935
|
|
5980
5936
|
var className = cn('flex ', props.className);
|
5981
5937
|
return React.createElement(Tag, Object.assign({}, otherProps, {
|
@@ -5985,7 +5941,7 @@ var Group = /*#__PURE__*/React.forwardRef(function Group(props, ref) {
|
|
5985
5941
|
}));
|
5986
5942
|
});
|
5987
5943
|
|
5988
|
-
var _excluded$
|
5944
|
+
var _excluded$c = ["anchor", "children", "defaultOpen"];
|
5989
5945
|
var HangerContext = /*#__PURE__*/React.createContext({
|
5990
5946
|
props: {},
|
5991
5947
|
ref: null
|
@@ -6049,7 +6005,7 @@ var Hanger = /*#__PURE__*/React.forwardRef(function Hanger(props, ref) {
|
|
6049
6005
|
children = props.children,
|
6050
6006
|
_props$defaultOpen = props.defaultOpen,
|
6051
6007
|
defaultOpen = _props$defaultOpen === void 0 ? true : _props$defaultOpen,
|
6052
|
-
otherProps = _objectWithoutPropertiesLoose(props, _excluded$
|
6008
|
+
otherProps = _objectWithoutPropertiesLoose(props, _excluded$c);
|
6053
6009
|
|
6054
6010
|
var context = React.useMemo(function () {
|
6055
6011
|
return {
|
@@ -6078,7 +6034,7 @@ Hanger.Anchor = Anchor;
|
|
6078
6034
|
Hanger.Content = Content$3;
|
6079
6035
|
Hanger.Title = Title$1;
|
6080
6036
|
|
6081
|
-
var _excluded$
|
6037
|
+
var _excluded$d = ["placement"];
|
6082
6038
|
var Trigger$3 = /*#__PURE__*/React.forwardRef(function HoverCardTrigger(props, ref) {
|
6083
6039
|
return React.createElement(HoverCardPrimitive.Trigger, Object.assign({}, props, {
|
6084
6040
|
asChild: true,
|
@@ -6087,7 +6043,7 @@ var Trigger$3 = /*#__PURE__*/React.forwardRef(function HoverCardTrigger(props, r
|
|
6087
6043
|
});
|
6088
6044
|
var Content$4 = /*#__PURE__*/React.forwardRef(function HoverCardContent(externalProps, ref) {
|
6089
6045
|
var placement = externalProps.placement,
|
6090
|
-
props = _objectWithoutPropertiesLoose(externalProps, _excluded$
|
6046
|
+
props = _objectWithoutPropertiesLoose(externalProps, _excluded$d);
|
6091
6047
|
|
6092
6048
|
var className = cn('bg-white rounded p-3 yt-shadow', props.className);
|
6093
6049
|
return React.createElement(HoverCardPrimitive.Content, Object.assign({}, props, {
|
@@ -6104,24 +6060,24 @@ var HoverCard = function HoverCard(props) {
|
|
6104
6060
|
HoverCard.Trigger = Trigger$3;
|
6105
6061
|
HoverCard.Content = Content$4;
|
6106
6062
|
|
6107
|
-
|
6108
|
-
|
6109
|
-
|
6110
|
-
|
6111
|
-
|
6112
|
-
|
6113
|
-
|
6063
|
+
const SearchInput = /*#__PURE__*/React.forwardRef(function SearchInput({
|
6064
|
+
onSearch,
|
6065
|
+
...props
|
6066
|
+
}, ref) {
|
6067
|
+
const {
|
6068
|
+
texts
|
6069
|
+
} = useLocalization();
|
6114
6070
|
|
6115
|
-
|
6071
|
+
const handleClick = () => {
|
6116
6072
|
if (!props.disabled) {
|
6117
6073
|
onSearch === null || onSearch === void 0 ? void 0 : onSearch(props.value);
|
6118
6074
|
}
|
6119
6075
|
};
|
6120
6076
|
|
6121
|
-
|
6077
|
+
const handleKeyDown = event => {
|
6122
6078
|
var _props$onKeyDown;
|
6123
6079
|
|
6124
|
-
|
6080
|
+
const isEnterKeyPressed = event.keyCode === keycode('enter');
|
6125
6081
|
|
6126
6082
|
if (isEnterKeyPressed) {
|
6127
6083
|
handleClick();
|
@@ -6490,49 +6446,49 @@ const useMultiListbox = ({
|
|
6490
6446
|
};
|
6491
6447
|
};
|
6492
6448
|
|
6493
|
-
|
6494
|
-
|
6495
|
-
|
6496
|
-
|
6497
|
-
|
6498
|
-
|
6499
|
-
|
6500
|
-
|
6501
|
-
|
6502
|
-
|
6503
|
-
var className = cn('bg-white inline-flex relative w-full', externalClassName);
|
6449
|
+
const Listbox = /*#__PURE__*/React.forwardRef(function Listbox(props, ref) {
|
6450
|
+
const {
|
6451
|
+
className: externalClassName,
|
6452
|
+
...otherProps
|
6453
|
+
} = props;
|
6454
|
+
const {
|
6455
|
+
list,
|
6456
|
+
input
|
6457
|
+
} = useListbox(otherProps, ref);
|
6458
|
+
const className = cn('bg-white inline-flex relative w-full', externalClassName);
|
6504
6459
|
return React.createElement("span", {
|
6505
6460
|
"data-taco": "listbox",
|
6506
6461
|
className: className
|
6507
6462
|
}, React.createElement(ScrollableList, Object.assign({}, list, {
|
6508
|
-
style:
|
6463
|
+
style: { ...list.style,
|
6509
6464
|
maxHeight: 'calc(12rem + 2px)'
|
6510
6465
|
/* (6 * option height) + listbox border */
|
6511
6466
|
|
6512
|
-
}
|
6467
|
+
}
|
6513
6468
|
})), React.createElement("input", Object.assign({}, input, {
|
6514
6469
|
className: "hidden",
|
6515
6470
|
type: "text"
|
6516
6471
|
})));
|
6517
6472
|
});
|
6518
|
-
|
6519
|
-
|
6520
|
-
|
6521
|
-
|
6522
|
-
|
6523
|
-
|
6524
|
-
|
6525
|
-
|
6526
|
-
|
6473
|
+
const MultiListbox = /*#__PURE__*/React.forwardRef(function Listbox(props, ref) {
|
6474
|
+
const {
|
6475
|
+
className: externalClassName,
|
6476
|
+
...otherProps
|
6477
|
+
} = props;
|
6478
|
+
const {
|
6479
|
+
list,
|
6480
|
+
input
|
6481
|
+
} = useMultiListbox(otherProps, ref);
|
6482
|
+
const className = cn('bg-white inline-flex relative w-full', externalClassName);
|
6527
6483
|
return React.createElement("span", {
|
6528
6484
|
"data-taco": "listbox",
|
6529
6485
|
className: className
|
6530
6486
|
}, React.createElement(ScrollableList, Object.assign({}, list, {
|
6531
|
-
style:
|
6487
|
+
style: { ...list.style,
|
6532
6488
|
maxHeight: 'calc(12rem + 2px + 2px)'
|
6533
6489
|
/* (6 * option height) + listbox border + ALL_OPTIONS bottom border */
|
6534
6490
|
|
6535
|
-
}
|
6491
|
+
}
|
6536
6492
|
})), React.createElement("input", Object.assign({}, input, {
|
6537
6493
|
className: "hidden",
|
6538
6494
|
type: "text"
|
@@ -6715,34 +6671,26 @@ const Checkbox$1 = props => {
|
|
6715
6671
|
})), children);
|
6716
6672
|
};
|
6717
6673
|
|
6718
|
-
|
6719
|
-
|
6720
|
-
|
6721
|
-
return String(value !== null && value !== void 0 ? value : '');
|
6722
|
-
};
|
6723
|
-
var findByValue$1 = function findByValue(values, valueAsString) {
|
6724
|
-
return values.find(function (value) {
|
6725
|
-
return getRadioGroupItemValueAsString(value) === valueAsString;
|
6726
|
-
});
|
6727
|
-
};
|
6728
|
-
var RadioGroupContext = /*#__PURE__*/React.createContext({
|
6674
|
+
const getRadioGroupItemValueAsString = value => String(value !== null && value !== void 0 ? value : '');
|
6675
|
+
const findByValue$1 = (values, valueAsString) => values.find(value => getRadioGroupItemValueAsString(value) === valueAsString);
|
6676
|
+
const RadioGroupContext = /*#__PURE__*/React.createContext({
|
6729
6677
|
disabled: false,
|
6730
6678
|
invalid: false
|
6731
6679
|
});
|
6732
|
-
|
6733
|
-
|
6734
|
-
|
6735
|
-
|
6736
|
-
|
6737
|
-
|
6738
|
-
|
6739
|
-
|
6740
|
-
|
6680
|
+
const RadioGroupItem = /*#__PURE__*/React.forwardRef(function RadioGroupItem(props, ref) {
|
6681
|
+
const context = React.useContext(RadioGroupContext);
|
6682
|
+
const {
|
6683
|
+
children,
|
6684
|
+
value,
|
6685
|
+
...otherProps
|
6686
|
+
} = props;
|
6687
|
+
const isDisabled = context.disabled || props.disabled;
|
6688
|
+
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', {
|
6741
6689
|
'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,
|
6742
6690
|
'border-grey cursor-not-allowed aria-checked:bg-blue-light aria-checked:border-blue-light ': isDisabled,
|
6743
6691
|
'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
|
6744
6692
|
});
|
6745
|
-
|
6693
|
+
const labelClassName = cn('flex items-center gap-2', {
|
6746
6694
|
'cursor-pointer': !isDisabled,
|
6747
6695
|
'cursor-not-allowed text-grey-dark': isDisabled
|
6748
6696
|
}, props.className);
|
@@ -6757,38 +6705,34 @@ var RadioGroupItem = /*#__PURE__*/React.forwardRef(function RadioGroupItem(props
|
|
6757
6705
|
className: "h-2 w-2 rounded-full bg-white"
|
6758
6706
|
})), children);
|
6759
6707
|
});
|
6760
|
-
|
6761
|
-
|
6762
|
-
|
6763
|
-
|
6764
|
-
|
6765
|
-
|
6766
|
-
|
6767
|
-
|
6768
|
-
|
6769
|
-
|
6770
|
-
|
6771
|
-
|
6772
|
-
|
6773
|
-
React.Children.forEach(children,
|
6708
|
+
const useRadioGroup = props => {
|
6709
|
+
const {
|
6710
|
+
children,
|
6711
|
+
defaultValue,
|
6712
|
+
disabled,
|
6713
|
+
invalid,
|
6714
|
+
onChange,
|
6715
|
+
orientation = 'vertical',
|
6716
|
+
value,
|
6717
|
+
...otherProps
|
6718
|
+
} = props;
|
6719
|
+
const values = React.useMemo(() => {
|
6720
|
+
const radioGroupItemValues = [];
|
6721
|
+
React.Children.forEach(children, child => {
|
6774
6722
|
if (React.isValidElement(child)) {
|
6775
6723
|
radioGroupItemValues.push(child.props.value);
|
6776
6724
|
}
|
6777
6725
|
});
|
6778
6726
|
return radioGroupItemValues;
|
6779
6727
|
}, [children]);
|
6780
|
-
|
6781
|
-
|
6782
|
-
|
6783
|
-
|
6784
|
-
|
6785
|
-
}, [disabled, invalid]);
|
6786
|
-
var valueProps;
|
6728
|
+
const context = React.useMemo(() => ({
|
6729
|
+
disabled: disabled !== null && disabled !== void 0 ? disabled : false,
|
6730
|
+
invalid: invalid !== null && invalid !== void 0 ? invalid : false
|
6731
|
+
}), [disabled, invalid]);
|
6732
|
+
let valueProps;
|
6787
6733
|
|
6788
6734
|
if (onChange !== undefined) {
|
6789
|
-
|
6790
|
-
return onChange(findByValue$1(values, value));
|
6791
|
-
};
|
6735
|
+
const handleChange = value => onChange(findByValue$1(values, value));
|
6792
6736
|
|
6793
6737
|
valueProps = {
|
6794
6738
|
onValueChange: handleChange,
|
@@ -6801,19 +6745,20 @@ var useRadioGroup = function useRadioGroup(props) {
|
|
6801
6745
|
}
|
6802
6746
|
|
6803
6747
|
return {
|
6804
|
-
context
|
6805
|
-
props:
|
6806
|
-
|
6807
|
-
|
6808
|
-
|
6748
|
+
context,
|
6749
|
+
props: { ...otherProps,
|
6750
|
+
...valueProps,
|
6751
|
+
children,
|
6752
|
+
orientation
|
6753
|
+
}
|
6809
6754
|
};
|
6810
6755
|
};
|
6811
|
-
|
6812
|
-
|
6813
|
-
|
6814
|
-
|
6815
|
-
|
6816
|
-
|
6756
|
+
const RadioGroup = /*#__PURE__*/React.forwardRef(function RadioGroup(props, ref) {
|
6757
|
+
const {
|
6758
|
+
context,
|
6759
|
+
props: otherProps
|
6760
|
+
} = useRadioGroup(props);
|
6761
|
+
const className = cn('flex items-start gap-y-2', {
|
6817
6762
|
'flex-wrap gap-x-4 ': otherProps.orientation === 'horizontal',
|
6818
6763
|
'flex-col': otherProps.orientation === 'vertical'
|
6819
6764
|
}, otherProps.className);
|
@@ -6884,39 +6829,22 @@ const Header = props => {
|
|
6884
6829
|
}));
|
6885
6830
|
};
|
6886
6831
|
|
6887
|
-
|
6888
|
-
|
6889
|
-
|
6890
|
-
|
6891
|
-
|
6892
|
-
|
6893
|
-
|
6894
|
-
|
6895
|
-
|
6896
|
-
|
6897
|
-
|
6898
|
-
|
6899
|
-
|
6900
|
-
|
6901
|
-
|
6902
|
-
|
6903
|
-
_setMinWidth = _React$useState3[1];
|
6904
|
-
|
6905
|
-
var context = React.useMemo(function () {
|
6906
|
-
return {
|
6907
|
-
indented: indented,
|
6908
|
-
registerIndentation: function registerIndentation() {
|
6909
|
-
return setIndented(true);
|
6910
|
-
},
|
6911
|
-
minWidth: minWidth,
|
6912
|
-
setMinWidth: function setMinWidth(width) {
|
6913
|
-
return _setMinWidth(width);
|
6914
|
-
},
|
6915
|
-
close: function close() {
|
6916
|
-
return setOpen(false);
|
6917
|
-
}
|
6918
|
-
};
|
6919
|
-
}, [indented, minWidth]);
|
6832
|
+
const Menu$1 = externalProps => {
|
6833
|
+
const {
|
6834
|
+
children,
|
6835
|
+
trigger,
|
6836
|
+
...props
|
6837
|
+
} = externalProps;
|
6838
|
+
const [open, setOpen] = React.useState(false);
|
6839
|
+
const [indented, setIndented] = React.useState(false);
|
6840
|
+
const [minWidth, setMinWidth] = React.useState(undefined);
|
6841
|
+
const context = React.useMemo(() => ({
|
6842
|
+
indented,
|
6843
|
+
registerIndentation: () => setIndented(true),
|
6844
|
+
minWidth,
|
6845
|
+
setMinWidth: width => setMinWidth(width),
|
6846
|
+
close: () => setOpen(false)
|
6847
|
+
}), [indented, minWidth]);
|
6920
6848
|
return React.createElement(MenuContext.Provider, {
|
6921
6849
|
value: context
|
6922
6850
|
}, React.createElement(DropdownMenuPrimitive.Root, Object.assign({}, props, {
|
@@ -6934,44 +6862,39 @@ Menu$1.Separator = Separator;
|
|
6934
6862
|
Menu$1.Header = Header;
|
6935
6863
|
Menu$1.RadioGroup = RadioGroup$1;
|
6936
6864
|
|
6937
|
-
|
6938
|
-
var TreeviewItem = /*#__PURE__*/React__default.forwardRef(function TreeviewItem(props, ref) {
|
6865
|
+
const TreeviewItem = /*#__PURE__*/React__default.forwardRef(function TreeviewItem(props, ref) {
|
6939
6866
|
return React__default.createElement("a", Object.assign({}, props, {
|
6940
6867
|
ref: ref
|
6941
6868
|
}));
|
6942
6869
|
});
|
6943
|
-
|
6944
|
-
|
6945
|
-
|
6946
|
-
|
6947
|
-
|
6948
|
-
|
6949
|
-
|
6950
|
-
|
6951
|
-
|
6952
|
-
|
6953
|
-
|
6954
|
-
|
6955
|
-
setExpanded = _React$useState[1];
|
6956
|
-
|
6957
|
-
React__default.useEffect(function () {
|
6870
|
+
const TreeviewGroup = /*#__PURE__*/React__default.forwardRef(function TreeviewGroup(props, ref) {
|
6871
|
+
const {
|
6872
|
+
children,
|
6873
|
+
className: externalClassName,
|
6874
|
+
expanded: initialExpanded = false,
|
6875
|
+
title,
|
6876
|
+
fixed,
|
6877
|
+
onClick,
|
6878
|
+
...otherProps
|
6879
|
+
} = props;
|
6880
|
+
const [expanded, setExpanded] = React__default.useState(fixed || initialExpanded);
|
6881
|
+
React__default.useEffect(() => {
|
6958
6882
|
if (!fixed) {
|
6959
6883
|
setExpanded(fixed || initialExpanded);
|
6960
6884
|
}
|
6961
6885
|
}, [fixed, initialExpanded]);
|
6962
|
-
|
6886
|
+
const listClassName = cn('flex-col mb-0', {
|
6963
6887
|
flex: expanded,
|
6964
6888
|
hidden: !expanded
|
6965
6889
|
});
|
6966
|
-
|
6967
|
-
var itemProps = _extends({}, otherProps, {
|
6890
|
+
const itemProps = { ...otherProps,
|
6968
6891
|
'aria-expanded': expanded,
|
6969
6892
|
role: 'treeitem',
|
6970
6893
|
tabIndex: -1
|
6971
|
-
}
|
6894
|
+
};
|
6972
6895
|
|
6973
|
-
|
6974
|
-
|
6896
|
+
const handleClick = event => {
|
6897
|
+
const nextState = !expanded;
|
6975
6898
|
|
6976
6899
|
if (!fixed) {
|
6977
6900
|
setExpanded(nextState);
|
@@ -6982,7 +6905,7 @@ var TreeviewGroup = /*#__PURE__*/React__default.forwardRef(function TreeviewGrou
|
|
6982
6905
|
}
|
6983
6906
|
};
|
6984
6907
|
|
6985
|
-
|
6908
|
+
const className = typeof externalClassName === 'function' ? externalClassName(expanded) : externalClassName;
|
6986
6909
|
return React__default.createElement("div", Object.assign({}, itemProps, {
|
6987
6910
|
className: className,
|
6988
6911
|
ref: ref
|
@@ -6991,18 +6914,14 @@ var TreeviewGroup = /*#__PURE__*/React__default.forwardRef(function TreeviewGrou
|
|
6991
6914
|
}, typeof title === 'function' ? title(expanded) : title), React__default.createElement("ul", {
|
6992
6915
|
role: "group",
|
6993
6916
|
className: listClassName
|
6994
|
-
}, React__default.Children.toArray(children).filter(
|
6995
|
-
|
6996
|
-
|
6997
|
-
|
6998
|
-
|
6999
|
-
|
7000
|
-
}, React__default.cloneElement(item, {
|
7001
|
-
role: 'treeitem'
|
7002
|
-
}));
|
7003
|
-
})));
|
6917
|
+
}, React__default.Children.toArray(children).filter(item => !!item).map((item, i) => React__default.createElement("li", {
|
6918
|
+
key: i,
|
6919
|
+
role: "none"
|
6920
|
+
}, React__default.cloneElement(item, {
|
6921
|
+
role: 'treeitem'
|
6922
|
+
})))));
|
7004
6923
|
});
|
7005
|
-
|
6924
|
+
const Treeview = /*#__PURE__*/React__default.forwardRef(function Treeview(props, ref) {
|
7006
6925
|
return React__default.createElement("div", Object.assign({}, props, {
|
7007
6926
|
ref: ref,
|
7008
6927
|
role: "tree"
|
@@ -7048,25 +6967,20 @@ var useDropTarget = function useDropTarget(onDrop) {
|
|
7048
6967
|
return [isDraggedOver, props];
|
7049
6968
|
};
|
7050
6969
|
|
7051
|
-
|
7052
|
-
|
7053
|
-
|
7054
|
-
|
7055
|
-
|
7056
|
-
|
7057
|
-
|
7058
|
-
|
7059
|
-
|
7060
|
-
|
7061
|
-
|
7062
|
-
|
7063
|
-
|
7064
|
-
|
7065
|
-
isDraggedOver = _useDropTarget[0],
|
7066
|
-
dropTargetProps = _useDropTarget[1];
|
7067
|
-
|
7068
|
-
var isTreeitem = role === 'treeitem';
|
7069
|
-
var className = cn('yt-navigation__item cursor-pointer', {
|
6970
|
+
const Item$2 = /*#__PURE__*/React__default.forwardRef(function Item(props, ref) {
|
6971
|
+
const {
|
6972
|
+
active,
|
6973
|
+
children,
|
6974
|
+
onDrop,
|
6975
|
+
postfix,
|
6976
|
+
prefix,
|
6977
|
+
role,
|
6978
|
+
...otherProps
|
6979
|
+
} = props;
|
6980
|
+
const proxyRef = useProxiedRef(ref);
|
6981
|
+
const [isDraggedOver, dropTargetProps] = useDropTarget(onDrop);
|
6982
|
+
const isTreeitem = role === 'treeitem';
|
6983
|
+
const className = cn('yt-navigation__item cursor-pointer', {
|
7070
6984
|
'w-full mb-px py-1 px-3 flex items-center hover:bg-grey-dark': isTreeitem,
|
7071
6985
|
'bg-white w-full h-10 px-3 flex-shrink-0 flex items-center justify-between cursor-pointer': !isTreeitem,
|
7072
6986
|
'yt-navigation__item--active': active && !isDraggedOver,
|
@@ -7074,7 +6988,7 @@ var Item$2 = /*#__PURE__*/React__default.forwardRef(function Item(props, ref) {
|
|
7074
6988
|
'yt-navigation__item--dropping bg-blue': isDraggedOver
|
7075
6989
|
}, props.className);
|
7076
6990
|
|
7077
|
-
|
6991
|
+
const handleClick = event => {
|
7078
6992
|
if (event.target instanceof HTMLAnchorElement || event.target instanceof HTMLButtonElement) {
|
7079
6993
|
return;
|
7080
6994
|
}
|
@@ -7097,19 +7011,19 @@ var Item$2 = /*#__PURE__*/React__default.forwardRef(function Item(props, ref) {
|
|
7097
7011
|
className: "yt-navigation__item__postfix ml-1"
|
7098
7012
|
}, postfix));
|
7099
7013
|
});
|
7100
|
-
|
7014
|
+
const Panel = /*#__PURE__*/React__default.forwardRef(function Panel(props, ref) {
|
7101
7015
|
return React__default.createElement("div", Object.assign({}, props, {
|
7102
7016
|
className: cn('w-full bg-white p-3', props.className),
|
7103
7017
|
ref: ref
|
7104
7018
|
}));
|
7105
7019
|
});
|
7106
|
-
|
7107
|
-
|
7020
|
+
const MenuGroup = /*#__PURE__*/React__default.forwardRef(function MenuGroup(props, ref) {
|
7021
|
+
const className = cn('flex-shrink-0 space-y-1 outline-none', {
|
7108
7022
|
'bg-white pb-2': props.fixed
|
7109
7023
|
}, props.className);
|
7110
7024
|
|
7111
|
-
|
7112
|
-
|
7025
|
+
const title = expanded => {
|
7026
|
+
const className = cn('bg-white h-10 pl-3 pr-1 flex items-center justify-between w-full', {
|
7113
7027
|
'mb-1': expanded,
|
7114
7028
|
'cursor-pointer hover:text-blue': !props.fixed
|
7115
7029
|
});
|
@@ -7126,16 +7040,14 @@ var MenuGroup = /*#__PURE__*/React__default.forwardRef(function MenuGroup(props,
|
|
7126
7040
|
ref: ref
|
7127
7041
|
}));
|
7128
7042
|
});
|
7129
|
-
|
7130
|
-
|
7131
|
-
|
7132
|
-
React__default.Children.toArray(props.children).filter(
|
7133
|
-
return !!child;
|
7134
|
-
}).map(function (child) {
|
7043
|
+
const Menu$2 = /*#__PURE__*/React__default.forwardRef(function Menu(props, ref) {
|
7044
|
+
const scrollableAreas = React__default.useMemo(() => {
|
7045
|
+
const scrollableAreas = [];
|
7046
|
+
React__default.Children.toArray(props.children).filter(child => !!child).map(child => {
|
7135
7047
|
if (child.props.fixed) {
|
7136
7048
|
scrollableAreas.push(child);
|
7137
7049
|
} else {
|
7138
|
-
|
7050
|
+
const x = scrollableAreas[scrollableAreas.length - 1];
|
7139
7051
|
|
7140
7052
|
if (Array.isArray(x)) {
|
7141
7053
|
x.push(child);
|
@@ -7149,19 +7061,18 @@ var Menu$2 = /*#__PURE__*/React__default.forwardRef(function Menu(props, ref) {
|
|
7149
7061
|
return React__default.createElement(Treeview, Object.assign({}, props, {
|
7150
7062
|
className: cn('divide-grey-light flex flex-grow flex-col divide-y-2 overflow-y-auto', props.className),
|
7151
7063
|
ref: ref
|
7152
|
-
}), scrollableAreas.map(
|
7153
|
-
|
7154
|
-
|
7155
|
-
|
7156
|
-
}, area) : area;
|
7157
|
-
}));
|
7064
|
+
}), scrollableAreas.map((area, i) => Array.isArray(area) ? React__default.createElement("div", {
|
7065
|
+
className: "divide-grey-light flex h-0 flex-auto flex-shrink-0 flex-grow flex-col divide-y-2 overflow-y-auto",
|
7066
|
+
key: i
|
7067
|
+
}, area) : area));
|
7158
7068
|
});
|
7159
7069
|
Menu$2.Group = MenuGroup;
|
7160
|
-
|
7161
|
-
|
7162
|
-
|
7163
|
-
|
7164
|
-
|
7070
|
+
const Navigation = /*#__PURE__*/React__default.forwardRef(function Navigation(props, ref) {
|
7071
|
+
const {
|
7072
|
+
children,
|
7073
|
+
...otherProps
|
7074
|
+
} = props;
|
7075
|
+
const className = cn('h-full flex flex-col bg-grey-light divide-y-2 divide-grey-light', props.className);
|
7165
7076
|
return React__default.createElement("div", Object.assign({}, otherProps, {
|
7166
7077
|
className: className,
|
7167
7078
|
"data-taco": "navigation",
|
@@ -7417,54 +7328,52 @@ const useSelect = ({
|
|
7417
7328
|
};
|
7418
7329
|
};
|
7419
7330
|
|
7420
|
-
|
7421
|
-
|
7422
|
-
|
7423
|
-
|
7424
|
-
|
7425
|
-
|
7426
|
-
|
7427
|
-
|
7428
|
-
|
7429
|
-
|
7430
|
-
|
7431
|
-
|
7432
|
-
|
7433
|
-
|
7434
|
-
|
7435
|
-
|
7436
|
-
|
7437
|
-
|
7438
|
-
|
7439
|
-
var className = cn('inline-flex relative w-full', {
|
7331
|
+
const BaseSelect = /*#__PURE__*/React.forwardRef(function BaseSelect(props, ref) {
|
7332
|
+
const {
|
7333
|
+
autoFocus,
|
7334
|
+
className: externalClassName,
|
7335
|
+
highlighted,
|
7336
|
+
style,
|
7337
|
+
...otherProps
|
7338
|
+
} = props;
|
7339
|
+
const {
|
7340
|
+
button,
|
7341
|
+
listbox,
|
7342
|
+
popover,
|
7343
|
+
input,
|
7344
|
+
text,
|
7345
|
+
more = 0
|
7346
|
+
} = useSelect(otherProps, ref);
|
7347
|
+
const internalRef = React.useRef(null);
|
7348
|
+
const selectDimensions = useBoundingClientRectListener(internalRef);
|
7349
|
+
const className = cn('inline-flex relative w-full', {
|
7440
7350
|
'yt-select--readonly': props.readOnly
|
7441
7351
|
}, externalClassName);
|
7442
|
-
|
7352
|
+
const inputClassname = cn(getInputClasses(props), 'h-8 text-left pr-0', {
|
7443
7353
|
'border-blue': popover.open
|
7444
7354
|
});
|
7445
|
-
React.useEffect(
|
7355
|
+
React.useEffect(() => {
|
7446
7356
|
if (autoFocus && internalRef.current) {
|
7447
7357
|
internalRef.current.focus();
|
7448
7358
|
}
|
7449
7359
|
}, []);
|
7450
7360
|
|
7451
|
-
|
7361
|
+
const renderMultiSelection = () => {
|
7452
7362
|
return React.createElement(React.Fragment, null, React.createElement("span", {
|
7453
7363
|
className: "flex-grow truncate text-left"
|
7454
7364
|
}, text), more > 0 && React.createElement(Badge, {
|
7455
7365
|
className: "ml-2"
|
7456
|
-
},
|
7366
|
+
}, `+${more}`));
|
7457
7367
|
};
|
7458
7368
|
|
7459
|
-
|
7369
|
+
const commonListboxProps = { ...listbox,
|
7460
7370
|
className: 'w-auto',
|
7461
7371
|
invalid: undefined,
|
7462
7372
|
style: {
|
7463
7373
|
minWidth: selectDimensions === null || selectDimensions === void 0 ? void 0 : selectDimensions.width
|
7464
7374
|
},
|
7465
7375
|
tabIndex: popover.open ? 0 : -1
|
7466
|
-
}
|
7467
|
-
|
7376
|
+
};
|
7468
7377
|
return React.createElement("span", {
|
7469
7378
|
className: className,
|
7470
7379
|
"data-taco": "select",
|
@@ -7487,9 +7396,11 @@ var BaseSelect = /*#__PURE__*/React.forwardRef(function BaseSelect(props, ref) {
|
|
7487
7396
|
type: "text"
|
7488
7397
|
}))));
|
7489
7398
|
});
|
7490
|
-
|
7491
|
-
|
7492
|
-
|
7399
|
+
const Select = /*#__PURE__*/React.forwardRef(function Select(props, ref) {
|
7400
|
+
const {
|
7401
|
+
editable,
|
7402
|
+
...otherProps
|
7403
|
+
} = props;
|
7493
7404
|
|
7494
7405
|
if (editable) {
|
7495
7406
|
return React.createElement(Combobox, Object.assign({}, otherProps, {
|
@@ -7560,47 +7471,41 @@ const usePagination = (initialPageIndex = 0, initialPageSize = 10) => {
|
|
7560
7471
|
};
|
7561
7472
|
};
|
7562
7473
|
|
7563
|
-
|
7564
|
-
|
7565
|
-
|
7566
|
-
var minItemIndex = pageIndex * pageSize + 1;
|
7567
|
-
var maxItemIndex = (pageIndex + 1) * pageSize;
|
7474
|
+
const getShowingLabel = (length, pageIndex, pageSize, texts) => {
|
7475
|
+
const minItemIndex = pageIndex * pageSize + 1;
|
7476
|
+
const maxItemIndex = (pageIndex + 1) * pageSize;
|
7568
7477
|
return texts.pagination.showingXofYofTotal.replace('[X]', length === 0 ? '0' : String(minItemIndex)).replace('[Y]', String(maxItemIndex > length ? length : maxItemIndex)).replace('[total]', String(length));
|
7569
7478
|
};
|
7570
7479
|
|
7571
|
-
|
7572
|
-
|
7573
|
-
|
7574
|
-
|
7575
|
-
|
7576
|
-
|
7577
|
-
|
7578
|
-
|
7579
|
-
|
7580
|
-
|
7581
|
-
|
7582
|
-
|
7583
|
-
|
7584
|
-
|
7585
|
-
|
7586
|
-
|
7587
|
-
|
7588
|
-
|
7589
|
-
|
7590
|
-
texts = _useLocalization.texts;
|
7591
|
-
|
7592
|
-
var maxPageIndex = Math.ceil(length / pageSize) - 1;
|
7593
|
-
var showShortcutTexts = dangerouslyHijackGlobalKeyboardNavigation;
|
7480
|
+
const Pagination = /*#__PURE__*/React.forwardRef(function Pagination(props, ref) {
|
7481
|
+
const {
|
7482
|
+
length,
|
7483
|
+
pageIndex,
|
7484
|
+
pageSize,
|
7485
|
+
pageSizes = [10, 25, 50, 100, 500],
|
7486
|
+
setPageIndex,
|
7487
|
+
setPageSize,
|
7488
|
+
showPageControls = true,
|
7489
|
+
showPageNumbers = true,
|
7490
|
+
showPageSize = true,
|
7491
|
+
dangerouslyHijackGlobalKeyboardNavigation = false,
|
7492
|
+
...otherProps
|
7493
|
+
} = props;
|
7494
|
+
const {
|
7495
|
+
texts
|
7496
|
+
} = useLocalization();
|
7497
|
+
const maxPageIndex = Math.ceil(length / pageSize) - 1;
|
7498
|
+
const showShortcutTexts = dangerouslyHijackGlobalKeyboardNavigation;
|
7594
7499
|
usePaginationShortcuts({
|
7595
|
-
setPageIndex
|
7596
|
-
maxPageIndex
|
7597
|
-
pageIndex
|
7598
|
-
dangerouslyHijackGlobalKeyboardNavigation
|
7500
|
+
setPageIndex,
|
7501
|
+
maxPageIndex,
|
7502
|
+
pageIndex,
|
7503
|
+
dangerouslyHijackGlobalKeyboardNavigation
|
7599
7504
|
});
|
7600
|
-
|
7601
|
-
|
7602
|
-
|
7603
|
-
|
7505
|
+
const pageCount = Math.ceil(length / pageSize);
|
7506
|
+
const canPreviousPage = pageIndex > 0;
|
7507
|
+
const canNextPage = pageIndex < pageCount - 1;
|
7508
|
+
const className = cn('inline-flex relative justify-between items-center', props.className);
|
7604
7509
|
return React.createElement("div", Object.assign({}, otherProps, {
|
7605
7510
|
className: className,
|
7606
7511
|
"data-taco": "pagination",
|
@@ -7610,13 +7515,11 @@ var Pagination = /*#__PURE__*/React.forwardRef(function Pagination(props, ref) {
|
|
7610
7515
|
}, getShowingLabel(length, pageIndex, pageSize, texts), React.createElement(Select, {
|
7611
7516
|
"aria-label": texts.pagination.pageSize,
|
7612
7517
|
className: "ml-4 !w-20",
|
7613
|
-
data: pageSizes.map(
|
7614
|
-
|
7615
|
-
|
7616
|
-
|
7617
|
-
|
7618
|
-
}),
|
7619
|
-
onChange: function onChange(event) {
|
7518
|
+
data: pageSizes.map(pageSize => ({
|
7519
|
+
text: String(pageSize),
|
7520
|
+
value: pageSize
|
7521
|
+
})),
|
7522
|
+
onChange: event => {
|
7620
7523
|
setPageIndex(0);
|
7621
7524
|
setPageSize(Number(event.target.value));
|
7622
7525
|
},
|
@@ -7628,18 +7531,14 @@ var Pagination = /*#__PURE__*/React.forwardRef(function Pagination(props, ref) {
|
|
7628
7531
|
appearance: "default",
|
7629
7532
|
disabled: !canPreviousPage,
|
7630
7533
|
icon: "arrow-start",
|
7631
|
-
onClick:
|
7632
|
-
return setPageIndex(0);
|
7633
|
-
},
|
7534
|
+
onClick: () => setPageIndex(0),
|
7634
7535
|
"aria-label": showShortcutTexts ? texts.pagination.actions.firstPageWithShortcut : texts.pagination.actions.firstPage,
|
7635
7536
|
tooltip: showShortcutTexts ? texts.pagination.actions.firstPageWithShortcut : texts.pagination.actions.firstPage
|
7636
7537
|
}), React.createElement(IconButton, {
|
7637
7538
|
appearance: "default",
|
7638
7539
|
disabled: !canPreviousPage,
|
7639
7540
|
icon: "arrow-left",
|
7640
|
-
onClick:
|
7641
|
-
return setPageIndex(pageIndex - 1);
|
7642
|
-
},
|
7541
|
+
onClick: () => setPageIndex(pageIndex - 1),
|
7643
7542
|
"aria-label": showShortcutTexts ? texts.pagination.actions.previousPageWithShortcut : texts.pagination.actions.previousPage,
|
7644
7543
|
tooltip: showShortcutTexts ? texts.pagination.actions.previousPageWithShortcut : texts.pagination.actions.previousPage
|
7645
7544
|
}), showPageNumbers && pageCount > 0 && React.createElement(PageNumbers, {
|
@@ -7650,43 +7549,36 @@ var Pagination = /*#__PURE__*/React.forwardRef(function Pagination(props, ref) {
|
|
7650
7549
|
appearance: "default",
|
7651
7550
|
disabled: !canNextPage,
|
7652
7551
|
icon: "arrow-right",
|
7653
|
-
onClick:
|
7654
|
-
return setPageIndex(pageIndex + 1);
|
7655
|
-
},
|
7552
|
+
onClick: () => setPageIndex(pageIndex + 1),
|
7656
7553
|
"aria-label": showShortcutTexts ? texts.pagination.actions.nextPageWithShortcut : texts.pagination.actions.nextPage,
|
7657
7554
|
tooltip: showShortcutTexts ? texts.pagination.actions.nextPageWithShortcut : texts.pagination.actions.nextPage
|
7658
7555
|
}), React.createElement(IconButton, {
|
7659
7556
|
appearance: "default",
|
7660
7557
|
disabled: !canNextPage,
|
7661
7558
|
icon: "arrow-end",
|
7662
|
-
onClick:
|
7663
|
-
return setPageIndex(pageCount - 1);
|
7664
|
-
},
|
7559
|
+
onClick: () => setPageIndex(pageCount - 1),
|
7665
7560
|
"aria-label": showShortcutTexts ? texts.pagination.actions.lastPageWithShortcut : texts.pagination.actions.lastPage,
|
7666
7561
|
tooltip: showShortcutTexts ? texts.pagination.actions.lastPageWithShortcut : texts.pagination.actions.lastPage
|
7667
7562
|
})));
|
7668
7563
|
});
|
7669
7564
|
|
7670
|
-
|
7671
|
-
|
7672
|
-
|
7673
|
-
|
7674
|
-
|
7675
|
-
duration = _ref$duration === void 0 ? undefined : _ref$duration,
|
7676
|
-
props = _objectWithoutPropertiesLoose(_ref, _excluded$s);
|
7677
|
-
|
7678
|
-
var style;
|
7565
|
+
const Progress = ({
|
7566
|
+
duration = undefined,
|
7567
|
+
...props
|
7568
|
+
}) => {
|
7569
|
+
let style;
|
7679
7570
|
|
7680
7571
|
if (duration) {
|
7681
7572
|
style = {
|
7682
|
-
animationDuration: duration
|
7573
|
+
animationDuration: `${duration}ms`
|
7683
7574
|
};
|
7684
7575
|
}
|
7685
7576
|
|
7686
|
-
|
7687
|
-
|
7688
|
-
"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
|
7689
|
-
|
7577
|
+
const className = cn('bg-grey-light rounded block h-1 overflow-hidden w-full', props.className);
|
7578
|
+
const progressClassName = cn('yt-progress__bar block h-1', {
|
7579
|
+
"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,
|
7580
|
+
[`w-0 bg-grey-dark animate-[progress_linear]`]: duration
|
7581
|
+
});
|
7690
7582
|
return React__default.createElement("span", Object.assign({}, props, {
|
7691
7583
|
"data-taco": "progress",
|
7692
7584
|
className: className
|
@@ -9301,19 +9193,16 @@ const useTableRowCreation = (data, tableRef) => {
|
|
9301
9193
|
};
|
9302
9194
|
};
|
9303
9195
|
|
9304
|
-
|
9305
|
-
|
9306
|
-
|
9307
|
-
|
9308
|
-
|
9309
|
-
|
9310
|
-
|
9311
|
-
|
9312
|
-
|
9313
|
-
|
9314
|
-
otherProps = _objectWithoutPropertiesLoose(props, _excluded$t);
|
9315
|
-
|
9316
|
-
var className = cn('yt-tabs', "yt-tabs--" + orientation, {
|
9196
|
+
const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(props, ref) {
|
9197
|
+
const {
|
9198
|
+
id,
|
9199
|
+
defaultId,
|
9200
|
+
children,
|
9201
|
+
onChange,
|
9202
|
+
orientation = 'horizontal',
|
9203
|
+
...otherProps
|
9204
|
+
} = props;
|
9205
|
+
const className = cn('yt-tabs', `yt-tabs--${orientation}`, {
|
9317
9206
|
'flex w-full': orientation === 'vertical'
|
9318
9207
|
}, props.className);
|
9319
9208
|
return React.createElement(TabsPrimitive.Root, Object.assign({}, otherProps, {
|
@@ -9327,19 +9216,20 @@ var Tabs = /*#__PURE__*/React.forwardRef(function Tabs(props, ref) {
|
|
9327
9216
|
value: id
|
9328
9217
|
}), children);
|
9329
9218
|
});
|
9330
|
-
|
9331
|
-
|
9219
|
+
const TabList = /*#__PURE__*/React.forwardRef(function Tab(props, ref) {
|
9220
|
+
const className = cn('yt-tab__list border-b border-grey-light flex flex-row m-0 mb-4', props.className);
|
9332
9221
|
return React.createElement(TabsPrimitive.List, Object.assign({}, props, {
|
9333
9222
|
className: className,
|
9334
9223
|
ref: ref
|
9335
9224
|
}));
|
9336
9225
|
});
|
9337
|
-
|
9338
|
-
|
9339
|
-
|
9340
|
-
|
9341
|
-
|
9342
|
-
|
9226
|
+
const TabTrigger = /*#__PURE__*/React.forwardRef(function Tab(props, ref) {
|
9227
|
+
const {
|
9228
|
+
id,
|
9229
|
+
disabled,
|
9230
|
+
...otherProps
|
9231
|
+
} = props;
|
9232
|
+
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);
|
9343
9233
|
return React.createElement(TabsPrimitive.Trigger, Object.assign({}, otherProps, {
|
9344
9234
|
className: className,
|
9345
9235
|
disabled: disabled,
|
@@ -9350,11 +9240,12 @@ var TabTrigger = /*#__PURE__*/React.forwardRef(function Tab(props, ref) {
|
|
9350
9240
|
value: id
|
9351
9241
|
}));
|
9352
9242
|
});
|
9353
|
-
|
9354
|
-
|
9355
|
-
|
9356
|
-
|
9357
|
-
|
9243
|
+
const TabContent = /*#__PURE__*/React.forwardRef(function Tab(props, ref) {
|
9244
|
+
const {
|
9245
|
+
id,
|
9246
|
+
...otherProps
|
9247
|
+
} = props;
|
9248
|
+
const className = cn('yt-tab__panel outline-none', props.className);
|
9358
9249
|
return React.createElement(TabsPrimitive.Content, Object.assign({}, otherProps, {
|
9359
9250
|
className: className,
|
9360
9251
|
ref: ref,
|
@@ -9365,19 +9256,22 @@ Tabs.List = TabList;
|
|
9365
9256
|
Tabs.Trigger = TabTrigger;
|
9366
9257
|
Tabs.Content = TabContent;
|
9367
9258
|
|
9368
|
-
|
9369
|
-
|
9370
|
-
|
9371
|
-
|
9372
|
-
|
9373
|
-
|
9259
|
+
const Textarea = /*#__PURE__*/React.forwardRef(function Textarea(props, ref) {
|
9260
|
+
const {
|
9261
|
+
defaultValue: _,
|
9262
|
+
highlighted,
|
9263
|
+
invalid,
|
9264
|
+
onKeyDown,
|
9265
|
+
...otherProps
|
9266
|
+
} = props;
|
9267
|
+
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
|
9374
9268
|
// if it has scroll height then the browser reverts to native scrolling behaviour only
|
9375
9269
|
// so we manually override it to ensure _our_ desired behaviour remains intact
|
9376
9270
|
|
9377
|
-
|
9271
|
+
const handleKeyDown = event => {
|
9378
9272
|
if (event.key === 'Home' || event.key === 'End') {
|
9379
9273
|
event.preventDefault();
|
9380
|
-
|
9274
|
+
const position = event.key === 'End' ? event.currentTarget.value.length : 0;
|
9381
9275
|
event.currentTarget.setSelectionRange(position, position);
|
9382
9276
|
event.currentTarget.scrollTop = event.key === 'End' ? event.currentTarget.scrollHeight : 0;
|
9383
9277
|
}
|
@@ -9395,18 +9289,18 @@ var Textarea = /*#__PURE__*/React.forwardRef(function Textarea(props, ref) {
|
|
9395
9289
|
}));
|
9396
9290
|
});
|
9397
9291
|
|
9398
|
-
|
9399
|
-
|
9400
|
-
|
9401
|
-
|
9402
|
-
|
9403
|
-
|
9404
|
-
|
9292
|
+
const Switch = /*#__PURE__*/React.forwardRef(function Switch(props, ref) {
|
9293
|
+
const {
|
9294
|
+
label,
|
9295
|
+
onChange,
|
9296
|
+
...otherProps
|
9297
|
+
} = props;
|
9298
|
+
const className = cn('group h-5 w-9 flex rounded-full inline-flex', {
|
9405
9299
|
'mr-2': !!label,
|
9406
9300
|
'bg-grey-darker hover:bg-grey-dark aria-checked:bg-blue aria-checked:hover:bg-blue-light focus:yt-focus': !props.disabled,
|
9407
9301
|
'bg-grey-light cursor-not-allowed aria-checked:bg-blue-light': props.disabled
|
9408
9302
|
}, props.className);
|
9409
|
-
|
9303
|
+
const element = React.createElement(PrimitiveSwitch.Root, Object.assign({}, otherProps, {
|
9410
9304
|
className: className,
|
9411
9305
|
onCheckedChange: onChange,
|
9412
9306
|
ref: ref
|
@@ -9415,7 +9309,7 @@ var Switch = /*#__PURE__*/React.forwardRef(function Switch(props, ref) {
|
|
9415
9309
|
}));
|
9416
9310
|
|
9417
9311
|
if (label) {
|
9418
|
-
|
9312
|
+
const labelClassName = cn('flex items-center cursor-pointer', {
|
9419
9313
|
'cursor-not-allowed text-grey-dark': props.disabled
|
9420
9314
|
});
|
9421
9315
|
return React.createElement("label", {
|
@@ -9426,23 +9320,22 @@ var Switch = /*#__PURE__*/React.forwardRef(function Switch(props, ref) {
|
|
9426
9320
|
return element;
|
9427
9321
|
});
|
9428
9322
|
|
9429
|
-
|
9430
|
-
|
9431
|
-
|
9432
|
-
|
9433
|
-
|
9434
|
-
|
9435
|
-
|
9436
|
-
|
9437
|
-
|
9438
|
-
|
9439
|
-
|
9440
|
-
|
9441
|
-
|
9442
|
-
|
9443
|
-
|
9444
|
-
|
9445
|
-
var onWindowKeyDown = function onWindowKeyDown(event) {
|
9323
|
+
const Tooltip$1 = ({
|
9324
|
+
continuous,
|
9325
|
+
index,
|
9326
|
+
isLastStep,
|
9327
|
+
step,
|
9328
|
+
backProps,
|
9329
|
+
primaryProps,
|
9330
|
+
skipProps,
|
9331
|
+
tooltipProps,
|
9332
|
+
size,
|
9333
|
+
locale,
|
9334
|
+
disableTourSkipOnEsc
|
9335
|
+
}) => {
|
9336
|
+
const skipButtonRef = React.useRef(null);
|
9337
|
+
React.useEffect(() => {
|
9338
|
+
const onWindowKeyDown = event => {
|
9446
9339
|
if (!disableTourSkipOnEsc) {
|
9447
9340
|
if (event.keyCode === keycode('esc') && skipButtonRef.current !== null) {
|
9448
9341
|
event.preventDefault();
|
@@ -9453,7 +9346,7 @@ var Tooltip$1 = function Tooltip(_ref) {
|
|
9453
9346
|
};
|
9454
9347
|
|
9455
9348
|
window.addEventListener('keydown', onWindowKeyDown);
|
9456
|
-
return
|
9349
|
+
return () => {
|
9457
9350
|
window.removeEventListener('keydown', onWindowKeyDown);
|
9458
9351
|
};
|
9459
9352
|
}, []);
|
@@ -9472,31 +9365,31 @@ var Tooltip$1 = function Tooltip(_ref) {
|
|
9472
9365
|
appearance: "discrete"
|
9473
9366
|
}), locale.back), React.createElement(Button$1, Object.assign({}, primaryProps, {
|
9474
9367
|
appearance: "primary"
|
9475
|
-
}), continuous ? isLastStep ? locale.last
|
9368
|
+
}), continuous ? isLastStep ? `${locale.last} (${index + 1}/${size})` : `${locale.next} (${index + 1}/${size})` : locale.close)));
|
9476
9369
|
}; // eslint-disable-next-line @typescript-eslint/no-unused-vars
|
9477
9370
|
|
9478
9371
|
|
9479
|
-
|
9480
|
-
|
9481
|
-
|
9482
|
-
|
9483
|
-
|
9484
|
-
|
9485
|
-
|
9486
|
-
|
9487
|
-
|
9488
|
-
|
9489
|
-
|
9490
|
-
|
9491
|
-
|
9492
|
-
|
9493
|
-
|
9494
|
-
|
9495
|
-
|
9496
|
-
|
9497
|
-
|
9498
|
-
return React.Children.map(props.children,
|
9499
|
-
|
9372
|
+
const TourStep = _props => null;
|
9373
|
+
const Tour = props => {
|
9374
|
+
const {
|
9375
|
+
texts: {
|
9376
|
+
tour
|
9377
|
+
}
|
9378
|
+
} = useLocalization();
|
9379
|
+
const {
|
9380
|
+
autoStart: run,
|
9381
|
+
onComplete,
|
9382
|
+
onClose,
|
9383
|
+
onReady,
|
9384
|
+
spotlightClicks,
|
9385
|
+
disableCloseOnEsc: disableTourSkipOnEsc,
|
9386
|
+
disableScrollParentFix = false,
|
9387
|
+
scrollOffset,
|
9388
|
+
...rest
|
9389
|
+
} = props;
|
9390
|
+
const steps = React.useMemo(() => {
|
9391
|
+
return React.Children.map(props.children, child => {
|
9392
|
+
const step = {
|
9500
9393
|
disableBeacon: !child.props.showBeacon,
|
9501
9394
|
target: child.props.selector,
|
9502
9395
|
placement: child.props.position,
|
@@ -9506,12 +9399,10 @@ var Tour = function Tour(props) {
|
|
9506
9399
|
return step;
|
9507
9400
|
});
|
9508
9401
|
}, [props.children]);
|
9509
|
-
|
9402
|
+
const getStep = React.useCallback(selector => {
|
9510
9403
|
var _props$children$find;
|
9511
9404
|
|
9512
|
-
return (_props$children$find = props.children.find(
|
9513
|
-
return child.props.selector === selector;
|
9514
|
-
})) === null || _props$children$find === void 0 ? void 0 : _props$children$find.props;
|
9405
|
+
return (_props$children$find = props.children.find(child => child.props.selector === selector)) === null || _props$children$find === void 0 ? void 0 : _props$children$find.props;
|
9515
9406
|
}, [props.children]);
|
9516
9407
|
|
9517
9408
|
function callback(state) {
|
@@ -9541,12 +9432,10 @@ var Tour = function Tour(props) {
|
|
9541
9432
|
floaterProps: {
|
9542
9433
|
disableAnimation: true
|
9543
9434
|
},
|
9544
|
-
tooltipComponent:
|
9545
|
-
|
9546
|
-
|
9547
|
-
|
9548
|
-
}));
|
9549
|
-
},
|
9435
|
+
tooltipComponent: tooltipProps => React.createElement(Tooltip$1, Object.assign({}, tooltipProps, {
|
9436
|
+
locale: tour,
|
9437
|
+
disableTourSkipOnEsc: disableTourSkipOnEsc
|
9438
|
+
})),
|
9550
9439
|
locale: tour,
|
9551
9440
|
spotlightPadding: 8,
|
9552
9441
|
spotlightClicks: spotlightClicks,
|
@@ -9588,10 +9477,10 @@ var useOnClickOutside = function useOnClickOutside(ref, callback) {
|
|
9588
9477
|
}, [ref, callback]);
|
9589
9478
|
};
|
9590
9479
|
|
9591
|
-
var _excluded$
|
9480
|
+
var _excluded$e = ["noPadding"];
|
9592
9481
|
var Content$6 = /*#__PURE__*/React.forwardRef(function CardContent(externalProps, ref) {
|
9593
9482
|
var noPadding = externalProps.noPadding,
|
9594
|
-
props = _objectWithoutPropertiesLoose(externalProps, _excluded$
|
9483
|
+
props = _objectWithoutPropertiesLoose(externalProps, _excluded$e);
|
9595
9484
|
|
9596
9485
|
var className = cn('flex-grow overflow-auto', {
|
9597
9486
|
'mx-4 mb-4': !noPadding
|