@elliemae/ds-notification-badge 3.16.0-next.17 → 3.16.0-next.18

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.
Files changed (10) hide show
  1. package/dist/cjs/NotificationBadge.js +19 -23
  2. package/dist/cjs/NotificationBadge.js.map +3 -3
  3. package/dist/cjs/style.js +26 -17
  4. package/dist/cjs/style.js.map +2 -2
  5. package/dist/esm/NotificationBadge.js +19 -23
  6. package/dist/esm/NotificationBadge.js.map +3 -3
  7. package/dist/esm/style.js +26 -17
  8. package/dist/esm/style.js.map +2 -2
  9. package/dist/types/style.d.ts +11 -14
  10. package/package.json +4 -4
package/dist/cjs/NotificationBadge.js CHANGED
@@ -34,7 +34,7 @@ __export(NotificationBadge_exports, {
34
34
  module.exports = __toCommonJS(NotificationBadge_exports);
35
35
  var React = __toESM(require("react"));
36
36
  var import_jsx_runtime = require("react/jsx-runtime");
37
- var import_react = require("react");
37
+ var import_react = __toESM(require("react"));
38
38
  var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
39
39
  var import_react_desc_prop_types = require("./react-desc-prop-types.js");
40
40
  var import_style = require("./style.js");
@@ -48,41 +48,37 @@ const NotificationBadge = (props) => {
48
48
  );
49
49
  const { type, color, value, size, disabled, position, Component, ...rest } = propsWithDefaults;
50
50
  const globalAttributes = (0, import_ds_props_helpers.useGetGlobalAttributes)(rest);
51
+ const [renderBadge, setRenderBadge] = import_react.default.useState(false);
51
52
  const Badge = type === "number" ? import_style.NumericBadge : import_style.DotBadge;
52
53
  const relatedComponentRef = (0, import_react.useRef)(null);
53
- const renderBadge = relatedComponentRef?.current || !Component;
54
- const [relatedComponentHeight, setRelatedComponentHeight] = (0, import_react.useState)(0);
55
- const [relatedComponentWidth, setRelatedComponentWidth] = (0, import_react.useState)(0);
56
- (0, import_react.useEffect)(() => {
57
- const relatedComponent = relatedComponentRef?.current;
58
- setRelatedComponentHeight(relatedComponent?.offsetHeight || 0);
59
- setRelatedComponentWidth(relatedComponent?.offsetWidth || 0);
60
- }, [relatedComponentRef]);
61
- let top = 0;
62
- let right = 0;
63
- let left = 0;
64
- if (position === "right")
65
- left = relatedComponentWidth / 2;
66
- if (position === "left")
67
- right = relatedComponentWidth / 2;
68
- top = relatedComponentHeight / 2;
69
- return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_style.Wrapper, { ...globalAttributes, children: [
70
- renderBadge && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
54
+ const wrapperComponentRef = (0, import_react.useRef)(null);
55
+ const badgeComponentRef = (0, import_react.useRef)(null);
56
+ import_react.default.useLayoutEffect(() => {
57
+ setRenderBadge(!!relatedComponentRef?.current || !Component);
58
+ }, [relatedComponentRef, relatedComponentRef?.current, Component]);
59
+ const top = relatedComponentRef?.current ? (relatedComponentRef?.current?.getBoundingClientRect().top || 0) - (wrapperComponentRef?.current?.getBoundingClientRect().top || 0) - (badgeComponentRef?.current?.getBoundingClientRect().height || 0) / 2 - 3 : 0;
60
+ const right = relatedComponentRef?.current ? (relatedComponentRef?.current?.getBoundingClientRect().right || 0) - (wrapperComponentRef?.current?.getBoundingClientRect().left || 0) - 3 : 0;
61
+ const left = relatedComponentRef?.current ? (wrapperComponentRef?.current?.getBoundingClientRect().right || 0) - (relatedComponentRef?.current?.getBoundingClientRect().right || 0) + (relatedComponentRef?.current?.getBoundingClientRect().width || 0) - 3 : 0;
62
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_style.Wrapper, { ...globalAttributes, ref: wrapperComponentRef, children: [
63
+ renderBadge ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
71
64
  Badge,
72
65
  {
66
+ ref: badgeComponentRef,
67
+ "data-position": position,
68
+ "data-type": type,
73
69
  "data-testid": "ds-notification-badge",
74
70
  color,
75
71
  size,
76
72
  value,
77
73
  disabled,
78
74
  top,
79
- left,
80
- right,
75
+ left: position === "left" ? left : null,
76
+ right: position === "right" ? right : null,
81
77
  charCount: getValueCharactersCount(value),
82
78
  children: type === "number" ? value : null
83
79
  }
84
- ),
85
- Component && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { innerRef: relatedComponentRef })
80
+ ) : null,
81
+ Component ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { innerRef: relatedComponentRef }) : null
86
82
  ] });
87
83
  };
88
84
  NotificationBadge.propTypes = import_react_desc_prop_types.NotificationBadgePropTypes;
