@oprt/react 0.0.0-stage → 0.2.0

package/dist/InlineEdit/InlineEdit.js

@@ -0,0 +1,261 @@
+"use client";
+
+// src/InlineEdit/InlineEdit.tsx
+import { forwardRef, useEffect, useRef, useState } from "react";
+import { cva } from "class-variance-authority";
+import clsx from "clsx";
+import { Button } from "../Button/index.js";
+import { Input } from "../Input/index.js";
+import { Textarea } from "../Textarea/index.js";
+import { joinIds, usePartIds } from "../_internal/fieldIds.js";
+import { useIsMounted } from "../_internal/useIsMounted.js";
+import { useMergedRefs } from "../_internal/mergeRefs.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var rootStyles = cva(
+  "flex min-w-0 flex-col gap-1u font-sans text-oprt-base normal-case tracking-normal text-oprt-text"
+);
+function matchesAttempt(attempt, value, label) {
+  const acceptedReplacement = value === attempt.submitted && value !== attempt.session.baseline;
+  return (label === attempt.session.label || acceptedReplacement) && (value === attempt.session.baseline || value === attempt.submitted);
+}
+var InlineEdit = forwardRef(
+  ({ label, value, onSave, disabled = false, readOnly = false, validate, className, ...props }, ref) => {
+    const [editing, setEditing] = useState(false);
+    const [draft, setDraft] = useState(value);
+    const [error, setError] = useState(null);
+    const [pending, setPending] = useState(false);
+    const [multiline, setMultiline] = useState(false);
+    const [returnFocus, setReturnFocus] = useState(null);
+    const [changedTo, setChangedTo] = useState(null);
+    const rootRef = useRef(null);
+    const mergedRef = useMergedRefs(rootRef, ref);
+    const inputRef = useRef(null);
+    const editRef = useRef(null);
+    const refocusInput = useRef(false);
+    const session = useRef(null);
+    const request = useRef(null);
+    const composing = useRef(false);
+    const isMounted = useIsMounted();
+    const latest = useRef({ label, value, disabled, readOnly });
+    latest.current = { label, value, disabled, readOnly };
+    const ids = usePartIds(["error", "changed"]);
+    useEffect(
+      () => () => {
+        session.current = null;
+        request.current = null;
+      },
+      []
+    );
+    useEffect(() => {
+      const current = session.current;
+      if (!current) return;
+      const attempt = request.current;
+      if (disabled || readOnly || attempt && !matchesAttempt(attempt, value, label)) {
+        session.current = null;
+        request.current = null;
+        setEditing(false);
+        setPending(false);
+        setError(null);
+        setReturnFocus(null);
+        setChangedTo(null);
+        return;
+      }
+      if (attempt || current.label === label && current.baseline === value) return;
+      session.current = { baseline: value, label };
+      if (current.baseline !== value) setChangedTo(value);
+    }, [value, label, disabled, readOnly]);
+    useEffect(() => {
+      if (editing) inputRef.current?.focus();
+    }, [editing]);
+    useEffect(() => {
+      if (pending || !refocusInput.current) return;
+      refocusInput.current = false;
+      const active = document.activeElement;
+      if (active === null || active === document.body || rootRef.current?.contains(active))
+        inputRef.current?.focus();
+    }, [pending]);
+    useEffect(() => {
+      if (!returnFocus || editing) return;
+      if (!disabled && !readOnly && matchesAttempt(returnFocus, value, label))
+        editRef.current?.focus();
+      setReturnFocus(null);
+    }, [returnFocus, editing, disabled, readOnly, label, value]);
+    function start() {
+      if (disabled || readOnly) return;
+      session.current = { baseline: value, label };
+      composing.current = false;
+      setMultiline(/[\r\n]/.test(value));
+      setDraft(value);
+      setError(null);
+      setChangedTo(null);
+      setEditing(true);
+    }
+    function cancel() {
+      if (request.current || !session.current) return;
+      setReturnFocus({ session: session.current, submitted: value });
+      session.current = null;
+      setEditing(false);
+      setError(null);
+      setChangedTo(null);
+    }
+    function isCurrent(attempt) {
+      const current = latest.current;
+      return isMounted() && request.current === attempt && session.current === attempt.session && !current.disabled && !current.readOnly && matchesAttempt(attempt, current.value, current.label);
+    }
+    async function save() {
+      if (request.current || !session.current || disabled || readOnly || composing.current) return;
+      const validationError = validate?.(draft);
+      if (validationError) {
+        setError(validationError);
+        inputRef.current?.focus();
+        return;
+      }
+      const attempt = { session: session.current, submitted: draft };
+      request.current = attempt;
+      setPending(true);
+      setError(null);
+      try {
+        await onSave(draft);
+        if (!isCurrent(attempt)) return;
+        request.current = null;
+        session.current = null;
+        setPending(false);
+        setEditing(false);
+        setChangedTo(null);
+        setReturnFocus(attempt);
+      } catch (reason) {
+        if (!isCurrent(attempt)) return;
+        request.current = null;
+        refocusInput.current = true;
+        setPending(false);
+        setError(
+          reason instanceof Error && reason.message ? reason.message : "Could not save. Try again."
+        );
+      }
+    }
+    const Control = multiline ? Textarea : Input;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ...props,
+        ref: mergedRef,
+        className: clsx(rootStyles(), className),
+        "aria-busy": pending || void 0,
+        children: editing ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-1u", children: [
+            /* @__PURE__ */ jsx(
+              Control,
+              {
+                ref: (node) => {
+                  inputRef.current = node;
+                },
+                "aria-label": label,
+                value: draft,
+                disabled: pending || disabled || readOnly,
+                "aria-invalid": Boolean(error),
+                "aria-describedby": joinIds(changedTo !== null && ids.changed, error && ids.error),
+                className: "min-w-0 flex-1",
+                onChange: (event) => {
+                  setDraft(event.target.value);
+                  setError(null);
+                },
+                onCompositionStart: () => {
+                  composing.current = true;
+                },
+                onCompositionEnd: () => {
+                  composing.current = false;
+                },
+                onKeyDown: (event) => {
+                  if (composing.current || event.nativeEvent.isComposing || event.keyCode === 229)
+                    return;
+                  if (event.key === "Enter" && !multiline) {
+                    event.preventDefault();
+                    void save();
+                  } else if (event.key === "Escape" && !pending) {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    cancel();
+                  }
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                size: "sm",
+                "aria-label": `Save ${label}`,
+                disabled: pending || disabled || readOnly,
+                onClick: () => {
+                  void save();
+                },
+                children: "Save"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                size: "sm",
+                variant: "secondary",
+                "aria-label": `Cancel ${label}`,
+                disabled: pending,
+                onClick: cancel,
+                children: "Cancel"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(
+            "p",
+            {
+              id: ids.changed,
+              className: clsx(
+                "m-0 oprt-wrap-anywhere text-oprt-base text-oprt-text-dim",
+                changedTo === null && "sr-only"
+              ),
+              role: "status",
+              children: changedTo !== null && /* @__PURE__ */ jsxs(Fragment, { children: [
+                "Changed to \u201C",
+                changedTo || "\u2014",
+                "\u201D while you were editing."
+              ] })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: clsx("m-0 text-oprt-base text-oprt-text-dim", !pending && "sr-only"),
+              role: "status",
+              children: pending && "Saving\u2026"
+            }
+          ),
+          error && /* @__PURE__ */ jsx(
+            "p",
+            {
+              id: ids.error,
+              className: "m-0 oprt-wrap-anywhere text-oprt-base text-oprt-error",
+              role: "alert",
+              children: error
+            }
+          )
+        ] }) : /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-2u", children: [
+          /* @__PURE__ */ jsx("span", { className: "min-w-0 whitespace-break-spaces oprt-wrap-anywhere", children: value || "\u2014" }),
+          !readOnly && /* @__PURE__ */ jsx(
+            Button,
+            {
+              ref: editRef,
+              size: "sm",
+              variant: "ghost",
+              "aria-label": `Edit ${label}`,
+              disabled,
+              onClick: start,
+              children: "Edit"
+            }
+          )
+        ] })
+      }
+    );
+  }
+);
+InlineEdit.displayName = "InlineEdit";
+export {
+  InlineEdit
+};

