@react-fabric/form 1.0.0-beta.0

package/dist/cjs/select/DualList.js

@@ -0,0 +1,238 @@
+'use strict';
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var core$1 = require('@react-fabric/core');
+var react = require('react');
+var Field = require('../input/Field.js');
+var List = require('./List.js');
+var modifiers = require('@dnd-kit/modifiers');
+var core = require('@dnd-kit/core');
+var utilities = require('@react-fabric/utilities');
+var jsxRuntime = require('react/jsx-runtime');
+
+var _excluded = ["ref", "value", "options", "groupProperty", "height", "labelProperty", "valueProperty", "renderer", "onChange", "name", "invalid", "readOnly", "disabled", "placeholder", "autoFocus", "error"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var DualList = function DualList(_ref) {
+  var ref = _ref.ref,
+    value = _ref.value,
+    options = _ref.options,
+    groupProperty = _ref.groupProperty,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? "18rem" : _ref$height,
+    _ref$labelProperty = _ref.labelProperty,
+    labelProperty = _ref$labelProperty === void 0 ? "label" : _ref$labelProperty,
+    _ref$valueProperty = _ref.valueProperty,
+    valueProperty = _ref$valueProperty === void 0 ? "id" : _ref$valueProperty,
+    renderer = _ref.renderer,
+    onChange = _ref.onChange,
+    name = _ref.name,
+    invalid = _ref.invalid,
+    readOnly = _ref.readOnly,
+    disabled = _ref.disabled,
+    placeholder = _ref.placeholder,
+    autoFocus = _ref.autoFocus,
+    error = _ref.error,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var _useState = react.useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    actualValue = _useState2[0],
+    setActualValue = _useState2[1];
+  var _useState3 = react.useState([]),
+    _useState4 = _slicedToArray(_useState3, 2),
+    leftSelected = _useState4[0],
+    setLeftSelected = _useState4[1];
+  var _useState5 = react.useState([]),
+    _useState6 = _slicedToArray(_useState5, 2),
+    rightSelected = _useState6[0],
+    setRightSelected = _useState6[1];
+  var deferred = react.useDeferredValue(value);
+  react.useEffect(function () {
+    setActualValue(options.filter(function (opt) {
+      var _opt$valueProperty;
+      return deferred === null || deferred === void 0 ? void 0 : deferred.includes((_opt$valueProperty = opt[valueProperty]) !== null && _opt$valueProperty !== void 0 ? _opt$valueProperty : opt);
+    }));
+  }, [deferred, options]);
+  var _useMemo = react.useMemo(function () {
+      return [options.filter(function (opt) {
+        return !(actualValue !== null && actualValue !== void 0 && actualValue.includes(opt));
+      }), actualValue];
+    }, [options, actualValue]),
+    _useMemo2 = _slicedToArray(_useMemo, 2),
+    leftOptions = _useMemo2[0],
+    rightOptions = _useMemo2[1];
+  var moveAllLeft = react.useCallback(function () {
+    setLeftSelected([]);
+    setRightSelected([]);
+    setActualValue([]);
+    onChange === null || onChange === void 0 || onChange([]);
+  }, [onChange]);
+  var moveAllRight = react.useCallback(function () {
+    setLeftSelected([]);
+    setRightSelected([]);
+    setActualValue(options);
+    onChange === null || onChange === void 0 || onChange(options.map(function (opt) {
+      var _opt$valueProperty2;
+      return "".concat((_opt$valueProperty2 = opt[valueProperty]) !== null && _opt$valueProperty2 !== void 0 ? _opt$valueProperty2 : opt);
+    }));
+  }, [onChange, options, valueProperty]);
+  var moveLeftSelected = react.useCallback(function () {
+    var selected = [].concat(_toConsumableArray(actualValue), _toConsumableArray(leftSelected));
+    setActualValue(selected);
+    onChange === null || onChange === void 0 || onChange(selected.map(function (opt) {
+      var _opt$valueProperty3;
+      return "".concat((_opt$valueProperty3 = opt[valueProperty]) !== null && _opt$valueProperty3 !== void 0 ? _opt$valueProperty3 : opt);
+    }));
+    setLeftSelected([]);
+  }, [onChange, leftSelected, actualValue]);
+  var moveRightSelected = react.useCallback(function () {
+    var selected = actualValue.filter(function (opt) {
+      return !rightSelected.includes(opt);
+    });
+    setActualValue(selected);
+    onChange === null || onChange === void 0 || onChange(selected.map(function (opt) {
+      var _opt$valueProperty4;
+      return "".concat((_opt$valueProperty4 = opt[valueProperty]) !== null && _opt$valueProperty4 !== void 0 ? _opt$valueProperty4 : opt);
+    }));
+    setRightSelected([]);
+  }, [onChange, rightSelected, actualValue]);
+  var _useState7 = react.useState([]),
+    _useState8 = _slicedToArray(_useState7, 2),
+    dragItems = _useState8[0],
+    setDragItems = _useState8[1];
+  var dragLeft = core.useDraggable({
+    id: "unselected",
+    disabled: !leftSelected.length,
+    data: {
+      supports: ["selected"]
+    },
+    attributes: {
+      role: "none"
+    }
+  });
+  var dragRight = core.useDraggable({
+    id: "selected",
+    disabled: !rightSelected.length,
+    data: {
+      supports: ["unselected"]
+    },
+    attributes: {
+      role: "none"
+    }
+  });
+  var dropLeft = core.useDroppable({
+    id: "unselected",
+    data: {
+      accepts: ["selected"]
+    }
+  });
+  var dropRight = core.useDroppable({
+    id: "selected",
+    data: {
+      accepts: ["unselected"]
+    }
+  });
+  return /*#__PURE__*/jsxRuntime.jsx(Field.Field, _objectSpread(_objectSpread({}, rest), {}, {
+    noOutline: true,
+    plain: true,
+    children: /*#__PURE__*/jsxRuntime.jsxs(core.DndContext, {
+      modifiers: [modifiers.restrictToHorizontalAxis],
+      onDragStart: function onDragStart(e) {
+        setDragItems(e.active.id === "selected" ? rightSelected : leftSelected);
+      },
+      onDragEnd: function onDragEnd(e) {
+        setDragItems([]);
+      },
+      children: [/*#__PURE__*/jsxRuntime.jsx("div", _objectSpread(_objectSpread(_objectSpread({
+        className: "flex-1 flex flex-col overflow-hidden p-px",
+        ref: utilities.mergeRefs(dragLeft.setNodeRef, dropLeft.setNodeRef)
+      }, dragLeft.attributes), dragLeft.listeners), {}, {
+        children: /*#__PURE__*/jsxRuntime.jsx(List.List, {
+          ref: ref,
+          multiple: true,
+          allowClear: true,
+          name: name,
+          invalid: invalid,
+          readOnly: readOnly,
+          disabled: disabled,
+          placeholder: placeholder,
+          autoFocus: autoFocus,
+          error: error,
+          height: height,
+          options: leftOptions,
+          groupProperty: groupProperty,
+          labelProperty: labelProperty,
+          valueProperty: valueProperty,
+          renderer: renderer,
+          onSelect: setLeftSelected,
+          "data-inner": true,
+          "data-hide-selected": true
+        })
+      })), /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "self-center mx-2",
+        children: /*#__PURE__*/jsxRuntime.jsxs(core$1.ButtonGroup, {
+          vertical: true,
+          className: "outline overflow-hidden bg-base",
+          children: [/*#__PURE__*/jsxRuntime.jsx(core$1.Button, {
+            rtlFlip: true,
+            size: "sm",
+            variant: "link",
+            "aria-label": "scroll to top",
+            onClick: moveAllLeft,
+            icon: core$1.CoreIcons.chevronsLeft,
+            disabled: !rightOptions.length
+          }), /*#__PURE__*/jsxRuntime.jsx(core$1.Button, {
+            rtlFlip: true,
+            size: "sm",
+            variant: "link",
+            "aria-label": "scroll up",
+            onClick: moveRightSelected,
+            icon: core$1.CoreIcons.chevronLeft,
+            disabled: !rightSelected.length
+          }), /*#__PURE__*/jsxRuntime.jsx(core$1.Button, {
+            rtlFlip: true,
+            size: "sm",
+            variant: "link",
+            "aria-label": "scroll down",
+            onClick: moveLeftSelected,
+            icon: core$1.CoreIcons.chevronRight,
+            disabled: !leftSelected.length
+          }), /*#__PURE__*/jsxRuntime.jsx(core$1.Button, {
+            rtlFlip: true,
+            size: "sm",
+            variant: "link",
+            "aria-label": "scroll to bottom",
+            onClick: moveAllRight,
+            icon: core$1.CoreIcons.chevronsRight,
+            disabled: !leftOptions.length
+          })]
+        })
+      }), /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "flex-1 flex flex-col overflow-hidden p-px",
+        ref: utilities.mergeRefs(dropRight.setNodeRef, dragRight.setNodeRef),
+        children: /*#__PURE__*/jsxRuntime.jsx(List.List, {
+          multiple: true,
+          allowClear: true,
+          height: height,
+          options: rightOptions,
+          groupProperty: groupProperty,
+          labelProperty: labelProperty,
+          valueProperty: valueProperty,
+          renderer: renderer,
+          onSelect: setRightSelected,
+          "data-inner": true,
+          "data-hide-selected": true
+        })
+      }), /*#__PURE__*/jsxRuntime.jsx(core.DragOverlay, {
+        children: dragItems.length > 0 && /*#__PURE__*/jsxRuntime.jsxs("span", {
+          children: [dragItems.length, " Item(s)"]
+        })
+      })]
+    })
+  }));
+};
+
+exports.DualList = DualList;

