@cube-dev/ui-kit 0.85.0 → 0.85.2

package/types/utils/index.d.ts

@@ -0,0 +1,9 @@
+export * from './react';
+export { chainRaf } from './raf';
+export { toFlatTree } from './tree';
+export { propDeprecationWarning } from './warnings';
+export { extractModule } from './modules';
+export { timeout } from './promise';
+export { random, generateRandomId } from './random';
+export { range } from './range';
+export { ResizeSensor } from './ResizeSensor';

package/types/utils/raf.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Chains N requestAnimationFrame calls and returns a cancel function.
+ * Useful for ensuring layout is complete before performing operations.
+ *
+ * @param callback - The function to call after N frames
+ * @param count - Number of RAF cycles to wait (default: 1)
+ * @returns A function to cancel the pending RAF call
+ *
+ * @example
+ * const cancel = chainRaf(() => {
+ *   updatePosition();
+ * }, 3);
+ *
+ * // Later, if needed:
+ * cancel();
+ */
+export declare function chainRaf(callback: () => void, count?: number): () => void;

package/es/components/fields/LegacyComboBox/LegacyComboBox.js

@@ -1,290 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.85.0
- * Released under the MIT license.
- */
-
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { cloneElement, forwardRef, useEffect, useMemo, } from 'react';
-import { useButton, useComboBox, useFilter, useHover, useOverlayPosition, } from 'react-aria';
-import { Section as BaseSection, useComboBoxState } from 'react-stately';
-import { useEvent } from '../../../_internal/index';
-import { CloseIcon, DownIcon, LoadingIcon } from '../../../icons';
-import { useProviderProps } from '../../../provider';
-import { BASE_STYLES, COLOR_STYLES, extractStyles, OUTER_STYLES, tasty, } from '../../../tasty';
-import { generateRandomId } from '../../../utils/random';
-import { mergeProps, useCombinedRefs, useLayoutEffect, } from '../../../utils/react';
-import { useFocus } from '../../../utils/react/interactions';
-import { useEventBus } from '../../../utils/react/useEventBus';
-import { ItemAction } from '../../actions';
-import { useFieldProps, useFormProps, wrapWithField } from '../../form';
-import { Item } from '../../Item';
-import { OverlayWrapper } from '../../overlays/OverlayWrapper';
-import { InvalidIcon } from '../../shared/InvalidIcon';
-import { ValidIcon } from '../../shared/ValidIcon';
-import { DEFAULT_INPUT_STYLES, INPUT_WRAPPER_STYLES } from '../index';
-import { ListBoxPopup } from '../Select';
-const LegacyComboBoxWrapperElement = tasty({
-    styles: INPUT_WRAPPER_STYLES,
-});
-const InputElement = tasty({
-    as: 'input',
-    styles: DEFAULT_INPUT_STYLES,
-});
-const TriggerElement = tasty({
-    as: 'button',
-    type: 'neutral',
-    styles: {
-        display: 'grid',
-        placeItems: 'center',
-        placeContent: 'center',
-        placeSelf: 'stretch',
-        radius: '(1r - 1bw) right',
-        padding: '0',
-        width: '3x',
-        boxSizing: 'border-box',
-        color: {
-            '': '#dark-02',
-            hovered: '#dark-02',
-            pressed: '#purple',
-            disabled: '#dark.30',
-        },
-        border: 'left',
-        reset: 'button',
-        margin: 0,
-        fill: {
-            '': '#dark.0',
-            hovered: '#dark.04',
-            pressed: '#purple.10',
-            disabled: '#clear',
-        },
-        cursor: 'pointer',
-    },
-});
-const PROP_STYLES = [...BASE_STYLES, ...OUTER_STYLES, ...COLOR_STYLES];
-export const LegacyComboBox = forwardRef(function LegacyComboBox(props, ref) {
-    props = useProviderProps(props);
-    props = useFormProps(props);
-    props = useFieldProps(props, {
-        valuePropsMapper: ({ value, onChange }) => {
-            return {
-                selectedKey: !props.allowsCustomValue ? value ?? null : undefined,
-                inputValue: props.allowsCustomValue ? value ?? '' : undefined,
-                onInputChange(val) {
-                    if (!props.allowsCustomValue) {
-                        return;
-                    }
-                    onChange(val);
-                },
-                onSelectionChange(val) {
-                    if (val == null && props.allowsCustomValue) {
-                        return;
-                    }
-                    onChange(val);
-                },
-            };
-        },
-    });
-    let { qa, label, extra, labelStyles, isRequired, necessityIndicator, validationState, icon, prefix, isDisabled, multiLine, autoFocus, wrapperRef, inputRef, triggerRef, popoverRef, listBoxRef, isLoading, loadingIndicator, overlayOffset = 8, inputStyles, optionStyles, triggerStyles, listBoxStyles, overlayStyles, wrapperStyles, suffix, hideTrigger, message, description, size = 'medium', autoComplete = 'off', direction = 'bottom', shouldFlip = true, menuTrigger = 'input', suffixPosition = 'before', loadingState, filter, styles, labelSuffix, selectedKey, defaultSelectedKey, isClearable, form, ...otherProps } = props;
-    let isAsync = loadingState != null;
-    let { contains } = useFilter({ sensitivity: 'base' });
-    let comboBoxStateProps = {
-        ...props,
-        defaultFilter: filter || contains,
-        filter: undefined,
-        allowsEmptyCollection: isAsync,
-        menuTrigger,
-    };
-    let state = useComboBoxState(comboBoxStateProps);
-    // Generate a unique ID for this combobox instance
-    const comboBoxId = 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 combobox is open, close this one
-            if (data.menuId !== comboBoxId && state.isOpen) {
-                state.close();
-            }
-        });
-        return unsubscribe;
-    }, [on, comboBoxId, state]);
-    // Emit event when this combobox opens
-    useEffect(() => {
-        if (state.isOpen) {
-            emit('popover:open', { menuId: comboBoxId });
-        }
-    }, [state.isOpen, emit, comboBoxId]);
-    styles = extractStyles(otherProps, PROP_STYLES, styles);
-    ref = useCombinedRefs(ref);
-    wrapperRef = useCombinedRefs(wrapperRef);
-    inputRef = useCombinedRefs(inputRef);
-    triggerRef = useCombinedRefs(triggerRef);
-    popoverRef = useCombinedRefs(popoverRef);
-    listBoxRef = useCombinedRefs(listBoxRef);
-    let { overlayProps, placement, updatePosition } = useOverlayPosition({
-        targetRef: triggerRef,
-        overlayRef: popoverRef,
-        scrollRef: listBoxRef,
-        placement: `${direction} end`,
-        shouldFlip: shouldFlip,
-        isOpen: state.isOpen,
-        onClose: state.close,
-        offset: overlayOffset,
-    });
-    let { labelProps, inputProps, listBoxProps, buttonProps: triggerProps, } = useComboBox({
-        ...comboBoxStateProps,
-        inputRef,
-        buttonRef: triggerRef,
-        listBoxRef,
-        popoverRef,
-        menuTrigger,
-    }, state);
-    let { isFocused, focusProps } = useFocus({ isDisabled });
-    let { hoverProps, isHovered } = useHover({ isDisabled });
-    // Get props for the button based on the trigger props from useComboBox
-    let { buttonProps, isPressed: isTriggerPressed } = useButton(triggerProps, triggerRef);
-    let { hoverProps: triggerHoverProps, isHovered: isTriggerHovered } = useHover({ isDisabled });
-    let { focusProps: triggerFocusProps, isFocused: isTriggerFocused } = useFocus({ isDisabled }, true);
-    useLayoutEffect(() => {
-        if (state.isOpen) {
-            updatePosition();
-        }
-    }, [state.isOpen, state.collection.size]);
-    let isInvalid = validationState === 'invalid';
-    let validationIcon = isInvalid ? InvalidIcon : ValidIcon;
-    let validation = cloneElement(validationIcon);
-    // Clear button logic
-    let hasValue = props.allowsCustomValue
-        ? state.inputValue !== ''
-        : state.selectedKey != null;
-    let showClearButton = isClearable && hasValue && !isDisabled && !props.isReadOnly;
-    // Clear function
-    let clearValue = useEvent(() => {
-        // Always clear input value in state so UI resets to placeholder
-        state.setInputValue('');
-        // Notify external input value only when custom value mode is enabled
-        if (props.allowsCustomValue) {
-            props.onInputChange?.('');
-        }
-        props.onSelectionChange?.(null);
-        state.setSelectedKey(null);
-        // Close the popup if it's open
-        if (state.isOpen) {
-            state.close();
-        }
-        // Focus back to the input
-        inputRef.current?.focus();
-        props.onClear?.();
-    });
-    let comboBoxWidth = wrapperRef?.current?.offsetWidth;
-    if (icon) {
-        icon = _jsx("div", { "data-element": "InputIcon", children: icon });
-        if (prefix) {
-            prefix = (_jsxs(_Fragment, { children: [icon, prefix] }));
-        }
-        else {
-            prefix = icon;
-        }
-    }
-    let mods = useMemo(() => ({
-        invalid: isInvalid,
-        valid: validationState === 'valid',
-        disabled: isDisabled,
-        hovered: isHovered,
-        focused: isFocused,
-        loading: isLoading,
-        prefix: !!prefix,
-        suffix: true,
-        clearable: showClearButton,
-    }), [
-        isInvalid,
-        validationState,
-        isDisabled,
-        isHovered,
-        isFocused,
-        isLoading,
-        prefix,
-        showClearButton,
-    ]);
-    // If input is not full and the user presses Enter, pick the first option.
-    let onKeyPress = useEvent((e) => {
-        if (!props.onSelectionChange) {
-            return;
-        }
-        if (e.key === 'Enter') {
-            if (!props.allowsCustomValue) {
-                if (state.isOpen) {
-                    // If there is a selected option then do nothing. It will be selected on Enter anyway.
-                    if (listBoxRef.current?.querySelector('li[aria-selected="true"]')) {
-                        return;
-                    }
-                    const option = [...state.collection][0]?.key;
-                    if (option && selectedKey !== option) {
-                        props.onSelectionChange?.(option);
-                        e.stopPropagation();
-                        e.preventDefault();
-                    }
-                }
-                else if (inputRef.current?.value &&
-                    ![...state.collection]
-                        .map((i) => i.textValue)
-                        .includes(inputRef.current?.value)) {
-                    // If the input value is not in the collection, we need to prevent the submitting of the form.
-                    // Also, we reset value manually.
-                    e.preventDefault();
-                    props.onSelectionChange?.(null);
-                }
-                // If a custom value is allowed, we need to check if the input value is in the collection.
-            }
-            else if (props.allowsCustomValue) {
-                const inputValue = inputRef?.current?.value;
-                const item = [...state.collection].find((item) => item.textValue.toLowerCase() === inputValue?.toLowerCase());
-                props.onSelectionChange?.(item ? item.key : inputRef?.current?.value ?? '');
-            }
-        }
-    });
-    let onBlur = useEvent((e) => {
-        // If the input value is not in the collection, we need to reset the value.
-        if (!props.allowsCustomValue &&
-            inputRef.current?.value &&
-            ![...state.collection]
-                .map((i) => i.textValue)
-                .includes(inputRef.current?.value)) {
-            props.onSelectionChange?.(null);
-        }
-    });
-    useEffect(() => {
-        inputRef.current?.addEventListener('keydown', onKeyPress, true);
-        inputRef.current?.addEventListener('blur', onBlur, true);
-        return () => {
-            inputRef.current?.removeEventListener('keydown', onKeyPress, true);
-            inputRef.current?.removeEventListener('blur', onBlur, true);
-        };
-    }, []);
-    let allInputProps = useMemo(() => mergeProps(inputProps, hoverProps, focusProps), [inputProps, hoverProps, focusProps]);
-    let comboBoxField = (_jsxs(LegacyComboBoxWrapperElement, { ref: wrapperRef, qa: qa || 'LegacyComboBox', mods: mods, styles: wrapperStyles, style: {
-            zIndex: isFocused ? 1 : 'initial',
-        }, "data-size": size, children: [prefix ? _jsx("div", { "data-element": "Prefix", children: prefix }) : null, _jsx(InputElement, { ref: inputRef, qa: "Input", autoFocus: autoFocus, "data-autofocus": autoFocus ? '' : undefined, ...allInputProps, autoComplete: autoComplete, styles: inputStyles, mods: mods, "data-size": size }), _jsxs("div", { "data-element": "Suffix", children: [suffixPosition === 'before' ? suffix : null, validationState || isLoading ? (_jsxs(_Fragment, { children: [validationState && !isLoading ? validation : null, isLoading ? _jsx(LoadingIcon, {}) : null] })) : null, suffixPosition === 'after' ? suffix : null, showClearButton && (_jsx(ItemAction, { icon: _jsx(CloseIcon, {}), size: size, theme: validationState === 'invalid' ? 'danger' : undefined, qa: "LegacyComboBoxClearButton", "data-no-trigger": hideTrigger ? '' : undefined, onPress: clearValue })), !hideTrigger ? (_jsx(TriggerElement, { "data-popover-trigger": true, qa: "LegacyComboBoxTrigger", ...mergeProps(buttonProps, triggerFocusProps, triggerHoverProps), ref: triggerRef, mods: {
-                            pressed: isTriggerPressed,
-                            focused: isTriggerFocused,
-                            hovered: isTriggerHovered,
-                            disabled: isDisabled,
-                            loading: isLoading,
-                        }, "data-size": size, isDisabled: isDisabled, styles: triggerStyles, children: _jsx(DownIcon, {}) })) : null] }), _jsx(OverlayWrapper, { isOpen: state.isOpen && !isDisabled, children: _jsx(ListBoxPopup, { ...listBoxProps, shouldUseVirtualFocus: true, listBoxRef: listBoxRef, popoverRef: popoverRef, overlayProps: overlayProps, placement: placement, state: state, listBoxStyles: listBoxStyles, overlayStyles: overlayStyles, optionStyles: optionStyles, minWidth: comboBoxWidth, triggerRef: triggerRef }) })] }));
-    return wrapWithField(comboBoxField, ref, mergeProps({ ...props, styles }, { labelProps }));
-});
-const LegacyComboBoxSectionComponent = Object.assign(BaseSection, {
-    displayName: 'Section',
-});
-LegacyComboBox.Item = Item;
-LegacyComboBox.Section = LegacyComboBoxSectionComponent;
-Object.defineProperty(LegacyComboBox, 'cubeInputType', {
-    value: 'LegacyComboBox',
-    enumerable: false,
-    configurable: false,
-});
-
-        

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

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

