@aloudata/aloudata-design 2.18.4 → 2.19.0-beta.2

package/dist/AldSelect/BaseSelect.d.ts

@@ -49,7 +49,7 @@ export interface BaseSelectProps extends BaseSelectPrivateProps, ISelectProps, R
     suffixIcon?: React.ReactNode;
     dropdownAlign?: AlignType;
     placement?: PlacementType;
-    getPopupContainer?: RenderDOMFunc;
+    getPopupContainer?: () => HTMLElement;
     onBlur?: React.FocusEventHandler<HTMLElement>;
     onFocus?: React.FocusEventHandler<HTMLElement>;
     onKeyUp?: React.KeyboardEventHandler<HTMLDivElement>;

package/dist/AldSelect/BaseSelect.js

@@ -212,7 +212,7 @@ var BaseSelect = /*#__PURE__*/React.forwardRef(function (props, ref) {
     ref: selectRef,
     id: id,
     onClick: onSelectClick
-  }, /*#__PURE__*/React.createElement(SelectTrigger, {
+  }, /*#__PURE__*/React.createElement(SelectTrigger, _extends({}, restProps, {
     open: !!mergedOpen,
     notFoundContent: notFoundContent,
     menu: showMenu,
@@ -238,7 +238,7 @@ var BaseSelect = /*#__PURE__*/React.forwardRef(function (props, ref) {
         onToggleOpen(open);
       }
     }
-  }, /*#__PURE__*/React.createElement("div", {
+  }), /*#__PURE__*/React.createElement("div", {
     className: setClassNames('trigger')
   }, prefix && /*#__PURE__*/React.createElement("div", {
     className: setClassNames('prefix')

package/dist/AldSelect/interface.d.ts

@@ -36,7 +36,7 @@ export interface ISelectProps<ValueType = any, OptionType extends BaseOptionType
     style?: React.CSSProperties;
     open?: boolean;
     onOpenChange?: (open: boolean) => void;
-    getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
+    getPopupContainer?: () => HTMLElement;
     onInputKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
     popupMatchSelectWidth?: boolean | number;
     onSelect?: SelectHandler<ArrayElementType<ValueType>, OptionType>;
@@ -84,7 +84,6 @@ export interface LabelInValueType {
     disabled?: boolean;
 }
 export type DraftValueType = RawValueType | LabelInValueType | DisplayValueType | (RawValueType | LabelInValueType | DisplayValueType)[];
-export type RenderDOMFunc = (triggerNode: HTMLElement) => HTMLElement;
 export type DisplayInfoType = 'add' | 'remove' | 'clear';
 export interface DefaultOptionType extends BaseOptionType {
     label?: React.ReactNode;

package/dist/AldSelect/style/color.less

@@ -1,40 +1,49 @@
 .beta-ald-select {
-  border-color: #d1d5db;
-  color: #1f2937;
-  background-color: #fff;
+  border-color: var(--interaction-border-neutral-normal);
+  color: var(--content-primary);
+  background-color: var(--interaction-background-form-field);
+
+  &:hover {
+    border-color: var(--interaction-border-normal);
+  }
 
   &-active {
-    border-color: #007bff;
+    border-color: var(--global-transparent-transparent);
+    box-shadow: var(--focus-default-focus);
+
+    &:hover {
+      border-color: var(--global-transparent-transparent);
+    }
   }
 
   &-error {
-    border-color: #dc2626;
+    border-color: var(--interaction-border-alert);
   }
 
   &-validating,
   &-passed {
-    border-color: #16a34a;
+    border-color: var(--border-positive-strong);
   }
 
   &-borderless {
     border-color: transparent;
     background-color: transparent;
-    color: #111827;
+    color: var(--content-primary);
 
     &:hover {
-      background-color: #f3f4f6;
-      border-color: #f3f4f6;
+      background-color: var(--background-neutral-muted);
+      border-color: var(--background-neutral-muted);
     }
 
     &.beta-ald-select-active {
-      background-color: #fff;
-      border-color: #fff;
+      background-color: var(--background-default);
+      border-color: var(--background-default);
     }
   }
 
   &-disabled {
-    border: 1px solid #d1d5db;
-    background: #f3f4f6;
+    border: 1px solid var(--border-default);
+    background: var(--background-neutral-muted);
 
     &.beta-ald-select-borderless {
       border-color: transparent;
@@ -43,14 +52,14 @@
   }
 
   .beta-ald-select-placeholder {
-    color: #9ca3af;
+    color: var(--content-tertiary);
   }
 }
 
 .beta-ald-select-prefix {
-  color: #4b5563;
+  color: var(--content-secondary);
 }
 
 .beta-ald-select-selector-multiple-responsive-selected-section {
-  border-color: #007bff;
+  border-color: var(--interaction-border-selected);
 }

package/dist/AldSelect/style/index.less

@@ -121,7 +121,7 @@
         left: -1px;
         border-width: 1px;
         border-style: solid;
-        background-color: #fff;
+        background-color: var(--background-default);
         z-index: 1;
 
         .beta-ald-select-selector-multiple-responsive-selected-section-tags {
@@ -162,7 +162,7 @@
     width: 100%;
 
     .beta-ald-select-search-box {
-      border-bottom: 1px solid #d1d5db;
+      border-bottom: 1px solid var(--border-default);
       border-radius: 0 !important;
 
       .ald-input {

package/dist/Avatar/component/Avatar/index.js

@@ -1,5 +1,9 @@
-var _excluded = ["size", "children", "src", "icon", "type"];
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+var _excluded = ["size", "children", "src", "icon"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import InternalAvatar from 'antd/lib/avatar/avatar';
@@ -7,7 +11,7 @@ import * as React from 'react';
 import { User } from "../../../Icon";
 import _ from 'lodash';
 import { useCallback, useMemo } from 'react';
-import { AVATAR_SIZE_MAP, AVATAR_TYPE_TO_BG_COLOR } from "./type";
+import { AVATAR_SIZE_MAP } from "./type";
 import { getFontSize } from "./helper";
 import classNames from 'classnames';
 var ZERO = 0;
@@ -17,7 +21,6 @@ var Avatar = function Avatar(props) {
     children = props.children,
     src = props.src,
     icon = props.icon,
-    type = props.type,
     restProps = _objectWithoutProperties(props, _excluded);
   var getSize = useCallback(function () {
     if (typeof size === 'number') {
@@ -34,18 +37,6 @@ var Avatar = function Avatar(props) {
     }
     return children;
   }, [children]);
-  var bgColor = useMemo(function () {
-    if (type) {
-      return AVATAR_TYPE_TO_BG_COLOR[type];
-    }
-    return AVATAR_TYPE_TO_BG_COLOR.user;
-  }, [type]);
-  var fontColor = useMemo(function () {
-    if (type === 'count') {
-      return '#1F2937';
-    }
-    return '#fff';
-  }, [type]);
   var innerIcon = useMemo(function () {
     if (icon) {
       return icon;
@@ -53,8 +44,6 @@ var Avatar = function Avatar(props) {
     if (!_.isEmpty(children)) {
       return /*#__PURE__*/React.createElement("div", {
         style: {
-          backgroundColor: bgColor,
-          color: fontColor,
           height: '100%',
           width: '100%',
           display: 'flex',
@@ -68,10 +57,10 @@ var Avatar = function Avatar(props) {
     return /*#__PURE__*/React.createElement(User, {
       size: getSize()
     });
-  }, [icon, getSize, children, getChildren, bgColor, fontColor]);
+  }, [icon, getSize, children, getChildren]);
   return /*#__PURE__*/React.createElement(InternalAvatar, _extends({}, restProps, {
     size: getSize(),
-    className: classNames(restProps.className, 'ald-avatar'),
+    className: classNames(restProps.className, 'ald-avatar', _defineProperty({}, "ald-avatar-default", !icon && _.isEmpty(children))),
     icon: innerIcon,
     src: src
   }));

package/dist/Avatar/component/Avatar/type.js

@@ -10,7 +10,7 @@ export var AVATAR_SIZE_MAP = {
 };
 export var AVATAR_SIZE_TO_FONT_SIZE = (_AVATAR_SIZE_TO_FONT_ = {}, _defineProperty(_AVATAR_SIZE_TO_FONT_, 16, 8), _defineProperty(_AVATAR_SIZE_TO_FONT_, 20, 10), _defineProperty(_AVATAR_SIZE_TO_FONT_, 24, 10), _defineProperty(_AVATAR_SIZE_TO_FONT_, 28, 12), _defineProperty(_AVATAR_SIZE_TO_FONT_, 32, 12), _defineProperty(_AVATAR_SIZE_TO_FONT_, 40, 14), _defineProperty(_AVATAR_SIZE_TO_FONT_, 48, 16), _defineProperty(_AVATAR_SIZE_TO_FONT_, 64, 24), _AVATAR_SIZE_TO_FONT_);
 export var AVATAR_TYPE_TO_BG_COLOR = {
-  user: '#1D4ED8',
-  userGroup: '#15803D',
-  count: '#E5E7EB'
+  user: 'var(--non-semantic-background-blue-muted)',
+  userGroup: 'var(--non-semantic-background-blue-muted)',
+  count: 'var(--non-semantic-background-grey-muted)'
 };

package/dist/Avatar/style/index.less

@@ -1,16 +1,23 @@
 @import '../../style/index.less';
 
 .ald-avatar.ald-avatar {
-  background-color: #fff;
-  color: #1f2937;
   border: 0;
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  background-color: var(--non-semantic-background-blue-muted);
+  color: var(--non-semantic-content-blue-primary);
+
+  &.ald-avatar-default {
+    background-color: white;
+  }
 }
 
 .ant-avatar-group {
   .ald-avatar.ald-avatar {
-    border: 1px solid #fff;
+    &.ald-avatar-default {
+      background-color: var(--non-semantic-background-blue-muted);
+      color: var(--non-semantic-content-blue-primary);
+    }
   }
 }

package/dist/Badge/index.js

@@ -17,34 +17,8 @@ export default function Badge(props) {
     className = props.className,
     onClick = props.onClick,
     rest = _objectWithoutProperties(props, _excluded);
-  var status2ColorMap = {
-    success: {
-      color: '#15803D',
-      backgroundColor: '#BBF7D0'
-    },
-    error: {
-      color: '#B91C1C',
-      backgroundColor: '#FECACA'
-    },
-    default: {
-      color: '#374151',
-      backgroundColor: '#E5E7EB'
-    },
-    info: {
-      color: '#0F59B1',
-      backgroundColor: '#A9CFFB'
-    },
-    warning: {
-      color: '#A16207',
-      backgroundColor: '#FEF08A'
-    }
-  };
   return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
-    className: classNames('ald-badge', (_classNames = {}, _defineProperty(_classNames, 'ald-badge-large', size === 'large'), _defineProperty(_classNames, 'ald-badge-clickable', typeof onClick === 'function'), _classNames), className),
-    style: {
-      color: status2ColorMap[status].color,
-      backgroundColor: status2ColorMap[status].backgroundColor
-    },
+    className: classNames('ald-badge', (_classNames = {}, _defineProperty(_classNames, 'ald-badge-large', size === 'large'), _defineProperty(_classNames, 'ald-badge-clickable', typeof onClick === 'function'), _defineProperty(_classNames, "ald-badge-".concat(status), status), _classNames), className),
     onClick: onClick
   }), count);
 }

package/dist/Badge/style/index.less

@@ -2,7 +2,7 @@
 
 .ald-badge {
   display: inline-flex;
-  padding: var(--alias-padding-25, 2px) var(--alias-padding-75, 6px);
+  padding: var(--alias-padding-25) var(--alias-padding-75);
   align-items: center;
   min-width: 20px;
   height: 20px;
@@ -10,6 +10,7 @@
   font-size: 12px;
   line-height: 16px;
   font-weight: 500;
+  cursor: default;
 
   &.ald-badge-large {
     font-size: 14px;
@@ -21,4 +22,29 @@
   &.ald-badge-clickable {
     cursor: pointer;
   }
+
+  &.ald-badge-success {
+    color: var(--content-inverted-primary);
+    background-color: var(--background-positive-strong);
+  }
+
+  &.ald-badge-error {
+    color: var(--content-inverted-primary);
+    background-color: var(--background-negative-strong);
+  }
+
+  &.ald-badge-default {
+    color: var(--content-inverted-primary);
+    background-color: var(--background-neutral-strong);
+  }
+
+  &.ald-badge-info {
+    color: var(--content-inverted-primary);
+    background-color: var(--background-informative-strong);
+  }
+
+  &.ald-badge-warning {
+    color: var(--content-primary);
+    background-color: var(--background-warning-strong);
+  }
 }

package/dist/Button/style/index.less

@@ -10,6 +10,7 @@
 
 .ald-loading-spin {
   animation: spin 1s linear infinite;
+  flex-shrink: 0;
 }
 
 @keyframes spin {

package/dist/Button/style/type.less

@@ -18,7 +18,7 @@
       text-decoration: none;
 
       .ald-icon {
-        color: #fff;
+        color: var(--alias-colors-text-inverse-strong);
       }
 
       /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
@@ -133,7 +133,7 @@
       box-shadow: none;
 
       .ald-icon {
-        color: #6b7280;
+        color: var(--alias-colors-icon-subtle);
       }
 
       &:focus {
@@ -182,7 +182,7 @@
       box-shadow: none;
 
       .ald-icon {
-        color: #6b7280;
+        color: var(--content-secondary);
       }
 
       &:focus {
@@ -198,7 +198,7 @@
         border-color: @button-text-border-color-hover;
 
         .ald-icon {
-          color: #2986f4;
+          color: var(--alias-colors-text-brand);
         }
       }
 
@@ -209,7 +209,7 @@
         box-shadow: none;
 
         .ald-icon {
-          color: #2986f4;
+          color: var(--alias-colors-text-brand);
         }
       }