@strapi/admin 0.0.0-experimental.62ce06180fe9a772eaeb3d43d238b26644f39f7c → 0.0.0-experimental.6340da17068c3bed7fb006e7bcc554c71129e282

package/dist/admin/admin/src/hooks/useControllableState.mjs

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import { useCallbackRef } from '@strapi/design-system';
+
+function useControllableState({ prop, defaultProp, onChange = ()=>{} }) {
+    const [uncontrolledProp, setUncontrolledProp] = useUncontrolledState({
+        defaultProp,
+        onChange
+    });
+    const isControlled = prop !== undefined;
+    const value = isControlled ? prop : uncontrolledProp;
+    const handleChange = useCallbackRef(onChange);
+    const setValue = React.useCallback((nextValue)=>{
+        if (isControlled) {
+            const setter = nextValue;
+            const value = typeof nextValue === 'function' ? setter(prop) : nextValue;
+            if (value !== prop) handleChange(value);
+        } else {
+            setUncontrolledProp(nextValue);
+        }
+    }, [
+        isControlled,
+        prop,
+        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 };
+//# sourceMappingURL=useControllableState.mjs.map

package/dist/admin/admin/src/hooks/useControllableState.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useControllableState.mjs","sources":["../../../../../admin/src/hooks/useControllableState.ts"],"sourcesContent":["import * as React from 'react';\n\nimport { useCallbackRef } from '@strapi/design-system';\n\ntype UseControllableStateParams<T> = {\n  prop?: T | undefined;\n  defaultProp?: T | undefined;\n  onChange?: (state: T) => void;\n};\n\ntype SetStateFn<T> = (prevState?: T) => T;\n\nfunction useControllableState<T>({\n  prop,\n  defaultProp,\n  onChange = () => {},\n}: UseControllableStateParams<T>) {\n  const [uncontrolledProp, setUncontrolledProp] = useUncontrolledState({ defaultProp, onChange });\n  const isControlled = prop !== undefined;\n  const value = isControlled ? prop : uncontrolledProp;\n  const handleChange = useCallbackRef(onChange);\n\n  const setValue: React.Dispatch<React.SetStateAction<T | undefined>> = React.useCallback(\n    (nextValue) => {\n      if (isControlled) {\n        const setter = nextValue as SetStateFn<T>;\n        const value = typeof nextValue === 'function' ? setter(prop) : nextValue;\n        if (value !== prop) handleChange(value as T);\n      } else {\n        setUncontrolledProp(nextValue);\n      }\n    },\n    [isControlled, prop, setUncontrolledProp, handleChange]\n  );\n\n  return [value, setValue] as const;\n}\n\nfunction useUncontrolledState<T>({\n  defaultProp,\n  onChange,\n}: Omit<UseControllableStateParams<T>, 'prop'>) {\n  const uncontrolledState = React.useState<T | undefined>(defaultProp);\n  const [value] = uncontrolledState;\n  const prevValueRef = React.useRef(value);\n  const handleChange = useCallbackRef(onChange);\n\n  React.useEffect(() => {\n    if (prevValueRef.current !== value) {\n      handleChange(value as T);\n      prevValueRef.current = value;\n    }\n  }, [value, prevValueRef, handleChange]);\n\n  return uncontrolledState;\n}\n\nexport { useControllableState };\n"],"names":["useControllableState","prop","defaultProp","onChange","uncontrolledProp","setUncontrolledProp","useUncontrolledState","isControlled","undefined","value","handleChange","useCallbackRef","setValue","React","useCallback","nextValue","setter","uncontrolledState","useState","prevValueRef","useRef","useEffect","current"],"mappings":";;;AAYA,SAASA,oBAAAA,CAAwB,EAC/BC,IAAI,EACJC,WAAW,EACXC,QAAAA,GAAW,IAAA,CAAO,CAAC,EACW,EAAA;AAC9B,IAAA,MAAM,CAACC,gBAAAA,EAAkBC,mBAAAA,CAAoB,GAAGC,oBAAAA,CAAqB;AAAEJ,QAAAA,WAAAA;AAAaC,QAAAA;AAAS,KAAA,CAAA;AAC7F,IAAA,MAAMI,eAAeN,IAAAA,KAASO,SAAAA;IAC9B,MAAMC,KAAAA,GAAQF,eAAeN,IAAAA,GAAOG,gBAAAA;AACpC,IAAA,MAAMM,eAAeC,cAAAA,CAAeR,QAAAA,CAAAA;AAEpC,IAAA,MAAMS,QAAAA,GAAgEC,KAAAA,CAAMC,WAAW,CACrF,CAACC,SAAAA,GAAAA;AACC,QAAA,IAAIR,YAAAA,EAAc;AAChB,YAAA,MAAMS,MAAAA,GAASD,SAAAA;AACf,YAAA,MAAMN,KAAAA,GAAQ,OAAOM,SAAAA,KAAc,UAAA,GAAaC,OAAOf,IAAAA,CAAAA,GAAQc,SAAAA;YAC/D,IAAIN,KAAAA,KAAUR,MAAMS,YAAAA,CAAaD,KAAAA,CAAAA;QACnC,CAAA,MAAO;YACLJ,mBAAAA,CAAoBU,SAAAA,CAAAA;AACtB,QAAA;IACF,CAAA,EACA;AAACR,QAAAA,YAAAA;AAAcN,QAAAA,IAAAA;AAAMI,QAAAA,mBAAAA;AAAqBK,QAAAA;AAAa,KAAA,CAAA;IAGzD,OAAO;AAACD,QAAAA,KAAAA;AAAOG,QAAAA;AAAS,KAAA;AAC1B;AAEA,SAASN,oBAAAA,CAAwB,EAC/BJ,WAAW,EACXC,QAAQ,EACoC,EAAA;IAC5C,MAAMc,iBAAAA,GAAoBJ,KAAAA,CAAMK,QAAQ,CAAgBhB,WAAAA,CAAAA;IACxD,MAAM,CAACO,MAAM,GAAGQ,iBAAAA;IAChB,MAAME,YAAAA,GAAeN,KAAAA,CAAMO,MAAM,CAACX,KAAAA,CAAAA;AAClC,IAAA,MAAMC,eAAeC,cAAAA,CAAeR,QAAAA,CAAAA;AAEpCU,IAAAA,KAAAA,CAAMQ,SAAS,CAAC,IAAA;QACd,IAAIF,YAAAA,CAAaG,OAAO,KAAKb,KAAAA,EAAO;YAClCC,YAAAA,CAAaD,KAAAA,CAAAA;AACbU,YAAAA,YAAAA,CAAaG,OAAO,GAAGb,KAAAA;AACzB,QAAA;IACF,CAAA,EAAG;AAACA,QAAAA,KAAAA;AAAOU,QAAAA,YAAAA;AAAcT,QAAAA;AAAa,KAAA,CAAA;IAEtC,OAAOO,iBAAAA;AACT;;;;"}

package/dist/admin/admin/src/hooks/useDebounce.js

@@ -0,0 +1,42 @@
+'use strict';
+
+var React = require('react');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+function useDebounce(value, delay) {
+    const [debouncedValue, setDebouncedValue] = React__namespace.useState(value);
+    React__namespace.useEffect(()=>{
+        const handler = setTimeout(()=>{
+            setDebouncedValue(value);
+        }, delay);
+        return ()=>{
+            clearTimeout(handler);
+        };
+    }, [
+        value,
+        delay
+    ]);
+    return debouncedValue;
+}
+
+exports.useDebounce = useDebounce;
+//# sourceMappingURL=useDebounce.js.map

package/dist/admin/admin/src/hooks/useDebounce.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDebounce.js","sources":["../../../../../admin/src/hooks/useDebounce.ts"],"sourcesContent":["import * as React from 'react';\n\nexport function useDebounce<TValue>(value: TValue, delay: number): TValue {\n  const [debouncedValue, setDebouncedValue] = React.useState(value);\n\n  React.useEffect(() => {\n    const handler = setTimeout(() => {\n      setDebouncedValue(value);\n    }, delay);\n\n    return () => {\n      clearTimeout(handler);\n    };\n  }, [value, delay]);\n\n  return debouncedValue;\n}\n"],"names":["useDebounce","value","delay","debouncedValue","setDebouncedValue","React","useState","useEffect","handler","setTimeout","clearTimeout"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAEO,SAASA,WAAAA,CAAoBC,KAAa,EAAEC,KAAa,EAAA;AAC9D,IAAA,MAAM,CAACC,cAAAA,EAAgBC,iBAAAA,CAAkB,GAAGC,gBAAAA,CAAMC,QAAQ,CAACL,KAAAA,CAAAA;AAE3DI,IAAAA,gBAAAA,CAAME,SAAS,CAAC,IAAA;AACd,QAAA,MAAMC,UAAUC,UAAAA,CAAW,IAAA;YACzBL,iBAAAA,CAAkBH,KAAAA,CAAAA;QACpB,CAAA,EAAGC,KAAAA,CAAAA;QAEH,OAAO,IAAA;YACLQ,YAAAA,CAAaF,OAAAA,CAAAA;AACf,QAAA,CAAA;IACF,CAAA,EAAG;AAACP,QAAAA,KAAAA;AAAOC,QAAAA;AAAM,KAAA,CAAA;IAEjB,OAAOC,cAAAA;AACT;;;;"}

package/dist/admin/admin/src/hooks/useDebounce.mjs

@@ -0,0 +1,20 @@
+import * as React from 'react';
+
+function useDebounce(value, delay) {
+    const [debouncedValue, setDebouncedValue] = React.useState(value);
+    React.useEffect(()=>{
+        const handler = setTimeout(()=>{
+            setDebouncedValue(value);
+        }, delay);
+        return ()=>{
+            clearTimeout(handler);
+        };
+    }, [
+        value,
+        delay
+    ]);
+    return debouncedValue;
+}
+
+export { useDebounce };
+//# sourceMappingURL=useDebounce.mjs.map

package/dist/admin/admin/src/hooks/useDebounce.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDebounce.mjs","sources":["../../../../../admin/src/hooks/useDebounce.ts"],"sourcesContent":["import * as React from 'react';\n\nexport function useDebounce<TValue>(value: TValue, delay: number): TValue {\n  const [debouncedValue, setDebouncedValue] = React.useState(value);\n\n  React.useEffect(() => {\n    const handler = setTimeout(() => {\n      setDebouncedValue(value);\n    }, delay);\n\n    return () => {\n      clearTimeout(handler);\n    };\n  }, [value, delay]);\n\n  return debouncedValue;\n}\n"],"names":["useDebounce","value","delay","debouncedValue","setDebouncedValue","React","useState","useEffect","handler","setTimeout","clearTimeout"],"mappings":";;AAEO,SAASA,WAAAA,CAAoBC,KAAa,EAAEC,KAAa,EAAA;AAC9D,IAAA,MAAM,CAACC,cAAAA,EAAgBC,iBAAAA,CAAkB,GAAGC,KAAAA,CAAMC,QAAQ,CAACL,KAAAA,CAAAA;AAE3DI,IAAAA,KAAAA,CAAME,SAAS,CAAC,IAAA;AACd,QAAA,MAAMC,UAAUC,UAAAA,CAAW,IAAA;YACzBL,iBAAAA,CAAkBH,KAAAA,CAAAA;QACpB,CAAA,EAAGC,KAAAA,CAAAA;QAEH,OAAO,IAAA;YACLQ,YAAAA,CAAaF,OAAAA,CAAAA;AACf,QAAA,CAAA;IACF,CAAA,EAAG;AAACP,QAAAA,KAAAA;AAAOC,QAAAA;AAAM,KAAA,CAAA;IAEjB,OAAOC,cAAAA;AACT;;;;"}

package/dist/admin/admin/src/hooks/useDeviceType.js

@@ -0,0 +1,44 @@
+'use strict';
+
+var React = require('react');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+/**
+ * Hook to detect the device type used by the user
+ * @returns {DeviceType} The device type
+ */ function useDeviceType() {
+    const [deviceType, setDeviceType] = React__namespace.useState('desktop');
+    React__namespace.useEffect(()=>{
+        const userAgent = navigator.userAgent.toLowerCase();
+        if (/mobile|iphone|ipod|android.*mobile|windows phone/.test(userAgent)) {
+            setDeviceType('mobile');
+        } else if (/ipad|tablet|android(?!.*mobile)/.test(userAgent)) {
+            setDeviceType('tablet');
+        } else {
+            setDeviceType('desktop');
+        }
+    }, []);
+    return deviceType;
+}
+
+exports.useDeviceType = useDeviceType;
+//# sourceMappingURL=useDeviceType.js.map

package/dist/admin/admin/src/hooks/useDeviceType.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDeviceType.js","sources":["../../../../../admin/src/hooks/useDeviceType.ts"],"sourcesContent":["import * as React from 'react';\n\nexport type DeviceType = 'mobile' | 'tablet' | 'desktop';\n\n/**\n * Hook to detect the device type used by the user\n * @returns {DeviceType} The device type\n */\nexport function useDeviceType(): DeviceType {\n  const [deviceType, setDeviceType] = React.useState<DeviceType>('desktop');\n\n  React.useEffect(() => {\n    const userAgent = navigator.userAgent.toLowerCase();\n\n    if (/mobile|iphone|ipod|android.*mobile|windows phone/.test(userAgent)) {\n      setDeviceType('mobile');\n    } else if (/ipad|tablet|android(?!.*mobile)/.test(userAgent)) {\n      setDeviceType('tablet');\n    } else {\n      setDeviceType('desktop');\n    }\n  }, []);\n\n  return deviceType;\n}\n"],"names":["useDeviceType","deviceType","setDeviceType","React","useState","useEffect","userAgent","navigator","toLowerCase","test"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAIA;;;AAGC,IACM,SAASA,aAAAA,GAAAA;AACd,IAAA,MAAM,CAACC,UAAAA,EAAYC,aAAAA,CAAc,GAAGC,gBAAAA,CAAMC,QAAQ,CAAa,SAAA,CAAA;AAE/DD,IAAAA,gBAAAA,CAAME,SAAS,CAAC,IAAA;AACd,QAAA,MAAMC,SAAAA,GAAYC,SAAAA,CAAUD,SAAS,CAACE,WAAW,EAAA;QAEjD,IAAI,kDAAA,CAAmDC,IAAI,CAACH,SAAAA,CAAAA,EAAY;YACtEJ,aAAAA,CAAc,QAAA,CAAA;AAChB,QAAA,CAAA,MAAO,IAAI,iCAAA,CAAkCO,IAAI,CAACH,SAAAA,CAAAA,EAAY;YAC5DJ,aAAAA,CAAc,QAAA,CAAA;QAChB,CAAA,MAAO;YACLA,aAAAA,CAAc,SAAA,CAAA;AAChB,QAAA;AACF,IAAA,CAAA,EAAG,EAAE,CAAA;IAEL,OAAOD,UAAAA;AACT;;;;"}

