@cube-dev/ui-kit 0.22.8 → 0.23.1

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

@@ -0,0 +1,77 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.23.1
+ * Released under the MIT license.
+ */
+
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+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 tasty_1 = require("../../../tasty");
+const TextInputBase_1 = require("../TextInput/TextInputBase");
+const InvalidIcon_1 = require("../../shared/InvalidIcon");
+const ValidIcon_1 = require("../../shared/ValidIcon");
+const DateInputWrapperElement = (0, tasty_1.tasty)({
+    qa: 'DateInputWrapper',
+    role: 'presentation',
+    styles: {
+        ...TextInputBase_1.INPUT_WRAPPER_STYLES,
+        display: 'flex',
+    },
+});
+const DateInputElement = (0, tasty_1.tasty)({
+    role: 'presentation',
+    styles: {
+        ...TextInputBase_1.DEFAULT_INPUT_STYLES,
+        display: 'flex',
+        flow: 'row',
+        placeItems: 'center start',
+    },
+});
+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, isFocusVisible, isFocused } = (0, focus_1.useFocusRing)({
+        isTextInput: true,
+        within: true,
+        autoFocus,
+    });
+    let isInvalid = validationState === 'invalid';
+    let validationIcon = isInvalid ? InvalidIcon_1.InvalidIcon : ValidIcon_1.ValidIcon;
+    let validation = (0, react_1.cloneElement)(validationIcon);
+    return ((0, jsx_runtime_1.jsxs)(DateInputWrapperElement, { styles: styles, "data-size": size, mods: {
+            disabled: isDisabled,
+            focused: isFocused,
+            invalid: isInvalid,
+            'focus-ring': isFocusVisible && !disableFocusRing,
+        }, ...(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 }, void 0) }, void 0), validationState && !isLoading ? validation : undefined] }, void 0));
+}
+const _DateInputBase = react_1.default.forwardRef(DateInputBase);
+exports.DateInputBase = _DateInputBase;
+
+        

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

@@ -0,0 +1,70 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.23.1
+ * Released under the MIT license.
+ */
+
+"use strict";
+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 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 Space_1 = require("../../layout/Space");
+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");
+function DatePicker(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 } = props;
+    let targetRef = (0, react_1.useRef)(null);
+    let state = (0, datepicker_2.useDatePickerState)({
+        ...props,
+        shouldCloseOnSelect: () => !state.hasTime,
+    });
+    let { isOpen, setOpen } = state;
+    let domRef = (0, utils_1.useFocusManagerRef)(ref);
+    let { groupProps, labelProps, fieldProps, buttonProps, dialogProps, calendarProps, } = (0, datepicker_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;
+    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);
+    const component = ((0, jsx_runtime_1.jsxs)(Space_1.Space, { ref: targetRef, gap: "0", styles: props.wrapperStyles, 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, { ...fieldProps }, void 0) }, void 0), (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, ...buttonProps, isDisabled: isDisabled }, void 0), (0, jsx_runtime_1.jsxs)(Dialog_1.Dialog, { ...dialogProps, width: "max-content", children: [(0, jsx_runtime_1.jsx)(Calendar_1.Calendar, { ...calendarProps }, void 0), 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 }, void 0))] }, void 0)] }, void 0)] }, void 0));
+    return (0, wrapper_1.wrapWithField)(component, domRef, {
+        ...props,
+        styles,
+        labelProps: (0, react_2.mergeProps)(props.labelProps, labelProps),
+        fieldProps: groupProps,
+    });
+}
+const _DatePicker = (0, react_1.forwardRef)(DatePicker);
+exports.DatePicker = _DatePicker;
+
+        

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

@@ -0,0 +1,24 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.23.1
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DatePickerButton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const icons_1 = require("@ant-design/icons");
+const tasty_1 = require("../../../tasty");
+const actions_1 = require("../../actions");
+exports.DatePickerButton = (0, tasty_1.tasty)(actions_1.Button, {
+    icon: (0, jsx_runtime_1.jsx)(icons_1.CalendarOutlined, {}, void 0),
+    styles: {
+        radius: '1r right',
+        border: 'top right bottom',
+        backgroundClip: 'content-box',
+    },
+});
+
+        

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

