@strapi/design-system 1.9.0 → 1.10.0

package/dist/helpers/useResizeObserver.js

@@ -1,11 +1,18 @@
-import { once as s, PREFIX as r } from "./deprecations.js";
-import { useResizeObserver as o } from "../hooks/useResizeObserver.js";
-const i = s(console.warn);
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const deprecations = require('./deprecations.js');
+const useResizeObserver$1 = require('../hooks/useResizeObserver.js');
+
+const warnDeprecated = deprecations.once(console.warn);
 /**
  * @preserve
  * @deprecated useResizeObserver has moved. Please import it from "@strapi/design-system/hooks/useResizeObserver"
  */
-const n = (...e) => (i(`${r} useResizeObserver has moved. Please import it from "@strapi/design-system/hooks/useResizeObserver"`), o(...e));
-export {
-  n as useResizeObserver
+const useResizeObserver = (...args) => {
+    warnDeprecated(`${deprecations.PREFIX} useResizeObserver has moved. Please import it from "@strapi/design-system/hooks/useResizeObserver"`);
+    return useResizeObserver$1.useResizeObserver(...args);
 };
+
+exports.useResizeObserver = useResizeObserver;

package/dist/helpers/useResizeObserver.mjs

@@ -0,0 +1,14 @@
+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/useComposeRefs.js

@@ -1,14 +1,72 @@
-import * as t from "react";
-function u(n, o) {
-  typeof n == "function" ? n(o) : n != null && (n.current = o);
+'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);
 }
-function c(...n) {
-  return (o) => n.forEach((e) => u(e, o));
+
+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;
+    }
 }
-function f(...n) {
-  return t.useCallback(c(...n), n);
+/**
+ * A utility to compose multiple refs together
+ * Accepts callback refs and RefObject(s)
+ */
+function composeRefs(...refs) {
+    return (node) => refs.forEach((ref) => setRef(ref, node));
 }
-export {
-  c as composeRefs,
-  f as useComposedRefs
-};
+/**
+ * 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

@@ -0,0 +1,47 @@
+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,22 +1,63 @@
-import * as r from "react";
-import { useCallbackRef as i } from "@strapi/ui-primitives";
-function S({ prop: n, defaultProp: u, onChange: c = () => {
-} }) {
-  const [t, e] = m({ defaultProp: u, onChange: c }), o = n !== void 0, l = n instanceof Function ? n(t) : n, d = o ? l : t, a = i(c), C = r.useCallback((s) => {
-    if (o) {
-      const f = typeof s == "function" ? s(l) : s;
-      f !== l && (a(f), e(s));
-    } else
-      e(s);
-  }, [o, l, e, a]);
-  return [d, C];
+'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);
 }
-function m({ defaultProp: n, onChange: u }) {
-  const c = r.useState(n), [t] = c, e = r.useRef(t), o = i(u);
-  return r.useEffect(() => {
-    e.current !== t && (o(t), e.current = t);
-  }, [t, e, o]), c;
+
+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];
 }
-export {
-  S as useControllableState
-};
+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

@@ -0,0 +1,39 @@
+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,20 +1,78 @@
-import * as n from "react";
-import { DateFormatter as l } from "@internationalized/date";
-function s(t, e) {
-  let r = n.useRef(null);
-  return e && r.current && a(e, r.current) && (e = r.current), r.current = e ?? null, n.useMemo(() => new l(t, e), [t, e]);
+'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);
 }
-function a(t, e) {
-  if (t === e)
-    return !0;
-  let r = Object.keys(t), f = Object.keys(e);
-  if (r.length !== f.length)
-    return !1;
-  for (let u of r)
-    if (e[u] !== t[u])
-      return !1;
-  return !0;
+
+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]);
 }
-export {
-  s as useDateFormatter
-};
+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

@@ -0,0 +1,54 @@
+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,15 +1,28 @@
-import { useRef as o, useState as u, useEffect as l } from "react";
-const b = (t) => {
-  const e = o(null), [s, c] = u(!0), i = ([n]) => {
-    c(n.isIntersecting);
-  };
-  return l(() => {
-    const n = e.current, r = new IntersectionObserver(i, t);
-    return n && r.observe(e.current), () => {
-      n && r.disconnect();
+'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);
     };
-  }, [e, t]), [e, s];
-};
-export {
-  b as useElementOnScreen
+    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

@@ -0,0 +1,24 @@
+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,13 +1,25 @@
-import s, { useState as n, useLayoutEffect as r } from "react";
-const c = s["useId".toString()] || (() => {
-});
-let d = 0;
-const S = (t) => {
-  const [e, o] = n(c());
-  return r(() => {
-    t || o((u) => u ?? String(d++));
-  }, [t]), t?.toString() ?? (e || "");
-};
-export {
-  S as useId
+'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

@@ -0,0 +1,17 @@
+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,23 +1,41 @@
-import { useEffect as m } from "react";
-import { useCallbackRef as p } from "@strapi/ui-primitives";
-const E = (t, s, { selectorToWatch: n, skipWhen: r = !1 }) => {
-  const o = p(s);
-  m(() => {
-    if (r || !t.current)
-      return;
-    const u = {
-      root: t.current,
-      rootMargin: "0px"
-    }, f = (g) => {
-      g.forEach((i) => {
-        i.isIntersecting && t.current && t.current.scrollHeight > t.current.clientHeight && o(i);
-      });
-    }, e = new IntersectionObserver(f, u), c = t.current.querySelector(n);
-    return c && e.observe(c), () => {
-      e.disconnect();
-    };
-  }, [r, o, n, t]);
-};
-export {
-  E as useIntersection
+'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;