@alifd/chat 0.1.15-beta.0 → 0.1.15-beta.2

package/{lib/calendar → es/button}/main.scss

@@ -1,5 +1,5 @@
 @import "../core/variables.scss";
 
-.#{$prefix}calendar {
+.#{$prefix}button {
   
 }

package/es/card/main.scss

@@ -0,0 +1,141 @@
+@import '../core/variables.scss';
+
+@mixin size($shadow, $corner, $padding, $fontSize, $headFontSize) {
+    $verPadding: $padding * 0.5;
+    box-shadow: $shadow;
+    border-radius: $corner;
+    font-size: $fontSize;
+    overflow: hidden;
+
+    .#{$prefix}card {
+        &-header {
+            font-size: $headFontSize;
+            &-title {
+                padding: $verPadding $padding;
+            }
+            &-extras {
+                padding: $verPadding $padding $verPadding 0;
+            }
+        }
+        &-content {
+            padding: 0 $padding;
+
+            &--gap-top {
+                margin-top: $verPadding;
+            }
+            &--gap-bottom {
+                margin-bottom: $verPadding;
+            }
+        }
+        &-footer {
+            padding: $verPadding $padding;
+        }
+    }
+}
+
+.#{$prefix}card {
+    color: $color-text1-3;
+
+    &-inner {
+        display: flex;
+        flex-direction: column;
+        background-color: #fff;
+        @include size(
+            $shadow-2,
+            $size-base * 3,
+            $size-base * 4,
+            $font-size-body-1,
+            $font-size-subhead
+        );
+    }
+    &-header {
+        flex: none;
+        display: flex;
+
+        &-title {
+            font-weight: 500;
+            flex: 1;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            word-break: break-all;
+        }
+        &-extras {
+            flex: none;
+        }
+        &--line {
+            border-bottom: 1px solid $color-line1-0;
+        }
+    }
+    &-footer {
+        flex: none;
+
+        &--line {
+            border-top: 1px solid $color-line1-0;
+        }
+    }
+
+    &--medium {
+        .#{$prefix}card-inner {
+            @include size(
+                $shadow-2,
+                $size-base * 3,
+                $size-base * 4,
+                $font-size-body-1,
+                $font-size-subhead
+            );
+        }
+    }
+    &.#{$prefix}card--no-padding {
+        .#{$prefix}card {
+            &-header,
+            &-content,
+            &-footer {
+                padding: 0;
+                margin: 0;
+            }
+        }
+    }
+
+    @keyframes fade-in {
+        0% {
+            opacity: 0;
+        }
+        100% {
+            opacity: 1;
+        }
+    }
+
+    &-collapsable {
+        &-inner {
+        }
+        &-inner--popup {
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: auto;
+            z-index: 999;
+            opacity: 0;
+            animation-timing-function: ease-out;
+            animation-duration: 0.3s;
+            animation-name: fade-in;
+            animation-iteration-count: 1;
+            animation-fill-mode: forwards;
+        }
+        &--visible {
+            position: relative;
+            .#{$prefix}card-collapsable-inner {
+                transition: opacity 0.5s ease-in;
+                opacity: 0;
+                pointer-events: none;
+
+                &--popup {
+                    transition: none;
+                    opacity: 1;
+                    pointer-events: all;
+                }
+            }
+        }
+    }
+}

package/es/core/variables.scss

