@cube-dev/ui-kit 0.27.2 → 0.29.0

package/cjs/components/forms/Checkbox/Checkbox.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.27.2
+ * @cube-dev/ui-kit v0.29.0
  * Released under the MIT license.
  */
 
@@ -11,26 +11,25 @@ exports.Checkbox = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const utils_1 = require("@react-spectrum/utils");
 const react_1 = require("react");
-const checkbox_1 = require("@react-aria/checkbox");
-const interactions_1 = require("@react-aria/interactions");
-const toggle_1 = require("@react-stately/toggle");
+const react_aria_1 = require("react-aria");
+const react_stately_1 = require("react-stately");
 const provider_1 = require("../../../provider");
 const tasty_1 = require("../../../tasty");
-const interactions_2 = require("../../../utils/react/interactions");
+const interactions_1 = require("../../../utils/react/interactions");
 const react_2 = require("../../../utils/react");
 const Label_1 = require("../Label");
 const HiddenInput_1 = require("../../HiddenInput");
 const Form_1 = require("../Form");
-const FieldWrapper_1 = require("../FieldWrapper");
 const nullableValue_1 = require("../../../utils/react/nullableValue");
 const Text_1 = require("../../content/Text");
+const wrapper_1 = require("../wrapper");
 const CheckboxGroup_1 = require("./CheckboxGroup");
 const context_1 = require("./context");
 function CheckOutlined() {
     return ((0, jsx_runtime_1.jsx)("svg", { width: "10", height: "8", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: (0, jsx_runtime_1.jsx)("path", { d: "M3.417 7.604l-.017.018-3.4-3.4 1.433-1.433 1.985 1.985L8.192 0l1.432 1.433-6.189 6.189-.018-.018z", fill: "currentColor" }) }));
 }
 function IndeterminateOutline() {
-    return ((0, jsx_runtime_1.jsx)("svg", { width: "9", height: "3", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: (0, jsx_runtime_1.jsx)("path", { d: "M0 .044v2.001l.026.025h8.063V.044H0z", fill: "#fff" }) }));
+    return ((0, jsx_runtime_1.jsx)("svg", { width: "8", height: "2", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: (0, jsx_runtime_1.jsx)("path", { d: "M0 .044v2.001l.026.025h8.063V.044H0z", fill: "#fff" }) }));
 }
 const CheckboxWrapperElement = (0, tasty_1.tasty)({
     as: 'label',
@@ -44,6 +43,7 @@ const CheckboxWrapperElement = (0, tasty_1.tasty)({
         flow: 'row',
         preset: 'default',
         cursor: 'pointer',
+        width: 'max max-content',
     },
 });
 const CheckboxElement = (0, tasty_1.tasty)({
@@ -95,20 +95,20 @@ function Checkbox(props, ref) {
         }),
         unsafe__isDisabled: !!groupState,
     });
-    let { qa, isIndeterminate = false, isDisabled = false, insideForm, isRequired, autoFocus, children, label, extra, validationState, labelProps, labelStyles, labelPosition, necessityLabel, necessityIndicator, message, description, requiredMark = true, tooltip, isHidden, labelSuffix, ...otherProps } = props;
+    let { qa, isIndeterminate = false, isDisabled = false, insideForm, isRequired, children, label, validationState, labelProps, labelStyles, labelPosition, inputStyles, isHidden, ...otherProps } = props;
     let styles = (0, tasty_1.extractStyles)(props, tasty_1.OUTER_STYLES);
-    let inputStyles = (0, tasty_1.extractStyles)(props, tasty_1.BLOCK_STYLES);
-    labelStyles = {
-        ...(insideForm && !groupState ? Label_1.LABEL_STYLES : Label_1.INLINE_LABEL_STYLES),
+    inputStyles = (0, tasty_1.extractStyles)(props, tasty_1.BLOCK_STYLES, inputStyles);
+    labelStyles = (0, react_1.useMemo)(() => ({
+        ...(insideForm ? Label_1.LABEL_STYLES : Label_1.INLINE_LABEL_STYLES),
         ...labelStyles,
-    };
-    let { isFocused, focusProps } = (0, interactions_2.useFocus)({ isDisabled }, true);
-    let { hoverProps, isHovered } = (0, interactions_1.useHover)({ isDisabled });
+    }), [insideForm, labelStyles]);
+    let { isFocused, focusProps } = (0, interactions_1.useFocus)({ isDisabled }, true);
+    let { hoverProps, isHovered } = (0, react_aria_1.useHover)({ isDisabled });
     let inputRef = (0, react_1.useRef)(null);
     let domRef = (0, utils_1.useFocusableRef)(ref, inputRef);
-    const toggleState = (0, toggle_1.useToggleState)(props);
+    const toggleState = (0, react_stately_1.useToggleState)(props);
     let { inputProps } = groupState // eslint-disable-next-line react-hooks/rules-of-hooks
