@clayui/time-picker 3.156.0 → 3.158.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.
Files changed (6) hide show
  1. package/LICENSE.md +3 -3
  2. package/README.md +4 -4
  3. package/lib/cjs/index.js +325 -231
  4. package/lib/esm/index.js +291 -219
  5. package/lib/index.d.ts +15 -15
  6. package/package.json +33 -34
package/lib/cjs/index.js CHANGED
@@ -1,34 +1,54 @@
1
1
  "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
2
+ var __create = Object.create;
3
+ var __defProp = Object.defineProperty;
4
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
+ var __getOwnPropNames = Object.getOwnPropertyNames;
6
+ var __getProtoOf = Object.getPrototypeOf;
7
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
8
+ var __export = (target, all) => {
9
+ for (var name in all)
10
+ __defProp(target, name, { get: all[name], enumerable: true });
11
+ };
12
+ var __copyProps = (to, from, except, desc) => {
13
+ if (from && typeof from === "object" || typeof from === "function") {
14
+ for (let key of __getOwnPropNames(from))
15
+ if (!__hasOwnProp.call(to, key) && key !== except)
16
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
17
+ }
18
+ return to;
19
+ };
20
+ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
21
+ // If the importer is in node compatibility mode or this is not an ESM
22
+ // file that has been converted to a CommonJS file using a Babel-
23
+ // compatible transform (i.e. "__esModule" has not been set), then set
24
+ // "default" to the CommonJS "module.exports" for node compatibility.
25
+ isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
26
+ mod
27
+ ));
28
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
29
+ var src_exports = {};
30
+ __export(src_exports, {
31
+ default: () => src_default
5
32
  });
