@clayui/time-picker 3.47.0 → 3.55.0

package/README.md

@@ -0,0 +1,19 @@
+# `@clayui/time-picker`
+
+Time pickers let users select a time for a form.
+
+-   [Documentation](https://clayui.com/docs/components/time-picker.html)
+-   [Changelog](./CHANGELOG.md)
+-   [Breaking change schedule](./BREAKING.md)
+
+## Install
+
+Run `yarn`
+
+```shell
+yarn add @clayui/time-picker
+```
+
+## Contribute
+
+We'd love to get contributions from you! Please, check our [Contributing Guidelines](https://github.com/liferay/clay/blob/master/CONTRIBUTING.md) to see how you can help us improve.

package/lib/index.d.ts

@@ -1,3 +1,4 @@
+import { InternalDispatch } from '@clayui/shared';
 import React from 'react';
 declare type ConfigMaxMin = {
     max: number;
@@ -18,7 +19,7 @@ export declare type Input = {
     hours: '--' | string;
     minutes: '--' | string;
 };
-interface IProps extends React.HTMLAttributes<HTMLDivElement> {
+interface IProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> {
     ariaLabels?: {
         ampm: string;
         hours: string;
@@ -32,13 +33,16 @@ interface IProps extends React.HTMLAttributes<HTMLDivElement> {
         use24Hours: Config;
     };
     disabled?: boolean;
+    defaultValue?: Input;
     icon?: boolean;
-    onInputChange: (values: Input) => void;
+    onChange?: InternalDispatch<Input>;
+    onInputChange?: InternalDispatch<Input>;
     name?: string;
-    values: Input;
     spritemap?: string;
     timezone?: string;
     use12Hours?: boolean;
+    values?: Input;
+    value?: Input;
 }
 declare const ClayTimePicker: React.FunctionComponent<IProps>;
 export default ClayTimePicker;

package/lib/index.js

@@ -1,5 +1,7 @@
 "use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -15,7 +17,11 @@ var _shared = require("@clayui/shared");
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -76,6 +82,7 @@ var DEFAULT_CONFIG = {
     }
   }
 };
+var regex = /^\d+$/;
 
 var ClayTimePicker = function ClayTimePicker(_ref) {
   var _ref$ariaLabels = _ref.ariaLabels,
@@ -91,45 +98,57 @@ var ClayTimePicker = function ClayTimePicker(_ref) {
       config = _ref$config === void 0 ? DEFAULT_CONFIG : _ref$config,
       _ref$disabled = _ref.disabled,
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      _ref$defaultValue = _ref.defaultValue,
+      defaultValue = _ref$defaultValue === void 0 ? {
+    hours: DEFAULT_VALUE,
+    minutes: DEFAULT_VALUE
+  } : _ref$defaultValue,
       _ref$icon = _ref.icon,
       icon = _ref$icon === void 0 ? false : _ref$icon,
       name = _ref.name,
+      onChange = _ref.onChange,
+      onInputChange = _ref.onInputChange,
       spritemap = _ref.spritemap,
       timezone = _ref.timezone,
       _ref$use12Hours = _ref.use12Hours,
       use12Hours = _ref$use12Hours === void 0 ? false : _ref$use12Hours,
-      _ref$values = _ref.values,
-      values = _ref$values === void 0 ? {
-    hours: DEFAULT_VALUE,
-    minutes: DEFAULT_VALUE
-  } : _ref$values,
-      _ref$onInputChange = _ref.onInputChange,
-      onInputChange = _ref$onInputChange === void 0 ? function () {} : _ref$onInputChange;
-  var useConfig = config[use12Hours ? 'use12Hours' : 'use24Hours'];
+      value = _ref.value,
+      values = _ref.values;
+
+  var _useInternalState = (0, _shared.useInternalState)({
+    defaultName: 'defaultValue',
+    defaultValue: defaultValue,
+    handleName: 'onChange',
+    name: 'value',
+    onChange: onChange !== null && onChange !== void 0 ? onChange : onInputChange,
+    value: value !== null && value !== void 0 ? value : values
+  }),
+      _useInternalState2 = _slicedToArray(_useInternalState, 2),
+      internalValue = _useInternalState2[0],
+      setValue = _useInternalState2[1];
 
-  var _React$useState = _react.default.useState(false),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      actionVisible = _React$useState2[0],
-      setActionVisible = _React$useState2[1];
+  var useConfig = config[use12Hours ? 'use12Hours' : 'use24Hours'];
 
-  var _React$useState3 = _react.default.useState(false),
-      _React$useState4 = _slicedToArray(_React$useState3, 2),
-      isFocused = _React$useState4[0],
-      setIsFocused = _React$useState4[1];
+  var _useState = (0, _react.useState)(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      actionVisible = _useState2[0],
+      setActionVisible = _useState2[1];
 
-  var elementRef = _react.default.useRef(null);
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      isFocused = _useState4[0],
+      setIsFocused = _useState4[1];
 
+  var elementRef = (0, _react.useRef)(null);
   var defaultFocused = {
     configName: TimeType.hours,
     focused: false
   };
 
-  var _React$useState5 = _react.default.useState(defaultFocused),
-      _React$useState6 = _slicedToArray(_React$useState5, 2),
-      currentInputFocused = _React$useState6[0],
-      setCurrentInputFocused = _React$useState6[1];
-
-  var regex = /^\d+$/;
+  var _useState5 = (0, _react.useState)(defaultFocused),
+      _useState6 = _slicedToArray(_useState5, 2),
+      currentInputFocused = _useState6[0],
+      setCurrentInputFocused = _useState6[1];
 
   var handleMaxAndMin = function handleMaxAndMin(value, config) {
     var newValue = value.substring(value.length - 2, value.length);
@@ -148,14 +167,14 @@ var ClayTimePicker = function ClayTimePicker(_ref) {
     var config = useConfig[configName];
     var intrinsicValue = Number(value);
 
-    var setValue = function setValue(newValue) {
+    var onValue = function onValue(newValue) {
       var newVal = configName === TimeType.ampm ? newValue : handleMaxAndMin(String(newValue), config);
-      return onInputChange(_objectSpread(_objectSpread({}, values), {}, _defineProperty({}, configName, String(newVal).padStart(2, '0'))));
+      return setValue(_objectSpread(_objectSpread({}, internalValue), {}, _defineProperty({}, configName, String(newVal).padStart(2, '0'))));
     };
 
     switch (event.key) {
       case 'Backspace':
-        setValue(DEFAULT_VALUE);
+        onValue(DEFAULT_VALUE);
         break;
 
       case 'ArrowUp':
@@ -163,9 +182,9 @@ var ClayTimePicker = function ClayTimePicker(_ref) {
         event.stopPropagation();
 
         if (configName === TimeType.ampm) {
-          setValue(config.pm);
+          onValue(config.pm);
         } else {
-          setValue(value !== DEFAULT_VALUE ? intrinsicValue + 1 : config.min);
+          onValue(value !== DEFAULT_VALUE ? intrinsicValue + 1 : config.min);
         }
 
         break;
@@ -175,9 +194,9 @@ var ClayTimePicker = function ClayTimePicker(_ref) {
         event.stopPropagation();
 
         if (configName === TimeType.ampm) {
-          setValue(config.am);
+          onValue(config.am);
         } else {
-          setValue(value !== DEFAULT_VALUE ? intrinsicValue - 1 : config.max);
+          onValue(value !== DEFAULT_VALUE ? intrinsicValue - 1 : config.max);
         }
 
         break;
@@ -188,9 +207,9 @@ var ClayTimePicker = function ClayTimePicker(_ref) {
           var minFirstDigit = config.min;
           var keyVal = intrinsicValue < minFirstDigit ? minFirstDigit : event.key;
           var newVal = Number(value) > maxSecondDigit ? "0".concat(keyVal) : (value && value !== DEFAULT_VALUE ? value : '') + keyVal;
-          setValue(newVal);
+          onValue(newVal);
         } else if (configName === TimeType.ampm && (event.key === 'a' || event.key === 'p')) {
-          setValue(event.key === 'a' ? config.am : config.pm);
+          onValue(event.key === 'a' ? config.am : config.pm);
         }
 
         break;
@@ -200,7 +219,7 @@ var ClayTimePicker = function ClayTimePicker(_ref) {
   var handleAction = function handleAction(direction) {
     var configName = currentInputFocused.configName;
     var config = useConfig[configName];
-    var prevValue = values[configName];
+    var prevValue = internalValue[configName];
     var value;
 
     if (configName === TimeType.ampm) {
@@ -213,7 +232,7 @@ var ClayTimePicker = function ClayTimePicker(_ref) {
       configName: configName,
       focused: true
     });
-    onInputChange(_objectSpread(_objectSpread({}, values), {}, _defineProperty({}, configName, String(value).padStart(2, '0'))));
+    setValue(_objectSpread(_objectSpread({}, internalValue), {}, _defineProperty({}, configName, String(value).padStart(2, '0'))));
   };
 
   var handleDocumentClick = function handleDocumentClick(event) {
@@ -233,14 +252,13 @@ var ClayTimePicker = function ClayTimePicker(_ref) {
     setIsFocused(true);
   };
 
-  _react.default.useEffect(function () {
+  (0, _react.useEffect)(function () {
     document.addEventListener('click', handleDocumentClick);
     return function () {
       document.removeEventListener('click', handleDocumentClick);
     };
   }, []);
-
-  var visibleActionReset = actionVisible && (values.ampm !== DEFAULT_VALUE && values.ampm != null || values.hours !== DEFAULT_VALUE || values.minutes !== DEFAULT_VALUE);
+  var visibleActionReset = actionVisible && (internalValue.ampm !== DEFAULT_VALUE && internalValue.ampm != null || internalValue.hours !== DEFAULT_VALUE || internalValue.minutes !== DEFAULT_VALUE);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "clay-time"
   }, /*#__PURE__*/_react.default.createElement(_form.ClayInput.Group, null, icon && /*#__PURE__*/_react.default.createElement(_form.ClayInput.GroupItem, {
@@ -282,11 +300,11 @@ var ClayTimePicker = function ClayTimePicker(_ref) {
       return handleInputFocus(TimeType.hours);
     },
     onKeyDown: function onKeyDown(event) {
-      return handleKeyDown(event, values.hours, TimeType.hours);
+      return handleKeyDown(event, internalValue.hours, TimeType.hours);
     },
     readOnly: true,
     type: "text",
-    value: values.hours
+    value: internalValue.hours
   }), /*#__PURE__*/_react.default.createElement("span", {
     className: "clay-time-divider"
   }, ":"), /*#__PURE__*/_react.default.createElement("input", {
@@ -300,11 +318,11 @@ var ClayTimePicker = function ClayTimePicker(_ref) {
       return handleInputFocus(TimeType.minutes);
     },
     onKeyDown: function onKeyDown(event) {
-      return handleKeyDown(event, values.minutes, TimeType.minutes);
+      return handleKeyDown(event, internalValue.minutes, TimeType.minutes);
     },
     readOnly: true,
     type: "text",
-    value: values.minutes
+    value: internalValue.minutes
   }), use12Hours && /*#__PURE__*/_react.default.createElement("input", {
     "aria-label": ariaLabels.ampm,
     className: (0, _classnames.default)('clay-time-ampm form-control-inset', {
@@ -316,15 +334,15 @@ var ClayTimePicker = function ClayTimePicker(_ref) {
       return handleInputFocus(TimeType.ampm);
     },
     onKeyDown: function onKeyDown(event) {
-      return handleKeyDown(event, values.ampm, TimeType.ampm);
+      return handleKeyDown(event, internalValue.ampm, TimeType.ampm);
     },
     readOnly: true,
     type: "text",
-    value: values.ampm || DEFAULT_VALUE
+    value: internalValue.ampm || DEFAULT_VALUE
   }), name && /*#__PURE__*/_react.default.createElement("input", {
     name: name,
     type: "hidden",
-    value: "".concat(values.hours, ":").concat(values.minutes)
+    value: "".concat(internalValue.hours, ":").concat(internalValue.minutes)
   })), /*#__PURE__*/_react.default.createElement("div", {
     className: "clay-time-action-group"
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -339,7 +357,7 @@ var ClayTimePicker = function ClayTimePicker(_ref) {
     disabled: disabled,
     displayType: "unstyled",
     onClick: function onClick() {
-      return onInputChange(use12Hours ? {
+      return setValue(use12Hours ? {
         ampm: DEFAULT_VALUE,
         hours: DEFAULT_VALUE,
         minutes: DEFAULT_VALUE

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@clayui/time-picker",
-	"version": "3.47.0",
+	"version": "3.55.0",
 	"description": "ClayTimePicker component",
 	"license": "BSD-3-Clause",
 	"repository": "https://github.com/liferay/clay",
@@ -23,9 +23,9 @@
 	],
 	"dependencies": {
 		"@clayui/button": "^3.40.0",
-		"@clayui/form": "^3.47.0",
+		"@clayui/form": "^3.55.0",
 		"@clayui/icon": "^3.40.0",
-		"@clayui/shared": "^3.47.0",
+		"@clayui/shared": "^3.55.0",
 		"classnames": "^2.2.6"
 	},
 	"peerDependencies": {
@@ -36,5 +36,5 @@
 	"browserslist": [
 		"extends browserslist-config-clay"
 	],
-	"gitHead": "bc35db722c6045d363bb628ce6f66edf66f47819"
+	"gitHead": "5310f4650d453a3659b0bc73a5f098732168c9c1"
 }

package/src/index.tsx

@@ -6,9 +6,9 @@
 import ClayButton from '@clayui/button';
 import {ClayInput} from '@clayui/form';
 import ClayIcon from '@clayui/icon';
-import {FocusScope} from '@clayui/shared';
+import {FocusScope, InternalDispatch, useInternalState} from '@clayui/shared';
 import classNames from 'classnames';
-import React from 'react';
+import React, {useEffect, useRef, useState} from 'react';
 
 type ConfigMaxMin = {
 	max: number;
@@ -40,7 +40,11 @@ enum TimeType {
 	ampm = 'ampm',
 }
 
-interface IProps extends React.HTMLAttributes<HTMLDivElement> {
+interface IProps
+	extends Omit<
+		React.HTMLAttributes<HTMLDivElement>,
+		'onChange' | 'defaultValue'
+	> {
 	/**
 	 * Add the labels for the input elements and the input clear button,
 	 * use this to provide accessibility and internationalization.
@@ -68,25 +72,31 @@ interface IProps extends React.HTMLAttributes<HTMLDivElement> {
 	 */
 	disabled?: boolean;
 
+	/**
+	 * Property to set the default value (uncontrolled).
+	 */
+	defaultValue?: Input;
+
 	/**
 	 * Flag to indicate if show time icon or not.
 	 */
 	icon?: boolean;
 
 	/**
-	 * Called when input values change hour, minutes or ampm.
+	 * Called when input values change hour, minutes or ampm (controlled).
 	 */
-	onInputChange: (values: Input) => void;
+	onChange?: InternalDispatch<Input>;
 
 	/**
-	 * Name attribute for the hidden input (used for form submission).
+	 * Called when input values change hour, minutes or ampm (controlled).
+	 * @deprecated since v3.52.0 - use `onChange` instead.
 	 */
-	name?: string;
+	onInputChange?: InternalDispatch<Input>;
 
 	/**
-	 * Sets the values for the hour, minute, or am/pm input.
+	 * Name attribute for the hidden input (used for form submission).
 	 */
-	values: Input;
+	name?: string;
 
 	/**
 	 * The path to the SVG spritemap file containing the icons.
@@ -102,6 +112,17 @@ interface IProps extends React.HTMLAttributes<HTMLDivElement> {
 	 * Flag to indicate if 12-hour use, when true, should show am/pm input.
 	 */
 	use12Hours?: boolean;
+
+	/**
+	 * Sets the values for the hour, minute, or am/pm input (controlled).
+	 * @deprecated since v3.52.0 - use `value` instead.
+	 */
+	values?: Input;
+
+	/**
+	 * Sets the values for the hour, minute, or am/pm input (controlled).
+	 */
+	value?: Input;
 }
 
 const DEFAULT_VALUE = '--';
@@ -136,6 +157,8 @@ const DEFAULT_CONFIG = {
 	},
 };
 
+const regex = /^\d+$/;
+
 const ClayTimePicker: React.FunctionComponent<IProps> = ({
 	ariaLabels = {
 		ampm: 'Select time of day (AM/PM) using up (PM) and down (AM) arrow keys',
@@ -147,30 +170,44 @@ const ClayTimePicker: React.FunctionComponent<IProps> = ({
 	},
 	config = DEFAULT_CONFIG,
 	disabled = false,
+	defaultValue = {
+		hours: DEFAULT_VALUE,
+		minutes: DEFAULT_VALUE,
+	},
 	icon = false,
 	name,
+	onChange,
+	onInputChange,
 	spritemap,
 	timezone,
 	use12Hours = false,
-	values = {
-		hours: DEFAULT_VALUE,
-		minutes: DEFAULT_VALUE,
-	},
-	onInputChange = () => {},
+	value,
+	values,
 }: IProps) => {
+	const [internalValue, setValue] = useInternalState({
+		defaultName: 'defaultValue',
+		defaultValue,
+		handleName: 'onChange',
+		name: 'value',
+		onChange: onChange ?? onInputChange,
+		value: value ?? values,
+	});
+
 	const useConfig: Config = config[use12Hours ? 'use12Hours' : 'use24Hours'];
-	const [actionVisible, setActionVisible] = React.useState(false);
-	const [isFocused, setIsFocused] = React.useState(false);
-	const elementRef = React.useRef<null | HTMLDivElement>(null);
+
+	const [actionVisible, setActionVisible] = useState(false);
+	const [isFocused, setIsFocused] = useState(false);
+	const elementRef = useRef<null | HTMLDivElement>(null);
+
 	const defaultFocused = {
 		configName: TimeType.hours,
 		focused: false,
 	};
-	const [currentInputFocused, setCurrentInputFocused] = React.useState<{
+
+	const [currentInputFocused, setCurrentInputFocused] = useState<{
 		configName: TimeType;
 		focused: boolean;
 	}>(defaultFocused);
-	const regex = /^\d+$/;
 
 	const handleMaxAndMin = (value: string, config: ConfigMaxMin) => {
 		const newValue = value.substring(value.length - 2, value.length);
@@ -192,14 +229,14 @@ const ClayTimePicker: React.FunctionComponent<IProps> = ({
 	) => {
 		const config = useConfig[configName];
 		const intrinsicValue = Number(value);
-		const setValue = (newValue: string | number) => {
+		const onValue = (newValue: string | number) => {
 			const newVal =
 				configName === TimeType.ampm
 					? newValue
 					: handleMaxAndMin(String(newValue), config as ConfigMaxMin);
 
-			return onInputChange({
-				...values,
+			return setValue({
+				...internalValue,
 				// eslint-disable-next-line sort-keys
 				[configName]: String(newVal).padStart(2, '0'),
 			});
@@ -207,16 +244,16 @@ const ClayTimePicker: React.FunctionComponent<IProps> = ({
 
 		switch (event.key) {
 			case 'Backspace':
-				setValue(DEFAULT_VALUE);
+				onValue(DEFAULT_VALUE);
 				break;
 			case 'ArrowUp':
 				event.preventDefault();
 				event.stopPropagation();
 
 				if (configName === TimeType.ampm) {
-					setValue((config as ConfigAmpm).pm);
+					onValue((config as ConfigAmpm).pm);
 				} else {
-					setValue(
+					onValue(
 						value !== DEFAULT_VALUE
 							? intrinsicValue + 1
 							: (config as ConfigMaxMin).min
@@ -228,9 +265,9 @@ const ClayTimePicker: React.FunctionComponent<IProps> = ({
 				event.stopPropagation();
 
 				if (configName === TimeType.ampm) {
-					setValue((config as ConfigAmpm).am);
+					onValue((config as ConfigAmpm).am);
 				} else {
-					setValue(
+					onValue(
 						value !== DEFAULT_VALUE
 							? intrinsicValue - 1
 							: (config as ConfigMaxMin).max
@@ -256,12 +293,12 @@ const ClayTimePicker: React.FunctionComponent<IProps> = ({
 							: (value && value !== DEFAULT_VALUE ? value : '') +
 							  keyVal;
 
-					setValue(newVal);
+					onValue(newVal);
 				} else if (
 					configName === TimeType.ampm &&
 					(event.key === 'a' || event.key === 'p')
 				) {
-					setValue(
+					onValue(
 						event.key === 'a'
 							? (config as ConfigAmpm).am
 							: (config as ConfigAmpm).pm
@@ -274,7 +311,7 @@ const ClayTimePicker: React.FunctionComponent<IProps> = ({
 	const handleAction = (direction: number) => {
 		const {configName} = currentInputFocused;
 		const config = useConfig[configName];
-		const prevValue = values[configName];
+		const prevValue = internalValue[configName];
 		let value;
 
 		if (configName === TimeType.ampm) {
@@ -299,8 +336,8 @@ const ClayTimePicker: React.FunctionComponent<IProps> = ({
 			configName,
 			focused: true,
 		});
-		onInputChange({
-			...values,
+		setValue({
+			...internalValue,
 			// eslint-disable-next-line sort-keys
 			[configName]: String(value).padStart(2, '0'),
 		});
@@ -327,7 +364,7 @@ const ClayTimePicker: React.FunctionComponent<IProps> = ({
 		setIsFocused(true);
 	};
 
-	React.useEffect(() => {
+	useEffect(() => {
 		document.addEventListener('click', handleDocumentClick);
 
 		return () => {
@@ -337,9 +374,9 @@ const ClayTimePicker: React.FunctionComponent<IProps> = ({
 
 	const visibleActionReset =
 		actionVisible &&
-		((values.ampm !== DEFAULT_VALUE && values.ampm != null) ||
-			values.hours !== DEFAULT_VALUE ||
-			values.minutes !== DEFAULT_VALUE);
+		((internalValue.ampm !== DEFAULT_VALUE && internalValue.ampm != null) ||
+			internalValue.hours !== DEFAULT_VALUE ||
+			internalValue.minutes !== DEFAULT_VALUE);
 
 	return (
 		<div className="clay-time">
@@ -392,13 +429,13 @@ const ClayTimePicker: React.FunctionComponent<IProps> = ({
 									onKeyDown={(event) =>
 										handleKeyDown(
 											event,
-											values.hours,
+											internalValue.hours,
 											TimeType.hours
 										)
 									}
 									readOnly
 									type="text"
-									value={values.hours}
+									value={internalValue.hours}
 								/>
 								<span className="clay-time-divider">:</span>
 								<input
@@ -420,13 +457,13 @@ const ClayTimePicker: React.FunctionComponent<IProps> = ({
 									onKeyDown={(event) =>
 										handleKeyDown(
 											event,
-											values.minutes,
+											internalValue.minutes,
 											TimeType.minutes
 										)
 									}
 									readOnly
 									type="text"
-									value={values.minutes}
+									value={internalValue.minutes}
 								/>
 								{use12Hours && (
 									<input
@@ -448,20 +485,22 @@ const ClayTimePicker: React.FunctionComponent<IProps> = ({
 										onKeyDown={(event) =>
 											handleKeyDown(
 												event,
-												values.ampm as InputAmPm,
+												internalValue.ampm as InputAmPm,
 												TimeType.ampm
 											)
 										}
 										readOnly
 										type="text"
-										value={values.ampm || DEFAULT_VALUE}
+										value={
+											internalValue.ampm || DEFAULT_VALUE
+										}
 									/>
 								)}
 								{name && (
 									<input
 										name={name}
 										type="hidden"
-										value={`${values.hours}:${values.minutes}`}
+										value={`${internalValue.hours}:${internalValue.minutes}`}
 									/>
 								)}
 							</div>
@@ -482,7 +521,7 @@ const ClayTimePicker: React.FunctionComponent<IProps> = ({
 										disabled={disabled}
 										displayType="unstyled"
 										onClick={() =>
-											onInputChange(
+											setValue(
 												use12Hours
 													? {
 															ampm: DEFAULT_VALUE,

package/README.mdx

@@ -1,9 +0,0 @@
----
-title: 'Time Picker'
-description: 'Time pickers let users select a time for a form.'
-packageNpm: '@clayui/time-picker'
----
-
-import {TimePickerWithState} from '$packages/clay-time-picker/docs/index';
-
-<TimePickerWithState />