@react-fabric/form 1.0.0-beta.24 → 1.0.0-beta.26

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 (16) hide show
  1. package/dist/cjs/input/ArrayInput.js +7 -2
  2. package/dist/cjs/input/ColorInput.js +1 -5
  3. package/dist/cjs/input/ColorPicker.js +0 -33
  4. package/dist/cjs/input/ColorPicker.module.css +1 -1
  5. package/dist/cjs/internal/FieldWrapper.js +3 -1
  6. package/dist/esm/input/ArrayInput.js +7 -2
  7. package/dist/esm/input/ColorInput.js +1 -5
  8. package/dist/esm/input/ColorPicker.js +0 -33
  9. package/dist/esm/input/ColorPicker.module.css +1 -1
  10. package/dist/esm/internal/FieldWrapper.js +3 -1
  11. package/package.json +6 -6
  12. package/src/input/ArrayInput.tsx +10 -3
  13. package/src/input/ColorInput.tsx +1 -3
  14. package/src/input/ColorPicker.module.css +4 -0
  15. package/src/input/ColorPicker.tsx +0 -33
  16. package/src/internal/FieldWrapper.tsx +2 -1
package/dist/cjs/input/ArrayInput.js CHANGED
@@ -140,13 +140,14 @@ var ArrayInput = function ArrayInput(_ref) {
140
140
  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)
141
141
  }) : {}),
142
142
  children: /*#__PURE__*/jsxRuntime.jsx(core$1.Button, {
143
+ size: "sm",
143
144
  "aria-label": "Add item",
144
145
  icon: core$1.CoreIcons.insert,
145
146
  onClick: function onClick() {
146
147
  return handleAdd(onAdd === null || onAdd === void 0 ? void 0 : onAdd());
147
148
  },
148
149
  "data-invalid": !!error,
149
- disabled: !!disabled || readOnly || fields.length < maxItems,
150
+ disabled: !!disabled || readOnly || fields.length > maxItems,
150
151
  className: classNames(ArrayInput_module.addButton, "me-10"),
151
152
  children: addLabel !== null && addLabel !== void 0 ? addLabel : t("addArray")
152
153
  })
@@ -155,7 +156,11 @@ var ArrayInput = function ArrayInput(_ref) {
155
156
  }, [error, fields, handleAdd, disabled, readOnly, addLabel, maxItems]);
