twico-ui 1.10.0 → 1.11.0

package/dist/index.d.cts

@@ -1783,8 +1783,13 @@ interface DatatableProps<T = any> extends Omit<React.HTMLAttributes<HTMLDivEleme
   serverMode?: boolean;
   /** Total row count on the server (required for pagination in server mode). */
   rowCount?: number;
-  /** Server-mode callback fired (debounced) whenever the query changes. */
+  /** Server-mode callback fired (debounced) whenever the query changes. The query now
+   *  includes `visibleColumns`/`hiddenColumns` so you can project only the shown columns. */
   onServerChange?: (state: DatatableQuery) => void;
+  /** Fired when the built-in Columns menu shows/hides a column, with the currently visible
+   *  column `field`s (in column order). Lets a server-mode grid drive column projection from
+   *  the built-in menu instead of a duplicate control. Not fired on initial mount. */
+  onColumnVisibilityChange?: (visible: string[]) => void;
   /** Show the Export toolbar button (split button: click = CSV, chevron = format menu). @default false */
   showExport?: boolean;
   /** Show the row-density toolbar button (cycles compact / standard / comfortable). The `density` prop
@@ -1903,6 +1908,14 @@ interface DatatableQuery {
   filters: DatatableFilter[];
   /** Quick-search text. */
   quickFilter: string;
+  /** `field`s of the columns currently shown (in column order) — the built-in Columns menu
+   *  is the source of truth. Use it to fetch/project only the visible columns server-side.
+   *  Always populated by the grid in `onServerChange`; optional so a hand-built query passed
+   *  to `runDatatableQuery` (which ignores it) need not supply it. */
+  visibleColumns?: string[];
+  /** `field`s of the columns currently hidden via the Columns menu. Always populated in
+   *  `onServerChange`; optional for the same reason as `visibleColumns`. */
+  hiddenColumns?: string[];
 }
 
 interface DatatableColumn<T = any> {

package/dist/index.d.ts

@@ -1783,8 +1783,13 @@ interface DatatableProps<T = any> extends Omit<React.HTMLAttributes<HTMLDivEleme
   serverMode?: boolean;
   /** Total row count on the server (required for pagination in server mode). */
   rowCount?: number;
-  /** Server-mode callback fired (debounced) whenever the query changes. */
+  /** Server-mode callback fired (debounced) whenever the query changes. The query now
+   *  includes `visibleColumns`/`hiddenColumns` so you can project only the shown columns. */
   onServerChange?: (state: DatatableQuery) => void;
+  /** Fired when the built-in Columns menu shows/hides a column, with the currently visible
+   *  column `field`s (in column order). Lets a server-mode grid drive column projection from
+   *  the built-in menu instead of a duplicate control. Not fired on initial mount. */
+  onColumnVisibilityChange?: (visible: string[]) => void;
   /** Show the Export toolbar button (split button: click = CSV, chevron = format menu). @default false */
   showExport?: boolean;
   /** Show the row-density toolbar button (cycles compact / standard / comfortable). The `density` prop
@@ -1903,6 +1908,14 @@ interface DatatableQuery {
   filters: DatatableFilter[];
   /** Quick-search text. */
   quickFilter: string;
+  /** `field`s of the columns currently shown (in column order) — the built-in Columns menu
+   *  is the source of truth. Use it to fetch/project only the visible columns server-side.
+   *  Always populated by the grid in `onServerChange`; optional so a hand-built query passed
+   *  to `runDatatableQuery` (which ignores it) need not supply it. */
+  visibleColumns?: string[];
+  /** `field`s of the columns currently hidden via the Columns menu. Always populated in
+   *  `onServerChange`; optional for the same reason as `visibleColumns`. */
+  hiddenColumns?: string[];
 }
 
 interface DatatableColumn<T = any> {

package/dist/index.mjs

@@ -25,7 +25,7 @@ function useScopedStyles(id, css) {
     }
     if (el.textContent !== css) el.textContent = css;
   }, [id, css, nonce]);
-  return SUPPORTS_STYLE_HOIST && css ? React51.createElement("style", { href: id, precedence: "twc-ui", nonce }, css) : null;
+  return SUPPORTS_STYLE_HOIST && css ? React51.createElement("style", { href: id, precedence: "twc-ui" }, css) : null;
 }
 
 // components/TwicoProvider.jsx
@@ -1287,6 +1287,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}"]`;
@@ -1304,7 +1360,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 };
@@ -8678,6 +8740,7 @@ function Datatable({
   serverMode = false,
   rowCount,
   onServerChange,
+  onColumnVisibilityChange,
   batchActions = [],
   showExport = false,
   showDensity = false,
@@ -8984,6 +9047,19 @@ function Datatable({
   }, [exportOpen]);
   const colByField = React51__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__default.useMemo(() => JSON.parse(colFieldsKey), [colFieldsKey]);
+  const hiddenKey = JSON.stringify([...hidden].filter((f) => typeof f === "string").sort());
+  const visibleColumns = React51__default.useMemo(() => {
+    const h = new Set(JSON.parse(hiddenKey));
+    return colFields.filter((f) => !h.has(f));
+  }, [colFields, hiddenKey]);
+  const hiddenColumns = React51__default.useMemo(() => {
+    const h = new Set(JSON.parse(hiddenKey));
+    return colFields.filter((f) => h.has(f));
+  }, [colFields, hiddenKey]);
   const ordered = React51__default.useMemo(() => {
     const orderIdx = (f) => {
       const i = order.indexOf(f);
@@ -9326,11 +9402,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__default.useRef(onColumnVisibilityChange);
+  onColVisRef.current = onColumnVisibilityChange;
+  const lastVisibleKey = React51__default.useRef(null);
+  React51__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);
   }
@@ -15353,6 +15445,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) {
@@ -15487,8 +15585,10 @@ var Container = React51__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
       },
@@ -15738,7 +15838,10 @@ var Heading = React51__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)",
@@ -15803,7 +15906,10 @@ var Text = React51__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})`,