@laerdal/life-react-components 1.4.1-dev.7.full → 1.4.1-dev.8

package/dist/common/FocusVisible.js

@@ -0,0 +1,63 @@
+import React from 'react';
+export var useFocusVisibleRef = function useFocusVisibleRef() {
+  var focusWithinList = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  var ref = arguments.length > 1 ? arguments[1] : undefined;
+  var elementRef = ref !== null && ref !== void 0 ? ref : React.useRef(null);
+  var suppress = React.useRef(false);
+
+  var handleMouseDown = function handleMouseDown() {
+    var _elementRef$current;
+
+    if (!((_elementRef$current = elementRef.current) !== null && _elementRef$current !== void 0 && _elementRef$current.classList.contains('focus-visible'))) {
+      suppress.current = true;
+    }
+  };
+
+  var handleFocus = function handleFocus() {
+    if (!suppress.current) {
+      var _elementRef$current2;
+
+      (_elementRef$current2 = elementRef.current) === null || _elementRef$current2 === void 0 ? void 0 : _elementRef$current2.classList.add('focus-visible');
+      focusWithinList === null || focusWithinList === void 0 ? void 0 : focusWithinList.forEach(function (focusWithinListItem) {
+        var _focusWithinListItem$;
+
+        (_focusWithinListItem$ = focusWithinListItem.current) === null || _focusWithinListItem$ === void 0 ? void 0 : _focusWithinListItem$.classList.add('focus-visible-within');
+      });
+    } else {
+      suppress.current = false;
+    }
+  };
+
+  var handleBlur = function handleBlur() {
+    var _elementRef$current3;
+
+    (_elementRef$current3 = elementRef.current) === null || _elementRef$current3 === void 0 ? void 0 : _elementRef$current3.classList.remove('focus-visible');
+    focusWithinList === null || focusWithinList === void 0 ? void 0 : focusWithinList.forEach(function (focusWithinListItem) {
+      var _focusWithinListItem$2;
+
+      (_focusWithinListItem$2 = focusWithinListItem.current) === null || _focusWithinListItem$2 === void 0 ? void 0 : _focusWithinListItem$2.classList.remove('focus-visible-within');
+    });
+  };
+
+  React.useEffect(function () {
+    if (!elementRef.current) return;
+    var instance = elementRef.current;
+    var focusFn = elementRef.current.focus;
+
+    elementRef.current.focus = function (e) {
+      suppress.current = true;
+      focusFn.call(instance, e);
+    };
+
+    instance.addEventListener('mousedown', handleMouseDown);
+    instance.addEventListener('focus', handleFocus);
+    instance.addEventListener('blur', handleBlur);
+    return function () {
+      instance.removeEventListener('mousedown', handleMouseDown);
+      instance.removeEventListener('focus', handleFocus);
+      instance.removeEventListener('blur', handleBlur);
+    };
+  }, [elementRef]);
+  return elementRef;
+};
+//# sourceMappingURL=FocusVisible.js.map

