@onewelcome/react-lib-components 9.8.0 → 10.0.0

package/dist/hooks/useDebouncedCallback.es.js

@@ -0,0 +1,17 @@
+import React from "react";
+const useDebouncedCallback = (callback, delay, dependencies) => {
+  const timeout = React.useRef();
+  const comboDeps = dependencies ? [callback, delay, ...dependencies] : [callback, delay];
+  return React.useCallback((...args) => {
+    if (timeout.current != null) {
+      clearTimeout(timeout.current);
+    }
+    timeout.current = setTimeout(() => {
+      callback(...args);
+    }, delay);
+  }, comboDeps);
+};
+export {
+  useDebouncedCallback
+};
+//# sourceMappingURL=useDebouncedCallback.es.js.map

package/dist/hooks/useDebouncedCallback.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDebouncedCallback.es.js","sources":["../../src/hooks/useDebouncedCallback.tsx"],"sourcesContent":["/*\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */\n\nimport React from \"react\";\n\n/* eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types */\nexport const useDebouncedCallback = (callback: Function, delay: number, dependencies?: any[]) => {\n  const timeout = React.useRef<ReturnType<typeof setTimeout>>();\n  const comboDeps = dependencies ? [callback, delay, ...dependencies] : [callback, delay];\n\n  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */\n  return React.useCallback((...args: any[]) => {\n    if (timeout.current != null) {\n      clearTimeout(timeout.current);\n    }\n\n    timeout.current = setTimeout(() => {\n      callback(...args);\n    }, delay);\n  }, comboDeps);\n};\n"],"names":[],"mappings":";AAmBO,MAAM,uBAAuB,CAAC,UAAoB,OAAe,iBAAyB;AACzF,QAAA,UAAU,MAAM,OAAsC;AACtD,QAAA,YAAY,eAAe,CAAC,UAAU,OAAO,GAAG,YAAY,IAAI,CAAC,UAAU,KAAK;AAG/E,SAAA,MAAM,YAAY,IAAI,SAAgB;AACvC,QAAA,QAAQ,WAAW,MAAM;AAC3B,mBAAa,QAAQ,OAAO;AAAA,IAAA;AAGtB,YAAA,UAAU,WAAW,MAAM;AACjC,eAAS,GAAG,IAAI;AAAA,OACf,KAAK;AAAA,KACP,SAAS;AACd;"}

package/dist/hooks/useDetermineStatusIcon.cjs.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),r=require("../components/Icon/Icon.cjs.js");exports.useDetermineStatusIcon=t=>{const{error:c,success:s}=t||!1;let n=null;const o=e.useRef(null),u=e.useRef(null);return c?n=e.createElement(r.Icon,{ref:o,"data-icon-status":"error",icon:r.Icons.Error}):s&&(n=e.createElement(r.Icon,{ref:u,"data-icon-status":"success",icon:r.Icons.CheckmarkCircleAlt})),n};
+//# sourceMappingURL=useDetermineStatusIcon.cjs.js.map

package/dist/hooks/useDetermineStatusIcon.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDetermineStatusIcon.cjs.js","sources":["../../src/hooks/useDetermineStatusIcon.tsx"],"sourcesContent":["/*\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */\n\nimport { FormElement } from \"../components/Form/form.interfaces\";\nimport React, { ReactElement, useRef } from \"react\";\nimport { Icon, Icons } from \"../components/Icon/Icon\";\nexport const useDetermineStatusIcon = (params: Partial<FormElement>): ReactElement | null => {\n  const { error, success } = params || false;\n  let icon = null;\n  const errorRef = useRef(null);\n  const successRef = useRef(null);\n\n  if (error) {\n    icon = <Icon ref={errorRef} data-icon-status=\"error\" icon={Icons.Error} />;\n  } else if (success) {\n    icon = <Icon ref={successRef} data-icon-status=\"success\" icon={Icons.CheckmarkCircleAlt} />;\n  }\n\n  return icon;\n};\n"],"names":["params","error","success","icon","errorRef","useRef","successRef","React","createElement","Icon","ref","Icons","Error","CheckmarkCircleAlt"],"mappings":"oLAmBuCA,IACrC,MAAMC,MAAEA,EAAAC,QAAOA,GAAYF,IAAU,EACrC,IAAIG,EAAO,KACL,MAAAC,EAAWC,SAAO,MAClBC,EAAaD,SAAO,MAQnB,OANHJ,EACKE,EAAAI,EAAAC,cAACC,EAAAA,MAAKC,IAAKN,EAAU,mBAAiB,QAAQD,KAAMQ,QAAMC,QACxDV,IACFC,EAAAI,EAAAC,cAACC,EAAAA,MAAKC,IAAKJ,EAAY,mBAAiB,UAAUH,KAAMQ,QAAME,sBAGhEV,CAAA"}

package/dist/hooks/useDetermineStatusIcon.es.js

@@ -0,0 +1,18 @@
+import React, { useRef } from "react";
+import { Icon, Icons } from "../components/Icon/Icon.es.js";
+const useDetermineStatusIcon = (params) => {
+  const { error, success } = params || false;
+  let icon = null;
+  const errorRef = useRef(null);
+  const successRef = useRef(null);
+  if (error) {
+    icon = /* @__PURE__ */ React.createElement(Icon, { ref: errorRef, "data-icon-status": "error", icon: Icons.Error });
+  } else if (success) {
+    icon = /* @__PURE__ */ React.createElement(Icon, { ref: successRef, "data-icon-status": "success", icon: Icons.CheckmarkCircleAlt });
+  }
+  return icon;
+};
+export {
+  useDetermineStatusIcon
+};
+//# sourceMappingURL=useDetermineStatusIcon.es.js.map

package/dist/hooks/useDetermineStatusIcon.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDetermineStatusIcon.es.js","sources":["../../src/hooks/useDetermineStatusIcon.tsx"],"sourcesContent":["/*\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */\n\nimport { FormElement } from \"../components/Form/form.interfaces\";\nimport React, { ReactElement, useRef } from \"react\";\nimport { Icon, Icons } from \"../components/Icon/Icon\";\nexport const useDetermineStatusIcon = (params: Partial<FormElement>): ReactElement | null => {\n  const { error, success } = params || false;\n  let icon = null;\n  const errorRef = useRef(null);\n  const successRef = useRef(null);\n\n  if (error) {\n    icon = <Icon ref={errorRef} data-icon-status=\"error\" icon={Icons.Error} />;\n  } else if (success) {\n    icon = <Icon ref={successRef} data-icon-status=\"success\" icon={Icons.CheckmarkCircleAlt} />;\n  }\n\n  return icon;\n};\n"],"names":[],"mappings":";;AAmBa,MAAA,yBAAyB,CAAC,WAAsD;AAC3F,QAAM,EAAE,OAAO,QAAQ,IAAI,UAAU;AACrC,MAAI,OAAO;AACL,QAAA,WAAW,OAAO,IAAI;AACtB,QAAA,aAAa,OAAO,IAAI;AAE9B,MAAI,OAAO;AACF,WAAA,sBAAA,cAAC,QAAK,KAAK,UAAU,oBAAiB,SAAQ,MAAM,MAAM,MAAO,CAAA;AAAA,aAC/D,SAAS;AACX,WAAA,sBAAA,cAAC,QAAK,KAAK,YAAY,oBAAiB,WAAU,MAAM,MAAM,mBAAoB,CAAA;AAAA,EAAA;AAGpF,SAAA;AACT;"}

package/dist/hooks/useFormSelector.cjs.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react"),e=require("../util/helper.cjs.js");exports.useFormSelector=t=>{const[o]=r.useState(e.generateID(15,t.name)),[a,s]=r.useState(""),[p]=r.useState(e.generateID(15,t.errorMessage));return r.useEffect((()=>{t.error&&t.parentErrorId&&s(t.parentErrorId),(!t.error&&t.helperText||!t.parentErrorId&&!t.errorMessage&&t.helperText)&&s(`${o}`),(!t.error&&!t.helperText&&t.parentHelperId||!t.parentErrorId&&!t.errorMessage&&t.parentHelperId)&&s(`${t.parentHelperId}`),t.errorMessage&&!t.parentErrorId&&t.error&&s(p)}),[o,t.error,t.parentErrorId]),{describedBy:a,errorId:p,identifier:o}};
+//# sourceMappingURL=useFormSelector.cjs.js.map

package/dist/hooks/useFormSelector.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFormSelector.cjs.js","sources":["../../src/hooks/useFormSelector.ts"],"sourcesContent":["/*\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */\n\nimport { useEffect, useState } from \"react\";\nimport { generateID } from \"../util/helper\";\n\nexport interface ConfigObject {\n  name: string | undefined;\n  errorMessage?: string;\n  error?: boolean;\n  parentErrorId?: string;\n  helperText?: string;\n  parentHelperId?: string;\n}\n\nexport const useFormSelector = (configObject: ConfigObject) => {\n  const [identifier] = useState(generateID(15, configObject.name));\n  const [describedBy, setDescribedBy] = useState(\"\");\n  const [errorId] = useState(generateID(15, configObject.errorMessage));\n\n  useEffect(() => {\n    if (configObject.error && configObject.parentErrorId) {\n      setDescribedBy(configObject.parentErrorId);\n    }\n\n    if (\n      (!configObject.error && configObject.helperText) ||\n      (!configObject.parentErrorId && !configObject.errorMessage && configObject.helperText)\n    ) {\n      setDescribedBy(`${identifier}`);\n    }\n\n    if (\n      (!configObject.error && !configObject.helperText && configObject.parentHelperId) ||\n      (!configObject.parentErrorId && !configObject.errorMessage && configObject.parentHelperId)\n    ) {\n      setDescribedBy(`${configObject.parentHelperId}`);\n    }\n\n    if (configObject.errorMessage && !configObject.parentErrorId && configObject.error) {\n      setDescribedBy(errorId);\n    }\n  }, [identifier, configObject.error, configObject.parentErrorId]);\n\n  return {\n    describedBy,\n    errorId,\n    identifier\n  };\n};\n"],"names":["configObject","identifier","useState","generateID","name","describedBy","setDescribedBy","errorId","errorMessage","useEffect","error","parentErrorId","helperText","parentHelperId"],"mappings":"oKA4BgCA,IACxB,MAACC,GAAcC,EAAAA,SAASC,aAAW,GAAIH,EAAaI,QACnDC,EAAaC,GAAkBJ,EAAAA,SAAS,KACxCK,GAAWL,EAAAA,SAASC,aAAW,GAAIH,EAAaQ,eA0BhD,OAxBPC,EAAAA,WAAU,KACJT,EAAaU,OAASV,EAAaW,eACrCL,EAAeN,EAAaW,iBAI1BX,EAAaU,OAASV,EAAaY,aACnCZ,EAAaW,gBAAkBX,EAAaQ,cAAgBR,EAAaY,aAE5DN,EAAA,GAAGL,OAIhBD,EAAaU,QAAUV,EAAaY,YAAcZ,EAAaa,iBAC/Db,EAAaW,gBAAkBX,EAAaQ,cAAgBR,EAAaa,iBAE5DP,EAAA,GAAGN,EAAaa,kBAG7Bb,EAAaQ,eAAiBR,EAAaW,eAAiBX,EAAaU,OAC3EJ,EAAeC,EAAO,GAEvB,CAACN,EAAYD,EAAaU,MAAOV,EAAaW,gBAE1C,CACLN,cACAE,UACAN,aACF"}

