@botiverse/raft-ui 0.82.0 → 0.84.0

package/dist/components/dialog/dialog.mjs

@@ -6,13 +6,15 @@ import { tv } from "../../lib/tv.mjs";
 import { useThemeScopeProps } from "../../lib/theme/theme-scope.mjs";
 import { useParentOverlayKind, withOverlayLayer } from "../../lib/overlay-depth.mjs";
 import { Button } from "../button/button.mjs";
-import { DialogSheetHeadContext, DialogSheetReset, dialogSheet, useDialogSheet, useInDialogSheetHead } from "./dialog-sheet-context.mjs";
+import { DialogSheetHeadContext, DialogSheetReset, DialogSheetSurfaceContext, dialogSheet, useDialogSheet, useInDialogSheetHead } from "./dialog-sheet-context.mjs";
 import { ScrollArea } from "../scroll-area/scroll-area.mjs";
+import { useMobileViewport } from "../../lib/use-mobile-viewport.mjs";
+import { useSoftKeyboard } from "../../lib/use-soft-keyboard.mjs";
 import { TextLink } from "../text-link/text-link.mjs";
 import { PanelAction } from "../panel/panel-action.mjs";
 import { Dialog } from "@base-ui/react/dialog";
 import { ArrowLeft, X } from "lucide-react";
