@onewelcome/react-lib-components 11.1.0-delta → 12.1.0-alpha

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":"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"}

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"}

package/dist/hooks/useRepeater.es.js

@@ -0,0 +1,27 @@
+import React, { useState, useEffect } from "react";
+import { generateID } from "../util/helper.es.js";
+const useRepeater = ({ componentToRepeat }) => {
+  const [repeatedComponents, setRepeatedComponents] = useState([]);
+  useEffect(() => {
+    repeat();
+  }, []);
+  const repeat = () => {
+    const clonedComponent = React.cloneElement(componentToRepeat, { key: generateID(20) });
+    setRepeatedComponents((prevState) => [...prevState, clonedComponent]);
+  };
+  const remove = (componentToRemove) => {
+    const newRepeatedComponents = repeatedComponents.filter(
+      (component) => component !== componentToRemove
+    );
+    setRepeatedComponents(newRepeatedComponents);
+  };
+  return {
+    repeatedComponents,
+    repeat,
+    remove
+  };
+};
+export {
+  useRepeater
+};
+//# sourceMappingURL=useRepeater.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useRepeater.es.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":[],"mappings":";;AAuBO,MAAM,cAAc,CAAI,EAAE,wBAAmC;AAClE,QAAM,CAAC,oBAAoB,qBAAqB,IAAI,SAAwB,CAAA,CAAE;AAE9E,YAAU,MAAM;AACP,WAAA;AAAA,EACT,GAAG,EAAE;AAEL,QAAM,SAAS,MAAM;AACb,UAAA,kBAAkB,MAAM,aAAa,mBAAmB,EAAE,KAAK,WAAW,EAAE,GAAG;AAErF,0BAAsB,CAAa,cAAA,CAAC,GAAG,WAAW,eAAe,CAAC;AAAA,EACpE;AAEM,QAAA,SAAS,CAAC,sBAA6C;AAC3D,UAAM,wBAAwB,mBAAmB;AAAA,MAC/C,eAAa,cAAc;AAAA,IAC7B;AAEA,0BAAsB,qBAAqB;AAAA,EAC7C;AAEO,SAAA;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;"}

package/dist/hooks/useScreenSize.cjs.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),n=require("../variables.cjs.js"),r=e=>e*parseFloat(getComputedStyle(document.documentElement).fontSize),t=e=>e<r(n.breakpoints[n.ScreenSize.SMALL])?n.ScreenSize.SMALL:e<r(n.breakpoints[n.ScreenSize.MEDIUM])?n.ScreenSize.MEDIUM:n.ScreenSize.LARGE;exports.useScreenSize=({onScreenSizeChange:r}={})=>{const[i,S]=e.useState(t(window.innerWidth));return e.useEffect((()=>{const e=()=>{const e=t(window.innerWidth);S((n=>e!==n?(null==r||r(e,n),e):n))};return window.addEventListener("resize",e),e(),()=>window.removeEventListener("resize",e)}),[]),{screenSize:i,isDesktopScreenSize:()=>i===n.ScreenSize.LARGE}};
+//# sourceMappingURL=useScreenSize.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useScreenSize.cjs.js","sources":["../../src/hooks/useScreenSize.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, useEffect } from \"react\";\nimport { breakpoints, ScreenSize } from \"../variables\";\n\ninterface Props {\n  onScreenSizeChange?: (nextScreenSize: ScreenSize, prevScreenSize?: ScreenSize) => void;\n}\n\nconst emToPx = (em: number) => em * parseFloat(getComputedStyle(document.documentElement).fontSize);\n\nconst getScreenSize = (width: number) => {\n  if (width < emToPx(breakpoints[ScreenSize.SMALL])) {\n    return ScreenSize.SMALL;\n  }\n  if (width < emToPx(breakpoints[ScreenSize.MEDIUM])) {\n    return ScreenSize.MEDIUM;\n  }\n\n  return ScreenSize.LARGE;\n};\n\nexport const useScreenSize = ({ onScreenSizeChange }: Props = {}) => {\n  const [screenSize, setScreenSize] = useState<ScreenSize>(getScreenSize(window.innerWidth));\n\n  useEffect(() => {\n    const handleResize = () => {\n      const newScreenSize = getScreenSize(window.innerWidth);\n      setScreenSize(prevScreenSize => {\n        if (newScreenSize !== prevScreenSize) {\n          onScreenSizeChange?.(newScreenSize, prevScreenSize);\n          return newScreenSize;\n        }\n        return prevScreenSize;\n      });\n    };\n\n    window.addEventListener(\"resize\", handleResize);\n    handleResize();\n    return () => window.removeEventListener(\"resize\", handleResize);\n  }, []);\n\n  const isDesktopScreenSize = () => screenSize === ScreenSize.LARGE;\n\n  return { screenSize, isDesktopScreenSize };\n};\n"],"names":["emToPx","em","parseFloat","getComputedStyle","document","documentElement","fontSize","getScreenSize","width","breakpoints","ScreenSize","SMALL","MEDIUM","LARGE","onScreenSizeChange","screenSize","setScreenSize","useState","window","innerWidth","useEffect","handleResize","newScreenSize","prevScreenSize","addEventListener","removeEventListener","isDesktopScreenSize"],"mappings":"0IAuBMA,EAAUC,GAAeA,EAAKC,WAAWC,iBAAiBC,SAASC,iBAAiBC,UAEpFC,EAAiBC,GACjBA,EAAQR,EAAOS,EAAAA,YAAYC,EAAAA,WAAWC,QACjCD,EAAWA,WAAAC,MAEhBH,EAAQR,EAAOS,EAAAA,YAAYC,EAAAA,WAAWE,SACjCF,EAAWA,WAAAE,OAGbF,EAAWA,WAAAG,4BAGS,EAAGC,sBAA8B,MACtD,MAACC,EAAYC,GAAiBC,WAAqBV,EAAcW,OAAOC,aAqBvE,OAnBPC,EAAAA,WAAU,KACR,MAAMC,EAAe,KACb,MAAAC,EAAgBf,EAAcW,OAAOC,YAC3CH,GAAgCO,GAC1BD,IAAkBC,GACpB,MAAAT,GAAAA,EAAqBQ,EAAeC,GAC7BD,GAEFC,GACR,EAKH,OAFOL,OAAAM,iBAAiB,SAAUH,GACrBA,IACN,IAAMH,OAAOO,oBAAoB,SAAUJ,EAAY,GAC7D,IAII,CAAEN,aAAYW,oBAFO,IAAMX,IAAeL,EAAAA,WAAWG,MAEnB"}