package/dist/hooks/useFormSelector.es.js

@@ -0,0 +1,30 @@
+import { useState, useEffect } from "react";
+import { generateID } from "../util/helper.es.js";
+const useFormSelector = (configObject) => {
+  const [identifier] = useState(generateID(15, configObject.name));
+  const [describedBy, setDescribedBy] = useState("");
+  const [errorId] = useState(generateID(15, configObject.errorMessage));
+  useEffect(() => {
+    if (configObject.error && configObject.parentErrorId) {
+      setDescribedBy(configObject.parentErrorId);
+    }
+    if (!configObject.error && configObject.helperText || !configObject.parentErrorId && !configObject.errorMessage && configObject.helperText) {
+      setDescribedBy(`${identifier}`);
+    }
+    if (!configObject.error && !configObject.helperText && configObject.parentHelperId || !configObject.parentErrorId && !configObject.errorMessage && configObject.parentHelperId) {
+      setDescribedBy(`${configObject.parentHelperId}`);
+    }
+    if (configObject.errorMessage && !configObject.parentErrorId && configObject.error) {
+      setDescribedBy(errorId);
+    }
+  }, [identifier, configObject.error, configObject.parentErrorId]);
+  return {
+    describedBy,
+    errorId,
+    identifier
+  };
+};
+export {
+  useFormSelector
+};
+//# sourceMappingURL=useFormSelector.es.js.map

package/dist/hooks/useFormSelector.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFormSelector.es.js","sources":["../../src/hooks/useFormSelector.ts"],"sourcesContent":["/*\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */\n\nimport { useEffect, useState } from \"react\";\nimport { generateID } from \"../util/helper\";\n\nexport interface ConfigObject {\n  name: string | undefined;\n  errorMessage?: string;\n  error?: boolean;\n  parentErrorId?: string;\n  helperText?: string;\n  parentHelperId?: string;\n}\n\nexport const useFormSelector = (configObject: ConfigObject) => {\n  const [identifier] = useState(generateID(15, configObject.name));\n  const [describedBy, setDescribedBy] = useState(\"\");\n  const [errorId] = useState(generateID(15, configObject.errorMessage));\n\n  useEffect(() => {\n    if (configObject.error && configObject.parentErrorId) {\n      setDescribedBy(configObject.parentErrorId);\n    }\n\n    if (\n      (!configObject.error && configObject.helperText) ||\n      (!configObject.parentErrorId && !configObject.errorMessage && configObject.helperText)\n    ) {\n      setDescribedBy(`${identifier}`);\n    }\n\n    if (\n      (!configObject.error && !configObject.helperText && configObject.parentHelperId) ||\n      (!configObject.parentErrorId && !configObject.errorMessage && configObject.parentHelperId)\n    ) {\n      setDescribedBy(`${configObject.parentHelperId}`);\n    }\n\n    if (configObject.errorMessage && !configObject.parentErrorId && configObject.error) {\n      setDescribedBy(errorId);\n    }\n  }, [identifier, configObject.error, configObject.parentErrorId]);\n\n  return {\n    describedBy,\n    errorId,\n    identifier\n  };\n};\n"],"names":[],"mappings":";;AA4Ba,MAAA,kBAAkB,CAAC,iBAA+B;AACvD,QAAA,CAAC,UAAU,IAAI,SAAS,WAAW,IAAI,aAAa,IAAI,CAAC;AAC/D,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,EAAE;AAC3C,QAAA,CAAC,OAAO,IAAI,SAAS,WAAW,IAAI,aAAa,YAAY,CAAC;AAEpE,YAAU,MAAM;AACV,QAAA,aAAa,SAAS,aAAa,eAAe;AACpD,qBAAe,aAAa,aAAa;AAAA,IAAA;AAG3C,QACG,CAAC,aAAa,SAAS,aAAa,cACpC,CAAC,aAAa,iBAAiB,CAAC,aAAa,gBAAgB,aAAa,YAC3E;AACe,qBAAA,GAAG,UAAU,EAAE;AAAA,IAAA;AAGhC,QACG,CAAC,aAAa,SAAS,CAAC,aAAa,cAAc,aAAa,kBAChE,CAAC,aAAa,iBAAiB,CAAC,aAAa,gBAAgB,aAAa,gBAC3E;AACe,qBAAA,GAAG,aAAa,cAAc,EAAE;AAAA,IAAA;AAGjD,QAAI,aAAa,gBAAgB,CAAC,aAAa,iBAAiB,aAAa,OAAO;AAClF,qBAAe,OAAO;AAAA,IAAA;AAAA,EACxB,GACC,CAAC,YAAY,aAAa,OAAO,aAAa,aAAa,CAAC;AAExD,SAAA;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;"}

package/dist/hooks/useFullHeightCollapse.cjs.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react");exports.useFullHeightCollapse=t=>{const[l,o]=e.useState(t??!1);return{collapsed:l,handleScroll:e=>{const t=e.target,{scrollTop:l,scrollHeight:r,clientHeight:s}=t,c=Math.ceil(l/(r-s)*100);o(0!==c)}}};
+//# sourceMappingURL=useFullHeightCollapse.cjs.js.map

package/dist/hooks/useFullHeightCollapse.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFullHeightCollapse.cjs.js","sources":["../../src/hooks/useFullHeightCollapse.ts"],"sourcesContent":["/*\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */\n\nimport { useState } from \"react\";\n\nexport const useFullHeightCollapse = (isCollapsed?: boolean) => {\n  const [collapsed, setCollapsed] = useState(isCollapsed ?? false);\n\n  const handleScroll = (e: React.UIEvent<HTMLDivElement>) => {\n    const target = e.target as HTMLDivElement;\n    const { scrollTop, scrollHeight, clientHeight } = target;\n    const position = Math.ceil((scrollTop / (scrollHeight - clientHeight)) * 100);\n    setCollapsed(position !== 0);\n  };\n\n  return {\n    collapsed,\n    handleScroll\n  };\n};\n"],"names":["isCollapsed","collapsed","setCollapsed","useState","handleScroll","e","target","scrollTop","scrollHeight","clientHeight","position","Math","ceil"],"mappings":"uIAkBsCA,IACpC,MAAOC,EAAWC,GAAgBC,EAAAA,SAASH,IAAe,GASnD,MAAA,CACLC,YACAG,aAToBC,IACpB,MAAMC,EAASD,EAAEC,QACXC,UAAEA,EAAAC,aAAWA,EAAcC,aAAAA,GAAiBH,EAC5CI,EAAWC,KAAKC,KAAML,GAAaC,EAAeC,GAAiB,KACzEP,EAA0B,IAAbQ,EAAc,EAM7B"}

package/dist/hooks/useFullHeightCollapse.es.js

@@ -0,0 +1,18 @@
+import { useState } from "react";
+const useFullHeightCollapse = (isCollapsed) => {
+  const [collapsed, setCollapsed] = useState(isCollapsed ?? false);
+  const handleScroll = (e) => {
+    const target = e.target;
+    const { scrollTop, scrollHeight, clientHeight } = target;
+    const position = Math.ceil(scrollTop / (scrollHeight - clientHeight) * 100);
+    setCollapsed(position !== 0);
+  };
+  return {
+    collapsed,
+    handleScroll
+  };
+};
+export {
+  useFullHeightCollapse
+};
+//# sourceMappingURL=useFullHeightCollapse.es.js.map

package/dist/hooks/useFullHeightCollapse.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFullHeightCollapse.es.js","sources":["../../src/hooks/useFullHeightCollapse.ts"],"sourcesContent":["/*\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */\n\nimport { useState } from \"react\";\n\nexport const useFullHeightCollapse = (isCollapsed?: boolean) => {\n  const [collapsed, setCollapsed] = useState(isCollapsed ?? false);\n\n  const handleScroll = (e: React.UIEvent<HTMLDivElement>) => {\n    const target = e.target as HTMLDivElement;\n    const { scrollTop, scrollHeight, clientHeight } = target;\n    const position = Math.ceil((scrollTop / (scrollHeight - clientHeight)) * 100);\n    setCollapsed(position !== 0);\n  };\n\n  return {\n    collapsed,\n    handleScroll\n  };\n};\n"],"names":[],"mappings":";AAkBa,MAAA,wBAAwB,CAAC,gBAA0B;AAC9D,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,eAAe,KAAK;AAEzD,QAAA,eAAe,CAAC,MAAqC;AACzD,UAAM,SAAS,EAAE;AACjB,UAAM,EAAE,WAAW,cAAc,aAAiB,IAAA;AAClD,UAAM,WAAW,KAAK,KAAM,aAAa,eAAe,gBAAiB,GAAG;AAC5E,iBAAa,aAAa,CAAC;AAAA,EAC7B;AAEO,SAAA;AAAA,IACL;AAAA,IACA;AAAA,EACF;AACF;"}

package/dist/hooks/useGetDomRoot.cjs.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react");exports.useGetDomRoot=(t,r)=>{const[o,s]=e.useState(document.body);return e.useEffect((()=>{if((null==r?void 0:r.current)&&!t){const e=r.current.closest(".basestyling-wrapper");if(e)return void s(e)}else if(t)return void s(t)}),[r]),{root:o}};
+//# sourceMappingURL=useGetDomRoot.cjs.js.map

package/dist/hooks/useGetDomRoot.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useGetDomRoot.cjs.js","sources":["../../src/hooks/useGetDomRoot.ts"],"sourcesContent":["/*\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */\n\nimport { useEffect, useState } from \"react\";\n\nexport const useGetDomRoot = (\n  passedDomRoot: HTMLElement | undefined,\n  relativeElement: React.RefObject<HTMLDivElement> | null\n) => {\n  const [root, setRoot] = useState<HTMLElement>(document.body);\n\n  useEffect(() => {\n    if (relativeElement?.current && !passedDomRoot) {\n      const closestBaseStylingWrapper = relativeElement.current.closest(\".basestyling-wrapper\");\n\n      if (closestBaseStylingWrapper) {\n        setRoot(closestBaseStylingWrapper as HTMLElement);\n        return;\n      }\n    } else if (passedDomRoot) {\n      setRoot(passedDomRoot);\n      return;\n    }\n  }, [relativeElement]);\n\n  return { root };\n};\n"],"names":["passedDomRoot","relativeElement","root","setRoot","useState","document","body","useEffect","current","closestBaseStylingWrapper","closest"],"mappings":"+HAkB6B,CAC3BA,EACAC,KAEA,MAAOC,EAAMC,GAAWC,EAAAA,SAAsBC,SAASC,MAgBvD,OAdAC,EAAAA,WAAU,KACJ,IAAA,MAAAN,OAAA,EAAAA,EAAiBO,WAAYR,EAAe,CAC9C,MAAMS,EAA4BR,EAAgBO,QAAQE,QAAQ,wBAElE,GAAID,EAEF,YADAN,EAAQM,WAGDT,EAET,YADAG,EAAQH,EACR,GAED,CAACC,IAEG,CAAEC,OAAK"}

package/dist/hooks/useGetDomRoot.es.js

@@ -0,0 +1,21 @@
+import { useState, useEffect } from "react";
+const useGetDomRoot = (passedDomRoot, relativeElement) => {
+  const [root, setRoot] = useState(document.body);
+  useEffect(() => {
+    if ((relativeElement == null ? void 0 : relativeElement.current) && !passedDomRoot) {
+      const closestBaseStylingWrapper = relativeElement.current.closest(".basestyling-wrapper");
+      if (closestBaseStylingWrapper) {
+        setRoot(closestBaseStylingWrapper);
+        return;
+      }
+    } else if (passedDomRoot) {
+      setRoot(passedDomRoot);
+      return;
+    }
+  }, [relativeElement]);
+  return { root };
+};
+export {
+  useGetDomRoot
+};
+//# sourceMappingURL=useGetDomRoot.es.js.map

