@cube-dev/ui-kit 0.57.0 → 0.59.0

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

@@ -1,87 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.57.0
- * 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 react_aria_1 = require("react-aria");
-const react_stately_1 = require("react-stately");
-const provider_1 = require("../../../provider");
-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 DatePickerElement_1 = require("./DatePickerElement");
-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, useLocale: useLocaleProp, autoFocus, } = props;
-    let targetRef = (0, react_1.useRef)(null);
-    let state = (0, react_stately_1.useDateRangePickerState)({
-        ...props,
-        shouldCloseOnSelect: () => !state.hasTime,
-    });
-    let { isOpen, setOpen } = state;
-    let { isFocused, focusProps } = (0, react_aria_1.useFocusRing)({
-        within: true,
-        isTextInput: true,
-        autoFocus,
-    });
-    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, 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;
-    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)(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, form_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/fields/DatePicker/DateRangeSeparatedPicker.js

@@ -1,133 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.57.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 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',
-        color: '#dark-03',
-    },
-});
-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, form_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;
-
-        

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

@@ -1,53 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.57.0
- * 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 react_aria_1 = require("react-aria");
-const react_stately_1 = require("react-stately");
-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 } = useLocale();
-    let state = (0, react_stately_1.useTimeFieldState)({
-        ...props,
-        locale: 'en-US',
-    });
-    let fieldRef = (0, react_1.useRef)(null);
-    let { labelProps, fieldProps } = (0, react_aria_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))) }));
-    return (0, form_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/fields/DatePicker/index.js

@@ -1,32 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.57.0
- * Released under the MIT license.
- */
-
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (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);
-__exportStar(require("./DateRangeSeparatedPicker"), exports);
-__exportStar(require("./types"), exports);
-
-        

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

@@ -1,17 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.57.0
- * 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/fields/DatePicker/parseDate.js

@@ -1,33 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.57.0
- * Released under the MIT license.
- */
-
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.parseAbsoluteDate = parseAbsoluteDate;
-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;
-        }
-    }
-}
-
-        

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

@@ -1,23 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.57.0
- * 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/fields/DatePicker/types.js

@@ -1,11 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.57.0
- * Released under the MIT license.
- */
-
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-
-        

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

@@ -1,108 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.57.0
- * Released under the MIT license.
- */
-
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useFocusManagerRef = useFocusManagerRef;
-exports.formatSegments = formatSegments;
-const utils_1 = require("@react-spectrum/utils");
-const focus_1 = require("@react-aria/focus");
-const react_1 = require("react");
-// export function useFormatHelpText(
-//   props: Pick<SpectrumDatePickerBase, 'description' | 'showFormatHelpText'>,
-// ) {
-//   let formatter = useDateFormatter({ dateStyle: 'short' });
-//   let displayNames = useDisplayNames();
-//   return 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]);
-// }
-// export function useVisibleMonths(maxVisibleMonths: number) {
-//   let [visibleMonths, setVisibleMonths] = useState(getVisibleMonths('large'));
-//   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));
-// }
-// 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;
-}
-function formatSegments(segments) {
-    segments = JSON.parse(JSON.stringify(segments));
-    segments.forEach((segment) => {
-        if (segment.type === 'literal') {
-            if (segment.text === '/') {
-                segment.text = '-';
-            }
-            if (segment.text === ', ') {
-                segment.text = ' ';
-            }
-        }
-    });
-    const year = segments.find((s) => s.type === 'year');
-    if (year) {
-        segments.splice(segments.indexOf(year), 1);
-        segments.unshift(year);
-    }
-    const month = segments.find((s) => s.type === 'month');
-    if (month) {
-        segments.splice(segments.indexOf(month), 1);
-        segments.splice(2, 0, month);
-    }
-    const day = segments.find((s) => s.type === 'day');
-    if (day) {
-        segments.splice(segments.indexOf(day), 1);
-        segments.splice(4, 0, day);
-    }
-    return segments;
-}
-
-        

package/cjs/components/fields/FileInput/FileInput.js

