@react-fabric/form 1.0.0-beta.6 → 1.0.0-beta.61

package/dist/esm/select/AutoComplete.js

@@ -3,7 +3,7 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { useFloating, autoUpdate, shift, flip, offset, useDismiss, useListNavigation, useTypeahead, useInteractions, FloatingPortal, FloatingFocusManager } from '@floating-ui/react';
-import { Chip, Icon, CoreIcons } from '@react-fabric/core';
+import { Chip, Icon } from '@react-fabric/core';
 import { isArray, isEmpty } from '@react-fabric/utilities';
 import classNames from 'classnames';
 import { useRef, useId, useMemo, useCallback, useLayoutEffect } from 'react';
@@ -12,21 +12,28 @@ import { Options } from './Options.js';
 import { useSelect } from './useSelect.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
-var _excluded = ["ref", "name", "value", "invalid", "readOnly", "disabled", "required", "placeholder", "autoFocus", "expandOnEdit", "error", "history", "multiple", "onChange", "onSelect", "onInput", "onFocus", "onBlur", "onEnterPressed"];
+var _excluded = ["ref", "name", "value", "invalid", "readOnly", "disabled", "required", "placeholder", "autoFocus", "expandOnEdit", "error", "history", "multiple", "onChange", "onSelect", "onInput", "onFocus", "onBlur", "onQuery", "onEnterPressed"];
 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; }