-        ? (0, checkbox_1.useCheckboxGroupItem)({
+        ? (0, react_aria_1.useCheckboxGroupItem)({
             ...props,
             // Value is optional for standalone checkboxes, but required for CheckboxGroup items;
             // it's passed explicitly here to avoid typescript error (requires strictNullChecks disabled).
@@ -118,7 +118,7 @@ function Checkbox(props, ref) {
             isRequired: originalProps.isRequired,
             validationState: originalProps.validationState,
         }, groupState, inputRef) // eslint-disable-next-line react-hooks/rules-of-hooks
-        : (0, checkbox_1.useCheckbox)({
+        : (0, react_aria_1.useCheckbox)({
             ...props,
             ...(typeof label === 'string' && label.trim()
                 ? { 'aria-label': label }
@@ -146,30 +146,15 @@ function Checkbox(props, ref) {
         'side-label': labelPosition === 'side',
         'inside-form': insideForm,
     };
-    const checkboxField = ((0, jsx_runtime_1.jsxs)(CheckboxWrapperElement, { isHidden: isHidden, mods: mods, styles: { position: 'relative' }, children: [(0, jsx_runtime_1.jsx)(HiddenInput_1.HiddenInput, { "data-qa": qa || 'Checkbox', ...(0, react_2.mergeProps)(inputProps, focusProps), ref: inputRef }), (0, jsx_runtime_1.jsx)(CheckboxElement, { qa: "Checkbox", mods: mods, styles: inputStyles, children: markIcon }), children && (0, jsx_runtime_1.jsx)(Text_1.Text, { children: children })] }));
+    const checkboxField = ((0, jsx_runtime_1.jsxs)(CheckboxWrapperElement, { isHidden: isHidden, mods: mods, styles: { position: 'relative' }, children: [(0, jsx_runtime_1.jsx)(HiddenInput_1.HiddenInput, { "data-qa": "HiddenInput", ...(0, react_2.mergeProps)(inputProps, focusProps), ref: inputRef }), (0, jsx_runtime_1.jsx)(CheckboxElement, { qa: qa || 'Checkbox', mods: mods, styles: inputStyles, children: markIcon }), children && (0, jsx_runtime_1.jsx)(Text_1.Text, { nowrap: true, children: children })] }));
     if (insideForm && !groupState) {
-        return ((0, jsx_runtime_1.jsx)(FieldWrapper_1.FieldWrapper, { ...{
-                as: 'label',
-                labelPosition,
-                label,
-                extra,
-                styles,
-                isRequired,
-                labelStyles,
-                isHidden,
-                labelProps,
-                isDisabled,
-                validationState,
-                necessityLabel,
-                necessityIndicator,
-                message,
-                description,
-                requiredMark,
-                tooltip,
-                labelSuffix,
-                Component: checkboxField,
-                ref: domRef,
-            } }));
+        return (0, wrapper_1.wrapWithField)(checkboxField, domRef, {
+            ...props,
+            children: null,
+            labelStyles,
+            inputStyles,
+            styles,
+        });
     }
     return ((0, jsx_runtime_1.jsxs)(CheckboxWrapperElement, { as: "label", styles: styles, isHidden: isHidden, ...hoverProps, ...(0, tasty_1.filterBaseProps)(otherProps), ref: domRef, children: [checkboxField, label ? ((0, jsx_runtime_1.jsx)(tasty_1.Element, { styles: labelStyles, mods: {
                     invalid: validationState === 'invalid',

package/cjs/components/forms/Checkbox/CheckboxGroup.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.27.2
+ * @cube-dev/ui-kit v0.29.0
  * Released under the MIT license.
  */
 
@@ -11,13 +11,14 @@ exports.CheckboxGroup = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const utils_1 = require("@react-spectrum/utils");
-const checkbox_1 = require("@react-aria/checkbox");
-const checkbox_2 = require("@react-stately/checkbox");
+const react_aria_1 = require("react-aria");
+const react_stately_1 = require("react-stately");
 const provider_1 = require("../../../provider");
 const tasty_1 = require("../../../tasty");
-const FieldWrapper_1 = require("../FieldWrapper");
 const nullableValue_1 = require("../../../utils/react/nullableValue");
 const Form_1 = require("../Form");
+const react_2 = require("../../../utils/react");
+const wrapper_1 = require("../wrapper");
 const context_1 = require("./context");
 const CheckGroupElement = (0, tasty_1.tasty)({
     qa: 'CheckboxGroup',
@@ -46,19 +47,24 @@ function CheckboxGroup(props, ref) {
             onChange: onChange,
         }),
     });
-    let { isDisabled, isRequired, necessityIndicator, necessityLabel, label, extra, validationState, children, orientation = 'vertical', message, description, labelStyles, tooltip, labelSuffix, inputStyles, ...otherProps } = props;
+    let { isDisabled, isRequired, necessityIndicator, necessityLabel, label, extra, validationState, children, orientation = 'vertical', message, description, labelStyles, tooltip, labelProps: baseLabelProps, labelSuffix, inputStyles, ...otherProps } = props;
     let domRef = (0, utils_1.useDOMRef)(ref);
     let styles = (0, tasty_1.extractStyles)(otherProps, tasty_1.CONTAINER_STYLES);
-    let { fieldWrapperProps } = (0, FieldWrapper_1.extractFieldWrapperProps)(props);
-    let state = (0, checkbox_2.useCheckboxGroupState)(props);
-    let { groupProps, labelProps } = (0, checkbox_1.useCheckboxGroup)(props, state);
+    let state = (0, react_stately_1.useCheckboxGroupState)(props);
+    let { groupProps, labelProps } = (0, react_aria_1.useCheckboxGroup)(props, state);
     let radioGroup = ((0, jsx_runtime_1.jsx)(CheckGroupElement, { styles: inputStyles, mods: {
             horizontal: orientation === 'horizontal',
         }, children: (0, jsx_runtime_1.jsx)(Form_1.FormContext.Provider, { value: {
                 isDisabled,
                 validationState,
             }, children: (0, jsx_runtime_1.jsx)(context_1.CheckboxGroupContext.Provider, { value: state, children: children }) }) }));
-    return ((0, jsx_runtime_1.jsx)(FieldWrapper_1.FieldWrapper, { ...fieldWrapperProps, ref: domRef, Component: radioGroup, fieldProps: groupProps, labelProps: labelProps, styles: styles }));
+    return (0, wrapper_1.wrapWithField)(radioGroup, domRef, {
+        ...props,
+        children: null,
+        fieldProps: groupProps,
+        labelProps: (0, react_2.mergeProps)(baseLabelProps, labelProps),
+        styles,
+    });
 }
 /**
  * Checkbox groups allow users to select a single option from a list of mutually exclusive options.

package/cjs/components/forms/Checkbox/context.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.27.2
+ * @cube-dev/ui-kit v0.29.0
  * Released under the MIT license.
  */
 

package/cjs/components/forms/DatePicker/DateInput.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.27.2
+ * @cube-dev/ui-kit v0.29.0
  * Released under the MIT license.
  */
 
@@ -11,9 +11,8 @@ exports.DateInput = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const date_1 = require("@internationalized/date");
-const datepicker_1 = require("@react-aria/datepicker");
-const datepicker_2 = require("@react-stately/datepicker");
-const i18n_1 = require("@react-aria/i18n");
+const react_aria_1 = require("react-aria");
+const react_stately_1 = require("react-stately");
 const provider_1 = require("../../../provider");
 const wrapper_1 = require("../wrapper");
 const tasty_1 = require("../../../tasty");
@@ -38,17 +37,17 @@ function DateInput(props, ref) {
     let { autoFocus, isDisabled, inputStyles, wrapperStyles, isReadOnly, isRequired, size = 'medium', useLocale: useLocaleProp, } = props;
     let styles = (0, tasty_1.extractStyles)(props, tasty_1.CONTAINER_STYLES, wrapperStyles);
     let domRef = (0, utils_1.useFocusManagerRef)(ref);
-    let { locale } = (0, i18n_1.useLocale)();
-    let state = (0, datepicker_2.useDateFieldState)({
+    let { locale } = (0, react_aria_1.useLocale)();
+    let state = (0, react_stately_1.useDateFieldState)({
         ...props,
-        locale,
+        locale: useLocaleProp ? locale : 'en-US',
         createCalendar: date_1.createCalendar,
     });
-    if (!useLocaleProp) {
+    if (useLocaleProp == null) {
         state.segments = (0, utils_1.formatSegments)(state.segments);
     }
     let fieldRef = (0, react_1.useRef)(null);
-    let { labelProps, fieldProps } = (0, datepicker_1.useDateField)(props, state, fieldRef);
+    let { labelProps, fieldProps } = (0, react_aria_1.useDateField)(props, state, fieldRef);
     const component = ((0, jsx_runtime_1.jsx)(DateInputBase_1.DateInputBase, { ref: fieldRef, size: size, fieldProps: fieldProps, isDisabled: isDisabled, autoFocus: autoFocus, validationState: state.validationState, styles: wrapperStyles, inputStyles: inputStyles, children: state.segments.map((segment, i) => ((0, jsx_runtime_1.jsx)(DatePickerSegment_1.DatePickerSegment, { segment: segment, state: state, isDisabled: isDisabled, isReadOnly: isReadOnly, isRequired: isRequired }, i))) }));
     return (0, wrapper_1.wrapWithField)(component, domRef, {
         ...props,

package/cjs/components/forms/DatePicker/DateInputBase.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.27.2
+ * @cube-dev/ui-kit v0.29.0
  * Released under the MIT license.
  */
 
@@ -32,13 +32,14 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DateInputBase = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const utils_1 = require("@react-aria/utils");
 const react_1 = __importStar(require("react"));
-const focus_1 = require("@react-aria/focus");
+const utils_1 = require("@react-aria/utils");
+const react_aria_1 = require("react-aria");
 const tasty_1 = require("../../../tasty");
 const TextInputBase_1 = require("../TextInput/TextInputBase");
 const InvalidIcon_1 = require("../../shared/InvalidIcon");
 const ValidIcon_1 = require("../../shared/ValidIcon");
+const react_2 = require("../../../utils/react");
 const DateInputWrapperElement = (0, tasty_1.tasty)({
     qa: 'DateInputWrapper',
     role: 'presentation',
@@ -60,7 +61,7 @@ function DateInputBase(props, ref) {
     let inputRef = (0, react_1.useRef)(null);
     let { isDisabled, inputStyles, children, fieldProps, style, disableFocusRing, autoFocus, validationState, isLoading, size = 'medium', } = props;
     let styles = (0, tasty_1.extractStyles)(props, tasty_1.CONTAINER_STYLES);
-    let { focusProps, isFocused } = (0, focus_1.useFocusRing)({
+    let { focusProps, isFocused } = (0, react_aria_1.useFocusRing)({
         isTextInput: true,
         within: true,
         autoFocus,
@@ -72,7 +73,7 @@ function DateInputBase(props, ref) {
             disabled: isDisabled,
             focused: isFocused && !disableFocusRing,
             invalid: isInvalid,
-        }, ...(0, utils_1.mergeProps)(fieldProps ?? {}, focusProps), style: style, children: [(0, jsx_runtime_1.jsx)("div", { "data-element": "Contents", role: "presentation", children: (0, jsx_runtime_1.jsx)(DateInputElement, { ref: (0, utils_1.mergeRefs)(ref, inputRef), "data-size": size, role: "presentation", styles: inputStyles, children: children }) }), validationState && !isLoading ? validation : undefined] }));
+        }, ...(0, react_2.mergeProps)(fieldProps ?? {}, focusProps), style: style, children: [(0, jsx_runtime_1.jsx)("div", { "data-element": "Contents", role: "presentation", children: (0, jsx_runtime_1.jsx)(DateInputElement, { ref: (0, utils_1.mergeRefs)(ref, inputRef), "data-size": size, role: "presentation", styles: inputStyles, children: children }) }), validationState && !isLoading ? validation : undefined] }));
 }
 const _DateInputBase = react_1.default.forwardRef(DateInputBase);
 exports.DateInputBase = _DateInputBase;

package/cjs/components/forms/DatePicker/DatePicker.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.27.2
+ * @cube-dev/ui-kit v0.29.0
  * Released under the MIT license.
  */
 
@@ -10,9 +10,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DatePicker = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const datepicker_1 = require("@react-aria/datepicker");
-const datepicker_2 = require("@react-stately/datepicker");
-const focus_1 = require("@react-aria/focus");
+const react_aria_1 = require("react-aria");
+const react_stately_1 = require("react-stately");
 const provider_1 = require("../../../provider");
 const wrapper_1 = require("../wrapper");
 const tasty_1 = require("../../../tasty");
@@ -38,23 +37,23 @@ function DatePicker(props, ref) {
     let styles = (0, tasty_1.extractStyles)(props, tasty_1.CONTAINER_STYLES);
     let { size, placeholderValue, isDisabled, validationState, useLocale: useLocaleProp, autoFocus, } = props;
     let targetRef = (0, react_1.useRef)(null);
-    let state = (0, datepicker_2.useDatePickerState)({
+    let state = (0, react_stately_1.useDatePickerState)({
         ...props,
         shouldCloseOnSelect: () => !state.hasTime,
     });
     let { isOpen, setOpen } = state;
     let domRef = (0, utils_1.useFocusManagerRef)(ref);
-    let { isFocused, focusProps } = (0, focus_1.useFocusRing)({
+    let { isFocused, focusProps } = (0, react_aria_1.useFocusRing)({
         within: true,
         isTextInput: true,
         autoFocus,
     });
-    let { isFocused: isFocusedButton, focusProps: focusPropsButton } = (0, focus_1.useFocusRing)({
+    let { isFocused: isFocusedButton, focusProps: focusPropsButton } = (0, react_aria_1.useFocusRing)({
         within: false,
         isTextInput: false,
         autoFocus,
     });
-    let { groupProps, labelProps, fieldProps, buttonProps, dialogProps, calendarProps, } = (0, datepicker_1.useDatePicker)(props, state, targetRef);
+    let { groupProps, labelProps, fieldProps, buttonProps, dialogProps, calendarProps, } = (0, react_aria_1.useDatePicker)(props, state, targetRef);
     let placeholder = placeholderValue;
     let timePlaceholder = placeholder && 'hour' in placeholder ? placeholder : undefined;
     let timeMinValue = props.minValue && 'hour' in props.minValue ? props.minValue : undefined;
@@ -65,7 +64,6 @@ function DatePicker(props, ref) {
         ? state.granularity
         : null;
     let showTimeField = !!timeGranularity;
-    //
     // let visibleMonths = useVisibleMonths(maxVisibleMonths);
     const component = ((0, jsx_runtime_1.jsxs)(DatePickerElement_1.DatePickerElement, { ref: targetRef, styles: props.wrapperStyles, mods: { focused: isFocused && !isFocusedButton }, ...focusProps, children: [(0, jsx_runtime_1.jsx)(DateInputBase_1.DateInputBase, { disableFocusRing: true, radius: "left", border: "top left bottom", isDisabled: isDisabled, validationState: validationState, size: size, children: (0, jsx_runtime_1.jsx)(DatePickerInput_1.DatePickerInput, { useLocale: useLocaleProp, ...fieldProps }) }), (0, jsx_runtime_1.jsxs)(Dialog_1.DialogTrigger, { hideArrow: true, type: "popover", mobileType: "tray", placement: "bottom right", targetRef: targetRef, isOpen: isOpen, shouldFlip: props.shouldFlip, onOpenChange: setOpen, children: [(0, jsx_runtime_1.jsx)(DatePickerButton_1.DatePickerButton, { size: size, ...(0, react_2.mergeProps)(buttonProps, focusPropsButton), isDisabled: isDisabled }), (0, jsx_runtime_1.jsxs)(Dialog_1.Dialog, { ...dialogProps, width: "max-content", children: [(0, jsx_runtime_1.jsx)(Calendar_1.Calendar, { ...calendarProps }), showTimeField && ((0, jsx_runtime_1.jsx)(TimeInput_1.TimeInput, { padding: "1x", label: intl_1.dateMessages['time'], value: state.timeValue, placeholderValue: timePlaceholder, granularity: timeGranularity, minValue: timeMinValue, maxValue: timeMaxValue, hourCycle: props.hourCycle, hideTimeZone: props.hideTimeZone, onChange: state.setTimeValue }))] })] })] }));
     return (0, wrapper_1.wrapWithField)(component, domRef, {

package/cjs/components/forms/DatePicker/DatePickerButton.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.27.2
+ * @cube-dev/ui-kit v0.29.0
  * Released under the MIT license.
  */
 

package/cjs/components/forms/DatePicker/DatePickerElement.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.27.2
+ * @cube-dev/ui-kit v0.29.0
  * Released under the MIT license.
  */
 

package/cjs/components/forms/DatePicker/DatePickerInput.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.27.2
+ * @cube-dev/ui-kit v0.29.0
  * Released under the MIT license.
  */
 
@@ -11,10 +11,10 @@ exports.DatePickerInput = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const date_1 = require("@internationalized/date");
-const datepicker_1 = require("@react-aria/datepicker");
-const datepicker_2 = require("@react-stately/datepicker");
-const i18n_1 = require("@react-aria/i18n");
+const react_aria_1 = require("react-aria");
+const react_stately_1 = require("react-stately");
 const tasty_1 = require("../../../tasty");
+const react_2 = require("../../../utils/react");
 const DatePickerSegment_1 = require("./DatePickerSegment");
 const utils_1 = require("./utils");
 const DateInputElement = (0, tasty_1.tasty)({
@@ -28,17 +28,27 @@ const DateInputElement = (0, tasty_1.tasty)({
 function DatePickerInput(props) {
     let { isDisabled, isReadOnly, isRequired, useLocale: useLocaleProp } = props;
     let ref = (0, react_1.useRef)(null);
-    let { locale } = (0, i18n_1.useLocale)();
-    let state = (0, datepicker_2.useDateFieldState)({
+    let { locale } = (0, react_aria_1.useLocale)();
+    let state = (0, react_stately_1.useDateFieldState)({
         ...props,
-        locale,
+        locale: useLocaleProp ? locale : 'en-US',
         createCalendar: date_1.createCalendar,
     });
-    if (!useLocaleProp) {
+    if (useLocaleProp == null) {
         state.segments = (0, utils_1.formatSegments)(state.segments);
     }
-    let { fieldProps } = (0, datepicker_1.useDateField)(props, state, ref);
-    return ((0, jsx_runtime_1.jsx)(DateInputElement, { ref: ref, ...fieldProps, children: state.segments.map((segment, i) => ((0, jsx_runtime_1.jsx)(DatePickerSegment_1.DatePickerSegment, { segment: segment, state: state, isDisabled: isDisabled, isReadOnly: isReadOnly, isRequired: isRequired }, i))) }));
+    const focusWithinProps = (0, react_aria_1.useFocusWithin)({
+        onFocusWithinChange: (isFocused) => {
+            if (isFocused) {
+                props.onFocus?.();
+            }
+            else {
+                props.onBlur?.();
+            }
+        },
+    });
+    let { fieldProps } = (0, react_aria_1.useDateField)(props, state, ref);
+    return ((0, jsx_runtime_1.jsx)(DateInputElement, { ref: ref, ...(0, react_2.mergeProps)(fieldProps, focusWithinProps), children: state.segments.map((segment, i) => ((0, jsx_runtime_1.jsx)(DatePickerSegment_1.DatePickerSegment, { segment: segment, state: state, isDisabled: isDisabled, isReadOnly: isReadOnly, isRequired: isRequired }, i))) }));
 }
 exports.DatePickerInput = DatePickerInput;
 

package/cjs/components/forms/DatePicker/DatePickerSegment.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.27.2
+ * @cube-dev/ui-kit v0.29.0
  * Released under the MIT license.
  */
 
@@ -10,7 +10,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DatePickerSegment = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const datepicker_1 = require("@react-aria/datepicker");
+const react_aria_1 = require("react-aria");
 const tasty_1 = require("../../../tasty");
 const LiteralSegmentElement = (0, tasty_1.tasty)({
     qa: 'LiteralSegment',
@@ -55,7 +55,7 @@ function LiteralSegment({ segment }) {
 }
 function EditableSegment({ segment, state }) {
     let ref = (0, react_1.useRef)(null);
-    let { segmentProps } = (0, datepicker_1.useDateSegment)(segment, state, ref);
+    let { segmentProps } = (0, react_aria_1.useDateSegment)(segment, state, ref);
     return ((0, jsx_runtime_1.jsx)(EditableSegmentElement, { ...segmentProps, ref: ref, mods: {
             placeholder: segment.isPlaceholder,
             'read-only': !segment.isEditable,

package/cjs/components/forms/DatePicker/DateRangePicker.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.27.2
+ * @cube-dev/ui-kit v0.29.0
  * Released under the MIT license.
  */
 
@@ -10,9 +10,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DateRangePicker = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const datepicker_1 = require("@react-aria/datepicker");
-const datepicker_2 = require("@react-stately/datepicker");
-const focus_1 = require("@react-aria/focus");
+const react_aria_1 = require("react-aria");
+const react_stately_1 = require("react-stately");
 const provider_1 = require("../../../provider");
 const wrapper_1 = require("../wrapper");
 const tasty_1 = require("../../../tasty");
@@ -47,23 +46,23 @@ function DateRangePicker(props, ref) {
     let styles = (0, tasty_1.extractStyles)(props, tasty_1.CONTAINER_STYLES);
     let { size, shouldFlip, placeholderValue, isDisabled, validationState, useLocale: useLocaleProp, autoFocus, } = props;
     let targetRef = (0, react_1.useRef)(null);
-    let state = (0, datepicker_2.useDateRangePickerState)({
+    let state = (0, react_stately_1.useDateRangePickerState)({
         ...props,
         shouldCloseOnSelect: () => !state.hasTime,
     });
     let { isOpen, setOpen } = state;
-    let { isFocused, focusProps } = (0, focus_1.useFocusRing)({
+    let { isFocused, focusProps } = (0, react_aria_1.useFocusRing)({
         within: true,
         isTextInput: true,
         autoFocus,
     });
-    let { isFocused: isFocusedButton, focusProps: focusPropsButton } = (0, focus_1.useFocusRing)({
+    let { isFocused: isFocusedButton, focusProps: focusPropsButton } = (0, react_aria_1.useFocusRing)({
         within: false,
         isTextInput: false,
         autoFocus,
     });
     let domRef = (0, utils_1.useFocusManagerRef)(ref);
-    let { groupProps, labelProps, startFieldProps, endFieldProps, buttonProps, dialogProps, calendarProps, } = (0, datepicker_1.useDateRangePicker)(props, state, targetRef);
+    let { groupProps, labelProps, startFieldProps, endFieldProps, buttonProps, dialogProps, calendarProps, } = (0, react_aria_1.useDateRangePicker)(props, state, targetRef);
     let placeholder = placeholderValue;
     let timePlaceholder = placeholder && 'hour' in placeholder ? placeholder : undefined;
     let timeMinValue = props.minValue && 'hour' in props.minValue ? props.minValue : undefined;
@@ -74,7 +73,6 @@ function DateRangePicker(props, ref) {
         ? state.granularity
         : null;
     let showTimeField = !!timeGranularity;
-    //
     // let visibleMonths = useVisibleMonths(maxVisibleMonths);
     const component = ((0, jsx_runtime_1.jsxs)(DatePickerElement_1.DatePickerElement, { ref: targetRef, styles: props.wrapperStyles, mods: { focused: isFocused && !isFocusedButton }, ...focusProps, children: [(0, jsx_runtime_1.jsxs)(DateInputBase_1.DateInputBase, { disableFocusRing: true, isDisabled: isDisabled, validationState: validationState, size: size, styles: { radius: 'left', border: 'top left bottom' }, children: [(0, jsx_runtime_1.jsx)(DatePickerInput_1.DatePickerInput, { useLocale: useLocaleProp, ...startFieldProps }), (0, jsx_runtime_1.jsx)(DateRangeDash, {}), (0, jsx_runtime_1.jsx)(DatePickerInput_1.DatePickerInput, { useLocale: useLocaleProp, ...endFieldProps })] }), (0, jsx_runtime_1.jsxs)(Dialog_1.DialogTrigger, { hideArrow: true, type: "popover", mobileType: "tray", placement: "bottom right", targetRef: targetRef, isOpen: isOpen, shouldFlip: shouldFlip, onOpenChange: setOpen, children: [(0, jsx_runtime_1.jsx)(DatePickerButton_1.DatePickerButton, { size: size, ...(0, react_2.mergeProps)(buttonProps, focusPropsButton), isDisabled: isDisabled }), (0, jsx_runtime_1.jsxs)(Dialog_1.Dialog, { ...dialogProps, width: "max-content", children: [(0, jsx_runtime_1.jsx)(RangeCalendar_1.RangeCalendar, { ...calendarProps }), showTimeField && ((0, jsx_runtime_1.jsxs)(Space_1.Space, { children: [(0, jsx_runtime_1.jsx)(TimeInput_1.TimeInput, { padding: "1x", label: intl_1.dateMessages['startTime'], value: state.timeRange?.start || null, placeholderValue: timePlaceholder, granularity: timeGranularity, minValue: timeMinValue, maxValue: timeMaxValue, hourCycle: props.hourCycle, hideTimeZone: props.hideTimeZone, onChange: (v) => state.setTime('start', v) }), (0, jsx_runtime_1.jsx)(TimeInput_1.TimeInput, { padding: "1x", label: intl_1.dateMessages['endTime'], value: state.timeRange?.end || null, placeholderValue: timePlaceholder, granularity: timeGranularity, minValue: timeMinValue, maxValue: timeMaxValue, hourCycle: props.hourCycle, hideTimeZone: props.hideTimeZone, onChange: (v) => state.setTime('end', v) })] }))] })] })] }));
     return (0, wrapper_1.wrapWithField)(component, domRef, {

package/cjs/components/forms/DatePicker/DateRangeSeparatedPicker.js

@@ -0,0 +1,133 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.29.0
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DateRangeSeparatedPicker = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_aria_1 = require("react-aria");
+const react_stately_1 = require("react-stately");
+const provider_1 = require("../../../provider");
+const wrapper_1 = require("../wrapper");
+const tasty_1 = require("../../../tasty");
+const react_2 = require("../../../utils/react");
+const Form_1 = require("../Form");
+const Dialog_1 = require("../../overlays/Dialog");
+const Calendar_1 = require("../../other/Calendar/Calendar");
+const utils_1 = require("./utils");
+const DateInputBase_1 = require("./DateInputBase");
+const DatePickerInput_1 = require("./DatePickerInput");
+const TimeInput_1 = require("./TimeInput");
+const DatePickerButton_1 = require("./DatePickerButton");
+const props_1 = require("./props");
+const intl_1 = require("./intl");
+const DatePickerElement_1 = require("./DatePickerElement");
+const DateRangeDash = (0, tasty_1.tasty)({
+    'aria-hidden': 'true',
+    'data-qa': 'DateRangeDash',
+    children: '––',
+    styles: {
+        padding: '0 .5x',
+    },
+});
+function DateRangeSeparatedPicker(props, ref) {
+    props = (0, provider_1.useProviderProps)(props);
+    props = (0, Form_1.useFormProps)(props);
+    props = (0, Form_1.useFieldProps)(props, {
+        defaultValidationTrigger: 'onBlur',
+    });
+    props = Object.assign({}, props_1.DEFAULT_DATE_PROPS, props);
+    let styles = (0, tasty_1.extractStyles)(props, tasty_1.CONTAINER_STYLES);
+    let { size, placeholderValue, isDisabled, validationState, useLocale: useLocaleProp, autoFocus, } = props;
+    let targetRef = (0, react_1.useRef)(null);
+    let state = (0, react_stately_1.useDateRangePickerState)({
+        ...props,
+    });
+    let startState = (0, react_stately_1.useDatePickerState)({
+        ...props,
+        onChange: null,
+        value: state.value?.start,
+    });
+    let endState = (0, react_stately_1.useDatePickerState)({
+        ...props,
+        onChange: null,
+        value: state.value?.end,
+    });
+    let startFocusRingProps = (0, react_aria_1.useFocusRing)({
+        within: true,
+        isTextInput: true,
+        autoFocus,
+    });
+    let startFocusProps = (0, react_aria_1.useFocusRing)({
+        within: false,
+        isTextInput: false,
+        autoFocus,
+    });
+    let endFocusRingProps = (0, react_aria_1.useFocusRing)({
+        within: true,
+        isTextInput: true,
+        autoFocus,
+    });
+    let endFocusProps = (0, react_aria_1.useFocusRing)({
+        within: false,
+        isTextInput: false,
+        autoFocus,
+    });
+    let domRef = (0, utils_1.useFocusManagerRef)(ref);
+    let { groupProps, labelProps, startFieldProps, endFieldProps } = (0, react_aria_1.useDateRangePicker)(props, state, targetRef);
+    let startProps = (0, react_aria_1.useDatePicker)(props, startState, targetRef);
+    let endProps = (0, react_aria_1.useDatePicker)(props, endState, targetRef);
+    let placeholder = placeholderValue;
+    let timePlaceholder = placeholder && 'hour' in placeholder ? placeholder : undefined;
+    let timeMinValue = props.minValue && 'hour' in props.minValue ? props.minValue : undefined;
+    let timeMaxValue = props.maxValue && 'hour' in props.maxValue ? props.maxValue : undefined;
+    let timeGranularity = state.granularity === 'hour' ||
+        state.granularity === 'minute' ||
+        state.granularity === 'second'
+        ? state.granularity
+        : null;
+    let showTimeField = !!timeGranularity;
+    // let visibleMonths = useVisibleMonths(maxVisibleMonths);
+    function onChange(value, type) {
+        if (type === 'start') {
+            const newRange = { ...state.value, start: value };
+            if (newRange.start &&
+                newRange.end &&
+                newRange.end.compare(newRange.start) < 0) {
+                newRange.end = newRange.start;
+            }
+            state.setValue(newRange);
+            startProps.calendarProps.onChange(value);
+            startState.setOpen(false);
+        }
+        else {
+            const newRange = { ...state.value, end: value };
+            if (newRange.start &&
+                newRange.end &&
+                newRange.end.compare(newRange.start) < 0) {
+                newRange.start = newRange.end;
+            }
+            state.setValue(newRange);
+            endProps.calendarProps.onChange(value);
+            endState.setOpen(false);
+        }
+    }
+    const component = ((0, jsx_runtime_1.jsxs)(DatePickerElement_1.DatePickerElement, { ref: targetRef, styles: props.wrapperStyles, children: [(0, jsx_runtime_1.jsxs)(DatePickerElement_1.DatePickerElement, { ...startFocusRingProps.focusProps, mods: { focused: startFocusRingProps.isFocused }, children: [(0, jsx_runtime_1.jsx)(DateInputBase_1.DateInputBase, { disableFocusRing: true, isDisabled: isDisabled, validationState: validationState, size: size, styles: { radius: 'left', border: 'top left bottom' }, children: (0, jsx_runtime_1.jsx)(DatePickerInput_1.DatePickerInput, { useLocale: useLocaleProp, ...startFieldProps }) }), (0, jsx_runtime_1.jsxs)(Dialog_1.DialogTrigger, { hideArrow: true, type: "popover", mobileType: "tray", placement: "bottom right", targetRef: targetRef, isOpen: startState.isOpen, shouldFlip: props.shouldFlip, onOpenChange: startState.setOpen, children: [(0, jsx_runtime_1.jsx)(DatePickerButton_1.DatePickerButton, { size: size, ...(0, react_2.mergeProps)(startProps.buttonProps, startFocusProps.focusProps), isDisabled: isDisabled }), (0, jsx_runtime_1.jsxs)(Dialog_1.Dialog, { ...startProps.dialogProps, width: "max-content", children: [(0, jsx_runtime_1.jsx)(Calendar_1.Calendar, { ...startProps.calendarProps, defaultFocusedValue: state.value?.start || state.value?.end || undefined, selectedRange: state.value?.start && state.value?.end ? state.value : undefined, onChange: (value) => onChange(value, 'start') }), showTimeField && ((0, jsx_runtime_1.jsx)(TimeInput_1.TimeInput, { padding: "1x", label: intl_1.dateMessages['time'], value: startState.timeValue, placeholderValue: timePlaceholder, granularity: timeGranularity, minValue: timeMinValue, maxValue: timeMaxValue, hourCycle: props.hourCycle, hideTimeZone: props.hideTimeZone, onChange: startState.setTimeValue }))] })] })] }), (0, jsx_runtime_1.jsx)(DateRangeDash, {}), (0, jsx_runtime_1.jsxs)(DatePickerElement_1.DatePickerElement, { ...endFocusRingProps.focusProps, mods: { focused: endFocusRingProps.isFocused }, children: [(0, jsx_runtime_1.jsx)(DateInputBase_1.DateInputBase, { disableFocusRing: true, isDisabled: isDisabled, validationState: validationState, size: size, radius: "left", border: "top left bottom", children: (0, jsx_runtime_1.jsx)(DatePickerInput_1.DatePickerInput, { useLocale: useLocaleProp, ...endFieldProps }) }), (0, jsx_runtime_1.jsxs)(Dialog_1.DialogTrigger, { hideArrow: true, type: "popover", mobileType: "tray", placement: "bottom right", targetRef: targetRef, isOpen: endState.isOpen, shouldFlip: props.shouldFlip, onOpenChange: endState.setOpen, children: [(0, jsx_runtime_1.jsx)(DatePickerButton_1.DatePickerButton, { "aria-label": "Show calendar for the end date", size: size, ...(0, react_2.mergeProps)(endFocusProps.focusProps, endProps.buttonProps), isDisabled: isDisabled }), (0, jsx_runtime_1.jsxs)(Dialog_1.Dialog, { ...endProps.dialogProps, width: "max-content", children: [(0, jsx_runtime_1.jsx)(Calendar_1.Calendar, { ...endProps.calendarProps, defaultFocusedValue: state.value?.end || state.value?.start || undefined, selectedRange: state.value?.start && state.value?.end ? state.value : undefined, onChange: (value) => {
+                                            onChange(value, 'end');
+                                        } }), showTimeField && ((0, jsx_runtime_1.jsx)(TimeInput_1.TimeInput, { padding: "1x", label: intl_1.dateMessages['time'], value: endState.timeValue, placeholderValue: timePlaceholder, granularity: timeGranularity, minValue: timeMinValue, maxValue: timeMaxValue, hourCycle: props.hourCycle, hideTimeZone: props.hideTimeZone, onChange: endState.setTimeValue }))] })] })] })] }));
+    return (0, wrapper_1.wrapWithField)(component, domRef, {
+        ...props,
+        styles,
+        labelProps: (0, react_2.mergeProps)(props.labelProps, labelProps),
+        fieldProps: groupProps,
+    });
+}
+const _DateRangeSeparatedPicker = (0, react_1.forwardRef)(DateRangeSeparatedPicker);
+exports.DateRangeSeparatedPicker = _DateRangeSeparatedPicker;
+
+