-import { Children, createContext, isValidElement, useContext, useEffect } from "react";
+import { Children, createContext, isValidElement, useContext, useEffect, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
@@ -59,12 +61,20 @@ const dialog = tv({
 			lg: { content: ["max-w-160"] },
 			wide: { content: ["max-w-4xl h-[min(760px,calc(100dvh-2rem))]"] }
 		},
+		placement: {
+			center: {},
+			top: { content: ["md:top-(--dialog-top,8vh) md:translate-y-0", "md:max-h-[calc(100dvh-var(--dialog-top,8vh)-16px)]"] }
+		},
+		keyboard: {
+			false: {},
+			true: { content: ["data-soft-keyboard:top-[calc(var(--dialog-visible-top)+env(safe-area-inset-top,0px)+var(--header-height))] data-soft-keyboard:translate-y-0", "data-soft-keyboard:max-h-[calc(var(--dialog-visible-height)-env(safe-area-inset-top,0px)-var(--header-height)-16px)]"] }
+		},
 		bar: {
 			false: {},
 			true: {
-				header: ["flex h-(--header-height) shrink-0 items-center gap-2 border-b px-(--surface-inset) py-0", "border-line-seam pt-0 [&>[data-slot=dialog-close]]:my-0"],
-				body: ["flex min-h-0 flex-1 overflow-hidden p-0", "px-0 pt-0 pb-0 first:pt-0 text-foreground"],
-				footer: ["shrink-0 border-t px-(--surface-inset) py-3", "border-line-seam pt-3 pb-3 first:pt-3 [[data-slot=dialog-header]+&]:pt-3"]
+				header: ["flex h-(--header-height) shrink-0 items-center gap-2 border-b px-(--surface-inset) py-0", "border-line-seam pt-0 *:data-[slot=dialog-close]:my-0"],
+				body: ["flex min-h-0 flex-1 overflow-hidden p-0", "p-0   first:pt-0 text-foreground"],
+				footer: ["shrink-0 border-t px-(--surface-inset) py-3", "border-line-seam py-3  first:pt-3 [[data-slot=dialog-header]+&]:pt-3"]
 			}
 		},
 		layer: {
@@ -125,10 +135,16 @@ function DialogOverlay({ className, layer, ...props }) {
 	});
 }
 const DialogSizeContext = createContext(void 0);
-function DialogContent({ className, children, portalProps, overlay, size, layer, ...props }) {
+function DialogContent({ className, children, portalProps, overlay, size, layer, placement, ...props }) {
+	const top = placement === "top";
+	const sheetSurface = useContext(DialogSheetSurfaceContext);
+	const [keyboard, setKeyboard] = useState(null);
+	const raised = !sheetSurface && keyboard != null;
 	const { content } = dialog({
 		size,
-		layer
+		layer,
+		placement,
+		keyboard: raised || void 0
 	});
 	const overlayProps = typeof overlay === "object" ? overlay : {};
 	return /* @__PURE__ */ jsxs(DialogPortal, {
@@ -136,17 +152,41 @@ function DialogContent({ className, children, portalProps, overlay, size, layer,
 		children: [overlay === false ? null : /* @__PURE__ */ jsx(DialogOverlay, {
 			layer,
 			...overlayProps
-		}), /* @__PURE__ */ jsx(Dialog.Popup, {
+		}), /* @__PURE__ */ jsxs(Dialog.Popup, {
 			"data-slot": "dialog-content",
+			"data-placement": top ? "top" : void 0,
+			"data-soft-keyboard": raised ? "" : void 0,
 			className: content({ className }),
 			...props,
-			children: /* @__PURE__ */ jsx(DialogSizeContext.Provider, {
+			...raised ? { style: withVisibleArea(props.style, keyboard) } : null,
+			children: [sheetSurface ? null : /* @__PURE__ */ jsx(SoftKeyboardWatch, { onChange: setKeyboard }), /* @__PURE__ */ jsx(DialogSizeContext.Provider, {
 				value: size ?? (/(^|\s)max-w-/.test(className ?? "") ? void 0 : "md"),
 				children: /* @__PURE__ */ jsx(DialogSheetReset, { children })
-			})
+			})]
 		})]
 	});
 }
+/**
+* Reports the on-screen keyboard on a phone to a centred dialog, which moves
+* up while it is open (dialog.md, "On a phone"). Rendered inside the popup,
+* so it listens only while the dialog is open, and only below 768px.
+*/
+function SoftKeyboardWatch({ onChange }) {
+	const keyboard = useSoftKeyboard(useMobileViewport());
+	useEffect(() => {
+		onChange(keyboard);
+	}, [keyboard, onChange]);
+	useEffect(() => () => onChange(null), [onChange]);
+	return null;
+}
+/** The popup's style with the area the keyboard leaves visible, for its CSS. */
+function withVisibleArea(style, keyboard) {
+	return {
+		...style,
+		"--dialog-visible-top": `${keyboard.top}px`,
+		"--dialog-visible-height": `${keyboard.height}px`
+	};
+}
 function DialogClose({ className, variant, size, children, render, "aria-label": ariaLabel, ...props }) {
 	const inSheetHead = useInDialogSheetHead();
 	if (render) return /* @__PURE__ */ jsx(Dialog.Close, {

package/dist/components/drag/drag.recipe.mjs

@@ -18,7 +18,7 @@ const drag = tv({
 			"border-[1.5px] border-dashed border-line-strong bg-fill-subtle"
 		],
 		hint: [
-			"pointer-events-none fixed top-0 left-0 z-70 max-w-80",
+			"pointer-events-none fixed top-0 left-0 z-999 max-w-80",
 			"rounded-chip px-2 py-1",
 			"font-sans text-caption",
 			"bg-layer-hud text-foreground-on-hud shadow-float ring-1 ring-line-seam"

package/dist/components/fit-toolbar/fit-toolbar.d.mts

@@ -0,0 +1,165 @@
+import { StyledProps } from "../../lib/styled-props.mjs";
+import { ButtonProps } from "../button/button.mjs";
+import { PickerTriggerButtonProps } from "../picker-trigger-button/picker-trigger-button.mjs";
+import { ReactElement, ReactNode, Ref } from "react";
+import { Toolbar } from "@base-ui/react/toolbar";
+//#region src/components/fit-toolbar/fit-toolbar.d.ts
+/**
+ * The ways an item gives way, each one step:
+ * - `label`: its label hides and its icon stays (the label stays its accessible name);
+ * - `more`: it moves into More;
+ * - `collapse`: a group shows its one button instead of its items (a Filter button for its filters);
+ * - `wrap`: a group moves to a line of its own, only in a toolbar that allows it;
+ * - `plus`: a primary action shows as + alone (the label stays its accessible name).
+ */
+export type FitStep = "label" | "more" | "collapse" | "wrap" | "plus";
+/**
+ * When each of an item's steps comes, one order for the whole toolbar: lower
+ * gives way first; at the same number, the last item first, and one item's
+ * steps in the order of `FitStep`.
+ */
+export type FitSteps = Partial<Record<FitStep, number>>;
+export type FitToolbarProps = StyledProps<Toolbar.Root.Props> & {
+  ref?: Ref<HTMLDivElement>;
+  /**
+   * Groups may move to a line of their own (the `wrap` step) when the row
+   * runs out of room. Off for a toolbar that floats over content: a second
+   * line would cover it, so its last step is into More.
+   */
+  wrap?: boolean;
+};
+/**
+ * A toolbar whose items give way, in named steps and an order the items
+ * declare, as the region it sits in narrows: it measures its content in its
+ * own width, never the window's. The steps are written on each item as
+ * `data-fit-<step>` for its styles. A Base UI Toolbar: one Tab stop, the
+ * arrow keys inside.
+ */
+export declare function FitToolbar({ className, wrap, ref, ...props }: FitToolbarProps): import("react").JSX.Element;
+/**
+ * Inside a FitToolbar: a control that would measure its own fit (a
+ * SegmentedControl's `iconsOnlyBelow`) leaves it to the toolbar's steps.
+ */
+export declare function useInFitToolbar(): boolean;
+export type FitItemOptions = FitSteps & {
+  /** What the item is in More's menu while it is there (`FitToolbarMoreItems`). */
+  moreItem?: ReactNode;
+};
+/**
+ * Makes an element an item of the nearest FitToolbar: spread `props` on it.
+ * Says which steps it has taken, for what it renders (a tooltip once its
+ * label is gone, say).
+ */
+export declare function useFitItem({ moreItem, ...steps }?: FitItemOptions): {
+  id: string;
+  props: Record<string, string | undefined>;
+  /** Steps it has taken. */
+  taken: (step: FitStep) => boolean;
+};
+/**
+ * Makes an element the toolbar's More: spread `props` on it. It shows only
+ * while an item is in More (`data-fit-shown`); hide it otherwise.
+ */
+export declare function useFitMore(): {
+  shown: boolean;
+  props: Record<string, string | undefined>;
+};
+/** The items in More, in their order, each as its `moreItem`: put it in More's menu. */
+export declare function FitToolbarMoreItems(): import("react").JSX.Element[] | null;
+export type FitToolbarGroupProps = StyledProps<Toolbar.Group.Props> & {
+  /** When it moves to a line of its own (the `wrap` step), in a toolbar that allows it. */
+  wrapOrder?: number;
+  /** Stays on the first line: it never wraps. The page decides which groups do. */
+  firstLine?: boolean;
+  /**
+   * Groups with the same `wrapLine` wrap onto the same line, in their order, a
+   * fixed gap apart; a group without one takes a line of its own.
+   */
+  wrapLine?: string;
+  /** When it shows `collapsed` instead of its items (the `collapse` step). */
+  collapseOrder?: number;
+  /** The group as one button (a Filter button for its filters), shown once it collapses. */
+  collapsed?: ReactNode;
+  /**
+   * `scroll`: the group takes the rest of its line and scrolls sideways
+   * instead of giving way, its items whole, the side that hides more fading.
+   * Mark an applied or chosen item `data-active`: it is kept in view.
+   */
+  overflow?: "scroll";
+};
+/**
+ * A group of items in one row, a fixed gap apart. A toolbar wraps only
+ * between groups, the last first; groups with the same `wrapLine` share a
+ * line, any other takes one of its own.
+ */
+export declare function FitToolbarGroup({ className, wrapOrder, firstLine, wrapLine, collapseOrder, collapsed, overflow, children, ref, ...props }: FitToolbarGroupProps & {
+  ref?: Ref<HTMLDivElement>;
+}): import("react").JSX.Element;
+export type FitToolbarButtonProps = Omit<ButtonProps, "children" | "size"> & {
+  /** Its icon, which stays when its label gives way. A button with a `label` step needs one (or a `collapsedIcon`). */
+  icon?: ReactNode;
+  /**
+   * An icon shown only once its label has given way (the `label` step), in
+   * place of `icon`: a button that reads as text while it has room ("Clear
+   * filters") and as an icon (×) once it hasn't.
+   */
+  collapsedIcon?: ReactNode;
+  /** Its label: its accessible name and, once it has given way, its tooltip. */
+  children: ReactNode;
+  /** When its label gives way (the `label` step). */
+  labelOrder?: number;
+  /**
+   * When it shows as + alone, its icon and label gone (the `plus` step): for
+   * the primary action, after the groups have wrapped.
+   */
+  plusOrder?: number;
+  /** When it moves into More (the `more` step). */
+  moreOrder?: number;
+  /** What it is in More's menu. */
+  moreItem?: ReactNode;
+};
+/**
+ * A toolbar button that can give way: an `md` Button (ghost unless you say)
+ * with an icon and a label, an icon square with its label as a tooltip from
+ * `labelOrder` on, a + square with its label as a tooltip from `plusOrder`
+ * on, and hidden from `moreOrder` on.
+ */
+export declare function FitToolbarButton({ icon, collapsedIcon, children, labelOrder, plusOrder, moreOrder, moreItem, variant, className, ...props }: FitToolbarButtonProps): import("react").JSX.Element;
+export type FitToolbarPickerProps = Omit<PickerTriggerButtonProps, "children" | "render"> & {
+  /**
+   * The picker's trigger, which opens its popup: `<PopoverTrigger />`,
+   * `<DropdownMenuTrigger />` or a Base UI `Menu.Trigger`. The picker renders
+   * it as a toolbar button, so the page nests nothing itself.
+   */
+  trigger: ReactElement<{
+    render?: unknown;
+  }>;
+  /** Its icon, which stays when its label gives way. */
+  icon: ReactNode;
+  /** Its label ("Assignee"): part of its accessible name and, once it has given way, its tooltip. */
+  children: ReactNode;
+  /**
+   * What is chosen: the value ("In progress", "Kirby") or a count (`1`). It
+   * stays in view when the label gives way, and follows the label in the
+   * accessible name. A count (a number, or a string of digits) is set in Space
+   * Mono, as machine-written text; any other value keeps the label's font.
+   */
+  value?: ReactNode;
+  /** When its label gives way (the `label` step). */
+  labelOrder?: number;
+  /** When it moves into More (the `more` step). */
+  moreOrder?: number;
+  /** What it is in More's menu. */
+  moreItem?: ReactNode;
+};
+/**
+ * A picker's trigger as one toolbar item (a filter: Assignee, Channel): a
+ * PickerTriggerButton with an icon, a label, what is chosen and a chevron,
+ * filled `info-soft` once a value is chosen, as an applied filter is
+ * (Select › Filters). From `labelOrder` on its label gives way, while its
+ * icon, what is chosen and the chevron stay ("# ⌄", "👤 1 ⌄"); its label
+ * stays its accessible name, read before the value ("Assignee 1"), and shows
+ * as its tooltip.
+ */
+export declare function FitToolbarPicker({ trigger, icon, children, value, labelOrder, moreOrder, moreItem, className, ...props }: FitToolbarPickerProps): import("react").JSX.Element;
+//#endregion