@lobehub/ui 1.128.5 → 1.128.7

package/README.md

@@ -63,7 +63,7 @@ $ bun add @lobehub/ui
 ### Compile with NextJS
 
 > \[!NOTE]\
-> By work correct with nextjs ssr, add `transpilePackages: ['@lobehub/ui']` to `next.config.js`. For example:
+> By work correct with nextjs page router SSR, add `transpilePackages: ['@lobehub/ui']` to `next.config.js`. For example:
 
 ```js
 // next.config.js

package/es/DraggablePanel/index.js

@@ -3,9 +3,10 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { useHover } from 'ahooks';
+import { ConfigProvider } from 'antd';
 import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp } from 'lucide-react';
 import { Resizable } from 're-resizable';
-import { memo, useEffect, useMemo, useRef, useState } from 'react';
+import { memo, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { Center } from 'react-layout-kit';
 import useControlledState from 'use-merge-value';
 import { useStyles } from "./style";
@@ -46,10 +47,21 @@ var DraggablePanel = /*#__PURE__*/memo(function (_ref) {
     destroyOnClose = _ref.destroyOnClose,
     hanlderStyle = _ref.hanlderStyle,
     _ref$classNames = _ref.classNames,
-    classNames = _ref$classNames === void 0 ? {} : _ref$classNames;
+    classNames = _ref$classNames === void 0 ? {} : _ref$classNames,
+    dir = _ref.dir;
   var reference = useRef();
   var isHovering = useHover(reference);
   var isVertical = placement === 'top' || placement === 'bottom';
+
+  // inherit direction from Ant Design ConfigProvider
+  var _useContext = useContext(ConfigProvider.ConfigContext),
+    antdDirection = _useContext.direction;
+  var direction = dir !== null && dir !== void 0 ? dir : antdDirection;
+  var internalPlacement = placement;
+  // reverse the placement when dir is rtl
+  if (direction === 'rtl' && ['left', 'right'].includes(placement)) {
+    internalPlacement = internalPlacement === 'left' ? 'right' : 'left';
+  }
   var _useStyles = useStyles(headerHeight),
     styles = _useStyles.styles,
     cx = _useStyles.cx;
@@ -79,8 +91,8 @@ var DraggablePanel = /*#__PURE__*/memo(function (_ref) {
   var canResizing = resize !== false && isExpand;
   var resizeHandleClassNames = useMemo(function () {
     if (!canResizing) return {};
-    return _defineProperty({}, revesePlacement(placement), styles["".concat(revesePlacement(placement), "Handle")]);
-  }, [canResizing, placement]);
+    return _defineProperty({}, revesePlacement(internalPlacement), styles["".concat(revesePlacement(internalPlacement), "Handle")]);
+  }, [canResizing, internalPlacement]);
   var resizing = _objectSpread(_defineProperty({
     bottom: false,
     bottomLeft: false,
@@ -90,7 +102,7 @@ var DraggablePanel = /*#__PURE__*/memo(function (_ref) {
     top: false,
     topLeft: false,
     topRight: false
-  }, revesePlacement(placement), true), resize);
+  }, revesePlacement(internalPlacement), true), resize);
   var defaultSize = useMemo(function () {
     if (isVertical) return _objectSpread({
       height: DEFAULT_HEIGHT,
@@ -120,7 +132,7 @@ var DraggablePanel = /*#__PURE__*/memo(function (_ref) {
     }
   };
   var _useMemo = useMemo(function () {
-      switch (placement) {
+      switch (internalPlacement) {
         case 'top':
           {
             return {
@@ -150,7 +162,7 @@ var DraggablePanel = /*#__PURE__*/memo(function (_ref) {
             };
           }
       }
-    }, [styles, placement]),
+    }, [styles, internalPlacement]),
     Arrow = _useMemo.Arrow,
     arrowPlacement = _useMemo.className;
   var handler = /*#__PURE__*/_jsx(Center
@@ -214,7 +226,8 @@ var DraggablePanel = /*#__PURE__*/memo(function (_ref) {
   return /*#__PURE__*/_jsxs("aside", {
     className: cx(styles.container,
     // @ts-ignore
-    styles[mode === 'fixed' ? 'fixed' : "".concat(placement, "Float")], className),
+    styles[mode === 'fixed' ? 'fixed' : "".concat(internalPlacement, "Float")], className),
+    dir: dir,
     ref: reference,
     style: isExpand ? _defineProperty({}, "border".concat(arrowPlacement, "Width"), 1) : {},
     children: [expandable && showExpand && handler, destroyOnClose ? isExpand && inner : inner]

package/es/Form/components/FormGroup.d.ts

@@ -16,7 +16,7 @@ export interface FormGroupProps extends CollapseProps {
     children: ReactNode;
     defaultActive?: boolean;
     extra?: ReactNode;
-    icon?: IconProps['icon'];
+    icon?: IconProps['icon'] | ReactNode;
     itemsType?: ItemsType;
     title?: string;
     variant?: FormVariant;

package/es/Form/components/FormGroup.js

@@ -56,9 +56,9 @@ var FormGroup = /*#__PURE__*/memo(function (_ref2) {
     className: styles.title,
     gap: 8,
     horizontal: true,
-    children: [icon && /*#__PURE__*/_jsx(Icon, {
+    children: [icon && typeof icon === 'function' ? /*#__PURE__*/_jsx(Icon, {
       icon: icon
-    }), title]
+    }) : icon, title]
   });
   if (itemsType === 'flat') {
     if (mobile) return /*#__PURE__*/_jsx(Flexbox, {

package/es/SearchBar/style.js

@@ -10,6 +10,6 @@ export var useStyles = createStyles(function (_ref) {
     icon: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    color: ", ";\n  "])), token.colorTextPlaceholder),
     input: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    position: relative;\n    padding: 0 8px 0 12px;\n  "]))),
     search: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    position: relative;\n    max-width: 100%;\n  "]))),
-    tag: cx(stylish.blur, css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      pointer-events: none;\n\n      position: absolute;\n      z-index: 5;\n      top: 50%;\n      right: 0;\n      transform: translateY(-50%);\n\n      color: ", ";\n    "])), token.colorTextDescription))
+    tag: cx(stylish.blur, css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      pointer-events: none;\n\n      position: absolute;\n      z-index: 5;\n      inset-block-start: 50%;\n      inset-inline-end: 12px;\n      transform: translateY(-50%);\n\n      color: ", ";\n    "])), token.colorTextDescription))
   };
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/ui",
-  "version": "1.128.5",
+  "version": "1.128.7",
   "description": "Lobe UI is an open-source UI component library for building AIGC web apps",
   "keywords": [
     "lobehub",