@clayui/time-picker 3.103.1 → 3.105.0
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/lib/index.js +6 -16
- package/package.json +4 -4
- package/src/__tests__/__snapshots__/index.tsx.snap +6 -6
- package/src/__tests__/index.tsx +0 -48
- package/src/index.tsx +1 -5
package/lib/index.js
CHANGED
|
@@ -135,21 +135,16 @@ var ClayTimePicker = function ClayTimePicker(_ref) {
|
|
|
135
135
|
actionVisible = _useState2[0],
|
|
136
136
|
setActionVisible = _useState2[1];
|
|
137
137
|
|
|
138
|
-
var _useState3 = (0, _react.useState)(false),
|
|
139
|
-
_useState4 = _slicedToArray(_useState3, 2),
|
|
140
|
-
isFocused = _useState4[0],
|
|
141
|
-
setIsFocused = _useState4[1];
|
|
142
|
-
|
|
143
138
|
var elementRef = (0, _react.useRef)(null);
|
|
144
139
|
var defaultFocused = {
|
|
145
140
|
configName: TimeType.hours,
|
|
146
141
|
focused: false
|
|
147
142
|
};
|
|
148
143
|
|
|
149
|
-
var
|
|
150
|
-
|
|
151
|
-
currentInputFocused =
|
|
152
|
-
setCurrentInputFocused =
|
|
144
|
+
var _useState3 = (0, _react.useState)(defaultFocused),
|
|
145
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
146
|
+
currentInputFocused = _useState4[0],
|
|
147
|
+
setCurrentInputFocused = _useState4[1];
|
|
153
148
|
|
|
154
149
|
var handleMaxAndMin = function handleMaxAndMin(value, config) {
|
|
155
150
|
var newValue = value.substring(value.length - 2, value.length);
|
|
@@ -240,7 +235,6 @@ var ClayTimePicker = function ClayTimePicker(_ref) {
|
|
|
240
235
|
if (elementRef.current && event.target !== null && !elementRef.current.contains(event.target)) {
|
|
241
236
|
setActionVisible(false);
|
|
242
237
|
setCurrentInputFocused(defaultFocused);
|
|
243
|
-
setIsFocused(false);
|
|
244
238
|
}
|
|
245
239
|
};
|
|
246
240
|
|
|
@@ -250,7 +244,6 @@ var ClayTimePicker = function ClayTimePicker(_ref) {
|
|
|
250
244
|
configName: configName,
|
|
251
245
|
focused: true
|
|
252
246
|
});
|
|
253
|
-
setIsFocused(true);
|
|
254
247
|
};
|
|
255
248
|
|
|
256
249
|
(0, _react.useEffect)(function () {
|
|
@@ -270,12 +263,9 @@ var ClayTimePicker = function ClayTimePicker(_ref) {
|
|
|
270
263
|
}))), /*#__PURE__*/_react.default.createElement(_shared.FocusScope, {
|
|
271
264
|
arrowKeysLeftRight: true,
|
|
272
265
|
arrowKeysUpDown: false
|
|
273
|
-
}, /*#__PURE__*/_react.default.createElement(_form.ClayInput.GroupItem, {
|
|
274
|
-
shrink: true
|
|
275
|
-
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
266
|
+
}, /*#__PURE__*/_react.default.createElement(_form.ClayInput.GroupItem, null, /*#__PURE__*/_react.default.createElement("div", {
|
|
276
267
|
className: (0, _classnames.default)('form-control', {
|
|
277
|
-
disabled: disabled
|
|
278
|
-
focus: isFocused
|
|
268
|
+
disabled: disabled
|
|
279
269
|
}),
|
|
280
270
|
onMouseEnter: function onMouseEnter() {
|
|
281
271
|
if (!disabled) {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@clayui/time-picker",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.105.0",
|
|
4
4
|
"description": "ClayTimePicker component",
|
|
5
5
|
"license": "BSD-3-Clause",
|
|
6
6
|
"repository": "https://github.com/liferay/clay",
|
|
@@ -23,9 +23,9 @@
|
|
|
23
23
|
],
|
|
24
24
|
"dependencies": {
|
|
25
25
|
"@clayui/button": "^3.100.0",
|
|
26
|
-
"@clayui/form": "^3.
|
|
26
|
+
"@clayui/form": "^3.104.0",
|
|
27
27
|
"@clayui/icon": "^3.56.0",
|
|
28
|
-
"@clayui/shared": "^3.
|
|
28
|
+
"@clayui/shared": "^3.104.0",
|
|
29
29
|
"classnames": "^2.2.6"
|
|
30
30
|
},
|
|
31
31
|
"peerDependencies": {
|
|
@@ -36,5 +36,5 @@
|
|
|
36
36
|
"browserslist": [
|
|
37
37
|
"extends browserslist-config-clay"
|
|
38
38
|
],
|
|
39
|
-
"gitHead": "
|
|
39
|
+
"gitHead": "dfe8e4d9789e2e2586bd439db2496c9f64388d39"
|
|
40
40
|
}
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
2
2
|
|
|
3
|
-
exports[`BasicRendering renders by default 1`] = `"<div class=\\"clay-time\\"><div class=\\"input-group\\"><div class=\\"input-group-item
|
|
3
|
+
exports[`BasicRendering renders by default 1`] = `"<div class=\\"clay-time\\"><div class=\\"input-group\\"><div class=\\"input-group-item\\"><div class=\\"form-control\\" data-testid=\\"formControl\\"><div class=\\"clay-time-edit\\"><input aria-label=\\"Enter the hour in 00:00 format\\" class=\\"clay-time-hours form-control-inset\\" data-testid=\\"hours\\" maxlength=\\"2\\" readonly=\\"\\" type=\\"text\\" value=\\"--\\"><span class=\\"clay-time-divider\\">:</span><input aria-label=\\"Enter the minutes in 00:00 format\\" class=\\"clay-time-minutes form-control-inset\\" data-testid=\\"minutes\\" maxlength=\\"2\\" readonly=\\"\\" type=\\"text\\" value=\\"--\\"></div><div class=\\"clay-time-action-group\\"><div class=\\"clay-time-action-group-item\\" data-testid=\\"containerReset\\" style=\\"opacity: 0; pointer-events: none;\\"><button class=\\"clay-time-clear-btn btn btn-unstyled\\" type=\\"button\\" aria-label=\\"Delete the entered time\\"><svg class=\\"lexicon-icon lexicon-icon-times-circle\\" role=\\"presentation\\"><use xlink:href=\\"icons.svg#times-circle\\"></use></svg></button></div><div class=\\"clay-time-action-group-item\\" data-testid=\\"containerSpin\\" style=\\"opacity: 0;\\"><div class=\\"btn-group-vertical clay-time-inner-spin\\" role=\\"group\\"><button class=\\"clay-time-inner-spin-btn clay-time-inner-spin-btn-inc btn btn-secondary\\" type=\\"button\\" aria-label=\\"Time up\\" data-testid=\\"spinInc\\"><svg class=\\"lexicon-icon lexicon-icon-angle-up\\" role=\\"presentation\\"><use xlink:href=\\"icons.svg#angle-up\\"></use></svg></button><button class=\\"clay-time-inner-spin-btn clay-time-inner-spin-btn-dec btn btn-secondary\\" type=\\"button\\" aria-label=\\"Time down\\" data-testid=\\"spinDec\\"><svg class=\\"lexicon-icon lexicon-icon-angle-down\\" role=\\"presentation\\"><use xlink:href=\\"icons.svg#angle-down\\"></use></svg></button></div></div></div></div></div></div></div>"`;
|
|
4
4
|
|
|
5
|
-
exports[`BasicRendering renders time picker with 12 hours 1`] = `"<div class=\\"clay-time\\"><div class=\\"input-group\\"><div class=\\"input-group-item
|
|
5
|
+
exports[`BasicRendering renders time picker with 12 hours 1`] = `"<div class=\\"clay-time\\"><div class=\\"input-group\\"><div class=\\"input-group-item\\"><div class=\\"form-control\\" data-testid=\\"formControl\\"><div class=\\"clay-time-edit\\"><input aria-label=\\"Enter the hour in 00:00 format\\" class=\\"clay-time-hours form-control-inset\\" data-testid=\\"hours\\" maxlength=\\"2\\" readonly=\\"\\" type=\\"text\\" value=\\"--\\"><span class=\\"clay-time-divider\\">:</span><input aria-label=\\"Enter the minutes in 00:00 format\\" class=\\"clay-time-minutes form-control-inset\\" data-testid=\\"minutes\\" maxlength=\\"2\\" readonly=\\"\\" type=\\"text\\" value=\\"--\\"><input aria-label=\\"Select time of day (AM/PM) using up (PM) and down (AM) arrow keys\\" class=\\"clay-time-ampm form-control-inset\\" data-testid=\\"ampm\\" max-length=\\"2\\" readonly=\\"\\" type=\\"text\\" value=\\"--\\"></div><div class=\\"clay-time-action-group\\"><div class=\\"clay-time-action-group-item\\" data-testid=\\"containerReset\\" style=\\"opacity: 0; pointer-events: none;\\"><button class=\\"clay-time-clear-btn btn btn-unstyled\\" type=\\"button\\" aria-label=\\"Delete the entered time\\"><svg class=\\"lexicon-icon lexicon-icon-times-circle\\" role=\\"presentation\\"><use xlink:href=\\"icons.svg#times-circle\\"></use></svg></button></div><div class=\\"clay-time-action-group-item\\" data-testid=\\"containerSpin\\" style=\\"opacity: 0;\\"><div class=\\"btn-group-vertical clay-time-inner-spin\\" role=\\"group\\"><button class=\\"clay-time-inner-spin-btn clay-time-inner-spin-btn-inc btn btn-secondary\\" type=\\"button\\" aria-label=\\"Time up\\" data-testid=\\"spinInc\\"><svg class=\\"lexicon-icon lexicon-icon-angle-up\\" role=\\"presentation\\"><use xlink:href=\\"icons.svg#angle-up\\"></use></svg></button><button class=\\"clay-time-inner-spin-btn clay-time-inner-spin-btn-dec btn btn-secondary\\" type=\\"button\\" aria-label=\\"Time down\\" data-testid=\\"spinDec\\"><svg class=\\"lexicon-icon lexicon-icon-angle-down\\" role=\\"presentation\\"><use xlink:href=\\"icons.svg#angle-down\\"></use></svg></button></div></div></div></div></div></div></div>"`;
|
|
6
6
|
|
|
7
|
-
exports[`BasicRendering renders time picker with a hidden input when the name attribute is provided 1`] = `"<div class=\\"clay-time\\"><div class=\\"input-group\\"><div class=\\"input-group-item
|
|
7
|
+
exports[`BasicRendering renders time picker with a hidden input when the name attribute is provided 1`] = `"<div class=\\"clay-time\\"><div class=\\"input-group\\"><div class=\\"input-group-item\\"><div class=\\"form-control\\" data-testid=\\"formControl\\"><div class=\\"clay-time-edit\\"><input aria-label=\\"Enter the hour in 00:00 format\\" class=\\"clay-time-hours form-control-inset\\" data-testid=\\"hours\\" maxlength=\\"2\\" readonly=\\"\\" type=\\"text\\" value=\\"--\\"><span class=\\"clay-time-divider\\">:</span><input aria-label=\\"Enter the minutes in 00:00 format\\" class=\\"clay-time-minutes form-control-inset\\" data-testid=\\"minutes\\" maxlength=\\"2\\" readonly=\\"\\" type=\\"text\\" value=\\"--\\"><input name=\\"time-picker\\" type=\\"hidden\\" value=\\"--:--\\"></div><div class=\\"clay-time-action-group\\"><div class=\\"clay-time-action-group-item\\" data-testid=\\"containerReset\\" style=\\"opacity: 0; pointer-events: none;\\"><button class=\\"clay-time-clear-btn btn btn-unstyled\\" type=\\"button\\" aria-label=\\"Delete the entered time\\"><svg class=\\"lexicon-icon lexicon-icon-times-circle\\" role=\\"presentation\\"><use xlink:href=\\"icons.svg#times-circle\\"></use></svg></button></div><div class=\\"clay-time-action-group-item\\" data-testid=\\"containerSpin\\" style=\\"opacity: 0;\\"><div class=\\"btn-group-vertical clay-time-inner-spin\\" role=\\"group\\"><button class=\\"clay-time-inner-spin-btn clay-time-inner-spin-btn-inc btn btn-secondary\\" type=\\"button\\" aria-label=\\"Time up\\" data-testid=\\"spinInc\\"><svg class=\\"lexicon-icon lexicon-icon-angle-up\\" role=\\"presentation\\"><use xlink:href=\\"icons.svg#angle-up\\"></use></svg></button><button class=\\"clay-time-inner-spin-btn clay-time-inner-spin-btn-dec btn btn-secondary\\" type=\\"button\\" aria-label=\\"Time down\\" data-testid=\\"spinDec\\"><svg class=\\"lexicon-icon lexicon-icon-angle-down\\" role=\\"presentation\\"><use xlink:href=\\"icons.svg#angle-down\\"></use></svg></button></div></div></div></div></div></div></div>"`;
|
|
8
8
|
|
|
9
|
-
exports[`BasicRendering renders time picker with disabled 1`] = `"<div class=\\"clay-time\\"><div class=\\"input-group\\"><div class=\\"input-group-item
|
|
9
|
+
exports[`BasicRendering renders time picker with disabled 1`] = `"<div class=\\"clay-time\\"><div class=\\"input-group\\"><div class=\\"input-group-item\\"><div class=\\"form-control disabled\\" data-testid=\\"formControl\\"><div class=\\"clay-time-edit\\"><input aria-label=\\"Enter the hour in 00:00 format\\" class=\\"clay-time-hours form-control-inset\\" data-testid=\\"hours\\" disabled=\\"\\" maxlength=\\"2\\" readonly=\\"\\" type=\\"text\\" value=\\"--\\"><span class=\\"clay-time-divider\\">:</span><input aria-label=\\"Enter the minutes in 00:00 format\\" class=\\"clay-time-minutes form-control-inset\\" data-testid=\\"minutes\\" disabled=\\"\\" maxlength=\\"2\\" readonly=\\"\\" type=\\"text\\" value=\\"--\\"></div><div class=\\"clay-time-action-group\\"><div class=\\"clay-time-action-group-item\\" data-testid=\\"containerReset\\" style=\\"opacity: 0; pointer-events: none;\\"><button class=\\"clay-time-clear-btn btn btn-unstyled\\" type=\\"button\\" aria-label=\\"Delete the entered time\\" disabled=\\"\\"><svg class=\\"lexicon-icon lexicon-icon-times-circle\\" role=\\"presentation\\"><use xlink:href=\\"icons.svg#times-circle\\"></use></svg></button></div><div class=\\"clay-time-action-group-item\\" data-testid=\\"containerSpin\\" style=\\"opacity: 0;\\"><div class=\\"btn-group-vertical clay-time-inner-spin\\" role=\\"group\\"><button class=\\"clay-time-inner-spin-btn clay-time-inner-spin-btn-inc btn btn-secondary\\" type=\\"button\\" aria-label=\\"Time up\\" data-testid=\\"spinInc\\" disabled=\\"\\"><svg class=\\"lexicon-icon lexicon-icon-angle-up\\" role=\\"presentation\\"><use xlink:href=\\"icons.svg#angle-up\\"></use></svg></button><button class=\\"clay-time-inner-spin-btn clay-time-inner-spin-btn-dec btn btn-secondary\\" type=\\"button\\" aria-label=\\"Time down\\" data-testid=\\"spinDec\\" disabled=\\"\\"><svg class=\\"lexicon-icon lexicon-icon-angle-down\\" role=\\"presentation\\"><use xlink:href=\\"icons.svg#angle-down\\"></use></svg></button></div></div></div></div></div></div></div>"`;
|
|
10
10
|
|
|
11
|
-
exports[`BasicRendering renders time picker with icon 1`] = `"<div class=\\"clay-time\\"><div class=\\"input-group\\"><div class=\\"input-group-item input-group-item-shrink\\"><div class=\\"input-group-text\\"><svg class=\\"lexicon-icon lexicon-icon-time\\" role=\\"presentation\\"><use xlink:href=\\"icons.svg#time\\"></use></svg></div></div><div class=\\"input-group-item
|
|
11
|
+
exports[`BasicRendering renders time picker with icon 1`] = `"<div class=\\"clay-time\\"><div class=\\"input-group\\"><div class=\\"input-group-item input-group-item-shrink\\"><div class=\\"input-group-text\\"><svg class=\\"lexicon-icon lexicon-icon-time\\" role=\\"presentation\\"><use xlink:href=\\"icons.svg#time\\"></use></svg></div></div><div class=\\"input-group-item\\"><div class=\\"form-control\\" data-testid=\\"formControl\\"><div class=\\"clay-time-edit\\"><input aria-label=\\"Enter the hour in 00:00 format\\" class=\\"clay-time-hours form-control-inset\\" data-testid=\\"hours\\" maxlength=\\"2\\" readonly=\\"\\" type=\\"text\\" value=\\"--\\"><span class=\\"clay-time-divider\\">:</span><input aria-label=\\"Enter the minutes in 00:00 format\\" class=\\"clay-time-minutes form-control-inset\\" data-testid=\\"minutes\\" maxlength=\\"2\\" readonly=\\"\\" type=\\"text\\" value=\\"--\\"></div><div class=\\"clay-time-action-group\\"><div class=\\"clay-time-action-group-item\\" data-testid=\\"containerReset\\" style=\\"opacity: 0; pointer-events: none;\\"><button class=\\"clay-time-clear-btn btn btn-unstyled\\" type=\\"button\\" aria-label=\\"Delete the entered time\\"><svg class=\\"lexicon-icon lexicon-icon-times-circle\\" role=\\"presentation\\"><use xlink:href=\\"icons.svg#times-circle\\"></use></svg></button></div><div class=\\"clay-time-action-group-item\\" data-testid=\\"containerSpin\\" style=\\"opacity: 0;\\"><div class=\\"btn-group-vertical clay-time-inner-spin\\" role=\\"group\\"><button class=\\"clay-time-inner-spin-btn clay-time-inner-spin-btn-inc btn btn-secondary\\" type=\\"button\\" aria-label=\\"Time up\\" data-testid=\\"spinInc\\"><svg class=\\"lexicon-icon lexicon-icon-angle-up\\" role=\\"presentation\\"><use xlink:href=\\"icons.svg#angle-up\\"></use></svg></button><button class=\\"clay-time-inner-spin-btn clay-time-inner-spin-btn-dec btn btn-secondary\\" type=\\"button\\" aria-label=\\"Time down\\" data-testid=\\"spinDec\\"><svg class=\\"lexicon-icon lexicon-icon-angle-down\\" role=\\"presentation\\"><use xlink:href=\\"icons.svg#angle-down\\"></use></svg></button></div></div></div></div></div></div></div>"`;
|
|
12
12
|
|
|
13
|
-
exports[`BasicRendering renders time picker with timezone 1`] = `"<div class=\\"clay-time\\"><div class=\\"input-group\\"><div class=\\"input-group-item
|
|
13
|
+
exports[`BasicRendering renders time picker with timezone 1`] = `"<div class=\\"clay-time\\"><div class=\\"input-group\\"><div class=\\"input-group-item\\"><div class=\\"form-control\\" data-testid=\\"formControl\\"><div class=\\"clay-time-edit\\"><input aria-label=\\"Enter the hour in 00:00 format\\" class=\\"clay-time-hours form-control-inset\\" data-testid=\\"hours\\" maxlength=\\"2\\" readonly=\\"\\" type=\\"text\\" value=\\"--\\"><span class=\\"clay-time-divider\\">:</span><input aria-label=\\"Enter the minutes in 00:00 format\\" class=\\"clay-time-minutes form-control-inset\\" data-testid=\\"minutes\\" maxlength=\\"2\\" readonly=\\"\\" type=\\"text\\" value=\\"--\\"></div><div class=\\"clay-time-action-group\\"><div class=\\"clay-time-action-group-item\\" data-testid=\\"containerReset\\" style=\\"opacity: 0; pointer-events: none;\\"><button class=\\"clay-time-clear-btn btn btn-unstyled\\" type=\\"button\\" aria-label=\\"Delete the entered time\\"><svg class=\\"lexicon-icon lexicon-icon-times-circle\\" role=\\"presentation\\"><use xlink:href=\\"icons.svg#times-circle\\"></use></svg></button></div><div class=\\"clay-time-action-group-item\\" data-testid=\\"containerSpin\\" style=\\"opacity: 0;\\"><div class=\\"btn-group-vertical clay-time-inner-spin\\" role=\\"group\\"><button class=\\"clay-time-inner-spin-btn clay-time-inner-spin-btn-inc btn btn-secondary\\" type=\\"button\\" aria-label=\\"Time up\\" data-testid=\\"spinInc\\"><svg class=\\"lexicon-icon lexicon-icon-angle-up\\" role=\\"presentation\\"><use xlink:href=\\"icons.svg#angle-up\\"></use></svg></button><button class=\\"clay-time-inner-spin-btn clay-time-inner-spin-btn-dec btn btn-secondary\\" type=\\"button\\" aria-label=\\"Time down\\" data-testid=\\"spinDec\\"><svg class=\\"lexicon-icon lexicon-icon-angle-down\\" role=\\"presentation\\"><use xlink:href=\\"icons.svg#angle-down\\"></use></svg></button></div></div></div></div></div></div></div>"`;
|
package/src/__tests__/index.tsx
CHANGED
|
@@ -93,54 +93,6 @@ describe('IncrementalInteractions', () => {
|
|
|
93
93
|
expect(document.activeElement).toBe(hoursEl);
|
|
94
94
|
});
|
|
95
95
|
|
|
96
|
-
it('clicking on the hour input of the time picker should add the focus', () => {
|
|
97
|
-
const {getByTestId} = render(<TimePickerWithState />);
|
|
98
|
-
|
|
99
|
-
const hoursEl = getByTestId('hours');
|
|
100
|
-
const formControlEl = getByTestId('formControl');
|
|
101
|
-
|
|
102
|
-
fireEvent.focus(hoursEl, {});
|
|
103
|
-
|
|
104
|
-
expect(formControlEl.classList).toContain('focus');
|
|
105
|
-
});
|
|
106
|
-
|
|
107
|
-
it('clicking on the minutes input of the time picker should add the focus', () => {
|
|
108
|
-
const {getByTestId} = render(<TimePickerWithState />);
|
|
109
|
-
|
|
110
|
-
const minutesEl = getByTestId('minutes');
|
|
111
|
-
const formControlEl = getByTestId('formControl');
|
|
112
|
-
|
|
113
|
-
fireEvent.focus(minutesEl, {});
|
|
114
|
-
|
|
115
|
-
expect(formControlEl.classList).toContain('focus');
|
|
116
|
-
});
|
|
117
|
-
|
|
118
|
-
it('clicking on the amp/pm input of the time picker should add the focus', () => {
|
|
119
|
-
const {getByTestId} = render(<TimePickerWithState use12Hours />);
|
|
120
|
-
|
|
121
|
-
const ampmEl = getByTestId('ampm');
|
|
122
|
-
const formControlEl = getByTestId('formControl');
|
|
123
|
-
|
|
124
|
-
fireEvent.focus(ampmEl, {});
|
|
125
|
-
|
|
126
|
-
expect(formControlEl.classList).toContain('focus');
|
|
127
|
-
});
|
|
128
|
-
|
|
129
|
-
it('clicking outside the inputs of the time picker should remove the focus', () => {
|
|
130
|
-
const {getByTestId} = render(<TimePickerWithState />);
|
|
131
|
-
|
|
132
|
-
const hoursEl = getByTestId('hours');
|
|
133
|
-
const formControlEl = getByTestId('formControl');
|
|
134
|
-
|
|
135
|
-
fireEvent.focus(hoursEl, {});
|
|
136
|
-
|
|
137
|
-
expect(formControlEl.classList).toContain('focus');
|
|
138
|
-
|
|
139
|
-
fireEvent.click(document.body, {});
|
|
140
|
-
|
|
141
|
-
expect(formControlEl.classList).not.toContain('focus');
|
|
142
|
-
});
|
|
143
|
-
|
|
144
96
|
describe('with actions', () => {
|
|
145
97
|
it('shows the spin action when the mouse is inside the form', () => {
|
|
146
98
|
const {getByTestId} = render(<TimePickerWithState />);
|
package/src/index.tsx
CHANGED
|
@@ -202,7 +202,6 @@ const ClayTimePicker = ({
|
|
|
202
202
|
const useConfig: Config = config[use12Hours ? 'use12Hours' : 'use24Hours'];
|
|
203
203
|
|
|
204
204
|
const [actionVisible, setActionVisible] = useState(false);
|
|
205
|
-
const [isFocused, setIsFocused] = useState(false);
|
|
206
205
|
const elementRef = useRef<null | HTMLDivElement>(null);
|
|
207
206
|
|
|
208
207
|
const defaultFocused = {
|
|
@@ -357,7 +356,6 @@ const ClayTimePicker = ({
|
|
|
357
356
|
) {
|
|
358
357
|
setActionVisible(false);
|
|
359
358
|
setCurrentInputFocused(defaultFocused);
|
|
360
|
-
setIsFocused(false);
|
|
361
359
|
}
|
|
362
360
|
};
|
|
363
361
|
|
|
@@ -367,7 +365,6 @@ const ClayTimePicker = ({
|
|
|
367
365
|
configName,
|
|
368
366
|
focused: true,
|
|
369
367
|
});
|
|
370
|
-
setIsFocused(true);
|
|
371
368
|
};
|
|
372
369
|
|
|
373
370
|
useEffect(() => {
|
|
@@ -395,11 +392,10 @@ const ClayTimePicker = ({
|
|
|
395
392
|
</ClayInput.GroupItem>
|
|
396
393
|
)}
|
|
397
394
|
<FocusScope arrowKeysLeftRight arrowKeysUpDown={false}>
|
|
398
|
-
<ClayInput.GroupItem
|
|
395
|
+
<ClayInput.GroupItem>
|
|
399
396
|
<div
|
|
400
397
|
className={classNames('form-control', {
|
|
401
398
|
disabled,
|
|
402
|
-
focus: isFocused,
|
|
403
399
|
})}
|
|
404
400
|
data-testid="formControl"
|
|
405
401
|
onMouseEnter={() => {
|