@colixsystems/widget-sdk 0.236.0 → 0.238.0

package/dist/select-logic.js

@@ -0,0 +1,83 @@
+// The `<Select>` rules that need no renderer: where focus lands when the
+// sheet opens, the draft a `multiple` select edits until Done, and what its
+// trigger shows. Both hosts share them, and the node suite tests them.
+
+/** The default trigger text once the picked labels no longer fit. */
+export function defaultSelectedCountText(count) {
+  return `${count} selected`;
+}
+
+/** A `values` prop as a list; anything else is no choice. */
+export function valueList(values) {
+  return Array.isArray(values) ? values : [];
+}
+
+/**
+ * The option focused when the sheet opens: the first picked one that can be
+ * picked, else the first enabled one, else -1.
+ *
+ * @param {Array<{disabled?: boolean}>} options
+ * @param {(option: object) => boolean} isPicked
+ */
+export function initialFocusIndex(options, isPicked) {
+  const list = Array.isArray(options) ? options : [];
+  const picked = list.findIndex((option) => isPicked(option) && !option.disabled);
+  return picked !== -1 ? picked : list.findIndex((option) => !option.disabled);
+}
+
+/**
+ * The draft with `value` added, or removed when it is already in it. Values
+ * compare strictly, so 1 and "1" are two choices.
+ *
+ * @param {Array<string|number>} draft
+ * @param {string|number} value
+ */
+export function toggleValue(draft, value) {
+  const list = valueList(draft);
+  return list.includes(value) ? list.filter((own) => own !== value) : [...list, value];
+}
+
+/**
+ * The values Done reports: the picked options in the order they are listed,
+ * then any picked value no option carries any more, so confirming without a
+ * change never drops a stored value.
+ *
+ * @param {Array<{value: string|number}>} options
+ * @param {Array<string|number>} draft
+ */
+export function committedValues(options, draft) {
+  const list = valueList(draft);
+  const known = (Array.isArray(options) ? options : []).map((option) => option.value);
+  return [
+    ...known.filter((value) => list.includes(value)),
+    ...list.filter((value) => !known.includes(value)),
+  ];
+}
+
+/** Whether two value lists hold the same values, whatever their order. */
+export function sameValues(a, b) {
+  const left = valueList(a);
+  const right = valueList(b);
+  return left.length === right.length && left.every((value) => right.includes(value));
+}
+
+/** The options whose value is picked, in the order they are listed. */
+export function pickedOptions(options, values) {
+  const list = valueList(values);
+  return (Array.isArray(options) ? options : []).filter((option) => list.includes(option.value));
+}
+
+/**
+ * What a `multiple` trigger shows: the placeholder with nothing picked, the
+ * picked labels as chips once they are measured to fit on its one line,
+ * otherwise the count. Until both widths are known it shows the count, so
+ * the trigger never draws chips that overflow it.
+ *
+ * @param {{picked: number, available?: number|null, needed?: number|null}} sizes
+ * @returns {"placeholder"|"chips"|"count"}
+ */
+export function triggerSummary({ picked, available, needed }) {
+  if (!picked) return "placeholder";
+  const measured = Number.isFinite(available) && Number.isFinite(needed) && available > 0;
+  return measured && needed <= available ? "chips" : "count";
+}

package/dist/select-view.js

@@ -4,7 +4,8 @@
 //
 // The trigger wears the field `<TextField>` does. The options open in
 // `<Overlay>`, at screen level, so no card or scroll container the widget
-// sits in can clip them; a long list scrolls inside the sheet.
+// sits in can clip them; a long list scrolls inside the sheet. With
+// `multiple` the same sheet ticks options into a draft that Done commits.
 
 import React from "react";
 import { useHostTheme } from "./hooks.js";
@@ -29,17 +30,34 @@ import {
   spokenLabel,
 } from "./form-control-logic.js";
 import { makeFieldFrame } from "./form-control-view.js";
+import { checkboxBox } from "./checkbox-view.js";
+import {
+  committedValues,
+  defaultSelectedCountText,
+  initialFocusIndex,
+  pickedOptions,
+  sameValues,
+  toggleValue,
+  triggerSummary,
+  valueList,
+} from "./select-logic.js";
 
 const h = React.createElement;
 const NAVIGATION_KEYS = ["ArrowDown", "ArrowUp", "Home", "End"];