@@ -1,164 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.57.0
- * Released under the MIT license.
- */
-
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FileInput = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const utils_1 = require("@react-spectrum/utils");
-const provider_1 = require("../../../provider");
-const actions_1 = require("../../actions");
-const tasty_1 = require("../../../tasty");
-const form_1 = require("../../form");
-const FileInputElement = (0, tasty_1.tasty)(actions_1.Action, {
-    styles: {
-        display: 'inline-flex',
-        position: 'relative',
-        preset: 't3',
-        padding: '.5x 1x',
-        gap: '1x',
-        flow: 'row',
-        placeItems: 'center start',
-        fill: {
-            '': '#white',
-            'drag-hover': '#purple.16',
-        },
-        border: true,
-        radius: true,
-        cursor: 'pointer',
-        overflow: 'hidden',
-        whiteSpace: 'nowrap',
-        Button: {
-            radius: true,
-            border: {
-                '': '#clear',
-                pressed: '#purple.30',
-            },
-            fill: {
-                '': '#purple.10',
-                hovered: '#purple.16',
-                pressed: '#purple.10',
-                '[disabled]': '#dark.04',
-            },
-            color: {
-                '': '#purple',
-                '[disabled]': '#dark.30',
-            },
-            padding: '.5x (1.5x - 1px)',
-            transition: 'theme',
-        },
-        Placeholder: {
-            color: '#dark-02',
-            whiteSpace: 'nowrap',
-            textOverflow: 'ellipsis',
-            width: 'max 100%',
-            overflow: 'hidden',
-        },
-        Value: {
-            color: '#dark-02',
-            whiteSpace: 'nowrap',
-            textOverflow: 'ellipsis',
-            width: 'max 100%',
-            overflow: 'hidden',
-        },
-        Input: {
-            position: 'absolute',
-            top: '-50px',
-            right: 0,
-            bottom: 0,
-            left: 0,
-            radius: '@content-radius',
-            opacity: 0.01,
-            cursor: 'pointer',
-            zIndex: 10,
-        },
-    },
-});
-function extractContents(element, callback) {
-    const files = element?.files;
-    if (files && files.length > 0) {
-        const fileReader = new FileReader();
-        fileReader.onload = function () {
-            callback(fileReader.result);
-        };
-        fileReader.readAsText(files[0]);
-    }
-}
-function extractFileNameFromValue(value) {
-    return typeof value === 'string'
-        ? value.split('\\')?.pop()
-        : undefined;
-}
-function FileInput(props, ref) {
-    props = (0, provider_1.useProviderProps)(props);
-    props = (0, form_1.useFormProps)(props);
-    props = (0, form_1.useFieldProps)({ ...props }, {
-        defaultValidationTrigger: 'onChange',
-        valuePropsMapper: ({ value, onChange }) => ({
-            onChange,
-            value: props.type === 'file' || !props.type ? value : undefined,
-        }),
-    });
-    let { id, name, qa, value, onChange, placeholder, inputRef, isDisabled, inputStyles, type = 'file', inputProps, accept, ...otherProps } = props;
-    const [dragHover, setDragHover] = (0, react_1.useState)(false);
-    const defaultValue = (0, react_1.useMemo)(() => (type === 'file' ? value : undefined), [type, value]);
-    const defaultFileName = (0, react_1.useMemo)(() => extractFileNameFromValue(defaultValue), []);
-    const [fileName, setFileName] = (0, react_1.useState)(defaultFileName);
-    let domRef = (0, react_1.useRef)(null);
-    let defaultInputRef = (0, react_1.useRef)(null);
-    inputRef = inputRef || defaultInputRef;
-    const onLocalChange = (0, react_1.useCallback)((event) => {
-        const value = event.target.value;
-        setFileName(extractFileNameFromValue(value));
-        if (type === 'file') {
-            onChange?.(value);
-        }
-        else {
-            extractContents(event.target, onChange);
-        }
-    }, [onChange]);
-    let styles = (0, tasty_1.extractStyles)(otherProps, tasty_1.CONTAINER_STYLES);
-    // Expose imperative interface for ref
-    (0, react_1.useImperativeHandle)(ref, () => ({
-        ...(0, utils_1.createFocusableRef)(domRef, inputRef),
-        select() {
-            if (inputRef?.current) {
-                inputRef.current.select();
-            }
-        },
-        getInputElement() {
-            return inputRef?.current;
-        },
-    }));
-    const fileInput = ((0, jsx_runtime_1.jsxs)(FileInputElement, { ref: domRef, qa: "FileInput", styles: inputStyles, isDisabled: isDisabled, mods: {
-            selected: !!value,
-            'drag-hover': dragHover,
-        }, onKeyDown: (e) => {
-            if (e.key === 'Enter' || e.key === 'Space') {
-                inputRef?.current?.click();
-            }
-        }, children: [(0, jsx_runtime_1.jsx)("input", { ref: inputRef, id: id, name: name, accept: accept, "data-element": "Input", type: "file", multiple: false, tabIndex: -1, onChange: onLocalChange, onDragEnter: () => {
-                    setDragHover(true);
-                }, onDragLeave: () => {
-                    setDragHover(false);
-                }, onDrop: () => {
-                    setDragHover(false);
-                }, ...inputProps }), (0, jsx_runtime_1.jsx)("div", { "data-element": "Button", children: "Choose file" }), (0, jsx_runtime_1.jsx)("div", { "data-element": !!fileName ? 'Value' : 'Placeholder', children: fileName || placeholder || 'No file selected' })] }));
-    return (0, form_1.wrapWithField)(fileInput, domRef, {
-        ...props,
-        styles,
-    });
-}
-/**
- * FileInputs are file inputs that allow users to select local files to
- * upload them to the server.
- */
-const _FileInput = (0, react_1.forwardRef)(FileInput);
-exports.FileInput = _FileInput;
-
-