@snack-uikit/list 0.28.1 → 0.29.0

package/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 0.29.0 (2025-05-14)
+
+
+### Bug Fixes
+
+* **FF-6490:** list item before content min-size ([56732b0](https://github.com/cloud-ru-tech/snack-uikit/commit/56732b047edabe2617a614378dbc9413a0b60f9d))
+
+
+### Features
+
+* **FF-6490:** pass List size prop to emptyStates ([07f5425](https://github.com/cloud-ru-tech/snack-uikit/commit/07f5425db9fcaf250a910a2cf8b1e572746933ab))
+
+
+
+
+
 ## 0.28.1 (2025-05-12)
 
 ### Only dependencies have been changed

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

@@ -14,8 +14,8 @@
   flex-shrink:0;
   align-items:center;
   justify-content:center;
-  width:var(--size-icon-container-s, 24px);
-  height:var(--size-icon-container-s, 24px);
+  min-width:var(--size-icon-container-s, 24px);
+  min-height:var(--size-icon-container-s, 24px);
   color:var(--sys-neutral-text-light, #8b8e9b);
 }
 .beforeContent svg{

package/dist/cjs/components/Lists/ListPrivate/ListPrivate.js

@@ -132,10 +132,11 @@ exports.ListPrivate = (0, react_1.forwardRef)((_a, ref) => {
         dataError: dataError,
         emptyStates: emptyStates,
         hasNoItems: hasNoItems,
-        dataFiltered: dataFiltered !== null && dataFiltered !== void 0 ? dataFiltered : Boolean(search === null || search === void 0 ? void 0 : search.value)
+        dataFiltered: dataFiltered !== null && dataFiltered !== void 0 ? dataFiltered : Boolean(search === null || search === void 0 ? void 0 : search.value),
+        size: size
       })]
     });
-  }, [dataError, dataFiltered, emptyStates, hasNoItems, itemsJSX, loading, loadingJSX, search === null || search === void 0 ? void 0 : search.value, virtualItems, virtualized, virtualizer]);
+  }, [dataError, dataFiltered, emptyStates, hasNoItems, itemsJSX, loading, loadingJSX, search === null || search === void 0 ? void 0 : search.value, size, virtualItems, virtualized, virtualizer]);
   const onScrollInitialized = () => {
     var _a, _b;
     if (scrollToSelectedItem) {

package/dist/cjs/helperComponents/ListEmptyState/ListEmptyState.d.ts

@@ -1,5 +1,6 @@
 import { InfoBlockProps } from '@snack-uikit/info-block';
-export type EmptyStateProps = Pick<InfoBlockProps, 'description' | 'icon' | 'data-test-id' | 'footer'>;
+import { ListPrivateProps } from '../../components/Lists/types';
+export type EmptyStateProps = Pick<InfoBlockProps, 'description' | 'icon' | 'data-test-id' | 'footer' | 'className'>;
 export type ListEmptyState = {
     emptyStates: {
         noDataState: EmptyStateProps;
@@ -10,5 +11,6 @@ export type ListEmptyState = {
     dataError?: boolean;
     dataFiltered?: boolean;
     hasNoItems: boolean;
+    size: ListPrivateProps['size'];
 };
-export declare function ListEmptyState({ dataError, dataFiltered, hasNoItems, emptyStates, loading }: ListEmptyState): import("react/jsx-runtime").JSX.Element | null;
+export declare function ListEmptyState({ dataError, dataFiltered, hasNoItems, emptyStates, loading, size }: ListEmptyState): import("react/jsx-runtime").JSX.Element | null;

package/dist/cjs/helperComponents/ListEmptyState/ListEmptyState.js

@@ -18,7 +18,8 @@ function ListEmptyState(_ref) {
     dataFiltered,
     hasNoItems,
     emptyStates,
-    loading
+    loading,
+    size
   } = _ref;
   if (loading) {
     return null;
@@ -27,7 +28,7 @@ function ListEmptyState(_ref) {
     return (0, jsx_runtime_1.jsx)("div", {
       className: styles_module_scss_1.default.listEmptyStateWrapper,
       children: (0, jsx_runtime_1.jsx)(info_block_1.InfoBlock, Object.assign({}, emptyStates.errorDataState, {
-        size: 'm',
+        size: size,
         align: 'vertical'
       }))
     });
@@ -36,7 +37,7 @@ function ListEmptyState(_ref) {
     return (0, jsx_runtime_1.jsx)("div", {
       className: styles_module_scss_1.default.listEmptyStateWrapper,
       children: (0, jsx_runtime_1.jsx)(info_block_1.InfoBlock, Object.assign({}, emptyStates.noResultsState, {
-        size: 'm',
+        size: size,
         align: 'vertical',
         "data-test-id": 'list__no-results'
       }))
@@ -46,7 +47,7 @@ function ListEmptyState(_ref) {
     return (0, jsx_runtime_1.jsx)("div", {
       className: styles_module_scss_1.default.listEmptyStateWrapper,
       children: (0, jsx_runtime_1.jsx)(info_block_1.InfoBlock, Object.assign({}, emptyStates.noDataState, {
-        size: 'm',
+        size: size,
         align: 'vertical',
         "data-test-id": 'list__no-data'
       }))

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

@@ -14,8 +14,8 @@
   flex-shrink:0;
   align-items:center;
   justify-content:center;
-  width:var(--size-icon-container-s, 24px);
-  height:var(--size-icon-container-s, 24px);
+  min-width:var(--size-icon-container-s, 24px);
+  min-height:var(--size-icon-container-s, 24px);
   color:var(--sys-neutral-text-light, #8b8e9b);
 }
 .beforeContent svg{

package/dist/esm/components/Lists/ListPrivate/ListPrivate.js

@@ -46,7 +46,7 @@ export const ListPrivate = forwardRef((_a, ref) => {
     const loadingJSX = useMemo(() => loading && (_jsx("div", { role: 'spinbutton', tabIndex: -1, className: styles.loader, "data-size": size, "data-no-items": hasNoItems || undefined, "data-test-id": 'list__loader', children: _jsx(Spinner, { size: size === 'l' ? 's' : 'xs' }) })), [hasNoItems, loading, size]);
     const content = useMemo(() => {
         var _a, _b;
-        return (_jsxs("div", { className: styles.content, children: [virtualized ? (_jsx("div", { className: styles.virtualizedContainer, style: { height: virtualizer.getTotalSize() }, tabIndex: -1, children: _jsx("div", { className: styles.virtualizedPositionBox, style: { transform: `translateY(${(_b = (_a = virtualItems[0]) === null || _a === void 0 ? void 0 : _a.start) !== null && _b !== void 0 ? _b : 0}px)` }, tabIndex: -1, children: virtualItems.map(virtualRow => (_jsx("div", { "data-index": virtualRow.index, ref: virtualizer.measureElement, tabIndex: -1, children: itemsJSX[virtualRow.index] }, virtualRow.key))) }) })) : (itemsJSX), loadingJSX, _jsx(ListEmptyState, { loading: loading, dataError: dataError, emptyStates: emptyStates, hasNoItems: hasNoItems, dataFiltered: dataFiltered !== null && dataFiltered !== void 0 ? dataFiltered : Boolean(search === null || search === void 0 ? void 0 : search.value) })] }));
+        return (_jsxs("div", { className: styles.content, children: [virtualized ? (_jsx("div", { className: styles.virtualizedContainer, style: { height: virtualizer.getTotalSize() }, tabIndex: -1, children: _jsx("div", { className: styles.virtualizedPositionBox, style: { transform: `translateY(${(_b = (_a = virtualItems[0]) === null || _a === void 0 ? void 0 : _a.start) !== null && _b !== void 0 ? _b : 0}px)` }, tabIndex: -1, children: virtualItems.map(virtualRow => (_jsx("div", { "data-index": virtualRow.index, ref: virtualizer.measureElement, tabIndex: -1, children: itemsJSX[virtualRow.index] }, virtualRow.key))) }) })) : (itemsJSX), loadingJSX, _jsx(ListEmptyState, { loading: loading, dataError: dataError, emptyStates: emptyStates, hasNoItems: hasNoItems, dataFiltered: dataFiltered !== null && dataFiltered !== void 0 ? dataFiltered : Boolean(search === null || search === void 0 ? void 0 : search.value), size: size })] }));
     }, [
         dataError,
         dataFiltered,
@@ -56,6 +56,7 @@ export const ListPrivate = forwardRef((_a, ref) => {
         loading,
         loadingJSX,
         search === null || search === void 0 ? void 0 : search.value,
+        size,
         virtualItems,
         virtualized,
         virtualizer,

package/dist/esm/helperComponents/ListEmptyState/ListEmptyState.d.ts

@@ -1,5 +1,6 @@
 import { InfoBlockProps } from '@snack-uikit/info-block';
-export type EmptyStateProps = Pick<InfoBlockProps, 'description' | 'icon' | 'data-test-id' | 'footer'>;
+import { ListPrivateProps } from '../../components/Lists/types';
+export type EmptyStateProps = Pick<InfoBlockProps, 'description' | 'icon' | 'data-test-id' | 'footer' | 'className'>;
 export type ListEmptyState = {
     emptyStates: {
         noDataState: EmptyStateProps;
@@ -10,5 +11,6 @@ export type ListEmptyState = {
     dataError?: boolean;
     dataFiltered?: boolean;
     hasNoItems: boolean;
+    size: ListPrivateProps['size'];
 };
-export declare function ListEmptyState({ dataError, dataFiltered, hasNoItems, emptyStates, loading }: ListEmptyState): import("react/jsx-runtime").JSX.Element | null;
+export declare function ListEmptyState({ dataError, dataFiltered, hasNoItems, emptyStates, loading, size }: ListEmptyState): import("react/jsx-runtime").JSX.Element | null;

package/dist/esm/helperComponents/ListEmptyState/ListEmptyState.js

@@ -1,18 +1,18 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { InfoBlock } from '@snack-uikit/info-block';
 import styles from './styles.module.css';
-export function ListEmptyState({ dataError, dataFiltered, hasNoItems, emptyStates, loading }) {
+export function ListEmptyState({ dataError, dataFiltered, hasNoItems, emptyStates, loading, size }) {
     if (loading) {
         return null;
     }
     if (dataError) {
-        return (_jsx("div", { className: styles.listEmptyStateWrapper, children: _jsx(InfoBlock, Object.assign({}, emptyStates.errorDataState, { size: 'm', align: 'vertical' })) }));
+        return (_jsx("div", { className: styles.listEmptyStateWrapper, children: _jsx(InfoBlock, Object.assign({}, emptyStates.errorDataState, { size: size, align: 'vertical' })) }));
     }
     if (dataFiltered && hasNoItems) {
-        return (_jsx("div", { className: styles.listEmptyStateWrapper, children: _jsx(InfoBlock, Object.assign({}, emptyStates.noResultsState, { size: 'm', align: 'vertical', "data-test-id": 'list__no-results' })) }));
+        return (_jsx("div", { className: styles.listEmptyStateWrapper, children: _jsx(InfoBlock, Object.assign({}, emptyStates.noResultsState, { size: size, 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: 'm', align: 'vertical', "data-test-id": 'list__no-data' })) }));
+        return (_jsx("div", { className: styles.listEmptyStateWrapper, children: _jsx(InfoBlock, Object.assign({}, emptyStates.noDataState, { size: size, align: 'vertical', "data-test-id": 'list__no-data' })) }));
     }
     return null;
 }

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "List",
-  "version": "0.28.1",
+  "version": "0.29.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -54,5 +54,5 @@
   "peerDependencies": {
     "@snack-uikit/locale": "*"
   },
-  "gitHead": "82c6f5f9fd1845d6752a3cb38e8b2e0fc3cc5c98"
+  "gitHead": "a39f56d39d7322c7de1880df9d4d7459ebb874f8"
 }

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

@@ -24,8 +24,8 @@ $sizes: 's', 'm', 'l';
   align-items: center;
   justify-content: center;
 
-  width: styles-tokens-element.$icon-s;
-  height: styles-tokens-element.$icon-s;
+  min-width: styles-tokens-element.$icon-s;
+  min-height: styles-tokens-element.$icon-s;
 
   color: styles-tokens-dropList.$sys-neutral-text-light;
 

package/src/components/Lists/ListPrivate/ListPrivate.tsx

@@ -124,6 +124,7 @@ export const ListPrivate = forwardRef(
             emptyStates={emptyStates}
             hasNoItems={hasNoItems}
             dataFiltered={dataFiltered ?? Boolean(search?.value)}
+            size={size}
           />
         </div>
       ),
@@ -136,6 +137,7 @@ export const ListPrivate = forwardRef(
         loading,
         loadingJSX,
         search?.value,
+        size,
         virtualItems,
         virtualized,
         virtualizer,

package/src/helperComponents/ListEmptyState/ListEmptyState.tsx

@@ -1,8 +1,9 @@
 import { InfoBlock, InfoBlockProps } from '@snack-uikit/info-block';
 
+import { ListPrivateProps } from '../../components/Lists/types';
 import styles from './styles.module.scss';
 
-export type EmptyStateProps = Pick<InfoBlockProps, 'description' | 'icon' | 'data-test-id' | 'footer'>;
+export type EmptyStateProps = Pick<InfoBlockProps, 'description' | 'icon' | 'data-test-id' | 'footer' | 'className'>;
 
 export type ListEmptyState = {
   emptyStates: {
@@ -14,9 +15,10 @@ export type ListEmptyState = {
   dataError?: boolean;
   dataFiltered?: boolean;
   hasNoItems: boolean;
+  size: ListPrivateProps['size'];
 };
 
-export function ListEmptyState({ dataError, dataFiltered, hasNoItems, emptyStates, loading }: ListEmptyState) {
+export function ListEmptyState({ dataError, dataFiltered, hasNoItems, emptyStates, loading, size }: ListEmptyState) {
   if (loading) {
     return null;
   }
@@ -24,7 +26,7 @@ export function ListEmptyState({ dataError, dataFiltered, hasNoItems, emptyState
   if (dataError) {
     return (
       <div className={styles.listEmptyStateWrapper}>
-        <InfoBlock {...emptyStates.errorDataState} size='m' align='vertical' />
+        <InfoBlock {...emptyStates.errorDataState} size={size} align='vertical' />
       </div>
     );
   }
@@ -32,7 +34,7 @@ export function ListEmptyState({ dataError, dataFiltered, hasNoItems, emptyState
   if (dataFiltered && hasNoItems) {
     return (
       <div className={styles.listEmptyStateWrapper}>
-        <InfoBlock {...emptyStates.noResultsState} size='m' align='vertical' data-test-id='list__no-results' />
+        <InfoBlock {...emptyStates.noResultsState} size={size} align='vertical' data-test-id='list__no-results' />
       </div>
     );
   }
@@ -40,7 +42,7 @@ export function ListEmptyState({ dataError, dataFiltered, hasNoItems, emptyState
   if (!dataFiltered && hasNoItems) {
     return (
       <div className={styles.listEmptyStateWrapper}>
-        <InfoBlock {...emptyStates.noDataState} size='m' align='vertical' data-test-id='list__no-data' />
+        <InfoBlock {...emptyStates.noDataState} size={size} align='vertical' data-test-id='list__no-data' />
       </div>
     );
   }