@crewlethq/ui 0.2.0 → 0.3.0

package/dist/chunk-5SDBMKUO.js

@@ -0,0 +1,297 @@
+import { useTreeState, treeExpandable, treeLevel, treePosInSet, treeSetSize, treeItemAction, treePrevious, treeNext, treeStep } from './chunk-NTRZGNEX.js';
+import { LayerNodeBridge } from './chunk-53DVJCVW.js';
+import { LayerHost, LAYER_REPOSITION_EVENT } from './chunk-7RPGY3JE.js';
+import { focusables } from './chunk-ITHXJHBB.js';
+import { IconButton } from './chunk-F27EPQ7D.js';
+import { VisuallyHidden } from './chunk-BZFWDIV6.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './TreeGrid-NSW7VMOX.css';
+import { useState, useRef, useCallback, useLayoutEffect, useImperativeHandle } from 'react';
+import { ChevronRightGlyph } from '@crewlethq/icons/glyphs';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var LABELS = {
+  expand: (label) => `Expand ${label}`,
+  collapse: (label) => `Collapse ${label}`
+};
+function controlIn(cell) {
+  return focusables(cell).find((el) => !el.closest('[aria-hidden="true"]')) ?? null;
+}
+function TreeGrid({
+  label,
+  columns,
+  rows: forest,
+  renderCell,
+  cellHasControl,
+  onRowKey,
+  onRowKeyDown,
+  hasRowMenu,
+  addRow,
+  selectedId = null,
+  onSelect,
+  readOnly,
+  labels,
+  ref,
+  className
+}) {
+  const text = { ...LABELS, ...labels };
+  const tree = useTreeState(forest, selectedId);
+  const { model, expanded, rows, active, setActive, toggle } = tree;
+  const [column, setColumn] = useState(null);
+  const [menuFor, setMenuFor] = useState(null);
+  const current = useRef({ addRow, onSelect });
+  current.current = { addRow, onSelect };
+  const isAddRow = (id) => current.current.addRow?.(id) ?? null;
+  const rowEls = useRef(/* @__PURE__ */ new Map());
+  const refs = useRef(/* @__PURE__ */ new Map());
+  const rowRef = (id) => {
+    let callback = refs.current.get(id);
+    if (!callback) {
+      callback = (el) => {
+        if (el) rowEls.current.set(id, el);
+        else rowEls.current.delete(id);
+      };
+      refs.current.set(id, callback);
+    }
+    return callback;
+  };
+  const [request, setRequest] = useState(null);
+  const focusAt = useCallback(
+    (id, col) => {
+      if (current.current.addRow?.(id) == null) current.current.onSelect?.(id);
+      setActive(id);
+      setColumn(col);
+      setRequest({ id, column: col });
+    },
+    [setActive]
+  );
+  useLayoutEffect(() => {
+    const row = request ? rowEls.current.get(request.id) : void 0;
+    if (!request || !row) return;
+    if (request.column === null) {
+      row.focus();
+      return;
+    }
+    const cell = row.querySelector(`[aria-colindex="${request.column}"]`);
+    const control = cell ? controlIn(cell) : null;
+    (control ?? cell ?? row).focus();
+  }, [request]);
+  const focusRef = useRef(() => {
+  });
+  focusRef.current = (id) => {
+    if (!model.parent.has(id)) return;
+    tree.open(id);
+    focusAt(id, null);
+  };
+  const { expandAll, collapseAll } = tree;
+  useImperativeHandle(
+    ref,
+    () => ({ focusNode: (id) => focusRef.current(id), expandAll, collapseAll }),
+    [expandAll, collapseAll]
+  );
+  function onKeyDownCapture(event) {
+    const target = event.target;
+    const row = target.closest("[data-tree-id]");
+    if (!row) return;
+    const id = row.getAttribute("data-tree-id");
+    const onRow = target === row;
+    const cellIndex = target.closest("[role='gridcell']")?.getAttribute("aria-colindex");
+    const col = onRow || !cellIndex ? null : Number(cellIndex);
+    const add = isAddRow(id);
+    const cells = add ? add.cells : columns.length;
+    const handled = () => {
+      event.preventDefault();
+      event.stopPropagation();
+    };
+    if (onRow && add === null) {
+      if (onRowKeyDown?.(id, event)) {
+        handled();
+        return;
+      }
+      const action = treeItemAction(event);
+      if (action === "menu") {
+        if (hasRowMenu?.(id)) {
+          handled();
+          setMenuFor(id);
+        }
+        return;
+      }
+      if (action !== null) {
+        if (onRowKey?.(id, action)) handled();
+        return;
+      }
+    }
+    if (event.ctrlKey || event.metaKey || event.altKey) return;
+    const sameColumn = (next) => {
+      if (next === null) return;
+      const other = isAddRow(next);
+      const width = other ? other.cells : columns.length;
+      focusAt(next, col === null ? null : Math.min(col, width));
+    };
+    if (col !== null) {
+      switch (event.key) {
+        case "ArrowRight":
+          handled();
+          if (col < cells) focusAt(id, col + 1);
+          return;
+        case "ArrowLeft":
+          handled();
+          focusAt(id, col > 1 ? col - 1 : null);
+          return;
+        case "Home":
+          handled();
+          focusAt(id, 1);
+          return;
+        case "End":
+          handled();
+          focusAt(id, cells);
+          return;
+        case "ArrowDown":
+          handled();
+          sameColumn(treeNext(model, expanded, id));
+          return;
+        case "ArrowUp":
+          handled();
+          sameColumn(treePrevious(model, expanded, id));
+          return;
+        default:
+          return;
+      }
+    }
+    if (event.key === "ArrowRight" && !(treeExpandable(model, id) && !expanded.has(id))) {
+      handled();
+      focusAt(id, 1);
+      return;
+    }
+    if (add !== null && event.key === "Enter") {
+      handled();
+      focusAt(id, 1);
+      return;
+    }
+    const step = treeStep(tree, id, event);
+    if (step === void 0) return;
+    handled();
+    if (step === null) return;
+    if ("toggle" in step) toggle(step.toggle);
+    else focusAt(step.focus, null);
+  }
+  const [layer, setLayer] = useState(null);
+  const onScroll = () => layer?.dispatchEvent(new CustomEvent(LAYER_REPOSITION_EVENT));
+  const stop = (id, col) => id === active && column === col;
+  const grid = {
+    expanded: (id) => expanded.has(id),
+    expandable: (id) => treeExpandable(model, id),
+    toggle,
+    tabStop: stop,
+    opened: (id, col) => {
+      setActive(id);
+      setColumn(col);
+    },
+    press: (id) => ({
+      onMouseDown: (event) => {
+        event.preventDefault();
+        focusAt(id, null);
+      }
+    }),
+    menuOpen: (id) => menuFor === id,
+    setMenuOpen: (id, open) => setMenuFor((was) => open ? id : was === id ? null : was)
+  };
+  const template = columns.map((one) => one.width ?? "minmax(0, 1fr)").join(" ");
+  return /* @__PURE__ */ jsx("div", { className: cx("crewlet-tree-grid", className), children: /* @__PURE__ */ jsxs(LayerHost, { className: "crewlet-tree-grid__layer", children: [
+    /* @__PURE__ */ jsx("div", { className: "crewlet-tree-grid__scroller", onScroll, children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        role: "treegrid",
+        "aria-label": label,
+        "aria-colcount": columns.length,
+        "aria-readonly": readOnly || void 0,
+        className: "crewlet-tree-grid__grid",
+        style: { "--crewlet-tree-grid-columns": template },
+        onKeyDownCapture,
+        children: [
+          /* @__PURE__ */ jsx("div", { role: "rowgroup", className: "crewlet-tree-grid__head", children: /* @__PURE__ */ jsx("div", { role: "row", className: "crewlet-tree-grid__row", children: columns.map((one, index) => /* @__PURE__ */ jsx("div", { role: "columnheader", "aria-colindex": index + 1, children: one.headerHidden ? /* @__PURE__ */ jsx(VisuallyHidden, { children: one.header }) : one.header }, one.key)) }) }),
+          /* @__PURE__ */ jsx("div", { role: "rowgroup", children: rows.map((id) => {
+            const add = isAddRow(id);
+            const cells = add ? add.cells : columns.length;
+            const expandable = treeExpandable(model, id);
+            const open = expanded.has(id);
+            const name = model.label.get(id) ?? "";
+            return (
+              /* The row's keys are the GRID's, captured at the treegrid so
+                 one handler serves every row and reaches a cell's control
+                 first. A listener on the row itself would be a second
+                 place for them to live. */
+              /* eslint-disable-next-line jsx-a11y/click-events-have-key-events -- see above */
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  role: "row",
+                  "data-tree-id": id,
+                  ref: rowRef(id),
+                  tabIndex: id === active && column === null ? 0 : -1,
+                  "aria-level": treeLevel(model, id),
+                  "aria-setsize": treeSetSize(model, id),
+                  "aria-posinset": treePosInSet(model, id),
+                  "aria-expanded": expandable ? open : void 0,
+                  "aria-selected": add ? void 0 : id === selectedId,
+                  "aria-label": add ? add.label : void 0,
+                  className: cx("crewlet-tree-grid__row", add && "crewlet-tree-grid__row--add"),
+                  style: { "--crewlet-tree-grid-depth": treeLevel(model, id) - 1 },
+                  onClick: (event) => {
+                    if (event.target.closest("button, [role='menu']")) return;
+                    focusAt(id, null);
+                  },
+                  children: Array.from({ length: cells }, (_, index) => {
+                    const col = index + 1;
+                    return /* @__PURE__ */ jsxs(
+                      "div",
+                      {
+                        role: "gridcell",
+                        "aria-colindex": col,
+                        tabIndex: stop(id, col) && !cellHasControl?.(id, col) ? 0 : -1,
+                        className: "crewlet-tree-grid__cell",
+                        children: [
+                          col === 1 && /* THE PRESS LANDS ON THE ROW. The chevron is a
+                             pointer-only control hidden from assistive
+                             technology (the keyboard opens and closes a row
+                             with Right and Left), and focus inside a hidden
+                             subtree is focus nowhere, so the press is stopped
+                             from focusing it and the row takes the focus. */
+                          /* @__PURE__ */ jsx(
+                            "span",
+                            {
+                              className: "crewlet-tree-grid__toggle",
+                              "data-open": open ? "" : void 0,
+                              "aria-hidden": "true",
+                              ...grid.press(id),
+                              children: expandable && /* @__PURE__ */ jsx(
+                                IconButton,
+                                {
+                                  size: "sm",
+                                  label: open ? text.collapse(name) : text.expand(name),
+                                  icon: /* @__PURE__ */ jsx(ChevronRightGlyph, {}),
+                                  tabIndex: -1,
+                                  onClick: () => toggle(id)
+                                }
+                              )
+                            }
+                          ),
+                          renderCell(id, col, grid)
+                        ]
+                      },
+                      col
+                    );
+                  })
+                },
+                id
+              )
+            );
+          }) })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(LayerNodeBridge, { onNode: setLayer })
+  ] }) });
+}
+
+export { TreeGrid };

package/dist/chunk-5WS6L6FA.js

@@ -0,0 +1,114 @@
+import { avatarSquareCorner, Avatar } from './chunk-PNFASD6F.js';
+import './ImageUpload-HKFIZR6D.css';
+import { useRef } from 'react';
+import { PhotoCameraGlyph, CloseGlyph } from '@crewlethq/icons/glyphs';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+var ImageUpload = ({
+  src,
+  name,
+  size = 64,
+  shape = "square",
+  readOnly = false,
+  uploading = false,
+  accept = "image/*",
+  onSelect,
+  onRemove,
+  className = "",
+  style,
+  ...rest
+}) => {
+  const inputRef = useRef(null);
+  const interactive = !readOnly && !uploading;
+  const canRemove = Boolean(src) && !readOnly && Boolean(onRemove);
+  const openPicker = () => {
+    if (!interactive) {
+      return;
+    }
+    inputRef.current?.click();
+  };
+  const handleChange = (event) => {
+    const file = event.target.files?.[0];
+    event.target.value = "";
+    if (file) {
+      onSelect(file);
+    }
+  };
+  const handleRemove = (event) => {
+    event.stopPropagation();
+    onRemove?.();
+  };
+  const empty = !src && !readOnly;
+  const wrapperClasses = [
+    "crewlet-image-upload",
+    `crewlet-image-upload--${shape}`,
+    uploading ? "is-uploading" : "",
+    empty ? "is-empty" : "",
+    className
+  ].filter(Boolean).join(" ");
+  const sizeStyle = {
+    "--crewlet-image-upload-size": `${size}px`,
+    /*
+     * The corner comes from Avatar's own ladder, so the trigger and the
+     * overlay round exactly as the picture inside them does. A fixed step here
+     * showed the badge's corners through the overlay at every size but the one
+     * the step was chosen for.
+     */
+    "--crewlet-image-upload-corner": avatarSquareCorner(size),
+    ...style
+  };
+  const triggerLabel = uploading ? "Uploading image" : src ? "Change image" : "Upload image";
+  return /* @__PURE__ */ jsxs("div", { ...rest, className: wrapperClasses, style: sizeStyle, children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: "crewlet-image-upload__trigger",
+        onClick: openPicker,
+        disabled: !interactive,
+        "aria-label": triggerLabel,
+        "aria-busy": uploading,
+        children: [
+          /* @__PURE__ */ jsx(Avatar, { src, name, size, shape }),
+          !readOnly ? /* @__PURE__ */ jsx("span", { className: "crewlet-image-upload__overlay", "aria-hidden": true, children: uploading ? /* @__PURE__ */ jsx("span", { className: "crewlet-image-upload__spinner" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(PhotoCameraGlyph, { size: "lg" }),
+            /* @__PURE__ */ jsx("span", { className: "crewlet-image-upload__overlay-text", children: src ? "Change" : "Upload" })
+          ] }) }) : null
+        ]
+      }
+    ),
+    canRemove ? /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "crewlet-image-upload__remove",
+        onClick: handleRemove,
+        disabled: uploading,
+        "aria-label": "Remove image",
+        children: /* @__PURE__ */ jsx(CloseGlyph, { size: "sm" })
+      }
+    ) : null,
+    !readOnly ? (
+      /*
+       * The MECHANISM, not the control. The button above is what a reader
+       * reaches, names and presses; this is what it opens. Left in the
+       * accessibility tree it is a second, unnamed file control on every
+       * form that draws one, which is what axe reports it as.
+       */
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref: inputRef,
+          type: "file",
+          accept,
+          className: "crewlet-image-upload__input",
+          onChange: handleChange,
+          tabIndex: -1,
+          "aria-hidden": true
+        }
+      )
+    ) : null
+  ] });
+};
+
+export { ImageUpload };

