@snack-uikit/list 0.9.2-preview-c8f85f20.0 → 0.10.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 0.10.0 (2024-04-08)
+
+
+### Features
+
+* **FF-4649:** improve api ([4932e19](https://github.com/cloud-ru-tech/snack-uikit/commit/4932e192c9c2a1f324b7baeb9d7759e4fcc64c90))
+
+
+
+
+
 ## 0.9.1 (2024-03-26)
 
 ### Only dependencies have been changed

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

@@ -1,2 +1,2 @@
 import { NextListItemProps } from '../types';
-export declare function NextListItem({ items: itemsProp, placement, id, search, scroll, scrollRef, disabled, onSublistOpenChanged, ...option }: NextListItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function NextListItem({ items: itemsProp, placement, id, search, scroll, scrollRef, disabled, onSublistOpenChanged, loading, ...option }: NextListItemProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Items/NextListItem/NextListItem.js

@@ -28,7 +28,7 @@ const FALLBACK_PLACEMENTS = [
     'left-end',
 ];
 export function NextListItem(_a) {
-    var { items: itemsProp, placement = 'right-start', id, search, scroll, scrollRef, disabled, onSublistOpenChanged } = _a, option = __rest(_a, ["items", "placement", "id", "search", "scroll", "scrollRef", "disabled", "onSublistOpenChanged"]);
+    var { items: itemsProp, placement = 'right-start', id, search, scroll, scrollRef, disabled, onSublistOpenChanged, loading = false } = _a, option = __rest(_a, ["items", "placement", "id", "search", "scroll", "scrollRef", "disabled", "onSublistOpenChanged", "loading"]);
     const listRef = useRef(null);
     const [openCollapsedItems, setOpenCollapsedItems] = useState([]);
     const { items, itemRefs, ids, expandedIds } = useMemo(() => withCollapsedItems({
@@ -63,5 +63,5 @@ export function NextListItem(_a) {
                 parentResetNestedIndex: resetNestedIndex,
                 parentResetActiveFocusIndex: resetActiveFocusIndex,
                 toggleOpenCollapsedItems: id => setOpenCollapsedItems(items => items.includes(id) ? items.filter(item => item !== id) : items.concat([id])),
-            }, children: _jsx(ListPrivate, { onKeyDown: handleListKeyDown, items: items, nested: true, search: search, scroll: scroll, scrollRef: scrollRef, limitedScrollHeight: true }) }), trigger: 'hover', open: (open || parentIds[parentOpenNestedIndex] === id) && !disabled, onOpenChange: handleOpenChange, placement: placement, widthStrategy: 'auto', children: _jsx(BaseItem, Object.assign({}, option, { disabled: disabled, open: open, expandIcon: _jsx(ChevronRightSVG, {}), id: id, isParentNode: true, indeterminate: isIndeterminate && !checked, onSelect: handleOnSelect })) }));
+            }, children: _jsx(ListPrivate, { onKeyDown: handleListKeyDown, items: items, nested: true, search: search, scroll: scroll, scrollRef: scrollRef, limitedScrollHeight: true, loading: loading }) }), trigger: 'hover', open: (open || parentIds[parentOpenNestedIndex] === id) && !disabled, onOpenChange: handleOpenChange, placement: placement, widthStrategy: 'auto', children: _jsx(BaseItem, Object.assign({}, option, { disabled: disabled, open: open, expandIcon: _jsx(ChevronRightSVG, {}), id: id, isParentNode: true, indeterminate: isIndeterminate && !checked, onSelect: handleOnSelect })) }));
 }

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

@@ -71,6 +71,7 @@ export type NextListItemProps = BaseItemsWithoutNonGroupProps & {
     placement?: 'right-start' | 'left-start' | 'left' | 'right' | 'left-end' | 'right-end';
     search?: SearchState;
     onSublistOpenChanged?(open: boolean, id?: string | number): void;
+    loading?: boolean;
 } & ScrollProps;
 export type GroupItemProps = Omit<SeparatorProps, 'size'> & {
     items: ItemProps[];

package/dist/components/Lists/ListPrivate/styles.module.css

@@ -7,18 +7,21 @@
   height:var(--dimension-3m, 24px);
 }
 .loader[data-size=s][data-no-items]{
+  min-width:calc(2 * 3 * var(--dimension-3m, 24px));
   height:calc(3 * var(--dimension-3m, 24px));
 }
 .loader[data-size=m]{
   height:var(--dimension-4m, 32px);
 }
 .loader[data-size=m][data-no-items]{
+  min-width:calc(2 * 3 * var(--dimension-4m, 32px));
   height:calc(3 * var(--dimension-4m, 32px));
 }
 .loader[data-size=l]{
   height:var(--dimension-5m, 40px);
 }
 .loader[data-size=l][data-no-items]{
+  min-width:calc(2 * 3 * var(--dimension-5m, 40px));
   height:calc(3 * var(--dimension-5m, 40px));
 }
 .loader:focus-visible{

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "List",
-  "version": "0.9.2-preview-c8f85f20.0",
+  "version": "0.10.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -54,5 +54,5 @@
   "peerDependencies": {
     "@snack-uikit/locale": "*"
   },
-  "gitHead": "ea14f754dfbf6945af70539c95eef2784117743d"
+  "gitHead": "381565b14f3e08082b29add05be8f982fa8f4c2f"
 }

package/src/components/Items/NextListItem/NextListItem.tsx

@@ -29,6 +29,7 @@ export function NextListItem({
   scrollRef,
   disabled,
   onSublistOpenChanged,
+  loading = false,
   ...option
 }: NextListItemProps) {
   const listRef = useRef<HTMLUListElement>(null);
@@ -109,6 +110,7 @@ export function NextListItem({
             scroll={scroll}
             scrollRef={scrollRef}
             limitedScrollHeight
+            loading={loading}
           />
         </ParentListContext.Provider>
       }

package/src/components/Items/types.ts

@@ -88,6 +88,7 @@ export type NextListItemProps = BaseItemsWithoutNonGroupProps & {
   placement?: 'right-start' | 'left-start' | 'left' | 'right' | 'left-end' | 'right-end';
   search?: SearchState;
   onSublistOpenChanged?(open: boolean, id?: string | number): void;
+  loading?: boolean;
 } & ScrollProps;
 
 export type GroupItemProps = Omit<SeparatorProps, 'size'> & {

package/src/components/Lists/ListPrivate/styles.module.scss

@@ -18,7 +18,10 @@ $loader-height: (
       height: simple-var($loader-height, $size);
 
       &[data-no-items] {
-        height: calc(3 * simple-var($loader-height, $size));
+        $no-items-loading-height: calc(3 * simple-var($loader-height, $size));
+
+        min-width: calc(2 * $no-items-loading-height);
+        height: $no-items-loading-height;
       }
     }
   }