@elliemae/ds-accordion 2.2.0-alpha.4 → 3.0.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.
- package/cjs/DSAccordion.js +29 -50
- package/cjs/DSAccordionCTX.js +14 -40
- package/cjs/DSAccordionDatatestid.js +10 -38
- package/cjs/DSAccordionTypes.js +2 -27
- package/cjs/config/useAccordion.js +36 -59
- package/cjs/config/useAccordionRefs.js +39 -46
- package/cjs/defaultProps.js +39 -49
- package/cjs/index.js +14 -37
- package/cjs/parts/accordionContent/AccordionContent.js +35 -44
- package/cjs/parts/accordionItem/DSAccordionItem.js +174 -147
- package/cjs/parts/accordionItem/styles.js +128 -142
- package/cjs/parts/accordionItem/useAccordionItem.js +39 -52
- package/cjs/parts/accordionItem/useIsShowingEllipsis.js +21 -42
- package/cjs/propTypes.js +22 -53
- package/esm/DSAccordion.js +16 -18
- package/esm/DSAccordionCTX.js +9 -10
- package/esm/DSAccordionDatatestid.js +6 -9
- package/esm/DSAccordionTypes.js +1 -2
- package/esm/config/useAccordion.js +27 -25
- package/esm/config/useAccordionRefs.js +31 -17
- package/esm/defaultProps.js +31 -21
- package/esm/index.js +2 -8
- package/esm/parts/accordionContent/AccordionContent.js +25 -14
- package/esm/parts/accordionItem/DSAccordionItem.js +147 -114
- package/esm/parts/accordionItem/styles.js +115 -116
- package/esm/parts/accordionItem/useAccordionItem.js +33 -21
- package/esm/parts/accordionItem/useIsShowingEllipsis.js +15 -11
- package/esm/propTypes.js +17 -24
- package/package.json +7 -7
- package/cjs/DSAccordion.js.map +0 -7
- package/cjs/DSAccordionCTX.js.map +0 -7
- package/cjs/DSAccordionDatatestid.js.map +0 -7
- package/cjs/DSAccordionTypes.js.map +0 -7
- package/cjs/config/useAccordion.js.map +0 -7
- package/cjs/config/useAccordionRefs.js.map +0 -7
- package/cjs/defaultProps.js.map +0 -7
- package/cjs/index.js.map +0 -7
- package/cjs/parts/accordionContent/AccordionContent.js.map +0 -7
- package/cjs/parts/accordionItem/DSAccordionItem.js.map +0 -7
- package/cjs/parts/accordionItem/styles.js.map +0 -7
- package/cjs/parts/accordionItem/useAccordionItem.js.map +0 -7
- package/cjs/parts/accordionItem/useIsShowingEllipsis.js.map +0 -7
- package/cjs/propTypes.js.map +0 -7
- package/esm/DSAccordion.js.map +0 -7
- package/esm/DSAccordionCTX.js.map +0 -7
- package/esm/DSAccordionDatatestid.js.map +0 -7
- package/esm/DSAccordionTypes.js.map +0 -7
- package/esm/config/useAccordion.js.map +0 -7
- package/esm/config/useAccordionRefs.js.map +0 -7
- package/esm/defaultProps.js.map +0 -7
- package/esm/index.js.map +0 -7
- package/esm/parts/accordionContent/AccordionContent.js.map +0 -7
- package/esm/parts/accordionItem/DSAccordionItem.js.map +0 -7
- package/esm/parts/accordionItem/styles.js.map +0 -7
- package/esm/parts/accordionItem/useAccordionItem.js.map +0 -7
- package/esm/parts/accordionItem/useIsShowingEllipsis.js.map +0 -7
- package/esm/propTypes.js.map +0 -7
|
@@ -1,118 +1,117 @@
|
|
|
1
|
-
import
|
|
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: grid;
|
|
11
|
-
height: ${({ withSecondaryTitle }) => withSecondaryTitle ? "48px" : "32px"};
|
|
12
|
-
grid-template-columns: ${({ withCustomActions, isDSMobile }) => withCustomActions ? "32px auto" : `${isDSMobile ? `auto 32px` : `32px auto`}`};
|
|
13
|
-
width: 100%;
|
|
14
|
-
align-items: center;
|
|
15
|
-
border: none;
|
|
16
|
-
outline: none;
|
|
17
|
-
background: none;
|
|
1
|
+
import styled from 'styled-components';
|
|
18
2
|
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
3
|
+
const StyledItemContainer = /*#__PURE__*/styled.div.withConfig({
|
|
4
|
+
componentId: "sc-fnpjby-0"
|
|
5
|
+
})(["display:grid;grid-template-rows:auto auto;border-bottom:1px solid ", ";align-items:center;"], _ref => {
|
|
6
|
+
let {
|
|
7
|
+
theme
|
|
8
|
+
} = _ref;
|
|
9
|
+
return theme.colors.neutral[200];
|
|
10
|
+
});
|
|
11
|
+
const StyledItemHeader = /*#__PURE__*/styled.button.withConfig({
|
|
12
|
+
componentId: "sc-fnpjby-1"
|
|
13
|
+
})(["display:grid;height:", ";grid-template-columns:", ";width:100%;align-items:center;border:none;outline:none;background:none;&:hover{cursor:", ";}padding:", ";", " &:focus{&:after{position:absolute;content:'';left:0;top:0;width:100%;height:100%;border-radius:2px;border:2px solid ", ";pointer-events:none;}}"], _ref2 => {
|
|
14
|
+
let {
|
|
15
|
+
withSecondaryTitle
|
|
16
|
+
} = _ref2;
|
|
17
|
+
return withSecondaryTitle ? '48px' : '32px';
|
|
18
|
+
}, _ref3 => {
|
|
19
|
+
let {
|
|
20
|
+
withCustomActions,
|
|
21
|
+
isDSMobile
|
|
22
|
+
} = _ref3;
|
|
23
|
+
return withCustomActions ? '32px auto' : "".concat(isDSMobile ? "auto 32px" : "32px auto");
|
|
24
|
+
}, _ref4 => {
|
|
25
|
+
let {
|
|
26
|
+
disabled
|
|
27
|
+
} = _ref4;
|
|
28
|
+
return disabled ? 'not-allowed' : 'pointer';
|
|
29
|
+
}, _ref5 => {
|
|
30
|
+
let {
|
|
31
|
+
isDSMobile
|
|
32
|
+
} = _ref5;
|
|
33
|
+
return isDSMobile ? "0 16px" : "0";
|
|
34
|
+
}, _ref6 => {
|
|
35
|
+
let {
|
|
36
|
+
isDSMobile
|
|
37
|
+
} = _ref6;
|
|
38
|
+
return isDSMobile ? "grid-template-areas: 'title addon';" : "";
|
|
39
|
+
}, _ref7 => {
|
|
40
|
+
let {
|
|
41
|
+
theme
|
|
42
|
+
} = _ref7;
|
|
43
|
+
return theme.colors.brand[700];
|
|
44
|
+
});
|
|
45
|
+
const StyledItemContent = /*#__PURE__*/styled.div.withConfig({
|
|
46
|
+
componentId: "sc-fnpjby-2"
|
|
47
|
+
})(["margin:", ";grid-column:1/2;"], _ref8 => {
|
|
48
|
+
let {
|
|
49
|
+
isDSMobile
|
|
50
|
+
} = _ref8;
|
|
51
|
+
return isDSMobile ? "16px 16px 24px 16px" : "16px 16px 16px 32px";
|
|
52
|
+
});
|
|
53
|
+
const StyledItemAddon = /*#__PURE__*/styled.div.withConfig({
|
|
54
|
+
componentId: "sc-fnpjby-3"
|
|
55
|
+
})(["", " height:100%;display:grid;place-items:center;& .em-ds-icon svg{fill:", ";}"], _ref9 => {
|
|
56
|
+
let {
|
|
57
|
+
isDSMobile
|
|
58
|
+
} = _ref9;
|
|
59
|
+
return !isDSMobile ? " padding: 0 8px;\n \n" : "\n grid-area: addon;\n ";
|
|
60
|
+
}, _ref10 => {
|
|
61
|
+
let {
|
|
62
|
+
disabled,
|
|
63
|
+
theme
|
|
64
|
+
} = _ref10;
|
|
65
|
+
return disabled ? theme.colors.neutral[200] : theme.colors.brand[800];
|
|
66
|
+
});
|
|
67
|
+
const StyledItemTitles = /*#__PURE__*/styled.div.withConfig({
|
|
68
|
+
componentId: "sc-fnpjby-4"
|
|
69
|
+
})(["display:grid;grid-template-columns:100%;align-content:center;", ""], _ref11 => {
|
|
70
|
+
let {
|
|
71
|
+
isDSMobile
|
|
72
|
+
} = _ref11;
|
|
73
|
+
return isDSMobile ? "grid-area: title;" : "";
|
|
74
|
+
});
|
|
75
|
+
const StyledPrimaryTitle = /*#__PURE__*/styled.div.withConfig({
|
|
76
|
+
componentId: "sc-fnpjby-5"
|
|
77
|
+
})(["margin:0;font-size:16px;color:", ";font-weight:", ";text-overflow:ellipsis;overflow:hidden;height:16px;width:100%;text-align:left;display:block;white-space:nowrap;"], _ref12 => {
|
|
78
|
+
let {
|
|
79
|
+
disabled,
|
|
80
|
+
theme
|
|
81
|
+
} = _ref12;
|
|
82
|
+
return disabled ? theme.colors.neutral[200] : theme.colors.neutral[700];
|
|
83
|
+
}, _ref13 => {
|
|
84
|
+
let {
|
|
85
|
+
theme,
|
|
86
|
+
isDSMobile
|
|
87
|
+
} = _ref13;
|
|
88
|
+
return isDSMobile ? theme.fontWeights.regular : theme.fontWeights.regular;
|
|
89
|
+
});
|
|
90
|
+
const StyledSecondaryTitle = /*#__PURE__*/styled.span.withConfig({
|
|
91
|
+
componentId: "sc-fnpjby-6"
|
|
92
|
+
})(["margin:0;font-size:", ";text-align:left;color:", ";text-overflow:ellipsis;overflow:hidden;height:16px;width:100%;text-align:left;display:block;white-space:nowrap;"], _ref14 => {
|
|
93
|
+
let {
|
|
94
|
+
theme
|
|
95
|
+
} = _ref14;
|
|
96
|
+
return theme.fontSizes.label[200];
|
|
97
|
+
}, _ref15 => {
|
|
98
|
+
let {
|
|
99
|
+
disabled,
|
|
100
|
+
theme
|
|
101
|
+
} = _ref15;
|
|
102
|
+
return disabled ? theme.colors.neutral[200] : theme.colors.neutral[500];
|
|
103
|
+
});
|
|
104
|
+
const StyledItemCustomActions = /*#__PURE__*/styled.div.withConfig({
|
|
105
|
+
componentId: "sc-fnpjby-7"
|
|
106
|
+
})(["display:grid;grid-auto-flow:column;grid-gap:8px;margin:0 16px;justify-content:flex-end;"]);
|
|
107
|
+
const StyledItemHeaderContainer = /*#__PURE__*/styled.div.withConfig({
|
|
108
|
+
componentId: "sc-fnpjby-8"
|
|
109
|
+
})(["display:grid;grid-template-columns:auto max-content;place-items:center;position:relative;&:hover{", ";}"], _ref16 => {
|
|
110
|
+
let {
|
|
111
|
+
disabled,
|
|
112
|
+
theme
|
|
113
|
+
} = _ref16;
|
|
114
|
+
return !disabled ? "background: ".concat(theme.colors.brand[200]) : "";
|
|
115
|
+
});
|
|
22
116
|
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
${({ isDSMobile }) => isDSMobile ? `grid-template-areas: 'title addon';` : ``}
|
|
26
|
-
|
|
27
|
-
&:focus {
|
|
28
|
-
&:after {
|
|
29
|
-
position: absolute;
|
|
30
|
-
content: '';
|
|
31
|
-
left: 0;
|
|
32
|
-
top: 0;
|
|
33
|
-
width: 100%;
|
|
34
|
-
height: 100%;
|
|
35
|
-
border-radius: 2px;
|
|
36
|
-
border: 2px solid ${({ theme }) => theme.colors.brand[700]};
|
|
37
|
-
pointer-events: none;
|
|
38
|
-
}
|
|
39
|
-
}
|
|
40
|
-
`;
|
|
41
|
-
const StyledItemContent = styled.div`
|
|
42
|
-
margin: ${({ isDSMobile }) => isDSMobile ? `16px 16px 24px 16px` : `16px 16px 16px 32px`};
|
|
43
|
-
grid-column: 1/2;
|
|
44
|
-
`;
|
|
45
|
-
const StyledItemAddon = styled.div`
|
|
46
|
-
${({ isDSMobile }) => !isDSMobile ? ` padding: 0 8px;
|
|
47
|
-
|
|
48
|
-
` : `
|
|
49
|
-
grid-area: addon;
|
|
50
|
-
`}
|
|
51
|
-
height: 100%;
|
|
52
|
-
display: grid;
|
|
53
|
-
place-items: center;
|
|
54
|
-
|
|
55
|
-
& .em-ds-icon svg {
|
|
56
|
-
fill: ${({ disabled, theme }) => disabled ? theme.colors.neutral[200] : theme.colors.brand[800]};
|
|
57
|
-
}
|
|
58
|
-
`;
|
|
59
|
-
const StyledItemTitles = styled.div`
|
|
60
|
-
display: grid;
|
|
61
|
-
grid-template-columns: 100%;
|
|
62
|
-
align-content: center;
|
|
63
|
-
${({ isDSMobile }) => isDSMobile ? `grid-area: title;` : ``}
|
|
64
|
-
`;
|
|
65
|
-
const StyledPrimaryTitle = styled.div`
|
|
66
|
-
margin: 0;
|
|
67
|
-
font-size: 16px;
|
|
68
|
-
color: ${({ disabled, theme }) => disabled ? theme.colors.neutral[200] : theme.colors.neutral[700]};
|
|
69
|
-
font-weight: ${({ theme, isDSMobile }) => isDSMobile ? theme.fontWeights.regular : theme.fontWeights.regular};
|
|
70
|
-
text-overflow: ellipsis;
|
|
71
|
-
overflow: hidden;
|
|
72
|
-
height: 16px;
|
|
73
|
-
width: 100%;
|
|
74
|
-
text-align: left;
|
|
75
|
-
display: block;
|
|
76
|
-
white-space: nowrap;
|
|
77
|
-
`;
|
|
78
|
-
const StyledSecondaryTitle = styled.span`
|
|
79
|
-
margin: 0;
|
|
80
|
-
font-size: ${({ theme }) => theme.fontSizes.label[200]};
|
|
81
|
-
text-align: left;
|
|
82
|
-
color: ${({ disabled, theme }) => disabled ? theme.colors.neutral[200] : theme.colors.neutral[500]};
|
|
83
|
-
text-overflow: ellipsis;
|
|
84
|
-
overflow: hidden;
|
|
85
|
-
height: 16px;
|
|
86
|
-
width: 100%;
|
|
87
|
-
text-align: left;
|
|
88
|
-
display: block;
|
|
89
|
-
white-space: nowrap;
|
|
90
|
-
`;
|
|
91
|
-
const StyledItemCustomActions = styled.div`
|
|
92
|
-
display: grid;
|
|
93
|
-
grid-auto-flow: column;
|
|
94
|
-
grid-gap: 8px;
|
|
95
|
-
margin: 0 16px;
|
|
96
|
-
justify-content: flex-end;
|
|
97
|
-
`;
|
|
98
|
-
const StyledItemHeaderContainer = styled.div`
|
|
99
|
-
display: grid;
|
|
100
|
-
grid-template-columns: auto max-content;
|
|
101
|
-
place-items: center;
|
|
102
|
-
position: relative;
|
|
103
|
-
&:hover {
|
|
104
|
-
${({ disabled, theme }) => !disabled ? `background: ${theme.colors.brand[200]}` : ``};
|
|
105
|
-
}
|
|
106
|
-
`;
|
|
107
|
-
export {
|
|
108
|
-
StyledItemAddon,
|
|
109
|
-
StyledItemContainer,
|
|
110
|
-
StyledItemContent,
|
|
111
|
-
StyledItemCustomActions,
|
|
112
|
-
StyledItemHeader,
|
|
113
|
-
StyledItemHeaderContainer,
|
|
114
|
-
StyledItemTitles,
|
|
115
|
-
StyledPrimaryTitle,
|
|
116
|
-
StyledSecondaryTitle
|
|
117
|
-
};
|
|
118
|
-
//# sourceMappingURL=styles.js.map
|
|
117
|
+
export { StyledItemAddon, StyledItemContainer, StyledItemContent, StyledItemCustomActions, StyledItemHeader, StyledItemHeaderContainer, StyledItemTitles, StyledPrimaryTitle, StyledSecondaryTitle };
|
|
@@ -1,28 +1,42 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
|
|
5
|
-
|
|
1
|
+
import 'core-js/modules/esnext.async-iterator.some.js';
|
|
2
|
+
import 'core-js/modules/esnext.iterator.constructor.js';
|
|
3
|
+
import 'core-js/modules/esnext.iterator.some.js';
|
|
4
|
+
import { useContext, useMemo, useCallback } from 'react';
|
|
5
|
+
import { DSAccordionContext } from '../../DSAccordionCTX.js';
|
|
6
|
+
|
|
7
|
+
const useAccordionItem = _ref => {
|
|
8
|
+
let {
|
|
9
|
+
value,
|
|
10
|
+
disabled
|
|
11
|
+
} = _ref;
|
|
12
|
+
const {
|
|
13
|
+
actualActiveValue,
|
|
14
|
+
setActiveValues,
|
|
15
|
+
focusableChildrenReferences
|
|
16
|
+
} = useContext(DSAccordionContext);
|
|
6
17
|
const selected = useMemo(() => {
|
|
7
18
|
if (Array.isArray(actualActiveValue)) {
|
|
8
|
-
return actualActiveValue.some(
|
|
19
|
+
return actualActiveValue.some(currentValue => currentValue === value);
|
|
9
20
|
}
|
|
21
|
+
|
|
10
22
|
return value === actualActiveValue;
|
|
11
23
|
}, [actualActiveValue, value]);
|
|
12
|
-
const handleOnClick = useCallback(
|
|
13
|
-
if (!disabled)
|
|
14
|
-
setActiveValues(value, e);
|
|
24
|
+
const handleOnClick = useCallback(e => {
|
|
25
|
+
if (!disabled) setActiveValues(value, e);
|
|
15
26
|
}, [disabled, setActiveValues, value]);
|
|
16
27
|
const handleOnKeyDown = useCallback((e, _dsIndex) => {
|
|
17
|
-
if (!disabled && e.key ===
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
28
|
+
if (!disabled && e.key === 'ArrowDown') {
|
|
29
|
+
var _focusableChildrenRef, _focusableChildrenRef2, _focusableChildrenRef3, _focusableChildrenRef4, _focusableChildrenRef5;
|
|
30
|
+
|
|
31
|
+
const currentIndex = focusableChildrenReferences.findIndex(item => item.index === _dsIndex);
|
|
32
|
+
if ((_focusableChildrenRef = focusableChildrenReferences[currentIndex + 1]) !== null && _focusableChildrenRef !== void 0 && (_focusableChildrenRef2 = _focusableChildrenRef.ref) !== null && _focusableChildrenRef2 !== void 0 && _focusableChildrenRef2.current) (_focusableChildrenRef3 = focusableChildrenReferences[currentIndex + 1]) === null || _focusableChildrenRef3 === void 0 ? void 0 : (_focusableChildrenRef4 = _focusableChildrenRef3.ref) === null || _focusableChildrenRef4 === void 0 ? void 0 : (_focusableChildrenRef5 = _focusableChildrenRef4.current) === null || _focusableChildrenRef5 === void 0 ? void 0 : _focusableChildrenRef5.focus();
|
|
21
33
|
}
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
34
|
+
|
|
35
|
+
if (!disabled && e.key === 'ArrowUp') {
|
|
36
|
+
var _focusableChildrenRef6, _focusableChildrenRef7, _focusableChildrenRef8, _focusableChildrenRef9, _focusableChildrenRef10;
|
|
37
|
+
|
|
38
|
+
const currentIndex = focusableChildrenReferences.findIndex(item => item.index === _dsIndex);
|
|
39
|
+
if ((_focusableChildrenRef6 = focusableChildrenReferences[currentIndex - 1]) !== null && _focusableChildrenRef6 !== void 0 && (_focusableChildrenRef7 = _focusableChildrenRef6.ref) !== null && _focusableChildrenRef7 !== void 0 && _focusableChildrenRef7.current) (_focusableChildrenRef8 = focusableChildrenReferences[currentIndex - 1]) === null || _focusableChildrenRef8 === void 0 ? void 0 : (_focusableChildrenRef9 = _focusableChildrenRef8.ref) === null || _focusableChildrenRef9 === void 0 ? void 0 : (_focusableChildrenRef10 = _focusableChildrenRef9.current) === null || _focusableChildrenRef10 === void 0 ? void 0 : _focusableChildrenRef10.focus();
|
|
26
40
|
}
|
|
27
41
|
}, [disabled, focusableChildrenReferences]);
|
|
28
42
|
return {
|
|
@@ -31,7 +45,5 @@ const useAccordionItem = ({ value, disabled }) => {
|
|
|
31
45
|
selected
|
|
32
46
|
};
|
|
33
47
|
};
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
};
|
|
37
|
-
//# sourceMappingURL=useAccordionItem.js.map
|
|
48
|
+
|
|
49
|
+
export { useAccordionItem };
|
|
@@ -1,29 +1,33 @@
|
|
|
1
|
-
import
|
|
2
|
-
import {
|
|
1
|
+
import 'core-js/modules/web.dom-collections.iterator.js';
|
|
2
|
+
import { useState, useMemo, useEffect } from 'react';
|
|
3
|
+
|
|
3
4
|
const useIsShowingEllipsis = () => {
|
|
4
5
|
const [element, setElement] = useState();
|
|
5
|
-
const [isShowingEllipsis, setIsShowingEllipsis] = useState(false);
|
|
6
|
-
|
|
6
|
+
const [isShowingEllipsis, setIsShowingEllipsis] = useState(false); // const isShowingEllipsis = element?.scrollWidth > primaryTitleWrapperEl?.clientWidth;
|
|
7
|
+
|
|
8
|
+
const resizeObserver = useMemo(() => new ResizeObserver(entries => {
|
|
7
9
|
if (entries.length) {
|
|
8
10
|
const [textWrapperEntry] = entries;
|
|
9
11
|
const el = textWrapperEntry.target;
|
|
10
|
-
setIsShowingEllipsis(el
|
|
12
|
+
setIsShowingEllipsis((el === null || el === void 0 ? void 0 : el.scrollWidth) > (el === null || el === void 0 ? void 0 : el.clientWidth));
|
|
11
13
|
}
|
|
12
14
|
}), []);
|
|
13
15
|
useEffect(() => {
|
|
14
16
|
if (element) {
|
|
15
|
-
setIsShowingEllipsis(element
|
|
17
|
+
setIsShowingEllipsis((element === null || element === void 0 ? void 0 : element.scrollWidth) > (element === null || element === void 0 ? void 0 : element.clientWidth));
|
|
16
18
|
resizeObserver.observe(element);
|
|
17
19
|
}
|
|
20
|
+
|
|
18
21
|
return () => {
|
|
19
22
|
if (element) {
|
|
20
23
|
resizeObserver.unobserve(element);
|
|
21
24
|
}
|
|
22
25
|
};
|
|
23
26
|
}, [resizeObserver, element]);
|
|
24
|
-
return {
|
|
27
|
+
return {
|
|
28
|
+
setElement,
|
|
29
|
+
isShowingEllipsis
|
|
30
|
+
};
|
|
25
31
|
};
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
};
|
|
29
|
-
//# sourceMappingURL=useIsShowingEllipsis.js.map
|
|
32
|
+
|
|
33
|
+
export { useIsShowingEllipsis };
|
package/esm/propTypes.js
CHANGED
|
@@ -1,28 +1,21 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
1
|
+
import { PropTypes } from 'react-desc';
|
|
2
|
+
|
|
3
3
|
const accordionItemPropTypes = {
|
|
4
|
-
children: PropTypes.node.description(
|
|
5
|
-
title: PropTypes.string.description(
|
|
6
|
-
value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description(
|
|
7
|
-
iconClosed: PropTypes.node.description(
|
|
8
|
-
iconOpened: PropTypes.node.description(
|
|
9
|
-
secondaryTitle: PropTypes.string.description(
|
|
10
|
-
customActions: PropTypes.arrayOf(PropTypes.object).description(
|
|
11
|
-
renderCustomActions: PropTypes.func.description(
|
|
4
|
+
children: PropTypes.node.description('Dimsum AccordionItem content.').isRequired,
|
|
5
|
+
title: PropTypes.string.description('Set a primary title.'),
|
|
6
|
+
value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('Dimsum AccordionItem value, this value should be unique.').isRequired,
|
|
7
|
+
iconClosed: PropTypes.node.description('Custom Dimsum Icon when it is closed.'),
|
|
8
|
+
iconOpened: PropTypes.node.description('Custom Dimsum Icon when it is open.'),
|
|
9
|
+
secondaryTitle: PropTypes.string.description('Set a secondary title'),
|
|
10
|
+
customActions: PropTypes.arrayOf(PropTypes.object).description('Set Dimsum AccordionItem custom actions.'),
|
|
11
|
+
renderCustomActions: PropTypes.func.description('This property will render any JSX in the custom actions area. You can access to all references and active values within the props.')
|
|
12
12
|
};
|
|
13
13
|
const accordionPropTypes = {
|
|
14
|
-
containerProps: PropTypes.object.description(
|
|
15
|
-
activeValue: PropTypes.oneOfType([
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
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.")
|
|
14
|
+
containerProps: PropTypes.object.description('Adds props to the container.'),
|
|
15
|
+
activeValue: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])), PropTypes.string, PropTypes.number]).description('Selected active value. This property makes the component a controlled one.'),
|
|
16
|
+
children: PropTypes.node.description('Dimsum AccordionItems to show.'),
|
|
17
|
+
allowMultipleOpen: PropTypes.bool.description('Allows multiple Dimsum AccordionItems to be open at the same time.'),
|
|
18
|
+
onChange: PropTypes.func.description('Callback function once the Dimsum Accordion changes.')
|
|
23
19
|
};
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
accordionPropTypes
|
|
27
|
-
};
|
|
28
|
-
//# sourceMappingURL=propTypes.js.map
|
|
20
|
+
|
|
21
|
+
export { accordionItemPropTypes, accordionPropTypes };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-accordion",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "3.0.0-next.2",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Accordion",
|
|
6
6
|
"module": "./esm/index.js",
|
|
@@ -84,12 +84,12 @@
|
|
|
84
84
|
"build": "node ../../scripts/build/build.js"
|
|
85
85
|
},
|
|
86
86
|
"dependencies": {
|
|
87
|
-
"@elliemae/ds-button": "
|
|
88
|
-
"@elliemae/ds-classnames": "
|
|
89
|
-
"@elliemae/ds-icons": "
|
|
90
|
-
"@elliemae/ds-shared": "
|
|
91
|
-
"@elliemae/ds-system": "
|
|
92
|
-
"@elliemae/ds-truncated-tooltip-text": "
|
|
87
|
+
"@elliemae/ds-button": "3.0.0-next.2",
|
|
88
|
+
"@elliemae/ds-classnames": "3.0.0-next.2",
|
|
89
|
+
"@elliemae/ds-icons": "3.0.0-next.2",
|
|
90
|
+
"@elliemae/ds-shared": "3.0.0-next.2",
|
|
91
|
+
"@elliemae/ds-system": "3.0.0-next.2",
|
|
92
|
+
"@elliemae/ds-truncated-tooltip-text": "3.0.0-next.2",
|
|
93
93
|
"react-desc": "^4.1.3"
|
|
94
94
|
},
|
|
95
95
|
"devDependencies": {
|
package/cjs/DSAccordion.js.map
DELETED
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/DSAccordion.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,wBAAyB;AACzB,8BAAiC;AACjC,0BAA6B;AAC7B,4BAAmC;AACnC,uBAAmC;AAGnC,MAAM,cAAc,CAAC,UAA0C;AAC7D,QAAM,MAAM,sCAAa;AAEzB,SACE,mDAAC,yCAAmB,UAApB;AAAA,IAA6B,OAAO;AAAA,KAClC,mDAAC,0CAAD;AAAA;AAKN,YAAY,YAAY;AACxB,MAAM,wBAAwB,gCAAS;AACvC,sBAAsB,YAAY;AAIlC,IAAO,sBAAQ;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/DSAccordionCTX.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA8B;AAC9B,0BAA6B;AAI7B,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,gCAAmC;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/DSAccordionDatatestid.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,wBAAwB;AAAA,EACnC,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,WAAW;AAAA;AAAA,EAEb,OAAO;AAAA;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/DSAccordionTypes.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React from 'react';\n\n/* ****************************************** Misc Types ********************************************** */\n\nexport type InternalActiveValueT = (string | number)[] | string | number | null | undefined;\n\nexport interface DefaultIconPropsT {\n isDSMobile: boolean;\n}\n\nexport interface CustomActionsT {\n onClick: (e: React.MouseEvent) => void;\n id: string;\n}\n\nexport interface FocusableChildrenReferences {\n index: number;\n value: string | number;\n ref: React.MutableRefObject<HTMLButtonElement | null>;\n}\n\nexport interface AllChildrenReferences {\n [index: string]: React.MutableRefObject<HTMLButtonElement | null>;\n}\n\n/* ****************************************** Component Types ********************************************** */\n\nexport interface DSAccordionPropsT {\n containerProps?: Record<string, unknown>;\n activeValue?: (string | number)[] | string | number | null;\n children?: React.ReactElement<DSAccordionItemPropsT>[];\n allowMultipleOpen?: boolean;\n contentExpandable?: boolean;\n onChange?: (value: (string | number)[] | string | number | null, e: React.MouseEvent | React.KeyboardEvent) => void;\n disabled?: boolean;\n isDSMobile?: boolean;\n}\n\nexport interface DSAccordionDefaultPropsT {\n containerProps: Record<string, unknown>;\n allowMultipleOpen: boolean;\n contentExpandable: boolean;\n onChange: (value: (string | number)[] | string | number | null, e: React.MouseEvent | React.KeyboardEvent) => void;\n children: React.ReactElement<DSAccordionItemPropsT>[];\n isDSMobile: boolean;\n}\n\nexport interface DSAccordionPropsWithDefaultsT {\n containerProps: Record<string, unknown>;\n activeValue?: (string | number)[] | string | number | null;\n children: React.ReactElement<DSAccordionItemPropsT>[];\n allowMultipleOpen: boolean;\n contentExpandable: boolean;\n onChange: (value: (string | number)[] | string | number | null, e: React.MouseEvent | React.KeyboardEvent) => void;\n isDSMobile: boolean;\n}\n\nexport interface DSAccordionItemPropsT {\n title?: string;\n value: string | number;\n iconClosed?: React.FunctionComponent<DefaultIconPropsT>;\n iconOpened?: React.FunctionComponent<DefaultIconPropsT>;\n children?: React.ReactNode;\n secondaryTitle?: string;\n customActions?: CustomActionsT[];\n disabled?: boolean;\n dsIndex: number;\n renderCustomActions?: (props: {\n allRefs: AllChildrenReferences;\n actualActiveValue: InternalActiveValueT;\n }) => JSX.Element;\n}\n\nexport interface DSAccordionItemDefaultPropsT {\n iconClosed: React.MemoExoticComponent<React.FunctionComponent<DefaultIconPropsT>>;\n iconOpened: React.MemoExoticComponent<React.FunctionComponent<DefaultIconPropsT>>;\n title: string;\n customActions: CustomActionsT[];\n disabled: boolean;\n}\n\nexport interface DSAccordionItemPropsWithDefaultsT {\n title: string;\n value: string | number;\n iconClosed:\n | React.MemoExoticComponent<React.FunctionComponent<DefaultIconPropsT>>\n | React.FunctionComponent<DefaultIconPropsT>;\n iconOpened:\n | React.MemoExoticComponent<React.FunctionComponent<DefaultIconPropsT>>\n | React.FunctionComponent<DefaultIconPropsT>;\n children?: React.ReactNode;\n secondaryTitle?: string;\n customActions: CustomActionsT[];\n disabled: boolean;\n dsIndex: number;\n renderCustomActions?: (props: {\n allRefs: AllChildrenReferences;\n actualActiveValue: InternalActiveValueT;\n }) => JSX.Element;\n}\n\n/* ****************************************** Context Types ********************************************** */\n\nexport interface DSAccordionContextT {\n props: DSAccordionPropsWithDefaultsT;\n actualActiveValue: InternalActiveValueT;\n setActiveValues: (value: string | number, e: React.MouseEvent | React.KeyboardEvent) => void;\n focusableChildrenReferences: FocusableChildrenReferences[];\n allChildrenReferences: AllChildrenReferences;\n}\nexport interface DSAccordionUseAccordionContextT {\n props: DSAccordionPropsWithDefaultsT;\n actualActiveValue: InternalActiveValueT;\n setActiveValues: (value: string | number, e: React.MouseEvent | React.KeyboardEvent) => void;\n focusableChildrenReferences: FocusableChildrenReferences[];\n allChildrenReferences: AllChildrenReferences;\n}\n\n/* ****************************************** Hooks Types ********************************************** */\n\nexport interface UseAccordionPropsT {\n value: string | number;\n disabled: boolean;\n}\n\nexport interface UseAccordionItemReturnTypeT {\n handleOnClick: (e: React.MouseEvent) => void;\n handleOnKeyDown: (e: React.KeyboardEvent, dsIndex: number) => void;\n selected: boolean;\n}\n\nexport interface UseAccordionRefsPropsT {\n children: React.ReactElement<DSAccordionItemPropsT>[];\n}\n\nexport interface UseAccordionRefsReturnTypeT {\n focusableChildrenReferences: FocusableChildrenReferences[];\n allChildrenReferences: AllChildrenReferences;\n}\n\n/* ****************************************** Styled Types ********************************************** */\n\nexport interface StyledItemHeaderPropsT {\n withCustomActions: boolean;\n withSecondaryTitle?: string;\n isDSMobile: boolean;\n}\n\nexport interface StyledItemTitlesPropsT {\n withSecondaryTitle?: string;\n isDSMobile: boolean;\n}\n\nexport interface StyledPrimaryTitlePropsT {\n disabled: boolean;\n isDSMobile: boolean;\n}\n\nexport interface StyledItemContentPropsT {\n isDSMobile: boolean;\n}\n\nexport interface StyledSecondaryTitlePropsT {\n disabled: boolean;\n}\n\nexport interface StyledItemAddonPropsT {\n disabled: boolean;\n isDSMobile: boolean;\n}\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;ACAA,YAAuB;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../src/config/useAccordion.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAsD;AACtD,8BAA6C;AAC7C,8BAAiC;AACjC,0BAA6B;AAQtB,MAAM,eAAe,CAAC,UAA8D;AACzF,QAAM,oBAAoB,0DAA6B,OAAO;AAE9D,QAAM,EAAE,aAAa,mBAAmB,aAAa;AAErD,QAAM,EAAE,6BAA6B,0BAA0B,8CAAiB;AAEhF,QAAM,CAAC,qBAAqB,0BAA0B,2BAA+B;AAErF,QAAM,oBAAoB,0BAAQ,MAAM;AACtC,QAAI,gBAAgB;AAAW,aAAO;AACtC,WAAO;AAAA,KACN,CAAC,aAAa;AAEjB,QAAM,kBAAkB,8BACtB,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,0BACV,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,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../src/config/useAccordionRefs.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA+B;AAQxB,MAAM,mBAAmB,CAAC,EAAE,eACjC,0BAAQ,MAAM;AACZ,QAAM,8BAA6D;AACnE,QAAM,wBAA+C;AAErD,uBAAM,SAAS,IAAI,UAAU,CAAC,OAAO,UAAU;AAC7C,UAAM,EAAE,OAAO,aAAa,MAAM;AAClC,UAAM,aAAa,qBAAM;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/cjs/defaultProps.js.map
DELETED
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/defaultProps.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA4B;AAC5B,sBAAyE;AAGzE,MAAM,oBAAoB,uBAAK,CAAC,EAAE,aAAa,YAC7C,aAAa,mDAAC,8BAAD;AAAA,EAAc,OAAM;AAAA,KAAY,mDAAC,gCAAD;AAAA,EAAgB,OAAM;AAAA;AAGrE,MAAM,kBAAkB,uBAAK,CAAC,EAAE,aAAa,YAC3C,aAAa,mDAAC,6BAAD;AAAA,EAAa,OAAM;AAAA,KAAY,mDAAC,+BAAD;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/cjs/index.js.map
DELETED
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/index.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["export * from './DSAccordion';\nexport * from './parts/accordionItem/DSAccordionItem';\n\nexport type { DSAccordionPropsT, DSAccordionItemPropsT } from './DSAccordionTypes';\n\nexport { default } from './DSAccordion';\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,wBAAc;AACd,wBAAc;AAId,yBAAwB;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../src/parts/accordionContent/AccordionContent.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkC;AAClC,4BAAmC;AACnC,mCAAsC;AAG/B,MAAM,mBAAmB,MAAmB;AACjD,QAAM;AAAA,IACJ,OAAO,EAAE,gBAAgB;AAAA,MACvB,6BAAW;AAEf,QAAM,oBAAiE;AAEvE,uBAAM,SAAS,QAAQ,UAAU,CAAC,OAAO,UACvC,kBAAkB,KAChB,qBAAM,aAAa,OAAO;AAAA,IACxB,SAAS;AAAA;AAKf,SACE,mDAAC,OAAD;AAAA,OAAS;AAAA,IAAgB,eAAa,mDAAsB;AAAA,KACzD;AAAA;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../src/parts/accordionItem/DSAccordionItem.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import 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 { 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 { useIsShowingEllipsis } from './useIsShowingEllipsis';\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", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "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",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../src/parts/accordionItem/styles.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import styled from 'styled-components';\nimport type {\n StyledItemAddonPropsT,\n StyledItemHeaderPropsT,\n StyledItemTitlesPropsT,\n StyledPrimaryTitlePropsT,\n StyledSecondaryTitlePropsT,\n StyledItemContentPropsT,\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: grid;\n height: ${({ withSecondaryTitle }) => (withSecondaryTitle ? '48px' : '32px')};\n grid-template-columns: ${({ withCustomActions, isDSMobile }) =>\n withCustomActions ? '32px auto' : `${isDSMobile ? `auto 32px` : `32px auto`}`};\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 ? `grid-template-areas: 'title addon';` : ``)}\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 ${({ isDSMobile }) =>\n !isDSMobile\n ? ` padding: 0 8px;\n \n`\n : `\n grid-area: addon;\n `}\n height: 100%;\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 align-content: center;\n ${({ isDSMobile }) => (isDSMobile ? `grid-area: title;` : ``)}\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: 16px;\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: 16px;\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: 8px;\n margin: 0 16px;\n justify-content: flex-end;\n`;\n\nexport const StyledItemHeaderContainer = styled.div`\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", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,+BAAmB;AAUZ,MAAM,sBAAsB,iCAAO;AAAA;AAAA;AAAA,6BAGb,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA;AAAA;AAI1D,MAAM,mBAAmB,iCAAO;AAAA;AAAA,YAE3B,CAAC,EAAE,yBAA0B,qBAAqB,SAAS;AAAA,2BAC5C,CAAC,EAAE,mBAAmB,iBAC7C,oBAAoB,cAAc,GAAG,aAAa,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAQtD,CAAC,EAAE,eAAgB,WAAW,gBAAgB;AAAA;AAAA;AAAA,aAG/C,CAAC,EAAE,iBAAkB,aAAa,WAAW;AAAA;AAAA,IAEtD,CAAC,EAAE,iBAAkB,aAAa,wCAAwC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAWpD,CAAC,EAAE,YAAY,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAMrD,MAAM,oBAAoB,iCAAO;AAAA,YAC5B,CAAC,EAAE,iBAAkB,aAAa,wBAAwB;AAAA;AAAA;AAI/D,MAAM,kBAAkB,iCAAO;AAAA,IAClC,CAAC,EAAE,iBACH,CAAC,aACG;AAAA;AAAA,IAGA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAQI,CAAC,EAAE,UAAU,YAAa,WAAW,MAAM,OAAO,QAAQ,OAAO,MAAM,OAAO,MAAM;AAAA;AAAA;AAIzF,MAAM,mBAAmB,iCAAO;AAAA;AAAA;AAAA;AAAA,IAInC,CAAC,EAAE,iBAAkB,aAAa,sBAAsB;AAAA;AAGrD,MAAM,qBAAqB,iCAAO;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;AAAA;AAAA;AAAA;AAAA;AAAA;AAUjG,MAAM,uBAAuB,iCAAO;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;AAAA;AAAA;AAAA;AAAA;AAAA;AAU1F,MAAM,0BAA0B,iCAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQvC,MAAM,4BAA4B,iCAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAM1C,CAAC,EAAE,UAAU,YAAa,CAAC,WAAW,eAAe,MAAM,OAAO,MAAM,SAAS;AAAA;AAAA;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../src/parts/accordionItem/useAccordionItem.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAwD;AACxD,4BAAmC;AAG5B,MAAM,mBAAmB,CAAC,EAAE,OAAO,eAAgE;AACxG,QAAM,EAAE,mBAAmB,iBAAiB,gCAAgC,6BAAW;AAEvF,QAAM,WAAW,0BAAQ,MAAM;AAC7B,QAAI,MAAM,QAAQ,oBAAoB;AACpC,aAAO,kBAAkB,KAAK,CAAC,iBAAiB,iBAAiB;AAAA;AAEnE,WAAO,UAAU;AAAA,KAChB,CAAC,mBAAmB;AAEvB,QAAM,gBAAgB,8BACpB,CAAC,MAAwB;AACvB,QAAI,CAAC;AAAU,sBAAgB,OAAO;AAAA,KAExC,CAAC,UAAU,iBAAiB;AAG9B,QAAM,kBAAkB,8BACtB,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,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../src/parts/accordionItem/useIsShowingEllipsis.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React, { useEffect, useState, useMemo } from 'react';\n\nexport const useIsShowingEllipsis = () => {\n const [element, setElement] = useState<HTMLSpanElement>();\n\n const [isShowingEllipsis, setIsShowingEllipsis] = useState(false);\n // const isShowingEllipsis = element?.scrollWidth > primaryTitleWrapperEl?.clientWidth;\n\n const resizeObserver = useMemo(\n () =>\n new ResizeObserver((entries) => {\n if (entries.length) {\n const [textWrapperEntry] = entries;\n const el = textWrapperEntry.target;\n setIsShowingEllipsis(el?.scrollWidth > el?.clientWidth);\n }\n }),\n [],\n );\n\n useEffect(() => {\n if (element) {\n setIsShowingEllipsis(element?.scrollWidth > element?.clientWidth);\n resizeObserver.observe(element);\n }\n return () => {\n if (element) {\n resizeObserver.unobserve(element);\n }\n };\n }, [resizeObserver, element]);\n\n return { setElement, isShowingEllipsis };\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAoD;AAE7C,MAAM,uBAAuB,MAAM;AACxC,QAAM,CAAC,SAAS,cAAc;AAE9B,QAAM,CAAC,mBAAmB,wBAAwB,2BAAS;AAG3D,QAAM,iBAAiB,0BACrB,MACE,IAAI,eAAe,CAAC,YAAY;AAC9B,QAAI,QAAQ,QAAQ;AAClB,YAAM,CAAC,oBAAoB;AAC3B,YAAM,KAAK,iBAAiB;AAC5B,2BAAqB,IAAI,cAAc,IAAI;AAAA;AAAA,MAGjD;AAGF,8BAAU,MAAM;AACd,QAAI,SAAS;AACX,2BAAqB,SAAS,cAAc,SAAS;AACrD,qBAAe,QAAQ;AAAA;AAEzB,WAAO,MAAM;AACX,UAAI,SAAS;AACX,uBAAe,UAAU;AAAA;AAAA;AAAA,KAG5B,CAAC,gBAAgB;AAEpB,SAAO,EAAE,YAAY;AAAA;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
package/cjs/propTypes.js.map
DELETED
|
@@ -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
|
-
}
|