@cube-dev/ui-kit 0.0.0-canary-855d62e → 0.0.0-canary-29fafcf

package/es/utils/raf.js

@@ -0,0 +1,47 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.0.0-canary-29fafcf
+ * Released under the MIT license.
+ */
+
+/**
+ * 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 function chainRaf(callback, count = 1) {
+    let rafId = null;
+    let cancelled = false;
+    const scheduleNext = (remaining) => {
+        if (cancelled)
+            return;
+        if (remaining <= 0) {
+            callback();
+            return;
+        }
+        rafId = requestAnimationFrame(() => {
+            scheduleNext(remaining - 1);
+        });
+    };
+    scheduleNext(count);
+    return () => {
+        cancelled = true;
+        if (rafId !== null) {
+            cancelAnimationFrame(rafId);
+        }
+    };
+}
+
+        

package/es/utils/random.js

@@ -0,0 +1,20 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.0.0-canary-29fafcf
+ * Released under the MIT license.
+ */
+
+export function random(min, max) {
+    const realMin = min < max ? min : max;
+    const realMax = min < max ? max : min;
+    return realMin + Math.random() * (realMax - realMin);
+}
+/**
+ * Generates a unique random ID using current timestamp and random number
+ */
+export function generateRandomId() {
+    return `${Date.now()}-${Math.random().toString(36).substring(2, 11)}`;
+}
+
+        

package/es/utils/range.js

@@ -0,0 +1,12 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.0.0-canary-29fafcf
+ * Released under the MIT license.
+ */
+
+export function range(count) {
+    return Array.from({ length: count }, (_, i) => i);
+}
+
+        

package/es/utils/react/RenderCache.js

@@ -0,0 +1,38 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.0.0-canary-29fafcf
+ * Released under the MIT license.
+ */
+
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { useRef } from 'react';
+/**
+ * RenderCache optimizes rendering of item lists by reusing
+ * previously rendered elements for unchanged items.
+ */
+export function RenderCache({ items, renderKeys, getKey, children, }) {
+    // Store previous renders
+    const cacheRef = useRef(new Map());
+    const rendered = items.map((item) => {
+        const key = getKey(item);
+        const shouldRerender = renderKeys.includes(key);
+        const cached = cacheRef.current.get(key);
+        if (!cached || shouldRerender) {
+            const element = children(item);
+            cacheRef.current.set(key, element);
+            return element;
+        }
+        return cached;
+    });
+    // Optionally clean up cache for items no longer present
+    const currentKeys = new Set(items.map(getKey));
+    for (const key of cacheRef.current.keys()) {
+        if (!currentKeys.has(key)) {
+            cacheRef.current.delete(key);
+        }
+    }
+    return _jsx(_Fragment, { children: rendered });
+}
+
+        

package/es/utils/react/Slots.js

@@ -0,0 +1,43 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.0.0-canary-29fafcf
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Children, cloneElement, createContext, useContext, useMemo, } from 'react';
+import { mergeProps } from './mergeProps.js';
+const INITIAL_VALUE = {};
+let SlotContext = createContext(INITIAL_VALUE);
+export function useSlotProps(props, defaultSlot) {
+    let slot = props.slot || defaultSlot;
+    let allSlots = useContext(SlotContext) ?? INITIAL_VALUE;
+    let slotProps = allSlots[slot];
+    return mergeProps(slotProps, props);
+}
+export function SlotProvider(props) {
+    let parentSlots = useContext(SlotContext) ?? INITIAL_VALUE;
+    let { slots = {}, children } = props;
+    // Merge props for each slot from parent context and props
+    let value = useMemo(() => Object.keys(parentSlots)
+        .concat(Object.keys(slots))
+        .reduce((o, p) => ({
+        ...o,
+        [p]: mergeProps(parentSlots[p] ?? {}, slots[p] ?? {}),
+    }), {}), [parentSlots, slots]);
+    return _jsx(SlotContext.Provider, { value: value, children: children });
+}
+export function ClearSlots(props) {
+    const { children, ...otherProps } = props;
+    let content = children;
+    if (Children.toArray(children).length <= 1) {
+        if (typeof children === 'function') {
+            // need to know if the node is a string or something else that react can render that doesn't get props
+            content = cloneElement(Children.only(children), otherProps);
+        }
+    }
+    return (_jsx(SlotContext.Provider, { value: INITIAL_VALUE, children: content }));
+}
+
+        