package/dist/hooks/useGetDomRoot.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useGetDomRoot.es.js","sources":["../../src/hooks/useGetDomRoot.ts"],"sourcesContent":["/*\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */\n\nimport { useEffect, useState } from \"react\";\n\nexport const useGetDomRoot = (\n  passedDomRoot: HTMLElement | undefined,\n  relativeElement: React.RefObject<HTMLDivElement> | null\n) => {\n  const [root, setRoot] = useState<HTMLElement>(document.body);\n\n  useEffect(() => {\n    if (relativeElement?.current && !passedDomRoot) {\n      const closestBaseStylingWrapper = relativeElement.current.closest(\".basestyling-wrapper\");\n\n      if (closestBaseStylingWrapper) {\n        setRoot(closestBaseStylingWrapper as HTMLElement);\n        return;\n      }\n    } else if (passedDomRoot) {\n      setRoot(passedDomRoot);\n      return;\n    }\n  }, [relativeElement]);\n\n  return { root };\n};\n"],"names":[],"mappings":";AAkBa,MAAA,gBAAgB,CAC3B,eACA,oBACG;AACH,QAAM,CAAC,MAAM,OAAO,IAAI,SAAsB,SAAS,IAAI;AAE3D,YAAU,MAAM;AACV,SAAA,mDAAiB,YAAW,CAAC,eAAe;AAC9C,YAAM,4BAA4B,gBAAgB,QAAQ,QAAQ,sBAAsB;AAExF,UAAI,2BAA2B;AAC7B,gBAAQ,yBAAwC;AAChD;AAAA,MAAA;AAAA,eAEO,eAAe;AACxB,cAAQ,aAAa;AACrB;AAAA,IAAA;AAAA,EACF,GACC,CAAC,eAAe,CAAC;AAEpB,SAAO,EAAE,KAAK;AAChB;"}

package/dist/hooks/usePosition.cjs.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react"),e=require("./useDebouncedCallback.cjs.js");var o=(t=>(t.LEFT="left",t.CENTER="center",t.CENTER_H="centerh",t.RIGHT="right",t))(o||{}),i=(t=>(t.TOP="top",t.CENTER="center",t.CENTER_V="centerv",t.BOTTOM="bottom",t))(i||{});const n={relativeElement:void 0,elementToBePositioned:void 0,transformOrigin:{horizontal:"left",vertical:"top"},placement:{horizontal:"left",vertical:"top"},offset:{top:0,right:0,bottom:0,left:0},debounceAmount:20};exports.horizontal=o,exports.usePosition=(o=n)=>{const i={...n,...o},[r,l]=t.useState(!1);void 0===i.transformOrigin&&(i.transformOrigin=n.transformOrigin),void 0===i.placement&&(i.placement=n.placement),void 0===i.offset&&(i.offset=n.offset);const[h,f]=t.useState({left:0,top:0,right:"initial",bottom:"initial"}),a=(t,e,o)=>{var n,r;const l=((t,e,o,n,r)=>{const l="center"===e?(t=>{if("horizontal"===t)return"centerh";if("vertical"===t)return"centerv";throw new Error(`the requested return value isn't "vertical" or "horizontal" ${t} was given.`)})(o):e,h=((t,e,o,i,n)=>{let r=0;return"left"===t[e]||"top"===t[e]?r=o[i]:"center"===t[e]?r=o[i]-n["horizontal"===e?"width":"height"]/2:"right"!==t[e]&&"bottom"!==t[e]||(r=window["horizontal"===e?"innerWidth":"innerHeight"]-o[i]),r})(t,o,n,l,r),f=((t,e,o)=>{var n,r,l,h,f,a,d,c,s,u,g,v;let m=t;return("horizontal"===e&&0!==(null==(n=i.offset)?void 0:n.left)||"horizontal"===e&&0!==(null==(r=i.offset)?void 0:r.right))&&("left"!==o[e]&&"center"!==o[e]||(m+=null==(l=i.offset)?void 0:l.left,m-=null==(h=i.offset)?void 0:h.right),"right"===o[e]&&(m-=null==(f=i.offset)?void 0:f.left,m+=null==(a=i.offset)?void 0:a.right)),("vertical"===e&&0!==(null==(d=i.offset)?void 0:d.top)||"vertical"===e&&0!==(null==(c=i.offset)?void 0:c.bottom))&&("top"!==o[e]&&"center"!==o[e]||(m+=null==(s=i.offset)?void 0:s.top,m-=null==(u=i.offset)?void 0:u.bottom),"bottom"===o[e]&&(m-=null==(g=i.offset)?void 0:g.top,m+=null==(v=i.offset)?void 0:v.bottom)),m})(h,o,t);return((t,e,o,i)=>{let n=t;return("left"===e[o]&&n<0||"top"===e[o]&&n<0||"center"===e[o]&&n<0||"bottom"===e[o]&&n<0)&&(n=0),("left"===e[o]&&n>window.innerWidth-i.width||"center"===e[o]&&"horizontal"===o&&n>window.innerWidth-i.width)&&(n=window.innerWidth-i.width),("top"===e[o]&&n>window.innerHeight-i.height||"center"===e[o]&&"vertical"===o&&n>window.innerHeight-i.height)&&(n=window.innerHeight-i.height),"right"===e[o]&&n>window.innerWidth-i.width&&(n=window.innerWidth-i.width),"bottom"===e[o]&&n>window.innerHeight-i.height&&(n=window.innerHeight-i.height),n})(f,t,o,r)})(i.transformOrigin,i.placement[o],o,t,e);let h="left",a="right";"horizontal"===o&&"right"===(null==(n=i.transformOrigin)?void 0:n.horizontal)?(h="right",a="left"):"horizontal"===o&&(h="left",a="right"),"vertical"===o&&"bottom"===(null==(r=i.transformOrigin)?void 0:r.vertical)?(h="bottom",a="top"):"vertical"===o&&(h="top",a="bottom"),f((t=>({...t,[h]:l,[a]:"initial"})))},d=e.useDebouncedCallback((()=>{var t,e;if(!(null==(t=i.relativeElement)?void 0:t.current)||!(null==(e=i.elementToBePositioned)?void 0:e.current))return;const o=i.relativeElement.current.getBoundingClientRect(),n={height:i.elementToBePositioned.current.offsetHeight,width:i.elementToBePositioned.current.offsetWidth},h={top:o.top,right:o.right,bottom:o.bottom,center:0,centerv:o.top+o.height/2,centerh:o.left+o.width/2,left:o.left,width:o.width,height:o.height,x:o.x,y:o.y};a(h,n,"horizontal"),a(h,n,"vertical"),r||l(!0)}),i.debounceAmount??20);return{top:h.top,bottom:h.bottom,left:h.left,right:h.right,calculatePosition:d,initialCalculationDone:r}},exports.vertical=i;
+//# sourceMappingURL=usePosition.cjs.js.map

