@colixsystems/widget-sdk 0.245.0 → 0.247.0

package/dist/popover.native.js

@@ -0,0 +1,22 @@
+// `<Popover>`, `<Menu>` and `<Tooltip>` (native). Bind the shared views to
+// React Native's own primitives and the native `<Overlay>`; only the imports
+// differ from ./popover.js, plus the safe-area inset a bottom sheet pads by.
+
+import React from "react";
+import { View, Text, Pressable, ScrollView, Platform, useWindowDimensions } from "react-native";
+// Host-provided: the exported app pins it and mounts its provider at the root.
+import { SafeAreaInsetsContext } from "react-native-safe-area-context";
+import { makePopover } from "./popover-view.js";
+import { makeMenu } from "./menu-view.js";
+import { makeTooltip } from "./tooltip-view.js";
+import { Overlay } from "./overlay.native.js";
+
+// Null with no provider above, which the view reads as "no insets".
+const useSafeAreaInsets = () => React.useContext(SafeAreaInsetsContext);
+
+const primitives = { View, Text, Pressable, ScrollView, Platform, useWindowDimensions, useSafeAreaInsets };
+
+const { Popover, AnchoredSurface } = makePopover(primitives, Overlay);
+export { Popover };
+export const Menu = makeMenu(primitives, AnchoredSurface);
+export const Tooltip = makeTooltip(primitives, AnchoredSurface);

package/dist/radio-group-logic.js

@@ -0,0 +1,61 @@
+// The `<RadioGroup>` rules that need no renderer: which option is picked,
+// which one holds the group's single tab stop, and where an arrow key moves
+// the choice. Both hosts share them, and the node suite tests them.
+
+export const RADIO_GROUP_VARIANTS = Object.freeze(["list", "card", "segmented"]);
+export const DEFAULT_RADIO_GROUP_VARIANT = "list";
+
+const ARROW_STEP = Object.freeze({ ArrowDown: 1, ArrowRight: 1, ArrowUp: -1, ArrowLeft: -1 });
+
+/** A requested variant, or the list when it names none we draw. */
+export function radioGroupVariant(variant) {
+  return RADIO_GROUP_VARIANTS.includes(variant) ? variant : DEFAULT_RADIO_GROUP_VARIANT;
+}
+
+function optionList(options) {
+  return Array.isArray(options) ? options.filter((option) => option && typeof option === "object") : [];
+}
+
+function pickable(option, groupDisabled) {
+  return !groupDisabled && !option.disabled;
+}
+
+/** The index of the option whose `value` is `value` (strict), or -1. */
+export function checkedIndex(options, value) {
+  return optionList(options).findIndex((option) => option.value === value);
+}
+
+/**
+ * The option a Tab key lands on: the picked one when it can be picked, else
+ * the first that can, else -1 (nothing to focus).
+ *
+ * @param {Array<{value: any, disabled?: boolean}>} options
+ * @param {any} value
+ * @param {boolean} [groupDisabled]
+ */
+export function tabStopIndex(options, value, groupDisabled = false) {
+  const list = optionList(options);
+  const picked = checkedIndex(list, value);
+  if (picked !== -1 && pickable(list[picked], groupDisabled)) return picked;
+  return list.findIndex((option) => pickable(option, groupDisabled));
+}
+
+/**
+ * The option an arrow key moves the choice to: the next pickable one in that
+ * direction, wrapping at either end. Returns -1 for any other key, or when no
+ * other option can be picked.
+ *
+ * @param {Array<{disabled?: boolean}>} options
+ * @param {number} from — the focused option's index.
+ * @param {string} key — a KeyboardEvent `key`.
+ */
+export function arrowTargetIndex(options, from, key) {
+  const step = ARROW_STEP[key];
+  const list = optionList(options);
+  if (!step || list.length < 2) return -1;
+  for (let hop = 1; hop < list.length; hop += 1) {
+    const at = (((from + step * hop) % list.length) + list.length) % list.length;
+    if (pickable(list[at], false)) return at;
+  }
+  return -1;
+}

