@snack-uikit/list 0.29.7-preview-c824da44.0 → 0.29.7-preview-644edaa1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/cjs/components/Lists/ListPrivate/ListPrivate.d.ts +4 -3
  2. package/dist/cjs/components/Lists/ListPrivate/ListPrivate.js +9 -6
  3. package/dist/esm/components/Lists/ListPrivate/ListPrivate.d.ts +4 -3
  4. package/dist/esm/components/Lists/ListPrivate/ListPrivate.js +9 -6
  5. package/package.json +2 -2
  6. package/src/components/Lists/ListPrivate/ListPrivate.tsx +12 -11
package/dist/cjs/components/Lists/ListPrivate/ListPrivate.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ import { ItemId } from '../../Items';
1
2
  export declare const ListPrivate: import("react").ForwardRefExoticComponent<Omit<import("../types").ListProps, "items" | "hasListInFocusChain" | "pinTop" | "pinBottom"> & {
2
3
  nested?: boolean;
3
4
  active?: boolean;
@@ -8,7 +9,7 @@ export declare const ListPrivate: import("react").ForwardRefExoticComponent<Omit
8
9
  onKeyDown?(e: import("react").KeyboardEvent<HTMLElement>): void;
9
10
  limitedScrollHeight?: boolean;
10
11
  searchItem?: import("../../Items").FlattenBaseItem;
11
- pinTop?: import("../../Items").ItemId[];
12
- items: import("../../Items").ItemId[];
13
- pinBottom?: import("../../Items").ItemId[];
12
+ pinTop?: ItemId[];
13
+ items: ItemId[];
14
+ pinBottom?: ItemId[];
14
15
  } & import("react").RefAttributes<HTMLElement>>;
package/dist/cjs/components/Lists/ListPrivate/ListPrivate.js CHANGED
@@ -146,7 +146,7 @@ exports.ListPrivate = (0, react_1.forwardRef)((_a, ref) => {
146
146
  console.info('[DEBUG] Cannot scroll to non-existing item');
147
147
  return; // Cannot scroll to non-existing item
148
148
  }
149
- if (scrollState.virtualizer === selectedItemIndex) {
149
+ if (scrollState.virtualizer === selectedItem.originalId) {
150
150
  console.info('[DEBUG] No need to re-scroll to the same item during re-renders');
151
151
  return; // No need to re-scroll to the same item during re-renders
152
152
  }
@@ -159,13 +159,16 @@ exports.ListPrivate = (0, react_1.forwardRef)((_a, ref) => {
159
159
  align: 'center'
160
160
  });
161
161
  setScrollState(prevState => Object.assign(Object.assign({}, prevState), {
162
- virtualizer: selectedItemIndex
162
+ virtualizer: selectedItem.originalId
163
163
  }));
164
164
  }
165
165
  }, [isScrollToItemEnabled, scrollState, selectedItem, selectedItemIndex, virtualizer]);
166
166
  const isTargetPresentInDom = Boolean((_b = selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.itemRef) === null || _b === void 0 ? void 0 : _b.current);
