carbon-react 154.3.2 → 154.4.0-beta.0

package/esm/hooks/__internal__/useModalManager/useModalManager.js

@@ -1,85 +1 @@
-import { useEffect, useRef, useCallback } from "react";
-import ModalManager from "../../../components/modal/__internal__/modal-manager";
-const useModalManager = ({
-  open,
-  closeModal,
-  modalRef,
-  setTriggerRefocusFlag,
-  triggerRefocusOnClose = true,
-  topModalOverride = false,
-  focusCallToActionElement
-}) => {
-  const listenerAdded = useRef(false);
-  const modalRegistered = useRef(false);
-  const lastFocusedElement = useRef(null);
-  const handleClose = useCallback(ev => {
-    const isTopmost = ModalManager.isTopmost(modalRef.current);
-    if (isTopmost) {
-      closeModal(ev);
-    }
-  }, [modalRef, closeModal]);
-  const addListener = useCallback(() => {
-    /* istanbul ignore else */
-    if (!listenerAdded.current) {
-      document.addEventListener("keyup", handleClose);
-      listenerAdded.current = true;
-    }
-  }, [handleClose]);
-  const removeListener = useCallback(() => {
-    if (listenerAdded.current) {
-      document.removeEventListener("keyup", handleClose);
-      listenerAdded.current = false;
-    }
-  }, [handleClose]);
-  useEffect(() => {
-    if (open) {
-      addListener();
-    } else {
-      removeListener();
-    }
-  }, [addListener, open, removeListener]);
-  useEffect(() => {
-    return () => {
-      removeListener();
-    };
-  }, [removeListener]);
-  useEffect(() => {
-    if (!lastFocusedElement.current && focusCallToActionElement && open) {
-      lastFocusedElement.current = focusCallToActionElement;
-    }
-  }, [open, focusCallToActionElement]);
-  const registerModal = useCallback(ref => {
-    /* istanbul ignore else */
-    if (!modalRegistered.current) {
-      ModalManager.addModal(ref, setTriggerRefocusFlag, topModalOverride);
-      modalRegistered.current = true;
-    }
-  }, [setTriggerRefocusFlag, topModalOverride]);
-  const unregisterModal = useCallback(ref => {
-    if (modalRegistered.current) {
-      ModalManager.removeModal(ref, triggerRefocusOnClose);
-      if (lastFocusedElement.current) {
-        setTimeout(() => {
-          lastFocusedElement.current?.focus();
-          lastFocusedElement.current = null;
-        }, 0);
-      }
-      modalRegistered.current = false;
-    }
-  }, [triggerRefocusOnClose]);
-  useEffect(() => {
-    const ref = modalRef.current;
-    if (open) {
-      registerModal(ref);
-    } else {
-      unregisterModal(ref);
-    }
-  }, [modalRef, open, registerModal, unregisterModal]);
-  useEffect(() => {
-    const ref = modalRef.current;
-    return () => {
-      unregisterModal(ref);
-    };
-  }, [modalRef, unregisterModal]);
-};
-export default useModalManager;
+import{useRef as r,useCallback as e,useEffect as t}from"react";import n from"../../../components/modal/__internal__/modal-manager.js";const o=({open:o,closeModal:c,modalRef:u,setTriggerRefocusFlag:l,triggerRefocusOnClose:s=!0,topModalOverride:a=!1,focusCallToActionElement:d})=>{const m=r(!1),i=r(!1),p=r(null),f=e((r=>{n.isTopmost(u.current)&&c(r)}),[u,c]),v=e((()=>{m.current||(document.addEventListener("keyup",f),m.current=!0)}),[f]),g=e((()=>{m.current&&(document.removeEventListener("keyup",f),m.current=!1)}),[f]);t((()=>{o?v():g()}),[v,o,g]),t((()=>()=>{g()}),[g]),t((()=>{!p.current&&d&&o&&(p.current=d)}),[o,d]);const M=e((r=>{i.current||(n.addModal(r,l,a),i.current=!0)}),[l,a]),T=e((r=>{i.current&&(n.removeModal(r,s),p.current&&setTimeout((()=>{var r;null===(r=p.current)||void 0===r||r.focus(),p.current=null}),0),i.current=!1)}),[s]);t((()=>{const r=u.current;o?M(r):T(r)}),[u,o,M,T]),t((()=>{const r=u.current;return()=>{T(r)}}),[u,T])};export{o as default};