+/**
+ * AutoComplete component for selecting or entering values with history suggestions.
+ * It supports multiple selections, history suggestions, and custom styling.
+ *
+ * @param {AutoCompleteProps} props - The properties for the AutoComplete component.
+ * @returns {JSX.Element} The rendered AutoComplete component.
+ */
 var AutoComplete = function AutoComplete(_ref) {
   var _refs$reference$curre;
-  _ref.ref;
-    var name = _ref.name,
+  var ref = _ref.ref,
+    name = _ref.name,
     value = _ref.value,
     invalid = _ref.invalid,
     readOnly = _ref.readOnly,
     disabled = _ref.disabled,
     required = _ref.required,
-    placeholder = _ref.placeholder;
-    _ref.autoFocus;
-    var expandOnEdit = _ref.expandOnEdit,
+    placeholder = _ref.placeholder,
+    autoFocus = _ref.autoFocus,
+    expandOnEdit = _ref.expandOnEdit,
     error = _ref.error,
     history = _ref.history,
     multiple = _ref.multiple,
@@ -35,6 +42,7 @@ var AutoComplete = function AutoComplete(_ref) {
     onInput = _ref.onInput,
     onFocus = _ref.onFocus,
     _onBlur = _ref.onBlur,
+    onQuery = _ref.onQuery,
     onEnterPressed = _ref.onEnterPressed,
     rest = _objectWithoutProperties(_ref, _excluded);
   var options = useRef(history);
@@ -45,7 +53,8 @@ var AutoComplete = function AutoComplete(_ref) {
       options: options.current,
       multiple: multiple,
       onChange: onChange,
-      onSelect: onSelect
+      onSelect: onSelect,
+      onQuery: onQuery
     }),
     state = _useSelect.state,
     listRef = _useSelect.listRef,
@@ -132,9 +141,8 @@ var AutoComplete = function AutoComplete(_ref) {
             handleChange("");
             return false;
           } else {
-            var _submitRef$current;
             onEnterPressed === null || onEnterPressed === void 0 || onEnterPressed(evt);
-            (_submitRef$current = submitRef.current) === null || _submitRef$current === void 0 || _submitRef$current.click();
+            setOpen(false);
           }
         } else if (evt.key === "Backspace") {
           !state.query && multiple && handleRemove();
@@ -199,7 +207,7 @@ var AutoComplete = function AutoComplete(_ref) {
     required: required,
     error: error,
     wrapperRef: refs.setReference,
-    className: !multiple && expandOnEdit && state.open ? "!z-[99]" : "",
+    className: !multiple && expandOnEdit && state.open ? "z-99!" : "",
     floatingExpand: !multiple && expandOnEdit && state.open
   }, rest), {}, {
     children: [/*#__PURE__*/jsxs("div", {
@@ -218,7 +226,9 @@ var AutoComplete = function AutoComplete(_ref) {
         "data-testid": name,
         name: name,
         size: 1,
+        ref: ref,
         onInput: onInput,
+        autoFocus: autoFocus,
         rows: !multiple && expandOnEdit && state.open ? 5 : 1,
         className: classNames("appearance-none bg-transparent outline-none border-none ring-0 flex-1 resize-none", disabled && "cursor-not-allowed pointer-events-none", multiple && "min-w-24 overflow-hidden", !state.open && "overflow-hidden whitespace-nowrap"),
         placeholder: isEmpty(state.value) ? placeholder : ""
@@ -233,9 +243,8 @@ var AutoComplete = function AutoComplete(_ref) {
         className: "opacity-0 absolute"
       })]
     }), state.loading && /*#__PURE__*/jsx(Icon, {
-      animate: "spin",
       className: classNames("flex-content p-2 z-0 order-9 text-muted pointer-events-none"),
-      icon: CoreIcons.spinner
+      icon: "icon-[svg-spinners--eclipse]"
     }), state.open && !state.loading && /*#__PURE__*/jsx(FloatingPortal, {
       children: /*#__PURE__*/jsx(FloatingFocusManager, {
         context: context,
@@ -243,7 +252,7 @@ var AutoComplete = function AutoComplete(_ref) {
         visuallyHiddenDismiss: true,
         children: /*#__PURE__*/jsx(Options, _objectSpread(_objectSpread({
           ref: refs.setFloating,
-          className: "outline shadow-lg max-h-[40vh] z-[var(--z-popover)]",
+          className: "outline shadow-lg max-h-[40vh] z-(--z-popover)",
           style: _objectSpread({
             width: (_refs$reference$curre = refs.reference.current) === null || _refs$reference$curre === void 0 ? void 0 : _refs$reference$curre.getBoundingClientRect().width
           }, floatingStyles)

package/dist/esm/select/DualList.js

@@ -4,22 +4,34 @@ import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import { ButtonGroup, Button, CoreIcons } from '@react-fabric/core';
+import { useDraggable, useDroppable, DndContext, DragOverlay } from '@dnd-kit/core';
+import { restrictToHorizontalAxis } from '@dnd-kit/modifiers';
+import { ButtonGroup, Button } from '@react-fabric/core';
+import { mergeRefs } from '@react-fabric/utilities';
 import { useState, useDeferredValue, useEffect, useMemo, useCallback } from 'react';
 import { Field } from '../input/Field.js';
 import { List } from './List.js';
-import { restrictToHorizontalAxis } from '@dnd-kit/modifiers';
-import { useDraggable, useDroppable, DndContext, DragOverlay } from '@dnd-kit/core';
-import { mergeRefs } from '@react-fabric/utilities';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
-var _excluded = ["ref", "value", "options", "groupProperty", "height", "labelProperty", "valueProperty", "renderer", "onChange", "name", "invalid", "readOnly", "disabled", "placeholder", "autoFocus", "error"];
+var _excluded = ["ref", "value", "options", "emptyDisplay", "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; }
+/**
+ * DualList component allows users to select items from two lists.
+ * It displays two lists side by side, one for unselected items and one for selected items.
+ * Users can move items between the lists using buttons or drag-and-drop functionality.
+ * It supports multiple selections and provides options for grouping, labeling, and rendering items.
+ * It also includes features for handling empty states and custom rendering of items.
+ * This component is useful for scenarios where users need to manage selections from a larger set of options, such as in forms or settings.
+ *
+ * @param {DualListProps<T>} props - The properties for the DualList component.
+ * @returns {JSX.Element} The rendered DualList component.
+ */
 var DualList = function DualList(_ref) {
   var ref = _ref.ref,
     value = _ref.value,
     options = _ref.options,
+    emptyDisplay = _ref.emptyDisplay,
     groupProperty = _ref.groupProperty,
     _ref$height = _ref.height,
     height = _ref$height === void 0 ? "18rem" : _ref$height,
@@ -163,6 +175,7 @@ var DualList = function DualList(_ref) {
           error: error,
           height: height,
           options: leftOptions,
+          emptyDisplay: emptyDisplay,
           groupProperty: groupProperty,
           labelProperty: labelProperty,
           valueProperty: valueProperty,
@@ -177,36 +190,44 @@ var DualList = function DualList(_ref) {
           vertical: true,
           className: "outline overflow-hidden bg-base",
           children: [/*#__PURE__*/jsx(Button, {
-            rtlFlip: true,
             size: "sm",
             variant: "link",
             "aria-label": "scroll to top",
             onClick: moveAllLeft,
-            icon: CoreIcons.chevronsLeft,
+            icon: {
+              icon: "icon-[mdi--chevron-double-left]",
+              rtlFlip: true
+            },
             disabled: !rightOptions.length
           }), /*#__PURE__*/jsx(Button, {
-            rtlFlip: true,
             size: "sm",
             variant: "link",
             "aria-label": "scroll up",
             onClick: moveRightSelected,
-            icon: CoreIcons.chevronLeft,
+            icon: {
+              icon: "icon-[mdi--chevron-left]",
+              rtlFlip: true
+            },
             disabled: !rightSelected.length
           }), /*#__PURE__*/jsx(Button, {
-            rtlFlip: true,
             size: "sm",
             variant: "link",
             "aria-label": "scroll down",
             onClick: moveLeftSelected,
-            icon: CoreIcons.chevronRight,
+            icon: {
+              icon: "icon-[mdi--chevron-right]",
+              rtlFlip: true
+            },
             disabled: !leftSelected.length
           }), /*#__PURE__*/jsx(Button, {
-            rtlFlip: true,
             size: "sm",
             variant: "link",
             "aria-label": "scroll to bottom",
             onClick: moveAllRight,
-            icon: CoreIcons.chevronsRight,
+            icon: {
+              icon: "icon-[mdi--chevron-double-right]",
+              rtlFlip: true
+            },
             disabled: !leftOptions.length
           })]
         })
@@ -218,6 +239,7 @@ var DualList = function DualList(_ref) {
           allowClear: true,
           height: height,
           options: rightOptions,
+          emptyDisplay: emptyDisplay,
           groupProperty: groupProperty,
           labelProperty: labelProperty,
           valueProperty: valueProperty,

package/dist/esm/select/List.js

@@ -6,33 +6,36 @@ import { useFloating, autoUpdate, useListNavigation, useTypeahead, useInteractio
 import { Chip } from '@react-fabric/core';
 import { isArray, isEmpty } from '@react-fabric/utilities';
 import classNames from 'classnames';
-import { useMemo, Fragment, useId, useCallback } from 'react';
+import { useMemo, Fragment, useId, useCallback, useLayoutEffect } from 'react';
 import { FieldWrapper } from '../internal/FieldWrapper.js';
 import { InputWrapper } from '../internal/InputWrapper.js';
 import { Options } from './Options.js';
 import { useSelect } from './useSelect.js';
 import { jsx, jsxs } from '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"];
+var _excluded = ["ref", "name", "value", "readOnly", "disabled", "required", "placeholder", "autoFocus", "options", "height", "groupProperty", "labelProperty", "valueProperty", "infoProperty", "sortProperty", "multiple", "allowCreate", "searchable", "createOption", "matcher", "renderer", "onQuery", "onChange", "onSelect", "onEnterPressed", "emptyDisplay", "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,
+  var _state$query, _state$activeItem;
+  var ref = _ref.ref,
+    name = _ref.name,
     value = _ref.value,
     readOnly = _ref.readOnly,
     disabled = _ref.disabled,
     required = _ref.required,
-    placeholder = _ref.placeholder;
-    _ref.autoFocus;
-    var options = _ref.options,
+    placeholder = _ref.placeholder,
+    autoFocus = _ref.autoFocus,
+    options = _ref.options,
     height = _ref.height,
     groupProperty = _ref.groupProperty,
     labelProperty = _ref.labelProperty,
     valueProperty = _ref.valueProperty,
+    infoProperty = _ref.infoProperty,
+    sortProperty = _ref.sortProperty,
     multiple = _ref.multiple,
     allowCreate = _ref.allowCreate,
+    searchable = _ref.searchable,
     createOption = _ref.createOption,
     matcher = _ref.matcher,
     renderer = _ref.renderer,
@@ -40,6 +43,7 @@ var List = function List(_ref) {
     onChange = _ref.onChange,
     onSelect = _ref.onSelect,
     onEnterPressed = _ref.onEnterPressed,
+    emptyDisplay = _ref.emptyDisplay,
     invalid = _ref.invalid,
     error = _ref.error;
     _ref.allowClear;
@@ -58,9 +62,11 @@ var List = function List(_ref) {
       value: value,
       options: options,
       multiple: multiple,
+      alwaysOpen: true,
       groupProperty: groupProperty,
       labelProperty: labelProperty,
       valueProperty: valueProperty,
+      sortProperty: sortProperty,
       allowCreate: allowCreate,
       createOption: createOption,
       matcher: matcher,
@@ -138,9 +144,10 @@ var List = function List(_ref) {
           }
         } else if (evt.key === "Backspace") {
           !state.query && handleRemove();
-        } else if (["ArrowUp", "ArrowDown"].includes(evt.key)) {
-          if (state.activeIndex === null) {
-            setActiveIndex(state.selectedIndex);
+        } else if (!searchable || ["ArrowUp", "ArrowDown"].includes(evt.key)) {
+          if (["ArrowUp", "ArrowDown"].includes(evt.key) && state.activeIndex === null) {
+            var _state$selectedIndex;
+            setActiveIndex((_state$selectedIndex = state.selectedIndex) !== null && _state$selectedIndex !== void 0 ? _state$selectedIndex : 0);
           }
           setTimeout(function () {
             var _props$onKeyDown;
@@ -185,6 +192,14 @@ var List = function List(_ref) {
       });
     }
   }, [state.value, state.query, placeholder, renderer]);
+  useLayoutEffect(function () {
+    setTimeout(function () {
+      var _listRef$current$stat;
+      state.selectedIndex && ((_listRef$current$stat = listRef.current[state.selectedIndex]) === null || _listRef$current$stat === void 0 ? void 0 : _listRef$current$stat.scrollIntoView({
+        block: "center"
+      }));
+    }, 100);
+  }, [state.selectedIndex]);
   return /*#__PURE__*/jsxs(Wrapper, _objectSpread(_objectSpread({}, wrapperProps), {}, {
     children: [/*#__PURE__*/jsx(InputWrapper, {
       showClear: !isEmpty(state.value),
@@ -197,23 +212,32 @@ var List = function List(_ref) {
       className: "z-1 rounded-b-none",
       "data-inner": true,
       wrapperRef: refs.setReference,
-      children: /*#__PURE__*/jsxs("div", {
+      children: /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({
+        role: "none",
         "data-select-display": "true",
-        className: "group flex-1 py-1 px-2 truncate text-start flex gap-1 flex-wrap",
-        children: [!hideSelected && displayValue, /*#__PURE__*/jsx("input", _objectSpread(_objectSpread({
+        className: classNames("group flex-1 py-1 px-2 truncate text-start flex gap-1 relative min-h-5 justify-start", multiple ? "flex-wrap" : "flex-nowrap overflow-hidden")
+      }, referenceProps), {}, {
+        onMouseUp: function onMouseUp(e) {
+          var _e$currentTarget$quer;
+          return (_e$currentTarget$quer = e.currentTarget.querySelector("input")) === null || _e$currentTarget$quer === void 0 ? void 0 : _e$currentTarget$quer.focus();
+        },
+        children: [!hideSelected && displayValue, /*#__PURE__*/jsx("input", {
+          readOnly: !searchable || readOnly,
           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: isEmpty(state.value) ? placeholder : ""
-        }, referenceProps), {}, {
+          size: 1,
+          ref: ref,
+          autoFocus: autoFocus,
+          className: classNames("appearance-none bg-transparent outline-none border-none ring-0 flex-1 min-w-24", disabled && "cursor-not-allowed pointer-events-none", multiple && "min-w-24"),
+          placeholder: isEmpty(state.value) ? placeholder : "",
           onChange: function onChange(evt) {
             return handleQuery(evt.target.value);
           }
-        }))]
-      })
+        })]
+      }))
     }), /*#__PURE__*/jsx(FloatingFocusManager, {
       context: context,
       initialFocus: -1,
@@ -227,11 +251,15 @@ var List = function List(_ref) {
       }, floatingProps), {}, {
         items: state.items,
         active: state.activeIndex,
+        valueProperty: valueProperty,
+        labelProperty: labelProperty,
         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;
+        empty: emptyDisplay,
+        info: (_state$activeItem = state.activeItem) === null || _state$activeItem === void 0 ? void 0 : _state$activeItem[infoProperty !== null && infoProperty !== void 0 ? infoProperty : "info"],
+        children: function children(item, label) {
+          var _renderer3;
+          return (_renderer3 = renderer === null || renderer === void 0 ? void 0 : renderer(item)) !== null && _renderer3 !== void 0 ? _renderer3 : label;
         }
       }))
     })]

package/dist/esm/select/Options.js

@@ -7,7 +7,7 @@ import classNames from 'classnames';
 import { Trans } from 'react-i18next';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
-var _excluded = ["ref", "style", "items", "active", "className", "itemRef", "empty", "valueProperty", "labelProperty", "itemProps", "children"];
+var _excluded = ["ref", "style", "items", "active", "className", "itemRef", "empty", "info", "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) {
@@ -17,7 +17,8 @@ var Options = function Options(_ref) {
     active = _ref.active,
     className = _ref.className,
     itemRef = _ref.itemRef,
-    empty = _ref.empty;
+    empty = _ref.empty,
+    info = _ref.info;
     _ref.valueProperty;
     var _ref$labelProperty = _ref.labelProperty,
     labelProperty = _ref$labelProperty === void 0 ? "label" : _ref$labelProperty,
@@ -26,49 +27,55 @@ var Options = function Options(_ref) {
     rest = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({
     ref: ref,
-    className: classNames("bg-base select-none overflow-x-hidden overflow-y-auto", className),
+    className: classNames("bg-base select-none flex flex-col", className),
     style: style
   }, rest), {}, {
-    children: [items.length === 0 && (empty !== null && empty !== void 0 ? empty : /*#__PURE__*/jsx(EmptyContent, {
-      message: /*#__PURE__*/jsx(Trans, {
-        i18nKey: "form:select.emptyList"
-      })
-    })), items.map(function (item, index) {
-      var _item$labelProperty;
-      if (item.___group___) return /*#__PURE__*/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__*/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__*/jsx(Trans, {
-          i18nKey: "form:select.createOption",
-          values: {
-            query: item.value
-          },
-          components: [/*#__PURE__*/jsx("strong", {
-            children: "query"
-          }, "t0")]
+    children: [/*#__PURE__*/jsxs("div", {
+      className: classNames("overflow-x-hidden overflow-y-auto flex-1"),
+      children: [items.length === 0 && (empty !== null && empty !== void 0 ? empty : /*#__PURE__*/jsx(EmptyContent, {
+        message: /*#__PURE__*/jsx(Trans, {
+          i18nKey: "form:select.emptyList"
         })
-      }), index);
-      return /*#__PURE__*/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);
+      })), items.map(function (item, index) {
+        var _item$value, _item$labelProperty;
+        if (item.___group___) return /*#__PURE__*/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__*/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__*/jsx(Trans, {
+            i18nKey: "form:select.createOption",
+            values: {
+              query: (_item$value = item.value) !== null && _item$value !== void 0 ? _item$value : item
+            },
+            components: [/*#__PURE__*/jsx("strong", {
+              children: "query"
+            }, "t0")]
+          })
+        }), index);
+        return /*#__PURE__*/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);
+      })]
+    }), info && /*#__PURE__*/jsx("div", {
+      className: "px-2 py-1 text-sm bg-dimmed text-muted",
+      children: info
     })]
   }));
 };

package/dist/esm/select/Select.js

@@ -3,7 +3,7 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { useFloating, autoUpdate, shift, flip, offset, useClick, useDismiss, useListNavigation, useTypeahead, useInteractions, FloatingPortal, FloatingFocusManager } from '@floating-ui/react';
-import { Chip, Icon, CoreIcons } from '@react-fabric/core';
+import { Chip, Icon } from '@react-fabric/core';
 import { isArray, isEmpty } from '@react-fabric/utilities';
 import classNames from 'classnames';
 import { useId, useMemo, useCallback, useLayoutEffect } from 'react';
@@ -12,11 +12,11 @@ import { Options } from './Options.js';
 import { useSelect } from './useSelect.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
-var _excluded = ["ref", "name", "value", "invalid", "readOnly", "disabled", "required", "placeholder", "autoFocus", "error", "options", "groupProperty", "labelProperty", "valueProperty", "multiple", "searchable", "allowCreate", "createOption", "matcher", "renderer", "onQuery", "onChange", "onSelect", "onEnterPressed"];
+var _excluded = ["ref", "name", "value", "invalid", "readOnly", "disabled", "required", "placeholder", "autoFocus", "error", "options", "defaultOpen", "hideHandle", "groupProperty", "labelProperty", "valueProperty", "sortProperty", "infoProperty", "multiple", "searchable", "allowCreate", "emptyDisplay", "createOption", "matcher", "renderer", "onQuery", "onChange", "onSelect", "onEnterPressed"];
 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 Select = function Select(_ref) {
-  var _state$query, _refs$reference$curre;
+  var _state$query, _refs$reference$curre, _state$activeItem;
   var ref = _ref.ref,
     name = _ref.name,
     value = _ref.value,
@@ -28,14 +28,19 @@ var Select = function Select(_ref) {
     autoFocus = _ref.autoFocus,
     error = _ref.error,
     options = _ref.options,
+    defaultOpen = _ref.defaultOpen,
+    hideHandle = _ref.hideHandle,
     groupProperty = _ref.groupProperty,
     _ref$labelProperty = _ref.labelProperty,
     labelProperty = _ref$labelProperty === void 0 ? "label" : _ref$labelProperty,
     _ref$valueProperty = _ref.valueProperty,
     valueProperty = _ref$valueProperty === void 0 ? "id" : _ref$valueProperty,
+    sortProperty = _ref.sortProperty,
+    infoProperty = _ref.infoProperty,
     multiple = _ref.multiple,
     searchable = _ref.searchable,
     allowCreate = _ref.allowCreate,
+    emptyDisplay = _ref.emptyDisplay,
     createOption = _ref.createOption,
     matcher = _ref.matcher,
     renderer = _ref.renderer,
@@ -48,9 +53,11 @@ var Select = function Select(_ref) {
       value: value,
       options: options,
       multiple: multiple,
+      defaultOpen: defaultOpen,
       groupProperty: groupProperty,
       labelProperty: labelProperty,
       valueProperty: valueProperty,
+      sortProperty: sortProperty,
       allowCreate: allowCreate,
       createOption: createOption,
       matcher: matcher,
@@ -140,6 +147,9 @@ var Select = function Select(_ref) {
             return false;
           } else if (state.query) {
             handleQuery("");
+            evt.preventDefault();
+            evt.stopPropagation();
+            return false;
           } else {
             onEnterPressed === null || onEnterPressed === void 0 || onEnterPressed(evt);
           }
@@ -188,7 +198,7 @@ var Select = function Select(_ref) {
     } else if (!isEmpty(state.value) && !state.query) {
       var _ref3, _renderer2;
       return /*#__PURE__*/jsx("span", {
-        className: "self-center pointer-events-none select-none",
+        className: "self-center pointer-events-none select-none truncate leading-tight",
         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
       });
     }
@@ -215,7 +225,7 @@ var Select = function Select(_ref) {
     required: required,
     error: error,
     wrapperRef: refs.setReference,
-    className: state.open ? "!z-[99]" : ""
+    className: state.open ? "z-99!" : ""
   }, rest), {}, {
     children: [/*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({
       role: "none",
@@ -236,22 +246,21 @@ var Select = function Select(_ref) {
         size: 1,
         ref: ref,
         autoFocus: autoFocus,
-        className: classNames("appearance-none bg-transparent outline-none border-none ring-0 flex-1", disabled && "cursor-not-allowed pointer-events-none", multiple && "min-w-24"),
+        className: classNames("appearance-none bg-transparent outline-none border-none ring-0 flex-1 peer", disabled && "cursor-not-allowed pointer-events-none", multiple ? "min-w-24" : "min-w-2"),
         placeholder: isEmpty(state.value) ? placeholder : "",
         onChange: function onChange(evt) {
           return handleQuery(evt.target.value);
         }
       })]
-    })), !state.loading && /*#__PURE__*/jsx(Icon, {
+    })), !state.loading && !hideHandle && /*#__PURE__*/jsx(Icon, {
       className: classNames("flex-content p-2 z-0 order-9 text-muted cursor-pointer self-stretch flex items-center h-auto", state.open && "-scale-y-100 pointer-events-none", disabled && "pointer-events-none"),
       onClick: function onClick() {
         return !disabled && openDropdown();
       },
-      icon: CoreIcons.chevronDown
+      icon: "icon-[mdi--chevron-down]"
     }), state.loading && /*#__PURE__*/jsx(Icon, {
-      animate: "spin",
       className: classNames("flex-content p-2 z-0 order-9 text-muted pointer-events-none"),
-      icon: CoreIcons.spinner
+      icon: "icon-[svg-spinners--eclipse]"
     }), state.open && !state.loading && /*#__PURE__*/jsx(FloatingPortal, {
       children: /*#__PURE__*/jsx(FloatingFocusManager, {
         context: context,
@@ -259,7 +268,7 @@ var Select = function Select(_ref) {
         visuallyHiddenDismiss: true,
         children: /*#__PURE__*/jsx(Options, _objectSpread(_objectSpread({
           ref: refs.setFloating,
-          className: "outline shadow-lg max-h-[40vh] z-[var(--z-popover)]",
+          className: "outline shadow-lg max-h-[40vh] z-(--z-popover)",
           style: _objectSpread({
             width: (_refs$reference$curre = refs.reference.current) === null || _refs$reference$curre === void 0 ? void 0 : _refs$reference$curre.getBoundingClientRect().width
           }, floatingStyles)
@@ -270,6 +279,8 @@ var Select = function Select(_ref) {
           labelProperty: labelProperty,
           itemRef: setItemRef,
           itemProps: makeItemProps,
+          empty: emptyDisplay,
+          info: (_state$activeItem = state.activeItem) === null || _state$activeItem === void 0 ? void 0 : _state$activeItem[infoProperty !== null && infoProperty !== void 0 ? infoProperty : "info"],
           children: function children(item, label) {
             var _renderer3;
             return (_renderer3 = renderer === null || renderer === void 0 ? void 0 : renderer(item)) !== null && _renderer3 !== void 0 ? _renderer3 : label;