+// Wide enough that no picked chip shrinks while it is measured.
+const MEASURE_SPAN = 10000;
+// A compact chip that fits the field's own line, so the trigger keeps its height.
+const TRIGGER_CHIP_STYLE = Object.freeze({ minHeight: 0, paddingVertical: 2 });
+const UNMEASURED = Object.freeze({ available: null, needed: null });
 
 /**
  * Bind the shared select to one platform's primitives.
  *
- * @param {{View: any, Text: any, Pressable: any, ScrollView: any, Platform: any, Overlay: any}} rn
+ * @param {{View: any, Text: any, Pressable: any, ScrollView: any, Platform: any,
+ *   Overlay: any, Button: any, Chip: any}} rn
  */
 export function makeSelect(rn) {
-  const { View, Text, Pressable, ScrollView, Platform, Overlay } = rn;
+  const { View, Text, Pressable, ScrollView, Platform, Overlay, Button, Chip } = rn;
   const FieldFrame = makeFieldFrame(rn);
 
   // Keyboard focus is a web concern: a device moves its reader's focus into
@@ -48,11 +66,11 @@ export function makeSelect(rn) {
     if (Platform.OS === "web" && node && typeof node.focus === "function") node.focus();
   }
 
-  function OptionSheet({ t, options, value, title, emptyText, listId, onPick, testID }) {
+  function OptionSheet(props) {
+    const { t, options, isPicked, multiple, title, emptyText, listId, onPick, testID, footer } =
+      props;
     const nodes = React.useRef([]);
-    const chosen = options.findIndex((option) => option.value === value);
-    const firstEnabled = options.findIndex((option) => !option.disabled);
-    const initial = chosen !== -1 && !options[chosen].disabled ? chosen : firstEnabled;
+    const initial = initialFocusIndex(options, isPicked);
     // Focus lands on the current choice once, when the sheet mounts it; the
     // browser scrolls a focused option into view in a long list.
     const pendingFocus = React.useRef(true);
@@ -81,12 +99,13 @@ export function makeSelect(rn) {
               nativeID: listId,
               // Web only: native has no listbox, and ignores an unknown `role`.
               role: "listbox",
+              ...(multiple ? { "aria-multiselectable": true } : null),
               accessibilityLabel: isText(title) ? String(title) : undefined,
               keyboardShouldPersistTaps: "handled",
               testID: testID ? `${testID}-options` : undefined,
             },
             ...options.map((option, index) => {
-              const selected = option.value === value;
+              const selected = isPicked(option);
               // The web host still delivers keys to a disabled Pressable.
               const pick = () => {
                 if (!option.disabled) onPick(option);
@@ -121,7 +140,7 @@ export function makeSelect(rn) {
                     {
                       flexDirection: "row",
                       alignItems: "center",
-                      justifyContent: "space-between",
+                      justifyContent: multiple ? "flex-start" : "space-between",
                       gap: t.rowGap,
                       minHeight: CONTROL_MIN_TARGET,
                       paddingHorizontal: t.paddingHorizontal,
@@ -132,15 +151,93 @@ export function makeSelect(rn) {
                     option.disabled ? { opacity: t.disabledOpacity } : null,
                   ],
                 },
+                multiple ? checkboxBox(View, t, { checked: selected }) : null,
                 h(
                   Text,
                   { style: [text, { flexShrink: 1 }, selected ? { fontWeight: "600" } : null] },
                   option.label,
                 ),
-                selected ? h(Icon, { name: "check", size: 18, color: t.accent }) : null,
+                selected && !multiple ? h(Icon, { name: "check", size: 18, color: t.accent }) : null,
               );
             }),
           ),
+      footer || null,
+    );
+  }
+
+  function DoneFooter({ doneText, onDone, testID }) {
+    return h(
+      View,
+      { style: { flexDirection: "row", justifyContent: "flex-end" } },
+      h(Button, { title: doneText, onPress: onDone, testID: testID ? `${testID}-done` : undefined }),
+    );
+  }
+
+  // Chips when they fit the field's one line, else the count; measured on
+  // both hosts, so a narrow trigger never grows to hold them.
+  function MultiSummary({ t, picked, placeholder, selectedCountText, testID }) {
+    const [widths, setWidths] = React.useState(UNMEASURED);
+    const countText =
+      typeof selectedCountText === "function" ? selectedCountText : defaultSelectedCountText;
+    const measure = (key) => (event) => {
+      const width = event.nativeEvent.layout.width;
+      setWidths((own) => (own[key] === width ? own : { ...own, [key]: width }));
+    };
+    const mode = triggerSummary({ picked: picked.length, ...widths });
+    const text = { fontFamily: t.fontFamily, fontSize: t.fontSize };
+    const chips = () =>
+      picked.map((option) =>
+        h(Chip, {
+          key: `${typeof option.value}:${option.value}`,
+          label: option.label,
+          size: "sm",
+          style: TRIGGER_CHIP_STYLE,
+        }),
+      );
+    return h(
+      View,
+      {
+        onLayout: measure("available"),
+        style: { flexGrow: 1, flexShrink: 1, minWidth: 0, overflow: "hidden" },
+        testID: testID ? `${testID}-summary` : undefined,
+      },
+      mode === "chips"
+        ? h(View, { style: { flexDirection: "row", gap: t.gap } }, ...chips())
+        : h(
+            Text,
+            {
+              numberOfLines: 1,
+              style: { ...text, color: mode === "count" ? t.textColor : t.placeholderColor },
+            },
+            mode === "count" ? countText(picked.length) : placeholder,
+          ),
+      picked.length > 0
+        ? h(
+            View,
+            {
+              "aria-hidden": true,
+              importantForAccessibility: "no-hide-descendants",
+              accessibilityElementsHidden: true,
+              style: {
+                position: "absolute",
+                top: 0,
+                left: 0,
+                width: MEASURE_SPAN,
+                opacity: 0,
+                pointerEvents: "none",
+              },
+            },
+            h(
+              View,
+              {
+                onLayout: measure("needed"),
+                style: { flexDirection: "row", alignSelf: "flex-start", gap: t.gap },
+                testID: testID ? `${testID}-measure` : undefined,
+              },
+              ...chips(),
+            ),
+          )
+        : null,
     );
   }
 
@@ -148,6 +245,11 @@ export function makeSelect(rn) {
     const {
       value,
       onValueChange,
+      multiple = false,
+      values,
+      onValuesChange,
+      selectedCountText = defaultSelectedCountText,
+      doneText = "Done",
       options,
       placeholder = "Select",
       title,
@@ -174,6 +276,8 @@ export function makeSelect(rn) {
     }
     const t = resolveFormControlTokens(theme, overrides);
     const [open, setOpen] = React.useState(false);
+    // Null until the person ticks something: an untouched sheet follows `values`.
+    const [ownDraft, setDraft] = React.useState(null);
     const [focused, setFocused] = React.useState(false);
     const triggerRef = React.useRef(null);
     const setRef = React.useMemo(() => shareRef(ref, triggerRef), [ref]);
@@ -181,14 +285,41 @@ export function makeSelect(rn) {
     const noteId = React.useId();
     const list = Array.isArray(options) ? options.filter(Boolean) : [];
     const current = selectedOption(list, value);
+    const picked = multiple ? pickedOptions(list, values) : [];
+    const draft = ownDraft === null ? valueList(values) : ownDraft;
     const invalid = isShown(error);
     const sheetTitle = isShown(title) ? title : isText(label) ? label : undefined;
     const name = spokenLabel(accessibilityLabel, label);
     const shown = current ? current.label : placeholder;
+    const spokenChoice = multiple
+      ? picked.length > 0
+        ? picked.map((option) => option.label).filter(isText).join(", ")
+        : placeholder
+      : shown;
     const show = () => {
-      if (!disabled) setOpen(true);
+      if (disabled) return;
+      if (multiple) setDraft(null);
+      setOpen(true);
     };
+    // Closing any other way leaves the draft behind: only Done commits it.
     const close = () => setOpen(false);
+    const done = () => {
+      const next = committedValues(list, draft);
+      close();
+      if (!sameValues(next, valueList(values)) && typeof onValuesChange === "function") {
+        onValuesChange(next, pickedOptions(list, next));
+      }
+    };
+    const pick = (option) => {
+      if (multiple) {
+        setDraft((own) => toggleValue(own === null ? valueList(values) : own, option.value));
+        return;
+      }
+      close();
+      if (option.value !== value && typeof onValueChange === "function") {
+        onValueChange(option.value, option);
+      }
+    };
     // The option that held focus is gone once the sheet closes. After the
     // sheet unmounts, or its focus trap would pull focus straight back in.
     const wasOpen = React.useRef(false);
@@ -239,7 +370,8 @@ export function makeSelect(rn) {
           ...(invalid ? { "aria-invalid": true } : null),
           ...(hasNote({ helper, error }) ? { "aria-describedby": noteId } : null),
           // The choice is part of the name: a button's own label replaces its text.
-          accessibilityLabel: [name, isText(shown) ? shown : null].filter(Boolean).join(", ") || undefined,
+          accessibilityLabel:
+            [name, isText(spokenChoice) ? spokenChoice : null].filter(Boolean).join(", ") || undefined,
           testID,
           style: [
             {
@@ -260,19 +392,21 @@ export function makeSelect(rn) {
             style,
           ],
         },
-        h(
-          Text,
-          {
-            numberOfLines: 1,
-            style: {
-              flexShrink: 1,
-              color: current ? t.textColor : t.placeholderColor,
-              fontFamily: t.fontFamily,
-              fontSize: t.fontSize,
-            },
-          },
-          shown,
-        ),
+        multiple
+          ? h(MultiSummary, { t, picked, placeholder, selectedCountText, testID })
+          : h(
+              Text,
+              {
+                numberOfLines: 1,
+                style: {
+                  flexShrink: 1,
+                  color: current ? t.textColor : t.placeholderColor,
+                  fontFamily: t.fontFamily,
+                  fontSize: t.fontSize,
+                },
+              },
+              shown,
+            ),
         h(Icon, { name: "chevron-down", size: 18, color: t.placeholderColor }),
       ),
       h(
@@ -293,17 +427,16 @@ export function makeSelect(rn) {
         h(OptionSheet, {
           t,
           options: list,
-          value,
+          multiple,
+          isPicked: multiple
+            ? (option) => draft.includes(option.value)
+            : (option) => option.value === value,
           title: sheetTitle,
           emptyText,
           listId,
           testID,
-          onPick: (option) => {
-            close();
-            if (option.value !== value && typeof onValueChange === "function") {
-              onValueChange(option.value, option);
-            }
-          },
+          onPick: pick,
+          footer: multiple ? h(DoneFooter, { doneText, onDone: done, testID }) : null,
         }),
       ),
     );

package/dist/select.js

@@ -1,9 +1,12 @@
 // `<Select>` (web). Binds ./select-view.js to react-native-web and the web
-// `<Overlay>`; see ./primitives.js for why not the bare specifier.
+// `<Overlay>`, `<Button>` and `<Chip>`; see ./primitives.js for why not the
+// bare specifier.
 
 import * as ReactNative from "react-native-web";
 import { makeSelect } from "./select-view.js";
 import { Overlay } from "./overlay.js";
+import { Button } from "./button.js";
+import { Chip } from "./chip.js";
 
 export const Select = makeSelect({
   View: ReactNative.View,
@@ -12,4 +15,6 @@ export const Select = makeSelect({
   ScrollView: ReactNative.ScrollView,
   Platform: ReactNative.Platform,
   Overlay,
+  Button,
+  Chip,
 });

package/dist/select.native.js

@@ -1,9 +1,11 @@
 // `<Select>` (native). Binds ./select-view.js to React Native's own
-// primitives and the native `<Overlay>`; only the imports differ from
-// ./select.js.
+// primitives and the native `<Overlay>`, `<Button>` and `<Chip>`; only the
+// imports differ from ./select.js.
 
 import { View, Text, Pressable, ScrollView, Platform } from "react-native";
 import { makeSelect } from "./select-view.js";
 import { Overlay } from "./overlay.native.js";
+import { Button } from "./button.native.js";
+import { Chip } from "./chip.native.js";
 
-export const Select = makeSelect({ View, Text, Pressable, ScrollView, Platform, Overlay });
+export const Select = makeSelect({ View, Text, Pressable, ScrollView, Platform, Overlay, Button, Chip });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@colixsystems/widget-sdk",
-  "version": "0.236.0",
+  "version": "0.238.0",
   "description": "Common widget interface for AppStudio. Implements WidgetManifest, WidgetContext, property schema, and helper hooks.",
   "homepage": "https://github.com/Colix-AB/AppStudio",
   "type": "module",