@react-fabric/form 1.0.0-beta.6 → 1.0.0-beta.61

package/dist/esm/input/Search.js

@@ -3,16 +3,25 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import { useDebounce, Icon, CoreIcons, Button } from '@react-fabric/core';
-import { useState, useDeferredValue, useRef, useMemo, useEffect, useCallback, Fragment } from 'react';
+import { useDebounce, Icon, Button } from '@react-fabric/core';
+import { useState, useDeferredValue, useRef, useEffect, useCallback, Fragment } from 'react';
 import { InputWrapper } from '../internal/InputWrapper.js';
-import { handleEnter } from '../utils/eventHandlers.js';
+import { useHandleEnter } from '../utils/eventHandlers.js';
 import '@react-fabric/utilities';
 import { jsx, 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", "defaultValue", "autoFocus", "hideHandle", "allowClear", "searchOnChange", "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; }
+/**
+ * Search input component with optional searching state and search handler.
+ * This component allows users to input search queries and trigger a search action.
+ * It supports features like searching on value change, showing a search handle,
+ * and handling search actions with a debounce mechanism.
+ *
+ * @param {SearchProps} props - The properties for the Search component.
+ * @returns {JSX.Element} The rendered Search input component.
+ */
 var Search = function Search(_ref) {
   var ref = _ref.ref,
     value = _ref.value,
@@ -23,13 +32,15 @@ var Search = function Search(_ref) {
     required = _ref.required,
     searching = _ref.searching,
     placeholder = _ref.placeholder,
+    defaultValue = _ref.defaultValue,
     autoFocus = _ref.autoFocus,
+    hideHandle = _ref.hideHandle,
     _ref$allowClear = _ref.allowClear,
     allowClear = _ref$allowClear === void 0 ? true : _ref$allowClear,
     _ref$searchOnChange = _ref.searchOnChange,
-    searchOnChange = _ref$searchOnChange === void 0 ? true : _ref$searchOnChange,
-    decorateEnd = _ref.decorateEnd,
-    decorateStart = _ref.decorateStart,
+    searchOnChange = _ref$searchOnChange === void 0 ? false : _ref$searchOnChange,
+    onBlur = _ref.onBlur,
+    onFocus = _ref.onFocus,
     onSearch = _ref.onSearch,
     onChange = _ref.onChange;
     _ref.onEnterPressed;
@@ -38,54 +49,51 @@ var Search = function Search(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     actualValue = _useState2[0],
     setActualValue = _useState2[1];
-  var deferred = useDeferredValue(value);
+  var deferred = useDeferredValue(value !== null && value !== void 0 ? value : defaultValue);
   var refValue = useRef("");
   var handleSearch = useDebounce(function () {
     return onSearch === null || onSearch === void 0 ? void 0 : onSearch(refValue.current);
   }, [onSearch], 250);
-  var handleEnterPressed = useMemo(function () {
-    return handleEnter(handleSearch);
-  }, [handleSearch]);
+  var handleEnterPressed = useHandleEnter(handleSearch);
   useEffect(function () {
     setActualValue(deferred !== null && deferred !== void 0 ? deferred : "");
   }, [deferred]);
   var handleChange = useCallback(function (e) {
-    var value = e === null || e === void 0 ? void 0 : e.target.value;
+    var _e$target$value;
+    var value = (_e$target$value = e === null || e === void 0 ? void 0 : e.target.value) !== null && _e$target$value !== void 0 ? _e$target$value : defaultValue;
     refValue.current = value !== null && value !== void 0 ? value : "";
     setActualValue(value !== null && value !== void 0 ? value : "");
-    onChange === null || onChange === void 0 || onChange(value !== null && value !== void 0 ? value : undefined);
+    onChange === null || onChange === void 0 || onChange(value !== null && value !== void 0 ? value : null);
 
-    // value was cleared so force fire onSearch
-    if (searchOnChange) {
+    // when e is undefined value was cleared so force fire onSearch
+    if (!e || searchOnChange) {
       handleSearch();
     }
-  }, [onChange, searchOnChange, handleSearch]);
+  }, [onChange, searchOnChange, handleSearch, defaultValue]);
   return /*#__PURE__*/jsx(InputWrapper, _objectSpread(_objectSpread({
-    showClear: !!actualValue,
+    showClear: !!actualValue && !disabled && !readOnly,
     onClear: handleChange,
     allowClear: allowClear,
     invalid: invalid,
     readOnly: readOnly,
     disabled: disabled,
     required: required,
-    decorateStart: decorateStart,
-    decorateEnd: /*#__PURE__*/jsxs(Fragment, {
-      children: [decorateEnd, searching && /*#__PURE__*/jsx(Icon, {
+    actionButton: /*#__PURE__*/jsxs(Fragment, {
+      children: [searching && /*#__PURE__*/jsx(Icon, {
         className: "p-2",
-        icon: CoreIcons.spinner,
-        animate: "spin"
-      }), !searching && /*#__PURE__*/jsx(Button, {
+        icon: "icon-[svg-spinners--eclipse]"
+      }), !searching && !hideHandle && /*#__PURE__*/jsx(Button, {
         tabIndex: -1,
         variant: "link",
         "aria-label": "search",
         disabled: !actualValue,
-        icon: CoreIcons.search,
+        icon: "icon-[mdi--magnify]",
         onClick: handleSearch
       })]
     })
   }, rest), {}, {
     children: /*#__PURE__*/jsx("input", {
-      className: "appearance-none bg-transparent py-1 px-2 flex-1 border-none outline-none ring-0",
+      className: "appearance-none bg-transparent py-1 px-2 flex-1 border-none outline-none ring-0 peer",
       "aria-invalid": invalid,
       "aria-disabled": disabled,
       "aria-readonly": readOnly,
@@ -100,6 +108,8 @@ var Search = function Search(_ref) {
       autoComplete: "off",
       autoFocus: autoFocus,
       value: actualValue,
+      onBlur: onBlur,
+      onFocus: onFocus,
       onChange: handleChange,
       onKeyDown: handleEnterPressed
     })

package/dist/esm/input/Slider.js

@@ -14,7 +14,13 @@ var _excluded = ["error", "name", "value", "step", "min", "max", "height", "colo
 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; }
 /**
- * Number slider input
+ * Slider component for rendering a slider input with labels and value display.
+ * It supports vertical orientation, custom min/max labels, and step ranges.
+ * The component handles value changes, displays tooltips, and integrates with ranger for slider functionality.
+ * It also supports deferred value updates for smoother interactions.
+ *
+ * @param {SliderProps} props - The properties for the Slider component.
+ * @returns {JSX.Element} The rendered Slider component.
  */
 var Slider = function Slider(_ref) {
   var error = _ref.error;
@@ -73,7 +79,7 @@ var Slider = function Slider(_ref) {
   var handleChange = useCallback(function (value) {
     var val = useInfinity && value === max ? Infinity : value;
     setActualValue(val !== null && val !== void 0 ? val : 0);
-    onChange === null || onChange === void 0 || onChange(val !== null && val !== void 0 ? val : undefined);
+    onChange === null || onChange === void 0 || onChange(val !== null && val !== void 0 ? val : null);
   }, [onChange, max, useInfinity]);
   var minDisplay = useMemo(function () {
     return /*#__PURE__*/jsx("span", {
@@ -116,14 +122,14 @@ var Slider = function Slider(_ref) {
     isReadOnly: readOnly,
     canClear: !!actualValue,
     children: /*#__PURE__*/jsxs("div", {
-      className: classNames("flex-auto order-3 flex items-center select-none relative z-0", vertical && "flex-col w-8", invalid ? "text-danger-500" : "text-primary-600"),
+      className: classNames("flex-1 order-3 flex items-center select-none relative z-0", vertical && "flex-col w-8", invalid ? "text-danger-500" : "text-primary-600"),
       "data-vertical": !!vertical,
       style: invalid ? undefined : {
         color: color
       },
       children: [showLabels && (vertical ? maxDisplay : minDisplay), /*#__PURE__*/jsxs("div", {
         ref: rangerInstance.trackElRef,
-        className: classNames("flex-auto relative flex items-center", vertical ? "my-2 w-8" : "mx-2 h-8"),
+        className: classNames("relative flex items-center", vertical ? "my-2 w-8" : "flex-1 mx-2 h-8"),
         style: {
           height: vertical ? height : undefined
         },
@@ -132,7 +138,7 @@ var Slider = function Slider(_ref) {
             var key = _ref2.key,
             styles = _ref2.styles;
           return /*#__PURE__*/jsx("div", {
-            className: classNames("absolute inline-block h-1 w-1 rounded-sm bg-invert opacity-30 leading-[0] z-1", vertical && "left-1/2 -ml-0.5"),
+            className: classNames("absolute inline-block h-1 w-1 rounded-sm bg-invert opacity-30 leading-0 z-1", vertical && "left-1/2 -ml-0.5"),
             style: styles
           }, key);
         }), rangerInstance.segments.map(function (_ref3) {
@@ -157,7 +163,7 @@ var Slider = function Slider(_ref) {
             }, props), {}, {
               style: styles
             })), displayValue && /*#__PURE__*/jsx("div", {
-              className: classNames("bg-invert text-invert py-px px-2 text-xs absolute rounded z-[5] whitespace-nowrap", "before:absolute before:h-1.5 before:w-1.5 before:z-[-1] before:bg-invert before:top-1/2 before:-translate-y-1/2 before:rotate-45", vertical ? "end-0 ltr:translate-x-full rtl:-translate-x-full translate-y-2" : "top-1/2 -translate-y-1/2", !vertical && (percentage > 50 ? "-ms-3 ltr:-translate-x-full rtl:translate-x-full ltr:before:translate-x-[0.125rem] rtl:before:-translate-x-[0.125rem] before:end-0" : "ms-3 ltr:before:-translate-x-[0.125rem] rtl:before:translate-x-[0.125rem] before:start-0")),
+              className: classNames("bg-invert text-invert py-px px-2 text-xs absolute rounded z-5 whitespace-nowrap pointer-events-none", "before:absolute before:h-1.5 before:w-1.5 before:z-[-1] before:bg-invert before:top-1/2 before:-translate-y-1/2 before:rotate-45", vertical ? "end-0 ltr:translate-x-full rtl:-translate-x-full translate-y-2 ltr:before:-translate-x-0.5 rtl:before:translate-x-0.5 before:start-0" : "top-1/2 -translate-y-1/2", !vertical && (percentage > 50 ? "-ms-3 ltr:-translate-x-full rtl:translate-x-full ltr:before:translate-x-0.5 rtl:before:-translate-x-0.5 before:end-0" : "ms-3 ltr:before:-translate-x-0.5 rtl:before:translate-x-0.5 before:start-0")),
               "data-align": percentage > 50 ? "start" : "end",
               style: valueStyles,
               children: value === Infinity || useInfinity && value === max ? maxLabel !== null && maxLabel !== void 0 ? maxLabel : "∞" : Format.number(value, format)

package/dist/esm/input/Switch.js

@@ -6,13 +6,23 @@ import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProper
 import classNames from 'classnames';
 import { useState, useDeferredValue, useEffect, useCallback, Fragment } from 'react';
 import { ErrorIcon } from '../internal/ErrorIcon.js';
-import '@react-fabric/utilities';
+import '@floating-ui/react';
+import '@react-fabric/core';
 import { getBgClass, getColor, getColorClass } from '../utils/getColor.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
-var _excluded = ["ref", "label", "checked", "invalid", "disabled", "error", "width", "color", "name", "onLabel", "offLabel", "onLabelColor", "offLabelColor", "defaultColor", "onChange"];
+var _excluded = ["ref", "label", "checked", "invalid", "disabled", "error", "width", "color", "name", "onLabel", "offLabel", "onLabelColor", "offLabelColor", "defaultColor", "required", "onChange"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+/**
+ * Switch input component with custom labels and colors.
+ * This component renders a switch input with optional labels for the "on" and "off" states,
+ * and allows for custom colors for the switch background and labels.
+ * It supports disabled and invalid states, and handles change events.
+ *
+ * @param {SwitchProps} props - The properties for the Switch component.
+ * @returns {JSX.Element} The rendered Switch input component.
+ */
 var Switch = function Switch(_ref) {
   var ref = _ref.ref,
     label = _ref.label,
@@ -27,8 +37,9 @@ var Switch = function Switch(_ref) {
     offLabel = _ref.offLabel,
     onLabelColor = _ref.onLabelColor,
     offLabelColor = _ref.offLabelColor,
-    defaultColor = _ref.defaultColor,
-    onChange = _ref.onChange,
+    defaultColor = _ref.defaultColor;
+    _ref.required;
+    var onChange = _ref.onChange,
     rest = _objectWithoutProperties(_ref, _excluded);
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -44,12 +55,12 @@ var Switch = function Switch(_ref) {
     onChange === null || onChange === void 0 || onChange((_e$target$checked2 = e === null || e === void 0 ? void 0 : e.target.checked) !== null && _e$target$checked2 !== void 0 ? _e$target$checked2 : false);
   }, [onChange]);
   return /*#__PURE__*/jsxs("label", {
-    className: classNames(invalid ? "ring-danger-500" : "ring-primary-500", disabled ? "opacity-50 cursor-not-allowed" : "hover:opacity-100 cursor-pointer", "inline-flex gap-1 py-1 items-center relative cursor-pointer opacity-85 rounded ring-offset-2 has-[:focus-visible]:ring-1"),
+    className: classNames(invalid ? "ring-danger-500" : "ring-primary-500", disabled ? "opacity-50 cursor-not-allowed" : "hover:opacity-100 cursor-pointer", "inline-flex gap-1 py-1 items-center relative cursor-pointer opacity-85 rounded ring-offset-2 has-focus-visible:ring-1"),
     style: {
       width: width
     },
     children: [/*#__PURE__*/jsxs("div", {
-      className: classNames(actualValue && getBgClass(color ? "".concat(color, "-500") : "primary-500"), !actualValue && (defaultColor ? getBgClass("".concat(defaultColor, "-500")) : "bg-tint-200"), "relative grid grid-cols-2 items-center h-6 min-w-10 cursor-pointer rounded-full p-1 transition-colors duration-200 ease-in-out"),
+      className: classNames(actualValue && getBgClass(color ? "".concat(color, "-500") : "primary-500"), !actualValue && (defaultColor ? getBgClass("".concat(defaultColor, "-500")) : "bg-tint-200"), "relative grid grid-cols-2 items-center h-[1.5em] min-w-[2.5em] cursor-pointer rounded-full p-[0.25em] transition-colors duration-200 ease-in-out"),
       style: {
         backgroundColor: actualValue ? getColor(color) : getColor(defaultColor)
       },
@@ -68,9 +79,9 @@ var Switch = function Switch(_ref) {
         onChange: handleChange
       }, rest)), /*#__PURE__*/jsx("span", {
         "aria-hidden": "true",
-        className: classNames(!disabled && "shadow-sm", actualValue ? "translate-x-[100%]" : "translate-x-0", "pointer-events-none inline-block h-4 start-1 absolute rounded-full bg-white ring-0 transition duration-200 ease-in-out"),
+        className: classNames(!disabled && "shadow-sm", actualValue ? "translate-x-full" : "translate-x-0", "pointer-events-none inline-block h-[1em] start-[0.25em] absolute rounded-full bg-white ring-0 transition duration-200 ease-in-out"),
         style: {
-          width: "calc(50% - 0.25rem)"
+          width: "calc(50% - 0.25em)"
         }
       }), (!!onLabel || !!offLabel) && /*#__PURE__*/jsxs(Fragment, {
         children: [/*#__PURE__*/jsx("span", {
@@ -91,7 +102,7 @@ var Switch = function Switch(_ref) {
       invalid: invalid,
       error: error
     }), label && /*#__PURE__*/jsx("span", {
-      className: "flex-initial leading-5 truncate",
+      className: "flex-initial leading-tight truncate",
       children: label
     })]
   });

package/dist/esm/input/Textarea.js

@@ -5,13 +5,23 @@ import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { useState, useDeferredValue, useRef, useEffect, useCallback } from 'react';
 import { InputWrapper } from '../internal/InputWrapper.js';
-import { handleEnter } from '../utils/eventHandlers.js';
+import { useHandleEnter } from '../utils/eventHandlers.js';
 import '@react-fabric/utilities';
 import { jsx } from 'react/jsx-runtime';
 
-var _excluded = ["ref", "value", "name", "invalid", "readOnly", "disabled", "required", "placeholder", "autoFocus", "rows", "maxRows", "variableRows", "onChange", "onEnterPressed"];
+var _excluded = ["ref", "value", "name", "invalid", "readOnly", "disabled", "required", "placeholder", "defaultValue", "autoFocus", "rows", "maxRows", "variableRows", "expandable", "onBlur", "onFocus", "onChange", "onEnterPressed"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+/**
+ * Textarea component that allows users to input multi-line text.
+ * It supports features like variable row count, expandable behavior,
+ * and handling of focus, blur, and change events.
+ * This component is designed to be flexible and user-friendly,
+ * providing a clear interface for text input with optional validation and accessibility features.
+ *
+ * @param {TextareaProps} props - The properties for the Textarea component.
+ * @returns {JSX.Element} The rendered Textarea component.
+ */
 var Textarea = function Textarea(_ref) {
   var ref = _ref.ref,
     value = _ref.value,
@@ -21,12 +31,16 @@ var Textarea = function Textarea(_ref) {
     disabled = _ref.disabled,
     required = _ref.required,
     placeholder = _ref.placeholder,
+    defaultValue = _ref.defaultValue,
     autoFocus = _ref.autoFocus,
     _ref$rows = _ref.rows,
     rows = _ref$rows === void 0 ? 5 : _ref$rows,
     _ref$maxRows = _ref.maxRows,
     maxRows = _ref$maxRows === void 0 ? 12 : _ref$maxRows,
     variableRows = _ref.variableRows,
+    expandable = _ref.expandable,
+    onBlur = _ref.onBlur,
+    onFocus = _ref.onFocus,
     onChange = _ref.onChange,
     onEnterPressed = _ref.onEnterPressed,
     rest = _objectWithoutProperties(_ref, _excluded);
@@ -38,16 +52,17 @@ var Textarea = function Textarea(_ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     fixedRows = _useState4[0],
     setFixedRows = _useState4[1];
-  var deferred = useDeferredValue(value);
+  var deferred = useDeferredValue(value !== null && value !== void 0 ? value : defaultValue);
   var wrapperRef = useRef(null);
   useEffect(function () {
     setActualValue(deferred !== null && deferred !== void 0 ? deferred : "");
   }, [deferred]);
   var handleChange = useCallback(function (e) {
-    var value = e === null || e === void 0 ? void 0 : e.target.value;
+    var _e$target$value;
+    var value = (_e$target$value = e === null || e === void 0 ? void 0 : e.target.value) !== null && _e$target$value !== void 0 ? _e$target$value : defaultValue;
     setActualValue(value !== null && value !== void 0 ? value : "");
-    onChange === null || onChange === void 0 || onChange(value !== null && value !== void 0 ? value : undefined);
-  }, [onChange]);
+    onChange === null || onChange === void 0 || onChange(value !== null && value !== void 0 ? value : null);
+  }, [onChange, defaultValue]);
   useEffect(function () {
     if (variableRows) {
       var _actualValue$split$le;
@@ -57,18 +72,22 @@ var Textarea = function Textarea(_ref) {
       setFixedRows(rows);
     }
   }, [actualValue, variableRows, rows, maxRows]);
+  var handleEnterPressed = useHandleEnter(onEnterPressed, {
+    preventDefault: !!onEnterPressed
+  });
   return /*#__PURE__*/jsx(InputWrapper, _objectSpread(_objectSpread({
-    showClear: !!actualValue,
+    showClear: !!actualValue && !disabled && !readOnly,
     onClear: handleChange,
     invalid: invalid,
     readOnly: readOnly,
     disabled: disabled,
     required: required,
     wrapperRef: wrapperRef,
+    textareaExpandable: expandable,
     textarea: true
   }, rest), {}, {
     children: /*#__PURE__*/jsx("textarea", {
-      className: "appearance-none self-stretch bg-transparent py-1 px-2 flex-1 border-none outline-none ring-0 min-h-20 resize-none",
+      className: "appearance-none self-stretch bg-transparent py-1 px-2 flex-1 border-none outline-none ring-0 min-h-12 resize-none",
       "aria-invalid": invalid,
       "aria-disabled": disabled,
       "aria-readonly": readOnly,
@@ -82,8 +101,10 @@ var Textarea = function Textarea(_ref) {
       autoComplete: "off",
       autoFocus: autoFocus,
       value: actualValue,
+      onBlur: onBlur,
+      onFocus: onFocus,
       onChange: handleChange,
-      onKeyDown: handleEnter(onEnterPressed)
+      onKeyDown: handleEnterPressed
     })
   }));
 };

package/dist/esm/internal/ErrorIcon.js

@@ -1,7 +1,7 @@
 'use client';
 
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import { Tooltip, Icon, CoreIcons } from '@react-fabric/core';
+import { Tooltip, Icon } from '@react-fabric/core';
 import { isString } from '@react-fabric/utilities';
 import { useTranslation } from 'react-i18next';
 import { jsx } from 'react/jsx-runtime';
@@ -20,11 +20,11 @@ var ErrorIcon = function ErrorIcon(_ref) {
       label: t((_error$values$label = (_error$values = error.values) === null || _error$values === void 0 ? void 0 : _error$values.label) !== null && _error$values$label !== void 0 ? _error$values$label : "form:badkey", (_error$values2 = error.values) === null || _error$values2 === void 0 ? void 0 : _error$values2.path)
     }) : {}),
     placement: "bottom",
-    color: "danger",
+    color: "danger-200",
     children: /*#__PURE__*/jsx(Icon, {
       className: "flex-content first:ms-2 self-center",
       color: "danger",
-      icon: CoreIcons.alert
+      icon: "icon-[mdi--alert-circle-outline]"
     })
   });
 };

package/dist/esm/internal/FieldWrapper.js

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

package/dist/esm/internal/InputWrapper.js

@@ -3,33 +3,35 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import { FloatingPortal } from '@floating-ui/react';
-import { Icon, CoreIcons } from '@react-fabric/core';
+import { Icon } from '@react-fabric/core';
 import { isString } from '@react-fabric/utilities';
 import classNames from 'classnames';
 import { useRef, useState, useMemo, useCallback, useEffect } from 'react';
 import { Fragment, jsxs, jsx } from 'react/jsx-runtime';
 import { ErrorIcon } from './ErrorIcon.js';
-import classes from './Field.module.css';
 import { FieldWrapper } from './FieldWrapper.js';
 
-var _excluded = ["invalid", "error", "allowClear", "showClear", "decorateStart", "decorateEnd", "children", "onClear", "noOutline", "noBorder", "textarea", "data-inner", "data-open", "floatingExpand", "wrapperRef", "width"];
+var _excluded = ["invalid", "error", "allowClear", "showClear", "decorateStart", "decorateEnd", "decorateEndShowWhenEmpty", "decorateEndHideWhenEmpty", "children", "onClear", "noOutline", "noBorder", "actionButton", "textarea", "textareaExpandable", "data-inner", "data-open", "floatingExpand", "wrapperRef", "width"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var InputWrapper = function InputWrapper(_ref) {
-  var _elRef$current;
   var invalid = _ref.invalid,
     error = _ref.error,
     allowClear = _ref.allowClear,
     showClear = _ref.showClear,
     decorateStart = _ref.decorateStart,
     decorateEnd = _ref.decorateEnd,
+    decorateEndShowWhenEmpty = _ref.decorateEndShowWhenEmpty,
+    decorateEndHideWhenEmpty = _ref.decorateEndHideWhenEmpty,
     children = _ref.children,
     onClear = _ref.onClear,
     noOutline = _ref.noOutline,
     noBorder = _ref.noBorder,
+    actionButton = _ref.actionButton,
     _ref$textarea = _ref.textarea,
     textarea = _ref$textarea === void 0 ? false : _ref$textarea,
+    _ref$textareaExpandab = _ref.textareaExpandable,
+    textareaExpandable = _ref$textareaExpandab === void 0 ? false : _ref$textareaExpandab,
     isInner = _ref["data-inner"];
     _ref["data-open"];
     var floatingExpand = _ref.floatingExpand,
@@ -50,13 +52,17 @@ var InputWrapper = function InputWrapper(_ref) {
     });
   }, [isInner, rest, width]);
   var handleClear = useCallback(function (e) {
-    var _e$currentTarget$pare;
-    (_e$currentTarget$pare = e.currentTarget.parentElement) === null || _e$currentTarget$pare === void 0 || (_e$currentTarget$pare = _e$currentTarget$pare.querySelector("input,textarea,button")) === null || _e$currentTarget$pare === void 0 || _e$currentTarget$pare.focus();
+    var _e$currentTarget$pare, _parent$querySelector;
+    var parent = (_e$currentTarget$pare = e.currentTarget.parentElement) === null || _e$currentTarget$pare === void 0 ? void 0 : _e$currentTarget$pare.querySelector("& > :not(.fabric-decorate)");
+    var el = (_parent$querySelector = parent === null || parent === void 0 ? void 0 : parent.querySelector("input,textarea,button")) !== null && _parent$querySelector !== void 0 ? _parent$querySelector : parent;
+    el === null || el === void 0 || el.focus();
     onClear === null || onClear === void 0 || onClear();
   }, [onClear]);
   var doFocus = useCallback(function (e) {
-    var _e$currentTarget$pare2;
-    (_e$currentTarget$pare2 = e.currentTarget.parentElement) === null || _e$currentTarget$pare2 === void 0 || (_e$currentTarget$pare2 = _e$currentTarget$pare2.querySelector("input,textarea,button")) === null || _e$currentTarget$pare2 === void 0 || _e$currentTarget$pare2.focus();
+    var _e$currentTarget$pare2, _parent$querySelector2;
+    var parent = (_e$currentTarget$pare2 = e.currentTarget.parentElement) === null || _e$currentTarget$pare2 === void 0 ? void 0 : _e$currentTarget$pare2.querySelector("& > :not(.fabric-decorate)");
+    var el = (_parent$querySelector2 = parent === null || parent === void 0 ? void 0 : parent.querySelector("input,textarea,button")) !== null && _parent$querySelector2 !== void 0 ? _parent$querySelector2 : parent;
+    el === null || el === void 0 || el.focus();
   }, [onClear]);
   useEffect(function () {
     isExpanded && setTimeout(function () {
@@ -67,45 +73,46 @@ var InputWrapper = function InputWrapper(_ref) {
   var el = /*#__PURE__*/jsxs("div", {
     role: "none",
     ref: wrapperRef,
-    className: classNames(classes.inputWrapper, invalid && classes.invalidWrapper, !noOutline && !noBorder && "bg-[var(--fabric-input)] outline overflow-hidden", "flex flex-nowrap items-center", textarea ? "rounded-capped group" : "rounded", isExpanded ? "fixed inset-4 z-[99]" : floatingExpand ? "absolute inset-x-0" : "relative", !noOutline && "after:absolute after:bottom-0 after:h-px after:bg-primary-500 after:mx-auto"),
+    className: classNames("fabric-inputWrapper", invalid && "fabric-invalidWrapper", !noOutline && !noBorder && "bg-(--fabric-input) outline overflow-hidden", "flex flex-nowrap items-center flex-1", textarea ? "rounded-capped group" : "rounded", isExpanded ? "fixed inset-4 z-99" : floatingExpand ? "absolute inset-x-0" : "relative", !noOutline && "after:absolute after:bottom-0 after:h-px after:bg-primary-500 after:mx-auto"),
     onKeyDown: function onKeyDown(e) {
-      return e.key === "Escape" && setExpanded(false);
+      return e.key === "Escape" && isExpanded && (setExpanded(false), e.stopPropagation());
     },
     children: [decorateStart && /*#__PURE__*/jsx("div", {
       onClickCapture: doFocus,
-      className: classNames(classes.decorate, "text-muted leading-none flex-content", isString(decorateStart) && "px-1"),
+      className: classNames("fabric-decorate", "text-muted leading-none flex-content", isString(decorateStart) && "px-1"),
       children: decorateStart
     }), /*#__PURE__*/jsx(ErrorIcon, {
       invalid: invalid,
       error: error
     }), children, allowClear && showClear && /*#__PURE__*/jsx(Icon, {
-      icon: CoreIcons.close,
+      icon: "icon-[mdi--close]",
       onClick: handleClear,
-      className: classNames("text-tint-500 hover:text-tint-700 p-1 z-1 flex-content", classes.inputClear, textarea && "self-start mt-1 me-1")
+      className: classNames("text-tint-500 hover:text-tint-700 p-1 z-1 flex-content", "fabric-inputClear", textarea && "self-start mt-1 me-1")
     }), decorateEnd && /*#__PURE__*/jsx("div", {
       onClickCapture: doFocus,
-      className: classNames(classes.decorate, "text-muted leading-none flex-content", isString(decorateEnd) && "px-1"),
+      className: classNames("fabric-decorate", "text-muted leading-none flex-content", isString(decorateEnd) && "px-1", decorateEndHideWhenEmpty && "peer-placeholder-shown:hidden", decorateEndShowWhenEmpty && "hidden peer-placeholder-shown:inline-block"),
       children: decorateEnd
-    }), textarea && /*#__PURE__*/jsx(Icon, {
+    }), actionButton && /*#__PURE__*/jsx("div", {
+      onClickCapture: doFocus,
+      className: classNames("fabric-decorate", "text-muted leading-none flex-content"),
+      children: actionButton
+    }), textareaExpandable && /*#__PURE__*/jsx(Icon, {
       onClick: function onClick() {
         return setExpanded(!isExpanded);
       },
-      icon: isExpanded ? CoreIcons.arrowCollapse : CoreIcons.arrowExpand,
+      icon: isExpanded ? "icon-[mdi--arrow-collapse]" : "icon-[mdi--arrow-expand]",
       className: "hidden group-hover:block absolute top-0 end-0 bg-base hover:bg-tint-200 p-1 opacity-65 rounded-capped"
     })]
   });
   return /*#__PURE__*/jsx(Wrapper, _objectSpread(_objectSpread({}, wrapperProps), {}, {
-    children: /*#__PURE__*/jsxs("div", {
+    children: /*#__PURE__*/jsx("div", {
       ref: elRef,
-      className: "flex-1 relative min-h-8",
+      className: classNames("relative min-h-8 flex flex-col flex-nowrap", width ? "flex-content" : "flex-1"),
       style: {
         width: width,
         flexBasis: width
       },
-      children: [!isExpanded && el, isExpanded && /*#__PURE__*/jsx(FloatingPortal, {
-        root: (_elRef$current = elRef.current) === null || _elRef$current === void 0 ? void 0 : _elRef$current.closest(".theme-base"),
-        children: el
-      })]
+      children: el
     })
   }));
 };