@kiwicom/orbit-components/lib/Drawer/index.js

Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com's products.

"use strict";
"use client";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
exports.__esModule = true;
exports.default = void 0;
var React = _interopRequireWildcard(require("react"));
var _clsx = _interopRequireDefault(require("clsx"));
var _useFocusTrap = _interopRequireDefault(require("../hooks/useFocusTrap"));
var _useLockScrolling = _interopRequireDefault(require("../hooks/useLockScrolling"));
var _DrawerClose = _interopRequireDefault(require("./components/DrawerClose"));
var _consts = _interopRequireDefault(require("./consts"));
var _Stack = _interopRequireDefault(require("../Stack"));
var _Heading = _interopRequireDefault(require("../Heading"));
var _defaultTheme = _interopRequireDefault(require("../defaultTheme"));
var _useStateWithTimeout = _interopRequireDefault(require("../hooks/useStateWithTimeout"));
var _useClickOutside = _interopRequireDefault(require("../hooks/useClickOutside"));
const getTransitionClasses = (shown, position) => {
  if (shown) return "translate-x-0 visible";
  return position === _consts.default.RIGHT ? "ltr:lm:translate-x-[var(--lm-drawer-width)] rtl:lm:-translate-x-[var(--lm-drawer-width)] ltr:translate-x-full rtl:-translate-x-full invisible w-0" : "ltr:lm:-translate-x-[var(--lm-drawer-width)] rtl:lm:translate-x-[var(--lm-drawer-width)] ltr:-translate-x-full rtl:translate-x-full invisible w-0";
};
const Drawer = ({
  children,
  onClose,
  lockScrolling = true,
  fixedHeader,
  labelHide = "Hide",
  shown = true,
  width = "320px",
  position = _consts.default.RIGHT,
  dataTest,
  id,
  noPadding,
  suppressed,
  title,
  actions,
  ariaLabel
}) => {
  const overlayRef = React.useRef(null);
  const drawerRef = React.useRef(null);
  const [overlayShown, setOverlayShown, setOverlayShownWithTimeout] = (0, _useStateWithTimeout.default)(shown, parseFloat(_defaultTheme.default.orbit.durationNormal) * 1000);
  (0, _useFocusTrap.default)(drawerRef);
  (0, _useLockScrolling.default)(drawerRef, lockScrolling && overlayShown);
  React.useEffect(() => {
    if (overlayShown !== shown) {
      if (shown) {
        setOverlayShown(true);
      } else if (!shown) {
        setOverlayShownWithTimeout(false);
      }
    }
  }, [overlayShown, setOverlayShown, shown, setOverlayShownWithTimeout]);
  React.useEffect(() => {
    const handleKeyDown = event => {
      if (shown && event.key === "Escape" && onClose) {
        onClose();
      }
    };
    document.addEventListener("keydown", handleKeyDown);
    return () => document.removeEventListener("keydown", handleKeyDown);
  }, [onClose, shown]);
  const handleClickOutside = React.useCallback(() => {
    if (shown && onClose) onClose();
  }, [shown, onClose]);
  const vars = {
    "--lm-drawer-width": width
  };
  const varClasses = [vars["--lm-drawer-width"] != null && "lm:max-w-[var(--lm-drawer-width)]"];
  const onlyIcon = !title && !actions;
  const bordered = !!(title || actions);
  (0, _useClickOutside.default)(drawerRef, handleClickOutside);
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
    className: (0, _clsx.default)("orbit-drawer", "flex", "fixed inset-0", "size-full", "z-drawer", "duration-fast transition-[background-color,visibility] ease-in-out", overlayShown ? "visible" : "invisible", shown ? "bg-drawer-overlay-background" : "bg-transparent"),
    id: id,
    ref: overlayRef
  }), /*#__PURE__*/React.createElement("aside", {
    className: (0, _clsx.default)("box-border block", "fixed inset-y-0", "size-full", "font-base", "z-drawer", "overflow-y-auto", "overflow-x-hidden", "shadow-level3", "duration-normal transform-gpu transition-[transform,visibility,width] ease-in-out", getTransitionClasses(shown, position), suppressed ? "bg-cloud-light" : "bg-white-normal", position === _consts.default.RIGHT ? "end-0" : "start-0", ...varClasses),
    style: vars,
    ref: drawerRef,
    "aria-label": ariaLabel || title,
    "data-test": dataTest
  }, (title || actions || onClose) && /*#__PURE__*/React.createElement("div", {
    className: (0, _clsx.default)("flex", "items-center", "h-1600", "box-border", suppressed && !bordered ? "bg-cloud-light" : "bg-white-normal", fixedHeader && "z-sticky sticky top-0", onlyIcon ? "justify-end" : "justify-between", bordered && "border-cloud-normal border-x-0 border-b border-t-0 border-solid", "px-400 lm:ps-800 lm:pe-600 py-0")
  }, title && /*#__PURE__*/React.createElement(_Heading.default, {
    type: "title2"
  }, title), actions && /*#__PURE__*/React.createElement(_Stack.default, {
    spacing: "none",
    justify: "end",
    flex: true,
    shrink: true
  }, actions), onClose && /*#__PURE__*/React.createElement(_DrawerClose.default, {
    onClick: onClose,
    title: labelHide
  })), /*#__PURE__*/React.createElement("div", {
    className: (0, _clsx.default)(!onClose && noPadding && "mt-600", noPadding && "mb-600", !noPadding && (bordered ? "p-400 lm:p-800" : "px-400 pb-400 lm:px-800 lm:pb-800"))
  }, children)));
};
var _default = exports.default = Drawer;