@elliemae/ds-banner 3.80.0-next.4 → 3.80.0-next.41

package/dist/esm/DSBanner.js

@@ -9,48 +9,18 @@ import {
   useOwnerProps
 } from "@elliemae/ds-props-helpers";
 import React2, { useCallback, useEffect, useMemo } from "react";
-import ReactDOM from "react-dom";
-import { uid } from "uid";
 import { useGetLayoutMode } from "@elliemae/ds-system";
 import { DSBannerContent } from "./DSBannerContent.js";
-import { DSBannerDatatestid, DSBannerName } from "./exported-related/index.js";
+import { LiveRegionCorrectlyImplemented } from "./LiveRegionCorrectlyImplemented.js";
+import { DSBannerDatatestid, DSBannerName } from "./constants/index.js";
+import { useBannerContainer } from "./useBannerContainer.js";
+import { usePageNotice } from "./usePageNotice.js";
 import { defaultProps, DSBannerPropTypesSchema } from "./react-desc-prop-types.js";
-import {
-  StyledLiveRegionPortal,
-  StyledBannerContainer,
-  StyledBannerLayout,
-  StyledCloseButton,
-  StyledInnerContainer
-} from "./styles.js";
-const outOfTheBoxCols = ["auto", "fit-content(50%)", "1fr"];
+import { StyledBannerContainer, StyledBannerLayout, StyledCloseButton, StyledInnerContainer } from "./styles.js";
+const outOfTheBoxCols = ["auto", "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
-}) => ReactDOM.createPortal(
-  /* @__PURE__ */ jsx(
-    StyledLiveRegionPortal,
-    {
-      id,
-      innerRef,
-      "aria-atomic": "true",
-      "aria-live": typeMap[announcementType],
-      "data-testid": DSBannerDatatestid.LIVE_REGION_PORTAL,
-      ...ownerPropsConfig
-    }
-  ),
-  document.body
-);
 const DSBanner = (props) => {
   const propsWithDefaults = useMemoMergePropsWithDefault(props, defaultProps);
   const {
@@ -67,6 +37,7 @@ const DSBanner = (props) => {
     actionRef,
     withLiveRegionAnnouncement,
     isPageNotice,
+    bannerId,
     ...rest
   } = propsWithDefaults;
   const { height: globalHeight, ...globalAttrs } = useGetGlobalAttributes(rest);
@@ -78,21 +49,11 @@ const DSBanner = (props) => {
     if (CustomBody) return colsWithCustomBody;
     return isSmall ? outOfTheBoxColsSmallLayout : outOfTheBoxCols;
   }, [CustomBody, isSmall]);
-  const handleActionRefForContainer = useCallback(
-    (containerNode) => {
-      if (containerNode && actionRef && actionRef.current) {
-        actionRef.current.focusOnWrapper = () => {
-          if (containerNode) {
-            setTimeout(() => {
-              containerNode?.focus();
-            }, 300);
-          }
-        };
-      }
-    },
-    [actionRef]
+  const { handleActionRefForContainer, isContainerRendered, containerExitProps, liveRegionKey } = useBannerContainer(
+    isOpen,
+    actionRef
   );
-  const generatedContainerId = useMemo(() => `ds-banner-${uid(5)}`, []);
+  const { baseId, contentIds, pageNoticeNameProps } = usePageNotice(propsWithDefaults, props, globalAttrs);
   const handleOnKeyDownToClose = useCallback(
     (e) => {
       if (e.key === "Escape") {
@@ -116,14 +77,15 @@ const DSBanner = (props) => {
   useEffect(() => {
     if (isOpen && getIsLiveRegion(withLiveRegionAnnouncement)) read();
   }, [isOpen, withLiveRegionAnnouncement, read]);
-  if (!isOpen)
+  if (!isContainerRendered)
     return getIsLiveRegion(withLiveRegionAnnouncement) ? /* @__PURE__ */ jsx(
       LiveRegionCorrectlyImplemented,
       {
-        id: `${generatedContainerId}-live-region`,
+        id: `${baseId}-live-region`,
         innerRef: liveRegionRef,
         announcementType: withLiveRegionAnnouncement,
-        ownerPropsConfig
+        ownerPropsConfig,
+        globalAttrs
       }
     ) : null;
   return /* @__PURE__ */ jsxs(
@@ -134,9 +96,12 @@ const DSBanner = (props) => {
       innerRef: handleActionRefForContainer,
       tabIndex: -1,
       role: isPageNotice ? "region" : void 0,
+      $isExpanded: isOpen,
+      ...pageNoticeNameProps,
       ...containerProps,
       ...globalAttrs,
       ...xstyledAttrs,
+      ...containerExitProps,
       ...ownerPropsConfig,
       children: [
         /* @__PURE__ */ jsxs(StyledBannerLayout, { ...ownerPropsConfig, $type: type, children: [
@@ -147,9 +112,9 @@ const DSBanner = (props) => {
               "data-type": type,
               "data-testid": DSBannerDatatestid.INNER_CONTAINER,
               role: withLiveRegionAnnouncement === "alert" ? "alert" : void 0,
-              id: generatedContainerId,
+              id: baseId,
               ...ownerPropsConfig,
-              children: !CustomBody ? /* @__PURE__ */ jsx(DSBannerContent, { propsWithDefaults }) : /* @__PURE__ */ jsx(CustomBody, {})
+              children: !CustomBody ? /* @__PURE__ */ jsx(DSBannerContent, { propsWithDefaults, ...contentIds }) : /* @__PURE__ */ jsx(CustomBody, {})
             }
           ),
           !CustomBody && showCloseButton ? /* @__PURE__ */ jsx(
@@ -160,7 +125,7 @@ const DSBanner = (props) => {
               innerRef: closeBtnRef,
               onClick: onClose,
               "aria-label": "Visually dismiss the banner",
-              "aria-describedby": generatedContainerId,
+              "aria-describedby": baseId,
               ...ownerPropsConfig,
               children: /* @__PURE__ */ jsx(CloseX, { width: 12, height: 12 })
             }
@@ -169,11 +134,13 @@ const DSBanner = (props) => {
         getIsLiveRegion(withLiveRegionAnnouncement) ? /* @__PURE__ */ jsx(
           LiveRegionCorrectlyImplemented,
           {
-            id: `${generatedContainerId}-live-region`,
+            id: `${baseId}-live-region`,
             innerRef: liveRegionRef,
             announcementType: withLiveRegionAnnouncement,
-            ownerPropsConfig
-          }
+            ownerPropsConfig,
+            globalAttrs
+          },
+          liveRegionKey
         ) : null
       ]
     }

package/dist/esm/DSBanner.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/DSBanner.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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 { useGetLayoutMode } from '@elliemae/ds-system';\nimport { DSBannerContent } from './DSBannerContent.js';\nimport { LiveRegionCorrectlyImplemented } from './LiveRegionCorrectlyImplemented.js';\nimport { DSBannerDatatestid, DSBannerName } from './constants/index.js';\nimport { useBannerContainer } from './useBannerContainer.js';\nimport { usePageNotice } from './usePageNotice.js';\nimport type { DSBannerT } from './react-desc-prop-types.js';\nimport { defaultProps, DSBannerPropTypesSchema } from './react-desc-prop-types.js';\nimport { StyledBannerContainer, StyledBannerLayout, StyledCloseButton, StyledInnerContainer } from './styles.js';\n\nconst outOfTheBoxCols = ['auto', '1fr'];\nconst outOfTheBoxColsSmallLayout = ['auto', '1fr'];\nconst colsWithCustomBody = ['1fr', 'auto'];\n\nconst getIsLiveRegion = (type: string) => type === 'polite' || type === 'assertive';\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    bannerId,\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, isContainerRendered, containerExitProps, liveRegionKey } = useBannerContainer(\n    isOpen,\n    actionRef,\n  );\n\n  const { baseId, contentIds, pageNoticeNameProps } = usePageNotice(propsWithDefaults, props, globalAttrs);\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  // the container stays mounted while it slides up after closing (see useBannerExitAnimation)\n  if (!isContainerRendered)\n    return getIsLiveRegion(withLiveRegionAnnouncement) ? (\n      <LiveRegionCorrectlyImplemented\n        id={`${baseId}-live-region`}\n        innerRef={liveRegionRef}\n        announcementType={withLiveRegionAnnouncement}\n        ownerPropsConfig={ownerPropsConfig}\n        globalAttrs={globalAttrs}\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      $isExpanded={isOpen}\n      {...pageNoticeNameProps}\n      {...containerProps}\n      {...globalAttrs}\n      {...xstyledAttrs}\n      {...containerExitProps}\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={baseId}\n          {...ownerPropsConfig}\n        >\n          {!CustomBody ? <DSBannerContent propsWithDefaults={propsWithDefaults} {...contentIds} /> : <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={baseId}\n            {...ownerPropsConfig}\n          >\n            <CloseX width={12} height={12} />\n          </StyledCloseButton>\n        ) : null}\n      </StyledBannerLayout>\n      {getIsLiveRegion(withLiveRegionAnnouncement) ? (\n        <LiveRegionCorrectlyImplemented\n          key={liveRegionKey}\n          id={`${baseId}-live-region`}\n          innerRef={liveRegionRef}\n          announcementType={withLiveRegionAnnouncement}\n          ownerPropsConfig={ownerPropsConfig}\n          globalAttrs={globalAttrs}\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"],
+  "mappings": "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",
   "names": ["React"]
 }

package/dist/esm/DSBannerContent.js

@@ -4,8 +4,8 @@ import { AlertsDetailFill, InfoFill, SuccessFill, WarningSquare } from "@elliema
 import { useOwnerProps } from "@elliemae/ds-props-helpers";
 import { TYPOGRAPHY_VARIANTS } from "@elliemae/ds-typography";
 import React2, { useCallback } from "react";
-import { BANNER_BODY_ID, DSBannerDatatestid } from "./exported-related/index.js";
-import { StyledActionLink, StyledIconContainer, StyledSubTitle, StyledTitle } from "./styles.js";
+import { DSBannerDatatestid } from "./constants/index.js";
+import { StyledActionLink, StyledIconContainer, StyledSubTitle, StyledTitle, StyledBody } from "./styles.js";
 const icons = {
   success: /* @__PURE__ */ jsx(SuccessFill, { color: ["success", "900"], width: "20px", height: "20px" }),
   info: /* @__PURE__ */ jsx(InfoFill, { color: ["brand-primary", "600"], width: "20px", height: "20px" }),
@@ -15,6 +15,8 @@ const icons = {
 const DSBannerContent = (props) => {
   const {
     propsWithDefaults,
+    titleId,
+    bodyId,
     propsWithDefaults: { type, label, body, actionLink, actionRef }
   } = props;
   const ownerPropsConfig = useOwnerProps(propsWithDefaults, { ...props });
@@ -40,27 +42,27 @@ const DSBannerContent = (props) => {
   }, []);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(StyledIconContainer, { "data-testid": DSBannerDatatestid.ICON_CONTAINER, ...ownerPropsConfig, children: icons[type] }),
-    /* @__PURE__ */ jsx(StyledTitle, { variant: TYPOGRAPHY_VARIANTS.B1, ...ownerPropsConfig, children: label }),
-    /* @__PURE__ */ jsxs(StyledSubTitle, { id: BANNER_BODY_ID, variant: TYPOGRAPHY_VARIANTS.B1, ...ownerPropsConfig, children: [
-      body,
-      actionLink && /* @__PURE__ */ jsxs(Fragment, { children: [
-        !body ? "" : "    ",
-        /* @__PURE__ */ jsx(
-          StyledActionLink,
-          {
-            "data-testid": DSBannerDatatestid.ACTION_LINK,
-            onClick: actionLink.onClick,
-            href: actionLink.href,
-            innerRef: handleActionRefForLink,
-            onKeyDown: handleOnKeyDown,
-            tabIndex: 0,
-            isBodyEmpty: !body,
-            title: actionLink.label,
-            ...ownerPropsConfig,
-            children: actionLink.label
-          }
-        )
-      ] })
+    /* @__PURE__ */ jsxs(StyledBody, { ...ownerPropsConfig, children: [
+      /* @__PURE__ */ jsx(StyledTitle, { id: titleId, variant: TYPOGRAPHY_VARIANTS.H5_STRONG, component: "span", ...ownerPropsConfig, children: label }),
+      /* @__PURE__ */ jsx(StyledSubTitle, { id: bodyId, variant: TYPOGRAPHY_VARIANTS.B1, ...ownerPropsConfig, children: body }),
+      actionLink && // its own element (a sibling of the description, not inline in it): the spacing is CSS, not literal spaces.
+      // the DSTypography link variant gives the size + DSTypography-root class, the underline/weight pending UX are in styles.tsx
+      /* @__PURE__ */ jsx(
+        StyledActionLink,
+        {
+          variant: TYPOGRAPHY_VARIANTS.LINK_SML_TITLE,
+          "data-testid": DSBannerDatatestid.ACTION_LINK,
+          onClick: actionLink.onClick,
+          href: actionLink.href,
+          innerRef: handleActionRefForLink,
+          onKeyDown: handleOnKeyDown,
+          tabIndex: 0,
+          isBodyEmpty: !body,
+          title: actionLink.label,
+          ...ownerPropsConfig,
+          children: actionLink.label
+        }
+      )
     ] })
   ] });
 };

package/dist/esm/DSBannerContent.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/DSBannerContent.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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            {!body ? '' : '    '}\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"],
-  "mappings": "AAAA,YAAY,WAAW;ACUZ,SAmDD,UAnDC,KAmDD,YAnDC;AATX,SAAS,kBAAkB,UAAU,aAAa,qBAAqB;AACvE,SAAS,qBAAqB;AAC9B,SAAS,2BAA2B;AACpC,OAAOA,UAAS,mBAAmB;AACnC,SAAS,gBAAgB,0BAA0B;AAEnD,SAAS,kBAAkB,qBAAqB,gBAAgB,mBAAmB;AAE5E,MAAM,QAAqC;AAAA,EAChD,SAAS,oBAAC,eAAY,OAAO,CAAC,WAAW,KAAK,GAAG,OAAM,QAAO,QAAO,QAAO;AAAA,EAC5E,MAAM,oBAAC,YAAS,OAAO,CAAC,iBAAiB,KAAK,GAAG,OAAM,QAAO,QAAO,QAAO;AAAA,EAC5E,QAAQ,oBAAC,oBAAiB,OAAO,CAAC,UAAU,KAAK,GAAG,OAAM,QAAO,QAAO,QAAO;AAAA,EAC/E,SAAS,oBAAC,iBAAc,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,mBAAmB,cAAc,mBAAmB,EAAE,GAAG,MAAM,CAAC;AAEtE,QAAM,UAAUA,OAAM,OAA0B,IAAI;AAEpD,QAAM,yBAAyB;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,kBAAkB,YAAY,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,iCACE;AAAA,wBAAC,uBAAoB,eAAa,mBAAmB,gBAAiB,GAAG,kBACtE,gBAAM,IAAI,GACb;AAAA,IACA,oBAAC,eAAY,SAAS,oBAAoB,IAAK,GAAG,kBAC/C,iBACH;AAAA,IACA,qBAAC,kBAAe,IAAI,gBAAgB,SAAS,oBAAoB,IAAK,GAAG,kBACtE;AAAA;AAAA,MACA,cACC,iCAGG;AAAA,SAAC,OAAO,KAAK;AAAA,QACd;AAAA,UAAC;AAAA;AAAA,YACC,eAAa,mBAAmB;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;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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 { DSBannerDatatestid } from './constants/index.js';\nimport type { DSBannerT } from './react-desc-prop-types.js';\nimport { StyledActionLink, StyledIconContainer, StyledSubTitle, StyledTitle, StyledBody } 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  titleId?: string;\n  bodyId?: string;\n}\n\nexport const DSBannerContent: React.ComponentType<DSBannerContentProps> = (props) => {\n  const {\n    propsWithDefaults,\n    titleId,\n    bodyId,\n    propsWithDefaults: { type, label, body, actionLink, actionRef },\n  } = props;\n  const ownerPropsConfig = useOwnerProps(propsWithDefaults, { ...props });\n\n  const linkRef = React.useRef<HTMLElement>(null) as React.MutableRefObject<HTMLElement>;\n\n  const handleActionRefForLink = useCallback<React.RefCallback<HTMLElement>>(\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      <StyledBody {...ownerPropsConfig}>\n        {/* h5-strong look, but a span: the title must not inject a heading into the host page outline.\n          `component` (not `as`): on a styled(DSTypography) wrapper `as` would replace DSTypography itself. */}\n        <StyledTitle id={titleId} variant={TYPOGRAPHY_VARIANTS.H5_STRONG} component=\"span\" {...ownerPropsConfig}>\n          {label}\n        </StyledTitle>\n        <StyledSubTitle id={bodyId} variant={TYPOGRAPHY_VARIANTS.B1} {...ownerPropsConfig}>\n          {body}\n        </StyledSubTitle>\n        {actionLink && (\n          // its own element (a sibling of the description, not inline in it): the spacing is CSS, not literal spaces.\n          // the DSTypography link variant gives the size + DSTypography-root class, the underline/weight pending UX are in styles.tsx\n          <StyledActionLink\n            variant={TYPOGRAPHY_VARIANTS.LINK_SML_TITLE}\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      </StyledBody>\n    </>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACUZ,SA6CP,UA7CO,KAiDL,YAjDK;AATX,SAAS,kBAAkB,UAAU,aAAa,qBAAqB;AACvE,SAAS,qBAAqB;AAC9B,SAAS,2BAA2B;AACpC,OAAOA,UAAS,mBAAmB;AACnC,SAAS,0BAA0B;AAEnC,SAAS,kBAAkB,qBAAqB,gBAAgB,aAAa,kBAAkB;AAExF,MAAM,QAAqC;AAAA,EAChD,SAAS,oBAAC,eAAY,OAAO,CAAC,WAAW,KAAK,GAAG,OAAM,QAAO,QAAO,QAAO;AAAA,EAC5E,MAAM,oBAAC,YAAS,OAAO,CAAC,iBAAiB,KAAK,GAAG,OAAM,QAAO,QAAO,QAAO;AAAA,EAC5E,QAAQ,oBAAC,oBAAiB,OAAO,CAAC,UAAU,KAAK,GAAG,OAAM,QAAO,QAAO,QAAO;AAAA,EAC/E,SAAS,oBAAC,iBAAc,OAAO,CAAC,WAAW,KAAK,GAAG,OAAM,QAAO,QAAO,QAAO;AAChF;AAQO,MAAM,kBAA6D,CAAC,UAAU;AACnF,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,mBAAmB,EAAE,MAAM,OAAO,MAAM,YAAY,UAAU;AAAA,EAChE,IAAI;AACJ,QAAM,mBAAmB,cAAc,mBAAmB,EAAE,GAAG,MAAM,CAAC;AAEtE,QAAM,UAAUA,OAAM,OAAoB,IAAI;AAE9C,QAAM,yBAAyB;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,kBAAkB,YAAY,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,iCACE;AAAA,wBAAC,uBAAoB,eAAa,mBAAmB,gBAAiB,GAAG,kBACtE,gBAAM,IAAI,GACb;AAAA,IACA,qBAAC,cAAY,GAAG,kBAGd;AAAA,0BAAC,eAAY,IAAI,SAAS,SAAS,oBAAoB,WAAW,WAAU,QAAQ,GAAG,kBACpF,iBACH;AAAA,MACA,oBAAC,kBAAe,IAAI,QAAQ,SAAS,oBAAoB,IAAK,GAAG,kBAC9D,gBACH;AAAA,MACC;AAAA;AAAA,MAGC;AAAA,QAAC;AAAA;AAAA,UACC,SAAS,oBAAoB;AAAA,UAC7B,eAAa,mBAAmB;AAAA,UAChC,SAAS,WAAW;AAAA,UACpB,MAAM,WAAW;AAAA,UACjB,UAAU;AAAA,UACV,WAAW;AAAA,UACX,UAAU;AAAA,UACV,aAAa,CAAC;AAAA,UACd,OAAO,WAAW;AAAA,UACjB,GAAG;AAAA,UAEH,qBAAW;AAAA;AAAA,MACd;AAAA,OAEJ;AAAA,KACF;AAEJ;",
   "names": ["React"]
 }

package/dist/esm/LiveRegionCorrectlyImplemented.js

@@ -0,0 +1,37 @@
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+import ReactDOM from "react-dom";
+import { DSBannerDatatestid } from "./constants/index.js";
+import { StyledLiveRegionPortal } from "./styles.js";
+const typeMap = {
+  alert: void 0,
+  polite: "polite",
+  assertive: "assertive",
+  none: "off"
+};
+const LiveRegionCorrectlyImplemented = ({
+  id,
+  innerRef,
+  announcementType,
+  ownerPropsConfig,
+  globalAttrs: { lang, dir }
+}) => ReactDOM.createPortal(
+  /* @__PURE__ */ jsx(
+    StyledLiveRegionPortal,
+    {
+      lang,
+      dir,
+      id,
+      innerRef,
+      "aria-atomic": "true",
+      "aria-live": typeMap[announcementType],
+      "data-testid": DSBannerDatatestid.LIVE_REGION_PORTAL,
+      ...ownerPropsConfig
+    }
+  ),
+  document.body
+);
+export {
+  LiveRegionCorrectlyImplemented
+};
+//# sourceMappingURL=LiveRegionCorrectlyImplemented.js.map

package/dist/esm/LiveRegionCorrectlyImplemented.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/LiveRegionCorrectlyImplemented.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport ReactDOM from 'react-dom';\nimport { DSBannerDatatestid } from './constants/index.js';\nimport { StyledLiveRegionPortal } from './styles.js';\n\nconst typeMap = {\n  alert: undefined,\n  polite: 'polite',\n  assertive: 'assertive',\n  none: 'off',\n} as const;\n\nexport const LiveRegionCorrectlyImplemented = ({\n  id,\n  innerRef,\n  announcementType,\n  ownerPropsConfig,\n  globalAttrs: { lang, dir },\n}: {\n  id: string;\n  innerRef: React.Ref<HTMLDivElement>;\n  announcementType: 'alert' | 'polite' | 'assertive' | 'none';\n  ownerPropsConfig: Record<string, unknown>;\n  globalAttrs: { lang?: string; dir?: string };\n}) =>\n  ReactDOM.createPortal(\n    <StyledLiveRegionPortal\n      // the portal lives in document.body (outside the banner subtree) so it does not inherit lang/dir from the banner\n      //   only these two are forwarded, the rest of the global attributes belong to the banner container\n      lang={lang}\n      dir={dir}\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"],
+  "mappings": "AAAA,YAAY,WAAW;AC0BnB;AAzBJ,OAAO,cAAc;AACrB,SAAS,0BAA0B;AACnC,SAAS,8BAA8B;AAEvC,MAAM,UAAU;AAAA,EACd,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,WAAW;AAAA,EACX,MAAM;AACR;AAEO,MAAM,iCAAiC,CAAC;AAAA,EAC7C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa,EAAE,MAAM,IAAI;AAC3B,MAOE,SAAS;AAAA,EACP;AAAA,IAAC;AAAA;AAAA,MAGC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,eAAY;AAAA,MAGZ,aAAW,QAAQ,gBAAgB;AAAA,MACnC,eAAa,mBAAmB;AAAA,MAC/B,GAAG;AAAA;AAAA,EACN;AAAA,EACA,SAAS;AACX;",
+  "names": []
+}

package/dist/esm/{exported-related → constants}/index.js

@@ -7,11 +7,15 @@ const BANNER_TYPES = {
   WARNING: "warning",
   DANGER: "danger"
 };
+const BANNER_SLIDE_DURATION_MS = 500;
 const BANNER_BODY_ID = "ds-banner-body";
 const DSBannerSlots = {
   CONTAINER: "container",
   INNER_CONTAINER: "inner-container",
+  // reserved slot: declared but never rendered. It is part of the public surface (DSBannerDatatestid, dsBannerCustomContainer slot prop)
+  // and pinned by DSBanner.data-testid.test.js, so removing it is a breaking change. See KNOWN_INTENTIONAL_DEVIATIONS.md
   CUSTOM_CONTAINER: "custom-container",
+  BODY: "body",
   TITLE: "title",
   SUBTITLE: "subtitle",
   ICON_CONTAINER: "icon-container",
@@ -28,6 +32,7 @@ const DSBannerDatatestid = {
 };
 export {
   BANNER_BODY_ID,
+  BANNER_SLIDE_DURATION_MS,
   BANNER_TYPES,
   DSBannerDatatestid,
   DSBannerName,

package/dist/esm/constants/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/constants/index.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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// duration of the slide down (open) and slide up (close) of the banner, defined by the Banner spec v2 \"Motion and Animation\"\nexport const BANNER_SLIDE_DURATION_MS = 500;\n\n/**\n * @deprecated legacy export, no longer rendered or used by the component (PUI-19089).\n * The body used to render with this fixed id, which duplicated across banners. The body id is now\n * `<bannerId>-body`, where `bannerId` is generated per instance or provided through the `bannerId` prop.\n * Kept only so imports of the old constant keep resolving.\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  // reserved slot: declared but never rendered. It is part of the public surface (DSBannerDatatestid, dsBannerCustomContainer slot prop)\n  // and pinned by DSBanner.data-testid.test.js, so removing it is a breaking change. See KNOWN_INTENTIONAL_DEVIATIONS.md\n  CUSTOM_CONTAINER: 'custom-container',\n  BODY: 'body',\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"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,+BAA+B;AAEjC,MAAM,eAAe;AACrB,MAAM,eAAe;AAAA,EAC1B,MAAM;AAAA,EACN,SAAS;AAAA,EACT,SAAS;AAAA,EACT,QAAQ;AACV;AAGO,MAAM,2BAA2B;AAQjC,MAAM,iBAAiB;AAoBvB,MAAM,gBAAgB;AAAA,EAC3B,WAAW;AAAA,EACX,iBAAiB;AAAA;AAAA;AAAA,EAGjB,kBAAkB;AAAA,EAClB,MAAM;AAAA,EACN,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,GAAI,wBAAwB,cAAc,aAAa;AAAA;AAAA,EAEvD,iBAAiB;AAAA,EACjB,gBAAgB;AAClB;",
+  "names": []
+}

package/dist/esm/index.js

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { DSBanner, DSBannerWithSchema } from "./DSBanner.js";
-import { DSBannerName, BANNER_TYPES, DSBannerSlots, DSBannerDatatestid } from "./exported-related/index.js";
+import { DSBannerName, BANNER_TYPES, DSBannerSlots, DSBannerDatatestid } from "./constants/index.js";
 export {
   BANNER_TYPES,
   DSBanner,

package/dist/esm/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/index.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "// eslint-disable-next-line no-restricted-exports\nexport { DSBanner, DSBannerWithSchema } from './DSBanner.js';\nexport { DSBannerName, BANNER_TYPES, DSBannerSlots, DSBannerDatatestid } from './exported-related/index.js';\nexport type { DSBannerT } from './react-desc-prop-types.js';\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "// eslint-disable-next-line no-restricted-exports\nexport { DSBanner, DSBannerWithSchema } from './DSBanner.js';\nexport { DSBannerName, BANNER_TYPES, DSBannerSlots, DSBannerDatatestid } from './constants/index.js';\nexport type { DSBannerT } from './react-desc-prop-types.js';\n"],
   "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,UAAU,0BAA0B;AAC7C,SAAS,cAAc,cAAc,eAAe,0BAA0B;",
   "names": []
 }

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

@@ -5,7 +5,7 @@ import {
   xstyledPropTypes,
   getPropsPerSlotPropTypes
 } from "@elliemae/ds-props-helpers";
-import { BANNER_TYPES, DSBannerName, DSBannerSlots } from "./exported-related/index.js";
+import { BANNER_TYPES, DSBannerName, DSBannerSlots } from "./constants/index.js";
 const defaultProps = {
   containerProps: {},
   label: "",
@@ -42,8 +42,13 @@ const DSBannerPropTypes = {
       - focusOnWrapper: function to focus the link
     `
   ).defaultValue({}),
-  withLiveRegionAnnouncement: PropTypes.oneOf(["alert", "assertive", "polite"]).description("Whether to announce the banner content in a live region when it opens.").defaultValue("alert"),
-  isPageNotice: PropTypes.bool.description("Whether to add role region to the banner.").defaultValue(false)
+  withLiveRegionAnnouncement: PropTypes.oneOf(["alert", "assertive", "polite", "none"]).description("Whether to announce the banner content in a live region when it opens.").defaultValue("alert"),
+  isPageNotice: PropTypes.bool.description(
+    "Whether to add role region to the banner. The region is named by default from the label prop; a name passed via aria-label/aria-labelledby (containerProps or dsBannerContainer) takes precedence."
+  ).defaultValue(false),
+  bannerId: PropTypes.string.description(
+    `Base id of the banner. Every id the banner renders derives from it: the inner container uses it as is, the title uses "<bannerId>-title", the body uses "<bannerId>-body" and the live region uses "<bannerId>-live-region". When omitted, a unique base is generated per instance ("ds-banner-<random>"). Must start with a letter. Pass your own to reference the banner parts from aria-describedby / aria-labelledby.`
+  )
 };
 const DSBannerPropTypesSchema = DSBannerPropTypes;
 export {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
-  "mappings": "AAAA,YAAY,WAAW;ACEvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,cAAc,cAAc,qBAAqB;AA0CnD,MAAM,eAAuC;AAAA,EAClD,gBAAgB,CAAC;AAAA,EACjB,OAAO;AAAA,EACP,MAAM;AAAA,EACN,MAAM,aAAa;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,GAAG,yBAAyB,cAAc,aAAa;AAAA,EACvD,gBAAgB,UAAU,OAAO,YAAY,mDAAmD,EAAE,aAAa,CAAC,CAAC;AAAA,EACjH,OAAO,UAAU,OAAO,YAAY,eAAe,EAAE,aAAa,EAAE;AAAA,EACpE,MAAM,UAAU,OAAO,YAAY,qBAAqB,EAAE,aAAa,EAAE;AAAA,EACzE,YAAY,UAAU,KAAK,YAAY,uBAAuB,EAAE,aAAa,EAAE;AAAA,EAC/E,MAAM,UAAU,MAAM,OAAO,OAAO,YAAY,CAAC,EAAE,YAAY,cAAc,EAAE,aAAa,aAAa,IAAI;AAAA,EAC7G,SAAS,UAAU,KAAK,YAAY,kCAAkC;AAAA,EACtE,QAAQ,UAAU,KAAK,YAAY,uCAAuC,EAAE,aAAa,IAAI;AAAA,EAC7F,iBAAiB,UAAU,KAAK,YAAY,sCAAsC,EAAE,aAAa,IAAI;AAAA,EACrG,aAAa,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,IAAI,CAAC,EAAE,YAAY,gCAAgC;AAAA,EACjH,YAAY,UAAU,MAAM;AAAA,IAC1B,OAAO,UAAU;AAAA,IACjB,SAAS,UAAU;AAAA,IACnB,MAAM,UAAU;AAAA,EAClB,CAAC,EACE,YAAY,iCAAiC,EAC7C,aAAa,CAAC,CAAC;AAAA,EAClB,WAAW,UAAU,OAClB;AAAA,IACC;AAAA;AAAA;AAAA;AAAA;AAAA,EAKF,EACC,aAAa,CAAC,CAAC;AAAA,EAClB,4BAA4B,UAAU,MAAM,CAAC,SAAS,aAAa,QAAQ,CAAC,EACzE,YAAY,wEAAwE,EACpF,aAAa,OAAO;AAAA,EACvB,cAAc,UAAU,KAAK,YAAY,2CAA2C,EAAE,aAAa,KAAK;AAC1G;AAEO,MAAM,0BAA0B;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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 './constants/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 extends TypescriptHelpersT.PropsForGlobalOnSlots<\n    typeof DSBannerName,\n    typeof DSBannerSlots\n  > {\n    actionLink?: ActionLinkT;\n    CustomBody?: React.ComponentType<Record<string, unknown>>;\n    closeBtnRef?: React.MutableRefObject<HTMLButtonElement | null> | RefCallback<HTMLButtonElement>;\n    actionRef?: MutableRefObject<ActionRef>;\n    bannerId?: string;\n  }\n  export type SlotFunctionArguments = {\n    dsBannerContainer: () => object;\n    dsBannerInnerContainer: () => object;\n    dsBannerCustomContainer: () => object;\n    dsBannerBody: () => object;\n    dsBannerTitle: () => object;\n    dsBannerSubtitle: () => object;\n    dsBannerIconContainer: () => object;\n    dsBannerActionLink: () => object;\n    dsBannerCloseButton: () => object;\n    dsBannerLayout: () => object;\n    dsBannerLiveRegionPortal: () => object;\n  };\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', 'none'])\n    .description('Whether to announce the banner content in a live region when it opens.')\n    .defaultValue('alert'),\n  isPageNotice: PropTypes.bool\n    .description(\n      'Whether to add role region to the banner. The region is named by default from the label prop; a name passed via aria-label/aria-labelledby (containerProps or dsBannerContainer) takes precedence.',\n    )\n    .defaultValue(false),\n  bannerId: PropTypes.string.description(\n    `Base id of the banner. Every id the banner renders derives from it: the inner container uses it as is, the title uses \"<bannerId>-title\", the body uses \"<bannerId>-body\" and the live region uses \"<bannerId>-live-region\". When omitted, a unique base is generated per instance (\"ds-banner-<random>\"). Must start with a letter. Pass your own to reference the banner parts from aria-describedby / aria-labelledby.`,\n  ),\n};\n\nexport const DSBannerPropTypesSchema = DSBannerPropTypes as unknown as ValidationMap<DSBannerT.Props>;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACEvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,cAAc,cAAc,qBAAqB;AA2DnD,MAAM,eAAuC;AAAA,EAClD,gBAAgB,CAAC;AAAA,EACjB,OAAO;AAAA,EACP,MAAM;AAAA,EACN,MAAM,aAAa;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,GAAG,yBAAyB,cAAc,aAAa;AAAA,EACvD,gBAAgB,UAAU,OAAO,YAAY,mDAAmD,EAAE,aAAa,CAAC,CAAC;AAAA,EACjH,OAAO,UAAU,OAAO,YAAY,eAAe,EAAE,aAAa,EAAE;AAAA,EACpE,MAAM,UAAU,OAAO,YAAY,qBAAqB,EAAE,aAAa,EAAE;AAAA,EACzE,YAAY,UAAU,KAAK,YAAY,uBAAuB,EAAE,aAAa,EAAE;AAAA,EAC/E,MAAM,UAAU,MAAM,OAAO,OAAO,YAAY,CAAC,EAAE,YAAY,cAAc,EAAE,aAAa,aAAa,IAAI;AAAA,EAC7G,SAAS,UAAU,KAAK,YAAY,kCAAkC;AAAA,EACtE,QAAQ,UAAU,KAAK,YAAY,uCAAuC,EAAE,aAAa,IAAI;AAAA,EAC7F,iBAAiB,UAAU,KAAK,YAAY,sCAAsC,EAAE,aAAa,IAAI;AAAA,EACrG,aAAa,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,IAAI,CAAC,EAAE,YAAY,gCAAgC;AAAA,EACjH,YAAY,UAAU,MAAM;AAAA,IAC1B,OAAO,UAAU;AAAA,IACjB,SAAS,UAAU;AAAA,IACnB,MAAM,UAAU;AAAA,EAClB,CAAC,EACE,YAAY,iCAAiC,EAC7C,aAAa,CAAC,CAAC;AAAA,EAClB,WAAW,UAAU,OAClB;AAAA,IACC;AAAA;AAAA;AAAA;AAAA;AAAA,EAKF,EACC,aAAa,CAAC,CAAC;AAAA,EAClB,4BAA4B,UAAU,MAAM,CAAC,SAAS,aAAa,UAAU,MAAM,CAAC,EACjF,YAAY,wEAAwE,EACpF,aAAa,OAAO;AAAA,EACvB,cAAc,UAAU,KACrB;AAAA,IACC;AAAA,EACF,EACC,aAAa,KAAK;AAAA,EACrB,UAAU,UAAU,OAAO;AAAA,IACzB;AAAA,EACF;AACF;AAEO,MAAM,0BAA0B;",
   "names": []
 }