6
- exports.default = void 0;
7
- var _button = _interopRequireDefault(require("@clayui/button"));
8
- var _form = require("@clayui/form");
9
- var _icon = _interopRequireDefault(require("@clayui/icon"));
10
- var _shared = require("@clayui/shared");
11
- var _classnames = _interopRequireDefault(require("classnames"));
12
- var _react = _interopRequireWildcard(require("react"));
13
- function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
14
- function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
15
- function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
16
- /**
17
- * SPDX-FileCopyrightText: © 2019 Liferay, Inc. <https://liferay.com>
18
- * SPDX-License-Identifier: BSD-3-Clause
19
- */
20
- var TimeType;
21
- (function (TimeType) {
22
- TimeType["minutes"] = "minutes";
23
- TimeType["hours"] = "hours";
24
- TimeType["ampm"] = "ampm";
25
- })(TimeType || (TimeType = {}));
26
- const DEFAULT_VALUE = '--';
33
+ module.exports = __toCommonJS(src_exports);
34
+ var import_button = __toESM(require("@clayui/button"));
35
+ var import_form = require("@clayui/form");
36
+ var import_icon = __toESM(require("@clayui/icon"));
37
+ var import_shared = require("@clayui/shared");
38
+ var import_classnames = __toESM(require("classnames"));
39
+ var import_react = __toESM(require("react"));
40
+ var TimeType = /* @__PURE__ */ ((TimeType2) => {
41
+ TimeType2["minutes"] = "minutes";
42
+ TimeType2["hours"] = "hours";
43
+ TimeType2["ampm"] = "ampm";
44
+ return TimeType2;
45
+ })(TimeType || {});
46
+ const DEFAULT_VALUE = "--";
27
47
  const DEFAULT_CONFIG = {
28
48
  use12Hours: {
29
49
  ampm: {
30
- am: 'AM',
31
- pm: 'PM'
50
+ am: "AM",
51
+ pm: "PM"
32
52
  },
33
53
  hours: {
34
54
  max: 12,
@@ -41,8 +61,8 @@ const DEFAULT_CONFIG = {
41
61
  },
42
62
  use24Hours: {
43
63
  ampm: {
44
- am: 'AM',
45
- pm: 'PM'
64
+ am: "AM",
65
+ pm: "PM"
46
66
  },
47
67
  hours: {
48
68
  max: 23,
@@ -55,116 +75,126 @@ const DEFAULT_CONFIG = {
55
75
  }
56
76
  };
57
77
  const regex = /^\d+$/;
58
- const TimePicker = _ref => {
59
- let {
60
- ariaLabels = {
61
- ampm: 'Select time of day (AM/PM) using up (PM) and down (AM) arrow keys',
62
- clear: 'Delete the entered time',
63
- hours: 'Enter the hour in 00:00 format',
64
- minutes: 'Enter the minutes in 00:00 format',
65
- timeDown: 'Time down',
66
- timeUp: 'Time up'
67
- },
68
- config = DEFAULT_CONFIG,
69
- disabled = false,
70
- defaultValue = {
71
- hours: DEFAULT_VALUE,
72
- minutes: DEFAULT_VALUE
73
- },
74
- icon = false,
75
- id,
76
- name,
77
- onChange,
78
- onInputChange,
79
- spritemap,
80
- timezone,
81
- use12Hours = false,
82
- value,
83
- values
84
- } = _ref;
85
- const [internalValue, setValue] = (0, _shared.useControlledState)({
86
- defaultName: 'defaultValue',
78
+ function TimePicker({
79
+ ariaLabels = {
80
+ ampm: "Select time of day (AM/PM) using up (PM) and down (AM) arrow keys",
81
+ clear: "Delete the entered time",
82
+ hours: "Enter the hour in 00:00 format",
83
+ minutes: "Enter the minutes in 00:00 format",
84
+ timeDown: "Time down",
85
+ timeUp: "Time up"
86
+ },
87
+ config = DEFAULT_CONFIG,
88
+ disabled = false,
89
+ defaultValue = {
90
+ hours: DEFAULT_VALUE,
91
+ minutes: DEFAULT_VALUE
92
+ },
93
+ icon = false,
94
+ id,
95
+ name,
96
+ onChange,
97
+ onInputChange,
98
+ spritemap,
99
+ timezone,
100
+ use12Hours = false,
101
+ value,
102
+ values
103
+ }) {
104
+ const [internalValue, setValue] = (0, import_shared.useControlledState)({
105
+ defaultName: "defaultValue",
87
106
  defaultValue,
88
- handleName: 'onChange',
89
- name: 'value',
107
+ handleName: "onChange",
108
+ name: "value",
90
109
  onChange: onChange ?? onInputChange,
91
110
  value: value ?? values
92
111
  });
93
- const useConfig = config[use12Hours ? 'use12Hours' : 'use24Hours'];
94
- const [actionVisible, setActionVisible] = (0, _react.useState)(false);
95
- const elementRef = (0, _react.useRef)(null);
112
+ const useConfig = config[use12Hours ? "use12Hours" : "use24Hours"];
113
+ const [actionVisible, setActionVisible] = (0, import_react.useState)(false);
114
+ const elementRef = (0, import_react.useRef)(null);
96
115
  const defaultFocused = {
97
- configName: TimeType.hours,
116
+ configName: "hours" /* hours */,
98
117
  focused: false
99
118
  };
100
- const [currentInputFocused, setCurrentInputFocused] = (0, _react.useState)(defaultFocused);
101
- const handleMaxAndMin = (value, config) => {
102
- const newValue = value.substring(value.length - 2, value.length);
119
+ const [currentInputFocused, setCurrentInputFocused] = (0, import_react.useState)(defaultFocused);
120
+ const handleMaxAndMin = (value2, config2) => {
121
+ const newValue = value2.substring(value2.length - 2, value2.length);
103
122
  const intrinsicValue = Number(newValue);
104
- if (intrinsicValue > config.max) {
105
- return String(config.min);
106
- } else if (intrinsicValue < config.min) {
107
- return String(config.max);
123
+ if (intrinsicValue > config2.max) {
124
+ return String(config2.min);
125
+ } else if (intrinsicValue < config2.min) {
126
+ return String(config2.max);
108
127
  }
109
128
  return newValue;
110
129
  };
111
- const handleKeyDown = (event, value, configName) => {
112
- const config = useConfig[configName];
113
- const intrinsicValue = Number(value);
114
- const onValue = newValue => {
115
- const newVal = configName === TimeType.ampm ? newValue : handleMaxAndMin(String(newValue), config);
130
+ const handleKeyDown = (event, value2, configName) => {
131
+ const config2 = useConfig[configName];
132
+ const intrinsicValue = Number(value2);
133
+ const onValue = (newValue) => {
134
+ const newVal = configName === "ampm" /* ampm */ ? newValue : handleMaxAndMin(String(newValue), config2);
116
135
  return setValue({
117
136
  ...internalValue,
118
137
  // eslint-disable-next-line sort-keys
119
- [configName]: String(newVal).padStart(2, '0')
138
+ [configName]: String(newVal).padStart(2, "0")
120
139
  });
121
140
  };
122
141
  switch (event.key) {
123
- case 'Backspace':
142
+ case "Backspace":
124
143
  onValue(DEFAULT_VALUE);
125
144
  break;
126
- case 'ArrowUp':
145
+ case "ArrowUp":
127
146
  event.preventDefault();
128
147
  event.stopPropagation();
129
- if (configName === TimeType.ampm) {
130
- onValue(config.pm);
148
+ if (configName === "ampm" /* ampm */) {
149
+ onValue(config2.pm);
131
150
  } else {
132
- onValue(value !== DEFAULT_VALUE ? intrinsicValue + 1 : config.min);
151
+ onValue(
152
+ value2 !== DEFAULT_VALUE ? intrinsicValue + 1 : config2.min
153
+ );
133
154
  }
134
155
  break;
135
- case 'ArrowDown':
156
+ case "ArrowDown":
136
157
  event.preventDefault();
137
158
  event.stopPropagation();
138
- if (configName === TimeType.ampm) {
139
- onValue(config.am);
159
+ if (configName === "ampm" /* ampm */) {
160
+ onValue(config2.am);
140
161
  } else {
141
- onValue(value !== DEFAULT_VALUE ? intrinsicValue - 1 : config.max);
162
+ onValue(
163
+ value2 !== DEFAULT_VALUE ? intrinsicValue - 1 : config2.max
164
+ );
142
165
  }
143
166
  break;
144
167
  default:
145
- if (regex.test(event.key) && configName !== TimeType.ampm) {
146
- const maxSecondDigit = Math.floor(config.max / 10);
147
- const minFirstDigit = config.min;
168
+ if (regex.test(event.key) && configName !== "ampm" /* ampm */) {
169
+ const maxSecondDigit = Math.floor(
170
+ config2.max / 10
171
+ );
172
+ const minFirstDigit = config2.min;
148
173
  const keyVal = intrinsicValue < minFirstDigit ? minFirstDigit : event.key;
149
- const newVal = Number(value) > maxSecondDigit ? `0${keyVal}` : (value && value !== DEFAULT_VALUE ? value : '') + keyVal;
174
+ const newVal = Number(value2) > maxSecondDigit ? `0${keyVal}` : (value2 && value2 !== DEFAULT_VALUE ? value2 : "") + keyVal;
150
175
  onValue(newVal);
151
- } else if (configName === TimeType.ampm && (event.key === 'a' || event.key === 'p')) {
152
- onValue(event.key === 'a' ? config.am : config.pm);
176
+ } else if (configName === "ampm" /* ampm */ && (event.key === "a" || event.key === "p")) {
177
+ onValue(
178
+ event.key === "a" ? config2.am : config2.pm
179
+ );
153
180
  }
154
181
  break;
155
182
  }
156
183
  };
157
- const handleAction = direction => {
158
- const {
159
- configName
160
- } = currentInputFocused;
161
- const config = useConfig[configName];
184
+ const handleAction = (direction) => {
185
+ const { configName } = currentInputFocused;
186
+ const config2 = useConfig[configName];
162
187
  const prevValue = internalValue[configName];
163
- let value;
164
- if (configName === TimeType.ampm) {
165
- value = direction === 1 ? config.pm : config.am;
188
+ let value2;
189
+ if (configName === "ampm" /* ampm */) {
190
+ value2 = direction === 1 ? config2.pm : config2.am;
166
191
  } else {
167
- value = handleMaxAndMin(String(prevValue !== DEFAULT_VALUE ? Number(prevValue) + direction : direction === -1 ? config.max : 0), config);
192
+ value2 = handleMaxAndMin(
193
+ String(
194
+ prevValue !== DEFAULT_VALUE ? Number(prevValue) + direction : direction === -1 ? config2.max : 0
195
+ ),
196
+ config2
197
+ );
168
198
  }
169
199
  setCurrentInputFocused({
170
200
  configName,
@@ -173,152 +203,216 @@ const TimePicker = _ref => {
173
203
  setValue({
174
204
  ...internalValue,
175
205
  // eslint-disable-next-line sort-keys
176
- [configName]: String(value).padStart(2, '0')
206
+ [configName]: String(value2).padStart(2, "0")
177
207
  });
178
208
  };
179
- const handleDocumentClick = event => {
209
+ const handleDocumentClick = (event) => {
180
210
  if (elementRef.current && event.target !== null && !elementRef.current.contains(event.target)) {
181
211
  setActionVisible(false);
182
212
  setCurrentInputFocused(defaultFocused);
183
213
  }
184
214
  };
185
- const handleInputFocus = configName => {
215
+ const handleInputFocus = (configName) => {
186
216
  setActionVisible(true);
187
217
  setCurrentInputFocused({
188
218
  configName,
189
219
  focused: true
190
220
  });
191
221
  };
192
- (0, _react.useEffect)(() => {
193
- document.addEventListener('click', handleDocumentClick);
222
+ (0, import_react.useEffect)(() => {
223
+ document.addEventListener("click", handleDocumentClick);
194
224
  return () => {
195
- document.removeEventListener('click', handleDocumentClick);
225
+ document.removeEventListener("click", handleDocumentClick);
196
226
  };
197
227
  }, []);
198
- const visibleActionReset = actionVisible && (internalValue.ampm !== DEFAULT_VALUE && internalValue.ampm != null || internalValue.hours !== DEFAULT_VALUE || internalValue.minutes !== DEFAULT_VALUE);
199
- return /*#__PURE__*/_react.default.createElement("div", {
200
- className: "clay-time"
201
- }, /*#__PURE__*/_react.default.createElement(_form.ClayInput.Group, null, icon && /*#__PURE__*/_react.default.createElement(_form.ClayInput.GroupItem, {
202
- shrink: true
203
- }, /*#__PURE__*/_react.default.createElement(_form.ClayInput.GroupText, null, /*#__PURE__*/_react.default.createElement(_icon.default, {
204
- spritemap: spritemap,
205
- symbol: "time"
206
- }))), /*#__PURE__*/_react.default.createElement(_shared.FocusScope, {
207
- arrowKeysLeftRight: true,
208
- arrowKeysUpDown: false
209
- }, /*#__PURE__*/_react.default.createElement(_form.ClayInput.GroupItem, null, /*#__PURE__*/_react.default.createElement("div", {
210
- className: (0, _classnames.default)('form-control', {
211
- disabled
212
- }),
213
- onMouseEnter: () => {
214
- if (!disabled) {
215
- setActionVisible(true);
216
- }
228
+ const visibleActionReset = actionVisible && (internalValue.ampm !== DEFAULT_VALUE && internalValue.ampm !== null || internalValue.hours !== DEFAULT_VALUE || internalValue.minutes !== DEFAULT_VALUE);
229
+ return /* @__PURE__ */ import_react.default.createElement("div", { className: "clay-time" }, /* @__PURE__ */ import_react.default.createElement(import_form.ClayInput.Group, null, icon && /* @__PURE__ */ import_react.default.createElement(import_form.ClayInput.GroupItem, { shrink: true }, /* @__PURE__ */ import_react.default.createElement(import_form.ClayInput.GroupText, null, /* @__PURE__ */ import_react.default.createElement(import_icon.default, { spritemap, symbol: "time" }))), /* @__PURE__ */ import_react.default.createElement(import_shared.FocusScope, { arrowKeysLeftRight: true, arrowKeysUpDown: false }, /* @__PURE__ */ import_react.default.createElement(import_form.ClayInput.GroupItem, null, /* @__PURE__ */ import_react.default.createElement(
230
+ "div",
231
+ {
232
+ className: (0, import_classnames.default)("form-control", {
233
+ disabled
234
+ }),
235
+ "data-testid": "formControl",
236
+ onMouseEnter: () => {
237
+ if (!disabled) {
238
+ setActionVisible(true);
239
+ }
240
+ },
241
+ onMouseLeave: () => {
242
+ if (!currentInputFocused.focused && !disabled) {
243
+ setActionVisible(false);
244
+ }
245
+ },
246
+ ref: elementRef
217
247
  },
218
- onMouseLeave: () => {
219
- if (!currentInputFocused.focused && !disabled) {
220
- setActionVisible(false);
248
+ /* @__PURE__ */ import_react.default.createElement("div", { className: "clay-time-edit" }, /* @__PURE__ */ import_react.default.createElement(
249
+ "input",
250
+ {
251
+ "aria-label": ariaLabels.hours,
252
+ className: (0, import_classnames.default)(
253
+ "clay-time-hours form-control-inset",
254
+ {
255
+ focus: currentInputFocused.configName === "hours" /* hours */ && currentInputFocused.focused
256
+ }
257
+ ),
258
+ "data-testid": "hours",
259
+ disabled,
260
+ id,
261
+ maxLength: 2,
262
+ onFocus: () => handleInputFocus("hours" /* hours */),
263
+ onKeyDown: (event) => handleKeyDown(
264
+ event,
265
+ internalValue.hours,
266
+ "hours" /* hours */
267
+ ),
268
+ readOnly: true,
269
+ type: "text",
270
+ value: internalValue.hours
221
271
  }
222
- },
223
- ref: elementRef
224
- }, /*#__PURE__*/_react.default.createElement("div", {
225
- className: "clay-time-edit"
226
- }, /*#__PURE__*/_react.default.createElement("input", {
227
- "aria-label": ariaLabels.hours,
228
- className: (0, _classnames.default)('clay-time-hours form-control-inset', {
229
- focus: currentInputFocused.configName === TimeType.hours && currentInputFocused.focused
230
- }),
231
- disabled: disabled,
232
- id: id,
233
- maxLength: 2,
234
- onFocus: () => handleInputFocus(TimeType.hours),
235
- onKeyDown: event => handleKeyDown(event, internalValue.hours, TimeType.hours),
236
- readOnly: true,
237
- type: "text",
238
- value: internalValue.hours
239
- }), /*#__PURE__*/_react.default.createElement("span", {
240
- className: "clay-time-divider"
241
- }, ":"), /*#__PURE__*/_react.default.createElement("input", {
242
- "aria-label": ariaLabels.minutes,
243
- className: (0, _classnames.default)('clay-time-minutes form-control-inset', {
244
- focus: currentInputFocused.configName === TimeType.minutes
245
- }),
246
- disabled: disabled,
247
- maxLength: 2,
248
- onFocus: () => handleInputFocus(TimeType.minutes),
249
- onKeyDown: event => handleKeyDown(event, internalValue.minutes, TimeType.minutes),
250
- readOnly: true,
251
- type: "text",
252
- value: internalValue.minutes
253
- }), use12Hours && /*#__PURE__*/_react.default.createElement("input", {
254
- "aria-label": ariaLabels.ampm,
255
- className: (0, _classnames.default)('clay-time-ampm form-control-inset', {
256
- focus: currentInputFocused.configName === TimeType.ampm
257
- }),
258
- disabled: disabled,
259
- "max-length": "2",
260
- onFocus: () => handleInputFocus(TimeType.ampm),
261
- onKeyDown: event => handleKeyDown(event, internalValue.ampm, TimeType.ampm),
262
- readOnly: true,
263
- type: "text",
264
- value: internalValue.ampm || DEFAULT_VALUE
265
- }), name && /*#__PURE__*/_react.default.createElement("input", {
266
- name: name,
267
- type: "hidden",
268
- value: `${internalValue.hours}:${internalValue.minutes}`
269
- })), /*#__PURE__*/_react.default.createElement("div", {
270
- className: "clay-time-action-group"
271
- }, /*#__PURE__*/_react.default.createElement("div", {
272
- className: "clay-time-action-group-item",
273
- style: {
274
- opacity: visibleActionReset ? 1 : 0,
275
- pointerEvents: visibleActionReset ? 'auto' : 'none'
276
- }
277
- }, /*#__PURE__*/_react.default.createElement(_button.default, {
278
- "aria-label": ariaLabels.clear,
279
- className: "clay-time-clear-btn",
280
- disabled: disabled,
281
- displayType: "unstyled",
282
- onClick: () => setValue(use12Hours ? {
283
- ampm: DEFAULT_VALUE,
284
- hours: DEFAULT_VALUE,
285
- minutes: DEFAULT_VALUE
286
- } : {
287
- hours: DEFAULT_VALUE,
288
- minutes: DEFAULT_VALUE
289
- }),
290
- tabIndex: visibleActionReset ? 0 : -1
291
- }, /*#__PURE__*/_react.default.createElement(_icon.default, {
292
- spritemap: spritemap,
293
- symbol: "times-circle"
294
- }))), /*#__PURE__*/_react.default.createElement("div", {
295
- className: "clay-time-action-group-item",
296
- style: {
297
- opacity: actionVisible ? 1 : 0
298
- }
299
- }, /*#__PURE__*/_react.default.createElement("div", {
300
- className: "btn-group-vertical clay-time-inner-spin",
301
- role: "group"
302
- }, /*#__PURE__*/_react.default.createElement(_button.default, {
303
- "aria-label": ariaLabels.timeUp,
304
- className: "clay-time-inner-spin-btn clay-time-inner-spin-btn-inc",
305
- disabled: disabled,
306
- displayType: "secondary",
307
- onClick: () => handleAction(1)
308
- }, /*#__PURE__*/_react.default.createElement(_icon.default, {
309
- spritemap: spritemap,
310
- symbol: "angle-up"
311
- })), /*#__PURE__*/_react.default.createElement(_button.default, {
312
- "aria-label": ariaLabels.timeDown,
313
- className: "clay-time-inner-spin-btn clay-time-inner-spin-btn-dec",
314
- disabled: disabled,
315
- displayType: "secondary",
316
- onClick: () => handleAction(-1)
317
- }, /*#__PURE__*/_react.default.createElement(_icon.default, {
318
- spritemap: spritemap,
319
- symbol: "angle-down"
320
- })))))))), timezone && /*#__PURE__*/_react.default.createElement(_form.ClayInput.GroupItem, {
321
- shrink: true
322
- }, /*#__PURE__*/_react.default.createElement(_form.ClayInput.GroupText, null, `(${timezone})`))));
323
- };
324
- var _default = exports.default = TimePicker;
272
+ ), /* @__PURE__ */ import_react.default.createElement("span", { className: "clay-time-divider" }, ":"), /* @__PURE__ */ import_react.default.createElement(
273
+ "input",
274
+ {
275
+ "aria-label": ariaLabels.minutes,
276
+ className: (0, import_classnames.default)(
277
+ "clay-time-minutes form-control-inset",
278
+ {
279
+ focus: currentInputFocused.configName === "minutes" /* minutes */
280
+ }
281
+ ),
282
+ "data-testid": "minutes",
283
+ disabled,
284
+ maxLength: 2,
285
+ onFocus: () => handleInputFocus("minutes" /* minutes */),
286
+ onKeyDown: (event) => handleKeyDown(
287
+ event,
288
+ internalValue.minutes,
289
+ "minutes" /* minutes */
290
+ ),
291
+ readOnly: true,
292
+ type: "text",
293
+ value: internalValue.minutes
294
+ }
295
+ ), use12Hours && /* @__PURE__ */ import_react.default.createElement(
296
+ "input",
297
+ {
298
+ "aria-label": ariaLabels.ampm,
299
+ className: (0, import_classnames.default)(
300
+ "clay-time-ampm form-control-inset",
301
+ {
302
+ focus: currentInputFocused.configName === "ampm" /* ampm */
303
+ }
304
+ ),
305
+ "data-testid": "ampm",
306
+ disabled,
307
+ "max-length": "2",
308
+ onFocus: () => handleInputFocus("ampm" /* ampm */),
309
+ onKeyDown: (event) => handleKeyDown(
310
+ event,
311
+ internalValue.ampm,
312
+ "ampm" /* ampm */
313
+ ),
314
+ readOnly: true,
315
+ type: "text",
316
+ value: internalValue.ampm || DEFAULT_VALUE
317
+ }
318
+ ), name && /* @__PURE__ */ import_react.default.createElement(
319
+ "input",
320
+ {
321
+ name,
322
+ type: "hidden",
323
+ value: `${internalValue.hours}:${internalValue.minutes}`
324
+ }
325
+ )),
326
+ /* @__PURE__ */ import_react.default.createElement("div", { className: "clay-time-action-group" }, /* @__PURE__ */ import_react.default.createElement(
327
+ "div",
328
+ {
329
+ className: "clay-time-action-group-item",
330
+ "data-testid": "containerReset",
331
+ style: {
332
+ opacity: visibleActionReset ? 1 : 0,
333
+ pointerEvents: visibleActionReset ? "auto" : "none"
334
+ }
335
+ },
336
+ /* @__PURE__ */ import_react.default.createElement(
337
+ import_button.default,
338
+ {
339
+ "aria-label": ariaLabels.clear,
340
+ className: "clay-time-clear-btn",
341
+ disabled,
342
+ displayType: "unstyled",
343
+ onClick: () => setValue(
344
+ use12Hours ? {
345
+ ampm: DEFAULT_VALUE,
346
+ hours: DEFAULT_VALUE,
347
+ minutes: DEFAULT_VALUE
348
+ } : {
349
+ hours: DEFAULT_VALUE,
350
+ minutes: DEFAULT_VALUE
351
+ }
352
+ ),
353
+ tabIndex: visibleActionReset ? 0 : -1
354
+ },
355
+ /* @__PURE__ */ import_react.default.createElement(
356
+ import_icon.default,
357
+ {
358
+ spritemap,
359
+ symbol: "times-circle"
360
+ }
361
+ )
362
+ )
363
+ ), /* @__PURE__ */ import_react.default.createElement(
364
+ "div",
365
+ {
366
+ className: "clay-time-action-group-item",
367
+ "data-testid": "containerSpin",
368
+ style: {
369
+ opacity: actionVisible ? 1 : 0
370
+ }
371
+ },
372
+ /* @__PURE__ */ import_react.default.createElement(
373
+ "div",
374
+ {
375
+ className: "btn-group-vertical clay-time-inner-spin",
376
+ role: "group"
377
+ },
378
+ /* @__PURE__ */ import_react.default.createElement(
379
+ import_button.default,
380
+ {
381
+ "aria-label": ariaLabels.timeUp,
382
+ className: "clay-time-inner-spin-btn clay-time-inner-spin-btn-inc",
383
+ "data-testid": "spinInc",
384
+ disabled,
385
+ displayType: "secondary",
386
+ onClick: () => handleAction(1)
387
+ },
388
+ /* @__PURE__ */ import_react.default.createElement(
389
+ import_icon.default,
390
+ {
391
+ spritemap,
392
+ symbol: "angle-up"
393
+ }
394
+ )
395
+ ),
396
+ /* @__PURE__ */ import_react.default.createElement(
397
+ import_button.default,
398
+ {
399
+ "aria-label": ariaLabels.timeDown,
400
+ className: "clay-time-inner-spin-btn clay-time-inner-spin-btn-dec",
401
+ "data-testid": "spinDec",
402
+ disabled,
403
+ displayType: "secondary",
404
+ onClick: () => handleAction(-1)
405
+ },
406
+ /* @__PURE__ */ import_react.default.createElement(
407
+ import_icon.default,
408
+ {
409
+ spritemap,
410
+ symbol: "angle-down"
411
+ }
412
+ )
413
+ )
414
+ )
415
+ ))
416
+ ))), timezone && /* @__PURE__ */ import_react.default.createElement(import_form.ClayInput.GroupItem, { shrink: true }, /* @__PURE__ */ import_react.default.createElement(import_form.ClayInput.GroupText, null, `(${timezone})`))));
417
+ }
418
+ var src_default = TimePicker;