@@ -0,0 +1,41 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.23.1
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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 tasty_1 = require("../../../tasty");
+const DatePickerSegment_1 = require("./DatePickerSegment");
+const DateInputElement = (0, tasty_1.tasty)({
+    role: 'presentation',
+    styles: {
+        display: 'flex',
+        flow: 'row',
+        placeItems: 'center start',
+    },
+});
+function DatePickerInput(props) {
+    let { isDisabled, isReadOnly, isRequired } = props;
+    let ref = (0, react_1.useRef)(null);
+    let { locale } = (0, i18n_1.useLocale)();
+    let state = (0, datepicker_2.useDateFieldState)({
+        ...props,
+        locale,
+        createCalendar: date_1.createCalendar,
+    });
+    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))) }, void 0));
+}
+exports.DatePickerInput = DatePickerInput;
+
+        

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

@@ -0,0 +1,70 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.23.1
+ * Released under the MIT license.
+ */
+
+"use strict";
+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 tasty_1 = require("../../../tasty");
+const LiteralSegmentElement = (0, tasty_1.tasty)({
+    qa: 'LiteralSegment',
+    as: 'span',
+    'aria-hidden': 'true',
+    styles: {},
+});
+const EditableSegmentElement = (0, tasty_1.tasty)({
+    qa: 'EditableSegment',
+    styles: {
+        padding: '0 1bw',
+        fontVariantNumeric: 'tabular-nums lining-nums',
+        textAlign: 'right',
+        font: 'monospace',
+        color: {
+            '': 'inherit',
+            ':focus': '#white',
+        },
+        fill: {
+            '': '#clear',
+            ':focus': '#purple',
+        },
+        radius: '.5r',
+        Placeholder: {
+            opacity: '#disabled-opacity',
+        },
+    },
+});
+function DatePickerSegment({ segment, state, ...otherProps }) {
+    switch (segment.type) {
+        // A separator, e.g. punctuation
+        case 'literal':
+            return (0, jsx_runtime_1.jsx)(LiteralSegment, { segment: segment }, void 0);
+        // Editable segment
+        default:
+            return ((0, jsx_runtime_1.jsx)(EditableSegment, { segment: segment, state: state, ...otherProps }, void 0));
+    }
+}
+exports.DatePickerSegment = DatePickerSegment;
+function LiteralSegment({ segment }) {
+    return ((0, jsx_runtime_1.jsx)(LiteralSegmentElement, { "data-type": segment.type === 'literal' ? undefined : segment.type, children: segment.text }, void 0));
+}
+function EditableSegment({ segment, state }) {
+    let ref = (0, react_1.useRef)(null);
+    let { segmentProps } = (0, datepicker_1.useDateSegment)(segment, state, ref);
+    return ((0, jsx_runtime_1.jsx)(EditableSegmentElement, { ...segmentProps, ref: ref, mods: {
+            placeholder: segment.isPlaceholder,
+            'read-only': !segment.isEditable,
+        }, style: {
+            ...segmentProps.style,
+            minWidth: segment.maxValue != null
+                ? `calc(${String(segment.maxValue).length + 'ch'})`
+                : undefined,
+        }, "data-testid": segment.type, children: segment.isPlaceholder ? ((0, jsx_runtime_1.jsx)("span", { "data-element": "Placeholder", "aria-hidden": "true", children: segment.placeholder }, void 0)) : (segment.text) }, void 0));
+}
+
+        

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

