@snack-uikit/list 0.3.2-preview-ff0b5a40.0 → 0.3.2

package/CHANGELOG.md

@@ -3,6 +3,15 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 0.3.2 (2024-02-09)
+
+### Only dependencies have been changed
+* [@snack-uikit/scroll@0.5.1](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/scroll/CHANGELOG.md)
+
+
+
+
+
 ## 0.3.1 (2024-02-08)
 
 ### Only dependencies have been changed

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

@@ -23,7 +23,7 @@ export function BaseItem(_a) {
     const { option, caption, description } = content || {};
     const interactive = !inactive;
     const { parentResetActiveFocusIndex } = useParentListContext();
-    const { size, marker } = useListContext();
+    const { size, marker, parent } = useListContext();
     const { level = 0 } = useCollapseContext();
     const { value, onChange, mode, isSelectionSingle, isSelectionMultiple } = useSelectionContext();
     const isChecked = isSelectionSingle ? value === id : value === null || value === void 0 ? void 0 : value.includes(id);
@@ -68,7 +68,7 @@ export function BaseItem(_a) {
         e.stopPropagation();
     };
     const props = extractSupportProps(rest);
-    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 })] }));
+    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, "data-parent": parent || 'list', 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) {
         return item;
     }

package/dist/components/Items/BaseItem/styles.module.css

@@ -72,6 +72,7 @@
 }
 
 .content{
+  overflow:hidden;
   flex-grow:1;
   flex-shrink:1;
   box-sizing:border-box;
@@ -170,6 +171,13 @@
   letter-spacing:var(--sans-body-m-letter-spacing, 0.1px);
   paragraph-spacing:var(--sans-body-m-paragraph-spacing, 7.7px);
 }
+.droplistItem[data-parent=list]{
+  width:100%;
+}
+.droplistItem[data-parent=droplist]{
+  width:-moz-max-content;
+  width:max-content;
+}
 .droplistItem[data-non-pointer]{
   cursor:inherit;
 }

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

@@ -95,7 +95,7 @@ export function Droplist(_a) {
                 parentResetNestedIndex: resetNestedIndex,
                 parentResetActiveFocusIndex: resetActiveFocusIndex,
                 toggleOpenCollapsedItems: id => setOpenCollapsedItems((items = []) => items.includes(id) ? items.filter(item => item !== id) : items === null || items === void 0 ? void 0 : items.concat([id])),
-            }, children: _jsx(Dropdown, Object.assign({ content: _jsx(ListPrivate, Object.assign({ onKeyDown: handleListKeyDown, tabIndex: 0, ref: listRef, search: search, limitedScrollHeight: true }, slicedItems, props)), trigger: trigger, placement: placement, widthStrategy: widthStrategy }, (triggerElemRefProp
+            }, children: _jsx(Dropdown, Object.assign({ content: _jsx(ListPrivate, Object.assign({}, slicedItems, props, { onKeyDown: handleListKeyDown, tabIndex: 0, ref: listRef, search: search, limitedScrollHeight: true, parent: 'droplist' })), trigger: trigger, placement: placement, widthStrategy: widthStrategy }, (triggerElemRefProp
                 ? {}
                 : {
                     triggerRef: triggerElemRef,

package/dist/components/Lists/List/List.js

@@ -87,5 +87,5 @@ export const List = forwardRef((_a, ref) => {
                 parentResetActiveFocusIndex: resetActiveFocusIndex,
                 openCollapsedItems,
                 toggleOpenCollapsedItems: id => setOpenCollapsedItems((items = []) => items.includes(id) ? items.filter(item => item !== id) : items === null || items === void 0 ? void 0 : items.concat([id])),
-            }, children: _jsxs("div", { className: cn(styles.wrapper, className), "data-active": isActive || undefined, children: [_jsx(ListPrivate, Object.assign({}, props, slicedItems, { ref: mergeRefs(ref, listRef), onFocus: handleOnFocus, onKeyDown: mergedHandlerKeyDown, tabIndex: tabIndex, search: search, nested: false })), _jsx(HiddenTabButton, { ref: btnRef, listRef: listRef, tabIndex: tabIndex })] }) }) })));
+            }, children: _jsxs("div", { className: cn(styles.wrapper, className), "data-active": isActive || undefined, children: [_jsx(ListPrivate, Object.assign({}, props, slicedItems, { ref: mergeRefs(ref, listRef), onFocus: handleOnFocus, onKeyDown: mergedHandlerKeyDown, tabIndex: tabIndex, search: search, nested: false, parent: 'list' })), _jsx(HiddenTabButton, { ref: btnRef, listRef: listRef, tabIndex: tabIndex })] }) }) })));
 });

