@elliemae/ds-accordion 2.2.1 → 2.3.0-alpha.4

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.
Files changed (56) hide show
  1. package/cjs/DSAccordion.js +50 -29
  2. package/cjs/DSAccordion.js.map +7 -0
  3. package/cjs/DSAccordionCTX.js +40 -14
  4. package/cjs/DSAccordionCTX.js.map +7 -0
  5. package/cjs/DSAccordionDatatestid.js +38 -10
  6. package/cjs/DSAccordionDatatestid.js.map +7 -0
  7. package/cjs/DSAccordionTypes.js +27 -2
  8. package/cjs/DSAccordionTypes.js.map +7 -0
  9. package/cjs/config/useAccordion.js +59 -36
  10. package/cjs/config/useAccordion.js.map +7 -0
  11. package/cjs/config/useAccordionRefs.js +46 -39
  12. package/cjs/config/useAccordionRefs.js.map +7 -0
  13. package/cjs/defaultProps.js +49 -39
  14. package/cjs/defaultProps.js.map +7 -0
  15. package/cjs/index.js +37 -14
  16. package/cjs/index.js.map +7 -0
  17. package/cjs/parts/accordionContent/AccordionContent.js +44 -35
  18. package/cjs/parts/accordionContent/AccordionContent.js.map +7 -0
  19. package/cjs/parts/accordionItem/DSAccordionItem.js +147 -174
  20. package/cjs/parts/accordionItem/DSAccordionItem.js.map +7 -0
  21. package/cjs/parts/accordionItem/styles.js +138 -144
  22. package/cjs/parts/accordionItem/styles.js.map +7 -0
  23. package/cjs/parts/accordionItem/useAccordionItem.js +52 -39
  24. package/cjs/parts/accordionItem/useAccordionItem.js.map +7 -0
  25. package/cjs/propTypes.js +53 -22
  26. package/cjs/propTypes.js.map +7 -0
  27. package/esm/DSAccordion.js +18 -16
  28. package/esm/DSAccordion.js.map +7 -0
  29. package/esm/DSAccordionCTX.js +10 -9
  30. package/esm/DSAccordionCTX.js.map +7 -0
  31. package/esm/DSAccordionDatatestid.js +9 -6
  32. package/esm/DSAccordionDatatestid.js.map +7 -0
  33. package/esm/DSAccordionTypes.js +2 -1
  34. package/esm/DSAccordionTypes.js.map +7 -0
  35. package/esm/config/useAccordion.js +25 -27
  36. package/esm/config/useAccordion.js.map +7 -0
  37. package/esm/config/useAccordionRefs.js +17 -31
  38. package/esm/config/useAccordionRefs.js.map +7 -0
  39. package/esm/defaultProps.js +21 -31
  40. package/esm/defaultProps.js.map +7 -0
  41. package/esm/index.js +8 -2
  42. package/esm/index.js.map +7 -0
  43. package/esm/parts/accordionContent/AccordionContent.js +14 -25
  44. package/esm/parts/accordionContent/AccordionContent.js.map +7 -0
  45. package/esm/parts/accordionItem/DSAccordionItem.js +114 -147
  46. package/esm/parts/accordionItem/DSAccordionItem.js.map +7 -0
  47. package/esm/parts/accordionItem/styles.js +112 -131
  48. package/esm/parts/accordionItem/styles.js.map +7 -0
  49. package/esm/parts/accordionItem/useAccordionItem.js +21 -33
  50. package/esm/parts/accordionItem/useAccordionItem.js.map +7 -0
  51. package/esm/propTypes.js +24 -17
  52. package/esm/propTypes.js.map +7 -0
  53. package/package.json +7 -11
  54. package/cjs/parts/accordionItem/useIsShowingEllipsis.js +0 -37
  55. package/esm/parts/accordionItem/useIsShowingEllipsis.js +0 -33
  56. package/types/parts/accordionItem/useIsShowingEllipsis.d.ts +0 -5
