@snack-uikit/list 0.15.3 → 0.16.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.16.0 (2024-08-21)
+
+
+### Features
+
+* **DPS-13067:** pass untouchableScrollbars prop ([0f7ac6d](https://github.com/cloud-ru-tech/snack-uikit/commit/0f7ac6d42ba8064cddebe8a70cfa9bf32ea7eaa8))
+
+
+
+
+
 ## 0.15.3 (2024-08-14)
 
 ### Only dependencies have been changed

package/README.md

@@ -81,6 +81,7 @@
 | scroll | `boolean` | - | Включить ли скролл для основной части списка |
 | scrollRef | `RefObject<HTMLElement>` | - | Ссылка на элемент, обозначающий самый конец прокручиваемого списка |
 | scrollContainerRef | `RefObject<HTMLElement>` | - | Ссылка на контейнер, который скроллится |
+| untouchableScrollbars | `boolean` | - | Отключает возможность взаимодействовать со скролбарами мышью. |
 | onScroll | `(event?: Event) => void` | - | Колбек на скролл прокручиваемого списка |
 | dataFiltered | `boolean` | - |  |
 | dataError | `boolean` | - |  |
@@ -109,6 +110,7 @@
 | scroll | `boolean` | - | Включить ли скролл для основной части списка |
 | scrollRef | `RefObject<HTMLElement>` | - | Ссылка на элемент, обозначающий самый конец прокручиваемого списка |
 | scrollContainerRef | `RefObject<HTMLElement>` | - | Ссылка на контейнер, который скроллится |
+| untouchableScrollbars | `boolean` | - | Отключает возможность взаимодействовать со скролбарами мышью. |
 | onScroll | `(event?: Event) => void` | - | Колбек на скролл прокручиваемого списка |
 | dataFiltered | `boolean` | - |  |
 | dataError | `boolean` | - |  |

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

@@ -2,5 +2,5 @@ import { CommonFlattenProps, FlattenNextListItem, ItemId } from '../types';
 type NextListItemProps = Omit<FlattenNextListItem, 'type'> & CommonFlattenProps & {
     focusId?: ItemId;
 };
-export declare function NextListItem({ items, placement, id, scroll, scrollRef, disabled, onSublistOpenChanged, allChildIds, loading, focusId, ...option }: NextListItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function NextListItem({ items, placement, id, scroll, scrollRef, disabled, onSublistOpenChanged, allChildIds, loading, focusId, untouchableScrollbars, ...option }: NextListItemProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -20,7 +20,7 @@ import { useGroupItemSelection } from '../hooks';
 import { extractActiveItems, isNextListItem } from '../utils';
 import { FALLBACK_PLACEMENTS } from './constants';
 export function NextListItem(_a) {
-    var { items, placement = 'right-start', id, scroll, scrollRef, disabled, onSublistOpenChanged, allChildIds, loading = false, focusId = id } = _a, option = __rest(_a, ["items", "placement", "id", "scroll", "scrollRef", "disabled", "onSublistOpenChanged", "allChildIds", "loading", "focusId"]);
+    var { items, placement = 'right-start', id, scroll, scrollRef, disabled, onSublistOpenChanged, allChildIds, loading = false, focusId = id, untouchableScrollbars = false } = _a, option = __rest(_a, ["items", "placement", "id", "scroll", "scrollRef", "disabled", "onSublistOpenChanged", "allChildIds", "loading", "focusId", "untouchableScrollbars"]);
     const { flattenItems, focusFlattenItems } = useNewListContext();
     const { isSelectionMultiple } = useSelectionContext();
     const { openCollapseItems = [] } = useCollapseContext();
@@ -64,7 +64,7 @@ export function NextListItem(_a) {
     return (_jsx(Dropdown, { outsideClick: handleOutsideClick, fallbackPlacements: FALLBACK_PLACEMENTS, content: _jsx(ListPrivate, { onKeyDown: handleListKeyDown, items: items, nested: true, scroll: scroll, tabIndex: 0, ref: listRef, onFocus: e => {
                 e.stopPropagation();
                 forceUpdateActiveItemId === null || forceUpdateActiveItemId === void 0 ? void 0 : forceUpdateActiveItemId(ids[0]);
-            }, scrollRef: scrollRef, limitedScrollHeight: true, loading: loading }), trigger: 'hover', open: isOpen || open, onOpenChange: value => {
+            }, scrollRef: scrollRef, limitedScrollHeight: true, untouchableScrollbars: untouchableScrollbars, loading: loading }), trigger: 'hover', open: isOpen || open, onOpenChange: value => {
             setOpen(value);
             onSublistOpenChanged === null || onSublistOpenChanged === void 0 ? void 0 : onSublistOpenChanged(value, id);
         }, placement: placement, widthStrategy: 'auto', children: _jsx(BaseItem, Object.assign({}, option, { disabled: disabled, open: open, expandIcon: _jsx(ChevronRightSVG, {}), id: id, isParentNode: true, indeterminate: indeterminate, checked: checked, onOpenNestedList: () => {

package/dist/components/Lists/Droplist/DropList.d.ts

@@ -1,2 +1,2 @@
 import { DroplistProps } from '../types';
-export declare function Droplist({ items: itemsProp, search, pinBottom: pinBottomProp, pinTop: pinTopProp, footerActiveElementsRefs, children, trigger, placement, widthStrategy, triggerElemRef: triggerElemRefProp, open: openProp, onOpenChange, collapse, triggerClassName, selection, contentRender, size, marker, closeDroplistOnItemClick, className, listRef: listRefProp, ...props }: DroplistProps): import("react/jsx-runtime").JSX.Element;
+export declare function Droplist({ items: itemsProp, search, pinBottom: pinBottomProp, pinTop: pinTopProp, footerActiveElementsRefs, children, trigger, placement, widthStrategy, triggerElemRef: triggerElemRefProp, open: openProp, onOpenChange, collapse, triggerClassName, selection, contentRender, size, marker, closeDroplistOnItemClick, className, listRef: listRefProp, untouchableScrollbars, ...props }: DroplistProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Lists/Droplist/DropList.js

@@ -22,7 +22,7 @@ import { ListPrivate } from '../ListPrivate';
 import styles from '../styles.module.css';
 const DEFAULT_FALLBACK_PLACEMENTS = ['top', 'right', 'bottom', 'left'];
 export function Droplist(_a) {
-    var { items: itemsProp, search, pinBottom: pinBottomProp = [], pinTop: pinTopProp = [], footerActiveElementsRefs, children, trigger, placement, widthStrategy, triggerElemRef: triggerElemRefProp, open: openProp, onOpenChange, collapse = {}, triggerClassName, selection, contentRender, size = 's', marker = true, closeDroplistOnItemClick = false, className, listRef: listRefProp } = _a, props = __rest(_a, ["items", "search", "pinBottom", "pinTop", "footerActiveElementsRefs", "children", "trigger", "placement", "widthStrategy", "triggerElemRef", "open", "onOpenChange", "collapse", "triggerClassName", "selection", "contentRender", "size", "marker", "closeDroplistOnItemClick", "className", "listRef"]);
+    var { items: itemsProp, search, pinBottom: pinBottomProp = [], pinTop: pinTopProp = [], footerActiveElementsRefs, children, trigger, placement, widthStrategy, triggerElemRef: triggerElemRefProp, open: openProp, onOpenChange, collapse = {}, triggerClassName, selection, contentRender, size = 's', marker = true, closeDroplistOnItemClick = false, className, listRef: listRefProp, untouchableScrollbars = false } = _a, props = __rest(_a, ["items", "search", "pinBottom", "pinTop", "footerActiveElementsRefs", "children", "trigger", "placement", "widthStrategy", "triggerElemRef", "open", "onOpenChange", "collapse", "triggerClassName", "selection", "contentRender", "size", "marker", "closeDroplistOnItemClick", "className", "listRef", "untouchableScrollbars"]);
     const hasSearch = useMemo(() => Boolean(search), [search]);
     const [openCollapseItems = [], setOpenCollapsedItems] = useValueControl(collapse);
     const toggleOpenCollapseItem = useCallback((id) => setOpenCollapsedItems((items) => (items === null || items === void 0 ? void 0 : items.includes(id)) ? items.filter(item => item !== id) : (items !== null && items !== void 0 ? items : []).concat([id])), [setOpenCollapsedItems]);
@@ -130,5 +130,5 @@ export function Droplist(_a) {
                         }, children: _jsx(Dropdown, { content: _jsx("div", { className: cn(styles.wrapper, className), children: _jsx(ListPrivate, Object.assign({}, props, { items: memorizedItems.items.focusCloseChildIds, pinTop: memorizedItems.pinTop.focusCloseChildIds, pinBottom: memorizedItems.pinBottom.focusCloseChildIds, onKeyDown: handleListKeyDown, searchItem: searchItem, tabIndex: 0, ref: mergeRefs(listRef, listRefProp), search: search, onFocus: e => {
                                         e.stopPropagation();
                                         forceUpdateActiveItemId === null || forceUpdateActiveItemId === void 0 ? void 0 : forceUpdateActiveItemId(ids[0]);
-                                    }, limitedScrollHeight: true })) }), outsideClick: true, triggerClassName: triggerClassName, fallbackPlacements: DEFAULT_FALLBACK_PLACEMENTS, trigger: trigger, placement: placement, widthStrategy: widthStrategy, triggerRef: !triggerElemRefProp ? triggerElemRef : (isValid && triggerElemRefProp) || undefined, open: open, onOpenChange: handleOpenChange, children: triggerElem }) }) }) }) })) }));
+                                    }, limitedScrollHeight: true, untouchableScrollbars: untouchableScrollbars })) }), outsideClick: true, triggerClassName: triggerClassName, fallbackPlacements: DEFAULT_FALLBACK_PLACEMENTS, trigger: trigger, placement: placement, widthStrategy: widthStrategy, triggerRef: !triggerElemRefProp ? triggerElemRef : (isValid && triggerElemRefProp) || undefined, open: open, onOpenChange: handleOpenChange, children: triggerElem }) }) }) }) })) }));
 }

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