package/dist/InlineEdit/InlineEdit.manifest.js

@@ -0,0 +1,40 @@
+// src/InlineEdit/InlineEdit.manifest.ts
+var InlineEditManifest = {
+  InlineEdit: {
+    description: "Controlled inline text editing with explicit save, cancel and recoverable validation or save errors.",
+    props: {
+      label: {
+        type: "string",
+        required: true,
+        description: "Names the editor and its Edit, Save and Cancel actions."
+      },
+      value: {
+        type: "string",
+        required: true,
+        description: "Authoritative displayed value. Case is preserved. A change while the operator is typing keeps the draft and shows a status line naming the new value."
+      },
+      onSave: {
+        type: "function",
+        required: true,
+        description: "Receives the exact draft; return a promise for asynchronous acceptance and reject to retain the draft with an error."
+      },
+      validate: {
+        type: "function",
+        description: "Returns an error message or undefined before saving."
+      },
+      disabled: { type: "boolean", default: false },
+      readOnly: {
+        type: "boolean",
+        default: false,
+        description: "Displays the value without an Edit action."
+      },
+      className: { type: "string" }
+    },
+    composable_with: ["ContextMenu", "DataGrid", "FormSection"],
+    never_inside: ["Button"],
+    example: '<InlineEdit label="Equipment name" value={name} onSave={saveName} validate={(value) => value.trim() ? undefined : "Enter a name."} />'
+  }
+};
+export {
+  InlineEditManifest
+};

