@snack-uikit/list 0.14.1 → 0.14.3-preview-8898cdde.0

package/CHANGELOG.md

@@ -3,6 +3,15 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 0.14.2 (2024-07-29)
+
+### Only dependencies have been changed
+* [@snack-uikit/toggles@0.10.2](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/toggles/CHANGELOG.md)
+
+
+
+
+
 ## 0.14.1 (2024-07-19)
 
 ### Only dependencies have been changed

package/README.md

@@ -122,7 +122,7 @@
 | option* | `string \| number` | - |  |
 | caption | `string` | - |  |
 | description | `string` | - |  |
-| truncate | `{ option?: number; description?: number; variant?: "end" \| "middle"; }` | - |  |
+| truncate | `TruncateProps` | - |  |
 | disabled | `boolean` | - |  |
 | className | `string` | - | CSS-класс |
 

package/dist/components/Items/BaseItem/styles.module.css

@@ -57,21 +57,21 @@
 }
 .droplistItem[data-size=s] .headline{
   gap:var(--space-drop-list-item-s-container-headline-gap, 8px);
-  height:var(--size-drop-list-item-headline, 24px);
+  min-height:var(--size-drop-list-item-headline, 24px);
 }
 .droplistItem[data-size=m]{
   padding-left:calc(var(--level, 0) * var(--dimension-050m, 4px) + var(--space-drop-list-item-m-container-horizontal-padding, 10px));
 }
 .droplistItem[data-size=m] .headline{
   gap:var(--space-drop-list-item-m-container-headline-gap, 8px);
-  height:var(--size-drop-list-item-headline, 24px);
+  min-height:var(--size-drop-list-item-headline, 24px);
 }
 .droplistItem[data-size=l]{
   padding-left:calc(var(--level, 0) * var(--dimension-050m, 4px) + var(--space-drop-list-item-l-container-horizontal-padding, 12px));
 }
 .droplistItem[data-size=l] .headline{
   gap:var(--space-drop-list-item-l-container-headline-gap, 8px);
-  height:var(--size-drop-list-item-headline, 24px);
+  min-height:var(--size-drop-list-item-headline, 24px);
 }
 .droplistItem[data-non-pointer]{
   cursor:inherit;

package/dist/components/Items/styles.module.css

@@ -26,24 +26,30 @@
   cursor:not-allowed;
   background-color:transparent;
 }