package/dist/hooks/useScreenSize.es.js

@@ -0,0 +1,36 @@
+import { useState, useEffect } from "react";
+import { breakpoints, ScreenSize } from "../variables.es.js";
+const emToPx = (em) => em * parseFloat(getComputedStyle(document.documentElement).fontSize);
+const getScreenSize = (width) => {
+  if (width < emToPx(breakpoints[ScreenSize.SMALL])) {
+    return ScreenSize.SMALL;
+  }
+  if (width < emToPx(breakpoints[ScreenSize.MEDIUM])) {
+    return ScreenSize.MEDIUM;
+  }
+  return ScreenSize.LARGE;
+};
+const useScreenSize = ({ onScreenSizeChange } = {}) => {
+  const [screenSize, setScreenSize] = useState(getScreenSize(window.innerWidth));
+  useEffect(() => {
+    const handleResize = () => {
+      const newScreenSize = getScreenSize(window.innerWidth);
+      setScreenSize((prevScreenSize) => {
+        if (newScreenSize !== prevScreenSize) {
+          onScreenSizeChange == null ? void 0 : onScreenSizeChange(newScreenSize, prevScreenSize);
+          return newScreenSize;
+        }
+        return prevScreenSize;
+      });
+    };
+    window.addEventListener("resize", handleResize);
+    handleResize();
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+  const isDesktopScreenSize = () => screenSize === ScreenSize.LARGE;
+  return { screenSize, isDesktopScreenSize };
+};
+export {
+  useScreenSize
+};
+//# sourceMappingURL=useScreenSize.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useScreenSize.es.js","sources":["../../src/hooks/useScreenSize.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, useEffect } from \"react\";\nimport { breakpoints, ScreenSize } from \"../variables\";\n\ninterface Props {\n  onScreenSizeChange?: (nextScreenSize: ScreenSize, prevScreenSize?: ScreenSize) => void;\n}\n\nconst emToPx = (em: number) => em * parseFloat(getComputedStyle(document.documentElement).fontSize);\n\nconst getScreenSize = (width: number) => {\n  if (width < emToPx(breakpoints[ScreenSize.SMALL])) {\n    return ScreenSize.SMALL;\n  }\n  if (width < emToPx(breakpoints[ScreenSize.MEDIUM])) {\n    return ScreenSize.MEDIUM;\n  }\n\n  return ScreenSize.LARGE;\n};\n\nexport const useScreenSize = ({ onScreenSizeChange }: Props = {}) => {\n  const [screenSize, setScreenSize] = useState<ScreenSize>(getScreenSize(window.innerWidth));\n\n  useEffect(() => {\n    const handleResize = () => {\n      const newScreenSize = getScreenSize(window.innerWidth);\n      setScreenSize(prevScreenSize => {\n        if (newScreenSize !== prevScreenSize) {\n          onScreenSizeChange?.(newScreenSize, prevScreenSize);\n          return newScreenSize;\n        }\n        return prevScreenSize;\n      });\n    };\n\n    window.addEventListener(\"resize\", handleResize);\n    handleResize();\n    return () => window.removeEventListener(\"resize\", handleResize);\n  }, []);\n\n  const isDesktopScreenSize = () => screenSize === ScreenSize.LARGE;\n\n  return { screenSize, isDesktopScreenSize };\n};\n"],"names":[],"mappings":";;AAuBA,MAAM,SAAS,CAAC,OAAe,KAAK,WAAW,iBAAiB,SAAS,eAAe,EAAE,QAAQ;AAElG,MAAM,gBAAgB,CAAC,UAAkB;AACvC,MAAI,QAAQ,OAAO,YAAY,WAAW,KAAK,CAAC,GAAG;AACjD,WAAO,WAAW;AAAA,EAAA;AAEpB,MAAI,QAAQ,OAAO,YAAY,WAAW,MAAM,CAAC,GAAG;AAClD,WAAO,WAAW;AAAA,EAAA;AAGpB,SAAO,WAAW;AACpB;AAEO,MAAM,gBAAgB,CAAC,EAAE,mBAAmB,IAAW,OAAO;AAC7D,QAAA,CAAC,YAAY,aAAa,IAAI,SAAqB,cAAc,OAAO,UAAU,CAAC;AAEzF,YAAU,MAAM;AACd,UAAM,eAAe,MAAM;AACnB,YAAA,gBAAgB,cAAc,OAAO,UAAU;AACrD,oBAAc,CAAkB,mBAAA;AAC9B,YAAI,kBAAkB,gBAAgB;AACpC,mEAAqB,eAAe;AAC7B,iBAAA;AAAA,QAAA;AAEF,eAAA;AAAA,MAAA,CACR;AAAA,IACH;AAEO,WAAA,iBAAiB,UAAU,YAAY;AACjC,iBAAA;AACb,WAAO,MAAM,OAAO,oBAAoB,UAAU,YAAY;AAAA,EAChE,GAAG,EAAE;AAEC,QAAA,sBAAsB,MAAM,eAAe,WAAW;AAErD,SAAA,EAAE,YAAY,oBAAoB;AAC3C;"}

package/dist/hooks/useSpacing.cjs.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=/(\d+\.?\d*)+/g;exports.useSpacing=(r,t)=>r?Object.entries(r).reduce(((r,[t,o])=>{const n=String(o).matchAll(e),c=Array.from(n).map((([e])=>.25*Number(e)+"rem")).join(" ");return{...r,[t]:c}}),t??{}):t;
+//# sourceMappingURL=useSpacing.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useSpacing.cjs.js","sources":["../../src/hooks/useSpacing.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 { CSSProperties } from \"react\";\n\nexport type SpacingMultiplier = 0 | 0.5 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;\ntype SpacingMultiplierStringOrNumber = `${SpacingMultiplier}` | SpacingMultiplier;\ntype MultiValueSpacingMultiplier =\n  | `${SpacingMultiplier} ${SpacingMultiplier} ${SpacingMultiplier} ${SpacingMultiplier}`\n  | `${SpacingMultiplier} ${SpacingMultiplier} ${SpacingMultiplier}`\n  | `${SpacingMultiplier} ${SpacingMultiplier}`\n  | SpacingMultiplierStringOrNumber;\n\nexport interface Spacing {\n  padding?: MultiValueSpacingMultiplier;\n  paddingTop?: SpacingMultiplierStringOrNumber;\n  paddingBottom?: SpacingMultiplierStringOrNumber;\n  paddingLeft?: SpacingMultiplierStringOrNumber;\n  paddingRight?: SpacingMultiplierStringOrNumber;\n  margin?: MultiValueSpacingMultiplier;\n  marginTop?: SpacingMultiplierStringOrNumber;\n  marginBottom?: SpacingMultiplierStringOrNumber;\n  marginLeft?: SpacingMultiplierStringOrNumber;\n  marginRight?: SpacingMultiplierStringOrNumber;\n}\n\nconst defaultFactor = 0.25;\nconst defaultUnit = \"rem\";\nconst spacingNumberRegex = /(\\d+\\.?\\d*)+/g;\n\nexport const useSpacing = (\n  spacingProps?: Spacing,\n  style?: CSSProperties\n): CSSProperties | undefined => {\n  if (spacingProps) {\n    return Object.entries(spacingProps).reduce<CSSProperties>((prev, [spacing, multiplier]) => {\n      const matches = String(multiplier).matchAll(spacingNumberRegex);\n      const cssSpacingValue = Array.from(matches)\n        .map(([multiplierValue]) => `${Number(multiplierValue) * defaultFactor}${defaultUnit}`)\n        .join(\" \");\n      return { ...prev, [spacing]: cssSpacingValue };\n    }, style ?? {});\n  }\n  return style;\n};\n"],"names":["spacingNumberRegex","spacingProps","style","Object","entries","reduce","prev","spacing","multiplier","matches","String","matchAll","cssSpacingValue","Array","from","map","multiplierValue","Number","join"],"mappings":"gFAuCA,MAEMA,EAAqB,mCAED,CACxBC,EACAC,IAEID,EACKE,OAAOC,QAAQH,GAAcI,QAAsB,CAACC,GAAOC,EAASC,MACzE,MAAMC,EAAUC,OAAOF,GAAYG,SAASX,GACtCY,EAAkBC,MAAMC,KAAKL,GAChCM,KAAI,EAAEC,KAZO,IAYiBC,OAAOD,GAAV,QAC3BE,KAAK,KACR,MAAO,IAAKZ,EAAMC,CAACA,GAAUK,EAAgB,GAC5CV,GAAS,CAAA,GAEPA"}

package/dist/hooks/useSpacing.es.js

@@ -0,0 +1,17 @@
+const defaultFactor = 0.25;
+const defaultUnit = "rem";
+const spacingNumberRegex = /(\d+\.?\d*)+/g;
+const useSpacing = (spacingProps, style) => {
+  if (spacingProps) {
+    return Object.entries(spacingProps).reduce((prev, [spacing, multiplier]) => {
+      const matches = String(multiplier).matchAll(spacingNumberRegex);
+      const cssSpacingValue = Array.from(matches).map(([multiplierValue]) => `${Number(multiplierValue) * defaultFactor}${defaultUnit}`).join(" ");
+      return { ...prev, [spacing]: cssSpacingValue };
+    }, style ?? {});
+  }
+  return style;
+};
+export {
+  useSpacing
+};
+//# sourceMappingURL=useSpacing.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useSpacing.es.js","sources":["../../src/hooks/useSpacing.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 { CSSProperties } from \"react\";\n\nexport type SpacingMultiplier = 0 | 0.5 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;\ntype SpacingMultiplierStringOrNumber = `${SpacingMultiplier}` | SpacingMultiplier;\ntype MultiValueSpacingMultiplier =\n  | `${SpacingMultiplier} ${SpacingMultiplier} ${SpacingMultiplier} ${SpacingMultiplier}`\n  | `${SpacingMultiplier} ${SpacingMultiplier} ${SpacingMultiplier}`\n  | `${SpacingMultiplier} ${SpacingMultiplier}`\n  | SpacingMultiplierStringOrNumber;\n\nexport interface Spacing {\n  padding?: MultiValueSpacingMultiplier;\n  paddingTop?: SpacingMultiplierStringOrNumber;\n  paddingBottom?: SpacingMultiplierStringOrNumber;\n  paddingLeft?: SpacingMultiplierStringOrNumber;\n  paddingRight?: SpacingMultiplierStringOrNumber;\n  margin?: MultiValueSpacingMultiplier;\n  marginTop?: SpacingMultiplierStringOrNumber;\n  marginBottom?: SpacingMultiplierStringOrNumber;\n  marginLeft?: SpacingMultiplierStringOrNumber;\n  marginRight?: SpacingMultiplierStringOrNumber;\n}\n\nconst defaultFactor = 0.25;\nconst defaultUnit = \"rem\";\nconst spacingNumberRegex = /(\\d+\\.?\\d*)+/g;\n\nexport const useSpacing = (\n  spacingProps?: Spacing,\n  style?: CSSProperties\n): CSSProperties | undefined => {\n  if (spacingProps) {\n    return Object.entries(spacingProps).reduce<CSSProperties>((prev, [spacing, multiplier]) => {\n      const matches = String(multiplier).matchAll(spacingNumberRegex);\n      const cssSpacingValue = Array.from(matches)\n        .map(([multiplierValue]) => `${Number(multiplierValue) * defaultFactor}${defaultUnit}`)\n        .join(\" \");\n      return { ...prev, [spacing]: cssSpacingValue };\n    }, style ?? {});\n  }\n  return style;\n};\n"],"names":[],"mappings":"AAuCA,MAAM,gBAAgB;AACtB,MAAM,cAAc;AACpB,MAAM,qBAAqB;AAEd,MAAA,aAAa,CACxB,cACA,UAC8B;AAC9B,MAAI,cAAc;AACT,WAAA,OAAO,QAAQ,YAAY,EAAE,OAAsB,CAAC,MAAM,CAAC,SAAS,UAAU,MAAM;AACzF,YAAM,UAAU,OAAO,UAAU,EAAE,SAAS,kBAAkB;AACxD,YAAA,kBAAkB,MAAM,KAAK,OAAO,EACvC,IAAI,CAAC,CAAC,eAAe,MAAM,GAAG,OAAO,eAAe,IAAI,aAAa,GAAG,WAAW,EAAE,EACrF,KAAK,GAAG;AACX,aAAO,EAAE,GAAG,MAAM,CAAC,OAAO,GAAG,gBAAgB;AAAA,IAAA,GAC5C,SAAS,CAAA,CAAE;AAAA,EAAA;AAET,SAAA;AACT;"}

package/dist/hooks/useUploadFile.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.useUploadFile=(r,s,n)=>{const{url:o,headers:a,withCredentials:l}=s,{onComplete:i,onProgress:u,onErrorMessageMapper:d}=n??{},[p,c]=e.useState([]),[S,f]=e.useState([...r]),m=(e,t,s,n)=>r.map((r=>(r.name===e&&(r.progress=s,r.error=n,r.status=t),{...r}))),g=e=>{const r=new XMLHttpRequest;r.upload.addEventListener("progress",(t=>((e,t)=>{const r=e.loaded/e.total*100,s=m(t,"uploading",r);f(s),null==u||u(t,r)})(t,e.name))),r.addEventListener("readystatechange",(()=>((e,r)=>{const{status:s,readyState:n,responseText:o}=e;if(n===e.DONE){const e=o&&t.isJsonString(o)&&JSON.parse(o),{fileStatus:n,error:a}=((e,t)=>{let r,s="";return e>=200&&e<400?r="completed":0===e?(r="retry",s=(null==d?void 0:d({responseStatus:e,responseJson:t}))??"Network error. Check internet connection and retry uploading the file"):e>=400&&e<500?(r="error",s=(null==d?void 0:d({responseStatus:e,responseJson:t}))??"Bad request"):e>=500&&(r="error",s=(null==d?void 0:d({responseStatus:e,responseJson:t}))??"Server Error"),{fileStatus:r,error:s}})(s,e),l=m(r,n,void 0,a);f(l);const u={fileList:l,status:s,responseJson:e};c((e=>e.filter((e=>e.name!==r)))),null==i||i(u)}})(r,e.name))),l&&(r.withCredentials=!0),r.open("POST",o,!0),null==a||a.forEach(((e,t)=>r.setRequestHeader(t,e)));const s=new FormData;s.append("file",e.data),s.append("name",e.name),r.send(s)};return e.useEffect((()=>{o&&r.length&&r.forEach((e=>{e.status||p.find((t=>t.name===e.name))||(c((t=>[...t,e])),g(e))}))}),[o,r]),{updatedFiles:S,setUpdatedFiles:f,uploadingFiles:p}};
+//# sourceMappingURL=useUploadFile.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useUploadFile.cjs.js","sources":["../../src/hooks/useUploadFile.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 { FileType } from \"../components/Form/FileUpload/FileUpload\";\nimport { useEffect, useState } from \"react\";\nimport { isJsonString } from \"../util/helper\";\n\nexport type UploadResponseStatus = XMLHttpRequest[\"status\"];\nexport type UploadResponseJson = Record<string, unknown>;\nexport interface UploadResponseType {\n  fileList: FileType[];\n  status: UploadResponseStatus;\n  responseJson: UploadResponseJson;\n}\nexport interface OnErrorMessageMapperType {\n  responseStatus: UploadResponseStatus;\n  responseJson: UploadResponseJson;\n}\nexport interface UseUploadFileCallback {\n  onComplete?: (response: UploadResponseType) => void;\n  onProgress?: (fileName: string, progress: number) => void;\n  onErrorMessageMapper?: (args: OnErrorMessageMapperType) => string | undefined;\n}\nexport interface UploadFileRequestParams {\n  url: string;\n  headers?: Headers;\n  withCredentials?: boolean;\n}\n\nexport const useUploadFile = (\n  files: FileType[],\n  request: UploadFileRequestParams,\n  callbacks?: UseUploadFileCallback\n) => {\n  const { url, headers, withCredentials } = request;\n\n  const { onComplete, onProgress, onErrorMessageMapper } = callbacks ?? {};\n\n  const [uploadingFiles, setUploadingFiles] = useState<FileType[]>([]);\n  const [updatedFiles, setUpdatedFiles] = useState<FileType[]>([...files]);\n\n  const getUpdatedList = (\n    fileName: string,\n    fileStatus: FileType[\"status\"],\n    progress?: number,\n    error?: string\n  ) => {\n    return files.map(file => {\n      if (file.name === fileName) {\n        file.progress = progress;\n        file.error = error;\n        file.status = fileStatus;\n      }\n      return { ...file };\n    });\n  };\n\n  const recordProgress = (e: ProgressEvent<XMLHttpRequestEventTarget>, fileName: string) => {\n    const progress = (e.loaded / e.total) * 100;\n    const updatedData = getUpdatedList(fileName, \"uploading\", progress);\n    setUpdatedFiles(updatedData);\n    onProgress?.(fileName, progress);\n  };\n\n  const getFileStatus = (\n    responseStatus: UploadResponseStatus,\n    responseJson: UploadResponseJson\n  ) => {\n    let fileStatus: FileType[\"status\"] = undefined;\n    let error = \"\";\n    if (responseStatus >= 200 && responseStatus < 400) {\n      fileStatus = \"completed\";\n    } else if (responseStatus === 0) {\n      fileStatus = \"retry\";\n      error =\n        onErrorMessageMapper?.({ responseStatus, responseJson }) ??\n        \"Network error. Check internet connection and retry uploading the file\";\n    } else if (responseStatus >= 400 && responseStatus < 500) {\n      fileStatus = \"error\";\n      error = onErrorMessageMapper?.({ responseStatus, responseJson }) ?? \"Bad request\";\n    } else if (responseStatus >= 500) {\n      fileStatus = \"error\";\n      error = onErrorMessageMapper?.({ responseStatus, responseJson }) ?? \"Server Error\";\n    }\n    return { fileStatus, error };\n  };\n\n  const handleOnComplete = (xhr: XMLHttpRequest, fileName: string) => {\n    const { status, readyState, responseText } = xhr;\n    if (readyState === xhr.DONE) {\n      const responseJson = responseText && isJsonString(responseText) && JSON.parse(responseText);\n      const { fileStatus, error } = getFileStatus(status, responseJson);\n      const updatedList = getUpdatedList(fileName, fileStatus, undefined, error);\n      setUpdatedFiles(updatedList);\n      const response = { fileList: updatedList, status, responseJson };\n      setUploadingFiles(prevState => prevState.filter(selected => selected.name !== fileName));\n      onComplete?.(response);\n    }\n  };\n\n  const uploadFile = (file: FileType) => {\n    const xhr = new XMLHttpRequest();\n    xhr.upload.addEventListener(\"progress\", e => recordProgress(e, file.name));\n    xhr.addEventListener(\"readystatechange\", () => handleOnComplete(xhr, file.name));\n    withCredentials && (xhr.withCredentials = true);\n    xhr.open(\"POST\", url, true);\n    headers?.forEach((value, key) => xhr.setRequestHeader(key, value));\n    const formData = new FormData();\n    formData.append(\"file\", file.data as File);\n    formData.append(\"name\", file.name);\n    xhr.send(formData);\n  };\n\n  useEffect(() => {\n    if (!url || !files.length) {\n      return;\n    }\n\n    files.forEach(file => {\n      if (!file.status && !uploadingFiles.find(selected => selected.name === file.name)) {\n        setUploadingFiles(prevState => [...prevState, file]);\n        uploadFile(file);\n      }\n    });\n  }, [url, files]);\n\n  return { updatedFiles, setUpdatedFiles, uploadingFiles };\n};\n"],"names":["files","request","callbacks","url","headers","withCredentials","onComplete","onProgress","onErrorMessageMapper","uploadingFiles","setUploadingFiles","useState","updatedFiles","setUpdatedFiles","getUpdatedList","fileName","fileStatus","progress","error","map","file","name","status","uploadFile","xhr","XMLHttpRequest","upload","addEventListener","e","loaded","total","updatedData","recordProgress","readyState","responseText","DONE","responseJson","isJsonString","JSON","parse","responseStatus","getFileStatus","updatedList","response","fileList","prevState","filter","selected","handleOnComplete","open","forEach","value","key","setRequestHeader","formData","FormData","append","data","send","useEffect","length","find"],"mappings":"kKA0C6B,CAC3BA,EACAC,EACAC,KAEA,MAAMC,IAAEA,EAAAC,QAAKA,EAASC,gBAAAA,GAAoBJ,GAEpCK,WAAEA,EAAYC,WAAAA,EAAAC,qBAAYA,GAAyBN,GAAa,CAAC,GAEhEO,EAAgBC,GAAqBC,EAAAA,SAAqB,KAC1DC,EAAcC,GAAmBF,EAAAA,SAAqB,IAAIX,IAE3Dc,EAAiB,CACrBC,EACAC,EACAC,EACAC,IAEOlB,EAAMmB,KAAYC,IACnBA,EAAKC,OAASN,IAChBK,EAAKH,SAAWA,EAChBG,EAAKF,MAAQA,EACbE,EAAKE,OAASN,GAET,IAAKI,MA+CVG,EAAcH,IACZ,MAAAI,EAAM,IAAIC,eACZD,EAAAE,OAAOC,iBAAiB,YAAYC,GA7CnB,EAACA,EAA6Cb,KACnE,MAAME,EAAYW,EAAEC,OAASD,EAAEE,MAAS,IAClCC,EAAcjB,EAAeC,EAAU,YAAaE,GAC1DJ,EAAgBkB,GAChB,MAAAxB,GAAAA,EAAaQ,EAAUE,EAAA,EAyCsBe,CAAeJ,EAAGR,EAAKC,QACpEG,EAAIG,iBAAiB,oBAAoB,IAhBlB,EAACH,EAAqBT,KAC7C,MAAMO,OAAEA,EAAAW,WAAQA,EAAYC,aAAAA,GAAiBV,EACzC,GAAAS,IAAeT,EAAIW,KAAM,CACrB,MAAAC,EAAeF,GAAgBG,EAAAA,aAAaH,IAAiBI,KAAKC,MAAML,IACxElB,WAAEA,EAAYE,MAAAA,GA3BF,EACpBsB,EACAJ,KAEA,IAAIpB,EACAE,EAAQ,GAeL,OAdHsB,GAAkB,KAAOA,EAAiB,IAC/BxB,EAAA,YACe,IAAnBwB,GACIxB,EAAA,QACbE,GACyB,MAAvBV,OAAuB,EAAAA,EAAA,CAAEgC,iBAAgBJ,mBACzC,yEACOI,GAAkB,KAAOA,EAAiB,KACtCxB,EAAA,QACbE,GAA+B,MAAvBV,OAAuB,EAAAA,EAAA,CAAEgC,iBAAgBJ,mBAAmB,eAC3DI,GAAkB,MACdxB,EAAA,QACbE,GAA+B,MAAvBV,OAAuB,EAAAA,EAAA,CAAEgC,iBAAgBJ,mBAAmB,gBAE/D,CAAEpB,aAAYE,QAAM,EAOKuB,CAAcnB,EAAQc,GAC9CM,EAAc5B,EAAeC,EAAUC,OAAY,EAAWE,GACpEL,EAAgB6B,GAChB,MAAMC,EAAW,CAAEC,SAAUF,EAAapB,SAAQc,gBAChC1B,MAAamC,EAAUC,WAAmBC,EAAS1B,OAASN,MACjE,MAAAT,GAAAA,EAAAqC,EAAQ,GAOwBK,CAAiBxB,EAAKJ,EAAKC,QAC1EhB,IAAoBmB,EAAInB,iBAAkB,GACtCmB,EAAAyB,KAAK,OAAQ9C,GAAK,GACb,MAAAC,GAAAA,EAAA8C,SAAQ,CAACC,EAAOC,IAAQ5B,EAAI6B,iBAAiBD,EAAKD,KACrD,MAAAG,EAAW,IAAIC,SACZD,EAAAE,OAAO,OAAQpC,EAAKqC,MACpBH,EAAAE,OAAO,OAAQpC,EAAKC,MAC7BG,EAAIkC,KAAKJ,EAAQ,EAgBZ,OAbPK,EAAAA,WAAU,KACHxD,GAAQH,EAAM4D,QAIb5D,EAAAkD,SAAgB9B,IACfA,EAAKE,QAAWb,EAAeoD,MAAKd,GAAYA,EAAS1B,OAASD,EAAKC,SAC1EX,GAA+BmC,GAAA,IAAIA,EAAWzB,KAC9CG,EAAWH,GAAI,GAElB,GACA,CAACjB,EAAKH,IAEF,CAAEY,eAAcC,kBAAiBJ,iBAAe"}

package/dist/hooks/useUploadFile.es.js

@@ -0,0 +1,81 @@
+import { useState, useEffect } from "react";
+import { isJsonString } from "../util/helper.es.js";
+const useUploadFile = (files, request, callbacks) => {
+  const { url, headers, withCredentials } = request;
+  const { onComplete, onProgress, onErrorMessageMapper } = callbacks ?? {};
+  const [uploadingFiles, setUploadingFiles] = useState([]);
+  const [updatedFiles, setUpdatedFiles] = useState([...files]);
+  const getUpdatedList = (fileName, fileStatus, progress, error) => {
+    return files.map((file) => {
+      if (file.name === fileName) {
+        file.progress = progress;
+        file.error = error;
+        file.status = fileStatus;
+      }
+      return { ...file };
+    });
+  };
+  const recordProgress = (e, fileName) => {
+    const progress = e.loaded / e.total * 100;
+    const updatedData = getUpdatedList(fileName, "uploading", progress);
+    setUpdatedFiles(updatedData);
+    onProgress == null ? void 0 : onProgress(fileName, progress);
+  };
+  const getFileStatus = (responseStatus, responseJson) => {
+    let fileStatus = void 0;
+    let error = "";
+    if (responseStatus >= 200 && responseStatus < 400) {
+      fileStatus = "completed";
+    } else if (responseStatus === 0) {
+      fileStatus = "retry";
+      error = (onErrorMessageMapper == null ? void 0 : onErrorMessageMapper({ responseStatus, responseJson })) ?? "Network error. Check internet connection and retry uploading the file";
+    } else if (responseStatus >= 400 && responseStatus < 500) {
+      fileStatus = "error";
+      error = (onErrorMessageMapper == null ? void 0 : onErrorMessageMapper({ responseStatus, responseJson })) ?? "Bad request";
+    } else if (responseStatus >= 500) {
+      fileStatus = "error";
+      error = (onErrorMessageMapper == null ? void 0 : onErrorMessageMapper({ responseStatus, responseJson })) ?? "Server Error";
+    }
+    return { fileStatus, error };
+  };
+  const handleOnComplete = (xhr, fileName) => {
+    const { status, readyState, responseText } = xhr;
+    if (readyState === xhr.DONE) {
+      const responseJson = responseText && isJsonString(responseText) && JSON.parse(responseText);
+      const { fileStatus, error } = getFileStatus(status, responseJson);
+      const updatedList = getUpdatedList(fileName, fileStatus, void 0, error);
+      setUpdatedFiles(updatedList);
+      const response = { fileList: updatedList, status, responseJson };
+      setUploadingFiles((prevState) => prevState.filter((selected) => selected.name !== fileName));
+      onComplete == null ? void 0 : onComplete(response);
+    }
+  };
+  const uploadFile = (file) => {
+    const xhr = new XMLHttpRequest();
+    xhr.upload.addEventListener("progress", (e) => recordProgress(e, file.name));
+    xhr.addEventListener("readystatechange", () => handleOnComplete(xhr, file.name));
+    withCredentials && (xhr.withCredentials = true);
+    xhr.open("POST", url, true);
+    headers == null ? void 0 : headers.forEach((value, key) => xhr.setRequestHeader(key, value));
+    const formData = new FormData();
+    formData.append("file", file.data);
+    formData.append("name", file.name);
+    xhr.send(formData);
+  };
+  useEffect(() => {
+    if (!url || !files.length) {
+      return;
+    }
+    files.forEach((file) => {
+      if (!file.status && !uploadingFiles.find((selected) => selected.name === file.name)) {
+        setUploadingFiles((prevState) => [...prevState, file]);
+        uploadFile(file);
+      }
+    });
+  }, [url, files]);
+  return { updatedFiles, setUpdatedFiles, uploadingFiles };
+};
+export {
+  useUploadFile
+};
+//# sourceMappingURL=useUploadFile.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useUploadFile.es.js","sources":["../../src/hooks/useUploadFile.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 { FileType } from \"../components/Form/FileUpload/FileUpload\";\nimport { useEffect, useState } from \"react\";\nimport { isJsonString } from \"../util/helper\";\n\nexport type UploadResponseStatus = XMLHttpRequest[\"status\"];\nexport type UploadResponseJson = Record<string, unknown>;\nexport interface UploadResponseType {\n  fileList: FileType[];\n  status: UploadResponseStatus;\n  responseJson: UploadResponseJson;\n}\nexport interface OnErrorMessageMapperType {\n  responseStatus: UploadResponseStatus;\n  responseJson: UploadResponseJson;\n}\nexport interface UseUploadFileCallback {\n  onComplete?: (response: UploadResponseType) => void;\n  onProgress?: (fileName: string, progress: number) => void;\n  onErrorMessageMapper?: (args: OnErrorMessageMapperType) => string | undefined;\n}\nexport interface UploadFileRequestParams {\n  url: string;\n  headers?: Headers;\n  withCredentials?: boolean;\n}\n\nexport const useUploadFile = (\n  files: FileType[],\n  request: UploadFileRequestParams,\n  callbacks?: UseUploadFileCallback\n) => {\n  const { url, headers, withCredentials } = request;\n\n  const { onComplete, onProgress, onErrorMessageMapper } = callbacks ?? {};\n\n  const [uploadingFiles, setUploadingFiles] = useState<FileType[]>([]);\n  const [updatedFiles, setUpdatedFiles] = useState<FileType[]>([...files]);\n\n  const getUpdatedList = (\n    fileName: string,\n    fileStatus: FileType[\"status\"],\n    progress?: number,\n    error?: string\n  ) => {\n    return files.map(file => {\n      if (file.name === fileName) {\n        file.progress = progress;\n        file.error = error;\n        file.status = fileStatus;\n      }\n      return { ...file };\n    });\n  };\n\n  const recordProgress = (e: ProgressEvent<XMLHttpRequestEventTarget>, fileName: string) => {\n    const progress = (e.loaded / e.total) * 100;\n    const updatedData = getUpdatedList(fileName, \"uploading\", progress);\n    setUpdatedFiles(updatedData);\n    onProgress?.(fileName, progress);\n  };\n\n  const getFileStatus = (\n    responseStatus: UploadResponseStatus,\n    responseJson: UploadResponseJson\n  ) => {\n    let fileStatus: FileType[\"status\"] = undefined;\n    let error = \"\";\n    if (responseStatus >= 200 && responseStatus < 400) {\n      fileStatus = \"completed\";\n    } else if (responseStatus === 0) {\n      fileStatus = \"retry\";\n      error =\n        onErrorMessageMapper?.({ responseStatus, responseJson }) ??\n        \"Network error. Check internet connection and retry uploading the file\";\n    } else if (responseStatus >= 400 && responseStatus < 500) {\n      fileStatus = \"error\";\n      error = onErrorMessageMapper?.({ responseStatus, responseJson }) ?? \"Bad request\";\n    } else if (responseStatus >= 500) {\n      fileStatus = \"error\";\n      error = onErrorMessageMapper?.({ responseStatus, responseJson }) ?? \"Server Error\";\n    }\n    return { fileStatus, error };\n  };\n\n  const handleOnComplete = (xhr: XMLHttpRequest, fileName: string) => {\n    const { status, readyState, responseText } = xhr;\n    if (readyState === xhr.DONE) {\n      const responseJson = responseText && isJsonString(responseText) && JSON.parse(responseText);\n      const { fileStatus, error } = getFileStatus(status, responseJson);\n      const updatedList = getUpdatedList(fileName, fileStatus, undefined, error);\n      setUpdatedFiles(updatedList);\n      const response = { fileList: updatedList, status, responseJson };\n      setUploadingFiles(prevState => prevState.filter(selected => selected.name !== fileName));\n      onComplete?.(response);\n    }\n  };\n\n  const uploadFile = (file: FileType) => {\n    const xhr = new XMLHttpRequest();\n    xhr.upload.addEventListener(\"progress\", e => recordProgress(e, file.name));\n    xhr.addEventListener(\"readystatechange\", () => handleOnComplete(xhr, file.name));\n    withCredentials && (xhr.withCredentials = true);\n    xhr.open(\"POST\", url, true);\n    headers?.forEach((value, key) => xhr.setRequestHeader(key, value));\n    const formData = new FormData();\n    formData.append(\"file\", file.data as File);\n    formData.append(\"name\", file.name);\n    xhr.send(formData);\n  };\n\n  useEffect(() => {\n    if (!url || !files.length) {\n      return;\n    }\n\n    files.forEach(file => {\n      if (!file.status && !uploadingFiles.find(selected => selected.name === file.name)) {\n        setUploadingFiles(prevState => [...prevState, file]);\n        uploadFile(file);\n      }\n    });\n  }, [url, files]);\n\n  return { updatedFiles, setUpdatedFiles, uploadingFiles };\n};\n"],"names":[],"mappings":"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"}