package/esm/hooks/__internal__/usePrevious/index.js

@@ -1,8 +1 @@
-import { useEffect, useRef } from "react";
-export default function usePrevious(value) {
-  const ref = useRef();
-  useEffect(() => {
-    ref.current = value;
-  });
-  return ref.current;
-}
+import{useRef as r,useEffect as t}from"react";function e(e){const n=r();return t((()=>{n.current=e})),n.current}export{e as default};

package/esm/hooks/__internal__/useResizeObserver/index.js

@@ -1 +1 @@
-export { default } from "./useResizeObserver";
+export{default}from"./useResizeObserver.js";

package/esm/hooks/__internal__/useResizeObserver/useResizeObserver.js

@@ -1,24 +1 @@
-import { useRef, useLayoutEffect } from "react";
-export default function useResizeObserver(/** Reference to the resizable HTML element */
-ref, /** Callback meant to be executed on element resize */
-onResize, /** Flag to indicate whether hook should be disabled  */
-disabled) {
-  const observer = useRef();
-  const onResizeRef = useRef(onResize);
-  onResizeRef.current = onResize;
-  useLayoutEffect(() => {
-    const referenceRef = ref.current;
-    if (!disabled && referenceRef) {
-      observer.current = new ResizeObserver(() => {
-        onResizeRef?.current();
-      });
-      observer.current.observe(referenceRef);
-    }
-    return () => {
-      if (!disabled && referenceRef && observer.current) {
-        observer.current.unobserve(referenceRef);
-        observer.current.disconnect();
-      }
-    };
-  }, [ref, disabled]);
-}
+import{useRef as r,useLayoutEffect as e}from"react";function n(n,t,c){const u=r(),o=r(t);o.current=t,e((()=>{const r=n.current;return!c&&r&&(u.current=new ResizeObserver((()=>{null==o||o.current()})),u.current.observe(r)),()=>{!c&&r&&u.current&&(u.current.unobserve(r),u.current.disconnect())}}),[n,c])}export{n as default};

package/esm/hooks/__internal__/useScrollBlock/index.js

@@ -1 +1 @@
-export { default } from "./useScrollBlock";
+export{default}from"./useScrollBlock.js";

package/esm/hooks/__internal__/useScrollBlock/scroll-block-manager.js

