@crewlethq/ui 0.2.0 → 0.3.0

package/dist/chunk-5IMACPJS.js

@@ -0,0 +1,495 @@
+import { useListbox, useOptionKeys } from './chunk-GTOUGQQK.js';
+import { useLayerContainer, viewportBounds, outsideBounds, placePopup, LAYER_GAP, LAYER_REPOSITION_EVENT } from './chunk-7RPGY3JE.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './Select-2X77FSWR.css';
+import { forwardRef, useId, useMemo, useState, useRef, useCallback, useEffect, useLayoutEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { KeyboardArrowDownGlyph, CheckGlyph, SearchGlyph } from '@crewlethq/icons/glyphs';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var same = (a, b) => String(a) === String(b);
+var optionText = (option) => option.text ?? (typeof option.label === "string" ? option.label : String(option.value));
+var Select = forwardRef(function Select2({
+  id,
+  mode = "listbox",
+  value,
+  onChange,
+  options,
+  placeholder = "Select an option",
+  disabled = false,
+  className = "",
+  menuClassName = "",
+  size = "md",
+  width = "full",
+  align = "left",
+  active = false,
+  error = false,
+  ariaLabel,
+  searchable = false,
+  searchPlaceholder = "Search",
+  multiple = false,
+  renderTrigger,
+  renderOption,
+  renderMultiLabel,
+  emptyMessage = "No matches",
+  ...native
+}, ref) {
+  const generatedId = useId();
+  const rootId = id ?? generatedId;
+  const classes = cx(className, width === "auto" && "crewlet-select--auto");
+  const chosen = useMemo(() => {
+    if (multiple) return Array.isArray(value) ? value : [];
+    if (value === void 0 || value === null) return [];
+    if (Array.isArray(value)) return value;
+    if (value === "" && !options.some((option) => String(option.value) === "")) return [];
+    return [value];
+  }, [value, multiple, options]);
+  if (mode === "native") {
+    return /* @__PURE__ */ jsx(
+      NativeSelect,
+      {
+        ref,
+        id: rootId,
+        value: chosen[0],
+        onChange,
+        options,
+        placeholder,
+        disabled,
+        className: classes,
+        size,
+        active,
+        error,
+        ariaLabel,
+        ...native
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    ListboxSelect,
+    {
+      ref,
+      id: rootId,
+      chosen,
+      onChange,
+      options,
+      placeholder,
+      disabled,
+      className: classes,
+      menuClassName,
+      size,
+      align,
+      active,
+      error,
+      ariaLabel,
+      searchable,
+      searchPlaceholder,
+      multiple,
+      renderTrigger,
+      renderOption,
+      renderMultiLabel,
+      emptyMessage,
+      describedBy: native["aria-describedby"],
+      required: native.required,
+      focusOnMount: native.autoFocus,
+      name: native.name,
+      onBlur: native.onBlur,
+      onFocus: native.onFocus
+    }
+  );
+});
+var NativeSelect = forwardRef(function NativeSelect2({ id, value, onChange, options, placeholder, disabled, className, size, active, error, ariaLabel, ...rest }, ref) {
+  const current = value ?? "";
+  const offersEmpty = options.some((option) => String(option.value) === "");
+  const known = options.some((option) => same(option.value, current));
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cx(
+        "crewlet-select",
+        "crewlet-select--native",
+        `crewlet-select--${size}`,
+        active && "is-active",
+        error && "is-error",
+        disabled && "is-disabled",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "select",
+          {
+            ref,
+            id,
+            className: "crewlet-select__native",
+            value: current,
+            disabled,
+            "aria-label": ariaLabel,
+            "aria-invalid": error || void 0,
+            onChange: (event) => {
+              const next = event.target.value;
+              const option = options.find((candidate) => String(candidate.value) === next);
+              onChange?.(next, option ?? { value: next, label: next });
+            },
+            ...rest,
+            children: [
+              current === "" && !offersEmpty ? /* @__PURE__ */ jsx("option", { value: "", children: placeholder }) : null,
+              current !== "" && !known ? /* @__PURE__ */ jsx("option", { value: current, children: String(current) }) : null,
+              options.map((option) => /* @__PURE__ */ jsx("option", { value: option.value, disabled: option.disabled, children: optionText(option) }, String(option.value)))
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(KeyboardArrowDownGlyph, { className: "crewlet-select__chevron", size: "sm" })
+      ]
+    }
+  );
+});
+var ListboxSelect = forwardRef(function ListboxSelect2({
+  id,
+  chosen,
+  onChange,
+  options,
+  placeholder,
+  disabled,
+  className,
+  menuClassName,
+  size,
+  align,
+  active,
+  error,
+  ariaLabel,
+  searchable,
+  searchPlaceholder,
+  multiple,
+  renderTrigger,
+  renderOption,
+  renderMultiLabel,
+  emptyMessage,
+  describedBy,
+  required,
+  focusOnMount,
+  name,
+  onBlur,
+  onFocus
+}, ref) {
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState("");
+  const [place, setPlace] = useState(null);
+  const trigger = useRef(null);
+  const panel = useRef(null);
+  const list = useRef(null);
+  const search = useRef(null);
+  const container = useLayerContainer();
+  const isChosen = useCallback(
+    (candidate) => chosen.some((held) => same(held, candidate)),
+    [chosen]
+  );
+  const needle = query.trim().toLowerCase();
+  const offered = useMemo(() => {
+    if (!searchable || needle === "") return options;
+    return options.filter((option) => {
+      if (optionText(option).toLowerCase().includes(needle)) return true;
+      const description = typeof option.description === "string" ? option.description : "";
+      return description.toLowerCase().includes(needle);
+    });
+  }, [options, searchable, needle]);
+  const groups = useMemo(() => {
+    const out = [];
+    for (const option of offered) {
+      const group = out.find((candidate) => candidate.name === option.group);
+      if (group) group.items.push(option);
+      else out.push({ name: option.group, items: [option] });
+    }
+    return out;
+  }, [offered]);
+  const flat = useMemo(() => groups.flatMap((group) => group.items), [groups]);
+  const close = useCallback((returnFocus) => {
+    setOpen(false);
+    setQuery("");
+    if (returnFocus) trigger.current?.focus();
+  }, []);
+  const commit = useCallback(
+    (index2) => {
+      const option = flat[index2];
+      if (!option || option.disabled) return;
+      if (multiple) {
+        const next = isChosen(option.value) ? chosen.filter((held) => !same(held, option.value)) : [...chosen, option.value];
+        onChange?.(next, option);
+        return;
+      }
+      onChange?.(option.value, option);
+      close(true);
+    },
+    [chosen, close, flat, isChosen, multiple, onChange]
+  );
+  const listbox = useListbox({
+    id,
+    open,
+    count: flat.length,
+    onCommit: commit,
+    onClose: () => close(true),
+    // Tab is a form control's own key here: it leaves the field. The list
+    // closes with it rather than taking the highlighted row on the way out.
+    tabCommits: false
+  });
+  const keys = useOptionKeys({
+    listbox,
+    count: flat.length,
+    disabled: (index2) => flat[index2]?.disabled === true,
+    ...searchable ? {} : {
+      textOf: (index2) => {
+        const option = flat[index2];
+        return option ? optionText(option) : "";
+      }
+    }
+  });
+  useEffect(() => {
+    if (!open) return;
+    listbox.setActive(keys.opening(flat.findIndex((option) => isChosen(option.value))));
+  }, [open]);
+  useEffect(() => {
+    if (open && searchable) search.current?.focus();
+  }, [open, searchable]);
+  useEffect(() => {
+    if (focusOnMount) trigger.current?.focus();
+  }, [focusOnMount]);
+  useEffect(() => {
+    const box = list.current;
+    const row = box?.querySelector('[data-active="true"]');
+    if (!box || !row) return;
+    const bounds = box.getBoundingClientRect();
+    const spot = row.getBoundingClientRect();
+    if (spot.top < bounds.top) box.scrollTop -= bounds.top - spot.top;
+    else if (spot.bottom > bounds.bottom) box.scrollTop += spot.bottom - bounds.bottom;
+  }, [listbox.active, flat.length, open]);
+  const position = useCallback(() => {
+    const at = trigger.current;
+    const box = panel.current;
+    if (!at || !box || !container) return;
+    const inHost = container !== document.body;
+    const host = inHost ? container.getBoundingClientRect() : viewportBounds();
+    const rect = at.getBoundingClientRect();
+    const width = rect.width;
+    const local = {
+      x: (align === "right" ? rect.right - width : rect.left) - (inHost ? host.x : 0),
+      y: rect.top - (inHost ? host.y : 0),
+      width: rect.width,
+      height: rect.height
+    };
+    const whole = { x: 0, y: 0, width: host.width, height: host.height };
+    if (outsideBounds(local, whole)) {
+      close(false);
+      return;
+    }
+    const spot = placePopup(
+      local,
+      { width, height: box.getBoundingClientRect().height },
+      { x: LAYER_GAP, y: LAYER_GAP, width: host.width - 2 * LAYER_GAP, height: host.height - 2 * LAYER_GAP }
+    );
+    setPlace(
+      (was) => was && was.left === spot.left && was.top === spot.top && was.width === width ? was : { left: spot.left, top: spot.top, width }
+    );
+  }, [align, close, container]);
+  useLayoutEffect(() => {
+    if (!open) {
+      setPlace(null);
+      return;
+    }
+    position();
+    const onLayout = () => position();
+    container?.addEventListener(LAYER_REPOSITION_EVENT, onLayout);
+    window.addEventListener("resize", onLayout);
+    window.addEventListener("scroll", onLayout, true);
+    return () => {
+      container?.removeEventListener(LAYER_REPOSITION_EVENT, onLayout);
+      window.removeEventListener("resize", onLayout);
+      window.removeEventListener("scroll", onLayout, true);
+    };
+  }, [open, container, position]);
+  function onKeyDown(event) {
+    if (disabled) return;
+    if (!open) {
+      if (event.key === "ArrowDown" || event.key === "ArrowUp" || event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        setOpen(true);
+      }
+      return;
+    }
+    if (event.key === "Tab") {
+      close(searchable);
+      return;
+    }
+    if (keys.onKeyDown(event)) return;
+    listbox.onKeyDown(event);
+  }
+  const byValue = new Map(options.map((option) => [String(option.value), option]));
+  const selectedOptions = chosen.map(
+    (held) => byValue.get(String(held)) ?? { value: held, label: String(held) }
+  );
+  const single = selectedOptions[0] ?? null;
+  let label = placeholder;
+  let hasValue = selectedOptions.length > 0;
+  if (multiple && renderMultiLabel) {
+    label = renderMultiLabel(selectedOptions);
+  } else if (multiple && selectedOptions.length > 1) {
+    label = `${selectedOptions.length} selected`;
+  } else if (single) {
+    label = single.label;
+  } else {
+    hasValue = false;
+  }
+  const listId = listbox.listId;
+  const activeId = open && flat.length > 0 ? listbox.optionId(listbox.active) : void 0;
+  const comboOnTrigger = !searchable;
+  let index = -1;
+  const rows = groups.map((group, position2) => {
+    const items = group.items.map((option) => {
+      index += 1;
+      const at = index;
+      const selected = isChosen(option.value);
+      const highlighted = at === listbox.active;
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          id: listbox.optionId(at),
+          role: "option",
+          "aria-selected": selected,
+          "aria-disabled": option.disabled || void 0,
+          "data-active": highlighted || void 0,
+          className: cx(
+            "crewlet-listbox__option",
+            "crewlet-select__option",
+            selected && "is-selected",
+            highlighted && "is-highlight",
+            option.disabled && "is-disabled"
+          ),
+          ...option.disabled ? {} : listbox.optionHandlers(at),
+          children: renderOption ? renderOption(option, { active: highlighted, selected }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("span", { className: "crewlet-select__option-tick", "aria-hidden": "true", children: selected ? /* @__PURE__ */ jsx(CheckGlyph, { size: "sm" }) : null }),
+            /* @__PURE__ */ jsxs("span", { className: "crewlet-select__option-body", children: [
+              /* @__PURE__ */ jsx("span", { className: "crewlet-select__option-label", children: option.label }),
+              option.description ? /* @__PURE__ */ jsx("span", { className: "crewlet-select__option-desc", children: option.description }) : null
+            ] })
+          ] })
+        },
+        String(option.value)
+      );
+    });
+    if (group.name === void 0) return items;
+    const headingId = `${id}-group-${position2}`;
+    return /* @__PURE__ */ jsxs("div", { role: "group", "aria-labelledby": headingId, className: "crewlet-select__group", children: [
+      /* @__PURE__ */ jsx("div", { className: "crewlet-listbox__heading", id: headingId, role: "presentation", children: group.name }),
+      items
+    ] }, group.name);
+  });
+  const panelNode = open ? /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: (el) => {
+        panel.current = el;
+      },
+      className: cx(
+        "crewlet-select__menu",
+        `crewlet-select__menu--${size}`,
+        container !== null && container !== document.body ? "crewlet-select__menu--in-host" : "crewlet-select__menu--fixed",
+        menuClassName
+      ),
+      style: place ? { left: place.left, top: place.top, width: place.width } : (
+        // Laid out but not painted, so its own height can be measured
+        // before it is placed and no reader sees it in a corner first.
+        { visibility: "hidden" }
+      ),
+      role: "presentation",
+      onPointerDown: (event) => event.stopPropagation(),
+      children: [
+        searchable ? /* @__PURE__ */ jsxs("div", { className: "crewlet-select__search", children: [
+          /* @__PURE__ */ jsx(SearchGlyph, { size: "sm" }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: search,
+              type: "text",
+              className: "crewlet-select__search-input",
+              role: "combobox",
+              "aria-autocomplete": "list",
+              "aria-expanded": true,
+              "aria-controls": listId,
+              "aria-activedescendant": activeId,
+              "aria-label": searchPlaceholder,
+              "aria-required": required,
+              placeholder: searchPlaceholder,
+              value: query,
+              onChange: (event) => setQuery(event.target.value),
+              onKeyDown
+            }
+          )
+        ] }) : null,
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: (el) => {
+              list.current = el;
+              listbox.listRef(el);
+            },
+            id: listId,
+            className: cx("crewlet-listbox", "crewlet-select__list"),
+            role: "listbox",
+            "aria-label": ariaLabel ?? placeholder,
+            "aria-multiselectable": multiple || void 0,
+            children: flat.length === 0 ? /* @__PURE__ */ jsx("div", { className: "crewlet-listbox__empty", children: emptyMessage }) : rows
+          }
+        )
+      ]
+    }
+  ) : null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cx(
+        "crewlet-select",
+        `crewlet-select--${size}`,
+        open && "is-open",
+        active && "is-active",
+        error && "is-error",
+        disabled && "is-disabled",
+        className
+      ),
+      ref: listbox.anchorRef,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            ref: (el) => {
+              trigger.current = el;
+              if (typeof ref === "function") ref(el);
+              else if (ref) ref.current = el;
+            },
+            type: "button",
+            id,
+            name,
+            className: "crewlet-select__trigger",
+            role: comboOnTrigger ? "combobox" : void 0,
+            "aria-haspopup": "listbox",
+            "aria-expanded": open,
+            "aria-controls": open ? listId : void 0,
+            "aria-activedescendant": comboOnTrigger ? activeId : void 0,
+            "aria-label": ariaLabel,
+            "aria-describedby": describedBy,
+            "aria-invalid": error || void 0,
+            "aria-required": comboOnTrigger ? required : void 0,
+            disabled,
+            onBlur,
+            onFocus,
+            onClick: () => open ? close(false) : setOpen(true),
+            onKeyDown,
+            children: [
+              renderTrigger ? renderTrigger(single, { open }) : /* @__PURE__ */ jsx("span", { className: cx("crewlet-select__label", !hasValue && "is-placeholder"), children: label }),
+              /* @__PURE__ */ jsx(KeyboardArrowDownGlyph, { className: "crewlet-select__chevron", size: "sm" })
+            ]
+          }
+        ),
+        panelNode && container ? createPortal(panelNode, container) : null
+      ]
+    }
+  );
+});
+
+export { Select };

