@cube-dev/ui-kit 0.114.0 → 0.115.0

package/es/components/fields/Select/Select.js

@@ -1,347 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.114.0
- * Released under the MIT license.
- */
-
-import { Fragment as _Fragment, jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { cloneElement, useEffect, useMemo, useRef, } from 'react';
-import { DismissButton, FocusScope, HiddenSelect, useButton, useHover, useListBox, useListBoxSection, useOption, useOverlay, useOverlayPosition, useSelect, } from 'react-aria';
-import { Section as BaseSection, useSelectState } from 'react-stately';
-import { useEvent } from '../../../_internal/index.js';
-import { CloseIcon, DirectionIcon, LoadingIcon } from '../../../icons/index.js';
-import { useProviderProps } from '../../../provider.js';
-import { BASE_STYLES, COLOR_STYLES, extractStyles, OUTER_STYLES, tasty, } from '../../../tasty/index.js';
-import { chainRaf } from '../../../utils/raf.js';
-import { generateRandomId } from '../../../utils/random.js';
-import { forwardRefWithGenerics, mergeProps, useCombinedRefs, useLayoutEffect, } from '../../../utils/react/index.js';
-import { useFocus } from '../../../utils/react/interactions.js';
-import { useEventBus } from '../../../utils/react/useEventBus.js';
-import { ItemAction } from '../../actions/index.js';
-import { StyledDivider as ListDivider, StyledSectionHeading as ListSectionHeading, StyledSection as ListSectionWrapper, } from '../../actions/Menu/styled.js';
-import { CollectionItem, filterCollectionItemProps, } from '../../CollectionItem.js';
-import { Item } from '../../content/Item/index.js';
-import { Text } from '../../content/Text.js';
-import { useFieldProps, useFormProps, wrapWithField } from '../../form/index.js';
-import { DisplayTransition } from '../../helpers/index.js';
-import { Portal } from '../../portal/index.js';
-import { InvalidIcon } from '../../shared/InvalidIcon.js';
-import { ValidIcon } from '../../shared/ValidIcon.js';
-const SelectWrapperElement = tasty({
-    qa: 'SelectWrapper',
-    styles: {
-        display: 'grid',
-        position: 'relative',
-        radius: true,
-        fill: {
-            '': '#white',
-            disabled: '#dark.04',
-            'theme=special': '#clear',
-        },
-        color: {
-            '': '#dark.85',
-            focused: '#dark.85',
-            invalid: '#danger-text',
-            disabled: '#dark.30',
-        },
-    },
-});
-export const ListBoxElement = tasty({
-    qa: 'ListBox',
-    as: 'ul',
-    styles: {
-        display: 'flex',
-        gap: '1bw',
-        flow: 'column',
-        margin: '0',
-        padding: '0',
-        listStyle: 'none',
-        scrollbar: 'styled',
-    },
-});
-// Use Item for options to unify item visuals and reduce custom styling
-const OptionItem = tasty(Item, {
-    as: 'li',
-    disableActionsFocus: true,
-    qa: 'Option',
-    styles: {
-        '$inline-compensation': '0px',
-    },
-});
-const SelectOverlayWrapper = tasty({
-    qa: 'SelectOverlayWrapper',
-    styles: {
-        position: 'absolute',
-        zIndex: 1000,
-    },
-});
-const OverlayElement = tasty({
-    qa: 'SelectOverlay',
-    styles: {
-        width: 'min $overlay-min-width',
-        display: 'grid',
-        gridRows: '1sf',
-        height: 'initial max-content (50vh - 5x)',
-        overflow: 'auto',
-        background: '#white',
-        radius: '1cr',
-        shadow: true,
-        padding: '.5x',
-        border: true,
-        boxSizing: 'border-box',
-        transition: 'translate $transition ease-out, scale $transition ease-out, theme $transition ease-out',
-        translate: {
-            '': '0 0',
-            'open & [data-placement="top"]': '0 0',
-            '!open & [data-placement="top"]': '0 1x',
-            'open & ([data-placement="bottom"] | ![data-placement])': '0 0',
-            '!open & ([data-placement="bottom"] | ![data-placement])': '0 -1x',
-        },
-        transformOrigin: {
-            '': 'top center',
-            '[data-placement="top"]': 'bottom center',
-        },
-        scale: {
-            '': '1 1',
-            '!open': '1 .9',
-        },
-        opacity: {
-            '': 1,
-            '!open': 0.001,
-        },
-    },
-});
-const PROP_STYLES = [...BASE_STYLES, ...OUTER_STYLES, ...COLOR_STYLES];
-function Select(props, ref) {
-    props = useProviderProps(props);
-    props = useFormProps(props);
-    props = useFieldProps(props, {
-        defaultValidationTrigger: 'onChange',
-        valuePropsMapper: ({ value, onChange }) => ({
-            selectedKey: value ?? null,
-            onSelectionChange: onChange,
-        }),
-    });
-    let { qa, label, extra, icon, rightIcon, labelStyles, isRequired, necessityIndicator, validationState, prefix, isDisabled = props.isLoading || false, autoFocus, inputProps, triggerRef, popoverRef, listBoxRef, isLoading, loadingIndicator, overlayOffset = 8, inputStyles, triggerStyles, optionStyles, listBoxStyles, overlayStyles, suffix, message, triggerDescription, descriptionPlacement, hotkeys, direction = 'bottom', shouldFlip = true, containerPadding = 8, placeholder, tooltip, size = 'medium', shape, styles, type = 'outline', theme = 'default', labelSuffix, suffixPosition = 'before', isClearable, onOpenChange, form, ...otherProps } = props;
-    let state = useSelectState(props);
-    // Generate a unique ID for this select instance
-    const selectId = useMemo(() => generateRandomId(), []);
-    // Get event bus for menu synchronization
-    const { emit, on } = useEventBus();
-    // Listen for other menus opening and close this one if needed
-    useEffect(() => {
-        const unsubscribe = on('popover:open', (data) => {
-            // If another menu is opening and this select is open, close this one
-            if (data.menuId !== selectId && state.isOpen) {
-                state.close();
-            }
-        });
-        return unsubscribe;
-    }, [on, selectId, state]);
-    // Emit event when this select opens
-    useEffect(() => {
-        if (state.isOpen) {
-            emit('popover:open', { menuId: selectId });
-        }
-    }, [state.isOpen, emit, selectId]);
-    // Call onOpenChange when open state changes
-    useEffect(() => {
-        onOpenChange?.(state.isOpen);
-    }, [state.isOpen]);
-    styles = extractStyles(otherProps, PROP_STYLES, styles);
-    ref = useCombinedRefs(ref);
-    triggerRef = useCombinedRefs(triggerRef);
-    popoverRef = useCombinedRefs(popoverRef);
-    listBoxRef = useCombinedRefs(listBoxRef);
-    let { labelProps, triggerProps, valueProps, menuProps } = useSelect(props, state, triggerRef);
-    let { overlayProps, placement, updatePosition } = useOverlayPosition({
-        targetRef: triggerRef,
-        overlayRef: popoverRef,
-        scrollRef: listBoxRef,
-        placement: `${direction} end`,
-        shouldFlip: shouldFlip,
-        isOpen: state.isOpen,
-        onClose: state.close,
-        offset: overlayOffset,
-        containerPadding: containerPadding,
-    });
-    let { isFocused, focusProps } = useFocus({ isDisabled }, true);
-    let { hoverProps, isHovered } = useHover({ isDisabled });
-    // Get props for the button based on the trigger props from useSelect
-    let { buttonProps } = useButton(triggerProps, triggerRef);
-    let isInvalid = validationState === 'invalid';
-    let validationIcon = isInvalid ? InvalidIcon : ValidIcon;
-    let validation = cloneElement(validationIcon);
-    // Clear button logic
-    let hasSelection = state.selectedItem != null;
-    let showClearButton = isClearable && hasSelection && !isDisabled && !props.isReadOnly;
-    // Clear function
-    let clearValue = useEvent(() => {
-        props.onSelectionChange?.(null);
-        state.setSelectedKey(null);
-        // Close the popup if it's open
-        if (state.isOpen) {
-            state.close();
-        }
-        // Return focus to the trigger for better UX
-        triggerRef.current?.focus?.();
-        props.onClear?.();
-    });
-    let triggerWidth = triggerRef?.current?.offsetWidth;
-    const showPlaceholder = !!placeholder?.trim() && !state.selectedItem;
-    const modifiers = useMemo(() => ({
-        invalid: isInvalid,
-        valid: validationState === 'valid',
-        disabled: isDisabled,
-        loading: isLoading,
-        hovered: isHovered,
-        focused: isFocused,
-        placeholder: showPlaceholder,
-        prefix: !!prefix,
-        suffix: true,
-    }), [
-        validationState,
-        isDisabled,
-        isLoading,
-        isHovered,
-        isFocused,
-        showPlaceholder,
-        prefix,
-    ]);
-    suffix = useMemo(() => {
-        if (!suffix && !validationState) {
-            return null;
-        }
-        return (_jsxs(_Fragment, { children: [suffix, validationState ? validation : null] }));
-    }, [suffix, validationState, validation]);
-    let selectField = (_jsxs(SelectWrapperElement, { mods: modifiers, styles: styles, "data-size": size, "data-type": type, "data-theme": theme, children: [_jsx(HiddenSelect, { state: state, triggerRef: triggerRef, label: props.label, name: props.name }), _jsx(Item, { as: "button", qa: qa || 'Select', "data-input-type": "select", ...mergeProps(buttonProps, hoverProps, focusProps), ref: triggerRef, "data-popover-trigger": true, styles: { ...inputStyles, ...triggerStyles }, theme: theme, size: size, shape: shape, 
-                // Ensure this button never submits a surrounding form in tests or runtime
-                htmlType: "button", 
-                // Preserve visual variant via data attribute instead of conflicting with HTML attribute
-                type: type, mods: modifiers, prefix: prefix, suffix: suffix, icon: icon, rightIcon: rightIcon !== undefined ? (rightIcon) : showClearButton ? (_jsx(ItemAction, { icon: _jsx(CloseIcon, {}), theme: validationState === 'invalid' ? 'danger' : undefined, qa: "SelectClearButton", mods: { pressed: false }, onPress: clearValue })) : isLoading ? (_jsx(LoadingIcon, {})) : (_jsx(DirectionIcon, { to: state.isOpen ? 'up' : 'down' })), description: triggerDescription, descriptionPlacement: descriptionPlacement, hotkeys: hotkeys, tooltip: tooltip, labelProps: valueProps, children: state.selectedItem ? (state.selectedItem.rendered) : placeholder ? (_jsx(Text.Placeholder, { children: placeholder })) : null }), _jsx(ListBoxPopup, { ...menuProps, popoverRef: popoverRef, listBoxRef: listBoxRef, overlayProps: overlayProps, placement: placement, updatePosition: updatePosition, state: state, listBoxStyles: listBoxStyles, overlayStyles: overlayStyles, optionStyles: optionStyles, minWidth: triggerWidth, triggerRef: triggerRef, isDisabled: isDisabled })] }));
-    return wrapWithField(selectField, ref, mergeProps({
-        ...props,
-    }, { labelProps }));
-}
-export function ListBoxPopup({ state, popoverRef, listBoxRef, listBoxStyles, overlayStyles, optionStyles, overlayProps: parentOverlayProps, shouldUseVirtualFocus = false, placement, updatePosition, minWidth, size = 'small', triggerRef, isDisabled, ...otherProps }) {
-    // For trigger+popover components, map 'small' size to 'medium' for list items
-    // while preserving 'medium' and 'large' sizes
-    const listItemSize = size === 'small' ? 'medium' : size;
-    // Update position when overlay opens
-    useLayoutEffect(() => {
-        if (state.isOpen && updatePosition) {
-            // Use triple RAF to ensure layout is complete before positioning
-            // This gives enough time for the DisplayTransition and content to render
-            return chainRaf(() => {
-                updatePosition();
-            }, 3);
-        }
-    }, [state.isOpen]);
-    // Get props for the listbox
-    let { listBoxProps } = 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 } = useOverlay({
-        onClose: () => state.close(),
-        shouldCloseOnBlur: true,
-        isOpen: state.isOpen,
-        isDismissable: true,
-        shouldCloseOnInteractOutside: (el) => {
-            const menuTriggerEl = el.closest('[data-popover-trigger]');
-            // If no menu trigger was clicked, allow closing
-            if (!menuTriggerEl)
-                return true;
-            // If the same trigger that opened this select was clicked, allow closing
-            if (menuTriggerEl === triggerRef?.current)
-                return true;
-            // Otherwise, don't close (let event mechanism handle it)
-            return false;
-        },
-    }, popoverRef);
-    // Extract primary placement direction for consistent styling
-    const placementDirection = placement?.split(' ')[0] || 'bottom';
-    // 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 (_jsx(Portal, { children: _jsx(DisplayTransition, { isShown: state.isOpen && !isDisabled, children: ({ phase, isShown, ref: transitionRef }) => (_jsx(SelectOverlayWrapper, { ...overlayProps, ...parentOverlayProps, ref: popoverRef, style: parentOverlayProps?.style, children: _jsx(OverlayElement, { ref: transitionRef, "data-placement": placementDirection, "data-phase": phase, mods: {
-                        open: isShown,
-                    }, styles: overlayStyles, style: {
-                        '--overlay-min-width': minWidth ? `${minWidth}px` : 'initial',
-                    }, children: _jsxs(FocusScope, { restoreFocus: true, children: [_jsx(DismissButton, { onDismiss: () => state.close() }), (() => {
-                                const renderedItems = [];
-                                let isFirstSection = true;
-                                for (const item of state.collection) {
-                                    if (item.type === 'section') {
-                                        if (!isFirstSection) {
-                                            renderedItems.push(_jsx(ListDivider, { as: "li", role: "separator", "aria-orientation": "horizontal" }, `divider-${String(item.key)}`));
-                                        }
-                                        renderedItems.push(_jsx(SelectSection, { item: item, state: state, optionStyles: optionStyles, sectionStyles: undefined, shouldUseVirtualFocus: shouldUseVirtualFocus, size: listItemSize }, item.key));
-                                        isFirstSection = false;
-                                    }
-                                    else {
-                                        renderedItems.push(_jsx(Option, { item: item, state: state, styles: optionStyles, shouldUseVirtualFocus: shouldUseVirtualFocus, size: listItemSize }, item.key));
-                                    }
-                                }
-                                return (_jsx(ListBoxElement, { styles: listBoxStyles, ...listBoxProps, ref: listBoxRef, children: renderedItems }));
-                            })(), _jsx(DismissButton, { onDismiss: () => state.close() })] }) }) })) }) }));
-}
-function Option({ item, state, styles, shouldUseVirtualFocus, size }) {
-    let ref = 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, isPressed, labelProps, descriptionProps } = 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 } = useFocus({ isDisabled });
-    // Filter out service props - all remaining props can be passed to Item
-    const filteredItemProps = filterCollectionItemProps(item.props);
-    return (_jsx(OptionItem, { ...mergeProps(optionProps, focusProps, filteredItemProps), ref: ref, mods: {
-            listboxitem: true,
-            selected: isSelected,
-            focused: shouldUseVirtualFocus ? isVirtualFocused : isFocused,
-            disabled: isDisabled,
-            pressed: isPressed,
-        }, "data-size": size, styles: {
-            ...styles,
-            ...filteredItemProps.styles,
-        }, labelProps: labelProps, descriptionProps: descriptionProps, defaultTooltipPlacement: "right", children: item.rendered }));
-}
-function SelectSection(props) {
-    const { item, state, optionStyles, headingStyles, sectionStyles, shouldUseVirtualFocus, size, } = props;
-    const heading = item.rendered;
-    const { itemProps, headingProps, groupProps } = useListBoxSection({
-        heading,
-        'aria-label': item['aria-label'],
-    });
-    return (_jsxs(ListSectionWrapper, { ...itemProps, styles: sectionStyles, children: [heading && (_jsx(ListSectionHeading, { ...headingProps, size: size, styles: { ...headingStyles, '$inline-compensation': '0px' }, children: heading })), _jsx(ListBoxElement, { ...groupProps, mods: { section: true }, children: [...item.childNodes]
-                    .filter((node) => state.collection.getItem(node.key))
-                    .map((node) => (_jsx(Option, { item: node, state: state, styles: optionStyles, shouldUseVirtualFocus: shouldUseVirtualFocus, size: size }, node.key))) })] }));
-}
-const _Select = forwardRefWithGenerics(Select);
-_Select.cubeInputType = 'Select';
-const SelectSectionComponent = Object.assign(BaseSection, {
-    displayName: 'Section',
-});
-const __Select = Object.assign(_Select, {
-    Item: CollectionItem,
-    Section: SelectSectionComponent,
-});
-__Select.displayName = 'Select';
-export { __Select as Select };
-export { useSelectState };
-
-        

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