package/dist/cjs/select/List.js

@@ -0,0 +1,241 @@
+'use strict';
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var react$1 = require('@floating-ui/react');
+var core = require('@react-fabric/core');
+var utilities = require('@react-fabric/utilities');
+var classNames = require('classnames');
+var react = require('react');
+var FieldWrapper = require('../internal/FieldWrapper.js');
+var InputWrapper = require('../internal/InputWrapper.js');
+var Options = require('./Options.js');
+var useSelect = require('./useSelect.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+var _excluded = ["ref", "name", "value", "readOnly", "disabled", "required", "placeholder", "autoFocus", "options", "height", "groupProperty", "labelProperty", "valueProperty", "multiple", "allowCreate", "createOption", "matcher", "renderer", "onQuery", "onChange", "onSelect", "onEnterPressed", "invalid", "error", "allowClear", "decorateStart", "decorateEnd", "data-inner", "data-hide-selected"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var List = function List(_ref) {
+  var _state$query;
+  _ref.ref;
+    var name = _ref.name,
+    value = _ref.value,
+    readOnly = _ref.readOnly,
+    disabled = _ref.disabled,
+    required = _ref.required,
+    placeholder = _ref.placeholder;
+    _ref.autoFocus;
+    var options = _ref.options,
+    height = _ref.height,
+    groupProperty = _ref.groupProperty,
+    labelProperty = _ref.labelProperty,
+    valueProperty = _ref.valueProperty,
+    multiple = _ref.multiple,
+    allowCreate = _ref.allowCreate,
+    createOption = _ref.createOption,
+    matcher = _ref.matcher,
+    renderer = _ref.renderer,
+    onQuery = _ref.onQuery,
+    onChange = _ref.onChange,
+    onSelect = _ref.onSelect,
+    onEnterPressed = _ref.onEnterPressed,
+    invalid = _ref.invalid,
+    error = _ref.error;
+    _ref.allowClear;
+    _ref.decorateStart;
+    _ref.decorateEnd;
+    var isInner = _ref["data-inner"],
+    hideSelected = _ref["data-hide-selected"],
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var Wrapper = react.useMemo(function () {
+    return isInner ? react.Fragment : FieldWrapper.FieldWrapper;
+  }, [isInner]);
+  var wrapperProps = react.useMemo(function () {
+    return isInner ? {} : _objectSpread({}, rest);
+  }, [isInner, rest]);
+  var _useSelect = useSelect.useSelect({
+      value: value,
+      options: options,
+      multiple: multiple,
+      groupProperty: groupProperty,
+      labelProperty: labelProperty,
+      valueProperty: valueProperty,
+      allowCreate: allowCreate,
+      createOption: createOption,
+      matcher: matcher,
+      onChange: onChange,
+      onSelect: onSelect,
+      onQuery: onQuery
+    }),
+    state = _useSelect.state,
+    listRef = _useSelect.listRef,
+    listContentRef = _useSelect.listContentRef,
+    macthOption = _useSelect.macthOption,
+    handleChange = _useSelect.handleChange,
+    handleRemove = _useSelect.handleRemove,
+    handleQuery = _useSelect.handleQuery,
+    setItemRef = _useSelect.setItemRef,
+    setActiveIndex = _useSelect.setActiveIndex;
+  var dropdownKey = react.useId();
+  var _useFloating = react$1.useFloating({
+      open: true,
+      placement: "bottom",
+      whileElementsMounted: react$1.autoUpdate,
+      middleware: []
+    }),
+    context = _useFloating.context,
+    refs = _useFloating.refs;
+
+  // floating interactions
+  var navigation = react$1.useListNavigation(context, {
+    listRef: listRef,
+    activeIndex: state.activeIndex,
+    selectedIndex: state.selectedIndex,
+    loop: true,
+    virtual: true,
+    focusItemOnOpen: false,
+    onNavigate: setActiveIndex
+  });
+  var typeahead = react$1.useTypeahead(context, {
+    listRef: listContentRef,
+    activeIndex: state.activeIndex,
+    selectedIndex: state.selectedIndex,
+    findMatch: function findMatch(list, typedString) {
+      return list.find(function (item) {
+        return macthOption(item, typedString);
+      });
+    },
+    onMatch: function onMatch(index) {
+      state.open && setActiveIndex(index);
+    }
+  });
+  var _useInteractions = react$1.useInteractions([navigation, typeahead]),
+    getReferenceProps = _useInteractions.getReferenceProps,
+    getFloatingProps = _useInteractions.getFloatingProps,
+    getItemProps = _useInteractions.getItemProps;
+  var referenceProps = react.useMemo(function () {
+    var props = getReferenceProps();
+    return _objectSpread(_objectSpread({}, props), {}, {
+      onBlur: function onBlur(evt) {
+        var _evt$relatedTarget;
+        if ((_evt$relatedTarget = evt.relatedTarget) !== null && _evt$relatedTarget !== void 0 && _evt$relatedTarget.closest("[data-select-dropdown=\"".concat(dropdownKey, "\"]"))) {
+          var _refs$domReference$cu;
+          (_refs$domReference$cu = refs.domReference.current) === null || _refs$domReference$cu === void 0 || (_refs$domReference$cu = _refs$domReference$cu.querySelector("input")) === null || _refs$domReference$cu === void 0 || _refs$domReference$cu.focus();
+          return;
+        }
+        handleQuery("");
+      },
+      onKeyDown: function onKeyDown(evt) {
+        if (evt.key === "Enter") {
+          if (state.activeIndex !== null) {
+            handleChange(listContentRef.current[state.activeIndex]);
+            evt.preventDefault();
+            evt.stopPropagation();
+            return false;
+          } else if (!state.query) {
+            onEnterPressed === null || onEnterPressed === void 0 || onEnterPressed(evt);
+          }
+        } else if (evt.key === "Backspace") {
+          !state.query && handleRemove();
+        } else if (["ArrowUp", "ArrowDown"].includes(evt.key)) {
+          if (state.activeIndex === null) {
+            setActiveIndex(state.selectedIndex);
+          }
+          setTimeout(function () {
+            var _props$onKeyDown;
+            (_props$onKeyDown = props.onKeyDown) === null || _props$onKeyDown === void 0 || _props$onKeyDown.call(props, evt);
+          }, 50);
+        }
+      }
+    });
+  }, [getReferenceProps, onEnterPressed, handleQuery, refs, state.query, state.activeIndex]);
+  var floatingProps = react.useMemo(function () {
+    return getFloatingProps({
+      "data-select-dropdown": dropdownKey
+    });
+  }, [getFloatingProps]);
+  var makeItemProps = react.useCallback(function (item) {
+    var _state$value, _state$value$includes;
+    var selected = utilities.isArray(state.value) ? (_state$value = state.value) === null || _state$value === void 0 || (_state$value$includes = _state$value.includes) === null || _state$value$includes === void 0 ? void 0 : _state$value$includes.call(_state$value, item) : state.value === item;
+    return _objectSpread(_objectSpread({}, getItemProps({
+      "data-selected": selected ? true : undefined,
+      onClick: function onClick() {
+        handleChange(item);
+      }
+    })), {}, {
+      "aria-hidden": undefined
+    });
+  }, [getItemProps, handleChange, state.value]);
+  var displayValue = react.useMemo(function () {
+    if (utilities.isArray(state.value)) {
+      return state.value.map(function (item, index) {
+        var _ref2, _renderer;
+        return /*#__PURE__*/jsxRuntime.jsx(core.Chip, {
+          onRemove: function onRemove() {
+            return handleRemove(index);
+          },
+          children: (_ref2 = (_renderer = renderer === null || renderer === void 0 ? void 0 : renderer(item)) !== null && _renderer !== void 0 ? _renderer : item[labelProperty]) !== null && _ref2 !== void 0 ? _ref2 : item
+        }, index);
+      });
+    } else if (!utilities.isEmpty(state.value) && !state.query) {
+      var _ref3, _renderer2;
+      return /*#__PURE__*/jsxRuntime.jsx("span", {
+        children: (_ref3 = (_renderer2 = renderer === null || renderer === void 0 ? void 0 : renderer(state.value)) !== null && _renderer2 !== void 0 ? _renderer2 : state.value[labelProperty]) !== null && _ref3 !== void 0 ? _ref3 : state.value
+      });
+    }
+  }, [state.value, state.query, placeholder, renderer]);
+  return /*#__PURE__*/jsxRuntime.jsxs(Wrapper, _objectSpread(_objectSpread({}, wrapperProps), {}, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(InputWrapper.InputWrapper, {
+      showClear: !utilities.isEmpty(state.value),
+      onClear: handleChange,
+      invalid: invalid,
+      readOnly: readOnly,
+      disabled: disabled,
+      required: required,
+      error: error,
+      className: "z-1 rounded-b-none",
+      "data-inner": true,
+      wrapperRef: refs.setReference,
+      children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+        "data-select-display": "true",
+        className: "group flex-1 py-1 px-2 truncate text-start flex gap-1 flex-wrap",
+        children: [!hideSelected && displayValue, /*#__PURE__*/jsxRuntime.jsx("input", _objectSpread(_objectSpread({
+          disabled: disabled,
+          value: (_state$query = state.query) !== null && _state$query !== void 0 ? _state$query : "",
+          "aria-invalid": invalid,
+          "data-testid": name,
+          name: name,
+          className: classNames("appearance-none bg-transparent outline-none border-none ring-0 flex-1 min-w-24", disabled && "cursor-not-allowed pointer-events-none"),
+          placeholder: utilities.isEmpty(state.value) ? placeholder : ""
+        }, referenceProps), {}, {
+          onChange: function onChange(evt) {
+            return handleQuery(evt.target.value);
+          }
+        }))]
+      })
+    }), /*#__PURE__*/jsxRuntime.jsx(react$1.FloatingFocusManager, {
+      context: context,
+      initialFocus: -1,
+      visuallyHiddenDismiss: true,
+      children: /*#__PURE__*/jsxRuntime.jsx(Options.Options, _objectSpread(_objectSpread({
+        ref: refs.setFloating,
+        className: classNames("max-h-96 z-0 rounded-capped rounded-t-none outline", disabled && "pointer-events-none opacity-65"),
+        style: {
+          height: height
+        }
+      }, floatingProps), {}, {
+        items: state.items,
+        active: state.activeIndex,
+        itemRef: setItemRef,
+        itemProps: makeItemProps,
+        children: function children(item) {
+          var _ref4, _renderer3;
+          return (_ref4 = (_renderer3 = renderer === null || renderer === void 0 ? void 0 : renderer(item)) !== null && _renderer3 !== void 0 ? _renderer3 : item[labelProperty]) !== null && _ref4 !== void 0 ? _ref4 : item;
+        }
+      }))
+    })]
+  }));
+};
+
+exports.List = List;

