@laerdal/life-react-components 3.3.1-dev.3.full → 3.3.1-dev.5.full

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 (6) hide show
  1. package/dist/Accordion/ContentAccordion.cjs +14 -6
  2. package/dist/Accordion/ContentAccordion.cjs.map +1 -1
  3. package/dist/Accordion/ContentAccordion.d.ts +1 -0
  4. package/dist/Accordion/ContentAccordion.js +14 -6
  5. package/dist/Accordion/ContentAccordion.js.map +1 -1
  6. package/package.json +1 -1
package/dist/Accordion/ContentAccordion.cjs CHANGED
@@ -18,7 +18,7 @@ var _icons = require("../icons");
18
18
  var _styles = require("../styles");
19
19
  var _common = require("../common");
20
20
  var _jsxRuntime = require("react/jsx-runtime");
21
- var _excluded = ["items", "multi", "size", "className"],
21
+ var _excluded = ["items", "multi", "size", "className", "onItemStateChanged"],
22
22
  _excluded2 = ["id", "title", "header", "body", "footer", "disabled", "active"];
23
23
  var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
24
24
  function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -48,6 +48,7 @@ var ContentAccordion = function ContentAccordion(_ref) {
48
48
  _ref$size = _ref.size,
49
49
  size = _ref$size === void 0 ? _types.Size.Medium : _ref$size,
50
50
  className = _ref.className,
51
+ onItemStateChanged = _ref.onItemStateChanged,
51
52
  rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
52
53
  var _React$useState = _react.default.useState([]),
53
54
  _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
@@ -73,14 +74,20 @@ var ContentAccordion = function ContentAccordion(_ref) {
73
74
  var onItemClick = function onItemClick(item) {
74
75
  if (item.disabled) return;
75
76
  if (opened.includes(item.id)) {
76
- setOpened(opened.filter(function (key) {
77
+ var newOpened = opened.filter(function (key) {
77
78
  return key !== item.id;
78
- }));
79
+ });
80
+ setOpened(newOpened);
81
+ onItemStateChanged && onItemStateChanged(newOpened);
79
82
  } else {
80
83
  if (multi) {
81
- setOpened([].concat((0, _toConsumableArray2.default)(opened), [item.id]));
84
+ var _newOpened = [].concat((0, _toConsumableArray2.default)(opened), [item.id]);
85
+ setOpened(_newOpened);
86
+ onItemStateChanged && onItemStateChanged(_newOpened);
82
87
  } else {
83
- setOpened([item.id]);
88
+ var _newOpened2 = [item.id];
89
+ setOpened(_newOpened2);
90
+ onItemStateChanged && onItemStateChanged(_newOpened2);
84
91
  }
85
92
  }
86
93
  };
@@ -155,7 +162,8 @@ ContentAccordion.propTypes = {
155
162
  disabled: _propTypes.default.bool,
156
163
  active: _propTypes.default.bool
157
164
  })).isRequired,
158
- multi: _propTypes.default.bool
165
+ multi: _propTypes.default.bool,
166
+ onItemStateChanged: _propTypes.default.func
159
167
  };
160
168
  var _default = ContentAccordion;
161
169
  exports.default = _default;
