@laerdal/life-react-components 1.6.1-dev.1 → 1.7.0-dev.11

package/dist/Tooltips/TooltipWrapper.cjs

@@ -23,6 +23,7 @@ var TooltipWrapper = function TooltipWrapper(_ref) {
   var label = _ref.label,
       children = _ref.children,
       withArrow = _ref.withArrow,
+      tabIndex = _ref.tabIndex,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? _.Size.Small : _ref$size,
       _ref$height = _ref.height,
@@ -35,6 +36,7 @@ var TooltipWrapper = function TooltipWrapper(_ref) {
       position = _ref$position === void 0 ? 'bottom' : _ref$position;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_TooltipStyles.TooltipContainer, {
     delay: delay,
+    tabIndex: tabIndex,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TooltipStyles.Tooltip, {
       align: align,
       height: height,

package/dist/Tooltips/TooltipWrapper.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Tooltips/TooltipWrapper.tsx"],"names":["TooltipWrapper","label","children","withArrow","size","Size","Small","height","delay","undefined","align","position"],"mappings":";;;;;;;;;AACA;;AAIA;;AACA;;;;;;;;AAEC,IAAMA,cAAc,GAAG,SAAjBA,cAAiB,OAOoB;AAAA,MANzCC,KAMyC,QANzCA,KAMyC;AAAA,MANlCC,QAMkC,QANlCA,QAMkC;AAAA,MALzCC,SAKyC,QALzCA,SAKyC;AAAA,uBAJzCC,IAIyC;AAAA,MAJzCA,IAIyC,0BAJlCC,OAAKC,KAI6B;AAAA,yBAHzCC,MAGyC;AAAA,MAHzCA,MAGyC,4BAHhC,MAGgC;AAAA,wBAFzCC,KAEyC;AAAA,MAFzCA,KAEyC,2BAFjCC,SAEiC;AAAA,wBADzCC,KACyC;AAAA,MADzCA,KACyC,2BADjC,QACiC;AAAA,2BAAzCC,QAAyC;AAAA,MAAzCA,QAAyC,8BAA9B,QAA8B;AAExC,sBAAO,sBAAC,+BAAD;AAAkB,IAAA,KAAK,EAAEH,KAAzB;AAAA,4BACC,qBAAC,sBAAD;AAAS,MAAA,KAAK,EAAEE,KAAhB;AACG,MAAA,MAAM,EAAEH,MADX;AAEG,MAAA,IAAI,EAAEH,IAFT;AAGG,MAAA,SAAS,EAAED,SAHd;AAIG,MAAA,QAAQ,EAAEQ,QAJb;AAAA,gBAKIV;AALJ,MADD,EAQDC,QARC;AAAA,IAAP;AAUF,CAnBD;;eAqBeF,c","sourcesContent":["\nimport * as React from 'react';\n\nimport { TooltipProps } from './TooltipTypes';\n\nimport { TooltipContainer, Tooltip } from './TooltipStyles';\nimport { Size } from '..';\n \n const TooltipWrapper = ({\n   label, children,\n   withArrow,\n   size = Size.Small,\n   height = 'auto',\n   delay = undefined,\n   align = 'center', \n   position = 'bottom' } : TooltipProps) => {\n \n    return <TooltipContainer delay={delay}>\n            <Tooltip align={align}\n               height={height}\n               size={size}\n               withArrow={withArrow}\n               position={position}>\n               {label}\n            </Tooltip>\n         {children}\n       </TooltipContainer>;\n };\n \n export default TooltipWrapper;"],"file":"TooltipWrapper.cjs"}
+{"version":3,"sources":["../../src/Tooltips/TooltipWrapper.tsx"],"names":["TooltipWrapper","label","children","withArrow","tabIndex","size","Size","Small","height","delay","undefined","align","position"],"mappings":";;;;;;;;;AACA;;AAIA;;AACA;;;;;;;;AAEC,IAAMA,cAAc,GAAG,SAAjBA,cAAiB,OAQoB;AAAA,MAPzCC,KAOyC,QAPzCA,KAOyC;AAAA,MAPlCC,QAOkC,QAPlCA,QAOkC;AAAA,MANzCC,SAMyC,QANzCA,SAMyC;AAAA,MALzCC,QAKyC,QALzCA,QAKyC;AAAA,uBAJzCC,IAIyC;AAAA,MAJzCA,IAIyC,0BAJlCC,OAAKC,KAI6B;AAAA,yBAHzCC,MAGyC;AAAA,MAHzCA,MAGyC,4BAHhC,MAGgC;AAAA,wBAFzCC,KAEyC;AAAA,MAFzCA,KAEyC,2BAFjCC,SAEiC;AAAA,wBADzCC,KACyC;AAAA,MADzCA,KACyC,2BADjC,QACiC;AAAA,2BAAzCC,QAAyC;AAAA,MAAzCA,QAAyC,8BAA9B,QAA8B;AAExC,sBAAO,sBAAC,+BAAD;AAAkB,IAAA,KAAK,EAAEH,KAAzB;AAAgC,IAAA,QAAQ,EAAEL,QAA1C;AAAA,4BACC,qBAAC,sBAAD;AAAS,MAAA,KAAK,EAAEO,KAAhB;AACG,MAAA,MAAM,EAAEH,MADX;AAEG,MAAA,IAAI,EAAEH,IAFT;AAGG,MAAA,SAAS,EAAEF,SAHd;AAIG,MAAA,QAAQ,EAAES,QAJb;AAAA,gBAKIX;AALJ,MADD,EAQDC,QARC;AAAA,IAAP;AAUF,CApBD;;eAsBeF,c","sourcesContent":["\nimport * as React from 'react';\n\nimport { TooltipProps } from './TooltipTypes';\n\nimport { TooltipContainer, Tooltip } from './TooltipStyles';\nimport { Size } from '..';\n \n const TooltipWrapper = ({\n   label, children,\n   withArrow,\n   tabIndex,\n   size = Size.Small,\n   height = 'auto',\n   delay = undefined,\n   align = 'center', \n   position = 'bottom' } : TooltipProps) => {\n \n    return <TooltipContainer delay={delay} tabIndex={tabIndex}>\n            <Tooltip align={align}\n               height={height}\n               size={size}\n               withArrow={withArrow}\n               position={position}>\n               {label}\n            </Tooltip>\n         {children}\n       </TooltipContainer>;\n };\n \n export default TooltipWrapper;\n"],"file":"TooltipWrapper.cjs"}

package/dist/Tooltips/TooltipWrapper.d.ts

@@ -1,3 +1,3 @@
 import { TooltipProps } from './TooltipTypes';
-declare const TooltipWrapper: ({ label, children, withArrow, size, height, delay, align, position }: TooltipProps) => JSX.Element;
+declare const TooltipWrapper: ({ label, children, withArrow, tabIndex, size, height, delay, align, position }: TooltipProps) => JSX.Element;
 export default TooltipWrapper;

package/dist/Tooltips/TooltipWrapper.js

@@ -8,6 +8,7 @@ var TooltipWrapper = function TooltipWrapper(_ref) {
   var label = _ref.label,
       children = _ref.children,
       withArrow = _ref.withArrow,
+      tabIndex = _ref.tabIndex,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? Size.Small : _ref$size,
       _ref$height = _ref.height,
@@ -20,6 +21,7 @@ var TooltipWrapper = function TooltipWrapper(_ref) {
       position = _ref$position === void 0 ? 'bottom' : _ref$position;
   return /*#__PURE__*/_jsxs(TooltipContainer, {
     delay: delay,
+    tabIndex: tabIndex,
     children: [/*#__PURE__*/_jsx(Tooltip, {
       align: align,
       height: height,

package/dist/Tooltips/TooltipWrapper.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Tooltips/TooltipWrapper.tsx"],"names":["React","TooltipContainer","Tooltip","Size","TooltipWrapper","label","children","withArrow","size","Small","height","delay","undefined","align","position"],"mappings":"AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAIA,SAASC,gBAAT,EAA2BC,OAA3B,QAA0C,iBAA1C;AACA,SAASC,IAAT,QAAqB,IAArB;;;;AAEC,IAAMC,cAAc,GAAG,SAAjBA,cAAiB,OAOoB;AAAA,MANzCC,KAMyC,QANzCA,KAMyC;AAAA,MANlCC,QAMkC,QANlCA,QAMkC;AAAA,MALzCC,SAKyC,QALzCA,SAKyC;AAAA,uBAJzCC,IAIyC;AAAA,MAJzCA,IAIyC,0BAJlCL,IAAI,CAACM,KAI6B;AAAA,yBAHzCC,MAGyC;AAAA,MAHzCA,MAGyC,4BAHhC,MAGgC;AAAA,wBAFzCC,KAEyC;AAAA,MAFzCA,KAEyC,2BAFjCC,SAEiC;AAAA,wBADzCC,KACyC;AAAA,MADzCA,KACyC,2BADjC,QACiC;AAAA,2BAAzCC,QAAyC;AAAA,MAAzCA,QAAyC,8BAA9B,QAA8B;AAExC,sBAAO,MAAC,gBAAD;AAAkB,IAAA,KAAK,EAAEH,KAAzB;AAAA,4BACC,KAAC,OAAD;AAAS,MAAA,KAAK,EAAEE,KAAhB;AACG,MAAA,MAAM,EAAEH,MADX;AAEG,MAAA,IAAI,EAAEF,IAFT;AAGG,MAAA,SAAS,EAAED,SAHd;AAIG,MAAA,QAAQ,EAAEO,QAJb;AAAA,gBAKIT;AALJ,MADD,EAQDC,QARC;AAAA,IAAP;AAUF,CAnBD;;AAqBA,eAAeF,cAAf","sourcesContent":["\nimport * as React from 'react';\n\nimport { TooltipProps } from './TooltipTypes';\n\nimport { TooltipContainer, Tooltip } from './TooltipStyles';\nimport { Size } from '..';\n \n const TooltipWrapper = ({\n   label, children,\n   withArrow,\n   size = Size.Small,\n   height = 'auto',\n   delay = undefined,\n   align = 'center', \n   position = 'bottom' } : TooltipProps) => {\n \n    return <TooltipContainer delay={delay}>\n            <Tooltip align={align}\n               height={height}\n               size={size}\n               withArrow={withArrow}\n               position={position}>\n               {label}\n            </Tooltip>\n         {children}\n       </TooltipContainer>;\n };\n \n export default TooltipWrapper;"],"file":"TooltipWrapper.js"}
+{"version":3,"sources":["../../src/Tooltips/TooltipWrapper.tsx"],"names":["React","TooltipContainer","Tooltip","Size","TooltipWrapper","label","children","withArrow","tabIndex","size","Small","height","delay","undefined","align","position"],"mappings":"AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAIA,SAASC,gBAAT,EAA2BC,OAA3B,QAA0C,iBAA1C;AACA,SAASC,IAAT,QAAqB,IAArB;;;;AAEC,IAAMC,cAAc,GAAG,SAAjBA,cAAiB,OAQoB;AAAA,MAPzCC,KAOyC,QAPzCA,KAOyC;AAAA,MAPlCC,QAOkC,QAPlCA,QAOkC;AAAA,MANzCC,SAMyC,QANzCA,SAMyC;AAAA,MALzCC,QAKyC,QALzCA,QAKyC;AAAA,uBAJzCC,IAIyC;AAAA,MAJzCA,IAIyC,0BAJlCN,IAAI,CAACO,KAI6B;AAAA,yBAHzCC,MAGyC;AAAA,MAHzCA,MAGyC,4BAHhC,MAGgC;AAAA,wBAFzCC,KAEyC;AAAA,MAFzCA,KAEyC,2BAFjCC,SAEiC;AAAA,wBADzCC,KACyC;AAAA,MADzCA,KACyC,2BADjC,QACiC;AAAA,2BAAzCC,QAAyC;AAAA,MAAzCA,QAAyC,8BAA9B,QAA8B;AAExC,sBAAO,MAAC,gBAAD;AAAkB,IAAA,KAAK,EAAEH,KAAzB;AAAgC,IAAA,QAAQ,EAAEJ,QAA1C;AAAA,4BACC,KAAC,OAAD;AAAS,MAAA,KAAK,EAAEM,KAAhB;AACG,MAAA,MAAM,EAAEH,MADX;AAEG,MAAA,IAAI,EAAEF,IAFT;AAGG,MAAA,SAAS,EAAEF,SAHd;AAIG,MAAA,QAAQ,EAAEQ,QAJb;AAAA,gBAKIV;AALJ,MADD,EAQDC,QARC;AAAA,IAAP;AAUF,CApBD;;AAsBA,eAAeF,cAAf","sourcesContent":["\nimport * as React from 'react';\n\nimport { TooltipProps } from './TooltipTypes';\n\nimport { TooltipContainer, Tooltip } from './TooltipStyles';\nimport { Size } from '..';\n \n const TooltipWrapper = ({\n   label, children,\n   withArrow,\n   tabIndex,\n   size = Size.Small,\n   height = 'auto',\n   delay = undefined,\n   align = 'center', \n   position = 'bottom' } : TooltipProps) => {\n \n    return <TooltipContainer delay={delay} tabIndex={tabIndex}>\n            <Tooltip align={align}\n               height={height}\n               size={size}\n               withArrow={withArrow}\n               position={position}>\n               {label}\n            </Tooltip>\n         {children}\n       </TooltipContainer>;\n };\n \n export default TooltipWrapper;\n"],"file":"TooltipWrapper.js"}

package/dist/common/ActionWithin.cjs

@@ -0,0 +1,67 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useActionWithin = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+var useActionWithin = function useActionWithin(ref, children) {
+  var handleMouseEnter = function handleMouseEnter(e) {
+    ref.current.classList.add('action-within');
+  };
+
+  var handleMouseLeave = function handleMouseLeave(e) {
+    ref.current.classList.remove('action-within');
+  };
+
+  _react.default.useEffect(function () {
+    var _iterator = _createForOfIteratorHelper(children),
+        _step;
+
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var _child$current3, _child$current4;
+
+        var child = _step.value;
+        (_child$current3 = child.current) === null || _child$current3 === void 0 ? void 0 : _child$current3.addEventListener('mouseenter', handleMouseEnter);
+        (_child$current4 = child.current) === null || _child$current4 === void 0 ? void 0 : _child$current4.addEventListener('mouseleave', handleMouseLeave);
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+
+    return function () {
+      var _iterator2 = _createForOfIteratorHelper(children),
+          _step2;
+
+      try {
+        for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+          var _child$current, _child$current2;
+
+          var child = _step2.value;
+          (_child$current = child.current) === null || _child$current === void 0 ? void 0 : _child$current.removeEventListener('mouseenter', handleMouseEnter);
+          (_child$current2 = child.current) === null || _child$current2 === void 0 ? void 0 : _child$current2.removeEventListener('mouseleave', handleMouseLeave);
+        }
+      } catch (err) {
+        _iterator2.e(err);
+      } finally {
+        _iterator2.f();
+      }
+    };
+  }, [children]);
+};
+
+exports.useActionWithin = useActionWithin;
+//# sourceMappingURL=ActionWithin.cjs.map

package/dist/common/ActionWithin.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/common/ActionWithin.ts"],"names":["useActionWithin","ref","children","handleMouseEnter","e","current","classList","add","handleMouseLeave","remove","React","useEffect","child","addEventListener","removeEventListener"],"mappings":";;;;;;;;;AAAA;;;;;;;;AAEO,IAAMA,eAAe,GAAG,SAAlBA,eAAkB,CAACC,GAAD,EAAWC,QAAX,EAAuD;AAEpF,MAAMC,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACC,CAAD,EAAmB;AAC1CH,IAAAA,GAAG,CAACI,OAAJ,CAAYC,SAAZ,CAAsBC,GAAtB,CAA0B,eAA1B;AACD,GAFD;;AAIA,MAAMC,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACJ,CAAD,EAAmB;AAC1CH,IAAAA,GAAG,CAACI,OAAJ,CAAYC,SAAZ,CAAsBG,MAAtB,CAA6B,eAA7B;AACD,GAFD;;AAKAC,iBAAMC,SAAN,CAAgB,YAAM;AAAA,+CACFT,QADE;AAAA;;AAAA;AACpB,0DAA4B;AAAA;;AAAA,YAAnBU,KAAmB;AAC1B,2BAAAA,KAAK,CAACP,OAAN,oEAAeQ,gBAAf,CAAgC,YAAhC,EAA8CV,gBAA9C;AACA,2BAAAS,KAAK,CAACP,OAAN,oEAAeQ,gBAAf,CAAgC,YAAhC,EAA8CL,gBAA9C;AACD;AAJmB;AAAA;AAAA;AAAA;AAAA;;AAMpB,WAAO,YAAM;AAAA,kDACON,QADP;AAAA;;AAAA;AACX,+DAA4B;AAAA;;AAAA,cAAnBU,KAAmB;AAC1B,4BAAAA,KAAK,CAACP,OAAN,kEAAeS,mBAAf,CAAmC,YAAnC,EAAiDX,gBAAjD;AACA,6BAAAS,KAAK,CAACP,OAAN,oEAAeS,mBAAf,CAAmC,YAAnC,EAAiDN,gBAAjD;AACD;AAJU;AAAA;AAAA;AAAA;AAAA;AAKZ,KALD;AAMD,GAZD,EAYG,CAACN,QAAD,CAZH;AAaD,CAxBM","sourcesContent":["import React from 'react';\n\nexport const useActionWithin = (ref: any, children: React.MutableRefObject<any>[]) => {\n\n  const handleMouseEnter = (e: MouseEvent) => {\n    ref.current.classList.add('action-within');\n  };\n\n  const handleMouseLeave = (e: MouseEvent) => {\n    ref.current.classList.remove('action-within');\n  };\n\n\n  React.useEffect(() => {\n    for (let child of children) {\n      child.current?.addEventListener('mouseenter', handleMouseEnter);\n      child.current?.addEventListener('mouseleave', handleMouseLeave);\n    }\n\n    return () => {\n      for (let child of children) {\n        child.current?.removeEventListener('mouseenter', handleMouseEnter);\n        child.current?.removeEventListener('mouseleave', handleMouseLeave);\n      }\n    };\n  }, [children]);\n};\n"],"file":"ActionWithin.cjs"}

package/dist/common/ActionWithin.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const useActionWithin: (ref: any, children: React.MutableRefObject<any>[]) => void;

package/dist/common/ActionWithin.js

@@ -0,0 +1,55 @@
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+import React from 'react';
+export var useActionWithin = function useActionWithin(ref, children) {
+  var handleMouseEnter = function handleMouseEnter(e) {
+    ref.current.classList.add('action-within');
+  };
+
+  var handleMouseLeave = function handleMouseLeave(e) {
+    ref.current.classList.remove('action-within');
+  };
+
+  React.useEffect(function () {
+    var _iterator = _createForOfIteratorHelper(children),
+        _step;
+
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var _child$current3, _child$current4;
+
+        var child = _step.value;
+        (_child$current3 = child.current) === null || _child$current3 === void 0 ? void 0 : _child$current3.addEventListener('mouseenter', handleMouseEnter);
+        (_child$current4 = child.current) === null || _child$current4 === void 0 ? void 0 : _child$current4.addEventListener('mouseleave', handleMouseLeave);
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+
+    return function () {
+      var _iterator2 = _createForOfIteratorHelper(children),
+          _step2;
+
+      try {
+        for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+          var _child$current, _child$current2;
+
+          var child = _step2.value;
+          (_child$current = child.current) === null || _child$current === void 0 ? void 0 : _child$current.removeEventListener('mouseenter', handleMouseEnter);
+          (_child$current2 = child.current) === null || _child$current2 === void 0 ? void 0 : _child$current2.removeEventListener('mouseleave', handleMouseLeave);
+        }
+      } catch (err) {
+        _iterator2.e(err);
+      } finally {
+        _iterator2.f();
+      }
+    };
+  }, [children]);
+};
+//# sourceMappingURL=ActionWithin.js.map

package/dist/common/ActionWithin.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/common/ActionWithin.ts"],"names":["React","useActionWithin","ref","children","handleMouseEnter","e","current","classList","add","handleMouseLeave","remove","useEffect","child","addEventListener","removeEventListener"],"mappings":";;;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAEA,OAAO,IAAMC,eAAe,GAAG,SAAlBA,eAAkB,CAACC,GAAD,EAAWC,QAAX,EAAuD;AAEpF,MAAMC,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACC,CAAD,EAAmB;AAC1CH,IAAAA,GAAG,CAACI,OAAJ,CAAYC,SAAZ,CAAsBC,GAAtB,CAA0B,eAA1B;AACD,GAFD;;AAIA,MAAMC,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACJ,CAAD,EAAmB;AAC1CH,IAAAA,GAAG,CAACI,OAAJ,CAAYC,SAAZ,CAAsBG,MAAtB,CAA6B,eAA7B;AACD,GAFD;;AAKAV,EAAAA,KAAK,CAACW,SAAN,CAAgB,YAAM;AAAA,+CACFR,QADE;AAAA;;AAAA;AACpB,0DAA4B;AAAA;;AAAA,YAAnBS,KAAmB;AAC1B,2BAAAA,KAAK,CAACN,OAAN,oEAAeO,gBAAf,CAAgC,YAAhC,EAA8CT,gBAA9C;AACA,2BAAAQ,KAAK,CAACN,OAAN,oEAAeO,gBAAf,CAAgC,YAAhC,EAA8CJ,gBAA9C;AACD;AAJmB;AAAA;AAAA;AAAA;AAAA;;AAMpB,WAAO,YAAM;AAAA,kDACON,QADP;AAAA;;AAAA;AACX,+DAA4B;AAAA;;AAAA,cAAnBS,KAAmB;AAC1B,4BAAAA,KAAK,CAACN,OAAN,kEAAeQ,mBAAf,CAAmC,YAAnC,EAAiDV,gBAAjD;AACA,6BAAAQ,KAAK,CAACN,OAAN,oEAAeQ,mBAAf,CAAmC,YAAnC,EAAiDL,gBAAjD;AACD;AAJU;AAAA;AAAA;AAAA;AAAA;AAKZ,KALD;AAMD,GAZD,EAYG,CAACN,QAAD,CAZH;AAaD,CAxBM","sourcesContent":["import React from 'react';\n\nexport const useActionWithin = (ref: any, children: React.MutableRefObject<any>[]) => {\n\n  const handleMouseEnter = (e: MouseEvent) => {\n    ref.current.classList.add('action-within');\n  };\n\n  const handleMouseLeave = (e: MouseEvent) => {\n    ref.current.classList.remove('action-within');\n  };\n\n\n  React.useEffect(() => {\n    for (let child of children) {\n      child.current?.addEventListener('mouseenter', handleMouseEnter);\n      child.current?.addEventListener('mouseleave', handleMouseLeave);\n    }\n\n    return () => {\n      for (let child of children) {\n        child.current?.removeEventListener('mouseenter', handleMouseEnter);\n        child.current?.removeEventListener('mouseleave', handleMouseLeave);\n      }\n    };\n  }, [children]);\n};\n"],"file":"ActionWithin.js"}

package/dist/common/ClickOutside.cjs

@@ -0,0 +1,39 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useClickOutsideRef = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var useClickOutsideRef = function useClickOutsideRef(callback) {
+  var relatedRefs = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  var ref = arguments.length > 2 ? arguments[2] : undefined;
+  var elementRef = ref !== null && ref !== void 0 ? ref : _react.default.useRef(null);
+
+  _react.default.useEffect(function () {
+    if (!elementRef.current) return;
+    var container = elementRef.current;
+
+    var handleClickOutside = function handleClickOutside(event) {
+      if (container && !container.contains(event.target) && !relatedRefs.some(function (ref) {
+        return ref.current && ref.current.contains(event.target);
+      })) {
+        callback();
+      }
+    };
+
+    document.addEventListener('click', handleClickOutside);
+    return function () {
+      document.removeEventListener('click', handleClickOutside);
+    };
+  }, [elementRef]);
+
+  return elementRef;
+};
+
+exports.useClickOutsideRef = useClickOutsideRef;
+//# sourceMappingURL=ClickOutside.cjs.map

package/dist/common/ClickOutside.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/common/ClickOutside.ts"],"names":["useClickOutsideRef","callback","relatedRefs","ref","elementRef","React","useRef","useEffect","current","container","handleClickOutside","event","contains","target","some","document","addEventListener","removeEventListener"],"mappings":";;;;;;;;;AAAA;;AAEO,IAAMA,kBAAkB,GAAG,SAArBA,kBAAqB,CAACC,QAAD,EAA8D;AAAA,MAAvCC,WAAuC,uEAAlB,EAAkB;AAAA,MAAdC,GAAc;AAC9F,MAAMC,UAAU,GAAGD,GAAH,aAAGA,GAAH,cAAGA,GAAH,GAAUE,eAAMC,MAAN,CAAkB,IAAlB,CAA1B;;AAEAD,iBAAME,SAAN,CAAgB,YAAM;AACpB,QAAI,CAACH,UAAU,CAACI,OAAhB,EAAyB;AACzB,QAAIC,SAAS,GAAGL,UAAU,CAACI,OAA3B;;AAEA,QAAME,kBAAkB,GAAG,SAArBA,kBAAqB,CAACC,KAAD,EAAgB;AACzC,UAAIF,SAAS,IAAI,CAACA,SAAS,CAACG,QAAV,CAAmBD,KAAK,CAACE,MAAzB,CAAd,IAAkD,CAACX,WAAW,CAACY,IAAZ,CAAiB,UAAAX,GAAG;AAAA,eAAIA,GAAG,CAACK,OAAJ,IAAeL,GAAG,CAACK,OAAJ,CAAYI,QAAZ,CAAqBD,KAAK,CAACE,MAA3B,CAAnB;AAAA,OAApB,CAAvD,EAAmI;AACjIZ,QAAAA,QAAQ;AACT;AACF,KAJD;;AAMAc,IAAAA,QAAQ,CAACC,gBAAT,CAA0B,OAA1B,EAAmCN,kBAAnC;AACA,WAAO,YAAM;AACXK,MAAAA,QAAQ,CAACE,mBAAT,CAA6B,OAA7B,EAAsCP,kBAAtC;AACD,KAFD;AAID,GAfD,EAeG,CAACN,UAAD,CAfH;;AAiBA,SAAOA,UAAP;AACD,CArBM","sourcesContent":["import React from 'react';\n\nexport const useClickOutsideRef = (callback: () => void, relatedRefs: any[] = [], ref?: any) => {\n  const elementRef = ref ?? React.useRef<any>(null);\n\n  React.useEffect(() => {\n    if (!elementRef.current) return;\n    let container = elementRef.current;\n\n    const handleClickOutside = (event: any) => {\n      if (container && !container.contains(event.target) && !relatedRefs.some(ref => ref.current && ref.current.contains(event.target))) {\n        callback();\n      }\n    };\n\n    document.addEventListener('click', handleClickOutside);\n    return () => {\n      document.removeEventListener('click', handleClickOutside);\n    };\n\n  }, [elementRef]);\n\n  return elementRef;\n};\n"],"file":"ClickOutside.cjs"}

package/dist/common/ClickOutside.d.ts

@@ -0,0 +1 @@
+export declare const useClickOutsideRef: (callback: () => void, relatedRefs?: any[], ref?: any) => any;

package/dist/common/ClickOutside.js

@@ -0,0 +1,25 @@
+import React from 'react';
+export var useClickOutsideRef = function useClickOutsideRef(callback) {
+  var relatedRefs = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  var ref = arguments.length > 2 ? arguments[2] : undefined;
+  var elementRef = ref !== null && ref !== void 0 ? ref : React.useRef(null);
+  React.useEffect(function () {
+    if (!elementRef.current) return;
+    var container = elementRef.current;
+
+    var handleClickOutside = function handleClickOutside(event) {
+      if (container && !container.contains(event.target) && !relatedRefs.some(function (ref) {
+        return ref.current && ref.current.contains(event.target);
+      })) {
+        callback();
+      }
+    };
+
+    document.addEventListener('click', handleClickOutside);
+    return function () {
+      document.removeEventListener('click', handleClickOutside);
+    };
+  }, [elementRef]);
+  return elementRef;
+};
+//# sourceMappingURL=ClickOutside.js.map

package/dist/common/ClickOutside.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/common/ClickOutside.ts"],"names":["React","useClickOutsideRef","callback","relatedRefs","ref","elementRef","useRef","useEffect","current","container","handleClickOutside","event","contains","target","some","document","addEventListener","removeEventListener"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAEA,OAAO,IAAMC,kBAAkB,GAAG,SAArBA,kBAAqB,CAACC,QAAD,EAA8D;AAAA,MAAvCC,WAAuC,uEAAlB,EAAkB;AAAA,MAAdC,GAAc;AAC9F,MAAMC,UAAU,GAAGD,GAAH,aAAGA,GAAH,cAAGA,GAAH,GAAUJ,KAAK,CAACM,MAAN,CAAkB,IAAlB,CAA1B;AAEAN,EAAAA,KAAK,CAACO,SAAN,CAAgB,YAAM;AACpB,QAAI,CAACF,UAAU,CAACG,OAAhB,EAAyB;AACzB,QAAIC,SAAS,GAAGJ,UAAU,CAACG,OAA3B;;AAEA,QAAME,kBAAkB,GAAG,SAArBA,kBAAqB,CAACC,KAAD,EAAgB;AACzC,UAAIF,SAAS,IAAI,CAACA,SAAS,CAACG,QAAV,CAAmBD,KAAK,CAACE,MAAzB,CAAd,IAAkD,CAACV,WAAW,CAACW,IAAZ,CAAiB,UAAAV,GAAG;AAAA,eAAIA,GAAG,CAACI,OAAJ,IAAeJ,GAAG,CAACI,OAAJ,CAAYI,QAAZ,CAAqBD,KAAK,CAACE,MAA3B,CAAnB;AAAA,OAApB,CAAvD,EAAmI;AACjIX,QAAAA,QAAQ;AACT;AACF,KAJD;;AAMAa,IAAAA,QAAQ,CAACC,gBAAT,CAA0B,OAA1B,EAAmCN,kBAAnC;AACA,WAAO,YAAM;AACXK,MAAAA,QAAQ,CAACE,mBAAT,CAA6B,OAA7B,EAAsCP,kBAAtC;AACD,KAFD;AAID,GAfD,EAeG,CAACL,UAAD,CAfH;AAiBA,SAAOA,UAAP;AACD,CArBM","sourcesContent":["import React from 'react';\n\nexport const useClickOutsideRef = (callback: () => void, relatedRefs: any[] = [], ref?: any) => {\n  const elementRef = ref ?? React.useRef<any>(null);\n\n  React.useEffect(() => {\n    if (!elementRef.current) return;\n    let container = elementRef.current;\n\n    const handleClickOutside = (event: any) => {\n      if (container && !container.contains(event.target) && !relatedRefs.some(ref => ref.current && ref.current.contains(event.target))) {\n        callback();\n      }\n    };\n\n    document.addEventListener('click', handleClickOutside);\n    return () => {\n      document.removeEventListener('click', handleClickOutside);\n    };\n\n  }, [elementRef]);\n\n  return elementRef;\n};\n"],"file":"ClickOutside.js"}

package/dist/common/FocusOutside.cjs

@@ -0,0 +1,39 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useFocusOutsideRef = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var useFocusOutsideRef = function useFocusOutsideRef(callback) {
+  var relatedRefs = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  var ref = arguments.length > 2 ? arguments[2] : undefined;
+  var elementRef = ref !== null && ref !== void 0 ? ref : _react.default.useRef(null);
+
+  _react.default.useEffect(function () {
+    if (!elementRef.current) return;
+    var container = elementRef.current;
+
+    var handleFocusOutside = function handleFocusOutside(event) {
+      if (container && event.target && !container.contains(event.target) && !relatedRefs.some(function (ref) {
+        return ref.current && ref.current.contains(event.target);
+      })) {
+        callback();
+      }
+    };
+
+    document.addEventListener('focusin', handleFocusOutside);
+    return function () {
+      document.removeEventListener('focusin', handleFocusOutside);
+    };
+  }, [elementRef]);
+
+  return elementRef;
+};
+
+exports.useFocusOutsideRef = useFocusOutsideRef;
+//# sourceMappingURL=FocusOutside.cjs.map

package/dist/common/FocusOutside.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/common/FocusOutside.ts"],"names":["useFocusOutsideRef","callback","relatedRefs","ref","elementRef","React","useRef","useEffect","current","container","handleFocusOutside","event","target","contains","some","document","addEventListener","removeEventListener"],"mappings":";;;;;;;;;AAAA;;AAEO,IAAMA,kBAAkB,GAAG,SAArBA,kBAAqB,CAACC,QAAD,EAA8D;AAAA,MAAvCC,WAAuC,uEAAlB,EAAkB;AAAA,MAAdC,GAAc;AAC9F,MAAMC,UAAU,GAAGD,GAAH,aAAGA,GAAH,cAAGA,GAAH,GAAUE,eAAMC,MAAN,CAAkB,IAAlB,CAA1B;;AAEAD,iBAAME,SAAN,CAAgB,YAAM;AACpB,QAAI,CAACH,UAAU,CAACI,OAAhB,EAAyB;AACzB,QAAIC,SAAS,GAAGL,UAAU,CAACI,OAA3B;;AAEA,QAAME,kBAAkB,GAAG,SAArBA,kBAAqB,CAACC,KAAD,EAAgB;AACzC,UAAIF,SAAS,IAAIE,KAAK,CAACC,MAAnB,IAA6B,CAACH,SAAS,CAACI,QAAV,CAAmBF,KAAK,CAACC,MAAzB,CAA9B,IAAkE,CAACV,WAAW,CAACY,IAAZ,CAAiB,UAAAX,GAAG;AAAA,eAAIA,GAAG,CAACK,OAAJ,IAAeL,GAAG,CAACK,OAAJ,CAAYK,QAAZ,CAAqBF,KAAK,CAACC,MAA3B,CAAnB;AAAA,OAApB,CAAvE,EAAmJ;AACjJX,QAAAA,QAAQ;AACT;AACF,KAJD;;AAMAc,IAAAA,QAAQ,CAACC,gBAAT,CAA0B,SAA1B,EAAqCN,kBAArC;AACA,WAAO,YAAM;AACXK,MAAAA,QAAQ,CAACE,mBAAT,CAA6B,SAA7B,EAAwCP,kBAAxC;AACD,KAFD;AAID,GAfD,EAeG,CAACN,UAAD,CAfH;;AAiBA,SAAOA,UAAP;AACD,CArBM","sourcesContent":["import React from 'react';\n\nexport const useFocusOutsideRef = (callback: () => void, relatedRefs: any[] = [], ref?: any) => {\n  const elementRef = ref ?? React.useRef<any>(null);\n\n  React.useEffect(() => {\n    if (!elementRef.current) return;\n    let container = elementRef.current;\n\n    const handleFocusOutside = (event: any) => {\n      if (container && event.target && !container.contains(event.target) && !relatedRefs.some(ref => ref.current && ref.current.contains(event.target))) {\n        callback();\n      }\n    };\n\n    document.addEventListener('focusin', handleFocusOutside);\n    return () => {\n      document.removeEventListener('focusin', handleFocusOutside);\n    };\n\n  }, [elementRef]);\n\n  return elementRef;\n};\n\n"],"file":"FocusOutside.cjs"}

package/dist/common/FocusOutside.d.ts

@@ -0,0 +1 @@
+export declare const useFocusOutsideRef: (callback: () => void, relatedRefs?: any[], ref?: any) => any;

package/dist/common/FocusOutside.js

@@ -0,0 +1,25 @@
+import React from 'react';
+export var useFocusOutsideRef = function useFocusOutsideRef(callback) {
+  var relatedRefs = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  var ref = arguments.length > 2 ? arguments[2] : undefined;
+  var elementRef = ref !== null && ref !== void 0 ? ref : React.useRef(null);
+  React.useEffect(function () {
+    if (!elementRef.current) return;
+    var container = elementRef.current;
+
+    var handleFocusOutside = function handleFocusOutside(event) {
+      if (container && event.target && !container.contains(event.target) && !relatedRefs.some(function (ref) {
+        return ref.current && ref.current.contains(event.target);
+      })) {
+        callback();
+      }
+    };
+
+    document.addEventListener('focusin', handleFocusOutside);
+    return function () {
+      document.removeEventListener('focusin', handleFocusOutside);
+    };
+  }, [elementRef]);
+  return elementRef;
+};
+//# sourceMappingURL=FocusOutside.js.map

package/dist/common/FocusOutside.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/common/FocusOutside.ts"],"names":["React","useFocusOutsideRef","callback","relatedRefs","ref","elementRef","useRef","useEffect","current","container","handleFocusOutside","event","target","contains","some","document","addEventListener","removeEventListener"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAEA,OAAO,IAAMC,kBAAkB,GAAG,SAArBA,kBAAqB,CAACC,QAAD,EAA8D;AAAA,MAAvCC,WAAuC,uEAAlB,EAAkB;AAAA,MAAdC,GAAc;AAC9F,MAAMC,UAAU,GAAGD,GAAH,aAAGA,GAAH,cAAGA,GAAH,GAAUJ,KAAK,CAACM,MAAN,CAAkB,IAAlB,CAA1B;AAEAN,EAAAA,KAAK,CAACO,SAAN,CAAgB,YAAM;AACpB,QAAI,CAACF,UAAU,CAACG,OAAhB,EAAyB;AACzB,QAAIC,SAAS,GAAGJ,UAAU,CAACG,OAA3B;;AAEA,QAAME,kBAAkB,GAAG,SAArBA,kBAAqB,CAACC,KAAD,EAAgB;AACzC,UAAIF,SAAS,IAAIE,KAAK,CAACC,MAAnB,IAA6B,CAACH,SAAS,CAACI,QAAV,CAAmBF,KAAK,CAACC,MAAzB,CAA9B,IAAkE,CAACT,WAAW,CAACW,IAAZ,CAAiB,UAAAV,GAAG;AAAA,eAAIA,GAAG,CAACI,OAAJ,IAAeJ,GAAG,CAACI,OAAJ,CAAYK,QAAZ,CAAqBF,KAAK,CAACC,MAA3B,CAAnB;AAAA,OAApB,CAAvE,EAAmJ;AACjJV,QAAAA,QAAQ;AACT;AACF,KAJD;;AAMAa,IAAAA,QAAQ,CAACC,gBAAT,CAA0B,SAA1B,EAAqCN,kBAArC;AACA,WAAO,YAAM;AACXK,MAAAA,QAAQ,CAACE,mBAAT,CAA6B,SAA7B,EAAwCP,kBAAxC;AACD,KAFD;AAID,GAfD,EAeG,CAACL,UAAD,CAfH;AAiBA,SAAOA,UAAP;AACD,CArBM","sourcesContent":["import React from 'react';\n\nexport const useFocusOutsideRef = (callback: () => void, relatedRefs: any[] = [], ref?: any) => {\n  const elementRef = ref ?? React.useRef<any>(null);\n\n  React.useEffect(() => {\n    if (!elementRef.current) return;\n    let container = elementRef.current;\n\n    const handleFocusOutside = (event: any) => {\n      if (container && event.target && !container.contains(event.target) && !relatedRefs.some(ref => ref.current && ref.current.contains(event.target))) {\n        callback();\n      }\n    };\n\n    document.addEventListener('focusin', handleFocusOutside);\n    return () => {\n      document.removeEventListener('focusin', handleFocusOutside);\n    };\n\n  }, [elementRef]);\n\n  return elementRef;\n};\n\n"],"file":"FocusOutside.js"}

package/dist/common/FocusVisible.cjs

@@ -7,8 +7,16 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useFocusVisibleRef = void 0;
 
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
 var _react = _interopRequireDefault(require("react"));
 
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
 var useFocusVisibleRef = function useFocusVisibleRef() {
   var focusWithinList = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
   var ref = arguments.length > 1 ? arguments[1] : undefined;
@@ -16,47 +24,70 @@ var useFocusVisibleRef = function useFocusVisibleRef() {
 
   var suppress = _react.default.useRef(false);
 
-  var handleMouseDown = function handleMouseDown() {
+  var _React$useState = _react.default.useState(false),
+      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+      visible = _React$useState2[0],
+      setVisible = _React$useState2[1];
+
+  var addFocusVisibleClasses = function addFocusVisibleClasses() {
     var _elementRef$current;
 
-    if (!((_elementRef$current = elementRef.current) !== null && _elementRef$current !== void 0 && _elementRef$current.classList.contains('focus-visible'))) {
+    (_elementRef$current = elementRef.current) === null || _elementRef$current === void 0 ? void 0 : _elementRef$current.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');
+    });
+  };
+
+  var removeFocusVisibleClasses = function removeFocusVisibleClasses() {
+    var _elementRef$current2;
+
+    (_elementRef$current2 = elementRef.current) === null || _elementRef$current2 === void 0 ? void 0 : _elementRef$current2.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');
+    });
+  };
+
+  var handleMouseDown = function handleMouseDown() {
+    var _elementRef$current3;
+
+    if (!((_elementRef$current3 = elementRef.current) !== null && _elementRef$current3 !== void 0 && _elementRef$current3.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');
-      });
+      setVisible(true);
+      addFocusVisibleClasses();
     } 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');
-    });
+    setVisible(false);
+    removeFocusVisibleClasses();
   };
 
+  _react.default.useLayoutEffect(function () {
+    if (visible) {
+      addFocusVisibleClasses();
+    } else {
+      removeFocusVisibleClasses();
+    }
+  }, [visible, elementRef, focusWithinList]);
+
   _react.default.useEffect(function () {
     if (!elementRef.current) return;
     var instance = elementRef.current;
     var focusFn = elementRef.current.focus;
 
     elementRef.current.focus = function (e) {
-      suppress.current = true;
+      suppress.current = !(e !== null && e !== void 0 && e.focusVisible);
       focusFn.call(instance, e);
     };
 
@@ -67,6 +98,23 @@ var useFocusVisibleRef = function useFocusVisibleRef() {
       instance.removeEventListener('mousedown', handleMouseDown);
       instance.removeEventListener('focus', handleFocus);
       instance.removeEventListener('blur', handleBlur);
+      instance.classList.remove('focus-visible');
+
+      var _iterator = _createForOfIteratorHelper(focusWithinList),
+          _step;
+
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var _el$current;
+
+          var el = _step.value;
+          (_el$current = el.current) === null || _el$current === void 0 ? void 0 : _el$current.classList.remove('focus-visible-within');
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
     };
   }, [elementRef]);
 

package/dist/common/FocusVisible.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/common/FocusVisible.ts"],"names":["useFocusVisibleRef","focusWithinList","ref","elementRef","React","useRef","suppress","handleMouseDown","current","classList","contains","handleFocus","add","forEach","focusWithinListItem","handleBlur","remove","useEffect","instance","focusFn","focus","e","call","addEventListener","removeEventListener"],"mappings":";;;;;;;;;AAAA;;AAEO,IAAMA,kBAAkB,GAAG,SAArBA,kBAAqB,GAAoE;AAAA,MAAnEC,eAAmE,uEAAlB,EAAkB;AAAA,MAAdC,GAAc;AACpG,MAAMC,UAAU,GAAGD,GAAH,aAAGA,GAAH,cAAGA,GAAH,GAAUE,eAAMC,MAAN,CAAkB,IAAlB,CAA1B;;AACA,MAAMC,QAAQ,GAAGF,eAAMC,MAAN,CAAsB,KAAtB,CAAjB;;AAEA,MAAME,eAAe,GAAG,SAAlBA,eAAkB,GAAM;AAAA;;AAC5B,QAAI,yBAACJ,UAAU,CAACK,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,8BAAAL,UAAU,CAACK,OAAX,8EAAoBC,SAApB,CAA8BG,GAA9B,CAAkC,eAAlC;AACAX,MAAAA,eAAe,SAAf,IAAAA,eAAe,WAAf,YAAAA,eAAe,CAAEY,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,4BAAAZ,UAAU,CAACK,OAAX,8EAAoBC,SAApB,CAA8BO,MAA9B,CAAqC,eAArC;AACAf,IAAAA,eAAe,SAAf,IAAAA,eAAe,WAAf,YAAAA,eAAe,CAAEY,OAAjB,CAAyB,UAACC,mBAAD,EAAyB;AAAA;;AAChD,gCAAAA,mBAAmB,CAACN,OAApB,kFAA6BC,SAA7B,CAAuCO,MAAvC,CAA8C,sBAA9C;AACD,KAFD;AAGD,GALD;;AAOAZ,iBAAMa,SAAN,CAAgB,YAAM;AACpB,QAAI,CAACd,UAAU,CAACK,OAAhB,EAAyB;AAEzB,QAAMU,QAAQ,GAAGf,UAAU,CAACK,OAA5B;AACA,QAAMW,OAAO,GAAGhB,UAAU,CAACK,OAAX,CAAmBY,KAAnC;;AACAjB,IAAAA,UAAU,CAACK,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,CAACZ,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.cjs"}
+{"version":3,"sources":["../../src/common/FocusVisible.ts"],"names":["useFocusVisibleRef","focusWithinList","ref","elementRef","React","useRef","suppress","useState","visible","setVisible","addFocusVisibleClasses","current","classList","add","forEach","focusWithinListItem","removeFocusVisibleClasses","remove","handleMouseDown","contains","handleFocus","handleBlur","useLayoutEffect","useEffect","instance","focusFn","focus","e","focusVisible","call","addEventListener","removeEventListener","el"],"mappings":"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","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  const [visible, setVisible] = React.useState(false);\n\n  const addFocusVisibleClasses = () => {\n    elementRef.current?.classList.add('focus-visible');\n    focusWithinList?.forEach((focusWithinListItem) => {\n      focusWithinListItem.current?.classList.add('focus-visible-within');\n    });\n  }\n\n  const removeFocusVisibleClasses = () => {\n    elementRef.current?.classList.remove('focus-visible');\n    focusWithinList?.forEach((focusWithinListItem) => {\n      focusWithinListItem.current?.classList.remove('focus-visible-within');\n    });\n  }\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      setVisible(true);\n      addFocusVisibleClasses();\n    } else {\n      suppress.current = false;\n    }\n  };\n\n  const handleBlur = () => {\n    setVisible(false);\n    removeFocusVisibleClasses();\n  };\n\n\n  React.useLayoutEffect(() => {\n    if (visible) {\n      addFocusVisibleClasses()\n    } else {\n      removeFocusVisibleClasses();\n    }\n  }, [visible, elementRef, focusWithinList]);\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 = !e?.focusVisible;\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      instance.classList.remove('focus-visible');\n      for (let el of focusWithinList) {\n        el.current?.classList.remove('focus-visible-within');\n      }\n    };\n  }, [elementRef]);\n\n  return elementRef;\n};\n"],"file":"FocusVisible.cjs"}