@elliemae/ds-banner 3.80.0-next.31 → 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 +21 -42
- package/dist/cjs/DSBanner.js.map +3 -3
- package/dist/cjs/DSBannerContent.js +7 -5
- package/dist/cjs/DSBannerContent.js.map +2 -2
- package/dist/cjs/LiveRegionCorrectlyImplemented.js +67 -0
- package/dist/cjs/LiveRegionCorrectlyImplemented.js.map +7 -0
- package/dist/cjs/{exported-related → constants}/index.js +3 -3
- package/dist/cjs/constants/index.js.map +7 -0
- package/dist/cjs/index.js +5 -5
- package/dist/cjs/index.js.map +2 -2
- package/dist/cjs/react-desc-prop-types.js +11 -6
- package/dist/cjs/react-desc-prop-types.js.map +2 -2
- package/dist/cjs/styles.js +23 -23
- package/dist/cjs/styles.js.map +2 -2
- package/dist/cjs/typescript-testing/slot-props.js.map +1 -1
- package/dist/cjs/typescript-testing/typescript-banner-valid.js +2 -1
- package/dist/cjs/typescript-testing/typescript-banner-valid.js.map +2 -2
- package/dist/cjs/usePageNotice.js +53 -0
- package/dist/cjs/usePageNotice.js.map +7 -0
- package/dist/esm/DSBanner.js +16 -43
- package/dist/esm/DSBanner.js.map +2 -2
- package/dist/esm/DSBannerContent.js +5 -3
- package/dist/esm/DSBannerContent.js.map +2 -2
- package/dist/esm/LiveRegionCorrectlyImplemented.js +37 -0
- package/dist/esm/LiveRegionCorrectlyImplemented.js.map +7 -0
- package/dist/esm/constants/index.js.map +7 -0
- package/dist/esm/index.js +1 -1
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/react-desc-prop-types.js +8 -3
- package/dist/esm/react-desc-prop-types.js.map +2 -2
- package/dist/esm/styles.js +2 -2
- package/dist/esm/styles.js.map +1 -1
- package/dist/esm/typescript-testing/slot-props.js.map +1 -1
- package/dist/esm/typescript-testing/typescript-banner-valid.js +2 -1
- package/dist/esm/typescript-testing/typescript-banner-valid.js.map +2 -2
- package/dist/esm/usePageNotice.js +23 -0
- package/dist/esm/usePageNotice.js.map +7 -0
- package/dist/types/DSBannerContent.d.ts +2 -0
- package/dist/types/LiveRegionCorrectlyImplemented.d.ts +11 -0
- package/dist/types/{exported-related → constants}/index.d.ts +6 -0
- package/dist/types/index.d.ts +1 -1
- package/dist/types/react-desc-prop-types.d.ts +2 -1
- package/dist/types/usePageNotice.d.ts +11 -0
- package/package.json +10 -10
- package/dist/cjs/exported-related/index.js.map +0 -7
- package/dist/esm/exported-related/index.js.map +0 -7
- /package/dist/esm/{exported-related → constants}/index.js +0 -0
package/dist/cjs/styles.js
CHANGED
|
@@ -45,10 +45,10 @@ var import_ds_button_v2 = require("@elliemae/ds-button-v2");
|
|
|
45
45
|
var import_ds_grid = require("@elliemae/ds-grid");
|
|
46
46
|
var import_ds_system = require("@elliemae/ds-system");
|
|
47
47
|
var import_ds_typography = require("@elliemae/ds-typography");
|
|
48
|
-
var
|
|
48
|
+
var import_constants = require("./constants/index.js");
|
|
49
49
|
const StyledBannerContainer = (0, import_ds_system.styled)("div", {
|
|
50
|
-
name:
|
|
51
|
-
slot:
|
|
50
|
+
name: import_constants.DSBannerName,
|
|
51
|
+
slot: import_constants.DSBannerSlots.CONTAINER
|
|
52
52
|
})`
|
|
53
53
|
min-height: 59px;
|
|
54
54
|
overflow: hidden;
|
|
@@ -59,8 +59,8 @@ const StyledBannerContainer = (0, import_ds_system.styled)("div", {
|
|
|
59
59
|
${import_ds_system.xStyledCommonProps}
|
|
60
60
|
`;
|
|
61
61
|
const StyledInnerContainer = (0, import_ds_system.styled)(import_ds_grid.Grid, {
|
|
62
|
-
name:
|
|
63
|
-
slot:
|
|
62
|
+
name: import_constants.DSBannerName,
|
|
63
|
+
slot: import_constants.DSBannerSlots.INNER_CONTAINER
|
|
64
64
|
})`
|
|
65
65
|
padding-right: 4px;
|
|
66
66
|
width: 100%;
|
|
@@ -68,21 +68,21 @@ const StyledInnerContainer = (0, import_ds_system.styled)(import_ds_grid.Grid, {
|
|
|
68
68
|
`;
|
|
69
69
|
const handleBorderColor = (type, { colors }) => {
|
|
70
70
|
switch (type) {
|
|
71
|
-
case
|
|
71
|
+
case import_constants.BANNER_TYPES.SUCCESS:
|
|
72
72
|
return colors.success[900];
|
|
73
|
-
case
|
|
73
|
+
case import_constants.BANNER_TYPES.INFO:
|
|
74
74
|
return colors.brand[600];
|
|
75
|
-
case
|
|
75
|
+
case import_constants.BANNER_TYPES.WARNING:
|
|
76
76
|
return colors.warning[900];
|
|
77
|
-
case
|
|
77
|
+
case import_constants.BANNER_TYPES.DANGER:
|
|
78
78
|
return colors.danger[900];
|
|
79
79
|
default:
|
|
80
80
|
return "should_not_happen";
|
|
81
81
|
}
|
|
82
82
|
};
|
|
83
83
|
const StyledBannerLayout = (0, import_ds_system.styled)("div", {
|
|
84
|
-
name:
|
|
85
|
-
slot:
|
|
84
|
+
name: import_constants.DSBannerName,
|
|
85
|
+
slot: import_constants.DSBannerSlots.LAYOUT
|
|
86
86
|
})`
|
|
87
87
|
display: flex;
|
|
88
88
|
width: 100%;
|
|
@@ -96,25 +96,25 @@ const StyledBannerLayout = (0, import_ds_system.styled)("div", {
|
|
|
96
96
|
}
|
|
97
97
|
`;
|
|
98
98
|
const StyledIconContainer = (0, import_ds_system.styled)("div", {
|
|
99
|
-
name:
|
|
100
|
-
slot:
|
|
99
|
+
name: import_constants.DSBannerName,
|
|
100
|
+
slot: import_constants.DSBannerSlots.ICON_CONTAINER
|
|
101
101
|
})`
|
|
102
102
|
padding-top: 8px;
|
|
103
103
|
margin-right: ${({ theme }) => theme.space.xxs};
|
|
104
104
|
margin-left: ${({ theme }) => theme.space.xs};
|
|
105
105
|
min-width: 0px;
|
|
106
106
|
`;
|
|
107
|
-
const StyledBody = (0, import_ds_system.styled)("div", { name:
|
|
107
|
+
const StyledBody = (0, import_ds_system.styled)("div", { name: import_constants.DSBannerName, slot: import_constants.DSBannerSlots.BODY })`
|
|
108
108
|
padding-top: 9px;
|
|
109
109
|
padding-bottom: 9px;
|
|
110
110
|
`;
|
|
111
|
-
const StyledTitle = (0, import_ds_system.styled)(import_ds_typography.DSTypography, { name:
|
|
111
|
+
const StyledTitle = (0, import_ds_system.styled)(import_ds_typography.DSTypography, { name: import_constants.DSBannerName, slot: import_constants.DSBannerSlots.TITLE })`
|
|
112
112
|
color: neutral-700;
|
|
113
113
|
overflow-wrap: break-word;
|
|
114
114
|
white-space: pre-wrap;
|
|
115
115
|
min-width: 0px;
|
|
116
116
|
`;
|
|
117
|
-
const StyledSubTitle = (0, import_ds_system.styled)(import_ds_typography.DSTypography, { name:
|
|
117
|
+
const StyledSubTitle = (0, import_ds_system.styled)(import_ds_typography.DSTypography, { name: import_constants.DSBannerName, slot: import_constants.DSBannerSlots.SUBTITLE })`
|
|
118
118
|
font-weight: ${({ theme }) => theme.fontWeights.regular};
|
|
119
119
|
overflow-wrap: break-word;
|
|
120
120
|
white-space: pre-wrap;
|
|
@@ -129,13 +129,13 @@ const StyledSubTitle = (0, import_ds_system.styled)(import_ds_typography.DSTypog
|
|
|
129
129
|
}}
|
|
130
130
|
`;
|
|
131
131
|
const StyledActionLink = (0, import_ds_system.styled)("a", {
|
|
132
|
-
name:
|
|
133
|
-
slot:
|
|
132
|
+
name: import_constants.DSBannerName,
|
|
133
|
+
slot: import_constants.DSBannerSlots.ACTION_LINK
|
|
134
134
|
})`
|
|
135
135
|
display: inline-block;
|
|
136
136
|
text-decoration: none;
|
|
137
137
|
line-height: inherit;
|
|
138
|
-
|
|
138
|
+
font-size: inherit;
|
|
139
139
|
font-weight: ${({ theme }) => theme.fontWeights.regular};
|
|
140
140
|
color: brand-600;
|
|
141
141
|
min-width: 0px;
|
|
@@ -157,14 +157,14 @@ const StyledActionLink = (0, import_ds_system.styled)("a", {
|
|
|
157
157
|
}
|
|
158
158
|
`;
|
|
159
159
|
const StyledCloseButton = (0, import_ds_system.styled)(import_ds_button_v2.DSButtonV2, {
|
|
160
|
-
name:
|
|
161
|
-
slot:
|
|
160
|
+
name: import_constants.DSBannerName,
|
|
161
|
+
slot: import_constants.DSBannerSlots.CLOSE_BUTTON
|
|
162
162
|
})`
|
|
163
163
|
margin: 5px;
|
|
164
164
|
`;
|
|
165
165
|
const StyledLiveRegionPortal = (0, import_ds_system.styled)("div", {
|
|
166
|
-
name:
|
|
167
|
-
slot:
|
|
166
|
+
name: import_constants.DSBannerName,
|
|
167
|
+
slot: import_constants.DSBannerSlots.LIVE_REGION_PORTAL
|
|
168
168
|
})`
|
|
169
169
|
clip: rect(0 0 0 0);
|
|
170
170
|
position: absolute;
|
package/dist/cjs/styles.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/styles.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { Grid } from '@elliemae/ds-grid';\nimport type { ColorProps, LayoutProps, SizingProps, SpaceProps } from '@elliemae/ds-system';\nimport { styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport { DSTypography } from '@elliemae/ds-typography';\nimport { BANNER_TYPES, DSBannerName, DSBannerSlots } from './
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,0BAA2B;AAC3B,qBAAqB;AAErB,uBAA2C;AAC3C,2BAA6B;AAC7B,
|
|
4
|
+
"sourcesContent": ["import { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { Grid } from '@elliemae/ds-grid';\nimport type { ColorProps, LayoutProps, SizingProps, SpaceProps } from '@elliemae/ds-system';\nimport { styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport { DSTypography } from '@elliemae/ds-typography';\nimport { BANNER_TYPES, DSBannerName, DSBannerSlots } from './constants/index.js';\nimport type { DSBannerT } from './react-desc-prop-types.js';\n\ninterface StyledBannerContainerT extends SizingProps, LayoutProps, SpaceProps, ColorProps {}\nexport const StyledBannerContainer = styled('div', {\n name: DSBannerName,\n slot: DSBannerSlots.CONTAINER,\n})<StyledBannerContainerT>`\n min-height: 59px;\n overflow: hidden;\n transition: all 0.5s ease-in;\n @starting-style {\n max-height: 0px;\n }\n ${xStyledCommonProps}\n`;\n\ninterface StyledInnerContainerT {}\nexport const StyledInnerContainer = styled(Grid, {\n name: DSBannerName,\n slot: DSBannerSlots.INNER_CONTAINER,\n})<StyledInnerContainerT>`\n padding-right: 4px;\n width: 100%;\n min-width: 0;\n`;\n\nconst handleBorderColor = (\n type: DSBannerT.BannerTypesT,\n { colors }: { colors: Record<string, Record<string, string>> },\n): string => {\n switch (type) {\n case BANNER_TYPES.SUCCESS:\n return colors.success[900];\n case BANNER_TYPES.INFO:\n return colors.brand[600];\n case BANNER_TYPES.WARNING:\n return colors.warning[900];\n case BANNER_TYPES.DANGER:\n return colors.danger[900];\n default:\n return 'should_not_happen';\n }\n};\ninterface StyledBannerLayoutT {\n $type: DSBannerT.BannerTypesT;\n}\nexport const StyledBannerLayout = styled('div', {\n name: DSBannerName,\n slot: DSBannerSlots.LAYOUT,\n})<StyledBannerLayoutT>`\n display: flex;\n width: 100%;\n align-items: flex-start;\n justify-content: space-between;\n background-color: neutral-000;\n border-bottom: 5px solid ${({ $type, theme }) => handleBorderColor($type, theme)};\n & > :first-child {\n flex: 1;\n min-width: 0;\n }\n`;\n\nexport const StyledIconContainer = styled('div', {\n name: DSBannerName,\n slot: DSBannerSlots.ICON_CONTAINER,\n})`\n padding-top: 8px;\n margin-right: ${({ theme }) => theme.space.xxs};\n margin-left: ${({ theme }) => theme.space.xs};\n min-width: 0px;\n`;\n\nexport const StyledBody = styled('div', { name: DSBannerName, slot: DSBannerSlots.BODY })`\n padding-top: 9px;\n padding-bottom: 9px;\n`;\n\nexport const StyledTitle = styled(DSTypography, { name: DSBannerName, slot: DSBannerSlots.TITLE })`\n color: neutral-700;\n overflow-wrap: break-word;\n white-space: pre-wrap;\n min-width: 0px;\n`;\n\nexport const StyledSubTitle = styled(DSTypography, { name: DSBannerName, slot: DSBannerSlots.SUBTITLE })`\n font-weight: ${({ theme }) => theme.fontWeights.regular};\n overflow-wrap: break-word;\n white-space: pre-wrap;\n min-width: 0px;\n ${({ theme }) => {\n if (['s', 'xs'].includes(theme.layoutMode!)) {\n return `\n grid-column: 1 / -1;\n `;\n }\n return '';\n }}\n`;\n\ninterface StyledActionLinkT {\n isBodyEmpty: boolean;\n}\nexport const StyledActionLink = styled('a', {\n name: DSBannerName,\n slot: DSBannerSlots.ACTION_LINK,\n})<StyledActionLinkT>`\n display: inline-block;\n text-decoration: none;\n line-height: inherit;\n font-size: inherit;\n font-weight: ${({ theme }) => theme.fontWeights.regular};\n color: brand-600;\n min-width: 0px;\n position: relative;\n &:focus {\n outline: none;\n &:after {\n position: absolute;\n content: '';\n top: -2px;\n left: -2px;\n right: -2px;\n bottom: -2px;\n border-radius: 2px;\n border: 2px solid brand-700;\n box-shadow: 0 0 0 1px brand-700;\n pointer-events: none;\n }\n }\n`;\nexport const StyledCloseButton = styled(DSButtonV2, {\n name: DSBannerName,\n slot: DSBannerSlots.CLOSE_BUTTON,\n})`\n margin: 5px;\n`;\n\nexport const StyledLiveRegionPortal = styled('div', {\n name: DSBannerName,\n slot: DSBannerSlots.LIVE_REGION_PORTAL,\n})`\n clip: rect(0 0 0 0);\n position: absolute;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,0BAA2B;AAC3B,qBAAqB;AAErB,uBAA2C;AAC3C,2BAA6B;AAC7B,uBAA0D;AAInD,MAAM,4BAAwB,yBAAO,OAAO;AAAA,EACjD,MAAM;AAAA,EACN,MAAM,+BAAc;AACtB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOG,mCAAkB;AAAA;AAIf,MAAM,2BAAuB,yBAAO,qBAAM;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM,+BAAc;AACtB,CAAC;AAAA;AAAA;AAAA;AAAA;AAMD,MAAM,oBAAoB,CACxB,MACA,EAAE,OAAO,MACE;AACX,UAAQ,MAAM;AAAA,IACZ,KAAK,8BAAa;AAChB,aAAO,OAAO,QAAQ,GAAG;AAAA,IAC3B,KAAK,8BAAa;AAChB,aAAO,OAAO,MAAM,GAAG;AAAA,IACzB,KAAK,8BAAa;AAChB,aAAO,OAAO,QAAQ,GAAG;AAAA,IAC3B,KAAK,8BAAa;AAChB,aAAO,OAAO,OAAO,GAAG;AAAA,IAC1B;AACE,aAAO;AAAA,EACX;AACF;AAIO,MAAM,yBAAqB,yBAAO,OAAO;AAAA,EAC9C,MAAM;AAAA,EACN,MAAM,+BAAc;AACtB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,6BAM4B,CAAC,EAAE,OAAO,MAAM,MAAM,kBAAkB,OAAO,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAO3E,MAAM,0BAAsB,yBAAO,OAAO;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM,+BAAc;AACtB,CAAC;AAAA;AAAA,kBAEiB,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,GAAG;AAAA,iBAC/B,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,EAAE;AAAA;AAAA;AAIvC,MAAM,iBAAa,yBAAO,OAAO,EAAE,MAAM,+BAAc,MAAM,+BAAc,KAAK,CAAC;AAAA;AAAA;AAAA;AAKjF,MAAM,kBAAc,yBAAO,mCAAc,EAAE,MAAM,+BAAc,MAAM,+BAAc,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAO1F,MAAM,qBAAiB,yBAAO,mCAAc,EAAE,MAAM,+BAAc,MAAM,+BAAc,SAAS,CAAC;AAAA,iBACtF,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,OAAO;AAAA;AAAA;AAAA;AAAA,IAIrD,CAAC,EAAE,MAAM,MAAM;AACf,MAAI,CAAC,KAAK,IAAI,EAAE,SAAS,MAAM,UAAW,GAAG;AAC3C,WAAO;AAAA;AAAA;AAAA,EAGT;AACA,SAAO;AACT,CAAC;AAAA;AAMI,MAAM,uBAAmB,yBAAO,KAAK;AAAA,EAC1C,MAAM;AAAA,EACN,MAAM,+BAAc;AACtB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,iBAKgB,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAoBlD,MAAM,wBAAoB,yBAAO,gCAAY;AAAA,EAClD,MAAM;AAAA,EACN,MAAM,+BAAc;AACtB,CAAC;AAAA;AAAA;AAIM,MAAM,6BAAyB,yBAAO,OAAO;AAAA,EAClD,MAAM;AAAA,EACN,MAAM,+BAAc;AACtB,CAAC;AAAA;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/typescript-testing/slot-props.ts"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\n\nimport type { TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport type { DSBannerName, DSBannerSlots } from '../
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\n\nimport type { TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport type { DSBannerName, DSBannerSlots } from '../constants/index.js';\nimport type { DSBannerT } from '../react-desc-prop-types.js';\n\nconst SlotPropsAsObj: Partial<DSBannerT.Props> = {\n dsBannerContainer: { 'aria-label': 'just a typescript test' },\n dsBannerInnerContainer: { 'aria-label': 'just a typescript test' },\n dsBannerCustomContainer: { 'aria-label': 'just a typescript test' },\n dsBannerBody: { 'aria-label': 'just a typescript test' },\n dsBannerTitle: { 'aria-label': 'just a typescript test' },\n dsBannerSubtitle: { 'aria-label': 'just a typescript test' },\n dsBannerIconContainer: { 'aria-label': 'just a typescript test' },\n dsBannerActionLink: { 'aria-label': 'just a typescript test' },\n dsBannerCloseButton: { 'aria-label': 'just a typescript test' },\n dsBannerLayout: { 'aria-label': 'just a typescript test' },\n dsBannerLiveRegionPortal: { 'aria-label': 'just a typescript test' },\n};\n\nconst SlotPropsAsFunctions: DSBannerT.SlotFunctionArguments = {\n dsBannerContainer: () => ({ 'aria-label': 'just a typescript test' }),\n dsBannerInnerContainer: () => ({ 'aria-label': 'just a typescript test' }),\n dsBannerCustomContainer: () => ({ 'aria-label': 'just a typescript test' }),\n dsBannerBody: () => ({ 'aria-label': 'just a typescript test' }),\n dsBannerTitle: () => ({ 'aria-label': 'just a typescript test' }),\n dsBannerSubtitle: () => ({ 'aria-label': 'just a typescript test' }),\n dsBannerIconContainer: () => ({ 'aria-label': 'just a typescript test' }),\n dsBannerActionLink: () => ({ 'aria-label': 'just a typescript test' }),\n dsBannerCloseButton: () => ({ 'aria-label': 'just a typescript test' }),\n dsBannerLayout: () => ({ 'aria-label': 'just a typescript test' }),\n dsBannerLiveRegionPortal: () => ({ 'aria-label': 'just a typescript test' }),\n};\n\n// Exhaustiveness check \u2014 fails compilation if a slot is missing from SlotFunctionArguments\nconst EnsureAllSlotsExistInSlotFunctionArguments: Required<\n TypescriptHelpersT.PropsForSlots<typeof DSBannerName, typeof DSBannerSlots>\n> = SlotPropsAsFunctions;\n"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA,YAAuB;ACMvB,MAAM,iBAA2C;AAAA,EAC/C,mBAAmB,EAAE,cAAc,yBAAyB;AAAA,EAC5D,wBAAwB,EAAE,cAAc,yBAAyB;AAAA,EACjE,yBAAyB,EAAE,cAAc,yBAAyB;AAAA,EAClE,cAAc,EAAE,cAAc,yBAAyB;AAAA,EACvD,eAAe,EAAE,cAAc,yBAAyB;AAAA,EACxD,kBAAkB,EAAE,cAAc,yBAAyB;AAAA,EAC3D,uBAAuB,EAAE,cAAc,yBAAyB;AAAA,EAChE,oBAAoB,EAAE,cAAc,yBAAyB;AAAA,EAC7D,qBAAqB,EAAE,cAAc,yBAAyB;AAAA,EAC9D,gBAAgB,EAAE,cAAc,yBAAyB;AAAA,EACzD,0BAA0B,EAAE,cAAc,yBAAyB;AACrE;AAEA,MAAM,uBAAwD;AAAA,EAC5D,mBAAmB,OAAO,EAAE,cAAc,yBAAyB;AAAA,EACnE,wBAAwB,OAAO,EAAE,cAAc,yBAAyB;AAAA,EACxE,yBAAyB,OAAO,EAAE,cAAc,yBAAyB;AAAA,EACzE,cAAc,OAAO,EAAE,cAAc,yBAAyB;AAAA,EAC9D,eAAe,OAAO,EAAE,cAAc,yBAAyB;AAAA,EAC/D,kBAAkB,OAAO,EAAE,cAAc,yBAAyB;AAAA,EAClE,uBAAuB,OAAO,EAAE,cAAc,yBAAyB;AAAA,EACvE,oBAAoB,OAAO,EAAE,cAAc,yBAAyB;AAAA,EACpE,qBAAqB,OAAO,EAAE,cAAc,yBAAyB;AAAA,EACrE,gBAAgB,OAAO,EAAE,cAAc,yBAAyB;AAAA,EAChE,0BAA0B,OAAO,EAAE,cAAc,yBAAyB;AAC5E;AAGA,MAAM,6CAEF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -34,7 +34,8 @@ const testOptionalProps = {
|
|
|
34
34
|
},
|
|
35
35
|
CustomBody: () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: "test" }),
|
|
36
36
|
closeBtnRef: () => null,
|
|
37
|
-
actionRef: { current: {} }
|
|
37
|
+
actionRef: { current: {} },
|
|
38
|
+
bannerId: "my-banner"
|
|
38
39
|
};
|
|
39
40
|
const testPartialDefaults = {
|
|
40
41
|
label: "hello"
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/typescript-testing/typescript-banner-valid.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport { DSBanner } from '../index.js';\nimport type { DSBannerT } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSBannerT.Props;\ntype ComponentPropsInternals = DSBannerT.InternalProps;\ntype ComponentPropsDefaultProps = DSBannerT.DefaultProps;\ntype ComponentPropsOptionalProps = DSBannerT.OptionalProps;\ntype ComponentPropsRequiredProps = DSBannerT.RequiredProps;\n\nconst testRequiredProps: ComponentPropsRequiredProps = {};\nconst testOptionalProps: ComponentPropsOptionalProps = {\n actionLink: {\n label: 'test',\n onClick: () => {},\n href: 'test',\n },\n CustomBody: () => <div>test</div>,\n closeBtnRef: () => null,\n actionRef: { current: {} },\n};\n\n// difference Props and InternalProps is that InternalProps has all the default props filled in\n// Props allows for partial defaults\nconst testPartialDefaults: Partial<ComponentPropsDefaultProps> = {\n label: 'hello',\n};\nconst testProps: ComponentPropsForApp = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testPartialDefaults,\n};\nconst testPropsAsSyntax = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testPartialDefaults,\n} as ComponentPropsForApp;\n// InternalProps requires all defaults to be filled in\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {\n containerProps: {},\n label: '',\n body: '',\n type: 'info',\n isOpen: true,\n onClose: () => null,\n showCloseButton: true,\n withLiveRegionAnnouncement: 'alert',\n isPageNotice: false,\n};\nconst testInternalProps: ComponentPropsInternals = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testCompleteDefaults,\n};\nconst testInternalPropsAsSyntax = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testCompleteDefaults,\n} as ComponentPropsInternals;\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\nconst testExplicitDefinition: ComponentPropsForApp = {\n label: '',\n body: '',\n type: 'info',\n isOpen: true,\n withLiveRegionAnnouncement: 'alert',\n isPageNotice: false,\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\nconst testInferedTypeCompatibility = {\n label: '',\n body: '',\n type: 'info',\n isOpen: true,\n withLiveRegionAnnouncement: 'alert',\n isPageNotice: false,\n} as ComponentPropsForApp;\n\nconst testDefinitionAsConst = {\n label: '',\n body: '',\n type: 'info',\n isOpen: true,\n withLiveRegionAnnouncement: 'alert',\n isPageNotice: false,\n} as const;\n\nconst ExampleUsageComponent = () => (\n <>\n {/* works with explicitly casted props, all syntaxes */}\n <DSBanner {...testExplicitDefinition} />\n <DSBanner {...testInferedTypeCompatibility} />\n <DSBanner {...testDefinitionAsConst} />\n {/* works with inline values */}\n <DSBanner label=\"hello\" body=\"body\" type=\"danger\" isOpen />\n </>\n);\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA,YAAuB;ACkBH;AAjBpB,eAAyB;AAUzB,MAAM,oBAAiD,CAAC;AACxD,MAAM,oBAAiD;AAAA,EACrD,YAAY;AAAA,IACV,OAAO;AAAA,IACP,SAAS,MAAM;AAAA,IAAC;AAAA,IAChB,MAAM;AAAA,EACR;AAAA,EACA,YAAY,MAAM,4CAAC,SAAI,kBAAI;AAAA,EAC3B,aAAa,MAAM;AAAA,EACnB,WAAW,EAAE,SAAS,CAAC,EAAE;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport { DSBanner } from '../index.js';\nimport type { DSBannerT } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSBannerT.Props;\ntype ComponentPropsInternals = DSBannerT.InternalProps;\ntype ComponentPropsDefaultProps = DSBannerT.DefaultProps;\ntype ComponentPropsOptionalProps = DSBannerT.OptionalProps;\ntype ComponentPropsRequiredProps = DSBannerT.RequiredProps;\n\nconst testRequiredProps: ComponentPropsRequiredProps = {};\nconst testOptionalProps: ComponentPropsOptionalProps = {\n actionLink: {\n label: 'test',\n onClick: () => {},\n href: 'test',\n },\n CustomBody: () => <div>test</div>,\n closeBtnRef: () => null,\n actionRef: { current: {} },\n bannerId: 'my-banner',\n};\n\n// difference Props and InternalProps is that InternalProps has all the default props filled in\n// Props allows for partial defaults\nconst testPartialDefaults: Partial<ComponentPropsDefaultProps> = {\n label: 'hello',\n};\nconst testProps: ComponentPropsForApp = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testPartialDefaults,\n};\nconst testPropsAsSyntax = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testPartialDefaults,\n} as ComponentPropsForApp;\n// InternalProps requires all defaults to be filled in\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {\n containerProps: {},\n label: '',\n body: '',\n type: 'info',\n isOpen: true,\n onClose: () => null,\n showCloseButton: true,\n withLiveRegionAnnouncement: 'alert',\n isPageNotice: false,\n};\nconst testInternalProps: ComponentPropsInternals = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testCompleteDefaults,\n};\nconst testInternalPropsAsSyntax = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testCompleteDefaults,\n} as ComponentPropsInternals;\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\nconst testExplicitDefinition: ComponentPropsForApp = {\n label: '',\n body: '',\n type: 'info',\n isOpen: true,\n withLiveRegionAnnouncement: 'alert',\n isPageNotice: false,\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\nconst testInferedTypeCompatibility = {\n label: '',\n body: '',\n type: 'info',\n isOpen: true,\n withLiveRegionAnnouncement: 'alert',\n isPageNotice: false,\n} as ComponentPropsForApp;\n\nconst testDefinitionAsConst = {\n label: '',\n body: '',\n type: 'info',\n isOpen: true,\n withLiveRegionAnnouncement: 'alert',\n isPageNotice: false,\n} as const;\n\nconst ExampleUsageComponent = () => (\n <>\n {/* works with explicitly casted props, all syntaxes */}\n <DSBanner {...testExplicitDefinition} />\n <DSBanner {...testInferedTypeCompatibility} />\n <DSBanner {...testDefinitionAsConst} />\n {/* works with inline values */}\n <DSBanner label=\"hello\" body=\"body\" type=\"danger\" isOpen />\n </>\n);\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA,YAAuB;ACkBH;AAjBpB,eAAyB;AAUzB,MAAM,oBAAiD,CAAC;AACxD,MAAM,oBAAiD;AAAA,EACrD,YAAY;AAAA,IACV,OAAO;AAAA,IACP,SAAS,MAAM;AAAA,IAAC;AAAA,IAChB,MAAM;AAAA,EACR;AAAA,EACA,YAAY,MAAM,4CAAC,SAAI,kBAAI;AAAA,EAC3B,aAAa,MAAM;AAAA,EACnB,WAAW,EAAE,SAAS,CAAC,EAAE;AAAA,EACzB,UAAU;AACZ;AAIA,MAAM,sBAA2D;AAAA,EAC/D,OAAO;AACT;AACA,MAAM,YAAkC;AAAA,EACtC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AACA,MAAM,oBAAoB;AAAA,EACxB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEA,MAAM,uBAA6D;AAAA,EACjE,gBAAgB,CAAC;AAAA,EACjB,OAAO;AAAA,EACP,MAAM;AAAA,EACN,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,SAAS,MAAM;AAAA,EACf,iBAAiB;AAAA,EACjB,4BAA4B;AAAA,EAC5B,cAAc;AAChB;AACA,MAAM,oBAA6C;AAAA,EACjD,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AACA,MAAM,4BAA4B;AAAA,EAChC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAGA,MAAM,yBAA+C;AAAA,EACnD,OAAO;AAAA,EACP,MAAM;AAAA,EACN,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,4BAA4B;AAAA,EAC5B,cAAc;AAChB;AAGA,MAAM,+BAA+B;AAAA,EACnC,OAAO;AAAA,EACP,MAAM;AAAA,EACN,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,4BAA4B;AAAA,EAC5B,cAAc;AAChB;AAEA,MAAM,wBAAwB;AAAA,EAC5B,OAAO;AAAA,EACP,MAAM;AAAA,EACN,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,4BAA4B;AAAA,EAC5B,cAAc;AAChB;AAEA,MAAM,wBAAwB,MAC5B,4EAEE;AAAA,8CAAC,qBAAU,GAAG,wBAAwB;AAAA,EACtC,4CAAC,qBAAU,GAAG,8BAA8B;AAAA,EAC5C,4CAAC,qBAAU,GAAG,uBAAuB;AAAA,EAErC,4CAAC,qBAAS,OAAM,SAAQ,MAAK,QAAO,MAAK,UAAS,QAAM,MAAC;AAAA,GAC3D;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -0,0 +1,53 @@
|
|
|
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 usePageNotice_exports = {};
|
|
30
|
+
__export(usePageNotice_exports, {
|
|
31
|
+
usePageNotice: () => usePageNotice
|
|
32
|
+
});
|
|
33
|
+
module.exports = __toCommonJS(usePageNotice_exports);
|
|
34
|
+
var React = __toESM(require("react"));
|
|
35
|
+
var import_react = require("react");
|
|
36
|
+
var import_uid = require("uid");
|
|
37
|
+
const hasName = (attrs) => !!attrs && ("aria-label" in attrs || "aria-labelledby" in attrs);
|
|
38
|
+
const usePageNotice = (propsWithDefaults, originalProps, globalAttrs) => {
|
|
39
|
+
const { isPageNotice, label, CustomBody, containerProps, bannerId } = propsWithDefaults;
|
|
40
|
+
const { dsBannerContainer } = propsWithDefaults;
|
|
41
|
+
const baseId = (0, import_react.useMemo)(() => bannerId ?? `ds-banner-${(0, import_uid.uid)(5)}`, [bannerId]);
|
|
42
|
+
const titleId = `${baseId}-title`;
|
|
43
|
+
const bodyId = `${baseId}-body`;
|
|
44
|
+
const slotProps = typeof dsBannerContainer === "function" ? dsBannerContainer({ ...originalProps }) : dsBannerContainer;
|
|
45
|
+
const hasConsumerName = hasName(slotProps) || [containerProps, globalAttrs].some(hasName);
|
|
46
|
+
const hasCustomBody = !!CustomBody;
|
|
47
|
+
const pageNoticeNameProps = (0, import_react.useMemo)(() => {
|
|
48
|
+
if (!isPageNotice || hasConsumerName || !label) return {};
|
|
49
|
+
return hasCustomBody ? { "aria-label": label } : { "aria-labelledby": titleId };
|
|
50
|
+
}, [isPageNotice, hasConsumerName, label, hasCustomBody, titleId]);
|
|
51
|
+
return { baseId, contentIds: { titleId, bodyId }, pageNoticeNameProps };
|
|
52
|
+
};
|
|
53
|
+
//# sourceMappingURL=usePageNotice.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/usePageNotice.ts", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
+
"sourcesContent": ["import { useMemo } from 'react';\nimport { uid } from 'uid';\nimport type { DSBannerT } from './react-desc-prop-types.js';\n\ntype AnyAttrs = Record<string, unknown> | null | undefined;\n\nconst hasName = (attrs: AnyAttrs) => !!attrs && ('aria-label' in attrs || 'aria-labelledby' in attrs);\n\n// An element with role=\"region\" must have an accessible name, otherwise it is not exposed as a landmark.\n// The name defaults to the label prop, and any name provided by the consumer (containerProps,\n// global attributes or the dsBannerContainer slot) takes precedence.\nexport const usePageNotice = (\n propsWithDefaults: DSBannerT.InternalProps,\n originalProps: DSBannerT.Props,\n globalAttrs: AnyAttrs,\n) => {\n const { isPageNotice, label, CustomBody, containerProps, bannerId } = propsWithDefaults;\n const { dsBannerContainer } = propsWithDefaults as { dsBannerContainer?: unknown };\n // every id the banner renders derives from this single base, always starting with a letter (valid HTML id)\n const baseId = useMemo(() => bannerId ?? `ds-banner-${uid(5)}`, [bannerId]);\n const titleId = `${baseId}-title`;\n const bodyId = `${baseId}-body`;\n\n const slotProps = (\n typeof dsBannerContainer === 'function'\n ? (dsBannerContainer as (args: object) => AnyAttrs)({ ...originalProps })\n : dsBannerContainer\n ) as AnyAttrs;\n const hasConsumerName = hasName(slotProps) || [containerProps, globalAttrs].some(hasName);\n const hasCustomBody = !!CustomBody;\n\n const pageNoticeNameProps = useMemo<Record<string, string>>(() => {\n if (!isPageNotice || hasConsumerName || !label) return {} as Record<string, string>;\n return hasCustomBody ? { 'aria-label': label } : { 'aria-labelledby': titleId };\n }, [isPageNotice, hasConsumerName, label, hasCustomBody, titleId]);\n\n return { baseId, contentIds: { titleId, bodyId }, pageNoticeNameProps };\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAwB;AACxB,iBAAoB;AAKpB,MAAM,UAAU,CAAC,UAAoB,CAAC,CAAC,UAAU,gBAAgB,SAAS,qBAAqB;AAKxF,MAAM,gBAAgB,CAC3B,mBACA,eACA,gBACG;AACH,QAAM,EAAE,cAAc,OAAO,YAAY,gBAAgB,SAAS,IAAI;AACtE,QAAM,EAAE,kBAAkB,IAAI;AAE9B,QAAM,aAAS,sBAAQ,MAAM,YAAY,iBAAa,gBAAI,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC;AAC1E,QAAM,UAAU,GAAG,MAAM;AACzB,QAAM,SAAS,GAAG,MAAM;AAExB,QAAM,YACJ,OAAO,sBAAsB,aACxB,kBAAiD,EAAE,GAAG,cAAc,CAAC,IACtE;AAEN,QAAM,kBAAkB,QAAQ,SAAS,KAAK,CAAC,gBAAgB,WAAW,EAAE,KAAK,OAAO;AACxF,QAAM,gBAAgB,CAAC,CAAC;AAExB,QAAM,0BAAsB,sBAAgC,MAAM;AAChE,QAAI,CAAC,gBAAgB,mBAAmB,CAAC,MAAO,QAAO,CAAC;AACxD,WAAO,gBAAgB,EAAE,cAAc,MAAM,IAAI,EAAE,mBAAmB,QAAQ;AAAA,EAChF,GAAG,CAAC,cAAc,iBAAiB,OAAO,eAAe,OAAO,CAAC;AAEjE,SAAO,EAAE,QAAQ,YAAY,EAAE,SAAS,OAAO,GAAG,oBAAoB;AACxE;",
|
|
6
|
+
"names": []
|
|
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
|
-
import { uid } from "uid";
|
|
14
12
|
import { useGetLayoutMode } from "@elliemae/ds-system";
|
|
15
13
|
import { DSBannerContent } from "./DSBannerContent.js";
|
|
16
|
-
import {
|
|
14
|
+
import { LiveRegionCorrectlyImplemented } from "./LiveRegionCorrectlyImplemented.js";
|
|
15
|
+
import { DSBannerDatatestid, DSBannerName } from "./constants/index.js";
|
|
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 {
|
|
@@ -67,6 +36,7 @@ const DSBanner = (props) => {
|
|
|
67
36
|
actionRef,
|
|
68
37
|
withLiveRegionAnnouncement,
|
|
69
38
|
isPageNotice,
|
|
39
|
+
bannerId,
|
|
70
40
|
...rest
|
|
71
41
|
} = propsWithDefaults;
|
|
72
42
|
const { height: globalHeight, ...globalAttrs } = useGetGlobalAttributes(rest);
|
|
@@ -92,7 +62,7 @@ const DSBanner = (props) => {
|
|
|
92
62
|
},
|
|
93
63
|
[actionRef]
|
|
94
64
|
);
|
|
95
|
-
const
|
|
65
|
+
const { baseId, contentIds, pageNoticeNameProps } = usePageNotice(propsWithDefaults, props, globalAttrs);
|
|
96
66
|
const handleOnKeyDownToClose = useCallback(
|
|
97
67
|
(e) => {
|
|
98
68
|
if (e.key === "Escape") {
|
|
@@ -120,10 +90,11 @@ const DSBanner = (props) => {
|
|
|
120
90
|
return getIsLiveRegion(withLiveRegionAnnouncement) ? /* @__PURE__ */ jsx(
|
|
121
91
|
LiveRegionCorrectlyImplemented,
|
|
122
92
|
{
|
|
123
|
-
id: `${
|
|
93
|
+
id: `${baseId}-live-region`,
|
|
124
94
|
innerRef: liveRegionRef,
|
|
125
95
|
announcementType: withLiveRegionAnnouncement,
|
|
126
|
-
ownerPropsConfig
|
|
96
|
+
ownerPropsConfig,
|
|
97
|
+
globalAttrs
|
|
127
98
|
}
|
|
128
99
|
) : null;
|
|
129
100
|
return /* @__PURE__ */ jsxs(
|
|
@@ -134,6 +105,7 @@ const DSBanner = (props) => {
|
|
|
134
105
|
innerRef: handleActionRefForContainer,
|
|
135
106
|
tabIndex: -1,
|
|
136
107
|
role: isPageNotice ? "region" : void 0,
|
|
108
|
+
...pageNoticeNameProps,
|
|
137
109
|
...containerProps,
|
|
138
110
|
...globalAttrs,
|
|
139
111
|
...xstyledAttrs,
|
|
@@ -147,9 +119,9 @@ const DSBanner = (props) => {
|
|
|
147
119
|
"data-type": type,
|
|
148
120
|
"data-testid": DSBannerDatatestid.INNER_CONTAINER,
|
|
149
121
|
role: withLiveRegionAnnouncement === "alert" ? "alert" : void 0,
|
|
150
|
-
id:
|
|
122
|
+
id: baseId,
|
|
151
123
|
...ownerPropsConfig,
|
|
152
|
-
children: !CustomBody ? /* @__PURE__ */ jsx(DSBannerContent, { propsWithDefaults }) : /* @__PURE__ */ jsx(CustomBody, {})
|
|
124
|
+
children: !CustomBody ? /* @__PURE__ */ jsx(DSBannerContent, { propsWithDefaults, ...contentIds }) : /* @__PURE__ */ jsx(CustomBody, {})
|
|
153
125
|
}
|
|
154
126
|
),
|
|
155
127
|
!CustomBody && showCloseButton ? /* @__PURE__ */ jsx(
|
|
@@ -160,7 +132,7 @@ const DSBanner = (props) => {
|
|
|
160
132
|
innerRef: closeBtnRef,
|
|
161
133
|
onClick: onClose,
|
|
162
134
|
"aria-label": "Visually dismiss the banner",
|
|
163
|
-
"aria-describedby":
|
|
135
|
+
"aria-describedby": baseId,
|
|
164
136
|
...ownerPropsConfig,
|
|
165
137
|
children: /* @__PURE__ */ jsx(CloseX, { width: 12, height: 12 })
|
|
166
138
|
}
|
|
@@ -169,10 +141,11 @@ const DSBanner = (props) => {
|
|
|
169
141
|
getIsLiveRegion(withLiveRegionAnnouncement) ? /* @__PURE__ */ jsx(
|
|
170
142
|
LiveRegionCorrectlyImplemented,
|
|
171
143
|
{
|
|
172
|
-
id: `${
|
|
144
|
+
id: `${baseId}-live-region`,
|
|
173
145
|
innerRef: liveRegionRef,
|
|
174
146
|
announcementType: withLiveRegionAnnouncement,
|
|
175
|
-
ownerPropsConfig
|
|
147
|
+
ownerPropsConfig,
|
|
148
|
+
globalAttrs
|
|
176
149
|
}
|
|
177
150
|
) : null
|
|
178
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
|
}
|
|
@@ -4,7 +4,7 @@ import { AlertsDetailFill, InfoFill, SuccessFill, WarningSquare } from "@elliema
|
|
|
4
4
|
import { useOwnerProps } from "@elliemae/ds-props-helpers";
|
|
5
5
|
import { TYPOGRAPHY_VARIANTS } from "@elliemae/ds-typography";
|
|
6
6
|
import React2, { useCallback } from "react";
|
|
7
|
-
import {
|
|
7
|
+
import { DSBannerDatatestid } from "./constants/index.js";
|
|
8
8
|
import { StyledActionLink, StyledIconContainer, StyledSubTitle, StyledTitle, StyledBody } from "./styles.js";
|
|
9
9
|
const icons = {
|
|
10
10
|
success: /* @__PURE__ */ jsx(SuccessFill, { color: ["success", "900"], width: "20px", height: "20px" }),
|
|
@@ -15,6 +15,8 @@ const icons = {
|
|
|
15
15
|
const DSBannerContent = (props) => {
|
|
16
16
|
const {
|
|
17
17
|
propsWithDefaults,
|
|
18
|
+
titleId,
|
|
19
|
+
bodyId,
|
|
18
20
|
propsWithDefaults: { type, label, body, actionLink, actionRef }
|
|
19
21
|
} = props;
|
|
20
22
|
const ownerPropsConfig = useOwnerProps(propsWithDefaults, { ...props });
|
|
@@ -41,8 +43,8 @@ const DSBannerContent = (props) => {
|
|
|
41
43
|
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
42
44
|
/* @__PURE__ */ jsx(StyledIconContainer, { "data-testid": DSBannerDatatestid.ICON_CONTAINER, ...ownerPropsConfig, children: icons[type] }),
|
|
43
45
|
/* @__PURE__ */ jsxs(StyledBody, { ...ownerPropsConfig, children: [
|
|
44
|
-
/* @__PURE__ */ jsx(StyledTitle, { variant: TYPOGRAPHY_VARIANTS.H5_STRONG, ...ownerPropsConfig, children: label }),
|
|
45
|
-
/* @__PURE__ */ jsxs(StyledSubTitle, { id:
|
|
46
|
+
/* @__PURE__ */ jsx(StyledTitle, { id: titleId, variant: TYPOGRAPHY_VARIANTS.H5_STRONG, ...ownerPropsConfig, children: label }),
|
|
47
|
+
/* @__PURE__ */ jsxs(StyledSubTitle, { id: bodyId, variant: TYPOGRAPHY_VARIANTS.B1, ...ownerPropsConfig, children: [
|
|
46
48
|
body,
|
|
47
49
|
actionLink && /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
48
50
|
!body ? "" : " ",
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/DSBannerContent.tsx"],
|
|
4
|
-
"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 {
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACUZ,
|
|
4
|
+
"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<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 <StyledBody {...ownerPropsConfig}>\n <StyledTitle id={titleId} variant={TYPOGRAPHY_VARIANTS.H5_STRONG} {...ownerPropsConfig}>\n {label}\n </StyledTitle>\n <StyledSubTitle id={bodyId} 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 </StyledBody>\n </>\n );\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACUZ,SAwDC,UAxDD,KAwDC,YAxDD;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,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,qBAAC,cAAY,GAAG,kBACd;AAAA,0BAAC,eAAY,IAAI,SAAS,SAAS,oBAAoB,WAAY,GAAG,kBACnE,iBACH;AAAA,MACA,qBAAC,kBAAe,IAAI,QAAQ,SAAS,oBAAoB,IAAK,GAAG,kBAC9D;AAAA;AAAA,QACA,cACC,iCAGG;AAAA,WAAC,OAAO,KAAK;AAAA,UACd;AAAA,YAAC;AAAA;AAAA,cACC,eAAa,mBAAmB;AAAA,cAChC,SAAS,WAAW;AAAA,cACpB,MAAM,WAAW;AAAA,cACjB,UAAU;AAAA,cACV,WAAW;AAAA,cACX,UAAU;AAAA,cACV,aAAa,CAAC;AAAA,cACd,OAAO,WAAW;AAAA,cACjB,GAAG;AAAA,cAEH,qBAAW;AAAA;AAAA,UACd;AAAA,WACF;AAAA,SAEJ;AAAA,OACF;AAAA,KACF;AAEJ;",
|
|
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,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/constants/index.ts"],
|
|
4
|
+
"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/**\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"],
|
|
5
|
+
"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;AAQO,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;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
package/dist/esm/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { DSBanner, DSBannerWithSchema } from "./DSBanner.js";
|
|
3
|
-
import { DSBannerName, BANNER_TYPES, DSBannerSlots, DSBannerDatatestid } from "./
|
|
3
|
+
import { DSBannerName, BANNER_TYPES, DSBannerSlots, DSBannerDatatestid } from "./constants/index.js";
|
|
4
4
|
export {
|
|
5
5
|
BANNER_TYPES,
|
|
6
6
|
DSBanner,
|