@clayui/time-picker 3.101.0 → 3.104.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 CHANGED
@@ -270,9 +270,7 @@ var ClayTimePicker = function ClayTimePicker(_ref) {
270
270
  }))), /*#__PURE__*/_react.default.createElement(_shared.FocusScope, {
271
271
  arrowKeysLeftRight: true,
272
272
  arrowKeysUpDown: false
273
- }, /*#__PURE__*/_react.default.createElement(_form.ClayInput.GroupItem, {
274
- shrink: true
275
- }, /*#__PURE__*/_react.default.createElement("div", {
273
+ }, /*#__PURE__*/_react.default.createElement(_form.ClayInput.GroupItem, null, /*#__PURE__*/_react.default.createElement("div", {
276
274
  className: (0, _classnames.default)('form-control', {
277
275
  disabled: disabled,
278
276
  focus: isFocused
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@clayui/time-picker",
3
- "version": "3.101.0",
3
+ "version": "3.104.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.101.0",
26
+ "@clayui/form": "^3.104.0",
27
27
  "@clayui/icon": "^3.56.0",
28
- "@clayui/shared": "^3.101.0",
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": "55f8b720047b2aa4764d5de1302f715db62ed902"
39
+ "gitHead": "44f72fac40321954bf46e8f61b163ff71ae04403"
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 input-group-item-shrink\\"><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>"`;
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 input-group-item-shrink\\"><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>"`;
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 input-group-item-shrink\\"><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>"`;
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 input-group-item-shrink\\"><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>"`;
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 input-group-item-shrink\\"><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>"`;
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 input-group-item-shrink\\"><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>"`;
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/index.tsx CHANGED
@@ -395,7 +395,7 @@ const ClayTimePicker = ({
395
395
  </ClayInput.GroupItem>
396
396
  )}
397
397
  <FocusScope arrowKeysLeftRight arrowKeysUpDown={false}>
398
- <ClayInput.GroupItem shrink>
398
+ <ClayInput.GroupItem>
399
399
  <div
400
400
  className={classNames('form-control', {
401
401
  disabled,