@ringcentral/juno 2.46.0 → 3.0.0-alpha.1

package/components/Forms/Picker/DatePicker/styles/StyledDatePickerHeader.js

@@ -1,38 +1,37 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.SwitchHeaderWrapper = exports.SwitchHeaderButtonWrapper = exports.SwitchHeaderButton = exports.StyledCurrentMonth = void 0;
 var tslib_1 = require("tslib");
 var foundation_1 = require("../../../../../foundation");
 var Buttons_1 = require("../../../../Buttons");
 var utils_1 = require("../../../../Buttons/IconButton/utils");
 var Icon_1 = require("../../../../Icon");
 var utils_2 = require("../utils");
-var monthInactiveStyle = foundation_1.css(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  &,\n  ", " {\n    color: ", ";\n  }\n"], ["\n  &,\n  ", " {\n    color: ", ";\n  }\n"])), Icon_1.RcIcon, foundation_1.focusVisibleColor);
-var StyledCurrentMonth = foundation_1.styled.button(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n  background: none;\n  border: none;\n  cursor: pointer;\n  outline: inherit;\n\n  ", ";\n  position: relative;\n  cursor: pointer;\n  margin-left: ", ";\n  color: ", ";\n  ", ";\n  border-radius: ", ";\n\n  padding: ", ";\n\n  ", ";\n\n  ", " {\n    margin-left: ", ";\n    transform: rotate(", "deg);\n    color: ", ";\n  }\n\n  ", " {\n    ", ";\n  }\n\n  ", " {\n    &:hover {\n      ", ";\n    }\n  }\n"], ["\n  background: none;\n  border: none;\n  cursor: pointer;\n  outline: inherit;\n\n  ", ";\n  position: relative;\n  cursor: pointer;\n  margin-left: ", ";\n  color: ", ";\n  ", ";\n  border-radius: ", ";\n\n  padding: ", ";\n\n  ", ";\n\n  ", " {\n    margin-left: ", ";\n    transform: rotate(", "deg);\n    color: ", ";\n  }\n\n  ", " {\n    ", ";\n  }\n\n  ", " {\n    &:hover {\n      ", ";\n    }\n  }\n"])), foundation_1.flexCenterStyle, foundation_1.spacing(5), utils_2.textColor, foundation_1.typography('body2'), foundation_1.radius('sm'), foundation_1.spacing(1, 0, 1, 1), foundation_1.focusVisibleShadowStyle('lg', undefined, undefined, 2), Icon_1.RcIcon, foundation_1.spacing(2), function (_a) {
+var monthInactiveStyle = (0, foundation_1.css)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  &,\n  ", " {\n    color: ", ";\n  }\n"], ["\n  &,\n  ", " {\n    color: ", ";\n  }\n"])), Icon_1.RcIcon, foundation_1.focusVisibleColor);
+var StyledCurrentMonth = foundation_1.styled.button(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n  background: none;\n  border: none;\n  cursor: pointer;\n  outline: inherit;\n\n  ", ";\n  position: relative;\n  cursor: pointer;\n  margin-left: ", ";\n  color: ", ";\n  ", ";\n  border-radius: ", ";\n\n  padding: ", ";\n\n  ", ";\n\n  ", " {\n    margin-left: ", ";\n    transform: rotate(", "deg);\n    color: ", ";\n  }\n\n  ", " {\n    ", ";\n  }\n\n  ", " {\n    &:hover {\n      ", ";\n    }\n  }\n"], ["\n  background: none;\n  border: none;\n  cursor: pointer;\n  outline: inherit;\n\n  ", ";\n  position: relative;\n  cursor: pointer;\n  margin-left: ", ";\n  color: ", ";\n  ", ";\n  border-radius: ", ";\n\n  padding: ", ";\n\n  ", ";\n\n  ", " {\n    margin-left: ", ";\n    transform: rotate(", "deg);\n    color: ", ";\n  }\n\n  ", " {\n    ", ";\n  }\n\n  ", " {\n    &:hover {\n      ", ";\n    }\n  }\n"])), foundation_1.flexCenterStyle, (0, foundation_1.spacing)(5), utils_2.textColor, (0, foundation_1.typography)('body2'), (0, foundation_1.radius)('sm'), (0, foundation_1.spacing)(1, 0, 1, 1), (0, foundation_1.focusVisibleShadowStyle)('lg', undefined, undefined, 2), Icon_1.RcIcon, (0, foundation_1.spacing)(2), function (_a) {
     var view = _a.view;
     return (view === 'day' ? '0' : '180');
-}, foundation_1.palette2('neutral', 'f04'), foundation_1.focusVisible, monthInactiveStyle, foundation_1.nonTouchHoverMedia, monthInactiveStyle);
+}, (0, foundation_1.palette2)('neutral', 'f04'), foundation_1.focusVisible, monthInactiveStyle, foundation_1.nonTouchHoverMedia, monthInactiveStyle);
 exports.StyledCurrentMonth = StyledCurrentMonth;
