@laerdal/life-react-components 1.11.0-dev.14 → 1.11.0-dev.15

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 (35) hide show
  1. package/dist/Dropdown/DropdownFilter.cjs +18 -18
  2. package/dist/Dropdown/DropdownFilter.cjs.map +1 -1
  3. package/dist/Dropdown/DropdownFilter.js +18 -18
  4. package/dist/Dropdown/DropdownFilter.js.map +1 -1
  5. package/dist/GlobalNavigationBar/mobile/CommonStyles.cjs +12 -2
  6. package/dist/GlobalNavigationBar/mobile/CommonStyles.cjs.map +1 -1
  7. package/dist/GlobalNavigationBar/mobile/CommonStyles.d.ts +2 -0
  8. package/dist/GlobalNavigationBar/mobile/CommonStyles.js +5 -2
  9. package/dist/GlobalNavigationBar/mobile/CommonStyles.js.map +1 -1
  10. package/dist/GlobalNavigationBar/mobile/MobileActionContainer.cjs +55 -0
  11. package/dist/GlobalNavigationBar/mobile/MobileActionContainer.cjs.map +1 -0
  12. package/dist/GlobalNavigationBar/mobile/MobileActionContainer.d.ts +6 -0
  13. package/dist/GlobalNavigationBar/mobile/MobileActionContainer.js +36 -0
  14. package/dist/GlobalNavigationBar/mobile/MobileActionContainer.js.map +1 -0
  15. package/dist/GlobalNavigationBar/mobile/MobileMenuContent.cjs +28 -51
  16. package/dist/GlobalNavigationBar/mobile/MobileMenuContent.cjs.map +1 -1
  17. package/dist/GlobalNavigationBar/mobile/MobileMenuContent.js +25 -47
  18. package/dist/GlobalNavigationBar/mobile/MobileMenuContent.js.map +1 -1
  19. package/dist/GlobalNavigationBar/types.d.ts +3 -1
  20. package/dist/Switcher/MobileCustomMenuContent.cjs +49 -0
  21. package/dist/Switcher/MobileCustomMenuContent.cjs.map +1 -0
  22. package/dist/Switcher/MobileCustomMenuContent.d.ts +7 -0
  23. package/dist/Switcher/MobileCustomMenuContent.js +32 -0
  24. package/dist/Switcher/MobileCustomMenuContent.js.map +1 -0
  25. package/dist/Switcher/MobileSwitcherMenu.cjs +13 -4
  26. package/dist/Switcher/MobileSwitcherMenu.cjs.map +1 -1
  27. package/dist/Switcher/MobileSwitcherMenu.d.ts +5 -2
  28. package/dist/Switcher/MobileSwitcherMenu.js +12 -4
  29. package/dist/Switcher/MobileSwitcherMenu.js.map +1 -1
  30. package/dist/common/ScrollableContainer.cjs +44 -0
  31. package/dist/common/ScrollableContainer.cjs.map +1 -0
  32. package/dist/common/ScrollableContainer.d.ts +1 -0
  33. package/dist/common/ScrollableContainer.js +28 -0
  34. package/dist/common/ScrollableContainer.js.map +1 -0
  35. package/package.json +1 -1
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/Switcher/MobileSwitcherMenu.tsx"],"names":["Wrapper","styled","div","Z_INDEXES","off_canvas","BREAKPOINTS","SMALL","MobileSwitcherMenu","label","header","note","onMenuClose","items"],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AAGA;;AACA;;;;;;;;;;AAEA,IAAMA,OAAO,GAAGC,0BAAOC,GAAV,qQAEAC,kBAAUC,UAFV,EAUTC,oBAAYC,KAVH,CAAb;;AAwBA,IAAMC,kBAAkB,GAAG,SAArBA,kBAAqB,OAAsD;AAAA,MAApDC,KAAoD,QAApDA,KAAoD;AAAA,MAA7CC,MAA6C,QAA7CA,MAA6C;AAAA,MAArCC,IAAqC,QAArCA,IAAqC;AAAA,MAA/BC,WAA+B,QAA/BA,WAA+B;AAAA,MAAlBC,KAAkB,QAAlBA,KAAkB;AAC/E,sBACE,sBAAC,OAAD;AAAS,IAAA,IAAI,EAAC,MAAd;AAAqB,uBAAgB,gBAArC;AAAA,4BACE,qBAAC,yBAAD;AAAkB,MAAA,QAAQ,EAAED,WAA5B;AACkB,MAAA,KAAK,EAAEH,KADzB;AAEkB,MAAA,OAAO,EAAEG;AAF3B,MADF,eAIE,qBAAC,0BAAD;AAAmB,MAAA,MAAM,EAAE;AAACF,QAAAA,MAAM,EAANA,MAAD;AAASC,QAAAA,IAAI,EAAJA;AAAT,OAA3B;AACmB,MAAA,KAAK,EAAEE;AAD1B,MAJF;AAAA,IADF;AASD,CAVD;;;AAPEJ,EAAAA,K;AACAC,EAAAA,M;AACAC,EAAAA,I;AACAC,EAAAA,W;AACAC,EAAAA,K;;eAeaL,kB","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {BREAKPOINTS} from '../styles';\nimport {Z_INDEXES} from '../styles';\nimport {MenuNavigationItemTypeItem} from '../GlobalNavigationBar';\nimport MobileMenuHeader from '../GlobalNavigationBar/mobile/MobileMenuHeader';\nimport MobileMenuContent from '../GlobalNavigationBar/mobile/MobileMenuContent';\n\nconst Wrapper = styled.div`\n width: 320px;\n z-index: ${Z_INDEXES.off_canvas};\n height: 100%;\n box-sizing: border-box;\n\n display: flex;\n flex-direction: column;\n gap: 8px;\n\n ${BREAKPOINTS.SMALL} {\n width: 400px;\n }\n`;\n\n\ninterface Props {\n label: string;\n header: string;\n note?: string;\n onMenuClose: () => void;\n items?: MenuNavigationItemTypeItem[];\n}\n\nconst MobileSwitcherMenu = ({label, header, note, onMenuClose, items}: Props) => {\n return (\n <Wrapper role=\"menu\" aria-labelledby=\"UserMenuButton\">\n <MobileMenuHeader onGoBack={onMenuClose}\n label={label}\n onClose={onMenuClose}/>\n <MobileMenuContent header={{header, note}}\n items={items}/>\n </Wrapper>\n );\n};\n\nexport default MobileSwitcherMenu;\n"],"file":"MobileSwitcherMenu.cjs"}
1
+ {"version":3,"sources":["../../src/Switcher/MobileSwitcherMenu.tsx"],"names":["Wrapper","styled","div","Z_INDEXES","off_canvas","BREAKPOINTS","SMALL","MobileSwitcherMenu","label","header","note","onMenuClose","customContent","items","footerAction"],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AAGA;;AACA;;AACA;;;;;;;;;;AAEA,IAAMA,OAAO,GAAGC,0BAAOC,GAAV,qQAEAC,kBAAUC,UAFV,EAUTC,oBAAYC,KAVH,CAAb;;AAyBA,IAAMC,kBAAkB,GAAG,SAArBA,kBAAqB,OAAqF;AAAA,MAAlFC,KAAkF,QAAlFA,KAAkF;AAAA,MAA3EC,MAA2E,QAA3EA,MAA2E;AAAA,MAAnEC,IAAmE,QAAnEA,IAAmE;AAAA,MAA7DC,WAA6D,QAA7DA,WAA6D;AAAA,MAAhDC,aAAgD,QAAhDA,aAAgD;AAAA,MAAjCC,KAAiC,QAAjCA,KAAiC;AAAA,MAA1BC,YAA0B,QAA1BA,YAA0B;AAC9G,sBACE,sBAAC,OAAD;AAAS,IAAA,IAAI,EAAC,MAAd;AAAqB,uBAAgB,gBAArC;AAAA,4BACE,qBAAC,yBAAD;AAAkB,MAAA,QAAQ,EAAEH,WAA5B;AAAyC,MAAA,KAAK,EAAEH,KAAhD;AAAuD,MAAA,OAAO,EAAEG;AAAhE,MADF,EAEGE,KAAK,iBAAI,qBAAC,0BAAD;AAAmB,MAAA,MAAM,EAAE;AAAEJ,QAAAA,MAAM,EAANA,MAAF;AAAUC,QAAAA,IAAI,EAAJA;AAAV,OAA3B;AAA6C,MAAA,KAAK,EAAEG,KAApD;AAA2D,MAAA,MAAM,EAAEC;AAAnE,MAFZ,EAGGF,aAAa,iBAAI,qBAAC,gDAAD;AAAyB,MAAA,MAAM,EAAEE,YAAjC;AAAA,gBAAgDF;AAAhD,MAHpB;AAAA,IADF;AAOD,CARD;;;AATEJ,EAAAA,K;AACAC,EAAAA,M;AACAC,EAAAA,I;AACAC,EAAAA,W;AACAE,EAAAA,K;AAEAD,EAAAA,a;;eAaaL,kB","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { BREAKPOINTS } from '../styles';\nimport { Z_INDEXES } from '../styles';\nimport { MenuButton, MenuNavigationItemTypeItem } from '../GlobalNavigationBar';\nimport MobileMenuHeader from '../GlobalNavigationBar/mobile/MobileMenuHeader';\nimport MobileMenuContent from '../GlobalNavigationBar/mobile/MobileMenuContent';\nimport { MobileCustomMenuContent } from './MobileCustomMenuContent';\n\nconst Wrapper = styled.div`\n width: 320px;\n z-index: ${Z_INDEXES.off_canvas};\n height: 100%;\n box-sizing: border-box;\n\n display: flex;\n flex-direction: column;\n gap: 8px;\n\n ${BREAKPOINTS.SMALL} {\n width: 400px;\n }\n`;\n\ninterface Props {\n label: string;\n header: string;\n note?: string;\n onMenuClose: () => void;\n items?: MenuNavigationItemTypeItem[];\n footerAction?: MenuButton;\n customContent?: React.ReactNode;\n}\n\nconst MobileSwitcherMenu = ({ label, header, note, onMenuClose, customContent, items, footerAction }: Props) => {\n return (\n <Wrapper role=\"menu\" aria-labelledby=\"UserMenuButton\">\n <MobileMenuHeader onGoBack={onMenuClose} label={label} onClose={onMenuClose} />\n {items && <MobileMenuContent header={{ header, note }} items={items} action={footerAction} />}\n {customContent && <MobileCustomMenuContent action={footerAction}>{customContent}</MobileCustomMenuContent>}\n </Wrapper>\n );\n};\n\nexport default MobileSwitcherMenu;\n"],"file":"MobileSwitcherMenu.cjs"}
@@ -1,10 +1,13 @@
1
- import { MenuNavigationItemTypeItem } from '../GlobalNavigationBar';
1
+ import * as React from 'react';
2
+ import { MenuButton, MenuNavigationItemTypeItem } from '../GlobalNavigationBar';
2
3
  interface Props {
3
4
  label: string;
4
5
  header: string;
5
6
  note?: string;
6
7
  onMenuClose: () => void;
7
8
  items?: MenuNavigationItemTypeItem[];
9
+ footerAction?: MenuButton;
10
+ customContent?: React.ReactNode;
8
11
  }
9
- declare const MobileSwitcherMenu: ({ label, header, note, onMenuClose, items }: Props) => JSX.Element;
12
+ declare const MobileSwitcherMenu: ({ label, header, note, onMenuClose, customContent, items, footerAction }: Props) => JSX.Element;
10
13
  export default MobileSwitcherMenu;
@@ -9,6 +9,7 @@ import { BREAKPOINTS } from '../styles';
9
9
  import { Z_INDEXES } from '../styles';
10
10
  import MobileMenuHeader from '../GlobalNavigationBar/mobile/MobileMenuHeader';
11
11
  import MobileMenuContent from '../GlobalNavigationBar/mobile/MobileMenuContent';
12
+ import { MobileCustomMenuContent } from './MobileCustomMenuContent';
12
13
  import { jsx as _jsx } from "react/jsx-runtime";
13
14
  import { jsxs as _jsxs } from "react/jsx-runtime";
14
15
  var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n width: 320px;\n z-index: ", ";\n height: 100%;\n box-sizing: border-box;\n\n display: flex;\n flex-direction: column;\n gap: 8px;\n\n ", " {\n width: 400px;\n }\n"])), Z_INDEXES.off_canvas, BREAKPOINTS.SMALL);
@@ -18,7 +19,9 @@ var MobileSwitcherMenu = function MobileSwitcherMenu(_ref) {
18
19
  header = _ref.header,
19
20
  note = _ref.note,
20
21
  onMenuClose = _ref.onMenuClose,
21
- items = _ref.items;
22
+ customContent = _ref.customContent,
23
+ items = _ref.items,
24
+ footerAction = _ref.footerAction;
22
25
  return /*#__PURE__*/_jsxs(Wrapper, {
23
26
  role: "menu",
24
27
  "aria-labelledby": "UserMenuButton",
@@ -26,12 +29,16 @@ var MobileSwitcherMenu = function MobileSwitcherMenu(_ref) {
26
29
  onGoBack: onMenuClose,
27
30
  label: label,
28
31
  onClose: onMenuClose
29
- }), /*#__PURE__*/_jsx(MobileMenuContent, {
32
+ }), items && /*#__PURE__*/_jsx(MobileMenuContent, {
30
33
  header: {
31
34
  header: header,
32
35
  note: note
33
36
  },
34
- items: items
37
+ items: items,
38
+ action: footerAction
39
+ }), customContent && /*#__PURE__*/_jsx(MobileCustomMenuContent, {
40
+ action: footerAction,
41
+ children: customContent
35
42
  })]
36
43
  });
