@react-fabric/form 1.0.0-beta.55 → 1.0.0-beta.57

package/dist/esm/select/Options.js

@@ -7,7 +7,7 @@ import classNames from 'classnames';
 import { Trans } from 'react-i18next';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
-var _excluded = ["ref", "style", "items", "active", "className", "itemRef", "empty", "valueProperty", "labelProperty", "itemProps", "children"];
+var _excluded = ["ref", "style", "items", "active", "className", "itemRef", "empty", "info", "valueProperty", "labelProperty", "itemProps", "children"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Options = function Options(_ref) {
@@ -17,7 +17,8 @@ var Options = function Options(_ref) {
     active = _ref.active,
     className = _ref.className,
     itemRef = _ref.itemRef,
-    empty = _ref.empty;
+    empty = _ref.empty,
+    info = _ref.info;
     _ref.valueProperty;
     var _ref$labelProperty = _ref.labelProperty,
     labelProperty = _ref$labelProperty === void 0 ? "label" : _ref$labelProperty,
@@ -26,49 +27,55 @@ var Options = function Options(_ref) {
     rest = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({
     ref: ref,
-    className: classNames("bg-base select-none overflow-x-hidden overflow-y-auto", className),
+    className: classNames("bg-base select-none flex flex-col", className),
     style: style
   }, rest), {}, {
-    children: [items.length === 0 && (empty !== null && empty !== void 0 ? empty : /*#__PURE__*/jsx(EmptyContent, {
-      message: /*#__PURE__*/jsx(Trans, {
-        i18nKey: "form:select.emptyList"
-      })
-    })), items.map(function (item, index) {
-      var _item$value, _item$labelProperty;
-      if (item.___group___) return /*#__PURE__*/jsx("p", {
-        className: "px-2 py-1 text-muted text-xs sticky -top-px z-2 bg-base border-t",
-        children: item.label
-      }, index);
-      if (item.___create___) return /*#__PURE__*/jsx("div", _objectSpread(_objectSpread({
-        role: "none",
-        tabIndex: active === index ? 0 : -1,
-        ref: function ref(el) {
-          return itemRef(index, el);
-        },
-        "data-active": active === index ? true : undefined,
-        className: classNames("block text-start truncate px-2 py-1 leading-normal cursor-pointer select-none", "data-[active]:bg-primary-200 data-[selected]:bg-primary-600 data-[selected]:text-white data-[active]:data-[selected]:underline")
-      }, itemProps(item)), {}, {
-        children: /*#__PURE__*/jsx(Trans, {
-          i18nKey: "form:select.createOption",
-          values: {
-            query: (_item$value = item.value) !== null && _item$value !== void 0 ? _item$value : item
-          },
-          components: [/*#__PURE__*/jsx("strong", {
-            children: "query"
-          }, "t0")]
+    children: [/*#__PURE__*/jsxs("div", {
+      className: classNames("overflow-x-hidden overflow-y-auto flex-1"),
+      children: [items.length === 0 && (empty !== null && empty !== void 0 ? empty : /*#__PURE__*/jsx(EmptyContent, {
+        message: /*#__PURE__*/jsx(Trans, {
+          i18nKey: "form:select.emptyList"
         })
-      }), index);
-      return /*#__PURE__*/jsx("div", _objectSpread(_objectSpread({
-        role: "none",
-        tabIndex: active === index ? 0 : -1,
-        ref: function ref(el) {
-          return itemRef(index, el);
-        },
-        "data-active": active === index ? true : undefined,
-        className: classNames("block text-start truncate px-2 py-1 leading-normal cursor-pointer", "data-[active]:bg-primary-200 data-[selected]:bg-primary-600 data-[selected]:text-white data-[active]:data-[selected]:underline")
-      }, itemProps(item)), {}, {
-        children: children(item, (_item$labelProperty = item[labelProperty]) !== null && _item$labelProperty !== void 0 ? _item$labelProperty : item)
-      }), index);
+      })), items.map(function (item, index) {
+        var _item$value, _item$labelProperty;
+        if (item.___group___) return /*#__PURE__*/jsx("p", {
+          className: "px-2 py-1 text-muted text-xs sticky -top-px z-2 bg-base border-t",
+          children: item.label
+        }, index);
+        if (item.___create___) return /*#__PURE__*/jsx("div", _objectSpread(_objectSpread({
+          role: "none",
+          tabIndex: active === index ? 0 : -1,
+          ref: function ref(el) {
+            return itemRef(index, el);
+          },
+          "data-active": active === index ? true : undefined,
+          className: classNames("block text-start truncate px-2 py-1 leading-normal cursor-pointer select-none", "data-[active]:bg-primary-200 data-[selected]:bg-primary-600 data-[selected]:text-white data-[active]:data-[selected]:underline")
+        }, itemProps(item)), {}, {
+          children: /*#__PURE__*/jsx(Trans, {
+            i18nKey: "form:select.createOption",
+            values: {
+              query: (_item$value = item.value) !== null && _item$value !== void 0 ? _item$value : item
+            },
+            components: [/*#__PURE__*/jsx("strong", {
+              children: "query"
+            }, "t0")]
+          })
+        }), index);
+        return /*#__PURE__*/jsx("div", _objectSpread(_objectSpread({
+          role: "none",
+          tabIndex: active === index ? 0 : -1,
+          ref: function ref(el) {
+            return itemRef(index, el);
+          },
+          "data-active": active === index ? true : undefined,
+          className: classNames("block text-start truncate px-2 py-1 leading-normal cursor-pointer", "data-[active]:bg-primary-200 data-[selected]:bg-primary-600 data-[selected]:text-white data-[active]:data-[selected]:underline")
+        }, itemProps(item)), {}, {
+          children: children(item, (_item$labelProperty = item[labelProperty]) !== null && _item$labelProperty !== void 0 ? _item$labelProperty : item)
+        }), index);
+      })]
+    }), info && /*#__PURE__*/jsx("div", {
+      className: "px-2 py-1 text-sm bg-dimmed text-muted",
+      children: info
     })]
   }));
 };

package/dist/esm/select/Select.js

@@ -12,11 +12,11 @@ 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", "defaultOpen", "hideHandle", "groupProperty", "labelProperty", "valueProperty", "sortProperty", "multiple", "searchable", "allowCreate", "emptyDisplay", "createOption", "matcher", "renderer", "onQuery", "onChange", "onSelect", "onEnterPressed"];
+var _excluded = ["ref", "name", "value", "invalid", "readOnly", "disabled", "required", "placeholder", "autoFocus", "error", "options", "defaultOpen", "hideHandle", "groupProperty", "labelProperty", "valueProperty", "sortProperty", "infoProperty", "multiple", "searchable", "allowCreate", "emptyDisplay", "createOption", "matcher", "renderer", "onQuery", "onChange", "onSelect", "onEnterPressed"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Select = function Select(_ref) {
-  var _state$query, _refs$reference$curre;
+  var _state$query, _refs$reference$curre, _state$activeItem;
   var ref = _ref.ref,
     name = _ref.name,
     value = _ref.value,
@@ -36,6 +36,7 @@ var Select = function Select(_ref) {
     _ref$valueProperty = _ref.valueProperty,
     valueProperty = _ref$valueProperty === void 0 ? "id" : _ref$valueProperty,
     sortProperty = _ref.sortProperty,
+    infoProperty = _ref.infoProperty,
     multiple = _ref.multiple,
     searchable = _ref.searchable,
     allowCreate = _ref.allowCreate,
@@ -280,6 +281,7 @@ var Select = function Select(_ref) {
           itemRef: setItemRef,
           itemProps: makeItemProps,
           empty: emptyDisplay,
+          info: (_state$activeItem = state.activeItem) === null || _state$activeItem === void 0 ? void 0 : _state$activeItem[infoProperty !== null && infoProperty !== void 0 ? infoProperty : "info"],
           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/useSelect.js

@@ -14,9 +14,11 @@ var useSelect = function useSelect(_ref) {
   var _ref$options = _ref.options,
     options = _ref$options === void 0 ? EMPTY_ARRAY : _ref$options,
     value = _ref.value,
+    autoComplete = _ref.autoComplete,
+    _ref$alwaysOpen = _ref.alwaysOpen,
+    alwaysOpen = _ref$alwaysOpen === void 0 ? false : _ref$alwaysOpen,
     _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,
     _ref$allowCreate = _ref.allowCreate,
@@ -66,13 +68,16 @@ var useSelect = function useSelect(_ref) {
       if (action.type === "close") {
         return _objectSpread(_objectSpread({}, state), {}, {
           activeIndex: null,
+          activeItem: null,
           open: false
         });
       }
       if (action.type === "active" && state.open) {
+        var _action$index;
         if (autoComplete && action.index !== null) state.query = state.items[action.index];
         return _objectSpread(_objectSpread({}, state), {}, {
-          activeIndex: action.index
+          activeIndex: action.index,
+          activeItem: state.items[(_action$index = action.index) !== null && _action$index !== void 0 ? _action$index : -1]
         });
       }
       if (action.type === "setValue") {
@@ -86,6 +91,7 @@ var useSelect = function useSelect(_ref) {
         var newState = _objectSpread(_objectSpread({}, state), {}, {
           value: state.emptyValue,
           activeIndex: null,
+          activeItem: null,
           selectedIndex: autoComplete ? state.multiple ? (_action$value = action.value) === null || _action$value === void 0 ? void 0 : _action$value.length : 0 : state.items.indexOf(action.value)
         });
         if (action.value !== undefined) {
@@ -103,16 +109,16 @@ var useSelect = function useSelect(_ref) {
             newState.value = action.value;
           }
         }
-        if (!state.multiple) newState.open = false;
+        if (!state.multiple) newState.open = alwaysOpen;
         fireChange(newState.value);
         return newState;
       }
       if (action.type === "removeItem") {
         var newValue = state.value;
         if (state.multiple) {
-          var _action$index;
+          var _action$index2;
           newValue = _toConsumableArray(newValue);
-          newValue.splice((_action$index = action.index) !== null && _action$index !== void 0 ? _action$index : -1, 1);
+          newValue.splice((_action$index2 = action.index) !== null && _action$index2 !== void 0 ? _action$index2 : -1, 1);
         } else {
           newValue = "";
         }
@@ -173,9 +179,10 @@ var useSelect = function useSelect(_ref) {
     }, {
       multiple: multiple,
       emptyValue: emptyValue,
-      open: defaultOpen,
+      open: alwaysOpen || defaultOpen,
       loading: false,
       activeIndex: null,
+      activeItem: null,
       selectedIndex: null,
       value: emptyValue,
       // filter
@@ -320,7 +327,7 @@ var useSelect = function useSelect(_ref) {
     });
   }, []);
   var setActiveIndex = useCallback(function (index) {
-    dispatch({
+    index && index > -1 && dispatch({
       type: "active",
       index: index
     });

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

@@ -9,6 +9,10 @@ export interface Props extends RefProp {
      * actual avatar storage path
      */
     value?: string;
+    /**
+     * default avatar image
+     */
+    defaultValue?: string;
     /**
      * avatar name
      */
@@ -39,4 +43,4 @@ export interface Props extends RefProp {
  * @param {Props} props - The properties for the AvatarInput component.
  * @returns {JSX.Element} - The rendered AvatarInput component.
  */
-export declare const AvatarInput: ({ size, avatarName, value, fileUrl, uploadHandler, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const AvatarInput: ({ size, avatarName, value, defaultValue, fileUrl, uploadHandler, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;

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

@@ -25,4 +25,4 @@ export interface DateProps extends InputProps<string>, RefProp<HTMLInputElement>
  * @param {DateProps} props - The properties for the DateInput component.
  * @returns {JSX.Element} - The rendered DateInput component.
  */
-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;
+export declare const DateInput: ({ ref, name, value, invalid, readOnly, disabled, required, placeholder, defaultValue, autoFocus, error, type, onBlur, onFocus, onChange, onEnterPressed, format, min, max, ...rest }: DateProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -7,6 +7,10 @@ interface Props {
      * hidden value will fire change for form update
      */
     hiddenValue?: AnyObject;
+    /**
+     * default avatar image
+     */
+    defaultValue?: string;
     /**
      * form onChange handler
      */
@@ -20,5 +24,5 @@ interface Props {
  * @param {Object} props - Component properties.
  * @returns {JSX.Element} The rendered hidden input field and error icon.
  */
-export declare const HiddenInput: ({ hiddenValue, onChange, invalid, error, value, name, }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const HiddenInput: ({ hiddenValue, defaultValue, onChange, invalid, error, value, name, }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -14,4 +14,4 @@ export interface TextInputProps extends InputProps, RefProp<HTMLInputElement> {
  * @param {TextInputProps} props - The properties for the text input component.
  * @returns {JSX.Element} - A JSX element representing the text input field.
  */
-export declare const Input: ({ ref, name, value, invalid, readOnly, disabled, required, placeholder, autoFocus, error, monospace, type, onBlur, onFocus, onChange, onEnterPressed, ...rest }: TextInputProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Input: ({ ref, name, value, invalid, readOnly, disabled, required, placeholder, defaultValue, autoFocus, error, monospace, type, onBlur, onFocus, onChange, onEnterPressed, ...rest }: TextInputProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -22,4 +22,4 @@ export interface NumberProps extends InputProps<number>, RefProp<HTMLInputElemen
  * @param {NumberProps} props - The properties for the Number input component.
  * @returns {JSX.Element} The rendered Number input component.
  */
-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;
+export declare const Number: ({ ref, value, invalid, readOnly, disabled, required, placeholder, defaultValue, autoFocus, name, min, max, step, onBlur, onFocus, onChange, onEnterPressed, ...rest }: NumberProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -16,4 +16,4 @@ export interface PasswordProps extends InputProps, RefProp<HTMLInputElement> {
  * @param {PasswordProps} props - The properties for the Password component.
  * @returns {JSX.Element} The rendered Password input component.
  */
-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;
+export declare const Password: ({ ref, value, name, strength, invalid, readOnly, disabled, required, placeholder, defaultValue, autoFocus, showToggle, onBlur, onFocus, onChange, onEnterPressed, ...rest }: PasswordProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,5 +1,5 @@
 import { type InputProps } from "../types";
-export interface RangeProps extends Omit<InputProps<[number, number]>, "placeholder" | "allowClear" | "children"> {
+export interface RangeProps extends Omit<InputProps<[number, number]>, "placeholder" | "allowClear" | "children" | "defaultValue"> {
     /**
      * min value
      */

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

@@ -27,4 +27,4 @@ export interface SearchProps extends InputProps, RefProp<HTMLInputElement> {
  * @param {SearchProps} props - The properties for the Search component.
  * @returns {JSX.Element} The rendered Search input component.
  */
-export declare const Search: ({ ref, value, name, invalid, readOnly, disabled, required, searching, placeholder, autoFocus, hideHandle, allowClear, searchOnChange, onBlur, onFocus, onSearch, onChange, onEnterPressed, ...rest }: SearchProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Search: ({ ref, value, name, invalid, readOnly, disabled, required, searching, placeholder, defaultValue, autoFocus, hideHandle, allowClear, searchOnChange, onBlur, onFocus, onSearch, onChange, onEnterPressed, ...rest }: SearchProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,5 +1,5 @@
 import { type InputProps } from "../types";
-export interface SliderProps extends Omit<InputProps<number>, "placeholder" | "allowClear" | "children"> {
+export interface SliderProps extends Omit<InputProps<number>, "placeholder" | "allowClear" | "children" | "defaultValue"> {
     /**
      * min value
      */

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

@@ -28,4 +28,4 @@ export interface TextareaProps extends InputProps, RefProp<HTMLTextAreaElement>
  * @param {TextareaProps} props - The properties for the Textarea component.
  * @returns {JSX.Element} The rendered Textarea component.
  */
-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;
+export declare const Textarea: ({ ref, value, name, invalid, readOnly, disabled, required, placeholder, defaultValue, autoFocus, rows, maxRows, variableRows, expandable, onBlur, onFocus, onChange, onEnterPressed, ...rest }: TextareaProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -7,6 +7,6 @@ import { type SelectProps } from "../types";
  * @param {SelectProps<T>} props - The properties for the List component.
  * @returns {JSX.Element} The rendered List component.
  */
-export declare const List: <T extends AnyObject = string>({ ref, name, value, readOnly, disabled, required, placeholder, autoFocus, options, height, groupProperty, labelProperty, valueProperty, sortProperty, multiple, allowCreate, searchable, createOption, matcher, renderer, onQuery, onChange, onSelect, onEnterPressed, emptyDisplay, invalid, error, allowClear, decorateStart, decorateEnd, "data-inner": isInner, "data-hide-selected": hideSelected, ...rest }: Omit<SelectProps<T>, "defaultOpen" | "hideHandle"> & {
+export declare const List: <T extends AnyObject = string>({ ref, name, value, readOnly, disabled, required, placeholder, autoFocus, options, height, groupProperty, labelProperty, valueProperty, infoProperty, sortProperty, multiple, allowCreate, searchable, createOption, matcher, renderer, onQuery, onChange, onSelect, onEnterPressed, emptyDisplay, invalid, error, allowClear, decorateStart, decorateEnd, "data-inner": isInner, "data-hide-selected": hideSelected, ...rest }: Omit<SelectProps<T>, "defaultOpen" | "hideHandle"> & {
     height?: string | number;
 }) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,6 +1,7 @@
 import { type ReactElement, type ReactNode } from "react";
-export declare const Options: ({ ref, style, items, active, className, itemRef, empty, valueProperty, labelProperty, itemProps, children, ...rest }: {
+export declare const Options: ({ ref, style, items, active, className, itemRef, empty, info, valueProperty, labelProperty, itemProps, children, ...rest }: {
     ref: AnyObject;
+    info?: AnyObject;
     itemRef: AnyObject;
     style?: AnyObject;
     items: AnyObject[];

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

@@ -7,4 +7,4 @@ import { type SelectProps } from "../types";
  * @param {SelectProps<T>} props - The properties for the Select component.
  * @returns {JSX.Element} The rendered Select component.
  */
-export declare const Select: <T extends AnyObject = string>({ ref, name, value, invalid, readOnly, disabled, required, placeholder, autoFocus, error, options, defaultOpen, hideHandle, groupProperty, labelProperty, valueProperty, sortProperty, multiple, searchable, allowCreate, emptyDisplay, createOption, matcher, renderer, onQuery, onChange, onSelect, onEnterPressed, ...rest }: SelectProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const Select: <T extends AnyObject = string>({ ref, name, value, invalid, readOnly, disabled, required, placeholder, autoFocus, error, options, defaultOpen, hideHandle, groupProperty, labelProperty, valueProperty, sortProperty, infoProperty, multiple, searchable, allowCreate, emptyDisplay, createOption, matcher, renderer, onQuery, onChange, onSelect, onEnterPressed, ...rest }: SelectProps<T>) => import("react/jsx-runtime").JSX.Element;

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

@@ -4,15 +4,17 @@ interface State {
     open: boolean;
     loading: boolean;
     activeIndex: number | null;
+    activeItem: AnyObject;
     selectedIndex: number | null;
     value: AnyObject;
     query?: string;
     items: AnyObject[];
 }
-export declare const useSelect: ({ options, value, defaultOpen, autoComplete, multiple, allowCreate, groupProperty, valueProperty, labelProperty, sortProperty, createOption, matcher, onQuery, onChange, onSelect, }: {
+export declare const useSelect: ({ options, value, autoComplete, alwaysOpen, defaultOpen, multiple, allowCreate, groupProperty, valueProperty, labelProperty, sortProperty, createOption, matcher, onQuery, onChange, onSelect, }: {
     value?: AnyObject;
     options?: AnyObject[];
     multiple?: boolean;
+    alwaysOpen?: boolean;
     defaultOpen?: boolean;
     allowCreate?: boolean;
     groupProperty?: AnyObject;
@@ -29,6 +31,7 @@ export declare const useSelect: ({ options, value, defaultOpen, autoComplete, mu
     state: State | {
         value: any;
         activeIndex: null;
+        activeItem: null;
         selectedIndex: any;
         multiple: boolean;
         emptyValue: AnyObject;

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

@@ -5,6 +5,10 @@ export interface InputProps<V = string> extends TestProps {
      * value
      */
     value?: V | null;
+    /**
+     * default value
+     */
+    defaultValue?: V | null;
     /**
      * change handler
      */
@@ -118,6 +122,10 @@ export interface BaseSelectProps<T extends AnyObject = string> {
      * value property name
      */
     valueProperty?: keyof T;
+    /**
+     * value property name
+     */
+    infoProperty?: keyof T;
     /**
      * value property name
      */

package/package.json

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

package/src/builder/FileField.tsx

@@ -21,7 +21,13 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { Button, Icon, ProgressBar, Tooltip } from "@react-fabric/core";
+import {
+  Button,
+  CoreIcons,
+  Icon,
+  ProgressBar,
+  Tooltip,
+} from "@react-fabric/core";
 import { FileUtil, Format, isString } from "@react-fabric/utilities";
 import { Fragment } from "react";
 import { useTranslation } from "react-i18next";
@@ -118,7 +124,7 @@ export const FileField = ({
               </div>
               {file.progress && (
                 <Icon
-                  icon="mdi mdi-stop-circle"
+                  icon={CoreIcons.stop}
                   bg="danger"
                   color="white"
                   size="sm"
@@ -129,7 +135,7 @@ export const FileField = ({
               )}
               {!file.progress && (
                 <Icon
-                  icon="mdi mdi-trash-can"
+                  icon={CoreIcons.trash}
                   color="danger"
                   size="sm"
                   aria-label="remove"

package/src/input/AvatarInput.tsx

@@ -21,7 +21,7 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { Avatar, Icon, ProgressBar } from "@react-fabric/core";
+import { Avatar, CoreIcons, Icon, ProgressBar } from "@react-fabric/core";
 import { type RefProp } from "@react-fabric/core/dist/types/types";
 import { useEffect, useState } from "react";
 import { useFileUploader, type UploadHandler } from "../hooks/useFileUploader";
@@ -36,6 +36,10 @@ export interface Props extends RefProp {
    * actual avatar storage path
    */
   value?: string;
+  /**
+   * default avatar image
+   */
+  defaultValue?: string;
   /**
    * avatar name
    */
@@ -71,6 +75,7 @@ export const AvatarInput = ({
   size = "6rem",
   avatarName,
   value,
+  defaultValue,
   fileUrl,
   uploadHandler,
   ...rest
@@ -99,16 +104,19 @@ export const AvatarInput = ({
         })
       );
     } else {
-      setBase64("");
+      setBase64(fileUrl?.(defaultValue ?? "") ?? defaultValue ?? "");
     }
-  }, [files, list]);
+  }, [files, list, defaultValue]);
 
   useEffect(() => {
+    !value &&
+      defaultValue &&
+      setBase64(fileUrl?.(defaultValue) ?? defaultValue);
     value && setBase64(fileUrl?.(value) ?? value);
-  }, [value]);
+  }, [value, defaultValue]);
 
   return (
-    <div className="flex flex-nowrap items-end">
+    <div className="flex flex-nowrap items-end overflow-hidden">
       <div className="inline-block leading-none rounded-full relative outline overflow-hidden">
         <Avatar name={avatarName ?? "temp"} size={size} avatar={base64} />
         <div className="absolute inset-x-0 bottom-0 cursor-pointer bg-black/20 hover:bg-black/50 text-white text-xs text-center py-1">
@@ -121,11 +129,14 @@ export const AvatarInput = ({
           />
         </div>
       </div>
-      <HiddenInput hiddenValue={list?.[0]?.path} {...rest} />
+      <HiddenInput
+        hiddenValue={list?.[0]?.path}
+        defaultValue={defaultValue}
+        {...rest}
+      />
       {files.map((file, idx) => (
-        <div key={idx} className="px-2 py-1 flex-1">
+        <div key={idx} className="px-2 py-1 flex-1 overflow-hidden">
           <div className="flex flex-nowrap gap-1 items-center">
-            <div className="flex-initial truncate pe-2">{file.filename}</div>
             {file.error && (
               <div className="flex-1 truncate px-2">
                 <span className="text-danger-600">{file.error}</span>
@@ -133,20 +144,21 @@ export const AvatarInput = ({
             )}
             {file.progress && (
               <Icon
-                icon="mdi mdi-stop-circle"
+                icon={CoreIcons.stop}
                 bg="danger"
                 color="white"
                 size="sm"
-                className="p-[2px]"
+                className="p-[2px] flex-content"
                 aria-label="abort"
                 onClick={() => file.abort?.()}
               />
             )}
             {!file.progress && (
               <Icon
-                icon="mdi mdi-trash-can"
+                icon={CoreIcons.trash}
                 color="danger"
                 size="sm"
+                className="flex-content"
                 aria-label="remove"
                 onClick={() => remove(file.key)}
               />

package/src/input/ColorInput.tsx

@@ -96,10 +96,11 @@ export const ColorInput = ({
 
   const handleChange = useCallback(
     (e?: string) => {
-      setActualValue(e ?? defaultColor);
-      onChange != null && startTransition(() => onChange(e ?? null));
+      const value = e ?? defaultColor;
+      setActualValue(value);
+      onChange != null && startTransition(() => onChange(value ?? null));
     },
-    [onChange],
+    [onChange, defaultColor],
   );
 
   const arrowRef = useRef(null);
@@ -147,6 +148,7 @@ export const ColorInput = ({
     >
       <button
         data-ref="button"
+        type="button"
         className="flex-1 flex items-center"
         ref={refs.setReference}
         {...getReferenceProps({
@@ -200,6 +202,7 @@ export const ColorInput = ({
       )}
       {!disabled && showPicker && (
         <Icon
+          className="flex-content p-1"
           icon={CoreIcons.colorPicker}
           onClick={() =>
             (window as AnyObject).EyeDropper &&

package/src/input/DateInput.tsx

@@ -88,6 +88,7 @@ export const DateInput = ({
   disabled,
   required,
   placeholder,
+  defaultValue,
   autoFocus,
   error,
   type = "date",
@@ -102,7 +103,7 @@ export const DateInput = ({
 }: DateProps) => {
   const [actualValue, setActualValue] = useState("");
   const [inputValue, setInputValue] = useState("");
-  const deferred = useDeferredValue(value);
+  const deferred = useDeferredValue(value ?? defaultValue);
 
   const inputFormat = useMemo(
     () => (type === "datetime" ? "yyyy-MM-dd HH:mm" : "yyyy-MM-dd"),
@@ -118,7 +119,7 @@ export const DateInput = ({
 
   const handleChange = useCallback(
     (e?: ChangeEvent<HTMLInputElement>) => {
-      const value = e?.currentTarget.value;
+      const value = e?.currentTarget.value ?? defaultValue;
       if (value) {
         const parsed = DateUtil.parseDate(value);
         setActualValue(parsed?.toISOString?.());
@@ -131,7 +132,7 @@ export const DateInput = ({
         onChange != null && startTransition(() => onChange(null));
       }
     },
-    [onChange, inputFormat],
+    [onChange, inputFormat, defaultValue],
   );
 
   const handleDateChange = useCallback(