@snack-uikit/list 0.2.1 → 0.2.2-preview-4c16b47e.0

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

@@ -1,8 +1,9 @@
+/// <reference types="react" />
 import { BaseItemPrivateProps, BaseItemProps } from '../types';
 type AllBaseItemProps = BaseItemProps & BaseItemPrivateProps & {
     indeterminate?: boolean;
     onSelect?(): void;
     isParentNode?: boolean;
 };
-export declare function BaseItem({ beforeContent, afterContent, content, onClick, id, expandIcon, disabled, open, itemRef, switch: switchProp, onKeyDown, onFocus, indeterminate, onSelect, isParentNode, className, inactive, ...rest }: AllBaseItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function BaseItem({ beforeContent, afterContent, content, onClick, id, expandIcon, disabled, open, itemRef, switch: switchProp, onKeyDown, onFocus, indeterminate, onSelect, isParentNode, className, inactive, itemWrapRender, ...rest }: AllBaseItemProps): string | number | boolean | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
 export {};

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

@@ -19,7 +19,7 @@ import commonStyles from '../styles.module.css';
 import { CHECKBOX_SIZE_MAP } from './constants';
 import styles from './styles.module.css';
 export function BaseItem(_a) {
-    var { beforeContent, afterContent, content, onClick, id, expandIcon, disabled, open, itemRef, switch: switchProp, onKeyDown, onFocus, indeterminate, onSelect, isParentNode, className, inactive } = _a, rest = __rest(_a, ["beforeContent", "afterContent", "content", "onClick", "id", "expandIcon", "disabled", "open", "itemRef", "switch", "onKeyDown", "onFocus", "indeterminate", "onSelect", "isParentNode", "className", "inactive"]);
+    var { beforeContent, afterContent, content, onClick, id, expandIcon, disabled, open, itemRef, switch: switchProp, onKeyDown, onFocus, indeterminate, onSelect, isParentNode, className, inactive, itemWrapRender } = _a, rest = __rest(_a, ["beforeContent", "afterContent", "content", "onClick", "id", "expandIcon", "disabled", "open", "itemRef", "switch", "onKeyDown", "onFocus", "indeterminate", "onSelect", "isParentNode", "className", "inactive", "itemWrapRender"]);
     const { option, caption, description } = content || {};
     const interactive = !inactive;
     const { parentResetActiveFocusIndex } = useParentListContext();
@@ -68,5 +68,9 @@ export function BaseItem(_a) {
         e.stopPropagation();
     };
     const props = extractSupportProps(rest);
-    return (_jsx("li", { role: 'menuitem', "data-test-id": props['data-test-id'] || 'list__base-item_' + id, children: _jsxs("button", { 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, disabled: disabled, 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 = (_jsx("li", { role: 'menuitem', "data-test-id": props['data-test-id'] || 'list__base-item_' + id, children: _jsxs("button", { 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, disabled: disabled, 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;
+    }
+    return itemWrapRender(item);
 }

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

@@ -48,6 +48,7 @@ export type BaseItemProps = WithSupportProps<{
      * Флаг отображения состояния выбранного элемента через switch
      */
     switch?: boolean;
+    itemWrapRender?(item: ReactNode): ReactNode;
 }>;
 type BaseItemsWithoutNonGroupProps = Omit<BaseItemProps, 'switch' | 'inactive'>;
 export type ItemProps = BaseItemProps | AccordionItemProps | NextListItemProps | GroupItemProps;

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "List",
-  "version": "0.2.1",
+  "version": "0.2.2-preview-4c16b47e.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -45,5 +45,5 @@
     "merge-refs": "1.2.2",
     "uncontrollable": "8.0.4"
   },
-  "gitHead": "b1acc8128bdab6f23b534d7c464208069e59ed8c"
+  "gitHead": "b34b83d8b1a72a411232cb0cfedc133b705ea00c"
 }

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

@@ -32,6 +32,7 @@ export function BaseItem({
   isParentNode,
   className,
   inactive,
+  itemWrapRender,
   ...rest
 }: AllBaseItemProps) {
   const { option, caption, description } = content || {};
@@ -96,7 +97,7 @@ export function BaseItem({
 
   const props = extractSupportProps(rest);
 
-  return (
+  const item = (
     <li role={'menuitem'} data-test-id={props['data-test-id'] || 'list__base-item_' + id}>
       <button
         ref={itemRef}
@@ -158,4 +159,10 @@ export function BaseItem({
       </button>
     </li>
   );
+
+  if (!itemWrapRender) {
+    return item;
+  }
+
+  return itemWrapRender(item);
 }

package/src/components/Items/types.ts

@@ -58,6 +58,8 @@ export type BaseItemProps = WithSupportProps<{
    * Флаг отображения состояния выбранного элемента через switch
    */
   switch?: boolean;
+
+  itemWrapRender?(item: ReactNode): ReactNode;
 }>;
 
 type BaseItemsWithoutNonGroupProps = Omit<BaseItemProps, 'switch' | 'inactive'>;