@pushwoosh/smart-components-kit 2.1.4 → 2.2.0

package/Table/components/BulkSelectionBar/BulkSelectionBar.d.ts

@@ -0,0 +1,11 @@
+import { type ReactElement } from 'react';
+import type { BulkSelectionPageCheckbox } from '../../hooks/useBulkSelection';
+/** Props of {@link BulkSelectionBar}. */
+export type BulkSelectionBarProps = {
+    selectedCount: number;
+    offPageCount: number;
+    onClearSelection: () => void;
+    pageCheckbox?: BulkSelectionPageCheckbox;
+};
+/** Bulk mode status row: "Select all on this page" | N selected | M not on this page | Clear selection. */
+export declare function BulkSelectionBar(props: BulkSelectionBarProps): ReactElement;

package/Table/components/BulkSelectionBar/BulkSelectionBar.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from 'styled-components';
+import { Checkbox, Link } from '@pushwoosh/dumb-components';
+import { Color } from '@pushwoosh/kit-constants';
+import { Horizontal } from '@pushwoosh/kit-helpers';
+import { Text } from '@pushwoosh/kit-typography';
+import { useLang } from '../../polyglot';
+const VerticalDivider = styled.span.withConfig({
+  displayName: "VerticalDivider",
+  componentId: "sc-6wj5m8-0"
+})(["align-self:stretch;width:1px;background:", ";"], Color.DIVIDER);
+/** Bulk mode status row: "Select all on this page" | N selected | M not on this page | Clear selection. */
+export function BulkSelectionBar(props) {
+  const {
+    selectedCount,
+    offPageCount,
+    onClearSelection,
+    pageCheckbox
+  } = props;
+  const lang = useLang();
+  return _jsxs(Horizontal, {
+    "$alignItems": "center",
+    "$justifyContent": "start",
+    "$gap": 16,
+    children: [pageCheckbox && _jsxs(_Fragment, {
+      children: [_jsx(Checkbox, {
+        label: lang({
+          message: 'SMART.TABLE.BULK.SELECT_PAGE'
+        }),
+        isChecked: pageCheckbox.isChecked,
+        isIndeterminate: pageCheckbox.isIndeterminate,
+        isDisabled: pageCheckbox.isDisabled,
+        onChange: pageCheckbox.onChange
+      }), _jsx(VerticalDivider, {})]
+    }), _jsx(Text, {
+      "$variant": "h3",
+      children: lang({
+        message: 'SMART.TABLE.BULK.SELECTED_COUNT',
+        count: selectedCount
+      })
+    }), offPageCount > 0 && _jsx(Text, {
+      "$color": Color.LOCKED,
+      children: lang({
+        message: 'SMART.TABLE.BULK.OFF_PAGE',
+        count: offPageCount
+      })
+    }), selectedCount > 0 && _jsx(Link, {
+      as: "button",
+      onClick: onClearSelection,
+      children: lang({
+        message: 'SMART.TABLE.BULK.CLEAR_SELECTION'
+      })
+    })]
+  });
+}

package/Table/components/BulkSelectionBar/index.d.ts

@@ -0,0 +1 @@
+export { BulkSelectionBar, type BulkSelectionBarProps } from './BulkSelectionBar';

package/Table/components/BulkSelectionBar/index.js

@@ -0,0 +1 @@
+export { BulkSelectionBar } from './BulkSelectionBar';

package/Table/components/DataTable/DataTable.js

@@ -6,9 +6,11 @@ import { WarningRoundIcon } from '@pushwoosh/kit-icons';
 import { Text } from '@pushwoosh/kit-typography';
 import { DataTableContext } from '../../context';
 import { useLang } from '../../polyglot';
+import { getPageSelection } from '../../selection';
 import { LockedText, Table } from '../../styles';
 import { DataTableList } from '../DataTableList';
 import { DataTablePagination } from '../DataTablePagination';
