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

package/dist/esm/select/useSelect.js

@@ -4,7 +4,7 @@ import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { useDebounce } from '@react-fabric/core';
-import { matchString, dedupe, groupBy, isArray, EMPTY_ARRAY } from '@react-fabric/utilities';
+import { matchString, isString, dedupe, compareValues, groupBy, isArray, EMPTY_ARRAY } from '@react-fabric/utilities';
 import { useMemo, useDeferredValue, useRef, useCallback, useReducer, useEffect } from 'react';
 import { getSelectedValue, makeOption } from './helpers.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,
@@ -88,7 +90,7 @@ var useSelect = function useSelect(_ref) {
         if (action.value !== undefined) {
           if (multiple) {
             var values = [];
-            if (action.value && autoComplete) values.push.apply(values, _toConsumableArray(action.value.split(/,\s?/)));else if (action.value) values.push(action.value);
+            if (isString(action.value)) values.push.apply(values, _toConsumableArray(action.value.split(/,\s?/)));else values.push(action.value);
             newState.value = _toConsumableArray(state.value);
             values.forEach(function (value) {
               var _newState$value$inclu, _newState$value;
@@ -133,13 +135,14 @@ var useSelect = function useSelect(_ref) {
         if (autoComplete && action.query !== undefined) {
           optionList = dedupe([action.query].concat(_toConsumableArray(optionList)));
         }
+        optionList = optionList.sort(compareValues("asc", labelProperty));
         var grouped = groupBy(optionList, groupProperty, "");
         if (action.open) _newState.open = true;
         _newState.items = [];
         // add new item if allowCreate
         if (allowCreate && action.query) _newState.items.push({
           ___create___: true,
-          value: createOption(action.query)
+          value: action.query
         });
         Object.entries(grouped).forEach(function (_ref2) {
           var _newState$items;
@@ -169,7 +172,7 @@ var useSelect = function useSelect(_ref) {
     }, {
       multiple: multiple,
       emptyValue: emptyValue,
-      open: false,
+      open: defaultOpen,
       loading: false,
       activeIndex: null,
       selectedIndex: null,
@@ -201,22 +204,22 @@ var useSelect = function useSelect(_ref) {
       });
       dispatch({
         type: "setValue",
-        value: (_ref4 = hasValue !== null && hasValue !== void 0 ? hasValue : newOption) !== null && _ref4 !== void 0 ? _ref4 : ""
+        value: (_ref4 = hasValue !== null && hasValue !== void 0 ? hasValue : newOption) !== null && _ref4 !== void 0 ? _ref4 : deferred
       });
     }
     if (multiple) {
       optionsRef.current = [];
-      var _value = (deferred !== null && deferred !== void 0 ? deferred : []).map(function (item) {
+      var _value = (isArray(deferred) ? deferred : []).map(function (item) {
         var _ref5;
         var newOption = (allowCreate || autoComplete) && item ? createOption(item) : undefined;
         var hasValue = options.find(function (opt) {
           var _opt$valueProperty2;
-          return ((_opt$valueProperty2 = opt[valueProperty]) !== null && _opt$valueProperty2 !== void 0 ? _opt$valueProperty2 : opt) === deferred;
+          return ((_opt$valueProperty2 = opt[valueProperty]) !== null && _opt$valueProperty2 !== void 0 ? _opt$valueProperty2 : opt) === item;
         });
         if (!hasValue && newOption) {
           optionsRef.current.push(newOption);
         }
-        return (_ref5 = hasValue !== null && hasValue !== void 0 ? hasValue : newOption) !== null && _ref5 !== void 0 ? _ref5 : "";
+        return (_ref5 = hasValue !== null && hasValue !== void 0 ? hasValue : newOption) !== null && _ref5 !== void 0 ? _ref5 : item;
       });
       optionsRef.current = [].concat(_toConsumableArray(optionsRef.current), _toConsumableArray(options !== null && options !== void 0 ? options : []));
       dispatch({
@@ -285,7 +288,11 @@ var useSelect = function useSelect(_ref) {
       value: value !== null && value !== void 0 && value.___create___ ? value.value : value
     });
     if (value !== null && value !== void 0 && value.___create___) {
-      optionsRef.current = [].concat(_toConsumableArray(optionsRef.current), [createOption(value.value)]);
+      var val = [value.value];
+      if (multiple) {
+        val = value.value.split(/,\s?/);
+      }
+      optionsRef.current = [].concat(_toConsumableArray(optionsRef.current), _toConsumableArray(val.map(createOption)));
     }
     if (autoComplete) {
       optionsRef.current = dedupe([].concat(_toConsumableArray(isArray(values) ? values : [values]), _toConsumableArray(optionsRef.current)));

package/dist/esm/types/schema.js

@@ -0,0 +1,41 @@
+'use client';
+
+/*
+ * React Fabric
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+var DATA_TYPES = /*#__PURE__*/function (DATA_TYPES) {
+  DATA_TYPES["TEXT"] = "text";
+  DATA_TYPES["COLOR"] = "color";
+  DATA_TYPES["BOOL"] = "bool";
+  DATA_TYPES["DATE"] = "date";
+  DATA_TYPES["STRING"] = "string";
+  DATA_TYPES["NUMBER"] = "number";
+  DATA_TYPES["RANGE"] = "range";
+  DATA_TYPES["FILE"] = "file";
+  DATA_TYPES["AVATAR"] = "avatar";
+  DATA_TYPES["SCHEMA"] = "schema";
+  return DATA_TYPES;
+}({});
+var SCHEMA_CUSTOM_LIST = "--CUSTOM--";
+
+export { DATA_TYPES, SCHEMA_CUSTOM_LIST };

package/dist/esm/utils/getColor.js

@@ -35,5 +35,10 @@ var getBgClass = function getBgClass(bg) {
     return "bg-".concat(bg);
   }
 };
+var getColorClass = function getColorClass(color) {
+  if (color && !isColor(color)) {
+    return "text-".concat(color);
+  }
+};
 
-export { getBgClass, getColor };
+export { getBgClass, getColor, getColorClass };

package/dist/types/builder/FileField.d.ts

@@ -1,8 +1,10 @@
 import { type UploadHandler } from "../hooks/useFileUploader";
-import { type FileSchema } from "../types/schema";
-export declare const FileField: ({ uploadHandler, inline, label, accept, multiple, value, ...rest }: Partial<FileSchema> & {
+import { type FileSchema, type ValueType } from "../types/schema";
+export declare const FileField: ({ uploadHandler, inline, label, accept, value, fileUrl, multiple, invalid, error, ...rest }: Partial<FileSchema & ValueType> & {
     value?: AnyObject;
     inline?: boolean;
+    invalid?: boolean;
+    error?: AnyObject;
     fileUrl?: (path: string) => string;
     uploadHandler: UploadHandler;
 }) => import("react/jsx-runtime").JSX.Element;

package/dist/types/builder/FormField.d.ts

@@ -1,9 +1,11 @@
 import { type UploadHandler } from "../hooks/useFileUploader";
+import { type BaseSelectProps } from "../types";
 import { type SchemaType } from "../types/schema";
-export declare const FormField: ({ id, label, required, inline, prefix, autoFocus, defaultValue, fileUrl, uploadHandler, ...rest }: SchemaType & {
+export declare const FormField: ({ id, label, required, inline, prefix, autoFocus, optionLists, fileUrl, uploadHandler, ...rest }: SchemaType & {
     inline?: boolean;
     prefix?: string;
     autoFocus?: boolean;
+    optionLists?: KeyValue<BaseSelectProps<any>>;
     fileUrl?: (path: string) => string;
     uploadHandler?: UploadHandler;
 }) => import("react/jsx-runtime").JSX.Element | undefined;

package/dist/types/builder/SchemaEditor.d.ts

@@ -0,0 +1,2 @@
+import { type SchemaEditorProps } from "../types/schema";
+export declare const SchemaEditor: ({ schemaDef, dynamic, acceptableTypes, optionLists, children, onSubmit, onChange, }: SchemaEditorProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/builder/components/AddSchemaFields.d.ts

@@ -0,0 +1,2 @@
+import { type ModalProps } from "@react-fabric/core";
+export declare const AddSchemaFields: (props: ModalProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/builder/components/SchemaArrayForm.d.ts

@@ -0,0 +1,2 @@
+import { type SchemaEditorProps } from "../../types/schema";
+export declare const SchemaArrayForm: ({ dynamic, acceptableTypes, optionLists, }: Partial<SchemaEditorProps>) => import("react/jsx-runtime").JSX.Element;

package/dist/types/builder/components/SchemaField.d.ts

@@ -0,0 +1,10 @@
+import { type SchemaEditorProps } from "../../types/schema";
+export declare const SchemaField: ({ id, field, fieldId, getModel, onRemove, defaultOpen, optionLists, dynamic, onTypeChange, acceptableTypes, }: {
+    id: string;
+    field: string;
+    fieldId: string;
+    defaultOpen?: boolean;
+    onRemove: () => void;
+    getModel: () => KeyValue;
+    onTypeChange: (val: KeyValue) => void;
+} & Omit<SchemaEditorProps, "schemaDef" | "onChange">) => import("react/jsx-runtime").JSX.Element;

package/dist/types/form/Controller.d.ts

@@ -14,7 +14,7 @@ export interface ControllerProps {
         disabled?: boolean;
         onBlur: () => void;
         onChange: (value: AnyObject) => void;
-        inputRef?: React.Ref<HTMLInputElement>;
+        ref?: React.Ref<HTMLInputElement>;
     }) => ReactElement);
 }
 export declare const Controller: ({ name, children, ...rest }: ControllerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/hooks/useFormBuilder.d.ts

@@ -1,11 +1,13 @@
 import { yup } from "@react-fabric/utilities";
+import { type BaseSelectProps } from "../types";
 import { type FormSchema } from "../types/schema";
 import { type UploadHandler } from "./useFileUploader";
-export declare const useFormBuilder: (schema: FormSchema[], options?: {
+export declare const useFormBuilder: <T extends unknown = string>(schema: FormSchema, options?: {
     prefix?: string;
     inline?: boolean;
     fileUrl?: (path: string) => string;
     uploadHandler?: UploadHandler;
+    optionLists?: KeyValue<BaseSelectProps<T>>;
 }) => {
     formDef: import("react/jsx-runtime").JSX.Element;
     schemaDef: yup.ObjectSchema<{

package/dist/types/index.d.ts

@@ -1,13 +1,15 @@
 import "./i18n";
 export { Controller } from "./form/Controller";
 export { Form, type FormRef } from "./form/Form";
+export { SchemaEditor } from "./builder/SchemaEditor";
 export { useFileUploader } from "./hooks/useFileUploader";
 export { useFormBuilder } from "./hooks/useFormBuilder";
-export { type FormSchema } from "./types/schema";
+export { DATA_TYPES, SCHEMA_CUSTOM_LIST, type FormSchema, type SchemaDef, } from "./types/schema";
 export { ArrayInput } from "./input/ArrayInput";
 export { Checkbox } from "./input/Checkbox";
 export { ColorInput } from "./input/ColorInput";
 export { ColorPicker } from "./input/ColorPicker";
+export { DateInput } from "./input/DateInput";
 export { Field } from "./input/Field";
 export { FileInput } from "./input/File";
 export { HiddenInput } from "./input/Hidden";
@@ -16,7 +18,7 @@ export { Number } from "./input/Number";
 export { Password } from "./input/Password";
 export { Radio } from "./input/Radio";
 export { RadioGroup } from "./input/RadioGroup";
-export { Range } from "./input/Range";
+export { RangeSlider } from "./input/RangeSlider";
 export { Search } from "./input/Search";
 export { Slider } from "./input/Slider";
 export { Switch } from "./input/Switch";

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

@@ -1,4 +1,4 @@
-import { type ReactNode, type RefObject } from "react";
+import { type ReactNode, type Ref } from "react";
 export interface ArrayInputProps {
     /**
      * input label
@@ -32,6 +32,10 @@ export interface ArrayInputProps {
      * minimum required length
      */
     minItems?: number;
+    /**
+     * maximum length
+     */
+    maxItems?: number;
     /**
      * field name to focus on add
      */
@@ -48,11 +52,12 @@ export interface ArrayInputProps {
      * add item button label
      */
     addLabel?: string;
+    buttonPosition?: "top" | "bottom" | "both";
     /**
      * fixed length list
      */
     fixedList?: boolean;
-    arrayRef?: RefObject<{
+    arrayRef?: Ref<{
         addItem: (item: AnyObject) => void;
         removeItem: (idx: number) => void;
     }>;
@@ -60,5 +65,17 @@ export interface ArrayInputProps {
      * Add item
      */
     onAdd?: () => AnyObject;
+    /**
+     * field width
+     */
+    width?: number | string;
+    /**
+     * inline label and input
+     */
+    inline?: boolean;
+    /**
+     * label width for inline
+     */
+    labelWidth?: string;
 }
-export declare const ArrayInput: ({ name, children, addLabel, fixedList, focusName, onAdd, arrayRef, enableSorting, disabled, readOnly, minItems, ...rest }: ArrayInputProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ArrayInput: ({ name, children, addLabel, fixedList, focusName, buttonPosition, onAdd, arrayRef, enableSorting, disabled, readOnly, minItems, maxItems, ...rest }: ArrayInputProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { type RefProp } from "@react-fabric/core/dist/types/types";
-export interface CheckboxProps extends RefProp<HTMLInputElement> {
+interface CheckboxProps extends RefProp<HTMLInputElement> {
     /**
      * checkbox label
      */
@@ -16,7 +16,7 @@ export interface CheckboxProps extends RefProp<HTMLInputElement> {
     /**
      * on checked change
      */
-    onChange?: (checked: boolean | string | number) => void;
+    onChange?: (checked: boolean) => void;
     /**
      * disabled input
      */
@@ -43,4 +43,5 @@ export interface CheckboxProps extends RefProp<HTMLInputElement> {
     iconChecked?: string;
     name?: string;
 }
-export declare const Checkbox: ({ ref, label, value, name, checked, invalid, disabled, error, width, icon, iconChecked, onChange, ...rest }: CheckboxProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Checkbox: ({ ref, label, value, name, checked, invalid, disabled, error, width, icon, iconChecked, required, onChange, ...rest }: CheckboxProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -1,7 +1,7 @@
 import { type RefProp } from "@react-fabric/core/dist/types/types";
 import { type InputProps } from "../types";
 import { type ColorProps } from "./ColorPicker";
-export interface ColorInputProps extends InputProps, ColorProps, RefProp {
+export interface ColorInputProps extends InputProps, Omit<ColorProps, "onChange">, RefProp {
     /**
      * show eydrop picker
      */

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

@@ -0,0 +1,19 @@
+import { type RefProp } from "@react-fabric/core/dist/types/types";
+import { type DateLike } from "@react-fabric/date";
+import { type InputProps } from "../types";
+export interface DateProps extends InputProps<string>, RefProp<HTMLInputElement> {
+    type?: "date" | "datetime";
+    /**
+     * date format
+     */
+    format?: string;
+    /**
+     * minimum value
+     */
+    min?: DateLike;
+    /**
+     * maximum value
+     */
+    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;

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { type CssProp, type ChildrenProp } from "@react-fabric/core/dist/types/types";
+import { type ChildrenProp, type CssProp } from "@react-fabric/core/dist/types/types";
 import { type Radio } from "./Radio";
 export interface RadioGroupProps extends ChildrenProp<typeof Radio>, CssProp {
     /**
@@ -14,6 +14,22 @@ export interface RadioGroupProps extends ChildrenProp<typeof Radio>, CssProp {
      * field info
      */
     info?: string;
+    /**
+     * field width
+     */
+    width?: number | string;
+    /**
+     * inline label and input
+     */
+    inline?: boolean;
+    /**
+     * label width for inline
+     */
+    labelWidth?: string;
+    /**
+     * label width for inline
+     */
+    optionWidth?: string;
     /**
      * field name
      */
@@ -27,4 +43,4 @@ export interface RadioGroupProps extends ChildrenProp<typeof Radio>, CssProp {
      */
     onChange?: (value: AnyObject) => void;
 }
-export declare const RadioGroup: ({ children, name, className, onChange, ...rest }: RadioGroupProps) => import("react/jsx-runtime").JSX.Element;
+export declare const RadioGroup: ({ children, name, className, optionWidth, onChange, ...rest }: RadioGroupProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/input/{Range.d.ts → RangeSlider.d.ts}

@@ -56,4 +56,4 @@ export interface RangeProps extends Omit<InputProps<[number, number]>, "placehol
 /**
  * Number Range input
  */
-export declare const Range: ({ error, name, value, step, min, max, height, color, vertical, showLabels, showValue, minLabel, maxLabel, ranges, format, autoFocus, disabled, readOnly, onBlur, onChange, onEnterPressed, onFocus, onSlide, invalid, ...rest }: RangeProps) => import("react/jsx-runtime").JSX.Element;
+export declare const RangeSlider: ({ error, name, value, step, min, max, height, color, vertical, showLabels, showValue, minLabel, maxLabel, ranges, format, autoFocus, disabled, readOnly, onBlur, onChange, onEnterPressed, onFocus, onSlide, invalid, ...rest }: RangeProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -32,11 +32,15 @@ export interface SwitchProps extends RefProp<HTMLInputElement> {
     /**
      * cutom Switch icon
      */
-    color?: ColorType;
+    color?: string | ColorType;
     /**
      * cutom Switch icon
      */
-    defaultColor?: ColorType;
+    defaultColor?: string | ColorType;
     name?: string;
+    onLabel?: string;
+    onLabelColor?: string | ColorType;
+    offLabel?: string;
+    offLabelColor?: string | ColorType;
 }
-export declare const Switch: ({ ref, label, checked, invalid, disabled, error, width, color, name, defaultColor, onChange, ...rest }: SwitchProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Switch: ({ ref, label, checked, invalid, disabled, error, width, color, name, onLabel, offLabel, onLabelColor, offLabelColor, defaultColor, required, onChange, ...rest }: SwitchProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -13,5 +13,9 @@ export interface TextareaProps extends InputProps, RefProp<HTMLTextAreaElement>
      * increment rows on value change
      */
     variableRows?: boolean;
+    /**
+     * expandable textarea
+     */
+    expandable?: boolean;
 }
-export declare const Textarea: ({ ref, value, name, invalid, readOnly, disabled, required, placeholder, autoFocus, rows, maxRows, variableRows, 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, onChange, onEnterPressed, ...rest }: TextareaProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/internal/InputWrapper.d.ts

@@ -1 +1 @@
-export declare const InputWrapper: ({ invalid, error, allowClear, showClear, decorateStart, decorateEnd, children, onClear, noOutline, noBorder, textarea, "data-inner": isInner, "data-open": isOpen, floatingExpand, wrapperRef, width, ...rest }: KeyValue) => import("react/jsx-runtime").JSX.Element;
+export declare const InputWrapper: ({ invalid, error, allowClear, showClear, decorateStart, decorateEnd, decorateEndShowWhenEmpty, decorateEndHideWhenEmpty, children, onClear, noOutline, noBorder, textarea, textareaExpandable, "data-inner": isInner, "data-open": isOpen, floatingExpand, wrapperRef, width, ...rest }: KeyValue) => 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, 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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { type RefProp } from "@react-fabric/core/dist/types/types";
-export interface InputProps<V = string> {
+import { type RefProp, type TestProps } from "@react-fabric/core/dist/types/types";
+export interface InputProps<V = string> extends TestProps {
     /**
      * value
      */
@@ -8,7 +8,7 @@ export interface InputProps<V = string> {
     /**
      * change handler
      */
-    onChange?: (value?: V) => void;
+    onChange?: (value: V | null) => void;
     /**
      * on focus event handler
      */
@@ -45,6 +45,8 @@ export interface InputProps<V = string> {
      *
      */
     decorateEnd?: JSX.Element | string | number | boolean;
+    decorateEndShowWhenEmpty?: boolean;
+    decorateEndHideWhenEmpty?: boolean;
     /**
      * info label at bottom
      */
@@ -90,7 +92,15 @@ export interface InputProps<V = string> {
      */
     labelWidth?: string;
 }
-export interface BaseSelectProps<T> extends RefProp<HTMLInputElement>, Omit<InputProps, "value" | "onChange"> {
+export interface BaseSelectProps<T extends AnyObject = string> {
+    /**
+     * open dropdown by default
+     */
+    defaultOpen?: boolean;
+    /**
+     * hide dropdown handle
+     */
+    hideHandle?: boolean;
     /**
      * list options
      */
@@ -132,7 +142,8 @@ export interface BaseSelectProps<T> extends RefProp<HTMLInputElement>, Omit<Inpu
      */
     matcher?: (option: T, query: string) => boolean;
 }
-export type SelectProps<T> = BaseSelectProps<T> & ({
+type BaseSelectType<T> = BaseSelectProps<T> & RefProp<HTMLInputElement> & Omit<InputProps, "value" | "onChange">;
+export type SelectProps<T> = BaseSelectType<T> & ({
     /**
      * is multiple selection
      */
@@ -167,3 +178,4 @@ export type SelectProps<T> = BaseSelectProps<T> & ({
      */
     onChange?: (value?: string[]) => void;
 });
+export {};