-var SwitchHeaderWrapper = foundation_1.styled.div(templateObject_4 || (templateObject_4 = tslib_1.__makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  flex-wrap: wrap;\n\n  ", "\n"], ["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  flex-wrap: wrap;\n\n  ",
-    "\n"])), function (_a) {
+var SwitchHeaderWrapper = foundation_1.styled.div(templateObject_4 || (templateObject_4 = tslib_1.__makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  flex-wrap: wrap;\n\n  ", "\n"], ["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  flex-wrap: wrap;\n\n  ", "\n"])), function (_a) {
     var size = _a.size;
     if (size === 'small') {
         return '';
     }
-    return foundation_1.css(templateObject_3 || (templateObject_3 = tslib_1.__makeTemplateObject(["\n      height: 24px;\n      margin-bottom: 12px;\n    "], ["\n      height: 24px;\n      margin-bottom: 12px;\n    "])));
+    return (0, foundation_1.css)(templateObject_3 || (templateObject_3 = tslib_1.__makeTemplateObject(["\n      height: 24px;\n      margin-bottom: 12px;\n    "], ["\n      height: 24px;\n      margin-bottom: 12px;\n    "])));
 });
 exports.SwitchHeaderWrapper = SwitchHeaderWrapper;
-var SwitchHeaderButtonWrapper = foundation_1.styled(Buttons_1.RcIconButtonGroup)(templateObject_7 || (templateObject_7 = tslib_1.__makeTemplateObject(["\n  flex: 1;\n  display: ", ";\n  justify-content: flex-end;\n  padding-right: 12px;\n\n  ", "\n"], ["\n  flex: 1;\n  display: ", ";\n  justify-content: flex-end;\n  padding-right: 12px;\n\n  ",
-    "\n"])), function (_a) {
+var SwitchHeaderButtonWrapper = (0, foundation_1.styled)(Buttons_1.RcIconButtonGroup)(templateObject_7 || (templateObject_7 = tslib_1.__makeTemplateObject(["\n  flex: 1;\n  display: ", ";\n  justify-content: flex-end;\n  padding-right: 12px;\n\n  ", "\n"], ["\n  flex: 1;\n  display: ", ";\n  justify-content: flex-end;\n  padding-right: 12px;\n\n  ", "\n"])), function (_a) {
     var view = _a.view;
     return (view === 'day' ? 'flex' : 'none');
 }, function (_a) {
     var size = _a.size;
     if (size === 'small') {
-        return foundation_1.css(templateObject_5 || (templateObject_5 = tslib_1.__makeTemplateObject(["\n        flex: 1 1 100%;\n      "], ["\n        flex: 1 1 100%;\n      "])));
+        return (0, foundation_1.css)(templateObject_5 || (templateObject_5 = tslib_1.__makeTemplateObject(["\n        flex: 1 1 100%;\n      "], ["\n        flex: 1 1 100%;\n      "])));
     }
-    return foundation_1.css(templateObject_6 || (templateObject_6 = tslib_1.__makeTemplateObject(["\n      height: 24px;\n    "], ["\n      height: 24px;\n    "])));
+    return (0, foundation_1.css)(templateObject_6 || (templateObject_6 = tslib_1.__makeTemplateObject(["\n      height: 24px;\n    "], ["\n      height: 24px;\n    "])));
 });
 exports.SwitchHeaderButtonWrapper = SwitchHeaderButtonWrapper;
-var SwitchHeaderButton = foundation_1.styled(Buttons_1.RcIconButton)(templateObject_8 || (templateObject_8 = tslib_1.__makeTemplateObject(["\n  &.", " {\n    ", " {\n      font-size: 24px;\n    }\n  }\n"], ["\n  &.", " {\n    ", " {\n      font-size: 24px;\n    }\n  }\n"])), utils_1.RcIconButtonClasses.root, Icon_1.RcIcon);
+var SwitchHeaderButton = (0, foundation_1.styled)(Buttons_1.RcIconButton)(templateObject_8 || (templateObject_8 = tslib_1.__makeTemplateObject(["\n  &.", " {\n    ", " {\n      font-size: 24px;\n    }\n  }\n"], ["\n  &.", " {\n    ", " {\n      font-size: 24px;\n    }\n  }\n"])), utils_1.RcIconButtonClasses.root, Icon_1.RcIcon);
 exports.SwitchHeaderButton = SwitchHeaderButton;
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;

package/components/Forms/Picker/DatePicker/styles/StyledDay.js

@@ -1,14 +1,16 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.DayStyle = void 0;
 var tslib_1 = require("tslib");
 var foundation_1 = require("../../../../../foundation");
 var utils_1 = require("../../../../Buttons/IconButton/utils");
 var styles_1 = require("../../styles");
 var utils_2 = require("../utils");
-var CurrentDayStyle = foundation_1.css(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  border: 1px solid ", ";\n"], ["\n  border: 1px solid ", ";\n"])), foundation_1.palette2('neutral', 'b04'));
-exports.DayStyle = function (_a) {
+var CurrentDayStyle = (0, foundation_1.css)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  border: 1px solid ", ";\n"], ["\n  border: 1px solid ", ";\n"])), (0, foundation_1.palette2)('neutral', 'b04'));
+var DayStyle = function (_a) {
     var current = _a.current, size = _a.size, hidden = _a.hidden, selected = _a.selected;
     var sizeValue = utils_2.RcDatePickerIconWidths[size];
-    return foundation_1.css(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n    &.", " {\n      width: ", ";\n      height: ", ";\n      margin: 0 2px;\n      visibility: ", ";\n      ", ";\n      ", ";\n\n      ", "\n    }\n  "], ["\n    &.", " {\n      width: ", ";\n      height: ", ";\n      margin: 0 2px;\n      visibility: ", ";\n      ", ";\n      ", ";\n\n      ", "\n    }\n  "])), utils_1.RcIconButtonClasses.root, sizeValue, sizeValue, hidden && 'hidden', foundation_1.typography('caption1'), current && !selected && CurrentDayStyle, styles_1.datePickerCustomFocusRingStyle);
+    return (0, foundation_1.css)(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n    &.", " {\n      width: ", ";\n      height: ", ";\n      margin: 0 2px;\n      visibility: ", ";\n      ", ";\n      ", ";\n\n      ", "\n    }\n  "], ["\n    &.", " {\n      width: ", ";\n      height: ", ";\n      margin: 0 2px;\n      visibility: ", ";\n      ", ";\n      ", ";\n\n      ", "\n    }\n  "])), utils_1.RcIconButtonClasses.root, sizeValue, sizeValue, hidden && 'hidden', (0, foundation_1.typography)('caption1'), current && !selected && CurrentDayStyle, styles_1.datePickerCustomFocusRingStyle);
 };
+exports.DayStyle = DayStyle;
 var templateObject_1, templateObject_2;

package/components/Forms/Picker/DatePicker/styles/StyledYear.d.ts

@@ -1,5 +1,2 @@
 /// <reference types="react" />
-/// <reference types="styled-jsx" />
-export declare const StyledYear: import("styled-components").StyledComponentClass<Pick<import("../../styles").PickerBaseIconButtonProps, "symbol" | "key" | "form" | "className" | "color" | "id" | "lang" | "name" | "style" | "type" | "role" | "tabIndex" | "elevation" | "href" | "radius" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "slot" | "title" | "download" | "theme" | "translate" | "classes" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "size" | "value" | "variant" | "innerRef" | "disabled" | "action" | "buttonRef" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "onFocusVisible" | "TouchRippleProps" | "loading" | "CircularProgressProps" | "iconColor" | "iconSize" | "invisible" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "IconProps" | "focusVariant" | "useRcTooltip" | "TooltipProps" | "selected" | "shouldPersistBg" | "stretchIcon" | "useColorWhenDisabled" | "activeElevation" | "disabledFakeBorder" | "alwaysEnableTooltip" | "tooltipTitle" | "tooltipPlacement" | "disableToolTip" | "popperProps" | "tooltipForceHide" | "externalLink" | "ariaLabel" | "aRef" | "as"> & import("react").RefAttributes<any>, import("../../../../../foundation").RcTheme, Pick<Pick<import("../../styles").PickerBaseIconButtonProps, "symbol" | "key" | "form" | "className" | "color" | "id" | "lang" | "name" | "style" | "type" | "role" | "tabIndex" | "elevation" | "href" | "radius" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "slot" | "title" | "download" | "theme" | "translate" | "classes" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "size" | "value" | "variant" | "innerRef" | "disabled" | "action" | "buttonRef" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "onFocusVisible" | "TouchRippleProps" | "loading" | "CircularProgressProps" | "iconColor" | "iconSize" | "invisible" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "IconProps" | "focusVariant" | "useRcTooltip" | "TooltipProps" | "selected" | "shouldPersistBg" | "stretchIcon" | "useColorWhenDisabled" | "activeElevation" | "disabledFakeBorder" | "alwaysEnableTooltip" | "tooltipTitle" | "tooltipPlacement" | "disableToolTip" | "popperProps" | "tooltipForceHide" | "externalLink" | "ariaLabel" | "aRef" | "as"> & import("react").RefAttributes<any>, "symbol" | "ref" | "key" | "form" | "className" | "color" | "id" | "lang" | "name" | "style" | "type" | "role" | "tabIndex" | "elevation" | "href" | "radius" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "slot" | "title" | "download" | "translate" | "classes" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "size" | "value" | "variant" | "innerRef" | "disabled" | "action" | "buttonRef" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "onFocusVisible" | "TouchRippleProps" | "loading" | "CircularProgressProps" | "iconColor" | "iconSize" | "invisible" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "IconProps" | "focusVariant" | "useRcTooltip" | "TooltipProps" | "selected" | "shouldPersistBg" | "stretchIcon" | "useColorWhenDisabled" | "activeElevation" | "disabledFakeBorder" | "alwaysEnableTooltip" | "tooltipTitle" | "tooltipPlacement" | "disableToolTip" | "popperProps" | "tooltipForceHide" | "externalLink" | "ariaLabel" | "aRef" | "as"> & {
-    theme?: import("../../../../../foundation").RcTheme | undefined;
-}>;
+export declare const StyledYear: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Omit<import("../../styles").PickerBaseIconButtonProps, "ref"> & import("react").RefAttributes<any>>, import("../../../../../foundation").RcTheme, {}, never>;

package/components/Forms/Picker/DatePicker/styles/StyledYear.js

@@ -1,8 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledYear = void 0;
 var tslib_1 = require("tslib");
 var foundation_1 = require("../../../../../foundation");
 var utils_1 = require("../../../../Buttons/IconButton/utils");
 var styles_1 = require("../../styles");
-exports.StyledYear = foundation_1.styled(styles_1.PickerBaseIconButton)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  &.", " {\n    width: 56px;\n    min-width: 56px;\n    height: 28px;\n    margin: 4px 0;\n    ", ";\n    ", ";\n  }\n"], ["\n  &.", " {\n    width: 56px;\n    min-width: 56px;\n    height: 28px;\n    margin: 4px 0;\n    ", ";\n    ", ";\n  }\n"])), utils_1.RcIconButtonClasses.root, foundation_1.typography('body1'), styles_1.datePickerCustomFocusRingStyle);
+exports.StyledYear = (0, foundation_1.styled)(styles_1.PickerBaseIconButton)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  &.", " {\n    width: 56px;\n    min-width: 56px;\n    height: 28px;\n    margin: 4px 0;\n    ", ";\n    ", ";\n  }\n"], ["\n  &.", " {\n    width: 56px;\n    min-width: 56px;\n    height: 28px;\n    margin: 4px 0;\n    ", ";\n    ", ";\n  }\n"])), utils_1.RcIconButtonClasses.root, (0, foundation_1.typography)('body1'), styles_1.datePickerCustomFocusRingStyle);
 var templateObject_1;

package/components/Forms/Picker/DatePicker/styles/StyledYears.d.ts

@@ -1,7 +1,5 @@
-/// <reference types="react" />
-/// <reference types="styled-jsx" />
-declare type YearsWrapperProps = {
+type YearsWrapperProps = {
     columns: number;
 };
-export declare const YearsWrapper: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLUListElement> & import("react").HTMLAttributes<HTMLUListElement> & YearsWrapperProps, import("../../../../../foundation").RcTheme, import("react").ClassAttributes<HTMLUListElement> & import("react").HTMLAttributes<HTMLUListElement> & YearsWrapperProps>;
+export declare const YearsWrapper: import("styled-components").StyledComponent<"ul", import("../../../../../foundation").RcTheme, YearsWrapperProps, never>;
 export {};

package/components/Forms/Picker/DatePicker/styles/StyledYears.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.YearsWrapper = void 0;
 var tslib_1 = require("tslib");
 var foundation_1 = require("../../../../../foundation");
 exports.YearsWrapper = foundation_1.styled.ul(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  display: flex;\n  margin: 0;\n  padding: 0;\n  flex-wrap: wrap;\n  overflow-y: auto;\n  padding-left: 16px;\n\n  li {\n    list-style: none;\n\n    &:not(:nth-child(", "n + 1)) {\n      margin-left: 4px;\n    }\n  }\n"], ["\n  display: flex;\n  margin: 0;\n  padding: 0;\n  flex-wrap: wrap;\n  overflow-y: auto;\n  padding-left: 16px;\n\n  li {\n    list-style: none;\n\n    &:not(:nth-child(", "n + 1)) {\n      margin-left: 4px;\n    }\n  }\n"])), function (_a) {

package/components/Forms/Picker/DatePicker/utils/DatePickerAriaLabelUtils.d.ts

@@ -1,5 +1,5 @@
 import React, { FunctionComponent } from 'react';
-declare type ScreenReaderProps = {
+type ScreenReaderProps = {
     getMonthYearAriaLabel: (monthLabel?: string, expanded?: boolean) => string;
     getYearAriaLabel: (year?: string, selected?: boolean) => string;
     getSwitchMonthAriaLabel: (isNext?: boolean, currentMonth?: string) => string;
@@ -8,8 +8,9 @@ declare type ScreenReaderProps = {
 };
 declare const ScreenReaderContext: React.Context<ScreenReaderProps>;
 declare const useScreenReaderContext: () => Partial<ScreenReaderProps>;
-declare type ScreenReaderProviderProps = {
+type ScreenReaderProviderProps = {
     screenReaderProps: ScreenReaderProps;
+    children?: React.ReactNode;
 };
 declare const ScreenReaderProvider: FunctionComponent<ScreenReaderProviderProps>;
 export { ScreenReaderContext, ScreenReaderProvider, useScreenReaderContext };

package/components/Forms/Picker/DatePicker/utils/DatePickerAriaLabelUtils.js

@@ -1,11 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.useScreenReaderContext = exports.ScreenReaderProvider = exports.ScreenReaderContext = void 0;
 var tslib_1 = require("tslib");
 var react_1 = tslib_1.__importStar(require("react"));
-var ScreenReaderContext = react_1.createContext({});
+var ScreenReaderContext = (0, react_1.createContext)({});
 exports.ScreenReaderContext = ScreenReaderContext;
 var useScreenReaderContext = function () {
-    return react_1.useContext(ScreenReaderContext);
+    return (0, react_1.useContext)(ScreenReaderContext);
 };
 exports.useScreenReaderContext = useScreenReaderContext;
 var ScreenReaderProvider = function (_a) {

package/components/Forms/Picker/DatePicker/utils/DatePickerUtils.d.ts

@@ -1,3 +1,4 @@
+import { useUtils as useMuiUtils } from '@material-ui/pickers';
 import { MaterialUiPickersDate as MuiPickersDate } from '@material-ui/pickers/typings/date';
 import { UnitMap } from '../../../../../foundation';
 import { CalendarProps } from '../Calendar';
@@ -6,8 +7,8 @@ export declare const textColor: import("../../../../../foundation/styles/newPale
 export declare const primaryColor: import("../../../../../foundation/styles/newPalette").PaletteReturnType;
 export declare const primaryHoverColor: (props: import("../../../../../foundation").RcThemeProps) => string;
 export declare const disabledColor: import("../../../../../foundation/styles/newPalette").PaletteReturnType;
-export declare const RcDatePickerClasses: Partial<UnitMap<"footer" | "header" | "progress" | "select" | "calendarSlider" | "leftArrow" | "rightArrow" | "popover" | "popoverPaper", any>>;
-declare type DatePickerVolume = {
+export declare const RcDatePickerClasses: Partial<UnitMap<"footer" | "header" | "progress" | "select" | "popover" | "leftArrow" | "rightArrow" | "calendarSlider" | "popoverPaper", any>>;
+type DatePickerVolume = {
     width: string;
     height: string;
 };
@@ -17,10 +18,10 @@ export declare const focusDayElement: (doc?: Document) => void;
 export declare const isSameYearAndMonth: ({ source, comparing }: {
     source: MuiPickersDate;
     comparing: MuiPickersDate;
-}, utils: import("@date-io/core/IUtils").IUtils<MuiPickersDate>) => boolean;
+}, utils: ReturnType<typeof useMuiUtils>) => boolean;
 export declare const onTransitionEnd: (event: any, doc?: Document) => void;
-declare type ValidateDateInRange = {
+type ValidateDateInRange = {
     now: MuiPickersDate;
 } & Pick<CalendarProps, 'dateRange' | 'disableFuture' | 'disablePast'>;
-export declare const invalidateDateInRange: (day: MuiPickersDate, { dateRange: { min, max }, disableFuture, disablePast, now, }: ValidateDateInRange, utils: import("@date-io/core/IUtils").IUtils<MuiPickersDate>) => false | import("dayjs").Dayjs | null;
+export declare const invalidateDateInRange: (day: MuiPickersDate, { dateRange: { min, max }, disableFuture, disablePast, now, }: ValidateDateInRange, utils: ReturnType<typeof useMuiUtils>) => false | MuiPickersDate;
 export {};

package/components/Forms/Picker/DatePicker/utils/DatePickerUtils.js

@@ -1,12 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.invalidateDateInRange = exports.onTransitionEnd = exports.isSameYearAndMonth = exports.focusDayElement = exports.RcDatePickerIconWidths = exports.RcDatePickerSizes = exports.RcDatePickerClasses = exports.disabledColor = exports.primaryHoverColor = exports.primaryColor = exports.textColor = void 0;
 var foundation_1 = require("../../../../../foundation");
 var styles_1 = require("../../../TextField/styles");
-exports.textColor = foundation_1.palette2('neutral', 'f06');
-exports.primaryColor = foundation_1.palette2('interactive', 'b02');
-exports.primaryHoverColor = foundation_1.setOpacity(exports.primaryColor, '16');
-exports.disabledColor = foundation_1.palette2('disabled', 'f02');
-exports.RcDatePickerClasses = foundation_1.RcClasses([
+exports.textColor = (0, foundation_1.palette2)('neutral', 'f06');
+exports.primaryColor = (0, foundation_1.palette2)('interactive', 'b02');
+exports.primaryHoverColor = (0, foundation_1.setOpacity)(exports.primaryColor, '16');
+exports.disabledColor = (0, foundation_1.palette2)('disabled', 'f02');
+exports.RcDatePickerClasses = (0, foundation_1.RcClasses)([
     'popover',
     'popoverPaper',
     // calendar
@@ -33,12 +34,13 @@ exports.RcDatePickerIconWidths = {
     small: '18px',
     medium: '28px',
 };
-exports.focusDayElement = function (doc) {
+var focusDayElement = function (doc) {
     if (doc === void 0) { doc = document; }
     var elm = doc.querySelector('[data-picker-focused]');
     elm === null || elm === void 0 ? void 0 : elm.focus();
 };
-exports.isSameYearAndMonth = function (_a, utils) {
+exports.focusDayElement = focusDayElement;
+var isSameYearAndMonth = function (_a, utils) {
     var source = _a.source, comparing = _a.comparing;
     if (!source || !comparing) {
         return false;
@@ -49,16 +51,18 @@ exports.isSameYearAndMonth = function (_a, utils) {
     var comparingYear = utils.getYear(comparing);
     return thisMonth === comparingMonth && thisYear === comparingYear;
 };
-exports.onTransitionEnd = function (event, doc) {
+exports.isSameYearAndMonth = isSameYearAndMonth;
+var onTransitionEnd = function (event, doc) {
     if (doc === void 0) { doc = document; }
     var activeElm = doc.activeElement;
     if (event.target.dataset['transitionTag'] &&
         // * check is not focus on other thing, like click next month
         activeElm.dataset['pickerAction'] !== 'true') {
-        exports.focusDayElement();
+        (0, exports.focusDayElement)();
     }
 };
-exports.invalidateDateInRange = function (day, _a, utils) {
+exports.onTransitionEnd = onTransitionEnd;
+var invalidateDateInRange = function (day, _a, utils) {
     var _b = _a.dateRange, min = _b.min, max = _b.max, disableFuture = _a.disableFuture, disablePast = _a.disablePast, now = _a.now;
     if (disableFuture && utils.isAfterDay(day, now)) {
         return now;
@@ -74,3 +78,4 @@ exports.invalidateDateInRange = function (day, _a, utils) {
     }
     return false;
 };
+exports.invalidateDateInRange = invalidateDateInRange;

package/components/Forms/Picker/TimePicker/NumberPicker.d.ts

@@ -1,11 +1,11 @@
 import React, { HTMLAttributes } from 'react';
 import { RcBaseProps } from '../../../../foundation';
 import { RcClickFiledStyleProps } from './TimePicker';
-declare type Range = {
+type Range = {
     min?: number;
     max?: number;
 };
-declare type NumberPickerProps = {
+type NumberPickerProps = {
     /** min number */
     min?: number;
     /** max number */
@@ -35,11 +35,11 @@ declare type NumberPickerProps = {
      */
     autoFocus?: boolean;
 } & RcClickFiledStyleProps & RcBaseProps<HTMLAttributes<HTMLDivElement>, 'onClick' | 'onChange'>;
-declare type NumberPickerRef = {
+type NumberPickerRef = {
     value: number;
     setRange: React.Dispatch<React.SetStateAction<Range>>;
 };
-declare const NumberPicker: import("styled-components").StyledComponentClass<{
+declare const NumberPicker: import("styled-components").StyledComponent<React.MemoExoticComponent<React.ForwardRefExoticComponent<{
     /** min number */
     min?: number | undefined;
     /** max number */
@@ -51,38 +51,9 @@ declare const NumberPicker: import("styled-components").StyledComponentClass<{
     /** data source of the number array */
     source: number[];
     /** trigger when want update value */
-    onUpdateValue: (value?: number | undefined) => void;
-    /** trigger when inner update */
-    onInnerChange?: ((value?: number | undefined) => void) | undefined;
-    /** trigger when confirm value */
-    onClose: (event: React.KeyboardEvent<HTMLDivElement>) => void;
-    /** automationId, used for test */
-    automationId?: string | undefined;
-    /** get label for screen reader */
-    getScreenReaderLabel?: ((value: string) => string) | undefined;
-    /** each step value */
-    step: number;
-    /** render value fn */
-    renderValue?: ((value: number) => string) | undefined;
-    /**
-     * If `true`, the `NumberPicker` element will be focused during the first mount.
-     */
-    autoFocus?: boolean | undefined;
-} & RcClickFiledStyleProps & Pick<React.HTMLAttributes<HTMLDivElement>, "className" | "color" | "id" | "lang" | "style" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "slot" | "title" | "translate" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is"> & React.RefAttributes<NumberPickerRef>, import("../../../../foundation").RcTheme, Pick<{
-    /** min number */
-    min?: number | undefined;
-    /** max number */
-    max?: number | undefined;
-    /** when user click the display number */
-    onClick?: (() => void) | undefined;
-    /** selected value */
-    value: number;
-    /** data source of the number array */
-    source: number[];
-    /** trigger when want update value */
-    onUpdateValue: (value?: number | undefined) => void;
+    onUpdateValue: (value?: number) => void;
     /** trigger when inner update */
-    onInnerChange?: ((value?: number | undefined) => void) | undefined;
+    onInnerChange?: ((value?: number) => void) | undefined;
     /** trigger when confirm value */
     onClose: (event: React.KeyboardEvent<HTMLDivElement>) => void;
     /** automationId, used for test */
@@ -97,8 +68,6 @@ declare const NumberPicker: import("styled-components").StyledComponentClass<{
      * If `true`, the `NumberPicker` element will be focused during the first mount.
      */
     autoFocus?: boolean | undefined;
-} & RcClickFiledStyleProps & Pick<React.HTMLAttributes<HTMLDivElement>, "className" | "color" | "id" | "lang" | "style" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "slot" | "title" | "translate" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is"> & React.RefAttributes<NumberPickerRef>, "ref" | "key" | "className" | "color" | "id" | "lang" | "max" | "min" | "style" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "step" | "slot" | "source" | "title" | "translate" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "size" | "value" | "disabled" | "autoFocus" | "onClose" | "onUpdateValue" | "isTwelveHourSystem" | "onInnerChange" | "automationId" | "getScreenReaderLabel" | "renderValue"> & {
-    theme?: import("../../../../foundation").RcTheme | undefined;
-}>;
+} & RcClickFiledStyleProps & RcBaseProps<React.HTMLAttributes<HTMLDivElement>, "onChange" | "onClick"> & React.RefAttributes<NumberPickerRef>>>, import("../../../../foundation").RcTheme, {}, never>;
 export { NumberPicker };
 export type { NumberPickerProps, NumberPickerRef };

package/components/Forms/Picker/TimePicker/NumberPicker.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.NumberPicker = void 0;
 var tslib_1 = require("tslib");
 var react_1 = tslib_1.__importStar(require("react"));
 var useKeyDown_1 = require("@material-ui/pickers/_shared/hooks/useKeyDown");
@@ -8,22 +9,22 @@ var foundation_1 = require("../../../../foundation");
 var StyledNumberPicker_1 = require("./styles/StyledNumberPicker");
 var StyledTimeIconButton_1 = require("./styles/StyledTimeIconButton");
 var utils_1 = require("./utils");
-var _NumberPicker = react_1.forwardRef(function (props, ref) {
+var _NumberPicker = (0, react_1.forwardRef)(function (props, ref) {
     var onClick = props.onClick, value = props.value, onUpdateValue = props.onUpdateValue, onKeyDown = props.onKeyDown, source = props.source, automationId = props.automationId, size = props.size, minProp = props.min, maxProp = props.max, onClose = props.onClose, step = props.step, onInnerChange = props.onInnerChange, renderValue = props.renderValue, getScreenReaderLabel = props.getScreenReaderLabel, autoFocus = props.autoFocus, rest = tslib_1.__rest(props, ["onClick", "value", "onUpdateValue", "onKeyDown", "source", "automationId", "size", "min", "max", "onClose", "step", "onInnerChange", "renderValue", "getScreenReaderLabel", "autoFocus"]);
-    var forceUpdate = foundation_1.useForceUpdate();
-    var _a = tslib_1.__read(foundation_1.useRefState(value, forceUpdate), 2), innerValueRef = _a[0], setInnerValue = _a[1];
-    var rangeRef = react_1.useRef({ max: maxProp, min: minProp });
-    var pickerRef = react_1.useRef(null);
-    react_1.useLayoutEffect(function () {
+    var forceUpdate = (0, foundation_1.useForceUpdate)();
+    var _a = tslib_1.__read((0, foundation_1.useRefState)(value, forceUpdate), 2), innerValueRef = _a[0], setInnerValue = _a[1];
+    var rangeRef = (0, react_1.useRef)({ max: maxProp, min: minProp });
+    var pickerRef = (0, react_1.useRef)(null);
+    (0, react_1.useLayoutEffect)(function () {
         if (autoFocus) {
             pickerRef.current.focus();
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
-    foundation_1.useDepsChange(function () {
+    (0, foundation_1.useDepsChange)(function () {
         rangeRef.current = { max: maxProp, min: minProp };
     }, [maxProp, minProp]);
-    foundation_1.useChange(function () {
+    (0, foundation_1.useChange)(function () {
         if (innerValueRef.current !== value) {
             setInnerValue(value, false);
         }
@@ -43,14 +44,14 @@ var _NumberPicker = react_1.forwardRef(function (props, ref) {
     var increaseDisabled = isLatest
         ? !!(min !== undefined && firstValue < min)
         : !!(max !== undefined && increaseValue > max);
-    var showValue = react_1.useMemo(function () {
+    var showValue = (0, react_1.useMemo)(function () {
         if (renderValue) {
             return renderValue(innerValue);
         }
-        return utils_1.pad(innerValue);
+        return (0, utils_1.pad)(innerValue);
     }, [innerValue, renderValue]);
     var label = getScreenReaderLabel === null || getScreenReaderLabel === void 0 ? void 0 : getScreenReaderLabel(showValue);
-    var handleKeyDown = foundation_1.useEventCallback(function (event) {
+    var handleKeyDown = (0, foundation_1.useEventCallback)(function (event) {
         var keydownSubmit = function () {
             event.stopPropagation();
             onUpdateValue(innerValueRef.current);
@@ -60,7 +61,7 @@ var _NumberPicker = react_1.forwardRef(function (props, ref) {
             setInnerValue(toValue);
             onInnerChange === null || onInnerChange === void 0 ? void 0 : onInnerChange(toValue);
         };
-        useKeyDown_1.runKeyHandler(event, {
+        (0, useKeyDown_1.runKeyHandler)(event, {
             ArrowUp: function () {
                 if (increaseDisabled) {
                     return;
@@ -78,7 +79,7 @@ var _NumberPicker = react_1.forwardRef(function (props, ref) {
         });
         onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
     });
-    react_1.useImperativeHandle(ref, function () { return ({
+    (0, react_1.useImperativeHandle)(ref, function () { return ({
         value: innerValue,
         setRange: function (newRange) {
             var range = rangeRef.current;
@@ -112,16 +113,16 @@ var _NumberPicker = react_1.forwardRef(function (props, ref) {
     return (react_1.default.createElement(StyledNumberPicker_1.StyledNumberPicker, tslib_1.__assign({ tabIndex: 0, onKeyDown: handleKeyDown, "aria-live": "assertive", "aria-label": label, ref: pickerRef, "data-focusable": true, role: "spinbutton", "aria-valuenow": innerValue }, rest),
         react_1.default.createElement(StyledTimeIconButton_1.StyledTimeIconButton, { tabIndex: -1, size: iconSize, color: "neutral.f04", wrapperSize: size, disabled: increaseDisabled, onClick: function () {
                 onUpdateValue(increaseValue);
-            }, symbol: juno_icon_1.ArrowUp, "data-test-automation-id": automationId && automationId + "-prev-pagination", "aria-label": "Arrow Up" }),
-        react_1.default.createElement(StyledTimeIconButton_1.StyledTimeIconButton, { wrapperSize: size, tabIndex: -1, onClick: onClick, "data-test-automation-id": automationId && automationId + "-text" },
+            }, symbol: juno_icon_1.ArrowUp, "data-test-automation-id": automationId && "".concat(automationId, "-prev-pagination"), "aria-label": "Arrow Up" }),
+        react_1.default.createElement(StyledTimeIconButton_1.StyledTimeIconButton, { wrapperSize: size, tabIndex: -1, onClick: onClick, "data-test-automation-id": automationId && "".concat(automationId, "-text") },
             react_1.default.createElement(react_1.default.Fragment, null, 
             // TODO: that <></> will fix when `RcIconButton` ready
             showValue)),
         react_1.default.createElement(StyledTimeIconButton_1.StyledTimeIconButton, { tabIndex: -1, size: iconSize, color: "neutral.f04", wrapperSize: size, disabled: decreaseDisabled, onClick: function () {
                 onUpdateValue(decreaseValue);
-            }, symbol: juno_icon_1.ArrowDown, "data-test-automation-id": automationId && automationId + "-next-pagination", "aria-label": "Arrow Down" })));
+            }, symbol: juno_icon_1.ArrowDown, "data-test-automation-id": automationId && "".concat(automationId, "-next-pagination"), "aria-label": "Arrow Down" })));
 });
-var NumberPicker = foundation_1.styled(react_1.memo(_NumberPicker))(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject([""], [""])));
+var NumberPicker = (0, foundation_1.styled)((0, react_1.memo)(_NumberPicker))(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject([""], [""])));
 exports.NumberPicker = NumberPicker;
 NumberPicker.displayName = 'NumberPicker';
 var templateObject_1;

package/components/Forms/Picker/TimePicker/SelectionView.d.ts

@@ -1,6 +1,6 @@
 import { FunctionComponent } from 'react';
 import { RcClickFiledStyleProps } from './TimePicker';
-declare type SelectionViewProps = {
+type SelectionViewProps = {
     /** dataSource, 12-hour, 24-hour or minutes */
     source: number[];
     /** selected value of source */

package/components/Forms/Picker/TimePicker/SelectionView.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.SelectionView = void 0;
 var tslib_1 = require("tslib");
 var react_1 = tslib_1.__importDefault(require("react"));
 var styles_1 = require("./styles");
@@ -18,12 +19,12 @@ var SelectionView = function (props) {
         }
         return function () { return onClick(toValue); };
     };
-    var showValue = utils_1.parseNumberToString(value, isTwelveHourSystem);
+    var showValue = (0, utils_1.parseNumberToString)(value, isTwelveHourSystem);
     return (react_1.default.createElement(styles_1.StyledSelectionView, { size: size }, source.map(function (v) {
         var disabled = !!((max !== undefined && v > max) ||
             (min !== undefined && v < min));
-        var itemShowValue = utils_1.parseNumberToString(v, isTwelveHourSystem);
-        return (react_1.default.createElement(styles_1.StyledSelectionItem, { disabled: disabled, "data-focusable": true, radius: "round", wrapperSize: size, key: v, onClick: handleClick(v, disabled), selected: itemShowValue === showValue, "data-test-automation-id": automationId && automationId + "-" + itemShowValue, itemLength: source.length },
+        var itemShowValue = (0, utils_1.parseNumberToString)(v, isTwelveHourSystem);
+        return (react_1.default.createElement(styles_1.StyledSelectionItem, { disabled: disabled, "data-focusable": true, radius: "round", wrapperSize: size, key: v, onClick: handleClick(v, disabled), selected: itemShowValue === showValue, "data-test-automation-id": automationId && "".concat(automationId, "-").concat(itemShowValue), itemLength: source.length },
             react_1.default.createElement(react_1.default.Fragment, null, itemShowValue)));
     })));
 };

package/components/Forms/Picker/TimePicker/TimePicker.d.ts

@@ -4,8 +4,8 @@ import { PickerTextFieldProps } from '../utils';
 import { NumberPickerProps } from './NumberPicker';
 import { ToggleTextProps } from './ToggleText';
 import { PeriodTexts } from './types';
-declare type RcTimePickerSize = RcBaseSize<'small' | 'medium'>;
-declare type RcClickFiledStyleProps = {
+type RcTimePickerSize = RcBaseSize<'small' | 'medium'>;
+type RcClickFiledStyleProps = {
     /** Is 12 hours system */
     isTwelveHourSystem?: boolean;
     /** with two sizes: medium and small */
@@ -13,9 +13,9 @@ declare type RcClickFiledStyleProps = {
     /** disabled of icon */
     disabled?: boolean;
 };
-declare type PickNumberPickerProps = RcBaseProps<Partial<NumberPickerProps>, 'size' | 'onUpdateValue' | 'onClose' | 'onClick' | 'onKeyDown' | 'value' | 'min' | 'max' | 'isTwelveHourSystem' | 'source' | 'step'>;
-declare type RcTimePickerPeriodTexts = Record<'input' | 'toggle', PeriodTexts>;
-declare type RcTimePickerProps<T = false> = {
+type PickNumberPickerProps = RcBaseProps<Partial<NumberPickerProps>, 'size' | 'onUpdateValue' | 'onClose' | 'onClick' | 'onKeyDown' | 'value' | 'min' | 'max' | 'isTwelveHourSystem' | 'source' | 'step'>;
+type RcTimePickerPeriodTexts = Record<'input' | 'toggle', PeriodTexts>;
+type RcTimePickerProps<T = false> = {
     /** with two size: 'small' | 'medium', default with medium. */
     size?: RcTimePickerSize;
     /** Is 12 hours system */