@elliemae/ds-notification-badge 3.17.0-next.14 → 3.17.0-next.16
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/NotificationBadge.js +11 -6
- package/dist/cjs/NotificationBadge.js.map +2 -2
- package/dist/cjs/helpers.js +42 -0
- package/dist/cjs/helpers.js.map +7 -0
- package/dist/cjs/style.js +2 -2
- package/dist/cjs/style.js.map +2 -2
- package/dist/esm/NotificationBadge.js +11 -6
- package/dist/esm/NotificationBadge.js.map +2 -2
- package/dist/esm/helpers.js +12 -0
- package/dist/esm/helpers.js.map +7 -0
- package/dist/esm/style.js +2 -2
- package/dist/esm/style.js.map +2 -2
- package/dist/types/helpers.d.ts +4 -0
- package/package.json +3 -3
|
@@ -38,6 +38,7 @@ 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");
|
|
41
|
+
var import_helpers = require("./helpers.js");
|
|
41
42
|
const getValueCharactersCount = (val) => String(val).length;
|
|
42
43
|
const NotificationBadge = (props) => {
|
|
43
44
|
const propsWithDefaults = (0, import_ds_props_helpers.useMemoMergePropsWithDefault)(props, import_react_desc_prop_types.defaultProps);
|
|
@@ -55,10 +56,14 @@ const NotificationBadge = (props) => {
|
|
|
55
56
|
const badgeComponentRef = (0, import_react.useRef)(null);
|
|
56
57
|
import_react.default.useLayoutEffect(() => {
|
|
57
58
|
setRenderBadge(!!relatedComponentRef?.current || !Component);
|
|
58
|
-
}, [relatedComponentRef,
|
|
59
|
-
const
|
|
60
|
-
const
|
|
61
|
-
const
|
|
59
|
+
}, [relatedComponentRef, Component]);
|
|
60
|
+
const relatedComputedStyle = relatedComponentRef?.current ? window.getComputedStyle(relatedComponentRef?.current) : 0;
|
|
61
|
+
const spaceLeft = (0, import_helpers.getSpaceLeft)(relatedComputedStyle);
|
|
62
|
+
const spaceRight = (0, import_helpers.getSpaceRight)(relatedComputedStyle);
|
|
63
|
+
const spaceTop = (0, import_helpers.getSpaceTop)(relatedComputedStyle);
|
|
64
|
+
const top = relatedComponentRef?.current ? spaceTop - 7 : 0;
|
|
65
|
+
const left = relatedComponentRef?.current ? spaceLeft - 7 : 0;
|
|
66
|
+
const right = relatedComponentRef?.current ? spaceRight - 7 : 0;
|
|
62
67
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_style.Wrapper, { ...globalAttributes, ref: wrapperComponentRef, children: [
|
|
63
68
|
renderBadge ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
64
69
|
Badge,
|
|
@@ -72,13 +77,13 @@ const NotificationBadge = (props) => {
|
|
|
72
77
|
value,
|
|
73
78
|
disabled,
|
|
74
79
|
top,
|
|
75
|
-
left: position === "left" ? left : null,
|
|
76
80
|
right: position === "right" ? right : null,
|
|
81
|
+
left: position === "left" ? left : null,
|
|
77
82
|
charCount: getValueCharactersCount(value),
|
|
78
83
|
children: type === "number" ? value : null
|
|
79
84
|
}
|
|
80
85
|
) : null,
|
|
81
|
-
Component ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { innerRef: relatedComponentRef }) : null
|
|
86
|
+
Component ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { "data-testid": "ds-notification-badge-component", innerRef: relatedComponentRef }) : null
|
|
82
87
|
] });
|
|
83
88
|
};
|
|
84
89
|
NotificationBadge.propTypes = import_react_desc_prop_types.NotificationBadgePropTypes;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/NotificationBadge.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable @typescript-eslint/restrict-plus-operands */\n/* eslint-disable complexity */\nimport 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';\nimport { getSpaceLeft, getSpaceRight, getSpaceTop } from './helpers.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<Element>(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 top = relatedComponentRef?.current ? spaceTop - 7 : 0;\n const left = relatedComponentRef?.current ? spaceLeft - 7 : 0;\n const right = relatedComponentRef?.current ? spaceRight - 7 : 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 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.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;AD+CnB;AA5CJ,mBAA8B;AAC9B,8BAKO;AAEP,mCAAyD;AACzD,mBAAgD;AAChD,qBAAyD;AAEzD,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,qBAAgB,IAAI;AAChD,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,MAAM,qBAAqB,UAAU,WAAW,IAAI;AAC1D,QAAM,OAAO,qBAAqB,UAAU,YAAY,IAAI;AAC5D,QAAM,QAAQ,qBAAqB,UAAU,aAAa,IAAI;AAE9D,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,OAAO,aAAa,UAAU,QAAQ;AAAA,QACtC,MAAM,aAAa,SAAS,OAAO;AAAA,QACnC,WAAW,wBAAwB,KAAK;AAAA,QAEvC,mBAAS,WAAW,QAAQ;AAAA;AAAA,IAC/B,IACE;AAAA,IACH,YAAY,4CAAC,aAAU,eAAY,mCAAkC,UAAU,qBAAqB,IAAK;AAAA,KAC5G;AAEJ;AAEA,kBAAkB,YAAY;AAC9B,kBAAkB,cAAc;AAChC,MAAM,kCAA8B,kCAAS,iBAAiB;AAC9D,4BAA4B,YAAY;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __create = Object.create;
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
12
|
+
var __copyProps = (to, from, except, desc) => {
|
|
13
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(from))
|
|
15
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
16
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
17
|
+
}
|
|
18
|
+
return to;
|
|
19
|
+
};
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
25
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
26
|
+
mod
|
|
27
|
+
));
|
|
28
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
|
+
var helpers_exports = {};
|
|
30
|
+
__export(helpers_exports, {
|
|
31
|
+
getSpaceLeft: () => getSpaceLeft,
|
|
32
|
+
getSpaceRight: () => getSpaceRight,
|
|
33
|
+
getSpaceTop: () => getSpaceTop,
|
|
34
|
+
getSpaceWidth: () => getSpaceWidth
|
|
35
|
+
});
|
|
36
|
+
module.exports = __toCommonJS(helpers_exports);
|
|
37
|
+
var React = __toESM(require("react"));
|
|
38
|
+
const getSpaceLeft = (relatedComputedStyle) => relatedComputedStyle ? parseFloat(relatedComputedStyle.marginLeft) : 0;
|
|
39
|
+
const getSpaceRight = (relatedComputedStyle) => relatedComputedStyle ? parseFloat(relatedComputedStyle.marginRight) : 0;
|
|
40
|
+
const getSpaceTop = (relatedComputedStyle) => relatedComputedStyle ? parseFloat(relatedComputedStyle.marginTop) : 0;
|
|
41
|
+
const getSpaceWidth = (relatedComputedStyle) => relatedComputedStyle ? parseFloat(relatedComputedStyle.width) : 0;
|
|
42
|
+
//# sourceMappingURL=helpers.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/helpers.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
+
"sourcesContent": ["export const getSpaceLeft = (relatedComputedStyle: CSSStyleDeclaration | 0): number =>\n relatedComputedStyle ? parseFloat(relatedComputedStyle.marginLeft) : 0;\n\nexport const getSpaceRight = (relatedComputedStyle: CSSStyleDeclaration | 0): number =>\n relatedComputedStyle ? parseFloat(relatedComputedStyle.marginRight) : 0;\n\nexport const getSpaceTop = (relatedComputedStyle: CSSStyleDeclaration | 0): number =>\n relatedComputedStyle ? parseFloat(relatedComputedStyle.marginTop) : 0;\n\nexport const getSpaceWidth = (relatedComputedStyle: CSSStyleDeclaration | 0): number =>\n relatedComputedStyle ? parseFloat(relatedComputedStyle.width) : 0;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,eAAe,CAAC,yBAC3B,uBAAuB,WAAW,qBAAqB,UAAU,IAAI;AAEhE,MAAM,gBAAgB,CAAC,yBAC5B,uBAAuB,WAAW,qBAAqB,WAAW,IAAI;AAEjE,MAAM,cAAc,CAAC,yBAC1B,uBAAuB,WAAW,qBAAqB,SAAS,IAAI;AAE/D,MAAM,gBAAgB,CAAC,yBAC5B,uBAAuB,WAAW,qBAAqB,KAAK,IAAI;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
package/dist/cjs/style.js
CHANGED
|
@@ -62,8 +62,8 @@ const GenericBadge = import_ds_system.styled.span`
|
|
|
62
62
|
align-items: center;
|
|
63
63
|
line-height: 1;
|
|
64
64
|
top: ${({ top }) => `${top}px`};
|
|
65
|
-
|
|
66
|
-
|
|
65
|
+
right: ${({ right }) => right ? `${right}px` : `unset`};
|
|
66
|
+
left: ${({ left }) => left ? `${left}px` : `unset`};
|
|
67
67
|
`;
|
|
68
68
|
const NumericBadge = (0, import_ds_system.styled)(GenericBadge)`
|
|
69
69
|
display: flex;
|
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 { 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
|
|
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,
|
|
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 right: ${({ right }: NumericBadgeT) => (right ? `${right}px` : `unset`)};\n left: ${({ 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,WAC7B,CAAC,EAAE,MAAM,MAAsB,QAAQ,GAAG,YAAY;AAAA,UACvD,CAAC,EAAE,KAAK,MAAsB,OAAO,GAAG,WAAW;AAAA;AAGtD,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
|
}
|
|
@@ -9,6 +9,7 @@ import {
|
|
|
9
9
|
} from "@elliemae/ds-props-helpers";
|
|
10
10
|
import { NotificationBadgePropTypes, defaultProps } from "./react-desc-prop-types.js";
|
|
11
11
|
import { Wrapper, NumericBadge, DotBadge } from "./style.js";
|
|
12
|
+
import { getSpaceLeft, getSpaceRight, getSpaceTop } from "./helpers.js";
|
|
12
13
|
const getValueCharactersCount = (val) => String(val).length;
|
|
13
14
|
const NotificationBadge = (props) => {
|
|
14
15
|
const propsWithDefaults = useMemoMergePropsWithDefault(props, defaultProps);
|
|
@@ -26,10 +27,14 @@ const NotificationBadge = (props) => {
|
|
|
26
27
|
const badgeComponentRef = useRef(null);
|
|
27
28
|
React2.useLayoutEffect(() => {
|
|
28
29
|
setRenderBadge(!!relatedComponentRef?.current || !Component);
|
|
29
|
-
}, [relatedComponentRef,
|
|
30
|
-
const
|
|
31
|
-
const
|
|
32
|
-
const
|
|
30
|
+
}, [relatedComponentRef, Component]);
|
|
31
|
+
const relatedComputedStyle = relatedComponentRef?.current ? window.getComputedStyle(relatedComponentRef?.current) : 0;
|
|
32
|
+
const spaceLeft = getSpaceLeft(relatedComputedStyle);
|
|
33
|
+
const spaceRight = getSpaceRight(relatedComputedStyle);
|
|
34
|
+
const spaceTop = getSpaceTop(relatedComputedStyle);
|
|
35
|
+
const top = relatedComponentRef?.current ? spaceTop - 7 : 0;
|
|
36
|
+
const left = relatedComponentRef?.current ? spaceLeft - 7 : 0;
|
|
37
|
+
const right = relatedComponentRef?.current ? spaceRight - 7 : 0;
|
|
33
38
|
return /* @__PURE__ */ jsxs(Wrapper, { ...globalAttributes, ref: wrapperComponentRef, children: [
|
|
34
39
|
renderBadge ? /* @__PURE__ */ jsx(
|
|
35
40
|
Badge,
|
|
@@ -43,13 +48,13 @@ const NotificationBadge = (props) => {
|
|
|
43
48
|
value,
|
|
44
49
|
disabled,
|
|
45
50
|
top,
|
|
46
|
-
left: position === "left" ? left : null,
|
|
47
51
|
right: position === "right" ? right : null,
|
|
52
|
+
left: position === "left" ? left : null,
|
|
48
53
|
charCount: getValueCharactersCount(value),
|
|
49
54
|
children: type === "number" ? value : null
|
|
50
55
|
}
|
|
51
56
|
) : null,
|
|
52
|
-
Component ? /* @__PURE__ */ jsx(Component, { innerRef: relatedComponentRef }) : null
|
|
57
|
+
Component ? /* @__PURE__ */ jsx(Component, { "data-testid": "ds-notification-badge-component", innerRef: relatedComponentRef }) : null
|
|
53
58
|
] });
|
|
54
59
|
};
|
|
55
60
|
NotificationBadge.propTypes = NotificationBadgePropTypes;
|
|
@@ -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", "
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/restrict-plus-operands */\n/* eslint-disable complexity */\nimport 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';\nimport { getSpaceLeft, getSpaceRight, getSpaceTop } from './helpers.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<Element>(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 top = relatedComponentRef?.current ? spaceTop - 7 : 0;\n const left = relatedComponentRef?.current ? spaceLeft - 7 : 0;\n const right = relatedComponentRef?.current ? spaceRight - 7 : 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 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.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;AC+CnB,SAEI,KAFJ;AA5CJ,OAAOA,UAAS,cAAc;AAC9B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,4BAA4B,oBAAoB;AACzD,SAAS,SAAS,cAAc,gBAAgB;AAChD,SAAS,cAAc,eAAe,mBAAmB;AAEzD,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,OAAgB,IAAI;AAChD,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,MAAM,qBAAqB,UAAU,WAAW,IAAI;AAC1D,QAAM,OAAO,qBAAqB,UAAU,YAAY,IAAI;AAC5D,QAAM,QAAQ,qBAAqB,UAAU,aAAa,IAAI;AAE9D,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,OAAO,aAAa,UAAU,QAAQ;AAAA,QACtC,MAAM,aAAa,SAAS,OAAO;AAAA,QACnC,WAAW,wBAAwB,KAAK;AAAA,QAEvC,mBAAS,WAAW,QAAQ;AAAA;AAAA,IAC/B,IACE;AAAA,IACH,YAAY,oBAAC,aAAU,eAAY,mCAAkC,UAAU,qBAAqB,IAAK;AAAA,KAC5G;AAEJ;AAEA,kBAAkB,YAAY;AAC9B,kBAAkB,cAAc;AAChC,MAAM,8BAA8B,SAAS,iBAAiB;AAC9D,4BAA4B,YAAY;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
const getSpaceLeft = (relatedComputedStyle) => relatedComputedStyle ? parseFloat(relatedComputedStyle.marginLeft) : 0;
|
|
3
|
+
const getSpaceRight = (relatedComputedStyle) => relatedComputedStyle ? parseFloat(relatedComputedStyle.marginRight) : 0;
|
|
4
|
+
const getSpaceTop = (relatedComputedStyle) => relatedComputedStyle ? parseFloat(relatedComputedStyle.marginTop) : 0;
|
|
5
|
+
const getSpaceWidth = (relatedComputedStyle) => relatedComputedStyle ? parseFloat(relatedComputedStyle.width) : 0;
|
|
6
|
+
export {
|
|
7
|
+
getSpaceLeft,
|
|
8
|
+
getSpaceRight,
|
|
9
|
+
getSpaceTop,
|
|
10
|
+
getSpaceWidth
|
|
11
|
+
};
|
|
12
|
+
//# sourceMappingURL=helpers.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/helpers.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const getSpaceLeft = (relatedComputedStyle: CSSStyleDeclaration | 0): number =>\n relatedComputedStyle ? parseFloat(relatedComputedStyle.marginLeft) : 0;\n\nexport const getSpaceRight = (relatedComputedStyle: CSSStyleDeclaration | 0): number =>\n relatedComputedStyle ? parseFloat(relatedComputedStyle.marginRight) : 0;\n\nexport const getSpaceTop = (relatedComputedStyle: CSSStyleDeclaration | 0): number =>\n relatedComputedStyle ? parseFloat(relatedComputedStyle.marginTop) : 0;\n\nexport const getSpaceWidth = (relatedComputedStyle: CSSStyleDeclaration | 0): number =>\n relatedComputedStyle ? parseFloat(relatedComputedStyle.width) : 0;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAhB,MAAM,eAAe,CAAC,yBAC3B,uBAAuB,WAAW,qBAAqB,UAAU,IAAI;AAEhE,MAAM,gBAAgB,CAAC,yBAC5B,uBAAuB,WAAW,qBAAqB,WAAW,IAAI;AAEjE,MAAM,cAAc,CAAC,yBAC1B,uBAAuB,WAAW,qBAAqB,SAAS,IAAI;AAE/D,MAAM,gBAAgB,CAAC,yBAC5B,uBAAuB,WAAW,qBAAqB,KAAK,IAAI;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
package/dist/esm/style.js
CHANGED
|
@@ -26,8 +26,8 @@ const GenericBadge = styled.span`
|
|
|
26
26
|
align-items: center;
|
|
27
27
|
line-height: 1;
|
|
28
28
|
top: ${({ top }) => `${top}px`};
|
|
29
|
-
|
|
30
|
-
|
|
29
|
+
right: ${({ right }) => right ? `${right}px` : `unset`};
|
|
30
|
+
left: ${({ left }) => left ? `${left}px` : `unset`};
|
|
31
31
|
`;
|
|
32
32
|
const NumericBadge = styled(GenericBadge)`
|
|
33
33
|
display: flex;
|
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 { 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
|
|
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,
|
|
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 right: ${({ right }: NumericBadgeT) => (right ? `${right}px` : `unset`)};\n left: ${({ 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,WAC7B,CAAC,EAAE,MAAM,MAAsB,QAAQ,GAAG,YAAY;AAAA,UACvD,CAAC,EAAE,KAAK,MAAsB,OAAO,GAAG,WAAW;AAAA;AAGtD,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
|
}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
export declare const getSpaceLeft: (relatedComputedStyle: CSSStyleDeclaration | 0) => number;
|
|
2
|
+
export declare const getSpaceRight: (relatedComputedStyle: CSSStyleDeclaration | 0) => number;
|
|
3
|
+
export declare const getSpaceTop: (relatedComputedStyle: CSSStyleDeclaration | 0) => number;
|
|
4
|
+
export declare const getSpaceWidth: (relatedComputedStyle: CSSStyleDeclaration | 0) => number;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-notification-badge",
|
|
3
|
-
"version": "3.17.0-next.
|
|
3
|
+
"version": "3.17.0-next.16",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Notification Badge",
|
|
6
6
|
"files": [
|
|
@@ -48,8 +48,8 @@
|
|
|
48
48
|
},
|
|
49
49
|
"dependencies": {
|
|
50
50
|
"@elliemae/pui-theme": "~2.7.0",
|
|
51
|
-
"@elliemae/ds-props-helpers": "3.17.0-next.
|
|
52
|
-
"@elliemae/ds-system": "3.17.0-next.
|
|
51
|
+
"@elliemae/ds-props-helpers": "3.17.0-next.16",
|
|
52
|
+
"@elliemae/ds-system": "3.17.0-next.16"
|
|
53
53
|
},
|
|
54
54
|
"devDependencies": {
|
|
55
55
|
"@testing-library/react": "~12.1.3",
|