@economic/taco 0.0.31-alpha.2 → 0.0.32-alpha.0
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/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/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/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 +495 -611
- 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, {
|
@@ -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
|
-
}
|
3904
|
-
}
|
3905
|
-
}, React.createElement(Toast, Object.assign({}, toast, {
|
3906
|
-
onClose: function onClose() {
|
3907
|
-
return handleClose(toast.id);
|
3872
|
+
duration: 0.2
|
3908
3873
|
}
|
3909
|
-
}
|
3910
|
-
}
|
3911
|
-
|
3912
|
-
|
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,14 +4203,14 @@ 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
|
-
var _excluded$
|
4206
|
+
var _excluded$7 = ["button", "icon", "highlighted", "invalid", "onKeyDown", "autoFocus"];
|
4247
4207
|
var Input = /*#__PURE__*/React.forwardRef(function Input(props, ref) {
|
4248
4208
|
var button = props.button,
|
4249
4209
|
icon = props.icon,
|
4250
4210
|
invalid = props.invalid,
|
4251
4211
|
onKeyDown = props.onKeyDown,
|
4252
4212
|
autoFocus = props.autoFocus,
|
4253
|
-
otherProps = _objectWithoutPropertiesLoose(props, _excluded$
|
4213
|
+
otherProps = _objectWithoutPropertiesLoose(props, _excluded$7);
|
4254
4214
|
|
4255
4215
|
var inputRef = useProxiedRef(ref);
|
4256
4216
|
var hasContainer = button || icon;
|
@@ -5083,12 +5043,12 @@ var useBoundingClientRectListener = function useBoundingClientRectListener(ref)
|
|
5083
5043
|
return dimensions;
|
5084
5044
|
};
|
5085
5045
|
|
5086
|
-
var _excluded$
|
5046
|
+
var _excluded$8 = ["className", "dialog", "style"];
|
5087
5047
|
var Combobox = /*#__PURE__*/React.forwardRef(function Combobox(props, ref) {
|
5088
5048
|
var externalClassName = props.className,
|
5089
5049
|
dialog = props.dialog,
|
5090
5050
|
style = props.style,
|
5091
|
-
otherProps = _objectWithoutPropertiesLoose(props, _excluded$
|
5051
|
+
otherProps = _objectWithoutPropertiesLoose(props, _excluded$8);
|
5092
5052
|
|
5093
5053
|
var _useCombobox = useCombobox(otherProps, ref),
|
5094
5054
|
combobox = _useCombobox.combobox,
|
@@ -5380,19 +5340,18 @@ function mergeRefs(refs) {
|
|
5380
5340
|
};
|
5381
5341
|
}
|
5382
5342
|
|
5383
|
-
|
5384
|
-
var PopoverContext = /*#__PURE__*/React.createContext({
|
5343
|
+
const PopoverContext = /*#__PURE__*/React.createContext({
|
5385
5344
|
props: {},
|
5386
5345
|
ref: null
|
5387
5346
|
});
|
5388
|
-
|
5347
|
+
const Trigger$1 = /*#__PURE__*/React.forwardRef(function PopoverTrigger(props, ref) {
|
5389
5348
|
var _props$children;
|
5390
5349
|
|
5391
|
-
|
5392
|
-
|
5350
|
+
const context = React.useContext(PopoverContext);
|
5351
|
+
let children = props.children;
|
5393
5352
|
|
5394
5353
|
if (React.isValidElement(props.children) && typeof ((_props$children = props.children) === null || _props$children === void 0 ? void 0 : _props$children.type) === 'function') {
|
5395
|
-
console.warn(
|
5354
|
+
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
5355
|
children = React.createElement("span", null, props.children);
|
5397
5356
|
}
|
5398
5357
|
|
@@ -5402,22 +5361,22 @@ var Trigger$1 = /*#__PURE__*/React.forwardRef(function PopoverTrigger(props, ref
|
|
5402
5361
|
asChild: true
|
5403
5362
|
}));
|
5404
5363
|
});
|
5405
|
-
|
5406
|
-
|
5407
|
-
|
5408
|
-
|
5409
|
-
|
5364
|
+
const RenderPropWrapper = /*#__PURE__*/React.forwardRef(function RenderPropWrapper({
|
5365
|
+
children,
|
5366
|
+
onClick
|
5367
|
+
}, ref) {
|
5368
|
+
const close = () => {
|
5410
5369
|
onClick(new CustomEvent('hide'));
|
5411
5370
|
};
|
5412
5371
|
|
5413
5372
|
return children({
|
5414
|
-
close
|
5415
|
-
ref
|
5373
|
+
close,
|
5374
|
+
ref
|
5416
5375
|
});
|
5417
5376
|
});
|
5418
|
-
|
5419
|
-
|
5420
|
-
|
5377
|
+
const Content$1 = /*#__PURE__*/React.forwardRef(function PopoverContent(props, ref) {
|
5378
|
+
const className = cn('bg-white focus:border-blue-light', props.className);
|
5379
|
+
let output;
|
5421
5380
|
|
5422
5381
|
if (typeof props.children === 'function') {
|
5423
5382
|
output = React.createElement(PopoverPrimitive.Close, {
|
@@ -5435,23 +5394,20 @@ var Content$1 = /*#__PURE__*/React.forwardRef(function PopoverContent(props, ref
|
|
5435
5394
|
className: "text-white"
|
5436
5395
|
}));
|
5437
5396
|
});
|
5438
|
-
|
5439
|
-
|
5440
|
-
|
5441
|
-
|
5442
|
-
|
5443
|
-
|
5444
|
-
|
5445
|
-
|
5446
|
-
|
5447
|
-
|
5448
|
-
|
5449
|
-
|
5450
|
-
|
5451
|
-
|
5452
|
-
ref: ref
|
5453
|
-
};
|
5454
|
-
}, [otherProps]);
|
5397
|
+
const Close$1 = /*#__PURE__*/React.forwardRef((props, ref) => React.createElement(PopoverPrimitive.Close, Object.assign({}, props, {
|
5398
|
+
ref: ref,
|
5399
|
+
asChild: true
|
5400
|
+
})));
|
5401
|
+
const Popover = /*#__PURE__*/React.forwardRef(function Popover(props, ref) {
|
5402
|
+
const {
|
5403
|
+
children,
|
5404
|
+
trigger,
|
5405
|
+
...otherProps
|
5406
|
+
} = props;
|
5407
|
+
const context = React.useMemo(() => ({
|
5408
|
+
props: otherProps,
|
5409
|
+
ref
|
5410
|
+
}), [otherProps]);
|
5455
5411
|
return React.createElement(PopoverContext.Provider, {
|
5456
5412
|
value: context
|
5457
5413
|
}, React.createElement(PopoverPrimitive.Root, null, trigger && React.createElement(Trigger$1, null, trigger), children));
|
@@ -5460,7 +5416,7 @@ Popover.Trigger = Trigger$1;
|
|
5460
5416
|
Popover.Content = Content$1;
|
5461
5417
|
Popover.Close = Close$1;
|
5462
5418
|
|
5463
|
-
var _excluded$
|
5419
|
+
var _excluded$9 = ["className", "onReset", "style", "shortcuts", "shortcutsText"];
|
5464
5420
|
var Datepicker = /*#__PURE__*/React.forwardRef(function Datepicker(props, ref) {
|
5465
5421
|
var _input$disabled;
|
5466
5422
|
|
@@ -5469,7 +5425,7 @@ var Datepicker = /*#__PURE__*/React.forwardRef(function Datepicker(props, ref) {
|
|
5469
5425
|
style = props.style,
|
5470
5426
|
shortcuts = props.shortcuts,
|
5471
5427
|
shortcutsText = props.shortcutsText,
|
5472
|
-
otherProps = _objectWithoutPropertiesLoose(props, _excluded$
|
5428
|
+
otherProps = _objectWithoutPropertiesLoose(props, _excluded$9);
|
5473
5429
|
|
5474
5430
|
var _useDatepicker = useDatepicker(otherProps, ref),
|
5475
5431
|
calendar = _useDatepicker.calendar,
|
@@ -5764,7 +5720,7 @@ const Extra = /*#__PURE__*/React.forwardRef(function DialogExtra(props, ref) {
|
|
5764
5720
|
});
|
5765
5721
|
Extra.displayName = 'DialogExtra';
|
5766
5722
|
|
5767
|
-
var _excluded$
|
5723
|
+
var _excluded$a = ["children", "closeOnEscape", "defaultOpen", "draggable", "onChange", "onClose", "open", "showCloseButton", "size", "trigger"];
|
5768
5724
|
|
5769
5725
|
var useSeparatedChildren = function useSeparatedChildren(initialChildren) {
|
5770
5726
|
return React.useMemo(function () {
|
@@ -5801,7 +5757,7 @@ var Dialog = /*#__PURE__*/React.forwardRef(function Dialog(props, ref) {
|
|
5801
5757
|
_props$size = props.size,
|
5802
5758
|
size = _props$size === void 0 ? 'sm' : _props$size,
|
5803
5759
|
trigger = props.trigger,
|
5804
|
-
otherProps = _objectWithoutPropertiesLoose(props, _excluded$
|
5760
|
+
otherProps = _objectWithoutPropertiesLoose(props, _excluded$a);
|
5805
5761
|
|
5806
5762
|
var _useSeparatedChildren = useSeparatedChildren(initialChildren),
|
5807
5763
|
children = _useSeparatedChildren[0],
|
@@ -5851,14 +5807,14 @@ Dialog.Extra = Extra;
|
|
5851
5807
|
Dialog.Drawer = Drawer;
|
5852
5808
|
Dialog.Close = Close$2;
|
5853
5809
|
|
5854
|
-
var _excluded$
|
5810
|
+
var _excluded$b = ["disabled", "children", "invalid", "message"];
|
5855
5811
|
var Field = /*#__PURE__*/React.forwardRef(function Field(props, ref) {
|
5856
5812
|
var disabled = props.disabled,
|
5857
5813
|
children = props.children,
|
5858
5814
|
_props$invalid = props.invalid,
|
5859
5815
|
invalid = _props$invalid === void 0 ? false : _props$invalid,
|
5860
5816
|
message = props.message,
|
5861
|
-
otherProps = _objectWithoutPropertiesLoose(props, _excluded$
|
5817
|
+
otherProps = _objectWithoutPropertiesLoose(props, _excluded$b);
|
5862
5818
|
|
5863
5819
|
var className = cn('flex flex-col font-bold text-xs leading-loose pb-4 min-h-[theme(spacing.18)]', {
|
5864
5820
|
'text-grey-dark': disabled
|
@@ -5878,11 +5834,11 @@ var Field = /*#__PURE__*/React.forwardRef(function Field(props, ref) {
|
|
5878
5834
|
}, message));
|
5879
5835
|
});
|
5880
5836
|
|
5881
|
-
var _excluded$
|
5837
|
+
var _excluded$c = ["horizontal"];
|
5882
5838
|
var Form = /*#__PURE__*/React.forwardRef(function Form(props, ref) {
|
5883
5839
|
var _props$horizontal = props.horizontal,
|
5884
5840
|
horizontal = _props$horizontal === void 0 ? false : _props$horizontal,
|
5885
|
-
otherProps = _objectWithoutPropertiesLoose(props, _excluded$
|
5841
|
+
otherProps = _objectWithoutPropertiesLoose(props, _excluded$c);
|
5886
5842
|
|
5887
5843
|
var className = cn('yt-form', {
|
5888
5844
|
'yt-form--horizontal flex flex-wrap': horizontal
|
@@ -5894,11 +5850,11 @@ var Form = /*#__PURE__*/React.forwardRef(function Form(props, ref) {
|
|
5894
5850
|
}));
|
5895
5851
|
});
|
5896
5852
|
|
5897
|
-
var _excluded$
|
5853
|
+
var _excluded$d = ["as"];
|
5898
5854
|
var Group = /*#__PURE__*/React.forwardRef(function Group(props, ref) {
|
5899
5855
|
var _props$as = props.as,
|
5900
5856
|
Tag = _props$as === void 0 ? 'span' : _props$as,
|
5901
|
-
otherProps = _objectWithoutPropertiesLoose(props, _excluded$
|
5857
|
+
otherProps = _objectWithoutPropertiesLoose(props, _excluded$d);
|
5902
5858
|
|
5903
5859
|
var className = cn('flex ', props.className);
|
5904
5860
|
return React.createElement(Tag, Object.assign({}, otherProps, {
|
@@ -5908,7 +5864,7 @@ var Group = /*#__PURE__*/React.forwardRef(function Group(props, ref) {
|
|
5908
5864
|
}));
|
5909
5865
|
});
|
5910
5866
|
|
5911
|
-
var _excluded$
|
5867
|
+
var _excluded$e = ["anchor", "children", "defaultOpen"];
|
5912
5868
|
var HangerContext = /*#__PURE__*/React.createContext({
|
5913
5869
|
props: {},
|
5914
5870
|
ref: null
|
@@ -5965,7 +5921,7 @@ var Hanger = /*#__PURE__*/React.forwardRef(function Hanger(props, ref) {
|
|
5965
5921
|
children = props.children,
|
5966
5922
|
_props$defaultOpen = props.defaultOpen,
|
5967
5923
|
defaultOpen = _props$defaultOpen === void 0 ? true : _props$defaultOpen,
|
5968
|
-
otherProps = _objectWithoutPropertiesLoose(props, _excluded$
|
5924
|
+
otherProps = _objectWithoutPropertiesLoose(props, _excluded$e);
|
5969
5925
|
|
5970
5926
|
var context = React.useMemo(function () {
|
5971
5927
|
return {
|
@@ -6337,49 +6293,49 @@ const useMultiListbox = ({
|
|
6337
6293
|
};
|
6338
6294
|
};
|
6339
6295
|
|
6340
|
-
|
6341
|
-
|
6342
|
-
|
6343
|
-
|
6344
|
-
|
6345
|
-
|
6346
|
-
|
6347
|
-
|
6348
|
-
|
6349
|
-
|
6350
|
-
var className = cn('bg-white inline-flex relative w-full', externalClassName);
|
6296
|
+
const Listbox = /*#__PURE__*/React.forwardRef(function Listbox(props, ref) {
|
6297
|
+
const {
|
6298
|
+
className: externalClassName,
|
6299
|
+
...otherProps
|
6300
|
+
} = props;
|
6301
|
+
const {
|
6302
|
+
list,
|
6303
|
+
input
|
6304
|
+
} = useListbox(otherProps, ref);
|
6305
|
+
const className = cn('bg-white inline-flex relative w-full', externalClassName);
|
6351
6306
|
return React.createElement("span", {
|
6352
6307
|
"data-taco": "listbox",
|
6353
6308
|
className: className
|
6354
6309
|
}, React.createElement(ScrollableList, Object.assign({}, list, {
|
6355
|
-
style:
|
6310
|
+
style: { ...list.style,
|
6356
6311
|
maxHeight: 'calc(12rem + 2px)'
|
6357
6312
|
/* (6 * option height) + listbox border */
|
6358
6313
|
|
6359
|
-
}
|
6314
|
+
}
|
6360
6315
|
})), React.createElement("input", Object.assign({}, input, {
|
6361
6316
|
className: "hidden",
|
6362
6317
|
type: "text"
|
6363
6318
|
})));
|
6364
6319
|
});
|
6365
|
-
|
6366
|
-
|
6367
|
-
|
6368
|
-
|
6369
|
-
|
6370
|
-
|
6371
|
-
|
6372
|
-
|
6373
|
-
|
6320
|
+
const MultiListbox = /*#__PURE__*/React.forwardRef(function Listbox(props, ref) {
|
6321
|
+
const {
|
6322
|
+
className: externalClassName,
|
6323
|
+
...otherProps
|
6324
|
+
} = props;
|
6325
|
+
const {
|
6326
|
+
list,
|
6327
|
+
input
|
6328
|
+
} = useMultiListbox(otherProps, ref);
|
6329
|
+
const className = cn('bg-white inline-flex relative w-full', externalClassName);
|
6374
6330
|
return React.createElement("span", {
|
6375
6331
|
"data-taco": "listbox",
|
6376
6332
|
className: className
|
6377
6333
|
}, React.createElement(ScrollableList, Object.assign({}, list, {
|
6378
|
-
style:
|
6334
|
+
style: { ...list.style,
|
6379
6335
|
maxHeight: 'calc(12rem + 2px + 2px)'
|
6380
6336
|
/* (6 * option height) + listbox border + ALL_OPTIONS bottom border */
|
6381
6337
|
|
6382
|
-
}
|
6338
|
+
}
|
6383
6339
|
})), React.createElement("input", Object.assign({}, input, {
|
6384
6340
|
className: "hidden",
|
6385
6341
|
type: "text"
|
@@ -6642,34 +6598,26 @@ const Checkbox$1 = props => {
|
|
6642
6598
|
})), children);
|
6643
6599
|
};
|
6644
6600
|
|
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({
|
6601
|
+
const getRadioGroupItemValueAsString = value => value === null ? '' : String(value);
|
6602
|
+
const findByValue$1 = (values, valueAsString) => values.find(value => getRadioGroupItemValueAsString(value) === valueAsString);
|
6603
|
+
const RadioGroupContext = /*#__PURE__*/React.createContext({
|
6656
6604
|
disabled: false,
|
6657
6605
|
invalid: false
|
6658
6606
|
});
|
6659
|
-
|
6660
|
-
|
6661
|
-
|
6662
|
-
|
6663
|
-
|
6664
|
-
|
6665
|
-
|
6666
|
-
|
6667
|
-
|
6607
|
+
const RadioGroupItem = /*#__PURE__*/React.forwardRef(function RadioGroupItem(props, ref) {
|
6608
|
+
const context = React.useContext(RadioGroupContext);
|
6609
|
+
const {
|
6610
|
+
children,
|
6611
|
+
value,
|
6612
|
+
...otherProps
|
6613
|
+
} = props;
|
6614
|
+
const disabled = context.disabled || props.disabled;
|
6615
|
+
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
6616
|
'border-grey-dark focus:border-blue focus:yt-focus aria-checked:bg-blue aria-checked:border-blue': !disabled && !context.invalid,
|
6669
6617
|
'border-grey cursor-not-allowed aria-checked:bg-grey-dark aria-checked:border-grey-dark': disabled,
|
6670
6618
|
'border-red text-red focus:border-red focus:yt-focus-red aria-checked:bg-red aria-checked:border-red': context.invalid && !disabled
|
6671
6619
|
});
|
6672
|
-
|
6620
|
+
const labelClassName = cn('flex items-center cursor-pointer', {
|
6673
6621
|
'cursor-not-allowed text-grey-dark': disabled
|
6674
6622
|
}, props.className);
|
6675
6623
|
return React.createElement("label", {
|
@@ -6683,38 +6631,34 @@ var RadioGroupItem = /*#__PURE__*/React.forwardRef(function RadioGroupItem(props
|
|
6683
6631
|
className: "h-2 w-2 rounded-full bg-white"
|
6684
6632
|
})), children);
|
6685
6633
|
});
|
6686
|
-
|
6687
|
-
|
6688
|
-
|
6689
|
-
|
6690
|
-
|
6691
|
-
|
6692
|
-
|
6693
|
-
|
6694
|
-
|
6695
|
-
|
6696
|
-
|
6697
|
-
|
6698
|
-
|
6699
|
-
React.Children.forEach(children,
|
6634
|
+
const useRadioGroup = props => {
|
6635
|
+
const {
|
6636
|
+
children,
|
6637
|
+
defaultValue,
|
6638
|
+
disabled,
|
6639
|
+
invalid,
|
6640
|
+
onChange,
|
6641
|
+
orientation = 'vertical',
|
6642
|
+
value,
|
6643
|
+
...otherProps
|
6644
|
+
} = props;
|
6645
|
+
const values = React.useMemo(() => {
|
6646
|
+
const radioGroupItemValues = [];
|
6647
|
+
React.Children.forEach(children, child => {
|
6700
6648
|
if (React.isValidElement(child)) {
|
6701
6649
|
radioGroupItemValues.push(child.props.value);
|
6702
6650
|
}
|
6703
6651
|
});
|
6704
6652
|
return radioGroupItemValues;
|
6705
6653
|
}, [children]);
|
6706
|
-
|
6707
|
-
|
6708
|
-
|
6709
|
-
|
6710
|
-
|
6711
|
-
}, [disabled, invalid]);
|
6712
|
-
var valueProps;
|
6654
|
+
const context = React.useMemo(() => ({
|
6655
|
+
disabled: disabled !== null && disabled !== void 0 ? disabled : false,
|
6656
|
+
invalid: invalid !== null && invalid !== void 0 ? invalid : false
|
6657
|
+
}), [disabled, invalid]);
|
6658
|
+
let valueProps;
|
6713
6659
|
|
6714
6660
|
if (onChange !== undefined) {
|
6715
|
-
|
6716
|
-
return onChange(findByValue$1(values, value));
|
6717
|
-
};
|
6661
|
+
const handleChange = value => onChange(findByValue$1(values, value));
|
6718
6662
|
|
6719
6663
|
valueProps = {
|
6720
6664
|
onValueChange: handleChange,
|
@@ -6727,19 +6671,20 @@ var useRadioGroup = function useRadioGroup(props) {
|
|
6727
6671
|
}
|
6728
6672
|
|
6729
6673
|
return {
|
6730
|
-
context
|
6731
|
-
props:
|
6732
|
-
|
6733
|
-
|
6734
|
-
|
6674
|
+
context,
|
6675
|
+
props: { ...otherProps,
|
6676
|
+
...valueProps,
|
6677
|
+
children,
|
6678
|
+
orientation
|
6679
|
+
}
|
6735
6680
|
};
|
6736
6681
|
};
|
6737
|
-
|
6738
|
-
|
6739
|
-
|
6740
|
-
|
6741
|
-
|
6742
|
-
|
6682
|
+
const RadioGroup = /*#__PURE__*/React.forwardRef(function RadioGroup(props, ref) {
|
6683
|
+
const {
|
6684
|
+
context,
|
6685
|
+
props: otherProps
|
6686
|
+
} = useRadioGroup(props);
|
6687
|
+
const className = cn('flex items-start', {
|
6743
6688
|
'flex-wrap space-x-4': otherProps.orientation === 'horizontal',
|
6744
6689
|
'flex-col space-y-2': otherProps.orientation === 'vertical'
|
6745
6690
|
}, otherProps.className);
|
@@ -6852,48 +6797,26 @@ const Header = props => {
|
|
6852
6797
|
}));
|
6853
6798
|
};
|
6854
6799
|
|
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]);
|
6800
|
+
const Menu = externalProps => {
|
6801
|
+
const {
|
6802
|
+
appearance: externalAppearance,
|
6803
|
+
children,
|
6804
|
+
trigger,
|
6805
|
+
...props
|
6806
|
+
} = externalProps;
|
6807
|
+
const [open, setOpen] = React.useState(false);
|
6808
|
+
const [appearance, setAppearance] = React.useState(externalAppearance !== null && externalAppearance !== void 0 ? externalAppearance : 'default');
|
6809
|
+
const [indented, setIndented] = React.useState(false);
|
6810
|
+
const [minWidth, setMinWidth] = React.useState(undefined);
|
6811
|
+
const context = React.useMemo(() => ({
|
6812
|
+
appearance,
|
6813
|
+
setAppearance: appearance => setAppearance(appearance),
|
6814
|
+
indented,
|
6815
|
+
registerIndentation: () => setIndented(true),
|
6816
|
+
minWidth,
|
6817
|
+
setMinWidth: width => setMinWidth(width),
|
6818
|
+
close: () => setOpen(false)
|
6819
|
+
}), [indented, minWidth, appearance]);
|
6897
6820
|
return React.createElement(MenuContext.Provider, {
|
6898
6821
|
value: context
|
6899
6822
|
}, React.createElement(DropdownMenuPrimitive.Root, Object.assign({}, props, {
|
@@ -6911,44 +6834,39 @@ Menu.Separator = Separator;
|
|
6911
6834
|
Menu.Header = Header;
|
6912
6835
|
Menu.RadioGroup = RadioGroup$1;
|
6913
6836
|
|
6914
|
-
|
6915
|
-
var TreeviewItem = /*#__PURE__*/React__default.forwardRef(function TreeviewItem(props, ref) {
|
6837
|
+
const TreeviewItem = /*#__PURE__*/React__default.forwardRef(function TreeviewItem(props, ref) {
|
6916
6838
|
return React__default.createElement("a", Object.assign({}, props, {
|
6917
6839
|
ref: ref
|
6918
6840
|
}));
|
6919
6841
|
});
|
6920
|
-
|
6921
|
-
|
6922
|
-
|
6923
|
-
|
6924
|
-
|
6925
|
-
|
6926
|
-
|
6927
|
-
|
6928
|
-
|
6929
|
-
|
6930
|
-
|
6931
|
-
|
6932
|
-
setExpanded = _React$useState[1];
|
6933
|
-
|
6934
|
-
React__default.useEffect(function () {
|
6842
|
+
const TreeviewGroup = /*#__PURE__*/React__default.forwardRef(function TreeviewGroup(props, ref) {
|
6843
|
+
const {
|
6844
|
+
children,
|
6845
|
+
className: externalClassName,
|
6846
|
+
expanded: initialExpanded = false,
|
6847
|
+
title,
|
6848
|
+
fixed,
|
6849
|
+
onClick,
|
6850
|
+
...otherProps
|
6851
|
+
} = props;
|
6852
|
+
const [expanded, setExpanded] = React__default.useState(fixed || initialExpanded);
|
6853
|
+
React__default.useEffect(() => {
|
6935
6854
|
if (!fixed) {
|
6936
6855
|
setExpanded(fixed || initialExpanded);
|
6937
6856
|
}
|
6938
6857
|
}, [fixed, initialExpanded]);
|
6939
|
-
|
6858
|
+
const listClassName = cn('flex-col mb-0', {
|
6940
6859
|
flex: expanded,
|
6941
6860
|
hidden: !expanded
|
6942
6861
|
});
|
6943
|
-
|
6944
|
-
var itemProps = _extends({}, otherProps, {
|
6862
|
+
const itemProps = { ...otherProps,
|
6945
6863
|
'aria-expanded': expanded,
|
6946
6864
|
role: 'treeitem',
|
6947
6865
|
tabIndex: -1
|
6948
|
-
}
|
6866
|
+
};
|
6949
6867
|
|
6950
|
-
|
6951
|
-
|
6868
|
+
const handleClick = event => {
|
6869
|
+
const nextState = !expanded;
|
6952
6870
|
|
6953
6871
|
if (!fixed) {
|
6954
6872
|
setExpanded(nextState);
|
@@ -6959,7 +6877,7 @@ var TreeviewGroup = /*#__PURE__*/React__default.forwardRef(function TreeviewGrou
|
|
6959
6877
|
}
|
6960
6878
|
};
|
6961
6879
|
|
6962
|
-
|
6880
|
+
const className = typeof externalClassName === 'function' ? externalClassName(expanded) : externalClassName;
|
6963
6881
|
return React__default.createElement("div", Object.assign({}, itemProps, {
|
6964
6882
|
className: className,
|
6965
6883
|
ref: ref
|
@@ -6968,18 +6886,14 @@ var TreeviewGroup = /*#__PURE__*/React__default.forwardRef(function TreeviewGrou
|
|
6968
6886
|
}, typeof title === 'function' ? title(expanded) : title), React__default.createElement("ul", {
|
6969
6887
|
role: "group",
|
6970
6888
|
className: listClassName
|
6971
|
-
}, React__default.Children.toArray(children).filter(
|
6972
|
-
|
6973
|
-
|
6974
|
-
|
6975
|
-
|
6976
|
-
|
6977
|
-
}, React__default.cloneElement(item, {
|
6978
|
-
role: 'treeitem'
|
6979
|
-
}));
|
6980
|
-
})));
|
6889
|
+
}, React__default.Children.toArray(children).filter(item => !!item).map((item, i) => React__default.createElement("li", {
|
6890
|
+
key: i,
|
6891
|
+
role: "none"
|
6892
|
+
}, React__default.cloneElement(item, {
|
6893
|
+
role: 'treeitem'
|
6894
|
+
})))));
|
6981
6895
|
});
|
6982
|
-
|
6896
|
+
const Treeview = /*#__PURE__*/React__default.forwardRef(function Treeview(props, ref) {
|
6983
6897
|
return React__default.createElement("div", Object.assign({}, props, {
|
6984
6898
|
ref: ref,
|
6985
6899
|
role: "tree"
|
@@ -7022,25 +6936,20 @@ const useDropTarget = onDrop => {
|
|
7022
6936
|
return [isDraggedOver, props];
|
7023
6937
|
};
|
7024
6938
|
|
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', {
|
6939
|
+
const Item$2 = /*#__PURE__*/React__default.forwardRef(function Item(props, ref) {
|
6940
|
+
const {
|
6941
|
+
active,
|
6942
|
+
children,
|
6943
|
+
onDrop,
|
6944
|
+
postfix,
|
6945
|
+
prefix,
|
6946
|
+
role,
|
6947
|
+
...otherProps
|
6948
|
+
} = props;
|
6949
|
+
const proxyRef = useProxiedRef(ref);
|
6950
|
+
const [isDraggedOver, dropTargetProps] = useDropTarget(onDrop);
|
6951
|
+
const isTreeitem = role === 'treeitem';
|
6952
|
+
const className = cn('yt-navigation__item cursor-pointer', {
|
7044
6953
|
'w-full mb-px py-1 px-3 flex items-center hover:bg-grey-dark': isTreeitem,
|
7045
6954
|
'bg-white w-full h-10 px-3 flex-shrink-0 flex items-center justify-between cursor-pointer': !isTreeitem,
|
7046
6955
|
'yt-navigation__item--active': active && !isDraggedOver,
|
@@ -7048,7 +6957,7 @@ var Item$2 = /*#__PURE__*/React__default.forwardRef(function Item(props, ref) {
|
|
7048
6957
|
'yt-navigation__item--dropping bg-blue': isDraggedOver
|
7049
6958
|
}, props.className);
|
7050
6959
|
|
7051
|
-
|
6960
|
+
const handleClick = event => {
|
7052
6961
|
if (event.target instanceof HTMLAnchorElement || event.target instanceof HTMLButtonElement) {
|
7053
6962
|
return;
|
7054
6963
|
}
|
@@ -7071,19 +6980,19 @@ var Item$2 = /*#__PURE__*/React__default.forwardRef(function Item(props, ref) {
|
|
7071
6980
|
className: "yt-navigation__item__postfix ml-1"
|
7072
6981
|
}, postfix));
|
7073
6982
|
});
|
7074
|
-
|
6983
|
+
const Panel = /*#__PURE__*/React__default.forwardRef(function Panel(props, ref) {
|
7075
6984
|
return React__default.createElement("div", Object.assign({}, props, {
|
7076
6985
|
className: cn('w-full bg-white p-3', props.className),
|
7077
6986
|
ref: ref
|
7078
6987
|
}));
|
7079
6988
|
});
|
7080
|
-
|
7081
|
-
|
6989
|
+
const MenuGroup = /*#__PURE__*/React__default.forwardRef(function MenuGroup(props, ref) {
|
6990
|
+
const className = cn('flex-shrink-0 space-y-1 outline-none', {
|
7082
6991
|
'bg-white pb-2': props.fixed
|
7083
6992
|
}, props.className);
|
7084
6993
|
|
7085
|
-
|
7086
|
-
|
6994
|
+
const title = expanded => {
|
6995
|
+
const className = cn('bg-white h-10 pl-3 pr-1 flex items-center justify-between w-full', {
|
7087
6996
|
'mb-1': expanded,
|
7088
6997
|
'cursor-pointer hover:text-blue': !props.fixed
|
7089
6998
|
});
|
@@ -7100,16 +7009,14 @@ var MenuGroup = /*#__PURE__*/React__default.forwardRef(function MenuGroup(props,
|
|
7100
7009
|
ref: ref
|
7101
7010
|
}));
|
7102
7011
|
});
|
7103
|
-
|
7104
|
-
|
7105
|
-
|
7106
|
-
React__default.Children.toArray(props.children).filter(
|
7107
|
-
return !!child;
|
7108
|
-
}).map(function (child) {
|
7012
|
+
const Menu$1 = /*#__PURE__*/React__default.forwardRef(function Menu(props, ref) {
|
7013
|
+
const scrollableAreas = React__default.useMemo(() => {
|
7014
|
+
const scrollableAreas = [];
|
7015
|
+
React__default.Children.toArray(props.children).filter(child => !!child).map(child => {
|
7109
7016
|
if (child.props.fixed) {
|
7110
7017
|
scrollableAreas.push(child);
|
7111
7018
|
} else {
|
7112
|
-
|
7019
|
+
const x = scrollableAreas[scrollableAreas.length - 1];
|
7113
7020
|
|
7114
7021
|
if (Array.isArray(x)) {
|
7115
7022
|
x.push(child);
|
@@ -7123,19 +7030,18 @@ var Menu$1 = /*#__PURE__*/React__default.forwardRef(function Menu(props, ref) {
|
|
7123
7030
|
return React__default.createElement(Treeview, Object.assign({}, props, {
|
7124
7031
|
className: cn('divide-grey-light flex flex-grow flex-col divide-y-2 overflow-y-auto', props.className),
|
7125
7032
|
ref: ref
|
7126
|
-
}), scrollableAreas.map(
|
7127
|
-
|
7128
|
-
|
7129
|
-
|
7130
|
-
}, area) : area;
|
7131
|
-
}));
|
7033
|
+
}), scrollableAreas.map((area, i) => Array.isArray(area) ? React__default.createElement("div", {
|
7034
|
+
className: "divide-grey-light flex h-0 flex-auto flex-shrink-0 flex-grow flex-col divide-y-2 overflow-y-auto",
|
7035
|
+
key: i
|
7036
|
+
}, area) : area));
|
7132
7037
|
});
|
7133
7038
|
Menu$1.Group = MenuGroup;
|
7134
|
-
|
7135
|
-
|
7136
|
-
|
7137
|
-
|
7138
|
-
|
7039
|
+
const Navigation = /*#__PURE__*/React__default.forwardRef(function Navigation(props, ref) {
|
7040
|
+
const {
|
7041
|
+
children,
|
7042
|
+
...otherProps
|
7043
|
+
} = props;
|
7044
|
+
const className = cn('h-full flex flex-col bg-grey-light divide-y-2 divide-grey-light', props.className);
|
7139
7045
|
return React__default.createElement("div", Object.assign({}, otherProps, {
|
7140
7046
|
className: className,
|
7141
7047
|
"data-taco": "navigation",
|
@@ -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,10 +9424,10 @@ var useOnClickOutside = function useOnClickOutside(ref, callback) {
|
|
9540
9424
|
}, [ref, callback]);
|
9541
9425
|
};
|
9542
9426
|
|
9543
|
-
var _excluded$
|
9427
|
+
var _excluded$f = ["onSearch"];
|
9544
9428
|
var SearchInput = /*#__PURE__*/React.forwardRef(function SearchInput(_ref, ref) {
|
9545
9429
|
var onSearch = _ref.onSearch,
|
9546
|
-
props = _objectWithoutPropertiesLoose(_ref, _excluded$
|
9430
|
+
props = _objectWithoutPropertiesLoose(_ref, _excluded$f);
|
9547
9431
|
|
9548
9432
|
var _useLocalization = useLocalization(),
|
9549
9433
|
texts = _useLocalization.texts;
|