Merge branch 'main' into fix-select-blur

content/show/tag/index.md

@@ -167,17 +167,17 @@ import { TagGroup } from '@douyinfe/semi-ui';
 
 () => {
     const tagList = [
-        { color: 'white', children:'抖音' },
-        { color: 'white', children:'火山' },
-        { color: 'white', children:'剪映' },
-        { color: 'white', children:'醒图' },
+        { color: 'white', children: '抖音' },
+        { color: 'white', children: '火山' },
+        { color: 'white', children: '剪映' },
+        { color: 'white', children: '醒图' },
     ];
     const src = 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/dy.png';
     const tagList2 = [
-        { color: 'white', children:'Douyin', avatarSrc:src },
-        { color: 'white', children:'Hotsoon', avatarSrc:src },
-        { color: 'white', children:'Capcut', avatarSrc:src },
-        { color: 'white', children:'Xingtu', avatarSrc:src },
+        { color: 'white', children: 'Douyin', avatarSrc: src },
+        { color: 'white', children: 'Hotsoon', avatarSrc: src },
+        { color: 'white', children: 'Capcut', avatarSrc: src },
+        { color: 'white', children: 'Xingtu', avatarSrc: src },
     ];
     const divStyle = {
         backgroundColor: 'var(--semi-color-fill-0)',

packages/semi-foundation/calendar/eventUtil.ts

@@ -98,7 +98,7 @@ export interface DateObj {
 
 export type weeekStartsOnEnum = 0 | 1 | 2 | 3 | 4 | 5 | 6;
 
-export const calcRangeData = (value: Date, start: Date, rangeLen: number, mode: string, locale: Locale) => {
+export const calcRangeData = (value: Date, start: Date, rangeLen: number, mode: string, locale: Locale, weekStartsOn: weeekStartsOnEnum) => {
     const today = getCurrDate();
     const arr: Array<DateObj> = [];
     [...Array(rangeLen).keys()].map(ind => {
@@ -106,8 +106,8 @@ export const calcRangeData = (value: Date, start: Date, rangeLen: number, mode:
         const date = addDays(start, ind);
         dateObj.ind = ind;
         dateObj.date = date;
-        dateObj.dayString = format(date, 'd', { locale });
-        dateObj.weekday = format(date, 'EEE', { locale });
+        dateObj.dayString = format(date, 'd', { locale, weekStartsOn });
+        dateObj.weekday = format(date, 'EEE', { locale, weekStartsOn });
         dateObj.isToday = isSameDay(date, today);
         dateObj.isWeekend = checkWeekend(date);
         if (mode === 'month') {
@@ -129,7 +129,7 @@ export const calcRangeData = (value: Date, start: Date, rangeLen: number, mode:
  */
 export const calcWeekData = (value: Date, mode = 'week', locale: Locale, weekStartsOn: weeekStartsOnEnum) => {
     const start = startOfWeek(value, { weekStartsOn });
-    return calcRangeData(value, start, 7, mode, locale);
+    return calcRangeData(value, start, 7, mode, locale, weekStartsOn);
 };
 
 /**
@@ -250,7 +250,7 @@ export const filterEvents = (events: Map<string, EventObject[]>, start: Date, en
  * filter out event that is not in the week range
  */
 // eslint-disable-next-line max-len
-export const filterWeeklyEvents = (events: Map<string, EventObject[]>, weekStart: Date) => filterEvents(events, weekStart, addDays(endOfWeek(weekStart), 1));
+export const filterWeeklyEvents = (events: Map<string, EventObject[]>, weekStart: Date, weekStartsOn: weeekStartsOnEnum ) => filterEvents(events, weekStart, addDays(endOfWeek(weekStart, { weekStartsOn }), 1));
 
 /**
  * @returns {arr}
@@ -308,8 +308,9 @@ export const parseWeeklyAllDayEvent = (
     event: EventObject[],
     startDate: Date,
     weekStart: Date,
-    parsed: Array<Array<ParsedRangeEvent>>
-) => parseRangeAllDayEvent(event, startDate, weekStart, addDays(endOfWeek(startDate), 1), parsed);
+    parsed: Array<Array<ParsedRangeEvent>>,
+    weekStartsOn: weeekStartsOnEnum
+) => parseRangeAllDayEvent(event, startDate, weekStart, addDays(endOfWeek(startDate, { weekStartsOn }), 1), parsed);
 
 
 export const collectDailyEvents = (events: ParsedRangeEvent[][]) => {

packages/semi-foundation/calendar/foundation.ts

@@ -190,8 +190,8 @@ export default class CalendarFoundation<P = Record<string, any>, S = Record<stri
 
     getWeeklyData(value: Date, dateFnsLocale: Locale) {
         const data = {} as WeeklyData;
-        data.month = format(value, 'LLL', { locale: dateFnsLocale });
         const { weekStartsOn } = this.getProps();
+        data.month = format(value, 'LLL', { locale: dateFnsLocale, weekStartsOn });
         data.week = calcWeekData(value, 'week', dateFnsLocale, weekStartsOn);
         this._adapter.setWeeklyData(data);
         return data;
@@ -199,10 +199,10 @@ export default class CalendarFoundation<P = Record<string, any>, S = Record<stri
 
     getRangeData(value: Date, dateFnsLocale: Locale) {
         const data = {} as { month: string; week: Array<DateObj> };
-        const { range } = this.getProps();
+        const { range, weekStartsOn } = this.getProps();
         const len = differenceInCalendarDays(range[1], range[0]);
-        data.month = format(value, 'LLL', { locale: dateFnsLocale });
-        data.week = calcRangeData(value, range[0], len, 'week', dateFnsLocale);
+        data.month = format(value, 'LLL', { locale: dateFnsLocale, weekStartsOn });
+        data.week = calcRangeData(value, range[0], len, 'week', dateFnsLocale, weekStartsOn);
         this._adapter.setRangeData(data);
         return data;
     }
@@ -211,7 +211,7 @@ export default class CalendarFoundation<P = Record<string, any>, S = Record<stri
         const monthStart = startOfMonth(value);
         const data = {} as MonthData;
         const { weekStartsOn } = this.getProps();
-        const numberOfWeek = getWeeksInMonth(value);
+        const numberOfWeek = getWeeksInMonth(value, { weekStartsOn });
         [...Array(numberOfWeek).keys()].map(ind => {
             data[ind] = calcWeekData(addDays(monthStart, ind * 7), 'month', dateFnsLocale, weekStartsOn);
         });
@@ -263,12 +263,13 @@ export default class CalendarFoundation<P = Record<string, any>, S = Record<stri
     // ================== Weekly Event ==================
 
     _parseWeeklyEvents(events: ParsedEvents['allDay'], weekStart: Date) {
+        const { weekStartsOn } = this.getProps();
         let parsed = [[]] as ParsedRangeEvent[][];
-        const filtered = filterWeeklyEvents(events, weekStart);
+        const filtered = filterWeeklyEvents(events, weekStart, weekStartsOn);
         [...filtered.keys()].sort((a, b) => sortDate(a, b)).forEach(item => {
             const startDate = new Date(item);
             const curr = filtered.get(item).filter(event => isSameDay(event.date, startDate));
-            parsed = parseWeeklyAllDayEvent(curr, startDate, weekStart, parsed);
+            parsed = parseWeeklyAllDayEvent(curr, startDate, weekStart, parsed, weekStartsOn);
         });
         return parsed;
     }
@@ -332,7 +333,7 @@ export default class CalendarFoundation<P = Record<string, any>, S = Record<stri
 
     getParseMonthlyEvents(itemLimit: number) {
         const parsed: any = {};
-        const { displayValue, events } = this.getProps();
+        const { displayValue, events, weekStartsOn } = this.getProps();
         const currDate = this._getDate();
         const firstDayOfMonth = startOfMonth(displayValue);
         const lastDayOfMonth = endOfMonth(displayValue);
@@ -354,31 +355,30 @@ export default class CalendarFoundation<P = Record<string, any>, S = Record<stri
             // WeekInd calculation error, need to consider the boundary situation at the beginning/end of the month
             // When the date falls within the month
             if (isSameMonth(item.date, displayValue)) {
-                const weekInd = getWeekOfMonth(item.date) - 1;
+                const weekInd = getWeekOfMonth(item.date, { weekStartsOn }) - 1;
                 this.pushDayEventIntoWeekMap(item, weekInd, parsed);
                 return;
             }
             // When the date is within the previous month
             if (isBefore(item.date, firstDayOfMonth)) {
-                if (isSameWeek(item.date, firstDayOfMonth)) {
+                if (isSameWeek(item.date, firstDayOfMonth, { weekStartsOn })) {
                     this.pushDayEventIntoWeekMap(item, 0, parsed);
                 }
                 return;
             }
             // When the date is within the next month
             if (isAfter(item.date, lastDayOfMonth)) {
-                if (isSameWeek(item.date, lastDayOfMonth)) {
-                    const weekInd = getWeekOfMonth(lastDayOfMonth) - 1;
+                if (isSameWeek(item.date, lastDayOfMonth, { weekStartsOn })) {
+                    const weekInd = getWeekOfMonth(lastDayOfMonth, { weekStartsOn }) - 1;
                     this.pushDayEventIntoWeekMap(item, weekInd, parsed);
                 }
                 return;
             }
         });
-
         Object.keys(parsed).forEach(key => {
             const week = parsed[key];
             parsed[key] = {};
-            const weekStart = startOfWeek(week[0].date);
+            const weekStart = startOfWeek(week[0].date, { weekStartsOn });
             const weekMap = convertEventsArrToMap(week, 'start', startOfDay);
             // When there are multiple events in a week, multiple events should be parsed
             // const oldParsedWeeklyEvent = this._parseWeeklyEvents(weekMap, weekStart);

packages/semi-foundation/dropdown/foundation.ts

@@ -34,7 +34,8 @@ export default class DropdownFoundation extends BaseFoundation<DropdownAdapter>
             case ' ':
             case 'Enter':
                 event.target.click();
-                handlePrevent(event);
+                // user may use input to be the trigger and bind some key event on it, so do not stoppropagation
+                // handlePrevent(event);
                 break;
             case 'ArrowDown':
                 this.setFocusToFirstMenuItem(event.target);

packages/semi-foundation/dropdown/menuFoundation.ts

@@ -54,7 +54,8 @@ export default class DropdownMenuFoundation extends BaseFoundation<Partial<Defau
             case ' ':
             case 'Enter':
                 event.target.click();
-                handlePrevent(event);
+                // user may use input to be the trigger and bind some key event on it, so do not stoppropagation
+                // handlePrevent(event);
                 break;
             case 'Escape':
                 this.handleEscape(menu);

packages/semi-theme-default/scss/animation.scss

@@ -15,6 +15,7 @@ body{
   --semi-transition_function-easeOut:ease-out;
   --semi-transition_function-easeInIOut:ease-in-out;
 
+  --semi-transition_delay-none: 0ms;
   --semi-transition_delay-slowest:0ms;
   --semi-transition_delay-slower:0ms;
   --semi-transition_delay-slow:0ms;
@@ -40,7 +41,7 @@ body{
 
 
   // has animation
- 
+
   // --semi-transition_duration-slowest:500ms;
   // --semi-transition_duration-slower:500ms;
   // --semi-transition_duration-slow:500ms;

packages/semi-ui/calendar/_story/calendar.stories.js

@@ -530,7 +530,24 @@ export const EventRender  = () => <EventRenderDemo />;
 
 
 export const WeekStartsOnDemo = () => {
-    const [v, setV] = useState(0);
+    const [v, setV] = useState(6);
+    const allDayStyle = {
+      borderRadius: '3px',
+      boxSizing: 'border-box',
+      border: 'var(--semi-color-bg-1) 1px solid',
+      padding: '2px 4px',
+      backgroundColor: 'var(--semi-color-primary-light-active)',
+      height: '100%',
+      overflow: 'hidden',
+    };
+    const events = [
+      {
+        key: '0',
+        start: new Date(2022, 8, 5, 14, 45, 0),
+        end: new Date(2022, 8, 6, 6, 18, 0),
+        children: <div style={allDayStyle}>9月5日 14:45 ~ 9月6日 6:18</div>,
+      }
+    ]
     return (
         <div>
             <RadioGroup defaultValue={v} aria-label="周起始日" name="demo-radio-group-vertical" onChange={e => setV(e.target.value)}>
@@ -544,9 +561,9 @@ export const WeekStartsOnDemo = () => {
             </RadioGroup>
             <Calendar
                 mode="month"
-                weekStartsOn={v}
+                weekStartsOn={1}
+                events={events}
                 dateGridRender={(dateString, date) => {
-                    console.log(dateString);
                     if (dateString === new Date(2019, 6, 16).toString()) {
                     return (
                         <div style={{ backgroundColor: 'red', height: '100%', width: '100%' }}>123test</div>

packages/semi-ui/dropdown/index.tsx

@@ -247,7 +247,11 @@ class Dropdown extends BaseComponent<DropdownProps, DropdownState> {
                         }),
                         'aria-haspopup': true,
                         'aria-expanded': popVisible,
-                        onKeyDown: e => this.foundation.handleKeyDown(e)
+                        onKeyDown: e => {
+                            this.foundation.handleKeyDown(e);
+                            const childrenKeyDown = get(children, 'props.onKeyDown');
+                            childrenKeyDown && childrenKeyDown();
+                        }
                     }) :
                     children}
             </Tooltip>

packages/semi-ui/tag/_story/tag.stories.js

@@ -287,4 +287,54 @@ export const TagGroupCloseable = () => <TagGroupCloseableDemo />;
 
 TagGroupCloseable.story = {
   name: 'tagGroup closable',
-}
+}
+
+export const Issue1107 = () => {
+    const src = 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/dy.png';
+    const tagList = [
+        { color: 'white', children:'Douyin', avatarSrc:src },
+        { color: 'white', children:'Hotsoon', avatarSrc:src },
+        { color: 'white', children:'Capcut', avatarSrc:src },
+        { color: 'white', children:'Xingtu', avatarSrc:src },
+    ];
+    const divStyle = {
+        backgroundColor: 'var(--semi-color-fill-0)',
+        height: 35,
+        width: 300,
+        display: 'flex',
+        alignItems: 'center',
+        padding: '0 10px',
+        marginBottom: 30,
+    };
+    const tagGroupStyle = {
+        display: 'flex',
+        alignItems: 'center',
+        width: 350,
+    };
+    return (
+        <>
+            <div style={divStyle}>
+                <TagGroup 
+                  maxTagCount={3} 
+                  style={tagGroupStyle} 
+                  tagList={tagList} 
+                  size="small" 
+                />
+            </div>
+            <div style={divStyle}>
+                <TagGroup
+                    maxTagCount={2}
+                    style={tagGroupStyle}
+                    tagList={tagList}
+                    size="large"
+                    avatarShape="circle"
+                    showPopover
+                />
+            </div>
+        </>
+    );
+};
+
+Issue1107.story = {
+  name: 'issue 1107',
+};

packages/semi-ui/tag/group.tsx

@@ -89,24 +89,25 @@ export default class TagGroup<T> extends PureComponent<TagGroupProps<T>> {
             if (mode === 'custom') {
                 return tag as React.ReactNode;
             }
-            if (!(tag as TagProps).size) {
-                (tag as TagProps).size = size;
+            const newTag = { ...(tag as TagProps) }; 
+            if (!(newTag as TagProps).size) {
+                (newTag as TagProps).size = size;
             }
             
-            if (!(tag as TagProps).avatarShape) {
-                (tag as TagProps).avatarShape = avatarShape;
+            if (!(newTag as TagProps).avatarShape) {
+                (newTag as TagProps).avatarShape = avatarShape;
             }
 
-            if (!(tag as TagProps).tagKey) {
-                if (typeof (tag as TagProps).children === 'string' || typeof (tag as TagProps).children === 'number') {
-                    (tag as TagProps).tagKey = (tag as TagProps).children as string | number;
+            if (!(newTag as TagProps).tagKey) {
+                if (typeof (newTag as TagProps).children === 'string' || typeof (newTag as TagProps).children === 'number') {
+                    (newTag as TagProps).tagKey = (newTag as TagProps).children as string | number;
                 } else {
-                    (tag as TagProps).tagKey = Math.random();
+                    (newTag as TagProps).tagKey = Math.random();
                 }
             }
-            return <Tag {...(tag as TagProps)} key={(tag as TagProps).tagKey} onClose={(tagChildren, e, tagKey) => {
-                if ((tag as TagProps).onClose) {
-                    (tag as TagProps).onClose(tagChildren, e, tagKey);
+            return <Tag {...(newTag as TagProps)} key={(newTag as TagProps).tagKey} onClose={(tagChildren, e, tagKey) => {
+                if ((newTag as TagProps).onClose) {
+                    (newTag as TagProps).onClose(tagChildren, e, tagKey);
                 }
                 onTagClose && onTagClose(tagChildren, e, tagKey);
             }} />;

packages/semi-ui/tooltip/index.tsx

@@ -720,7 +720,8 @@ export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
                     ref.current = node;
                 }
             },
-            tabIndex:  (children as React.ReactElement).props.tabIndex || 0 // a11y keyboard, in some condition select's tabindex need to -1 or 0 
+            tabIndex: (children as React.ReactElement).props.tabIndex || 0, // a11y keyboard, in some condition select's tabindex need to -1 or 0 
+            'data-popupid': id
         });
 
         // If you do not add a layer of div, in order to bind the events and className in the tooltip, you need to cloneElement children, but this time it may overwrite the children's original ref reference