@strapi/design-system 1.19.0-typescript.0 → 2.0.0-beta.1

package/dist/helpers/useResizeObserver.mjs

@@ -1,14 +0,0 @@
-import { once, PREFIX } from './deprecations.mjs';
-import { useResizeObserver as useResizeObserver$1 } from '../hooks/useResizeObserver.mjs';
-
-const warnDeprecated = once(console.warn);
-/**
- * @preserve
- * @deprecated useResizeObserver has moved. Please import it from "@strapi/design-system/hooks/useResizeObserver"
- */
-const useResizeObserver = (...args) => {
-    warnDeprecated(`${PREFIX} useResizeObserver has moved. Please import it from "@strapi/design-system/hooks/useResizeObserver"`);
-    return useResizeObserver$1(...args);
-};
-
-export { useResizeObserver };

package/dist/hooks/__tests__/useId.spec.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/hooks/useComposeRefs.js

@@ -1,72 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const React = require('react');
-
-function _interopNamespace(e) {
-    if (e && e.__esModule) return e;
-    const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
-    if (e) {
-        for (const k in e) {
-            if (k !== 'default') {
-                const d = Object.getOwnPropertyDescriptor(e, k);
-                Object.defineProperty(n, k, d.get ? d : {
-                    enumerable: true,
-                    get: () => e[k]
-                });
-            }
-        }
-    }
-    n.default = e;
-    return Object.freeze(n);
-}
-
-const React__namespace = /*#__PURE__*/_interopNamespace(React);
-
-/**
- * Set a given ref to a given value
- * This utility takes care of different types of refs: callback refs and RefObject(s)
- */
-function setRef(ref, value) {
-    if (typeof ref === 'function') {
-        ref(value);
-    }
-    else if (ref !== null && ref !== undefined) {
-        ref.current = value;
-    }
-}
-/**
- * A utility to compose multiple refs together
- * Accepts callback refs and RefObject(s)
- */
-function composeRefs(...refs) {
-    return (node) => refs.forEach((ref) => setRef(ref, node));
-}
-/**
- * Takes multiple React like refs either React.Ref or a callback:
- * (node: T) => void and returns a single function that can be
- * passed to a React component as a ref.
- *
- * Example:
- * ```tsx
- * import { useComposedRefs } from '../hooks/useComposedRefs';
- *
- * const Component = React.forwardRef<HTMLInputElement, ComponentProps>((props, forwardedRef) => {
- *  const ref = useComposedRefs(internalRef, forwardedRef);
- *
- *  React.useEffect(() => {
- *   ref.current.focus();
- *  }, [ref]);
- *
- *  return <input ref={ref} />
- * }
- * ```
- */
-function useComposedRefs(...refs) {
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    return React__namespace.useCallback(composeRefs(...refs), refs);
-}
-
-exports.composeRefs = composeRefs;
-exports.useComposedRefs = useComposedRefs;

package/dist/hooks/useComposeRefs.mjs

@@ -1,47 +0,0 @@
-import * as React from 'react';
-
-/**
- * Set a given ref to a given value
- * This utility takes care of different types of refs: callback refs and RefObject(s)
- */
-function setRef(ref, value) {
-    if (typeof ref === 'function') {
-        ref(value);
-    }
-    else if (ref !== null && ref !== undefined) {
-        ref.current = value;
-    }
-}
-/**
- * A utility to compose multiple refs together
- * Accepts callback refs and RefObject(s)
- */
-function composeRefs(...refs) {
-    return (node) => refs.forEach((ref) => setRef(ref, node));
-}
-/**
- * Takes multiple React like refs either React.Ref or a callback:
- * (node: T) => void and returns a single function that can be
- * passed to a React component as a ref.
- *
- * Example:
- * ```tsx
- * import { useComposedRefs } from '../hooks/useComposedRefs';
- *
- * const Component = React.forwardRef<HTMLInputElement, ComponentProps>((props, forwardedRef) => {
- *  const ref = useComposedRefs(internalRef, forwardedRef);
- *
- *  React.useEffect(() => {
- *   ref.current.focus();
- *  }, [ref]);
- *
- *  return <input ref={ref} />
- * }
- * ```
- */
-function useComposedRefs(...refs) {
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    return React.useCallback(composeRefs(...refs), refs);
-}
-
-export { composeRefs, useComposedRefs };

package/dist/hooks/useControllableState.js