@@ -0,0 +1,35 @@
+$prefix: 'ct-' !default;
+
+$color-brand1-6: var(--color-brand1-6, #5584ff) !default;
+$size-base: 4px !default;
+$shadow-1: 1px 1px 4px 0px rgba(0, 0, 0, 0.16) !default;
+$shadow-2: 2px 4px 16px 0px rgba(0, 0, 0, 0.12) !default;
+
+$font-size-headline: var(--font-size-headline, 24px) !default;
+$font-size-title: var(--font-size-title, 20px) !default;
+$font-size-subhead: var(--font-size-subhead, 16px) !default;
+$font-size-body-2: var(--font-size-body-2, 14px) !default;
+$font-size-body-1: var(--font-size-body-1, 14px) !default;
+$font-size-caption: var(--font-size-caption, 12px) !default;
+
+/// 禁用
+$color-text1-1: var(--color-text1-1, #cccccc) !default;
+/// 水印/提示
+$color-text1-2: var(--color-text1-2, #999999) !default;
+/// 正文/标题
+$color-text1-3: var(--color-text1-3, #666666) !default;
+/// 正文/标题
+$color-text1-4: var(--color-text1-4, #333333) !default;
+
+/// 很浅
+$color-line1-0: var(--color-line1-0, #f1f3f6) !default;
+/// 浅
+$color-line1-1: var(--color-line1-1, #e6e7eb) !default;
+/// 常规
+$color-line1-2: var(--color-line1-2, #dcdee3) !default;
+/// 深
+$color-line1-3: var(--color-line1-3, #c4c6cf) !default;
+/// 重
+$color-line1-4: var(--color-line1-4, #a0a2ad) !default;
+
+

package/es/date-picker/index.d.ts

@@ -18,7 +18,7 @@
  * | SPACE       | Trigger the onClick event    |
  */
 import React from 'react';
-import { DatePicker as NextDatePicker } from '@alifd/next';
+import { DatePicker2 as NextDatePicker2 } from '@alifd/next';
 export * from './types';
-declare const _default: import("@alifd/next/types/config-provider/types").ConfiguredComponentClass<Pick<Pick<any, string | number | symbol> & React.RefAttributes<NextDatePicker>, string | number | symbol> & import("@alifd/next/types/config-provider/types").ComponentCommonProps, NextDatePicker, {}>;
+declare const _default: import("@alifd/next/types/config-provider/types").ConfiguredComponentClass<Pick<Pick<any, string | number | symbol> & React.RefAttributes<NextDatePicker2>, string | number | symbol> & import("@alifd/next/types/config-provider/types").ComponentCommonProps, NextDatePicker2, {}>;
 export default _default;

package/es/date-picker/index.js

@@ -19,12 +19,12 @@
  */
 import { __rest } from "tslib";
 import React, { forwardRef } from 'react';
-import { DatePicker as NextDatePicker, ConfigProvider } from '@alifd/next';
+import { DatePicker2 as NextDatePicker2, ConfigProvider } from '@alifd/next';
 import cs from 'classnames';
 import { PREFIX_DEFAULT, assignSubComponent } from '../utils';
 const DatePicker = forwardRef((_a, ref) => {
     var { className, size = 'small' } = _a, props = __rest(_a, ["className", "size"]);
-    return (React.createElement(NextDatePicker, Object.assign({}, props, { className: cs(`${PREFIX_DEFAULT}date-picker`, className), size: size, ref: ref })));
+    return (React.createElement(NextDatePicker2, Object.assign({}, props, { className: cs(`${PREFIX_DEFAULT}date-picker2`, className), size: size, ref: ref })));
 });
 const DatePickerWithSub = assignSubComponent(DatePicker, {
     displayName: 'DatePicker',

package/es/date-picker/main.scss

@@ -0,0 +1,6 @@
+@import '@alifd/next/variables.scss';
+@import "../core/variables.scss";
+
+.#{$prefix}date-picker2 {
+  
+}

package/es/date-picker/style.d.ts

@@ -1,3 +1 @@
-import '../calendar/style';
-import '@alifd/next/lib/date-picker/style';
-import './main.scss';
+import '@alifd/next/lib/date-picker2/style';

package/es/date-picker/style.js

@@ -1,3 +1 @@
-import '../calendar/style';
-import '@alifd/next/lib/date-picker/style';
-import './main.scss';
+import '@alifd/next/lib/date-picker2/style';

package/es/feedback/main.scss

@@ -0,0 +1,45 @@
+@import '../core/variables.scss';
+
+.#{$prefix}feedback {
+    display: inline-block;
+
+    &-inner {
+        padding: 0 4px;
+        display: flex;
+        flex-direction: row;
+        button:first-child {
+            margin-right: 16px;
+        }
+    }
+    &-item {
+        background-color: transparent;
+        outline: 0;
+        border: 0;
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+        cursor: pointer;
+        color: $color-line1-3;
+        font-size: inherit;
+        padding: 0px;
+        transition:
+            color 0.15s,
+            opacity 0.15s;
+
+        &--active {
+            color: $color-brand1-6;
+        }
+
+        &:hover {
+            opacity: 0.8;
+        }
+
+        &-icon {
+            line-height: 1;
+
+            &--bad {
+                transform: rotateX(180deg);
+            }
+        }
+    }
+}

package/es/float-button/main.scss

@@ -0,0 +1,97 @@
+@import '../core/variables.scss';
+
+.#{$prefix}float-button {
+    position: fixed;
+    z-index: 1001;
+
+    &-backtop {
+        transition:
+            opacity 0.2s,
+            transform 0.2s;
+        cursor: pointer;
+
+        &--hidden {
+            opacity: 0;
+            transform: scale(0);
+        }
+    }
+
+    &-inner-drawer {
+        flex: 1;
+        overflow: hidden;
+        box-shadow: $shadow-2;
+        border-radius: $size-base * 2;
+
+        &-outer {
+            display: flex;
+        }
+        &-inner-start {
+            flex: 1;
+        }
+        &-inner-end {
+            flex: none;
+            transition:
+                width 0.3s,
+                opacity 0.3s;
+            display: flex;
+            width: 0;
+            opacity: 0;
+        }
+        &-inner {
+            width: 100%;
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            position: relative;
+
+            &--has-title {
+                .#{$prefix}float-button-inner-drawer {
+                    &-header {
+                        margin: $size-base * 2 $size-base * 3;
+                    }
+                    &-body {
+                        margin-top: 0;
+                    }
+                }
+            }
+            &--has-close {
+                .#{$prefix}float-button-inner-drawer {
+                    &-header-title {
+                        margin-right: $size-base * 2;
+                    }
+                }
+            }
+        }
+        &-header {
+            flex: none;
+            &-title {
+                font-size: $font-size-subhead;
+                line-height: 1.5;
+            }
+            &-close {
+                position: absolute;
+                right: $size-base * 2;
+                top: $size-base * 2;
+                color: $color-text1-2;
+                cursor: pointer;
+                transition: color 0.15s;
+                outline: 0;
+                border: 0;
+                padding: 0;
+                align-self: flex-start;
+                background-color: transparent;
+
+                &:hover {
+                    color: $color-text1-4;
+                }
+            }
+        }
+        &-body {
+            flex: 1;
+            margin: $size-base * 2 $size-base * 3;
+        }
+        &-footer {
+            flex: none;
+        }
+    }
+}

package/es/index.d.ts

@@ -9,5 +9,4 @@ export { default as Input } from './input';
 export { default as DatePicker } from './date-picker';
 export { default as TimePicker } from './time-picker';
 export { default as PersonPicker } from './person-picker';
-export { default as Calendar } from './calendar';
 export declare const version: string;

package/es/index.js

@@ -9,5 +9,4 @@ export { default as Input } from './input';
 export { default as DatePicker } from './date-picker';
 export { default as TimePicker } from './time-picker';
 export { default as PersonPicker } from './person-picker';
-export { default as Calendar } from './calendar';
-export const version = __CHAT_VERSION__;
+export const version = '0.1.15-beta.2';

package/es/input/main.scss

@@ -0,0 +1,5 @@
+@import "../core/variables.scss";
+
+.#{$prefix}input {
+
+}

package/es/input/style.d.ts

@@ -1,2 +1 @@
 import '@alifd/next/lib/input/style';
-import './main.scss';

package/es/input/style.js

@@ -1,2 +1 @@
 import '@alifd/next/lib/input/style';
-import './main.scss';

package/es/person-picker/index.js

@@ -18,46 +18,20 @@ import { __rest } from "tslib";
  * | Enter       | Trigger the onClick event    |
  * | SPACE       | Trigger the onClick event    |
  */
-import React, { forwardRef, useRef } from 'react';
+import React, { forwardRef } from 'react';
 import { Select as NextSelect, Tag as NextTag, Avatar as NextAvatar, Icon as NextIcon, ConfigProvider } from '@alifd/next';
 import cs from 'classnames';
 import { PREFIX_DEFAULT, assignSubComponent } from '../utils';
-import { userPicker, addZeroInWorkNo } from '../utils/dingtalk';
 const PersonPicker = forwardRef((_a, ref) => {
-    var { className, size = 'small', initialUser = [], allParams, setSearchParams } = _a, props = __rest(_a, ["className", "size", "initialUser", "allParams", "setSearchParams"]);
-    const userRef = useRef([]);
-    // 用户选择器回调
-    const handleUserPickerSuccess = (selectedUsers) => {
-        let userWorkNos = selectedUsers.map((u) => u.emplId);
-        const { loginWorkNo } = window.g_config;
-        const validWorkNo = loginWorkNo ? addZeroInWorkNo(loginWorkNo) : '';
-        // 钉钉的工号是补0的ID
-        if (userWorkNos.includes(validWorkNo)) {
-            // 如果包含自己，就把自己放到第一个
-            userWorkNos = [validWorkNo, ...userWorkNos.filter((u) => u !== validWorkNo)];
-        }
-        setSearchParams(Object.assign(Object.assign({}, allParams), { user: userWorkNos.join(',') }));
-        // 更新引用，以便于其他操作
-        userRef.current = userWorkNos;
-    };
-    // 处理用户选择的Click事件
-    const handleUserClick = () => {
-        const validPickedUsers = initialUser.map(addZeroInWorkNo);
-        userPicker({
-            pickedUsers: validPickedUsers, // 已选用户
-            onSuccess: handleUserPickerSuccess,
-        });
-    };
-    // 用户标签渲染
+    var { className, size = 'small', value, onUserChange, onUserPick } = _a, props = __rest(_a, ["className", "size", "value", "onUserChange", "onUserPick"]);
     const tagRender = (selectItem) => {
         const { label, value, onClose } = selectItem;
-        const isUserSelected = initialUser.includes(value);
-        return (isUserSelected && (React.createElement(NextTag.Closeable, { onClose: onClose, className: "h-6 px-1 mt-1 mr-1" },
+        return React.createElement(NextTag.Closeable, { onClose: onClose, className: "h-6 px-1 mt-1 mr-1" },
             React.createElement("div", { className: "flex items-center" },
                 React.createElement(NextAvatar, { className: "mr-0.5 scale-75", shape: "square", size: "small", src: `//work.alibaba-inc.com/photo/${value}.80x80.jpg` }),
-                React.createElement("span", { className: "text-xs" }, label)))));
+                React.createElement("span", { className: "text-xs" }, label)));
     };
-    return (React.createElement(NextSelect, Object.assign({}, props, { className: cs(`${PREFIX_DEFAULT}person-picker`, className), mode: "multiple", itemRender: tagRender, options: [], hasArrow: false, onClick: handleUserClick, innerAfter: React.createElement(NextIcon, { type: "add" }), size: size, ref: ref })));
+    return (React.createElement(NextSelect, Object.assign({}, props, { className: cs(`${PREFIX_DEFAULT}person-picker`, className), mode: "multiple", itemRender: tagRender, options: [], hasArrow: false, visible: false, onClick: onUserPick, onChange: (selectedValues) => onUserChange(selectedValues), innerAfter: React.createElement(NextIcon, { type: "add" }), size: size, ref: ref })));
 });
 const PersonPickerWithSub = assignSubComponent(PersonPicker, {
     displayName: 'PersonPicker',

package/es/person-picker/main.scss

@@ -0,0 +1,5 @@
+@import "../core/variables.scss";
+
+.#{$prefix}person-picker {
+  
+}

package/es/person-picker/style.d.ts

@@ -1,2 +1 @@
 import '@alifd/next/lib/select/style';
-import './main.scss';

package/es/person-picker/style.js

@@ -1,2 +1 @@
 import '@alifd/next/lib/select/style';
-import './main.scss';

package/es/tab/main.scss

@@ -0,0 +1,10 @@
+@import "@alifd/next/variables.scss";
+@import "../core/variables.scss";
+
+.#{$prefix}tabs {
+  &.#{$css-prefix}tabs-pure {
+    .#{$css-prefix}tabs-bar {
+      border-color: transparent;
+    }
+  }
+}

package/es/tag/main.scss

@@ -0,0 +1,9 @@
+@import '@alifd/next/variables.scss';
+@import "../core/variables.scss";
+
+.#{$prefix}tag {
+
+  &.#{$css-prefix}tag {
+      border-color: transparent;
+  }
+}

package/es/text/main.scss

@@ -0,0 +1,19 @@
+@import '../core/variables.scss';
+
+.#{$prefix}text {
+    display: inline-block;
+
+    &-inner {
+    }
+    &-trigger {
+        line-height: 1;
+
+        & &-btn {
+            font-size: inherit;
+            line-height: inherit;
+            height: auto;
+            vertical-align: baseline;
+            margin-left: 12px;
+        }
+    }
+}

