@snack-uikit/list 0.8.1 → 0.8.2-preview-1fcf96b1.0

package/dist/components/Items/BaseItem/BaseItem.js

@@ -71,7 +71,7 @@ export function BaseItem(_a) {
         e.stopPropagation();
     };
     const props = extractSupportProps(rest);
-    const item = (_jsxs("li", { role: 'menuitem', "data-test-id": props['data-test-id'] || 'list__base-item_' + id, ref: itemRef, className: cn(commonStyles.listItem, styles.droplistItem, className), "data-size": size, onClick: handleItemClick, onMouseDown: onMouseDown, tabIndex: -1, "data-non-pointer": inactive && !onClick, "data-inactive": inactive || undefined, "data-checked": (isParentNode && (indeterminate || isChecked)) || (isChecked && !switchProp) || undefined, "data-variant": mode || undefined, "data-open": open || undefined, "data-disabled": disabled || undefined, "aria-disabled": disabled || undefined, "data-parent": parent || 'list', onKeyDown: handleItemKeyDown, onFocus: handleItemFocus, style: { '--level': level }, children: [!switchProp && isSelectionSingle && marker && !isParentNode && interactive && (_jsx("div", { className: styles.markerContainer, "data-test-id": 'list__base-item-marker' })), !switchProp && isSelectionMultiple && interactive && (_jsx("div", { className: styles.checkbox, children: _jsx(Checkbox, { size: CHECKBOX_SIZE_MAP[size !== null && size !== void 0 ? size : 's'], disabled: disabled, tabIndex: -1, onChange: handleCheckboxChange, checked: isChecked, "data-test-id": 'list__base-item-checkbox', onClick: handleCheckboxClick, indeterminate: indeterminate }) })), beforeContent && _jsx("div", { className: styles.beforeContent, children: beforeContent }), _jsxs("div", { className: styles.content, children: [_jsxs("div", { className: styles.headline, children: [_jsx("span", { className: styles.option, children: _jsx(TruncateString, { text: option, maxLines: (_b = contentTruncate === null || contentTruncate === void 0 ? void 0 : contentTruncate.option) !== null && _b !== void 0 ? _b : 1, "data-test-id": 'list__base-item-option' }) }), caption && _jsx("span", { className: styles.caption, children: caption })] }), description && (_jsx("div", { className: styles.description, children: _jsx(TruncateString, { text: description, maxLines: (_c = contentTruncate === null || contentTruncate === void 0 ? void 0 : contentTruncate.description) !== null && _c !== void 0 ? _c : 2, "data-test-id": 'list__base-item-description' }) }))] }), afterContent, switchProp && interactive && (_jsx(Switch, { disabled: disabled, checked: isChecked, "data-test-id": 'list__base-item-switch' })), !switchProp && expandIcon && _jsx("span", { className: styles.expandableIcon, children: expandIcon })] }));
+    const item = (_jsxs("li", { role: 'menuitem', "data-test-id": props['data-test-id'] || 'list__base-item_' + id, ref: itemRef, className: cn(commonStyles.listItem, styles.droplistItem, className), "data-size": size, onClick: handleItemClick, onMouseDown: onMouseDown, tabIndex: -1, "data-non-pointer": inactive && !onClick, "data-inactive": inactive || undefined, "data-checked": (isParentNode && (indeterminate || isChecked)) || (isChecked && !switchProp) || undefined, "data-variant": mode || undefined, "data-open": open || undefined, "data-disabled": disabled || undefined, "aria-disabled": disabled || undefined, "data-parent": parent || 'list', onKeyDown: handleItemKeyDown, onFocus: handleItemFocus, style: { '--level': level }, children: [!switchProp && isSelectionSingle && marker && !isParentNode && interactive && (_jsx("div", { className: styles.markerContainer, "data-test-id": 'list__base-item-marker' })), !switchProp && isSelectionMultiple && interactive && (_jsx("div", { className: styles.checkbox, children: _jsx(Checkbox, { size: CHECKBOX_SIZE_MAP[size !== null && size !== void 0 ? size : 's'], disabled: disabled, tabIndex: -1, onChange: handleCheckboxChange, checked: isChecked, "data-test-id": 'list__base-item-checkbox', onClick: handleCheckboxClick, indeterminate: indeterminate }) })), beforeContent && _jsx("div", { className: styles.beforeContent, children: beforeContent }), _jsxs("div", { className: styles.content, children: [_jsxs("div", { className: styles.headline, children: [_jsx("span", { className: styles.option, children: _jsx(TruncateString, { variant: contentTruncate === null || contentTruncate === void 0 ? void 0 : contentTruncate.variant, text: option, maxLines: (_b = contentTruncate === null || contentTruncate === void 0 ? void 0 : contentTruncate.option) !== null && _b !== void 0 ? _b : 1, "data-test-id": 'list__base-item-option' }) }), caption && _jsx("span", { className: styles.caption, children: caption })] }), description && (_jsx("div", { className: styles.description, children: _jsx(TruncateString, { text: description, maxLines: (_c = contentTruncate === null || contentTruncate === void 0 ? void 0 : contentTruncate.description) !== null && _c !== void 0 ? _c : 2, "data-test-id": 'list__base-item-description' }) }))] }), afterContent, switchProp && interactive && (_jsx(Switch, { disabled: disabled, checked: isChecked, "data-test-id": 'list__base-item-switch' })), !switchProp && expandIcon && _jsx("span", { className: styles.expandableIcon, children: expandIcon })] }));
     if (!itemWrapRender) {
         return item;
     }

