@aloudata/aloudata-design 2.10.6 → 2.11.0

package/dist/Dropdown/index.d.ts

@@ -1,4 +1,4 @@
-import { OffsetOptions } from '@floating-ui/react';
+import { OffsetOptions, UseHoverProps } from '@floating-ui/react';
 import React from 'react';
 import { MenuProps } from '../Menu';
 import './style/index.less';
@@ -67,5 +67,6 @@ export interface IDropdownProps {
      * @default false
      */
     disabled?: boolean;
+    delay?: UseHoverProps['delay'];
 }
 export default function Dropdown(props: IDropdownProps): React.JSX.Element;

package/dist/Dropdown/index.js

@@ -37,7 +37,9 @@ export default function Dropdown(props) {
     dropdownRender = props.dropdownRender,
     disabled = props.disabled,
     _props$offset = props.offset,
-    offsetProps = _props$offset === void 0 ? 4 : _props$offset;
+    offsetProps = _props$offset === void 0 ? 4 : _props$offset,
+    _props$delay = props.delay,
+    delay = _props$delay === void 0 ? 0 : _props$delay;
   var _useState = useState(open || false),
     _useState2 = _slicedToArray(_useState, 2),
     isOpen = _useState2[0],
@@ -69,7 +71,8 @@ export default function Dropdown(props) {
   var click = useClick(context);
   var hover = useHover(context, {
     enabled: trigger === 'hover',
-    handleClose: safePolygon({})
+    handleClose: safePolygon({}),
+    delay: delay
   });
   var dismiss = useDismiss(context);
   var role = useRole(context);

package/dist/List/Item.d.ts

@@ -0,0 +1,31 @@
+import React, { CSSProperties, FC, HTMLAttributes, ReactNode } from 'react';
+export interface ListItemProps extends Omit<HTMLAttributes<HTMLDivElement>, 'prefix'> {
+    className?: string;
+    classNames?: {
+        actions?: string;
+        prefix?: string;
+    };
+    children?: ReactNode;
+    style?: CSSProperties;
+    styles?: {
+        actions?: CSSProperties;
+        prefix?: CSSProperties;
+    };
+    actions?: ReactNode[];
+    prefix?: ReactNode;
+}
+export interface ListItemMetaProps {
+    avatar?: ReactNode;
+    className?: string;
+    children?: ReactNode;
+    description?: ReactNode;
+    style?: CSSProperties;
+    title?: ReactNode;
+}
+export declare const Meta: FC<ListItemMetaProps>;
+declare const InternalItem: React.ForwardRefExoticComponent<ListItemProps & React.RefAttributes<HTMLDivElement>>;
+export type ListItemTypeProps = typeof InternalItem & {
+    Meta: typeof Meta;
+};
+declare const Item: ListItemTypeProps;
+export default Item;

package/dist/List/Item.js

@@ -0,0 +1,75 @@
+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 = ["className", "avatar", "title", "description"],
+  _excluded2 = ["children", "actions", "styles", "className", "prefix", "classNames"];
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+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 classnames from 'classnames';
+import React from 'react';
+export var Meta = function Meta(_ref) {
+  var className = _ref.className,
+    avatar = _ref.avatar,
+    title = _ref.title,
+    description = _ref.description,
+    others = _objectWithoutProperties(_ref, _excluded);
+  var prefixCls = 'ald-list';
+  var classString = classnames("".concat(prefixCls, "-item-meta"), className);
+  var content = /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-item-meta-content")
+  }, title && /*#__PURE__*/React.createElement("div", {
+    className: classnames("".concat(prefixCls, "-item-meta-content-title"), _defineProperty({}, "".concat(prefixCls, "-item-meta-content-title-no-description"), !description))
+  }, title), description && /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-item-meta-content-description"),
+    title: typeof description === 'string' ? description : ''
+  }, description));
+  return /*#__PURE__*/React.createElement("div", _extends({}, others, {
+    className: classString
+  }), avatar && /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-item-meta-avatar")
+  }, avatar), (title || description) && content);
+};
+var InternalItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var children = props.children,
+    actions = props.actions,
+    styles = props.styles,
+    className = props.className,
+    prefix = props.prefix,
+    customizeClassNames = props.classNames,
+    others = _objectWithoutProperties(props, _excluded2);
+  var moduleClass = function moduleClass(moduleName) {
+    return classnames(customizeClassNames === null || customizeClassNames === void 0 ? void 0 : customizeClassNames[moduleName]);
+  };
+  var moduleStyle = function moduleStyle(moduleName) {
+    return _objectSpread({}, styles === null || styles === void 0 ? void 0 : styles[moduleName]);
+  };
+  var prefixCls = 'ald-list';
+  var actionsContent = actions && actions.length > 0 && /*#__PURE__*/React.createElement("div", {
+    className: classnames("".concat(prefixCls, "-item-action"), moduleClass('actions')),
+    key: "actions",
+    style: moduleStyle('actions')
+  }, actions.map(function (action, i) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: "".concat(prefixCls, "-item-action-").concat(i)
+    }, action, i !== actions.length - 1 && /*#__PURE__*/React.createElement("em", {
+      className: "".concat(prefixCls, "-item-action-split")
+    }));
+  }));
+  var prefixContent = prefix && /*#__PURE__*/React.createElement("div", {
+    className: classnames("".concat(prefixCls, "-item-prefix"), moduleClass('prefix')),
+    style: moduleStyle('prefix'),
+    key: "prefix"
+  }, prefix);
+  var itemChildren = /*#__PURE__*/React.createElement("div", _extends({}, others, {
+    ref: ref,
+    className: classnames("".concat(prefixCls, "-item"), className)
+  }), [prefixContent, children, actionsContent]);
+  return itemChildren;
+});
+var Item = InternalItem;
+Item.Meta = Meta;
+export default Item;

