@olenbetong/appframe-ds 1.0.3 → 1.2.0

package/src/input/InputAdornments.tsx

@@ -1,102 +1,102 @@
-import "./InputAdornments.css";
-
-import { Input, type InputProps } from "@digdir/designsystemet-react";
-import clsx from "clsx";
-import { Children, isValidElement, type ReactElement, type ReactNode, type Ref } from "react";
-
-export type InputSlotProps = {
-	/**
-	 * Extra classes for the input rendered in this slot
-	 */
-	className?: string;
-};
-
-/**
- * Marks where the input should be rendered among the children of
- * `InputAdornments`. Renders nothing on its own; `InputAdornments` swaps it
- * for the actual input. When it is left out, the input is rendered before the
- * adornments.
- *
- * @example
- * ```jsx
- * <InputAdornments value={value} onChange={handleChange}>
- *   <SearchIcon aria-hidden />
- *   <InputSlot />
- *   <Button icon variant="tertiary"><XMarkIcon aria-hidden /></Button>
- * </InputAdornments>
- * ```
- */
-export function InputSlot(_props: InputSlotProps) {
-	return null;
-}
-
-export type InputAdornmentsProps = Omit<InputProps, "children"> & {
-	/**
-	 * Adornments rendered next to the input, e.g. icons or buttons. Include an
-	 * `InputSlot` to control where the input itself ends up.
-	 */
-	children?: ReactNode;
-	/**
-	 * Classes for the wrapper that carries the input styling
-	 */
-	className?: string;
-	/**
-	 * Classes for the bare input element itself
-	 */
-	inputClassName?: string;
-	/**
-	 * Ref to the input element. The wrapper is an implementation detail, so the
-	 * ref points at the input rather than at the element carrying the styling.
-	 */
-	ref?: Ref<HTMLInputElement>;
-};
-
-/**
- * Input with adornments, equivalent to a MUI `TextField` with
- * `InputProps.startAdornment` / `endAdornment`. Designsystemet has no
- * equivalent, so the border, background, hover and focus styling is moved from
- * the input onto a wrapper element, making the input and its adornments read
- * as a single control.
- *
- * All other props are forwarded to the Designsystemet `Input`, so `ref`,
- * `value`, `onChange`, `data-size` and `data-color` work as usual.
- *
- * @example
- * ```jsx
- * // Input first (default), adornments after
- * <InputAdornments aria-label="Search" value={value} onChange={handleChange}>
- *   <Button icon variant="tertiary"><MagnifyingGlassIcon aria-hidden /></Button>
- * </InputAdornments>
- *
- * // Explicit placement with InputSlot
- * <InputAdornments aria-label="Amount" data-size="lg">
- *   <span aria-hidden>kr</span>
- *   <InputSlot />
- *   <span aria-hidden>,-</span>
- * </InputAdornments>
- * ```
- */
-export function InputAdornments({ children, className, inputClassName, ...props }: InputAdornmentsProps) {
-	let size = props["data-size"];
-	let color = props["data-color"];
-	let childArray = Children.toArray(children);
-	let slot = childArray.find((child) => isValidElement(child) && child.type === InputSlot) as
-		| ReactElement<InputSlotProps>
-		| undefined;
-
-	let input = (
-		<Input
-			key="ObInputAdornments-input"
-			{...props}
-			className={clsx("ObInputAdornments-field", inputClassName, slot?.props.className)}
-		/>
-	);
-
-	let content = slot ? childArray.map((child) => (child === slot ? input : child)) : [input, ...childArray];
-
-	return (
-		<div className={clsx("ObInputAdornments-root", className)} data-size={size} data-color={color}>
-			{content}
-		</div>
-	);
-}
+import "./InputAdornments.css";
+
+import { Input, type InputProps } from "@digdir/designsystemet-react";
+import clsx from "clsx";
+import { Children, isValidElement, type ReactElement, type ReactNode, type Ref } from "react";
+
+export type InputSlotProps = {
+	/**
+	 * Extra classes for the input rendered in this slot
+	 */
+	className?: string;
+};
+
+/**
+ * Marks where the input should be rendered among the children of
+ * `InputAdornments`. Renders nothing on its own; `InputAdornments` swaps it
+ * for the actual input. When it is left out, the input is rendered before the
+ * adornments.
+ *
+ * @example
+ * ```jsx
+ * <InputAdornments value={value} onChange={handleChange}>
+ *   <SearchIcon aria-hidden />
+ *   <InputSlot />
+ *   <Button icon variant="tertiary"><XMarkIcon aria-hidden /></Button>
+ * </InputAdornments>
+ * ```
+ */
+export function InputSlot(_props: InputSlotProps) {
+	return null;
+}
+
+export type InputAdornmentsProps = Omit<InputProps, "children"> & {
+	/**
+	 * Adornments rendered next to the input, e.g. icons or buttons. Include an
+	 * `InputSlot` to control where the input itself ends up.
+	 */
+	children?: ReactNode;
+	/**
+	 * Classes for the wrapper that carries the input styling
+	 */
+	className?: string;
+	/**
+	 * Classes for the bare input element itself
+	 */
+	inputClassName?: string;
+	/**
+	 * Ref to the input element. The wrapper is an implementation detail, so the
+	 * ref points at the input rather than at the element carrying the styling.
+	 */
+	ref?: Ref<HTMLInputElement>;
+};
+
+/**
+ * Input with adornments, equivalent to a MUI `TextField` with
+ * `InputProps.startAdornment` / `endAdornment`. Designsystemet has no
+ * equivalent, so the border, background, hover and focus styling is moved from
+ * the input onto a wrapper element, making the input and its adornments read
+ * as a single control.
+ *
+ * All other props are forwarded to the Designsystemet `Input`, so `ref`,
+ * `value`, `onChange`, `data-size` and `data-color` work as usual.
+ *
+ * @example
+ * ```jsx
+ * // Input first (default), adornments after
+ * <InputAdornments aria-label="Search" value={value} onChange={handleChange}>
+ *   <Button icon variant="tertiary"><MagnifyingGlassIcon aria-hidden /></Button>
+ * </InputAdornments>
+ *
+ * // Explicit placement with InputSlot
+ * <InputAdornments aria-label="Amount" data-size="lg">
+ *   <span aria-hidden>kr</span>
+ *   <InputSlot />
+ *   <span aria-hidden>,-</span>
+ * </InputAdornments>
+ * ```
+ */
+export function InputAdornments({ children, className, inputClassName, ...props }: InputAdornmentsProps) {
+	let size = props["data-size"];
+	let color = props["data-color"];
+	let childArray = Children.toArray(children);
+	let slot = childArray.find((child) => isValidElement(child) && child.type === InputSlot) as
+		| ReactElement<InputSlotProps>
+		| undefined;
+
+	let input = (
+		<Input
+			key="ObInputAdornments-input"
+			{...props}
+			className={clsx("ObInputAdornments-field", inputClassName, slot?.props.className)}
+		/>
+	);
+
+	let content = slot ? childArray.map((child) => (child === slot ? input : child)) : [input, ...childArray];
+
+	return (
+		<div className={clsx("ObInputAdornments-root", className)} data-size={size} data-color={color}>
+			{content}
+		</div>
+	);
+}

