@olenbetong/appframe-ds 1.7.2 → 1.8.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @olenbetong/appframe-ds
 
+## 1.8.0
+
+### Minor Changes
+
+- eb09c99: Grid toolbar buttons for compact toolbars: `GridToolbarFilterButton` and `GridToolbarRefreshButton` take `iconOnly`, and `GridToolbarMoreOptionsButton` takes `showColumns` (the column panel as a menu item) and extra items as `children`. The more menu now closes when an item is chosen.
+
 ## 1.7.2
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@olenbetong/appframe-ds",
-  "version": "1.7.2",
+  "version": "1.8.0",
   "description": "Components that bind Designsystemet components to Appframe data objects",
   "type": "module",
   "types": "./es/index.d.ts",
@@ -64,7 +64,7 @@
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "3.0.0",
     "@base-ui/react": "1.9.0",
     "@olenbetong/appframe-core": "^2.15.2",
-    "@olenbetong/appframe-data": "^1.8.4",
+    "@olenbetong/appframe-data": "^1.8.5",
     "@olenbetong/appframe-react": "^2.2.8",
     "clsx": "^2.1.1",
     "dockview-react": "8.6.1",

package/src/grid/Toolbar.tsx

@@ -1,4 +1,4 @@
-import { Button, Dropdown } from "@digdir/designsystemet-react";
+import { Badge, BadgePosition, Button, Dropdown } from "@digdir/designsystemet-react";
 import {
 	type GridApi,
 	type GridExportMenuItemProps,
@@ -20,6 +20,8 @@ import {
 import { type DataObject, exportOptionsFromDataObject } from "@olenbetong/appframe-data";
 import { useDataObject, useLoading, usePermissions } from "@olenbetong/appframe-react";
 
+import { useState } from "react";
+
 import { openDataObjectReportWithProgress } from "../report-downloader/index.js";
 import { useAfGridContext } from "./AfGridContext.js";
 import { addRow } from "./editing.js";
@@ -45,16 +47,30 @@ export function GridToolbarAddIfAllowedButton({ disableInsert }: { disableInsert
 	) : null;
 }
 
-export function GridToolbarRefreshButton() {
+export type GridToolbarIconOnlyProps = {
+	/** Show the icon alone, with the label as its accessible name and tooltip. */
+	iconOnly?: boolean;
+};
+
+export function GridToolbarRefreshButton({ iconOnly }: GridToolbarIconOnlyProps = {}) {
 	let dataObject = useDataObject();
 	let isLoading = useLoading(dataObject);
+	let label = getLocalizedString("Refresh");
 
 	return (
-		<Button variant="tertiary" data-size="sm" loading={isLoading} onClick={() => dataObject.refreshDataSource()}>
+		<Button
+			variant="tertiary"
+			data-size="sm"
+			icon={iconOnly}
+			aria-label={iconOnly ? label : undefined}
+			title={iconOnly ? label : undefined}
+			loading={isLoading}
+			onClick={() => dataObject.refreshDataSource()}
+		>
 			{/* Designsystemet prepends the spinner rather than replacing the children, so
 			    the icon is hidden while loading to keep the button from changing width */}
 			{!isLoading && <ArrowsCirclepathIcon aria-hidden />}
-			{getLocalizedString("Refresh")}
+			{!iconOnly && label}
 		</Button>
 	);
 }
@@ -74,13 +90,26 @@ export function GridToolbarColumnsButton() {
  * Opens the filter builder instead of the grid's own filter panel. The count
  * reflects the conditions in the builder's filter, not the header filters.
  */
-export function GridToolbarFilterButton() {
+export function GridToolbarFilterButton({ iconOnly }: GridToolbarIconOnlyProps = {}) {
 	let { openFilterBuilder, filterCount } = useAfGridContext();
+	let label = getLocalizedString("Filter");
+
+	if (iconOnly) {
+		let name = filterCount > 0 ? `${label} (${filterCount})` : label;
+		return (
+			<BadgePosition placement="top-right" overlap="circle">
+				{filterCount > 0 && <Badge data-color="brand" data-size="sm" count={filterCount} aria-hidden="true" />}
+				<Button variant="tertiary" data-size="sm" icon aria-label={name} title={name} onClick={openFilterBuilder}>
+					<FilterIcon aria-hidden />
+				</Button>
+			</BadgePosition>
+		);
+	}
 
 	return (
 		<Button variant="tertiary" data-size="sm" onClick={openFilterBuilder}>
 			<FilterIcon aria-hidden />
-			{getLocalizedString("Filter")}
+			{label}
 			{filterCount > 0 ? ` (${filterCount})` : ""}
 		</Button>
 	);
@@ -160,16 +189,52 @@ export function AfGridToolbarExcelExportButton({ fileName, title }: { fileName?:
 	);
 }
 
-export function GridToolbarMoreOptionsButton() {
+export type GridToolbarMoreOptionsButtonProps = React.PropsWithChildren<{
+	/** Offer the column panel in the menu, for toolbars without a Columns button. */
+	showColumns?: boolean;
+}>;
+
+/**
+ * The toolbar's "more" menu: exports, density and layout reset. `children` are extra
+ * `Dropdown.Item`s placed first. The menu closes when an item is chosen.
+ */
+export function GridToolbarMoreOptionsButton({ showColumns, children }: GridToolbarMoreOptionsButtonProps = {}) {
 	let apiRef = useGridApiContext();
+	let { openColumnsPanel } = useAfGridContext();
+	let [open, setOpen] = useState(false);
 
 	return (
 		<Dropdown.TriggerContext>
-			<Dropdown.Trigger variant="tertiary" icon data-size="sm" aria-label={getLocalizedString("More options")}>
+			<Dropdown.Trigger
+				variant="tertiary"
+				icon
+				data-size="sm"
+				aria-label={getLocalizedString("More options")}
+				title={getLocalizedString("More options")}
+			>
 				<MenuElipsisVerticalIcon aria-hidden />
 			</Dropdown.Trigger>
-			<Dropdown placement="bottom-end" data-size="sm">
-				<Dropdown.List>
+			<Dropdown
+				open={open}
+				onOpen={() => setOpen(true)}
+				onClose={() => setOpen(false)}
+				placement="bottom-end"
+				data-size="sm"
+			>
+				<Dropdown.List
+					onClick={(event) => {
+						if ((event.target as HTMLElement).closest("button, a")) setOpen(false);
+					}}
+				>
+					{children}
+					{showColumns && (
+						<Dropdown.Item>
+							<Dropdown.Button onClick={openColumnsPanel}>
+								<TableIcon aria-hidden />
+								{getLocalizedString("Columns")}
+							</Dropdown.Button>
+						</Dropdown.Item>
+					)}
 					<Dropdown.Item>
 						<Dropdown.Button onClick={() => apiRef.current.exportDataAsCsv()}>
 							<FileCsvIcon aria-hidden />

package/src/grid/index.tsx

@@ -41,7 +41,9 @@ import {
 	GridToolbarColumnsButton,
 	GridToolbarContainer,
 	GridToolbarFilterButton,
+	type GridToolbarIconOnlyProps,
 	GridToolbarMoreOptionsButton,
+	type GridToolbarMoreOptionsButtonProps,
 	GridToolbarRefreshButton,
 	GridToolbarResetLayoutButton,
 } from "./Toolbar.js";
@@ -109,6 +111,8 @@ export type {
 	AfGridColumn,
 	AfGridExcelExportOptions,
 	AfGridNewItemRowPosition,
+	GridToolbarIconOnlyProps,
+	GridToolbarMoreOptionsButtonProps,
 	AfGridRowAction,
 };
 export type { AfGridGrouping, AfGridGroupingProps } from "./useAfRowGrouping.js";