@@ -1,10 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.114.0
- * Released under the MIT license.
- */
-
-export * from './Select.js';
-
-        

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

@@ -1,24 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.114.0
- * Released under the MIT license.
- */
-
-import { jsx as _jsx } from "react/jsx-runtime";
-import { SliderGradationElement, SliderGradeElement } from './elements.js';
-export 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 (_jsx(SliderGradationElement, { children: values.map((value, idx) => (_jsx(SliderGradeElement, { mods: {
-                active: getIsActive(value, idx),
-            }, children: value }, value))) }));
-}
-
-        

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

@@ -1,12 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.114.0
- * Released under the MIT license.
- */
-
-export function Header() {
-    return null;
-}
-
-        

package/es/components/fields/Slider/HueSlider.js

@@ -1,65 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.114.0
- * Released under the MIT license.
- */
-
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef, useCallback, useMemo, useState } from 'react';
-import { Slider } from './Slider.js';
-// Generate 7 hue stops (0, 60, 120, 180, 240, 300, 359) for full color spectrum
-const HUE_STOPS = [0, 60, 120, 180, 240, 300, 359];
-const HUE_SATURATION = 80;
-const HUE_LIGHTNESS = 50;
-const HUE_GRADIENT = HUE_STOPS.map((h) => `okhsl(${h} ${HUE_SATURATION}% ${HUE_LIGHTNESS}%)`).join(', ');
-const horizontalTrackStyles = {
-    image: `linear-gradient(to right, ${HUE_GRADIENT})`,
-    Fill: false,
-};
-const verticalTrackStyles = {
-    image: `linear-gradient(to top, ${HUE_GRADIENT})`,
-    Fill: false,
-};
-function HueSlider(props, ref) {
-    const { value, defaultValue = 0, onChange, orientation = 'horizontal', thumbTokens: userThumbTokens, thumbStyles: userThumbStyles, trackStyles: userTrackStyles, ...rest } = props;
-    // Track internal value for uncontrolled mode
-    const [internalValue, setInternalValue] = useState(defaultValue);
-    // Use controlled value if provided, otherwise use internal state
-    const currentHue = value ?? internalValue;
-    // Handle onChange to update internal state in uncontrolled mode
-    const handleChange = useCallback((newValue) => {
-        if (value === undefined) {
-            setInternalValue(newValue);
-        }
-        onChange?.(newValue);
-    }, [value, onChange]);
-    // Create dynamic thumb tokens with the current hue color
-    const thumbTokens = useMemo(() => ({
-        '#slider-thumb': `okhsl(${currentHue} ${HUE_SATURATION}% ${HUE_LIGHTNESS}%)`,
-        '#slider-thumb-hovered': `okhsl(${currentHue} ${HUE_SATURATION}% ${HUE_LIGHTNESS - 10}%)`,
-        ...userThumbTokens,
-    }), [currentHue, userThumbTokens]);
-    const thumbStyles = useMemo(() => ({
-        outline: {
-            '': '1bw #slider-thumb-hovered.0',
-            focused: '1bw #slider-thumb-hovered',
-        },
-        ...userThumbStyles,
-    }), [userThumbStyles]);
-    const trackStyles = useMemo(() => ({
-        ...(orientation === 'vertical'
-            ? verticalTrackStyles
-            : horizontalTrackStyles),
-        ...userTrackStyles,
-    }), [orientation, userTrackStyles]);
-    return (_jsx(Slider, { ref: ref, value: value, defaultValue: defaultValue, orientation: orientation, minValue: 0, maxValue: 359, step: 1, thumbStyles: thumbStyles, trackStyles: trackStyles, thumbTokens: thumbTokens, onChange: handleChange, ...rest }));
-}
-const _HueSlider = forwardRef(HueSlider);
-const __HueSlider = Object.assign(_HueSlider, {
-    cubeInputType: 'Number',
-    displayName: 'HueSlider',
-});
-export { __HueSlider as HueSlider };
-
-        

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

