@snack-uikit/list 0.27.0 → 0.27.1

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.27.1 (2025-03-06)
+
+
+### Bug Fixes
+
+* **PDS-1483:** ability to provide label for toggle button for list ([bc76b1f](https://github.com/cloud-ru-tech/snack-uikit/commit/bc76b1f07a342c73809bc69816cd11423b1c6454))
+
+
+
+
+
 # 0.27.0 (2025-03-05)
 
 

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

@@ -8,5 +8,5 @@ type AllBaseItemProps = FlattenBaseItem & {
     isParentNode?: boolean;
     onOpenNestedList?(e?: KeyboardEvent<HTMLElement>): void;
 };
-export declare function BaseItem({ beforeContent, afterContent, content, onClick, onMouseDown, id, expandIcon, disabled, open, itemRef, switch: switchProp, onKeyDown, onFocus, indeterminate, checked: checkedProp, onSelect, onOpenNestedList, isParentNode, className, inactive, itemWrapRender, ...rest }: AllBaseItemProps): string | number | boolean | Iterable<ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
+export declare function BaseItem({ beforeContent, afterContent, content, onClick, onMouseDown, id, expandIcon, disabled, open, itemRef, switch: switchProp, showSwitchIcon, onKeyDown, onFocus, indeterminate, checked: checkedProp, onSelect, onOpenNestedList, isParentNode, className, inactive, itemWrapRender, ...rest }: AllBaseItemProps): string | number | boolean | Iterable<ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
 export {};

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

@@ -41,6 +41,7 @@ function BaseItem(_a) {
       open,
       itemRef,
       switch: switchProp,
+      showSwitchIcon,
       onKeyDown,
       onFocus,
       indeterminate,
@@ -52,7 +53,7 @@ function BaseItem(_a) {
       inactive,
       itemWrapRender
     } = _a,
-    rest = __rest(_a, ["beforeContent", "afterContent", "content", "onClick", "onMouseDown", "id", "expandIcon", "disabled", "open", "itemRef", "switch", "onKeyDown", "onFocus", "indeterminate", "checked", "onSelect", "onOpenNestedList", "isParentNode", "className", "inactive", "itemWrapRender"]);
+    rest = __rest(_a, ["beforeContent", "afterContent", "content", "onClick", "onMouseDown", "id", "expandIcon", "disabled", "open", "itemRef", "switch", "showSwitchIcon", "onKeyDown", "onFocus", "indeterminate", "checked", "onSelect", "onOpenNestedList", "isParentNode", "className", "inactive", "itemWrapRender"]);
   const interactive = !inactive;
   const {
     size = 's',
@@ -189,7 +190,8 @@ function BaseItem(_a) {
       }), afterContent, switchProp && interactive && (0, jsx_runtime_1.jsx)(toggles_1.Switch, {
         disabled: disabled,
         checked: isChecked,
-        "data-test-id": 'list__base-item-switch'
+        "data-test-id": 'list__base-item-switch',
+        showIcon: showSwitchIcon
       }), !switchProp && expandIcon && (0, jsx_runtime_1.jsx)("span", {
         className: styles_module_scss_2.default.expandableIcon,
         children: expandIcon

package/dist/cjs/components/Items/GroupSelectItem/GroupSelectItem.d.ts

@@ -1,4 +1,4 @@
 import { CommonFlattenProps, FlattenGroupSelectListItem } from '../types';
 type GroupSelectItemProps = Omit<FlattenGroupSelectListItem, 'type'> & CommonFlattenProps;
-export declare function GroupSelectItem({ label, truncate, divider, items, mode, id, itemRef, allChildIds, }: GroupSelectItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function GroupSelectItem({ label, truncate, divider, items, mode, id, itemRef, allChildIds, selectButtonLabel, }: GroupSelectItemProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/cjs/components/Items/GroupSelectItem/GroupSelectItem.js

@@ -16,7 +16,8 @@ function GroupSelectItem(_ref) {
     mode,
     id,
     itemRef,
-    allChildIds
+    allChildIds,
+    selectButtonLabel
   } = _ref;
   const {
     indeterminate,
@@ -39,7 +40,8 @@ function GroupSelectItem(_ref) {
         indeterminate,
         checked,
         itemRef,
-        onClick: handleOnSelect
+        onClick: handleOnSelect,
+        label: selectButtonLabel
       }
     }), itemsJSX]
   });

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

@@ -49,6 +49,10 @@ export type BaseItem = WithSupportProps<{
      * Флаг отображения состояния выбранного элемента через switch
      */
     switch?: boolean;
+    /**
+     * Флаг отображения иконки у чекбоксов
+     */
+    showSwitchIcon?: boolean;
     itemWrapRender?(item: ReactNode): ReactNode;
     checked?: boolean;
 }>;
@@ -83,6 +87,7 @@ export type GroupItem = CommonGroupItem & {
 export type GroupSelectItem = CommonGroupItem & {
     items: Item[];
     type: 'group-select';
+    selectButtonLabel?: string;
     id?: ItemId;
     itemRef?: RefObject<HTMLElement>;
 };

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

@@ -8,5 +8,5 @@ type AllBaseItemProps = FlattenBaseItem & {
     isParentNode?: boolean;
     onOpenNestedList?(e?: KeyboardEvent<HTMLElement>): void;
 };
-export declare function BaseItem({ beforeContent, afterContent, content, onClick, onMouseDown, id, expandIcon, disabled, open, itemRef, switch: switchProp, onKeyDown, onFocus, indeterminate, checked: checkedProp, onSelect, onOpenNestedList, isParentNode, className, inactive, itemWrapRender, ...rest }: AllBaseItemProps): string | number | boolean | Iterable<ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
+export declare function BaseItem({ beforeContent, afterContent, content, onClick, onMouseDown, id, expandIcon, disabled, open, itemRef, switch: switchProp, showSwitchIcon, onKeyDown, onFocus, indeterminate, checked: checkedProp, onSelect, onOpenNestedList, isParentNode, className, inactive, itemWrapRender, ...rest }: AllBaseItemProps): string | number | boolean | Iterable<ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
 export {};

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

@@ -21,7 +21,7 @@ import { CHECKBOX_SIZE_MAP } from './constants';
 import styles from './styles.module.css';
 export function BaseItem(_a) {
     var _b;
-    var { beforeContent, afterContent, content, onClick, onMouseDown, id, expandIcon, disabled, open, itemRef, switch: switchProp, onKeyDown, onFocus, indeterminate, checked: checkedProp, onSelect, onOpenNestedList, isParentNode, className, inactive, itemWrapRender } = _a, rest = __rest(_a, ["beforeContent", "afterContent", "content", "onClick", "onMouseDown", "id", "expandIcon", "disabled", "open", "itemRef", "switch", "onKeyDown", "onFocus", "indeterminate", "checked", "onSelect", "onOpenNestedList", "isParentNode", "className", "inactive", "itemWrapRender"]);
+    var { beforeContent, afterContent, content, onClick, onMouseDown, id, expandIcon, disabled, open, itemRef, switch: switchProp, showSwitchIcon, onKeyDown, onFocus, indeterminate, checked: checkedProp, onSelect, onOpenNestedList, isParentNode, className, inactive, itemWrapRender } = _a, rest = __rest(_a, ["beforeContent", "afterContent", "content", "onClick", "onMouseDown", "id", "expandIcon", "disabled", "open", "itemRef", "switch", "showSwitchIcon", "onKeyDown", "onFocus", "indeterminate", "checked", "onSelect", "onOpenNestedList", "isParentNode", "className", "inactive", "itemWrapRender"]);
     const interactive = !inactive;
     const { size = 's', marker, contentRender, firstItemId, focusFlattenItems } = useNewListContext();
     const { level = 0 } = useCollapseLevelContext();
@@ -86,7 +86,7 @@ export function BaseItem(_a) {
         }
     };
     const props = extractSupportProps(rest);
-    const itemJSX = (_jsx("div", { className: cn(commonStyles.itemWrapper, styles.innerWrapper, className), "data-inactive": inactive || undefined, "data-disabled": disabled || undefined, "data-variant": mode || undefined, "data-checked": (isParentNode && isChecked) || (!isParentNode && isChecked && !switchProp) || undefined, children: _jsxs("li", { "data-type": 'outside', role: 'menuitem', "data-test-id": props['data-test-id'] || 'list__base-item_' + id, ref: itemRef, className: cn(commonStyles.listItem, styles.droplistItem), "data-size": size, onClick: handleItemClick, onMouseDown: handleItemMouseDown, tabIndex: firstItemId && id === focusFlattenItems[firstItemId].originalId ? 0 : -1, "data-non-pointer": inactive && !onClick, "data-variant": mode || undefined, "data-open": open || undefined, onKeyDown: handleItemKeyDown, onFocus: handleItemFocus, style: { '--level': level }, "data-level-one": level === 1 || undefined, "data-level-more-one": level > 1 || undefined, "data-checked": (isParentNode && (indeterminate || isChecked)) || (isChecked && !switchProp) || undefined, 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: isParentNode ? handleCheckboxChange : undefined, checked: isChecked, "data-test-id": 'list__base-item-checkbox', onClick: handleCheckboxClick, indeterminate: indeterminate }) })), beforeContent && _jsx("div", { className: styles.beforeContent, children: beforeContent }), content && isContentItem(content) ? (((_b = contentRender === null || contentRender === void 0 ? void 0 : contentRender({ id, content, disabled })) !== null && _b !== void 0 ? _b : _jsx(ItemContent, Object.assign({ disabled: disabled }, content)))) : (_jsxs("div", { className: styles.content, children: [" ", content, " "] })), 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 itemJSX = (_jsx("div", { className: cn(commonStyles.itemWrapper, styles.innerWrapper, className), "data-inactive": inactive || undefined, "data-disabled": disabled || undefined, "data-variant": mode || undefined, "data-checked": (isParentNode && isChecked) || (!isParentNode && isChecked && !switchProp) || undefined, children: _jsxs("li", { "data-type": 'outside', role: 'menuitem', "data-test-id": props['data-test-id'] || 'list__base-item_' + id, ref: itemRef, className: cn(commonStyles.listItem, styles.droplistItem), "data-size": size, onClick: handleItemClick, onMouseDown: handleItemMouseDown, tabIndex: firstItemId && id === focusFlattenItems[firstItemId].originalId ? 0 : -1, "data-non-pointer": inactive && !onClick, "data-variant": mode || undefined, "data-open": open || undefined, onKeyDown: handleItemKeyDown, onFocus: handleItemFocus, style: { '--level': level }, "data-level-one": level === 1 || undefined, "data-level-more-one": level > 1 || undefined, "data-checked": (isParentNode && (indeterminate || isChecked)) || (isChecked && !switchProp) || undefined, 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: isParentNode ? handleCheckboxChange : undefined, checked: isChecked, "data-test-id": 'list__base-item-checkbox', onClick: handleCheckboxClick, indeterminate: indeterminate }) })), beforeContent && _jsx("div", { className: styles.beforeContent, children: beforeContent }), content && isContentItem(content) ? (((_b = contentRender === null || contentRender === void 0 ? void 0 : contentRender({ id, content, disabled })) !== null && _b !== void 0 ? _b : _jsx(ItemContent, Object.assign({ disabled: disabled }, content)))) : (_jsxs("div", { className: styles.content, children: [" ", content, " "] })), afterContent, switchProp && interactive && (_jsx(Switch, { disabled: disabled, checked: isChecked, "data-test-id": 'list__base-item-switch', showIcon: showSwitchIcon })), !switchProp && expandIcon && _jsx("span", { className: styles.expandableIcon, children: expandIcon })] }) }));
     if (!itemWrapRender) {
         return itemJSX;
     }