@@ -0,0 +1,78 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.23.1
+ * Released under the MIT license.
+ */
+
+"use strict";
+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 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 Space_1 = require("../../layout/Space");
+const Dialog_1 = require("../../overlays/Dialog");
+const RangeCalendar_1 = require("../../other/Calendar/RangeCalendar");
+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 DateRangeDash = (0, tasty_1.tasty)({
+    'aria-hidden': 'true',
+    'data-qa': 'DateRangeDash',
+    children: '–',
+    styles: {
+        padding: '0 .5x',
+    },
+});
+function DateRangePicker(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, shouldFlip, placeholderValue, isDisabled, validationState } = props;
+    let targetRef = (0, react_1.useRef)(null);
+    let state = (0, datepicker_2.useDateRangePickerState)({
+        ...props,
+        shouldCloseOnSelect: () => !state.hasTime,
+    });
+    let { isOpen, setOpen } = state;
+    let domRef = (0, utils_1.useFocusManagerRef)(ref);
+    let { groupProps, labelProps, startFieldProps, endFieldProps, buttonProps, dialogProps, calendarProps, } = (0, datepicker_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;
+    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);
+    const component = ((0, jsx_runtime_1.jsxs)(Space_1.Space, { ref: targetRef, gap: "0", styles: props.wrapperStyles, 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, { ...startFieldProps }, void 0), (0, jsx_runtime_1.jsx)(DateRangeDash, {}, void 0), (0, jsx_runtime_1.jsx)(DatePickerInput_1.DatePickerInput, { ...endFieldProps }, void 0)] }, void 0), (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, ...buttonProps, isDisabled: isDisabled }, void 0), (0, jsx_runtime_1.jsxs)(Dialog_1.Dialog, { ...dialogProps, width: "max-content", children: [(0, jsx_runtime_1.jsx)(RangeCalendar_1.RangeCalendar, { ...calendarProps }, void 0), 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) }, void 0), (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) }, void 0)] }, void 0))] }, void 0)] }, void 0)] }, void 0));
+    return (0, wrapper_1.wrapWithField)(component, domRef, {
+        ...props,
+        styles,
+        labelProps: (0, react_2.mergeProps)(props.labelProps, labelProps),
+        fieldProps: groupProps,
+    });
+}
+const _DateRangePicker = (0, react_1.forwardRef)(DateRangePicker);
+exports.DateRangePicker = _DateRangePicker;
+
+        

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

@@ -0,0 +1,55 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.23.1
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimeInput = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const i18n_1 = require("@react-aria/i18n");
+const datepicker_1 = require("@react-aria/datepicker");
+const datepicker_2 = require("@react-stately/datepicker");
+const wrapper_1 = require("../wrapper");
+const provider_1 = require("../../../provider");
+const tasty_1 = require("../../../tasty");
+const Form_1 = require("../Form");
+const DateInputBase_1 = require("./DateInputBase");
+const DatePickerSegment_1 = require("./DatePickerSegment");
+const utils_1 = require("./utils");
+const props_1 = require("./props");
+function TimeInput(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_TIME_PROPS, props);
+    let styles = (0, tasty_1.extractStyles)(props, tasty_1.CONTAINER_STYLES);
+    let { inputStyles, wrapperStyles, autoFocus, isDisabled, isReadOnly, isRequired, validationState, size = 'medium', } = props;
+    let domRef = (0, utils_1.useFocusManagerRef)(ref);
+    let { locale } = (0, i18n_1.useLocale)();
+    let state = (0, datepicker_2.useTimeFieldState)({
+        ...props,
+        locale,
+    });
+    let fieldRef = (0, react_1.useRef)(null);
+    let { labelProps, fieldProps } = (0, datepicker_1.useTimeField)(props, state, fieldRef);
+    const timeInput = ((0, jsx_runtime_1.jsx)(DateInputBase_1.DateInputBase, { ref: fieldRef, size: size, fieldProps: fieldProps, isDisabled: isDisabled, autoFocus: autoFocus, inputStyles: inputStyles, styles: wrapperStyles, validationState: validationState, 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))) }, void 0));
+    return (0, wrapper_1.wrapWithField)(timeInput, domRef, {
+        ...props,
+        styles,
+        labelProps,
+    });
+}
+/**
+ * TimeFields allow users to enter and edit time values using a keyboard.
+ * Each part of the time is displayed in an individually editable segment.
+ */
+const _TimeInput = (0, react_1.forwardRef)(TimeInput);
+exports.TimeInput = _TimeInput;
+
+        

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

@@ -0,0 +1,26 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.23.1
+ * Released under the MIT license.
+ */
+
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./TimeInput"), exports);
+__exportStar(require("./DateInput"), exports);
+__exportStar(require("./DatePicker"), exports);
+__exportStar(require("./DateRangePicker"), exports);
+__exportStar(require("./parseDate"), exports);
+
+        

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