package/src/input/index.ts

@@ -1 +1 @@
-export * from "./InputAdornments.js";
+export * from "./InputAdornments.js";

package/src/layout/AppMenu.tsx

@@ -1,75 +1,74 @@
-import "./AppMenu.css";
-
-import { getLocalizedString } from "@olenbetong/appframe-core";
-
-import clsx from "clsx";
-import type React from "react";
-
-type MenuHeaderProps = {
-	children?: React.ReactNode[] | React.ReactNode;
-	primary: string;
-	secondary?: string;
-};
-
-function MenuHeader({ primary, secondary }: MenuHeaderProps) {
-	return (
-		<>
-			<div className="AppMenu-header">
-				<h1 className="AppMenu-title" id="NavigationHeader">
-					{primary}
-				</h1>
-				{secondary && <p className="AppMenu-subTitle">{secondary}</p>}
-			</div>
-			<hr className="AppMenu-divider" />
-		</>
-	);
-}
-
-function handleKeyDown(evt: React.KeyboardEvent) {
-	let nextElement: Element | null | undefined = null;
-	let appMenu = evt.currentTarget;
-
-	if (!document.activeElement || !(appMenu instanceof HTMLElement) || !appMenu.contains(document.activeElement)) return;
-
-	let links = Array.from(appMenu.querySelectorAll<HTMLElement>("a, button"));
-	let currentIndex = links.indexOf(document.activeElement as HTMLElement);
-
-	if (evt.key === "ArrowDown" || evt.key === "ArrowRight") {
-		if (currentIndex < links.length) {
-			nextElement = links[currentIndex + 1];
-		}
-	} else if (evt.key === "ArrowUp" || evt.key === "ArrowLeft") {
-		if (currentIndex > 0) {
-			nextElement = links[currentIndex - 1];
-		}
-	} else if (evt.key === "Home" || evt.key === "End") {
-		nextElement = links.at(evt.key === "Home" ? 0 : -1);
-	}
-
-	if (nextElement instanceof HTMLElement) {
-		evt.preventDefault();
-		nextElement.scrollIntoView({ block: "nearest" });
-		nextElement.focus();
-	}
-}
-
-export type AppMenuProps = Pick<React.HTMLProps<HTMLElement>, "aria-label" | "aria-labelledby" | "className" | "id"> & {
-	children?: React.ReactNode[] | React.ReactNode;
-	headerPrimary?: string;
-	headerSecondary?: string;
-};
-
-export function AppMenu({ children, className, headerPrimary, headerSecondary, ...props }: AppMenuProps) {
-	return (
-		<nav
-			aria-labelledby={headerPrimary ? "NavigationHeader" : undefined}
-			aria-label={headerPrimary ? undefined : getLocalizedString("Application pages")}
-			className={clsx(className, "MenuItems-root")}
-			onKeyDown={handleKeyDown}
-			{...props}
-		>
-			{headerPrimary && <MenuHeader primary={headerPrimary} secondary={headerSecondary} />}
-			{children}
-		</nav>
-	);
-}
+import "./AppMenu.css";
+
+import clsx from "clsx";
+import type React from "react";
+import { getLocalizedString } from "../i18n.js";
+
+type MenuHeaderProps = {
+	children?: React.ReactNode[] | React.ReactNode;
+	primary: string;
+	secondary?: string;
+};
+
+function MenuHeader({ primary, secondary }: MenuHeaderProps) {
+	return (
+		<>
+			<div className="AppMenu-header">
+				<h1 className="AppMenu-title" id="NavigationHeader">
+					{primary}
+				</h1>
+				{secondary && <p className="AppMenu-subTitle">{secondary}</p>}
+			</div>
+			<hr className="AppMenu-divider" />
+		</>
+	);
+}
+
+function handleKeyDown(evt: React.KeyboardEvent) {
+	let nextElement: Element | null | undefined = null;
+	let appMenu = evt.currentTarget;
+
+	if (!document.activeElement || !(appMenu instanceof HTMLElement) || !appMenu.contains(document.activeElement)) return;
+
+	let links = Array.from(appMenu.querySelectorAll<HTMLElement>("a, button"));
+	let currentIndex = links.indexOf(document.activeElement as HTMLElement);
+
+	if (evt.key === "ArrowDown" || evt.key === "ArrowRight") {
+		if (currentIndex < links.length) {
+			nextElement = links[currentIndex + 1];
+		}
+	} else if (evt.key === "ArrowUp" || evt.key === "ArrowLeft") {
+		if (currentIndex > 0) {
+			nextElement = links[currentIndex - 1];
+		}
+	} else if (evt.key === "Home" || evt.key === "End") {
+		nextElement = links.at(evt.key === "Home" ? 0 : -1);
+	}
+
+	if (nextElement instanceof HTMLElement) {
+		evt.preventDefault();
+		nextElement.scrollIntoView({ block: "nearest" });
+		nextElement.focus();
+	}
+}
+
+export type AppMenuProps = Pick<React.HTMLProps<HTMLElement>, "aria-label" | "aria-labelledby" | "className" | "id"> & {
+	children?: React.ReactNode[] | React.ReactNode;
+	headerPrimary?: string;
+	headerSecondary?: string;
+};
+
+export function AppMenu({ children, className, headerPrimary, headerSecondary, ...props }: AppMenuProps) {
+	return (
+		<nav
+			aria-labelledby={headerPrimary ? "NavigationHeader" : undefined}
+			aria-label={headerPrimary ? undefined : getLocalizedString("Application pages")}
+			className={clsx(className, "MenuItems-root")}
+			onKeyDown={handleKeyDown}
+			{...props}
+		>
+			{headerPrimary && <MenuHeader primary={headerPrimary} secondary={headerSecondary} />}
+			{children}
+		</nav>
+	);
+}