package/dist/esm/components/Items/GroupSelectItem/GroupSelectItem.d.ts

@@ -1,4 +1,4 @@
 import { CommonFlattenProps, FlattenGroupSelectListItem } from '../types';
 type GroupSelectItemProps = Omit<FlattenGroupSelectListItem, 'type'> & CommonFlattenProps;
-export declare function GroupSelectItem({ label, truncate, divider, items, mode, id, itemRef, allChildIds, }: GroupSelectItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function GroupSelectItem({ label, truncate, divider, items, mode, id, itemRef, allChildIds, selectButtonLabel, }: GroupSelectItemProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/components/Items/GroupSelectItem/GroupSelectItem.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { Separator } from '../../../helperComponents';
 import { useGroupItemSelection, useRenderItems } from '../hooks';
-export function GroupSelectItem({ label, truncate, divider, items, mode, id, itemRef, allChildIds, }) {
+export function GroupSelectItem({ label, truncate, divider, items, mode, id, itemRef, allChildIds, selectButtonLabel, }) {
     const { indeterminate, checked, handleOnSelect } = useGroupItemSelection({
         items,
         id,
@@ -14,5 +14,6 @@ export function GroupSelectItem({ label, truncate, divider, items, mode, id, ite
                     checked,
                     itemRef,
                     onClick: handleOnSelect,
+                    label: selectButtonLabel,
                 } }), itemsJSX] }));
 }

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