@@ -21,7 +21,7 @@ import { useNewListContext } from '../contexts';
 import commonStyles from '../styles.module.css';
 import styles from './styles.module.css';
 export const ListPrivate = forwardRef((_a, ref) => {
-    var { items, pinTop, pinBottom, onKeyDown, onBlur, onFocus, tabIndex, active, scroll, nested, search, searchItem, scrollRef, scrollContainerRef, onScroll, footer, loading, limitedScrollHeight, className, noDataState, noResultsState, errorDataState, dataError, dataFiltered } = _a, props = __rest(_a, ["items", "pinTop", "pinBottom", "onKeyDown", "onBlur", "onFocus", "tabIndex", "active", "scroll", "nested", "search", "searchItem", "scrollRef", "scrollContainerRef", "onScroll", "footer", "loading", "limitedScrollHeight", "className", "noDataState", "noResultsState", "errorDataState", "dataError", "dataFiltered"]);
+    var { items, pinTop, pinBottom, onKeyDown, onBlur, onFocus, tabIndex, active, scroll, nested, search, searchItem, scrollRef, scrollContainerRef, onScroll, footer, loading, limitedScrollHeight, untouchableScrollbars, className, noDataState, noResultsState, errorDataState, dataError, dataFiltered } = _a, props = __rest(_a, ["items", "pinTop", "pinBottom", "onKeyDown", "onBlur", "onFocus", "tabIndex", "active", "scroll", "nested", "search", "searchItem", "scrollRef", "scrollContainerRef", "onScroll", "footer", "loading", "limitedScrollHeight", "untouchableScrollbars", "className", "noDataState", "noResultsState", "errorDataState", "dataError", "dataFiltered"]);
     const { size = 's' } = useNewListContext();
     const itemsJSX = useRenderItems(items);
     const itemsPinTopJSX = useRenderItems(pinTop);
@@ -34,7 +34,7 @@ export const ListPrivate = forwardRef((_a, ref) => {
                     [commonStyles.scrollContainerS]: scroll && limitedScrollHeight && size === 's',
                     [commonStyles.scrollContainerM]: scroll && limitedScrollHeight && size === 'm',
                     [commonStyles.scrollContainerL]: scroll && limitedScrollHeight && size === 'l',
-                }), barHideStrategy: 'never', size: size === 's' ? 's' : 'm', ref: scrollContainerRef, onScroll: onScroll, children: [content, _jsx("div", { className: styles.scrollStub, ref: scrollRef })] })) : (_jsx(_Fragment, { children: content })), Number(pinBottom === null || pinBottom === void 0 ? void 0 : pinBottom.length) > 0 && _jsx(PinBottomGroupItem, { children: itemsPinBottomJSX }), footer && (_jsx("div", { className: styles.footer, onFocus: e => e.stopPropagation(), children: footer }))] })));
+                }), barHideStrategy: 'never', size: size === 's' ? 's' : 'm', ref: scrollContainerRef, untouchableScrollbars: untouchableScrollbars, onScroll: onScroll, children: [content, _jsx("div", { className: styles.scrollStub, ref: scrollRef })] })) : (_jsx(_Fragment, { children: content })), Number(pinBottom === null || pinBottom === void 0 ? void 0 : pinBottom.length) > 0 && _jsx(PinBottomGroupItem, { children: itemsPinBottomJSX }), footer && (_jsx("div", { className: styles.footer, onFocus: e => e.stopPropagation(), children: footer }))] })));
     if (!nested) {
         return listJSX;
     }