package/dist/hooks/usePosition.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePosition.cjs.js","sources":["../../src/hooks/usePosition.ts"],"sourcesContent":["/*\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */\n\nimport React, { useState } from \"react\";\nimport { useDebouncedCallback } from \"./useDebouncedCallback\";\n\nexport interface ConfigObject {\n  relativeElement: RefElement;\n  elementToBePositioned: RefElement;\n  transformOrigin?: Placement;\n  placement?: Placement;\n  offset?: Offset;\n  debounceAmount?: number;\n}\n\nexport enum horizontal {\n  LEFT = \"left\",\n  CENTER = \"center\",\n  CENTER_H = \"centerh\",\n  RIGHT = \"right\"\n}\n\nexport enum vertical {\n  TOP = \"top\",\n  CENTER = \"center\",\n  CENTER_V = \"centerv\",\n  BOTTOM = \"bottom\"\n}\n\nexport type HorizontalPlacement = `${horizontal}`;\nexport type VerticalPlacement = `${vertical}`;\n\ntype Axis = \"vertical\" | \"horizontal\";\ntype RefElement = React.RefObject<HTMLOrSVGElement> | undefined;\n\ninterface DomRectObject {\n  top: number;\n  right: number;\n  bottom: number;\n  left: number;\n  center: number;\n  centerh: number;\n  centerv: number;\n  width: number;\n  height: number;\n  x: number;\n  y: number;\n}\n\nexport interface Placement {\n  horizontal: HorizontalPlacement;\n  vertical: VerticalPlacement;\n}\n\nexport interface Offset {\n  top: number;\n  right: number;\n  bottom: number;\n  left: number;\n}\n\nexport interface Position {\n  top: PositionType;\n  right: PositionType;\n  bottom: PositionType;\n  left: PositionType;\n}\n\ninterface Dimensions {\n  height: number;\n  width: number;\n}\n\nexport type PositionType = number | \"initial\";\n\nconst defaultConfigObject: ConfigObject = {\n  relativeElement: undefined,\n  elementToBePositioned: undefined,\n  transformOrigin: {\n    horizontal: \"left\",\n    vertical: \"top\"\n  },\n  placement: {\n    horizontal: \"left\",\n    vertical: \"top\"\n  },\n  offset: {\n    top: 0,\n    right: 0,\n    bottom: 0,\n    left: 0\n  },\n  debounceAmount: 20\n};\n\n/* eslint-disable @typescript-eslint/no-non-null-assertion, @typescript-eslint/no-non-null-asserted-optional-chain*/\nexport const usePosition = (providedConfigObject: ConfigObject = defaultConfigObject) => {\n  const configObject = { ...defaultConfigObject, ...providedConfigObject };\n  const [initialCalculationDone, setInitialCalculationDone] = useState(false);\n\n  if (configObject.transformOrigin === undefined) {\n    configObject.transformOrigin = defaultConfigObject.transformOrigin;\n  }\n\n  if (configObject.placement === undefined) {\n    configObject.placement = defaultConfigObject.placement;\n  }\n\n  if (configObject.offset === undefined) {\n    configObject.offset = defaultConfigObject.offset;\n  }\n\n  const [position, setPosition] = useState<Position>({\n    left: 0,\n    top: 0,\n    right: \"initial\",\n    bottom: \"initial\"\n  });\n\n  const _fixPossibleViewportOverflow = (\n    value: number,\n    transformOrigin: Placement,\n    requestedReturnValue: Axis,\n    elDimensions: Dimensions\n  ) => {\n    let returnValue = value;\n\n    if (\n      (transformOrigin[requestedReturnValue] === \"left\" && returnValue < 0) ||\n      (transformOrigin[requestedReturnValue] === \"top\" && returnValue < 0) ||\n      (transformOrigin[requestedReturnValue] === \"center\" && returnValue < 0) ||\n      (transformOrigin[requestedReturnValue] === \"bottom\" && returnValue < 0)\n    ) {\n      returnValue = 0;\n    }\n\n    if (\n      (transformOrigin[requestedReturnValue] === \"left\" &&\n        returnValue > window.innerWidth - elDimensions.width) ||\n      (transformOrigin[requestedReturnValue] === \"center\" &&\n        requestedReturnValue === \"horizontal\" &&\n        returnValue > window.innerWidth - elDimensions.width)\n    ) {\n      returnValue = window.innerWidth - elDimensions.width;\n    }\n\n    if (\n      (transformOrigin[requestedReturnValue] === \"top\" &&\n        returnValue > window.innerHeight - elDimensions.height) ||\n      (transformOrigin[requestedReturnValue] === \"center\" &&\n        requestedReturnValue === \"vertical\" &&\n        returnValue > window.innerHeight - elDimensions.height)\n    ) {\n      returnValue = window.innerHeight - elDimensions.height;\n    }\n\n    if (\n      transformOrigin[requestedReturnValue] === \"right\" &&\n      returnValue > window.innerWidth - elDimensions.width\n    ) {\n      returnValue = window.innerWidth - elDimensions.width;\n    }\n\n    if (\n      transformOrigin[requestedReturnValue] === \"bottom\" &&\n      returnValue > window.innerHeight - elDimensions.height\n    ) {\n      returnValue = window.innerHeight - elDimensions.height;\n    }\n\n    return returnValue;\n  };\n\n  const _applyOffsetToPlacementValue = (\n    value: number,\n    requestedReturnValue: Axis,\n    transformOrigin: Placement\n  ) => {\n    let returnValue = value;\n    if (\n      (requestedReturnValue === \"horizontal\" && configObject.offset?.left !== 0) ||\n      (requestedReturnValue === \"horizontal\" && configObject.offset?.right !== 0)\n    ) {\n      if (\n        transformOrigin[requestedReturnValue] === \"left\" ||\n        transformOrigin[requestedReturnValue] === \"center\"\n      ) {\n        returnValue += configObject.offset?.left!;\n        returnValue -= configObject.offset?.right!;\n      }\n\n      if (transformOrigin[requestedReturnValue] === \"right\") {\n        returnValue -= configObject.offset?.left!;\n        returnValue += configObject.offset?.right!;\n      }\n    }\n\n    if (\n      (requestedReturnValue === \"vertical\" && configObject.offset?.top !== 0) ||\n      (requestedReturnValue === \"vertical\" && configObject.offset?.bottom !== 0)\n    ) {\n      if (\n        transformOrigin[requestedReturnValue] === \"top\" ||\n        transformOrigin[requestedReturnValue] === \"center\"\n      ) {\n        returnValue += configObject.offset?.top!;\n        returnValue -= configObject.offset?.bottom!;\n      }\n\n      if (transformOrigin[requestedReturnValue] === \"bottom\") {\n        returnValue -= configObject.offset?.top!;\n        returnValue += configObject.offset?.bottom!;\n      }\n    }\n\n    return returnValue;\n  };\n\n  const _calculateInitialPlacementValue = (\n    transformOrigin: Placement,\n    requestedReturnValue: Axis,\n    relEl: DomRectObject,\n    placementOriginDefinition: HorizontalPlacement | VerticalPlacement,\n    elDimensions: Dimensions\n  ) => {\n    let value = 0;\n\n    if (\n      transformOrigin[requestedReturnValue] === \"left\" ||\n      transformOrigin[requestedReturnValue] === \"top\"\n    ) {\n      value = relEl[placementOriginDefinition];\n    } else if (transformOrigin[requestedReturnValue] === \"center\") {\n      value =\n        relEl[placementOriginDefinition] -\n        elDimensions[requestedReturnValue === \"horizontal\" ? \"width\" : \"height\"] / 2;\n    } else if (\n      transformOrigin[requestedReturnValue] === \"right\" ||\n      transformOrigin[requestedReturnValue] === \"bottom\"\n    ) {\n      value =\n        window[requestedReturnValue === \"horizontal\" ? \"innerWidth\" : \"innerHeight\"] -\n        relEl[placementOriginDefinition];\n    }\n\n    return value;\n  };\n\n  /**\n   *\n   * @param requestedReturnValue whether the requested return value is for the horizontal or vertical axis\n   * @returns either the horizontally centered placement definition (centerh) or the vertically centered one (centerv)\n   */\n  const _determineCenteredPlacementOrigin = (requestedReturnValue: Axis) => {\n    if (requestedReturnValue === \"horizontal\") {\n      return \"centerh\";\n    } else if (requestedReturnValue === \"vertical\") {\n      return \"centerv\";\n    }\n    throw new Error(\n      `the requested return value isn't \"vertical\" or \"horizontal\" ${requestedReturnValue} was given.`\n    );\n  };\n\n  const _calculatePlacementValue = (\n    transformOrigin: Placement,\n    placement: HorizontalPlacement | VerticalPlacement,\n    requestedReturnValue: Axis,\n    relEl: DomRectObject,\n    elDimensions: Dimensions\n  ): number => {\n    const placementOriginDefinition =\n      placement === \"center\" ? _determineCenteredPlacementOrigin(requestedReturnValue) : placement;\n\n    const value = _calculateInitialPlacementValue(\n      transformOrigin,\n      requestedReturnValue,\n      relEl,\n      placementOriginDefinition,\n      elDimensions\n    );\n\n    const valueWithOffset = _applyOffsetToPlacementValue(\n      value,\n      requestedReturnValue,\n      transformOrigin\n    );\n\n    return _fixPossibleViewportOverflow(\n      valueWithOffset,\n      transformOrigin,\n      requestedReturnValue,\n      elDimensions\n    );\n  };\n\n  const _calculatePlacement = (relEl: DomRectObject, elDimensions: Dimensions, axis: Axis) => {\n    const placementValue = _calculatePlacementValue(\n      configObject.transformOrigin!,\n      configObject.placement![axis]!,\n      axis,\n      relEl,\n      elDimensions\n    );\n\n    let direction = \"left\";\n    let oppositeDirection = \"right\";\n\n    if (axis === \"horizontal\" && configObject.transformOrigin?.horizontal === \"right\") {\n      direction = \"right\";\n      oppositeDirection = \"left\";\n    } else if (axis === \"horizontal\") {\n      direction = \"left\";\n      oppositeDirection = \"right\";\n    }\n\n    if (axis === \"vertical\" && configObject.transformOrigin?.vertical === \"bottom\") {\n      direction = \"bottom\";\n      oppositeDirection = \"top\";\n    } else if (axis === \"vertical\") {\n      direction = \"top\";\n      oppositeDirection = \"bottom\";\n    }\n\n    setPosition(prevState => ({\n      ...prevState,\n      [direction]: placementValue,\n      [oppositeDirection]: \"initial\"\n    }));\n  };\n\n  const calculatePosition = useDebouncedCallback(() => {\n    if (!configObject.relativeElement?.current || !configObject.elementToBePositioned?.current) {\n      return;\n    }\n    const relativeElRect = (configObject.relativeElement!\n      .current as HTMLElement)!.getBoundingClientRect();\n    const elementToBePositionedDimensions: Dimensions = {\n      height: (configObject.elementToBePositioned!.current as HTMLElement).offsetHeight,\n      width: (configObject.elementToBePositioned!.current as HTMLElement).offsetWidth\n    };\n\n    /** We want to add a center (horizontal and vertical) property to the DOMRect object. Since it's a special object we can't modify so we clone it and add it. */\n    const clonedRelEl = {\n      top: relativeElRect.top,\n      right: relativeElRect.right,\n      bottom: relativeElRect.bottom,\n      center: 0,\n      centerv: relativeElRect.top + relativeElRect.height / 2,\n      centerh: relativeElRect.left + relativeElRect.width / 2,\n      left: relativeElRect.left,\n      width: relativeElRect.width,\n      height: relativeElRect.height,\n      x: relativeElRect.x,\n      y: relativeElRect.y\n    };\n\n    _calculatePlacement(clonedRelEl, elementToBePositionedDimensions, \"horizontal\");\n    _calculatePlacement(clonedRelEl, elementToBePositionedDimensions, \"vertical\");\n\n    if (!initialCalculationDone) {\n      setInitialCalculationDone(true);\n    }\n  }, configObject.debounceAmount ?? 20);\n\n  return {\n    top: position.top,\n    bottom: position.bottom,\n    left: position.left,\n    right: position.right,\n    calculatePosition,\n    initialCalculationDone\n  };\n};\n"],"names":["horizontal","vertical","defaultConfigObject","relativeElement","elementToBePositioned","transformOrigin","placement","offset","top","right","bottom","left","debounceAmount","providedConfigObject","configObject","initialCalculationDone","setInitialCalculationDone","useState","position","setPosition","_calculatePlacement","relEl","elDimensions","axis","placementValue","requestedReturnValue","placementOriginDefinition","Error","_determineCenteredPlacementOrigin","value","window","_calculateInitialPlacementValue","valueWithOffset","returnValue","_a","_b","_c","_d","_e","_f","_g","_h","_i","_j","_k","_l","_applyOffsetToPlacementValue","innerWidth","width","innerHeight","height","_fixPossibleViewportOverflow","_calculatePlacementValue","direction","oppositeDirection","prevState","calculatePosition","useDebouncedCallback","current","relativeElRect","getBoundingClientRect","elementToBePositionedDimensions","offsetHeight","offsetWidth","clonedRelEl","center","centerv","centerh","x","y"],"mappings":"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"}

package/dist/hooks/usePosition.es.js

