@cube-dev/ui-kit 0.56.3 → 0.58.0

package/cjs/components/fields/Select/Select.js

@@ -1,321 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.56.3
- * Released under the MIT license.
- */
-
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useSelectState = exports.Select = void 0;
-exports.ListBoxPopup = ListBoxPopup;
-const react_1 = require("react");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_2 = require("react");
-const react_stately_1 = require("react-stately");
-Object.defineProperty(exports, "useSelectState", { enumerable: true, get: function () { return react_stately_1.useSelectState; } });
-const react_aria_1 = require("react-aria");
-const styled_components_1 = __importDefault(require("styled-components"));
-const form_1 = require("../../form");
-const provider_1 = require("../../../provider");
-const index_1 = require("../../../tasty/index");
-const interactions_1 = require("../../../utils/react/interactions");
-const OverlayWrapper_1 = require("../../overlays/OverlayWrapper");
-const transitions_1 = require("../../../utils/transitions");
-const index_2 = require("../../../utils/react/index");
-const index_3 = require("../index");
-const index_4 = require("../../actions/index");
-const index_5 = require("../../../icons/index");
-const InvalidIcon_1 = require("../../shared/InvalidIcon");
-const ValidIcon_1 = require("../../shared/ValidIcon");
-function CaretDownIcon() {
-    return ((0, jsx_runtime_1.jsx)("svg", { "aria-hidden": "true", width: "14", height: "14", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: (0, jsx_runtime_1.jsx)("path", { d: "M11.49 4.102H2.51c-.269 0-.42.284-.253.478l4.49 5.206a.342.342 0 00.506 0l4.49-5.206c.167-.194.016-.478-.253-.478z", fill: "currentColor" }) }));
-}
-const SelectWrapperElement = (0, index_1.tasty)({
-    styles: {
-        display: 'grid',
-        position: 'relative',
-        radius: true,
-        fill: {
-            '': '#white',
-            disabled: '#dark.04',
-            '[data-theme="special"]': '#clear',
-        },
-        color: {
-            '': '#dark.85',
-            focused: '#dark.85',
-            invalid: '#danger-text',
-            disabled: '#dark.30',
-        },
-        Value: {
-            ...index_3.DEFAULT_INPUT_STYLES,
-            preset: {
-                '': 't3',
-                '[data-type="primary"]': 't3m',
-            },
-            color: 'inherit',
-            opacity: {
-                '': 1,
-                placeholder: '.6',
-            },
-            textAlign: 'left',
-            fill: '#clear',
-            textOverflow: 'ellipsis',
-            overflow: {
-                '': 'initial',
-                ellipsis: 'hidden',
-            },
-        },
-        CaretIcon: {
-            display: 'grid',
-            placeItems: 'center',
-            width: 'min 4x',
-            cursor: 'pointer',
-            fontSize: 'inherit',
-        },
-        ButtonIcon: {
-            display: 'grid',
-            placeItems: 'center',
-            width: 'min 4x',
-            color: 'inherit',
-            fontSize: '@icon-size',
-        },
-    },
-});
-const SelectElement = (0, index_1.tasty)({
-    as: 'button',
-    qa: 'Button',
-    styles: {
-        ...index_3.INPUT_WRAPPER_STYLES,
-        ...index_4.DEFAULT_BUTTON_STYLES,
-        preset: 't3m',
-        cursor: 'pointer',
-        padding: '0',
-        gap: '0',
-        border: {
-            '': true,
-            valid: '#success-text.50',
-            invalid: '#danger-text.50',
-            '[data-type="primary"]': '#clear',
-            '[data-type="clear"]': '#clear',
-            '[data-theme="special"] & [data-type="secondary"] & pressed': '#white.44',
-            disabled: true,
-        },
-        fill: {
-            '': '#clear',
-            '[data-type="primary"]': '#purple',
-            '[data-type="primary"] & pressed': '#purple',
-            '[data-type="primary"] & hovered': '#purple-text',
-            '[data-type="secondary"]': '#dark.0',
-            '[data-type="secondary"] & hovered': '#dark.04',
-            '[data-type="secondary"] & pressed': '#dark.05',
-            '[disabled]': '#dark.04',
-            '([data-type="clear"] | [data-type="outline"])': '#purple.0',
-            '([data-type="clear"] | [data-type="outline"]) & hovered': '#purple.16',
-            '([data-type="clear"] | [data-type="outline"]) & pressed': '#purple.10',
-            '([data-type="clear"] | [data-type="outline"]) & [disabled]': '#purple.0',
-            // special
-            '[data-theme="special"] & [data-type="secondary"]': '#white.12',
-            '[data-theme="special"] & [data-type="clear"]': '#white',
-            '[data-theme="special"] & [data-type="clear"] & hovered': '#white.94',
-            '[data-theme="special"] & [data-type="clear"] & pressed': '#white',
-            '[data-theme="special"] & [disabled]': '#white.12',
-            '[data-theme="special"] & [data-type="clear"] & [disabled]': '#white.0',
-        },
-        color: {
-            '': '#white',
-            '[data-type="secondary"]': '#dark-02',
-            '[data-type="secondary"] & hovered': '#dark-02',
-            '[data-type="clear"]': '#purple-text',
-            '[data-type="secondary"] & pressed': '#purple',
-            '[disabled]': '#dark.30',
-            // special
-            '[data-theme="special"]': '#white',
-            '[data-theme="special"] & [data-type="clear"]': '#purple',
-            // other
-            '[data-theme="special"] & [disabled]': '#white.30',
-        },
-    },
-});
-const ListBoxElement = (0, index_1.tasty)({
-    as: 'ul',
-    styles: {
-        display: 'flex',
-        gap: '.5x',
-        flow: 'column',
-        margin: '0',
-        padding: '.5x',
-        listStyle: 'none',
-        radius: '@large-radius',
-        fill: '#white',
-        shadow: '0px 4px 16px #shadow',
-        height: 'initial 30x',
-        overflow: 'hidden auto',
-        styledScrollbar: true,
-    },
-});
-const OptionElement = (0, index_1.tasty)({
-    as: 'li',
-    styles: {
-        display: 'block',
-        padding: '(1x - 1px) (1.5x - 1px)',
-        cursor: 'pointer',
-        radius: true,
-        fill: {
-            '': '#dark.0',
-            'pressed | selected': '#purple.10',
-            'hovered | focused': '#dark.04',
-            disabled: '#dark.0',
-        },
-        color: {
-            '': '#dark-02',
-            'hovered | focused': '#dark-02',
-            'pressed | selected': '#purple',
-            disabled: '#dark.3',
-        },
-        preset: 't3',
-        transition: 'theme',
-    },
-});
-const OverlayElement = (0, index_1.tasty)({
-    styles: {
-        position: 'absolute',
-        width: 'min @overlay-min-width',
-    },
-});
-const StyledOverlayElement = (0, styled_components_1.default)(OverlayElement) `
-  ${(props) => {
-    return (0, transitions_1.getOverlayTransitionCSS)({ placement: props?.['data-position'] });
-}}
-`;
-function Select(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 }) => ({
-            selectedKey: value ?? null,
-            onSelectionChange: onChange,
-        }),
-    });
-    let { qa, label, extra, icon, labelStyles, isRequired, necessityIndicator, validationState, prefix, isDisabled, autoFocus, inputProps, triggerRef, popoverRef, listBoxRef, isLoading, loadingIndicator, overlayOffset = 8, inputStyles, optionStyles, suffix, listBoxStyles, overlayStyles, message, description, direction = 'bottom', shouldFlip = true, placeholder, tooltip, size, styles, type = 'secondary', theme = 'default', labelSuffix, ellipsis, suffixPosition = 'before', ...otherProps } = props;
-    let state = (0, react_stately_1.useSelectState)(props);
-    const outerStyles = (0, index_1.extractStyles)(otherProps, index_1.OUTER_STYLES, styles);
-    inputStyles = (0, index_1.extractStyles)(otherProps, index_1.BLOCK_STYLES, inputStyles);
-    ref = (0, index_2.useCombinedRefs)(ref);
-    triggerRef = (0, index_2.useCombinedRefs)(triggerRef);
-    popoverRef = (0, index_2.useCombinedRefs)(popoverRef);
-    listBoxRef = (0, index_2.useCombinedRefs)(listBoxRef);
-    let { labelProps, triggerProps, valueProps, menuProps } = (0, react_aria_1.useSelect)(props, state, triggerRef);
-    let { overlayProps, placement } = (0, react_aria_1.useOverlayPosition)({
-        targetRef: triggerRef,
-        overlayRef: popoverRef,
-        scrollRef: listBoxRef,
-        placement: `${direction} end`,
-        shouldFlip: shouldFlip,
-        isOpen: state.isOpen,
-        onClose: state.close,
-        offset: overlayOffset,
-    });
-    let { isFocused, focusProps } = (0, interactions_1.useFocus)({ isDisabled }, true);
-    let { hoverProps, isHovered } = (0, react_aria_1.useHover)({ isDisabled });
-    // Get props for the button based on the trigger props from useSelect
-    let { buttonProps } = (0, react_aria_1.useButton)(triggerProps, triggerRef);
-    let isInvalid = validationState === 'invalid';
-    let validationIcon = isInvalid ? InvalidIcon_1.InvalidIcon : ValidIcon_1.ValidIcon;
-    let validation = (0, react_2.cloneElement)(validationIcon);
-    let triggerWidth = triggerRef?.current?.offsetWidth;
-    if (icon) {
-        icon = (0, jsx_runtime_1.jsx)("div", { "data-element": "ButtonIcon", children: icon });
-        if (prefix) {
-            prefix = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [icon, prefix] }));
-        }
-        else {
-            prefix = icon;
-        }
-    }
-    const showPlaceholder = !!placeholder?.trim() && !state.selectedItem;
-    const modifiers = (0, react_2.useMemo)(() => ({
-        ellipsis,
-        invalid: isInvalid,
-        valid: validationState === 'valid',
-        disabled: isDisabled,
-        loading: isLoading,
-        hovered: isHovered,
-        focused: isFocused,
-        placeholder: showPlaceholder,
-        prefix: !!prefix,
-        suffix: true,
-    }), [
-        ellipsis,
-        validationState,
-        isDisabled,
-        isLoading,
-        isHovered,
-        isFocused,
-        showPlaceholder,
-        prefix,
-    ]);
-    let selectField = ((0, jsx_runtime_1.jsxs)(SelectWrapperElement, { qa: qa || 'Select', mods: modifiers, styles: outerStyles, "data-size": size, "data-type": type, "data-theme": theme, children: [(0, jsx_runtime_1.jsx)(react_aria_1.HiddenSelect, { state: state, triggerRef: triggerRef, label: props.label, name: props.name }), (0, jsx_runtime_1.jsxs)(SelectElement, { ...(0, index_2.mergeProps)(buttonProps, hoverProps, focusProps), ref: triggerRef, styles: inputStyles, "data-theme": theme, "data-size": size, "data-type": type, mods: modifiers, children: [prefix ? (0, jsx_runtime_1.jsx)("div", { "data-element": "Prefix", children: prefix }) : null, (0, jsx_runtime_1.jsx)("span", { "data-element": "Value", ...valueProps, children: state.selectedItem
-                            ? state.selectedItem.rendered
-                            : placeholder || (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: "\u00A0" }) }), (0, jsx_runtime_1.jsxs)("div", { "data-element": "Suffix", children: [suffixPosition === 'before' ? suffix : null, validationState && !isLoading ? validation : null, isLoading && (0, jsx_runtime_1.jsx)(index_5.LoadingIcon, {}), suffixPosition === 'after' ? suffix : null, (0, jsx_runtime_1.jsx)("div", { "data-element": "CaretIcon", children: (0, jsx_runtime_1.jsx)(CaretDownIcon, {}) })] })] }), (0, jsx_runtime_1.jsx)(OverlayWrapper_1.OverlayWrapper, { isOpen: state.isOpen && !isDisabled, children: (0, jsx_runtime_1.jsx)(ListBoxPopup, { ...menuProps, popoverRef: popoverRef, listBoxRef: listBoxRef, overlayProps: overlayProps, placement: placement, state: state, listBoxStyles: listBoxStyles, overlayStyles: overlayStyles, optionStyles: optionStyles, minWidth: triggerWidth }) })] }));
-    return (0, form_1.wrapWithField)(selectField, ref, (0, index_2.mergeProps)({
-        ...props,
-        styles,
-    }, { labelProps }));
-}
-function ListBoxPopup({ state, popoverRef, listBoxRef, listBoxStyles, overlayStyles, optionStyles, overlayProps: parentOverlayProps, shouldUseVirtualFocus = false, placement, minWidth, ...otherProps }) {
-    // Get props for the listbox
-    let { listBoxProps } = (0, react_aria_1.useListBox)({
-        autoFocus: state.focusStrategy || true,
-        shouldUseVirtualFocus,
-        ...otherProps,
-    }, state, listBoxRef);
-    // Handle events that should cause the popup to close,
-    // e.g. blur, clicking outside, or pressing the escape key.
-    let { overlayProps } = (0, react_aria_1.useOverlay)({
-        onClose: () => state.close(),
-        shouldCloseOnBlur: true,
-        isOpen: state.isOpen,
-        isDismissable: true,
-    }, popoverRef);
-    // Wrap in <FocusScope> so that focus is restored back to the
-    // trigger when the popup is closed. In addition, add hidden
-    // <DismissButton> components at the start and end of the list
-    // to allow screen reader users to dismiss the popup easily.
-    return ((0, jsx_runtime_1.jsx)(StyledOverlayElement, { ...overlayProps, ...parentOverlayProps, ref: popoverRef, styles: overlayStyles, style: {
-            '--overlay-min-width': minWidth ? `${minWidth}px` : 'initial',
-            ...parentOverlayProps?.style,
-        }, "data-position": placement, children: (0, jsx_runtime_1.jsxs)(react_aria_1.FocusScope, { restoreFocus: true, children: [(0, jsx_runtime_1.jsx)(react_aria_1.DismissButton, { onDismiss: () => state.close() }), (0, jsx_runtime_1.jsx)(ListBoxElement, { styles: listBoxStyles, ...listBoxProps, ref: listBoxRef, children: Array.from(state.collection).map((item) => ((0, jsx_runtime_1.jsx)(Option, { item: item, state: state, styles: optionStyles, shouldUseVirtualFocus: shouldUseVirtualFocus }, item.key))) }), (0, jsx_runtime_1.jsx)(react_aria_1.DismissButton, { onDismiss: () => state.close() })] }) }));
-}
-function Option({ item, state, styles, shouldUseVirtualFocus }) {
-    let ref = (0, react_2.useRef)(null);
-    let isDisabled = state.disabledKeys.has(item.key);
-    let isSelected = state.selectionManager.isSelected(item.key);
-    let isVirtualFocused = state.selectionManager.focusedKey === item.key;
-    let { optionProps } = (0, react_aria_1.useOption)({
-        key: item.key,
-        isDisabled,
-        isSelected,
-        shouldSelectOnPressUp: true,
-        shouldFocusOnHover: true,
-        shouldUseVirtualFocus,
-    }, state, ref);
-    // Handle focus events, so we can apply highlighted
-    // style to the focused option
-    let { isFocused, focusProps } = (0, interactions_1.useFocus)({ isDisabled });
-    return ((0, react_1.createElement)(OptionElement, { ...(0, index_2.mergeProps)(optionProps, focusProps), ref: ref, key: item.key, mods: {
-            selected: isSelected,
-            focused: shouldUseVirtualFocus ? isVirtualFocused : isFocused,
-            disabled: isDisabled,
-        }, "data-theme": isSelected ? 'special' : undefined, styles: styles }, item.rendered));
-}
-const _Select = (0, react_2.forwardRef)(Select);
-_Select.cubeInputType = 'Select';
-const __Select = Object.assign(_Select, { Item: react_stately_1.Item });
-exports.Select = __Select;
-
-        