package/dist/radio-group-tokens.js

@@ -0,0 +1,62 @@
+// The values `<RadioGroup>` paints with. Its list and card variants are the
+// form controls' own `muted` scope (`resolveFormControlTokens`); the segmented
+// one is the `tabs` scope's segmented strip. Platform-free.
+
+import { DEFAULT_THEME_TOKENS } from "./_theme-tokens.js";
+import { CHECKBOX_SIZE, resolveFormControlTokens } from "./form-control-tokens.js";
+import { resolveTabsTokens } from "./tabs-tokens.js";
+
+export const RADIO_DOT_SIZE = 8;
+// Narrow enough for two cards side by side in a phone-width panel.
+export const RADIO_CARD_MIN_WIDTH = 140;
+
+/**
+ * Resolve one radio group from the workspace theme.
+ *
+ * @param {object} theme — the resolved workspace theme (`useTheme()` shape).
+ */
+export function resolveRadioGroupTokens(theme) {
+  const base = theme && typeof theme === "object" ? theme : DEFAULT_THEME_TOKENS;
+  const colors = base.colors || DEFAULT_THEME_TOKENS.colors;
+  const spacing = base.spacing || DEFAULT_THEME_TOKENS.spacing;
+  const typography = base.typography || DEFAULT_THEME_TOKENS.typography;
+  const field = resolveFormControlTokens(base);
+  return {
+    ...field,
+    // A picked row lifts out of the muted panel onto the surface.
+    pickedBackground: colors.surface,
+    descriptionColor: colors.onSurfaceMuted,
+    descriptionSize: typography.sizes.sm,
+    optionGap: spacing.sm,
+    cardPadding: spacing.md,
+    segmented: resolveTabsTokens(base, { style: "segmented" }),
+  };
+}
+
+/**
+ * The round mark of one option: the input surface, filled with the accent
+ * and a dot when picked, so it reads as the `<Checkbox>` box's sibling.
+ *
+ * @param {object} t — resolved radio group tokens.
+ * @param {{checked: boolean, invalid?: boolean}} state
+ */
+export function radioMarkStyles(t, { checked, invalid = false }) {
+  return {
+    ring: {
+      width: CHECKBOX_SIZE,
+      height: CHECKBOX_SIZE,
+      borderRadius: CHECKBOX_SIZE / 2,
+      borderWidth: 1,
+      alignItems: "center",
+      justifyContent: "center",
+      borderColor: checked ? t.accent : invalid ? t.errorColor : t.borderColor,
+      backgroundColor: checked ? t.accent : t.background,
+    },
+    dot: {
+      width: RADIO_DOT_SIZE,
+      height: RADIO_DOT_SIZE,
+      borderRadius: RADIO_DOT_SIZE / 2,
+      backgroundColor: t.onAccent,
+    },
+  };
+}

package/dist/radio-group-view.js

