feat: update api key

Author: Meet-student

README.md

@@ -54,7 +54,7 @@ render(<Picker />, mountNode);
 | autoFocus | boolean | false | whether auto focus |
 | showTime | boolean \| Object | [showTime options](#showTime-options) | to provide an additional time selection |
 | picker | time \| date \| week \| month \| year |  | control which kind of panel should be shown |
-| showHoverValue | boolean | true | When the user selects the date hover option, the value of the input field undergoes a temporary change |
+| previewValue | false \| hover | hover | When the user selects the date hover option, the value of the input field undergoes a temporary change |
 | format | String \| String[] | depends on whether you set timePicker and your locale | use to format/parse date(without time) value to/from input. When an array is provided, all values are used for parsing and first value for display |
 | use12Hours | boolean | false | 12 hours display mode |
 | value | moment |  | current value like input's value |
@@ -113,7 +113,7 @@ render(<Picker />, mountNode);
 | defaultPickerValue | moment |  | Set default display picker view date |
 | separator | String | '~' | set separator between inputs |
 | picker | time \| date \| week \| month \| year |  | control which kind of panel |
-| showHoverValue | boolean | true | When the user selects the date hover option, the value of the input field undergoes a temporary change |
+| previewValue | false \| hover | hover | When the user selects the date hover option, the value of the input field undergoes a temporary change |
 | placeholder | [String, String] |  | placeholder of date input |
 | showTime | boolean \| Object | [showTime options](#showTime-options) | to provide an additional time selection |
 | showTime.defaultValue | [moment, moment] |  | to set default time of selected date |

docs/examples/basic.tsx

@@ -155,13 +155,8 @@ export default () => {
           <Picker<Moment> {...sharedProps} locale={enUS} onKeyDown={keyDown} />
         </div>
         <div style={{ margin: '0 8px' }}>
-          <h3>ShowHoverValue is false</h3>
-          <Picker<Moment>
-            {...sharedProps}
-            locale={enUS}
-            onKeyDown={keyDown}
-            showHoverValue={false}
-          />
+          <h3>PreviewValue is false</h3>
+          <Picker<Moment> {...sharedProps} locale={enUS} onKeyDown={keyDown} previewValue={false} />
         </div>
       </div>
     </div>

docs/examples/range.tsx

@@ -203,10 +203,10 @@ export default () => {
           />
         </div>
         <div style={{ margin: '0 8px' }}>
-          <h3>ShowHoverValue is false</h3>
+          <h3>PreviewValue is false</h3>
           <RangePicker<Moment>
             {...sharedProps}
-            showHoverValue={false}
+            previewValue={false}
             value={undefined}
             locale={zhCN}
             placeholder={['start...', 'end...']}

docs/examples/time.tsx

@@ -54,12 +54,12 @@ export default () => {
         })}
       />
 
-      <h3>showHoverValue is false</h3>
+      <h3>PreviewValue is false</h3>
       <RangePicker
         defaultValue={[defaultValue, defaultValue]}
         picker="time"
         locale={zhCN}
-        showHoverValue={false}
+        previewValue={false}
         generateConfig={momentGenerateConfig}
         disabledTime={(now, type) => ({
           disabledHours: () => (type === 'start' ? [now.hours()] : [now.hours() - 5]),

src/PickerInput/RangePicker.tsx

@@ -164,7 +164,7 @@ function RangePicker<DateType extends object = any>(
     styles: propStyles,
     classNames: propClassNames,
 
-    showHoverValue = true,
+    previewValue,
     // Value
     defaultValue,
     value,
@@ -488,7 +488,7 @@ function RangePicker<DateType extends object = any>(
   const presetList = usePresets(presets, ranges);
 
   const onPresetHover = (nextValues: RangeValueType<DateType> | null) => {
-    if (showHoverValue) {
+    if (previewValue === 'hover') {
       setInternalHoverValues(nextValues);
     }
     setHoverSource('preset');
@@ -508,7 +508,7 @@ function RangePicker<DateType extends object = any>(
 
   // ======================== Panel =========================
   const onPanelHover = (date: DateType) => {
-    if (showHoverValue) {
+    if (previewValue === 'hover') {
       setInternalHoverValues(date ? fillCalendarValue(date, activeIndex) : null);
     }
     setHoverSource('cell');

src/PickerInput/SinglePicker.tsx

@@ -128,7 +128,7 @@ function Picker<DateType extends object = any>(
     styles: propStyles,
     classNames: propClassNames,
 
-    showHoverValue = true,
+    previewValue,
 
     // Value
     order,
@@ -415,7 +415,7 @@ function Picker<DateType extends object = any>(
   const presetList = usePresets(presets);
 
   const onPresetHover = (nextValue: DateType | null) => {
-    if (showHoverValue) {
+    if (previewValue === 'hover') {
       setInternalHoverValue(nextValue);
     }
     setHoverSource('preset');
@@ -437,7 +437,7 @@ function Picker<DateType extends object = any>(
 
   // ======================== Panel =========================
   const onPanelHover = (date: DateType | null) => {
-    if (showHoverValue) {
+    if (previewValue === 'hover') {
       setInternalHoverValue(date);
     }
     setHoverSource('cell');

src/PickerInput/hooks/useFilledProps.ts

@@ -33,6 +33,7 @@ type PickedProps<DateType extends object = any> = Pick<
   | 'minDate'
   | 'maxDate'
   | 'defaultOpenValue'
+  | 'previewValue'
 > & {
   multiple?: boolean;
   // RangePicker showTime definition is different with Picker
@@ -96,6 +97,7 @@ export default function useFilledProps<
     locale,
     picker = 'date',
     prefixCls = 'rc-picker',
+    previewValue = 'hover',
     styles = {},
     classNames = {},
     order = true,
@@ -161,6 +163,7 @@ export default function useFilledProps<
   const filledProps = React.useMemo(
     () => ({
       ...props,
+      previewValue,
       prefixCls,
       locale: mergedLocale,
       picker,

src/interface.tsx

@@ -313,6 +313,8 @@ export type LegacyOnKeyDown = (
 
 export type SemanticName = 'root' | 'prefix' | 'input' | 'suffix';
 
+export type PreviewValueType = 'hover';
+
 export type PanelSemanticName = 'root' | 'header' | 'body' | 'content' | 'item' | 'footer';
 
 export interface SharedPickerProps<DateType extends object = any>
@@ -426,9 +428,11 @@ export interface SharedPickerProps<DateType extends object = any>
   preserveInvalidOnBlur?: boolean;
 
   /**
-   * When the user selects the date hover option, the value of the input field undergoes a temporary change
+   * When the user selects the date hover option, the value of the input field undergoes a temporary change.
+   * `false` will not preview value.
+   * `hover` will preview value when hover.
    */
-  showHoverValue?: boolean;
+  previewValue?: false | PreviewValueType;
 
   // Motion
   transitionName?: string;

tests/range.spec.tsx

@@ -2121,14 +2121,14 @@ describe('Picker.Range', () => {
     expect(container.querySelectorAll('.rc-picker-input')[0]).toHaveClass('rc-picker-input-active');
   });
 
-  it('should not update preview value in input when showHoverValue is false', () => {
+  it('should not update preview value in input when previewValue is false', () => {
     const { container } = render(
       <DayRangePicker
         minDate={dayjs('2024')}
         open
         mode={['year', 'year']}
         showTime
-        showHoverValue={false}
+        previewValue={false}
         needConfirm
         value={[dayjs('2024-01-01'), dayjs('2025-01-01')]}
       />,

tests/time.spec.tsx

@@ -70,14 +70,14 @@ describe('Picker.Time', () => {
     expect(container.querySelector('input')).toHaveValue('1990-09-03 12:00:00.000 PM');
   });
 
-  it('hover should not update preview value in input when showHoverValue is false', async () => {
+  it('hover should not update preview value in input when previewValue is false', async () => {
     const { container } = render(
       <DayPicker
         showTime={{
           showMillisecond: true,
           use12Hours: true,
         }}
-        showHoverValue={false}
+        previewValue={false}
         defaultValue={dayjs('1990-09-03 01:02:03')}
       />,
     );