@cube-dev/ui-kit 0.8.8 → 0.9.0

package/dist/es/utils/react/useId.js

@@ -0,0 +1,81 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.0
+ * Released under the MIT license.
+ */
+
+import { useEffect, useRef, useState } from 'react';
+import { useLayoutEffect } from './useLayoutEffect';
+import { useSSRSafeId } from '@react-aria/ssr';
+let idsUpdaterMap = new Map();
+/**
+ * If a default is not provided, generate an id.
+ * @param defaultId - Default component id.
+ */
+export function useId(defaultId) {
+    let isRendering = useRef(true);
+    isRendering.current = true;
+    let [value, setValue] = useState(defaultId);
+    let nextId = useRef(null);
+    // don't memo this, we want it new each render so that the Effects always run
+    let updateValue = (val) => {
+        if (!isRendering.current) {
+            setValue(val);
+        }
+        else {
+            nextId.current = val;
+        }
+    };
+    useLayoutEffect(() => {
+        isRendering.current = false;
+    }, [updateValue]);
+    useEffect(() => {
+        let newId = nextId.current;
+        if (newId) {
+            setValue(newId);
+            nextId.current = null;
+        }
+    }, [setValue, updateValue]);
+    let res = useSSRSafeId(value);
+    idsUpdaterMap.set(res, updateValue);
+    return res;
+}
+/**
+ * Merges two ids.
+ * Different ids will trigger a side-effect and re-render components hooked up with `useId`.
+ */
+export function mergeIds(idA, idB) {
+    if (idA === idB) {
+        return idA;
+    }
+    let setIdA = idsUpdaterMap.get(idA);
+    if (setIdA) {
+        setIdA(idB);
+        return idB;
+    }
+    let setIdB = idsUpdaterMap.get(idB);
+    if (setIdB) {
+        setIdB(idA);
+        return idA;
+    }
+    return idB;
+}
+/**
+ * Used to generate an id, and after render, check if that id is rendered so we know
+ * if we can use it in places such as labelledby.
+ */
+export function useSlotId() {
+    let [id, setId] = useState(useId());
+    useLayoutEffect(() => {
+        if (id) {
+            let setCurr = idsUpdaterMap.get(id);
+            if (setCurr && !document.getElementById(id)) {
+                setId(null);
+            }
+        }
+    }, [id]);
+    return id;
+}
+
+        

package/dist/es/utils/react/useLayoutEffect.js

@@ -0,0 +1,14 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.0
+ * Released under the MIT license.
+ */
+
+import * as React from 'react';
+// During SSR, React emits a warning when calling useLayoutEffect.
+// Since neither useLayoutEffect nor useEffect run on the server,
+// we can suppress this by replace it with a noop on the server.
+export const useLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : () => { };
+
+        

package/dist/es/utils/react/wrapNodeIfPlain.js

@@ -0,0 +1,18 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.0
+ * Released under the MIT license.
+ */
+
+import { isValidElement } from 'react';
+import { isFragment } from 'react-is';
+export function wrapNodeIfPlain(children, render) {
+    const childrenIsFragment = children && (Array.isArray(children) || isFragment(children));
+    if (!children || (!childrenIsFragment && isValidElement(children))) {
+        return children;
+    }
+    return render();
+}
+
+        

package/dist/es/utils/renderStyles.js