package/dist/cjs/NotificationBadge.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/NotificationBadge.tsx", "../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["import type { WeakValidationMap } from 'react';\nimport React, { useState, useEffect, useRef } from 'react';\nimport {\n useMemoMergePropsWithDefault,\n useValidateTypescriptPropTypes,\n describe,\n useGetGlobalAttributes,\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';\n\nconst getValueCharactersCount = (val: string | number): number => String(val).length;\n\nconst NotificationBadge: React.ComponentType<DSNotificationBadgeT.Props> = (props) => {\n const propsWithDefaults = useMemoMergePropsWithDefault(props, defaultProps);\n useValidateTypescriptPropTypes<DSNotificationBadgeT.Props>(\n propsWithDefaults,\n NotificationBadgePropTypes,\n 'DSNotificationBadge',\n );\n const { type, color, value, size, disabled, position, Component, ...rest } = propsWithDefaults;\n const globalAttributes = useGetGlobalAttributes(rest);\n\n const Badge = type === 'number' ? NumericBadge : DotBadge;\n const relatedComponentRef = useRef<HTMLSpanElement>(null);\n const renderBadge = relatedComponentRef?.current || !Component;\n const [relatedComponentHeight, setRelatedComponentHeight] = useState(0);\n const [relatedComponentWidth, setRelatedComponentWidth] = useState(0);\n\n useEffect(() => {\n const relatedComponent = relatedComponentRef?.current;\n setRelatedComponentHeight(relatedComponent?.offsetHeight || 0);\n setRelatedComponentWidth(relatedComponent?.offsetWidth || 0);\n }, [relatedComponentRef]);\n\n let top = 0;\n let right = 0;\n let left = 0;\n\n if (position === 'right') left = relatedComponentWidth / 2;\n if (position === 'left') right = relatedComponentWidth / 2;\n top = relatedComponentHeight / 2;\n\n return (\n <Wrapper {...globalAttributes}>\n {renderBadge && (\n <Badge\n data-testid=\"ds-notification-badge\"\n color={color}\n size={size}\n value={value}\n disabled={disabled}\n top={top}\n left={left}\n right={right}\n charCount={getValueCharactersCount(value)}\n >\n {type === 'number' ? value : null}\n </Badge>\n )}\n {Component && <Component innerRef={relatedComponentRef} />}\n </Wrapper>\n );\n};\n\nNotificationBadge.propTypes = NotificationBadgePropTypes as WeakValidationMap<unknown>;\nNotificationBadge.displayName = 'NotificationBadge';\nconst NotificationBadgeWithSchema = describe(NotificationBadge);\nNotificationBadgeWithSchema.propTypes = NotificationBadgePropTypes as WeakValidationMap<unknown>;\n\nexport { NotificationBadge, NotificationBadgeWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD6CnB;AA5CJ,mBAAmD;AACnD,8BAKO;AAEP,mCAAyD;AACzD,mBAAgD;AAEhD,MAAM,0BAA0B,CAAC,QAAiC,OAAO,GAAG,EAAE;AAE9E,MAAM,oBAAqE,CAAC,UAAU;AACpF,QAAM,wBAAoB,sDAA6B,OAAO,yCAAY;AAC1E;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACA,QAAM,EAAE,MAAM,OAAO,OAAO,MAAM,UAAU,UAAU,WAAW,GAAG,KAAK,IAAI;AAC7E,QAAM,uBAAmB,gDAAuB,IAAI;AAEpD,QAAM,QAAQ,SAAS,WAAW,4BAAe;AACjD,QAAM,0BAAsB,qBAAwB,IAAI;AACxD,QAAM,cAAc,qBAAqB,WAAW,CAAC;AACrD,QAAM,CAAC,wBAAwB,yBAAyB,QAAI,uBAAS,CAAC;AACtE,QAAM,CAAC,uBAAuB,wBAAwB,QAAI,uBAAS,CAAC;AAEpE,8BAAU,MAAM;AACd,UAAM,mBAAmB,qBAAqB;AAC9C,8BAA0B,kBAAkB,gBAAgB,CAAC;AAC7D,6BAAyB,kBAAkB,eAAe,CAAC;AAAA,EAC7D,GAAG,CAAC,mBAAmB,CAAC;AAExB,MAAI,MAAM;AACV,MAAI,QAAQ;AACZ,MAAI,OAAO;AAEX,MAAI,aAAa;AAAS,WAAO,wBAAwB;AACzD,MAAI,aAAa;AAAQ,YAAQ,wBAAwB;AACzD,QAAM,yBAAyB;AAE/B,SACE,6CAAC,wBAAS,GAAG,kBACV;AAAA,mBACC;AAAA,MAAC;AAAA;AAAA,QACC,eAAY;AAAA,QACZ;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAW,wBAAwB,KAAK;AAAA,QAEvC,mBAAS,WAAW,QAAQ;AAAA;AAAA,IAC/B;AAAA,IAED,aAAa,4CAAC,aAAU,UAAU,qBAAqB;AAAA,KAC1D;AAEJ;AAEA,kBAAkB,YAAY;AAC9B,kBAAkB,cAAc;AAChC,MAAM,kCAA8B,kCAAS,iBAAiB;AAC9D,4BAA4B,YAAY;",
6
- "names": []
4
+ "sourcesContent": ["import type { WeakValidationMap } from 'react';\nimport React, { useRef } from 'react';\nimport {\n useMemoMergePropsWithDefault,\n useValidateTypescriptPropTypes,\n describe,\n useGetGlobalAttributes,\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';\n\nconst getValueCharactersCount = (val: string | number): number => String(val).length;\n\nconst NotificationBadge: React.ComponentType<DSNotificationBadgeT.Props> = (props) => {\n const propsWithDefaults = useMemoMergePropsWithDefault(props, defaultProps);\n useValidateTypescriptPropTypes<DSNotificationBadgeT.Props>(\n propsWithDefaults,\n NotificationBadgePropTypes,\n 'DSNotificationBadge',\n );\n const { type, color, value, size, disabled, position, Component, ...rest } = propsWithDefaults;\n const globalAttributes = useGetGlobalAttributes(rest);\n\n const [renderBadge, setRenderBadge] = React.useState(false);\n const Badge = type === 'number' ? 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, relatedComponentRef?.current, Component]);\n\n const top = relatedComponentRef?.current\n ? (relatedComponentRef?.current?.getBoundingClientRect().top || 0) -\n (wrapperComponentRef?.current?.getBoundingClientRect().top || 0) -\n (badgeComponentRef?.current?.getBoundingClientRect().height || 0) / 2 -\n 3\n : 0;\n const right = relatedComponentRef?.current\n ? (relatedComponentRef?.current?.getBoundingClientRect().right || 0) -\n (wrapperComponentRef?.current?.getBoundingClientRect().left || 0) -\n 3\n : 0;\n const left = relatedComponentRef?.current\n ? (wrapperComponentRef?.current?.getBoundingClientRect().right || 0) -\n (relatedComponentRef?.current?.getBoundingClientRect().right || 0) +\n (relatedComponentRef?.current?.getBoundingClientRect().width || 0) -\n 3\n : 0;\n\n return (\n <Wrapper {...globalAttributes} ref={wrapperComponentRef}>\n {renderBadge ? (\n <Badge\n ref={badgeComponentRef}\n data-position={position}\n data-type={type}\n data-testid=\"ds-notification-badge\"\n color={color}\n size={size}\n value={value}\n disabled={disabled}\n top={top}\n left={position === 'left' ? left : null}\n right={position === 'right' ? right : null}\n charCount={getValueCharactersCount(value)}\n >\n {type === 'number' ? value : null}\n </Badge>\n ) : null }\n {Component ? <Component innerRef={relatedComponentRef} /> : null}\n </Wrapper>\n );\n};\n\nNotificationBadge.propTypes = NotificationBadgePropTypes as WeakValidationMap<unknown>;\nNotificationBadge.displayName = 'NotificationBadge';\nconst NotificationBadgeWithSchema = describe(NotificationBadge);\nNotificationBadgeWithSchema.propTypes = NotificationBadgePropTypes as WeakValidationMap<unknown>;\n\nexport { NotificationBadge, NotificationBadgeWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADqDnB;AApDJ,mBAA8B;AAC9B,8BAKO;AAEP,mCAAyD;AACzD,mBAAgD;AAEhD,MAAM,0BAA0B,CAAC,QAAiC,OAAO,GAAG,EAAE;AAE9E,MAAM,oBAAqE,CAAC,UAAU;AACpF,QAAM,wBAAoB,sDAA6B,OAAO,yCAAY;AAC1E;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACA,QAAM,EAAE,MAAM,OAAO,OAAO,MAAM,UAAU,UAAU,WAAW,GAAG,KAAK,IAAI;AAC7E,QAAM,uBAAmB,gDAAuB,IAAI;AAEpD,QAAM,CAAC,aAAa,cAAc,IAAI,aAAAA,QAAM,SAAS,KAAK;AAC1D,QAAM,QAAQ,SAAS,WAAW,4BAAe;AACjD,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,qBAAqB,SAAS,SAAS,CAAC;AAEjE,QAAM,MAAM,qBAAqB,WAC5B,qBAAqB,SAAS,sBAAsB,EAAE,OAAO,MAC7D,qBAAqB,SAAS,sBAAsB,EAAE,OAAO,MAC7D,mBAAmB,SAAS,sBAAsB,EAAE,UAAU,KAAK,IACpE,IACA;AACJ,QAAM,QAAQ,qBAAqB,WAC9B,qBAAqB,SAAS,sBAAsB,EAAE,SAAS,MAC/D,qBAAqB,SAAS,sBAAsB,EAAE,QAAQ,KAC/D,IACA;AACJ,QAAM,OAAO,qBAAqB,WAC7B,qBAAqB,SAAS,sBAAsB,EAAE,SAAS,MAC/D,qBAAqB,SAAS,sBAAsB,EAAE,SAAS,MAC/D,qBAAqB,SAAS,sBAAsB,EAAE,SAAS,KAChE,IACA;AAEJ,SACE,6CAAC,wBAAS,GAAG,kBAAkB,KAAK,qBACjC;AAAA,kBACC;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,iBAAe;AAAA,QACf,aAAW;AAAA,QACX,eAAY;AAAA,QACZ;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,MAAM,aAAa,SAAS,OAAO;AAAA,QACnC,OAAO,aAAa,UAAU,QAAQ;AAAA,QACtC,WAAW,wBAAwB,KAAK;AAAA,QAEvC,mBAAS,WAAW,QAAQ;AAAA;AAAA,IAC/B,IACE;AAAA,IACH,YAAY,4CAAC,aAAU,UAAU,qBAAqB,IAAK;AAAA,KAC9D;AAEJ;AAEA,kBAAkB,YAAY;AAC9B,kBAAkB,cAAc;AAChC,MAAM,kCAA8B,kCAAS,iBAAiB;AAC9D,4BAA4B,YAAY;",
6
+ "names": ["React"]
7
7
  }
package/dist/cjs/style.js CHANGED
@@ -36,24 +36,41 @@ __export(style_exports, {
36
36
  module.exports = __toCommonJS(style_exports);
37
37
  var React = __toESM(require("react"));
38
38
  var import_ds_system = require("@elliemae/ds-system");
39
+ const magicNumbersWidth = {
40
+ l: 30,
41
+ l1: 21,
42
+ d: 15
43
+ };
44
+ const getWidth = (size, charCount) => {
45
+ if (size === "l" && charCount > 1)
46
+ return magicNumbersWidth.l;
47
+ if (size === "l" && charCount <= 1)
48
+ return magicNumbersWidth.l1;
49
+ if (size === "s" && charCount > 1)
50
+ return magicNumbersWidth.l1;
51
+ return magicNumbersWidth.d;
52
+ };
39
53
  const Wrapper = import_ds_system.styled.div`
40
- display: flex;
41
- flex-direction: column;
42
- justify-content: center;
43
- align-items: center;
44
54
  width: fit-content;
55
+ height: fit-content;
56
+ position: relative;
45
57
  `;
46
58
  const GenericBadge = import_ds_system.styled.span`
47
- position: relative;
48
- top: ${({ top }) => top ? `${top}px` : "unset"};
49
- left: ${({ left }) => left ? `${left}px` : "unset"};
50
- right: ${({ right }) => right ? `${right}px` : "unset"};
59
+ position: absolute;
60
+ display: flex;
61
+ justify-content: center;
62
+ align-items: center;
63
+ line-height: 1;
64
+ top: ${({ top }) => `${top}px`};
65
+ left: ${({ right }) => right ? `${right}px` : `unset`};
66
+ right: ${({ left }) => left ? `${left}px` : `unset`};
51
67
  `;
52
68
  const NumericBadge = (0, import_ds_system.styled)(GenericBadge)`
53
69
  display: flex;
54
70
  justify-content: center;
55
71
  align-items: center;
56
72
  width: fit-content;
73
+ white-space: nowrap;
57
74
  color: #fff;
58
75
  padding: ${({ charCount }) => charCount > 1 ? "0 5px" : "0"};
59
76
  background-color: ${({ disabled, color, theme }) => disabled ? theme.colors.neutral["500"] : color || theme.colors.danger["900"]};
@@ -61,15 +78,7 @@ const NumericBadge = (0, import_ds_system.styled)(GenericBadge)`
61
78
  font-size: ${({ size }) => size === "l" ? "16px" : "12px"};
62
79
  font-weight: ${({ size }) => size === "l" ? "400" : "600"};
63
80
  height: ${({ size }) => size === "l" ? "21px" : "15px"};
64
- min-width: ${({ size, charCount }) => {
65
- if (size === "l" && charCount > 1)
66
- return "30px";
67
- if (size === "l" && charCount <= 1)
68
- return "21px";
69
- if (size === "s" && charCount > 1)
70
- return "21px";
71
- return "15px";
72
- }};
81
+ min-width: ${({ size, charCount }) => `${getWidth(size, charCount)}px`};
73
82
  `;
74
83
  const DotBadge = (0, import_ds_system.styled)(GenericBadge)`
75
84
  background-color: ${({ disabled, theme, color }) => disabled ? theme.colors.neutral["500"] : color || theme.colors.brand[500]};
package/dist/cjs/style.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/style.tsx", "../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["import { styled } from '@elliemae/ds-system';\nimport type { DSNotificationBadgeT } from './react-desc-prop-types.js';\n\ninterface StyledGenericBadgeT {\n top: number;\n left: number;\n right: number;\n}\n\nexport const Wrapper = styled.div`\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n width: fit-content;\n`;\n\nexport const GenericBadge = styled.span<DSNotificationBadgeT.Props & StyledGenericBadgeT>`\n position: relative;\n top: ${({ top }) => (top ? `${top}px` : 'unset')};\n left: ${({ left }) => (left ? `${left}px` : 'unset')};\n right: ${({ right }) => (right ? `${right}px` : 'unset')};\n`;\n\nexport const NumericBadge = styled(GenericBadge)<{\n top: number;\n left: number;\n right: number;\n charCount: number;\n size?: string;\n value?: number | string;\n disabled?: boolean;\n color?: string;\n}>`\n display: flex;\n justify-content: center;\n align-items: center;\n width: fit-content;\n color: #fff;\n padding: ${({ charCount }) => (charCount > 1 ? '0 5px' : '0')};\n background-color: ${({ disabled, color, theme }) =>\n disabled ? theme.colors.neutral['500'] : color || theme.colors.danger['900']};\n border-radius: ${({ charCount }) => (charCount > 1 ? '10px' : '50%')};\n font-size: ${({ size }) => (size === 'l' ? '16px' : '12px')};\n font-weight: ${({ size }) => (size === 'l' ? '400' : '600')};\n height: ${({ size }) => (size === 'l' ? '21px' : '15px')};\n min-width: ${({ size, charCount }) => {\n if (size === 'l' && charCount > 1) return '30px';\n if (size === 'l' && charCount <= 1) return '21px';\n if (size === 's' && charCount > 1) return '21px';\n return '15px';\n }};\n`;\n\nexport const DotBadge = styled(GenericBadge)<DSNotificationBadgeT.Props>`\n background-color: ${({ disabled, theme, color }) =>\n disabled ? theme.colors.neutral['500'] : color || theme.colors.brand[500]};\n width: ${({ size }) => (size === 'l' ? '15px' : '10px')};\n height: ${({ size }) => (size === 'l' ? '15px' : '10px')};\n border-radius: 100%;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AAShB,MAAM,UAAU,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQvB,MAAM,eAAe,wBAAO;AAAA;AAAA,SAE1B,CAAC,EAAE,IAAI,MAAO,MAAM,GAAG,UAAU;AAAA,UAChC,CAAC,EAAE,KAAK,MAAO,OAAO,GAAG,WAAW;AAAA,WACnC,CAAC,EAAE,MAAM,MAAO,QAAQ,GAAG,YAAY;AAAA;AAG3C,MAAM,mBAAe,yBAAO,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAelC,CAAC,EAAE,UAAU,MAAO,YAAY,IAAI,UAAU;AAAA,sBACrC,CAAC,EAAE,UAAU,OAAO,MAAM,MAC5C,WAAW,MAAM,OAAO,QAAQ,KAAK,IAAI,SAAS,MAAM,OAAO,OAAO,KAAK;AAAA,mBAC5D,CAAC,EAAE,UAAU,MAAO,YAAY,IAAI,SAAS;AAAA,eACjD,CAAC,EAAE,KAAK,MAAO,SAAS,MAAM,SAAS;AAAA,iBACrC,CAAC,EAAE,KAAK,MAAO,SAAS,MAAM,QAAQ;AAAA,YAC3C,CAAC,EAAE,KAAK,MAAO,SAAS,MAAM,SAAS;AAAA,eACpC,CAAC,EAAE,MAAM,UAAU,MAAM;AACpC,MAAI,SAAS,OAAO,YAAY;AAAG,WAAO;AAC1C,MAAI,SAAS,OAAO,aAAa;AAAG,WAAO;AAC3C,MAAI,SAAS,OAAO,YAAY;AAAG,WAAO;AAC1C,SAAO;AACT;AAAA;AAGK,MAAM,eAAW,yBAAO,YAAY;AAAA,sBACrB,CAAC,EAAE,UAAU,OAAO,MAAM,MAC5C,WAAW,MAAM,OAAO,QAAQ,KAAK,IAAI,SAAS,MAAM,OAAO,MAAM,GAAG;AAAA,WACjE,CAAC,EAAE,KAAK,MAAO,SAAS,MAAM,SAAS;AAAA,YACtC,CAAC,EAAE,KAAK,MAAO,SAAS,MAAM,SAAS;AAAA;AAAA;",
4
+ "sourcesContent": ["import { styled } from '@elliemae/ds-system';\nimport type { Theme } from '@elliemae/pui-theme';\n\ninterface NumericBadgeT {\n top: number;\n left: number;\n right: number;\n charCount: number;\n size?: string;\n value?: number | string;\n disabled?: boolean;\n color?: string;\n theme: Theme;\n}\n\nconst magicNumbersWidth = {\n l: 30,\n l1: 21,\n d: 15,\n};\n\nconst getWidth = (size: string | undefined, charCount: number) => {\n if (size === 'l' && charCount > 1) return magicNumbersWidth.l;\n if (size === 'l' && charCount <= 1) return magicNumbersWidth.l1;\n if (size === 's' && charCount > 1) return magicNumbersWidth.l1;\n return magicNumbersWidth.d;\n};\n\nexport const Wrapper = styled.div`\n width: fit-content;\n height: fit-content;\n position: relative;\n`;\n\nexport const GenericBadge = styled.span<NumericBadgeT>`\n position: absolute;\n display: flex;\n justify-content: center;\n align-items: center;\n line-height: 1;\n top: ${({ top }: NumericBadgeT) => `${top}px`};\n left: ${({ right }: NumericBadgeT) => (right ? `${right}px` : `unset`)};\n right: ${({ left }: NumericBadgeT) => (left ? `${left}px` : `unset`)};\n`;\n\nexport const NumericBadge = styled(GenericBadge)<NumericBadgeT>`\n display: flex;\n justify-content: center;\n align-items: center;\n width: fit-content;\n white-space: nowrap;\n color: #fff;\n padding: ${({ charCount }: NumericBadgeT) => (charCount > 1 ? '0 5px' : '0')};\n background-color: ${({ disabled, color, theme }: NumericBadgeT) =>\n disabled ? theme.colors.neutral['500'] : color || theme.colors.danger['900']};\n border-radius: ${({ charCount }: NumericBadgeT) => (charCount > 1 ? '10px' : '50%')};\n font-size: ${({ size }: NumericBadgeT) => (size === 'l' ? '16px' : '12px')};\n font-weight: ${({ size }: NumericBadgeT) => (size === 'l' ? '400' : '600')};\n height: ${({ size }: NumericBadgeT) => (size === 'l' ? '21px' : '15px')};\n min-width: ${({ size, charCount }: NumericBadgeT) => `${getWidth(size, charCount)}px`};\n`;\n\nexport const DotBadge = styled(GenericBadge)<NumericBadgeT>`\n background-color: ${({ disabled, theme, color }: NumericBadgeT) =>\n disabled ? theme.colors.neutral['500'] : color || theme.colors.brand[500]};\n width: ${({ size }: NumericBadgeT) => (size === 'l' ? '15px' : '10px')};\n height: ${({ size }: NumericBadgeT) => (size === 'l' ? '15px' : '10px')};\n border-radius: 100%;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AAevB,MAAM,oBAAoB;AAAA,EACxB,GAAG;AAAA,EACH,IAAI;AAAA,EACJ,GAAG;AACL;AAEA,MAAM,WAAW,CAAC,MAA0B,cAAsB;AAChE,MAAI,SAAS,OAAO,YAAY;AAAG,WAAO,kBAAkB;AAC5D,MAAI,SAAS,OAAO,aAAa;AAAG,WAAO,kBAAkB;AAC7D,MAAI,SAAS,OAAO,YAAY;AAAG,WAAO,kBAAkB;AAC5D,SAAO,kBAAkB;AAC3B;AAEO,MAAM,UAAU,wBAAO;AAAA;AAAA;AAAA;AAAA;AAMvB,MAAM,eAAe,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAM1B,CAAC,EAAE,IAAI,MAAqB,GAAG;AAAA,UAC9B,CAAC,EAAE,MAAM,MAAsB,QAAQ,GAAG,YAAY;AAAA,WACrD,CAAC,EAAE,KAAK,MAAsB,OAAO,GAAG,WAAW;AAAA;AAGvD,MAAM,mBAAe,yBAAO,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAOlC,CAAC,EAAE,UAAU,MAAsB,YAAY,IAAI,UAAU;AAAA,sBACpD,CAAC,EAAE,UAAU,OAAO,MAAM,MAC5C,WAAW,MAAM,OAAO,QAAQ,KAAK,IAAI,SAAS,MAAM,OAAO,OAAO,KAAK;AAAA,mBAC5D,CAAC,EAAE,UAAU,MAAsB,YAAY,IAAI,SAAS;AAAA,eAChE,CAAC,EAAE,KAAK,MAAsB,SAAS,MAAM,SAAS;AAAA,iBACpD,CAAC,EAAE,KAAK,MAAsB,SAAS,MAAM,QAAQ;AAAA,YAC1D,CAAC,EAAE,KAAK,MAAsB,SAAS,MAAM,SAAS;AAAA,eACnD,CAAC,EAAE,MAAM,UAAU,MAAqB,GAAG,SAAS,MAAM,SAAS;AAAA;AAG3E,MAAM,eAAW,yBAAO,YAAY;AAAA,sBACrB,CAAC,EAAE,UAAU,OAAO,MAAM,MAC5C,WAAW,MAAM,OAAO,QAAQ,KAAK,IAAI,SAAS,MAAM,OAAO,MAAM,GAAG;AAAA,WACjE,CAAC,EAAE,KAAK,MAAsB,SAAS,MAAM,SAAS;AAAA,YACrD,CAAC,EAAE,KAAK,MAAsB,SAAS,MAAM,SAAS;AAAA;AAAA;",
6
6
  "names": []
7
7
  }
package/dist/esm/NotificationBadge.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import * as React from "react";
2
2
  import { jsx, jsxs } from "react/jsx-runtime";
3
- import { useState, useEffect, useRef } from "react";
3
+ import React2, { useRef } from "react";
4
4
  import {
5
5
  useMemoMergePropsWithDefault,
6
6
  useValidateTypescriptPropTypes,
@@ -19,41 +19,37 @@ const NotificationBadge = (props) => {
19
19
  );
20
20
  const { type, color, value, size, disabled, position, Component, ...rest } = propsWithDefaults;
21
21
  const globalAttributes = useGetGlobalAttributes(rest);
22
+ const [renderBadge, setRenderBadge] = React2.useState(false);
22
23
  const Badge = type === "number" ? NumericBadge : DotBadge;
23
24
  const relatedComponentRef = useRef(null);
24
- const renderBadge = relatedComponentRef?.current || !Component;
25
- const [relatedComponentHeight, setRelatedComponentHeight] = useState(0);
26
- const [relatedComponentWidth, setRelatedComponentWidth] = useState(0);
27
- useEffect(() => {
28
- const relatedComponent = relatedComponentRef?.current;
29
- setRelatedComponentHeight(relatedComponent?.offsetHeight || 0);
30
- setRelatedComponentWidth(relatedComponent?.offsetWidth || 0);
31
- }, [relatedComponentRef]);
32
- let top = 0;
33
- let right = 0;
34
- let left = 0;
35
- if (position === "right")
36
- left = relatedComponentWidth / 2;
37
- if (position === "left")
38
- right = relatedComponentWidth / 2;
39
- top = relatedComponentHeight / 2;
40
- return /* @__PURE__ */ jsxs(Wrapper, { ...globalAttributes, children: [
41
- renderBadge && /* @__PURE__ */ jsx(
25
+ const wrapperComponentRef = useRef(null);
26
+ const badgeComponentRef = useRef(null);
27
+ React2.useLayoutEffect(() => {
28
+ setRenderBadge(!!relatedComponentRef?.current || !Component);
29
+ }, [relatedComponentRef, relatedComponentRef?.current, Component]);
30
+ const top = relatedComponentRef?.current ? (relatedComponentRef?.current?.getBoundingClientRect().top || 0) - (wrapperComponentRef?.current?.getBoundingClientRect().top || 0) - (badgeComponentRef?.current?.getBoundingClientRect().height || 0) / 2 - 3 : 0;
31
+ const right = relatedComponentRef?.current ? (relatedComponentRef?.current?.getBoundingClientRect().right || 0) - (wrapperComponentRef?.current?.getBoundingClientRect().left || 0) - 3 : 0;
32
+ const left = relatedComponentRef?.current ? (wrapperComponentRef?.current?.getBoundingClientRect().right || 0) - (relatedComponentRef?.current?.getBoundingClientRect().right || 0) + (relatedComponentRef?.current?.getBoundingClientRect().width || 0) - 3 : 0;
33
+ return /* @__PURE__ */ jsxs(Wrapper, { ...globalAttributes, ref: wrapperComponentRef, children: [
34
+ renderBadge ? /* @__PURE__ */ jsx(
42
35
  Badge,
43
36
  {
37
+ ref: badgeComponentRef,
38
+ "data-position": position,
39
+ "data-type": type,
44
40
  "data-testid": "ds-notification-badge",
45
41
  color,
46
42
  size,
47
43
  value,
48
44
  disabled,
49
45
  top,
50
- left,
51
- right,
46
+ left: position === "left" ? left : null,
47
+ right: position === "right" ? right : null,
52
48
  charCount: getValueCharactersCount(value),
53
49
  children: type === "number" ? value : null
54
50
  }
55
- ),
56
- Component && /* @__PURE__ */ jsx(Component, { innerRef: relatedComponentRef })
51
+ ) : null,
52
+ Component ? /* @__PURE__ */ jsx(Component, { innerRef: relatedComponentRef }) : null
57
53
  ] });
58
54
  };
59
55
  NotificationBadge.propTypes = NotificationBadgePropTypes;
package/dist/esm/NotificationBadge.js.map CHANGED
@@ -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", "import type { WeakValidationMap } from 'react';\nimport React, { useState, useEffect, useRef } from 'react';\nimport {\n useMemoMergePropsWithDefault,\n useValidateTypescriptPropTypes,\n describe,\n useGetGlobalAttributes,\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';\n\nconst getValueCharactersCount = (val: string | number): number => String(val).length;\n\nconst NotificationBadge: React.ComponentType<DSNotificationBadgeT.Props> = (props) => {\n const propsWithDefaults = useMemoMergePropsWithDefault(props, defaultProps);\n useValidateTypescriptPropTypes<DSNotificationBadgeT.Props>(\n propsWithDefaults,\n NotificationBadgePropTypes,\n 'DSNotificationBadge',\n );\n const { type, color, value, size, disabled, position, Component, ...rest } = propsWithDefaults;\n const globalAttributes = useGetGlobalAttributes(rest);\n\n const Badge = type === 'number' ? NumericBadge : DotBadge;\n const relatedComponentRef = useRef<HTMLSpanElement>(null);\n const renderBadge = relatedComponentRef?.current || !Component;\n const [relatedComponentHeight, setRelatedComponentHeight] = useState(0);\n const [relatedComponentWidth, setRelatedComponentWidth] = useState(0);\n\n useEffect(() => {\n const relatedComponent = relatedComponentRef?.current;\n setRelatedComponentHeight(relatedComponent?.offsetHeight || 0);\n setRelatedComponentWidth(relatedComponent?.offsetWidth || 0);\n }, [relatedComponentRef]);\n\n let top = 0;\n let right = 0;\n let left = 0;\n\n if (position === 'right') left = relatedComponentWidth / 2;\n if (position === 'left') right = relatedComponentWidth / 2;\n top = relatedComponentHeight / 2;\n\n return (\n <Wrapper {...globalAttributes}>\n {renderBadge && (\n <Badge\n data-testid=\"ds-notification-badge\"\n color={color}\n size={size}\n value={value}\n disabled={disabled}\n top={top}\n left={left}\n right={right}\n charCount={getValueCharactersCount(value)}\n >\n {type === 'number' ? value : null}\n </Badge>\n )}\n {Component && <Component innerRef={relatedComponentRef} />}\n </Wrapper>\n );\n};\n\nNotificationBadge.propTypes = NotificationBadgePropTypes as WeakValidationMap<unknown>;\nNotificationBadge.displayName = 'NotificationBadge';\nconst NotificationBadgeWithSchema = describe(NotificationBadge);\nNotificationBadgeWithSchema.propTypes = NotificationBadgePropTypes as WeakValidationMap<unknown>;\n\nexport { NotificationBadge, NotificationBadgeWithSchema };\n"],
5
- "mappings": "AAAA,YAAY,WAAW;AC6CnB,SAEI,KAFJ;AA5CJ,SAAgB,UAAU,WAAW,cAAc;AACnD;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,4BAA4B,oBAAoB;AACzD,SAAS,SAAS,cAAc,gBAAgB;AAEhD,MAAM,0BAA0B,CAAC,QAAiC,OAAO,GAAG,EAAE;AAE9E,MAAM,oBAAqE,CAAC,UAAU;AACpF,QAAM,oBAAoB,6BAA6B,OAAO,YAAY;AAC1E;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACA,QAAM,EAAE,MAAM,OAAO,OAAO,MAAM,UAAU,UAAU,WAAW,GAAG,KAAK,IAAI;AAC7E,QAAM,mBAAmB,uBAAuB,IAAI;AAEpD,QAAM,QAAQ,SAAS,WAAW,eAAe;AACjD,QAAM,sBAAsB,OAAwB,IAAI;AACxD,QAAM,cAAc,qBAAqB,WAAW,CAAC;AACrD,QAAM,CAAC,wBAAwB,yBAAyB,IAAI,SAAS,CAAC;AACtE,QAAM,CAAC,uBAAuB,wBAAwB,IAAI,SAAS,CAAC;AAEpE,YAAU,MAAM;AACd,UAAM,mBAAmB,qBAAqB;AAC9C,8BAA0B,kBAAkB,gBAAgB,CAAC;AAC7D,6BAAyB,kBAAkB,eAAe,CAAC;AAAA,EAC7D,GAAG,CAAC,mBAAmB,CAAC;AAExB,MAAI,MAAM;AACV,MAAI,QAAQ;AACZ,MAAI,OAAO;AAEX,MAAI,aAAa;AAAS,WAAO,wBAAwB;AACzD,MAAI,aAAa;AAAQ,YAAQ,wBAAwB;AACzD,QAAM,yBAAyB;AAE/B,SACE,qBAAC,WAAS,GAAG,kBACV;AAAA,mBACC;AAAA,MAAC;AAAA;AAAA,QACC,eAAY;AAAA,QACZ;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAW,wBAAwB,KAAK;AAAA,QAEvC,mBAAS,WAAW,QAAQ;AAAA;AAAA,IAC/B;AAAA,IAED,aAAa,oBAAC,aAAU,UAAU,qBAAqB;AAAA,KAC1D;AAEJ;AAEA,kBAAkB,YAAY;AAC9B,kBAAkB,cAAc;AAChC,MAAM,8BAA8B,SAAS,iBAAiB;AAC9D,4BAA4B,YAAY;",
6
- "names": []
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { WeakValidationMap } from 'react';\nimport React, { useRef } from 'react';\nimport {\n useMemoMergePropsWithDefault,\n useValidateTypescriptPropTypes,\n describe,\n useGetGlobalAttributes,\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';\n\nconst getValueCharactersCount = (val: string | number): number => String(val).length;\n\nconst NotificationBadge: React.ComponentType<DSNotificationBadgeT.Props> = (props) => {\n const propsWithDefaults = useMemoMergePropsWithDefault(props, defaultProps);\n useValidateTypescriptPropTypes<DSNotificationBadgeT.Props>(\n propsWithDefaults,\n NotificationBadgePropTypes,\n 'DSNotificationBadge',\n );\n const { type, color, value, size, disabled, position, Component, ...rest } = propsWithDefaults;\n const globalAttributes = useGetGlobalAttributes(rest);\n\n const [renderBadge, setRenderBadge] = React.useState(false);\n const Badge = type === 'number' ? 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, relatedComponentRef?.current, Component]);\n\n const top = relatedComponentRef?.current\n ? (relatedComponentRef?.current?.getBoundingClientRect().top || 0) -\n (wrapperComponentRef?.current?.getBoundingClientRect().top || 0) -\n (badgeComponentRef?.current?.getBoundingClientRect().height || 0) / 2 -\n 3\n : 0;\n const right = relatedComponentRef?.current\n ? (relatedComponentRef?.current?.getBoundingClientRect().right || 0) -\n (wrapperComponentRef?.current?.getBoundingClientRect().left || 0) -\n 3\n : 0;\n const left = relatedComponentRef?.current\n ? (wrapperComponentRef?.current?.getBoundingClientRect().right || 0) -\n (relatedComponentRef?.current?.getBoundingClientRect().right || 0) +\n (relatedComponentRef?.current?.getBoundingClientRect().width || 0) -\n 3\n : 0;\n\n return (\n <Wrapper {...globalAttributes} ref={wrapperComponentRef}>\n {renderBadge ? (\n <Badge\n ref={badgeComponentRef}\n data-position={position}\n data-type={type}\n data-testid=\"ds-notification-badge\"\n color={color}\n size={size}\n value={value}\n disabled={disabled}\n top={top}\n left={position === 'left' ? left : null}\n right={position === 'right' ? right : null}\n charCount={getValueCharactersCount(value)}\n >\n {type === 'number' ? value : null}\n </Badge>\n ) : null }\n {Component ? <Component innerRef={relatedComponentRef} /> : null}\n </Wrapper>\n );\n};\n\nNotificationBadge.propTypes = NotificationBadgePropTypes as WeakValidationMap<unknown>;\nNotificationBadge.displayName = 'NotificationBadge';\nconst NotificationBadgeWithSchema = describe(NotificationBadge);\nNotificationBadgeWithSchema.propTypes = NotificationBadgePropTypes as WeakValidationMap<unknown>;\n\nexport { NotificationBadge, NotificationBadgeWithSchema };\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACqDnB,SAEI,KAFJ;AApDJ,OAAOA,UAAS,cAAc;AAC9B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,4BAA4B,oBAAoB;AACzD,SAAS,SAAS,cAAc,gBAAgB;AAEhD,MAAM,0BAA0B,CAAC,QAAiC,OAAO,GAAG,EAAE;AAE9E,MAAM,oBAAqE,CAAC,UAAU;AACpF,QAAM,oBAAoB,6BAA6B,OAAO,YAAY;AAC1E;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACA,QAAM,EAAE,MAAM,OAAO,OAAO,MAAM,UAAU,UAAU,WAAW,GAAG,KAAK,IAAI;AAC7E,QAAM,mBAAmB,uBAAuB,IAAI;AAEpD,QAAM,CAAC,aAAa,cAAc,IAAIA,OAAM,SAAS,KAAK;AAC1D,QAAM,QAAQ,SAAS,WAAW,eAAe;AACjD,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,qBAAqB,SAAS,SAAS,CAAC;AAEjE,QAAM,MAAM,qBAAqB,WAC5B,qBAAqB,SAAS,sBAAsB,EAAE,OAAO,MAC7D,qBAAqB,SAAS,sBAAsB,EAAE,OAAO,MAC7D,mBAAmB,SAAS,sBAAsB,EAAE,UAAU,KAAK,IACpE,IACA;AACJ,QAAM,QAAQ,qBAAqB,WAC9B,qBAAqB,SAAS,sBAAsB,EAAE,SAAS,MAC/D,qBAAqB,SAAS,sBAAsB,EAAE,QAAQ,KAC/D,IACA;AACJ,QAAM,OAAO,qBAAqB,WAC7B,qBAAqB,SAAS,sBAAsB,EAAE,SAAS,MAC/D,qBAAqB,SAAS,sBAAsB,EAAE,SAAS,MAC/D,qBAAqB,SAAS,sBAAsB,EAAE,SAAS,KAChE,IACA;AAEJ,SACE,qBAAC,WAAS,GAAG,kBAAkB,KAAK,qBACjC;AAAA,kBACC;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,iBAAe;AAAA,QACf,aAAW;AAAA,QACX,eAAY;AAAA,QACZ;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,MAAM,aAAa,SAAS,OAAO;AAAA,QACnC,OAAO,aAAa,UAAU,QAAQ;AAAA,QACtC,WAAW,wBAAwB,KAAK;AAAA,QAEvC,mBAAS,WAAW,QAAQ;AAAA;AAAA,IAC/B,IACE;AAAA,IACH,YAAY,oBAAC,aAAU,UAAU,qBAAqB,IAAK;AAAA,KAC9D;AAEJ;AAEA,kBAAkB,YAAY;AAC9B,kBAAkB,cAAc;AAChC,MAAM,8BAA8B,SAAS,iBAAiB;AAC9D,4BAA4B,YAAY;",
6
+ "names": ["React"]
7
7
  }
package/dist/esm/style.js CHANGED
@@ -1,23 +1,40 @@
1
1
  import * as React from "react";
2
2
  import { styled } from "@elliemae/ds-system";
3
+ const magicNumbersWidth = {
4
+ l: 30,
5
+ l1: 21,
6
+ d: 15
7
+ };
8
+ const getWidth = (size, charCount) => {
9
+ if (size === "l" && charCount > 1)
10
+ return magicNumbersWidth.l;
11
+ if (size === "l" && charCount <= 1)
12
+ return magicNumbersWidth.l1;
13
+ if (size === "s" && charCount > 1)
14
+ return magicNumbersWidth.l1;
15
+ return magicNumbersWidth.d;
16
+ };
3
17
  const Wrapper = styled.div`
4
- display: flex;
5
- flex-direction: column;
6
- justify-content: center;
7
- align-items: center;
8
18
  width: fit-content;
19
+ height: fit-content;
20
+ position: relative;
9
21
  `;
10
22
  const GenericBadge = styled.span`
11
- position: relative;
12
- top: ${({ top }) => top ? `${top}px` : "unset"};
13
- left: ${({ left }) => left ? `${left}px` : "unset"};
14
- right: ${({ right }) => right ? `${right}px` : "unset"};
23
+ position: absolute;
24
+ display: flex;
25
+ justify-content: center;
26
+ align-items: center;
27
+ line-height: 1;
28
+ top: ${({ top }) => `${top}px`};
29
+ left: ${({ right }) => right ? `${right}px` : `unset`};
30
+ right: ${({ left }) => left ? `${left}px` : `unset`};
15
31
  `;
16
32
  const NumericBadge = styled(GenericBadge)`
17
33
  display: flex;
18
34
  justify-content: center;
19
35
  align-items: center;
20
36
  width: fit-content;
37
+ white-space: nowrap;
21
38
  color: #fff;
22
39
  padding: ${({ charCount }) => charCount > 1 ? "0 5px" : "0"};
23
40
  background-color: ${({ disabled, color, theme }) => disabled ? theme.colors.neutral["500"] : color || theme.colors.danger["900"]};
@@ -25,15 +42,7 @@ const NumericBadge = styled(GenericBadge)`
25
42
  font-size: ${({ size }) => size === "l" ? "16px" : "12px"};
26
43
  font-weight: ${({ size }) => size === "l" ? "400" : "600"};
27
44
  height: ${({ size }) => size === "l" ? "21px" : "15px"};
28
- min-width: ${({ size, charCount }) => {
29
- if (size === "l" && charCount > 1)
30
- return "30px";
31
- if (size === "l" && charCount <= 1)
32
- return "21px";
33
- if (size === "s" && charCount > 1)
34
- return "21px";
35
- return "15px";
36
- }};
45
+ min-width: ${({ size, charCount }) => `${getWidth(size, charCount)}px`};
37
46
  `;
38
47
  const DotBadge = styled(GenericBadge)`
39
48
  background-color: ${({ disabled, theme, color }) => disabled ? theme.colors.neutral["500"] : color || theme.colors.brand[500]};
package/dist/esm/style.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/style.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\nimport type { DSNotificationBadgeT } from './react-desc-prop-types.js';\n\ninterface StyledGenericBadgeT {\n top: number;\n left: number;\n right: number;\n}\n\nexport const Wrapper = styled.div`\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n width: fit-content;\n`;\n\nexport const GenericBadge = styled.span<DSNotificationBadgeT.Props & StyledGenericBadgeT>`\n position: relative;\n top: ${({ top }) => (top ? `${top}px` : 'unset')};\n left: ${({ left }) => (left ? `${left}px` : 'unset')};\n right: ${({ right }) => (right ? `${right}px` : 'unset')};\n`;\n\nexport const NumericBadge = styled(GenericBadge)<{\n top: number;\n left: number;\n right: number;\n charCount: number;\n size?: string;\n value?: number | string;\n disabled?: boolean;\n color?: string;\n}>`\n display: flex;\n justify-content: center;\n align-items: center;\n width: fit-content;\n color: #fff;\n padding: ${({ charCount }) => (charCount > 1 ? '0 5px' : '0')};\n background-color: ${({ disabled, color, theme }) =>\n disabled ? theme.colors.neutral['500'] : color || theme.colors.danger['900']};\n border-radius: ${({ charCount }) => (charCount > 1 ? '10px' : '50%')};\n font-size: ${({ size }) => (size === 'l' ? '16px' : '12px')};\n font-weight: ${({ size }) => (size === 'l' ? '400' : '600')};\n height: ${({ size }) => (size === 'l' ? '21px' : '15px')};\n min-width: ${({ size, charCount }) => {\n if (size === 'l' && charCount > 1) return '30px';\n if (size === 'l' && charCount <= 1) return '21px';\n if (size === 's' && charCount > 1) return '21px';\n return '15px';\n }};\n`;\n\nexport const DotBadge = styled(GenericBadge)<DSNotificationBadgeT.Props>`\n background-color: ${({ disabled, theme, color }) =>\n disabled ? theme.colors.neutral['500'] : color || theme.colors.brand[500]};\n width: ${({ size }) => (size === 'l' ? '15px' : '10px')};\n height: ${({ size }) => (size === 'l' ? '15px' : '10px')};\n border-radius: 100%;\n`;\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc;AAShB,MAAM,UAAU,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQvB,MAAM,eAAe,OAAO;AAAA;AAAA,SAE1B,CAAC,EAAE,IAAI,MAAO,MAAM,GAAG,UAAU;AAAA,UAChC,CAAC,EAAE,KAAK,MAAO,OAAO,GAAG,WAAW;AAAA,WACnC,CAAC,EAAE,MAAM,MAAO,QAAQ,GAAG,YAAY;AAAA;AAG3C,MAAM,eAAe,OAAO,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAelC,CAAC,EAAE,UAAU,MAAO,YAAY,IAAI,UAAU;AAAA,sBACrC,CAAC,EAAE,UAAU,OAAO,MAAM,MAC5C,WAAW,MAAM,OAAO,QAAQ,KAAK,IAAI,SAAS,MAAM,OAAO,OAAO,KAAK;AAAA,mBAC5D,CAAC,EAAE,UAAU,MAAO,YAAY,IAAI,SAAS;AAAA,eACjD,CAAC,EAAE,KAAK,MAAO,SAAS,MAAM,SAAS;AAAA,iBACrC,CAAC,EAAE,KAAK,MAAO,SAAS,MAAM,QAAQ;AAAA,YAC3C,CAAC,EAAE,KAAK,MAAO,SAAS,MAAM,SAAS;AAAA,eACpC,CAAC,EAAE,MAAM,UAAU,MAAM;AACpC,MAAI,SAAS,OAAO,YAAY;AAAG,WAAO;AAC1C,MAAI,SAAS,OAAO,aAAa;AAAG,WAAO;AAC3C,MAAI,SAAS,OAAO,YAAY;AAAG,WAAO;AAC1C,SAAO;AACT;AAAA;AAGK,MAAM,WAAW,OAAO,YAAY;AAAA,sBACrB,CAAC,EAAE,UAAU,OAAO,MAAM,MAC5C,WAAW,MAAM,OAAO,QAAQ,KAAK,IAAI,SAAS,MAAM,OAAO,MAAM,GAAG;AAAA,WACjE,CAAC,EAAE,KAAK,MAAO,SAAS,MAAM,SAAS;AAAA,YACtC,CAAC,EAAE,KAAK,MAAO,SAAS,MAAM,SAAS;AAAA;AAAA;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\nimport type { Theme } from '@elliemae/pui-theme';\n\ninterface NumericBadgeT {\n top: number;\n left: number;\n right: number;\n charCount: number;\n size?: string;\n value?: number | string;\n disabled?: boolean;\n color?: string;\n theme: Theme;\n}\n\nconst magicNumbersWidth = {\n l: 30,\n l1: 21,\n d: 15,\n};\n\nconst getWidth = (size: string | undefined, charCount: number) => {\n if (size === 'l' && charCount > 1) return magicNumbersWidth.l;\n if (size === 'l' && charCount <= 1) return magicNumbersWidth.l1;\n if (size === 's' && charCount > 1) return magicNumbersWidth.l1;\n return magicNumbersWidth.d;\n};\n\nexport const Wrapper = styled.div`\n width: fit-content;\n height: fit-content;\n position: relative;\n`;\n\nexport const GenericBadge = styled.span<NumericBadgeT>`\n position: absolute;\n display: flex;\n justify-content: center;\n align-items: center;\n line-height: 1;\n top: ${({ top }: NumericBadgeT) => `${top}px`};\n left: ${({ right }: NumericBadgeT) => (right ? `${right}px` : `unset`)};\n right: ${({ left }: NumericBadgeT) => (left ? `${left}px` : `unset`)};\n`;\n\nexport const NumericBadge = styled(GenericBadge)<NumericBadgeT>`\n display: flex;\n justify-content: center;\n align-items: center;\n width: fit-content;\n white-space: nowrap;\n color: #fff;\n padding: ${({ charCount }: NumericBadgeT) => (charCount > 1 ? '0 5px' : '0')};\n background-color: ${({ disabled, color, theme }: NumericBadgeT) =>\n disabled ? theme.colors.neutral['500'] : color || theme.colors.danger['900']};\n border-radius: ${({ charCount }: NumericBadgeT) => (charCount > 1 ? '10px' : '50%')};\n font-size: ${({ size }: NumericBadgeT) => (size === 'l' ? '16px' : '12px')};\n font-weight: ${({ size }: NumericBadgeT) => (size === 'l' ? '400' : '600')};\n height: ${({ size }: NumericBadgeT) => (size === 'l' ? '21px' : '15px')};\n min-width: ${({ size, charCount }: NumericBadgeT) => `${getWidth(size, charCount)}px`};\n`;\n\nexport const DotBadge = styled(GenericBadge)<NumericBadgeT>`\n background-color: ${({ disabled, theme, color }: NumericBadgeT) =>\n disabled ? theme.colors.neutral['500'] : color || theme.colors.brand[500]};\n width: ${({ size }: NumericBadgeT) => (size === 'l' ? '15px' : '10px')};\n height: ${({ size }: NumericBadgeT) => (size === 'l' ? '15px' : '10px')};\n border-radius: 100%;\n`;\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc;AAevB,MAAM,oBAAoB;AAAA,EACxB,GAAG;AAAA,EACH,IAAI;AAAA,EACJ,GAAG;AACL;AAEA,MAAM,WAAW,CAAC,MAA0B,cAAsB;AAChE,MAAI,SAAS,OAAO,YAAY;AAAG,WAAO,kBAAkB;AAC5D,MAAI,SAAS,OAAO,aAAa;AAAG,WAAO,kBAAkB;AAC7D,MAAI,SAAS,OAAO,YAAY;AAAG,WAAO,kBAAkB;AAC5D,SAAO,kBAAkB;AAC3B;AAEO,MAAM,UAAU,OAAO;AAAA;AAAA;AAAA;AAAA;AAMvB,MAAM,eAAe,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAM1B,CAAC,EAAE,IAAI,MAAqB,GAAG;AAAA,UAC9B,CAAC,EAAE,MAAM,MAAsB,QAAQ,GAAG,YAAY;AAAA,WACrD,CAAC,EAAE,KAAK,MAAsB,OAAO,GAAG,WAAW;AAAA;AAGvD,MAAM,eAAe,OAAO,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAOlC,CAAC,EAAE,UAAU,MAAsB,YAAY,IAAI,UAAU;AAAA,sBACpD,CAAC,EAAE,UAAU,OAAO,MAAM,MAC5C,WAAW,MAAM,OAAO,QAAQ,KAAK,IAAI,SAAS,MAAM,OAAO,OAAO,KAAK;AAAA,mBAC5D,CAAC,EAAE,UAAU,MAAsB,YAAY,IAAI,SAAS;AAAA,eAChE,CAAC,EAAE,KAAK,MAAsB,SAAS,MAAM,SAAS;AAAA,iBACpD,CAAC,EAAE,KAAK,MAAsB,SAAS,MAAM,QAAQ;AAAA,YAC1D,CAAC,EAAE,KAAK,MAAsB,SAAS,MAAM,SAAS;AAAA,eACnD,CAAC,EAAE,MAAM,UAAU,MAAqB,GAAG,SAAS,MAAM,SAAS;AAAA;AAG3E,MAAM,WAAW,OAAO,YAAY;AAAA,sBACrB,CAAC,EAAE,UAAU,OAAO,MAAM,MAC5C,WAAW,MAAM,OAAO,QAAQ,KAAK,IAAI,SAAS,MAAM,OAAO,MAAM,GAAG;AAAA,WACjE,CAAC,EAAE,KAAK,MAAsB,SAAS,MAAM,SAAS;AAAA,YACrD,CAAC,EAAE,KAAK,MAAsB,SAAS,MAAM,SAAS;AAAA;AAAA;",
6
6
  "names": []
7
7
  }
package/dist/types/style.d.ts CHANGED
@@ -1,20 +1,17 @@
1
- import type { DSNotificationBadgeT } from './react-desc-prop-types.js';
2
- interface StyledGenericBadgeT {
1
+ import type { Theme } from '@elliemae/pui-theme';
2
+ interface NumericBadgeT {
3
3
  top: number;
4
4
  left: number;
5
5
  right: number;
6
+ charCount: number;
7
+ size?: string;
8
+ value?: number | string;
9
+ disabled?: boolean;
10
+ color?: string;
11
+ theme: Theme;
6
12
  }
7
13
  export declare const Wrapper: import("styled-components").StyledComponent<keyof JSX.IntrinsicElements, import("@elliemae/ds-system").Theme, Record<string, unknown> & object, never>;
8
- export declare const GenericBadge: import("styled-components").StyledComponent<keyof JSX.IntrinsicElements, import("@elliemae/ds-system").Theme, Record<string, unknown> & DSNotificationBadgeT.Props & StyledGenericBadgeT, never>;
9
- export declare const NumericBadge: import("styled-components").StyledComponent<keyof JSX.IntrinsicElements, import("@elliemae/ds-system").Theme, Record<string, unknown> & DSNotificationBadgeT.Props & StyledGenericBadgeT & {
10
- top: number;
11
- left: number;
12
- right: number;
13
- charCount: number;
14
- size?: string | undefined;
15
- value?: string | number | undefined;
16
- disabled?: boolean | undefined;
17
- color?: string | undefined;
18
- }, never>;
19
- export declare const DotBadge: import("styled-components").StyledComponent<keyof JSX.IntrinsicElements, import("@elliemae/ds-system").Theme, Record<string, unknown> & DSNotificationBadgeT.Props & StyledGenericBadgeT, never>;
14
+ export declare const GenericBadge: import("styled-components").StyledComponent<keyof JSX.IntrinsicElements, import("@elliemae/ds-system").Theme, Record<string, unknown> & NumericBadgeT, never>;
15
+ export declare const NumericBadge: import("styled-components").StyledComponent<keyof JSX.IntrinsicElements, import("@elliemae/ds-system").Theme, Record<string, unknown> & NumericBadgeT, never>;
16
+ export declare const DotBadge: import("styled-components").StyledComponent<keyof JSX.IntrinsicElements, import("@elliemae/ds-system").Theme, Record<string, unknown> & NumericBadgeT, never>;
20
17
  export {};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-notification-badge",
3
- "version": "3.16.0-next.17",
3
+ "version": "3.16.0-next.18",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Notification Badge",
6
6
  "files": [
@@ -47,9 +47,9 @@
47
47
  "indent": 4
48
48
  },
49
49
  "dependencies": {
50
- "@elliemae/ds-props-helpers": "3.16.0-next.17",
51
- "@elliemae/ds-system": "3.16.0-next.17",
52
- "@elliemae/ds-utilities": "3.16.0-next.17"
50
+ "@elliemae/ds-props-helpers": "3.16.0-next.18",
51
+ "@elliemae/ds-system": "3.16.0-next.18",
52
+ "@elliemae/ds-utilities": "3.16.0-next.18"
53
53
  },
54
54
  "devDependencies": {
55
55
  "@testing-library/react": "~12.1.3",