@colixsystems/widget-sdk 0.262.0 → 0.263.0

package/README.md

@@ -86,7 +86,11 @@ See the design reference for the full architecture: [`docs/architecture/widget-m
 
 ## Status
 
-`v0.262.0` — pre-publish. The package surface (types, function names, export paths) is the v1 contract; runtime behaviour for some hooks is stubbed (each hook documents what's wired and what isn't). It is **not yet published to npm**.
+`v0.263.0` — pre-publish. The package surface (types, function names, export paths) is the v1 contract; runtime behaviour for some hooks is stubbed (each hook documents what's wired and what isn't). It is **not yet published to npm**.
+
+### What's new in 0.263.0 (contract 1.213.0)
+
+**`<Tabs>` wraps tabs that do not fit onto another line.** The strip used to scroll sideways with its scrollbar hidden, so on a computer the tabs past the edge were out of sight and a mouse wheel could not reach them. A dialog with eight tabs showed three. Now a strip too wide for its container flows onto more lines, and every tab stays visible. A label wider than the whole strip ends in an ellipsis inside it. A strip that fits is unchanged. The same strip draws the page Tabs container, on the web and in the exported app. No prop changed. A widget that wrapped `<Tabs>` in a horizontal `ScrollView` of its own should drop it.
 
 ### What's new in 0.262.0 (contract 1.212.0)
 

package/dist/contract.cjs

@@ -3540,7 +3540,7 @@ const PRIMITIVES = [
   {
     name: "Tabs",
     description:
-      'Themed tab strip. `<Tabs items={[{ key: "open", label: "Open" }, { key: "done", label: "Done", icon: "check" }]} value={tab} onChange={setTab} />`. The default way to switch between views inside a widget: its look (a segmented control, pills, or an underline — Theme Settings > Tabs) and its colours and corner radius come from the theme, so every tab strip in the app matches, including the page Tabs container. It draws the strip only; render the selected panel yourself below it. Use it rather than tabs of your own from `Pressable` chips; when the request needs a strip it cannot draw (a live count badge on each tab, a vertical rail down the side), build your own in the app\'s look with the tab role and its selected state. Props: `items` (`[{ key, label, icon?, disabled?, testID? }]`, icon is a lucide name), `value` (the selected key), `onChange(key)`, `accessibilityLabel`, `style`, `testID`, and the overrides `variant` ("segmented" | "pill" | "underline"), `activeColor`, `activeTextColor`, `textColor`, `radius`. The strip scrolls sideways when the tabs overflow. Declare `tabsStyle` / `tabsActiveColor` / `tabsActiveTextColor` / `tabsTextColor` / `tabsRadius` style fields and pass them through to let an author override one widget.',
+      'Themed tab strip. `<Tabs items={[{ key: "open", label: "Open" }, { key: "done", label: "Done", icon: "check" }]} value={tab} onChange={setTab} />`. The default way to switch between views inside a widget: its look (a segmented control, pills, or an underline — Theme Settings > Tabs) and its colours and corner radius come from the theme, so every tab strip in the app matches, including the page Tabs container. It draws the strip only; render the selected panel yourself below it. Use it rather than tabs of your own from `Pressable` chips; when the request needs a strip it cannot draw (a live count badge on each tab, a vertical rail down the side), build your own in the app\'s look with the tab role and its selected state. Props: `items` (`[{ key, label, icon?, disabled?, testID? }]`, icon is a lucide name), `value` (the selected key), `onChange(key)`, `accessibilityLabel`, `style`, `testID`, and the overrides `variant` ("segmented" | "pill" | "underline"), `activeColor`, `activeTextColor`, `textColor`, `radius`. When the tabs do not fit the width, the strip wraps them onto another line, so every tab stays visible; never wrap it in a horizontal `ScrollView` of your own. Declare `tabsStyle` / `tabsActiveColor` / `tabsActiveTextColor` / `tabsTextColor` / `tabsRadius` style fields and pass them through to let an author override one widget.',
     rnComponent: null,
     docsUrl: null,
   },
@@ -6430,7 +6430,9 @@ const CONTRACT = deepFreeze({
   // 1.212.0: additive (sc-13843) — `useAction(actionRef)` + the `actions` host
   //    client + the `actionRef` propertySchema type + the `actions.run:*`
   //    scope. A widget runs one of the workspace's Actions and reads its result.
-  version: "1.212.0",
+  // 1.213.0: behavioural (sc-13933) — `<Tabs>` wraps tabs that do not fit onto
+  //    another line instead of scrolling them out of sight.
+  version: "1.213.0",
   sharedTranslationKeys: SHARED_TRANSLATION_KEYS,
   hooks: HOOKS,
   primitives: PRIMITIVES,

package/dist/contract.js

@@ -3537,7 +3537,7 @@ const PRIMITIVES = [
   {
     name: "Tabs",
     description:
-      'Themed tab strip. `<Tabs items={[{ key: "open", label: "Open" }, { key: "done", label: "Done", icon: "check" }]} value={tab} onChange={setTab} />`. The default way to switch between views inside a widget: its look (a segmented control, pills, or an underline — Theme Settings > Tabs) and its colours and corner radius come from the theme, so every tab strip in the app matches, including the page Tabs container. It draws the strip only; render the selected panel yourself below it. Use it rather than tabs of your own from `Pressable` chips; when the request needs a strip it cannot draw (a live count badge on each tab, a vertical rail down the side), build your own in the app\'s look with the tab role and its selected state. Props: `items` (`[{ key, label, icon?, disabled?, testID? }]`, icon is a lucide name), `value` (the selected key), `onChange(key)`, `accessibilityLabel`, `style`, `testID`, and the overrides `variant` ("segmented" | "pill" | "underline"), `activeColor`, `activeTextColor`, `textColor`, `radius`. The strip scrolls sideways when the tabs overflow. Declare `tabsStyle` / `tabsActiveColor` / `tabsActiveTextColor` / `tabsTextColor` / `tabsRadius` style fields and pass them through to let an author override one widget.',
+      'Themed tab strip. `<Tabs items={[{ key: "open", label: "Open" }, { key: "done", label: "Done", icon: "check" }]} value={tab} onChange={setTab} />`. The default way to switch between views inside a widget: its look (a segmented control, pills, or an underline — Theme Settings > Tabs) and its colours and corner radius come from the theme, so every tab strip in the app matches, including the page Tabs container. It draws the strip only; render the selected panel yourself below it. Use it rather than tabs of your own from `Pressable` chips; when the request needs a strip it cannot draw (a live count badge on each tab, a vertical rail down the side), build your own in the app\'s look with the tab role and its selected state. Props: `items` (`[{ key, label, icon?, disabled?, testID? }]`, icon is a lucide name), `value` (the selected key), `onChange(key)`, `accessibilityLabel`, `style`, `testID`, and the overrides `variant` ("segmented" | "pill" | "underline"), `activeColor`, `activeTextColor`, `textColor`, `radius`. When the tabs do not fit the width, the strip wraps them onto another line, so every tab stays visible; never wrap it in a horizontal `ScrollView` of your own. Declare `tabsStyle` / `tabsActiveColor` / `tabsActiveTextColor` / `tabsTextColor` / `tabsRadius` style fields and pass them through to let an author override one widget.',
     rnComponent: null,
     docsUrl: null,
   },
@@ -6427,7 +6427,9 @@ const CONTRACT = deepFreeze({
   // 1.212.0: additive (sc-13843) — `useAction(actionRef)` + the `actions` host
   //    client + the `actionRef` propertySchema type + the `actions.run:*`
   //    scope. A widget runs one of the workspace's Actions and reads its result.
-  version: "1.212.0",
+  // 1.213.0: behavioural (sc-13933) — `<Tabs>` wraps tabs that do not fit onto
+  //    another line instead of scrolling them out of sight.
+  version: "1.213.0",
   sharedTranslationKeys: SHARED_TRANSLATION_KEYS,
   hooks: HOOKS,
   primitives: PRIMITIVES,

package/dist/tabs-tokens.js

@@ -106,6 +106,8 @@ export const TAB_ITEM_LAYOUT = Object.freeze({
   justifyContent: "center",
   gap: 6,
   minHeight: 44,
+  // A label longer than the whole strip ends in an ellipsis inside it.
+  maxWidth: "100%",
   paddingHorizontal: 12,
   paddingVertical: 8,
 });
@@ -124,5 +126,6 @@ export function tabLabelStyle(t, theme, active) {
     fontSize: typography.sizes.sm,
     fontWeight: active ? "600" : "500",
     color: active ? t.activeTextColor : t.textColor,
+    flexShrink: 1,
   };
 }

package/dist/tabs-view.js

@@ -33,10 +33,15 @@ function stripStyles(t, theme) {
     };
   }
   if (t.style === "underline") {
-    // The rule sits on the content, so the scroller cannot clip the accent.
+    // A wrapped line sits close under the one above, not a tab-gap away.
     return {
       bar: null,
-      content: { gap: spacing.lg, borderBottomWidth: 1, borderColor: t.rule },
+      content: {
+        columnGap: spacing.lg,
+        rowGap: spacing.xs,
+        borderBottomWidth: 1,
+        borderColor: t.rule,
+      },
       item: (active) => ({
         paddingHorizontal: 4,
         borderBottomWidth: 2,
@@ -50,10 +55,10 @@ function stripStyles(t, theme) {
 /**
  * Bind the shared tab strip to one platform's primitives.
  *
- * @param {{View: any, Text: any, Pressable: any, ScrollView: any}} rn
+ * @param {{View: any, Text: any, Pressable: any}} rn
  */
 export function makeTabs(rn) {
-  const { Text, Pressable, ScrollView } = rn;
+  const { View, Text, Pressable } = rn;
 
   function Tabs({
     items = [],
@@ -84,13 +89,17 @@ export function makeTabs(rn) {
     const strip = stripStyles(t, theme);
 
     return React.createElement(
-      ScrollView,
+      View,
       {
-        horizontal: true,
-        showsHorizontalScrollIndicator: false,
+        // Tabs that do not fit wrap onto another line: a sideways scroller
+        // hid them from a mouse, with nothing to say they were there.
         // A strip never grows into, or shrinks away from, the panel below.
-        style: [{ flexGrow: 0, flexShrink: 0 }, strip.bar, style],
-        contentContainerStyle: [{ flexDirection: "row" }, strip.content],
+        style: [
+          { flexGrow: 0, flexShrink: 0, maxWidth: "100%", flexDirection: "row", flexWrap: "wrap" },
+          strip.bar,
+          strip.content,
+          style,
+        ],
         accessibilityRole: "tablist",
         accessibilityLabel,
         testID,

package/dist/tabs.native.js

@@ -1,8 +1,8 @@
 // `<Tabs>` (native). Binds ./tabs-view.js to React Native's own primitives;
 // only the import differs from ./tabs.js.
 
-import { View, Pressable, ScrollView } from "react-native";
+import { View, Pressable } from "react-native";
 import { Text } from "./bounded-text.native.js";
 import { makeTabs } from "./tabs-view.js";
 
-export const Tabs = makeTabs({ View, Text, Pressable, ScrollView });
+export const Tabs = makeTabs({ View, Text, Pressable });

package/package.json

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

package/src/contract.js

@@ -3537,7 +3537,7 @@ const PRIMITIVES = [
   {
     name: "Tabs",
     description:
-      'Themed tab strip. `<Tabs items={[{ key: "open", label: "Open" }, { key: "done", label: "Done", icon: "check" }]} value={tab} onChange={setTab} />`. The default way to switch between views inside a widget: its look (a segmented control, pills, or an underline — Theme Settings > Tabs) and its colours and corner radius come from the theme, so every tab strip in the app matches, including the page Tabs container. It draws the strip only; render the selected panel yourself below it. Use it rather than tabs of your own from `Pressable` chips; when the request needs a strip it cannot draw (a live count badge on each tab, a vertical rail down the side), build your own in the app\'s look with the tab role and its selected state. Props: `items` (`[{ key, label, icon?, disabled?, testID? }]`, icon is a lucide name), `value` (the selected key), `onChange(key)`, `accessibilityLabel`, `style`, `testID`, and the overrides `variant` ("segmented" | "pill" | "underline"), `activeColor`, `activeTextColor`, `textColor`, `radius`. The strip scrolls sideways when the tabs overflow. Declare `tabsStyle` / `tabsActiveColor` / `tabsActiveTextColor` / `tabsTextColor` / `tabsRadius` style fields and pass them through to let an author override one widget.',
+      'Themed tab strip. `<Tabs items={[{ key: "open", label: "Open" }, { key: "done", label: "Done", icon: "check" }]} value={tab} onChange={setTab} />`. The default way to switch between views inside a widget: its look (a segmented control, pills, or an underline — Theme Settings > Tabs) and its colours and corner radius come from the theme, so every tab strip in the app matches, including the page Tabs container. It draws the strip only; render the selected panel yourself below it. Use it rather than tabs of your own from `Pressable` chips; when the request needs a strip it cannot draw (a live count badge on each tab, a vertical rail down the side), build your own in the app\'s look with the tab role and its selected state. Props: `items` (`[{ key, label, icon?, disabled?, testID? }]`, icon is a lucide name), `value` (the selected key), `onChange(key)`, `accessibilityLabel`, `style`, `testID`, and the overrides `variant` ("segmented" | "pill" | "underline"), `activeColor`, `activeTextColor`, `textColor`, `radius`. When the tabs do not fit the width, the strip wraps them onto another line, so every tab stays visible; never wrap it in a horizontal `ScrollView` of your own. Declare `tabsStyle` / `tabsActiveColor` / `tabsActiveTextColor` / `tabsTextColor` / `tabsRadius` style fields and pass them through to let an author override one widget.',
     rnComponent: null,
     docsUrl: null,
   },
@@ -6427,7 +6427,9 @@ const CONTRACT = deepFreeze({
   // 1.212.0: additive (sc-13843) — `useAction(actionRef)` + the `actions` host
   //    client + the `actionRef` propertySchema type + the `actions.run:*`
   //    scope. A widget runs one of the workspace's Actions and reads its result.
-  version: "1.212.0",
+  // 1.213.0: behavioural (sc-13933) — `<Tabs>` wraps tabs that do not fit onto
+  //    another line instead of scrolling them out of sight.
+  version: "1.213.0",
   sharedTranslationKeys: SHARED_TRANSLATION_KEYS,
   hooks: HOOKS,
   primitives: PRIMITIVES,