@@ -0,0 +1,7 @@
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 +1,2 @@
1
-
1
+ import * as React from "react";
2
+ //# sourceMappingURL=DSAccordionTypes.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../../scripts/build/transpile/react-shim.js"],
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": "AAAA;",
6
+ "names": []
7
+ }
@@ -1,35 +1,31 @@
1
- import 'core-js/modules/web.dom-collections.iterator.js';
2
- import 'core-js/modules/esnext.async-iterator.some.js';
3
- import 'core-js/modules/esnext.iterator.constructor.js';
4
- import 'core-js/modules/esnext.iterator.some.js';
5
- import 'core-js/modules/esnext.async-iterator.filter.js';
6
- import 'core-js/modules/esnext.iterator.filter.js';
7
- import { useState, useMemo, useCallback } from 'react';
8
- import { useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';
9
- import { useAccordionRefs } from './useAccordionRefs.js';
10
- import { defaultProps } from '../defaultProps.js';
11
-
12
- const useAccordion = props => {
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) => {
13
7
  const propsWithDefaults = useMemoMergePropsWithDefault(props, defaultProps);
14
- const {
15
- activeValue,
16
- allowMultipleOpen,
17
- onChange
18
- } = propsWithDefaults;
19
- const {
20
- focusableChildrenReferences,
21
- allChildrenReferences
22
- } = useAccordionRefs(propsWithDefaults);
8
+ const { activeValue, allowMultipleOpen, onChange } = propsWithDefaults;
9
+ const { focusableChildrenReferences, allChildrenReferences } = useAccordionRefs(propsWithDefaults);
23
10
  const [internalActiveValue, setInternalActiveValue] = useState(activeValue);
24
11
  const actualActiveValue = useMemo(() => {
25
- if (activeValue === undefined) return internalActiveValue;
12
+ if (activeValue === void 0)
13
+ return internalActiveValue;
26
14
  return activeValue;
27
15
  }, [activeValue, internalActiveValue]);
28
16
  const setActiveValues = useCallback((value, e) => {
29
17
  let newState;
30
- if (allowMultipleOpen && (actualActiveValue === undefined || actualActiveValue === null)) newState = [value];else if (allowMultipleOpen && Array.isArray(actualActiveValue)) {
31
- if (!actualActiveValue.some(currentValues => currentValues === value)) newState = [...actualActiveValue, value];else newState = actualActiveValue.filter(currentValues => currentValues !== value);
32
- } else if (actualActiveValue === value) newState = null;else newState = value;
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;
33
29
  setInternalActiveValue(newState);
34
30
  return onChange(newState, e);
35
31
  }, [actualActiveValue, allowMultipleOpen, onChange]);
@@ -42,5 +38,7 @@ const useAccordion = props => {
42
38
  }), [actualActiveValue, allChildrenReferences, focusableChildrenReferences, propsWithDefaults, setActiveValues]);
43
39
  return ctx;
44
40
  };
45
-
46
- export { useAccordion };
41
+ export {
42
+ useAccordion
43
+ };
44
+ //# sourceMappingURL=useAccordion.js.map
@@ -0,0 +1,7 @@
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,32 +1,18 @@
1
- import 'core-js/modules/esnext.async-iterator.map.js';
2
- import 'core-js/modules/esnext.iterator.map.js';
3
- import React, { useMemo } from 'react';
4
-
5
- const useAccordionRefs = _ref => {
6
- let {
7
- children
8
- } = _ref;
9
- return useMemo(() => {
10
- const focusableChildrenReferences = [];
11
- const allChildrenReferences = {};
12
- React.Children.map(children, (child, index) => {
13
- const {
14
- value,
15
- disabled
16
- } = child.props;
17
- const currentRef = /*#__PURE__*/React.createRef();
18
- allChildrenReferences[index] = currentRef;
19
- if (!disabled) focusableChildrenReferences.push({
20
- index,
21
- value,
22
- ref: currentRef
23
- });
24
- });
25
- return {
26
- focusableChildrenReferences,
27
- allChildrenReferences
28
- };
29
- }, [children]);
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
30
17
  };
