@arudovwen/react-form-builder/lib/MultiSelectInput.js

A complete form builder for react.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = MultiSelectInput;
var _react = _interopRequireWildcard(require("react"));
var _react2 = require("@headlessui/react");
var _lucideReact = require("lucide-react");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (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 (const 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); }
function MultiSelectInput({
  value = [],
  onChange,
  options
}) {
  const [selectedOptions, setSelectedOptions] = (0, _react.useState)(value);
  (0, _react.useEffect)(() => {
    if (onChange) {
      onChange(selectedOptions);
    }
  }, [selectedOptions]);

  // Filter out selected options from dropdown
  const filteredOptions = options.filter(opt => !selectedOptions.some(sel => sel.id === opt.id));

  // Remove item handler
  const removeItem = id => {
    setSelectedOptions(prev => prev.filter(item => item.id !== id));
  };
  return /*#__PURE__*/_react.default.createElement("div", {
    className: "space-y-2"
  }, /*#__PURE__*/_react.default.createElement(_react2.Listbox, {
    value: selectedOptions,
    onChange: setSelectedOptions,
    multiple: true
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "relative mt-1"
  }, /*#__PURE__*/_react.default.createElement(_react2.Listbox.Button, {
    className: "relative w-full py-2 pl-3 pr-10 text-sm text-left bg-white border border-gray-300 rounded shadow-sm cursor-default focus:outline-none"
  }, /*#__PURE__*/_react.default.createElement("span", {
    className: "block truncate"
  }, selectedOptions.length > 0 ? selectedOptions.map(opt => opt?.label).join(', ') : 'Select options'), /*#__PURE__*/_react.default.createElement("span", {
    className: "absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none"
  }, /*#__PURE__*/_react.default.createElement(_lucideReact.ChevronDown, {
    className: "w-4 h-4 text-gray-400"
  }))), /*#__PURE__*/_react.default.createElement(_react2.Listbox.Options, {
    className: "absolute z-10 w-full py-1 mt-1 overflow-auto text-base bg-white border border-gray-200 rounded shadow max-h-60 focus:outline-none sm:text-sm"
  }, filteredOptions.length > 0 ? filteredOptions.map(option => /*#__PURE__*/_react.default.createElement(_react2.Listbox.Option, {
    key: option.id,
    value: option,
    className: ({
      active
    }) => `relative cursor-pointer select-none py-2 pl-4 pr-4 ${active ? 'bg-blue-100 text-blue-900' : 'text-gray-900'}`
  }, ({
    selected
  }) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
    className: `block truncate ${selected ? 'font-medium' : 'font-normal'}`
  }, option.label), selected ? /*#__PURE__*/_react.default.createElement("span", {
    className: "absolute inset-y-0 left-0 flex items-center pl-3 text-blue-600"
  }, /*#__PURE__*/_react.default.createElement(_lucideReact.Check, {
    className: "w-4 h-4",
    "aria-hidden": "true"
  })) : null))) : /*#__PURE__*/_react.default.createElement("div", {
    className: "px-4 py-2 text-gray-500"
  }, "No option selected")))), selectedOptions.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
    className: "flex flex-wrap gap-2 mt-[6px]"
  }, selectedOptions.map(opt => /*#__PURE__*/_react.default.createElement("span", {
    key: opt.id,
    className: "flex items-center px-2 py-1 text-xs bg-gray-100 border rounded-full"
  }, opt.label, /*#__PURE__*/_react.default.createElement("button", {
    type: "button",
    onClick: () => removeItem(opt.id),
    className: "ml-1 text-gray-500 hover:text-gray-700"
  }, /*#__PURE__*/_react.default.createElement(_lucideReact.X, {
    className: "w-3 h-3"
  }))))));
}