@godxjp/ui 22.0.0 → 23.1.0

package/dist/i18n/messages/en.json

@@ -341,7 +341,9 @@
     },
     "numberInput": {
       "increment": "Increase",
-      "decrement": "Decrease"
+      "decrement": "Decrease",
+      "incrementField": "Increase {label}",
+      "decrementField": "Decrease {label}"
     }
   },
   "navigation": {
@@ -368,6 +370,7 @@
     },
     "filterBar": {
       "appliedFilters": "Applied filters",
+      "clearFilter": "Clear {label} selection",
       "removeFilter": "Remove filter: {label}",
       "resultCount": {
         "one": "{count} result",
@@ -442,6 +445,7 @@
   },
   "dateFormat": {
     "iso": "ISO (yyyy-MM-dd)",
+    "ymd": "Year / Month / Day (yyyy/MM/dd)",
     "dmy": "Day / Month / Year",
     "mdy": "Month / Day / Year"
   },

package/dist/i18n/messages/ja.json

@@ -334,7 +334,9 @@
     },
     "numberInput": {
       "increment": "増やす",
-      "decrement": "減らす"
+      "decrement": "減らす",
+      "incrementField": "{label}を増やす",
+      "decrementField": "{label}を減らす"
     }
   },
   "navigation": {
@@ -361,6 +363,7 @@
     },
     "filterBar": {
       "appliedFilters": "適用中のフィルター",
+      "clearFilter": "{label}の選択をクリア",
       "removeFilter": "フィルターを解除: {label}",
       "resultCount": "{count} 件の結果"
     },
@@ -429,6 +432,7 @@
   },
   "dateFormat": {
     "iso": "YYYY-MM-DD（年-月-日）",
+    "ymd": "YYYY/MM/DD（年/月/日）",
     "dmy": "日/月/年",
     "mdy": "月/日/年"
   },

package/dist/i18n/messages/vi.json

@@ -335,7 +335,9 @@
     },
     "numberInput": {
       "increment": "Tăng",
-      "decrement": "Giảm"
+      "decrement": "Giảm",
+      "incrementField": "Tăng {label}",
+      "decrementField": "Giảm {label}"
     }
   },
   "navigation": {
@@ -362,6 +364,7 @@
     },
     "filterBar": {
       "appliedFilters": "Bộ lọc đang áp dụng",
+      "clearFilter": "Xóa lựa chọn {label}",
       "removeFilter": "Bỏ bộ lọc: {label}",
       "resultCount": "{count} kết quả"
     },
@@ -430,6 +433,7 @@
   },
   "dateFormat": {
     "iso": "ISO (yyyy-MM-dd)",
+    "ymd": "Năm / Tháng / Ngày (yyyy/MM/dd)",
     "dmy": "Ngày / Tháng / Năm",
     "mdy": "Tháng / Ngày / Năm"
   },

package/dist/lib/breakpoint-token.d.ts

@@ -0,0 +1,8 @@
+/**
+ * True while the viewport is at or below the width the theme token `token` names.
+ *
+ * The token is read once per mount rather than at module scope: the fallback is what SSR and the
+ * first client render agree on, and the themed value arrives in the effect. Same-value updates
+ * bail out inside React, so a theme that left the default alone re-renders nothing.
+ */
+export declare function useMaxWidthBreakpoint(token: string, fallbackQuery: string): boolean;

package/dist/lib/breakpoint-token.js

@@ -0,0 +1,29 @@
+"use client";
+import * as React from "react";
+import { useMediaQuery } from "./hooks.js";
+function cssLengthToPx(value, rootFontSize) {
+  const match = /^(-?\d*\.?\d+)(px|rem|em)?$/.exec(value.trim());
+  if (match == null) return void 0;
+  const amount = Number(match[1]);
+  if (!Number.isFinite(amount)) return void 0;
+  return match[2] === "rem" || match[2] === "em" ? amount * rootFontSize : amount;
+}
+function readMaxWidthQuery(token, fallbackQuery) {
+  if (typeof document === "undefined" || typeof window.getComputedStyle !== "function") {
+    return fallbackQuery;
+  }
+  const rootStyle = window.getComputedStyle(document.documentElement);
+  const rootFontSize = cssLengthToPx(rootStyle.fontSize || "16px", 16) ?? 16;
+  const px = cssLengthToPx(rootStyle.getPropertyValue(token), rootFontSize);
+  return px == null ? fallbackQuery : `(max-width: ${String(px)}px)`;
+}
+function useMaxWidthBreakpoint(token, fallbackQuery) {
+  const [query, setQuery] = React.useState(fallbackQuery);
+  React.useEffect(() => {
+    setQuery(readMaxWidthQuery(token, fallbackQuery));
+  }, [token, fallbackQuery]);
+  return useMediaQuery(query);
+}
+export {
+  useMaxWidthBreakpoint
+};

