@996-design/996-components 1.0.0

package/lib/typography/Base/index.js

@@ -0,0 +1,445 @@
+"use strict";
+"use client";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var React = _interopRequireWildcard(require("react"));
+var _EditOutlined = _interopRequireDefault(require("@996-design/996-icons/EditOutlined"));
+var _resizeObserver = _interopRequireDefault(require("@rc-component/resize-observer"));
+var _util = require("@rc-component/util");
+var _clsx3 = require("clsx");
+var _is = require("../../_util/is");
+var _styleChecker = require("../../_util/styleChecker");
+var _useLocale3 = _interopRequireDefault(require("../../locale/useLocale"));
+var _tooltip = _interopRequireDefault(require("../../tooltip"));
+var _Editable = _interopRequireDefault(require("../Editable"));
+var _useCopyClick2 = _interopRequireDefault(require("../hooks/useCopyClick"));
+var _useMergedConfig7 = _interopRequireDefault(require("../hooks/useMergedConfig"));
+var _usePrevious = _interopRequireDefault(require("../hooks/usePrevious"));
+var _useTooltipProps = _interopRequireDefault(require("../hooks/useTooltipProps"));
+var _useTypographySemantic = require("../hooks/useTypographySemantic");
+var _Typography = require("../Typography");
+var _CopyBtn = _interopRequireDefault(require("./CopyBtn"));
+var _Ellipsis = _interopRequireDefault(require("./Ellipsis"));
+var _EllipsisTooltip = _interopRequireDefault(require("./EllipsisTooltip"));
+var _util2 = require("./util");
+var _excluded = ["prefixCls", "className", "style", "classNames", "styles", "direction", "type", "disabled", "children", "ellipsis", "editable", "copyable", "actions", "component", "title", "onMouseEnter", "onMouseLeave"];
+function wrapperDecorations(_ref, content) {
+  var mark = _ref.mark,
+    code = _ref.code,
+    underline = _ref.underline,
+    del = _ref.delete,
+    strong = _ref.strong,
+    keyboard = _ref.keyboard,
+    italic = _ref.italic;
+  var currentContent = content;
+  function wrap(tag, needed) {
+    if (!needed) {
+      return;
+    }
+    currentContent = /*#__PURE__*/React.createElement(tag, {}, currentContent);
+  }
+  wrap('strong', strong);
+  wrap('u', underline);
+  wrap('del', del);
+  wrap('code', code);
+  wrap('mark', mark);
+  wrap('kbd', keyboard);
+  wrap('i', italic);
+  return currentContent;
+}
+var ELLIPSIS_STR = '...';
+var DECORATION_PROPS = ['delete', 'mark', 'code', 'underline', 'strong', 'keyboard', 'italic'];
+var Base = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var customizePrefixCls = props.prefixCls,
+    className = props.className,
+    style = props.style,
+    classNames = props.classNames,
+    styles = props.styles,
+    typographyDirection = props.direction,
+    type = props.type,
+    disabled = props.disabled,
+    children = props.children,
+    ellipsis = props.ellipsis,
+    editable = props.editable,
+    copyable = props.copyable,
+    actions = props.actions,
+    component = props.component,
+    title = props.title,
+    _onMouseEnter = props.onMouseEnter,
+    _onMouseLeave = props.onMouseLeave,
+    restProps = (0, _objectWithoutProperties2.default)(props, _excluded);
+  var _useLocale = (0, _useLocale3.default)('Text'),
+    _useLocale2 = (0, _slicedToArray2.default)(_useLocale, 1),
+    textLocale = _useLocale2[0];
+  var typographyRef = React.useRef(null);
+  var editIconRef = React.useRef(null);
+  var _useTypographySemanti = (0, _useTypographySemantic.useTypographySemantic)(customizePrefixCls, classNames, styles, typographyDirection, props),
+    _useTypographySemanti2 = (0, _slicedToArray2.default)(_useTypographySemanti, 4),
+    mergedClassNames = _useTypographySemanti2[0],
+    mergedStyles = _useTypographySemanti2[1],
+    prefixCls = _useTypographySemanti2[2],
+    direction = _useTypographySemanti2[3];
+  var textProps = (0, _util.omit)(restProps, DECORATION_PROPS);
+  // ========================== Editable ==========================
+  var _useMergedConfig = (0, _useMergedConfig7.default)(editable),
+    _useMergedConfig2 = (0, _slicedToArray2.default)(_useMergedConfig, 2),
+    enableEdit = _useMergedConfig2[0],
+    editConfig = _useMergedConfig2[1];
+  var _useControlledState = (0, _util.useControlledState)(false, editConfig.editing),
+    _useControlledState2 = (0, _slicedToArray2.default)(_useControlledState, 2),
+    editing = _useControlledState2[0],
+    setEditing = _useControlledState2[1];
+  var _editConfig$triggerTy = editConfig.triggerType,
+    triggerType = _editConfig$triggerTy === void 0 ? ['icon'] : _editConfig$triggerTy;
+  var triggerEdit = function triggerEdit(edit) {
+    if (edit) {
+      var _editConfig$onStart;
+      (_editConfig$onStart = editConfig.onStart) === null || _editConfig$onStart === void 0 || _editConfig$onStart.call(editConfig);
+    }
+    setEditing(edit);
+  };
+  // Focus edit icon when back
+  var prevEditing = (0, _usePrevious.default)(editing);
+  (0, _util.useLayoutEffect)(function () {
+    if (!editing && prevEditing) {
+      var _editIconRef$current;
+      (_editIconRef$current = editIconRef.current) === null || _editIconRef$current === void 0 || _editIconRef$current.focus();
+    }
+  }, [editing]);
+  var onEditClick = function onEditClick(e) {
+    e === null || e === void 0 || e.preventDefault();
+    triggerEdit(true);
+  };
+  var onEditChange = function onEditChange(value) {
+    var _editConfig$onChange;
+    (_editConfig$onChange = editConfig.onChange) === null || _editConfig$onChange === void 0 || _editConfig$onChange.call(editConfig, value);
+    triggerEdit(false);
+  };
+  var onEditCancel = function onEditCancel() {
+    var _editConfig$onCancel;
+    (_editConfig$onCancel = editConfig.onCancel) === null || _editConfig$onCancel === void 0 || _editConfig$onCancel.call(editConfig);
+    triggerEdit(false);
+  };
+  // ========================== Copyable ==========================
+  var _useMergedConfig3 = (0, _useMergedConfig7.default)(copyable),
+    _useMergedConfig4 = (0, _slicedToArray2.default)(_useMergedConfig3, 2),
+    enableCopy = _useMergedConfig4[0],
+    copyConfig = _useMergedConfig4[1];
+  var _ref2 = actions !== null && actions !== void 0 ? actions : {},
+    _ref2$placement = _ref2.placement,
+    placement = _ref2$placement === void 0 ? 'end' : _ref2$placement;
+  var _useCopyClick = (0, _useCopyClick2.default)({
+      copyConfig: copyConfig,
+      children: children
+    }),
+    copied = _useCopyClick.copied,
+    copyLoading = _useCopyClick.copyLoading,
+    onCopyClick = _useCopyClick.onClick;
+  // ========================== Ellipsis ==========================
+  var _React$useState = React.useState(false),
+    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+    isLineClampSupport = _React$useState2[0],
+    setIsLineClampSupport = _React$useState2[1];
+  var _React$useState3 = React.useState(false),
+    _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
+    isTextOverflowSupport = _React$useState4[0],
+    setIsTextOverflowSupport = _React$useState4[1];
+  var _React$useState5 = React.useState(false),
+    _React$useState6 = (0, _slicedToArray2.default)(_React$useState5, 2),
+    isJsEllipsis = _React$useState6[0],
+    setIsJsEllipsis = _React$useState6[1];
+  var _React$useState7 = React.useState(false),
+    _React$useState8 = (0, _slicedToArray2.default)(_React$useState7, 2),
+    isNativeEllipsis = _React$useState8[0],
+    setIsNativeEllipsis = _React$useState8[1];
+  var _React$useState9 = React.useState(true),
+    _React$useState0 = (0, _slicedToArray2.default)(_React$useState9, 2),
+    isNativeVisible = _React$useState0[0],
+    setIsNativeVisible = _React$useState0[1];
+  var _useMergedConfig5 = (0, _useMergedConfig7.default)(ellipsis, {
+      expandable: false,
+      symbol: function symbol(isExpanded) {
+        return isExpanded ? textLocale === null || textLocale === void 0 ? void 0 : textLocale.collapse : textLocale === null || textLocale === void 0 ? void 0 : textLocale.expand;
+      }
+    }),
+    _useMergedConfig6 = (0, _slicedToArray2.default)(_useMergedConfig5, 2),
+    enableEllipsis = _useMergedConfig6[0],
+    ellipsisConfig = _useMergedConfig6[1];
+  var _useControlledState3 = (0, _util.useControlledState)(ellipsisConfig.defaultExpanded || false, ellipsisConfig.expanded),
+    _useControlledState4 = (0, _slicedToArray2.default)(_useControlledState3, 2),
+    expanded = _useControlledState4[0],
+    setExpanded = _useControlledState4[1];
+  var mergedEnableEllipsis = enableEllipsis && (!expanded || ellipsisConfig.expandable === 'collapsible');
+  // Shared prop to reduce bundle size
+  var _ellipsisConfig$rows = ellipsisConfig.rows,
+    rows = _ellipsisConfig$rows === void 0 ? 1 : _ellipsisConfig$rows;
+  var needMeasureEllipsis = React.useMemo(function () {
+    return (
+      // Disable ellipsis
+      mergedEnableEllipsis && (
+      // Provide suffix
+      ellipsisConfig.suffix !== undefined || ellipsisConfig.onEllipsis ||
+      // Can't use css ellipsis since we need to provide the place for button
+      ellipsisConfig.expandable || enableEdit || enableCopy)
+    );
+  }, [mergedEnableEllipsis, ellipsisConfig, enableEdit, enableCopy]);
+  (0, _util.useLayoutEffect)(function () {
+    if (enableEllipsis && !needMeasureEllipsis) {
+      setIsLineClampSupport((0, _styleChecker.isStyleSupport)('webkitLineClamp'));
+      setIsTextOverflowSupport((0, _styleChecker.isStyleSupport)('textOverflow'));
+    }
+  }, [needMeasureEllipsis, enableEllipsis]);
+  var _React$useState1 = React.useState(mergedEnableEllipsis),
+    _React$useState10 = (0, _slicedToArray2.default)(_React$useState1, 2),
+    cssEllipsis = _React$useState10[0],
+    setCssEllipsis = _React$useState10[1];
+  var canUseCssEllipsis = React.useMemo(function () {
+    if (needMeasureEllipsis) {
+      return false;
+    }
+    if (rows === 1) {
+      return isTextOverflowSupport;
+    }
+    return isLineClampSupport;
+  }, [needMeasureEllipsis, rows, isLineClampSupport, isTextOverflowSupport]);
+  // We use effect to change from css ellipsis to js ellipsis.
+  // To make SSR still can see the ellipsis.
+  (0, _util.useLayoutEffect)(function () {
+    setCssEllipsis(canUseCssEllipsis && mergedEnableEllipsis);
+  }, [canUseCssEllipsis, mergedEnableEllipsis]);
+  var tooltipProps = (0, _useTooltipProps.default)(ellipsisConfig.tooltip, editConfig.text, children);
+  var needNativeEllipsisMeasure = cssEllipsis && !!tooltipProps.title;
+  var isMergedEllipsis = mergedEnableEllipsis && (cssEllipsis ? needNativeEllipsisMeasure && isNativeEllipsis : isJsEllipsis);
+  var cssTextOverflow = mergedEnableEllipsis && rows === 1 && cssEllipsis;
+  var cssLineClamp = mergedEnableEllipsis && rows > 1 && cssEllipsis;
+  // >>>>> Expand
+  var onExpandClick = function onExpandClick(e, info) {
+    var _ellipsisConfig$onExp;
+    setExpanded(info.expanded);
+    (_ellipsisConfig$onExp = ellipsisConfig.onExpand) === null || _ellipsisConfig$onExp === void 0 || _ellipsisConfig$onExp.call(ellipsisConfig, e, info);
+  };
+  var _React$useState11 = React.useState(0),
+    _React$useState12 = (0, _slicedToArray2.default)(_React$useState11, 2),
+    ellipsisWidth = _React$useState12[0],
+    setEllipsisWidth = _React$useState12[1];
+  var _React$useState13 = React.useState(false),
+    _React$useState14 = (0, _slicedToArray2.default)(_React$useState13, 2),
+    isHoveringOperations = _React$useState14[0],
+    setIsHoveringOperations = _React$useState14[1];
+  var _React$useState15 = React.useState(false),
+    _React$useState16 = (0, _slicedToArray2.default)(_React$useState15, 2),
+    isHoveringTypography = _React$useState16[0],
+    setIsHoveringTypography = _React$useState16[1];
+  var onResize = function onResize(_ref3) {
+    var offsetWidth = _ref3.offsetWidth;
+    setEllipsisWidth(offsetWidth);
+  };
+  // >>>>> JS Ellipsis
+  var onJsEllipsis = function onJsEllipsis(jsEllipsis) {
+    setIsJsEllipsis(jsEllipsis);
+    // Trigger if changed
+    if (isJsEllipsis !== jsEllipsis) {
+      var _ellipsisConfig$onEll;
+      (_ellipsisConfig$onEll = ellipsisConfig.onEllipsis) === null || _ellipsisConfig$onEll === void 0 || _ellipsisConfig$onEll.call(ellipsisConfig, jsEllipsis);
+    }
+  };
+  // >>>>> Native ellipsis
+  React.useEffect(function () {
+    var textEle = typographyRef.current;
+    if (enableEllipsis && needNativeEllipsisMeasure && textEle) {
+      var currentEllipsis = (0, _util2.isEleEllipsis)(textEle);
+      if (isNativeEllipsis !== currentEllipsis) {
+        setIsNativeEllipsis(currentEllipsis);
+      }
+    }
+  }, [enableEllipsis, needNativeEllipsisMeasure, children, cssLineClamp, isNativeVisible, ellipsisWidth]);
+  // https://github.com/ant-design/ant-design/issues/36786
+  // Use IntersectionObserver to check if element is invisible
+  React.useEffect(function () {
+    var textEle = typographyRef.current;
+    if (typeof IntersectionObserver === 'undefined' || !textEle || !needNativeEllipsisMeasure || !mergedEnableEllipsis) {
+      return;
+    }
+    var observer = new IntersectionObserver(function () {
+      setIsNativeVisible(!!textEle.offsetParent);
+    });
+    observer.observe(textEle);
+    return function () {
+      observer.disconnect();
+    };
+  }, [needNativeEllipsisMeasure, mergedEnableEllipsis]);
+  // ========================== Tooltip ===========================
+  var topAriaLabel = React.useMemo(function () {
+    if (!enableEllipsis || cssEllipsis) {
+      return undefined;
+    }
+    return [editConfig.text, children, title, tooltipProps.title].find(_util2.isValidText);
+  }, [enableEllipsis, cssEllipsis, title, tooltipProps.title, isMergedEllipsis, editConfig.text]);
+  // =========================== Render ===========================
+  // >>>>>>>>>>> Editing input
+  if (editing) {
+    var _editConfig$text;
+    return /*#__PURE__*/React.createElement(_Editable.default, {
+      value: (_editConfig$text = editConfig.text) !== null && _editConfig$text !== void 0 ? _editConfig$text : typeof children === 'string' ? children : '',
+      onSave: onEditChange,
+      onCancel: onEditCancel,
+      onEnd: editConfig.onEnd,
+      prefixCls: prefixCls,
+      className: className,
+      style: style,
+      direction: direction,
+      component: component,
+      maxLength: editConfig.maxLength,
+      autoSize: editConfig.autoSize,
+      enterIcon: editConfig.enterIcon,
+      classNames: mergedClassNames,
+      styles: mergedStyles
+    });
+  }
+  // >>>>>>>>>>> Typography
+  // Expand
+  var renderExpand = function renderExpand() {
+    var expandable = ellipsisConfig.expandable,
+      symbol = ellipsisConfig.symbol;
+    return expandable ? (/*#__PURE__*/React.createElement("button", {
+      type: "button",
+      key: "expand",
+      className: (0, _clsx3.clsx)("".concat(prefixCls, "-").concat(expanded ? 'collapse' : 'expand'), mergedClassNames.action),
+      style: mergedStyles.action,
+      onClick: function onClick(e) {
+        return onExpandClick(e, {
+          expanded: !expanded
+        });
+      },
+      "aria-label": expanded ? textLocale.collapse : textLocale === null || textLocale === void 0 ? void 0 : textLocale.expand
+    }, (0, _is.isFunction)(symbol) ? symbol(expanded) : symbol)) : null;
+  };
+  // Edit
+  var renderEdit = function renderEdit() {
+    if (!enableEdit) {
+      return;
+    }
+    var icon = editConfig.icon,
+      tooltip = editConfig.tooltip,
+      tabIndex = editConfig.tabIndex;
+    var editTitle = (0, _util.toArray)(tooltip)[0] || (textLocale === null || textLocale === void 0 ? void 0 : textLocale.edit);
+    var ariaLabel = typeof editTitle === 'string' ? editTitle : '';
+    return triggerType.includes('icon') ? (/*#__PURE__*/React.createElement(_tooltip.default, {
+      key: "edit",
+      title: tooltip === false ? '' : editTitle
+    }, /*#__PURE__*/React.createElement("button", {
+      type: "button",
+      ref: editIconRef,
+      className: (0, _clsx3.clsx)("".concat(prefixCls, "-edit"), mergedClassNames.action),
+      style: mergedStyles.action,
+      onClick: onEditClick,
+      "aria-label": ariaLabel,
+      tabIndex: tabIndex
+    }, icon || /*#__PURE__*/React.createElement(_EditOutlined.default, {
+      role: "button"
+    })))) : null;
+  };
+  // Copy
+  var renderCopy = function renderCopy() {
+    if (!enableCopy) {
+      return null;
+    }
+    return /*#__PURE__*/React.createElement(_CopyBtn.default, (0, _objectSpread2.default)((0, _objectSpread2.default)({
+      key: "copy"
+    }, copyConfig), {}, {
+      prefixCls: prefixCls,
+      copied: copied,
+      locale: textLocale,
+      onCopy: onCopyClick,
+      loading: copyLoading,
+      iconOnly: !(0, _is.isReactRenderable)(children),
+      className: mergedClassNames.action,
+      style: mergedStyles.action
+    }));
+  };
+  var renderOperations = function renderOperations(canEllipsis) {
+    var expandNode = canEllipsis && renderExpand();
+    var editNode = renderEdit();
+    var copyNode = renderCopy();
+    if (!expandNode && !editNode && !copyNode) {
+      return null;
+    }
+    return /*#__PURE__*/React.createElement("span", {
+      key: "operations",
+      className: (0, _clsx3.clsx)("".concat(prefixCls, "-actions"), mergedClassNames.actions, (0, _defineProperty2.default)({}, "".concat(prefixCls, "-actions-start"), placement === 'start')),
+      style: mergedStyles.actions,
+      onMouseEnter: function onMouseEnter() {
+        return setIsHoveringOperations(true);
+      },
+      onMouseLeave: function onMouseLeave() {
+        return setIsHoveringOperations(false);
+      }
+    }, expandNode, editNode, copyNode);
+  };
+  var renderEllipsis = function renderEllipsis(canEllipsis) {
+    return [canEllipsis && !expanded && (/*#__PURE__*/React.createElement("span", {
+      "aria-hidden": true,
+      key: "ellipsis"
+    }, ELLIPSIS_STR)), ellipsisConfig.suffix];
+  };
+  return /*#__PURE__*/React.createElement(_resizeObserver.default, {
+    onResize: onResize,
+    disabled: !mergedEnableEllipsis
+  }, function (resizeRef) {
+    return /*#__PURE__*/React.createElement(_EllipsisTooltip.default, {
+      tooltipProps: tooltipProps,
+      enableEllipsis: mergedEnableEllipsis,
+      isEllipsis: isMergedEllipsis,
+      open: isHoveringTypography && !isHoveringOperations
+    }, /*#__PURE__*/React.createElement(_Typography.InternalTypography, (0, _objectSpread2.default)({
+      onMouseEnter: function onMouseEnter(e) {
+        setIsHoveringTypography(true);
+        _onMouseEnter === null || _onMouseEnter === void 0 || _onMouseEnter(e);
+      },
+      onMouseLeave: function onMouseLeave(e) {
+        setIsHoveringTypography(false);
+        _onMouseLeave === null || _onMouseLeave === void 0 || _onMouseLeave(e);
+      },
+      className: (0, _clsx3.clsx)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(prefixCls, "-").concat(type), type), "".concat(prefixCls, "-disabled"), disabled), "".concat(prefixCls, "-ellipsis"), enableEllipsis), "".concat(prefixCls, "-ellipsis-single-line"), cssTextOverflow), "".concat(prefixCls, "-ellipsis-multiple-line"), cssLineClamp), "".concat(prefixCls, "-link"), component === 'a'), className),
+      classNames: mergedClassNames,
+      styles: mergedStyles,
+      prefixCls: prefixCls,
+      style: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, style), {}, {
+        WebkitLineClamp: cssLineClamp ? rows : undefined
+      }),
+      component: component,
+      ref: (0, _util.composeRef)(resizeRef, typographyRef, ref),
+      direction: direction,
+      onClick: triggerType.includes('text') ? onEditClick : undefined,
+      "aria-label": topAriaLabel === null || topAriaLabel === void 0 ? void 0 : topAriaLabel.toString(),
+      title: title
+    }, textProps), /*#__PURE__*/React.createElement(_Ellipsis.default, {
+      enableMeasure: mergedEnableEllipsis && !cssEllipsis,
+      text: children,
+      rows: rows,
+      width: ellipsisWidth,
+      onEllipsis: onJsEllipsis,
+      expanded: expanded,
+      measureDeps: [placement],
+      miscDeps: [copied, expanded, copyLoading, enableEdit, enableCopy, placement, textLocale].concat((0, _toConsumableArray2.default)(DECORATION_PROPS.map(function (key) {
+        return props[key];
+      })))
+    }, function (node, canEllipsis) {
+      return wrapperDecorations(props, /*#__PURE__*/React.createElement(React.Fragment, null, placement === 'start' ? renderOperations(canEllipsis) : null, node.length > 0 && canEllipsis && !expanded && topAriaLabel ? (/*#__PURE__*/React.createElement("span", {
+        key: "show-content",
+        "aria-hidden": true
+      }, node)) : node, renderEllipsis(canEllipsis), placement === 'start' ? null : renderOperations(canEllipsis)));
+    })));
+  });
+});
+var _default = exports.default = Base;

