@elliemae/ds-accordion 2.3.0-alpha.8 → 2.3.0-next.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.
Files changed (93) hide show
  1. package/cjs/DSAccordion.js +31 -0
  2. package/cjs/DSAccordionCTX.js +20 -0
  3. package/cjs/DSAccordionDatatestid.js +14 -0
  4. package/cjs/DSAccordionTypes.js +2 -0
  5. package/cjs/config/useAccordion.js +50 -0
  6. package/cjs/config/useAccordionRefs.js +40 -0
  7. package/cjs/defaultProps.js +54 -0
  8. package/cjs/index.js +14 -0
  9. package/cjs/parts/accordionContent/AccordionContent.js +41 -0
  10. package/cjs/parts/accordionItem/DSAccordionItem.js +206 -0
  11. package/cjs/parts/accordionItem/styles.js +149 -0
  12. package/cjs/parts/accordionItem/useAccordionItem.js +53 -0
  13. package/cjs/propTypes.js +26 -0
  14. package/esm/DSAccordion.js +21 -0
  15. package/esm/DSAccordionCTX.js +16 -0
  16. package/esm/DSAccordionDatatestid.js +10 -0
  17. package/esm/DSAccordionTypes.js +1 -0
  18. package/esm/config/useAccordion.js +46 -0
  19. package/esm/config/useAccordionRefs.js +32 -0
  20. package/esm/defaultProps.js +45 -0
  21. package/esm/index.js +2 -0
  22. package/esm/parts/accordionContent/AccordionContent.js +32 -0
  23. package/esm/parts/accordionItem/DSAccordionItem.js +193 -0
  24. package/esm/parts/accordionItem/styles.js +133 -0
  25. package/esm/parts/accordionItem/useAccordionItem.js +49 -0
  26. package/esm/propTypes.js +21 -0
  27. package/package.json +47 -52
  28. package/types/DSAccordion.d.ts +45 -0
  29. package/types/DSAccordionCTX.d.ts +3 -0
  30. package/types/DSAccordionDatatestid.d.ts +8 -0
  31. package/types/DSAccordionTypes.d.ts +137 -0
  32. package/types/config/useAccordion.d.ts +2 -0
  33. package/types/config/useAccordionRefs.d.ts +2 -0
  34. package/types/defaultProps.d.ts +3 -0
  35. package/types/index.d.ts +4 -0
  36. package/types/parts/accordionContent/AccordionContent.d.ts +2 -0
  37. package/types/parts/accordionItem/DSAccordionItem.d.ts +53 -0
  38. package/types/parts/accordionItem/styles.d.ts +10 -0
  39. package/types/parts/accordionItem/useAccordionItem.d.ts +2 -0
  40. package/types/propTypes.d.ts +73 -0
  41. package/types/tests/Accordion.test.d.ts +1 -0
  42. package/dist/cjs/DSAccordion.js +0 -52
  43. package/dist/cjs/DSAccordion.js.map +0 -7
  44. package/dist/cjs/DSAccordionCTX.js +0 -46
  45. package/dist/cjs/DSAccordionCTX.js.map +0 -7
  46. package/dist/cjs/DSAccordionDatatestid.js +0 -42
  47. package/dist/cjs/DSAccordionDatatestid.js.map +0 -7
  48. package/dist/cjs/DSAccordionTypes.js +0 -27
  49. package/dist/cjs/DSAccordionTypes.js.map +0 -7
  50. package/dist/cjs/config/useAccordion.js +0 -73
  51. package/dist/cjs/config/useAccordion.js.map +0 -7
  52. package/dist/cjs/config/useAccordionRefs.js +0 -47
  53. package/dist/cjs/config/useAccordionRefs.js.map +0 -7
  54. package/dist/cjs/defaultProps.js +0 -64
  55. package/dist/cjs/defaultProps.js.map +0 -7
  56. package/dist/cjs/index.js +0 -37
  57. package/dist/cjs/index.js.map +0 -7
  58. package/dist/cjs/parts/accordionContent/AccordionContent.js +0 -50
  59. package/dist/cjs/parts/accordionContent/AccordionContent.js.map +0 -7
  60. package/dist/cjs/parts/accordionItem/DSAccordionItem.js +0 -179
  61. package/dist/cjs/parts/accordionItem/DSAccordionItem.js.map +0 -7
  62. package/dist/cjs/parts/accordionItem/styles.js +0 -143
  63. package/dist/cjs/parts/accordionItem/styles.js.map +0 -7
  64. package/dist/cjs/parts/accordionItem/useAccordionItem.js +0 -66
  65. package/dist/cjs/parts/accordionItem/useAccordionItem.js.map +0 -7
  66. package/dist/cjs/propTypes.js +0 -57
  67. package/dist/cjs/propTypes.js.map +0 -7
  68. package/dist/esm/DSAccordion.js +0 -23
  69. package/dist/esm/DSAccordion.js.map +0 -7
  70. package/dist/esm/DSAccordionCTX.js +0 -17
  71. package/dist/esm/DSAccordionCTX.js.map +0 -7
  72. package/dist/esm/DSAccordionDatatestid.js +0 -13
  73. package/dist/esm/DSAccordionDatatestid.js.map +0 -7
  74. package/dist/esm/DSAccordionTypes.js +0 -2
  75. package/dist/esm/DSAccordionTypes.js.map +0 -7
  76. package/dist/esm/config/useAccordion.js +0 -44
  77. package/dist/esm/config/useAccordion.js.map +0 -7
  78. package/dist/esm/config/useAccordionRefs.js +0 -18
  79. package/dist/esm/config/useAccordionRefs.js.map +0 -7
  80. package/dist/esm/defaultProps.js +0 -35
  81. package/dist/esm/defaultProps.js.map +0 -7
  82. package/dist/esm/index.js +0 -8
  83. package/dist/esm/index.js.map +0 -7
  84. package/dist/esm/parts/accordionContent/AccordionContent.js +0 -21
  85. package/dist/esm/parts/accordionContent/AccordionContent.js.map +0 -7
  86. package/dist/esm/parts/accordionItem/DSAccordionItem.js +0 -160
  87. package/dist/esm/parts/accordionItem/DSAccordionItem.js.map +0 -7
  88. package/dist/esm/parts/accordionItem/styles.js +0 -114
  89. package/dist/esm/parts/accordionItem/styles.js.map +0 -7
  90. package/dist/esm/parts/accordionItem/useAccordionItem.js +0 -37
  91. package/dist/esm/parts/accordionItem/useAccordionItem.js.map +0 -7
  92. package/dist/esm/propTypes.js +0 -28
  93. package/dist/esm/propTypes.js.map +0 -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
