@elliemae/ds-notification-badge 3.70.0-next.31 → 3.70.0-next.33
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.
|
@@ -49,6 +49,7 @@ const NotificationBadge = (props) => {
|
|
|
49
49
|
);
|
|
50
50
|
const { type, color, textColor, value, size, disabled, position, Component, ...rest } = propsWithDefaults;
|
|
51
51
|
const globalAttributes = (0, import_ds_props_helpers.useGetGlobalAttributes)(rest);
|
|
52
|
+
const hasAccessibleName = Boolean(globalAttributes["aria-label"] || globalAttributes["aria-labelledby"]);
|
|
52
53
|
const [renderBadge, setRenderBadge] = import_react.default.useState(false);
|
|
53
54
|
const isNumericBadge = type === "number";
|
|
54
55
|
const Badge = isNumericBadge ? import_style.NumericBadge : import_style.DotBadge;
|
|
@@ -66,29 +67,38 @@ const NotificationBadge = (props) => {
|
|
|
66
67
|
const top = relatedComponentRef?.current ? spaceTop - factor : 0;
|
|
67
68
|
const left = relatedComponentRef?.current ? spaceLeft - factor : 0;
|
|
68
69
|
const right = relatedComponentRef?.current ? spaceRight - factor : 0;
|
|
69
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
70
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
71
|
+
import_style.Wrapper,
|
|
72
|
+
{
|
|
73
|
+
role: hasAccessibleName ? "img" : void 0,
|
|
74
|
+
"aria-hidden": hasAccessibleName ? void 0 : true,
|
|
75
|
+
...globalAttributes,
|
|
76
|
+
innerRef: wrapperComponentRef,
|
|
77
|
+
children: [
|
|
78
|
+
renderBadge ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
79
|
+
Badge,
|
|
80
|
+
{
|
|
81
|
+
"data-related-component": Component ? "true" : "false",
|
|
82
|
+
innerRef: badgeComponentRef,
|
|
83
|
+
"data-position": position,
|
|
84
|
+
"data-type": type,
|
|
85
|
+
"data-testid": "ds-notification-badge",
|
|
86
|
+
color,
|
|
87
|
+
textColor,
|
|
88
|
+
size,
|
|
89
|
+
value,
|
|
90
|
+
disabled,
|
|
91
|
+
top,
|
|
92
|
+
right: position === "right" ? right : null,
|
|
93
|
+
left: position === "left" ? left : null,
|
|
94
|
+
charCount: getValueCharactersCount(value),
|
|
95
|
+
children: type === "number" ? value : null
|
|
96
|
+
}
|
|
97
|
+
) : null,
|
|
98
|
+
Component ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { "data-testid": "ds-notification-badge-component", innerRef: relatedComponentRef }) : null
|
|
99
|
+
]
|
|
100
|
+
}
|
|
101
|
+
);
|
|
92
102
|
};
|
|
93
103
|
NotificationBadge.displayName = "NotificationBadge";
|
|
94
104
|
const NotificationBadgeWithSchema = (0, import_ds_props_helpers.describe)(NotificationBadge);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/NotificationBadge.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable no-nested-ternary */\n/* eslint-disable complexity */\nimport React, { useRef } from 'react';\nimport {\n useMemoMergePropsWithDefault,\n useValidateTypescriptPropTypes,\n describe,\n useGetGlobalAttributes,\n type ValidationMap,\n} from '@elliemae/ds-props-helpers';\nimport type { DSNotificationBadgeT } from './react-desc-prop-types.js';\nimport { NotificationBadgePropTypes, defaultProps } from './react-desc-prop-types.js';\nimport { Wrapper, NumericBadge, DotBadge } from './style.js';\nimport { getSpaceLeft, getSpaceRight, getSpaceTop } from './helpers.js';\n\nconst getValueCharactersCount = (val: string | number | undefined): number => String(val).length;\n\nconst NotificationBadge: React.ComponentType<DSNotificationBadgeT.Props> = (props) => {\n const propsWithDefaults = useMemoMergePropsWithDefault<DSNotificationBadgeT.InternalProps>(props, defaultProps);\n useValidateTypescriptPropTypes<DSNotificationBadgeT.Props>(\n propsWithDefaults,\n NotificationBadgePropTypes,\n 'DSNotificationBadge',\n );\n const { type, color, textColor, value, size, disabled, position, Component, ...rest } = propsWithDefaults;\n const globalAttributes = useGetGlobalAttributes(rest);\n\n const [renderBadge, setRenderBadge] = React.useState(false);\n const isNumericBadge = type === 'number';\n const Badge = isNumericBadge ? NumericBadge : DotBadge;\n const relatedComponentRef = useRef<HTMLSpanElement>(null);\n const wrapperComponentRef = useRef<HTMLDivElement>(null);\n const badgeComponentRef = useRef<HTMLDivElement>(null);\n\n React.useLayoutEffect(() => {\n setRenderBadge(!!relatedComponentRef?.current || !Component);\n }, [relatedComponentRef, Component]);\n\n const relatedComputedStyle = relatedComponentRef?.current ? window.getComputedStyle(relatedComponentRef?.current) : 0;\n const spaceLeft = getSpaceLeft(relatedComputedStyle);\n const spaceRight = getSpaceRight(relatedComputedStyle);\n const spaceTop = getSpaceTop(relatedComputedStyle);\n\n const factor = isNumericBadge ? (size === 'l' ? 9 : 5) : size === 'l' ? 5 : 3;\n const top = relatedComponentRef?.current ? spaceTop - factor : 0;\n const left = relatedComponentRef?.current ? spaceLeft - factor : 0;\n const right = relatedComponentRef?.current ? spaceRight - factor : 0;\n\n return (\n <Wrapper aria-hidden
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable no-nested-ternary */\n/* eslint-disable complexity */\nimport React, { useRef } from 'react';\nimport {\n useMemoMergePropsWithDefault,\n useValidateTypescriptPropTypes,\n describe,\n useGetGlobalAttributes,\n type ValidationMap,\n} from '@elliemae/ds-props-helpers';\nimport type { DSNotificationBadgeT } from './react-desc-prop-types.js';\nimport { NotificationBadgePropTypes, defaultProps } from './react-desc-prop-types.js';\nimport { Wrapper, NumericBadge, DotBadge } from './style.js';\nimport { getSpaceLeft, getSpaceRight, getSpaceTop } from './helpers.js';\n\nconst getValueCharactersCount = (val: string | number | undefined): number => String(val).length;\n\n// eslint-disable-next-line max-statements -- accessible-name derivation adds one statement past the limit\nconst NotificationBadge: React.ComponentType<DSNotificationBadgeT.Props> = (props) => {\n const propsWithDefaults = useMemoMergePropsWithDefault<DSNotificationBadgeT.InternalProps>(props, defaultProps);\n useValidateTypescriptPropTypes<DSNotificationBadgeT.Props>(\n propsWithDefaults,\n NotificationBadgePropTypes,\n 'DSNotificationBadge',\n );\n const { type, color, textColor, value, size, disabled, position, Component, ...rest } = propsWithDefaults;\n const globalAttributes = useGetGlobalAttributes(rest);\n\n // Decorative by default: the wrapper stays aria-hidden unless the consumer provides an accessible\n // name. When named, the badge becomes a single labelled image (role=\"img\") so its content reaches\n // assistive technology \u2014 mirrors ds-icons (PUI-17842). Live \"X new\" announcements remain the\n // consumer's responsibility (see useLiveRegion in ds-accessibility).\n const hasAccessibleName = Boolean(globalAttributes['aria-label'] || globalAttributes['aria-labelledby']);\n\n const [renderBadge, setRenderBadge] = React.useState(false);\n const isNumericBadge = type === 'number';\n const Badge = isNumericBadge ? NumericBadge : DotBadge;\n const relatedComponentRef = useRef<HTMLSpanElement>(null);\n const wrapperComponentRef = useRef<HTMLDivElement>(null);\n const badgeComponentRef = useRef<HTMLDivElement>(null);\n\n React.useLayoutEffect(() => {\n setRenderBadge(!!relatedComponentRef?.current || !Component);\n }, [relatedComponentRef, Component]);\n\n const relatedComputedStyle = relatedComponentRef?.current ? window.getComputedStyle(relatedComponentRef?.current) : 0;\n const spaceLeft = getSpaceLeft(relatedComputedStyle);\n const spaceRight = getSpaceRight(relatedComputedStyle);\n const spaceTop = getSpaceTop(relatedComputedStyle);\n\n const factor = isNumericBadge ? (size === 'l' ? 9 : 5) : size === 'l' ? 5 : 3;\n const top = relatedComponentRef?.current ? spaceTop - factor : 0;\n const left = relatedComponentRef?.current ? spaceLeft - factor : 0;\n const right = relatedComponentRef?.current ? spaceRight - factor : 0;\n\n return (\n <Wrapper\n // role/aria-hidden set before the spread so a consumer-passed role/aria-hidden still wins.\n role={hasAccessibleName ? 'img' : undefined}\n aria-hidden={hasAccessibleName ? undefined : true}\n {...globalAttributes}\n innerRef={wrapperComponentRef}\n >\n {renderBadge ? (\n <Badge\n data-related-component={Component ? 'true' : 'false'}\n innerRef={badgeComponentRef}\n data-position={position}\n data-type={type}\n data-testid=\"ds-notification-badge\"\n color={color}\n textColor={textColor}\n size={size}\n value={value}\n disabled={disabled}\n top={top}\n right={position === 'right' ? right : null}\n left={position === 'left' ? left : null}\n charCount={getValueCharactersCount(value)}\n >\n {type === 'number' ? value : null}\n </Badge>\n ) : null}\n {Component ? <Component data-testid=\"ds-notification-badge-component\" innerRef={relatedComponentRef} /> : null}\n </Wrapper>\n );\n};\n\nNotificationBadge.displayName = 'NotificationBadge';\nconst NotificationBadgeWithSchema = describe(NotificationBadge);\nNotificationBadgeWithSchema.propTypes = NotificationBadgePropTypes as ValidationMap<unknown>;\n\nexport { NotificationBadge, NotificationBadgeWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADwDnB;AAtDJ,mBAA8B;AAC9B,8BAMO;AAEP,mCAAyD;AACzD,mBAAgD;AAChD,qBAAyD;AAEzD,MAAM,0BAA0B,CAAC,QAA6C,OAAO,GAAG,EAAE;AAG1F,MAAM,oBAAqE,CAAC,UAAU;AACpF,QAAM,wBAAoB,sDAAiE,OAAO,yCAAY;AAC9G;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACA,QAAM,EAAE,MAAM,OAAO,WAAW,OAAO,MAAM,UAAU,UAAU,WAAW,GAAG,KAAK,IAAI;AACxF,QAAM,uBAAmB,gDAAuB,IAAI;AAMpD,QAAM,oBAAoB,QAAQ,iBAAiB,YAAY,KAAK,iBAAiB,iBAAiB,CAAC;AAEvG,QAAM,CAAC,aAAa,cAAc,IAAI,aAAAA,QAAM,SAAS,KAAK;AAC1D,QAAM,iBAAiB,SAAS;AAChC,QAAM,QAAQ,iBAAiB,4BAAe;AAC9C,QAAM,0BAAsB,qBAAwB,IAAI;AACxD,QAAM,0BAAsB,qBAAuB,IAAI;AACvD,QAAM,wBAAoB,qBAAuB,IAAI;AAErD,eAAAA,QAAM,gBAAgB,MAAM;AAC1B,mBAAe,CAAC,CAAC,qBAAqB,WAAW,CAAC,SAAS;AAAA,EAC7D,GAAG,CAAC,qBAAqB,SAAS,CAAC;AAEnC,QAAM,uBAAuB,qBAAqB,UAAU,OAAO,iBAAiB,qBAAqB,OAAO,IAAI;AACpH,QAAM,gBAAY,6BAAa,oBAAoB;AACnD,QAAM,iBAAa,8BAAc,oBAAoB;AACrD,QAAM,eAAW,4BAAY,oBAAoB;AAEjD,QAAM,SAAS,iBAAkB,SAAS,MAAM,IAAI,IAAK,SAAS,MAAM,IAAI;AAC5E,QAAM,MAAM,qBAAqB,UAAU,WAAW,SAAS;AAC/D,QAAM,OAAO,qBAAqB,UAAU,YAAY,SAAS;AACjE,QAAM,QAAQ,qBAAqB,UAAU,aAAa,SAAS;AAEnE,SACE;AAAA,IAAC;AAAA;AAAA,MAEC,MAAM,oBAAoB,QAAQ;AAAA,MAClC,eAAa,oBAAoB,SAAY;AAAA,MAC5C,GAAG;AAAA,MACJ,UAAU;AAAA,MAET;AAAA,sBACC;AAAA,UAAC;AAAA;AAAA,YACC,0BAAwB,YAAY,SAAS;AAAA,YAC7C,UAAU;AAAA,YACV,iBAAe;AAAA,YACf,aAAW;AAAA,YACX,eAAY;AAAA,YACZ;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,OAAO,aAAa,UAAU,QAAQ;AAAA,YACtC,MAAM,aAAa,SAAS,OAAO;AAAA,YACnC,WAAW,wBAAwB,KAAK;AAAA,YAEvC,mBAAS,WAAW,QAAQ;AAAA;AAAA,QAC/B,IACE;AAAA,QACH,YAAY,4CAAC,aAAU,eAAY,mCAAkC,UAAU,qBAAqB,IAAK;AAAA;AAAA;AAAA,EAC5G;AAEJ;AAEA,kBAAkB,cAAc;AAChC,MAAM,kCAA8B,kCAAS,iBAAiB;AAC9D,4BAA4B,YAAY;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -20,6 +20,7 @@ const NotificationBadge = (props) => {
|
|
|
20
20
|
);
|
|
21
21
|
const { type, color, textColor, value, size, disabled, position, Component, ...rest } = propsWithDefaults;
|
|
22
22
|
const globalAttributes = useGetGlobalAttributes(rest);
|
|
23
|
+
const hasAccessibleName = Boolean(globalAttributes["aria-label"] || globalAttributes["aria-labelledby"]);
|
|
23
24
|
const [renderBadge, setRenderBadge] = React2.useState(false);
|
|
24
25
|
const isNumericBadge = type === "number";
|
|
25
26
|
const Badge = isNumericBadge ? NumericBadge : DotBadge;
|
|
@@ -37,29 +38,38 @@ const NotificationBadge = (props) => {
|
|
|
37
38
|
const top = relatedComponentRef?.current ? spaceTop - factor : 0;
|
|
38
39
|
const left = relatedComponentRef?.current ? spaceLeft - factor : 0;
|
|
39
40
|
const right = relatedComponentRef?.current ? spaceRight - factor : 0;
|
|
40
|
-
return /* @__PURE__ */ jsxs(
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
41
|
+
return /* @__PURE__ */ jsxs(
|
|
42
|
+
Wrapper,
|
|
43
|
+
{
|
|
44
|
+
role: hasAccessibleName ? "img" : void 0,
|
|
45
|
+
"aria-hidden": hasAccessibleName ? void 0 : true,
|
|
46
|
+
...globalAttributes,
|
|
47
|
+
innerRef: wrapperComponentRef,
|
|
48
|
+
children: [
|
|
49
|
+
renderBadge ? /* @__PURE__ */ jsx(
|
|
50
|
+
Badge,
|
|
51
|
+
{
|
|
52
|
+
"data-related-component": Component ? "true" : "false",
|
|
53
|
+
innerRef: badgeComponentRef,
|
|
54
|
+
"data-position": position,
|
|
55
|
+
"data-type": type,
|
|
56
|
+
"data-testid": "ds-notification-badge",
|
|
57
|
+
color,
|
|
58
|
+
textColor,
|
|
59
|
+
size,
|
|
60
|
+
value,
|
|
61
|
+
disabled,
|
|
62
|
+
top,
|
|
63
|
+
right: position === "right" ? right : null,
|
|
64
|
+
left: position === "left" ? left : null,
|
|
65
|
+
charCount: getValueCharactersCount(value),
|
|
66
|
+
children: type === "number" ? value : null
|
|
67
|
+
}
|
|
68
|
+
) : null,
|
|
69
|
+
Component ? /* @__PURE__ */ jsx(Component, { "data-testid": "ds-notification-badge-component", innerRef: relatedComponentRef }) : null
|
|
70
|
+
]
|
|
71
|
+
}
|
|
72
|
+
);
|
|
63
73
|
};
|
|
64
74
|
NotificationBadge.displayName = "NotificationBadge";
|
|
65
75
|
const NotificationBadgeWithSchema = describe(NotificationBadge);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/NotificationBadge.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable no-nested-ternary */\n/* eslint-disable complexity */\nimport React, { useRef } from 'react';\nimport {\n useMemoMergePropsWithDefault,\n useValidateTypescriptPropTypes,\n describe,\n useGetGlobalAttributes,\n type ValidationMap,\n} from '@elliemae/ds-props-helpers';\nimport type { DSNotificationBadgeT } from './react-desc-prop-types.js';\nimport { NotificationBadgePropTypes, defaultProps } from './react-desc-prop-types.js';\nimport { Wrapper, NumericBadge, DotBadge } from './style.js';\nimport { getSpaceLeft, getSpaceRight, getSpaceTop } from './helpers.js';\n\nconst getValueCharactersCount = (val: string | number | undefined): number => String(val).length;\n\nconst NotificationBadge: React.ComponentType<DSNotificationBadgeT.Props> = (props) => {\n const propsWithDefaults = useMemoMergePropsWithDefault<DSNotificationBadgeT.InternalProps>(props, defaultProps);\n useValidateTypescriptPropTypes<DSNotificationBadgeT.Props>(\n propsWithDefaults,\n NotificationBadgePropTypes,\n 'DSNotificationBadge',\n );\n const { type, color, textColor, value, size, disabled, position, Component, ...rest } = propsWithDefaults;\n const globalAttributes = useGetGlobalAttributes(rest);\n\n const [renderBadge, setRenderBadge] = React.useState(false);\n const isNumericBadge = type === 'number';\n const Badge = isNumericBadge ? NumericBadge : DotBadge;\n const relatedComponentRef = useRef<HTMLSpanElement>(null);\n const wrapperComponentRef = useRef<HTMLDivElement>(null);\n const badgeComponentRef = useRef<HTMLDivElement>(null);\n\n React.useLayoutEffect(() => {\n setRenderBadge(!!relatedComponentRef?.current || !Component);\n }, [relatedComponentRef, Component]);\n\n const relatedComputedStyle = relatedComponentRef?.current ? window.getComputedStyle(relatedComponentRef?.current) : 0;\n const spaceLeft = getSpaceLeft(relatedComputedStyle);\n const spaceRight = getSpaceRight(relatedComputedStyle);\n const spaceTop = getSpaceTop(relatedComputedStyle);\n\n const factor = isNumericBadge ? (size === 'l' ? 9 : 5) : size === 'l' ? 5 : 3;\n const top = relatedComponentRef?.current ? spaceTop - factor : 0;\n const left = relatedComponentRef?.current ? spaceLeft - factor : 0;\n const right = relatedComponentRef?.current ? spaceRight - factor : 0;\n\n return (\n <Wrapper aria-hidden
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable no-nested-ternary */\n/* eslint-disable complexity */\nimport React, { useRef } from 'react';\nimport {\n useMemoMergePropsWithDefault,\n useValidateTypescriptPropTypes,\n describe,\n useGetGlobalAttributes,\n type ValidationMap,\n} from '@elliemae/ds-props-helpers';\nimport type { DSNotificationBadgeT } from './react-desc-prop-types.js';\nimport { NotificationBadgePropTypes, defaultProps } from './react-desc-prop-types.js';\nimport { Wrapper, NumericBadge, DotBadge } from './style.js';\nimport { getSpaceLeft, getSpaceRight, getSpaceTop } from './helpers.js';\n\nconst getValueCharactersCount = (val: string | number | undefined): number => String(val).length;\n\n// eslint-disable-next-line max-statements -- accessible-name derivation adds one statement past the limit\nconst NotificationBadge: React.ComponentType<DSNotificationBadgeT.Props> = (props) => {\n const propsWithDefaults = useMemoMergePropsWithDefault<DSNotificationBadgeT.InternalProps>(props, defaultProps);\n useValidateTypescriptPropTypes<DSNotificationBadgeT.Props>(\n propsWithDefaults,\n NotificationBadgePropTypes,\n 'DSNotificationBadge',\n );\n const { type, color, textColor, value, size, disabled, position, Component, ...rest } = propsWithDefaults;\n const globalAttributes = useGetGlobalAttributes(rest);\n\n // Decorative by default: the wrapper stays aria-hidden unless the consumer provides an accessible\n // name. When named, the badge becomes a single labelled image (role=\"img\") so its content reaches\n // assistive technology \u2014 mirrors ds-icons (PUI-17842). Live \"X new\" announcements remain the\n // consumer's responsibility (see useLiveRegion in ds-accessibility).\n const hasAccessibleName = Boolean(globalAttributes['aria-label'] || globalAttributes['aria-labelledby']);\n\n const [renderBadge, setRenderBadge] = React.useState(false);\n const isNumericBadge = type === 'number';\n const Badge = isNumericBadge ? NumericBadge : DotBadge;\n const relatedComponentRef = useRef<HTMLSpanElement>(null);\n const wrapperComponentRef = useRef<HTMLDivElement>(null);\n const badgeComponentRef = useRef<HTMLDivElement>(null);\n\n React.useLayoutEffect(() => {\n setRenderBadge(!!relatedComponentRef?.current || !Component);\n }, [relatedComponentRef, Component]);\n\n const relatedComputedStyle = relatedComponentRef?.current ? window.getComputedStyle(relatedComponentRef?.current) : 0;\n const spaceLeft = getSpaceLeft(relatedComputedStyle);\n const spaceRight = getSpaceRight(relatedComputedStyle);\n const spaceTop = getSpaceTop(relatedComputedStyle);\n\n const factor = isNumericBadge ? (size === 'l' ? 9 : 5) : size === 'l' ? 5 : 3;\n const top = relatedComponentRef?.current ? spaceTop - factor : 0;\n const left = relatedComponentRef?.current ? spaceLeft - factor : 0;\n const right = relatedComponentRef?.current ? spaceRight - factor : 0;\n\n return (\n <Wrapper\n // role/aria-hidden set before the spread so a consumer-passed role/aria-hidden still wins.\n role={hasAccessibleName ? 'img' : undefined}\n aria-hidden={hasAccessibleName ? undefined : true}\n {...globalAttributes}\n innerRef={wrapperComponentRef}\n >\n {renderBadge ? (\n <Badge\n data-related-component={Component ? 'true' : 'false'}\n innerRef={badgeComponentRef}\n data-position={position}\n data-type={type}\n data-testid=\"ds-notification-badge\"\n color={color}\n textColor={textColor}\n size={size}\n value={value}\n disabled={disabled}\n top={top}\n right={position === 'right' ? right : null}\n left={position === 'left' ? left : null}\n charCount={getValueCharactersCount(value)}\n >\n {type === 'number' ? value : null}\n </Badge>\n ) : null}\n {Component ? <Component data-testid=\"ds-notification-badge-component\" innerRef={relatedComponentRef} /> : null}\n </Wrapper>\n );\n};\n\nNotificationBadge.displayName = 'NotificationBadge';\nconst NotificationBadgeWithSchema = describe(NotificationBadge);\nNotificationBadgeWithSchema.propTypes = NotificationBadgePropTypes as ValidationMap<unknown>;\n\nexport { NotificationBadge, NotificationBadgeWithSchema };\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACwDnB,SAQI,KARJ;AAtDJ,OAAOA,UAAS,cAAc;AAC9B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AAEP,SAAS,4BAA4B,oBAAoB;AACzD,SAAS,SAAS,cAAc,gBAAgB;AAChD,SAAS,cAAc,eAAe,mBAAmB;AAEzD,MAAM,0BAA0B,CAAC,QAA6C,OAAO,GAAG,EAAE;AAG1F,MAAM,oBAAqE,CAAC,UAAU;AACpF,QAAM,oBAAoB,6BAAiE,OAAO,YAAY;AAC9G;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACA,QAAM,EAAE,MAAM,OAAO,WAAW,OAAO,MAAM,UAAU,UAAU,WAAW,GAAG,KAAK,IAAI;AACxF,QAAM,mBAAmB,uBAAuB,IAAI;AAMpD,QAAM,oBAAoB,QAAQ,iBAAiB,YAAY,KAAK,iBAAiB,iBAAiB,CAAC;AAEvG,QAAM,CAAC,aAAa,cAAc,IAAIA,OAAM,SAAS,KAAK;AAC1D,QAAM,iBAAiB,SAAS;AAChC,QAAM,QAAQ,iBAAiB,eAAe;AAC9C,QAAM,sBAAsB,OAAwB,IAAI;AACxD,QAAM,sBAAsB,OAAuB,IAAI;AACvD,QAAM,oBAAoB,OAAuB,IAAI;AAErD,EAAAA,OAAM,gBAAgB,MAAM;AAC1B,mBAAe,CAAC,CAAC,qBAAqB,WAAW,CAAC,SAAS;AAAA,EAC7D,GAAG,CAAC,qBAAqB,SAAS,CAAC;AAEnC,QAAM,uBAAuB,qBAAqB,UAAU,OAAO,iBAAiB,qBAAqB,OAAO,IAAI;AACpH,QAAM,YAAY,aAAa,oBAAoB;AACnD,QAAM,aAAa,cAAc,oBAAoB;AACrD,QAAM,WAAW,YAAY,oBAAoB;AAEjD,QAAM,SAAS,iBAAkB,SAAS,MAAM,IAAI,IAAK,SAAS,MAAM,IAAI;AAC5E,QAAM,MAAM,qBAAqB,UAAU,WAAW,SAAS;AAC/D,QAAM,OAAO,qBAAqB,UAAU,YAAY,SAAS;AACjE,QAAM,QAAQ,qBAAqB,UAAU,aAAa,SAAS;AAEnE,SACE;AAAA,IAAC;AAAA;AAAA,MAEC,MAAM,oBAAoB,QAAQ;AAAA,MAClC,eAAa,oBAAoB,SAAY;AAAA,MAC5C,GAAG;AAAA,MACJ,UAAU;AAAA,MAET;AAAA,sBACC;AAAA,UAAC;AAAA;AAAA,YACC,0BAAwB,YAAY,SAAS;AAAA,YAC7C,UAAU;AAAA,YACV,iBAAe;AAAA,YACf,aAAW;AAAA,YACX,eAAY;AAAA,YACZ;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,OAAO,aAAa,UAAU,QAAQ;AAAA,YACtC,MAAM,aAAa,SAAS,OAAO;AAAA,YACnC,WAAW,wBAAwB,KAAK;AAAA,YAEvC,mBAAS,WAAW,QAAQ;AAAA;AAAA,QAC/B,IACE;AAAA,QACH,YAAY,oBAAC,aAAU,eAAY,mCAAkC,UAAU,qBAAqB,IAAK;AAAA;AAAA;AAAA,EAC5G;AAEJ;AAEA,kBAAkB,cAAc;AAChC,MAAM,8BAA8B,SAAS,iBAAiB;AAC9D,4BAA4B,YAAY;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-notification-badge",
|
|
3
|
-
"version": "3.70.0-next.
|
|
3
|
+
"version": "3.70.0-next.33",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Notification Badge",
|
|
6
6
|
"files": [
|
|
@@ -37,14 +37,14 @@
|
|
|
37
37
|
},
|
|
38
38
|
"dependencies": {
|
|
39
39
|
"@elliemae/pui-theme": "~2.13.0",
|
|
40
|
-
"@elliemae/ds-
|
|
41
|
-
"@elliemae/ds-
|
|
40
|
+
"@elliemae/ds-system": "3.70.0-next.33",
|
|
41
|
+
"@elliemae/ds-props-helpers": "3.70.0-next.33"
|
|
42
42
|
},
|
|
43
43
|
"devDependencies": {
|
|
44
44
|
"jest": "^30.0.0",
|
|
45
45
|
"styled-components": "~5.3.9",
|
|
46
|
-
"@elliemae/ds-monorepo-devops": "3.70.0-next.
|
|
47
|
-
"@elliemae/ds-test-utils": "3.70.0-next.
|
|
46
|
+
"@elliemae/ds-monorepo-devops": "3.70.0-next.33",
|
|
47
|
+
"@elliemae/ds-test-utils": "3.70.0-next.33"
|
|
48
48
|
},
|
|
49
49
|
"peerDependencies": {
|
|
50
50
|
"react": "^18.3.1",
|