@availity/block-ui/dist/index.mjs

Block UI for react

var __defProp = Object.defineProperty;
var __defProps = Object.defineProperties;
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __spreadValues = (a, b) => {
  for (var prop in b || (b = {}))
    if (__hasOwnProp.call(b, prop))
      __defNormalProp(a, prop, b[prop]);
  if (__getOwnPropSymbols)
    for (var prop of __getOwnPropSymbols(b)) {
      if (__propIsEnum.call(b, prop))
        __defNormalProp(a, prop, b[prop]);
    }
  return a;
};
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
var __objRest = (source, exclude) => {
  var target = {};
  for (var prop in source)
    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
      target[prop] = source[prop];
  if (source != null && __getOwnPropSymbols)
    for (var prop of __getOwnPropSymbols(source)) {
      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
        target[prop] = source[prop];
    }
  return target;
};

// src/BlockUi.tsx
import { useCallback, useEffect, useRef, useState, isValidElement } from "react";

// src/Loader.tsx
import { jsx, jsxs } from "react/jsx-runtime";
function Bullet() {
  return /* @__PURE__ */ jsx("span", { className: "loading-bullet", children: "\u2022" });
}
function Loader() {
  return /* @__PURE__ */ jsxs("div", { className: "loading-indicator", children: [
    /* @__PURE__ */ jsx(Bullet, {}),
    /* @__PURE__ */ jsx(Bullet, {}),
    /* @__PURE__ */ jsx(Bullet, {})
  ] });
}
var Loader_default = Loader;

// src/BlockUi.tsx
import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
function BlockUi(_a) {
  var _b = _a, {
    blocking,
    children,
    className = "",
    keepInView,
    loader = /* @__PURE__ */ jsx2(Loader_default, {}),
    message,
    renderChildren = true,
    tag: Tag = "div"
  } = _b, rest = __objRest(_b, [
    "blocking",
    "children",
    "className",
    "keepInView",
    "loader",
    "message",
    "renderChildren",
    "tag"
  ]);
  const [top, setTop] = useState("50%");
  const blockerRef = useRef(null);
  const topFocusRef = useRef(null);
  const containerRef = useRef(null);
  const messageContainerRef = useRef(null);
  const handleKeepInView = useCallback(() => {
    if (blocking && keepInView && containerRef.current) {
      const containerBounds = containerRef.current.getBoundingClientRect();
      const windowHeight = window.innerHeight;
      if (containerBounds.top > windowHeight || containerBounds.bottom < 0) return;
      if (containerBounds.top >= 0 && containerBounds.bottom <= windowHeight) {
        if (top !== "50%") {
          setTop("50%");
        }
        return;
      }
      const messageBoundsHeight = messageContainerRef.current ? messageContainerRef.current.getBoundingClientRect().height : 0;
      let newTop = Math.max(
        Math.min(windowHeight, containerBounds.bottom) - Math.max(containerBounds.top, 0),
        messageBoundsHeight
      ) / 2;
      if (containerBounds.top < 0) {
        newTop = Math.min(newTop - containerBounds.top, containerBounds.height - messageBoundsHeight / 2);
      }
      if (top !== newTop) {
        setTop(newTop);
      }
    }
  }, [blocking, keepInView, top]);
  useEffect(() => {
    window.addEventListener("scroll", handleKeepInView);
    return () => {
      window.removeEventListener("scroll", handleKeepInView);
    };
  }, [handleKeepInView]);
  const blockingTab = (event, withShift = false) => {
    const { key, shiftKey } = event;
    return blocking && key === "Tab" && shiftKey === withShift;
  };
  const tabbedUpTop = (event) => {
    if (blockerRef.current && blockingTab(event)) {
      blockerRef.current.focus();
    }
  };
  const tabbedDownTop = (event) => {
    if (blockerRef.current && blockingTab(event)) {
      event.preventDefault();
      blockerRef.current.focus();
    }
  };
  const tabbedUpBottom = (event) => {
    if (topFocusRef.current && blockingTab(event, true)) {
      topFocusRef.current.focus();
    }
  };
  const tabbedDownBottom = (event) => {
    if (topFocusRef.current && blockingTab(event, true)) {
      event.preventDefault();
      topFocusRef.current.focus();
    }
  };
  const shouldRenderChildren = !blocking || renderChildren;
  return /* @__PURE__ */ jsxs2(Tag, __spreadProps(__spreadValues({ className: blocking ? `block-ui ${className}` : className, "aria-busy": blocking }, rest), { children: [
    blocking ? /* @__PURE__ */ jsx2("div", { tabIndex: 0, onKeyUp: tabbedUpTop, onKeyDown: tabbedDownTop, ref: topFocusRef, className: "sr-only", children: message || "loading" }) : null,
    shouldRenderChildren ? children : null,
    blocking ? /* @__PURE__ */ jsxs2(
      "div",
      {
        className: "block-ui-container",
        tabIndex: 0,
        ref: blockerRef,
        onKeyUp: tabbedUpBottom,
        onKeyDown: tabbedDownBottom,
        children: [
          /* @__PURE__ */ jsx2("div", { className: "block-ui-overlay", ref: containerRef }),
          /* @__PURE__ */ jsx2(
            "div",
            {
              className: "block-ui-message-container",
              ref: messageContainerRef,
              style: { top: keepInView ? top : void 0 },
              children: /* @__PURE__ */ jsxs2("div", { className: "block-ui-message", children: [
                message || /* @__PURE__ */ jsx2("div", { className: "sr-only", children: "loading" }),
                isValidElement(loader) ? /* @__PURE__ */ jsx2("div", { "aria-hidden": true, children: loader }) : null
              ] })
            }
          )
        ]
      }
    ) : null
  ] }));
}
var BlockUi_default = BlockUi;
export {
  BlockUi_default as default
};