package/dist/components/Lists/ListPrivate/ListPrivate.d.ts

@@ -19,7 +19,7 @@ export declare const ListPrivate: import("react").ForwardRefExoticComponent<{
     } | undefined;
     className?: string | undefined;
     onKeyDown?(e: import("react").KeyboardEvent<HTMLElement>): void;
-} & import("../contexts").SelectionState & import("../contexts").ListContextType & import("../../../types").ScrollProps & {
+} & import("../contexts").SelectionState & import("../contexts").ListContextType & import("../../../types").ScrollProps & import("../contexts").ListContextPrivateType & {
     nested?: boolean | undefined;
     active?: boolean | undefined;
     tabIndex?: number | undefined;

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

@@ -22,7 +22,7 @@ import commonStyles from '../styles.module.css';
 import styles from './styles.module.css';
 export const ListPrivate = forwardRef((_a, ref) => {
     var _b, _c;
-    var { items, pinTop, pinBottom, onKeyDown, onBlur, onFocus, tabIndex, active, scroll, nested, search, scrollRef, scrollContainerRef, footer, loading, noData = 'No data', noResults = 'No results', size = 's', marker, limitedScrollHeight, className } = _a, props = __rest(_a, ["items", "pinTop", "pinBottom", "onKeyDown", "onBlur", "onFocus", "tabIndex", "active", "scroll", "nested", "search", "scrollRef", "scrollContainerRef", "footer", "loading", "noData", "noResults", "size", "marker", "limitedScrollHeight", "className"]);
+    var { items, pinTop, pinBottom, onKeyDown, onBlur, onFocus, tabIndex, active, scroll, nested, search, scrollRef, scrollContainerRef, footer, loading, noData = 'No data', noResults = 'No results', size = 's', marker, limitedScrollHeight, className, parent = 'list' } = _a, props = __rest(_a, ["items", "pinTop", "pinBottom", "onKeyDown", "onBlur", "onFocus", "tabIndex", "active", "scroll", "nested", "search", "scrollRef", "scrollContainerRef", "footer", "loading", "noData", "noResults", "size", "marker", "limitedScrollHeight", "className", "parent"]);
     const itemsJSX = useRenderItems(items);
     const itemsPinTopJSX = useRenderItems(pinTop !== null && pinTop !== void 0 ? pinTop : []);
     const itemsPinBottomJSX = useRenderItems(pinBottom !== null && pinBottom !== void 0 ? pinBottom : []);
@@ -33,9 +33,9 @@ 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: 'leave', size: size === 's' ? 's' : 'm', ref: scrollContainerRef, children: [content, _jsx("div", { className: styles.scrollStub, ref: scrollRef })] })) : (_jsx(_Fragment, { children: content })), (Number(pinBottom === null || pinBottom === void 0 ? void 0 : pinBottom.length) > 0 || footer) && (_jsxs(PinBottomGroupItem, { children: [Number(pinBottom === null || pinBottom === void 0 ? void 0 : pinBottom.length) > 0 && itemsPinBottomJSX, footer && _jsx("div", { className: styles.footer, children: footer })] }))] }) })));
+                    }), barHideStrategy: 'leave', size: size === 's' ? 's' : 'm', ref: scrollContainerRef, 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, children: footer })] }) })));
     if (!nested) {
-        return (_jsx(ListContextProvider, { size: size, marker: marker, children: listJSX }));
+        return (_jsx(ListContextProvider, { size: size, marker: marker, parent: parent, children: listJSX }));
     }
     return (_jsx("li", { style: { listStyleType: 'none' }, role: 'menuitem', children: listJSX }));
 });

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

@@ -38,9 +38,6 @@
 .footer{
   display:flex;
   flex-direction:column;
-  gap:var(--dimension-050m, 4px);
-  align-items:center;
-  justify-content:center;
   box-sizing:border-box;
   padding:var(--dimension-050m, 4px);
 }

package/dist/components/Lists/contexts/ListProvider.d.ts

@@ -5,10 +5,13 @@ export type ListContextType = {
     /** Отображать ли маркер у выбранного жлемента списка */
     marker?: boolean;
 };
+export type ListContextPrivateType = {
+    parent?: 'list' | 'droplist';
+};
 type Child = {
     children: ReactNode;
 };