package/es/utils/transitions.js

@@ -1,63 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.85.0
- * Released under the MIT license.
- */
-
-const DIRECTION_MAP = {
-    initial: 'top center',
-    top: 'bottom center',
-    right: 'center left',
-    left: 'center right',
-    bottom: 'top center',
-};
-const TRANSLATE_MAP = {
-    initial: 'translate(0px, calc(-1 * var(--overlay-offset)))',
-    top: 'translate(0px, calc(1 * var(--overlay-offset)))',
-    right: 'translate(calc(-1 * var(--overlay-offset)), 0px)',
-    left: 'translate(calc(1 * var(--overlay-offset)), 0px)',
-    bottom: 'translate(0px, calc(-1 * var(--overlay-offset)))',
-};
-export const getOverlayTransitionCSS = ({ suffix = '', placement = 'initial', minScale = 0.8, minOffset = '8px', } = {}) => `
-  &${suffix} {
-    transform: var(--overlay-position);
-    transform-origin: ${DIRECTION_MAP[placement]};
-    --overlay-offset: ${minOffset};
-    --overlay-hidden-x-scale: ${placement === 'top' || placement === 'bottom' || placement === 'initial'
-    ? '1'
-    : minScale};
-    --overlay-hidden-y-scale: ${placement === 'left' || placement === 'right' ? '1' : minScale};
-    --overlay-translate-visible: translate(0px, 0px);
-    --overlay-translate-hidden: ${TRANSLATE_MAP[placement]};
-    --overlay-transition: 120ms;
-    --overlay-hidden-scale: scale(var(--overlay-hidden-x-scale), var(--overlay-hidden-y-scale));
-    --overlay-normal-scale: scale(1, 1);
-  }
-
-  &.cube-overlay-transition-enter${suffix} {
-    opacity: 0;
-    transform: var(--overlay-translate-hidden) var(--overlay-hidden-scale);
-  }
-
-  &.cube-overlay-transition-enter-active${suffix} {
-    opacity: 1;
-    transform: var(--overlay-translate-visible) var(--overlay-normal-scale);
-    transition: transform var(--overlay-transition) cubic-bezier(0, .66, 0, .66), opacity var(--overlay-transition) cubic-bezier(0, .66, 0, .66);
-    pointer-events: none;
-  }
-
-  &.cube-overlay-transition-exit${suffix} {
-    opacity: 1;
-    transform: var(--overlay-translate-visible) var(--overlay-normal-scale);
-  }
-
-  &.cube-overlay-transition-exit-active${suffix} {
-    opacity: 0;
-    transform: var(--overlay-translate-hidden) var(--overlay-hidden-scale);
-    pointer-events: none;
-    transition: transform var(--overlay-transition) cubic-bezier(.66, 0, .66, 0), opacity var(--overlay-transition) cubic-bezier(.66, 0, .66, 0);
-  }
-`;
-
-        

