@elliemae/ds-banner 1.57.2 → 1.58.0-rc.2

package/cjs/DSBanner.js

@@ -32,7 +32,8 @@ var DSBanner = function DSBanner(_ref) {
       body = _ref.body,
       actionLink = _ref.actionLink,
       showCloseButton = _ref.showCloseButton,
-      containerProps = _ref.containerProps;
+      containerProps = _ref.containerProps,
+      actionRef = _ref.actionRef;
   var innerContainerRef = React.useRef(null);
   var linkRef = React.useRef(null);
 
@@ -48,17 +49,38 @@ var DSBanner = function DSBanner(_ref) {
 
   var _useState5 = React.useState(0),
       _useState6 = _slicedToArray__default['default'](_useState5, 2),
-      height = _useState6[0],
-      setHeight = _useState6[1];
+      height = _useState6[0];
+      _useState6[1];
 
-  React.useEffect(function () {
-    if (innerContainerRef.current) {
-      setHeight(innerContainerRef.current.offsetHeight);
+  var _useState7 = React.useState(undefined),
+      _useState8 = _slicedToArray__default['default'](_useState7, 2),
+      alertTabIndex = _useState8[0],
+      setAlertTabIndex = _useState8[1];
+
+  React__default['default'].useEffect(function () {
+    if (actionRef && actionRef.current) {
+      actionRef.current.focusOnWrapper = function () {
+        if (innerContainerRef.current) {
+          setAlertTabIndex(0);
+          setTimeout(function () {
+            innerContainerRef.current.focus();
+          }, 100);
+        }
+      };
+
+      actionRef.current.focusOnLink = function () {
+        if (linkRef.current) {
+          linkRef.current.focus();
+        }
+      };
     }
-  }, [isAnimating, isOpen]);
+  }, [actionRef]);
   React.useLayoutEffect(function () {
     if (isOpen !== current || isOpen) setIsAnimating(true);else setIsAnimating(false);
   }, [isOpen, current]);
+  var handleBlur = React.useCallback(function () {
+    setAlertTabIndex(undefined);
+  }, []);
   var handleOnKeyDown = React.useCallback(function (e) {
     if (e.key === 'Enter' || e.key === ' ') {
       e.preventDefault();
@@ -81,7 +103,9 @@ var DSBanner = function DSBanner(_ref) {
     ref: innerContainerRef,
     isAnimating: isAnimating,
     "data-testid": "ds-banner",
-    role: "alert"
+    role: "alert",
+    tabIndex: alertTabIndex,
+    onBlur: handleBlur
   }, /*#__PURE__*/React__default['default'].createElement(styles.StyledIconContainer, {
     "data-testid": "ds-banner-icon"
   }, utils_icons.icons[type]), /*#__PURE__*/React__default['default'].createElement(styles.StyledTitle, null, label), /*#__PURE__*/React__default['default'].createElement(styles.StyledSubTitle, null, /*#__PURE__*/React__default['default'].createElement("span", null, body), actionLink && /*#__PURE__*/React__default['default'].createElement(styles.StyledActionLink, {
@@ -92,7 +116,7 @@ var DSBanner = function DSBanner(_ref) {
     onKeyDown: handleOnKeyDown,
     tabIndex: 0,
     isBodyEmpty: body
-  }, actionLink.label)), showCloseButton && /*#__PURE__*/React__default['default'].createElement(styles.StyledCloseButton, {
+  }, actionLink.label)), showCloseButton ? /*#__PURE__*/React__default['default'].createElement(styles.StyledCloseButton, {
     "data-testid": "ds-banner-close-button",
     buttonType: "secondary",
     onClick: onClose,
@@ -101,7 +125,7 @@ var DSBanner = function DSBanner(_ref) {
       width: "12px",
       height: "12px"
     })
-  })));
+  }) : /*#__PURE__*/React__default['default'].createElement("span", null)));
 };
 
 DSBanner.defaultProps = defaultProps.defaultProps;

package/cjs/DSBanner.js.map