package/dist/chunk-7EM5T4ME.js

@@ -0,0 +1,39 @@
+import { Button } from './chunk-BZYDZBAN.js';
+import './ErrorBoundary-ME36CQTA.css';
+import { Component } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var ErrorBoundary = class extends Component {
+  state = { error: null, resetKey: this.props.resetKey };
+  static getDerivedStateFromError(error) {
+    return { error: error instanceof Error ? error : new Error(String(error)) };
+  }
+  static getDerivedStateFromProps(props, state) {
+    return props.resetKey === state.resetKey ? null : { error: null, resetKey: props.resetKey };
+  }
+  componentDidCatch(error, info) {
+    this.props.onError?.(error, info);
+  }
+  reset = () => {
+    this.setState({ error: null });
+  };
+  render() {
+    const { error } = this.state;
+    if (!error) return this.props.children;
+    const {
+      fallback,
+      title = "This part of the page could not be drawn",
+      description = "Something it received did not have the shape it expects. The rest of the page keeps working, and the message below is what to include in a report.",
+      retryLabel = "Try again"
+    } = this.props;
+    if (fallback) return fallback(error, this.reset);
+    return /* @__PURE__ */ jsxs("div", { className: "crewlet-error-boundary", role: "alert", children: [
+      /* @__PURE__ */ jsx("p", { className: "crewlet-error-boundary__title", children: title }),
+      /* @__PURE__ */ jsx("p", { className: "crewlet-error-boundary__description", children: description }),
+      /* @__PURE__ */ jsx("pre", { className: "crewlet-error-boundary__message", children: error.message || error.name }),
+      /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "small", onClick: this.reset, children: retryLabel })
+    ] });
+  }
+};
+
+export { ErrorBoundary };

