@snack-uikit/list 0.7.1 → 0.8.0

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 0.8.0 (2024-03-11)
+
+
+### Features
+
+* **FF-4491:** add truncate prop to droplist items, add test-ids to caption and description ([c321e1b](https://github.com/cloud-ru-tech/snack-uikit/commit/c321e1bb199fc7997a0cfb8467f98b0acd7f8b6a))
+
+
+
+
+
+## 0.7.2 (2024-03-07)
+
+
+### Bug Fixes
+
+* **FF-4473:** droplist item width ([99f5f25](https://github.com/cloud-ru-tech/snack-uikit/commit/99f5f251ac176ae3c6c9d2c9b78c31890aea0317))
+
+
+
+
+
 ## 0.7.1 (2024-02-29)
 
 ### Only dependencies have been changed

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

@@ -19,8 +19,9 @@ import commonStyles from '../styles.module.css';
 import { CHECKBOX_SIZE_MAP } from './constants';
 import styles from './styles.module.css';
 export function BaseItem(_a) {
+    var _b, _c;
     var { beforeContent, afterContent, content, onClick, onMouseDown, id, expandIcon, disabled, open, itemRef, switch: switchProp, onKeyDown, onFocus, indeterminate, onSelect, isParentNode, className, inactive, itemWrapRender } = _a, rest = __rest(_a, ["beforeContent", "afterContent", "content", "onClick", "onMouseDown", "id", "expandIcon", "disabled", "open", "itemRef", "switch", "onKeyDown", "onFocus", "indeterminate", "onSelect", "isParentNode", "className", "inactive", "itemWrapRender"]);
-    const { option, caption, description } = content || {};
+    const { option, caption, description, truncate: contentTruncate } = content || {};
     const interactive = !inactive;
     const { parentResetActiveFocusIndex } = useParentListContext();
     const { size, marker, parent } = useListContext();
@@ -70,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: 1 }) }), caption && _jsx("span", { className: styles.caption, children: caption })] }), description && (_jsx("div", { className: styles.description, children: _jsx(TruncateString, { text: description, maxLines: 2 }) }))] }), 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, { 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/BaseItem/styles.module.css

@@ -78,6 +78,9 @@
   box-sizing:border-box;
 }
 
+.droplistItem{
+  width:100%;
+}
 .droplistItem[data-size=s]{
   padding-left:calc(var(--level, 0) * var(--dimension-050m, 4px) + var(--space-drop-list-item-s-container-horizontal-padding, 8px));
 }
@@ -171,13 +174,6 @@
   letter-spacing:var(--sans-body-m-letter-spacing, 0.1px);
   paragraph-spacing:var(--sans-body-m-paragraph-spacing, 7.7px);
 }
-.droplistItem[data-parent=list]{
-  width:100%;
-}
-.droplistItem[data-parent=droplist]{
-  width:-moz-max-content;
-  width:max-content;
-}
 .droplistItem[data-non-pointer]{
   cursor:inherit;
 }

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

@@ -6,6 +6,10 @@ export type ItemContentProps = {
     option: string;
     caption?: string;
     description?: string;
+    truncate?: {
+        option?: number;
+        description?: number;
+    };
 };
 export type BaseItemPrivateProps = {
     expandIcon?: ReactNode;

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "List",
-  "version": "0.7.1",
+  "version": "0.8.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -54,5 +54,5 @@
   "peerDependencies": {
     "@snack-uikit/locale": "*"
   },
-  "gitHead": "119fad909bd43cf932cd251a439cc1ce73669070"
+  "gitHead": "113e80e60c1a5ce1ce6957d48d37a6181991c5fd"
 }

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

@@ -36,7 +36,7 @@ export function BaseItem({
   itemWrapRender,
   ...rest
 }: AllBaseItemProps) {
-  const { option, caption, description } = content || {};
+  const { option, caption, description, truncate: contentTruncate } = content || {};
   const interactive = !inactive;
 
   const { parentResetActiveFocusIndex } = useParentListContext();
@@ -145,14 +145,22 @@ export function BaseItem({
       <div className={styles.content}>
         <div className={styles.headline}>
           <span className={styles.option}>
-            <TruncateString text={option} maxLines={1} />
+            <TruncateString
+              text={option}
+              maxLines={contentTruncate?.option ?? 1}
+              data-test-id='list__base-item-option'
+            />
           </span>
           {caption && <span className={styles.caption}>{caption}</span>}
         </div>
 
         {description && (
           <div className={styles.description}>
-            <TruncateString text={description} maxLines={2} />
+            <TruncateString
+              text={description}
+              maxLines={contentTruncate?.description ?? 2}
+              data-test-id='list__base-item-description'
+            />
           </div>
         )}
       </div>

package/src/components/Items/BaseItem/styles.module.scss

@@ -110,6 +110,8 @@ $typography: (
 }
 
 .droplistItem {
+  width: 100%;
+
   @each $size in $sizes {
     &[data-size='#{$size}'] {
       padding-left: calc(
@@ -134,14 +136,6 @@ $typography: (
     }
   }
 
-  &[data-parent='list'] {
-    width: 100%;
-  }
-
-  &[data-parent='droplist'] {
-    width: max-content;
-  }
-
   &[data-non-pointer] {
     cursor: inherit;
   }

package/src/components/Items/types.ts

@@ -9,6 +9,10 @@ export type ItemContentProps = {
   option: string;
   caption?: string;
   description?: string;
+  truncate?: {
+    option?: number;
+    description?: number;
+  };
 };
 
 export type BaseItemPrivateProps = {