package/cjs/components/fields/Select/index.js

@@ -1,26 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.56.3
- * 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("./Select"), exports);
-
-        

package/cjs/components/fields/Slider/Gradation.js

@@ -1,27 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.56.3
- * Released under the MIT license.
- */
-
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Gradation = Gradation;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const elements_1 = require("./elements");
-function Gradation(props) {
-    const { state, ranges, values = [] } = props;
-    if (!values.length) {
-        return null;
-    }
-    const getIsActive = (value, idx) => {
-        const [minIdx, maxIdx] = ranges.map((range) => state.getThumbValue(range));
-        return idx >= minIdx && idx <= maxIdx;
-    };
-    return ((0, jsx_runtime_1.jsx)(elements_1.SliderGradationElement, { children: values.map((value, idx) => ((0, jsx_runtime_1.jsx)(elements_1.SliderGradeElement, { mods: {
-                active: getIsActive(value, idx),
-            }, children: value }, value))) }));
-}
-
-        

package/cjs/components/fields/Slider/Header.js

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

package/cjs/components/fields/Slider/RangeSlider.js

@@ -1,33 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.56.3
- * Released under the MIT license.
- */
-
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.RangeSlider = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const SliderThumb_1 = require("./SliderThumb");
-const SliderTrack_1 = require("./SliderTrack");
-const SliderBase_1 = require("./SliderBase");
-const Gradation_1 = require("./Gradation");
-const INTL_MESSAGES = {
-    minimum: 'Minimum',
-    maximum: 'Maximum',
-};
-function RangeSlider(props, ref) {
-    let { isDisabled, styles, gradation, ...otherProps } = props;
-    return ((0, jsx_runtime_1.jsx)(SliderBase_1.SliderBase, { ...otherProps, children: ({ trackRef, inputRef, state }) => {
-            return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Gradation_1.Gradation, { state: state, ranges: [0, 1], values: gradation }), (0, jsx_runtime_1.jsx)(SliderTrack_1.SliderTrack, { state: state, isDisabled: isDisabled }), (0, jsx_runtime_1.jsx)(SliderThumb_1.SliderThumb, { index: 0, "aria-label": INTL_MESSAGES['minimum'], state: state, inputRef: inputRef, trackRef: trackRef, isDisabled: isDisabled }), (0, jsx_runtime_1.jsx)(SliderThumb_1.SliderThumb, { index: 1, "aria-label": INTL_MESSAGES['maximum'], state: state, inputRef: inputRef, trackRef: trackRef, isDisabled: isDisabled })] }));
-        } }));
-}
-const _RangeSlider = (0, react_1.forwardRef)(RangeSlider);
-const __RangeSlider = Object.assign(_RangeSlider, {
-    cubeInputType: 'Number',
-});
-exports.RangeSlider = __RangeSlider;
-
-        

