@cube-dev/ui-kit 0.73.1 → 0.74.0

package/es/tasty/tasty.js

@@ -1,12 +1,12 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.73.1
+ * @cube-dev/ui-kit v0.74.0
  * Released under the MIT license.
  */
 
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef, useContext, useMemo } from 'react';
+import { createElement, forwardRef, useContext, useMemo, } from 'react';
 import { isValidElementType } from 'react-is';
 import styledComponents, { createGlobalStyle } from 'styled-components';
 import { BreakpointsContext } from './providers/BreakpointsProvider';
@@ -18,56 +18,71 @@ import { modAttrs } from './utils/modAttrs';
 import { renderStyles } from './utils/renderStyles';
 import { pointsToZones } from './utils/responsive';
 // Implementation
-function tasty(Component, options) {
+export function tasty(Component, options) {
     if (typeof Component === 'string') {
-        let selector = Component;
-        let styles = options;
-        let Element = createGlobalStyle `${({ $css }) => $css}`;
-        const _StyleDeclarationComponent = ({ breakpoints, }) => {
-            let contextBreakpoints = useContext(BreakpointsContext);
-            breakpoints = breakpoints ?? contextBreakpoints;
-            const breakpointsHash = breakpoints.join(',');
-            let css = useMemo(() => styles
-                ? `\n{}${selector}{${renderStyles(styles, pointsToZones(breakpoints || [980]))}}`
-                : '', [breakpointsHash]);
-            return _jsx(Element, { "$css": css });
-        };
-        _StyleDeclarationComponent.displayName = `TastyStyleDeclaration(${Component})`;
-        return _StyleDeclarationComponent;
+        return tastyGlobal(Component, options);
     }
     if (isValidElementType(Component)) {
-        let { as: extendTag, element: extendElement, ...defaultProps } = options ?? {};
-        let propsWithStyles = ['styles'].concat(Object.keys(defaultProps).filter((prop) => prop.endsWith('Styles')));
-        let _WrappedComponent = forwardRef((props, ref) => {
-            const { as, element, ...restProps } = props;
-            const propsWithStylesValues = propsWithStyles.map((prop) => props[prop]);
-            const mergedStylesMap = useMemo(() => {
-                return propsWithStyles.reduce((map, prop) => {
-                    if (restProps[prop] != null && defaultProps[prop] != null) {
-                        map[prop] = mergeStyles(defaultProps[prop], restProps[prop]);
-                    }
-                    else {
-                        map[prop] = restProps[prop] || defaultProps[prop];
-                    }
-                    return map;
-                }, {});
-            }, [propsWithStylesValues]);
-            return (_jsx(Component, { ref: ref, ...defaultProps, ...restProps, ...mergedStylesMap, as: as ?? extendTag, element: element || extendElement }));
-        });
-        _WrappedComponent.displayName = `TastyWrappedComponent(${getDisplayName(Component, defaultProps.qa ?? extendTag ?? 'Anonymous')})`;
-        return _WrappedComponent;
+        return tastyWrap(Component, options);
     }
-    const tastyOptions = Component;
+    return tastyElement(Component);
+}
+// Internal specialized implementations
+function tastyGlobal(selector, styles) {
+    let Element = createGlobalStyle `${({ $css }) => $css}`;
+    const _StyleDeclarationComponent = ({ breakpoints, }) => {
+        let contextBreakpoints = useContext(BreakpointsContext);
+        const breakpointsList = (breakpoints ?? contextBreakpoints) || [980];
+        const breakpointsHash = breakpointsList.join(',');
+        let css = useMemo(() => {
+            if (!styles)
+                return '';
+            return `\n{}${selector}{${renderStyles(styles, pointsToZones(breakpointsList))}}`;
+        }, [breakpointsHash]);
+        return _jsx(Element, { "$css": css });
+    };
+    _StyleDeclarationComponent.displayName = `TastyStyleDeclaration(${selector})`;
+    return _StyleDeclarationComponent;
+}
+function tastyWrap(Component, options) {
+    let { as: extendTag, element: extendElement, ...defaultProps } = (options ?? {});
+    let propsWithStyles = ['styles'].concat(Object.keys(defaultProps).filter((prop) => prop.endsWith('Styles')));
+    const _WrappedComponent = forwardRef((props, ref) => {
+        const { as, element, ...restProps } = props;
+        const propsWithStylesValues = propsWithStyles.map((prop) => props[prop]);
+        const mergedStylesMap = useMemo(() => {
+            return propsWithStyles.reduce((map, prop) => {
+                const restValue = restProps[prop];
+                const defaultValue = defaultProps[prop];
+                if (restValue != null && defaultValue != null) {
+                    map[prop] = mergeStyles(defaultValue, restValue);
+                }
+                else {
+                    map[prop] = restValue ?? defaultValue;
+                }
+                return map;
+            }, {});
+        }, [propsWithStylesValues]);
+        const elementProps = {
+            ...defaultProps,
+            ...restProps,
+            ...mergedStylesMap,
+            as: as ?? extendTag,
+            element: element || extendElement,
+            ref,
+        };
+        return createElement(Component, elementProps);
+    });
+    _WrappedComponent.displayName = `TastyWrappedComponent(${getDisplayName(Component, defaultProps.qa ?? extendTag ?? 'Anonymous')})`;
+    return _WrappedComponent;
+}
+function tastyElement(tastyOptions) {
     let { as: originalAs = 'div', element: defaultElement, styles: defaultStyles, styleProps, variants, ...defaultProps } = tastyOptions;
     let _TastyComponent;
     if (variants) {
-        /**
-         * Create a tasty component for each variant.
-         * Then return a component that receives a `variant` and chooses the right component.
-         */
-        const variantComponents = Object.keys(variants).reduce((map, variant) => {
-            const variantStyles = variants?.[variant];
-            map[variant] = tasty({
+        const variantEntries = Object.entries(variants);
+        const variantComponents = variantEntries.reduce((map, [variant, variantStyles]) => {
+            map[variant] = tastyElement({
                 as: originalAs,
                 styles: mergeStyles(defaultStyles, variantStyles),
                 styleProps,
@@ -76,7 +91,7 @@ function tasty(Component, options) {
             return map;
         }, {});
         if (!variantComponents['default']) {
-            variantComponents['default'] = tasty({
+            variantComponents['default'] = tastyElement({
                 as: originalAs,
                 styles: defaultStyles,
                 styleProps,
@@ -86,13 +101,14 @@ function tasty(Component, options) {
         // eslint-disable-next-line react/display-name
         _TastyComponent = forwardRef((allProps, ref) => {
             const { variant, ...restProps } = allProps;
-            const Component = (variantComponents[variant] ||
-                variantComponents['default']);
-            return (_jsx(Component
-            // @ts-ignore
-            , { 
-                // @ts-ignore
-                ref: ref, ...restProps }));
+            const Component = variantComponents[variant || 'default'] ??
+                variantComponents['default'];
+            const componentProps = restProps;
+            const elementProps = {
+                ...componentProps,
+                ref,
+            };
+            return createElement(Component, elementProps);
         });
     }
     else {
@@ -101,56 +117,62 @@ function tasty(Component, options) {
          * An additional optimization that allows to avoid rendering styles across various instances
          * of the same element if no custom styles are provided via `styles` prop or direct style props.
          */
-        const renderDefaultStyles = cacheWrapper((breakpoints) => {
-            return renderStyles(defaultStyles || {}, pointsToZones(breakpoints));
-        });
+        const renderDefaultStyles = cacheWrapper((breakpoints) => renderStyles(defaultStyles || {}, pointsToZones(breakpoints)));
         let { qa: defaultQa, qaVal: defaultQaVal, ...otherDefaultProps } = defaultProps ?? {};
         // eslint-disable-next-line react/display-name
         _TastyComponent = forwardRef((allProps, ref) => {
-            let { as, styles, variant, breakpoints, mods, element, qa, qaVal, ...otherProps } = allProps;
+            let { as, styles, variant: _omitVariant, breakpoints, mods, element, qa, qaVal, ...otherProps } = allProps;
             let propStyles = (styleProps
                 ? styleProps.concat(BASE_STYLES)
                 : BASE_STYLES).reduce((map, prop) => {
-                if (prop in otherProps) {
-                    map[prop] = otherProps[prop];
-                    delete otherProps[prop];
+                const key = prop;
+                if (Object.prototype.hasOwnProperty.call(otherProps, key)) {
+                    map[key] = otherProps[key];
+                    delete otherProps[key];
                 }
                 return map;
             }, {});
             if (Object.keys(propStyles).length === 0) {
                 propStyles = null;
             }
-            if (!styles || (styles && Object.keys(styles).length === 0)) {
+            if (!styles ||
+                (styles && Object.keys(styles).length === 0)) {
                 styles = undefined;
             }
             const propStylesCacheKey = JSON.stringify(propStyles);
-            const stylesCacheKey = useMemo(() => {
-                return JSON.stringify(styles);
-            }, [styles]);
+            const stylesCacheKey = useMemo(() => JSON.stringify(styles), [styles]);
             const useDefaultStyles = !propStyles && !styles;
-            const styleCacheKey = useMemo(() => {
-                return `${styles ? JSON.stringify(styles) : ''}.${propStyles ? JSON.stringify(propStyles) : ''}`;
-            }, [propStylesCacheKey, stylesCacheKey]);
+            const styleCacheKey = useMemo(() => `${styles ? JSON.stringify(styles) : ''}.${propStyles ? JSON.stringify(propStyles) : ''}`, [propStylesCacheKey, stylesCacheKey]);
             let allStyles = useMemo(() => useDefaultStyles
                 ? defaultStyles
                 : mergeStyles(defaultStyles, styles, propStyles), [styleCacheKey]);
             let contextBreakpoints = useContext(BreakpointsContext);
             breakpoints = breakpoints ?? contextBreakpoints;
-            let renderedStyles = useMemo(() => {
-                return useDefaultStyles
-                    ? renderDefaultStyles(breakpoints)
-                    : renderStyles(allStyles, pointsToZones(breakpoints));
-            }, [allStyles, breakpoints]);
+            let renderedStyles = useMemo(() => useDefaultStyles
+                ? renderDefaultStyles(breakpoints)
+                : renderStyles(allStyles, pointsToZones(breakpoints)), [allStyles, breakpoints?.join(',')]);
+            let modProps;
             if (mods) {
-                Object.assign(otherProps, modAttrs(mods));
+                const modsObject = mods;
+                modProps = modAttrs(modsObject);
             }
-            return (_jsx(Element, { as: as ?? originalAs, "data-element": element || defaultElement, "data-qa": qa || defaultQa, "data-qaval": qaVal || defaultQaVal, ...otherDefaultProps, ...otherProps, ref: ref, "$css": renderedStyles }));
+            const elementProps = {
+                as: as ?? originalAs,
+                'data-element': element || defaultElement,
+                'data-qa': qa || defaultQa,
+                'data-qaval': qaVal || defaultQaVal,
+                ...otherDefaultProps,
+                ...otherProps,
+                ...(modProps || {}),
+                ref,
+                $css: renderedStyles,
+            };
+            return createElement(Element, elementProps);
         });
     }
     _TastyComponent.displayName = `TastyComponent(${defaultProps.qa || originalAs})`;
     return _TastyComponent;
 }
-const Element = tasty({});
-export { tasty, Element };
+export const Element = tasty({});
 
         

package/es/tasty/types.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.73.1
+ * @cube-dev/ui-kit v0.74.0
  * Released under the MIT license.
  */
 

package/es/tasty/utils/cache-wrapper.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.73.1
+ * @cube-dev/ui-kit v0.74.0
  * Released under the MIT license.
  */
 

package/es/tasty/utils/case-converter.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.73.1
+ * @cube-dev/ui-kit v0.74.0
  * Released under the MIT license.
  */
 

package/es/tasty/utils/colors.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.73.1
+ * @cube-dev/ui-kit v0.74.0
  * Released under the MIT license.
  */
 

package/es/tasty/utils/dotize.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.73.1
+ * @cube-dev/ui-kit v0.74.0
  * Released under the MIT license.
  */
 

package/es/tasty/utils/filterBaseProps.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.73.1
+ * @cube-dev/ui-kit v0.74.0
  * Released under the MIT license.
  */
 

package/es/tasty/utils/getDisplayName.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.73.1
+ * @cube-dev/ui-kit v0.74.0
  * Released under the MIT license.
  */
 

package/es/tasty/utils/getModCombinations.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.73.1
+ * @cube-dev/ui-kit v0.74.0
  * Released under the MIT license.
  */
 

package/es/tasty/utils/mergeStyles.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.73.1
+ * @cube-dev/ui-kit v0.74.0
  * Released under the MIT license.
  */
 

package/es/tasty/utils/modAttrs.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.73.1
+ * @cube-dev/ui-kit v0.74.0
  * Released under the MIT license.
  */
 

package/es/tasty/utils/renderStyles.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.73.1
+ * @cube-dev/ui-kit v0.74.0
  * Released under the MIT license.
  */
 

package/es/tasty/utils/responsive.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.73.1
+ * @cube-dev/ui-kit v0.74.0
  * Released under the MIT license.
  */
 

package/es/tasty/utils/string.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.73.1
+ * @cube-dev/ui-kit v0.74.0
  * Released under the MIT license.
  */
 

package/es/tasty/utils/styles.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.73.1
+ * @cube-dev/ui-kit v0.74.0
  * Released under the MIT license.
  */
 

package/es/tasty/utils/warnings.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.73.1
+ * @cube-dev/ui-kit v0.74.0
  * Released under the MIT license.
  */
 

package/es/tokens.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.73.1
+ * @cube-dev/ui-kit v0.74.0
  * Released under the MIT license.
  */
 

package/es/type-checks.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.73.1
+ * @cube-dev/ui-kit v0.74.0
  * Released under the MIT license.
  */
 

package/es/utils/ResizeSensor.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.73.1
+ * @cube-dev/ui-kit v0.74.0
  * Released under the MIT license.
  */
 

package/es/utils/modules.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.73.1
+ * @cube-dev/ui-kit v0.74.0
  * Released under the MIT license.
  */
 

package/es/utils/promise.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.73.1
+ * @cube-dev/ui-kit v0.74.0
  * Released under the MIT license.
  */
 

package/es/utils/random.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.73.1
+ * @cube-dev/ui-kit v0.74.0
  * Released under the MIT license.
  */
 

package/es/utils/range.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.73.1
+ * @cube-dev/ui-kit v0.74.0
  * Released under the MIT license.
  */
 

package/es/utils/react/Slots.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.73.1
+ * @cube-dev/ui-kit v0.74.0
  * Released under the MIT license.
  */
 

package/es/utils/react/chain.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.73.1
+ * @cube-dev/ui-kit v0.74.0
  * Released under the MIT license.
  */
 

package/es/utils/react/forwardRefWithGenerics.js

@@ -0,0 +1,36 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.74.0
+ * 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

@@ -1,11 +1,12 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.73.1
+ * @cube-dev/ui-kit v0.74.0
  * Released under the MIT license.
  */
 
 export { chain } from './chain';
+export { forwardRefWithGenerics } from './forwardRefWithGenerics';
 export { isTextOnly } from './isTextOnly';
 export { mergeProps } from './mergeProps';
 export { modAttrs } from '../../tasty';

package/es/utils/react/interactions.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.73.1
+ * @cube-dev/ui-kit v0.74.0
  * Released under the MIT license.
  */
 

package/es/utils/react/isTextOnly.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.73.1
+ * @cube-dev/ui-kit v0.74.0
  * Released under the MIT license.
  */
 

package/es/utils/react/mapProps.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.73.1
+ * @cube-dev/ui-kit v0.74.0
  * Released under the MIT license.
  */
 

package/es/utils/react/mergeProps.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.73.1
+ * @cube-dev/ui-kit v0.74.0
  * Released under the MIT license.
  */
 

package/es/utils/react/nullableValue.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.73.1
+ * @cube-dev/ui-kit v0.74.0
  * Released under the MIT license.
  */
 

package/es/utils/react/sharedStore.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.73.1
+ * @cube-dev/ui-kit v0.74.0
  * Released under the MIT license.
  */
 

package/es/utils/react/useCombinedRefs.js

@@ -1,13 +1,13 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.73.1
+ * @cube-dev/ui-kit v0.74.0
  * Released under the MIT license.
  */
 
 import { useEffect, useRef } from 'react';
 export function useCombinedRefs(...refs) {
-    const targetRef = useRef();
+    const targetRef = useRef(null);
     useEffect(() => {
         refs.forEach((ref) => {
             if (!ref)

package/es/utils/react/useControlledFocusVisible.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.73.1
+ * @cube-dev/ui-kit v0.74.0
  * Released under the MIT license.
  */
 

package/es/utils/react/useEventBus.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.73.1
+ * @cube-dev/ui-kit v0.74.0
  * Released under the MIT license.
  */
 

package/es/utils/react/useId.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.73.1
+ * @cube-dev/ui-kit v0.74.0
  * Released under the MIT license.
  */
 

package/es/utils/react/useIsDarwin.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.73.1
+ * @cube-dev/ui-kit v0.74.0
  * Released under the MIT license.
  */