@crossed/ui/lib/commonjs/overlay/Modal/Content.js

A universal & performant styling library for React Native, Next.js & React

var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var Content_exports = {};
__export(Content_exports, {
  ModalContent: () => ModalContent,
  modalStyles: () => modalStyles,
  useKeyDown: () => useKeyDown
});
module.exports = __toCommonJS(Content_exports);
var import_jsx_runtime = require("react/jsx-runtime");
var import_react = require("react");
var import_styled = require("@crossed/styled");
var import_styled2 = require("@crossed/styled");
var import_context = require("./context");
var import_Sheet = require("../Sheet/index");
var import_react_native_reanimated = require("react-native-reanimated");
var import_Floating = require("../Floating");
var import_Focus = require("./Focus");
var import_styles = require("../../styles");
const modalStyles = (0, import_styled2.createStyles)(({ colors, space }) => ({
  content: {
    base: {
      zIndex: 1e5,
      borderRadius: 16,
      backgroundColor: colors.background.secondary,
      paddingVertical: space.xl,
      margin: "auto"
    }
  }
}));
const styles = (0, import_styled2.createStyles)(() => ({
  default: {
    base: { maxHeight: "95%" }
  },
  sm: {
    base: { width: "90%", maxHeight: "90%" },
    media: { md: { maxWidth: 560, height: "auto" } }
  },
  md: {
    base: { width: "90%", maxHeight: "90%" },
    media: { md: { maxWidth: 760, height: "auto" } }
  },
  lg: {
    base: { width: "90%", maxHeight: "90%" },
    media: { md: { maxWidth: 1024, height: "auto" } }
  }
}));
const useKeyDown = (keyEvent, { enable }) => {
  const onKeyDown = (0, import_react.useCallback)(
    (e) => {
      var _a;
      (_a = keyEvent[e.key]) == null ? void 0 : _a.call(keyEvent);
    },
    [keyEvent]
  );
  (0, import_react.useEffect)(() => {
    if (enable && import_styled.isWeb) {
      document.addEventListener("keydown", onKeyDown);
      return () => {
        document.removeEventListener("keydown", onKeyDown);
      };
    }
    return () => {
    };
  }, [onKeyDown, enable]);
};
const SheetComponent = ({
  children,
  style
}) => {
  const { open, onClose } = (0, import_Floating.useFloatingContext)();
  const { showSheet, closable } = (0, import_react.useContext)(import_context.localContext);
  const refSheet = (0, import_react.useRef)(null);
  (0, import_react.useEffect)(() => {
    var _a, _b;
    if (showSheet) {
      if (open) {
        (_a = refSheet.current) == null ? void 0 : _a.show();
      } else {
        (_b = refSheet.current) == null ? void 0 : _b.hide();
      }
    }
  }, [open, showSheet]);
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Sheet.Sheet, { ref: refSheet, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
    import_Sheet.Sheet.Content,
    {
      onClose,
      containerStyle: style,
      closable: typeof closable === "boolean" ? closable : void 0,
      closeOnTouchBackdrop: typeof closable === "boolean" ? void 0 : closable.closeOnTouchBackdrop,
      children
    }
  ) });
};
const ModalContent = (0, import_react.memo)(({ children, style }) => {
  const localContextInstance = (0, import_react.useContext)(import_context.localContext);
  const { open, onClose } = (0, import_Floating.useFloatingContext)();
  const { size, idRef, showSheet } = localContextInstance;
  const PortalComp = (0, import_react.useMemo)(
    () => showSheet ? import_Sheet.Sheet : import_Floating.Floating.Portal,
    [showSheet]
  );
  useKeyDown({ Escape: onClose }, { enable: open });
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PortalComp, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_context.localContext.Provider, { value: localContextInstance, children: showSheet ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SheetComponent, { style, children }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
    import_Focus.Focus,
    {
      onEscapeKey: onClose,
      onClickOutside: onClose,
      enabled: open,
      style: (0, import_styled.composeStyles)(
        open && import_styles.positionStyles.absoluteFill,
        open && (0, import_styled.inlineStyle)(() => ({ base: { display: "flex" } })),
        open && import_styles.justifyContentStyle.center,
        open && import_styles.alignItemsStyle.center
      ),
      children: [
        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Floating.Floating.Overlay, {}),
        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
          import_Floating.Floating.Content,
          {
            role: "dialog",
            "aria-labelledby": `${idRef}-title`,
            "aria-describedby": `${idRef}-description`,
            "aria-hidden": !open,
            entering: import_react_native_reanimated.FadeIn,
            exiting: import_react_native_reanimated.FadeOut,
            style: (0, import_styled.composeStyles)(
              modalStyles.content,
              styles.default,
              styles[size],
              style
            ),
            children
          }
        )
      ]
    }
  ) }) }) });
});
ModalContent.displayName = "Modal.Content";
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  ModalContent,
  modalStyles,
  useKeyDown
});
//# sourceMappingURL=Content.js.map