fix(Badge): set alignment by use transform

CHANGELOG.md

@@ -1,5 +1,67 @@
 # Change Log 
 
+## [1.27.29](https://github.com/alibaba-fusion/next/compare/1.27.28...1.27.29) (2024-11-12)
+
+
+### Bug Fixes
+
+* **Slider:** correct typo and improve types definition ([9d4f0f7](https://github.com/alibaba-fusion/next/commit/9d4f0f79efb48e0ab657862bef17d0b3040e6709))
+
+
+## [1.27.28](https://github.com/alibaba-fusion/next/compare/1.27.26...1.27.28) (2024-10-21)
+
+
+### Bug Fixes
+
+* **DatePicker2:** after entering a customized date format and pressing Enter, the value should not change,closed [#4896](https://github.com/alibaba-fusion/next/issues/4896) ([e74ab40](https://github.com/alibaba-fusion/next/commit/e74ab40bf206ab0ad748d2c6b519972df1116810))
+* **Grid:** The style prop of Col in the Grid does not take effect ([836eeb6](https://github.com/alibaba-fusion/next/commit/836eeb65d355ff03b9d98d9819db95b82b7e8aac))
+* **Timeline:** left content of timeline item cannot be styled correctly ([f27e646](https://github.com/alibaba-fusion/next/commit/f27e646f8c3e3a72bf91992a870701226cfc9834))
+
+
+### Code Refactoring
+
+* **DatePicker:** convert to TypeScript, improve docs and tests ([4c37bf5](https://github.com/alibaba-fusion/next/commit/4c37bf5085176e2e34327e2def2e7b892dac6a2b))
+* **Form:** convert to TypeScript, improve docs and tests, close[#4585](https://github.com/alibaba-fusion/next/issues/4585) ([adbb6c9](https://github.com/alibaba-fusion/next/commit/adbb6c9f63170f4a4adc8395f3a33421c446dbcc))
+* **Form:** update form field options and dependencies ([f1c17a1](https://github.com/alibaba-fusion/next/commit/f1c17a1e5bbd68cd0e56e2334ed1a7690973899f))
+* **Range:** convert to TypeScript, improve docs and tests ([d4b99e9](https://github.com/alibaba-fusion/next/commit/d4b99e964a7d0bbd6e04b60d065ce884db0e6366))
+* **Shell:** convert to TypeScript, improve docs and tests ([202f538](https://github.com/alibaba-fusion/next/commit/202f5380026e75252d9a8267489ac1a5ff6b82f5))
+* **Tab:** convert to TypeScript, improve docs and tests ([4632a46](https://github.com/alibaba-fusion/next/commit/4632a467a77a4387c5ec8dec55a97353fa40ca33))
+* **TimePicker2:** convert to TypeScript, improve docs and tests, close [#4616](https://github.com/alibaba-fusion/next/issues/4616) ([e082513](https://github.com/alibaba-fusion/next/commit/e082513e781738fdbc27cd418cb6fa13aa06faa1))
+
+
+## [1.27.27](https://github.com/alibaba-fusion/next/compare/1.27.26...1.27.27) (2024-10-18)
+
+
+### Bug Fixes
+
+* **Switch:** style prop ([6c5b266](https://github.com/alibaba-fusion/next/commit/6c5b2661d029d9d80a6196f1a16412dcd180cac8))
+
+
+## [1.27.26](https://github.com/alibaba-fusion/next/compare/1.27.25...1.27.26) (2024-09-20)
+
+
+### Bug Fixes
+
+* **VirtualList:** stabilize children keys in virtual list ([f3d1d81](https://github.com/alibaba-fusion/next/commit/f3d1d81af3bf7b491919797bef3aec22984e5f0d))
+
+
+## [1.27.25](https://github.com/alibaba-fusion/next/compare/1.27.24...1.27.25) (2024-09-14)
+
+
+### Bug Fixes
+
+* **Balloon:** export balloon props types ([eecc4dd](https://github.com/alibaba-fusion/next/commit/eecc4dda8acc5ddef9b08e26127613f83dca9d9a))
+* **Slider:** export SliderProps types ([813448d](https://github.com/alibaba-fusion/next/commit/813448de7a049679283e4d0f4f9e4a8ccbfad4d8))
+
+
+## [1.27.24](https://github.com/alibaba-fusion/next/compare/1.27.23...1.27.24) (2024-09-14)
+
+
+### Bug Fixes
+
+* change esbuild target to es2018 ([0fe351f](https://github.com/alibaba-fusion/next/commit/0fe351feca93e678a5c9fb94fb43ea603d629fe7))
+
+
 ## [1.27.23](https://github.com/alibaba-fusion/next/compare/1.27.22...1.27.23) (2024-09-10)
 
 

LATESTLOG.md

@@ -1,22 +1,9 @@
 # Latest Log 
 
-## [1.27.23](https://github.com/alibaba-fusion/next/compare/1.27.22...1.27.23) (2024-09-10)
+## [1.27.29](https://github.com/alibaba-fusion/next/compare/1.27.28...1.27.29) (2024-11-12)
 
 
 ### Bug Fixes
 
-* **Form:** enabled responsive form should maintain alignment between label and input ([db30f4f](https://github.com/alibaba-fusion/next/commit/db30f4fcd94b8a583dc3b435c5a1f9a8113fe76c))
-* **Overlay:** overlay support SSR, close [#4205](https://github.com/alibaba-fusion/next/issues/4205) ([69241bc](https://github.com/alibaba-fusion/next/commit/69241bc660137e6028840b5727bba8e9f9d51989))
-* **Select:** adjust auto-complete menu length issue, close [#4873](https://github.com/alibaba-fusion/next/issues/4873) ([bf08e19](https://github.com/alibaba-fusion/next/commit/bf08e19411d7a0fe434902573279b973fa8a6382))
-* **Upload:** theme page fail to render ([a200df1](https://github.com/alibaba-fusion/next/commit/a200df1a8dfed99ada60b0bbd0b801d891a811b8))
-* **VirtualList:** resolve bugs in jumpIndex functionality, close [#4883](https://github.com/alibaba-fusion/next/issues/4883) ([324b0d3](https://github.com/alibaba-fusion/next/commit/324b0d30f49918e215142edf3a294343e182674d))
-
-
-### Code Refactoring
-
-* **Balloon:** convert to TypeScript, improve docs and tests, close[#4565](https://github.com/alibaba-fusion/next/issues/4565) ([cf6a80d](https://github.com/alibaba-fusion/next/commit/cf6a80dfd390907c07cd6e35feb18429ea350d94))
-* **Card:** convert to TypeScript, improve docs and tests, close[#4571](https://github.com/alibaba-fusion/next/issues/4571) ([15ff8b6](https://github.com/alibaba-fusion/next/commit/15ff8b6fefc2db00816dec7e28ea6a702a5007d6))
-* **Pagination:** convert to TypeScript, improve docs and tests ([442240d](https://github.com/alibaba-fusion/next/commit/442240d4aa3766bbadf9a3ef1c2c74798ce961b1))
-* **Slider:** convert to TypeScript, improve docs and tests ([0ddbb65](https://github.com/alibaba-fusion/next/commit/0ddbb65c50bea5c1029ab9534bd5d3bdb70774a4))
-* **VirtualList:** convert to TypeScript, improve docs and tests ([21518d4](https://github.com/alibaba-fusion/next/commit/21518d4a489759607fd5398053cfea5c9dfce01b))
+* **Slider:** correct typo and improve types definition ([9d4f0f7](https://github.com/alibaba-fusion/next/commit/9d4f0f79efb48e0ab657862bef17d0b3040e6709))
 

components/badge/main.scss

@@ -77,6 +77,8 @@
             z-index: 10;
             overflow: hidden;
             transform-origin: left center;
+            transform: translateX(50%);
+            right: 0;
         }
 
         &-scroll-number-only {

components/balloon/index.tsx

@@ -4,6 +4,16 @@ import Tooltip from './tooltip';
 import Inner from './inner';
 import { assignSubComponent } from '../util/component';
 
+export type {
+    BalloonProps,
+    BalloonV1Props,
+    BalloonV2Props,
+    TooltipProps,
+    TooltipV1Props,
+    TooltipV2Props,
+    AlignType,
+} from './types';
+
 const BalloonWithSub = assignSubComponent(Balloon, {
     Tooltip: ConfigProvider.config(Tooltip, {
         transform: (props, deprecated) => {

components/date-picker/__docs__/adaptor/index.jsx → components/date-picker/__docs__/adaptor/index.tsx

@@ -2,55 +2,77 @@ import React from 'react';
 import { DatePicker } from '@alifd/next';
 import { Types } from '@alifd/adaptor-helper';
 import moment from 'moment';
+import type { DatePickerProps } from '../../types';
 
 export default {
     name: 'DatePicker',
-    shape: ['normal', {
-        value: 'range',
-        label: 'Range Picker'
-    }],
-    editor: (shape) => {
+    shape: [
+        'normal',
+        {
+            value: 'range',
+            label: 'Range Picker',
+        },
+    ],
+    editor: (shape: 'normal' | 'range') => {
         return {
-            props: [{
-                name: 'state',
-                label: 'Status',
-                type: Types.enum,
-                options: ['normal', 'expanded', 'selected', 'disabled'],
-                default: 'normal'
-            }, {
-                name: 'size',
-                type: Types.enum,
-                options: ['large', 'medium', 'small'],
-                default: 'medium'
-            }, {
-                name: 'type',
-                type: Types.enum,
-                options: shape === 'range' ? ['dateRange', 'dateTimeRange'] : ['date', 'dateTime'],
-                default: shape === 'range' ? 'dateRange' : 'date'
-            }, {
-                name: 'width',
-                type: Types.number,
-                default: 288
-            }, {
-                name: 'label',
-                type: Types.string,
-                default: ''
-            }, {
-                name: 'placeholder',
-                type: Types.string,
-                default: shape === 'range' ? 'Start Date - End Date' : 'Please Select Date'
-            }]
+            props: [
+                {
+                    name: 'state',
+                    label: 'Status',
+                    type: Types.enum,
+                    options: ['normal', 'expanded', 'selected', 'disabled'],
+                    default: 'normal',
+                },
+                {
+                    name: 'size',
+                    type: Types.enum,
+                    options: ['large', 'medium', 'small'],
+                    default: 'medium',
+                },
+                {
+                    name: 'type',
+                    type: Types.enum,
+                    options:
+                        shape === 'range' ? ['dateRange', 'dateTimeRange'] : ['date', 'dateTime'],
+                    default: shape === 'range' ? 'dateRange' : 'date',
+                },
+                {
+                    name: 'width',
+                    type: Types.number,
+                    default: 288,
+                },
+                {
+                    name: 'label',
+                    type: Types.string,
+                    default: '',
+                },
+                {
+                    name: 'placeholder',
+                    type: Types.string,
+                    default: shape === 'range' ? 'Start Date - End Date' : 'Please Select Date',
+                },
+            ],
         };
     },
-    adaptor: ({ shape, state, size, type, width, label, placeholder = '', style = {}, ...others }) => {
+    adaptor: ({
+        shape,
+        state,
+        size,
+        type,
+        width,
+        label,
+        placeholder = '',
+        style = {},
+        ...others
+    }: any) => {
         const now = moment();
         style = {
             width,
             ...style,
         };
 
         if (shape === 'range') {
-            return  (
+            return (
                 <DatePicker.RangePicker
                     {...others}
                     visible={state === 'expanded'}
@@ -65,7 +87,7 @@ export default {
                     showTime={'dateTimeRange' === type}
                     locale={{
                         startPlaceholder: placeholder.split('-')[0],
-                        endPlaceholder: placeholder.split('-')[1]
+                        endPlaceholder: placeholder.split('-')[1],
                     }}
                     label={label}
                     value={state !== 'normal' ? [now.clone(), now.clone().add(1, 'month')] : null}
@@ -92,31 +114,34 @@ export default {
             />
         );
     },
-    content: (shape) => ({
-        options: [{
-            name: 'type',
-            options: shape === 'range' ? ['dateRange', 'dateTimeRange'] : ['date', 'dateTime'],
-            default: shape === 'range' ? 'dateRange' : 'date'
-        }, {
-            name: 'label',
-            options: ['show', 'hide'],
-            default: 'hide'
-        }],
-        transform: (props, { type , label }) => {
+    content: (shape: 'normal' | 'range') => ({
+        options: [
+            {
+                name: 'type',
+                options: shape === 'range' ? ['dateRange', 'dateTimeRange'] : ['date', 'dateTime'],
+                default: shape === 'range' ? 'dateRange' : 'date',
+            },
+            {
+                name: 'label',
+                options: ['show', 'hide'],
+                default: 'hide',
+            },
+        ],
+        transform: (props: DatePickerProps, { type, label }: { type: string; label: string }) => {
             return {
                 ...props,
                 type,
-                label: label === 'show' ? 'Label' : ''
+                label: label === 'show' ? 'Label' : '',
             };
-        }
+        },
     }),
-    demoOptions: (demo) => {
+    demoOptions: (demo: any) => {
         const { node } = demo;
         const { props = {} } = node;
         if (props.state === 'expanded') {
             return { ...demo, height: 300 };
         }
 
         return demo;
-    }
+    },
 };

components/date-picker/__docs__/demo/accessibility/index.tsx

@@ -2,8 +2,8 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { DatePicker } from '@alifd/next';
 
-const { RangePicker, MonthPicker, YearPicker } = DatePicker;
-const onChange = val => console.log(val);
+const { RangePicker } = DatePicker;
+const onChange = (val: unknown) => console.log(val);
 
 ReactDOM.render(
     <div>

components/date-picker/__docs__/demo/basic/index.tsx

@@ -3,7 +3,7 @@ import ReactDOM from 'react-dom';
 import { DatePicker } from '@alifd/next';
 
 const { RangePicker, MonthPicker, YearPicker, WeekPicker } = DatePicker;
-const onChange = val => console.log(val);
+const onChange = (val: unknown) => console.log(val);
 
 ReactDOM.render(
     <div>

components/date-picker/__docs__/demo/custom-range-picker/index.tsx

@@ -1,54 +1,57 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { DatePicker } from '@alifd/next';
+import { type Moment } from 'moment';
+import type { DatePickerProps } from '@alifd/next/types/date-picker';
 
 class CustomRangePicker extends React.Component {
-    constructor(props, context) {
-        super(props, context);
-        this.state = {
-            startValue: null,
-            endValue: null,
-            endOpen: false,
-        };
-    }
+    state: {
+        startValue: Moment | null;
+        endValue: Moment | null;
+        endOpen: boolean;
+    } = {
+        startValue: null,
+        endValue: null,
+        endOpen: false,
+    };
 
-    disabledStartDate = startValue => {
+    disabledStartDate: DatePickerProps['disabledDate'] = startValue => {
         const { endValue } = this.state;
         if (!startValue || !endValue) {
             return false;
         }
         return startValue.valueOf() > endValue.valueOf();
     };
 
-    disabledEndDate = endValue => {
+    disabledEndDate: DatePickerProps['disabledDate'] = endValue => {
         const { startValue } = this.state;
         if (!endValue || !startValue) {
             return false;
         }
         return endValue.valueOf() <= startValue.valueOf();
     };
 
-    onChange = (stateName, value) => {
+    onChange = (stateName: 'startValue' | 'endValue', value: string | Moment | null) => {
         this.setState({
             [stateName]: value,
         });
     };
 
-    onStartChange = value => {
+    onStartChange: DatePickerProps['onChange'] = value => {
         this.onChange('startValue', value);
     };
 
-    onEndChange = value => {
+    onEndChange: DatePickerProps['onChange'] = value => {
         this.onChange('endValue', value);
     };
 
-    handleStartOpenChange = open => {
+    handleStartOpenChange: DatePickerProps['onVisibleChange'] = open => {
         if (!open) {
             this.setState({ endOpen: true });
         }
     };
 
-    handleEndOpenChange = open => {
+    handleEndOpenChange: DatePickerProps['onVisibleChange'] = open => {
         this.setState({ endOpen: open });
     };
 

components/date-picker/__docs__/demo/default-visible-month/index.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { DatePicker } from '@alifd/next';
-import moment from 'moment';
+import moment, { type Moment } from 'moment';
 
 const { RangePicker, MonthPicker } = DatePicker;
 
-function onVisibleMonthChange(val, reason) {
+function onVisibleMonthChange(val: Moment, reason: string) {
     console.log(val.format('L'), reason);
 }