167
167
  (0, react_1.useEffect)(() => {
168
168
  var _a, _b, _c;
169
+ if (!selectedItem) {
170
+ return;
171
+ }
169
172
  if (scrollState.virtualizer === null) {
170
173
  return; // Not scrolled by virtualizer yet, no need for additional scroll
171
174
  }
@@ -175,14 +178,14 @@ exports.ListPrivate = (0, react_1.forwardRef)((_a, ref) => {
175
178
  if (scrollState.virtualizer === scrollState.browser) {
176
179
  return; // Virtualizer scroll has not been executed => no need for additional scroll
177
180
  }
178
- console.info('[DEBUG] SCROLLING BY BROWSER', (_a = selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.itemRef) === null || _a === void 0 ? void 0 : _a.current);
179
- (_c = (_b = selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.itemRef) === null || _b === void 0 ? void 0 : _b.current) === null || _c === void 0 ? void 0 : _c.scrollIntoView({
181
+ console.info('[DEBUG] SCROLLING BY BROWSER', (_a = selectedItem.itemRef) === null || _a === void 0 ? void 0 : _a.current);
182
+ (_c = (_b = selectedItem.itemRef) === null || _b === void 0 ? void 0 : _b.current) === null || _c === void 0 ? void 0 : _c.scrollIntoView({
180
183
  block: 'center'
181
184
  });
182
185
  setScrollState(prevState => Object.assign(Object.assign({}, prevState), {
183
- browser: selectedItemIndex
186
+ browser: selectedItem.originalId
184
187
  }));
185
- }, [scrollState, selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.itemRef, isTargetPresentInDom, selectedItemIndex]);
188
+ }, [scrollState, selectedItem, isTargetPresentInDom, selectedItemIndex]);
186
189
  const loadingJSX = (0, react_1.useMemo)(() => loading && (0, jsx_runtime_1.jsx)("div", {
187
190
  role: 'spinbutton',
188
191
  tabIndex: -1,
package/dist/esm/components/Lists/ListPrivate/ListPrivate.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ import { ItemId } from '../../Items';
1
2
  export declare const ListPrivate: import("react").ForwardRefExoticComponent<Omit<import("../types").ListProps, "items" | "hasListInFocusChain" | "pinTop" | "pinBottom"> & {
2
3
  nested?: boolean;
3
4
  active?: boolean;
@@ -8,7 +9,7 @@ export declare const ListPrivate: import("react").ForwardRefExoticComponent<Omit
8
9
  onKeyDown?(e: import("react").KeyboardEvent<HTMLElement>): void;
9
10
  limitedScrollHeight?: boolean;
10
11
  searchItem?: import("../../Items").FlattenBaseItem;
11
- pinTop?: import("../../Items").ItemId[];
12
- items: import("../../Items").ItemId[];
13
- pinBottom?: import("../../Items").ItemId[];
12
+ pinTop?: ItemId[];
13
+ items: ItemId[];
14
+ pinBottom?: ItemId[];
14
15
  } & import("react").RefAttributes<HTMLElement>>;
package/dist/esm/components/Lists/ListPrivate/ListPrivate.js CHANGED
@@ -87,7 +87,7 @@ export const ListPrivate = forwardRef((_a, ref) => {
87
87
  console.info('[DEBUG] Cannot scroll to non-existing item');
88
88
  return; // Cannot scroll to non-existing item
89
89
  }
90
- if (scrollState.virtualizer === selectedItemIndex) {
90
+ if (scrollState.virtualizer === selectedItem.originalId) {
91
91
  console.info('[DEBUG] No need to re-scroll to the same item during re-renders');
92
92
  return; // No need to re-scroll to the same item during re-renders
93
93
  }
@@ -97,12 +97,15 @@ export const ListPrivate = forwardRef((_a, ref) => {
97
97
  }
98
98
  console.info('[DEBUG] SCROLLING BY VIRTUALIZER');
99
99
  virtualizer.scrollToIndex(selectedItemIndex, { align: 'center' });
100
- setScrollState(prevState => (Object.assign(Object.assign({}, prevState), { virtualizer: selectedItemIndex })));
100
+ setScrollState(prevState => (Object.assign(Object.assign({}, prevState), { virtualizer: selectedItem.originalId })));
101
101
  }
102
102
  }, [isScrollToItemEnabled, scrollState, selectedItem, selectedItemIndex, virtualizer]);
103
103
  const isTargetPresentInDom = Boolean((_b = selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.itemRef) === null || _b === void 0 ? void 0 : _b.current);
104
104
  useEffect(() => {
105
105
  var _a, _b, _c;
106
+ if (!selectedItem) {
107
+ return;
108
+ }
106
109
  if (scrollState.virtualizer === null) {
107
110
  return; // Not scrolled by virtualizer yet, no need for additional scroll
108
111
  }
@@ -112,10 +115,10 @@ export const ListPrivate = forwardRef((_a, ref) => {
112
115
  if (scrollState.virtualizer === scrollState.browser) {
113
116
  return; // Virtualizer scroll has not been executed => no need for additional scroll
114
117
  }
115
- console.info('[DEBUG] SCROLLING BY BROWSER', (_a = selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.itemRef) === null || _a === void 0 ? void 0 : _a.current);
116
- (_c = (_b = selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.itemRef) === null || _b === void 0 ? void 0 : _b.current) === null || _c === void 0 ? void 0 : _c.scrollIntoView({ block: 'center' });
117
- setScrollState(prevState => (Object.assign(Object.assign({}, prevState), { browser: selectedItemIndex })));
118
- }, [scrollState, selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.itemRef, isTargetPresentInDom, selectedItemIndex]);
118
+ console.info('[DEBUG] SCROLLING BY BROWSER', (_a = selectedItem.itemRef) === null || _a === void 0 ? void 0 : _a.current);
119
+ (_c = (_b = selectedItem.itemRef) === null || _b === void 0 ? void 0 : _b.current) === null || _c === void 0 ? void 0 : _c.scrollIntoView({ block: 'center' });
120
+ setScrollState(prevState => (Object.assign(Object.assign({}, prevState), { browser: selectedItem.originalId })));
121
+ }, [scrollState, selectedItem, isTargetPresentInDom, selectedItemIndex]);
119
122
  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]);
120
123
  const content = useMemo(() => (_jsxs(_Fragment, { children: [virtualized ? (_jsx("div", { className: styles.virtualizedContainer, style: { height: virtualizer.getTotalSize() }, tabIndex: -1, children: virtualItems.map(virtualRow => (_jsx("div", { "data-index": virtualRow.index, ref: virtualizer.measureElement, tabIndex: -1, className: styles.virtualizedPositionBox, style: {
121
124
  transform: `translateY(${virtualRow.start}px)`,
package/package.json CHANGED
@@ -4,7 +4,7 @@
4
4
  "access": "public"
5
5
  },
6
6
  "title": "List",
7
- "version": "0.29.7-preview-c824da44.0",
7
+ "version": "0.29.7-preview-644edaa1.0",
8
8
  "sideEffects": [
9
9
  "*.css",
10
10
  "*.woff",
@@ -54,5 +54,5 @@
54
54
  "peerDependencies": {
55
55
  "@snack-uikit/locale": "*"
56
56
  },
57
- "gitHead": "edea7e461de9f4f112e73ed1de8c1063240d3164"
57
+ "gitHead": "3a8c0893412768a16a57ffad69934ffda7383e83"
58
58
  }
package/src/components/Lists/ListPrivate/ListPrivate.tsx CHANGED
@@ -9,7 +9,7 @@ import { extractSupportProps } from '@snack-uikit/utils';
9
9
 
10
10
  import { ListEmptyState, useEmptyState } from '../../../helperComponents';
11
11
  import { stopPropagation } from '../../../utils';
12
- import { PinBottomGroupItem, PinTopGroupItem, SearchItem, useRenderItems } from '../../Items';
12
+ import { ItemId, PinBottomGroupItem, PinTopGroupItem, SearchItem, useRenderItems } from '../../Items';
13
13
  import { useNewListContext, useSelectionContext } from '../contexts';
14
14
  import commonStyles from '../styles.module.scss';
15
15
  import { ListPrivateProps } from '../types';
@@ -17,8 +17,8 @@ import { ALL_SIZES } from './constants';
17
17
  import styles from './styles.module.scss';
18
18
 
19
19
  type ScrollState = {
20
- virtualizer: number | null;
21
- browser: number | null;
20
+ virtualizer: ItemId | null;
21
+ browser: ItemId | null;
22
22
  measured: boolean;
23
23
  };
24
24
 
@@ -134,7 +134,7 @@ export const ListPrivate = forwardRef(
134
134
  console.info('[DEBUG] Cannot scroll to non-existing item');
135
135
  return; // Cannot scroll to non-existing item
136
136
  }
137
- if (scrollState.virtualizer === selectedItemIndex) {
137
+ if (scrollState.virtualizer === selectedItem.originalId) {
138
138
  console.info('[DEBUG] No need to re-scroll to the same item during re-renders');
139
139
  return; // No need to re-scroll to the same item during re-renders
140
140
  }
@@ -148,7 +148,7 @@ export const ListPrivate = forwardRef(
148
148
 
149
149
  setScrollState(prevState => ({
150
150
  ...prevState,
151
- virtualizer: selectedItemIndex,
151
+ virtualizer: selectedItem.originalId,
152
152
  }));
153
153
  }
154
154
  }, [isScrollToItemEnabled, scrollState, selectedItem, selectedItemIndex, virtualizer]);
@@ -156,27 +156,28 @@ export const ListPrivate = forwardRef(
156
156
  const isTargetPresentInDom = Boolean(selectedItem?.itemRef?.current);
157
157
 
158
158
  useEffect(() => {
159
+ if (!selectedItem) {
160
+ return;
161
+ }
159
162
  if (scrollState.virtualizer === null) {
160
163
  return; // Not scrolled by virtualizer yet, no need for additional scroll
161
164
  }
162
-
163
165
  if (!isTargetPresentInDom) {
164
166
  return; // Target element is not present in DOM yet, additional scroll does not work without it
165
167
  }
166
-
167
168
  if (scrollState.virtualizer === scrollState.browser) {
168
169
  return; // Virtualizer scroll has not been executed => no need for additional scroll
169
170
  }
170
171
 
171
- console.info('[DEBUG] SCROLLING BY BROWSER', selectedItem?.itemRef?.current);
172
+ console.info('[DEBUG] SCROLLING BY BROWSER', selectedItem.itemRef?.current);
172
173
 
173
- selectedItem?.itemRef?.current?.scrollIntoView({ block: 'center' });
174
+ selectedItem.itemRef?.current?.scrollIntoView({ block: 'center' });
174
175
 
175
176
  setScrollState(prevState => ({
176
177
  ...prevState,
177
- browser: selectedItemIndex,
178
+ browser: selectedItem.originalId,
178
179
  }));
179
- }, [scrollState, selectedItem?.itemRef, isTargetPresentInDom, selectedItemIndex]);
180
+ }, [scrollState, selectedItem, isTargetPresentInDom, selectedItemIndex]);
180
181
 
181
182
  const loadingJSX = useMemo(
182
183
  () =>