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

package/dist/esm/internal/InputWrapper.js

@@ -3,33 +3,35 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import { FloatingPortal } from '@floating-ui/react';
 import { Icon, CoreIcons } from '@react-fabric/core';
 import { isString } from '@react-fabric/utilities';
 import classNames from 'classnames';
 import { useRef, useState, useMemo, useCallback, useEffect } from 'react';
 import { Fragment, jsxs, jsx } from 'react/jsx-runtime';
 import { ErrorIcon } from './ErrorIcon.js';
-import classes from './Field.module.css';
 import { FieldWrapper } from './FieldWrapper.js';
 
-var _excluded = ["invalid", "error", "allowClear", "showClear", "decorateStart", "decorateEnd", "children", "onClear", "noOutline", "noBorder", "textarea", "data-inner", "data-open", "floatingExpand", "wrapperRef", "width"];
+var _excluded = ["invalid", "error", "allowClear", "showClear", "decorateStart", "decorateEnd", "decorateEndShowWhenEmpty", "decorateEndHideWhenEmpty", "children", "onClear", "noOutline", "noBorder", "actionButton", "textarea", "textareaExpandable", "data-inner", "data-open", "floatingExpand", "wrapperRef", "width"];
 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 InputWrapper = function InputWrapper(_ref) {
-  var _elRef$current;
   var invalid = _ref.invalid,
     error = _ref.error,
     allowClear = _ref.allowClear,
     showClear = _ref.showClear,
     decorateStart = _ref.decorateStart,
     decorateEnd = _ref.decorateEnd,
+    decorateEndShowWhenEmpty = _ref.decorateEndShowWhenEmpty,
+    decorateEndHideWhenEmpty = _ref.decorateEndHideWhenEmpty,
     children = _ref.children,
     onClear = _ref.onClear,
     noOutline = _ref.noOutline,
     noBorder = _ref.noBorder,
+    actionButton = _ref.actionButton,
     _ref$textarea = _ref.textarea,
     textarea = _ref$textarea === void 0 ? false : _ref$textarea,
+    _ref$textareaExpandab = _ref.textareaExpandable,
+    textareaExpandable = _ref$textareaExpandab === void 0 ? false : _ref$textareaExpandab,
     isInner = _ref["data-inner"];
     _ref["data-open"];
     var floatingExpand = _ref.floatingExpand,
@@ -50,13 +52,17 @@ var InputWrapper = function InputWrapper(_ref) {
     });
   }, [isInner, rest, width]);
   var handleClear = useCallback(function (e) {
-    var _e$currentTarget$pare;
-    (_e$currentTarget$pare = e.currentTarget.parentElement) === null || _e$currentTarget$pare === void 0 || (_e$currentTarget$pare = _e$currentTarget$pare.querySelector("input,textarea,button")) === null || _e$currentTarget$pare === void 0 || _e$currentTarget$pare.focus();
+    var _e$currentTarget$pare, _parent$querySelector;
+    var parent = (_e$currentTarget$pare = e.currentTarget.parentElement) === null || _e$currentTarget$pare === void 0 ? void 0 : _e$currentTarget$pare.querySelector("& > :not(.fabric-decorate)");
+    var el = (_parent$querySelector = parent === null || parent === void 0 ? void 0 : parent.querySelector("input,textarea,button")) !== null && _parent$querySelector !== void 0 ? _parent$querySelector : parent;
+    el === null || el === void 0 || el.focus();
     onClear === null || onClear === void 0 || onClear();
   }, [onClear]);
   var doFocus = useCallback(function (e) {
-    var _e$currentTarget$pare2;
-    (_e$currentTarget$pare2 = e.currentTarget.parentElement) === null || _e$currentTarget$pare2 === void 0 || (_e$currentTarget$pare2 = _e$currentTarget$pare2.querySelector("input,textarea,button")) === null || _e$currentTarget$pare2 === void 0 || _e$currentTarget$pare2.focus();
+    var _e$currentTarget$pare2, _parent$querySelector2;
+    var parent = (_e$currentTarget$pare2 = e.currentTarget.parentElement) === null || _e$currentTarget$pare2 === void 0 ? void 0 : _e$currentTarget$pare2.querySelector("& > :not(.fabric-decorate)");
+    var el = (_parent$querySelector2 = parent === null || parent === void 0 ? void 0 : parent.querySelector("input,textarea,button")) !== null && _parent$querySelector2 !== void 0 ? _parent$querySelector2 : parent;
+    el === null || el === void 0 || el.focus();
   }, [onClear]);
   useEffect(function () {
     isExpanded && setTimeout(function () {
@@ -67,13 +73,13 @@ var InputWrapper = function InputWrapper(_ref) {
   var el = /*#__PURE__*/jsxs("div", {
     role: "none",
     ref: wrapperRef,
-    className: classNames(classes.inputWrapper, invalid && classes.invalidWrapper, !noOutline && !noBorder && "bg-[var(--fabric-input)] outline overflow-hidden", "flex flex-nowrap items-center", textarea ? "rounded-capped group" : "rounded", isExpanded ? "fixed inset-4 z-[99]" : floatingExpand ? "absolute inset-x-0" : "relative", !noOutline && "after:absolute after:bottom-0 after:h-px after:bg-primary-500 after:mx-auto"),
+    className: classNames("fabric-inputWrapper", invalid && "fabric-invalidWrapper", !noOutline && !noBorder && "bg-(--fabric-input) outline overflow-hidden", "flex flex-nowrap items-center flex-1", textarea ? "rounded-capped group" : "rounded", isExpanded ? "fixed inset-4 z-99" : floatingExpand ? "absolute inset-x-0" : "relative", !noOutline && "after:absolute after:bottom-0 after:h-px after:bg-primary-500 after:mx-auto"),
     onKeyDown: function onKeyDown(e) {
-      return e.key === "Escape" && setExpanded(false);
+      return e.key === "Escape" && isExpanded && (setExpanded(false), e.stopPropagation());
     },
     children: [decorateStart && /*#__PURE__*/jsx("div", {
       onClickCapture: doFocus,
-      className: classNames(classes.decorate, "text-muted leading-none flex-content", isString(decorateStart) && "px-1"),
+      className: classNames("fabric-decorate", "text-muted leading-none flex-content", isString(decorateStart) && "px-1"),
       children: decorateStart
     }), /*#__PURE__*/jsx(ErrorIcon, {
       invalid: invalid,
@@ -81,12 +87,16 @@ var InputWrapper = function InputWrapper(_ref) {
     }), children, allowClear && showClear && /*#__PURE__*/jsx(Icon, {
       icon: CoreIcons.close,
       onClick: handleClear,
-      className: classNames("text-tint-500 hover:text-tint-700 p-1 z-1 flex-content", classes.inputClear, textarea && "self-start mt-1 me-1")
+      className: classNames("text-tint-500 hover:text-tint-700 p-1 z-1 flex-content", "fabric-inputClear", textarea && "self-start mt-1 me-1")
     }), decorateEnd && /*#__PURE__*/jsx("div", {
       onClickCapture: doFocus,
-      className: classNames(classes.decorate, "text-muted leading-none flex-content", isString(decorateEnd) && "px-1"),
+      className: classNames("fabric-decorate", "text-muted leading-none flex-content", isString(decorateEnd) && "px-1", decorateEndHideWhenEmpty && "peer-placeholder-shown:hidden", decorateEndShowWhenEmpty && "hidden peer-placeholder-shown:inline-block"),
       children: decorateEnd
-    }), textarea && /*#__PURE__*/jsx(Icon, {
+    }), actionButton && /*#__PURE__*/jsx("div", {
+      onClickCapture: doFocus,
+      className: classNames("fabric-decorate", "text-muted leading-none flex-content"),
+      children: actionButton
+    }), textareaExpandable && /*#__PURE__*/jsx(Icon, {
       onClick: function onClick() {
         return setExpanded(!isExpanded);
       },
@@ -95,17 +105,14 @@ var InputWrapper = function InputWrapper(_ref) {
     })]
   });
   return /*#__PURE__*/jsx(Wrapper, _objectSpread(_objectSpread({}, wrapperProps), {}, {
-    children: /*#__PURE__*/jsxs("div", {
+    children: /*#__PURE__*/jsx("div", {
       ref: elRef,
-      className: "flex-1 relative min-h-8",
+      className: classNames("relative min-h-8 flex flex-col flex-nowrap", width ? "flex-auto" : "flex-1"),
       style: {
         width: width,
         flexBasis: width
       },
-      children: [!isExpanded && el, isExpanded && /*#__PURE__*/jsx(FloatingPortal, {
-        root: (_elRef$current = elRef.current) === null || _elRef$current === void 0 ? void 0 : _elRef$current.closest(".theme-base"),
-        children: el
-      })]
+      children: el
     })
   }));
 };

package/dist/esm/select/AutoComplete.js

@@ -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 : ""
@@ -243,7 +253,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 { useDraggable, useDroppable, DndContext, DragOverlay } from '@dnd-kit/core';
+import { restrictToHorizontalAxis } from '@dnd-kit/modifiers';
 import { ButtonGroup, Button, CoreIcons } 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: CoreIcons.chevronsLeft,
+              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: CoreIcons.chevronLeft,
+              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: CoreIcons.chevronRight,
+              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: CoreIcons.chevronsRight,
+              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

@@ -1,38 +1,43 @@
 'use client';
 
+import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import _regeneratorRuntime from '@babel/runtime/regenerator';
 import { useFloating, autoUpdate, useListNavigation, useTypeahead, useInteractions, FloatingFocusManager } from '@floating-ui/react';
 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 +45,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 +64,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 +146,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 +194,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 +214,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,12 +253,32 @@ 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: ( /*#__PURE__*/function () {
+          var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(item, label) {
+            var _renderer3;
+            return _regeneratorRuntime.wrap(function _callee$(_context) {
+              while (1) switch (_context.prev = _context.next) {
+                case 0:
+                  _context.next = 2;
+                  return (_renderer3 = renderer === null || renderer === void 0 ? void 0 : renderer(item)) !== null && _renderer3 !== void 0 ? _renderer3 : label;
+                case 2:
+                  return _context.abrupt("return", _context.sent);
+                case 3:
+                case "end":
+                  return _context.stop();
+              }
+            }, _callee);
+          }));
+          return function (_x, _x2) {
+            return _ref4.apply(this, arguments);
+          };
+        }())
       }))
     })]
   }));

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
     })]
   }));
 };