@@ -1,34 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.114.0
- * Released under the MIT license.
- */
-
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useRef } from 'react';
-import { Gradation } from './Gradation.js';
-import { SliderBase } from './SliderBase.js';
-import { SliderThumb } from './SliderThumb.js';
-import { SliderTrack } from './SliderTrack.js';
-const INTL_MESSAGES = {
-    minimum: 'Minimum',
-    maximum: 'Maximum',
-};
-function RangeSlider(props, ref) {
-    let { isDisabled, styles, gradation, ...otherProps } = props;
-    // Create separate refs for each thumb to enable proper focus management
-    const minThumbInputRef = useRef(null);
-    const maxThumbInputRef = useRef(null);
-    return (_jsx(SliderBase, { ref: ref, ...otherProps, children: ({ trackRef, inputRef, state }) => {
-            return (_jsxs(_Fragment, { children: [_jsx(Gradation, { state: state, ranges: [0, 1], values: gradation }), _jsx(SliderTrack, { state: state, isDisabled: isDisabled, orientation: props.orientation }), _jsx(SliderThumb, { index: 0, "aria-label": INTL_MESSAGES['minimum'], state: state, inputRef: minThumbInputRef, trackRef: trackRef, isDisabled: isDisabled }), _jsx(SliderThumb, { index: 1, "aria-label": INTL_MESSAGES['maximum'], state: state, inputRef: maxThumbInputRef, trackRef: trackRef, isDisabled: isDisabled })] }));
-        } }));
-}
-const _RangeSlider = forwardRef(RangeSlider);
-const __RangeSlider = Object.assign(_RangeSlider, {
-    cubeInputType: 'Number',
-    displayName: 'RangeSlider',
-});
-export { __RangeSlider as RangeSlider };
-
-        

