@elliemae/ds-banner 3.53.0-alpha.1 → 3.53.0-alpha.3

package/dist/cjs/DSBanner.js

@@ -38,10 +38,42 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_ds_icons = require("@elliemae/ds-icons");
 var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
 var import_react = __toESM(require("react"));
+var import_react_dom = __toESM(require("react-dom"));
+var import_uid = require("uid");
+var import_ds_system = require("@elliemae/ds-system");
+var import_DSBannerContent = require("./DSBannerContent.js");
 var import_exported_related = require("./exported-related/index.js");
 var import_react_desc_prop_types = require("./react-desc-prop-types.js");
 var import_styles = require("./styles.js");
-var import_icons = require("./utils/icons.js");
+const outOfTheBoxCols = ["auto", "fit-content(50%)", "1fr"];
+const outOfTheBoxColsSmallLayout = ["auto", "1fr"];
+const colsWithCustomBody = ["1fr", "auto"];
+const typeMap = {
+  alert: void 0,
+  polite: "polite",
+  assertive: "assertive",
+  none: "off"
+};
+const getIsLiveRegion = (type) => type === "polite" || type === "assertive";
+const LiveRegionCorrectlyImplemented = ({
+  id,
+  innerRef,
+  announcementType,
+  ownerPropsConfig
+}) => import_react_dom.default.createPortal(
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_styles.StyledLiveRegionPortal,
+    {
+      id,
+      innerRef,
+      "aria-atomic": "true",
+      "aria-live": typeMap[announcementType],
+      "data-testid": import_exported_related.DSBannerDatatestid.LIVE_REGION_PORTAL,
+      ...ownerPropsConfig
+    }
+  ),
+  document.body
+);
 const DSBanner = (props) => {
   const propsWithDefaults = (0, import_ds_props_helpers.useMemoMergePropsWithDefault)(props, import_react_desc_prop_types.defaultProps);
   const {
@@ -56,48 +88,34 @@ const DSBanner = (props) => {
     showCloseButton,
     containerProps,
     actionRef,
+    withLiveRegionAnnouncement,
+    isPageNotice,
     ...rest
   } = propsWithDefaults;
   const { height: globalHeight, ...globalAttrs } = (0, import_ds_props_helpers.useGetGlobalAttributes)(rest);
   const ownerPropsConfig = (0, import_ds_props_helpers.useOwnerProps)(propsWithDefaults, { ...props });
   const xstyledAttrs = (0, import_ds_props_helpers.useGetXstyledProps)(rest);
-  const innerContainerRef = (0, import_react.useRef)(null);
-  const linkRef = (0, import_react.useRef)(null);
-  let { current } = (0, import_react.useRef)(false);
-  const [isAnimating, setIsAnimating] = (0, import_react.useState)(false);
-  const [height, setHeight] = (0, import_react.useState)(0);
-  const [alertTabIndex, setAlertTabIndex] = (0, import_react.useState)(void 0);
-  (0, import_react.useEffect)(() => {
-    if (innerContainerRef.current) {
-      setHeight(innerContainerRef.current.offsetHeight);
-    }
-  }, [isAnimating, isOpen]);
-  (0, import_react.useEffect)(() => {
-    if (actionRef && actionRef.current) {
-      actionRef.current.focusOnWrapper = () => {
-        if (innerContainerRef.current) {
-          setAlertTabIndex(0);
-          setTimeout(() => {
-            innerContainerRef.current?.focus();
-          }, 300);
-        }
-      };
-      actionRef.current.focusOnLink = () => {
-        if (linkRef.current) {
-          linkRef.current.focus();
-        }
-      };
-    }
-  }, [actionRef]);
-  const handleBlur = (0, import_react.useCallback)(() => {
-    setAlertTabIndex(void 0);
-  }, []);
-  const handleOnKeyDown = (0, import_react.useCallback)((e) => {
-    if (e.key === "Enter" || e.key === " ") {
-      e.preventDefault();
-      if (linkRef.current) linkRef.current.click();
-    }
-  }, []);
+  const layoutMode = (0, import_ds_system.useGetLayoutMode)();
+  const isSmall = layoutMode === "s" || layoutMode === "xs";
+  const innerContainerCols = (0, import_react.useMemo)(() => {
+    if (CustomBody) return colsWithCustomBody;
+    return isSmall ? outOfTheBoxColsSmallLayout : outOfTheBoxCols;
+  }, [CustomBody, isSmall]);
+  const handleActionRefForContainer = (0, import_react.useCallback)(
+    (containerNode) => {
+      if (containerNode && actionRef && actionRef.current) {
+        actionRef.current.focusOnWrapper = () => {
+          if (containerNode) {
+            setTimeout(() => {
+              containerNode?.focus();
+            }, 300);
+          }
+        };
+      }
+    },
+    [actionRef]
+  );
+  const generatedContainerId = (0, import_react.useMemo)(() => `ds-banner-${(0, import_uid.uid)(5)}`, []);
   const handleOnKeyDownToClose = (0, import_react.useCallback)(
     (e) => {
       if (e.key === "Escape") {
@@ -107,85 +125,80 @@ const DSBanner = (props) => {
     },
     [onClose]
   );
-  (0, import_react.useLayoutEffect)(() => {
-    if (isOpen !== current || isOpen) setIsAnimating(true);
-    else setIsAnimating(false);
-  }, [isOpen, current]);
-  const innerCols = import_react.default.useMemo(() => {
-    if (!CustomBody) {
-      const finalCols = ["auto", "fit-content(50%)", "1fr"];
-      if (showCloseButton) finalCols.push("auto");
-      return finalCols;
+  const liveRegionRef = import_react.default.useRef(null);
+  const isOpenRef = import_react.default.useRef(isOpen);
+  isOpenRef.current = isOpen;
+  const textToAnnounceRef = import_react.default.useRef(`${label} ${body}`);
+  textToAnnounceRef.current = `${label} ${body}`;
+  const read = import_react.default.useCallback(() => {
+    if (liveRegionRef.current) {
+      if (isOpenRef.current) liveRegionRef.current.textContent = textToAnnounceRef.current;
+      else liveRegionRef.current.textContent = "";
     }
-    return ["1fr", "auto"];
-  }, [CustomBody, showCloseButton]);
-  if (!isAnimating && !isOpen) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  }, []);
+  (0, import_react.useEffect)(() => {
+    if (isOpen && getIsLiveRegion(withLiveRegionAnnouncement)) read();
+  }, [isOpen, withLiveRegionAnnouncement, read]);
+  if (!isOpen)
+    return getIsLiveRegion(withLiveRegionAnnouncement) ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      LiveRegionCorrectlyImplemented,
+      {
+        id: `${generatedContainerId}-live-region`,
+        innerRef: liveRegionRef,
+        announcementType: withLiveRegionAnnouncement,
+        ownerPropsConfig
+      }
+    ) : null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     import_styles.StyledBannerContainer,
     {
-      isOpen,
-      height,
       onKeyDown: handleOnKeyDownToClose,
-      isAnimating,
-      onAnimationEnd: () => {
-        current = isOpen;
-        setIsAnimating(false);
-      },
       "data-testid": import_exported_related.DSBannerDatatestid.CONTAINER,
+      innerRef: handleActionRefForContainer,
+      tabIndex: -1,
+      role: isPageNotice ? "region" : void 0,
       ...containerProps,
       ...globalAttrs,
       ...xstyledAttrs,
       ...ownerPropsConfig,
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_styles.StyledInnerContainer,
-        {
-          cols: innerCols,
-          $type: type,
-          "data-type": type,
-          isOpen,
-          innerRef: innerContainerRef,
-          isAnimating,
-          "data-testid": import_exported_related.DSBannerDatatestid.INNER_CONTAINER,
-          role: "alert",
-          tabIndex: alertTabIndex,
-          onBlur: handleBlur,
-          ...ownerPropsConfig,
-          children: !CustomBody ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledIconContainer, { "data-testid": import_exported_related.DSBannerDatatestid.ICON_CONTAINER, ...ownerPropsConfig, children: import_icons.icons[type] }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledTitle, { ...ownerPropsConfig, children: label }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styles.StyledSubTitle, { ...ownerPropsConfig, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: body }),
-              actionLink && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                import_styles.StyledActionLink,
-                {
-                  "data-testid": import_exported_related.DSBannerDatatestid.ACTION_LINK,
-                  onClick: actionLink.onClick,
-                  href: actionLink.href,
-                  innerRef: linkRef,
-                  onKeyDown: handleOnKeyDown,
-                  tabIndex: 0,
-                  isBodyEmpty: !body,
-                  title: actionLink.label,
-                  ...ownerPropsConfig,
-                  children: actionLink.label
-                }
-              )
-            ] }),
-            showCloseButton ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              import_styles.StyledCloseButton,
-              {
-                "data-testid": import_exported_related.DSBannerDatatestid.CLOSE_BUTTON,
-                buttonType: "icon",
-                innerRef: closeBtnRef,
-                onClick: onClose,
-                "aria-label": "Close icon",
-                ...ownerPropsConfig,
-                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.CloseX, { width: 12, height: 12 })
-              }
-            ) : null
-          ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CustomBody, {})
-        }
-      )
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styles.StyledBannerLayout, { ...ownerPropsConfig, $type: type, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_styles.StyledInnerContainer,
+            {
+              cols: innerContainerCols,
+              "data-type": type,
+              "data-testid": import_exported_related.DSBannerDatatestid.INNER_CONTAINER,
+              role: withLiveRegionAnnouncement === "alert" ? "alert" : void 0,
+              id: generatedContainerId,
+              ...ownerPropsConfig,
+              children: !CustomBody ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DSBannerContent.DSBannerContent, { propsWithDefaults }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CustomBody, {})
+            }
+          ),
+          !CustomBody && showCloseButton ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_styles.StyledCloseButton,
+            {
+              "data-testid": import_exported_related.DSBannerDatatestid.CLOSE_BUTTON,
+              buttonType: "icon",
+              innerRef: closeBtnRef,
+              onClick: onClose,
+              "aria-label": "Visually dismiss the banner",
+              "aria-describedby": generatedContainerId,
+              ...ownerPropsConfig,
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.CloseX, { width: 12, height: 12 })
+            }
+          ) : null
+        ] }),
+        getIsLiveRegion(withLiveRegionAnnouncement) ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          LiveRegionCorrectlyImplemented,
+          {
+            id: `${generatedContainerId}-live-region`,
+            innerRef: liveRegionRef,
+            announcementType: withLiveRegionAnnouncement,
+            ownerPropsConfig
+          }
+        ) : null
+      ]
     }
   );
 };