37
44
  };
@@ -41,7 +48,8 @@ MobileSwitcherMenu.propTypes = {
41
48
  header: _pt.string.isRequired,
42
49
  note: _pt.string,
43
50
  onMenuClose: _pt.func.isRequired,
44
- items: _pt.array
51
+ items: _pt.array,
52
+ customContent: _pt.node
45
53
  };
46
54
  export default MobileSwitcherMenu;
47
55
  //# sourceMappingURL=MobileSwitcherMenu.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/Switcher/MobileSwitcherMenu.tsx"],"names":["React","styled","BREAKPOINTS","Z_INDEXES","MobileMenuHeader","MobileMenuContent","Wrapper","div","off_canvas","SMALL","MobileSwitcherMenu","label","header","note","onMenuClose","items"],"mappings":";;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAAQC,WAAR,QAA0B,WAA1B;AACA,SAAQC,SAAR,QAAwB,WAAxB;AAEA,OAAOC,gBAAP,MAA6B,gDAA7B;AACA,OAAOC,iBAAP,MAA8B,iDAA9B;;;AAEA,IAAMC,OAAO,GAAGL,MAAM,CAACM,GAAV,uPAEAJ,SAAS,CAACK,UAFV,EAUTN,WAAW,CAACO,KAVH,CAAb;;AAwBA,IAAMC,kBAAkB,GAAG,SAArBA,kBAAqB,OAAsD;AAAA,MAApDC,KAAoD,QAApDA,KAAoD;AAAA,MAA7CC,MAA6C,QAA7CA,MAA6C;AAAA,MAArCC,IAAqC,QAArCA,IAAqC;AAAA,MAA/BC,WAA+B,QAA/BA,WAA+B;AAAA,MAAlBC,KAAkB,QAAlBA,KAAkB;AAC/E,sBACE,MAAC,OAAD;AAAS,IAAA,IAAI,EAAC,MAAd;AAAqB,uBAAgB,gBAArC;AAAA,4BACE,KAAC,gBAAD;AAAkB,MAAA,QAAQ,EAAED,WAA5B;AACkB,MAAA,KAAK,EAAEH,KADzB;AAEkB,MAAA,OAAO,EAAEG;AAF3B,MADF,eAIE,KAAC,iBAAD;AAAmB,MAAA,MAAM,EAAE;AAACF,QAAAA,MAAM,EAANA,MAAD;AAASC,QAAAA,IAAI,EAAJA;AAAT,OAA3B;AACmB,MAAA,KAAK,EAAEE;AAD1B,MAJF;AAAA,IADF;AASD,CAVD;;;AAPEJ,EAAAA,K;AACAC,EAAAA,M;AACAC,EAAAA,I;AACAC,EAAAA,W;AACAC,EAAAA,K;;AAeF,eAAeL,kBAAf","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {BREAKPOINTS} from '../styles';\nimport {Z_INDEXES} from '../styles';\nimport {MenuNavigationItemTypeItem} from '../GlobalNavigationBar';\nimport MobileMenuHeader from '../GlobalNavigationBar/mobile/MobileMenuHeader';\nimport MobileMenuContent from '../GlobalNavigationBar/mobile/MobileMenuContent';\n\nconst Wrapper = styled.div`\n width: 320px;\n z-index: ${Z_INDEXES.off_canvas};\n height: 100%;\n box-sizing: border-box;\n\n display: flex;\n flex-direction: column;\n gap: 8px;\n\n ${BREAKPOINTS.SMALL} {\n width: 400px;\n }\n`;\n\n\ninterface Props {\n label: string;\n header: string;\n note?: string;\n onMenuClose: () => void;\n items?: MenuNavigationItemTypeItem[];\n}\n\nconst MobileSwitcherMenu = ({label, header, note, onMenuClose, items}: Props) => {\n return (\n <Wrapper role=\"menu\" aria-labelledby=\"UserMenuButton\">\n <MobileMenuHeader onGoBack={onMenuClose}\n label={label}\n onClose={onMenuClose}/>\n <MobileMenuContent header={{header, note}}\n items={items}/>\n </Wrapper>\n );\n};\n\nexport default MobileSwitcherMenu;\n"],"file":"MobileSwitcherMenu.js"}