31
-
32
- export { useAccordionRefs };
18
+ //# sourceMappingURL=useAccordionRefs.js.map
@@ -0,0 +1,7 @@
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
+ }
@@ -1,31 +1,18 @@
1
- import _jsx2 from '@babel/runtime/helpers/esm/jsx';
2
- import { memo } from 'react';
3
- import { ChevronRight, ArrowheadRight, ChevronDown, ArrowheadDown } from '@elliemae/ds-icons';
4
-
5
- var _ChevronRight, _ArrowheadRight, _ChevronDown, _ArrowheadDown;
6
- const DefaultIconClosed = /*#__PURE__*/memo(_ref => {
7
- let {
8
- isDSMobile = false
9
- } = _ref;
10
- return isDSMobile ? _ChevronRight || (_ChevronRight = /*#__PURE__*/_jsx2(ChevronRight, {
11
- width: "20px"
12
- })) : _ArrowheadRight || (_ArrowheadRight = /*#__PURE__*/_jsx2(ArrowheadRight, {
13
- width: "20px"
14
- }));
15
- });
16
- const DefaultIconOpen = /*#__PURE__*/memo(_ref2 => {
17
- let {
18
- isDSMobile = false
19
- } = _ref2;
20
- return isDSMobile ? _ChevronDown || (_ChevronDown = /*#__PURE__*/_jsx2(ChevronDown, {
21
- width: "20px"
22
- })) : _ArrowheadDown || (_ArrowheadDown = /*#__PURE__*/_jsx2(ArrowheadDown, {
23
- width: "20px"
24
- }));
25
- }); // eslint-disable-next-line @typescript-eslint/no-empty-function
26
-
27
- const noop = () => {};
28
-
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
+ };
29
16
  const defaultProps = {
30
17
  containerProps: {},
31
18
  allowMultipleOpen: false,
@@ -37,9 +24,12 @@ const defaultProps = {
37
24
  const accordionItemDefaultProps = {
38
25
  iconClosed: DefaultIconClosed,
39
26
  iconOpened: DefaultIconOpen,
40
- title: '',
27
+ title: "",
41
28
  customActions: [],
42
29
  disabled: false
43
30
  };
44
-
45
- export { accordionItemDefaultProps, defaultProps };
31
+ export {
32
+ accordionItemDefaultProps,
33
+ defaultProps
34
+ };
35
+ //# sourceMappingURL=defaultProps.js.map
@@ -0,0 +1,7 @@
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/esm/index.js CHANGED
@@ -1,2 +1,8 @@
1
- export { DSAccordion, DSAccordionWithSchema, DSAccordion as default } from './DSAccordion.js';
2
- export { DSAccordionItem, DSAccordionItemWithSchema } from './parts/accordionItem/DSAccordionItem.js';
1
+ import * as React from "react";
2
+ export * from "./DSAccordion";
3
+ export * from "./parts/accordionItem/DSAccordionItem";
4
+ import { default as default2 } from "./DSAccordion";
5
+ export {
6
+ default2 as default
7
+ };
8
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1,7 @@
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,32 +1,21 @@
1
- import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
2
- import 'core-js/modules/esnext.async-iterator.for-each.js';
3
- import 'core-js/modules/esnext.iterator.constructor.js';
4
- import 'core-js/modules/esnext.iterator.for-each.js';
5
- import 'core-js/modules/esnext.async-iterator.filter.js';
6
- import 'core-js/modules/esnext.iterator.filter.js';
7
- import React, { useContext } from 'react';
8
- import { DSAccordionContext } from '../../DSAccordionCTX.js';
9
- import { DSAccordionDataTestid } from '../../DSAccordionDatatestid.js';
10
- import { jsx } from 'react/jsx-runtime';
11
-
12
- function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
13
-
14
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
1
+ import * as React from "react";
2
+ import React2, { useContext } from "react";
3
+ import { DSAccordionContext } from "../../DSAccordionCTX";
4
+ import { DSAccordionDataTestid } from "../../DSAccordionDatatestid";
15
5
  const AccordionContent = () => {
16
6
  const {
17
- props: {
18
- containerProps,
19
- children
20
- }
7
+ props: { containerProps, children }
21
8
  } = useContext(DSAccordionContext);
22
9
  const childrenWithIndex = [];
23
- React.Children.forEach(children, (child, index) => childrenWithIndex.push( /*#__PURE__*/React.cloneElement(child, {
10
+ React2.Children.forEach(children, (child, index) => childrenWithIndex.push(React2.cloneElement(child, {
24
11
  dsIndex: index
25
12
  })));
26
- return /*#__PURE__*/jsx("div", _objectSpread(_objectSpread({}, containerProps), {}, {
27
- "data-testid": DSAccordionDataTestid.GROUP,
28
- children: childrenWithIndex
29
- }));
13
+ return /* @__PURE__ */ React2.createElement("div", {
14
+ ...containerProps,
15
+ "data-testid": DSAccordionDataTestid.GROUP
16
+ }, childrenWithIndex);
30
17
  };
31
-
32
- export { AccordionContent };
18
+ export {
19
+ AccordionContent
20
+ };
21
+ //# sourceMappingURL=AccordionContent.js.map
@@ -0,0 +1,7 @@
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,35 +1,27 @@
1
- import _jsx2 from '@babel/runtime/helpers/esm/jsx';
2
- import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
3
- import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
4
- import 'core-js/modules/web.dom-collections.iterator.js';
5
- import 'core-js/modules/esnext.async-iterator.map.js';
6
- import 'core-js/modules/esnext.iterator.map.js';
7
- import 'core-js/modules/esnext.async-iterator.filter.js';
8
- import 'core-js/modules/esnext.iterator.constructor.js';
9
- import 'core-js/modules/esnext.iterator.filter.js';
10
- import 'core-js/modules/esnext.async-iterator.for-each.js';
11
- import 'core-js/modules/esnext.iterator.for-each.js';
12
- import { useContext, useCallback, useState, useMemo } from 'react';
13
- import { describe } from 'react-desc';
14
- import { useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';
15
- import DSButton, { BUTTON_TYPE } from '@elliemae/ds-button';
16
- import { DSPopperJS } from '@elliemae/ds-popperjs';
17
- import { accordionItemDefaultProps } from '../../defaultProps.js';
18
- import { StyledItemCustomActions, StyledPrimaryTitle, StyledSecondaryTitle, StyledItemContainer, StyledItemHeaderContainer, StyledItemHeader, StyledItemAddon, StyledItemTitles, StyledItemContent } from './styles.js';
19
- import { accordionItemPropTypes } from '../../propTypes.js';
20
- import { useAccordionItem } from './useAccordionItem.js';
21
- import { DSAccordionContext } from '../../DSAccordionCTX.js';
22
- import { DSAccordionDataTestid } from '../../DSAccordionDatatestid.js';
23
- import { useIsShowingEllipsis } from './useIsShowingEllipsis.js';
24
- import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
25
-
26
- const _excluded = ["onClick", "id"];
27
-
28
- function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
29
-
30
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
31
-
32
- const DSAccordionItem = props => {
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) => {
33
25
  const propsWithDefaults = useMemoMergePropsWithDefault(props, accordionItemDefaultProps);
34
26
  const {
35
27
  children,
@@ -43,151 +35,126 @@ const DSAccordionItem = props => {
43
35
  dsIndex,
44
36
  renderCustomActions
45
37
  } = propsWithDefaults;
46
- const {
47
- handleOnClick,
48
- handleOnKeyDown,
49
- selected
50
- } = useAccordionItem({
51
- value,
52
- disabled
53
- });
38
+ const { handleOnClick, handleOnKeyDown, selected } = useAccordionItem({ value, disabled });
54
39
  const {
55
40
  allChildrenReferences,
56
41
  actualActiveValue,
57
- props: {
58
- isDSMobile
59
- }
42
+ props: { isDSMobile }
60
43
  } = useContext(DSAccordionContext);
61
- const onKeyDownWithIndex = useCallback(e => {
44
+ const onKeyDownWithIndex = useCallback((e) => {
62
45
  handleOnKeyDown(e, dsIndex);
63
46
  }, [dsIndex, handleOnKeyDown]);
64
47
  const [showPopover, setShowPopover] = useState(false);
65
48
  const [referenceElement, setReferenceElement] = useState();
66
49
  const CustomActionsContent = useMemo(() => {
67
- if (!isDSMobile && (customActions === null || customActions === void 0 ? void 0 : customActions.length) > 0) return /*#__PURE__*/_jsx2(StyledItemCustomActions, {}, void 0, customActions === null || customActions === void 0 ? void 0 : customActions.map(_ref => {
68
- let {
69
- onClick,
70
- id
71
- } = _ref,
72
- rest = _objectWithoutProperties(_ref, _excluded);
73
-
74
- return /*#__PURE__*/jsx(DSButton, _objectSpread(_objectSpread({
75
- onClick: e => {
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) => {
76
54
  e.stopPropagation();
77
- if (onClick) onClick(e);
78
- }
79
- }, rest), {}, {
55
+ if (onClick)
56
+ onClick(e);
57
+ },
58
+ ...rest,
80
59
  buttonType: BUTTON_TYPE.SECONDARY
81
- }), id);
82
- }));
83
- if (!isDSMobile && renderCustomActions) return /*#__PURE__*/_jsx2(StyledItemCustomActions, {}, void 0, renderCustomActions({
84
- allRefs: allChildrenReferences,
85
- actualActiveValue
86
- }));
60
+ })));
61
+ if (!isDSMobile && renderCustomActions)
62
+ return /* @__PURE__ */ React2.createElement(StyledItemCustomActions, null, renderCustomActions({ allRefs: allChildrenReferences, actualActiveValue }));
87
63
  return null;
88
64
  }, [actualActiveValue, allChildrenReferences, customActions, isDSMobile, renderCustomActions]);
89
- const {
90
- isShowingEllipsis: isPrimaryShowingEllipsis,
91
- setElement: setPrimaryElement
92
- } = useIsShowingEllipsis();
93
- const {
94
- isShowingEllipsis: isSecondaryShowingEllipsis,
95
- setElement: setSecondaryElement
96
- } = useIsShowingEllipsis();
65
+ const { isShowingEllipsis: isPrimaryShowingEllipsis, setElement: setPrimaryElement } = useIsShowingEllipsis();
66
+ const { isShowingEllipsis: isSecondaryShowingEllipsis, setElement: setSecondaryElement } = useIsShowingEllipsis();
97
67
  const handleOnFocus = useCallback(() => setShowPopover(isPrimaryShowingEllipsis || isSecondaryShowingEllipsis), [isPrimaryShowingEllipsis, isSecondaryShowingEllipsis]);
98
68
  const handleOnBlur = useCallback(() => setShowPopover(false), []);
99
69
  const Titles = useMemo(() => {
100
- if (isPrimaryShowingEllipsis || isSecondaryShowingEllipsis) return /*#__PURE__*/jsxs(Fragment, {
101
- children: [/*#__PURE__*/jsx(StyledPrimaryTitle, {
102
- ref: setPrimaryElement,
103
- id: "accordion_".concat(title, "id"),
104
- disabled: disabled,
105
- isDSMobile: isDSMobile,
106
- children: title
107
- }), !isDSMobile && secondaryTitle && /*#__PURE__*/jsx(StyledSecondaryTitle, {
108
- ref: setSecondaryElement,
109
- disabled: disabled,
110
- children: secondaryTitle
111
- }), /*#__PURE__*/_jsx2(DSPopperJS, {
112
- referenceElement: referenceElement,
113
- showPopover: showPopover
114
- }, void 0, /*#__PURE__*/_jsx2("div", {
115
- style: {
116
- maxWidth: 260,
117
- padding: 8,
118
- background: 'white',
119
- display: 'grid',
120
- gap: 8
121
- }
122
- }, void 0, /*#__PURE__*/_jsx2("p", {
123
- style: {
124
- margin: 0
125
- }
126
- }, void 0, title), /*#__PURE__*/_jsx2("p", {
127
- style: {
128
- margin: 0
129
- }
130
- }, void 0, " ", secondaryTitle)))]
131
- });
132
- return /*#__PURE__*/jsxs(Fragment, {
133
- children: [/*#__PURE__*/jsx(StyledPrimaryTitle, {
70
+ if (isPrimaryShowingEllipsis || isSecondaryShowingEllipsis)
71
+ return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(StyledPrimaryTitle, {
134
72
  ref: setPrimaryElement,
135
- id: "accordion_".concat(title, "id"),
136
- disabled: disabled,
137
- isDSMobile: isDSMobile,
138
- children: title
139
- }), !isDSMobile && secondaryTitle && /*#__PURE__*/jsx(StyledSecondaryTitle, {
73
+ id: `accordion_${title}id`,
74
+ disabled,
75
+ isDSMobile
76
+ }, title), !isDSMobile && secondaryTitle && /* @__PURE__ */ React2.createElement(StyledSecondaryTitle, {
140
77
  ref: setSecondaryElement,
141
- disabled: disabled,
142
- children: secondaryTitle
143
- })]
144
- });
145
- }, [disabled, isDSMobile, isPrimaryShowingEllipsis, isSecondaryShowingEllipsis, referenceElement, secondaryTitle, setPrimaryElement, setSecondaryElement, showPopover, title]);
146
- return /*#__PURE__*/_jsx2(StyledItemContainer, {
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, {
147
111
  "data-testid": DSAccordionDataTestid.ITEM.CONTAINER
148
- }, void 0, /*#__PURE__*/_jsx2(StyledItemHeaderContainer, {
149
- disabled: disabled
150
- }, void 0, /*#__PURE__*/jsxs(StyledItemHeader, {
151
- withCustomActions: ((customActions === null || customActions === void 0 ? void 0 : customActions.length) > 0 || renderCustomActions !== undefined) && !isDSMobile,
112
+ }, /* @__PURE__ */ React2.createElement(StyledItemHeaderContainer, {
113
+ disabled
114
+ }, /* @__PURE__ */ React2.createElement(StyledItemHeader, {
115
+ withCustomActions: (customActions?.length > 0 || renderCustomActions !== void 0) && !isDSMobile,
152
116
  withSecondaryTitle: secondaryTitle,
153
117
  onClick: handleOnClick,
154
- tabIndex: !disabled ? 0 : undefined,
155
- disabled: disabled,
118
+ tabIndex: !disabled ? 0 : void 0,
119
+ disabled,
156
120
  "data-disabled": disabled,
157
121
  ref: allChildrenReferences[dsIndex],
158
122
  onKeyDown: onKeyDownWithIndex,
159
- isDSMobile: isDSMobile,
123
+ isDSMobile,
160
124
  "data-testid": DSAccordionDataTestid.ITEM.HEADER,
161
- id: "ds-accordion-header-".concat(value),
125
+ id: `ds-accordion-header-${value}`,
162
126
  "aria-expanded": selected,
163
127
  "aria-disabled": disabled,
164
- "aria-controls": "ds-accordion-content-".concat(value),
128
+ "aria-controls": `ds-accordion-content-${value}`,
165
129
  onFocus: handleOnFocus,
166
- onBlur: handleOnBlur,
167
- children: [/*#__PURE__*/_jsx2(StyledItemAddon, {
168
- disabled: disabled,
169
- isDSMobile: isDSMobile
170
- }, void 0, selected ? /*#__PURE__*/_jsx2(IconOpened, {
171
- isDSMobile: isDSMobile
172
- }) : /*#__PURE__*/_jsx2(IconClosed, {
173
- isDSMobile: isDSMobile
174
- })), /*#__PURE__*/jsx(StyledItemTitles, {
175
- onMouseEnter: handleOnFocus,
176
- onMouseLeave: handleOnBlur,
177
- isDSMobile: isDSMobile,
178
- ref: setReferenceElement,
179
- children: Titles
180
- })]
181
- }), CustomActionsContent), selected && /*#__PURE__*/_jsx2(StyledItemContent, {
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, {
182
144
  "data-testid": DSAccordionDataTestid.ITEM.CONTENT,
183
- "aria-labelledby": "ds-accordion-header-".concat(value),
145
+ "aria-labelledby": `ds-accordion-header-${value}`,
184
146
  role: "region",
185
- isDSMobile: isDSMobile,
186
- id: "ds-accordion-content-".concat(value)
187
- }, void 0, children));
147
+ isDSMobile,
148
+ id: `ds-accordion-content-${value}`
149
+ }, children));
188
150
  };
189
-
151
+ DSAccordionItem.propTypes = accordionItemPropTypes;
190
152
  const DSAccordionItemWithSchema = describe(DSAccordionItem);
191
153
  DSAccordionItemWithSchema.propTypes = accordionItemPropTypes;
192
-
193
- export { DSAccordionItem, DSAccordionItemWithSchema, DSAccordionItem as default };
154
+ var DSAccordionItem_default = DSAccordionItem;
155
+ export {
156
+ DSAccordionItem,
157
+ DSAccordionItemWithSchema,
158
+ DSAccordionItem_default as default
159
+ };
160
+ //# sourceMappingURL=DSAccordionItem.js.map