@charcoal-ui/react 5.4.0 → 5.4.2

package/src/components/DropdownSelector/DropdownMenuItem/index.tsx

@@ -2,10 +2,12 @@ import './index.css'
 
 import MenuItem, { MenuItemProps } from '../MenuItem'
 import { MenuListContext } from '../MenuList/MenuListContext'
-import { useContext } from 'react'
+import { ReactNode, useContext } from 'react'
 import Icon from '../../Icon'
 
-export type DropdownMenuItemProps = Omit<MenuItemProps, 'as'>
+export type DropdownMenuItemProps = Omit<MenuItemProps, 'as'> & {
+  secondary?: ReactNode
+}
 
 /**
  * DropdownSelectorの選択肢として使うMenuItem
@@ -13,22 +15,31 @@ export type DropdownMenuItemProps = Omit<MenuItemProps, 'as'>
 export default function DropdownMenuItem(props: DropdownMenuItemProps) {
   const { value: ctxValue } = useContext(MenuListContext)
   const isSelected = props.value === ctxValue
-  const { children, ...rest } = props
+  const { children, secondary, ...rest } = props
 
   return (
     <MenuItem {...rest} aria-selected={isSelected}>
-      {isSelected && (
-        <Icon
-          className="charcoal-dropdown-selector-menu-item-icon"
-          name="16/Check"
-        />
-      )}
-      <span
-        className="charcoal-dropdown-selector-menu-item"
-        data-selected={isSelected}
-      >
-        {children}
-      </span>
+      <div>
+        <div className="charcoal-dropdown-selector-menu-item-container">
+          {isSelected && (
+            <Icon
+              className="charcoal-dropdown-selector-menu-item-icon"
+              name="16/Check"
+            />
+          )}
+          <span
+            className="charcoal-dropdown-selector-menu-item"
+            data-selected={isSelected}
+          >
+            {children}
+          </span>
+        </div>
+        {secondary && (
+          <span className="charcoal-dropdown-selector-menu-secondary">
+            {secondary}
+          </span>
+        )}
+      </div>
     </MenuItem>
   )
 }

package/src/components/DropdownSelector/ListItem/index.story.tsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react'
 import Icon from '../../Icon'
 import Switch from '../../Switch'
 import ListItem from '.'
-import { Meta, StoryObj } from '@storybook/react-webpack5'
+import { Meta, StoryObj } from '@storybook/react-vite'
 
 export default {
   title: 'react/internals/ListItem',

package/src/components/DropdownSelector/MenuList/index.story.tsx

@@ -2,7 +2,7 @@ import { action } from 'storybook/actions'
 import MenuList from '.'
 import MenuItem from '../MenuItem'
 import MenuItemGroup from '../MenuItemGroup'
-import { Meta, StoryObj } from '@storybook/react-webpack5'
+import { Meta, StoryObj } from '@storybook/react-vite'
 
 export default {
   title: 'react/internals/MenuList',

package/src/components/DropdownSelector/Popover/index.story.tsx

@@ -1,7 +1,7 @@
 import { useRef, CSSProperties, useState } from 'react'
 import Popover from '.'
 import Button from '../../Button'
-import { Meta, StoryObj } from '@storybook/react-webpack5'
+import { Meta, StoryObj } from '@storybook/react-vite'
 
 export default {
   title: 'react/internals/Popover',

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

@@ -5,7 +5,7 @@ import MenuItemGroup from './MenuItemGroup'
 import DropdownMenuItem from './DropdownMenuItem'
 import Modal from '../Modal'
 import { ModalBody, ModalHeader } from '../Modal/ModalPlumbing'
-import { Meta, StoryObj } from '@storybook/react-webpack5'
+import { Meta, StoryObj } from '@storybook/react-vite'
 import TextField from '../TextField'
 import TextArea from '../TextArea'
 import Button from '../Button'
@@ -424,3 +424,32 @@ export const Section: StoryObj<typeof DropdownSelector> = {
     )
   },
 }
+
+export const WithSeconday: StoryObj<typeof DropdownSelector> = {
+  render: function Render(props) {
+    const [selected, setSelected] = useState('option-3')
+    return (
+      <div style={{ width: 288 }}>
+        <DropdownSelector
+          {...props}
+          onChange={(value) => {
+            setSelected(value)
+          }}
+          value={selected}
+          label="label"
+        >
+          <MenuItemGroup text="fruits">
+            <DropdownMenuItem value={'option-1'}>Option 1</DropdownMenuItem>
+            <DropdownMenuItem value={'option-2'}>Option 2</DropdownMenuItem>
+            <DropdownMenuItem
+              value={'option-3'}
+              secondary={<span>Option 3 Secondary</span>}
+            >
+              Option 3
+            </DropdownMenuItem>
+          </MenuItemGroup>
+        </DropdownSelector>
+      </div>
+    )
+  },
+}

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

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

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

@@ -1,6 +1,6 @@
 import Icon from '.'
 import { KNOWN_ICON_FILES } from '@charcoal-ui/icons'
-import { Meta, StoryObj } from '@storybook/react-webpack5'
+import { Meta, StoryObj } from '@storybook/react-vite'
 
 export default {
   title: 'react/Icon',

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

@@ -1,6 +1,6 @@
 import '@charcoal-ui/icons'
 import IconButton, { IconButtonProps } from '.'
-import { Meta, StoryObj } from '@storybook/react-webpack5'
+import { Meta, StoryObj } from '@storybook/react-vite'
 
 export default {
   title: 'react/IconButton',

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,90 @@ 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 の場合、ホバーしてもツールチップは表示されません。',
+  },
+}
+
+export const useLineClamp: StoryObj<typeof TextEllipsis> = {
+  render() {
+    return (
+      <div
+        style={{
+          width: 240,
+          borderInline: '2px solid var(--charcoal-border)',
+        }}
+      >
+        <div style={{ width: '100%', display: 'flex', gap: 8 }}>
+          <div>
+            <TextEllipsis>これは非常に長いテキストです。</TextEllipsis>
+          </div>
+          <div>{'useNowrap={false}'}</div>
+        </div>
+
+        <div style={{ width: '100%', display: 'flex', gap: 8 }}>
+          <div>
+            <TextEllipsis useNowrap>
+              これは非常に長いテキストです。
+            </TextEllipsis>
+          </div>
+          <div>{'useNowrap={true}'}</div>
+        </div>
+      </div>
+    )
+  },
+}

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,20 +1,20 @@
 .charcoal-text-ellipsis {
   overflow: hidden;
-  line-height: var(--charcoal-text-ellipsis-line-height);
   overflow-wrap: break-word;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: var(--charcoal-text-ellipsis-line-limit);
 }
 
-.charcoal-text-ellipsis[data-line-limit='1'] {
-  text-overflow: ellipsis;
-  white-space: nowrap;
+.charcoal-text-ellipsis[data-has-line-height='true'] {
+  line-height: var(--charcoal-text-ellipsis-line-height);
 }
 
-.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)
-  );
+.charcoal-text-ellipsis[data-has-line-height='false'] {
+  line-height: inherit;
+}
+
+.charcoal-text-ellipsis[data-line-limit='1'][data-use-nowrap='true'] {
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }

package/src/components/TextEllipsis/index.tsx

@@ -1,11 +1,28 @@
 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
+  /**
+   * @default 'auto'
+   */
+  hyphens?: CSSProperties['hyphens']
+  /**
+   * html title属性を付与。false のときは付与せず、空文字のときは表示しない
+   * @default true
+   */
+  showTooltip?: boolean
+  /**
+   *
+   * @default false
+   * true: use white-space: nowrap if lineLimit is 1
+   * false: use -webkit-line-clamp if lineLimit is 1
+   */
+  useNowrap?: boolean
 } & React.ComponentPropsWithoutRef<'div'>
 
 /**
@@ -16,22 +33,31 @@ export default function TextEllipsis({
   lineLimit = 1,
   children,
   title,
+  hyphens = 'auto',
+  showTooltip = true,
+  useNowrap = false,
   ...props
 }: TextEllipsisProps) {
-  const resolvedTitle = title === undefined ? onlyText(children) : title
-  const finalTitle = resolvedTitle !== '' ? resolvedTitle : undefined
+  'use memo'
+  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}
+      {...(useNowrap ? { 'data-use-nowrap': useNowrap } : {})}
       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',