+import { SelectionHead } from '../SelectionRow';
 export function DataTable(props) {
   const {
     columns,
@@ -30,6 +32,20 @@ export function DataTable(props) {
     params
   } = context;
   const isFiltered = data.value?.isFiltered || params.search;
+  const selection = 'renderItem' in props ? props.selection : undefined;
+  const renderHead = () => {
+    if (!('renderHead' in props)) return null;
+    if (!selection) return props.renderHead();
+    const pageRows = data.loading ? [] : data.value?.items ?? [];
+    const page = getPageSelection(pageRows, selection.selectedKeys, selection.getKey, selection.isSelectable);
+    return _jsx(SelectionHead, {
+      isChecked: page.isChecked,
+      isIndeterminate: page.isIndeterminate,
+      isDisabled: page.isDisabled,
+      onChange: isChecked => selection.onToggle(page.selectable, isChecked),
+      children: props.renderHead()
+    });
+  };
   const onClearRequestDefault = () => {
     const keys = ['perPage', 'order', 'direction'];
     context.onChangeParams(keys.reduce((acc, key) => ({
@@ -47,8 +63,9 @@ export function DataTable(props) {
       width: width,
       isBordered: isBordered,
       "$bgColor": bgColor,
-      children: [renderTableTop?.(context), 'renderHead' in props && props.renderHead(), 'renderList' in props ? props.renderList(context) : _jsx(DataTableList, {
-        renderItem: props.renderItem
+      children: [renderTableTop?.(context), renderHead(), 'renderList' in props ? props.renderList(context) : _jsx(DataTableList, {
+        renderItem: props.renderItem,
+        selection: selection
       }), !hidePagination && _jsxs(DataTablePagination, {
         allLimits: allLimits ?? [10, 20, 50, 100],
         padding: paginationPadding,

package/Table/components/DataTable/types.d.ts

@@ -15,6 +15,14 @@ export type DataTableListProps<I, P extends DataTableParams> = {
     renderAfter?: (ctxValue: DataTableContextType<I, P>) => ReactNode;
     onClearRequest?: () => void;
 };
+/** Row selection of {@link DataTable}: the whole row is the checkbox, its content goes inert. */
+export type DataTableSelection<I> = {
+    selectedKeys: ReadonlySet<string>;
+    getKey: (row: I) => string;
+    onToggle: (rows: I[], isChecked: boolean) => void;
+    /** Omitted: every row is selectable, as in flows that check eligibility on the chosen batch. */
+    isSelectable?: (row: I) => boolean;
+};
 export type DataTableItemProps<I, P extends DataTableParams> = {
     columns: string;
     width?: string | number;
@@ -30,5 +38,7 @@ export type DataTableItemProps<I, P extends DataTableParams> = {
     renderItem: (item: I) => ReactNode;
     renderAfter?: (ctxValue: DataTableContextType<I, P>) => ReactNode;
     onClearRequest?: () => void;
+    /** Turns on bulk selection: a checkbox gutter is prepended to the head and to every row. */
+    selection?: DataTableSelection<I>;
 };
 export type DataTableProps<I, P extends DataTableParams> = DataTableListProps<I, P> | DataTableItemProps<I, P>;

package/Table/components/DataTableList/DataTableList.d.ts

@@ -1,2 +1,2 @@
 import type { DataTableListProps } from './types';
-export declare function DataTableList<T>({ renderItem }: DataTableListProps<T>): import("react").JSX.Element;
+export declare function DataTableList<T>({ renderItem, selection }: DataTableListProps<T>): import("react").JSX.Element;

package/Table/components/DataTableList/DataTableList.js

@@ -9,8 +9,10 @@ import { DataTableContext } from '../../context';
 import { useLang } from '../../polyglot';
 import { LockedText } from '../../styles';
 import { Loading } from '../Loading';
+import { SelectableRow } from '../SelectionRow';
 export function DataTableList({
-  renderItem
+  renderItem,
+  selection
 }) {
   const {
     data,
@@ -18,7 +20,28 @@ export function DataTableList({
   } = useContext(DataTableContext);
   const lang = useLang();
   if (data.loading) {
-    return _jsx(Loading, {});
+    return selection ? _jsx(Loading, {
+      hasGutter: true
+    }) : _jsx(Loading, {});
+  }
+  if (data.value?.items?.length && selection) {
+    const {
+      selectedKeys,
+      getKey,
+      onToggle,
+      isSelectable
+    } = selection;
+    return _jsx(_Fragment, {
+      children: data.value.items.map(item => {
+        const key = getKey(item);
+        return _jsx(SelectableRow, {
+          isSelected: selectedKeys.has(key),
+          isSelectable: isSelectable?.(item) ?? true,
+          onToggle: isChecked => onToggle([item], isChecked),
+          children: renderItem(item)
+        }, key);
+      })
+    });
   }
   if (data.value?.items?.length) {
     return _jsx(_Fragment, {

package/Table/components/DataTableList/types.d.ts

@@ -1,4 +1,6 @@
 import type { ReactNode } from 'react';
+import type { DataTableSelection } from '../DataTable/types';
 export type DataTableListProps<T> = {
     renderItem: (item: T) => ReactNode;
+    selection?: DataTableSelection<T>;
 };

package/Table/components/Loading/Loading.d.ts

@@ -1 +1,4 @@
-export declare const Loading: () => import("react").JSX.Element;
+/** Skeleton rows of a loading table; `hasGutter` shifts them past the selection checkbox gutter. */
+export declare const Loading: ({ hasGutter }?: {
+    hasGutter?: boolean;
+}) => import("react").JSX.Element;

package/Table/components/Loading/Loading.js

@@ -2,19 +2,26 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { TextSkeleton } from '@pushwoosh/dumb-components';
 import { Horizontal } from '@pushwoosh/kit-helpers';
 import { Wrapper } from './styles';
+import { SELECTION_GUTTER_WIDTH } from '../SelectionRow';
+const ROW_PADDING = 24;
 const Row = ({
-  width
+  width,
+  hasGutter
 }) => _jsx(Horizontal, {
   "$alignItems": "center",
-  "$padding": "0 24px",
+  "$padding": hasGutter ? `0 ${ROW_PADDING}px 0 ${SELECTION_GUTTER_WIDTH + ROW_PADDING}px` : `0 ${ROW_PADDING}px`,
   children: _jsx(TextSkeleton, {
     width: width
   })
 });
-export const Loading = () => _jsx(Wrapper, {
+/** Skeleton rows of a loading table; `hasGutter` shifts them past the selection checkbox gutter. */
+export const Loading = ({
+  hasGutter
+} = {}) => _jsx(Wrapper, {
   children: Array.from({
     length: 4
   }).map((_, index) => _jsx(Row, {
-    width: `${index % 2 ? 35 : 50}%`
+    width: `${index % 2 ? 35 : 50}%`,
+    hasGutter: hasGutter
   }, index))
 });

package/Table/components/SelectionRow/SelectionRow.d.ts

@@ -0,0 +1,19 @@
+import { type ReactElement, type ReactNode } from 'react';
+type SelectableRowProps = {
+    isSelected: boolean;
+    isSelectable: boolean;
+    onToggle: (isChecked: boolean) => void;
+    children: ReactNode;
+};
+/** A table row that is itself the checkbox: click, Space or Enter toggle it, its content is inert. */
+export declare function SelectableRow({ isSelected, isSelectable, onToggle, children, }: SelectableRowProps): ReactElement;
+type SelectionHeadProps = {
+    isChecked: boolean;
+    isIndeterminate: boolean;
+    isDisabled: boolean;
+    onChange: (isChecked: boolean) => void;
+    children: ReactNode;
+};
+/** The table head in selection mode: the gutter holds the "select the page" checkbox. */
+export declare function SelectionHead({ isChecked, isIndeterminate, isDisabled, onChange, children, }: SelectionHeadProps): ReactElement;
+export {};

package/Table/components/SelectionRow/SelectionRow.js

@@ -0,0 +1,76 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+import { Checkbox } from '@pushwoosh/dumb-components';
+import { SelectionContent, SelectionGutter, SelectionRowBox } from './styles';
+/** A table row that is itself the checkbox: click, Space or Enter toggle it, its content is inert. */
+export function SelectableRow({
+  isSelected,
+  isSelectable,
+  onToggle,
+  children
+}) {
+  const contentId = useId();
+  const toggle = () => {
+    if (isSelectable) {
+      onToggle(!isSelected);
+    }
+  };
+  const onClickCapture = event => {
+    event.preventDefault();
+    event.stopPropagation();
+    toggle();
+  };
+  const onKeyDown = event => {
+    if (event.target === event.currentTarget && (event.key === ' ' || event.key === 'Enter')) {
+      event.preventDefault();
+      toggle();
+    }
+  };
+  return _jsxs(SelectionRowBox, {
+    role: "checkbox",
+    "aria-checked": isSelected,
+    "aria-disabled": isSelectable ? undefined : true,
+    "aria-labelledby": contentId,
+    tabIndex: isSelectable ? 0 : -1,
+    "$isSelected": isSelected,
+    "$isSelectable": isSelectable,
+    "$isInteractive": true,
+    onClickCapture: onClickCapture,
+    onKeyDown: onKeyDown,
+    children: [_jsx(SelectionGutter, {
+      "aria-hidden": true,
+      inert: true,
+      "$isInert": true,
+      children: _jsx(Checkbox, {
+        isChecked: isSelected,
+        isDisabled: !isSelectable
+      })
+    }), _jsx(SelectionContent, {
+      id: contentId,
+      inert: true,
+      "$isInert": true,
+      children: children
+    })]
+  });
+}
+/** The table head in selection mode: the gutter holds the "select the page" checkbox. */
+export function SelectionHead({
+  isChecked,
+  isIndeterminate,
+  isDisabled,
+  onChange,
+  children
+}) {
+  return _jsxs(SelectionRowBox, {
+    children: [_jsx(SelectionGutter, {
+      children: _jsx(Checkbox, {
+        isChecked: isChecked,
+        isIndeterminate: isIndeterminate,
+        isDisabled: isDisabled,
+        onChange: onChange
+      })
+    }), _jsx(SelectionContent, {
+      children: children
+    })]
+  });
+}

package/Table/components/SelectionRow/index.d.ts

@@ -0,0 +1,2 @@
+export { SelectableRow, SelectionHead } from './SelectionRow';
+export { SELECTION_GUTTER_WIDTH, SELECTION_ROW_PADDING } from './styles';

package/Table/components/SelectionRow/index.js

@@ -0,0 +1,2 @@
+export { SelectableRow, SelectionHead } from './SelectionRow';
+export { SELECTION_GUTTER_WIDTH, SELECTION_ROW_PADDING } from './styles';

package/Table/components/SelectionRow/styles.d.ts

@@ -0,0 +1,19 @@
+export declare const SELECTION_GUTTER_WIDTH = 42;
+export declare const SELECTION_ROW_PADDING = 12;
+export declare const SelectionRowBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}, {
+    $isSelected?: boolean;
+    $isSelectable?: boolean;
+    $isInteractive?: boolean;
+}>> & string;
+export declare const SelectionGutter: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}, {
+    $isInert?: boolean;
+}>> & string;
+export declare const SelectionContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}, {
+    $isInert?: boolean;
+}>> & string;

package/Table/components/SelectionRow/styles.js

@@ -0,0 +1,35 @@
+import styled from 'styled-components';
+import { Color } from '@pushwoosh/kit-constants';
+export const SELECTION_GUTTER_WIDTH = 42;
+export const SELECTION_ROW_PADDING = 12;
+export const SelectionRowBox = styled.div.withConfig({
+  displayName: "SelectionRowBox",
+  componentId: "sc-1yh7kn7-0"
+})(["display:grid;grid-template-columns:", "px minmax(0,1fr);padding-left:", "px;background-color:", ";", " ", " &:hover{", "}&:focus-visible{outline:2px solid ", ";outline-offset:-2px;}"], SELECTION_GUTTER_WIDTH, SELECTION_ROW_PADDING, ({
+  $isSelected
+}) => $isSelected ? Color.BRIGHT_LIGHT : 'transparent', ({
+  $isInteractive,
+  $isSelectable
+}) => $isInteractive ? `cursor: ${$isSelectable ? 'pointer' : 'default'};` : '', ({
+  $isInteractive,
+  $isSelectable
+}) => $isInteractive && !$isSelectable ? 'opacity: 0.5;' : '', ({
+  $isInteractive,
+  $isSelectable,
+  $isSelected
+}) => {
+  if (!$isInteractive || !$isSelectable) return '';
+  return `background-color: ${$isSelected ? Color.BRIGHT_LIGHT_HOVER : Color.ROW_HOVER};`;
+}, Color.PRIMARY);
+export const SelectionGutter = styled.div.withConfig({
+  displayName: "SelectionGutter",
+  componentId: "sc-1yh7kn7-1"
+})(["display:flex;align-items:center;padding-left:", "px;", ""], SELECTION_ROW_PADDING, ({
+  $isInert
+}) => $isInert ? 'pointer-events: none;' : '');
+export const SelectionContent = styled.div.withConfig({
+  displayName: "SelectionContent",
+  componentId: "sc-1yh7kn7-2"
+})(["min-width:0;", " && > *{padding-left:0;}"], ({
+  $isInert
+}) => $isInert ? 'pointer-events: none; user-select: none;' : '');

package/Table/hooks/index.d.ts

@@ -1,3 +1,4 @@
 export { useDataTableContext } from './useDataTableContext';
 export { useDataTableContextSync } from './useDataTableContextSync';
 export { useDataTableGetParams } from './useDataTableGetParams';
+export { useBulkSelection, type BulkSelection, type BulkSelectionPageCheckbox } from './useBulkSelection';

package/Table/hooks/index.js

@@ -1,3 +1,4 @@
 export { useDataTableContext } from './useDataTableContext';
 export { useDataTableContextSync } from './useDataTableContextSync';
-export { useDataTableGetParams } from './useDataTableGetParams';
+export { useDataTableGetParams } from './useDataTableGetParams';
+export { useBulkSelection } from './useBulkSelection';

package/Table/hooks/useBulkSelection.d.ts

@@ -0,0 +1,22 @@
+/** Props of the "select the page" checkbox of `BulkSelectionBar`. */
+export type BulkSelectionPageCheckbox = {
+    isChecked: boolean;
+    isIndeterminate: boolean;
+    isDisabled?: boolean;
+    onChange: (isChecked: boolean) => void;
+};
+/** What {@link useBulkSelection} returns. */
+export type BulkSelection<T, M extends string> = {
+    mode: M | null;
+    isSelecting: boolean;
+    selected: T[];
+    selectedKeys: ReadonlySet<string>;
+    start: (mode: M) => void;
+    cancel: () => void;
+    clear: () => void;
+    toggle: (rows: T[], isChecked: boolean) => void;
+    offPageCount: (pageRows: readonly T[]) => number;
+    pageCheckbox: (pageRows: readonly T[], isSelectable?: (row: T) => boolean) => BulkSelectionPageCheckbox;
+};
+/** Bulk mode and the rows picked in it, kept across pages; `getKey` should be stable. */
+export declare function useBulkSelection<T, M extends string = string>(getKey: (row: T) => string): BulkSelection<T, M>;

package/Table/hooks/useBulkSelection.js

@@ -0,0 +1,46 @@
+import { useCallback, useMemo, useState } from 'react';
+import { getPageSelection } from '../selection';
+/** Bulk mode and the rows picked in it, kept across pages; `getKey` should be stable. */
+export function useBulkSelection(getKey) {
+  const [mode, setMode] = useState(null);
+  const [selected, setSelected] = useState([]);
+  const selectedKeys = useMemo(() => new Set(selected.map(getKey)), [selected, getKey]);
+  const start = useCallback(nextMode => {
+    setSelected([]);
+    setMode(nextMode);
+  }, []);
+  const cancel = useCallback(() => {
+    setSelected([]);
+    setMode(null);
+  }, []);
+  const clear = useCallback(() => setSelected([]), []);
+  const toggle = useCallback((rows, isChecked) => {
+    const toggledKeys = new Set(rows.map(getKey));
+    setSelected(prev => {
+      const rest = prev.filter(row => !toggledKeys.has(getKey(row)));
+      return isChecked ? [...rest, ...rows] : rest;
+    });
+  }, [getKey]);
+  const offPageCount = useCallback(pageRows => selected.length - pageRows.filter(row => selectedKeys.has(getKey(row))).length, [selected, selectedKeys, getKey]);
+  const pageCheckbox = useCallback((pageRows, isSelectable) => {
+    const page = getPageSelection(pageRows, selectedKeys, getKey, isSelectable);
+    return {
+      isChecked: page.isChecked,
+      isIndeterminate: page.isIndeterminate,
+      isDisabled: page.isDisabled,
+      onChange: isChecked => toggle(page.selectable, isChecked)
+    };
+  }, [selectedKeys, getKey, toggle]);
+  return {
+    mode,
+    isSelecting: mode !== null,
+    selected,
+    selectedKeys,
+    start,
+    cancel,
+    clear,
+    toggle,
+    offPageCount,
+    pageCheckbox
+  };
+}

package/Table/index.d.ts

@@ -1,11 +1,13 @@
 export { DataTable } from './components/DataTable';
+export { BulkSelectionBar, type BulkSelectionBarProps } from './components/BulkSelectionBar';
 export { DataTableGetContext } from './components/DataTableGetContext';
 export { DataTablePagination } from './components/DataTablePagination';
 export { DataTableSearchInput } from './components/DataTableSearchInput';
 export { DataTableSortableCell } from './components/DataTableSortableCell';
 export { Loading } from './components/Loading';
 export { TablePagination } from './components/TablePagination';
-export { useDataTableContext, useDataTableGetParams } from './hooks';
+export { useDataTableContext, useDataTableGetParams, useBulkSelection, type BulkSelection, type BulkSelectionPageCheckbox, } from './hooks';
 export { Table, Td, Tr, Th, ElementHover, ItemName, LockedText, Description, } from './styles';
 export { ItemDetailLink } from './components/ItemDetailLink';
 export type { DataTableParams, DataTableData, DataTableContextType } from './types';
+export type { DataTableSelection } from './components/DataTable/types';

package/Table/index.js

@@ -1,10 +1,11 @@
 export { DataTable } from './components/DataTable';
+export { BulkSelectionBar } from './components/BulkSelectionBar';
 export { DataTableGetContext } from './components/DataTableGetContext';
 export { DataTablePagination } from './components/DataTablePagination';
 export { DataTableSearchInput } from './components/DataTableSearchInput';
 export { DataTableSortableCell } from './components/DataTableSortableCell';
 export { Loading } from './components/Loading';
 export { TablePagination } from './components/TablePagination';
-export { useDataTableContext, useDataTableGetParams } from './hooks';
+export { useDataTableContext, useDataTableGetParams, useBulkSelection } from './hooks';
 export { Table, Td, Tr, Th, ElementHover, ItemName, LockedText, Description } from './styles';
 export { ItemDetailLink } from './components/ItemDetailLink';

package/Table/polyglot/messages_ar.js

@@ -14,5 +14,9 @@ export const messages = {
   'SMART.TABLE.EMPTY_IMG_ALT': 'صندوق فارغ',
   'SMART.TABLE.EMPTY_TITLE': 'هذه القائمة فارغة',
   'SMART.TABLE.EMPTY_DESCRIPTION': 'يبدو أنه لا يوجد شيء هنا بعد. حان وقت الإنشاء — لنمنح هذه القائمة الحياة!',
-  'SMART.TABLE.SHOW_ON_PAGE': 'عرض في الصفحة:'
+  'SMART.TABLE.SHOW_ON_PAGE': 'عرض في الصفحة:',
+  'SMART.TABLE.BULK.SELECT_PAGE': 'تحديد الكل في هذه الصفحة',
+  'SMART.TABLE.BULK.SELECTED_COUNT': 'تم تحديد {{count}}',
+  'SMART.TABLE.BULK.OFF_PAGE': 'منها {{count}} ليست في هذه الصفحة',
+  'SMART.TABLE.BULK.CLEAR_SELECTION': 'مسح التحديد'
 };

package/Table/polyglot/messages_bn.js

@@ -14,5 +14,9 @@ export const messages = {
   'SMART.TABLE.EMPTY_IMG_ALT': 'খালি বাক্স',
   'SMART.TABLE.EMPTY_TITLE': 'এই তালিকাটি খালি',
   'SMART.TABLE.EMPTY_DESCRIPTION': 'মনে হচ্ছে এখানে এখনও কিছু নেই। কিছু তৈরি করে এই তালিকাটিকে প্রাণবন্ত করে তুলুন!',
-  'SMART.TABLE.SHOW_ON_PAGE': 'প্রতি পেজে দেখান:'
+  'SMART.TABLE.SHOW_ON_PAGE': 'প্রতি পেজে দেখান:',
+  'SMART.TABLE.BULK.SELECT_PAGE': 'এই পৃষ্ঠার সব নির্বাচন করুন',
+  'SMART.TABLE.BULK.SELECTED_COUNT': '{{count}}টি নির্বাচিত',
+  'SMART.TABLE.BULK.OFF_PAGE': 'এর মধ্যে {{count}}টি এই পৃষ্ঠায় নেই',
+  'SMART.TABLE.BULK.CLEAR_SELECTION': 'নির্বাচন মুছুন'
 };

package/Table/polyglot/messages_de.js

@@ -14,5 +14,9 @@ export const messages = {
   'SMART.TABLE.EMPTY_IMG_ALT': 'Leere Schachtel',
   'SMART.TABLE.EMPTY_TITLE': 'Diese Liste ist leer',
   'SMART.TABLE.EMPTY_DESCRIPTION': 'Hier ist noch nichts. Zeit, etwas zu erstellen und diese Liste mit Leben zu füllen!',
-  'SMART.TABLE.SHOW_ON_PAGE': 'Pro Seite anzeigen:'
+  'SMART.TABLE.SHOW_ON_PAGE': 'Pro Seite anzeigen:',
+  'SMART.TABLE.BULK.SELECT_PAGE': 'Alle auf dieser Seite auswählen',
+  'SMART.TABLE.BULK.SELECTED_COUNT': '{{count}} ausgewählt',
+  'SMART.TABLE.BULK.OFF_PAGE': 'davon {{count}} nicht auf dieser Seite',
+  'SMART.TABLE.BULK.CLEAR_SELECTION': 'Auswahl aufheben'
 };

package/Table/polyglot/messages_en.js

@@ -14,5 +14,9 @@ export const messages = {
   'SMART.TABLE.EMPTY_IMG_ALT': 'Empty box',
   'SMART.TABLE.EMPTY_TITLE': 'This list is empty',
   'SMART.TABLE.EMPTY_DESCRIPTION': 'Looks like there’s nothing here yet. Time to create — let’s bring this list to life!',
-  'SMART.TABLE.SHOW_ON_PAGE': 'Show on page:'
+  'SMART.TABLE.SHOW_ON_PAGE': 'Show on page:',
+  'SMART.TABLE.BULK.SELECT_PAGE': 'Select all on this page',
+  'SMART.TABLE.BULK.SELECTED_COUNT': '{{count}} selected',
+  'SMART.TABLE.BULK.OFF_PAGE': 'incl. {{count}} not on this page',
+  'SMART.TABLE.BULK.CLEAR_SELECTION': 'Clear selection'
 };

package/Table/polyglot/messages_es.js

@@ -14,5 +14,9 @@ export const messages = {
   'SMART.TABLE.EMPTY_IMG_ALT': 'Caja vacía',
   'SMART.TABLE.EMPTY_TITLE': 'Esta lista está vacía',
   'SMART.TABLE.EMPTY_DESCRIPTION': 'Parece que aún no hay nada aquí. ¡Es hora de crear algo y dar vida a esta lista!',
-  'SMART.TABLE.SHOW_ON_PAGE': 'Mostrar por página:'
+  'SMART.TABLE.SHOW_ON_PAGE': 'Mostrar por página:',
+  'SMART.TABLE.BULK.SELECT_PAGE': 'Seleccionar todo en esta página',
+  'SMART.TABLE.BULK.SELECTED_COUNT': '{{count}} {{count | pluralize: "seleccionado", "seleccionados"}}',
+  'SMART.TABLE.BULK.OFF_PAGE': 'incl. {{count}} fuera de esta página',
+  'SMART.TABLE.BULK.CLEAR_SELECTION': 'Borrar selección'
 };

package/Table/polyglot/messages_fr.js

@@ -14,5 +14,9 @@ export const messages = {
   'SMART.TABLE.EMPTY_IMG_ALT': 'Boîte vide',
   'SMART.TABLE.EMPTY_TITLE': 'Cette liste est vide',
   'SMART.TABLE.EMPTY_DESCRIPTION': 'Il n’y a encore rien ici. C’est le moment de créer quelque chose et de donner vie à cette liste !',
-  'SMART.TABLE.SHOW_ON_PAGE': 'Afficher par page :'
+  'SMART.TABLE.SHOW_ON_PAGE': 'Afficher par page :',
+  'SMART.TABLE.BULK.SELECT_PAGE': 'Tout sélectionner sur cette page',
+  'SMART.TABLE.BULK.SELECTED_COUNT': '{{count}} {{count | pluralize: "sélectionné", "sélectionnés"}}',
+  'SMART.TABLE.BULK.OFF_PAGE': 'dont {{count}} hors de cette page',
+  'SMART.TABLE.BULK.CLEAR_SELECTION': 'Effacer la sélection'
 };

package/Table/polyglot/messages_he.js

@@ -14,5 +14,9 @@ export const messages = {
   'SMART.TABLE.EMPTY_IMG_ALT': 'קופסה ריקה',
   'SMART.TABLE.EMPTY_TITLE': 'הרשימה ריקה',
   'SMART.TABLE.EMPTY_DESCRIPTION': 'נראה שאין כאן עדיין כלום. זה הזמן ליצור משהו ולהפיח חיים ברשימה!',
-  'SMART.TABLE.SHOW_ON_PAGE': 'הצגה בעמוד:'
+  'SMART.TABLE.SHOW_ON_PAGE': 'הצגה בעמוד:',
+  'SMART.TABLE.BULK.SELECT_PAGE': 'בחירת הכול בעמוד זה',
+  'SMART.TABLE.BULK.SELECTED_COUNT': '{{count}} נבחרו',
+  'SMART.TABLE.BULK.OFF_PAGE': 'כולל {{count}} שאינם בעמוד זה',
+  'SMART.TABLE.BULK.CLEAR_SELECTION': 'ניקוי הבחירה'
 };

package/Table/polyglot/messages_hi.js

@@ -14,5 +14,9 @@ export const messages = {
   'SMART.TABLE.EMPTY_IMG_ALT': 'खाली बॉक्स',
   'SMART.TABLE.EMPTY_TITLE': 'यह सूची खाली है',
   'SMART.TABLE.EMPTY_DESCRIPTION': 'लगता है यहाँ अभी कुछ नहीं है। कुछ बनाइए और इस सूची में जान डाल दीजिए!',
-  'SMART.TABLE.SHOW_ON_PAGE': 'प्रति पेज दिखाएँ:'
+  'SMART.TABLE.SHOW_ON_PAGE': 'प्रति पेज दिखाएँ:',
+  'SMART.TABLE.BULK.SELECT_PAGE': 'इस पेज पर सभी चुनें',
+  'SMART.TABLE.BULK.SELECTED_COUNT': '{{count}} चयनित',
+  'SMART.TABLE.BULK.OFF_PAGE': 'इनमें से {{count}} इस पेज पर नहीं',
+  'SMART.TABLE.BULK.CLEAR_SELECTION': 'चयन साफ़ करें'
 };

package/Table/polyglot/messages_ja.js

@@ -14,5 +14,9 @@ export const messages = {
   'SMART.TABLE.EMPTY_IMG_ALT': '空の箱',
   'SMART.TABLE.EMPTY_TITLE': 'このリストは空です',
   'SMART.TABLE.EMPTY_DESCRIPTION': 'まだ何もありません。さっそく作成して、このリストを充実させましょう！',
-  'SMART.TABLE.SHOW_ON_PAGE': 'ページあたりの表示件数:'
+  'SMART.TABLE.SHOW_ON_PAGE': 'ページあたりの表示件数:',
+  'SMART.TABLE.BULK.SELECT_PAGE': 'このページをすべて選択',
+  'SMART.TABLE.BULK.SELECTED_COUNT': '{{count}} 件選択中',
+  'SMART.TABLE.BULK.OFF_PAGE': 'うち {{count}} 件はこのページ外',
+  'SMART.TABLE.BULK.CLEAR_SELECTION': '選択を解除'
 };

package/Table/polyglot/messages_ko.js

@@ -14,5 +14,9 @@ export const messages = {
   'SMART.TABLE.EMPTY_IMG_ALT': '빈 상자',
   'SMART.TABLE.EMPTY_TITLE': '목록이 비어 있습니다',
   'SMART.TABLE.EMPTY_DESCRIPTION': '아직 아무것도 없습니다. 지금 만들어서 이 목록을 채워 보세요!',
-  'SMART.TABLE.SHOW_ON_PAGE': '페이지당 표시:'
+  'SMART.TABLE.SHOW_ON_PAGE': '페이지당 표시:',
+  'SMART.TABLE.BULK.SELECT_PAGE': '이 페이지 전체 선택',
+  'SMART.TABLE.BULK.SELECTED_COUNT': '{{count}}개 선택됨',
+  'SMART.TABLE.BULK.OFF_PAGE': '이 페이지에 없는 {{count}}개 포함',
+  'SMART.TABLE.BULK.CLEAR_SELECTION': '선택 해제'
 };

package/Table/polyglot/messages_pt.js

@@ -14,5 +14,9 @@ export const messages = {
   'SMART.TABLE.EMPTY_IMG_ALT': 'Caixa vazia',
   'SMART.TABLE.EMPTY_TITLE': 'Esta lista está vazia',
   'SMART.TABLE.EMPTY_DESCRIPTION': 'Parece que ainda não há nada aqui. Hora de criar algo e dar vida a esta lista!',
-  'SMART.TABLE.SHOW_ON_PAGE': 'Mostrar por página:'
+  'SMART.TABLE.SHOW_ON_PAGE': 'Mostrar por página:',
+  'SMART.TABLE.BULK.SELECT_PAGE': 'Selecionar tudo nesta página',
+  'SMART.TABLE.BULK.SELECTED_COUNT': '{{count}} {{count | pluralize: "selecionado", "selecionados"}}',
+  'SMART.TABLE.BULK.OFF_PAGE': 'incl. {{count}} fora desta página',
+  'SMART.TABLE.BULK.CLEAR_SELECTION': 'Limpar seleção'
 };

package/Table/polyglot/messages_ru.js

@@ -14,5 +14,9 @@ export const messages = {
   'SMART.TABLE.EMPTY_IMG_ALT': 'Пустой список',
   'SMART.TABLE.EMPTY_TITLE': 'Список пуст',
   'SMART.TABLE.EMPTY_DESCRIPTION': 'Похоже, здесь пока ничего нет. Самое время создать что-нибудь и оживить этот список!',
-  'SMART.TABLE.SHOW_ON_PAGE': 'Показывать на странице:'
+  'SMART.TABLE.SHOW_ON_PAGE': 'Показывать на странице:',
+  'SMART.TABLE.BULK.SELECT_PAGE': 'Выбрать все на этой странице',
+  'SMART.TABLE.BULK.SELECTED_COUNT': 'Выбрано: {{count}}',
+  'SMART.TABLE.BULK.OFF_PAGE': 'в т. ч. {{count}} не на этой странице',
+  'SMART.TABLE.BULK.CLEAR_SELECTION': 'Сбросить выбор'
 };

package/Table/polyglot/messages_th.js

@@ -14,5 +14,9 @@ export const messages = {
   'SMART.TABLE.EMPTY_IMG_ALT': 'กล่องเปล่า',
   'SMART.TABLE.EMPTY_TITLE': 'รายการนี้ว่างเปล่า',
   'SMART.TABLE.EMPTY_DESCRIPTION': 'ดูเหมือนว่ายังไม่มีอะไรที่นี่ ถึงเวลาสร้างสรรค์แล้ว มาเติมชีวิตให้รายการนี้กันเถอะ!',
-  'SMART.TABLE.SHOW_ON_PAGE': 'แสดงต่อหน้า:'
+  'SMART.TABLE.SHOW_ON_PAGE': 'แสดงต่อหน้า:',
+  'SMART.TABLE.BULK.SELECT_PAGE': 'เลือกทั้งหมดในหน้านี้',
+  'SMART.TABLE.BULK.SELECTED_COUNT': 'เลือกแล้ว {{count}} รายการ',
+  'SMART.TABLE.BULK.OFF_PAGE': 'รวม {{count}} รายการที่ไม่อยู่ในหน้านี้',
+  'SMART.TABLE.BULK.CLEAR_SELECTION': 'ล้างการเลือก'
 };

package/Table/polyglot/messages_zh.js

@@ -14,5 +14,9 @@ export const messages = {
   'SMART.TABLE.EMPTY_IMG_ALT': '空盒子',
   'SMART.TABLE.EMPTY_TITLE': '此列表为空',
   'SMART.TABLE.EMPTY_DESCRIPTION': '这里似乎还什么都没有。现在就开始创建，让这个列表丰富起来吧！',
-  'SMART.TABLE.SHOW_ON_PAGE': '每页显示：'
+  'SMART.TABLE.SHOW_ON_PAGE': '每页显示：',
+  'SMART.TABLE.BULK.SELECT_PAGE': '选择本页全部',
+  'SMART.TABLE.BULK.SELECTED_COUNT': '已选择 {{count}} 项',
+  'SMART.TABLE.BULK.OFF_PAGE': '含 {{count}} 项不在本页',
+  'SMART.TABLE.BULK.CLEAR_SELECTION': '清除选择'
 };

package/Table/polyglot/types.d.ts

@@ -18,4 +18,12 @@ export type TableMessages = {
     'SMART.TABLE.EMPTY_TITLE': NoParams;
     'SMART.TABLE.EMPTY_DESCRIPTION': NoParams;
     'SMART.TABLE.SHOW_ON_PAGE': NoParams;
+    'SMART.TABLE.BULK.SELECT_PAGE': NoParams;
+    'SMART.TABLE.BULK.SELECTED_COUNT': {
+        count: number;
+    };
+    'SMART.TABLE.BULK.OFF_PAGE': {
+        count: number;
+    };
+    'SMART.TABLE.BULK.CLEAR_SELECTION': NoParams;
 };

package/Table/selection.d.ts

@@ -0,0 +1,9 @@
+/** State of a "select the whole page" checkbox over the rows that can be selected. */
+export type PageSelection<T> = {
+    selectable: T[];
+    isChecked: boolean;
+    isIndeterminate: boolean;
+    isDisabled: boolean;
+};
+/** Checked, indeterminate or disabled "select page" state; rows failing `isSelectable` are left out. */
+export declare function getPageSelection<T>(rows: readonly T[], selectedKeys: ReadonlySet<string>, getKey: (row: T) => string, isSelectable?: (row: T) => boolean): PageSelection<T>;

package/Table/selection.js

@@ -0,0 +1,11 @@
+/** Checked, indeterminate or disabled "select page" state; rows failing `isSelectable` are left out. */
+export function getPageSelection(rows, selectedKeys, getKey, isSelectable) {
+  const selectable = isSelectable ? rows.filter(isSelectable) : [...rows];
+  const selectedCount = selectable.filter(row => selectedKeys.has(getKey(row))).length;
+  return {
+    selectable,
+    isChecked: selectable.length > 0 && selectedCount === selectable.length,
+    isIndeterminate: selectedCount > 0 && selectedCount < selectable.length,
+    isDisabled: !selectable.length
+  };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pushwoosh/smart-components-kit",
-  "version": "2.1.4",
+  "version": "2.2.0",
   "description": "Stateful, data-connected React components shared by Pushwoosh micro-frontends",
   "repository": {
     "type": "git",
@@ -17,7 +17,7 @@
   },
   "dependencies": {
     "@floating-ui/react-dom": "^2.1.2",
-    "@pushwoosh/dumb-components": "^4.6.0",
+    "@pushwoosh/dumb-components": "^4.7.0",
     "@pushwoosh/kit-constants": "^3.0.0",
     "@pushwoosh/kit-helpers": "^4.16.0",
     "@pushwoosh/kit-icons": "^2.3.15",
@@ -30,11 +30,14 @@
     "@pushwoosh/frontend-builder-engine": "^4.0.0",
     "@pushwoosh/spa-context": "^3.3.1",
     "@svgr/webpack": "^8.1.0",
+    "@testing-library/dom": "^10.4.2",
+    "@testing-library/react": "^16.3.0",
     "@types/node": "^24.19.1",
     "@types/react": "^19.3.0",
     "@types/react-dom": "^19.3.0",
     "@types/react-router-dom": "^5.3.3",
     "@types/webpack-env": "^1.18.8",
+    "jsdom": "^26.1.0",
     "react": "^19.3.0",
     "react-dom": "^19.3.0",
     "react-router-dom": "^5.3.4",