package/lib/typography/Base/util.d.ts

@@ -0,0 +1,10 @@
+export declare const toCopyConfigList: <T>(val: T | T[]) => T[];
+export declare function getNode(dom: React.ReactNode, defaultNode: React.ReactNode, needDom?: boolean): import("react").ReactNode;
+/**
+ * Check for element is native ellipsis
+ * ref:
+ * - https://github.com/ant-design/ant-design/issues/50143
+ * - https://github.com/ant-design/ant-design/issues/50414
+ */
+export declare function isEleEllipsis(ele: HTMLElement): boolean;
+export declare const isValidText: (val: any) => val is string | number;

package/lib/typography/Base/util.js

@@ -0,0 +1,52 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getNode = getNode;
+exports.isEleEllipsis = isEleEllipsis;
+exports.toCopyConfigList = exports.isValidText = void 0;
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _toList = _interopRequireDefault(require("../../_util/toList"));
+var toCopyConfigList = exports.toCopyConfigList = function toCopyConfigList(val) {
+  if (val === false) {
+    return [false, false];
+  }
+  return (0, _toList.default)(val);
+};
+function getNode(dom, defaultNode, needDom) {
+  if (dom === true || dom === undefined) {
+    return defaultNode;
+  }
+  return dom || needDom && defaultNode;
+}
+/**
+ * Check for element is native ellipsis
+ * ref:
+ * - https://github.com/ant-design/ant-design/issues/50143
+ * - https://github.com/ant-design/ant-design/issues/50414
+ */
+function isEleEllipsis(ele) {
+  // Create a new div to get the size
+  var childDiv = document.createElement('em');
+  ele.appendChild(childDiv);
+  // For test case
+  if (process.env.NODE_ENV !== 'production') {
+    childDiv.className = 'ant-typography-css-ellipsis-content-measure';
+  }
+  var rect = ele.getBoundingClientRect();
+  var childRect = childDiv.getBoundingClientRect();
+  // Reset
+  ele.removeChild(childDiv);
+  // Range checker
+  return (
+    // Horizontal out of range
+    rect.left > childRect.left || childRect.right > rect.right ||
+    // Vertical out of range
+    rect.top > childRect.top || childRect.bottom > rect.bottom
+  );
+}
+var isValidText = exports.isValidText = function isValidText(val) {
+  return ['string', 'number'].includes((0, _typeof2.default)(val));
+};

