twico-ui 1.10.0 → 1.11.0

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 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.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 };
@@ -8699,6 +8761,7 @@ function Datatable({
   serverMode = false,
   rowCount,
   onServerChange,
+  onColumnVisibilityChange,
   batchActions = [],
   showExport = false,
   showDensity = false,
@@ -9005,6 +9068,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 +9423,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 +15466,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 +15606,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 +15859,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 +15927,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})`,