@douyinfe/semi-ui 2.7.1 → 2.8.0

package/_utils/index.ts

@@ -4,6 +4,7 @@ import React from 'react';
 import { cloneDeepWith, set, get } from 'lodash';
 import warning from '@douyinfe/semi-foundation/utils/warning';
 import { findAll } from '@douyinfe/semi-foundation/utils/getHighlight';
+import { isHTMLElement } from '@douyinfe/semi-foundation/utils/dom';
 /**
  * stop propagation
  *
@@ -161,6 +162,33 @@ export interface HighLightTextHTMLChunk {
  */
 export const isSemiIcon = (icon: any): boolean => React.isValidElement(icon) && get(icon.type, 'elementType') === 'Icon';
 
-export function getActiveElement() {
+export function getActiveElement(): HTMLElement | null {
     return document ? document.activeElement as HTMLElement : null;
+}
+
+export function isNodeContainsFocus(node: HTMLElement) {
+    const activeElement = getActiveElement();
+    return activeElement === node || node.contains(activeElement);
+}
+
+export function getFocusableElements(node: HTMLElement) {
+    if (!isHTMLElement(node)) {
+        return [];
+    }
+    const focusableSelectorsList = [
+        "input:not([disabled]):not([tabindex='-1'])",
+        "textarea:not([disabled]):not([tabindex='-1'])",
+        "button:not([disabled]):not([tabindex='-1'])",
+        "a[href]:not([tabindex='-1'])",
+        "select:not([disabled]):not([tabindex='-1'])",
+        "area[href]:not([tabindex='-1'])",
+        "iframe:not([tabindex='-1'])",
+        "object:not([tabindex='-1'])",
+        "*[tabindex]:not([tabindex='-1'])",
+        "*[contenteditable]:not([tabindex='-1'])",
+    ];
+    const focusableSelectorsStr = focusableSelectorsList.join(',');
+    // we are not filtered elements which are invisible
+    const focusableElements = Array.from(node.querySelectorAll<HTMLElement>(focusableSelectorsStr));
+    return focusableElements;
 }

package/datePicker/_story/v2/FixDefaultPickerValue.jsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { DatePicker, Space } from '../../../index';
+
+App.storyName = "fix defaultPickerValue number bug";
+export default function App() {
+    const defaultPickerValue = new Date('2021-03-15 00:00:00').valueOf();
+    const defaultPickerValueArray = [new Date('2021-03-15 00:00:00').valueOf(), new Date('2021-05-15 23:59:59').valueOf()];
+    return (            
+        <Space>
+            <div data-cy="dateTime">
+                <DatePicker
+                    type="dateTime"
+                    defaultPickerValue={defaultPickerValue}
+                />
+            </div>
+            <div data-cy="dateTimeRange">
+                <DatePicker
+                    type="dateTimeRange"
+                    defaultPickerValue={defaultPickerValueArray}
+                />
+            </div>
+            <div data-cy="before-1970">
+                <DatePicker
+                    type="dateTime"
+                    defaultPickerValue={new Date('1910-01-01 13:00:00')}
+                />
+            </div>
+        </Space>
+
+    );
+}

package/datePicker/_story/v2/InsetInput.jsx

@@ -84,7 +84,7 @@ export default function App() {
             </div>
             <Space wrap spacing={spacing}>
                 <DatePicker placeholder='选择单个日期' {...props} />
-                <DatePicker placeholder='选择月' {...props} type='month' />
+                <DatePicker placeholder='选择月' {...props} type='month' defaultOpen={false} />
                 <DatePicker placeholder='选择日期时间' {...props} type='dateTime' needConfirm={needConfirm} />
                 <DatePicker placeholder='选择日期范围' {...props} type='dateRange' />
                 <DatePicker placeholder='选择日期时间范围' {...props} type='dateTimeRange' needConfirm={needConfirm} />

package/datePicker/_story/v2/index.js

@@ -3,3 +3,4 @@ export { default as PanelOpen  } from './PanelOpen';
 export { default as FixInputRangeFocus } from './FixInputRangeFocus';
 export { default as InsetInput  } from './InsetInput';
 export { default as InsetInputE2E  } from './InsetInputE2E';
+export { default as FixDefaultPickerValue } from './FixDefaultPickerValue';

package/datePicker/monthsGrid.tsx

@@ -19,6 +19,7 @@ import Combobox from '../timePicker/Combobox';
 import YearAndMonth from './yearAndMonth';
 import { IconClock, IconCalendar } from '@douyinfe/semi-icons';
 import { getDefaultFormatTokenByType } from '@douyinfe/semi-foundation/datePicker/_utils/getDefaultFormatToken';
+import getDefaultPickerDate from '@douyinfe/semi-foundation/datePicker/_utils/getDefaultPickerDate';
 
 const prefixCls = cssClasses.PREFIX;
 
@@ -90,19 +91,8 @@ export default class MonthsGrid extends BaseComponent<MonthsGridProps, MonthsGri
 
     constructor(props: MonthsGridProps) {
         super(props);
-        let nowDate = Array.isArray(props.defaultPickerValue) ? props.defaultPickerValue[0] : props.defaultPickerValue;
         const validFormat = props.format || getDefaultFormatTokenByType(props.type);
-        if (!nowDate) {
-            nowDate = new Date();
-        } else {
-            nowDate = compatiableParse(nowDate as string, validFormat, undefined, props.dateFnsLocale);
-        }
-        let nextDate = Array.isArray(props.defaultPickerValue) ? props.defaultPickerValue[1] : undefined;
-        if (!nextDate) {
-            nextDate = addMonths(nowDate, 1);
-        } else {
-            nextDate = compatiableParse(nextDate as string, validFormat, undefined, props.dateFnsLocale);
-        }
+        const { nowDate, nextDate } = getDefaultPickerDate({ defaultPickerValue: props.defaultPickerValue, format: validFormat, dateFnsLocale: props.dateFnsLocale });
 
         const dateState = {
             // Direct use of full date string storage, mainly considering the month rendering comparison to save a conversion
@@ -636,7 +626,7 @@ export default class MonthsGrid extends BaseComponent<MonthsGridProps, MonthsGri
                 x-type={type}
                 x-panel-yearandmonth-open-type={yearOpenType}
                 // FIXME:
-                x-insetInput={insetInput ? "true" : "false"}
+                x-insetinput={insetInput ? "true" : "false"}
                 ref={current => this.cacheRefCurrent('monthGrid', current)}
             >
                 {content}

package/dist/css/semi.css

@@ -3473,22 +3473,22 @@ body[theme-mode=dark], body .semi-always-dark {
 .semi-datepicker-month-grid[x-type=date] .semi-datepicker-yam-showing {
   min-height: 325px;
 }
-.semi-datepicker-month-grid[x-insetInput=true] .semi-datepicker-month-grid-left[x-open-type=year],
-.semi-datepicker-month-grid[x-insetInput=true] .semi-datepicker-month-grid-right[x-open-type=year] {
+.semi-datepicker-month-grid[x-insetinput=true] .semi-datepicker-month-grid-left[x-open-type=year],
+.semi-datepicker-month-grid[x-insetinput=true] .semi-datepicker-month-grid-right[x-open-type=year] {
   min-height: 312px;
 }
-.semi-datepicker-month-grid[x-insetInput=true] .semi-datepicker-month-grid-left[x-open-type=time],
-.semi-datepicker-month-grid[x-insetInput=true] .semi-datepicker-month-grid-right[x-open-type=time] {
+.semi-datepicker-month-grid[x-insetinput=true] .semi-datepicker-month-grid-left[x-open-type=time],
+.semi-datepicker-month-grid[x-insetinput=true] .semi-datepicker-month-grid-right[x-open-type=time] {
   min-height: 314px;
 }
-.semi-datepicker-month-grid[x-insetInput=true] .semi-datepicker-navigation {
+.semi-datepicker-month-grid[x-insetinput=true] .semi-datepicker-navigation {
   padding-top: 8px;
   padding-bottom: 8px;
 }
-.semi-datepicker-month-grid[x-insetInput=true] .semi-datepicker-tpk {
+.semi-datepicker-month-grid[x-insetinput=true] .semi-datepicker-tpk {
   min-height: 100%;
 }
-.semi-datepicker-month-grid[x-insetInput=true][x-type=dateTime] .semi-datepicker-yam, .semi-datepicker-month-grid[x-insetInput=true][x-type=dateTimeRange] .semi-datepicker-yam {
+.semi-datepicker-month-grid[x-insetinput=true][x-type=dateTime] .semi-datepicker-yam, .semi-datepicker-month-grid[x-insetinput=true][x-type=dateTimeRange] .semi-datepicker-yam {
   height: 100%;
 }
 .semi-datepicker-month-grid .semi-datepicker-yearmonth-header {
@@ -4063,21 +4063,21 @@ body[theme-mode=dark], body .semi-always-dark {
 .semi-datepicker-compact .semi-datepicker-month-grid[x-panel-yearandmonth-open-type=left] .semi-datepicker-weeks, .semi-datepicker-compact .semi-datepicker-month-grid[x-panel-yearandmonth-open-type=right] .semi-datepicker-weeks {
   min-height: 168px;
 }
-.semi-datepicker-compact .semi-datepicker-month-grid[x-insetInput=true] .semi-datepicker-month-grid-left[x-open-type=year],
-.semi-datepicker-compact .semi-datepicker-month-grid[x-insetInput=true] .semi-datepicker-month-grid-right[x-open-type=year] {
+.semi-datepicker-compact .semi-datepicker-month-grid[x-insetinput=true] .semi-datepicker-month-grid-left[x-open-type=year],
+.semi-datepicker-compact .semi-datepicker-month-grid[x-insetinput=true] .semi-datepicker-month-grid-right[x-open-type=year] {
   min-height: 236px;
 }
-.semi-datepicker-compact .semi-datepicker-month-grid[x-insetInput=true] .semi-datepicker-month-grid-left[x-open-type=time],
-.semi-datepicker-compact .semi-datepicker-month-grid[x-insetInput=true] .semi-datepicker-month-grid-right[x-open-type=time] {
+.semi-datepicker-compact .semi-datepicker-month-grid[x-insetinput=true] .semi-datepicker-month-grid-left[x-open-type=time],
+.semi-datepicker-compact .semi-datepicker-month-grid[x-insetinput=true] .semi-datepicker-month-grid-right[x-open-type=time] {
   min-height: 236px;
 }
-.semi-datepicker-compact .semi-datepicker-month-grid[x-insetInput=true] .semi-datepicker-yam-showing {
+.semi-datepicker-compact .semi-datepicker-month-grid[x-insetinput=true] .semi-datepicker-yam-showing {
   min-height: 236px;
 }
-.semi-datepicker-compact .semi-datepicker-month-grid[x-insetInput=true] .semi-datepicker-tpk {
+.semi-datepicker-compact .semi-datepicker-month-grid[x-insetinput=true] .semi-datepicker-tpk {
   min-height: 100%;
 }
-.semi-datepicker-compact .semi-datepicker-month-grid[x-insetInput=true][x-type=dateTime] .semi-datepicker-yam, .semi-datepicker-compact .semi-datepicker-month-grid[x-insetInput=true][x-type=dateTimeRange] .semi-datepicker-yam {
+.semi-datepicker-compact .semi-datepicker-month-grid[x-insetinput=true][x-type=dateTime] .semi-datepicker-yam, .semi-datepicker-compact .semi-datepicker-month-grid[x-insetinput=true][x-type=dateTimeRange] .semi-datepicker-yam {
   height: 100%;
 }
 .semi-datepicker-compact.semi-datepicker-panel-yam .semi-scrolllist {
@@ -4792,11 +4792,12 @@ body[theme-mode=dark], body .semi-always-dark {
 .semi-form-field-label-disabled {
   color: var(--semi-color-disabled-text);
 }
-.semi-form-field-label-with-extra .semi-form-field-label-text,
-.semi-form-field-label-with-extra .semi-form-field-label-extra {
+.semi-form-field-label-with-extra .semi-form-field-label-text {
   display: inline-block;
 }
 .semi-form-field-label-with-extra .semi-form-field-label-extra {
+  display: flex;
+  align-items: center;
   margin-left: 4px;
 }
 .semi-form-field-label-required .semi-form-field-label-text::after {
@@ -4837,6 +4838,10 @@ body[theme-mode=dark], body .semi-always-dark {
   padding-top: 4px;
   padding-bottom: 4px;
 }
+.semi-form-field[x-label-pos=top] .semi-form-field-label-with-extra {
+  display: flex;
+  align-items: center;
+}
 .semi-form-field[x-label-pos=left] {
   display: flex;
 }
@@ -4846,6 +4851,10 @@ body[theme-mode=dark], body .semi-always-dark {
   padding-top: 6px;
   padding-bottom: 6px;
 }
+.semi-form-field[x-label-pos=left] .semi-form-field-label-with-extra {
+  display: flex;
+  align-items: center;
+}
 .semi-form-field[x-label-pos=left] .semi-checkboxGroup,
 .semi-form-field[x-label-pos=left] .semi-radioGroup {
   padding-top: 6px;