@aegov/design-system-react/dist/components/Popover/Popover.js

A design system for the Government of the United Arab Emirates. Extending the original design system released as @aegov/design-system, this is the package specefically created for the ReactJs enviornment.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.PopoverContent = void 0;
Object.defineProperty(exports, "PopoverRoot", {
  enumerable: true,
  get: function () {
    return _reactPopover.Root;
  }
});
exports.PopoverTrigger = void 0;
var _react = _interopRequireDefault(require("react"));
var _reactPopover = require("@radix-ui/react-popover");
var _react2 = require("@phosphor-icons/react");
var _zod = require("zod");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const PopoverContentSchema = _zod.z.object({
  children: _zod.z.any(),
  className: _zod.z.string().optional(),
  sideOffset: _zod.z.number().optional().default(5),
  align: _zod.z.enum(['start', 'center', 'end']).optional().default('center'),
  side: _zod.z.enum(['top', 'right', 'bottom', 'left']).optional().default('bottom')
});
const PopoverTriggerSchema = _zod.z.object({
  children: _zod.z.any(),
  asChild: _zod.z.boolean().optional().default(false)
});
const PopoverTrigger = exports.PopoverTrigger = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
  const {
    children,
    asChild = false
  } = PopoverTriggerSchema.parse(props);
  return /*#__PURE__*/_react.default.createElement(_reactPopover.Trigger, {
    ref: ref,
    asChild: asChild,
    className: !asChild ? 'inline-flex items-center justify-center' : undefined
  }, children);
});
PopoverTrigger.displayName = 'PopoverTrigger';
const PopoverContent = exports.PopoverContent = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
  const {
    children,
    className = '',
    sideOffset = 5,
    align = 'center',
    side = 'bottom'
  } = PopoverContentSchema.parse(props);
  return /*#__PURE__*/_react.default.createElement(_reactPopover.Portal, null, /*#__PURE__*/_react.default.createElement(_reactPopover.Content, {
    ref: ref,
    sideOffset: sideOffset,
    align: align,
    side: side,
    className: `
          z-50 w-72 rounded-lg bg-white p-4 shadow-lg
          animate-in data-[side=bottom]:slide-in-from-top-2
          data-[side=top]:slide-in-from-bottom-2
          data-[side=right]:slide-in-from-left-2
          data-[side=left]:slide-in-from-right-2
          ${className}
        `
  }, children, /*#__PURE__*/_react.default.createElement(_reactPopover.Close, {
    className: "absolute right-3 rtl:left-3 rtl:right-auto top-3 inline-flex h-6 w-6 items-center justify-center rounded-full hover:bg-gray-100"
  }, /*#__PURE__*/_react.default.createElement(_react2.X, {
    className: "h-4 w-4 text-gray-500",
    weight: "bold"
  })), /*#__PURE__*/_react.default.createElement(_reactPopover.Arrow, {
    className: "fill-white"
  })));
});
PopoverContent.displayName = 'PopoverContent';