@charcoal-ui/react 5.3.0 → 5.4.1

package/src/components/LoadingSpinner/index.story.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react-webpack5'
+import { Meta, StoryObj } from '@storybook/react-vite'
 import LoadingSpinner from '.'
 
 export default {

package/src/components/Modal/index.story.tsx

@@ -12,7 +12,7 @@ import TextField from '../TextField'
 import DropdownSelector from '../DropdownSelector'
 import Checkbox from '../Checkbox'
 import DropdownMenuItem from '../DropdownSelector/DropdownMenuItem'
-import { Meta, StoryObj } from '@storybook/react-webpack5'
+import { Meta, StoryObj } from '@storybook/react-vite'
 
 export default {
   title: 'react/Modal',

package/src/components/MultiSelect/index.story.tsx

@@ -4,7 +4,7 @@ import {
   default as MultiSelect,
   MultiSelectGroupProps,
 } from '.'
-import { Meta, StoryObj } from '@storybook/react-webpack5'
+import { Meta, StoryObj } from '@storybook/react-vite'
 import { action } from 'storybook/actions'
 
 const StyledMultiSelectGroup = (props: MultiSelectGroupProps) => {

package/src/components/Radio/index.story.tsx

@@ -1,6 +1,6 @@
 import Radio from '.'
 import { RadioGroup } from './RadioGroup'
-import { StoryObj } from '@storybook/react-webpack5'
+import { StoryObj } from '@storybook/react-vite'
 import { useState } from 'react'
 
 export default {

package/src/components/SegmentedControl/index.story.tsx

@@ -1,5 +1,5 @@
 import SegmentedControl from '.'
-import { Meta, StoryObj } from '@storybook/react-webpack5'
+import { Meta, StoryObj } from '@storybook/react-vite'
 
 export default {
   title: 'react/SegmentedControl',

package/src/components/Switch/index.story.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react'
 import Switch from '.'
-import { Meta, StoryObj } from '@storybook/react-webpack5'
+import { Meta, StoryObj } from '@storybook/react-vite'
 
 export default {
   title: 'react/Switch',

package/src/components/TagItem/index.story.tsx

@@ -1,5 +1,5 @@
 import TagItem from '.'
-import { Meta, StoryObj } from '@storybook/react-webpack5'
+import { Meta, StoryObj } from '@storybook/react-vite'
 
 export default {
   title: 'react/TagItem',

package/src/components/TextArea/TextArea.story.tsx

@@ -1,7 +1,7 @@
 import { action } from 'storybook/actions'
 import Clickable from '../Clickable'
 import TextArea from '.'
-import { Meta, StoryObj } from '@storybook/react-webpack5'
+import { Meta, StoryObj } from '@storybook/react-vite'
 
 export default {
   title: 'react/TextArea',

package/src/components/TextEllipsis/TextEllipsis.story.tsx

@@ -0,0 +1,121 @@
+import { Meta, StoryObj } from '@storybook/react-webpack5'
+import TextEllipsis from '.'
+
+export default {
+  title: 'react/TextEllipsis',
+  component: TextEllipsis,
+  parameters: {
+    layout: 'centered',
+  },
+  render(args) {
+    return (
+      <div style={{ width: 200 }}>
+        <TextEllipsis {...args} />
+      </div>
+    )
+  },
+} satisfies Meta<typeof TextEllipsis>
+
+export const Default: StoryObj<typeof TextEllipsis> = {
+  args: {
+    lineHeight: 24,
+    lineLimit: 1,
+    children:
+      'これは非常に長いテキストです。1行で収まらない場合に省略記号（...）で表示が切り詰められます。ホバーすると全文がツールチップで表示されます。',
+  },
+}
+
+export const SingleLine: StoryObj<typeof TextEllipsis> = {
+  args: {
+    lineHeight: 24,
+    lineLimit: 1,
+    children:
+      'Single line ellipsis. This long text will be truncated with an ellipsis at the end.',
+  },
+}
+
+export const MultiLine: StoryObj<typeof TextEllipsis> = {
+  args: {
+    lineHeight: 24,
+    lineLimit: 2,
+    children:
+      '複数行の省略表示です。lineLimit で指定した行数まで表示し、それ以降は...で省略されます。',
+  },
+}
+
+export const CustomTitle: StoryObj<typeof TextEllipsis> = {
+  args: {
+    lineHeight: 24,
+    lineLimit: 1,
+    title: 'カスタムのツールチップ文言',
+    children: 'title を渡すとツールチップはその文言になります。',
+  },
+}
+
+export const EmptyTitle: StoryObj<typeof TextEllipsis> = {
+  args: {
+    lineHeight: 24,
+    lineLimit: 1,
+    title: '',
+    children:
+      'title="" を渡すとツールチップは表示されません。ホバーしても何も出ません。',
+  },
+}
+
+const narrowRender = (args: React.ComponentProps<typeof TextEllipsis>) => (
+  <div style={{ width: 80 }} lang="en">
+    <TextEllipsis {...args} />
+  </div>
+)
+
+export const HyphensAuto: StoryObj<typeof TextEllipsis> = {
+  args: {
+    lineHeight: 24,
+    lineLimit: 2,
+    hyphens: 'auto',
+    children: 'internationalization',
+  },
+  render: narrowRender,
+}
+
+export const HyphensManual: StoryObj<typeof TextEllipsis> = {
+  args: {
+    lineHeight: 24,
+    lineLimit: 2,
+    hyphens: 'manual',
+    children: 'inter\u00ADnational\u00ADization',
+  },
+  render: narrowRender,
+}
+
+export const HyphensNone: StoryObj<typeof TextEllipsis> = {
+  args: {
+    lineHeight: 24,
+    lineLimit: 2,
+    hyphens: 'none',
+    children: 'internationalization',
+  },
+  render: narrowRender,
+}
+
+export const LineHeightInherit: StoryObj<typeof TextEllipsis> = {
+  args: {
+    lineLimit: 2,
+    children: 'lineHeight を指定しない場合、親の line-height を継承します。',
+  },
+  render: (args) => (
+    <div style={{ lineHeight: 1.8, width: 200 }}>
+      <TextEllipsis {...args} />
+    </div>
+  ),
+}
+
+export const ShowTooltipFalse: StoryObj<typeof TextEllipsis> = {
+  args: {
+    lineHeight: 24,
+    lineLimit: 1,
+    showTooltip: false,
+    children:
+      'showTooltip=false の場合、ホバーしてもツールチップは表示されません。',
+  },
+}

package/src/components/TextEllipsis/helper.ts

@@ -0,0 +1,72 @@
+// https://github.com/fernandopasik/react-children-utilities/blob/971d8a0324e6183734d8d1af9a65dbad18ab3d00/src/lib/onlyText.ts
+
+import { Children, isValidElement, ReactElement, ReactNode } from 'react'
+
+export const getFinalTitle = (
+  showTooltip: boolean,
+  title?: string,
+  children?: ReactNode,
+): string | undefined => {
+  // 1. 表示フラグが false なら即終了
+  if (!showTooltip) {
+    return undefined
+  }
+
+  // 2. タイトルの候補を取得
+  const resolvedTitle = title ?? onlyText(children)
+
+  // 3. resolvedTitle が falsy (undefined, null, "") なら終了
+  if (!resolvedTitle) {
+    return undefined
+  }
+
+  // 4. 有効な文字列のみを返す
+  return resolvedTitle
+}
+
+const hasChildren = (
+  element: ReactNode,
+): element is ReactElement<{ children: ReactNode[] }> =>
+  isValidElement<{ children?: ReactNode[] }>(element) &&
+  Boolean(element.props.children)
+
+export const childToString = (
+  child?: number | string | boolean | {} | null,
+): string => {
+  if (
+    typeof child === 'undefined' ||
+    child === null ||
+    typeof child === 'boolean'
+  ) {
+    return ''
+  }
+
+  if (JSON.stringify(child) === '{}') {
+    return ''
+  }
+
+  return (child as string | number).toString()
+}
+
+export const onlyText = (children: ReactNode): string => {
+  if (!Array.isArray(children) && !isValidElement(children)) {
+    return childToString(children)
+  }
+
+  return Children.toArray(children).reduce(
+    (text: string, child: ReactNode): string => {
+      let newText = ''
+
+      if (isValidElement(child) && hasChildren(child)) {
+        newText = onlyText(child.props.children)
+      } else if (isValidElement(child) && !hasChildren(child)) {
+        newText = ''
+      } else {
+        newText = childToString(child)
+      }
+
+      return text.concat(newText)
+    },
+    '',
+  )
+}

package/src/components/TextEllipsis/index.css

@@ -0,0 +1,23 @@
+.charcoal-text-ellipsis {
+  overflow: hidden;
+  overflow-wrap: break-word;
+}
+
+.charcoal-text-ellipsis[data-has-line-height='true'] {
+  line-height: var(--charcoal-text-ellipsis-line-height);
+}
+
+.charcoal-text-ellipsis[data-has-line-height='false'] {
+  line-height: inherit;
+}
+
+.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);
+}

package/src/components/TextEllipsis/index.tsx

@@ -0,0 +1,53 @@
+import './index.css'
+
+import { getFinalTitle } from './helper'
+import { useClassNames } from '../../_lib/useClassNames'
+import { CSSProperties } from 'react'
+
+export type TextEllipsisProps = {
+  lineHeight?: number
+  lineLimit?: number
+  hyphens?: CSSProperties['hyphens']
+  /** html title属性を付与。false のときは付与せず、空文字のときは表示しない */
+  showTooltip?: boolean
+} & React.ComponentPropsWithoutRef<'div'>
+
+/**
+ * 複数行のテキストに表示行数制限を設けて`...`で省略する
+ */
+export default function TextEllipsis({
+  lineHeight,
+  lineLimit = 1,
+  children,
+  title,
+  hyphens = 'auto',
+  showTooltip = true,
+  ...props
+}: TextEllipsisProps) {
+  const finalTitle = getFinalTitle(showTooltip, title, children)
+
+  const classNames = useClassNames('charcoal-text-ellipsis', props.className)
+  const hasLineHeight = lineHeight !== undefined
+
+  return (
+    <div
+      {...props}
+      className={classNames}
+      data-line-limit={lineLimit}
+      data-has-line-height={hasLineHeight}
+      style={
+        {
+          ...(hasLineHeight && {
+            '--charcoal-text-ellipsis-line-height': `${lineHeight}px`,
+          }),
+          '--charcoal-text-ellipsis-line-limit': lineLimit,
+          hyphens,
+          ...props.style,
+        } satisfies React.CSSProperties
+      }
+      title={finalTitle}
+    >
+      {children}
+    </div>
+  )
+}

package/src/components/TextField/TextField.story.tsx

@@ -1,7 +1,7 @@
 import Clickable from '../Clickable'
 import TextField from '.'
 import { useState } from 'react'
-import { Meta, StoryObj } from '@storybook/react-webpack5'
+import { Meta, StoryObj } from '@storybook/react-vite'
 
 export default {
   title: 'react/TextField',

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'