-export declare const ListContext: import("react").Context<ListContextType>;
-export declare const useListContext: () => ListContextType;
-export declare function ListContextProvider({ children, ...props }: ListContextType & Child): import("react/jsx-runtime").JSX.Element;
+export declare const ListContext: import("react").Context<ListContextType & ListContextPrivateType>;
+export declare const useListContext: () => ListContextType & ListContextPrivateType;
+export declare function ListContextProvider({ children, ...props }: ListContextType & Child & ListContextPrivateType): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Lists/contexts/ListProvider.js

@@ -13,8 +13,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, useContext } from 'react';
 export const ListContext = createContext({});
 export const useListContext = () => useContext(ListContext);
-function extractListProps({ size, marker }) {
-    return { size, marker };
+function extractListProps({ size, marker, parent }) {
+    return { size, marker, parent };
 }
 export function ListContextProvider(_a) {
     var { children } = _a, props = __rest(_a, ["children"]);

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

@@ -3,7 +3,7 @@ import { DropdownProps } from '@snack-uikit/dropdown';
 import { WithSupportProps } from '@snack-uikit/utils';
 import { ScrollProps, SearchState } from '../../types';
 import { ItemProps } from '../Items';
-import { ListContextType, SelectionState } from './contexts';
+import { ListContextPrivateType, ListContextType, SelectionState } from './contexts';
 type CollapseState = {
     value?: (string | number)[];
     onChange?(value: (string | number)[]): void;
@@ -45,7 +45,7 @@ export type DroplistProps = {
     /** Триггер для дроплиста */
     children?: ReactNode;
 } & Pick<DropdownProps, 'trigger' | 'placement' | 'widthStrategy' | 'open' | 'onOpenChange'> & Omit<ListProps, 'tabIndex' | 'onKeyDown'>;
-export type ListPrivateProps = ListProps & {
+export type ListPrivateProps = ListProps & ListContextPrivateType & {
     nested?: boolean;
     active?: boolean;
     tabIndex?: number;

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "List",
-  "version": "0.3.2-preview-ff0b5a40.0",
+  "version": "0.3.2",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -36,7 +36,7 @@
     "@snack-uikit/dropdown": "0.2.0",
     "@snack-uikit/icons": "0.20.1",
     "@snack-uikit/loaders": "0.5.0",
-    "@snack-uikit/scroll": "0.5.1-preview-ff0b5a40.0",
+    "@snack-uikit/scroll": "0.5.1",
     "@snack-uikit/search-private": "0.1.4",
     "@snack-uikit/toggles": "0.9.5",
     "@snack-uikit/truncate-string": "0.4.7",
@@ -45,5 +45,5 @@
     "merge-refs": "1.2.2",
     "uncontrollable": "8.0.4"
   },
-  "gitHead": "d0da325584dc9c4ba0b74b82c4f83394314fe95c"
+  "gitHead": "3da1fb6b1253a73f4e2d7afb5494b64bbfdd6508"
 }

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

@@ -39,7 +39,7 @@ export function BaseItem({
   const interactive = !inactive;
 
   const { parentResetActiveFocusIndex } = useParentListContext();
-  const { size, marker } = useListContext();
+  const { size, marker, parent } = useListContext();
   const { level = 0 } = useCollapseContext();
   const { value, onChange, mode, isSelectionSingle, isSelectionMultiple } = useSelectionContext();
 
@@ -112,6 +112,7 @@ export function BaseItem({
       data-variant={mode || undefined}
       data-open={open || undefined}
       aria-disabled={disabled || undefined}
+      data-parent={parent || 'list'}
       onKeyDown={handleItemKeyDown}
       onFocus={handleItemFocus}
       style={{ '--level': level }}

package/src/components/Items/BaseItem/styles.module.scss

@@ -104,6 +104,7 @@ $typography: (
 }
 
 .content {
+  overflow: hidden;
   flex-grow: 1;
   flex-shrink: 1;
   box-sizing: border-box;
@@ -134,6 +135,14 @@ $typography: (
     }
   }
 
+  &[data-parent='list'] {
+    width: 100%;
+  }
+
+  &[data-parent='droplist'] {
+    width: max-content;
+  }
+
   &[data-non-pointer] {
     cursor: inherit;
   }

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

@@ -147,13 +147,14 @@ export function Droplist({
         <Dropdown
           content={
             <ListPrivate
+              {...slicedItems}
+              {...props}
               onKeyDown={handleListKeyDown}
               tabIndex={0}
               ref={listRef}
               search={search}
               limitedScrollHeight
-              {...slicedItems}
-              {...props}
+              parent='droplist'
             />
           }
           trigger={trigger}

package/src/components/Lists/List/List.tsx

@@ -141,6 +141,7 @@ export const List = forwardRef<HTMLElement, ListProps>(
               tabIndex={tabIndex}
               search={search}
               nested={false}
+              parent='list'
             />
 
             <HiddenTabButton ref={btnRef} listRef={listRef} tabIndex={tabIndex} />

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

@@ -36,6 +36,7 @@ export const ListPrivate = forwardRef<HTMLElement, ListPrivateProps>(
       marker,
       limitedScrollHeight,
       className,
+      parent = 'list',
       ...props
     },
     ref,
@@ -122,20 +123,16 @@ export const ListPrivate = forwardRef<HTMLElement, ListPrivateProps>(
             <>{content}</>
           )}
 
-          {(Number(pinBottom?.length) > 0 || footer) && (
-            <PinBottomGroupItem>
-              {Number(pinBottom?.length) > 0 && itemsPinBottomJSX}
+          {Number(pinBottom?.length) > 0 && <PinBottomGroupItem>{itemsPinBottomJSX}</PinBottomGroupItem>}
 
-              {footer && <div className={styles.footer}>{footer}</div>}
-            </PinBottomGroupItem>
-          )}
+          {footer && <div className={styles.footer}>{footer}</div>}
         </ToggleGroup>
       </ul>
     );
 
     if (!nested) {
       return (
-        <ListContextProvider size={size} marker={marker}>
+        <ListContextProvider size={size} marker={marker} parent={parent}>
           {listJSX}
         </ListContextProvider>
       );

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

@@ -39,10 +39,6 @@ $loader-height: (
 .footer {
   display: flex;
   flex-direction: column;
-  gap: $dimension-050m;
-  align-items: center;
-  justify-content: center;
-
   box-sizing: border-box;
   padding: $dimension-050m;
 }

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

@@ -7,18 +7,22 @@ export type ListContextType = {
   marker?: boolean;
 };
 
+export type ListContextPrivateType = {
+  parent?: 'list' | 'droplist';
+};
+
 type Child = {
   children: ReactNode;
 };
 
-export const ListContext = createContext<ListContextType>({});
+export const ListContext = createContext<ListContextType & ListContextPrivateType>({});
 
 export const useListContext = () => useContext(ListContext);
 
-function extractListProps<T extends ListContextType>({ size, marker }: T) {
-  return { size, marker };
+function extractListProps<T extends ListContextType & ListContextPrivateType>({ size, marker, parent }: T) {
+  return { size, marker, parent };
 }
 
-export function ListContextProvider({ children, ...props }: ListContextType & Child) {
+export function ListContextProvider({ children, ...props }: ListContextType & Child & ListContextPrivateType) {
   return <ListContext.Provider value={extractListProps(props)}>{children}</ListContext.Provider>;
 }

package/src/components/Lists/types.ts

@@ -5,7 +5,7 @@ import { WithSupportProps } from '@snack-uikit/utils';
 
 import { ScrollProps, SearchState } from '../../types';
 import { ItemProps } from '../Items';
-import { ListContextType, SelectionState } from './contexts';
+import { ListContextPrivateType, ListContextType, SelectionState } from './contexts';
 
 type CollapseState = {
   value?: (string | number)[];
@@ -56,12 +56,13 @@ export type DroplistProps = {
 } & Pick<DropdownProps, 'trigger' | 'placement' | 'widthStrategy' | 'open' | 'onOpenChange'> &
   Omit<ListProps, 'tabIndex' | 'onKeyDown'>;
 
-export type ListPrivateProps = ListProps & {
-  nested?: boolean;
-  active?: boolean;
-  tabIndex?: number;
-  onFocus?(e: FocusEvent<HTMLElement>): void;
-  onBlur?(e: FocusEvent<HTMLElement>): void;
-  onKeyDown?(e: KeyboardEvent<HTMLElement>): void;
-  limitedScrollHeight?: boolean;
-};
+export type ListPrivateProps = ListProps &
+  ListContextPrivateType & {
+    nested?: boolean;
+    active?: boolean;
+    tabIndex?: number;
+    onFocus?(e: FocusEvent<HTMLElement>): void;
+    onBlur?(e: FocusEvent<HTMLElement>): void;
+    onKeyDown?(e: KeyboardEvent<HTMLElement>): void;
+    limitedScrollHeight?: boolean;
+  };