package/dist/common/FocusVisible.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/common/FocusVisible.ts"],"names":["React","useFocusVisibleRef","focusWithinList","ref","elementRef","useRef","suppress","handleMouseDown","current","classList","contains","handleFocus","add","forEach","focusWithinListItem","handleBlur","remove","useEffect","instance","focusFn","focus","e","call","addEventListener","removeEventListener"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAEA,OAAO,IAAMC,kBAAkB,GAAG,SAArBA,kBAAqB,GAAoE;AAAA,MAAnEC,eAAmE,uEAAlB,EAAkB;AAAA,MAAdC,GAAc;AACpG,MAAMC,UAAU,GAAGD,GAAH,aAAGA,GAAH,cAAGA,GAAH,GAAUH,KAAK,CAACK,MAAN,CAAkB,IAAlB,CAA1B;AACA,MAAMC,QAAQ,GAAGN,KAAK,CAACK,MAAN,CAAsB,KAAtB,CAAjB;;AAEA,MAAME,eAAe,GAAG,SAAlBA,eAAkB,GAAM;AAAA;;AAC5B,QAAI,yBAACH,UAAU,CAACI,OAAZ,gDAAC,oBAAoBC,SAApB,CAA8BC,QAA9B,CAAuC,eAAvC,CAAD,CAAJ,EAA8D;AAC5DJ,MAAAA,QAAQ,CAACE,OAAT,GAAmB,IAAnB;AACD;AACF,GAJD;;AAMA,MAAMG,WAAW,GAAG,SAAdA,WAAc,GAAM;AACxB,QAAI,CAACL,QAAQ,CAACE,OAAd,EAAuB;AAAA;;AACrB,8BAAAJ,UAAU,CAACI,OAAX,8EAAoBC,SAApB,CAA8BG,GAA9B,CAAkC,eAAlC;AACAV,MAAAA,eAAe,SAAf,IAAAA,eAAe,WAAf,YAAAA,eAAe,CAAEW,OAAjB,CAAyB,UAACC,mBAAD,EAAyB;AAAA;;AAChD,iCAAAA,mBAAmB,CAACN,OAApB,gFAA6BC,SAA7B,CAAuCG,GAAvC,CAA2C,sBAA3C;AACD,OAFD;AAGD,KALD,MAKO;AACLN,MAAAA,QAAQ,CAACE,OAAT,GAAmB,KAAnB;AACD;AACF,GATD;;AAWA,MAAMO,UAAU,GAAG,SAAbA,UAAa,GAAM;AAAA;;AACvB,4BAAAX,UAAU,CAACI,OAAX,8EAAoBC,SAApB,CAA8BO,MAA9B,CAAqC,eAArC;AACAd,IAAAA,eAAe,SAAf,IAAAA,eAAe,WAAf,YAAAA,eAAe,CAAEW,OAAjB,CAAyB,UAACC,mBAAD,EAAyB;AAAA;;AAChD,gCAAAA,mBAAmB,CAACN,OAApB,kFAA6BC,SAA7B,CAAuCO,MAAvC,CAA8C,sBAA9C;AACD,KAFD;AAGD,GALD;;AAOAhB,EAAAA,KAAK,CAACiB,SAAN,CAAgB,YAAM;AACpB,QAAI,CAACb,UAAU,CAACI,OAAhB,EAAyB;AAEzB,QAAMU,QAAQ,GAAGd,UAAU,CAACI,OAA5B;AACA,QAAMW,OAAO,GAAGf,UAAU,CAACI,OAAX,CAAmBY,KAAnC;;AACAhB,IAAAA,UAAU,CAACI,OAAX,CAAmBY,KAAnB,GAA2B,UAACC,CAAD,EAAY;AACrCf,MAAAA,QAAQ,CAACE,OAAT,GAAmB,IAAnB;AACAW,MAAAA,OAAO,CAACG,IAAR,CAAaJ,QAAb,EAAuBG,CAAvB;AACD,KAHD;;AAKAH,IAAAA,QAAQ,CAACK,gBAAT,CAA0B,WAA1B,EAAuChB,eAAvC;AACAW,IAAAA,QAAQ,CAACK,gBAAT,CAA0B,OAA1B,EAAmCZ,WAAnC;AACAO,IAAAA,QAAQ,CAACK,gBAAT,CAA0B,MAA1B,EAAkCR,UAAlC;AAEA,WAAO,YAAM;AACXG,MAAAA,QAAQ,CAACM,mBAAT,CAA6B,WAA7B,EAA0CjB,eAA1C;AACAW,MAAAA,QAAQ,CAACM,mBAAT,CAA6B,OAA7B,EAAsCb,WAAtC;AACAO,MAAAA,QAAQ,CAACM,mBAAT,CAA6B,MAA7B,EAAqCT,UAArC;AACD,KAJD;AAKD,GAnBD,EAmBG,CAACX,UAAD,CAnBH;AAqBA,SAAOA,UAAP;AACD,CAlDM","sourcesContent":["import React from 'react';\n\nexport const useFocusVisibleRef = (focusWithinList: React.MutableRefObject<any>[] = [], ref?: any) => {\n  const elementRef = ref ?? React.useRef<any>(null);\n  const suppress = React.useRef<boolean>(false);\n\n  const handleMouseDown = () => {\n    if (!elementRef.current?.classList.contains('focus-visible')) {\n      suppress.current = true;\n    }\n  };\n\n  const handleFocus = () => {\n    if (!suppress.current) {\n      elementRef.current?.classList.add('focus-visible');\n      focusWithinList?.forEach((focusWithinListItem) => {\n        focusWithinListItem.current?.classList.add('focus-visible-within');\n      });\n    } else {\n      suppress.current = false;\n    }\n  };\n\n  const handleBlur = () => {\n    elementRef.current?.classList.remove('focus-visible');\n    focusWithinList?.forEach((focusWithinListItem) => {\n      focusWithinListItem.current?.classList.remove('focus-visible-within');\n    });\n  };\n\n  React.useEffect(() => {\n    if (!elementRef.current) return;\n\n    const instance = elementRef.current;\n    const focusFn = elementRef.current.focus;\n    elementRef.current.focus = (e: any) => {\n      suppress.current = true;\n      focusFn.call(instance, e);\n    };\n\n    instance.addEventListener('mousedown', handleMouseDown);\n    instance.addEventListener('focus', handleFocus);\n    instance.addEventListener('blur', handleBlur);\n\n    return () => {\n      instance.removeEventListener('mousedown', handleMouseDown);\n      instance.removeEventListener('focus', handleFocus);\n      instance.removeEventListener('blur', handleBlur);\n    };\n  }, [elementRef]);\n\n  return elementRef;\n};\n"],"file":"FocusVisible.js"}