@@ -0,0 +1,214 @@
+import { useState } from "react";
+import { useDebouncedCallback } from "./useDebouncedCallback.es.js";
+var horizontal = /* @__PURE__ */ ((horizontal2) => {
+  horizontal2["LEFT"] = "left";
+  horizontal2["CENTER"] = "center";
+  horizontal2["CENTER_H"] = "centerh";
+  horizontal2["RIGHT"] = "right";
+  return horizontal2;
+})(horizontal || {});
+var vertical = /* @__PURE__ */ ((vertical2) => {
+  vertical2["TOP"] = "top";
+  vertical2["CENTER"] = "center";
+  vertical2["CENTER_V"] = "centerv";
+  vertical2["BOTTOM"] = "bottom";
+  return vertical2;
+})(vertical || {});
+const defaultConfigObject = {
+  relativeElement: void 0,
+  elementToBePositioned: void 0,
+  transformOrigin: {
+    horizontal: "left",
+    vertical: "top"
+  },
+  placement: {
+    horizontal: "left",
+    vertical: "top"
+  },
+  offset: {
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0
+  },
+  debounceAmount: 20
+};
+const usePosition = (providedConfigObject = defaultConfigObject) => {
+  const configObject = { ...defaultConfigObject, ...providedConfigObject };
+  const [initialCalculationDone, setInitialCalculationDone] = useState(false);
+  if (configObject.transformOrigin === void 0) {
+    configObject.transformOrigin = defaultConfigObject.transformOrigin;
+  }
+  if (configObject.placement === void 0) {
+    configObject.placement = defaultConfigObject.placement;
+  }
+  if (configObject.offset === void 0) {
+    configObject.offset = defaultConfigObject.offset;
+  }
+  const [position, setPosition] = useState({
+    left: 0,
+    top: 0,
+    right: "initial",
+    bottom: "initial"
+  });
+  const _fixPossibleViewportOverflow = (value, transformOrigin, requestedReturnValue, elDimensions) => {
+    let returnValue = value;
+    if (transformOrigin[requestedReturnValue] === "left" && returnValue < 0 || transformOrigin[requestedReturnValue] === "top" && returnValue < 0 || transformOrigin[requestedReturnValue] === "center" && returnValue < 0 || transformOrigin[requestedReturnValue] === "bottom" && returnValue < 0) {
+      returnValue = 0;
+    }
+    if (transformOrigin[requestedReturnValue] === "left" && returnValue > window.innerWidth - elDimensions.width || transformOrigin[requestedReturnValue] === "center" && requestedReturnValue === "horizontal" && returnValue > window.innerWidth - elDimensions.width) {
+      returnValue = window.innerWidth - elDimensions.width;
+    }
+    if (transformOrigin[requestedReturnValue] === "top" && returnValue > window.innerHeight - elDimensions.height || transformOrigin[requestedReturnValue] === "center" && requestedReturnValue === "vertical" && returnValue > window.innerHeight - elDimensions.height) {
+      returnValue = window.innerHeight - elDimensions.height;
+    }
+    if (transformOrigin[requestedReturnValue] === "right" && returnValue > window.innerWidth - elDimensions.width) {
+      returnValue = window.innerWidth - elDimensions.width;
+    }
+    if (transformOrigin[requestedReturnValue] === "bottom" && returnValue > window.innerHeight - elDimensions.height) {
+      returnValue = window.innerHeight - elDimensions.height;
+    }
+    return returnValue;
+  };
+  const _applyOffsetToPlacementValue = (value, requestedReturnValue, transformOrigin) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
+    let returnValue = value;
+    if (requestedReturnValue === "horizontal" && ((_a = configObject.offset) == null ? void 0 : _a.left) !== 0 || requestedReturnValue === "horizontal" && ((_b = configObject.offset) == null ? void 0 : _b.right) !== 0) {
+      if (transformOrigin[requestedReturnValue] === "left" || transformOrigin[requestedReturnValue] === "center") {
+        returnValue += (_c = configObject.offset) == null ? void 0 : _c.left;
+        returnValue -= (_d = configObject.offset) == null ? void 0 : _d.right;
+      }
+      if (transformOrigin[requestedReturnValue] === "right") {
+        returnValue -= (_e = configObject.offset) == null ? void 0 : _e.left;
+        returnValue += (_f = configObject.offset) == null ? void 0 : _f.right;
+      }
+    }
+    if (requestedReturnValue === "vertical" && ((_g = configObject.offset) == null ? void 0 : _g.top) !== 0 || requestedReturnValue === "vertical" && ((_h = configObject.offset) == null ? void 0 : _h.bottom) !== 0) {
+      if (transformOrigin[requestedReturnValue] === "top" || transformOrigin[requestedReturnValue] === "center") {
+        returnValue += (_i = configObject.offset) == null ? void 0 : _i.top;
+        returnValue -= (_j = configObject.offset) == null ? void 0 : _j.bottom;
+      }
+      if (transformOrigin[requestedReturnValue] === "bottom") {
+        returnValue -= (_k = configObject.offset) == null ? void 0 : _k.top;
+        returnValue += (_l = configObject.offset) == null ? void 0 : _l.bottom;
+      }
+    }
+    return returnValue;
+  };
+  const _calculateInitialPlacementValue = (transformOrigin, requestedReturnValue, relEl, placementOriginDefinition, elDimensions) => {
+    let value = 0;
+    if (transformOrigin[requestedReturnValue] === "left" || transformOrigin[requestedReturnValue] === "top") {
+      value = relEl[placementOriginDefinition];
+    } else if (transformOrigin[requestedReturnValue] === "center") {
+      value = relEl[placementOriginDefinition] - elDimensions[requestedReturnValue === "horizontal" ? "width" : "height"] / 2;
+    } else if (transformOrigin[requestedReturnValue] === "right" || transformOrigin[requestedReturnValue] === "bottom") {
+      value = window[requestedReturnValue === "horizontal" ? "innerWidth" : "innerHeight"] - relEl[placementOriginDefinition];
+    }
+    return value;
+  };
+  const _determineCenteredPlacementOrigin = (requestedReturnValue) => {
+    if (requestedReturnValue === "horizontal") {
+      return "centerh";
+    } else if (requestedReturnValue === "vertical") {
+      return "centerv";
+    }
+    throw new Error(
+      `the requested return value isn't "vertical" or "horizontal" ${requestedReturnValue} was given.`
+    );
+  };
+  const _calculatePlacementValue = (transformOrigin, placement, requestedReturnValue, relEl, elDimensions) => {
+    const placementOriginDefinition = placement === "center" ? _determineCenteredPlacementOrigin(requestedReturnValue) : placement;
+    const value = _calculateInitialPlacementValue(
+      transformOrigin,
+      requestedReturnValue,
+      relEl,
+      placementOriginDefinition,
+      elDimensions
+    );
+    const valueWithOffset = _applyOffsetToPlacementValue(
+      value,
+      requestedReturnValue,
+      transformOrigin
+    );
+    return _fixPossibleViewportOverflow(
+      valueWithOffset,
+      transformOrigin,
+      requestedReturnValue,
+      elDimensions
+    );
+  };
+  const _calculatePlacement = (relEl, elDimensions, axis) => {
+    var _a, _b;
+    const placementValue = _calculatePlacementValue(
+      configObject.transformOrigin,
+      configObject.placement[axis],
+      axis,
+      relEl,
+      elDimensions
+    );
+    let direction = "left";
+    let oppositeDirection = "right";
+    if (axis === "horizontal" && ((_a = configObject.transformOrigin) == null ? void 0 : _a.horizontal) === "right") {
+      direction = "right";
+      oppositeDirection = "left";
+    } else if (axis === "horizontal") {
+      direction = "left";
+      oppositeDirection = "right";
+    }
+    if (axis === "vertical" && ((_b = configObject.transformOrigin) == null ? void 0 : _b.vertical) === "bottom") {
+      direction = "bottom";
+      oppositeDirection = "top";
+    } else if (axis === "vertical") {
+      direction = "top";
+      oppositeDirection = "bottom";
+    }
+    setPosition((prevState) => ({
+      ...prevState,
+      [direction]: placementValue,
+      [oppositeDirection]: "initial"
+    }));
+  };
+  const calculatePosition = useDebouncedCallback(() => {
+    var _a, _b;
+    if (!((_a = configObject.relativeElement) == null ? void 0 : _a.current) || !((_b = configObject.elementToBePositioned) == null ? void 0 : _b.current)) {
+      return;
+    }
+    const relativeElRect = configObject.relativeElement.current.getBoundingClientRect();
+    const elementToBePositionedDimensions = {
+      height: configObject.elementToBePositioned.current.offsetHeight,
+      width: configObject.elementToBePositioned.current.offsetWidth
+    };
+    const clonedRelEl = {
+      top: relativeElRect.top,
+      right: relativeElRect.right,
+      bottom: relativeElRect.bottom,
+      center: 0,
+      centerv: relativeElRect.top + relativeElRect.height / 2,
+      centerh: relativeElRect.left + relativeElRect.width / 2,
+      left: relativeElRect.left,
+      width: relativeElRect.width,
+      height: relativeElRect.height,
+      x: relativeElRect.x,
+      y: relativeElRect.y
+    };
+    _calculatePlacement(clonedRelEl, elementToBePositionedDimensions, "horizontal");
+    _calculatePlacement(clonedRelEl, elementToBePositionedDimensions, "vertical");
+    if (!initialCalculationDone) {
+      setInitialCalculationDone(true);
+    }
+  }, configObject.debounceAmount ?? 20);
+  return {
+    top: position.top,
+    bottom: position.bottom,
+    left: position.left,
+    right: position.right,
+    calculatePosition,
+    initialCalculationDone
+  };
+};
+export {
+  horizontal,
+  usePosition,
+  vertical
+};
+//# sourceMappingURL=usePosition.es.js.map