package/dist/lib/select-options.d.ts

@@ -0,0 +1,21 @@
+import type { SearchSelectOptionProp, SelectFieldNamesProp, SelectOptionGroupProp } from "../props/components/data-entry.prop.js";
+/**
+ * One list of rows, whatever shape the call site had.
+ *
+ * `Select` accepts three spellings of the same thing and they all have to arrive at the engine as
+ * ONE flat array, or every feature downstream (filtering, `maxCount`, the hidden `<option>` list)
+ * would need to know about all three:
+ *
+ *   • this library's flat rows, `{ value, label, group? }`
+ *   • antd's nested groups, `{ label, options: [...] }`
+ *   • a foreign row read through `fieldNames`, `{ id, name, children }`
+ *
+ * Written once, here, rather than in both `select.tsx` and `search-select.tsx` — the two branches
+ * of one component must not disagree about what an option is. Group headings survive as the flat
+ * `group` string the rows already carried, so a grouped list renders identically whichever
+ * spelling produced it.
+ */
+/** A row whose keys are not known ahead of time — what `fieldNames` exists to read. */
+type RawOption = Record<string, unknown>;
+export declare function normalizeSelectOptions(options: readonly (SearchSelectOptionProp | SelectOptionGroupProp | RawOption)[] | undefined, fieldNames?: SelectFieldNamesProp): SearchSelectOptionProp[];
+export {};

package/dist/lib/select-options.js

@@ -0,0 +1,46 @@
+function text(value) {
+  if (typeof value === "string" || typeof value === "number" || typeof value === "bigint") {
+    return String(value);
+  }
+  return "";
+}
+function groupChildren(option, optionsKey) {
+  const children = option[optionsKey];
+  return Array.isArray(children) ? children : void 0;
+}
+function normalizeSelectOptions(options, fieldNames) {
+  if (!options?.length) return [];
+  const labelKey = fieldNames?.label ?? "label";
+  const valueKey = fieldNames?.value ?? "value";
+  const optionsKey = fieldNames?.options ?? "options";
+  const groupLabelKey = fieldNames?.groupLabel ?? labelKey;
+  const disabledKey = fieldNames?.disabled ?? "disabled";
+  const flat = [];
+  const push = (raw, group) => {
+    const value = text(raw[valueKey]);
+    const label = text(raw[labelKey]);
+    flat.push({
+      ...raw,
+      value,
+      // A row with no label reads as its own value — the id is at least identifiable, where an
+      // empty row is not selectable by sight or by type-to-select.
+      label: label || value,
+      disabled: raw[disabledKey] === true || void 0,
+      // A row inside a group takes the group's heading; a flat row keeps the `group` it declared.
+      group: group ?? (typeof raw.group === "string" ? raw.group : void 0)
+    });
+  };
+  for (const entry of options) {
+    const children = groupChildren(entry, optionsKey);
+    if (children) {
+      const heading = text(entry[groupLabelKey]) || void 0;
+      for (const child of children) push(child, heading);
+      continue;
+    }
+    push(entry, void 0);
+  }
+  return flat;
+}
+export {
+  normalizeSelectOptions
+};

package/dist/props/components/data-display.prop.d.ts

@@ -28,7 +28,7 @@ export type ProseProp = {
     className?: ClassNameProp;
     children?: ChildrenProp;
 };
