@elliemae/ds-banner 3.2.0-rc.2 → 3.2.0
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 +2 -4
- package/dist/cjs/DSBanner.js.map +2 -2
- package/dist/cjs/index.js.map +2 -2
- package/dist/cjs/react-desc-prop-types.js +2 -4
- package/dist/cjs/react-desc-prop-types.js.map +2 -2
- package/dist/cjs/styles.js.map +2 -2
- package/dist/cjs/utils/styleHelpers.js +2 -0
- package/dist/cjs/utils/styleHelpers.js.map +2 -2
- package/dist/esm/DSBanner.js +7 -4
- package/dist/esm/DSBanner.js.map +2 -2
- package/dist/esm/index.js.map +2 -2
- package/dist/esm/react-desc-prop-types.js +2 -4
- package/dist/esm/react-desc-prop-types.js.map +2 -2
- package/dist/esm/styles.js.map +2 -2
- package/dist/esm/utils/styleHelpers.js +2 -0
- package/dist/esm/utils/styleHelpers.js.map +2 -2
- package/package.json +6 -6
package/dist/cjs/DSBanner.js
CHANGED
|
@@ -55,7 +55,6 @@ var React = __toESM(require("react"));
|
|
|
55
55
|
var import_react = __toESM(require("react"));
|
|
56
56
|
var import_ds_utilities = require("@elliemae/ds-utilities");
|
|
57
57
|
var import_ds_icons = require("@elliemae/ds-icons");
|
|
58
|
-
var import_ds_utilities2 = require("@elliemae/ds-utilities");
|
|
59
58
|
var import_icons = require("./utils/icons");
|
|
60
59
|
var import_react_desc_prop_types = require("./react-desc-prop-types");
|
|
61
60
|
var import_exported_related = require("./exported-related");
|
|
@@ -63,7 +62,7 @@ var import_styles = require("./styles");
|
|
|
63
62
|
const DSBanner = (props) => {
|
|
64
63
|
const propsWithDefaults = (0, import_ds_utilities.useMemoMergePropsWithDefault)(props, import_react_desc_prop_types.defaultProps);
|
|
65
64
|
const _a = propsWithDefaults, { type, isOpen, onClose, label, body, actionLink, showCloseButton, containerProps, actionRef } = _a, rest = __objRest(_a, ["type", "isOpen", "onClose", "label", "body", "actionLink", "showCloseButton", "containerProps", "actionRef"]);
|
|
66
|
-
const
|
|
65
|
+
const _b = (0, import_ds_utilities.useGetGlobalAttributes)(rest), { height: globalHeight } = _b, globalAttrs = __objRest(_b, ["height"]);
|
|
67
66
|
const xstyledAttrs = (0, import_ds_utilities.useGetXstyledProps)(rest);
|
|
68
67
|
const innerContainerRef = (0, import_react.useRef)(null);
|
|
69
68
|
const linkRef = (0, import_react.useRef)(null);
|
|
@@ -112,7 +111,6 @@ const DSBanner = (props) => {
|
|
|
112
111
|
if (!isAnimating && !isOpen)
|
|
113
112
|
return null;
|
|
114
113
|
return /* @__PURE__ */ import_react.default.createElement(import_styles.StyledBannerContainer, __spreadValues(__spreadValues(__spreadValues({
|
|
115
|
-
type,
|
|
116
114
|
isOpen,
|
|
117
115
|
height,
|
|
118
116
|
isAnimating,
|
|
@@ -148,7 +146,7 @@ const DSBanner = (props) => {
|
|
|
148
146
|
})) : /* @__PURE__ */ import_react.default.createElement("span", null)));
|
|
149
147
|
};
|
|
150
148
|
DSBanner.displayName = import_exported_related.DSBannerName;
|
|
151
|
-
const DSBannerWithSchema = (0,
|
|
149
|
+
const DSBannerWithSchema = (0, import_ds_utilities.describe)(DSBanner);
|
|
152
150
|
DSBannerWithSchema.propTypes = import_react_desc_prop_types.propTypes;
|
|
153
151
|
var DSBanner_default = DSBanner;
|
|
154
152
|
//# sourceMappingURL=DSBanner.js.map
|
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 {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAiF;AACjF,
|
|
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-utilities';\nimport { CloseX } from '@elliemae/ds-icons';\nimport { icons } from './utils/icons';\nimport { propTypes, defaultProps } from './react-desc-prop-types';\nimport { DSBannerDatatestid, DSBannerName } from './exported-related';\nimport {\n StyledActionLink,\n StyledCloseButton,\n StyledInnerContainer,\n StyledBannerContainer,\n StyledIconContainer,\n StyledSubTitle,\n StyledTitle,\n} from './styles';\nimport type { DSBannerT } from './react-desc-prop-types';\n\nconst DSBanner: React.ComponentType<DSBannerT.Props> = (props) => {\n const propsWithDefaults = useMemoMergePropsWithDefault(props, defaultProps);\n\n const { type, isOpen, onClose, label, body, actionLink, showCloseButton, containerProps, actionRef, ...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 useLayoutEffect(() => {\n if (isOpen !== current || isOpen) setIsAnimating(true);\n else setIsAnimating(false);\n }, [isOpen, current]);\n\n if (!isAnimating && !isOpen) return null;\n\n return (\n <StyledBannerContainer\n isOpen={isOpen}\n height={height}\n isAnimating={isAnimating}\n onAnimationEnd={() => setCurrent(isOpen)}\n data-testid={DSBannerDatatestid.CONTAINER}\n {...containerProps}\n {...globalAttrs}\n {...xstyledAttrs}\n >\n <StyledInnerContainer\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 <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 ) : (\n <span />\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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAiF;AACjF,0BAKO;AACP,sBAAuB;AACvB,mBAAsB;AACtB,mCAAwC;AACxC,8BAAiD;AACjD,oBAQO;AAGP,MAAM,WAAiD,CAAC,UAAU;AAChE,QAAM,oBAAoB,sDAA6B,OAAO,yCAAY;AAE1E,QACE,wBADM,QAAM,QAAQ,SAAS,OAAO,MAAM,YAAY,iBAAiB,gBAAgB,cACvF,IADqG,iBACrG,IADqG,CAA/F,QAAM,UAAQ,WAAS,SAAO,QAAM,cAAY,mBAAiB,kBAAgB;AAGzF,QAAiD,qDAAuB,IAAI,GAApE,UAAQ,iBAAiC,IAAhB,wBAAgB,IAAhB,CAAzB;AAER,QAAM,eAAe,4CAAmB,IAAI;AAE5C,QAAM,oBAAoB,yBAAuB,IAAI;AACrD,QAAM,UAAU,yBAA0B,IAAI;AAC9C,QAAM,CAAC,SAAS,cAAc,2BAAkB,MAAM;AACtD,QAAM,CAAC,aAAa,kBAAkB,2BAAkB,KAAK;AAC7D,QAAM,CAAC,QAAQ,aAAa,2BAAS,CAAC;AACtC,QAAM,CAAC,eAAe,oBAAoB,2BAA6B,MAAS;AAEhF,8BAAU,MAAM;AACd,QAAI,kBAAkB,SAAS;AAC7B,gBAAU,kBAAkB,QAAQ,YAAY;AAAA,IAClD;AAAA,EACF,GAAG,CAAC,aAAa,MAAM,CAAC;AAExB,8BAAU,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,8BAAY,MAAM;AACnC,qBAAiB,MAAS;AAAA,EAC5B,GAAG,CAAC,CAAC;AAEL,QAAM,kBAAkB,8BAAY,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,oCAAgB,MAAM;AACpB,QAAI,WAAW,WAAW;AAAQ,qBAAe,IAAI;AAAA;AAChD,qBAAe,KAAK;AAAA,EAC3B,GAAG,CAAC,QAAQ,OAAO,CAAC;AAEpB,MAAI,CAAC,eAAe,CAAC;AAAQ,WAAO;AAEpC,SACE,mDAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB,MAAM,WAAW,MAAM;AAAA,IACvC,eAAa,2CAAmB;AAAA,KAC5B,iBACA,cACA,eAEJ,mDAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA,KAAK;AAAA,IACL;AAAA,IACA,eAAa,2CAAmB;AAAA,IAChC,MAAK;AAAA,IACL,UAAU;AAAA,IACV,QAAQ;AAAA,KAER,mDAAC;AAAA,IAAoB,eAAa,2CAAmB;AAAA,KAAiB,mBAAM,KAAM,GAClF,mDAAC,iCAAa,KAAM,GACpB,mDAAC,oCACC,mDAAC,cAAM,IAAK,GACX,cACC,mDAAC;AAAA,IACC,eAAa,2CAAmB;AAAA,IAChC,SAAS,WAAW;AAAA,IACpB,MAAM,WAAW;AAAA,IACjB,KAAK;AAAA,IACL,WAAW;AAAA,IACX,UAAU;AAAA,IACV,aAAa;AAAA,KAEZ,WAAW,KACd,CAEJ,GACC,kBACC,mDAAC;AAAA,IACC,eAAa,2CAAmB;AAAA,IAChC,YAAW;AAAA,IACX,SAAS;AAAA,IACT,cAAW;AAAA,KAEX,mDAAC;AAAA,IAAO,OAAO;AAAA,IAAI,QAAQ;AAAA,GAAI,CACjC,IAEA,mDAAC,YAAK,CAEV,CACF;AAEJ;AAEA,SAAS,cAAc;AACvB,MAAM,qBAAqB,kCAAS,QAAQ;AAC5C,mBAAmB,YAAY;AAE/B,IAAO,mBAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/index.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/index.ts", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["// eslint-disable-next-line no-restricted-exports\nexport { default } from './DSBanner';\nexport * from './DSBanner';\nexport * from './exported-related';\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,sBAAwB;AACxB,wBAAc,uBAFd;AAGA,wBAAc,+BAHd;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -42,9 +42,8 @@ __export(react_desc_prop_types_exports, {
|
|
|
42
42
|
});
|
|
43
43
|
module.exports = __toCommonJS(react_desc_prop_types_exports);
|
|
44
44
|
var React = __toESM(require("react"));
|
|
45
|
-
var import_exported_related = require("./exported-related");
|
|
46
45
|
var import_ds_utilities = require("@elliemae/ds-utilities");
|
|
47
|
-
|
|
46
|
+
var import_exported_related = require("./exported-related");
|
|
48
47
|
const defaultProps = {
|
|
49
48
|
containerProps: {},
|
|
50
49
|
label: "",
|
|
@@ -52,8 +51,7 @@ const defaultProps = {
|
|
|
52
51
|
type: import_exported_related.BANNER_TYPES.INFO,
|
|
53
52
|
isOpen: true,
|
|
54
53
|
onClose: () => null,
|
|
55
|
-
showCloseButton: true
|
|
56
|
-
actionLink: { label: "", onClick: noop, href: "" }
|
|
54
|
+
showCloseButton: true
|
|
57
55
|
};
|
|
58
56
|
const propTypes = __spreadProps(__spreadValues(__spreadValues({}, import_ds_utilities.globalAttributesPropTypes), import_ds_utilities.xstyledPropTypes), {
|
|
59
57
|
containerProps: import_ds_utilities.PropTypes.object.description("Set of Properties attached to the main container.").defaultValue({}),
|
|
@@ -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 {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["import { WeakValidationMap } from 'react';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-utilities';\nimport { BANNER_TYPES } from './exported-related';\nimport type { DSBannerInternalsT } from './sharedTypes';\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,0BAAuE;AACvE,8BAA6B;AAsBtB,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,gDACpB,gDACA,uCAFoB;AAAA,EAGvB,gBAAgB,8BAAU,OAAO,YAAY,mDAAmD,EAAE,aAAa,CAAC,CAAC;AAAA,EACjH,OAAO,8BAAU,OAAO,YAAY,eAAe,EAAE,aAAa,EAAE;AAAA,EACpE,MAAM,8BAAU,OAAO,YAAY,qBAAqB,EAAE,aAAa,EAAE;AAAA,EACzE,MAAM,8BAAU,MAAM,OAAO,OAAO,oCAAY,CAAC,EAAE,YAAY,cAAc,EAAE,aAAa,qCAAa,IAAI;AAAA,EAC7G,SAAS,8BAAU,KAAK,YAAY,kCAAkC;AAAA,EACtE,QAAQ,8BAAU,KAAK,YAAY,uCAAuC,EAAE,aAAa,IAAI;AAAA,EAC7F,iBAAiB,8BAAU,KAAK,YAAY,sCAAsC,EAAE,aAAa,IAAI;AAAA,EACrG,YAAY,8BAAU,MAAM;AAAA,IAC1B,OAAO,8BAAU;AAAA,IACjB,SAAS,8BAAU;AAAA,IACnB,MAAM,8BAAU;AAAA,EAClB,CAAC,EACE,YAAY,iCAAiC,EAC7C,aAAa,CAAC,CAAC;AAAA,EAClB,WAAW,8BAAU,OAClB,YACC;AAAA;AAAA;AAAA;AAAA,KAKF,EACC,aAAa,CAAC,CAAC;AACpB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
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, sizing, space, layout } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button';\nimport { handleAnimation, handleBorderColor } from './utils/styleHelpers';\nimport { DSBannerName, DSBannerSlots } from './exported-related';\nimport type { DSBannerInternalsT } from './sharedTypes';\n\ninterface StyledBannerContainerT {\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAA8C;AAC9C,uBAA2B;AAC3B,0BAAmD;AACnD,8BAA4C;
|
|
4
|
+
"sourcesContent": ["import { styled, sizing, space, layout } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button';\nimport { handleAnimation, handleBorderColor } from './utils/styleHelpers';\nimport { DSBannerName, DSBannerSlots } from './exported-related';\nimport type { DSBannerInternalsT } from './sharedTypes';\n\ninterface StyledBannerContainerT {\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 ${sizing}\n ${space}\n ${layout}\n`;\n\nexport const StyledInnerContainer = styled('div', {\n name: DSBannerName,\n slot: DSBannerSlots.INNER_CONTAINER,\n})<StyledInnerContainerT>`\n padding-right: 6px;\n display: grid;\n align-items: center;\n min-height: 41px;\n width: 100%;\n background-color: ${({ theme }) => theme.colors.neutral['000']};\n border-bottom: 5px solid ${({ type, theme }) => handleBorderColor(type, theme)};\n 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% + 4px);\n }\n }\n grid-template-columns: auto minmax(auto, auto) minmax(auto, 1fr) auto;\n`;\n\nexport const StyledIconContainer = styled('div', { name: DSBannerName, slot: DSBannerSlots.ICON_CONTAINER })`\n margin-right: ${({ theme }) => theme.space.xxs};\n margin-left: ${({ theme }) => theme.space.xs};\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`;\n\nexport const StyledSubTitle = styled('div', { name: DSBannerName, slot: DSBannerSlots.SUBTITLE })`\n width: 100%;\n margin-left: ${({ theme }) => theme.space.xs};\n font-size: ${({ theme }) => theme.fontSizes.subTitle[400]};\n font-weight: ${({ theme }) => theme.fontWeights.regular};\n`;\n\nexport const StyledActionLink = styled('a', { 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 &:focus {\n outline: none;\n border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n }\n`;\n\nexport const StyledCloseButton = styled(DSButtonV2, { name: DSBannerName, slot: DSBannerSlots.CLOSE_BUTTON })`\n margin-left: ${({ theme }) => theme.space.xxs};\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,uBAA8C;AAC9C,uBAA2B;AAC3B,0BAAmD;AACnD,8BAA4C;AAmBrC,MAAM,wBAAwB,6BAAO,OAAO;AAAA,EACjD,MAAM;AAAA,EACN,MAAM,sCAAc;AACtB,CAAC;AAAA;AAAA,YAEW,CAAC,EAAE,aAAc,SAAS,SAAS;AAAA,IAC3C,CAAC,EAAE,aAAa,QAAQ,aAAa,yCAAgB,aAAa,QAAQ,MAAM;AAAA,IAChF;AAAA,IACA;AAAA,IACA;AAAA;AAGG,MAAM,uBAAuB,6BAAO,OAAO;AAAA,EAChD,MAAM;AAAA,EACN,MAAM,sCAAc;AACtB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAMqB,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA,6BAC7B,CAAC,EAAE,MAAM,YAAY,2CAAkB,MAAM,KAAK;AAAA,0BACrD,CAAC,EAAE,aAAc,SAAS,MAAM;AAAA,IACtD,CAAC,EAAE,aAAa,aAAa,yCAAgB,aAAa,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAmB7D,MAAM,sBAAsB,6BAAO,OAAO,EAAE,MAAM,sCAAc,MAAM,sCAAc,eAAe,CAAC;AAAA,kBACzF,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA,iBAC5B,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA;AAGrC,MAAM,cAAc,6BAAO,OAAO,EAAE,MAAM,sCAAc,MAAM,sCAAc,MAAM,CAAC;AAAA,WAC/E,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA,eAChC,CAAC,EAAE,YAAY,MAAM,UAAU,MAAM;AAAA,iBACnC,CAAC,EAAE,YAAY,MAAM,YAAY;AAAA;AAG3C,MAAM,iBAAiB,6BAAO,OAAO,EAAE,MAAM,sCAAc,MAAM,sCAAc,SAAS,CAAC;AAAA;AAAA,iBAE/E,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA,eAC7B,CAAC,EAAE,YAAY,MAAM,UAAU,SAAS;AAAA,iBACtC,CAAC,EAAE,YAAY,MAAM,YAAY;AAAA;AAG3C,MAAM,mBAAmB,6BAAO,KAAK,EAAE,MAAM,sCAAc,MAAM,sCAAc,YAAY,CAAC;AAAA,iBAClF,CAAC,EAAE,OAAO,kBAAmB,cAAc,MAAM,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA,eAI9D,CAAC,EAAE,YAAY,MAAM,UAAU,UAAU;AAAA,iBACvC,CAAC,EAAE,YAAY,MAAM,YAAY;AAAA,WACvC,CAAC,EAAE,YAAY,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAMrB,CAAC,EAAE,YAAY,MAAM,OAAO,MAAM;AAAA;AAAA;AAInD,MAAM,oBAAoB,6BAAO,6BAAY,EAAE,MAAM,sCAAc,MAAM,sCAAc,aAAa,CAAC;AAAA,iBAC3F,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -74,6 +74,8 @@ const handleBorderColor = (type, { colors }) => {
|
|
|
74
74
|
return colors.warning[900];
|
|
75
75
|
case import_exported_related.BANNER_TYPES.DANGER:
|
|
76
76
|
return colors.danger[900];
|
|
77
|
+
default:
|
|
78
|
+
return "should_not_happen";
|
|
77
79
|
}
|
|
78
80
|
};
|
|
79
81
|
const handleAnimation = (isAnimating, isOpen, height = null) => {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/utils/styleHelpers.ts", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { kfrm, css } from '@elliemae/ds-system';\nimport type { FlattenSimpleInterpolation } from '@elliemae/ds-system';\nimport { BANNER_TYPES } from '../exported-related';\nimport type { DSBannerInternalsT } from '../sharedTypes';\n\nconst slideIn = kfrm`\n 0% {\n transform: translate3d(0, -100%, 0);\n }\n 100% {\n transform: translate3d(0, 0, 0);\n }\n`;\n\nconst slideOut = kfrm`\n 0% {\n transform: translate3d(0, 0, 0);\n opacity: 1;\n }\n 60% {\n opacity: 0;\n }\n 100% {\n opacity: 0;\n transform: translate3d(0, -100%, 0);\n }\n`;\n\nconst spanContainer = (height: number) => kfrm`\n 0% {\n height: 0px;\n }\n 100% {\n height: ${height}px;\n }\n`;\n\nconst shrinkContainer = (height: number) => kfrm`\n 0% {\n height: ${height}px;\n }\n 100% {\n height: 0px;\n }\n`;\n\nexport const handleBorderColor = (\n type: DSBannerInternalsT.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 }\n};\n\nexport const handleAnimation = (\n isAnimating: boolean,\n isOpen: boolean,\n height: number | null = null,\n): FlattenSimpleInterpolation => {\n if (isAnimating) {\n if (isOpen) {\n return css`\n animation: ${height ? spanContainer(height) : slideIn} 0.5s ease-in;\n `;\n }\n return css`\n animation: ${height ? shrinkContainer(height) : slideOut} 0.5s ease-in;\n `;\n }\n return css``;\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAA0B;AAE1B,8BAA6B;AAG7B,MAAM,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAShB,MAAM,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAcjB,MAAM,gBAAgB,CAAC,WAAmB;AAAA;AAAA;AAAA;AAAA;AAAA,cAK5B;AAAA;AAAA;AAId,MAAM,kBAAkB,CAAC,WAAmB;AAAA;AAAA,cAE9B;AAAA;AAAA;AAAA;AAAA;AAAA;AAOP,MAAM,oBAAoB,CAC/B,MACA,EAAE,aACS;AACX,UAAQ;AAAA,SACD,qCAAa;AAChB,aAAO,OAAO,QAAQ;AAAA,SACnB,qCAAa;AAChB,aAAO,OAAO,MAAM;AAAA,SACjB,qCAAa;AAChB,aAAO,OAAO,QAAQ;AAAA,SACnB,qCAAa;AAChB,aAAO,OAAO,OAAO;AAAA;
|
|
4
|
+
"sourcesContent": ["import { kfrm, css } from '@elliemae/ds-system';\nimport type { FlattenSimpleInterpolation } from '@elliemae/ds-system';\nimport { BANNER_TYPES } from '../exported-related';\nimport type { DSBannerInternalsT } from '../sharedTypes';\n\nconst slideIn = kfrm`\n 0% {\n transform: translate3d(0, -100%, 0);\n }\n 100% {\n transform: translate3d(0, 0, 0);\n }\n`;\n\nconst slideOut = kfrm`\n 0% {\n transform: translate3d(0, 0, 0);\n opacity: 1;\n }\n 60% {\n opacity: 0;\n }\n 100% {\n opacity: 0;\n transform: translate3d(0, -100%, 0);\n }\n`;\n\nconst spanContainer = (height: number) => kfrm`\n 0% {\n height: 0px;\n }\n 100% {\n height: ${height}px;\n }\n`;\n\nconst shrinkContainer = (height: number) => kfrm`\n 0% {\n height: ${height}px;\n }\n 100% {\n height: 0px;\n }\n`;\n\nexport const handleBorderColor = (\n type: DSBannerInternalsT.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};\n\nexport const handleAnimation = (\n isAnimating: boolean,\n isOpen: boolean,\n height: number | null = null,\n): FlattenSimpleInterpolation => {\n if (isAnimating) {\n if (isOpen) {\n return css`\n animation: ${height ? spanContainer(height) : slideIn} 0.5s ease-in;\n `;\n }\n return css`\n animation: ${height ? shrinkContainer(height) : slideOut} 0.5s ease-in;\n `;\n }\n return css``;\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAA0B;AAE1B,8BAA6B;AAG7B,MAAM,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAShB,MAAM,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAcjB,MAAM,gBAAgB,CAAC,WAAmB;AAAA;AAAA;AAAA;AAAA;AAAA,cAK5B;AAAA;AAAA;AAId,MAAM,kBAAkB,CAAC,WAAmB;AAAA;AAAA,cAE9B;AAAA;AAAA;AAAA;AAAA;AAAA;AAOP,MAAM,oBAAoB,CAC/B,MACA,EAAE,aACS;AACX,UAAQ;AAAA,SACD,qCAAa;AAChB,aAAO,OAAO,QAAQ;AAAA,SACnB,qCAAa;AAChB,aAAO,OAAO,MAAM;AAAA,SACjB,qCAAa;AAChB,aAAO,OAAO,QAAQ;AAAA,SACnB,qCAAa;AAChB,aAAO,OAAO,OAAO;AAAA;AAErB,aAAO;AAAA;AAEb;AAEO,MAAM,kBAAkB,CAC7B,aACA,QACA,SAAwB,SACO;AAC/B,MAAI,aAAa;AACf,QAAI,QAAQ;AACV,aAAO;AAAA,qBACQ,SAAS,cAAc,MAAM,IAAI;AAAA;AAAA,IAElD;AACA,WAAO;AAAA,mBACQ,SAAS,gBAAgB,MAAM,IAAI;AAAA;AAAA,EAEpD;AACA,SAAO;AACT;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/DSBanner.js
CHANGED
|
@@ -28,9 +28,13 @@ var __objRest = (source, exclude) => {
|
|
|
28
28
|
};
|
|
29
29
|
import * as React from "react";
|
|
30
30
|
import React2, { useLayoutEffect, useRef, useCallback, useState, useEffect } from "react";
|
|
31
|
-
import {
|
|
31
|
+
import {
|
|
32
|
+
describe,
|
|
33
|
+
useMemoMergePropsWithDefault,
|
|
34
|
+
useGetGlobalAttributes,
|
|
35
|
+
useGetXstyledProps
|
|
36
|
+
} from "@elliemae/ds-utilities";
|
|
32
37
|
import { CloseX } from "@elliemae/ds-icons";
|
|
33
|
-
import { describe } from "@elliemae/ds-utilities";
|
|
34
38
|
import { icons } from "./utils/icons";
|
|
35
39
|
import { propTypes, defaultProps } from "./react-desc-prop-types";
|
|
36
40
|
import { DSBannerDatatestid, DSBannerName } from "./exported-related";
|
|
@@ -46,7 +50,7 @@ import {
|
|
|
46
50
|
const DSBanner = (props) => {
|
|
47
51
|
const propsWithDefaults = useMemoMergePropsWithDefault(props, defaultProps);
|
|
48
52
|
const _a = propsWithDefaults, { type, isOpen, onClose, label, body, actionLink, showCloseButton, containerProps, actionRef } = _a, rest = __objRest(_a, ["type", "isOpen", "onClose", "label", "body", "actionLink", "showCloseButton", "containerProps", "actionRef"]);
|
|
49
|
-
const
|
|
53
|
+
const _b = useGetGlobalAttributes(rest), { height: globalHeight } = _b, globalAttrs = __objRest(_b, ["height"]);
|
|
50
54
|
const xstyledAttrs = useGetXstyledProps(rest);
|
|
51
55
|
const innerContainerRef = useRef(null);
|
|
52
56
|
const linkRef = useRef(null);
|
|
@@ -95,7 +99,6 @@ const DSBanner = (props) => {
|
|
|
95
99
|
if (!isAnimating && !isOpen)
|
|
96
100
|
return null;
|
|
97
101
|
return /* @__PURE__ */ React2.createElement(StyledBannerContainer, __spreadValues(__spreadValues(__spreadValues({
|
|
98
|
-
type,
|
|
99
102
|
isOpen,
|
|
100
103
|
height,
|
|
101
104
|
isAnimating,
|
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 {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;ACCA;AACA;
|
|
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-utilities';\nimport { CloseX } from '@elliemae/ds-icons';\nimport { icons } from './utils/icons';\nimport { propTypes, defaultProps } from './react-desc-prop-types';\nimport { DSBannerDatatestid, DSBannerName } from './exported-related';\nimport {\n StyledActionLink,\n StyledCloseButton,\n StyledInnerContainer,\n StyledBannerContainer,\n StyledIconContainer,\n StyledSubTitle,\n StyledTitle,\n} from './styles';\nimport type { DSBannerT } from './react-desc-prop-types';\n\nconst DSBanner: React.ComponentType<DSBannerT.Props> = (props) => {\n const propsWithDefaults = useMemoMergePropsWithDefault(props, defaultProps);\n\n const { type, isOpen, onClose, label, body, actionLink, showCloseButton, containerProps, actionRef, ...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 useLayoutEffect(() => {\n if (isOpen !== current || isOpen) setIsAnimating(true);\n else setIsAnimating(false);\n }, [isOpen, current]);\n\n if (!isAnimating && !isOpen) return null;\n\n return (\n <StyledBannerContainer\n isOpen={isOpen}\n height={height}\n isAnimating={isAnimating}\n onAnimationEnd={() => setCurrent(isOpen)}\n data-testid={DSBannerDatatestid.CONTAINER}\n {...containerProps}\n {...globalAttrs}\n {...xstyledAttrs}\n >\n <StyledInnerContainer\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 <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 ) : (\n <span />\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": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/index.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/index.ts"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "
|
|
5
|
-
"mappings": "AAAA;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "// eslint-disable-next-line no-restricted-exports\nexport { default } from './DSBanner';\nexport * from './DSBanner';\nexport * from './exported-related';\n"],
|
|
5
|
+
"mappings": "AAAA;ACCA;AACA;AACA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -18,9 +18,8 @@ var __spreadValues = (a, b) => {
|
|
|
18
18
|
};
|
|
19
19
|
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
20
20
|
import * as React from "react";
|
|
21
|
-
import { BANNER_TYPES } from "./exported-related";
|
|
22
21
|
import { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from "@elliemae/ds-utilities";
|
|
23
|
-
|
|
22
|
+
import { BANNER_TYPES } from "./exported-related";
|
|
24
23
|
const defaultProps = {
|
|
25
24
|
containerProps: {},
|
|
26
25
|
label: "",
|
|
@@ -28,8 +27,7 @@ const defaultProps = {
|
|
|
28
27
|
type: BANNER_TYPES.INFO,
|
|
29
28
|
isOpen: true,
|
|
30
29
|
onClose: () => null,
|
|
31
|
-
showCloseButton: true
|
|
32
|
-
actionLink: { label: "", onClick: noop, href: "" }
|
|
30
|
+
showCloseButton: true
|
|
33
31
|
};
|
|
34
32
|
const propTypes = __spreadProps(__spreadValues(__spreadValues({}, globalAttributesPropTypes), xstyledPropTypes), {
|
|
35
33
|
containerProps: PropTypes.object.description("Set of Properties attached to the main container.").defaultValue({}),
|
|
@@ -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 {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;AAAA;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { WeakValidationMap } from 'react';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-utilities';\nimport { BANNER_TYPES } from './exported-related';\nimport type { DSBannerInternalsT } from './sharedTypes';\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;ACCA;AACA;AAsBO,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,gDACpB,4BACA,mBAFoB;AAAA,EAGvB,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,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,YACC;AAAA;AAAA;AAAA;AAAA,KAKF,EACC,aAAa,CAAC,CAAC;AACpB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
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, sizing, space, layout } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button';\nimport { handleAnimation, handleBorderColor } from './utils/styleHelpers';\nimport { DSBannerName, DSBannerSlots } from './exported-related';\nimport type { DSBannerInternalsT } from './sharedTypes';\n\ninterface StyledBannerContainerT {\n
|
|
5
|
-
"mappings": "AAAA;ACAA;AACA;AACA;AACA;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled, sizing, space, layout } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button';\nimport { handleAnimation, handleBorderColor } from './utils/styleHelpers';\nimport { DSBannerName, DSBannerSlots } from './exported-related';\nimport type { DSBannerInternalsT } from './sharedTypes';\n\ninterface StyledBannerContainerT {\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 ${sizing}\n ${space}\n ${layout}\n`;\n\nexport const StyledInnerContainer = styled('div', {\n name: DSBannerName,\n slot: DSBannerSlots.INNER_CONTAINER,\n})<StyledInnerContainerT>`\n padding-right: 6px;\n display: grid;\n align-items: center;\n min-height: 41px;\n width: 100%;\n background-color: ${({ theme }) => theme.colors.neutral['000']};\n border-bottom: 5px solid ${({ type, theme }) => handleBorderColor(type, theme)};\n 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% + 4px);\n }\n }\n grid-template-columns: auto minmax(auto, auto) minmax(auto, 1fr) auto;\n`;\n\nexport const StyledIconContainer = styled('div', { name: DSBannerName, slot: DSBannerSlots.ICON_CONTAINER })`\n margin-right: ${({ theme }) => theme.space.xxs};\n margin-left: ${({ theme }) => theme.space.xs};\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`;\n\nexport const StyledSubTitle = styled('div', { name: DSBannerName, slot: DSBannerSlots.SUBTITLE })`\n width: 100%;\n margin-left: ${({ theme }) => theme.space.xs};\n font-size: ${({ theme }) => theme.fontSizes.subTitle[400]};\n font-weight: ${({ theme }) => theme.fontWeights.regular};\n`;\n\nexport const StyledActionLink = styled('a', { 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 &:focus {\n outline: none;\n border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n }\n`;\n\nexport const StyledCloseButton = styled(DSButtonV2, { name: DSBannerName, slot: DSBannerSlots.CLOSE_BUTTON })`\n margin-left: ${({ theme }) => theme.space.xxs};\n`;\n"],
|
|
5
|
+
"mappings": "AAAA;ACAA;AACA;AACA;AACA;AAmBO,MAAM,wBAAwB,OAAO,OAAO;AAAA,EACjD,MAAM;AAAA,EACN,MAAM,cAAc;AACtB,CAAC;AAAA;AAAA,YAEW,CAAC,EAAE,aAAc,SAAS,SAAS;AAAA,IAC3C,CAAC,EAAE,aAAa,QAAQ,aAAa,gBAAgB,aAAa,QAAQ,MAAM;AAAA,IAChF;AAAA,IACA;AAAA,IACA;AAAA;AAGG,MAAM,uBAAuB,OAAO,OAAO;AAAA,EAChD,MAAM;AAAA,EACN,MAAM,cAAc;AACtB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAMqB,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA,6BAC7B,CAAC,EAAE,MAAM,YAAY,kBAAkB,MAAM,KAAK;AAAA,0BACrD,CAAC,EAAE,aAAc,SAAS,MAAM;AAAA,IACtD,CAAC,EAAE,aAAa,aAAa,gBAAgB,aAAa,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAmB7D,MAAM,sBAAsB,OAAO,OAAO,EAAE,MAAM,cAAc,MAAM,cAAc,eAAe,CAAC;AAAA,kBACzF,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA,iBAC5B,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA;AAGrC,MAAM,cAAc,OAAO,OAAO,EAAE,MAAM,cAAc,MAAM,cAAc,MAAM,CAAC;AAAA,WAC/E,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA,eAChC,CAAC,EAAE,YAAY,MAAM,UAAU,MAAM;AAAA,iBACnC,CAAC,EAAE,YAAY,MAAM,YAAY;AAAA;AAG3C,MAAM,iBAAiB,OAAO,OAAO,EAAE,MAAM,cAAc,MAAM,cAAc,SAAS,CAAC;AAAA;AAAA,iBAE/E,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA,eAC7B,CAAC,EAAE,YAAY,MAAM,UAAU,SAAS;AAAA,iBACtC,CAAC,EAAE,YAAY,MAAM,YAAY;AAAA;AAG3C,MAAM,mBAAmB,OAAO,KAAK,EAAE,MAAM,cAAc,MAAM,cAAc,YAAY,CAAC;AAAA,iBAClF,CAAC,EAAE,OAAO,kBAAmB,cAAc,MAAM,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA,eAI9D,CAAC,EAAE,YAAY,MAAM,UAAU,UAAU;AAAA,iBACvC,CAAC,EAAE,YAAY,MAAM,YAAY;AAAA,WACvC,CAAC,EAAE,YAAY,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAMrB,CAAC,EAAE,YAAY,MAAM,OAAO,MAAM;AAAA;AAAA;AAInD,MAAM,oBAAoB,OAAO,YAAY,EAAE,MAAM,cAAc,MAAM,cAAc,aAAa,CAAC;AAAA,iBAC3F,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -48,6 +48,8 @@ const handleBorderColor = (type, { colors }) => {
|
|
|
48
48
|
return colors.warning[900];
|
|
49
49
|
case BANNER_TYPES.DANGER:
|
|
50
50
|
return colors.danger[900];
|
|
51
|
+
default:
|
|
52
|
+
return "should_not_happen";
|
|
51
53
|
}
|
|
52
54
|
};
|
|
53
55
|
const handleAnimation = (isAnimating, isOpen, height = null) => {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/utils/styleHelpers.ts"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { kfrm, css } from '@elliemae/ds-system';\nimport type { FlattenSimpleInterpolation } from '@elliemae/ds-system';\nimport { BANNER_TYPES } from '../exported-related';\nimport type { DSBannerInternalsT } from '../sharedTypes';\n\nconst slideIn = kfrm`\n 0% {\n transform: translate3d(0, -100%, 0);\n }\n 100% {\n transform: translate3d(0, 0, 0);\n }\n`;\n\nconst slideOut = kfrm`\n 0% {\n transform: translate3d(0, 0, 0);\n opacity: 1;\n }\n 60% {\n opacity: 0;\n }\n 100% {\n opacity: 0;\n transform: translate3d(0, -100%, 0);\n }\n`;\n\nconst spanContainer = (height: number) => kfrm`\n 0% {\n height: 0px;\n }\n 100% {\n height: ${height}px;\n }\n`;\n\nconst shrinkContainer = (height: number) => kfrm`\n 0% {\n height: ${height}px;\n }\n 100% {\n height: 0px;\n }\n`;\n\nexport const handleBorderColor = (\n type: DSBannerInternalsT.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 }\n};\n\nexport const handleAnimation = (\n isAnimating: boolean,\n isOpen: boolean,\n height: number | null = null,\n): FlattenSimpleInterpolation => {\n if (isAnimating) {\n if (isOpen) {\n return css`\n animation: ${height ? spanContainer(height) : slideIn} 0.5s ease-in;\n `;\n }\n return css`\n animation: ${height ? shrinkContainer(height) : slideOut} 0.5s ease-in;\n `;\n }\n return css``;\n};\n"],
|
|
5
|
-
"mappings": "AAAA;ACAA;AAEA;AAGA,MAAM,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAShB,MAAM,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAcjB,MAAM,gBAAgB,CAAC,WAAmB;AAAA;AAAA;AAAA;AAAA;AAAA,cAK5B;AAAA;AAAA;AAId,MAAM,kBAAkB,CAAC,WAAmB;AAAA;AAAA,cAE9B;AAAA;AAAA;AAAA;AAAA;AAAA;AAOP,MAAM,oBAAoB,CAC/B,MACA,EAAE,aACS;AACX,UAAQ;AAAA,SACD,aAAa;AAChB,aAAO,OAAO,QAAQ;AAAA,SACnB,aAAa;AAChB,aAAO,OAAO,MAAM;AAAA,SACjB,aAAa;AAChB,aAAO,OAAO,QAAQ;AAAA,SACnB,aAAa;AAChB,aAAO,OAAO,OAAO;AAAA;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { kfrm, css } from '@elliemae/ds-system';\nimport type { FlattenSimpleInterpolation } from '@elliemae/ds-system';\nimport { BANNER_TYPES } from '../exported-related';\nimport type { DSBannerInternalsT } from '../sharedTypes';\n\nconst slideIn = kfrm`\n 0% {\n transform: translate3d(0, -100%, 0);\n }\n 100% {\n transform: translate3d(0, 0, 0);\n }\n`;\n\nconst slideOut = kfrm`\n 0% {\n transform: translate3d(0, 0, 0);\n opacity: 1;\n }\n 60% {\n opacity: 0;\n }\n 100% {\n opacity: 0;\n transform: translate3d(0, -100%, 0);\n }\n`;\n\nconst spanContainer = (height: number) => kfrm`\n 0% {\n height: 0px;\n }\n 100% {\n height: ${height}px;\n }\n`;\n\nconst shrinkContainer = (height: number) => kfrm`\n 0% {\n height: ${height}px;\n }\n 100% {\n height: 0px;\n }\n`;\n\nexport const handleBorderColor = (\n type: DSBannerInternalsT.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};\n\nexport const handleAnimation = (\n isAnimating: boolean,\n isOpen: boolean,\n height: number | null = null,\n): FlattenSimpleInterpolation => {\n if (isAnimating) {\n if (isOpen) {\n return css`\n animation: ${height ? spanContainer(height) : slideIn} 0.5s ease-in;\n `;\n }\n return css`\n animation: ${height ? shrinkContainer(height) : slideOut} 0.5s ease-in;\n `;\n }\n return css``;\n};\n"],
|
|
5
|
+
"mappings": "AAAA;ACAA;AAEA;AAGA,MAAM,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAShB,MAAM,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAcjB,MAAM,gBAAgB,CAAC,WAAmB;AAAA;AAAA;AAAA;AAAA;AAAA,cAK5B;AAAA;AAAA;AAId,MAAM,kBAAkB,CAAC,WAAmB;AAAA;AAAA,cAE9B;AAAA;AAAA;AAAA;AAAA;AAAA;AAOP,MAAM,oBAAoB,CAC/B,MACA,EAAE,aACS;AACX,UAAQ;AAAA,SACD,aAAa;AAChB,aAAO,OAAO,QAAQ;AAAA,SACnB,aAAa;AAChB,aAAO,OAAO,MAAM;AAAA,SACjB,aAAa;AAChB,aAAO,OAAO,QAAQ;AAAA,SACnB,aAAa;AAChB,aAAO,OAAO,OAAO;AAAA;AAErB,aAAO;AAAA;AAEb;AAEO,MAAM,kBAAkB,CAC7B,aACA,QACA,SAAwB,SACO;AAC/B,MAAI,aAAa;AACf,QAAI,QAAQ;AACV,aAAO;AAAA,qBACQ,SAAS,cAAc,MAAM,IAAI;AAAA;AAAA,IAElD;AACA,WAAO;AAAA,mBACQ,SAAS,gBAAgB,MAAM,IAAI;AAAA;AAAA,EAEpD;AACA,SAAO;AACT;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-banner",
|
|
3
|
-
"version": "3.2.0
|
|
3
|
+
"version": "3.2.0",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Banner",
|
|
6
6
|
"files": [
|
|
@@ -63,10 +63,10 @@
|
|
|
63
63
|
"indent": 4
|
|
64
64
|
},
|
|
65
65
|
"dependencies": {
|
|
66
|
-
"@elliemae/ds-button": "3.2.0
|
|
67
|
-
"@elliemae/ds-icons": "3.2.0
|
|
68
|
-
"@elliemae/ds-system": "3.2.0
|
|
69
|
-
"@elliemae/ds-utilities": "3.2.0
|
|
66
|
+
"@elliemae/ds-button": "3.2.0",
|
|
67
|
+
"@elliemae/ds-icons": "3.2.0",
|
|
68
|
+
"@elliemae/ds-system": "3.2.0",
|
|
69
|
+
"@elliemae/ds-utilities": "3.2.0"
|
|
70
70
|
},
|
|
71
71
|
"devDependencies": {
|
|
72
72
|
"@testing-library/jest-dom": "~5.16.4",
|
|
@@ -82,7 +82,7 @@
|
|
|
82
82
|
},
|
|
83
83
|
"publishConfig": {
|
|
84
84
|
"access": "public",
|
|
85
|
-
"typeSafety":
|
|
85
|
+
"typeSafety": true
|
|
86
86
|
},
|
|
87
87
|
"scripts": {
|
|
88
88
|
"dev": "cross-env NODE_ENV=development node ../../scripts/build/build.mjs --watch",
|