react-time-picker - npm Package Compare versions

Comparing version 6.6.0 to 7.0.0

dist/cjs/Divider.d.ts

@@ -1,2 +0,2 @@
-import React from 'react';
+/// <reference types="react" />
 type DividerProps = {
@@ -3,0 +3,0 @@ children?: React.ReactNode;

dist/cjs/Divider.js

 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
 function Divider(_a) {
     var children = _a.children;
-    return react_1.default.createElement("span", { className: "react-time-picker__inputGroup__divider" }, children);
+    return (0, jsx_runtime_1.jsx)("span", { className: "react-time-picker__inputGroup__divider", children: children });
 }
 exports.default = Divider;

dist/cjs/TimeInput.js

@@ -14,34 +14,2 @@ "use strict";
 };
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
@@ -51,3 +19,4 @@ return (mod && mod.__esModule) ? mod : { "default": mod };
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importStar(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
 var date_utils_1 = require("@wojtekmaj/date-utils");
@@ -90,4 +59,4 @@ var Divider_js_1 = __importDefault(require("./Divider.js"));
         // eslint-disable-next-line react/no-array-index-key
-        react_1.default.createElement(Divider_js_1.default, { key: "separator_".concat(index) }, element));
-        var res = __spreadArray(__spreadArray([], arr, true), [divider], false);
+        (0, jsx_runtime_1.jsx)(Divider_js_1.default, { children: element }, "separator_".concat(index)));
+        arr.push(divider);
         var currentMatch = matches && matches[index];
@@ -100,13 +69,13 @@ if (currentMatch) {
             if (!renderFunction) {
-                return res;
+                return arr;
             }
             if (!allowMultipleInstances && usedFunctions.includes(renderFunction)) {
-                res.push(currentMatch);
+                arr.push(currentMatch);
             }
             else {
-                res.push(renderFunction(currentMatch, index));
+                arr.push(renderFunction(currentMatch, index));
                 usedFunctions.push(renderFunction);
             }
         }
-        return res;
+        return arr;
     }, []);
@@ -128,3 +97,3 @@ }
     var _k = (0, react_1.useState)(isClockOpenProps), isClockOpen = _k[0], setIsClockOpen = _k[1];
-    var lastPressedKey = (0, react_1.useRef)();
+    var lastPressedKey = (0, react_1.useRef)(undefined);
     (0, react_1.useEffect)(function () {
@@ -362,5 +331,5 @@ setIsClockOpen(isClockOpenProps);
         var showLeadingZeros = currentMatch ? currentMatch.length === 2 : false;
-        return (react_1.default.createElement(Hour12Input_js_1.default, __assign({ key: "hour12" }, commonInputProps, { amPm: amPm, ariaLabel: hourAriaLabel, 
+        return ((0, jsx_runtime_1.jsx)(Hour12Input_js_1.default, __assign({}, commonInputProps, { amPm: amPm, ariaLabel: hourAriaLabel, 
             // eslint-disable-next-line jsx-a11y/no-autofocus
-            autoFocus: index === 0 && autoFocus, inputRef: hour12Input, placeholder: hourPlaceholder, showLeadingZeros: showLeadingZeros, value: hour })));
+            autoFocus: index === 0 && autoFocus, inputRef: hour12Input, placeholder: hourPlaceholder, showLeadingZeros: showLeadingZeros, value: hour }), "hour12"));
     }
@@ -372,5 +341,5 @@ function renderHour24(currentMatch, index) {
         var showLeadingZeros = currentMatch ? currentMatch.length === 2 : false;
-        return (react_1.default.createElement(Hour24Input_js_1.default, __assign({ key: "hour24" }, commonInputProps, { ariaLabel: hourAriaLabel, 
+        return ((0, jsx_runtime_1.jsx)(Hour24Input_js_1.default, __assign({}, commonInputProps, { ariaLabel: hourAriaLabel, 
             // eslint-disable-next-line jsx-a11y/no-autofocus
-            autoFocus: index === 0 && autoFocus, inputRef: hour24Input, placeholder: hourPlaceholder, showLeadingZeros: showLeadingZeros, value: hour })));
+            autoFocus: index === 0 && autoFocus, inputRef: hour24Input, placeholder: hourPlaceholder, showLeadingZeros: showLeadingZeros, value: hour }), "hour24"));
     }
@@ -388,5 +357,5 @@ function renderHour(currentMatch, index) {
         var showLeadingZeros = currentMatch ? currentMatch.length === 2 : false;
-        return (react_1.default.createElement(MinuteInput_js_1.default, __assign({ key: "minute" }, commonInputProps, { ariaLabel: minuteAriaLabel, 
+        return ((0, jsx_runtime_1.jsx)(MinuteInput_js_1.default, __assign({}, commonInputProps, { ariaLabel: minuteAriaLabel, 
             // eslint-disable-next-line jsx-a11y/no-autofocus
-            autoFocus: index === 0 && autoFocus, hour: hour, inputRef: minuteInput, placeholder: minutePlaceholder, showLeadingZeros: showLeadingZeros, value: minute })));
+            autoFocus: index === 0 && autoFocus, hour: hour, inputRef: minuteInput, placeholder: minutePlaceholder, showLeadingZeros: showLeadingZeros, value: minute }), "minute"));
     }
@@ -398,10 +367,10 @@ function renderSecond(currentMatch, index) {
         var showLeadingZeros = currentMatch ? currentMatch.length === 2 : true;
-        return (react_1.default.createElement(SecondInput_js_1.default, __assign({ key: "second" }, commonInputProps, { ariaLabel: secondAriaLabel, 
+        return ((0, jsx_runtime_1.jsx)(SecondInput_js_1.default, __assign({}, commonInputProps, { ariaLabel: secondAriaLabel, 
             // eslint-disable-next-line jsx-a11y/no-autofocus
-            autoFocus: index === 0 && autoFocus, hour: hour, inputRef: secondInput, minute: minute, placeholder: secondPlaceholder, showLeadingZeros: showLeadingZeros, value: second })));
+            autoFocus: index === 0 && autoFocus, hour: hour, inputRef: secondInput, minute: minute, placeholder: secondPlaceholder, showLeadingZeros: showLeadingZeros, value: second }), "second"));
     }
     function renderAmPm(currentMatch, index) {
-        return (react_1.default.createElement(AmPm_js_1.default, __assign({ key: "ampm" }, commonInputProps, { ariaLabel: amPmAriaLabel, 
+        return ((0, jsx_runtime_1.jsx)(AmPm_js_1.default, __assign({}, commonInputProps, { ariaLabel: amPmAriaLabel, 
             // eslint-disable-next-line jsx-a11y/no-autofocus
-            autoFocus: index === 0 && autoFocus, inputRef: amPmInput, locale: locale, onChange: onChange, value: amPm })));
+            autoFocus: index === 0 && autoFocus, inputRef: amPmInput, locale: locale, onChange: onChange, value: amPm }), "ampm"));
     }
@@ -420,10 +389,8 @@ function renderCustomInputsInternal() {
     function renderNativeInput() {
-        return (react_1.default.createElement(NativeInput_js_1.default, { key: "time", ariaLabel: nativeInputAriaLabel, disabled: disabled, maxTime: maxTime, minTime: minTime, name: name, onChange: onChangeNative, required: required, value: value, valueType: valueType }));
+        return ((0, jsx_runtime_1.jsx)(NativeInput_js_1.default, { ariaLabel: nativeInputAriaLabel, disabled: disabled, maxTime: maxTime, minTime: minTime, name: name, onChange: onChangeNative, required: required, value: value, valueType: valueType }, "time"));
     }
     return (
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
-    react_1.default.createElement("div", { className: className, onClick: onClick },
-        renderNativeInput(),
-        renderCustomInputsInternal()));
+    (0, jsx_runtime_1.jsxs)("div", { className: className, onClick: onClick, children: [renderNativeInput(), renderCustomInputsInternal()] }));
 }
 exports.default = TimeInput;

dist/cjs/TimeInput/AmPm.d.ts