@@ -1,63 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const React = require('react');
-const uiPrimitives = require('@strapi/ui-primitives');
-
-function _interopNamespace(e) {
-    if (e && e.__esModule) return e;
-    const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
-    if (e) {
-        for (const k in e) {
-            if (k !== 'default') {
-                const d = Object.getOwnPropertyDescriptor(e, k);
-                Object.defineProperty(n, k, d.get ? d : {
-                    enumerable: true,
-                    get: () => e[k]
-                });
-            }
-        }
-    }
-    n.default = e;
-    return Object.freeze(n);
-}
-
-const React__namespace = /*#__PURE__*/_interopNamespace(React);
-
-function useControllableState({ prop, defaultProp, onChange = () => { }, }) {
-    const [uncontrolledProp, setUncontrolledProp] = useUncontrolledState({ defaultProp, onChange });
-    const isControlled = prop !== undefined;
-    const propValue = prop instanceof Function ? prop(uncontrolledProp) : prop;
-    const value = isControlled ? propValue : uncontrolledProp;
-    const handleChange = uiPrimitives.useCallbackRef(onChange);
-    const setValue = React__namespace.useCallback((nextValue) => {
-        if (isControlled) {
-            const setter = nextValue;
-            const value = typeof nextValue === 'function' ? setter(propValue) : nextValue;
-            if (value !== propValue) {
-                handleChange(value);
-                setUncontrolledProp(nextValue);
-            }
-        }
-        else {
-            setUncontrolledProp(nextValue);
-        }
-    }, [isControlled, propValue, setUncontrolledProp, handleChange]);
-    return [value, setValue];
-}
-function useUncontrolledState({ defaultProp, onChange }) {
-    const uncontrolledState = React__namespace.useState(defaultProp);
-    const [value] = uncontrolledState;
-    const prevValueRef = React__namespace.useRef(value);
-    const handleChange = uiPrimitives.useCallbackRef(onChange);
-    React__namespace.useEffect(() => {
-        if (prevValueRef.current !== value) {
-            handleChange(value);
-            prevValueRef.current = value;
-        }
-    }, [value, prevValueRef, handleChange]);
-    return uncontrolledState;
-}
-
-exports.useControllableState = useControllableState;

package/dist/hooks/useControllableState.mjs

@@ -1,39 +0,0 @@
-import * as React from 'react';
-import { useCallbackRef } from '@strapi/ui-primitives';
-
-function useControllableState({ prop, defaultProp, onChange = () => { }, }) {
-    const [uncontrolledProp, setUncontrolledProp] = useUncontrolledState({ defaultProp, onChange });
-    const isControlled = prop !== undefined;
-    const propValue = prop instanceof Function ? prop(uncontrolledProp) : prop;
-    const value = isControlled ? propValue : uncontrolledProp;
-    const handleChange = useCallbackRef(onChange);
-    const setValue = React.useCallback((nextValue) => {
-        if (isControlled) {
-            const setter = nextValue;
-            const value = typeof nextValue === 'function' ? setter(propValue) : nextValue;
-            if (value !== propValue) {
-                handleChange(value);
-                setUncontrolledProp(nextValue);
-            }
-        }
-        else {
-            setUncontrolledProp(nextValue);
-        }
-    }, [isControlled, propValue, setUncontrolledProp, handleChange]);
-    return [value, setValue];
-}
-function useUncontrolledState({ defaultProp, onChange }) {
-    const uncontrolledState = React.useState(defaultProp);
-    const [value] = uncontrolledState;
-    const prevValueRef = React.useRef(value);
-    const handleChange = useCallbackRef(onChange);
-    React.useEffect(() => {
-        if (prevValueRef.current !== value) {
-            handleChange(value);
-            prevValueRef.current = value;
-        }
-    }, [value, prevValueRef, handleChange]);
-    return uncontrolledState;
-}
-
-export { useControllableState };

package/dist/hooks/useDateFormatter.js

