@react-fabric/form 1.0.0-beta.4 → 1.0.0-beta.41

package/dist/esm/input/RadioGroup.js

@@ -2,26 +2,29 @@
 
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import { Children, cloneElement } from 'react';
+import { cloneChildren } from '@react-fabric/core';
+import { cloneElement } from 'react';
 import { FieldWrapper } from '../internal/FieldWrapper.js';
 import { jsx } from 'react/jsx-runtime';
 
-var _excluded = ["children", "name", "className", "onChange"];
+var _excluded = ["children", "name", "className", "optionWidth", "onChange"];
 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 RadioGroup = function RadioGroup(_ref) {
   var children = _ref.children,
     name = _ref.name,
     className = _ref.className,
+    optionWidth = _ref.optionWidth,
     onChange = _ref.onChange,
     rest = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/jsx(FieldWrapper, _objectSpread(_objectSpread({}, rest), {}, {
     children: /*#__PURE__*/jsx("div", {
       className: className,
-      children: Children.map(children, function (child) {
+      children: cloneChildren(children, function (child) {
         return /*#__PURE__*/cloneElement(child, {
           name: name,
-          onChange: onChange
+          onChange: onChange,
+          width: optionWidth
         });
       })
     })

package/dist/esm/input/{Range.js → RangeSlider.js}

@@ -16,7 +16,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 /**
  * Number Range input
  */
-var Range = function Range(_ref) {
+var RangeSlider = function RangeSlider(_ref) {
   var error = _ref.error;
     _ref.name;
     var value = _ref.value,
@@ -71,7 +71,7 @@ var Range = function Range(_ref) {
   }, [showValue]);
   var handleChange = useCallback(function (val) {
     setActualValue(val !== null && val !== void 0 ? val : [min, max]);
-    onChange === null || onChange === void 0 || onChange(val !== null && val !== void 0 ? val : undefined);
+    onChange === null || onChange === void 0 || onChange(val !== null && val !== void 0 ? val : null);
   }, [onChange, min, max]);
   var minDisplay = useMemo(function () {
     return /*#__PURE__*/jsx("span", {
@@ -166,4 +166,4 @@ var Range = function Range(_ref) {
   }));
 };
 
-export { Range };
+export { RangeSlider };

package/dist/esm/input/Search.js

@@ -53,7 +53,7 @@ var Search = function Search(_ref) {
     var value = e === null || e === void 0 ? void 0 : e.target.value;
     refValue.current = value !== null && value !== void 0 ? 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);
 
     // value was cleared so force fire onSearch
     if (searchOnChange) {

package/dist/esm/input/Slider.js

@@ -73,7 +73,7 @@ var Slider = function Slider(_ref) {
   var handleChange = useCallback(function (value) {
     var val = useInfinity && value === max ? Infinity : value;
     setActualValue(val !== null && val !== void 0 ? val : 0);
-    onChange === null || onChange === void 0 || onChange(val !== null && val !== void 0 ? val : undefined);
+    onChange === null || onChange === void 0 || onChange(val !== null && val !== void 0 ? val : null);
   }, [onChange, max, useInfinity]);
   var minDisplay = useMemo(function () {
     return /*#__PURE__*/jsx("span", {

package/dist/esm/input/Switch.js

@@ -4,13 +4,13 @@ import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import classNames from 'classnames';
-import { useState, useDeferredValue, useEffect, useCallback } from 'react';
+import { useState, useDeferredValue, useEffect, useCallback, Fragment } from 'react';
 import { ErrorIcon } from '../internal/ErrorIcon.js';
 import '@react-fabric/utilities';
-import { getBgClass, getColor } from '../utils/getColor.js';
+import { getBgClass, getColor, getColorClass } from '../utils/getColor.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
-var _excluded = ["ref", "label", "checked", "invalid", "disabled", "error", "width", "color", "name", "defaultColor", "onChange"];
+var _excluded = ["ref", "label", "checked", "invalid", "disabled", "error", "width", "color", "name", "onLabel", "offLabel", "onLabelColor", "offLabelColor", "defaultColor", "required", "onChange"];
 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 Switch = function Switch(_ref) {
@@ -23,8 +23,13 @@ var Switch = function Switch(_ref) {
     width = _ref.width,
     color = _ref.color;
     _ref.name;
-    var defaultColor = _ref.defaultColor,
-    onChange = _ref.onChange,
+    var onLabel = _ref.onLabel,
+    offLabel = _ref.offLabel,
+    onLabelColor = _ref.onLabelColor,
+    offLabelColor = _ref.offLabelColor,
+    defaultColor = _ref.defaultColor;
+    _ref.required;
+    var onChange = _ref.onChange,
     rest = _objectWithoutProperties(_ref, _excluded);
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -45,7 +50,7 @@ var Switch = function Switch(_ref) {
       width: width
     },
     children: [/*#__PURE__*/jsxs("div", {
-      className: classNames(actualValue && getBgClass(color ? "".concat(color, "-500") : "primary-500"), !actualValue && (defaultColor ? getBgClass("".concat(defaultColor, "-500")) : "bg-tint-200"), "relative flex h-6 w-10 cursor-pointer rounded-full p-1 transition-colors duration-200 ease-in-out"),
+      className: classNames(actualValue && getBgClass(color ? "".concat(color, "-500") : "primary-500"), !actualValue && (defaultColor ? getBgClass("".concat(defaultColor, "-500")) : "bg-tint-200"), "relative grid grid-cols-2 items-center h-6 min-w-10 cursor-pointer rounded-full p-1 transition-colors duration-200 ease-in-out"),
       style: {
         backgroundColor: actualValue ? getColor(color) : getColor(defaultColor)
       },
@@ -64,7 +69,24 @@ var Switch = function Switch(_ref) {
         onChange: handleChange
       }, rest)), /*#__PURE__*/jsx("span", {
         "aria-hidden": "true",
-        className: classNames(!disabled && "shadow-sm", actualValue ? "translate-x-4" : "translate-x-0", "pointer-events-none inline-block size-4 rounded-full bg-white ring-0 transition duration-200 ease-in-out")
+        className: classNames(!disabled && "shadow-sm", actualValue ? "translate-x-[100%]" : "translate-x-0", "pointer-events-none inline-block h-4 start-1 absolute rounded-full bg-white ring-0 transition duration-200 ease-in-out"),
+        style: {
+          width: "calc(50% - 0.25rem)"
+        }
+      }), (!!onLabel || !!offLabel) && /*#__PURE__*/jsxs(Fragment, {
+        children: [/*#__PURE__*/jsx("span", {
+          className: "whitespace-nowrap text-xs px-1 ".concat(getColorClass(onLabelColor !== null && onLabelColor !== void 0 ? onLabelColor : "white")),
+          style: {
+            color: getColor(onLabelColor)
+          },
+          children: onLabel !== null && onLabel !== void 0 ? onLabel : " "
+        }), /*#__PURE__*/jsx("span", {
+          className: "whitespace-nowrap text-xs px-1 ".concat(getColorClass(offLabelColor !== null && offLabelColor !== void 0 ? offLabelColor : "base")),
+          style: {
+            color: getColor(offLabelColor)
+          },
+          children: offLabel !== null && offLabel !== void 0 ? offLabel : " "
+        })]
       })]
     }), /*#__PURE__*/jsx(ErrorIcon, {
       invalid: invalid,

package/dist/esm/input/Textarea.js

@@ -9,7 +9,7 @@ import { handleEnter } 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", "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; }
 var Textarea = function Textarea(_ref) {
@@ -27,6 +27,7 @@ var Textarea = function Textarea(_ref) {
     _ref$maxRows = _ref.maxRows,
     maxRows = _ref$maxRows === void 0 ? 12 : _ref$maxRows,
     variableRows = _ref.variableRows,
+    expandable = _ref.expandable,
     onChange = _ref.onChange,
     onEnterPressed = _ref.onEnterPressed,
     rest = _objectWithoutProperties(_ref, _excluded);
@@ -46,7 +47,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) {
@@ -65,6 +66,7 @@ var Textarea = function Textarea(_ref) {
     disabled: disabled,
     required: required,
     wrapperRef: wrapperRef,
+    textareaExpandable: expandable,
     textarea: true
   }, rest), {}, {
     children: /*#__PURE__*/jsx("textarea", {
@@ -83,7 +85,9 @@ var Textarea = function Textarea(_ref) {
       autoFocus: autoFocus,
       value: actualValue,
       onChange: handleChange,
-      onKeyDown: handleEnter(onEnterPressed)
+      onKeyDown: handleEnter(onEnterPressed, {
+        preventDefault: !!onEnterPressed
+      })
     })
   }));
 };

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,6 @@
 'use client';
 
 import classNames from 'classnames';
-import classes from './Field.module.css';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 /*
@@ -42,14 +41,14 @@ var FieldWrapper = function FieldWrapper(_ref) {
     className = _ref.className,
     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",
+      className: "flex flex-nowrap flex-content items-end gap-1 py-0.5 px-2",
       style: {
         width: inline ? labelWidth : undefined
       },
@@ -64,6 +63,8 @@ var FieldWrapper = function FieldWrapper(_ref) {
       }), required && /*#__PURE__*/jsx("span", {
         className: "text-danger-500 select-none flex-content text-[10px]",
         children: "\u273D"
+      }), /*#__PURE__*/jsx("div", {
+        className: "flex-1"
       }), appendLabel && /*#__PURE__*/jsx("span", {
         className: "flex-content",
         children: appendLabel

package/dist/esm/internal/InputWrapper.js

@@ -3,33 +3,34 @@
 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", "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,
     _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 +68,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 +82,12 @@ 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, {
+    }), textareaExpandable && /*#__PURE__*/jsx(Icon, {
       onClick: function onClick() {
         return setExpanded(!isExpanded);
       },
@@ -95,17 +96,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: "flex-1 relative min-h-8 flex flex-col flex-nowrap",
       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,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", "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; }
 var AutoComplete = function AutoComplete(_ref) {
@@ -24,9 +24,9 @@ var AutoComplete = function AutoComplete(_ref) {
     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 +35,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 +46,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,
@@ -219,6 +221,7 @@ var AutoComplete = function AutoComplete(_ref) {
         name: name,
         size: 1,
         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 +246,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/List.js

@@ -6,33 +6,34 @@ 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", "multiple", "allowCreate", "searchable", "createOption", "matcher", "renderer", "onQuery", "onChange", "onSelect", "onEnterPressed", "invalid", "error", "allowClear", "decorateStart", "decorateEnd", "data-inner", "data-hide-selected"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var List = function List(_ref) {
   var _state$query;
-  _ref.ref;
-    var name = _ref.name,
+  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,
     multiple = _ref.multiple,
     allowCreate = _ref.allowCreate,
+    searchable = _ref.searchable,
     createOption = _ref.createOption,
     matcher = _ref.matcher,
     renderer = _ref.renderer,
@@ -138,9 +139,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 +187,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 +207,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 +246,13 @@ 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;
+        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", "multiple", "searchable", "allowCreate", "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,6 +28,8 @@ 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,
@@ -48,6 +50,7 @@ var Select = function Select(_ref) {
       value: value,
       options: options,
       multiple: multiple,
+      defaultOpen: defaultOpen,
       groupProperty: groupProperty,
       labelProperty: labelProperty,
       valueProperty: valueProperty,
@@ -140,6 +143,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);
           }
@@ -217,15 +223,16 @@ var Select = function Select(_ref) {
     wrapperRef: refs.setReference,
     className: state.open ? "!z-[99]" : ""
   }, rest), {}, {
-    children: [/*#__PURE__*/jsxs("div", {
+    children: [/*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({
       role: "none",
       "data-select-display": "true",
-      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"),
+      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: [displayValue, /*#__PURE__*/jsx("input", _objectSpread(_objectSpread({
+      children: [displayValue, /*#__PURE__*/jsx("input", {
         readOnly: !searchable || readOnly,
         disabled: disabled,
         value: (_state$query = state.query) !== null && _state$query !== void 0 ? _state$query : "",
@@ -236,13 +243,12 @@ var Select = function Select(_ref) {
         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"),
-        placeholder: isEmpty(state.value) ? placeholder : ""
-      }, referenceProps), {}, {
+        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 +265,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)