1
+ {"version":3,"sources":["../../src/Switcher/MobileSwitcherMenu.tsx"],"names":["React","styled","BREAKPOINTS","Z_INDEXES","MobileMenuHeader","MobileMenuContent","MobileCustomMenuContent","Wrapper","div","off_canvas","SMALL","MobileSwitcherMenu","label","header","note","onMenuClose","customContent","items","footerAction"],"mappings":";;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAASC,WAAT,QAA4B,WAA5B;AACA,SAASC,SAAT,QAA0B,WAA1B;AAEA,OAAOC,gBAAP,MAA6B,gDAA7B;AACA,OAAOC,iBAAP,MAA8B,iDAA9B;AACA,SAASC,uBAAT,QAAwC,2BAAxC;;;AAEA,IAAMC,OAAO,GAAGN,MAAM,CAACO,GAAV,uPAEAL,SAAS,CAACM,UAFV,EAUTP,WAAW,CAACQ,KAVH,CAAb;;AAyBA,IAAMC,kBAAkB,GAAG,SAArBA,kBAAqB,OAAqF;AAAA,MAAlFC,KAAkF,QAAlFA,KAAkF;AAAA,MAA3EC,MAA2E,QAA3EA,MAA2E;AAAA,MAAnEC,IAAmE,QAAnEA,IAAmE;AAAA,MAA7DC,WAA6D,QAA7DA,WAA6D;AAAA,MAAhDC,aAAgD,QAAhDA,aAAgD;AAAA,MAAjCC,KAAiC,QAAjCA,KAAiC;AAAA,MAA1BC,YAA0B,QAA1BA,YAA0B;AAC9G,sBACE,MAAC,OAAD;AAAS,IAAA,IAAI,EAAC,MAAd;AAAqB,uBAAgB,gBAArC;AAAA,4BACE,KAAC,gBAAD;AAAkB,MAAA,QAAQ,EAAEH,WAA5B;AAAyC,MAAA,KAAK,EAAEH,KAAhD;AAAuD,MAAA,OAAO,EAAEG;AAAhE,MADF,EAEGE,KAAK,iBAAI,KAAC,iBAAD;AAAmB,MAAA,MAAM,EAAE;AAAEJ,QAAAA,MAAM,EAANA,MAAF;AAAUC,QAAAA,IAAI,EAAJA;AAAV,OAA3B;AAA6C,MAAA,KAAK,EAAEG,KAApD;AAA2D,MAAA,MAAM,EAAEC;AAAnE,MAFZ,EAGGF,aAAa,iBAAI,KAAC,uBAAD;AAAyB,MAAA,MAAM,EAAEE,YAAjC;AAAA,gBAAgDF;AAAhD,MAHpB;AAAA,IADF;AAOD,CARD;;;AATEJ,EAAAA,K;AACAC,EAAAA,M;AACAC,EAAAA,I;AACAC,EAAAA,W;AACAE,EAAAA,K;AAEAD,EAAAA,a;;AAaF,eAAeL,kBAAf","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { BREAKPOINTS } from '../styles';\nimport { Z_INDEXES } from '../styles';\nimport { MenuButton, MenuNavigationItemTypeItem } from '../GlobalNavigationBar';\nimport MobileMenuHeader from '../GlobalNavigationBar/mobile/MobileMenuHeader';\nimport MobileMenuContent from '../GlobalNavigationBar/mobile/MobileMenuContent';\nimport { MobileCustomMenuContent } from './MobileCustomMenuContent';\n\nconst Wrapper = styled.div`\n width: 320px;\n z-index: ${Z_INDEXES.off_canvas};\n height: 100%;\n box-sizing: border-box;\n\n display: flex;\n flex-direction: column;\n gap: 8px;\n\n ${BREAKPOINTS.SMALL} {\n width: 400px;\n }\n`;\n\ninterface Props {\n label: string;\n header: string;\n note?: string;\n onMenuClose: () => void;\n items?: MenuNavigationItemTypeItem[];\n footerAction?: MenuButton;\n customContent?: React.ReactNode;\n}\n\nconst MobileSwitcherMenu = ({ label, header, note, onMenuClose, customContent, items, footerAction }: Props) => {\n return (\n <Wrapper role=\"menu\" aria-labelledby=\"UserMenuButton\">\n <MobileMenuHeader onGoBack={onMenuClose} label={label} onClose={onMenuClose} />\n {items && <MobileMenuContent header={{ header, note }} items={items} action={footerAction} />}\n {customContent && <MobileCustomMenuContent action={footerAction}>{customContent}</MobileCustomMenuContent>}\n </Wrapper>\n );\n};\n\nexport default MobileSwitcherMenu;\n"],"file":"MobileSwitcherMenu.js"}
@@ -0,0 +1,44 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ exports.useScrollableContainer = void 0;
9
+
10
+ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
11
+
12
+ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
13
+
14
+ var _react = _interopRequireDefault(require("react"));
15
+
16
+ var _rooks = require("rooks");
17
+
18
+ var useScrollableContainer = function useScrollableContainer(recalculateScrollDeps) {
19
+ var _React$useState = _react.default.useState(false),
20
+ _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
21
+ scrollable = _React$useState2[0],
22
+ setScrollable = _React$useState2[1];
23
+
24
+ var _useDimensionsRef = (0, _rooks.useDimensionsRef)({
25
+ updateOnResize: true
26
+ }),
27
+ _useDimensionsRef2 = (0, _slicedToArray2.default)(_useDimensionsRef, 3),
28
+ scrollContainerRef = _useDimensionsRef2[0],
29
+ dimensions = _useDimensionsRef2[1],
30
+ node = _useDimensionsRef2[2];
31
+
32
+ _react.default.useEffect(function () {
33
+ var _node$clientHeight, _node$scrollHeight;
34
+
35
+ var clientHeight = (_node$clientHeight = node === null || node === void 0 ? void 0 : node.clientHeight) !== null && _node$clientHeight !== void 0 ? _node$clientHeight : 0;
36
+ var scrollHeight = (_node$scrollHeight = node === null || node === void 0 ? void 0 : node.scrollHeight) !== null && _node$scrollHeight !== void 0 ? _node$scrollHeight : 0;
37
+ setScrollable(scrollHeight > clientHeight);
38
+ }, [dimensions, node].concat((0, _toConsumableArray2.default)(recalculateScrollDeps)));
39
+
40
+ return [scrollContainerRef, scrollable];
41
+ };
42
+
43
+ exports.useScrollableContainer = useScrollableContainer;
44
+ //# sourceMappingURL=ScrollableContainer.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../src/common/ScrollableContainer.ts"],"names":["useScrollableContainer","recalculateScrollDeps","React","useState","scrollable","setScrollable","updateOnResize","scrollContainerRef","dimensions","node","useEffect","clientHeight","scrollHeight"],"mappings":";;;;;;;;;;;;;AAAA;;AACA;;AAEO,IAAMA,sBAAsB,GAAG,SAAzBA,sBAAyB,CAACC,qBAAD,EAAkC;AACtE,wBAAoCC,eAAMC,QAAN,CAAe,KAAf,CAApC;AAAA;AAAA,MAAOC,UAAP;AAAA,MAAmBC,aAAnB;;AACA,0BAA+C,6BAAiB;AAAEC,IAAAA,cAAc,EAAE;AAAlB,GAAjB,CAA/C;AAAA;AAAA,MAAOC,kBAAP;AAAA,MAA2BC,UAA3B;AAAA,MAAuCC,IAAvC;;AAEAP,iBAAMQ,SAAN,CAAgB,YAAM;AAAA;;AACpB,QAAMC,YAAY,yBAAGF,IAAH,aAAGA,IAAH,uBAAGA,IAAI,CAAEE,YAAT,mEAAyB,CAA3C;AACA,QAAMC,YAAY,yBAAGH,IAAH,aAAGA,IAAH,uBAAGA,IAAI,CAAEG,YAAT,mEAAyB,CAA3C;AACAP,IAAAA,aAAa,CAACO,YAAY,GAAGD,YAAhB,CAAb;AACD,GAJD,GAIIH,UAJJ,EAIgBC,IAJhB,0CAIyBR,qBAJzB;;AAMA,SAAO,CAACM,kBAAD,EAAqBH,UAArB,CAAP;AACD,CAXM","sourcesContent":["import React from 'react';\nimport { useDimensionsRef } from 'rooks';\n\nexport const useScrollableContainer = (recalculateScrollDeps: any[]) => {\n const [scrollable, setScrollable] = React.useState(false);\n const [scrollContainerRef, dimensions, node] = useDimensionsRef({ updateOnResize: true });\n\n React.useEffect(() => {\n const clientHeight = node?.clientHeight ?? 0;\n const scrollHeight = node?.scrollHeight ?? 0;\n setScrollable(scrollHeight > clientHeight);\n }, [dimensions, node, ...recalculateScrollDeps]);\n\n return [scrollContainerRef, scrollable];\n};\n"],"file":"ScrollableContainer.cjs"}
@@ -0,0 +1 @@
1
+ export declare const useScrollableContainer: (recalculateScrollDeps: any[]) => (boolean | import("react").LegacyRef<HTMLDivElement> | undefined)[];
@@ -0,0 +1,28 @@
1
+ import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
2
+ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
3
+ import React from 'react';
4
+ import { useDimensionsRef } from 'rooks';
5
+ export var useScrollableContainer = function useScrollableContainer(recalculateScrollDeps) {
6
+ var _React$useState = React.useState(false),
7
+ _React$useState2 = _slicedToArray(_React$useState, 2),
8
+ scrollable = _React$useState2[0],
9
+ setScrollable = _React$useState2[1];
10
+
11
+ var _useDimensionsRef = useDimensionsRef({
12
+ updateOnResize: true
13
+ }),
14
+ _useDimensionsRef2 = _slicedToArray(_useDimensionsRef, 3),
15
+ scrollContainerRef = _useDimensionsRef2[0],
16
+ dimensions = _useDimensionsRef2[1],
17
+ node = _useDimensionsRef2[2];
18
+
19
+ React.useEffect(function () {
20
+ var _node$clientHeight, _node$scrollHeight;
21
+
22
+ var clientHeight = (_node$clientHeight = node === null || node === void 0 ? void 0 : node.clientHeight) !== null && _node$clientHeight !== void 0 ? _node$clientHeight : 0;
23
+ var scrollHeight = (_node$scrollHeight = node === null || node === void 0 ? void 0 : node.scrollHeight) !== null && _node$scrollHeight !== void 0 ? _node$scrollHeight : 0;
24
+ setScrollable(scrollHeight > clientHeight);
25
+ }, [dimensions, node].concat(_toConsumableArray(recalculateScrollDeps)));
26
+ return [scrollContainerRef, scrollable];
27
+ };
28
+ //# sourceMappingURL=ScrollableContainer.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../src/common/ScrollableContainer.ts"],"names":["React","useDimensionsRef","useScrollableContainer","recalculateScrollDeps","useState","scrollable","setScrollable","updateOnResize","scrollContainerRef","dimensions","node","useEffect","clientHeight","scrollHeight"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,gBAAT,QAAiC,OAAjC;AAEA,OAAO,IAAMC,sBAAsB,GAAG,SAAzBA,sBAAyB,CAACC,qBAAD,EAAkC;AACtE,wBAAoCH,KAAK,CAACI,QAAN,CAAe,KAAf,CAApC;AAAA;AAAA,MAAOC,UAAP;AAAA,MAAmBC,aAAnB;;AACA,0BAA+CL,gBAAgB,CAAC;AAAEM,IAAAA,cAAc,EAAE;AAAlB,GAAD,CAA/D;AAAA;AAAA,MAAOC,kBAAP;AAAA,MAA2BC,UAA3B;AAAA,MAAuCC,IAAvC;;AAEAV,EAAAA,KAAK,CAACW,SAAN,CAAgB,YAAM;AAAA;;AACpB,QAAMC,YAAY,yBAAGF,IAAH,aAAGA,IAAH,uBAAGA,IAAI,CAAEE,YAAT,mEAAyB,CAA3C;AACA,QAAMC,YAAY,yBAAGH,IAAH,aAAGA,IAAH,uBAAGA,IAAI,CAAEG,YAAT,mEAAyB,CAA3C;AACAP,IAAAA,aAAa,CAACO,YAAY,GAAGD,YAAhB,CAAb;AACD,GAJD,GAIIH,UAJJ,EAIgBC,IAJhB,4BAIyBP,qBAJzB;AAMA,SAAO,CAACK,kBAAD,EAAqBH,UAArB,CAAP;AACD,CAXM","sourcesContent":["import React from 'react';\nimport { useDimensionsRef } from 'rooks';\n\nexport const useScrollableContainer = (recalculateScrollDeps: any[]) => {\n const [scrollable, setScrollable] = React.useState(false);\n const [scrollContainerRef, dimensions, node] = useDimensionsRef({ updateOnResize: true });\n\n React.useEffect(() => {\n const clientHeight = node?.clientHeight ?? 0;\n const scrollHeight = node?.scrollHeight ?? 0;\n setScrollable(scrollHeight > clientHeight);\n }, [dimensions, node, ...recalculateScrollDeps]);\n\n return [scrollContainerRef, scrollable];\n};\n"],"file":"ScrollableContainer.js"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@laerdal/life-react-components",
3
- "version": "1.11.0-dev.14",
3
+ "version": "1.11.0-dev.15",
4
4
  "private": false,
5
5
  "author": "Thomas Kalve <thomas.kalve@laerdal.com>",
6
6
  "contributors": [