@@ -0,0 +1,17 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.23.1
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.dateMessages = void 0;
+exports.dateMessages = {
+    time: 'Time',
+    startTime: 'Start time',
+    endTime: 'End time',
+};
+
+        

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

@@ -0,0 +1,34 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.23.1
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.parseAbsoluteDate = void 0;
+const date_1 = require("@internationalized/date");
+function parseAbsoluteDate(val) {
+    if (!val || (typeof val === 'string' && val.trim() === '')) {
+        return undefined;
+    }
+    if (val instanceof Date) {
+        return (0, date_1.parseAbsolute)(val.toISOString(), 'UTC');
+    }
+    try {
+        (0, date_1.parseAbsolute)(val, 'UTC');
+    }
+    catch (e) {
+        if (!Number.isNaN(Date.parse(val))) {
+            return (0, date_1.parseAbsolute)(new Date(val).toISOString(), 'UTC');
+        }
+        else {
+            console.error('Invalid date format', val);
+            return undefined;
+        }
+    }
+}
+exports.parseAbsoluteDate = parseAbsoluteDate;
+
+        

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

@@ -0,0 +1,23 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.23.1
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_TIME_PROPS = exports.DEFAULT_DATE_PROPS = void 0;
+exports.DEFAULT_DATE_PROPS = {
+    granularity: 'day',
+    hideTimeZone: true,
+    hourCycle: 24,
+    shouldForceLeadingZeros: true,
+};
+exports.DEFAULT_TIME_PROPS = {
+    hideTimeZone: true,
+    hourCycle: 24,
+    shouldForceLeadingZeros: true,
+};
+
+        

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

@@ -0,0 +1,75 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.23.1
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFocusManagerRef = exports.useVisibleMonths = exports.useFormatHelpText = void 0;
+const utils_1 = require("@react-spectrum/utils");
+const focus_1 = require("@react-aria/focus");
+const i18n_1 = require("@react-aria/i18n");
+const datepicker_1 = require("@react-aria/datepicker");
+const react_1 = require("react");
+const utils_2 = require("@react-aria/utils");
+function useFormatHelpText(props) {
+    let formatter = (0, i18n_1.useDateFormatter)({ dateStyle: 'short' });
+    let displayNames = (0, datepicker_1.useDisplayNames)();
+    return (0, react_1.useMemo)(() => {
+        if (props.description) {
+            return props.description;
+        }
+        if (props.showFormatHelpText) {
+            return formatter
+                .formatToParts(new Date())
+                .map((s) => {
+                if (s.type === 'literal') {
+                    return s.value;
+                }
+                return displayNames.of(s.type);
+            })
+                .join(' ');
+        }
+        return '';
+    }, [props.description, props.showFormatHelpText, formatter, displayNames]);
+}
+exports.useFormatHelpText = useFormatHelpText;
+function useVisibleMonths(maxVisibleMonths) {
+    let [visibleMonths, setVisibleMonths] = (0, react_1.useState)(getVisibleMonths('large'));
+    (0, utils_2.useLayoutEffect)(() => {
+        let onResize = () => setVisibleMonths(getVisibleMonths('large'));
+        onResize();
+        window.addEventListener('resize', onResize);
+        return () => {
+            window.removeEventListener('resize', onResize);
+        };
+    }, []);
+    return Math.max(1, Math.min(visibleMonths, maxVisibleMonths, 3));
+}
+exports.useVisibleMonths = useVisibleMonths;
+function getVisibleMonths(scale) {
+    if (typeof window === 'undefined') {
+        return 1;
+    }
+    let monthWidth = scale === 'large' ? 336 : 280;
+    let gap = scale === 'large' ? 30 : 24;
+    let popoverPadding = scale === 'large' ? 32 : 48;
+    return Math.floor((window.innerWidth - popoverPadding * 2) / (monthWidth + gap));
+}
+function useFocusManagerRef(ref) {
+    let domRef = (0, react_1.useRef)();
+    (0, react_1.useImperativeHandle)(ref, () => ({
+        // @ts-ignore
+        ...(0, utils_1.createDOMRef)(domRef),
+        focus() {
+            // @ts-ignore
+            (0, focus_1.createFocusManager)(domRef).focusFirst({ tabbable: true });
+        },
+    }));
+    return domRef;
+}
+exports.useFocusManagerRef = useFocusManagerRef;
+
+        