@@ -1 +1 @@
-{"version":3,"file":"DSBanner.js","sources":["../../src/DSBanner.tsx"],"sourcesContent":["import React, { useLayoutEffect, useEffect, useRef, useCallback, useState } from 'react';\nimport { CloseX } from '@elliemae/ds-icons';\nimport { describe } from 'react-desc';\nimport type { BannerPropsT } from './index.d';\nimport { icons } from './utils/icons';\nimport { propTypes } from './propTypes';\nimport { defaultProps } from './defaultProps';\nimport {\n  StyledActionLink,\n  StyledCloseButton,\n  StyledInnerContainer,\n  StyledBannerContainer,\n  StyledIconContainer,\n  StyledSubTitle,\n  StyledTitle,\n} from './styles';\n\nconst DSBanner = ({\n  type,\n  isOpen,\n  onClose,\n  label,\n  body,\n  actionLink,\n  showCloseButton,\n  containerProps,\n}: BannerPropsT): JSX.Element => {\n  const innerContainerRef = useRef<HTMLDivElement | null>(null);\n  const linkRef = useRef<HTMLAnchorElement | null>(null);\n  const [current, setCurrent] = useState<boolean>(isOpen);\n  const [isAnimating, setIsAnimating] = useState<boolean>(false);\n  const [height, setHeight] = useState<number>(0);\n\n  useEffect(() => {\n    if (innerContainerRef.current) {\n      setHeight(innerContainerRef.current.offsetHeight);\n    }\n  }, [isAnimating, isOpen]);\n\n  useLayoutEffect(() => {\n    if (isOpen !== current || isOpen) setIsAnimating(true);\n    else setIsAnimating(false);\n  }, [isOpen, current]);\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  if (!isAnimating && !isOpen) return null;\n\n  return (\n    <StyledBannerContainer\n      type={type}\n      isOpen={isOpen}\n      isAnimating={isAnimating}\n      onAnimationEnd={() => setCurrent(isOpen)}\n      height={height}\n      data-testid=\"ds-banner-container\"\n      {...containerProps}\n    >\n      <StyledInnerContainer\n        type={type}\n        isOpen={isOpen}\n        ref={innerContainerRef}\n        isAnimating={isAnimating}\n        data-testid=\"ds-banner\"\n        role=\"alert\"\n      >\n        <StyledIconContainer data-testid=\"ds-banner-icon\">{icons[type]}</StyledIconContainer>\n        <StyledTitle>{label}</StyledTitle>\n        <StyledSubTitle>\n          <span>{body}</span>\n          {actionLink && (\n            <StyledActionLink\n              data-testid=\"ds-banner-action-link\"\n              onClick={actionLink.onClick}\n              href={actionLink.href}\n              ref={linkRef}\n              onKeyDown={handleOnKeyDown}\n              tabIndex={0}\n              isBodyEmpty={body}\n            >\n              {actionLink.label}\n            </StyledActionLink>\n          )}\n        </StyledSubTitle>\n\n        {showCloseButton && (\n          <StyledCloseButton\n            data-testid=\"ds-banner-close-button\"\n            buttonType=\"secondary\"\n            onClick={onClose}\n            aria-label=\"Close icon\"\n            icon={<CloseX width=\"12px\" height=\"12px\" />}\n          />\n        )}\n      </StyledInnerContainer>\n    </StyledBannerContainer>\n  );\n};\n\nDSBanner.defaultProps = defaultProps;\nDSBanner.propTypes = propTypes;\nconst DSBannerWithSchema = describe(DSBanner);\nDSBannerWithSchema.propTypes = propTypes;\n\nexport default DSBanner;\nexport { DSBannerWithSchema };\n"],"names":["DSBanner","type","isOpen","onClose","label","body","actionLink","showCloseButton","containerProps","innerContainerRef","useRef","linkRef","useState","current","setCurrent","isAnimating","setIsAnimating","height","setHeight","useEffect","offsetHeight","useLayoutEffect","handleOnKeyDown","useCallback","e","key","preventDefault","click","React","StyledBannerContainer","StyledInnerContainer","StyledIconContainer","icons","StyledTitle","StyledSubTitle","StyledActionLink","onClick","href","StyledCloseButton","CloseX","defaultProps","propTypes","DSBannerWithSchema","describe"],"mappings":"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"}
+{"version":3,"file":"DSBanner.js","sources":["../../src/DSBanner.tsx"],"sourcesContent":["import React, { useLayoutEffect, useEffect, useRef, useCallback, useState } from 'react';\nimport { CloseX } from '@elliemae/ds-icons';\nimport { describe } from 'react-desc';\nimport type { BannerPropsT } from './index.d';\nimport { icons } from './utils/icons';\nimport { propTypes } from './propTypes';\nimport { defaultProps } from './defaultProps';\nimport {\n  StyledActionLink,\n  StyledCloseButton,\n  StyledInnerContainer,\n  StyledBannerContainer,\n  StyledIconContainer,\n  StyledSubTitle,\n  StyledTitle,\n} from './styles';\n\nconst DSBanner = ({\n  type,\n  isOpen,\n  onClose,\n  label,\n  body,\n  actionLink,\n  showCloseButton,\n  containerProps,\n  actionRef,\n}: BannerPropsT): JSX.Element => {\n  const innerContainerRef = useRef<HTMLDivElement | null>(null);\n  const linkRef = useRef<HTMLAnchorElement | null>(null);\n  const [current, setCurrent] = useState<boolean>(isOpen);\n  const [isAnimating, setIsAnimating] = useState<boolean>(false);\n  const [height, setHeight] = useState<number>(0);\n  const [alertTabIndex, setAlertTabIndex] = useState<number | undefined>(undefined);\n\n  React.useEffect(() => {\n    if (actionRef && actionRef.current) {\n      actionRef.current.focusOnWrapper = () => {\n        if (innerContainerRef.current) {\n          setAlertTabIndex(0);\n          setTimeout(() => {\n            innerContainerRef.current.focus();\n          }, 100);\n        }\n      };\n      actionRef.current.focusOnLink = () => {\n        if (linkRef.current) {\n          linkRef.current.focus();\n        }\n      };\n    }\n  }, [actionRef]);\n\n  useLayoutEffect(() => {\n    if (isOpen !== current || isOpen) setIsAnimating(true);\n    else setIsAnimating(false);\n  }, [isOpen, current]);\n\n  const handleBlur = useCallback(() => {\n    setAlertTabIndex(undefined);\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  if (!isAnimating && !isOpen) return null;\n\n  return (\n    <StyledBannerContainer\n      type={type}\n      isOpen={isOpen}\n      isAnimating={isAnimating}\n      onAnimationEnd={() => setCurrent(isOpen)}\n      height={height}\n      data-testid=\"ds-banner-container\"\n      {...containerProps}\n    >\n      <StyledInnerContainer\n        type={type}\n        isOpen={isOpen}\n        ref={innerContainerRef}\n        isAnimating={isAnimating}\n        data-testid=\"ds-banner\"\n        role=\"alert\"\n        tabIndex={alertTabIndex}\n        onBlur={handleBlur}\n      >\n        <StyledIconContainer data-testid=\"ds-banner-icon\">{icons[type]}</StyledIconContainer>\n        <StyledTitle>{label}</StyledTitle>\n        <StyledSubTitle>\n          <span>{body}</span>\n          {actionLink && (\n            <StyledActionLink\n              data-testid=\"ds-banner-action-link\"\n              onClick={actionLink.onClick}\n              href={actionLink.href}\n              ref={linkRef}\n              onKeyDown={handleOnKeyDown}\n              tabIndex={0}\n              isBodyEmpty={body}\n            >\n              {actionLink.label}\n            </StyledActionLink>\n          )}\n        </StyledSubTitle>\n\n        {showCloseButton ? (\n          <StyledCloseButton\n            data-testid=\"ds-banner-close-button\"\n            buttonType=\"secondary\"\n            onClick={onClose}\n            aria-label=\"Close icon\"\n            icon={<CloseX width=\"12px\" height=\"12px\" />}\n          />\n        ) : (\n          <span />\n        )}\n      </StyledInnerContainer>\n    </StyledBannerContainer>\n  );\n};\n\nDSBanner.defaultProps = defaultProps;\nDSBanner.propTypes = propTypes;\nconst DSBannerWithSchema = describe(DSBanner);\nDSBannerWithSchema.propTypes = propTypes;\n\nexport default DSBanner;\nexport { DSBannerWithSchema };\n"],"names":["DSBanner","type","isOpen","onClose","label","body","actionLink","showCloseButton","containerProps","actionRef","innerContainerRef","useRef","linkRef","useState","current","setCurrent","isAnimating","setIsAnimating","height","undefined","alertTabIndex","setAlertTabIndex","React","useEffect","focusOnWrapper","setTimeout","focus","focusOnLink","useLayoutEffect","handleBlur","useCallback","handleOnKeyDown","e","key","preventDefault","click","StyledBannerContainer","StyledInnerContainer","StyledIconContainer","icons","StyledTitle","StyledSubTitle","StyledActionLink","onClick","href","StyledCloseButton","CloseX","defaultProps","propTypes","DSBannerWithSchema","describe"],"mappings":"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"}

package/cjs/propTypes.js

@@ -17,7 +17,8 @@ var propTypes = {
     label: reactDesc.PropTypes.string,
     onClick: reactDesc.PropTypes.func,
     href: reactDesc.PropTypes.string
-  }).description('Properties of the ActionLink component').defaultValue({})
+  }).description('Properties of the ActionLink component').defaultValue({}),
+  actionRef: reactDesc.PropTypes.object.description("\n      Reference to use actions:\n      - focusOnLink: function to focus the banner\n      - focusOnWrapper: function to focus the link\n    ").defaultValue({})
 };
 
 exports.propTypes = propTypes;

package/cjs/propTypes.js.map

