@cube-dev/ui-kit 0.156.0 → 0.157.0

package/dist/components/data/ItemTable/ItemTableBulkBar.js

@@ -0,0 +1,131 @@
+/** @license MIT | @cube-dev/ui-kit v0.157.0 | Cube Dev Team */
+import { useEvent } from "../../../_internal/hooks/use-event.js";
+import { _Text } from "../../content/Text.js";
+import { TooltipProvider } from "../../overlays/Tooltip/TooltipProvider.js";
+import { useI18n } from "../../../i18n/useI18n.js";
+import { CloseIcon } from "../../../icons/CloseIcon.js";
+import { Button } from "../../actions/index.js";
+import { useItemTableChrome } from "./ItemTableToolbar.js";
+import { tasty } from "@tenphi/tasty";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/data/ItemTable/ItemTableBulkBar.tsx
+const BarElement = tasty({
+	qa: "ItemTableBulkBar",
+	as: "div",
+	styles: {
+		display: "flex",
+		flow: "row",
+		gap: "1x",
+		placeItems: "center",
+		boxSizing: "border-box",
+		position: {
+			"": "static",
+			floating: "absolute"
+		},
+		inset: {
+			"": "auto",
+			floating: "auto auto 2x 50%"
+		},
+		translate: {
+			"": false,
+			floating: "-50% 0"
+		},
+		zIndex: {
+			"": "auto",
+			floating: 10
+		},
+		fill: {
+			"": "#clear",
+			floating: "#surface"
+		},
+		color: "#surface-text",
+		border: {
+			"": false,
+			floating: true
+		},
+		radius: {
+			"": 0,
+			floating: "1cr"
+		},
+		shadow: {
+			"": false,
+			floating: "0 1x 3x #shadow"
+		},
+		padding: {
+			"": 0,
+			floating: "1x 1.5x"
+		},
+		width: {
+			"": "auto",
+			floating: "max (100% - 4x)"
+		}
+	}
+});
+/**
+* The action bar shown while rows are selected.
+*
+* Reads the selection from context rather than props, so a consumer rebuilding
+* the toolbar can drop `<ItemTable.BulkBar>` wherever it likes and still have
+* one owner of the selection.
+*/
+function ItemTableBulkBar(props) {
+	const { actions, placement = "floating", styles } = props;
+	const { t } = useI18n();
+	const { selectedRows, selectedCount, clearSelection } = useItemTableChrome("ItemTable.BulkBar");
+	const [loadingKeys, setLoadingKeys] = useState({});
+	const run = useEvent(async (action) => {
+		const setLoading = (value) => setLoadingKeys((current) => ({
+			...current,
+			[action.key]: value
+		}));
+		try {
+			await action.onAction(selectedRows, { setLoading });
+			if (action.deselectAfter !== false) clearSelection();
+		} finally {
+			setLoading(false);
+		}
+	});
+	if (selectedCount === 0) return null;
+	return /* @__PURE__ */ jsxs(BarElement, {
+		role: "toolbar",
+		"aria-label": t("itemTable.bulkActions", "Bulk actions"),
+		styles,
+		mods: { floating: placement === "floating" },
+		children: [
+			/* @__PURE__ */ jsx(_Text, {
+				nowrap: true,
+				children: t("itemTable.selectedCount", "{{count}} selected", { count: selectedCount })
+			}),
+			actions.map((action) => {
+				const isDisabled = action.isDisabled?.(selectedRows) ?? false;
+				const button = /* @__PURE__ */ jsx(Button, {
+					size: "small",
+					type: action.type ?? "outline",
+					theme: action.theme,
+					icon: action.icon,
+					isDisabled,
+					isLoading: loadingKeys[action.key],
+					onPress: () => run(action),
+					children: action.label
+				}, action.key);
+				return isDisabled && action.disabledTooltip ? /* @__PURE__ */ jsx(TooltipProvider, {
+					title: action.disabledTooltip,
+					children: button
+				}, action.key) : button;
+			}),
+			/* @__PURE__ */ jsx(Button, {
+				size: "small",
+				type: "clear",
+				icon: /* @__PURE__ */ jsx(CloseIcon, {}),
+				"aria-label": t("itemTable.clearSelection", "Clear selection"),
+				onPress: clearSelection
+			})
+		]
+	});
+}
+
+//#endregion
+export { ItemTableBulkBar };
+//# sourceMappingURL=ItemTableBulkBar.js.map

