@laerdal/life-react-components 1.2.2-dev.25.full → 1.2.2-dev.26
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/dist/esm/Accordion/AccordionItem.js +2 -3
- package/dist/esm/Accordion/AccordionItem.js.map +1 -1
- package/dist/esm/Accordion/styles.js +1 -1
- package/dist/esm/Accordion/styles.js.map +1 -1
- package/dist/js/Accordion/AccordionItem.js +2 -3
- package/dist/js/Accordion/AccordionItem.js.map +1 -1
- package/dist/js/Accordion/styles.d.ts +0 -1
- package/dist/js/Accordion/styles.js +4 -4
- package/dist/js/Accordion/styles.js.map +1 -1
- package/dist/umd/Accordion/AccordionItem.js +2 -3
- package/dist/umd/Accordion/AccordionItem.js.map +1 -1
- package/dist/umd/Accordion/styles.js +1 -1
- package/dist/umd/Accordion/styles.js.map +1 -1
- package/package.json +1 -1
|
@@ -21,8 +21,7 @@ const AccordionItem = props => {
|
|
|
21
21
|
}, [disabled]);
|
|
22
22
|
return /*#__PURE__*/React.createElement(AccordionItemContainer, {
|
|
23
23
|
id: id,
|
|
24
|
-
displaySeparator: !isActive && !isLast
|
|
25
|
-
isDisabled: disabled ?? false
|
|
24
|
+
displaySeparator: !isActive && !isLast
|
|
26
25
|
}, /*#__PURE__*/React.createElement(ItemHeaderContainer, {
|
|
27
26
|
tabIndex: !disabled ? 0 : -1,
|
|
28
27
|
onClick: () => {
|
|
@@ -52,7 +51,7 @@ const AccordionItem = props => {
|
|
|
52
51
|
size: '24px'
|
|
53
52
|
}), /*#__PURE__*/React.createElement(ComponentM, {
|
|
54
53
|
className: "headerLabel",
|
|
55
|
-
color: isActive ? COLORS.neutral_800 : disabled ? COLORS.neutral_300 :
|
|
54
|
+
color: isActive ? COLORS.neutral_800 : disabled ? COLORS.neutral_300 : COLORS.neutral_600
|
|
56
55
|
}, title), isActive ? /*#__PURE__*/React.createElement(SystemIcons.ChevronUp, {
|
|
57
56
|
color: COLORS.neutral_800,
|
|
58
57
|
size: "20px"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/Accordion/AccordionItem.tsx"],"names":["React","COLORS","ComponentM","ComponentS","SystemIcons","AccordionItemContainer","ItemBodyContainer","ItemHeaderContainer","AccordionItem","props","id","onSelect","isActive","title","icon","disabled","isLast","supressFocusRef","useRef","tabbedHere","setTabbedHere","useState","useEffect","e","key","current","cloneElement","size","neutral_800","neutral_300","
|
|
1
|
+
{"version":3,"sources":["../../../src/Accordion/AccordionItem.tsx"],"names":["React","COLORS","ComponentM","ComponentS","SystemIcons","AccordionItemContainer","ItemBodyContainer","ItemHeaderContainer","AccordionItem","props","id","onSelect","isActive","title","icon","disabled","isLast","supressFocusRef","useRef","tabbedHere","setTabbedHere","useState","useEffect","e","key","current","cloneElement","size","neutral_800","neutral_300","neutral_600","children"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { COLORS, ComponentM, ComponentS } from '..';\nimport { SystemIcons } from '../icons';\nimport { AccordionItemProps } from './AccordionMenu';\nimport { AccordionItemContainer, HeaderIconContainer, ItemBodyContainer, ItemHeaderContainer } from './styles';\n\ninterface AccordionItemPropsInner extends AccordionItemProps {\n onSelect: (id: string) => void;\n isActive: boolean;\n isLast: boolean;\n}\n\nconst AccordionItem: React.FunctionComponent<AccordionItemPropsInner> = (props: AccordionItemPropsInner) => {\n const { id, onSelect, isActive, title, icon, disabled, isLast } = props;\n\n const supressFocusRef = React.useRef<any>(null);\n const [tabbedHere, setTabbedHere] = React.useState<boolean>(false);\n\n React.useEffect(() => {\n !!disabled && setTabbedHere(false);\n }, [disabled]);\n\n return (\n <AccordionItemContainer id={id} displaySeparator={!isActive && !isLast}>\n <ItemHeaderContainer\n tabIndex={!disabled ? 0 : -1}\n onClick={() => {\n if (!disabled) {\n onSelect(id);\n }\n }}\n onKeyDown={(e: any) => {\n if(e.key == 'Enter')\n onSelect(id);\n }}\n onBlur={() => {\n setTabbedHere(false);\n supressFocusRef.current = false;\n }}\n onFocus={() => {\n if(!disabled) {\n if (!supressFocusRef.current) setTabbedHere(true);\n else supressFocusRef.current = false;\n }\n }}\n onMouseDown={() => {\n if (!disabled && !tabbedHere) supressFocusRef.current = true;\n }}\n tabbedHere={tabbedHere}\n isActive={isActive}\n isDisabled={disabled ?? false}>\n {icon && React.cloneElement(icon as React.ReactElement, { size: '24px' })}\n <ComponentM className=\"headerLabel\" color={isActive ? COLORS.neutral_800 : disabled ? COLORS.neutral_300 : COLORS.neutral_600}>{title}</ComponentM>\n {isActive ? <SystemIcons.ChevronUp color={COLORS.neutral_800} size=\"20px\" /> : <SystemIcons.ChevronDown color={COLORS.neutral_600} size=\"20px\" />}\n </ItemHeaderContainer>\n {isActive && (\n <ItemBodyContainer>\n <ComponentS>{props.children}</ComponentS>\n </ItemBodyContainer>\n )}\n </AccordionItemContainer>\n );\n};\n\nexport default AccordionItem;\n"],"file":"AccordionItem.js"}
|
|
@@ -13,7 +13,6 @@ export const AccordionItemContainer = styled.div`
|
|
|
13
13
|
flex-direction: column;
|
|
14
14
|
box-sizing: border-box;
|
|
15
15
|
border-bottom: ${props => props.displaySeparator ? `1px solid ${COLORS.neutral_100}` : ''};
|
|
16
|
-
cursor: ${props => props.isDisabled ? 'not-allowed' : 'pointer'};
|
|
17
16
|
`;
|
|
18
17
|
const disabledState = css`
|
|
19
18
|
background: ${COLORS.white}!important;
|
|
@@ -31,6 +30,7 @@ export const ItemHeaderContainer = styled.div`
|
|
|
31
30
|
padding: 12px 16px 11px 16px;
|
|
32
31
|
cursor: pointer;
|
|
33
32
|
background: ${COLORS.neutral_20};
|
|
33
|
+
cursor: ${props => props.isDisabled ? 'not-allowed' : 'pointer'};
|
|
34
34
|
svg:last-child {
|
|
35
35
|
margin-left: auto;
|
|
36
36
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/Accordion/styles.ts"],"names":["styled","css","COLORS","Z_INDEXES","AccordionMenuWrapper","div","AccordionItemContainer","props","displaySeparator","neutral_100","
|
|
1
|
+
{"version":3,"sources":["../../../src/Accordion/styles.ts"],"names":["styled","css","COLORS","Z_INDEXES","AccordionMenuWrapper","div","AccordionItemContainer","props","displaySeparator","neutral_100","disabledState","white","neutral_300","ItemHeaderContainer","neutral_20","isDisabled","tabbedHere","focus","primary_500","primary_20","primary_700","primary_800","primary_100","HeaderIconContainer","ItemBodyContainer"],"mappings":"AAAA,OAAOA,MAAP,IAAiBC,GAAjB,QAA4B,mBAA5B;AACA,SAASC,MAAT,QAAuB,WAAvB;AACA,SAASC,SAAT,QAA0B,qBAA1B;AAEA,OAAO,MAAMC,oBAAoB,GAAGJ,MAAM,CAACK,GAAI;AAC/C;AACA;AACA;AACA;AACA,CALO;AAOP,OAAO,MAAMC,sBAAsB,GAAGN,MAAM,CAACK,GAAoC;AACjF;AACA;AACA;AACA;AACA,mBAAoBE,KAAD,IAAYA,KAAK,CAACC,gBAAN,GAA0B,aAAYN,MAAM,CAACO,WAAY,EAAzD,GAA6D,EAAI;AAChG,CANO;AAQP,MAAMC,aAAa,GAAGT,GAAI;AAC1B,gBAAgBC,MAAM,CAACS,KAAM;AAC7B,WAAWT,MAAM,CAACU,WAAY;AAC9B;AACA;AACA,aAAaV,MAAM,CAACU,WAAY;AAChC;AACA,CAPA;AASA,OAAO,MAAMC,mBAAmB,GAAGb,MAAM,CAACK,GAAqE;AAC/G;AACA;AACA;AACA;AACA;AACA;AACA,gBAAgBH,MAAM,CAACY,UAAW;AAClC,YAAaP,KAAD,IAAYA,KAAK,CAACQ,UAAN,GAAmB,aAAnB,GAAmC,SAAW;AACtE;AACA;AACA;AACA;AACA,IAAIR,KAAK,IAAIA,KAAK,CAACS,UAAN,GAAmBf,GAAI;AACpC,eAAeE,SAAS,CAACc,KAAM;AAC/B,+BAA+Bf,MAAM,CAACgB,WAAY,iBAAgBhB,MAAM,CAACgB,WAAY,GAFxE,GAE6E,EAAG;AAC7F;AACA,IAAKX,KAAD,IAAYA,KAAK,CAACQ,UAAN,GAAmBL,aAAnB,GAAmC,EAAI;AACvD;AACA,kBAAkBR,MAAM,CAACiB,UAAW;AACpC;AACA;AACA;AACA,aAAajB,MAAM,CAACkB,WAAY;AAChC;AACA;AACA;AACA,aAAalB,MAAM,CAACmB,WAAY;AAChC;AACA;AACA;AACA,aAAanB,MAAM,CAACkB,WAAY;AAChC;AACA;AACA;AACA,aAAalB,MAAM,CAACmB,WAAY;AAChC;AACA;AACA;AACA,kBAAkBnB,MAAM,CAACoB,WAAY;AACrC;AACA,CAzCO;AA2CP,OAAO,MAAMC,mBAAmB,GAAGvB,MAAM,CAACK,GAAI;AAC9C;AACA,CAFO;AAIP,OAAO,MAAMmB,iBAAiB,GAAGxB,MAAM,CAACK,GAAI;AAC5C;AACA;AACA,gBAAgBH,MAAM,CAACS,KAAM;AAC7B,CAJO","sourcesContent":["import styled, { css } from 'styled-components';\nimport { COLORS } from '../styles';\nimport { Z_INDEXES } from '../styles/z-indexes';\n\nexport const AccordionMenuWrapper = styled.div`\n min-width: 320px;\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n`;\n\nexport const AccordionItemContainer = styled.div<{ displaySeparator: boolean; }>`\n width: 100%;\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n border-bottom: ${(props) => (props.displaySeparator ? `1px solid ${COLORS.neutral_100}` : '')};\n`;\n\nconst disabledState = css`\n background: ${COLORS.white}!important;\n color: ${COLORS.neutral_300};\n pointer-events: none;\n svg {\n color: ${COLORS.neutral_300}!important;\n }\n`;\n\nexport const ItemHeaderContainer = styled.div<{ isDisabled: boolean, isActive: boolean, tabbedHere: boolean }>`\n position: relative;\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 12px 16px 11px 16px;\n cursor: pointer;\n background: ${COLORS.neutral_20};\n cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};\n svg:last-child {\n margin-left: auto;\n }\n outline: none;\n ${props => props.tabbedHere ? css`\n z-index: ${Z_INDEXES.focus};\n box-shadow: 0px 4px 12px ${COLORS.primary_500}, 0px 0px 8px ${COLORS.primary_500};` : ''}\n\n ${(props) => (props.isDisabled ? disabledState : '')}\n :hover {\n background: ${COLORS.primary_20};\n }\n\n :hover .headerLabel {\n color: ${COLORS.primary_700};\n }\n\n :active .headerLabel {\n color: ${COLORS.primary_800};\n }\n\n :hover svg {\n color: ${COLORS.primary_700};\n }\n\n :active svg {\n color: ${COLORS.primary_800};\n }\n\n :active {\n background: ${COLORS.primary_100};\n }\n`;\n\nexport const HeaderIconContainer = styled.div`\n margin-left: auto;\n`;\n\nexport const ItemBodyContainer = styled.div`\n padding: 0px 16px;\n margin: 12px 0;\n background: ${COLORS.white};\n`;\n"],"file":"styles.js"}
|
|
@@ -51,8 +51,7 @@ var AccordionItem = function AccordionItem(props) {
|
|
|
51
51
|
|
|
52
52
|
return /*#__PURE__*/_react.default.createElement(_styles.AccordionItemContainer, {
|
|
53
53
|
id: id,
|
|
54
|
-
displaySeparator: !isActive && !isLast
|
|
55
|
-
isDisabled: disabled !== null && disabled !== void 0 ? disabled : false
|
|
54
|
+
displaySeparator: !isActive && !isLast
|
|
56
55
|
}, /*#__PURE__*/_react.default.createElement(_styles.ItemHeaderContainer, {
|
|
57
56
|
tabIndex: !disabled ? 0 : -1,
|
|
58
57
|
onClick: function onClick() {
|
|
@@ -82,7 +81,7 @@ var AccordionItem = function AccordionItem(props) {
|
|
|
82
81
|
size: '24px'
|
|
83
82
|
}), /*#__PURE__*/_react.default.createElement(_.ComponentM, {
|
|
84
83
|
className: "headerLabel",
|
|
85
|
-
color: isActive ? _.COLORS.neutral_800 : disabled ? _.COLORS.neutral_300 :
|
|
84
|
+
color: isActive ? _.COLORS.neutral_800 : disabled ? _.COLORS.neutral_300 : _.COLORS.neutral_600
|
|
86
85
|
}, title), isActive ? /*#__PURE__*/_react.default.createElement(_icons.SystemIcons.ChevronUp, {
|
|
87
86
|
color: _.COLORS.neutral_800,
|
|
88
87
|
size: "20px"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/Accordion/AccordionItem.tsx"],"names":["AccordionItem","props","id","onSelect","isActive","title","icon","disabled","isLast","supressFocusRef","React","useRef","useState","tabbedHere","setTabbedHere","useEffect","e","key","current","cloneElement","size","COLORS","neutral_800","neutral_300","
|
|
1
|
+
{"version":3,"sources":["../../../src/Accordion/AccordionItem.tsx"],"names":["AccordionItem","props","id","onSelect","isActive","title","icon","disabled","isLast","supressFocusRef","React","useRef","useState","tabbedHere","setTabbedHere","useEffect","e","key","current","cloneElement","size","COLORS","neutral_800","neutral_300","neutral_600","children"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { COLORS, ComponentM, ComponentS } from '..';\nimport { SystemIcons } from '../icons';\nimport { AccordionItemProps } from './AccordionMenu';\nimport { AccordionItemContainer, HeaderIconContainer, ItemBodyContainer, ItemHeaderContainer } from './styles';\n\ninterface AccordionItemPropsInner extends AccordionItemProps {\n onSelect: (id: string) => void;\n isActive: boolean;\n isLast: boolean;\n}\n\nconst AccordionItem: React.FunctionComponent<AccordionItemPropsInner> = (props: AccordionItemPropsInner) => {\n const { id, onSelect, isActive, title, icon, disabled, isLast } = props;\n\n const supressFocusRef = React.useRef<any>(null);\n const [tabbedHere, setTabbedHere] = React.useState<boolean>(false);\n\n React.useEffect(() => {\n !!disabled && setTabbedHere(false);\n }, [disabled]);\n\n return (\n <AccordionItemContainer id={id} displaySeparator={!isActive && !isLast}>\n <ItemHeaderContainer\n tabIndex={!disabled ? 0 : -1}\n onClick={() => {\n if (!disabled) {\n onSelect(id);\n }\n }}\n onKeyDown={(e: any) => {\n if(e.key == 'Enter')\n onSelect(id);\n }}\n onBlur={() => {\n setTabbedHere(false);\n supressFocusRef.current = false;\n }}\n onFocus={() => {\n if(!disabled) {\n if (!supressFocusRef.current) setTabbedHere(true);\n else supressFocusRef.current = false;\n }\n }}\n onMouseDown={() => {\n if (!disabled && !tabbedHere) supressFocusRef.current = true;\n }}\n tabbedHere={tabbedHere}\n isActive={isActive}\n isDisabled={disabled ?? false}>\n {icon && React.cloneElement(icon as React.ReactElement, { size: '24px' })}\n <ComponentM className=\"headerLabel\" color={isActive ? COLORS.neutral_800 : disabled ? COLORS.neutral_300 : COLORS.neutral_600}>{title}</ComponentM>\n {isActive ? <SystemIcons.ChevronUp color={COLORS.neutral_800} size=\"20px\" /> : <SystemIcons.ChevronDown color={COLORS.neutral_600} size=\"20px\" />}\n </ItemHeaderContainer>\n {isActive && (\n <ItemBodyContainer>\n <ComponentS>{props.children}</ComponentS>\n </ItemBodyContainer>\n )}\n </AccordionItemContainer>\n );\n};\n\nexport default AccordionItem;\n"],"file":"AccordionItem.js"}
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
export declare const AccordionMenuWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
2
2
|
export declare const AccordionItemContainer: import("styled-components").StyledComponent<"div", any, {
|
|
3
3
|
displaySeparator: boolean;
|
|
4
|
-
isDisabled: boolean;
|
|
5
4
|
}, never>;
|
|
6
5
|
export declare const ItemHeaderContainer: import("styled-components").StyledComponent<"div", any, {
|
|
7
6
|
isDisabled: boolean;
|
|
@@ -25,16 +25,16 @@ var AccordionMenuWrapper = _styledComponents.default.div(_templateObject || (_te
|
|
|
25
25
|
|
|
26
26
|
exports.AccordionMenuWrapper = AccordionMenuWrapper;
|
|
27
27
|
|
|
28
|
-
var AccordionItemContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n width: 100%;\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n border-bottom: ", ";\n
|
|
28
|
+
var AccordionItemContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n width: 100%;\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n border-bottom: ", ";\n"])), function (props) {
|
|
29
29
|
return props.displaySeparator ? "1px solid ".concat(_styles.COLORS.neutral_100) : '';
|
|
30
|
-
}, function (props) {
|
|
31
|
-
return props.isDisabled ? 'not-allowed' : 'pointer';
|
|
32
30
|
});
|
|
33
31
|
|
|
34
32
|
exports.AccordionItemContainer = AccordionItemContainer;
|
|
35
33
|
var disabledState = (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n background: ", "!important;\n color: ", ";\n pointer-events: none;\n svg {\n color: ", "!important;\n }\n"])), _styles.COLORS.white, _styles.COLORS.neutral_300, _styles.COLORS.neutral_300);
|
|
36
34
|
|
|
37
|
-
var ItemHeaderContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n position: relative;\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 12px 16px 11px 16px;\n cursor: pointer;\n background: ", ";\n svg:last-child {\n margin-left: auto;\n }\n outline: none;\n ", "\n\n ", "\n :hover {\n background: ", ";\n }\n\n :hover .headerLabel {\n color: ", ";\n }\n\n :active .headerLabel {\n color: ", ";\n }\n\n :hover svg {\n color: ", ";\n }\n\n :active svg {\n color: ", ";\n }\n\n :active {\n background: ", ";\n }\n"])), _styles.COLORS.neutral_20, function (props) {
|
|
35
|
+
var ItemHeaderContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n position: relative;\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 12px 16px 11px 16px;\n cursor: pointer;\n background: ", ";\n cursor: ", ";\n svg:last-child {\n margin-left: auto;\n }\n outline: none;\n ", "\n\n ", "\n :hover {\n background: ", ";\n }\n\n :hover .headerLabel {\n color: ", ";\n }\n\n :active .headerLabel {\n color: ", ";\n }\n\n :hover svg {\n color: ", ";\n }\n\n :active svg {\n color: ", ";\n }\n\n :active {\n background: ", ";\n }\n"])), _styles.COLORS.neutral_20, function (props) {
|
|
36
|
+
return props.isDisabled ? 'not-allowed' : 'pointer';
|
|
37
|
+
}, function (props) {
|
|
38
38
|
return props.tabbedHere ? (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n z-index: ", ";\n box-shadow: 0px 4px 12px ", ", 0px 0px 8px ", ";"])), _zIndexes.Z_INDEXES.focus, _styles.COLORS.primary_500, _styles.COLORS.primary_500) : '';
|
|
39
39
|
}, function (props) {
|
|
40
40
|
return props.isDisabled ? disabledState : '';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/Accordion/styles.ts"],"names":["AccordionMenuWrapper","styled","div","AccordionItemContainer","props","displaySeparator","COLORS","neutral_100","
|
|
1
|
+
{"version":3,"sources":["../../../src/Accordion/styles.ts"],"names":["AccordionMenuWrapper","styled","div","AccordionItemContainer","props","displaySeparator","COLORS","neutral_100","disabledState","css","white","neutral_300","ItemHeaderContainer","neutral_20","isDisabled","tabbedHere","Z_INDEXES","focus","primary_500","primary_20","primary_700","primary_800","primary_100","HeaderIconContainer","ItemBodyContainer"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;;;;;;;;;AAEO,IAAMA,oBAAoB,GAAGC,0BAAOC,GAAV,oKAA1B;;;;AAOA,IAAMC,sBAAsB,GAAGF,0BAAOC,GAAV,0LAKhB,UAACE,KAAD;AAAA,SAAYA,KAAK,CAACC,gBAAN,uBAAsCC,eAAOC,WAA7C,IAA6D,EAAzE;AAAA,CALgB,CAA5B;;;AAQP,IAAMC,aAAa,OAAGC,qBAAH,6LACHH,eAAOI,KADJ,EAERJ,eAAOK,WAFC,EAKNL,eAAOK,WALD,CAAnB;;AASO,IAAMC,mBAAmB,GAAGX,0BAAOC,GAAV,mlBAOhBI,eAAOO,UAPS,EAQpB,UAACT,KAAD;AAAA,SAAYA,KAAK,CAACU,UAAN,GAAmB,aAAnB,GAAmC,SAA/C;AAAA,CARoB,EAa5B,UAAAV,KAAK;AAAA,SAAIA,KAAK,CAACW,UAAN,OAAmBN,qBAAnB,mJACEO,oBAAUC,KADZ,EAEkBX,eAAOY,WAFzB,EAEqDZ,eAAOY,WAF5D,IAE6E,EAFjF;AAAA,CAbuB,EAiB5B,UAACd,KAAD;AAAA,SAAYA,KAAK,CAACU,UAAN,GAAmBN,aAAnB,GAAmC,EAA/C;AAAA,CAjB4B,EAmBdF,eAAOa,UAnBO,EAuBnBb,eAAOc,WAvBY,EA2BnBd,eAAOe,WA3BY,EA+BnBf,eAAOc,WA/BY,EAmCnBd,eAAOe,WAnCY,EAuCdf,eAAOgB,WAvCO,CAAzB;;;;AA2CA,IAAMC,mBAAmB,GAAGtB,0BAAOC,GAAV,+FAAzB;;;;AAIA,IAAMsB,iBAAiB,GAAGvB,0BAAOC,GAAV,wIAGdI,eAAOI,KAHO,CAAvB","sourcesContent":["import styled, { css } from 'styled-components';\nimport { COLORS } from '../styles';\nimport { Z_INDEXES } from '../styles/z-indexes';\n\nexport const AccordionMenuWrapper = styled.div`\n min-width: 320px;\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n`;\n\nexport const AccordionItemContainer = styled.div<{ displaySeparator: boolean; }>`\n width: 100%;\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n border-bottom: ${(props) => (props.displaySeparator ? `1px solid ${COLORS.neutral_100}` : '')};\n`;\n\nconst disabledState = css`\n background: ${COLORS.white}!important;\n color: ${COLORS.neutral_300};\n pointer-events: none;\n svg {\n color: ${COLORS.neutral_300}!important;\n }\n`;\n\nexport const ItemHeaderContainer = styled.div<{ isDisabled: boolean, isActive: boolean, tabbedHere: boolean }>`\n position: relative;\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 12px 16px 11px 16px;\n cursor: pointer;\n background: ${COLORS.neutral_20};\n cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};\n svg:last-child {\n margin-left: auto;\n }\n outline: none;\n ${props => props.tabbedHere ? css`\n z-index: ${Z_INDEXES.focus};\n box-shadow: 0px 4px 12px ${COLORS.primary_500}, 0px 0px 8px ${COLORS.primary_500};` : ''}\n\n ${(props) => (props.isDisabled ? disabledState : '')}\n :hover {\n background: ${COLORS.primary_20};\n }\n\n :hover .headerLabel {\n color: ${COLORS.primary_700};\n }\n\n :active .headerLabel {\n color: ${COLORS.primary_800};\n }\n\n :hover svg {\n color: ${COLORS.primary_700};\n }\n\n :active svg {\n color: ${COLORS.primary_800};\n }\n\n :active {\n background: ${COLORS.primary_100};\n }\n`;\n\nexport const HeaderIconContainer = styled.div`\n margin-left: auto;\n`;\n\nexport const ItemBodyContainer = styled.div`\n padding: 0px 16px;\n margin: 12px 0;\n background: ${COLORS.white};\n`;\n"],"file":"styles.js"}
|
|
@@ -48,8 +48,7 @@
|
|
|
48
48
|
|
|
49
49
|
return /*#__PURE__*/_react2.default.createElement(_styles.AccordionItemContainer, {
|
|
50
50
|
id: id,
|
|
51
|
-
displaySeparator: !isActive && !isLast
|
|
52
|
-
isDisabled: disabled ?? false
|
|
51
|
+
displaySeparator: !isActive && !isLast
|
|
53
52
|
}, /*#__PURE__*/_react2.default.createElement(_styles.ItemHeaderContainer, {
|
|
54
53
|
tabIndex: !disabled ? 0 : -1,
|
|
55
54
|
onClick: () => {
|
|
@@ -79,7 +78,7 @@
|
|
|
79
78
|
size: '24px'
|
|
80
79
|
}), /*#__PURE__*/_react2.default.createElement(_.ComponentM, {
|
|
81
80
|
className: "headerLabel",
|
|
82
|
-
color: isActive ? _.COLORS.neutral_800 : disabled ? _.COLORS.neutral_300 :
|
|
81
|
+
color: isActive ? _.COLORS.neutral_800 : disabled ? _.COLORS.neutral_300 : _.COLORS.neutral_600
|
|
83
82
|
}, title), isActive ? /*#__PURE__*/_react2.default.createElement(_icons.SystemIcons.ChevronUp, {
|
|
84
83
|
color: _.COLORS.neutral_800,
|
|
85
84
|
size: "20px"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/Accordion/AccordionItem.tsx"],"names":["onSelect","isActive","isLast","AccordionItem","props","supressFocusRef","React","setTabbedHere","
|
|
1
|
+
{"version":3,"sources":["../../../src/Accordion/AccordionItem.tsx"],"names":["onSelect","isActive","isLast","AccordionItem","props","supressFocusRef","React","setTabbedHere","e","disabled","icon","size","COLORS","neutral_600"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { COLORS, ComponentM, ComponentS } from '..';\nimport { SystemIcons } from '../icons';\nimport { AccordionItemProps } from './AccordionMenu';\nimport { AccordionItemContainer, HeaderIconContainer, ItemBodyContainer, ItemHeaderContainer } from './styles';\n\ninterface AccordionItemPropsInner extends AccordionItemProps {\n onSelect: (id: string) => void;\n isActive: boolean;\n isLast: boolean;\n}\n\nconst AccordionItem: React.FunctionComponent<AccordionItemPropsInner> = (props: AccordionItemPropsInner) => {\n const { id, onSelect, isActive, title, icon, disabled, isLast } = props;\n\n const supressFocusRef = React.useRef<any>(null);\n const [tabbedHere, setTabbedHere] = React.useState<boolean>(false);\n\n React.useEffect(() => {\n !!disabled && setTabbedHere(false);\n }, [disabled]);\n\n return (\n <AccordionItemContainer id={id} displaySeparator={!isActive && !isLast}>\n <ItemHeaderContainer\n tabIndex={!disabled ? 0 : -1}\n onClick={() => {\n if (!disabled) {\n onSelect(id);\n }\n }}\n onKeyDown={(e: any) => {\n if(e.key == 'Enter')\n onSelect(id);\n }}\n onBlur={() => {\n setTabbedHere(false);\n supressFocusRef.current = false;\n }}\n onFocus={() => {\n if(!disabled) {\n if (!supressFocusRef.current) setTabbedHere(true);\n else supressFocusRef.current = false;\n }\n }}\n onMouseDown={() => {\n if (!disabled && !tabbedHere) supressFocusRef.current = true;\n }}\n tabbedHere={tabbedHere}\n isActive={isActive}\n isDisabled={disabled ?? false}>\n {icon && React.cloneElement(icon as React.ReactElement, { size: '24px' })}\n <ComponentM className=\"headerLabel\" color={isActive ? COLORS.neutral_800 : disabled ? COLORS.neutral_300 : COLORS.neutral_600}>{title}</ComponentM>\n {isActive ? <SystemIcons.ChevronUp color={COLORS.neutral_800} size=\"20px\" /> : <SystemIcons.ChevronDown color={COLORS.neutral_600} size=\"20px\" />}\n </ItemHeaderContainer>\n {isActive && (\n <ItemBodyContainer>\n <ComponentS>{props.children}</ComponentS>\n </ItemBodyContainer>\n )}\n </AccordionItemContainer>\n );\n};\n\nexport default AccordionItem;\n"],"file":"AccordionItem.js"}
|
|
@@ -38,7 +38,6 @@
|
|
|
38
38
|
flex-direction: column;
|
|
39
39
|
box-sizing: border-box;
|
|
40
40
|
border-bottom: ${props => props.displaySeparator ? `1px solid ${_styles.COLORS.neutral_100}` : ''};
|
|
41
|
-
cursor: ${props => props.isDisabled ? 'not-allowed' : 'pointer'};
|
|
42
41
|
`;
|
|
43
42
|
const disabledState = _styledComponents.css`
|
|
44
43
|
background: ${_styles.COLORS.white}!important;
|
|
@@ -56,6 +55,7 @@
|
|
|
56
55
|
padding: 12px 16px 11px 16px;
|
|
57
56
|
cursor: pointer;
|
|
58
57
|
background: ${_styles.COLORS.neutral_20};
|
|
58
|
+
cursor: ${props => props.isDisabled ? 'not-allowed' : 'pointer'};
|
|
59
59
|
svg:last-child {
|
|
60
60
|
margin-left: auto;
|
|
61
61
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/Accordion/styles.ts"],"names":["AccordionMenuWrapper","styled","div","AccordionItemContainer","props","COLORS","neutral_100","disabledState","css","white","neutral_300","ItemHeaderContainer","neutral_20","Z_INDEXES","focus","primary_500","primary_20","primary_700","primary_800","primary_100","HeaderIconContainer","ItemBodyContainer"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIO,QAAMA,oBAAoB,WAApBA,oBAAoB,GAAGC,2BAAOC,GAAI;AAC/C;AACA;AACA;AACA;AAJO,CAAA;AAOA,QAAMC,sBAAsB,WAAtBA,sBAAsB,GAAGF,2BAAOC,
|
|
1
|
+
{"version":3,"sources":["../../../src/Accordion/styles.ts"],"names":["AccordionMenuWrapper","styled","div","AccordionItemContainer","props","COLORS","neutral_100","disabledState","css","white","neutral_300","ItemHeaderContainer","neutral_20","Z_INDEXES","focus","primary_500","primary_20","primary_700","primary_800","primary_100","HeaderIconContainer","ItemBodyContainer"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIO,QAAMA,oBAAoB,WAApBA,oBAAoB,GAAGC,2BAAOC,GAAI;AAC/C;AACA;AACA;AACA;AAJO,CAAA;AAOA,QAAMC,sBAAsB,WAAtBA,sBAAsB,GAAGF,2BAAOC,GAAoC;AACjF;AACA;AACA;AACA;AACA,mBAAoBE,KAAD,IAAYA,KAAK,CAALA,gBAAAA,GAA0B,aAAYC,eAAOC,WAA7CF,EAAAA,GAA6D,EAAI;AALzF,CAAA;AAQP,QAAMG,aAAa,GAAGC,qBAAI;AAC1B,gBAAgBH,eAAOI,KAAM;AAC7B,WAAWJ,eAAOK,WAAY;AAC9B;AACA;AACA,aAAaL,eAAOK,WAAY;AAChC;AANA,CAAA;AASO,QAAMC,mBAAmB,WAAnBA,mBAAmB,GAAGV,2BAAOC,GAAqE;AAC/G;AACA;AACA;AACA;AACA;AACA;AACA,gBAAgBG,eAAOO,UAAW;AAClC,YAAaR,KAAD,IAAYA,KAAK,CAALA,UAAAA,GAAAA,aAAAA,GAAmC,SAAW;AACtE;AACA;AACA;AACA;AACA,IAAIA,KAAK,IAAIA,KAAK,CAALA,UAAAA,GAAmBI,qBAAI;AACpC,eAAeK,oBAAUC,KAAM;AAC/B,+BAA+BT,eAAOU,WAAY,iBAAgBV,eAAOU,WAF5DX,GAAAA,GAE6E,EAAG;AAC7F;AACA,IAAKA,KAAD,IAAYA,KAAK,CAALA,UAAAA,GAAAA,aAAAA,GAAmC,EAAI;AACvD;AACA,kBAAkBC,eAAOW,UAAW;AACpC;AACA;AACA;AACA,aAAaX,eAAOY,WAAY;AAChC;AACA;AACA;AACA,aAAaZ,eAAOa,WAAY;AAChC;AACA;AACA;AACA,aAAab,eAAOY,WAAY;AAChC;AACA;AACA;AACA,aAAaZ,eAAOa,WAAY;AAChC;AACA;AACA;AACA,kBAAkBb,eAAOc,WAAY;AACrC;AAxCO,CAAA;AA2CA,QAAMC,mBAAmB,WAAnBA,mBAAmB,GAAGnB,2BAAOC,GAAI;AAC9C;AADO,CAAA;AAIA,QAAMmB,iBAAiB,WAAjBA,iBAAiB,GAAGpB,2BAAOC,GAAI;AAC5C;AACA;AACA,gBAAgBG,eAAOI,KAAM;AAHtB,CAAA","sourcesContent":["import styled, { css } from 'styled-components';\nimport { COLORS } from '../styles';\nimport { Z_INDEXES } from '../styles/z-indexes';\n\nexport const AccordionMenuWrapper = styled.div`\n min-width: 320px;\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n`;\n\nexport const AccordionItemContainer = styled.div<{ displaySeparator: boolean; }>`\n width: 100%;\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n border-bottom: ${(props) => (props.displaySeparator ? `1px solid ${COLORS.neutral_100}` : '')};\n`;\n\nconst disabledState = css`\n background: ${COLORS.white}!important;\n color: ${COLORS.neutral_300};\n pointer-events: none;\n svg {\n color: ${COLORS.neutral_300}!important;\n }\n`;\n\nexport const ItemHeaderContainer = styled.div<{ isDisabled: boolean, isActive: boolean, tabbedHere: boolean }>`\n position: relative;\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 12px 16px 11px 16px;\n cursor: pointer;\n background: ${COLORS.neutral_20};\n cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};\n svg:last-child {\n margin-left: auto;\n }\n outline: none;\n ${props => props.tabbedHere ? css`\n z-index: ${Z_INDEXES.focus};\n box-shadow: 0px 4px 12px ${COLORS.primary_500}, 0px 0px 8px ${COLORS.primary_500};` : ''}\n\n ${(props) => (props.isDisabled ? disabledState : '')}\n :hover {\n background: ${COLORS.primary_20};\n }\n\n :hover .headerLabel {\n color: ${COLORS.primary_700};\n }\n\n :active .headerLabel {\n color: ${COLORS.primary_800};\n }\n\n :hover svg {\n color: ${COLORS.primary_700};\n }\n\n :active svg {\n color: ${COLORS.primary_800};\n }\n\n :active {\n background: ${COLORS.primary_100};\n }\n`;\n\nexport const HeaderIconContainer = styled.div`\n margin-left: auto;\n`;\n\nexport const ItemBodyContainer = styled.div`\n padding: 0px 16px;\n margin: 12px 0;\n background: ${COLORS.white};\n`;\n"],"file":"styles.js"}
|