package/src/layout/AppMenuDrawer.css

@@ -1,70 +1,70 @@
-/* --- drawer --- */
-
-@media screen {
-	.ObPageHeader-drawer {
-		/*
-		 * Absolute, not fixed: the drawer belongs to the page, so it stays clear of any site
-		 * chrome rendered above the app. Raising z-index instead would put the menu over that
-		 * chrome and hide it, and #root often creates its own stacking context anyway.
-		 * Requires Page (which is position: relative); use layout="app" so it has a height.
-		 */
-		position: absolute;
-		top: 0;
-		left: 0;
-		bottom: 0;
-		width: var(--ob-page-drawer-width, 20rem);
-		max-width: 90%;
-		box-sizing: border-box;
-		background-color: var(--ds-color-neutral-background-default, #fff);
-		color: var(--ds-color-neutral-text-default, #1e2b3c);
-		transform: translateX(-100%);
-		transition: transform 225ms cubic-bezier(0, 0, 0.2, 1);
-		overflow: hidden;
-		display: flex;
-		flex-direction: column;
-	}
-
-	.ObPageHeader-drawer > .MenuItems-root {
-		flex: 1 1 auto;
-		min-height: 0;
-	}
-
-	.ObPageHeader-drawer.ObPageHeader-drawerOpen {
-		transform: translateX(0);
-	}
-
-	.ObPageHeader-drawerDocked {
-		border-right: 1px solid var(--ds-color-neutral-border-subtle, #dfdfdf);
-		z-index: 1100;
-	}
-
-	.ObPageHeader-drawerOverlayMode {
-		z-index: 1200;
-		box-shadow:
-			rgb(0 0 0 / 20%) 0px 8px 10px -5px,
-			rgb(0 0 0 / 14%) 0px 16px 24px 2px,
-			rgb(0 0 0 / 12%) 0px 6px 30px 5px;
-	}
-
-	.ObPageHeader-drawerOverlay {
-		position: absolute;
-		inset: 0;
-		background-color: rgb(0 0 0 / 50%);
-		z-index: 1199;
-		opacity: 0;
-		pointer-events: none;
-		transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1);
-	}
-
-	.ObPageHeader-drawerOverlay.ObPageHeader-drawerOpen {
-		opacity: 1;
-		pointer-events: auto;
-	}
-}
-
-@media print {
-	.ObPageHeader-drawer,
-	.ObPageHeader-drawerOverlay {
-		display: none !important;
-	}
-}
+/* --- drawer --- */
+
+@media screen {
+	.ObPageHeader-drawer {
+		/*
+		 * Absolute, not fixed: the drawer belongs to the page, so it stays clear of any site
+		 * chrome rendered above the app. Raising z-index instead would put the menu over that
+		 * chrome and hide it, and #root often creates its own stacking context anyway.
+		 * Requires Page (which is position: relative); use layout="app" so it has a height.
+		 */
+		position: absolute;
+		top: 0;
+		left: 0;
+		bottom: 0;
+		width: var(--ob-page-drawer-width, 20rem);
+		max-width: 90%;
+		box-sizing: border-box;
+		background-color: var(--ds-color-neutral-background-default, #fff);
+		color: var(--ds-color-neutral-text-default, #1e2b3c);
+		transform: translateX(-100%);
+		transition: transform 225ms cubic-bezier(0, 0, 0.2, 1);
+		overflow: hidden;
+		display: flex;
+		flex-direction: column;
+	}
+
+	.ObPageHeader-drawer > .MenuItems-root {
+		flex: 1 1 auto;
+		min-height: 0;
+	}
+
+	.ObPageHeader-drawer.ObPageHeader-drawerOpen {
+		transform: translateX(0);
+	}
+
+	.ObPageHeader-drawerDocked {
+		border-right: 1px solid var(--ds-color-neutral-border-subtle, #dfdfdf);
+		z-index: 1100;
+	}
+
+	.ObPageHeader-drawerOverlayMode {
+		z-index: 1200;
+		box-shadow:
+			rgb(0 0 0 / 20%) 0px 8px 10px -5px,
+			rgb(0 0 0 / 14%) 0px 16px 24px 2px,
+			rgb(0 0 0 / 12%) 0px 6px 30px 5px;
+	}
+
+	.ObPageHeader-drawerOverlay {
+		position: absolute;
+		inset: 0;
+		background-color: rgb(0 0 0 / 50%);
+		z-index: 1199;
+		opacity: 0;
+		pointer-events: none;
+		transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1);
+	}
+
+	.ObPageHeader-drawerOverlay.ObPageHeader-drawerOpen {
+		opacity: 1;
+		pointer-events: auto;
+	}
+}
+
+@media print {
+	.ObPageHeader-drawer,
+	.ObPageHeader-drawerOverlay {
+		display: none !important;
+	}
+}