@snack-uikit/list - npm Package Compare versions

Comparing version 0.2.2-preview-936bde10.0 to 0.3.0

CHANGELOG.md

@@ -6,2 +6,13 @@ # Change Log
 
+# 0.3.0 (2024-02-07)
+
+
+### Features
+
+* **FF-4241:** add itemWrapRender ([4efb798](https://github.com/cloud-ru-tech/snack-uikit/commit/4efb79897b8ef129e89bf62a9332b93d79648bbf))
+
+
+
+
+
 ## 0.2.1 (2024-02-05)
@@ -8,0 +19,0 @@

dist/components/Items/AccordionItem/AccordionItem.js

@@ -40,3 +40,3 @@ var __rest = (this && this.__rest) || function (s, e) {
     };
-    return (_jsx("li", { style: { listStyleType: 'none' }, children: _jsx(CollapseBlockPrivate, { header: _jsx(BaseItem, Object.assign({}, option, { id: id, disabled: disabled, expandIcon: open ? _jsx(ChevronUpSVG, {}) : _jsx(ChevronDownSVG, {}), onClick: handleItemClick, isParentNode: true, onKeyDown: handleKeyDown, indeterminate: isIndeterminate && !checked, onSelect: !disabled ? handleOnSelect : undefined })), expanded: open, "data-test-id": `list__accordion-item-${id}`, children: _jsx(CollapseContext.Provider, { value: { level: level + 1 }, children: itemsJSX }) }) }));
+    return (_jsx(CollapseBlockPrivate, { header: _jsx(BaseItem, Object.assign({}, option, { id: id, disabled: disabled, expandIcon: open ? _jsx(ChevronUpSVG, {}) : _jsx(ChevronDownSVG, {}), onClick: handleItemClick, isParentNode: true, onKeyDown: handleKeyDown, indeterminate: isIndeterminate && !checked, onSelect: !disabled ? handleOnSelect : undefined })), expanded: open, "data-test-id": `list__accordion-item-${id}`, children: _jsx(CollapseContext.Provider, { value: { level: level + 1 }, children: itemsJSX }) }));
 }

dist/components/Items/BaseItem/BaseItem.js

@@ -71,3 +71,3 @@ var __rest = (this && this.__rest) || function (s, e) {
     const props = extractSupportProps(rest);
-    const item = (_jsx("li", { role: 'menuitem', "data-test-id": props['data-test-id'] || 'list__base-item_' + id, children: _jsxs("button", { ref: itemRef, className: cn(commonStyles.listItem, styles.droplistItem, className), "data-size": size, onClick: handleItemClick, 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, disabled: disabled, 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, 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, "aria-disabled": disabled || undefined, 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 })] }));
     if (!itemWrapRender) {
@@ -74,0 +74,0 @@ return item;

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

@@ -5,3 +5,3 @@ import { KeyboardEvent, RefObject } from 'react';
     expandedIds: Array<number | string>;
-    itemRefs?: RefObject<HTMLButtonElement>[];
+    itemRefs?: RefObject<HTMLElement>[];
     id?: string | number;
@@ -16,3 +16,3 @@ };
     resetActiveFocusIndex: () => void;
-    handleListKeyDown: (e: KeyboardEvent<HTMLUListElement>) => void;
+    handleListKeyDown: (e: KeyboardEvent<HTMLElement>) => void;
     open: boolean;
@@ -19,0 +19,0 @@ setOpen: import("react").Dispatch<import("react").SetStateAction<boolean>>;

dist/components/Items/NextListItem/NextListItem.js

@@ -54,14 +54,14 @@ var __rest = (this && this.__rest) || function (s, e) {
     }, [parentResetActiveFocusIndex, parentResetNestedIndex]);
