@godxjp/ui 26.4.0 → 27.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -36,8 +36,11 @@ export type ResolvedAllowClear = {
36
36
  * Reconcile antd's `allowClear` with this library's own `clearable`.
37
37
  *
38
38
  * `allowClear` wins when present because it is the more specific statement — the object form
39
- * carries an icon and a label that `clearable` has no way to express. `clearable` remains the
40
- * name every existing call site uses, and keeps its `true` default.
39
+ * carries an icon and a label that `clearable` has no way to express. `clearable` stays as this
40
+ * library's own alias with the SAME default as antd's `allowClear` for the control: the caller
41
+ * passes that default (`undefined` reads as OFF — antd Select/TreeSelect/Input; a picker whose antd
42
+ * default is ON, DatePicker/TimePicker/Cascader, passes `true`). An antd-named prop takes antd's
43
+ * default too (docs/DESIGN-AUTHORITY.md), so a required select is not one click from empty.
41
44
  */
42
45
  export declare function resolveAllowClear(allowClear: AllowClearProp | undefined, clearable: boolean | undefined, fallbackLabel?: string): ResolvedAllowClear;
43
46
  /**
@@ -20,7 +20,7 @@ function resolveAllowClear(allowClear, clearable, fallbackLabel) {
20
20
  label: allowClear.label ?? fallbackLabel
21
21
  };
22
22
  }
23
- return { enabled: clearable !== false, label: fallbackLabel };
23
+ return { enabled: clearable === true, label: fallbackLabel };
24
24
  }
25
25
  function applyMaxTagCount(items, maxTagCount, maxTagPlaceholder) {
26
26
  if (maxTagCount === void 0 || maxTagCount < 0 || items.length <= maxTagCount) {
@@ -39,7 +39,7 @@ function SearchSelect(props) {
39
39
  loadingMessage,
40
40
  errorMessage,
41
41
  clearLabel,
42
- clearable = true,
42
+ clearable,
43
43
  disabled = false,
44
44
  readOnly = false,
45
45
  size,
@@ -237,7 +237,7 @@ function TreeSelectRoot({
237
237
  break;
238
238
  }
239
239
  };
240
- const clearControl = resolveAllowClear(allowClear, true, t("dataEntry.treeSelect.clear"));
240
+ const clearControl = resolveAllowClear(allowClear, false, t("dataEntry.treeSelect.clear"));
241
241
  const showClear = clearControl.enabled && displayKeys.length > 0 && !disabled && !readOnly && !loading;
242
242
  const surface = controlSurfaceAttrs({ variant, status, size });
243
243
  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
@@ -97,6 +97,7 @@ function Toolbar({
97
97
  onValueChange: (selected) => filter.onSelectedChange?.(selected),
98
98
  placeholder: filter.placeholder,
99
99
  disabled: disabled || filter.disabled,
100
+ allowClear: true,
100
101
  clearLabel: typeof filter.label === "string" ? t("navigation.filterBar.clearFilter", { label: filter.label }) : void 0
101
102
  }
102
103
  )
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "$comment": "AUTO-GENERATED by scripts/gen-measurement-contract.mjs — do not edit. Read this instead of guessing: docs/MEASUREMENT-CONTRACT.md.",
3
- "version": "26.4.0",
3
+ "version": "27.0.0",
4
4
  "targetSize": {
5
5
  "standard": "WCAG 2.2 SC 2.5.8 Target Size (Minimum), level AA — 24×24 CSS px",
6
6
  "min": 24,
@@ -1158,7 +1158,10 @@ export type SearchSelectBaseProp = {
1158
1158
  * as-is unless `renderError` is provided. */
1159
1159
  errorMessage?: string;
1160
1160
  clearLabel?: string;
1161
- /** Show a "clear" row when a value is selected (default true). */
1161
+ /**
1162
+ * Show the clear ✕ when a value is selected (default false — antd `allowClear`). This library's
1163
+ * own alias for `allowClear`; pass it on an OPTIONAL field whose empty state is a valid answer.
1164
+ */
1162
1165
  clearable?: boolean;
1163
1166
  disabled?: DisabledProp;
1164
1167
  /**
@@ -1241,9 +1244,10 @@ export type SearchSelectBaseProp = {
1241
1244
  */
1242
1245
  popupMatchSelectWidth?: PopupMatchWidthProp;
1243
1246
  /**
1244
- * antd `allowClear`. `true`/`false` toggles the clear ✕ (same meaning as `clearable`, which
1245
- * stays as this library's own name); the OBJECT form additionally replaces the icon and/or the
1246
- * accessible label. When both are given, `allowClear` wins — it is the more specific statement.
1247
+ * antd `allowClear` (default false, as in antd). `true`/`false` toggles the clear ✕ (same meaning
1248
+ * as `clearable`, which stays as this library's own name); the OBJECT form additionally replaces
1249
+ * the icon and/or the accessible label. When both are given, `allowClear` wins — it is the more
1250
+ * specific statement.
1247
1251
  */
1248
1252
  allowClear?: AllowClearProp;
1249
1253
  /** Fired after the value is cleared through the ✕ (antd `onClear`). */
@@ -1547,6 +1551,10 @@ export type CascaderProp = FieldA11yProps & {
1547
1551
  id?: IdProp;
1548
1552
  expandTrigger?: "click" | "hover";
1549
1553
  fieldNames?: TreeFieldNamesProp;
1554
+ /**
1555
+ * antd `allowClear` — the ✕ that clears the selected path (default true, as in antd's Cascader).
1556
+ * Pass `false` on a required field. The OBJECT form replaces the icon and/or the accessible label.
1557
+ */
1550
1558
  allowClear?: AllowClearProp;
1551
1559
  /** Control height tier (antd `size`) — the shared `--control-height` ladder. */
1552
1560
  size?: SizeProp;
@@ -1622,6 +1630,10 @@ export type TreeSelectProp = FieldA11yProps & {
1622
1630
  * per checked value under the same name (the native `<select multiple>` contract).
1623
1631
  */
1624
1632
  name?: NameProp;
1633
+ /**
1634
+ * antd `allowClear` — the ✕ that clears the selection (default false, as in antd's TreeSelect).
1635
+ * The OBJECT form additionally replaces the icon and/or the accessible label.
1636
+ */
1625
1637
  allowClear?: AllowClearProp;
1626
1638
  className?: ClassNameProp;
1627
1639
  id?: IdProp;
@@ -122,7 +122,6 @@ export default function Demo() {
122
122
  value={compareA}
123
123
  onValueChange={setCompareA}
124
124
  options={roleOptions}
125
- clearable={false}
126
125
  className="w-40"
127
126
  />
128
127
  </FormField>
@@ -131,7 +130,6 @@ export default function Demo() {
131
130
  value={compareB}
132
131
  onValueChange={setCompareB}
133
132
  options={roleOptions}
134
- clearable={false}
135
133
  className="w-40"
136
134
  />
137
135
  </FormField>
@@ -371,7 +371,6 @@ export default function Demo() {
371
371
  aria-label="ステータス"
372
372
  value={status}
373
373
  onValueChange={setStatus}
374
- clearable={false}
375
374
  options={STATUSES}
376
375
  />
377
376
  <Text size="xs" tone="muted">
@@ -95,7 +95,7 @@ export default function Demo() {
95
95
  value は ISO 3166-1 alpha-2 コード、ラベルは
96
96
  Intl.DisplayNames(CLDR)で生成する(国名を
97
97
  ハードコードしない・絵文字フラグも使わない)。 showSearch で絞り込み、name
98
- でフォーム送信。 必須項目なので clearable=false でクリア行を出さない。
98
+ でフォーム送信。 必須項目なのでクリア ✕ は出さない(allowClear はデフォルト false)。
99
99
  </CardDescription>
100
100
  </CardHeader>
101
101
  <CardContent>
@@ -106,7 +106,6 @@ export default function Demo() {
106
106
  value={billing}
107
107
  onValueChange={setBilling}
108
108
  showSearch
109
- clearable={false}
110
109
  searchPlaceholder="国名 / ISO コードで検索..."
111
110
  emptyMessage="該当する国がありません"
112
111
  options={COUNTRIES}
@@ -119,8 +118,8 @@ export default function Demo() {
119
118
  <CardHeader>
120
119
  <CardTitle level={2}>取引先の国(任意・クリア可)</CardTitle>
121
120
  <CardDescription>
122
- clearable(デフォルト true)で「指定なし」に戻せる。placeholder で空状態を案内する。
123
- 任意項目なので未選択(プレースホルダー表示)を初期値にしている。
121
+ allowClear を付けて「指定なし」に戻せるようにする(デフォルトは false)。placeholder
122
+ で空状態を案内する。 任意項目なので未選択(プレースホルダー表示)を初期値にしている。
124
123
  </CardDescription>
125
124
  </CardHeader>
126
125
  <CardContent>
@@ -131,6 +130,7 @@ export default function Demo() {
131
130
  value={partner}
132
131
  onValueChange={setPartner}
133
132
  showSearch
133
+ allowClear
134
134
  placeholder="国を選択..."
135
135
  searchPlaceholder="国名 / ISO コードで検索..."
136
136
  emptyMessage="該当する国がありません"
@@ -159,6 +159,7 @@ export default function Demo() {
159
159
  onValueChange={setSearchable}
160
160
  showSearch
161
161
  searchPlaceholder="拠点を検索 / Tìm văn phòng"
162
+ allowClear
162
163
  clearLabel="選択をクリア"
163
164
  options={REGIONS}
164
165
  />
@@ -127,7 +127,6 @@ export default function Demo() {
127
127
  value={currency}
128
128
  onValueChange={setCurrency}
129
129
  showSearch
130
- clearable={false}
131
130
  searchPlaceholder="通貨を検索..."
132
131
  options={[
133
132
  { value: "JPY", label: "日本円", group: "アジア" },
@@ -144,8 +143,8 @@ export default function Demo() {
144
143
  <CardHeader>
145
144
  <CardTitle level={2}>Searchable + clearable</CardTitle>
146
145
  <CardDescription>
147
- With a value set and clearable (default), an inline ✕ on the trigger resets the
148
- selection without opening the list.
146
+ With a value set and allowClear (off by default, as in antd), an inline ✕ on the
147
+ trigger resets the selection without opening the list.
149
148
  </CardDescription>
150
149
  </CardHeader>
151
150
  <CardContent>
@@ -156,6 +155,7 @@ export default function Demo() {
156
155
  value={assignee}
157
156
  onValueChange={setAssignee}
158
157
  showSearch
158
+ allowClear
159
159
  searchPlaceholder="担当者を検索..."
160
160
  placeholder="担当者を選択"
161
161
  options={people}
@@ -173,7 +173,6 @@ export default function Demo() {
173
173
  value={compareA}
174
174
  onValueChange={setCompareA}
175
175
  options={roleOptions}
176
- clearable={false}
177
176
  className="w-40"
178
177
  />
179
178
  </FormField>
@@ -182,7 +181,6 @@ export default function Demo() {
182
181
  value={compareB}
183
182
  onValueChange={setCompareB}
184
183
  options={roleOptions}
185
- clearable={false}
186
184
  className="w-40"
187
185
  />
188
186
  </FormField>
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@godxjp/ui",
3
- "version": "26.4.0",
4
- "godxUiMcp": "26.4.0",
3
+ "version": "27.0.0",
4
+ "godxUiMcp": "27.0.0",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
7
7
  "type": "git",