package/dist/Accordion/ContentAccordion.cjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ContentAccordion.cjs","names":["ContentAccordionItemHeader","styled","div","COLORS","neutral_600","primary_700","primary_20","Z_INDEXES","hover","focusStyles","primary_800","primary_100","active","ContentAccordionItemHeaderIcon","ContentAccordionItemHeaderText","ContentAccordionItemContent","ContentAccordionItemContentHeader","ContentAccordionItemContentBody","p","ContentAccordionItemContentFooter","ContentAccordionItem","neutral_100","neutral_300","ContentAccordionWrapper","ComponentSStyling","ComponentTextStyle","Regular","Bold","black","ComponentMStyling","ComponentLStyling","ContentAccordion","items","multi","size","Size","Medium","className","rest","React","useState","opened","setOpened","useEffect","filter","item","map","id","find","onItemClick","disabled","includes","key","renderItem","title","header","body","footer","isActive","concat","undefined","defaultOnMouseDownHandler","event","cls","trim"],"sources":["../../src/Accordion/ContentAccordion.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport {Size} from '../types';\nimport {SystemIcons} from '../icons';\nimport {\n COLORS,\n ComponentLStyling,\n ComponentMStyling,\n ComponentSStyling,\n ComponentTextStyle,\n focusStyles,\n Z_INDEXES,\n} from '../styles';\nimport {defaultOnMouseDownHandler} from '../common';\n\nexport const ContentAccordionItemHeader = styled.div`\n display: flex;\n align-items: center;\n box-sizing: border-box;\n min-height: 48px;\n color: ${COLORS.neutral_600};\n cursor: pointer;\n\n &:hover {\n color: ${COLORS.primary_700};\n background-color: ${COLORS.primary_20};\n z-index: ${Z_INDEXES.hover};\n }\n\n &:focus {\n ${focusStyles}\n }\n\n &:active {\n color: ${COLORS.primary_800};\n background-color: ${COLORS.primary_100};\n z-index: ${Z_INDEXES.active};\n }\n`;\n\nexport const ContentAccordionItemHeaderIcon = styled.div`\n width: 24px;\n height: 24px;\n\n svg {\n width: 24px;\n height: 24px;\n }\n`;\n\nexport const ContentAccordionItemHeaderText = styled.div``;\n\nexport const ContentAccordionItemContent = styled.div`\n display: none;\n flex-direction: column;\n`;\n\nexport const ContentAccordionItemContentHeader = styled.div``;\n\nexport const ContentAccordionItemContentBody = styled.p``;\n\nexport const ContentAccordionItemContentFooter = styled.div``;\n\nexport const ContentAccordionItem = styled.div`\n display: flex;\n flex-direction: column;\n border-top: 1px solid ${COLORS.neutral_100};\n\n &.active {\n ${ContentAccordionItemContent} {\n display: flex;\n }\n }\n\n &.disabled {\n ${ContentAccordionItemHeader} {\n color: ${COLORS.neutral_300};\n cursor: not-allowed;\n pointer-events: none;\n }\n }\n`;\n\nexport const ContentAccordionWrapper = styled.div`\n width: 100%;\n position: relative;\n\n ${ContentAccordionItem}:last-child {\n border-bottom: 1px solid ${COLORS.neutral_100};\n }\n\n &.small {\n min-width: 320px;\n max-width: 528px;\n\n ${ContentAccordionItemHeader} {\n gap: 8px;\n padding: 0 8px;\n ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n }\n\n ${ContentAccordionItemContent} {\n padding: 0 8px 16px 40px;\n gap: 8px;\n\n ${ContentAccordionItemContentHeader} {\n ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.black)}\n }\n\n ${ContentAccordionItemContentBody} {\n //TODO\n }\n }\n }\n\n &.medium {\n min-width: 344px;\n max-width: 584px;\n\n ${ContentAccordionItemHeader} {\n gap: 12px;\n padding: 0 12px;\n ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n }\n\n ${ContentAccordionItemContent} {\n padding: 8px 12px 24px 48px;\n gap: 12px;\n\n ${ContentAccordionItemContentHeader} {\n ${ComponentMStyling(ComponentTextStyle.Bold, COLORS.black)}\n }\n\n ${ContentAccordionItemContentBody} {\n //TODO\n }\n }\n }\n\n &.large {\n min-width: 384px;\n max-width: 656px;\n\n ${ContentAccordionItemHeader} {\n gap: 16px;\n padding: 0 16px;\n ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n }\n\n ${ContentAccordionItemContent} {\n padding: 16px 16px 32px 56px;\n gap: 16px;\n\n ${ContentAccordionItemContentHeader} {\n ${ComponentLStyling(ComponentTextStyle.Bold, COLORS.black)}\n }\n\n ${ContentAccordionItemContentBody} {\n //TODO\n }\n }\n }\n`;\n\nexport interface ContentAccordionItem extends Omit<React.HTMLAttributes<HTMLDivElement>, 'id' | 'onMouseDown' | 'onClick' | 'onKeyDown'> {\n id: string;\n title: string;\n header?: string;\n body: any;\n footer?: any;\n disabled?: boolean;\n active?: boolean;\n}\n\nexport interface ContentAccordionProps extends React.HTMLAttributes<HTMLDivElement> {\n items: ContentAccordionItem[];\n multi?: boolean;\n size?: Size.Small | Size.Medium | Size.Large;\n}\n\nexport const ContentAccordion: React.FunctionComponent<ContentAccordionProps> = ({\n items,\n multi = false,\n size = Size.Medium,\n className,\n ...rest\n }) => {\n const [opened, setOpened] = React.useState<string[]>([]);\n\n React.useEffect(() => {\n if (multi) {\n setOpened(items.filter((item) => item.active).map((item) => item.id));\n } else {\n let active = items.find((item) => !!item.active)?.id;\n if (active) {\n setOpened([active]);\n }\n }\n }, [items, multi]);\n\n const onItemClick = (item: ContentAccordionItem) => {\n if (item.disabled) return;\n if (opened.includes(item.id)) {\n setOpened(opened.filter((key) => key !== item.id));\n } else {\n if (multi) {\n setOpened([...opened, item.id]);\n } else {\n setOpened([item.id]);\n }\n }\n };\n\n const renderItem = (item: ContentAccordionItem) => {\n const {id, title, header, body, footer, disabled, active, ...rest} = item;\n const isActive = opened.includes(id);\n\n return (\n <ContentAccordionItem key={id} id={`item_${id}`}\n className={''.concat(isActive ? ' active' : '').concat(item.disabled ? ' disabled' : '')}>\n <ContentAccordionItemHeader\n role=\"button\"\n id={`headerFor_${id}`}\n aria-expanded={isActive}\n aria-controls={`itemContentFor_${id}`}\n tabIndex={!disabled ? 0 : undefined}\n onMouseDown={defaultOnMouseDownHandler}\n onClick={() => !disabled && onItemClick(item)}\n onKeyDown={(event) => event.key === 'Enter' && onItemClick(item)}\n {...rest}>\n <ContentAccordionItemHeaderIcon>\n {multi ? isActive ? <SystemIcons.Minus aria-hidden=\"true\" /> : <SystemIcons.Plus aria-hidden=\"true\" /> : isActive ?\n <SystemIcons.ChevronDown aria-hidden=\"true\" /> : <SystemIcons.ChevronRight aria-hidden=\"true\" />}\n </ContentAccordionItemHeaderIcon>\n <ContentAccordionItemHeaderText>{title}</ContentAccordionItemHeaderText>\n </ContentAccordionItemHeader>\n <ContentAccordionItemContent id={`itemContentFor_${id}`}>\n {header && <ContentAccordionItemContentHeader>{header}</ContentAccordionItemContentHeader>}\n <ContentAccordionItemContentBody>{body}</ContentAccordionItemContentBody>\n {footer && <ContentAccordionItemContentFooter>{footer}</ContentAccordionItemContentFooter>}\n </ContentAccordionItemContent>\n </ContentAccordionItem>\n );\n };\n\n const cls = `${size} ${className ?? ''}`.trim();\n\n return <ContentAccordionWrapper className={cls}>\n {items.map((item) => renderItem(item))}\n </ContentAccordionWrapper>;\n};\n\nexport default ContentAccordion;\n"],"mappings":"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"}
1
+ {"version":3,"file":"ContentAccordion.cjs","names":["ContentAccordionItemHeader","styled","div","COLORS","neutral_600","primary_700","primary_20","Z_INDEXES","hover","focusStyles","primary_800","primary_100","active","ContentAccordionItemHeaderIcon","ContentAccordionItemHeaderText","ContentAccordionItemContent","ContentAccordionItemContentHeader","ContentAccordionItemContentBody","p","ContentAccordionItemContentFooter","ContentAccordionItem","neutral_100","neutral_300","ContentAccordionWrapper","ComponentSStyling","ComponentTextStyle","Regular","Bold","black","ComponentMStyling","ComponentLStyling","ContentAccordion","items","multi","size","Size","Medium","className","onItemStateChanged","rest","React","useState","opened","setOpened","useEffect","filter","item","map","id","find","onItemClick","disabled","includes","newOpened","key","renderItem","title","header","body","footer","isActive","concat","undefined","defaultOnMouseDownHandler","event","cls","trim"],"sources":["../../src/Accordion/ContentAccordion.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport {Size} from '../types';\nimport {SystemIcons} from '../icons';\nimport {\n COLORS,\n ComponentLStyling,\n ComponentMStyling,\n ComponentSStyling,\n ComponentTextStyle,\n focusStyles,\n Z_INDEXES,\n} from '../styles';\nimport {defaultOnMouseDownHandler} from '../common';\n\nexport const ContentAccordionItemHeader = styled.div`\n display: flex;\n align-items: center;\n box-sizing: border-box;\n min-height: 48px;\n color: ${COLORS.neutral_600};\n cursor: pointer;\n\n &:hover {\n color: ${COLORS.primary_700};\n background-color: ${COLORS.primary_20};\n z-index: ${Z_INDEXES.hover};\n }\n\n &:focus {\n ${focusStyles}\n }\n\n &:active {\n color: ${COLORS.primary_800};\n background-color: ${COLORS.primary_100};\n z-index: ${Z_INDEXES.active};\n }\n`;\n\nexport const ContentAccordionItemHeaderIcon = styled.div`\n width: 24px;\n height: 24px;\n\n svg {\n width: 24px;\n height: 24px;\n }\n`;\n\nexport const ContentAccordionItemHeaderText = styled.div``;\n\nexport const ContentAccordionItemContent = styled.div`\n display: none;\n flex-direction: column;\n`;\n\nexport const ContentAccordionItemContentHeader = styled.div``;\n\nexport const ContentAccordionItemContentBody = styled.p``;\n\nexport const ContentAccordionItemContentFooter = styled.div``;\n\nexport const ContentAccordionItem = styled.div`\n display: flex;\n flex-direction: column;\n border-top: 1px solid ${COLORS.neutral_100};\n\n &.active {\n ${ContentAccordionItemContent} {\n display: flex;\n }\n }\n\n &.disabled {\n ${ContentAccordionItemHeader} {\n color: ${COLORS.neutral_300};\n cursor: not-allowed;\n pointer-events: none;\n }\n }\n`;\n\nexport const ContentAccordionWrapper = styled.div`\n width: 100%;\n position: relative;\n\n ${ContentAccordionItem}:last-child {\n border-bottom: 1px solid ${COLORS.neutral_100};\n }\n\n &.small {\n min-width: 320px;\n max-width: 528px;\n\n ${ContentAccordionItemHeader} {\n gap: 8px;\n padding: 0 8px;\n ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n }\n\n ${ContentAccordionItemContent} {\n padding: 0 8px 16px 40px;\n gap: 8px;\n\n ${ContentAccordionItemContentHeader} {\n ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.black)}\n }\n\n ${ContentAccordionItemContentBody} {\n //TODO\n }\n }\n }\n\n &.medium {\n min-width: 344px;\n max-width: 584px;\n\n ${ContentAccordionItemHeader} {\n gap: 12px;\n padding: 0 12px;\n ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n }\n\n ${ContentAccordionItemContent} {\n padding: 8px 12px 24px 48px;\n gap: 12px;\n\n ${ContentAccordionItemContentHeader} {\n ${ComponentMStyling(ComponentTextStyle.Bold, COLORS.black)}\n }\n\n ${ContentAccordionItemContentBody} {\n //TODO\n }\n }\n }\n\n &.large {\n min-width: 384px;\n max-width: 656px;\n\n ${ContentAccordionItemHeader} {\n gap: 16px;\n padding: 0 16px;\n ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n }\n\n ${ContentAccordionItemContent} {\n padding: 16px 16px 32px 56px;\n gap: 16px;\n\n ${ContentAccordionItemContentHeader} {\n ${ComponentLStyling(ComponentTextStyle.Bold, COLORS.black)}\n }\n\n ${ContentAccordionItemContentBody} {\n //TODO\n }\n }\n }\n`;\n\nexport interface ContentAccordionItem extends Omit<React.HTMLAttributes<HTMLDivElement>, 'id' | 'onMouseDown' | 'onClick' | 'onKeyDown'> {\n id: string;\n title: string;\n header?: string;\n body: any;\n footer?: any;\n disabled?: boolean;\n active?: boolean;\n}\n\nexport interface ContentAccordionProps extends React.HTMLAttributes<HTMLDivElement> {\n items: ContentAccordionItem[];\n multi?: boolean;\n size?: Size.Small | Size.Medium | Size.Large;\n onItemStateChanged?: (opened: string[]) => void; \n}\n\nexport const ContentAccordion: React.FunctionComponent<ContentAccordionProps> = ({\n items,\n multi = false,\n size = Size.Medium,\n className,\n onItemStateChanged,\n ...rest\n }) => {\n const [opened, setOpened] = React.useState<string[]>([]);\n\n React.useEffect(() => {\n if (multi) {\n setOpened(items.filter((item) => item.active).map((item) => item.id));\n } else {\n let active = items.find((item) => !!item.active)?.id;\n if (active) {\n setOpened([active]);\n }\n }\n }, [items, multi]);\n\n const onItemClick = (item: ContentAccordionItem) => {\n if (item.disabled) return;\n if (opened.includes(item.id)) {\n const newOpened = opened.filter((key) => key !== item.id);\n setOpened(newOpened);\n onItemStateChanged && onItemStateChanged(newOpened);\n } else {\n if (multi) {\n const newOpened = [...opened, item.id];\n setOpened(newOpened);\n onItemStateChanged && onItemStateChanged(newOpened);\n } else {\n const newOpened = [item.id];\n setOpened(newOpened);\n onItemStateChanged && onItemStateChanged(newOpened);\n }\n }\n };\n\n const renderItem = (item: ContentAccordionItem) => {\n const {id, title, header, body, footer, disabled, active, ...rest} = item;\n const isActive = opened.includes(id);\n\n return (\n <ContentAccordionItem key={id} id={`item_${id}`}\n className={''.concat(isActive ? ' active' : '').concat(item.disabled ? ' disabled' : '')}>\n <ContentAccordionItemHeader\n role=\"button\"\n id={`headerFor_${id}`}\n aria-expanded={isActive}\n aria-controls={`itemContentFor_${id}`}\n tabIndex={!disabled ? 0 : undefined}\n onMouseDown={defaultOnMouseDownHandler}\n onClick={() => !disabled && onItemClick(item)}\n onKeyDown={(event) => event.key === 'Enter' && onItemClick(item)}\n {...rest}>\n <ContentAccordionItemHeaderIcon>\n {multi ? isActive ? <SystemIcons.Minus aria-hidden=\"true\" /> : <SystemIcons.Plus aria-hidden=\"true\" /> : isActive ?\n <SystemIcons.ChevronDown aria-hidden=\"true\" /> : <SystemIcons.ChevronRight aria-hidden=\"true\" />}\n </ContentAccordionItemHeaderIcon>\n <ContentAccordionItemHeaderText>{title}</ContentAccordionItemHeaderText>\n </ContentAccordionItemHeader>\n <ContentAccordionItemContent id={`itemContentFor_${id}`}>\n {header && <ContentAccordionItemContentHeader>{header}</ContentAccordionItemContentHeader>}\n <ContentAccordionItemContentBody>{body}</ContentAccordionItemContentBody>\n {footer && <ContentAccordionItemContentFooter>{footer}</ContentAccordionItemContentFooter>}\n </ContentAccordionItemContent>\n </ContentAccordionItem>\n );\n };\n\n const cls = `${size} ${className ?? ''}`.trim();\n\n return <ContentAccordionWrapper className={cls}>\n {items.map((item) => renderItem(item))}\n </ContentAccordionWrapper>;\n};\n\nexport default ContentAccordion;\n"],"mappings":"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"}
package/dist/Accordion/ContentAccordion.d.ts CHANGED
@@ -22,6 +22,7 @@ export interface ContentAccordionProps extends React.HTMLAttributes<HTMLDivEleme
22
22
  items: ContentAccordionItem[];
23
23
  multi?: boolean;
24
24
  size?: Size.Small | Size.Medium | Size.Large;
25
+ onItemStateChanged?: (opened: string[]) => void;
25
26
  }