package/dist/hooks/usePosition.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePosition.es.js","sources":["../../src/hooks/usePosition.ts"],"sourcesContent":["/*\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */\n\nimport React, { useState } from \"react\";\nimport { useDebouncedCallback } from \"./useDebouncedCallback\";\n\nexport interface ConfigObject {\n  relativeElement: RefElement;\n  elementToBePositioned: RefElement;\n  transformOrigin?: Placement;\n  placement?: Placement;\n  offset?: Offset;\n  debounceAmount?: number;\n}\n\nexport enum horizontal {\n  LEFT = \"left\",\n  CENTER = \"center\",\n  CENTER_H = \"centerh\",\n  RIGHT = \"right\"\n}\n\nexport enum vertical {\n  TOP = \"top\",\n  CENTER = \"center\",\n  CENTER_V = \"centerv\",\n  BOTTOM = \"bottom\"\n}\n\nexport type HorizontalPlacement = `${horizontal}`;\nexport type VerticalPlacement = `${vertical}`;\n\ntype Axis = \"vertical\" | \"horizontal\";\ntype RefElement = React.RefObject<HTMLOrSVGElement> | undefined;\n\ninterface DomRectObject {\n  top: number;\n  right: number;\n  bottom: number;\n  left: number;\n  center: number;\n  centerh: number;\n  centerv: number;\n  width: number;\n  height: number;\n  x: number;\n  y: number;\n}\n\nexport interface Placement {\n  horizontal: HorizontalPlacement;\n  vertical: VerticalPlacement;\n}\n\nexport interface Offset {\n  top: number;\n  right: number;\n  bottom: number;\n  left: number;\n}\n\nexport interface Position {\n  top: PositionType;\n  right: PositionType;\n  bottom: PositionType;\n  left: PositionType;\n}\n\ninterface Dimensions {\n  height: number;\n  width: number;\n}\n\nexport type PositionType = number | \"initial\";\n\nconst defaultConfigObject: ConfigObject = {\n  relativeElement: undefined,\n  elementToBePositioned: undefined,\n  transformOrigin: {\n    horizontal: \"left\",\n    vertical: \"top\"\n  },\n  placement: {\n    horizontal: \"left\",\n    vertical: \"top\"\n  },\n  offset: {\n    top: 0,\n    right: 0,\n    bottom: 0,\n    left: 0\n  },\n  debounceAmount: 20\n};\n\n/* eslint-disable @typescript-eslint/no-non-null-assertion, @typescript-eslint/no-non-null-asserted-optional-chain*/\nexport const usePosition = (providedConfigObject: ConfigObject = defaultConfigObject) => {\n  const configObject = { ...defaultConfigObject, ...providedConfigObject };\n  const [initialCalculationDone, setInitialCalculationDone] = useState(false);\n\n  if (configObject.transformOrigin === undefined) {\n    configObject.transformOrigin = defaultConfigObject.transformOrigin;\n  }\n\n  if (configObject.placement === undefined) {\n    configObject.placement = defaultConfigObject.placement;\n  }\n\n  if (configObject.offset === undefined) {\n    configObject.offset = defaultConfigObject.offset;\n  }\n\n  const [position, setPosition] = useState<Position>({\n    left: 0,\n    top: 0,\n    right: \"initial\",\n    bottom: \"initial\"\n  });\n\n  const _fixPossibleViewportOverflow = (\n    value: number,\n    transformOrigin: Placement,\n    requestedReturnValue: Axis,\n    elDimensions: Dimensions\n  ) => {\n    let returnValue = value;\n\n    if (\n      (transformOrigin[requestedReturnValue] === \"left\" && returnValue < 0) ||\n      (transformOrigin[requestedReturnValue] === \"top\" && returnValue < 0) ||\n      (transformOrigin[requestedReturnValue] === \"center\" && returnValue < 0) ||\n      (transformOrigin[requestedReturnValue] === \"bottom\" && returnValue < 0)\n    ) {\n      returnValue = 0;\n    }\n\n    if (\n      (transformOrigin[requestedReturnValue] === \"left\" &&\n        returnValue > window.innerWidth - elDimensions.width) ||\n      (transformOrigin[requestedReturnValue] === \"center\" &&\n        requestedReturnValue === \"horizontal\" &&\n        returnValue > window.innerWidth - elDimensions.width)\n    ) {\n      returnValue = window.innerWidth - elDimensions.width;\n    }\n\n    if (\n      (transformOrigin[requestedReturnValue] === \"top\" &&\n        returnValue > window.innerHeight - elDimensions.height) ||\n      (transformOrigin[requestedReturnValue] === \"center\" &&\n        requestedReturnValue === \"vertical\" &&\n        returnValue > window.innerHeight - elDimensions.height)\n    ) {\n      returnValue = window.innerHeight - elDimensions.height;\n    }\n\n    if (\n      transformOrigin[requestedReturnValue] === \"right\" &&\n      returnValue > window.innerWidth - elDimensions.width\n    ) {\n      returnValue = window.innerWidth - elDimensions.width;\n    }\n\n    if (\n      transformOrigin[requestedReturnValue] === \"bottom\" &&\n      returnValue > window.innerHeight - elDimensions.height\n    ) {\n      returnValue = window.innerHeight - elDimensions.height;\n    }\n\n    return returnValue;\n  };\n\n  const _applyOffsetToPlacementValue = (\n    value: number,\n    requestedReturnValue: Axis,\n    transformOrigin: Placement\n  ) => {\n    let returnValue = value;\n    if (\n      (requestedReturnValue === \"horizontal\" && configObject.offset?.left !== 0) ||\n      (requestedReturnValue === \"horizontal\" && configObject.offset?.right !== 0)\n    ) {\n      if (\n        transformOrigin[requestedReturnValue] === \"left\" ||\n        transformOrigin[requestedReturnValue] === \"center\"\n      ) {\n        returnValue += configObject.offset?.left!;\n        returnValue -= configObject.offset?.right!;\n      }\n\n      if (transformOrigin[requestedReturnValue] === \"right\") {\n        returnValue -= configObject.offset?.left!;\n        returnValue += configObject.offset?.right!;\n      }\n    }\n\n    if (\n      (requestedReturnValue === \"vertical\" && configObject.offset?.top !== 0) ||\n      (requestedReturnValue === \"vertical\" && configObject.offset?.bottom !== 0)\n    ) {\n      if (\n        transformOrigin[requestedReturnValue] === \"top\" ||\n        transformOrigin[requestedReturnValue] === \"center\"\n      ) {\n        returnValue += configObject.offset?.top!;\n        returnValue -= configObject.offset?.bottom!;\n      }\n\n      if (transformOrigin[requestedReturnValue] === \"bottom\") {\n        returnValue -= configObject.offset?.top!;\n        returnValue += configObject.offset?.bottom!;\n      }\n    }\n\n    return returnValue;\n  };\n\n  const _calculateInitialPlacementValue = (\n    transformOrigin: Placement,\n    requestedReturnValue: Axis,\n    relEl: DomRectObject,\n    placementOriginDefinition: HorizontalPlacement | VerticalPlacement,\n    elDimensions: Dimensions\n  ) => {\n    let value = 0;\n\n    if (\n      transformOrigin[requestedReturnValue] === \"left\" ||\n      transformOrigin[requestedReturnValue] === \"top\"\n    ) {\n      value = relEl[placementOriginDefinition];\n    } else if (transformOrigin[requestedReturnValue] === \"center\") {\n      value =\n        relEl[placementOriginDefinition] -\n        elDimensions[requestedReturnValue === \"horizontal\" ? \"width\" : \"height\"] / 2;\n    } else if (\n      transformOrigin[requestedReturnValue] === \"right\" ||\n      transformOrigin[requestedReturnValue] === \"bottom\"\n    ) {\n      value =\n        window[requestedReturnValue === \"horizontal\" ? \"innerWidth\" : \"innerHeight\"] -\n        relEl[placementOriginDefinition];\n    }\n\n    return value;\n  };\n\n  /**\n   *\n   * @param requestedReturnValue whether the requested return value is for the horizontal or vertical axis\n   * @returns either the horizontally centered placement definition (centerh) or the vertically centered one (centerv)\n   */\n  const _determineCenteredPlacementOrigin = (requestedReturnValue: Axis) => {\n    if (requestedReturnValue === \"horizontal\") {\n      return \"centerh\";\n    } else if (requestedReturnValue === \"vertical\") {\n      return \"centerv\";\n    }\n    throw new Error(\n      `the requested return value isn't \"vertical\" or \"horizontal\" ${requestedReturnValue} was given.`\n    );\n  };\n\n  const _calculatePlacementValue = (\n    transformOrigin: Placement,\n    placement: HorizontalPlacement | VerticalPlacement,\n    requestedReturnValue: Axis,\n    relEl: DomRectObject,\n    elDimensions: Dimensions\n  ): number => {\n    const placementOriginDefinition =\n      placement === \"center\" ? _determineCenteredPlacementOrigin(requestedReturnValue) : placement;\n\n    const value = _calculateInitialPlacementValue(\n      transformOrigin,\n      requestedReturnValue,\n      relEl,\n      placementOriginDefinition,\n      elDimensions\n    );\n\n    const valueWithOffset = _applyOffsetToPlacementValue(\n      value,\n      requestedReturnValue,\n      transformOrigin\n    );\n\n    return _fixPossibleViewportOverflow(\n      valueWithOffset,\n      transformOrigin,\n      requestedReturnValue,\n      elDimensions\n    );\n  };\n\n  const _calculatePlacement = (relEl: DomRectObject, elDimensions: Dimensions, axis: Axis) => {\n    const placementValue = _calculatePlacementValue(\n      configObject.transformOrigin!,\n      configObject.placement![axis]!,\n      axis,\n      relEl,\n      elDimensions\n    );\n\n    let direction = \"left\";\n    let oppositeDirection = \"right\";\n\n    if (axis === \"horizontal\" && configObject.transformOrigin?.horizontal === \"right\") {\n      direction = \"right\";\n      oppositeDirection = \"left\";\n    } else if (axis === \"horizontal\") {\n      direction = \"left\";\n      oppositeDirection = \"right\";\n    }\n\n    if (axis === \"vertical\" && configObject.transformOrigin?.vertical === \"bottom\") {\n      direction = \"bottom\";\n      oppositeDirection = \"top\";\n    } else if (axis === \"vertical\") {\n      direction = \"top\";\n      oppositeDirection = \"bottom\";\n    }\n\n    setPosition(prevState => ({\n      ...prevState,\n      [direction]: placementValue,\n      [oppositeDirection]: \"initial\"\n    }));\n  };\n\n  const calculatePosition = useDebouncedCallback(() => {\n    if (!configObject.relativeElement?.current || !configObject.elementToBePositioned?.current) {\n      return;\n    }\n    const relativeElRect = (configObject.relativeElement!\n      .current as HTMLElement)!.getBoundingClientRect();\n    const elementToBePositionedDimensions: Dimensions = {\n      height: (configObject.elementToBePositioned!.current as HTMLElement).offsetHeight,\n      width: (configObject.elementToBePositioned!.current as HTMLElement).offsetWidth\n    };\n\n    /** We want to add a center (horizontal and vertical) property to the DOMRect object. Since it's a special object we can't modify so we clone it and add it. */\n    const clonedRelEl = {\n      top: relativeElRect.top,\n      right: relativeElRect.right,\n      bottom: relativeElRect.bottom,\n      center: 0,\n      centerv: relativeElRect.top + relativeElRect.height / 2,\n      centerh: relativeElRect.left + relativeElRect.width / 2,\n      left: relativeElRect.left,\n      width: relativeElRect.width,\n      height: relativeElRect.height,\n      x: relativeElRect.x,\n      y: relativeElRect.y\n    };\n\n    _calculatePlacement(clonedRelEl, elementToBePositionedDimensions, \"horizontal\");\n    _calculatePlacement(clonedRelEl, elementToBePositionedDimensions, \"vertical\");\n\n    if (!initialCalculationDone) {\n      setInitialCalculationDone(true);\n    }\n  }, configObject.debounceAmount ?? 20);\n\n  return {\n    top: position.top,\n    bottom: position.bottom,\n    left: position.left,\n    right: position.right,\n    calculatePosition,\n    initialCalculationDone\n  };\n};\n"],"names":["horizontal","vertical"],"mappings":";;AA4BY,IAAA,+BAAAA,gBAAL;AACLA,cAAA,MAAO,IAAA;AACPA,cAAA,QAAS,IAAA;AACTA,cAAA,UAAW,IAAA;AACXA,cAAA,OAAQ,IAAA;AAJEA,SAAAA;AAAA,GAAA,cAAA,CAAA,CAAA;AAOA,IAAA,6BAAAC,cAAL;AACLA,YAAA,KAAM,IAAA;AACNA,YAAA,QAAS,IAAA;AACTA,YAAA,UAAW,IAAA;AACXA,YAAA,QAAS,IAAA;AAJCA,SAAAA;AAAA,GAAA,YAAA,CAAA,CAAA;AAqDZ,MAAM,sBAAoC;AAAA,EACxC,iBAAiB;AAAA,EACjB,uBAAuB;AAAA,EACvB,iBAAiB;AAAA,IACf,YAAY;AAAA,IACZ,UAAU;AAAA,EACZ;AAAA,EACA,WAAW;AAAA,IACT,YAAY;AAAA,IACZ,UAAU;AAAA,EACZ;AAAA,EACA,QAAQ;AAAA,IACN,KAAK;AAAA,IACL,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,MAAM;AAAA,EACR;AAAA,EACA,gBAAgB;AAClB;AAGa,MAAA,cAAc,CAAC,uBAAqC,wBAAwB;AACvF,QAAM,eAAe,EAAE,GAAG,qBAAqB,GAAG,qBAAqB;AACvE,QAAM,CAAC,wBAAwB,yBAAyB,IAAI,SAAS,KAAK;AAEtE,MAAA,aAAa,oBAAoB,QAAW;AAC9C,iBAAa,kBAAkB,oBAAoB;AAAA,EAAA;AAGjD,MAAA,aAAa,cAAc,QAAW;AACxC,iBAAa,YAAY,oBAAoB;AAAA,EAAA;AAG3C,MAAA,aAAa,WAAW,QAAW;AACrC,iBAAa,SAAS,oBAAoB;AAAA,EAAA;AAG5C,QAAM,CAAC,UAAU,WAAW,IAAI,SAAmB;AAAA,IACjD,MAAM;AAAA,IACN,KAAK;AAAA,IACL,OAAO;AAAA,IACP,QAAQ;AAAA,EAAA,CACT;AAED,QAAM,+BAA+B,CACnC,OACA,iBACA,sBACA,iBACG;AACH,QAAI,cAAc;AAGf,QAAA,gBAAgB,oBAAoB,MAAM,UAAU,cAAc,KAClE,gBAAgB,oBAAoB,MAAM,SAAS,cAAc,KACjE,gBAAgB,oBAAoB,MAAM,YAAY,cAAc,KACpE,gBAAgB,oBAAoB,MAAM,YAAY,cAAc,GACrE;AACc,oBAAA;AAAA,IAAA;AAGhB,QACG,gBAAgB,oBAAoB,MAAM,UACzC,cAAc,OAAO,aAAa,aAAa,SAChD,gBAAgB,oBAAoB,MAAM,YACzC,yBAAyB,gBACzB,cAAc,OAAO,aAAa,aAAa,OACjD;AACc,oBAAA,OAAO,aAAa,aAAa;AAAA,IAAA;AAGjD,QACG,gBAAgB,oBAAoB,MAAM,SACzC,cAAc,OAAO,cAAc,aAAa,UACjD,gBAAgB,oBAAoB,MAAM,YACzC,yBAAyB,cACzB,cAAc,OAAO,cAAc,aAAa,QAClD;AACc,oBAAA,OAAO,cAAc,aAAa;AAAA,IAAA;AAIhD,QAAA,gBAAgB,oBAAoB,MAAM,WAC1C,cAAc,OAAO,aAAa,aAAa,OAC/C;AACc,oBAAA,OAAO,aAAa,aAAa;AAAA,IAAA;AAI/C,QAAA,gBAAgB,oBAAoB,MAAM,YAC1C,cAAc,OAAO,cAAc,aAAa,QAChD;AACc,oBAAA,OAAO,cAAc,aAAa;AAAA,IAAA;AAG3C,WAAA;AAAA,EACT;AAEA,QAAM,+BAA+B,CACnC,OACA,sBACA,oBACG;;AACH,QAAI,cAAc;AAEf,QAAA,yBAAyB,kBAAgB,kBAAa,WAAb,mBAAqB,UAAS,KACvE,yBAAyB,kBAAgB,kBAAa,WAAb,mBAAqB,WAAU,GACzE;AACA,UACE,gBAAgB,oBAAoB,MAAM,UAC1C,gBAAgB,oBAAoB,MAAM,UAC1C;AACA,wBAAe,kBAAa,WAAb,mBAAqB;AACpC,wBAAe,kBAAa,WAAb,mBAAqB;AAAA,MAAA;AAGlC,UAAA,gBAAgB,oBAAoB,MAAM,SAAS;AACrD,wBAAe,kBAAa,WAAb,mBAAqB;AACpC,wBAAe,kBAAa,WAAb,mBAAqB;AAAA,MAAA;AAAA,IACtC;AAIC,QAAA,yBAAyB,gBAAc,kBAAa,WAAb,mBAAqB,SAAQ,KACpE,yBAAyB,gBAAc,kBAAa,WAAb,mBAAqB,YAAW,GACxE;AACA,UACE,gBAAgB,oBAAoB,MAAM,SAC1C,gBAAgB,oBAAoB,MAAM,UAC1C;AACA,wBAAe,kBAAa,WAAb,mBAAqB;AACpC,wBAAe,kBAAa,WAAb,mBAAqB;AAAA,MAAA;AAGlC,UAAA,gBAAgB,oBAAoB,MAAM,UAAU;AACtD,wBAAe,kBAAa,WAAb,mBAAqB;AACpC,wBAAe,kBAAa,WAAb,mBAAqB;AAAA,MAAA;AAAA,IACtC;AAGK,WAAA;AAAA,EACT;AAEA,QAAM,kCAAkC,CACtC,iBACA,sBACA,OACA,2BACA,iBACG;AACH,QAAI,QAAQ;AAEZ,QACE,gBAAgB,oBAAoB,MAAM,UAC1C,gBAAgB,oBAAoB,MAAM,OAC1C;AACA,cAAQ,MAAM,yBAAyB;AAAA,IAC9B,WAAA,gBAAgB,oBAAoB,MAAM,UAAU;AAE3D,cAAA,MAAM,yBAAyB,IAC/B,aAAa,yBAAyB,eAAe,UAAU,QAAQ,IAAI;AAAA,IAAA,WAE7E,gBAAgB,oBAAoB,MAAM,WAC1C,gBAAgB,oBAAoB,MAAM,UAC1C;AACA,cACE,OAAO,yBAAyB,eAAe,eAAe,aAAa,IAC3E,MAAM,yBAAyB;AAAA,IAAA;AAG5B,WAAA;AAAA,EACT;AAOM,QAAA,oCAAoC,CAAC,yBAA+B;AACxE,QAAI,yBAAyB,cAAc;AAClC,aAAA;AAAA,IAAA,WACE,yBAAyB,YAAY;AACvC,aAAA;AAAA,IAAA;AAET,UAAM,IAAI;AAAA,MACR,+DAA+D,oBAAoB;AAAA,IACrF;AAAA,EACF;AAEA,QAAM,2BAA2B,CAC/B,iBACA,WACA,sBACA,OACA,iBACW;AACX,UAAM,4BACJ,cAAc,WAAW,kCAAkC,oBAAoB,IAAI;AAErF,UAAM,QAAQ;AAAA,MACZ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAEA,UAAM,kBAAkB;AAAA,MACtB;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAEO,WAAA;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,QAAM,sBAAsB,CAAC,OAAsB,cAA0B,SAAe;;AAC1F,UAAM,iBAAiB;AAAA,MACrB,aAAa;AAAA,MACb,aAAa,UAAW,IAAI;AAAA,MAC5B;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAEA,QAAI,YAAY;AAChB,QAAI,oBAAoB;AAExB,QAAI,SAAS,kBAAgB,kBAAa,oBAAb,mBAA8B,gBAAe,SAAS;AACrE,kBAAA;AACQ,0BAAA;AAAA,IAAA,WACX,SAAS,cAAc;AACpB,kBAAA;AACQ,0BAAA;AAAA,IAAA;AAGtB,QAAI,SAAS,gBAAc,kBAAa,oBAAb,mBAA8B,cAAa,UAAU;AAClE,kBAAA;AACQ,0BAAA;AAAA,IAAA,WACX,SAAS,YAAY;AAClB,kBAAA;AACQ,0BAAA;AAAA,IAAA;AAGtB,gBAAY,CAAc,eAAA;AAAA,MACxB,GAAG;AAAA,MACH,CAAC,SAAS,GAAG;AAAA,MACb,CAAC,iBAAiB,GAAG;AAAA,IAAA,EACrB;AAAA,EACJ;AAEM,QAAA,oBAAoB,qBAAqB,MAAM;;AACnD,QAAI,GAAC,kBAAa,oBAAb,mBAA8B,YAAW,GAAC,kBAAa,0BAAb,mBAAoC,UAAS;AAC1F;AAAA,IAAA;AAEF,UAAM,iBAAkB,aAAa,gBAClC,QAAyB,sBAAsB;AAClD,UAAM,kCAA8C;AAAA,MAClD,QAAS,aAAa,sBAAuB,QAAwB;AAAA,MACrE,OAAQ,aAAa,sBAAuB,QAAwB;AAAA,IACtE;AAGA,UAAM,cAAc;AAAA,MAClB,KAAK,eAAe;AAAA,MACpB,OAAO,eAAe;AAAA,MACtB,QAAQ,eAAe;AAAA,MACvB,QAAQ;AAAA,MACR,SAAS,eAAe,MAAM,eAAe,SAAS;AAAA,MACtD,SAAS,eAAe,OAAO,eAAe,QAAQ;AAAA,MACtD,MAAM,eAAe;AAAA,MACrB,OAAO,eAAe;AAAA,MACtB,QAAQ,eAAe;AAAA,MACvB,GAAG,eAAe;AAAA,MAClB,GAAG,eAAe;AAAA,IACpB;AAEoB,wBAAA,aAAa,iCAAiC,YAAY;AAC1D,wBAAA,aAAa,iCAAiC,UAAU;AAE5E,QAAI,CAAC,wBAAwB;AAC3B,gCAA0B,IAAI;AAAA,IAAA;AAAA,EAChC,GACC,aAAa,kBAAkB,EAAE;AAE7B,SAAA;AAAA,IACL,KAAK,SAAS;AAAA,IACd,QAAQ,SAAS;AAAA,IACjB,MAAM,SAAS;AAAA,IACf,OAAO,SAAS;AAAA,IAChB;AAAA,IACA;AAAA,EACF;AACF;"}