package/dist/InlineEdit/index.js

@@ -0,0 +1,7 @@
+// src/InlineEdit/index.ts
+import { InlineEdit } from "./InlineEdit.js";
+import { InlineEditManifest } from "./InlineEdit.manifest.js";
+export {
+  InlineEdit,
+  InlineEditManifest
+};

package/dist/Input/Input.js

@@ -0,0 +1,126 @@
+"use client";
+
+// src/Input/Input.tsx
+import { cva } from "class-variance-authority";
+import { forwardRef } from "react";
+import clsx from "clsx";
+import { InputManifest } from "./Input.manifest.js";
+import { devValidate } from "../_internal/devValidate.js";
+import { useFieldWiring } from "../_internal/fieldIds.js";
+import { FORCED_FOCUS_WITHIN, FORCED_NO_RESTING_OUTLINE } from "../_internal/controlStyles.js";
+import { Calendar, Clock } from "@oprt/icons";
+import { jsx, jsxs } from "react/jsx-runtime";
+var wrapperStyles = cva(
+  // Disabled looks like DC-9's disabled buttons (coordinator ruling on DC-B04-2): dim text, the
+  // control outline and a muted fill, with no fade of the whole field, which took an affix to
+  // 2.14:1 (Input-B2M-5); the outline also replaces an invalid field's red, as for danger buttons.
+  "inline-flex min-w-0 max-w-full items-center gap-1u border bg-oprt-surface-2 normal-case transition-colors duration-oprt-fast focus-within:shadow-oprt-focus has-[input:disabled]:cursor-not-allowed has-[input:disabled]:bg-oprt-surface-3 has-[input:disabled]:border-oprt-border-control",
+  {
+    variants: {
+      invalid: {
+        true: "border-oprt-error focus-within:border-oprt-error",
+        // The control outline (design call DC-3); focus in the focus token, as the siblings do.
+        false: "border-oprt-border-control focus-within:border-oprt-border-focus"
+      },
+      // The height is a minimum: a long prefix or suffix wraps in its own column and the field
+      // grows taller (coordinator ruling on DC-B04-3, Input-B2M-1..3), while a one-line field keeps
+      // exactly its token height, as DC-8 rules for buttons. The value's 24px line fits md and lg;
+      // sm caps it inside its 2px of border, as the fixed height did. A capped input cannot stretch
+      // to a field that grew taller, and a stretched item that hits its cap sits at the top, so sm
+      // centers it with auto margins instead (Stage 1 final review, I-2).
+      size: {
+        sm: "min-h-oprt-sm px-2u [&_input]:my-auto [&_input]:max-h-[calc(var(--oprt-height-sm)-2px)]",
+        md: "min-h-oprt-md px-2u",
+        lg: "min-h-oprt-lg px-3u"
+      }
+    },
+    defaultVariants: { invalid: false, size: "md" }
+  }
+);
+var inputStyles = cva(
+  // The value keeps about ten characters beside a long affix, and less only in a container
+  // narrower than that (Input-B2M-1..3); the field around it can shrink in a narrow host (Input-W0-1).
+  // It stretches to the field's height, so the whole field is the click and measured target and
+  // not the one line of text inside it (operations-map-R4); a text input centers its text itself.
+  "peer min-w-[min(10ch,100%)] flex-1 self-stretch bg-transparent border-0 outline-hidden font-sans font-medium text-oprt-md text-oprt-text placeholder:text-oprt-text-placeholder disabled:placeholder:text-oprt-text-dim disabled:cursor-not-allowed disabled:text-oprt-text-dim"
+);
+var Input = forwardRef((allProps, ref) => {
+  const {
+    className,
+    size,
+    prefix,
+    suffix,
+    promptSymbol,
+    type = "text",
+    id,
+    invalid: invalidProp,
+    required: requiredProp,
+    "aria-describedby": ariaDescribedBy,
+    "aria-invalid": ariaInvalid,
+    ...props
+  } = allProps;
+  const {
+    id: finalId,
+    describedBy,
+    invalid,
+    ariaInvalid: finalAriaInvalid,
+    required
+  } = useFieldWiring(
+    {
+      id,
+      "aria-describedby": ariaDescribedBy,
+      "aria-invalid": ariaInvalid,
+      invalid: invalidProp,
+      required: requiredProp
+    },
+    { label: "for" }
+  );
+  if (process.env.NODE_ENV !== "production") {
+    devValidate("Input", InputManifest.Input.props, { ...allProps });
+  }
+  const temporal = type === "date" || type === "time" || type === "datetime-local";
+  const PickerIcon = type === "time" ? Clock : Calendar;
+  const control = /* @__PURE__ */ jsx(
+    "input",
+    {
+      ref,
+      id: finalId,
+      type,
+      "aria-invalid": finalAriaInvalid,
+      "aria-describedby": describedBy,
+      required,
+      className: clsx(
+        inputStyles(),
+        // Forced colors paint outline-hidden's transparent outline; the field draws focus instead.
+        FORCED_NO_RESTING_OUTLINE,
+        temporal && "h-full w-full pr-3u [color-scheme:dark] [&::-webkit-calendar-picker-indicator]:absolute [&::-webkit-calendar-picker-indicator]:right-0 [&::-webkit-calendar-picker-indicator]:top-1/2 [&::-webkit-calendar-picker-indicator]:-translate-y-1/2 [&::-webkit-calendar-picker-indicator]:m-0 [&::-webkit-calendar-picker-indicator]:h-oprt-sm [&::-webkit-calendar-picker-indicator]:w-oprt-sm [&::-webkit-calendar-picker-indicator]:p-0 [&::-webkit-calendar-picker-indicator]:opacity-0 [&::-webkit-calendar-picker-indicator]:cursor-pointer"
+      ),
+      ...props
+    }
+  );
+  return (
+    // In forced colors, which drop the focus shadow and flatten the border, focus anywhere in the
+    // field is a 2px CanvasText outline around it, as for ComboBox (Input-B5-1).
+    /* @__PURE__ */ jsxs("div", { className: clsx(wrapperStyles({ invalid, size }), FORCED_FOCUS_WITHIN, className), children: [
+      promptSymbol && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "text-oprt-accent font-mono text-oprt-md", children: ">" }),
+      prefix && /* @__PURE__ */ jsx("span", { className: "min-w-0 oprt-wrap-anywhere text-oprt-text-dim", children: prefix }),
+      temporal ? /* @__PURE__ */ jsxs("div", { className: "relative flex min-w-0 flex-1 items-center self-stretch", children: [
+        control,
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "data-oprt-picker-icon": "",
+            "aria-hidden": "true",
+            className: "pointer-events-none absolute inset-y-0 right-0 flex w-3u items-center justify-center bg-oprt-surface-2 text-oprt-text-dim peer-disabled:bg-oprt-surface-3",
+            children: /* @__PURE__ */ jsx(PickerIcon, { size: 16 })
+          }
+        )
+      ] }) : control,
+      suffix && /* @__PURE__ */ jsx("span", { className: "min-w-0 oprt-wrap-anywhere text-oprt-text-dim", children: suffix })
+    ] })
+  );
+});
+Input.displayName = "Input";
+export {
+  Input
+};