package/dist/admin/admin/src/hooks/useDeviceType.mjs

@@ -0,0 +1,22 @@
+import * as React from 'react';
+
+/**
+ * Hook to detect the device type used by the user
+ * @returns {DeviceType} The device type
+ */ function useDeviceType() {
+    const [deviceType, setDeviceType] = React.useState('desktop');
+    React.useEffect(()=>{
+        const userAgent = navigator.userAgent.toLowerCase();
+        if (/mobile|iphone|ipod|android.*mobile|windows phone/.test(userAgent)) {
+            setDeviceType('mobile');
+        } else if (/ipad|tablet|android(?!.*mobile)/.test(userAgent)) {
+            setDeviceType('tablet');
+        } else {
+            setDeviceType('desktop');
+        }
+    }, []);
+    return deviceType;
+}
+
+export { useDeviceType };
+//# sourceMappingURL=useDeviceType.mjs.map

package/dist/admin/admin/src/hooks/useDeviceType.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDeviceType.mjs","sources":["../../../../../admin/src/hooks/useDeviceType.ts"],"sourcesContent":["import * as React from 'react';\n\nexport type DeviceType = 'mobile' | 'tablet' | 'desktop';\n\n/**\n * Hook to detect the device type used by the user\n * @returns {DeviceType} The device type\n */\nexport function useDeviceType(): DeviceType {\n  const [deviceType, setDeviceType] = React.useState<DeviceType>('desktop');\n\n  React.useEffect(() => {\n    const userAgent = navigator.userAgent.toLowerCase();\n\n    if (/mobile|iphone|ipod|android.*mobile|windows phone/.test(userAgent)) {\n      setDeviceType('mobile');\n    } else if (/ipad|tablet|android(?!.*mobile)/.test(userAgent)) {\n      setDeviceType('tablet');\n    } else {\n      setDeviceType('desktop');\n    }\n  }, []);\n\n  return deviceType;\n}\n"],"names":["useDeviceType","deviceType","setDeviceType","React","useState","useEffect","userAgent","navigator","toLowerCase","test"],"mappings":";;AAIA;;;AAGC,IACM,SAASA,aAAAA,GAAAA;AACd,IAAA,MAAM,CAACC,UAAAA,EAAYC,aAAAA,CAAc,GAAGC,KAAAA,CAAMC,QAAQ,CAAa,SAAA,CAAA;AAE/DD,IAAAA,KAAAA,CAAME,SAAS,CAAC,IAAA;AACd,QAAA,MAAMC,SAAAA,GAAYC,SAAAA,CAAUD,SAAS,CAACE,WAAW,EAAA;QAEjD,IAAI,kDAAA,CAAmDC,IAAI,CAACH,SAAAA,CAAAA,EAAY;YACtEJ,aAAAA,CAAc,QAAA,CAAA;AAChB,QAAA,CAAA,MAAO,IAAI,iCAAA,CAAkCO,IAAI,CAACH,SAAAA,CAAAA,EAAY;YAC5DJ,aAAAA,CAAc,QAAA,CAAA;QAChB,CAAA,MAAO;YACLA,aAAAA,CAAc,SAAA,CAAA;AAChB,QAAA;AACF,IAAA,CAAA,EAAG,EAAE,CAAA;IAEL,OAAOD,UAAAA;AACT;;;;"}