- }
@@ -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
@@ -1,8 +0,0 @@
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
@@ -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
- }
@@ -1,114 +0,0 @@
1
- import * as React from "react";
2
- import styled from "styled-components";
3
- const StyledItemContainer = styled.div`
4
- display: grid;
5
- grid-template-rows: auto auto;
6
- border-bottom: 1px solid ${({ theme }) => theme.colors.neutral[200]};
7
- align-items: center;
8
- `;
9
- const StyledItemHeader = styled.button`
10
- display: flex;
11
- height: ${({ theme, withSecondaryTitle }) => withSecondaryTitle ? theme.space.m : theme.space.s};
12
- width: 100%;
13
- align-items: center;
14
- border: none;
15
- outline: none;
16
- background: none;
17
-
18
- &:hover {
19
- cursor: ${({ disabled }) => disabled ? "not-allowed" : "pointer"};
20
- }
21
-
22
- padding: ${({ isDSMobile }) => isDSMobile ? `0 16px` : `0`};
23
-
24
- ${({ isDSMobile }) => isDSMobile ? `flex-direction: row-reverse;` : ``}
25
-
26
- &:focus {
27
- &:after {
28
- position: absolute;
29
- content: '';
30
- left: 0;
31
- top: 0;
32
- width: 100%;
33
- height: 100%;
34
- border-radius: 2px;
35
- border: 2px solid ${({ theme }) => theme.colors.brand[700]};
36
- pointer-events: none;
37
- }
38
- }
39
- `;
40
- const StyledItemContent = styled.div`
41
- margin: ${({ isDSMobile }) => isDSMobile ? `16px 16px 24px 16px` : `16px 16px 16px 32px`};
42
- grid-column: 1/2;
43
- `;
44
- const StyledItemAddon = styled.div`
45
- ${({ theme, isDSMobile }) => !isDSMobile ? `padding: 0 ${theme.space.xxs};` : ``}
46
- height: 100%;
47
- width: ${({ theme }) => theme.space.s};
48
- display: grid;
49
- place-items: center;
50
-
51
- & .em-ds-icon svg {
52
- fill: ${({ disabled, theme }) => disabled ? theme.colors.neutral[200] : theme.colors.brand[800]};
53
- }
54
- `;
55
- const StyledItemTitles = styled.div`
56
- display: grid;
57
- grid-template-columns: 100%;
58
- width: 100%;
59
- align-content: center;
60
- `;
61
- const StyledPrimaryTitle = styled.div`
62
- margin: 0;
63
- font-size: 16px;
64
- color: ${({ disabled, theme }) => disabled ? theme.colors.neutral[200] : theme.colors.neutral[700]};
65
- font-weight: ${({ theme, isDSMobile }) => isDSMobile ? theme.fontWeights.regular : theme.fontWeights.regular};
66
- text-overflow: ellipsis;
67
- overflow: hidden;
68
- height: ${({ theme }) => theme.space.xs};
69
- width: 100%;
70
- text-align: left;
71
- display: block;
72
- white-space: nowrap;
73
- `;
74
- const StyledSecondaryTitle = styled.span`
75
- margin: 0;
76
- font-size: ${({ theme }) => theme.fontSizes.label[200]};
77
- text-align: left;
78
- color: ${({ disabled, theme }) => disabled ? theme.colors.neutral[200] : theme.colors.neutral[500]};
79
- text-overflow: ellipsis;
80
- overflow: hidden;
81
- height: ${({ theme }) => theme.space.xs};
82
- width: 100%;
83
- text-align: left;
84
- display: block;
85
- white-space: nowrap;
86
- `;
87
- const StyledItemCustomActions = styled.div`
88
- display: grid;
89
- grid-auto-flow: column;
90
- grid-gap: ${({ theme }) => theme.space.xxs};
91
- margin: 0 ${({ theme }) => theme.space.xs};
92
- justify-content: flex-end;
93
- `;
94
- const StyledItemHeaderContainer = styled.div`
95
- display: grid;
96
- grid-template-columns: auto max-content;
97
- place-items: center;
98
- position: relative;
99
- &:hover {
100
- ${({ disabled, theme }) => !disabled ? `background: ${theme.colors.brand[200]};` : ``}
101
- }
102
- `;
103
- export {
104
- StyledItemAddon,
105
- StyledItemContainer,
106
- StyledItemContent,
107
- StyledItemCustomActions,
108
- StyledItemHeader,
109
- StyledItemHeaderContainer,
110
- StyledItemTitles,
111
- StyledPrimaryTitle,
112
- StyledSecondaryTitle
113
- };
114
- //# sourceMappingURL=styles.js.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/accordionItem/styles.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import styled from 'styled-components';\nimport type {\n StyledItemAddonPropsT,\n StyledItemHeaderPropsT,\n StyledItemTitlesPropsT,\n StyledPrimaryTitlePropsT,\n StyledSecondaryTitlePropsT,\n StyledItemContentPropsT,\n StyledItemHeaderContainerPropsT,\n} from '../../DSAccordionTypes';\n\nexport const StyledItemContainer = styled.div`\n display: grid;\n grid-template-rows: auto auto;\n border-bottom: 1px solid ${({ theme }) => theme.colors.neutral[200]};\n align-items: center;\n`;\n\nexport const StyledItemHeader = styled.button<StyledItemHeaderPropsT>`\n display: flex;\n height: ${({ theme, withSecondaryTitle }) => (withSecondaryTitle ? theme.space.m : theme.space.s)};\n width: 100%;\n align-items: center;\n border: none;\n outline: none;\n background: none;\n\n &:hover {\n cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};\n }\n\n padding: ${({ isDSMobile }) => (isDSMobile ? `0 16px` : `0`)};\n\n ${({ isDSMobile }) => (isDSMobile ? `flex-direction: row-reverse;` : ``)}\n\n &:focus {\n &:after {\n position: absolute;\n content: '';\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n border-radius: 2px;\n border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n pointer-events: none;\n }\n }\n`;\n\nexport const StyledItemContent = styled.div<StyledItemContentPropsT>`\n margin: ${({ isDSMobile }) => (isDSMobile ? `16px 16px 24px 16px` : `16px 16px 16px 32px`)};\n grid-column: 1/2;\n`;\n\nexport const StyledItemAddon = styled.div<StyledItemAddonPropsT>`\n ${({ theme, isDSMobile }) => (!isDSMobile ? `padding: 0 ${theme.space.xxs};` : ``)}\n height: 100%;\n width: ${({ theme }) => theme.space.s};\n display: grid;\n place-items: center;\n\n & .em-ds-icon svg {\n fill: ${({ disabled, theme }) => (disabled ? theme.colors.neutral[200] : theme.colors.brand[800])};\n }\n`;\n\nexport const StyledItemTitles = styled.div<StyledItemTitlesPropsT>`\n display: grid;\n grid-template-columns: 100%;\n width: 100%;\n align-content: center;\n`;\n\nexport const StyledPrimaryTitle = styled.div<StyledPrimaryTitlePropsT>`\n margin: 0;\n font-size: 16px;\n color: ${({ disabled, theme }) => (disabled ? theme.colors.neutral[200] : theme.colors.neutral[700])};\n font-weight: ${({ theme, isDSMobile }) => (isDSMobile ? theme.fontWeights.regular : theme.fontWeights.regular)};\n text-overflow: ellipsis;\n overflow: hidden;\n height: ${({ theme }) => theme.space.xs};\n width: 100%;\n text-align: left;\n display: block;\n white-space: nowrap;\n`;\n\nexport const StyledSecondaryTitle = styled.span<StyledSecondaryTitlePropsT>`\n margin: 0;\n font-size: ${({ theme }) => theme.fontSizes.label[200]};\n text-align: left;\n color: ${({ disabled, theme }) => (disabled ? theme.colors.neutral[200] : theme.colors.neutral[500])};\n text-overflow: ellipsis;\n overflow: hidden;\n height: ${({ theme }) => theme.space.xs};\n width: 100%;\n text-align: left;\n display: block;\n white-space: nowrap;\n`;\n\nexport const StyledItemCustomActions = styled.div`\n display: grid;\n grid-auto-flow: column;\n grid-gap: ${({ theme }) => theme.space.xxs};\n margin: 0 ${({ theme }) => theme.space.xs};\n justify-content: flex-end;\n`;\n\nexport const StyledItemHeaderContainer = styled.div<StyledItemHeaderContainerPropsT>`\n display: grid;\n grid-template-columns: auto max-content;\n place-items: center;\n position: relative;\n &:hover {\n ${({ disabled, theme }) => (!disabled ? `background: ${theme.colors.brand[200]};` : ``)}\n }\n`;\n"],
5
- "mappings": "AAAA;ACAA;AAWO,MAAM,sBAAsB,OAAO;AAAA;AAAA;AAAA,6BAGb,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA;AAAA;AAI1D,MAAM,mBAAmB,OAAO;AAAA;AAAA,YAE3B,CAAC,EAAE,OAAO,yBAA0B,qBAAqB,MAAM,MAAM,IAAI,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAQnF,CAAC,EAAE,eAAgB,WAAW,gBAAgB;AAAA;AAAA;AAAA,aAG/C,CAAC,EAAE,iBAAkB,aAAa,WAAW;AAAA;AAAA,IAEtD,CAAC,EAAE,iBAAkB,aAAa,iCAAiC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAW7C,CAAC,EAAE,YAAY,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAMrD,MAAM,oBAAoB,OAAO;AAAA,YAC5B,CAAC,EAAE,iBAAkB,aAAa,wBAAwB;AAAA;AAAA;AAI/D,MAAM,kBAAkB,OAAO;AAAA,IAClC,CAAC,EAAE,OAAO,iBAAkB,CAAC,aAAa,cAAc,MAAM,MAAM,SAAS;AAAA;AAAA,WAEtE,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,YAK1B,CAAC,EAAE,UAAU,YAAa,WAAW,MAAM,OAAO,QAAQ,OAAO,MAAM,OAAO,MAAM;AAAA;AAAA;AAIzF,MAAM,mBAAmB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOhC,MAAM,qBAAqB,OAAO;AAAA;AAAA;AAAA,WAG9B,CAAC,EAAE,UAAU,YAAa,WAAW,MAAM,OAAO,QAAQ,OAAO,MAAM,OAAO,QAAQ;AAAA,iBAChF,CAAC,EAAE,OAAO,iBAAkB,aAAa,MAAM,YAAY,UAAU,MAAM,YAAY;AAAA;AAAA;AAAA,YAG5F,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAOhC,MAAM,uBAAuB,OAAO;AAAA;AAAA,eAE5B,CAAC,EAAE,YAAY,MAAM,UAAU,MAAM;AAAA;AAAA,WAEzC,CAAC,EAAE,UAAU,YAAa,WAAW,MAAM,OAAO,QAAQ,OAAO,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA,YAGrF,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAOhC,MAAM,0BAA0B,OAAO;AAAA;AAAA;AAAA,cAGhC,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA,cAC3B,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA;AAAA;AAIlC,MAAM,4BAA4B,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAM1C,CAAC,EAAE,UAAU,YAAa,CAAC,WAAW,eAAe,MAAM,OAAO,MAAM,UAAU;AAAA;AAAA;",
6
- "names": []
7
- }
@@ -1,37 +0,0 @@
1
- import * as React from "react";
2
- import { useCallback, useContext, useMemo } from "react";
3
- import { DSAccordionContext } from "../../DSAccordionCTX";
4
- const useAccordionItem = ({ value, disabled }) => {
5
- const { actualActiveValue, setActiveValues, focusableChildrenReferences } = useContext(DSAccordionContext);
6
- const selected = useMemo(() => {
7
- if (Array.isArray(actualActiveValue)) {
8
- return actualActiveValue.some((currentValue) => currentValue === value);
9
- }
10
- return value === actualActiveValue;
11
- }, [actualActiveValue, value]);
12
- const handleOnClick = useCallback((e) => {
13
- if (!disabled)
14
- setActiveValues(value, e);
15
- }, [disabled, setActiveValues, value]);
16
- const handleOnKeyDown = useCallback((e, _dsIndex) => {
17
- if (!disabled && e.key === "ArrowDown") {
18
- const currentIndex = focusableChildrenReferences.findIndex((item) => item.index === _dsIndex);
19
- if (focusableChildrenReferences[currentIndex + 1]?.ref?.current)
20
- focusableChildrenReferences[currentIndex + 1]?.ref?.current?.focus();
21
- }
22
- if (!disabled && e.key === "ArrowUp") {
23
- const currentIndex = focusableChildrenReferences.findIndex((item) => item.index === _dsIndex);
24
- if (focusableChildrenReferences[currentIndex - 1]?.ref?.current)
25
- focusableChildrenReferences[currentIndex - 1]?.ref?.current?.focus();
26
- }
27
- }, [disabled, focusableChildrenReferences]);
28
- return {
29
- handleOnClick,
30
- handleOnKeyDown,
31
- selected
32
- };
33
- };
34
- export {
35
- useAccordionItem
36
- };
37
- //# sourceMappingURL=useAccordionItem.js.map
@@ -1,7 +0,0 @@
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,28 +0,0 @@
1
- import * as React from "react";
2
- import { PropTypes } from "react-desc";
3
- const accordionItemPropTypes = {
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
- };
13
- const accordionPropTypes = {
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.")
23
- };
24
- export {
25
- accordionItemPropTypes,
26
- accordionPropTypes
27
- };
28
- //# sourceMappingURL=propTypes.js.map
@@ -1,7 +0,0 @@
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
- }