package/dist/Input/Input.manifest.js

@@ -0,0 +1,49 @@
+// src/Input/Input.manifest.ts
+var InputManifest = {
+  Input: {
+    description: "Single-line input with optional prefix/suffix slots and prompt-symbol variant. Date and time fields preserve native editing and picker interaction with decorative OPERATOR Calendar/Clock icons and a dark native color scheme.",
+    props: {
+      type: {
+        type: "enum",
+        values: [
+          "text",
+          "number",
+          "password",
+          "search",
+          "email",
+          "tel",
+          "url",
+          "date",
+          "time",
+          "datetime-local",
+          "month",
+          "week"
+        ],
+        default: "text",
+        description: "The text-like and date-like input types. TypeScript accepts any HTML input type, but one that is not a text field (checkbox, radio, file, range, color, hidden, button, submit, reset, image) breaks the field's look and is reported in development; use Checkbox, RadioGroup, Slider or FileUpload instead."
+      },
+      size: { type: "enum", values: ["sm", "md", "lg"], default: "md" },
+      placeholder: { type: "string" },
+      disabled: { type: "boolean", default: false },
+      invalid: {
+        type: "boolean",
+        description: "Marks the field invalid: an error border and aria-invalid. Wins over aria-invalid, which wins over a surrounding Field's error, as on Textarea."
+      },
+      promptSymbol: { type: "boolean", default: false },
+      prefix: {
+        type: "node",
+        description: "ReactNode rendered before the input (icon, currency symbol, etc.)."
+      },
+      suffix: {
+        type: "node",
+        description: "ReactNode rendered after the input (icon, clear button, unit, etc.). For interactive elements use an accessible Button or icon-button."
+      }
+    },
+    composable_with: ["Field"],
+    never_inside: ["Button", "Badge"],
+    example: '<Field label="ENDPOINT">\n  <Input placeholder="api.system.io" />\n</Field>'
+  }
+};
+export {
+  InputManifest
+};