package/dist/components/data/ItemTable/ItemTableBulkBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ItemTableBulkBar.js","names":["Text"],"sources":["../../../../src/components/data/ItemTable/ItemTableBulkBar.tsx"],"sourcesContent":["import { tasty } from '@tenphi/tasty';\nimport { useState } from 'react';\n\nimport { useEvent } from '../../../_internal/hooks';\nimport { useI18n } from '../../../i18n';\nimport { CloseIcon } from '../../../icons';\nimport { Button } from '../../actions';\nimport { Text } from '../../content/Text';\nimport { TooltipProvider } from '../../overlays/Tooltip/TooltipProvider';\n\nimport { useItemTableChrome } from './ItemTableToolbar';\n\nimport type { Styles } from '@tenphi/tasty';\nimport type { CubeTableBulkAction } from './types';\n\nconst BarElement = tasty({\n  qa: 'ItemTableBulkBar',\n  as: 'div',\n  styles: {\n    display: 'flex',\n    flow: 'row',\n    gap: '1x',\n    placeItems: 'center',\n    boxSizing: 'border-box',\n\n    /**\n     * `floating` lifts the bar out of the grid and centres it over the body, so\n     * it never changes the table's height — a bar that pushed the rows down\n     * would move the very row the user is about to click.\n     */\n    position: { '': 'static', floating: 'absolute' },\n    inset: { '': 'auto', floating: 'auto auto 2x 50%' },\n    translate: { '': false, floating: '-50% 0' },\n    zIndex: { '': 'auto', floating: 10 },\n    // A raised surface rather than an inverted \"toast\": `#dark` flips to a light\n    // colour under the dark theme, which would put white text on a light bar.\n    fill: { '': '#clear', floating: '#surface' },\n    color: '#surface-text',\n    border: { '': false, floating: true },\n    radius: { '': 0, floating: '1cr' },\n    shadow: { '': false, floating: '0 1x 3x #shadow' },\n    padding: { '': 0, floating: '1x 1.5x' },\n    width: { '': 'auto', floating: 'max (100% - 4x)' },\n  },\n});\n\nexport interface ItemTableBulkBarProps<T = any> {\n  actions: CubeTableBulkAction<T>[];\n  /** @default 'floating' */\n  placement?: 'floating' | 'toolbar';\n  styles?: Styles;\n}\n\n/**\n * The action bar shown while rows are selected.\n *\n * Reads the selection from context rather than props, so a consumer rebuilding\n * the toolbar can drop `<ItemTable.BulkBar>` wherever it likes and still have\n * one owner of the selection.\n */\nexport function ItemTableBulkBar<T = any>(props: ItemTableBulkBarProps<T>) {\n  const { actions, placement = 'floating', styles } = props;\n  const { t } = useI18n();\n  const chrome = useItemTableChrome('ItemTable.BulkBar');\n  const { selectedRows, selectedCount, clearSelection } = chrome;\n\n  // Per-action, so one slow request cannot disable the others.\n  const [loadingKeys, setLoadingKeys] = useState<Record<string, boolean>>({});\n\n  const run = useEvent(async (action: CubeTableBulkAction<T>) => {\n    const setLoading = (value: boolean) =>\n      setLoadingKeys((current) => ({ ...current, [action.key]: value }));\n\n    try {\n      await action.onAction(selectedRows as T[], { setLoading });\n\n      // Deselecting is the default because the rows an action just deleted or\n      // moved are usually gone; an action that only reads keeps the selection\n      // by opting out.\n      if (action.deselectAfter !== false) clearSelection();\n    } finally {\n      setLoading(false);\n    }\n  });\n\n  if (selectedCount === 0) return null;\n\n  return (\n    <BarElement\n      role=\"toolbar\"\n      aria-label={t('itemTable.bulkActions', 'Bulk actions')}\n      styles={styles}\n      mods={{ floating: placement === 'floating' }}\n    >\n      <Text nowrap>\n        {t('itemTable.selectedCount', '{{count}} selected', {\n          count: selectedCount,\n        })}\n      </Text>\n\n      {actions.map((action) => {\n        const isDisabled = action.isDisabled?.(selectedRows as T[]) ?? false;\n        const button = (\n          <Button\n            key={action.key}\n            size=\"small\"\n            type={action.type ?? 'outline'}\n            theme={action.theme}\n            icon={action.icon}\n            isDisabled={isDisabled}\n            isLoading={loadingKeys[action.key]}\n            onPress={() => run(action)}\n          >\n            {action.label}\n          </Button>\n        );\n\n        return isDisabled && action.disabledTooltip ? (\n          <TooltipProvider key={action.key} title={action.disabledTooltip}>\n            {button}\n          </TooltipProvider>\n        ) : (\n          button\n        );\n      })}\n\n      <Button\n        size=\"small\"\n        type=\"clear\"\n        icon={<CloseIcon />}\n        aria-label={t('itemTable.clearSelection', 'Clear selection')}\n        onPress={clearSelection}\n      />\n    </BarElement>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;AAeA,MAAM,aAAa,MAAM;CACvB,IAAI;CACJ,IAAI;CACJ,QAAQ;EACN,SAAS;EACT,MAAM;EACN,KAAK;EACL,YAAY;EACZ,WAAW;EAOX,UAAU;GAAE,IAAI;GAAU,UAAU;GAAY;EAChD,OAAO;GAAE,IAAI;GAAQ,UAAU;GAAoB;EACnD,WAAW;GAAE,IAAI;GAAO,UAAU;GAAU;EAC5C,QAAQ;GAAE,IAAI;GAAQ,UAAU;GAAI;EAGpC,MAAM;GAAE,IAAI;GAAU,UAAU;GAAY;EAC5C,OAAO;EACP,QAAQ;GAAE,IAAI;GAAO,UAAU;GAAM;EACrC,QAAQ;GAAE,IAAI;GAAG,UAAU;GAAO;EAClC,QAAQ;GAAE,IAAI;GAAO,UAAU;GAAmB;EAClD,SAAS;GAAE,IAAI;GAAG,UAAU;GAAW;EACvC,OAAO;GAAE,IAAI;GAAQ,UAAU;GAAmB;EACnD;CACF,CAAC;;;;;;;;AAgBF,SAAgB,iBAA0B,OAAiC;CACzE,MAAM,EAAE,SAAS,YAAY,YAAY,WAAW;CACpD,MAAM,EAAE,MAAM,SAAS;CAEvB,MAAM,EAAE,cAAc,eAAe,mBADtB,mBAAmB,oBAAoB;CAItD,MAAM,CAAC,aAAa,kBAAkB,SAAkC,EAAE,CAAC;CAE3E,MAAM,MAAM,SAAS,OAAO,WAAmC;EAC7D,MAAM,cAAc,UAClB,gBAAgB,aAAa;GAAE,GAAG;IAAU,OAAO,MAAM;GAAO,EAAE;AAEpE,MAAI;AACF,SAAM,OAAO,SAAS,cAAqB,EAAE,YAAY,CAAC;AAK1D,OAAI,OAAO,kBAAkB,MAAO,iBAAgB;YAC5C;AACR,cAAW,MAAM;;GAEnB;AAEF,KAAI,kBAAkB,EAAG,QAAO;AAEhC,QACE,qBAAC;EACC,MAAK;EACL,cAAY,EAAE,yBAAyB,eAAe;EAC9C;EACR,MAAM,EAAE,UAAU,cAAc,YAAY;;GAE5C,oBAACA;IAAK;cACH,EAAE,2BAA2B,sBAAsB,EAClD,OAAO,eACR,CAAC;KACG;GAEN,QAAQ,KAAK,WAAW;IACvB,MAAM,aAAa,OAAO,aAAa,aAAoB,IAAI;IAC/D,MAAM,SACJ,oBAAC;KAEC,MAAK;KACL,MAAM,OAAO,QAAQ;KACrB,OAAO,OAAO;KACd,MAAM,OAAO;KACD;KACZ,WAAW,YAAY,OAAO;KAC9B,eAAe,IAAI,OAAO;eAEzB,OAAO;OATH,OAAO,IAUL;AAGX,WAAO,cAAc,OAAO,kBAC1B,oBAAC;KAAiC,OAAO,OAAO;eAC7C;OADmB,OAAO,IAEX,GAElB;KAEF;GAEF,oBAAC;IACC,MAAK;IACL,MAAK;IACL,MAAM,oBAAC,cAAY;IACnB,cAAY,EAAE,4BAA4B,kBAAkB;IAC5D,SAAS;KACT;;GACS"}

package/dist/components/data/ItemTable/ItemTableDragPreview.js

@@ -0,0 +1,46 @@
+/** @license MIT | @cube-dev/ui-kit v0.157.0 | Cube Dev Team */
+import { _Text } from "../../content/Text.js";
+import { useI18n } from "../../../i18n/useI18n.js";
+import { tasty } from "@tenphi/tasty";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/data/ItemTable/ItemTableDragPreview.tsx
+const PreviewElement = tasty({
+	qa: "ItemTableDragPreview",
+	as: "div",
+	styles: {
+		display: "flex",
+		flow: "row",
+		gap: "1x",
+		placeItems: "center",
+		padding: ".5x 1x",
+		radius: "1cr",
+		fill: "#surface",
+		color: "#surface-text",
+		border: true,
+		shadow: "0 1x 3x #shadow",
+		preset: "t3",
+		width: "max 40x",
+		whiteSpace: "nowrap",
+		overflow: "hidden",
+		textOverflow: "ellipsis"
+	}
+});
+/**
+* What the cursor drags.
+*
+* One row shows its icon and label. Several show a count — a single chip cannot
+* honestly represent five different rows, and Cloud settled on the same answer.
+*/
+function ItemTableDragPreview(props) {
+	const { rows, getItemDragInfo } = props;
+	const { t } = useI18n();
+	if (!rows.length) return null;
+	if (rows.length > 1) return /* @__PURE__ */ jsx(PreviewElement, { children: /* @__PURE__ */ jsx(_Text, { children: t("itemTable.dragCount", "{{count}} items", { count: rows.length }) }) });
+	const info = getItemDragInfo(rows[0]);
+	return /* @__PURE__ */ jsxs(PreviewElement, { children: [info.icon, /* @__PURE__ */ jsx(_Text, { children: info.label })] });
+}
+
+//#endregion
+export { ItemTableDragPreview };
+//# sourceMappingURL=ItemTableDragPreview.js.map

package/dist/components/data/ItemTable/ItemTableDragPreview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ItemTableDragPreview.js","names":["Text"],"sources":["../../../../src/components/data/ItemTable/ItemTableDragPreview.tsx"],"sourcesContent":["import { tasty } from '@tenphi/tasty';\n\nimport { useI18n } from '../../../i18n';\nimport { Text } from '../../content/Text';\n\nimport type { ReactNode } from 'react';\n\nconst PreviewElement = tasty({\n  qa: 'ItemTableDragPreview',\n  as: 'div',\n  styles: {\n    display: 'flex',\n    flow: 'row',\n    gap: '1x',\n    placeItems: 'center',\n    padding: '.5x 1x',\n    radius: '1cr',\n    fill: '#surface',\n    color: '#surface-text',\n    border: true,\n    shadow: '0 1x 3x #shadow',\n    preset: 't3',\n    // A chip, not a copy of the row: the default browser preview is a snapshot\n    // of the source element, which for a full-width table row is a page-wide\n    // slab that hides whatever it is being dragged over.\n    width: 'max 40x',\n    whiteSpace: 'nowrap',\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n  },\n});\n\nexport interface ItemTableDragPreviewProps<T = any> {\n  rows: T[];\n  getItemDragInfo: (row: T) => { label: ReactNode; icon?: ReactNode };\n}\n\n/**\n * What the cursor drags.\n *\n * One row shows its icon and label. Several show a count — a single chip cannot\n * honestly represent five different rows, and Cloud settled on the same answer.\n */\nexport function ItemTableDragPreview<T>(props: ItemTableDragPreviewProps<T>) {\n  const { rows, getItemDragInfo } = props;\n  const { t } = useI18n();\n\n  if (!rows.length) return null;\n\n  if (rows.length > 1) {\n    return (\n      <PreviewElement>\n        <Text>\n          {t('itemTable.dragCount', '{{count}} items', { count: rows.length })}\n        </Text>\n      </PreviewElement>\n    );\n  }\n\n  const info = getItemDragInfo(rows[0]);\n\n  return (\n    <PreviewElement>\n      {info.icon}\n      <Text>{info.label}</Text>\n    </PreviewElement>\n  );\n}\n"],"mappings":";;;;;;;AAOA,MAAM,iBAAiB,MAAM;CAC3B,IAAI;CACJ,IAAI;CACJ,QAAQ;EACN,SAAS;EACT,MAAM;EACN,KAAK;EACL,YAAY;EACZ,SAAS;EACT,QAAQ;EACR,MAAM;EACN,OAAO;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EAIR,OAAO;EACP,YAAY;EACZ,UAAU;EACV,cAAc;EACf;CACF,CAAC;;;;;;;AAaF,SAAgB,qBAAwB,OAAqC;CAC3E,MAAM,EAAE,MAAM,oBAAoB;CAClC,MAAM,EAAE,MAAM,SAAS;AAEvB,KAAI,CAAC,KAAK,OAAQ,QAAO;AAEzB,KAAI,KAAK,SAAS,EAChB,QACE,oBAAC,4BACC,oBAACA,mBACE,EAAE,uBAAuB,mBAAmB,EAAE,OAAO,KAAK,QAAQ,CAAC,GAC/D,GACQ;CAIrB,MAAM,OAAO,gBAAgB,KAAK,GAAG;AAErC,QACE,qBAAC,6BACE,KAAK,MACN,oBAACA,mBAAM,KAAK,QAAa,IACV"}

package/dist/components/data/ItemTable/ItemTableFooter.js

@@ -0,0 +1,79 @@
+/** @license MIT | @cube-dev/ui-kit v0.157.0 | Cube Dev Team */
+import { _Pagination } from "../../navigation/Pagination/Pagination.js";
+import { tasty } from "@tenphi/tasty";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/data/ItemTable/ItemTableFooter.tsx
+const FooterElement = tasty({
+	qa: "ItemTableFooter",
+	as: "div",
+	styles: {
+		gridRow: 3,
+		preset: "t4",
+		display: "flex",
+		flow: "row",
+		gap: "1x",
+		placeItems: "center",
+		padding: "1x",
+		border: "1bw #border top",
+		Start: {
+			$: ">",
+			display: "flex",
+			flow: "row",
+			gap: "1x",
+			placeItems: "center",
+			width: "min 0"
+		},
+		Center: {
+			$: ">",
+			display: "flex",
+			flow: "row",
+			gap: "1x",
+			placeItems: "center",
+			placeContent: "center",
+			flexGrow: 1
+		},
+		End: {
+			$: ">",
+			display: "flex",
+			flow: "row",
+			gap: "1x",
+			placeItems: "center",
+			placeContent: "end"
+		}
+	}
+});
+function ItemTableFooter({ start, center, end, pagination, styles }) {
+	return /* @__PURE__ */ jsxs(FooterElement, {
+		styles,
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				"data-element": "Start",
+				children: start
+			}),
+			/* @__PURE__ */ jsx("div", {
+				"data-element": "Center",
+				children: center
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				"data-element": "End",
+				children: [end, pagination ? /* @__PURE__ */ jsx(_Pagination, {
+					size: "xsmall",
+					page: pagination.page,
+					pageSize: pagination.pageSize,
+					total: pagination.total,
+					totalPages: pagination.totalPages,
+					pageSizeOptions: pagination.pageSizeOptions,
+					summary: pagination.summary,
+					hasNextPage: pagination.hasNextPage,
+					onPageChange: pagination.onPageChange,
+					onPageSizeChange: pagination.onPageSizeChange
+				}) : null]
+			})
+		]
+	});
+}
+
+//#endregion
+export { ItemTableFooter };
+//# sourceMappingURL=ItemTableFooter.js.map

package/dist/components/data/ItemTable/ItemTableFooter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ItemTableFooter.js","names":["Pagination"],"sources":["../../../../src/components/data/ItemTable/ItemTableFooter.tsx"],"sourcesContent":["import { tasty } from '@tenphi/tasty';\n\nimport { Pagination } from '../../navigation/Pagination';\n\nimport type { Styles } from '@tenphi/tasty';\nimport type { ReactNode } from 'react';\nimport type { CubeTablePageInfo } from '../../navigation/Pagination';\n\nconst FooterElement = tasty({\n  qa: 'ItemTableFooter',\n  as: 'div',\n  styles: {\n    gridRow: 3,\n    // The footer is chrome around the data, so its text sits a step below the\n    // body's. Slot content inherits this, which is what keeps a consumer's own\n    // label matched to the pagination summary beside it.\n    preset: 't4',\n    display: 'flex',\n    flow: 'row',\n    gap: '1x',\n    placeItems: 'center',\n    padding: '1x',\n    border: '1bw #border top',\n\n    /**\n     * Three named slots. This is what replaces the `MutationObserver` that Cloud\n     * uses to inject a \"Load all results\" button into ag-grid's paging panel —\n     * ag-grid Community has no status bar, so there was nowhere to put it.\n     */\n    Start: {\n      $: '>',\n      display: 'flex',\n      flow: 'row',\n      gap: '1x',\n      placeItems: 'center',\n      width: 'min 0',\n    },\n    Center: {\n      $: '>',\n      display: 'flex',\n      flow: 'row',\n      gap: '1x',\n      placeItems: 'center',\n      placeContent: 'center',\n      // `flexGrow`, not a width: this is a flex item, and only grow makes it\n      // take the leftover space so its content actually lands in the middle.\n      flexGrow: 1,\n    },\n    End: {\n      $: '>',\n      display: 'flex',\n      flow: 'row',\n      gap: '1x',\n      placeItems: 'center',\n      placeContent: 'end',\n    },\n  },\n});\n\nexport interface ItemTableFooterProps {\n  start?: ReactNode;\n  center?: ReactNode;\n  end?: ReactNode;\n  /** Rendered in the end slot unless `end` overrides it. */\n  pagination?: {\n    page: number;\n    pageSize: number;\n    total: number;\n    totalPages?: number;\n    pageSizeOptions?: number[];\n    summary?: boolean | ((info: CubeTablePageInfo) => ReactNode);\n    hasNextPage?: boolean;\n    onPageChange: (page: number) => void;\n    onPageSizeChange?: (pageSize: number) => void;\n  };\n  styles?: Styles;\n}\n\nexport function ItemTableFooter({\n  start,\n  center,\n  end,\n  pagination,\n  styles,\n}: ItemTableFooterProps) {\n  return (\n    <FooterElement styles={styles}>\n      <div data-element=\"Start\">{start}</div>\n      <div data-element=\"Center\">{center}</div>\n      <div data-element=\"End\">\n        {end}\n        {pagination ? (\n          <Pagination\n            // The footer is chrome around the data, not part of it — its\n            // controls sit a step below the toolbar's.\n            size=\"xsmall\"\n            page={pagination.page}\n            pageSize={pagination.pageSize}\n            total={pagination.total}\n            totalPages={pagination.totalPages}\n            pageSizeOptions={pagination.pageSizeOptions}\n            summary={pagination.summary}\n            hasNextPage={pagination.hasNextPage}\n            onPageChange={pagination.onPageChange}\n            onPageSizeChange={pagination.onPageSizeChange}\n          />\n        ) : null}\n      </div>\n    </FooterElement>\n  );\n}\n"],"mappings":";;;;;;AAQA,MAAM,gBAAgB,MAAM;CAC1B,IAAI;CACJ,IAAI;CACJ,QAAQ;EACN,SAAS;EAIT,QAAQ;EACR,SAAS;EACT,MAAM;EACN,KAAK;EACL,YAAY;EACZ,SAAS;EACT,QAAQ;EAOR,OAAO;GACL,GAAG;GACH,SAAS;GACT,MAAM;GACN,KAAK;GACL,YAAY;GACZ,OAAO;GACR;EACD,QAAQ;GACN,GAAG;GACH,SAAS;GACT,MAAM;GACN,KAAK;GACL,YAAY;GACZ,cAAc;GAGd,UAAU;GACX;EACD,KAAK;GACH,GAAG;GACH,SAAS;GACT,MAAM;GACN,KAAK;GACL,YAAY;GACZ,cAAc;GACf;EACF;CACF,CAAC;AAqBF,SAAgB,gBAAgB,EAC9B,OACA,QACA,KACA,YACA,UACuB;AACvB,QACE,qBAAC;EAAsB;;GACrB,oBAAC;IAAI,gBAAa;cAAS;KAAY;GACvC,oBAAC;IAAI,gBAAa;cAAU;KAAa;GACzC,qBAAC;IAAI,gBAAa;eACf,KACA,aACC,oBAACA;KAGC,MAAK;KACL,MAAM,WAAW;KACjB,UAAU,WAAW;KACrB,OAAO,WAAW;KAClB,YAAY,WAAW;KACvB,iBAAiB,WAAW;KAC5B,SAAS,WAAW;KACpB,aAAa,WAAW;KACxB,cAAc,WAAW;KACzB,kBAAkB,WAAW;MAC7B,GACA;KACA;;GACQ"}

package/dist/components/data/ItemTable/ItemTableToolbar.d.ts

@@ -0,0 +1,34 @@
+
+import { Styles } from "@tenphi/tasty";
+import { ReactNode } from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { Key as Key$1 } from "@react-types/shared";
+
+//#region src/components/data/ItemTable/ItemTableToolbar.d.ts
+/** The table's search input, bound to the table's own state. */
+declare function ItemTableSearch(props: {
+  placeholder?: string;
+  styles?: Styles;
+  qa?: string;
+}): react_jsx_runtime0.JSX.Element;
+interface ItemTableToolbarProps {
+  isSearchable?: boolean;
+  filters?: ReactNode;
+  actions?: ReactNode;
+  onRefresh?: () => void;
+  isLoading?: boolean;
+  styles?: Styles;
+  searchStyles?: Styles;
+}
+declare function ItemTableToolbar({
+  isSearchable,
+  filters,
+  actions,
+  onRefresh,
+  isLoading,
+  styles,
+  searchStyles
+}: ItemTableToolbarProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { ItemTableSearch, ItemTableToolbar };
+//# sourceMappingURL=ItemTableToolbar.d.ts.map

package/dist/components/data/ItemTable/ItemTableToolbar.js

@@ -0,0 +1,91 @@
+/** @license MIT | @cube-dev/ui-kit v0.157.0 | Cube Dev Team */
+import { useI18n } from "../../../i18n/useI18n.js";
+import { ReloadIcon } from "../../../icons/ReloadIcon.js";
+import { Button } from "../../actions/index.js";
+import { SearchInput } from "../../fields/SearchInput/SearchInput.js";
+import { tasty } from "@tenphi/tasty";
+import { createContext, useContext } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/data/ItemTable/ItemTableToolbar.tsx
+const ChromeContext = createContext(null);
+const ItemTableChromeProvider = ChromeContext.Provider;
+function useItemTableChrome(component) {
+	const context = useContext(ChromeContext);
+	if (!context) throw new Error(`${component} must be rendered inside an ItemTable — it reads the table's search state from context.`);
+	return context;
+}
+const ToolbarElement = tasty({
+	qa: "ItemTableToolbar",
+	as: "div",
+	styles: {
+		gridRow: 1,
+		display: "flex",
+		flow: "row",
+		gap: "1x",
+		placeItems: "center",
+		placeContent: "space-between",
+		padding: "1x",
+		border: "1bw #border bottom",
+		Start: {
+			$: ">",
+			display: "flex",
+			flow: "row",
+			gap: "1x",
+			placeItems: "center",
+			width: "min 0"
+		},
+		End: {
+			$: ">",
+			display: "flex",
+			flow: "row",
+			gap: "1x",
+			placeItems: "center"
+		}
+	}
+});
+const SearchElement = tasty(SearchInput, {
+	qa: "ItemTableSearchInput",
+	styles: { width: "max 300px" }
+});
+/** The table's search input, bound to the table's own state. */
+function ItemTableSearch(props) {
+	const { searchValue, setSearchValue, searchPlaceholder } = useItemTableChrome("ItemTable.Search");
+	const { t } = useI18n();
+	return /* @__PURE__ */ jsx(SearchElement, {
+		qa: props.qa,
+		size: "small",
+		isClearable: true,
+		"aria-label": t("itemTable.search", "Search"),
+		placeholder: props.placeholder ?? searchPlaceholder ?? t("itemTable.searchPlaceholder", "Search..."),
+		value: searchValue,
+		styles: props.styles,
+		onChange: setSearchValue
+	});
+}
+function ItemTableToolbar({ isSearchable, filters, actions, onRefresh, isLoading, styles, searchStyles }) {
+	const { t } = useI18n();
+	return /* @__PURE__ */ jsxs(ToolbarElement, {
+		styles,
+		role: "toolbar",
+		children: [/* @__PURE__ */ jsxs("div", {
+			"data-element": "Start",
+			children: [isSearchable ? /* @__PURE__ */ jsx(ItemTableSearch, { styles: searchStyles }) : null, filters]
+		}), /* @__PURE__ */ jsxs("div", {
+			"data-element": "End",
+			children: [actions, onRefresh ? /* @__PURE__ */ jsx(Button, {
+				qa: "ItemTableRefreshButton",
+				type: "outline",
+				size: "small",
+				icon: /* @__PURE__ */ jsx(ReloadIcon, {}),
+				isLoading,
+				"aria-label": t("itemTable.refresh", "Refresh"),
+				onPress: onRefresh
+			}) : null]
+		})]
+	});
+}
+
+//#endregion
+export { ItemTableChromeProvider, ItemTableSearch, ItemTableToolbar, useItemTableChrome };
+//# sourceMappingURL=ItemTableToolbar.js.map

package/dist/components/data/ItemTable/ItemTableToolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ItemTableToolbar.js","names":[],"sources":["../../../../src/components/data/ItemTable/ItemTableToolbar.tsx"],"sourcesContent":["import { tasty } from '@tenphi/tasty';\nimport { createContext, useContext } from 'react';\n\nimport { useI18n } from '../../../i18n';\nimport { ReloadIcon } from '../../../icons';\nimport { Button } from '../../actions';\nimport { SearchInput } from '../../fields/SearchInput';\n\nimport type { Key } from '@react-types/shared';\nimport type { Styles } from '@tenphi/tasty';\nimport type { ReactNode } from 'react';\n\n/**\n * Lets `ItemTable.Search` (and future chrome pieces) read the table's state\n * without prop drilling, so a consumer can rebuild the toolbar from parts and\n * still have exactly one owner of the search term.\n */\nexport interface CubeItemTableChromeState<T = any> {\n  searchValue: string;\n  setSearchValue: (value: string) => void;\n  searchPlaceholder?: string;\n  isLoading: boolean;\n  onRefresh?: () => void;\n  /** `'all'` is the sentinel, so `selectedCount` is what the UI should show. */\n  selectedKeys: Key[] | 'all';\n  selectedRows: T[];\n  selectedCount: number;\n  clearSelection: () => void;\n}\n\nconst ChromeContext = createContext<CubeItemTableChromeState | null>(null);\n\nexport const ItemTableChromeProvider = ChromeContext.Provider;\n\nexport function useItemTableChrome(component: string) {\n  const context = useContext(ChromeContext);\n\n  if (!context) {\n    throw new Error(\n      `${component} must be rendered inside an ItemTable — it reads the table's search state from context.`,\n    );\n  }\n\n  return context;\n}\n\nconst ToolbarElement = tasty({\n  qa: 'ItemTableToolbar',\n  as: 'div',\n  styles: {\n    gridRow: 1,\n    display: 'flex',\n    flow: 'row',\n    gap: '1x',\n    placeItems: 'center',\n    placeContent: 'space-between',\n    padding: '1x',\n    border: '1bw #border bottom',\n\n    // Left group: search, then filters.\n    Start: {\n      $: '>',\n      display: 'flex',\n      flow: 'row',\n      gap: '1x',\n      placeItems: 'center',\n      width: 'min 0',\n    },\n    // Right group: arbitrary consumer actions, then refresh.\n    End: {\n      $: '>',\n      display: 'flex',\n      flow: 'row',\n      gap: '1x',\n      placeItems: 'center',\n    },\n  },\n});\n\nconst SearchElement = tasty(SearchInput, {\n  qa: 'ItemTableSearchInput',\n  styles: { width: 'max 300px' },\n});\n\n/** The table's search input, bound to the table's own state. */\nexport function ItemTableSearch(props: {\n  placeholder?: string;\n  styles?: Styles;\n  qa?: string;\n}) {\n  const { searchValue, setSearchValue, searchPlaceholder } =\n    useItemTableChrome('ItemTable.Search');\n  const { t } = useI18n();\n\n  return (\n    <SearchElement\n      qa={props.qa}\n      size=\"small\"\n      isClearable\n      aria-label={t('itemTable.search', 'Search')}\n      placeholder={\n        props.placeholder ??\n        searchPlaceholder ??\n        t('itemTable.searchPlaceholder', 'Search...')\n      }\n      value={searchValue}\n      styles={props.styles}\n      onChange={setSearchValue}\n    />\n  );\n}\n\nexport interface ItemTableToolbarProps {\n  isSearchable?: boolean;\n  filters?: ReactNode;\n  actions?: ReactNode;\n  onRefresh?: () => void;\n  isLoading?: boolean;\n  styles?: Styles;\n  searchStyles?: Styles;\n}\n\nexport function ItemTableToolbar({\n  isSearchable,\n  filters,\n  actions,\n  onRefresh,\n  isLoading,\n  styles,\n  searchStyles,\n}: ItemTableToolbarProps) {\n  const { t } = useI18n();\n\n  return (\n    <ToolbarElement styles={styles} role=\"toolbar\">\n      <div data-element=\"Start\">\n        {isSearchable ? <ItemTableSearch styles={searchStyles} /> : null}\n        {filters}\n      </div>\n      <div data-element=\"End\">\n        {actions}\n        {onRefresh ? (\n          <Button\n            qa=\"ItemTableRefreshButton\"\n            type=\"outline\"\n            size=\"small\"\n            icon={<ReloadIcon />}\n            isLoading={isLoading}\n            aria-label={t('itemTable.refresh', 'Refresh')}\n            onPress={onRefresh}\n          />\n        ) : null}\n      </div>\n    </ToolbarElement>\n  );\n}\n"],"mappings":";;;;;;;;;;AA8BA,MAAM,gBAAgB,cAA+C,KAAK;AAE1E,MAAa,0BAA0B,cAAc;AAErD,SAAgB,mBAAmB,WAAmB;CACpD,MAAM,UAAU,WAAW,cAAc;AAEzC,KAAI,CAAC,QACH,OAAM,IAAI,MACR,GAAG,UAAU,yFACd;AAGH,QAAO;;AAGT,MAAM,iBAAiB,MAAM;CAC3B,IAAI;CACJ,IAAI;CACJ,QAAQ;EACN,SAAS;EACT,SAAS;EACT,MAAM;EACN,KAAK;EACL,YAAY;EACZ,cAAc;EACd,SAAS;EACT,QAAQ;EAGR,OAAO;GACL,GAAG;GACH,SAAS;GACT,MAAM;GACN,KAAK;GACL,YAAY;GACZ,OAAO;GACR;EAED,KAAK;GACH,GAAG;GACH,SAAS;GACT,MAAM;GACN,KAAK;GACL,YAAY;GACb;EACF;CACF,CAAC;AAEF,MAAM,gBAAgB,MAAM,aAAa;CACvC,IAAI;CACJ,QAAQ,EAAE,OAAO,aAAa;CAC/B,CAAC;;AAGF,SAAgB,gBAAgB,OAI7B;CACD,MAAM,EAAE,aAAa,gBAAgB,sBACnC,mBAAmB,mBAAmB;CACxC,MAAM,EAAE,MAAM,SAAS;AAEvB,QACE,oBAAC;EACC,IAAI,MAAM;EACV,MAAK;EACL;EACA,cAAY,EAAE,oBAAoB,SAAS;EAC3C,aACE,MAAM,eACN,qBACA,EAAE,+BAA+B,YAAY;EAE/C,OAAO;EACP,QAAQ,MAAM;EACd,UAAU;GACV;;AAcN,SAAgB,iBAAiB,EAC/B,cACA,SACA,SACA,WACA,WACA,QACA,gBACwB;CACxB,MAAM,EAAE,MAAM,SAAS;AAEvB,QACE,qBAAC;EAAuB;EAAQ,MAAK;aACnC,qBAAC;GAAI,gBAAa;cACf,eAAe,oBAAC,mBAAgB,QAAQ,eAAgB,GAAG,MAC3D;IACG,EACN,qBAAC;GAAI,gBAAa;cACf,SACA,YACC,oBAAC;IACC,IAAG;IACH,MAAK;IACL,MAAK;IACL,MAAM,oBAAC,eAAa;IACT;IACX,cAAY,EAAE,qBAAqB,UAAU;IAC7C,SAAS;KACT,GACA;IACA;GACS"}

package/dist/components/data/ItemTable/index.d.ts

@@ -0,0 +1,4 @@
+
+import { CubeItemTableColumn, CubeItemTableProps } from "./types.js";
+import "./ItemTableToolbar.js";
+import { _ItemTable } from "./ItemTable.js";