@@ -1,80 +1 @@
-function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
-function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
-function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
-function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-// TODO: This component can be refactored to remove redundant code
-// once we can confirm that all Sage products use version 105.0.0^
-import { getWindow } from "../../../__internal__/dom/globals";
-let ScrollBlockManager = /*#__PURE__*/function () {
-  function ScrollBlockManager() {
-    _classCallCheck(this, ScrollBlockManager);
-    _defineProperty(this, "components", void 0);
-    _defineProperty(this, "originalValues", void 0);
-    const safeWindow = getWindow();
-    if (!safeWindow) {
-      this.components = {};
-      this.originalValues = [];
-      return;
-    }
-    // Due to possibility of multiple carbon versions using it
-    // it is necessary to maintain same structure in this global variable
-    if (!safeWindow.__CARBON_INTERNALS_SCROLL_BLOCKERS) {
-      safeWindow.__CARBON_INTERNALS_SCROLL_BLOCKERS = {
-        components: {},
-        // originalValues can be removed
-        originalValues: [],
-        restoreValues: null
-      };
-    }
-    this.components = safeWindow.__CARBON_INTERNALS_SCROLL_BLOCKERS.components;
-    // TODO: originalValues can be removed
-    this.originalValues = safeWindow.__CARBON_INTERNALS_SCROLL_BLOCKERS.originalValues;
-  }
-  return _createClass(ScrollBlockManager, [{
-    key: "registerComponent",
-    value: function registerComponent(id) {
-      this.components[id] = true;
-    }
-  }, {
-    key: "unregisterComponent",
-    value: function unregisterComponent(id) {
-      delete this.components[id];
-    }
-  }, {
-    key: "saveRestoreValuesCallback",
-    value: function saveRestoreValuesCallback(callback) {
-      /* istanbul ignore else */
-      if (window.__CARBON_INTERNALS_SCROLL_BLOCKERS) {
-        window.__CARBON_INTERNALS_SCROLL_BLOCKERS.restoreValues = callback;
-      }
-    }
-  }, {
-    key: "getRestoreValuesCallback",
-    value: function getRestoreValuesCallback() {
-      return window.__CARBON_INTERNALS_SCROLL_BLOCKERS?.restoreValues;
-    }
-
-    // TODO: saveOriginalValues can be removed
-  }, {
-    key: "saveOriginalValues",
-    value: function saveOriginalValues(values) {
-      this.originalValues.length = 0;
-      this.originalValues.push(...values);
-    }
-
-    // TODO: getOriginalValues can be removed
-  }, {
-    key: "getOriginalValues",
-    value: function getOriginalValues() {
-      return this.originalValues;
-    }
-  }, {
-    key: "isBlocked",
-    value: function isBlocked() {
-      return Object.entries(this.components).length !== 0;
-    }
-  }]);
-}();
-export default ScrollBlockManager;
+import{getWindow as e}from"../../../__internal__/dom/globals.js";function n(e,n,s){return n in e?Object.defineProperty(e,n,{value:s,enumerable:!0,configurable:!0,writable:!0}):e[n]=s,e}class s{registerComponent(e){this.components[e]=!0}unregisterComponent(e){delete this.components[e]}saveRestoreValuesCallback(e){window.__CARBON_INTERNALS_SCROLL_BLOCKERS&&(window.__CARBON_INTERNALS_SCROLL_BLOCKERS.restoreValues=e)}getRestoreValuesCallback(){var e;return null===(e=window.__CARBON_INTERNALS_SCROLL_BLOCKERS)||void 0===e?void 0:e.restoreValues}saveOriginalValues(e){this.originalValues.length=0,this.originalValues.push(...e)}getOriginalValues(){return this.originalValues}isBlocked(){return 0!==Object.entries(this.components).length}constructor(){n(this,"components",void 0),n(this,"originalValues",void 0);const s=e();if(!s)return this.components={},void(this.originalValues=[]);s.__CARBON_INTERNALS_SCROLL_BLOCKERS||(s.__CARBON_INTERNALS_SCROLL_BLOCKERS={components:{},originalValues:[],restoreValues:null}),this.components=s.__CARBON_INTERNALS_SCROLL_BLOCKERS.components,this.originalValues=s.__CARBON_INTERNALS_SCROLL_BLOCKERS.originalValues}}export{s as default};

package/esm/hooks/__internal__/useScrollBlock/useScrollBlock.js