package/dist/types.d.ts

@@ -13,6 +13,8 @@ export type ScrollProps = {
     scrollRef?: RefObject<HTMLElement>;
     /** Ссылка на контейнер, который скроллится */
     scrollContainerRef?: RefObject<HTMLElement>;
+    /** Отключает возможность взаимодействовать со скролбарами мышью. */
+    untouchableScrollbars?: boolean;
     /** Колбек на скролл прокручиваемого списка */
     onScroll?: OriginalScrollProps['onScroll'];
 };

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "List",
-  "version": "0.15.3",
+  "version": "0.16.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -49,5 +49,5 @@
   "peerDependencies": {
     "@snack-uikit/locale": "*"
   },
-  "gitHead": "4b0115dd4accdaf26fcd86248ec1ac8e78ac41a5"
+  "gitHead": "f28082de935a68b3cd19966d62b18ad6b98f4197"
 }

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

@@ -24,6 +24,7 @@ export function NextListItem({
   allChildIds,
   loading = false,
   focusId = id,
+  untouchableScrollbars = false,
   ...option
 }: NextListItemProps) {
   const { flattenItems, focusFlattenItems } = useNewListContext();
@@ -104,6 +105,7 @@ export function NextListItem({
           }}
           scrollRef={scrollRef}
           limitedScrollHeight
+          untouchableScrollbars={untouchableScrollbars}
           loading={loading}
         />
       }

