carbon-react 154.4.0 → 154.4.2

package/esm/__internal__/fieldset/fieldset.component.js

@@ -1,103 +1 @@
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { useContext, useEffect, useState } from "react";
-import { StyledFieldset, StyledLegend, StyledLegendContent, StyledIconWrapper } from "./fieldset.style";
-import ValidationIcon from "../validations/validation-icon.component";
-import NewValidationContext from "../../components/carbon-provider/__internal__/new-validation.context";
-import { InputGroupBehaviour, InputGroupContext } from "../input-behaviour";
-import Help from "../../components/help";
-import Typography from "../../components/typography";
-import { filterStyledSystemMarginProps } from "../../style/utils";
-import useLocale from "../../hooks/__internal__/useLocale";
-const Fieldset = ({
-  legend,
-  children,
-  inline = false,
-  legendWidth,
-  legendAlign,
-  legendSpacing = 2,
-  error,
-  warning,
-  info,
-  isRequired,
-  blockGroupBehaviour,
-  legendMargin = {},
-  isDisabled,
-  isOptional,
-  labelHelp,
-  validationId,
-  ...rest
-}) => {
-  const {
-    validationRedesignOptIn
-  } = useContext(NewValidationContext);
-  const marginProps = filterStyledSystemMarginProps(rest);
-  const [ref, setRef] = useState(null);
-  const [isFocused, setFocus] = useState(false);
-  const locale = useLocale();
-  const optionalLabel = locale.label.optional();
-  useEffect(() => {
-    if (ref && isRequired) {
-      Array.from(ref.querySelectorAll("input") || /* istanbul ignore next */[]).forEach(el => {
-        el.setAttribute("required", "");
-      });
-    }
-  }, [ref, isRequired]);
-  const tooltipIcon = () => {
-    if (error || warning || info) {
-      return /*#__PURE__*/React.createElement(StyledIconWrapper, {
-        "aria-hidden": "true"
-      }, /*#__PURE__*/React.createElement(ValidationIcon, {
-        error: error,
-        warning: warning,
-        info: info,
-        tooltipFlipOverrides: ["top", "bottom"]
-      }));
-    }
-    const helpProps = {
-      onFocus: () => setFocus(true),
-      onBlur: () => setFocus(false)
-    };
-    if (labelHelp) {
-      return /*#__PURE__*/React.createElement(StyledIconWrapper, helpProps, /*#__PURE__*/React.createElement(Help, {
-        isFocused: isFocused
-      }, labelHelp));
-    }
-    return null;
-  };
-  let legendAlignment;
-  if (inline && !legendAlign) {
-    legendAlignment = "right";
-  } else if (!legendAlign) {
-    legendAlignment = "left";
-  } else {
-    legendAlignment = legendAlign;
-  }
-  return /*#__PURE__*/React.createElement(InputGroupBehaviour, {
-    blockGroupBehaviour: blockGroupBehaviour
-  }, /*#__PURE__*/React.createElement(StyledFieldset, _extends({
-    ref: setRef,
-    "data-component": "fieldset"
-  }, rest, marginProps), legend && /*#__PURE__*/React.createElement(InputGroupContext.Consumer, null, ({
-    onMouseEnter,
-    onMouseLeave
-  }) => /*#__PURE__*/React.createElement(StyledLegend, _extends({
-    onMouseEnter: onMouseEnter,
-    onMouseLeave: onMouseLeave,
-    inline: inline,
-    width: legendWidth,
-    align: legendAlignment,
-    rightPadding: legendSpacing
-  }, legendMargin, {
-    "data-element": "legend",
-    "data-role": "legend"
-  }), /*#__PURE__*/React.createElement(StyledLegendContent, {
-    isRequired: isRequired,
-    isOptional: isOptional,
-    optionalLabel: optionalLabel,
-    isDisabled: isDisabled
-  }, legend, !validationRedesignOptIn && tooltipIcon()))), !validationRedesignOptIn && /*#__PURE__*/React.createElement(Typography, {
-    screenReaderOnly: true,
-    id: validationId
-  }, error || warning || info), children));
-};
-export default Fieldset;
+import{jsx as e,jsxs as r}from"react/jsx-runtime";import{useContext as n,useState as t,useEffect as o}from"react";import{StyledFieldset as i,StyledLegend as l,StyledLegendContent as a,StyledIconWrapper as p}from"./fieldset.style.js";import{ValidationIcon as s}from"../validations/validation-icon.component.js";import c from"../../components/carbon-provider/__internal__/new-validation.context.js";import{InputGroupBehaviour as d,InputGroupContext as u}from"../input-behaviour/input-group-behaviour.component.js";import{Help as f}from"../../components/help/help.component.js";import{Typography as m}from"../../components/typography/typography.component.js";import"../../style/utils/filter-styled-system-padding-props.js";import g from"../../style/utils/filter-styled-system-margin-props.js";import b from"../../hooks/__internal__/useLocale/useLocale.js";function y(e,r,n){return r in e?Object.defineProperty(e,r,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[r]=n,e}function O(e){for(var r=1;r<arguments.length;r++){var n=null!=arguments[r]?arguments[r]:{},t=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(t=t.concat(Object.getOwnPropertySymbols(n).filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable})))),t.forEach((function(r){y(e,r,n[r])}))}return e}function h(e,r){return r=null!=r?r:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);r.push.apply(r,n)}return r}(Object(r)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(r,n))})),e}const j=y=>{var{legend:j,children:v,inline:w=!1,legendWidth:P,legendAlign:S,legendSpacing:_=2,error:k,warning:D,info:E,isRequired:M,blockGroupBehaviour:q,legendMargin:x={},isDisabled:A,isOptional:L,labelHelp:R,validationId:B}=y,I=function(e,r){if(null==e)return{};var n,t,o=function(e,r){if(null==e)return{};var n,t,o={},i=Object.keys(e);for(t=0;t<i.length;t++)n=i[t],r.indexOf(n)>=0||(o[n]=e[n]);return o}(e,r);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(t=0;t<i.length;t++)n=i[t],r.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}(y,["legend","children","inline","legendWidth","legendAlign","legendSpacing","error","warning","info","isRequired","blockGroupBehaviour","legendMargin","isDisabled","isOptional","labelHelp","validationId"]);const{validationRedesignOptIn:F}=n(c),G=g(I),[H,W]=t(null),[C,z]=t(!1),J=b().label.optional();o((()=>{H&&M&&Array.from(H.querySelectorAll("input")||[]).forEach((e=>{e.setAttribute("required","")}))}),[H,M]);let K;return K=w&&!S?"right":S||"left",e(d,{blockGroupBehaviour:q,children:r(i,h(O({ref:W,"data-component":"fieldset"},I,G),{children:[j&&e(u.Consumer,{children:({onMouseEnter:n,onMouseLeave:t})=>e(l,h(O({onMouseEnter:n,onMouseLeave:t,inline:w,width:P,align:K,rightPadding:_},x),{"data-element":"legend","data-role":"legend",children:r(a,{isRequired:M,isOptional:L,optionalLabel:J,isDisabled:A,children:[j,!F&&(k||D||E?e(p,{"aria-hidden":"true",children:e(s,{error:k,warning:D,info:E,tooltipFlipOverrides:["top","bottom"]})}):R?e(p,h(O({},{onFocus:()=>z(!0),onBlur:()=>z(!1)}),{children:e(f,{isFocused:C,children:R})})):null)]})}))}),!F&&e(m,{screenReaderOnly:!0,id:B,children:k||D||E}),v]}))})};export{j as default};