@@ -1 +1 @@
-{"version":3,"file":"propTypes.js","sources":["../../src/propTypes.tsx"],"sourcesContent":["import { PropTypes } from 'react-desc';\nimport { BANNER_TYPES } from './utils/bannerTypes';\n\nexport const propTypes = {\n  containerProps: PropTypes.object.description('Set of Properties attached to the main container').defaultValue({}),\n  label: PropTypes.string.description('banner s label').defaultValue(''),\n  body: PropTypes.string.description('banner s body content').defaultValue(''),\n  type: PropTypes.oneOf(Object.values(BANNER_TYPES)).description('banner s type').defaultValue(BANNER_TYPES.INFO),\n  onClose: PropTypes.func.description('function executed 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  actionLink: PropTypes.shape({\n    label: PropTypes.string,\n    onClick: PropTypes.func,\n    href: PropTypes.string,\n  })\n    .description('Properties of the ActionLink component')\n    .defaultValue({}),\n};\n"],"names":["propTypes","containerProps","PropTypes","object","description","defaultValue","label","string","body","type","oneOf","Object","values","BANNER_TYPES","INFO","onClose","func","isOpen","bool","showCloseButton","actionLink","shape","onClick","href"],"mappings":";;;;;;;IAGaA,SAAS,GAAG;AACvBC,EAAAA,cAAc,EAAEC,mBAAS,CAACC,MAAV,CAAiBC,WAAjB,CAA6B,kDAA7B,EAAiFC,YAAjF,CAA8F,EAA9F,CADO;AAEvBC,EAAAA,KAAK,EAAEJ,mBAAS,CAACK,MAAV,CAAiBH,WAAjB,CAA6B,gBAA7B,EAA+CC,YAA/C,CAA4D,EAA5D,CAFgB;AAGvBG,EAAAA,IAAI,EAAEN,mBAAS,CAACK,MAAV,CAAiBH,WAAjB,CAA6B,uBAA7B,EAAsDC,YAAtD,CAAmE,EAAnE,CAHiB;AAIvBI,EAAAA,IAAI,EAAEP,mBAAS,CAACQ,KAAV,CAAgBC,MAAM,CAACC,MAAP,CAAcC,8BAAd,CAAhB,EAA6CT,WAA7C,CAAyD,eAAzD,EAA0EC,YAA1E,CAAuFQ,8BAAY,CAACC,IAApG,CAJiB;AAKvBC,EAAAA,OAAO,EAAEb,mBAAS,CAACc,IAAV,CAAeZ,WAAf,CAA2B,0CAA3B,CALc;AAMvBa,EAAAA,MAAM,EAAEf,mBAAS,CAACgB,IAAV,CAAed,WAAf,CAA2B,sCAA3B,EAAmEC,YAAnE,CAAgF,IAAhF,CANe;AAOvBc,EAAAA,eAAe,EAAEjB,mBAAS,CAACgB,IAAV,CAAed,WAAf,CAA2B,qCAA3B,EAAkEC,YAAlE,CAA+E,IAA/E,CAPM;AAQvBe,EAAAA,UAAU,EAAElB,mBAAS,CAACmB,KAAV,CAAgB;AAC1Bf,IAAAA,KAAK,EAAEJ,mBAAS,CAACK,MADS;AAE1Be,IAAAA,OAAO,EAAEpB,mBAAS,CAACc,IAFO;AAG1BO,IAAAA,IAAI,EAAErB,mBAAS,CAACK;AAHU,GAAhB,EAKTH,WALS,CAKG,wCALH,EAMTC,YANS,CAMI,EANJ;AARW;;;;"}
+{"version":3,"file":"propTypes.js","sources":["../../src/propTypes.tsx"],"sourcesContent":["import { PropTypes } from 'react-desc';\nimport { BANNER_TYPES } from './utils/bannerTypes';\n\nexport const propTypes = {\n  containerProps: PropTypes.object.description('Set of Properties attached to the main container').defaultValue({}),\n  label: PropTypes.string.description('banner s label').defaultValue(''),\n  body: PropTypes.string.description('banner s body content').defaultValue(''),\n  type: PropTypes.oneOf(Object.values(BANNER_TYPES)).description('banner s type').defaultValue(BANNER_TYPES.INFO),\n  onClose: PropTypes.func.description('function executed 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  actionLink: PropTypes.shape({\n    label: PropTypes.string,\n    onClick: PropTypes.func,\n    href: PropTypes.string,\n  })\n    .description('Properties of the ActionLink component')\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"],"names":["propTypes","containerProps","PropTypes","object","description","defaultValue","label","string","body","type","oneOf","Object","values","BANNER_TYPES","INFO","onClose","func","isOpen","bool","showCloseButton","actionLink","shape","onClick","href","actionRef"],"mappings":";;;;;;;IAGaA,SAAS,GAAG;AACvBC,EAAAA,cAAc,EAAEC,mBAAS,CAACC,MAAV,CAAiBC,WAAjB,CAA6B,kDAA7B,EAAiFC,YAAjF,CAA8F,EAA9F,CADO;AAEvBC,EAAAA,KAAK,EAAEJ,mBAAS,CAACK,MAAV,CAAiBH,WAAjB,CAA6B,gBAA7B,EAA+CC,YAA/C,CAA4D,EAA5D,CAFgB;AAGvBG,EAAAA,IAAI,EAAEN,mBAAS,CAACK,MAAV,CAAiBH,WAAjB,CAA6B,uBAA7B,EAAsDC,YAAtD,CAAmE,EAAnE,CAHiB;AAIvBI,EAAAA,IAAI,EAAEP,mBAAS,CAACQ,KAAV,CAAgBC,MAAM,CAACC,MAAP,CAAcC,8BAAd,CAAhB,EAA6CT,WAA7C,CAAyD,eAAzD,EAA0EC,YAA1E,CAAuFQ,8BAAY,CAACC,IAApG,CAJiB;AAKvBC,EAAAA,OAAO,EAAEb,mBAAS,CAACc,IAAV,CAAeZ,WAAf,CAA2B,0CAA3B,CALc;AAMvBa,EAAAA,MAAM,EAAEf,mBAAS,CAACgB,IAAV,CAAed,WAAf,CAA2B,sCAA3B,EAAmEC,YAAnE,CAAgF,IAAhF,CANe;AAOvBc,EAAAA,eAAe,EAAEjB,mBAAS,CAACgB,IAAV,CAAed,WAAf,CAA2B,qCAA3B,EAAkEC,YAAlE,CAA+E,IAA/E,CAPM;AAQvBe,EAAAA,UAAU,EAAElB,mBAAS,CAACmB,KAAV,CAAgB;AAC1Bf,IAAAA,KAAK,EAAEJ,mBAAS,CAACK,MADS;AAE1Be,IAAAA,OAAO,EAAEpB,mBAAS,CAACc,IAFO;AAG1BO,IAAAA,IAAI,EAAErB,mBAAS,CAACK;AAHU,GAAhB,EAKTH,WALS,CAKG,wCALH,EAMTC,YANS,CAMI,EANJ,CARW;AAevBmB,EAAAA,SAAS,EAAEtB,mBAAS,CAACC,MAAV,CACRC,WADQ,mJAQRC,YARQ,CAQK,EARL;AAfY;;;;"}

package/cjs/styles.js