@@ -1,2 +0,2 @@
-import React from 'react';
+/// <reference types="react" />
 type AmPmProps = {
@@ -7,3 +7,3 @@ ariaLabel?: string;
     disabled?: boolean;
-    inputRef?: React.RefObject<HTMLSelectElement>;
+    inputRef?: React.RefObject<HTMLSelectElement | null>;
     locale?: string;
@@ -10,0 +10,0 @@ maxTime?: string;

dist/cjs/TimeInput/AmPm.js

@@ -6,3 +6,3 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
 var clsx_1 = __importDefault(require("clsx"));
@@ -18,7 +18,6 @@ var date_utils_1 = require("@wojtekmaj/date-utils");
     var _b = (0, utils_js_1.getAmPmLabels)(locale), amLabel = _b[0], pmLabel = _b[1];
-    return (react_1.default.createElement("select", { "aria-label": ariaLabel, autoFocus: autoFocus, className: (0, clsx_1.default)("".concat(className, "__input"), "".concat(className, "__").concat(name)), "data-input": "true", "data-select": "true", disabled: disabled, name: name, onChange: onChange, onKeyDown: onKeyDown, ref: inputRef, required: required, value: value !== null ? value : '' },
-        !value && react_1.default.createElement("option", { value: "" }, "--"),
-        react_1.default.createElement("option", { disabled: amDisabled, value: "am" }, amLabel),
-        react_1.default.createElement("option", { disabled: pmDisabled, value: "pm" }, pmLabel)));
+    return ((0, jsx_runtime_1.jsxs)("select", { "aria-label": ariaLabel, autoFocus: autoFocus, className: (0, clsx_1.default)("".concat(className, "__input"), "".concat(className, "__").concat(name)), "data-input": "true", "data-select": "true", disabled: disabled, name: name, onChange: onChange, onKeyDown: onKeyDown, 
+        // Assertion is needed for React 18 compatibility
+        ref: inputRef, required: required, value: value !== null ? value : '', children: [!value && (0, jsx_runtime_1.jsx)("option", { value: "", children: "--" }), (0, jsx_runtime_1.jsx)("option", { disabled: amDisabled, value: "am", children: amLabel }), (0, jsx_runtime_1.jsx)("option", { disabled: pmDisabled, value: "pm", children: pmLabel })] }));
 }
 exports.default = AmPm;

dist/cjs/TimeInput/Hour12Input.d.ts

@@ -1,2 +0,2 @@
-import React from 'react';
+/// <reference types="react" />
 import Input from './Input.js';
@@ -3,0 +3,0 @@ import type { AmPmType } from '../shared/types.js';

dist/cjs/TimeInput/Hour12Input.js

@@ -28,3 +28,3 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
 var date_utils_1 = require("@wojtekmaj/date-utils");
@@ -58,4 +58,4 @@ var Input_js_1 = __importDefault(require("./Input.js"));
     var value12 = value ? (0, dates_js_1.convert24to12)(value)[0].toString() : '';
-    return (react_1.default.createElement(Input_js_1.default, __assign({ max: maxHour, min: minHour, name: "hour12", nameForClass: "hour", value: value12 }, otherProps)));
+    return ((0, jsx_runtime_1.jsx)(Input_js_1.default, __assign({ max: maxHour, min: minHour, name: "hour12", nameForClass: "hour", value: value12 }, otherProps)));
 }
 exports.default = Hour12Input;

dist/cjs/TimeInput/Hour24Input.d.ts

@@ -1,2 +0,2 @@
-import React from 'react';
+/// <reference types="react" />
 import Input from './Input.js';
@@ -3,0 +3,0 @@ type Hour24InputProps = {

dist/cjs/TimeInput/Hour24Input.js

@@ -28,3 +28,3 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
 var date_utils_1 = require("@wojtekmaj/date-utils");
@@ -37,4 +37,4 @@ var Input_js_1 = __importDefault(require("./Input.js"));
     var minHour = (0, utils_js_1.safeMax)(0, minTime && (0, date_utils_1.getHours)(minTime));
-    return react_1.default.createElement(Input_js_1.default, __assign({ max: maxHour, min: minHour, name: "hour24", nameForClass: "hour" }, otherProps));
+    return (0, jsx_runtime_1.jsx)(Input_js_1.default, __assign({ max: maxHour, min: minHour, name: "hour24", nameForClass: "hour" }, otherProps));
 }
 exports.default = Hour24Input;

dist/cjs/TimeInput/Input.d.ts

@@ -1,2 +0,2 @@
-import React from 'react';
+/// <reference types="react" />
 type InputProps = {
@@ -7,3 +7,3 @@ ariaLabel?: string;
     disabled?: boolean;
-    inputRef?: React.RefObject<HTMLInputElement>;
+    inputRef?: React.RefObject<HTMLInputElement | null>;
     max: number;
@@ -10,0 +10,0 @@ min: number;

dist/cjs/TimeInput/Input.js

@@ -29,3 +29,4 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importStar(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
 var clsx_1 = __importDefault(require("clsx"));
@@ -127,11 +128,11 @@ var update_input_width_1 = __importStar(require("update-input-width"));
     var maxLength = max ? max.toString().length : null;
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        hasLeadingZero ? react_1.default.createElement("span", { className: "".concat(className, "__leadingZero") }, "0") : null,
-        react_1.default.createElement("input", { "aria-label": ariaLabel, autoComplete: "off", autoFocus: autoFocus, className: (0, clsx_1.default)("".concat(className, "__input"), "".concat(className, "__").concat(nameForClass || name), hasLeadingZero && "".concat(className, "__input--hasLeadingZero")), "data-input": "true", disabled: disabled, inputMode: "numeric", max: max, min: min, name: name, onChange: onChange, onFocus: onFocus, onKeyDown: onKeyDown, onKeyPress: makeOnKeyPress(maxLength), onKeyUp: function (event) {
-                (0, update_input_width_1.default)(event.target);
-                if (onKeyUp) {
-                    onKeyUp(event);
-                }
-            }, placeholder: placeholder, ref: inputRef, required: required, step: step, type: "number", value: value !== null ? value : '' })));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [hasLeadingZero ? (0, jsx_runtime_1.jsx)("span", { className: "".concat(className, "__leadingZero"), children: "0" }) : null, (0, jsx_runtime_1.jsx)("input", { "aria-label": ariaLabel, autoComplete: "off", autoFocus: autoFocus, className: (0, clsx_1.default)("".concat(className, "__input"), "".concat(className, "__").concat(nameForClass || name), hasLeadingZero && "".concat(className, "__input--hasLeadingZero")), "data-input": "true", disabled: disabled, inputMode: "numeric", max: max, min: min, name: name, onChange: onChange, onFocus: onFocus, onKeyDown: onKeyDown, onKeyPress: makeOnKeyPress(maxLength), onKeyUp: function (event) {
+                    (0, update_input_width_1.default)(event.target);
+                    if (onKeyUp) {
+                        onKeyUp(event);
+                    }
+                }, placeholder: placeholder, 
+                // Assertion is needed for React 18 compatibility
+                ref: inputRef, required: required, step: step, type: "number", value: value !== null ? value : '' })] }));
 }
 exports.default = Input;

dist/cjs/TimeInput/MinuteInput.d.ts

@@ -1,2 +0,2 @@
-import React from 'react';
+/// <reference types="react" />
 import Input from './Input.js';
@@ -3,0 +3,0 @@ type MinuteInputProps = {

dist/cjs/TimeInput/MinuteInput.js

@@ -28,3 +28,3 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
 var date_utils_1 = require("@wojtekmaj/date-utils");
@@ -40,4 +40,4 @@ var Input_js_1 = __importDefault(require("./Input.js"));
     var minMinute = (0, utils_js_1.safeMax)(0, minTime && isSameHour(minTime) && (0, date_utils_1.getMinutes)(minTime));
-    return (react_1.default.createElement(Input_js_1.default, __assign({ max: maxMinute, min: minMinute, name: "minute", showLeadingZeros: showLeadingZeros }, otherProps)));
+    return ((0, jsx_runtime_1.jsx)(Input_js_1.default, __assign({ max: maxMinute, min: minMinute, name: "minute", showLeadingZeros: showLeadingZeros }, otherProps)));
 }
 exports.default = MinuteInput;

dist/cjs/TimeInput/NativeInput.d.ts