@@ -1,103 +1 @@
-import { useRef, useCallback } from "react";
-import guid from "../../../__internal__/utils/helpers/guid";
-import ScrollBlockManager from "./scroll-block-manager";
-
-// TODO: This component can be refactored to remove redundant code after
-// we can confirm that all Sage products use version 105.0.0^
-const scrollBlockManager = new ScrollBlockManager();
-const getRules = () => {
-  /* istanbul ignore next */
-  const {
-    documentElement,
-    body
-  } = document || {};
-  const scrollBarWidth = window.innerWidth - documentElement.clientWidth;
-  const bodyPaddingRight = parseInt(window.getComputedStyle(body).getPropertyValue("padding-right")) || 0;
-  return [
-  // TODO: First two entries of this array with the documentElement can be removed
-  {
-    element: documentElement,
-    property: "position",
-    blockingValue: "relative"
-  }, {
-    element: documentElement,
-    property: "overflow",
-    blockingValue: "hidden"
-  }, {
-    element: body,
-    property: "position",
-    blockingValue: "relative"
-  }, {
-    element: body,
-    property: "overflow",
-    blockingValue: "hidden"
-  }, {
-    element: body,
-    property: "paddingRight",
-    blockingValue: `${bodyPaddingRight + scrollBarWidth}px`
-  }];
-};
-const useScrollBlock = () => {
-  const {
-    current: containerGuid
-  } = useRef(guid());
-  const originalValuesRef = useRef([]);
-  const restoreValues = useCallback(() => {
-    getRules().forEach(({
-      element,
-      property
-    }, index) => {
-      element.style[property] = originalValuesRef.current[index];
-    });
-  }, []);
-  const blockScroll = useCallback(() => {
-    const rules = getRules();
-    const isBlocked = scrollBlockManager.isBlocked();
-    scrollBlockManager.registerComponent(containerGuid);
-    if (isBlocked) {
-      return;
-    }
-    const originalValues = rules.map(({
-      element,
-      property
-    }) => element.style[property]);
-    originalValuesRef.current = originalValues;
-    scrollBlockManager.saveRestoreValuesCallback(restoreValues);
-    // TODO: saveOriginalValues can be removed
-    scrollBlockManager.saveOriginalValues(originalValues);
-    // TODO: slice san be removed
-    rules.slice(-3).forEach(({
-      element,
-      property,
-      blockingValue
-    }) => {
-      element.style[property] = blockingValue;
-    });
-  }, [restoreValues, containerGuid]);
-  const allowScroll = useCallback(() => {
-    scrollBlockManager.unregisterComponent(containerGuid);
-    const isBlocked = scrollBlockManager.isBlocked();
-    if (isBlocked) return;
-    const restoreValuesCallback = scrollBlockManager.getRestoreValuesCallback();
-    if (restoreValuesCallback) {
-      restoreValuesCallback();
-      scrollBlockManager.saveRestoreValuesCallback(null);
-      return;
-    }
-
-    // TODO: all of the code below can be removed from this block
-    const originalValues = scrollBlockManager.getOriginalValues();
-    getRules().forEach(({
-      element,
-      property
-    }, index) => {
-      element.style[property] = originalValues[index];
-    });
-    scrollBlockManager.saveOriginalValues([]);
-  }, [containerGuid]);
-  return {
-    blockScroll,
-    allowScroll
-  };
-};
-export default useScrollBlock;
+import{useRef as e,useCallback as t}from"react";import r from"../../../__internal__/utils/helpers/guid/index.js";import l from"./scroll-block-manager.js";const o=new l,n=()=>{const{documentElement:e,body:t}=document||{},r=window.innerWidth-e.clientWidth;return[{element:e,property:"position",blockingValue:"relative"},{element:e,property:"overflow",blockingValue:"hidden"},{element:t,property:"position",blockingValue:"relative"},{element:t,property:"overflow",blockingValue:"hidden"},{element:t,property:"paddingRight",blockingValue:`${(parseInt(window.getComputedStyle(t).getPropertyValue("padding-right"))||0)+r}px`}]},i=()=>{const{current:l}=e(r()),i=e([]),a=t((()=>{n().forEach((({element:e,property:t},r)=>{e.style[t]=i.current[r]}))}),[]);return{blockScroll:t((()=>{const e=n(),t=o.isBlocked();if(o.registerComponent(l),t)return;const r=e.map((({element:e,property:t})=>e.style[t]));i.current=r,o.saveRestoreValuesCallback(a),o.saveOriginalValues(r),e.slice(-3).forEach((({element:e,property:t,blockingValue:r})=>{e.style[t]=r}))}),[a,l]),allowScroll:t((()=>{if(o.unregisterComponent(l),o.isBlocked())return;const e=o.getRestoreValuesCallback();if(e)return e(),void o.saveRestoreValuesCallback(null);const t=o.getOriginalValues();n().forEach((({element:e,property:r},l)=>{e.style[r]=t[l]})),o.saveOriginalValues([])}),[l])}};export{i as default};