package/es/time-picker/index.js

@@ -19,7 +19,7 @@
  */
 import { __rest } from "tslib";
 import React, { forwardRef } from 'react';
-import { TimePicker as NextTimePicker, Select as NextSelect, ConfigProvider } from '@alifd/next';
+import { TimePicker2 as NextTimePicker2, Select as NextSelect, ConfigProvider } from '@alifd/next';
 import cs from 'classnames';
 import dayjs from 'dayjs';
 import { PREFIX_DEFAULT, assignSubComponent } from '../utils';
@@ -66,10 +66,10 @@ const TimePicker = forwardRef((_a, ref) => {
     };
     if (mode === 'dingtalk') {
         const { format, hourStep, minuteStep, secondStep } = props, otherProps = __rest(props, ["format", "hourStep", "minuteStep", "secondStep"]);
-        return (React.createElement(NextSelect, Object.assign({}, otherProps, { className: cs(`${PREFIX_DEFAULT}time-picker`, className), value: formatSelectValue(), size: size, ref: ref }), getTimeArray().map((time, index) => (React.createElement(NextSelect.Option, { value: time.value, key: index }, time.label)))));
+        return (React.createElement(NextSelect, Object.assign({}, otherProps, { className: cs(`${PREFIX_DEFAULT}time-picker2`, className), value: formatSelectValue(), size: size, ref: ref }), getTimeArray().map((time, index) => (React.createElement(NextSelect.Option, { value: time.value, key: index }, time.label)))));
     }
     else {
-        return (React.createElement(NextTimePicker, Object.assign({}, props, { className: cs(`${PREFIX_DEFAULT}time-picker`, className), size: size, ref: ref })));
+        return (React.createElement(NextTimePicker2, Object.assign({}, props, { className: cs(`${PREFIX_DEFAULT}time-picker2`, className), size: size, ref: ref })));
     }
 });
 const TimePickerWithSub = assignSubComponent(TimePicker, {

package/es/time-picker/main.scss

@@ -0,0 +1,6 @@
+@import '@alifd/next/variables.scss';
+@import "../core/variables.scss";
+
+.#{$prefix}time-picker2 {
+  
+}

package/es/time-picker/style.d.ts

@@ -1,2 +1 @@
-import '@alifd/next/lib/time-picker/style';
-import './main.scss';
+import '@alifd/next/lib/time-picker2/style';

package/es/time-picker/style.js

@@ -1,2 +1 @@
-import '@alifd/next/lib/time-picker/style';
-import './main.scss';
+import '@alifd/next/lib/time-picker2/style';

package/lib/date-picker/index.d.ts

@@ -18,7 +18,7 @@
  * | SPACE       | Trigger the onClick event    |
  */
 import React from 'react';
-import { DatePicker as NextDatePicker } from '@alifd/next';
+import { DatePicker2 as NextDatePicker2 } from '@alifd/next';
 export * from './types';
-declare const _default: import("@alifd/next/types/config-provider/types").ConfiguredComponentClass<Pick<Pick<any, string | number | symbol> & React.RefAttributes<NextDatePicker>, string | number | symbol> & import("@alifd/next/types/config-provider/types").ComponentCommonProps, NextDatePicker, {}>;
+declare const _default: import("@alifd/next/types/config-provider/types").ConfiguredComponentClass<Pick<Pick<any, string | number | symbol> & React.RefAttributes<NextDatePicker2>, string | number | symbol> & import("@alifd/next/types/config-provider/types").ComponentCommonProps, NextDatePicker2, {}>;
 export default _default;

package/lib/date-picker/index.js

@@ -26,7 +26,7 @@ const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const utils_1 = require("../utils");
 const DatePicker = (0, react_1.forwardRef)((_a, ref) => {
     var { className, size = 'small' } = _a, props = tslib_1.__rest(_a, ["className", "size"]);
-    return (react_1.default.createElement(next_1.DatePicker, Object.assign({}, props, { className: (0, classnames_1.default)(`${utils_1.PREFIX_DEFAULT}date-picker`, className), size: size, ref: ref })));
+    return (react_1.default.createElement(next_1.DatePicker2, Object.assign({}, props, { className: (0, classnames_1.default)(`${utils_1.PREFIX_DEFAULT}date-picker2`, className), size: size, ref: ref })));
 });
 const DatePickerWithSub = (0, utils_1.assignSubComponent)(DatePicker, {
     displayName: 'DatePicker',

package/lib/date-picker/main.scss

@@ -1,6 +1,6 @@
 @import '@alifd/next/variables.scss';
 @import "../core/variables.scss";
 
-.#{$prefix}date-picker {
+.#{$prefix}date-picker2 {
   
 }

package/lib/date-picker/style.d.ts

@@ -1,3 +1 @@
-import '../calendar/style';
-import '@alifd/next/lib/date-picker/style';
-import './main.scss';
+import '@alifd/next/lib/date-picker2/style';

package/lib/date-picker/style.js

@@ -1,5 +1,3 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-require("../calendar/style");
-require("@alifd/next/lib/date-picker/style");
-require("./main.scss");
+require("@alifd/next/lib/date-picker2/style");

package/lib/index.d.ts

@@ -8,5 +8,5 @@ export { default as Tab } from './tab';
 export { default as Input } from './input';
 export { default as DatePicker } from './date-picker';
 export { default as TimePicker } from './time-picker';
-export { default as Calendar } from './calendar';
+export { default as PersonPicker } from './person-picker';
 export declare const version: string;

package/lib/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.version = exports.Calendar = exports.TimePicker = exports.DatePicker = exports.Input = exports.Tab = exports.Tag = exports.Text = exports.FloatButton = exports.Feedback = exports.Card = exports.Button = void 0;
+exports.version = exports.PersonPicker = exports.TimePicker = exports.DatePicker = exports.Input = exports.Tab = exports.Tag = exports.Text = exports.FloatButton = exports.Feedback = exports.Card = exports.Button = void 0;
 var button_1 = require("./button");
 Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return __importDefault(button_1).default; } });
 var card_1 = require("./card");