@@ -1,2 +0,2 @@
-import React from 'react';
+/// <reference types="react" />
 type NativeInputProps = {
@@ -3,0 +3,0 @@ ariaLabel?: string;

dist/cjs/TimeInput/NativeInput.js

 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
 var date_utils_1 = require("@wojtekmaj/date-utils");
@@ -37,3 +34,3 @@ function NativeInput(_a) {
     }
-    return (react_1.default.createElement("input", { "aria-label": ariaLabel, disabled: disabled, hidden: true, max: maxTime ? nativeValueParser(maxTime) : undefined, min: minTime ? nativeValueParser(minTime) : undefined, name: name, onChange: onChange, onFocus: stopPropagation, required: required, step: step, style: {
+    return ((0, jsx_runtime_1.jsx)("input", { "aria-label": ariaLabel, disabled: disabled, hidden: true, max: maxTime ? nativeValueParser(maxTime) : undefined, min: minTime ? nativeValueParser(minTime) : undefined, name: name, onChange: onChange, onFocus: stopPropagation, required: required, step: step, style: {
             visibility: 'hidden',
@@ -40,0 +37,0 @@ position: 'absolute',

dist/cjs/TimeInput/SecondInput.d.ts

@@ -1,2 +0,2 @@
-import React from 'react';
+/// <reference types="react" />
 import Input from './Input.js';
@@ -3,0 +3,0 @@ type SecondInputProps = {

dist/cjs/TimeInput/SecondInput.js

@@ -28,3 +28,3 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
 var date_utils_1 = require("@wojtekmaj/date-utils");
@@ -40,4 +40,4 @@ var Input_js_1 = __importDefault(require("./Input.js"));
     var minSecond = (0, utils_js_1.safeMax)(0, minTime && isSameMinute(minTime) && (0, date_utils_1.getSeconds)(minTime));
-    return (react_1.default.createElement(Input_js_1.default, __assign({ max: maxSecond, min: minSecond, name: "second", showLeadingZeros: showLeadingZeros }, otherProps)));
+    return ((0, jsx_runtime_1.jsx)(Input_js_1.default, __assign({ max: maxSecond, min: minSecond, name: "second", showLeadingZeros: showLeadingZeros }, otherProps)));
 }
 exports.default = SecondInput;

dist/cjs/TimePicker.d.ts

@@ -1,7 +0,7 @@
-import React from 'react';
+/// <reference types="react" />
 import makeEventProps from 'make-event-props';
 import Clock from 'react-clock';
-import type { ReactNodeArray } from 'prop-types';
 import type { ClassName, CloseReason, Detail, LooseValue, OpenReason, Value } from './shared/types.js';
-type Icon = React.ReactElement | ReactNodeArray | null | string | number | boolean;
+type ReactNodeLike = React.ReactNode | string | number | boolean | null | undefined;
+type Icon = ReactNodeLike | ReactNodeLike[];
 type IconOrRenderFunction = Icon | React.ComponentType | React.ReactElement;
@@ -51,9 +51,2 @@ type ClockProps = Omit<React.ComponentPropsWithoutRef<typeof Clock>, 'value'>;
     /**
-     * Class name(s) that will be added along with `"react-clock"` to the main React-Clock `<time>` element.
-     *
-     * @example 'class1 class2'
-     * @example ['class1', 'class2 class3']
-     */
-    clockClassName?: ClassName;
-    /**
      * Content of the clock button. Setting the value explicitly to `null` will hide the icon.
@@ -67,2 +60,6 @@ *
     /**
+     * Props to pass to React-Clock component.
+     */
+    clockProps?: ClockProps;
+    /**
      * Whether to close the clock on value selection.
@@ -274,4 +271,4 @@ *
     value?: LooseValue;
-} & ClockProps & Omit<EventProps, 'onChange' | 'onFocus'>;
-declare const TimePicker: React.FC<TimePickerProps>;
-export default TimePicker;
+} & Omit<EventProps, 'onChange' | 'onFocus'>;
+export default function TimePicker(props: TimePickerProps): JSX.Element;
+export {};

dist/cjs/TimePicker.js

@@ -14,25 +14,2 @@ "use strict";
 };
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __rest = (this && this.__rest) || function (s, e) {
@@ -53,5 +30,5 @@ var t = {};
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importStar(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
 var react_dom_1 = require("react-dom");
-var prop_types_1 = __importDefault(require("prop-types"));
 var make_event_props_1 = __importDefault(require("make-event-props"));
@@ -62,7 +39,4 @@ var clsx_1 = __importDefault(require("clsx"));
 var TimeInput_js_1 = __importDefault(require("./TimeInput.js"));
-var propTypes_js_1 = require("./shared/propTypes.js");
-var isBrowser = typeof document !== 'undefined';
 var baseClassName = 'react-time-picker';
 var outsideActionEvents = ['mousedown', 'focusin', 'touchstart'];
-var allViews = ['hour', 'minute', 'second'];
 var iconProps = {
@@ -76,9 +50,5 @@ xmlns: 'http://www.w3.org/2000/svg',
 };
-var ClockIcon = (react_1.default.createElement("svg", __assign({}, iconProps, { className: "".concat(baseClassName, "__clock-button__icon ").concat(baseClassName, "__button__icon"), fill: "none" }),
-    react_1.default.createElement("circle", { cx: "9.5", cy: "9.5", r: "7.5" }),
-    react_1.default.createElement("path", { d: "M9.5 4.5 v5 h4" })));
-var ClearIcon = (react_1.default.createElement("svg", __assign({}, iconProps, { className: "".concat(baseClassName, "__clear-button__icon ").concat(baseClassName, "__button__icon") }),
-    react_1.default.createElement("line", { x1: "4", x2: "15", y1: "4", y2: "15" }),
-    react_1.default.createElement("line", { x1: "15", x2: "4", y1: "4", y2: "15" })));
-var TimePicker = function TimePicker(props) {
+var ClockIcon = ((0, jsx_runtime_1.jsxs)("svg", __assign({}, iconProps, { className: "".concat(baseClassName, "__clock-button__icon ").concat(baseClassName, "__button__icon"), fill: "none", children: [(0, jsx_runtime_1.jsx)("circle", { cx: "9.5", cy: "9.5", r: "7.5" }), (0, jsx_runtime_1.jsx)("path", { d: "M9.5 4.5 v5 h4" })] })));
+var ClearIcon = ((0, jsx_runtime_1.jsxs)("svg", __assign({}, iconProps, { className: "".concat(baseClassName, "__clear-button__icon ").concat(baseClassName, "__button__icon"), children: [(0, jsx_runtime_1.jsx)("line", { x1: "4", x2: "15", y1: "4", y2: "15" }), (0, jsx_runtime_1.jsx)("line", { x1: "15", x2: "4", y1: "4", y2: "15" })] })));
+function TimePicker(props) {
     var amPmAriaLabel = props.amPmAriaLabel, autoFocus = props.autoFocus, className = props.className, clearAriaLabel = props.clearAriaLabel, _a = props.clearIcon, clearIcon = _a === void 0 ? ClearIcon : _a, clockAriaLabel = props.clockAriaLabel, _b = props.clockIcon, clockIcon = _b === void 0 ? ClockIcon : _b, _c = props.closeClock, shouldCloseClockOnSelect = _c === void 0 ? true : _c, dataTestid = props["data-testid"], hourAriaLabel = props.hourAriaLabel, hourPlaceholder = props.hourPlaceholder, disableClock = props.disableClock, disabled = props.disabled, format = props.format, id = props.id, _d = props.isOpen, isOpenProps = _d === void 0 ? null : _d, locale = props.locale, maxTime = props.maxTime, _e = props.maxDetail, maxDetail = _e === void 0 ? 'minute' : _e, minTime = props.minTime, minuteAriaLabel = props.minuteAriaLabel, minutePlaceholder = props.minutePlaceholder, _f = props.name, name = _f === void 0 ? 'time' : _f, nativeInputAriaLabel = props.nativeInputAriaLabel, onClockClose = props.onClockClose, onClockOpen = props.onClockOpen, onChangeProps = props.onChange, onFocusProps = props.onFocus, onInvalidChange = props.onInvalidChange, _g = props.openClockOnFocus, openClockOnFocus = _g === void 0 ? true : _g, required = props.required, value = props.value, secondAriaLabel = props.secondAriaLabel, secondPlaceholder = props.secondPlaceholder, shouldCloseClock = props.shouldCloseClock, shouldOpenClock = props.shouldOpenClock, otherProps = __rest(props, ["amPmAriaLabel", "autoFocus", "className", "clearAriaLabel", "clearIcon", "clockAriaLabel", "clockIcon", "closeClock", 'data-testid', "hourAriaLabel", "hourPlaceholder", "disableClock", "disabled", "format", "id", "isOpen", "locale", "maxTime", "maxDetail", "minTime", "minuteAriaLabel", "minutePlaceholder", "name", "nativeInputAriaLabel", "onClockClose", "onClockOpen", "onChange", "onFocus", "onInvalidChange", "openClockOnFocus", "required", "value", "secondAriaLabel", "secondPlaceholder", "shouldCloseClock", "shouldOpenClock"]);
@@ -206,8 +176,5 @@ var _h = (0, react_1.useState)(isOpenProps), isOpen = _h[0], setIsOpen = _h[1];
         };
-        return (react_1.default.createElement("div", { className: "".concat(baseClassName, "__wrapper") },
-            react_1.default.createElement(TimeInput_js_1.default, __assign({}, ariaLabelProps, placeholderProps, { 
-                // eslint-disable-next-line jsx-a11y/no-autofocus
-                autoFocus: autoFocus, className: "".concat(baseClassName, "__inputGroup"), disabled: disabled, format: format, isClockOpen: isOpen, locale: locale, maxDetail: maxDetail, maxTime: maxTime, minTime: minTime, name: name, onChange: onChange, onInvalidChange: onInvalidChange, required: required, value: valueFrom })),
-            clearIcon !== null && (react_1.default.createElement("button", { "aria-label": clearAriaLabel, className: "".concat(baseClassName, "__clear-button ").concat(baseClassName, "__button"), disabled: disabled, onClick: clear, onFocus: stopPropagation, type: "button" }, typeof clearIcon === 'function' ? react_1.default.createElement(clearIcon) : clearIcon)),
-            clockIcon !== null && !disableClock && (react_1.default.createElement("button", { "aria-label": clockAriaLabel, className: "".concat(baseClassName, "__clock-button ").concat(baseClassName, "__button"), disabled: disabled, onClick: toggleClock, onFocus: stopPropagation, type: "button" }, typeof clockIcon === 'function' ? react_1.default.createElement(clockIcon) : clockIcon))));
+        return ((0, jsx_runtime_1.jsxs)("div", { className: "".concat(baseClassName, "__wrapper"), children: [(0, jsx_runtime_1.jsx)(TimeInput_js_1.default, __assign({}, ariaLabelProps, placeholderProps, { 
+                    // eslint-disable-next-line jsx-a11y/no-autofocus
+                    autoFocus: autoFocus, className: "".concat(baseClassName, "__inputGroup"), disabled: disabled, format: format, isClockOpen: isOpen, locale: locale, maxDetail: maxDetail, maxTime: maxTime, minTime: minTime, name: name, onChange: onChange, onInvalidChange: onInvalidChange, required: required, value: valueFrom })), clearIcon !== null && ((0, jsx_runtime_1.jsx)("button", { "aria-label": clearAriaLabel, className: "".concat(baseClassName, "__clear-button ").concat(baseClassName, "__button"), disabled: disabled, onClick: clear, onFocus: stopPropagation, type: "button", children: typeof clearIcon === 'function' ? (0, react_1.createElement)(clearIcon) : clearIcon })), clockIcon !== null && !disableClock && ((0, jsx_runtime_1.jsx)("button", { "aria-expanded": isOpen || false, "aria-label": clockAriaLabel, className: "".concat(baseClassName, "__clock-button ").concat(baseClassName, "__button"), disabled: disabled, onClick: toggleClock, onFocus: stopPropagation, type: "button", children: typeof clockIcon === 'function' ? (0, react_1.createElement)(clockIcon) : clockIcon }))] }));
     }
@@ -218,62 +185,16 @@ function renderClock() {
         }
-        var clockClassName = props.clockClassName, timePickerClassName = props.className, // Unused, here to exclude it from clockProps
-        onChangeProps = props.onChange, // Unused, here to exclude it from clockProps
-        portalContainer = props.portalContainer, value = props.value, clockProps = __rest(props, ["clockClassName", "className", "onChange", "portalContainer", "value"]);
+        var clockProps = props.clockProps, portalContainer = props.portalContainer, value = props.value;
         var className = "".concat(baseClassName, "__clock");
         var classNames = (0, clsx_1.default)(className, "".concat(className, "--").concat(isOpen ? 'open' : 'closed'));
         var valueFrom = (Array.isArray(value) ? value : [value])[0];
-        var clock = react_1.default.createElement(react_clock_1.default, __assign({ className: clockClassName, value: valueFrom }, clockProps));
-        return portalContainer ? ((0, react_dom_1.createPortal)(react_1.default.createElement("div", { ref: clockWrapper, className: classNames }, clock), portalContainer)) : (react_1.default.createElement(react_fit_1.default, null,
-            react_1.default.createElement("div", { ref: function (ref) {
+        var clock = (0, jsx_runtime_1.jsx)(react_clock_1.default, __assign({ locale: locale, value: valueFrom }, clockProps));
+        return portalContainer ? ((0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)("div", { ref: clockWrapper, className: classNames, children: clock }), portalContainer)) : ((0, jsx_runtime_1.jsx)(react_fit_1.default, { children: (0, jsx_runtime_1.jsx)("div", { ref: function (ref) {
                     if (ref && !isOpen) {
                         ref.removeAttribute('style');
                     }
-                }, className: classNames }, clock)));
+                }, className: classNames, children: clock }) }));
     }
     var eventProps = (0, react_1.useMemo)(function () { return (0, make_event_props_1.default)(otherProps); }, [otherProps]);
-    return (react_1.default.createElement("div", __assign({ className: (0, clsx_1.default)(baseClassName, "".concat(baseClassName, "--").concat(isOpen ? 'open' : 'closed'), "".concat(baseClassName, "--").concat(disabled ? 'disabled' : 'enabled'), className), "data-testid": dataTestid, id: id }, eventProps, { onFocus: onFocus, ref: wrapper }),
-        renderInputs(),
-        renderClock()));
-};
-var isValue = prop_types_1.default.oneOfType([propTypes_js_1.isTime, prop_types_1.default.instanceOf(Date)]);
-var isValueOrValueArray = prop_types_1.default.oneOfType([isValue, (0, propTypes_js_1.rangeOf)(isValue)]);
-TimePicker.propTypes = {
-    amPmAriaLabel: prop_types_1.default.string,
-    autoFocus: prop_types_1.default.bool,
-    className: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.arrayOf(prop_types_1.default.string)]),
-    clearAriaLabel: prop_types_1.default.string,
-    clearIcon: prop_types_1.default.oneOfType([prop_types_1.default.node, prop_types_1.default.func]),
-    clockAriaLabel: prop_types_1.default.string,
-    clockClassName: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.arrayOf(prop_types_1.default.string)]),
-    clockIcon: prop_types_1.default.oneOfType([prop_types_1.default.node, prop_types_1.default.func]),
-    closeClock: prop_types_1.default.bool,
-    'data-testid': prop_types_1.default.string,
-    disableClock: prop_types_1.default.bool,
-    disabled: prop_types_1.default.bool,
-    format: prop_types_1.default.string,
-    hourAriaLabel: prop_types_1.default.string,
-    hourPlaceholder: prop_types_1.default.string,
-    id: prop_types_1.default.string,
-    isOpen: prop_types_1.default.bool,
-    locale: prop_types_1.default.string,
-    maxDetail: prop_types_1.default.oneOf(allViews),
-    maxTime: propTypes_js_1.isTime,
-    minTime: propTypes_js_1.isTime,
-    minuteAriaLabel: prop_types_1.default.string,
-    minutePlaceholder: prop_types_1.default.string,
-    name: prop_types_1.default.string,
-    nativeInputAriaLabel: prop_types_1.default.string,
-    onChange: prop_types_1.default.func,
-    onClockClose: prop_types_1.default.func,
-    onClockOpen: prop_types_1.default.func,
-    onFocus: prop_types_1.default.func,
-    openClockOnFocus: prop_types_1.default.bool,
-    required: prop_types_1.default.bool,
-    secondAriaLabel: prop_types_1.default.string,
-    secondPlaceholder: prop_types_1.default.string,
-    value: isValueOrValueArray,
-};
-if (isBrowser) {
-    TimePicker.propTypes.portalContainer = prop_types_1.default.instanceOf(HTMLElement);
+    return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: (0, clsx_1.default)(baseClassName, "".concat(baseClassName, "--").concat(isOpen ? 'open' : 'closed'), "".concat(baseClassName, "--").concat(disabled ? 'disabled' : 'enabled'), className), "data-testid": dataTestid, id: id }, eventProps, { onFocus: onFocus, ref: wrapper, children: [renderInputs(), renderClock()] })));
 }
 exports.default = TimePicker;

dist/esm/Divider.d.ts

@@ -1,2 +0,2 @@
-import React from 'react';
+/// <reference types="react" />
 type DividerProps = {
@@ -3,0 +3,0 @@ children?: React.ReactNode;

dist/esm/Divider.js

@@ -1,5 +0,5 @@
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 export default function Divider(_a) {
     var children = _a.children;
-    return React.createElement("span", { className: "react-time-picker__inputGroup__divider" }, children);
+    return _jsx("span", { className: "react-time-picker__inputGroup__divider", children: children });
 }

dist/esm/TimeInput.js

@@ -13,12 +13,4 @@ 'use client';
 };
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
-import React, { useEffect, useRef, useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
 import { getHours, getMinutes, getSeconds, getHoursMinutes, getHoursMinutesSeconds, } from '@wojtekmaj/date-utils';
@@ -61,4 +53,4 @@ import Divider from './Divider.js';
         // eslint-disable-next-line react/no-array-index-key
-        React.createElement(Divider, { key: "separator_".concat(index) }, element));
-        var res = __spreadArray(__spreadArray([], arr, true), [divider], false);
+        _jsx(Divider, { children: element }, "separator_".concat(index)));
+        arr.push(divider);
         var currentMatch = matches && matches[index];
@@ -71,13 +63,13 @@ if (currentMatch) {
             if (!renderFunction) {
-                return res;
+                return arr;
             }
             if (!allowMultipleInstances && usedFunctions.includes(renderFunction)) {
-                res.push(currentMatch);
+                arr.push(currentMatch);
             }
             else {
-                res.push(renderFunction(currentMatch, index));
+                arr.push(renderFunction(currentMatch, index));
                 usedFunctions.push(renderFunction);
             }
         }
-        return res;
+        return arr;
     }, []);
@@ -99,3 +91,3 @@ }
     var _k = useState(isClockOpenProps), isClockOpen = _k[0], setIsClockOpen = _k[1];
-    var lastPressedKey = useRef();
+    var lastPressedKey = useRef(undefined);
     useEffect(function () {
@@ -333,5 +325,5 @@ setIsClockOpen(isClockOpenProps);
         var showLeadingZeros = currentMatch ? currentMatch.length === 2 : false;
-        return (React.createElement(Hour12Input, __assign({ key: "hour12" }, commonInputProps, { amPm: amPm, ariaLabel: hourAriaLabel, 
+        return (_jsx(Hour12Input, __assign({}, commonInputProps, { amPm: amPm, ariaLabel: hourAriaLabel, 
             // eslint-disable-next-line jsx-a11y/no-autofocus
-            autoFocus: index === 0 && autoFocus, inputRef: hour12Input, placeholder: hourPlaceholder, showLeadingZeros: showLeadingZeros, value: hour })));
+            autoFocus: index === 0 && autoFocus, inputRef: hour12Input, placeholder: hourPlaceholder, showLeadingZeros: showLeadingZeros, value: hour }), "hour12"));
     }
@@ -343,5 +335,5 @@ function renderHour24(currentMatch, index) {
         var showLeadingZeros = currentMatch ? currentMatch.length === 2 : false;
-        return (React.createElement(Hour24Input, __assign({ key: "hour24" }, commonInputProps, { ariaLabel: hourAriaLabel, 
+        return (_jsx(Hour24Input, __assign({}, commonInputProps, { ariaLabel: hourAriaLabel, 
             // eslint-disable-next-line jsx-a11y/no-autofocus
-            autoFocus: index === 0 && autoFocus, inputRef: hour24Input, placeholder: hourPlaceholder, showLeadingZeros: showLeadingZeros, value: hour })));
+            autoFocus: index === 0 && autoFocus, inputRef: hour24Input, placeholder: hourPlaceholder, showLeadingZeros: showLeadingZeros, value: hour }), "hour24"));
     }
@@ -359,5 +351,5 @@ function renderHour(currentMatch, index) {
         var showLeadingZeros = currentMatch ? currentMatch.length === 2 : false;
-        return (React.createElement(MinuteInput, __assign({ key: "minute" }, commonInputProps, { ariaLabel: minuteAriaLabel, 
+        return (_jsx(MinuteInput, __assign({}, commonInputProps, { ariaLabel: minuteAriaLabel, 
             // eslint-disable-next-line jsx-a11y/no-autofocus
-            autoFocus: index === 0 && autoFocus, hour: hour, inputRef: minuteInput, placeholder: minutePlaceholder, showLeadingZeros: showLeadingZeros, value: minute })));
+            autoFocus: index === 0 && autoFocus, hour: hour, inputRef: minuteInput, placeholder: minutePlaceholder, showLeadingZeros: showLeadingZeros, value: minute }), "minute"));
     }
@@ -369,10 +361,10 @@ function renderSecond(currentMatch, index) {
         var showLeadingZeros = currentMatch ? currentMatch.length === 2 : true;
-        return (React.createElement(SecondInput, __assign({ key: "second" }, commonInputProps, { ariaLabel: secondAriaLabel, 
+        return (_jsx(SecondInput, __assign({}, commonInputProps, { ariaLabel: secondAriaLabel, 
             // eslint-disable-next-line jsx-a11y/no-autofocus
-            autoFocus: index === 0 && autoFocus, hour: hour, inputRef: secondInput, minute: minute, placeholder: secondPlaceholder, showLeadingZeros: showLeadingZeros, value: second })));
+            autoFocus: index === 0 && autoFocus, hour: hour, inputRef: secondInput, minute: minute, placeholder: secondPlaceholder, showLeadingZeros: showLeadingZeros, value: second }), "second"));
     }
     function renderAmPm(currentMatch, index) {
-        return (React.createElement(AmPm, __assign({ key: "ampm" }, commonInputProps, { ariaLabel: amPmAriaLabel, 
+        return (_jsx(AmPm, __assign({}, commonInputProps, { ariaLabel: amPmAriaLabel, 
             // eslint-disable-next-line jsx-a11y/no-autofocus
-            autoFocus: index === 0 && autoFocus, inputRef: amPmInput, locale: locale, onChange: onChange, value: amPm })));
+            autoFocus: index === 0 && autoFocus, inputRef: amPmInput, locale: locale, onChange: onChange, value: amPm }), "ampm"));
     }
@@ -391,9 +383,7 @@ function renderCustomInputsInternal() {
     function renderNativeInput() {
-        return (React.createElement(NativeInput, { key: "time", ariaLabel: nativeInputAriaLabel, disabled: disabled, maxTime: maxTime, minTime: minTime, name: name, onChange: onChangeNative, required: required, value: value, valueType: valueType }));
+        return (_jsx(NativeInput, { ariaLabel: nativeInputAriaLabel, disabled: disabled, maxTime: maxTime, minTime: minTime, name: name, onChange: onChangeNative, required: required, value: value, valueType: valueType }, "time"));
     }
     return (
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
-    React.createElement("div", { className: className, onClick: onClick },
-        renderNativeInput(),
-        renderCustomInputsInternal()));
+    _jsxs("div", { className: className, onClick: onClick, children: [renderNativeInput(), renderCustomInputsInternal()] }));
 }

dist/esm/TimeInput/AmPm.d.ts

@@ -1,2 +0,2 @@
-import React from 'react';
+/// <reference types="react" />
 type AmPmProps = {
@@ -7,3 +7,3 @@ ariaLabel?: string;
     disabled?: boolean;
-    inputRef?: React.RefObject<HTMLSelectElement>;
+    inputRef?: React.RefObject<HTMLSelectElement | null>;
     locale?: string;
@@ -10,0 +10,0 @@ maxTime?: string;

dist/esm/TimeInput/AmPm.js

@@ -1,2 +0,2 @@
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import clsx from 'clsx';
@@ -12,6 +12,5 @@ import { getHours } from '@wojtekmaj/date-utils';
     var _b = getAmPmLabels(locale), amLabel = _b[0], pmLabel = _b[1];
-    return (React.createElement("select", { "aria-label": ariaLabel, autoFocus: autoFocus, className: clsx("".concat(className, "__input"), "".concat(className, "__").concat(name)), "data-input": "true", "data-select": "true", disabled: disabled, name: name, onChange: onChange, onKeyDown: onKeyDown, ref: inputRef, required: required, value: value !== null ? value : '' },
-        !value && React.createElement("option", { value: "" }, "--"),
-        React.createElement("option", { disabled: amDisabled, value: "am" }, amLabel),
-        React.createElement("option", { disabled: pmDisabled, value: "pm" }, pmLabel)));
+    return (_jsxs("select", { "aria-label": ariaLabel, autoFocus: autoFocus, className: clsx("".concat(className, "__input"), "".concat(className, "__").concat(name)), "data-input": "true", "data-select": "true", disabled: disabled, name: name, onChange: onChange, onKeyDown: onKeyDown, 
+        // Assertion is needed for React 18 compatibility
+        ref: inputRef, required: required, value: value !== null ? value : '', children: [!value && _jsx("option", { value: "", children: "--" }), _jsx("option", { disabled: amDisabled, value: "am", children: amLabel }), _jsx("option", { disabled: pmDisabled, value: "pm", children: pmLabel })] }));
 }

dist/esm/TimeInput/Hour12Input.d.ts

@@ -1,2 +0,2 @@
-import React from 'react';
+/// <reference types="react" />
 import Input from './Input.js';
@@ -3,0 +3,0 @@ import type { AmPmType } from '../shared/types.js';

dist/esm/TimeInput/Hour12Input.js

@@ -23,3 +23,3 @@ var __assign = (this && this.__assign) || function () {
 };
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { getHours } from '@wojtekmaj/date-utils';
@@ -53,3 +53,3 @@ import Input from './Input.js';
     var value12 = value ? convert24to12(value)[0].toString() : '';
-    return (React.createElement(Input, __assign({ max: maxHour, min: minHour, name: "hour12", nameForClass: "hour", value: value12 }, otherProps)));
+    return (_jsx(Input, __assign({ max: maxHour, min: minHour, name: "hour12", nameForClass: "hour", value: value12 }, otherProps)));
 }

dist/esm/TimeInput/Hour24Input.d.ts

@@ -1,2 +0,2 @@
-import React from 'react';
+/// <reference types="react" />
 import Input from './Input.js';
@@ -3,0 +3,0 @@ type Hour24InputProps = {

dist/esm/TimeInput/Hour24Input.js

@@ -23,3 +23,3 @@ var __assign = (this && this.__assign) || function () {
 };
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { getHours } from '@wojtekmaj/date-utils';
@@ -32,3 +32,3 @@ import Input from './Input.js';
     var minHour = safeMax(0, minTime && getHours(minTime));
-    return React.createElement(Input, __assign({ max: maxHour, min: minHour, name: "hour24", nameForClass: "hour" }, otherProps));
+    return _jsx(Input, __assign({ max: maxHour, min: minHour, name: "hour24", nameForClass: "hour" }, otherProps));
 }

dist/esm/TimeInput/Input.d.ts

@@ -1,2 +0,2 @@
-import React from 'react';
+/// <reference types="react" />
 type InputProps = {
@@ -7,3 +7,3 @@ ariaLabel?: string;
     disabled?: boolean;
-    inputRef?: React.RefObject<HTMLInputElement>;
+    inputRef?: React.RefObject<HTMLInputElement | null>;
     max: number;
@@ -10,0 +10,0 @@ min: number;

dist/esm/TimeInput/Input.js

@@ -1,2 +0,3 @@
-import React, { useEffect, useLayoutEffect } from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useLayoutEffect } from 'react';
 import clsx from 'clsx';
@@ -98,10 +99,10 @@ import updateInputWidth, { getFontShorthand } from 'update-input-width';
     var maxLength = max ? max.toString().length : null;
-    return (React.createElement(React.Fragment, null,
-        hasLeadingZero ? React.createElement("span", { className: "".concat(className, "__leadingZero") }, "0") : null,
-        React.createElement("input", { "aria-label": ariaLabel, autoComplete: "off", autoFocus: autoFocus, className: clsx("".concat(className, "__input"), "".concat(className, "__").concat(nameForClass || name), hasLeadingZero && "".concat(className, "__input--hasLeadingZero")), "data-input": "true", disabled: disabled, inputMode: "numeric", max: max, min: min, name: name, onChange: onChange, onFocus: onFocus, onKeyDown: onKeyDown, onKeyPress: makeOnKeyPress(maxLength), onKeyUp: function (event) {
-                updateInputWidth(event.target);
-                if (onKeyUp) {
-                    onKeyUp(event);
-                }
-            }, placeholder: placeholder, ref: inputRef, required: required, step: step, type: "number", value: value !== null ? value : '' })));
+    return (_jsxs(_Fragment, { children: [hasLeadingZero ? _jsx("span", { className: "".concat(className, "__leadingZero"), children: "0" }) : null, _jsx("input", { "aria-label": ariaLabel, autoComplete: "off", autoFocus: autoFocus, className: clsx("".concat(className, "__input"), "".concat(className, "__").concat(nameForClass || name), hasLeadingZero && "".concat(className, "__input--hasLeadingZero")), "data-input": "true", disabled: disabled, inputMode: "numeric", max: max, min: min, name: name, onChange: onChange, onFocus: onFocus, onKeyDown: onKeyDown, onKeyPress: makeOnKeyPress(maxLength), onKeyUp: function (event) {
+                    updateInputWidth(event.target);
+                    if (onKeyUp) {
+                        onKeyUp(event);
+                    }
+                }, placeholder: placeholder, 
+                // Assertion is needed for React 18 compatibility
+                ref: inputRef, required: required, step: step, type: "number", value: value !== null ? value : '' })] }));
 }

dist/esm/TimeInput/MinuteInput.d.ts

@@ -1,2 +0,2 @@
-import React from 'react';
+/// <reference types="react" />
 import Input from './Input.js';
@@ -3,0 +3,0 @@ type MinuteInputProps = {

dist/esm/TimeInput/MinuteInput.js

@@ -23,3 +23,3 @@ var __assign = (this && this.__assign) || function () {
 };
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { getHours, getMinutes } from '@wojtekmaj/date-utils';
@@ -35,3 +35,3 @@ import Input from './Input.js';
     var minMinute = safeMax(0, minTime && isSameHour(minTime) && getMinutes(minTime));
-    return (React.createElement(Input, __assign({ max: maxMinute, min: minMinute, name: "minute", showLeadingZeros: showLeadingZeros }, otherProps)));
+    return (_jsx(Input, __assign({ max: maxMinute, min: minMinute, name: "minute", showLeadingZeros: showLeadingZeros }, otherProps)));
 }

dist/esm/TimeInput/NativeInput.d.ts

@@ -1,2 +0,2 @@
-import React from 'react';
+/// <reference types="react" />
 type NativeInputProps = {
@@ -3,0 +3,0 @@ ariaLabel?: string;

dist/esm/TimeInput/NativeInput.js

@@ -1,2 +0,2 @@
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { getHours, getHoursMinutes, getHoursMinutesSeconds } from '@wojtekmaj/date-utils';
@@ -32,3 +32,3 @@ export default function NativeInput(_a) {
     }
-    return (React.createElement("input", { "aria-label": ariaLabel, disabled: disabled, hidden: true, max: maxTime ? nativeValueParser(maxTime) : undefined, min: minTime ? nativeValueParser(minTime) : undefined, name: name, onChange: onChange, onFocus: stopPropagation, required: required, step: step, style: {
+    return (_jsx("input", { "aria-label": ariaLabel, disabled: disabled, hidden: true, max: maxTime ? nativeValueParser(maxTime) : undefined, min: minTime ? nativeValueParser(minTime) : undefined, name: name, onChange: onChange, onFocus: stopPropagation, required: required, step: step, style: {
             visibility: 'hidden',
@@ -35,0 +35,0 @@ position: 'absolute',

dist/esm/TimeInput/SecondInput.d.ts

@@ -1,2 +0,2 @@
-import React from 'react';
+/// <reference types="react" />
 import Input from './Input.js';
@@ -3,0 +3,0 @@ type SecondInputProps = {

dist/esm/TimeInput/SecondInput.js

@@ -23,3 +23,3 @@ var __assign = (this && this.__assign) || function () {
 };
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { getHours, getMinutes, getSeconds } from '@wojtekmaj/date-utils';
@@ -35,3 +35,3 @@ import Input from './Input.js';
     var minSecond = safeMax(0, minTime && isSameMinute(minTime) && getSeconds(minTime));
-    return (React.createElement(Input, __assign({ max: maxSecond, min: minSecond, name: "second", showLeadingZeros: showLeadingZeros }, otherProps)));
+    return (_jsx(Input, __assign({ max: maxSecond, min: minSecond, name: "second", showLeadingZeros: showLeadingZeros }, otherProps)));
 }

dist/esm/TimePicker.d.ts

@@ -1,7 +0,7 @@
-import React from 'react';
+/// <reference types="react" />
 import makeEventProps from 'make-event-props';
 import Clock from 'react-clock';
-import type { ReactNodeArray } from 'prop-types';
 import type { ClassName, CloseReason, Detail, LooseValue, OpenReason, Value } from './shared/types.js';
-type Icon = React.ReactElement | ReactNodeArray | null | string | number | boolean;
+type ReactNodeLike = React.ReactNode | string | number | boolean | null | undefined;
+type Icon = ReactNodeLike | ReactNodeLike[];
 type IconOrRenderFunction = Icon | React.ComponentType | React.ReactElement;
@@ -51,9 +51,2 @@ type ClockProps = Omit<React.ComponentPropsWithoutRef<typeof Clock>, 'value'>;
     /**
-     * Class name(s) that will be added along with `"react-clock"` to the main React-Clock `<time>` element.
-     *
-     * @example 'class1 class2'
-     * @example ['class1', 'class2 class3']
-     */
-    clockClassName?: ClassName;
-    /**
      * Content of the clock button. Setting the value explicitly to `null` will hide the icon.
@@ -67,2 +60,6 @@ *
     /**
+     * Props to pass to React-Clock component.
+     */
+    clockProps?: ClockProps;
+    /**
      * Whether to close the clock on value selection.
@@ -274,4 +271,4 @@ *
     value?: LooseValue;
-} & ClockProps & Omit<EventProps, 'onChange' | 'onFocus'>;
-declare const TimePicker: React.FC<TimePickerProps>;
-export default TimePicker;
+} & Omit<EventProps, 'onChange' | 'onFocus'>;
+export default function TimePicker(props: TimePickerProps): JSX.Element;
+export {};

dist/esm/TimePicker.js

@@ -24,5 +24,5 @@ 'use client';
 };
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createElement, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
-import PropTypes from 'prop-types';
 import makeEventProps from 'make-event-props';
@@ -33,7 +33,4 @@ import clsx from 'clsx';
 import TimeInput from './TimeInput.js';
-import { isTime, rangeOf } from './shared/propTypes.js';
-var isBrowser = typeof document !== 'undefined';
 var baseClassName = 'react-time-picker';
 var outsideActionEvents = ['mousedown', 'focusin', 'touchstart'];
-var allViews = ['hour', 'minute', 'second'];
 var iconProps = {
@@ -47,9 +44,5 @@ xmlns: 'http://www.w3.org/2000/svg',
 };
-var ClockIcon = (React.createElement("svg", __assign({}, iconProps, { className: "".concat(baseClassName, "__clock-button__icon ").concat(baseClassName, "__button__icon"), fill: "none" }),
-    React.createElement("circle", { cx: "9.5", cy: "9.5", r: "7.5" }),
-    React.createElement("path", { d: "M9.5 4.5 v5 h4" })));
-var ClearIcon = (React.createElement("svg", __assign({}, iconProps, { className: "".concat(baseClassName, "__clear-button__icon ").concat(baseClassName, "__button__icon") }),
-    React.createElement("line", { x1: "4", x2: "15", y1: "4", y2: "15" }),
-    React.createElement("line", { x1: "15", x2: "4", y1: "4", y2: "15" })));
-var TimePicker = function TimePicker(props) {
+var ClockIcon = (_jsxs("svg", __assign({}, iconProps, { className: "".concat(baseClassName, "__clock-button__icon ").concat(baseClassName, "__button__icon"), fill: "none", children: [_jsx("circle", { cx: "9.5", cy: "9.5", r: "7.5" }), _jsx("path", { d: "M9.5 4.5 v5 h4" })] })));
+var ClearIcon = (_jsxs("svg", __assign({}, iconProps, { className: "".concat(baseClassName, "__clear-button__icon ").concat(baseClassName, "__button__icon"), children: [_jsx("line", { x1: "4", x2: "15", y1: "4", y2: "15" }), _jsx("line", { x1: "15", x2: "4", y1: "4", y2: "15" })] })));
+export default function TimePicker(props) {
     var amPmAriaLabel = props.amPmAriaLabel, autoFocus = props.autoFocus, className = props.className, clearAriaLabel = props.clearAriaLabel, _a = props.clearIcon, clearIcon = _a === void 0 ? ClearIcon : _a, clockAriaLabel = props.clockAriaLabel, _b = props.clockIcon, clockIcon = _b === void 0 ? ClockIcon : _b, _c = props.closeClock, shouldCloseClockOnSelect = _c === void 0 ? true : _c, dataTestid = props["data-testid"], hourAriaLabel = props.hourAriaLabel, hourPlaceholder = props.hourPlaceholder, disableClock = props.disableClock, disabled = props.disabled, format = props.format, id = props.id, _d = props.isOpen, isOpenProps = _d === void 0 ? null : _d, locale = props.locale, maxTime = props.maxTime, _e = props.maxDetail, maxDetail = _e === void 0 ? 'minute' : _e, minTime = props.minTime, minuteAriaLabel = props.minuteAriaLabel, minutePlaceholder = props.minutePlaceholder, _f = props.name, name = _f === void 0 ? 'time' : _f, nativeInputAriaLabel = props.nativeInputAriaLabel, onClockClose = props.onClockClose, onClockOpen = props.onClockOpen, onChangeProps = props.onChange, onFocusProps = props.onFocus, onInvalidChange = props.onInvalidChange, _g = props.openClockOnFocus, openClockOnFocus = _g === void 0 ? true : _g, required = props.required, value = props.value, secondAriaLabel = props.secondAriaLabel, secondPlaceholder = props.secondPlaceholder, shouldCloseClock = props.shouldCloseClock, shouldOpenClock = props.shouldOpenClock, otherProps = __rest(props, ["amPmAriaLabel", "autoFocus", "className", "clearAriaLabel", "clearIcon", "clockAriaLabel", "clockIcon", "closeClock", 'data-testid', "hourAriaLabel", "hourPlaceholder", "disableClock", "disabled", "format", "id", "isOpen", "locale", "maxTime", "maxDetail", "minTime", "minuteAriaLabel", "minutePlaceholder", "name", "nativeInputAriaLabel", "onClockClose", "onClockOpen", "onChange", "onFocus", "onInvalidChange", "openClockOnFocus", "required", "value", "secondAriaLabel", "secondPlaceholder", "shouldCloseClock", "shouldOpenClock"]);
@@ -177,8 +170,5 @@ var _h = useState(isOpenProps), isOpen = _h[0], setIsOpen = _h[1];
         };
-        return (React.createElement("div", { className: "".concat(baseClassName, "__wrapper") },
-            React.createElement(TimeInput, __assign({}, ariaLabelProps, placeholderProps, { 
-                // eslint-disable-next-line jsx-a11y/no-autofocus
-                autoFocus: autoFocus, className: "".concat(baseClassName, "__inputGroup"), disabled: disabled, format: format, isClockOpen: isOpen, locale: locale, maxDetail: maxDetail, maxTime: maxTime, minTime: minTime, name: name, onChange: onChange, onInvalidChange: onInvalidChange, required: required, value: valueFrom })),
-            clearIcon !== null && (React.createElement("button", { "aria-label": clearAriaLabel, className: "".concat(baseClassName, "__clear-button ").concat(baseClassName, "__button"), disabled: disabled, onClick: clear, onFocus: stopPropagation, type: "button" }, typeof clearIcon === 'function' ? React.createElement(clearIcon) : clearIcon)),
-            clockIcon !== null && !disableClock && (React.createElement("button", { "aria-label": clockAriaLabel, className: "".concat(baseClassName, "__clock-button ").concat(baseClassName, "__button"), disabled: disabled, onClick: toggleClock, onFocus: stopPropagation, type: "button" }, typeof clockIcon === 'function' ? React.createElement(clockIcon) : clockIcon))));
+        return (_jsxs("div", { className: "".concat(baseClassName, "__wrapper"), children: [_jsx(TimeInput, __assign({}, ariaLabelProps, placeholderProps, { 
+                    // eslint-disable-next-line jsx-a11y/no-autofocus
+                    autoFocus: autoFocus, className: "".concat(baseClassName, "__inputGroup"), disabled: disabled, format: format, isClockOpen: isOpen, locale: locale, maxDetail: maxDetail, maxTime: maxTime, minTime: minTime, name: name, onChange: onChange, onInvalidChange: onInvalidChange, required: required, value: valueFrom })), clearIcon !== null && (_jsx("button", { "aria-label": clearAriaLabel, className: "".concat(baseClassName, "__clear-button ").concat(baseClassName, "__button"), disabled: disabled, onClick: clear, onFocus: stopPropagation, type: "button", children: typeof clearIcon === 'function' ? createElement(clearIcon) : clearIcon })), clockIcon !== null && !disableClock && (_jsx("button", { "aria-expanded": isOpen || false, "aria-label": clockAriaLabel, className: "".concat(baseClassName, "__clock-button ").concat(baseClassName, "__button"), disabled: disabled, onClick: toggleClock, onFocus: stopPropagation, type: "button", children: typeof clockIcon === 'function' ? createElement(clockIcon) : clockIcon }))] }));
     }
@@ -189,62 +179,15 @@ function renderClock() {
         }
-        var clockClassName = props.clockClassName, timePickerClassName = props.className, // Unused, here to exclude it from clockProps
-        onChangeProps = props.onChange, // Unused, here to exclude it from clockProps
-        portalContainer = props.portalContainer, value = props.value, clockProps = __rest(props, ["clockClassName", "className", "onChange", "portalContainer", "value"]);
+        var clockProps = props.clockProps, portalContainer = props.portalContainer, value = props.value;
         var className = "".concat(baseClassName, "__clock");
         var classNames = clsx(className, "".concat(className, "--").concat(isOpen ? 'open' : 'closed'));
         var valueFrom = (Array.isArray(value) ? value : [value])[0];
-        var clock = React.createElement(Clock, __assign({ className: clockClassName, value: valueFrom }, clockProps));
-        return portalContainer ? (createPortal(React.createElement("div", { ref: clockWrapper, className: classNames }, clock), portalContainer)) : (React.createElement(Fit, null,
-            React.createElement("div", { ref: function (ref) {
+        var clock = _jsx(Clock, __assign({ locale: locale, value: valueFrom }, clockProps));
+        return portalContainer ? (createPortal(_jsx("div", { ref: clockWrapper, className: classNames, children: clock }), portalContainer)) : (_jsx(Fit, { children: _jsx("div", { ref: function (ref) {
                     if (ref && !isOpen) {
                         ref.removeAttribute('style');
                     }
-                }, className: classNames }, clock)));
+                }, className: classNames, children: clock }) }));
     }
     var eventProps = useMemo(function () { return makeEventProps(otherProps); }, [otherProps]);
-    return (React.createElement("div", __assign({ className: clsx(baseClassName, "".concat(baseClassName, "--").concat(isOpen ? 'open' : 'closed'), "".concat(baseClassName, "--").concat(disabled ? 'disabled' : 'enabled'), className), "data-testid": dataTestid, id: id }, eventProps, { onFocus: onFocus, ref: wrapper }),
-        renderInputs(),
-        renderClock()));
-};
-var isValue = PropTypes.oneOfType([isTime, PropTypes.instanceOf(Date)]);
-var isValueOrValueArray = PropTypes.oneOfType([isValue, rangeOf(isValue)]);
-TimePicker.propTypes = {
-    amPmAriaLabel: PropTypes.string,
-    autoFocus: PropTypes.bool,
-    className: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
-    clearAriaLabel: PropTypes.string,
-    clearIcon: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
-    clockAriaLabel: PropTypes.string,
-    clockClassName: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
-    clockIcon: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
-    closeClock: PropTypes.bool,
-    'data-testid': PropTypes.string,
-    disableClock: PropTypes.bool,
-    disabled: PropTypes.bool,
-    format: PropTypes.string,
-    hourAriaLabel: PropTypes.string,
-    hourPlaceholder: PropTypes.string,
-    id: PropTypes.string,
-    isOpen: PropTypes.bool,
-    locale: PropTypes.string,
-    maxDetail: PropTypes.oneOf(allViews),
-    maxTime: isTime,
-    minTime: isTime,
-    minuteAriaLabel: PropTypes.string,
-    minutePlaceholder: PropTypes.string,
-    name: PropTypes.string,
-    nativeInputAriaLabel: PropTypes.string,
-    onChange: PropTypes.func,
-    onClockClose: PropTypes.func,
-    onClockOpen: PropTypes.func,
-    onFocus: PropTypes.func,
-    openClockOnFocus: PropTypes.bool,
-    required: PropTypes.bool,
-    secondAriaLabel: PropTypes.string,
-    secondPlaceholder: PropTypes.string,
-    value: isValueOrValueArray,
-};
-if (isBrowser) {
-    TimePicker.propTypes.portalContainer = PropTypes.instanceOf(HTMLElement);
+    return (_jsxs("div", __assign({ className: clsx(baseClassName, "".concat(baseClassName, "--").concat(isOpen ? 'open' : 'closed'), "".concat(baseClassName, "--").concat(disabled ? 'disabled' : 'enabled'), className), "data-testid": dataTestid, id: id }, eventProps, { onFocus: onFocus, ref: wrapper, children: [renderInputs(), renderClock()] })));
 }
-export default TimePicker;

package.json

 {
   "name": "react-time-picker",
-  "version": "6.6.0",
+  "version": "7.0.0",
   "description": "A time picker for your React app.",
@@ -96,10 +96,10 @@ "type": "module",
     "build-js-esm": "tsc --project tsconfig.build.json --outDir dist/esm",
-    "build-js-cjs": "tsc --project tsconfig.build.json --outDir dist/cjs --module commonjs --verbatimModuleSyntax false",
+    "build-js-cjs": "tsc --project tsconfig.build.json --outDir dist/cjs --module commonjs --moduleResolution node --verbatimModuleSyntax false",
     "build-js-cjs-package": "echo '{\n  \"type\": \"commonjs\"\n}' > dist/cjs/package.json",
     "clean": "rimraf dist",
     "copy-styles": "cpy 'src/**/*.css' dist",
+    "format": "prettier --check . --cache",
     "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
     "prepack": "yarn clean && yarn build",
-    "prettier": "prettier --check . --cache",
-    "test": "yarn lint && yarn tsc && yarn prettier && yarn unit",
+    "test": "yarn lint && yarn tsc && yarn format && yarn unit",
     "tsc": "tsc",
@@ -124,24 +124,23 @@ "unit": "vitest",
     "make-event-props": "^1.6.0",
-    "prop-types": "^15.6.0",
-    "react-clock": "^4.5.0",
-    "react-fit": "^1.7.0",
+    "react-clock": "^5.0.0",
+    "react-fit": "^2.0.0",
     "update-input-width": "^1.4.0"
   },
   "devDependencies": {
-    "@testing-library/dom": "^9.0.0",
+    "@testing-library/dom": "^10.0.0",
     "@testing-library/jest-dom": "^6.0.0",
-    "@testing-library/react": "^14.0.0",
-    "@testing-library/user-event": "^14.4.0",
+    "@testing-library/react": "^15.0.0",
+    "@testing-library/user-event": "^14.5.0",
     "@types/node": "*",
     "@types/react": "*",
     "cpy-cli": "^5.0.0",
-    "eslint": "^8.26.0",
-    "eslint-config-wojtekmaj": "^0.9.0",
+    "eslint": "^8.56.0",
+    "eslint-config-wojtekmaj": "^1.0.0",
     "happy-dom": "^12.6.0",
     "nodemon": "^3.0.0",
-    "prettier": "^3.0.0",
+    "prettier": "^3.2.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "rimraf": "^3.0.0",
-    "typescript": "^5.3.2",
+    "typescript": "^5.4.2",
     "vitest": "^1.0.2",
@@ -151,5 +150,5 @@ "vitest-canvas-mock": "^0.2.2"
   "peerDependencies": {
-    "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+    "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
   },
@@ -171,3 +170,3 @@ "peerDependenciesMeta": {
     "type": "git",
-    "url": "https://github.com/wojtekmaj/react-time-picker.git",
+    "url": "git+https://github.com/wojtekmaj/react-time-picker.git",
     "directory": "packages/react-time-picker"
@@ -174,0 +173,0 @@ },

README.md

@@ -22,2 +22,10 @@ [![npm](https://img.shields.io/npm/v/react-time-picker.svg)](https://www.npmjs.com/package/react-time-picker) ![downloads](https://img.shields.io/npm/dt/react-time-picker.svg) [![CI](https://github.com/wojtekmaj/react-time-picker/actions/workflows/ci.yml/badge.svg)](https://github.com/wojtekmaj/react-time-picker/actions)
 
+## Consider native alternative
+
+If you don't need to support legacy browsers and don't need the advanced features this package provides, consider using native time input instead. It's more accessible, adds no extra weight to your bundle, and works better on mobile devices.
+
+```tsx
+<input aria-label="Time" type="time" />
+```
+
 ## Looking for a date picker or a datetime picker?
@@ -90,3 +98,3 @@
 | clockAriaLabel       | `aria-label` for the clock button.                                                                                                                                                                                                                                                                                                                | n/a                                   | `"Toggle clock"`                                                                                                                                                                                                                      |
-| clockClassName       | Class name(s) that will be added along with `"react-clock"` to the main React-Clock `<time>` element.                                                                                                                                                                                                                                             | n/a                                   | <ul><li>String: `"class1 class2"`</li><li>Array of strings: `["class1", "class2 class3"]`</li></ul>                                                                                                                                   |
+| clockProps           | Props to pass to React-Clock component.                                                                                                                                                                                                                                                                                                           | n/a                                   | See [React-Clock documentation](https://github.com/wojtekmaj/react-clock)                                                                                                                                                             |
 | clockIcon            | Content of the clock button. Setting the value explicitly to `null` will hide the icon.                                                                                                                                                                                                                                                           | (default icon)                        | <ul><li>String: `"Clock"`</li><li>React element: `<ClockIcon />`</li><li>React function: `ClockIcon`</li></ul>                                                                                                                        |
@@ -93,0 +101,0 @@ | closeClock           | Whether to close the clock on value selection. **Note**: It's recommended to use `shouldCloseClock` function instead.                                                                                                                                                                                                                             | `true`                                | `false`                                                                                                                                                                                                                               |

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Dependency count

10

decreased by-9.09%

Number of lines in readme file

150

increased by5.63%

Worsened metrics

Total package byte prevSize

291643

decreased by-4.94%

Number of package files

91

decreased by-5.21%

Lines of code

6399

decreased by-5.45%

Dependency changes

• + Addedreact-clock@5.1.0(transitive)

• + Addedreact-fit@2.0.1(transitive)

• + Addedwarning@4.0.3(transitive)

• - Removedprop-types@^15.6.0

• - Removedobject-assign@4.1.1(transitive)

• - Removedprop-types@15.8.1(transitive)

• - Removedreact-clock@4.6.0(transitive)

• - Removedreact-fit@1.7.1(transitive)

• - Removedreact-is@16.13.1(transitive)

• - Removedtiny-warning@1.0.3(transitive)

• Updatedreact-clock@^5.0.0

• Updatedreact-fit@^2.0.0