package/dist/common/InputStyling.js

@@ -0,0 +1,8 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+
+var _templateObject;
+
+import { css } from 'styled-components';
+import { COLORS } from '../styles';
+export var CommonInteractionStyling = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  &:focus {\n    background-color: ", ";\n    box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n    outline: none;\n\n    &::after {\n      background-color: ", ";\n    }\n  }\n\n  &:hover {\n    background-color: ", ";\n    color: ", ";\n  }\n  &:active {\n    box-shadow: none;\n    background-color: ", ";\n    color: ", ";\n  }\n  &:disabled {\n    box-shadow: none;\n    background-color: ", ";\n    span {\n      color: ", ";\n    }\n    &::after {\n      background-color: ", ";\n    }\n  }\n"])), COLORS.white, COLORS.white, COLORS.primary_20, COLORS.primary_600, COLORS.primary_100, COLORS.primary_800, COLORS.white, COLORS.neutral_300, COLORS.white);
+//# sourceMappingURL=InputStyling.js.map

package/dist/common/InputStyling.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/common/InputStyling.ts"],"names":["css","COLORS","CommonInteractionStyling","white","primary_20","primary_600","primary_100","primary_800","neutral_300"],"mappings":";;;;AAAA,SAASA,GAAT,QAAoB,mBAApB;AACA,SAASC,MAAT,QAAuB,WAAvB;AAEA,OAAO,IAAMC,wBAAwB,GAAGF,GAAH,klBAEbC,MAAM,CAACE,KAFM,EAOXF,MAAM,CAACE,KAPI,EAYbF,MAAM,CAACG,UAZM,EAaxBH,MAAM,CAACI,WAbiB,EAiBbJ,MAAM,CAACK,WAjBM,EAkBxBL,MAAM,CAACM,WAlBiB,EAsBbN,MAAM,CAACE,KAtBM,EAwBtBF,MAAM,CAACO,WAxBe,EA2BXP,MAAM,CAACE,KA3BI,CAA9B","sourcesContent":["import { css } from 'styled-components';\nimport { COLORS } from '../styles';\n\nexport const CommonInteractionStyling = css`\n  &:focus {\n    background-color: ${COLORS.white};\n    box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n    outline: none;\n\n    &::after {\n      background-color: ${COLORS.white};\n    }\n  }\n\n  &:hover {\n    background-color: ${COLORS.primary_20};\n    color: ${COLORS.primary_600};\n  }\n  &:active {\n    box-shadow: none;\n    background-color: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n  }\n  &:disabled {\n    box-shadow: none;\n    background-color: ${COLORS.white};\n    span {\n      color: ${COLORS.neutral_300};\n    }\n    &::after {\n      background-color: ${COLORS.white};\n    }\n  }\n`;\n"],"file":"InputStyling.js"}

