@react-fabric/form 1.0.0-beta.40 → 1.0.0-beta.42

package/dist/cjs/input/ColorInput.js

@@ -11,7 +11,7 @@ var react = require('react');
 var ColorPicker = require('./ColorPicker.js');
 var jsxRuntime = require('react/jsx-runtime');
 
-var _excluded = ["ref", "required", "disabled", "allowClear", "invalid", "error", "value", "showPicker", "defaultColor", "decorateEnd", "decorateStart", "onChange", "noOutline"];
+var _excluded = ["ref", "required", "disabled", "allowClear", "invalid", "error", "value", "showPicker", "defaultColor", "decorateEnd", "decorateStart", "onBlur", "onFocus", "onChange", "noOutline"];
 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 ColorInput = function ColorInput(_ref) {
@@ -27,6 +27,8 @@ var ColorInput = function ColorInput(_ref) {
     defaultColor = _ref$defaultColor === void 0 ? "" : _ref$defaultColor,
     decorateEnd = _ref.decorateEnd,
     decorateStart = _ref.decorateStart,
+    onBlur = _ref.onBlur,
+    onFocus = _ref.onFocus,
     onChange = _ref.onChange,
     noOutline = _ref.noOutline,
     rest = _objectWithoutProperties(_ref, _excluded);
@@ -85,7 +87,10 @@ var ColorInput = function ColorInput(_ref) {
       "data-ref": "button",
       className: "flex-1 flex items-center",
       ref: refs.setReference
-    }, getReferenceProps()), {}, {
+    }, getReferenceProps({
+      onBlur: onBlur,
+      onFocus: onFocus
+    })), {}, {
       "data-inner-clickable": "true",
       "data-dropdown-open": isOpen ? true : undefined,
       children: /*#__PURE__*/jsxRuntime.jsx("div", {

package/dist/cjs/input/DateInput.js

@@ -12,7 +12,7 @@ var eventHandlers = require('../utils/eventHandlers.js');
 var classNames = require('classnames');
 var jsxRuntime = require('react/jsx-runtime');
 
-var _excluded = ["ref", "name", "value", "invalid", "readOnly", "disabled", "required", "placeholder", "autoFocus", "error", "type", "onChange", "onEnterPressed", "format", "min", "max"];
+var _excluded = ["ref", "name", "value", "invalid", "readOnly", "disabled", "required", "placeholder", "autoFocus", "error", "type", "onBlur", "onFocus", "onChange", "onEnterPressed", "format", "min", "max"];
 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 DateInput = function DateInput(_ref) {
@@ -28,6 +28,8 @@ var DateInput = function DateInput(_ref) {
     error = _ref.error,
     _ref$type = _ref.type,
     type = _ref$type === void 0 ? "date" : _ref$type,
+    onBlur = _ref.onBlur,
+    onFocus = _ref.onFocus,
     onChange = _ref.onChange,
     onEnterPressed = _ref.onEnterPressed;
     _ref.format;
@@ -153,7 +155,10 @@ var DateInput = function DateInput(_ref) {
       autoFocus: autoFocus,
       value: inputValue,
       ref: utilities.mergeRefs(ref, refs.setReference)
-    }, getReferenceProps()), {}, {
+    }, getReferenceProps({
+      onBlur: onBlur,
+      onFocus: onFocus
+    })), {}, {
       onChange: handleChange,
       onKeyDown: handleEnterPressed
     })), isOpen && /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread(_objectSpread({

package/dist/cjs/input/Input.js

@@ -9,7 +9,7 @@ var eventHandlers = require('../utils/eventHandlers.js');
 require('@react-fabric/utilities');
 var jsxRuntime = require('react/jsx-runtime');
 
-var _excluded = ["ref", "name", "value", "invalid", "readOnly", "disabled", "required", "placeholder", "autoFocus", "error", "type", "onChange", "onEnterPressed"];
+var _excluded = ["ref", "name", "value", "invalid", "readOnly", "disabled", "required", "placeholder", "autoFocus", "error", "type", "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; }
 var Input = function Input(_ref) {
@@ -25,6 +25,8 @@ var Input = function Input(_ref) {
     error = _ref.error,
     _ref$type = _ref.type,
     type = _ref$type === void 0 ? "text" : _ref$type,
+    onBlur = _ref.onBlur,
+    onFocus = _ref.onFocus,
     onChange = _ref.onChange,
     onEnterPressed = _ref.onEnterPressed,
     rest = _objectWithoutProperties(_ref, _excluded);
@@ -70,6 +72,8 @@ var Input = function Input(_ref) {
       autoComplete: "off",
       autoFocus: autoFocus,
       value: actualValue,
+      onBlur: onBlur,
+      onFocus: onFocus,
       onChange: handleChange,
       onKeyDown: handleEnterPressed
     })

package/dist/cjs/input/Number.js

@@ -9,7 +9,7 @@ var eventHandlers = require('../utils/eventHandlers.js');
 require('@react-fabric/utilities');
 var jsxRuntime = require('react/jsx-runtime');
 
-var _excluded = ["ref", "value", "invalid", "readOnly", "disabled", "required", "placeholder", "autoFocus", "name", "min", "max", "step", "onChange", "onEnterPressed"];
+var _excluded = ["ref", "value", "invalid", "readOnly", "disabled", "required", "placeholder", "autoFocus", "name", "min", "max", "step", "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; }
 var Number = function Number(_ref) {
@@ -25,6 +25,8 @@ var Number = function Number(_ref) {
     min = _ref.min,
     max = _ref.max,
     step = _ref.step,
+    onBlur = _ref.onBlur,
+    onFocus = _ref.onFocus,
     onChange = _ref.onChange,
     onEnterPressed = _ref.onEnterPressed,
     rest = _objectWithoutProperties(_ref, _excluded);
@@ -71,6 +73,8 @@ var Number = function Number(_ref) {
       autoComplete: "off",
       autoFocus: autoFocus,
       value: actualValue,
+      onBlur: onBlur,
+      onFocus: onFocus,
       onChange: handleChange,
       onKeyDown: handleEnterPressed
     })

package/dist/cjs/input/Password.js

@@ -12,7 +12,7 @@ var eventHandlers = require('../utils/eventHandlers.js');
 require('@react-fabric/utilities');
 var jsxRuntime = require('react/jsx-runtime');
 
-var _excluded = ["ref", "value", "name", "strength", "invalid", "readOnly", "disabled", "required", "placeholder", "autoFocus", "showToggle", "onChange", "onEnterPressed"];
+var _excluded = ["ref", "value", "name", "strength", "invalid", "readOnly", "disabled", "required", "placeholder", "autoFocus", "showToggle", "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; }
 var Password = function Password(_ref) {
@@ -27,6 +27,8 @@ var Password = function Password(_ref) {
     placeholder = _ref.placeholder,
     autoFocus = _ref.autoFocus,
     showToggle = _ref.showToggle,
+    onBlur = _ref.onBlur,
+    onFocus = _ref.onFocus,
     onChange = _ref.onChange,
     onEnterPressed = _ref.onEnterPressed,
     rest = _objectWithoutProperties(_ref, _excluded);
@@ -90,6 +92,8 @@ var Password = function Password(_ref) {
       autoComplete: "off",
       autoFocus: autoFocus,
       value: actualValue,
+      onBlur: onBlur,
+      onFocus: onFocus,
       onChange: handleChange,
       onKeyDown: handleEnterPressed
     }), !!strength && /*#__PURE__*/jsxRuntime.jsx("div", {

package/dist/cjs/input/Search.js

@@ -10,7 +10,7 @@ var eventHandlers = require('../utils/eventHandlers.js');
 require('@react-fabric/utilities');
 var jsxRuntime = require('react/jsx-runtime');
 
-var _excluded = ["ref", "value", "name", "invalid", "readOnly", "disabled", "required", "searching", "placeholder", "autoFocus", "allowClear", "searchOnChange", "decorateEnd", "decorateStart", "onSearch", "onChange", "onEnterPressed"];
+var _excluded = ["ref", "value", "name", "invalid", "readOnly", "disabled", "required", "searching", "placeholder", "autoFocus", "allowClear", "searchOnChange", "decorateEnd", "decorateStart", "onBlur", "onFocus", "onSearch", "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 Search = function Search(_ref) {
@@ -30,6 +30,8 @@ var Search = function Search(_ref) {
     searchOnChange = _ref$searchOnChange === void 0 ? true : _ref$searchOnChange,
     decorateEnd = _ref.decorateEnd,
     decorateStart = _ref.decorateStart,
+    onBlur = _ref.onBlur,
+    onFocus = _ref.onFocus,
     onSearch = _ref.onSearch,
     onChange = _ref.onChange;
     _ref.onEnterPressed;
@@ -100,6 +102,8 @@ var Search = function Search(_ref) {
       autoComplete: "off",
       autoFocus: autoFocus,
       value: actualValue,
+      onBlur: onBlur,
+      onFocus: onFocus,
       onChange: handleChange,
       onKeyDown: handleEnterPressed
     })

package/dist/cjs/input/Textarea.js

@@ -9,7 +9,7 @@ var eventHandlers = require('../utils/eventHandlers.js');
 require('@react-fabric/utilities');
 var jsxRuntime = require('react/jsx-runtime');
 
-var _excluded = ["ref", "value", "name", "invalid", "readOnly", "disabled", "required", "placeholder", "autoFocus", "rows", "maxRows", "variableRows", "expandable", "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; }
 var Textarea = function Textarea(_ref) {
@@ -28,6 +28,8 @@ var Textarea = function Textarea(_ref) {
     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);
@@ -84,6 +86,8 @@ var Textarea = function Textarea(_ref) {
       autoComplete: "off",
       autoFocus: autoFocus,
       value: actualValue,
+      onBlur: onBlur,
+      onFocus: onFocus,
       onChange: handleChange,
       onKeyDown: eventHandlers.handleEnter(onEnterPressed, {
         preventDefault: !!onEnterPressed

package/dist/cjs/select/AutoComplete.js

@@ -12,7 +12,7 @@ var Options = require('./Options.js');
 var useSelect = require('./useSelect.js');
 var jsxRuntime = require('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 = react.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: utilities.isEmpty(state.value) ? placeholder : ""

package/dist/cjs/select/Select.js

@@ -12,7 +12,7 @@ var Options = require('./Options.js');
 var useSelect = require('./useSelect.js');
 var jsxRuntime = require('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,
@@ -245,7 +248,7 @@ var Select = function Select(_ref) {
           return handleQuery(evt.target.value);
         }
       })]
-    })), !state.loading && /*#__PURE__*/jsxRuntime.jsx(core.Icon, {
+    })), !state.loading && !hideHandle && /*#__PURE__*/jsxRuntime.jsx(core.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();

package/dist/cjs/select/useSelect.js

@@ -14,6 +14,8 @@ var useSelect = function useSelect(_ref) {
   var _ref$options = _ref.options,
     options = _ref$options === void 0 ? utilities.EMPTY_ARRAY : _ref$options,
     value = _ref.value,
+    _ref$defaultOpen = _ref.defaultOpen,
+    defaultOpen = _ref$defaultOpen === void 0 ? false : _ref$defaultOpen,
     autoComplete = _ref.autoComplete,
     _ref$multiple = _ref.multiple,
     multiple = _ref$multiple === void 0 ? false : _ref$multiple,
@@ -170,7 +172,7 @@ var useSelect = function useSelect(_ref) {
     }, {
       multiple: multiple,
       emptyValue: emptyValue,
-      open: false,
+      open: defaultOpen,
       loading: false,
       activeIndex: null,
       selectedIndex: null,

package/dist/esm/input/ColorInput.js

@@ -11,7 +11,7 @@ import { useState, useDeferredValue, useEffect, useCallback, startTransition, us
 import { ColorPicker } from './ColorPicker.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
-var _excluded = ["ref", "required", "disabled", "allowClear", "invalid", "error", "value", "showPicker", "defaultColor", "decorateEnd", "decorateStart", "onChange", "noOutline"];
+var _excluded = ["ref", "required", "disabled", "allowClear", "invalid", "error", "value", "showPicker", "defaultColor", "decorateEnd", "decorateStart", "onBlur", "onFocus", "onChange", "noOutline"];
 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 ColorInput = function ColorInput(_ref) {
@@ -27,6 +27,8 @@ var ColorInput = function ColorInput(_ref) {
     defaultColor = _ref$defaultColor === void 0 ? "" : _ref$defaultColor,
     decorateEnd = _ref.decorateEnd,
     decorateStart = _ref.decorateStart,
+    onBlur = _ref.onBlur,
+    onFocus = _ref.onFocus,
     onChange = _ref.onChange,
     noOutline = _ref.noOutline,
     rest = _objectWithoutProperties(_ref, _excluded);
@@ -85,7 +87,10 @@ var ColorInput = function ColorInput(_ref) {
       "data-ref": "button",
       className: "flex-1 flex items-center",
       ref: refs.setReference
-    }, getReferenceProps()), {}, {
+    }, getReferenceProps({
+      onBlur: onBlur,
+      onFocus: onFocus
+    })), {}, {
       "data-inner-clickable": "true",
       "data-dropdown-open": isOpen ? true : undefined,
       children: /*#__PURE__*/jsx("div", {

package/dist/esm/input/DateInput.js

@@ -12,7 +12,7 @@ import { handleEnter } from '../utils/eventHandlers.js';
 import classNames from 'classnames';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
-var _excluded = ["ref", "name", "value", "invalid", "readOnly", "disabled", "required", "placeholder", "autoFocus", "error", "type", "onChange", "onEnterPressed", "format", "min", "max"];
+var _excluded = ["ref", "name", "value", "invalid", "readOnly", "disabled", "required", "placeholder", "autoFocus", "error", "type", "onBlur", "onFocus", "onChange", "onEnterPressed", "format", "min", "max"];
 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 DateInput = function DateInput(_ref) {
@@ -28,6 +28,8 @@ var DateInput = function DateInput(_ref) {
     error = _ref.error,
     _ref$type = _ref.type,
     type = _ref$type === void 0 ? "date" : _ref$type,
+    onBlur = _ref.onBlur,
+    onFocus = _ref.onFocus,
     onChange = _ref.onChange,
     onEnterPressed = _ref.onEnterPressed;
     _ref.format;
@@ -153,7 +155,10 @@ var DateInput = function DateInput(_ref) {
       autoFocus: autoFocus,
       value: inputValue,
       ref: mergeRefs(ref, refs.setReference)
-    }, getReferenceProps()), {}, {
+    }, getReferenceProps({
+      onBlur: onBlur,
+      onFocus: onFocus
+    })), {}, {
       onChange: handleChange,
       onKeyDown: handleEnterPressed
     })), isOpen && /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({

package/dist/esm/input/Input.js

@@ -9,7 +9,7 @@ import { handleEnter } from '../utils/eventHandlers.js';
 import '@react-fabric/utilities';
 import { jsx } from 'react/jsx-runtime';
 
-var _excluded = ["ref", "name", "value", "invalid", "readOnly", "disabled", "required", "placeholder", "autoFocus", "error", "type", "onChange", "onEnterPressed"];
+var _excluded = ["ref", "name", "value", "invalid", "readOnly", "disabled", "required", "placeholder", "autoFocus", "error", "type", "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; }
 var Input = function Input(_ref) {
@@ -25,6 +25,8 @@ var Input = function Input(_ref) {
     error = _ref.error,
     _ref$type = _ref.type,
     type = _ref$type === void 0 ? "text" : _ref$type,
+    onBlur = _ref.onBlur,
+    onFocus = _ref.onFocus,
     onChange = _ref.onChange,
     onEnterPressed = _ref.onEnterPressed,
     rest = _objectWithoutProperties(_ref, _excluded);
@@ -70,6 +72,8 @@ var Input = function Input(_ref) {
       autoComplete: "off",
       autoFocus: autoFocus,
       value: actualValue,
+      onBlur: onBlur,
+      onFocus: onFocus,
       onChange: handleChange,
       onKeyDown: handleEnterPressed
     })

package/dist/esm/input/Number.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", "invalid", "readOnly", "disabled", "required", "placeholder", "autoFocus", "name", "min", "max", "step", "onChange", "onEnterPressed"];
+var _excluded = ["ref", "value", "invalid", "readOnly", "disabled", "required", "placeholder", "autoFocus", "name", "min", "max", "step", "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; }
 var Number = function Number(_ref) {
@@ -25,6 +25,8 @@ var Number = function Number(_ref) {
     min = _ref.min,
     max = _ref.max,
     step = _ref.step,
+    onBlur = _ref.onBlur,
+    onFocus = _ref.onFocus,
     onChange = _ref.onChange,
     onEnterPressed = _ref.onEnterPressed,
     rest = _objectWithoutProperties(_ref, _excluded);
@@ -71,6 +73,8 @@ var Number = function Number(_ref) {
       autoComplete: "off",
       autoFocus: autoFocus,
       value: actualValue,
+      onBlur: onBlur,
+      onFocus: onFocus,
       onChange: handleChange,
       onKeyDown: handleEnterPressed
     })

package/dist/esm/input/Password.js

@@ -12,7 +12,7 @@ import { handleEnter } from '../utils/eventHandlers.js';
 import '@react-fabric/utilities';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
-var _excluded = ["ref", "value", "name", "strength", "invalid", "readOnly", "disabled", "required", "placeholder", "autoFocus", "showToggle", "onChange", "onEnterPressed"];
+var _excluded = ["ref", "value", "name", "strength", "invalid", "readOnly", "disabled", "required", "placeholder", "autoFocus", "showToggle", "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; }
 var Password = function Password(_ref) {
@@ -27,6 +27,8 @@ var Password = function Password(_ref) {
     placeholder = _ref.placeholder,
     autoFocus = _ref.autoFocus,
     showToggle = _ref.showToggle,
+    onBlur = _ref.onBlur,
+    onFocus = _ref.onFocus,
     onChange = _ref.onChange,
     onEnterPressed = _ref.onEnterPressed,
     rest = _objectWithoutProperties(_ref, _excluded);
@@ -90,6 +92,8 @@ var Password = function Password(_ref) {
       autoComplete: "off",
       autoFocus: autoFocus,
       value: actualValue,
+      onBlur: onBlur,
+      onFocus: onFocus,
       onChange: handleChange,
       onKeyDown: handleEnterPressed
     }), !!strength && /*#__PURE__*/jsx("div", {

package/dist/esm/input/Search.js

@@ -10,7 +10,7 @@ import { handleEnter } from '../utils/eventHandlers.js';
 import '@react-fabric/utilities';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
-var _excluded = ["ref", "value", "name", "invalid", "readOnly", "disabled", "required", "searching", "placeholder", "autoFocus", "allowClear", "searchOnChange", "decorateEnd", "decorateStart", "onSearch", "onChange", "onEnterPressed"];
+var _excluded = ["ref", "value", "name", "invalid", "readOnly", "disabled", "required", "searching", "placeholder", "autoFocus", "allowClear", "searchOnChange", "decorateEnd", "decorateStart", "onBlur", "onFocus", "onSearch", "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 Search = function Search(_ref) {
@@ -30,6 +30,8 @@ var Search = function Search(_ref) {
     searchOnChange = _ref$searchOnChange === void 0 ? true : _ref$searchOnChange,
     decorateEnd = _ref.decorateEnd,
     decorateStart = _ref.decorateStart,
+    onBlur = _ref.onBlur,
+    onFocus = _ref.onFocus,
     onSearch = _ref.onSearch,
     onChange = _ref.onChange;
     _ref.onEnterPressed;
@@ -100,6 +102,8 @@ var Search = function Search(_ref) {
       autoComplete: "off",
       autoFocus: autoFocus,
       value: actualValue,
+      onBlur: onBlur,
+      onFocus: onFocus,
       onChange: handleChange,
       onKeyDown: handleEnterPressed
     })

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", "expandable", "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; }
 var Textarea = function Textarea(_ref) {
@@ -28,6 +28,8 @@ var Textarea = function Textarea(_ref) {
     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);
@@ -84,6 +86,8 @@ var Textarea = function Textarea(_ref) {
       autoComplete: "off",
       autoFocus: autoFocus,
       value: actualValue,
+      onBlur: onBlur,
+      onFocus: onFocus,
       onChange: handleChange,
       onKeyDown: handleEnter(onEnterPressed, {
         preventDefault: !!onEnterPressed

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 : ""

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,
@@ -245,7 +248,7 @@ var Select = function Select(_ref) {
           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();

package/dist/esm/select/useSelect.js

@@ -14,6 +14,8 @@ var useSelect = function useSelect(_ref) {
   var _ref$options = _ref.options,
     options = _ref$options === void 0 ? EMPTY_ARRAY : _ref$options,
     value = _ref.value,
+    _ref$defaultOpen = _ref.defaultOpen,
+    defaultOpen = _ref$defaultOpen === void 0 ? false : _ref$defaultOpen,
     autoComplete = _ref.autoComplete,
     _ref$multiple = _ref.multiple,
     multiple = _ref$multiple === void 0 ? false : _ref$multiple,
@@ -170,7 +172,7 @@ var useSelect = function useSelect(_ref) {
     }, {
       multiple: multiple,
       emptyValue: emptyValue,
-      open: false,
+      open: defaultOpen,
       loading: false,
       activeIndex: null,
       selectedIndex: null,

package/dist/types/input/ColorInput.d.ts

@@ -7,4 +7,4 @@ export interface ColorInputProps extends InputProps, Omit<ColorProps, "onChange"
      */
     showPicker?: boolean;
 }
-export declare const ColorInput: ({ ref, required, disabled, allowClear, invalid, error, value, showPicker, defaultColor, decorateEnd, decorateStart, onChange, noOutline, ...rest }: ColorInputProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ColorInput: ({ ref, required, disabled, allowClear, invalid, error, value, showPicker, defaultColor, decorateEnd, decorateStart, onBlur, onFocus, onChange, noOutline, ...rest }: ColorInputProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/input/DateInput.d.ts

@@ -16,4 +16,4 @@ export interface DateProps extends InputProps<string>, RefProp<HTMLInputElement>
      */
     max?: DateLike;
 }
-export declare const DateInput: ({ ref, name, value, invalid, readOnly, disabled, required, placeholder, autoFocus, error, type, onChange, onEnterPressed, format, min, max, ...rest }: DateProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DateInput: ({ ref, name, value, invalid, readOnly, disabled, required, placeholder, autoFocus, error, type, onBlur, onFocus, onChange, onEnterPressed, format, min, max, ...rest }: DateProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/input/Input.d.ts

@@ -6,4 +6,4 @@ export interface TextInputProps extends InputProps, RefProp<HTMLInputElement> {
      */
     type?: "email" | "file" | "search" | "tel" | "text" | "url";
 }
-export declare const Input: ({ ref, name, value, invalid, readOnly, disabled, required, placeholder, autoFocus, error, type, onChange, onEnterPressed, ...rest }: TextInputProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Input: ({ ref, name, value, invalid, readOnly, disabled, required, placeholder, autoFocus, error, type, onBlur, onFocus, onChange, onEnterPressed, ...rest }: TextInputProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/input/Number.d.ts

@@ -14,4 +14,4 @@ export interface NumberProps extends InputProps<number>, RefProp<HTMLInputElemen
      */
     step?: number;
 }
-export declare const Number: ({ ref, value, invalid, readOnly, disabled, required, placeholder, autoFocus, name, min, max, step, onChange, onEnterPressed, ...rest }: NumberProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Number: ({ ref, value, invalid, readOnly, disabled, required, placeholder, autoFocus, name, min, max, step, onBlur, onFocus, onChange, onEnterPressed, ...rest }: NumberProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/input/Password.d.ts

@@ -10,4 +10,4 @@ export interface PasswordProps extends InputProps, RefProp<HTMLInputElement> {
      */
     strength?: number;
 }
-export declare const Password: ({ ref, value, name, strength, invalid, readOnly, disabled, required, placeholder, autoFocus, showToggle, onChange, onEnterPressed, ...rest }: PasswordProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Password: ({ ref, value, name, strength, invalid, readOnly, disabled, required, placeholder, autoFocus, showToggle, onBlur, onFocus, onChange, onEnterPressed, ...rest }: PasswordProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/input/Search.d.ts

@@ -14,4 +14,4 @@ export interface SearchProps extends InputProps, RefProp<HTMLInputElement> {
      */
     onSearch?: (query?: string) => void;
 }
-export declare const Search: ({ ref, value, name, invalid, readOnly, disabled, required, searching, placeholder, autoFocus, allowClear, searchOnChange, decorateEnd, decorateStart, onSearch, onChange, onEnterPressed, ...rest }: SearchProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Search: ({ ref, value, name, invalid, readOnly, disabled, required, searching, placeholder, autoFocus, allowClear, searchOnChange, decorateEnd, decorateStart, onBlur, onFocus, onSearch, onChange, onEnterPressed, ...rest }: SearchProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/input/Textarea.d.ts

@@ -18,4 +18,4 @@ export interface TextareaProps extends InputProps, RefProp<HTMLTextAreaElement>
      */
     expandable?: boolean;
 }
-export declare const Textarea: ({ ref, value, name, invalid, readOnly, disabled, required, placeholder, autoFocus, rows, maxRows, variableRows, expandable, onChange, onEnterPressed, ...rest }: TextareaProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Textarea: ({ ref, value, name, invalid, readOnly, disabled, required, placeholder, autoFocus, rows, maxRows, variableRows, expandable, onBlur, onFocus, onChange, onEnterPressed, ...rest }: TextareaProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/select/AutoComplete.d.ts

@@ -13,5 +13,5 @@ type AutoCompleteProps = Omit<SelectProps<string>, "options" | "allowCreate" | "
      */
     onInput?: (query: string) => void;
 };
-export declare const AutoComplete: ({ ref, name, value, invalid, readOnly, disabled, required, placeholder, autoFocus, expandOnEdit, error, history, multiple, onChange, onSelect, onInput, onFocus, onBlur, onEnterPressed, ...rest }: AutoCompleteProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AutoComplete: ({ ref, name, value, invalid, readOnly, disabled, required, placeholder, autoFocus, expandOnEdit, error, history, multiple, onChange, onSelect, onInput, onFocus, onBlur, onQuery, onEnterPressed, ...rest }: AutoCompleteProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/select/List.d.ts

@@ -1,4 +1,4 @@
 import { type SelectProps } from "../types";
-export declare const List: <T extends unknown = string>({ 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": isInner, "data-hide-selected": hideSelected, ...rest }: SelectProps<T> & {
+export declare const List: <T extends unknown = string>({ 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": isInner, "data-hide-selected": hideSelected, ...rest }: Omit<SelectProps<T>, "defaultOpen" | "hideHandle"> & {
     height?: string | number;
 }) => import("react/jsx-runtime").JSX.Element;

package/dist/types/select/Select.d.ts

@@ -1,2 +1,2 @@
 import { type SelectProps } from "../types";
-export declare const Select: <T extends unknown = string>({ ref, name, value, invalid, readOnly, disabled, required, placeholder, autoFocus, error, options, groupProperty, labelProperty, valueProperty, multiple, searchable, allowCreate, createOption, matcher, renderer, onQuery, onChange, onSelect, onEnterPressed, ...rest }: SelectProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const Select: <T extends unknown = string>({ 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, ...rest }: SelectProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/types/select/useSelect.d.ts

@@ -10,10 +10,11 @@ interface State {
     query?: string;
     items: AnyObject[];
 }
-export declare const useSelect: ({ options, value, autoComplete, multiple, allowCreate, groupProperty, valueProperty, labelProperty, createOption, matcher, onQuery, onChange, onSelect, }: {
+export declare const useSelect: ({ options, value, defaultOpen, autoComplete, multiple, allowCreate, groupProperty, valueProperty, labelProperty, createOption, matcher, onQuery, onChange, onSelect, }: {
     value?: AnyObject;
     options?: AnyObject[];
     multiple?: boolean;
+    defaultOpen?: boolean;
     allowCreate?: boolean;
     groupProperty?: AnyObject;
     valueProperty?: AnyObject;

package/dist/types/types/index.d.ts

@@ -93,6 +93,14 @@ export interface InputProps<V = string> extends TestProps {
     labelWidth?: string;
 }
 export interface BaseSelectProps<T extends AnyObject = string> {
+    /**
+     * open dropdown by default
+     */
+    defaultOpen?: boolean;
+    /**
+     * hide dropdown handle
+     */
+    hideHandle?: boolean;
     /**
      * list options
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-fabric/form",
-  "version": "1.0.0-beta.40",
+  "version": "1.0.0-beta.42",
   "description": "RUF: Form package",
   "author": "Adarsh Pastakia <adarshpastakia@outlook.com>",
   "license": "MIT",
@@ -41,9 +41,9 @@
     "@dnd-kit/utilities": "^3.2.2",
     "@floating-ui/react": "^0.26.24",
     "@hookform/resolvers": "^3.9.0",
-    "@react-fabric/core": "^1.0.0-beta.40",
-    "@react-fabric/date": "^1.0.0-beta.40",
-    "@react-fabric/utilities": "^1.0.0-beta.40",
+    "@react-fabric/core": "^1.0.0-beta.42",
+    "@react-fabric/date": "^1.0.0-beta.42",
+    "@react-fabric/utilities": "^1.0.0-beta.42",
     "classnames": "^2.5.1",
     "color": "^4.2.3",
     "react-color": "^2.19.3",
@@ -63,5 +63,5 @@
     "node": ">=18.12.0",
     "npm": ">=8.19.0"
   },
-  "gitHead": "ede05c84683697d85e28a0ae380cb9b74d693f51"
+  "gitHead": "61c9612bb2c7bc9a807f46922881432748c9e7a3"
 }

package/src/input/ColorInput.tsx

@@ -70,6 +70,8 @@ export const ColorInput = ({
   defaultColor = "",
   decorateEnd,
   decorateStart,
+  onBlur,
+  onFocus,
   onChange,
   // @ts-expect-error ignore
   noOutline,
@@ -144,7 +146,10 @@ export const ColorInput = ({
         data-ref="button"
         className="flex-1 flex items-center"
         ref={refs.setReference}
-        {...getReferenceProps()}
+        {...getReferenceProps({
+          onBlur,
+          onFocus,
+        })}
         data-inner-clickable="true"
         data-dropdown-open={isOpen ? true : undefined}
       >

package/src/input/DateInput.tsx

@@ -82,6 +82,8 @@ export const DateInput = ({
   autoFocus,
   error,
   type = "date",
+  onBlur,
+  onFocus,
   onChange,
   onEnterPressed,
   format = "dd/MM/yyyy",
@@ -213,7 +215,10 @@ export const DateInput = ({
         autoFocus={autoFocus}
         value={inputValue}
         ref={mergeRefs(ref, refs.setReference)}
-        {...getReferenceProps()}
+        {...getReferenceProps({
+          onBlur,
+          onFocus,
+        })}
         onChange={handleChange}
         onKeyDown={handleEnterPressed}
       />

package/src/input/Input.tsx

@@ -53,6 +53,8 @@ export const Input = ({
   autoFocus,
   error,
   type = "text",
+  onBlur,
+  onFocus,
   onChange,
   onEnterPressed,
   ...rest
@@ -106,6 +108,8 @@ export const Input = ({
         autoComplete="off"
         autoFocus={autoFocus}
         value={actualValue}
+        onBlur={onBlur}
+        onFocus={onFocus}
         onChange={handleChange}
         onKeyDown={handleEnterPressed}
       />

package/src/input/Number.tsx

@@ -64,6 +64,8 @@ export const Number = ({
   min,
   max,
   step,
+  onBlur,
+  onFocus,
   onChange,
   onEnterPressed,
   ...rest
@@ -118,6 +120,8 @@ export const Number = ({
         autoComplete="off"
         autoFocus={autoFocus}
         value={actualValue}
+        onBlur={onBlur}
+        onFocus={onFocus}
         onChange={handleChange}
         onKeyDown={handleEnterPressed}
       />

package/src/input/Password.tsx

@@ -60,6 +60,8 @@ export const Password = ({
   placeholder,
   autoFocus,
   showToggle,
+  onBlur,
+  onFocus,
   onChange,
   onEnterPressed,
   ...rest
@@ -131,6 +133,8 @@ export const Password = ({
         autoComplete="off"
         autoFocus={autoFocus}
         value={actualValue}
+        onBlur={onBlur}
+        onFocus={onFocus}
         onChange={handleChange}
         onKeyDown={handleEnterPressed}
       />

package/src/input/Search.tsx

@@ -67,6 +67,8 @@ export const Search = ({
   searchOnChange = true,
   decorateEnd,
   decorateStart,
+  onBlur,
+  onFocus,
   onSearch,
   onChange,
   onEnterPressed,
@@ -152,6 +154,8 @@ export const Search = ({
         autoComplete="off"
         autoFocus={autoFocus}
         value={actualValue}
+        onBlur={onBlur}
+        onFocus={onFocus}
         onChange={handleChange}
         onKeyDown={handleEnterPressed}
       />

package/src/input/Textarea.tsx

@@ -69,6 +69,8 @@ export const Textarea = ({
   maxRows = 12,
   variableRows,
   expandable,
+  onBlur,
+  onFocus,
   onChange,
   onEnterPressed,
   ...rest
@@ -128,6 +130,8 @@ export const Textarea = ({
         autoComplete="off"
         autoFocus={autoFocus}
         value={actualValue}
+        onBlur={onBlur}
+        onFocus={onFocus}
         onChange={handleChange}
         onKeyDown={handleEnter(onEnterPressed, {
           preventDefault: !!onEnterPressed,

package/src/select/AutoComplete.tsx

@@ -80,6 +80,7 @@ export const AutoComplete = ({
   onInput,
   onFocus,
   onBlur,
+  onQuery,
   onEnterPressed,
   ...rest
 }: AutoCompleteProps) => {
@@ -104,6 +105,7 @@ export const AutoComplete = ({
     multiple,
     onChange,
     onSelect,
+    onQuery,
   });
 
   const dropdownKey = useId();
@@ -292,6 +294,7 @@ export const AutoComplete = ({
           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",

package/src/select/List.tsx

@@ -73,7 +73,9 @@ export const List = <T extends AnyObject = string>({
   // @ts-expect-error ignore
   "data-hide-selected": hideSelected,
   ...rest
-}: SelectProps<T> & { height?: string | number }) => {
+}: Omit<SelectProps<T>, "defaultOpen" | "hideHandle"> & {
+  height?: string | number;
+}) => {
   const Wrapper = useMemo(() => (isInner ? Fragment : FieldWrapper), [isInner]);
   const wrapperProps = useMemo(
     () => (isInner ? {} : { ...rest }),

package/src/select/Select.tsx

@@ -56,6 +56,8 @@ export const Select = <T extends AnyObject = string>({
   autoFocus,
   error,
   options,
+  defaultOpen,
+  hideHandle,
   groupProperty,
   labelProperty = "label" as AnyObject,
   valueProperty = "id" as AnyObject,
@@ -86,6 +88,7 @@ export const Select = <T extends AnyObject = string>({
     value,
     options,
     multiple,
+    defaultOpen,
     groupProperty,
     labelProperty,
     valueProperty,
@@ -301,7 +304,7 @@ export const Select = <T extends AnyObject = string>({
           onChange={(evt) => handleQuery(evt.target.value)}
         />
       </div>
-      {!state.loading && (
+      {!state.loading && !hideHandle && (
         <Icon
           className={classNames(
             "flex-content p-2 z-0 order-9 text-muted cursor-pointer self-stretch flex items-center h-auto",

package/src/select/useSelect.tsx

@@ -76,6 +76,7 @@ interface State {
 export const useSelect = ({
   options = EMPTY_ARRAY,
   value,
+  defaultOpen = false,
   autoComplete,
   multiple = false,
   allowCreate = false,
@@ -91,6 +92,7 @@ export const useSelect = ({
   value?: AnyObject;
   options?: AnyObject[];
   multiple?: boolean;
+  defaultOpen?: boolean;
   allowCreate?: boolean;
   groupProperty?: AnyObject;
   valueProperty?: AnyObject;
@@ -256,7 +258,7 @@ export const useSelect = ({
     {
       multiple,
       emptyValue,
-      open: false,
+      open: defaultOpen,
       loading: false,
       activeIndex: null,
       selectedIndex: null,

package/src/types/index.ts

@@ -123,6 +123,14 @@ export interface InputProps<V = string> extends TestProps {
 }
 
 export interface BaseSelectProps<T extends AnyObject = string> {
+  /**
+   * open dropdown by default
+   */
+  defaultOpen?: boolean;
+  /**
+   * hide dropdown handle
+   */
+  hideHandle?: boolean;
   /**
    * list options
    */