@aegov/design-system-react/dist/components/Select/Select.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 = _interopRequireWildcard(require("react"));
var _reactSelect = require("@radix-ui/react-select");
var _reactLabel = require("@radix-ui/react-label");
var _react2 = require("@phosphor-icons/react");
var _utils = require("../../utils");
var _zod = require("zod");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
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 selectSchema = _zod.z.object({
  value: _zod.z.string().optional(),
  onChange: _zod.z.function().optional(),
  options: _zod.z.array(_zod.z.object({
    value: _zod.z.string(),
    label: _zod.z.string(),
    disabled: _zod.z.boolean().optional()
  })),
  label: _zod.z.string().optional(),
  error: _zod.z.string().optional(),
  helperText: _zod.z.string().optional(),
  placeholder: _zod.z.string().optional(),
  disabled: _zod.z.boolean().optional(),
  required: _zod.z.boolean().optional(),
  size: _zod.z.enum(['sm', 'base', 'lg']).optional(),
  variant: _zod.z.enum(['primary', 'secondary']).optional(),
  id: _zod.z.string().optional()
});
const Select = /*#__PURE__*/(0, _react.forwardRef)(({
  value,
  onChange,
  options = [],
  label,
  error,
  helperText,
  placeholder = 'Select an option',
  disabled,
  required,
  size = 'base',
  variant = 'primary',
  id,
  className,
  ...props
}, ref) => {
  // Validate props with Zod
  try {
    selectSchema.parse({
      value,
      onChange,
      options,
      label,
      error,
      helperText,
      placeholder,
      disabled,
      required,
      size,
      variant,
      id
    });
  } catch (error) {
    console.error('Select component validation error:', error);
  }
  const sizeClasses = {
    sm: 'h-10 text-sm py-2.5',
    base: 'h-12 text-base py-3',
    lg: 'h-14 text-lg py-4'
  };
  const labelSizeClasses = {
    sm: 'text-sm',
    base: 'text-sm',
    lg: 'text-base'
  };
  const variantClasses = {
    primary: 'focus-within:ring-primary-400 ring-primary-400',
    secondary: 'focus-within:ring-secondary-600 ring-secondary-400',
    error: 'focus-within:ring-red-600 ring-red-400 bg-red-50'
  };
  const triggerClasses = (0, _utils.cn)('relative flex rtl:flex-row-reverse rtl:text-right w-full items-center justify-between rounded-lg shadow-sm ring-2 ring-inset focus:ring-2 focus:ring-inset bg-whitely-50', 'px-4 text-left outline-none', 'data-[placeholder]:text-gray-400', variantClasses[error ? 'error' : variant], sizeClasses[size], disabled && 'opacity-40 cursor-not-allowed', className);
  const contentClasses = (0, _utils.cn)('overflow-hidden rounded-lg bg-white shadow-lg', 'border border-gray-200', 'z-50', 'w-[var(--radix-select-trigger-width)]');
  const viewportClasses = (0, _utils.cn)('max-h-[300px] overflow-auto');
  const itemClasses = (0, _utils.cn)('relative flex rtl:flex-row-reverse rtl:text-right items-center px-4 py-2 text-gray-900', 'data-[highlighted]:bg-primary-50 data-[highlighted]:text-primary-900', 'data-[disabled]:text-gray-300 data-[disabled]:pointer-events-none', 'outline-none cursor-pointer');
  const scrollButtonClasses = (0, _utils.cn)('flex items-center justify-center h-6 bg-white text-gray-700', 'cursor-default');
  return /*#__PURE__*/_react.default.createElement("div", {
    className: "w-full"
  }, label && /*#__PURE__*/_react.default.createElement(_reactLabel.Root, {
    htmlFor: id,
    className: (0, _utils.cn)('mb-1 block font-medium text-gray-900', labelSizeClasses[size], error && 'text-red-600', required && 'after:ml-0.5 after:text-red-500 after:content-["*"]')
  }, label), /*#__PURE__*/_react.default.createElement(_reactSelect.Root, _extends({
    value: value,
    onValueChange: onChange,
    disabled: disabled
  }, props), /*#__PURE__*/_react.default.createElement(_reactSelect.Trigger, {
    className: triggerClasses,
    "aria-label": label || placeholder
  }, /*#__PURE__*/_react.default.createElement(_reactSelect.Value, {
    placeholder: placeholder
  }), /*#__PURE__*/_react.default.createElement(_reactSelect.Icon, {
    asChild: true
  }, /*#__PURE__*/_react.default.createElement(_react2.CaretDown, {
    className: "h-5 w-5 text-aegold-700 font-bold"
  }))), /*#__PURE__*/_react.default.createElement(_reactSelect.Portal, null, /*#__PURE__*/_react.default.createElement(_reactSelect.Content, {
    className: contentClasses,
    position: "popper",
    sideOffset: 5
  }, /*#__PURE__*/_react.default.createElement(_reactSelect.ScrollUpButton, {
    className: scrollButtonClasses
  }, /*#__PURE__*/_react.default.createElement(_react2.CaretUp, {
    className: "h-4 w-4 font-bold"
  })), /*#__PURE__*/_react.default.createElement(_reactSelect.Viewport, {
    className: viewportClasses
  }, options.map(option => /*#__PURE__*/_react.default.createElement(_reactSelect.Item, {
    key: option.value,
    value: option.value,
    disabled: option.disabled,
    className: (0, _utils.cn)(itemClasses, labelSizeClasses[size])
  }, /*#__PURE__*/_react.default.createElement(_reactSelect.ItemText, null, option.label), /*#__PURE__*/_react.default.createElement(_reactSelect.ItemIndicator, {
    className: "absolute right-2 rtl:left-2 rtl:right-auto flex items-center justify-center"
  }, /*#__PURE__*/_react.default.createElement(_react2.Check, {
    className: "h-4 w-4 text-primary-600"
  }))))), /*#__PURE__*/_react.default.createElement(_reactSelect.ScrollDownButton, {
    className: scrollButtonClasses
  }, /*#__PURE__*/_react.default.createElement(_react2.CaretDown, {
    className: "h-4 w-4"
  }))))), (error || helperText) && /*#__PURE__*/_react.default.createElement("p", {
    className: (0, _utils.cn)('mt-1 text-sm', error ? 'text-red-600' : 'text-gray-500')
  }, error || helperText));
});
Select.displayName = 'Select';
var _default = exports.default = Select;