package/dist/cjs/select/Options.js

@@ -0,0 +1,76 @@
+'use strict';
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var core = require('@react-fabric/core');
+var classNames = require('classnames');
+var reactI18next = require('react-i18next');
+var jsxRuntime = require('react/jsx-runtime');
+
+var _excluded = ["ref", "style", "items", "active", "className", "itemRef", "empty", "valueProperty", "labelProperty", "itemProps", "children"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var Options = function Options(_ref) {
+  var ref = _ref.ref,
+    style = _ref.style,
+    items = _ref.items,
+    active = _ref.active,
+    className = _ref.className,
+    itemRef = _ref.itemRef,
+    empty = _ref.empty;
+    _ref.valueProperty;
+    var _ref$labelProperty = _ref.labelProperty,
+    labelProperty = _ref$labelProperty === void 0 ? "label" : _ref$labelProperty,
+    itemProps = _ref.itemProps,
+    children = _ref.children,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread(_objectSpread({
+    ref: ref,
+    className: classNames("bg-base select-none overflow-x-hidden overflow-y-auto", className),
+    style: style
+  }, rest), {}, {
+    children: [items.length === 0 && (empty !== null && empty !== void 0 ? empty : /*#__PURE__*/jsxRuntime.jsx(core.EmptyContent, {
+      message: /*#__PURE__*/jsxRuntime.jsx(reactI18next.Trans, {
+        i18nKey: "form:select.emptyList"
+      })
+    })), items.map(function (item, index) {
+      var _item$labelProperty;
+      if (item.___group___) return /*#__PURE__*/jsxRuntime.jsx("p", {
+        className: "px-2 py-1 text-muted text-xs sticky -top-px z-2 bg-base border-t",
+        children: item.label
+      }, index);
+      if (item.___create___) return /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread(_objectSpread({
+        role: "none",
+        tabIndex: active === index ? 0 : -1,
+        ref: function ref(el) {
+          return itemRef(index, el);
+        },
+        "data-active": active === index ? true : undefined,
+        className: classNames("block text-start truncate px-2 py-1 leading-normal cursor-pointer select-none", "data-[active]:bg-primary-200 data-[selected]:bg-primary-600 data-[selected]:text-white data-[active]:data-[selected]:underline")
+      }, itemProps(item)), {}, {
+        children: /*#__PURE__*/jsxRuntime.jsx(reactI18next.Trans, {
+          i18nKey: "form:select.createOption",
+          values: {
+            query: item.value
+          },
+          components: [/*#__PURE__*/jsxRuntime.jsx("strong", {
+            children: "query"
+          }, "t0")]
+        })
+      }), index);
+      return /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread(_objectSpread({
+        role: "none",
+        tabIndex: active === index ? 0 : -1,
+        ref: function ref(el) {
+          return itemRef(index, el);
+        },
+        "data-active": active === index ? true : undefined,
+        className: classNames("block text-start truncate px-2 py-1 leading-normal cursor-pointer", "data-[active]:bg-primary-200 data-[selected]:bg-primary-600 data-[selected]:text-white data-[active]:data-[selected]:underline")
+      }, itemProps(item)), {}, {
+        children: children(item, (_item$labelProperty = item[labelProperty]) !== null && _item$labelProperty !== void 0 ? _item$labelProperty : item)
+      }), index);
+    })]
+  }));
+};
+
+exports.Options = Options;