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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (34) hide show
  1. package/css/_file.css +4 -3
  2. package/dist/cjs/input/Checkbox.js +1 -1
  3. package/dist/cjs/input/File.js +1 -1
  4. package/dist/cjs/input/Number.js +1 -1
  5. package/dist/cjs/input/Password.js +2 -2
  6. package/dist/cjs/input/Radio.js +1 -1
  7. package/dist/cjs/input/Search.js +7 -9
  8. package/dist/cjs/input/Switch.js +1 -1
  9. package/dist/cjs/internal/FieldWrapper.js +1 -1
  10. package/dist/cjs/internal/InputWrapper.js +7 -2
  11. package/dist/cjs/select/Select.js +1 -1
  12. package/dist/esm/input/Checkbox.js +1 -1
  13. package/dist/esm/input/File.js +1 -1
  14. package/dist/esm/input/Number.js +1 -1
  15. package/dist/esm/input/Password.js +2 -2
  16. package/dist/esm/input/Radio.js +1 -1
  17. package/dist/esm/input/Search.js +7 -9
  18. package/dist/esm/input/Switch.js +1 -1
  19. package/dist/esm/internal/FieldWrapper.js +1 -1
  20. package/dist/esm/internal/InputWrapper.js +7 -2
  21. package/dist/esm/select/Select.js +1 -1
  22. package/dist/types/input/Search.d.ts +5 -1
  23. package/dist/types/internal/InputWrapper.d.ts +1 -1
  24. package/package.json +5 -5
  25. package/src/input/Checkbox.tsx +1 -1
  26. package/src/input/File.tsx +1 -1
  27. package/src/input/Number.tsx +1 -1
  28. package/src/input/Password.tsx +4 -3
  29. package/src/input/Radio.tsx +1 -1
  30. package/src/input/Search.tsx +9 -8
  31. package/src/input/Switch.tsx +1 -1
  32. package/src/internal/FieldWrapper.tsx +1 -1
  33. package/src/internal/InputWrapper.tsx +14 -2
  34. package/src/select/Select.tsx +1 -1
package/css/_file.css CHANGED
@@ -27,11 +27,12 @@
27
27
  cursor: pointer;
28
28
 
29
29
  padding-block: 0;
30
+ padding-inline: 4px;
30
31
 
31
- color: var(--text-white);
32
+ color: var(--color-white);
32
33
 
33
34
  opacity: 0.8;
34
- background-color: var(--bg-primary-500);
35
+ background-color: var(--color-primary-500);
35
36
  border: 0;
36
37
  border-radius: var(--rounded);
37
38
 
@@ -41,7 +42,7 @@
41
42
  }
42
43
 
43
44
  &[aria-invalid="true"]::-webkit-file-upload-button {
44
- background-color: var(--bg-danger-500);
45
+ background-color: var(--color-danger-500);
45
46
  }
46
47
 
47
48
  &:disabled::-webkit-file-upload-button {
package/dist/cjs/input/Checkbox.js CHANGED
@@ -75,7 +75,7 @@ var Checkbox = function Checkbox(_ref) {
75
75
  invalid: invalid,
76
76
  error: error
77
77
  }), label && /*#__PURE__*/jsxRuntime.jsx("span", {
78
- className: "flex-initial leading-none truncate",
78
+ className: "flex-initial leading-tight truncate",
79
79
  children: label
80
80
  })]
81
81
  });
package/dist/cjs/input/File.js CHANGED
@@ -138,7 +138,7 @@ var FileInput = function FileInput(_ref) {
138
138
  })
