@react-fabric/form 1.0.0-beta.53 → 1.0.0-beta.55
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.
- package/dist/cjs/input/ColorPicker.js +52 -46
- package/dist/cjs/input/Switch.js +3 -3
- package/dist/cjs/utils/eventHandlers.js +4 -0
- package/dist/esm/input/ColorPicker.js +52 -46
- package/dist/esm/input/Switch.js +3 -3
- package/dist/esm/utils/eventHandlers.js +4 -0
- package/dist/types/utils/eventHandlers.d.ts +1 -1
- package/package.json +4 -4
- package/src/input/ColorPicker.tsx +48 -43
- package/src/input/Switch.tsx +3 -3
- package/src/input/Textarea.tsx +1 -1
- package/src/utils/eventHandlers.ts +5 -1
|
@@ -44,54 +44,60 @@ var ColorPicker = /*#__PURE__*/react.memo(function (_ref) {
|
|
|
44
44
|
return onChange(e);
|
|
45
45
|
});
|
|
46
46
|
}, [onChange]);
|
|
47
|
-
return /*#__PURE__*/jsxRuntime.jsx(
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
47
|
+
return /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
48
|
+
// prevent default on mouse down to avoid selection issues
|
|
49
|
+
onMouseDown: function onMouseDown(e) {
|
|
50
|
+
return e.preventDefault();
|
|
51
|
+
},
|
|
52
|
+
children: /*#__PURE__*/jsxRuntime.jsx(reactColor.SketchPicker, {
|
|
53
|
+
width: "16rem",
|
|
54
|
+
className: "fabric-colorPicker",
|
|
55
|
+
styles: {
|
|
56
|
+
"default": {
|
|
57
|
+
hue: {
|
|
58
|
+
boxShadow: "0 0 1px 1px var(--color-shadow)"
|
|
59
|
+
},
|
|
60
|
+
alpha: {
|
|
61
|
+
backgroundColor: "var(--fabric-bg)",
|
|
62
|
+
boxShadow: "0 0 1px 1px var(--color-shadow)"
|
|
63
|
+
},
|
|
64
|
+
color: {
|
|
65
|
+
boxShadow: "0 0 1px 1px var(--color-shadow)"
|
|
66
|
+
},
|
|
67
|
+
saturation: {
|
|
68
|
+
boxShadow: "0 0 1px 1px var(--color-shadow)"
|
|
69
|
+
},
|
|
70
|
+
activeColor: {
|
|
71
|
+
boxShadow: "0 0 1px 1px var(--color-shadow)"
|
|
72
|
+
},
|
|
73
|
+
picker: {
|
|
74
|
+
backgroundColor: "var(--fabric-bg)",
|
|
75
|
+
boxShadow: "0 0 0 1px var(--color-shadow), 0 0 8px var(--fabric-shadow)"
|
|
76
|
+
},
|
|
77
|
+
checkboard: {
|
|
78
|
+
white: "transparent",
|
|
79
|
+
black: "red"
|
|
80
|
+
}
|
|
75
81
|
}
|
|
82
|
+
},
|
|
83
|
+
color: actualValue,
|
|
84
|
+
presetColors: swatches,
|
|
85
|
+
disableAlpha: hideAlpha,
|
|
86
|
+
onChange: function onChange(_ref2) {
|
|
87
|
+
var _ref2$rgb = _ref2.rgb,
|
|
88
|
+
_ref2$rgb$a = _ref2$rgb.a,
|
|
89
|
+
a = _ref2$rgb$a === void 0 ? 1 : _ref2$rgb$a,
|
|
90
|
+
rgb = _objectWithoutProperties(_ref2$rgb, _excluded);
|
|
91
|
+
return setActualValue(Color(rgb).alpha(a)[a < 1 ? "hexa" : "hex"]());
|
|
92
|
+
},
|
|
93
|
+
onChangeComplete: function onChangeComplete(_ref3) {
|
|
94
|
+
var _ref3$rgb = _ref3.rgb,
|
|
95
|
+
_ref3$rgb$a = _ref3$rgb.a,
|
|
96
|
+
a = _ref3$rgb$a === void 0 ? 1 : _ref3$rgb$a,
|
|
97
|
+
rgb = _objectWithoutProperties(_ref3$rgb, _excluded2);
|
|
98
|
+
return handleChange(Color(rgb).alpha(a)[a < 1 ? "hexa" : "hex"]());
|
|
76
99
|
}
|
|
77
|
-
}
|
|
78
|
-
color: actualValue,
|
|
79
|
-
presetColors: swatches,
|
|
80
|
-
disableAlpha: hideAlpha,
|
|
81
|
-
onChange: function onChange(_ref2) {
|
|
82
|
-
var _ref2$rgb = _ref2.rgb,
|
|
83
|
-
_ref2$rgb$a = _ref2$rgb.a,
|
|
84
|
-
a = _ref2$rgb$a === void 0 ? 1 : _ref2$rgb$a,
|
|
85
|
-
rgb = _objectWithoutProperties(_ref2$rgb, _excluded);
|
|
86
|
-
return setActualValue(Color(rgb).alpha(a)[a < 1 ? "hexa" : "hex"]());
|
|
87
|
-
},
|
|
88
|
-
onChangeComplete: function onChangeComplete(_ref3) {
|
|
89
|
-
var _ref3$rgb = _ref3.rgb,
|
|
90
|
-
_ref3$rgb$a = _ref3$rgb.a,
|
|
91
|
-
a = _ref3$rgb$a === void 0 ? 1 : _ref3$rgb$a,
|
|
92
|
-
rgb = _objectWithoutProperties(_ref3$rgb, _excluded2);
|
|
93
|
-
return handleChange(Color(rgb).alpha(a)[a < 1 ? "hexa" : "hex"]());
|
|
94
|
-
}
|
|
100
|
+
})
|
|
95
101
|
});
|
|
96
102
|
});
|
|
97
103
|
|
package/dist/cjs/input/Switch.js
CHANGED
|
@@ -60,7 +60,7 @@ var Switch = function Switch(_ref) {
|
|
|
60
60
|
width: width
|
|
61
61
|
},
|
|
62
62
|
children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
63
|
-
className: classNames(actualValue && getColor.getBgClass(color ? "".concat(color, "-500") : "primary-500"), !actualValue && (defaultColor ? getColor.getBgClass("".concat(defaultColor, "-500")) : "bg-tint-200"), "relative grid grid-cols-2 items-center h-
|
|
63
|
+
className: classNames(actualValue && getColor.getBgClass(color ? "".concat(color, "-500") : "primary-500"), !actualValue && (defaultColor ? getColor.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"),
|
|
64
64
|
style: {
|
|
65
65
|
backgroundColor: actualValue ? getColor.getColor(color) : getColor.getColor(defaultColor)
|
|
66
66
|
},
|
|
@@ -79,9 +79,9 @@ var Switch = function Switch(_ref) {
|
|
|
79
79
|
onChange: handleChange
|
|
80
80
|
}, rest)), /*#__PURE__*/jsxRuntime.jsx("span", {
|
|
81
81
|
"aria-hidden": "true",
|
|
82
|
-
className: classNames(!disabled && "shadow-sm", actualValue ? "translate-x-[100%]" : "translate-x-0", "pointer-events-none inline-block h-
|
|
82
|
+
className: classNames(!disabled && "shadow-sm", actualValue ? "translate-x-[100%]" : "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"),
|
|
83
83
|
style: {
|
|
84
|
-
width: "calc(50% - 0.
|
|
84
|
+
width: "calc(50% - 0.25em)"
|
|
85
85
|
}
|
|
86
86
|
}), (!!onLabel || !!offLabel) && /*#__PURE__*/jsxRuntime.jsxs(react.Fragment, {
|
|
87
87
|
children: [/*#__PURE__*/jsxRuntime.jsx("span", {
|
|
@@ -42,6 +42,10 @@ var useHandleEnter = function useHandleEnter(callback) {
|
|
|
42
42
|
if (tree && e.key !== "Escape") {
|
|
43
43
|
e === null || e === void 0 || e.stopPropagation();
|
|
44
44
|
}
|
|
45
|
+
// blur input on escape key press
|
|
46
|
+
if (e.key === "Escape") {
|
|
47
|
+
e.currentTarget.blur();
|
|
48
|
+
}
|
|
45
49
|
if (!e.shiftKey && !e.altKey && !e.metaKey && e.key === "Enter" && callback) {
|
|
46
50
|
if (stopPropagation) e === null || e === void 0 || e.stopPropagation();
|
|
47
51
|
cbHandle(e);
|
|
@@ -44,54 +44,60 @@ var ColorPicker = /*#__PURE__*/memo(function (_ref) {
|
|
|
44
44
|
return onChange(e);
|
|
45
45
|
});
|
|
46
46
|
}, [onChange]);
|
|
47
|
-
return /*#__PURE__*/jsx(
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
47
|
+
return /*#__PURE__*/jsx("div", {
|
|
48
|
+
// prevent default on mouse down to avoid selection issues
|
|
49
|
+
onMouseDown: function onMouseDown(e) {
|
|
50
|
+
return e.preventDefault();
|
|
51
|
+
},
|
|
52
|
+
children: /*#__PURE__*/jsx(SketchPicker, {
|
|
53
|
+
width: "16rem",
|
|
54
|
+
className: "fabric-colorPicker",
|
|
55
|
+
styles: {
|
|
56
|
+
"default": {
|
|
57
|
+
hue: {
|
|
58
|
+
boxShadow: "0 0 1px 1px var(--color-shadow)"
|
|
59
|
+
},
|
|
60
|
+
alpha: {
|
|
61
|
+
backgroundColor: "var(--fabric-bg)",
|
|
62
|
+
boxShadow: "0 0 1px 1px var(--color-shadow)"
|
|
63
|
+
},
|
|
64
|
+
color: {
|
|
65
|
+
boxShadow: "0 0 1px 1px var(--color-shadow)"
|
|
66
|
+
},
|
|
67
|
+
saturation: {
|
|
68
|
+
boxShadow: "0 0 1px 1px var(--color-shadow)"
|
|
69
|
+
},
|
|
70
|
+
activeColor: {
|
|
71
|
+
boxShadow: "0 0 1px 1px var(--color-shadow)"
|
|
72
|
+
},
|
|
73
|
+
picker: {
|
|
74
|
+
backgroundColor: "var(--fabric-bg)",
|
|
75
|
+
boxShadow: "0 0 0 1px var(--color-shadow), 0 0 8px var(--fabric-shadow)"
|
|
76
|
+
},
|
|
77
|
+
checkboard: {
|
|
78
|
+
white: "transparent",
|
|
79
|
+
black: "red"
|
|
80
|
+
}
|
|
75
81
|
}
|
|
82
|
+
},
|
|
83
|
+
color: actualValue,
|
|
84
|
+
presetColors: swatches,
|
|
85
|
+
disableAlpha: hideAlpha,
|
|
86
|
+
onChange: function onChange(_ref2) {
|
|
87
|
+
var _ref2$rgb = _ref2.rgb,
|
|
88
|
+
_ref2$rgb$a = _ref2$rgb.a,
|
|
89
|
+
a = _ref2$rgb$a === void 0 ? 1 : _ref2$rgb$a,
|
|
90
|
+
rgb = _objectWithoutProperties(_ref2$rgb, _excluded);
|
|
91
|
+
return setActualValue(Color(rgb).alpha(a)[a < 1 ? "hexa" : "hex"]());
|
|
92
|
+
},
|
|
93
|
+
onChangeComplete: function onChangeComplete(_ref3) {
|
|
94
|
+
var _ref3$rgb = _ref3.rgb,
|
|
95
|
+
_ref3$rgb$a = _ref3$rgb.a,
|
|
96
|
+
a = _ref3$rgb$a === void 0 ? 1 : _ref3$rgb$a,
|
|
97
|
+
rgb = _objectWithoutProperties(_ref3$rgb, _excluded2);
|
|
98
|
+
return handleChange(Color(rgb).alpha(a)[a < 1 ? "hexa" : "hex"]());
|
|
76
99
|
}
|
|
77
|
-
}
|
|
78
|
-
color: actualValue,
|
|
79
|
-
presetColors: swatches,
|
|
80
|
-
disableAlpha: hideAlpha,
|
|
81
|
-
onChange: function onChange(_ref2) {
|
|
82
|
-
var _ref2$rgb = _ref2.rgb,
|
|
83
|
-
_ref2$rgb$a = _ref2$rgb.a,
|
|
84
|
-
a = _ref2$rgb$a === void 0 ? 1 : _ref2$rgb$a,
|
|
85
|
-
rgb = _objectWithoutProperties(_ref2$rgb, _excluded);
|
|
86
|
-
return setActualValue(Color(rgb).alpha(a)[a < 1 ? "hexa" : "hex"]());
|
|
87
|
-
},
|
|
88
|
-
onChangeComplete: function onChangeComplete(_ref3) {
|
|
89
|
-
var _ref3$rgb = _ref3.rgb,
|
|
90
|
-
_ref3$rgb$a = _ref3$rgb.a,
|
|
91
|
-
a = _ref3$rgb$a === void 0 ? 1 : _ref3$rgb$a,
|
|
92
|
-
rgb = _objectWithoutProperties(_ref3$rgb, _excluded2);
|
|
93
|
-
return handleChange(Color(rgb).alpha(a)[a < 1 ? "hexa" : "hex"]());
|
|
94
|
-
}
|
|
100
|
+
})
|
|
95
101
|
});
|
|
96
102
|
});
|
|
97
103
|
|
package/dist/esm/input/Switch.js
CHANGED
|
@@ -60,7 +60,7 @@ var Switch = function Switch(_ref) {
|
|
|
60
60
|
width: width
|
|
61
61
|
},
|
|
62
62
|
children: [/*#__PURE__*/jsxs("div", {
|
|
63
|
-
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-
|
|
63
|
+
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"),
|
|
64
64
|
style: {
|
|
65
65
|
backgroundColor: actualValue ? getColor(color) : getColor(defaultColor)
|
|
66
66
|
},
|
|
@@ -79,9 +79,9 @@ var Switch = function Switch(_ref) {
|
|
|
79
79
|
onChange: handleChange
|
|
80
80
|
}, rest)), /*#__PURE__*/jsx("span", {
|
|
81
81
|
"aria-hidden": "true",
|
|
82
|
-
className: classNames(!disabled && "shadow-sm", actualValue ? "translate-x-[100%]" : "translate-x-0", "pointer-events-none inline-block h-
|
|
82
|
+
className: classNames(!disabled && "shadow-sm", actualValue ? "translate-x-[100%]" : "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"),
|
|
83
83
|
style: {
|
|
84
|
-
width: "calc(50% - 0.
|
|
84
|
+
width: "calc(50% - 0.25em)"
|
|
85
85
|
}
|
|
86
86
|
}), (!!onLabel || !!offLabel) && /*#__PURE__*/jsxs(Fragment, {
|
|
87
87
|
children: [/*#__PURE__*/jsx("span", {
|
|
@@ -42,6 +42,10 @@ var useHandleEnter = function useHandleEnter(callback) {
|
|
|
42
42
|
if (tree && e.key !== "Escape") {
|
|
43
43
|
e === null || e === void 0 || e.stopPropagation();
|
|
44
44
|
}
|
|
45
|
+
// blur input on escape key press
|
|
46
|
+
if (e.key === "Escape") {
|
|
47
|
+
e.currentTarget.blur();
|
|
48
|
+
}
|
|
45
49
|
if (!e.shiftKey && !e.altKey && !e.metaKey && e.key === "Enter" && callback) {
|
|
46
50
|
if (stopPropagation) e === null || e === void 0 || e.stopPropagation();
|
|
47
51
|
cbHandle(e);
|
|
@@ -3,7 +3,7 @@ import { type KeyboardEvent, type MouseEvent } from "react";
|
|
|
3
3
|
export declare const useHandleEnter: (callback?: (e: KeyboardEvent) => void, { stopPropagation, preventDefault, }?: {
|
|
4
4
|
stopPropagation?: boolean;
|
|
5
5
|
preventDefault?: boolean;
|
|
6
|
-
}) => (e: KeyboardEvent) => false | undefined;
|
|
6
|
+
}) => (e: KeyboardEvent<HTMLInputElement>) => false | undefined;
|
|
7
7
|
/** ***************** common handler for mouse primary click *******************/
|
|
8
8
|
export declare const handleClick: (callback?: (e: MouseEvent) => void, { stopPropagation, preventDefault, }?: {
|
|
9
9
|
stopPropagation?: boolean;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@react-fabric/form",
|
|
3
|
-
"version": "1.0.0-beta.
|
|
3
|
+
"version": "1.0.0-beta.55",
|
|
4
4
|
"description": "RUF: Form package",
|
|
5
5
|
"author": "Adarsh Pastakia <adarshpastakia@outlook.com>",
|
|
6
6
|
"license": "MIT",
|
|
@@ -41,8 +41,8 @@
|
|
|
41
41
|
"@dnd-kit/utilities": "^3.2.2",
|
|
42
42
|
"@floating-ui/react": "^0.27.9",
|
|
43
43
|
"@hookform/resolvers": "^3.9.0",
|
|
44
|
-
"@react-fabric/core": "^1.0.0-beta.
|
|
45
|
-
"@react-fabric/date": "^1.0.0-beta.
|
|
44
|
+
"@react-fabric/core": "^1.0.0-beta.55",
|
|
45
|
+
"@react-fabric/date": "^1.0.0-beta.55",
|
|
46
46
|
"@react-fabric/utilities": "^1.0.0-beta.52",
|
|
47
47
|
"classnames": "^2.5.1",
|
|
48
48
|
"color": "^4.2.3",
|
|
@@ -63,5 +63,5 @@
|
|
|
63
63
|
"node": ">=18.12.0",
|
|
64
64
|
"npm": ">=8.19.0"
|
|
65
65
|
},
|
|
66
|
-
"gitHead": "
|
|
66
|
+
"gitHead": "c8454798fb7546174ee8c7ea10e491c5e903e789"
|
|
67
67
|
}
|
|
@@ -137,50 +137,55 @@ export const ColorPicker: FC<ColorProps> = memo(
|
|
|
137
137
|
);
|
|
138
138
|
|
|
139
139
|
return (
|
|
140
|
-
<
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
140
|
+
<div
|
|
141
|
+
// prevent default on mouse down to avoid selection issues
|
|
142
|
+
onMouseDown={(e) => e.preventDefault()}
|
|
143
|
+
>
|
|
144
|
+
<SketchPicker
|
|
145
|
+
width="16rem"
|
|
146
|
+
className={"fabric-colorPicker"}
|
|
147
|
+
styles={
|
|
148
|
+
{
|
|
149
|
+
default: {
|
|
150
|
+
hue: {
|
|
151
|
+
boxShadow: "0 0 1px 1px var(--color-shadow)",
|
|
152
|
+
},
|
|
153
|
+
alpha: {
|
|
154
|
+
backgroundColor: "var(--fabric-bg)",
|
|
155
|
+
boxShadow: "0 0 1px 1px var(--color-shadow)",
|
|
156
|
+
},
|
|
157
|
+
color: {
|
|
158
|
+
boxShadow: "0 0 1px 1px var(--color-shadow)",
|
|
159
|
+
},
|
|
160
|
+
saturation: {
|
|
161
|
+
boxShadow: "0 0 1px 1px var(--color-shadow)",
|
|
162
|
+
},
|
|
163
|
+
activeColor: {
|
|
164
|
+
boxShadow: "0 0 1px 1px var(--color-shadow)",
|
|
165
|
+
},
|
|
166
|
+
picker: {
|
|
167
|
+
backgroundColor: "var(--fabric-bg)",
|
|
168
|
+
boxShadow:
|
|
169
|
+
"0 0 0 1px var(--color-shadow), 0 0 8px var(--fabric-shadow)",
|
|
170
|
+
},
|
|
171
|
+
checkboard: {
|
|
172
|
+
white: "transparent",
|
|
173
|
+
black: "red",
|
|
174
|
+
},
|
|
148
175
|
},
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
picker: {
|
|
163
|
-
backgroundColor: "var(--fabric-bg)",
|
|
164
|
-
boxShadow:
|
|
165
|
-
"0 0 0 1px var(--color-shadow), 0 0 8px var(--fabric-shadow)",
|
|
166
|
-
},
|
|
167
|
-
checkboard: {
|
|
168
|
-
white: "transparent",
|
|
169
|
-
black: "red",
|
|
170
|
-
},
|
|
171
|
-
},
|
|
172
|
-
} as AnyObject
|
|
173
|
-
}
|
|
174
|
-
color={actualValue}
|
|
175
|
-
presetColors={swatches}
|
|
176
|
-
disableAlpha={hideAlpha}
|
|
177
|
-
onChange={({ rgb: { a = 1, ...rgb } }) =>
|
|
178
|
-
setActualValue(Color(rgb).alpha(a)[a < 1 ? "hexa" : "hex"]())
|
|
179
|
-
}
|
|
180
|
-
onChangeComplete={({ rgb: { a = 1, ...rgb } }) =>
|
|
181
|
-
handleChange(Color(rgb).alpha(a)[a < 1 ? "hexa" : "hex"]())
|
|
182
|
-
}
|
|
183
|
-
/>
|
|
176
|
+
} as AnyObject
|
|
177
|
+
}
|
|
178
|
+
color={actualValue}
|
|
179
|
+
presetColors={swatches}
|
|
180
|
+
disableAlpha={hideAlpha}
|
|
181
|
+
onChange={({ rgb: { a = 1, ...rgb } }) =>
|
|
182
|
+
setActualValue(Color(rgb).alpha(a)[a < 1 ? "hexa" : "hex"]())
|
|
183
|
+
}
|
|
184
|
+
onChangeComplete={({ rgb: { a = 1, ...rgb } }) =>
|
|
185
|
+
handleChange(Color(rgb).alpha(a)[a < 1 ? "hexa" : "hex"]())
|
|
186
|
+
}
|
|
187
|
+
/>
|
|
188
|
+
</div>
|
|
184
189
|
);
|
|
185
190
|
},
|
|
186
191
|
);
|
package/src/input/Switch.tsx
CHANGED
|
@@ -147,7 +147,7 @@ export const Switch = ({
|
|
|
147
147
|
actualValue && getBgClass(color ? `${color}-500` : "primary-500"),
|
|
148
148
|
!actualValue &&
|
|
149
149
|
(defaultColor ? getBgClass(`${defaultColor}-500`) : "bg-tint-200"),
|
|
150
|
-
"relative grid grid-cols-2 items-center h-
|
|
150
|
+
"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",
|
|
151
151
|
)}
|
|
152
152
|
style={{
|
|
153
153
|
backgroundColor: actualValue
|
|
@@ -177,10 +177,10 @@ export const Switch = ({
|
|
|
177
177
|
className={classNames(
|
|
178
178
|
!disabled && "shadow-sm",
|
|
179
179
|
actualValue ? "translate-x-[100%]" : "translate-x-0",
|
|
180
|
-
"pointer-events-none inline-block h-
|
|
180
|
+
"pointer-events-none inline-block h-[1em] start-[0.25em] absolute rounded-full bg-white ring-0 transition duration-200 ease-in-out",
|
|
181
181
|
)}
|
|
182
182
|
style={{
|
|
183
|
-
width: "calc(50% - 0.
|
|
183
|
+
width: "calc(50% - 0.25em)",
|
|
184
184
|
}}
|
|
185
185
|
/>
|
|
186
186
|
{(!!onLabel || !!offLabel) && (
|
package/src/input/Textarea.tsx
CHANGED
|
@@ -37,11 +37,15 @@ export const useHandleEnter = (
|
|
|
37
37
|
) => {
|
|
38
38
|
const cbHandle = useDebounce(callback ?? (() => undefined), [callback], 100);
|
|
39
39
|
const tree = useFloatingTree();
|
|
40
|
-
return (e: KeyboardEvent) => {
|
|
40
|
+
return (e: KeyboardEvent<HTMLInputElement>) => {
|
|
41
41
|
// prevent propagation of event if input within dropdown (work around for floating-ui typeahead)
|
|
42
42
|
if (tree && e.key !== "Escape") {
|
|
43
43
|
e?.stopPropagation();
|
|
44
44
|
}
|
|
45
|
+
// blur input on escape key press
|
|
46
|
+
if (e.key === "Escape") {
|
|
47
|
+
e.currentTarget.blur();
|
|
48
|
+
}
|
|
45
49
|
if (
|
|
46
50
|
!e.shiftKey &&
|
|
47
51
|
!e.altKey &&
|