@olenbetong/appframe-ds 1.0.3 → 1.2.0

package/src/sortable/SortableItemList.css

@@ -1,21 +1,21 @@
-.ObSortableItemList-item {
-	position: relative;
-
-	&.ObSortableItemList-dragging {
-		outline: 3px dashed;
-		outline-offset: -3px;
-	}
-}
-
-.ObSortableItemList-handle {
-	cursor: grab;
-	flex-shrink: 0;
-}
-
-.ObSortableItemList-handle:active {
-	cursor: grabbing;
-}
-
-.ObSortableItemList-empty {
-	color: var(--ds-color-neutral-text-subtle, #666);
-}
+.ObSortableItemList-item {
+	position: relative;
+
+	&.ObSortableItemList-dragging {
+		outline: 3px dashed;
+		outline-offset: -3px;
+	}
+}
+
+.ObSortableItemList-handle {
+	cursor: grab;
+	flex-shrink: 0;
+}
+
+.ObSortableItemList-handle:active {
+	cursor: grabbing;
+}
+
+.ObSortableItemList-empty {
+	color: var(--ds-color-neutral-text-subtle, #666);
+}

package/src/sortable/SortableItemList.tsx

@@ -1,264 +1,264 @@
-import "./SortableItemList.css";
-
-import { Button, Dropdown } from "@digdir/designsystemet-react";
-import { DragVerticalIcon } from "@navikt/aksel-icons";
-import { getLocalizedString } from "@olenbetong/appframe-core";
-import clsx from "clsx";
-import type React from "react";
-import { createContext, useContext, useId, useRef } from "react";
-
-import { ItemList } from "../list/ItemList.js";
-import { Paper } from "../paper/Paper.js";
-import { DropIndicator } from "./DropIndicator.js";
-import type { SortableRecord } from "./types.js";
-import { type SortableItemState, useSortableItem } from "./useSortableItem.js";
-import { type SortableList, type SortableListOptions, useSortableList } from "./useSortableList.js";
-
-export interface SortableItemContextValue<T extends SortableRecord = SortableRecord> {
-	record: T;
-	/** Index of the record in the sorted list */
-	index: number;
-	/** Number of records in the list */
-	count: number;
-	/** Records in the list, sorted by `SortOrder` */
-	records: T[];
-	/** Current drag state of the item */
-	state: SortableItemState;
-	/** Element that starts the drag. Attach with `<SortableItemList.DragHandle />` */
-	handleRef: React.RefObject<HTMLButtonElement | null>;
-	enabled: boolean;
-	moveItem: SortableList<T>["moveItem"];
-	/** Moves the item one step up, to the top, one step down or to the bottom */
-	moveTo: (position: "top" | "up" | "down" | "bottom") => Promise<void>;
-}
-
-const SortableItemContext = createContext<SortableItemContextValue | null>(null);
-
-/**
- * Gives access to the state of the surrounding sortable item, e.g. to
- * suppress click handlers while the item is being dragged.
- */
-export function useSortableItemContext<T extends SortableRecord = SortableRecord>(): SortableItemContextValue<T> {
-	let context = useContext(SortableItemContext);
-	if (!context) {
-		throw new Error("useSortableItemContext must be used inside a SortableItemList item");
-	}
-
-	return context as SortableItemContextValue<T>;
-}
-
-export type SortableDragHandleProps = Omit<React.ComponentProps<typeof Button>, "ref" | "icon"> & {
-	/** Accessible label for the handle */
-	label?: string;
-	/**
-	 * Adds a menu with move up/down/top/bottom actions, so the list can be
-	 * reordered without a pointer.
-	 * @default true
-	 */
-	menu?: boolean;
-	children?: React.ReactNode;
-};
-
-/**
- * Drag handle for a `SortableItemList` item. Dragging is only started from
- * this element, so the rest of the item stays clickable. By default it also
- * opens a menu with keyboard accessible move actions.
- */
-export function SortableDragHandle({
-	label,
-	menu = true,
-	children,
-	className,
-	disabled,
-	...props
-}: SortableDragHandleProps) {
-	let { handleRef, index, count, enabled, moveTo } = useSortableItemContext();
-	let dropdownId = useId();
-	let isDisabled = disabled || !enabled;
-
-	return (
-		<>
-			<Button
-				ref={handleRef}
-				icon
-				variant="tertiary"
-				data-color="neutral"
-				className={clsx("ObSortableItemList-handle", className)}
-				aria-label={label ?? getLocalizedString("Change order")}
-				disabled={isDisabled}
-				popoverTarget={menu && !isDisabled ? dropdownId : undefined}
-				{...props}
-			>
-				{children ?? <DragVerticalIcon aria-hidden />}
-			</Button>
-			{menu && !isDisabled && (
-				<Dropdown id={dropdownId}>
-					<Dropdown.List>
-						<Dropdown.Item>
-							<Dropdown.Button disabled={index === 0} onClick={() => moveTo("top")}>
-								{getLocalizedString("Move to top")}
-							</Dropdown.Button>
-						</Dropdown.Item>
-						<Dropdown.Item>
-							<Dropdown.Button disabled={index === 0} onClick={() => moveTo("up")}>
-								{getLocalizedString("Move up")}
-							</Dropdown.Button>
-						</Dropdown.Item>
-						<Dropdown.Item>
-							<Dropdown.Button disabled={index === count - 1} onClick={() => moveTo("down")}>
-								{getLocalizedString("Move down")}
-							</Dropdown.Button>
-						</Dropdown.Item>
-						<Dropdown.Item>
-							<Dropdown.Button disabled={index === count - 1} onClick={() => moveTo("bottom")}>
-								{getLocalizedString("Move to bottom")}
-							</Dropdown.Button>
-						</Dropdown.Item>
-					</Dropdown.List>
-				</Dropdown>
-			)}
-		</>
-	);
-}
-
-function SortableItem<T extends SortableRecord>({
-	record,
-	index,
-	list,
-	className,
-	indicatorGap,
-	children,
-}: {
-	record: T;
-	index: number;
-	list: SortableList<T>;
-	className?: string;
-	indicatorGap?: string;
-	children: (context: SortableItemContextValue<T>) => React.ReactNode;
-}) {
-	let itemRef = useRef<HTMLElement>(null);
-	let handleRef = useRef<HTMLButtonElement>(null);
-	let { records, moveItem, enabled, type } = list;
-	let state = useSortableItem({ type, record, itemRef, handleRef, enabled });
-
-	async function moveTo(position: "top" | "up" | "down" | "bottom") {
-		let target =
-			position === "top"
-				? records[0]
-				: position === "up"
-					? records[index - 1]
-					: position === "down"
-						? records[index + 1]
-						: records[records.length - 1];
-		if (!target || target.PrimKey === record.PrimKey) return;
-
-		await moveItem(record.PrimKey, target.PrimKey, position === "top" || position === "up" ? null : "bottom");
-	}
-
-	let context: SortableItemContextValue<T> = {
-		record,
-		index,
-		count: records.length,
-		records,
-		state,
-		handleRef,
-		enabled,
-		moveItem,
-		moveTo,
-	};
-
-	return (
-		<SortableItemContext.Provider value={context as SortableItemContextValue}>
-			<ItemList.Item
-				ref={itemRef}
-				className={clsx(
-					"ObSortableItemList-item",
-					state.type === "is-dragging" && "ObSortableItemList-dragging",
-					className,
-				)}
-			>
-				{children(context)}
-				{state.type === "is-dragging-over" && state.edge && <DropIndicator edge={state.edge} gap={indicatorGap} />}
-			</ItemList.Item>
-		</SortableItemContext.Provider>
-	);
-}
-
-export type SortableItemListProps<T extends SortableRecord> = SortableListOptions<T> & {
-	/** Renders the content of a single item. Include a `<SortableItemList.DragHandle />` to allow dragging */
-	children: (record: T, context: SortableItemContextValue<T>) => React.ReactNode;
-	/** Rendered instead of the items when the list is empty */
-	empty?: React.ReactNode;
-	/** Wraps the list in a `Paper` surface @default true */
-	paper?: boolean;
-	/** Renders a divider between items @default true */
-	dividers?: boolean;
-	className?: string;
-	/** Class name added to every item */
-	itemClassName?: string;
-	/** Distance between the drop indicator and the item edge, when items have a gap */
-	indicatorGap?: string;
-};
-
-function SortableItemListComponent<T extends SortableRecord>({
-	children,
-	empty,
-	paper = true,
-	dividers = true,
-	className,
-	itemClassName,
-	indicatorGap,
-	...options
-}: SortableItemListProps<T>) {
-	let list = useSortableList<T>(options);
-
-	let items = list.records.map((record, index) => (
-		<SortableItem
-			key={record.PrimKey}
-			record={record}
-			index={index}
-			list={list}
-			className={itemClassName}
-			indicatorGap={indicatorGap}
-		>
-			{(context) => children(record, context)}
-		</SortableItem>
-	));
-
-	let content = list.records.length === 0 && empty ? <li className="ObSortableItemList-empty">{empty}</li> : items;
-
-	let listElement = (
-		<ItemList dividers={dividers} className={paper ? undefined : className}>
-			{content}
-		</ItemList>
-	);
-
-	return paper ? <Paper className={className}>{listElement}</Paper> : listElement;
-}
-
-/**
- * `ItemList` bound to a data object, where the items can be reordered by
- * dragging them or through the menu on the drag handle. The list is sorted by
- * the `SortOrder` column, and dropping an item writes a new sort order between
- * its new neighbours through the data object.
- *
- * @example
- * ```jsx
- * <SortableItemList
- *   dataObject={dsRelatedProducts}
- *   filter={(record) => record.ProductRef === productRef}
- *   empty={<Paragraph>No related products added yet.</Paragraph>}
- * >
- *   {(record) => (
- *     <>
- *       <SortableItemList.DragHandle label="Change related product order" />
- *       <ItemList.ItemText primary={record.Title} secondary={record.Slug} />
- *     </>
- *   )}
- * </SortableItemList>
- * ```
- */
-export const SortableItemList = Object.assign(SortableItemListComponent, {
-	DragHandle: SortableDragHandle,
-	ItemText: ItemList.ItemText,
-});
+import "./SortableItemList.css";
+
+import { Button, Dropdown } from "@digdir/designsystemet-react";
+import { DragVerticalIcon } from "@navikt/aksel-icons";
+import clsx from "clsx";
+import type React from "react";
+import { createContext, useContext, useId, useRef } from "react";
+
+import { ItemList } from "../list/ItemList.js";
+import { Paper } from "../paper/Paper.js";
+import { DropIndicator } from "./DropIndicator.js";
+import type { SortableRecord } from "./types.js";
+import { type SortableItemState, useSortableItem } from "./useSortableItem.js";
+import { type SortableList, type SortableListOptions, useSortableList } from "./useSortableList.js";
+import { getLocalizedString } from "../i18n.js";
+
+export interface SortableItemContextValue<T extends SortableRecord = SortableRecord> {
+	record: T;
+	/** Index of the record in the sorted list */
+	index: number;
+	/** Number of records in the list */
+	count: number;
+	/** Records in the list, sorted by `SortOrder` */
+	records: T[];
+	/** Current drag state of the item */
+	state: SortableItemState;
+	/** Element that starts the drag. Attach with `<SortableItemList.DragHandle />` */
+	handleRef: React.RefObject<HTMLButtonElement | null>;
+	enabled: boolean;
+	moveItem: SortableList<T>["moveItem"];
+	/** Moves the item one step up, to the top, one step down or to the bottom */
+	moveTo: (position: "top" | "up" | "down" | "bottom") => Promise<void>;
+}
+
+const SortableItemContext = createContext<SortableItemContextValue | null>(null);
+
+/**
+ * Gives access to the state of the surrounding sortable item, e.g. to
+ * suppress click handlers while the item is being dragged.
+ */
+export function useSortableItemContext<T extends SortableRecord = SortableRecord>(): SortableItemContextValue<T> {
+	let context = useContext(SortableItemContext);
+	if (!context) {
+		throw new Error("useSortableItemContext must be used inside a SortableItemList item");
+	}
+
+	return context as SortableItemContextValue<T>;
+}
+
+export type SortableDragHandleProps = Omit<React.ComponentProps<typeof Button>, "ref" | "icon"> & {
+	/** Accessible label for the handle */
+	label?: string;
+	/**
+	 * Adds a menu with move up/down/top/bottom actions, so the list can be
+	 * reordered without a pointer.
+	 * @default true
+	 */
+	menu?: boolean;
+	children?: React.ReactNode;
+};
+
+/**
+ * Drag handle for a `SortableItemList` item. Dragging is only started from
+ * this element, so the rest of the item stays clickable. By default it also
+ * opens a menu with keyboard accessible move actions.
+ */
+export function SortableDragHandle({
+	label,
+	menu = true,
+	children,
+	className,
+	disabled,
+	...props
+}: SortableDragHandleProps) {
+	let { handleRef, index, count, enabled, moveTo } = useSortableItemContext();
+	let dropdownId = useId();
+	let isDisabled = disabled || !enabled;
+
+	return (
+		<>
+			<Button
+				ref={handleRef}
+				icon
+				variant="tertiary"
+				data-color="neutral"
+				className={clsx("ObSortableItemList-handle", className)}
+				aria-label={label ?? getLocalizedString("Change order")}
+				disabled={isDisabled}
+				popoverTarget={menu && !isDisabled ? dropdownId : undefined}
+				{...props}
+			>
+				{children ?? <DragVerticalIcon aria-hidden />}
+			</Button>
+			{menu && !isDisabled && (
+				<Dropdown id={dropdownId}>
+					<Dropdown.List>
+						<Dropdown.Item>
+							<Dropdown.Button disabled={index === 0} onClick={() => moveTo("top")}>
+								{getLocalizedString("Move to top")}
+							</Dropdown.Button>
+						</Dropdown.Item>
+						<Dropdown.Item>
+							<Dropdown.Button disabled={index === 0} onClick={() => moveTo("up")}>
+								{getLocalizedString("Move up")}
+							</Dropdown.Button>
+						</Dropdown.Item>
+						<Dropdown.Item>
+							<Dropdown.Button disabled={index === count - 1} onClick={() => moveTo("down")}>
+								{getLocalizedString("Move down")}
+							</Dropdown.Button>
+						</Dropdown.Item>
+						<Dropdown.Item>
+							<Dropdown.Button disabled={index === count - 1} onClick={() => moveTo("bottom")}>
+								{getLocalizedString("Move to bottom")}
+							</Dropdown.Button>
+						</Dropdown.Item>
+					</Dropdown.List>
+				</Dropdown>
+			)}
+		</>
+	);
+}
+
+function SortableItem<T extends SortableRecord>({
+	record,
+	index,
+	list,
+	className,
+	indicatorGap,
+	children,
+}: {
+	record: T;
+	index: number;
+	list: SortableList<T>;
+	className?: string;
+	indicatorGap?: string;
+	children: (context: SortableItemContextValue<T>) => React.ReactNode;
+}) {
+	let itemRef = useRef<HTMLElement>(null);
+	let handleRef = useRef<HTMLButtonElement>(null);
+	let { records, moveItem, enabled, type } = list;
+	let state = useSortableItem({ type, record, itemRef, handleRef, enabled });
+
+	async function moveTo(position: "top" | "up" | "down" | "bottom") {
+		let target =
+			position === "top"
+				? records[0]
+				: position === "up"
+					? records[index - 1]
+					: position === "down"
+						? records[index + 1]
+						: records[records.length - 1];
+		if (!target || target.PrimKey === record.PrimKey) return;
+
+		await moveItem(record.PrimKey, target.PrimKey, position === "top" || position === "up" ? null : "bottom");
+	}
+
+	let context: SortableItemContextValue<T> = {
+		record,
+		index,
+		count: records.length,
+		records,
+		state,
+		handleRef,
+		enabled,
+		moveItem,
+		moveTo,
+	};
+
+	return (
+		<SortableItemContext.Provider value={context as SortableItemContextValue}>
+			<ItemList.Item
+				ref={itemRef}
+				className={clsx(
+					"ObSortableItemList-item",
+					state.type === "is-dragging" && "ObSortableItemList-dragging",
+					className,
+				)}
+			>
+				{children(context)}
+				{state.type === "is-dragging-over" && state.edge && <DropIndicator edge={state.edge} gap={indicatorGap} />}
+			</ItemList.Item>
+		</SortableItemContext.Provider>
+	);
+}
+
+export type SortableItemListProps<T extends SortableRecord> = SortableListOptions<T> & {
+	/** Renders the content of a single item. Include a `<SortableItemList.DragHandle />` to allow dragging */
+	children: (record: T, context: SortableItemContextValue<T>) => React.ReactNode;
+	/** Rendered instead of the items when the list is empty */
+	empty?: React.ReactNode;
+	/** Wraps the list in a `Paper` surface @default true */
+	paper?: boolean;
+	/** Renders a divider between items @default true */
+	dividers?: boolean;
+	className?: string;
+	/** Class name added to every item */
+	itemClassName?: string;
+	/** Distance between the drop indicator and the item edge, when items have a gap */
+	indicatorGap?: string;
+};
+
+function SortableItemListComponent<T extends SortableRecord>({
+	children,
+	empty,
+	paper = true,
+	dividers = true,
+	className,
+	itemClassName,
+	indicatorGap,
+	...options
+}: SortableItemListProps<T>) {
+	let list = useSortableList<T>(options);
+
+	let items = list.records.map((record, index) => (
+		<SortableItem
+			key={record.PrimKey}
+			record={record}
+			index={index}
+			list={list}
+			className={itemClassName}
+			indicatorGap={indicatorGap}
+		>
+			{(context) => children(record, context)}
+		</SortableItem>
+	));
+
+	let content = list.records.length === 0 && empty ? <li className="ObSortableItemList-empty">{empty}</li> : items;
+
+	let listElement = (
+		<ItemList dividers={dividers} className={paper ? undefined : className}>
+			{content}
+		</ItemList>
+	);
+
+	return paper ? <Paper className={className}>{listElement}</Paper> : listElement;
+}
+
+/**
+ * `ItemList` bound to a data object, where the items can be reordered by
+ * dragging them or through the menu on the drag handle. The list is sorted by
+ * the `SortOrder` column, and dropping an item writes a new sort order between
+ * its new neighbours through the data object.
+ *
+ * @example
+ * ```jsx
+ * <SortableItemList
+ *   dataObject={dsRelatedProducts}
+ *   filter={(record) => record.ProductRef === productRef}
+ *   empty={<Paragraph>No related products added yet.</Paragraph>}
+ * >
+ *   {(record) => (
+ *     <>
+ *       <SortableItemList.DragHandle label="Change related product order" />
+ *       <ItemList.ItemText primary={record.Title} secondary={record.Slug} />
+ *     </>
+ *   )}
+ * </SortableItemList>
+ * ```
+ */
+export const SortableItemList = Object.assign(SortableItemListComponent, {
+	DragHandle: SortableDragHandle,
+	ItemText: ItemList.ItemText,
+});

package/src/sortable/index.ts

@@ -1,8 +1,8 @@
-export * from "./DropIndicator.js";
-export * from "./SortableItemList.js";
-export * from "./reorderSortOrder.js";
-export * from "./sortOrder.js";
-export * from "./types.js";
-export * from "./useSortableContainer.js";
-export * from "./useSortableItem.js";
-export * from "./useSortableList.js";
+export * from "./DropIndicator.js";
+export * from "./SortableItemList.js";
+export * from "./reorderSortOrder.js";
+export * from "./sortOrder.js";
+export * from "./types.js";
+export * from "./useSortableContainer.js";
+export * from "./useSortableItem.js";
+export * from "./useSortableList.js";