26
27
  export declare const ContentAccordion: React.FunctionComponent<ContentAccordionProps>;
27
28
  export default ContentAccordion;
package/dist/Accordion/ContentAccordion.js CHANGED
@@ -4,7 +4,7 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
4
4
  import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
5
5
  import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
6
6
  import _pt from "prop-types";
7
- var _excluded = ["items", "multi", "size", "className"],
7
+ var _excluded = ["items", "multi", "size", "className", "onItemStateChanged"],
8
8
  _excluded2 = ["id", "title", "header", "body", "footer", "disabled", "active"];
9
9
  var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
10
10
  function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -33,6 +33,7 @@ export var ContentAccordion = function ContentAccordion(_ref) {
33
33
  _ref$size = _ref.size,
34
34
  size = _ref$size === void 0 ? Size.Medium : _ref$size,
35
35
  className = _ref.className,
36
+ onItemStateChanged = _ref.onItemStateChanged,
36
37
  rest = _objectWithoutProperties(_ref, _excluded);
37
38
  var _React$useState = React.useState([]),
38
39
  _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -58,14 +59,20 @@ export var ContentAccordion = function ContentAccordion(_ref) {
58
59
  var onItemClick = function onItemClick(item) {
59
60
  if (item.disabled) return;
60
61
  if (opened.includes(item.id)) {
61
- setOpened(opened.filter(function (key) {
62
+ var newOpened = opened.filter(function (key) {
62
63
  return key !== item.id;
63
- }));
64
+ });
65
+ setOpened(newOpened);
66
+ onItemStateChanged && onItemStateChanged(newOpened);
64
67
  } else {
65
68
  if (multi) {
66
- setOpened([].concat(_toConsumableArray(opened), [item.id]));
69
+ var _newOpened = [].concat(_toConsumableArray(opened), [item.id]);
70
+ setOpened(_newOpened);
71
+ onItemStateChanged && onItemStateChanged(_newOpened);
67
72
  } else {
68
- setOpened([item.id]);
73
+ var _newOpened2 = [item.id];
74
+ setOpened(_newOpened2);
75
+ onItemStateChanged && onItemStateChanged(_newOpened2);
69
76
  }
70
77
  }
71
78
  };
@@ -139,7 +146,8 @@ ContentAccordion.propTypes = {
139
146
  disabled: _pt.bool,
140
147
  active: _pt.bool
141
148
  })).isRequired,
