@olenbetong/appframe-ds 1.1.0 → 1.3.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @olenbetong/appframe-ds
 
+## 1.3.0
+
+### Minor Changes
+
+- 16232b8: The 1.2.0 on npm was published from a checkout that predates its own changelog: it carries neither the cut-off family (`CutOffPicker`, `CutOffProvider`, `useCutOff`, the period helpers), `ResponsiveDialog`, `PageTitle`, `Link`, `GridEditLookup` and the `DataGrid` namespace on the grid entry, nor the `PageContainer` `maxWidth` fix and the server-side grid totals following the filters on paged data objects. This version is the first on npm with all of it.
+
+## 1.2.0
+
+### Minor Changes
+
+- b38f806: Three more `@olenbetong/appframe-mui` equivalents, so apps can drop that package: the cut-off period family (`CutOffPicker`, `CutOffProvider`, `useCutOff`, `cutOffToPlainDate`, `plainDateToCutOff`, `getPeriodLabel`, the range helpers and `PeriodType`), `ResponsiveDialog` (a Designsystemet `Dialog` that fills small screens, decided by CSS), and `PageTitle` (a Designsystemet `Heading`). Also `Link` (a Designsystemet link that navigates with react-router), `GridEditLookup` for `@olenbetong/appframe-ds/grid`, and MUI X re-exported from the grid entry as the `DataGrid` namespace, so a platform app never bundles its own copy. The cut-off utilities use Temporal for ISO weeks; the package now depends on `temporal-polyfill`.
+- cd7fc4f: Add label tag support with optional and required indicators.
+
+### Patch Changes
+
+- cc4bdf4: `PageContainer` honours its `maxWidth` prop again. The prop was accepted and dropped, so every page that asked for `sm`, `md`, `lg` or `xl` rendered full width; it now limits the content to the MUI Container scale (36/48/64/80rem plus the gutters), against the leading edge as before.
+- 91838e7: Server-side grid totals now follow the filters on a dynamically loading data object. `useAfServerAggregation` reloaded only on `onDataLoaded`, which a paged data object never fires, so the totals kept the values from the first load; it now also reloads when a paged load starts over (`onPartialDataLoaded` with `skip` 0). `AfGrid` also passes MUI's default `getAggregationPosition`, the one prop that makes the grid re-aggregate when the aggregation functions change, so the footer shows the totals as they arrive instead of those of the previous load.
+
 ## 1.1.0
 
 ### Minor Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@olenbetong/appframe-ds",
-  "version": "1.1.0",
+  "version": "1.3.0",
   "description": "Components that bind Designsystemet components to Appframe data objects",
   "type": "module",
   "types": "./es/index.d.ts",