package/es/utils/react/chain.js

@@ -0,0 +1,21 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.0.0-canary-29fafcf
+ * Released under the MIT license.
+ */
+
+/**
+ * Calls all functions in the order they were chained with the same arguments.
+ */
+export function chain(...callbacks) {
+    return (...args) => {
+        for (let callback of callbacks) {
+            if (typeof callback === 'function') {
+                callback(...args);
+            }
+        }
+    };
+}
+
+        

package/es/utils/react/forwardRefWithGenerics.js

@@ -0,0 +1,36 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.0.0-canary-29fafcf
+ * Released under the MIT license.
+ */
+
+/**
+ * A helper for creating forwardRef components with generic types.
+ * This solves the issue where React's forwardRef doesn't work well with generic components,
+ * especially when props include required children from CollectionBase<T> or similar types.
+ *
+ * @example
+ * ```tsx
+ * function MySelect<T extends object>(
+ *   props: MySelectProps<T>,
+ *   ref: DOMRef<HTMLDivElement>
+ * ) {
+ *   // component implementation
+ *   return <div ref={ref}>...</div>;
+ * }
+ *
+ * const MySelectWithRef = forwardRefWithGenerics(MySelect);
+ *
+ * // Usage:
+ * <MySelectWithRef<ItemType> items={items} ref={myRef} />
+ * ```
+ */
+export function forwardRefWithGenerics(component) {
+    return function ComponentWithRef(props) {
+        const { ref = null, ...otherProps } = props;
+        return component(otherProps, ref);
+    };
+}
+
+        

package/es/utils/react/index.js

@@ -0,0 +1,26 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.0.0-canary-29fafcf
+ * Released under the MIT license.
+ */
+
+export { chain } from './chain.js';
+export { forwardRefWithGenerics } from './forwardRefWithGenerics.js';
+export { isTextOnly } from './isTextOnly.js';
+export { mergeProps } from './mergeProps.js';
+export { modAttrs } from '../../tasty/index.js';
+export { useSlotProps, SlotProvider, ClearSlots } from './Slots.js';
+export { useLayoutEffect } from './useLayoutEffect.js';
+export { useCombinedRefs, mergeRefs } from './useCombinedRefs.js';
+export { wrapNodeIfPlain } from './wrapNodeIfPlain.js';
+export { useViewportSize } from './useViewportSize.js';
+export { useQaProps } from './useQaProps.js';
+export { useEventBus, useEventListener, EventBusProvider } from './useEventBus.js';
+export { useControlledFocusVisible } from './useControlledFocusVisible.js';
+export { RenderCache } from './RenderCache.js';
+export { useLocalStorage } from './useLocalStorage.js';
+export { resolveIcon } from './resolveIcon.js';
+export { useMergeStyles } from './useMergeStyles.js';
+
+        

package/es/utils/react/interactions.js

@@ -0,0 +1,27 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.0.0-canary-29fafcf
+ * Released under the MIT license.
+ */
+
+import { useEffect, useState } from 'react';
+import { useFocus as reactAriaUseFocus, useFocusVisible } from 'react-aria';
+export function useFocus({ isDisabled }, onlyVisible = false) {
+    useEffect(() => {
+        setIsFocused(false);
+    }, [isDisabled]);
+    let [isFocused, setIsFocused] = useState(false);
+    let { isFocusVisible } = useFocusVisible({});
+    let { focusProps } = reactAriaUseFocus({
+        isDisabled,
+        // @ts-ignore
+        onFocusChange: setIsFocused,
+    });
+    return {
+        focusProps,
+        isFocused: isFocused && (onlyVisible ? isFocusVisible : true),
+    };
+}
+
+        

package/es/utils/react/isTextOnly.js

@@ -0,0 +1,13 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.0.0-canary-29fafcf
+ * Released under the MIT license.
+ */
+
+import { Children, isValidElement } from 'react';
+export function isTextOnly(children) {
+    return Children.toArray(children).every((c) => !isValidElement(c));
+}
+
+        

package/es/utils/react/mapProps.js

@@ -0,0 +1,25 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.0.0-canary-29fafcf
+ * Released under the MIT license.
+ */
+
+/** Converts AriaButtonProps to CubeButtonProps */
+export function ariaToCubeButtonProps(props) {
+    const { type, ...filteredProps } = props;
+    return {
+        ...filteredProps,
+        htmlType: type,
+    };
+}
+/** Converts CubeButtonProps to AriaButtonProps */
+export function cubeToAriaButtonProps(props) {
+    const { htmlType, ...filteredProps } = props;
+    return {
+        ...filteredProps,
+        type: htmlType,
+    };
+}
+
+        