@@ -27,7 +27,7 @@ var StyledBannerContainer = /*#__PURE__*/styled__default['default'].div.withConf
 });
 var StyledInnerContainer = /*#__PURE__*/styled__default['default'].div.withConfig({
   componentId: "sc-ffu2hq-1"
-})(["padding-right:6px;display:flex;align-items:center;min-height:41px;width:100%;background-color:", ";border-bottom:5px solid ", ";", ";"], function (_ref3) {
+})(["padding-right:6px;display:grid;align-items:center;min-height:41px;width:100%;background-color:", ";border-bottom:5px solid ", ";", ";&:focus{position:relative;&:after{content:'';display:block;position:absolute;top:0;left:0;pointer-events:none;border-radius:2px;width:calc(100%);border:2px solid #1e79c2;height:calc(100% + 4px);}}grid-template-columns:auto 1fr auto auto;"], function (_ref3) {
   var theme = _ref3.theme;
   return theme.colors.neutral['000'];
 }, function (_ref4) {
@@ -50,7 +50,7 @@ var StyledIconContainer = /*#__PURE__*/styled__default['default'].div.withConfig
 });
 var StyledTitle = /*#__PURE__*/styled__default['default'].div.withConfig({
   componentId: "sc-ffu2hq-3"
-})(["color:", ";font-size:", ";font-weight:", ";white-space:nowrap;"], function (_ref8) {
+})(["color:", ";font-size:", ";font-weight:", ";"], function (_ref8) {
   var theme = _ref8.theme;
   return theme.colors.neutral[700];
 }, function (_ref9) {
@@ -92,7 +92,7 @@ var StyledCloseButton = /*#__PURE__*/styled__default['default'](DSButton__defaul
   componentId: "sc-ffu2hq-6"
 })(["margin-left:", ";&:not(focus){border:transparent;}"], function (_ref18) {
   var theme = _ref18.theme;
-  return theme.space.s;
+  return theme.space.xxs;
 });
 
 exports.StyledActionLink = StyledActionLink;

package/cjs/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sources":["../../src/styles.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport DSButton from '@elliemae/ds-button';\nimport type { StyledActionLinkT, StyledBannerContainerT, StyledInnerContainerT } from './index.d';\nimport { handleAnimation, handleBorderColor } from './utils/styleHelpers';\n\nexport const StyledBannerContainer = styled.div<StyledBannerContainerT>`\n  overflow: hidden;\n  height: ${({ isOpen }) => (isOpen ? 'auto' : '0px')};\n  ${({ isAnimating, isOpen, height }) => handleAnimation(isAnimating, isOpen, height)};\n`;\n\nexport const StyledInnerContainer = styled.div<StyledInnerContainerT>`\n  padding-right: 6px;\n  display: flex;\n  align-items: center;\n  min-height: 41px;\n  width: 100%;\n  background-color: ${({ theme }) => theme.colors.neutral['000']};\n  border-bottom: 5px solid ${({ type, theme }) => handleBorderColor(type, theme)};\n  ${({ isAnimating, isOpen }) => handleAnimation(isAnimating, isOpen)};\n`;\n\nexport const StyledIconContainer = styled.div`\n  margin-right: ${({ theme }) => theme.space.xxs};\n  margin-left: ${({ theme }) => theme.space.xs};\n`;\n\nexport const StyledTitle = styled.div`\n  color: ${({ theme }) => theme.colors.neutral[700]};\n  font-size: ${({ theme }) => theme.fontSizes.label[400]};\n  font-weight: ${({ theme }) => theme.fontWeights.semibold};\n  white-space: nowrap;\n`;\n\nexport const StyledSubTitle = styled.div`\n  width: 100%;\n  margin-left: ${({ theme }) => theme.space.xs};\n  font-size: ${({ theme }) => theme.fontSizes.subTitle[400]};\n  font-weight: ${({ theme }) => theme.fontWeights.regular};\n`;\n\nexport const StyledActionLink = styled.a<StyledActionLinkT>`\n  margin-left: ${({ theme, isBodyEmpty }) => (isBodyEmpty ? theme.space.xs : 0)};\n  white-space: nowrap;\n  text-decoration: none;\n  line-height: 1.1;\n  font-size: ${({ theme }) => theme.fontSizes.hyperlink[400]};\n  font-weight: ${({ theme }) => theme.fontWeights.regular};\n  color: ${({ theme }) => theme.colors.brand[600]};\n`;\n\nexport const StyledCloseButton = styled(DSButton)`\n  margin-left: ${({ theme }) => theme.space.s};\n  &:not(focus) {\n    border: transparent;\n  }\n`;\n"],"names":["StyledBannerContainer","styled","div","isOpen","isAnimating","height","handleAnimation","StyledInnerContainer","theme","colors","neutral","type","handleBorderColor","StyledIconContainer","space","xxs","xs","StyledTitle","fontSizes","label","fontWeights","semibold","StyledSubTitle","subTitle","regular","StyledActionLink","a","isBodyEmpty","hyperlink","brand","StyledCloseButton","DSButton","s"],"mappings":"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"}
+{"version":3,"file":"styles.js","sources":["../../src/styles.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport DSButton from '@elliemae/ds-button';\nimport type { StyledActionLinkT, StyledBannerContainerT, StyledInnerContainerT } from './index.d';\nimport { handleAnimation, handleBorderColor } from './utils/styleHelpers';\n\nexport const StyledBannerContainer = styled.div<StyledBannerContainerT>`\n  overflow: hidden;\n  height: ${({ isOpen }) => (isOpen ? 'auto' : '0px')};\n  ${({ isAnimating, isOpen, height }) => handleAnimation(isAnimating, isOpen, height)};\n`;\n\nexport const StyledInnerContainer = styled.div<StyledInnerContainerT>`\n  padding-right: 6px;\n  display: grid;\n  align-items: center;\n  min-height: 41px;\n  width: 100%;\n  background-color: ${({ theme }) => theme.colors.neutral['000']};\n  border-bottom: 5px solid ${({ type, theme }) => handleBorderColor(type, theme)};\n  ${({ isAnimating, isOpen }) => handleAnimation(isAnimating, isOpen)};\n  &:focus {\n    position: relative;\n    &:after {\n      content: '';\n      display: block;\n      position: absolute;\n      top: 0;\n      left: 0;\n      pointer-events: none;\n      border-radius: 2px;\n      width: calc(100%);\n      border: 2px solid #1e79c2;\n      height: calc(100% + 4px);\n    }\n  }\n  grid-template-columns: auto 1fr auto auto;\n`;\n\nexport const StyledIconContainer = styled.div`\n  margin-right: ${({ theme }) => theme.space.xxs};\n  margin-left: ${({ theme }) => theme.space.xs};\n`;\n\nexport const StyledTitle = styled.div`\n  color: ${({ theme }) => theme.colors.neutral[700]};\n  font-size: ${({ theme }) => theme.fontSizes.label[400]};\n  font-weight: ${({ theme }) => theme.fontWeights.semibold};\n`;\n\nexport const StyledSubTitle = styled.div`\n  width: 100%;\n  margin-left: ${({ theme }) => theme.space.xs};\n  font-size: ${({ theme }) => theme.fontSizes.subTitle[400]};\n  font-weight: ${({ theme }) => theme.fontWeights.regular};\n`;\n\nexport const StyledActionLink = styled.a<StyledActionLinkT>`\n  margin-left: ${({ theme, isBodyEmpty }) => (isBodyEmpty ? theme.space.xs : 0)};\n  white-space: nowrap;\n  text-decoration: none;\n  line-height: 1.1;\n  font-size: ${({ theme }) => theme.fontSizes.hyperlink[400]};\n  font-weight: ${({ theme }) => theme.fontWeights.regular};\n  color: ${({ theme }) => theme.colors.brand[600]};\n`;\n\nexport const StyledCloseButton = styled(DSButton)`\n  margin-left: ${({ theme }) => theme.space.xxs};\n  &:not(focus) {\n    border: transparent;\n  }\n`;\n"],"names":["StyledBannerContainer","styled","div","isOpen","isAnimating","height","handleAnimation","StyledInnerContainer","theme","colors","neutral","type","handleBorderColor","StyledIconContainer","space","xxs","xs","StyledTitle","fontSizes","label","fontWeights","semibold","StyledSubTitle","subTitle","regular","StyledActionLink","a","isBodyEmpty","hyperlink","brand","StyledCloseButton","DSButton"],"mappings":"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"}

package/esm/DSBanner.js

@@ -1,6 +1,6 @@
 import _extends from '@babel/runtime/helpers/esm/extends';
 import _slicedToArray from '@babel/runtime/helpers/esm/slicedToArray';
-import React, { useRef, useState, useEffect, useLayoutEffect, useCallback } from 'react';
+import React, { useRef, useState, useLayoutEffect, useCallback } from 'react';
 import { CloseX } from '@elliemae/ds-icons';
 import { describe } from 'react-desc';
 import { icons } from './utils/icons.js';
@@ -22,7 +22,8 @@ var DSBanner = function DSBanner(_ref) {
       body = _ref.body,
       actionLink = _ref.actionLink,
       showCloseButton = _ref.showCloseButton,
-      containerProps = _ref.containerProps;
+      containerProps = _ref.containerProps,
+      actionRef = _ref.actionRef;
   var innerContainerRef = useRef(null);
   var linkRef = useRef(null);
 
@@ -38,17 +39,38 @@ var DSBanner = function DSBanner(_ref) {
 
   var _useState5 = useState(0),
       _useState6 = _slicedToArray(_useState5, 2),
-      height = _useState6[0],
-      setHeight = _useState6[1];
+      height = _useState6[0];
+      _useState6[1];
 
-  useEffect(function () {
-    if (innerContainerRef.current) {
-      setHeight(innerContainerRef.current.offsetHeight);
+  var _useState7 = useState(undefined),
+      _useState8 = _slicedToArray(_useState7, 2),
+      alertTabIndex = _useState8[0],
+      setAlertTabIndex = _useState8[1];
+
+  React.useEffect(function () {
+    if (actionRef && actionRef.current) {
+      actionRef.current.focusOnWrapper = function () {
+        if (innerContainerRef.current) {
+          setAlertTabIndex(0);
+          setTimeout(function () {
+            innerContainerRef.current.focus();
+          }, 100);
+        }
+      };
+
+      actionRef.current.focusOnLink = function () {
+        if (linkRef.current) {
+          linkRef.current.focus();
+        }
+      };
     }
-  }, [isAnimating, isOpen]);
+  }, [actionRef]);
   useLayoutEffect(function () {
     if (isOpen !== current || isOpen) setIsAnimating(true);else setIsAnimating(false);
   }, [isOpen, current]);
+  var handleBlur = useCallback(function () {
+    setAlertTabIndex(undefined);
+  }, []);
   var handleOnKeyDown = useCallback(function (e) {
     if (e.key === 'Enter' || e.key === ' ') {
       e.preventDefault();
@@ -71,7 +93,9 @@ var DSBanner = function DSBanner(_ref) {
     ref: innerContainerRef,
     isAnimating: isAnimating,
     "data-testid": "ds-banner",
-    role: "alert"
+    role: "alert",
+    tabIndex: alertTabIndex,
+    onBlur: handleBlur
   }, /*#__PURE__*/React.createElement(StyledIconContainer, {
     "data-testid": "ds-banner-icon"
   }, icons[type]), /*#__PURE__*/React.createElement(StyledTitle, null, label), /*#__PURE__*/React.createElement(StyledSubTitle, null, /*#__PURE__*/React.createElement("span", null, body), actionLink && /*#__PURE__*/React.createElement(StyledActionLink, {
@@ -82,7 +106,7 @@ var DSBanner = function DSBanner(_ref) {
     onKeyDown: handleOnKeyDown,
     tabIndex: 0,
     isBodyEmpty: body
-  }, actionLink.label)), showCloseButton && /*#__PURE__*/React.createElement(StyledCloseButton, {
+  }, actionLink.label)), showCloseButton ? /*#__PURE__*/React.createElement(StyledCloseButton, {
     "data-testid": "ds-banner-close-button",
     buttonType: "secondary",
     onClick: onClose,
@@ -91,7 +115,7 @@ var DSBanner = function DSBanner(_ref) {
       width: "12px",
       height: "12px"
     })
-  })));
+  }) : /*#__PURE__*/React.createElement("span", null)));
 };
 
 DSBanner.defaultProps = defaultProps;

