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

package/css/_file.css

@@ -27,11 +27,12 @@
       cursor: pointer;
 
       padding-block: 0;
+      padding-inline: 4px;
 
-      color: var(--text-white);
+      color: var(--color-white);
 
       opacity: 0.8;
-      background-color: var(--bg-primary-500);
+      background-color: var(--color-primary-500);
       border: 0;
       border-radius: var(--rounded);
 
@@ -41,7 +42,7 @@
     }
 
     &[aria-invalid="true"]::-webkit-file-upload-button {
-      background-color: var(--bg-danger-500);
+      background-color: var(--color-danger-500);
     }
 
     &:disabled::-webkit-file-upload-button {

package/dist/cjs/input/File.js

@@ -138,7 +138,7 @@ var FileInput = function FileInput(_ref) {
     })
   }, rest), {}, {
     children: /*#__PURE__*/jsxRuntime.jsx("input", {
-      className: classNames("appearance-none bg-transparent py-1 px-2 flex-1 border-none outline-none ring-0", "fabric-fileInput", utilities.isArray(actualValue) && (actualValue === null || actualValue === void 0 ? void 0 : actualValue.length) && "text-(--fabric-bg)"),
+      className: classNames("appearance-none bg-transparent py-1 px-2 flex-1 border-none outline-none ring-0 peer", "fabric-fileInput", utilities.isArray(actualValue) && (actualValue === null || actualValue === void 0 ? void 0 : actualValue.length) && "text-(--fabric-bg)"),
       "aria-invalid": invalid,
       "aria-disabled": disabled,
       "aria-readonly": readOnly,

package/dist/cjs/input/Number.js

@@ -55,7 +55,7 @@ var Number = function Number(_ref) {
     required: required
   }, rest), {}, {
     children: /*#__PURE__*/jsxRuntime.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,

package/dist/cjs/input/Password.js

@@ -62,7 +62,7 @@ var Password = function Password(_ref) {
     disabled: disabled,
     required: required
   }, rest), {}, {
-    decorateEnd: showToggle && /*#__PURE__*/jsxRuntime.jsx(core.Tooltip, {
+    actionButton: showToggle && actualValue && /*#__PURE__*/jsxRuntime.jsx(core.Tooltip, {
       color: "warning",
       content: t(show ? "password.hide" : "password.show"),
       children: /*#__PURE__*/jsxRuntime.jsx(core.Button, {
@@ -77,7 +77,7 @@ var Password = function Password(_ref) {
       })
     }),
     children: [/*#__PURE__*/jsxRuntime.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,

package/dist/cjs/input/Search.js

@@ -10,7 +10,7 @@ var eventHandlers = require('../utils/eventHandlers.js');
 require('@react-fabric/utilities');
 var jsxRuntime = require('react/jsx-runtime');
 
-var _excluded = ["ref", "value", "name", "invalid", "readOnly", "disabled", "required", "searching", "placeholder", "autoFocus", "allowClear", "searchOnChange", "decorateEnd", "decorateStart", "onBlur", "onFocus", "onSearch", "onChange", "onEnterPressed"];
+var _excluded = ["ref", "value", "name", "invalid", "readOnly", "disabled", "required", "searching", "placeholder", "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; }
 var Search = function Search(_ref) {
@@ -24,12 +24,11 @@ var Search = function Search(_ref) {
     searching = _ref.searching,
     placeholder = _ref.placeholder,
     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,
@@ -70,13 +69,12 @@ var Search = function Search(_ref) {
     readOnly: readOnly,
     disabled: disabled,
     required: required,
-    decorateStart: decorateStart,
-    decorateEnd: /*#__PURE__*/jsxRuntime.jsxs(react.Fragment, {
-      children: [decorateEnd, searching && /*#__PURE__*/jsxRuntime.jsx(core.Icon, {
+    actionButton: /*#__PURE__*/jsxRuntime.jsxs(react.Fragment, {
+      children: [searching && /*#__PURE__*/jsxRuntime.jsx(core.Icon, {
         className: "p-2",
         icon: core.CoreIcons.spinner,
         animate: "spin"
-      }), !searching && /*#__PURE__*/jsxRuntime.jsx(core.Button, {
+      }), !searching && !hideHandle && /*#__PURE__*/jsxRuntime.jsx(core.Button, {
         tabIndex: -1,
         variant: "link",
         "aria-label": "search",
@@ -87,7 +85,7 @@ var Search = function Search(_ref) {
     })
   }, rest), {}, {
     children: /*#__PURE__*/jsxRuntime.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,

package/dist/cjs/internal/FieldWrapper.js

@@ -47,7 +47,7 @@ var FieldWrapper = function FieldWrapper(_ref) {
       width: width,
       flexBasis: width
     },
-    children: [!isInner && /*#__PURE__*/jsxRuntime.jsxs("div", {
+    children: [!isInner && label && /*#__PURE__*/jsxRuntime.jsxs("div", {
       className: "flex flex-nowrap flex-content items-end gap-1 py-0.5 px-2",
       style: {
         width: inline ? labelWidth : undefined

package/dist/cjs/internal/InputWrapper.js

@@ -11,7 +11,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var ErrorIcon = require('./ErrorIcon.js');
 var FieldWrapper = require('./FieldWrapper.js');
 
-var _excluded = ["invalid", "error", "allowClear", "showClear", "decorateStart", "decorateEnd", "decorateEndShowWhenEmpty", "decorateEndHideWhenEmpty", "children", "onClear", "noOutline", "noBorder", "textarea", "textareaExpandable", "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) {
@@ -27,6 +27,7 @@ var InputWrapper = function InputWrapper(_ref) {
     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,
@@ -68,7 +69,7 @@ var InputWrapper = function InputWrapper(_ref) {
   var el = /*#__PURE__*/jsxRuntime.jsxs("div", {
     role: "none",
     ref: wrapperRef,
-    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"),
+    className: classNames("fabric-inputWrapper", invalid && "fabric-invalidWrapper", !noOutline && !noBorder && "bg-(--fabric-input) outline -outline-offset-1 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-[2px] after:bg-primary-500 after:mx-auto"),
     onKeyDown: function onKeyDown(e) {
       return e.key === "Escape" && isExpanded && (setExpanded(false), e.stopPropagation());
     },
@@ -87,6 +88,10 @@ var InputWrapper = function InputWrapper(_ref) {
       onClickCapture: doFocus,
       className: classNames("fabric-decorate", "text-muted leading-none flex-content", utilities.isString(decorateEnd) && "px-1", decorateEndHideWhenEmpty && "peer-placeholder-shown:hidden", decorateEndShowWhenEmpty && "hidden peer-placeholder-shown:inline-block"),
       children: decorateEnd
+    }), actionButton && /*#__PURE__*/jsxRuntime.jsx("div", {
+      onClickCapture: doFocus,
+      className: classNames("fabric-decorate", "text-muted leading-none flex-content"),
+      children: actionButton
     }), textareaExpandable && /*#__PURE__*/jsxRuntime.jsx(core.Icon, {
       onClick: function onClick() {
         return setExpanded(!isExpanded);

package/dist/cjs/select/Select.js

@@ -242,7 +242,7 @@ var Select = function Select(_ref) {
         size: 1,
         ref: ref,
         autoFocus: autoFocus,
-        className: classNames("appearance-none bg-transparent outline-none border-none ring-0 flex-1", disabled && "cursor-not-allowed pointer-events-none", multiple && "min-w-24"),
+        className: classNames("appearance-none bg-transparent outline-none border-none ring-0 flex-1 peer", disabled && "cursor-not-allowed pointer-events-none", multiple && "min-w-24"),
         placeholder: utilities.isEmpty(state.value) ? placeholder : "",
         onChange: function onChange(evt) {
           return handleQuery(evt.target.value);

package/dist/esm/input/File.js

@@ -138,7 +138,7 @@ var FileInput = function FileInput(_ref) {
     })
   }, rest), {}, {
     children: /*#__PURE__*/jsx("input", {
-      className: classNames("appearance-none bg-transparent py-1 px-2 flex-1 border-none outline-none ring-0", "fabric-fileInput", isArray(actualValue) && (actualValue === null || actualValue === void 0 ? void 0 : actualValue.length) && "text-(--fabric-bg)"),
+      className: classNames("appearance-none bg-transparent py-1 px-2 flex-1 border-none outline-none ring-0 peer", "fabric-fileInput", isArray(actualValue) && (actualValue === null || actualValue === void 0 ? void 0 : actualValue.length) && "text-(--fabric-bg)"),
       "aria-invalid": invalid,
       "aria-disabled": disabled,
       "aria-readonly": readOnly,

package/dist/esm/input/Number.js

@@ -55,7 +55,7 @@ var Number = function Number(_ref) {
     required: required
   }, 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,

package/dist/esm/input/Password.js

@@ -62,7 +62,7 @@ var Password = function Password(_ref) {
     disabled: disabled,
     required: required
   }, rest), {}, {
-    decorateEnd: showToggle && /*#__PURE__*/jsx(Tooltip, {
+    actionButton: showToggle && actualValue && /*#__PURE__*/jsx(Tooltip, {
       color: "warning",
       content: t(show ? "password.hide" : "password.show"),
       children: /*#__PURE__*/jsx(Button, {
@@ -77,7 +77,7 @@ var Password = function Password(_ref) {
       })
     }),
     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,

package/dist/esm/input/Search.js

@@ -10,7 +10,7 @@ import { handleEnter } from '../utils/eventHandlers.js';
 import '@react-fabric/utilities';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
-var _excluded = ["ref", "value", "name", "invalid", "readOnly", "disabled", "required", "searching", "placeholder", "autoFocus", "allowClear", "searchOnChange", "decorateEnd", "decorateStart", "onBlur", "onFocus", "onSearch", "onChange", "onEnterPressed"];
+var _excluded = ["ref", "value", "name", "invalid", "readOnly", "disabled", "required", "searching", "placeholder", "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; }
 var Search = function Search(_ref) {
@@ -24,12 +24,11 @@ var Search = function Search(_ref) {
     searching = _ref.searching,
     placeholder = _ref.placeholder,
     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,
@@ -70,13 +69,12 @@ var Search = function Search(_ref) {
     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, {
+      }), !searching && !hideHandle && /*#__PURE__*/jsx(Button, {
         tabIndex: -1,
         variant: "link",
         "aria-label": "search",
@@ -87,7 +85,7 @@ var Search = function Search(_ref) {
     })
   }, 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,

package/dist/esm/internal/FieldWrapper.js

@@ -47,7 +47,7 @@ var FieldWrapper = function FieldWrapper(_ref) {
       width: width,
       flexBasis: width
     },
-    children: [!isInner && /*#__PURE__*/jsxs("div", {
+    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

package/dist/esm/internal/InputWrapper.js

@@ -11,7 +11,7 @@ import { Fragment, jsxs, jsx } from 'react/jsx-runtime';
 import { ErrorIcon } from './ErrorIcon.js';
 import { FieldWrapper } from './FieldWrapper.js';
 
-var _excluded = ["invalid", "error", "allowClear", "showClear", "decorateStart", "decorateEnd", "decorateEndShowWhenEmpty", "decorateEndHideWhenEmpty", "children", "onClear", "noOutline", "noBorder", "textarea", "textareaExpandable", "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) {
@@ -27,6 +27,7 @@ var InputWrapper = function InputWrapper(_ref) {
     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,
@@ -68,7 +69,7 @@ var InputWrapper = function InputWrapper(_ref) {
   var el = /*#__PURE__*/jsxs("div", {
     role: "none",
     ref: wrapperRef,
-    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"),
+    className: classNames("fabric-inputWrapper", invalid && "fabric-invalidWrapper", !noOutline && !noBorder && "bg-(--fabric-input) outline -outline-offset-1 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-[2px] after:bg-primary-500 after:mx-auto"),
     onKeyDown: function onKeyDown(e) {
       return e.key === "Escape" && isExpanded && (setExpanded(false), e.stopPropagation());
     },
@@ -87,6 +88,10 @@ var InputWrapper = function InputWrapper(_ref) {
       onClickCapture: doFocus,
       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
+    }), 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);

package/dist/esm/select/Select.js

@@ -242,7 +242,7 @@ var Select = function Select(_ref) {
         size: 1,
         ref: ref,
         autoFocus: autoFocus,
-        className: classNames("appearance-none bg-transparent outline-none border-none ring-0 flex-1", disabled && "cursor-not-allowed pointer-events-none", multiple && "min-w-24"),
+        className: classNames("appearance-none bg-transparent outline-none border-none ring-0 flex-1 peer", disabled && "cursor-not-allowed pointer-events-none", multiple && "min-w-24"),
         placeholder: isEmpty(state.value) ? placeholder : "",
         onChange: function onChange(evt) {
           return handleQuery(evt.target.value);

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

@@ -9,9 +9,13 @@ export interface SearchProps extends InputProps, RefProp<HTMLInputElement> {
      * search on value change
      */
     searchOnChange?: boolean;
+    /**
+     * hide search action handle
+     */
+    hideHandle?: boolean;
     /**
      * search handler
      */
     onSearch?: (query?: string) => void;
 }
-export declare const Search: ({ ref, value, name, invalid, readOnly, disabled, required, searching, placeholder, autoFocus, allowClear, searchOnChange, decorateEnd, decorateStart, onBlur, onFocus, onSearch, onChange, onEnterPressed, ...rest }: SearchProps) => import("react/jsx-runtime").JSX.Element;
+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;

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

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

package/package.json

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

package/src/input/File.tsx

@@ -193,7 +193,7 @@ export const FileInput = ({
     >
       <input
         className={classNames(
-          "appearance-none bg-transparent py-1 px-2 flex-1 border-none outline-none ring-0",
+          "appearance-none bg-transparent py-1 px-2 flex-1 border-none outline-none ring-0 peer",
           "fabric-fileInput",
           isArray(actualValue) && actualValue?.length && "text-(--fabric-bg)",
         )}

package/src/input/Number.tsx

@@ -102,7 +102,7 @@ export const Number = ({
       {...rest}
     >
       <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}

package/src/input/Password.tsx

@@ -99,8 +99,9 @@ export const Password = ({
       disabled={disabled}
       required={required}
       {...rest}
-      decorateEnd={
-        showToggle && (
+      actionButton={
+        showToggle &&
+        actualValue && (
           <Tooltip
             color="warning"
             content={t(show ? "password.hide" : "password.show")}
@@ -118,7 +119,7 @@ export const Password = ({
       }
     >
       <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}

package/src/input/Search.tsx

@@ -46,6 +46,10 @@ export interface SearchProps extends InputProps, RefProp<HTMLInputElement> {
    * search on value change
    */
   searchOnChange?: boolean;
+  /**
+   * hide search action handle
+   */
+  hideHandle?: boolean;
   /**
    * search handler
    */
@@ -63,10 +67,9 @@ export const Search = ({
   searching,
   placeholder,
   autoFocus,
+  hideHandle,
   allowClear = true,
-  searchOnChange = true,
-  decorateEnd,
-  decorateStart,
+  searchOnChange = false,
   onBlur,
   onFocus,
   onSearch,
@@ -117,14 +120,12 @@ export const Search = ({
       readOnly={readOnly}
       disabled={disabled}
       required={required}
-      decorateStart={decorateStart}
-      decorateEnd={
+      actionButton={
         <Fragment>
-          {decorateEnd}
           {searching && (
             <Icon className="p-2" icon={CoreIcons.spinner} animate="spin" />
           )}
-          {!searching && (
+          {!searching && !hideHandle && (
             <Button
               tabIndex={-1}
               variant="link"
@@ -139,7 +140,7 @@ export const Search = ({
       {...rest}
     >
       <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}

package/src/internal/FieldWrapper.tsx

@@ -47,7 +47,7 @@ export const FieldWrapper = ({
       data-ref="fieldWrapper"
       style={{ width, flexBasis: width }}
     >
-      {!isInner && (
+      {!isInner && label && (
         <div
           className="flex flex-nowrap flex-content items-end gap-1 py-0.5 px-2"
           style={{ width: inline ? labelWidth : undefined }}

package/src/internal/InputWrapper.tsx

@@ -49,6 +49,7 @@ export const InputWrapper = ({
   onClear,
   noOutline,
   noBorder,
+  actionButton,
   textarea = false,
   textareaExpandable = false,
   "data-inner": isInner,
@@ -107,7 +108,7 @@ export const InputWrapper = ({
         invalid && "fabric-invalidWrapper",
         !noOutline &&
           !noBorder &&
-          "bg-(--fabric-input) outline overflow-hidden",
+          "bg-(--fabric-input) outline -outline-offset-1 overflow-hidden",
         "flex flex-nowrap items-center flex-1",
         textarea ? "rounded-capped group" : "rounded",
         isExpanded
@@ -116,7 +117,7 @@ export const InputWrapper = ({
             ? "absolute inset-x-0"
             : "relative",
         !noOutline &&
-          "after:absolute after:bottom-0 after:h-px after:bg-primary-500 after:mx-auto",
+          "after:absolute after:bottom-0 after:h-[2px] after:bg-primary-500 after:mx-auto",
       )}
       onKeyDown={(e) =>
         e.key === "Escape" &&
@@ -164,6 +165,17 @@ export const InputWrapper = ({
           {decorateEnd}
         </div>
       )}
+      {actionButton && (
+        <div
+          onClickCapture={doFocus}
+          className={classNames(
+            "fabric-decorate",
+            "text-muted leading-none flex-content",
+          )}
+        >
+          {actionButton}
+        </div>
+      )}
       {textareaExpandable && (
         <Icon
           onClick={() => setExpanded(!isExpanded)}

package/src/select/Select.tsx

@@ -296,7 +296,7 @@ export const Select = <T extends AnyObject = string>({
           ref={ref}
           autoFocus={autoFocus}
           className={classNames(
-            "appearance-none bg-transparent outline-none border-none ring-0 flex-1",
+            "appearance-none bg-transparent outline-none border-none ring-0 flex-1 peer",
             disabled && "cursor-not-allowed pointer-events-none",
             multiple && "min-w-24",
           )}