package/es/utils/react/mergeProps.js

@@ -0,0 +1,65 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.0.0-canary-29fafcf
+ * Released under the MIT license.
+ */
+
+import clsx from 'clsx';
+import { mergeStyles } from '../../tasty/index.js';
+import { chain } from './chain.js';
+import { mergeIds } from './useId.js';
+/**
+ * Merges multiple props objects together. Event handlers are chained,
+ * classNames are combined, and ids are deduplicated - different ids
+ * will trigger a side-effect and re-render components hooked up with `useId`.
+ * For all other props, the last prop object overrides all previous ones.
+ * @param args - Multiple sets of props to merge together.
+ */
+export function mergeProps(...args) {
+    let result = {};
+    for (let props of args) {
+        for (let key in result) {
+            // Chain events
+            if (/^on[A-Z]/.test(key) &&
+                typeof result[key] === 'function' &&
+                props &&
+                typeof props[key] === 'function') {
+                result[key] = chain(result[key], props[key]);
+                // Merge classnames, sometimes classNames are empty string which eval to false, so we just need to do a type check
+            }
+            else if (key === 'className' &&
+                typeof result.className === 'string' &&
+                props &&
+                typeof props.className === 'string') {
+                result[key] = clsx(result.className, props.className);
+            }
+            else if ((key === 'styles' || key.endsWith('Styles')) &&
+                typeof result.styles === 'object' &&
+                props &&
+                typeof props.styles === 'object') {
+                result[key] = mergeStyles(result[key], props[key]);
+            }
+            else if (key === 'mods' && result.mods && props?.mods) {
+                result.mods = { ...result.mods, ...props?.mods };
+            }
+            else if (key === 'id' && result.id && props?.id) {
+                result.id = mergeIds(result.id, props?.id);
+                // Override others
+            }
+            else {
+                result[key] =
+                    props && props[key] !== undefined ? props[key] : result[key];
+            }
+        }
+        // Add props from b that are not in a
+        for (let key in props) {
+            if (result[key] === undefined) {
+                result[key] = props[key];
+            }
+        }
+    }
+    return result;
+}
+
+        

package/es/utils/react/nullableValue.js

@@ -0,0 +1,37 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.0.0-canary-29fafcf
+ * Released under the MIT license.
+ */
+
+export function castNullableStringValue(props) {
+    return castNullableField(props, ['value', 'defaultValue'], 'string', (v) => String(v));
+}
+export function castNullableNumberValue(props) {
+    return castNullableField(props, ['value', 'defaultValue'], 'number', (v) => Number(v));
+}
+export function castNullableArrayValue(props) {
+    return castNullableField(props, ['value', 'defaultValue'], 'object', (v) => Array.isArray(v) ? v : []);
+}
+export function castNullableIsSelected(props) {
+    return castNullableField(props, ['isSelected', 'defaultSelected'], 'boolean', (v) => !!v);
+}
+export function castNullableSelectedKey(props) {
+    return castNullableField(props, ['selectedKey', 'defaultSelectedKey']);
+}
+export function castNullableField(props, keys, type, cast) {
+    props = { ...props };
+    keys.forEach((key) => {
+        if (props[key] === null) {
+            props[key] = undefined;
+        }
+        if (type && cast && props[key] != null && typeof props[key] != type) {
+            props[key] = cast(props[key]);
+            console.warn('Wrong value type in', props, 'in keys', JSON.stringify(keys));
+        }
+    });
+    return props;
+}
+
+        

package/es/utils/react/resolveIcon.js

@@ -0,0 +1,34 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.0.0-canary-29fafcf
+ * Released under the MIT license.
+ */
+
+/**
+ * Resolves a dynamic icon prop to its content and slot state.
+ * - If `true`: empty slot (hasSlot=true, content=null)
+ * - If function: call with mods, then process result
+ * - Otherwise: use as-is
+ */
+export function resolveIcon(icon, mods) {
+    if (icon === undefined || icon === null || icon === false) {
+        return { content: null, hasSlot: false };
+    }
+    if (icon === true) {
+        return { content: null, hasSlot: true };
+    }
+    if (typeof icon === 'function') {
+        const result = icon(mods);
+        if (result === true) {
+            return { content: null, hasSlot: true };
+        }
+        if (result === undefined || result === null || result === false) {
+            return { content: null, hasSlot: false };
+        }
+        return { content: result, hasSlot: true };
+    }
+    return { content: icon, hasSlot: true };
+}
+
+        