142
- multi: _pt.bool
149
+ multi: _pt.bool,
150
+ onItemStateChanged: _pt.func
143
151
  };
144
152
  export default ContentAccordion;
145
153
  //# sourceMappingURL=ContentAccordion.js.map
package/dist/Accordion/ContentAccordion.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ContentAccordion.js","names":["React","styled","Size","SystemIcons","COLORS","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","focusStyles","Z_INDEXES","defaultOnMouseDownHandler","ContentAccordionItemHeader","div","neutral_600","primary_700","primary_20","hover","primary_800","primary_100","active","ContentAccordionItemHeaderIcon","ContentAccordionItemHeaderText","ContentAccordionItemContent","ContentAccordionItemContentHeader","ContentAccordionItemContentBody","p","ContentAccordionItemContentFooter","ContentAccordionItem","neutral_100","neutral_300","ContentAccordionWrapper","Regular","Bold","black","ContentAccordion","items","multi","size","Medium","className","rest","useState","opened","setOpened","useEffect","filter","item","map","id","find","onItemClick","disabled","includes","key","renderItem","title","header","body","footer","isActive","concat","undefined","event","cls","trim"],"sources":["../../src/Accordion/ContentAccordion.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport {Size} from '../types';\nimport {SystemIcons} from '../icons';\nimport {\n COLORS,\n ComponentLStyling,\n ComponentMStyling,\n ComponentSStyling,\n ComponentTextStyle,\n focusStyles,\n Z_INDEXES,\n} from '../styles';\nimport {defaultOnMouseDownHandler} from '../common';\n\nexport const ContentAccordionItemHeader = styled.div`\n display: flex;\n align-items: center;\n box-sizing: border-box;\n min-height: 48px;\n color: ${COLORS.neutral_600};\n cursor: pointer;\n\n &:hover {\n color: ${COLORS.primary_700};\n background-color: ${COLORS.primary_20};\n z-index: ${Z_INDEXES.hover};\n }\n\n &:focus {\n ${focusStyles}\n }\n\n &:active {\n color: ${COLORS.primary_800};\n background-color: ${COLORS.primary_100};\n z-index: ${Z_INDEXES.active};\n }\n`;\n\nexport const ContentAccordionItemHeaderIcon = styled.div`\n width: 24px;\n height: 24px;\n\n svg {\n width: 24px;\n height: 24px;\n }\n`;\n\nexport const ContentAccordionItemHeaderText = styled.div``;\n\nexport const ContentAccordionItemContent = styled.div`\n display: none;\n flex-direction: column;\n`;\n\nexport const ContentAccordionItemContentHeader = styled.div``;\n\nexport const ContentAccordionItemContentBody = styled.p``;\n\nexport const ContentAccordionItemContentFooter = styled.div``;\n\nexport const ContentAccordionItem = styled.div`\n display: flex;\n flex-direction: column;\n border-top: 1px solid ${COLORS.neutral_100};\n\n &.active {\n ${ContentAccordionItemContent} {\n display: flex;\n }\n }\n\n &.disabled {\n ${ContentAccordionItemHeader} {\n color: ${COLORS.neutral_300};\n cursor: not-allowed;\n pointer-events: none;\n }\n }\n`;\n\nexport const ContentAccordionWrapper = styled.div`\n width: 100%;\n position: relative;\n\n ${ContentAccordionItem}:last-child {\n border-bottom: 1px solid ${COLORS.neutral_100};\n }\n\n &.small {\n min-width: 320px;\n max-width: 528px;\n\n ${ContentAccordionItemHeader} {\n gap: 8px;\n padding: 0 8px;\n ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n }\n\n ${ContentAccordionItemContent} {\n padding: 0 8px 16px 40px;\n gap: 8px;\n\n ${ContentAccordionItemContentHeader} {\n ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.black)}\n }\n\n ${ContentAccordionItemContentBody} {\n //TODO\n }\n }\n }\n\n &.medium {\n min-width: 344px;\n max-width: 584px;\n\n ${ContentAccordionItemHeader} {\n gap: 12px;\n padding: 0 12px;\n ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n }\n\n ${ContentAccordionItemContent} {\n padding: 8px 12px 24px 48px;\n gap: 12px;\n\n ${ContentAccordionItemContentHeader} {\n ${ComponentMStyling(ComponentTextStyle.Bold, COLORS.black)}\n }\n\n ${ContentAccordionItemContentBody} {\n //TODO\n }\n }\n }\n\n &.large {\n min-width: 384px;\n max-width: 656px;\n\n ${ContentAccordionItemHeader} {\n gap: 16px;\n padding: 0 16px;\n ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n }\n\n ${ContentAccordionItemContent} {\n padding: 16px 16px 32px 56px;\n gap: 16px;\n\n ${ContentAccordionItemContentHeader} {\n ${ComponentLStyling(ComponentTextStyle.Bold, COLORS.black)}\n }\n\n ${ContentAccordionItemContentBody} {\n //TODO\n }\n }\n }\n`;\n\nexport interface ContentAccordionItem extends Omit<React.HTMLAttributes<HTMLDivElement>, 'id' | 'onMouseDown' | 'onClick' | 'onKeyDown'> {\n id: string;\n title: string;\n header?: string;\n body: any;\n footer?: any;\n disabled?: boolean;\n active?: boolean;\n}\n\nexport interface ContentAccordionProps extends React.HTMLAttributes<HTMLDivElement> {\n items: ContentAccordionItem[];\n multi?: boolean;\n size?: Size.Small | Size.Medium | Size.Large;\n}\n\nexport const ContentAccordion: React.FunctionComponent<ContentAccordionProps> = ({\n items,\n multi = false,\n size = Size.Medium,\n className,\n ...rest\n }) => {\n const [opened, setOpened] = React.useState<string[]>([]);\n\n React.useEffect(() => {\n if (multi) {\n setOpened(items.filter((item) => item.active).map((item) => item.id));\n } else {\n let active = items.find((item) => !!item.active)?.id;\n if (active) {\n setOpened([active]);\n }\n }\n }, [items, multi]);\n\n const onItemClick = (item: ContentAccordionItem) => {\n if (item.disabled) return;\n if (opened.includes(item.id)) {\n setOpened(opened.filter((key) => key !== item.id));\n } else {\n if (multi) {\n setOpened([...opened, item.id]);\n } else {\n setOpened([item.id]);\n }\n }\n };\n\n const renderItem = (item: ContentAccordionItem) => {\n const {id, title, header, body, footer, disabled, active, ...rest} = item;\n const isActive = opened.includes(id);\n\n return (\n <ContentAccordionItem key={id} id={`item_${id}`}\n className={''.concat(isActive ? ' active' : '').concat(item.disabled ? ' disabled' : '')}>\n <ContentAccordionItemHeader\n role=\"button\"\n id={`headerFor_${id}`}\n aria-expanded={isActive}\n aria-controls={`itemContentFor_${id}`}\n tabIndex={!disabled ? 0 : undefined}\n onMouseDown={defaultOnMouseDownHandler}\n onClick={() => !disabled && onItemClick(item)}\n onKeyDown={(event) => event.key === 'Enter' && onItemClick(item)}\n {...rest}>\n <ContentAccordionItemHeaderIcon>\n {multi ? isActive ? <SystemIcons.Minus aria-hidden=\"true\" /> : <SystemIcons.Plus aria-hidden=\"true\" /> : isActive ?\n <SystemIcons.ChevronDown aria-hidden=\"true\" /> : <SystemIcons.ChevronRight aria-hidden=\"true\" />}\n </ContentAccordionItemHeaderIcon>\n <ContentAccordionItemHeaderText>{title}</ContentAccordionItemHeaderText>\n </ContentAccordionItemHeader>\n <ContentAccordionItemContent id={`itemContentFor_${id}`}>\n {header && <ContentAccordionItemContentHeader>{header}</ContentAccordionItemContentHeader>}\n <ContentAccordionItemContentBody>{body}</ContentAccordionItemContentBody>\n {footer && <ContentAccordionItemContentFooter>{footer}</ContentAccordionItemContentFooter>}\n </ContentAccordionItemContent>\n </ContentAccordionItem>\n );\n };\n\n const cls = `${size} ${className ?? ''}`.trim();\n\n return <ContentAccordionWrapper className={cls}>\n {items.map((item) => renderItem(item))}\n </ContentAccordionWrapper>;\n};\n\nexport default ContentAccordion;\n"],"mappings":"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"}
1
+ {"version":3,"file":"ContentAccordion.js","names":["React","styled","Size","SystemIcons","COLORS","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","focusStyles","Z_INDEXES","defaultOnMouseDownHandler","ContentAccordionItemHeader","div","neutral_600","primary_700","primary_20","hover","primary_800","primary_100","active","ContentAccordionItemHeaderIcon","ContentAccordionItemHeaderText","ContentAccordionItemContent","ContentAccordionItemContentHeader","ContentAccordionItemContentBody","p","ContentAccordionItemContentFooter","ContentAccordionItem","neutral_100","neutral_300","ContentAccordionWrapper","Regular","Bold","black","ContentAccordion","items","multi","size","Medium","className","onItemStateChanged","rest","useState","opened","setOpened","useEffect","filter","item","map","id","find","onItemClick","disabled","includes","newOpened","key","renderItem","title","header","body","footer","isActive","concat","undefined","event","cls","trim"],"sources":["../../src/Accordion/ContentAccordion.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport {Size} from '../types';\nimport {SystemIcons} from '../icons';\nimport {\n COLORS,\n ComponentLStyling,\n ComponentMStyling,\n ComponentSStyling,\n ComponentTextStyle,\n focusStyles,\n Z_INDEXES,\n} from '../styles';\nimport {defaultOnMouseDownHandler} from '../common';\n\nexport const ContentAccordionItemHeader = styled.div`\n display: flex;\n align-items: center;\n box-sizing: border-box;\n min-height: 48px;\n color: ${COLORS.neutral_600};\n cursor: pointer;\n\n &:hover {\n color: ${COLORS.primary_700};\n background-color: ${COLORS.primary_20};\n z-index: ${Z_INDEXES.hover};\n }\n\n &:focus {\n ${focusStyles}\n }\n\n &:active {\n color: ${COLORS.primary_800};\n background-color: ${COLORS.primary_100};\n z-index: ${Z_INDEXES.active};\n }\n`;\n\nexport const ContentAccordionItemHeaderIcon = styled.div`\n width: 24px;\n height: 24px;\n\n svg {\n width: 24px;\n height: 24px;\n }\n`;\n\nexport const ContentAccordionItemHeaderText = styled.div``;\n\nexport const ContentAccordionItemContent = styled.div`\n display: none;\n flex-direction: column;\n`;\n\nexport const ContentAccordionItemContentHeader = styled.div``;\n\nexport const ContentAccordionItemContentBody = styled.p``;\n\nexport const ContentAccordionItemContentFooter = styled.div``;\n\nexport const ContentAccordionItem = styled.div`\n display: flex;\n flex-direction: column;\n border-top: 1px solid ${COLORS.neutral_100};\n\n &.active {\n ${ContentAccordionItemContent} {\n display: flex;\n }\n }\n\n &.disabled {\n ${ContentAccordionItemHeader} {\n color: ${COLORS.neutral_300};\n cursor: not-allowed;\n pointer-events: none;\n }\n }\n`;\n\nexport const ContentAccordionWrapper = styled.div`\n width: 100%;\n position: relative;\n\n ${ContentAccordionItem}:last-child {\n border-bottom: 1px solid ${COLORS.neutral_100};\n }\n\n &.small {\n min-width: 320px;\n max-width: 528px;\n\n ${ContentAccordionItemHeader} {\n gap: 8px;\n padding: 0 8px;\n ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n }\n\n ${ContentAccordionItemContent} {\n padding: 0 8px 16px 40px;\n gap: 8px;\n\n ${ContentAccordionItemContentHeader} {\n ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.black)}\n }\n\n ${ContentAccordionItemContentBody} {\n //TODO\n }\n }\n }\n\n &.medium {\n min-width: 344px;\n max-width: 584px;\n\n ${ContentAccordionItemHeader} {\n gap: 12px;\n padding: 0 12px;\n ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n }\n\n ${ContentAccordionItemContent} {\n padding: 8px 12px 24px 48px;\n gap: 12px;\n\n ${ContentAccordionItemContentHeader} {\n ${ComponentMStyling(ComponentTextStyle.Bold, COLORS.black)}\n }\n\n ${ContentAccordionItemContentBody} {\n //TODO\n }\n }\n }\n\n &.large {\n min-width: 384px;\n max-width: 656px;\n\n ${ContentAccordionItemHeader} {\n gap: 16px;\n padding: 0 16px;\n ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n }\n\n ${ContentAccordionItemContent} {\n padding: 16px 16px 32px 56px;\n gap: 16px;\n\n ${ContentAccordionItemContentHeader} {\n ${ComponentLStyling(ComponentTextStyle.Bold, COLORS.black)}\n }\n\n ${ContentAccordionItemContentBody} {\n //TODO\n }\n }\n }\n`;\n\nexport interface ContentAccordionItem extends Omit<React.HTMLAttributes<HTMLDivElement>, 'id' | 'onMouseDown' | 'onClick' | 'onKeyDown'> {\n id: string;\n title: string;\n header?: string;\n body: any;\n footer?: any;\n disabled?: boolean;\n active?: boolean;\n}\n\nexport interface ContentAccordionProps extends React.HTMLAttributes<HTMLDivElement> {\n items: ContentAccordionItem[];\n multi?: boolean;\n size?: Size.Small | Size.Medium | Size.Large;\n onItemStateChanged?: (opened: string[]) => void; \n}\n\nexport const ContentAccordion: React.FunctionComponent<ContentAccordionProps> = ({\n items,\n multi = false,\n size = Size.Medium,\n className,\n onItemStateChanged,\n ...rest\n }) => {\n const [opened, setOpened] = React.useState<string[]>([]);\n\n React.useEffect(() => {\n if (multi) {\n setOpened(items.filter((item) => item.active).map((item) => item.id));\n } else {\n let active = items.find((item) => !!item.active)?.id;\n if (active) {\n setOpened([active]);\n }\n }\n }, [items, multi]);\n\n const onItemClick = (item: ContentAccordionItem) => {\n if (item.disabled) return;\n if (opened.includes(item.id)) {\n const newOpened = opened.filter((key) => key !== item.id);\n setOpened(newOpened);\n onItemStateChanged && onItemStateChanged(newOpened);\n } else {\n if (multi) {\n const newOpened = [...opened, item.id];\n setOpened(newOpened);\n onItemStateChanged && onItemStateChanged(newOpened);\n } else {\n const newOpened = [item.id];\n setOpened(newOpened);\n onItemStateChanged && onItemStateChanged(newOpened);\n }\n }\n };\n\n const renderItem = (item: ContentAccordionItem) => {\n const {id, title, header, body, footer, disabled, active, ...rest} = item;\n const isActive = opened.includes(id);\n\n return (\n <ContentAccordionItem key={id} id={`item_${id}`}\n className={''.concat(isActive ? ' active' : '').concat(item.disabled ? ' disabled' : '')}>\n <ContentAccordionItemHeader\n role=\"button\"\n id={`headerFor_${id}`}\n aria-expanded={isActive}\n aria-controls={`itemContentFor_${id}`}\n tabIndex={!disabled ? 0 : undefined}\n onMouseDown={defaultOnMouseDownHandler}\n onClick={() => !disabled && onItemClick(item)}\n onKeyDown={(event) => event.key === 'Enter' && onItemClick(item)}\n {...rest}>\n <ContentAccordionItemHeaderIcon>\n {multi ? isActive ? <SystemIcons.Minus aria-hidden=\"true\" /> : <SystemIcons.Plus aria-hidden=\"true\" /> : isActive ?\n <SystemIcons.ChevronDown aria-hidden=\"true\" /> : <SystemIcons.ChevronRight aria-hidden=\"true\" />}\n </ContentAccordionItemHeaderIcon>\n <ContentAccordionItemHeaderText>{title}</ContentAccordionItemHeaderText>\n </ContentAccordionItemHeader>\n <ContentAccordionItemContent id={`itemContentFor_${id}`}>\n {header && <ContentAccordionItemContentHeader>{header}</ContentAccordionItemContentHeader>}\n <ContentAccordionItemContentBody>{body}</ContentAccordionItemContentBody>\n {footer && <ContentAccordionItemContentFooter>{footer}</ContentAccordionItemContentFooter>}\n </ContentAccordionItemContent>\n </ContentAccordionItem>\n );\n };\n\n const cls = `${size} ${className ?? ''}`.trim();\n\n return <ContentAccordionWrapper className={cls}>\n {items.map((item) => renderItem(item))}\n </ContentAccordionWrapper>;\n};\n\nexport default ContentAccordion;\n"],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@laerdal/life-react-components",
3
- "version": "3.3.1-dev.3.full",
3
+ "version": "3.3.1-dev.5.full",
4
4
  "private": false,
5
5
  "author": "Erik Martirosyan <erik.martirosyan@laerdal.com>",
6
6
  "contributors": [],