@elliemae/ds-banner 3.80.0-next.35 → 3.80.0-next.36
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/DSBanner.js +7 -30
- package/dist/cjs/DSBanner.js.map +3 -3
- package/dist/cjs/LiveRegionCorrectlyImplemented.js +67 -0
- package/dist/cjs/LiveRegionCorrectlyImplemented.js.map +7 -0
- package/dist/esm/DSBanner.js +6 -35
- package/dist/esm/DSBanner.js.map +2 -2
- package/dist/esm/LiveRegionCorrectlyImplemented.js +37 -0
- package/dist/esm/LiveRegionCorrectlyImplemented.js.map +7 -0
- package/dist/types/LiveRegionCorrectlyImplemented.d.ts +11 -0
- package/package.json +10 -10
package/dist/cjs/DSBanner.js
CHANGED
|
@@ -38,9 +38,9 @@ var import_jsx_runtime = require("react/jsx-runtime");
|
|
|
38
38
|
var import_ds_icons = require("@elliemae/ds-icons");
|
|
39
39
|
var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
|
|
40
40
|
var import_react = __toESM(require("react"));
|
|
41
|
-
var import_react_dom = __toESM(require("react-dom"));
|
|
42
41
|
var import_ds_system = require("@elliemae/ds-system");
|
|
43
42
|
var import_DSBannerContent = require("./DSBannerContent.js");
|
|
43
|
+
var import_LiveRegionCorrectlyImplemented = require("./LiveRegionCorrectlyImplemented.js");
|
|
44
44
|
var import_constants = require("./constants/index.js");
|
|
45
45
|
var import_usePageNotice = require("./usePageNotice.js");
|
|
46
46
|
var import_react_desc_prop_types = require("./react-desc-prop-types.js");
|
|
@@ -48,32 +48,7 @@ var import_styles = require("./styles.js");
|
|
|
48
48
|
const outOfTheBoxCols = ["auto", "1fr"];
|
|
49
49
|
const outOfTheBoxColsSmallLayout = ["auto", "1fr"];
|
|
50
50
|
const colsWithCustomBody = ["1fr", "auto"];
|
|
51
|
-
const typeMap = {
|
|
52
|
-
alert: void 0,
|
|
53
|
-
polite: "polite",
|
|
54
|
-
assertive: "assertive",
|
|
55
|
-
none: "off"
|
|
56
|
-
};
|
|
57
51
|
const getIsLiveRegion = (type) => type === "polite" || type === "assertive";
|
|
58
|
-
const LiveRegionCorrectlyImplemented = ({
|
|
59
|
-
id,
|
|
60
|
-
innerRef,
|
|
61
|
-
announcementType,
|
|
62
|
-
ownerPropsConfig
|
|
63
|
-
}) => import_react_dom.default.createPortal(
|
|
64
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
65
|
-
import_styles.StyledLiveRegionPortal,
|
|
66
|
-
{
|
|
67
|
-
id,
|
|
68
|
-
innerRef,
|
|
69
|
-
"aria-atomic": "true",
|
|
70
|
-
"aria-live": typeMap[announcementType],
|
|
71
|
-
"data-testid": import_constants.DSBannerDatatestid.LIVE_REGION_PORTAL,
|
|
72
|
-
...ownerPropsConfig
|
|
73
|
-
}
|
|
74
|
-
),
|
|
75
|
-
document.body
|
|
76
|
-
);
|
|
77
52
|
const DSBanner = (props) => {
|
|
78
53
|
const propsWithDefaults = (0, import_ds_props_helpers.useMemoMergePropsWithDefault)(props, import_react_desc_prop_types.defaultProps);
|
|
79
54
|
const {
|
|
@@ -142,12 +117,13 @@ const DSBanner = (props) => {
|
|
|
142
117
|
}, [isOpen, withLiveRegionAnnouncement, read]);
|
|
143
118
|
if (!isOpen)
|
|
144
119
|
return getIsLiveRegion(withLiveRegionAnnouncement) ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
145
|
-
LiveRegionCorrectlyImplemented,
|
|
120
|
+
import_LiveRegionCorrectlyImplemented.LiveRegionCorrectlyImplemented,
|
|
146
121
|
{
|
|
147
122
|
id: `${baseId}-live-region`,
|
|
148
123
|
innerRef: liveRegionRef,
|
|
149
124
|
announcementType: withLiveRegionAnnouncement,
|
|
150
|
-
ownerPropsConfig
|
|
125
|
+
ownerPropsConfig,
|
|
126
|
+
globalAttrs
|
|
151
127
|
}
|
|
152
128
|
) : null;
|
|
153
129
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
@@ -192,12 +168,13 @@ const DSBanner = (props) => {
|
|
|
192
168
|
) : null
|
|
193
169
|
] }),
|
|
194
170
|
getIsLiveRegion(withLiveRegionAnnouncement) ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
195
|
-
LiveRegionCorrectlyImplemented,
|
|
171
|
+
import_LiveRegionCorrectlyImplemented.LiveRegionCorrectlyImplemented,
|
|
196
172
|
{
|
|
197
173
|
id: `${baseId}-live-region`,
|
|
198
174
|
innerRef: liveRegionRef,
|
|
199
175
|
announcementType: withLiveRegionAnnouncement,
|
|
200
|
-
ownerPropsConfig
|
|
176
|
+
ownerPropsConfig,
|
|
177
|
+
globalAttrs
|
|
201
178
|
}
|
|
202
179
|
) : null
|
|
203
180
|
]
|
package/dist/cjs/DSBanner.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/DSBanner.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { CloseX } from '@elliemae/ds-icons';\nimport {\n describe,\n useGetGlobalAttributes,\n useGetXstyledProps,\n useMemoMergePropsWithDefault,\n useOwnerProps,\n} from '@elliemae/ds-props-helpers';\nimport React, { useCallback, useEffect, useMemo } from 'react';\nimport
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
6
|
-
"names": ["
|
|
4
|
+
"sourcesContent": ["import { CloseX } from '@elliemae/ds-icons';\nimport {\n describe,\n useGetGlobalAttributes,\n useGetXstyledProps,\n useMemoMergePropsWithDefault,\n useOwnerProps,\n} from '@elliemae/ds-props-helpers';\nimport React, { useCallback, useEffect, useMemo } from 'react';\nimport { useGetLayoutMode } from '@elliemae/ds-system';\nimport { DSBannerContent } from './DSBannerContent.js';\nimport { LiveRegionCorrectlyImplemented } from './LiveRegionCorrectlyImplemented.js';\nimport { DSBannerDatatestid, DSBannerName } from './constants/index.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 = 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 { 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 // 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={`${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 {...pageNoticeNameProps}\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={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 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", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __create = Object.create;
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
12
|
+
var __copyProps = (to, from, except, desc) => {
|
|
13
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(from))
|
|
15
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
16
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
17
|
+
}
|
|
18
|
+
return to;
|
|
19
|
+
};
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
25
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
26
|
+
mod
|
|
27
|
+
));
|
|
28
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
|
+
var LiveRegionCorrectlyImplemented_exports = {};
|
|
30
|
+
__export(LiveRegionCorrectlyImplemented_exports, {
|
|
31
|
+
LiveRegionCorrectlyImplemented: () => LiveRegionCorrectlyImplemented
|
|
32
|
+
});
|
|
33
|
+
module.exports = __toCommonJS(LiveRegionCorrectlyImplemented_exports);
|
|
34
|
+
var React = __toESM(require("react"));
|
|
35
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
36
|
+
var import_react_dom = __toESM(require("react-dom"));
|
|
37
|
+
var import_constants = require("./constants/index.js");
|
|
38
|
+
var import_styles = require("./styles.js");
|
|
39
|
+
const typeMap = {
|
|
40
|
+
alert: void 0,
|
|
41
|
+
polite: "polite",
|
|
42
|
+
assertive: "assertive",
|
|
43
|
+
none: "off"
|
|
44
|
+
};
|
|
45
|
+
const LiveRegionCorrectlyImplemented = ({
|
|
46
|
+
id,
|
|
47
|
+
innerRef,
|
|
48
|
+
announcementType,
|
|
49
|
+
ownerPropsConfig,
|
|
50
|
+
globalAttrs: { lang, dir }
|
|
51
|
+
}) => import_react_dom.default.createPortal(
|
|
52
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
53
|
+
import_styles.StyledLiveRegionPortal,
|
|
54
|
+
{
|
|
55
|
+
lang,
|
|
56
|
+
dir,
|
|
57
|
+
id,
|
|
58
|
+
innerRef,
|
|
59
|
+
"aria-atomic": "true",
|
|
60
|
+
"aria-live": typeMap[announcementType],
|
|
61
|
+
"data-testid": import_constants.DSBannerDatatestid.LIVE_REGION_PORTAL,
|
|
62
|
+
...ownerPropsConfig
|
|
63
|
+
}
|
|
64
|
+
),
|
|
65
|
+
document.body
|
|
66
|
+
);
|
|
67
|
+
//# sourceMappingURL=LiveRegionCorrectlyImplemented.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/LiveRegionCorrectlyImplemented.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
+
"sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD0BnB;AAzBJ,uBAAqB;AACrB,uBAAmC;AACnC,oBAAuC;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,iBAAAA,QAAS;AAAA,EACP;AAAA,IAAC;AAAA;AAAA,MAGC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,eAAY;AAAA,MAGZ,aAAW,QAAQ,gBAAgB;AAAA,MACnC,eAAa,oCAAmB;AAAA,MAC/B,GAAG;AAAA;AAAA,EACN;AAAA,EACA,SAAS;AACX;",
|
|
6
|
+
"names": ["ReactDOM"]
|
|
7
|
+
}
|
package/dist/esm/DSBanner.js
CHANGED
|
@@ -9,48 +9,17 @@ import {
|
|
|
9
9
|
useOwnerProps
|
|
10
10
|
} from "@elliemae/ds-props-helpers";
|
|
11
11
|
import React2, { useCallback, useEffect, useMemo } from "react";
|
|
12
|
-
import ReactDOM from "react-dom";
|
|
13
12
|
import { useGetLayoutMode } from "@elliemae/ds-system";
|
|
14
13
|
import { DSBannerContent } from "./DSBannerContent.js";
|
|
14
|
+
import { LiveRegionCorrectlyImplemented } from "./LiveRegionCorrectlyImplemented.js";
|
|
15
15
|
import { DSBannerDatatestid, DSBannerName } from "./constants/index.js";
|
|
16
16
|
import { usePageNotice } from "./usePageNotice.js";
|
|
17
17
|
import { defaultProps, DSBannerPropTypesSchema } from "./react-desc-prop-types.js";
|
|
18
|
-
import {
|
|
19
|
-
StyledLiveRegionPortal,
|
|
20
|
-
StyledBannerContainer,
|
|
21
|
-
StyledBannerLayout,
|
|
22
|
-
StyledCloseButton,
|
|
23
|
-
StyledInnerContainer
|
|
24
|
-
} from "./styles.js";
|
|
18
|
+
import { StyledBannerContainer, StyledBannerLayout, StyledCloseButton, StyledInnerContainer } from "./styles.js";
|
|
25
19
|
const outOfTheBoxCols = ["auto", "1fr"];
|
|
26
20
|
const outOfTheBoxColsSmallLayout = ["auto", "1fr"];
|
|
27
21
|
const colsWithCustomBody = ["1fr", "auto"];
|
|
28
|
-
const typeMap = {
|
|
29
|
-
alert: void 0,
|
|
30
|
-
polite: "polite",
|
|
31
|
-
assertive: "assertive",
|
|
32
|
-
none: "off"
|
|
33
|
-
};
|
|
34
22
|
const getIsLiveRegion = (type) => type === "polite" || type === "assertive";
|
|
35
|
-
const LiveRegionCorrectlyImplemented = ({
|
|
36
|
-
id,
|
|
37
|
-
innerRef,
|
|
38
|
-
announcementType,
|
|
39
|
-
ownerPropsConfig
|
|
40
|
-
}) => ReactDOM.createPortal(
|
|
41
|
-
/* @__PURE__ */ jsx(
|
|
42
|
-
StyledLiveRegionPortal,
|
|
43
|
-
{
|
|
44
|
-
id,
|
|
45
|
-
innerRef,
|
|
46
|
-
"aria-atomic": "true",
|
|
47
|
-
"aria-live": typeMap[announcementType],
|
|
48
|
-
"data-testid": DSBannerDatatestid.LIVE_REGION_PORTAL,
|
|
49
|
-
...ownerPropsConfig
|
|
50
|
-
}
|
|
51
|
-
),
|
|
52
|
-
document.body
|
|
53
|
-
);
|
|
54
23
|
const DSBanner = (props) => {
|
|
55
24
|
const propsWithDefaults = useMemoMergePropsWithDefault(props, defaultProps);
|
|
56
25
|
const {
|
|
@@ -124,7 +93,8 @@ const DSBanner = (props) => {
|
|
|
124
93
|
id: `${baseId}-live-region`,
|
|
125
94
|
innerRef: liveRegionRef,
|
|
126
95
|
announcementType: withLiveRegionAnnouncement,
|
|
127
|
-
ownerPropsConfig
|
|
96
|
+
ownerPropsConfig,
|
|
97
|
+
globalAttrs
|
|
128
98
|
}
|
|
129
99
|
) : null;
|
|
130
100
|
return /* @__PURE__ */ jsxs(
|
|
@@ -174,7 +144,8 @@ const DSBanner = (props) => {
|
|
|
174
144
|
id: `${baseId}-live-region`,
|
|
175
145
|
innerRef: liveRegionRef,
|
|
176
146
|
announcementType: withLiveRegionAnnouncement,
|
|
177
|
-
ownerPropsConfig
|
|
147
|
+
ownerPropsConfig,
|
|
148
|
+
globalAttrs
|
|
178
149
|
}
|
|
179
150
|
) : null
|
|
180
151
|
]
|
package/dist/esm/DSBanner.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/DSBanner.tsx"],
|
|
4
|
-
"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
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"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 { 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 = 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 { 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 // 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={`${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 {...pageNoticeNameProps}\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={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 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"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { jsx } from "react/jsx-runtime";
|
|
3
|
+
import ReactDOM from "react-dom";
|
|
4
|
+
import { DSBannerDatatestid } from "./constants/index.js";
|
|
5
|
+
import { StyledLiveRegionPortal } from "./styles.js";
|
|
6
|
+
const typeMap = {
|
|
7
|
+
alert: void 0,
|
|
8
|
+
polite: "polite",
|
|
9
|
+
assertive: "assertive",
|
|
10
|
+
none: "off"
|
|
11
|
+
};
|
|
12
|
+
const LiveRegionCorrectlyImplemented = ({
|
|
13
|
+
id,
|
|
14
|
+
innerRef,
|
|
15
|
+
announcementType,
|
|
16
|
+
ownerPropsConfig,
|
|
17
|
+
globalAttrs: { lang, dir }
|
|
18
|
+
}) => ReactDOM.createPortal(
|
|
19
|
+
/* @__PURE__ */ jsx(
|
|
20
|
+
StyledLiveRegionPortal,
|
|
21
|
+
{
|
|
22
|
+
lang,
|
|
23
|
+
dir,
|
|
24
|
+
id,
|
|
25
|
+
innerRef,
|
|
26
|
+
"aria-atomic": "true",
|
|
27
|
+
"aria-live": typeMap[announcementType],
|
|
28
|
+
"data-testid": DSBannerDatatestid.LIVE_REGION_PORTAL,
|
|
29
|
+
...ownerPropsConfig
|
|
30
|
+
}
|
|
31
|
+
),
|
|
32
|
+
document.body
|
|
33
|
+
);
|
|
34
|
+
export {
|
|
35
|
+
LiveRegionCorrectlyImplemented
|
|
36
|
+
};
|
|
37
|
+
//# sourceMappingURL=LiveRegionCorrectlyImplemented.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/LiveRegionCorrectlyImplemented.tsx"],
|
|
4
|
+
"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"],
|
|
5
|
+
"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;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export declare const LiveRegionCorrectlyImplemented: ({ id, innerRef, announcementType, ownerPropsConfig, globalAttrs: { lang, dir }, }: {
|
|
3
|
+
id: string;
|
|
4
|
+
innerRef: React.Ref<HTMLDivElement>;
|
|
5
|
+
announcementType: "alert" | "polite" | "assertive" | "none";
|
|
6
|
+
ownerPropsConfig: Record<string, unknown>;
|
|
7
|
+
globalAttrs: {
|
|
8
|
+
lang?: string;
|
|
9
|
+
dir?: string;
|
|
10
|
+
};
|
|
11
|
+
}) => React.ReactPortal;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-banner",
|
|
3
|
-
"version": "3.80.0-next.
|
|
3
|
+
"version": "3.80.0-next.36",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Banner",
|
|
6
6
|
"files": [
|
|
@@ -36,18 +36,18 @@
|
|
|
36
36
|
"indent": 4
|
|
37
37
|
},
|
|
38
38
|
"dependencies": {
|
|
39
|
-
"@elliemae/ds-button-v2": "3.80.0-next.
|
|
40
|
-
"@elliemae/ds-grid": "3.80.0-next.
|
|
41
|
-
"@elliemae/ds-icons": "3.80.0-next.
|
|
42
|
-
"@elliemae/ds-props-helpers": "3.80.0-next.
|
|
43
|
-
"@elliemae/ds-system": "3.80.0-next.
|
|
44
|
-
"@elliemae/ds-typescript-helpers": "3.80.0-next.
|
|
45
|
-
"@elliemae/ds-typography": "3.80.0-next.
|
|
39
|
+
"@elliemae/ds-button-v2": "3.80.0-next.36",
|
|
40
|
+
"@elliemae/ds-grid": "3.80.0-next.36",
|
|
41
|
+
"@elliemae/ds-icons": "3.80.0-next.36",
|
|
42
|
+
"@elliemae/ds-props-helpers": "3.80.0-next.36",
|
|
43
|
+
"@elliemae/ds-system": "3.80.0-next.36",
|
|
44
|
+
"@elliemae/ds-typescript-helpers": "3.80.0-next.36",
|
|
45
|
+
"@elliemae/ds-typography": "3.80.0-next.36",
|
|
46
46
|
"uid": "^2.0.2"
|
|
47
47
|
},
|
|
48
48
|
"devDependencies": {
|
|
49
|
-
"@elliemae/ds-monorepo-devops": "3.80.0-next.
|
|
50
|
-
"@elliemae/ds-test-utils": "3.80.0-next.
|
|
49
|
+
"@elliemae/ds-monorepo-devops": "3.80.0-next.36",
|
|
50
|
+
"@elliemae/ds-test-utils": "3.80.0-next.36",
|
|
51
51
|
"jest": "^30.0.0",
|
|
52
52
|
"styled-components": "~5.3.11"
|
|
53
53
|
},
|