156
157
  return /*#__PURE__*/jsxRuntime.jsxs("div", {
157
158
  className: ArrayInput_module.arrayInput,
158
- children: [!fixedList && onAdd && buttonPosition !== "bottom" && addButton, /*#__PURE__*/jsxRuntime.jsx(FieldWrapper.FieldWrapper, _objectSpread(_objectSpread({}, rest), {}, {
159
+ children: [/*#__PURE__*/jsxRuntime.jsx(FieldWrapper.FieldWrapper, _objectSpread(_objectSpread({}, rest), {}, {
160
+ appendLabel: /*#__PURE__*/jsxRuntime.jsx("div", {
161
+ className: "-me-2",
162
+ children: !fixedList && onAdd && buttonPosition !== "bottom" && addButton
163
+ }),
159
164
  children: /*#__PURE__*/jsxRuntime.jsx(Wrapper, {
160
165
  children: fields.map(function (item, index) {
161
166
  return /*#__PURE__*/jsxRuntime.jsxs(SortableItem, {
package/dist/cjs/input/ColorInput.js CHANGED
@@ -108,11 +108,7 @@ var ColorInput = function ColorInput(_ref) {
108
108
  zIndex: "var(--z-popover)"
109
109
  }, floatingStyles),
110
110
  "data-testid": "dropdown-body"
111
- }, getFloatingProps({
112
- onClick: function onClick(e) {
113
- return e.stopPropagation();
114
- }
115
- })), {}, {
111
+ }, getFloatingProps()), {}, {
116
112
  children: [/*#__PURE__*/jsxRuntime.jsx(ColorPicker.ColorPicker, _objectSpread(_objectSpread({}, rest), {}, {
117
113
  onChange: handleChange,
118
114
  defaultColor: defaultColor,
package/dist/cjs/input/ColorPicker.js CHANGED
@@ -41,12 +41,9 @@ var ColorPicker = /*#__PURE__*/react.memo(function (_ref) {
41
41
  styles: {
42
42
  "default": {
43
43
  hue: {
44
- borderRadius: "99px",
45
44
  boxShadow: "0 0 1px 1px var(--color-shadow)"
46
45
  },
47
46
  alpha: {
48
- height: "1rem",
49
- borderRadius: "99px",
50
47
  backgroundColor: "var(--fabric-bg)",
51
48
  boxShadow: "0 0 1px 1px var(--color-shadow)"
52
49
  },
@@ -63,36 +60,6 @@ var ColorPicker = /*#__PURE__*/react.memo(function (_ref) {
63
60
  backgroundColor: "var(--fabric-bg)",
64
61
  boxShadow: "0 0 0 1px var(--color-shadow), 0 0 8px var(--fabric-shadow)"
65
62
  },
66
- Alpha: {
67
- alpha: {
68
- paddingRight: "calc(1rem - 2px)"
69
- },
70
- slider: {
71
- width: "calc(1rem - 2px)",
72
- borderRadius: "99px",
73
- height: "calc(1rem - 2px)",
74
- transform: "none"
75
- }
76
- },
77
- Hue: {
78
- hue: {
79
- paddingRight: "calc(1rem - 2px)"
80
- },
81
- slider: {
82
- width: "calc(1rem - 2px)",
83
- borderRadius: "99px",
84
- height: "calc(1rem - 2px)",
85
- transform: "none"
86
- }
87
- },
88
- Saturation: {
89
- circle: {
90
- width: "0.5rem",
91
- borderRadius: "99px",
92
- height: "0.5rem",
93
- transform: "translate(-0.25rem, -0.25rem)"
94
- }
95
- },
96
63
  checkboard: {
97
64
  white: "transparent",
98
65
  black: "red"
package/dist/cjs/input/ColorPicker.module.css CHANGED
@@ -1 +1 @@
1
- @layer comp{.colorPicker{--color-shadow:theme(borderColor.base);& input{background-color:theme(backgroundColor.base);border:1px solid theme(borderColor.base);border-radius:theme(borderRadius.sm);box-shadow:none;color:theme(textColor.base);line-height:2;padding:0 4px!important;&:focus{border-color:theme(borderColor.primary.DEFAULT)}}& label{color:theme(textColor.base)}& :global(.flexbox-fix){border-color:theme(borderColor.muted);justify-content:center;&>div>div{text-align:center}& span>div{box-shadow:inset 0 0 1px 1px theme(borderColor.base)!important}}}}
1
+ @layer comp{.colorPicker{--color-shadow:theme(borderColor.base);& input{background-color:theme(backgroundColor.base);border:1px solid theme(borderColor.base);border-radius:theme(borderRadius.sm);box-shadow:none;color:theme(textColor.base);line-height:2;padding:0 4px!important;&:focus{border-color:theme(borderColor.primary.DEFAULT)}}& label{color:theme(textColor.base)}& :global(.flexbox-fix){border-color:theme(borderColor.muted);justify-content:center;&>div>div{text-align:center}& span>div{box-shadow:inset 0 0 1px 1px theme(borderColor.base)!important}}& :global(.saturation-black)~div{pointer-events:none}}}
package/dist/cjs/internal/FieldWrapper.js CHANGED
@@ -49,7 +49,7 @@ var FieldWrapper = function FieldWrapper(_ref) {
49
49
  flexBasis: width
50
50
  },
51
51
  children: [!isInner && /*#__PURE__*/jsxRuntime.jsxs("div", {
52
- className: "flex flex-nowrap flex-content gap-1 py-0.5 px-2",
52
+ className: "flex flex-nowrap flex-content items-end gap-1 py-0.5 px-2",
53
53
  style: {
54
54
  width: inline ? labelWidth : undefined
55
55
  },
@@ -64,6 +64,8 @@ var FieldWrapper = function FieldWrapper(_ref) {
64
64
  }), required && /*#__PURE__*/jsxRuntime.jsx("span", {
65
65
  className: "text-danger-500 select-none flex-content text-[10px]",
66
66
  children: "\u273D"
67
+ }), /*#__PURE__*/jsxRuntime.jsx("div", {
68
+ className: "flex-1"
67
69
  }), appendLabel && /*#__PURE__*/jsxRuntime.jsx("span", {
68
70
  className: "flex-content",
69
71
  children: appendLabel
package/dist/esm/input/ArrayInput.js CHANGED
@@ -140,13 +140,14 @@ var ArrayInput = function ArrayInput(_ref) {
140
140
  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)
141
141
  }) : {}),
142
142
  children: /*#__PURE__*/jsx(Button, {
143
+ size: "sm",
143
144
  "aria-label": "Add item",
144
145
  icon: CoreIcons.insert,
145
146
  onClick: function onClick() {
146
147
  return handleAdd(onAdd === null || onAdd === void 0 ? void 0 : onAdd());
147
148
  },
148
149
  "data-invalid": !!error,
149
- disabled: !!disabled || readOnly || fields.length < maxItems,
150
+ disabled: !!disabled || readOnly || fields.length > maxItems,
150
151
  className: classNames(classes.addButton, "me-10"),
151
152
  children: addLabel !== null && addLabel !== void 0 ? addLabel : t("addArray")
152
153
  })
@@ -155,7 +156,11 @@ var ArrayInput = function ArrayInput(_ref) {
155
156
  }, [error, fields, handleAdd, disabled, readOnly, addLabel, maxItems]);
156
157
  return /*#__PURE__*/jsxs("div", {
157
158
  className: classes.arrayInput,
158
- children: [!fixedList && onAdd && buttonPosition !== "bottom" && addButton, /*#__PURE__*/jsx(FieldWrapper, _objectSpread(_objectSpread({}, rest), {}, {
159
+ children: [/*#__PURE__*/jsx(FieldWrapper, _objectSpread(_objectSpread({}, rest), {}, {
160
+ appendLabel: /*#__PURE__*/jsx("div", {
161
+ className: "-me-2",
162
+ children: !fixedList && onAdd && buttonPosition !== "bottom" && addButton
163
+ }),
159
164
  children: /*#__PURE__*/jsx(Wrapper, {
160
165
  children: fields.map(function (item, index) {
161
166
  return /*#__PURE__*/jsxs(SortableItem, {
package/dist/esm/input/ColorInput.js CHANGED
@@ -108,11 +108,7 @@ var ColorInput = function ColorInput(_ref) {
108
108
  zIndex: "var(--z-popover)"
109
109
  }, floatingStyles),
110
110
  "data-testid": "dropdown-body"
111
- }, getFloatingProps({
112
- onClick: function onClick(e) {
113
- return e.stopPropagation();
114
- }
115
- })), {}, {
111
+ }, getFloatingProps()), {}, {
116
112
  children: [/*#__PURE__*/jsx(ColorPicker, _objectSpread(_objectSpread({}, rest), {}, {
117
113
  onChange: handleChange,
118
114
  defaultColor: defaultColor,
package/dist/esm/input/ColorPicker.js CHANGED
@@ -41,12 +41,9 @@ var ColorPicker = /*#__PURE__*/memo(function (_ref) {
41
41
  styles: {
42
42
  "default": {
43
43
  hue: {
44
- borderRadius: "99px",
45
44
  boxShadow: "0 0 1px 1px var(--color-shadow)"
46
45
  },
47
46
  alpha: {
48
- height: "1rem",
49
- borderRadius: "99px",
50
47
  backgroundColor: "var(--fabric-bg)",
51
48
  boxShadow: "0 0 1px 1px var(--color-shadow)"
52
49
  },
@@ -63,36 +60,6 @@ var ColorPicker = /*#__PURE__*/memo(function (_ref) {
63
60
  backgroundColor: "var(--fabric-bg)",
64
61
  boxShadow: "0 0 0 1px var(--color-shadow), 0 0 8px var(--fabric-shadow)"
65
62
  },
66
- Alpha: {
67
- alpha: {
68
- paddingRight: "calc(1rem - 2px)"
69
- },
70
- slider: {
71
- width: "calc(1rem - 2px)",
72
- borderRadius: "99px",
73
- height: "calc(1rem - 2px)",
74
- transform: "none"
75
- }
76
- },
77
- Hue: {
78
- hue: {
79
- paddingRight: "calc(1rem - 2px)"
80
- },
81
- slider: {
82
- width: "calc(1rem - 2px)",
83
- borderRadius: "99px",
84
- height: "calc(1rem - 2px)",
85
- transform: "none"
86
- }
87
- },
88
- Saturation: {
89
- circle: {
90
- width: "0.5rem",
91
- borderRadius: "99px",
92
- height: "0.5rem",
93
- transform: "translate(-0.25rem, -0.25rem)"
94
- }
95
- },
96
63
  checkboard: {
97
64
  white: "transparent",
98
65
  black: "red"
package/dist/esm/input/ColorPicker.module.css CHANGED
@@ -1 +1 @@
1
- @layer comp{.colorPicker{--color-shadow:theme(borderColor.base);& input{background-color:theme(backgroundColor.base);border:1px solid theme(borderColor.base);border-radius:theme(borderRadius.sm);box-shadow:none;color:theme(textColor.base);line-height:2;padding:0 4px!important;&:focus{border-color:theme(borderColor.primary.DEFAULT)}}& label{color:theme(textColor.base)}& :global(.flexbox-fix){border-color:theme(borderColor.muted);justify-content:center;&>div>div{text-align:center}& span>div{box-shadow:inset 0 0 1px 1px theme(borderColor.base)!important}}}}
1
+ @layer comp{.colorPicker{--color-shadow:theme(borderColor.base);& input{background-color:theme(backgroundColor.base);border:1px solid theme(borderColor.base);border-radius:theme(borderRadius.sm);box-shadow:none;color:theme(textColor.base);line-height:2;padding:0 4px!important;&:focus{border-color:theme(borderColor.primary.DEFAULT)}}& label{color:theme(textColor.base)}& :global(.flexbox-fix){border-color:theme(borderColor.muted);justify-content:center;&>div>div{text-align:center}& span>div{box-shadow:inset 0 0 1px 1px theme(borderColor.base)!important}}& :global(.saturation-black)~div{pointer-events:none}}}
package/dist/esm/internal/FieldWrapper.js CHANGED
@@ -49,7 +49,7 @@ var FieldWrapper = function FieldWrapper(_ref) {
49
49
  flexBasis: width
50
50
  },
51
51
  children: [!isInner && /*#__PURE__*/jsxs("div", {
52
- className: "flex flex-nowrap flex-content gap-1 py-0.5 px-2",
52
+ className: "flex flex-nowrap flex-content items-end gap-1 py-0.5 px-2",
53
53
  style: {
54
54
  width: inline ? labelWidth : undefined
55
55
  },
@@ -64,6 +64,8 @@ var FieldWrapper = function FieldWrapper(_ref) {
64
64
  }), required && /*#__PURE__*/jsx("span", {
65
65
  className: "text-danger-500 select-none flex-content text-[10px]",
66
66
  children: "\u273D"
67
+ }), /*#__PURE__*/jsx("div", {
68
+ className: "flex-1"
67
69
  }), appendLabel && /*#__PURE__*/jsx("span", {
68
70
  className: "flex-content",
69
71
  children: appendLabel
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@react-fabric/form",
3
- "version": "1.0.0-beta.24",
3
+ "version": "1.0.0-beta.26",
4
4
  "description": "RUF: Form package",
5
5
  "author": "Adarsh Pastakia <adarshpastakia@outlook.com>",
6
6
  "license": "MIT",
@@ -39,8 +39,8 @@
39
39
  "@dnd-kit/utilities": "^3.2.2",
40
40
  "@floating-ui/react": "^0.26.24",
41
41
  "@hookform/resolvers": "^3.9.0",
42
- "@react-fabric/core": "^1.0.0-beta.24",
43
- "@react-fabric/utilities": "^1.0.0-beta.24",
42
+ "@react-fabric/core": "^1.0.0-beta.26",
43
+ "@react-fabric/utilities": "^1.0.0-beta.26",
44
44
  "classnames": "^2.5.1",
45
45
  "color": "^4.2.3",
46
46
  "react-color": "^2.19.3",
@@ -48,8 +48,8 @@
48
48
  },
49
49
  "peerDependencies": {
50
50
  "i18next": "^23.15.1",
51
- "react": ">=18.0.0 <20.0.0",
52
- "react-dom": ">=18.0.0 <20.0.0",
51
+ "react": "^19.0.0",
52
+ "react-dom": "^19.0.0",
53
53
  "react-i18next": "^15.0.2"
54
54
  },
55
55
  "devDependencies": {
@@ -60,5 +60,5 @@
60
60
  "node": ">=18.12.0",
61
61
  "npm": ">=8.19.0"
62
62
  },
63
- "gitHead": "ccdec75c17dcc549e7a0cad3fd1fda2001c5f990"
63
+ "gitHead": "452f821dc8b22c5765b3858cc53ad9d7e2f9bcf1"
64
64
  }
package/src/input/ArrayInput.tsx CHANGED
@@ -275,11 +275,12 @@ export const ArrayInput = ({
275
275
  }
276
276
  >
277
277
  <Button
278
+ size="sm"
278
279
  aria-label="Add item"
279
280
  icon={CoreIcons.insert}
280
281
  onClick={() => handleAdd(onAdd?.())}
281
282
  data-invalid={!!error}
282
- disabled={!!disabled || readOnly || fields.length < maxItems}
283
+ disabled={!!disabled || readOnly || fields.length > maxItems}
283
284
  className={classNames(classes.addButton, "me-10")}
284
285
  >
285
286
  {addLabel ?? t("addArray")}
@@ -292,8 +293,14 @@ export const ArrayInput = ({
292
293
 
293
294
  return (
294
295
  <div className={classes.arrayInput}>
295
- {!fixedList && onAdd && buttonPosition !== "bottom" && addButton}
296
- <FieldWrapper {...rest}>
296
+ <FieldWrapper
297
+ {...rest}
298
+ appendLabel={
299
+ <div className="-me-2">
300
+ {!fixedList && onAdd && buttonPosition !== "bottom" && addButton}
301
+ </div>
302
+ }
303
+ >
297
304
  <Wrapper>
298
305
  {fields.map((item, index) => (
299
306
  <SortableItem
package/src/input/ColorInput.tsx CHANGED
@@ -171,9 +171,7 @@ export const ColorInput = ({
171
171
  ...floatingStyles,
172
172
  }}
173
173
  data-testid="dropdown-body"
174
- {...getFloatingProps({
175
- onClick: (e) => e.stopPropagation(),
176
- })}
174
+ {...getFloatingProps()}
177
175
  >
178
176
  <ColorPicker
179
177
  {...rest}
package/src/input/ColorPicker.module.css CHANGED
@@ -57,5 +57,9 @@
57
57
  box-shadow: 0 0 1px 1px theme(borderColor.base) inset !important;
58
58
  }
59
59
  }
60
+
61
+ & :global(.saturation-black) ~ div {
62
+ pointer-events: none;
63
+ }
60
64
  }
61
65
  }
package/src/input/ColorPicker.tsx CHANGED
@@ -135,12 +135,9 @@ export const ColorPicker: FC<ColorProps> = memo(
135
135
  {
136
136
  default: {
137
137
  hue: {
138
- borderRadius: "99px",
139
138
  boxShadow: "0 0 1px 1px var(--color-shadow)",
140
139
  },
141
140
  alpha: {
142
- height: "1rem",
143
- borderRadius: "99px",
144
141
  backgroundColor: "var(--fabric-bg)",
145
142
  boxShadow: "0 0 1px 1px var(--color-shadow)",
146
143
  },
@@ -158,36 +155,6 @@ export const ColorPicker: FC<ColorProps> = memo(
158
155
  boxShadow:
159
156
  "0 0 0 1px var(--color-shadow), 0 0 8px var(--fabric-shadow)",
160
157
  },
161
- Alpha: {
162
- alpha: {
163
- paddingRight: "calc(1rem - 2px)",
164
- },
165
- slider: {
166
- width: "calc(1rem - 2px)",
167
- borderRadius: "99px",
168
- height: "calc(1rem - 2px)",
169
- transform: "none",
170
- },
171
- },
172
- Hue: {
173
- hue: {
174
- paddingRight: "calc(1rem - 2px)",
175
- },
176
- slider: {
177
- width: "calc(1rem - 2px)",
178
- borderRadius: "99px",
179
- height: "calc(1rem - 2px)",
180
- transform: "none",
181
- },
182
- },
183
- Saturation: {
184
- circle: {
185
- width: "0.5rem",
186
- borderRadius: "99px",
187
- height: "0.5rem",
188
- transform: "translate(-0.25rem, -0.25rem)",
189
- },
190
- },
191
158
  checkboard: {
192
159
  white: "transparent",
193
160
  black: "red",
package/src/internal/FieldWrapper.tsx CHANGED
@@ -50,7 +50,7 @@ export const FieldWrapper = ({
50
50
  >
51
51
  {!isInner && (
52
52
  <div
53
- className="flex flex-nowrap flex-content gap-1 py-0.5 px-2"
53
+ className="flex flex-nowrap flex-content items-end gap-1 py-0.5 px-2"
54
54
  style={{ width: inline ? labelWidth : undefined }}
55
55
  >
56
56
  <label
@@ -73,6 +73,7 @@ export const FieldWrapper = ({
73
73
  ✽
74
74
  </span>
75
75
  )}
76
+ <div className="flex-1" />
76
77
  {appendLabel && <span className="flex-content">{appendLabel}</span>}
77
78
  </div>
78
79
  )}