-    return (_jsx("li", { style: { listStyleType: 'none' }, children: _jsx(Dropdown, { outsideClick: handleOutsideClick, fallbackPlacements: FALLBACK_PLACEMENTS, content: _jsx(ParentListContext.Provider, { value: {
-                    parentIds: ids,
-                    parentActiveFocusIndex: activeFocusIndex,
-                    parentExpandedIds: expandedIds,
-                    parentItemRefs: itemRefs,
-                    parentOpenNestedIndex: openNestedIndex,
-                    triggerRef,
-                    parentRef: listRef,
-                    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, children: _jsx(BaseItem, Object.assign({}, option, { disabled: disabled, open: open, expandIcon: _jsx(ChevronRightSVG, {}), id: id, isParentNode: true, indeterminate: isIndeterminate && !checked, onSelect: handleOnSelect })) }) }));
+    return (_jsx(Dropdown, { outsideClick: handleOutsideClick, fallbackPlacements: FALLBACK_PLACEMENTS, content: _jsx(ParentListContext.Provider, { value: {
+                parentIds: ids,
+                parentActiveFocusIndex: activeFocusIndex,
+                parentExpandedIds: expandedIds,
+                parentItemRefs: itemRefs,
+                parentOpenNestedIndex: openNestedIndex,
+                triggerRef,
+                parentRef: listRef,
+                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, children: _jsx(BaseItem, Object.assign({}, option, { disabled: disabled, open: open, expandIcon: _jsx(ChevronRightSVG, {}), id: id, isParentNode: true, indeterminate: isIndeterminate && !checked, onSelect: handleOnSelect })) }));
 }

dist/components/Items/types.d.ts

@@ -28,9 +28,9 @@ import { FocusEvent, KeyboardEvent, MouseEvent, ReactNode, RefObject } from 'react';
     /** Колбек обработки клика */
-    onClick?(e: MouseEvent<HTMLButtonElement>): void;
+    onClick?(e: MouseEvent<HTMLElement>): void;
     /** Колбек обработки нажатия клавиши */
-    onKeyDown?(e: KeyboardEvent<HTMLButtonElement>): void;
+    onKeyDown?(e: KeyboardEvent<HTMLElement>): void;
     /** Колбек обработки фокуса */
-    onFocus?(e: FocusEvent<HTMLButtonElement>): void;
+    onFocus?(e: FocusEvent<HTMLElement>): void;
     /** Колбек обработки блюра */
-    onBlur?(e: FocusEvent<HTMLButtonElement>): void;
+    onBlur?(e: FocusEvent<HTMLElement>): void;
     /** Уникальный идентификатор */
@@ -40,3 +40,3 @@ id?: string | number;
     disabled?: boolean;
-    itemRef?: RefObject<HTMLButtonElement>;
+    itemRef?: RefObject<HTMLElement>;
     className?: string;
@@ -43,0 +43,0 @@ /**

dist/components/Lists/contexts/ParentListProvider.d.ts

@@ -8,3 +8,3 @@ import { RefObject } from 'react';
     parentExpandedIds: Array<string | number>;
-    parentItemRefs: Array<RefObject<HTMLButtonElement>>;
+    parentItemRefs: Array<RefObject<HTMLElement>>;
     parentOpenNestedIndex: number;
@@ -11,0 +11,0 @@ parentResetNestedIndex?(): void;

dist/components/Lists/hooks.d.ts

@@ -7,3 +7,3 @@ import { KeyboardEvent, RefObject } from 'react';
     btnRef?: RefObject<HTMLButtonElement>;
-    itemRefs?: RefObject<HTMLButtonElement>[];
+    itemRefs?: RefObject<HTMLElement>[];
 };
@@ -10,0 +10,0 @@ export declare function useKeyboardNavigation<T extends HTMLElement>({ ids, itemRefs, expandedIds, parentRef, btnRef, }: UseKeyboardNavigationProps<T>): {

dist/utils.d.ts

@@ -9,7 +9,7 @@ import { RefObject } from 'react';
     items: ItemProps[];
-    itemRefs: RefObject<HTMLButtonElement>[];
+    itemRefs: RefObject<HTMLElement>[];
     ids: (string | number)[];
     expandedIds: (string | number)[];
 };
-export declare function extractItemRefs(items: ItemProps[]): RefObject<HTMLButtonElement>[];
+export declare function extractItemRefs(items: ItemProps[]): RefObject<HTMLElement>[];
 export declare function extractItemIds(items: ItemProps[]): Array<string | number>;
@@ -16,0 +16,0 @@ export declare function extractChildIds({ items }: {

package.json

@@ -7,3 +7,3 @@ {
   "title": "List",
-  "version": "0.2.2-preview-936bde10.0",
+  "version": "0.3.0",
   "sideEffects": [
@@ -49,3 +49,3 @@ "*.css",
   },
-  "gitHead": "788931f262346c6a368f6d7c6fd3aa6feaa331c9"
+  "gitHead": "88a44a8f4c6490f3004f7feac3d50d17ff03f31c"
 }

src/components/Items/NextListItem/hooks.ts

@@ -8,3 +8,3 @@ import { KeyboardEvent, RefObject, useCallback, useEffect, useState } from 'react';
   expandedIds: Array<number | string>;
-  itemRefs?: RefObject<HTMLButtonElement>[];
+  itemRefs?: RefObject<HTMLElement>[];
   id?: string | number;
@@ -21,3 +21,3 @@ };
 
-  const handleListKeyDown = (e: KeyboardEvent<HTMLUListElement>) => {
+  const handleListKeyDown = (e: KeyboardEvent<HTMLElement>) => {
     switch (e.key) {
@@ -24,0 +24,0 @@ case 'ArrowDown': {

src/components/Items/types.ts

@@ -34,9 +34,9 @@ import { FocusEvent, KeyboardEvent, MouseEvent, ReactNode, RefObject } from 'react';
   /** Колбек обработки клика */
-  onClick?(e: MouseEvent<HTMLButtonElement>): void;
+  onClick?(e: MouseEvent<HTMLElement>): void;
   /** Колбек обработки нажатия клавиши */
-  onKeyDown?(e: KeyboardEvent<HTMLButtonElement>): void;
+  onKeyDown?(e: KeyboardEvent<HTMLElement>): void;
   /** Колбек обработки фокуса */
-  onFocus?(e: FocusEvent<HTMLButtonElement>): void;
+  onFocus?(e: FocusEvent<HTMLElement>): void;
   /** Колбек обработки блюра */
-  onBlur?(e: FocusEvent<HTMLButtonElement>): void;
+  onBlur?(e: FocusEvent<HTMLElement>): void;
 
@@ -49,3 +49,3 @@ /** Уникальный идентификатор */
 
-  itemRef?: RefObject<HTMLButtonElement>;
+  itemRef?: RefObject<HTMLElement>;
   className?: string;
@@ -52,0 +52,0 @@

src/components/Items/utils.ts

@@ -63,8 +63,8 @@ import { createRef } from 'react';
         items: addItemsIds(item.items, itemId),
-        itemRef: item.itemRef || createRef<HTMLButtonElement>(),
+        itemRef: item.itemRef || createRef<HTMLElement>(),
       };
     }
 
-    return { ...item, id: itemId, itemRef: item.itemRef || createRef<HTMLButtonElement>() };
+    return { ...item, id: itemId, itemRef: item.itemRef || createRef<HTMLElement>() };
   });
 }