@@ -0,0 +1,262 @@
+// The ONE implementation behind the `<RadioGroup>` SDK primitive. The platform
+// bindings (`radio-group.js` / `radio-group.native.js`) differ only in where
+// the primitives come from, so the hosts cannot drift.
+//
+// Widgets each drew their own pick-one list, marking the choice with a glyph,
+// an icon or a tab role. This one has the radio role and the app's look.
+
+import React from "react";
+import { useHostTheme } from "./hooks.js";
+import { DEFAULT_THEME_TOKENS } from "./_theme-tokens.js";
+import { Icon } from "./icon.js";
+import { CHECKBOX_SIZE, CONTROL_MIN_TARGET, focusHaloStyle } from "./form-control-tokens.js";
+import {
+  errorMessage,
+  hasNote,
+  isShown,
+  isText,
+  needsFrame,
+  spaceActivates,
+  spokenLabel,
+} from "./form-control-logic.js";
+import { makeFieldFrame } from "./form-control-view.js";
+import { RADIO_CARD_MIN_WIDTH, radioMarkStyles, resolveRadioGroupTokens } from "./radio-group-tokens.js";
+import {
+  arrowTargetIndex,
+  radioGroupVariant,
+  tabStopIndex,
+} from "./radio-group-logic.js";
+import { TAB_ITEM_LAYOUT, segmentedStripStyles, tabLabelStyle } from "./tabs-tokens.js";
+
+const h = React.createElement;
+
+function groupStyle(kind, t, theme, invalid) {
+  if (kind === "segmented") {
+    const strip = segmentedStripStyles(t.segmented, theme);
+    return [
+      strip.bar,
+      strip.content,
+      // A form row's control spans the row; its segments share it evenly.
+      { flexDirection: "row", alignSelf: "stretch", borderWidth: 1, borderColor: "transparent" },
+      invalid ? { borderColor: t.errorColor } : null,
+    ];
+  }
+  if (kind === "card") return { flexDirection: "row", flexWrap: "wrap", gap: t.optionGap };
+  return {
+    borderWidth: 1,
+    borderColor: invalid ? t.errorColor : t.borderColor,
+    borderRadius: t.radius,
+    backgroundColor: t.background,
+    overflow: "hidden",
+  };
+}
+
+function optionStyle(kind, t, theme, { checked, invalid, focused, web }) {
+  if (kind === "segmented") {
+    return [
+      TAB_ITEM_LAYOUT,
+      segmentedStripStyles(t.segmented, theme).item(checked),
+      { flexGrow: 1, flexShrink: 1, flexBasis: 0 },
+      // The segment's own border is its lift, so focus draws outside it.
+      focused && web
+        ? { outlineWidth: 2, outlineStyle: "solid", outlineColor: t.focusColor, outlineOffset: 1 }
+        : null,
+    ];
+  }
+  const row = {
+    flexDirection: "row",
+    alignItems: kind === "card" ? "flex-start" : "center",
+    gap: t.optionGap,
+    minHeight: CONTROL_MIN_TARGET,
+  };
+  if (kind === "card") {
+    return [
+      row,
+      {
+        flexGrow: 1,
+        flexBasis: RADIO_CARD_MIN_WIDTH,
+        padding: t.cardPadding,
+        borderWidth: 1,
+        borderRadius: t.radius,
+        borderColor: checked ? t.accent : invalid ? t.errorColor : t.borderColor,
+        backgroundColor: checked ? t.pickedBackground : t.background,
+      },
+    ];
+  }
+  return [
+    row,
+    { paddingHorizontal: t.paddingHorizontal, paddingVertical: t.paddingVertical },
+    checked ? { backgroundColor: t.pickedBackground } : null,
+  ];
+}
+
+/**
+ * Bind the shared radio group to one platform's primitives.
+ *
+ * @param {{View: any, Text: any, Pressable: any, Platform: any}} rn
+ */
+export function makeRadioGroup(rn) {
+  const { View, Text, Pressable, Platform } = rn;
+  const FieldFrame = makeFieldFrame(rn);
+  const web = Boolean(Platform && Platform.OS === "web");
+
+  function RadioMark({ t, checked, invalid, focused }) {
+    const mark = radioMarkStyles(t, { checked, invalid });
+    return h(
+      View,
+      { style: focusHaloStyle(t, focused, CHECKBOX_SIZE / 2) },
+      h(View, { style: mark.ring }, checked ? h(View, { style: mark.dot }) : null),
+    );
+  }
+
+  function OptionText({ t, option, kind }) {
+    const label = isText(option.label)
+      ? h(
+          Text,
+          {
+            style: {
+              color: t.textColor,
+              fontFamily: t.fontFamily,
+              fontSize: t.fontSize,
+              ...(kind === "card" ? { fontWeight: "600" } : null),
+            },
+          },
+          option.label,
+        )
+      : option.label;
+    const description = isText(option.description)
+      ? h(
+          Text,
+          { style: { color: t.descriptionColor, fontFamily: t.fontFamily, fontSize: t.descriptionSize } },
+          option.description,
+        )
+      : isShown(option.description)
+        ? option.description
+        : null;
+    return h(View, { style: { flexGrow: 1, flexShrink: 1, gap: 2 } }, label, description);
+  }
+
+  function optionContent({ t, theme, kind, option, checked, invalid, focused }) {
+    if (kind === "segmented") {
+      const s = t.segmented;
+      return [
+        option.icon
+          ? h(Icon, { key: "icon", name: option.icon, size: 16, color: checked ? s.activeTextColor : s.textColor })
+          : null,
+        h(Text, { key: "label", numberOfLines: 1, style: tabLabelStyle(s, theme, checked) }, option.label),
+      ];
+    }
+    return [
+      h(RadioMark, { key: "mark", t, checked, invalid, focused }),
+      option.icon
+        ? h(Icon, { key: "icon", name: option.icon, size: 18, color: checked ? t.accent : t.descriptionColor })
+        : null,
+      h(OptionText, { key: "text", t, option, kind }),
+    ];
+  }
+
+  const RadioGroup = React.forwardRef(function RadioGroup(props, ref) {
+    const {
+      options,
+      value,
+      onValueChange,
+      variant,
+      label,
+      helper,
+      error,
+      disabled = false,
+      accessibilityLabel,
+      style,
+      containerStyle,
+      ...rest
+    } = props;
+    const theme = useHostTheme() || DEFAULT_THEME_TOKENS;
+    const t = resolveRadioGroupTokens(theme);
+    const kind = radioGroupVariant(variant);
+    const list = Array.isArray(options) ? options.filter((o) => o && typeof o === "object") : [];
+    const nodes = React.useRef([]);
+    const [focusedIndex, setFocusedIndex] = React.useState(-1);
+    const noteId = React.useId();
+    const invalid = isShown(error);
+    const noted = hasNote({ helper, error });
+    const framed = needsFrame({ label, helper, error });
+    const tabStop = tabStopIndex(list, value, disabled);
+
+    const pick = (option) => {
+      if (disabled || option.disabled || option.value === value) return;
+      if (typeof onValueChange === "function") onValueChange(option.value, option);
+    };
+    const keyHandler = (option, index) => (event) => {
+      if (event.altKey || event.ctrlKey || event.metaKey) return;
+      const target = arrowTargetIndex(list, index, event.key);
+      if (target === -1) return spaceActivates(() => pick(option))(event);
+      event.preventDefault();
+      pick(list[target]);
+      const node = nodes.current[target];
+      if (node && typeof node.focus === "function") node.focus();
+    };
+
+    const renderOption = (option, index) => {
+      const checked = option.value === value;
+      const optionDisabled = disabled || Boolean(option.disabled);
+      const focused = focusedIndex === index;
+      return h(
+        Pressable,
+        {
+          key: String(option.value),
+          ref: (node) => {
+            nodes.current[index] = node;
+          },
+          onPress: () => pick(option),
+          ...(optionDisabled ? null : { onKeyDown: keyHandler(option, index) }),
+          onFocus: () => setFocusedIndex(index),
+          onBlur: () => setFocusedIndex((at) => (at === index ? -1 : at)),
+          disabled: optionDisabled,
+          // accessibilityRole + aria-*: the pair that announces on both hosts.
+          accessibilityRole: "radio",
+          "aria-checked": checked,
+          "aria-disabled": optionDisabled,
+          accessibilityLabel: option.accessibilityLabel,
+          testID: option.testID,
+          // One tab stop per group on the web; the arrows move between options.
+          ...(web ? { tabIndex: index === tabStop ? 0 : -1 } : null),
+          style: ({ pressed }) => [
+            optionStyle(kind, t, theme, { checked, invalid, focused, web }),
+            pressed && !optionDisabled ? { opacity: 0.7 } : null,
+            option.disabled && !disabled ? { opacity: t.disabledOpacity } : null,
+          ],
+        },
+        ...optionContent({ t, theme, kind, option, checked, invalid, focused }),
+      );
+    };
+
+    const group = h(
+      View,
+      {
+        ...rest,
+        ref,
+        accessibilityRole: "radiogroup",
+        accessibilityLabel: spokenLabel(accessibilityLabel, label),
+        "aria-disabled": disabled,
+        ...(invalid ? { "aria-invalid": true } : null),
+        ...(noted ? { "aria-describedby": noteId } : null),
+        style: [
+          groupStyle(kind, t, theme, invalid),
+          // The frame dims a framed group as a whole.
+          disabled && !framed ? { opacity: t.disabledOpacity } : null,
+          style,
+        ],
+      },
+      ...list.map(renderOption),
+    );
+    if (!framed) return group;
+    return h(
+      FieldFrame,
+      { t, label, helper, error: errorMessage(error), disabled, noteId, style: containerStyle },
+      group,
+    );
+  });
+
+  RadioGroup.displayName = "RadioGroup";
+  return RadioGroup;
+}