package/dist/hooks/useRepeatFocus.cjs.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react");exports.useRepeatFocus=t=>{const n=(e,t)=>{const n=["button","[href]","input","select","textarea","[tabindex]","[contenteditable]"].map((e=>`${e}:not([tabindex="-1"])`)).join(", "),r=e.querySelectorAll(n);return"first"===t?r[0]||null:"last"===t&&r[r.length-1]||null};e.useEffect((()=>{if(!t.current||!open)return;const e=n(t.current,"last"),r=n(t.current,"first");if(!e||!r)return;const o=t=>{"Tab"===t.key&&(t.shiftKey?document.activeElement===r&&(t.preventDefault(),null==e||e.focus()):document.activeElement===e&&(t.preventDefault(),null==r||r.focus()))};return e.addEventListener("keydown",o),r.addEventListener("keydown",o),()=>{e.removeEventListener("keydown",o),r.removeEventListener("keydown",o)}}),[t,open])};
+//# sourceMappingURL=useRepeatFocus.cjs.js.map

package/dist/hooks/useRepeatFocus.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRepeatFocus.cjs.js","sources":["../../src/hooks/useRepeatFocus.tsx"],"sourcesContent":["/*\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */\n\nimport { RefObject, useEffect } from \"react\";\n\n/**\n * @description This is a hook that will make sure that when a modal is open and the user tabs through the it,\n * the focus will be repeated and the user will not lose their entire focusable element to an element in the background\n * that is being blocked by the modal.\n */\n\nexport const useRepeatFocus = (ref: RefObject<HTMLDivElement>) => {\n  const getFocusableElement = (\n    element: HTMLElement,\n    position: \"first\" | \"last\"\n  ): HTMLElement | null => {\n    const baseSelectors = [\n      \"button\",\n      \"[href]\",\n      \"input\",\n      \"select\",\n      \"textarea\",\n      \"[tabindex]\",\n      \"[contenteditable]\"\n    ];\n    const focusableSelectors = baseSelectors\n      .map(selector => `${selector}:not([tabindex=\"-1\"])`)\n      .join(\", \");\n    const focusableElements = element.querySelectorAll<HTMLElement>(focusableSelectors);\n\n    if (position === \"first\") {\n      return focusableElements[0] || null;\n    } else if (position === \"last\") {\n      return focusableElements[focusableElements.length - 1] || null;\n    }\n\n    return null;\n  };\n\n  useEffect(() => {\n    if (!ref.current || !open) {\n      return;\n    }\n\n    const lastFocusableElement = getFocusableElement(ref.current, \"last\");\n    const firstFocusableElement = getFocusableElement(ref.current, \"first\");\n\n    if (!lastFocusableElement || !firstFocusableElement) {\n      return;\n    }\n\n    const handleTabKeyPress = (event: KeyboardEvent) => {\n      if (event.key !== \"Tab\") {\n        return;\n      }\n\n      if (event.shiftKey) {\n        if (document.activeElement === firstFocusableElement) {\n          event.preventDefault();\n          lastFocusableElement?.focus();\n        }\n      } else if (document.activeElement === lastFocusableElement) {\n        event.preventDefault();\n        firstFocusableElement?.focus();\n      }\n    };\n\n    lastFocusableElement.addEventListener(\"keydown\", handleTabKeyPress);\n    firstFocusableElement.addEventListener(\"keydown\", handleTabKeyPress);\n\n    return () => {\n      lastFocusableElement.removeEventListener(\"keydown\", handleTabKeyPress);\n      firstFocusableElement.removeEventListener(\"keydown\", handleTabKeyPress);\n    };\n  }, [ref, open]);\n};\n"],"names":["ref","getFocusableElement","element","position","focusableSelectors","map","selector","join","focusableElements","querySelectorAll","length","useEffect","current","open","lastFocusableElement","firstFocusableElement","handleTabKeyPress","event","key","shiftKey","document","activeElement","preventDefault","focus","addEventListener","removeEventListener"],"mappings":"gIAwB+BA,IACvB,MAAAC,EAAsB,CAC1BC,EACAC,KAEA,MASMC,EATgB,CACpB,SACA,SACA,QACA,SACA,WACA,aACA,qBAGCC,KAAIC,GAAY,GAAGA,2BACnBC,KAAK,MACFC,EAAoBN,EAAQO,iBAA8BL,GAEhE,MAAiB,UAAbD,EACKK,EAAkB,IAAM,KACT,SAAbL,GACFK,EAAkBA,EAAkBE,OAAS,IAG/C,IAAA,EAGTC,EAAAA,WAAU,KACR,IAAKX,EAAIY,UAAYC,KACnB,OAGF,MAAMC,EAAuBb,EAAoBD,EAAIY,QAAS,QACxDG,EAAwBd,EAAoBD,EAAIY,QAAS,SAE3D,IAACE,IAAyBC,EAC5B,OAGI,MAAAC,EAAqBC,IACP,QAAdA,EAAMC,MAIND,EAAME,SACJC,SAASC,gBAAkBN,IAC7BE,EAAMK,iBACgB,MAAAR,GAAAA,EAAAS,SAEfH,SAASC,gBAAkBP,IACpCG,EAAMK,iBACiB,MAAAP,GAAAA,EAAAQ,SAAM,EAOjC,OAHqBT,EAAAU,iBAAiB,UAAWR,GAC3BD,EAAAS,iBAAiB,UAAWR,GAE3C,KACgBF,EAAAW,oBAAoB,UAAWT,GAC9BD,EAAAU,oBAAoB,UAAWT,EAAiB,CACxE,GACC,CAAChB,EAAKa,MAAK"}

