@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.esm.js
CHANGED
|
@@ -760,7 +760,7 @@ const CardComponent = ({ className, children, textColor, bgColor, hasShadow = tr
|
|
|
760
760
|
'is-centered': headerCentered,
|
|
761
761
|
}), children: header })), headerIcon] }));
|
|
762
762
|
};
|
|
763
|
-
return (jsxs("div", { className: cardClasses, ...rest, children: [renderHeader(header, headerIcon, headerCentered, classPrefix), image && (jsx("div", { className: prefixedClassNames(classPrefix, 'card-image'), children: typeof image === 'string' ? (jsx("figure", { className: prefixedClassNames(classPrefix, 'image'), children: jsx("img", { src: image, alt: imageAlt
|
|
763
|
+
return (jsxs("div", { className: cardClasses, ...rest, children: [renderHeader(header, headerIcon, headerCentered, classPrefix), image && (jsx("div", { className: prefixedClassNames(classPrefix, 'card-image'), children: typeof image === 'string' ? (jsx("figure", { className: prefixedClassNames(classPrefix, 'image'), children: jsx("img", { src: image, alt: imageAlt ?? 'Card image' }) })) : (image) })), typeof children !== 'undefined' &&
|
|
764
764
|
children !== null &&
|
|
765
765
|
children !== '' &&
|
|
766
766
|
!hasCompoundComponents(children) && (jsx("div", { className: prefixedClassNames(classPrefix, 'card-content'), children: children })), typeof children !== 'undefined' &&
|
|
@@ -823,10 +823,9 @@ const DropdownComponent = ({ label, children, className, menuClassName, active:
|
|
|
823
823
|
if (!isBrowser$1(window, document))
|
|
824
824
|
return;
|
|
825
825
|
const handleClick = (e) => {
|
|
826
|
-
|
|
827
|
-
if (!((_a = dropdownRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
|
|
826
|
+
if (!dropdownRef.current?.contains(e.target)) {
|
|
828
827
|
setActive(false);
|
|
829
|
-
onActiveChange
|
|
828
|
+
onActiveChange?.(false);
|
|
830
829
|
}
|
|
831
830
|
};
|
|
832
831
|
document.addEventListener('mousedown', handleClick);
|
|
@@ -837,12 +836,12 @@ const DropdownComponent = ({ label, children, className, menuClassName, active:
|
|
|
837
836
|
return;
|
|
838
837
|
const newActive = !active;
|
|
839
838
|
setActive(newActive);
|
|
840
|
-
onActiveChange
|
|
839
|
+
onActiveChange?.(newActive);
|
|
841
840
|
};
|
|
842
841
|
const handleMenuClick = () => {
|
|
843
842
|
if (closeOnClick) {
|
|
844
843
|
setActive(false);
|
|
845
|
-
onActiveChange
|
|
844
|
+
onActiveChange?.(false);
|
|
846
845
|
}
|
|
847
846
|
};
|
|
848
847
|
const dropdownClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
|
|
@@ -963,14 +962,13 @@ const ModalClose = ({ className, size = 'large', variant = 'delete', ...props })
|
|
|
963
962
|
return (jsx("button", { className: classes, "aria-label": "close", type: "button", ...props }));
|
|
964
963
|
};
|
|
965
964
|
const ModalRoot = ({ active, isActive, onClose, className, textColor, bgColor, modalCardTitle, modalCardFoot, type, children, ...props }) => {
|
|
966
|
-
var _a;
|
|
967
965
|
const { classPrefix } = useConfig();
|
|
968
966
|
const { bulmaHelperClasses, rest } = useBulmaClasses({
|
|
969
967
|
color: textColor,
|
|
970
968
|
backgroundColor: bgColor,
|
|
971
969
|
...props,
|
|
972
970
|
});
|
|
973
|
-
const isModalActive =
|
|
971
|
+
const isModalActive = active ?? isActive ?? false;
|
|
974
972
|
const hasCompoundComponents = React.Children.toArray(children).some(child => React.isValidElement(child) &&
|
|
975
973
|
(child.type === ModalBackground ||
|
|
976
974
|
child.type === ModalContent ||
|
|
@@ -1031,13 +1029,12 @@ const NavbarItem = ({ className, as: Component = 'a', active, textColor, bgColor
|
|
|
1031
1029
|
}), bulmaHelperClasses, className), ...rest, children: children }));
|
|
1032
1030
|
};
|
|
1033
1031
|
const NavbarBurger = ({ className, active, children, ...props }) => {
|
|
1034
|
-
var _a;
|
|
1035
1032
|
const { bulmaHelperClasses, rest } = useBulmaClasses({
|
|
1036
1033
|
...props,
|
|
1037
1034
|
});
|
|
1038
1035
|
return (jsxs("button", { type: "button", className: classNames(usePrefixedClassNames('navbar-burger', {
|
|
1039
1036
|
'is-active': active,
|
|
1040
|
-
}), bulmaHelperClasses, className), "aria-label": props['aria-label'] || 'menu', "aria-expanded":
|
|
1037
|
+
}), bulmaHelperClasses, className), "aria-label": props['aria-label'] || 'menu', "aria-expanded": props['aria-expanded'] ?? !!active, ...rest, children: [jsx("span", { "aria-hidden": "true" }), jsx("span", { "aria-hidden": "true" }), jsx("span", { "aria-hidden": "true" }), children] }));
|
|
1041
1038
|
};
|
|
1042
1039
|
const NavbarMenu = ({ className, active, children, ...props }) => {
|
|
1043
1040
|
const { bulmaHelperClasses, rest } = useBulmaClasses({
|
|
@@ -1351,7 +1348,7 @@ const Tabs = ({ align, size, fullwidth, boxed, toggle, rounded, color, value, on
|
|
|
1351
1348
|
if (!isControlled) {
|
|
1352
1349
|
setInternalTab(index);
|
|
1353
1350
|
}
|
|
1354
|
-
onChange
|
|
1351
|
+
onChange?.(index);
|
|
1355
1352
|
}, [isControlled, onChange]);
|
|
1356
1353
|
const contextValue = { activeTab, setActiveTab };
|
|
1357
1354
|
const tabsClasses = usePrefixedClassNames('tabs', {
|
|
@@ -1521,10 +1518,10 @@ const Collapse = ({ open: controlledOpen, defaultOpen = false, onOpen, onClose,
|
|
|
1521
1518
|
const newOpen = !internalOpen;
|
|
1522
1519
|
setInternalOpen(newOpen);
|
|
1523
1520
|
if (newOpen) {
|
|
1524
|
-
onOpen
|
|
1521
|
+
onOpen?.();
|
|
1525
1522
|
}
|
|
1526
1523
|
else {
|
|
1527
|
-
onClose
|
|
1524
|
+
onClose?.();
|
|
1528
1525
|
}
|
|
1529
1526
|
}
|
|
1530
1527
|
}, [isControlled, internalOpen, onOpen, onClose]);
|
|
@@ -1743,7 +1740,7 @@ const Step = ({ isActive = false, isCompleted = false, label, icon, clickable =
|
|
|
1743
1740
|
const markerContent = icon ||
|
|
1744
1741
|
(isCompleted && resolvedCompletedIcon
|
|
1745
1742
|
? resolvedCompletedIcon
|
|
1746
|
-
: (stepNumber
|
|
1743
|
+
: (stepNumber ?? null));
|
|
1747
1744
|
return (jsx("li", { className: stepClasses, onClick: handleClick, onKeyDown: handleKeyDown, tabIndex: clickable ? 0 : undefined, role: clickable ? 'button' : undefined, "aria-current": isActive ? 'step' : undefined, ...rest, children: jsxs("div", { className: "steps-link", children: [jsx("span", { className: "steps-marker", children: markerContent }), (label || children) && (jsx("div", { className: "steps-content", children: jsx("p", { className: "steps-title", children: label || children }) }))] }) }));
|
|
1748
1745
|
};
|
|
1749
1746
|
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 }) => {
|
|
@@ -1784,7 +1781,7 @@ const Steps = ({ value = 0, items, size, color, hasMarker = true, animated = tru
|
|
|
1784
1781
|
}
|
|
1785
1782
|
return null;
|
|
1786
1783
|
};
|
|
1787
|
-
return (jsxs("div", { className: combinedClasses, ...rest, children: [jsx("ul", { className: listClasses, children: renderSteps() }), hasNavigation && (jsxs("div", { className: "steps-navigation", children: [jsx("button", { className: "button", disabled: value === 0, onClick: onPrev
|
|
1784
|
+
return (jsxs("div", { className: combinedClasses, ...rest, children: [jsx("ul", { className: listClasses, children: renderSteps() }), hasNavigation && (jsxs("div", { className: "steps-navigation", children: [jsx("button", { className: "button", disabled: value === 0, onClick: onPrev ?? (() => onStepClick?.(value - 1)), children: prevLabel ?? 'Previous' }), jsx("button", { className: "button is-primary", disabled: value === totalSteps - 1, onClick: onNext ?? (() => onStepClick?.(value + 1)), children: nextLabel ?? 'Next' })] }))] }));
|
|
1788
1785
|
};
|
|
1789
1786
|
Steps.Step = Step;
|
|
1790
1787
|
|
|
@@ -1905,10 +1902,10 @@ const Toast = forwardRef(({ message, type = 'default', actionType, position = 't
|
|
|
1905
1902
|
const toastRef = useRef(null);
|
|
1906
1903
|
const handleClose = useCallback(() => {
|
|
1907
1904
|
setIsVisible(false);
|
|
1908
|
-
onClose
|
|
1905
|
+
onClose?.();
|
|
1909
1906
|
}, [onClose]);
|
|
1910
1907
|
const handleAction = useCallback(() => {
|
|
1911
|
-
onAction
|
|
1908
|
+
onAction?.();
|
|
1912
1909
|
handleClose();
|
|
1913
1910
|
}, [onAction, handleClose]);
|
|
1914
1911
|
useEffect(() => {
|
|
@@ -2095,11 +2092,11 @@ const Dialog = forwardRef(({ isOpen, title, message, type = 'default', confirmTe
|
|
|
2095
2092
|
const cancelRef = useRef(null);
|
|
2096
2093
|
const handleCancel = useCallback(() => {
|
|
2097
2094
|
if (canCancel) {
|
|
2098
|
-
onCancel
|
|
2095
|
+
onCancel?.();
|
|
2099
2096
|
}
|
|
2100
2097
|
}, [canCancel, onCancel]);
|
|
2101
2098
|
const handleConfirm = useCallback(() => {
|
|
2102
|
-
onConfirm
|
|
2099
|
+
onConfirm?.();
|
|
2103
2100
|
}, [onConfirm]);
|
|
2104
2101
|
const handleBackgroundClick = useCallback(() => {
|
|
2105
2102
|
if (canCancel) {
|
|
@@ -2120,7 +2117,7 @@ const Dialog = forwardRef(({ isOpen, title, message, type = 'default', confirmTe
|
|
|
2120
2117
|
useEffect(() => {
|
|
2121
2118
|
if (isOpen) {
|
|
2122
2119
|
const buttonToFocus = focusCancel && showCancel ? cancelRef.current : confirmRef.current;
|
|
2123
|
-
buttonToFocus
|
|
2120
|
+
buttonToFocus?.focus();
|
|
2124
2121
|
}
|
|
2125
2122
|
}, [isOpen, focusCancel, showCancel]);
|
|
2126
2123
|
useEffect(() => {
|
|
@@ -2320,7 +2317,7 @@ const Carousel = forwardRef(({ value: controlledValue, autoplay = false, interva
|
|
|
2320
2317
|
if (syncDisplay) {
|
|
2321
2318
|
setDisplayIndex(newIndex);
|
|
2322
2319
|
}
|
|
2323
|
-
onChange
|
|
2320
|
+
onChange?.(newIndex);
|
|
2324
2321
|
}, [controlledValue, itemCount, repeat, onChange]);
|
|
2325
2322
|
const goToPrev = useCallback(() => {
|
|
2326
2323
|
if (activeIndex === 0 && repeat && itemCount > 1) {
|
|
@@ -2408,8 +2405,7 @@ const Carousel = forwardRef(({ value: controlledValue, autoplay = false, interva
|
|
|
2408
2405
|
}, [handleDragEnd]);
|
|
2409
2406
|
useEffect(() => {
|
|
2410
2407
|
const handleKeyDown = (e) => {
|
|
2411
|
-
|
|
2412
|
-
if (!((_a = carouselRef.current) === null || _a === void 0 ? void 0 : _a.contains(document.activeElement)))
|
|
2408
|
+
if (!carouselRef.current?.contains(document.activeElement))
|
|
2413
2409
|
return;
|
|
2414
2410
|
switch (e.key) {
|
|
2415
2411
|
case 'ArrowLeft':
|
|
@@ -3115,17 +3111,16 @@ const Checkbox = forwardRef(({ color, size, className, children, textColor, disa
|
|
|
3115
3111
|
...props,
|
|
3116
3112
|
});
|
|
3117
3113
|
const group = useCheckboxesGroup();
|
|
3118
|
-
const effectiveName = name
|
|
3119
|
-
const groupManaged =
|
|
3114
|
+
const effectiveName = name ?? group?.name;
|
|
3115
|
+
const groupManaged = group?.value !== undefined && value !== undefined;
|
|
3120
3116
|
const groupHas = groupManaged && group.value.includes(String(value));
|
|
3121
3117
|
const effectiveChecked = checked !== undefined ? checked : groupManaged ? groupHas : undefined;
|
|
3122
3118
|
const effectiveDefaultChecked = groupManaged ? undefined : defaultChecked;
|
|
3123
3119
|
const handleChange = useCallback((e) => {
|
|
3124
|
-
|
|
3125
|
-
|
|
3126
|
-
if ((group === null || group === void 0 ? void 0 : group.onChange) && value !== undefined) {
|
|
3120
|
+
onChange?.(e);
|
|
3121
|
+
if (group?.onChange && value !== undefined) {
|
|
3127
3122
|
const valStr = String(value);
|
|
3128
|
-
const currentArr =
|
|
3123
|
+
const currentArr = group.value ?? [];
|
|
3129
3124
|
const next = e.target.checked
|
|
3130
3125
|
? currentArr.includes(valStr)
|
|
3131
3126
|
? currentArr
|
|
@@ -3186,29 +3181,23 @@ const Field = ({ horizontal, grouped, hasAddons, narrow, label, labelSize, label
|
|
|
3186
3181
|
'is-grouped-multiline': grouped === 'multiline',
|
|
3187
3182
|
});
|
|
3188
3183
|
const fieldClass = classNames(mainClass, bulmaHelperClasses, className);
|
|
3189
|
-
const effectiveLabelSize = labelSize
|
|
3184
|
+
const effectiveLabelSize = labelSize ?? (horizontal ? 'normal' : undefined);
|
|
3190
3185
|
const labelClass = usePrefixedClassNames('label');
|
|
3191
3186
|
let renderedLabel = null;
|
|
3192
3187
|
if (label) {
|
|
3193
3188
|
if (horizontal) {
|
|
3194
|
-
renderedLabel = (jsx(FieldLabel, { size: effectiveLabelSize, children: jsx("label", { ...labelProps, className: classNames(labelClass, labelProps
|
|
3189
|
+
renderedLabel = (jsx(FieldLabel, { size: effectiveLabelSize, children: jsx("label", { ...labelProps, className: classNames(labelClass, labelProps?.className), style: labelProps?.style, children: label }) }));
|
|
3195
3190
|
}
|
|
3196
3191
|
else {
|
|
3197
|
-
renderedLabel = (jsx("label", { ...labelProps, className: classNames(labelClass, labelProps
|
|
3192
|
+
renderedLabel = (jsx("label", { ...labelProps, className: classNames(labelClass, labelProps?.className), style: { display: 'block', ...(labelProps?.style || {}) }, children: label }));
|
|
3198
3193
|
}
|
|
3199
3194
|
}
|
|
3200
3195
|
let content = children;
|
|
3201
3196
|
if (horizontal) {
|
|
3202
|
-
const isFieldBody = (c) =>
|
|
3203
|
-
|
|
3204
|
-
|
|
3205
|
-
|
|
3206
|
-
};
|
|
3207
|
-
const isFieldLabel = (c) => {
|
|
3208
|
-
var _a;
|
|
3209
|
-
return React.isValidElement(c) &&
|
|
3210
|
-
(c.type === FieldLabel || ((_a = c.type) === null || _a === void 0 ? void 0 : _a.displayName) === 'FieldLabel');
|
|
3211
|
-
};
|
|
3197
|
+
const isFieldBody = (c) => React.isValidElement(c) &&
|
|
3198
|
+
(c.type === FieldBody || c.type?.displayName === 'FieldBody');
|
|
3199
|
+
const isFieldLabel = (c) => React.isValidElement(c) &&
|
|
3200
|
+
(c.type === FieldLabel || c.type?.displayName === 'FieldLabel');
|
|
3212
3201
|
const childArray = React.Children.toArray(children);
|
|
3213
3202
|
const userProvidedStructure = childArray.some(c => isFieldBody(c) || isFieldLabel(c));
|
|
3214
3203
|
if (userProvidedStructure) {
|
|
@@ -3286,7 +3275,7 @@ const Checkboxes = ({ label, labelSize, labelProps, horizontal, message, message
|
|
|
3286
3275
|
const handleChange = useCallback((newValues) => {
|
|
3287
3276
|
if (!isControlled)
|
|
3288
3277
|
setInternalValue(newValues);
|
|
3289
|
-
onChange
|
|
3278
|
+
onChange?.(newValues);
|
|
3290
3279
|
}, [isControlled, onChange]);
|
|
3291
3280
|
const ctx = useMemo(() => ({
|
|
3292
3281
|
name,
|
|
@@ -3355,8 +3344,8 @@ const Radio = forwardRef(({ color, size, className, children, textColor, disable
|
|
|
3355
3344
|
...props,
|
|
3356
3345
|
});
|
|
3357
3346
|
const group = useRadiosGroup();
|
|
3358
|
-
const effectiveName = name
|
|
3359
|
-
const groupManaged =
|
|
3347
|
+
const effectiveName = name ?? group?.name;
|
|
3348
|
+
const groupManaged = group?.value !== undefined && value !== undefined;
|
|
3360
3349
|
const effectiveChecked = checked !== undefined
|
|
3361
3350
|
? checked
|
|
3362
3351
|
: groupManaged
|
|
@@ -3364,8 +3353,8 @@ const Radio = forwardRef(({ color, size, className, children, textColor, disable
|
|
|
3364
3353
|
: undefined;
|
|
3365
3354
|
const effectiveDefaultChecked = groupManaged ? undefined : defaultChecked;
|
|
3366
3355
|
const handleChange = useCallback((e) => {
|
|
3367
|
-
onChange
|
|
3368
|
-
if (
|
|
3356
|
+
onChange?.(e);
|
|
3357
|
+
if (group?.onChange && value !== undefined) {
|
|
3369
3358
|
group.onChange(String(value));
|
|
3370
3359
|
}
|
|
3371
3360
|
}, [onChange, group, value]);
|
|
@@ -3397,7 +3386,7 @@ const Radios = ({ label, labelSize, labelProps, horizontal, message, messageColo
|
|
|
3397
3386
|
const handleChange = useCallback((newValue) => {
|
|
3398
3387
|
if (!isControlled)
|
|
3399
3388
|
setInternalValue(newValue);
|
|
3400
|
-
onChange
|
|
3389
|
+
onChange?.(newValue);
|
|
3401
3390
|
}, [isControlled, onChange]);
|
|
3402
3391
|
const ctx = useMemo(() => ({
|
|
3403
3392
|
name,
|
|
@@ -3463,7 +3452,6 @@ function getTickPositions(min, max, step, ticks, marks) {
|
|
|
3463
3452
|
return positions;
|
|
3464
3453
|
}
|
|
3465
3454
|
const Slider = forwardRef((props, ref) => {
|
|
3466
|
-
var _a, _b, _c;
|
|
3467
3455
|
let range;
|
|
3468
3456
|
let controlledValue;
|
|
3469
3457
|
let defaultValue;
|
|
@@ -3478,7 +3466,7 @@ const Slider = forwardRef((props, ref) => {
|
|
|
3478
3466
|
defaultValue = props.defaultValue;
|
|
3479
3467
|
onChange = props.onChange;
|
|
3480
3468
|
ariaLabel = props.ariaLabel;
|
|
3481
|
-
minDistance =
|
|
3469
|
+
minDistance = props.minDistance ?? 0;
|
|
3482
3470
|
nameLow = props.nameLow;
|
|
3483
3471
|
nameHigh = props.nameHigh;
|
|
3484
3472
|
}
|
|
@@ -3493,9 +3481,9 @@ const Slider = forwardRef((props, ref) => {
|
|
|
3493
3481
|
const insideField = useInsideField();
|
|
3494
3482
|
const insideControl = useInsideControl();
|
|
3495
3483
|
const { bulmaHelperClasses, rest } = useBulmaClasses(restProps);
|
|
3496
|
-
const tooltipMode = tooltip
|
|
3497
|
-
const [internalRange, setInternalRange] = useState(() =>
|
|
3498
|
-
const [internalSingle, setInternalSingle] = useState(() =>
|
|
3484
|
+
const tooltipMode = tooltip ?? (showOutput ? 'auto' : 'hidden');
|
|
3485
|
+
const [internalRange, setInternalRange] = useState(() => range ? (defaultValue ?? [min, max]) : [min, min]);
|
|
3486
|
+
const [internalSingle, setInternalSingle] = useState(() => !range ? (defaultValue ?? 0) : 0);
|
|
3499
3487
|
const [showTooltip, setShowTooltip] = useState(false);
|
|
3500
3488
|
const [showTooltipHigh, setShowTooltipHigh] = useState(false);
|
|
3501
3489
|
const inputRef = useRef(null);
|
|
@@ -3537,7 +3525,7 @@ const Slider = forwardRef((props, ref) => {
|
|
|
3537
3525
|
const newValue = parseFloat(e.target.value);
|
|
3538
3526
|
if (!isControlled)
|
|
3539
3527
|
setInternalSingle(newValue);
|
|
3540
|
-
onChange
|
|
3528
|
+
onChange?.(newValue);
|
|
3541
3529
|
}, [isControlled, onChange]);
|
|
3542
3530
|
const handleRangeLowChange = useCallback((e) => {
|
|
3543
3531
|
const raw = parseFloat(e.target.value);
|
|
@@ -3545,7 +3533,7 @@ const Slider = forwardRef((props, ref) => {
|
|
|
3545
3533
|
const newRange = [clamped, currentRange[1]];
|
|
3546
3534
|
if (!isControlled)
|
|
3547
3535
|
setInternalRange(newRange);
|
|
3548
|
-
onChange
|
|
3536
|
+
onChange?.(newRange);
|
|
3549
3537
|
}, [isControlled, onChange, currentRange, minDistance]);
|
|
3550
3538
|
const handleRangeHighChange = useCallback((e) => {
|
|
3551
3539
|
const raw = parseFloat(e.target.value);
|
|
@@ -3553,7 +3541,7 @@ const Slider = forwardRef((props, ref) => {
|
|
|
3553
3541
|
const newRange = [currentRange[0], clamped];
|
|
3554
3542
|
if (!isControlled)
|
|
3555
3543
|
setInternalRange(newRange);
|
|
3556
|
-
onChange
|
|
3544
|
+
onChange?.(newRange);
|
|
3557
3545
|
}, [isControlled, onChange, currentRange, minDistance]);
|
|
3558
3546
|
const handleKeyDown = useCallback((e) => {
|
|
3559
3547
|
if (e.key === 'Home') {
|
|
@@ -3561,7 +3549,7 @@ const Slider = forwardRef((props, ref) => {
|
|
|
3561
3549
|
if (!range) {
|
|
3562
3550
|
if (!isControlled)
|
|
3563
3551
|
setInternalSingle(min);
|
|
3564
|
-
onChange
|
|
3552
|
+
onChange?.(min);
|
|
3565
3553
|
}
|
|
3566
3554
|
}
|
|
3567
3555
|
else if (e.key === 'End') {
|
|
@@ -3569,7 +3557,7 @@ const Slider = forwardRef((props, ref) => {
|
|
|
3569
3557
|
if (!range) {
|
|
3570
3558
|
if (!isControlled)
|
|
3571
3559
|
setInternalSingle(max);
|
|
3572
|
-
onChange
|
|
3560
|
+
onChange?.(max);
|
|
3573
3561
|
}
|
|
3574
3562
|
}
|
|
3575
3563
|
}, [range, isControlled, onChange, min, max]);
|
|
@@ -3756,7 +3744,7 @@ const Slider = forwardRef((props, ref) => {
|
|
|
3756
3744
|
: {
|
|
3757
3745
|
'--slider-progress-low': `${progressLow}%`,
|
|
3758
3746
|
'--slider-progress-high': `${progressHigh}%`,
|
|
3759
|
-
} }), 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":
|
|
3747
|
+
} }), 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 } : {}) }), 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' && (jsx("output", { ref: outputRef, className: classNames('slider-output slider-output-low', {
|
|
3760
3748
|
'is-visible': showTipLow,
|
|
3761
3749
|
'is-flipped': flipped,
|
|
3762
3750
|
'is-flipped-left': isVertical && verticalFlippedLeft,
|
|
@@ -3812,7 +3800,7 @@ const ArrowDropUp = () => (jsx("svg", { viewBox: "0 0 24 24", fill: "none", stro
|
|
|
3812
3800
|
const ArrowDropDown = () => (jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: jsx("path", { d: "M7 9.5l5 5 5-5" }) }));
|
|
3813
3801
|
const Numberinput = 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) => {
|
|
3814
3802
|
const insideField = useInsideField();
|
|
3815
|
-
const effectiveBare = bare
|
|
3803
|
+
const effectiveBare = bare ?? insideField;
|
|
3816
3804
|
const { bulmaHelperClasses, rest } = useBulmaClasses(props);
|
|
3817
3805
|
const [internalValue, setInternalValue] = useState(defaultValue);
|
|
3818
3806
|
const inputRef = useRef(null);
|
|
@@ -3834,18 +3822,18 @@ const Numberinput = forwardRef(({ label, labelSize, labelProps, horizontal, mess
|
|
|
3834
3822
|
if (!isControlled) {
|
|
3835
3823
|
setInternalValue(clampedValue);
|
|
3836
3824
|
}
|
|
3837
|
-
onChange
|
|
3825
|
+
onChange?.(clampedValue);
|
|
3838
3826
|
}, [isControlled, clampValue, onChange]);
|
|
3839
3827
|
const getEffectiveStep = useCallback(() => {
|
|
3840
3828
|
if (!exponential)
|
|
3841
3829
|
return step;
|
|
3842
|
-
return step * Math.max(1, Math.floor(Math.abs(currentValue
|
|
3830
|
+
return step * Math.max(1, Math.floor(Math.abs(currentValue ?? 0)));
|
|
3843
3831
|
}, [exponential, step, currentValue]);
|
|
3844
3832
|
const handleIncrement = useCallback(() => {
|
|
3845
|
-
updateValue((currentValue
|
|
3833
|
+
updateValue((currentValue ?? 0) + getEffectiveStep());
|
|
3846
3834
|
}, [currentValue, getEffectiveStep, updateValue]);
|
|
3847
3835
|
const handleDecrement = useCallback(() => {
|
|
3848
|
-
updateValue((currentValue
|
|
3836
|
+
updateValue((currentValue ?? 0) - getEffectiveStep());
|
|
3849
3837
|
}, [currentValue, getEffectiveStep, updateValue]);
|
|
3850
3838
|
const handleInputChange = useCallback((e) => {
|
|
3851
3839
|
const newValue = parseFloat(e.target.value);
|
|
@@ -3908,7 +3896,7 @@ const Numberinput = forwardRef(({ label, labelSize, labelProps, horizontal, mess
|
|
|
3908
3896
|
ref.current = node;
|
|
3909
3897
|
}
|
|
3910
3898
|
};
|
|
3911
|
-
const inputControl = (jsx("div", { className: expandedControlClasses, children: jsx("input", { ref: combinedRef, type: "number", className: inputClasses, value: currentValue
|
|
3899
|
+
const inputControl = (jsx("div", { className: expandedControlClasses, children: 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 }) }));
|
|
3912
3900
|
if (isStepper) {
|
|
3913
3901
|
const stepperElement = (jsxs("div", { className: combinedClasses, children: [inputControl, jsx("div", { className: controlClasses, children: jsxs("div", { className: stepperClasses, children: [jsx("button", { type: "button", className: stepperButtonClasses, onClick: handleIncrement, disabled: disabled || isAtMax, tabIndex: -1, "aria-label": "Increase value", children: jsx(ArrowDropUp, {}) }), jsx("button", { type: "button", className: stepperButtonClasses, onClick: handleDecrement, disabled: disabled || isAtMin, tabIndex: -1, "aria-label": "Decrease value", children: jsx(ArrowDropDown, {}) })] }) })] }));
|
|
3914
3902
|
if (!insideField) {
|
|
@@ -3976,7 +3964,7 @@ const Rate = forwardRef(({ label, labelSize, labelProps, horizontal, message, me
|
|
|
3976
3964
|
if (!isControlled) {
|
|
3977
3965
|
setInternalValue(finalValue);
|
|
3978
3966
|
}
|
|
3979
|
-
onChange
|
|
3967
|
+
onChange?.(finalValue);
|
|
3980
3968
|
}, [isControlled, currentValue, disabled, onChange]);
|
|
3981
3969
|
const handleClick = useCallback((iconIndex, e) => {
|
|
3982
3970
|
if (disabled)
|
|
@@ -4041,7 +4029,7 @@ const Rate = forwardRef(({ label, labelSize, labelProps, horizontal, message, me
|
|
|
4041
4029
|
if (!isControlled) {
|
|
4042
4030
|
setInternalValue(newValue);
|
|
4043
4031
|
}
|
|
4044
|
-
onChange
|
|
4032
|
+
onChange?.(newValue);
|
|
4045
4033
|
}
|
|
4046
4034
|
}, [currentValue, max, precision, disabled, isControlled, onChange]);
|
|
4047
4035
|
const getText = () => {
|
|
@@ -4091,7 +4079,7 @@ const Rate = forwardRef(({ label, labelSize, labelProps, horizontal, message, me
|
|
|
4091
4079
|
const iconProps = {
|
|
4092
4080
|
index: iconIndex,
|
|
4093
4081
|
isActive: fillPercent > 0,
|
|
4094
|
-
isHovered: hoverValue !== null && iconIndex < (hoverValue
|
|
4082
|
+
isHovered: hoverValue !== null && iconIndex < (hoverValue ?? 0),
|
|
4095
4083
|
value: displayValue,
|
|
4096
4084
|
fillPercent,
|
|
4097
4085
|
};
|
|
@@ -4174,7 +4162,7 @@ const Autocomplete = forwardRef(({ data = [], value: controlledValue, placeholde
|
|
|
4174
4162
|
if (controlledValue === undefined) {
|
|
4175
4163
|
setInternalValue(newValue);
|
|
4176
4164
|
}
|
|
4177
|
-
onInput
|
|
4165
|
+
onInput?.(newValue);
|
|
4178
4166
|
if (!isActive && newValue) {
|
|
4179
4167
|
setIsActive(true);
|
|
4180
4168
|
}
|
|
@@ -4186,21 +4174,20 @@ const Autocomplete = forwardRef(({ data = [], value: controlledValue, placeholde
|
|
|
4186
4174
|
if (controlledValue === undefined) {
|
|
4187
4175
|
setInternalValue(displayValue);
|
|
4188
4176
|
}
|
|
4189
|
-
onInput
|
|
4190
|
-
onSelect
|
|
4177
|
+
onInput?.(displayValue);
|
|
4178
|
+
onSelect?.(item);
|
|
4191
4179
|
if (!keepOpen) {
|
|
4192
4180
|
setIsActive(false);
|
|
4193
4181
|
}
|
|
4194
4182
|
setHighlightedIndex(-1);
|
|
4195
4183
|
}, [controlledValue, field, keepOpen, onInput, onSelect]);
|
|
4196
4184
|
const handleClear = useCallback(() => {
|
|
4197
|
-
var _a;
|
|
4198
4185
|
if (controlledValue === undefined) {
|
|
4199
4186
|
setInternalValue('');
|
|
4200
4187
|
}
|
|
4201
|
-
onInput
|
|
4202
|
-
onSelect
|
|
4203
|
-
|
|
4188
|
+
onInput?.('');
|
|
4189
|
+
onSelect?.(null);
|
|
4190
|
+
inputRef.current?.focus();
|
|
4204
4191
|
}, [controlledValue, onInput, onSelect]);
|
|
4205
4192
|
const handleFocus = useCallback(() => {
|
|
4206
4193
|
if (openOnFocus && !disabled) {
|
|
@@ -4232,7 +4219,7 @@ const Autocomplete = forwardRef(({ data = [], value: controlledValue, placeholde
|
|
|
4232
4219
|
handleSelect,
|
|
4233
4220
|
]);
|
|
4234
4221
|
useEffect(() => {
|
|
4235
|
-
onActiveChange
|
|
4222
|
+
onActiveChange?.(isActive);
|
|
4236
4223
|
}, [isActive, onActiveChange]);
|
|
4237
4224
|
useEffect(() => {
|
|
4238
4225
|
if (keepFirst && isActive && filteredData.length > 0) {
|
|
@@ -4280,7 +4267,7 @@ const Autocomplete = forwardRef(({ data = [], value: controlledValue, placeholde
|
|
|
4280
4267
|
return;
|
|
4281
4268
|
const { scrollTop, scrollHeight, clientHeight } = dropdownRef.current;
|
|
4282
4269
|
if (scrollHeight - scrollTop - clientHeight <= infiniteScrollDistance) {
|
|
4283
|
-
onInfiniteScroll
|
|
4270
|
+
onInfiniteScroll?.();
|
|
4284
4271
|
}
|
|
4285
4272
|
}, [checkInfiniteScroll, infiniteScrollDistance, onInfiniteScroll]);
|
|
4286
4273
|
useEffect(() => {
|
|
@@ -4386,7 +4373,7 @@ const Taginput = forwardRef(({ label, labelSize, labelProps, horizontal, message
|
|
|
4386
4373
|
if (controlledValue === undefined) {
|
|
4387
4374
|
setInternalTags(newTags);
|
|
4388
4375
|
}
|
|
4389
|
-
onChange
|
|
4376
|
+
onChange?.(newTags);
|
|
4390
4377
|
}, [controlledValue, onChange]);
|
|
4391
4378
|
const addTag = useCallback((value) => {
|
|
4392
4379
|
if (disabled || readonly)
|
|
@@ -4410,7 +4397,7 @@ const Taginput = forwardRef(({ label, labelSize, labelProps, horizontal, message
|
|
|
4410
4397
|
const finalTag = createTag ? createTag(displayValue) : tagValue;
|
|
4411
4398
|
const newTags = [...tags, finalTag];
|
|
4412
4399
|
updateTags(newTags);
|
|
4413
|
-
onAdd
|
|
4400
|
+
onAdd?.(finalTag);
|
|
4414
4401
|
setInputValue('');
|
|
4415
4402
|
if (!keepOpen) {
|
|
4416
4403
|
setIsActive(false);
|
|
@@ -4437,7 +4424,7 @@ const Taginput = forwardRef(({ label, labelSize, labelProps, horizontal, message
|
|
|
4437
4424
|
const removedTag = tags[index];
|
|
4438
4425
|
const newTags = tags.filter((_, i) => i !== index);
|
|
4439
4426
|
updateTags(newTags);
|
|
4440
|
-
onRemove
|
|
4427
|
+
onRemove?.(removedTag, index);
|
|
4441
4428
|
}, [disabled, readonly, tags, updateTags, onRemove]);
|
|
4442
4429
|
const handleInputChange = useCallback((e) => {
|
|
4443
4430
|
const newValue = e.target.value;
|
|
@@ -4450,7 +4437,7 @@ const Taginput = forwardRef(({ label, labelSize, labelProps, horizontal, message
|
|
|
4450
4437
|
return;
|
|
4451
4438
|
}
|
|
4452
4439
|
setInputValue(newValue);
|
|
4453
|
-
onTyping
|
|
4440
|
+
onTyping?.(newValue);
|
|
4454
4441
|
if (newValue && data.length > 0) {
|
|
4455
4442
|
setIsActive(true);
|
|
4456
4443
|
}
|
|
@@ -4555,8 +4542,7 @@ const Taginput = forwardRef(({ label, labelSize, labelProps, horizontal, message
|
|
|
4555
4542
|
}
|
|
4556
4543
|
}, [ref]);
|
|
4557
4544
|
const handleContainerClick = useCallback(() => {
|
|
4558
|
-
|
|
4559
|
-
(_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
4545
|
+
inputRef.current?.focus();
|
|
4560
4546
|
}, []);
|
|
4561
4547
|
const taginputClasses = pcn('taginput', {
|
|
4562
4548
|
'is-active': isActive,
|
|
@@ -4764,7 +4750,7 @@ const DEFAULT_PICKER_LABELS = {
|
|
|
4764
4750
|
};
|
|
4765
4751
|
const mergeLabels = (overrides) => ({
|
|
4766
4752
|
...DEFAULT_PICKER_LABELS,
|
|
4767
|
-
...(overrides
|
|
4753
|
+
...(overrides ?? {}),
|
|
4768
4754
|
});
|
|
4769
4755
|
|
|
4770
4756
|
const DEFAULT_DATE_FORMAT = 'YYYY-MM-DD';
|
|
@@ -4822,19 +4808,19 @@ function formatWithIntl(d, options, locale) {
|
|
|
4822
4808
|
return new Intl.DateTimeFormat(locale, options).format(d);
|
|
4823
4809
|
}
|
|
4824
4810
|
function formatDate(d, fmt, locale) {
|
|
4825
|
-
const f = fmt
|
|
4811
|
+
const f = fmt ?? DEFAULT_DATE_FORMAT;
|
|
4826
4812
|
if (typeof f === 'string')
|
|
4827
4813
|
return formatTokenString(d, f);
|
|
4828
4814
|
return formatWithIntl(d, f, locale);
|
|
4829
4815
|
}
|
|
4830
4816
|
function formatTime(d, fmt, locale) {
|
|
4831
|
-
const f = fmt
|
|
4817
|
+
const f = fmt ?? DEFAULT_TIME_FORMAT_24;
|
|
4832
4818
|
if (typeof f === 'string')
|
|
4833
4819
|
return formatTokenString(d, f);
|
|
4834
4820
|
return formatWithIntl(d, f, locale);
|
|
4835
4821
|
}
|
|
4836
4822
|
function formatDateTime(d, fmt, locale) {
|
|
4837
|
-
const f = fmt
|
|
4823
|
+
const f = fmt ?? DEFAULT_DATETIME_FORMAT;
|
|
4838
4824
|
if (typeof f === 'string')
|
|
4839
4825
|
return formatTokenString(d, f);
|
|
4840
4826
|
return formatWithIntl(d, f, locale);
|
|
@@ -4851,19 +4837,18 @@ function hourCycleFromFormat(fmt) {
|
|
|
4851
4837
|
return null;
|
|
4852
4838
|
}
|
|
4853
4839
|
function parseDate(s, fmt, _locale) {
|
|
4854
|
-
var _a, _b, _c, _d, _e, _f;
|
|
4855
4840
|
if (!s)
|
|
4856
4841
|
return null;
|
|
4857
|
-
const format = fmt
|
|
4842
|
+
const format = fmt ?? DEFAULT_DATE_FORMAT;
|
|
4858
4843
|
const parts = parseTokens(s, format);
|
|
4859
4844
|
if (!parts)
|
|
4860
4845
|
return null;
|
|
4861
|
-
const year =
|
|
4862
|
-
const month = (
|
|
4863
|
-
const day =
|
|
4864
|
-
const hours =
|
|
4865
|
-
const minutes =
|
|
4866
|
-
const seconds =
|
|
4846
|
+
const year = parts.year ?? new Date().getFullYear();
|
|
4847
|
+
const month = (parts.month ?? 1) - 1;
|
|
4848
|
+
const day = parts.day ?? 1;
|
|
4849
|
+
const hours = parts.hours ?? 0;
|
|
4850
|
+
const minutes = parts.minutes ?? 0;
|
|
4851
|
+
const seconds = parts.seconds ?? 0;
|
|
4867
4852
|
const d = new Date(year, month, day, hours, minutes, seconds, 0);
|
|
4868
4853
|
if (d.getFullYear() !== year ||
|
|
4869
4854
|
d.getMonth() !== month ||
|
|
@@ -4873,15 +4858,14 @@ function parseDate(s, fmt, _locale) {
|
|
|
4873
4858
|
return d;
|
|
4874
4859
|
}
|
|
4875
4860
|
function parseTime(s, fmt) {
|
|
4876
|
-
var _a, _b, _c;
|
|
4877
4861
|
if (!s)
|
|
4878
4862
|
return null;
|
|
4879
|
-
const format = fmt
|
|
4863
|
+
const format = fmt ?? DEFAULT_TIME_FORMAT_24;
|
|
4880
4864
|
const parts = parseTokens(s, format);
|
|
4881
4865
|
if (!parts)
|
|
4882
4866
|
return null;
|
|
4883
4867
|
const today = new Date();
|
|
4884
|
-
return new Date(today.getFullYear(), today.getMonth(), today.getDate(),
|
|
4868
|
+
return new Date(today.getFullYear(), today.getMonth(), today.getDate(), parts.hours ?? 0, parts.minutes ?? 0, parts.seconds ?? 0, 0);
|
|
4885
4869
|
}
|
|
4886
4870
|
function escapeRegExp(s) {
|
|
4887
4871
|
return s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
|
|
@@ -5155,9 +5139,9 @@ const Calendar = ({ value, focusedDate, onSelect, onFocusedDateChange, min, max,
|
|
|
5155
5139
|
const isDateUnselectable = useCallback((d) => {
|
|
5156
5140
|
if (!isWithin(d, min, max))
|
|
5157
5141
|
return true;
|
|
5158
|
-
if (shouldDisableDate
|
|
5142
|
+
if (shouldDisableDate?.(d))
|
|
5159
5143
|
return true;
|
|
5160
|
-
if (unselectableDates
|
|
5144
|
+
if (unselectableDates?.some(u => isSameDay(u, d)))
|
|
5161
5145
|
return true;
|
|
5162
5146
|
return false;
|
|
5163
5147
|
}, [min, max, shouldDisableDate, unselectableDates]);
|
|
@@ -5254,7 +5238,7 @@ const Calendar = ({ value, focusedDate, onSelect, onFocusedDateChange, min, max,
|
|
|
5254
5238
|
const focusedYear = focusedDate.getFullYear();
|
|
5255
5239
|
const minYear = min ? min.getFullYear() : focusedYear - 100;
|
|
5256
5240
|
const maxYear = max ? max.getFullYear() : focusedYear + 100;
|
|
5257
|
-
const [lo, hi] = yearsRange
|
|
5241
|
+
const [lo, hi] = yearsRange ?? [minYear, maxYear];
|
|
5258
5242
|
const start = Math.max(lo, minYear);
|
|
5259
5243
|
const end = Math.min(hi, maxYear);
|
|
5260
5244
|
const out = [];
|
|
@@ -5274,14 +5258,14 @@ const Calendar = ({ value, focusedDate, onSelect, onFocusedDateChange, min, max,
|
|
|
5274
5258
|
if (!autoFocusCell || !gridRef.current)
|
|
5275
5259
|
return;
|
|
5276
5260
|
const target = gridRef.current.querySelector('[data-focused="true"]');
|
|
5277
|
-
target
|
|
5261
|
+
target?.focus();
|
|
5278
5262
|
}, [autoFocusCell, focusedDate, view]);
|
|
5279
5263
|
useEffect(() => {
|
|
5280
5264
|
if (view !== 'years' || !yearGridRef.current)
|
|
5281
5265
|
return;
|
|
5282
5266
|
const sel = yearGridRef.current.querySelector('[data-focused-year="true"]');
|
|
5283
|
-
sel
|
|
5284
|
-
sel
|
|
5267
|
+
sel?.scrollIntoView({ block: 'center' });
|
|
5268
|
+
sel?.focus();
|
|
5285
5269
|
}, [view]);
|
|
5286
5270
|
const focusedYear = focusedDate.getFullYear();
|
|
5287
5271
|
const todayYear = new Date().getFullYear();
|
|
@@ -5340,13 +5324,12 @@ function useFocusTrap(containerRef, active, options = {}) {
|
|
|
5340
5324
|
? document.activeElement
|
|
5341
5325
|
: null;
|
|
5342
5326
|
const focusInitial = () => {
|
|
5343
|
-
|
|
5344
|
-
if (initialFocusRef === null || initialFocusRef === void 0 ? void 0 : initialFocusRef.current) {
|
|
5327
|
+
if (initialFocusRef?.current) {
|
|
5345
5328
|
initialFocusRef.current.focus();
|
|
5346
5329
|
return;
|
|
5347
5330
|
}
|
|
5348
5331
|
const focusables = Array.from(container.querySelectorAll(FOCUSABLE_SELECTOR)).filter(el => !el.hasAttribute('disabled'));
|
|
5349
|
-
const target =
|
|
5332
|
+
const target = focusables[0] ?? container;
|
|
5350
5333
|
target.focus();
|
|
5351
5334
|
};
|
|
5352
5335
|
focusInitial();
|
|
@@ -5373,7 +5356,7 @@ function useFocusTrap(containerRef, active, options = {}) {
|
|
|
5373
5356
|
container.addEventListener('keydown', handleKeyDown);
|
|
5374
5357
|
return () => {
|
|
5375
5358
|
container.removeEventListener('keydown', handleKeyDown);
|
|
5376
|
-
if (restoreFocus &&
|
|
5359
|
+
if (restoreFocus && previouslyFocused?.focus) {
|
|
5377
5360
|
previouslyFocused.focus();
|
|
5378
5361
|
}
|
|
5379
5362
|
};
|
|
@@ -5747,13 +5730,12 @@ function setAmPm(currentDate, isPm) {
|
|
|
5747
5730
|
return next;
|
|
5748
5731
|
}
|
|
5749
5732
|
function segmentIndexAtCaret(map, caret) {
|
|
5750
|
-
var _a;
|
|
5751
5733
|
for (const idx of map.editable) {
|
|
5752
5734
|
const s = map.segments[idx];
|
|
5753
5735
|
if (caret >= s.start && caret <= s.end)
|
|
5754
5736
|
return idx;
|
|
5755
5737
|
}
|
|
5756
|
-
let bestIdx =
|
|
5738
|
+
let bestIdx = map.editable[0] ?? null;
|
|
5757
5739
|
let bestDist = Infinity;
|
|
5758
5740
|
for (const idx of map.editable) {
|
|
5759
5741
|
const s = map.segments[idx];
|
|
@@ -5773,8 +5755,8 @@ function useSegmentedEntry(params) {
|
|
|
5773
5755
|
const [activeSegmentIdx, setActiveSegmentIdx] = useState(null);
|
|
5774
5756
|
const typedDigitsRef = useRef('');
|
|
5775
5757
|
const segmentEditable = !!segmentMap && !!editable && !disabled && !readOnly;
|
|
5776
|
-
const segmentBaseDate = useCallback(() => value
|
|
5777
|
-
const isAllowed = useCallback((d) => isWithin(d, min, max) && !
|
|
5758
|
+
const segmentBaseDate = useCallback(() => value ?? makeBaseDate(), [value, makeBaseDate]);
|
|
5759
|
+
const isAllowed = useCallback((d) => isWithin(d, min, max) && !isBlocked?.(d), [min, max, isBlocked]);
|
|
5778
5760
|
const applyDateFromSegment = useCallback((next) => {
|
|
5779
5761
|
if (!isAllowed(next))
|
|
5780
5762
|
return;
|
|
@@ -5817,7 +5799,7 @@ function useSegmentedEntry(params) {
|
|
|
5817
5799
|
containerRef.current !== null &&
|
|
5818
5800
|
containerRef.current.contains(nextFocus);
|
|
5819
5801
|
if (stayingInPicker) {
|
|
5820
|
-
onBlur
|
|
5802
|
+
onBlur?.(e);
|
|
5821
5803
|
return;
|
|
5822
5804
|
}
|
|
5823
5805
|
setActiveSegmentIdx(null);
|
|
@@ -5829,7 +5811,7 @@ function useSegmentedEntry(params) {
|
|
|
5829
5811
|
else {
|
|
5830
5812
|
setText(value ? formatFn(value, format, locale) : '');
|
|
5831
5813
|
}
|
|
5832
|
-
onBlur
|
|
5814
|
+
onBlur?.(e);
|
|
5833
5815
|
}, [
|
|
5834
5816
|
containerRef,
|
|
5835
5817
|
tryParse,
|
|
@@ -5853,7 +5835,7 @@ function useSegmentedEntry(params) {
|
|
|
5853
5835
|
typedDigitsRef.current = '';
|
|
5854
5836
|
setActiveSegmentIdx(segmentMap.editable[0]);
|
|
5855
5837
|
}
|
|
5856
|
-
onFocus
|
|
5838
|
+
onFocus?.(e);
|
|
5857
5839
|
}, [
|
|
5858
5840
|
openOnFocus,
|
|
5859
5841
|
popover,
|
|
@@ -5871,18 +5853,17 @@ function useSegmentedEntry(params) {
|
|
|
5871
5853
|
onFocus,
|
|
5872
5854
|
]);
|
|
5873
5855
|
const handleClick = useCallback((e) => {
|
|
5874
|
-
var _a;
|
|
5875
5856
|
if (openOnFocus && popover && !disabled && !readOnly)
|
|
5876
5857
|
setOpen(true);
|
|
5877
5858
|
if (segmentEditable && segmentMap && inputRef.current) {
|
|
5878
|
-
const caret =
|
|
5859
|
+
const caret = inputRef.current.selectionStart ?? 0;
|
|
5879
5860
|
const idx = segmentIndexAtCaret(segmentMap, caret);
|
|
5880
5861
|
if (idx !== null && idx !== activeSegmentIdx) {
|
|
5881
5862
|
typedDigitsRef.current = '';
|
|
5882
5863
|
setActiveSegmentIdx(idx);
|
|
5883
5864
|
}
|
|
5884
5865
|
}
|
|
5885
|
-
onClick
|
|
5866
|
+
onClick?.(e);
|
|
5886
5867
|
}, [
|
|
5887
5868
|
openOnFocus,
|
|
5888
5869
|
popover,
|
|
@@ -6000,7 +5981,7 @@ function useSegmentedEntry(params) {
|
|
|
6000
5981
|
setOpen(false);
|
|
6001
5982
|
}
|
|
6002
5983
|
}
|
|
6003
|
-
onKeyDown
|
|
5984
|
+
onKeyDown?.(e);
|
|
6004
5985
|
}, [
|
|
6005
5986
|
inSegmentMode,
|
|
6006
5987
|
segmentMap,
|
|
@@ -6044,9 +6025,9 @@ const DateInputBase = forwardRef((props, ref) => {
|
|
|
6044
6025
|
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;
|
|
6045
6026
|
const t = mergeLabels(labels);
|
|
6046
6027
|
const isControlled = controlledValue !== undefined;
|
|
6047
|
-
const [internalValue, setInternalValue] = useState(defaultValue
|
|
6048
|
-
const value = isControlled ? (controlledValue
|
|
6049
|
-
const initialFocused = useMemo(() => clampDate(value
|
|
6028
|
+
const [internalValue, setInternalValue] = useState(defaultValue ?? null);
|
|
6029
|
+
const value = isControlled ? (controlledValue ?? null) : internalValue;
|
|
6030
|
+
const initialFocused = useMemo(() => clampDate(value ?? new Date(), min, max), []);
|
|
6050
6031
|
const [focusedDate, setFocusedDate] = useState(initialFocused);
|
|
6051
6032
|
useEffect(() => {
|
|
6052
6033
|
setFocusedDate(prev => clampDate(prev, min, max));
|
|
@@ -6074,9 +6055,9 @@ const DateInputBase = forwardRef((props, ref) => {
|
|
|
6074
6055
|
if (prev === next)
|
|
6075
6056
|
return prev;
|
|
6076
6057
|
if (next)
|
|
6077
|
-
onOpen
|
|
6058
|
+
onOpen?.();
|
|
6078
6059
|
else
|
|
6079
|
-
onClose
|
|
6060
|
+
onClose?.();
|
|
6080
6061
|
return next;
|
|
6081
6062
|
});
|
|
6082
6063
|
}, [onOpen, onClose]);
|
|
@@ -6088,7 +6069,7 @@ const DateInputBase = forwardRef((props, ref) => {
|
|
|
6088
6069
|
setInternalValue(next);
|
|
6089
6070
|
if (next)
|
|
6090
6071
|
setFocusedDate(next);
|
|
6091
|
-
onChange
|
|
6072
|
+
onChange?.(next);
|
|
6092
6073
|
}, [isControlled, onChange]);
|
|
6093
6074
|
const handleSelect = useCallback((d) => {
|
|
6094
6075
|
if (!isWithin(d, min, max))
|
|
@@ -6105,7 +6086,7 @@ const DateInputBase = forwardRef((props, ref) => {
|
|
|
6105
6086
|
const fmt = typeof format === 'string' ? format : undefined;
|
|
6106
6087
|
return parse
|
|
6107
6088
|
? parse(trimmed)
|
|
6108
|
-
: parseDate(trimmed, fmt
|
|
6089
|
+
: parseDate(trimmed, fmt ?? DEFAULT_DATE_FORMAT);
|
|
6109
6090
|
}, [parse, format, locale]);
|
|
6110
6091
|
const makeBaseDate = useCallback(() => {
|
|
6111
6092
|
const d = new Date();
|
|
@@ -6115,13 +6096,13 @@ const DateInputBase = forwardRef((props, ref) => {
|
|
|
6115
6096
|
const inputReadOnlyAttr = !!readOnly || !editable;
|
|
6116
6097
|
const canOpen = !!popover && !disabled && !readOnly;
|
|
6117
6098
|
const isBlocked = useMemo(() => {
|
|
6118
|
-
if (!shouldDisableDate && !
|
|
6099
|
+
if (!shouldDisableDate && !unselectableDates?.length)
|
|
6119
6100
|
return undefined;
|
|
6120
|
-
return (d) => !!
|
|
6121
|
-
!!
|
|
6101
|
+
return (d) => !!shouldDisableDate?.(d) ||
|
|
6102
|
+
!!unselectableDates?.some(u => isSameDay(u, d));
|
|
6122
6103
|
}, [shouldDisableDate, unselectableDates]);
|
|
6123
6104
|
const { inputHandlers } = useSegmentedEntry({
|
|
6124
|
-
format: format
|
|
6105
|
+
format: format ?? DEFAULT_DATE_FORMAT,
|
|
6125
6106
|
value,
|
|
6126
6107
|
commitValue,
|
|
6127
6108
|
formatFn: formatDate,
|
|
@@ -6176,13 +6157,12 @@ const DateInputBase = forwardRef((props, ref) => {
|
|
|
6176
6157
|
DateInputBase.displayName = 'DateInputBase';
|
|
6177
6158
|
|
|
6178
6159
|
const DateInput = forwardRef(({ label, labelSize, labelProps, horizontal, iconLeft, iconRight, iconLeftName = 'calendar', iconRightName, iconLeftSize, iconRightSize, hasIconsLeft, hasIconsRight, isLoading, isExpanded, controlSize, message, messageColor, fieldClassName, controlClassName, ...baseProps }, ref) => {
|
|
6179
|
-
var _a;
|
|
6180
6160
|
const insideField = useInsideField();
|
|
6181
6161
|
const insideControl = useInsideControl();
|
|
6182
6162
|
const helpClass = usePrefixedClassNames('help', {
|
|
6183
6163
|
[`is-${messageColor}`]: !!messageColor,
|
|
6184
6164
|
});
|
|
6185
|
-
let content = (jsx(DateInputBase, { ref: ref, ...baseProps, triggerIcon:
|
|
6165
|
+
let content = (jsx(DateInputBase, { ref: ref, ...baseProps, triggerIcon: baseProps.triggerIcon ?? !isLoading }));
|
|
6186
6166
|
if (!insideControl && !baseProps.inline) {
|
|
6187
6167
|
content = (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 }));
|
|
6188
6168
|
}
|
|
@@ -6207,11 +6187,10 @@ const tickHaptic = () => {
|
|
|
6207
6187
|
|
|
6208
6188
|
let audioCtx = null;
|
|
6209
6189
|
const getAudioContextCtor = () => {
|
|
6210
|
-
var _a, _b;
|
|
6211
6190
|
if (typeof window === 'undefined')
|
|
6212
6191
|
return null;
|
|
6213
6192
|
const w = window;
|
|
6214
|
-
return
|
|
6193
|
+
return w.AudioContext ?? w.webkitAudioContext ?? null;
|
|
6215
6194
|
};
|
|
6216
6195
|
const ensureAudioCtx = () => {
|
|
6217
6196
|
if (audioCtx)
|
|
@@ -6291,11 +6270,10 @@ const WheelInner = ({ values, index, onChange, formatLabel, formatAriaText, aria
|
|
|
6291
6270
|
const audioTickEnabledRef = useRef(audioTick);
|
|
6292
6271
|
audioTickEnabledRef.current = audioTick;
|
|
6293
6272
|
const playBandPulse = useCallback(() => {
|
|
6294
|
-
var _a;
|
|
6295
6273
|
const el = bandRef.current;
|
|
6296
6274
|
if (!el || typeof el.animate !== 'function')
|
|
6297
6275
|
return;
|
|
6298
|
-
if (
|
|
6276
|
+
if (reducedMotionMqlRef.current?.matches)
|
|
6299
6277
|
return;
|
|
6300
6278
|
pulseAnimRef.current = el.animate([
|
|
6301
6279
|
{ transform: 'scale(1)', filter: 'brightness(1)' },
|
|
@@ -6331,15 +6309,13 @@ const WheelInner = ({ values, index, onChange, formatLabel, formatAriaText, aria
|
|
|
6331
6309
|
}
|
|
6332
6310
|
}, []);
|
|
6333
6311
|
useEffect(() => () => {
|
|
6334
|
-
var _a;
|
|
6335
6312
|
cancelRaf();
|
|
6336
|
-
|
|
6313
|
+
pulseAnimRef.current?.cancel();
|
|
6337
6314
|
pulseAnimRef.current = null;
|
|
6338
6315
|
}, [cancelRaf]);
|
|
6339
6316
|
React.useImperativeHandle(ref, () => ({
|
|
6340
|
-
focus: () =>
|
|
6317
|
+
focus: () => rootRef.current?.focus(),
|
|
6341
6318
|
startDrag: (pointerId, clientY) => {
|
|
6342
|
-
var _a;
|
|
6343
6319
|
if (disabled)
|
|
6344
6320
|
return;
|
|
6345
6321
|
cancelRaf();
|
|
@@ -6354,7 +6330,7 @@ const WheelInner = ({ values, index, onChange, formatLabel, formatAriaText, aria
|
|
|
6354
6330
|
samples: [{ t: now, y: clientY }],
|
|
6355
6331
|
};
|
|
6356
6332
|
try {
|
|
6357
|
-
|
|
6333
|
+
rootRef.current?.setPointerCapture(pointerId);
|
|
6358
6334
|
}
|
|
6359
6335
|
catch {
|
|
6360
6336
|
}
|
|
@@ -6444,15 +6420,15 @@ const WheelInner = ({ values, index, onChange, formatLabel, formatAriaText, aria
|
|
|
6444
6420
|
break;
|
|
6445
6421
|
case 'ArrowLeft':
|
|
6446
6422
|
e.preventDefault();
|
|
6447
|
-
onFocusPrev
|
|
6423
|
+
onFocusPrev?.();
|
|
6448
6424
|
break;
|
|
6449
6425
|
case 'ArrowRight':
|
|
6450
6426
|
e.preventDefault();
|
|
6451
|
-
onFocusNext
|
|
6427
|
+
onFocusNext?.();
|
|
6452
6428
|
break;
|
|
6453
6429
|
case 'Enter':
|
|
6454
6430
|
e.preventDefault();
|
|
6455
|
-
onCommit
|
|
6431
|
+
onCommit?.();
|
|
6456
6432
|
break;
|
|
6457
6433
|
}
|
|
6458
6434
|
}, [
|
|
@@ -6578,7 +6554,6 @@ const WheelInner = ({ values, index, onChange, formatLabel, formatAriaText, aria
|
|
|
6578
6554
|
};
|
|
6579
6555
|
};
|
|
6580
6556
|
const onPointerMove = (e) => {
|
|
6581
|
-
var _a;
|
|
6582
6557
|
const s = dragStateRef.current;
|
|
6583
6558
|
if (s.pointerId !== e.pointerId)
|
|
6584
6559
|
return;
|
|
@@ -6586,7 +6561,7 @@ const WheelInner = ({ values, index, onChange, formatLabel, formatAriaText, aria
|
|
|
6586
6561
|
if (!s.captured) {
|
|
6587
6562
|
if (Math.abs(dy) < DRAG_THRESHOLD_PX)
|
|
6588
6563
|
return;
|
|
6589
|
-
|
|
6564
|
+
rootRef.current?.setPointerCapture(e.pointerId);
|
|
6590
6565
|
s.captured = true;
|
|
6591
6566
|
setIsDragging(true);
|
|
6592
6567
|
}
|
|
@@ -6599,13 +6574,12 @@ const WheelInner = ({ values, index, onChange, formatLabel, formatAriaText, aria
|
|
|
6599
6574
|
commitPosition(s.startPosition - dy / itemHeight);
|
|
6600
6575
|
};
|
|
6601
6576
|
const onPointerUp = (e) => {
|
|
6602
|
-
var _a, _b;
|
|
6603
6577
|
const s = dragStateRef.current;
|
|
6604
6578
|
if (s.pointerId !== e.pointerId)
|
|
6605
6579
|
return;
|
|
6606
6580
|
if (s.captured) {
|
|
6607
|
-
|
|
6608
|
-
|
|
6581
|
+
rootRef.current?.releasePointerCapture(e.pointerId);
|
|
6582
|
+
rootRef.current?.focus();
|
|
6609
6583
|
const samples = s.samples;
|
|
6610
6584
|
let pxPerMs = 0;
|
|
6611
6585
|
if (samples.length >= 2) {
|
|
@@ -6672,15 +6646,13 @@ const WheelInner = ({ values, index, onChange, formatLabel, formatAriaText, aria
|
|
|
6672
6646
|
height: itemHeight,
|
|
6673
6647
|
top: `${top}px`,
|
|
6674
6648
|
}, disabled: itemDisabled, onClick: () => {
|
|
6675
|
-
var _a;
|
|
6676
6649
|
moveBy(vIdx - virtualIdx);
|
|
6677
|
-
|
|
6650
|
+
rootRef.current?.focus();
|
|
6678
6651
|
}, children: formatLabel(values[aIdx]) }, vIdx));
|
|
6679
6652
|
})] }));
|
|
6680
6653
|
};
|
|
6681
6654
|
const Wheel = React.forwardRef(WheelInner);
|
|
6682
6655
|
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, }) => {
|
|
6683
|
-
var _a;
|
|
6684
6656
|
const t = mergeLabels(labels);
|
|
6685
6657
|
const rootClass = usePrefixedClassNames('timeinput', {
|
|
6686
6658
|
[`is-${color}`]: !!color,
|
|
@@ -6703,29 +6675,27 @@ const TimeWheels = ({ value, onChange, hourFormat = '24', enableSeconds = false,
|
|
|
6703
6675
|
return !unselectableTimes(probe);
|
|
6704
6676
|
}, [unselectableTimes]);
|
|
6705
6677
|
const isHourDisabled = useCallback((display) => {
|
|
6706
|
-
var _a;
|
|
6707
6678
|
let h24 = display;
|
|
6708
6679
|
if (hourFormat === '12') {
|
|
6709
6680
|
const base = display % 12;
|
|
6710
6681
|
h24 = isPm ? base + 12 : base;
|
|
6711
6682
|
}
|
|
6712
|
-
return !isTimeAllowed(h24, value.minutes,
|
|
6683
|
+
return !isTimeAllowed(h24, value.minutes, value.seconds ?? 0);
|
|
6713
6684
|
}, [hourFormat, isPm, isTimeAllowed, value.minutes, value.seconds]);
|
|
6714
|
-
const isMinuteDisabled = useCallback((m) =>
|
|
6685
|
+
const isMinuteDisabled = useCallback((m) => !isTimeAllowed(value.hours, m, value.seconds ?? 0), [isTimeAllowed, value.hours, value.seconds]);
|
|
6715
6686
|
const isSecondDisabled = useCallback((s) => !isTimeAllowed(value.hours, value.minutes, s), [isTimeAllowed, value.hours, value.minutes]);
|
|
6716
6687
|
const hourDisabledFor = unselectableTimes ? isHourDisabled : undefined;
|
|
6717
6688
|
const minuteDisabledFor = unselectableTimes ? isMinuteDisabled : undefined;
|
|
6718
6689
|
const secondDisabledFor = unselectableTimes ? isSecondDisabled : undefined;
|
|
6719
6690
|
const commit = useCallback((next) => {
|
|
6720
|
-
var _a, _b, _c, _d, _e;
|
|
6721
6691
|
const merged = {
|
|
6722
|
-
hours:
|
|
6723
|
-
minutes:
|
|
6692
|
+
hours: next.hours ?? value.hours,
|
|
6693
|
+
minutes: next.minutes ?? value.minutes,
|
|
6724
6694
|
seconds: enableSeconds
|
|
6725
|
-
? (
|
|
6695
|
+
? (next.seconds ?? value.seconds ?? 0)
|
|
6726
6696
|
: undefined,
|
|
6727
6697
|
};
|
|
6728
|
-
if (!isTimeAllowed(merged.hours, merged.minutes,
|
|
6698
|
+
if (!isTimeAllowed(merged.hours, merged.minutes, merged.seconds ?? 0)) {
|
|
6729
6699
|
return;
|
|
6730
6700
|
}
|
|
6731
6701
|
onChange(merged);
|
|
@@ -6764,7 +6734,7 @@ const TimeWheels = ({ value, onChange, hourFormat = '24', enableSeconds = false,
|
|
|
6764
6734
|
: value.hours;
|
|
6765
6735
|
const hourIndex = Math.max(0, hourValues.indexOf(displayedHours));
|
|
6766
6736
|
const minuteIndex = Math.max(0, minuteValues.indexOf(value.minutes));
|
|
6767
|
-
const secondIndex = Math.max(0, secondValues.indexOf(
|
|
6737
|
+
const secondIndex = Math.max(0, secondValues.indexOf(value.seconds ?? 0));
|
|
6768
6738
|
const ampmIndex = isPm ? 1 : 0;
|
|
6769
6739
|
const hoursRef = useRef(null);
|
|
6770
6740
|
const minutesRef = useRef(null);
|
|
@@ -6777,7 +6747,7 @@ const TimeWheels = ({ value, onChange, hourFormat = '24', enableSeconds = false,
|
|
|
6777
6747
|
columnOrder.push(secondsRef);
|
|
6778
6748
|
if (hourFormat === '12')
|
|
6779
6749
|
columnOrder.push(ampmRef);
|
|
6780
|
-
const focusAt = (i) =>
|
|
6750
|
+
const focusAt = (i) => columnOrder[i]?.current?.focus();
|
|
6781
6751
|
const indexOf = (r) => columnOrder.indexOf(r);
|
|
6782
6752
|
const focusPrevOf = (r) => () => focusAt(indexOf(r) - 1);
|
|
6783
6753
|
const focusNextOf = (r) => () => focusAt(indexOf(r) + 1);
|
|
@@ -6788,18 +6758,17 @@ const TimeWheels = ({ value, onChange, hourFormat = '24', enableSeconds = false,
|
|
|
6788
6758
|
const baseHour = display % 12;
|
|
6789
6759
|
next24 = isPm ? baseHour + 12 : baseHour;
|
|
6790
6760
|
}
|
|
6791
|
-
const allowed = nextValid(next24, next24 >= value.hours ? 1 : -1, 24, h =>
|
|
6761
|
+
const allowed = nextValid(next24, next24 >= value.hours ? 1 : -1, 24, h => isTimeAllowed(h, value.minutes, value.seconds ?? 0));
|
|
6792
6762
|
commit({ hours: allowed });
|
|
6793
6763
|
};
|
|
6794
6764
|
const onMinuteIndex = (next) => {
|
|
6795
6765
|
const m = minuteValues[Math.max(0, Math.min(minuteValues.length - 1, next))];
|
|
6796
|
-
const allowed = nextValid(m, m >= value.minutes ? 1 : -1, 60, mm =>
|
|
6766
|
+
const allowed = nextValid(m, m >= value.minutes ? 1 : -1, 60, mm => isTimeAllowed(value.hours, mm, value.seconds ?? 0));
|
|
6797
6767
|
commit({ minutes: allowed });
|
|
6798
6768
|
};
|
|
6799
6769
|
const onSecondIndex = (next) => {
|
|
6800
|
-
var _a;
|
|
6801
6770
|
const s = secondValues[Math.max(0, Math.min(secondValues.length - 1, next))];
|
|
6802
|
-
const allowed = nextValid(s, s >= (
|
|
6771
|
+
const allowed = nextValid(s, s >= (value.seconds ?? 0) ? 1 : -1, 60, ss => isTimeAllowed(value.hours, value.minutes, ss));
|
|
6803
6772
|
commit({ seconds: allowed });
|
|
6804
6773
|
};
|
|
6805
6774
|
const onAmpmIndex = (next) => {
|
|
@@ -6808,7 +6777,6 @@ const TimeWheels = ({ value, onChange, hourFormat = '24', enableSeconds = false,
|
|
|
6808
6777
|
commit({ hours: (value.hours + 12) % 24 });
|
|
6809
6778
|
};
|
|
6810
6779
|
const onWheelsContainerPointerDown = (e) => {
|
|
6811
|
-
var _a, _b;
|
|
6812
6780
|
if (disabled)
|
|
6813
6781
|
return;
|
|
6814
6782
|
if (e.target.closest(`.${wheelSingleClass}`))
|
|
@@ -6831,7 +6799,7 @@ const TimeWheels = ({ value, onChange, hourFormat = '24', enableSeconds = false,
|
|
|
6831
6799
|
nearestIdx = i;
|
|
6832
6800
|
}
|
|
6833
6801
|
});
|
|
6834
|
-
|
|
6802
|
+
columnOrder[nearestIdx]?.current?.startDrag(e.pointerId, e.clientY);
|
|
6835
6803
|
};
|
|
6836
6804
|
return (jsx("div", { id: id, className: classNames(rootClass, className), "aria-disabled": disabled, children: jsxs("div", { className: wheelsClass, ref: wheelsContainerRef, onPointerDown: onWheelsContainerPointerDown, children: [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 }), jsx("div", { className: sepClass, "aria-hidden": "true", children: ":" }), 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 && (jsxs(Fragment, { children: [jsx("div", { className: sepClass, "aria-hidden": "true", children: ":" }), 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' && (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 }))] }) }));
|
|
6837
6805
|
};
|
|
@@ -6853,23 +6821,23 @@ const fromIsoTime = (s) => {
|
|
|
6853
6821
|
return new Date(today.getFullYear(), today.getMonth(), today.getDate(), Number(m[1]), Number(m[2]), m[3] ? Number(m[3]) : 0, 0);
|
|
6854
6822
|
};
|
|
6855
6823
|
const TimeInputBase = forwardRef((props, ref) => {
|
|
6856
|
-
var _a, _b, _c, _d;
|
|
6857
6824
|
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;
|
|
6858
6825
|
const hasVibrate = typeof navigator !== 'undefined' &&
|
|
6859
6826
|
typeof navigator.vibrate === 'function';
|
|
6860
6827
|
const effectiveAudioTick = audioTick || (haptics && !hasVibrate);
|
|
6861
6828
|
const t = mergeLabels(labels);
|
|
6862
6829
|
const isControlled = controlledValue !== undefined;
|
|
6863
|
-
const [internalValue, setInternalValue] = useState(defaultValue
|
|
6864
|
-
const value = isControlled ? (controlledValue
|
|
6865
|
-
const defaultFormat = format
|
|
6866
|
-
|
|
6867
|
-
?
|
|
6868
|
-
|
|
6869
|
-
|
|
6870
|
-
|
|
6871
|
-
|
|
6872
|
-
|
|
6830
|
+
const [internalValue, setInternalValue] = useState(defaultValue ?? null);
|
|
6831
|
+
const value = isControlled ? (controlledValue ?? null) : internalValue;
|
|
6832
|
+
const defaultFormat = format ??
|
|
6833
|
+
(hourFormat === '12'
|
|
6834
|
+
? enableSeconds
|
|
6835
|
+
? 'hh:mm:ss A'
|
|
6836
|
+
: DEFAULT_TIME_FORMAT_12
|
|
6837
|
+
: enableSeconds
|
|
6838
|
+
? 'HH:mm:ss'
|
|
6839
|
+
: DEFAULT_TIME_FORMAT_24);
|
|
6840
|
+
const effectiveHourFormat = hourCycleFromFormat(defaultFormat) ?? hourFormat;
|
|
6873
6841
|
const [open, setOpenState] = useState(false);
|
|
6874
6842
|
const [text, setText] = useState(value ? formatTime(value, defaultFormat, locale) : '');
|
|
6875
6843
|
const inputRef = useRef(null);
|
|
@@ -6903,10 +6871,10 @@ const TimeInputBase = forwardRef((props, ref) => {
|
|
|
6903
6871
|
return prev;
|
|
6904
6872
|
if (next) {
|
|
6905
6873
|
valueAtOpenRef.current = value;
|
|
6906
|
-
onOpen
|
|
6874
|
+
onOpen?.();
|
|
6907
6875
|
}
|
|
6908
6876
|
else {
|
|
6909
|
-
onClose
|
|
6877
|
+
onClose?.();
|
|
6910
6878
|
}
|
|
6911
6879
|
return next;
|
|
6912
6880
|
});
|
|
@@ -6917,10 +6885,10 @@ const TimeInputBase = forwardRef((props, ref) => {
|
|
|
6917
6885
|
const commitValue = useCallback((next) => {
|
|
6918
6886
|
if (!isControlled)
|
|
6919
6887
|
setInternalValue(next);
|
|
6920
|
-
onChange
|
|
6888
|
+
onChange?.(next);
|
|
6921
6889
|
}, [isControlled, onChange]);
|
|
6922
6890
|
const handleSpinnerChange = useCallback((parts) => {
|
|
6923
|
-
const base = value
|
|
6891
|
+
const base = value ?? new Date();
|
|
6924
6892
|
const next = setTimeOfDay(base, parts);
|
|
6925
6893
|
if (!isWithin(next, min, max))
|
|
6926
6894
|
return;
|
|
@@ -6933,9 +6901,10 @@ const TimeInputBase = forwardRef((props, ref) => {
|
|
|
6933
6901
|
const fmt = typeof format === 'string' ? format : undefined;
|
|
6934
6902
|
return parse
|
|
6935
6903
|
? parse(trimmed)
|
|
6936
|
-
: parseTime(trimmed, fmt
|
|
6937
|
-
|
|
6938
|
-
|
|
6904
|
+
: parseTime(trimmed, fmt ??
|
|
6905
|
+
(typeof defaultFormat === 'string'
|
|
6906
|
+
? defaultFormat
|
|
6907
|
+
: DEFAULT_TIME_FORMAT_24));
|
|
6939
6908
|
}, [parse, format, defaultFormat]);
|
|
6940
6909
|
const makeBaseDate = useCallback(() => {
|
|
6941
6910
|
const d = new Date();
|
|
@@ -6991,9 +6960,9 @@ const TimeInputBase = forwardRef((props, ref) => {
|
|
|
6991
6960
|
}, 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 }));
|
|
6992
6961
|
}
|
|
6993
6962
|
const spinnerValue = {
|
|
6994
|
-
hours:
|
|
6995
|
-
minutes:
|
|
6996
|
-
seconds: enableSeconds ? (
|
|
6963
|
+
hours: value?.getHours() ?? 0,
|
|
6964
|
+
minutes: value?.getMinutes() ?? 0,
|
|
6965
|
+
seconds: enableSeconds ? (value?.getSeconds() ?? 0) : undefined,
|
|
6997
6966
|
};
|
|
6998
6967
|
const panel = (jsxs("div", { className: panelClass, children: [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 && (jsxs(Buttons, { className: footerClass, hasAddons: true, children: [jsx("button", { type: "button", className: footerOkClass, onClick: () => setOpen(false), children: t.ok }), jsx("button", { type: "button", className: footerButton, onClick: () => {
|
|
6999
6968
|
commitValue(snapTimeToIncrement(new Date(), {
|
|
@@ -7021,13 +6990,12 @@ const TimeInputBase = forwardRef((props, ref) => {
|
|
|
7021
6990
|
TimeInputBase.displayName = 'TimeInputBase';
|
|
7022
6991
|
|
|
7023
6992
|
const TimeInput = forwardRef(({ label, labelSize, labelProps, horizontal, iconLeft, iconRight, iconLeftName = 'clock', iconRightName, iconLeftSize, iconRightSize, hasIconsLeft, hasIconsRight, isLoading, isExpanded, controlSize, message, messageColor, fieldClassName, controlClassName, ...baseProps }, ref) => {
|
|
7024
|
-
var _a;
|
|
7025
6993
|
const insideField = useInsideField();
|
|
7026
6994
|
const insideControl = useInsideControl();
|
|
7027
6995
|
const helpClass = usePrefixedClassNames('help', {
|
|
7028
6996
|
[`is-${messageColor}`]: !!messageColor,
|
|
7029
6997
|
});
|
|
7030
|
-
let content = (jsx(TimeInputBase, { ref: ref, ...baseProps, triggerIcon:
|
|
6998
|
+
let content = (jsx(TimeInputBase, { ref: ref, ...baseProps, triggerIcon: baseProps.triggerIcon ?? !isLoading }));
|
|
7031
6999
|
if (!insideControl && !baseProps.inline) {
|
|
7032
7000
|
content = (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 }));
|
|
7033
7001
|
}
|
|
@@ -7057,27 +7025,27 @@ const fromIsoDateTime = (s) => {
|
|
|
7057
7025
|
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);
|
|
7058
7026
|
};
|
|
7059
7027
|
const DateTimeInputBase = forwardRef((props, ref) => {
|
|
7060
|
-
var _a, _b, _c, _d;
|
|
7061
7028
|
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;
|
|
7062
7029
|
const t = mergeLabels(labels);
|
|
7063
7030
|
const hasVibrate = typeof navigator !== 'undefined' && typeof navigator.vibrate === 'function';
|
|
7064
7031
|
const effectiveAudioTick = audioTick || (haptics && !hasVibrate);
|
|
7065
7032
|
const isControlled = controlledValue !== undefined;
|
|
7066
|
-
const [internalValue, setInternalValue] = useState(defaultValue
|
|
7067
|
-
const value = isControlled ? (controlledValue
|
|
7068
|
-
const initialFocused = useMemo(() => clampDate(value
|
|
7033
|
+
const [internalValue, setInternalValue] = useState(defaultValue ?? null);
|
|
7034
|
+
const value = isControlled ? (controlledValue ?? null) : internalValue;
|
|
7035
|
+
const initialFocused = useMemo(() => clampDate(value ?? new Date(), min, max), []);
|
|
7069
7036
|
const [focusedDate, setFocusedDate] = useState(initialFocused);
|
|
7070
7037
|
useEffect(() => {
|
|
7071
7038
|
setFocusedDate(prev => clampDate(prev, min, max));
|
|
7072
7039
|
}, [min, max]);
|
|
7073
|
-
const defaultFormat = format
|
|
7074
|
-
|
|
7075
|
-
?
|
|
7076
|
-
|
|
7077
|
-
|
|
7078
|
-
|
|
7079
|
-
|
|
7080
|
-
|
|
7040
|
+
const defaultFormat = format ??
|
|
7041
|
+
(hourFormat === '12'
|
|
7042
|
+
? enableSeconds
|
|
7043
|
+
? 'YYYY-MM-DD hh:mm:ss A'
|
|
7044
|
+
: 'YYYY-MM-DD hh:mm A'
|
|
7045
|
+
: enableSeconds
|
|
7046
|
+
? 'YYYY-MM-DD HH:mm:ss'
|
|
7047
|
+
: DEFAULT_DATETIME_FORMAT);
|
|
7048
|
+
const effectiveHourFormat = hourCycleFromFormat(defaultFormat) ?? hourFormat;
|
|
7081
7049
|
const [open, setOpenState] = useState(false);
|
|
7082
7050
|
const [timeOpen, setTimeOpen] = useState(false);
|
|
7083
7051
|
const [text, setText] = useState(value ? formatDateTime(value, defaultFormat, locale) : '');
|
|
@@ -7122,10 +7090,10 @@ const DateTimeInputBase = forwardRef((props, ref) => {
|
|
|
7122
7090
|
return prev;
|
|
7123
7091
|
if (next) {
|
|
7124
7092
|
valueAtOpenRef.current = value;
|
|
7125
|
-
onOpen
|
|
7093
|
+
onOpen?.();
|
|
7126
7094
|
}
|
|
7127
7095
|
else {
|
|
7128
|
-
onClose
|
|
7096
|
+
onClose?.();
|
|
7129
7097
|
}
|
|
7130
7098
|
return next;
|
|
7131
7099
|
});
|
|
@@ -7142,14 +7110,13 @@ const DateTimeInputBase = forwardRef((props, ref) => {
|
|
|
7142
7110
|
setInternalValue(next);
|
|
7143
7111
|
if (next)
|
|
7144
7112
|
setFocusedDate(next);
|
|
7145
|
-
onChange
|
|
7113
|
+
onChange?.(next);
|
|
7146
7114
|
}, [isControlled, onChange]);
|
|
7147
7115
|
const handleDateSelect = useCallback((d) => {
|
|
7148
|
-
var _a, _b, _c;
|
|
7149
7116
|
const merged = setTimeOfDay(d, {
|
|
7150
|
-
hours:
|
|
7151
|
-
minutes:
|
|
7152
|
-
seconds: enableSeconds ? (
|
|
7117
|
+
hours: value?.getHours() ?? 0,
|
|
7118
|
+
minutes: value?.getMinutes() ?? 0,
|
|
7119
|
+
seconds: enableSeconds ? (value?.getSeconds() ?? 0) : undefined,
|
|
7153
7120
|
});
|
|
7154
7121
|
if (!isWithin(merged, min, max))
|
|
7155
7122
|
return;
|
|
@@ -7157,7 +7124,7 @@ const DateTimeInputBase = forwardRef((props, ref) => {
|
|
|
7157
7124
|
setFocusedDate(d);
|
|
7158
7125
|
}, [value, enableSeconds, min, max, commitValue]);
|
|
7159
7126
|
const handleTimeChange = useCallback((parts) => {
|
|
7160
|
-
const base = value
|
|
7127
|
+
const base = value ?? focusedDate;
|
|
7161
7128
|
const next = setTimeOfDay(base, parts);
|
|
7162
7129
|
if (!isWithin(next, min, max))
|
|
7163
7130
|
return;
|
|
@@ -7170,17 +7137,17 @@ const DateTimeInputBase = forwardRef((props, ref) => {
|
|
|
7170
7137
|
if (parse)
|
|
7171
7138
|
return parse(trimmed);
|
|
7172
7139
|
const fmt = typeof defaultFormat === 'string' ? defaultFormat : undefined;
|
|
7173
|
-
return parseDate(trimmed, fmt
|
|
7140
|
+
return parseDate(trimmed, fmt ?? DEFAULT_DATETIME_FORMAT);
|
|
7174
7141
|
}, [parse, defaultFormat, locale]);
|
|
7175
7142
|
const makeBaseDate = useCallback(() => new Date(), []);
|
|
7176
7143
|
const inputReadOnlyAttr = !!readOnly || !editable;
|
|
7177
7144
|
const canOpen = !!popover && !disabled && !readOnly;
|
|
7178
7145
|
const isBlocked = useMemo(() => {
|
|
7179
|
-
if (!shouldDisableDate && !
|
|
7146
|
+
if (!shouldDisableDate && !unselectableDates?.length && !unselectableTimes)
|
|
7180
7147
|
return undefined;
|
|
7181
|
-
return (d) => !!
|
|
7182
|
-
!!
|
|
7183
|
-
!!
|
|
7148
|
+
return (d) => !!shouldDisableDate?.(d) ||
|
|
7149
|
+
!!unselectableDates?.some(u => isSameDay(u, d)) ||
|
|
7150
|
+
!!unselectableTimes?.(d);
|
|
7184
7151
|
}, [shouldDisableDate, unselectableDates, unselectableTimes]);
|
|
7185
7152
|
const { inputHandlers } = useSegmentedEntry({
|
|
7186
7153
|
format: defaultFormat,
|
|
@@ -7228,9 +7195,9 @@ const DateTimeInputBase = forwardRef((props, ref) => {
|
|
|
7228
7195
|
}, 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 }));
|
|
7229
7196
|
}
|
|
7230
7197
|
const spinnerValue = {
|
|
7231
|
-
hours:
|
|
7232
|
-
minutes:
|
|
7233
|
-
seconds: enableSeconds ? (
|
|
7198
|
+
hours: value?.getHours() ?? 0,
|
|
7199
|
+
minutes: value?.getMinutes() ?? 0,
|
|
7200
|
+
seconds: enableSeconds ? (value?.getSeconds() ?? 0) : undefined,
|
|
7234
7201
|
};
|
|
7235
7202
|
const panel = (jsxs("div", { className: panelClass, onKeyDown: e => {
|
|
7236
7203
|
if (timeOpen && e.key === 'Escape') {
|
|
@@ -7252,13 +7219,12 @@ const DateTimeInputBase = forwardRef((props, ref) => {
|
|
|
7252
7219
|
DateTimeInputBase.displayName = 'DateTimeInputBase';
|
|
7253
7220
|
|
|
7254
7221
|
const DateTimeInput = forwardRef(({ label, labelSize, labelProps, horizontal, iconLeft, iconRight, iconLeftName = 'calendar-alt', iconRightName, iconLeftSize, iconRightSize, hasIconsLeft, hasIconsRight, isLoading, isExpanded, controlSize, message, messageColor, fieldClassName, controlClassName, ...baseProps }, ref) => {
|
|
7255
|
-
var _a;
|
|
7256
7222
|
const insideField = useInsideField();
|
|
7257
7223
|
const insideControl = useInsideControl();
|
|
7258
7224
|
const helpClass = usePrefixedClassNames('help', {
|
|
7259
7225
|
[`is-${messageColor}`]: !!messageColor,
|
|
7260
7226
|
});
|
|
7261
|
-
let content = (jsx(DateTimeInputBase, { ref: ref, ...baseProps, triggerIcon:
|
|
7227
|
+
let content = (jsx(DateTimeInputBase, { ref: ref, ...baseProps, triggerIcon: baseProps.triggerIcon ?? !isLoading }));
|
|
7262
7228
|
if (!insideControl && !baseProps.inline) {
|
|
7263
7229
|
content = (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 }));
|
|
7264
7230
|
}
|
|
@@ -7941,7 +7907,7 @@ const Container = ({ className, textColor, bgColor, fluid, widescreen, fullhd, b
|
|
|
7941
7907
|
|
|
7942
7908
|
const Footer = ({ as = 'footer', className, children, color, bgColor, textColor, ...props }) => {
|
|
7943
7909
|
const { bulmaHelperClasses, rest } = useBulmaClasses({
|
|
7944
|
-
color: textColor
|
|
7910
|
+
color: textColor ?? color,
|
|
7945
7911
|
backgroundColor: bgColor,
|
|
7946
7912
|
...props,
|
|
7947
7913
|
});
|
|
@@ -7966,7 +7932,7 @@ const Hero = ({ className, color, size, bgColor, fullheightWithNavbar, children,
|
|
|
7966
7932
|
};
|
|
7967
7933
|
const HeroHead = ({ className, children, color, bgColor, textColor, ...props }) => {
|
|
7968
7934
|
const { bulmaHelperClasses, rest } = useBulmaClasses({
|
|
7969
|
-
color: textColor
|
|
7935
|
+
color: textColor ?? color,
|
|
7970
7936
|
backgroundColor: bgColor,
|
|
7971
7937
|
...props,
|
|
7972
7938
|
});
|
|
@@ -7976,7 +7942,7 @@ const HeroHead = ({ className, children, color, bgColor, textColor, ...props })
|
|
|
7976
7942
|
};
|
|
7977
7943
|
const HeroBody = ({ className, children, color, bgColor, textColor, ...props }) => {
|
|
7978
7944
|
const { bulmaHelperClasses, rest } = useBulmaClasses({
|
|
7979
|
-
color: textColor
|
|
7945
|
+
color: textColor ?? color,
|
|
7980
7946
|
backgroundColor: bgColor,
|
|
7981
7947
|
...props,
|
|
7982
7948
|
});
|
|
@@ -7986,7 +7952,7 @@ const HeroBody = ({ className, children, color, bgColor, textColor, ...props })
|
|
|
7986
7952
|
};
|
|
7987
7953
|
const HeroFoot = ({ className, children, color, bgColor, textColor, ...props }) => {
|
|
7988
7954
|
const { bulmaHelperClasses, rest } = useBulmaClasses({
|
|
7989
|
-
color: textColor
|
|
7955
|
+
color: textColor ?? color,
|
|
7990
7956
|
backgroundColor: bgColor,
|
|
7991
7957
|
...props,
|
|
7992
7958
|
});
|
|
@@ -8000,7 +7966,7 @@ Hero.Foot = HeroFoot;
|
|
|
8000
7966
|
|
|
8001
7967
|
const Level = ({ isMobile, className, children, color, bgColor, textColor, ...props }) => {
|
|
8002
7968
|
const { bulmaHelperClasses, rest } = useBulmaClasses({
|
|
8003
|
-
color: textColor
|
|
7969
|
+
color: textColor ?? color,
|
|
8004
7970
|
backgroundColor: bgColor,
|
|
8005
7971
|
...props,
|
|
8006
7972
|
});
|
|
@@ -8012,7 +7978,7 @@ const Level = ({ isMobile, className, children, color, bgColor, textColor, ...pr
|
|
|
8012
7978
|
};
|
|
8013
7979
|
const LevelLeft = ({ className, children, color, bgColor, textColor, ...props }) => {
|
|
8014
7980
|
const { bulmaHelperClasses, rest } = useBulmaClasses({
|
|
8015
|
-
color: textColor
|
|
7981
|
+
color: textColor ?? color,
|
|
8016
7982
|
backgroundColor: bgColor,
|
|
8017
7983
|
...props,
|
|
8018
7984
|
});
|
|
@@ -8022,7 +7988,7 @@ const LevelLeft = ({ className, children, color, bgColor, textColor, ...props })
|
|
|
8022
7988
|
};
|
|
8023
7989
|
const LevelRight = ({ className, children, color, bgColor, textColor, ...props }) => {
|
|
8024
7990
|
const { bulmaHelperClasses, rest } = useBulmaClasses({
|
|
8025
|
-
color: textColor
|
|
7991
|
+
color: textColor ?? color,
|
|
8026
7992
|
backgroundColor: bgColor,
|
|
8027
7993
|
...props,
|
|
8028
7994
|
});
|
|
@@ -8032,7 +7998,7 @@ const LevelRight = ({ className, children, color, bgColor, textColor, ...props }
|
|
|
8032
7998
|
};
|
|
8033
7999
|
const LevelItem = ({ as = 'div', hasTextCentered, className, children, href, target, rel, color, bgColor, textColor, ...props }) => {
|
|
8034
8000
|
const { bulmaHelperClasses, rest } = useBulmaClasses({
|
|
8035
|
-
color: textColor
|
|
8001
|
+
color: textColor ?? color,
|
|
8036
8002
|
backgroundColor: bgColor,
|
|
8037
8003
|
...props,
|
|
8038
8004
|
});
|
|
@@ -8052,7 +8018,7 @@ Level.Item = LevelItem;
|
|
|
8052
8018
|
|
|
8053
8019
|
const Media = ({ as = 'article', className, children, color, bgColor, textColor, ...props }) => {
|
|
8054
8020
|
const { bulmaHelperClasses, rest } = useBulmaClasses({
|
|
8055
|
-
color: textColor
|
|
8021
|
+
color: textColor ?? color,
|
|
8056
8022
|
backgroundColor: bgColor,
|
|
8057
8023
|
...props,
|
|
8058
8024
|
});
|
|
@@ -8063,7 +8029,7 @@ const Media = ({ as = 'article', className, children, color, bgColor, textColor,
|
|
|
8063
8029
|
};
|
|
8064
8030
|
const MediaLeft = ({ as = 'figure', className, children, color, bgColor, textColor, ...props }) => {
|
|
8065
8031
|
const { bulmaHelperClasses, rest } = useBulmaClasses({
|
|
8066
|
-
color: textColor
|
|
8032
|
+
color: textColor ?? color,
|
|
8067
8033
|
backgroundColor: bgColor,
|
|
8068
8034
|
...props,
|
|
8069
8035
|
});
|
|
@@ -8074,7 +8040,7 @@ const MediaLeft = ({ as = 'figure', className, children, color, bgColor, textCol
|
|
|
8074
8040
|
};
|
|
8075
8041
|
const MediaContent = ({ className, children, color, bgColor, textColor, ...props }) => {
|
|
8076
8042
|
const { bulmaHelperClasses, rest } = useBulmaClasses({
|
|
8077
|
-
color: textColor
|
|
8043
|
+
color: textColor ?? color,
|
|
8078
8044
|
backgroundColor: bgColor,
|
|
8079
8045
|
...props,
|
|
8080
8046
|
});
|
|
@@ -8084,7 +8050,7 @@ const MediaContent = ({ className, children, color, bgColor, textColor, ...props
|
|
|
8084
8050
|
};
|
|
8085
8051
|
const MediaRight = ({ className, children, color, bgColor, textColor, ...props }) => {
|
|
8086
8052
|
const { bulmaHelperClasses, rest } = useBulmaClasses({
|
|
8087
|
-
color: textColor
|
|
8053
|
+
color: textColor ?? color,
|
|
8088
8054
|
backgroundColor: bgColor,
|
|
8089
8055
|
...props,
|
|
8090
8056
|
});
|
|
@@ -8099,7 +8065,7 @@ MediaWithSubcomponents.Right = MediaRight;
|
|
|
8099
8065
|
|
|
8100
8066
|
const Section = ({ size, className, children, color, bgColor, textColor, ...props }) => {
|
|
8101
8067
|
const { bulmaHelperClasses, rest } = useBulmaClasses({
|
|
8102
|
-
color: textColor
|
|
8068
|
+
color: textColor ?? color,
|
|
8103
8069
|
backgroundColor: bgColor,
|
|
8104
8070
|
...props,
|
|
8105
8071
|
});
|