package/types/components/fields/LegacyComboBox/LegacyComboBox.d.ts

@@ -1,49 +0,0 @@
-import { ForwardedRef, ReactElement, RefObject } from 'react';
-import { AriaComboBoxProps, AriaTextFieldProps } from 'react-aria';
-import { Section as BaseSection } from 'react-stately';
-import { FieldBaseProps } from '../../../shared';
-import { Item } from '../../Item';
-import type { KeyboardDelegate, LoadingState } from '@react-types/shared';
-import type { CubeSelectBaseProps } from '../Select';
-type FilterFn = (textValue: string, inputValue: string) => boolean;
-export type MenuTriggerAction = 'focus' | 'input' | 'manual';
-export interface CubeLegacyComboBoxProps<T> extends Omit<CubeSelectBaseProps<T>, 'onOpenChange' | 'onBlur' | 'onFocus' | 'validate' | 'onSelectionChange'>, Omit<AriaComboBoxProps<T>, 'errorMessage'>, Omit<AriaTextFieldProps, 'errorMessage'>, FieldBaseProps {
-    defaultSelectedKey?: string | null;
-    selectedKey?: string | null;
-    onSelectionChange?: (selectedKey: string | null) => void;
-    onInputChange?: (inputValue: string) => void;
-    inputValue?: string;
-    placeholder?: string;
-    icon?: ReactElement;
-    multiLine?: boolean;
-    autoComplete?: string;
-    wrapperRef?: RefObject<HTMLDivElement>;
-    inputRef?: RefObject<HTMLInputElement>;
-    /** The ref for the list box popover. */
-    popoverRef?: RefObject<HTMLDivElement>;
-    /** The ref for the list box. */
-    listBoxRef?: RefObject<HTMLElement>;
-    /** An optional keyboard delegate implementation, to override the default. */
-    keyboardDelegate?: KeyboardDelegate;
-    loadingState?: LoadingState;
-    /**
-     * The filter function used to determine if a option should be included in the combo box list.
-     * Has no effect when `items` is provided.
-     */
-    filter?: FilterFn;
-    size?: 'small' | 'medium' | 'large' | (string & {});
-    suffixPosition?: 'before' | 'after';
-    menuTrigger?: MenuTriggerAction;
-    allowsCustomValue?: boolean;
-    /** Whether the combo box is clearable using ESC keyboard button or clear button inside the input */
-    isClearable?: boolean;
-    /** Callback called when the clear button is pressed */
-    onClear?: () => void;
-}
-export declare const LegacyComboBox: (<T>(props: CubeLegacyComboBoxProps<T> & {
-    ref?: ForwardedRef<HTMLDivElement>;
-}) => ReactElement) & {
-    Item: typeof Item;
-    Section: typeof BaseSection;
-};
-export {};

package/types/components/fields/LegacyComboBox/index.d.ts

@@ -1 +0,0 @@
-export * from './LegacyComboBox';

package/types/utils/transitions.d.ts

@@ -1,8 +0,0 @@
-export interface OverlayTransitionCSSProps {
-    suffix?: string;
-    placement?: string;
-    minScale?: string | number;
-    minOffset?: string;
-    forChild?: boolean;
-}
-export declare const getOverlayTransitionCSS: ({ suffix, placement, minScale, minOffset, }?: OverlayTransitionCSSProps) => string;