@elliemae/ds-accordion 2.2.0-alpha.1 → 2.2.0-alpha.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/cjs/DSAccordion.js +50 -29
- package/cjs/DSAccordion.js.map +7 -0
- package/cjs/DSAccordionCTX.js +40 -14
- package/cjs/DSAccordionCTX.js.map +7 -0
- package/cjs/DSAccordionDatatestid.js +38 -10
- package/cjs/DSAccordionDatatestid.js.map +7 -0
- package/cjs/DSAccordionTypes.js +27 -2
- package/cjs/DSAccordionTypes.js.map +7 -0
- package/cjs/config/useAccordion.js +59 -36
- package/cjs/config/useAccordion.js.map +7 -0
- package/cjs/config/useAccordionRefs.js +46 -39
- package/cjs/config/useAccordionRefs.js.map +7 -0
- package/cjs/defaultProps.js +49 -39
- package/cjs/defaultProps.js.map +7 -0
- package/cjs/index.js +37 -14
- package/cjs/index.js.map +7 -0
- package/cjs/parts/accordionContent/AccordionContent.js +44 -35
- package/cjs/parts/accordionContent/AccordionContent.js.map +7 -0
- package/cjs/parts/accordionItem/DSAccordionItem.js +147 -174
- package/cjs/parts/accordionItem/DSAccordionItem.js.map +7 -0
- package/cjs/parts/accordionItem/styles.js +142 -128
- package/cjs/parts/accordionItem/styles.js.map +7 -0
- package/cjs/parts/accordionItem/useAccordionItem.js +52 -39
- package/cjs/parts/accordionItem/useAccordionItem.js.map +7 -0
- package/cjs/parts/accordionItem/useIsShowingEllipsis.js +42 -21
- package/cjs/parts/accordionItem/useIsShowingEllipsis.js.map +7 -0
- package/cjs/propTypes.js +53 -22
- package/cjs/propTypes.js.map +7 -0
- package/esm/DSAccordion.js +18 -16
- package/esm/DSAccordion.js.map +7 -0
- package/esm/DSAccordionCTX.js +10 -9
- package/esm/DSAccordionCTX.js.map +7 -0
- package/esm/DSAccordionDatatestid.js +9 -6
- package/esm/DSAccordionDatatestid.js.map +7 -0
- package/esm/DSAccordionTypes.js +2 -1
- package/esm/DSAccordionTypes.js.map +7 -0
- package/esm/config/useAccordion.js +25 -27
- package/esm/config/useAccordion.js.map +7 -0
- package/esm/config/useAccordionRefs.js +17 -31
- package/esm/config/useAccordionRefs.js.map +7 -0
- package/esm/defaultProps.js +21 -31
- package/esm/defaultProps.js.map +7 -0
- package/esm/index.js +8 -2
- package/esm/index.js.map +7 -0
- package/esm/parts/accordionContent/AccordionContent.js +14 -25
- package/esm/parts/accordionContent/AccordionContent.js.map +7 -0
- package/esm/parts/accordionItem/DSAccordionItem.js +114 -147
- package/esm/parts/accordionItem/DSAccordionItem.js.map +7 -0
- package/esm/parts/accordionItem/styles.js +116 -115
- package/esm/parts/accordionItem/styles.js.map +7 -0
- package/esm/parts/accordionItem/useAccordionItem.js +21 -33
- package/esm/parts/accordionItem/useAccordionItem.js.map +7 -0
- package/esm/parts/accordionItem/useIsShowingEllipsis.js +11 -15
- package/esm/parts/accordionItem/useIsShowingEllipsis.js.map +7 -0
- package/esm/propTypes.js +24 -17
- package/esm/propTypes.js.map +7 -0
- package/package.json +7 -7
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/accordionItem/useAccordionItem.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback, useContext, useMemo } from 'react';\nimport { DSAccordionContext } from '../../DSAccordionCTX';\nimport type { UseAccordionPropsT, UseAccordionItemReturnTypeT } from '../../DSAccordionTypes';\n\nexport const useAccordionItem = ({ value, disabled }: UseAccordionPropsT): UseAccordionItemReturnTypeT => {\n const { actualActiveValue, setActiveValues, focusableChildrenReferences } = useContext(DSAccordionContext);\n\n const selected = useMemo(() => {\n if (Array.isArray(actualActiveValue)) {\n return actualActiveValue.some((currentValue) => currentValue === value);\n }\n return value === actualActiveValue;\n }, [actualActiveValue, value]);\n\n const handleOnClick = useCallback(\n (e: React.MouseEvent) => {\n if (!disabled) setActiveValues(value, e);\n },\n [disabled, setActiveValues, value],\n );\n\n const handleOnKeyDown = useCallback(\n (e: React.KeyboardEvent, _dsIndex: number) => {\n if (!disabled && e.key === 'ArrowDown') {\n const currentIndex = focusableChildrenReferences.findIndex((item) => item.index === _dsIndex);\n if (focusableChildrenReferences[currentIndex + 1]?.ref?.current)\n focusableChildrenReferences[currentIndex + 1]?.ref?.current?.focus();\n }\n\n if (!disabled && e.key === 'ArrowUp') {\n const currentIndex = focusableChildrenReferences.findIndex((item) => item.index === _dsIndex);\n if (focusableChildrenReferences[currentIndex - 1]?.ref?.current)\n focusableChildrenReferences[currentIndex - 1]?.ref?.current?.focus();\n }\n },\n [disabled, focusableChildrenReferences],\n );\n\n return {\n handleOnClick,\n handleOnKeyDown,\n selected,\n };\n};\n"],
|
|
5
|
+
"mappings": "AAAA;ACAA;AACA;AAGO,MAAM,mBAAmB,CAAC,EAAE,OAAO,eAAgE;AACxG,QAAM,EAAE,mBAAmB,iBAAiB,gCAAgC,WAAW;AAEvF,QAAM,WAAW,QAAQ,MAAM;AAC7B,QAAI,MAAM,QAAQ,oBAAoB;AACpC,aAAO,kBAAkB,KAAK,CAAC,iBAAiB,iBAAiB;AAAA;AAEnE,WAAO,UAAU;AAAA,KAChB,CAAC,mBAAmB;AAEvB,QAAM,gBAAgB,YACpB,CAAC,MAAwB;AACvB,QAAI,CAAC;AAAU,sBAAgB,OAAO;AAAA,KAExC,CAAC,UAAU,iBAAiB;AAG9B,QAAM,kBAAkB,YACtB,CAAC,GAAwB,aAAqB;AAC5C,QAAI,CAAC,YAAY,EAAE,QAAQ,aAAa;AACtC,YAAM,eAAe,4BAA4B,UAAU,CAAC,SAAS,KAAK,UAAU;AACpF,UAAI,4BAA4B,eAAe,IAAI,KAAK;AACtD,oCAA4B,eAAe,IAAI,KAAK,SAAS;AAAA;AAGjE,QAAI,CAAC,YAAY,EAAE,QAAQ,WAAW;AACpC,YAAM,eAAe,4BAA4B,UAAU,CAAC,SAAS,KAAK,UAAU;AACpF,UAAI,4BAA4B,eAAe,IAAI,KAAK;AACtD,oCAA4B,eAAe,IAAI,KAAK,SAAS;AAAA;AAAA,KAGnE,CAAC,UAAU;AAGb,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA;AAAA;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -1,33 +1,29 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { useState, useMemo
|
|
3
|
-
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { useEffect, useState, useMemo } from "react";
|
|
4
3
|
const useIsShowingEllipsis = () => {
|
|
5
4
|
const [element, setElement] = useState();
|
|
6
|
-
const [isShowingEllipsis, setIsShowingEllipsis] = useState(false);
|
|
7
|
-
|
|
8
|
-
const resizeObserver = useMemo(() => new ResizeObserver(entries => {
|
|
5
|
+
const [isShowingEllipsis, setIsShowingEllipsis] = useState(false);
|
|
6
|
+
const resizeObserver = useMemo(() => new ResizeObserver((entries) => {
|
|
9
7
|
if (entries.length) {
|
|
10
8
|
const [textWrapperEntry] = entries;
|
|
11
9
|
const el = textWrapperEntry.target;
|
|
12
|
-
setIsShowingEllipsis(
|
|
10
|
+
setIsShowingEllipsis(el?.scrollWidth > el?.clientWidth);
|
|
13
11
|
}
|
|
14
12
|
}), []);
|
|
15
13
|
useEffect(() => {
|
|
16
14
|
if (element) {
|
|
17
|
-
setIsShowingEllipsis(
|
|
15
|
+
setIsShowingEllipsis(element?.scrollWidth > element?.clientWidth);
|
|
18
16
|
resizeObserver.observe(element);
|
|
19
17
|
}
|
|
20
|
-
|
|
21
18
|
return () => {
|
|
22
19
|
if (element) {
|
|
23
20
|
resizeObserver.unobserve(element);
|
|
24
21
|
}
|
|
25
22
|
};
|
|
26
23
|
}, [resizeObserver, element]);
|
|
27
|
-
return {
|
|
28
|
-
setElement,
|
|
29
|
-
isShowingEllipsis
|
|
30
|
-
};
|
|
24
|
+
return { setElement, isShowingEllipsis };
|
|
31
25
|
};
|
|
32
|
-
|
|
33
|
-
|
|
26
|
+
export {
|
|
27
|
+
useIsShowingEllipsis
|
|
28
|
+
};
|
|
29
|
+
//# sourceMappingURL=useIsShowingEllipsis.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/accordionItem/useIsShowingEllipsis.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useEffect, useState, useMemo } from 'react';\n\nexport const useIsShowingEllipsis = () => {\n const [element, setElement] = useState<HTMLSpanElement>();\n\n const [isShowingEllipsis, setIsShowingEllipsis] = useState(false);\n // const isShowingEllipsis = element?.scrollWidth > primaryTitleWrapperEl?.clientWidth;\n\n const resizeObserver = useMemo(\n () =>\n new ResizeObserver((entries) => {\n if (entries.length) {\n const [textWrapperEntry] = entries;\n const el = textWrapperEntry.target;\n setIsShowingEllipsis(el?.scrollWidth > el?.clientWidth);\n }\n }),\n [],\n );\n\n useEffect(() => {\n if (element) {\n setIsShowingEllipsis(element?.scrollWidth > element?.clientWidth);\n resizeObserver.observe(element);\n }\n return () => {\n if (element) {\n resizeObserver.unobserve(element);\n }\n };\n }, [resizeObserver, element]);\n\n return { setElement, isShowingEllipsis };\n};\n"],
|
|
5
|
+
"mappings": "AAAA;ACAA;AAEO,MAAM,uBAAuB,MAAM;AACxC,QAAM,CAAC,SAAS,cAAc;AAE9B,QAAM,CAAC,mBAAmB,wBAAwB,SAAS;AAG3D,QAAM,iBAAiB,QACrB,MACE,IAAI,eAAe,CAAC,YAAY;AAC9B,QAAI,QAAQ,QAAQ;AAClB,YAAM,CAAC,oBAAoB;AAC3B,YAAM,KAAK,iBAAiB;AAC5B,2BAAqB,IAAI,cAAc,IAAI;AAAA;AAAA,MAGjD;AAGF,YAAU,MAAM;AACd,QAAI,SAAS;AACX,2BAAqB,SAAS,cAAc,SAAS;AACrD,qBAAe,QAAQ;AAAA;AAEzB,WAAO,MAAM;AACX,UAAI,SAAS;AACX,uBAAe,UAAU;AAAA;AAAA;AAAA,KAG5B,CAAC,gBAAgB;AAEpB,SAAO,EAAE,YAAY;AAAA;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
package/esm/propTypes.js
CHANGED
|
@@ -1,21 +1,28 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { PropTypes } from "react-desc";
|
|
3
3
|
const accordionItemPropTypes = {
|
|
4
|
-
children: PropTypes.node.description(
|
|
5
|
-
title: PropTypes.string.description(
|
|
6
|
-
value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description(
|
|
7
|
-
iconClosed: PropTypes.node.description(
|
|
8
|
-
iconOpened: PropTypes.node.description(
|
|
9
|
-
secondaryTitle: PropTypes.string.description(
|
|
10
|
-
customActions: PropTypes.arrayOf(PropTypes.object).description(
|
|
11
|
-
renderCustomActions: PropTypes.func.description(
|
|
4
|
+
children: PropTypes.node.description("Dimsum AccordionItem content.").isRequired,
|
|
5
|
+
title: PropTypes.string.description("Set a primary title."),
|
|
6
|
+
value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description("Dimsum AccordionItem value, this value should be unique.").isRequired,
|
|
7
|
+
iconClosed: PropTypes.node.description("Custom Dimsum Icon when it is closed."),
|
|
8
|
+
iconOpened: PropTypes.node.description("Custom Dimsum Icon when it is open."),
|
|
9
|
+
secondaryTitle: PropTypes.string.description("Set a secondary title"),
|
|
10
|
+
customActions: PropTypes.arrayOf(PropTypes.object).description("Set Dimsum AccordionItem custom actions."),
|
|
11
|
+
renderCustomActions: PropTypes.func.description("This property will render any JSX in the custom actions area. You can access to all references and active values within the props.")
|
|
12
12
|
};
|
|
13
13
|
const accordionPropTypes = {
|
|
14
|
-
containerProps: PropTypes.object.description(
|
|
15
|
-
activeValue: PropTypes.oneOfType([
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
14
|
+
containerProps: PropTypes.object.description("Adds props to the container."),
|
|
15
|
+
activeValue: PropTypes.oneOfType([
|
|
16
|
+
PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),
|
|
17
|
+
PropTypes.string,
|
|
18
|
+
PropTypes.number
|
|
19
|
+
]).description("Selected active value. This property makes the component a controlled one."),
|
|
20
|
+
children: PropTypes.node.description("Dimsum AccordionItems to show."),
|
|
21
|
+
allowMultipleOpen: PropTypes.bool.description("Allows multiple Dimsum AccordionItems to be open at the same time."),
|
|
22
|
+
onChange: PropTypes.func.description("Callback function once the Dimsum Accordion changes.")
|
|
19
23
|
};
|
|
20
|
-
|
|
21
|
-
|
|
24
|
+
export {
|
|
25
|
+
accordionItemPropTypes,
|
|
26
|
+
accordionPropTypes
|
|
27
|
+
};
|
|
28
|
+
//# sourceMappingURL=propTypes.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/propTypes.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { PropTypes } from 'react-desc';\n\nexport const accordionItemPropTypes = {\n children: PropTypes.node.description('Dimsum AccordionItem content.').isRequired,\n title: PropTypes.string.description('Set a primary title.'),\n value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description(\n 'Dimsum AccordionItem value, this value should be unique.',\n ).isRequired,\n iconClosed: PropTypes.node.description('Custom Dimsum Icon when it is closed.'),\n iconOpened: PropTypes.node.description('Custom Dimsum Icon when it is open.'),\n secondaryTitle: PropTypes.string.description('Set a secondary title'),\n customActions: PropTypes.arrayOf(PropTypes.object).description('Set Dimsum AccordionItem custom actions.'),\n renderCustomActions: PropTypes.func.description(\n 'This property will render any JSX in the custom actions area. You can access to all references and active values within the props.',\n ),\n};\n\nexport const accordionPropTypes = {\n containerProps: PropTypes.object.description('Adds props to the container.'),\n activeValue: PropTypes.oneOfType([\n PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),\n PropTypes.string,\n PropTypes.number,\n ]).description('Selected active value. This property makes the component a controlled one.'),\n children: PropTypes.node.description('Dimsum AccordionItems to show.'),\n allowMultipleOpen: PropTypes.bool.description('Allows multiple Dimsum AccordionItems to be open at the same time.'),\n onChange: PropTypes.func.description('Callback function once the Dimsum Accordion changes.'),\n};\n"],
|
|
5
|
+
"mappings": "AAAA;ACAA;AAEO,MAAM,yBAAyB;AAAA,EACpC,UAAU,UAAU,KAAK,YAAY,iCAAiC;AAAA,EACtE,OAAO,UAAU,OAAO,YAAY;AAAA,EACpC,OAAO,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,SAAS,YAC/D,4DACA;AAAA,EACF,YAAY,UAAU,KAAK,YAAY;AAAA,EACvC,YAAY,UAAU,KAAK,YAAY;AAAA,EACvC,gBAAgB,UAAU,OAAO,YAAY;AAAA,EAC7C,eAAe,UAAU,QAAQ,UAAU,QAAQ,YAAY;AAAA,EAC/D,qBAAqB,UAAU,KAAK,YAClC;AAAA;AAIG,MAAM,qBAAqB;AAAA,EAChC,gBAAgB,UAAU,OAAO,YAAY;AAAA,EAC7C,aAAa,UAAU,UAAU;AAAA,IAC/B,UAAU,QAAQ,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU;AAAA,IACnE,UAAU;AAAA,IACV,UAAU;AAAA,KACT,YAAY;AAAA,EACf,UAAU,UAAU,KAAK,YAAY;AAAA,EACrC,mBAAmB,UAAU,KAAK,YAAY;AAAA,EAC9C,UAAU,UAAU,KAAK,YAAY;AAAA;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-accordion",
|
|
3
|
-
"version": "2.2.0-alpha.
|
|
3
|
+
"version": "2.2.0-alpha.2",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Accordion",
|
|
6
6
|
"module": "./esm/index.js",
|
|
@@ -84,12 +84,12 @@
|
|
|
84
84
|
"build": "node ../../scripts/build/build.js"
|
|
85
85
|
},
|
|
86
86
|
"dependencies": {
|
|
87
|
-
"@elliemae/ds-button": "2.2.0-alpha.
|
|
88
|
-
"@elliemae/ds-classnames": "2.2.0-alpha.
|
|
89
|
-
"@elliemae/ds-icons": "2.2.0-alpha.
|
|
90
|
-
"@elliemae/ds-shared": "2.2.0-alpha.
|
|
91
|
-
"@elliemae/ds-system": "2.2.0-alpha.
|
|
92
|
-
"@elliemae/ds-truncated-tooltip-text": "2.2.0-alpha.
|
|
87
|
+
"@elliemae/ds-button": "2.2.0-alpha.2",
|
|
88
|
+
"@elliemae/ds-classnames": "2.2.0-alpha.2",
|
|
89
|
+
"@elliemae/ds-icons": "2.2.0-alpha.2",
|
|
90
|
+
"@elliemae/ds-shared": "2.2.0-alpha.2",
|
|
91
|
+
"@elliemae/ds-system": "2.2.0-alpha.2",
|
|
92
|
+
"@elliemae/ds-truncated-tooltip-text": "2.2.0-alpha.2",
|
|
93
93
|
"react-desc": "^4.1.3"
|
|
94
94
|
},
|
|
95
95
|
"devDependencies": {
|