@douyinfe/semi-ui 2.2.0-beta.0 → 2.2.0-beta.1

package/_utils/index.ts

@@ -125,10 +125,14 @@ export const registerMediaQuery = (media: string, { match, unmatch, callInInit =
             }
         }
         callInInit && handlerMediaChange(mediaQueryList);
-        mediaQueryList.addEventListener('change', handlerMediaChange);
-        return (): void => mediaQueryList.removeEventListener('change', handlerMediaChange);
+        if (Object.prototype.hasOwnProperty.call(mediaQueryList, 'addEventListener')) {
+            mediaQueryList.addEventListener('change', handlerMediaChange);
+            return (): void => mediaQueryList.removeEventListener('change', handlerMediaChange);
+        }
+        mediaQueryList.addListener(handlerMediaChange);
+        return (): void => mediaQueryList.removeListener(handlerMediaChange);
     }
-    return null;
+    return () => undefined;
 };
 export interface GetHighLightTextHTMLProps {
     sourceString?: string;

package/datePicker/__test__/datePicker.test.js

@@ -873,6 +873,24 @@ describe(`DatePicker`, () => {
         expect(allSeparators[1].textContent.trim()).toBe(rangeSeparator);
     });
 
+    /**
+     * fix https://github.com/DouyinFE/semi-design/issues/422
+     */
+    it('test input year length larger than 4', async () => {
+        const props = {
+            motion: false,
+            defaultOpen: true,
+            defaultValue: '2021-12-21',
+        };
+        const handleChange = sinon.spy();
+        const elem = mount(
+            <DatePicker {...props} onChange={handleChange} />
+        );
+
+        elem.find('input').simulate('change', { target: { value: '20221-12-21' }});
+        expect(handleChange.called).toBeFalsy();
+    });
+
     it('test click next/prev year buttons', () => {
         let props = {
           type: 'dateRange',

package/datePicker/_story/datePicker.stories.js

@@ -636,3 +636,29 @@ export const RangeSeparator = () => (
     </div>
   </Space>
 );
+
+/**
+ * 修复输入 '20221-12-20' 类似这种年份的日期会崩溃问题
+ * https://github.com/DouyinFE/semi-design/issues/422
+ * 
+ * 非法日期的来源
+ *  - 用户输入
+ *  - 受控传入
+ * @returns 
+ */
+export const FixParseISOBug = () => (
+  <div>
+    <label>
+      <div>选择一个合法值，然后输入一个非法年份</div>
+      <DatePicker defaultValue={'2021-12-20'} onChange={v => console.log('onChange', v)} />
+    </label>
+    <label>
+      <div>defaultValue='20221-12-20'</div>
+      <DatePicker defaultValue={'20221-12-20'} defaultOpen={true} motion={false} onChange={v => console.log('onChange', v)} />
+    </label>
+  </div>
+);
+FixParseISOBug.storyName = '修复 parseISO bug';
+FixParseISOBug.parameters = {
+  chromatic: { disableSnapshot: false },
+};

package/dist/css/semi.css

@@ -13031,19 +13031,23 @@ body[theme-mode=dark], body .semi-always-dark {
   color: var(--semi-color-success);
 }
 .semi-notification-notice-light.semi-notification-notice-warning {
-  background-color: var(--semi-color-warning-light-default);
+  background-image: linear-gradient(0deg, var(--semi-color-warning-light-default), var(--semi-color-warning-light-default));
+  background-color: var(--semi-color-bg-0);
   border: 1px solid var(--semi-color-warning);
 }
 .semi-notification-notice-light.semi-notification-notice-success {
-  background-color: var(--semi-color-success-light-default);
+  background-image: linear-gradient(0deg, var(--semi-color-success-light-default), var(--semi-color-success-light-default));
+  background-color: var(--semi-color-bg-0);
   border: 1px solid var(--semi-color-success);
 }
 .semi-notification-notice-light.semi-notification-notice-info, .semi-notification-notice-light.semi-notification-notice-default {
-  background-color: var(--semi-color-info-light-default);
+  background-image: linear-gradient(0deg, var(--semi-color-info-light-default), var(--semi-color-info-light-default));
+  background-color: var(--semi-color-bg-0);
   border: 1px solid var(--semi-color-info);
 }
 .semi-notification-notice-light.semi-notification-notice-error {
-  background-color: var(--semi-color-danger-light-default);
+  background-image: linear-gradient(0deg, var(--semi-color-danger-light-default), var(--semi-color-danger-light-default));
+  background-color: var(--semi-color-bg-0);
   border: 1px solid var(--semi-color-danger);
 }
 .semi-notification-notice-title {