package/src/components/Lists/Droplist/DropList.tsx

@@ -42,6 +42,7 @@ export function Droplist({
   closeDroplistOnItemClick = false,
   className,
   listRef: listRefProp,
+  untouchableScrollbars = false,
   ...props
 }: DroplistProps) {
   const hasSearch = useMemo(() => Boolean(search), [search]);
@@ -233,6 +234,7 @@ export function Droplist({
                         forceUpdateActiveItemId?.(ids[0]);
                       }}
                       limitedScrollHeight
+                      untouchableScrollbars={untouchableScrollbars}
                     />
                   </div>
                 }

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

@@ -33,6 +33,7 @@ export const ListPrivate = forwardRef(
       footer,
       loading,
       limitedScrollHeight,
+      untouchableScrollbars,
       className,
       noDataState,
       noResultsState,
@@ -117,6 +118,7 @@ export const ListPrivate = forwardRef(
             barHideStrategy='never'
             size={size === 's' ? 's' : 'm'}
             ref={scrollContainerRef}
+            untouchableScrollbars={untouchableScrollbars}
             onScroll={onScroll}
           >
             {content}

package/src/types.ts

@@ -16,6 +16,8 @@ export type ScrollProps = {
   scrollRef?: RefObject<HTMLElement>;
   /** Ссылка на контейнер, который скроллится */
   scrollContainerRef?: RefObject<HTMLElement>;
+  /** Отключает возможность взаимодействовать со скролбарами мышью. */
+  untouchableScrollbars?: boolean;
   /** Колбек на скролл прокручиваемого списка */
   onScroll?: OriginalScrollProps['onScroll'];
 };