@@ -1,78 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const React = require('react');
-const date = require('@internationalized/date');
-
-function _interopNamespace(e) {
-    if (e && e.__esModule) return e;
-    const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
-    if (e) {
-        for (const k in e) {
-            if (k !== 'default') {
-                const d = Object.getOwnPropertyDescriptor(e, k);
-                Object.defineProperty(n, k, d.get ? d : {
-                    enumerable: true,
-                    get: () => e[k]
-                });
-            }
-        }
-    }
-    n.default = e;
-    return Object.freeze(n);
-}
-
-const React__namespace = /*#__PURE__*/_interopNamespace(React);
-
-/**
- * This hook wraps the `DateFormatter` from `@internationalized/date`. Which essentially is
- * an extension of the `Intl.DateTimeFormat` API with some additional features.
- *
- * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat
- * for more information.
- *
- * @returns a memoized DateFormatter instance
- *
- * @example
- * ```tsx
- * const MyComponent = () => {
- *  const monthFormatter = useDateFormatter(locale, { month: 'long' });
- *  const months: string[] = React.useMemo(
- *    () => [...Array(12).keys()].map((m) => monthFormatter.format(new Date(Date.UTC(2023, m)))),
- *    [monthFormatter],
- *   );
- *
- *  // assuming the locale is `en-GB` this will render `Janyary` to `December`.
- *  return months.map((month) => <p key={month}>{month}</p>)
- * }
- * ```
- */
-function useDateFormatter(locale, options) {
-    // Reuse last options object if it is shallowly equal, which allows the useMemo result to also be reused.
-    let lastOptions = React__namespace.useRef(null);
-    if (options && lastOptions.current && isEqual(options, lastOptions.current)) {
-        options = lastOptions.current;
-    }
-    lastOptions.current = options ?? null;
-    return React__namespace.useMemo(() => new date.DateFormatter(locale, options), [locale, options]);
-}
-function isEqual(a, b) {
-    if (a === b) {
-        return true;
-    }
-    let aKeys = Object.keys(a);
-    let bKeys = Object.keys(b);
-    if (aKeys.length !== bKeys.length) {
-        return false;
-    }
-    // eslint-disable-next-line no-restricted-syntax
-    for (let key of aKeys) {
-        if (b[key] !== a[key]) {
-            return false;
-        }
-    }
-    return true;
-}
-
-exports.useDateFormatter = useDateFormatter;

package/dist/hooks/useDateFormatter.mjs

@@ -1,54 +0,0 @@
-import * as React from 'react';
-import { DateFormatter } from '@internationalized/date';
-
-/**
- * This hook wraps the `DateFormatter` from `@internationalized/date`. Which essentially is
- * an extension of the `Intl.DateTimeFormat` API with some additional features.
- *
- * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat
- * for more information.
- *
- * @returns a memoized DateFormatter instance
- *
- * @example
- * ```tsx
- * const MyComponent = () => {
- *  const monthFormatter = useDateFormatter(locale, { month: 'long' });
- *  const months: string[] = React.useMemo(
- *    () => [...Array(12).keys()].map((m) => monthFormatter.format(new Date(Date.UTC(2023, m)))),
- *    [monthFormatter],
- *   );
- *
- *  // assuming the locale is `en-GB` this will render `Janyary` to `December`.
- *  return months.map((month) => <p key={month}>{month}</p>)
- * }
- * ```
- */
-function useDateFormatter(locale, options) {
-    // Reuse last options object if it is shallowly equal, which allows the useMemo result to also be reused.
-    let lastOptions = React.useRef(null);
-    if (options && lastOptions.current && isEqual(options, lastOptions.current)) {
-        options = lastOptions.current;
-    }
-    lastOptions.current = options ?? null;
-    return React.useMemo(() => new DateFormatter(locale, options), [locale, options]);
-}
-function isEqual(a, b) {
-    if (a === b) {
-        return true;
-    }
-    let aKeys = Object.keys(a);
-    let bKeys = Object.keys(b);
-    if (aKeys.length !== bKeys.length) {
-        return false;
-    }
-    // eslint-disable-next-line no-restricted-syntax
-    for (let key of aKeys) {
-        if (b[key] !== a[key]) {
-            return false;
-        }
-    }
-    return true;
-}
-
-export { useDateFormatter };

package/dist/hooks/useElementOnScreen.js

@@ -1,28 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const React = require('react');
-
-const useElementOnScreen = (options) => {
-    const containerRef = React.useRef(null);
-    const [isVisible, setIsVisible] = React.useState(true);
-    const callback = ([entry]) => {
-        setIsVisible(entry.isIntersecting);
-    };
-    React.useEffect(() => {
-        const containerEl = containerRef.current;
-        const observer = new IntersectionObserver(callback, options);
-        if (containerEl) {
-            observer.observe(containerRef.current);
-        }
-        return () => {
-            if (containerEl) {
-                observer.disconnect();
-            }
-        };
-    }, [containerRef, options]);
-    return [containerRef, isVisible];
-};
-
-exports.useElementOnScreen = useElementOnScreen;

