@elliemae/ds-dataviz 3.70.0-next.7 → 3.70.0-next.71
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/graphs/Chart/SingleStackedBar/SingleStackedBar.js +20 -16
- package/dist/cjs/graphs/Chart/SingleStackedBar/SingleStackedBar.js.map +2 -2
- package/dist/cjs/graphs/Chart/SingleStackedBar/react-desc-prop-types.js.map +2 -2
- package/dist/cjs/package.json +1 -4
- package/dist/esm/graphs/Chart/SingleStackedBar/SingleStackedBar.js +20 -16
- package/dist/esm/graphs/Chart/SingleStackedBar/SingleStackedBar.js.map +2 -2
- package/dist/esm/graphs/Chart/SingleStackedBar/react-desc-prop-types.js.map +2 -2
- package/dist/esm/package.json +1 -4
- package/dist/types/graphs/Chart/SingleStackedBar/react-desc-prop-types.d.ts +3 -3
- package/dist/types/graphs/Chart/parts/Axis/Axis.d.ts +1 -1
- package/dist/types/graphs/Chart/parts/Axis/AxisBottom.d.ts +1 -1
- package/dist/types/graphs/Chart/parts/Axis/AxisLeft.d.ts +1 -1
- package/dist/types/graphs/Chart/parts/Axis/AxisRight.d.ts +1 -1
- package/dist/types/graphs/Chart/parts/ChartContainer.d.ts +2 -1
- package/dist/types/graphs/Chart/parts/ClipPaths.d.ts +2 -1
- package/dist/types/graphs/Chart/parts/Labels/index.d.ts +2 -1
- package/dist/types/graphs/Chart/parts/Legend/BottomLegend.d.ts +2 -1
- package/dist/types/graphs/Chart/parts/Legend/LeftLegend.d.ts +2 -1
- package/dist/types/graphs/Chart/parts/Legend/Legend.d.ts +2 -1
- package/dist/types/graphs/Chart/parts/Legend/LegendItem.d.ts +2 -1
- package/dist/types/graphs/Chart/parts/Legend/RightLegend.d.ts +2 -1
- package/dist/types/graphs/Chart/parts/Legend/TopLegend.d.ts +2 -1
- package/dist/types/graphs/Chart/parts/Scrapper/Scrapper.d.ts +2 -1
- package/dist/types/graphs/Chart/parts/Scrapper/VerticalScrapper.d.ts +2 -1
- package/dist/types/graphs/Chart/parts/Scroller/BlurMask.d.ts +2 -1
- package/dist/types/graphs/Chart/parts/Scroller/Controllers.d.ts +2 -1
- package/dist/types/graphs/Chart/parts/Scroller/ScrollBarX.d.ts +2 -1
- package/dist/types/graphs/Chart/parts/Scroller/ScrollBarY.d.ts +2 -1
- package/dist/types/graphs/Chart/parts/Scroller/ScrollableContainerX.d.ts +2 -1
- package/dist/types/graphs/Chart/parts/Scroller/ScrollableContainerY.d.ts +2 -1
- package/dist/types/graphs/Chart/parts/SeriesFactory.d.ts +2 -1
- package/dist/types/graphs/Chart/series/HorizontalBars.d.ts +2 -1
- package/dist/types/graphs/Chart/series/HorizontalStackedBars.d.ts +2 -1
- package/package.json +12 -12
- package/dist/types/graphs/Chart/tests/basic.test.d.ts +0 -1
- package/dist/types/graphs/Chart/tests/scrollable.test.d.ts +0 -1
- package/dist/types/graphs/Chart/tests/single-stacked-bar.test.d.ts +0 -1
- package/dist/types/typescript-testing/typescript-data-viz-valid.d.ts +0 -1
|
@@ -72,6 +72,7 @@ const Bar = import_react.default.memo((props) => {
|
|
|
72
72
|
const handleMouseLeave = (0, import_react.useCallback)(() => {
|
|
73
73
|
setIsHover(false);
|
|
74
74
|
}, []);
|
|
75
|
+
const backgroundColor = datum.color in import_colorPallet.COLOR_PALLET ? import_colorPallet.COLOR_PALLET[datum.color] : datum.color;
|
|
75
76
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
|
|
76
77
|
TooltipRenderer && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
77
78
|
import_ds_floating_context.FloatingWrapper,
|
|
@@ -92,7 +93,7 @@ const Bar = import_react.default.memo((props) => {
|
|
|
92
93
|
{
|
|
93
94
|
onMouseEnter: handleMouseEnter,
|
|
94
95
|
onMouseLeave: handleMouseLeave,
|
|
95
|
-
bg,
|
|
96
|
+
bg: backgroundColor,
|
|
96
97
|
height,
|
|
97
98
|
borderRadius,
|
|
98
99
|
innerRef: (0, import_ds_system.mergeRefs)(handleRefCallback, refs.setReference),
|
|
@@ -159,21 +160,24 @@ const DSSingleStackedBar = (props) => {
|
|
|
159
160
|
onBlur: (e) => e.currentTarget !== e.target && setIsChartFocused(false),
|
|
160
161
|
...xstyledProps,
|
|
161
162
|
...globalAttributes,
|
|
162
|
-
children: data.map((datum, i) =>
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
163
|
+
children: data.map((datum, i) => {
|
|
164
|
+
const backgroundColor = datum.color in import_colorPallet.COLOR_PALLET ? import_colorPallet.COLOR_PALLET[datum.color] : datum.color;
|
|
165
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_grid.Grid, { rows, children: [
|
|
166
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
167
|
+
Bar,
|
|
168
|
+
{
|
|
169
|
+
datum,
|
|
170
|
+
isFocused: barNames[keyBarFocused] === datum.name && isChartFocused,
|
|
171
|
+
borderRadius: getBorderRadius(i),
|
|
172
|
+
bg: backgroundColor,
|
|
173
|
+
tabIndex: i === keyBarFocused ? 0 : -1,
|
|
174
|
+
...props
|
|
175
|
+
},
|
|
176
|
+
datum.name
|
|
177
|
+
),
|
|
178
|
+
LegendRenderer !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LegendRenderer, { datum }, `${datum.name}-legend`) : null
|
|
179
|
+
] });
|
|
180
|
+
})
|
|
177
181
|
}
|
|
178
182
|
);
|
|
179
183
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/graphs/Chart/SingleStackedBar/SingleStackedBar.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-lines */\nimport type { DSGridT } from '@elliemae/ds-grid';\nimport { Grid } from '@elliemae/ds-grid';\nimport { useFloatingContext, FloatingWrapper, PopoverArrow } from '@elliemae/ds-floating-context';\nimport {\n describe,\n useGetGlobalAttributes,\n useGetXstyledProps,\n useMemoMergePropsWithDefault,\n useValidateTypescriptPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport { mergeRefs } from '@elliemae/ds-system';\nimport React, { useCallback, useMemo, useState, type WeakValidationMap } from 'react';\nimport { COLOR_PALLET } from '../helpers/colorPallet.js';\nimport { DSSingleStackedBarName } from './exported-related/index.js';\nimport { DSSingleStackedBarPropTypes, defaultProps, type DSSingleStackedBarT } from './react-desc-prop-types.js';\nimport { StyledBar, StyledMouseOverDetectionBox, StyledTooltipContainer, Wrapper } from './styles.js';\nconst Bar = React.memo((props: DSSingleStackedBarT.BarT) => {\n const [isHover, setIsHover] = useState(false);\n const { height, TooltipRenderer, datum, tabIndex, isFocused, borderRadius, bg } = props;\n\n const isTooltipOpen = (isFocused || isHover) && !!TooltipRenderer;\n const {\n refs,\n floatingStyles,\n arrowStyles,\n context,\n isOpen: isFloatingOpen,\n } = useFloatingContext({\n externallyControlledIsOpen: isTooltipOpen,\n withoutAnimation: true,\n customOffset: [0, 14],\n });\n\n const handleRefCallback = useCallback(\n (_ref: HTMLDivElement | null) => {\n if (isFocused) {\n _ref?.focus();\n }\n },\n [isFocused],\n );\n\n const handleMouseEnter = useCallback(() => {\n setIsHover(true);\n }, []);\n\n const handleMouseLeave = useCallback(() => {\n setIsHover(false);\n }, []);\n return (\n <div>\n {TooltipRenderer && (\n <FloatingWrapper\n innerRef={refs.setFloating}\n isOpen={isFloatingOpen}\n floatingStyles={floatingStyles}\n context={context}\n >\n <StyledMouseOverDetectionBox />\n <StyledTooltipContainer>\n <TooltipRenderer datum={datum} />\n </StyledTooltipContainer>\n <PopoverArrow {...arrowStyles} />\n </FloatingWrapper>\n )}\n <StyledBar\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n bg={
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-lines */\nimport type { DSGridT } from '@elliemae/ds-grid';\nimport { Grid } from '@elliemae/ds-grid';\nimport { useFloatingContext, FloatingWrapper, PopoverArrow } from '@elliemae/ds-floating-context';\nimport {\n describe,\n useGetGlobalAttributes,\n useGetXstyledProps,\n useMemoMergePropsWithDefault,\n useValidateTypescriptPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport { mergeRefs } from '@elliemae/ds-system';\nimport React, { useCallback, useMemo, useState, type WeakValidationMap } from 'react';\nimport { COLOR_PALLET } from '../helpers/colorPallet.js';\nimport { DSSingleStackedBarName } from './exported-related/index.js';\nimport { DSSingleStackedBarPropTypes, defaultProps, type DSSingleStackedBarT } from './react-desc-prop-types.js';\nimport { StyledBar, StyledMouseOverDetectionBox, StyledTooltipContainer, Wrapper } from './styles.js';\nconst Bar = React.memo((props: DSSingleStackedBarT.BarT) => {\n const [isHover, setIsHover] = useState(false);\n const { height, TooltipRenderer, datum, tabIndex, isFocused, borderRadius, bg } = props;\n\n const isTooltipOpen = (isFocused || isHover) && !!TooltipRenderer;\n const {\n refs,\n floatingStyles,\n arrowStyles,\n context,\n isOpen: isFloatingOpen,\n } = useFloatingContext({\n externallyControlledIsOpen: isTooltipOpen,\n withoutAnimation: true,\n customOffset: [0, 14],\n });\n\n const handleRefCallback = useCallback(\n (_ref: HTMLDivElement | null) => {\n if (isFocused) {\n _ref?.focus();\n }\n },\n [isFocused],\n );\n\n const handleMouseEnter = useCallback(() => {\n setIsHover(true);\n }, []);\n\n const handleMouseLeave = useCallback(() => {\n setIsHover(false);\n }, []);\n\n const backgroundColor =\n datum.color in COLOR_PALLET ? COLOR_PALLET[datum.color as keyof typeof COLOR_PALLET] : datum.color;\n return (\n <div>\n {TooltipRenderer && (\n <FloatingWrapper\n innerRef={refs.setFloating}\n isOpen={isFloatingOpen}\n floatingStyles={floatingStyles}\n context={context}\n >\n <StyledMouseOverDetectionBox />\n <StyledTooltipContainer>\n <TooltipRenderer datum={datum} />\n </StyledTooltipContainer>\n <PopoverArrow {...arrowStyles} />\n </FloatingWrapper>\n )}\n <StyledBar\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n bg={backgroundColor}\n height={height}\n borderRadius={borderRadius}\n innerRef={mergeRefs(handleRefCallback, refs.setReference)}\n tabIndex={tabIndex}\n role=\"img\"\n // until uziel work is merged we keep this default value\n aria-label={`${datum.name} value: ${datum.data}`}\n />\n </div>\n );\n});\n\nconst DSSingleStackedBar: React.ComponentType<DSSingleStackedBarT.Props> = (props) => {\n const propsWithDefaults = useMemoMergePropsWithDefault<DSSingleStackedBarT.InternalProps>(props, defaultProps);\n useValidateTypescriptPropTypes(propsWithDefaults, DSSingleStackedBarPropTypes, 'DSSingleStackedBar');\n\n const globalAttributes = useGetGlobalAttributes<DSSingleStackedBarT.InternalProps, HTMLDivElement, DSGridT.Props>(\n propsWithDefaults,\n );\n\n const xstyledProps = useGetXstyledProps(propsWithDefaults);\n\n const { data, LegendRenderer, gutter, height } = propsWithDefaults;\n const [keyBarFocused, setKeyBarFocused] = useState<number>(0);\n const [isChartFocused, setIsChartFocused] = useState(false);\n\n const total = useMemo(() => data.map((datum) => datum.data).reduce((acc, curr) => acc + curr, 0), [data]);\n const cols = useMemo(() => data.map((datum) => `${Math.ceil(datum.data * 100) / total}%`), [data, total]);\n const rows = useMemo(\n () => (LegendRenderer !== undefined ? [`${height}px`, 'auto'] : [`${height}px`]),\n [LegendRenderer, height],\n );\n const barNames = useMemo(() => data.map((datum) => datum.name), [data]);\n const getBorderRadius = useCallback(\n (index: number) => {\n if (index === 0) return '50px 0 0 50px';\n if (index === data.length - 1) return '0 50px 50px 0';\n return undefined;\n },\n [data.length],\n );\n\n const handleOnKeyDown: React.KeyboardEventHandler = useCallback(\n (e) => {\n if (e.code === 'ArrowRight') {\n if (barNames[keyBarFocused + 1]) {\n setKeyBarFocused(keyBarFocused + 1);\n } else {\n setKeyBarFocused(0);\n }\n }\n if (e.code === 'ArrowLeft') {\n if (barNames[keyBarFocused - 1]) {\n setKeyBarFocused(keyBarFocused - 1);\n } else {\n setKeyBarFocused(barNames.length - 1);\n }\n }\n },\n [keyBarFocused, barNames],\n );\n\n return (\n <Wrapper\n cols={cols}\n gutter={gutter}\n role=\"region\"\n onKeyDown={handleOnKeyDown}\n tabIndex={-1}\n onFocus={() => setIsChartFocused(true)}\n onBlur={(e) => e.currentTarget !== e.target && setIsChartFocused(false)}\n {...xstyledProps}\n {...globalAttributes}\n >\n {data.map((datum, i) => {\n const backgroundColor =\n datum.color in COLOR_PALLET ? COLOR_PALLET[datum.color as keyof typeof COLOR_PALLET] : datum.color;\n return (\n <Grid rows={rows}>\n <Bar\n key={datum.name}\n datum={datum}\n isFocused={barNames[keyBarFocused] === datum.name && isChartFocused}\n borderRadius={getBorderRadius(i)}\n bg={backgroundColor}\n tabIndex={i === keyBarFocused ? 0 : -1}\n {...props}\n />\n {LegendRenderer !== undefined ? <LegendRenderer key={`${datum.name}-legend`} datum={datum} /> : null}\n </Grid>\n );\n })}\n </Wrapper>\n );\n};\n\nDSSingleStackedBar.displayName = DSSingleStackedBarName;\nconst DSSingleStackedBarWithSchema = describe(DSSingleStackedBar);\nDSSingleStackedBarWithSchema.propTypes =\n DSSingleStackedBarPropTypes as unknown as WeakValidationMap<DSSingleStackedBarT.Props>;\n\nexport { DSSingleStackedBar, DSSingleStackedBarWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/graphs/Chart/SingleStackedBar/react-desc-prop-types.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["import type { DSPropTypesSchema, GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport { type BorderProps } from '@elliemae/ds-system';\n\nexport declare namespace DSSingleStackedBarT {\n export type DatumT = {\n name: string;\n data: number;\n color: string;\n };\n export type SingleStackedBarDatumT = DatumT[];\n export type TooltipRenderDataT = {\n datum: DatumT;\n };\n export interface SingleStackedBarT {\n data: SingleStackedBarDatumT;\n TooltipRenderer?: React.ComponentType<TooltipRenderDataT>;\n LegendRenderer?: React.ComponentType<TooltipRenderDataT>;\n height: string | number;\n gutter?: string | number;\n }\n\n export interface BarT extends SingleStackedBarT {\n isFocused: boolean;\n borderRadius?: BorderProps['borderRadius'];\n bg: string;\n tabIndex?: 0 | -1;\n datum: DatumT;\n }\n\n export interface RequiredProps {\n height: string | number;\n data: DatumT[];\n }\n\n export interface DefaultProps {\n gutter: string;\n }\n\n export interface OptionalProps {\n TooltipRenderer?: React.ComponentType<TooltipRenderDataT>;\n LegendRenderer?: React.ComponentType<TooltipRenderDataT>;\n }\n\n export interface Props\n extends\n Partial<DefaultProps>,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps>,\n XstyledProps,\n RequiredProps {}\n\n export interface InternalProps\n extends\n DefaultProps,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps>,\n XstyledProps,\n RequiredProps {}\n}\n\nexport const defaultProps: DSSingleStackedBarT.DefaultProps = {\n gutter: 'xxxs',\n};\n\nexport const DSSingleStackedBarPropTypes: DSPropTypesSchema<DSSingleStackedBarT.Props> = {\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n height: PropTypes.string.description('Height of the bar').isRequired,\n gutter: PropTypes.string.description('Gap between the bars').defaultValue('xxxs'),\n TooltipRenderer: PropTypes.func.description('Callback function that returns a custom renderer for the tooltip'),\n LegendRenderer: PropTypes.func.description('Callback function that returns a custom renderer for the legend'),\n data: PropTypes.arrayOf(\n PropTypes.shape({ name: PropTypes.string, data: PropTypes.number, color: PropTypes.string }),\n ).description('Array of the series which represent the chart'),\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,8BAAuE;AA4DhE,MAAM,eAAiD;AAAA,EAC5D,QAAQ;AACV;AAEO,MAAM,8BAA4E;AAAA,EACvF,GAAG;AAAA,EACH,GAAG;AAAA,EACH,QAAQ,kCAAU,OAAO,YAAY,mBAAmB,EAAE;AAAA,EAC1D,QAAQ,kCAAU,OAAO,YAAY,sBAAsB,EAAE,aAAa,MAAM;AAAA,EAChF,iBAAiB,kCAAU,KAAK,YAAY,kEAAkE;AAAA,EAC9G,gBAAgB,kCAAU,KAAK,YAAY,iEAAiE;AAAA,EAC5G,MAAM,kCAAU;AAAA,IACd,kCAAU,MAAM,EAAE,MAAM,kCAAU,QAAQ,MAAM,kCAAU,QAAQ,OAAO,kCAAU,OAAO,CAAC;AAAA,EAC7F,EAAE,YAAY,+CAA+C;AAC/D;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/package.json
CHANGED
|
@@ -44,6 +44,7 @@ const Bar = React2.memo((props) => {
|
|
|
44
44
|
const handleMouseLeave = useCallback(() => {
|
|
45
45
|
setIsHover(false);
|
|
46
46
|
}, []);
|
|
47
|
+
const backgroundColor = datum.color in COLOR_PALLET ? COLOR_PALLET[datum.color] : datum.color;
|
|
47
48
|
return /* @__PURE__ */ jsxs("div", { children: [
|
|
48
49
|
TooltipRenderer && /* @__PURE__ */ jsxs(
|
|
49
50
|
FloatingWrapper,
|
|
@@ -64,7 +65,7 @@ const Bar = React2.memo((props) => {
|
|
|
64
65
|
{
|
|
65
66
|
onMouseEnter: handleMouseEnter,
|
|
66
67
|
onMouseLeave: handleMouseLeave,
|
|
67
|
-
bg,
|
|
68
|
+
bg: backgroundColor,
|
|
68
69
|
height,
|
|
69
70
|
borderRadius,
|
|
70
71
|
innerRef: mergeRefs(handleRefCallback, refs.setReference),
|
|
@@ -131,21 +132,24 @@ const DSSingleStackedBar = (props) => {
|
|
|
131
132
|
onBlur: (e) => e.currentTarget !== e.target && setIsChartFocused(false),
|
|
132
133
|
...xstyledProps,
|
|
133
134
|
...globalAttributes,
|
|
134
|
-
children: data.map((datum, i) =>
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
135
|
+
children: data.map((datum, i) => {
|
|
136
|
+
const backgroundColor = datum.color in COLOR_PALLET ? COLOR_PALLET[datum.color] : datum.color;
|
|
137
|
+
return /* @__PURE__ */ jsxs(Grid, { rows, children: [
|
|
138
|
+
/* @__PURE__ */ jsx(
|
|
139
|
+
Bar,
|
|
140
|
+
{
|
|
141
|
+
datum,
|
|
142
|
+
isFocused: barNames[keyBarFocused] === datum.name && isChartFocused,
|
|
143
|
+
borderRadius: getBorderRadius(i),
|
|
144
|
+
bg: backgroundColor,
|
|
145
|
+
tabIndex: i === keyBarFocused ? 0 : -1,
|
|
146
|
+
...props
|
|
147
|
+
},
|
|
148
|
+
datum.name
|
|
149
|
+
),
|
|
150
|
+
LegendRenderer !== void 0 ? /* @__PURE__ */ jsx(LegendRenderer, { datum }, `${datum.name}-legend`) : null
|
|
151
|
+
] });
|
|
152
|
+
})
|
|
149
153
|
}
|
|
150
154
|
);
|
|
151
155
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/graphs/Chart/SingleStackedBar/SingleStackedBar.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport type { DSGridT } from '@elliemae/ds-grid';\nimport { Grid } from '@elliemae/ds-grid';\nimport { useFloatingContext, FloatingWrapper, PopoverArrow } from '@elliemae/ds-floating-context';\nimport {\n describe,\n useGetGlobalAttributes,\n useGetXstyledProps,\n useMemoMergePropsWithDefault,\n useValidateTypescriptPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport { mergeRefs } from '@elliemae/ds-system';\nimport React, { useCallback, useMemo, useState, type WeakValidationMap } from 'react';\nimport { COLOR_PALLET } from '../helpers/colorPallet.js';\nimport { DSSingleStackedBarName } from './exported-related/index.js';\nimport { DSSingleStackedBarPropTypes, defaultProps, type DSSingleStackedBarT } from './react-desc-prop-types.js';\nimport { StyledBar, StyledMouseOverDetectionBox, StyledTooltipContainer, Wrapper } from './styles.js';\nconst Bar = React.memo((props: DSSingleStackedBarT.BarT) => {\n const [isHover, setIsHover] = useState(false);\n const { height, TooltipRenderer, datum, tabIndex, isFocused, borderRadius, bg } = props;\n\n const isTooltipOpen = (isFocused || isHover) && !!TooltipRenderer;\n const {\n refs,\n floatingStyles,\n arrowStyles,\n context,\n isOpen: isFloatingOpen,\n } = useFloatingContext({\n externallyControlledIsOpen: isTooltipOpen,\n withoutAnimation: true,\n customOffset: [0, 14],\n });\n\n const handleRefCallback = useCallback(\n (_ref: HTMLDivElement | null) => {\n if (isFocused) {\n _ref?.focus();\n }\n },\n [isFocused],\n );\n\n const handleMouseEnter = useCallback(() => {\n setIsHover(true);\n }, []);\n\n const handleMouseLeave = useCallback(() => {\n setIsHover(false);\n }, []);\n return (\n <div>\n {TooltipRenderer && (\n <FloatingWrapper\n innerRef={refs.setFloating}\n isOpen={isFloatingOpen}\n floatingStyles={floatingStyles}\n context={context}\n >\n <StyledMouseOverDetectionBox />\n <StyledTooltipContainer>\n <TooltipRenderer datum={datum} />\n </StyledTooltipContainer>\n <PopoverArrow {...arrowStyles} />\n </FloatingWrapper>\n )}\n <StyledBar\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n bg={
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport type { DSGridT } from '@elliemae/ds-grid';\nimport { Grid } from '@elliemae/ds-grid';\nimport { useFloatingContext, FloatingWrapper, PopoverArrow } from '@elliemae/ds-floating-context';\nimport {\n describe,\n useGetGlobalAttributes,\n useGetXstyledProps,\n useMemoMergePropsWithDefault,\n useValidateTypescriptPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport { mergeRefs } from '@elliemae/ds-system';\nimport React, { useCallback, useMemo, useState, type WeakValidationMap } from 'react';\nimport { COLOR_PALLET } from '../helpers/colorPallet.js';\nimport { DSSingleStackedBarName } from './exported-related/index.js';\nimport { DSSingleStackedBarPropTypes, defaultProps, type DSSingleStackedBarT } from './react-desc-prop-types.js';\nimport { StyledBar, StyledMouseOverDetectionBox, StyledTooltipContainer, Wrapper } from './styles.js';\nconst Bar = React.memo((props: DSSingleStackedBarT.BarT) => {\n const [isHover, setIsHover] = useState(false);\n const { height, TooltipRenderer, datum, tabIndex, isFocused, borderRadius, bg } = props;\n\n const isTooltipOpen = (isFocused || isHover) && !!TooltipRenderer;\n const {\n refs,\n floatingStyles,\n arrowStyles,\n context,\n isOpen: isFloatingOpen,\n } = useFloatingContext({\n externallyControlledIsOpen: isTooltipOpen,\n withoutAnimation: true,\n customOffset: [0, 14],\n });\n\n const handleRefCallback = useCallback(\n (_ref: HTMLDivElement | null) => {\n if (isFocused) {\n _ref?.focus();\n }\n },\n [isFocused],\n );\n\n const handleMouseEnter = useCallback(() => {\n setIsHover(true);\n }, []);\n\n const handleMouseLeave = useCallback(() => {\n setIsHover(false);\n }, []);\n\n const backgroundColor =\n datum.color in COLOR_PALLET ? COLOR_PALLET[datum.color as keyof typeof COLOR_PALLET] : datum.color;\n return (\n <div>\n {TooltipRenderer && (\n <FloatingWrapper\n innerRef={refs.setFloating}\n isOpen={isFloatingOpen}\n floatingStyles={floatingStyles}\n context={context}\n >\n <StyledMouseOverDetectionBox />\n <StyledTooltipContainer>\n <TooltipRenderer datum={datum} />\n </StyledTooltipContainer>\n <PopoverArrow {...arrowStyles} />\n </FloatingWrapper>\n )}\n <StyledBar\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n bg={backgroundColor}\n height={height}\n borderRadius={borderRadius}\n innerRef={mergeRefs(handleRefCallback, refs.setReference)}\n tabIndex={tabIndex}\n role=\"img\"\n // until uziel work is merged we keep this default value\n aria-label={`${datum.name} value: ${datum.data}`}\n />\n </div>\n );\n});\n\nconst DSSingleStackedBar: React.ComponentType<DSSingleStackedBarT.Props> = (props) => {\n const propsWithDefaults = useMemoMergePropsWithDefault<DSSingleStackedBarT.InternalProps>(props, defaultProps);\n useValidateTypescriptPropTypes(propsWithDefaults, DSSingleStackedBarPropTypes, 'DSSingleStackedBar');\n\n const globalAttributes = useGetGlobalAttributes<DSSingleStackedBarT.InternalProps, HTMLDivElement, DSGridT.Props>(\n propsWithDefaults,\n );\n\n const xstyledProps = useGetXstyledProps(propsWithDefaults);\n\n const { data, LegendRenderer, gutter, height } = propsWithDefaults;\n const [keyBarFocused, setKeyBarFocused] = useState<number>(0);\n const [isChartFocused, setIsChartFocused] = useState(false);\n\n const total = useMemo(() => data.map((datum) => datum.data).reduce((acc, curr) => acc + curr, 0), [data]);\n const cols = useMemo(() => data.map((datum) => `${Math.ceil(datum.data * 100) / total}%`), [data, total]);\n const rows = useMemo(\n () => (LegendRenderer !== undefined ? [`${height}px`, 'auto'] : [`${height}px`]),\n [LegendRenderer, height],\n );\n const barNames = useMemo(() => data.map((datum) => datum.name), [data]);\n const getBorderRadius = useCallback(\n (index: number) => {\n if (index === 0) return '50px 0 0 50px';\n if (index === data.length - 1) return '0 50px 50px 0';\n return undefined;\n },\n [data.length],\n );\n\n const handleOnKeyDown: React.KeyboardEventHandler = useCallback(\n (e) => {\n if (e.code === 'ArrowRight') {\n if (barNames[keyBarFocused + 1]) {\n setKeyBarFocused(keyBarFocused + 1);\n } else {\n setKeyBarFocused(0);\n }\n }\n if (e.code === 'ArrowLeft') {\n if (barNames[keyBarFocused - 1]) {\n setKeyBarFocused(keyBarFocused - 1);\n } else {\n setKeyBarFocused(barNames.length - 1);\n }\n }\n },\n [keyBarFocused, barNames],\n );\n\n return (\n <Wrapper\n cols={cols}\n gutter={gutter}\n role=\"region\"\n onKeyDown={handleOnKeyDown}\n tabIndex={-1}\n onFocus={() => setIsChartFocused(true)}\n onBlur={(e) => e.currentTarget !== e.target && setIsChartFocused(false)}\n {...xstyledProps}\n {...globalAttributes}\n >\n {data.map((datum, i) => {\n const backgroundColor =\n datum.color in COLOR_PALLET ? COLOR_PALLET[datum.color as keyof typeof COLOR_PALLET] : datum.color;\n return (\n <Grid rows={rows}>\n <Bar\n key={datum.name}\n datum={datum}\n isFocused={barNames[keyBarFocused] === datum.name && isChartFocused}\n borderRadius={getBorderRadius(i)}\n bg={backgroundColor}\n tabIndex={i === keyBarFocused ? 0 : -1}\n {...props}\n />\n {LegendRenderer !== undefined ? <LegendRenderer key={`${datum.name}-legend`} datum={datum} /> : null}\n </Grid>\n );\n })}\n </Wrapper>\n );\n};\n\nDSSingleStackedBar.displayName = DSSingleStackedBarName;\nconst DSSingleStackedBarWithSchema = describe(DSSingleStackedBar);\nDSSingleStackedBarWithSchema.propTypes =\n DSSingleStackedBarPropTypes as unknown as WeakValidationMap<DSSingleStackedBarT.Props>;\n\nexport { DSSingleStackedBar, DSSingleStackedBarWithSchema };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/graphs/Chart/SingleStackedBar/react-desc-prop-types.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import {
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { DSPropTypesSchema, GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport { type BorderProps } from '@elliemae/ds-system';\n\nexport declare namespace DSSingleStackedBarT {\n export type DatumT = {\n name: string;\n data: number;\n color: string;\n };\n export type SingleStackedBarDatumT = DatumT[];\n export type TooltipRenderDataT = {\n datum: DatumT;\n };\n export interface SingleStackedBarT {\n data: SingleStackedBarDatumT;\n TooltipRenderer?: React.ComponentType<TooltipRenderDataT>;\n LegendRenderer?: React.ComponentType<TooltipRenderDataT>;\n height: string | number;\n gutter?: string | number;\n }\n\n export interface BarT extends SingleStackedBarT {\n isFocused: boolean;\n borderRadius?: BorderProps['borderRadius'];\n bg: string;\n tabIndex?: 0 | -1;\n datum: DatumT;\n }\n\n export interface RequiredProps {\n height: string | number;\n data: DatumT[];\n }\n\n export interface DefaultProps {\n gutter: string;\n }\n\n export interface OptionalProps {\n TooltipRenderer?: React.ComponentType<TooltipRenderDataT>;\n LegendRenderer?: React.ComponentType<TooltipRenderDataT>;\n }\n\n export interface Props\n extends\n Partial<DefaultProps>,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps>,\n XstyledProps,\n RequiredProps {}\n\n export interface InternalProps\n extends\n DefaultProps,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps>,\n XstyledProps,\n RequiredProps {}\n}\n\nexport const defaultProps: DSSingleStackedBarT.DefaultProps = {\n gutter: 'xxxs',\n};\n\nexport const DSSingleStackedBarPropTypes: DSPropTypesSchema<DSSingleStackedBarT.Props> = {\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n height: PropTypes.string.description('Height of the bar').isRequired,\n gutter: PropTypes.string.description('Gap between the bars').defaultValue('xxxs'),\n TooltipRenderer: PropTypes.func.description('Callback function that returns a custom renderer for the tooltip'),\n LegendRenderer: PropTypes.func.description('Callback function that returns a custom renderer for the legend'),\n data: PropTypes.arrayOf(\n PropTypes.shape({ name: PropTypes.string, data: PropTypes.number, color: PropTypes.string }),\n ).description('Array of the series which represent the chart'),\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,WAAW,2BAA2B,wBAAwB;AA4DhE,MAAM,eAAiD;AAAA,EAC5D,QAAQ;AACV;AAEO,MAAM,8BAA4E;AAAA,EACvF,GAAG;AAAA,EACH,GAAG;AAAA,EACH,QAAQ,UAAU,OAAO,YAAY,mBAAmB,EAAE;AAAA,EAC1D,QAAQ,UAAU,OAAO,YAAY,sBAAsB,EAAE,aAAa,MAAM;AAAA,EAChF,iBAAiB,UAAU,KAAK,YAAY,kEAAkE;AAAA,EAC9G,gBAAgB,UAAU,KAAK,YAAY,iEAAiE;AAAA,EAC5G,MAAM,UAAU;AAAA,IACd,UAAU,MAAM,EAAE,MAAM,UAAU,QAAQ,MAAM,UAAU,QAAQ,OAAO,UAAU,OAAO,CAAC;AAAA,EAC7F,EAAE,YAAY,+CAA+C;AAC/D;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/package.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import type { GlobalAttributesT, XstyledProps
|
|
2
|
-
import { type
|
|
1
|
+
import type { DSPropTypesSchema, GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers';
|
|
2
|
+
import { type BorderProps } from '@elliemae/ds-system';
|
|
3
3
|
export declare namespace DSSingleStackedBarT {
|
|
4
4
|
type DatumT = {
|
|
5
5
|
name: string;
|
|
@@ -20,7 +20,7 @@ export declare namespace DSSingleStackedBarT {
|
|
|
20
20
|
interface BarT extends SingleStackedBarT {
|
|
21
21
|
isFocused: boolean;
|
|
22
22
|
borderRadius?: BorderProps['borderRadius'];
|
|
23
|
-
bg:
|
|
23
|
+
bg: string;
|
|
24
24
|
tabIndex?: 0 | -1;
|
|
25
25
|
datum: DatumT;
|
|
26
26
|
}
|
|
@@ -24,5 +24,5 @@ interface AxisT<S extends ScaleT> {
|
|
|
24
24
|
GridRenderer: (props: GridRenderPropsT) => JSX.Element | null;
|
|
25
25
|
color: string;
|
|
26
26
|
}
|
|
27
|
-
export declare const Axis: React.MemoExoticComponent<(<S extends ScaleT>(props: AxisT<S>) =>
|
|
27
|
+
export declare const Axis: React.MemoExoticComponent<(<S extends ScaleT>(props: AxisT<S>) => React.JSX.Element | null)>;
|
|
28
28
|
export {};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
export declare const AxisBottom: React.MemoExoticComponent<() =>
|
|
2
|
+
export declare const AxisBottom: React.MemoExoticComponent<() => React.JSX.Element | null>;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
export declare const AxisLeft: React.MemoExoticComponent<() =>
|
|
2
|
+
export declare const AxisLeft: React.MemoExoticComponent<() => React.JSX.Element | null>;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
export declare const AxisRight: React.MemoExoticComponent<() =>
|
|
2
|
+
export declare const AxisRight: React.MemoExoticComponent<() => React.JSX.Element | null>;
|
|
@@ -1 +1,2 @@
|
|
|
1
|
-
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export declare const ChartContainer: () => React.JSX.Element;
|
|
@@ -1 +1,2 @@
|
|
|
1
|
-
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export declare const ClipPaths: () => React.JSX.Element;
|
|
@@ -1 +1,2 @@
|
|
|
1
|
-
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export declare const Labels: () => React.JSX.Element;
|
|
@@ -1 +1,2 @@
|
|
|
1
|
-
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export declare const BottomLegend: () => React.JSX.Element;
|
|
@@ -1 +1,2 @@
|
|
|
1
|
-
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export declare const LeftLegend: () => React.JSX.Element;
|
|
@@ -1 +1,2 @@
|
|
|
1
|
-
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export declare const Legend: () => React.JSX.Element | null;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
|
+
import React from 'react';
|
|
1
2
|
interface LegendItemProps {
|
|
2
3
|
domainValue: string;
|
|
3
4
|
}
|
|
4
|
-
export declare const LegendItem: (props: LegendItemProps) =>
|
|
5
|
+
export declare const LegendItem: (props: LegendItemProps) => React.JSX.Element;
|
|
5
6
|
export {};
|
|
@@ -1 +1,2 @@
|
|
|
1
|
-
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export declare const RightLegend: () => React.JSX.Element;
|
|
@@ -1 +1,2 @@
|
|
|
1
|
-
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export declare const TopLegend: () => React.JSX.Element;
|
|
@@ -1 +1,2 @@
|
|
|
1
|
-
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export declare const Scrapper: () => React.JSX.Element;
|
|
@@ -1 +1,2 @@
|
|
|
1
|
-
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export declare const VerticalScrapper: () => React.JSX.Element;
|
|
@@ -1 +1,2 @@
|
|
|
1
|
-
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export declare const BlurMask: () => React.JSX.Element | null;
|
|
@@ -1 +1,2 @@
|
|
|
1
|
-
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export declare const Controllers: () => React.JSX.Element | null;
|
|
@@ -1 +1,2 @@
|
|
|
1
|
-
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export declare const ScrollBarX: () => React.JSX.Element;
|
|
@@ -1 +1,2 @@
|
|
|
1
|
-
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export declare const ScrollBarY: () => React.JSX.Element;
|
|
@@ -1 +1,2 @@
|
|
|
1
|
-
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export declare const ScrollableContainerX: () => React.JSX.Element;
|
|
@@ -1 +1,2 @@
|
|
|
1
|
-
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export declare const ScrollableContainerY: () => React.JSX.Element;
|
|
@@ -1 +1,2 @@
|
|
|
1
|
-
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export declare const SeriesFactory: () => React.JSX.Element;
|
|
@@ -1,2 +1,3 @@
|
|
|
1
|
+
import React from 'react';
|
|
1
2
|
import type { DSChartT } from '../react-desc-prop-types.js';
|
|
2
|
-
export declare const HorizontalBars: ({ serie }: DSChartT.SerieComponentT) =>
|
|
3
|
+
export declare const HorizontalBars: ({ serie }: DSChartT.SerieComponentT) => React.JSX.Element;
|
|
@@ -1,2 +1,3 @@
|
|
|
1
|
+
import React from 'react';
|
|
1
2
|
import type { DSChartT } from '../react-desc-prop-types.js';
|
|
2
|
-
export declare const HorizontalStackedBars: ({ serie }: DSChartT.SerieComponentT) =>
|
|
3
|
+
export declare const HorizontalStackedBars: ({ serie }: DSChartT.SerieComponentT) => React.JSX.Element;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-dataviz",
|
|
3
|
-
"version": "3.70.0-next.
|
|
3
|
+
"version": "3.70.0-next.71",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - DataViz",
|
|
6
6
|
"files": [
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
],
|
|
23
23
|
"repository": {
|
|
24
24
|
"type": "git",
|
|
25
|
-
"url": "https://
|
|
25
|
+
"url": "https://github.com/intcx/PLATFORM-UI.dimsum.git"
|
|
26
26
|
},
|
|
27
27
|
"engines": {
|
|
28
28
|
"pnpm": ">=9",
|
|
@@ -39,25 +39,25 @@
|
|
|
39
39
|
"d3": "~7.9.0",
|
|
40
40
|
"resize-observer-polyfill": "~1.5.1",
|
|
41
41
|
"uid": "^2.0.2",
|
|
42
|
-
"@elliemae/ds-floating-context": "3.70.0-next.
|
|
43
|
-
"@elliemae/ds-
|
|
44
|
-
"@elliemae/ds-
|
|
45
|
-
"@elliemae/ds-
|
|
42
|
+
"@elliemae/ds-floating-context": "3.70.0-next.71",
|
|
43
|
+
"@elliemae/ds-system": "3.70.0-next.71",
|
|
44
|
+
"@elliemae/ds-grid": "3.70.0-next.71",
|
|
45
|
+
"@elliemae/ds-props-helpers": "3.70.0-next.71"
|
|
46
46
|
},
|
|
47
47
|
"devDependencies": {
|
|
48
48
|
"@elliemae/pui-theme": "~2.13.0",
|
|
49
49
|
"@types/d3": "~7.4.0",
|
|
50
50
|
"jest": "^30.0.0",
|
|
51
|
-
"styled-components": "~5.3.
|
|
52
|
-
"@elliemae/ds-
|
|
53
|
-
"@elliemae/ds-
|
|
51
|
+
"styled-components": "~5.3.11",
|
|
52
|
+
"@elliemae/ds-test-utils": "3.70.0-next.71",
|
|
53
|
+
"@elliemae/ds-monorepo-devops": "3.70.0-next.71"
|
|
54
54
|
},
|
|
55
55
|
"peerDependencies": {
|
|
56
56
|
"@elliemae/pui-theme": "~2.13.0",
|
|
57
|
-
"lodash-es": "^4.
|
|
57
|
+
"lodash-es": "^4.18.1",
|
|
58
58
|
"react": "^18.3.1",
|
|
59
59
|
"react-dom": "^18.3.1",
|
|
60
|
-
"styled-components": "~5.3.
|
|
60
|
+
"styled-components": "~5.3.11"
|
|
61
61
|
},
|
|
62
62
|
"publishConfig": {
|
|
63
63
|
"access": "public",
|
|
@@ -72,4 +72,4 @@
|
|
|
72
72
|
"build": "cross-env NODE_ENV=production node ../../../scripts/build/build.mjs",
|
|
73
73
|
"checkDeps": "npx -yes ../../util/ds-codemods check-missing-packages --projectFolderPath=\"./\" --ignorePackagesGlobPattern=\"\" --ignoreFilesGlobPattern=\"**/test-ables/*,**/tests/*\""
|
|
74
74
|
}
|
|
75
|
-
}
|
|
75
|
+
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|