-import type { ActionProp, ClassNameProp, DescriptionProp, IconProp, TitleProp, ColumnDefProp, GetRowIdProp, OnRowClickProp, OnSelectChangeProp, OnSortChangeProp, OnTableDensityChangeProp, SelectedIdsProp, SortStateProp, TableDensityProp, TablePresetProp, BreakpointProp, DensityProp, ChildrenProp, PendingProp, ToneProp, AvatarShapeProp, HeadingLevelProp, HandlerProp, SizeProp, LabelProp, IdProp, DescriptionsLayoutProp, DescriptionsColumnProp, DescriptionsSpanProp, DescriptionsItemsProp, SortDirectionProp, OnColumnFilterChangeProp, OnRowProp, TableExpandableProp, TableRowSelectionProp, TableScrollProp, TableStickyProp, TableSummaryProp, DisabledProp, ValueProp, DefaultValueProp, OnValueChangeProp } from "../vocabulary/index.js";
+import type { ActionProp, ClassNameProp, DescriptionProp, IconProp, TitleProp, ColumnDefProp, GetRowIdProp, GetRowLabelProp, OnRowClickProp, OnSelectChangeProp, OnSortChangeProp, OnTableDensityChangeProp, SelectedIdsProp, SortStateProp, TableDensityProp, TablePresetProp, BreakpointProp, DensityProp, ChildrenProp, PendingProp, ToneProp, AvatarShapeProp, HeadingLevelProp, HandlerProp, SizeProp, LabelProp, IdProp, DescriptionsLayoutProp, DescriptionsColumnProp, DescriptionsSpanProp, DescriptionsItemsProp, SortDirectionProp, OnColumnFilterChangeProp, OnRowProp, TableExpandableProp, TableRowSelectionProp, TableScrollProp, TableStickyProp, TableSummaryProp, DisabledProp, ValueProp, DefaultValueProp, OnValueChangeProp } from "../vocabulary/index.js";
 import type { TreeFieldNamesProp, TreeOptionProp } from "./data-entry.prop.js";
 /**
  * One key in a `Legend`: a tone, and the words that tone stands for.
@@ -255,6 +255,13 @@ export type DataTableProp<T> = {
     data: T[];
     columns: ColumnDefProp<T>[];
     getRowId?: GetRowIdProp<T>;
+    /**
+     * Human name of a row, announced by its selection checkbox or radio as "Select row {label}".
+     * Default: the text of the `priority: "primary"` column, else of the first column, when that
+     * value is a string or number; the row id only as a last resort. `rowSelection.getCheckboxProps`
+     * `aria-label` still overrides a single row.
+     */
+    getRowLabel?: GetRowLabelProp<T>;
     selectable?: boolean;
     selected?: SelectedIdsProp;
     onSelectChange?: OnSelectChangeProp;
@@ -403,9 +410,10 @@ export type PermissionMatrixProp = {
 export type ScrollAreaAnchorProp = "none" | "bottom";
 /** @see ScrollArea */
 /**
- * @see ScrollArea — which AXES scroll. This is not decoration: Radix sets the viewport's
- * `overflowX`/`overflowY` inline from which scrollbars are mounted, so an axis with no `ScrollBar`
- * is `overflow: hidden` and its content is CLIPPED, not merely un-barred.
+ * @see ScrollArea — which AXES scroll. This is not decoration: it IS the `overflow` the element
+ * carries, so an axis this does not name is `hidden` and its content is CLIPPED, not merely
+ * un-barred. It is also the whole replacement for mounting a `<ScrollBar>`, which was how the
+ * Radix-era component was told to open a second axis.
  *
  * `both` is a third value rather than an array or a pair of booleans because the axes are one
  * decision — a pane scrolls down, across, or freely — and a closed union is what `check:prop-vocabulary`
@@ -419,12 +427,14 @@ export type ScrollAreaProp = {
      *
      * Reach for `horizontal` for a strip of non-shrinking columns (a board, a lane of cards): the
      * viewport keeps its tab stop, so the strip is scrollable from the keyboard, and the consumer
-     * writes no overflow styling of its own.
+     * writes no overflow styling of its own. `both` is what replaces a vertical area that also
+     * mounted `<ScrollBar orientation="horizontal" />`.
      */
     orientation?: ScrollAreaOrientationProp;
     /**
-     * Ref to the element that actually SCROLLS — the Radix viewport — not the root. The root is
-     * `overflow: hidden` and never scrolls, so the component's own `ref` cannot serve.
+     * Ref to the element that actually SCROLLS. Since v23 that is the component's own element, so
+     * this and `ref` hand back the SAME node — it is kept because it names the thing precisely, and
+     * because the Radix-era shape (a root wrapping a separate viewport) made `ref` the wrong handle.
      */
     viewportRef?: React.Ref<HTMLDivElement>;
     /** Edge the viewport sticks to as content grows. Default `none` (inert). */