@@ -24,6 +24,6 @@ var date_picker_1 = require("./date-picker");
 Object.defineProperty(exports, "DatePicker", { enumerable: true, get: function () { return __importDefault(date_picker_1).default; } });
 var time_picker_1 = require("./time-picker");
 Object.defineProperty(exports, "TimePicker", { enumerable: true, get: function () { return __importDefault(time_picker_1).default; } });
-var calendar_1 = require("./calendar");
-Object.defineProperty(exports, "Calendar", { enumerable: true, get: function () { return __importDefault(calendar_1).default; } });
-exports.version = '0.1.11';
+var person_picker_1 = require("./person-picker");
+Object.defineProperty(exports, "PersonPicker", { enumerable: true, get: function () { return __importDefault(person_picker_1).default; } });
+exports.version = '0.1.15-beta.2';

package/lib/input/style.d.ts

@@ -1,2 +1 @@
 import '@alifd/next/lib/input/style';
-import './main.scss';

package/lib/input/style.js

@@ -1,4 +1,3 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 require("@alifd/next/lib/input/style");
-require("./main.scss");

package/{es/calendar → lib/person-picker}/index.d.ts

@@ -1,6 +1,6 @@
 /**
- * @component 日历
- * @en Button
+ * @component 人员选择
+ * @en PersonSelect
  * @type 通用 - General
  * @remarks 同 Next Button，按钮用于开始一个即时操作。- Same as Next.Button, Button used to trigger an action.
  * @when 标记一个（或封装一组）操作命令，响应用户点击行为，触发相应的业务逻辑。- Buttons are used for emphasizing important functions on your page.
@@ -18,6 +18,7 @@
  * | SPACE       | Trigger the onClick event    |
  */
 import React from 'react';