package/lib/typography/Base.d.ts

@@ -0,0 +1,2 @@
+export * from './Base/index';
+export { default } from './Base/index';

package/lib/typography/Base.js

@@ -0,0 +1 @@
+module.exports = require('./Base/index.js');

package/lib/typography/Editable.d.ts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import type { TextAreaProps } from '@rc-component/input';
+import type { GetProp } from '../_util/type';
+import type { DirectionType } from '../config-provider';
+import type { TypographyProps } from './Typography';
+interface EditableProps {
+    prefixCls: string;
+    value: string;
+    'aria-label'?: string;
+    onSave: (value: string) => void;
+    onCancel: () => void;
+    onEnd?: () => void;
+    className?: string;
+    style?: React.CSSProperties;
+    direction?: DirectionType;
+    maxLength?: number;
+    autoSize?: TextAreaProps['autoSize'];
+    enterIcon?: React.ReactNode;
+    component?: string;
+    classNames: NonNullable<GetProp<TypographyProps, 'classNames', 'Return'>>;
+    styles: NonNullable<GetProp<TypographyProps, 'styles', 'Return'>>;
+}
+declare const Editable: React.FC<EditableProps>;
+export default Editable;

package/lib/typography/Editable.js

@@ -0,0 +1,125 @@
+"use strict";
+"use client";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var React = _interopRequireWildcard(require("react"));
+var _EnterOutlined = _interopRequireDefault(require("@996-design/996-icons/EnterOutlined"));
+var _util = require("@rc-component/util");
+var _clsx2 = require("clsx");
+var _reactNode = require("../_util/reactNode");
+var _TextArea = _interopRequireDefault(require("../input/TextArea"));
+var _style = _interopRequireDefault(require("./style"));
+var Editable = function Editable(props) {
+  var prefixCls = props.prefixCls,
+    ariaLabel = props['aria-label'],
+    className = props.className,
+    style = props.style,
+    classNames = props.classNames,
+    styles = props.styles,
+    direction = props.direction,
+    maxLength = props.maxLength,
+    _props$autoSize = props.autoSize,
+    autoSize = _props$autoSize === void 0 ? true : _props$autoSize,
+    value = props.value,
+    onSave = props.onSave,
+    onCancel = props.onCancel,
+    onEnd = props.onEnd,
+    component = props.component,
+    _props$enterIcon = props.enterIcon,
+    enterIcon = _props$enterIcon === void 0 ? /*#__PURE__*/React.createElement(_EnterOutlined.default, null) : _props$enterIcon;
+  var ref = React.useRef(null);
+  var inCompositionRef = React.useRef(false);
+  var lastKeyCodeRef = React.useRef(null);
+  var _React$useState = React.useState(value),
+    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+    current = _React$useState2[0],
+    setCurrent = _React$useState2[1];
+  React.useEffect(function () {
+    setCurrent(value);
+  }, [value]);
+  React.useEffect(function () {
+    var _ref$current;
+    if ((_ref$current = ref.current) !== null && _ref$current !== void 0 && _ref$current.resizableTextArea) {
+      var textArea = ref.current.resizableTextArea.textArea;
+      textArea.focus();
+      var length = textArea.value.length;
+      textArea.setSelectionRange(length, length);
+    }
+  }, []);
+  var onChange = function onChange(_ref) {
+    var target = _ref.target;
+    setCurrent(target.value.replace(/[\n\r]/g, ''));
+  };
+  var onCompositionStart = function onCompositionStart() {
+    inCompositionRef.current = true;
+  };
+  var onCompositionEnd = function onCompositionEnd() {
+    inCompositionRef.current = false;
+  };
+  var onKeyDown = function onKeyDown(_ref2) {
+    var keyCode = _ref2.keyCode;
+    // We don't record keyCode when IME is using
+    if (inCompositionRef.current) {
+      return;
+    }
+    lastKeyCodeRef.current = keyCode;
+  };
+  var confirmChange = function confirmChange() {
+    onSave(current.trim());
+  };
+  var onKeyUp = function onKeyUp(_ref3) {
+    var keyCode = _ref3.keyCode,
+      ctrlKey = _ref3.ctrlKey,
+      altKey = _ref3.altKey,
+      metaKey = _ref3.metaKey,
+      shiftKey = _ref3.shiftKey;
+    // Check if it's a real key
+    if (lastKeyCodeRef.current !== keyCode || inCompositionRef.current || ctrlKey || altKey || metaKey || shiftKey) {
+      return;
+    }
+    if (keyCode === _util.KeyCode.ENTER) {
+      confirmChange();
+      onEnd === null || onEnd === void 0 || onEnd();
+    } else if (keyCode === _util.KeyCode.ESC) {
+      onCancel();
+    }
+  };
+  var onBlur = function onBlur() {
+    confirmChange();
+  };
+  var _useStyle = (0, _style.default)(prefixCls),
+    _useStyle2 = (0, _slicedToArray2.default)(_useStyle, 2),
+    hashId = _useStyle2[0],
+    cssVarCls = _useStyle2[1];
+  var textAreaClassName = (0, _clsx2.clsx)(prefixCls, "".concat(prefixCls, "-edit-content"), (0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(prefixCls, "-rtl"), direction === 'rtl'), "".concat(prefixCls, "-").concat(component), !!component), className, classNames.root, hashId, cssVarCls);
+  return /*#__PURE__*/React.createElement("div", {
+    className: textAreaClassName,
+    style: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, styles.root), style)
+  }, /*#__PURE__*/React.createElement(_TextArea.default, {
+    ref: ref,
+    maxLength: maxLength,
+    value: current,
+    onChange: onChange,
+    onKeyDown: onKeyDown,
+    onKeyUp: onKeyUp,
+    onCompositionStart: onCompositionStart,
+    onCompositionEnd: onCompositionEnd,
+    onBlur: onBlur,
+    "aria-label": ariaLabel,
+    rows: 1,
+    autoSize: autoSize,
+    className: classNames.textarea,
+    style: styles.textarea
+  }), enterIcon !== null ? (0, _reactNode.cloneElement)(enterIcon, {
+    className: "".concat(prefixCls, "-edit-content-confirm")
+  }) : null);
+};
+var _default = exports.default = Editable;

package/lib/typography/Link.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import type { BlockProps } from './Base';
+export interface LinkProps extends BlockProps<'a'>, Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'type' | keyof BlockProps<'a'>> {
+    ellipsis?: boolean;
+}
+declare const Link: React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLElement>>;
+export default Link;