package/dist/Input/index.js

@@ -0,0 +1,7 @@
+// src/Input/index.ts
+import { Input } from "./Input.js";
+import { InputManifest } from "./Input.manifest.js";
+export {
+  Input,
+  InputManifest
+};

package/dist/Inspector/Inspector.js

@@ -0,0 +1,63 @@
+"use client";
+
+// src/Inspector/Inspector.tsx
+import { forwardRef, useRef } from "react";
+import { cva } from "class-variance-authority";
+import clsx from "clsx";
+import { Button } from "../Button/Button.js";
+import { joinIds, usePartIds } from "../_internal/fieldIds.js";
+import { useMergedRefs } from "../_internal/mergeRefs.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var inspectorStyles = cva(
+  "flex min-w-0 flex-col gap-2u break-words border border-oprt-border bg-oprt-surface-1 p-2u font-sans text-oprt-base normal-case text-oprt-text"
+);
+var Inspector = forwardRef(
+  ({
+    open = true,
+    title,
+    description,
+    onClose,
+    children,
+    className,
+    "aria-labelledby": labelledBy,
+    "aria-describedby": describedBy,
+    ...props
+  }, ref) => {
+    const root = useRef(null);
+    const setRef = useMergedRefs(root, ref);
+    const ids = usePartIds(["title", "description"], {
+      readRendered: () => root.current?.getAttribute("data-oprt-ids")
+    });
+    if (!open) return null;
+    return /* @__PURE__ */ jsxs(
+      "aside",
+      {
+        ...props,
+        ref: setRef,
+        "data-oprt-ids": ids.base,
+        "aria-labelledby": joinIds(ids.title, labelledBy),
+        "aria-describedby": joinIds(description ? ids.description : void 0, describedBy),
+        className: clsx(inspectorStyles(), className),
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-start justify-between gap-1u", children: [
+            /* @__PURE__ */ jsx(
+              "h3",
+              {
+                id: ids.title,
+                className: "m-0 min-w-0 text-oprt-md font-medium normal-case oprt-wrap-anywhere",
+                children: title
+              }
+            ),
+            onClose && /* @__PURE__ */ jsx(Button, { variant: "tertiary", size: "sm", onClick: onClose, "aria-label": `Close ${title}`, children: "Close" })
+          ] }),
+          description && /* @__PURE__ */ jsx("p", { id: ids.description, className: "m-0 min-w-0 text-oprt-text-dim oprt-wrap-anywhere", children: description }),
+          children
+        ]
+      }
+    );
+  }
+);
+Inspector.displayName = "Inspector";
+export {
+  Inspector
+};

package/dist/Inspector/Inspector.manifest.js

@@ -0,0 +1,35 @@
+// src/Inspector/Inspector.manifest.ts
+var InspectorManifest = {
+  Inspector: {
+    description: "Modeless named details aside that leaves background content and focus navigation available.",
+    props: {
+      open: {
+        type: "boolean",
+        default: true
+      },
+      title: {
+        type: "string",
+        required: true,
+        description: "Accessible title; entity names preserve supplied casing."
+      },
+      description: {
+        type: "string"
+      },
+      onClose: {
+        type: "function",
+        description: "Shows Close when supplied. The caller manages closing state and return focus."
+      }
+    },
+    slots: {
+      children: {
+        type: "ReactNode"
+      }
+    },
+    composable_with: ["AppShell", "SplitPane", "OperationalStatus", "ActionStatus"],
+    never_inside: ["Button"],
+    example: "<Inspector open={open} title={asset.name} onClose={closeAndRestoreFocus}><OperationalStatus state={asset.status} source={source} updatedAt={asset.updatedAt} /></Inspector>"
+  }
+};
+export {
+  InspectorManifest
+};

package/dist/Inspector/index.js

@@ -0,0 +1,7 @@
+// src/Inspector/index.ts
+import { Inspector } from "./Inspector.js";
+import { InspectorManifest } from "./Inspector.manifest.js";
+export {
+  Inspector,
+  InspectorManifest
+};