package/es/components/fields/Slider/Slider.js

@@ -1,43 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.114.0
- * Released under the MIT license.
- */
-
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef } from 'react';
-import { extractStyles, OUTER_STYLES } from '../../../tasty/index.js';
-import { mergeProps } from '../../../utils/react/index.js';
-import { Gradation } from './Gradation.js';
-import { SliderBase, } from './SliderBase.js';
-import { SliderThumb } from './SliderThumb.js';
-import { SliderTrack } from './SliderTrack.js';
-function Slider(props, ref) {
-    const { onChange, onChangeEnd, value, defaultValue, getValueLabel, isDisabled, styles, gradation, orientation, trackStyles, thumbStyles, thumbTokens, ...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 = extractStyles(otherProps, OUTER_STYLES, styles);
-    return (_jsx(SliderBase, { ...mergeProps(otherProps, baseProps), ref: ref, orientation: orientation, styles: extractedStyles, children: ({ trackRef, inputRef, state }) => {
-            return (_jsxs(_Fragment, { children: [_jsx(Gradation, { state: state, ranges: [0, 1], values: gradation }), _jsx(SliderTrack, { state: state, isDisabled: isDisabled, orientation: orientation, styles: trackStyles }), _jsx(SliderThumb, { index: 0, state: state, inputRef: inputRef, trackRef: trackRef, isDisabled: isDisabled, styles: thumbStyles, tokens: thumbTokens })] }));
-        } }));
-}
-const _Slider = forwardRef(Slider);
-const __Slider = Object.assign(_Slider, {
-    cubeInputType: 'Number',
-    displayName: 'Slider',
-});
-export { __Slider as Slider };
-
-        

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

@@ -1,126 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.114.0
- * Released under the MIT license.
- */
-
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useFocusableRef } from '@react-spectrum/utils';
-import { useMemo, useRef, } from 'react';
-import { useNumberFormatter, useSlider } from 'react-aria';
-import { useSliderState } from 'react-stately';
-import { extractStyles, OUTER_STYLES, tasty } from '../../../tasty/index.js';
-import { forwardRefWithGenerics, mergeProps } from '../../../utils/react/index.js';
-import { Text } from '../../content/Text.js';
-import { useFieldProps, useFormProps, wrapWithField } from '../../form/index.js';
-import { SliderControlsElement, SliderElement } from './elements.js';
-const LabelValueElement = tasty(Text, {
-    styles: {
-        display: 'block',
-        textAlign: 'right',
-    },
-});
-function SliderBase(allProps, ref) {
-    let props = useFormProps(allProps);
-    props = 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, form, labelProps: userLabelProps, ...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 = useNumberFormatter(formatOptions);
-    const state = useSliderState({
-        ...props,
-        orientation,
-        numberFormatter: formatter,
-        minValue,
-        maxValue,
-    });
-    const trackRef = useRef(null);
-    let { groupProps, trackProps, labelProps, outputProps } = useSlider(props, state, trackRef);
-    const inputRef = useRef(null);
-    let domRef = 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) : (_jsx(LabelValueElement, { ...outputProps, style: maxLabelLength
-                ? {
-                    width: `${maxLabelLength + 1}ch`,
-                    minWidth: `${maxLabelLength + 1}ch`,
-                }
-                : undefined, children: displayValue }));
-    const mods = useMemo(() => ({
-        'side-label': labelPosition === 'side',
-        horizontal: orientation === 'horizontal',
-    }), [labelPosition, orientation]);
-    styles = extractStyles(otherProps, OUTER_STYLES, styles);
-    const sliderField = (_jsx(SliderElement, { ref: domRef, id: props.id, ...groupProps, mods: mods, styles: styles, "data-input-type": "slider", children: _jsx(SliderControlsElement, { ...trackProps, ref: trackRef, mods: mods, children: children({
-                trackRef,
-                inputRef,
-                state,
-            }) }) }));
-    return wrapWithField(sliderField, ref, {
-        ...props,
-        extra,
-        labelProps: mergeProps(labelProps, userLabelProps),
-    });
-}
-const _SliderBase = forwardRefWithGenerics(SliderBase);
-_SliderBase.displayName = 'SliderBase';
-export { _SliderBase as SliderBase };
-export { useSlider };
-
-