@lidofinance/lido-ui 3.42.0 → 3.42.2
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/accordion/useExpanded.js +10 -17
- package/dist/cjs/accordion/useExpanded.js.map +1 -1
- package/dist/cjs/accordion-transparent/useExpanded.js +10 -17
- package/dist/cjs/accordion-transparent/useExpanded.js.map +1 -1
- package/dist/cjs/chart-proportion/ChartProportion.js +2 -1
- package/dist/cjs/chart-proportion/ChartProportion.js.map +1 -1
- package/dist/esm/accordion/useExpanded.mjs +9 -16
- package/dist/esm/accordion/useExpanded.mjs.map +1 -1
- package/dist/esm/accordion-transparent/useExpanded.mjs +9 -16
- package/dist/esm/accordion-transparent/useExpanded.mjs.map +1 -1
- package/dist/esm/chart-proportion/ChartProportion.mjs +2 -1
- package/dist/esm/chart-proportion/ChartProportion.mjs.map +1 -1
- package/dist/types/accordion/useExpanded.d.ts +23 -6
- package/dist/types/accordion/useExpanded.d.ts.map +1 -1
- package/dist/types/accordion-transparent/useExpanded.d.ts +23 -6
- package/dist/types/accordion-transparent/useExpanded.d.ts.map +1 -1
- package/dist/types/chart-proportion/ChartProportion.d.ts.map +1 -1
- package/package.json +2 -2
|
@@ -2,34 +2,27 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
4
4
|
|
|
5
|
-
const
|
|
6
|
-
const _useCollapse = require('react-collapsed');
|
|
5
|
+
const reactCollapsed = require('react-collapsed');
|
|
7
6
|
|
|
8
|
-
//@ts-expect-error Property default doesn't exist on type
|
|
9
|
-
const useCollapse = _useCollapse.default || _useCollapse;
|
|
10
7
|
const useExpanded = _ref => {
|
|
11
8
|
let {
|
|
12
9
|
defaultExpanded = false,
|
|
13
10
|
onExpand,
|
|
14
11
|
onCollapse
|
|
15
12
|
} = _ref;
|
|
16
|
-
const [isExpanded, setExpanded] = React.useState(defaultExpanded);
|
|
17
|
-
React.useEffect(() => {
|
|
18
|
-
setExpanded(defaultExpanded);
|
|
19
|
-
}, [defaultExpanded]);
|
|
20
|
-
const handleToggle = React.useCallback(() => setExpanded(previous => !previous), []);
|
|
21
13
|
const {
|
|
22
14
|
getToggleProps,
|
|
23
|
-
getCollapseProps
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
15
|
+
getCollapseProps,
|
|
16
|
+
isExpanded
|
|
17
|
+
} = reactCollapsed.useCollapse({
|
|
18
|
+
defaultExpanded,
|
|
19
|
+
onTransitionStateChange: state => {
|
|
20
|
+
if (state === 'expandEnd') onExpand?.();
|
|
21
|
+
if (state === 'collapseEnd') onCollapse?.();
|
|
22
|
+
}
|
|
28
23
|
});
|
|
29
24
|
return {
|
|
30
|
-
toggleProps: getToggleProps(
|
|
31
|
-
onClick: handleToggle
|
|
32
|
-
}),
|
|
25
|
+
toggleProps: getToggleProps(),
|
|
33
26
|
collapseProps: getCollapseProps(),
|
|
34
27
|
isExpanded
|
|
35
28
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useExpanded.js","sources":["../../../packages/accordion/useExpanded.ts"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"useExpanded.js","sources":["../../../packages/accordion/useExpanded.ts"],"sourcesContent":["import { useCollapse } from 'react-collapsed'\nimport { AccordionProps } from './types.js'\n\nexport const useExpanded = ({\n defaultExpanded = false,\n onExpand,\n onCollapse,\n}: Pick<AccordionProps, 'defaultExpanded' | 'onExpand' | 'onCollapse'>) => {\n const { getToggleProps, getCollapseProps, isExpanded } = useCollapse({\n defaultExpanded,\n onTransitionStateChange: (state) => {\n if (state === 'expandEnd') onExpand?.()\n if (state === 'collapseEnd') onCollapse?.()\n },\n })\n\n return {\n toggleProps: getToggleProps(),\n collapseProps: getCollapseProps(),\n isExpanded,\n }\n}\n"],"names":["useExpanded","_ref","defaultExpanded","onExpand","onCollapse","getToggleProps","getCollapseProps","isExpanded","useCollapse","onTransitionStateChange","state","toggleProps","collapseProps"],"mappings":";;;;;;AAGaA,MAAAA,WAAW,GAAGC,IAAA,IAIgD;EAAA,IAJ/C;AAC1BC,IAAAA,eAAe,GAAG,KAAK;IACvBC,QAAQ;AACRC,IAAAA,UAAAA;AACmE,GAAC,GAAAH,IAAA,CAAA;EACpE,MAAM;IAAEI,cAAc;IAAEC,gBAAgB;AAAEC,IAAAA,UAAAA;GAAY,GAAGC,0BAAW,CAAC;IACnEN,eAAe;IACfO,uBAAuB,EAAGC,KAAK,IAAK;AAClC,MAAA,IAAIA,KAAK,KAAK,WAAW,EAAEP,QAAQ,IAAI,CAAA;AACvC,MAAA,IAAIO,KAAK,KAAK,aAAa,EAAEN,UAAU,IAAI,CAAA;AAC7C,KAAA;AACF,GAAC,CAAC,CAAA;EAEF,OAAO;IACLO,WAAW,EAAEN,cAAc,EAAE;IAC7BO,aAAa,EAAEN,gBAAgB,EAAE;AACjCC,IAAAA,UAAAA;GACD,CAAA;AACH;;;;"}
|
|
@@ -2,34 +2,27 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
4
4
|
|
|
5
|
-
const
|
|
6
|
-
const _useCollapse = require('react-collapsed');
|
|
5
|
+
const reactCollapsed = require('react-collapsed');
|
|
7
6
|
|
|
8
|
-
//@ts-expect-error Property default doesn't exist on type
|
|
9
|
-
const useCollapse = _useCollapse.default || _useCollapse;
|
|
10
7
|
const useExpanded = _ref => {
|
|
11
8
|
let {
|
|
12
9
|
defaultExpanded = false,
|
|
13
10
|
onExpand,
|
|
14
11
|
onCollapse
|
|
15
12
|
} = _ref;
|
|
16
|
-
const [isExpanded, setExpanded] = React.useState(defaultExpanded);
|
|
17
|
-
React.useEffect(() => {
|
|
18
|
-
setExpanded(defaultExpanded);
|
|
19
|
-
}, [defaultExpanded]);
|
|
20
|
-
const handleToggle = React.useCallback(() => setExpanded(previous => !previous), []);
|
|
21
13
|
const {
|
|
22
14
|
getToggleProps,
|
|
23
|
-
getCollapseProps
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
15
|
+
getCollapseProps,
|
|
16
|
+
isExpanded
|
|
17
|
+
} = reactCollapsed.useCollapse({
|
|
18
|
+
defaultExpanded,
|
|
19
|
+
onTransitionStateChange: state => {
|
|
20
|
+
if (state === 'expandEnd') onExpand?.();
|
|
21
|
+
if (state === 'collapseEnd') onCollapse?.();
|
|
22
|
+
}
|
|
28
23
|
});
|
|
29
24
|
return {
|
|
30
|
-
toggleProps: getToggleProps(
|
|
31
|
-
onClick: handleToggle
|
|
32
|
-
}),
|
|
25
|
+
toggleProps: getToggleProps(),
|
|
33
26
|
collapseProps: getCollapseProps(),
|
|
34
27
|
isExpanded
|
|
35
28
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useExpanded.js","sources":["../../../packages/accordion-transparent/useExpanded.ts"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"useExpanded.js","sources":["../../../packages/accordion-transparent/useExpanded.ts"],"sourcesContent":["import { useCollapse } from 'react-collapsed'\nimport { AccordionTransparentProps } from './types.js'\n\nexport const useExpanded = ({\n defaultExpanded = false,\n onExpand,\n onCollapse,\n}: Pick<\n AccordionTransparentProps,\n 'defaultExpanded' | 'onExpand' | 'onCollapse'\n>) => {\n const { getToggleProps, getCollapseProps, isExpanded } = useCollapse({\n defaultExpanded,\n onTransitionStateChange: (state) => {\n if (state === 'expandEnd') onExpand?.()\n if (state === 'collapseEnd') onCollapse?.()\n },\n })\n\n return {\n toggleProps: getToggleProps(),\n collapseProps: getCollapseProps(),\n isExpanded,\n }\n}\n"],"names":["useExpanded","_ref","defaultExpanded","onExpand","onCollapse","getToggleProps","getCollapseProps","isExpanded","useCollapse","onTransitionStateChange","state","toggleProps","collapseProps"],"mappings":";;;;;;AAGaA,MAAAA,WAAW,GAAGC,IAAA,IAOrB;EAAA,IAPsB;AAC1BC,IAAAA,eAAe,GAAG,KAAK;IACvBC,QAAQ;AACRC,IAAAA,UAAAA;AAIF,GAAC,GAAAH,IAAA,CAAA;EACC,MAAM;IAAEI,cAAc;IAAEC,gBAAgB;AAAEC,IAAAA,UAAAA;GAAY,GAAGC,0BAAW,CAAC;IACnEN,eAAe;IACfO,uBAAuB,EAAGC,KAAK,IAAK;AAClC,MAAA,IAAIA,KAAK,KAAK,WAAW,EAAEP,QAAQ,IAAI,CAAA;AACvC,MAAA,IAAIO,KAAK,KAAK,aAAa,EAAEN,UAAU,IAAI,CAAA;AAC7C,KAAA;AACF,GAAC,CAAC,CAAA;EAEF,OAAO;IACLO,WAAW,EAAEN,cAAc,EAAE;IAC7BO,aAAa,EAAEN,gBAAgB,EAAE;AACjCC,IAAAA,UAAAA;GACD,CAAA;AACH;;;;"}
|
|
@@ -41,6 +41,7 @@ const ChartProportion = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
|
41
41
|
label
|
|
42
42
|
} = item;
|
|
43
43
|
const isShowLabel = showLabels && label;
|
|
44
|
+
const showProgressLine = value > 0 && progress > 0 && progress < 100;
|
|
44
45
|
return /*#__PURE__*/jsxRuntime.jsxs(ChartProportionStyles.ProportionStyle, {
|
|
45
46
|
$flexGrow: value,
|
|
46
47
|
$backgroundColor: color,
|
|
@@ -54,7 +55,7 @@ const ChartProportion = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
|
54
55
|
$backgroundColor: color,
|
|
55
56
|
$border: border,
|
|
56
57
|
$borderSize: borderSize,
|
|
57
|
-
children:
|
|
58
|
+
children: showProgressLine && /*#__PURE__*/jsxRuntime.jsx(ChartProportionStyles.ProportionProgressLineStyle, {})
|
|
58
59
|
})]
|
|
59
60
|
}, index);
|
|
60
61
|
})
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChartProportion.js","sources":["../../../packages/chart-proportion/ChartProportion.tsx"],"sourcesContent":["import { ForwardedRef, forwardRef } from 'react'\n\nimport { InlineLoader } from '../loaders/index.js'\n\nimport {\n ProportionStyle,\n WrapperStyle,\n ProportionProgressStyle,\n ProportionProgressLineStyle,\n ProportionLabelStyle,\n} from './ChartProportionStyles.js'\nimport { ChartProportionProps } from './types.js'\n\nexport const ChartProportion = forwardRef(\n (props: ChartProportionProps, ref?: ForwardedRef<HTMLDivElement>) => {\n const {\n loading = false,\n onClick,\n children,\n height,\n border,\n data,\n showLabels,\n margin,\n borderSize,\n ...rest\n } = props\n\n if (loading) {\n return (\n <WrapperStyle $height={height} ref={ref} {...rest}>\n <InlineLoader />\n </WrapperStyle>\n )\n }\n\n return (\n <WrapperStyle $height={height} ref={ref} {...rest}>\n {data.map((item, index) => {\n const { color, value, progress, label } = item\n const isShowLabel = showLabels && label\n\n return (\n <ProportionStyle\n key={index}\n $flexGrow={value}\n $backgroundColor={color}\n $border={border}\n $borderSize={borderSize}\n $margin={margin}\n >\n {isShowLabel && (\n <ProportionLabelStyle>{label}</ProportionLabelStyle>\n )}\n <ProportionProgressStyle\n $progress={progress}\n $backgroundColor={color}\n $border={border}\n $borderSize={borderSize}\n >\n {
|
|
1
|
+
{"version":3,"file":"ChartProportion.js","sources":["../../../packages/chart-proportion/ChartProportion.tsx"],"sourcesContent":["import { ForwardedRef, forwardRef } from 'react'\n\nimport { InlineLoader } from '../loaders/index.js'\n\nimport {\n ProportionStyle,\n WrapperStyle,\n ProportionProgressStyle,\n ProportionProgressLineStyle,\n ProportionLabelStyle,\n} from './ChartProportionStyles.js'\nimport { ChartProportionProps } from './types.js'\n\nexport const ChartProportion = forwardRef(\n (props: ChartProportionProps, ref?: ForwardedRef<HTMLDivElement>) => {\n const {\n loading = false,\n onClick,\n children,\n height,\n border,\n data,\n showLabels,\n margin,\n borderSize,\n ...rest\n } = props\n\n if (loading) {\n return (\n <WrapperStyle $height={height} ref={ref} {...rest}>\n <InlineLoader />\n </WrapperStyle>\n )\n }\n\n return (\n <WrapperStyle $height={height} ref={ref} {...rest}>\n {data.map((item, index) => {\n const { color, value, progress, label } = item\n const isShowLabel = showLabels && label\n const showProgressLine = value > 0 && progress > 0 && progress < 100\n\n return (\n <ProportionStyle\n key={index}\n $flexGrow={value}\n $backgroundColor={color}\n $border={border}\n $borderSize={borderSize}\n $margin={margin}\n >\n {isShowLabel && (\n <ProportionLabelStyle>{label}</ProportionLabelStyle>\n )}\n <ProportionProgressStyle\n $progress={progress}\n $backgroundColor={color}\n $border={border}\n $borderSize={borderSize}\n >\n {showProgressLine && <ProportionProgressLineStyle />}\n </ProportionProgressStyle>\n </ProportionStyle>\n )\n })}\n </WrapperStyle>\n )\n },\n)\nChartProportion.displayName = 'ChartProportion'\n"],"names":["ChartProportion","forwardRef","props","ref","loading","onClick","children","height","border","data","showLabels","margin","borderSize","rest","_jsx","WrapperStyle","$height","InlineLoader","map","item","index","color","value","progress","label","isShowLabel","showProgressLine","_jsxs","ProportionStyle","$flexGrow","$backgroundColor","$border","$borderSize","$margin","ProportionLabelStyle","ProportionProgressStyle","$progress","ProportionProgressLineStyle","displayName"],"mappings":";;;;;;;;;;AAaO,MAAMA,eAAe,gBAAGC,gBAAU,CACvC,CAACC,KAA2B,EAAEC,GAAkC,KAAK;EACnE,MAAM;AACJC,IAAAA,OAAO,GAAG,KAAK;IACfC,OAAO;IACPC,QAAQ;IACRC,MAAM;IACNC,MAAM;IACNC,IAAI;IACJC,UAAU;IACVC,MAAM;IACNC,UAAU;IACV,GAAGC,IAAAA;AACL,GAAC,GAAGX,KAAK,CAAA;AAET,EAAA,IAAIE,OAAO,EAAE;IACX,oBACEU,cAAA,CAACC,kCAAY,EAAA;AAACC,MAAAA,OAAO,EAAET,MAAO;AAACJ,MAAAA,GAAG,EAAEA,GAAI;AAAA,MAAA,GAAKU,IAAI;AAAAP,MAAAA,QAAA,eAC/CQ,cAAA,CAACG,yBAAY,EAAE,EAAA,CAAA;AAAC,KACJ,CAAC,CAAA;AAEnB,GAAA;EAEA,oBACEH,cAAA,CAACC,kCAAY,EAAA;AAACC,IAAAA,OAAO,EAAET,MAAO;AAACJ,IAAAA,GAAG,EAAEA,GAAI;AAAA,IAAA,GAAKU,IAAI;IAAAP,QAAA,EAC9CG,IAAI,CAACS,GAAG,CAAC,CAACC,IAAI,EAAEC,KAAK,KAAK;MACzB,MAAM;QAAEC,KAAK;QAAEC,KAAK;QAAEC,QAAQ;AAAEC,QAAAA,KAAAA;AAAM,OAAC,GAAGL,IAAI,CAAA;AAC9C,MAAA,MAAMM,WAAW,GAAGf,UAAU,IAAIc,KAAK,CAAA;AACvC,MAAA,MAAME,gBAAgB,GAAGJ,KAAK,GAAG,CAAC,IAAIC,QAAQ,GAAG,CAAC,IAAIA,QAAQ,GAAG,GAAG,CAAA;MAEpE,oBACEI,eAAA,CAACC,qCAAe,EAAA;AAEdC,QAAAA,SAAS,EAAEP,KAAM;AACjBQ,QAAAA,gBAAgB,EAAET,KAAM;AACxBU,QAAAA,OAAO,EAAEvB,MAAO;AAChBwB,QAAAA,WAAW,EAAEpB,UAAW;AACxBqB,QAAAA,OAAO,EAAEtB,MAAO;AAAAL,QAAAA,QAAA,EAEfmB,CAAAA,WAAW,iBACVX,cAAA,CAACoB,0CAAoB,EAAA;AAAA5B,UAAAA,QAAA,EAAEkB,KAAAA;AAAK,SAAuB,CACpD,eACDV,cAAA,CAACqB,6CAAuB,EAAA;AACtBC,UAAAA,SAAS,EAAEb,QAAS;AACpBO,UAAAA,gBAAgB,EAAET,KAAM;AACxBU,UAAAA,OAAO,EAAEvB,MAAO;AAChBwB,UAAAA,WAAW,EAAEpB,UAAW;AAAAN,UAAAA,QAAA,EAEvBoB,gBAAgB,iBAAIZ,cAAA,CAACuB,iDAA2B,EAAE,EAAA,CAAA;AAAC,SAC7B,CAAC,CAAA;AAAA,OAAA,EAjBrBjB,KAkBU,CAAC,CAAA;KAErB,CAAA;AAAC,GACU,CAAC,CAAA;AAEnB,CACF,EAAC;AACDpB,eAAe,CAACsC,WAAW,GAAG,iBAAiB;;;;"}
|
|
@@ -1,31 +1,24 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import _useCollapse from 'react-collapsed';
|
|
1
|
+
import { useCollapse } from 'react-collapsed';
|
|
3
2
|
|
|
4
|
-
//@ts-expect-error Property default doesn't exist on type
|
|
5
|
-
const useCollapse = _useCollapse.default || _useCollapse;
|
|
6
3
|
const useExpanded = _ref => {
|
|
7
4
|
let {
|
|
8
5
|
defaultExpanded = false,
|
|
9
6
|
onExpand,
|
|
10
7
|
onCollapse
|
|
11
8
|
} = _ref;
|
|
12
|
-
const [isExpanded, setExpanded] = useState(defaultExpanded);
|
|
13
|
-
useEffect(() => {
|
|
14
|
-
setExpanded(defaultExpanded);
|
|
15
|
-
}, [defaultExpanded]);
|
|
16
|
-
const handleToggle = useCallback(() => setExpanded(previous => !previous), []);
|
|
17
9
|
const {
|
|
18
10
|
getToggleProps,
|
|
19
|
-
getCollapseProps
|
|
11
|
+
getCollapseProps,
|
|
12
|
+
isExpanded
|
|
20
13
|
} = useCollapse({
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
14
|
+
defaultExpanded,
|
|
15
|
+
onTransitionStateChange: state => {
|
|
16
|
+
if (state === 'expandEnd') onExpand?.();
|
|
17
|
+
if (state === 'collapseEnd') onCollapse?.();
|
|
18
|
+
}
|
|
24
19
|
});
|
|
25
20
|
return {
|
|
26
|
-
toggleProps: getToggleProps(
|
|
27
|
-
onClick: handleToggle
|
|
28
|
-
}),
|
|
21
|
+
toggleProps: getToggleProps(),
|
|
29
22
|
collapseProps: getCollapseProps(),
|
|
30
23
|
isExpanded
|
|
31
24
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useExpanded.mjs","sources":["../../../packages/accordion/useExpanded.ts"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"useExpanded.mjs","sources":["../../../packages/accordion/useExpanded.ts"],"sourcesContent":["import { useCollapse } from 'react-collapsed'\nimport { AccordionProps } from './types.js'\n\nexport const useExpanded = ({\n defaultExpanded = false,\n onExpand,\n onCollapse,\n}: Pick<AccordionProps, 'defaultExpanded' | 'onExpand' | 'onCollapse'>) => {\n const { getToggleProps, getCollapseProps, isExpanded } = useCollapse({\n defaultExpanded,\n onTransitionStateChange: (state) => {\n if (state === 'expandEnd') onExpand?.()\n if (state === 'collapseEnd') onCollapse?.()\n },\n })\n\n return {\n toggleProps: getToggleProps(),\n collapseProps: getCollapseProps(),\n isExpanded,\n }\n}\n"],"names":["useExpanded","_ref","defaultExpanded","onExpand","onCollapse","getToggleProps","getCollapseProps","isExpanded","useCollapse","onTransitionStateChange","state","toggleProps","collapseProps"],"mappings":";;AAGaA,MAAAA,WAAW,GAAGC,IAAA,IAIgD;EAAA,IAJ/C;AAC1BC,IAAAA,eAAe,GAAG,KAAK;IACvBC,QAAQ;AACRC,IAAAA,UAAAA;AACmE,GAAC,GAAAH,IAAA,CAAA;EACpE,MAAM;IAAEI,cAAc;IAAEC,gBAAgB;AAAEC,IAAAA,UAAAA;GAAY,GAAGC,WAAW,CAAC;IACnEN,eAAe;IACfO,uBAAuB,EAAGC,KAAK,IAAK;AAClC,MAAA,IAAIA,KAAK,KAAK,WAAW,EAAEP,QAAQ,IAAI,CAAA;AACvC,MAAA,IAAIO,KAAK,KAAK,aAAa,EAAEN,UAAU,IAAI,CAAA;AAC7C,KAAA;AACF,GAAC,CAAC,CAAA;EAEF,OAAO;IACLO,WAAW,EAAEN,cAAc,EAAE;IAC7BO,aAAa,EAAEN,gBAAgB,EAAE;AACjCC,IAAAA,UAAAA;GACD,CAAA;AACH;;;;"}
|
|
@@ -1,31 +1,24 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import _useCollapse from 'react-collapsed';
|
|
1
|
+
import { useCollapse } from 'react-collapsed';
|
|
3
2
|
|
|
4
|
-
//@ts-expect-error Property default doesn't exist on type
|
|
5
|
-
const useCollapse = _useCollapse.default || _useCollapse;
|
|
6
3
|
const useExpanded = _ref => {
|
|
7
4
|
let {
|
|
8
5
|
defaultExpanded = false,
|
|
9
6
|
onExpand,
|
|
10
7
|
onCollapse
|
|
11
8
|
} = _ref;
|
|
12
|
-
const [isExpanded, setExpanded] = useState(defaultExpanded);
|
|
13
|
-
useEffect(() => {
|
|
14
|
-
setExpanded(defaultExpanded);
|
|
15
|
-
}, [defaultExpanded]);
|
|
16
|
-
const handleToggle = useCallback(() => setExpanded(previous => !previous), []);
|
|
17
9
|
const {
|
|
18
10
|
getToggleProps,
|
|
19
|
-
getCollapseProps
|
|
11
|
+
getCollapseProps,
|
|
12
|
+
isExpanded
|
|
20
13
|
} = useCollapse({
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
14
|
+
defaultExpanded,
|
|
15
|
+
onTransitionStateChange: state => {
|
|
16
|
+
if (state === 'expandEnd') onExpand?.();
|
|
17
|
+
if (state === 'collapseEnd') onCollapse?.();
|
|
18
|
+
}
|
|
24
19
|
});
|
|
25
20
|
return {
|
|
26
|
-
toggleProps: getToggleProps(
|
|
27
|
-
onClick: handleToggle
|
|
28
|
-
}),
|
|
21
|
+
toggleProps: getToggleProps(),
|
|
29
22
|
collapseProps: getCollapseProps(),
|
|
30
23
|
isExpanded
|
|
31
24
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useExpanded.mjs","sources":["../../../packages/accordion-transparent/useExpanded.ts"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"useExpanded.mjs","sources":["../../../packages/accordion-transparent/useExpanded.ts"],"sourcesContent":["import { useCollapse } from 'react-collapsed'\nimport { AccordionTransparentProps } from './types.js'\n\nexport const useExpanded = ({\n defaultExpanded = false,\n onExpand,\n onCollapse,\n}: Pick<\n AccordionTransparentProps,\n 'defaultExpanded' | 'onExpand' | 'onCollapse'\n>) => {\n const { getToggleProps, getCollapseProps, isExpanded } = useCollapse({\n defaultExpanded,\n onTransitionStateChange: (state) => {\n if (state === 'expandEnd') onExpand?.()\n if (state === 'collapseEnd') onCollapse?.()\n },\n })\n\n return {\n toggleProps: getToggleProps(),\n collapseProps: getCollapseProps(),\n isExpanded,\n }\n}\n"],"names":["useExpanded","_ref","defaultExpanded","onExpand","onCollapse","getToggleProps","getCollapseProps","isExpanded","useCollapse","onTransitionStateChange","state","toggleProps","collapseProps"],"mappings":";;AAGaA,MAAAA,WAAW,GAAGC,IAAA,IAOrB;EAAA,IAPsB;AAC1BC,IAAAA,eAAe,GAAG,KAAK;IACvBC,QAAQ;AACRC,IAAAA,UAAAA;AAIF,GAAC,GAAAH,IAAA,CAAA;EACC,MAAM;IAAEI,cAAc;IAAEC,gBAAgB;AAAEC,IAAAA,UAAAA;GAAY,GAAGC,WAAW,CAAC;IACnEN,eAAe;IACfO,uBAAuB,EAAGC,KAAK,IAAK;AAClC,MAAA,IAAIA,KAAK,KAAK,WAAW,EAAEP,QAAQ,IAAI,CAAA;AACvC,MAAA,IAAIO,KAAK,KAAK,aAAa,EAAEN,UAAU,IAAI,CAAA;AAC7C,KAAA;AACF,GAAC,CAAC,CAAA;EAEF,OAAO;IACLO,WAAW,EAAEN,cAAc,EAAE;IAC7BO,aAAa,EAAEN,gBAAgB,EAAE;AACjCC,IAAAA,UAAAA;GACD,CAAA;AACH;;;;"}
|
|
@@ -37,6 +37,7 @@ const ChartProportion = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
37
37
|
label
|
|
38
38
|
} = item;
|
|
39
39
|
const isShowLabel = showLabels && label;
|
|
40
|
+
const showProgressLine = value > 0 && progress > 0 && progress < 100;
|
|
40
41
|
return /*#__PURE__*/jsxs(ProportionStyle, {
|
|
41
42
|
$flexGrow: value,
|
|
42
43
|
$backgroundColor: color,
|
|
@@ -50,7 +51,7 @@ const ChartProportion = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
50
51
|
$backgroundColor: color,
|
|
51
52
|
$border: border,
|
|
52
53
|
$borderSize: borderSize,
|
|
53
|
-
children:
|
|
54
|
+
children: showProgressLine && /*#__PURE__*/jsx(ProportionProgressLineStyle, {})
|
|
54
55
|
})]
|
|
55
56
|
}, index);
|
|
56
57
|
})
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChartProportion.mjs","sources":["../../../packages/chart-proportion/ChartProportion.tsx"],"sourcesContent":["import { ForwardedRef, forwardRef } from 'react'\n\nimport { InlineLoader } from '../loaders/index.js'\n\nimport {\n ProportionStyle,\n WrapperStyle,\n ProportionProgressStyle,\n ProportionProgressLineStyle,\n ProportionLabelStyle,\n} from './ChartProportionStyles.js'\nimport { ChartProportionProps } from './types.js'\n\nexport const ChartProportion = forwardRef(\n (props: ChartProportionProps, ref?: ForwardedRef<HTMLDivElement>) => {\n const {\n loading = false,\n onClick,\n children,\n height,\n border,\n data,\n showLabels,\n margin,\n borderSize,\n ...rest\n } = props\n\n if (loading) {\n return (\n <WrapperStyle $height={height} ref={ref} {...rest}>\n <InlineLoader />\n </WrapperStyle>\n )\n }\n\n return (\n <WrapperStyle $height={height} ref={ref} {...rest}>\n {data.map((item, index) => {\n const { color, value, progress, label } = item\n const isShowLabel = showLabels && label\n\n return (\n <ProportionStyle\n key={index}\n $flexGrow={value}\n $backgroundColor={color}\n $border={border}\n $borderSize={borderSize}\n $margin={margin}\n >\n {isShowLabel && (\n <ProportionLabelStyle>{label}</ProportionLabelStyle>\n )}\n <ProportionProgressStyle\n $progress={progress}\n $backgroundColor={color}\n $border={border}\n $borderSize={borderSize}\n >\n {
|
|
1
|
+
{"version":3,"file":"ChartProportion.mjs","sources":["../../../packages/chart-proportion/ChartProportion.tsx"],"sourcesContent":["import { ForwardedRef, forwardRef } from 'react'\n\nimport { InlineLoader } from '../loaders/index.js'\n\nimport {\n ProportionStyle,\n WrapperStyle,\n ProportionProgressStyle,\n ProportionProgressLineStyle,\n ProportionLabelStyle,\n} from './ChartProportionStyles.js'\nimport { ChartProportionProps } from './types.js'\n\nexport const ChartProportion = forwardRef(\n (props: ChartProportionProps, ref?: ForwardedRef<HTMLDivElement>) => {\n const {\n loading = false,\n onClick,\n children,\n height,\n border,\n data,\n showLabels,\n margin,\n borderSize,\n ...rest\n } = props\n\n if (loading) {\n return (\n <WrapperStyle $height={height} ref={ref} {...rest}>\n <InlineLoader />\n </WrapperStyle>\n )\n }\n\n return (\n <WrapperStyle $height={height} ref={ref} {...rest}>\n {data.map((item, index) => {\n const { color, value, progress, label } = item\n const isShowLabel = showLabels && label\n const showProgressLine = value > 0 && progress > 0 && progress < 100\n\n return (\n <ProportionStyle\n key={index}\n $flexGrow={value}\n $backgroundColor={color}\n $border={border}\n $borderSize={borderSize}\n $margin={margin}\n >\n {isShowLabel && (\n <ProportionLabelStyle>{label}</ProportionLabelStyle>\n )}\n <ProportionProgressStyle\n $progress={progress}\n $backgroundColor={color}\n $border={border}\n $borderSize={borderSize}\n >\n {showProgressLine && <ProportionProgressLineStyle />}\n </ProportionProgressStyle>\n </ProportionStyle>\n )\n })}\n </WrapperStyle>\n )\n },\n)\nChartProportion.displayName = 'ChartProportion'\n"],"names":["ChartProportion","forwardRef","props","ref","loading","onClick","children","height","border","data","showLabels","margin","borderSize","rest","_jsx","WrapperStyle","$height","InlineLoader","map","item","index","color","value","progress","label","isShowLabel","showProgressLine","_jsxs","ProportionStyle","$flexGrow","$backgroundColor","$border","$borderSize","$margin","ProportionLabelStyle","ProportionProgressStyle","$progress","ProportionProgressLineStyle","displayName"],"mappings":";;;;;;AAaO,MAAMA,eAAe,gBAAGC,UAAU,CACvC,CAACC,KAA2B,EAAEC,GAAkC,KAAK;EACnE,MAAM;AACJC,IAAAA,OAAO,GAAG,KAAK;IACfC,OAAO;IACPC,QAAQ;IACRC,MAAM;IACNC,MAAM;IACNC,IAAI;IACJC,UAAU;IACVC,MAAM;IACNC,UAAU;IACV,GAAGC,IAAAA;AACL,GAAC,GAAGX,KAAK,CAAA;AAET,EAAA,IAAIE,OAAO,EAAE;IACX,oBACEU,GAAA,CAACC,YAAY,EAAA;AAACC,MAAAA,OAAO,EAAET,MAAO;AAACJ,MAAAA,GAAG,EAAEA,GAAI;AAAA,MAAA,GAAKU,IAAI;AAAAP,MAAAA,QAAA,eAC/CQ,GAAA,CAACG,YAAY,EAAE,EAAA,CAAA;AAAC,KACJ,CAAC,CAAA;AAEnB,GAAA;EAEA,oBACEH,GAAA,CAACC,YAAY,EAAA;AAACC,IAAAA,OAAO,EAAET,MAAO;AAACJ,IAAAA,GAAG,EAAEA,GAAI;AAAA,IAAA,GAAKU,IAAI;IAAAP,QAAA,EAC9CG,IAAI,CAACS,GAAG,CAAC,CAACC,IAAI,EAAEC,KAAK,KAAK;MACzB,MAAM;QAAEC,KAAK;QAAEC,KAAK;QAAEC,QAAQ;AAAEC,QAAAA,KAAAA;AAAM,OAAC,GAAGL,IAAI,CAAA;AAC9C,MAAA,MAAMM,WAAW,GAAGf,UAAU,IAAIc,KAAK,CAAA;AACvC,MAAA,MAAME,gBAAgB,GAAGJ,KAAK,GAAG,CAAC,IAAIC,QAAQ,GAAG,CAAC,IAAIA,QAAQ,GAAG,GAAG,CAAA;MAEpE,oBACEI,IAAA,CAACC,eAAe,EAAA;AAEdC,QAAAA,SAAS,EAAEP,KAAM;AACjBQ,QAAAA,gBAAgB,EAAET,KAAM;AACxBU,QAAAA,OAAO,EAAEvB,MAAO;AAChBwB,QAAAA,WAAW,EAAEpB,UAAW;AACxBqB,QAAAA,OAAO,EAAEtB,MAAO;AAAAL,QAAAA,QAAA,EAEfmB,CAAAA,WAAW,iBACVX,GAAA,CAACoB,oBAAoB,EAAA;AAAA5B,UAAAA,QAAA,EAAEkB,KAAAA;AAAK,SAAuB,CACpD,eACDV,GAAA,CAACqB,uBAAuB,EAAA;AACtBC,UAAAA,SAAS,EAAEb,QAAS;AACpBO,UAAAA,gBAAgB,EAAET,KAAM;AACxBU,UAAAA,OAAO,EAAEvB,MAAO;AAChBwB,UAAAA,WAAW,EAAEpB,UAAW;AAAAN,UAAAA,QAAA,EAEvBoB,gBAAgB,iBAAIZ,GAAA,CAACuB,2BAA2B,EAAE,EAAA,CAAA;AAAC,SAC7B,CAAC,CAAA;AAAA,OAAA,EAjBrBjB,KAkBU,CAAC,CAAA;KAErB,CAAA;AAAC,GACU,CAAC,CAAA;AAEnB,CACF,EAAC;AACDpB,eAAe,CAACsC,WAAW,GAAG,iBAAiB;;;;"}
|
|
@@ -1,10 +1,27 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
1
2
|
import { AccordionProps } from './types.js';
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
3
|
+
export declare const useExpanded: ({ defaultExpanded, onExpand, onCollapse, }: Pick<AccordionProps, 'defaultExpanded' | 'onExpand' | 'onCollapse'>) => {
|
|
4
|
+
toggleProps: {
|
|
5
|
+
ref: ((instance: any) => void) | import("react").MutableRefObject<any>;
|
|
6
|
+
} & {
|
|
7
|
+
onClick: import("react").MouseEventHandler<Element>;
|
|
8
|
+
id: string;
|
|
9
|
+
'aria-controls': string;
|
|
10
|
+
'aria-expanded'?: boolean | undefined;
|
|
11
|
+
type?: "button" | undefined;
|
|
12
|
+
disabled?: boolean | undefined;
|
|
13
|
+
'aria-disabled'?: boolean | undefined;
|
|
14
|
+
role?: "button" | undefined;
|
|
15
|
+
tabIndex?: number | undefined;
|
|
16
|
+
};
|
|
17
|
+
collapseProps: {
|
|
18
|
+
ref: ((instance: any) => void) | import("react").MutableRefObject<any>;
|
|
19
|
+
} & {
|
|
20
|
+
id: string;
|
|
21
|
+
'aria-hidden': boolean;
|
|
22
|
+
role: string;
|
|
23
|
+
style: import("react").CSSProperties;
|
|
24
|
+
};
|
|
6
25
|
isExpanded: boolean;
|
|
7
26
|
};
|
|
8
|
-
export declare const useExpanded: UseExpanded;
|
|
9
|
-
export {};
|
|
10
27
|
//# sourceMappingURL=useExpanded.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useExpanded.d.ts","sourceRoot":"","sources":["../../../packages/accordion/useExpanded.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAA;AAE3C,
|
|
1
|
+
{"version":3,"file":"useExpanded.d.ts","sourceRoot":"","sources":["../../../packages/accordion/useExpanded.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAA;AAE3C,eAAO,MAAM,WAAW,+CAIrB,KAAK,cAAc,EAAE,iBAAiB,GAAG,UAAU,GAAG,YAAY,CAAC;;;;;;;;;;;;;;;;;;;;;;;CAcrE,CAAA"}
|
|
@@ -1,10 +1,27 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
1
2
|
import { AccordionTransparentProps } from './types.js';
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
3
|
+
export declare const useExpanded: ({ defaultExpanded, onExpand, onCollapse, }: Pick<AccordionTransparentProps, 'defaultExpanded' | 'onExpand' | 'onCollapse'>) => {
|
|
4
|
+
toggleProps: {
|
|
5
|
+
ref: ((instance: any) => void) | import("react").MutableRefObject<any>;
|
|
6
|
+
} & {
|
|
7
|
+
onClick: import("react").MouseEventHandler<Element>;
|
|
8
|
+
id: string;
|
|
9
|
+
'aria-controls': string;
|
|
10
|
+
'aria-expanded'?: boolean | undefined;
|
|
11
|
+
type?: "button" | undefined;
|
|
12
|
+
disabled?: boolean | undefined;
|
|
13
|
+
'aria-disabled'?: boolean | undefined;
|
|
14
|
+
role?: "button" | undefined;
|
|
15
|
+
tabIndex?: number | undefined;
|
|
16
|
+
};
|
|
17
|
+
collapseProps: {
|
|
18
|
+
ref: ((instance: any) => void) | import("react").MutableRefObject<any>;
|
|
19
|
+
} & {
|
|
20
|
+
id: string;
|
|
21
|
+
'aria-hidden': boolean;
|
|
22
|
+
role: string;
|
|
23
|
+
style: import("react").CSSProperties;
|
|
24
|
+
};
|
|
6
25
|
isExpanded: boolean;
|
|
7
26
|
};
|
|
8
|
-
export declare const useExpanded: UseExpanded;
|
|
9
|
-
export {};
|
|
10
27
|
//# sourceMappingURL=useExpanded.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useExpanded.d.ts","sourceRoot":"","sources":["../../../packages/accordion-transparent/useExpanded.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,yBAAyB,EAAE,MAAM,YAAY,CAAA;AAEtD,
|
|
1
|
+
{"version":3,"file":"useExpanded.d.ts","sourceRoot":"","sources":["../../../packages/accordion-transparent/useExpanded.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,yBAAyB,EAAE,MAAM,YAAY,CAAA;AAEtD,eAAO,MAAM,WAAW,+CAIrB,KACD,yBAAyB,EACzB,iBAAiB,GAAG,UAAU,GAAG,YAAY,CAC9C;;;;;;;;;;;;;;;;;;;;;;;CAcA,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChartProportion.d.ts","sourceRoot":"","sources":["../../../packages/chart-proportion/ChartProportion.tsx"],"names":[],"mappings":";AAaA,eAAO,MAAM,eAAe;;;
|
|
1
|
+
{"version":3,"file":"ChartProportion.d.ts","sourceRoot":"","sources":["../../../packages/chart-proportion/ChartProportion.tsx"],"names":[],"mappings":";AAaA,eAAO,MAAM,eAAe;;;6GAwD3B,CAAA"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@lidofinance/lido-ui",
|
|
3
|
-
"version": "3.42.
|
|
3
|
+
"version": "3.42.2",
|
|
4
4
|
"homepage": "https://github.com/lidofinance/ui",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -50,7 +50,7 @@
|
|
|
50
50
|
},
|
|
51
51
|
"dependencies": {
|
|
52
52
|
"@styled-system/should-forward-prop": "5.1.5",
|
|
53
|
-
"react-collapsed": "
|
|
53
|
+
"react-collapsed": "4.2.0",
|
|
54
54
|
"react-jazzicon": "^1.0.4",
|
|
55
55
|
"react-toastify": "7.0.4",
|
|
56
56
|
"react-transition-group": "4",
|