139
139
  }, rest), {}, {
140
140
  children: /*#__PURE__*/jsxRuntime.jsx("input", {
141
- 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)"),
141
+ 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)"),
142
142
  "aria-invalid": invalid,
143
143
  "aria-disabled": disabled,
144
144
  "aria-readonly": readOnly,
package/dist/cjs/input/Number.js CHANGED
@@ -55,7 +55,7 @@ var Number = function Number(_ref) {
55
55
  required: required
56
56
  }, rest), {}, {
57
57
  children: /*#__PURE__*/jsxRuntime.jsx("input", {
58
- className: "appearance-none bg-transparent py-1 px-2 flex-1 border-none outline-none ring-0",
58
+ className: "appearance-none bg-transparent py-1 px-2 flex-1 border-none outline-none ring-0 peer",
59
59
  "aria-invalid": invalid,
60
60
  "aria-disabled": disabled,
61
61
  "aria-readonly": readOnly,
package/dist/cjs/input/Password.js CHANGED
@@ -62,7 +62,7 @@ var Password = function Password(_ref) {
62
62
  disabled: disabled,
63
63
  required: required
64
64
  }, rest), {}, {
65
- decorateEnd: showToggle && /*#__PURE__*/jsxRuntime.jsx(core.Tooltip, {
65
+ actionButton: showToggle && actualValue && /*#__PURE__*/jsxRuntime.jsx(core.Tooltip, {
66
66
  color: "warning",
67
67
  content: t(show ? "password.hide" : "password.show"),
68
68
  children: /*#__PURE__*/jsxRuntime.jsx(core.Button, {
@@ -77,7 +77,7 @@ var Password = function Password(_ref) {
77
77
  })
78
78
  }),
79
79
  children: [/*#__PURE__*/jsxRuntime.jsx("input", {
80
- className: "appearance-none bg-transparent py-1 px-2 flex-1 border-none outline-none ring-0",
80
+ className: "appearance-none bg-transparent py-1 px-2 flex-1 border-none outline-none ring-0 peer",
81
81
  "aria-invalid": invalid,
82
82
  "aria-disabled": disabled,
83
83
  "aria-readonly": readOnly,
package/dist/cjs/input/Radio.js CHANGED
@@ -61,7 +61,7 @@ var Radio = function Radio(_ref) {
61
61
  size: "1.25em",
62
62
  icon: iconOff
63
63
  }), label && /*#__PURE__*/jsxRuntime.jsx("span", {
64
- className: "flex-initial leading-none truncate",
64
+ className: "flex-initial leading-tight truncate",
65
65
  children: label
66
66
  })]
67
67
  });
package/dist/cjs/input/Search.js CHANGED
@@ -10,7 +10,7 @@ var eventHandlers = require('../utils/eventHandlers.js');
10
10
  require('@react-fabric/utilities');
11
11
  var jsxRuntime = require('react/jsx-runtime');
12
12
 
13
- var _excluded = ["ref", "value", "name", "invalid", "readOnly", "disabled", "required", "searching", "placeholder", "autoFocus", "allowClear", "searchOnChange", "decorateEnd", "decorateStart", "onBlur", "onFocus", "onSearch", "onChange", "onEnterPressed"];
13
+ var _excluded = ["ref", "value", "name", "invalid", "readOnly", "disabled", "required", "searching", "placeholder", "autoFocus", "hideHandle", "allowClear", "searchOnChange", "onBlur", "onFocus", "onSearch", "onChange", "onEnterPressed"];
14
14
  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; }
15
15
  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; }
16
16
  var Search = function Search(_ref) {
@@ -24,12 +24,11 @@ var Search = function Search(_ref) {
24
24
  searching = _ref.searching,
25
25
  placeholder = _ref.placeholder,
26
26
  autoFocus = _ref.autoFocus,
27
+ hideHandle = _ref.hideHandle,
27
28
  _ref$allowClear = _ref.allowClear,
28
29
  allowClear = _ref$allowClear === void 0 ? true : _ref$allowClear,
29
30
  _ref$searchOnChange = _ref.searchOnChange,
30
- searchOnChange = _ref$searchOnChange === void 0 ? true : _ref$searchOnChange,
31
- decorateEnd = _ref.decorateEnd,
32
- decorateStart = _ref.decorateStart,
31
+ searchOnChange = _ref$searchOnChange === void 0 ? false : _ref$searchOnChange,
33
32
  onBlur = _ref.onBlur,
34
33
  onFocus = _ref.onFocus,
35
34
  onSearch = _ref.onSearch,
@@ -70,13 +69,12 @@ var Search = function Search(_ref) {
70
69
  readOnly: readOnly,
71
70
  disabled: disabled,
72
71
  required: required,
73
- decorateStart: decorateStart,
74
- decorateEnd: /*#__PURE__*/jsxRuntime.jsxs(react.Fragment, {
75
- children: [decorateEnd, searching && /*#__PURE__*/jsxRuntime.jsx(core.Icon, {
72
+ actionButton: /*#__PURE__*/jsxRuntime.jsxs(react.Fragment, {
73
+ children: [searching && /*#__PURE__*/jsxRuntime.jsx(core.Icon, {
76
74
  className: "p-2",
77
75
  icon: core.CoreIcons.spinner,
78
76
  animate: "spin"
79
- }), !searching && /*#__PURE__*/jsxRuntime.jsx(core.Button, {
77
+ }), !searching && !hideHandle && /*#__PURE__*/jsxRuntime.jsx(core.Button, {
80
78
  tabIndex: -1,
81
79
  variant: "link",
82
80
  "aria-label": "search",
@@ -87,7 +85,7 @@ var Search = function Search(_ref) {
87
85
  })
88
86
  }, rest), {}, {
89
87
  children: /*#__PURE__*/jsxRuntime.jsx("input", {
90
- className: "appearance-none bg-transparent py-1 px-2 flex-1 border-none outline-none ring-0",
88
+ className: "appearance-none bg-transparent py-1 px-2 flex-1 border-none outline-none ring-0 peer",
91
89
  "aria-invalid": invalid,
92
90
  "aria-disabled": disabled,
93
91
  "aria-readonly": readOnly,
package/dist/cjs/input/Switch.js CHANGED
@@ -92,7 +92,7 @@ var Switch = function Switch(_ref) {
92
92
  invalid: invalid,
93
93
  error: error
94
94
  }), label && /*#__PURE__*/jsxRuntime.jsx("span", {
95
- className: "flex-initial leading-5 truncate",
95
+ className: "flex-initial leading-tight truncate",
96
96
  children: label
97
97
  })]
98
98
  });
package/dist/cjs/internal/FieldWrapper.js CHANGED
@@ -47,7 +47,7 @@ var FieldWrapper = function FieldWrapper(_ref) {
47
47
  width: width,
48
48
  flexBasis: width
49
49
  },
50
- children: [!isInner && /*#__PURE__*/jsxRuntime.jsxs("div", {
50
+ children: [!isInner && label && /*#__PURE__*/jsxRuntime.jsxs("div", {
51
51
  className: "flex flex-nowrap flex-content items-end gap-1 py-0.5 px-2",
52
52
  style: {
53
53
  width: inline ? labelWidth : undefined
package/dist/cjs/internal/InputWrapper.js CHANGED
@@ -11,7 +11,7 @@ var jsxRuntime = require('react/jsx-runtime');
11
11
  var ErrorIcon = require('./ErrorIcon.js');
12
12
  var FieldWrapper = require('./FieldWrapper.js');
13
13
 
14
- var _excluded = ["invalid", "error", "allowClear", "showClear", "decorateStart", "decorateEnd", "decorateEndShowWhenEmpty", "decorateEndHideWhenEmpty", "children", "onClear", "noOutline", "noBorder", "textarea", "textareaExpandable", "data-inner", "data-open", "floatingExpand", "wrapperRef", "width"];
14
+ var _excluded = ["invalid", "error", "allowClear", "showClear", "decorateStart", "decorateEnd", "decorateEndShowWhenEmpty", "decorateEndHideWhenEmpty", "children", "onClear", "noOutline", "noBorder", "actionButton", "textarea", "textareaExpandable", "data-inner", "data-open", "floatingExpand", "wrapperRef", "width"];
15
15
  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; }
16
16
  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; }
17
17
  var InputWrapper = function InputWrapper(_ref) {
@@ -27,6 +27,7 @@ var InputWrapper = function InputWrapper(_ref) {
27
27
  onClear = _ref.onClear,
28
28
  noOutline = _ref.noOutline,
29
29
  noBorder = _ref.noBorder,
30
+ actionButton = _ref.actionButton,
30
31
  _ref$textarea = _ref.textarea,
31
32
  textarea = _ref$textarea === void 0 ? false : _ref$textarea,
32
33
  _ref$textareaExpandab = _ref.textareaExpandable,
@@ -68,7 +69,7 @@ var InputWrapper = function InputWrapper(_ref) {
68
69
  var el = /*#__PURE__*/jsxRuntime.jsxs("div", {
69
70
  role: "none",
70
71
  ref: wrapperRef,
71
- 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"),
72
+ 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"),
72
73
  onKeyDown: function onKeyDown(e) {
73
74
  return e.key === "Escape" && isExpanded && (setExpanded(false), e.stopPropagation());
74
75
  },
@@ -87,6 +88,10 @@ var InputWrapper = function InputWrapper(_ref) {
87
88
  onClickCapture: doFocus,
88
89
  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"),
89
90
  children: decorateEnd
91
+ }), actionButton && /*#__PURE__*/jsxRuntime.jsx("div", {
92
+ onClickCapture: doFocus,
93
+ className: classNames("fabric-decorate", "text-muted leading-none flex-content"),
94
+ children: actionButton
90
95
  }), textareaExpandable && /*#__PURE__*/jsxRuntime.jsx(core.Icon, {
91
96
  onClick: function onClick() {
92
97
  return setExpanded(!isExpanded);
package/dist/cjs/select/Select.js CHANGED
@@ -242,7 +242,7 @@ var Select = function Select(_ref) {
242
242
  size: 1,
243
243
  ref: ref,
244
244
  autoFocus: autoFocus,
245
- 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"),
245
+ 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"),
246
246
  placeholder: utilities.isEmpty(state.value) ? placeholder : "",
247
247
  onChange: function onChange(evt) {
248
248
  return handleQuery(evt.target.value);
package/dist/esm/input/Checkbox.js CHANGED
@@ -75,7 +75,7 @@ var Checkbox = function Checkbox(_ref) {
75
75
  invalid: invalid,
76
76
  error: error
77
77
  }), label && /*#__PURE__*/jsx("span", {
78
- className: "flex-initial leading-none truncate",
78
+ className: "flex-initial leading-tight truncate",
79
79
  children: label
80
80
  })]
81
81
  });
package/dist/esm/input/File.js CHANGED
@@ -138,7 +138,7 @@ var FileInput = function FileInput(_ref) {
138
138
  })
139
139
  }, rest), {}, {
140
140
  children: /*#__PURE__*/jsx("input", {
141
- 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)"),
141
+ 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)"),
142
142
  "aria-invalid": invalid,
143
143
  "aria-disabled": disabled,
144
144
  "aria-readonly": readOnly,
package/dist/esm/input/Number.js CHANGED
@@ -55,7 +55,7 @@ var Number = function Number(_ref) {
55
55
  required: required
56
56
  }, rest), {}, {
57
57
  children: /*#__PURE__*/jsx("input", {
58
- className: "appearance-none bg-transparent py-1 px-2 flex-1 border-none outline-none ring-0",
58
+ className: "appearance-none bg-transparent py-1 px-2 flex-1 border-none outline-none ring-0 peer",
59
59
  "aria-invalid": invalid,
60
60
  "aria-disabled": disabled,
61
61
  "aria-readonly": readOnly,
package/dist/esm/input/Password.js CHANGED
@@ -62,7 +62,7 @@ var Password = function Password(_ref) {
62
62
  disabled: disabled,
63
63
  required: required
64
64
  }, rest), {}, {
65
- decorateEnd: showToggle && /*#__PURE__*/jsx(Tooltip, {
65
+ actionButton: showToggle && actualValue && /*#__PURE__*/jsx(Tooltip, {
66
66
  color: "warning",
67
67
  content: t(show ? "password.hide" : "password.show"),
68
68
  children: /*#__PURE__*/jsx(Button, {
@@ -77,7 +77,7 @@ var Password = function Password(_ref) {
77
77
  })
78
78
  }),
79
79
  children: [/*#__PURE__*/jsx("input", {
80
- className: "appearance-none bg-transparent py-1 px-2 flex-1 border-none outline-none ring-0",
80
+ className: "appearance-none bg-transparent py-1 px-2 flex-1 border-none outline-none ring-0 peer",
81
81
  "aria-invalid": invalid,
82
82
  "aria-disabled": disabled,
83
83
  "aria-readonly": readOnly,
package/dist/esm/input/Radio.js CHANGED
@@ -61,7 +61,7 @@ var Radio = function Radio(_ref) {
61
61
  size: "1.25em",
62
62
  icon: iconOff
63
63
  }), label && /*#__PURE__*/jsx("span", {
64
- className: "flex-initial leading-none truncate",
64
+ className: "flex-initial leading-tight truncate",
65
65
  children: label
66
66
  })]
67
67
  });
package/dist/esm/input/Search.js CHANGED
@@ -10,7 +10,7 @@ import { handleEnter } from '../utils/eventHandlers.js';
10
10
  import '@react-fabric/utilities';
11
11
  import { jsx, jsxs } from 'react/jsx-runtime';
12
12
 
13
- var _excluded = ["ref", "value", "name", "invalid", "readOnly", "disabled", "required", "searching", "placeholder", "autoFocus", "allowClear", "searchOnChange", "decorateEnd", "decorateStart", "onBlur", "onFocus", "onSearch", "onChange", "onEnterPressed"];
13
+ var _excluded = ["ref", "value", "name", "invalid", "readOnly", "disabled", "required", "searching", "placeholder", "autoFocus", "hideHandle", "allowClear", "searchOnChange", "onBlur", "onFocus", "onSearch", "onChange", "onEnterPressed"];
14
14
  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; }
15
15
  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; }
16
16
  var Search = function Search(_ref) {
@@ -24,12 +24,11 @@ var Search = function Search(_ref) {
24
24
  searching = _ref.searching,
25
25
  placeholder = _ref.placeholder,
26
26
  autoFocus = _ref.autoFocus,
27
+ hideHandle = _ref.hideHandle,
27
28
  _ref$allowClear = _ref.allowClear,
28
29
  allowClear = _ref$allowClear === void 0 ? true : _ref$allowClear,
29
30
  _ref$searchOnChange = _ref.searchOnChange,
30
- searchOnChange = _ref$searchOnChange === void 0 ? true : _ref$searchOnChange,
31
- decorateEnd = _ref.decorateEnd,
32
- decorateStart = _ref.decorateStart,
31
+ searchOnChange = _ref$searchOnChange === void 0 ? false : _ref$searchOnChange,
33
32
  onBlur = _ref.onBlur,
34
33
  onFocus = _ref.onFocus,
35
34
  onSearch = _ref.onSearch,
@@ -70,13 +69,12 @@ var Search = function Search(_ref) {
70
69
  readOnly: readOnly,
71
70
  disabled: disabled,
72
71
  required: required,
73
- decorateStart: decorateStart,
74
- decorateEnd: /*#__PURE__*/jsxs(Fragment, {
75
- children: [decorateEnd, searching && /*#__PURE__*/jsx(Icon, {
72
+ actionButton: /*#__PURE__*/jsxs(Fragment, {
73
+ children: [searching && /*#__PURE__*/jsx(Icon, {
76
74
  className: "p-2",
77
75
  icon: CoreIcons.spinner,
78
76
  animate: "spin"
79
- }), !searching && /*#__PURE__*/jsx(Button, {
77
+ }), !searching && !hideHandle && /*#__PURE__*/jsx(Button, {
80
78
  tabIndex: -1,
81
79
  variant: "link",
82
80
  "aria-label": "search",
@@ -87,7 +85,7 @@ var Search = function Search(_ref) {
87
85
  })
88
86
  }, rest), {}, {
89
87
  children: /*#__PURE__*/jsx("input", {
90
- className: "appearance-none bg-transparent py-1 px-2 flex-1 border-none outline-none ring-0",
88
+ className: "appearance-none bg-transparent py-1 px-2 flex-1 border-none outline-none ring-0 peer",
91
89
  "aria-invalid": invalid,
92
90
  "aria-disabled": disabled,
93
91
  "aria-readonly": readOnly,
package/dist/esm/input/Switch.js CHANGED
@@ -92,7 +92,7 @@ var Switch = function Switch(_ref) {
92
92
  invalid: invalid,
93
93
  error: error
94
94
  }), label && /*#__PURE__*/jsx("span", {
95
- className: "flex-initial leading-5 truncate",
95
+ className: "flex-initial leading-tight truncate",
96
96
  children: label
97
97
  })]
98
98
  });
package/dist/esm/internal/FieldWrapper.js CHANGED
@@ -47,7 +47,7 @@ var FieldWrapper = function FieldWrapper(_ref) {
47
47
  width: width,
48
48
  flexBasis: width
49
49
  },
50
- children: [!isInner && /*#__PURE__*/jsxs("div", {
50
+ children: [!isInner && label && /*#__PURE__*/jsxs("div", {
51
51
  className: "flex flex-nowrap flex-content items-end gap-1 py-0.5 px-2",
52
52
  style: {
53
53
  width: inline ? labelWidth : undefined
package/dist/esm/internal/InputWrapper.js CHANGED
@@ -11,7 +11,7 @@ import { Fragment, jsxs, jsx } from 'react/jsx-runtime';
11
11
  import { ErrorIcon } from './ErrorIcon.js';
12
12
  import { FieldWrapper } from './FieldWrapper.js';
13
13
 
14
- var _excluded = ["invalid", "error", "allowClear", "showClear", "decorateStart", "decorateEnd", "decorateEndShowWhenEmpty", "decorateEndHideWhenEmpty", "children", "onClear", "noOutline", "noBorder", "textarea", "textareaExpandable", "data-inner", "data-open", "floatingExpand", "wrapperRef", "width"];
14
+ var _excluded = ["invalid", "error", "allowClear", "showClear", "decorateStart", "decorateEnd", "decorateEndShowWhenEmpty", "decorateEndHideWhenEmpty", "children", "onClear", "noOutline", "noBorder", "actionButton", "textarea", "textareaExpandable", "data-inner", "data-open", "floatingExpand", "wrapperRef", "width"];
15
15
  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; }
16
16
  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; }
17
17
  var InputWrapper = function InputWrapper(_ref) {
@@ -27,6 +27,7 @@ var InputWrapper = function InputWrapper(_ref) {
27
27
  onClear = _ref.onClear,
28
28
  noOutline = _ref.noOutline,
29
29
  noBorder = _ref.noBorder,
30
+ actionButton = _ref.actionButton,
30
31
  _ref$textarea = _ref.textarea,
31
32
  textarea = _ref$textarea === void 0 ? false : _ref$textarea,
32
33
  _ref$textareaExpandab = _ref.textareaExpandable,
@@ -68,7 +69,7 @@ var InputWrapper = function InputWrapper(_ref) {
68
69
  var el = /*#__PURE__*/jsxs("div", {
69
70
  role: "none",
70
71
  ref: wrapperRef,
71
- 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"),
72
+ 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"),
72
73
  onKeyDown: function onKeyDown(e) {
73
74
  return e.key === "Escape" && isExpanded && (setExpanded(false), e.stopPropagation());
74
75
  },
@@ -87,6 +88,10 @@ var InputWrapper = function InputWrapper(_ref) {
87
88
  onClickCapture: doFocus,
88
89
  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"),
89
90
  children: decorateEnd
91
+ }), actionButton && /*#__PURE__*/jsx("div", {
92
+ onClickCapture: doFocus,
93
+ className: classNames("fabric-decorate", "text-muted leading-none flex-content"),
94
+ children: actionButton
90
95
  }), textareaExpandable && /*#__PURE__*/jsx(Icon, {
91
96
  onClick: function onClick() {
92
97
  return setExpanded(!isExpanded);
package/dist/esm/select/Select.js CHANGED
@@ -242,7 +242,7 @@ var Select = function Select(_ref) {
242
242
  size: 1,
243
243
  ref: ref,
244
244
  autoFocus: autoFocus,
245
- 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"),
245
+ 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"),
246
246
  placeholder: isEmpty(state.value) ? placeholder : "",
247
247
  onChange: function onChange(evt) {
248
248
  return handleQuery(evt.target.value);
package/dist/types/input/Search.d.ts CHANGED
@@ -9,9 +9,13 @@ export interface SearchProps extends InputProps, RefProp<HTMLInputElement> {
9
9
  * search on value change
10
10
  */
11
11
  searchOnChange?: boolean;
12
+ /**
13
+ * hide search action handle
14
+ */
15
+ hideHandle?: boolean;
12
16
  /**
13
17
  * search handler
14
18
  */
15
19
  onSearch?: (query?: string) => void;
16
20
  }
17
- 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;
21
+ 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 CHANGED
@@ -1 +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;
1
+ 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 CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@react-fabric/form",
3
- "version": "1.0.0-beta.42",
3
+ "version": "1.0.0-beta.44",
4
4
  "description": "RUF: Form package",
5
5
  "author": "Adarsh Pastakia <adarshpastakia@outlook.com>",
6
6
  "license": "MIT",
@@ -41,9 +41,9 @@
41
41
  "@dnd-kit/utilities": "^3.2.2",
42
42
  "@floating-ui/react": "^0.26.24",
43
43
  "@hookform/resolvers": "^3.9.0",
44
- "@react-fabric/core": "^1.0.0-beta.42",
45
- "@react-fabric/date": "^1.0.0-beta.42",
46
- "@react-fabric/utilities": "^1.0.0-beta.42",
44
+ "@react-fabric/core": "^1.0.0-beta.44",
45
+ "@react-fabric/date": "^1.0.0-beta.44",
46
+ "@react-fabric/utilities": "^1.0.0-beta.44",
47
47
  "classnames": "^2.5.1",
48
48
  "color": "^4.2.3",
49
49
  "react-color": "^2.19.3",
@@ -63,5 +63,5 @@
63
63
  "node": ">=18.12.0",
64
64
  "npm": ">=8.19.0"
65
65
  },
66
- "gitHead": "61c9612bb2c7bc9a807f46922881432748c9e7a3"
66
+ "gitHead": "5c05c100917811fa40b30c98b94fd396b1f68ea9"
67
67
  }
package/src/input/Checkbox.tsx CHANGED
@@ -159,7 +159,7 @@ export const Checkbox = ({
159
159
  />
160
160
  <ErrorIcon invalid={invalid} error={error} />
161
161
  {label && (
162
- <span className="flex-initial leading-none truncate">{label}</span>
162
+ <span className="flex-initial leading-tight truncate">{label}</span>
163
163
  )}
164
164
  </label>
165
165
  );
package/src/input/File.tsx CHANGED
@@ -193,7 +193,7 @@ export const FileInput = ({
193
193
  >
194
194
  <input
195
195
  className={classNames(
196
- "appearance-none bg-transparent py-1 px-2 flex-1 border-none outline-none ring-0",
196
+ "appearance-none bg-transparent py-1 px-2 flex-1 border-none outline-none ring-0 peer",
197
197
  "fabric-fileInput",
198
198
  isArray(actualValue) && actualValue?.length && "text-(--fabric-bg)",
199
199
  )}
package/src/input/Number.tsx CHANGED
@@ -102,7 +102,7 @@ export const Number = ({
102
102
  {...rest}
103
103
  >
104
104
  <input
105
- className="appearance-none bg-transparent py-1 px-2 flex-1 border-none outline-none ring-0"
105
+ className="appearance-none bg-transparent py-1 px-2 flex-1 border-none outline-none ring-0 peer"
106
106
  aria-invalid={invalid}
107
107
  aria-disabled={disabled}
108
108
  aria-readonly={readOnly}
package/src/input/Password.tsx CHANGED
@@ -99,8 +99,9 @@ export const Password = ({
99
99
  disabled={disabled}
100
100
  required={required}
101
101
  {...rest}
102
- decorateEnd={
103
- showToggle && (
102
+ actionButton={
103
+ showToggle &&
104
+ actualValue && (
104
105
  <Tooltip
105
106
  color="warning"
106
107
  content={t(show ? "password.hide" : "password.show")}
@@ -118,7 +119,7 @@ export const Password = ({
118
119
  }
119
120
  >
120
121
  <input
121
- className="appearance-none bg-transparent py-1 px-2 flex-1 border-none outline-none ring-0"
122
+ className="appearance-none bg-transparent py-1 px-2 flex-1 border-none outline-none ring-0 peer"
122
123
  aria-invalid={invalid}
123
124
  aria-disabled={disabled}
124
125
  aria-readonly={readOnly}
package/src/input/Radio.tsx CHANGED
@@ -139,7 +139,7 @@ export const Radio = ({
139
139
  icon={iconOff}
140
140
  />
141
141
  {label && (
142
- <span className="flex-initial leading-none truncate">{label}</span>
142
+ <span className="flex-initial leading-tight truncate">{label}</span>
143
143
  )}
144
144
  </label>
145
145
  );
package/src/input/Search.tsx CHANGED
@@ -46,6 +46,10 @@ export interface SearchProps extends InputProps, RefProp<HTMLInputElement> {
46
46
  * search on value change
47
47
  */
48
48
  searchOnChange?: boolean;
49
+ /**
50
+ * hide search action handle
51
+ */
52
+ hideHandle?: boolean;
49
53
  /**
50
54
  * search handler
51
55
  */
@@ -63,10 +67,9 @@ export const Search = ({
63
67
  searching,
64
68
  placeholder,
65
69
  autoFocus,
70
+ hideHandle,
66
71
  allowClear = true,
67
- searchOnChange = true,
68
- decorateEnd,
69
- decorateStart,
72
+ searchOnChange = false,
70
73
  onBlur,
71
74
  onFocus,
72
75
  onSearch,
@@ -117,14 +120,12 @@ export const Search = ({
117
120
  readOnly={readOnly}
118
121
  disabled={disabled}
119
122
  required={required}
120
- decorateStart={decorateStart}
121
- decorateEnd={
123
+ actionButton={
122
124
  <Fragment>
123
- {decorateEnd}
124
125
  {searching && (
125
126
  <Icon className="p-2" icon={CoreIcons.spinner} animate="spin" />
126
127
  )}
127
- {!searching && (
128
+ {!searching && !hideHandle && (
128
129
  <Button
129
130
  tabIndex={-1}
130
131
  variant="link"
@@ -139,7 +140,7 @@ export const Search = ({
139
140
  {...rest}
140
141
  >
141
142
  <input
142
- className="appearance-none bg-transparent py-1 px-2 flex-1 border-none outline-none ring-0"
143
+ className="appearance-none bg-transparent py-1 px-2 flex-1 border-none outline-none ring-0 peer"
143
144
  aria-invalid={invalid}
144
145
  aria-disabled={disabled}
145
146
  aria-readonly={readOnly}
package/src/input/Switch.tsx CHANGED
@@ -197,7 +197,7 @@ export const Switch = ({
197
197
  </div>
198
198
  <ErrorIcon invalid={invalid} error={error} />
199
199
  {label && (
200
- <span className="flex-initial leading-5 truncate">{label}</span>
200
+ <span className="flex-initial leading-tight truncate">{label}</span>
201
201
  )}
202
202
  </label>
203
203
  );
package/src/internal/FieldWrapper.tsx CHANGED
@@ -47,7 +47,7 @@ export const FieldWrapper = ({
47
47
  data-ref="fieldWrapper"
48
48
  style={{ width, flexBasis: width }}
49
49
  >
50
- {!isInner && (
50
+ {!isInner && label && (
51
51
  <div
52
52
  className="flex flex-nowrap flex-content items-end gap-1 py-0.5 px-2"
53
53
  style={{ width: inline ? labelWidth : undefined }}
package/src/internal/InputWrapper.tsx CHANGED
@@ -49,6 +49,7 @@ export const InputWrapper = ({
49
49
  onClear,
50
50
  noOutline,
51
51
  noBorder,
52
+ actionButton,
52
53
  textarea = false,
53
54
  textareaExpandable = false,
54
55
  "data-inner": isInner,
@@ -107,7 +108,7 @@ export const InputWrapper = ({
107
108
  invalid && "fabric-invalidWrapper",
108
109
  !noOutline &&
109
110
  !noBorder &&
110
- "bg-(--fabric-input) outline overflow-hidden",
111
+ "bg-(--fabric-input) outline -outline-offset-1 overflow-hidden",
111
112
  "flex flex-nowrap items-center flex-1",
112
113
  textarea ? "rounded-capped group" : "rounded",
113
114
  isExpanded
@@ -116,7 +117,7 @@ export const InputWrapper = ({
116
117
  ? "absolute inset-x-0"
117
118
  : "relative",
118
119
  !noOutline &&
119
- "after:absolute after:bottom-0 after:h-px after:bg-primary-500 after:mx-auto",
120
+ "after:absolute after:bottom-0 after:h-[2px] after:bg-primary-500 after:mx-auto",
120
121
  )}
121
122
  onKeyDown={(e) =>
122
123
  e.key === "Escape" &&
@@ -164,6 +165,17 @@ export const InputWrapper = ({
164
165
  {decorateEnd}
165
166
  </div>
166
167
  )}
168
+ {actionButton && (
169
+ <div
170
+ onClickCapture={doFocus}
171
+ className={classNames(
172
+ "fabric-decorate",
173
+ "text-muted leading-none flex-content",
174
+ )}
175
+ >
176
+ {actionButton}
177
+ </div>
178
+ )}
167
179
  {textareaExpandable && (
168
180
  <Icon
169
181
  onClick={() => setExpanded(!isExpanded)}
package/src/select/Select.tsx CHANGED
@@ -296,7 +296,7 @@ export const Select = <T extends AnyObject = string>({
296
296
  ref={ref}
297
297
  autoFocus={autoFocus}
298
298
  className={classNames(
299
- "appearance-none bg-transparent outline-none border-none ring-0 flex-1",
299
+ "appearance-none bg-transparent outline-none border-none ring-0 flex-1 peer",
300
300
  disabled && "cursor-not-allowed pointer-events-none",
301
301
  multiple && "min-w-24",
302
302
  )}