package/dist/components/Items/GroupItem/GroupItem.d.ts

@@ -1,2 +1,2 @@
 import { GroupItemProps } from '../types';
-export declare function GroupItem({ label, divider, items, mode }: GroupItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function GroupItem({ label, truncate, divider, items, mode }: GroupItemProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Items/GroupItem/GroupItem.js

@@ -2,8 +2,8 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { Separator } from '../../../helperComponents';
 import { useListContext } from '../../Lists/contexts';
 import { useRenderItems } from '../hooks';
-export function GroupItem({ label, divider, items, mode }) {
+export function GroupItem({ label, truncate, divider, items, mode }) {
     const { size } = useListContext();
     const itemsJSX = useRenderItems(items);
-    return (_jsxs(_Fragment, { children: [_jsx(Separator, { label: label, divider: divider, mode: mode, size: size }), itemsJSX] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Separator, { label: label, truncate: truncate, divider: divider, mode: mode, size: size }), itemsJSX] }));
 }

package/dist/components/Items/types.d.ts

@@ -1,4 +1,5 @@
 import { FocusEvent, KeyboardEvent, MouseEvent, ReactNode, RefObject } from 'react';
+import { TruncateStringProps } from '@snack-uikit/truncate-string';
 import { WithSupportProps } from '@snack-uikit/utils';
 import { SeparatorProps } from '../../helperComponents';
 import { ScrollProps, SearchState } from '../../types';
@@ -9,6 +10,7 @@ export type ItemContentProps = {
     truncate?: {
         option?: number;
         description?: number;
+        variant?: TruncateStringProps['variant'];
     };
 };
 export type BaseItemPrivateProps = {

package/dist/helperComponents/Separator/Separator.d.ts

@@ -1,7 +1,11 @@
+import { TruncateStringProps } from '@snack-uikit/truncate-string';
 export type SeparatorProps = {
     label?: string;
+    truncate?: {
+        variant?: TruncateStringProps['variant'];
+    };
     mode?: 'primary' | 'secondary';
     divider?: boolean;
     size?: 's' | 'm' | 'l';
 };
-export declare function Separator({ label, divider, mode, size }: SeparatorProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function Separator({ label, truncate, divider, mode, size }: SeparatorProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/helperComponents/Separator/Separator.js

@@ -2,9 +2,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Divider } from '@snack-uikit/divider';
 import { TruncateString } from '@snack-uikit/truncate-string';
 import styles from './styles.module.css';
-export function Separator({ label, divider, mode = 'secondary', size = 's' }) {
+export function Separator({ label, truncate, divider, mode = 'secondary', size = 's' }) {
     if (label) {
-        return (_jsxs("div", { className: styles.separatorWithLabel, "data-size": size, children: [_jsx("span", { className: styles.label, "data-mode": mode, children: _jsx(TruncateString, { text: label, maxLines: 1 }) }), divider && _jsx(Divider, { weight: mode === 'primary' ? 'regular' : 'light', className: styles.divider })] }));
+        return (_jsxs("div", { className: styles.separatorWithLabel, "data-size": size, children: [_jsx("span", { className: styles.label, "data-mode": mode, children: _jsx(TruncateString, { variant: truncate === null || truncate === void 0 ? void 0 : truncate.variant, text: label, maxLines: 1 }) }), divider && _jsx(Divider, { weight: mode === 'primary' ? 'regular' : 'light', className: styles.divider })] }));
     }
     if (divider) {
         return (_jsx("div", { className: styles.separatorWithoutLabel, "data-size": size, children: _jsx(Divider, { weight: 'regular' }) }));

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "List",
-  "version": "0.8.1",
+  "version": "0.8.2-preview-1fcf96b1.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -41,7 +41,7 @@
     "@snack-uikit/scroll": "0.5.2",
     "@snack-uikit/search-private": "0.1.5",
     "@snack-uikit/toggles": "0.9.7",
-    "@snack-uikit/truncate-string": "0.4.10",
+    "@snack-uikit/truncate-string": "0.4.11-preview-1fcf96b1.0",
     "@snack-uikit/utils": "3.2.0",
     "classnames": "2.5.1",
     "fuzzy-search": "3.2.1",
@@ -54,5 +54,5 @@
   "peerDependencies": {
     "@snack-uikit/locale": "*"
   },
-  "gitHead": "886b294a5276c22c27fe63aaf6f71b0ab3f5e63f"
+  "gitHead": "6258f32293b256d090f415fbbecd88ac9b037fc8"
 }

package/src/components/Items/BaseItem/BaseItem.tsx

@@ -146,6 +146,7 @@ export function BaseItem({
         <div className={styles.headline}>
           <span className={styles.option}>
             <TruncateString
+              variant={contentTruncate?.variant}
               text={option}
               maxLines={contentTruncate?.option ?? 1}
               data-test-id='list__base-item-option'

package/src/components/Items/GroupItem/GroupItem.tsx

@@ -3,14 +3,14 @@ import { useListContext } from '../../Lists/contexts';
 import { useRenderItems } from '../hooks';
 import { GroupItemProps } from '../types';
 
-export function GroupItem({ label, divider, items, mode }: GroupItemProps) {
+export function GroupItem({ label, truncate, divider, items, mode }: GroupItemProps) {
   const { size } = useListContext();
 
   const itemsJSX = useRenderItems(items);
 
   return (
     <>
-      <Separator label={label} divider={divider} mode={mode} size={size} />
+      <Separator label={label} truncate={truncate} divider={divider} mode={mode} size={size} />
       {itemsJSX}
     </>
   );

package/src/components/Items/types.ts

@@ -1,5 +1,6 @@
 import { FocusEvent, KeyboardEvent, MouseEvent, ReactNode, RefObject } from 'react';
 
+import { TruncateStringProps } from '@snack-uikit/truncate-string';
 import { WithSupportProps } from '@snack-uikit/utils';
 
 import { SeparatorProps } from '../../helperComponents';
@@ -12,6 +13,7 @@ export type ItemContentProps = {
   truncate?: {
     option?: number;
     description?: number;
+    variant?: TruncateStringProps['variant'];
   };
 };
 

package/src/helperComponents/Separator/Separator.tsx

@@ -1,21 +1,24 @@
 import { Divider } from '@snack-uikit/divider';
-import { TruncateString } from '@snack-uikit/truncate-string';
+import { TruncateString, TruncateStringProps } from '@snack-uikit/truncate-string';
 
 import styles from './styles.module.scss';
 
 export type SeparatorProps = {
   label?: string;
+  truncate?: {
+    variant?: TruncateStringProps['variant'];
+  };
   mode?: 'primary' | 'secondary';
   divider?: boolean;
   size?: 's' | 'm' | 'l';
 };
 
-export function Separator({ label, divider, mode = 'secondary', size = 's' }: SeparatorProps) {
+export function Separator({ label, truncate, divider, mode = 'secondary', size = 's' }: SeparatorProps) {
   if (label) {
     return (
       <div className={styles.separatorWithLabel} data-size={size}>
         <span className={styles.label} data-mode={mode}>
-          <TruncateString text={label} maxLines={1} />
+          <TruncateString variant={truncate?.variant} text={label} maxLines={1} />
         </span>
 
         {divider && <Divider weight={mode === 'primary' ? 'regular' : 'light'} className={styles.divider} />}