package/cjs/components/forms/FieldWrapper/FieldWrapper.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.22.8
+ * @cube-dev/ui-kit v0.23.1
  * Released under the MIT license.
  */
 
@@ -74,7 +74,7 @@ const MessageElement = (0, tasty_1.tasty)({
  * @internal Do not use this component directly.
  */
 exports.FieldWrapper = (0, react_1.forwardRef)(function FieldWrapper(props, ref) {
-    const { as, labelPosition = 'top', label, extra, styles, isRequired, isDisabled, labelStyles, necessityIndicator, labelProps, fieldProps, message, messageStyles, description, Component, validationState, requiredMark = true, tooltip, isHidden, labelSuffix, } = props;
+    const { as, labelPosition = 'top', label, extra, styles, isRequired, isDisabled, labelStyles, necessityIndicator, labelProps, fieldProps, message, messageStyles, description, Component, validationState, requiredMark = true, tooltip, isHidden, labelSuffix, children, } = props;
     const labelComponent = label ? ((0, jsx_runtime_1.jsx)(Label_1.Label, { as: as === 'label' ? 'div' : 'label', styles: labelStyles, labelPosition: labelPosition, isRequired: requiredMark ? isRequired : false, isDisabled: isDisabled, necessityIndicator: necessityIndicator, validationState: validationState, "aria-label": label, ...labelProps, children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { placeContent: "baseline space-between", width: "100%", children: [(0, jsx_runtime_1.jsxs)(Space_1.Space, { placeItems: "center", gap: "0.25x", children: [(0, jsx_runtime_1.jsx)("div", { children: label }, void 0), tooltip ? ((0, jsx_runtime_1.jsx)(TooltipProvider_1.TooltipProvider, { activeWrap: true, title: tooltip, width: "initial max-content 40x", children: (0, jsx_runtime_1.jsx)(icons_1.InfoCircleOutlined, { style: {
                                     color: 'var(--primary-color)',
                                     margin: '0 4px',
@@ -86,7 +86,7 @@ exports.FieldWrapper = (0, react_1.forwardRef)(function FieldWrapper(props, ref)
         invalid: validationState === 'invalid',
         valid: validationState === 'valid',
     };
-    return ((0, jsx_runtime_1.jsxs)(FieldElement, { ref: ref, as: as ?? 'div', mods: mods, isHidden: isHidden, styles: styles, ...fieldProps, children: [labelComponent || descriptionComponent ? ((0, jsx_runtime_1.jsxs)("div", { "data-element": "LabelArea", children: [labelComponent, descriptionComponent] }, void 0)) : null, (0, jsx_runtime_1.jsxs)("div", { "data-element": "InputArea", children: [Component, message && !isDisabled && ((0, jsx_runtime_1.jsx)(MessageElement, { mods: mods, styles: messageStyles, role: validationState === 'invalid' ? 'alert' : undefined, children: message }, void 0))] }, void 0)] }, void 0));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(FieldElement, { ref: ref, as: as ?? 'div', mods: mods, isHidden: isHidden, styles: styles, ...fieldProps, children: [labelComponent || descriptionComponent ? ((0, jsx_runtime_1.jsxs)("div", { "data-element": "LabelArea", children: [labelComponent, descriptionComponent] }, void 0)) : null, (0, jsx_runtime_1.jsxs)("div", { "data-element": "InputArea", children: [Component, message && !isDisabled && ((0, jsx_runtime_1.jsx)(MessageElement, { mods: mods, styles: messageStyles, role: validationState === 'invalid' ? 'alert' : undefined, children: message }, void 0))] }, void 0)] }, void 0), children] }, void 0));
 });
 
         

package/cjs/components/forms/FieldWrapper/extract-field-wrapper-props.js

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

package/cjs/components/forms/FieldWrapper/index.js

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

package/cjs/components/forms/FieldWrapper/types.js

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