package/dist/chunk-7FZ53WDJ.js

@@ -0,0 +1,163 @@
+import { DisclosureAnatomy } from './chunk-5KPQ6D7N.js';
+import { useHeadingLevel } from './chunk-PQADV6P6.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './Disclosure-VKBJJIZ7.css';
+import './Accordion-ZI2WLD5C.css';
+import { createContext, useState, useCallback, useMemo, useContext, useId } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var AccordionContext = createContext(null);
+var toArray = (input) => {
+  if (input === void 0) return [];
+  return Array.isArray(input) ? input : [input];
+};
+var AccordionRoot = ({
+  type = "single",
+  collapsible = true,
+  defaultValue,
+  value,
+  onValueChange,
+  density = "default",
+  appearance = "default",
+  headingLevel,
+  className = "",
+  children,
+  ...rest
+}) => {
+  const isControlled = value !== void 0;
+  const [internal, setInternal] = useState(() => toArray(defaultValue));
+  const open = isControlled ? toArray(value) : internal;
+  const level = useHeadingLevel();
+  const resolvedLevel = headingLevel ?? level;
+  const commit = useCallback(
+    (next) => {
+      if (!isControlled) setInternal(next);
+      if (onValueChange) onValueChange(type === "single" ? next[0] ?? "" : next);
+    },
+    [isControlled, onValueChange, type]
+  );
+  const isOpen = useCallback((item) => open.includes(item), [open]);
+  const toggle = useCallback(
+    (item) => {
+      const currentlyOpen = open.includes(item);
+      if (type === "single") {
+        if (currentlyOpen) commit(collapsible ? [] : [item]);
+        else commit([item]);
+        return;
+      }
+      commit(currentlyOpen ? open.filter((entry) => entry !== item) : [...open, item]);
+    },
+    [open, type, collapsible, commit]
+  );
+  const ctx = useMemo(
+    () => ({ isOpen, toggle, headingLevel: resolvedLevel }),
+    [isOpen, toggle, resolvedLevel]
+  );
+  return /* @__PURE__ */ jsx(AccordionContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...rest,
+      className: cx(
+        "crewlet-accordion",
+        `crewlet-accordion--${appearance}`,
+        density === "compact" && "crewlet-accordion--compact",
+        className
+      ),
+      children
+    }
+  ) });
+};
+var moveFocus = (current, direction) => {
+  const root = current.closest(".crewlet-accordion");
+  if (!root) return;
+  const triggers = Array.from(
+    root.querySelectorAll(".crewlet-accordion__trigger:not([disabled])")
+  );
+  if (triggers.length === 0) return;
+  const index = triggers.indexOf(current);
+  const target = direction === "next" ? triggers[(index + 1) % triggers.length] : direction === "prev" ? triggers[(index - 1 + triggers.length) % triggers.length] : direction === "first" ? triggers[0] : triggers[triggers.length - 1];
+  target?.focus();
+};
+var AccordionItem = ({
+  value,
+  title,
+  meta,
+  count,
+  mono,
+  actions,
+  disabled = false,
+  className = "",
+  children,
+  ...rest
+}) => {
+  const ctx = useContext(AccordionContext);
+  if (!ctx) {
+    throw new Error("AccordionItem must be rendered inside an Accordion.");
+  }
+  const open = ctx.isOpen(value);
+  const rid = useId();
+  const triggerId = `${rid}-trigger`;
+  const panelId = `${rid}-panel`;
+  const onKeyDown = (event) => {
+    switch (event.key) {
+      case "ArrowDown":
+        event.preventDefault();
+        moveFocus(event.currentTarget, "next");
+        break;
+      case "ArrowUp":
+        event.preventDefault();
+        moveFocus(event.currentTarget, "prev");
+        break;
+      case "Home":
+        event.preventDefault();
+        moveFocus(event.currentTarget, "first");
+        break;
+      case "End":
+        event.preventDefault();
+        moveFocus(event.currentTarget, "last");
+        break;
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...rest,
+      className: cx("crewlet-accordion__item", open && "is-open", disabled && "is-disabled", className),
+      "data-state": open ? "open" : "closed",
+      children: [
+        /* @__PURE__ */ jsx(
+          DisclosureAnatomy,
+          {
+            open,
+            onToggle: () => ctx.toggle(value),
+            title,
+            meta,
+            count,
+            mono,
+            actions,
+            disabled,
+            headingLevel: ctx.headingLevel,
+            triggerId,
+            panelId,
+            triggerClassName: "crewlet-accordion__trigger",
+            onKeyDown
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            id: panelId,
+            role: "region",
+            "aria-labelledby": triggerId,
+            className: "crewlet-accordion__panel",
+            hidden: !open,
+            children: /* @__PURE__ */ jsx("div", { className: "crewlet-accordion__panel-inner", children })
+          }
+        )
+      ]
+    }
+  );
+};
+var Accordion = Object.assign(AccordionRoot, { Item: AccordionItem });
+
+export { Accordion, AccordionItem };