@wix/design-system/dist/cjs/Drawer/Drawer.js

@wix/design-system

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _react = _interopRequireWildcard(require("react"));
var _vaul = require("vaul");
var _DrawerSt = require("./Drawer.st.css.js");
var _propTypes = _interopRequireDefault(require("prop-types"));
var _Drawer = require("./Drawer.constants");
var _ZIndex = require("../common/ZIndex");
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/Drawer/Drawer.tsx";
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
var Drawer = _ref => {
  var _snapPoints$;
  var {
    open,
    backdrop = true,
    renderBackdrop = true,
    resizable = true,
    margin = true,
    onClose,
    role = 'dialog',
    ariaLabelledBy,
    children,
    snapPoints,
    dismissible = true,
    dataHook,
    zIndex = _ZIndex.ZIndex.popover,
    scrollable = true,
    repositionInputs = true
  } = _ref;
  var [snap, setSnap] = (0, _react.useState)((_snapPoints$ = snapPoints == null ? void 0 : snapPoints[0]) !== null && _snapPoints$ !== void 0 ? _snapPoints$ : null);
  var snapProps = snapPoints != null && snapPoints.length ? {
    snapPoints,
    activeSnapPoint: snap,
    setActiveSnapPoint: setSnap,
    fadeFromIndex: 0
  } : {};
  return /*#__PURE__*/_react.default.createElement("div", {
    "data-hook": dataHook,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 40,
      columnNumber: 5
    }
  }, /*#__PURE__*/_react.default.createElement(_vaul.Drawer.Root, (0, _extends2.default)({
    open: open,
    onOpenChange: onClose,
    container: typeof window !== 'undefined' ? window.document.body : null,
    handleOnly: true,
    repositionInputs: repositionInputs
  }, snapProps, {
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 41,
      columnNumber: 7
    }
  }), /*#__PURE__*/_react.default.createElement(_vaul.Drawer.Portal, {
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 49,
      columnNumber: 9
    }
  }, renderBackdrop && /*#__PURE__*/_react.default.createElement(_vaul.Drawer.Overlay, {
    "data-hook": _Drawer.DATA_HOOKS.OVERLAY,
    className: (0, _DrawerSt.st)(_DrawerSt.classes.overlay, {
      backdrop
    }),
    style: {
      zIndex
    },
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 51,
      columnNumber: 13
    }
  }), /*#__PURE__*/_react.default.createElement(_vaul.Drawer.Content, {
    "data-hook": _Drawer.DATA_HOOKS.CONTENT,
    "aria-modal": "true",
    "aria-labelledby": ariaLabelledBy,
    role: role,
    className: (0, _DrawerSt.st)(_DrawerSt.classes.content, {
      margin
    }),
    onInteractOutside: dismissible ? undefined : e => e.preventDefault(),
    style: {
      zIndex
    },
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 59,
      columnNumber: 11
    }
  }, /*#__PURE__*/_react.default.createElement(_vaul.Drawer.Title, {
    className: _DrawerSt.classes.title,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 71,
      columnNumber: 13
    }
  }), resizable && /*#__PURE__*/_react.default.createElement(_vaul.Drawer.Handle, {
    className: _DrawerSt.classes.handle,
    "data-hook": _Drawer.DATA_HOOKS.HANDLE,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 73,
      columnNumber: 15
    }
  }), scrollable ? /*#__PURE__*/_react.default.createElement("div", {
    className: (0, _DrawerSt.st)(_DrawerSt.classes.contentWrapper, {
      margin
    }),
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 79,
      columnNumber: 15
    }
  }, children) : children))));
};
Drawer.displayName = 'Drawer';
Drawer.propTypes = {
  dataHook: _propTypes.default.string,
  open: _propTypes.default.bool.isRequired,
  onClose: _propTypes.default.func.isRequired,
  backdrop: _propTypes.default.bool,
  renderBackdrop: _propTypes.default.bool,
  resizable: _propTypes.default.bool,
  margin: _propTypes.default.bool,
  role: _propTypes.default.string,
  ariaLabelledBy: _propTypes.default.string,
  children: _propTypes.default.node.isRequired,
  snapPoints: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])),
  dismissible: _propTypes.default.bool,
  scrollable: _propTypes.default.bool,
  repositionInputs: _propTypes.default.bool
};
var _default = exports.default = Drawer;
//# sourceMappingURL=Drawer.js.map