+import { Select as NextSelect } from '@alifd/next';
 export * from './types';
-declare const _default: import("@alifd/next/types/config-provider/types").ConfiguredComponentClass<Pick<Pick<any, string | number | symbol> & React.RefAttributes<import("@alifd/next/types/config-provider/types").ConfiguredComponent<import("@alifd/next/types/button").ButtonProps & import("@alifd/next/types/config-provider/types").ComponentCommonProps, import("@alifd/next/types/button/view/button").default>>, string | number | symbol> & import("@alifd/next/types/config-provider/types").ComponentCommonProps, import("@alifd/next/types/config-provider/types").ConfiguredComponent<import("@alifd/next/types/button").ButtonProps & import("@alifd/next/types/config-provider/types").ComponentCommonProps, import("@alifd/next/types/button/view/button").default>, {}>;
+declare const _default: import("@alifd/next/types/config-provider/types").ConfiguredComponentClass<Pick<Pick<any, string | number | symbol> & React.RefAttributes<NextSelect>, string | number | symbol> & import("@alifd/next/types/config-provider/types").ComponentCommonProps, NextSelect, {}>;
 export default _default;

package/lib/person-picker/index.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+/**
+ * @component 人员选择
+ * @en PersonSelect
+ * @type 通用 - General
+ * @remarks 同 Next Button，按钮用于开始一个即时操作。- Same as Next.Button, Button used to trigger an action.
+ * @when 标记一个（或封装一组）操作命令，响应用户点击行为，触发相应的业务逻辑。- Buttons are used for emphasizing important functions on your page.
+ * @others
+ * ## 无障碍键盘操作指南
+ * | 按键    | 说明          |
+ * | :---- | :---------- |
+ * | Enter | 触发 onClick 事件 |
+ * | SPACE | 触发 onClick 事件 |
+ * @othersEn
+ * ## ARIA and KeyBoard
+ * | KeyBoard          | Description                              |
+ * | :---------- | :------------------------------ |
+ * | Enter       | Trigger the onClick event    |
+ * | SPACE       | Trigger the onClick event    |
+ */
+const react_1 = tslib_1.__importStar(require("react"));
+const next_1 = require("@alifd/next");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const utils_1 = require("../utils");
+const PersonPicker = (0, react_1.forwardRef)((_a, ref) => {
+    var { className, size = 'small', value, onUserChange, onUserPick } = _a, props = tslib_1.__rest(_a, ["className", "size", "value", "onUserChange", "onUserPick"]);
+    const tagRender = (selectItem) => {
+        const { label, value, onClose } = selectItem;
+        return react_1.default.createElement(next_1.Tag.Closeable, { onClose: onClose, className: "h-6 px-1 mt-1 mr-1" },
+            react_1.default.createElement("div", { className: "flex items-center" },
+                react_1.default.createElement(next_1.Avatar, { className: "mr-0.5 scale-75", shape: "square", size: "small", src: `//work.alibaba-inc.com/photo/${value}.80x80.jpg` }),
+                react_1.default.createElement("span", { className: "text-xs" }, label)));
+    };
+    return (react_1.default.createElement(next_1.Select, Object.assign({}, props, { className: (0, classnames_1.default)(`${utils_1.PREFIX_DEFAULT}person-picker`, className), mode: "multiple", itemRender: tagRender, options: [], hasArrow: false, visible: false, onClick: onUserPick, onChange: (selectedValues) => onUserChange(selectedValues), innerAfter: react_1.default.createElement(next_1.Icon, { type: "add" }), size: size, ref: ref })));
+});
+const PersonPickerWithSub = (0, utils_1.assignSubComponent)(PersonPicker, {
+    displayName: 'PersonPicker',
+});
+tslib_1.__exportStar(require("./types"), exports);
+exports.default = next_1.ConfigProvider.config(PersonPickerWithSub);

package/lib/person-picker/main.scss

@@ -0,0 +1,5 @@
+@import "../core/variables.scss";
+
+.#{$prefix}person-picker {
+  
+}

package/lib/person-picker/style.d.ts

@@ -0,0 +1 @@
+import '@alifd/next/lib/select/style';

package/lib/{calendar → person-picker}/style.js

@@ -1,4 +1,3 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-require("@alifd/next/lib/calendar/style");
-require("./main.scss");
+require("@alifd/next/lib/select/style");