package/es/utils/react/sharedStore.js

@@ -0,0 +1,51 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.0.0-canary-29fafcf
+ * Released under the MIT license.
+ */
+
+import { useSyncExternalStore } from 'react';
+import { useEvent } from '../../_internal/hooks/use-event.js';
+/**
+ * Create a shared store that survives hot-reloads.
+ *
+ * Pass a unique `name` once per logical store module:
+ *   export const useSidebarStore = createSharedStore('sidebar', { open: false });
+ */
+export function createSharedStore(name, initialState) {
+    const cacheKey = `__sharedStore_${name}__`;
+    const existing = cacheKey && globalThis[cacheKey];
+    const holder = existing ?? {
+        state: initialState,
+        listeners: new Set(),
+    };
+    /* Warn if someone tries to “re-initialise” with a different value */
+    if (process.env.NODE_ENV === 'development' &&
+        existing &&
+        existing.state !== initialState) {
+        console.warn(`[createSharedStore] Store "${name}" already exists – ` +
+            'the new initialState is ignored to preserve hot-reload state.');
+    }
+    if (cacheKey && !existing) {
+        globalThis[cacheKey] = holder;
+    }
+    const getSnapshot = () => holder.state;
+    const subscribe = (cb) => {
+        holder.listeners.add(cb);
+        return () => holder.listeners.delete(cb);
+    };
+    const setStore = (update) => {
+        holder.state =
+            typeof update === 'function'
+                ? update(holder.state)
+                : update;
+        holder.listeners.forEach((l) => l());
+    };
+    const useSharedStore = () => {
+        return [useSyncExternalStore(subscribe, getSnapshot), useEvent(setStore)];
+    };
+    return useSharedStore;
+}
+
+        

package/es/utils/react/useCombinedRefs.js

@@ -0,0 +1,31 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.0.0-canary-29fafcf
+ * Released under the MIT license.
+ */
+
+import { useEffect, useRef } from 'react';
+export function mergeRefs(...refs) {
+    return (value) => {
+        refs.forEach((ref) => {
+            if (!ref)
+                return;
+            if (typeof ref === 'function') {
+                ref(value);
+            }
+            else {
+                ref.current = value;
+            }
+        });
+    };
+}
+export function useCombinedRefs(...refs) {
+    const targetRef = useRef(null);
+    useEffect(() => {
+        mergeRefs(...refs)(targetRef.current);
+    }, [refs]);
+    return targetRef;
+}
+
+        

package/es/utils/react/useControlledFocusVisible.js

@@ -0,0 +1,42 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.0.0-canary-29fafcf
+ * Released under the MIT license.
+ */
+
+import { useEffect } from 'react';
+import { useFocusVisible } from 'react-aria';
+import { createSharedStore } from './sharedStore.js';
+// Create a shared store for the controlled focus visible state
+const useControlledFocusVisibleStore = createSharedStore('controlledFocusVisible', {
+    isManuallyActivated: false,
+});
+/**
+ * A hook that shares its state using sharedStore and works like useFocusVisible from react-aria,
+ * but also returns activateFocusVisible function that manually switches the state to true
+ * until the original flag is switched to false.
+ */
+export function useControlledFocusVisible() {
+    // Get the original focus visible state from react-aria
+    const { isFocusVisible: originalIsFocusVisible } = useFocusVisible({});
+    // Get the shared store state and setter
+    const [{ isManuallyActivated }, setStore] = useControlledFocusVisibleStore();
+    // Reset manual activation when original focus visible becomes false
+    useEffect(() => {
+        if (!originalIsFocusVisible && isManuallyActivated) {
+            setStore({ isManuallyActivated: false });
+        }
+    }, [originalIsFocusVisible, isManuallyActivated, setStore]);
+    // Function to manually activate focus visible state
+    const activateFocusVisible = () => {
+        setStore({ isManuallyActivated: true });
+    };
+    // Return combined state: true if either original is true OR manually activated
+    return {
+        isFocusVisible: originalIsFocusVisible || isManuallyActivated,
+        activateFocusVisible,
+    };
+}
+
+