package/dist/List/index.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+declare function List<T>(props: ListProps<T>): React.JSX.Element;
+declare namespace List {
+    var Item: import("./Item").ListItemTypeProps;
+}
+export default List;
+export interface ListProps<T> {
+    size?: 'default' | 'small';
+    rowKey?: ((item: T) => React.Key) | keyof T;
+    renderItem?: (item: T, index: number) => React.ReactNode;
+    className?: string;
+    dataSource?: T[];
+    children?: React.ReactNode;
+    loading?: boolean;
+    dividerGap?: number;
+    virtual?: boolean;
+    itemHeight?: number | ((item: T) => number);
+}

package/dist/List/index.js

@@ -0,0 +1,135 @@
+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); }
+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); }
+import { useVirtualizer } from '@tanstack/react-virtual';
+import classNames from 'classnames';
+import React from 'react';
+import ScrollArea from "../ScrollArea";
+import Spin from "../Spin";
+import Item from "./Item";
+function List(props) {
+  var _props$dataSource = props.dataSource,
+    dataSource = _props$dataSource === void 0 ? [] : _props$dataSource,
+    renderItem = props.renderItem,
+    bordered = props.bordered,
+    customizeSize = props.size,
+    rowKey = props.rowKey,
+    children = props.children,
+    className = props.className,
+    _props$dividerGap = props.dividerGap,
+    dividerGap = _props$dividerGap === void 0 ? 0 : _props$dividerGap,
+    _props$loading = props.loading,
+    loading = _props$loading === void 0 ? false : _props$loading,
+    virtual = props.virtual,
+    _props$itemHeight = props.itemHeight,
+    itemHeight = _props$itemHeight === void 0 ? 50 : _props$itemHeight;
+  var parentRef = React.useRef(null);
+  var measureElement = function measureElement(element) {
+    return element.offsetHeight;
+  };
+  var rowVirtualizer = useVirtualizer({
+    count: dividerGap === 0 ? dataSource.length : dataSource.length * 2 - 1,
+    getScrollElement: function getScrollElement() {
+      return parentRef.current;
+    },
+    estimateSize: function estimateSize(index) {
+      if (dividerGap === 0) {
+        return typeof itemHeight === 'function' ? itemHeight(dataSource[index]) : itemHeight;
+      }
+      if (index % 2 === 0) {
+        return typeof itemHeight === 'function' ? itemHeight(dataSource[Math.floor(index / 2)]) : itemHeight;
+      }
+      return 1;
+    },
+    measureElement: measureElement,
+    gap: dividerGap
+  });
+  function getKey(currentItem, currentIndex) {
+    var key;
+    if (typeof rowKey === 'function') {
+      key = rowKey(currentItem);
+    } else if (rowKey) {
+      key = currentItem[rowKey];
+    } else {
+      key = currentItem.key;
+    }
+    if (!key) {
+      key = "list-item-".concat(currentIndex);
+    }
+    return key;
+  }
+  var size = customizeSize || 'default';
+  var customizeClassNames = classNames('ald-list', _defineProperty({
+    'ald-list-bordered': bordered
+  }, "ald-list-".concat(size), size), className);
+  if (virtual) {
+    var renderInnerItem = function renderInnerItem(index) {
+      if (!renderItem) return null;
+      if (dividerGap === 0) {
+        var _item = dataSource[index];
+        return /*#__PURE__*/React.createElement(React.Fragment, {
+          key: getKey(_item, index)
+        }, renderItem(_item, index));
+      } else {
+        var isDivider = index % 2 === 1;
+        if (isDivider) {
+          return /*#__PURE__*/React.createElement("div", {
+            className: "ald-list-divider",
+            key: "divider-".concat(index)
+          });
+        } else {
+          var itemIndex = Math.floor(index / 2);
+          var _item2 = dataSource[itemIndex];
+          return /*#__PURE__*/React.createElement(React.Fragment, {
+            key: getKey(_item2, itemIndex)
+          }, renderItem(_item2, itemIndex));
+        }
+      }
+    };
+    return /*#__PURE__*/React.createElement(ScrollArea, {
+      ref: parentRef,
+      asChild: true,
+      className: "ald-list-virtual",
+      innerClassName: customizeClassNames
+    }, /*#__PURE__*/React.createElement(Spin, {
+      spinning: loading,
+      wrapperClassName: "ald-list-item-wrap",
+      style: {
+        rowGap: dividerGap,
+        height: "".concat(rowVirtualizer.getTotalSize(), "px")
+      }
+    }, /*#__PURE__*/React.createElement(React.Fragment, null, rowVirtualizer.getVirtualItems().map(function (virtualItem) {
+      var index = virtualItem.index;
+      return /*#__PURE__*/React.createElement("div", {
+        key: virtualItem.key,
+        style: {
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          width: '100%',
+          height: "".concat(virtualItem.size, "px"),
+          transform: "translateY(".concat(virtualItem.start, "px)")
+        }
+      }, renderInnerItem(index));
+    }), children)));
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    ref: parentRef,
+    className: customizeClassNames
+  }, /*#__PURE__*/React.createElement(Spin, {
+    spinning: loading,
+    wrapperClassName: "ald-list-item-wrap",
+    style: {
+      rowGap: dividerGap
+    }
+  }, /*#__PURE__*/React.createElement(React.Fragment, null, dataSource.map(function (item, index) {
+    return /*#__PURE__*/React.createElement(React.Fragment, {
+      key: getKey(item, index)
+    }, renderItem ? renderItem(item, index) : null, index !== dataSource.length - 1 && dividerGap > 0 && /*#__PURE__*/React.createElement("div", {
+      className: "ald-list-divider"
+    }));
+  }), children)));
+}
+List.Item = Item;
+export default List;