package/dist/admin/admin/src/hooks/useElementOnScreen.js

@@ -0,0 +1,52 @@
+'use strict';
+
+var React = require('react');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+/**
+ * Hook that returns a ref to an element and a boolean indicating if the element is in the viewport
+ * or in the element specified in `options.root`.
+ */ const useElementOnScreen = (onVisiblityChange, options)=>{
+    const containerRef = React__namespace.useRef(null);
+    React__namespace.useEffect(()=>{
+        const containerEl = containerRef.current;
+        const observer = new IntersectionObserver(([entry])=>{
+            onVisiblityChange(entry.isIntersecting);
+        }, options);
+        if (containerEl) {
+            observer.observe(containerRef.current);
+        }
+        return ()=>{
+            if (containerEl) {
+                observer.disconnect();
+            }
+        };
+    }, [
+        containerRef,
+        options,
+        onVisiblityChange
+    ]);
+    return containerRef;
+};
+
+exports.useElementOnScreen = useElementOnScreen;
+//# sourceMappingURL=useElementOnScreen.js.map

package/dist/admin/admin/src/hooks/useElementOnScreen.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useElementOnScreen.js","sources":["../../../../../admin/src/hooks/useElementOnScreen.ts"],"sourcesContent":["import * as React from 'react';\n\n/**\n * Hook that returns a ref to an element and a boolean indicating if the element is in the viewport\n * or in the element specified in `options.root`.\n */\nconst useElementOnScreen = <TElement extends HTMLElement = HTMLElement>(\n  onVisiblityChange: (isVisible: boolean) => void,\n  options?: IntersectionObserverInit\n): React.RefObject<TElement> => {\n  const containerRef = React.useRef<TElement>(null);\n\n  React.useEffect(() => {\n    const containerEl = containerRef.current;\n    const observer = new IntersectionObserver(([entry]) => {\n      onVisiblityChange(entry.isIntersecting);\n    }, options);\n\n    if (containerEl) {\n      observer.observe(containerRef.current);\n    }\n\n    return () => {\n      if (containerEl) {\n        observer.disconnect();\n      }\n    };\n  }, [containerRef, options, onVisiblityChange]);\n\n  return containerRef;\n};\n\nexport { useElementOnScreen };\n"],"names":["useElementOnScreen","onVisiblityChange","options","containerRef","React","useRef","useEffect","containerEl","current","observer","IntersectionObserver","entry","isIntersecting","observe","disconnect"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAEA;;;IAIA,MAAMA,kBAAAA,GAAqB,CACzBC,iBAAAA,EACAC,OAAAA,GAAAA;IAEA,MAAMC,YAAAA,GAAeC,gBAAAA,CAAMC,MAAM,CAAW,IAAA,CAAA;AAE5CD,IAAAA,gBAAAA,CAAME,SAAS,CAAC,IAAA;QACd,MAAMC,WAAAA,GAAcJ,aAAaK,OAAO;AACxC,QAAA,MAAMC,QAAAA,GAAW,IAAIC,oBAAAA,CAAqB,CAAC,CAACC,KAAAA,CAAM,GAAA;AAChDV,YAAAA,iBAAAA,CAAkBU,MAAMC,cAAc,CAAA;QACxC,CAAA,EAAGV,OAAAA,CAAAA;AAEH,QAAA,IAAIK,WAAAA,EAAa;YACfE,QAAAA,CAASI,OAAO,CAACV,YAAAA,CAAaK,OAAO,CAAA;AACvC,QAAA;QAEA,OAAO,IAAA;AACL,YAAA,IAAID,WAAAA,EAAa;AACfE,gBAAAA,QAAAA,CAASK,UAAU,EAAA;AACrB,YAAA;AACF,QAAA,CAAA;IACF,CAAA,EAAG;AAACX,QAAAA,YAAAA;AAAcD,QAAAA,OAAAA;AAASD,QAAAA;AAAkB,KAAA,CAAA;IAE7C,OAAOE,YAAAA;AACT;;;;"}

