@charcoal-ui/react 5.4.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

@@ -61,3 +61,61 @@ export const EmptyTitle: StoryObj<typeof TextEllipsis> = {
       '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

@@ -2,6 +2,28 @@
 
 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[] }> =>

package/src/components/TextEllipsis/index.css

@@ -1,9 +1,16 @@
 .charcoal-text-ellipsis {
   overflow: hidden;
-  line-height: var(--charcoal-text-ellipsis-line-height);
   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;
@@ -13,8 +20,4 @@
   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

@@ -1,11 +1,15 @@
 import './index.css'
 
-import { onlyText } from './helper'
+import { getFinalTitle } from './helper'
 import { useClassNames } from '../../_lib/useClassNames'
+import { CSSProperties } from 'react'
 
 export type TextEllipsisProps = {
-  lineHeight: number
+  lineHeight?: number
   lineLimit?: number
+  hyphens?: CSSProperties['hyphens']
+  /** html title属性を付与。false のときは付与せず、空文字のときは表示しない */
+  showTooltip?: boolean
 } & React.ComponentPropsWithoutRef<'div'>
 
 /**
@@ -16,22 +20,28 @@ export default function TextEllipsis({
   lineLimit = 1,
   children,
   title,
+  hyphens = 'auto',
+  showTooltip = true,
   ...props
 }: TextEllipsisProps) {
-  const resolvedTitle = title === undefined ? onlyText(children) : title
-  const finalTitle = resolvedTitle !== '' ? resolvedTitle : undefined
+  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={
         {
-          '--charcoal-text-ellipsis-line-height': `${lineHeight}px`,
+          ...(hasLineHeight && {
+            '--charcoal-text-ellipsis-line-height': `${lineHeight}px`,
+          }),
           '--charcoal-text-ellipsis-line-limit': lineLimit,
+          hyphens,
           ...props.style,
         } satisfies React.CSSProperties
       }

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',