package/dist/radio-group.js

@@ -0,0 +1,12 @@
+// `<RadioGroup>` (web). Binds ./radio-group-view.js to react-native-web; see
+// ./primitives.js for why not the bare specifier.
+
+import * as ReactNative from "react-native-web";
+import { makeRadioGroup } from "./radio-group-view.js";
+
+export const RadioGroup = makeRadioGroup({
+  View: ReactNative.View,
+  Text: ReactNative.Text,
+  Pressable: ReactNative.Pressable,
+  Platform: ReactNative.Platform,
+});

package/dist/radio-group.native.js

@@ -0,0 +1,7 @@
+// `<RadioGroup>` (native). Binds ./radio-group-view.js to React Native's own
+// primitives; only the import differs from ./radio-group.js.
+
+import { View, Text, Pressable, Platform } from "react-native";
+import { makeRadioGroup } from "./radio-group-view.js";
+
+export const RadioGroup = makeRadioGroup({ View, Text, Pressable, Platform });

package/dist/select-search-logic.js

@@ -0,0 +1,150 @@
+// The searchable `<Select>` rules that need no renderer: when a typed query
+// is sent, which answer is still wanted, what the sheet shows meanwhile, and
+// the labels it keeps for picked values the current page no longer holds.
+// Both hosts share them, and the node suite tests them.
+
+import { normaliseThemeComponents } from "./theme-components.js";
+
+/** How long typing must pause before the query is sent, in ms. */
+export const DEFAULT_SEARCH_DEBOUNCE_MS = 250;
+
+/** A typed query as it is sent: trimmed, never null. */
+export function normaliseQuery(text) {
+  return typeof text === "string" ? text.trim() : "";
+}
+
+/**
+ * A trailing debounce: `push` restarts the wait, and only the last text
+ * pushed is delivered, once typing pauses. `cancel` drops a pending one.
+ *
+ * @param {number|(() => number)} delay — ms, or a getter read at each push
+ *   so a changed delay applies to the next pause; below 0 counts as 0.
+ * @param {(query: string) => void} deliver
+ * @param {{setTimeout: Function, clearTimeout: Function}} [timers]
+ */
+export function createDebouncer(delay, deliver, timers = globalThis) {
+  const waitFor = () => {
+    const ms = typeof delay === "function" ? delay() : delay;
+    return Number.isFinite(ms) && ms > 0 ? ms : 0;
+  };
+  let pending = null;
+  const cancel = () => {
+    if (pending !== null) timers.clearTimeout(pending);
+    pending = null;
+  };
+  return {
+    push(text) {
+      cancel();
+      pending = timers.setTimeout(() => {
+        pending = null;
+        deliver(normaliseQuery(text));
+      }, waitFor());
+    },
+    cancel,
+  };
+}
+
+/**
+ * Numbers each request so only the latest one's answer is used; an answer to
+ * a query the person has already typed past is dropped.
+ */
+export function createRequestGate() {
+  let latest = 0;
+  return {
+    begin: () => ++latest,
+    isCurrent: (ticket) => ticket === latest,
+  };
+}
+
+/**
+ * The options whose label holds the query, case-insensitively; all of them
+ * for an empty query. For a list that is searched where it is held.
+ *
+ * @param {Array<{label: unknown}>} options
+ * @param {string} query
+ */
+export function filterOptions(options, query) {
+  const list = Array.isArray(options) ? options : [];
+  const needle = normaliseQuery(query).toLocaleLowerCase();
+  if (!needle) return list;
+  return list.filter((option) =>
+    String(option && option.label != null ? option.label : "")
+      .toLocaleLowerCase()
+      .includes(needle),
+  );
+}
+
+/**
+ * What the sheet's body shows: a spinner while the answer is pending, the
+ * error, the "nothing matches" note for a query with no result, the empty
+ * note for no options at all, else the list.
+ *
+ * @param {{loading?: boolean, error?: boolean, query?: string, count: number}} state
+ * @returns {"loading"|"error"|"noResults"|"empty"|"list"}
+ */
+export function sheetBody({ loading, error, query, count }) {
+  if (loading) return "loading";
+  if (error) return "error";
+  if (count > 0) return "list";
+  return normaliseQuery(query) ? "noResults" : "empty";
+}
+
+// 1 and "1" are two values; the key keeps them apart.
+function valueKey(value) {
+  return `${typeof value}:${value}`;
+}
+
+/**
+ * A copy of `known` (value key → option) holding every option in `lists`,
+ * later lists winning. A searchable select remembers each option it has
+ * shown, so a picked one keeps its label after a search drops it.
+ *
+ * @param {Map<string, object>} known
+ * @param {...Array<{value: string|number}>} lists
+ */
+export function rememberOptions(known, ...lists) {
+  const next = new Map(known instanceof Map ? known : []);
+  for (const list of lists) {
+    for (const option of Array.isArray(list) ? list : []) {
+      if (option && (typeof option.value === "string" || typeof option.value === "number")) {
+        next.set(valueKey(option.value), option);
+      }
+    }
+  }
+  return next;
+}
+
+/** The remembered option for one value, or undefined. */
+export function knownOption(known, value) {
+  return known instanceof Map ? known.get(valueKey(value)) : undefined;
+}
+
+/**
+ * The remembered options for `values`, in their order; a value nothing has
+ * named is left out rather than shown by its raw value.
+ *
+ * @param {Map<string, object>} known
+ * @param {Array<string|number>} values
+ */
+export function knownOptions(known, values) {
+  return (Array.isArray(values) ? values : [])
+    .map((value) => knownOption(known, value))
+    .filter(Boolean);
+}
+
+/**
+ * The row size a searchable sheet takes from the theme's `list` scope: only
+ * the values the theme sets, so an unthemed list keeps the option row's own.
+ *
+ * @param {object} theme — the resolved workspace theme.
+ * @returns {{minHeight?: number, paddingHorizontal?: number}}
+ */
+export function searchRowOverrides(theme) {
+  const components = theme && typeof theme === "object" ? theme.components : undefined;
+  const list = normaliseThemeComponents({ list: components && components.list }).list || {};
+  const out = {};
+  // A row stays a 44px target however small the theme draws list rows.
+  if (Number.isFinite(list.rowMinHeight)) out.minHeight = Math.max(44, list.rowMinHeight);
+  if (Number.isFinite(list.rowPadding)) out.paddingHorizontal = list.rowPadding;
+  return out;
+}