package/cjs/components/fields/Slider/Slider.js

@@ -1,45 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.56.3
- * Released under the MIT license.
- */
-
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Slider = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const tasty_1 = require("../../../tasty");
-const index_1 = require("../../../utils/react/index");
-const SliderThumb_1 = require("./SliderThumb");
-const SliderTrack_1 = require("./SliderTrack");
-const SliderBase_1 = require("./SliderBase");
-const Gradation_1 = require("./Gradation");
-function Slider(props, ref) {
-    const { onChange, onChangeEnd, value, defaultValue, getValueLabel, isDisabled, styles, gradation, orientation, ...otherProps } = props;
-    let baseProps = {
-        ...otherProps,
-        // Normalize `value: number[]` to `value: number`
-        value: value != null ? [value] : undefined,
-        defaultValue: defaultValue != null ? [defaultValue] : undefined,
-        onChange: (v) => {
-            onChange?.(v[0]);
-        },
-        onChangeEnd: (v) => {
-            onChangeEnd?.(v[0]);
-        },
-        getValueLabel: getValueLabel ? ([v]) => getValueLabel(v) : undefined,
-    };
-    const extractedStyles = (0, tasty_1.extractStyles)(otherProps, tasty_1.OUTER_STYLES, styles);
-    return ((0, jsx_runtime_1.jsx)(SliderBase_1.SliderBase, { ...(0, index_1.mergeProps)(otherProps, baseProps), ref: ref, orientation: orientation, styles: extractedStyles, children: ({ trackRef, inputRef, state }) => {
-            return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Gradation_1.Gradation, { state: state, ranges: [0, 1], values: gradation }), (0, jsx_runtime_1.jsx)(SliderTrack_1.SliderTrack, { state: state, isDisabled: isDisabled, orientation: orientation }), (0, jsx_runtime_1.jsx)(SliderThumb_1.SliderThumb, { index: 0, state: state, inputRef: inputRef, trackRef: trackRef, isDisabled: isDisabled })] }));
-        } }));
-}
-const _Slider = (0, react_1.forwardRef)(Slider);
-const __Slider = Object.assign(_Slider, {
-    cubeInputType: 'Number',
-});
-exports.Slider = __Slider;
-
-        