-.itemWrapper:not([data-inactive], [data-disabled])[data-open]::before, .itemWrapper:not([data-inactive], [data-disabled])[data-focused]::before, .itemWrapper:not([data-inactive], [data-disabled]):hover::before, .itemWrapper:not([data-inactive], [data-disabled]):focus-visible::before{
+.itemWrapper:not([data-inactive], [data-disabled])[data-open]::before, .itemWrapper:not([data-inactive], [data-disabled])[data-focused]::before, .itemWrapper:not([data-inactive], [data-disabled]):focus-visible::before{
   opacity:var(--opacity-a008, 0.08);
   background-color:var(--sys-neutral-accent-default, #787b8a);
 }
+@media (hover: hover){
+  .itemWrapper:not([data-inactive], [data-disabled]):hover::before{
+    opacity:var(--opacity-a008, 0.08);
+    background-color:var(--sys-neutral-accent-default, #787b8a);
+  }
+}
 
 .listItem{
   cursor:pointer;
   position:relative;
   display:flex;
   flex-direction:row;
-  align-items:center;
+  align-items:flex-start;
   box-sizing:border-box;
   width:-moz-max-content;
   width:max-content;
   min-width:100%;
   margin:0;
   padding:0;
-  color:var(--sys-neutral-text-main, #33343f);
+  color:var(--sys-neutral-text-main, #41424e);
   text-align:start;
   -webkit-appearance:unset;
      -moz-appearance:unset;

package/dist/components/Lists/List/List.d.ts

@@ -1,16 +1,16 @@
 import { KeyboardEvent } from 'react';
 export declare const List: import("react").ForwardRefExoticComponent<{
-    'data-test-id'?: string | undefined;
+    'data-test-id'?: string;
 } & import("react").AriaAttributes & {
     items: import("../../Items").Item[];
-    pinTop?: import("../../Items").Item[] | undefined;
-    pinBottom?: import("../../Items").Item[] | undefined;
+    pinTop?: import("../../Items").Item[];
+    pinBottom?: import("../../Items").Item[];
     footer?: import("react").ReactNode;
-    footerActiveElementsRefs?: import("react").RefObject<HTMLElement>[] | undefined;
-    search?: import("../../..").SearchState | undefined;
-    tabIndex?: number | undefined;
-    collapse?: import("../contexts").CollapseState | undefined;
-    className?: string | undefined;
+    footerActiveElementsRefs?: import("react").RefObject<HTMLElement>[];
+    search?: import("../../..").SearchState;
+    tabIndex?: number;
+    collapse?: import("../contexts").CollapseState;
+    className?: string;
     onKeyDown?(e: KeyboardEvent<HTMLElement>): void;
-    loading?: boolean | undefined;
+    loading?: boolean;
 } & import("../contexts").SelectionState & import("../contexts").PublicListContextType & import("../../../types").ScrollProps & import("../types").EmptyState & import("react").RefAttributes<HTMLElement>>;

package/dist/components/Lists/ListPrivate/ListPrivate.d.ts

@@ -1,14 +1,13 @@
-/// <reference types="react" />
 export declare const ListPrivate: import("react").ForwardRefExoticComponent<Omit<import("../types").ListProps, "items" | "pinTop" | "pinBottom"> & {
-    nested?: boolean | undefined;
-    active?: boolean | undefined;
-    tabIndex?: number | undefined;
-    onFocus?(e: import("react").FocusEvent<HTMLElement, Element>): void;
-    onBlur?(e: import("react").FocusEvent<HTMLElement, Element>): void;
+    nested?: boolean;
+    active?: boolean;
+    tabIndex?: number;
+    onFocus?(e: import("react").FocusEvent<HTMLElement>): void;
+    onBlur?(e: import("react").FocusEvent<HTMLElement>): void;
     onKeyDown?(e: import("react").KeyboardEvent<HTMLElement>): void;
-    limitedScrollHeight?: boolean | undefined;
-    searchItem?: import("../../Items").FlattenBaseItem | undefined;
-    pinTop?: import("../../Items").ItemId[] | undefined;
+    limitedScrollHeight?: boolean;
+    searchItem?: import("../../Items").FlattenBaseItem;
+    pinTop?: import("../../Items").ItemId[];
     items: import("../../Items").ItemId[];
-    pinBottom?: import("../../Items").ItemId[] | undefined;
+    pinBottom?: import("../../Items").ItemId[];
 } & import("react").RefAttributes<HTMLElement>>;

package/dist/components/Lists/contexts/CollapseProvider.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ItemId } from '../../Items';
 export type CollapseLevelContextType = {
     level?: number;

package/dist/components/Lists/contexts/OpenListProvider.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export type OpenListContextType = {
     closeDroplistOnItemClick?: boolean;
     closeDroplist(): void;

package/dist/helperComponents/ItemContent/ItemContent.d.ts

@@ -1,15 +1,17 @@
 import { TruncateStringProps } from '@snack-uikit/truncate-string';
 import { WithSupportProps } from '@snack-uikit/utils';
+type TruncateProps = {
+    option?: number | null;
+    description?: number | null;
+    variant?: TruncateStringProps['variant'];
+};
 export type ItemContentProps = WithSupportProps<{
     option: string | number;
     caption?: string;
     description?: string;
-    truncate?: {
-        option?: number;
-        description?: number;
-        variant?: TruncateStringProps['variant'];
-    };
+    truncate?: TruncateProps;
     disabled?: boolean;
     className?: string;
 }>;
-export declare function ItemContent({ truncate, caption, description, option, className, disabled, ...rest }: ItemContentProps): import("react/jsx-runtime").JSX.Element;
+export declare function ItemContent({ truncate: truncateProp, caption, description, option, className, disabled, ...rest }: ItemContentProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/helperComponents/ItemContent/ItemContent.js

@@ -11,13 +11,20 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import cn from 'classnames';
+import { useMemo } from 'react';
 import { TruncateString } from '@snack-uikit/truncate-string';
 import { extractSupportProps } from '@snack-uikit/utils';
 import { useNewListContext } from '../../components/Lists/contexts';
 import styles from './styles.module.css';
+const DEFAULT_TRUNCATE = {
+    option: 1,
+    description: 2,
+    variant: 'end',
+};
 export function ItemContent(_a) {
-    var _b, _c;
-    var { truncate, caption, description, option, className, disabled } = _a, rest = __rest(_a, ["truncate", "caption", "description", "option", "className", "disabled"]);
+    var _b;
+    var { truncate: truncateProp, caption, description, option, className, disabled } = _a, rest = __rest(_a, ["truncate", "caption", "description", "option", "className", "disabled"]);
     const { size = 's' } = useNewListContext();
-    return (_jsxs("div", Object.assign({ className: cn(styles.content, className) }, extractSupportProps(rest), { "data-size": size !== null && size !== void 0 ? size : 's', "data-disabled": disabled || undefined, children: [_jsxs("div", { className: styles.headline, children: [_jsx("span", { className: styles.label, children: _jsx(TruncateString, { variant: truncate === null || truncate === void 0 ? void 0 : truncate.variant, text: String(option), maxLines: (_b = truncate === null || truncate === void 0 ? void 0 : truncate.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 = truncate === null || truncate === void 0 ? void 0 : truncate.description) !== null && _c !== void 0 ? _c : 2, "data-test-id": 'list__base-item-description' }) }))] })));
+    const truncate = useMemo(() => (Object.assign(Object.assign({}, DEFAULT_TRUNCATE), truncateProp)), [truncateProp]);
+    return (_jsxs("div", Object.assign({ className: cn(styles.content, className) }, extractSupportProps(rest), { "data-size": size !== null && size !== void 0 ? size : 's', "data-disabled": disabled || undefined, children: [_jsxs("div", { className: styles.headline, children: [_jsx("div", { className: styles.label, children: _jsx(TruncateString, { variant: truncate === null || truncate === void 0 ? void 0 : truncate.variant, text: String(option), maxLines: truncate === null || truncate === void 0 ? void 0 : truncate.option, "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: (_b = truncate === null || truncate === void 0 ? void 0 : truncate.description) !== null && _b !== void 0 ? _b : 2, "data-test-id": 'list__base-item-description' }) }))] })));
 }

package/dist/helperComponents/ItemContent/styles.module.css

@@ -1,12 +1,11 @@
 .headline{
   display:flex;
-  align-items:center;
 }
 
 .label{
   overflow:hidden;
   flex:1;
-  color:var(--sys-neutral-text-main, #33343f);
+  color:var(--sys-neutral-text-main, #41424e);
 }
 
 .caption{
@@ -28,7 +27,7 @@
 }
 .content[data-size=s] .headline{
   gap:var(--space-drop-list-item-s-container-headline-gap, 8px);
-  height:var(--size-drop-list-item-headline, 24px);
+  min-height:var(--size-drop-list-item-headline, 24px);
 }
 .content[data-size=s] .label{
   font-family:var(--sans-body-s-font-family, SB Sans Interface);
@@ -37,6 +36,8 @@
   font-size:var(--sans-body-s-font-size, 12px);
   letter-spacing:var(--sans-body-s-letter-spacing, 0.1px);
   paragraph-spacing:var(--sans-body-s-paragraph-spacing, 6.6px);
+  display:flex;
+  align-items:center;
 }
 .content[data-size=s] .caption{
   font-family:var(--sans-body-s-font-family, SB Sans Interface);
@@ -56,7 +57,7 @@
 }
 .content[data-size=m] .headline{
   gap:var(--space-drop-list-item-m-container-headline-gap, 8px);
-  height:var(--size-drop-list-item-headline, 24px);
+  min-height:var(--size-drop-list-item-headline, 24px);
 }
 .content[data-size=m] .label{
   font-family:var(--sans-body-m-font-family, SB Sans Interface);
@@ -65,6 +66,8 @@
   font-size:var(--sans-body-m-font-size, 14px);
   letter-spacing:var(--sans-body-m-letter-spacing, 0.1px);
   paragraph-spacing:var(--sans-body-m-paragraph-spacing, 7.7px);
+  display:flex;
+  align-items:center;
 }
 .content[data-size=m] .caption{
   font-family:var(--sans-body-s-font-family, SB Sans Interface);
@@ -84,7 +87,7 @@
 }
 .content[data-size=l] .headline{
   gap:var(--space-drop-list-item-l-container-headline-gap, 8px);
-  height:var(--size-drop-list-item-headline, 24px);
+  min-height:var(--size-drop-list-item-headline, 24px);
 }
 .content[data-size=l] .label{
   font-family:var(--sans-body-l-font-family, SB Sans Interface);
@@ -93,6 +96,8 @@
   font-size:var(--sans-body-l-font-size, 16px);
   letter-spacing:var(--sans-body-l-letter-spacing, 0.1px);
   paragraph-spacing:var(--sans-body-l-paragraph-spacing, 8.8px);
+  display:flex;
+  align-items:center;
 }
 .content[data-size=l] .caption{
   font-family:var(--sans-body-m-font-family, SB Sans Interface);

package/dist/helperComponents/ListEmptyState/ListEmptyState.js

@@ -6,13 +6,13 @@ export function ListEmptyState({ dataError, dataFiltered, hasNoItems, emptyState
         return null;
     }
     if (dataError) {
-        return (_jsx("div", { className: styles.listEmptyStateWrapper, children: _jsx(InfoBlock, Object.assign({}, emptyStates.errorDataState, { size: 's', align: 'vertical' })) }));
+        return (_jsx("div", { className: styles.listEmptyStateWrapper, children: _jsx(InfoBlock, Object.assign({}, emptyStates.errorDataState, { size: 'm', align: 'vertical' })) }));
     }
     if (dataFiltered && hasNoItems) {
-        return (_jsx("div", { className: styles.listEmptyStateWrapper, children: _jsx(InfoBlock, Object.assign({}, emptyStates.noResultsState, { size: 's', align: 'vertical', "data-test-id": 'list__no-results' })) }));
+        return (_jsx("div", { className: styles.listEmptyStateWrapper, children: _jsx(InfoBlock, Object.assign({}, emptyStates.noResultsState, { size: 'm', align: 'vertical', "data-test-id": 'list__no-results' })) }));
     }
     if (!dataFiltered && hasNoItems) {
-        return (_jsx("div", { className: styles.listEmptyStateWrapper, children: _jsx(InfoBlock, Object.assign({}, emptyStates.noDataState, { size: 's', align: 'vertical', "data-test-id": 'list__no-data' })) }));
+        return (_jsx("div", { className: styles.listEmptyStateWrapper, children: _jsx(InfoBlock, Object.assign({}, emptyStates.noDataState, { size: 'm', align: 'vertical', "data-test-id": 'list__no-data' })) }));
     }
     return null;
 }

package/dist/helperComponents/Separator/styles.module.css

@@ -108,7 +108,7 @@
   flex-shrink:1;
 }
 .label[data-mode=primary]{
-  color:var(--sys-neutral-text-main, #33343f);
+  color:var(--sys-neutral-text-main, #41424e);
 }
 .label[data-mode=secondary]{
   color:var(--sys-neutral-text-light, #8b8e9b);

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "List",
-  "version": "0.14.1",
+  "version": "0.14.3-preview-8898cdde.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -32,16 +32,16 @@
   "license": "Apache-2.0",
   "scripts": {},
   "dependencies": {
-    "@snack-uikit/button": "0.17.2",
+    "@snack-uikit/button": "0.17.3-preview-8898cdde.0",
     "@snack-uikit/divider": "3.0.3",
     "@snack-uikit/dropdown": "0.2.4",
     "@snack-uikit/icons": "0.22.0",
-    "@snack-uikit/info-block": "0.4.4",
+    "@snack-uikit/info-block": "0.4.5-preview-8898cdde.0",
     "@snack-uikit/loaders": "0.5.2",
     "@snack-uikit/scroll": "0.6.0",
     "@snack-uikit/search-private": "0.2.2",
-    "@snack-uikit/toggles": "0.10.1",
-    "@snack-uikit/truncate-string": "0.4.20",
+    "@snack-uikit/toggles": "0.10.2",
+    "@snack-uikit/truncate-string": "0.4.21-preview-8898cdde.0",
     "@snack-uikit/utils": "3.3.0",
     "classnames": "2.5.1",
     "merge-refs": "1.2.2"
@@ -49,5 +49,5 @@
   "peerDependencies": {
     "@snack-uikit/locale": "*"
   },
-  "gitHead": "4c153b54a2902cf20883d85b4dc753344313c6cb"
+  "gitHead": "a0351f376ac28462b847d1bf99ad3f7ba7a1d0cd"
 }

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

@@ -43,13 +43,21 @@ $sizes: 's', 'm', 'l';
   &:not([data-inactive], [data-disabled]) {
     &[data-open],
     &[data-focused],
-    &:hover,
     &:focus-visible {
       &::before {
         opacity: $opacity-a008;
         background-color: $sys-neutral-accent-default;
       }
     }
+
+    @media (hover: hover) {
+      &:hover {
+        &::before {
+          opacity: $opacity-a008;
+          background-color: $sys-neutral-accent-default;
+        }
+      }
+    }
   }
 }
 
@@ -60,7 +68,7 @@ $sizes: 's', 'm', 'l';
 
   display: flex;
   flex-direction: row;
-  align-items: center;
+  align-items: flex-start;
 
   box-sizing: border-box;
   width: max-content;

package/src/helperComponents/ItemContent/ItemContent.tsx

@@ -1,4 +1,5 @@
 import cn from 'classnames';
+import { useMemo } from 'react';
 
 import { TruncateString, TruncateStringProps } from '@snack-uikit/truncate-string';
 import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
@@ -6,21 +7,29 @@ import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
 import { useNewListContext } from '../../components/Lists/contexts';
 import styles from './styles.module.scss';
 
+type TruncateProps = {
+  option?: number | null;
+  description?: number | null;
+  variant?: TruncateStringProps['variant'];
+};
+
 export type ItemContentProps = WithSupportProps<{
   option: string | number;
   caption?: string;
   description?: string;
-  truncate?: {
-    option?: number;
-    description?: number;
-    variant?: TruncateStringProps['variant'];
-  };
+  truncate?: TruncateProps;
   disabled?: boolean;
   className?: string;
 }>;
 
+const DEFAULT_TRUNCATE: TruncateProps = {
+  option: 1,
+  description: 2,
+  variant: 'end',
+};
+
 export function ItemContent({
-  truncate,
+  truncate: truncateProp,
   caption,
   description,
   option,
@@ -29,6 +38,13 @@ export function ItemContent({
   ...rest
 }: ItemContentProps) {
   const { size = 's' } = useNewListContext();
+  const truncate = useMemo(
+    () => ({
+      ...DEFAULT_TRUNCATE,
+      ...truncateProp,
+    }),
+    [truncateProp],
+  );
 
   return (
     <div
@@ -38,14 +54,14 @@ export function ItemContent({
       data-disabled={disabled || undefined}
     >
       <div className={styles.headline}>
-        <span className={styles.label}>
+        <div className={styles.label}>
           <TruncateString
             variant={truncate?.variant}
             text={String(option)}
-            maxLines={truncate?.option ?? 1}
+            maxLines={truncate?.option}
             data-test-id='list__base-item-option'
           />
-        </span>
+        </div>
         {caption && <span className={styles.caption}>{caption}</span>}
       </div>
 

package/src/helperComponents/ItemContent/styles.module.scss

@@ -25,7 +25,7 @@ $typography: (
 
 .headline {
   display: flex;
-  align-items: center;
+  // align-items: flex-start;
 }
 
 .label {
@@ -58,6 +58,10 @@ $typography: (
       }
       .label {
         @include composite-var($typography, $size, 'label');
+
+        display: flex;
+        align-items: center;
+        // height: 100%;
       }
       .caption {
         @include composite-var($typography, $size, 'caption');

package/src/helperComponents/ListEmptyState/ListEmptyState.tsx

@@ -24,7 +24,7 @@ export function ListEmptyState({ dataError, dataFiltered, hasNoItems, emptyState
   if (dataError) {
     return (
       <div className={styles.listEmptyStateWrapper}>
-        <InfoBlock {...emptyStates.errorDataState} size='s' align='vertical' />
+        <InfoBlock {...emptyStates.errorDataState} size='m' align='vertical' />
       </div>
     );
   }
@@ -32,7 +32,7 @@ export function ListEmptyState({ dataError, dataFiltered, hasNoItems, emptyState
   if (dataFiltered && hasNoItems) {
     return (
       <div className={styles.listEmptyStateWrapper}>
-        <InfoBlock {...emptyStates.noResultsState} size='s' align='vertical' data-test-id='list__no-results' />
+        <InfoBlock {...emptyStates.noResultsState} size='m' align='vertical' data-test-id='list__no-results' />
       </div>
     );
   }
@@ -40,7 +40,7 @@ export function ListEmptyState({ dataError, dataFiltered, hasNoItems, emptyState
   if (!dataFiltered && hasNoItems) {
     return (
       <div className={styles.listEmptyStateWrapper}>
-        <InfoBlock {...emptyStates.noDataState} size='s' align='vertical' data-test-id='list__no-data' />
+        <InfoBlock {...emptyStates.noDataState} size='m' align='vertical' data-test-id='list__no-data' />
       </div>
     );
   }