@cube-dev/ui-kit 0.0.0-canary-e76eb3e → 0.0.0-canary-01fea9d

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

@@ -1,131 +0,0 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-e76eb3e | 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

@@ -1 +0,0 @@
-{"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

@@ -1,46 +0,0 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-e76eb3e | 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

@@ -1 +0,0 @@
-{"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

@@ -1,79 +0,0 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-e76eb3e | 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

@@ -1 +0,0 @@
-{"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

@@ -1,34 +0,0 @@
-
-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

@@ -1,91 +0,0 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-e76eb3e | 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

@@ -1 +0,0 @@
-{"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

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