@react-fabric/form 1.0.0-beta.5 → 1.0.0-beta.52

package/dist/esm/input/Textarea.js

@@ -5,13 +5,23 @@ import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { useState, useDeferredValue, useRef, useEffect, useCallback } from 'react';
 import { InputWrapper } from '../internal/InputWrapper.js';
-import { handleEnter } from '../utils/eventHandlers.js';
+import { useHandleEnter } from '../utils/eventHandlers.js';
 import '@react-fabric/utilities';
 import { jsx } from 'react/jsx-runtime';
 
-var _excluded = ["ref", "value", "name", "invalid", "readOnly", "disabled", "required", "placeholder", "autoFocus", "rows", "maxRows", "variableRows", "onChange", "onEnterPressed"];
+var _excluded = ["ref", "value", "name", "invalid", "readOnly", "disabled", "required", "placeholder", "autoFocus", "rows", "maxRows", "variableRows", "expandable", "onBlur", "onFocus", "onChange", "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; }
+/**
+ * Textarea component that allows users to input multi-line text.
+ * It supports features like variable row count, expandable behavior,
+ * and handling of focus, blur, and change events.
+ * This component is designed to be flexible and user-friendly,
+ * providing a clear interface for text input with optional validation and accessibility features.
+ *
+ * @param {TextareaProps} props - The properties for the Textarea component.
+ * @returns {JSX.Element} The rendered Textarea component.
+ */
 var Textarea = function Textarea(_ref) {
   var ref = _ref.ref,
     value = _ref.value,
@@ -27,6 +37,9 @@ var Textarea = function Textarea(_ref) {
     _ref$maxRows = _ref.maxRows,
     maxRows = _ref$maxRows === void 0 ? 12 : _ref$maxRows,
     variableRows = _ref.variableRows,
+    expandable = _ref.expandable,
+    onBlur = _ref.onBlur,
+    onFocus = _ref.onFocus,
     onChange = _ref.onChange,
     onEnterPressed = _ref.onEnterPressed,
     rest = _objectWithoutProperties(_ref, _excluded);
@@ -46,7 +59,7 @@ var Textarea = function Textarea(_ref) {
   var handleChange = useCallback(function (e) {
     var value = e === null || e === void 0 ? void 0 : e.target.value;
     setActualValue(value !== null && value !== void 0 ? value : "");
-    onChange === null || onChange === void 0 || onChange(value !== null && value !== void 0 ? value : undefined);
+    onChange === null || onChange === void 0 || onChange(value !== null && value !== void 0 ? value : null);
   }, [onChange]);
   useEffect(function () {
     if (variableRows) {
@@ -57,14 +70,18 @@ var Textarea = function Textarea(_ref) {
       setFixedRows(rows);
     }
   }, [actualValue, variableRows, rows, maxRows]);
+  var handleEnterPressed = useHandleEnter(onEnterPressed, {
+    preventDefault: !!onEnterPressed
+  });
   return /*#__PURE__*/jsx(InputWrapper, _objectSpread(_objectSpread({
-    showClear: !!actualValue,
+    showClear: !!actualValue && !disabled && !readOnly,
     onClear: handleChange,
     invalid: invalid,
     readOnly: readOnly,
     disabled: disabled,
     required: required,
     wrapperRef: wrapperRef,
+    textareaExpandable: expandable,
     textarea: true
   }, rest), {}, {
     children: /*#__PURE__*/jsx("textarea", {
@@ -82,8 +99,10 @@ var Textarea = function Textarea(_ref) {
       autoComplete: "off",
       autoFocus: autoFocus,
       value: actualValue,
+      onBlur: onBlur,
+      onFocus: onFocus,
       onChange: handleChange,
-      onKeyDown: handleEnter(onEnterPressed)
+      onKeyDown: handleEnterPressed
     })
   }));
 };

package/dist/esm/internal/ErrorIcon.js

@@ -20,7 +20,7 @@ var ErrorIcon = function ErrorIcon(_ref) {
       label: t((_error$values$label = (_error$values = error.values) === null || _error$values === void 0 ? void 0 : _error$values.label) !== null && _error$values$label !== void 0 ? _error$values$label : "form:badkey", (_error$values2 = error.values) === null || _error$values2 === void 0 ? void 0 : _error$values2.path)
     }) : {}),
     placement: "bottom",
-    color: "danger",
+    color: "danger-200",
     children: /*#__PURE__*/jsx(Icon, {
       className: "flex-content first:ms-2 self-center",
       color: "danger",

package/dist/esm/internal/FieldWrapper.js

@@ -1,7 +1,7 @@
 'use client';
 
 import classNames from 'classnames';
-import classes from './Field.module.css';
+import { ErrorIcon } from './ErrorIcon.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 /*
@@ -40,16 +40,18 @@ var FieldWrapper = function FieldWrapper(_ref) {
     children = _ref.children,
     listing = _ref.listing,
     className = _ref.className,
+    invalid = _ref.invalid,
+    error = _ref.error,
     isInner = _ref["data-inner"];
   return /*#__PURE__*/jsxs("div", {
-    className: classNames(classes.fieldWrapper, className, inline ? "flex flex-nowrap gap-1" : "block"),
+    className: classNames("fabric-fieldWrapper", className, inline ? "flex flex-nowrap gap-1" : "block"),
     "data-ref": "fieldWrapper",
     style: {
       width: width,
       flexBasis: width
     },
-    children: [!isInner && /*#__PURE__*/jsxs("div", {
-      className: "flex flex-nowrap flex-content gap-1 py-0.5 px-2",
+    children: [!isInner && label && /*#__PURE__*/jsxs("div", {
+      className: "flex flex-nowrap flex-content items-end gap-1 py-0.5 px-2",
       style: {
         width: inline ? labelWidth : undefined
       },
@@ -64,6 +66,11 @@ var FieldWrapper = function FieldWrapper(_ref) {
       }), required && /*#__PURE__*/jsx("span", {
         className: "text-danger-500 select-none flex-content text-[10px]",
         children: "\u273D"
+      }), /*#__PURE__*/jsx(ErrorIcon, {
+        invalid: invalid,
+        error: error
+      }), /*#__PURE__*/jsx("div", {
+        className: "flex-1"
       }), appendLabel && /*#__PURE__*/jsx("span", {
         className: "flex-content",
         children: appendLabel

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,
@@ -67,13 +69,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 +83,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 +101,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,
@@ -218,7 +227,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 +254,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

@@ -13,13 +13,25 @@ import { useDraggable, useDroppable, DndContext, DragOverlay } from '@dnd-kit/co
 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,
@@ -218,6 +231,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,35 @@ 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", "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 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,
+    sortProperty = _ref.sortProperty,
     multiple = _ref.multiple,
     allowCreate = _ref.allowCreate,
+    searchable = _ref.searchable,
     createOption = _ref.createOption,
     matcher = _ref.matcher,
     renderer = _ref.renderer,
@@ -40,6 +42,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;
@@ -61,6 +64,7 @@ var List = function List(_ref) {
       groupProperty: groupProperty,
       labelProperty: labelProperty,
       valueProperty: valueProperty,
+      sortProperty: sortProperty,
       allowCreate: allowCreate,
       createOption: createOption,
       matcher: matcher,
@@ -138,9 +142,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 +190,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 +210,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 +249,14 @@ 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,
+        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

@@ -34,7 +34,7 @@ var Options = function Options(_ref) {
         i18nKey: "form:select.emptyList"
       })
     })), items.map(function (item, index) {
-      var _item$labelProperty;
+      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
@@ -51,7 +51,7 @@ var Options = function Options(_ref) {
         children: /*#__PURE__*/jsx(Trans, {
           i18nKey: "form:select.createOption",
           values: {
-            query: item.value
+            query: (_item$value = item.value) !== null && _item$value !== void 0 ? _item$value : item
           },
           components: [/*#__PURE__*/jsx("strong", {
             children: "query"

package/dist/esm/select/Select.js

@@ -12,7 +12,7 @@ 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", "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) {
@@ -28,14 +28,18 @@ 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,
     multiple = _ref.multiple,
     searchable = _ref.searchable,
     allowCreate = _ref.allowCreate,
+    emptyDisplay = _ref.emptyDisplay,
     createOption = _ref.createOption,
     matcher = _ref.matcher,
     renderer = _ref.renderer,
@@ -48,9 +52,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 +146,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);
           }
@@ -236,13 +245,13 @@ 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"),
         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();
@@ -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,7 @@ var Select = function Select(_ref) {
           labelProperty: labelProperty,
           itemRef: setItemRef,
           itemProps: makeItemProps,
+          empty: emptyDisplay,
           children: function children(item, label) {
             var _renderer3;
             return (_renderer3 = renderer === null || renderer === void 0 ? void 0 : renderer(item)) !== null && _renderer3 !== void 0 ? _renderer3 : label;