package/dist/hooks/useRepeatFocus.es.js

@@ -0,0 +1,56 @@
+import { useEffect } from "react";
+const useRepeatFocus = (ref) => {
+  const getFocusableElement = (element, position) => {
+    const baseSelectors = [
+      "button",
+      "[href]",
+      "input",
+      "select",
+      "textarea",
+      "[tabindex]",
+      "[contenteditable]"
+    ];
+    const focusableSelectors = baseSelectors.map((selector) => `${selector}:not([tabindex="-1"])`).join(", ");
+    const focusableElements = element.querySelectorAll(focusableSelectors);
+    if (position === "first") {
+      return focusableElements[0] || null;
+    } else if (position === "last") {
+      return focusableElements[focusableElements.length - 1] || null;
+    }
+    return null;
+  };
+  useEffect(() => {
+    if (!ref.current || !open) {
+      return;
+    }
+    const lastFocusableElement = getFocusableElement(ref.current, "last");
+    const firstFocusableElement = getFocusableElement(ref.current, "first");
+    if (!lastFocusableElement || !firstFocusableElement) {
+      return;
+    }
+    const handleTabKeyPress = (event) => {
+      if (event.key !== "Tab") {
+        return;
+      }
+      if (event.shiftKey) {
+        if (document.activeElement === firstFocusableElement) {
+          event.preventDefault();
+          lastFocusableElement == null ? void 0 : lastFocusableElement.focus();
+        }
+      } else if (document.activeElement === lastFocusableElement) {
+        event.preventDefault();
+        firstFocusableElement == null ? void 0 : firstFocusableElement.focus();
+      }
+    };
+    lastFocusableElement.addEventListener("keydown", handleTabKeyPress);
+    firstFocusableElement.addEventListener("keydown", handleTabKeyPress);
+    return () => {
+      lastFocusableElement.removeEventListener("keydown", handleTabKeyPress);
+      firstFocusableElement.removeEventListener("keydown", handleTabKeyPress);
+    };
+  }, [ref, open]);
+};
+export {
+  useRepeatFocus
+};
+//# sourceMappingURL=useRepeatFocus.es.js.map

package/dist/hooks/useRepeatFocus.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRepeatFocus.es.js","sources":["../../src/hooks/useRepeatFocus.tsx"],"sourcesContent":["/*\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */\n\nimport { RefObject, useEffect } from \"react\";\n\n/**\n * @description This is a hook that will make sure that when a modal is open and the user tabs through the it,\n * the focus will be repeated and the user will not lose their entire focusable element to an element in the background\n * that is being blocked by the modal.\n */\n\nexport const useRepeatFocus = (ref: RefObject<HTMLDivElement>) => {\n  const getFocusableElement = (\n    element: HTMLElement,\n    position: \"first\" | \"last\"\n  ): HTMLElement | null => {\n    const baseSelectors = [\n      \"button\",\n      \"[href]\",\n      \"input\",\n      \"select\",\n      \"textarea\",\n      \"[tabindex]\",\n      \"[contenteditable]\"\n    ];\n    const focusableSelectors = baseSelectors\n      .map(selector => `${selector}:not([tabindex=\"-1\"])`)\n      .join(\", \");\n    const focusableElements = element.querySelectorAll<HTMLElement>(focusableSelectors);\n\n    if (position === \"first\") {\n      return focusableElements[0] || null;\n    } else if (position === \"last\") {\n      return focusableElements[focusableElements.length - 1] || null;\n    }\n\n    return null;\n  };\n\n  useEffect(() => {\n    if (!ref.current || !open) {\n      return;\n    }\n\n    const lastFocusableElement = getFocusableElement(ref.current, \"last\");\n    const firstFocusableElement = getFocusableElement(ref.current, \"first\");\n\n    if (!lastFocusableElement || !firstFocusableElement) {\n      return;\n    }\n\n    const handleTabKeyPress = (event: KeyboardEvent) => {\n      if (event.key !== \"Tab\") {\n        return;\n      }\n\n      if (event.shiftKey) {\n        if (document.activeElement === firstFocusableElement) {\n          event.preventDefault();\n          lastFocusableElement?.focus();\n        }\n      } else if (document.activeElement === lastFocusableElement) {\n        event.preventDefault();\n        firstFocusableElement?.focus();\n      }\n    };\n\n    lastFocusableElement.addEventListener(\"keydown\", handleTabKeyPress);\n    firstFocusableElement.addEventListener(\"keydown\", handleTabKeyPress);\n\n    return () => {\n      lastFocusableElement.removeEventListener(\"keydown\", handleTabKeyPress);\n      firstFocusableElement.removeEventListener(\"keydown\", handleTabKeyPress);\n    };\n  }, [ref, open]);\n};\n"],"names":[],"mappings":";AAwBa,MAAA,iBAAiB,CAAC,QAAmC;AAC1D,QAAA,sBAAsB,CAC1B,SACA,aACuB;AACvB,UAAM,gBAAgB;AAAA,MACpB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AACM,UAAA,qBAAqB,cACxB,IAAI,CAAA,aAAY,GAAG,QAAQ,uBAAuB,EAClD,KAAK,IAAI;AACN,UAAA,oBAAoB,QAAQ,iBAA8B,kBAAkB;AAElF,QAAI,aAAa,SAAS;AACjB,aAAA,kBAAkB,CAAC,KAAK;AAAA,IAAA,WACtB,aAAa,QAAQ;AAC9B,aAAO,kBAAkB,kBAAkB,SAAS,CAAC,KAAK;AAAA,IAAA;AAGrD,WAAA;AAAA,EACT;AAEA,YAAU,MAAM;AACd,QAAI,CAAC,IAAI,WAAW,CAAC,MAAM;AACzB;AAAA,IAAA;AAGF,UAAM,uBAAuB,oBAAoB,IAAI,SAAS,MAAM;AACpE,UAAM,wBAAwB,oBAAoB,IAAI,SAAS,OAAO;AAElE,QAAA,CAAC,wBAAwB,CAAC,uBAAuB;AACnD;AAAA,IAAA;AAGI,UAAA,oBAAoB,CAAC,UAAyB;AAC9C,UAAA,MAAM,QAAQ,OAAO;AACvB;AAAA,MAAA;AAGF,UAAI,MAAM,UAAU;AACd,YAAA,SAAS,kBAAkB,uBAAuB;AACpD,gBAAM,eAAe;AACrB,uEAAsB;AAAA,QAAM;AAAA,MAC9B,WACS,SAAS,kBAAkB,sBAAsB;AAC1D,cAAM,eAAe;AACrB,uEAAuB;AAAA,MAAM;AAAA,IAEjC;AAEqB,yBAAA,iBAAiB,WAAW,iBAAiB;AAC5C,0BAAA,iBAAiB,WAAW,iBAAiB;AAEnE,WAAO,MAAM;AACU,2BAAA,oBAAoB,WAAW,iBAAiB;AAC/C,4BAAA,oBAAoB,WAAW,iBAAiB;AAAA,IACxE;AAAA,EAAA,GACC,CAAC,KAAK,IAAI,CAAC;AAChB;"}

package/dist/hooks/useRepeater.cjs.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),t=require("../util/helper.cjs.js");exports.useRepeater=({componentToRepeat:r})=>{const[o,n]=e.useState([]);e.useEffect((()=>{s()}),[]);const s=()=>{const o=e.cloneElement(r,{key:t.generateID(20)});n((e=>[...e,o]))};return{repeatedComponents:o,repeat:s,remove:e=>{const t=o.filter((t=>t!==e));n(t)}}};
+//# sourceMappingURL=useRepeater.cjs.js.map

package/dist/hooks/useRepeater.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRepeater.cjs.js","sources":["../../src/hooks/useRepeater.ts"],"sourcesContent":["/*\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */\n\nimport React, { useEffect, useState, JSX } from \"react\";\nimport { generateID } from \"../util/helper\";\n\ninterface Arguments {\n  componentToRepeat: React.ReactElement;\n}\n\nexport const useRepeater = <T>({ componentToRepeat }: Arguments) => {\n  const [repeatedComponents, setRepeatedComponents] = useState<JSX.Element[]>([]);\n\n  useEffect(() => {\n    repeat();\n  }, []);\n\n  const repeat = () => {\n    const clonedComponent = React.cloneElement(componentToRepeat, { key: generateID(20) });\n\n    setRepeatedComponents(prevState => [...prevState, clonedComponent]);\n  };\n\n  const remove = (componentToRemove: React.ReactElement<T>) => {\n    const newRepeatedComponents = repeatedComponents.filter(\n      component => component !== componentToRemove\n    );\n\n    setRepeatedComponents(newRepeatedComponents);\n  };\n\n  return {\n    repeatedComponents,\n    repeat,\n    remove\n  };\n};\n"],"names":["componentToRepeat","repeatedComponents","setRepeatedComponents","useState","useEffect","repeat","clonedComponent","React","cloneElement","key","generateID","prevState","remove","componentToRemove","newRepeatedComponents","filter","component"],"mappings":"gKAuB2B,EAAMA,wBAC/B,MAAOC,EAAoBC,GAAyBC,EAAAA,SAAwB,IAE5EC,EAAAA,WAAU,KACDC,GAAA,GACN,IAEH,MAAMA,EAAS,KACP,MAAAC,EAAkBC,EAAMC,aAAaR,EAAmB,CAAES,IAAKC,EAAAA,WAAW,MAEhFR,GAAmCS,GAAA,IAAIA,EAAWL,IAAgB,EAW7D,MAAA,CACLL,qBACAI,SACAO,OAXcC,IACd,MAAMC,EAAwBb,EAAmBc,WAClCC,IAAcH,IAG7BX,EAAsBY,EAAqB,EAO7C"}