package/esm/__internal__/fieldset/fieldset.style.js

@@ -1,94 +1 @@
-import styled, { css } from "styled-components";
-import { margin } from "styled-system";
-import BaseTheme from "../../style/themes/base";
-const StyledFieldset = styled.fieldset`
-  margin: 0;
-  margin-bottom: var(--fieldSpacing);
-  ${margin}
-  border: none;
-  padding: 0;
-  min-width: 0;
-  min-inline-size: 0;
-  ${({
-  width
-}) => width && `width: ${width};`}
-`;
-StyledFieldset.defaultProps = {
-  theme: BaseTheme
-};
-const StyledLegendContent = styled.span`
-  display: flex;
-  align-items: center;
-  line-height: 24px;
-  ${({
-  isRequired
-}) => isRequired && css`
-      ::after {
-        content: "*";
-        line-height: 24px;
-        color: var(--colorsSemanticNegative500);
-        font-weight: var(--fontWeights500);
-        margin-left: var(--spacing050);
-        position: relative;
-        top: 1px;
-      }
-    `}
-
-  ${({
-  isOptional,
-  optionalLabel
-}) => isOptional && css`
-      ::after {
-        content: "(${optionalLabel})";
-        color: var(--colorsUtilityYin055);
-        font-weight: var(--fontWeights400);
-        margin-left: var(--spacing050);
-      }
-    `}
-
-  ${({
-  isDisabled
-}) => isDisabled && css`
-      color: var(--colorsUtilityYin030);
-      ::after {
-        color: var(--colorsUtilityYin030);
-      }
-    `}
-`;
-const StyledLegend = styled.legend`
-  display: flex;
-  align-items: center;
-  margin-bottom: var(--spacing100);
-  padding: 0;
-  font-weight: var(--fontWeights500);
-  color: var(--colorsUtilityYin090);
-
-  ${({
-  align,
-  inline
-}) => align && css`
-      text-align: ${align};
-      justify-content: ${align === "right" ? "flex-end" : "flex-start"};
-
-      ${!inline && css`
-        width: -moz-available;
-      `}
-    `};
-
-  ${({
-  inline,
-  width,
-  rightPadding
-}) => inline && css`
-      float: left;
-      box-sizing: border-box;
-      margin: 0;
-      ${width && `width: ${width}%`};
-      padding-right: ${rightPadding === 1 ? "var(--spacing100)" : "var(--spacing200)"};
-    `}
-  ${margin}
-`;
-const StyledIconWrapper = styled.div`
-  margin-left: var(--spacing050);
-`;
-export { StyledFieldset, StyledLegend, StyledLegendContent, StyledIconWrapper };
+import i,{css as t}from"styled-components";import{margin as e}from"styled-system";import n from"../../style/themes/base/index.js";const o=i.fieldset.withConfig({displayName:"fieldset.style__StyledFieldset",componentId:"sc-6ccd69fa-0"})(["margin:0;margin-bottom:var(--fieldSpacing);"," border:none;padding:0;min-width:0;min-inline-size:0;",""],e,(({width:i})=>i&&`width: ${i};`));o.defaultProps={theme:n};const a=i.span.withConfig({displayName:"fieldset.style__StyledLegendContent",componentId:"sc-6ccd69fa-1"})(["display:flex;align-items:center;line-height:24px;"," "," ",""],(({isRequired:i})=>i&&t(['::after{content:"*";line-height:24px;color:var(--colorsSemanticNegative500);font-weight:var(--fontWeights500);margin-left:var(--spacing050);position:relative;top:1px;}'])),(({isOptional:i,optionalLabel:e})=>i&&t(['::after{content:"(',')";color:var(--colorsUtilityYin055);font-weight:var(--fontWeights400);margin-left:var(--spacing050);}'],e)),(({isDisabled:i})=>i&&t(["color:var(--colorsUtilityYin030);::after{color:var(--colorsUtilityYin030);}"]))),l=i.legend.withConfig({displayName:"fieldset.style__StyledLegend",componentId:"sc-6ccd69fa-2"})(["display:flex;align-items:center;margin-bottom:var(--spacing100);padding:0;font-weight:var(--fontWeights500);color:var(--colorsUtilityYin090);",";"," ",""],(({align:i,inline:e})=>i&&t(["text-align:",";justify-content:",";",""],i,"right"===i?"flex-end":"flex-start",!e&&t(["width:-moz-available;"]))),(({inline:i,width:e,rightPadding:n})=>i&&t(["float:left;box-sizing:border-box;margin:0;",";padding-right:",";"],e&&`width: ${e}%`,1===n?"var(--spacing100)":"var(--spacing200)")),e),s=i.div.withConfig({displayName:"fieldset.style__StyledIconWrapper",componentId:"sc-6ccd69fa-3"})(["margin-left:var(--spacing050);"]);export{o as StyledFieldset,s as StyledIconWrapper,l as StyledLegend,a as StyledLegendContent};