@@ -61,7 +61,7 @@
   },
   "dependencies": {
     "@atlaskit/pragmatic-drag-and-drop": "3.1.0",
-    "@atlaskit/pragmatic-drag-and-drop-hitbox": "2.2.0",
+    "@atlaskit/pragmatic-drag-and-drop-hitbox": "2.2.2",
     "@base-ui/react": "1.8.0",
     "clsx": "^2.1.1",
     "dockview-react": "8.3.1",
@@ -70,19 +70,20 @@
     "react": "19.3.0",
     "react-dom": "19.3.0",
     "react-window": "2.3.1",
+    "temporal-polyfill": "1.0.5",
+    "@olenbetong/appframe-react": "2.2.1",
     "@olenbetong/appframe-core": "2.14.0",
-    "@olenbetong/appframe-data": "1.7.2",
-    "@olenbetong/appframe-react": "2.2.1"
+    "@olenbetong/appframe-data": "1.7.2"
   },
   "devDependencies": {
-    "@digdir/designsystemet-react": "1.21.1",
+    "@digdir/designsystemet-react": "1.22.0",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
     "@mui/material": "9.4.0",
     "@mui/x-data-grid-premium": "8.29.3",
     "@mui/x-license": "8.29.3",
     "@navikt/aksel-icons": "8.16.2",
-    "@testing-library/dom": "^10.4.1",
+    "@testing-library/dom": "^10.4.2",
     "@testing-library/jest-dom": "^7.0.1",
     "@testing-library/react": "16.3.3",
     "@testing-library/user-event": "^14.6.7",
@@ -90,7 +91,7 @@
     "@types/react-dom": "19.3.0",
     "happy-dom": "20.14.5",
     "react-error-boundary": "6.1.5",
-    "react-router": "8.3.1",
+    "react-router": "8.4.0",
     "typescript": "7.0.2"
   },
   "scripts": {

package/scripts/copyAssets.mjs

@@ -1,55 +1,27 @@
-import { cpSync, mkdirSync } from "node:fs";
+/*
+ * tsc emits the JavaScript into es/ but not the stylesheets the components import next to
+ * themselves. Copy every .css under src/ to the same path under es/, so a new component's
+ * stylesheet is published without anyone remembering a list.
+ */
+import { cpSync, mkdirSync, readdirSync } from "node:fs";
+import { dirname, join, relative } from "node:path";
 
-const files = [
-	["src/AfLookup/Lookup.css", "es/AfLookup/Lookup.css"],
-	["src/AfLookup/LookupGrid.css", "es/AfLookup/LookupGrid.css"],
-	["src/AfLookup/LookupCombobox.css", "es/AfLookup/LookupCombobox.css"],
-	["src/layout/AppMenu.css", "es/layout/AppMenu.css"],
-	["src/layout/AppMenuDrawer.css", "es/layout/AppMenuDrawer.css"],
-	["src/layout/AppMenuItem.css", "es/layout/AppMenuItem.css"],
-	["src/layout/AppMenuSubheader.css", "es/layout/AppMenuSubheader.css"],
-	["src/layout/AppLayoutDesktop.css", "es/layout/AppLayoutDesktop.css"],
-	["src/layout/AppLayoutMobile.css", "es/layout/AppLayoutMobile.css"],
-	["src/layout/index.css", "es/layout/index.css"],
-	["src/layout/ErrorBoundary.css", "es/layout/ErrorBoundary.css"],
-	["src/layout/PageContainer.css", "es/layout/PageContainer.css"],
-	["src/page/Page.css", "es/page/Page.css"],
-	["src/page/PageBlock.css", "es/page/PageBlock.css"],
-	["src/page/PageHeader.css", "es/page/PageHeader.css"],
-	["src/list/ItemList.css", "es/list/ItemList.css"],
-	["src/input/InputAdornments.css", "es/input/InputAdornments.css"],
-	["src/paper/Paper.css", "es/paper/Paper.css"],
-	["src/progress/LinearProgress.css", "es/progress/LinearProgress.css"],
-	["src/sortable/DropIndicator.css", "es/sortable/DropIndicator.css"],
-	["src/sortable/SortableItemList.css", "es/sortable/SortableItemList.css"],
-	["src/autocomplete/Autocomplete.css", "es/autocomplete/Autocomplete.css"],
-	["src/filter/FilterBuilder.css", "es/filter/FilterBuilder.css"],
-	["src/filter/FieldFilterPanel.css", "es/filter/FieldFilterPanel.css"],
-	["src/filter/FilterEditor.css", "es/filter/FilterEditor.css"],
-	["src/filter/FilterNameDialog.css", "es/filter/FilterNameDialog.css"],
-	["src/filter/FilterShareDialog.css", "es/filter/FilterShareDialog.css"],
-	["src/filter/SavedFilterTree.css", "es/filter/SavedFilterTree.css"],
-	["src/grid/index.css", "es/grid/index.css"],
-	["src/grid/slots/slots.css", "es/grid/slots/slots.css"],
-	["src/mdi/Mdi.css", "es/mdi/Mdi.css"],
-	["src/report-downloader/ReportDownloader.css", "es/report-downloader/ReportDownloader.css"],
-];
-
-mkdirSync("es/layout", { recursive: true });
-mkdirSync("es/input", { recursive: true });
-mkdirSync("es/list", { recursive: true });
-mkdirSync("es/page", { recursive: true });
-mkdirSync("es/paper", { recursive: true });
-mkdirSync("es/progress", { recursive: true });
-mkdirSync("es/sortable", { recursive: true });
-mkdirSync("es/autocomplete", { recursive: true });
-mkdirSync("es/filter", { recursive: true });
-mkdirSync("es/grid", { recursive: true });
-mkdirSync("es/grid/slots", { recursive: true });
-mkdirSync("es/mdi", { recursive: true });
-mkdirSync("es/report-downloader", { recursive: true });
+function* cssFiles(dir) {
+	for (let entry of readdirSync(dir, { withFileTypes: true })) {
+		let path = join(dir, entry.name);
+		if (entry.isDirectory()) {
+			yield* cssFiles(path);
+		} else if (entry.name.endsWith(".css")) {
+			yield path;
+		}
+	}
+}
 
-for (let [src, dest] of files) {
+let count = 0;
+for (let src of cssFiles("src")) {
+	let dest = join("es", relative("src", src));
+	mkdirSync(dirname(dest), { recursive: true });
 	cpSync(src, dest);
-	console.log(`Copied ${src} → ${dest}`);
+	count++;
 }
+console.log(`Copied ${count} stylesheets from src/ to es/`);

package/src/AfLookup/Lookup.css

@@ -6,6 +6,10 @@
 	}
 }
 
