@charcoal-ui/react 5.3.0 → 5.4.0

package/src/components/TextEllipsis/index.css

@@ -0,0 +1,20 @@
+.charcoal-text-ellipsis {
+  overflow: hidden;
+  line-height: var(--charcoal-text-ellipsis-line-height);
+  overflow-wrap: break-word;
+}
+
+.charcoal-text-ellipsis[data-line-limit='1'] {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.charcoal-text-ellipsis[data-line-limit]:not([data-line-limit='1']) {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: var(--charcoal-text-ellipsis-line-limit);
+  max-height: calc(
+    var(--charcoal-text-ellipsis-line-height) *
+      var(--charcoal-text-ellipsis-line-limit)
+  );
+}

package/src/components/TextEllipsis/index.tsx

@@ -0,0 +1,43 @@
+import './index.css'
+
+import { onlyText } from './helper'
+import { useClassNames } from '../../_lib/useClassNames'
+
+export type TextEllipsisProps = {
+  lineHeight: number
+  lineLimit?: number
+} & React.ComponentPropsWithoutRef<'div'>
+
+/**
+ * 複数行のテキストに表示行数制限を設けて`...`で省略する
+ */
+export default function TextEllipsis({
+  lineHeight,
+  lineLimit = 1,
+  children,
+  title,
+  ...props
+}: TextEllipsisProps) {
+  const resolvedTitle = title === undefined ? onlyText(children) : title
+  const finalTitle = resolvedTitle !== '' ? resolvedTitle : undefined
+
+  const classNames = useClassNames('charcoal-text-ellipsis', props.className)
+
+  return (
+    <div
+      {...props}
+      className={classNames}
+      data-line-limit={lineLimit}
+      style={
+        {
+          '--charcoal-text-ellipsis-line-height': `${lineHeight}px`,
+          '--charcoal-text-ellipsis-line-limit': lineLimit,
+          ...props.style,
+        } satisfies React.CSSProperties
+      }
+      title={finalTitle}
+    >
+      {children}
+    </div>
+  )
+}

package/src/index.ts

@@ -79,3 +79,7 @@ export {
   type HintTextProps,
   type HintTextContext,
 } from './components/HintText'
+export {
+  default as UnstableTextEllipsis,
+  type TextEllipsisProps,
+} from './components/TextEllipsis'