package/lib/person-picker/types.d.ts

@@ -0,0 +1,20 @@
+import type React from 'react';
+type HTMLAttributesWeak = Omit<React.ButtonHTMLAttributes<HTMLElement>, 'type' | 'onClick'>;
+/**
+ * @api TimePicker
+ */
+export interface TimePickerProps extends HTMLAttributesWeak {
+    /**
+     * 采用模式
+     * @en mode of time-picker
+     * @defaultValue 'normal'
+     */
+    mode?: 'normal' | 'dingtalk';
+    /**
+     * 时间选择器其他属性
+     * @en key of time-picker
+     * @defaultValue 'medium'
+     */
+    [key: string]: any;
+}
+export {};

package/lib/time-picker/index.js

@@ -68,10 +68,10 @@ const TimePicker = (0, react_1.forwardRef)((_a, ref) => {
     };
     if (mode === 'dingtalk') {
         const { format, hourStep, minuteStep, secondStep } = props, otherProps = tslib_1.__rest(props, ["format", "hourStep", "minuteStep", "secondStep"]);
-        return (react_1.default.createElement(next_1.Select, Object.assign({}, otherProps, { className: (0, classnames_1.default)(`${utils_1.PREFIX_DEFAULT}time-picker`, className), value: formatSelectValue(), size: size, ref: ref }), getTimeArray().map((time, index) => (react_1.default.createElement(next_1.Select.Option, { value: time.value, key: index }, time.label)))));
+        return (react_1.default.createElement(next_1.Select, Object.assign({}, otherProps, { className: (0, classnames_1.default)(`${utils_1.PREFIX_DEFAULT}time-picker2`, className), value: formatSelectValue(), size: size, ref: ref }), getTimeArray().map((time, index) => (react_1.default.createElement(next_1.Select.Option, { value: time.value, key: index }, time.label)))));
     }
     else {
-        return (react_1.default.createElement(next_1.TimePicker, Object.assign({}, props, { className: (0, classnames_1.default)(`${utils_1.PREFIX_DEFAULT}time-picker`, className), size: size, ref: ref })));
+        return (react_1.default.createElement(next_1.TimePicker2, Object.assign({}, props, { className: (0, classnames_1.default)(`${utils_1.PREFIX_DEFAULT}time-picker2`, className), size: size, ref: ref })));
     }
 });
 const TimePickerWithSub = (0, utils_1.assignSubComponent)(TimePicker, {

package/lib/time-picker/main.scss

@@ -1,6 +1,6 @@
 @import '@alifd/next/variables.scss';
 @import "../core/variables.scss";
 
-.#{$prefix}time-picker {
+.#{$prefix}time-picker2 {
   
 }

package/lib/time-picker/style.d.ts

@@ -1,2 +1 @@
-import '@alifd/next/lib/time-picker/style';
-import './main.scss';
+import '@alifd/next/lib/time-picker2/style';

package/lib/time-picker/style.js

@@ -1,4 +1,3 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-require("@alifd/next/lib/time-picker/style");
-require("./main.scss");
+require("@alifd/next/lib/time-picker2/style");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alifd/chat",
-  "version": "0.1.15-beta.0",
+  "version": "0.1.15-beta.2",
   "description": "A configurable component library for chat built on React.",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -157,6 +157,18 @@
     "./utils": {
       "import": "./es/utils/index.js",
       "require": "./lib/utils/index.js"
+    },
+    "./person-picker": {
+      "import": "./es/person-picker/index.js",
+      "require": "./lib/person-picker/index.js"
+    },
+    "./person-picker/style": {
+      "import": "./es/person-picker/style.js",
+      "require": "./lib/person-picker/style.js"
+    },
+    "./person-picker/style.js": {
+      "import": "./es/person-picker/style.js",
+      "require": "./lib/person-picker/style.js"
     }
   },
   "files": [
@@ -226,8 +238,10 @@
   },
   "dependencies": {
     "@ali/dingtalk-jsapi": "^3.0.33",
+    "dd-icons": "^1.6.20",
     "dingtalk-jsapi": "^3.0.33",
     "hoist-non-react-statics": "^3.3.2",
+    "ice": "^3.7.100",
     "tslib": "^2.6.2"
   },
   "sideEffects": [

package/es/calendar/index.js

@@ -1,33 +0,0 @@
-/**
- * @component 日历
- * @en Button
- * @type 通用 - General
- * @remarks 同 Next Button，按钮用于开始一个即时操作。- Same as Next.Button, Button used to trigger an action.
- * @when 标记一个（或封装一组）操作命令，响应用户点击行为，触发相应的业务逻辑。- Buttons are used for emphasizing important functions on your page.
- * @others
- * ## 无障碍键盘操作指南
- * | 按键    | 说明          |
- * | :---- | :---------- |
- * | Enter | 触发 onClick 事件 |
- * | SPACE | 触发 onClick 事件 |
- * @othersEn
- * ## ARIA and KeyBoard
- * | KeyBoard          | Description                              |
- * | :---------- | :------------------------------ |
- * | Enter       | Trigger the onClick event    |
- * | SPACE       | Trigger the onClick event    |
- */
-import { __rest } from "tslib";
-import React, { forwardRef } from 'react';
-import { Button as NextCalendar, ConfigProvider } from '@alifd/next';
-import cs from 'classnames';
-import { PREFIX_DEFAULT, assignSubComponent } from '../utils';
-const Calendar = forwardRef((_a, ref) => {
-    var { className, size = 'small' } = _a, props = __rest(_a, ["className", "size"]);
-    return (React.createElement(NextCalendar, Object.assign({}, props, { className: cs(`${PREFIX_DEFAULT}calendar`, className), size: size, ref: ref })));
-});
-const CalendarWithSub = assignSubComponent(Calendar, {
-    displayName: 'Calendar',
-});
-export * from './types';
-export default ConfigProvider.config(CalendarWithSub);

package/es/calendar/style.d.ts

@@ -1,2 +0,0 @@
-import '@alifd/next/lib/calendar/style';
-import './main.scss';

package/es/calendar/style.js

@@ -1,2 +0,0 @@
-import '@alifd/next/lib/calendar/style';
-import './main.scss';

package/es/calendar/types.d.ts

@@ -1,123 +0,0 @@
-import type React from 'react';
-/**
- * 按钮类型
- * @api
- */
-export type ButtonSize = 'small' | 'medium' | 'large';
-/**
- * @api Button.Group
- */
-export interface GroupProps extends React.HTMLAttributes<HTMLElement> {
-    /**
-     * 统一设置 Button 组件的按钮大小
-     */
-    size?: ButtonSize;
-}
-type HTMLAttributesWeak = Omit<React.ButtonHTMLAttributes<HTMLElement>, 'type' | 'onClick'>;
-/**
- * @api Button
- */
-export interface ButtonProps extends HTMLAttributesWeak {
-    /**
-     * 按钮的类型
-     * @en Typeo of button
-     * @defaultValue 'normal'
-     */
-    type?: 'primary' | 'secondary' | 'normal';
-    /**
-     * @deprecated use `warning` `text` `ghost` insteaded
-     * @skip
-     */
-    shape?: 'warning' | 'text' | 'ghost';
-    /**
-     * 按钮的尺寸
-     * @en Size of button
-     * @defaultValue 'medium'
-     */
-    size?: ButtonSize;
-    /**
-     * 按钮中可配置的 Icon
-     * @en Available icons in button
-     * @example
-     * \{ loading: <Icon type="loading"/> \}
-     */
-    icons?: {
-        loading?: React.ReactNode;
-    };
-    /**
-     * 按钮中 Icon 的尺寸
-     * @en Size of icon in button
-     * @defaultValue 默认根据 size 自动映射，映射规则：
-     * size:large -\> `small`
-     * size:medium -\> `xs`
-     * size:small -\> `xs`
-     */
-    iconSize?: number | 'xxs' | 'xs' | 'small' | 'medium' | 'large' | 'xl' | 'xxl' | 'xxxl' | 'inherit';
-    /**
-     * button 标签的 type 值
-     * @en Original html type for button element
-     * @defaultValue 'button'
-     * @remarks 仅当 component = 'button' 时使用
-     */
-    htmlType?: 'submit' | 'reset' | 'button';
-    /**
-     * 最终渲染的 jsx 标签标签类型
-     * @en The jsx tag to be rendered
-     * @remarks 直接去掉原先的 ReactNode 类型，因为即使传递了非法类型运行时也会报错，不如在类型提示阶段就将错误抛出
-     */
-    component?: 'button' | 'a' | React.ComponentType<unknown>;
-    /**
-     * 设置按钮的载入状态
-     * @en Loading state of a button
-     * @defaultValue false
-     */
-    loading?: boolean;
-    /**
-     * 是否为幽灵按钮
-     * @en Setting ghost button
-     * @defaultValue false
-     */
-    ghost?: true | false | 'light' | 'dark';
-    /**
-     * 是否为文本按钮
-     * @en Is text button
-     * @defaultValue false
-     */
-    text?: boolean;
-    /**
-     * 是否为警告按钮
-     * @en Is warning button
-     * @defaultValue false
-     */
-    warning?: boolean;
-    /**
-     * 是否禁用
-     * @en Is disabled
-     * @defaultValue false
-     */
-    disabled?: boolean;
-    /**
-     * 点击按钮的回调
-     * @en Callback of click event
-     */
-    onClick?: React.MouseEventHandler;
-    /**
-     * 'a' 标签的 href 属性
-     * @remarks 仅在 component = 'a' 时使用
-     * @skip
-     */
-    href?: string;
-    /**
-     * 'a' 标签的 target 属性
-     * @remarks 仅在 component = 'a' 时使用
-     * @skip
-     */
-    target?: string;
-    /**
-     * 'ReactRouterLink' 组件的 to 属性
-     * @remarks 仅在 component 支持 to 属性时使用
-     * @skip
-     */
-    to?: string;
-}
-export {};

package/es/calendar/types.js

@@ -1 +0,0 @@
-export {};

package/lib/calendar/index.d.ts

@@ -1,23 +0,0 @@
-/**
- * @component 日历
- * @en Button
- * @type 通用 - General
- * @remarks 同 Next Button，按钮用于开始一个即时操作。- Same as Next.Button, Button used to trigger an action.
- * @when 标记一个（或封装一组）操作命令，响应用户点击行为，触发相应的业务逻辑。- Buttons are used for emphasizing important functions on your page.
- * @others
- * ## 无障碍键盘操作指南
- * | 按键    | 说明          |
- * | :---- | :---------- |
- * | Enter | 触发 onClick 事件 |
- * | SPACE | 触发 onClick 事件 |
- * @othersEn
- * ## ARIA and KeyBoard
- * | KeyBoard          | Description                              |
- * | :---------- | :------------------------------ |
- * | Enter       | Trigger the onClick event    |
- * | SPACE       | Trigger the onClick event    |
- */
-import React from 'react';
-export * from './types';
-declare const _default: import("@alifd/next/types/config-provider/types").ConfiguredComponentClass<Pick<Pick<any, string | number | symbol> & React.RefAttributes<import("@alifd/next/types/config-provider/types").ConfiguredComponent<import("@alifd/next/types/button").ButtonProps & import("@alifd/next/types/config-provider/types").ComponentCommonProps, import("@alifd/next/types/button/view/button").default>>, string | number | symbol> & import("@alifd/next/types/config-provider/types").ComponentCommonProps, import("@alifd/next/types/config-provider/types").ConfiguredComponent<import("@alifd/next/types/button").ButtonProps & import("@alifd/next/types/config-provider/types").ComponentCommonProps, import("@alifd/next/types/button/view/button").default>, {}>;
-export default _default;

package/lib/calendar/index.js

@@ -1,35 +0,0 @@
-"use strict";
-/**
- * @component 日历
- * @en Button
- * @type 通用 - General
- * @remarks 同 Next Button，按钮用于开始一个即时操作。- Same as Next.Button, Button used to trigger an action.
- * @when 标记一个（或封装一组）操作命令，响应用户点击行为，触发相应的业务逻辑。- Buttons are used for emphasizing important functions on your page.
- * @others
- * ## 无障碍键盘操作指南
- * | 按键    | 说明          |
- * | :---- | :---------- |
- * | Enter | 触发 onClick 事件 |
- * | SPACE | 触发 onClick 事件 |
- * @othersEn
- * ## ARIA and KeyBoard
- * | KeyBoard          | Description                              |
- * | :---------- | :------------------------------ |
- * | Enter       | Trigger the onClick event    |
- * | SPACE       | Trigger the onClick event    |
- */
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importStar(require("react"));
-const next_1 = require("@alifd/next");
-const classnames_1 = tslib_1.__importDefault(require("classnames"));
-const utils_1 = require("../utils");
-const Calendar = (0, react_1.forwardRef)((_a, ref) => {
-    var { className, size = 'small' } = _a, props = tslib_1.__rest(_a, ["className", "size"]);
-    return (react_1.default.createElement(next_1.Button, Object.assign({}, props, { className: (0, classnames_1.default)(`${utils_1.PREFIX_DEFAULT}calendar`, className), size: size, ref: ref })));
-});
-const CalendarWithSub = (0, utils_1.assignSubComponent)(Calendar, {
-    displayName: 'Calendar',
-});
-tslib_1.__exportStar(require("./types"), exports);
-exports.default = next_1.ConfigProvider.config(CalendarWithSub);

package/lib/calendar/style.d.ts

@@ -1,2 +0,0 @@
-import '@alifd/next/lib/calendar/style';
-import './main.scss';

package/lib/calendar/types.d.ts

@@ -1,123 +0,0 @@
-import type React from 'react';
-/**
- * 按钮类型
- * @api
- */
-export type ButtonSize = 'small' | 'medium' | 'large';
-/**
- * @api Button.Group
- */
-export interface GroupProps extends React.HTMLAttributes<HTMLElement> {
-    /**
-     * 统一设置 Button 组件的按钮大小
-     */
-    size?: ButtonSize;
-}
-type HTMLAttributesWeak = Omit<React.ButtonHTMLAttributes<HTMLElement>, 'type' | 'onClick'>;
-/**
- * @api Button
- */
-export interface ButtonProps extends HTMLAttributesWeak {
-    /**
-     * 按钮的类型
-     * @en Typeo of button
-     * @defaultValue 'normal'
-     */
-    type?: 'primary' | 'secondary' | 'normal';
-    /**
-     * @deprecated use `warning` `text` `ghost` insteaded
-     * @skip
-     */
-    shape?: 'warning' | 'text' | 'ghost';
-    /**
-     * 按钮的尺寸
-     * @en Size of button
-     * @defaultValue 'medium'
-     */
-    size?: ButtonSize;
-    /**
-     * 按钮中可配置的 Icon
-     * @en Available icons in button
-     * @example
-     * \{ loading: <Icon type="loading"/> \}
-     */
-    icons?: {
-        loading?: React.ReactNode;
-    };
-    /**
-     * 按钮中 Icon 的尺寸
-     * @en Size of icon in button
-     * @defaultValue 默认根据 size 自动映射，映射规则：
-     * size:large -\> `small`
-     * size:medium -\> `xs`
-     * size:small -\> `xs`
-     */
-    iconSize?: number | 'xxs' | 'xs' | 'small' | 'medium' | 'large' | 'xl' | 'xxl' | 'xxxl' | 'inherit';
-    /**
-     * button 标签的 type 值
-     * @en Original html type for button element
-     * @defaultValue 'button'
-     * @remarks 仅当 component = 'button' 时使用
-     */
-    htmlType?: 'submit' | 'reset' | 'button';
-    /**
-     * 最终渲染的 jsx 标签标签类型
-     * @en The jsx tag to be rendered
-     * @remarks 直接去掉原先的 ReactNode 类型，因为即使传递了非法类型运行时也会报错，不如在类型提示阶段就将错误抛出
-     */
-    component?: 'button' | 'a' | React.ComponentType<unknown>;
-    /**
-     * 设置按钮的载入状态
-     * @en Loading state of a button
-     * @defaultValue false
-     */
-    loading?: boolean;
-    /**
-     * 是否为幽灵按钮
-     * @en Setting ghost button
-     * @defaultValue false
-     */
-    ghost?: true | false | 'light' | 'dark';
-    /**
-     * 是否为文本按钮
-     * @en Is text button
-     * @defaultValue false
-     */
-    text?: boolean;
-    /**
-     * 是否为警告按钮
-     * @en Is warning button
-     * @defaultValue false
-     */
-    warning?: boolean;
-    /**
-     * 是否禁用
-     * @en Is disabled
-     * @defaultValue false
-     */
-    disabled?: boolean;
-    /**
-     * 点击按钮的回调
-     * @en Callback of click event
-     */
-    onClick?: React.MouseEventHandler;
-    /**
-     * 'a' 标签的 href 属性
-     * @remarks 仅在 component = 'a' 时使用
-     * @skip
-     */
-    href?: string;
-    /**
-     * 'a' 标签的 target 属性
-     * @remarks 仅在 component = 'a' 时使用
-     * @skip
-     */
-    target?: string;
-    /**
-     * 'ReactRouterLink' 组件的 to 属性
-     * @remarks 仅在 component 支持 to 属性时使用
-     * @skip
-     */
-    to?: string;
-}
-export {};