@elliemae/ds-notification-badge 3.17.0-next.9 → 3.17.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/NotificationBadge.js +15 -7
- 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 +5 -3
- package/dist/cjs/style.js.map +2 -2
- package/dist/esm/NotificationBadge.js +15 -7
- 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 +5 -3
- package/dist/esm/style.js.map +2 -2
- package/dist/types/helpers.d.ts +4 -0
- package/dist/types/react-desc-prop-types.d.ts +1 -0
- package/dist/types/style.d.ts +1 -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);
|
|
@@ -49,20 +50,27 @@ const NotificationBadge = (props) => {
|
|
|
49
50
|
const { type, color, value, size, disabled, position, Component, ...rest } = propsWithDefaults;
|
|
50
51
|
const globalAttributes = (0, import_ds_props_helpers.useGetGlobalAttributes)(rest);
|
|
51
52
|
const [renderBadge, setRenderBadge] = import_react.default.useState(false);
|
|
52
|
-
const
|
|
53
|
+
const isNumericBadge = type === "number";
|
|
54
|
+
const Badge = isNumericBadge ? import_style.NumericBadge : import_style.DotBadge;
|
|
53
55
|
const relatedComponentRef = (0, import_react.useRef)(null);
|
|
54
56
|
const wrapperComponentRef = (0, import_react.useRef)(null);
|
|
55
57
|
const badgeComponentRef = (0, import_react.useRef)(null);
|
|
56
58
|
import_react.default.useLayoutEffect(() => {
|
|
57
59
|
setRenderBadge(!!relatedComponentRef?.current || !Component);
|
|
58
|
-
}, [relatedComponentRef,
|
|
59
|
-
const
|
|
60
|
-
const
|
|
61
|
-
const
|
|
60
|
+
}, [relatedComponentRef, Component]);
|
|
61
|
+
const relatedComputedStyle = relatedComponentRef?.current ? window.getComputedStyle(relatedComponentRef?.current) : 0;
|
|
62
|
+
const spaceLeft = (0, import_helpers.getSpaceLeft)(relatedComputedStyle);
|
|
63
|
+
const spaceRight = (0, import_helpers.getSpaceRight)(relatedComputedStyle);
|
|
64
|
+
const spaceTop = (0, import_helpers.getSpaceTop)(relatedComputedStyle);
|
|
65
|
+
const factor = isNumericBadge ? size === "l" ? 9 : 5 : size === "l" ? 5 : 3;
|
|
66
|
+
const top = relatedComponentRef?.current ? spaceTop - factor : 0;
|
|
67
|
+
const left = relatedComponentRef?.current ? spaceLeft - factor : 0;
|
|
68
|
+
const right = relatedComponentRef?.current ? spaceRight - factor : 0;
|
|
62
69
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_style.Wrapper, { ...globalAttributes, ref: wrapperComponentRef, children: [
|
|
63
70
|
renderBadge ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
64
71
|
Badge,
|
|
65
72
|
{
|
|
73
|
+
"data-related-component": !!Component ? "true" : "false",
|
|
66
74
|
ref: badgeComponentRef,
|
|
67
75
|
"data-position": position,
|
|
68
76
|
"data-type": type,
|
|
@@ -72,13 +80,13 @@ const NotificationBadge = (props) => {
|
|
|
72
80
|
value,
|
|
73
81
|
disabled,
|
|
74
82
|
top,
|
|
75
|
-
left: position === "left" ? left : null,
|
|
76
83
|
right: position === "right" ? right : null,
|
|
84
|
+
left: position === "left" ? left : null,
|
|
77
85
|
charCount: getValueCharactersCount(value),
|
|
78
86
|
children: type === "number" ? value : null
|
|
79
87
|
}
|
|
80
88
|
) : null,
|
|
81
|
-
Component ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { innerRef: relatedComponentRef }) : null
|
|
89
|
+
Component ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { "data-testid": "ds-notification-badge-component", innerRef: relatedComponentRef }) : null
|
|
82
90
|
] });
|
|
83
91
|
};
|
|
84
92
|
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 isNumericBadge = type === 'number';\n const Badge = isNumericBadge ? 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 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 {...globalAttributes} ref={wrapperComponentRef}>\n {renderBadge ? (\n <Badge\n data-related-component={!!Component ? 'true' : 'false'}\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;ADiDnB;AA9CJ,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,iBAAiB,SAAS;AAChC,QAAM,QAAQ,iBAAiB,4BAAe;AAC9C,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,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,6CAAC,wBAAS,GAAG,kBAAkB,KAAK,qBACjC;AAAA,kBACC;AAAA,MAAC;AAAA;AAAA,QACC,0BAAwB,CAAC,CAAC,YAAY,SAAS;AAAA,QAC/C,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
|
@@ -54,16 +54,18 @@ const Wrapper = import_ds_system.styled.div`
|
|
|
54
54
|
width: fit-content;
|
|
55
55
|
height: fit-content;
|
|
56
56
|
position: relative;
|
|
57
|
+
z-index: 0;
|
|
57
58
|
`;
|
|
58
59
|
const GenericBadge = import_ds_system.styled.span`
|
|
59
|
-
position: absolute;
|
|
60
|
+
position: ${(props) => props["data-related-component"] === "true" ? "absolute" : "inherit"};
|
|
60
61
|
display: flex;
|
|
61
62
|
justify-content: center;
|
|
62
63
|
align-items: center;
|
|
63
64
|
line-height: 1;
|
|
64
65
|
top: ${({ top }) => `${top}px`};
|
|
65
|
-
|
|
66
|
-
|
|
66
|
+
right: ${({ right }) => right ? `${right}px` : `unset`};
|
|
67
|
+
left: ${({ left }) => left ? `${left}px` : `unset`};
|
|
68
|
+
z-index: ${({ theme }) => theme.zIndex.tooltip};
|
|
67
69
|
`;
|
|
68
70
|
const NumericBadge = (0, import_ds_system.styled)(GenericBadge)`
|
|
69
71
|
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;
|
|
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 ['data-related-component']: 'true' | 'false';\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 z-index: 0;\n`;\n\nexport const GenericBadge = styled.span<NumericBadgeT>`\n position: ${(props) => (props['data-related-component'] === 'true' ? 'absolute' : 'inherit')};\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 z-index: ${({ theme }) => theme.zIndex.tooltip};\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;AAgBvB,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;AAAA;AAOvB,MAAM,eAAe,wBAAO;AAAA,cACrB,CAAC,UAAW,MAAM,wBAAwB,MAAM,SAAS,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA,SAK3E,CAAC,EAAE,IAAI,MAAqB,GAAG;AAAA,WAC7B,CAAC,EAAE,MAAM,MAAsB,QAAQ,GAAG,YAAY;AAAA,UACvD,CAAC,EAAE,KAAK,MAAsB,OAAO,GAAG,WAAW;AAAA,aAChD,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO;AAAA;AAGlC,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);
|
|
@@ -20,20 +21,27 @@ const NotificationBadge = (props) => {
|
|
|
20
21
|
const { type, color, value, size, disabled, position, Component, ...rest } = propsWithDefaults;
|
|
21
22
|
const globalAttributes = useGetGlobalAttributes(rest);
|
|
22
23
|
const [renderBadge, setRenderBadge] = React2.useState(false);
|
|
23
|
-
const
|
|
24
|
+
const isNumericBadge = type === "number";
|
|
25
|
+
const Badge = isNumericBadge ? NumericBadge : DotBadge;
|
|
24
26
|
const relatedComponentRef = useRef(null);
|
|
25
27
|
const wrapperComponentRef = useRef(null);
|
|
26
28
|
const badgeComponentRef = useRef(null);
|
|
27
29
|
React2.useLayoutEffect(() => {
|
|
28
30
|
setRenderBadge(!!relatedComponentRef?.current || !Component);
|
|
29
|
-
}, [relatedComponentRef,
|
|
30
|
-
const
|
|
31
|
-
const
|
|
32
|
-
const
|
|
31
|
+
}, [relatedComponentRef, Component]);
|
|
32
|
+
const relatedComputedStyle = relatedComponentRef?.current ? window.getComputedStyle(relatedComponentRef?.current) : 0;
|
|
33
|
+
const spaceLeft = getSpaceLeft(relatedComputedStyle);
|
|
34
|
+
const spaceRight = getSpaceRight(relatedComputedStyle);
|
|
35
|
+
const spaceTop = getSpaceTop(relatedComputedStyle);
|
|
36
|
+
const factor = isNumericBadge ? size === "l" ? 9 : 5 : size === "l" ? 5 : 3;
|
|
37
|
+
const top = relatedComponentRef?.current ? spaceTop - factor : 0;
|
|
38
|
+
const left = relatedComponentRef?.current ? spaceLeft - factor : 0;
|
|
39
|
+
const right = relatedComponentRef?.current ? spaceRight - factor : 0;
|
|
33
40
|
return /* @__PURE__ */ jsxs(Wrapper, { ...globalAttributes, ref: wrapperComponentRef, children: [
|
|
34
41
|
renderBadge ? /* @__PURE__ */ jsx(
|
|
35
42
|
Badge,
|
|
36
43
|
{
|
|
44
|
+
"data-related-component": !!Component ? "true" : "false",
|
|
37
45
|
ref: badgeComponentRef,
|
|
38
46
|
"data-position": position,
|
|
39
47
|
"data-type": type,
|
|
@@ -43,13 +51,13 @@ const NotificationBadge = (props) => {
|
|
|
43
51
|
value,
|
|
44
52
|
disabled,
|
|
45
53
|
top,
|
|
46
|
-
left: position === "left" ? left : null,
|
|
47
54
|
right: position === "right" ? right : null,
|
|
55
|
+
left: position === "left" ? left : null,
|
|
48
56
|
charCount: getValueCharactersCount(value),
|
|
49
57
|
children: type === "number" ? value : null
|
|
50
58
|
}
|
|
51
59
|
) : null,
|
|
52
|
-
Component ? /* @__PURE__ */ jsx(Component, { innerRef: relatedComponentRef }) : null
|
|
60
|
+
Component ? /* @__PURE__ */ jsx(Component, { "data-testid": "ds-notification-badge-component", innerRef: relatedComponentRef }) : null
|
|
53
61
|
] });
|
|
54
62
|
};
|
|
55
63
|
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 isNumericBadge = type === 'number';\n const Badge = isNumericBadge ? 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 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 {...globalAttributes} ref={wrapperComponentRef}>\n {renderBadge ? (\n <Badge\n data-related-component={!!Component ? 'true' : 'false'}\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;ACiDnB,SAEI,KAFJ;AA9CJ,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,iBAAiB,SAAS;AAChC,QAAM,QAAQ,iBAAiB,eAAe;AAC9C,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,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,qBAAC,WAAS,GAAG,kBAAkB,KAAK,qBACjC;AAAA,kBACC;AAAA,MAAC;AAAA;AAAA,QACC,0BAAwB,CAAC,CAAC,YAAY,SAAS;AAAA,QAC/C,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
|
@@ -18,16 +18,18 @@ const Wrapper = styled.div`
|
|
|
18
18
|
width: fit-content;
|
|
19
19
|
height: fit-content;
|
|
20
20
|
position: relative;
|
|
21
|
+
z-index: 0;
|
|
21
22
|
`;
|
|
22
23
|
const GenericBadge = styled.span`
|
|
23
|
-
position: absolute;
|
|
24
|
+
position: ${(props) => props["data-related-component"] === "true" ? "absolute" : "inherit"};
|
|
24
25
|
display: flex;
|
|
25
26
|
justify-content: center;
|
|
26
27
|
align-items: center;
|
|
27
28
|
line-height: 1;
|
|
28
29
|
top: ${({ top }) => `${top}px`};
|
|
29
|
-
|
|
30
|
-
|
|
30
|
+
right: ${({ right }) => right ? `${right}px` : `unset`};
|
|
31
|
+
left: ${({ left }) => left ? `${left}px` : `unset`};
|
|
32
|
+
z-index: ${({ theme }) => theme.zIndex.tooltip};
|
|
31
33
|
`;
|
|
32
34
|
const NumericBadge = styled(GenericBadge)`
|
|
33
35
|
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;
|
|
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 ['data-related-component']: 'true' | 'false';\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 z-index: 0;\n`;\n\nexport const GenericBadge = styled.span<NumericBadgeT>`\n position: ${(props) => (props['data-related-component'] === 'true' ? 'absolute' : 'inherit')};\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 z-index: ${({ theme }) => theme.zIndex.tooltip};\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;AAgBvB,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;AAAA;AAOvB,MAAM,eAAe,OAAO;AAAA,cACrB,CAAC,UAAW,MAAM,wBAAwB,MAAM,SAAS,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA,SAK3E,CAAC,EAAE,IAAI,MAAqB,GAAG;AAAA,WAC7B,CAAC,EAAE,MAAM,MAAsB,QAAQ,GAAG,YAAY;AAAA,UACvD,CAAC,EAAE,KAAK,MAAsB,OAAO,GAAG,WAAW;AAAA,aAChD,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO;AAAA;AAGlC,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;
|
|
@@ -345,6 +345,7 @@ export declare const NotificationBadgePropTypes: {
|
|
|
345
345
|
radioGroup: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
|
|
346
346
|
readOnly: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
|
|
347
347
|
rel: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
|
|
348
|
+
rev: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
|
|
348
349
|
required: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
|
|
349
350
|
resource: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
|
|
350
351
|
results: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
|
package/dist/types/style.d.ts
CHANGED
|
@@ -10,6 +10,7 @@ interface NumericBadgeT {
|
|
|
10
10
|
disabled?: boolean;
|
|
11
11
|
color?: string;
|
|
12
12
|
theme: Theme;
|
|
13
|
+
['data-related-component']: 'true' | 'false';
|
|
13
14
|
}
|
|
14
15
|
export declare const Wrapper: import("styled-components").StyledComponent<keyof JSX.IntrinsicElements, import("@elliemae/ds-system").Theme, Record<string, unknown> & object, never>;
|
|
15
16
|
export declare const GenericBadge: import("styled-components").StyledComponent<keyof JSX.IntrinsicElements, import("@elliemae/ds-system").Theme, Record<string, unknown> & NumericBadgeT, never>;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-notification-badge",
|
|
3
|
-
"version": "3.17.0
|
|
3
|
+
"version": "3.17.0",
|
|
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
|
|
52
|
-
"@elliemae/ds-system": "3.17.0
|
|
51
|
+
"@elliemae/ds-props-helpers": "3.17.0",
|
|
52
|
+
"@elliemae/ds-system": "3.17.0"
|
|
53
53
|
},
|
|
54
54
|
"devDependencies": {
|
|
55
55
|
"@testing-library/react": "~12.1.3",
|