package/cjs/components/fields/Slider/SliderBase.js

@@ -1,129 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.56.3
- * Released under the MIT license.
- */
-
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useSlider = exports.SliderBase = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const utils_1 = require("@react-spectrum/utils");
-const react_stately_1 = require("react-stately");
-const react_aria_1 = require("react-aria");
-Object.defineProperty(exports, "useSlider", { enumerable: true, get: function () { return react_aria_1.useSlider; } });
-const tasty_1 = require("../../../tasty");
-const form_1 = require("../../form");
-const Text_1 = require("../../content/Text");
-const elements_1 = require("./elements");
-const LabelValueElement = (0, tasty_1.tasty)(Text_1.Text, {
-    styles: {
-        display: 'block',
-        textAlign: 'right',
-    },
-});
-function SliderBase(allProps, ref) {
-    let props = (0, form_1.useFormProps)(allProps);
-    props = (0, form_1.useFieldProps)(props, {
-        defaultValidationTrigger: 'onChange',
-        valuePropsMapper: ({ value, onChange }) => ({
-            value: value != null ? value : undefined,
-            onChange: onChange,
-        }),
-    });
-    let { labelPosition, label, extra, styles, isRequired, validationState, message, description, requiredMark, labelSuffix, labelStyles, necessityIndicator, gradation, isDisabled, inputStyles, minValue = 0, maxValue = 100, inputWidth, formatOptions, getValueLabel, onChange, onChangeEnd, children, showValueLabel = true, orientation: formOrientation, ...otherProps } = props;
-    let orientation = allProps.orientation || 'horizontal';
-    // `Math.abs(Math.sign(a) - Math.sign(b)) === 2` is true if the values have a different sign.
-    let alwaysDisplaySign = Math.abs(Math.sign(minValue) - Math.sign(maxValue)) === 2;
-    if (alwaysDisplaySign) {
-        if (formatOptions != null) {
-            if (!('signDisplay' in formatOptions)) {
-                formatOptions = {
-                    ...formatOptions,
-                    signDisplay: 'exceptZero',
-                };
-            }
-        }
-        else {
-            formatOptions = { signDisplay: 'exceptZero' };
-        }
-    }
-    const formatter = (0, react_aria_1.useNumberFormatter)(formatOptions);
-    const state = (0, react_stately_1.useSliderState)({
-        ...props,
-        orientation,
-        numberFormatter: formatter,
-        minValue,
-        maxValue,
-    });
-    const trackRef = (0, react_1.useRef)(null);
-    let { groupProps, trackProps, labelProps, outputProps } = (0, react_aria_1.useSlider)(props, state, trackRef);
-    const inputRef = (0, react_1.useRef)(null);
-    let domRef = (0, utils_1.useFocusableRef)(ref, inputRef);
-    let displayValue = '';
-    let maxLabelLength = 0;
-    if (typeof getValueLabel === 'function') {
-        displayValue = getValueLabel(state.values);
-        switch (state.values.length) {
-            case 1:
-                maxLabelLength = Math.max(getValueLabel([minValue]).length, getValueLabel([maxValue]).length);
-                break;
-            case 2:
-                // Try all possible combinations of min and max values.
-                maxLabelLength = Math.max(getValueLabel([minValue, minValue]).length, getValueLabel([minValue, maxValue]).length, getValueLabel([maxValue, minValue]).length, getValueLabel([maxValue, maxValue]).length);
-                break;
-            default:
-                throw new Error('Only sliders with 1 or 2 handles are supported!');
-        }
-    }
-    else {
-        maxLabelLength = Math.max([...formatter.format(minValue)].length, [...formatter.format(maxValue)].length);
-        switch (state.values.length) {
-            case 1:
-                displayValue = state.getThumbValueLabel(0);
-                break;
-            case 2:
-                // This should really use the NumberFormat#formatRange proposal...
-                // https://github.com/tc39/ecma402/issues/393
-                // https://github.com/tc39/proposal-intl-numberformat-v3#formatrange-ecma-402-393
-                displayValue = `${state.getThumbValueLabel(0)} – ${state.getThumbValueLabel(1)}`;
-                maxLabelLength =
-                    3 +
-                        2 *
-                            Math.max(maxLabelLength, [...formatter.format(minValue)].length, [...formatter.format(maxValue)].length);
-                break;
-            default:
-                throw new Error('Only sliders with 1 or 2 handles are supported!');
-        }
-    }
-    extra =
-        extra != null || !showValueLabel ? (extra) : ((0, jsx_runtime_1.jsx)(LabelValueElement, { ...outputProps, style: maxLabelLength
-                ? {
-                    width: `${maxLabelLength + 1}ch`,
-                    minWidth: `${maxLabelLength + 1}ch`,
-                }
-                : undefined, children: displayValue }));
-    const mods = (0, react_1.useMemo)(() => ({
-        'side-label': labelPosition === 'side',
-        horizontal: orientation === 'horizontal',
-    }), [labelPosition, orientation]);
-    const sliderField = ((0, jsx_runtime_1.jsx)(elements_1.SliderElement, { ref: domRef, ...groupProps, mods: mods, children: (0, jsx_runtime_1.jsx)(elements_1.SliderControlsElement, { ...trackProps, ref: trackRef, mods: mods, children: children({
-                trackRef,
-                inputRef,
-                state,
-            }) }) }));
-    styles = (0, tasty_1.extractStyles)(otherProps, tasty_1.OUTER_STYLES, styles);
-    return (0, form_1.wrapWithField)(sliderField, ref, {
-        ...props,
-        children: undefined,
-        styles,
-        extra,
-        labelProps,
-    });
-}
-const _SliderBase = (0, react_1.forwardRef)(SliderBase);
-exports.SliderBase = _SliderBase;
-
-        

