twico-ui 1.10.0 → 1.11.1

package/CHANGELOG.md

@@ -2,6 +2,28 @@
 
 All notable changes to Twico UI are documented here (newest first). This file is generated automatically on each release by [semantic-release](https://semantic-release.gitbook.io/) from [Conventional Commits](https://www.conventionalcommits.org/) — do not edit it by hand. The same notes appear on each [GitHub Release](https://github.com/EncryptionL/twico-ui/releases).
 
+## [1.11.1](https://github.com/EncryptionL/twico-ui/compare/v1.11.0...v1.11.1) (2026-07-09)
+
+
+### Bug Fixes
+
+* **datatable:** pointer cursor on the Columns-panel visibility toggle ([9d30343](https://github.com/EncryptionL/twico-ui/commit/9d303434f51c4a4131cf393e56f8534d53f0a7bb))
+* **tooltip:** grow horizontally + point the arrow at the trigger ([19aa76a](https://github.com/EncryptionL/twico-ui/commit/19aa76a6ffe597d81aff00a4144182661db0971b))
+
+# [1.11.0](https://github.com/EncryptionL/twico-ui/compare/v1.10.0...v1.11.0) (2026-07-07)
+
+
+### Bug Fixes
+
+* **app-shell:** suppress the focus ring on the tabindex=-1 skip target ([#190](https://github.com/EncryptionL/twico-ui/issues/190)) ([88fd874](https://github.com/EncryptionL/twico-ui/commit/88fd874d659115407492d7ab78997f5b88ee46fa))
+* **styles:** omit CSP nonce from React 19 precedence styles ([#189](https://github.com/EncryptionL/twico-ui/issues/189)) ([c86c7e8](https://github.com/EncryptionL/twico-ui/commit/c86c7e8c09d559f1749431cc8c5075d382f6ca8f))
+* **sx:** normalize box-model shorthands to longhands ([#188](https://github.com/EncryptionL/twico-ui/issues/188)) ([3807718](https://github.com/EncryptionL/twico-ui/commit/38077184aeb58cfe5e4a4989b8cacb10e6068475))
+
+
+### Features
+
+* **datatable:** expose column visibility to server mode ([#191](https://github.com/EncryptionL/twico-ui/issues/191)) ([1412c13](https://github.com/EncryptionL/twico-ui/commit/1412c135095f091557697ea04a9f700ee0b472cc))
+
 # [1.10.0](https://github.com/EncryptionL/twico-ui/compare/v1.9.0...v1.10.0) (2026-07-05)
 
 

package/dist/index.cjs

@@ -46,7 +46,7 @@ function useScopedStyles(id, css) {
     }
     if (el.textContent !== css) el.textContent = css;
   }, [id, css, nonce]);
-  return SUPPORTS_STYLE_HOIST && css ? React51__namespace.createElement("style", { href: id, precedence: "twc-ui", nonce }, css) : null;
+  return SUPPORTS_STYLE_HOIST && css ? React51__namespace.createElement("style", { href: id, precedence: "twc-ui" }, css) : null;
 }
 
 // components/TwicoProvider.jsx
@@ -1308,6 +1308,62 @@ function compileSx(obj, selector) {
   out += rules;
   return out;
 }
+var BOX_EDGE4 = {
+  padding: ["paddingTop", "paddingRight", "paddingBottom", "paddingLeft"],
+  margin: ["marginTop", "marginRight", "marginBottom", "marginLeft"],
+  inset: ["top", "right", "bottom", "left"]
+};
+var BOX_EDGE2 = {
+  paddingBlock: ["paddingBlockStart", "paddingBlockEnd"],
+  paddingInline: ["paddingInlineStart", "paddingInlineEnd"],
+  marginBlock: ["marginBlockStart", "marginBlockEnd"],
+  marginInline: ["marginInlineStart", "marginInlineEnd"]
+};
+function splitShorthand(value) {
+  const s = String(value).trim();
+  if (!s) return [];
+  const out = [];
+  let depth = 0, cur = "";
+  for (let i = 0; i < s.length; i++) {
+    const c = s[i];
+    if (c === "(") {
+      depth++;
+      cur += c;
+    } else if (c === ")") {
+      depth = Math.max(0, depth - 1);
+      cur += c;
+    } else if (depth === 0 && (c === " " || c === "	" || c === "\n" || c === "\r")) {
+      if (cur) {
+        out.push(cur);
+        cur = "";
+      }
+    } else cur += c;
+  }
+  if (cur) out.push(cur);
+  return out;
+}
+function expandBoxShorthand(key, value) {
+  const four = BOX_EDGE4[key];
+  const two = BOX_EDGE2[key];
+  if (!four && !two || value == null) return null;
+  if (typeof value === "number") return (four || two).map((edge) => [edge, value]);
+  const p = splitShorthand(value);
+  if (p.length === 0) return null;
+  if (two) return [[two[0], p[0]], [two[1], p.length > 1 ? p[1] : p[0]]];
+  let top, right, bottom, left;
+  if (p.length === 1) top = right = bottom = left = p[0];
+  else if (p.length === 2) {
+    top = bottom = p[0];
+    right = left = p[1];
+  } else if (p.length === 3) {
+    top = p[0];
+    right = left = p[1];
+    bottom = p[2];
+  } else {
+    [top, right, bottom, left] = p;
+  }
+  return [[four[0], top], [four[1], right], [four[2], bottom], [four[3], left]];
+}
 function buildSx(sx, uid) {
   if (!isObject(sx)) return { flatStyle: void 0, css: "" };
   const scope = `[data-twc-sx="${uid}"]`;
@@ -1325,7 +1381,13 @@ function buildSx(sx, uid) {
         css += compileSx(value, resolveSelector(key, scope));
       }
     } else {
-      (flatStyle || (flatStyle = {}))[key] = value;
+      const expanded = expandBoxShorthand(key, value);
+      if (expanded) {
+        flatStyle || (flatStyle = {});
+        for (const [k, v] of expanded) flatStyle[k] = v;
+      } else {
+        (flatStyle || (flatStyle = {}))[key] = value;
+      }
     }
   }
   return { flatStyle, css };
@@ -7776,7 +7838,12 @@ var TOOLTIP_CSS = `
   padding: 6px 10px; border-radius: var(--radius-md);
   background: var(--color-text); color: var(--color-surface);
   font-family: var(--font-sans); font-size: var(--text-xs); font-weight: var(--font-medium);
-  line-height: 1.3; white-space: normal; max-width: var(--_tw-maxw, 260px); box-shadow: var(--shadow-md);
+  line-height: 1.3; white-space: normal;
+  /* Grow horizontally to max-width, then wrap. max-content sizes to the content (capped by
+     max-width) and \u2014 unlike shrink-to-fit width:auto \u2014 is NOT constrained by the space between
+     the fixed left edge and the viewport edge, so a tooltip near the right edge no longer
+     collapses to ~1 word per line and stretch vertically. */
+  width: max-content; max-width: var(--_tw-maxw, 320px); box-shadow: var(--shadow-md);
   opacity: 0; transform: scale(0.9); transition: opacity var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-spring);
 }
 .twc-tooltip[data-show="true"] { pointer-events: auto; }
@@ -7787,10 +7854,13 @@ var TOOLTIP_CSS = `
 .twc-tooltip[data-place="right"]  { transform-origin: left center; translate: 0 -50%; }
 .twc-tooltip[data-show="true"][data-place="top"], .twc-tooltip[data-show="true"][data-place="bottom"] { transform: scale(1); }
 .twc-tooltip__arrow { position: absolute; width: 7px; height: 7px; background: var(--color-text); transform: rotate(45deg); }
-.twc-tooltip[data-place="top"] .twc-tooltip__arrow    { bottom: -3px; left: 50%; margin-left: -3.5px; }
-.twc-tooltip[data-place="bottom"] .twc-tooltip__arrow { top: -3px; left: 50%; margin-left: -3.5px; }
-.twc-tooltip[data-place="left"] .twc-tooltip__arrow   { right: -3px; top: 50%; margin-top: -3.5px; }
-.twc-tooltip[data-place="right"] .twc-tooltip__arrow  { left: -3px; top: 50%; margin-top: -3.5px; }
+/* Arrow tracks the trigger via --_tw-arrow-x/y (px from the tooltip edge) instead of being
+   locked to the centre, so it still points at the trigger when the bubble is clamped near a
+   viewport edge. Falls back to 50% before measurement / SSR. */
+.twc-tooltip[data-place="top"] .twc-tooltip__arrow    { bottom: -3px; left: var(--_tw-arrow-x, 50%); margin-left: -3.5px; }
+.twc-tooltip[data-place="bottom"] .twc-tooltip__arrow { top: -3px; left: var(--_tw-arrow-x, 50%); margin-left: -3.5px; }
+.twc-tooltip[data-place="left"] .twc-tooltip__arrow   { right: -3px; top: var(--_tw-arrow-y, 50%); margin-top: -3.5px; }
+.twc-tooltip[data-place="right"] .twc-tooltip__arrow  { left: -3px; top: var(--_tw-arrow-y, 50%); margin-top: -3.5px; }
 @media (prefers-reduced-motion: reduce) { .twc-tooltip { transition: opacity var(--duration-fast) linear; transform: none; } }
 `;
 function Tooltip({
@@ -7844,10 +7914,22 @@ function Tooltip({
     else if (placement === "left" && spaceLeft < tw && spaceRight > spaceLeft) side = "right";
     else if (placement === "right" && spaceRight < tw && spaceLeft > spaceRight) side = "left";
     const base = { left: "auto", right: "auto", top: "auto", bottom: "auto", place: side };
-    if (side === "bottom") setCoords({ ...base, left: clampX(cx), top: Math.round(r2.bottom + gap) });
-    else if (side === "left") setCoords({ ...base, top: clampY(cy), right: Math.round(vw - r2.left + gap) });
-    else if (side === "right") setCoords({ ...base, top: clampY(cy), left: Math.round(r2.right + gap) });
-    else setCoords({ ...base, left: clampX(cx), bottom: Math.round(vh - r2.top + gap) });
+    const AP = 12;
+    const arrowX = (center) => tw ? Math.round(Math.min(Math.max(cx - (center - tw / 2), AP), tw - AP)) : void 0;
+    const arrowY = (center) => th ? Math.round(Math.min(Math.max(cy - (center - th / 2), AP), th - AP)) : void 0;
+    if (side === "bottom") {
+      const c = clampX(cx);
+      setCoords({ ...base, left: c, top: Math.round(r2.bottom + gap), arrowX: arrowX(c) });
+    } else if (side === "left") {
+      const c = clampY(cy);
+      setCoords({ ...base, top: c, right: Math.round(vw - r2.left + gap), arrowY: arrowY(c) });
+    } else if (side === "right") {
+      const c = clampY(cy);
+      setCoords({ ...base, top: c, left: Math.round(r2.right + gap), arrowY: arrowY(c) });
+    } else {
+      const c = clampX(cx);
+      setCoords({ ...base, left: c, bottom: Math.round(vh - r2.top + gap), arrowX: arrowX(c) });
+    }
   }, [placement]);
   React51__namespace.default.useEffect(() => {
     place();
@@ -7904,7 +7986,15 @@ function Tooltip({
               "aria-hidden": show ? void 0 : "true",
               onMouseEnter: cancelClose,
               onMouseLeave: close,
-              style: { position: "fixed", left: coords.left, right: coords.right, top: coords.top, bottom: coords.bottom },
+              style: {
+                position: "fixed",
+                left: coords.left,
+                right: coords.right,
+                top: coords.top,
+                bottom: coords.bottom,
+                "--_tw-arrow-x": coords.arrowX != null ? `${coords.arrowX}px` : void 0,
+                "--_tw-arrow-y": coords.arrowY != null ? `${coords.arrowY}px` : void 0
+              },
               children: [
                 label,
                 /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-tooltip__arrow", "aria-hidden": "true" })
@@ -8284,7 +8374,8 @@ th.twc-dt__rownum .twc-dt__th-inner { padding-inline: 8px; gap: 2px; justify-con
 .twc-dt__col-pin:hover { background: var(--color-surface); color: var(--color-text); }
 .twc-dt__col-pin[data-on="true"] { color: var(--color-primary); background: var(--color-primary-subtle); }
 .twc-dt__col-pin svg { width: 14px; height: 14px; }
-.twc-dt__sw { width: 32px; height: 18px; border-radius: var(--radius-full); background: var(--color-border-strong); position: relative; flex: none; transition: background-color var(--duration-base); }
+.twc-dt__sw { width: 32px; height: 18px; border-radius: var(--radius-full); background: var(--color-border-strong); position: relative; flex: none; cursor: pointer; transition: background-color var(--duration-base); }
+.twc-dt__sw[aria-disabled="true"] { cursor: default; }
 .twc-dt__sw[data-on="true"] { background: var(--color-primary); }
 .twc-dt__sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: var(--radius-full); background: var(--color-primary-fg); box-shadow: var(--shadow-sm); transition: transform var(--duration-base) var(--ease-spring); }
 .twc-dt__sw:focus-visible { outline: none; box-shadow: var(--ring); }
@@ -8699,6 +8790,7 @@ function Datatable({
   serverMode = false,
   rowCount,
   onServerChange,
+  onColumnVisibilityChange,
   batchActions = [],
   showExport = false,
   showDensity = false,
@@ -9005,6 +9097,19 @@ function Datatable({
   }, [exportOpen]);
   const colByField = React51__namespace.default.useMemo(() => Object.fromEntries(cols.map((c) => [c.field, c])), [cols]);
   const visibleCols = cols.filter((c) => !hidden.has(c.field));
+  const colFieldsKey = JSON.stringify(
+    cols.filter((c) => typeof c.field === "string" && c.type !== "actions").map((c) => c.field)
+  );
+  const colFields = React51__namespace.default.useMemo(() => JSON.parse(colFieldsKey), [colFieldsKey]);
+  const hiddenKey = JSON.stringify([...hidden].filter((f) => typeof f === "string").sort());
+  const visibleColumns = React51__namespace.default.useMemo(() => {
+    const h = new Set(JSON.parse(hiddenKey));
+    return colFields.filter((f) => !h.has(f));
+  }, [colFields, hiddenKey]);
+  const hiddenColumns = React51__namespace.default.useMemo(() => {
+    const h = new Set(JSON.parse(hiddenKey));
+    return colFields.filter((f) => h.has(f));
+  }, [colFields, hiddenKey]);
   const ordered = React51__namespace.default.useMemo(() => {
     const orderIdx = (f) => {
       const i = order.indexOf(f);
@@ -9347,11 +9452,27 @@ function Datatable({
         pageSize: sizeVal,
         sort,
         filters: filters.map(({ id, ...f }) => f),
-        quickFilter: quick.trim()
+        quickFilter: quick.trim(),
+        visibleColumns,
+        hiddenColumns
+        // #191: server can project only the visible columns
       });
     }, 250);
     return () => clearTimeout(t);
-  }, [serverMode, pageVal, sizeVal, sort, filters, quick]);
+  }, [serverMode, pageVal, sizeVal, sort, filters, quick, visibleColumns, hiddenColumns]);
+  const onColVisRef = React51__namespace.default.useRef(onColumnVisibilityChange);
+  onColVisRef.current = onColumnVisibilityChange;
+  const lastVisibleKey = React51__namespace.default.useRef(null);
+  React51__namespace.default.useEffect(() => {
+    const key = JSON.stringify(visibleColumns);
+    if (lastVisibleKey.current === null) {
+      lastVisibleKey.current = key;
+      return;
+    }
+    if (lastVisibleKey.current === key) return;
+    lastVisibleKey.current = key;
+    onColVisRef.current?.(visibleColumns);
+  }, [visibleColumns]);
   function cycleSort(field) {
     setSort((s) => !s || s.field !== field ? { field, dir: "asc" } : s.dir === "asc" ? { field, dir: "desc" } : null);
   }
@@ -15374,6 +15495,12 @@ var SHELL_CSS = `
   min-height: 60px; padding-inline: var(--space-5); border-bottom: var(--border-thin) solid var(--color-border); background: var(--color-surface); }
 .twc-shell__content { flex: 1 1 auto; min-height: 0; overflow: auto; }
 .twc-shell__content[data-padded="true"] { padding: var(--space-6) var(--space-5); }
+/* #190: <main> is the skip-link target (tabindex="-1") \u2014 a programmatic focus target,
+   not tab-reachable and not an interactive control. Clicking content mouse-focuses it,
+   then the first keypress flips to keyboard modality and :focus-visible would draw a UA
+   outline around the ENTIRE content area. Suppress it \u2014 the skip LINK keeps its own
+   visible ring (.twc-shell__skip:focus-visible) and SR focus announcement is unaffected. */
+.twc-shell__content:focus, .twc-shell__content:focus-visible { outline: none; }
 /* Mobile: stack the shell so the sidebar (rendered as an off-canvas overlay) no
    longer reserves a column \u2014 the main content spans the full width. */
 @media (max-width: 720px) {
@@ -15508,8 +15635,10 @@ var Container = React51__namespace.default.forwardRef(function Container2({
       style: {
         width: "100%",
         maxWidth: typeof max === "number" ? `${max}px` : max,
-        marginInline: "auto",
-        paddingInline: padded ? "var(--space-5)" : void 0,
+        marginInlineStart: "auto",
+        marginInlineEnd: "auto",
+        paddingInlineStart: padded ? "var(--space-5)" : void 0,
+        paddingInlineEnd: padded ? "var(--space-5)" : void 0,
         ...style,
         ...flatStyle
       },
@@ -15759,7 +15888,10 @@ var Heading = React51__namespace.default.forwardRef(function Heading2({
       className: `twc-heading ${className}`.trim(),
       "data-twc-sx": sxAttr,
       style: {
-        margin: 0,
+        marginTop: 0,
+        marginRight: 0,
+        marginBottom: 0,
+        marginLeft: 0,
         fontFamily: "var(--font-sans)",
         fontWeight: "var(--font-bold)",
         color: "var(--color-text)",
@@ -15824,7 +15956,10 @@ var Text = React51__namespace.default.forwardRef(function Text2({
       className: `twc-text ${className}`.trim(),
       "data-twc-sx": sxAttr,
       style: {
-        margin: 0,
+        marginTop: 0,
+        marginRight: 0,
+        marginBottom: 0,
+        marginLeft: 0,
         fontFamily: "var(--font-sans)",
         lineHeight: 1.6,
         fontSize: `var(--text-${size})`,