@charcoal-ui/react 5.4.1 → 5.4.3

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

@@ -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/TextEllipsis/TextEllipsis.story.tsx

@@ -119,3 +119,32 @@ export const ShowTooltipFalse: StoryObj<typeof TextEllipsis> = {
       '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/index.css

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

@@ -7,9 +7,22 @@ import { CSSProperties } from 'react'
 export type TextEllipsisProps = {
   lineHeight?: number
   lineLimit?: number
+  /**
+   * @default 'auto'
+   */
   hyphens?: CSSProperties['hyphens']
-  /** html title属性を付与。false のときは付与せず、空文字のときは表示しない */
+  /**
+   * 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'>
 
 /**
@@ -22,8 +35,10 @@ export default function TextEllipsis({
   title,
   hyphens = 'auto',
   showTooltip = true,
+  useNowrap = false,
   ...props
 }: TextEllipsisProps) {
+  'use memo'
   const finalTitle = getFinalTitle(showTooltip, title, children)
 
   const classNames = useClassNames('charcoal-text-ellipsis', props.className)
@@ -35,6 +50,7 @@ export default function TextEllipsis({
       className={classNames}
       data-line-limit={lineLimit}
       data-has-line-height={hasLineHeight}
+      {...(useNowrap ? { 'data-use-nowrap': useNowrap } : {})}
       style={
         {
           ...(hasLineHeight && {