@ceed/cds 1.39.1 → 1.40.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 +37 -33
- 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 +81 -53
- package/dist/index.js +116 -88
- package/framer/index.js +1 -1
- package/package.json +1 -1
|
@@ -265,24 +265,26 @@ function CompletionTracker({ value, onChange }) {
|
|
|
265
265
|
|
|
266
266
|
### Key Props
|
|
267
267
|
|
|
268
|
-
| Prop | Type
|
|
269
|
-
| ----------------- |
|
|
270
|
-
| `value` | `number` | - | Percentage value (controlled mode) |
|
|
271
|
-
| `defaultValue` | `number`
|
|
272
|
-
| `onChange` | `(event: { target: { name?, value?: number } }) => void` | - | Callback when the value changes |
|
|
273
|
-
| `useMinorUnit` | `boolean`
|
|
274
|
-
| `maxDecimalScale` | `number`
|
|
275
|
-
| `min` | `number`
|
|
276
|
-
| `max` | `number`
|
|
277
|
-
| `label` | `ReactNode`
|
|
278
|
-
| `helperText` | `ReactNode`
|
|
279
|
-
| `error` | `boolean`
|
|
280
|
-
| `required` | `boolean`
|
|
281
|
-
| `disabled` | `boolean`
|
|
282
|
-
| `name` | `string`
|
|
283
|
-
| `placeholder` | `string`
|
|
284
|
-
| `size` | `'sm' \| 'md' \| 'lg'`
|
|
285
|
-
| `sx` | `SxProps`
|
|
268
|
+
| Prop | Type | Default | Description |
|
|
269
|
+
| ----------------- | ---------------------------------------------------------------- | ------- | ------------------------------------------------------ |
|
|
270
|
+
| `value` | `number \| null` | - | Percentage value (controlled mode) |
|
|
271
|
+
| `defaultValue` | `number` | - | Initial percentage value (uncontrolled mode) |
|
|
272
|
+
| `onChange` | `(event: { target: { name?, value?: number \| null } }) => void` | - | Callback when the value changes |
|
|
273
|
+
| `useMinorUnit` | `boolean` | `false` | When true, value is in basis points (e.g., 1000 = 10%) |
|
|
274
|
+
| `maxDecimalScale` | `number` | `0` | Maximum number of decimal places |
|
|
275
|
+
| `min` | `number` | - | Minimum allowed percentage value |
|
|
276
|
+
| `max` | `number` | - | Maximum allowed percentage value |
|
|
277
|
+
| `label` | `ReactNode` | - | Form label displayed above the input |
|
|
278
|
+
| `helperText` | `ReactNode` | - | Helper text displayed below the input |
|
|
279
|
+
| `error` | `boolean` | `false` | Applies danger color to indicate validation error |
|
|
280
|
+
| `required` | `boolean` | `false` | Marks the field as required |
|
|
281
|
+
| `disabled` | `boolean` | `false` | Disables the input |
|
|
282
|
+
| `name` | `string` | - | HTML name attribute for form submission |
|
|
283
|
+
| `placeholder` | `string` | - | Placeholder text when the input is empty |
|
|
284
|
+
| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Input size |
|
|
285
|
+
| `sx` | `SxProps` | - | Custom styles using the MUI system |
|
|
286
|
+
|
|
287
|
+
> **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.
|
|
286
288
|
|
|
287
289
|
> **Note**: PercentageInput also accepts all Input props and Framer Motion props.
|
|
288
290
|
|
|
@@ -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];
|