package/dist/cjs/DSBanner.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/DSBanner.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-lines */\nimport { CloseX } from '@elliemae/ds-icons';\nimport {\n  describe,\n  useGetGlobalAttributes,\n  useGetXstyledProps,\n  useMemoMergePropsWithDefault,\n  useOwnerProps,\n} from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';\nimport { DSBannerDatatestid, DSBannerName } from './exported-related/index.js';\nimport type { DSBannerT } from './react-desc-prop-types.js';\nimport { defaultProps, DSBannerPropTypesSchema } from './react-desc-prop-types.js';\nimport {\n  StyledActionLink,\n  StyledBannerContainer,\n  StyledCloseButton,\n  StyledIconContainer,\n  StyledInnerContainer,\n  StyledSubTitle,\n  StyledTitle,\n} from './styles.js';\nimport { icons } from './utils/icons.js';\n\nconst DSBanner: React.ComponentType<DSBannerT.Props> = (props) => {\n  const propsWithDefaults = useMemoMergePropsWithDefault<DSBannerT.InternalProps>(props, defaultProps);\n\n  const {\n    type,\n    isOpen,\n    onClose,\n    label,\n    body,\n    closeBtnRef,\n    CustomBody,\n    actionLink,\n    showCloseButton,\n    containerProps,\n    actionRef,\n    ...rest\n  } = propsWithDefaults;\n  // eslint-disable-next-line no-unused-vars\n  const { height: globalHeight, ...globalAttrs } = useGetGlobalAttributes(rest);\n  const ownerPropsConfig = useOwnerProps(propsWithDefaults, { ...props });\n\n  const xstyledAttrs = useGetXstyledProps(rest);\n\n  const innerContainerRef = useRef<HTMLDivElement>(null);\n  const linkRef = useRef<HTMLAnchorElement>(null);\n  let { current } = useRef<boolean>(false);\n  const [isAnimating, setIsAnimating] = useState<boolean>(false);\n  const [height, setHeight] = useState<number>(0);\n  const [alertTabIndex, setAlertTabIndex] = useState<TypescriptHelpersT.WCAGTabIndex | undefined>(undefined);\n\n  useEffect(() => {\n    if (innerContainerRef.current) {\n      setHeight(innerContainerRef.current.offsetHeight);\n    }\n  }, [isAnimating, isOpen]);\n\n  useEffect(() => {\n    if (actionRef && actionRef.current) {\n      actionRef.current.focusOnWrapper = () => {\n        if (innerContainerRef.current) {\n          setAlertTabIndex(0);\n          setTimeout(() => {\n            innerContainerRef.current?.focus();\n          }, 300);\n        }\n      };\n      actionRef.current.focusOnLink = () => {\n        if (linkRef.current) {\n          linkRef.current.focus();\n        }\n      };\n    }\n  }, [actionRef]);\n\n  const handleBlur = useCallback(() => {\n    setAlertTabIndex(undefined);\n  }, []);\n\n  const handleOnKeyDown = useCallback((e: React.KeyboardEvent) => {\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      if (linkRef.current) linkRef.current.click();\n    }\n  }, []);\n\n  const handleOnKeyDownToClose = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        e.preventDefault();\n        onClose();\n      }\n    },\n    [onClose],\n  );\n\n  useLayoutEffect(() => {\n    if (isOpen !== current || isOpen) setIsAnimating(true);\n    else setIsAnimating(false);\n  }, [isOpen, current]);\n\n  const innerCols = React.useMemo(() => {\n    if (!CustomBody) {\n      const finalCols = ['auto', 'fit-content(50%)', '1fr'];\n      if (showCloseButton) finalCols.push('auto');\n      return finalCols;\n    }\n    return ['1fr', 'auto'];\n  }, [CustomBody, showCloseButton]);\n\n  if (!isAnimating && !isOpen) return null;\n\n  return (\n    <StyledBannerContainer\n      isOpen={isOpen}\n      height={height}\n      onKeyDown={handleOnKeyDownToClose}\n      isAnimating={isAnimating}\n      onAnimationEnd={() => {\n        current = isOpen;\n        setIsAnimating(false);\n      }}\n      data-testid={DSBannerDatatestid.CONTAINER}\n      {...containerProps}\n      {...globalAttrs}\n      {...xstyledAttrs}\n      {...ownerPropsConfig}\n    >\n      <StyledInnerContainer\n        cols={innerCols}\n        $type={type}\n        data-type={type}\n        isOpen={isOpen}\n        innerRef={innerContainerRef}\n        isAnimating={isAnimating}\n        data-testid={DSBannerDatatestid.INNER_CONTAINER}\n        role=\"alert\"\n        tabIndex={alertTabIndex}\n        onBlur={handleBlur}\n        {...ownerPropsConfig}\n      >\n        {!CustomBody ? (\n          <>\n            <StyledIconContainer data-testid={DSBannerDatatestid.ICON_CONTAINER} {...ownerPropsConfig}>\n              {icons[type]}\n            </StyledIconContainer>\n            <StyledTitle {...ownerPropsConfig}>{label}</StyledTitle>\n            <StyledSubTitle {...ownerPropsConfig}>\n              <span>{body}</span>\n              {actionLink && (\n                <StyledActionLink\n                  data-testid={DSBannerDatatestid.ACTION_LINK}\n                  onClick={actionLink.onClick}\n                  href={actionLink.href}\n                  innerRef={linkRef}\n                  onKeyDown={handleOnKeyDown}\n                  tabIndex={0}\n                  isBodyEmpty={!body}\n                  title={actionLink.label}\n                  {...ownerPropsConfig}\n                >\n                  {actionLink.label}\n                </StyledActionLink>\n              )}\n            </StyledSubTitle>\n            {showCloseButton ? (\n              <StyledCloseButton\n                data-testid={DSBannerDatatestid.CLOSE_BUTTON}\n                buttonType=\"icon\"\n                innerRef={closeBtnRef}\n                onClick={onClose}\n                aria-label=\"Close icon\"\n                {...ownerPropsConfig}\n              >\n                <CloseX width={12} height={12} />\n              </StyledCloseButton>\n            ) : null}\n          </>\n        ) : (\n          <CustomBody />\n        )}\n      </StyledInnerContainer>\n    </StyledBannerContainer>\n  );\n};\n\nDSBanner.displayName = DSBannerName;\nconst DSBannerWithSchema = describe(DSBanner);\nDSBannerWithSchema.propTypes = DSBannerPropTypesSchema;\n\nexport default DSBanner;\nexport { DSBanner, DSBannerWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADkJb;AAjJV,sBAAuB;AACvB,8BAMO;AAEP,mBAAiF;AACjF,8BAAiD;AAEjD,mCAAsD;AACtD,oBAQO;AACP,mBAAsB;AAEtB,MAAM,WAAiD,CAAC,UAAU;AAChE,QAAM,wBAAoB,sDAAsD,OAAO,yCAAY;AAEnG,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,EAAE,QAAQ,cAAc,GAAG,YAAY,QAAI,gDAAuB,IAAI;AAC5E,QAAM,uBAAmB,uCAAc,mBAAmB,EAAE,GAAG,MAAM,CAAC;AAEtE,QAAM,mBAAe,4CAAmB,IAAI;AAE5C,QAAM,wBAAoB,qBAAuB,IAAI;AACrD,QAAM,cAAU,qBAA0B,IAAI;AAC9C,MAAI,EAAE,QAAQ,QAAI,qBAAgB,KAAK;AACvC,QAAM,CAAC,aAAa,cAAc,QAAI,uBAAkB,KAAK;AAC7D,QAAM,CAAC,QAAQ,SAAS,QAAI,uBAAiB,CAAC;AAC9C,QAAM,CAAC,eAAe,gBAAgB,QAAI,uBAAsD,MAAS;AAEzG,8BAAU,MAAM;AACd,QAAI,kBAAkB,SAAS;AAC7B,gBAAU,kBAAkB,QAAQ,YAAY;AAAA,IAClD;AAAA,EACF,GAAG,CAAC,aAAa,MAAM,CAAC;AAExB,8BAAU,MAAM;AACd,QAAI,aAAa,UAAU,SAAS;AAClC,gBAAU,QAAQ,iBAAiB,MAAM;AACvC,YAAI,kBAAkB,SAAS;AAC7B,2BAAiB,CAAC;AAClB,qBAAW,MAAM;AACf,8BAAkB,SAAS,MAAM;AAAA,UACnC,GAAG,GAAG;AAAA,QACR;AAAA,MACF;AACA,gBAAU,QAAQ,cAAc,MAAM;AACpC,YAAI,QAAQ,SAAS;AACnB,kBAAQ,QAAQ,MAAM;AAAA,QACxB;AAAA,MACF;AAAA,IACF;AAAA,EACF,GAAG,CAAC,SAAS,CAAC;AAEd,QAAM,iBAAa,0BAAY,MAAM;AACnC,qBAAiB,MAAS;AAAA,EAC5B,GAAG,CAAC,CAAC;AAEL,QAAM,sBAAkB,0BAAY,CAAC,MAA2B;AAC9D,QAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,QAAE,eAAe;AACjB,UAAI,QAAQ,QAAS,SAAQ,QAAQ,MAAM;AAAA,IAC7C;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,6BAAyB;AAAA,IAC7B,CAAC,MAA2B;AAC1B,UAAI,EAAE,QAAQ,UAAU;AACtB,UAAE,eAAe;AACjB,gBAAQ;AAAA,MACV;AAAA,IACF;AAAA,IACA,CAAC,OAAO;AAAA,EACV;AAEA,oCAAgB,MAAM;AACpB,QAAI,WAAW,WAAW,OAAQ,gBAAe,IAAI;AAAA,QAChD,gBAAe,KAAK;AAAA,EAC3B,GAAG,CAAC,QAAQ,OAAO,CAAC;AAEpB,QAAM,YAAY,aAAAA,QAAM,QAAQ,MAAM;AACpC,QAAI,CAAC,YAAY;AACf,YAAM,YAAY,CAAC,QAAQ,oBAAoB,KAAK;AACpD,UAAI,gBAAiB,WAAU,KAAK,MAAM;AAC1C,aAAO;AAAA,IACT;AACA,WAAO,CAAC,OAAO,MAAM;AAAA,EACvB,GAAG,CAAC,YAAY,eAAe,CAAC;AAEhC,MAAI,CAAC,eAAe,CAAC,OAAQ,QAAO;AAEpC,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,WAAW;AAAA,MACX;AAAA,MACA,gBAAgB,MAAM;AACpB,kBAAU;AACV,uBAAe,KAAK;AAAA,MACtB;AAAA,MACA,eAAa,2CAAmB;AAAA,MAC/B,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MAEJ;AAAA,QAAC;AAAA;AAAA,UACC,MAAM;AAAA,UACN,OAAO;AAAA,UACP,aAAW;AAAA,UACX;AAAA,UACA,UAAU;AAAA,UACV;AAAA,UACA,eAAa,2CAAmB;AAAA,UAChC,MAAK;AAAA,UACL,UAAU;AAAA,UACV,QAAQ;AAAA,UACP,GAAG;AAAA,UAEH,WAAC,aACA,4EACE;AAAA,wDAAC,qCAAoB,eAAa,2CAAmB,gBAAiB,GAAG,kBACtE,6BAAM,IAAI,GACb;AAAA,YACA,4CAAC,6BAAa,GAAG,kBAAmB,iBAAM;AAAA,YAC1C,6CAAC,gCAAgB,GAAG,kBAClB;AAAA,0DAAC,UAAM,gBAAK;AAAA,cACX,cACC;AAAA,gBAAC;AAAA;AAAA,kBACC,eAAa,2CAAmB;AAAA,kBAChC,SAAS,WAAW;AAAA,kBACpB,MAAM,WAAW;AAAA,kBACjB,UAAU;AAAA,kBACV,WAAW;AAAA,kBACX,UAAU;AAAA,kBACV,aAAa,CAAC;AAAA,kBACd,OAAO,WAAW;AAAA,kBACjB,GAAG;AAAA,kBAEH,qBAAW;AAAA;AAAA,cACd;AAAA,eAEJ;AAAA,YACC,kBACC;AAAA,cAAC;AAAA;AAAA,gBACC,eAAa,2CAAmB;AAAA,gBAChC,YAAW;AAAA,gBACX,UAAU;AAAA,gBACV,SAAS;AAAA,gBACT,cAAW;AAAA,gBACV,GAAG;AAAA,gBAEJ,sDAAC,0BAAO,OAAO,IAAI,QAAQ,IAAI;AAAA;AAAA,YACjC,IACE;AAAA,aACN,IAEA,4CAAC,cAAW;AAAA;AAAA,MAEhB;AAAA;AAAA,EACF;AAEJ;AAEA,SAAS,cAAc;AACvB,MAAM,yBAAqB,kCAAS,QAAQ;AAC5C,mBAAmB,YAAY;AAE/B,IAAO,mBAAQ;",
-  "names": ["React"]
+  "sourcesContent": ["import { CloseX } from '@elliemae/ds-icons';\nimport {\n  describe,\n  useGetGlobalAttributes,\n  useGetXstyledProps,\n  useMemoMergePropsWithDefault,\n  useOwnerProps,\n} from '@elliemae/ds-props-helpers';\nimport React, { useCallback, useEffect, useMemo } from 'react';\nimport ReactDOM from 'react-dom';\nimport { uid } from 'uid';\nimport { useGetLayoutMode } from '@elliemae/ds-system';\nimport { DSBannerContent } from './DSBannerContent.js';\nimport { DSBannerDatatestid, DSBannerName } from './exported-related/index.js';\nimport type { DSBannerT } from './react-desc-prop-types.js';\nimport { defaultProps, DSBannerPropTypesSchema } from './react-desc-prop-types.js';\nimport {\n  StyledLiveRegionPortal,\n  StyledBannerContainer,\n  StyledBannerLayout,\n  StyledCloseButton,\n  StyledInnerContainer,\n} from './styles.js';\n\nconst outOfTheBoxCols = ['auto', 'fit-content(50%)', '1fr'];\nconst outOfTheBoxColsSmallLayout = ['auto', '1fr'];\nconst colsWithCustomBody = ['1fr', 'auto'];\nconst typeMap = {\n  alert: undefined,\n  polite: 'polite',\n  assertive: 'assertive',\n  none: 'off',\n} as const;\n\nconst getIsLiveRegion = (type: string) => type === 'polite' || type === 'assertive';\n\nconst LiveRegionCorrectlyImplemented = ({\n  id,\n  innerRef,\n  announcementType,\n  ownerPropsConfig,\n}: {\n  id: string;\n  innerRef: React.Ref<HTMLDivElement>;\n  announcementType: 'alert' | 'polite' | 'assertive' | 'none';\n  ownerPropsConfig: Record<string, unknown>;\n}) =>\n  ReactDOM.createPortal(\n    <StyledLiveRegionPortal\n      id={id}\n      innerRef={innerRef}\n      aria-atomic=\"true\"\n      // off is never going to be printed because this portal is not printed when announcement is none\n      // the off is just a quick hack to circumvent typescript typechecks in the static building\n      aria-live={typeMap[announcementType]}\n      data-testid={DSBannerDatatestid.LIVE_REGION_PORTAL}\n      {...ownerPropsConfig}\n    />,\n    document.body,\n  );\n\nconst DSBanner: React.ComponentType<DSBannerT.Props> = (props) => {\n  const propsWithDefaults = useMemoMergePropsWithDefault<DSBannerT.InternalProps>(props, defaultProps);\n\n  const {\n    type,\n    isOpen,\n    onClose,\n    label,\n    body,\n    closeBtnRef,\n    CustomBody,\n    actionLink,\n    showCloseButton,\n    containerProps,\n    actionRef,\n    withLiveRegionAnnouncement,\n    isPageNotice,\n    ...rest\n  } = propsWithDefaults;\n  // eslint-disable-next-line no-unused-vars\n  const { height: globalHeight, ...globalAttrs } = useGetGlobalAttributes(rest);\n  const ownerPropsConfig = useOwnerProps(propsWithDefaults, { ...props });\n  const xstyledAttrs = useGetXstyledProps(rest);\n\n  const layoutMode = useGetLayoutMode();\n  const isSmall = layoutMode === 's' || layoutMode === 'xs';\n  const innerContainerCols = useMemo(() => {\n    if (CustomBody) return colsWithCustomBody;\n    return isSmall ? outOfTheBoxColsSmallLayout : outOfTheBoxCols;\n  }, [CustomBody, isSmall]);\n\n  const handleActionRefForContainer = useCallback<React.RefCallback<HTMLDivElement>>(\n    (containerNode) => {\n      if (containerNode && actionRef && actionRef.current) {\n        actionRef.current.focusOnWrapper = () => {\n          if (containerNode) {\n            setTimeout(() => {\n              containerNode?.focus();\n            }, 300);\n          }\n        };\n      }\n    },\n    [actionRef],\n  );\n\n  const generatedContainerId = useMemo(() => `ds-banner-${uid(5)}`, []);\n\n  const handleOnKeyDownToClose = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        e.preventDefault();\n        onClose();\n      }\n    },\n    [onClose],\n  );\n\n  const liveRegionRef = React.useRef<HTMLDivElement>(null);\n  const isOpenRef = React.useRef(isOpen);\n  isOpenRef.current = isOpen;\n  const textToAnnounceRef = React.useRef(`${label} ${body}`);\n  textToAnnounceRef.current = `${label} ${body}`;\n  const read = React.useCallback(() => {\n    if (liveRegionRef.current) {\n      if (isOpenRef.current) liveRegionRef.current.textContent = textToAnnounceRef.current;\n      else liveRegionRef.current.textContent = '';\n    }\n  }, []);\n\n  useEffect(() => {\n    if (isOpen && getIsLiveRegion(withLiveRegionAnnouncement)) read();\n  }, [isOpen, withLiveRegionAnnouncement, read]);\n\n  // this used to \"try\" to animate the banner closing\n  //   in reality the closing animation has never actually worked (the banner just disappears, due to using \"&&\" instead of \"||\" in the logic)\n  //   given that it has never worked, and the complexity it adds to the code, we are officially removing the closing animation for now\n  //   if there is a future need for it, we can re-visit adding it back in.\n  if (!isOpen)\n    return getIsLiveRegion(withLiveRegionAnnouncement) ? (\n      <LiveRegionCorrectlyImplemented\n        id={`${generatedContainerId}-live-region`}\n        innerRef={liveRegionRef}\n        announcementType={withLiveRegionAnnouncement}\n        ownerPropsConfig={ownerPropsConfig}\n      />\n    ) : null;\n\n  return (\n    <StyledBannerContainer\n      onKeyDown={handleOnKeyDownToClose}\n      data-testid={DSBannerDatatestid.CONTAINER}\n      innerRef={handleActionRefForContainer}\n      tabIndex={-1}\n      role={isPageNotice ? 'region' : undefined}\n      {...containerProps}\n      {...globalAttrs}\n      {...xstyledAttrs}\n      {...ownerPropsConfig}\n    >\n      <StyledBannerLayout {...ownerPropsConfig} $type={type}>\n        <StyledInnerContainer\n          cols={innerContainerCols}\n          data-type={type}\n          data-testid={DSBannerDatatestid.INNER_CONTAINER}\n          role={withLiveRegionAnnouncement === 'alert' ? 'alert' : undefined}\n          id={generatedContainerId}\n          {...ownerPropsConfig}\n        >\n          {!CustomBody ? <DSBannerContent propsWithDefaults={propsWithDefaults} /> : <CustomBody />}\n        </StyledInnerContainer>\n        {!CustomBody && showCloseButton ? (\n          <StyledCloseButton\n            data-testid={DSBannerDatatestid.CLOSE_BUTTON}\n            buttonType=\"icon\"\n            innerRef={closeBtnRef}\n            onClick={onClose}\n            aria-label=\"Visually dismiss the banner\"\n            aria-describedby={generatedContainerId}\n            {...ownerPropsConfig}\n          >\n            <CloseX width={12} height={12} />\n          </StyledCloseButton>\n        ) : null}\n      </StyledBannerLayout>\n      {getIsLiveRegion(withLiveRegionAnnouncement) ? (\n        <LiveRegionCorrectlyImplemented\n          id={`${generatedContainerId}-live-region`}\n          innerRef={liveRegionRef}\n          announcementType={withLiveRegionAnnouncement}\n          ownerPropsConfig={ownerPropsConfig}\n        />\n      ) : null}\n    </StyledBannerContainer>\n  );\n};\n\nDSBanner.displayName = DSBannerName;\nconst DSBannerWithSchema = describe(DSBanner);\nDSBannerWithSchema.propTypes = DSBannerPropTypesSchema;\n\nexport default DSBanner;\nexport { DSBanner, DSBannerWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
+  "names": ["ReactDOM", "React"]
 }