@@ -0,0 +1,127 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.0
+ * Released under the MIT license.
+ */
+
+import { mediaWrapper, normalizeStyleZones } from './responsive';
+import { createStyle, STYLE_HANDLER_MAP } from '../styles';
+export function isSelector(key) {
+    return key.startsWith('&') || key.startsWith('.') || key.match(/^[A-Z]/);
+}
+function getSelector(key) {
+    if (key.startsWith('&')) {
+        return key.slice(1);
+    }
+    if (key.startsWith('.')) {
+        return ` ${key}`;
+    }
+    if (key.match(/^[A-Z]/)) {
+        return ` [data-element="${key}"]`;
+    }
+    return null;
+}
+/** Props level cache for `renderStyles` function. */
+let STYLE_CACHE = {};
+/** Current size of the cache. */
+let STYLE_CACHE_COUNT = 0;
+/** Cache limit. */
+const CACHE_LIMIT = 1000;
+/**
+ * Render style props to complete Styled Components CSS.
+ * @param styles - Complete style props.
+ * @param responsive - A list of responsive zones
+ * @param {string} [suffix]
+ * @return {string}
+ */
+export function renderStyles(styles, responsive, suffix) {
+    const zones = responsive;
+    const responsiveStyles = Array.from(Array(zones.length)).map(() => '');
+    const cacheKey = JSON.stringify({ s: styles, r: responsive, suffix });
+    let rawStyles = '';
+    const handlerQueue = [];
+    if (!STYLE_CACHE[cacheKey]) {
+        STYLE_CACHE_COUNT++;
+        // clear cache if size is more that the limit
+        if (STYLE_CACHE_COUNT > CACHE_LIMIT) {
+            STYLE_CACHE_COUNT = 0;
+            STYLE_CACHE = {};
+        }
+        const keys = Object.keys(styles);
+        const selectorKeys = keys.filter((key) => isSelector(key));
+        let innerStyles = '';
+        if (selectorKeys.length) {
+            selectorKeys.forEach((key) => {
+                const addSuffix = getSelector(key);
+                innerStyles += renderStyles(styles[key], responsive, addSuffix);
+            });
+        }
+        keys.forEach((styleName) => {
+            if (isSelector(styleName))
+                return;
+            let handlers = STYLE_HANDLER_MAP[styleName];
+            if (!handlers) {
+                handlers = STYLE_HANDLER_MAP[styleName] = [createStyle(styleName)];
+            }
+            handlers.forEach((STYLE) => {
+                if (handlerQueue.find((queueItem) => queueItem.handler === STYLE))
+                    return;
+                let isResponsive = false;
+                const lookupStyles = STYLE.__lookupStyles;
+                const filteredStyleMap = lookupStyles.reduce((map, name) => {
+                    map[name] = styles[name];
+                    if (Array.isArray(map[name])) {
+                        if (map[name].length === 0) {
+                            delete map[name];
+                        }
+                        else {
+                            if (map[name].length === 1) {
+                                map[name] = map[name][0];
+                            }
+                            isResponsive = true;
+                        }
+                    }
+                    return map;
+                }, {});
+                handlerQueue.push({
+                    handler: STYLE,
+                    styleMap: filteredStyleMap,
+                    isResponsive,
+                });
+            });
+        });
+        handlerQueue.forEach(({ handler, styleMap, isResponsive }) => {
+            const lookupStyles = handler.__lookupStyles;
+            if (isResponsive) {
+                const valueMap = lookupStyles.reduce((map, style) => {
+                    map[style] = normalizeStyleZones(styleMap[style], zones.length);
+                    return map;
+                }, {});
+                const propsByPoint = zones.map((zone, i) => {
+                    const pointProps = {};
+                    lookupStyles.forEach((style) => {
+                        if (valueMap != null && valueMap[style] != null) {
+                            pointProps[style] = valueMap[style][i];
+                        }
+                    });
+                    return pointProps;
+                });
+                const rulesByPoint = propsByPoint.map((props) => handler(props, suffix));
+                rulesByPoint.forEach((rules, i) => {
+                    responsiveStyles[i] += rules || '';
+                });
+            }
+            else {
+                rawStyles
+                    += handler(styleMap, suffix) || '';
+            }
+        });
+        STYLE_CACHE[cacheKey] = `outline: none;\n&[hidden]{display: none !important;}${rawStyles}${responsive && responsive.length
+            ? mediaWrapper(responsiveStyles, zones)
+            : ''}${innerStyles}`;
+    }
+    return STYLE_CACHE[cacheKey];
+}
+
+        

package/dist/es/utils/responsive.js

@@ -0,0 +1,66 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.0
+ * Released under the MIT license.
+ */
+
+export function mediaWrapper(cssRules, points) {
+    return points
+        .filter((point) => point.mediaQuery)
+        .map((point, i) => `@media ${point.mediaQuery} {${cssRules[i]}}`)
+        .join('\n');
+}
+const zonesCache = {};
+export function pointsToZones(points) {
+    const cacheKey = points.join('|');
+    if (!zonesCache[cacheKey]) {
+        const zones = [];
+        points.forEach((point, i) => {
+            const zone = {};
+            if (i) {
+                zone.max = points[i - 1] - 1;
+            }
+            zone.min = point;
+            zones.push(zone);
+        });
+        zones.push({
+            max: points[points.length - 1] - 1,
+        });
+        zones.forEach((zone) => {
+            const queries = [];
+            if (zone.min) {
+                queries.push(`(min-width: ${zone.min}px)`);
+            }
+            if (zone.max) {
+                queries.push(`(max-width: ${zone.max}px)`);
+            }
+            zone.mediaQuery = queries.join(' and ');
+        });
+        zonesCache[cacheKey] = zones;
+    }
+    return zonesCache[cacheKey];
+}
+// export function getResponsiveValue(values, zoneNumber) {
+//   for (let i = zoneNumber; i >= 0; i--) {
+//     if (values[i] != null)
+//   }
+// }
+export function normalizeStyleZones(value, zoneNumber) {
+    if (value == null)
+        return value;
+    const arr = Array.from(Array(zoneNumber));
+    if (typeof value === 'string')
+        return arr.map(() => value);
+    if (Array.isArray(value)) {
+        let prevValue = null;
+        for (let i = 0; i < arr.length; i++) {
+            arr[i] = value[i] == null ? prevValue : value[i];
+            prevValue = arr[i];
+        }
+        return arr;
+    }
+    return [];
+}
+
+        

package/dist/es/utils/string.js

@@ -0,0 +1,12 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.0
+ * Released under the MIT license.
+ */
+
+export function toSnakeCase(str) {
+    return str.replace(/[A-Z]/g, (s) => `-${s.toLowerCase()}`);
+}
+
+