@@ -49,6 +49,10 @@ export type BaseItem = WithSupportProps<{
      * Флаг отображения состояния выбранного элемента через switch
      */
     switch?: boolean;
+    /**
+     * Флаг отображения иконки у чекбоксов
+     */
+    showSwitchIcon?: boolean;
     itemWrapRender?(item: ReactNode): ReactNode;
     checked?: boolean;
 }>;
@@ -83,6 +87,7 @@ export type GroupItem = CommonGroupItem & {
 export type GroupSelectItem = CommonGroupItem & {
     items: Item[];
     type: 'group-select';
+    selectButtonLabel?: string;
     id?: ItemId;
     itemRef?: RefObject<HTMLElement>;
 };

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "List",
-  "version": "0.27.0",
+  "version": "0.27.1",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -54,5 +54,5 @@
   "peerDependencies": {
     "@snack-uikit/locale": "*"
   },
-  "gitHead": "d8510c4d566cee9fd0e96ff969fdefb7fb11ac49"
+  "gitHead": "cafb29b74a6ac4d38594e9d46599617925165935"
 }

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

@@ -38,6 +38,7 @@ export function BaseItem({
   open,
   itemRef,
   switch: switchProp,
+  showSwitchIcon,
   onKeyDown,
   onFocus,
   indeterminate,
@@ -188,7 +189,12 @@ export function BaseItem({
         {afterContent}
 
         {switchProp && interactive && (
-          <Switch disabled={disabled} checked={isChecked} data-test-id='list__base-item-switch' />
+          <Switch
+            disabled={disabled}
+            checked={isChecked}
+            data-test-id='list__base-item-switch'
+            showIcon={showSwitchIcon}
+          />
         )}
 
         {!switchProp && expandIcon && <span className={styles.expandableIcon}>{expandIcon}</span>}

package/src/components/Items/GroupSelectItem/GroupSelectItem.tsx

@@ -13,6 +13,7 @@ export function GroupSelectItem({
   id,
   itemRef,
   allChildIds,
+  selectButtonLabel,
 }: GroupSelectItemProps) {
   const { indeterminate, checked, handleOnSelect } = useGroupItemSelection({
     items,
@@ -35,6 +36,7 @@ export function GroupSelectItem({
           checked,
           itemRef,
           onClick: handleOnSelect,
+          label: selectButtonLabel,
         }}
       />
 

package/src/components/Items/types.ts

@@ -58,6 +58,10 @@ export type BaseItem = WithSupportProps<{
    * Флаг отображения состояния выбранного элемента через switch
    */
   switch?: boolean;
+  /**
+   * Флаг отображения иконки у чекбоксов
+   */
+  showSwitchIcon?: boolean;
 
   itemWrapRender?(item: ReactNode): ReactNode;
 
@@ -106,6 +110,7 @@ export type GroupItem = CommonGroupItem & {
 export type GroupSelectItem = CommonGroupItem & {
   items: Item[];
   type: 'group-select';
+  selectButtonLabel?: string;
 
   id?: ItemId;
   itemRef?: RefObject<HTMLElement>;