package/dist/admin/admin/src/hooks/useElementOnScreen.mjs

@@ -0,0 +1,30 @@
+import * as React from 'react';
+
+/**
+ * Hook that returns a ref to an element and a boolean indicating if the element is in the viewport
+ * or in the element specified in `options.root`.
+ */ const useElementOnScreen = (onVisiblityChange, options)=>{
+    const containerRef = React.useRef(null);
+    React.useEffect(()=>{
+        const containerEl = containerRef.current;
+        const observer = new IntersectionObserver(([entry])=>{
+            onVisiblityChange(entry.isIntersecting);
+        }, options);
+        if (containerEl) {
+            observer.observe(containerRef.current);
+        }
+        return ()=>{
+            if (containerEl) {
+                observer.disconnect();
+            }
+        };
+    }, [
+        containerRef,
+        options,
+        onVisiblityChange
+    ]);
+    return containerRef;
+};
+
+export { useElementOnScreen };
+//# sourceMappingURL=useElementOnScreen.mjs.map

package/dist/admin/admin/src/hooks/useElementOnScreen.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useElementOnScreen.mjs","sources":["../../../../../admin/src/hooks/useElementOnScreen.ts"],"sourcesContent":["import * as React from 'react';\n\n/**\n * Hook that returns a ref to an element and a boolean indicating if the element is in the viewport\n * or in the element specified in `options.root`.\n */\nconst useElementOnScreen = <TElement extends HTMLElement = HTMLElement>(\n  onVisiblityChange: (isVisible: boolean) => void,\n  options?: IntersectionObserverInit\n): React.RefObject<TElement> => {\n  const containerRef = React.useRef<TElement>(null);\n\n  React.useEffect(() => {\n    const containerEl = containerRef.current;\n    const observer = new IntersectionObserver(([entry]) => {\n      onVisiblityChange(entry.isIntersecting);\n    }, options);\n\n    if (containerEl) {\n      observer.observe(containerRef.current);\n    }\n\n    return () => {\n      if (containerEl) {\n        observer.disconnect();\n      }\n    };\n  }, [containerRef, options, onVisiblityChange]);\n\n  return containerRef;\n};\n\nexport { useElementOnScreen };\n"],"names":["useElementOnScreen","onVisiblityChange","options","containerRef","React","useRef","useEffect","containerEl","current","observer","IntersectionObserver","entry","isIntersecting","observe","disconnect"],"mappings":";;AAEA;;;IAIA,MAAMA,kBAAAA,GAAqB,CACzBC,iBAAAA,EACAC,OAAAA,GAAAA;IAEA,MAAMC,YAAAA,GAAeC,KAAAA,CAAMC,MAAM,CAAW,IAAA,CAAA;AAE5CD,IAAAA,KAAAA,CAAME,SAAS,CAAC,IAAA;QACd,MAAMC,WAAAA,GAAcJ,aAAaK,OAAO;AACxC,QAAA,MAAMC,QAAAA,GAAW,IAAIC,oBAAAA,CAAqB,CAAC,CAACC,KAAAA,CAAM,GAAA;AAChDV,YAAAA,iBAAAA,CAAkBU,MAAMC,cAAc,CAAA;QACxC,CAAA,EAAGV,OAAAA,CAAAA;AAEH,QAAA,IAAIK,WAAAA,EAAa;YACfE,QAAAA,CAASI,OAAO,CAACV,YAAAA,CAAaK,OAAO,CAAA;AACvC,QAAA;QAEA,OAAO,IAAA;AACL,YAAA,IAAID,WAAAA,EAAa;AACfE,gBAAAA,QAAAA,CAASK,UAAU,EAAA;AACrB,YAAA;AACF,QAAA,CAAA;IACF,CAAA,EAAG;AAACX,QAAAA,YAAAA;AAAcD,QAAAA,OAAAA;AAASD,QAAAA;AAAkB,KAAA,CAAA;IAE7C,OAAOE,YAAAA;AACT;;;;"}

package/dist/admin/admin/src/hooks/useEnterprise.js

@@ -0,0 +1,60 @@
+'use strict';
+
+var React = require('react');
+var designSystem = require('@strapi/design-system');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+function isEnterprise() {
+    return window.strapi.isEE;
+}
+const useEnterprise = (ceData, eeCallback, opts = {})=>{
+    const { defaultValue = null, combine = (_ceData, eeData)=>eeData, enabled = true } = opts;
+    const eeCallbackRef = designSystem.useCallbackRef(eeCallback);
+    const combineCallbackRef = designSystem.useCallbackRef(combine);
+    // We have to use a nested object here, because functions (e.g. Components)
+    // can not be stored as value directly
+    const [{ data }, setData] = React__namespace.useState({
+        data: isEnterprise() && enabled ? defaultValue : ceData
+    });
+    React__namespace.useEffect(()=>{
+        async function importEE() {
+            const eeData = await eeCallbackRef();
+            const combinedValue = combineCallbackRef(ceData, eeData);
+            setData({
+                data: combinedValue ? combinedValue : eeData
+            });
+        }
+        if (isEnterprise() && enabled) {
+            importEE();
+        }
+    }, [
+        ceData,
+        eeCallbackRef,
+        combineCallbackRef,
+        enabled
+    ]);
+    // @ts-expect-error – the hook type assertion works in practice. But seems to have issues here...
+    return data;
+};
+
+exports.useEnterprise = useEnterprise;
+//# sourceMappingURL=useEnterprise.js.map