package/dist/hooks/useElementOnScreen.mjs

@@ -1,24 +0,0 @@
-import { useRef, useState, useEffect } from 'react';
-
-const useElementOnScreen = (options) => {
-    const containerRef = useRef(null);
-    const [isVisible, setIsVisible] = useState(true);
-    const callback = ([entry]) => {
-        setIsVisible(entry.isIntersecting);
-    };
-    useEffect(() => {
-        const containerEl = containerRef.current;
-        const observer = new IntersectionObserver(callback, options);
-        if (containerEl) {
-            observer.observe(containerRef.current);
-        }
-        return () => {
-            if (containerEl) {
-                observer.disconnect();
-            }
-        };
-    }, [containerRef, options]);
-    return [containerRef, isVisible];
-};
-
-export { useElementOnScreen };

package/dist/hooks/useId.js

@@ -1,25 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const React = require('react');
-
-const _interopDefault = e => e && e.__esModule ? e : { default: e };
-
-const React__default = /*#__PURE__*/_interopDefault(React);
-
-// Inspired by radix-ui useId hook https://github.com/radix-ui/primitives/blob/main/packages/react/id/src/id.tsx
-// We `toString()` to prevent bundlers from trying to `import { useId } from 'react';`
-const useReactId = React__default.default['useId'.toString()] || (() => undefined);
-let count = 0;
-const useId = (initialId) => {
-    const [id, setId] = React.useState(useReactId());
-    // React versions older than 18 will have client-side ids only.
-    React.useLayoutEffect(() => {
-        if (!initialId)
-            setId((reactId) => reactId ?? String(count++));
-    }, [initialId]);
-    return initialId?.toString() ?? (id || '');
-};
-
-exports.useId = useId;

package/dist/hooks/useId.mjs

@@ -1,17 +0,0 @@
-import React__default, { useState, useLayoutEffect } from 'react';
-
-// Inspired by radix-ui useId hook https://github.com/radix-ui/primitives/blob/main/packages/react/id/src/id.tsx
-// We `toString()` to prevent bundlers from trying to `import { useId } from 'react';`
-const useReactId = React__default['useId'.toString()] || (() => undefined);
-let count = 0;
-const useId = (initialId) => {
-    const [id, setId] = useState(useReactId());
-    // React versions older than 18 will have client-side ids only.
-    useLayoutEffect(() => {
-        if (!initialId)
-            setId((reactId) => reactId ?? String(count++));
-    }, [initialId]);
-    return initialId?.toString() ?? (id || '');
-};
-
-export { useId };

package/dist/hooks/useIntersection.js

@@ -1,41 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const React = require('react');
-const uiPrimitives = require('@strapi/ui-primitives');
-
-const useIntersection = (scrollableAreaRef, callback, { selectorToWatch, skipWhen = false }) => {
-    const handleIntersection = uiPrimitives.useCallbackRef(callback);
-    React.useEffect(() => {
-        if (skipWhen || !scrollableAreaRef.current)
-            return;
-        const options = {
-            root: scrollableAreaRef.current,
-            rootMargin: '0px',
-        };
-        const onEnterZone = (entries) => {
-            entries.forEach((entry) => {
-                if (entry.isIntersecting && scrollableAreaRef.current) {
-                    if (scrollableAreaRef.current.scrollHeight > scrollableAreaRef.current.clientHeight) {
-                        handleIntersection(entry);
-                    }
-                }
-            });
-        };
-        const observer = new IntersectionObserver(onEnterZone, options);
-        /**
-         * @note We need to escape the selector because we use `React.useId` to generate our ids an
-         * they contain `:` which is not a valid selector because it's part of the CSS spec
-         */
-        const target = scrollableAreaRef.current.querySelector(selectorToWatch);
-        if (target) {
-            observer.observe(target);
-        }
-        return () => {
-            observer.disconnect();
-        };
-    }, [skipWhen, handleIntersection, selectorToWatch, scrollableAreaRef]);
-};
-
-exports.useIntersection = useIntersection;

package/dist/hooks/useIntersection.mjs