package/dist/cjs/DSBannerContent.js

@@ -0,0 +1,101 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var DSBannerContent_exports = {};
+__export(DSBannerContent_exports, {
+  DSBannerContent: () => DSBannerContent,
+  icons: () => icons
+});
+module.exports = __toCommonJS(DSBannerContent_exports);
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_ds_icons = require("@elliemae/ds-icons");
+var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
+var import_ds_typography = require("@elliemae/ds-typography");
+var import_react = __toESM(require("react"));
+var import_exported_related = require("./exported-related/index.js");
+var import_styles = require("./styles.js");
+const icons = {
+  success: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.SuccessFill, { color: ["success", "900"], width: "20px", height: "20px" }),
+  info: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.InfoFill, { color: ["brand-primary", "600"], width: "20px", height: "20px" }),
+  danger: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.AlertsDetailFill, { color: ["danger", "900"], width: "20px", height: "20px" }),
+  warning: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.WarningSquare, { color: ["warning", "900"], width: "20px", height: "20px" })
+};
+const DSBannerContent = (props) => {
+  const {
+    propsWithDefaults,
+    propsWithDefaults: { type, label, body, actionLink, actionRef }
+  } = props;
+  const ownerPropsConfig = (0, import_ds_props_helpers.useOwnerProps)(propsWithDefaults, { ...props });
+  const linkRef = import_react.default.useRef(null);
+  const handleActionRefForLink = (0, import_react.useCallback)(
+    (linkNode) => {
+      if (linkNode) {
+        linkRef.current = linkNode;
+        if (actionRef && actionRef.current) {
+          actionRef.current.focusOnLink = () => {
+            linkNode?.focus?.();
+          };
+        }
+      }
+    },
+    [actionRef]
+  );
+  const handleOnKeyDown = (0, import_react.useCallback)((e) => {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      if (linkRef.current) linkRef.current.click();
+    }
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledIconContainer, { "data-testid": import_exported_related.DSBannerDatatestid.ICON_CONTAINER, ...ownerPropsConfig, children: icons[type] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledTitle, { variant: import_ds_typography.TYPOGRAPHY_VARIANTS.B1, ...ownerPropsConfig, children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styles.StyledSubTitle, { id: import_exported_related.BANNER_BODY_ID, variant: import_ds_typography.TYPOGRAPHY_VARIANTS.B1, ...ownerPropsConfig, children: [
+      body,
+      actionLink && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        "    ",
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_styles.StyledActionLink,
+          {
+            "data-testid": import_exported_related.DSBannerDatatestid.ACTION_LINK,
+            onClick: actionLink.onClick,
+            href: actionLink.href,
+            innerRef: handleActionRefForLink,
+            onKeyDown: handleOnKeyDown,
+            tabIndex: 0,
+            isBodyEmpty: !body,
+            title: actionLink.label,
+            ...ownerPropsConfig,
+            children: actionLink.label
+          }
+        )
+      ] })
+    ] })
+  ] });
+};
+//# sourceMappingURL=DSBannerContent.js.map