package/cjs/components/fields/Slider/SliderInput.js

@@ -1,37 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.56.3
- * Released under the MIT license.
- */
-
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SliderInput = SliderInput;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const __1 = require("../../../");
-function calculateWidth(max, hasSuffix) {
-    if (typeof max === 'undefined') {
-        return undefined;
-    }
-    const value = String(max).length;
-    // for 2 digit values 1.6 is better with suffix
-    const suffixWidth = value > 2 ? 1.6 : 1.75;
-    const charWidth = hasSuffix ? suffixWidth : 2;
-    return `${value * charWidth}x`;
-}
-function SliderInput(props) {
-    const { state, index, formatOptions, width, min, max, ...otherProps } = props;
-    const inputWidth = width || calculateWidth(max);
-    const value = state.values[index];
-    const onChange = (0, react_1.useCallback)((value) => {
-        state.setThumbValue(index, value);
-    }, [index, state]);
-    const maxLength = typeof max !== 'undefined' ? String(max).length : undefined;
-    return ((0, jsx_runtime_1.jsx)(__1.NumberInput, { insideForm: false, labelPosition: "top", ...otherProps, hideStepper: true, size: "small", wrapperStyles: {
-            width: inputWidth,
-        }, textAlign: "center", formatOptions: formatOptions, value: value, minValue: state.getThumbMinValue(index), maxValue: state.getThumbMaxValue(index), maxLength: maxLength, onChange: onChange }));
-}
-
-