package/esm/DSBanner.js.map

@@ -1 +1 @@
-{"version":3,"file":"DSBanner.js","sources":["../../src/DSBanner.tsx"],"sourcesContent":["import React, { useLayoutEffect, useEffect, useRef, useCallback, useState } from 'react';\nimport { CloseX } from '@elliemae/ds-icons';\nimport { describe } from 'react-desc';\nimport type { BannerPropsT } from './index.d';\nimport { icons } from './utils/icons';\nimport { propTypes } from './propTypes';\nimport { defaultProps } from './defaultProps';\nimport {\n  StyledActionLink,\n  StyledCloseButton,\n  StyledInnerContainer,\n  StyledBannerContainer,\n  StyledIconContainer,\n  StyledSubTitle,\n  StyledTitle,\n} from './styles';\n\nconst DSBanner = ({\n  type,\n  isOpen,\n  onClose,\n  label,\n  body,\n  actionLink,\n  showCloseButton,\n  containerProps,\n}: BannerPropsT): JSX.Element => {\n  const innerContainerRef = useRef<HTMLDivElement | null>(null);\n  const linkRef = useRef<HTMLAnchorElement | null>(null);\n  const [current, setCurrent] = useState<boolean>(isOpen);\n  const [isAnimating, setIsAnimating] = useState<boolean>(false);\n  const [height, setHeight] = useState<number>(0);\n\n  useEffect(() => {\n    if (innerContainerRef.current) {\n      setHeight(innerContainerRef.current.offsetHeight);\n    }\n  }, [isAnimating, isOpen]);\n\n  useLayoutEffect(() => {\n    if (isOpen !== current || isOpen) setIsAnimating(true);\n    else setIsAnimating(false);\n  }, [isOpen, current]);\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  if (!isAnimating && !isOpen) return null;\n\n  return (\n    <StyledBannerContainer\n      type={type}\n      isOpen={isOpen}\n      isAnimating={isAnimating}\n      onAnimationEnd={() => setCurrent(isOpen)}\n      height={height}\n      data-testid=\"ds-banner-container\"\n      {...containerProps}\n    >\n      <StyledInnerContainer\n        type={type}\n        isOpen={isOpen}\n        ref={innerContainerRef}\n        isAnimating={isAnimating}\n        data-testid=\"ds-banner\"\n        role=\"alert\"\n      >\n        <StyledIconContainer data-testid=\"ds-banner-icon\">{icons[type]}</StyledIconContainer>\n        <StyledTitle>{label}</StyledTitle>\n        <StyledSubTitle>\n          <span>{body}</span>\n          {actionLink && (\n            <StyledActionLink\n              data-testid=\"ds-banner-action-link\"\n              onClick={actionLink.onClick}\n              href={actionLink.href}\n              ref={linkRef}\n              onKeyDown={handleOnKeyDown}\n              tabIndex={0}\n              isBodyEmpty={body}\n            >\n              {actionLink.label}\n            </StyledActionLink>\n          )}\n        </StyledSubTitle>\n\n        {showCloseButton && (\n          <StyledCloseButton\n            data-testid=\"ds-banner-close-button\"\n            buttonType=\"secondary\"\n            onClick={onClose}\n            aria-label=\"Close icon\"\n            icon={<CloseX width=\"12px\" height=\"12px\" />}\n          />\n        )}\n      </StyledInnerContainer>\n    </StyledBannerContainer>\n  );\n};\n\nDSBanner.defaultProps = defaultProps;\nDSBanner.propTypes = propTypes;\nconst DSBannerWithSchema = describe(DSBanner);\nDSBannerWithSchema.propTypes = propTypes;\n\nexport default DSBanner;\nexport { DSBannerWithSchema };\n"],"names":["DSBanner","type","isOpen","onClose","label","body","actionLink","showCloseButton","containerProps","innerContainerRef","useRef","linkRef","useState","current","setCurrent","isAnimating","setIsAnimating","height","setHeight","useEffect","offsetHeight","useLayoutEffect","handleOnKeyDown","useCallback","e","key","preventDefault","click","icons","onClick","href","defaultProps","propTypes","DSBannerWithSchema","describe"],"mappings":"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"}
+{"version":3,"file":"DSBanner.js","sources":["../../src/DSBanner.tsx"],"sourcesContent":["import React, { useLayoutEffect, useEffect, useRef, useCallback, useState } from 'react';\nimport { CloseX } from '@elliemae/ds-icons';\nimport { describe } from 'react-desc';\nimport type { BannerPropsT } from './index.d';\nimport { icons } from './utils/icons';\nimport { propTypes } from './propTypes';\nimport { defaultProps } from './defaultProps';\nimport {\n  StyledActionLink,\n  StyledCloseButton,\n  StyledInnerContainer,\n  StyledBannerContainer,\n  StyledIconContainer,\n  StyledSubTitle,\n  StyledTitle,\n} from './styles';\n\nconst DSBanner = ({\n  type,\n  isOpen,\n  onClose,\n  label,\n  body,\n  actionLink,\n  showCloseButton,\n  containerProps,\n  actionRef,\n}: BannerPropsT): JSX.Element => {\n  const innerContainerRef = useRef<HTMLDivElement | null>(null);\n  const linkRef = useRef<HTMLAnchorElement | null>(null);\n  const [current, setCurrent] = useState<boolean>(isOpen);\n  const [isAnimating, setIsAnimating] = useState<boolean>(false);\n  const [height, setHeight] = useState<number>(0);\n  const [alertTabIndex, setAlertTabIndex] = useState<number | undefined>(undefined);\n\n  React.useEffect(() => {\n    if (actionRef && actionRef.current) {\n      actionRef.current.focusOnWrapper = () => {\n        if (innerContainerRef.current) {\n          setAlertTabIndex(0);\n          setTimeout(() => {\n            innerContainerRef.current.focus();\n          }, 100);\n        }\n      };\n      actionRef.current.focusOnLink = () => {\n        if (linkRef.current) {\n          linkRef.current.focus();\n        }\n      };\n    }\n  }, [actionRef]);\n\n  useLayoutEffect(() => {\n    if (isOpen !== current || isOpen) setIsAnimating(true);\n    else setIsAnimating(false);\n  }, [isOpen, current]);\n\n  const handleBlur = useCallback(() => {\n    setAlertTabIndex(undefined);\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  if (!isAnimating && !isOpen) return null;\n\n  return (\n    <StyledBannerContainer\n      type={type}\n      isOpen={isOpen}\n      isAnimating={isAnimating}\n      onAnimationEnd={() => setCurrent(isOpen)}\n      height={height}\n      data-testid=\"ds-banner-container\"\n      {...containerProps}\n    >\n      <StyledInnerContainer\n        type={type}\n        isOpen={isOpen}\n        ref={innerContainerRef}\n        isAnimating={isAnimating}\n        data-testid=\"ds-banner\"\n        role=\"alert\"\n        tabIndex={alertTabIndex}\n        onBlur={handleBlur}\n      >\n        <StyledIconContainer data-testid=\"ds-banner-icon\">{icons[type]}</StyledIconContainer>\n        <StyledTitle>{label}</StyledTitle>\n        <StyledSubTitle>\n          <span>{body}</span>\n          {actionLink && (\n            <StyledActionLink\n              data-testid=\"ds-banner-action-link\"\n              onClick={actionLink.onClick}\n              href={actionLink.href}\n              ref={linkRef}\n              onKeyDown={handleOnKeyDown}\n              tabIndex={0}\n              isBodyEmpty={body}\n            >\n              {actionLink.label}\n            </StyledActionLink>\n          )}\n        </StyledSubTitle>\n\n        {showCloseButton ? (\n          <StyledCloseButton\n            data-testid=\"ds-banner-close-button\"\n            buttonType=\"secondary\"\n            onClick={onClose}\n            aria-label=\"Close icon\"\n            icon={<CloseX width=\"12px\" height=\"12px\" />}\n          />\n        ) : (\n          <span />\n        )}\n      </StyledInnerContainer>\n    </StyledBannerContainer>\n  );\n};\n\nDSBanner.defaultProps = defaultProps;\nDSBanner.propTypes = propTypes;\nconst DSBannerWithSchema = describe(DSBanner);\nDSBannerWithSchema.propTypes = propTypes;\n\nexport default DSBanner;\nexport { DSBannerWithSchema };\n"],"names":["DSBanner","type","isOpen","onClose","label","body","actionLink","showCloseButton","containerProps","actionRef","innerContainerRef","useRef","linkRef","useState","current","setCurrent","isAnimating","setIsAnimating","height","undefined","alertTabIndex","setAlertTabIndex","React","useEffect","focusOnWrapper","setTimeout","focus","focusOnLink","useLayoutEffect","handleBlur","useCallback","handleOnKeyDown","e","key","preventDefault","click","icons","onClick","href","defaultProps","propTypes","DSBannerWithSchema","describe"],"mappings":";;;;;;;;;;;;;;;;IAiBMA,QAAQ,GAAG,SAAXA,QAAW,OAUgB;AAAA,MAT/BC,IAS+B,QAT/BA,IAS+B;AAAA,MAR/BC,MAQ+B,QAR/BA,MAQ+B;AAAA,MAP/BC,OAO+B,QAP/BA,OAO+B;AAAA,MAN/BC,KAM+B,QAN/BA,KAM+B;AAAA,MAL/BC,IAK+B,QAL/BA,IAK+B;AAAA,MAJ/BC,UAI+B,QAJ/BA,UAI+B;AAAA,MAH/BC,eAG+B,QAH/BA,eAG+B;AAAA,MAF/BC,cAE+B,QAF/BA,cAE+B;AAAA,MAD/BC,SAC+B,QAD/BA,SAC+B;AAC/B,MAAMC,iBAAiB,GAAGC,MAAM,CAAwB,IAAxB,CAAhC;AACA,MAAMC,OAAO,GAAGD,MAAM,CAA2B,IAA3B,CAAtB;;AACA,kBAA8BE,QAAQ,CAAUX,MAAV,CAAtC;AAAA;AAAA,MAAOY,OAAP;AAAA,MAAgBC,UAAhB;;AACA,mBAAsCF,QAAQ,CAAU,KAAV,CAA9C;AAAA;AAAA,MAAOG,WAAP;AAAA,MAAoBC,cAApB;;AACA,mBAA4BJ,QAAQ,CAAS,CAAT,CAApC;AAAA;AAAA,MAAOK,MAAP;AAAA;;AACA,mBAA0CL,QAAQ,CAAqBM,SAArB,CAAlD;AAAA;AAAA,MAAOC,aAAP;AAAA,MAAsBC,gBAAtB;;AAEAC,EAAAA,KAAK,CAACC,SAAN,CAAgB,YAAM;AACpB,QAAId,SAAS,IAAIA,SAAS,CAACK,OAA3B,EAAoC;AAClCL,MAAAA,SAAS,CAACK,OAAV,CAAkBU,cAAlB,GAAmC,YAAM;AACvC,YAAId,iBAAiB,CAACI,OAAtB,EAA+B;AAC7BO,UAAAA,gBAAgB,CAAC,CAAD,CAAhB;AACAI,UAAAA,UAAU,CAAC,YAAM;AACff,YAAAA,iBAAiB,CAACI,OAAlB,CAA0BY,KAA1B;AACD,WAFS,EAEP,GAFO,CAAV;AAGD;AACF,OAPD;;AAQAjB,MAAAA,SAAS,CAACK,OAAV,CAAkBa,WAAlB,GAAgC,YAAM;AACpC,YAAIf,OAAO,CAACE,OAAZ,EAAqB;AACnBF,UAAAA,OAAO,CAACE,OAAR,CAAgBY,KAAhB;AACD;AACF,OAJD;AAKD;AACF,GAhBD,EAgBG,CAACjB,SAAD,CAhBH;AAkBAmB,EAAAA,eAAe,CAAC,YAAM;AACpB,QAAI1B,MAAM,KAAKY,OAAX,IAAsBZ,MAA1B,EAAkCe,cAAc,CAAC,IAAD,CAAd,CAAlC,KACKA,cAAc,CAAC,KAAD,CAAd;AACN,GAHc,EAGZ,CAACf,MAAD,EAASY,OAAT,CAHY,CAAf;AAKA,MAAMe,UAAU,GAAGC,WAAW,CAAC,YAAM;AACnCT,IAAAA,gBAAgB,CAACF,SAAD,CAAhB;AACD,GAF6B,EAE5B,EAF4B,CAA9B;AAGA,MAAMY,eAAe,GAAGD,WAAW,CAAC,UAACE,CAAD,EAA4B;AAC9D,QAAIA,CAAC,CAACC,GAAF,KAAU,OAAV,IAAqBD,CAAC,CAACC,GAAF,KAAU,GAAnC,EAAwC;AACtCD,MAAAA,CAAC,CAACE,cAAF;AACA,UAAItB,OAAO,CAACE,OAAZ,EAAqBF,OAAO,CAACE,OAAR,CAAgBqB,KAAhB;AACtB;AACF,GALkC,EAKhC,EALgC,CAAnC;AAOA,MAAI,CAACnB,WAAD,IAAgB,CAACd,MAArB,EAA6B,OAAO,IAAP;AAE7B,sBACE,oBAAC,qBAAD;AACE,IAAA,IAAI,EAAED,IADR;AAEE,IAAA,MAAM,EAAEC,MAFV;AAGE,IAAA,WAAW,EAAEc,WAHf;AAIE,IAAA,cAAc,EAAE;AAAA,aAAMD,UAAU,CAACb,MAAD,CAAhB;AAAA,KAJlB;AAKE,IAAA,MAAM,EAAEgB,MALV;AAME,mBAAY;AANd,KAOMV,cAPN,gBASE,oBAAC,oBAAD;AACE,IAAA,IAAI,EAAEP,IADR;AAEE,IAAA,MAAM,EAAEC,MAFV;AAGE,IAAA,GAAG,EAAEQ,iBAHP;AAIE,IAAA,WAAW,EAAEM,WAJf;AAKE,mBAAY,WALd;AAME,IAAA,IAAI,EAAC,OANP;AAOE,IAAA,QAAQ,EAAEI,aAPZ;AAQE,IAAA,MAAM,EAAES;AARV,kBAUE,oBAAC,mBAAD;AAAqB,mBAAY;AAAjC,KAAmDO,KAAK,CAACnC,IAAD,CAAxD,CAVF,eAWE,oBAAC,WAAD,QAAcG,KAAd,CAXF,eAYE,oBAAC,cAAD,qBACE,kCAAOC,IAAP,CADF,EAEGC,UAAU,iBACT,oBAAC,gBAAD;AACE,mBAAY,uBADd;AAEE,IAAA,OAAO,EAAEA,UAAU,CAAC+B,OAFtB;AAGE,IAAA,IAAI,EAAE/B,UAAU,CAACgC,IAHnB;AAIE,IAAA,GAAG,EAAE1B,OAJP;AAKE,IAAA,SAAS,EAAEmB,eALb;AAME,IAAA,QAAQ,EAAE,CANZ;AAOE,IAAA,WAAW,EAAE1B;AAPf,KASGC,UAAU,CAACF,KATd,CAHJ,CAZF,EA6BGG,eAAe,gBACd,oBAAC,iBAAD;AACE,mBAAY,wBADd;AAEE,IAAA,UAAU,EAAC,WAFb;AAGE,IAAA,OAAO,EAAEJ,OAHX;AAIE,kBAAW,YAJb;AAKE,IAAA,IAAI,eAAE,oBAAC,MAAD;AAAQ,MAAA,KAAK,EAAC,MAAd;AAAqB,MAAA,MAAM,EAAC;AAA5B;AALR,IADc,gBASd,iCAtCJ,CATF,CADF;AAqDD;;AAEDH,QAAQ,CAACuC,YAAT,GAAwBA,YAAxB;AACAvC,QAAQ,CAACwC,SAAT,GAAqBA,SAArB;IACMC,kBAAkB,GAAGC,QAAQ,CAAC1C,QAAD;AACnCyC,kBAAkB,CAACD,SAAnB,GAA+BA,SAA/B;;;;"}

