@elliemae/ds-banner 3.17.0-next.3 → 3.17.0-next.5
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 +41 -6
- package/dist/cjs/DSBanner.js.map +3 -3
- package/dist/cjs/exported-related/DSBannerDatatestid.js +1 -0
- package/dist/cjs/exported-related/DSBannerDatatestid.js.map +2 -2
- package/dist/cjs/exported-related/theming.js +1 -0
- package/dist/cjs/exported-related/theming.js.map +2 -2
- package/dist/cjs/react-desc-prop-types.js +1 -0
- package/dist/cjs/react-desc-prop-types.js.map +2 -2
- package/dist/cjs/styles.js +15 -6
- package/dist/cjs/styles.js.map +2 -2
- package/dist/esm/DSBanner.js +42 -7
- package/dist/esm/DSBanner.js.map +3 -3
- package/dist/esm/exported-related/DSBannerDatatestid.js +1 -0
- package/dist/esm/exported-related/DSBannerDatatestid.js.map +2 -2
- package/dist/esm/exported-related/theming.js +1 -0
- package/dist/esm/exported-related/theming.js.map +2 -2
- package/dist/esm/react-desc-prop-types.js +1 -0
- package/dist/esm/react-desc-prop-types.js.map +2 -2
- package/dist/esm/styles.js +15 -6
- package/dist/esm/styles.js.map +2 -2
- package/dist/types/exported-related/DSBannerDatatestid.d.ts +1 -0
- package/dist/types/exported-related/theming.d.ts +1 -0
- package/dist/types/react-desc-prop-types.d.ts +1 -0
- package/dist/types/styles.d.ts +1 -1
- package/dist/types/tests/DSBanner.axe.test.d.ts +1 -0
- package/package.json +6 -6
package/dist/cjs/DSBanner.js
CHANGED
|
@@ -35,7 +35,7 @@ __export(DSBanner_exports, {
|
|
|
35
35
|
module.exports = __toCommonJS(DSBanner_exports);
|
|
36
36
|
var React = __toESM(require("react"));
|
|
37
37
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
38
|
-
var import_react = require("react");
|
|
38
|
+
var import_react = __toESM(require("react"));
|
|
39
39
|
var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
|
|
40
40
|
var import_ds_icons = require("@elliemae/ds-icons");
|
|
41
41
|
var import_icons = require("./utils/icons.js");
|
|
@@ -44,7 +44,19 @@ var import_exported_related = require("./exported-related/index.js");
|
|
|
44
44
|
var import_styles = require("./styles.js");
|
|
45
45
|
const DSBanner = (props) => {
|
|
46
46
|
const propsWithDefaults = (0, import_ds_props_helpers.useMemoMergePropsWithDefault)(props, import_react_desc_prop_types.defaultProps);
|
|
47
|
-
const {
|
|
47
|
+
const {
|
|
48
|
+
type,
|
|
49
|
+
isOpen,
|
|
50
|
+
onClose,
|
|
51
|
+
label,
|
|
52
|
+
body,
|
|
53
|
+
CustomBody,
|
|
54
|
+
actionLink,
|
|
55
|
+
showCloseButton,
|
|
56
|
+
containerProps,
|
|
57
|
+
actionRef,
|
|
58
|
+
...rest
|
|
59
|
+
} = propsWithDefaults;
|
|
48
60
|
const { height: globalHeight, ...globalAttrs } = (0, import_ds_props_helpers.useGetGlobalAttributes)(rest);
|
|
49
61
|
const xstyledAttrs = (0, import_ds_props_helpers.useGetXstyledProps)(rest);
|
|
50
62
|
const innerContainerRef = (0, import_react.useRef)(null);
|
|
@@ -85,12 +97,31 @@ const DSBanner = (props) => {
|
|
|
85
97
|
linkRef.current.click();
|
|
86
98
|
}
|
|
87
99
|
}, []);
|
|
100
|
+
const handleOnKeyDownToClose = (0, import_react.useCallback)(
|
|
101
|
+
(e) => {
|
|
102
|
+
if (e.key === "Escape") {
|
|
103
|
+
e.preventDefault();
|
|
104
|
+
onClose();
|
|
105
|
+
}
|
|
106
|
+
},
|
|
107
|
+
[onClose]
|
|
108
|
+
);
|
|
88
109
|
(0, import_react.useLayoutEffect)(() => {
|
|
89
110
|
if (isOpen !== current || isOpen)
|
|
90
111
|
setIsAnimating(true);
|
|
91
112
|
else
|
|
92
113
|
setIsAnimating(false);
|
|
93
114
|
}, [isOpen, current]);
|
|
115
|
+
const innerCols = import_react.default.useMemo(() => {
|
|
116
|
+
if (!CustomBody) {
|
|
117
|
+
const finalCols = ["auto", "fit-content(50%)", "1fr"];
|
|
118
|
+
if (showCloseButton)
|
|
119
|
+
finalCols.push("auto");
|
|
120
|
+
return finalCols;
|
|
121
|
+
}
|
|
122
|
+
return ["1fr", "auto"];
|
|
123
|
+
}, [CustomBody, showCloseButton]);
|
|
124
|
+
console.log(height);
|
|
94
125
|
if (!isAnimating && !isOpen)
|
|
95
126
|
return null;
|
|
96
127
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
@@ -98,15 +129,19 @@ const DSBanner = (props) => {
|
|
|
98
129
|
{
|
|
99
130
|
isOpen,
|
|
100
131
|
height,
|
|
132
|
+
onKeyDown: handleOnKeyDownToClose,
|
|
101
133
|
isAnimating,
|
|
102
134
|
onAnimationEnd: () => setCurrent(isOpen),
|
|
103
135
|
"data-testid": import_exported_related.DSBannerDatatestid.CONTAINER,
|
|
104
136
|
...containerProps,
|
|
105
137
|
...globalAttrs,
|
|
106
138
|
...xstyledAttrs,
|
|
107
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime.
|
|
139
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
108
140
|
import_styles.StyledInnerContainer,
|
|
109
141
|
{
|
|
142
|
+
cols: innerCols,
|
|
143
|
+
justifyItems: CustomBody ? "center" : "",
|
|
144
|
+
alignItems: height === 41 ? "center" : "flex-start",
|
|
110
145
|
type,
|
|
111
146
|
isOpen,
|
|
112
147
|
ref: innerContainerRef,
|
|
@@ -115,7 +150,7 @@ const DSBanner = (props) => {
|
|
|
115
150
|
role: "alert",
|
|
116
151
|
tabIndex: alertTabIndex,
|
|
117
152
|
onBlur: handleBlur,
|
|
118
|
-
children: [
|
|
153
|
+
children: !CustomBody ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
|
|
119
154
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledIconContainer, { "data-testid": import_exported_related.DSBannerDatatestid.ICON_CONTAINER, children: import_icons.icons[type] }),
|
|
120
155
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledTitle, { children: label }),
|
|
121
156
|
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styles.StyledSubTitle, { children: [
|
|
@@ -143,8 +178,8 @@ const DSBanner = (props) => {
|
|
|
143
178
|
"aria-label": "Close icon",
|
|
144
179
|
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.CloseX, { width: 12, height: 12 })
|
|
145
180
|
}
|
|
146
|
-
) :
|
|
147
|
-
]
|
|
181
|
+
) : null
|
|
182
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CustomBody, {})
|
|
148
183
|
}
|
|
149
184
|
)
|
|
150
185
|
}
|
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": ["/* eslint-disable max-lines */\nimport React, { useLayoutEffect, useRef, useCallback, useState, useEffect } from 'react';\nimport {\n describe,\n useMemoMergePropsWithDefault,\n useGetGlobalAttributes,\n useGetXstyledProps,\n} from '@elliemae/ds-props-helpers';\nimport { CloseX } from '@elliemae/ds-icons';\nimport { icons } from './utils/icons.js';\nimport { propTypes, defaultProps } from './react-desc-prop-types.js';\nimport { DSBannerDatatestid, DSBannerName } from './exported-related/index.js';\nimport {\n StyledActionLink,\n StyledCloseButton,\n StyledInnerContainer,\n StyledBannerContainer,\n StyledIconContainer,\n StyledSubTitle,\n StyledTitle,\n} from './styles.js';\nimport type { DSBannerT } from './react-desc-prop-types.js';\n\nconst DSBanner: React.ComponentType<DSBannerT.Props> = (props) => {\n const propsWithDefaults = useMemoMergePropsWithDefault(props, defaultProps);\n\n const {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
6
|
-
"names": []
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-lines */\nimport React, { useLayoutEffect, useRef, useCallback, useState, useEffect } from 'react';\nimport {\n describe,\n useMemoMergePropsWithDefault,\n useGetGlobalAttributes,\n useGetXstyledProps,\n} from '@elliemae/ds-props-helpers';\nimport { CloseX } from '@elliemae/ds-icons';\nimport { icons } from './utils/icons.js';\nimport { propTypes, defaultProps } from './react-desc-prop-types.js';\nimport { DSBannerDatatestid, DSBannerName } from './exported-related/index.js';\nimport {\n StyledActionLink,\n StyledCloseButton,\n StyledInnerContainer,\n StyledBannerContainer,\n StyledIconContainer,\n StyledSubTitle,\n StyledTitle,\n} from './styles.js';\nimport type { DSBannerT } from './react-desc-prop-types.js';\n\nconst DSBanner: React.ComponentType<DSBannerT.Props> = (props) => {\n const propsWithDefaults = useMemoMergePropsWithDefault(props, defaultProps);\n\n const {\n type,\n isOpen,\n onClose,\n label,\n body,\n CustomBody,\n actionLink,\n showCloseButton,\n containerProps,\n actionRef,\n ...rest\n } = propsWithDefaults;\n\n const { height: globalHeight, ...globalAttrs } = useGetGlobalAttributes(rest);\n\n const xstyledAttrs = useGetXstyledProps(rest);\n\n const innerContainerRef = useRef<HTMLDivElement>(null);\n const linkRef = useRef<HTMLAnchorElement>(null);\n const [current, setCurrent] = useState<boolean>(isOpen);\n const [isAnimating, setIsAnimating] = useState<boolean>(false);\n const [height, setHeight] = useState(0);\n const [alertTabIndex, setAlertTabIndex] = useState<number | undefined>(undefined);\n\n useEffect(() => {\n if (innerContainerRef.current) {\n setHeight(innerContainerRef.current.offsetHeight);\n }\n }, [isAnimating, isOpen]);\n\n useEffect(() => {\n if (actionRef && actionRef.current) {\n actionRef.current.focusOnWrapper = () => {\n if (innerContainerRef.current) {\n setAlertTabIndex(0);\n setTimeout(() => {\n innerContainerRef.current?.focus();\n }, 300);\n }\n };\n actionRef.current.focusOnLink = () => {\n if (linkRef.current) {\n linkRef.current.focus();\n }\n };\n }\n }, [actionRef]);\n\n const handleBlur = useCallback(() => {\n setAlertTabIndex(undefined);\n }, []);\n\n const handleOnKeyDown = useCallback((e: React.KeyboardEvent) => {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n if (linkRef.current) linkRef.current.click();\n }\n }, []);\n\n const handleOnKeyDownToClose = useCallback(\n (e: React.KeyboardEvent) => {\n if (e.key === 'Escape') {\n e.preventDefault();\n onClose();\n }\n },\n [onClose],\n );\n\n useLayoutEffect(() => {\n if (isOpen !== current || isOpen) setIsAnimating(true);\n else setIsAnimating(false);\n }, [isOpen, current]);\n\n const innerCols = React.useMemo(() => {\n if (!CustomBody) {\n const finalCols = ['auto', 'fit-content(50%)', '1fr'];\n if (showCloseButton) finalCols.push('auto');\n return finalCols;\n }\n return ['1fr', 'auto'];\n }, [CustomBody, showCloseButton]);\n\n console.log(height);\n\n if (!isAnimating && !isOpen) return null;\n\n return (\n <StyledBannerContainer\n isOpen={isOpen}\n height={height}\n onKeyDown={handleOnKeyDownToClose}\n isAnimating={isAnimating}\n onAnimationEnd={() => setCurrent(isOpen)}\n data-testid={DSBannerDatatestid.CONTAINER}\n {...containerProps}\n {...globalAttrs}\n {...xstyledAttrs}\n >\n <StyledInnerContainer\n cols={innerCols}\n justifyItems={CustomBody ? 'center' : ''}\n alignItems={height === 41 ? \"center\" : \"flex-start\"}\n type={type}\n isOpen={isOpen}\n ref={innerContainerRef}\n isAnimating={isAnimating}\n data-testid={DSBannerDatatestid.INNER_CONTAINER}\n role=\"alert\"\n tabIndex={alertTabIndex}\n onBlur={handleBlur}\n >\n {!CustomBody ? (\n <>\n <StyledIconContainer data-testid={DSBannerDatatestid.ICON_CONTAINER}>{icons[type]}</StyledIconContainer>\n <StyledTitle>{label}</StyledTitle>\n <StyledSubTitle>\n <span>{body}</span>\n {actionLink && (\n <StyledActionLink\n data-testid={DSBannerDatatestid.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 {showCloseButton ? (\n <StyledCloseButton\n data-testid={DSBannerDatatestid.CLOSE_BUTTON}\n buttonType=\"icon\"\n onClick={onClose}\n aria-label=\"Close icon\"\n >\n <CloseX width={12} height={12} />\n </StyledCloseButton>\n ) : null}\n </>\n ) : (\n <CustomBody />\n )}\n </StyledInnerContainer>\n </StyledBannerContainer>\n );\n};\n\nDSBanner.displayName = DSBannerName;\nconst DSBannerWithSchema = describe(DSBanner);\nDSBannerWithSchema.propTypes = propTypes;\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
|
}
|
|
@@ -34,6 +34,7 @@ module.exports = __toCommonJS(DSBannerDatatestid_exports);
|
|
|
34
34
|
var React = __toESM(require("react"));
|
|
35
35
|
const DSBannerDatatestid = {
|
|
36
36
|
CONTAINER: "ds-banner-container",
|
|
37
|
+
CUSTOM_CONTAINER: "ds-banner-custom-container",
|
|
37
38
|
INNER_CONTAINER: "ds-banner",
|
|
38
39
|
ICON_CONTAINER: "ds-banner-icon",
|
|
39
40
|
ACTION_LINK: "ds-banner-action-link",
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/exported-related/DSBannerDatatestid.ts", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["export const DSBannerDatatestid = {\n CONTAINER: 'ds-banner-container',\n INNER_CONTAINER: 'ds-banner',\n ICON_CONTAINER: 'ds-banner-icon',\n ACTION_LINK: 'ds-banner-action-link',\n CLOSE_BUTTON: 'ds-banner-close-button',\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,qBAAqB;AAAA,EAChC,WAAW;AAAA,EACX,iBAAiB;AAAA,EACjB,gBAAgB;AAAA,EAChB,aAAa;AAAA,EACb,cAAc;AAChB;",
|
|
4
|
+
"sourcesContent": ["export const DSBannerDatatestid = {\n CONTAINER: 'ds-banner-container',\n CUSTOM_CONTAINER: 'ds-banner-custom-container',\n INNER_CONTAINER: 'ds-banner',\n ICON_CONTAINER: 'ds-banner-icon',\n ACTION_LINK: 'ds-banner-action-link',\n CLOSE_BUTTON: 'ds-banner-close-button',\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,qBAAqB;AAAA,EAChC,WAAW;AAAA,EACX,kBAAkB;AAAA,EAClB,iBAAiB;AAAA,EACjB,gBAAgB;AAAA,EAChB,aAAa;AAAA,EACb,cAAc;AAChB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/exported-related/theming.ts", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["export const DSBannerName = 'DSBanner';\n\nexport const DSBannerSlots = {\n CONTAINER: 'root',\n INNER_CONTAINER: 'inner-container',\n TITLE: 'title',\n SUBTITLE: 'subtitle',\n ICON_CONTAINER: 'icon-container',\n ACTION_LINK: 'action-link',\n CLOSE_BUTTON: 'close-button',\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,eAAe;AAErB,MAAM,gBAAgB;AAAA,EAC3B,WAAW;AAAA,EACX,iBAAiB;AAAA,EACjB,OAAO;AAAA,EACP,UAAU;AAAA,EACV,gBAAgB;AAAA,EAChB,aAAa;AAAA,EACb,cAAc;AAChB;",
|
|
4
|
+
"sourcesContent": ["export const DSBannerName = 'DSBanner';\n\nexport const DSBannerSlots = {\n CONTAINER: 'root',\n INNER_CONTAINER: 'inner-container',\n CUSTOM_CONTAINER: 'custom-container',\n TITLE: 'title',\n SUBTITLE: 'subtitle',\n ICON_CONTAINER: 'icon-container',\n ACTION_LINK: 'action-link',\n CLOSE_BUTTON: 'close-button',\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,eAAe;AAErB,MAAM,gBAAgB;AAAA,EAC3B,WAAW;AAAA,EACX,iBAAiB;AAAA,EACjB,kBAAkB;AAAA,EAClB,OAAO;AAAA,EACP,UAAU;AAAA,EACV,gBAAgB;AAAA,EAChB,aAAa;AAAA,EACb,cAAc;AAChB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -50,6 +50,7 @@ const propTypes = {
|
|
|
50
50
|
containerProps: import_ds_props_helpers.PropTypes.object.description("Set of Properties attached to the main container.").defaultValue({}),
|
|
51
51
|
label: import_ds_props_helpers.PropTypes.string.description("Banner label.").defaultValue(""),
|
|
52
52
|
body: import_ds_props_helpers.PropTypes.string.description("Banner body content").defaultValue(""),
|
|
53
|
+
CustomBody: import_ds_props_helpers.PropTypes.func.description("Banner custom content").defaultValue(""),
|
|
53
54
|
type: import_ds_props_helpers.PropTypes.oneOf(Object.values(import_exported_related.BANNER_TYPES)).description("Banner type.").defaultValue(import_exported_related.BANNER_TYPES.INFO),
|
|
54
55
|
onClose: import_ds_props_helpers.PropTypes.func.description("Callback when the Banner closes."),
|
|
55
56
|
isOpen: import_ds_props_helpers.PropTypes.bool.description("Whether the Banner is open or closed.").defaultValue(true),
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/react-desc-prop-types.ts", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import type { WeakValidationMap } from 'react';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport { BANNER_TYPES } from './exported-related/index.js';\nimport type { DSBannerInternalsT } from './sharedTypes.js';\n\nexport declare namespace DSBannerT {\n export interface Props {\n type?: DSBannerInternalsT.BannerTypesT;\n isOpen?: boolean;\n onClose?: () => void | null;\n actionLink?: DSBannerInternalsT.ActionLinkT;\n label?: string;\n body?: string;\n showCloseButton?: boolean;\n containerProps?: Record<string, unknown>;\n actionRef?: {\n current: {\n focusOnWrapper?: () => void;\n focusOnLink?: () => void;\n };\n };\n }\n}\n\nexport const defaultProps: DSBannerT.Props = {\n containerProps: {},\n label: '',\n body: '',\n type: BANNER_TYPES.INFO,\n isOpen: true,\n onClose: () => null,\n showCloseButton: true,\n};\n\nexport const propTypes = {\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n containerProps: PropTypes.object.description('Set of Properties attached to the main container.').defaultValue({}),\n label: PropTypes.string.description('Banner label.').defaultValue(''),\n body: PropTypes.string.description('Banner body content').defaultValue(''),\n type: PropTypes.oneOf(Object.values(BANNER_TYPES)).description('Banner type.').defaultValue(BANNER_TYPES.INFO),\n onClose: PropTypes.func.description('Callback when the Banner closes.'),\n isOpen: PropTypes.bool.description('Whether the Banner is open or closed.').defaultValue(true),\n showCloseButton: PropTypes.bool.description('Whether to show close button or not.').defaultValue(true),\n actionLink: PropTypes.shape({\n label: PropTypes.string,\n onClick: PropTypes.func,\n href: PropTypes.string,\n })\n .description('Properties for the Action Link.')\n .defaultValue({}),\n actionRef: PropTypes.object\n .description(\n `\n Reference to use actions:\n - focusOnLink: function to focus the banner\n - focusOnWrapper: function to focus the link\n `,\n )\n .defaultValue({}),\n} as WeakValidationMap<unknown>;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,8BAAuE;AACvE,8BAA6B;
|
|
4
|
+
"sourcesContent": ["import type { WeakValidationMap } from 'react';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport { BANNER_TYPES } from './exported-related/index.js';\nimport type { DSBannerInternalsT } from './sharedTypes.js';\n\nexport declare namespace DSBannerT {\n export interface Props {\n type?: DSBannerInternalsT.BannerTypesT;\n isOpen?: boolean;\n onClose?: () => void | null;\n actionLink?: DSBannerInternalsT.ActionLinkT;\n label?: string;\n body?: string;\n CustomBody?: React.ComponentType<{}>;\n showCloseButton?: boolean;\n containerProps?: Record<string, unknown>;\n actionRef?: {\n current: {\n focusOnWrapper?: () => void;\n focusOnLink?: () => void;\n };\n };\n }\n}\n\nexport const defaultProps: DSBannerT.Props = {\n containerProps: {},\n label: '',\n body: '',\n type: BANNER_TYPES.INFO,\n isOpen: true,\n onClose: () => null,\n showCloseButton: true,\n};\n\nexport const propTypes = {\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n containerProps: PropTypes.object.description('Set of Properties attached to the main container.').defaultValue({}),\n label: PropTypes.string.description('Banner label.').defaultValue(''),\n body: PropTypes.string.description('Banner body content').defaultValue(''),\n CustomBody: PropTypes.func.description('Banner custom content').defaultValue(''),\n type: PropTypes.oneOf(Object.values(BANNER_TYPES)).description('Banner type.').defaultValue(BANNER_TYPES.INFO),\n onClose: PropTypes.func.description('Callback when the Banner closes.'),\n isOpen: PropTypes.bool.description('Whether the Banner is open or closed.').defaultValue(true),\n showCloseButton: PropTypes.bool.description('Whether to show close button or not.').defaultValue(true),\n actionLink: PropTypes.shape({\n label: PropTypes.string,\n onClick: PropTypes.func,\n href: PropTypes.string,\n })\n .description('Properties for the Action Link.')\n .defaultValue({}),\n actionRef: PropTypes.object\n .description(\n `\n Reference to use actions:\n - focusOnLink: function to focus the banner\n - focusOnWrapper: function to focus the link\n `,\n )\n .defaultValue({}),\n} as WeakValidationMap<unknown>;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,8BAAuE;AACvE,8BAA6B;AAuBtB,MAAM,eAAgC;AAAA,EAC3C,gBAAgB,CAAC;AAAA,EACjB,OAAO;AAAA,EACP,MAAM;AAAA,EACN,MAAM,qCAAa;AAAA,EACnB,QAAQ;AAAA,EACR,SAAS,MAAM;AAAA,EACf,iBAAiB;AACnB;AAEO,MAAM,YAAY;AAAA,EACvB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,gBAAgB,kCAAU,OAAO,YAAY,mDAAmD,EAAE,aAAa,CAAC,CAAC;AAAA,EACjH,OAAO,kCAAU,OAAO,YAAY,eAAe,EAAE,aAAa,EAAE;AAAA,EACpE,MAAM,kCAAU,OAAO,YAAY,qBAAqB,EAAE,aAAa,EAAE;AAAA,EACzE,YAAY,kCAAU,KAAK,YAAY,uBAAuB,EAAE,aAAa,EAAE;AAAA,EAC/E,MAAM,kCAAU,MAAM,OAAO,OAAO,oCAAY,CAAC,EAAE,YAAY,cAAc,EAAE,aAAa,qCAAa,IAAI;AAAA,EAC7G,SAAS,kCAAU,KAAK,YAAY,kCAAkC;AAAA,EACtE,QAAQ,kCAAU,KAAK,YAAY,uCAAuC,EAAE,aAAa,IAAI;AAAA,EAC7F,iBAAiB,kCAAU,KAAK,YAAY,sCAAsC,EAAE,aAAa,IAAI;AAAA,EACrG,YAAY,kCAAU,MAAM;AAAA,IAC1B,OAAO,kCAAU;AAAA,IACjB,SAAS,kCAAU;AAAA,IACnB,MAAM,kCAAU;AAAA,EAClB,CAAC,EACE,YAAY,iCAAiC,EAC7C,aAAa,CAAC,CAAC;AAAA,EAClB,WAAW,kCAAU,OAClB;AAAA,IACC;AAAA;AAAA;AAAA;AAAA;AAAA,EAKF,EACC,aAAa,CAAC,CAAC;AACpB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/styles.js
CHANGED
|
@@ -42,6 +42,7 @@ var import_ds_system = require("@elliemae/ds-system");
|
|
|
42
42
|
var import_ds_button = require("@elliemae/ds-button");
|
|
43
43
|
var import_styleHelpers = require("./utils/styleHelpers.js");
|
|
44
44
|
var import_exported_related = require("./exported-related/index.js");
|
|
45
|
+
var import_ds_grid = require("@elliemae/ds-grid");
|
|
45
46
|
const StyledBannerContainer = (0, import_ds_system.styled)("div", {
|
|
46
47
|
name: import_exported_related.DSBannerName,
|
|
47
48
|
slot: import_exported_related.DSBannerSlots.CONTAINER
|
|
@@ -51,13 +52,11 @@ const StyledBannerContainer = (0, import_ds_system.styled)("div", {
|
|
|
51
52
|
${({ isAnimating, isOpen, height }) => (0, import_styleHelpers.handleAnimation)(isAnimating, isOpen, height)};
|
|
52
53
|
${import_ds_system.xStyledCommonProps}
|
|
53
54
|
`;
|
|
54
|
-
const StyledInnerContainer = (0, import_ds_system.styled)(
|
|
55
|
+
const StyledInnerContainer = (0, import_ds_system.styled)(import_ds_grid.Grid, {
|
|
55
56
|
name: import_exported_related.DSBannerName,
|
|
56
57
|
slot: import_exported_related.DSBannerSlots.INNER_CONTAINER
|
|
57
58
|
})`
|
|
58
59
|
padding-right: 6px;
|
|
59
|
-
display: grid;
|
|
60
|
-
align-items: center;
|
|
61
60
|
min-height: 41px;
|
|
62
61
|
width: 100%;
|
|
63
62
|
background-color: ${({ theme }) => theme.colors.neutral["000"]};
|
|
@@ -76,25 +75,33 @@ const StyledInnerContainer = (0, import_ds_system.styled)("div", {
|
|
|
76
75
|
border-radius: 2px;
|
|
77
76
|
width: calc(100%);
|
|
78
77
|
border: 2px solid #1e79c2;
|
|
79
|
-
height: calc(100%
|
|
78
|
+
height: calc(100%);
|
|
80
79
|
}
|
|
81
80
|
}
|
|
82
|
-
grid-template-columns: auto minmax(auto, auto) minmax(auto, 1fr) auto;
|
|
83
81
|
`;
|
|
84
82
|
const StyledIconContainer = (0, import_ds_system.styled)("div", { name: import_exported_related.DSBannerName, slot: import_exported_related.DSBannerSlots.ICON_CONTAINER })`
|
|
83
|
+
margin-top: 5px;
|
|
85
84
|
margin-right: ${({ theme }) => theme.space.xxs};
|
|
86
85
|
margin-left: ${({ theme }) => theme.space.xs};
|
|
86
|
+
min-width: 0px;
|
|
87
87
|
`;
|
|
88
88
|
const StyledTitle = (0, import_ds_system.styled)("div", { name: import_exported_related.DSBannerName, slot: import_exported_related.DSBannerSlots.TITLE })`
|
|
89
89
|
color: ${({ theme }) => theme.colors.neutral[700]};
|
|
90
90
|
font-size: ${({ theme }) => theme.fontSizes.label[400]};
|
|
91
91
|
font-weight: ${({ theme }) => theme.fontWeights.semibold};
|
|
92
|
+
overflow-wrap: break-word;
|
|
93
|
+
white-space: pre-wrap;
|
|
94
|
+
margin-top: 5px;
|
|
95
|
+
min-width: 0px;
|
|
92
96
|
`;
|
|
93
97
|
const StyledSubTitle = (0, import_ds_system.styled)("div", { name: import_exported_related.DSBannerName, slot: import_exported_related.DSBannerSlots.SUBTITLE })`
|
|
94
|
-
width: 100%;
|
|
95
98
|
margin-left: ${({ theme }) => theme.space.xs};
|
|
96
99
|
font-size: ${({ theme }) => theme.fontSizes.subTitle[400]};
|
|
97
100
|
font-weight: ${({ theme }) => theme.fontWeights.regular};
|
|
101
|
+
margin-top: 5px;
|
|
102
|
+
overflow-wrap: break-word;
|
|
103
|
+
white-space: pre-wrap;
|
|
104
|
+
min-width: 0px;
|
|
98
105
|
`;
|
|
99
106
|
const StyledActionLink = (0, import_ds_system.styled)("a", { name: import_exported_related.DSBannerName, slot: import_exported_related.DSBannerSlots.ACTION_LINK })`
|
|
100
107
|
margin-left: ${({ theme, isBodyEmpty }) => isBodyEmpty ? theme.space.xs : 0};
|
|
@@ -107,6 +114,7 @@ const StyledActionLink = (0, import_ds_system.styled)("a", { name: import_export
|
|
|
107
114
|
border: 2px solid transparent;
|
|
108
115
|
border-radius: 2px;
|
|
109
116
|
padding: 2px 4px;
|
|
117
|
+
min-width: 0px;
|
|
110
118
|
&:focus {
|
|
111
119
|
outline: none;
|
|
112
120
|
border: 2px solid ${({ theme }) => theme.colors.brand[700]};
|
|
@@ -114,5 +122,6 @@ const StyledActionLink = (0, import_ds_system.styled)("a", { name: import_export
|
|
|
114
122
|
`;
|
|
115
123
|
const StyledCloseButton = (0, import_ds_system.styled)(import_ds_button.DSButtonV2, { name: import_exported_related.DSBannerName, slot: import_exported_related.DSBannerSlots.CLOSE_BUTTON })`
|
|
116
124
|
margin-left: ${({ theme }) => theme.space.xxs};
|
|
125
|
+
min-width: 0px;
|
|
117
126
|
`;
|
|
118
127
|
//# sourceMappingURL=styles.js.map
|
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 { styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport type { SizingProps, LayoutProps, SpaceProps, ColorProps } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button';\nimport { handleAnimation, handleBorderColor } from './utils/styleHelpers.js';\nimport { DSBannerName, DSBannerSlots } from './exported-related/index.js';\nimport type { DSBannerInternalsT } from './sharedTypes.js';\nimport type {} from '@xstyled/util';\nimport type {} from '@xstyled/system';\n\ninterface StyledBannerContainerT extends SizingProps, LayoutProps, SpaceProps, ColorProps {\n isOpen: boolean;\n isAnimating: boolean;\n height: number;\n}\n\ninterface StyledInnerContainerT {\n type: DSBannerInternalsT.BannerTypesT;\n isOpen: boolean;\n isAnimating: boolean;\n}\n\ninterface StyledActionLinkT {\n isBodyEmpty: string;\n}\n\nexport const StyledBannerContainer = styled('div', {\n name: DSBannerName,\n slot: DSBannerSlots.CONTAINER,\n})<StyledBannerContainerT>`\n overflow: hidden;\n height: ${({ isOpen }) => (isOpen ? 'auto' : '0px')};\n ${({ isAnimating, isOpen, height }) => handleAnimation(isAnimating, isOpen, height)};\n ${xStyledCommonProps}\n`;\n\nexport const StyledInnerContainer = styled(
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAA2C;AAE3C,uBAA2B;AAC3B,0BAAmD;AACnD,8BAA4C;
|
|
4
|
+
"sourcesContent": ["import { styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport type { SizingProps, LayoutProps, SpaceProps, ColorProps } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button';\nimport { handleAnimation, handleBorderColor } from './utils/styleHelpers.js';\nimport { DSBannerName, DSBannerSlots } from './exported-related/index.js';\nimport type { DSBannerInternalsT } from './sharedTypes.js';\nimport { Grid } from '@elliemae/ds-grid';\nimport type {} from '@xstyled/util';\nimport type {} from '@xstyled/system';\n\ninterface StyledBannerContainerT extends SizingProps, LayoutProps, SpaceProps, ColorProps {\n isOpen: boolean;\n isAnimating: boolean;\n height: number;\n}\n\ninterface StyledInnerContainerT {\n type: DSBannerInternalsT.BannerTypesT;\n isOpen: boolean;\n isAnimating: boolean;\n}\n\ninterface StyledActionLinkT {\n isBodyEmpty: string;\n}\n\nexport const StyledBannerContainer = styled('div', {\n name: DSBannerName,\n slot: DSBannerSlots.CONTAINER,\n})<StyledBannerContainerT>`\n overflow: hidden;\n height: ${({ isOpen }) => (isOpen ? 'auto' : '0px')};\n ${({ isAnimating, isOpen, height }) => handleAnimation(isAnimating, isOpen, height)};\n ${xStyledCommonProps}\n`;\n\nexport const StyledInnerContainer = styled(Grid, {\n name: DSBannerName,\n slot: DSBannerSlots.INNER_CONTAINER,\n})<StyledInnerContainerT>`\n padding-right: 6px;\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 transform: translateY(${({ isOpen }) => (isOpen ? '0' : '-100%')});\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%);\n }\n }\n`;\n\nexport const StyledIconContainer = styled('div', { name: DSBannerName, slot: DSBannerSlots.ICON_CONTAINER })`\n margin-top: 5px;\n margin-right: ${({ theme }) => theme.space.xxs};\n margin-left: ${({ theme }) => theme.space.xs};\n min-width: 0px;\n`;\n\nexport const StyledTitle = styled('div', { name: DSBannerName, slot: DSBannerSlots.TITLE })`\n color: ${({ theme }) => theme.colors.neutral[700]};\n font-size: ${({ theme }) => theme.fontSizes.label[400]};\n font-weight: ${({ theme }) => theme.fontWeights.semibold};\n overflow-wrap: break-word;\n white-space: pre-wrap;\n margin-top: 5px;\n min-width: 0px;\n`;\n\nexport const StyledSubTitle = styled('div', { name: DSBannerName, slot: DSBannerSlots.SUBTITLE })`\n margin-left: ${({ theme }) => theme.space.xs};\n font-size: ${({ theme }) => theme.fontSizes.subTitle[400]};\n font-weight: ${({ theme }) => theme.fontWeights.regular};\n margin-top: 5px;\n overflow-wrap: break-word;\n white-space: pre-wrap;\n min-width: 0px;\n`;\n\nexport const StyledActionLink = styled('a', { name: DSBannerName, slot: DSBannerSlots.ACTION_LINK })<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 border: 2px solid transparent;\n border-radius: 2px;\n padding: 2px 4px;\n min-width: 0px;\n &:focus {\n outline: none;\n border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n }\n`;\nexport const StyledCloseButton = styled(DSButtonV2, { name: DSBannerName, slot: DSBannerSlots.CLOSE_BUTTON })`\n margin-left: ${({ theme }) => theme.space.xxs};\n min-width: 0px;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAA2C;AAE3C,uBAA2B;AAC3B,0BAAmD;AACnD,8BAA4C;AAE5C,qBAAqB;AAoBd,MAAM,4BAAwB,yBAAO,OAAO;AAAA,EACjD,MAAM;AAAA,EACN,MAAM,sCAAc;AACtB,CAAC;AAAA;AAAA,YAEW,CAAC,EAAE,OAAO,MAAO,SAAS,SAAS;AAAA,IAC3C,CAAC,EAAE,aAAa,QAAQ,OAAO,UAAM,qCAAgB,aAAa,QAAQ,MAAM;AAAA,IAChF;AAAA;AAGG,MAAM,2BAAuB,yBAAO,qBAAM;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM,sCAAc;AACtB,CAAC;AAAA;AAAA;AAAA;AAAA,sBAIqB,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA,6BAClC,CAAC,EAAE,MAAM,MAAM,UAAM,uCAAkB,MAAM,KAAK;AAAA,0BACrD,CAAC,EAAE,OAAO,MAAO,SAAS,MAAM;AAAA,IACtD,CAAC,EAAE,aAAa,OAAO,UAAM,qCAAgB,aAAa,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAkB7D,MAAM,0BAAsB,yBAAO,OAAO,EAAE,MAAM,sCAAc,MAAM,sCAAc,eAAe,CAAC;AAAA;AAAA,kBAEzF,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA,iBAC5B,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA;AAAA;AAIrC,MAAM,kBAAc,yBAAO,OAAO,EAAE,MAAM,sCAAc,MAAM,sCAAc,MAAM,CAAC;AAAA,WAC/E,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA,eACnC,CAAC,EAAE,MAAM,MAAM,MAAM,UAAU,MAAM,GAAG;AAAA,iBACtC,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAO3C,MAAM,qBAAiB,yBAAO,OAAO,EAAE,MAAM,sCAAc,MAAM,sCAAc,SAAS,CAAC;AAAA,iBAC/E,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA,eAC7B,CAAC,EAAE,MAAM,MAAM,MAAM,UAAU,SAAS,GAAG;AAAA,iBACzC,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAO3C,MAAM,uBAAmB,yBAAO,KAAK,EAAE,MAAM,sCAAc,MAAM,sCAAc,YAAY,CAAC;AAAA,iBAClF,CAAC,EAAE,OAAO,YAAY,MAAO,cAAc,MAAM,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA,eAI9D,CAAC,EAAE,MAAM,MAAM,MAAM,UAAU,UAAU,GAAG;AAAA,iBAC1C,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY;AAAA,WACvC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAOxB,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;AAGtD,MAAM,wBAAoB,yBAAO,6BAAY,EAAE,MAAM,sCAAc,MAAM,sCAAc,aAAa,CAAC;AAAA,iBAC3F,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/DSBanner.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
-
import { useLayoutEffect, useRef, useCallback, useState, useEffect } from "react";
|
|
2
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
+
import React2, { useLayoutEffect, useRef, useCallback, useState, useEffect } from "react";
|
|
4
4
|
import {
|
|
5
5
|
describe,
|
|
6
6
|
useMemoMergePropsWithDefault,
|
|
@@ -22,7 +22,19 @@ import {
|
|
|
22
22
|
} from "./styles.js";
|
|
23
23
|
const DSBanner = (props) => {
|
|
24
24
|
const propsWithDefaults = useMemoMergePropsWithDefault(props, defaultProps);
|
|
25
|
-
const {
|
|
25
|
+
const {
|
|
26
|
+
type,
|
|
27
|
+
isOpen,
|
|
28
|
+
onClose,
|
|
29
|
+
label,
|
|
30
|
+
body,
|
|
31
|
+
CustomBody,
|
|
32
|
+
actionLink,
|
|
33
|
+
showCloseButton,
|
|
34
|
+
containerProps,
|
|
35
|
+
actionRef,
|
|
36
|
+
...rest
|
|
37
|
+
} = propsWithDefaults;
|
|
26
38
|
const { height: globalHeight, ...globalAttrs } = useGetGlobalAttributes(rest);
|
|
27
39
|
const xstyledAttrs = useGetXstyledProps(rest);
|
|
28
40
|
const innerContainerRef = useRef(null);
|
|
@@ -63,12 +75,31 @@ const DSBanner = (props) => {
|
|
|
63
75
|
linkRef.current.click();
|
|
64
76
|
}
|
|
65
77
|
}, []);
|
|
78
|
+
const handleOnKeyDownToClose = useCallback(
|
|
79
|
+
(e) => {
|
|
80
|
+
if (e.key === "Escape") {
|
|
81
|
+
e.preventDefault();
|
|
82
|
+
onClose();
|
|
83
|
+
}
|
|
84
|
+
},
|
|
85
|
+
[onClose]
|
|
86
|
+
);
|
|
66
87
|
useLayoutEffect(() => {
|
|
67
88
|
if (isOpen !== current || isOpen)
|
|
68
89
|
setIsAnimating(true);
|
|
69
90
|
else
|
|
70
91
|
setIsAnimating(false);
|
|
71
92
|
}, [isOpen, current]);
|
|
93
|
+
const innerCols = React2.useMemo(() => {
|
|
94
|
+
if (!CustomBody) {
|
|
95
|
+
const finalCols = ["auto", "fit-content(50%)", "1fr"];
|
|
96
|
+
if (showCloseButton)
|
|
97
|
+
finalCols.push("auto");
|
|
98
|
+
return finalCols;
|
|
99
|
+
}
|
|
100
|
+
return ["1fr", "auto"];
|
|
101
|
+
}, [CustomBody, showCloseButton]);
|
|
102
|
+
console.log(height);
|
|
72
103
|
if (!isAnimating && !isOpen)
|
|
73
104
|
return null;
|
|
74
105
|
return /* @__PURE__ */ jsx(
|
|
@@ -76,15 +107,19 @@ const DSBanner = (props) => {
|
|
|
76
107
|
{
|
|
77
108
|
isOpen,
|
|
78
109
|
height,
|
|
110
|
+
onKeyDown: handleOnKeyDownToClose,
|
|
79
111
|
isAnimating,
|
|
80
112
|
onAnimationEnd: () => setCurrent(isOpen),
|
|
81
113
|
"data-testid": DSBannerDatatestid.CONTAINER,
|
|
82
114
|
...containerProps,
|
|
83
115
|
...globalAttrs,
|
|
84
116
|
...xstyledAttrs,
|
|
85
|
-
children: /* @__PURE__ */
|
|
117
|
+
children: /* @__PURE__ */ jsx(
|
|
86
118
|
StyledInnerContainer,
|
|
87
119
|
{
|
|
120
|
+
cols: innerCols,
|
|
121
|
+
justifyItems: CustomBody ? "center" : "",
|
|
122
|
+
alignItems: height === 41 ? "center" : "flex-start",
|
|
88
123
|
type,
|
|
89
124
|
isOpen,
|
|
90
125
|
ref: innerContainerRef,
|
|
@@ -93,7 +128,7 @@ const DSBanner = (props) => {
|
|
|
93
128
|
role: "alert",
|
|
94
129
|
tabIndex: alertTabIndex,
|
|
95
130
|
onBlur: handleBlur,
|
|
96
|
-
children: [
|
|
131
|
+
children: !CustomBody ? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
97
132
|
/* @__PURE__ */ jsx(StyledIconContainer, { "data-testid": DSBannerDatatestid.ICON_CONTAINER, children: icons[type] }),
|
|
98
133
|
/* @__PURE__ */ jsx(StyledTitle, { children: label }),
|
|
99
134
|
/* @__PURE__ */ jsxs(StyledSubTitle, { children: [
|
|
@@ -121,8 +156,8 @@ const DSBanner = (props) => {
|
|
|
121
156
|
"aria-label": "Close icon",
|
|
122
157
|
children: /* @__PURE__ */ jsx(CloseX, { width: 12, height: 12 })
|
|
123
158
|
}
|
|
124
|
-
) :
|
|
125
|
-
]
|
|
159
|
+
) : null
|
|
160
|
+
] }) : /* @__PURE__ */ jsx(CustomBody, {})
|
|
126
161
|
}
|
|
127
162
|
)
|
|
128
163
|
}
|
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", "/* eslint-disable max-lines */\nimport React, { useLayoutEffect, useRef, useCallback, useState, useEffect } from 'react';\nimport {\n describe,\n useMemoMergePropsWithDefault,\n useGetGlobalAttributes,\n useGetXstyledProps,\n} from '@elliemae/ds-props-helpers';\nimport { CloseX } from '@elliemae/ds-icons';\nimport { icons } from './utils/icons.js';\nimport { propTypes, defaultProps } from './react-desc-prop-types.js';\nimport { DSBannerDatatestid, DSBannerName } from './exported-related/index.js';\nimport {\n StyledActionLink,\n StyledCloseButton,\n StyledInnerContainer,\n StyledBannerContainer,\n StyledIconContainer,\n StyledSubTitle,\n StyledTitle,\n} from './styles.js';\nimport type { DSBannerT } from './react-desc-prop-types.js';\n\nconst DSBanner: React.ComponentType<DSBannerT.Props> = (props) => {\n const propsWithDefaults = useMemoMergePropsWithDefault(props, defaultProps);\n\n const {
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
6
|
-
"names": []
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport React, { useLayoutEffect, useRef, useCallback, useState, useEffect } from 'react';\nimport {\n describe,\n useMemoMergePropsWithDefault,\n useGetGlobalAttributes,\n useGetXstyledProps,\n} from '@elliemae/ds-props-helpers';\nimport { CloseX } from '@elliemae/ds-icons';\nimport { icons } from './utils/icons.js';\nimport { propTypes, defaultProps } from './react-desc-prop-types.js';\nimport { DSBannerDatatestid, DSBannerName } from './exported-related/index.js';\nimport {\n StyledActionLink,\n StyledCloseButton,\n StyledInnerContainer,\n StyledBannerContainer,\n StyledIconContainer,\n StyledSubTitle,\n StyledTitle,\n} from './styles.js';\nimport type { DSBannerT } from './react-desc-prop-types.js';\n\nconst DSBanner: React.ComponentType<DSBannerT.Props> = (props) => {\n const propsWithDefaults = useMemoMergePropsWithDefault(props, defaultProps);\n\n const {\n type,\n isOpen,\n onClose,\n label,\n body,\n CustomBody,\n actionLink,\n showCloseButton,\n containerProps,\n actionRef,\n ...rest\n } = propsWithDefaults;\n\n const { height: globalHeight, ...globalAttrs } = useGetGlobalAttributes(rest);\n\n const xstyledAttrs = useGetXstyledProps(rest);\n\n const innerContainerRef = useRef<HTMLDivElement>(null);\n const linkRef = useRef<HTMLAnchorElement>(null);\n const [current, setCurrent] = useState<boolean>(isOpen);\n const [isAnimating, setIsAnimating] = useState<boolean>(false);\n const [height, setHeight] = useState(0);\n const [alertTabIndex, setAlertTabIndex] = useState<number | undefined>(undefined);\n\n useEffect(() => {\n if (innerContainerRef.current) {\n setHeight(innerContainerRef.current.offsetHeight);\n }\n }, [isAnimating, isOpen]);\n\n useEffect(() => {\n if (actionRef && actionRef.current) {\n actionRef.current.focusOnWrapper = () => {\n if (innerContainerRef.current) {\n setAlertTabIndex(0);\n setTimeout(() => {\n innerContainerRef.current?.focus();\n }, 300);\n }\n };\n actionRef.current.focusOnLink = () => {\n if (linkRef.current) {\n linkRef.current.focus();\n }\n };\n }\n }, [actionRef]);\n\n const handleBlur = useCallback(() => {\n setAlertTabIndex(undefined);\n }, []);\n\n const handleOnKeyDown = useCallback((e: React.KeyboardEvent) => {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n if (linkRef.current) linkRef.current.click();\n }\n }, []);\n\n const handleOnKeyDownToClose = useCallback(\n (e: React.KeyboardEvent) => {\n if (e.key === 'Escape') {\n e.preventDefault();\n onClose();\n }\n },\n [onClose],\n );\n\n useLayoutEffect(() => {\n if (isOpen !== current || isOpen) setIsAnimating(true);\n else setIsAnimating(false);\n }, [isOpen, current]);\n\n const innerCols = React.useMemo(() => {\n if (!CustomBody) {\n const finalCols = ['auto', 'fit-content(50%)', '1fr'];\n if (showCloseButton) finalCols.push('auto');\n return finalCols;\n }\n return ['1fr', 'auto'];\n }, [CustomBody, showCloseButton]);\n\n console.log(height);\n\n if (!isAnimating && !isOpen) return null;\n\n return (\n <StyledBannerContainer\n isOpen={isOpen}\n height={height}\n onKeyDown={handleOnKeyDownToClose}\n isAnimating={isAnimating}\n onAnimationEnd={() => setCurrent(isOpen)}\n data-testid={DSBannerDatatestid.CONTAINER}\n {...containerProps}\n {...globalAttrs}\n {...xstyledAttrs}\n >\n <StyledInnerContainer\n cols={innerCols}\n justifyItems={CustomBody ? 'center' : ''}\n alignItems={height === 41 ? \"center\" : \"flex-start\"}\n type={type}\n isOpen={isOpen}\n ref={innerContainerRef}\n isAnimating={isAnimating}\n data-testid={DSBannerDatatestid.INNER_CONTAINER}\n role=\"alert\"\n tabIndex={alertTabIndex}\n onBlur={handleBlur}\n >\n {!CustomBody ? (\n <>\n <StyledIconContainer data-testid={DSBannerDatatestid.ICON_CONTAINER}>{icons[type]}</StyledIconContainer>\n <StyledTitle>{label}</StyledTitle>\n <StyledSubTitle>\n <span>{body}</span>\n {actionLink && (\n <StyledActionLink\n data-testid={DSBannerDatatestid.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 {showCloseButton ? (\n <StyledCloseButton\n data-testid={DSBannerDatatestid.CLOSE_BUTTON}\n buttonType=\"icon\"\n onClick={onClose}\n aria-label=\"Close icon\"\n >\n <CloseX width={12} height={12} />\n </StyledCloseButton>\n ) : null}\n </>\n ) : (\n <CustomBody />\n )}\n </StyledInnerContainer>\n </StyledBannerContainer>\n );\n};\n\nDSBanner.displayName = DSBannerName;\nconst DSBannerWithSchema = describe(DSBanner);\nDSBannerWithSchema.propTypes = propTypes;\n\nexport default DSBanner;\nexport { DSBanner, DSBannerWithSchema };\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;AC4Ib,mBACE,KAEA,YAHF;AA3IV,OAAOA,UAAS,iBAAiB,QAAQ,aAAa,UAAU,iBAAiB;AACjF;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,cAAc;AACvB,SAAS,aAAa;AACtB,SAAS,WAAW,oBAAoB;AACxC,SAAS,oBAAoB,oBAAoB;AACjD;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAGP,MAAM,WAAiD,CAAC,UAAU;AAChE,QAAM,oBAAoB,6BAA6B,OAAO,YAAY;AAE1E,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,EAAE,QAAQ,cAAc,GAAG,YAAY,IAAI,uBAAuB,IAAI;AAE5E,QAAM,eAAe,mBAAmB,IAAI;AAE5C,QAAM,oBAAoB,OAAuB,IAAI;AACrD,QAAM,UAAU,OAA0B,IAAI;AAC9C,QAAM,CAAC,SAAS,UAAU,IAAI,SAAkB,MAAM;AACtD,QAAM,CAAC,aAAa,cAAc,IAAI,SAAkB,KAAK;AAC7D,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,CAAC;AACtC,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAA6B,MAAS;AAEhF,YAAU,MAAM;AACd,QAAI,kBAAkB,SAAS;AAC7B,gBAAU,kBAAkB,QAAQ,YAAY;AAAA,IAClD;AAAA,EACF,GAAG,CAAC,aAAa,MAAM,CAAC;AAExB,YAAU,MAAM;AACd,QAAI,aAAa,UAAU,SAAS;AAClC,gBAAU,QAAQ,iBAAiB,MAAM;AACvC,YAAI,kBAAkB,SAAS;AAC7B,2BAAiB,CAAC;AAClB,qBAAW,MAAM;AACf,8BAAkB,SAAS,MAAM;AAAA,UACnC,GAAG,GAAG;AAAA,QACR;AAAA,MACF;AACA,gBAAU,QAAQ,cAAc,MAAM;AACpC,YAAI,QAAQ,SAAS;AACnB,kBAAQ,QAAQ,MAAM;AAAA,QACxB;AAAA,MACF;AAAA,IACF;AAAA,EACF,GAAG,CAAC,SAAS,CAAC;AAEd,QAAM,aAAa,YAAY,MAAM;AACnC,qBAAiB,MAAS;AAAA,EAC5B,GAAG,CAAC,CAAC;AAEL,QAAM,kBAAkB,YAAY,CAAC,MAA2B;AAC9D,QAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,QAAE,eAAe;AACjB,UAAI,QAAQ;AAAS,gBAAQ,QAAQ,MAAM;AAAA,IAC7C;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,yBAAyB;AAAA,IAC7B,CAAC,MAA2B;AAC1B,UAAI,EAAE,QAAQ,UAAU;AACtB,UAAE,eAAe;AACjB,gBAAQ;AAAA,MACV;AAAA,IACF;AAAA,IACA,CAAC,OAAO;AAAA,EACV;AAEA,kBAAgB,MAAM;AACpB,QAAI,WAAW,WAAW;AAAQ,qBAAe,IAAI;AAAA;AAChD,qBAAe,KAAK;AAAA,EAC3B,GAAG,CAAC,QAAQ,OAAO,CAAC;AAEpB,QAAM,YAAYA,OAAM,QAAQ,MAAM;AACpC,QAAI,CAAC,YAAY;AACf,YAAM,YAAY,CAAC,QAAQ,oBAAoB,KAAK;AACpD,UAAI;AAAiB,kBAAU,KAAK,MAAM;AAC1C,aAAO;AAAA,IACT;AACA,WAAO,CAAC,OAAO,MAAM;AAAA,EACvB,GAAG,CAAC,YAAY,eAAe,CAAC;AAEhC,UAAQ,IAAI,MAAM;AAElB,MAAI,CAAC,eAAe,CAAC;AAAQ,WAAO;AAEpC,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,WAAW;AAAA,MACX;AAAA,MACA,gBAAgB,MAAM,WAAW,MAAM;AAAA,MACvC,eAAa,mBAAmB;AAAA,MAC/B,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MAEJ;AAAA,QAAC;AAAA;AAAA,UACC,MAAM;AAAA,UACN,cAAc,aAAa,WAAW;AAAA,UACtC,YAAY,WAAW,KAAK,WAAW;AAAA,UACvC;AAAA,UACA;AAAA,UACA,KAAK;AAAA,UACL;AAAA,UACA,eAAa,mBAAmB;AAAA,UAChC,MAAK;AAAA,UACL,UAAU;AAAA,UACV,QAAQ;AAAA,UAEP,WAAC,aACA,iCACE;AAAA,gCAAC,uBAAoB,eAAa,mBAAmB,gBAAiB,gBAAM,IAAI,GAAE;AAAA,YAClF,oBAAC,eAAa,iBAAM;AAAA,YACpB,qBAAC,kBACC;AAAA,kCAAC,UAAM,gBAAK;AAAA,cACX,cACC;AAAA,gBAAC;AAAA;AAAA,kBACC,eAAa,mBAAmB;AAAA,kBAChC,SAAS,WAAW;AAAA,kBACpB,MAAM,WAAW;AAAA,kBACjB,KAAK;AAAA,kBACL,WAAW;AAAA,kBACX,UAAU;AAAA,kBACV,aAAa;AAAA,kBAEZ,qBAAW;AAAA;AAAA,cACd;AAAA,eAEJ;AAAA,YACC,kBACC;AAAA,cAAC;AAAA;AAAA,gBACC,eAAa,mBAAmB;AAAA,gBAChC,YAAW;AAAA,gBACX,SAAS;AAAA,gBACT,cAAW;AAAA,gBAEX,8BAAC,UAAO,OAAO,IAAI,QAAQ,IAAI;AAAA;AAAA,YACjC,IACE;AAAA,aACN,IAEA,oBAAC,cAAW;AAAA;AAAA,MAEhB;AAAA;AAAA,EACF;AAEJ;AAEA,SAAS,cAAc;AACvB,MAAM,qBAAqB,SAAS,QAAQ;AAC5C,mBAAmB,YAAY;AAE/B,IAAO,mBAAQ;",
|
|
6
|
+
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/exported-related/DSBannerDatatestid.ts"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const DSBannerDatatestid = {\n CONTAINER: 'ds-banner-container',\n INNER_CONTAINER: 'ds-banner',\n ICON_CONTAINER: 'ds-banner-icon',\n ACTION_LINK: 'ds-banner-action-link',\n CLOSE_BUTTON: 'ds-banner-close-button',\n};\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAhB,MAAM,qBAAqB;AAAA,EAChC,WAAW;AAAA,EACX,iBAAiB;AAAA,EACjB,gBAAgB;AAAA,EAChB,aAAa;AAAA,EACb,cAAc;AAChB;",
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const DSBannerDatatestid = {\n CONTAINER: 'ds-banner-container',\n CUSTOM_CONTAINER: 'ds-banner-custom-container',\n INNER_CONTAINER: 'ds-banner',\n ICON_CONTAINER: 'ds-banner-icon',\n ACTION_LINK: 'ds-banner-action-link',\n CLOSE_BUTTON: 'ds-banner-close-button',\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAhB,MAAM,qBAAqB;AAAA,EAChC,WAAW;AAAA,EACX,kBAAkB;AAAA,EAClB,iBAAiB;AAAA,EACjB,gBAAgB;AAAA,EAChB,aAAa;AAAA,EACb,cAAc;AAChB;",
|
|
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/exported-related/theming.ts"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const DSBannerName = 'DSBanner';\n\nexport const DSBannerSlots = {\n CONTAINER: 'root',\n INNER_CONTAINER: 'inner-container',\n TITLE: 'title',\n SUBTITLE: 'subtitle',\n ICON_CONTAINER: 'icon-container',\n ACTION_LINK: 'action-link',\n CLOSE_BUTTON: 'close-button',\n};\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAhB,MAAM,eAAe;AAErB,MAAM,gBAAgB;AAAA,EAC3B,WAAW;AAAA,EACX,iBAAiB;AAAA,EACjB,OAAO;AAAA,EACP,UAAU;AAAA,EACV,gBAAgB;AAAA,EAChB,aAAa;AAAA,EACb,cAAc;AAChB;",
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const DSBannerName = 'DSBanner';\n\nexport const DSBannerSlots = {\n CONTAINER: 'root',\n INNER_CONTAINER: 'inner-container',\n CUSTOM_CONTAINER: 'custom-container',\n TITLE: 'title',\n SUBTITLE: 'subtitle',\n ICON_CONTAINER: 'icon-container',\n ACTION_LINK: 'action-link',\n CLOSE_BUTTON: 'close-button',\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAhB,MAAM,eAAe;AAErB,MAAM,gBAAgB;AAAA,EAC3B,WAAW;AAAA,EACX,iBAAiB;AAAA,EACjB,kBAAkB;AAAA,EAClB,OAAO;AAAA,EACP,UAAU;AAAA,EACV,gBAAgB;AAAA,EAChB,aAAa;AAAA,EACb,cAAc;AAChB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -16,6 +16,7 @@ const propTypes = {
|
|
|
16
16
|
containerProps: PropTypes.object.description("Set of Properties attached to the main container.").defaultValue({}),
|
|
17
17
|
label: PropTypes.string.description("Banner label.").defaultValue(""),
|
|
18
18
|
body: PropTypes.string.description("Banner body content").defaultValue(""),
|
|
19
|
+
CustomBody: PropTypes.func.description("Banner custom content").defaultValue(""),
|
|
19
20
|
type: PropTypes.oneOf(Object.values(BANNER_TYPES)).description("Banner type.").defaultValue(BANNER_TYPES.INFO),
|
|
20
21
|
onClose: PropTypes.func.description("Callback when the Banner closes."),
|
|
21
22
|
isOpen: PropTypes.bool.description("Whether the Banner is open or closed.").defaultValue(true),
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.ts"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { WeakValidationMap } from 'react';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport { BANNER_TYPES } from './exported-related/index.js';\nimport type { DSBannerInternalsT } from './sharedTypes.js';\n\nexport declare namespace DSBannerT {\n export interface Props {\n type?: DSBannerInternalsT.BannerTypesT;\n isOpen?: boolean;\n onClose?: () => void | null;\n actionLink?: DSBannerInternalsT.ActionLinkT;\n label?: string;\n body?: string;\n showCloseButton?: boolean;\n containerProps?: Record<string, unknown>;\n actionRef?: {\n current: {\n focusOnWrapper?: () => void;\n focusOnLink?: () => void;\n };\n };\n }\n}\n\nexport const defaultProps: DSBannerT.Props = {\n containerProps: {},\n label: '',\n body: '',\n type: BANNER_TYPES.INFO,\n isOpen: true,\n onClose: () => null,\n showCloseButton: true,\n};\n\nexport const propTypes = {\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n containerProps: PropTypes.object.description('Set of Properties attached to the main container.').defaultValue({}),\n label: PropTypes.string.description('Banner label.').defaultValue(''),\n body: PropTypes.string.description('Banner body content').defaultValue(''),\n type: PropTypes.oneOf(Object.values(BANNER_TYPES)).description('Banner type.').defaultValue(BANNER_TYPES.INFO),\n onClose: PropTypes.func.description('Callback when the Banner closes.'),\n isOpen: PropTypes.bool.description('Whether the Banner is open or closed.').defaultValue(true),\n showCloseButton: PropTypes.bool.description('Whether to show close button or not.').defaultValue(true),\n actionLink: PropTypes.shape({\n label: PropTypes.string,\n onClick: PropTypes.func,\n href: PropTypes.string,\n })\n .description('Properties for the Action Link.')\n .defaultValue({}),\n actionRef: PropTypes.object\n .description(\n `\n Reference to use actions:\n - focusOnLink: function to focus the banner\n - focusOnWrapper: function to focus the link\n `,\n )\n .defaultValue({}),\n} as WeakValidationMap<unknown>;\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,WAAW,2BAA2B,wBAAwB;AACvE,SAAS,oBAAoB;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { WeakValidationMap } from 'react';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport { BANNER_TYPES } from './exported-related/index.js';\nimport type { DSBannerInternalsT } from './sharedTypes.js';\n\nexport declare namespace DSBannerT {\n export interface Props {\n type?: DSBannerInternalsT.BannerTypesT;\n isOpen?: boolean;\n onClose?: () => void | null;\n actionLink?: DSBannerInternalsT.ActionLinkT;\n label?: string;\n body?: string;\n CustomBody?: React.ComponentType<{}>;\n showCloseButton?: boolean;\n containerProps?: Record<string, unknown>;\n actionRef?: {\n current: {\n focusOnWrapper?: () => void;\n focusOnLink?: () => void;\n };\n };\n }\n}\n\nexport const defaultProps: DSBannerT.Props = {\n containerProps: {},\n label: '',\n body: '',\n type: BANNER_TYPES.INFO,\n isOpen: true,\n onClose: () => null,\n showCloseButton: true,\n};\n\nexport const propTypes = {\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n containerProps: PropTypes.object.description('Set of Properties attached to the main container.').defaultValue({}),\n label: PropTypes.string.description('Banner label.').defaultValue(''),\n body: PropTypes.string.description('Banner body content').defaultValue(''),\n CustomBody: PropTypes.func.description('Banner custom content').defaultValue(''),\n type: PropTypes.oneOf(Object.values(BANNER_TYPES)).description('Banner type.').defaultValue(BANNER_TYPES.INFO),\n onClose: PropTypes.func.description('Callback when the Banner closes.'),\n isOpen: PropTypes.bool.description('Whether the Banner is open or closed.').defaultValue(true),\n showCloseButton: PropTypes.bool.description('Whether to show close button or not.').defaultValue(true),\n actionLink: PropTypes.shape({\n label: PropTypes.string,\n onClick: PropTypes.func,\n href: PropTypes.string,\n })\n .description('Properties for the Action Link.')\n .defaultValue({}),\n actionRef: PropTypes.object\n .description(\n `\n Reference to use actions:\n - focusOnLink: function to focus the banner\n - focusOnWrapper: function to focus the link\n `,\n )\n .defaultValue({}),\n} as WeakValidationMap<unknown>;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,WAAW,2BAA2B,wBAAwB;AACvE,SAAS,oBAAoB;AAuBtB,MAAM,eAAgC;AAAA,EAC3C,gBAAgB,CAAC;AAAA,EACjB,OAAO;AAAA,EACP,MAAM;AAAA,EACN,MAAM,aAAa;AAAA,EACnB,QAAQ;AAAA,EACR,SAAS,MAAM;AAAA,EACf,iBAAiB;AACnB;AAEO,MAAM,YAAY;AAAA,EACvB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,gBAAgB,UAAU,OAAO,YAAY,mDAAmD,EAAE,aAAa,CAAC,CAAC;AAAA,EACjH,OAAO,UAAU,OAAO,YAAY,eAAe,EAAE,aAAa,EAAE;AAAA,EACpE,MAAM,UAAU,OAAO,YAAY,qBAAqB,EAAE,aAAa,EAAE;AAAA,EACzE,YAAY,UAAU,KAAK,YAAY,uBAAuB,EAAE,aAAa,EAAE;AAAA,EAC/E,MAAM,UAAU,MAAM,OAAO,OAAO,YAAY,CAAC,EAAE,YAAY,cAAc,EAAE,aAAa,aAAa,IAAI;AAAA,EAC7G,SAAS,UAAU,KAAK,YAAY,kCAAkC;AAAA,EACtE,QAAQ,UAAU,KAAK,YAAY,uCAAuC,EAAE,aAAa,IAAI;AAAA,EAC7F,iBAAiB,UAAU,KAAK,YAAY,sCAAsC,EAAE,aAAa,IAAI;AAAA,EACrG,YAAY,UAAU,MAAM;AAAA,IAC1B,OAAO,UAAU;AAAA,IACjB,SAAS,UAAU;AAAA,IACnB,MAAM,UAAU;AAAA,EAClB,CAAC,EACE,YAAY,iCAAiC,EAC7C,aAAa,CAAC,CAAC;AAAA,EAClB,WAAW,UAAU,OAClB;AAAA,IACC;AAAA;AAAA;AAAA;AAAA;AAAA,EAKF,EACC,aAAa,CAAC,CAAC;AACpB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/styles.js
CHANGED
|
@@ -3,6 +3,7 @@ import { styled, xStyledCommonProps } from "@elliemae/ds-system";
|
|
|
3
3
|
import { DSButtonV2 } from "@elliemae/ds-button";
|
|
4
4
|
import { handleAnimation, handleBorderColor } from "./utils/styleHelpers.js";
|
|
5
5
|
import { DSBannerName, DSBannerSlots } from "./exported-related/index.js";
|
|
6
|
+
import { Grid } from "@elliemae/ds-grid";
|
|
6
7
|
const StyledBannerContainer = styled("div", {
|
|
7
8
|
name: DSBannerName,
|
|
8
9
|
slot: DSBannerSlots.CONTAINER
|
|
@@ -12,13 +13,11 @@ const StyledBannerContainer = styled("div", {
|
|
|
12
13
|
${({ isAnimating, isOpen, height }) => handleAnimation(isAnimating, isOpen, height)};
|
|
13
14
|
${xStyledCommonProps}
|
|
14
15
|
`;
|
|
15
|
-
const StyledInnerContainer = styled(
|
|
16
|
+
const StyledInnerContainer = styled(Grid, {
|
|
16
17
|
name: DSBannerName,
|
|
17
18
|
slot: DSBannerSlots.INNER_CONTAINER
|
|
18
19
|
})`
|
|
19
20
|
padding-right: 6px;
|
|
20
|
-
display: grid;
|
|
21
|
-
align-items: center;
|
|
22
21
|
min-height: 41px;
|
|
23
22
|
width: 100%;
|
|
24
23
|
background-color: ${({ theme }) => theme.colors.neutral["000"]};
|
|
@@ -37,25 +36,33 @@ const StyledInnerContainer = styled("div", {
|
|
|
37
36
|
border-radius: 2px;
|
|
38
37
|
width: calc(100%);
|
|
39
38
|
border: 2px solid #1e79c2;
|
|
40
|
-
height: calc(100%
|
|
39
|
+
height: calc(100%);
|
|
41
40
|
}
|
|
42
41
|
}
|
|
43
|
-
grid-template-columns: auto minmax(auto, auto) minmax(auto, 1fr) auto;
|
|
44
42
|
`;
|
|
45
43
|
const StyledIconContainer = styled("div", { name: DSBannerName, slot: DSBannerSlots.ICON_CONTAINER })`
|
|
44
|
+
margin-top: 5px;
|
|
46
45
|
margin-right: ${({ theme }) => theme.space.xxs};
|
|
47
46
|
margin-left: ${({ theme }) => theme.space.xs};
|
|
47
|
+
min-width: 0px;
|
|
48
48
|
`;
|
|
49
49
|
const StyledTitle = styled("div", { name: DSBannerName, slot: DSBannerSlots.TITLE })`
|
|
50
50
|
color: ${({ theme }) => theme.colors.neutral[700]};
|
|
51
51
|
font-size: ${({ theme }) => theme.fontSizes.label[400]};
|
|
52
52
|
font-weight: ${({ theme }) => theme.fontWeights.semibold};
|
|
53
|
+
overflow-wrap: break-word;
|
|
54
|
+
white-space: pre-wrap;
|
|
55
|
+
margin-top: 5px;
|
|
56
|
+
min-width: 0px;
|
|
53
57
|
`;
|
|
54
58
|
const StyledSubTitle = styled("div", { name: DSBannerName, slot: DSBannerSlots.SUBTITLE })`
|
|
55
|
-
width: 100%;
|
|
56
59
|
margin-left: ${({ theme }) => theme.space.xs};
|
|
57
60
|
font-size: ${({ theme }) => theme.fontSizes.subTitle[400]};
|
|
58
61
|
font-weight: ${({ theme }) => theme.fontWeights.regular};
|
|
62
|
+
margin-top: 5px;
|
|
63
|
+
overflow-wrap: break-word;
|
|
64
|
+
white-space: pre-wrap;
|
|
65
|
+
min-width: 0px;
|
|
59
66
|
`;
|
|
60
67
|
const StyledActionLink = styled("a", { name: DSBannerName, slot: DSBannerSlots.ACTION_LINK })`
|
|
61
68
|
margin-left: ${({ theme, isBodyEmpty }) => isBodyEmpty ? theme.space.xs : 0};
|
|
@@ -68,6 +75,7 @@ const StyledActionLink = styled("a", { name: DSBannerName, slot: DSBannerSlots.A
|
|
|
68
75
|
border: 2px solid transparent;
|
|
69
76
|
border-radius: 2px;
|
|
70
77
|
padding: 2px 4px;
|
|
78
|
+
min-width: 0px;
|
|
71
79
|
&:focus {
|
|
72
80
|
outline: none;
|
|
73
81
|
border: 2px solid ${({ theme }) => theme.colors.brand[700]};
|
|
@@ -75,6 +83,7 @@ const StyledActionLink = styled("a", { name: DSBannerName, slot: DSBannerSlots.A
|
|
|
75
83
|
`;
|
|
76
84
|
const StyledCloseButton = styled(DSButtonV2, { name: DSBannerName, slot: DSBannerSlots.CLOSE_BUTTON })`
|
|
77
85
|
margin-left: ${({ theme }) => theme.space.xxs};
|
|
86
|
+
min-width: 0px;
|
|
78
87
|
`;
|
|
79
88
|
export {
|
|
80
89
|
StyledActionLink,
|
package/dist/esm/styles.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/styles.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport type { SizingProps, LayoutProps, SpaceProps, ColorProps } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button';\nimport { handleAnimation, handleBorderColor } from './utils/styleHelpers.js';\nimport { DSBannerName, DSBannerSlots } from './exported-related/index.js';\nimport type { DSBannerInternalsT } from './sharedTypes.js';\nimport type {} from '@xstyled/util';\nimport type {} from '@xstyled/system';\n\ninterface StyledBannerContainerT extends SizingProps, LayoutProps, SpaceProps, ColorProps {\n isOpen: boolean;\n isAnimating: boolean;\n height: number;\n}\n\ninterface StyledInnerContainerT {\n type: DSBannerInternalsT.BannerTypesT;\n isOpen: boolean;\n isAnimating: boolean;\n}\n\ninterface StyledActionLinkT {\n isBodyEmpty: string;\n}\n\nexport const StyledBannerContainer = styled('div', {\n name: DSBannerName,\n slot: DSBannerSlots.CONTAINER,\n})<StyledBannerContainerT>`\n overflow: hidden;\n height: ${({ isOpen }) => (isOpen ? 'auto' : '0px')};\n ${({ isAnimating, isOpen, height }) => handleAnimation(isAnimating, isOpen, height)};\n ${xStyledCommonProps}\n`;\n\nexport const StyledInnerContainer = styled(
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,QAAQ,0BAA0B;AAE3C,SAAS,kBAAkB;AAC3B,SAAS,iBAAiB,yBAAyB;AACnD,SAAS,cAAc,qBAAqB;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport type { SizingProps, LayoutProps, SpaceProps, ColorProps } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button';\nimport { handleAnimation, handleBorderColor } from './utils/styleHelpers.js';\nimport { DSBannerName, DSBannerSlots } from './exported-related/index.js';\nimport type { DSBannerInternalsT } from './sharedTypes.js';\nimport { Grid } from '@elliemae/ds-grid';\nimport type {} from '@xstyled/util';\nimport type {} from '@xstyled/system';\n\ninterface StyledBannerContainerT extends SizingProps, LayoutProps, SpaceProps, ColorProps {\n isOpen: boolean;\n isAnimating: boolean;\n height: number;\n}\n\ninterface StyledInnerContainerT {\n type: DSBannerInternalsT.BannerTypesT;\n isOpen: boolean;\n isAnimating: boolean;\n}\n\ninterface StyledActionLinkT {\n isBodyEmpty: string;\n}\n\nexport const StyledBannerContainer = styled('div', {\n name: DSBannerName,\n slot: DSBannerSlots.CONTAINER,\n})<StyledBannerContainerT>`\n overflow: hidden;\n height: ${({ isOpen }) => (isOpen ? 'auto' : '0px')};\n ${({ isAnimating, isOpen, height }) => handleAnimation(isAnimating, isOpen, height)};\n ${xStyledCommonProps}\n`;\n\nexport const StyledInnerContainer = styled(Grid, {\n name: DSBannerName,\n slot: DSBannerSlots.INNER_CONTAINER,\n})<StyledInnerContainerT>`\n padding-right: 6px;\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 transform: translateY(${({ isOpen }) => (isOpen ? '0' : '-100%')});\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%);\n }\n }\n`;\n\nexport const StyledIconContainer = styled('div', { name: DSBannerName, slot: DSBannerSlots.ICON_CONTAINER })`\n margin-top: 5px;\n margin-right: ${({ theme }) => theme.space.xxs};\n margin-left: ${({ theme }) => theme.space.xs};\n min-width: 0px;\n`;\n\nexport const StyledTitle = styled('div', { name: DSBannerName, slot: DSBannerSlots.TITLE })`\n color: ${({ theme }) => theme.colors.neutral[700]};\n font-size: ${({ theme }) => theme.fontSizes.label[400]};\n font-weight: ${({ theme }) => theme.fontWeights.semibold};\n overflow-wrap: break-word;\n white-space: pre-wrap;\n margin-top: 5px;\n min-width: 0px;\n`;\n\nexport const StyledSubTitle = styled('div', { name: DSBannerName, slot: DSBannerSlots.SUBTITLE })`\n margin-left: ${({ theme }) => theme.space.xs};\n font-size: ${({ theme }) => theme.fontSizes.subTitle[400]};\n font-weight: ${({ theme }) => theme.fontWeights.regular};\n margin-top: 5px;\n overflow-wrap: break-word;\n white-space: pre-wrap;\n min-width: 0px;\n`;\n\nexport const StyledActionLink = styled('a', { name: DSBannerName, slot: DSBannerSlots.ACTION_LINK })<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 border: 2px solid transparent;\n border-radius: 2px;\n padding: 2px 4px;\n min-width: 0px;\n &:focus {\n outline: none;\n border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n }\n`;\nexport const StyledCloseButton = styled(DSButtonV2, { name: DSBannerName, slot: DSBannerSlots.CLOSE_BUTTON })`\n margin-left: ${({ theme }) => theme.space.xxs};\n min-width: 0px;\n`;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,QAAQ,0BAA0B;AAE3C,SAAS,kBAAkB;AAC3B,SAAS,iBAAiB,yBAAyB;AACnD,SAAS,cAAc,qBAAqB;AAE5C,SAAS,YAAY;AAoBd,MAAM,wBAAwB,OAAO,OAAO;AAAA,EACjD,MAAM;AAAA,EACN,MAAM,cAAc;AACtB,CAAC;AAAA;AAAA,YAEW,CAAC,EAAE,OAAO,MAAO,SAAS,SAAS;AAAA,IAC3C,CAAC,EAAE,aAAa,QAAQ,OAAO,MAAM,gBAAgB,aAAa,QAAQ,MAAM;AAAA,IAChF;AAAA;AAGG,MAAM,uBAAuB,OAAO,MAAM;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM,cAAc;AACtB,CAAC;AAAA;AAAA;AAAA;AAAA,sBAIqB,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA,6BAClC,CAAC,EAAE,MAAM,MAAM,MAAM,kBAAkB,MAAM,KAAK;AAAA,0BACrD,CAAC,EAAE,OAAO,MAAO,SAAS,MAAM;AAAA,IACtD,CAAC,EAAE,aAAa,OAAO,MAAM,gBAAgB,aAAa,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAkB7D,MAAM,sBAAsB,OAAO,OAAO,EAAE,MAAM,cAAc,MAAM,cAAc,eAAe,CAAC;AAAA;AAAA,kBAEzF,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA,iBAC5B,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA;AAAA;AAIrC,MAAM,cAAc,OAAO,OAAO,EAAE,MAAM,cAAc,MAAM,cAAc,MAAM,CAAC;AAAA,WAC/E,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA,eACnC,CAAC,EAAE,MAAM,MAAM,MAAM,UAAU,MAAM,GAAG;AAAA,iBACtC,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAO3C,MAAM,iBAAiB,OAAO,OAAO,EAAE,MAAM,cAAc,MAAM,cAAc,SAAS,CAAC;AAAA,iBAC/E,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA,eAC7B,CAAC,EAAE,MAAM,MAAM,MAAM,UAAU,SAAS,GAAG;AAAA,iBACzC,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAO3C,MAAM,mBAAmB,OAAO,KAAK,EAAE,MAAM,cAAc,MAAM,cAAc,YAAY,CAAC;AAAA,iBAClF,CAAC,EAAE,OAAO,YAAY,MAAO,cAAc,MAAM,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA,eAI9D,CAAC,EAAE,MAAM,MAAM,MAAM,UAAU,UAAU,GAAG;AAAA,iBAC1C,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY;AAAA,WACvC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAOxB,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;AAGtD,MAAM,oBAAoB,OAAO,YAAY,EAAE,MAAM,cAAc,MAAM,cAAc,aAAa,CAAC;AAAA,iBAC3F,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/types/styles.d.ts
CHANGED
|
@@ -15,7 +15,7 @@ interface StyledActionLinkT {
|
|
|
15
15
|
isBodyEmpty: string;
|
|
16
16
|
}
|
|
17
17
|
export declare const StyledBannerContainer: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, StyledBannerContainerT, never>;
|
|
18
|
-
export declare const StyledInnerContainer: import("styled-components").StyledComponent<"
|
|
18
|
+
export declare const StyledInnerContainer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/dist/types/react-desc-prop-types.js").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("@elliemae/ds-system").Theme, StyledInnerContainerT, never>;
|
|
19
19
|
export declare const StyledIconContainer: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object, never>;
|
|
20
20
|
export declare const StyledTitle: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object, never>;
|
|
21
21
|
export declare const StyledSubTitle: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object, never>;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-banner",
|
|
3
|
-
"version": "3.17.0-next.
|
|
3
|
+
"version": "3.17.0-next.5",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Banner",
|
|
6
6
|
"files": [
|
|
@@ -63,11 +63,11 @@
|
|
|
63
63
|
"indent": 4
|
|
64
64
|
},
|
|
65
65
|
"dependencies": {
|
|
66
|
-
"@elliemae/ds-button": "3.17.0-next.
|
|
67
|
-
"@elliemae/ds-icons": "3.17.0-next.
|
|
68
|
-
"@elliemae/ds-props-helpers": "3.17.0-next.
|
|
69
|
-
"@elliemae/ds-system": "3.17.0-next.
|
|
70
|
-
"@elliemae/ds-utilities": "3.17.0-next.
|
|
66
|
+
"@elliemae/ds-button": "3.17.0-next.5",
|
|
67
|
+
"@elliemae/ds-icons": "3.17.0-next.5",
|
|
68
|
+
"@elliemae/ds-props-helpers": "3.17.0-next.5",
|
|
69
|
+
"@elliemae/ds-system": "3.17.0-next.5",
|
|
70
|
+
"@elliemae/ds-utilities": "3.17.0-next.5"
|
|
71
71
|
},
|
|
72
72
|
"devDependencies": {
|
|
73
73
|
"@testing-library/jest-dom": "~5.16.5",
|