package/esm/__internal__/fieldset/index.js

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

package/esm/__internal__/filter-object-properties/filter-object-properties.js

@@ -1,6 +1 @@
-export default function filterObjectProperties(originalObject, keyList) {
-  return Object.keys(originalObject).filter(key => keyList.includes(key)).reduce((acc, key) => {
-    acc[key] = originalObject[key];
-    return acc;
-  }, {});
-}
+function e(e,t){return Object.keys(e).filter((e=>t.includes(e))).reduce(((t,r)=>(t[r]=e[r],t)),{})}export{e as default};

package/esm/__internal__/filter-object-properties/index.js

@@ -1 +1 @@
-export { default } from "./filter-object-properties";
+export{default}from"./filter-object-properties.js";

package/esm/__internal__/focus-trap/focus-trap-utils.js

@@ -1,147 +1 @@
-const defaultFocusableSelectors = 'button:not([disabled]), [href], input:not([type="hidden"]):not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]';
-const INTERVAL = 10;
-const MAX_TIME = 100;
-const setElementFocus = element => {
-  let timeSoFar = 0;
-  const stylesMatch = () => {
-    const actualStyles = window.getComputedStyle(element);
-    return actualStyles.visibility === "visible";
-  };
-  const check = () => {
-    /* istanbul ignore else */
-    if (stylesMatch()) {
-      element.focus();
-    } else if (timeSoFar < MAX_TIME) {
-      setTimeout(check, INTERVAL);
-      timeSoFar += INTERVAL;
-    }
-    // just "fail" silently if maxTime exceeded - callback will never be called
-  };
-  check();
-};
-const isRadio = element => {
-  return element.hasAttribute("type") && element.getAttribute("type") === "radio";
-};
-const getRadioElementToFocus = (groupName, shiftKey) => {
-  const buttonsInGroup = document.querySelectorAll(`input[type="radio"][name="${groupName}"]`);
-  const selectedButton = [...buttonsInGroup].find(button => button.checked);
-  if (selectedButton) {
-    return selectedButton;
-  }
-  return buttonsInGroup[shiftKey ? buttonsInGroup.length - 1 : 0];
-};
-const getNextElement = (element, focusableElements, shiftKey) => {
-  const currentIndex = focusableElements.indexOf(element);
-  if (currentIndex === -1) {
-    // we're not currently on a focusable element - most likely because the focusableElements come from a different focus trap!
-    // So we need to leave focus where it is.
-    return undefined;
-  }
-  const increment = shiftKey ? -1 : 1;
-  let nextIndex = currentIndex;
-  let foundElement;
-  while (!foundElement) {
-    nextIndex += increment;
-    if (nextIndex < 0) {
-      nextIndex += focusableElements.length;
-    }
-    if (nextIndex >= focusableElements.length) {
-      nextIndex -= focusableElements.length;
-    }
-    const nextElement = focusableElements[nextIndex];
-    if (nextElement === element) {
-      // guard in case there is only one focusable element (or only a single radio group) in the trap.
-      // If this happens we don't want to freeze the browser by looping forever, and it's OK to just focus
-      // the same element we're already on.
-      // There is an exception though: if we're in a single radio group, we need to ensure we focus on
-      // the correct one. This may not be "element" if it's not currently focused (due to the focus actually
-      // being on a wrapper element and this function being called with the first/last element as "element").
-      if (isRadio(element) && document.activeElement !== element) {
-        return getRadioElementToFocus(element.getAttribute("name"), shiftKey);
-      }
-      return element;
-    }
-    if (isRadio(nextElement)) {
-      // if we've reached a radio element we need to ensure we focus the correct button in its group
-      const nextElementGroupName = nextElement.getAttribute("name");
-      if (isRadio(element)) {
-        const groupName = element.getAttribute("name");
-
-        // if the name is different we're in a new group so can focus the appropriate button in it*/
-        if (nextElementGroupName !== groupName) {
-          foundElement = getRadioElementToFocus(nextElementGroupName, shiftKey);
-        }
-
-        // otherwise we're still in the same radio group so need to continue the loop
-      } else {
-        // if we've moved into a radio group from a non-radio starting point, we still have to ensure we focus
-        // the correct button in the group
-        foundElement = getRadioElementToFocus(nextElementGroupName, shiftKey);
-      }
-    } else {
-      // if we've reached a non-radio element, we can focus it with no issues
-      foundElement = nextElement;
-    }
-  }
-  return foundElement;
-};
-const onTabGuardFocus = (trapWrappers, focusableSelectors, position) => guardWrapperRef => () => {
-  const isTop = position === "top";
-  const currentIndex = trapWrappers.indexOf(guardWrapperRef);
-  let index = currentIndex;
-  let nextWrapper;
-  let allFocusableElementsInNextWrapper;
-  do {
-    index += isTop ? -1 : 1;
-    if (index < 0) {
-      index += trapWrappers.length;
-    }
-    if (index >= trapWrappers.length) {
-      index -= trapWrappers.length;
-    }
-    nextWrapper = trapWrappers[index];
-    allFocusableElementsInNextWrapper = Array.from(nextWrapper?.current?.querySelectorAll(focusableSelectors || defaultFocusableSelectors) || /* istanbul ignore next */[]).filter(el => Number(el.tabIndex) !== -1);
-  } while (index !== currentIndex && !allFocusableElementsInNextWrapper?.length);
-  const toFocus = allFocusableElementsInNextWrapper?.[isTop ? allFocusableElementsInNextWrapper.length - 1 : 0];
-  if (isRadio(toFocus)) {
-    const radioToFocus = getRadioElementToFocus(toFocus.getAttribute("name"), isTop);
-    setElementFocus(radioToFocus);
-  } else {
-    setElementFocus(toFocus);
-  }
-};
-const trapFunction = (ev, defaultFocusableElements, isWrapperFocused, focusableSelectors, bespokeTrap) => {
-  const customFocusableElements = focusableSelectors ? defaultFocusableElements.filter(element => element.matches(focusableSelectors)) : defaultFocusableElements;
-  const firstElement = customFocusableElements[0];
-  const lastElement = customFocusableElements[customFocusableElements.length - 1];
-  if (bespokeTrap) {
-    bespokeTrap(ev, firstElement, lastElement);
-    return;
-  }
-  if (ev.key !== "Tab") return;
-  if (!customFocusableElements?.length) {
-    /* Block the trap */
-    ev.preventDefault();
-    return;
-  }
-  const activeElement = document.activeElement;
-
-  // special case if focus is on document body
-  if (activeElement === document.body) {
-    ev.preventDefault();
-    setElementFocus(firstElement);
-    return;
-  }
-  if (!focusableSelectors) {
-    return;
-  }
-  const elementWhenWrapperFocused = ev.shiftKey ? firstElement : lastElement;
-  const elementToFocus = getNextElement(isWrapperFocused ? elementWhenWrapperFocused : activeElement, customFocusableElements, ev.shiftKey);
-  const defaultNextElement = getNextElement(isWrapperFocused ? elementWhenWrapperFocused : activeElement, defaultFocusableElements, ev.shiftKey);
-  if (elementToFocus && elementToFocus !== defaultNextElement) {
-    // if next element would match the custom selector anyway, then no need to prevent default
-    setElementFocus(elementToFocus);
-    ev.preventDefault();
-  }
-};
-export { defaultFocusableSelectors, getNextElement, setElementFocus, onTabGuardFocus, trapFunction };
+const t='button:not([disabled]), [href], input:not([type="hidden"]):not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]',e=t=>{let e=0;const n=()=>{"visible"===window.getComputedStyle(t).visibility?t.focus():e<100&&(setTimeout(n,10),e+=10)};n()},n=t=>t.hasAttribute("type")&&"radio"===t.getAttribute("type"),i=(t,e)=>{const n=document.querySelectorAll(`input[type="radio"][name="${t}"]`);return[...n].find((t=>t.checked))||n[e?n.length-1:0]},l=(t,e,l)=>{const r=e.indexOf(t);if(-1===r)return;const o=l?-1:1;let u,d=r;for(;!u;){d+=o,d<0&&(d+=e.length),d>=e.length&&(d-=e.length);const r=e[d];if(r===t)return n(t)&&document.activeElement!==t?i(t.getAttribute("name"),l):t;if(n(r)){const e=r.getAttribute("name");n(t)?e!==t.getAttribute("name")&&(u=i(e,l)):u=i(e,l)}else u=r}return u},r=(l,r,o)=>u=>()=>{const d="top"===o,s=l.indexOf(u);let c,a,f=s;do{var h;f+=d?-1:1,f<0&&(f+=l.length),f>=l.length&&(f-=l.length),c=l[f],a=Array.from((null==c||null===(h=c.current)||void 0===h?void 0:h.querySelectorAll(r||t))||[]).filter((t=>-1!==Number(t.tabIndex)))}while(f!==s&&!(null==a?void 0:a.length));const b=null==a?void 0:a[d?a.length-1:0];if(n(b)){const t=i(b.getAttribute("name"),d);e(t)}else e(b)},o=(t,n,i,r,o)=>{const u=r?n.filter((t=>t.matches(r))):n,d=u[0],s=u[u.length-1];if(o)return void o(t,d,s);if("Tab"!==t.key)return;if(!(null==u?void 0:u.length))return void t.preventDefault();const c=document.activeElement;if(c===document.body)return t.preventDefault(),void e(d);if(!r)return;const a=t.shiftKey?d:s,f=l(i?a:c,u,t.shiftKey),h=l(i?a:c,n,t.shiftKey);f&&f!==h&&(e(f),t.preventDefault())};export{t as defaultFocusableSelectors,l as getNextElement,r as onTabGuardFocus,e as setElementFocus,o as trapFunction};