package/esm/propTypes.js

@@ -13,7 +13,8 @@ var propTypes = {
     label: PropTypes.string,
     onClick: PropTypes.func,
     href: PropTypes.string
-  }).description('Properties of the ActionLink component').defaultValue({})
+  }).description('Properties of the ActionLink component').defaultValue({}),
+  actionRef: PropTypes.object.description("\n      Reference to use actions:\n      - focusOnLink: function to focus the banner\n      - focusOnWrapper: function to focus the link\n    ").defaultValue({})
 };
 
 export { propTypes };

package/esm/propTypes.js.map

@@ -1 +1 @@
-{"version":3,"file":"propTypes.js","sources":["../../src/propTypes.tsx"],"sourcesContent":["import { PropTypes } from 'react-desc';\nimport { BANNER_TYPES } from './utils/bannerTypes';\n\nexport const propTypes = {\n  containerProps: PropTypes.object.description('Set of Properties attached to the main container').defaultValue({}),\n  label: PropTypes.string.description('banner s label').defaultValue(''),\n  body: PropTypes.string.description('banner s body content').defaultValue(''),\n  type: PropTypes.oneOf(Object.values(BANNER_TYPES)).description('banner s type').defaultValue(BANNER_TYPES.INFO),\n  onClose: PropTypes.func.description('function executed 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  actionLink: PropTypes.shape({\n    label: PropTypes.string,\n    onClick: PropTypes.func,\n    href: PropTypes.string,\n  })\n    .description('Properties of the ActionLink component')\n    .defaultValue({}),\n};\n"],"names":["propTypes","containerProps","PropTypes","object","description","defaultValue","label","string","body","type","oneOf","Object","values","BANNER_TYPES","INFO","onClose","func","isOpen","bool","showCloseButton","actionLink","shape","onClick","href"],"mappings":";;;IAGaA,SAAS,GAAG;AACvBC,EAAAA,cAAc,EAAEC,SAAS,CAACC,MAAV,CAAiBC,WAAjB,CAA6B,kDAA7B,EAAiFC,YAAjF,CAA8F,EAA9F,CADO;AAEvBC,EAAAA,KAAK,EAAEJ,SAAS,CAACK,MAAV,CAAiBH,WAAjB,CAA6B,gBAA7B,EAA+CC,YAA/C,CAA4D,EAA5D,CAFgB;AAGvBG,EAAAA,IAAI,EAAEN,SAAS,CAACK,MAAV,CAAiBH,WAAjB,CAA6B,uBAA7B,EAAsDC,YAAtD,CAAmE,EAAnE,CAHiB;AAIvBI,EAAAA,IAAI,EAAEP,SAAS,CAACQ,KAAV,CAAgBC,MAAM,CAACC,MAAP,CAAcC,YAAd,CAAhB,EAA6CT,WAA7C,CAAyD,eAAzD,EAA0EC,YAA1E,CAAuFQ,YAAY,CAACC,IAApG,CAJiB;AAKvBC,EAAAA,OAAO,EAAEb,SAAS,CAACc,IAAV,CAAeZ,WAAf,CAA2B,0CAA3B,CALc;AAMvBa,EAAAA,MAAM,EAAEf,SAAS,CAACgB,IAAV,CAAed,WAAf,CAA2B,sCAA3B,EAAmEC,YAAnE,CAAgF,IAAhF,CANe;AAOvBc,EAAAA,eAAe,EAAEjB,SAAS,CAACgB,IAAV,CAAed,WAAf,CAA2B,qCAA3B,EAAkEC,YAAlE,CAA+E,IAA/E,CAPM;AAQvBe,EAAAA,UAAU,EAAElB,SAAS,CAACmB,KAAV,CAAgB;AAC1Bf,IAAAA,KAAK,EAAEJ,SAAS,CAACK,MADS;AAE1Be,IAAAA,OAAO,EAAEpB,SAAS,CAACc,IAFO;AAG1BO,IAAAA,IAAI,EAAErB,SAAS,CAACK;AAHU,GAAhB,EAKTH,WALS,CAKG,wCALH,EAMTC,YANS,CAMI,EANJ;AARW;;;;"}
+{"version":3,"file":"propTypes.js","sources":["../../src/propTypes.tsx"],"sourcesContent":["import { PropTypes } from 'react-desc';\nimport { BANNER_TYPES } from './utils/bannerTypes';\n\nexport const propTypes = {\n  containerProps: PropTypes.object.description('Set of Properties attached to the main container').defaultValue({}),\n  label: PropTypes.string.description('banner s label').defaultValue(''),\n  body: PropTypes.string.description('banner s body content').defaultValue(''),\n  type: PropTypes.oneOf(Object.values(BANNER_TYPES)).description('banner s type').defaultValue(BANNER_TYPES.INFO),\n  onClose: PropTypes.func.description('function executed 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  actionLink: PropTypes.shape({\n    label: PropTypes.string,\n    onClick: PropTypes.func,\n    href: PropTypes.string,\n  })\n    .description('Properties of the ActionLink component')\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"],"names":["propTypes","containerProps","PropTypes","object","description","defaultValue","label","string","body","type","oneOf","Object","values","BANNER_TYPES","INFO","onClose","func","isOpen","bool","showCloseButton","actionLink","shape","onClick","href","actionRef"],"mappings":";;;IAGaA,SAAS,GAAG;AACvBC,EAAAA,cAAc,EAAEC,SAAS,CAACC,MAAV,CAAiBC,WAAjB,CAA6B,kDAA7B,EAAiFC,YAAjF,CAA8F,EAA9F,CADO;AAEvBC,EAAAA,KAAK,EAAEJ,SAAS,CAACK,MAAV,CAAiBH,WAAjB,CAA6B,gBAA7B,EAA+CC,YAA/C,CAA4D,EAA5D,CAFgB;AAGvBG,EAAAA,IAAI,EAAEN,SAAS,CAACK,MAAV,CAAiBH,WAAjB,CAA6B,uBAA7B,EAAsDC,YAAtD,CAAmE,EAAnE,CAHiB;AAIvBI,EAAAA,IAAI,EAAEP,SAAS,CAACQ,KAAV,CAAgBC,MAAM,CAACC,MAAP,CAAcC,YAAd,CAAhB,EAA6CT,WAA7C,CAAyD,eAAzD,EAA0EC,YAA1E,CAAuFQ,YAAY,CAACC,IAApG,CAJiB;AAKvBC,EAAAA,OAAO,EAAEb,SAAS,CAACc,IAAV,CAAeZ,WAAf,CAA2B,0CAA3B,CALc;AAMvBa,EAAAA,MAAM,EAAEf,SAAS,CAACgB,IAAV,CAAed,WAAf,CAA2B,sCAA3B,EAAmEC,YAAnE,CAAgF,IAAhF,CANe;AAOvBc,EAAAA,eAAe,EAAEjB,SAAS,CAACgB,IAAV,CAAed,WAAf,CAA2B,qCAA3B,EAAkEC,YAAlE,CAA+E,IAA/E,CAPM;AAQvBe,EAAAA,UAAU,EAAElB,SAAS,CAACmB,KAAV,CAAgB;AAC1Bf,IAAAA,KAAK,EAAEJ,SAAS,CAACK,MADS;AAE1Be,IAAAA,OAAO,EAAEpB,SAAS,CAACc,IAFO;AAG1BO,IAAAA,IAAI,EAAErB,SAAS,CAACK;AAHU,GAAhB,EAKTH,WALS,CAKG,wCALH,EAMTC,YANS,CAMI,EANJ,CARW;AAevBmB,EAAAA,SAAS,EAAEtB,SAAS,CAACC,MAAV,CACRC,WADQ,mJAQRC,YARQ,CAQK,EARL;AAfY;;;;"}