package/dist/List/style/index.d.ts

@@ -0,0 +1,2 @@
+import '../../style';
+import './index.less';

package/dist/List/style/index.js

@@ -0,0 +1,2 @@
+import "../../style";
+import "./index.less";

package/dist/List/style/index.less

@@ -0,0 +1,120 @@
+@import '../../style/index.less';
+@import '../../Spin/style/index.less';
+@import '../../ScrollArea/style/index.less';
+
+.ald-list-virtual {
+  .ald-list {
+    height: 100%;
+    display: block !important;
+  }
+}
+
+.ald-list {
+  font-size: 14px;
+
+  &-item {
+    display: flex;
+    padding: var(--alias-padding-75, 6px) var(--alias-padding-100, 8px);
+    align-items: center;
+    border-radius: var(--alias-radius-75, 6px);
+    gap: var(--alias-spacing-75, 6px);
+
+    &-prefix {
+      display: flex;
+      align-items: flex-start;
+      align-self: stretch;
+      justify-content: center;
+      padding: 2px;
+    }
+
+    &-meta {
+      flex: 1;
+      min-width: 0;
+      display: flex;
+      gap: var(--alias-spacing-75, 6px);
+      align-items: center;
+
+      &-avatar {
+        display: flex;
+        align-self: stretch;
+        align-items: flex-start;
+        justify-content: center;
+        overflow: hidden;
+        flex: none;
+      }
+
+      &-content {
+        min-width: 0;
+        display: flex;
+        flex-direction: column;
+        gap: var(--alias-spacing-50, 4px);
+        align-items: flex-start;
+        justify-content: stretch;
+
+        &-title {
+          font-size: 14px;
+          font-weight: 500;
+          line-height: 20px;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+          max-width: 100%;
+
+          &-no-description {
+            font-weight: 400;
+          }
+        }
+
+        &-description {
+          font-size: 12px;
+          font-weight: 400;
+          line-height: 16px;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+          max-width: 100%;
+          color: var(--alias-colors-text-subtlest, #9ca3af);
+        }
+      }
+    }
+
+    &-action {
+      display: flex;
+      gap: var(--alias-spacing-100, 8px);
+      align-items: center;
+    }
+  }
+
+  &-divider {
+    height: 1px;
+    background-color: var(--alias-colors-border-subtle, #f3f4f6);
+  }
+
+  .ald-list-item-wrap {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+  }
+}
+
+.ald-list-small {
+  .ald-list-item {
+    gap: var(--alias-spacing-75, 6px);
+
+    &-meta {
+      gap: var(--alias-spacing-75, 6px);
+
+      &-avatar {
+        padding: 2px 0;
+      }
+
+      &-content {
+        gap: var(--alias-spacing-25, 2px);
+
+        &-title {
+          font-size: 12px;
+        }
+      }
+    }
+  }
+}

package/dist/ScrollArea/index.js

@@ -1,4 +1,4 @@
-var _excluded = ["children", "className", "innerClassName", "horizontalScrollBarClassName", "verticalScrollBarClassName", "onViewportScroll", "contentDeterminesWidth", "scrollBarHidden"];
+var _excluded = ["children", "className", "innerClassName", "horizontalScrollBarClassName", "verticalScrollBarClassName", "onViewportScroll", "contentDeterminesWidth", "scrollBarHidden", "asChild"];
 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 _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; }
@@ -14,6 +14,7 @@ var ScrollArea = function ScrollArea(props, ref) {
     onViewportScroll = props.onViewportScroll,
     contentDeterminesWidth = props.contentDeterminesWidth,
     scrollBarHidden = props.scrollBarHidden,
+    asChild = props.asChild,
     rest = _objectWithoutProperties(props, _excluded);
   var isHorizontalScrollBarHidden = scrollBarHidden === null || scrollBarHidden === void 0 ? void 0 : scrollBarHidden.includes('horizontal');
   var isVerticalScrollBarHidden = scrollBarHidden === null || scrollBarHidden === void 0 ? void 0 : scrollBarHidden.includes('vertical');
@@ -21,6 +22,7 @@ var ScrollArea = function ScrollArea(props, ref) {
     scrollHideDelay: 50,
     className: classNames('ald-scroll-area', className)
   }), /*#__PURE__*/React.createElement(ScrollAreaComponent.Viewport, {
+    asChild: asChild,
     className: classNames('ald-scroll-area-inner', {
       'ald-scroll-area-width-auto': !contentDeterminesWidth
     }, innerClassName),

package/dist/Spin/index.d.ts

@@ -8,6 +8,7 @@ export interface SpinProps {
     spinning?: boolean;
     wrapperClassName?: string;
     className?: string;
+    style?: React.CSSProperties;
 }
 declare function CustomSpin(props: SpinProps): React.JSX.Element | null;
 export default CustomSpin;

package/dist/Spin/index.js

@@ -16,7 +16,8 @@ function CustomSpin(props) {
     children = props.children,
     spinning = props.spinning,
     wrapperClassName = props.wrapperClassName,
-    className = props.className;
+    className = props.className,
+    style = props.style;
   if (!children) {
     return CustomIcon({
       size: size,
@@ -31,9 +32,9 @@ function CustomSpin(props) {
   }
   if (isFragment(children) || isReactComponent(children)) {
     return /*#__PURE__*/React.createElement('div', {
-      style: {
+      style: _objectSpread(_objectSpread({}, style), {}, {
         position: 'relative'
-      },
+      }),
       className: classNames(wrapperClassName)
     }, [children, CustomIcon({
       size: size,