@@ -1,37 +0,0 @@
-import { useEffect } from 'react';
-import { useCallbackRef } from '@strapi/ui-primitives';
-
-const useIntersection = (scrollableAreaRef, callback, { selectorToWatch, skipWhen = false }) => {
-    const handleIntersection = useCallbackRef(callback);
-    useEffect(() => {
-        if (skipWhen || !scrollableAreaRef.current)
-            return;
-        const options = {
-            root: scrollableAreaRef.current,
-            rootMargin: '0px',
-        };
-        const onEnterZone = (entries) => {
-            entries.forEach((entry) => {
-                if (entry.isIntersecting && scrollableAreaRef.current) {
-                    if (scrollableAreaRef.current.scrollHeight > scrollableAreaRef.current.clientHeight) {
-                        handleIntersection(entry);
-                    }
-                }
-            });
-        };
-        const observer = new IntersectionObserver(onEnterZone, options);
-        /**
-         * @note We need to escape the selector because we use `React.useId` to generate our ids an
-         * they contain `:` which is not a valid selector because it's part of the CSS spec
-         */
-        const target = scrollableAreaRef.current.querySelector(selectorToWatch);
-        if (target) {
-            observer.observe(target);
-        }
-        return () => {
-            observer.disconnect();
-        };
-    }, [skipWhen, handleIntersection, selectorToWatch, scrollableAreaRef]);
-};
-
-export { useIntersection };

package/dist/hooks/useLockScroll.js

@@ -1,16 +0,0 @@
-'use strict';
-
-const React = require('react');
-
-const useLockScroll = (lockScroll) => {
-    React.useEffect(() => {
-        if (lockScroll) {
-            document.body.classList.add('lock-body-scroll');
-        }
-        return () => {
-            document.body.classList.remove('lock-body-scroll');
-        };
-    }, [lockScroll]);
-};
-
-module.exports = useLockScroll;

package/dist/hooks/useLockScroll.mjs

@@ -1,14 +0,0 @@
-import { useEffect } from 'react';
-
-const useLockScroll = (lockScroll) => {
-    useEffect(() => {
-        if (lockScroll) {
-            document.body.classList.add('lock-body-scroll');
-        }
-        return () => {
-            document.body.classList.remove('lock-body-scroll');
-        };
-    }, [lockScroll]);
-};
-
-export { useLockScroll as default };

package/dist/hooks/usePrevious.js

@@ -1,15 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const React = require('react');
-
-const usePrevious = (value) => {
-    const ref = React.useRef();
-    React.useEffect(() => {
-        ref.current = value;
-    });
-    return ref.current;
-};
-
-exports.usePrevious = usePrevious;

package/dist/hooks/usePrevious.mjs

@@ -1,11 +0,0 @@
-import { useRef, useEffect } from 'react';
-
-const usePrevious = (value) => {
-    const ref = useRef();
-    useEffect(() => {
-        ref.current = value;
-    });
-    return ref.current;
-};
-
-export { usePrevious };

package/dist/hooks/useResizeObserver.js

@@ -1,28 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const React = require('react');
-const uiPrimitives = require('@strapi/ui-primitives');
-
-const useResizeObserver = (sources, onResize) => {
-    const handleResize = uiPrimitives.useCallbackRef(onResize);
-    React.useLayoutEffect(() => {
-        const resizeObs = new ResizeObserver(handleResize);
-        if (Array.isArray(sources)) {
-            sources.forEach((source) => {
-                if (source.current) {
-                    resizeObs.observe(source.current);
-                }
-            });
-        }
-        else if (sources.current) {
-            resizeObs.observe(sources.current);
-        }
-        return () => {
-            resizeObs.disconnect();
-        };
-    }, [sources, handleResize]);
-};
-
-exports.useResizeObserver = useResizeObserver;

package/dist/hooks/useResizeObserver.mjs

@@ -1,24 +0,0 @@
-import { useLayoutEffect } from 'react';
-import { useCallbackRef } from '@strapi/ui-primitives';
-
-const useResizeObserver = (sources, onResize) => {
-    const handleResize = useCallbackRef(onResize);
-    useLayoutEffect(() => {
-        const resizeObs = new ResizeObserver(handleResize);
-        if (Array.isArray(sources)) {
-            sources.forEach((source) => {
-                if (source.current) {
-                    resizeObs.observe(source.current);
-                }
-            });
-        }
-        else if (sources.current) {
-            resizeObs.observe(sources.current);
-        }
-        return () => {
-            resizeObs.disconnect();
-        };
-    }, [sources, handleResize]);
-};
-
-export { useResizeObserver };

package/dist/themes/__tests__/extendTheme.spec.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/themes/colors.js

@@ -1,2 +0,0 @@
-'use strict';
-