package/esm/styles.js

@@ -18,7 +18,7 @@ var StyledBannerContainer = /*#__PURE__*/styled.div.withConfig({
 });
 var StyledInnerContainer = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-ffu2hq-1"
-})(["padding-right:6px;display:flex;align-items:center;min-height:41px;width:100%;background-color:", ";border-bottom:5px solid ", ";", ";"], function (_ref3) {
+})(["padding-right:6px;display:grid;align-items:center;min-height:41px;width:100%;background-color:", ";border-bottom:5px solid ", ";", ";&:focus{position:relative;&:after{content:'';display:block;position:absolute;top:0;left:0;pointer-events:none;border-radius:2px;width:calc(100%);border:2px solid #1e79c2;height:calc(100% + 4px);}}grid-template-columns:auto 1fr auto auto;"], function (_ref3) {
   var theme = _ref3.theme;
   return theme.colors.neutral['000'];
 }, function (_ref4) {
@@ -41,7 +41,7 @@ var StyledIconContainer = /*#__PURE__*/styled.div.withConfig({
 });
 var StyledTitle = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-ffu2hq-3"
-})(["color:", ";font-size:", ";font-weight:", ";white-space:nowrap;"], function (_ref8) {
+})(["color:", ";font-size:", ";font-weight:", ";"], function (_ref8) {
   var theme = _ref8.theme;
   return theme.colors.neutral[700];
 }, function (_ref9) {
@@ -83,7 +83,7 @@ var StyledCloseButton = /*#__PURE__*/styled(DSButton).withConfig({
   componentId: "sc-ffu2hq-6"
 })(["margin-left:", ";&:not(focus){border:transparent;}"], function (_ref18) {
   var theme = _ref18.theme;
-  return theme.space.s;
+  return theme.space.xxs;
 });
 
 export { StyledActionLink, StyledBannerContainer, StyledCloseButton, StyledIconContainer, StyledInnerContainer, StyledSubTitle, StyledTitle };

package/esm/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sources":["../../src/styles.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport DSButton from '@elliemae/ds-button';\nimport type { StyledActionLinkT, StyledBannerContainerT, StyledInnerContainerT } from './index.d';\nimport { handleAnimation, handleBorderColor } from './utils/styleHelpers';\n\nexport const StyledBannerContainer = styled.div<StyledBannerContainerT>`\n  overflow: hidden;\n  height: ${({ isOpen }) => (isOpen ? 'auto' : '0px')};\n  ${({ isAnimating, isOpen, height }) => handleAnimation(isAnimating, isOpen, height)};\n`;\n\nexport const StyledInnerContainer = styled.div<StyledInnerContainerT>`\n  padding-right: 6px;\n  display: flex;\n  align-items: center;\n  min-height: 41px;\n  width: 100%;\n  background-color: ${({ theme }) => theme.colors.neutral['000']};\n  border-bottom: 5px solid ${({ type, theme }) => handleBorderColor(type, theme)};\n  ${({ isAnimating, isOpen }) => handleAnimation(isAnimating, isOpen)};\n`;\n\nexport const StyledIconContainer = styled.div`\n  margin-right: ${({ theme }) => theme.space.xxs};\n  margin-left: ${({ theme }) => theme.space.xs};\n`;\n\nexport const StyledTitle = styled.div`\n  color: ${({ theme }) => theme.colors.neutral[700]};\n  font-size: ${({ theme }) => theme.fontSizes.label[400]};\n  font-weight: ${({ theme }) => theme.fontWeights.semibold};\n  white-space: nowrap;\n`;\n\nexport const StyledSubTitle = styled.div`\n  width: 100%;\n  margin-left: ${({ theme }) => theme.space.xs};\n  font-size: ${({ theme }) => theme.fontSizes.subTitle[400]};\n  font-weight: ${({ theme }) => theme.fontWeights.regular};\n`;\n\nexport const StyledActionLink = styled.a<StyledActionLinkT>`\n  margin-left: ${({ theme, isBodyEmpty }) => (isBodyEmpty ? theme.space.xs : 0)};\n  white-space: nowrap;\n  text-decoration: none;\n  line-height: 1.1;\n  font-size: ${({ theme }) => theme.fontSizes.hyperlink[400]};\n  font-weight: ${({ theme }) => theme.fontWeights.regular};\n  color: ${({ theme }) => theme.colors.brand[600]};\n`;\n\nexport const StyledCloseButton = styled(DSButton)`\n  margin-left: ${({ theme }) => theme.space.s};\n  &:not(focus) {\n    border: transparent;\n  }\n`;\n"],"names":["StyledBannerContainer","styled","div","isOpen","isAnimating","height","handleAnimation","StyledInnerContainer","theme","colors","neutral","type","handleBorderColor","StyledIconContainer","space","xxs","xs","StyledTitle","fontSizes","label","fontWeights","semibold","StyledSubTitle","subTitle","regular","StyledActionLink","a","isBodyEmpty","hyperlink","brand","StyledCloseButton","DSButton","s"],"mappings":"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"}
+{"version":3,"file":"styles.js","sources":["../../src/styles.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport DSButton from '@elliemae/ds-button';\nimport type { StyledActionLinkT, StyledBannerContainerT, StyledInnerContainerT } from './index.d';\nimport { handleAnimation, handleBorderColor } from './utils/styleHelpers';\n\nexport const StyledBannerContainer = styled.div<StyledBannerContainerT>`\n  overflow: hidden;\n  height: ${({ isOpen }) => (isOpen ? 'auto' : '0px')};\n  ${({ isAnimating, isOpen, height }) => handleAnimation(isAnimating, isOpen, height)};\n`;\n\nexport const StyledInnerContainer = styled.div<StyledInnerContainerT>`\n  padding-right: 6px;\n  display: grid;\n  align-items: center;\n  min-height: 41px;\n  width: 100%;\n  background-color: ${({ theme }) => theme.colors.neutral['000']};\n  border-bottom: 5px solid ${({ type, theme }) => handleBorderColor(type, theme)};\n  ${({ isAnimating, isOpen }) => handleAnimation(isAnimating, isOpen)};\n  &:focus {\n    position: relative;\n    &:after {\n      content: '';\n      display: block;\n      position: absolute;\n      top: 0;\n      left: 0;\n      pointer-events: none;\n      border-radius: 2px;\n      width: calc(100%);\n      border: 2px solid #1e79c2;\n      height: calc(100% + 4px);\n    }\n  }\n  grid-template-columns: auto 1fr auto auto;\n`;\n\nexport const StyledIconContainer = styled.div`\n  margin-right: ${({ theme }) => theme.space.xxs};\n  margin-left: ${({ theme }) => theme.space.xs};\n`;\n\nexport const StyledTitle = styled.div`\n  color: ${({ theme }) => theme.colors.neutral[700]};\n  font-size: ${({ theme }) => theme.fontSizes.label[400]};\n  font-weight: ${({ theme }) => theme.fontWeights.semibold};\n`;\n\nexport const StyledSubTitle = styled.div`\n  width: 100%;\n  margin-left: ${({ theme }) => theme.space.xs};\n  font-size: ${({ theme }) => theme.fontSizes.subTitle[400]};\n  font-weight: ${({ theme }) => theme.fontWeights.regular};\n`;\n\nexport const StyledActionLink = styled.a<StyledActionLinkT>`\n  margin-left: ${({ theme, isBodyEmpty }) => (isBodyEmpty ? theme.space.xs : 0)};\n  white-space: nowrap;\n  text-decoration: none;\n  line-height: 1.1;\n  font-size: ${({ theme }) => theme.fontSizes.hyperlink[400]};\n  font-weight: ${({ theme }) => theme.fontWeights.regular};\n  color: ${({ theme }) => theme.colors.brand[600]};\n`;\n\nexport const StyledCloseButton = styled(DSButton)`\n  margin-left: ${({ theme }) => theme.space.xxs};\n  &:not(focus) {\n    border: transparent;\n  }\n`;\n"],"names":["StyledBannerContainer","styled","div","isOpen","isAnimating","height","handleAnimation","StyledInnerContainer","theme","colors","neutral","type","handleBorderColor","StyledIconContainer","space","xxs","xs","StyledTitle","fontSizes","label","fontWeights","semibold","StyledSubTitle","subTitle","regular","StyledActionLink","a","isBodyEmpty","hyperlink","brand","StyledCloseButton","DSButton"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-banner",
-  "version": "1.57.2",
+  "version": "1.58.0-rc.2",
   "license": "MIT",
   "description": "Ellie Mae - Dim Sum - Banner",
   "module": "esm/index.js",
@@ -16,9 +16,9 @@
     "build": "node ../../scripts/build/build.js"
   },
   "dependencies": {
-    "@elliemae/ds-basic": "1.57.2",
-    "@elliemae/ds-icons": "1.57.2",
-    "@elliemae/ds-system": "1.57.2",
+    "@elliemae/ds-basic": "1.58.0-rc.2",
+    "@elliemae/ds-icons": "1.58.0-rc.2",
+    "@elliemae/ds-system": "1.58.0-rc.2",
     "react-desc": "^4.1.2"
   },
   "devDependencies": {