@allxsmith/bestax-bulma 4.0.0 → 5.0.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/index.cjs.js +200 -234
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.esm.js +200 -234
- package/dist/index.esm.js.map +1 -1
- package/package.json +5 -11
- package/dist/versions/bestax-bulma-prefixed.css +0 -3
- package/dist/versions/bestax-bulma-prefixed.css.map +0 -1
- package/dist/versions/bestax-bulma-prefixed.js +0 -1
- package/src/scss/versions/bestax-bulma-prefixed.scss +0 -15
package/dist/index.cjs.js
CHANGED
|
@@ -762,7 +762,7 @@ const CardComponent = ({ className, children, textColor, bgColor, hasShadow = tr
|
|
|
762
762
|
'is-centered': headerCentered,
|
|
763
763
|
}), children: header })), headerIcon] }));
|
|
764
764
|
};
|
|
765
|
-
return (jsxRuntime.jsxs("div", { className: cardClasses, ...rest, children: [renderHeader(header, headerIcon, headerCentered, classPrefix), image && (jsxRuntime.jsx("div", { className: prefixedClassNames(classPrefix, 'card-image'), children: typeof image === 'string' ? (jsxRuntime.jsx("figure", { className: prefixedClassNames(classPrefix, 'image'), children: jsxRuntime.jsx("img", { src: image, alt: imageAlt
|
|
765
|
+
return (jsxRuntime.jsxs("div", { className: cardClasses, ...rest, children: [renderHeader(header, headerIcon, headerCentered, classPrefix), image && (jsxRuntime.jsx("div", { className: prefixedClassNames(classPrefix, 'card-image'), children: typeof image === 'string' ? (jsxRuntime.jsx("figure", { className: prefixedClassNames(classPrefix, 'image'), children: jsxRuntime.jsx("img", { src: image, alt: imageAlt ?? 'Card image' }) })) : (image) })), typeof children !== 'undefined' &&
|
|
766
766
|
children !== null &&
|
|
767
767
|
children !== '' &&
|
|
768
768
|
!hasCompoundComponents(children) && (jsxRuntime.jsx("div", { className: prefixedClassNames(classPrefix, 'card-content'), children: children })), typeof children !== 'undefined' &&
|
|
@@ -825,10 +825,9 @@ const DropdownComponent = ({ label, children, className, menuClassName, active:
|
|
|
825
825
|
if (!isBrowser$1(window, document))
|
|
826
826
|
return;
|
|
827
827
|
const handleClick = (e) => {
|
|
828
|
-
|
|
829
|
-
if (!((_a = dropdownRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
|
|
828
|
+
if (!dropdownRef.current?.contains(e.target)) {
|
|
830
829
|
setActive(false);
|
|
831
|
-
onActiveChange
|
|
830
|
+
onActiveChange?.(false);
|
|
832
831
|
}
|
|
833
832
|
};
|
|
834
833
|
document.addEventListener('mousedown', handleClick);
|
|
@@ -839,12 +838,12 @@ const DropdownComponent = ({ label, children, className, menuClassName, active:
|
|
|
839
838
|
return;
|
|
840
839
|
const newActive = !active;
|
|
841
840
|
setActive(newActive);
|
|
842
|
-
onActiveChange
|
|
841
|
+
onActiveChange?.(newActive);
|
|
843
842
|
};
|
|
844
843
|
const handleMenuClick = () => {
|
|
845
844
|
if (closeOnClick) {
|
|
846
845
|
setActive(false);
|
|
847
|
-
onActiveChange
|
|
846
|
+
onActiveChange?.(false);
|
|
848
847
|
}
|
|
849
848
|
};
|
|
850
849
|
const dropdownClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
|
|
@@ -965,14 +964,13 @@ const ModalClose = ({ className, size = 'large', variant = 'delete', ...props })
|
|
|
965
964
|
return (jsxRuntime.jsx("button", { className: classes, "aria-label": "close", type: "button", ...props }));
|
|
966
965
|
};
|
|
967
966
|
const ModalRoot = ({ active, isActive, onClose, className, textColor, bgColor, modalCardTitle, modalCardFoot, type, children, ...props }) => {
|
|
968
|
-
var _a;
|
|
969
967
|
const { classPrefix } = useConfig();
|
|
970
968
|
const { bulmaHelperClasses, rest } = useBulmaClasses({
|
|
971
969
|
color: textColor,
|
|
972
970
|
backgroundColor: bgColor,
|
|
973
971
|
...props,
|
|
974
972
|
});
|
|
975
|
-
const isModalActive =
|
|
973
|
+
const isModalActive = active ?? isActive ?? false;
|
|
976
974
|
const hasCompoundComponents = React.Children.toArray(children).some(child => React.isValidElement(child) &&
|
|
977
975
|
(child.type === ModalBackground ||
|
|
978
976
|
child.type === ModalContent ||
|
|
@@ -1033,13 +1031,12 @@ const NavbarItem = ({ className, as: Component = 'a', active, textColor, bgColor
|
|
|
1033
1031
|
}), bulmaHelperClasses, className), ...rest, children: children }));
|
|
1034
1032
|
};
|
|
1035
1033
|
const NavbarBurger = ({ className, active, children, ...props }) => {
|
|
1036
|
-
var _a;
|
|
1037
1034
|
const { bulmaHelperClasses, rest } = useBulmaClasses({
|
|
1038
1035
|
...props,
|
|
1039
1036
|
});
|
|
1040
1037
|
return (jsxRuntime.jsxs("button", { type: "button", className: classNames(usePrefixedClassNames('navbar-burger', {
|
|
1041
1038
|
'is-active': active,
|
|
1042
|
-
}), bulmaHelperClasses, className), "aria-label": props['aria-label'] || 'menu', "aria-expanded":
|
|
1039
|
+
}), bulmaHelperClasses, className), "aria-label": props['aria-label'] || 'menu', "aria-expanded": props['aria-expanded'] ?? !!active, ...rest, children: [jsxRuntime.jsx("span", { "aria-hidden": "true" }), jsxRuntime.jsx("span", { "aria-hidden": "true" }), jsxRuntime.jsx("span", { "aria-hidden": "true" }), children] }));
|
|
1043
1040
|
};
|
|
1044
1041
|
const NavbarMenu = ({ className, active, children, ...props }) => {
|
|
1045
1042
|
const { bulmaHelperClasses, rest } = useBulmaClasses({
|
|
@@ -1353,7 +1350,7 @@ const Tabs = ({ align, size, fullwidth, boxed, toggle, rounded, color, value, on
|
|
|
1353
1350
|
if (!isControlled) {
|
|
1354
1351
|
setInternalTab(index);
|
|
1355
1352
|
}
|
|
1356
|
-
onChange
|
|
1353
|
+
onChange?.(index);
|
|
1357
1354
|
}, [isControlled, onChange]);
|
|
1358
1355
|
const contextValue = { activeTab, setActiveTab };
|
|
1359
1356
|
const tabsClasses = usePrefixedClassNames('tabs', {
|
|
@@ -1523,10 +1520,10 @@ const Collapse = ({ open: controlledOpen, defaultOpen = false, onOpen, onClose,
|
|
|
1523
1520
|
const newOpen = !internalOpen;
|
|
1524
1521
|
setInternalOpen(newOpen);
|
|
1525
1522
|
if (newOpen) {
|
|
1526
|
-
onOpen
|
|
1523
|
+
onOpen?.();
|
|
1527
1524
|
}
|
|
1528
1525
|
else {
|
|
1529
|
-
onClose
|
|
1526
|
+
onClose?.();
|
|
1530
1527
|
}
|
|
1531
1528
|
}
|
|
1532
1529
|
}, [isControlled, internalOpen, onOpen, onClose]);
|
|
@@ -1745,7 +1742,7 @@ const Step = ({ isActive = false, isCompleted = false, label, icon, clickable =
|
|
|
1745
1742
|
const markerContent = icon ||
|
|
1746
1743
|
(isCompleted && resolvedCompletedIcon
|
|
1747
1744
|
? resolvedCompletedIcon
|
|
1748
|
-
: (stepNumber
|
|
1745
|
+
: (stepNumber ?? null));
|
|
1749
1746
|
return (jsxRuntime.jsx("li", { className: stepClasses, onClick: handleClick, onKeyDown: handleKeyDown, tabIndex: clickable ? 0 : undefined, role: clickable ? 'button' : undefined, "aria-current": isActive ? 'step' : undefined, ...rest, children: jsxRuntime.jsxs("div", { className: "steps-link", children: [jsxRuntime.jsx("span", { className: "steps-marker", children: markerContent }), (label || children) && (jsxRuntime.jsx("div", { className: "steps-content", children: jsxRuntime.jsx("p", { className: "steps-title", children: label || children }) }))] }) }));
|
|
1750
1747
|
};
|
|
1751
1748
|
const Steps = ({ value = 0, items, size, color, hasMarker = true, animated = true, rounded = true, vertical = false, labelPosition = 'bottom', mobileMode, showStepNumbers = true, hasNavigation = false, prevLabel, nextLabel, onPrev, onNext, onStepClick, className, children, ...props }) => {
|
|
@@ -1786,7 +1783,7 @@ const Steps = ({ value = 0, items, size, color, hasMarker = true, animated = tru
|
|
|
1786
1783
|
}
|
|
1787
1784
|
return null;
|
|
1788
1785
|
};
|
|
1789
|
-
return (jsxRuntime.jsxs("div", { className: combinedClasses, ...rest, children: [jsxRuntime.jsx("ul", { className: listClasses, children: renderSteps() }), hasNavigation && (jsxRuntime.jsxs("div", { className: "steps-navigation", children: [jsxRuntime.jsx("button", { className: "button", disabled: value === 0, onClick: onPrev
|
|
1786
|
+
return (jsxRuntime.jsxs("div", { className: combinedClasses, ...rest, children: [jsxRuntime.jsx("ul", { className: listClasses, children: renderSteps() }), hasNavigation && (jsxRuntime.jsxs("div", { className: "steps-navigation", children: [jsxRuntime.jsx("button", { className: "button", disabled: value === 0, onClick: onPrev ?? (() => onStepClick?.(value - 1)), children: prevLabel ?? 'Previous' }), jsxRuntime.jsx("button", { className: "button is-primary", disabled: value === totalSteps - 1, onClick: onNext ?? (() => onStepClick?.(value + 1)), children: nextLabel ?? 'Next' })] }))] }));
|
|
1790
1787
|
};
|
|
1791
1788
|
Steps.Step = Step;
|
|
1792
1789
|
|
|
@@ -1907,10 +1904,10 @@ const Toast = React.forwardRef(({ message, type = 'default', actionType, positio
|
|
|
1907
1904
|
const toastRef = React.useRef(null);
|
|
1908
1905
|
const handleClose = React.useCallback(() => {
|
|
1909
1906
|
setIsVisible(false);
|
|
1910
|
-
onClose
|
|
1907
|
+
onClose?.();
|
|
1911
1908
|
}, [onClose]);
|
|
1912
1909
|
const handleAction = React.useCallback(() => {
|
|
1913
|
-
onAction
|
|
1910
|
+
onAction?.();
|
|
1914
1911
|
handleClose();
|
|
1915
1912
|
}, [onAction, handleClose]);
|
|
1916
1913
|
React.useEffect(() => {
|
|
@@ -2097,11 +2094,11 @@ const Dialog = React.forwardRef(({ isOpen, title, message, type = 'default', con
|
|
|
2097
2094
|
const cancelRef = React.useRef(null);
|
|
2098
2095
|
const handleCancel = React.useCallback(() => {
|
|
2099
2096
|
if (canCancel) {
|
|
2100
|
-
onCancel
|
|
2097
|
+
onCancel?.();
|
|
2101
2098
|
}
|
|
2102
2099
|
}, [canCancel, onCancel]);
|
|
2103
2100
|
const handleConfirm = React.useCallback(() => {
|
|
2104
|
-
onConfirm
|
|
2101
|
+
onConfirm?.();
|
|
2105
2102
|
}, [onConfirm]);
|
|
2106
2103
|
const handleBackgroundClick = React.useCallback(() => {
|
|
2107
2104
|
if (canCancel) {
|
|
@@ -2122,7 +2119,7 @@ const Dialog = React.forwardRef(({ isOpen, title, message, type = 'default', con
|
|
|
2122
2119
|
React.useEffect(() => {
|
|
2123
2120
|
if (isOpen) {
|
|
2124
2121
|
const buttonToFocus = focusCancel && showCancel ? cancelRef.current : confirmRef.current;
|
|
2125
|
-
buttonToFocus
|
|
2122
|
+
buttonToFocus?.focus();
|
|
2126
2123
|
}
|
|
2127
2124
|
}, [isOpen, focusCancel, showCancel]);
|
|
2128
2125
|
React.useEffect(() => {
|
|
@@ -2322,7 +2319,7 @@ const Carousel = React.forwardRef(({ value: controlledValue, autoplay = false, i
|
|
|
2322
2319
|
if (syncDisplay) {
|
|
2323
2320
|
setDisplayIndex(newIndex);
|
|
2324
2321
|
}
|
|
2325
|
-
onChange
|
|
2322
|
+
onChange?.(newIndex);
|
|
2326
2323
|
}, [controlledValue, itemCount, repeat, onChange]);
|
|
2327
2324
|
const goToPrev = React.useCallback(() => {
|
|
2328
2325
|
if (activeIndex === 0 && repeat && itemCount > 1) {
|
|
@@ -2410,8 +2407,7 @@ const Carousel = React.forwardRef(({ value: controlledValue, autoplay = false, i
|
|
|
2410
2407
|
}, [handleDragEnd]);
|
|
2411
2408
|
React.useEffect(() => {
|
|
2412
2409
|
const handleKeyDown = (e) => {
|
|
2413
|
-
|
|
2414
|
-
if (!((_a = carouselRef.current) === null || _a === void 0 ? void 0 : _a.contains(document.activeElement)))
|
|
2410
|
+
if (!carouselRef.current?.contains(document.activeElement))
|
|
2415
2411
|
return;
|
|
2416
2412
|
switch (e.key) {
|
|
2417
2413
|
case 'ArrowLeft':
|
|
@@ -3117,17 +3113,16 @@ const Checkbox = React.forwardRef(({ color, size, className, children, textColor
|
|
|
3117
3113
|
...props,
|
|
3118
3114
|
});
|
|
3119
3115
|
const group = useCheckboxesGroup();
|
|
3120
|
-
const effectiveName = name
|
|
3121
|
-
const groupManaged =
|
|
3116
|
+
const effectiveName = name ?? group?.name;
|
|
3117
|
+
const groupManaged = group?.value !== undefined && value !== undefined;
|
|
3122
3118
|
const groupHas = groupManaged && group.value.includes(String(value));
|
|
3123
3119
|
const effectiveChecked = checked !== undefined ? checked : groupManaged ? groupHas : undefined;
|
|
3124
3120
|
const effectiveDefaultChecked = groupManaged ? undefined : defaultChecked;
|
|
3125
3121
|
const handleChange = React.useCallback((e) => {
|
|
3126
|
-
|
|
3127
|
-
|
|
3128
|
-
if ((group === null || group === void 0 ? void 0 : group.onChange) && value !== undefined) {
|
|
3122
|
+
onChange?.(e);
|
|
3123
|
+
if (group?.onChange && value !== undefined) {
|
|
3129
3124
|
const valStr = String(value);
|
|
3130
|
-
const currentArr =
|
|
3125
|
+
const currentArr = group.value ?? [];
|
|
3131
3126
|
const next = e.target.checked
|
|
3132
3127
|
? currentArr.includes(valStr)
|
|
3133
3128
|
? currentArr
|
|
@@ -3188,29 +3183,23 @@ const Field = ({ horizontal, grouped, hasAddons, narrow, label, labelSize, label
|
|
|
3188
3183
|
'is-grouped-multiline': grouped === 'multiline',
|
|
3189
3184
|
});
|
|
3190
3185
|
const fieldClass = classNames(mainClass, bulmaHelperClasses, className);
|
|
3191
|
-
const effectiveLabelSize = labelSize
|
|
3186
|
+
const effectiveLabelSize = labelSize ?? (horizontal ? 'normal' : undefined);
|
|
3192
3187
|
const labelClass = usePrefixedClassNames('label');
|
|
3193
3188
|
let renderedLabel = null;
|
|
3194
3189
|
if (label) {
|
|
3195
3190
|
if (horizontal) {
|
|
3196
|
-
renderedLabel = (jsxRuntime.jsx(FieldLabel, { size: effectiveLabelSize, children: jsxRuntime.jsx("label", { ...labelProps, className: classNames(labelClass, labelProps
|
|
3191
|
+
renderedLabel = (jsxRuntime.jsx(FieldLabel, { size: effectiveLabelSize, children: jsxRuntime.jsx("label", { ...labelProps, className: classNames(labelClass, labelProps?.className), style: labelProps?.style, children: label }) }));
|
|
3197
3192
|
}
|
|
3198
3193
|
else {
|
|
3199
|
-
renderedLabel = (jsxRuntime.jsx("label", { ...labelProps, className: classNames(labelClass, labelProps
|
|
3194
|
+
renderedLabel = (jsxRuntime.jsx("label", { ...labelProps, className: classNames(labelClass, labelProps?.className), style: { display: 'block', ...(labelProps?.style || {}) }, children: label }));
|
|
3200
3195
|
}
|
|
3201
3196
|
}
|
|
3202
3197
|
let content = children;
|
|
3203
3198
|
if (horizontal) {
|
|
3204
|
-
const isFieldBody = (c) =>
|
|
3205
|
-
|
|
3206
|
-
|
|
3207
|
-
|
|
3208
|
-
};
|
|
3209
|
-
const isFieldLabel = (c) => {
|
|
3210
|
-
var _a;
|
|
3211
|
-
return React.isValidElement(c) &&
|
|
3212
|
-
(c.type === FieldLabel || ((_a = c.type) === null || _a === void 0 ? void 0 : _a.displayName) === 'FieldLabel');
|
|
3213
|
-
};
|
|
3199
|
+
const isFieldBody = (c) => React.isValidElement(c) &&
|
|
3200
|
+
(c.type === FieldBody || c.type?.displayName === 'FieldBody');
|
|
3201
|
+
const isFieldLabel = (c) => React.isValidElement(c) &&
|
|
3202
|
+
(c.type === FieldLabel || c.type?.displayName === 'FieldLabel');
|
|
3214
3203
|
const childArray = React.Children.toArray(children);
|
|
3215
3204
|
const userProvidedStructure = childArray.some(c => isFieldBody(c) || isFieldLabel(c));
|
|
3216
3205
|
if (userProvidedStructure) {
|
|
@@ -3288,7 +3277,7 @@ const Checkboxes = ({ label, labelSize, labelProps, horizontal, message, message
|
|
|
3288
3277
|
const handleChange = React.useCallback((newValues) => {
|
|
3289
3278
|
if (!isControlled)
|
|
3290
3279
|
setInternalValue(newValues);
|
|
3291
|
-
onChange
|
|
3280
|
+
onChange?.(newValues);
|
|
3292
3281
|
}, [isControlled, onChange]);
|
|
3293
3282
|
const ctx = React.useMemo(() => ({
|
|
3294
3283
|
name,
|
|
@@ -3357,8 +3346,8 @@ const Radio = React.forwardRef(({ color, size, className, children, textColor, d
|
|
|
3357
3346
|
...props,
|
|
3358
3347
|
});
|
|
3359
3348
|
const group = useRadiosGroup();
|
|
3360
|
-
const effectiveName = name
|
|
3361
|
-
const groupManaged =
|
|
3349
|
+
const effectiveName = name ?? group?.name;
|
|
3350
|
+
const groupManaged = group?.value !== undefined && value !== undefined;
|
|
3362
3351
|
const effectiveChecked = checked !== undefined
|
|
3363
3352
|
? checked
|
|
3364
3353
|
: groupManaged
|
|
@@ -3366,8 +3355,8 @@ const Radio = React.forwardRef(({ color, size, className, children, textColor, d
|
|
|
3366
3355
|
: undefined;
|
|
3367
3356
|
const effectiveDefaultChecked = groupManaged ? undefined : defaultChecked;
|
|
3368
3357
|
const handleChange = React.useCallback((e) => {
|
|
3369
|
-
onChange
|
|
3370
|
-
if (
|
|
3358
|
+
onChange?.(e);
|
|
3359
|
+
if (group?.onChange && value !== undefined) {
|
|
3371
3360
|
group.onChange(String(value));
|
|
3372
3361
|
}
|
|
3373
3362
|
}, [onChange, group, value]);
|
|
@@ -3399,7 +3388,7 @@ const Radios = ({ label, labelSize, labelProps, horizontal, message, messageColo
|
|
|
3399
3388
|
const handleChange = React.useCallback((newValue) => {
|
|
3400
3389
|
if (!isControlled)
|
|
3401
3390
|
setInternalValue(newValue);
|
|
3402
|
-
onChange
|
|
3391
|
+
onChange?.(newValue);
|
|
3403
3392
|
}, [isControlled, onChange]);
|
|
3404
3393
|
const ctx = React.useMemo(() => ({
|
|
3405
3394
|
name,
|
|
@@ -3465,7 +3454,6 @@ function getTickPositions(min, max, step, ticks, marks) {
|
|
|
3465
3454
|
return positions;
|
|
3466
3455
|
}
|
|
3467
3456
|
const Slider = React.forwardRef((props, ref) => {
|
|
3468
|
-
var _a, _b, _c;
|
|
3469
3457
|
let range;
|
|
3470
3458
|
let controlledValue;
|
|
3471
3459
|
let defaultValue;
|
|
@@ -3480,7 +3468,7 @@ const Slider = React.forwardRef((props, ref) => {
|
|
|
3480
3468
|
defaultValue = props.defaultValue;
|
|
3481
3469
|
onChange = props.onChange;
|
|
3482
3470
|
ariaLabel = props.ariaLabel;
|
|
3483
|
-
minDistance =
|
|
3471
|
+
minDistance = props.minDistance ?? 0;
|
|
3484
3472
|
nameLow = props.nameLow;
|
|
3485
3473
|
nameHigh = props.nameHigh;
|
|
3486
3474
|
}
|
|
@@ -3495,9 +3483,9 @@ const Slider = React.forwardRef((props, ref) => {
|
|
|
3495
3483
|
const insideField = useInsideField();
|
|
3496
3484
|
const insideControl = useInsideControl();
|
|
3497
3485
|
const { bulmaHelperClasses, rest } = useBulmaClasses(restProps);
|
|
3498
|
-
const tooltipMode = tooltip
|
|
3499
|
-
const [internalRange, setInternalRange] = React.useState(() =>
|
|
3500
|
-
const [internalSingle, setInternalSingle] = React.useState(() =>
|
|
3486
|
+
const tooltipMode = tooltip ?? (showOutput ? 'auto' : 'hidden');
|
|
3487
|
+
const [internalRange, setInternalRange] = React.useState(() => range ? (defaultValue ?? [min, max]) : [min, min]);
|
|
3488
|
+
const [internalSingle, setInternalSingle] = React.useState(() => !range ? (defaultValue ?? 0) : 0);
|
|
3501
3489
|
const [showTooltip, setShowTooltip] = React.useState(false);
|
|
3502
3490
|
const [showTooltipHigh, setShowTooltipHigh] = React.useState(false);
|
|
3503
3491
|
const inputRef = React.useRef(null);
|
|
@@ -3539,7 +3527,7 @@ const Slider = React.forwardRef((props, ref) => {
|
|
|
3539
3527
|
const newValue = parseFloat(e.target.value);
|
|
3540
3528
|
if (!isControlled)
|
|
3541
3529
|
setInternalSingle(newValue);
|
|
3542
|
-
onChange
|
|
3530
|
+
onChange?.(newValue);
|
|
3543
3531
|
}, [isControlled, onChange]);
|
|
3544
3532
|
const handleRangeLowChange = React.useCallback((e) => {
|
|
3545
3533
|
const raw = parseFloat(e.target.value);
|
|
@@ -3547,7 +3535,7 @@ const Slider = React.forwardRef((props, ref) => {
|
|
|
3547
3535
|
const newRange = [clamped, currentRange[1]];
|
|
3548
3536
|
if (!isControlled)
|
|
3549
3537
|
setInternalRange(newRange);
|
|
3550
|
-
onChange
|
|
3538
|
+
onChange?.(newRange);
|
|
3551
3539
|
}, [isControlled, onChange, currentRange, minDistance]);
|
|
3552
3540
|
const handleRangeHighChange = React.useCallback((e) => {
|
|
3553
3541
|
const raw = parseFloat(e.target.value);
|
|
@@ -3555,7 +3543,7 @@ const Slider = React.forwardRef((props, ref) => {
|
|
|
3555
3543
|
const newRange = [currentRange[0], clamped];
|
|
3556
3544
|
if (!isControlled)
|
|
3557
3545
|
setInternalRange(newRange);
|
|
3558
|
-
onChange
|
|
3546
|
+
onChange?.(newRange);
|
|
3559
3547
|
}, [isControlled, onChange, currentRange, minDistance]);
|
|
3560
3548
|
const handleKeyDown = React.useCallback((e) => {
|
|
3561
3549
|
if (e.key === 'Home') {
|
|
@@ -3563,7 +3551,7 @@ const Slider = React.forwardRef((props, ref) => {
|
|
|
3563
3551
|
if (!range) {
|
|
3564
3552
|
if (!isControlled)
|
|
3565
3553
|
setInternalSingle(min);
|
|
3566
|
-
onChange
|
|
3554
|
+
onChange?.(min);
|
|
3567
3555
|
}
|
|
3568
3556
|
}
|
|
3569
3557
|
else if (e.key === 'End') {
|
|
@@ -3571,7 +3559,7 @@ const Slider = React.forwardRef((props, ref) => {
|
|
|
3571
3559
|
if (!range) {
|
|
3572
3560
|
if (!isControlled)
|
|
3573
3561
|
setInternalSingle(max);
|
|
3574
|
-
onChange
|
|
3562
|
+
onChange?.(max);
|
|
3575
3563
|
}
|
|
3576
3564
|
}
|
|
3577
3565
|
}, [range, isControlled, onChange, min, max]);
|
|
@@ -3758,7 +3746,7 @@ const Slider = React.forwardRef((props, ref) => {
|
|
|
3758
3746
|
: {
|
|
3759
3747
|
'--slider-progress-low': `${progressLow}%`,
|
|
3760
3748
|
'--slider-progress-high': `${progressHigh}%`,
|
|
3761
|
-
} }), jsxRuntime.jsx("input", { ref: combinedRef, type: "range", min: min, max: max, step: step, value: currentRange[0], disabled: disabled, onChange: handleRangeLowChange, onKeyDown: handleKeyDown, onMouseEnter: () => setShowTooltip(true), onMouseLeave: () => setShowTooltip(false), onFocus: () => setShowTooltip(true), onBlur: () => setShowTooltip(false), className: "slider-input slider-input-low", "aria-valuenow": currentRange[0], "aria-valuemin": min, "aria-valuemax": max, "aria-orientation": isVertical ? 'vertical' : undefined, "aria-label":
|
|
3749
|
+
} }), jsxRuntime.jsx("input", { ref: combinedRef, type: "range", min: min, max: max, step: step, value: currentRange[0], disabled: disabled, onChange: handleRangeLowChange, onKeyDown: handleKeyDown, onMouseEnter: () => setShowTooltip(true), onMouseLeave: () => setShowTooltip(false), onFocus: () => setShowTooltip(true), onBlur: () => setShowTooltip(false), className: "slider-input slider-input-low", "aria-valuenow": currentRange[0], "aria-valuemin": min, "aria-valuemax": max, "aria-orientation": isVertical ? 'vertical' : undefined, "aria-label": ariaLabel?.[0] ?? 'Minimum value', ...getAriaProps(currentRange[0]), ...rest, ...(nameLow !== undefined ? { name: nameLow } : {}) }), jsxRuntime.jsx("input", { ref: inputHighRef, type: "range", min: min, max: max, step: step, value: currentRange[1], disabled: disabled, onChange: handleRangeHighChange, onMouseEnter: () => setShowTooltipHigh(true), onMouseLeave: () => setShowTooltipHigh(false), onFocus: () => setShowTooltipHigh(true), onBlur: () => setShowTooltipHigh(false), className: "slider-input slider-input-high", "aria-valuenow": currentRange[1], "aria-valuemin": min, "aria-valuemax": max, "aria-orientation": isVertical ? 'vertical' : undefined, "aria-label": ariaLabel?.[1] ?? 'Maximum value', ...getAriaProps(currentRange[1]), name: nameHigh }), tooltipMode !== 'hidden' && (jsxRuntime.jsx("output", { ref: outputRef, className: classNames('slider-output slider-output-low', {
|
|
3762
3750
|
'is-visible': showTipLow,
|
|
3763
3751
|
'is-flipped': flipped,
|
|
3764
3752
|
'is-flipped-left': isVertical && verticalFlippedLeft,
|
|
@@ -3814,7 +3802,7 @@ const ArrowDropUp = () => (jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "
|
|
|
3814
3802
|
const ArrowDropDown = () => (jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: jsxRuntime.jsx("path", { d: "M7 9.5l5 5 5-5" }) }));
|
|
3815
3803
|
const Numberinput = React.forwardRef(({ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName, value: controlledValue, defaultValue, min, max, step = 1, size, color, inputColor, controlsPosition = 'both', controlsRounded = false, compact = false, bare, variant = 'plusminus', disabled = false, editable = true, isLoading = false, exponential = false, onChange, className, ...props }, ref) => {
|
|
3816
3804
|
const insideField = useInsideField();
|
|
3817
|
-
const effectiveBare = bare
|
|
3805
|
+
const effectiveBare = bare ?? insideField;
|
|
3818
3806
|
const { bulmaHelperClasses, rest } = useBulmaClasses(props);
|
|
3819
3807
|
const [internalValue, setInternalValue] = React.useState(defaultValue);
|
|
3820
3808
|
const inputRef = React.useRef(null);
|
|
@@ -3836,18 +3824,18 @@ const Numberinput = React.forwardRef(({ label, labelSize, labelProps, horizontal
|
|
|
3836
3824
|
if (!isControlled) {
|
|
3837
3825
|
setInternalValue(clampedValue);
|
|
3838
3826
|
}
|
|
3839
|
-
onChange
|
|
3827
|
+
onChange?.(clampedValue);
|
|
3840
3828
|
}, [isControlled, clampValue, onChange]);
|
|
3841
3829
|
const getEffectiveStep = React.useCallback(() => {
|
|
3842
3830
|
if (!exponential)
|
|
3843
3831
|
return step;
|
|
3844
|
-
return step * Math.max(1, Math.floor(Math.abs(currentValue
|
|
3832
|
+
return step * Math.max(1, Math.floor(Math.abs(currentValue ?? 0)));
|
|
3845
3833
|
}, [exponential, step, currentValue]);
|
|
3846
3834
|
const handleIncrement = React.useCallback(() => {
|
|
3847
|
-
updateValue((currentValue
|
|
3835
|
+
updateValue((currentValue ?? 0) + getEffectiveStep());
|
|
3848
3836
|
}, [currentValue, getEffectiveStep, updateValue]);
|
|
3849
3837
|
const handleDecrement = React.useCallback(() => {
|
|
3850
|
-
updateValue((currentValue
|
|
3838
|
+
updateValue((currentValue ?? 0) - getEffectiveStep());
|
|
3851
3839
|
}, [currentValue, getEffectiveStep, updateValue]);
|
|
3852
3840
|
const handleInputChange = React.useCallback((e) => {
|
|
3853
3841
|
const newValue = parseFloat(e.target.value);
|
|
@@ -3910,7 +3898,7 @@ const Numberinput = React.forwardRef(({ label, labelSize, labelProps, horizontal
|
|
|
3910
3898
|
ref.current = node;
|
|
3911
3899
|
}
|
|
3912
3900
|
};
|
|
3913
|
-
const inputControl = (jsxRuntime.jsx("div", { className: expandedControlClasses, children: jsxRuntime.jsx("input", { ref: combinedRef, type: "number", className: inputClasses, value: currentValue
|
|
3901
|
+
const inputControl = (jsxRuntime.jsx("div", { className: expandedControlClasses, children: jsxRuntime.jsx("input", { ref: combinedRef, type: "number", className: inputClasses, value: currentValue ?? '', min: min, max: max, step: step, disabled: disabled, readOnly: !editable, onChange: handleInputChange, onKeyDown: handleKeyDown, "aria-valuenow": currentValue ?? undefined, "aria-valuemin": min, "aria-valuemax": max, ...rest }) }));
|
|
3914
3902
|
if (isStepper) {
|
|
3915
3903
|
const stepperElement = (jsxRuntime.jsxs("div", { className: combinedClasses, children: [inputControl, jsxRuntime.jsx("div", { className: controlClasses, children: jsxRuntime.jsxs("div", { className: stepperClasses, children: [jsxRuntime.jsx("button", { type: "button", className: stepperButtonClasses, onClick: handleIncrement, disabled: disabled || isAtMax, tabIndex: -1, "aria-label": "Increase value", children: jsxRuntime.jsx(ArrowDropUp, {}) }), jsxRuntime.jsx("button", { type: "button", className: stepperButtonClasses, onClick: handleDecrement, disabled: disabled || isAtMin, tabIndex: -1, "aria-label": "Decrease value", children: jsxRuntime.jsx(ArrowDropDown, {}) })] }) })] }));
|
|
3916
3904
|
if (!insideField) {
|
|
@@ -3978,7 +3966,7 @@ const Rate = React.forwardRef(({ label, labelSize, labelProps, horizontal, messa
|
|
|
3978
3966
|
if (!isControlled) {
|
|
3979
3967
|
setInternalValue(finalValue);
|
|
3980
3968
|
}
|
|
3981
|
-
onChange
|
|
3969
|
+
onChange?.(finalValue);
|
|
3982
3970
|
}, [isControlled, currentValue, disabled, onChange]);
|
|
3983
3971
|
const handleClick = React.useCallback((iconIndex, e) => {
|
|
3984
3972
|
if (disabled)
|
|
@@ -4043,7 +4031,7 @@ const Rate = React.forwardRef(({ label, labelSize, labelProps, horizontal, messa
|
|
|
4043
4031
|
if (!isControlled) {
|
|
4044
4032
|
setInternalValue(newValue);
|
|
4045
4033
|
}
|
|
4046
|
-
onChange
|
|
4034
|
+
onChange?.(newValue);
|
|
4047
4035
|
}
|
|
4048
4036
|
}, [currentValue, max, precision, disabled, isControlled, onChange]);
|
|
4049
4037
|
const getText = () => {
|
|
@@ -4093,7 +4081,7 @@ const Rate = React.forwardRef(({ label, labelSize, labelProps, horizontal, messa
|
|
|
4093
4081
|
const iconProps = {
|
|
4094
4082
|
index: iconIndex,
|
|
4095
4083
|
isActive: fillPercent > 0,
|
|
4096
|
-
isHovered: hoverValue !== null && iconIndex < (hoverValue
|
|
4084
|
+
isHovered: hoverValue !== null && iconIndex < (hoverValue ?? 0),
|
|
4097
4085
|
value: displayValue,
|
|
4098
4086
|
fillPercent,
|
|
4099
4087
|
};
|
|
@@ -4176,7 +4164,7 @@ const Autocomplete = React.forwardRef(({ data = [], value: controlledValue, plac
|
|
|
4176
4164
|
if (controlledValue === undefined) {
|
|
4177
4165
|
setInternalValue(newValue);
|
|
4178
4166
|
}
|
|
4179
|
-
onInput
|
|
4167
|
+
onInput?.(newValue);
|
|
4180
4168
|
if (!isActive && newValue) {
|
|
4181
4169
|
setIsActive(true);
|
|
4182
4170
|
}
|
|
@@ -4188,21 +4176,20 @@ const Autocomplete = React.forwardRef(({ data = [], value: controlledValue, plac
|
|
|
4188
4176
|
if (controlledValue === undefined) {
|
|
4189
4177
|
setInternalValue(displayValue);
|
|
4190
4178
|
}
|
|
4191
|
-
onInput
|
|
4192
|
-
onSelect
|
|
4179
|
+
onInput?.(displayValue);
|
|
4180
|
+
onSelect?.(item);
|
|
4193
4181
|
if (!keepOpen) {
|
|
4194
4182
|
setIsActive(false);
|
|
4195
4183
|
}
|
|
4196
4184
|
setHighlightedIndex(-1);
|
|
4197
4185
|
}, [controlledValue, field, keepOpen, onInput, onSelect]);
|
|
4198
4186
|
const handleClear = React.useCallback(() => {
|
|
4199
|
-
var _a;
|
|
4200
4187
|
if (controlledValue === undefined) {
|
|
4201
4188
|
setInternalValue('');
|
|
4202
4189
|
}
|
|
4203
|
-
onInput
|
|
4204
|
-
onSelect
|
|
4205
|
-
|
|
4190
|
+
onInput?.('');
|
|
4191
|
+
onSelect?.(null);
|
|
4192
|
+
inputRef.current?.focus();
|
|
4206
4193
|
}, [controlledValue, onInput, onSelect]);
|
|
4207
4194
|
const handleFocus = React.useCallback(() => {
|
|
4208
4195
|
if (openOnFocus && !disabled) {
|
|
@@ -4234,7 +4221,7 @@ const Autocomplete = React.forwardRef(({ data = [], value: controlledValue, plac
|
|
|
4234
4221
|
handleSelect,
|
|
4235
4222
|
]);
|
|
4236
4223
|
React.useEffect(() => {
|
|
4237
|
-
onActiveChange
|
|
4224
|
+
onActiveChange?.(isActive);
|
|
4238
4225
|
}, [isActive, onActiveChange]);
|
|
4239
4226
|
React.useEffect(() => {
|
|
4240
4227
|
if (keepFirst && isActive && filteredData.length > 0) {
|
|
@@ -4282,7 +4269,7 @@ const Autocomplete = React.forwardRef(({ data = [], value: controlledValue, plac
|
|
|
4282
4269
|
return;
|
|
4283
4270
|
const { scrollTop, scrollHeight, clientHeight } = dropdownRef.current;
|
|
4284
4271
|
if (scrollHeight - scrollTop - clientHeight <= infiniteScrollDistance) {
|
|
4285
|
-
onInfiniteScroll
|
|
4272
|
+
onInfiniteScroll?.();
|
|
4286
4273
|
}
|
|
4287
4274
|
}, [checkInfiniteScroll, infiniteScrollDistance, onInfiniteScroll]);
|
|
4288
4275
|
React.useEffect(() => {
|
|
@@ -4388,7 +4375,7 @@ const Taginput = React.forwardRef(({ label, labelSize, labelProps, horizontal, m
|
|
|
4388
4375
|
if (controlledValue === undefined) {
|
|
4389
4376
|
setInternalTags(newTags);
|
|
4390
4377
|
}
|
|
4391
|
-
onChange
|
|
4378
|
+
onChange?.(newTags);
|
|
4392
4379
|
}, [controlledValue, onChange]);
|
|
4393
4380
|
const addTag = React.useCallback((value) => {
|
|
4394
4381
|
if (disabled || readonly)
|
|
@@ -4412,7 +4399,7 @@ const Taginput = React.forwardRef(({ label, labelSize, labelProps, horizontal, m
|
|
|
4412
4399
|
const finalTag = createTag ? createTag(displayValue) : tagValue;
|
|
4413
4400
|
const newTags = [...tags, finalTag];
|
|
4414
4401
|
updateTags(newTags);
|
|
4415
|
-
onAdd
|
|
4402
|
+
onAdd?.(finalTag);
|
|
4416
4403
|
setInputValue('');
|
|
4417
4404
|
if (!keepOpen) {
|
|
4418
4405
|
setIsActive(false);
|
|
@@ -4439,7 +4426,7 @@ const Taginput = React.forwardRef(({ label, labelSize, labelProps, horizontal, m
|
|
|
4439
4426
|
const removedTag = tags[index];
|
|
4440
4427
|
const newTags = tags.filter((_, i) => i !== index);
|
|
4441
4428
|
updateTags(newTags);
|
|
4442
|
-
onRemove
|
|
4429
|
+
onRemove?.(removedTag, index);
|
|
4443
4430
|
}, [disabled, readonly, tags, updateTags, onRemove]);
|
|
4444
4431
|
const handleInputChange = React.useCallback((e) => {
|
|
4445
4432
|
const newValue = e.target.value;
|
|
@@ -4452,7 +4439,7 @@ const Taginput = React.forwardRef(({ label, labelSize, labelProps, horizontal, m
|
|
|
4452
4439
|
return;
|
|
4453
4440
|
}
|
|
4454
4441
|
setInputValue(newValue);
|
|
4455
|
-
onTyping
|
|
4442
|
+
onTyping?.(newValue);
|
|
4456
4443
|
if (newValue && data.length > 0) {
|
|
4457
4444
|
setIsActive(true);
|
|
4458
4445
|
}
|
|
@@ -4557,8 +4544,7 @@ const Taginput = React.forwardRef(({ label, labelSize, labelProps, horizontal, m
|
|
|
4557
4544
|
}
|
|
4558
4545
|
}, [ref]);
|
|
4559
4546
|
const handleContainerClick = React.useCallback(() => {
|
|
4560
|
-
|
|
4561
|
-
(_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
4547
|
+
inputRef.current?.focus();
|
|
4562
4548
|
}, []);
|
|
4563
4549
|
const taginputClasses = pcn('taginput', {
|
|
4564
4550
|
'is-active': isActive,
|
|
@@ -4766,7 +4752,7 @@ const DEFAULT_PICKER_LABELS = {
|
|
|
4766
4752
|
};
|
|
4767
4753
|
const mergeLabels = (overrides) => ({
|
|
4768
4754
|
...DEFAULT_PICKER_LABELS,
|
|
4769
|
-
...(overrides
|
|
4755
|
+
...(overrides ?? {}),
|
|
4770
4756
|
});
|
|
4771
4757
|
|
|
4772
4758
|
const DEFAULT_DATE_FORMAT = 'YYYY-MM-DD';
|
|
@@ -4824,19 +4810,19 @@ function formatWithIntl(d, options, locale) {
|
|
|
4824
4810
|
return new Intl.DateTimeFormat(locale, options).format(d);
|
|
4825
4811
|
}
|
|
4826
4812
|
function formatDate(d, fmt, locale) {
|
|
4827
|
-
const f = fmt
|
|
4813
|
+
const f = fmt ?? DEFAULT_DATE_FORMAT;
|
|
4828
4814
|
if (typeof f === 'string')
|
|
4829
4815
|
return formatTokenString(d, f);
|
|
4830
4816
|
return formatWithIntl(d, f, locale);
|
|
4831
4817
|
}
|
|
4832
4818
|
function formatTime(d, fmt, locale) {
|
|
4833
|
-
const f = fmt
|
|
4819
|
+
const f = fmt ?? DEFAULT_TIME_FORMAT_24;
|
|
4834
4820
|
if (typeof f === 'string')
|
|
4835
4821
|
return formatTokenString(d, f);
|
|
4836
4822
|
return formatWithIntl(d, f, locale);
|
|
4837
4823
|
}
|
|
4838
4824
|
function formatDateTime(d, fmt, locale) {
|
|
4839
|
-
const f = fmt
|
|
4825
|
+
const f = fmt ?? DEFAULT_DATETIME_FORMAT;
|
|
4840
4826
|
if (typeof f === 'string')
|
|
4841
4827
|
return formatTokenString(d, f);
|
|
4842
4828
|
return formatWithIntl(d, f, locale);
|
|
@@ -4853,19 +4839,18 @@ function hourCycleFromFormat(fmt) {
|
|
|
4853
4839
|
return null;
|
|
4854
4840
|
}
|
|
4855
4841
|
function parseDate(s, fmt, _locale) {
|
|
4856
|
-
var _a, _b, _c, _d, _e, _f;
|
|
4857
4842
|
if (!s)
|
|
4858
4843
|
return null;
|
|
4859
|
-
const format = fmt
|
|
4844
|
+
const format = fmt ?? DEFAULT_DATE_FORMAT;
|
|
4860
4845
|
const parts = parseTokens(s, format);
|
|
4861
4846
|
if (!parts)
|
|
4862
4847
|
return null;
|
|
4863
|
-
const year =
|
|
4864
|
-
const month = (
|
|
4865
|
-
const day =
|
|
4866
|
-
const hours =
|
|
4867
|
-
const minutes =
|
|
4868
|
-
const seconds =
|
|
4848
|
+
const year = parts.year ?? new Date().getFullYear();
|
|
4849
|
+
const month = (parts.month ?? 1) - 1;
|
|
4850
|
+
const day = parts.day ?? 1;
|
|
4851
|
+
const hours = parts.hours ?? 0;
|
|
4852
|
+
const minutes = parts.minutes ?? 0;
|
|
4853
|
+
const seconds = parts.seconds ?? 0;
|
|
4869
4854
|
const d = new Date(year, month, day, hours, minutes, seconds, 0);
|
|
4870
4855
|
if (d.getFullYear() !== year ||
|
|
4871
4856
|
d.getMonth() !== month ||
|
|
@@ -4875,15 +4860,14 @@ function parseDate(s, fmt, _locale) {
|
|
|
4875
4860
|
return d;
|
|
4876
4861
|
}
|
|
4877
4862
|
function parseTime(s, fmt) {
|
|
4878
|
-
var _a, _b, _c;
|
|
4879
4863
|
if (!s)
|
|
4880
4864
|
return null;
|
|
4881
|
-
const format = fmt
|
|
4865
|
+
const format = fmt ?? DEFAULT_TIME_FORMAT_24;
|
|
4882
4866
|
const parts = parseTokens(s, format);
|
|
4883
4867
|
if (!parts)
|
|
4884
4868
|
return null;
|
|
4885
4869
|
const today = new Date();
|
|
4886
|
-
return new Date(today.getFullYear(), today.getMonth(), today.getDate(),
|
|
4870
|
+
return new Date(today.getFullYear(), today.getMonth(), today.getDate(), parts.hours ?? 0, parts.minutes ?? 0, parts.seconds ?? 0, 0);
|
|
4887
4871
|
}
|
|
4888
4872
|
function escapeRegExp(s) {
|
|
4889
4873
|
return s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
|
|
@@ -5157,9 +5141,9 @@ const Calendar = ({ value, focusedDate, onSelect, onFocusedDateChange, min, max,
|
|
|
5157
5141
|
const isDateUnselectable = React.useCallback((d) => {
|
|
5158
5142
|
if (!isWithin(d, min, max))
|
|
5159
5143
|
return true;
|
|
5160
|
-
if (shouldDisableDate
|
|
5144
|
+
if (shouldDisableDate?.(d))
|
|
5161
5145
|
return true;
|
|
5162
|
-
if (unselectableDates
|
|
5146
|
+
if (unselectableDates?.some(u => isSameDay(u, d)))
|
|
5163
5147
|
return true;
|
|
5164
5148
|
return false;
|
|
5165
5149
|
}, [min, max, shouldDisableDate, unselectableDates]);
|
|
@@ -5256,7 +5240,7 @@ const Calendar = ({ value, focusedDate, onSelect, onFocusedDateChange, min, max,
|
|
|
5256
5240
|
const focusedYear = focusedDate.getFullYear();
|
|
5257
5241
|
const minYear = min ? min.getFullYear() : focusedYear - 100;
|
|
5258
5242
|
const maxYear = max ? max.getFullYear() : focusedYear + 100;
|
|
5259
|
-
const [lo, hi] = yearsRange
|
|
5243
|
+
const [lo, hi] = yearsRange ?? [minYear, maxYear];
|
|
5260
5244
|
const start = Math.max(lo, minYear);
|
|
5261
5245
|
const end = Math.min(hi, maxYear);
|
|
5262
5246
|
const out = [];
|
|
@@ -5276,14 +5260,14 @@ const Calendar = ({ value, focusedDate, onSelect, onFocusedDateChange, min, max,
|
|
|
5276
5260
|
if (!autoFocusCell || !gridRef.current)
|
|
5277
5261
|
return;
|
|
5278
5262
|
const target = gridRef.current.querySelector('[data-focused="true"]');
|
|
5279
|
-
target
|
|
5263
|
+
target?.focus();
|
|
5280
5264
|
}, [autoFocusCell, focusedDate, view]);
|
|
5281
5265
|
React.useEffect(() => {
|
|
5282
5266
|
if (view !== 'years' || !yearGridRef.current)
|
|
5283
5267
|
return;
|
|
5284
5268
|
const sel = yearGridRef.current.querySelector('[data-focused-year="true"]');
|
|
5285
|
-
sel
|
|
5286
|
-
sel
|
|
5269
|
+
sel?.scrollIntoView({ block: 'center' });
|
|
5270
|
+
sel?.focus();
|
|
5287
5271
|
}, [view]);
|
|
5288
5272
|
const focusedYear = focusedDate.getFullYear();
|
|
5289
5273
|
const todayYear = new Date().getFullYear();
|
|
@@ -5342,13 +5326,12 @@ function useFocusTrap(containerRef, active, options = {}) {
|
|
|
5342
5326
|
? document.activeElement
|
|
5343
5327
|
: null;
|
|
5344
5328
|
const focusInitial = () => {
|
|
5345
|
-
|
|
5346
|
-
if (initialFocusRef === null || initialFocusRef === void 0 ? void 0 : initialFocusRef.current) {
|
|
5329
|
+
if (initialFocusRef?.current) {
|
|
5347
5330
|
initialFocusRef.current.focus();
|
|
5348
5331
|
return;
|
|
5349
5332
|
}
|
|
5350
5333
|
const focusables = Array.from(container.querySelectorAll(FOCUSABLE_SELECTOR)).filter(el => !el.hasAttribute('disabled'));
|
|
5351
|
-
const target =
|
|
5334
|
+
const target = focusables[0] ?? container;
|
|
5352
5335
|
target.focus();
|
|
5353
5336
|
};
|
|
5354
5337
|
focusInitial();
|
|
@@ -5375,7 +5358,7 @@ function useFocusTrap(containerRef, active, options = {}) {
|
|
|
5375
5358
|
container.addEventListener('keydown', handleKeyDown);
|
|
5376
5359
|
return () => {
|
|
5377
5360
|
container.removeEventListener('keydown', handleKeyDown);
|
|
5378
|
-
if (restoreFocus &&
|
|
5361
|
+
if (restoreFocus && previouslyFocused?.focus) {
|
|
5379
5362
|
previouslyFocused.focus();
|
|
5380
5363
|
}
|
|
5381
5364
|
};
|
|
@@ -5749,13 +5732,12 @@ function setAmPm(currentDate, isPm) {
|
|
|
5749
5732
|
return next;
|
|
5750
5733
|
}
|
|
5751
5734
|
function segmentIndexAtCaret(map, caret) {
|
|
5752
|
-
var _a;
|
|
5753
5735
|
for (const idx of map.editable) {
|
|
5754
5736
|
const s = map.segments[idx];
|
|
5755
5737
|
if (caret >= s.start && caret <= s.end)
|
|
5756
5738
|
return idx;
|
|
5757
5739
|
}
|
|
5758
|
-
let bestIdx =
|
|
5740
|
+
let bestIdx = map.editable[0] ?? null;
|
|
5759
5741
|
let bestDist = Infinity;
|
|
5760
5742
|
for (const idx of map.editable) {
|
|
5761
5743
|
const s = map.segments[idx];
|
|
@@ -5775,8 +5757,8 @@ function useSegmentedEntry(params) {
|
|
|
5775
5757
|
const [activeSegmentIdx, setActiveSegmentIdx] = React.useState(null);
|
|
5776
5758
|
const typedDigitsRef = React.useRef('');
|
|
5777
5759
|
const segmentEditable = !!segmentMap && !!editable && !disabled && !readOnly;
|
|
5778
|
-
const segmentBaseDate = React.useCallback(() => value
|
|
5779
|
-
const isAllowed = React.useCallback((d) => isWithin(d, min, max) && !
|
|
5760
|
+
const segmentBaseDate = React.useCallback(() => value ?? makeBaseDate(), [value, makeBaseDate]);
|
|
5761
|
+
const isAllowed = React.useCallback((d) => isWithin(d, min, max) && !isBlocked?.(d), [min, max, isBlocked]);
|
|
5780
5762
|
const applyDateFromSegment = React.useCallback((next) => {
|
|
5781
5763
|
if (!isAllowed(next))
|
|
5782
5764
|
return;
|
|
@@ -5819,7 +5801,7 @@ function useSegmentedEntry(params) {
|
|
|
5819
5801
|
containerRef.current !== null &&
|
|
5820
5802
|
containerRef.current.contains(nextFocus);
|
|
5821
5803
|
if (stayingInPicker) {
|
|
5822
|
-
onBlur
|
|
5804
|
+
onBlur?.(e);
|
|
5823
5805
|
return;
|
|
5824
5806
|
}
|
|
5825
5807
|
setActiveSegmentIdx(null);
|
|
@@ -5831,7 +5813,7 @@ function useSegmentedEntry(params) {
|
|
|
5831
5813
|
else {
|
|
5832
5814
|
setText(value ? formatFn(value, format, locale) : '');
|
|
5833
5815
|
}
|
|
5834
|
-
onBlur
|
|
5816
|
+
onBlur?.(e);
|
|
5835
5817
|
}, [
|
|
5836
5818
|
containerRef,
|
|
5837
5819
|
tryParse,
|
|
@@ -5855,7 +5837,7 @@ function useSegmentedEntry(params) {
|
|
|
5855
5837
|
typedDigitsRef.current = '';
|
|
5856
5838
|
setActiveSegmentIdx(segmentMap.editable[0]);
|
|
5857
5839
|
}
|
|
5858
|
-
onFocus
|
|
5840
|
+
onFocus?.(e);
|
|
5859
5841
|
}, [
|
|
5860
5842
|
openOnFocus,
|
|
5861
5843
|
popover,
|
|
@@ -5873,18 +5855,17 @@ function useSegmentedEntry(params) {
|
|
|
5873
5855
|
onFocus,
|
|
5874
5856
|
]);
|
|
5875
5857
|
const handleClick = React.useCallback((e) => {
|
|
5876
|
-
var _a;
|
|
5877
5858
|
if (openOnFocus && popover && !disabled && !readOnly)
|
|
5878
5859
|
setOpen(true);
|
|
5879
5860
|
if (segmentEditable && segmentMap && inputRef.current) {
|
|
5880
|
-
const caret =
|
|
5861
|
+
const caret = inputRef.current.selectionStart ?? 0;
|
|
5881
5862
|
const idx = segmentIndexAtCaret(segmentMap, caret);
|
|
5882
5863
|
if (idx !== null && idx !== activeSegmentIdx) {
|
|
5883
5864
|
typedDigitsRef.current = '';
|
|
5884
5865
|
setActiveSegmentIdx(idx);
|
|
5885
5866
|
}
|
|
5886
5867
|
}
|
|
5887
|
-
onClick
|
|
5868
|
+
onClick?.(e);
|
|
5888
5869
|
}, [
|
|
5889
5870
|
openOnFocus,
|
|
5890
5871
|
popover,
|
|
@@ -6002,7 +5983,7 @@ function useSegmentedEntry(params) {
|
|
|
6002
5983
|
setOpen(false);
|
|
6003
5984
|
}
|
|
6004
5985
|
}
|
|
6005
|
-
onKeyDown
|
|
5986
|
+
onKeyDown?.(e);
|
|
6006
5987
|
}, [
|
|
6007
5988
|
inSegmentMode,
|
|
6008
5989
|
segmentMap,
|
|
@@ -6046,9 +6027,9 @@ const DateInputBase = React.forwardRef((props, ref) => {
|
|
|
6046
6027
|
const { value: controlledValue, defaultValue, onChange, onOpen, onClose, min, max, disabled, readOnly, placeholder, format, parse, locale, inline = false, mobileNative = 'auto', editable = true, popover = true, openOnFocus = true, closeOnSelect = true, position = 'bottom-left', appendToBody = false, color, size, isRounded, shouldDisableDate, unselectableDates, firstDayOfWeek = 0, dayNames, monthNames, nearbyMonthDays = true, className, name, form, required, id, onFocus, onClick, onKeyDown, onBlur, iconLeftName: _iconLeftName, triggerIcon = true, triggerIconName = 'chevron-down', labels, ...rest } = props;
|
|
6047
6028
|
const t = mergeLabels(labels);
|
|
6048
6029
|
const isControlled = controlledValue !== undefined;
|
|
6049
|
-
const [internalValue, setInternalValue] = React.useState(defaultValue
|
|
6050
|
-
const value = isControlled ? (controlledValue
|
|
6051
|
-
const initialFocused = React.useMemo(() => clampDate(value
|
|
6030
|
+
const [internalValue, setInternalValue] = React.useState(defaultValue ?? null);
|
|
6031
|
+
const value = isControlled ? (controlledValue ?? null) : internalValue;
|
|
6032
|
+
const initialFocused = React.useMemo(() => clampDate(value ?? new Date(), min, max), []);
|
|
6052
6033
|
const [focusedDate, setFocusedDate] = React.useState(initialFocused);
|
|
6053
6034
|
React.useEffect(() => {
|
|
6054
6035
|
setFocusedDate(prev => clampDate(prev, min, max));
|
|
@@ -6076,9 +6057,9 @@ const DateInputBase = React.forwardRef((props, ref) => {
|
|
|
6076
6057
|
if (prev === next)
|
|
6077
6058
|
return prev;
|
|
6078
6059
|
if (next)
|
|
6079
|
-
onOpen
|
|
6060
|
+
onOpen?.();
|
|
6080
6061
|
else
|
|
6081
|
-
onClose
|
|
6062
|
+
onClose?.();
|
|
6082
6063
|
return next;
|
|
6083
6064
|
});
|
|
6084
6065
|
}, [onOpen, onClose]);
|
|
@@ -6090,7 +6071,7 @@ const DateInputBase = React.forwardRef((props, ref) => {
|
|
|
6090
6071
|
setInternalValue(next);
|
|
6091
6072
|
if (next)
|
|
6092
6073
|
setFocusedDate(next);
|
|
6093
|
-
onChange
|
|
6074
|
+
onChange?.(next);
|
|
6094
6075
|
}, [isControlled, onChange]);
|
|
6095
6076
|
const handleSelect = React.useCallback((d) => {
|
|
6096
6077
|
if (!isWithin(d, min, max))
|
|
@@ -6107,7 +6088,7 @@ const DateInputBase = React.forwardRef((props, ref) => {
|
|
|
6107
6088
|
const fmt = typeof format === 'string' ? format : undefined;
|
|
6108
6089
|
return parse
|
|
6109
6090
|
? parse(trimmed)
|
|
6110
|
-
: parseDate(trimmed, fmt
|
|
6091
|
+
: parseDate(trimmed, fmt ?? DEFAULT_DATE_FORMAT);
|
|
6111
6092
|
}, [parse, format, locale]);
|
|
6112
6093
|
const makeBaseDate = React.useCallback(() => {
|
|
6113
6094
|
const d = new Date();
|
|
@@ -6117,13 +6098,13 @@ const DateInputBase = React.forwardRef((props, ref) => {
|
|
|
6117
6098
|
const inputReadOnlyAttr = !!readOnly || !editable;
|
|
6118
6099
|
const canOpen = !!popover && !disabled && !readOnly;
|
|
6119
6100
|
const isBlocked = React.useMemo(() => {
|
|
6120
|
-
if (!shouldDisableDate && !
|
|
6101
|
+
if (!shouldDisableDate && !unselectableDates?.length)
|
|
6121
6102
|
return undefined;
|
|
6122
|
-
return (d) => !!
|
|
6123
|
-
!!
|
|
6103
|
+
return (d) => !!shouldDisableDate?.(d) ||
|
|
6104
|
+
!!unselectableDates?.some(u => isSameDay(u, d));
|
|
6124
6105
|
}, [shouldDisableDate, unselectableDates]);
|
|
6125
6106
|
const { inputHandlers } = useSegmentedEntry({
|
|
6126
|
-
format: format
|
|
6107
|
+
format: format ?? DEFAULT_DATE_FORMAT,
|
|
6127
6108
|
value,
|
|
6128
6109
|
commitValue,
|
|
6129
6110
|
formatFn: formatDate,
|
|
@@ -6178,13 +6159,12 @@ const DateInputBase = React.forwardRef((props, ref) => {
|
|
|
6178
6159
|
DateInputBase.displayName = 'DateInputBase';
|
|
6179
6160
|
|
|
6180
6161
|
const DateInput = React.forwardRef(({ label, labelSize, labelProps, horizontal, iconLeft, iconRight, iconLeftName = 'calendar', iconRightName, iconLeftSize, iconRightSize, hasIconsLeft, hasIconsRight, isLoading, isExpanded, controlSize, message, messageColor, fieldClassName, controlClassName, ...baseProps }, ref) => {
|
|
6181
|
-
var _a;
|
|
6182
6162
|
const insideField = useInsideField();
|
|
6183
6163
|
const insideControl = useInsideControl();
|
|
6184
6164
|
const helpClass = usePrefixedClassNames('help', {
|
|
6185
6165
|
[`is-${messageColor}`]: !!messageColor,
|
|
6186
6166
|
});
|
|
6187
|
-
let content = (jsxRuntime.jsx(DateInputBase, { ref: ref, ...baseProps, triggerIcon:
|
|
6167
|
+
let content = (jsxRuntime.jsx(DateInputBase, { ref: ref, ...baseProps, triggerIcon: baseProps.triggerIcon ?? !isLoading }));
|
|
6188
6168
|
if (!insideControl && !baseProps.inline) {
|
|
6189
6169
|
content = (jsxRuntime.jsx(Control, { iconLeft: iconLeft, iconRight: iconRight, iconLeftName: iconLeftName, iconRightName: iconRightName, iconLeftSize: iconLeftSize, iconRightSize: iconRightSize, hasIconsLeft: hasIconsLeft || !!iconLeftName, hasIconsRight: hasIconsRight, isLoading: isLoading, isExpanded: isExpanded, size: controlSize, className: controlClassName, children: content }));
|
|
6190
6170
|
}
|
|
@@ -6209,11 +6189,10 @@ const tickHaptic = () => {
|
|
|
6209
6189
|
|
|
6210
6190
|
let audioCtx = null;
|
|
6211
6191
|
const getAudioContextCtor = () => {
|
|
6212
|
-
var _a, _b;
|
|
6213
6192
|
if (typeof window === 'undefined')
|
|
6214
6193
|
return null;
|
|
6215
6194
|
const w = window;
|
|
6216
|
-
return
|
|
6195
|
+
return w.AudioContext ?? w.webkitAudioContext ?? null;
|
|
6217
6196
|
};
|
|
6218
6197
|
const ensureAudioCtx = () => {
|
|
6219
6198
|
if (audioCtx)
|
|
@@ -6293,11 +6272,10 @@ const WheelInner = ({ values, index, onChange, formatLabel, formatAriaText, aria
|
|
|
6293
6272
|
const audioTickEnabledRef = React.useRef(audioTick);
|
|
6294
6273
|
audioTickEnabledRef.current = audioTick;
|
|
6295
6274
|
const playBandPulse = React.useCallback(() => {
|
|
6296
|
-
var _a;
|
|
6297
6275
|
const el = bandRef.current;
|
|
6298
6276
|
if (!el || typeof el.animate !== 'function')
|
|
6299
6277
|
return;
|
|
6300
|
-
if (
|
|
6278
|
+
if (reducedMotionMqlRef.current?.matches)
|
|
6301
6279
|
return;
|
|
6302
6280
|
pulseAnimRef.current = el.animate([
|
|
6303
6281
|
{ transform: 'scale(1)', filter: 'brightness(1)' },
|
|
@@ -6333,15 +6311,13 @@ const WheelInner = ({ values, index, onChange, formatLabel, formatAriaText, aria
|
|
|
6333
6311
|
}
|
|
6334
6312
|
}, []);
|
|
6335
6313
|
React.useEffect(() => () => {
|
|
6336
|
-
var _a;
|
|
6337
6314
|
cancelRaf();
|
|
6338
|
-
|
|
6315
|
+
pulseAnimRef.current?.cancel();
|
|
6339
6316
|
pulseAnimRef.current = null;
|
|
6340
6317
|
}, [cancelRaf]);
|
|
6341
6318
|
React.useImperativeHandle(ref, () => ({
|
|
6342
|
-
focus: () =>
|
|
6319
|
+
focus: () => rootRef.current?.focus(),
|
|
6343
6320
|
startDrag: (pointerId, clientY) => {
|
|
6344
|
-
var _a;
|
|
6345
6321
|
if (disabled)
|
|
6346
6322
|
return;
|
|
6347
6323
|
cancelRaf();
|
|
@@ -6356,7 +6332,7 @@ const WheelInner = ({ values, index, onChange, formatLabel, formatAriaText, aria
|
|
|
6356
6332
|
samples: [{ t: now, y: clientY }],
|
|
6357
6333
|
};
|
|
6358
6334
|
try {
|
|
6359
|
-
|
|
6335
|
+
rootRef.current?.setPointerCapture(pointerId);
|
|
6360
6336
|
}
|
|
6361
6337
|
catch {
|
|
6362
6338
|
}
|
|
@@ -6446,15 +6422,15 @@ const WheelInner = ({ values, index, onChange, formatLabel, formatAriaText, aria
|
|
|
6446
6422
|
break;
|
|
6447
6423
|
case 'ArrowLeft':
|
|
6448
6424
|
e.preventDefault();
|
|
6449
|
-
onFocusPrev
|
|
6425
|
+
onFocusPrev?.();
|
|
6450
6426
|
break;
|
|
6451
6427
|
case 'ArrowRight':
|
|
6452
6428
|
e.preventDefault();
|
|
6453
|
-
onFocusNext
|
|
6429
|
+
onFocusNext?.();
|
|
6454
6430
|
break;
|
|
6455
6431
|
case 'Enter':
|
|
6456
6432
|
e.preventDefault();
|
|
6457
|
-
onCommit
|
|
6433
|
+
onCommit?.();
|
|
6458
6434
|
break;
|
|
6459
6435
|
}
|
|
6460
6436
|
}, [
|
|
@@ -6580,7 +6556,6 @@ const WheelInner = ({ values, index, onChange, formatLabel, formatAriaText, aria
|
|
|
6580
6556
|
};
|
|
6581
6557
|
};
|
|
6582
6558
|
const onPointerMove = (e) => {
|
|
6583
|
-
var _a;
|
|
6584
6559
|
const s = dragStateRef.current;
|
|
6585
6560
|
if (s.pointerId !== e.pointerId)
|
|
6586
6561
|
return;
|
|
@@ -6588,7 +6563,7 @@ const WheelInner = ({ values, index, onChange, formatLabel, formatAriaText, aria
|
|
|
6588
6563
|
if (!s.captured) {
|
|
6589
6564
|
if (Math.abs(dy) < DRAG_THRESHOLD_PX)
|
|
6590
6565
|
return;
|
|
6591
|
-
|
|
6566
|
+
rootRef.current?.setPointerCapture(e.pointerId);
|
|
6592
6567
|
s.captured = true;
|
|
6593
6568
|
setIsDragging(true);
|
|
6594
6569
|
}
|
|
@@ -6601,13 +6576,12 @@ const WheelInner = ({ values, index, onChange, formatLabel, formatAriaText, aria
|
|
|
6601
6576
|
commitPosition(s.startPosition - dy / itemHeight);
|
|
6602
6577
|
};
|
|
6603
6578
|
const onPointerUp = (e) => {
|
|
6604
|
-
var _a, _b;
|
|
6605
6579
|
const s = dragStateRef.current;
|
|
6606
6580
|
if (s.pointerId !== e.pointerId)
|
|
6607
6581
|
return;
|
|
6608
6582
|
if (s.captured) {
|
|
6609
|
-
|
|
6610
|
-
|
|
6583
|
+
rootRef.current?.releasePointerCapture(e.pointerId);
|
|
6584
|
+
rootRef.current?.focus();
|
|
6611
6585
|
const samples = s.samples;
|
|
6612
6586
|
let pxPerMs = 0;
|
|
6613
6587
|
if (samples.length >= 2) {
|
|
@@ -6674,15 +6648,13 @@ const WheelInner = ({ values, index, onChange, formatLabel, formatAriaText, aria
|
|
|
6674
6648
|
height: itemHeight,
|
|
6675
6649
|
top: `${top}px`,
|
|
6676
6650
|
}, disabled: itemDisabled, onClick: () => {
|
|
6677
|
-
var _a;
|
|
6678
6651
|
moveBy(vIdx - virtualIdx);
|
|
6679
|
-
|
|
6652
|
+
rootRef.current?.focus();
|
|
6680
6653
|
}, children: formatLabel(values[aIdx]) }, vIdx));
|
|
6681
6654
|
})] }));
|
|
6682
6655
|
};
|
|
6683
6656
|
const Wheel = React.forwardRef(WheelInner);
|
|
6684
6657
|
const TimeWheels = ({ value, onChange, hourFormat = '24', enableSeconds = false, incrementHours = 1, incrementMinutes = 1, incrementSeconds = 1, unselectableTimes, size, color, disabled, className, id, labels, visibleCount = 5, itemHeight = 32, audioTick = false, onCommit, }) => {
|
|
6685
|
-
var _a;
|
|
6686
6658
|
const t = mergeLabels(labels);
|
|
6687
6659
|
const rootClass = usePrefixedClassNames('timeinput', {
|
|
6688
6660
|
[`is-${color}`]: !!color,
|
|
@@ -6705,29 +6677,27 @@ const TimeWheels = ({ value, onChange, hourFormat = '24', enableSeconds = false,
|
|
|
6705
6677
|
return !unselectableTimes(probe);
|
|
6706
6678
|
}, [unselectableTimes]);
|
|
6707
6679
|
const isHourDisabled = React.useCallback((display) => {
|
|
6708
|
-
var _a;
|
|
6709
6680
|
let h24 = display;
|
|
6710
6681
|
if (hourFormat === '12') {
|
|
6711
6682
|
const base = display % 12;
|
|
6712
6683
|
h24 = isPm ? base + 12 : base;
|
|
6713
6684
|
}
|
|
6714
|
-
return !isTimeAllowed(h24, value.minutes,
|
|
6685
|
+
return !isTimeAllowed(h24, value.minutes, value.seconds ?? 0);
|
|
6715
6686
|
}, [hourFormat, isPm, isTimeAllowed, value.minutes, value.seconds]);
|
|
6716
|
-
const isMinuteDisabled = React.useCallback((m) =>
|
|
6687
|
+
const isMinuteDisabled = React.useCallback((m) => !isTimeAllowed(value.hours, m, value.seconds ?? 0), [isTimeAllowed, value.hours, value.seconds]);
|
|
6717
6688
|
const isSecondDisabled = React.useCallback((s) => !isTimeAllowed(value.hours, value.minutes, s), [isTimeAllowed, value.hours, value.minutes]);
|
|
6718
6689
|
const hourDisabledFor = unselectableTimes ? isHourDisabled : undefined;
|
|
6719
6690
|
const minuteDisabledFor = unselectableTimes ? isMinuteDisabled : undefined;
|
|
6720
6691
|
const secondDisabledFor = unselectableTimes ? isSecondDisabled : undefined;
|
|
6721
6692
|
const commit = React.useCallback((next) => {
|
|
6722
|
-
var _a, _b, _c, _d, _e;
|
|
6723
6693
|
const merged = {
|
|
6724
|
-
hours:
|
|
6725
|
-
minutes:
|
|
6694
|
+
hours: next.hours ?? value.hours,
|
|
6695
|
+
minutes: next.minutes ?? value.minutes,
|
|
6726
6696
|
seconds: enableSeconds
|
|
6727
|
-
? (
|
|
6697
|
+
? (next.seconds ?? value.seconds ?? 0)
|
|
6728
6698
|
: undefined,
|
|
6729
6699
|
};
|
|
6730
|
-
if (!isTimeAllowed(merged.hours, merged.minutes,
|
|
6700
|
+
if (!isTimeAllowed(merged.hours, merged.minutes, merged.seconds ?? 0)) {
|
|
6731
6701
|
return;
|
|
6732
6702
|
}
|
|
6733
6703
|
onChange(merged);
|
|
@@ -6766,7 +6736,7 @@ const TimeWheels = ({ value, onChange, hourFormat = '24', enableSeconds = false,
|
|
|
6766
6736
|
: value.hours;
|
|
6767
6737
|
const hourIndex = Math.max(0, hourValues.indexOf(displayedHours));
|
|
6768
6738
|
const minuteIndex = Math.max(0, minuteValues.indexOf(value.minutes));
|
|
6769
|
-
const secondIndex = Math.max(0, secondValues.indexOf(
|
|
6739
|
+
const secondIndex = Math.max(0, secondValues.indexOf(value.seconds ?? 0));
|
|
6770
6740
|
const ampmIndex = isPm ? 1 : 0;
|
|
6771
6741
|
const hoursRef = React.useRef(null);
|
|
6772
6742
|
const minutesRef = React.useRef(null);
|
|
@@ -6779,7 +6749,7 @@ const TimeWheels = ({ value, onChange, hourFormat = '24', enableSeconds = false,
|
|
|
6779
6749
|
columnOrder.push(secondsRef);
|
|
6780
6750
|
if (hourFormat === '12')
|
|
6781
6751
|
columnOrder.push(ampmRef);
|
|
6782
|
-
const focusAt = (i) =>
|
|
6752
|
+
const focusAt = (i) => columnOrder[i]?.current?.focus();
|
|
6783
6753
|
const indexOf = (r) => columnOrder.indexOf(r);
|
|
6784
6754
|
const focusPrevOf = (r) => () => focusAt(indexOf(r) - 1);
|
|
6785
6755
|
const focusNextOf = (r) => () => focusAt(indexOf(r) + 1);
|
|
@@ -6790,18 +6760,17 @@ const TimeWheels = ({ value, onChange, hourFormat = '24', enableSeconds = false,
|
|
|
6790
6760
|
const baseHour = display % 12;
|
|
6791
6761
|
next24 = isPm ? baseHour + 12 : baseHour;
|
|
6792
6762
|
}
|
|
6793
|
-
const allowed = nextValid(next24, next24 >= value.hours ? 1 : -1, 24, h =>
|
|
6763
|
+
const allowed = nextValid(next24, next24 >= value.hours ? 1 : -1, 24, h => isTimeAllowed(h, value.minutes, value.seconds ?? 0));
|
|
6794
6764
|
commit({ hours: allowed });
|
|
6795
6765
|
};
|
|
6796
6766
|
const onMinuteIndex = (next) => {
|
|
6797
6767
|
const m = minuteValues[Math.max(0, Math.min(minuteValues.length - 1, next))];
|
|
6798
|
-
const allowed = nextValid(m, m >= value.minutes ? 1 : -1, 60, mm =>
|
|
6768
|
+
const allowed = nextValid(m, m >= value.minutes ? 1 : -1, 60, mm => isTimeAllowed(value.hours, mm, value.seconds ?? 0));
|
|
6799
6769
|
commit({ minutes: allowed });
|
|
6800
6770
|
};
|
|
6801
6771
|
const onSecondIndex = (next) => {
|
|
6802
|
-
var _a;
|
|
6803
6772
|
const s = secondValues[Math.max(0, Math.min(secondValues.length - 1, next))];
|
|
6804
|
-
const allowed = nextValid(s, s >= (
|
|
6773
|
+
const allowed = nextValid(s, s >= (value.seconds ?? 0) ? 1 : -1, 60, ss => isTimeAllowed(value.hours, value.minutes, ss));
|
|
6805
6774
|
commit({ seconds: allowed });
|
|
6806
6775
|
};
|
|
6807
6776
|
const onAmpmIndex = (next) => {
|
|
@@ -6810,7 +6779,6 @@ const TimeWheels = ({ value, onChange, hourFormat = '24', enableSeconds = false,
|
|
|
6810
6779
|
commit({ hours: (value.hours + 12) % 24 });
|
|
6811
6780
|
};
|
|
6812
6781
|
const onWheelsContainerPointerDown = (e) => {
|
|
6813
|
-
var _a, _b;
|
|
6814
6782
|
if (disabled)
|
|
6815
6783
|
return;
|
|
6816
6784
|
if (e.target.closest(`.${wheelSingleClass}`))
|
|
@@ -6833,7 +6801,7 @@ const TimeWheels = ({ value, onChange, hourFormat = '24', enableSeconds = false,
|
|
|
6833
6801
|
nearestIdx = i;
|
|
6834
6802
|
}
|
|
6835
6803
|
});
|
|
6836
|
-
|
|
6804
|
+
columnOrder[nearestIdx]?.current?.startDrag(e.pointerId, e.clientY);
|
|
6837
6805
|
};
|
|
6838
6806
|
return (jsxRuntime.jsx("div", { id: id, className: classNames(rootClass, className), "aria-disabled": disabled, children: jsxRuntime.jsxs("div", { className: wheelsClass, ref: wheelsContainerRef, onPointerDown: onWheelsContainerPointerDown, children: [jsxRuntime.jsx(Wheel, { ref: hoursRef, values: hourValues, index: hourIndex, onChange: onHourIndex, formatLabel: pad2, ariaLabel: t.hours, visibleCount: visibleCount, itemHeight: itemHeight, disabled: disabled, size: size, color: color, wrap: true, onCommit: onCommit, onFocusPrev: focusPrevOf(hoursRef), onFocusNext: focusNextOf(hoursRef), disabledFor: hourDisabledFor, audioTick: audioTick }), jsxRuntime.jsx("div", { className: sepClass, "aria-hidden": "true", children: ":" }), jsxRuntime.jsx(Wheel, { ref: minutesRef, values: minuteValues, index: minuteIndex, onChange: onMinuteIndex, formatLabel: pad2, ariaLabel: t.minutes, visibleCount: visibleCount, itemHeight: itemHeight, disabled: disabled, size: size, color: color, wrap: true, onCommit: onCommit, onFocusPrev: focusPrevOf(minutesRef), onFocusNext: focusNextOf(minutesRef), disabledFor: minuteDisabledFor, audioTick: audioTick }), enableSeconds && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: sepClass, "aria-hidden": "true", children: ":" }), jsxRuntime.jsx(Wheel, { ref: secondsRef, values: secondValues, index: secondIndex, onChange: onSecondIndex, formatLabel: pad2, ariaLabel: t.seconds, visibleCount: visibleCount, itemHeight: itemHeight, disabled: disabled, size: size, color: color, wrap: true, onFocusPrev: focusPrevOf(secondsRef), onFocusNext: focusNextOf(secondsRef), disabledFor: secondDisabledFor, audioTick: audioTick })] })), hourFormat === '12' && (jsxRuntime.jsx(Wheel, { ref: ampmRef, values: ['AM', 'PM'], index: ampmIndex, onChange: onAmpmIndex, formatLabel: v => v, ariaLabel: t.ampm, visibleCount: visibleCount, itemHeight: itemHeight, disabled: disabled, size: size, color: color, onCommit: onCommit, onFocusPrev: focusPrevOf(ampmRef), onFocusNext: focusNextOf(ampmRef), audioTick: audioTick }))] }) }));
|
|
6839
6807
|
};
|
|
@@ -6855,23 +6823,23 @@ const fromIsoTime = (s) => {
|
|
|
6855
6823
|
return new Date(today.getFullYear(), today.getMonth(), today.getDate(), Number(m[1]), Number(m[2]), m[3] ? Number(m[3]) : 0, 0);
|
|
6856
6824
|
};
|
|
6857
6825
|
const TimeInputBase = React.forwardRef((props, ref) => {
|
|
6858
|
-
var _a, _b, _c, _d;
|
|
6859
6826
|
const { value: controlledValue, defaultValue, onChange, onOpen, onClose, min, max, disabled, readOnly, placeholder, format, parse, locale, inline = false, mobileNative = 'auto', editable = true, popover = true, openOnFocus = true, closeOnSelect = false, position = 'bottom-left', appendToBody = false, color, size, isRounded, hourFormat = '24', enableSeconds = false, incrementHours = 1, incrementMinutes = 1, incrementSeconds = 1, unselectableTimes, className, name, form, required, id, onFocus, onClick, onKeyDown, onBlur, iconLeftName: _iconLeftName, triggerIcon = true, triggerIconName = 'chevron-down', labels, audioTick = false, haptics = false, ...rest } = props;
|
|
6860
6827
|
const hasVibrate = typeof navigator !== 'undefined' &&
|
|
6861
6828
|
typeof navigator.vibrate === 'function';
|
|
6862
6829
|
const effectiveAudioTick = audioTick || (haptics && !hasVibrate);
|
|
6863
6830
|
const t = mergeLabels(labels);
|
|
6864
6831
|
const isControlled = controlledValue !== undefined;
|
|
6865
|
-
const [internalValue, setInternalValue] = React.useState(defaultValue
|
|
6866
|
-
const value = isControlled ? (controlledValue
|
|
6867
|
-
const defaultFormat = format
|
|
6868
|
-
|
|
6869
|
-
?
|
|
6870
|
-
|
|
6871
|
-
|
|
6872
|
-
|
|
6873
|
-
|
|
6874
|
-
|
|
6832
|
+
const [internalValue, setInternalValue] = React.useState(defaultValue ?? null);
|
|
6833
|
+
const value = isControlled ? (controlledValue ?? null) : internalValue;
|
|
6834
|
+
const defaultFormat = format ??
|
|
6835
|
+
(hourFormat === '12'
|
|
6836
|
+
? enableSeconds
|
|
6837
|
+
? 'hh:mm:ss A'
|
|
6838
|
+
: DEFAULT_TIME_FORMAT_12
|
|
6839
|
+
: enableSeconds
|
|
6840
|
+
? 'HH:mm:ss'
|
|
6841
|
+
: DEFAULT_TIME_FORMAT_24);
|
|
6842
|
+
const effectiveHourFormat = hourCycleFromFormat(defaultFormat) ?? hourFormat;
|
|
6875
6843
|
const [open, setOpenState] = React.useState(false);
|
|
6876
6844
|
const [text, setText] = React.useState(value ? formatTime(value, defaultFormat, locale) : '');
|
|
6877
6845
|
const inputRef = React.useRef(null);
|
|
@@ -6905,10 +6873,10 @@ const TimeInputBase = React.forwardRef((props, ref) => {
|
|
|
6905
6873
|
return prev;
|
|
6906
6874
|
if (next) {
|
|
6907
6875
|
valueAtOpenRef.current = value;
|
|
6908
|
-
onOpen
|
|
6876
|
+
onOpen?.();
|
|
6909
6877
|
}
|
|
6910
6878
|
else {
|
|
6911
|
-
onClose
|
|
6879
|
+
onClose?.();
|
|
6912
6880
|
}
|
|
6913
6881
|
return next;
|
|
6914
6882
|
});
|
|
@@ -6919,10 +6887,10 @@ const TimeInputBase = React.forwardRef((props, ref) => {
|
|
|
6919
6887
|
const commitValue = React.useCallback((next) => {
|
|
6920
6888
|
if (!isControlled)
|
|
6921
6889
|
setInternalValue(next);
|
|
6922
|
-
onChange
|
|
6890
|
+
onChange?.(next);
|
|
6923
6891
|
}, [isControlled, onChange]);
|
|
6924
6892
|
const handleSpinnerChange = React.useCallback((parts) => {
|
|
6925
|
-
const base = value
|
|
6893
|
+
const base = value ?? new Date();
|
|
6926
6894
|
const next = setTimeOfDay(base, parts);
|
|
6927
6895
|
if (!isWithin(next, min, max))
|
|
6928
6896
|
return;
|
|
@@ -6935,9 +6903,10 @@ const TimeInputBase = React.forwardRef((props, ref) => {
|
|
|
6935
6903
|
const fmt = typeof format === 'string' ? format : undefined;
|
|
6936
6904
|
return parse
|
|
6937
6905
|
? parse(trimmed)
|
|
6938
|
-
: parseTime(trimmed, fmt
|
|
6939
|
-
|
|
6940
|
-
|
|
6906
|
+
: parseTime(trimmed, fmt ??
|
|
6907
|
+
(typeof defaultFormat === 'string'
|
|
6908
|
+
? defaultFormat
|
|
6909
|
+
: DEFAULT_TIME_FORMAT_24));
|
|
6941
6910
|
}, [parse, format, defaultFormat]);
|
|
6942
6911
|
const makeBaseDate = React.useCallback(() => {
|
|
6943
6912
|
const d = new Date();
|
|
@@ -6993,9 +6962,9 @@ const TimeInputBase = React.forwardRef((props, ref) => {
|
|
|
6993
6962
|
}, min: min ? toIsoTime(min, enableSeconds) : undefined, max: max ? toIsoTime(max, enableSeconds) : undefined, disabled: disabled, readOnly: readOnly, placeholder: placeholder, name: name, form: form, required: required, id: id }));
|
|
6994
6963
|
}
|
|
6995
6964
|
const spinnerValue = {
|
|
6996
|
-
hours:
|
|
6997
|
-
minutes:
|
|
6998
|
-
seconds: enableSeconds ? (
|
|
6965
|
+
hours: value?.getHours() ?? 0,
|
|
6966
|
+
minutes: value?.getMinutes() ?? 0,
|
|
6967
|
+
seconds: enableSeconds ? (value?.getSeconds() ?? 0) : undefined,
|
|
6999
6968
|
};
|
|
7000
6969
|
const panel = (jsxRuntime.jsxs("div", { className: panelClass, children: [jsxRuntime.jsx(TimeWheels, { value: spinnerValue, onChange: handleSpinnerChange, hourFormat: effectiveHourFormat, enableSeconds: enableSeconds, incrementHours: incrementHours, incrementMinutes: incrementMinutes, incrementSeconds: incrementSeconds, unselectableTimes: unselectableTimes, color: color, size: size, disabled: disabled, id: popoverId, labels: labels, itemHeight: wheelItemHeight, audioTick: effectiveAudioTick, onCommit: () => setOpen(false) }), !inline && !isSmallViewport && (jsxRuntime.jsxs(Buttons, { className: footerClass, hasAddons: true, children: [jsxRuntime.jsx("button", { type: "button", className: footerOkClass, onClick: () => setOpen(false), children: t.ok }), jsxRuntime.jsx("button", { type: "button", className: footerButton, onClick: () => {
|
|
7001
6970
|
commitValue(snapTimeToIncrement(new Date(), {
|
|
@@ -7023,13 +6992,12 @@ const TimeInputBase = React.forwardRef((props, ref) => {
|
|
|
7023
6992
|
TimeInputBase.displayName = 'TimeInputBase';
|
|
7024
6993
|
|
|
7025
6994
|
const TimeInput = React.forwardRef(({ label, labelSize, labelProps, horizontal, iconLeft, iconRight, iconLeftName = 'clock', iconRightName, iconLeftSize, iconRightSize, hasIconsLeft, hasIconsRight, isLoading, isExpanded, controlSize, message, messageColor, fieldClassName, controlClassName, ...baseProps }, ref) => {
|
|
7026
|
-
var _a;
|
|
7027
6995
|
const insideField = useInsideField();
|
|
7028
6996
|
const insideControl = useInsideControl();
|
|
7029
6997
|
const helpClass = usePrefixedClassNames('help', {
|
|
7030
6998
|
[`is-${messageColor}`]: !!messageColor,
|
|
7031
6999
|
});
|
|
7032
|
-
let content = (jsxRuntime.jsx(TimeInputBase, { ref: ref, ...baseProps, triggerIcon:
|
|
7000
|
+
let content = (jsxRuntime.jsx(TimeInputBase, { ref: ref, ...baseProps, triggerIcon: baseProps.triggerIcon ?? !isLoading }));
|
|
7033
7001
|
if (!insideControl && !baseProps.inline) {
|
|
7034
7002
|
content = (jsxRuntime.jsx(Control, { iconLeft: iconLeft, iconRight: iconRight, iconLeftName: iconLeftName, iconRightName: iconRightName, iconLeftSize: iconLeftSize, iconRightSize: iconRightSize, hasIconsLeft: hasIconsLeft || !!iconLeftName, hasIconsRight: hasIconsRight, isLoading: isLoading, isExpanded: isExpanded, size: controlSize, className: controlClassName, children: content }));
|
|
7035
7003
|
}
|
|
@@ -7059,27 +7027,27 @@ const fromIsoDateTime = (s) => {
|
|
|
7059
7027
|
return new Date(Number(m[1]), Number(m[2]) - 1, Number(m[3]), Number(m[4]), Number(m[5]), m[6] ? Number(m[6]) : 0, 0);
|
|
7060
7028
|
};
|
|
7061
7029
|
const DateTimeInputBase = React.forwardRef((props, ref) => {
|
|
7062
|
-
var _a, _b, _c, _d;
|
|
7063
7030
|
const { value: controlledValue, defaultValue, onChange, onOpen, onClose, min, max, disabled, readOnly, placeholder, format, parse, locale, inline = false, mobileNative = 'auto', editable = true, popover = true, openOnFocus = true, closeOnSelect = false, position = 'bottom-left', appendToBody = false, color, size, isRounded, shouldDisableDate, unselectableDates, firstDayOfWeek = 0, dayNames, monthNames, nearbyMonthDays = true, hourFormat = '24', enableSeconds = false, incrementHours = 1, incrementMinutes = 1, incrementSeconds = 1, unselectableTimes, className, name, form, required, id, onFocus, onClick, onKeyDown, onBlur, iconLeftName: _iconLeftName, triggerIcon = true, triggerIconName = 'chevron-down', audioTick = false, haptics = false, labels, ...rest } = props;
|
|
7064
7031
|
const t = mergeLabels(labels);
|
|
7065
7032
|
const hasVibrate = typeof navigator !== 'undefined' && typeof navigator.vibrate === 'function';
|
|
7066
7033
|
const effectiveAudioTick = audioTick || (haptics && !hasVibrate);
|
|
7067
7034
|
const isControlled = controlledValue !== undefined;
|
|
7068
|
-
const [internalValue, setInternalValue] = React.useState(defaultValue
|
|
7069
|
-
const value = isControlled ? (controlledValue
|
|
7070
|
-
const initialFocused = React.useMemo(() => clampDate(value
|
|
7035
|
+
const [internalValue, setInternalValue] = React.useState(defaultValue ?? null);
|
|
7036
|
+
const value = isControlled ? (controlledValue ?? null) : internalValue;
|
|
7037
|
+
const initialFocused = React.useMemo(() => clampDate(value ?? new Date(), min, max), []);
|
|
7071
7038
|
const [focusedDate, setFocusedDate] = React.useState(initialFocused);
|
|
7072
7039
|
React.useEffect(() => {
|
|
7073
7040
|
setFocusedDate(prev => clampDate(prev, min, max));
|
|
7074
7041
|
}, [min, max]);
|
|
7075
|
-
const defaultFormat = format
|
|
7076
|
-
|
|
7077
|
-
?
|
|
7078
|
-
|
|
7079
|
-
|
|
7080
|
-
|
|
7081
|
-
|
|
7082
|
-
|
|
7042
|
+
const defaultFormat = format ??
|
|
7043
|
+
(hourFormat === '12'
|
|
7044
|
+
? enableSeconds
|
|
7045
|
+
? 'YYYY-MM-DD hh:mm:ss A'
|
|
7046
|
+
: 'YYYY-MM-DD hh:mm A'
|
|
7047
|
+
: enableSeconds
|
|
7048
|
+
? 'YYYY-MM-DD HH:mm:ss'
|
|
7049
|
+
: DEFAULT_DATETIME_FORMAT);
|
|
7050
|
+
const effectiveHourFormat = hourCycleFromFormat(defaultFormat) ?? hourFormat;
|
|
7083
7051
|
const [open, setOpenState] = React.useState(false);
|
|
7084
7052
|
const [timeOpen, setTimeOpen] = React.useState(false);
|
|
7085
7053
|
const [text, setText] = React.useState(value ? formatDateTime(value, defaultFormat, locale) : '');
|
|
@@ -7124,10 +7092,10 @@ const DateTimeInputBase = React.forwardRef((props, ref) => {
|
|
|
7124
7092
|
return prev;
|
|
7125
7093
|
if (next) {
|
|
7126
7094
|
valueAtOpenRef.current = value;
|
|
7127
|
-
onOpen
|
|
7095
|
+
onOpen?.();
|
|
7128
7096
|
}
|
|
7129
7097
|
else {
|
|
7130
|
-
onClose
|
|
7098
|
+
onClose?.();
|
|
7131
7099
|
}
|
|
7132
7100
|
return next;
|
|
7133
7101
|
});
|
|
@@ -7144,14 +7112,13 @@ const DateTimeInputBase = React.forwardRef((props, ref) => {
|
|
|
7144
7112
|
setInternalValue(next);
|
|
7145
7113
|
if (next)
|
|
7146
7114
|
setFocusedDate(next);
|
|
7147
|
-
onChange
|
|
7115
|
+
onChange?.(next);
|
|
7148
7116
|
}, [isControlled, onChange]);
|
|
7149
7117
|
const handleDateSelect = React.useCallback((d) => {
|
|
7150
|
-
var _a, _b, _c;
|
|
7151
7118
|
const merged = setTimeOfDay(d, {
|
|
7152
|
-
hours:
|
|
7153
|
-
minutes:
|
|
7154
|
-
seconds: enableSeconds ? (
|
|
7119
|
+
hours: value?.getHours() ?? 0,
|
|
7120
|
+
minutes: value?.getMinutes() ?? 0,
|
|
7121
|
+
seconds: enableSeconds ? (value?.getSeconds() ?? 0) : undefined,
|
|
7155
7122
|
});
|
|
7156
7123
|
if (!isWithin(merged, min, max))
|
|
7157
7124
|
return;
|
|
@@ -7159,7 +7126,7 @@ const DateTimeInputBase = React.forwardRef((props, ref) => {
|
|
|
7159
7126
|
setFocusedDate(d);
|
|
7160
7127
|
}, [value, enableSeconds, min, max, commitValue]);
|
|
7161
7128
|
const handleTimeChange = React.useCallback((parts) => {
|
|
7162
|
-
const base = value
|
|
7129
|
+
const base = value ?? focusedDate;
|
|
7163
7130
|
const next = setTimeOfDay(base, parts);
|
|
7164
7131
|
if (!isWithin(next, min, max))
|
|
7165
7132
|
return;
|
|
@@ -7172,17 +7139,17 @@ const DateTimeInputBase = React.forwardRef((props, ref) => {
|
|
|
7172
7139
|
if (parse)
|
|
7173
7140
|
return parse(trimmed);
|
|
7174
7141
|
const fmt = typeof defaultFormat === 'string' ? defaultFormat : undefined;
|
|
7175
|
-
return parseDate(trimmed, fmt
|
|
7142
|
+
return parseDate(trimmed, fmt ?? DEFAULT_DATETIME_FORMAT);
|
|
7176
7143
|
}, [parse, defaultFormat, locale]);
|
|
7177
7144
|
const makeBaseDate = React.useCallback(() => new Date(), []);
|
|
7178
7145
|
const inputReadOnlyAttr = !!readOnly || !editable;
|
|
7179
7146
|
const canOpen = !!popover && !disabled && !readOnly;
|
|
7180
7147
|
const isBlocked = React.useMemo(() => {
|
|
7181
|
-
if (!shouldDisableDate && !
|
|
7148
|
+
if (!shouldDisableDate && !unselectableDates?.length && !unselectableTimes)
|
|
7182
7149
|
return undefined;
|
|
7183
|
-
return (d) => !!
|
|
7184
|
-
!!
|
|
7185
|
-
!!
|
|
7150
|
+
return (d) => !!shouldDisableDate?.(d) ||
|
|
7151
|
+
!!unselectableDates?.some(u => isSameDay(u, d)) ||
|
|
7152
|
+
!!unselectableTimes?.(d);
|
|
7186
7153
|
}, [shouldDisableDate, unselectableDates, unselectableTimes]);
|
|
7187
7154
|
const { inputHandlers } = useSegmentedEntry({
|
|
7188
7155
|
format: defaultFormat,
|
|
@@ -7230,9 +7197,9 @@ const DateTimeInputBase = React.forwardRef((props, ref) => {
|
|
|
7230
7197
|
}, min: min ? toIsoDateTime(min, enableSeconds) : undefined, max: max ? toIsoDateTime(max, enableSeconds) : undefined, disabled: disabled, readOnly: readOnly, placeholder: placeholder, name: name, form: form, required: required, id: id }));
|
|
7231
7198
|
}
|
|
7232
7199
|
const spinnerValue = {
|
|
7233
|
-
hours:
|
|
7234
|
-
minutes:
|
|
7235
|
-
seconds: enableSeconds ? (
|
|
7200
|
+
hours: value?.getHours() ?? 0,
|
|
7201
|
+
minutes: value?.getMinutes() ?? 0,
|
|
7202
|
+
seconds: enableSeconds ? (value?.getSeconds() ?? 0) : undefined,
|
|
7236
7203
|
};
|
|
7237
7204
|
const panel = (jsxRuntime.jsxs("div", { className: panelClass, onKeyDown: e => {
|
|
7238
7205
|
if (timeOpen && e.key === 'Escape') {
|
|
@@ -7254,13 +7221,12 @@ const DateTimeInputBase = React.forwardRef((props, ref) => {
|
|
|
7254
7221
|
DateTimeInputBase.displayName = 'DateTimeInputBase';
|
|
7255
7222
|
|
|
7256
7223
|
const DateTimeInput = React.forwardRef(({ label, labelSize, labelProps, horizontal, iconLeft, iconRight, iconLeftName = 'calendar-alt', iconRightName, iconLeftSize, iconRightSize, hasIconsLeft, hasIconsRight, isLoading, isExpanded, controlSize, message, messageColor, fieldClassName, controlClassName, ...baseProps }, ref) => {
|
|
7257
|
-
var _a;
|
|
7258
7224
|
const insideField = useInsideField();
|
|
7259
7225
|
const insideControl = useInsideControl();
|
|
7260
7226
|
const helpClass = usePrefixedClassNames('help', {
|
|
7261
7227
|
[`is-${messageColor}`]: !!messageColor,
|
|
7262
7228
|
});
|
|
7263
|
-
let content = (jsxRuntime.jsx(DateTimeInputBase, { ref: ref, ...baseProps, triggerIcon:
|
|
7229
|
+
let content = (jsxRuntime.jsx(DateTimeInputBase, { ref: ref, ...baseProps, triggerIcon: baseProps.triggerIcon ?? !isLoading }));
|
|
7264
7230
|
if (!insideControl && !baseProps.inline) {
|
|
7265
7231
|
content = (jsxRuntime.jsx(Control, { iconLeft: iconLeft, iconRight: iconRight, iconLeftName: iconLeftName, iconRightName: iconRightName, iconLeftSize: iconLeftSize, iconRightSize: iconRightSize, hasIconsLeft: hasIconsLeft || !!iconLeftName, hasIconsRight: hasIconsRight, isLoading: isLoading, isExpanded: isExpanded, size: controlSize, className: controlClassName, children: content }));
|
|
7266
7232
|
}
|
|
@@ -7943,7 +7909,7 @@ const Container = ({ className, textColor, bgColor, fluid, widescreen, fullhd, b
|
|
|
7943
7909
|
|
|
7944
7910
|
const Footer = ({ as = 'footer', className, children, color, bgColor, textColor, ...props }) => {
|
|
7945
7911
|
const { bulmaHelperClasses, rest } = useBulmaClasses({
|
|
7946
|
-
color: textColor
|
|
7912
|
+
color: textColor ?? color,
|
|
7947
7913
|
backgroundColor: bgColor,
|
|
7948
7914
|
...props,
|
|
7949
7915
|
});
|
|
@@ -7968,7 +7934,7 @@ const Hero = ({ className, color, size, bgColor, fullheightWithNavbar, children,
|
|
|
7968
7934
|
};
|
|
7969
7935
|
const HeroHead = ({ className, children, color, bgColor, textColor, ...props }) => {
|
|
7970
7936
|
const { bulmaHelperClasses, rest } = useBulmaClasses({
|
|
7971
|
-
color: textColor
|
|
7937
|
+
color: textColor ?? color,
|
|
7972
7938
|
backgroundColor: bgColor,
|
|
7973
7939
|
...props,
|
|
7974
7940
|
});
|
|
@@ -7978,7 +7944,7 @@ const HeroHead = ({ className, children, color, bgColor, textColor, ...props })
|
|
|
7978
7944
|
};
|
|
7979
7945
|
const HeroBody = ({ className, children, color, bgColor, textColor, ...props }) => {
|
|
7980
7946
|
const { bulmaHelperClasses, rest } = useBulmaClasses({
|
|
7981
|
-
color: textColor
|
|
7947
|
+
color: textColor ?? color,
|
|
7982
7948
|
backgroundColor: bgColor,
|
|
7983
7949
|
...props,
|
|
7984
7950
|
});
|
|
@@ -7988,7 +7954,7 @@ const HeroBody = ({ className, children, color, bgColor, textColor, ...props })
|
|
|
7988
7954
|
};
|
|
7989
7955
|
const HeroFoot = ({ className, children, color, bgColor, textColor, ...props }) => {
|
|
7990
7956
|
const { bulmaHelperClasses, rest } = useBulmaClasses({
|
|
7991
|
-
color: textColor
|
|
7957
|
+
color: textColor ?? color,
|
|
7992
7958
|
backgroundColor: bgColor,
|
|
7993
7959
|
...props,
|
|
7994
7960
|
});
|
|
@@ -8002,7 +7968,7 @@ Hero.Foot = HeroFoot;
|
|
|
8002
7968
|
|
|
8003
7969
|
const Level = ({ isMobile, className, children, color, bgColor, textColor, ...props }) => {
|
|
8004
7970
|
const { bulmaHelperClasses, rest } = useBulmaClasses({
|
|
8005
|
-
color: textColor
|
|
7971
|
+
color: textColor ?? color,
|
|
8006
7972
|
backgroundColor: bgColor,
|
|
8007
7973
|
...props,
|
|
8008
7974
|
});
|
|
@@ -8014,7 +7980,7 @@ const Level = ({ isMobile, className, children, color, bgColor, textColor, ...pr
|
|
|
8014
7980
|
};
|
|
8015
7981
|
const LevelLeft = ({ className, children, color, bgColor, textColor, ...props }) => {
|
|
8016
7982
|
const { bulmaHelperClasses, rest } = useBulmaClasses({
|
|
8017
|
-
color: textColor
|
|
7983
|
+
color: textColor ?? color,
|
|
8018
7984
|
backgroundColor: bgColor,
|
|
8019
7985
|
...props,
|
|
8020
7986
|
});
|
|
@@ -8024,7 +7990,7 @@ const LevelLeft = ({ className, children, color, bgColor, textColor, ...props })
|
|
|
8024
7990
|
};
|
|
8025
7991
|
const LevelRight = ({ className, children, color, bgColor, textColor, ...props }) => {
|
|
8026
7992
|
const { bulmaHelperClasses, rest } = useBulmaClasses({
|
|
8027
|
-
color: textColor
|
|
7993
|
+
color: textColor ?? color,
|
|
8028
7994
|
backgroundColor: bgColor,
|
|
8029
7995
|
...props,
|
|
8030
7996
|
});
|
|
@@ -8034,7 +8000,7 @@ const LevelRight = ({ className, children, color, bgColor, textColor, ...props }
|
|
|
8034
8000
|
};
|
|
8035
8001
|
const LevelItem = ({ as = 'div', hasTextCentered, className, children, href, target, rel, color, bgColor, textColor, ...props }) => {
|
|
8036
8002
|
const { bulmaHelperClasses, rest } = useBulmaClasses({
|
|
8037
|
-
color: textColor
|
|
8003
|
+
color: textColor ?? color,
|
|
8038
8004
|
backgroundColor: bgColor,
|
|
8039
8005
|
...props,
|
|
8040
8006
|
});
|
|
@@ -8054,7 +8020,7 @@ Level.Item = LevelItem;
|
|
|
8054
8020
|
|
|
8055
8021
|
const Media = ({ as = 'article', className, children, color, bgColor, textColor, ...props }) => {
|
|
8056
8022
|
const { bulmaHelperClasses, rest } = useBulmaClasses({
|
|
8057
|
-
color: textColor
|
|
8023
|
+
color: textColor ?? color,
|
|
8058
8024
|
backgroundColor: bgColor,
|
|
8059
8025
|
...props,
|
|
8060
8026
|
});
|
|
@@ -8065,7 +8031,7 @@ const Media = ({ as = 'article', className, children, color, bgColor, textColor,
|
|
|
8065
8031
|
};
|
|
8066
8032
|
const MediaLeft = ({ as = 'figure', className, children, color, bgColor, textColor, ...props }) => {
|
|
8067
8033
|
const { bulmaHelperClasses, rest } = useBulmaClasses({
|
|
8068
|
-
color: textColor
|
|
8034
|
+
color: textColor ?? color,
|
|
8069
8035
|
backgroundColor: bgColor,
|
|
8070
8036
|
...props,
|
|
8071
8037
|
});
|
|
@@ -8076,7 +8042,7 @@ const MediaLeft = ({ as = 'figure', className, children, color, bgColor, textCol
|
|
|
8076
8042
|
};
|
|
8077
8043
|
const MediaContent = ({ className, children, color, bgColor, textColor, ...props }) => {
|
|
8078
8044
|
const { bulmaHelperClasses, rest } = useBulmaClasses({
|
|
8079
|
-
color: textColor
|
|
8045
|
+
color: textColor ?? color,
|
|
8080
8046
|
backgroundColor: bgColor,
|
|
8081
8047
|
...props,
|
|
8082
8048
|
});
|
|
@@ -8086,7 +8052,7 @@ const MediaContent = ({ className, children, color, bgColor, textColor, ...props
|
|
|
8086
8052
|
};
|
|
8087
8053
|
const MediaRight = ({ className, children, color, bgColor, textColor, ...props }) => {
|
|
8088
8054
|
const { bulmaHelperClasses, rest } = useBulmaClasses({
|
|
8089
|
-
color: textColor
|
|
8055
|
+
color: textColor ?? color,
|
|
8090
8056
|
backgroundColor: bgColor,
|
|
8091
8057
|
...props,
|
|
8092
8058
|
});
|
|
@@ -8101,7 +8067,7 @@ MediaWithSubcomponents.Right = MediaRight;
|
|
|
8101
8067
|
|
|
8102
8068
|
const Section = ({ size, className, children, color, bgColor, textColor, ...props }) => {
|
|
8103
8069
|
const { bulmaHelperClasses, rest } = useBulmaClasses({
|
|
8104
|
-
color: textColor
|
|
8070
|
+
color: textColor ?? color,
|
|
8105
8071
|
backgroundColor: bgColor,
|
|
8106
8072
|
...props,
|
|
8107
8073
|
});
|