package/esm/hooks/__internal__/useStableCallback/index.js

@@ -1 +1 @@
-export { default } from "./useStableCallback";
+export{useStableCallback as default}from"./useStableCallback.js";

package/esm/hooks/__internal__/useStableCallback/useStableCallback.js

@@ -1,12 +1 @@
-import { useRef, useCallback } from "react";
-
-// This is a hook that returns a memoized callback that is guaranteed to be the same reference between renders.
-// This is useful when a stable reference is required to prevent unnecessary re-renders.
-
-export function useStableCallback(callback) {
-  const ref = useRef(callback);
-  ref.current = callback;
-  const stableCallback = useCallback((...args) => ref.current?.(...args), []);
-  return callback ? stableCallback : undefined;
-}
-export default useStableCallback;
+import{useRef as r,useCallback as t}from"react";function n(n){const o=r(n);o.current=n;const c=t(((...r)=>{var t;return null===(t=o.current)||void 0===t?void 0:t.call(o,...r)}),[]);return n?c:void 0}export{n as default,n as useStableCallback};

package/esm/hooks/__internal__/useThrottle/index.js

@@ -1 +1 @@
-export { default } from "./useThrottle";
+export{default}from"./useThrottle.js";

package/esm/hooks/__internal__/useThrottle/useThrottle.js

@@ -1,19 +1 @@
-import { useMemo, useEffect, useRef } from "react";
-import throttle from "lodash/throttle";
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-
-const useThrottle = (callback, delay) => {
-  const callbackRef = useRef(callback);
-  useEffect(() => {
-    callbackRef.current = callback;
-  });
-  const throttledCallback = useMemo(() => throttle(callbackRef.current, delay), [delay]);
-  useEffect(() => {
-    return () => {
-      throttledCallback.cancel();
-    };
-  });
-  return throttledCallback;
-};
-export default useThrottle;
+import{useRef as t,useEffect as r,useMemo as o}from"react";import c from"lodash/throttle";const e=(e,n)=>{const a=t(e);r((()=>{a.current=e}));const s=o((()=>c(a.current,n)),[n]);return r((()=>()=>{s.cancel()})),s};export{e as default};

package/esm/hooks/__internal__/useUniqueId/index.js

@@ -1,7 +1 @@
-import { useRef } from "react";
-import createGuid from "../../../__internal__/utils/helpers/guid";
-export default (id, name) => {
-  const createdId = useRef(createGuid());
-  const createdName = useRef(createGuid());
-  return [id || createdId.current, name || createdName.current];
-};
+import{useRef as r}from"react";import t from"../../../__internal__/utils/helpers/guid/index.js";var e=(e,n)=>{const i=r(t()),o=r(t());return[e||i.current,n||o.current]};export{e as default};

package/esm/hooks/useCharacterCount/index.js

@@ -1 +1 @@
-export { default } from "./useCharacterCount";
+export{default}from"./useCharacterCount.js";

package/esm/hooks/useCharacterCount/useCharacterCount.js

