@colixsystems/widget-sdk 0.268.0 → 0.268.1

package/README.md

@@ -86,7 +86,11 @@ See the design reference for the full architecture: [`docs/architecture/widget-m
 
 ## Status
 
-`v0.268.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.268.1` — 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.268.1 (contract 1.218.0)
+
+**The web `DateTimePicker`'s hour and minute columns no longer look broken.** The browser drew its scrollbar inside each narrow column, which cut the chosen hour and minute off on one side. The columns now hide the scrollbar and fade their top and bottom edges to show they scroll. The keyboard focus ring is drawn in full, and a row reached with the arrow keys stops clear of the fade. No API change; native keeps the operating system's picker.
 
 ### What's new in 0.268.0 (contract 1.218.0)
 

package/dist/datetimepicker-time-columns.js

@@ -14,6 +14,9 @@ const COLUMN_WIDTH = 64;
 const HOURS = Array.from({ length: 24 }, (_, i) => i);
 const MINUTES = Array.from({ length: 60 }, (_, i) => i);
 const LIST_KEYS = ["ArrowDown", "ArrowUp", "Home", "End"];
+// Fades the edges in place of a scrollbar, which would clip cells.
+const FADE = 24;
+const EDGE_FADE = `linear-gradient(to bottom, transparent, #000 ${FADE}px, #000 calc(100% - ${FADE}px), transparent)`;
 
 /** @param {{View: any, Text: any, Pressable: any, ScrollView: any, Platform: any}} rn */
 export function makeTimeColumns(rn) {
@@ -27,7 +30,7 @@ export function makeTimeColumns(rn) {
     React.useEffect(() => {
       if (!mounted.current) {
         mounted.current = true;
-        const top = values.indexOf(chosen) * (ITEM_HEIGHT + ITEM_GAP) - (height - ITEM_HEIGHT) / 2;
+        const top = FADE + values.indexOf(chosen) * (ITEM_HEIGHT + ITEM_GAP) - (height - ITEM_HEIGHT) / 2;
         if (scroller.current && typeof scroller.current.scrollTo === "function") {
           scroller.current.scrollTo({ y: Math.max(0, top), animated: false });
         }
@@ -76,7 +79,7 @@ export function makeTimeColumns(rn) {
           "aria-selected": selected,
           disabled: option.disabled,
           testID: testID ? `${testID}-${field}-${twoDigits(option.value)}` : undefined,
-          style: cellStyle(t, { selected, current: false, disabled: option.disabled, width: COLUMN_WIDTH, height: ITEM_HEIGHT, round: true }),
+          style: cellStyle(t, { selected, current: false, disabled: option.disabled, width: COLUMN_WIDTH - 2 * ITEM_GAP, height: ITEM_HEIGHT, round: true }),
         },
         h(Text, { style: cellText(t, { selected }) }, twoDigits(option.value)),
       );
@@ -87,7 +90,15 @@ export function makeTimeColumns(rn) {
       h(Text, { "aria-hidden": true, style: { textAlign: "center", fontFamily: t.fontFamily, fontSize: t.helperSize, fontWeight: "500", color: t.helperColor } }, name),
       h(
         ScrollView,
-        { ref: scroller, role: "listbox", accessibilityLabel: name, style: { height }, contentContainerStyle: { gap: ITEM_GAP, paddingVertical: ITEM_GAP } },
+        {
+          ref: scroller,
+          role: "listbox",
+          accessibilityLabel: name,
+          showsVerticalScrollIndicator: false,
+          style: { height, maskImage: EDGE_FADE, WebkitMaskImage: EDGE_FADE, scrollPaddingBlock: FADE },
+          // The first and last rows can scroll clear of the fade.
+          contentContainerStyle: { gap: ITEM_GAP, paddingVertical: FADE, paddingHorizontal: ITEM_GAP },
+        },
         ...options.map(item),
       ),
     );

package/package.json

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