package/esm/__internal__/focus-trap/focus-trap.component.js

@@ -1,179 +1 @@
-import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
-import { defaultFocusableSelectors, setElementFocus, onTabGuardFocus, trapFunction } from "./focus-trap-utils";
-import ModalContext from "../../components/modal/__internal__/modal.context";
-import usePrevious from "../../hooks/__internal__/usePrevious";
-import TopModalContext from "../../components/carbon-provider/__internal__/top-modal.context";
-export const TAB_GUARD_TOP = "tab-guard-top";
-export const TAB_GUARD_BOTTOM = "tab-guard-bottom";
-
-// TODO investigate why React.RefObject<T> produces a failed prop type when current = null
-
-const FocusTrap = ({
-  children,
-  autoFocus = true,
-  focusableSelectors,
-  focusFirstElement,
-  bespokeTrap,
-  wrapperRef,
-  isOpen,
-  additionalWrapperRefs
-}) => {
-  const trapRef = useRef(null);
-  const [currentFocusedElement, setCurrentFocusedElement] = useState();
-  const {
-    isAnimationComplete = true,
-    triggerRefocusFlag
-  } = useContext(ModalContext);
-  const {
-    topModal
-  } = useContext(TopModalContext);
-  // we ensure that isTopModal is true if there is no TopModalContext, so that consumers who have not
-  // wrapped their app in CarbonProvider do not have all FocusTrap behaviour broken
-  const isTopModal = !topModal || wrapperRef.current && topModal.contains(wrapperRef.current);
-  const trapWrappers = useMemo(() => additionalWrapperRefs?.length ? [wrapperRef, ...additionalWrapperRefs] : [wrapperRef], [additionalWrapperRefs, wrapperRef]);
-  const onTabGuardTopFocus = useMemo(() => onTabGuardFocus(trapWrappers, focusableSelectors, "top"), [focusableSelectors, trapWrappers]);
-  const onTabGuardBottomFocus = useMemo(() => onTabGuardFocus(trapWrappers, focusableSelectors, "bottom"), [focusableSelectors, trapWrappers]);
-  useEffect(() => {
-    additionalWrapperRefs?.forEach(ref => {
-      const {
-        current: containerElement
-      } = ref;
-      // istanbul ignore else
-      if (containerElement) {
-        // istanbul ignore else
-        if (!containerElement.previousElementSibling?.matches(`[data-element=${TAB_GUARD_TOP}]`)) {
-          const topTabGuard = document.createElement("div");
-          topTabGuard.tabIndex = 0;
-          topTabGuard.dataset.element = TAB_GUARD_TOP;
-          containerElement.insertAdjacentElement("beforebegin", topTabGuard);
-          topTabGuard.addEventListener("focus", onTabGuardTopFocus(ref));
-        }
-        // istanbul ignore else
-        if (!containerElement.nextElementSibling?.matches(`[data-element=${TAB_GUARD_BOTTOM}]`)) {
-          const bottomTabGuard = document.createElement("div");
-          bottomTabGuard.tabIndex = 0;
-          bottomTabGuard.dataset.element = TAB_GUARD_BOTTOM;
-          containerElement.insertAdjacentElement("afterend", bottomTabGuard);
-          bottomTabGuard.addEventListener("focus", onTabGuardBottomFocus(ref));
-        }
-      }
-    });
-    return () => {
-      additionalWrapperRefs?.forEach(ref => {
-        const previousElement = ref.current?.previousElementSibling;
-        if (previousElement?.matches(`[data-element=${TAB_GUARD_TOP}]`)) {
-          previousElement.remove();
-        }
-        const nextElement = ref.current?.nextElementSibling;
-        if (nextElement?.matches(`[data-element=${TAB_GUARD_BOTTOM}]`)) {
-          nextElement.remove();
-        }
-      });
-    };
-  }, [additionalWrapperRefs, onTabGuardTopFocus, onTabGuardBottomFocus]);
-  const shouldSetFocus = autoFocus && isOpen && isAnimationComplete;
-  const prevShouldSetFocus = usePrevious(shouldSetFocus);
-  const getFocusableElements = useCallback(selector => {
-    const elements = [];
-    trapWrappers.forEach(ref => {
-      // istanbul ignore else
-      if (ref.current) {
-        elements.push(...Array.from(ref.current.querySelectorAll(selector)).filter(el => Number(el.tabIndex) !== -1));
-      }
-    });
-    return elements;
-  }, [trapWrappers]);
-  useEffect(() => {
-    if (shouldSetFocus && !prevShouldSetFocus) {
-      const candidateFirstElement = focusFirstElement && "current" in focusFirstElement ? focusFirstElement.current : focusFirstElement;
-      const autoFocusedElement = getFocusableElements(defaultFocusableSelectors).find(el => el.getAttribute("data-has-autofocus") === "true");
-      const elementToFocus = candidateFirstElement || autoFocusedElement || wrapperRef.current;
-      // istanbul ignore else
-      if (elementToFocus) {
-        setElementFocus(elementToFocus);
-      }
-    }
-  }, [shouldSetFocus, prevShouldSetFocus, getFocusableElements, focusFirstElement, wrapperRef]);
-  useEffect(() => {
-    const trapFn = ev => {
-      // block focus trap from working if it's not the topmost trap, or is currently closed
-      if (!isTopModal || !isOpen) {
-        return;
-      }
-      const focusableElements = getFocusableElements(defaultFocusableSelectors);
-      trapFunction(ev, focusableElements, document.activeElement === wrapperRef.current, focusableSelectors, bespokeTrap);
-    };
-    document.addEventListener("keydown", trapFn, true);
-    return function cleanup() {
-      document.removeEventListener("keydown", trapFn, true);
-    };
-  }, [bespokeTrap, wrapperRef, focusableSelectors, getFocusableElements, isTopModal, isOpen]);
-  const updateCurrentFocusedElement = useCallback(() => {
-    const focusableElements = getFocusableElements(focusableSelectors || defaultFocusableSelectors);
-    const element = focusableElements?.find(el => el === document.activeElement);
-    if (element) {
-      setCurrentFocusedElement(element);
-    }
-  }, [getFocusableElements, focusableSelectors]);
-  const refocusTrap = useCallback(() => {
-    if (currentFocusedElement && !currentFocusedElement.hasAttribute("disabled")) {
-      // the trap breaks if it tries to refocus a disabled element
-      setElementFocus(currentFocusedElement);
-    } else if (wrapperRef.current?.hasAttribute("tabindex")) {
-      setElementFocus(wrapperRef.current);
-    } else {
-      const focusableElements = getFocusableElements(focusableSelectors || defaultFocusableSelectors);
-      /* istanbul ignore else */
-      if (focusableElements.length) {
-        setElementFocus(focusableElements[0]);
-      }
-    }
-  }, [currentFocusedElement, wrapperRef, focusableSelectors, getFocusableElements]);
-  useEffect(() => {
-    if (triggerRefocusFlag) {
-      refocusTrap();
-    }
-  }, [triggerRefocusFlag, refocusTrap]);
-  const [tabIndex, setTabIndex] = useState(0);
-  useEffect(() => {
-    // tabIndex is set to 0 and removed on blur.
-    if (!isOpen) {
-      setTabIndex(0);
-    }
-  }, [isOpen]);
-  const onBlur = () => {
-    /* istanbul ignore else */
-    if (isOpen) {
-      setTabIndex(undefined);
-    }
-  };
-  const focusProps = hasNoTabIndex => ({
-    ...(hasNoTabIndex && {
-      tabIndex,
-      onBlur
-    }),
-    onFocus: updateCurrentFocusedElement
-  });
-
-  // passes focusProps, sets tabIndex and onBlur if no tabIndex has been explicitly set on child
-  const clonedChildren = React.Children.map(children, child => {
-    const focusableChild = child;
-    return /*#__PURE__*/React.cloneElement(focusableChild, focusProps(focusableChild?.props?.tabIndex === undefined));
-  });
-  return /*#__PURE__*/React.createElement("div", {
-    ref: trapRef
-  }, isOpen && /*#__PURE__*/React.createElement("div", {
-    "data-element": TAB_GUARD_TOP
-    // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-    ,
-    tabIndex: 0,
-    onFocus: onTabGuardTopFocus(wrapperRef)
-  }), clonedChildren, isOpen && /*#__PURE__*/React.createElement("div", {
-    "data-element": TAB_GUARD_BOTTOM
-    // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-    ,
-    tabIndex: 0,
-    onFocus: onTabGuardBottomFocus(wrapperRef)
-  }));
-};
-export default FocusTrap;
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import n,{useRef as r,useState as o,useContext as c,useMemo as i,useEffect as l,useCallback as a}from"react";import{onTabGuardFocus as u,defaultFocusableSelectors as s,setElementFocus as d,trapFunction as m}from"./focus-trap-utils.js";import f from"../../components/modal/__internal__/modal.context.js";import b from"../../hooks/__internal__/usePrevious/index.js";import p from"../../components/carbon-provider/__internal__/top-modal.context.js";function v(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}const g="tab-guard-top",O="tab-guard-bottom",y=({children:y,autoFocus:h=!0,focusableSelectors:j,focusFirstElement:E,bespokeTrap:x,wrapperRef:w,isOpen:P,additionalWrapperRefs:_})=>{const S=r(null),[A,I]=o(),{isAnimationComplete:k=!0,triggerRefocusFlag:F}=c(f),{topModal:D}=c(p),L=!D||w.current&&D.contains(w.current),$=i((()=>(null==_?void 0:_.length)?[w,..._]:[w]),[_,w]),R=i((()=>u($,j,"top")),[j,$]),C=i((()=>u($,j,"bottom")),[j,$]);l((()=>(null==_||_.forEach((e=>{const{current:t}=e;if(t){var n,r;if(!(null===(n=t.previousElementSibling)||void 0===n?void 0:n.matches(`[data-element=${g}]`))){const n=document.createElement("div");n.tabIndex=0,n.dataset.element=g,t.insertAdjacentElement("beforebegin",n),n.addEventListener("focus",R(e))}if(!(null===(r=t.nextElementSibling)||void 0===r?void 0:r.matches(`[data-element=${O}]`))){const n=document.createElement("div");n.tabIndex=0,n.dataset.element=O,t.insertAdjacentElement("afterend",n),n.addEventListener("focus",C(e))}}})),()=>{null==_||_.forEach((e=>{var t,n;const r=null===(t=e.current)||void 0===t?void 0:t.previousElementSibling;(null==r?void 0:r.matches(`[data-element=${g}]`))&&r.remove();const o=null===(n=e.current)||void 0===n?void 0:n.nextElementSibling;(null==o?void 0:o.matches(`[data-element=${O}]`))&&o.remove()}))})),[_,R,C]);const q=h&&P&&k,B=b(q),M=a((e=>{const t=[];return $.forEach((n=>{n.current&&t.push(...Array.from(n.current.querySelectorAll(e)).filter((e=>-1!==Number(e.tabIndex))))})),t}),[$]);l((()=>{if(q&&!B){const e=E&&"current"in E?E.current:E,t=M(s).find((e=>"true"===e.getAttribute("data-has-autofocus"))),n=e||t||w.current;n&&d(n)}}),[q,B,M,E,w]),l((()=>{const e=e=>{if(!L||!P)return;const t=M(s);m(e,t,document.activeElement===w.current,j,x)};return document.addEventListener("keydown",e,!0),function(){document.removeEventListener("keydown",e,!0)}}),[x,w,j,M,L,P]);const N=a((()=>{const e=M(j||s),t=null==e?void 0:e.find((e=>e===document.activeElement));t&&I(t)}),[M,j]),T=a((()=>{var e;if(A&&!A.hasAttribute("disabled"))d(A);else if(null===(e=w.current)||void 0===e?void 0:e.hasAttribute("tabindex"))d(w.current);else{const e=M(j||s);e.length&&d(e[0])}}),[A,w,j,M]);l((()=>{F&&T()}),[F,T]);const[W,z]=o(0);l((()=>{P||z(0)}),[P]);const G=()=>{P&&z(void 0)},H=e=>{return t=function(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},r=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(n).filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable})))),r.forEach((function(t){v(e,t,n[t])}))}return e}({},e&&{tabIndex:W,onBlur:G}),n=null!=(n={onFocus:N})?n:{},Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t.push.apply(t,n)}return t}(Object(n)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))})),t;var t,n},J=n.Children.map(y,(e=>{var t;const r=e;return n.cloneElement(r,H(void 0===(null==r||null===(t=r.props)||void 0===t?void 0:t.tabIndex)))}));return e("div",{ref:S,children:[P&&t("div",{"data-element":g,tabIndex:0,onFocus:R(w)}),J,P&&t("div",{"data-element":O,tabIndex:0,onFocus:C(w)})]})};export{O as TAB_GUARD_BOTTOM,g as TAB_GUARD_TOP,y as default};

package/esm/__internal__/focus-trap/index.js

@@ -1 +1 @@
-export { default } from "./focus-trap.component";
+export{default}from"./focus-trap.component.js";