@@ -1,40 +1 @@
-import React, { useMemo, useRef, useEffect, useState } from "react";
-import CharacterCount from "../../__internal__/character-count";
-import guid from "../../__internal__/utils/helpers/guid";
-import useDebounce from "../__internal__/useDebounce";
-const useCharacterCount = (value = "", characterLimit, characterCountAriaLive) => {
-  const isCharacterLimitValid = typeof characterLimit === "number" && !Number.isNaN(characterLimit);
-  const [debouncedValue, setDebouncedValue] = useState(value);
-  const debounceWaitTime = 2000;
-  const updateDebouncedValue = useDebounce(newValue => {
-    setDebouncedValue(newValue);
-  }, debounceWaitTime);
-  useEffect(() => {
-    if (characterLimit) {
-      updateDebouncedValue(value);
-    }
-  }, [value, characterLimit, updateDebouncedValue]);
-  const hintId = useRef(guid());
-  const isOverLimit = useMemo(() => {
-    if (value && isCharacterLimitValid) {
-      return value.length > characterLimit;
-    }
-    return false;
-  }, [value, characterLimit, isCharacterLimitValid]);
-  const isDebouncedOverLimit = useMemo(() => {
-    if (debouncedValue && isCharacterLimitValid) {
-      return debouncedValue.length > characterLimit;
-    }
-    return false;
-  }, [debouncedValue, characterLimit, isCharacterLimitValid]);
-  return [isCharacterLimitValid ? /*#__PURE__*/React.createElement(CharacterCount, {
-    ariaLive: characterCountAriaLive,
-    isOverLimit: isOverLimit,
-    isDebouncedOverLimit: isDebouncedOverLimit,
-    value: value.length,
-    debouncedValue: debouncedValue.length,
-    limit: characterLimit,
-    visuallyHiddenHintId: hintId.current
-  }) : null, isCharacterLimitValid ? hintId.current : undefined];
-};
-export default useCharacterCount;
+import{jsx as e}from"react/jsx-runtime";import{useState as t,useEffect as r,useRef as n,useMemo as i}from"react";import o from"../../__internal__/character-count/character-count.component.js";import u from"../../__internal__/utils/helpers/guid/index.js";import c from"../__internal__/useDebounce/useDebounce.js";const a=(a="",l,m)=>{const s="number"==typeof l&&!Number.isNaN(l),[_,d]=t(a),p=c((e=>{d(e)}),2e3);r((()=>{l&&p(a)}),[a,l,p]);const f=n(u()),h=i((()=>!(!a||!s)&&a.length>l),[a,l,s]),b=i((()=>!(!_||!s)&&_.length>l),[_,l,s]);return[s?e(o,{ariaLive:m,isOverLimit:h,isDebouncedOverLimit:b,value:a.length,debouncedValue:_.length,limit:l,visuallyHiddenHintId:f.current}):null,s?f.current:void 0]};export{a as default};

package/esm/hooks/useMediaQuery/index.js

@@ -1 +1 @@
-export { default } from "./useMediaQuery";
+export{default}from"./useMediaQuery.js";

package/esm/hooks/useMediaQuery/useMediaQuery.js

@@ -1,22 +1 @@
-import { useLayoutEffect, useState } from "react";
-import { getWindow } from "../../__internal__/dom/globals";
-export default function useMediaQuery(queryInput) {
-  const query = queryInput.replace(/^@media( ?)/m, "");
-  const [match, setMatch] = useState(undefined);
-  useLayoutEffect(() => {
-    const browserWindow = getWindow();
-
-    /* istanbul ignore if */
-    if (!browserWindow) {
-      return undefined;
-    }
-    const queryList = browserWindow.matchMedia(query);
-    const updateMatch = () => setMatch(queryList.matches);
-    updateMatch();
-    queryList.addEventListener("change", updateMatch);
-    return () => {
-      queryList.removeEventListener("change", updateMatch);
-    };
-  }, [query]);
-  return match;
-}
+import{useState as e,useLayoutEffect as t}from"react";import{getWindow as r}from"../../__internal__/dom/globals.js";function n(n){const a=n.replace(/^@media( ?)/m,""),[o,c]=e(void 0);return t((()=>{const e=r();if(!e)return;const t=e.matchMedia(a),n=()=>c(t.matches);return n(),t.addEventListener("change",n),()=>{t.removeEventListener("change",n)}}),[a]),o}export{n as default};