@snack-uikit/list 0.21.2 → 0.21.4-preview-532f4f48.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.21.3 (2024-11-08)
+
+
+### Bug Fixes
+
+* **PDS-955:** fix focusing first item behavior when all items are disabled ([d0dc98f](https://github.com/cloud-ru-tech/snack-uikit/commit/d0dc98ff45d127d23258503edf24ce0642aa2824))
+
+
+
+
+
 ## 0.21.2 (2024-11-08)
 
 

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

@@ -148,7 +148,7 @@ function BaseItem(_a) {
       "data-size": size,
       onClick: handleItemClick,
       onMouseDown: handleItemMouseDown,
-      tabIndex: id === focusFlattenItems[firstItemId].originalId ? 0 : -1,
+      tabIndex: firstItemId && id === focusFlattenItems[firstItemId].originalId ? 0 : -1,
       "data-non-pointer": inactive && !onClick,
       "data-variant": mode || undefined,
       "data-open": open || undefined,

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

@@ -100,7 +100,9 @@ exports.ListPrivate = (0, react_1.forwardRef)((_a, ref) => {
   const onScrollInitialized = () => {
     var _a, _b;
     if (scrollToSelectedItem) {
-      (_b = (_a = selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.itemRef) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.scrollIntoView();
+      (_b = (_a = selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.itemRef) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.scrollIntoView({
+        block: 'center'
+      });
     }
   };
   const listJSX = (0, jsx_runtime_1.jsxs)("ul", Object.assign({

package/dist/cjs/components/Lists/contexts/NewListProvider.d.ts

@@ -19,7 +19,7 @@ export type PublicListContextType = {
 export type PrivateListContextType = {
     flattenItems: Record<string, FlattenItem>;
     focusFlattenItems: Record<string, FocusFlattenItem>;
-    firstItemId: ItemId;
+    firstItemId?: ItemId;
 };
 type Child = {
     children: ReactNode;

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

@@ -86,7 +86,7 @@ export function BaseItem(_a) {
         }
     };
     const props = extractSupportProps(rest);
-    const itemJSX = (_jsx("div", { className: cn(commonStyles.itemWrapper, styles.innerWrapper, className), "data-inactive": inactive || undefined, "data-disabled": disabled || undefined, "data-variant": mode || undefined, "data-checked": (isParentNode && (indeterminate || isChecked)) || (isChecked && !switchProp) || undefined, children: _jsxs("li", { "data-type": 'outside', role: 'menuitem', "data-test-id": props['data-test-id'] || 'list__base-item_' + id, "data-checked": (isParentNode && (indeterminate || isChecked)) || (isChecked && !switchProp) || undefined, ref: itemRef, className: cn(commonStyles.listItem, styles.droplistItem), "data-size": size, onClick: handleItemClick, onMouseDown: handleItemMouseDown, tabIndex: id === focusFlattenItems[firstItemId].originalId ? 0 : -1, "data-non-pointer": inactive && !onClick, "data-variant": mode || undefined, "data-open": open || 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: isParentNode ? handleCheckboxChange : undefined, checked: isChecked, "data-test-id": 'list__base-item-checkbox', onClick: handleCheckboxClick, indeterminate: indeterminate }) })), beforeContent && _jsx("div", { className: styles.beforeContent, children: beforeContent }), content && isContentItem(content) ? (((_b = contentRender === null || contentRender === void 0 ? void 0 : contentRender({ id, content, disabled })) !== null && _b !== void 0 ? _b : _jsx(ItemContent, Object.assign({ disabled: disabled }, content)))) : (_jsxs("div", { className: styles.content, children: [" ", content, " "] })), 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 itemJSX = (_jsx("div", { className: cn(commonStyles.itemWrapper, styles.innerWrapper, className), "data-inactive": inactive || undefined, "data-disabled": disabled || undefined, "data-variant": mode || undefined, "data-checked": (isParentNode && (indeterminate || isChecked)) || (isChecked && !switchProp) || undefined, children: _jsxs("li", { "data-type": 'outside', role: 'menuitem', "data-test-id": props['data-test-id'] || 'list__base-item_' + id, "data-checked": (isParentNode && (indeterminate || isChecked)) || (isChecked && !switchProp) || undefined, ref: itemRef, className: cn(commonStyles.listItem, styles.droplistItem), "data-size": size, onClick: handleItemClick, onMouseDown: handleItemMouseDown, tabIndex: firstItemId && id === focusFlattenItems[firstItemId].originalId ? 0 : -1, "data-non-pointer": inactive && !onClick, "data-variant": mode || undefined, "data-open": open || 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: isParentNode ? handleCheckboxChange : undefined, checked: isChecked, "data-test-id": 'list__base-item-checkbox', onClick: handleCheckboxClick, indeterminate: indeterminate }) })), beforeContent && _jsx("div", { className: styles.beforeContent, children: beforeContent }), content && isContentItem(content) ? (((_b = contentRender === null || contentRender === void 0 ? void 0 : contentRender({ id, content, disabled })) !== null && _b !== void 0 ? _b : _jsx(ItemContent, Object.assign({ disabled: disabled }, content)))) : (_jsxs("div", { className: styles.content, children: [" ", content, " "] })), 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 itemJSX;
     }

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

@@ -35,7 +35,7 @@ export const ListPrivate = forwardRef((_a, ref) => {
     const onScrollInitialized = () => {
         var _a, _b;
         if (scrollToSelectedItem) {
-            (_b = (_a = selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.itemRef) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.scrollIntoView();
+            (_b = (_a = selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.itemRef) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.scrollIntoView({ block: 'center' });
         }
     };
     const listJSX = (_jsxs("ul", Object.assign({ className: cn(commonStyles.listContainer, className), ref: ref, onKeyDown: onKeyDown, tabIndex: tabIndex, onFocus: onFocus, onBlur: onBlur, "data-active": active || undefined, role: 'menu' }, extractSupportProps(props), { children: [(Number(pinTop === null || pinTop === void 0 ? void 0 : pinTop.length) > 0 || search) && (_jsxs(PinTopGroupItem, { children: [search && _jsx(SearchItem, Object.assign({ search: search }, searchItem)), Number(pinTop === null || pinTop === void 0 ? void 0 : pinTop.length) > 0 && itemsPinTopJSX] })), scroll ? (_jsxs(Scroll, { className: cn({

package/dist/esm/components/Lists/contexts/NewListProvider.d.ts

@@ -19,7 +19,7 @@ export type PublicListContextType = {
 export type PrivateListContextType = {
     flattenItems: Record<string, FlattenItem>;
     focusFlattenItems: Record<string, FocusFlattenItem>;
-    firstItemId: ItemId;
+    firstItemId?: ItemId;
 };
 type Child = {
     children: ReactNode;

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "List",
-  "version": "0.21.2",
+  "version": "0.21.4-preview-532f4f48.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -53,5 +53,5 @@
   "peerDependencies": {
     "@snack-uikit/locale": "*"
   },
-  "gitHead": "df11a8777bfe0bd167f02aff8c393c48a24c1173"
+  "gitHead": "37b529bffb25e45cdec299b61be5a93d1c53d01f"
 }

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

@@ -150,7 +150,7 @@ export function BaseItem({
         data-size={size}
         onClick={handleItemClick}
         onMouseDown={handleItemMouseDown}
-        tabIndex={id === focusFlattenItems[firstItemId].originalId ? 0 : -1}
+        tabIndex={firstItemId && id === focusFlattenItems[firstItemId].originalId ? 0 : -1}
         data-non-pointer={inactive && !onClick}
         data-variant={mode || undefined}
         data-open={open || undefined}

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

@@ -93,7 +93,7 @@ export const ListPrivate = forwardRef(
 
     const onScrollInitialized = () => {
       if (scrollToSelectedItem) {
-        (selectedItem as FlattenBaseItem)?.itemRef?.current?.scrollIntoView();
+        (selectedItem as FlattenBaseItem)?.itemRef?.current?.scrollIntoView({ block: 'center' });
       }
     };
 

package/src/components/Lists/contexts/NewListProvider.tsx

@@ -24,7 +24,7 @@ export type PublicListContextType = {
 export type PrivateListContextType = {
   flattenItems: Record<string, FlattenItem>;
   focusFlattenItems: Record<string, FocusFlattenItem>;
-  firstItemId: ItemId;
+  firstItemId?: ItemId;
 };
 
 type Child = {