package/dist/chunk-5KPQ6D7N.js

@@ -0,0 +1,54 @@
+import { Count } from './chunk-BHHIIK3M.js';
+import { headingTag } from './chunk-PQADV6P6.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import { KeyboardArrowDownGlyph } from '@crewlethq/icons/glyphs';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+function DisclosureAnatomy({
+  open,
+  onToggle,
+  title,
+  meta,
+  count,
+  mono = false,
+  actions,
+  disabled = false,
+  headingLevel,
+  triggerId,
+  panelId,
+  triggerClassName,
+  onKeyDown
+}) {
+  const trigger = /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      id: triggerId,
+      className: cx("crewlet-disclosure__trigger", triggerClassName),
+      "aria-expanded": open,
+      "aria-controls": panelId,
+      disabled,
+      onClick: onToggle,
+      onKeyDown,
+      children: [
+        /* @__PURE__ */ jsx(KeyboardArrowDownGlyph, { className: "crewlet-disclosure__chevron", size: "sm" }),
+        /* @__PURE__ */ jsx("span", { className: cx("crewlet-disclosure__title", mono && "crewlet-disclosure__title--mono"), children: title }),
+        meta === void 0 ? null : /* @__PURE__ */ jsxs(Fragment, { children: [
+          " ",
+          /* @__PURE__ */ jsx("span", { className: "crewlet-disclosure__meta", children: meta })
+        ] }),
+        count === void 0 ? null : /* @__PURE__ */ jsxs(Fragment, { children: [
+          " ",
+          /* @__PURE__ */ jsx(Count, { value: count })
+        ] })
+      ]
+    }
+  );
+  const Heading = headingLevel === "none" ? null : headingTag(headingLevel);
+  return /* @__PURE__ */ jsxs("div", { className: "crewlet-disclosure__bar", children: [
+    Heading === null ? trigger : /* @__PURE__ */ jsx(Heading, { className: "crewlet-disclosure__heading", children: trigger }),
+    actions === void 0 ? null : /* @__PURE__ */ jsx("div", { className: "crewlet-disclosure__actions", children: actions })
+  ] });
+}
+
+export { DisclosureAnatomy };