@godxjp/ui 19.6.0 → 20.1.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.
- package/README.md +8 -2
- package/dist/app/theme-axes.d.ts +2 -0
- package/dist/app/theme-axes.js +45 -0
- package/dist/components/charts/chart-cartesian.d.ts +2 -1
- package/dist/components/charts/chart-cartesian.js +52 -3
- package/dist/components/charts/chart-category-axis.d.ts +55 -0
- package/dist/components/charts/chart-category-axis.js +93 -0
- package/dist/components/charts/chart-frame.d.ts +10 -1
- package/dist/components/charts/chart-frame.js +19 -3
- package/dist/components/charts/compact-bar-trend.d.ts +1 -1
- package/dist/components/charts/compact-bar-trend.js +2 -0
- package/dist/components/charts/pie-chart.d.ts +1 -1
- package/dist/components/charts/pie-chart.js +12 -1
- package/dist/components/charts/recharts-peer.d.ts +49 -0
- package/dist/components/charts/recharts-peer.js +45 -0
- package/dist/components/data-display/card.d.ts +14 -3
- package/dist/components/data-display/card.js +22 -4
- package/dist/components/data-display/code-block.js +6 -2
- package/dist/components/data-display/collapsible.d.ts +23 -4
- package/dist/components/data-display/collapsible.js +119 -4
- package/dist/components/data-display/data-table.d.ts +39 -4
- package/dist/components/data-display/data-table.js +802 -270
- package/dist/components/data-display/descriptions.d.ts +27 -6
- package/dist/components/data-display/descriptions.js +58 -17
- package/dist/components/data-display/index.d.ts +5 -1
- package/dist/components/data-display/index.js +4 -0
- package/dist/components/data-display/legend.d.ts +15 -0
- package/dist/components/data-display/legend.js +11 -0
- package/dist/components/data-display/list-row.d.ts +10 -1
- package/dist/components/data-display/list-row.js +8 -2
- package/dist/components/data-display/popover.d.ts +60 -7
- package/dist/components/data-display/popover.js +268 -39
- package/dist/components/data-display/progress.d.ts +50 -2
- package/dist/components/data-display/progress.js +57 -9
- package/dist/components/data-display/range-timeline.d.ts +38 -0
- package/dist/components/data-display/range-timeline.js +161 -0
- package/dist/components/data-display/scroll-area.js +13 -2
- package/dist/components/data-display/service-launcher-card.js +10 -10
- package/dist/components/data-display/table.d.ts +11 -3
- package/dist/components/data-display/table.js +48 -18
- package/dist/components/data-display/tree-list.js +4 -9
- package/dist/components/data-entry/calendar.d.ts +2 -2
- package/dist/components/data-entry/calendar.js +79 -33
- package/dist/components/data-entry/cascader.d.ts +1 -1
- package/dist/components/data-entry/cascader.js +188 -24
- package/dist/components/data-entry/checkbox.d.ts +19 -6
- package/dist/components/data-entry/checkbox.js +55 -16
- package/dist/components/data-entry/choice-option.d.ts +1 -1
- package/dist/components/data-entry/color-picker.d.ts +1 -1
- package/dist/components/data-entry/color-picker.js +17 -5
- package/dist/components/data-entry/control-appearance.d.ts +64 -0
- package/dist/components/data-entry/control-appearance.js +39 -0
- package/dist/components/data-entry/control-surface.d.ts +61 -0
- package/dist/components/data-entry/control-surface.js +39 -0
- package/dist/components/data-entry/date-picker.d.ts +1 -1
- package/dist/components/data-entry/date-picker.js +344 -113
- package/dist/components/data-entry/date-range-picker.d.ts +2 -2
- package/dist/components/data-entry/date-range-picker.js +278 -140
- package/dist/components/data-entry/field.js +0 -1
- package/dist/components/data-entry/form-field.d.ts +1 -1
- package/dist/components/data-entry/form-field.js +39 -4
- package/dist/components/data-entry/form.d.ts +4 -0
- package/dist/components/data-entry/form.js +5 -3
- package/dist/components/data-entry/index.d.ts +7 -3
- package/dist/components/data-entry/index.js +10 -1
- package/dist/components/data-entry/input-otp.d.ts +1 -1
- package/dist/components/data-entry/input.d.ts +12 -34
- package/dist/components/data-entry/input.js +92 -24
- package/dist/components/data-entry/label.d.ts +3 -2
- package/dist/components/data-entry/label.js +23 -10
- package/dist/components/data-entry/month-picker.d.ts +2 -2
- package/dist/components/data-entry/month-picker.js +47 -10
- package/dist/components/data-entry/month-range-picker.d.ts +2 -2
- package/dist/components/data-entry/month-range-picker.js +51 -11
- package/dist/components/data-entry/number-input.d.ts +7 -0
- package/dist/components/data-entry/number-input.js +147 -98
- package/dist/components/data-entry/password-input.d.ts +1 -1
- package/dist/components/data-entry/radio.d.ts +1 -1
- package/dist/components/data-entry/radio.js +61 -13
- package/dist/components/data-entry/search-input.d.ts +1 -1
- package/dist/components/data-entry/search-input.js +16 -2
- package/dist/components/data-entry/search-select.d.ts +2 -2
- package/dist/components/data-entry/search-select.js +209 -78
- package/dist/components/data-entry/select.d.ts +22 -4
- package/dist/components/data-entry/select.js +215 -163
- package/dist/components/data-entry/slider.d.ts +9 -1
- package/dist/components/data-entry/slider.js +87 -9
- package/dist/components/data-entry/switch.d.ts +3 -0
- package/dist/components/data-entry/switch.js +29 -3
- package/dist/components/data-entry/textarea.d.ts +14 -56
- package/dist/components/data-entry/textarea.js +80 -33
- package/dist/components/data-entry/time-picker.d.ts +2 -2
- package/dist/components/data-entry/time-picker.js +333 -109
- package/dist/components/data-entry/time-range-picker.d.ts +5 -0
- package/dist/components/data-entry/time-range-picker.js +89 -0
- package/dist/components/data-entry/transfer.d.ts +1 -1
- package/dist/components/data-entry/transfer.js +99 -31
- package/dist/components/data-entry/tree-select-strategy.d.ts +1 -1
- package/dist/components/data-entry/tree-select.d.ts +1 -1
- package/dist/components/data-entry/tree-select.js +197 -92
- package/dist/components/data-entry/tree-utils.d.ts +1 -1
- package/dist/components/data-entry/tree-utils.js +7 -14
- package/dist/components/data-entry/upload-files.d.ts +2 -0
- package/dist/components/data-entry/upload-files.js +31 -0
- package/dist/components/data-entry/upload-request.d.ts +4 -0
- package/dist/components/data-entry/upload-request.js +53 -0
- package/dist/components/data-entry/upload-types.d.ts +28 -0
- package/dist/components/data-entry/upload-types.js +2 -0
- package/dist/components/data-entry/upload.d.ts +2 -2
- package/dist/components/data-entry/upload.js +482 -117
- package/dist/components/feedback/dialog.d.ts +105 -38
- package/dist/components/feedback/dialog.js +268 -193
- package/dist/components/feedback/overlay-close-focus.d.ts +31 -0
- package/dist/components/feedback/overlay-close-focus.js +31 -0
- package/dist/components/feedback/overlay-header-tone.d.ts +1 -1
- package/dist/components/feedback/sheet.d.ts +53 -11
- package/dist/components/feedback/sheet.js +150 -81
- package/dist/components/feedback/tooltip.d.ts +51 -7
- package/dist/components/feedback/tooltip.js +107 -25
- package/dist/components/general/button.d.ts +1 -1
- package/dist/components/general/button.js +7 -3
- package/dist/components/general/index.d.ts +1 -0
- package/dist/components/general/index.js +2 -0
- package/dist/components/general/logo.d.ts +17 -0
- package/dist/components/general/logo.js +22 -16
- package/dist/components/general/typography.d.ts +3 -0
- package/dist/components/general/typography.js +15 -1
- package/dist/components/general/visually-hidden.d.ts +3 -0
- package/dist/components/general/visually-hidden.js +9 -0
- package/dist/components/layout/app-launcher.d.ts +34 -0
- package/dist/components/layout/app-launcher.js +228 -0
- package/dist/components/layout/app-shell.d.ts +3 -1
- package/dist/components/layout/app-shell.js +69 -12
- package/dist/components/layout/aspect-ratio.js +0 -1
- package/dist/components/layout/auth-divider.js +0 -1
- package/dist/components/layout/breadcrumb.d.ts +14 -2
- package/dist/components/layout/breadcrumb.js +46 -4
- package/dist/components/layout/flex.d.ts +1 -1
- package/dist/components/layout/flex.js +41 -3
- package/dist/components/layout/index.d.ts +3 -0
- package/dist/components/layout/index.js +5 -1
- package/dist/components/layout/nav-surface.d.ts +26 -0
- package/dist/components/layout/nav-surface.js +17 -0
- package/dist/components/layout/org-switcher.d.ts +5 -1
- package/dist/components/layout/org-switcher.js +25 -4
- package/dist/components/layout/page-container.d.ts +1 -1
- package/dist/components/layout/page-container.js +5 -3
- package/dist/components/layout/responsive-grid.d.ts +16 -2
- package/dist/components/layout/responsive-grid.js +29 -2
- package/dist/components/layout/separator.js +0 -1
- package/dist/components/layout/sidebar.js +4 -1
- package/dist/components/layout/split-pane.d.ts +14 -1
- package/dist/components/layout/split-pane.js +26 -13
- package/dist/components/layout/topbar-item.d.ts +3 -0
- package/dist/components/layout/topbar-item.js +19 -5
- package/dist/components/layout/topbar.d.ts +1 -1
- package/dist/components/layout/topbar.js +27 -6
- package/dist/components/navigation/app-setting-picker.js +21 -2
- package/dist/components/navigation/app-setting-toggle.d.ts +16 -0
- package/dist/components/navigation/app-setting-toggle.js +96 -0
- package/dist/components/navigation/dropdown-menu.d.ts +227 -18
- package/dist/components/navigation/dropdown-menu.js +402 -118
- package/dist/components/navigation/index.d.ts +2 -0
- package/dist/components/navigation/index.js +2 -0
- package/dist/components/navigation/pagination-utils.d.ts +2 -1
- package/dist/components/navigation/pagination.d.ts +2 -2
- package/dist/components/navigation/pagination.js +155 -83
- package/dist/components/navigation/steps.d.ts +2 -2
- package/dist/components/navigation/steps.js +29 -4
- package/dist/components/navigation/tabs.d.ts +29 -16
- package/dist/components/navigation/tabs.js +374 -144
- package/dist/components/ui/accordion.d.ts +50 -5
- package/dist/components/ui/accordion.js +239 -33
- package/dist/components/ui/aspect-ratio.d.ts +23 -2
- package/dist/components/ui/aspect-ratio.js +15 -13
- package/dist/components/ui/avatar.d.ts +29 -4
- package/dist/components/ui/avatar.js +111 -25
- package/dist/components/ui/hover-card.d.ts +42 -4
- package/dist/components/ui/hover-card.js +183 -27
- package/dist/components/ui/input-otp.d.ts +26 -28
- package/dist/components/ui/input-otp.js +50 -7
- package/dist/components/ui/label.js +0 -1
- package/dist/components/ui/password-input.d.ts +36 -2
- package/dist/components/ui/password-input.js +27 -7
- package/dist/components/ui/rating.d.ts +25 -0
- package/dist/components/ui/rating.js +67 -27
- package/dist/components/ui/segmented.d.ts +12 -3
- package/dist/components/ui/segmented.js +17 -2
- package/dist/components/ui/separator.d.ts +12 -2
- package/dist/components/ui/separator.js +30 -9
- package/dist/components/ui/tag-input.d.ts +45 -0
- package/dist/components/ui/tag-input.js +109 -27
- package/dist/components/ui/toggle-group.d.ts +50 -5
- package/dist/components/ui/toggle-group.js +79 -20
- package/dist/components/ui/toggle.d.ts +31 -5
- package/dist/components/ui/toggle.js +42 -3
- package/dist/form/form-context.d.ts +29 -0
- package/dist/form/form-context.js +44 -4
- package/dist/form/form-field-array.d.ts +22 -0
- package/dist/form/form-field-array.js +50 -0
- package/dist/form/form-field-control.d.ts +2 -1
- package/dist/form/form-field-control.js +116 -40
- package/dist/form/form-root.d.ts +2 -1
- package/dist/form/form-root.js +142 -23
- package/dist/form/index.d.ts +3 -1
- package/dist/form/index.js +12 -1
- package/dist/i18n/messages/en.json +64 -5
- package/dist/i18n/messages/ja.json +64 -5
- package/dist/i18n/messages/vi.json +64 -5
- package/dist/inertia/index.d.ts +20 -0
- package/dist/inertia/index.js +60 -1
- package/dist/lib/control-styles.d.ts +25 -3
- package/dist/lib/control-styles.js +9 -3
- package/dist/lib/datetime/picker-format.d.ts +8 -0
- package/dist/lib/datetime/picker-format.js +54 -0
- package/dist/lib/slot.d.ts +32 -0
- package/dist/lib/slot.js +22 -0
- package/dist/lib/variants.d.ts +22 -3
- package/dist/lib/variants.js +56 -1
- package/dist/props/components/app.prop.d.ts +25 -1
- package/dist/props/components/charts.prop.d.ts +21 -0
- package/dist/props/components/data-display.prop.d.ts +72 -4
- package/dist/props/components/data-entry.prop.d.ts +718 -46
- package/dist/props/components/form.prop.d.ts +142 -4
- package/dist/props/components/general.prop.d.ts +17 -1
- package/dist/props/components/index.d.ts +3 -3
- package/dist/props/components/layout.prop.d.ts +281 -11
- package/dist/props/components/navigation.prop.d.ts +114 -4
- package/dist/props/registry.d.ts +397 -11
- package/dist/props/registry.js +526 -11
- package/dist/props/vocabulary/content.prop.d.ts +1 -1
- package/dist/props/vocabulary/data.prop.d.ts +179 -1
- package/dist/props/vocabulary/index.d.ts +5 -5
- package/dist/props/vocabulary/interaction.prop.d.ts +68 -3
- package/dist/props/vocabulary/layout.prop.d.ts +57 -1
- package/dist/props/vocabulary/navigation.prop.d.ts +40 -0
- package/dist/props/vocabulary/shared.prop.d.ts +33 -0
- package/dist/styles/badge-layout.css +2 -1
- package/dist/styles/card-layout.css +26 -4
- package/dist/styles/chart-layout.css +15 -0
- package/dist/styles/control.css +657 -15
- package/dist/styles/core.css +5 -2
- package/dist/styles/data-display-layout.css +313 -6
- package/dist/styles/data-entry-layout.css +13 -0
- package/dist/styles/focus-ring.css +4 -0
- package/dist/styles/index.css +5 -2
- package/dist/styles/layout.css +327 -4
- package/dist/styles/navigation-layout.css +227 -0
- package/dist/styles/shell-layout.css +369 -13
- package/dist/styles/table-layout.css +95 -6
- package/dist/styles/text-layout.css +10 -4
- package/dist/tokens/base.css +2 -1
- package/dist/tokens/components/badge.css +1 -0
- package/dist/tokens/components/chart.css +6 -0
- package/dist/tokens/components/control.css +79 -2
- package/dist/tokens/components/data-display.css +20 -0
- package/dist/tokens/components/descriptions.css +11 -0
- package/dist/tokens/components/flex.css +8 -0
- package/dist/tokens/components/navigation.css +55 -0
- package/dist/tokens/components/shell.css +53 -3
- package/dist/tokens/components/table.css +14 -0
- package/dist/tokens/foundation.css +2 -0
- package/dist/tokens/semantic/layout.css +9 -0
- package/docs/COMPONENTS.md +9 -3
- package/docs/CONSUMER-RULES.md +13 -0
- package/docs/DESIGN-AUTHORITY.md +145 -83
- package/docs/DEVELOPMENT.md +4 -3
- package/docs/FORMS.md +151 -6
- package/docs/FRAME-COVERAGE-REPORT.md +32 -17
- package/docs/README.md +15 -15
- package/docs/STANDARDS-vocabulary-tokens.md +1 -1
- package/docs/TESTING.md +15 -6
- package/docs/WHAT-BELONGS-HERE.md +179 -0
- package/docs/charts/cjk-category-axis.tsx +81 -0
- package/docs/data-display/card/index.tsx +22 -0
- package/docs/data-display/data-table/examples/antd-parity.tsx +257 -0
- package/docs/data-display/data-table/index.tsx +23 -0
- package/docs/data-display/descriptions.tsx +41 -0
- package/docs/data-display/legend.tsx +145 -0
- package/docs/data-display/progress.tsx +32 -0
- package/docs/data-display/scroll-area.tsx +31 -25
- package/docs/data-display/table.tsx +104 -45
- package/docs/data-display/timeline.tsx +41 -0
- package/docs/data-entry/date-picker.tsx +85 -0
- package/docs/data-entry/date-range-picker.tsx +26 -0
- package/docs/data-entry/form-dynamic-fields.tsx +199 -0
- package/docs/data-entry/form.tsx +74 -4
- package/docs/data-entry/input-otp.tsx +24 -0
- package/docs/data-entry/input.tsx +46 -1
- package/docs/data-entry/month-range-picker.tsx +1 -1
- package/docs/data-entry/segmented.tsx +1 -1
- package/docs/data-entry/select.tsx +29 -2
- package/docs/data-entry/switch.tsx +41 -0
- package/docs/data-entry/textarea.tsx +38 -0
- package/docs/data-entry/time-picker.tsx +85 -1
- package/docs/data-entry/time-range-picker.tsx +55 -0
- package/docs/data-entry/transfer.tsx +17 -0
- package/docs/data-entry/upload.tsx +56 -12
- package/docs/feedback/sheet.tsx +1 -1
- package/docs/feedback/tooltip.tsx +1 -1
- package/docs/general/activity.tsx +2 -2
- package/docs/general/button/index.tsx +14 -1
- package/docs/general/typography.tsx +14 -1
- package/docs/layout/app-launcher.tsx +151 -0
- package/docs/layout/app-shell-arrangements.tsx +225 -0
- package/docs/layout/app-shell.tsx +11 -0
- package/docs/layout/aspect-ratio.tsx +1 -1
- package/docs/layout/flex.tsx +50 -0
- package/docs/layout/responsive-grid.tsx +21 -1
- package/docs/layout/topbar.tsx +5 -9
- package/docs/navigation/app-setting-picker.tsx +37 -1
- package/docs/navigation/app-setting-toggle.tsx +111 -0
- package/docs/navigation/breadcrumb.tsx +48 -0
- package/docs/navigation/dropdown-menu.tsx +21 -0
- package/docs/navigation/pagination.tsx +52 -0
- package/docs/navigation/steps.tsx +37 -0
- package/docs/navigation/tabs.tsx +97 -1
- package/docs/query/button-refetch.tsx +1 -0
- package/package.json +28 -8
- package/scripts/_agent-setup.mjs +182 -3
- package/scripts/consumer-rule.md +98 -0
- package/scripts/guinea-pig-skill.md +322 -0
- package/scripts/init-guinea-pig.mjs +84 -0
- package/scripts/postinstall.mjs +13 -2
- package/scripts/ui-audit.mjs +351 -37
- /package/dist/tokens/{antd.generated.css → derived.css} +0 -0
|
@@ -3,12 +3,13 @@ import type * as CheckboxPrimitive from "@radix-ui/react-checkbox";
|
|
|
3
3
|
import type * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
|
|
4
4
|
import type * as SliderPrimitive from "@radix-ui/react-slider";
|
|
5
5
|
import type * as SwitchPrimitive from "@radix-ui/react-switch";
|
|
6
|
+
import type { RenderProps as InputOTPRenderProps } from "input-otp";
|
|
6
7
|
import type { DayPickerProps } from "react-day-picker";
|
|
7
8
|
import type { DateRange } from "react-day-picker";
|
|
8
9
|
import type * as React from "react";
|
|
9
10
|
import type { UploadFileItem } from "../../components/data-entry/upload-types.js";
|
|
10
11
|
import type { FieldA11yProps } from "../../lib/field-a11y.js";
|
|
11
|
-
import type { ClassNameProp, DisabledProp, EmptyMessageProp, ErrorBagProp, ErrorProp, HelperProp, IdProp, LabelProp, NameProp, OnValueChangeProp, OnSearchChangeProp, OpenProp, OnOpenChangeProp, PlaceholderProp, RequiredProp, ValueProp, DefaultValueProp, FormLayoutProp, WidthProp, BreakpointProp, DensityProp, SizeProp, TitleProp } from "../vocabulary/index.js";
|
|
12
|
+
import type { ClassNameProp, ControlWidthProp, DisabledProp, EmptyMessageProp, ErrorBagProp, ErrorProp, HelperProp, IdProp, LabelProp, NameProp, OnValueChangeProp, OnSearchChangeProp, OpenProp, OnOpenChangeProp, PlaceholderProp, RequiredProp, ValueProp, DefaultValueProp, FormLayoutProp, WidthProp, BreakpointProp, DensityProp, SizeProp, TitleProp, DefaultOpenProp, ControlStatusProp, ControlVariantProp, AllowClearProp, MaxTagCountProp, MaxTagPlaceholderProp, NotFoundContentProp, PopupMatchWidthProp, PendingProp, PadProp, PadRawProp } from "../vocabulary/index.js";
|
|
12
13
|
import type { ResponsiveGridColumnsProp } from "./layout.prop.js";
|
|
13
14
|
/** One-outline-per-group appearance for the compound InputOTP control. */
|
|
14
15
|
export type InputOTPGroupAppearanceProp = "slots" | "grouped";
|
|
@@ -23,30 +24,159 @@ export type InputOTPGroupProp = React.HTMLAttributes<HTMLDivElement> & {
|
|
|
23
24
|
* @see InputOTP
|
|
24
25
|
*/
|
|
25
26
|
export type InputOTPAlignProp = "start" | "center" | "end";
|
|
27
|
+
/**
|
|
28
|
+
* antd `Input.OTP mask`. `true` paints every filled slot as `•`; a STRING uses that character
|
|
29
|
+
* instead. Only the PAINT changes — the real code stays in the field's value, so submission,
|
|
30
|
+
* `onChange` and the accessible value are untouched (a mask that ate the value would be a bug,
|
|
31
|
+
* not a privacy feature).
|
|
32
|
+
*/
|
|
33
|
+
export type InputOTPMaskProp = boolean | string;
|
|
34
|
+
/**
|
|
35
|
+
* @see InputOTP — the one-time-code field. A passthrough of `input-otp`'s `OTPInput` (the hidden
|
|
36
|
+
* real `<input>` that owns paste, caret and arrow-key behaviour) plus this library's control-surface
|
|
37
|
+
* axes, so a code field lines up with the `Input`/`Select` beside it in a form row.
|
|
38
|
+
*
|
|
39
|
+
* The value is ALWAYS driven from here (`value` controlled, or `defaultValue` + internal state), so
|
|
40
|
+
* `formatter` and `readOnly` hold for typing AND for paste — `input-otp` writes its own internal
|
|
41
|
+
* state on paste, which a wrapper that only intercepted `onChange` could not undo.
|
|
42
|
+
*/
|
|
43
|
+
export type InputOTPProp = Omit<React.InputHTMLAttributes<HTMLInputElement>, "value" | "defaultValue" | "onChange" | "size" | "children"> & {
|
|
44
|
+
/** Number of slots — antd `length`. Required by `input-otp`. */
|
|
45
|
+
maxLength: number;
|
|
46
|
+
value?: string;
|
|
47
|
+
/** Uncontrolled seed — the field then owns its own value. */
|
|
48
|
+
defaultValue?: string;
|
|
49
|
+
/** Controlled-vocabulary change handler; receives the bare code, never an event. */
|
|
50
|
+
onValueChange?: (value: string) => void;
|
|
51
|
+
/** `input-otp`'s own name for the same callback — kept for the existing call sites. */
|
|
52
|
+
onChange?: (value: string) => void;
|
|
53
|
+
/** Fires once the last slot is filled (auto-submit). */
|
|
54
|
+
onComplete?: (value: string) => void;
|
|
55
|
+
/**
|
|
56
|
+
* antd `Input.OTP formatter` — normalise every code the field accepts (upper-case, strip spaces).
|
|
57
|
+
* Runs AFTER `pattern`, which `input-otp` matches against the raw keystroke: a pattern must
|
|
58
|
+
* therefore accept what the user actually types, not only what the formatter produces.
|
|
59
|
+
*/
|
|
60
|
+
formatter?: (value: string) => string;
|
|
61
|
+
/** antd `Input.OTP mask` — paint only; the real code stays in the value. */
|
|
62
|
+
mask?: InputOTPMaskProp;
|
|
63
|
+
/** Main-axis alignment of the whole code row. */
|
|
64
|
+
align?: InputOTPAlignProp;
|
|
65
|
+
/** Control height tier — the shared `--control-height` ladder, as on every other field. */
|
|
66
|
+
size?: SizeProp;
|
|
67
|
+
/** Validation state the field paints — antd `status`. `error` also reports `aria-invalid`. */
|
|
68
|
+
status?: ControlStatusProp;
|
|
69
|
+
/** Chrome level — antd `variant`. Default `outlined`. */
|
|
70
|
+
variant?: ControlVariantProp;
|
|
71
|
+
/** Regex source (or literal) every accepted value must match — `input-otp`'s `pattern`. */
|
|
72
|
+
pattern?: string;
|
|
73
|
+
/** Rewrite pasted text before it reaches the field — `input-otp`'s `pasteTransformer`. */
|
|
74
|
+
pasteTransformer?: (pasted: string) => string;
|
|
75
|
+
/** Class on the row container that `input-otp` renders (the slots' flex parent). */
|
|
76
|
+
containerClassName?: ClassNameProp;
|
|
77
|
+
/** Password-manager badge avoidance strategy — `input-otp`'s own escape hatch. */
|
|
78
|
+
pushPasswordManagerStrategy?: "increase-width" | "none";
|
|
79
|
+
/** No-JS fallback stylesheet emitted by `input-otp`; `null` disables it. */
|
|
80
|
+
noScriptCSSFallback?: string | null;
|
|
81
|
+
/** CSP nonce for the stylesheet `input-otp` injects. */
|
|
82
|
+
nonce?: string;
|
|
83
|
+
/** The slot tree (`InputOTPGroup` > `InputOTPSlot`) — the normal API. */
|
|
84
|
+
children?: React.ReactNode;
|
|
85
|
+
/** `input-otp`'s headless escape hatch: render the whole row yourself from the slot state. */
|
|
86
|
+
render?: (props: InputOTPRenderProps) => React.ReactNode;
|
|
87
|
+
};
|
|
88
|
+
/**
|
|
89
|
+
* Character-counter configuration shared by `Input` and `Textarea` — Ant Design's `count`
|
|
90
|
+
* (`@rc-component/input`'s `CountConfig`).
|
|
91
|
+
*
|
|
92
|
+
* antd's `exceedFormatter` is deliberately absent: it rewrites the field's text while the user is
|
|
93
|
+
* still typing, which in Japanese truncates a live IME conversion. The counter here REPORTS an
|
|
94
|
+
* overrun (`data-exceeded` on the counter element) and never edits the value.
|
|
95
|
+
*/
|
|
96
|
+
export type ControlCountProp = {
|
|
97
|
+
/** Ceiling reported by the counter. Displayed, never enforced — see the note above. */
|
|
98
|
+
max?: number;
|
|
99
|
+
/** Render the counter. Default `true` whenever `count` is given at all. */
|
|
100
|
+
show?: boolean;
|
|
101
|
+
/** Replaces the whole counter text. */
|
|
102
|
+
formatter?: (info: {
|
|
103
|
+
value: string;
|
|
104
|
+
count: number;
|
|
105
|
+
max?: number;
|
|
106
|
+
}) => React.ReactNode;
|
|
107
|
+
/**
|
|
108
|
+
* How a character is counted. The default counts CODE POINTS, not UTF-16 units, so one emoji
|
|
109
|
+
* and one 全角 kanji each count as one. Pass `(v) => v.length` for native `maxLength` semantics.
|
|
110
|
+
*/
|
|
111
|
+
strategy?: (value: string) => number;
|
|
112
|
+
};
|
|
26
113
|
/** @see Input */
|
|
27
|
-
export type InputProp = React.InputHTMLAttributes<HTMLInputElement> & {
|
|
28
|
-
|
|
29
|
-
|
|
114
|
+
export type InputProp = Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "prefix"> & {
|
|
115
|
+
onValueChange?: (value: string) => void;
|
|
116
|
+
/** Control height tier: `md` (default), `sm` or `lg` — the same tiers as SelectTrigger. */
|
|
117
|
+
size?: "sm" | "md" | "lg";
|
|
118
|
+
/** Validation state the field paints — antd `status`. `error` also reports `aria-invalid`. */
|
|
119
|
+
status?: ControlStatusProp;
|
|
120
|
+
/** Chrome level — antd `variant`. Default `outlined`. */
|
|
121
|
+
variant?: ControlVariantProp;
|
|
122
|
+
/**
|
|
123
|
+
* antd `allowClear` — show an inline ✕ that clears the field while it holds text (default
|
|
124
|
+
* false). The OBJECT form additionally replaces the icon and/or the accessible label.
|
|
125
|
+
*/
|
|
126
|
+
allowClear?: AllowClearProp;
|
|
30
127
|
/** Called after the field is cleared via the inline ✕. */
|
|
31
128
|
onClear?: () => void;
|
|
32
129
|
/** A leading affordance pinned inside the start of the field (e.g. a mail/lock icon). */
|
|
33
130
|
leadingIcon?: React.ReactNode;
|
|
34
131
|
/** A trailing affordance pinned inside the end of the field (replaced by the clear ✕ when `allowClear` + value). */
|
|
35
132
|
trailingIcon?: React.ReactNode;
|
|
133
|
+
/** antd `prefix` — content pinned INSIDE the start of the field (¥, a unit, a small glyph). */
|
|
134
|
+
prefix?: React.ReactNode;
|
|
135
|
+
/** antd `suffix` — content pinned INSIDE the end of the field (%, 円, a hint glyph). */
|
|
136
|
+
suffix?: React.ReactNode;
|
|
137
|
+
/** antd `addonBefore` — a segment welded OUTSIDE the start of the box (`https://`, a currency). */
|
|
138
|
+
addonBefore?: React.ReactNode;
|
|
139
|
+
/** antd `addonAfter` — a segment welded OUTSIDE the end of the box (`.com`, a unit, a button). */
|
|
140
|
+
addonAfter?: React.ReactNode;
|
|
141
|
+
/** Character counter — antd `count`. */
|
|
142
|
+
count?: ControlCountProp;
|
|
36
143
|
};
|
|
37
144
|
/** @see Textarea */
|
|
38
145
|
export type TextareaProp = React.TextareaHTMLAttributes<HTMLTextAreaElement> & {
|
|
39
|
-
|
|
40
|
-
|
|
146
|
+
onValueChange?: (value: string) => void;
|
|
147
|
+
pad?: PadProp;
|
|
148
|
+
padRaw?: PadRawProp;
|
|
149
|
+
/**
|
|
150
|
+
* antd `allowClear` — an inline ✕ (top-end) that clears the field while it holds text (default
|
|
151
|
+
* false). The OBJECT form additionally replaces the icon and/or the accessible label.
|
|
152
|
+
*/
|
|
153
|
+
allowClear?: AllowClearProp;
|
|
41
154
|
/** Called after the field is cleared via the inline ✕. */
|
|
42
155
|
onClear?: () => void;
|
|
43
|
-
/**
|
|
44
|
-
|
|
156
|
+
/**
|
|
157
|
+
* Chrome level. `outlined` (default) / `filled` / `borderless` are antd's `variant`; `default`
|
|
158
|
+
* and `ghost` are this library's older spellings of the first and the last, still accepted.
|
|
159
|
+
*/
|
|
160
|
+
variant?: ControlVariantProp | "default" | "ghost";
|
|
161
|
+
/** Validation state the field paints — antd `status`. `error` also reports `aria-invalid`. */
|
|
162
|
+
status?: ControlStatusProp;
|
|
163
|
+
/** Control height tier: `md` (default), `sm` or `lg`. */
|
|
164
|
+
size?: "sm" | "md" | "lg";
|
|
45
165
|
autoGrow?: boolean;
|
|
166
|
+
/**
|
|
167
|
+
* antd `autoSize`. `true` is `autoGrow`; an object also carries the row bounds, so
|
|
168
|
+
* `autoSize={{ minRows: 2, maxRows: 6 }}` is `autoGrow minRows={2} maxRows={6}`.
|
|
169
|
+
*/
|
|
170
|
+
autoSize?: boolean | {
|
|
171
|
+
minRows?: number;
|
|
172
|
+
maxRows?: number;
|
|
173
|
+
};
|
|
46
174
|
/** Floor in text rows while `autoGrow`; never undercuts the `--control-height` tier. */
|
|
47
175
|
minRows?: number;
|
|
48
176
|
/** Ceiling in text rows while `autoGrow` — past it the control scrolls internally. `0` = unbounded. */
|
|
49
177
|
maxRows?: number;
|
|
178
|
+
/** Character counter — antd `count`. */
|
|
179
|
+
count?: ControlCountProp;
|
|
50
180
|
};
|
|
51
181
|
/**
|
|
52
182
|
* @see NumberInput — localized numeric spinbutton (composes `Input` + step `Button`s).
|
|
@@ -66,6 +196,24 @@ export type NumberInputProp = FieldA11yProps & {
|
|
|
66
196
|
step?: number;
|
|
67
197
|
/** Committed decimal places. Inferred from `step` when omitted. */
|
|
68
198
|
precision?: number;
|
|
199
|
+
/**
|
|
200
|
+
* antd `formatter` — how the committed number is DISPLAYED at rest (thousands separators, a
|
|
201
|
+
* unit). Replaces the built-in `Intl.NumberFormat`; pair it with `parser`, or the text it
|
|
202
|
+
* produces cannot be read back.
|
|
203
|
+
*/
|
|
204
|
+
formatter?: (value: number | null) => string;
|
|
205
|
+
/** antd `parser` — turns the displayed text back into a number. The inverse of `formatter`. */
|
|
206
|
+
parser?: (display: string) => number | null;
|
|
207
|
+
/** antd `keyboard` — ArrowUp/ArrowDown step the value. Default `true`. */
|
|
208
|
+
keyboard?: boolean;
|
|
209
|
+
/** antd `changeOnWheel` — a mouse wheel over the FOCUSED field steps the value. Default `false`. */
|
|
210
|
+
changeOnWheel?: boolean;
|
|
211
|
+
/** antd `controls` — show the increment/decrement steppers. Default `true`. */
|
|
212
|
+
controls?: boolean;
|
|
213
|
+
/** Validation state the field paints — antd `status`. `error` also reports `aria-invalid`. */
|
|
214
|
+
status?: ControlStatusProp;
|
|
215
|
+
/** Chrome level — antd `variant`. Default `outlined`. */
|
|
216
|
+
variant?: ControlVariantProp;
|
|
69
217
|
disabled?: DisabledProp;
|
|
70
218
|
/** Read-only: value is shown and selectable but neither typeable nor steppable. */
|
|
71
219
|
readOnly?: boolean;
|
|
@@ -88,6 +236,8 @@ export type NumberInputProp = FieldA11yProps & {
|
|
|
88
236
|
* horizontal). `columns` lays fields out in a responsive grid (reuses ResponsiveGrid).
|
|
89
237
|
*/
|
|
90
238
|
export type FormProp = React.FormHTMLAttributes<HTMLFormElement> & {
|
|
239
|
+
disabled?: boolean;
|
|
240
|
+
requiredMark?: boolean | "optional";
|
|
91
241
|
layout?: FormLayoutProp;
|
|
92
242
|
labelWidth?: WidthProp;
|
|
93
243
|
controlWidth?: WidthProp;
|
|
@@ -136,6 +286,9 @@ export type FormFieldProp = {
|
|
|
136
286
|
required?: RequiredProp;
|
|
137
287
|
helper?: HelperProp;
|
|
138
288
|
error?: ErrorProp;
|
|
289
|
+
validateStatus?: "success" | "warning" | "error" | "validating";
|
|
290
|
+
hasFeedback?: boolean;
|
|
291
|
+
feedback?: React.ReactNode;
|
|
139
292
|
/** Optional control rendered inline after the label (e.g. a help button). */
|
|
140
293
|
labelAddon?: React.ReactNode;
|
|
141
294
|
/** Override the Form's layout for this field only. */
|
|
@@ -164,6 +317,9 @@ export type FormFieldProp = {
|
|
|
164
317
|
required?: RequiredProp;
|
|
165
318
|
helper?: HelperProp;
|
|
166
319
|
error?: ErrorProp;
|
|
320
|
+
validateStatus?: "success" | "warning" | "error" | "validating";
|
|
321
|
+
hasFeedback?: boolean;
|
|
322
|
+
feedback?: React.ReactNode;
|
|
167
323
|
/** Optional control rendered inline after the label (e.g. a help button). */
|
|
168
324
|
labelAddon?: React.ReactNode;
|
|
169
325
|
/** Override the Form's layout for this field only. */
|
|
@@ -225,10 +381,21 @@ export type SearchInputProp = FieldA11yProps & {
|
|
|
225
381
|
disabled?: DisabledProp;
|
|
226
382
|
className?: ClassNameProp;
|
|
227
383
|
inputClassName?: ClassNameProp;
|
|
384
|
+
/** Validation state the field paints — antd `status`. `error` also reports `aria-invalid`. */
|
|
385
|
+
status?: ControlStatusProp;
|
|
386
|
+
/** Chrome level — antd `variant`. Default `outlined`. */
|
|
387
|
+
variant?: ControlVariantProp;
|
|
228
388
|
};
|
|
229
389
|
/** @see Checkbox — extends Radix checkbox root props. */
|
|
230
|
-
export type CheckboxProp = React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root
|
|
231
|
-
/**
|
|
390
|
+
export type CheckboxProp = React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> & {
|
|
391
|
+
/**
|
|
392
|
+
* antd `indeterminate` — paint the PARTIAL mark (a dash) without changing `checked`. Radix
|
|
393
|
+
* spells the same state as `checked="indeterminate"`; this is the antd spelling of it, and the
|
|
394
|
+
* two compose: `indeterminate` wins while it is true, and the box falls back to `checked` after.
|
|
395
|
+
*/
|
|
396
|
+
indeterminate?: boolean;
|
|
397
|
+
};
|
|
398
|
+
/** Shared option row — the conventional `CheckboxOptionType` shape. */
|
|
232
399
|
export type ChoiceOptionProp = {
|
|
233
400
|
label: React.ReactNode;
|
|
234
401
|
value: string;
|
|
@@ -262,12 +429,34 @@ export type RadioGroupProp = FieldA11yProps & {
|
|
|
262
429
|
id?: IdProp;
|
|
263
430
|
className?: ClassNameProp;
|
|
264
431
|
children?: React.ReactNode;
|
|
432
|
+
/**
|
|
433
|
+
* antd `optionType` — how each choice is DRAWN. `default` is a radio dot beside its label;
|
|
434
|
+
* `button` welds the choices into one segmented bar of radio buttons. The role stays
|
|
435
|
+
* `radiogroup`/`radio` either way: this is paint, never semantics.
|
|
436
|
+
*/
|
|
437
|
+
optionType?: RadioOptionTypeProp;
|
|
438
|
+
/** antd `buttonStyle` — fill of the selected choice while `optionType="button"`. */
|
|
439
|
+
buttonStyle?: RadioButtonStyleProp;
|
|
265
440
|
};
|
|
441
|
+
/** antd `RadioGroupOptionType` — a radio group drawn as dots or as a welded button bar. */
|
|
442
|
+
export type RadioOptionTypeProp = "default" | "button";
|
|
443
|
+
/** antd `RadioGroupButtonStyle` — the selected button is outlined, or filled with the brand. */
|
|
444
|
+
export type RadioButtonStyleProp = "outline" | "solid";
|
|
266
445
|
/** @see Radio.Item — Radix radio group item. */
|
|
267
446
|
export type RadioProp = React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>;
|
|
268
447
|
/** @see Switch — extends Radix switch root props. */
|
|
269
448
|
export type SwitchProp = React.ComponentPropsWithoutRef<typeof SwitchPrimitive.Root> & {
|
|
270
449
|
size?: "sm" | "md";
|
|
450
|
+
/**
|
|
451
|
+
* antd `loading` — the toggle is mid-flight: a spinner replaces the thumb glyph and the control
|
|
452
|
+
* stops accepting input (`aria-disabled`, not `disabled`, so it keeps its tab stop and its
|
|
453
|
+
* accessible name while a screen reader hears `aria-busy`).
|
|
454
|
+
*/
|
|
455
|
+
loading?: boolean;
|
|
456
|
+
/** antd `checkedChildren` — content shown INSIDE the track while on (`ON`, `有効`, a glyph). */
|
|
457
|
+
checkedChildren?: React.ReactNode;
|
|
458
|
+
/** antd `unCheckedChildren` — content shown inside the track while off. */
|
|
459
|
+
unCheckedChildren?: React.ReactNode;
|
|
271
460
|
};
|
|
272
461
|
/** @see Field — inline control + label + description wrapper. */
|
|
273
462
|
export type FieldProp = {
|
|
@@ -277,12 +466,90 @@ export type FieldProp = {
|
|
|
277
466
|
className?: ClassNameProp;
|
|
278
467
|
children: React.ReactNode;
|
|
279
468
|
};
|
|
469
|
+
/**
|
|
470
|
+
* Tick marks on a slider rail — antd `SliderMarks`. Keyed by the value the mark sits on; the
|
|
471
|
+
* value is the label. `null` renders the tick with no label.
|
|
472
|
+
*/
|
|
473
|
+
export type SliderMarksProp = Record<number, React.ReactNode>;
|
|
474
|
+
/**
|
|
475
|
+
* antd `tooltip` — the value bubble over a dragging thumb. `false` switches it off, `true` uses
|
|
476
|
+
* the raw value, and the object form formats it (a unit, a currency, a 全角 label).
|
|
477
|
+
*/
|
|
478
|
+
export type SliderTooltipProp = boolean | {
|
|
479
|
+
/** Force the bubble on/off instead of following hover/drag. */
|
|
480
|
+
open?: boolean;
|
|
481
|
+
/** Render the bubble's content. `null` switches the bubble off, exactly as antd's does. */
|
|
482
|
+
formatter?: ((value: number) => React.ReactNode) | null;
|
|
483
|
+
};
|
|
280
484
|
/** @see Slider — numeric range (Radix Slider). */
|
|
281
|
-
export type SliderProp = React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root
|
|
485
|
+
export type SliderProp = React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root> & {
|
|
486
|
+
/**
|
|
487
|
+
* antd `range` — two thumbs bounding a span rather than one thumb over a point. It is a
|
|
488
|
+
* DECLARATION, not an inference: a single-thumb slider whose `defaultValue` happens to be a
|
|
489
|
+
* two-element array used to become a range by accident, and a range whose value arrived
|
|
490
|
+
* asynchronously used to render as a point.
|
|
491
|
+
*/
|
|
492
|
+
range?: boolean;
|
|
493
|
+
/** antd `marks` — labelled ticks along the rail. */
|
|
494
|
+
marks?: SliderMarksProp;
|
|
495
|
+
/** antd `dots` — a tick at every `step`. Requires a `step`. */
|
|
496
|
+
dots?: boolean;
|
|
497
|
+
/**
|
|
498
|
+
* antd `included` — whether the painted range is the span from the start to the thumb
|
|
499
|
+
* (`true`, the default) or nothing at all (`false`, for a rail that only holds marks).
|
|
500
|
+
*/
|
|
501
|
+
included?: boolean;
|
|
502
|
+
/** antd `reverse` — run the scale the other way. Radix spells the same thing `inverted`. */
|
|
503
|
+
reverse?: boolean;
|
|
504
|
+
/** antd `tooltip` — the value bubble over a dragging thumb. Off by default. */
|
|
505
|
+
tooltip?: SliderTooltipProp;
|
|
506
|
+
};
|
|
282
507
|
/** @see Calendar — react-day-picker DayPicker plus an opt-in footer. */
|
|
508
|
+
/**
|
|
509
|
+
* Decorate one day cell — antd's `cellRender`, in the shape the Japanese market actually needs it:
|
|
510
|
+
* marking 祝日, a company holiday, a day already booked, a deadline.
|
|
511
|
+
*
|
|
512
|
+
* It WRAPS rather than replaces. `originNode` is the library's own day button, with its selection
|
|
513
|
+
* state, its `aria-selected`, its disabled handling and its place in the roving-tabindex grid
|
|
514
|
+
* already wired; returning something that does not contain it throws all of that away. The
|
|
515
|
+
* ordinary use is `<>{originNode}<span className="…" /></>` — decorate, do not rebuild.
|
|
516
|
+
*/
|
|
517
|
+
export type CalendarCellRenderProp = (date: Date, info: {
|
|
518
|
+
originNode: React.ReactNode;
|
|
519
|
+
}) => React.ReactNode;
|
|
283
520
|
export type CalendarProp = DayPickerProps & CalendarFooterProp & {
|
|
284
521
|
/** Replaces the built-in footer actions. */
|
|
285
522
|
footer?: React.ReactNode;
|
|
523
|
+
/**
|
|
524
|
+
* How the grid claims horizontal space. Default `auto` shrink-wraps to seven fixed day
|
|
525
|
+
* columns — the shape a picker popover needs, because the panel is shrink-to-fit and takes
|
|
526
|
+
* ITS width from the calendar inside it.
|
|
527
|
+
*
|
|
528
|
+
* `full` is for an EMBEDDED calendar — a shift board, a booking month — where the calendar is
|
|
529
|
+
* the content of a card rather than a dropdown. It stacks the months, lets each one grow, and
|
|
530
|
+
* lets the day cells share the row.
|
|
531
|
+
*
|
|
532
|
+
* Opt-in on purpose, and the default is load-bearing: making the calendar fluid globally was
|
|
533
|
+
* measured to collapse the DatePicker popover from 250px to 157.8px with 18.8px day cells.
|
|
534
|
+
* `Calendar` and `DatePicker` want opposite answers here, which is why the enterprise
|
|
535
|
+
* libraries split them too
|
|
536
|
+
* (`Calendar fullscreen` is 100% of its container; the DatePicker dropdown is a fixed 288px).
|
|
537
|
+
*/
|
|
538
|
+
width?: Extract<ControlWidthProp, "auto" | "full">;
|
|
539
|
+
/**
|
|
540
|
+
* Rule the grid: one border per day cell, weekday header included.
|
|
541
|
+
*
|
|
542
|
+
* NOT a box around the calendar — that is what `Card` is for, and nesting one inside a section
|
|
543
|
+
* card was measured on a real page as two rounded edges 16px apart with both paddings stacked.
|
|
544
|
+
* What a month grid needs is the ruling BETWEEN days, so a week reads as a row of cells the
|
|
545
|
+
* eye can track across.
|
|
546
|
+
*
|
|
547
|
+
* Default `false`, because a picker popover wants the opposite: floating day buttons with no
|
|
548
|
+
* ruling, so the selected day is the only shape in the panel.
|
|
549
|
+
*/
|
|
550
|
+
bordered?: boolean;
|
|
551
|
+
/** Decorate a day cell — 祝日, a booked day, a deadline. @see CalendarCellRenderProp */
|
|
552
|
+
cellRender?: CalendarCellRenderProp;
|
|
286
553
|
};
|
|
287
554
|
/** Footer actions shared by Calendar and the pickers that embed it. Both default to off. */
|
|
288
555
|
export type CalendarFooterProp = {
|
|
@@ -296,11 +563,39 @@ export type CalendarFooterProp = {
|
|
|
296
563
|
showClose?: boolean;
|
|
297
564
|
onClose?: () => void;
|
|
298
565
|
};
|
|
566
|
+
/** Shared picker chrome. Placement uses logical start/end so RTL follows the locale. */
|
|
567
|
+
export type PickerChromeProp = {
|
|
568
|
+
open?: boolean;
|
|
569
|
+
defaultOpen?: boolean;
|
|
570
|
+
onOpenChange?: (open: boolean) => void;
|
|
571
|
+
status?: ControlStatusProp;
|
|
572
|
+
variant?: ControlVariantProp;
|
|
573
|
+
size?: Extract<SizeProp, "sm" | "md" | "lg">;
|
|
574
|
+
inputReadOnly?: boolean;
|
|
575
|
+
preserveInvalidOnBlur?: boolean;
|
|
576
|
+
placement?: "bottom-start" | "bottom-end" | "top-start" | "top-end";
|
|
577
|
+
renderExtraFooter?: () => React.ReactNode;
|
|
578
|
+
ref?: React.Ref<HTMLInputElement>;
|
|
579
|
+
};
|
|
580
|
+
/** date-fns pattern, Intl options (including Japanese era), or a display function. */
|
|
581
|
+
export type PickerDateFormatProp = string | Intl.DateTimeFormatOptions | ((date: Date) => string);
|
|
299
582
|
/** @see DatePicker */
|
|
300
|
-
export type
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
583
|
+
export type DatePickerBaseProp = FieldA11yProps & PickerChromeProp & {
|
|
584
|
+
/** Display format; native submission remains ISO. */
|
|
585
|
+
format?: PickerDateFormatProp;
|
|
586
|
+
/** Parser for a custom display function or Intl era display; ISO always remains accepted. */
|
|
587
|
+
parseFormat?: (text: string) => Date | undefined;
|
|
588
|
+
minDate?: Date;
|
|
589
|
+
maxDate?: Date;
|
|
590
|
+
showWeek?: boolean;
|
|
591
|
+
needConfirm?: boolean;
|
|
592
|
+
picker?: "date" | "week" | "month" | "quarter" | "year";
|
|
593
|
+
order?: boolean;
|
|
594
|
+
showTime?: boolean | Pick<TimePickerProp, "hourStep" | "minuteStep" | "secondStep" | "showSeconds" | "use12Hours" | "disabledTime">;
|
|
595
|
+
presets?: {
|
|
596
|
+
label: React.ReactNode;
|
|
597
|
+
value: Date | (() => Date);
|
|
598
|
+
}[];
|
|
304
599
|
placeholder?: PlaceholderProp;
|
|
305
600
|
disabled?: DisabledProp;
|
|
306
601
|
className?: ClassNameProp;
|
|
@@ -310,11 +605,39 @@ export type DatePickerProp = FieldA11yProps & {
|
|
|
310
605
|
locale?: DayPickerProps["locale"];
|
|
311
606
|
fromDate?: Date;
|
|
312
607
|
toDate?: Date;
|
|
313
|
-
/**
|
|
314
|
-
|
|
608
|
+
/** Decorate a day cell — 祝日, a booked day, a deadline. @see CalendarCellRenderProp */
|
|
609
|
+
cellRender?: CalendarCellRenderProp;
|
|
610
|
+
/**
|
|
611
|
+
* Forbid individual dates by predicate — the rule `fromDate`/`toDate` cannot express, because a
|
|
612
|
+
* business calendar is rarely one contiguous range: 土日, a closed accounting period, a 祝日, a
|
|
613
|
+
* day already fully booked.
|
|
614
|
+
*
|
|
615
|
+
* Applies to BOTH routes into the value. The calendar greys the cell out, and a date typed into
|
|
616
|
+
* the field is rejected the same way an unparseable one is — otherwise the keyboard becomes a
|
|
617
|
+
* way around the rule the mouse obeys.
|
|
618
|
+
*/
|
|
619
|
+
disabledDate?: (date: Date) => boolean;
|
|
620
|
+
/**
|
|
621
|
+
* antd `allowClear` — an inline ✕ that clears the value when one is set (default true). The
|
|
622
|
+
* OBJECT form additionally replaces the icon and/or the accessible label.
|
|
623
|
+
*/
|
|
624
|
+
allowClear?: AllowClearProp;
|
|
315
625
|
} & Pick<CalendarFooterProp, "showToday" | "showClose">;
|
|
626
|
+
/** Single and multiple selections keep their callback types distinct. */
|
|
627
|
+
export type DatePickerProp = DatePickerBaseProp & ({
|
|
628
|
+
multiple?: false;
|
|
629
|
+
value?: Date;
|
|
630
|
+
defaultValue?: Date;
|
|
631
|
+
onValueChange?: (value: Date | undefined) => void;
|
|
632
|
+
} | {
|
|
633
|
+
multiple: true;
|
|
634
|
+
value?: Date[];
|
|
635
|
+
defaultValue?: Date[];
|
|
636
|
+
onValueChange?: (value: Date[] | undefined) => void;
|
|
637
|
+
showTime?: false;
|
|
638
|
+
});
|
|
316
639
|
/** @see MonthPicker */
|
|
317
|
-
export type MonthPickerProp = FieldA11yProps & {
|
|
640
|
+
export type MonthPickerProp = FieldA11yProps & PickerChromeProp & {
|
|
318
641
|
value?: ValueProp<Date>;
|
|
319
642
|
defaultValue?: DefaultValueProp<Date | undefined>;
|
|
320
643
|
onValueChange?: OnValueChangeProp<Date | undefined>;
|
|
@@ -327,14 +650,19 @@ export type MonthPickerProp = FieldA11yProps & {
|
|
|
327
650
|
/** Clamp the year navigation (inclusive). */
|
|
328
651
|
fromYear?: number;
|
|
329
652
|
toYear?: number;
|
|
330
|
-
/**
|
|
331
|
-
|
|
653
|
+
/**
|
|
654
|
+
* Show an inline ✕ to clear the value when one is set (default true). The OBJECT form
|
|
655
|
+
* additionally replaces the icon and/or the accessible label (antd `allowClear`).
|
|
656
|
+
*/
|
|
657
|
+
allowClear?: AllowClearProp;
|
|
658
|
+
/** Node appended below the month grid (antd `renderExtraFooter`). */
|
|
659
|
+
renderExtraFooter?: () => React.ReactNode;
|
|
332
660
|
};
|
|
333
661
|
/**
|
|
334
662
|
* @see MonthRangePicker — both edges are normalized to the FIRST day of their month
|
|
335
663
|
* (the `DateRange` shape is shared with DateRangePicker so ranges interop).
|
|
336
664
|
*/
|
|
337
|
-
export type MonthRangePickerProp = FieldA11yProps & {
|
|
665
|
+
export type MonthRangePickerProp = FieldA11yProps & PickerChromeProp & {
|
|
338
666
|
value?: ValueProp<DateRange>;
|
|
339
667
|
defaultValue?: DefaultValueProp<DateRange | undefined>;
|
|
340
668
|
onValueChange?: OnValueChangeProp<DateRange | undefined>;
|
|
@@ -347,11 +675,30 @@ export type MonthRangePickerProp = FieldA11yProps & {
|
|
|
347
675
|
/** Clamp the year navigation (inclusive). */
|
|
348
676
|
fromYear?: number;
|
|
349
677
|
toYear?: number;
|
|
350
|
-
/**
|
|
351
|
-
|
|
678
|
+
/**
|
|
679
|
+
* Show an inline ✕ to clear the range when one is set (default true). The OBJECT form
|
|
680
|
+
* additionally replaces the icon and/or the accessible label (antd `allowClear`).
|
|
681
|
+
*/
|
|
682
|
+
allowClear?: AllowClearProp;
|
|
683
|
+
/** Node appended below the month grid (antd `renderExtraFooter`). */
|
|
684
|
+
renderExtraFooter?: () => React.ReactNode;
|
|
352
685
|
};
|
|
353
686
|
/** @see DateRangePicker */
|
|
354
|
-
export type DateRangePickerProp = FieldA11yProps & {
|
|
687
|
+
export type DateRangePickerProp = FieldA11yProps & PickerChromeProp & {
|
|
688
|
+
/** Display format; native submission remains ISO. */
|
|
689
|
+
format?: PickerDateFormatProp;
|
|
690
|
+
/** Parser for a custom display function or Intl era display; ISO always remains accepted. */
|
|
691
|
+
parseFormat?: (text: string) => Date | undefined;
|
|
692
|
+
minDate?: Date;
|
|
693
|
+
maxDate?: Date;
|
|
694
|
+
showWeek?: boolean;
|
|
695
|
+
needConfirm?: boolean;
|
|
696
|
+
presets?: {
|
|
697
|
+
label: React.ReactNode;
|
|
698
|
+
value: DateRange | (() => DateRange);
|
|
699
|
+
}[];
|
|
700
|
+
allowEmpty?: [boolean, boolean];
|
|
701
|
+
order?: boolean;
|
|
355
702
|
value?: ValueProp<DateRange>;
|
|
356
703
|
defaultValue?: DefaultValueProp<DateRange | undefined>;
|
|
357
704
|
onValueChange?: OnValueChangeProp<DateRange | undefined>;
|
|
@@ -364,11 +711,40 @@ export type DateRangePickerProp = FieldA11yProps & {
|
|
|
364
711
|
locale?: DayPickerProps["locale"];
|
|
365
712
|
fromDate?: Date;
|
|
366
713
|
toDate?: Date;
|
|
367
|
-
/**
|
|
368
|
-
|
|
714
|
+
/** Decorate a day cell — see `CalendarCellRenderProp`. */
|
|
715
|
+
cellRender?: CalendarCellRenderProp;
|
|
716
|
+
/** Forbid individual dates by predicate — see `DatePickerProp.disabledDate`. */
|
|
717
|
+
disabledDate?: (date: Date) => boolean;
|
|
718
|
+
/**
|
|
719
|
+
* antd `allowClear` — an inline ✕ that clears the range when one is set (default true). The
|
|
720
|
+
* OBJECT form additionally replaces the icon and/or the accessible label.
|
|
721
|
+
*/
|
|
722
|
+
allowClear?: AllowClearProp;
|
|
369
723
|
} & Pick<CalendarFooterProp, "showToday" | "showClose">;
|
|
724
|
+
/**
|
|
725
|
+
* Which times a TimePicker refuses, in antd's shape: one call returns the two predicates, so a
|
|
726
|
+
* consumer computing them from the same source (a start time, a shift window) does that work once
|
|
727
|
+
* per render rather than once per option.
|
|
728
|
+
*
|
|
729
|
+
* `disabledMinutes` receives the hour the minute would belong to, which is what makes the ordinary
|
|
730
|
+
* pair rule expressible: "終了 must be after 開始" forbids every minute before the start minute in
|
|
731
|
+
* the start hour, and no minute at all in any later hour.
|
|
732
|
+
*/
|
|
733
|
+
export type TimePickerDisabledTimeProp = () => {
|
|
734
|
+
disabledHours?: () => number[];
|
|
735
|
+
disabledMinutes?: (hour: number) => number[];
|
|
736
|
+
disabledSeconds?: (hour: number, minute: number) => number[];
|
|
737
|
+
};
|
|
370
738
|
/** @see TimePicker — popover HH:mm picker (canonical 24h storage). */
|
|
371
|
-
export type TimePickerProp = FieldA11yProps & {
|
|
739
|
+
export type TimePickerProp = FieldA11yProps & PickerChromeProp & {
|
|
740
|
+
/** Opt-in wheel selection; defaults off to avoid accidental edits. */
|
|
741
|
+
changeOnScroll?: boolean;
|
|
742
|
+
hourStep?: number;
|
|
743
|
+
secondStep?: number;
|
|
744
|
+
showSeconds?: boolean;
|
|
745
|
+
use12Hours?: boolean;
|
|
746
|
+
/** Time pattern: HH:mm, HH:mm:ss, h:mm A (or date-fns a). Storage stays 24-hour. */
|
|
747
|
+
format?: string;
|
|
372
748
|
value?: ValueProp;
|
|
373
749
|
defaultValue?: DefaultValueProp;
|
|
374
750
|
onValueChange?: OnValueChangeProp;
|
|
@@ -380,14 +756,63 @@ export type TimePickerProp = FieldA11yProps & {
|
|
|
380
756
|
name?: NameProp;
|
|
381
757
|
/** Minute column step — default 5 (logistics cut-offs). */
|
|
382
758
|
minuteStep?: number;
|
|
383
|
-
/**
|
|
384
|
-
|
|
759
|
+
/**
|
|
760
|
+
* Forbid individual hours and minutes. Without it a 開始/終了 pair has no way to stop the end
|
|
761
|
+
* time being set before the start time — the columns will happily offer it.
|
|
762
|
+
*
|
|
763
|
+
* Applies to BOTH routes into the value: a disabled option cannot be clicked, is skipped by the
|
|
764
|
+
* arrow keys, and a forbidden time typed into the field is rejected.
|
|
765
|
+
*/
|
|
766
|
+
disabledTime?: TimePickerDisabledTimeProp;
|
|
767
|
+
/**
|
|
768
|
+
* Drop disabled options from the columns instead of showing them greyed out (default false, as
|
|
769
|
+
* antd). Greyed-out is usually the better default — a visible-but-refused option tells the
|
|
770
|
+
* reader the rule exists — but a column that is mostly forbidden reads better short.
|
|
771
|
+
*/
|
|
772
|
+
hideDisabledOptions?: boolean;
|
|
773
|
+
/**
|
|
774
|
+
* Offer a "now" action in the panel footer (default true, as antd's `showNow`). It is refused,
|
|
775
|
+
* not hidden, when `disabledTime` forbids the current time — the same treatment a forbidden
|
|
776
|
+
* column option gets, and for the same reason.
|
|
777
|
+
*/
|
|
778
|
+
showNow?: boolean;
|
|
779
|
+
/**
|
|
780
|
+
* Hold the panel's choices as a DRAFT until a confirm action commits them (antd's `needConfirm`).
|
|
781
|
+
*
|
|
782
|
+
* DEFAULT `false`, which is where this diverges from antd deliberately. antd defaults it on; this
|
|
783
|
+
* library has always committed on select and closed, and every consumer's flow is built on that.
|
|
784
|
+
* Flipping the default would silently add a click to every existing time field. Opt in where the
|
|
785
|
+
* value is expensive to change (a saved shift, a published slot); leave it off otherwise.
|
|
786
|
+
*/
|
|
787
|
+
needConfirm?: boolean;
|
|
788
|
+
/**
|
|
789
|
+
* antd `allowClear` — an inline ✕ that clears the value when one is set (default true). The
|
|
790
|
+
* OBJECT form additionally replaces the icon and/or the accessible label.
|
|
791
|
+
*/
|
|
792
|
+
allowClear?: AllowClearProp;
|
|
793
|
+
};
|
|
794
|
+
/** A pair of canonical times, ordered by default; empty endpoints are explicitly configurable. */
|
|
795
|
+
export type TimeRangePickerProp = Omit<TimePickerProp, "value" | "defaultValue" | "onValueChange" | "placeholder"> & {
|
|
796
|
+
value?: [string, string];
|
|
797
|
+
defaultValue?: [string, string];
|
|
798
|
+
onValueChange?: (value: [string, string]) => void;
|
|
799
|
+
placeholder?: [string, string];
|
|
800
|
+
order?: boolean;
|
|
801
|
+
allowEmpty?: [boolean, boolean];
|
|
385
802
|
};
|
|
386
803
|
/** @see ColorPicker */
|
|
387
804
|
export type ColorPickerProp = FieldA11yProps & {
|
|
805
|
+
/** Hex colour (`#rgb` or `#rrggbb`). `""`/omitted = no colour chosen. */
|
|
388
806
|
value?: ValueProp;
|
|
807
|
+
/**
|
|
808
|
+
* Uncontrolled initial colour (controlled-triad rule). Without it the control starts EMPTY —
|
|
809
|
+
* it never invents a colour of its own, so nothing brand-shaped is baked into the framework.
|
|
810
|
+
*/
|
|
811
|
+
defaultValue?: DefaultValueProp;
|
|
389
812
|
onValueChange?: OnValueChangeProp;
|
|
390
813
|
disabled?: DisabledProp;
|
|
814
|
+
/** Form field name — submits the hex through a hidden input (`""` while no colour is chosen). */
|
|
815
|
+
name?: NameProp;
|
|
391
816
|
className?: ClassNameProp;
|
|
392
817
|
id?: IdProp;
|
|
393
818
|
showHexInput?: boolean;
|
|
@@ -420,20 +845,16 @@ export type SearchSelectLoadResultProp = {
|
|
|
420
845
|
* @see Select — the data-driven entry point (`<Select options|loadOptions showSearch …/>`).
|
|
421
846
|
* This is the shape of its internal engine (`SelectDataProp` extends it); use `Select` directly.
|
|
422
847
|
*/
|
|
423
|
-
export type
|
|
424
|
-
value?: ValueProp;
|
|
425
|
-
/** Uncontrolled initial value — the trigger shows its option's label at rest (controlled-triad). */
|
|
426
|
-
defaultValue?: DefaultValueProp;
|
|
427
|
-
onValueChange?: (value: string, option?: SearchSelectOptionProp) => void;
|
|
848
|
+
export type SearchSelectBaseProp = {
|
|
428
849
|
/** Static option list (client-side filtered). Provide this OR `loadOptions`, not both. */
|
|
429
850
|
options?: SearchSelectOptionProp[];
|
|
430
851
|
/** Remote fetcher — debounced search + infinite-scroll pagination call into this. Provide this
|
|
431
852
|
* OR `options`. */
|
|
432
853
|
loadOptions?: (params: SearchSelectLoadParamsProp) => Promise<SearchSelectLoadResultProp>;
|
|
433
|
-
/** Custom per-option renderer
|
|
854
|
+
/** Custom per-option renderer. Defaults to label + optional sublabel. */
|
|
434
855
|
renderOption?: (option: SearchSelectOptionProp) => React.ReactNode;
|
|
435
856
|
/**
|
|
436
|
-
* Custom renderer for the SELECTED value shown on the trigger (
|
|
857
|
+
* Custom renderer for the SELECTED value shown on the trigger (the conventional `labelRender`).
|
|
437
858
|
* Receives the value, the resolved label, and the full option when it is loaded (undefined for
|
|
438
859
|
* an async preset whose page hasn't arrived).
|
|
439
860
|
*/
|
|
@@ -468,8 +889,24 @@ export type SearchSelectProp = {
|
|
|
468
889
|
readOnly?: boolean;
|
|
469
890
|
/** Trigger height tier — forwarded to the underlying Button. Default matches Button's own default. */
|
|
470
891
|
size?: SizeProp;
|
|
892
|
+
/**
|
|
893
|
+
* Validation status (antd `status`). `error` recolours the trigger AND sets `aria-invalid`;
|
|
894
|
+
* `warning` recolours only. A `status` set here never overrides an `aria-invalid` arriving from
|
|
895
|
+
* `FormField` — the field's own validation state wins.
|
|
896
|
+
*/
|
|
897
|
+
status?: ControlStatusProp;
|
|
898
|
+
/** Control surface (antd `variant`). Default `outlined`. */
|
|
899
|
+
variant?: ControlVariantProp;
|
|
900
|
+
/**
|
|
901
|
+
* In-flight state (antd `loading`) — the trailing chevron becomes a spinner and the trigger
|
|
902
|
+
* reports `aria-busy`. Distinct from the internal `loadOptions` fetch spinner, which describes
|
|
903
|
+
* the LIST; this one describes the FIELD (e.g. the form is still hydrating its value).
|
|
904
|
+
*/
|
|
905
|
+
loading?: PendingProp;
|
|
471
906
|
/** Controlled open state for the popover (uncontrolled by default). */
|
|
472
907
|
open?: OpenProp;
|
|
908
|
+
/** Uncontrolled initial open state (antd `defaultOpen`). */
|
|
909
|
+
defaultOpen?: DefaultOpenProp;
|
|
473
910
|
onOpenChange?: OnOpenChangeProp;
|
|
474
911
|
/** Controlled search-box query (uncontrolled by default). Pairs with `onSearchChange`. */
|
|
475
912
|
search?: string;
|
|
@@ -480,6 +917,45 @@ export type SearchSelectProp = {
|
|
|
480
917
|
* query; return true to keep the row.
|
|
481
918
|
*/
|
|
482
919
|
filterOption?: (option: SearchSelectOptionProp, query: string) => boolean;
|
|
920
|
+
/**
|
|
921
|
+
* Order the filtered rows (antd `filterSort`). Runs AFTER `filterOption`, on the client, in
|
|
922
|
+
* `options` mode only — with `loadOptions` the server owns the order.
|
|
923
|
+
*/
|
|
924
|
+
filterSort?: (a: SearchSelectOptionProp, b: SearchSelectOptionProp, info: {
|
|
925
|
+
searchValue: string;
|
|
926
|
+
}) => number;
|
|
927
|
+
/**
|
|
928
|
+
* Clear the search box after a pick (antd `autoClearSearchValue`, default `true`). Set `false`
|
|
929
|
+
* to keep the query so the next open resumes the same filtered list.
|
|
930
|
+
*/
|
|
931
|
+
autoClearSearchValue?: boolean;
|
|
932
|
+
/**
|
|
933
|
+
* Per-option renderer in antd's own shape — `(option, { index })`. Takes precedence over the
|
|
934
|
+
* older `renderOption`, which stays for the many call sites already using it.
|
|
935
|
+
*/
|
|
936
|
+
optionRender?: (option: SearchSelectOptionProp, info: {
|
|
937
|
+
index: number;
|
|
938
|
+
}) => React.ReactNode;
|
|
939
|
+
/**
|
|
940
|
+
* Node rendered on the SELECTED row (antd `menuItemSelectedIcon`). Off by default: this library's
|
|
941
|
+
* selected row is marked by fill + weight, which costs no width.
|
|
942
|
+
*/
|
|
943
|
+
menuItemSelectedIcon?: React.ReactNode;
|
|
944
|
+
/** Node shown when the list has nothing to offer (antd `notFoundContent`). Beats `emptyMessage`. */
|
|
945
|
+
notFoundContent?: NotFoundContentProp;
|
|
946
|
+
/**
|
|
947
|
+
* Popup width (antd `popupMatchSelectWidth`). `true` (default) pins it to the trigger, `false`
|
|
948
|
+
* lets it hug its content, a number pins it to that many pixels.
|
|
949
|
+
*/
|
|
950
|
+
popupMatchSelectWidth?: PopupMatchWidthProp;
|
|
951
|
+
/**
|
|
952
|
+
* antd `allowClear`. `true`/`false` toggles the clear ✕ (same meaning as `clearable`, which
|
|
953
|
+
* stays as this library's own name); the OBJECT form additionally replaces the icon and/or the
|
|
954
|
+
* accessible label. When both are given, `allowClear` wins — it is the more specific statement.
|
|
955
|
+
*/
|
|
956
|
+
allowClear?: AllowClearProp;
|
|
957
|
+
/** Fired after the value is cleared through the ✕ (antd `onClear`). */
|
|
958
|
+
onClear?: () => void;
|
|
483
959
|
/**
|
|
484
960
|
* Custom error slot — receives the resolved message and a `retry` callback that reloads from the
|
|
485
961
|
* first page (a predictable recovery, not a resume of a failed page-N append). Overrides the
|
|
@@ -512,15 +988,63 @@ export type SearchSelectProp = {
|
|
|
512
988
|
/** Normally injected by `FormField`. */
|
|
513
989
|
"data-field"?: string;
|
|
514
990
|
};
|
|
991
|
+
/**
|
|
992
|
+
* Single-select (the default): one `string` in, one `string` out — `""` means nothing selected.
|
|
993
|
+
* `mode` is absent rather than `"single"` so every existing call site keeps its exact type.
|
|
994
|
+
*/
|
|
995
|
+
export type SearchSelectSingleProp = {
|
|
996
|
+
mode?: undefined;
|
|
997
|
+
value?: ValueProp;
|
|
998
|
+
/** Uncontrolled initial value — the trigger shows its option's label at rest (controlled-triad). */
|
|
999
|
+
defaultValue?: DefaultValueProp;
|
|
1000
|
+
onValueChange?: (value: string, option?: SearchSelectOptionProp) => void;
|
|
1001
|
+
/** Fired when an option is picked (antd `onSelect`). */
|
|
1002
|
+
onSelect?: (value: string, option: SearchSelectOptionProp) => void;
|
|
1003
|
+
};
|
|
1004
|
+
/**
|
|
1005
|
+
* antd `mode="multiple"` — pick several from ONE flat, searchable, possibly async option list.
|
|
1006
|
+
*
|
|
1007
|
+
* The panel stays OPEN across picks (a multi-pick is a run of gestures, not one), each row toggles,
|
|
1008
|
+
* and the trigger collapses the picked labels through the shared `maxTagCount` / `maxTagPlaceholder`
|
|
1009
|
+
* helper Cascader and TreeSelect already use — so three multi-value triggers in one form read the
|
|
1010
|
+
* same. Removal happens in the list (or with the clear ✕): the trigger is a `<button>`, and a
|
|
1011
|
+
* per-chip remove button inside it would be a button nested in a button.
|
|
1012
|
+
*/
|
|
1013
|
+
export type SearchSelectMultipleProp = {
|
|
1014
|
+
mode: "multiple";
|
|
1015
|
+
value?: ValueProp<string[]>;
|
|
1016
|
+
/** Uncontrolled initial selection (controlled-triad). */
|
|
1017
|
+
defaultValue?: DefaultValueProp<string[]>;
|
|
1018
|
+
onValueChange?: (value: string[], options?: SearchSelectOptionProp[]) => void;
|
|
1019
|
+
/** Fired when an option JOINS the selection (antd `onSelect`). */
|
|
1020
|
+
onSelect?: (value: string, option: SearchSelectOptionProp) => void;
|
|
1021
|
+
/** Fired when an option LEAVES the selection (antd `onDeselect`). */
|
|
1022
|
+
onDeselect?: (value: string, option: SearchSelectOptionProp) => void;
|
|
1023
|
+
/**
|
|
1024
|
+
* Hard ceiling on how many options may be held (antd `maxCount`). A pick past the ceiling is
|
|
1025
|
+
* REFUSED — the value handed to `onValueChange` is never over the limit — and the remaining rows
|
|
1026
|
+
* report `aria-disabled` so the ceiling is visible before it is hit.
|
|
1027
|
+
*/
|
|
1028
|
+
maxCount?: number;
|
|
1029
|
+
/** How many labels the trigger shows before the rest collapse (antd `maxTagCount`). */
|
|
1030
|
+
maxTagCount?: MaxTagCountProp;
|
|
1031
|
+
/** The node standing in for what `maxTagCount` hid (antd `maxTagPlaceholder`). */
|
|
1032
|
+
maxTagPlaceholder?: MaxTagPlaceholderProp;
|
|
1033
|
+
};
|
|
1034
|
+
/** @see Select — the searchable engine. Single by default; `mode="multiple"` switches the shape. */
|
|
1035
|
+
export type SearchSelectProp = SearchSelectBaseProp & (SearchSelectSingleProp | SearchSelectMultipleProp);
|
|
515
1036
|
/**
|
|
516
1037
|
* Data-driven (Ant-style) form of {@link Select} — one component covering static `options` or
|
|
517
1038
|
* async `loadOptions`, with `showSearch` toggling the searchable combobox vs a plain listbox.
|
|
518
1039
|
* Passing `options`/`loadOptions` to `<Select>` switches it from the compound API to this one.
|
|
519
1040
|
*/
|
|
520
|
-
export type SelectDataProp =
|
|
521
|
-
/**
|
|
1041
|
+
export type SelectDataProp = SearchSelectBaseProp & {
|
|
1042
|
+
/**
|
|
1043
|
+
* Show the search box (combobox). Defaults to true when `loadOptions` is set or
|
|
1044
|
+
* `mode="multiple"` is in force (antd's own defaults), otherwise false.
|
|
1045
|
+
*/
|
|
522
1046
|
showSearch?: boolean;
|
|
523
|
-
};
|
|
1047
|
+
} & (SearchSelectSingleProp | SearchSelectMultipleProp);
|
|
524
1048
|
/** @see UploadFileItem */
|
|
525
1049
|
export type UploadFileItemProp = UploadFileItem;
|
|
526
1050
|
/** @see Upload */
|
|
@@ -536,12 +1060,28 @@ export type UploadProp = FieldA11yProps & {
|
|
|
536
1060
|
maxCount?: number;
|
|
537
1061
|
maxSizeBytes?: number;
|
|
538
1062
|
disabled?: DisabledProp;
|
|
1063
|
+
readOnly?: boolean;
|
|
1064
|
+
directory?: boolean;
|
|
1065
|
+
pastable?: boolean;
|
|
1066
|
+
openFileDialogOnClick?: boolean;
|
|
1067
|
+
name?: string;
|
|
1068
|
+
action?: string | ((file: File) => string | Promise<string>);
|
|
1069
|
+
method?: "POST" | "PUT" | "PATCH";
|
|
1070
|
+
headers?: Record<string, string>;
|
|
1071
|
+
data?: Record<string, string | Blob> | ((file: File) => Record<string, string | Blob> | Promise<Record<string, string | Blob>>);
|
|
1072
|
+
withCredentials?: boolean;
|
|
1073
|
+
beforeUpload?: (file: File, files: File[]) => boolean | File | Blob | typeof import("../../components/data-entry/upload-types.js").UPLOAD_LIST_IGNORE | Promise<boolean | File | Blob | typeof import("../../components/data-entry/upload-types.js").UPLOAD_LIST_IGNORE>;
|
|
1074
|
+
onReject?: (rejection: import("../../components/data-entry/upload-types.js").UploadRejection) => void;
|
|
1075
|
+
onRemove?: (item: UploadFileItemProp) => boolean | void | Promise<boolean | void>;
|
|
1076
|
+
onPreview?: (item: UploadFileItemProp) => void;
|
|
1077
|
+
onDownload?: (item: UploadFileItemProp) => void;
|
|
1078
|
+
previewFile?: (file: File) => Promise<string>;
|
|
1079
|
+
onDrop?: React.DragEventHandler<HTMLElement>;
|
|
1080
|
+
showUploadList?: boolean;
|
|
1081
|
+
itemRender?: (node: React.ReactElement, item: UploadFileItemProp, items: UploadFileItemProp[], actions: import("../../components/data-entry/upload-types.js").UploadItemActions) => React.ReactNode;
|
|
539
1082
|
removable?: boolean;
|
|
540
1083
|
/** App: issue → PUT → complete; return mediaId + optional preview URL */
|
|
541
|
-
onUpload?: (file: File, item: UploadFileItemProp) => Promise<
|
|
542
|
-
mediaId: string;
|
|
543
|
-
previewUrl?: string;
|
|
544
|
-
}>;
|
|
1084
|
+
onUpload?: (file: File, item: UploadFileItemProp, context: import("../../components/data-entry/upload-types.js").UploadRequestContext) => Promise<import("../../components/data-entry/upload-types.js").UploadResult>;
|
|
545
1085
|
/** Injected by FormField (or set directly) — applied to the native `<input type="file">`. */
|
|
546
1086
|
id?: IdProp;
|
|
547
1087
|
/**
|
|
@@ -590,11 +1130,64 @@ export type CascaderProp = FieldA11yProps & {
|
|
|
590
1130
|
showSearch?: boolean;
|
|
591
1131
|
placeholder?: PlaceholderProp;
|
|
592
1132
|
disabled?: DisabledProp;
|
|
1133
|
+
/**
|
|
1134
|
+
* Read-only: the selection stays visible, focusable and submitted, but the panel refuses to open
|
|
1135
|
+
* and the clear ✕ is withdrawn. The same contract Select states — unlike `disabled`, the field
|
|
1136
|
+
* keeps its tab stop and still posts its value, which is what a locked-for-this-role field needs.
|
|
1137
|
+
*/
|
|
1138
|
+
readOnly?: boolean;
|
|
1139
|
+
/**
|
|
1140
|
+
* Form field name — submits through hidden input(s). A path is joined with `/`
|
|
1141
|
+
* (`"jp/13/shibuya"`), and `multiple` emits ONE field per selected path under the same name (the
|
|
1142
|
+
* native `<select multiple>` contract). Option values must therefore not contain `/`.
|
|
1143
|
+
*/
|
|
1144
|
+
name?: NameProp;
|
|
593
1145
|
className?: ClassNameProp;
|
|
594
1146
|
id?: IdProp;
|
|
595
1147
|
expandTrigger?: "click" | "hover";
|
|
596
1148
|
fieldNames?: TreeFieldNamesProp;
|
|
597
|
-
allowClear?:
|
|
1149
|
+
allowClear?: AllowClearProp;
|
|
1150
|
+
/** Control height tier (antd `size`) — the shared `--control-height` ladder. */
|
|
1151
|
+
size?: SizeProp;
|
|
1152
|
+
/** Validation status (antd `status`). `error` also sets `aria-invalid`; `warning` recolours only. */
|
|
1153
|
+
status?: ControlStatusProp;
|
|
1154
|
+
/** Control surface (antd `variant`). Default `outlined`. */
|
|
1155
|
+
variant?: ControlVariantProp;
|
|
1156
|
+
/** In-flight state (antd `loading`) — spinner in place of the chevron, `aria-busy` on the trigger. */
|
|
1157
|
+
loading?: PendingProp;
|
|
1158
|
+
/** Controlled panel open state (antd `open`). */
|
|
1159
|
+
open?: OpenProp;
|
|
1160
|
+
/** Uncontrolled initial open state (antd `defaultOpen`). */
|
|
1161
|
+
defaultOpen?: DefaultOpenProp;
|
|
1162
|
+
/** Panel open change (antd `onOpenChange`). Fires for both controlled and uncontrolled panels. */
|
|
1163
|
+
onOpenChange?: OnOpenChangeProp;
|
|
1164
|
+
/**
|
|
1165
|
+
* `multiple` only — which checked paths appear in the trigger label (antd `showCheckedStrategy`).
|
|
1166
|
+
* `SHOW_PARENT` collapses a fully-checked parent's children into the parent; `SHOW_CHILD`
|
|
1167
|
+
* (default) lists the leaves. `SHOW_ALL` is TreeSelect-only in antd and is not accepted here.
|
|
1168
|
+
*/
|
|
1169
|
+
showCheckedStrategy?: Exclude<ShowCheckedStrategyProp, "SHOW_ALL">;
|
|
1170
|
+
/**
|
|
1171
|
+
* Lazy children (antd `loadData`). Called ONCE per node the first time a branch with no
|
|
1172
|
+
* `children` and `isLeaf !== true` is expanded; push the fetched children into `options`.
|
|
1173
|
+
*/
|
|
1174
|
+
loadData?: (selectedOptions: TreeOptionProp[]) => void | Promise<void>;
|
|
1175
|
+
/** Render the trigger label from the selected path (antd `displayRender`). */
|
|
1176
|
+
displayRender?: (labels: string[], selectedOptions?: TreeOptionProp[]) => React.ReactNode;
|
|
1177
|
+
/** Per-option renderer for a column row (antd `optionRender`). */
|
|
1178
|
+
optionRender?: (option: TreeOptionProp) => React.ReactNode;
|
|
1179
|
+
/** `multiple` only — visible paths in the trigger before the rest collapse (antd `maxTagCount`). */
|
|
1180
|
+
maxTagCount?: MaxTagCountProp;
|
|
1181
|
+
/** The node standing in for what `maxTagCount` hid (antd `maxTagPlaceholder`). */
|
|
1182
|
+
maxTagPlaceholder?: MaxTagPlaceholderProp;
|
|
1183
|
+
/** Node shown when the search finds nothing (antd `notFoundContent`). */
|
|
1184
|
+
notFoundContent?: NotFoundContentProp;
|
|
1185
|
+
/** Clear the search box after a pick (antd `autoClearSearchValue`, default `true`). */
|
|
1186
|
+
autoClearSearchValue?: boolean;
|
|
1187
|
+
/** Controlled search query (antd `showSearch.searchValue`). */
|
|
1188
|
+
search?: string;
|
|
1189
|
+
/** Search query change (antd `showSearch.onSearch`). */
|
|
1190
|
+
onSearchChange?: OnSearchChangeProp;
|
|
598
1191
|
"aria-label"?: string;
|
|
599
1192
|
"aria-labelledby"?: string;
|
|
600
1193
|
"aria-describedby"?: string;
|
|
@@ -617,10 +1210,54 @@ export type TreeSelectProp = FieldA11yProps & {
|
|
|
617
1210
|
treeDefaultExpandAll?: boolean;
|
|
618
1211
|
placeholder?: PlaceholderProp;
|
|
619
1212
|
disabled?: DisabledProp;
|
|
620
|
-
|
|
1213
|
+
/**
|
|
1214
|
+
* Read-only: the selection stays visible, focusable and submitted, but the tree refuses to open
|
|
1215
|
+
* and the clear ✕ is withdrawn. The same contract Select states — unlike `disabled`, the field
|
|
1216
|
+
* keeps its tab stop and still posts its value.
|
|
1217
|
+
*/
|
|
1218
|
+
readOnly?: boolean;
|
|
1219
|
+
/**
|
|
1220
|
+
* Form field name — submits through hidden input(s). `multiple`/`treeCheckable` emits ONE field
|
|
1221
|
+
* per checked value under the same name (the native `<select multiple>` contract).
|
|
1222
|
+
*/
|
|
1223
|
+
name?: NameProp;
|
|
1224
|
+
allowClear?: AllowClearProp;
|
|
621
1225
|
className?: ClassNameProp;
|
|
622
1226
|
id?: IdProp;
|
|
623
1227
|
fieldNames?: TreeFieldNamesProp;
|
|
1228
|
+
/** Control height tier (antd `size`) — the shared `--control-height` ladder. */
|
|
1229
|
+
size?: SizeProp;
|
|
1230
|
+
/** Validation status (antd `status`). `error` also sets `aria-invalid`; `warning` recolours only. */
|
|
1231
|
+
status?: ControlStatusProp;
|
|
1232
|
+
/** Control surface (antd `variant`). Default `outlined`. */
|
|
1233
|
+
variant?: ControlVariantProp;
|
|
1234
|
+
/** In-flight state (antd `loading`) — spinner in place of the chevron, `aria-busy` on the trigger. */
|
|
1235
|
+
loading?: PendingProp;
|
|
1236
|
+
/** Controlled panel open state (antd `open`). */
|
|
1237
|
+
open?: OpenProp;
|
|
1238
|
+
/** Uncontrolled initial open state (antd `defaultOpen`). */
|
|
1239
|
+
defaultOpen?: DefaultOpenProp;
|
|
1240
|
+
/** Panel open change (antd `onOpenChange`). Fires for both controlled and uncontrolled panels. */
|
|
1241
|
+
onOpenChange?: OnOpenChangeProp;
|
|
1242
|
+
/**
|
|
1243
|
+
* Lazy children (antd `loadData`). Called ONCE per node the first time a branch with no
|
|
1244
|
+
* `children` and `isLeaf !== true` is expanded; push the fetched children into `treeData`.
|
|
1245
|
+
*/
|
|
1246
|
+
loadData?: (node: TreeOptionProp) => void | Promise<void>;
|
|
1247
|
+
/** Render a node's title (antd `treeTitleRender`). */
|
|
1248
|
+
treeTitleRender?: (node: TreeOptionProp) => React.ReactNode;
|
|
1249
|
+
/** Visible values in the trigger label before the rest collapse (antd `maxTagCount`). */
|
|
1250
|
+
maxTagCount?: MaxTagCountProp;
|
|
1251
|
+
/** The node standing in for what `maxTagCount` hid (antd `maxTagPlaceholder`). */
|
|
1252
|
+
maxTagPlaceholder?: MaxTagPlaceholderProp;
|
|
1253
|
+
/** Node shown when the tree has nothing to list (antd `notFoundContent`). */
|
|
1254
|
+
notFoundContent?: NotFoundContentProp;
|
|
1255
|
+
/** Clear the search box after a pick (antd `autoClearSearchValue`, default `true`). */
|
|
1256
|
+
autoClearSearchValue?: boolean;
|
|
1257
|
+
/** Controlled search query (antd `showSearch.searchValue`). */
|
|
1258
|
+
search?: string;
|
|
1259
|
+
/** Search query change (antd `showSearch.onSearch`). */
|
|
1260
|
+
onSearchChange?: OnSearchChangeProp;
|
|
624
1261
|
"aria-label"?: string;
|
|
625
1262
|
"aria-labelledby"?: string;
|
|
626
1263
|
"aria-describedby"?: string;
|
|
@@ -637,11 +1274,46 @@ export type TransferItemProp = {
|
|
|
637
1274
|
};
|
|
638
1275
|
/** @see Transfer — dual-list shuttle (Checkbox + SearchInput). */
|
|
639
1276
|
export type TransferProp = FieldA11yProps & {
|
|
1277
|
+
/** Canonical controlled value; wins over targetKeys when both are provided. */
|
|
1278
|
+
value?: string[];
|
|
1279
|
+
defaultValue?: string[];
|
|
1280
|
+
name?: string;
|
|
1281
|
+
readOnly?: boolean;
|
|
1282
|
+
/** Independent per-pane pagination. Select-all applies to visible enabled rows. */
|
|
1283
|
+
pagination?: boolean | {
|
|
1284
|
+
pageSize?: number;
|
|
1285
|
+
};
|
|
640
1286
|
dataSource: TransferItemProp[];
|
|
641
|
-
|
|
1287
|
+
/**
|
|
1288
|
+
* The keys currently in the TARGET pane (antd's own name, and the controlled half of the triad).
|
|
1289
|
+
* Optional since the control can run uncontrolled from `defaultTargetKeys`.
|
|
1290
|
+
*/
|
|
1291
|
+
targetKeys?: string[];
|
|
1292
|
+
/**
|
|
1293
|
+
* Uncontrolled initial target keys (controlled-triad rule). Without one the shuttle starts empty
|
|
1294
|
+
* and still shuttles — a Transfer with no `targetKeys` handler used to be frozen.
|
|
1295
|
+
*/
|
|
1296
|
+
defaultTargetKeys?: string[];
|
|
642
1297
|
onValueChange?: (targetKeys: string[], direction: "left" | "right", moveKeys: string[]) => void;
|
|
643
1298
|
titles?: [React.ReactNode, React.ReactNode];
|
|
644
1299
|
showSearch?: boolean;
|
|
1300
|
+
/**
|
|
1301
|
+
* Render one row's body yourself (antd `render`). Receives the item; return the node shown beside
|
|
1302
|
+
* its checkbox. The checkbox, its label association and the row's keyboard behaviour stay ours —
|
|
1303
|
+
* a custom row cannot end up unlabelled.
|
|
1304
|
+
*/
|
|
1305
|
+
render?: (item: TransferItemProp) => React.ReactNode;
|
|
1306
|
+
/**
|
|
1307
|
+
* Override the search predicate (antd `filterOption`). Receives the trimmed query and the item;
|
|
1308
|
+
* return true to keep the row. Default matches title + description, case-insensitively.
|
|
1309
|
+
*/
|
|
1310
|
+
filterOption?: (query: string, item: TransferItemProp) => boolean;
|
|
1311
|
+
/**
|
|
1312
|
+
* Show the per-pane select-all checkbox (antd `showSelectAll`, default `true`). `false` withdraws
|
|
1313
|
+
* it — a pane whose items are individually meaningful (permissions, billable seats) often should
|
|
1314
|
+
* not offer "all" as one click.
|
|
1315
|
+
*/
|
|
1316
|
+
showSelectAll?: boolean;
|
|
645
1317
|
oneWay?: boolean;
|
|
646
1318
|
disabled?: DisabledProp;
|
|
647
1319
|
/** Injected by FormField (or set directly) — applied to the `role="group"` shuttle container. */
|