@aegov/design-system-react/dist/components/Dropdown/Dropdown.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.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _reactDropdownMenu = require("@radix-ui/react-dropdown-menu");
var _react2 = require("@phosphor-icons/react");
var _tailwindMerge = require("tailwind-merge");
var _zod = require("zod");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
const DropdownItemSchema = _zod.z.object({
  label: _zod.z.string(),
  value: _zod.z.string(),
  icon: _zod.z.any().optional()
});
const DropdownGroupSchema = _zod.z.object({
  label: _zod.z.string().optional(),
  items: _zod.z.array(DropdownItemSchema)
});
const DropdownSchema = _zod.z.object({
  groups: _zod.z.array(DropdownGroupSchema),
  className: _zod.z.string().optional(),
  align: _zod.z.enum(['start', 'center', 'end']).optional(),
  side: _zod.z.enum(['top', 'right', 'bottom', 'left']).optional(),
  onSelect: _zod.z.function().optional()
});
const DropdownItem = /*#__PURE__*/_react.default.forwardRef(({
  label,
  value,
  icon: Icon,
  onSelect
}, ref) => /*#__PURE__*/_react.default.createElement(_reactDropdownMenu.Item, {
  ref: ref,
  value: value,
  className: `
      relative flex items-center gap-3 px-3 py-2 text-sm text-gray-700 outline-none transition-colors 
      hover:bg-gray-50 hover:text-gray-900 focus:bg-gray-50 focus:text-gray-900 
      disabled:pointer-events-none disabled:opacity-50
    `,
  onSelect: onSelect
}, Icon && /*#__PURE__*/_react.default.createElement(Icon, {
  className: "h-4 w-4",
  weight: "regular"
}), label, /*#__PURE__*/_react.default.createElement(_reactDropdownMenu.ItemIndicator, {
  className: "absolute right-2 flex h-4 w-4 items-center justify-center"
}, /*#__PURE__*/_react.default.createElement(_react2.Check, {
  className: "h-4 w-4 text-primary-600",
  weight: "bold"
}))));
DropdownItem.displayName = 'DropdownItem';
const Dropdown = /*#__PURE__*/_react.default.forwardRef(({
  children,
  groups,
  className,
  align = 'start',
  side = 'bottom',
  onSelect,
  ...rest
}, ref) => {
  DropdownSchema.parse({
    groups,
    className,
    align,
    side,
    onSelect
  });
  return /*#__PURE__*/_react.default.createElement(_reactDropdownMenu.Root, null, /*#__PURE__*/_react.default.createElement(_reactDropdownMenu.Trigger, {
    asChild: true
  }, /*#__PURE__*/_react.default.createElement("div", null, children)), /*#__PURE__*/_react.default.createElement(_reactDropdownMenu.Portal, null, /*#__PURE__*/_react.default.createElement(_reactDropdownMenu.Content, _extends({
    ref: ref,
    align: align,
    side: side,
    className: (0, _tailwindMerge.twMerge)('z-50 min-w-[300px] overflow-hidden rounded-lg bg-white border border-gray-200 p-1 shadow-xl animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 max-h-60 overflow-y-auto', className)
  }, rest), groups.map((group, groupIndex) => /*#__PURE__*/_react.default.createElement(_reactDropdownMenu.Group, {
    key: groupIndex
  }, group.label && /*#__PURE__*/_react.default.createElement(_reactDropdownMenu.Label, {
    className: "px-3 py-2 text-xs font-medium text-gray-500 rtl:text-right"
  }, group.label), group.items.map((item, itemIndex) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
    key: item.value
  }, /*#__PURE__*/_react.default.createElement(DropdownItem, _extends({}, item, {
    onSelect: () => onSelect?.(item.value)
  })), itemIndex < group.items.length - 1 && /*#__PURE__*/_react.default.createElement(_reactDropdownMenu.Separator, {
    className: "my-1 h-px bg-gray-100"
  }))), groupIndex < groups.length - 1 && /*#__PURE__*/_react.default.createElement(_reactDropdownMenu.Separator, {
    className: "my-1 h-px bg-gray-100"
  }))))));
});
Dropdown.displayName = 'Dropdown';
var _default = exports.default = Dropdown;