package/dist/cjs/DSBannerContent.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/DSBannerContent.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["/* eslint-disable max-lines */\nimport { AlertsDetailFill, InfoFill, SuccessFill, WarningSquare } from '@elliemae/ds-icons';\nimport { useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { TYPOGRAPHY_VARIANTS } from '@elliemae/ds-typography';\nimport React, { useCallback } from 'react';\nimport { BANNER_BODY_ID, DSBannerDatatestid } from './exported-related/index.js';\nimport type { DSBannerT } from './react-desc-prop-types.js';\nimport { StyledActionLink, StyledIconContainer, StyledSubTitle, StyledTitle } from './styles.js';\n\nexport const icons: Record<string, JSX.Element> = {\n  success: <SuccessFill color={['success', '900']} width=\"20px\" height=\"20px\" />,\n  info: <InfoFill color={['brand-primary', '600']} width=\"20px\" height=\"20px\" />,\n  danger: <AlertsDetailFill color={['danger', '900']} width=\"20px\" height=\"20px\" />,\n  warning: <WarningSquare color={['warning', '900']} width=\"20px\" height=\"20px\" />,\n};\n\ninterface DSBannerContentProps {\n  propsWithDefaults: DSBannerT.InternalProps;\n}\n\nexport const DSBannerContent: React.ComponentType<DSBannerContentProps> = (props) => {\n  const {\n    propsWithDefaults,\n    propsWithDefaults: { type, label, body, actionLink, actionRef },\n  } = props;\n  const ownerPropsConfig = useOwnerProps(propsWithDefaults, { ...props });\n\n  const linkRef = React.useRef<HTMLAnchorElement>(null) as React.MutableRefObject<HTMLAnchorElement>;\n\n  const handleActionRefForLink = useCallback<React.RefCallback<HTMLAnchorElement>>(\n    (linkNode) => {\n      if (linkNode) {\n        linkRef.current = linkNode;\n        if (actionRef && actionRef.current) {\n          actionRef.current.focusOnLink = () => {\n            linkNode?.focus?.();\n          };\n        }\n      }\n    },\n    [actionRef],\n  );\n\n  const handleOnKeyDown = useCallback((e: React.KeyboardEvent) => {\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      if (linkRef.current) linkRef.current.click();\n    }\n  }, []);\n\n  return (\n    <>\n      <StyledIconContainer data-testid={DSBannerDatatestid.ICON_CONTAINER} {...ownerPropsConfig}>\n        {icons[type]}\n      </StyledIconContainer>\n      <StyledTitle variant={TYPOGRAPHY_VARIANTS.B1} {...ownerPropsConfig}>\n        {label}\n      </StyledTitle>\n      <StyledSubTitle id={BANNER_BODY_ID} variant={TYPOGRAPHY_VARIANTS.B1} {...ownerPropsConfig}>\n        {body}\n        {actionLink && (\n          <>\n            {/* This way of handling the space is making use of the browser default\n              white-space clamping, avoiding lots of JS code. */}\n            {'    '}\n            <StyledActionLink\n              data-testid={DSBannerDatatestid.ACTION_LINK}\n              onClick={actionLink.onClick}\n              href={actionLink.href}\n              innerRef={handleActionRefForLink}\n              onKeyDown={handleOnKeyDown}\n              tabIndex={0}\n              isBodyEmpty={!body}\n              title={actionLink.label}\n              {...ownerPropsConfig}\n            >\n              {actionLink.label}\n            </StyledActionLink>\n          </>\n        )}\n      </StyledSubTitle>\n    </>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADUZ;AATX,sBAAuE;AACvE,8BAA8B;AAC9B,2BAAoC;AACpC,mBAAmC;AACnC,8BAAmD;AAEnD,oBAAmF;AAE5E,MAAM,QAAqC;AAAA,EAChD,SAAS,4CAAC,+BAAY,OAAO,CAAC,WAAW,KAAK,GAAG,OAAM,QAAO,QAAO,QAAO;AAAA,EAC5E,MAAM,4CAAC,4BAAS,OAAO,CAAC,iBAAiB,KAAK,GAAG,OAAM,QAAO,QAAO,QAAO;AAAA,EAC5E,QAAQ,4CAAC,oCAAiB,OAAO,CAAC,UAAU,KAAK,GAAG,OAAM,QAAO,QAAO,QAAO;AAAA,EAC/E,SAAS,4CAAC,iCAAc,OAAO,CAAC,WAAW,KAAK,GAAG,OAAM,QAAO,QAAO,QAAO;AAChF;AAMO,MAAM,kBAA6D,CAAC,UAAU;AACnF,QAAM;AAAA,IACJ;AAAA,IACA,mBAAmB,EAAE,MAAM,OAAO,MAAM,YAAY,UAAU;AAAA,EAChE,IAAI;AACJ,QAAM,uBAAmB,uCAAc,mBAAmB,EAAE,GAAG,MAAM,CAAC;AAEtE,QAAM,UAAU,aAAAA,QAAM,OAA0B,IAAI;AAEpD,QAAM,6BAAyB;AAAA,IAC7B,CAAC,aAAa;AACZ,UAAI,UAAU;AACZ,gBAAQ,UAAU;AAClB,YAAI,aAAa,UAAU,SAAS;AAClC,oBAAU,QAAQ,cAAc,MAAM;AACpC,sBAAU,QAAQ;AAAA,UACpB;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,SAAS;AAAA,EACZ;AAEA,QAAM,sBAAkB,0BAAY,CAAC,MAA2B;AAC9D,QAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,QAAE,eAAe;AACjB,UAAI,QAAQ,QAAS,SAAQ,QAAQ,MAAM;AAAA,IAC7C;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,SACE,4EACE;AAAA,gDAAC,qCAAoB,eAAa,2CAAmB,gBAAiB,GAAG,kBACtE,gBAAM,IAAI,GACb;AAAA,IACA,4CAAC,6BAAY,SAAS,yCAAoB,IAAK,GAAG,kBAC/C,iBACH;AAAA,IACA,6CAAC,gCAAe,IAAI,wCAAgB,SAAS,yCAAoB,IAAK,GAAG,kBACtE;AAAA;AAAA,MACA,cACC,4EAGG;AAAA;AAAA,QACD;AAAA,UAAC;AAAA;AAAA,YACC,eAAa,2CAAmB;AAAA,YAChC,SAAS,WAAW;AAAA,YACpB,MAAM,WAAW;AAAA,YACjB,UAAU;AAAA,YACV,WAAW;AAAA,YACX,UAAU;AAAA,YACV,aAAa,CAAC;AAAA,YACd,OAAO,WAAW;AAAA,YACjB,GAAG;AAAA,YAEH,qBAAW;AAAA;AAAA,QACd;AAAA,SACF;AAAA,OAEJ;AAAA,KACF;AAEJ;",
+  "names": ["React"]
+}