package/dist/admin/admin/src/hooks/useEnterprise.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useEnterprise.js","sources":["../../../../../admin/src/hooks/useEnterprise.ts"],"sourcesContent":["import * as React from 'react';\n\nimport { useCallbackRef } from '@strapi/design-system';\n\nfunction isEnterprise() {\n  return window.strapi.isEE;\n}\n\nexport interface UseEnterpriseOptions<TCEData, TEEData, TDefaultValue, TCombinedValue> {\n  defaultValue?: TDefaultValue;\n  combine?: (ceData: TCEData, eeData: TEEData) => TCombinedValue;\n  enabled?: boolean;\n}\n\ntype UseEnterpriseReturn<TCEData, TEEData, TDefaultValue, TCombinedValue> =\n  TDefaultValue extends null\n    ? TCEData | TEEData | TCombinedValue | null\n    : TCEData | TEEData | TCombinedValue | TDefaultValue;\n\nexport const useEnterprise = <\n  TCEData,\n  TEEData = TCEData,\n  TCombinedValue = TEEData,\n  TDefaultValue = TCEData,\n>(\n  ceData: TCEData,\n  eeCallback: () => Promise<TEEData>,\n  opts: UseEnterpriseOptions<TCEData, TEEData, TDefaultValue, TCombinedValue> = {}\n): UseEnterpriseReturn<TCEData, TEEData, TDefaultValue, TCombinedValue> => {\n  const { defaultValue = null, combine = (_ceData, eeData) => eeData, enabled = true } = opts;\n  const eeCallbackRef = useCallbackRef(eeCallback);\n  const combineCallbackRef = useCallbackRef(combine);\n\n  // We have to use a nested object here, because functions (e.g. Components)\n  // can not be stored as value directly\n  const [{ data }, setData] = React.useState<{\n    data: TCEData | TEEData | TDefaultValue | TCombinedValue | null;\n  }>({\n    data: isEnterprise() && enabled ? defaultValue : ceData,\n  });\n\n  React.useEffect(() => {\n    async function importEE() {\n      const eeData = await eeCallbackRef();\n      const combinedValue = combineCallbackRef(ceData, eeData);\n\n      setData({ data: combinedValue ? combinedValue : eeData });\n    }\n\n    if (isEnterprise() && enabled) {\n      importEE();\n    }\n  }, [ceData, eeCallbackRef, combineCallbackRef, enabled]);\n\n  // @ts-expect-error – the hook type assertion works in practice. But seems to have issues here...\n  return data;\n};\n"],"names":["isEnterprise","window","strapi","isEE","useEnterprise","ceData","eeCallback","opts","defaultValue","combine","_ceData","eeData","enabled","eeCallbackRef","useCallbackRef","combineCallbackRef","data","setData","React","useState","useEffect","importEE","combinedValue"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAIA,SAASA,YAAAA,GAAAA;IACP,OAAOC,MAAAA,CAAOC,MAAM,CAACC,IAAI;AAC3B;MAaaC,aAAAA,GAAgB,CAM3BC,QACAC,UAAAA,EACAC,IAAAA,GAA8E,EAAE,GAAA;AAEhF,IAAA,MAAM,EAAEC,YAAAA,GAAe,IAAI,EAAEC,OAAAA,GAAU,CAACC,OAAAA,EAASC,MAAAA,GAAWA,MAAM,EAAEC,OAAAA,GAAU,IAAI,EAAE,GAAGL,IAAAA;AACvF,IAAA,MAAMM,gBAAgBC,2BAAAA,CAAeR,UAAAA,CAAAA;AACrC,IAAA,MAAMS,qBAAqBD,2BAAAA,CAAeL,OAAAA,CAAAA;;;IAI1C,MAAM,CAAC,EAAEO,IAAI,EAAE,EAAEC,OAAAA,CAAQ,GAAGC,gBAAAA,CAAMC,QAAQ,CAEvC;QACDH,IAAAA,EAAMhB,YAAAA,EAAAA,IAAkBY,UAAUJ,YAAAA,GAAeH;AACnD,KAAA,CAAA;AAEAa,IAAAA,gBAAAA,CAAME,SAAS,CAAC,IAAA;QACd,eAAeC,QAAAA,GAAAA;AACb,YAAA,MAAMV,SAAS,MAAME,aAAAA,EAAAA;YACrB,MAAMS,aAAAA,GAAgBP,mBAAmBV,MAAAA,EAAQM,MAAAA,CAAAA;YAEjDM,OAAAA,CAAQ;AAAED,gBAAAA,IAAAA,EAAMM,gBAAgBA,aAAAA,GAAgBX;AAAO,aAAA,CAAA;AACzD,QAAA;AAEA,QAAA,IAAIX,kBAAkBY,OAAAA,EAAS;AAC7BS,YAAAA,QAAAA,EAAAA;AACF,QAAA;IACF,CAAA,EAAG;AAAChB,QAAAA,MAAAA;AAAQQ,QAAAA,aAAAA;AAAeE,QAAAA,kBAAAA;AAAoBH,QAAAA;AAAQ,KAAA,CAAA;;IAGvD,OAAOI,IAAAA;AACT;;;;"}

package/dist/admin/admin/src/hooks/useEnterprise.mjs

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { useCallbackRef } from '@strapi/design-system';
+
+function isEnterprise() {
+    return window.strapi.isEE;
+}
+const useEnterprise = (ceData, eeCallback, opts = {})=>{
+    const { defaultValue = null, combine = (_ceData, eeData)=>eeData, enabled = true } = opts;
+    const eeCallbackRef = useCallbackRef(eeCallback);
+    const combineCallbackRef = useCallbackRef(combine);
+    // We have to use a nested object here, because functions (e.g. Components)
+    // can not be stored as value directly
+    const [{ data }, setData] = React.useState({
+        data: isEnterprise() && enabled ? defaultValue : ceData
+    });
+    React.useEffect(()=>{
+        async function importEE() {
+            const eeData = await eeCallbackRef();
+            const combinedValue = combineCallbackRef(ceData, eeData);
+            setData({
+                data: combinedValue ? combinedValue : eeData
+            });
+        }
+        if (isEnterprise() && enabled) {
+            importEE();
+        }
+    }, [
+        ceData,
+        eeCallbackRef,
+        combineCallbackRef,
+        enabled
+    ]);
+    // @ts-expect-error – the hook type assertion works in practice. But seems to have issues here...
+    return data;
+};
+
+export { useEnterprise };
+//# sourceMappingURL=useEnterprise.mjs.map

package/dist/admin/admin/src/hooks/useEnterprise.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useEnterprise.mjs","sources":["../../../../../admin/src/hooks/useEnterprise.ts"],"sourcesContent":["import * as React from 'react';\n\nimport { useCallbackRef } from '@strapi/design-system';\n\nfunction isEnterprise() {\n  return window.strapi.isEE;\n}\n\nexport interface UseEnterpriseOptions<TCEData, TEEData, TDefaultValue, TCombinedValue> {\n  defaultValue?: TDefaultValue;\n  combine?: (ceData: TCEData, eeData: TEEData) => TCombinedValue;\n  enabled?: boolean;\n}\n\ntype UseEnterpriseReturn<TCEData, TEEData, TDefaultValue, TCombinedValue> =\n  TDefaultValue extends null\n    ? TCEData | TEEData | TCombinedValue | null\n    : TCEData | TEEData | TCombinedValue | TDefaultValue;\n\nexport const useEnterprise = <\n  TCEData,\n  TEEData = TCEData,\n  TCombinedValue = TEEData,\n  TDefaultValue = TCEData,\n>(\n  ceData: TCEData,\n  eeCallback: () => Promise<TEEData>,\n  opts: UseEnterpriseOptions<TCEData, TEEData, TDefaultValue, TCombinedValue> = {}\n): UseEnterpriseReturn<TCEData, TEEData, TDefaultValue, TCombinedValue> => {\n  const { defaultValue = null, combine = (_ceData, eeData) => eeData, enabled = true } = opts;\n  const eeCallbackRef = useCallbackRef(eeCallback);\n  const combineCallbackRef = useCallbackRef(combine);\n\n  // We have to use a nested object here, because functions (e.g. Components)\n  // can not be stored as value directly\n  const [{ data }, setData] = React.useState<{\n    data: TCEData | TEEData | TDefaultValue | TCombinedValue | null;\n  }>({\n    data: isEnterprise() && enabled ? defaultValue : ceData,\n  });\n\n  React.useEffect(() => {\n    async function importEE() {\n      const eeData = await eeCallbackRef();\n      const combinedValue = combineCallbackRef(ceData, eeData);\n\n      setData({ data: combinedValue ? combinedValue : eeData });\n    }\n\n    if (isEnterprise() && enabled) {\n      importEE();\n    }\n  }, [ceData, eeCallbackRef, combineCallbackRef, enabled]);\n\n  // @ts-expect-error – the hook type assertion works in practice. But seems to have issues here...\n  return data;\n};\n"],"names":["isEnterprise","window","strapi","isEE","useEnterprise","ceData","eeCallback","opts","defaultValue","combine","_ceData","eeData","enabled","eeCallbackRef","useCallbackRef","combineCallbackRef","data","setData","React","useState","useEffect","importEE","combinedValue"],"mappings":";;;AAIA,SAASA,YAAAA,GAAAA;IACP,OAAOC,MAAAA,CAAOC,MAAM,CAACC,IAAI;AAC3B;MAaaC,aAAAA,GAAgB,CAM3BC,QACAC,UAAAA,EACAC,IAAAA,GAA8E,EAAE,GAAA;AAEhF,IAAA,MAAM,EAAEC,YAAAA,GAAe,IAAI,EAAEC,OAAAA,GAAU,CAACC,OAAAA,EAASC,MAAAA,GAAWA,MAAM,EAAEC,OAAAA,GAAU,IAAI,EAAE,GAAGL,IAAAA;AACvF,IAAA,MAAMM,gBAAgBC,cAAAA,CAAeR,UAAAA,CAAAA;AACrC,IAAA,MAAMS,qBAAqBD,cAAAA,CAAeL,OAAAA,CAAAA;;;IAI1C,MAAM,CAAC,EAAEO,IAAI,EAAE,EAAEC,OAAAA,CAAQ,GAAGC,KAAAA,CAAMC,QAAQ,CAEvC;QACDH,IAAAA,EAAMhB,YAAAA,EAAAA,IAAkBY,UAAUJ,YAAAA,GAAeH;AACnD,KAAA,CAAA;AAEAa,IAAAA,KAAAA,CAAME,SAAS,CAAC,IAAA;QACd,eAAeC,QAAAA,GAAAA;AACb,YAAA,MAAMV,SAAS,MAAME,aAAAA,EAAAA;YACrB,MAAMS,aAAAA,GAAgBP,mBAAmBV,MAAAA,EAAQM,MAAAA,CAAAA;YAEjDM,OAAAA,CAAQ;AAAED,gBAAAA,IAAAA,EAAMM,gBAAgBA,aAAAA,GAAgBX;AAAO,aAAA,CAAA;AACzD,QAAA;AAEA,QAAA,IAAIX,kBAAkBY,OAAAA,EAAS;AAC7BS,YAAAA,QAAAA,EAAAA;AACF,QAAA;IACF,CAAA,EAAG;AAAChB,QAAAA,MAAAA;AAAQQ,QAAAA,aAAAA;AAAeE,QAAAA,kBAAAA;AAAoBH,QAAAA;AAAQ,KAAA,CAAA;;IAGvD,OAAOI,IAAAA;AACT;;;;"}

package/dist/admin/admin/src/hooks/useFetchClient.js

@@ -0,0 +1,76 @@
+'use strict';
+
+var React = require('react');
+var getFetchClient = require('../utils/getFetchClient.js');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+/**
+ * @public
+ * @description This is an abstraction around the native fetch exposed by a hook. It provides a simple interface to handle API calls
+ * to the Strapi backend.
+ * It handles request cancellations inside the hook with an {@link https://developer.mozilla.org/en-US/docs/Web/API/AbortController} AbortController.
+ * This is typically triggered when the component is unmounted so all the requests that it is currently making are aborted.
+ * The expected URL style includes either a protocol (such as HTTP or HTTPS) or a relative URL. The URLs with domain and path but not protocol are not allowed (ex: `www.example.com`).
+ * @example
+ * ```tsx
+ * import * as React from 'react';
+ * import { useFetchClient } from '@strapi/admin/admin';
+ *
+ * const MyComponent = () => {
+ *   const [items, setItems] = React.useState([]);
+ *   const { get } = useFetchClient();
+ *   const requestURL = "/some-endpoint";
+ *
+ *   const handleGetData = async () => {
+ *     const { data } = await get(requestURL);
+ *     setItems(data.items);
+ *   };
+ *
+ *   return (
+ *    <div>
+ *      <div>
+ *       {
+ *         items && items.map(item => <h2 key={item.uuid}>{item.name}</h2>))
+ *       }
+ *     </div>
+ *    </div>
+ *   );
+ * };
+ * ```
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/AbortController} AbortController.
+ */ const useFetchClient = ()=>{
+    const controller = React__namespace.useRef(null);
+    if (controller.current === null) {
+        controller.current = new AbortController();
+    }
+    React__namespace.useEffect(()=>{
+        return ()=>{
+            controller.current.abort();
+        };
+    }, []);
+    return React__namespace.useMemo(()=>getFetchClient.getFetchClient({
+            signal: controller.current.signal
+        }), []);
+};
+
+exports.useFetchClient = useFetchClient;
+//# sourceMappingURL=useFetchClient.js.map

package/dist/admin/admin/src/hooks/useFetchClient.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFetchClient.js","sources":["../../../../../admin/src/hooks/useFetchClient.ts"],"sourcesContent":["import * as React from 'react';\n\nimport { getFetchClient } from '../utils/getFetchClient';\n\n/**\n * @public\n * @description This is an abstraction around the native fetch exposed by a hook. It provides a simple interface to handle API calls\n * to the Strapi backend.\n * It handles request cancellations inside the hook with an {@link https://developer.mozilla.org/en-US/docs/Web/API/AbortController} AbortController.\n * This is typically triggered when the component is unmounted so all the requests that it is currently making are aborted.\n * The expected URL style includes either a protocol (such as HTTP or HTTPS) or a relative URL. The URLs with domain and path but not protocol are not allowed (ex: `www.example.com`).\n * @example\n * ```tsx\n * import * as React from 'react';\n * import { useFetchClient } from '@strapi/admin/admin';\n *\n * const MyComponent = () => {\n *   const [items, setItems] = React.useState([]);\n *   const { get } = useFetchClient();\n *   const requestURL = \"/some-endpoint\";\n *\n *   const handleGetData = async () => {\n *     const { data } = await get(requestURL);\n *     setItems(data.items);\n *   };\n *\n *   return (\n *    <div>\n *      <div>\n *       {\n *         items && items.map(item => <h2 key={item.uuid}>{item.name}</h2>))\n *       }\n *     </div>\n *    </div>\n *   );\n * };\n * ```\n * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/AbortController} AbortController.\n */\nconst useFetchClient = () => {\n  const controller = React.useRef<AbortController | null>(null);\n\n  if (controller.current === null) {\n    controller.current = new AbortController();\n  }\n\n  React.useEffect(() => {\n    return () => {\n      controller.current!.abort();\n    };\n  }, []);\n\n  return React.useMemo(\n    () =>\n      getFetchClient({\n        signal: controller.current!.signal,\n      }),\n    []\n  );\n};\n\nexport { useFetchClient };\n"],"names":["useFetchClient","controller","React","useRef","current","AbortController","useEffect","abort","useMemo","getFetchClient","signal"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkCC,UACKA,cAAAA,GAAiB,IAAA;IACrB,MAAMC,UAAAA,GAAaC,gBAAAA,CAAMC,MAAM,CAAyB,IAAA,CAAA;IAExD,IAAIF,UAAAA,CAAWG,OAAO,KAAK,IAAA,EAAM;QAC/BH,UAAAA,CAAWG,OAAO,GAAG,IAAIC,eAAAA,EAAAA;AAC3B,IAAA;AAEAH,IAAAA,gBAAAA,CAAMI,SAAS,CAAC,IAAA;QACd,OAAO,IAAA;YACLL,UAAAA,CAAWG,OAAO,CAAEG,KAAK,EAAA;AAC3B,QAAA,CAAA;AACF,IAAA,CAAA,EAAG,EAAE,CAAA;AAEL,IAAA,OAAOL,gBAAAA,CAAMM,OAAO,CAClB,IACEC,6BAAAA,CAAe;YACbC,MAAAA,EAAQT,UAAAA,CAAWG,OAAO,CAAEM;AAC9B,SAAA,CAAA,EACF,EAAE,CAAA;AAEN;;;;"}

package/dist/admin/admin/src/hooks/useFetchClient.mjs

@@ -0,0 +1,54 @@
+import * as React from 'react';
+import { getFetchClient } from '../utils/getFetchClient.mjs';
+
+/**
+ * @public
+ * @description This is an abstraction around the native fetch exposed by a hook. It provides a simple interface to handle API calls
+ * to the Strapi backend.
+ * It handles request cancellations inside the hook with an {@link https://developer.mozilla.org/en-US/docs/Web/API/AbortController} AbortController.
+ * This is typically triggered when the component is unmounted so all the requests that it is currently making are aborted.
+ * The expected URL style includes either a protocol (such as HTTP or HTTPS) or a relative URL. The URLs with domain and path but not protocol are not allowed (ex: `www.example.com`).
+ * @example
+ * ```tsx
+ * import * as React from 'react';
+ * import { useFetchClient } from '@strapi/admin/admin';
+ *
+ * const MyComponent = () => {
+ *   const [items, setItems] = React.useState([]);
+ *   const { get } = useFetchClient();
+ *   const requestURL = "/some-endpoint";
+ *
+ *   const handleGetData = async () => {
+ *     const { data } = await get(requestURL);
+ *     setItems(data.items);
+ *   };
+ *
+ *   return (
+ *    <div>
+ *      <div>
+ *       {
+ *         items && items.map(item => <h2 key={item.uuid}>{item.name}</h2>))
+ *       }
+ *     </div>
+ *    </div>
+ *   );
+ * };
+ * ```
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/AbortController} AbortController.
+ */ const useFetchClient = ()=>{
+    const controller = React.useRef(null);
+    if (controller.current === null) {
+        controller.current = new AbortController();
+    }
+    React.useEffect(()=>{
+        return ()=>{
+            controller.current.abort();
+        };
+    }, []);
+    return React.useMemo(()=>getFetchClient({
+            signal: controller.current.signal
+        }), []);
+};
+
+export { useFetchClient };
+//# sourceMappingURL=useFetchClient.mjs.map

package/dist/admin/admin/src/hooks/useFetchClient.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFetchClient.mjs","sources":["../../../../../admin/src/hooks/useFetchClient.ts"],"sourcesContent":["import * as React from 'react';\n\nimport { getFetchClient } from '../utils/getFetchClient';\n\n/**\n * @public\n * @description This is an abstraction around the native fetch exposed by a hook. It provides a simple interface to handle API calls\n * to the Strapi backend.\n * It handles request cancellations inside the hook with an {@link https://developer.mozilla.org/en-US/docs/Web/API/AbortController} AbortController.\n * This is typically triggered when the component is unmounted so all the requests that it is currently making are aborted.\n * The expected URL style includes either a protocol (such as HTTP or HTTPS) or a relative URL. The URLs with domain and path but not protocol are not allowed (ex: `www.example.com`).\n * @example\n * ```tsx\n * import * as React from 'react';\n * import { useFetchClient } from '@strapi/admin/admin';\n *\n * const MyComponent = () => {\n *   const [items, setItems] = React.useState([]);\n *   const { get } = useFetchClient();\n *   const requestURL = \"/some-endpoint\";\n *\n *   const handleGetData = async () => {\n *     const { data } = await get(requestURL);\n *     setItems(data.items);\n *   };\n *\n *   return (\n *    <div>\n *      <div>\n *       {\n *         items && items.map(item => <h2 key={item.uuid}>{item.name}</h2>))\n *       }\n *     </div>\n *    </div>\n *   );\n * };\n * ```\n * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/AbortController} AbortController.\n */\nconst useFetchClient = () => {\n  const controller = React.useRef<AbortController | null>(null);\n\n  if (controller.current === null) {\n    controller.current = new AbortController();\n  }\n\n  React.useEffect(() => {\n    return () => {\n      controller.current!.abort();\n    };\n  }, []);\n\n  return React.useMemo(\n    () =>\n      getFetchClient({\n        signal: controller.current!.signal,\n      }),\n    []\n  );\n};\n\nexport { useFetchClient };\n"],"names":["useFetchClient","controller","React","useRef","current","AbortController","useEffect","abort","useMemo","getFetchClient","signal"],"mappings":";;;AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkCC,UACKA,cAAAA,GAAiB,IAAA;IACrB,MAAMC,UAAAA,GAAaC,KAAAA,CAAMC,MAAM,CAAyB,IAAA,CAAA;IAExD,IAAIF,UAAAA,CAAWG,OAAO,KAAK,IAAA,EAAM;QAC/BH,UAAAA,CAAWG,OAAO,GAAG,IAAIC,eAAAA,EAAAA;AAC3B,IAAA;AAEAH,IAAAA,KAAAA,CAAMI,SAAS,CAAC,IAAA;QACd,OAAO,IAAA;YACLL,UAAAA,CAAWG,OAAO,CAAEG,KAAK,EAAA;AAC3B,QAAA,CAAA;AACF,IAAA,CAAA,EAAG,EAAE,CAAA;AAEL,IAAA,OAAOL,KAAAA,CAAMM,OAAO,CAClB,IACEC,cAAAA,CAAe;YACbC,MAAAA,EAAQT,UAAAA,CAAWG,OAAO,CAAEM;AAC9B,SAAA,CAAA,EACF,EAAE,CAAA;AAEN;;;;"}

package/dist/admin/admin/src/hooks/useFocusInputField.js

@@ -0,0 +1,46 @@
+'use strict';
+
+var React = require('react');
+var reactRouterDom = require('react-router-dom');
+
+/**
+ * @description Given the name of an input field (this does not need to be the name you pass as a prop to the DOM element),
+ * when the query param `field` matches the name the field will be focused & scrolled into the center of the view.
+ * Uses a callback ref to set the field to ensure asynchronous rendering of inputs does not cause issues e.g. CodeMirror.EditView
+ *
+ * @example
+ * ```tsx
+ * const fieldRef = useFocusInputField('name');
+ *
+ * return (
+ *  <input ref={fieldRef} />
+ * );
+ * ```
+ */ const useFocusInputField = (name)=>{
+    const { search: searchString } = reactRouterDom.useLocation();
+    const search = React.useMemo(()=>new URLSearchParams(searchString), [
+        searchString
+    ]);
+    /**
+   * TODO: remove union and just use `HTMLElement`
+   *
+   * Realistically, it will only be an `HTMLElement` but `TextInput` in the design-system
+   * has an imperativeHandle we can't remove until v2 of the design-system.
+   */ const [field, setField] = React.useState(null);
+    React.useEffect(()=>{
+        if (search.has('field') && search.get('field') === name && field) {
+            field.focus();
+            field.scrollIntoView({
+                block: 'center'
+            });
+        }
+    }, [
+        search,
+        name,
+        field
+    ]);
+    return setField;
+};
+
+exports.useFocusInputField = useFocusInputField;
+//# sourceMappingURL=useFocusInputField.js.map

package/dist/admin/admin/src/hooks/useFocusInputField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFocusInputField.js","sources":["../../../../../admin/src/hooks/useFocusInputField.ts"],"sourcesContent":["import { Ref, useEffect, useMemo, useState } from 'react';\n\nimport { useLocation } from 'react-router-dom';\n\n/**\n * @description Given the name of an input field (this does not need to be the name you pass as a prop to the DOM element),\n * when the query param `field` matches the name the field will be focused & scrolled into the center of the view.\n * Uses a callback ref to set the field to ensure asynchronous rendering of inputs does not cause issues e.g. CodeMirror.EditView\n *\n * @example\n * ```tsx\n * const fieldRef = useFocusInputField('name');\n *\n * return (\n *  <input ref={fieldRef} />\n * );\n * ```\n */\nconst useFocusInputField = <T extends HTMLElement>(name: string): Ref<T> => {\n  const { search: searchString } = useLocation();\n  const search = useMemo(() => new URLSearchParams(searchString), [searchString]);\n\n  /**\n   * TODO: remove union and just use `HTMLElement`\n   *\n   * Realistically, it will only be an `HTMLElement` but `TextInput` in the design-system\n   * has an imperativeHandle we can't remove until v2 of the design-system.\n   */\n  const [field, setField] = useState<HTMLElement | null>(null);\n\n  useEffect(() => {\n    if (search.has('field') && search.get('field') === name && field) {\n      field.focus();\n      field.scrollIntoView({\n        block: 'center',\n      });\n    }\n  }, [search, name, field]);\n\n  return setField;\n};\n\nexport { useFocusInputField };\n"],"names":["useFocusInputField","name","search","searchString","useLocation","useMemo","URLSearchParams","field","setField","useState","useEffect","has","get","focus","scrollIntoView","block"],"mappings":";;;;;AAIA;;;;;;;;;;;;;IAcA,MAAMA,qBAAqB,CAAwBC,IAAAA,GAAAA;AACjD,IAAA,MAAM,EAAEC,MAAAA,EAAQC,YAAY,EAAE,GAAGC,0BAAAA,EAAAA;AACjC,IAAA,MAAMF,MAAAA,GAASG,aAAAA,CAAQ,IAAM,IAAIC,gBAAgBH,YAAAA,CAAAA,EAAe;AAACA,QAAAA;AAAa,KAAA,CAAA;AAE9E;;;;;AAKC,MACD,MAAM,CAACI,KAAAA,EAAOC,QAAAA,CAAS,GAAGC,cAAAA,CAA6B,IAAA,CAAA;IAEvDC,eAAAA,CAAU,IAAA;QACR,IAAIR,MAAAA,CAAOS,GAAG,CAAC,OAAA,CAAA,IAAYT,OAAOU,GAAG,CAAC,OAAA,CAAA,KAAaX,IAAAA,IAAQM,KAAAA,EAAO;AAChEA,YAAAA,KAAAA,CAAMM,KAAK,EAAA;AACXN,YAAAA,KAAAA,CAAMO,cAAc,CAAC;gBACnBC,KAAAA,EAAO;AACT,aAAA,CAAA;AACF,QAAA;IACF,CAAA,EAAG;AAACb,QAAAA,MAAAA;AAAQD,QAAAA,IAAAA;AAAMM,QAAAA;AAAM,KAAA,CAAA;IAExB,OAAOC,QAAAA;AACT;;;;"}