@ceed/ads 1.40.1 → 1.41.1
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/dist/components/Autocomplete/Autocomplete.d.ts +11 -3
- package/dist/components/CurrencyInput/CurrencyInput.d.ts +10 -2
- package/dist/components/DatePicker/DatePicker.d.ts +4 -1
- package/dist/components/DateRangePicker/DateRangePicker.d.ts +4 -1
- package/dist/components/FilterableCheckboxGroup/FilterableCheckboxGroup.d.ts +5 -1
- package/dist/components/Input/Input.d.ts +6 -1
- package/dist/components/MonthPicker/MonthPicker.d.ts +5 -1
- package/dist/components/MonthRangePicker/MonthRangePicker.d.ts +5 -1
- package/dist/components/PercentageInput/PercentageInput.d.ts +10 -2
- package/dist/components/data-display/DataTable.md +89 -0
- package/dist/components/inputs/Autocomplete.md +38 -34
- package/dist/components/inputs/CurrencyInput.md +46 -17
- package/dist/components/inputs/DatePicker.md +4 -2
- package/dist/components/inputs/DateRangePicker.md +4 -2
- package/dist/components/inputs/FilterableCheckboxGroup.md +3 -1
- package/dist/components/inputs/Input.md +32 -3
- package/dist/components/inputs/MonthPicker.md +4 -2
- package/dist/components/inputs/MonthRangePicker.md +4 -2
- package/dist/components/inputs/PercentageInput.md +20 -18
- package/dist/hooks/use-controlled-state/index.d.ts +13 -0
- package/dist/index.browser.js +4 -4
- package/dist/index.browser.js.map +3 -3
- package/dist/index.cjs +88 -60
- package/dist/index.js +125 -97
- package/framer/index.js +1 -1
- package/package.json +1 -1
|
@@ -391,8 +391,8 @@ const handleSubmit = () => {
|
|
|
391
391
|
|
|
392
392
|
| Prop | Type | Default | Description |
|
|
393
393
|
| --------------- | ------------------------------------------------------- | ---------------- | -------------------------------------------------------------------------------------------------------------------- |
|
|
394
|
-
| `value` | `string`
|
|
395
|
-
| `defaultValue` | `string` |
|
|
394
|
+
| `value` | `string \| null` | - | Selected month range string in `format` (controlled mode) |
|
|
395
|
+
| `defaultValue` | `string` | - | Initial month range string (uncontrolled mode) |
|
|
396
396
|
| `onChange` | `(event: { target: { name?, value: string } }) => void` | - | Callback when the month range changes |
|
|
397
397
|
| `format` | `string` | `'YYYY/MM'` | Format of the `value` and `onChange` value |
|
|
398
398
|
| `displayFormat` | `string` | same as `format` | Format displayed in the input field. Supports `MMM` (short month name) and `MMMM` (full month name) tokens |
|
|
@@ -408,6 +408,8 @@ const handleSubmit = () => {
|
|
|
408
408
|
| `disableFuture` | `boolean` | `false` | Disables all future months |
|
|
409
409
|
| `disablePast` | `boolean` | `false` | Disables all past months |
|
|
410
410
|
|
|
411
|
+
> **Note**: For a **controlled** field that starts empty, pass `null` as `value`. Passing `undefined` makes the field uncontrolled from the first render, so later external updates (including resetting it to an empty value) are not reflected on screen.
|
|
412
|
+
|
|
411
413
|
### Alphabetic Month Tokens (MMM / MMMM)
|
|
412
414
|
|
|
413
415
|
The `displayFormat` prop supports alphabetic month tokens for more human-readable month display:
|
|
@@ -263,24 +263,26 @@ function CompletionTracker({ value, onChange }) {
|
|
|
263
263
|
|
|
264
264
|
### Key Props
|
|
265
265
|
|
|
266
|
-
| Prop | Type
|
|
267
|
-
| ----------------- |
|
|
268
|
-
| `value` | `number` | - | Percentage value (controlled mode) |
|
|
269
|
-
| `defaultValue` | `number`
|
|
270
|
-
| `onChange` | `(event: { target: { name?, value?: number } }) => void` | - | Callback when the value changes |
|
|
271
|
-
| `useMinorUnit` | `boolean`
|
|
272
|
-
| `maxDecimalScale` | `number`
|
|
273
|
-
| `min` | `number`
|
|
274
|
-
| `max` | `number`
|
|
275
|
-
| `label` | `ReactNode`
|
|
276
|
-
| `helperText` | `ReactNode`
|
|
277
|
-
| `error` | `boolean`
|
|
278
|
-
| `required` | `boolean`
|
|
279
|
-
| `disabled` | `boolean`
|
|
280
|
-
| `name` | `string`
|
|
281
|
-
| `placeholder` | `string`
|
|
282
|
-
| `size` | `'sm' \| 'md' \| 'lg'`
|
|
283
|
-
| `sx` | `SxProps`
|
|
266
|
+
| Prop | Type | Default | Description |
|
|
267
|
+
| ----------------- | ---------------------------------------------------------------- | ------- | ------------------------------------------------------ |
|
|
268
|
+
| `value` | `number \| null` | - | Percentage value (controlled mode) |
|
|
269
|
+
| `defaultValue` | `number` | - | Initial percentage value (uncontrolled mode) |
|
|
270
|
+
| `onChange` | `(event: { target: { name?, value?: number \| null } }) => void` | - | Callback when the value changes |
|
|
271
|
+
| `useMinorUnit` | `boolean` | `false` | When true, value is in basis points (e.g., 1000 = 10%) |
|
|
272
|
+
| `maxDecimalScale` | `number` | `0` | Maximum number of decimal places |
|
|
273
|
+
| `min` | `number` | - | Minimum allowed percentage value |
|
|
274
|
+
| `max` | `number` | - | Maximum allowed percentage value |
|
|
275
|
+
| `label` | `ReactNode` | - | Form label displayed above the input |
|
|
276
|
+
| `helperText` | `ReactNode` | - | Helper text displayed below the input |
|
|
277
|
+
| `error` | `boolean` | `false` | Applies danger color to indicate validation error |
|
|
278
|
+
| `required` | `boolean` | `false` | Marks the field as required |
|
|
279
|
+
| `disabled` | `boolean` | `false` | Disables the input |
|
|
280
|
+
| `name` | `string` | - | HTML name attribute for form submission |
|
|
281
|
+
| `placeholder` | `string` | - | Placeholder text when the input is empty |
|
|
282
|
+
| `size` | `'sm' \| 'md' \| 'lg'` | `'sm'` | Input size |
|
|
283
|
+
| `sx` | `SxProps` | - | Custom styles using the MUI system |
|
|
284
|
+
|
|
285
|
+
> **Note**: For a **controlled** field that starts empty, pass `null` as `value`. Passing `undefined` makes the field uncontrolled from the first render, so later external updates (including resetting it to an empty value) are not reflected on screen.
|
|
284
286
|
|
|
285
287
|
> **Note**: PercentageInput also accepts all Input props and Framer Motion props.
|
|
286
288
|
|
|
@@ -1 +1,14 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* controlled / uncontrolled를 함께 지원하는 상태 훅.
|
|
3
|
+
*
|
|
4
|
+
* NOTE: controlled 여부는 MUI의 `useControlled`와 동일하게 **마운트 시점에 한 번만** 판정한다.
|
|
5
|
+
* 따라서 "아직 값이 비어 있는 controlled 필드"는 `undefined`가 아니라 `null`을 넘겨야 한다.
|
|
6
|
+
* `undefined`로 시작하면 그 필드는 영구히 uncontrolled로 동작해서, 이후 부모가 값을 바꾸거나
|
|
7
|
+
* 비워도 화면이 따라오지 않는다.
|
|
8
|
+
*
|
|
9
|
+
* @example
|
|
10
|
+
* // 빈 값으로 시작하는 controlled 필드
|
|
11
|
+
* const [amount, setAmount] = useState<number | undefined>(undefined);
|
|
12
|
+
* <CurrencyInput value={amount ?? null} onChange={(e) => setAmount(e.target.value)} />
|
|
13
|
+
*/
|
|
1
14
|
export declare function useControlledState<T>(controlledValue: T | undefined, defaultValue: T, onChange?: (value: T) => void): [T, (value: T | ((prev: T) => T)) => void, boolean];
|