@snack-uikit/list - npm Package Compare versions

Comparing version 0.3.0 to 0.3.1-preview-357970fd.0

dist/components/Items/BaseItem/BaseItem.js

@@ -26,3 +26,3 @@ var __rest = (this && this.__rest) || function (s, e) {
     const { parentResetActiveFocusIndex } = useParentListContext();
-    const { size, marker } = useListContext();
+    const { size, marker, parent } = useListContext();
     const { level = 0 } = useCollapseContext();
@@ -72,3 +72,3 @@ const { value, onChange, mode, isSelectionSingle, isSelectionMultiple } = useSelectionContext();
     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) {
@@ -75,0 +75,0 @@ return item;

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

@@ -8,8 +8,11 @@ import { ReactNode } from 'react';
 };
+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 {};

dist/components/Lists/contexts/ListProvider.js

@@ -16,4 +16,4 @@ var __rest = (this && this.__rest) || function (s, e) {
 export const useListContext = () => useContext(ListContext);
-function extractListProps({ size, marker }) {
-    return { size, marker };
+function extractListProps({ size, marker, parent }) {
+    return { size, marker, parent };
 }
@@ -20,0 +20,0 @@ export function ListContextProvider(_a) {

dist/components/Lists/Droplist/DropList.js

@@ -98,3 +98,3 @@ var __rest = (this && this.__rest) || function (s, e) {
                 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
                 ? {}
@@ -101,0 +101,0 @@ : {

dist/components/Lists/List/List.js

@@ -90,3 +90,3 @@ var __rest = (this && this.__rest) || function (s, e) {
                 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 })] }) }) })));
 });

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

@@ -22,3 +22,3 @@ import { RefObject } from 'react';
     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;
@@ -25,0 +25,0 @@ active?: boolean | undefined;

dist/components/Lists/ListPrivate/ListPrivate.js

@@ -25,3 +25,3 @@ var __rest = (this && this.__rest) || function (s, e) {
     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);
@@ -39,5 +39,5 @@ const itemsPinTopJSX = useRenderItems(pinTop !== null && pinTop !== void 0 ? pinTop : []);
     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 }));
 });

dist/components/Lists/types.d.ts

@@ -6,3 +6,3 @@ import { FocusEvent, KeyboardEvent, ReactNode, RefObject } from 'react';
 import { ItemProps } from '../Items';
-import { ListContextType, SelectionState } from './contexts';
+import { ListContextPrivateType, ListContextType, SelectionState } from './contexts';
 type CollapseState = {
@@ -49,3 +49,3 @@ value?: (string | number)[];
 } & Pick<DropdownProps, 'trigger' | 'placement' | 'widthStrategy' | 'open' | 'onOpenChange'> & Omit<ListProps, 'tabIndex' | 'onKeyDown'>;
-export type ListPrivateProps = ListProps & {
+export type ListPrivateProps = ListProps & ListContextPrivateType & {
     nested?: boolean;
@@ -52,0 +52,0 @@ active?: boolean;

package.json

@@ -7,3 +7,3 @@ {
   "title": "List",
-  "version": "0.3.0",
+  "version": "0.3.1-preview-357970fd.0",
   "sideEffects": [
@@ -49,3 +49,3 @@ "*.css",
   },
-  "gitHead": "88a44a8f4c6490f3004f7feac3d50d17ff03f31c"
+  "gitHead": "2a29639b6595426f8870afc293553dd9ee12f188"
 }

src/components/Lists/types.ts

@@ -8,3 +8,3 @@ import { FocusEvent, KeyboardEvent, ReactNode, RefObject } from 'react';
 import { ItemProps } from '../Items';
-import { ListContextType, SelectionState } from './contexts';
+import { ListContextPrivateType, ListContextType, SelectionState } from './contexts';
 
@@ -60,10 +60,11 @@ type CollapseState = {
 
-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;
+  };

No alert changes

Improved metrics

Total package byte prevSize

190947

increased by0.48%

Lines of code

3810

increased by0.45%

No dependency changes