+.ObLookup-labelTag {
+	margin-inline-start: var(--ds-size-2, 0.5rem);
+}
+
 .ObLookup-buttons {
 	position: absolute;
 	inset-inline-end: 0;

package/src/AfLookup/Lookup.tsx

@@ -1,6 +1,6 @@
 import "./Lookup.css";
 
-import { Button, Textfield, type TextfieldProps } from "@digdir/designsystemet-react";
+import { Button, Tag, Textfield, type TextfieldProps } from "@digdir/designsystemet-react";
 import { MagnifyingGlassIcon, XMarkIcon } from "@navikt/aksel-icons";
 import { type DistributiveOmit, useLookupState } from "@olenbetong/appframe-react";
 
@@ -11,6 +11,26 @@ import { createPortal } from "react-dom";
 import { LookupCombobox, type LookupComboboxProps } from "./LookupCombobox.js";
 import { getLocalizedString } from "../i18n.js";
 
+export type LabelTag = "optional" | "required";
+
+const LABEL_TAG_COLOR: Record<LabelTag, string> = { optional: "info", required: "warning" };
+const LABEL_TAG_TEXT: Record<LabelTag, string> = { optional: "Optional", required: "Required" };
+
+function labelWithTag(label: string | undefined, labelTag: LabelTag | undefined) {
+	if (!labelTag) {
+		return label;
+	}
+
+	return (
+		<>
+			{label}
+			<Tag className="ObLookup-labelTag" data-color={LABEL_TAG_COLOR[labelTag]} data-size="sm">
+				{getLocalizedString(LABEL_TAG_TEXT[labelTag])}
+			</Tag>
+		</>
+	);
+}
+
 export type AfLookupProps<T extends Record<string, unknown>> = DistributiveOmit<LookupComboboxProps<T>, "value"> & {
 	/**
 	 * Allows the user to enter a value manually that might not be in the list.
@@ -18,6 +38,7 @@ export type AfLookupProps<T extends Record<string, unknown>> = DistributiveOmit<
 	editable?: boolean;
 	fullWidth?: boolean;
 	label?: string;
+	labelTag?: LabelTag;
 	value?: string | null;
 	onChange?: (item: T | null) => void;
 	slotProps?: {
@@ -87,6 +108,7 @@ export function useLookup<T extends Record<string, unknown>>({
 export function AfLookup<T extends Record<string, unknown>>({
 	fullWidth = false,
 	label,
+	labelTag,
 	slotProps,
 	value,
 	...props
@@ -121,7 +143,7 @@ export function AfLookup<T extends Record<string, unknown>>({
 				<Textfield
 					id={inputId}
 					value={value ?? ""}
-					label={label}
+					label={labelWithTag(label, labelTag)}
 					onClick={() => openDialog()}
 					onKeyDown={handleInputKeyDown}
 					className={clsx(slotProps?.textField?.className, "ObLookup-input")}

package/src/cutoff/CutOffPicker.css

@@ -0,0 +1,12 @@
+@layer ds {
+	.ObCutOffPicker-root {
+		display: flex;
+		align-items: center;
+		gap: var(--ds-size-2);
+	}
+
+	.ObCutOffPicker-root > .ds-select,
+	.ObCutOffPicker-root > .ds-field {
+		flex: 0 1 auto;
+	}
+}

package/src/cutoff/CutOffPicker.tsx

@@ -0,0 +1,165 @@
+import "./CutOffPicker.css";
+
+import { Select, Textfield } from "@digdir/designsystemet-react";
+import clsx from "clsx";
+import type { Temporal } from "temporal-polyfill";
+
+import { getLocalizedString } from "../i18n.js";
+import { useCutOff } from "./context.js";
+import { type PeriodType, plainDateToCutOff } from "./utils.js";
+
+export type CutOffPickerProps = {
+	className?: string;
+	disabled?: boolean;
+	/** Period types left out of the type select. */
+	disabledTypes?: PeriodType[];
+	max?: Temporal.PlainDate | string;
+	min?: Temporal.PlainDate | string;
+	/** Designsystemet size of both fields. */
+	"data-size"?: "sm" | "md" | "lg";
+	/**
+	 * Do not sync the `co` and `period` search parameters with the selection - for a form that
+	 * submits the period itself.
+	 */
+	disableSearchParams?: boolean;
+};
+
+function cutOffTypes(): [PeriodType, string][] {
+	return [
+		["AllDates", getLocalizedString("Day")],
+		["WS", getLocalizedString("Week")],
+		["MLD", getLocalizedString("Month")],
+		["MLS", `${getLocalizedString("Month")} (${getLocalizedString("Last sunday")})`],
+		["QLD", getLocalizedString("Quarter")],
+		["QLS", `${getLocalizedString("Quarter")} (${getLocalizedString("Last sunday")})`],
+		["YLD", getLocalizedString("Year")],
+	];
+}
+
+export function getCutOffTypes(disabledTypes: PeriodType[]): [PeriodType, string][] {
+	return cutOffTypes().filter((co) => !disabledTypes.includes(co[0]));
+}
+
+/**
+ * Picks the app's cut-off period: a select for the period type (day, week, month, quarter,
+ * year) and a field for the period itself, native date/week/month inputs where the browser
+ * has them and a select for quarters and years. Reads and writes the period through
+ * {@link useCutOff}, so it needs a `CutOffProvider` above it.
+ */
+export function CutOffPicker({
+	className,
+	max,
+	min,
+	disabled,
+	disabledTypes,
+	"data-size": size,
+	disableSearchParams = false,
+}: CutOffPickerProps) {
+	let { cutOffType, periods, setPeriod, setCutOffType } = useCutOff({ disableSearchParams });
+
+	function handlePeriodChanged(evt: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) {
+		if (evt.target.value) {
+			setPeriod(cutOffType, evt.target.value);
+		}
+	}
+
+	let thisYear = new Date().getFullYear();
+	let quarters = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
+		.flatMap((dy) => [4, 3, 2, 1].map((q) => `${thisYear - dy}-Q${q}`))
+		.filter((period) => {
+			if (max && period > plainDateToCutOff(max, "QLD")) return false;
+			if (min && period < plainDateToCutOff(min, "QLD")) return false;
+			return true;
+		});
+	let years = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
+		.map((dy) => thisYear - dy)
+		.filter((year) => {
+			if (max && year > Number(plainDateToCutOff(max, "YLD"))) return false;
+			if (min && year < Number(plainDateToCutOff(min, "YLD"))) return false;
+			return true;
+		});
+
+	return (
+		<div className={clsx("ObCutOffPicker-root", className)} data-size={size}>
+			<Select
+				name="co"
+				aria-label={getLocalizedString("Period type")}
+				value={cutOffType}
+				onChange={(evt) => setCutOffType(evt.target.value as PeriodType)}
+				disabled={disabled}
+			>
+				{getCutOffTypes(disabledTypes ?? []).map(([type, label]) => (
+					<Select.Option value={type} key={type}>
+						{label}
+					</Select.Option>
+				))}
+			</Select>
+			{cutOffType === "AllDates" && (
+				<Textfield
+					name="period"
+					aria-label={getLocalizedString("Day")}
+					type="date"
+					value={periods.AllDates}
+					onChange={handlePeriodChanged}
+					disabled={disabled}
+					max={max ? plainDateToCutOff(max, "AllDates") : undefined}
+					min={min ? plainDateToCutOff(min, "AllDates") : undefined}
+				/>
+			)}
+			{cutOffType === "WS" && (
+				<Textfield
+					name="period"
+					aria-label={getLocalizedString("Week")}
+					type="week"
+					value={periods.WS.indexOf("W") === -1 ? periods.WS.replace("-", "-W") : periods.WS}
+					onChange={handlePeriodChanged}
+					disabled={disabled}
+					max={max ? plainDateToCutOff(max, "WS") : undefined}
+					min={min ? plainDateToCutOff(min, "WS") : undefined}
+				/>
+			)}
+			{(cutOffType === "MLD" || cutOffType === "MLS") && (
+				<Textfield
+					name="period"
+					aria-label={getLocalizedString("Month")}
+					type="month"
+					value={periods.MLD}
+					onChange={handlePeriodChanged}
+					disabled={disabled}
+					max={max ? plainDateToCutOff(max, "MLD") : undefined}
+					min={min ? plainDateToCutOff(min, "MLD") : undefined}
+				/>
+			)}
+			{(cutOffType === "QLD" || cutOffType === "QLS") && (
+				<Select
+					name="period"
+					aria-label={getLocalizedString("Quarter")}
+					value={periods.QLD}
+					onChange={handlePeriodChanged}
+					disabled={disabled}
+				>
+					{quarters.map((quarter) => (
+						<Select.Option key={quarter} value={quarter}>
+							{quarter}
+						</Select.Option>
+					))}
+				</Select>
+			)}
+			{cutOffType === "YLD" && (
+				<Select
+					name="period"
+					aria-label={getLocalizedString("Year")}
+					value={periods.YLD}
+					onChange={handlePeriodChanged}
+					disabled={disabled}
+				>
+					{years.map((year) => (
+						<Select.Option key={year} value={String(year)}>
+							{year}
+						</Select.Option>
+					))}
+				</Select>
+			)}
+		</div>
+	);
+}

package/src/cutoff/context.tsx

@@ -0,0 +1,194 @@
+import type React from "react";
+import { createContext, useContext, useEffect, useReducer } from "react";
+import { useSearchParams } from "react-router";
+
+import { type CutOffDatesRecord, dsCutOffDates } from "./dsCutOffDates.js";
+import {
+	defaultCutOffType,
+	defaultPeriod,
+	defaultPeriods,
+	getCutOffFromSearchParams,
+	getHistoryRangeStart,
+	getPeriodLabel,
+	type PeriodType,
+	type PeriodTypeValueMap,
+} from "./utils.js";
+
+export type PeriodState = {
+	/** The selected period of every type, so switching type and back keeps the choice. */
+	periods: PeriodTypeValueMap;
+	/** The selected period as Appframe stores it (weeks without the W). */
+	period: string;
+	/** The selected period in ISO form (weeks as `2026-W38`). */
+	isoPeriod: string;
+	cutOffType: PeriodType;
+	/** Start of a history range ending at the period; see `getHistoryRangeStart`. */
+	historyStart: string;
+	label: string;
+	/** The period's dates from the database, once fetched (`CutOffProvider fetchPeriod`). */
+	data?: CutOffDatesRecord;
+};
+
+export type PeriodActions = {
+	setPeriod: (type: PeriodType, period: string) => void;
+	setCutOffType: (type: PeriodType) => void;
+};
+
+export const CutOffContext = createContext<PeriodState & PeriodActions>({
+	historyStart: getHistoryRangeStart(defaultCutOffType, defaultPeriod),
+	label: getPeriodLabel(defaultCutOffType, defaultPeriod),
+	periods: defaultPeriods,
+	period: defaultPeriod,
+	isoPeriod: defaultPeriod,
+	cutOffType: defaultCutOffType,
+	setPeriod: () => null,
+	setCutOffType: () => null,
+});
+
+type CutOffAction =
+	| { type: "setCutOffType"; payload: PeriodType }
+	| { type: "setPeriod"; payload: { type: PeriodType; period: string } }
+	| { type: "cutOffLoaded"; payload: CutOffDatesRecord };
+
+const periodCache = new Map<string, CutOffDatesRecord>();
+
+function cutOffReducer(state: PeriodState, action: CutOffAction): PeriodState {
+	switch (action.type) {
+		case "setPeriod": {
+			let { period, type } = action.payload;
+			let isActivePeriod = type === state.cutOffType;
+			let key = `${type}-${period}`;
+
+			return {
+				...state,
+				data: periodCache.get(key),
+				period: (isActivePeriod ? action.payload.period : state.period).replace("W", ""),
+				isoPeriod: isActivePeriod ? action.payload.period : state.period,
+				periods: {
+					...state.periods,
+					[state.cutOffType]: action.payload.period,
+				},
+				historyStart: isActivePeriod ? getHistoryRangeStart(type, period) : state.historyStart,
+				label: isActivePeriod ? getPeriodLabel(type, period) : state.label,
+			};
+		}
+		case "setCutOffType": {
+			let { payload: coType } = action;
+			let key = `${coType}-${state.periods[coType]}`;
+
+			return {
+				...state,
+				data: periodCache.get(key),
+				period: state.periods[coType].replace("W", ""),
+				isoPeriod: state.periods[coType],
+				historyStart: getHistoryRangeStart(coType, state.periods[coType]),
+				label: getPeriodLabel(coType, state.periods[coType]),
+				cutOffType: coType,
+			};
+		}
+		case "cutOffLoaded":
+			return { ...state, data: action.payload };
+		default:
+			return state;
+	}
+}
+
+function initialState(): PeriodState {
+	let { coType, period } = getCutOffFromSearchParams(new URLSearchParams(globalThis.location?.search ?? ""));
+
+	return {
+		periods: { ...defaultPeriods, [coType]: period },
+		historyStart: getHistoryRangeStart(coType, period),
+		label: getPeriodLabel(coType, period),
+		period,
+		isoPeriod: period,
+		cutOffType: coType,
+	};
+}
+
+async function getCutOffPeriod(cutOffType: PeriodType, period: string): Promise<CutOffDatesRecord | undefined> {
+	let key = `${cutOffType}-${period}`;
+	let cached = periodCache.get(key);
+	if (cached) return cached;
+	if (!dsCutOffDates) return undefined;
+
+	let result = await dsCutOffDates.retrieve({
+		maxRecords: 1,
+		filterString: `[COType] = '${cutOffType}' AND [Period] = '${period}'`,
+	});
+
+	if (result.length > 0) {
+		periodCache.set(key, result[0]);
+	}
+
+	return result[0];
+}
+
+export type CutOffProviderProps = React.PropsWithChildren<{
+	/**
+	 * Fetch the period's dates from the database when it changes. Without it `data` stays
+	 * undefined.
+	 */
+	fetchPeriod?: boolean;
+}>;
+
+/**
+ * Holds the selected cut-off period for the app, initialised from the `co` and `period`
+ * search parameters. Read and change it with {@link useCutOff}; let the user pick it with
+ * `CutOffPicker`.
+ */
+export function CutOffProvider({ children, fetchPeriod }: CutOffProviderProps) {
+	let [state, dispatch] = useReducer(cutOffReducer, undefined, initialState);
+
+	useEffect(() => {
+		if (fetchPeriod && !state.data) {
+			getCutOffPeriod(state.cutOffType, state.period)
+				.then((payload) => {
+					if (payload) dispatch({ type: "cutOffLoaded", payload });
+				})
+				.catch((error) => console.warn(String(error)));
+		}
+	}, [fetchPeriod, state.cutOffType, state.period, state.data]);
+
+	return (
+		<CutOffContext.Provider
+			value={{
+				...state,
+				setPeriod: (type, period) => dispatch({ type: "setPeriod", payload: { type, period } }),
+				setCutOffType: (type) => dispatch({ type: "setCutOffType", payload: type }),
+			}}
+		>
+			{children}
+		</CutOffContext.Provider>
+	);
+}
+
+/**
+ * The selected cut-off period and the actions that change it. Keeps the `co` and `period`
+ * search parameters in step with the selection unless `disableSearchParams` is set (a form
+ * that submits the period itself, say).
+ */
+export function useCutOff({ disableSearchParams = false }: { disableSearchParams?: boolean } = {}) {
+	let cutOff = useContext(CutOffContext);
+	let [, setSearchParams] = useSearchParams();
+
+	useEffect(() => {
+		if (!disableSearchParams) {
+			let searchParams = new URLSearchParams(window.location.search);
+			if (cutOff.period === defaultPeriods[cutOff.cutOffType]) {
+				searchParams.delete("period");
+			} else {
+				searchParams.set("period", cutOff.period);
+			}
+			if (cutOff.cutOffType === "MLD") {
+				searchParams.delete("co");
+			} else {
+				searchParams.set("co", cutOff.cutOffType);
+			}
+
+			setSearchParams(searchParams, { replace: true });
+		}
+	}, [disableSearchParams, cutOff.period, cutOff.cutOffType, setSearchParams]);
+
+	return cutOff;
+}

package/src/cutoff/dsCutOffDates.ts

@@ -0,0 +1,21 @@
+import type { AfData } from "@olenbetong/appframe-data";
+
+export type CutOffDatesRecord = {
+	COType: string;
+	PeriodStart: Date;
+	PeriodEnd: Date;
+	Period: string;
+};
+
+/** `aviw_System_CutOffDates`: the start and end dates the database assigns to a period. */
+export const dsCutOffDates = (
+	(globalThis as { af?: { data?: AfData } }).af?.data as AfData | undefined
+)?.generateApiDataHandler?.<CutOffDatesRecord>({
+	resource: "aviw_System_CutOffDates",
+	fields: [
+		{ name: "COType", type: "string", nullable: false },
+		{ name: "PeriodStart", type: "datetime", nullable: true },
+		{ name: "PeriodEnd", type: "datetime", nullable: true },
+		{ name: "Period", type: "string", nullable: true },
+	],
+});

package/src/cutoff/index.ts

@@ -0,0 +1,4 @@
+export * from "./context.js";
+export * from "./CutOffPicker.js";
+export * from "./dsCutOffDates.js";
+export * from "./utils.js";