package/dist/common/index.d.ts

@@ -0,0 +1,2 @@
+export { CommonInteractionStyling } from './InputStyling';
+export { defaultOnMouseDownHandler } from './EventHandlers';

package/dist/common/index.js

@@ -0,0 +1,3 @@
+export { CommonInteractionStyling } from './InputStyling';
+export { defaultOnMouseDownHandler } from './EventHandlers';
+//# sourceMappingURL=index.js.map

package/dist/common/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/common/index.ts"],"names":["CommonInteractionStyling","defaultOnMouseDownHandler"],"mappings":"AAAA,SAAQA,wBAAR,QAAuC,gBAAvC;AACA,SAAQC,yBAAR,QAAwC,iBAAxC","sourcesContent":["export {CommonInteractionStyling} from './InputStyling';\nexport {defaultOnMouseDownHandler} from './EventHandlers'\n"],"file":"index.js"}

package/dist/hooks/useClickOutside.js

@@ -0,0 +1,22 @@
+import React, { useEffect } from 'react';
+/**
+ * Perform action if clicked on outside of referred element
+ */
+
+export default function useClickOutside(ref, action) {
+  function handleClickOutside(e) {
+    if (ref.current && !ref.current.contains(e.target)) {
+      action();
+    }
+  }
+
+  useEffect(function () {
+    // Bind the event listener
+    document.addEventListener('click', handleClickOutside);
+    return function () {
+      // Unbind the event listener on clean up
+      document.removeEventListener('click', handleClickOutside);
+    };
+  });
+}
+//# sourceMappingURL=useClickOutside.js.map

package/dist/hooks/useClickOutside.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/hooks/useClickOutside.ts"],"names":["useEffect","useClickOutside","ref","action","handleClickOutside","e","current","contains","target","document","addEventListener","removeEventListener"],"mappings":"AAAA,gBAASA,SAAT,QAA4C,OAA5C;AACA;AACA;AACA;;AACA,eAAe,SAASC,eAAT,CAAyBC,GAAzB,EAAgEC,MAAhE,EAAoF;AACjG,WAASC,kBAAT,CAA4BC,CAA5B,EAAoC;AAClC,QAAIH,GAAG,CAACI,OAAJ,IAAe,CAACJ,GAAG,CAACI,OAAJ,CAAYC,QAAZ,CAAqBF,CAAC,CAACG,MAAvB,CAApB,EAAoD;AAClDL,MAAAA,MAAM;AACP;AACF;;AACDH,EAAAA,SAAS,CAAC,YAAM;AACd;AACAS,IAAAA,QAAQ,CAACC,gBAAT,CAA0B,OAA1B,EAAmCN,kBAAnC;AACA,WAAO,YAAM;AACX;AACAK,MAAAA,QAAQ,CAACE,mBAAT,CAA6B,OAA7B,EAAsCP,kBAAtC;AACD,KAHD;AAID,GAPQ,CAAT;AAQD","sourcesContent":["import { useEffect, MutableRefObject } from 'react';\n/**\n * Perform action if clicked on outside of referred element\n */\nexport default function useClickOutside(ref: MutableRefObject<Element | null>, action: () => void) {\n  function handleClickOutside(e: any) {\n    if (ref.current && !ref.current.contains(e.target)) {\n      action();\n    }\n  }\n  useEffect(() => {\n    // Bind the event listener\n    document.addEventListener('click', handleClickOutside);\n    return () => {\n      // Unbind the event listener on clean up\n      document.removeEventListener('click', handleClickOutside);\n    };\n  });\n}\n"],"file":"useClickOutside.js"}