package/dist/cjs/exported-related/index.js

@@ -28,6 +28,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var exported_related_exports = {};
 __export(exported_related_exports, {
+  BANNER_BODY_ID: () => BANNER_BODY_ID,
   BANNER_TYPES: () => BANNER_TYPES,
   DSBannerDatatestid: () => DSBannerDatatestid,
   DSBannerName: () => DSBannerName,
@@ -43,6 +44,7 @@ const BANNER_TYPES = {
   WARNING: "warning",
   DANGER: "danger"
 };
+const BANNER_BODY_ID = "ds-banner-body";
 const DSBannerSlots = {
   CONTAINER: "container",
   INNER_CONTAINER: "inner-container",
@@ -51,7 +53,9 @@ const DSBannerSlots = {
   SUBTITLE: "subtitle",
   ICON_CONTAINER: "icon-container",
   ACTION_LINK: "action-link",
-  CLOSE_BUTTON: "close-button"
+  CLOSE_BUTTON: "close-button",
+  LAYOUT: "layout",
+  LIVE_REGION_PORTAL: "live-region-portal"
 };
 const DSBannerDatatestid = {
   ...(0, import_ds_system.slotObjectToDataTestIds)(DSBannerName, DSBannerSlots),

package/dist/cjs/exported-related/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/exported-related/index.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSBannerName = 'DSBanner';\nexport const BANNER_TYPES = {\n  INFO: 'info',\n  SUCCESS: 'success',\n  WARNING: 'warning',\n  DANGER: 'danger',\n} as const;\n\n// previously this was the exported data-testid object\n// the one marked as // ok are the one that works with the slots convention and works with the slotObjectToDataTestIds function\n//   the rest are not compatible and needs manual handling\n// export const DSBannerDatatestid = {\n//   CONTAINER: 'ds-banner-container', // ok\n//   CUSTOM_CONTAINER: 'ds-banner-custom-container', // ok\n//   ACTION_LINK: 'ds-banner-action-link', // ok\n//   CLOSE_BUTTON: 'ds-banner-close-button', // ok\n//   // From here down are not compatible with the slotObjectToDataTestIds function.\n//   INNER_CONTAINER: 'ds-banner',\n//   ICON_CONTAINER: 'ds-banner-icon',\n//   // from here they were not present but they had an asigned Slot.\n//   // TITLE\n//   // SUBTITLE\n// };\n\n// we are naming this with the ${component_name}_slots convention to namespace & avoid errors on duplicate exports variables in aggregators\n\nexport const DSBannerSlots = {\n  CONTAINER: 'container',\n  INNER_CONTAINER: 'inner-container',\n  CUSTOM_CONTAINER: 'custom-container',\n  TITLE: 'title',\n  SUBTITLE: 'subtitle',\n  ICON_CONTAINER: 'icon-container',\n  ACTION_LINK: 'action-link',\n  CLOSE_BUTTON: 'close-button',\n} as const;\n\n// we are naming this with the ${component_name}_data_testid convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const DSBannerDatatestid = {\n  ...(slotObjectToDataTestIds(DSBannerName, DSBannerSlots) as Record<keyof typeof DSBannerSlots, string>),\n  // handling the rest of the data-testids that are not compatible with the slotObjectToDataTestIds function manually to avoid breaking changes\n  INNER_CONTAINER: 'ds-banner',\n  ICON_CONTAINER: 'ds-banner-icon',\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAwC;AAEjC,MAAM,eAAe;AACrB,MAAM,eAAe;AAAA,EAC1B,MAAM;AAAA,EACN,SAAS;AAAA,EACT,SAAS;AAAA,EACT,QAAQ;AACV;AAoBO,MAAM,gBAAgB;AAAA,EAC3B,WAAW;AAAA,EACX,iBAAiB;AAAA,EACjB,kBAAkB;AAAA,EAClB,OAAO;AAAA,EACP,UAAU;AAAA,EACV,gBAAgB;AAAA,EAChB,aAAa;AAAA,EACb,cAAc;AAChB;AAGO,MAAM,qBAAqB;AAAA,EAChC,OAAI,0CAAwB,cAAc,aAAa;AAAA;AAAA,EAEvD,iBAAiB;AAAA,EACjB,gBAAgB;AAClB;",
+  "sourcesContent": ["import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSBannerName = 'DSBanner';\nexport const BANNER_TYPES = {\n  INFO: 'info',\n  SUCCESS: 'success',\n  WARNING: 'warning',\n  DANGER: 'danger',\n} as const;\n\nexport const BANNER_BODY_ID = 'ds-banner-body';\n\n// previously this was the exported data-testid object\n// the one marked as // ok are the one that works with the slots convention and works with the slotObjectToDataTestIds function\n//   the rest are not compatible and needs manual handling\n// export const DSBannerDatatestid = {\n//   CONTAINER: 'ds-banner-container', // ok\n//   CUSTOM_CONTAINER: 'ds-banner-custom-container', // ok\n//   ACTION_LINK: 'ds-banner-action-link', // ok\n//   CLOSE_BUTTON: 'ds-banner-close-button', // ok\n//   // From here down are not compatible with the slotObjectToDataTestIds function.\n//   INNER_CONTAINER: 'ds-banner',\n//   ICON_CONTAINER: 'ds-banner-icon',\n//   // from here they were not present but they had an asigned Slot.\n//   // TITLE\n//   // SUBTITLE\n// };\n\n// we are naming this with the ${component_name}_slots convention to namespace & avoid errors on duplicate exports variables in aggregators\n\nexport const DSBannerSlots = {\n  CONTAINER: 'container',\n  INNER_CONTAINER: 'inner-container',\n  CUSTOM_CONTAINER: 'custom-container',\n  TITLE: 'title',\n  SUBTITLE: 'subtitle',\n  ICON_CONTAINER: 'icon-container',\n  ACTION_LINK: 'action-link',\n  CLOSE_BUTTON: 'close-button',\n  LAYOUT: 'layout',\n  LIVE_REGION_PORTAL: 'live-region-portal',\n} as const;\n\n// we are naming this with the ${component_name}_data_testid convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const DSBannerDatatestid = {\n  ...(slotObjectToDataTestIds(DSBannerName, DSBannerSlots) as Record<keyof typeof DSBannerSlots, string>),\n  // handling the rest of the data-testids that are not compatible with the slotObjectToDataTestIds function manually to avoid breaking changes\n  INNER_CONTAINER: 'ds-banner',\n  ICON_CONTAINER: 'ds-banner-icon',\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAwC;AAEjC,MAAM,eAAe;AACrB,MAAM,eAAe;AAAA,EAC1B,MAAM;AAAA,EACN,SAAS;AAAA,EACT,SAAS;AAAA,EACT,QAAQ;AACV;AAEO,MAAM,iBAAiB;AAoBvB,MAAM,gBAAgB;AAAA,EAC3B,WAAW;AAAA,EACX,iBAAiB;AAAA,EACjB,kBAAkB;AAAA,EAClB,OAAO;AAAA,EACP,UAAU;AAAA,EACV,gBAAgB;AAAA,EAChB,aAAa;AAAA,EACb,cAAc;AAAA,EACd,QAAQ;AAAA,EACR,oBAAoB;AACtB;AAGO,MAAM,qBAAqB;AAAA,EAChC,OAAI,0CAAwB,cAAc,aAAa;AAAA;AAAA,EAEvD,iBAAiB;AAAA,EACjB,gBAAgB;AAClB;",
   "names": []
 }

package/dist/cjs/react-desc-prop-types.js

@@ -43,11 +43,14 @@ const defaultProps = {
   type: import_exported_related.BANNER_TYPES.INFO,
   isOpen: true,
   onClose: () => null,
-  showCloseButton: true
+  showCloseButton: true,
+  withLiveRegionAnnouncement: "alert",
+  isPageNotice: false
 };
 const DSBannerPropTypes = {
   ...import_ds_props_helpers.globalAttributesPropTypes,
   ...import_ds_props_helpers.xstyledPropTypes,
+  ...(0, import_ds_props_helpers.getPropsPerSlotPropTypes)(import_exported_related.DSBannerName, import_exported_related.DSBannerSlots),
   containerProps: import_ds_props_helpers.PropTypes.object.description("Set of Properties attached to the main container.").defaultValue({}),
   label: import_ds_props_helpers.PropTypes.string.description("Banner label.").defaultValue(""),
   body: import_ds_props_helpers.PropTypes.string.description("Banner body content").defaultValue(""),
@@ -68,7 +71,9 @@ const DSBannerPropTypes = {
       - focusOnLink: function to focus the banner
       - focusOnWrapper: function to focus the link
     `
-  ).defaultValue({})
+  ).defaultValue({}),
+  withLiveRegionAnnouncement: import_ds_props_helpers.PropTypes.oneOf(["alert", "assertive", "polite"]).description("Whether to announce the banner content in a live region when it opens.").defaultValue("alert"),
+  isPageNotice: import_ds_props_helpers.PropTypes.bool.description("Whether to add role region to the banner.").defaultValue(false)
 };
 const DSBannerPropTypesSchema = DSBannerPropTypes;
 //# sourceMappingURL=react-desc-prop-types.js.map

package/dist/cjs/react-desc-prop-types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/react-desc-prop-types.ts", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import type { MutableRefObject, RefCallback } from 'react';\nimport type { XstyledProps, DSPropTypesSchema, ValidationMap } from '@elliemae/ds-props-helpers';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport { BANNER_TYPES } from './exported-related/index.js';\n\nexport declare namespace DSBannerT {\n  export interface ActionRef {\n    focusOnWrapper?: () => void;\n    focusOnLink?: () => void;\n  }\n\n  export interface ActionLinkT {\n    label: string;\n    onClick?: (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void | null;\n    href?: string;\n  }\n\n  export type BannerTypesT = (typeof BANNER_TYPES)[keyof typeof BANNER_TYPES];\n\n  export interface RequiredProps {}\n\n  export interface DefaultProps {\n    containerProps: Record<string, unknown>;\n    label: string;\n    body: string;\n    type: BannerTypesT;\n    isOpen: boolean;\n    onClose: () => void | null;\n    showCloseButton: boolean;\n  }\n\n  export interface OptionalProps {\n    actionLink?: ActionLinkT;\n    CustomBody?: React.ComponentType<Record<string, unknown>>;\n    closeBtnRef?: React.MutableRefObject<HTMLButtonElement | null> | RefCallback<HTMLButtonElement>;\n    actionRef?: MutableRefObject<ActionRef>;\n  }\n  export interface Props extends Partial<DefaultProps>, OptionalProps, XstyledProps, RequiredProps {}\n\n  export interface InternalProps extends DefaultProps, OptionalProps, XstyledProps, RequiredProps {}\n}\n\nexport const defaultProps: DSBannerT.DefaultProps = {\n  containerProps: {},\n  label: '',\n  body: '',\n  type: BANNER_TYPES.INFO,\n  isOpen: true,\n  onClose: () => null,\n  showCloseButton: true,\n};\n\nexport const DSBannerPropTypes: DSPropTypesSchema<DSBannerT.Props> = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  containerProps: PropTypes.object.description('Set of Properties attached to the main container.').defaultValue({}),\n  label: PropTypes.string.description('Banner label.').defaultValue(''),\n  body: PropTypes.string.description('Banner body content').defaultValue(''),\n  CustomBody: PropTypes.func.description('Banner custom content').defaultValue(''),\n  type: PropTypes.oneOf(Object.values(BANNER_TYPES)).description('Banner type.').defaultValue(BANNER_TYPES.INFO),\n  onClose: PropTypes.func.description('Callback when the Banner closes.'),\n  isOpen: PropTypes.bool.description('Whether the Banner is open or closed.').defaultValue(true),\n  showCloseButton: PropTypes.bool.description('Whether to show close button or not.').defaultValue(true),\n  closeBtnRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).description('Inner ref to button component.'),\n  actionLink: PropTypes.shape({\n    label: PropTypes.string,\n    onClick: PropTypes.func,\n    href: PropTypes.string,\n  })\n    .description('Properties for the Action Link.')\n    .defaultValue({}),\n  actionRef: PropTypes.object\n    .description(\n      `\n      Reference to use actions:\n      - focusOnLink: function to focus the banner\n      - focusOnWrapper: function to focus the link\n    `,\n    )\n    .defaultValue({}),\n};\n\nexport const DSBannerPropTypesSchema = DSBannerPropTypes as unknown as ValidationMap<DSBannerT.Props>;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,8BAAuE;AACvE,8BAA6B;AAuCtB,MAAM,eAAuC;AAAA,EAClD,gBAAgB,CAAC;AAAA,EACjB,OAAO;AAAA,EACP,MAAM;AAAA,EACN,MAAM,qCAAa;AAAA,EACnB,QAAQ;AAAA,EACR,SAAS,MAAM;AAAA,EACf,iBAAiB;AACnB;AAEO,MAAM,oBAAwD;AAAA,EACnE,GAAG;AAAA,EACH,GAAG;AAAA,EACH,gBAAgB,kCAAU,OAAO,YAAY,mDAAmD,EAAE,aAAa,CAAC,CAAC;AAAA,EACjH,OAAO,kCAAU,OAAO,YAAY,eAAe,EAAE,aAAa,EAAE;AAAA,EACpE,MAAM,kCAAU,OAAO,YAAY,qBAAqB,EAAE,aAAa,EAAE;AAAA,EACzE,YAAY,kCAAU,KAAK,YAAY,uBAAuB,EAAE,aAAa,EAAE;AAAA,EAC/E,MAAM,kCAAU,MAAM,OAAO,OAAO,oCAAY,CAAC,EAAE,YAAY,cAAc,EAAE,aAAa,qCAAa,IAAI;AAAA,EAC7G,SAAS,kCAAU,KAAK,YAAY,kCAAkC;AAAA,EACtE,QAAQ,kCAAU,KAAK,YAAY,uCAAuC,EAAE,aAAa,IAAI;AAAA,EAC7F,iBAAiB,kCAAU,KAAK,YAAY,sCAAsC,EAAE,aAAa,IAAI;AAAA,EACrG,aAAa,kCAAU,UAAU,CAAC,kCAAU,QAAQ,kCAAU,IAAI,CAAC,EAAE,YAAY,gCAAgC;AAAA,EACjH,YAAY,kCAAU,MAAM;AAAA,IAC1B,OAAO,kCAAU;AAAA,IACjB,SAAS,kCAAU;AAAA,IACnB,MAAM,kCAAU;AAAA,EAClB,CAAC,EACE,YAAY,iCAAiC,EAC7C,aAAa,CAAC,CAAC;AAAA,EAClB,WAAW,kCAAU,OAClB;AAAA,IACC;AAAA;AAAA;AAAA;AAAA;AAAA,EAKF,EACC,aAAa,CAAC,CAAC;AACpB;AAEO,MAAM,0BAA0B;",
+  "sourcesContent": ["import type { MutableRefObject, RefCallback } from 'react';\nimport type { XstyledProps, DSPropTypesSchema, ValidationMap } from '@elliemae/ds-props-helpers';\nimport {\n  PropTypes,\n  globalAttributesPropTypes,\n  xstyledPropTypes,\n  getPropsPerSlotPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { BANNER_TYPES, DSBannerName, DSBannerSlots } from './exported-related/index.js';\n\nexport declare namespace DSBannerT {\n  export interface ActionRef {\n    focusOnWrapper?: () => void;\n    focusOnLink?: () => void;\n  }\n\n  export interface ActionLinkT {\n    label: string;\n    onClick?: (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void | null;\n    href?: string;\n  }\n\n  export type BannerTypesT = (typeof BANNER_TYPES)[keyof typeof BANNER_TYPES];\n\n  export interface RequiredProps {}\n\n  export interface DefaultProps {\n    containerProps: Record<string, unknown>;\n    label: string;\n    body: string;\n    type: BannerTypesT;\n    isOpen: boolean;\n    onClose: () => void | null;\n    showCloseButton: boolean;\n    withLiveRegionAnnouncement: 'alert' | 'assertive' | 'polite' | 'none';\n    isPageNotice: boolean;\n  }\n\n  export interface OptionalProps\n    extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSBannerName, typeof DSBannerSlots> {\n    actionLink?: ActionLinkT;\n    CustomBody?: React.ComponentType<Record<string, unknown>>;\n    closeBtnRef?: React.MutableRefObject<HTMLButtonElement | null> | RefCallback<HTMLButtonElement>;\n    actionRef?: MutableRefObject<ActionRef>;\n  }\n  export interface Props extends Partial<DefaultProps>, OptionalProps, XstyledProps, RequiredProps {}\n\n  export interface InternalProps extends DefaultProps, OptionalProps, XstyledProps, RequiredProps {}\n}\n\nexport const defaultProps: DSBannerT.DefaultProps = {\n  containerProps: {},\n  label: '',\n  body: '',\n  type: BANNER_TYPES.INFO,\n  isOpen: true,\n  onClose: () => null,\n  showCloseButton: true,\n  withLiveRegionAnnouncement: 'alert',\n  isPageNotice: false,\n};\n\nexport const DSBannerPropTypes: DSPropTypesSchema<DSBannerT.Props> = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  ...getPropsPerSlotPropTypes(DSBannerName, DSBannerSlots),\n  containerProps: PropTypes.object.description('Set of Properties attached to the main container.').defaultValue({}),\n  label: PropTypes.string.description('Banner label.').defaultValue(''),\n  body: PropTypes.string.description('Banner body content').defaultValue(''),\n  CustomBody: PropTypes.func.description('Banner custom content').defaultValue(''),\n  type: PropTypes.oneOf(Object.values(BANNER_TYPES)).description('Banner type.').defaultValue(BANNER_TYPES.INFO),\n  onClose: PropTypes.func.description('Callback when the Banner closes.'),\n  isOpen: PropTypes.bool.description('Whether the Banner is open or closed.').defaultValue(true),\n  showCloseButton: PropTypes.bool.description('Whether to show close button or not.').defaultValue(true),\n  closeBtnRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).description('Inner ref to button component.'),\n  actionLink: PropTypes.shape({\n    label: PropTypes.string,\n    onClick: PropTypes.func,\n    href: PropTypes.string,\n  })\n    .description('Properties for the Action Link.')\n    .defaultValue({}),\n  actionRef: PropTypes.object\n    .description(\n      `\n      Reference to use actions:\n      - focusOnLink: function to focus the banner\n      - focusOnWrapper: function to focus the link\n    `,\n    )\n    .defaultValue({}),\n  withLiveRegionAnnouncement: PropTypes.oneOf(['alert', 'assertive', 'polite'])\n    .description('Whether to announce the banner content in a live region when it opens.')\n    .defaultValue('alert'),\n  isPageNotice: PropTypes.bool.description('Whether to add role region to the banner.').defaultValue(false),\n};\n\nexport const DSBannerPropTypesSchema = DSBannerPropTypes as unknown as ValidationMap<DSBannerT.Props>;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,8BAKO;AAEP,8BAA0D;AA0CnD,MAAM,eAAuC;AAAA,EAClD,gBAAgB,CAAC;AAAA,EACjB,OAAO;AAAA,EACP,MAAM;AAAA,EACN,MAAM,qCAAa;AAAA,EACnB,QAAQ;AAAA,EACR,SAAS,MAAM;AAAA,EACf,iBAAiB;AAAA,EACjB,4BAA4B;AAAA,EAC5B,cAAc;AAChB;AAEO,MAAM,oBAAwD;AAAA,EACnE,GAAG;AAAA,EACH,GAAG;AAAA,EACH,OAAG,kDAAyB,sCAAc,qCAAa;AAAA,EACvD,gBAAgB,kCAAU,OAAO,YAAY,mDAAmD,EAAE,aAAa,CAAC,CAAC;AAAA,EACjH,OAAO,kCAAU,OAAO,YAAY,eAAe,EAAE,aAAa,EAAE;AAAA,EACpE,MAAM,kCAAU,OAAO,YAAY,qBAAqB,EAAE,aAAa,EAAE;AAAA,EACzE,YAAY,kCAAU,KAAK,YAAY,uBAAuB,EAAE,aAAa,EAAE;AAAA,EAC/E,MAAM,kCAAU,MAAM,OAAO,OAAO,oCAAY,CAAC,EAAE,YAAY,cAAc,EAAE,aAAa,qCAAa,IAAI;AAAA,EAC7G,SAAS,kCAAU,KAAK,YAAY,kCAAkC;AAAA,EACtE,QAAQ,kCAAU,KAAK,YAAY,uCAAuC,EAAE,aAAa,IAAI;AAAA,EAC7F,iBAAiB,kCAAU,KAAK,YAAY,sCAAsC,EAAE,aAAa,IAAI;AAAA,EACrG,aAAa,kCAAU,UAAU,CAAC,kCAAU,QAAQ,kCAAU,IAAI,CAAC,EAAE,YAAY,gCAAgC;AAAA,EACjH,YAAY,kCAAU,MAAM;AAAA,IAC1B,OAAO,kCAAU;AAAA,IACjB,SAAS,kCAAU;AAAA,IACnB,MAAM,kCAAU;AAAA,EAClB,CAAC,EACE,YAAY,iCAAiC,EAC7C,aAAa,CAAC,CAAC;AAAA,EAClB,WAAW,kCAAU,OAClB;AAAA,IACC;AAAA;AAAA;AAAA;AAAA;AAAA,EAKF,EACC,aAAa,CAAC,CAAC;AAAA,EAClB,4BAA4B,kCAAU,MAAM,CAAC,SAAS,aAAa,QAAQ,CAAC,EACzE,YAAY,wEAAwE,EACpF,aAAa,OAAO;AAAA,EACvB,cAAc,kCAAU,KAAK,YAAY,2CAA2C,EAAE,aAAa,KAAK;AAC1G;AAEO,MAAM,0BAA0B;",
   "names": []
 }