src/components/Lists/hooks.ts

@@ -8,3 +8,3 @@ import { KeyboardEvent, RefObject, useEffect, useState } from 'react';
   btnRef?: RefObject<HTMLButtonElement>;
-  itemRefs?: RefObject<HTMLButtonElement>[];
+  itemRefs?: RefObject<HTMLElement>[];
 };
@@ -11,0 +11,0 @@

src/utils.ts

@@ -17,3 +17,3 @@ import { RefObject } from 'react';
 export function withCollapsedItems({ items, openCollapsedItems }: WithCollapsedItemsProps) {
-  let itemRefs: RefObject<HTMLButtonElement>[] = [];
+  let itemRefs: RefObject<HTMLElement>[] = [];
   let newItems: ItemProps[] = [];
@@ -72,4 +72,4 @@ let ids: Array<string | number> = [];
 
-export function extractItemRefs(items: ItemProps[]): RefObject<HTMLButtonElement>[] {
-  return items.reduce((prev: RefObject<HTMLButtonElement>[], item: ItemProps) => {
+export function extractItemRefs(items: ItemProps[]): RefObject<HTMLElement>[] {
+  return items.reduce((prev: RefObject<HTMLElement>[], item: ItemProps) => {
     if (isGroupItemProps(item)) {
@@ -79,3 +79,3 @@ return prev.concat(extractItemRefs(item.items));
     return item.itemRef ? prev.concat([item.itemRef]) : prev;
-  }, [] as RefObject<HTMLButtonElement>[]);
+  }, [] as RefObject<HTMLElement>[]);
 }
@@ -82,0 +82,0 @@

No alert changes

Worsened metrics

Total package byte prevSize

190040

decreased by-0.14%

Lines of code

3793

decreased by-0.05%

No dependency changes