@elliemae/ds-accordion 2.3.0-alpha.9 → 2.3.0-next.3
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 +31 -0
- package/cjs/DSAccordionCTX.js +20 -0
- package/cjs/DSAccordionDatatestid.js +14 -0
- package/cjs/DSAccordionTypes.js +2 -0
- package/cjs/config/useAccordion.js +50 -0
- package/cjs/config/useAccordionRefs.js +40 -0
- package/cjs/defaultProps.js +54 -0
- package/cjs/index.js +14 -0
- package/cjs/parts/accordionContent/AccordionContent.js +41 -0
- package/cjs/parts/accordionItem/DSAccordionItem.js +206 -0
- package/cjs/parts/accordionItem/styles.js +149 -0
- package/cjs/parts/accordionItem/useAccordionItem.js +53 -0
- package/cjs/propTypes.js +26 -0
- package/esm/DSAccordion.js +21 -0
- package/esm/DSAccordionCTX.js +16 -0
- package/esm/DSAccordionDatatestid.js +10 -0
- package/esm/DSAccordionTypes.js +1 -0
- package/esm/config/useAccordion.js +46 -0
- package/esm/config/useAccordionRefs.js +32 -0
- package/esm/defaultProps.js +45 -0
- package/esm/index.js +2 -0
- package/esm/parts/accordionContent/AccordionContent.js +32 -0
- package/esm/parts/accordionItem/DSAccordionItem.js +193 -0
- package/esm/parts/accordionItem/styles.js +133 -0
- package/esm/parts/accordionItem/useAccordionItem.js +49 -0
- package/esm/propTypes.js +21 -0
- package/package.json +47 -52
- package/{dist/types → types}/DSAccordion.d.ts +0 -0
- package/{dist/types → types}/DSAccordionCTX.d.ts +0 -0
- package/{dist/types → types}/DSAccordionDatatestid.d.ts +0 -0
- package/{dist/types → types}/DSAccordionTypes.d.ts +0 -0
- package/{dist/types → types}/config/useAccordion.d.ts +0 -0
- package/{dist/types → types}/config/useAccordionRefs.d.ts +0 -0
- package/{dist/types → types}/defaultProps.d.ts +0 -0
- package/{dist/types → types}/index.d.ts +0 -0
- package/{dist/types → types}/parts/accordionContent/AccordionContent.d.ts +0 -0
- package/{dist/types → types}/parts/accordionItem/DSAccordionItem.d.ts +0 -0
- package/{dist/types → types}/parts/accordionItem/styles.d.ts +0 -0
- package/{dist/types → types}/parts/accordionItem/useAccordionItem.d.ts +0 -0
- package/{dist/types → types}/propTypes.d.ts +0 -0
- package/{dist/types → types}/tests/Accordion.test.d.ts +0 -0
- package/dist/cjs/DSAccordion.js +0 -52
- package/dist/cjs/DSAccordion.js.map +0 -7
- package/dist/cjs/DSAccordionCTX.js +0 -46
- package/dist/cjs/DSAccordionCTX.js.map +0 -7
- package/dist/cjs/DSAccordionDatatestid.js +0 -42
- package/dist/cjs/DSAccordionDatatestid.js.map +0 -7
- package/dist/cjs/DSAccordionTypes.js +0 -27
- package/dist/cjs/DSAccordionTypes.js.map +0 -7
- package/dist/cjs/config/useAccordion.js +0 -73
- package/dist/cjs/config/useAccordion.js.map +0 -7
- package/dist/cjs/config/useAccordionRefs.js +0 -47
- package/dist/cjs/config/useAccordionRefs.js.map +0 -7
- package/dist/cjs/defaultProps.js +0 -64
- package/dist/cjs/defaultProps.js.map +0 -7
- package/dist/cjs/index.js +0 -37
- package/dist/cjs/index.js.map +0 -7
- package/dist/cjs/parts/accordionContent/AccordionContent.js +0 -50
- package/dist/cjs/parts/accordionContent/AccordionContent.js.map +0 -7
- package/dist/cjs/parts/accordionItem/DSAccordionItem.js +0 -179
- package/dist/cjs/parts/accordionItem/DSAccordionItem.js.map +0 -7
- package/dist/cjs/parts/accordionItem/styles.js +0 -143
- package/dist/cjs/parts/accordionItem/styles.js.map +0 -7
- package/dist/cjs/parts/accordionItem/useAccordionItem.js +0 -66
- package/dist/cjs/parts/accordionItem/useAccordionItem.js.map +0 -7
- package/dist/cjs/propTypes.js +0 -57
- package/dist/cjs/propTypes.js.map +0 -7
- package/dist/esm/DSAccordion.js +0 -23
- package/dist/esm/DSAccordion.js.map +0 -7
- package/dist/esm/DSAccordionCTX.js +0 -17
- package/dist/esm/DSAccordionCTX.js.map +0 -7
- package/dist/esm/DSAccordionDatatestid.js +0 -13
- package/dist/esm/DSAccordionDatatestid.js.map +0 -7
- package/dist/esm/DSAccordionTypes.js +0 -2
- package/dist/esm/DSAccordionTypes.js.map +0 -7
- package/dist/esm/config/useAccordion.js +0 -44
- package/dist/esm/config/useAccordion.js.map +0 -7
- package/dist/esm/config/useAccordionRefs.js +0 -18
- package/dist/esm/config/useAccordionRefs.js.map +0 -7
- package/dist/esm/defaultProps.js +0 -35
- package/dist/esm/defaultProps.js.map +0 -7
- package/dist/esm/index.js +0 -8
- package/dist/esm/index.js.map +0 -7
- package/dist/esm/parts/accordionContent/AccordionContent.js +0 -21
- package/dist/esm/parts/accordionContent/AccordionContent.js.map +0 -7
- package/dist/esm/parts/accordionItem/DSAccordionItem.js +0 -160
- package/dist/esm/parts/accordionItem/DSAccordionItem.js.map +0 -7
- package/dist/esm/parts/accordionItem/styles.js +0 -114
- package/dist/esm/parts/accordionItem/styles.js.map +0 -7
- package/dist/esm/parts/accordionItem/useAccordionItem.js +0 -37
- package/dist/esm/parts/accordionItem/useAccordionItem.js.map +0 -7
- package/dist/esm/propTypes.js +0 -28
- package/dist/esm/propTypes.js.map +0 -7
package/dist/cjs/propTypes.js
DELETED
|
@@ -1,57 +0,0 @@
|
|
|
1
|
-
var __create = Object.create;
|
|
2
|
-
var __defProp = Object.defineProperty;
|
|
3
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
-
var __getProtoOf = Object.getPrototypeOf;
|
|
6
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
-
var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
|
|
8
|
-
var __export = (target, all) => {
|
|
9
|
-
for (var name in all)
|
|
10
|
-
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
-
};
|
|
12
|
-
var __reExport = (target, module2, copyDefault, desc) => {
|
|
13
|
-
if (module2 && typeof module2 === "object" || typeof module2 === "function") {
|
|
14
|
-
for (let key of __getOwnPropNames(module2))
|
|
15
|
-
if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
|
|
16
|
-
__defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
|
|
17
|
-
}
|
|
18
|
-
return target;
|
|
19
|
-
};
|
|
20
|
-
var __toESM = (module2, isNodeMode) => {
|
|
21
|
-
return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
|
|
22
|
-
};
|
|
23
|
-
var __toCommonJS = /* @__PURE__ */ ((cache) => {
|
|
24
|
-
return (module2, temp) => {
|
|
25
|
-
return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
|
|
26
|
-
};
|
|
27
|
-
})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
|
|
28
|
-
var propTypes_exports = {};
|
|
29
|
-
__export(propTypes_exports, {
|
|
30
|
-
accordionItemPropTypes: () => accordionItemPropTypes,
|
|
31
|
-
accordionPropTypes: () => accordionPropTypes
|
|
32
|
-
});
|
|
33
|
-
var React = __toESM(require("react"));
|
|
34
|
-
var import_react_desc = require("react-desc");
|
|
35
|
-
const accordionItemPropTypes = {
|
|
36
|
-
children: import_react_desc.PropTypes.node.description("Dimsum AccordionItem content.").isRequired,
|
|
37
|
-
title: import_react_desc.PropTypes.string.description("Set a primary title."),
|
|
38
|
-
value: import_react_desc.PropTypes.oneOfType([import_react_desc.PropTypes.string, import_react_desc.PropTypes.number]).description("Dimsum AccordionItem value, this value should be unique.").isRequired,
|
|
39
|
-
iconClosed: import_react_desc.PropTypes.node.description("Custom Dimsum Icon when it is closed."),
|
|
40
|
-
iconOpened: import_react_desc.PropTypes.node.description("Custom Dimsum Icon when it is open."),
|
|
41
|
-
secondaryTitle: import_react_desc.PropTypes.string.description("Set a secondary title"),
|
|
42
|
-
customActions: import_react_desc.PropTypes.arrayOf(import_react_desc.PropTypes.object).description("Set Dimsum AccordionItem custom actions."),
|
|
43
|
-
renderCustomActions: import_react_desc.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.")
|
|
44
|
-
};
|
|
45
|
-
const accordionPropTypes = {
|
|
46
|
-
containerProps: import_react_desc.PropTypes.object.description("Adds props to the container."),
|
|
47
|
-
activeValue: import_react_desc.PropTypes.oneOfType([
|
|
48
|
-
import_react_desc.PropTypes.arrayOf(import_react_desc.PropTypes.oneOfType([import_react_desc.PropTypes.string, import_react_desc.PropTypes.number])),
|
|
49
|
-
import_react_desc.PropTypes.string,
|
|
50
|
-
import_react_desc.PropTypes.number
|
|
51
|
-
]).description("Selected active value. This property makes the component a controlled one."),
|
|
52
|
-
children: import_react_desc.PropTypes.node.description("Dimsum AccordionItems to show."),
|
|
53
|
-
allowMultipleOpen: import_react_desc.PropTypes.bool.description("Allows multiple Dimsum AccordionItems to be open at the same time."),
|
|
54
|
-
onChange: import_react_desc.PropTypes.func.description("Callback function once the Dimsum Accordion changes.")
|
|
55
|
-
};
|
|
56
|
-
module.exports = __toCommonJS(propTypes_exports);
|
|
57
|
-
//# sourceMappingURL=propTypes.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/propTypes.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,wBAA0B;AAEnB,MAAM,yBAAyB;AAAA,EACpC,UAAU,4BAAU,KAAK,YAAY,iCAAiC;AAAA,EACtE,OAAO,4BAAU,OAAO,YAAY;AAAA,EACpC,OAAO,4BAAU,UAAU,CAAC,4BAAU,QAAQ,4BAAU,SAAS,YAC/D,4DACA;AAAA,EACF,YAAY,4BAAU,KAAK,YAAY;AAAA,EACvC,YAAY,4BAAU,KAAK,YAAY;AAAA,EACvC,gBAAgB,4BAAU,OAAO,YAAY;AAAA,EAC7C,eAAe,4BAAU,QAAQ,4BAAU,QAAQ,YAAY;AAAA,EAC/D,qBAAqB,4BAAU,KAAK,YAClC;AAAA;AAIG,MAAM,qBAAqB;AAAA,EAChC,gBAAgB,4BAAU,OAAO,YAAY;AAAA,EAC7C,aAAa,4BAAU,UAAU;AAAA,IAC/B,4BAAU,QAAQ,4BAAU,UAAU,CAAC,4BAAU,QAAQ,4BAAU;AAAA,IACnE,4BAAU;AAAA,IACV,4BAAU;AAAA,KACT,YAAY;AAAA,EACf,UAAU,4BAAU,KAAK,YAAY;AAAA,EACrC,mBAAmB,4BAAU,KAAK,YAAY;AAAA,EAC9C,UAAU,4BAAU,KAAK,YAAY;AAAA;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
package/dist/esm/DSAccordion.js
DELETED
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import React2 from "react";
|
|
3
|
-
import { describe } from "react-desc";
|
|
4
|
-
import { AccordionContent } from "./parts/accordionContent/AccordionContent";
|
|
5
|
-
import { useAccordion } from "./config/useAccordion";
|
|
6
|
-
import { DSAccordionContext } from "./DSAccordionCTX";
|
|
7
|
-
import { accordionPropTypes } from "./propTypes";
|
|
8
|
-
const DSAccordion = (props) => {
|
|
9
|
-
const ctx = useAccordion(props);
|
|
10
|
-
return /* @__PURE__ */ React2.createElement(DSAccordionContext.Provider, {
|
|
11
|
-
value: ctx
|
|
12
|
-
}, /* @__PURE__ */ React2.createElement(AccordionContent, null));
|
|
13
|
-
};
|
|
14
|
-
DSAccordion.propTypes = accordionPropTypes;
|
|
15
|
-
const DSAccordionWithSchema = describe(DSAccordion);
|
|
16
|
-
DSAccordionWithSchema.propTypes = accordionPropTypes;
|
|
17
|
-
var DSAccordion_default = DSAccordion;
|
|
18
|
-
export {
|
|
19
|
-
DSAccordion,
|
|
20
|
-
DSAccordionWithSchema,
|
|
21
|
-
DSAccordion_default as default
|
|
22
|
-
};
|
|
23
|
-
//# sourceMappingURL=DSAccordion.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/DSAccordion.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe } from 'react-desc';\nimport { AccordionContent } from './parts/accordionContent/AccordionContent';\nimport { useAccordion } from './config/useAccordion';\nimport { DSAccordionContext } from './DSAccordionCTX';\nimport { accordionPropTypes } from './propTypes';\nimport type { DSAccordionPropsT } from './DSAccordionTypes';\n\nconst DSAccordion = (props: DSAccordionPropsT): JSX.Element => {\n const ctx = useAccordion(props);\n\n return (\n <DSAccordionContext.Provider value={ctx}>\n <AccordionContent />\n </DSAccordionContext.Provider>\n );\n};\n\nDSAccordion.propTypes = accordionPropTypes;\nconst DSAccordionWithSchema = describe(DSAccordion);\nDSAccordionWithSchema.propTypes = accordionPropTypes;\n\nexport { DSAccordion, DSAccordionWithSchema };\n\nexport default DSAccordion;\n"],
|
|
5
|
-
"mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AAGA,MAAM,cAAc,CAAC,UAA0C;AAC7D,QAAM,MAAM,aAAa;AAEzB,SACE,qCAAC,mBAAmB,UAApB;AAAA,IAA6B,OAAO;AAAA,KAClC,qCAAC,kBAAD;AAAA;AAKN,YAAY,YAAY;AACxB,MAAM,wBAAwB,SAAS;AACvC,sBAAsB,YAAY;AAIlC,IAAO,sBAAQ;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import { createContext } from "react";
|
|
3
|
-
import { defaultProps } from "./defaultProps";
|
|
4
|
-
const noop = () => {
|
|
5
|
-
};
|
|
6
|
-
const defaultContext = {
|
|
7
|
-
props: defaultProps,
|
|
8
|
-
actualActiveValue: [],
|
|
9
|
-
setActiveValues: noop,
|
|
10
|
-
focusableChildrenReferences: [],
|
|
11
|
-
allChildrenReferences: {}
|
|
12
|
-
};
|
|
13
|
-
const DSAccordionContext = createContext(defaultContext);
|
|
14
|
-
export {
|
|
15
|
-
DSAccordionContext
|
|
16
|
-
};
|
|
17
|
-
//# sourceMappingURL=DSAccordionCTX.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/DSAccordionCTX.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { createContext } from 'react';\nimport { defaultProps } from './defaultProps';\nimport type { DSAccordionContextT } from './DSAccordionTypes';\n\n// eslint-disable-next-line @typescript-eslint/no-empty-function\nconst noop = (): void => {};\n\nconst defaultContext = {\n props: defaultProps,\n actualActiveValue: [],\n setActiveValues: noop,\n focusableChildrenReferences: [],\n allChildrenReferences: {},\n};\n\nexport const DSAccordionContext = createContext<DSAccordionContextT>(defaultContext);\n"],
|
|
5
|
-
"mappings": "AAAA;ACAA;AACA;AAIA,MAAM,OAAO,MAAY;AAAA;AAEzB,MAAM,iBAAiB;AAAA,EACrB,OAAO;AAAA,EACP,mBAAmB;AAAA,EACnB,iBAAiB;AAAA,EACjB,6BAA6B;AAAA,EAC7B,uBAAuB;AAAA;AAGlB,MAAM,qBAAqB,cAAmC;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
const DSAccordionDataTestid = {
|
|
3
|
-
ITEM: {
|
|
4
|
-
CONTENT: "ds-accordion_item-content",
|
|
5
|
-
HEADER: "ds-accordion_item-header",
|
|
6
|
-
CONTAINER: "ds-accordion_item"
|
|
7
|
-
},
|
|
8
|
-
GROUP: "ds-accordion_group"
|
|
9
|
-
};
|
|
10
|
-
export {
|
|
11
|
-
DSAccordionDataTestid
|
|
12
|
-
};
|
|
13
|
-
//# sourceMappingURL=DSAccordionDatatestid.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/DSAccordionDatatestid.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const DSAccordionDataTestid = {\n ITEM: {\n CONTENT: 'ds-accordion_item-content',\n HEADER: 'ds-accordion_item-header',\n CONTAINER: 'ds-accordion_item',\n },\n GROUP: 'ds-accordion_group',\n};\n"],
|
|
5
|
-
"mappings": "AAAA;ACAO,MAAM,wBAAwB;AAAA,EACnC,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,WAAW;AAAA;AAAA,EAEb,OAAO;AAAA;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,44 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import { useMemo, useState, useCallback } from "react";
|
|
3
|
-
import { useMemoMergePropsWithDefault } from "@elliemae/ds-props-helpers";
|
|
4
|
-
import { useAccordionRefs } from "./useAccordionRefs";
|
|
5
|
-
import { defaultProps } from "../defaultProps";
|
|
6
|
-
const useAccordion = (props) => {
|
|
7
|
-
const propsWithDefaults = useMemoMergePropsWithDefault(props, defaultProps);
|
|
8
|
-
const { activeValue, allowMultipleOpen, onChange } = propsWithDefaults;
|
|
9
|
-
const { focusableChildrenReferences, allChildrenReferences } = useAccordionRefs(propsWithDefaults);
|
|
10
|
-
const [internalActiveValue, setInternalActiveValue] = useState(activeValue);
|
|
11
|
-
const actualActiveValue = useMemo(() => {
|
|
12
|
-
if (activeValue === void 0)
|
|
13
|
-
return internalActiveValue;
|
|
14
|
-
return activeValue;
|
|
15
|
-
}, [activeValue, internalActiveValue]);
|
|
16
|
-
const setActiveValues = useCallback((value, e) => {
|
|
17
|
-
let newState;
|
|
18
|
-
if (allowMultipleOpen && (actualActiveValue === void 0 || actualActiveValue === null))
|
|
19
|
-
newState = [value];
|
|
20
|
-
else if (allowMultipleOpen && Array.isArray(actualActiveValue))
|
|
21
|
-
if (!actualActiveValue.some((currentValues) => currentValues === value))
|
|
22
|
-
newState = [...actualActiveValue, value];
|
|
23
|
-
else
|
|
24
|
-
newState = actualActiveValue.filter((currentValues) => currentValues !== value);
|
|
25
|
-
else if (actualActiveValue === value)
|
|
26
|
-
newState = null;
|
|
27
|
-
else
|
|
28
|
-
newState = value;
|
|
29
|
-
setInternalActiveValue(newState);
|
|
30
|
-
return onChange(newState, e);
|
|
31
|
-
}, [actualActiveValue, allowMultipleOpen, onChange]);
|
|
32
|
-
const ctx = useMemo(() => ({
|
|
33
|
-
props: propsWithDefaults,
|
|
34
|
-
actualActiveValue,
|
|
35
|
-
setActiveValues,
|
|
36
|
-
focusableChildrenReferences,
|
|
37
|
-
allChildrenReferences
|
|
38
|
-
}), [actualActiveValue, allChildrenReferences, focusableChildrenReferences, propsWithDefaults, setActiveValues]);
|
|
39
|
-
return ctx;
|
|
40
|
-
};
|
|
41
|
-
export {
|
|
42
|
-
useAccordion
|
|
43
|
-
};
|
|
44
|
-
//# sourceMappingURL=useAccordion.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useAccordion.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useMemo, useState, useCallback } from 'react';\nimport { useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport { useAccordionRefs } from './useAccordionRefs';\nimport { defaultProps } from '../defaultProps';\nimport type {\n DSAccordionPropsT,\n DSAccordionUseAccordionContextT,\n DSAccordionPropsWithDefaultsT,\n InternalActiveValueT,\n} from '../DSAccordionTypes';\n\nexport const useAccordion = (props: DSAccordionPropsT): DSAccordionUseAccordionContextT => {\n const propsWithDefaults = useMemoMergePropsWithDefault(props, defaultProps) as DSAccordionPropsWithDefaultsT;\n\n const { activeValue, allowMultipleOpen, onChange } = propsWithDefaults;\n\n const { focusableChildrenReferences, allChildrenReferences } = useAccordionRefs(propsWithDefaults);\n\n const [internalActiveValue, setInternalActiveValue] = useState<InternalActiveValueT>(activeValue);\n\n const actualActiveValue = useMemo(() => {\n if (activeValue === undefined) return internalActiveValue;\n return activeValue;\n }, [activeValue, internalActiveValue]);\n\n const setActiveValues = useCallback(\n (value: string | number, e: React.MouseEvent | React.KeyboardEvent) => {\n let newState: InternalActiveValueT;\n if (allowMultipleOpen && (actualActiveValue === undefined || actualActiveValue === null)) newState = [value];\n else if (allowMultipleOpen && Array.isArray(actualActiveValue))\n if (!actualActiveValue.some((currentValues: string | number) => currentValues === value))\n newState = [...actualActiveValue, value];\n else newState = actualActiveValue.filter((currentValues: string | number) => currentValues !== value);\n else if (actualActiveValue === value) newState = null;\n else newState = value;\n setInternalActiveValue(newState);\n return onChange(newState, e);\n },\n [actualActiveValue, allowMultipleOpen, onChange],\n );\n\n const ctx = useMemo(\n () => ({\n props: propsWithDefaults,\n actualActiveValue,\n setActiveValues,\n focusableChildrenReferences,\n allChildrenReferences,\n }),\n [actualActiveValue, allChildrenReferences, focusableChildrenReferences, propsWithDefaults, setActiveValues],\n );\n\n return ctx;\n};\n"],
|
|
5
|
-
"mappings": "AAAA;ACAA;AACA;AACA;AACA;AAQO,MAAM,eAAe,CAAC,UAA8D;AACzF,QAAM,oBAAoB,6BAA6B,OAAO;AAE9D,QAAM,EAAE,aAAa,mBAAmB,aAAa;AAErD,QAAM,EAAE,6BAA6B,0BAA0B,iBAAiB;AAEhF,QAAM,CAAC,qBAAqB,0BAA0B,SAA+B;AAErF,QAAM,oBAAoB,QAAQ,MAAM;AACtC,QAAI,gBAAgB;AAAW,aAAO;AACtC,WAAO;AAAA,KACN,CAAC,aAAa;AAEjB,QAAM,kBAAkB,YACtB,CAAC,OAAwB,MAA8C;AACrE,QAAI;AACJ,QAAI,qBAAsB,uBAAsB,UAAa,sBAAsB;AAAO,iBAAW,CAAC;AAAA,aAC7F,qBAAqB,MAAM,QAAQ;AAC1C,UAAI,CAAC,kBAAkB,KAAK,CAAC,kBAAmC,kBAAkB;AAChF,mBAAW,CAAC,GAAG,mBAAmB;AAAA;AAC/B,mBAAW,kBAAkB,OAAO,CAAC,kBAAmC,kBAAkB;AAAA,aACxF,sBAAsB;AAAO,iBAAW;AAAA;AAC5C,iBAAW;AAChB,2BAAuB;AACvB,WAAO,SAAS,UAAU;AAAA,KAE5B,CAAC,mBAAmB,mBAAmB;AAGzC,QAAM,MAAM,QACV,MAAO;AAAA,IACL,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MAEF,CAAC,mBAAmB,uBAAuB,6BAA6B,mBAAmB;AAG7F,SAAO;AAAA;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import React2, { useMemo } from "react";
|
|
3
|
-
const useAccordionRefs = ({ children }) => useMemo(() => {
|
|
4
|
-
const focusableChildrenReferences = [];
|
|
5
|
-
const allChildrenReferences = {};
|
|
6
|
-
React2.Children.map(children, (child, index) => {
|
|
7
|
-
const { value, disabled } = child.props;
|
|
8
|
-
const currentRef = React2.createRef();
|
|
9
|
-
allChildrenReferences[index] = currentRef;
|
|
10
|
-
if (!disabled)
|
|
11
|
-
focusableChildrenReferences.push({ index, value, ref: currentRef });
|
|
12
|
-
});
|
|
13
|
-
return { focusableChildrenReferences, allChildrenReferences };
|
|
14
|
-
}, [children]);
|
|
15
|
-
export {
|
|
16
|
-
useAccordionRefs
|
|
17
|
-
};
|
|
18
|
-
//# sourceMappingURL=useAccordionRefs.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useAccordionRefs.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useMemo } from 'react';\nimport type {\n UseAccordionRefsPropsT,\n UseAccordionRefsReturnTypeT,\n FocusableChildrenReferences,\n AllChildrenReferences,\n} from '../DSAccordionTypes';\n\nexport const useAccordionRefs = ({ children }: UseAccordionRefsPropsT): UseAccordionRefsReturnTypeT =>\n useMemo(() => {\n const focusableChildrenReferences: FocusableChildrenReferences[] = [];\n const allChildrenReferences: AllChildrenReferences = {};\n\n React.Children.map(children, (child, index) => {\n const { value, disabled } = child.props;\n const currentRef = React.createRef<HTMLButtonElement>();\n allChildrenReferences[index] = currentRef;\n if (!disabled) focusableChildrenReferences.push({ index, value, ref: currentRef });\n });\n return { focusableChildrenReferences, allChildrenReferences };\n }, [children]);\n"],
|
|
5
|
-
"mappings": "AAAA;ACAA;AAQO,MAAM,mBAAmB,CAAC,EAAE,eACjC,QAAQ,MAAM;AACZ,QAAM,8BAA6D;AACnE,QAAM,wBAA+C;AAErD,SAAM,SAAS,IAAI,UAAU,CAAC,OAAO,UAAU;AAC7C,UAAM,EAAE,OAAO,aAAa,MAAM;AAClC,UAAM,aAAa,OAAM;AACzB,0BAAsB,SAAS;AAC/B,QAAI,CAAC;AAAU,kCAA4B,KAAK,EAAE,OAAO,OAAO,KAAK;AAAA;AAEvE,SAAO,EAAE,6BAA6B;AAAA,GACrC,CAAC;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
package/dist/esm/defaultProps.js
DELETED
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import React2, { memo } from "react";
|
|
3
|
-
import { ArrowheadRight, ArrowheadDown, ChevronRight, ChevronDown } from "@elliemae/ds-icons";
|
|
4
|
-
const DefaultIconClosed = memo(({ isDSMobile = false }) => isDSMobile ? /* @__PURE__ */ React2.createElement(ChevronRight, {
|
|
5
|
-
width: "20px"
|
|
6
|
-
}) : /* @__PURE__ */ React2.createElement(ArrowheadRight, {
|
|
7
|
-
width: "20px"
|
|
8
|
-
}));
|
|
9
|
-
const DefaultIconOpen = memo(({ isDSMobile = false }) => isDSMobile ? /* @__PURE__ */ React2.createElement(ChevronDown, {
|
|
10
|
-
width: "20px"
|
|
11
|
-
}) : /* @__PURE__ */ React2.createElement(ArrowheadDown, {
|
|
12
|
-
width: "20px"
|
|
13
|
-
}));
|
|
14
|
-
const noop = () => {
|
|
15
|
-
};
|
|
16
|
-
const defaultProps = {
|
|
17
|
-
containerProps: {},
|
|
18
|
-
allowMultipleOpen: false,
|
|
19
|
-
contentExpandable: false,
|
|
20
|
-
onChange: noop,
|
|
21
|
-
children: [],
|
|
22
|
-
isDSMobile: false
|
|
23
|
-
};
|
|
24
|
-
const accordionItemDefaultProps = {
|
|
25
|
-
iconClosed: DefaultIconClosed,
|
|
26
|
-
iconOpened: DefaultIconOpen,
|
|
27
|
-
title: "",
|
|
28
|
-
customActions: [],
|
|
29
|
-
disabled: false
|
|
30
|
-
};
|
|
31
|
-
export {
|
|
32
|
-
accordionItemDefaultProps,
|
|
33
|
-
defaultProps
|
|
34
|
-
};
|
|
35
|
-
//# sourceMappingURL=defaultProps.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/defaultProps.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { memo } from 'react';\nimport { ArrowheadRight, ArrowheadDown, ChevronRight, ChevronDown } from '@elliemae/ds-icons';\nimport type { DefaultIconPropsT, DSAccordionDefaultPropsT, DSAccordionItemDefaultPropsT } from './DSAccordionTypes';\n\nconst DefaultIconClosed = memo(({ isDSMobile = false }: DefaultIconPropsT) =>\n isDSMobile ? <ChevronRight width=\"20px\" /> : <ArrowheadRight width=\"20px\" />,\n);\n\nconst DefaultIconOpen = memo(({ isDSMobile = false }: DefaultIconPropsT) =>\n isDSMobile ? <ChevronDown width=\"20px\" /> : <ArrowheadDown width=\"20px\" />,\n);\n\n// eslint-disable-next-line @typescript-eslint/no-empty-function\nconst noop = (): void => {};\n\nexport const defaultProps: DSAccordionDefaultPropsT = {\n containerProps: {},\n allowMultipleOpen: false,\n contentExpandable: false,\n onChange: noop,\n children: [],\n isDSMobile: false,\n};\n\nexport const accordionItemDefaultProps: DSAccordionItemDefaultPropsT = {\n iconClosed: DefaultIconClosed,\n iconOpened: DefaultIconOpen,\n title: '',\n customActions: [],\n disabled: false,\n};\n"],
|
|
5
|
-
"mappings": "AAAA;ACAA;AACA;AAGA,MAAM,oBAAoB,KAAK,CAAC,EAAE,aAAa,YAC7C,aAAa,qCAAC,cAAD;AAAA,EAAc,OAAM;AAAA,KAAY,qCAAC,gBAAD;AAAA,EAAgB,OAAM;AAAA;AAGrE,MAAM,kBAAkB,KAAK,CAAC,EAAE,aAAa,YAC3C,aAAa,qCAAC,aAAD;AAAA,EAAa,OAAM;AAAA,KAAY,qCAAC,eAAD;AAAA,EAAe,OAAM;AAAA;AAInE,MAAM,OAAO,MAAY;AAAA;AAElB,MAAM,eAAyC;AAAA,EACpD,gBAAgB;AAAA,EAChB,mBAAmB;AAAA,EACnB,mBAAmB;AAAA,EACnB,UAAU;AAAA,EACV,UAAU;AAAA,EACV,YAAY;AAAA;AAGP,MAAM,4BAA0D;AAAA,EACrE,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,OAAO;AAAA,EACP,eAAe;AAAA,EACf,UAAU;AAAA;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
package/dist/esm/index.js
DELETED
package/dist/esm/index.js.map
DELETED
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './DSAccordion';\nexport * from './parts/accordionItem/DSAccordionItem';\n\nexport type { DSAccordionPropsT, DSAccordionItemPropsT } from './DSAccordionTypes';\n\nexport { default } from './DSAccordion';\n"],
|
|
5
|
-
"mappings": "AAAA;ACAA;AACA;AAIA;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import React2, { useContext } from "react";
|
|
3
|
-
import { DSAccordionContext } from "../../DSAccordionCTX";
|
|
4
|
-
import { DSAccordionDataTestid } from "../../DSAccordionDatatestid";
|
|
5
|
-
const AccordionContent = () => {
|
|
6
|
-
const {
|
|
7
|
-
props: { containerProps, children }
|
|
8
|
-
} = useContext(DSAccordionContext);
|
|
9
|
-
const childrenWithIndex = [];
|
|
10
|
-
React2.Children.forEach(children, (child, index) => childrenWithIndex.push(React2.cloneElement(child, {
|
|
11
|
-
dsIndex: index
|
|
12
|
-
})));
|
|
13
|
-
return /* @__PURE__ */ React2.createElement("div", {
|
|
14
|
-
...containerProps,
|
|
15
|
-
"data-testid": DSAccordionDataTestid.GROUP
|
|
16
|
-
}, childrenWithIndex);
|
|
17
|
-
};
|
|
18
|
-
export {
|
|
19
|
-
AccordionContent
|
|
20
|
-
};
|
|
21
|
-
//# sourceMappingURL=AccordionContent.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/accordionContent/AccordionContent.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { DSAccordionContext } from '../../DSAccordionCTX';\nimport { DSAccordionDataTestid } from '../../DSAccordionDatatestid';\nimport type { DSAccordionItemPropsT } from '../../DSAccordionTypes';\n\nexport const AccordionContent = (): JSX.Element => {\n const {\n props: { containerProps, children },\n } = useContext(DSAccordionContext);\n\n const childrenWithIndex: React.ReactElement<DSAccordionItemPropsT>[] = [];\n\n React.Children.forEach(children, (child, index) =>\n childrenWithIndex.push(\n React.cloneElement(child, {\n dsIndex: index,\n }),\n ),\n );\n\n return (\n <div {...containerProps} data-testid={DSAccordionDataTestid.GROUP}>\n {childrenWithIndex}\n </div>\n );\n};\n"],
|
|
5
|
-
"mappings": "AAAA;ACAA;AACA;AACA;AAGO,MAAM,mBAAmB,MAAmB;AACjD,QAAM;AAAA,IACJ,OAAO,EAAE,gBAAgB;AAAA,MACvB,WAAW;AAEf,QAAM,oBAAiE;AAEvE,SAAM,SAAS,QAAQ,UAAU,CAAC,OAAO,UACvC,kBAAkB,KAChB,OAAM,aAAa,OAAO;AAAA,IACxB,SAAS;AAAA;AAKf,SACE,qCAAC,OAAD;AAAA,OAAS;AAAA,IAAgB,eAAa,sBAAsB;AAAA,KACzD;AAAA;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,160 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import React2, { useState, useContext, useCallback, useMemo } from "react";
|
|
3
|
-
import { describe } from "react-desc";
|
|
4
|
-
import { useMemoMergePropsWithDefault } from "@elliemae/ds-props-helpers";
|
|
5
|
-
import { DSButton, BUTTON_TYPE } from "@elliemae/ds-button";
|
|
6
|
-
import { DSPopperJS } from "@elliemae/ds-popperjs";
|
|
7
|
-
import { useIsShowingEllipsis } from "@elliemae/ds-utilities";
|
|
8
|
-
import { accordionItemDefaultProps } from "../../defaultProps";
|
|
9
|
-
import {
|
|
10
|
-
StyledItemAddon,
|
|
11
|
-
StyledItemContainer,
|
|
12
|
-
StyledItemContent,
|
|
13
|
-
StyledItemCustomActions,
|
|
14
|
-
StyledItemHeader,
|
|
15
|
-
StyledItemHeaderContainer,
|
|
16
|
-
StyledItemTitles,
|
|
17
|
-
StyledPrimaryTitle,
|
|
18
|
-
StyledSecondaryTitle
|
|
19
|
-
} from "./styles";
|
|
20
|
-
import { accordionItemPropTypes } from "../../propTypes";
|
|
21
|
-
import { useAccordionItem } from "./useAccordionItem";
|
|
22
|
-
import { DSAccordionContext } from "../../DSAccordionCTX";
|
|
23
|
-
import { DSAccordionDataTestid } from "../../DSAccordionDatatestid";
|
|
24
|
-
const DSAccordionItem = (props) => {
|
|
25
|
-
const propsWithDefaults = useMemoMergePropsWithDefault(props, accordionItemDefaultProps);
|
|
26
|
-
const {
|
|
27
|
-
children,
|
|
28
|
-
title,
|
|
29
|
-
secondaryTitle,
|
|
30
|
-
customActions,
|
|
31
|
-
iconOpened: IconOpened,
|
|
32
|
-
iconClosed: IconClosed,
|
|
33
|
-
value,
|
|
34
|
-
disabled,
|
|
35
|
-
dsIndex,
|
|
36
|
-
renderCustomActions
|
|
37
|
-
} = propsWithDefaults;
|
|
38
|
-
const { handleOnClick, handleOnKeyDown, selected } = useAccordionItem({ value, disabled });
|
|
39
|
-
const {
|
|
40
|
-
allChildrenReferences,
|
|
41
|
-
actualActiveValue,
|
|
42
|
-
props: { isDSMobile }
|
|
43
|
-
} = useContext(DSAccordionContext);
|
|
44
|
-
const onKeyDownWithIndex = useCallback((e) => {
|
|
45
|
-
handleOnKeyDown(e, dsIndex);
|
|
46
|
-
}, [dsIndex, handleOnKeyDown]);
|
|
47
|
-
const [showPopover, setShowPopover] = useState(false);
|
|
48
|
-
const [referenceElement, setReferenceElement] = useState();
|
|
49
|
-
const CustomActionsContent = useMemo(() => {
|
|
50
|
-
if (!isDSMobile && customActions?.length > 0)
|
|
51
|
-
return /* @__PURE__ */ React2.createElement(StyledItemCustomActions, null, customActions?.map(({ onClick, id, ...rest }) => /* @__PURE__ */ React2.createElement(DSButton, {
|
|
52
|
-
key: id,
|
|
53
|
-
onClick: (e) => {
|
|
54
|
-
e.stopPropagation();
|
|
55
|
-
if (onClick)
|
|
56
|
-
onClick(e);
|
|
57
|
-
},
|
|
58
|
-
...rest,
|
|
59
|
-
buttonType: BUTTON_TYPE.SECONDARY
|
|
60
|
-
})));
|
|
61
|
-
if (!isDSMobile && renderCustomActions)
|
|
62
|
-
return /* @__PURE__ */ React2.createElement(StyledItemCustomActions, null, renderCustomActions({ allRefs: allChildrenReferences, actualActiveValue }));
|
|
63
|
-
return null;
|
|
64
|
-
}, [actualActiveValue, allChildrenReferences, customActions, isDSMobile, renderCustomActions]);
|
|
65
|
-
const { isShowingEllipsis: isPrimaryShowingEllipsis, setElement: setPrimaryElement } = useIsShowingEllipsis();
|
|
66
|
-
const { isShowingEllipsis: isSecondaryShowingEllipsis, setElement: setSecondaryElement } = useIsShowingEllipsis();
|
|
67
|
-
const handleOnFocus = useCallback(() => setShowPopover(isPrimaryShowingEllipsis || isSecondaryShowingEllipsis), [isPrimaryShowingEllipsis, isSecondaryShowingEllipsis]);
|
|
68
|
-
const handleOnBlur = useCallback(() => setShowPopover(false), []);
|
|
69
|
-
const Titles = useMemo(() => {
|
|
70
|
-
if (isPrimaryShowingEllipsis || isSecondaryShowingEllipsis)
|
|
71
|
-
return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(StyledPrimaryTitle, {
|
|
72
|
-
ref: setPrimaryElement,
|
|
73
|
-
id: `accordion_${title}id`,
|
|
74
|
-
disabled,
|
|
75
|
-
isDSMobile
|
|
76
|
-
}, title), !isDSMobile && secondaryTitle && /* @__PURE__ */ React2.createElement(StyledSecondaryTitle, {
|
|
77
|
-
ref: setSecondaryElement,
|
|
78
|
-
disabled
|
|
79
|
-
}, secondaryTitle), /* @__PURE__ */ React2.createElement(DSPopperJS, {
|
|
80
|
-
referenceElement,
|
|
81
|
-
showPopover
|
|
82
|
-
}, /* @__PURE__ */ React2.createElement("div", {
|
|
83
|
-
style: { maxWidth: 260, padding: 8, background: "white", display: "grid", gap: 8 }
|
|
84
|
-
}, /* @__PURE__ */ React2.createElement("p", {
|
|
85
|
-
style: { margin: 0 }
|
|
86
|
-
}, title), /* @__PURE__ */ React2.createElement("p", {
|
|
87
|
-
style: { margin: 0 }
|
|
88
|
-
}, " ", secondaryTitle))));
|
|
89
|
-
return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(StyledPrimaryTitle, {
|
|
90
|
-
ref: setPrimaryElement,
|
|
91
|
-
id: `accordion_${title}id`,
|
|
92
|
-
disabled,
|
|
93
|
-
isDSMobile
|
|
94
|
-
}, title), !isDSMobile && secondaryTitle && /* @__PURE__ */ React2.createElement(StyledSecondaryTitle, {
|
|
95
|
-
ref: setSecondaryElement,
|
|
96
|
-
disabled
|
|
97
|
-
}, secondaryTitle));
|
|
98
|
-
}, [
|
|
99
|
-
disabled,
|
|
100
|
-
isDSMobile,
|
|
101
|
-
isPrimaryShowingEllipsis,
|
|
102
|
-
isSecondaryShowingEllipsis,
|
|
103
|
-
referenceElement,
|
|
104
|
-
secondaryTitle,
|
|
105
|
-
setPrimaryElement,
|
|
106
|
-
setSecondaryElement,
|
|
107
|
-
showPopover,
|
|
108
|
-
title
|
|
109
|
-
]);
|
|
110
|
-
return /* @__PURE__ */ React2.createElement(StyledItemContainer, {
|
|
111
|
-
"data-testid": DSAccordionDataTestid.ITEM.CONTAINER
|
|
112
|
-
}, /* @__PURE__ */ React2.createElement(StyledItemHeaderContainer, {
|
|
113
|
-
disabled
|
|
114
|
-
}, /* @__PURE__ */ React2.createElement(StyledItemHeader, {
|
|
115
|
-
withCustomActions: (customActions?.length > 0 || renderCustomActions !== void 0) && !isDSMobile,
|
|
116
|
-
withSecondaryTitle: secondaryTitle,
|
|
117
|
-
onClick: handleOnClick,
|
|
118
|
-
tabIndex: !disabled ? 0 : void 0,
|
|
119
|
-
disabled,
|
|
120
|
-
"data-disabled": disabled,
|
|
121
|
-
ref: allChildrenReferences[dsIndex],
|
|
122
|
-
onKeyDown: onKeyDownWithIndex,
|
|
123
|
-
isDSMobile,
|
|
124
|
-
"data-testid": DSAccordionDataTestid.ITEM.HEADER,
|
|
125
|
-
id: `ds-accordion-header-${value}`,
|
|
126
|
-
"aria-expanded": selected,
|
|
127
|
-
"aria-disabled": disabled,
|
|
128
|
-
"aria-controls": `ds-accordion-content-${value}`,
|
|
129
|
-
onFocus: handleOnFocus,
|
|
130
|
-
onBlur: handleOnBlur
|
|
131
|
-
}, /* @__PURE__ */ React2.createElement(StyledItemAddon, {
|
|
132
|
-
disabled,
|
|
133
|
-
isDSMobile
|
|
134
|
-
}, selected ? /* @__PURE__ */ React2.createElement(IconOpened, {
|
|
135
|
-
isDSMobile
|
|
136
|
-
}) : /* @__PURE__ */ React2.createElement(IconClosed, {
|
|
137
|
-
isDSMobile
|
|
138
|
-
})), /* @__PURE__ */ React2.createElement(StyledItemTitles, {
|
|
139
|
-
onMouseEnter: handleOnFocus,
|
|
140
|
-
onMouseLeave: handleOnBlur,
|
|
141
|
-
isDSMobile,
|
|
142
|
-
ref: setReferenceElement
|
|
143
|
-
}, Titles)), CustomActionsContent), selected && /* @__PURE__ */ React2.createElement(StyledItemContent, {
|
|
144
|
-
"data-testid": DSAccordionDataTestid.ITEM.CONTENT,
|
|
145
|
-
"aria-labelledby": `ds-accordion-header-${value}`,
|
|
146
|
-
role: "region",
|
|
147
|
-
isDSMobile,
|
|
148
|
-
id: `ds-accordion-content-${value}`
|
|
149
|
-
}, children));
|
|
150
|
-
};
|
|
151
|
-
DSAccordionItem.propTypes = accordionItemPropTypes;
|
|
152
|
-
const DSAccordionItemWithSchema = describe(DSAccordionItem);
|
|
153
|
-
DSAccordionItemWithSchema.propTypes = accordionItemPropTypes;
|
|
154
|
-
var DSAccordionItem_default = DSAccordionItem;
|
|
155
|
-
export {
|
|
156
|
-
DSAccordionItem,
|
|
157
|
-
DSAccordionItemWithSchema,
|
|
158
|
-
DSAccordionItem_default as default
|
|
159
|
-
};
|
|
160
|
-
//# sourceMappingURL=DSAccordionItem.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/accordionItem/DSAccordionItem.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport React, { useState, useContext, useCallback, useMemo } from 'react';\nimport { describe } from 'react-desc';\nimport { useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport { DSButton, BUTTON_TYPE } from '@elliemae/ds-button';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport { useIsShowingEllipsis } from '@elliemae/ds-utilities';\nimport { accordionItemDefaultProps } from '../../defaultProps';\nimport {\n StyledItemAddon,\n StyledItemContainer,\n StyledItemContent,\n StyledItemCustomActions,\n StyledItemHeader,\n StyledItemHeaderContainer,\n StyledItemTitles,\n StyledPrimaryTitle,\n StyledSecondaryTitle,\n} from './styles';\nimport { accordionItemPropTypes } from '../../propTypes';\nimport { useAccordionItem } from './useAccordionItem';\nimport { DSAccordionContext } from '../../DSAccordionCTX';\nimport { DSAccordionDataTestid } from '../../DSAccordionDatatestid';\nimport type { DSAccordionItemPropsT, DSAccordionItemPropsWithDefaultsT } from '../../DSAccordionTypes';\n\nconst DSAccordionItem = (props: DSAccordionItemPropsT): JSX.Element => {\n const propsWithDefaults = useMemoMergePropsWithDefault(\n props,\n accordionItemDefaultProps,\n ) as DSAccordionItemPropsWithDefaultsT;\n\n const {\n children,\n title,\n secondaryTitle,\n customActions,\n iconOpened: IconOpened,\n iconClosed: IconClosed,\n value,\n disabled,\n dsIndex,\n renderCustomActions,\n } = propsWithDefaults;\n\n const { handleOnClick, handleOnKeyDown, selected } = useAccordionItem({ value, disabled });\n const {\n allChildrenReferences,\n actualActiveValue,\n props: { isDSMobile },\n } = useContext(DSAccordionContext);\n\n const onKeyDownWithIndex = useCallback(\n (e: React.KeyboardEvent) => {\n handleOnKeyDown(e, dsIndex);\n },\n [dsIndex, handleOnKeyDown],\n );\n\n const [showPopover, setShowPopover] = useState(false);\n const [referenceElement, setReferenceElement] = useState();\n\n const CustomActionsContent = useMemo(() => {\n if (!isDSMobile && customActions?.length > 0)\n return (\n <StyledItemCustomActions>\n {customActions?.map(({ onClick, id, ...rest }) => (\n <DSButton\n key={id}\n onClick={(e: React.MouseEvent) => {\n e.stopPropagation();\n if (onClick) onClick(e);\n }}\n {...rest}\n buttonType={BUTTON_TYPE.SECONDARY}\n />\n ))}\n </StyledItemCustomActions>\n );\n\n if (!isDSMobile && renderCustomActions)\n return (\n <StyledItemCustomActions>\n {renderCustomActions({ allRefs: allChildrenReferences, actualActiveValue })}\n </StyledItemCustomActions>\n );\n return null;\n }, [actualActiveValue, allChildrenReferences, customActions, isDSMobile, renderCustomActions]);\n\n const { isShowingEllipsis: isPrimaryShowingEllipsis, setElement: setPrimaryElement } = useIsShowingEllipsis();\n\n const { isShowingEllipsis: isSecondaryShowingEllipsis, setElement: setSecondaryElement } = useIsShowingEllipsis();\n\n const handleOnFocus = useCallback(\n () => setShowPopover(isPrimaryShowingEllipsis || isSecondaryShowingEllipsis),\n [isPrimaryShowingEllipsis, isSecondaryShowingEllipsis],\n );\n\n const handleOnBlur = useCallback(() => setShowPopover(false), []);\n\n const Titles = useMemo(() => {\n if (isPrimaryShowingEllipsis || isSecondaryShowingEllipsis)\n return (\n <>\n <StyledPrimaryTitle\n ref={setPrimaryElement}\n id={`accordion_${title}id`}\n disabled={disabled}\n isDSMobile={isDSMobile}\n >\n {title}\n </StyledPrimaryTitle>\n {!isDSMobile && secondaryTitle && (\n <StyledSecondaryTitle ref={setSecondaryElement} disabled={disabled}>\n {secondaryTitle}\n </StyledSecondaryTitle>\n )}\n <DSPopperJS referenceElement={referenceElement} showPopover={showPopover}>\n <div style={{ maxWidth: 260, padding: 8, background: 'white', display: 'grid', gap: 8 }}>\n <p style={{ margin: 0 }}>{title}</p>\n <p style={{ margin: 0 }}> {secondaryTitle}</p>\n </div>\n </DSPopperJS>\n </>\n );\n\n return (\n <>\n <StyledPrimaryTitle\n ref={setPrimaryElement}\n id={`accordion_${title}id`}\n disabled={disabled}\n isDSMobile={isDSMobile}\n >\n {title}\n </StyledPrimaryTitle>\n {!isDSMobile && secondaryTitle && (\n <StyledSecondaryTitle ref={setSecondaryElement} disabled={disabled}>\n {secondaryTitle}\n </StyledSecondaryTitle>\n )}\n </>\n );\n }, [\n disabled,\n isDSMobile,\n isPrimaryShowingEllipsis,\n isSecondaryShowingEllipsis,\n referenceElement,\n secondaryTitle,\n setPrimaryElement,\n setSecondaryElement,\n showPopover,\n title,\n ]);\n\n return (\n <StyledItemContainer data-testid={DSAccordionDataTestid.ITEM.CONTAINER}>\n <StyledItemHeaderContainer disabled={disabled}>\n <StyledItemHeader\n withCustomActions={(customActions?.length > 0 || renderCustomActions !== undefined) && !isDSMobile}\n withSecondaryTitle={secondaryTitle}\n onClick={handleOnClick}\n tabIndex={!disabled ? 0 : undefined}\n disabled={disabled}\n data-disabled={disabled}\n ref={allChildrenReferences[dsIndex]}\n onKeyDown={onKeyDownWithIndex}\n isDSMobile={isDSMobile}\n data-testid={DSAccordionDataTestid.ITEM.HEADER}\n id={`ds-accordion-header-${value}`}\n aria-expanded={selected}\n aria-disabled={disabled}\n aria-controls={`ds-accordion-content-${value}`}\n onFocus={handleOnFocus}\n onBlur={handleOnBlur}\n >\n <StyledItemAddon disabled={disabled} isDSMobile={isDSMobile}>\n {selected ? <IconOpened isDSMobile={isDSMobile} /> : <IconClosed isDSMobile={isDSMobile} />}\n </StyledItemAddon>\n <StyledItemTitles\n onMouseEnter={handleOnFocus}\n onMouseLeave={handleOnBlur}\n isDSMobile={isDSMobile}\n ref={setReferenceElement}\n >\n {Titles}\n </StyledItemTitles>\n </StyledItemHeader>\n {CustomActionsContent}\n </StyledItemHeaderContainer>\n {selected && (\n <StyledItemContent\n data-testid={DSAccordionDataTestid.ITEM.CONTENT}\n aria-labelledby={`ds-accordion-header-${value}`}\n role=\"region\"\n isDSMobile={isDSMobile}\n id={`ds-accordion-content-${value}`}\n >\n {children}\n </StyledItemContent>\n )}\n </StyledItemContainer>\n );\n};\n\nDSAccordionItem.propTypes = accordionItemPropTypes;\n\nconst DSAccordionItemWithSchema = describe(DSAccordionItem);\nDSAccordionItemWithSchema.propTypes = accordionItemPropTypes;\n\nexport { DSAccordionItem, DSAccordionItemWithSchema };\nexport default DSAccordionItem;\n"],
|
|
5
|
-
"mappings": "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",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|