@osdk/react-components 0.2.0-beta.27 → 0.2.0-beta.29
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/CHANGELOG.md +15 -0
- package/README.md +58 -3
- package/build/browser/action-form/FormFieldApi.js.map +1 -1
- package/build/browser/action-form/fields/FormFieldRenderer.js +8 -0
- package/build/browser/action-form/fields/FormFieldRenderer.js.map +1 -1
- package/build/browser/action-form/fields/NumberInputField.js +130 -0
- package/build/browser/action-form/fields/NumberInputField.js.map +1 -0
- package/build/browser/action-form/fields/NumberInputField.module.css +96 -0
- package/build/browser/action-form/fields/NumberInputField.module.css.js +9 -0
- package/build/browser/base-components/checkbox/Checkbox.js +6 -2
- package/build/browser/base-components/checkbox/Checkbox.js.map +1 -1
- package/build/browser/base-components/checkbox/Checkbox.module.css +15 -2
- package/build/browser/base-components/combobox/Combobox.js +14 -1
- package/build/browser/base-components/combobox/Combobox.js.map +1 -1
- package/build/browser/base-components/combobox/Combobox.module.css +16 -6
- package/build/browser/base-components/combobox/Combobox.module.css.js +1 -0
- package/build/browser/base-components/searchable-menu/SearchableMenu.js +86 -0
- package/build/browser/base-components/searchable-menu/SearchableMenu.js.map +1 -0
- package/build/browser/base-components/searchable-menu/SearchableMenu.module.css +80 -0
- package/build/browser/base-components/searchable-menu/SearchableMenu.module.css.js +10 -0
- package/build/browser/filter-list/FilterList.js +3 -1
- package/build/browser/filter-list/FilterList.js.map +1 -1
- package/build/browser/filter-list/FilterListApi.js.map +1 -1
- package/build/browser/filter-list/FilterListItemApi.js.map +1 -1
- package/build/browser/filter-list/base/AddFilterPopover.js +10 -21
- package/build/browser/filter-list/base/AddFilterPopover.js.map +1 -1
- package/build/browser/filter-list/base/AddFilterPopover.module.css +6 -40
- package/build/browser/filter-list/base/AddFilterPopover.module.css.js +1 -4
- package/build/browser/filter-list/base/BaseFilterList.js +4 -2
- package/build/browser/filter-list/base/BaseFilterList.js.map +1 -1
- package/build/browser/filter-list/base/ExcludeDropdown.js +4 -3
- package/build/browser/filter-list/base/ExcludeDropdown.js.map +1 -1
- package/build/browser/filter-list/base/ExcludeDropdown.module.css +7 -5
- package/build/browser/filter-list/base/FilterIcons.js +9 -3
- package/build/browser/filter-list/base/FilterIcons.js.map +1 -1
- package/build/browser/filter-list/base/FilterInputExcludeRow.js +14 -2
- package/build/browser/filter-list/base/FilterInputExcludeRow.js.map +1 -1
- package/build/browser/filter-list/base/FilterList.module.css +19 -6
- package/build/browser/filter-list/base/FilterList.module.css.js +1 -0
- package/build/browser/filter-list/base/FilterListContent.js +38 -17
- package/build/browser/filter-list/base/FilterListContent.js.map +1 -1
- package/build/browser/filter-list/base/FilterListHeader.js +1 -1
- package/build/browser/filter-list/base/FilterListHeader.js.map +1 -1
- package/build/browser/filter-list/base/FilterListHeader.module.css +8 -3
- package/build/browser/filter-list/base/FilterListItem.js +33 -1
- package/build/browser/filter-list/base/FilterListItem.js.map +1 -1
- package/build/browser/filter-list/base/FilterListItem.module.css +15 -6
- package/build/browser/filter-list/base/FilterListItem.module.css.js +1 -0
- package/build/browser/filter-list/base/SortableFilterListItem.js +3 -2
- package/build/browser/filter-list/base/SortableFilterListItem.js.map +1 -1
- package/build/browser/filter-list/base/inputs/ListogramInput.js +26 -11
- package/build/browser/filter-list/base/inputs/ListogramInput.js.map +1 -1
- package/build/browser/filter-list/base/inputs/ListogramInput.module.css +31 -0
- package/build/browser/filter-list/base/inputs/ListogramInput.module.css.js +2 -0
- package/build/browser/filter-list/base/inputs/MultiSelectInput.js +26 -43
- package/build/browser/filter-list/base/inputs/MultiSelectInput.js.map +1 -1
- package/build/browser/filter-list/base/inputs/MultiSelectInput.module.css +7 -8
- package/build/browser/filter-list/base/inputs/MultiSelectInput.module.css.js +1 -2
- package/build/browser/filter-list/base/inputs/NullValueWrapper.js +1 -1
- package/build/browser/filter-list/base/inputs/NullValueWrapper.js.map +1 -1
- package/build/browser/filter-list/base/inputs/RangeInput.js +5 -3
- package/build/browser/filter-list/base/inputs/RangeInput.js.map +1 -1
- package/build/browser/filter-list/base/inputs/RangeInput.module.css +7 -7
- package/build/browser/filter-list/base/inputs/SingleSelectInput.js +21 -30
- package/build/browser/filter-list/base/inputs/SingleSelectInput.js.map +1 -1
- package/build/browser/filter-list/base/inputs/SingleSelectInput.module.css +13 -23
- package/build/browser/filter-list/base/inputs/SingleSelectInput.module.css.js +3 -1
- package/build/browser/filter-list/base/inputs/index.js +0 -1
- package/build/browser/filter-list/base/inputs/index.js.map +1 -1
- package/build/browser/filter-list/hooks/useFilterListState.js +16 -12
- package/build/browser/filter-list/hooks/useFilterListState.js.map +1 -1
- package/build/browser/filter-list/hooks/usePropertyAggregation.js +7 -2
- package/build/browser/filter-list/hooks/usePropertyAggregation.js.map +1 -1
- package/build/browser/filter-list/inputs/ContainsTextFilterInput.js +1 -1
- package/build/browser/filter-list/inputs/ContainsTextFilterInput.js.map +1 -1
- package/build/browser/filter-list/inputs/LinkedPropertyInput.js +0 -35
- package/build/browser/filter-list/inputs/LinkedPropertyInput.js.map +1 -1
- package/build/browser/filter-list/inputs/ListogramFilterInput.js +14 -3
- package/build/browser/filter-list/inputs/ListogramFilterInput.js.map +1 -1
- package/build/browser/filter-list/inputs/MultiSelectFilterInput.js +9 -1
- package/build/browser/filter-list/inputs/MultiSelectFilterInput.js.map +1 -1
- package/build/browser/filter-list/inputs/PropertyFilterInput.js +1 -14
- package/build/browser/filter-list/inputs/PropertyFilterInput.js.map +1 -1
- package/build/browser/filter-list/inputs/SingleSelectFilterInput.js +9 -1
- package/build/browser/filter-list/inputs/SingleSelectFilterInput.js.map +1 -1
- package/build/browser/filter-list/inputs/TextTagsFilterInput.js +9 -1
- package/build/browser/filter-list/inputs/TextTagsFilterInput.js.map +1 -1
- package/build/browser/filter-list/utils/filterStateToWhereClause.js +2 -7
- package/build/browser/filter-list/utils/filterStateToWhereClause.js.map +1 -1
- package/build/browser/object-table/ColumnConfigDialog.module.css +1 -2
- package/build/browser/object-table/MultiColumnSortDialog.js +22 -59
- package/build/browser/object-table/MultiColumnSortDialog.js.map +1 -1
- package/build/browser/object-table/MultiColumnSortDialog.module.css +0 -64
- package/build/browser/object-table/MultiColumnSortDialog.module.css.js +0 -5
- package/build/browser/styles.css +324 -272
- package/build/cjs/public/experimental.cjs +1673 -1605
- package/build/cjs/public/experimental.cjs.map +1 -1
- package/build/cjs/public/experimental.css +501 -462
- package/build/cjs/public/experimental.css.map +1 -1
- package/build/cjs/public/experimental.d.cts +31 -26
- package/build/esm/action-form/FormFieldApi.js.map +1 -1
- package/build/esm/action-form/fields/FormFieldRenderer.js +8 -0
- package/build/esm/action-form/fields/FormFieldRenderer.js.map +1 -1
- package/build/esm/action-form/fields/NumberInputField.js +130 -0
- package/build/esm/action-form/fields/NumberInputField.js.map +1 -0
- package/build/esm/action-form/fields/NumberInputField.module.css +96 -0
- package/build/esm/base-components/checkbox/Checkbox.js +6 -2
- package/build/esm/base-components/checkbox/Checkbox.js.map +1 -1
- package/build/esm/base-components/checkbox/Checkbox.module.css +15 -2
- package/build/esm/base-components/combobox/Combobox.js +14 -1
- package/build/esm/base-components/combobox/Combobox.js.map +1 -1
- package/build/esm/base-components/combobox/Combobox.module.css +16 -6
- package/build/esm/base-components/searchable-menu/SearchableMenu.js +86 -0
- package/build/esm/base-components/searchable-menu/SearchableMenu.js.map +1 -0
- package/build/esm/base-components/searchable-menu/SearchableMenu.module.css +80 -0
- package/build/esm/filter-list/FilterList.js +3 -1
- package/build/esm/filter-list/FilterList.js.map +1 -1
- package/build/esm/filter-list/FilterListApi.js.map +1 -1
- package/build/esm/filter-list/FilterListItemApi.js.map +1 -1
- package/build/esm/filter-list/base/AddFilterPopover.js +10 -21
- package/build/esm/filter-list/base/AddFilterPopover.js.map +1 -1
- package/build/esm/filter-list/base/AddFilterPopover.module.css +6 -40
- package/build/esm/filter-list/base/BaseFilterList.js +4 -2
- package/build/esm/filter-list/base/BaseFilterList.js.map +1 -1
- package/build/esm/filter-list/base/ExcludeDropdown.js +4 -3
- package/build/esm/filter-list/base/ExcludeDropdown.js.map +1 -1
- package/build/esm/filter-list/base/ExcludeDropdown.module.css +7 -5
- package/build/esm/filter-list/base/FilterIcons.js +9 -3
- package/build/esm/filter-list/base/FilterIcons.js.map +1 -1
- package/build/esm/filter-list/base/FilterInputExcludeRow.js +14 -2
- package/build/esm/filter-list/base/FilterInputExcludeRow.js.map +1 -1
- package/build/esm/filter-list/base/FilterList.module.css +19 -6
- package/build/esm/filter-list/base/FilterListContent.js +38 -17
- package/build/esm/filter-list/base/FilterListContent.js.map +1 -1
- package/build/esm/filter-list/base/FilterListHeader.js +1 -1
- package/build/esm/filter-list/base/FilterListHeader.js.map +1 -1
- package/build/esm/filter-list/base/FilterListHeader.module.css +8 -3
- package/build/esm/filter-list/base/FilterListItem.js +33 -1
- package/build/esm/filter-list/base/FilterListItem.js.map +1 -1
- package/build/esm/filter-list/base/FilterListItem.module.css +15 -6
- package/build/esm/filter-list/base/SortableFilterListItem.js +3 -2
- package/build/esm/filter-list/base/SortableFilterListItem.js.map +1 -1
- package/build/esm/filter-list/base/inputs/ListogramInput.js +26 -11
- package/build/esm/filter-list/base/inputs/ListogramInput.js.map +1 -1
- package/build/esm/filter-list/base/inputs/ListogramInput.module.css +31 -0
- package/build/esm/filter-list/base/inputs/MultiSelectInput.js +26 -43
- package/build/esm/filter-list/base/inputs/MultiSelectInput.js.map +1 -1
- package/build/esm/filter-list/base/inputs/MultiSelectInput.module.css +7 -8
- package/build/esm/filter-list/base/inputs/NullValueWrapper.js +1 -1
- package/build/esm/filter-list/base/inputs/NullValueWrapper.js.map +1 -1
- package/build/esm/filter-list/base/inputs/RangeInput.js +5 -3
- package/build/esm/filter-list/base/inputs/RangeInput.js.map +1 -1
- package/build/esm/filter-list/base/inputs/RangeInput.module.css +7 -7
- package/build/esm/filter-list/base/inputs/SingleSelectInput.js +21 -30
- package/build/esm/filter-list/base/inputs/SingleSelectInput.js.map +1 -1
- package/build/esm/filter-list/base/inputs/SingleSelectInput.module.css +13 -23
- package/build/esm/filter-list/base/inputs/index.js +0 -1
- package/build/esm/filter-list/base/inputs/index.js.map +1 -1
- package/build/esm/filter-list/hooks/useFilterListState.js +16 -12
- package/build/esm/filter-list/hooks/useFilterListState.js.map +1 -1
- package/build/esm/filter-list/hooks/usePropertyAggregation.js +7 -2
- package/build/esm/filter-list/hooks/usePropertyAggregation.js.map +1 -1
- package/build/esm/filter-list/inputs/ContainsTextFilterInput.js +1 -1
- package/build/esm/filter-list/inputs/ContainsTextFilterInput.js.map +1 -1
- package/build/esm/filter-list/inputs/LinkedPropertyInput.js +0 -35
- package/build/esm/filter-list/inputs/LinkedPropertyInput.js.map +1 -1
- package/build/esm/filter-list/inputs/ListogramFilterInput.js +14 -3
- package/build/esm/filter-list/inputs/ListogramFilterInput.js.map +1 -1
- package/build/esm/filter-list/inputs/MultiSelectFilterInput.js +9 -1
- package/build/esm/filter-list/inputs/MultiSelectFilterInput.js.map +1 -1
- package/build/esm/filter-list/inputs/PropertyFilterInput.js +1 -14
- package/build/esm/filter-list/inputs/PropertyFilterInput.js.map +1 -1
- package/build/esm/filter-list/inputs/SingleSelectFilterInput.js +9 -1
- package/build/esm/filter-list/inputs/SingleSelectFilterInput.js.map +1 -1
- package/build/esm/filter-list/inputs/TextTagsFilterInput.js +9 -1
- package/build/esm/filter-list/inputs/TextTagsFilterInput.js.map +1 -1
- package/build/esm/filter-list/utils/filterStateToWhereClause.js +2 -7
- package/build/esm/filter-list/utils/filterStateToWhereClause.js.map +1 -1
- package/build/esm/object-table/ColumnConfigDialog.module.css +1 -2
- package/build/esm/object-table/MultiColumnSortDialog.js +22 -59
- package/build/esm/object-table/MultiColumnSortDialog.js.map +1 -1
- package/build/esm/object-table/MultiColumnSortDialog.module.css +0 -64
- package/build/types/action-form/FormFieldApi.d.ts +22 -4
- package/build/types/action-form/FormFieldApi.d.ts.map +1 -1
- package/build/types/action-form/fields/FormFieldRenderer.d.ts.map +1 -1
- package/build/types/action-form/fields/NumberInputField.d.ts +3 -0
- package/build/types/action-form/fields/NumberInputField.d.ts.map +1 -0
- package/build/types/base-components/checkbox/Checkbox.d.ts +2 -1
- package/build/types/base-components/checkbox/Checkbox.d.ts.map +1 -1
- package/build/types/base-components/combobox/Combobox.d.ts +6 -1
- package/build/types/base-components/combobox/Combobox.d.ts.map +1 -1
- package/build/types/base-components/searchable-menu/SearchableMenu.d.ts +18 -0
- package/build/types/base-components/searchable-menu/SearchableMenu.d.ts.map +1 -0
- package/build/types/filter-list/FilterListApi.d.ts +0 -7
- package/build/types/filter-list/FilterListApi.d.ts.map +1 -1
- package/build/types/filter-list/FilterListItemApi.d.ts +10 -7
- package/build/types/filter-list/FilterListItemApi.d.ts.map +1 -1
- package/build/types/filter-list/base/AddFilterPopover.d.ts.map +1 -1
- package/build/types/filter-list/base/ExcludeDropdown.d.ts.map +1 -1
- package/build/types/filter-list/base/FilterIcons.d.ts +1 -0
- package/build/types/filter-list/base/FilterIcons.d.ts.map +1 -1
- package/build/types/filter-list/base/FilterInputExcludeRow.d.ts +2 -1
- package/build/types/filter-list/base/FilterInputExcludeRow.d.ts.map +1 -1
- package/build/types/filter-list/base/FilterListContent.d.ts.map +1 -1
- package/build/types/filter-list/base/FilterListItem.d.ts.map +1 -1
- package/build/types/filter-list/base/SortableFilterListItem.d.ts +2 -1
- package/build/types/filter-list/base/SortableFilterListItem.d.ts.map +1 -1
- package/build/types/filter-list/base/inputs/ListogramInput.d.ts +2 -1
- package/build/types/filter-list/base/inputs/ListogramInput.d.ts.map +1 -1
- package/build/types/filter-list/base/inputs/MultiSelectInput.d.ts +1 -3
- package/build/types/filter-list/base/inputs/MultiSelectInput.d.ts.map +1 -1
- package/build/types/filter-list/base/inputs/RangeInput.d.ts.map +1 -1
- package/build/types/filter-list/base/inputs/SingleSelectInput.d.ts.map +1 -1
- package/build/types/filter-list/base/inputs/index.d.ts +0 -1
- package/build/types/filter-list/base/inputs/index.d.ts.map +1 -1
- package/build/types/filter-list/hooks/useFilterListState.d.ts +1 -0
- package/build/types/filter-list/hooks/useFilterListState.d.ts.map +1 -1
- package/build/types/filter-list/hooks/usePropertyAggregation.d.ts +1 -0
- package/build/types/filter-list/hooks/usePropertyAggregation.d.ts.map +1 -1
- package/build/types/filter-list/inputs/LinkedPropertyInput.d.ts.map +1 -1
- package/build/types/filter-list/inputs/ListogramFilterInput.d.ts.map +1 -1
- package/build/types/filter-list/inputs/MultiSelectFilterInput.d.ts.map +1 -1
- package/build/types/filter-list/inputs/PropertyFilterInput.d.ts.map +1 -1
- package/build/types/filter-list/inputs/SingleSelectFilterInput.d.ts.map +1 -1
- package/build/types/filter-list/inputs/TextTagsFilterInput.d.ts.map +1 -1
- package/build/types/filter-list/utils/filterStateToWhereClause.d.ts +1 -1
- package/build/types/filter-list/utils/filterStateToWhereClause.d.ts.map +1 -1
- package/build/types/object-table/MultiColumnSortDialog.d.ts.map +1 -1
- package/package.json +5 -5
- package/build/browser/filter-list/base/inputs/CheckboxListInput.js +0 -83
- package/build/browser/filter-list/base/inputs/CheckboxListInput.js.map +0 -1
- package/build/browser/filter-list/base/inputs/CheckboxListInput.module.css +0 -65
- package/build/browser/filter-list/base/inputs/CheckboxListInput.module.css.js +0 -10
- package/build/browser/filter-list/base/inputs/CheckboxListSkeleton.js +0 -46
- package/build/browser/filter-list/base/inputs/CheckboxListSkeleton.js.map +0 -1
- package/build/browser/filter-list/base/inputs/CheckboxListSkeleton.module.css +0 -32
- package/build/browser/filter-list/base/inputs/CheckboxListSkeleton.module.css.js +0 -8
- package/build/browser/filter-list/inputs/CheckboxListFilterInput.js +0 -66
- package/build/browser/filter-list/inputs/CheckboxListFilterInput.js.map +0 -1
- package/build/esm/filter-list/base/inputs/CheckboxListInput.js +0 -83
- package/build/esm/filter-list/base/inputs/CheckboxListInput.js.map +0 -1
- package/build/esm/filter-list/base/inputs/CheckboxListInput.module.css +0 -65
- package/build/esm/filter-list/base/inputs/CheckboxListSkeleton.js +0 -46
- package/build/esm/filter-list/base/inputs/CheckboxListSkeleton.js.map +0 -1
- package/build/esm/filter-list/base/inputs/CheckboxListSkeleton.module.css +0 -32
- package/build/esm/filter-list/inputs/CheckboxListFilterInput.js +0 -66
- package/build/esm/filter-list/inputs/CheckboxListFilterInput.js.map +0 -1
- package/build/types/filter-list/base/inputs/CheckboxListInput.d.ts +0 -16
- package/build/types/filter-list/base/inputs/CheckboxListInput.d.ts.map +0 -1
- package/build/types/filter-list/base/inputs/CheckboxListSkeleton.d.ts +0 -2
- package/build/types/filter-list/base/inputs/CheckboxListSkeleton.d.ts.map +0 -1
- package/build/types/filter-list/inputs/CheckboxListFilterInput.d.ts +0 -17
- package/build/types/filter-list/inputs/CheckboxListFilterInput.d.ts.map +0 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,20 @@
|
|
|
1
1
|
# @osdk/react-components
|
|
2
2
|
|
|
3
|
+
## 0.2.0-beta.29
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- 4ad9b36: Add NumberInputField component
|
|
8
|
+
- d6c2c8b: Fix FilterList styling
|
|
9
|
+
- d6c2c8b: Fix FilterList dropdown
|
|
10
|
+
|
|
11
|
+
## 0.2.0-beta.28
|
|
12
|
+
|
|
13
|
+
### Minor Changes
|
|
14
|
+
|
|
15
|
+
- 3eaf3f5: Add CSS layers documentation and Tailwind CSS v4 setup instructions to READMEs
|
|
16
|
+
- 3f4fb81: Address design review and PR review feedback for filter list: exclude strikethrough only on selected items, remove hover-to-show exclude row, fix 3-dots toggle close behavior, remove OR filter operator mode, and various UI polish
|
|
17
|
+
|
|
3
18
|
## 0.2.0-beta.27
|
|
4
19
|
|
|
5
20
|
### Minor Changes
|
package/README.md
CHANGED
|
@@ -53,7 +53,49 @@ function App() {
|
|
|
53
53
|
|
|
54
54
|
### CSS Setup
|
|
55
55
|
|
|
56
|
-
Add
|
|
56
|
+
Add the OSDK style imports to your application's entry CSS file (e.g., `index.css`).
|
|
57
|
+
|
|
58
|
+
#### Understanding CSS Layers
|
|
59
|
+
|
|
60
|
+
OSDK uses CSS [`@layer`](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer) to make theming predictable. If you're not familiar with `@layer`, here's what you need to know:
|
|
61
|
+
|
|
62
|
+
**What is `@layer`?** CSS `@layer` lets you group styles into named layers and control the order in which they apply. When two styles target the same element, the style in the _later_ layer always wins — regardless of selector specificity. This is what makes the theming system maintainable.
|
|
63
|
+
|
|
64
|
+
**OSDK's layers:**
|
|
65
|
+
|
|
66
|
+
| Layer | Purpose |
|
|
67
|
+
| ----------------- | ---------------------------------------------------------- |
|
|
68
|
+
| `osdk.tokens` | Design tokens (colors, spacing, typography) — the defaults |
|
|
69
|
+
| `osdk.components` | Component structural styles (layout, borders, sizing) |
|
|
70
|
+
|
|
71
|
+
Because `osdk.components` is declared after `osdk.tokens`, component styles take priority over token defaults when they overlap.
|
|
72
|
+
|
|
73
|
+
**Adding your own layer:** You can add a custom layer (e.g., `user.brand`) after the OSDK layers to override any token or component style. Later layers always win.
|
|
74
|
+
|
|
75
|
+
**When styles conflict, CSS resolves them in this order:**
|
|
76
|
+
|
|
77
|
+
1. **Layer order** — Later layers always win (`user.brand` > `osdk.components` > `osdk.tokens`)
|
|
78
|
+
2. **Selector specificity** — More specific selectors win _within the same layer_
|
|
79
|
+
3. **Source order** — Later declarations win when specificity is equal
|
|
80
|
+
|
|
81
|
+
#### With Tailwind CSS v4
|
|
82
|
+
|
|
83
|
+
> **Important:** The `@layer` declaration defines the cascade order. Wrapping the Tailwind import in `layer(tailwind)` nests all of Tailwind's styles into a single named layer. By listing `tailwind` before the OSDK layers, OSDK styles take priority over Tailwind's resets and utilities.
|
|
84
|
+
|
|
85
|
+
```css
|
|
86
|
+
/* index.css */
|
|
87
|
+
@layer tailwind, osdk.tokens, osdk.components, user.brand;
|
|
88
|
+
|
|
89
|
+
@import "tailwindcss" layer(tailwind);
|
|
90
|
+
|
|
91
|
+
@import "@osdk/react-components-styles" layer(osdk.tokens);
|
|
92
|
+
@import "@osdk/react-components/styles.css" layer(osdk.components);
|
|
93
|
+
|
|
94
|
+
/* To add your own brand overrides on top, append a custom layer: */
|
|
95
|
+
@import "./user-brand.css" layer(user.brand);
|
|
96
|
+
```
|
|
97
|
+
|
|
98
|
+
#### Without Tailwind CSS
|
|
57
99
|
|
|
58
100
|
```css
|
|
59
101
|
/* index.css */
|
|
@@ -61,7 +103,22 @@ Add this to your application's entry css file (e.g., `index.css` or `index.scss`
|
|
|
61
103
|
|
|
62
104
|
@import "@osdk/react-components-styles" layer(osdk.tokens);
|
|
63
105
|
@import "@osdk/react-components/styles.css" layer(osdk.components);
|
|
106
|
+
```
|
|
107
|
+
|
|
108
|
+
To add your own brand overrides on top:
|
|
109
|
+
|
|
110
|
+
```css
|
|
111
|
+
/* index.css */
|
|
112
|
+
@layer osdk.tokens, osdk.components, user.brand;
|
|
113
|
+
|
|
114
|
+
@import "@osdk/react-components-styles" layer(osdk.tokens);
|
|
115
|
+
@import "@osdk/react-components/styles.css" layer(osdk.components);
|
|
116
|
+
@import "./user-brand.css" layer(user.brand);
|
|
117
|
+
```
|
|
118
|
+
|
|
119
|
+
#### Portal isolation (required)
|
|
64
120
|
|
|
121
|
+
```css
|
|
65
122
|
.root {
|
|
66
123
|
isolation: isolate;
|
|
67
124
|
}
|
|
@@ -69,8 +126,6 @@ Add this to your application's entry css file (e.g., `index.css` or `index.scss`
|
|
|
69
126
|
|
|
70
127
|
The `.root` isolation is required for Base UI portals. See https://base-ui.com/react/overview/quick-start#portals
|
|
71
128
|
|
|
72
|
-
Using `@layer` ensures proper CSS cascade ordering - component styles are loaded before token styles, allowing tokens to override component defaults when needed.
|
|
73
|
-
|
|
74
129
|
## Components
|
|
75
130
|
|
|
76
131
|
> **Note:** This package is under active development. Not all components listed below are available yet.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormFieldApi.js","names":[],"sources":["FormFieldApi.ts"],"sourcesContent":["/*\n * Copyright 2025 Palantir Technologies, Inc. All rights reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport type {\n ActionDefinition,\n ActionMetadata,\n ActionParam,\n CompileTimeMetadata,\n DataValueClientToWire,\n ObjectSet,\n ObjectTypeDefinition,\n} from \"@osdk/api\";\nimport type React from \"react\";\n\n/**\n * A form field definition specifies configuration for a single field\n */\nexport interface FormFieldDefinition<\n Q extends ActionDefinition<unknown>,\n K extends FieldKey<Q> = FieldKey<Q>,\n> {\n /**\n * The field's unique key\n */\n fieldKey: K;\n\n /**\n * Display label for the field\n * If not provided, the form field will not show any label.\n */\n label?: string;\n\n /**\n * Default value of the field\n */\n defaultValue?: FieldValueType<Q, K>;\n\n /**\n * The form field component type to render\n */\n fieldComponent: ValidFormFieldForPropertyType<FieldDescriptorType<Q, K>>;\n\n /**\n * Whether the field is required\n */\n isRequired?: boolean;\n\n /**\n * Placeholder text\n */\n placeholder?: string;\n\n /**\n * Additional information to display on this field\n * The placement of helper text depends on the value of helperTextPlacement prop\n */\n helperText?: string;\n\n /**\n * The placement of the helper text either below the field or in a tooltip\n *\n * @default \"tooltip\"\n */\n helperTextPlacement?: \"bottom\" | \"tooltip\";\n\n /**\n * Whether the field is disabled\n */\n isDisabled?: boolean;\n\n /**\n * A callback to return a custom error message if validation failed\n *\n * @param validationRule the validation rule that failed with the error message\n * @returns the error message to display\n */\n onValidationError?: (error: ValidationError) => string;\n\n /**\n * Additional function to validate the field\n *\n * @param value the current field value\n * @returns a boolean promise indicating whether the value is valid\n */\n validate?: (value: FieldValueType<Q, K>) => Promise<boolean>;\n\n /**\n * The component props for the form field\n * Excludes runtime props (value, onChange) which are managed by ActionForm\n */\n fieldComponentProps: Omit<\n FormFieldPropsByType[\n ValidFormFieldForPropertyType<\n FieldDescriptorType<Q, K>\n >\n ],\n \"value\" | \"onChange\"\n >;\n}\n\ntype ValidationError = { type: ValidationRule; error: string };\n\ntype ValidationRule =\n | \"required\"\n | \"min\"\n | \"max\"\n | \"minLength\"\n | \"maxLength\"\n | \"pattern\"\n | \"validate\";\n\n/**\n * Maps field types to their corresponding props\n */\nexport interface FormFieldPropsByType {\n DATETIME_PICKER: DatetimePickerFieldProps;\n DROPDOWN: DropdownFieldProps<unknown, boolean>;\n FILE_PICKER: FilePickerProps;\n NUMBER_INPUT: NumberInputFieldProps;\n OBJECT_SET: ObjectSetFieldProps<ObjectTypeDefinition>;\n RADIO_BUTTONS: RadioButtonsFieldProps<unknown>;\n TEXT_AREA: TextAreaFieldProps;\n TEXT_INPUT: TextInputFieldProps;\n CUSTOM: CustomFieldProps<unknown>;\n}\n\n/**\n * Datetime picker field props.\n *\n * When `formatDate` is omitted, ISO-like format is used (YYYY-MM-DD / YYYY-MM-DD HH:mm).\n */\nexport interface DatetimePickerFieldProps extends BaseFormFieldProps<Date> {\n /**\n * The earliest date the user can select.\n * If provided, this will be added to the field validation.\n */\n min?: Date;\n\n /**\n * The latest date the user can select.\n * If provided, this will be added to the field validation.\n */\n max?: Date;\n\n /**\n * Whether to show time picker.\n */\n showTime?: boolean;\n\n /**\n * Whether to close the popover after selecting a date.\n * @default true when `showTime` is false, false when `showTime` is true\n */\n closeOnSelection?: boolean;\n\n /**\n * Placeholder text shown when no value is selected.\n */\n placeholder?: string;\n\n /** Formats a Date for display in the trigger button. */\n formatDate?: (date: Date) => string;\n}\n\n/**\n * Dropdown field props with selectable items\n */\nexport interface DropdownFieldProps<V, Multiple extends boolean = false>\n extends BaseFormFieldProps<Multiple extends true ? V[] : V>\n{\n /**\n * Available items for the dropdown\n */\n items: V[];\n\n /**\n * Converts an item to a display string. Defaults to `String()`.\n */\n itemToStringLabel?: (item: V) => string;\n\n /**\n * Returns a unique string key for a list item. Used as the React `key`.\n * Falls back to the item's index when not provided.\n */\n itemToKey?: (item: V) => string;\n\n /**\n * Custom equality check for item values. Defaults to `Object.is`.\n * Required when items are objects to ensure correct selection matching.\n */\n isItemEqual?: (a: V, b: V) => boolean;\n\n /**\n * Whether the dropdown allows searching/filtering.\n * When true, renders a Combobox with a search input.\n * When false (default), renders a Select dropdown.\n */\n isSearchable?: boolean;\n\n /**\n * Placeholder text shown when no value is selected.\n */\n placeholder?: string;\n\n /**\n * Whether multiple values can be selected\n */\n isMultiple?: Multiple;\n}\n\nexport interface FilePickerProps extends BaseFormFieldProps<File | File[]> {\n /**\n * Whether multiple files can be selected\n */\n isMulti?: boolean;\n\n /**\n * Accepted file types (e.g., \"image/*\", \".pdf\")\n */\n accept?: string | string[];\n\n /**\n * Maximum file size in bytes\n */\n maxSize?: number;\n}\n\n/**\n * Text area field props\n */\nexport interface TextAreaFieldProps extends\n BaseFormFieldProps<string>,\n Pick<\n React.TextareaHTMLAttributes<HTMLTextAreaElement>,\n | \"rows\"\n | \"wrap\"\n /**\n * If provided, this will be added to the field validation\n */\n | \"minLength\"\n /**\n * If provided, this will be added to the field validation\n */\n | \"maxLength\"\n >\n{\n placeholder?: string;\n}\n\nexport interface TextInputFieldProps extends\n BaseFormFieldProps<string>,\n Pick<\n React.InputHTMLAttributes<HTMLInputElement>,\n /**\n * If provided, this will be added to the field validation\n */\n | \"minLength\"\n /**\n * If provided, this will be added to the field validation\n */\n | \"maxLength\"\n >\n{\n placeholder?: string;\n}\n\n/**\n * Number input field props\n */\nexport interface NumberInputFieldProps extends\n BaseFormFieldProps<number>,\n Pick<\n React.InputHTMLAttributes<HTMLInputElement>,\n /**\n * If provided, this will be added to the field validation\n */\n | \"min\"\n /**\n * If provided, this will be added to the field validation\n */\n | \"max\"\n | \"step\"\n >\n{}\n\n/**\n * Radio buttons field props\n */\nexport interface RadioButtonsFieldProps<V> extends BaseFormFieldProps<V> {\n /**\n * Available options for radio buttons.\n *\n * Values are compared by reference equality (`===`). When options contain\n * non-primitive values, pass the same object references for `value` and\n * the corresponding option entry.\n */\n options: Option<V>[];\n}\n\n/**\n * Option interface for radio button options\n */\nexport interface Option<V> {\n label: string;\n value: V;\n}\n\n/**\n * Object set field displays the summary of the count of the given object set\n */\nexport interface ObjectSetFieldProps<T extends ObjectTypeDefinition>\n extends BaseFormFieldProps<ObjectSet<T>>\n{}\n\n/**\n * Custom field props for user-defined renderers\n */\nexport interface CustomFieldProps<V> extends BaseFormFieldProps<V> {\n /**\n * Custom renderer function\n */\n customRenderer: (props: BaseFormFieldProps<V>) => React.ReactNode;\n}\n\nexport interface BaseFormFieldProps<V> {\n /**\n * The HTML `id` attribute for the field input element.\n * Used for `<label htmlFor>` association.\n */\n id?: string;\n\n /**\n * The value of the form field\n */\n value: V | null;\n /**\n * Called when the field value changes.\n *\n * ActionForm internally wraps this to pass the key to `onFieldValueChange`:\n * ```\n * <DropdownField\n * {...fieldDef}\n * onChange={(value) => onFieldValueChange(fieldDef.key, value)}\n * />\n * ```\n *\n * @param value The new value of the form field\n */\n onChange?: (value: V | null) => void;\n}\n\nexport type FieldKey<Q extends ActionDefinition<unknown>> =\n keyof ActionParameters<Q>;\n\n/**\n * Extracts parameters from an ActionDefinition\n */\nexport type ActionParameters<Q extends ActionDefinition<unknown>> =\n CompileTimeMetadata<Q>[\"parameters\"];\n\n/**\n * Extracts the value type for a specific parameter\n *\n * TODO: Re-use `BaseType`\n */\nexport type FieldValueType<\n Q extends ActionDefinition<unknown>,\n K extends keyof ActionParameters<Q> = keyof ActionParameters<Q>,\n> = ActionParameters<Q>[K][\"type\"] extends\n ActionMetadata.DataType.Object<infer T> ? ActionParam.ObjectType<T>\n : ActionParameters<Q>[K][\"type\"] extends ActionMetadata.DataType.ObjectSet<\n infer T\n > ? ActionParam.ObjectSetType<T>\n : ActionParameters<Q>[K][\"type\"] extends ActionMetadata.DataType.Struct<\n infer T\n > ? ActionParam.StructType<T>\n : ActionParameters<Q>[K][\"type\"] extends keyof DataValueClientToWire\n ? DataValueClientToWire[ActionParameters<Q>[K][\"type\"]]\n : never;\n\n/**\n * Extracts the parameter type descriptor for a specific action parameter.\n */\nexport type FieldDescriptorType<\n Q extends ActionDefinition<unknown> = ActionDefinition<unknown>,\n K extends keyof ActionParameters<Q> = keyof ActionParameters<Q>,\n> = ActionParameters<Q>[K][\"type\"];\n\n/**\n * Available form field component types\n */\nexport type FieldComponent =\n | \"DATETIME_PICKER\"\n | \"DROPDOWN\"\n | \"FILE_PICKER\"\n | \"NUMBER_INPUT\"\n | \"RADIO_BUTTONS\"\n | \"OBJECT_SET\"\n | \"TEXT_AREA\"\n | \"TEXT_INPUT\"\n | \"CUSTOM\";\n\n/**\n * Describes the data type of a form field, independent of OSDK.\n * Mirrors ActionMetadata.DataType to keep the rendering layer OSDK-agnostic.\n */\nexport type FieldType =\n | \"boolean\"\n | \"string\"\n | \"integer\"\n | \"long\"\n | \"double\"\n | \"datetime\"\n | \"timestamp\"\n | \"attachment\"\n | \"marking\"\n | \"mediaReference\"\n | \"objectType\"\n | \"geoshape\"\n | \"geohash\"\n | { type: \"object\"; object: string }\n | { type: \"objectSet\"; objectSet: string }\n | { type: \"interface\"; interface: string }\n | { type: \"struct\"; struct: Record<string, string> };\n\n/**\n * An OSDK-agnostic field definition used by BaseForm and FormFieldRenderer.\n * Contains only the information needed to render a single field — no generics,\n * no compile-time parameter constraints.\n *\n * Implemented as a distributed mapped type: switching on `fieldComponent`\n * narrows `fieldComponentProps` to the correct props type automatically.\n */\nexport type RendererFieldDefinition = {\n [K in FieldComponent]: {\n fieldKey: string;\n fieldComponent: K;\n fieldType?: FieldType;\n label?: string;\n defaultValue?: unknown;\n isRequired?: boolean;\n placeholder?: string;\n helperText?: string;\n helperTextPlacement?: \"bottom\" | \"tooltip\";\n fieldComponentProps: Omit<FormFieldPropsByType[K], \"value\" | \"onChange\">;\n };\n}[FieldComponent];\n\n/**\n * Gets valid form field types for a given property type\n */\nexport type ValidFormFieldForPropertyType<P extends FieldDescriptorType> =\n P extends \"objectSet\" ? \"OBJECT_SET\"\n : P extends \"object\" ? \"DROPDOWN\"\n : P extends \"mediaReference\" | \"attachment\" ? \"FILE_PICKER\"\n : P extends \"boolean\" ? \"RADIO_BUTTONS\" | \"DROPDOWN\"\n : P extends \"string\" ? \"TEXT_INPUT\" | \"TEXT_AREA\"\n : P extends \"datetime\" | \"timestamp\" ? \"DATETIME_PICKER\"\n : P extends\n | \"double\"\n | \"integer\"\n | \"long\"\n | \"float\"\n | \"short\"\n | \"byte\"\n | \"decimal\" ? \"NUMBER_INPUT\"\n : never;\n"],"mappings":"","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"FormFieldApi.js","names":[],"sources":["FormFieldApi.ts"],"sourcesContent":["/*\n * Copyright 2026 Palantir Technologies, Inc. All rights reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport type {\n ActionDefinition,\n ActionMetadata,\n ActionParam,\n CompileTimeMetadata,\n DataValueClientToWire,\n ObjectSet,\n ObjectTypeDefinition,\n} from \"@osdk/api\";\nimport type React from \"react\";\n\n/**\n * A form field definition specifies configuration for a single field\n */\nexport interface FormFieldDefinition<\n Q extends ActionDefinition<unknown>,\n K extends FieldKey<Q> = FieldKey<Q>,\n> {\n /**\n * The field's unique key\n */\n fieldKey: K;\n\n /**\n * Display label for the field\n */\n label: string;\n\n /**\n * Default value of the field\n */\n defaultValue?: FieldValueType<Q, K>;\n\n /**\n * The form field component type to render\n */\n fieldComponent: ValidFormFieldForPropertyType<FieldDescriptorType<Q, K>>;\n\n /**\n * Whether the field is required\n */\n isRequired?: boolean;\n\n /**\n * Placeholder text\n */\n placeholder?: string;\n\n /**\n * Additional information to display on this field\n * The placement of helper text depends on the value of helperTextPlacement prop\n */\n helperText?: string;\n\n /**\n * The placement of the helper text either below the field or in a tooltip\n *\n * @default \"tooltip\"\n */\n helperTextPlacement?: \"bottom\" | \"tooltip\";\n\n /**\n * Whether the field is disabled\n */\n isDisabled?: boolean;\n\n /**\n * A callback to return a custom error message if validation failed\n *\n * @param validationRule the validation rule that failed with the error message\n * @returns the error message to display\n */\n onValidationError?: (error: ValidationError) => string;\n\n /**\n * Additional function to validate the field\n *\n * @param value the current field value\n * @returns a boolean promise indicating whether the value is valid\n */\n validate?: (value: FieldValueType<Q, K>) => Promise<boolean>;\n\n /**\n * The component props for the form field\n * Excludes runtime props (value, onChange) which are managed by ActionForm\n */\n fieldComponentProps: Omit<\n FormFieldPropsByType[\n ValidFormFieldForPropertyType<\n FieldDescriptorType<Q, K>\n >\n ],\n \"value\" | \"onChange\"\n >;\n}\n\ntype ValidationError = { type: ValidationRule; error: string };\n\ntype ValidationRule =\n | \"required\"\n | \"min\"\n | \"max\"\n | \"minLength\"\n | \"maxLength\"\n | \"pattern\"\n | \"validate\";\n\n/**\n * Maps field types to their corresponding props\n */\nexport interface FormFieldPropsByType {\n DATETIME_PICKER: DatetimePickerFieldProps;\n DROPDOWN: DropdownFieldProps<unknown, boolean>;\n FILE_PICKER: FilePickerProps;\n NUMBER_INPUT: NumberInputFieldProps;\n OBJECT_SET: ObjectSetFieldProps<ObjectTypeDefinition>;\n RADIO_BUTTONS: RadioButtonsFieldProps<unknown>;\n TEXT_AREA: TextAreaFieldProps;\n TEXT_INPUT: TextInputFieldProps;\n CUSTOM: CustomFieldProps<unknown>;\n}\n\n/**\n * Datetime picker field props.\n *\n * When `formatDate` is omitted, ISO-like format is used (YYYY-MM-DD / YYYY-MM-DD HH:mm).\n */\nexport interface DatetimePickerFieldProps extends BaseFormFieldProps<Date> {\n /**\n * The earliest date the user can select.\n * If provided, this will be added to the field validation.\n */\n min?: Date;\n\n /**\n * The latest date the user can select.\n * If provided, this will be added to the field validation.\n */\n max?: Date;\n\n /**\n * Whether to show time picker.\n */\n showTime?: boolean;\n\n /**\n * Whether to close the popover after selecting a date.\n * @default true when `showTime` is false, false when `showTime` is true\n */\n closeOnSelection?: boolean;\n\n /**\n * Placeholder text shown when no value is selected.\n */\n placeholder?: string;\n\n /** Formats a Date for display in the trigger button. */\n formatDate?: (date: Date) => string;\n}\n\n/**\n * Dropdown field props with selectable items\n */\nexport interface DropdownFieldProps<V, Multiple extends boolean = false>\n extends BaseFormFieldProps<Multiple extends true ? V[] : V>\n{\n /**\n * Available items for the dropdown\n */\n items: V[];\n\n /**\n * Converts an item to a display string. Defaults to `String()`.\n */\n itemToStringLabel?: (item: V) => string;\n\n /**\n * Returns a unique string key for a list item. Used as the React `key`.\n * Falls back to the item's index when not provided.\n */\n itemToKey?: (item: V) => string;\n\n /**\n * Custom equality check for item values. Defaults to `Object.is`.\n * Required when items are objects to ensure correct selection matching.\n */\n isItemEqual?: (a: V, b: V) => boolean;\n\n /**\n * Whether the dropdown allows searching/filtering.\n * When true, renders a Combobox with a search input.\n * When false (default), renders a Select dropdown.\n */\n isSearchable?: boolean;\n\n /**\n * Placeholder text shown when no value is selected.\n */\n placeholder?: string;\n\n /**\n * Whether multiple values can be selected\n */\n isMultiple?: Multiple;\n}\n\nexport interface FilePickerProps extends BaseFormFieldProps<File | File[]> {\n /**\n * Whether multiple files can be selected\n */\n isMulti?: boolean;\n\n /**\n * Accepted file types (e.g., \"image/*\", \".pdf\")\n */\n accept?: string | string[];\n\n /**\n * Maximum file size in bytes\n */\n maxSize?: number;\n}\n\n/**\n * Text area field props\n */\nexport interface TextAreaFieldProps extends\n BaseFormFieldProps<string>,\n Pick<\n React.TextareaHTMLAttributes<HTMLTextAreaElement>,\n | \"rows\"\n | \"wrap\"\n /**\n * If provided, this will be added to the field validation\n */\n | \"minLength\"\n /**\n * If provided, this will be added to the field validation\n */\n | \"maxLength\"\n >\n{\n placeholder?: string;\n}\n\nexport interface TextInputFieldProps extends\n BaseFormFieldProps<string>,\n Pick<\n React.InputHTMLAttributes<HTMLInputElement>,\n /**\n * If provided, this will be added to the field validation\n */\n | \"minLength\"\n /**\n * If provided, this will be added to the field validation\n */\n | \"maxLength\"\n >\n{\n placeholder?: string;\n}\n\n/**\n * Number input field props\n */\nexport interface NumberInputFieldProps extends BaseFormFieldProps<number> {\n /**\n * Minimum allowed value.\n */\n min?: number;\n\n /**\n * Maximum allowed value.\n */\n max?: number;\n\n /**\n * Step increment for the input. Used by the stepper buttons and ArrowUp/ArrowDown keyboard stepping.\n *\n * @default 1\n */\n step?: number;\n\n /**\n * Placeholder text shown when the input is empty.\n */\n placeholder?: string;\n}\n\n/**\n * Radio buttons field props\n */\nexport interface RadioButtonsFieldProps<V> extends BaseFormFieldProps<V> {\n /**\n * Available options for radio buttons.\n *\n * Values are compared by reference equality (`===`). When options contain\n * non-primitive values, pass the same object references for `value` and\n * the corresponding option entry.\n */\n options: Option<V>[];\n}\n\n/**\n * Option interface for radio button options\n */\nexport interface Option<V> {\n label: string;\n value: V;\n}\n\n/**\n * Object set field displays the summary of the count of the given object set\n */\nexport interface ObjectSetFieldProps<T extends ObjectTypeDefinition>\n extends BaseFormFieldProps<ObjectSet<T>>\n{}\n\n/**\n * Custom field props for user-defined renderers\n */\nexport interface CustomFieldProps<V> extends BaseFormFieldProps<V> {\n /**\n * Custom renderer function\n */\n customRenderer: (props: BaseFormFieldProps<V>) => React.ReactNode;\n}\n\nexport interface BaseFormFieldProps<V> {\n /**\n * The HTML `id` attribute for the field input element.\n * Used for `<label htmlFor>` association.\n */\n id?: string;\n\n /**\n * The value of the form field\n */\n value: V | null;\n /**\n * Called when the field value changes.\n *\n * ActionForm internally wraps this to pass the key to `onFieldValueChange`:\n * ```\n * <DropdownField\n * {...fieldDef}\n * onChange={(value) => onFieldValueChange(fieldDef.key, value)}\n * />\n * ```\n *\n * @param value The new value of the form field\n */\n onChange?: (value: V | null) => void;\n}\n\nexport type FieldKey<Q extends ActionDefinition<unknown>> =\n keyof ActionParameters<Q>;\n\n/**\n * Extracts parameters from an ActionDefinition\n */\nexport type ActionParameters<Q extends ActionDefinition<unknown>> =\n CompileTimeMetadata<Q>[\"parameters\"];\n\n/**\n * Extracts the value type for a specific parameter\n *\n * TODO: Re-use `BaseType`\n */\nexport type FieldValueType<\n Q extends ActionDefinition<unknown>,\n K extends keyof ActionParameters<Q> = keyof ActionParameters<Q>,\n> = ActionParameters<Q>[K][\"type\"] extends\n ActionMetadata.DataType.Object<infer T> ? ActionParam.ObjectType<T>\n : ActionParameters<Q>[K][\"type\"] extends ActionMetadata.DataType.ObjectSet<\n infer T\n > ? ActionParam.ObjectSetType<T>\n : ActionParameters<Q>[K][\"type\"] extends ActionMetadata.DataType.Struct<\n infer T\n > ? ActionParam.StructType<T>\n : ActionParameters<Q>[K][\"type\"] extends keyof DataValueClientToWire\n ? DataValueClientToWire[ActionParameters<Q>[K][\"type\"]]\n : never;\n\n/**\n * Extracts the parameter type descriptor for a specific action parameter.\n */\nexport type FieldDescriptorType<\n Q extends ActionDefinition<unknown> = ActionDefinition<unknown>,\n K extends keyof ActionParameters<Q> = keyof ActionParameters<Q>,\n> = ActionParameters<Q>[K][\"type\"];\n\n/**\n * Available form field component types\n */\nexport type FieldComponent =\n | \"DATETIME_PICKER\"\n | \"DROPDOWN\"\n | \"FILE_PICKER\"\n | \"NUMBER_INPUT\"\n | \"RADIO_BUTTONS\"\n | \"OBJECT_SET\"\n | \"TEXT_AREA\"\n | \"TEXT_INPUT\"\n | \"CUSTOM\";\n\n/**\n * Describes the data type of a form field, independent of OSDK.\n * Mirrors ActionMetadata.DataType to keep the rendering layer OSDK-agnostic.\n */\nexport type FieldType =\n | \"boolean\"\n | \"string\"\n | \"integer\"\n | \"long\"\n | \"double\"\n | \"datetime\"\n | \"timestamp\"\n | \"attachment\"\n | \"marking\"\n | \"mediaReference\"\n | \"objectType\"\n | \"geoshape\"\n | \"geohash\"\n | { type: \"object\"; object: string }\n | { type: \"objectSet\"; objectSet: string }\n | { type: \"interface\"; interface: string }\n | { type: \"struct\"; struct: Record<string, string> };\n\n/**\n * An OSDK-agnostic field definition used by BaseForm and FormFieldRenderer.\n * Contains only the information needed to render a single field — no generics,\n * no compile-time parameter constraints.\n *\n * Implemented as a distributed mapped type: switching on `fieldComponent`\n * narrows `fieldComponentProps` to the correct props type automatically.\n */\nexport type RendererFieldDefinition = {\n [K in FieldComponent]: {\n fieldKey: string;\n fieldComponent: K;\n fieldType?: FieldType;\n label: string;\n defaultValue?: unknown;\n isRequired?: boolean;\n placeholder?: string;\n helperText?: string;\n helperTextPlacement?: \"bottom\" | \"tooltip\";\n fieldComponentProps: Omit<FormFieldPropsByType[K], \"value\" | \"onChange\">;\n };\n}[FieldComponent];\n\n/**\n * Gets valid form field types for a given property type\n */\nexport type ValidFormFieldForPropertyType<P extends FieldDescriptorType> =\n P extends \"objectSet\" ? \"OBJECT_SET\"\n : P extends \"object\" ? \"DROPDOWN\"\n : P extends \"mediaReference\" | \"attachment\" ? \"FILE_PICKER\"\n : P extends \"boolean\" ? \"RADIO_BUTTONS\" | \"DROPDOWN\"\n : P extends \"string\" ? \"TEXT_INPUT\" | \"TEXT_AREA\"\n : P extends \"datetime\" | \"timestamp\" ? \"DATETIME_PICKER\"\n : P extends\n | \"double\"\n | \"integer\"\n | \"long\"\n | \"float\"\n | \"short\"\n | \"byte\"\n | \"decimal\" ? \"NUMBER_INPUT\"\n : never;\n"],"mappings":"","ignoreList":[]}
|
|
@@ -20,6 +20,7 @@ import { FormField } from "../FormField.js";
|
|
|
20
20
|
import { CustomField } from "./CustomField.js";
|
|
21
21
|
import { DatetimePickerField } from "./DatetimePickerField.js";
|
|
22
22
|
import { DropdownField } from "./DropdownField.js";
|
|
23
|
+
import { NumberInputField } from "./NumberInputField.js";
|
|
23
24
|
import { RadioButtonsField } from "./RadioButtonsField.js";
|
|
24
25
|
import { TextAreaField } from "./TextAreaField.js";
|
|
25
26
|
import { TextInputField } from "./TextInputField.js";
|
|
@@ -87,6 +88,13 @@ function renderFieldComponent(fieldDefinition, value, onChange) {
|
|
|
87
88
|
onChange: onChange
|
|
88
89
|
}, fieldDefinition.fieldComponentProps));
|
|
89
90
|
case "NUMBER_INPUT":
|
|
91
|
+
// TODO: Use coerceFieldValue
|
|
92
|
+
return /*#__PURE__*/React.createElement(NumberInputField, _extends({
|
|
93
|
+
id: fieldDefinition.fieldKey,
|
|
94
|
+
value: typeof value === "number" ? value : null,
|
|
95
|
+
onChange: onChange,
|
|
96
|
+
placeholder: fieldDefinition.placeholder
|
|
97
|
+
}, fieldDefinition.fieldComponentProps));
|
|
90
98
|
case "FILE_PICKER":
|
|
91
99
|
case "OBJECT_SET":
|
|
92
100
|
return /*#__PURE__*/React.createElement("div", null, "Unsupported field type: ", fieldDefinition.fieldComponent);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormFieldRenderer.js","names":["React","memo","FormField","CustomField","DatetimePickerField","DropdownField","RadioButtonsField","TextAreaField","TextInputField","FormFieldRenderer","fieldDefinition","value","onFieldValueChange","label","isRequired","helperText","helperTextPlacement","createElement","fieldKey","undefined","renderFieldComponent","onChange","fieldComponent","_extends","id","String","placeholder","fieldComponentProps","Date","assertUnreachableFieldComponent","Error"],"sources":["FormFieldRenderer.tsx"],"sourcesContent":["/*\n * Copyright 2026 Palantir Technologies, Inc. All rights reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React, { memo } from \"react\";\nimport { FormField } from \"../FormField.js\";\nimport type { RendererFieldDefinition } from \"../FormFieldApi.js\";\nimport { CustomField } from \"./CustomField.js\";\nimport { DatetimePickerField } from \"./DatetimePickerField.js\";\nimport { DropdownField } from \"./DropdownField.js\";\nimport { RadioButtonsField } from \"./RadioButtonsField.js\";\nimport { TextAreaField } from \"./TextAreaField.js\";\nimport { TextInputField } from \"./TextInputField.js\";\n\nexport interface FormFieldRendererProps {\n fieldDefinition: RendererFieldDefinition;\n value: unknown;\n onFieldValueChange: (value: unknown) => void;\n}\n\nexport const FormFieldRenderer: React.FC<FormFieldRendererProps> = memo(\n function FormFieldRendererFn({\n fieldDefinition,\n value,\n onFieldValueChange,\n }: FormFieldRendererProps): React.ReactElement {\n const { label, isRequired, helperText, helperTextPlacement } =\n fieldDefinition;\n\n return (\n <FormField\n label={label}\n isRequired={isRequired}\n fieldKey={fieldDefinition.fieldKey}\n helperText={helperTextPlacement !== \"tooltip\" ? helperText : undefined}\n >\n {renderFieldComponent(fieldDefinition, value, onFieldValueChange)}\n </FormField>\n );\n },\n);\n\nfunction renderFieldComponent(\n fieldDefinition: RendererFieldDefinition,\n value: unknown,\n onChange: (value: unknown) => void,\n): React.ReactElement {\n switch (fieldDefinition.fieldComponent) {\n case \"TEXT_INPUT\":\n return (\n <TextInputField\n id={fieldDefinition.fieldKey}\n value={value != null ? String(value) : \"\"}\n onChange={onChange}\n placeholder={fieldDefinition.placeholder}\n {...fieldDefinition.fieldComponentProps}\n />\n );\n case \"TEXT_AREA\":\n return (\n <TextAreaField\n id={fieldDefinition.fieldKey}\n value={value != null ? String(value) : \"\"}\n onChange={onChange}\n placeholder={fieldDefinition.placeholder}\n {...fieldDefinition.fieldComponentProps}\n />\n );\n case \"DROPDOWN\": {\n return (\n <DropdownField\n value={value}\n onChange={onChange}\n placeholder={fieldDefinition.placeholder}\n {...fieldDefinition.fieldComponentProps}\n />\n );\n }\n case \"DATETIME_PICKER\":\n return (\n <DatetimePickerField\n id={fieldDefinition.fieldKey}\n placeholder={fieldDefinition.placeholder}\n // TODO: Use coerceFieldValue\n value={value instanceof Date ? value : null}\n onChange={onChange}\n {...fieldDefinition.fieldComponentProps}\n />\n );\n case \"RADIO_BUTTONS\":\n return (\n <RadioButtonsField\n id={fieldDefinition.fieldKey}\n value={value}\n onChange={onChange}\n {...fieldDefinition.fieldComponentProps}\n />\n );\n case \"CUSTOM\":\n return (\n <CustomField\n id={fieldDefinition.fieldKey}\n value={value}\n onChange={onChange}\n {...fieldDefinition.fieldComponentProps}\n />\n );\n case \"NUMBER_INPUT\":\n case \"FILE_PICKER\":\n case \"OBJECT_SET\":\n return <div>Unsupported field type: {fieldDefinition.fieldComponent}\n </div>;\n default:\n return assertUnreachableFieldComponent(fieldDefinition);\n }\n}\n\nfunction assertUnreachableFieldComponent(value: never): never {\n throw new Error(`Unhandled field component: ${String(value)}`);\n}\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,OAAOA,KAAK,IAAIC,IAAI,QAAQ,OAAO;AACnC,SAASC,SAAS,QAAQ,iBAAiB;AAE3C,SAASC,WAAW,QAAQ,kBAAkB;AAC9C,SAASC,mBAAmB,QAAQ,0BAA0B;AAC9D,SAASC,aAAa,QAAQ,oBAAoB;AAClD,SAASC,iBAAiB,QAAQ,wBAAwB;AAC1D,SAASC,aAAa,QAAQ,oBAAoB;AAClD,SAASC,cAAc,QAAQ,qBAAqB;AAQpD,OAAO,MAAMC,iBAAmD,
|
|
1
|
+
{"version":3,"file":"FormFieldRenderer.js","names":["React","memo","FormField","CustomField","DatetimePickerField","DropdownField","NumberInputField","RadioButtonsField","TextAreaField","TextInputField","FormFieldRenderer","fieldDefinition","value","onFieldValueChange","label","isRequired","helperText","helperTextPlacement","createElement","fieldKey","undefined","renderFieldComponent","onChange","fieldComponent","_extends","id","String","placeholder","fieldComponentProps","Date","assertUnreachableFieldComponent","Error"],"sources":["FormFieldRenderer.tsx"],"sourcesContent":["/*\n * Copyright 2026 Palantir Technologies, Inc. All rights reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React, { memo } from \"react\";\nimport { FormField } from \"../FormField.js\";\nimport type { RendererFieldDefinition } from \"../FormFieldApi.js\";\nimport { CustomField } from \"./CustomField.js\";\nimport { DatetimePickerField } from \"./DatetimePickerField.js\";\nimport { DropdownField } from \"./DropdownField.js\";\nimport { NumberInputField } from \"./NumberInputField.js\";\nimport { RadioButtonsField } from \"./RadioButtonsField.js\";\nimport { TextAreaField } from \"./TextAreaField.js\";\nimport { TextInputField } from \"./TextInputField.js\";\n\nexport interface FormFieldRendererProps {\n fieldDefinition: RendererFieldDefinition;\n value: unknown;\n onFieldValueChange: (value: unknown) => void;\n}\n\nexport const FormFieldRenderer: React.FC<FormFieldRendererProps> = memo(\n function FormFieldRendererFn({\n fieldDefinition,\n value,\n onFieldValueChange,\n }: FormFieldRendererProps): React.ReactElement {\n const { label, isRequired, helperText, helperTextPlacement } =\n fieldDefinition;\n\n return (\n <FormField\n label={label}\n isRequired={isRequired}\n fieldKey={fieldDefinition.fieldKey}\n helperText={helperTextPlacement !== \"tooltip\" ? helperText : undefined}\n >\n {renderFieldComponent(fieldDefinition, value, onFieldValueChange)}\n </FormField>\n );\n },\n);\n\nfunction renderFieldComponent(\n fieldDefinition: RendererFieldDefinition,\n value: unknown,\n onChange: (value: unknown) => void,\n): React.ReactElement {\n switch (fieldDefinition.fieldComponent) {\n case \"TEXT_INPUT\":\n return (\n <TextInputField\n id={fieldDefinition.fieldKey}\n value={value != null ? String(value) : \"\"}\n onChange={onChange}\n placeholder={fieldDefinition.placeholder}\n {...fieldDefinition.fieldComponentProps}\n />\n );\n case \"TEXT_AREA\":\n return (\n <TextAreaField\n id={fieldDefinition.fieldKey}\n value={value != null ? String(value) : \"\"}\n onChange={onChange}\n placeholder={fieldDefinition.placeholder}\n {...fieldDefinition.fieldComponentProps}\n />\n );\n case \"DROPDOWN\": {\n return (\n <DropdownField\n value={value}\n onChange={onChange}\n placeholder={fieldDefinition.placeholder}\n {...fieldDefinition.fieldComponentProps}\n />\n );\n }\n case \"DATETIME_PICKER\":\n return (\n <DatetimePickerField\n id={fieldDefinition.fieldKey}\n placeholder={fieldDefinition.placeholder}\n // TODO: Use coerceFieldValue\n value={value instanceof Date ? value : null}\n onChange={onChange}\n {...fieldDefinition.fieldComponentProps}\n />\n );\n case \"RADIO_BUTTONS\":\n return (\n <RadioButtonsField\n id={fieldDefinition.fieldKey}\n value={value}\n onChange={onChange}\n {...fieldDefinition.fieldComponentProps}\n />\n );\n case \"CUSTOM\":\n return (\n <CustomField\n id={fieldDefinition.fieldKey}\n value={value}\n onChange={onChange}\n {...fieldDefinition.fieldComponentProps}\n />\n );\n case \"NUMBER_INPUT\":\n // TODO: Use coerceFieldValue\n return (\n <NumberInputField\n id={fieldDefinition.fieldKey}\n value={typeof value === \"number\" ? value : null}\n onChange={onChange}\n placeholder={fieldDefinition.placeholder}\n {...fieldDefinition.fieldComponentProps}\n />\n );\n case \"FILE_PICKER\":\n case \"OBJECT_SET\":\n return <div>Unsupported field type: {fieldDefinition.fieldComponent}\n </div>;\n default:\n return assertUnreachableFieldComponent(fieldDefinition);\n }\n}\n\nfunction assertUnreachableFieldComponent(value: never): never {\n throw new Error(`Unhandled field component: ${String(value)}`);\n}\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1,130 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* Copyright 2026 Palantir Technologies, Inc. All rights reserved.
|
|
3
|
+
*
|
|
4
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
5
|
+
* you may not use this file except in compliance with the License.
|
|
6
|
+
* You may obtain a copy of the License at
|
|
7
|
+
*
|
|
8
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
9
|
+
*
|
|
10
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
11
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
12
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
13
|
+
* See the License for the specific language governing permissions and
|
|
14
|
+
* limitations under the License.
|
|
15
|
+
*/
|
|
16
|
+
|
|
17
|
+
import { Button } from "@base-ui/react/button";
|
|
18
|
+
import { Input } from "@base-ui/react/input";
|
|
19
|
+
import { ChevronDown, ChevronUp } from "@blueprintjs/icons";
|
|
20
|
+
import React, { useCallback, useRef, useState } from "react";
|
|
21
|
+
import styles from "./NumberInputField.module.css.js";
|
|
22
|
+
|
|
23
|
+
/**
|
|
24
|
+
* Structural regex for valid numeric input.
|
|
25
|
+
*
|
|
26
|
+
* Allows intermediate typing states that will become valid numbers:
|
|
27
|
+
* "" — user cleared the field (all groups are optional)
|
|
28
|
+
* "-" — user started typing a negative number
|
|
29
|
+
* "." — user started typing a decimal like ".5"
|
|
30
|
+
* "+" — user started typing an explicitly positive number
|
|
31
|
+
* "1.", "1e", "1e+" — partial but structurally valid
|
|
32
|
+
*
|
|
33
|
+
* Rejects obviously invalid strings like "1.2.3" or "+-5".
|
|
34
|
+
*/
|
|
35
|
+
const VALID_NUMERIC_REGEX = /^[+-.]?(\d+\.?\d*|\d*\.?\d+)?([eE][+-]?\d*)?$/;
|
|
36
|
+
const DEFAULT_STEP = 1;
|
|
37
|
+
const CHEVRON_SIZE = 12;
|
|
38
|
+
|
|
39
|
+
// TODO: Add min/max validation so the field can surface
|
|
40
|
+
// out-of-range errors through the form validation system.
|
|
41
|
+
export function NumberInputField({
|
|
42
|
+
id,
|
|
43
|
+
value,
|
|
44
|
+
onChange,
|
|
45
|
+
placeholder,
|
|
46
|
+
min: _min,
|
|
47
|
+
max: _max,
|
|
48
|
+
step
|
|
49
|
+
}) {
|
|
50
|
+
const [displayValue, setDisplayValue] = useState(() => formatNumberForDisplay(value));
|
|
51
|
+
const prevValueRef = useRef(value);
|
|
52
|
+
|
|
53
|
+
// Sync external value → internal display string
|
|
54
|
+
if (prevValueRef.current !== value) {
|
|
55
|
+
prevValueRef.current = value;
|
|
56
|
+
const currentParsed = parseNumericValue(displayValue);
|
|
57
|
+
if (value !== currentParsed) {
|
|
58
|
+
setDisplayValue(formatNumberForDisplay(value));
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
const handleValueChange = useCallback(newValue => {
|
|
62
|
+
if (!isValidInput(newValue)) {
|
|
63
|
+
return;
|
|
64
|
+
}
|
|
65
|
+
setDisplayValue(newValue);
|
|
66
|
+
onChange?.(parseNumericValue(newValue));
|
|
67
|
+
}, [onChange]);
|
|
68
|
+
const applyStep = useCallback(direction => {
|
|
69
|
+
const current = parseNumericValue(displayValue) ?? 0;
|
|
70
|
+
const next = current + direction * (step ?? DEFAULT_STEP);
|
|
71
|
+
const formatted = formatNumberForDisplay(next);
|
|
72
|
+
setDisplayValue(formatted);
|
|
73
|
+
onChange?.(next);
|
|
74
|
+
}, [displayValue, onChange, step]);
|
|
75
|
+
const handleKeyDown = useCallback(e => {
|
|
76
|
+
if (e.key !== "ArrowUp" && e.key !== "ArrowDown") {
|
|
77
|
+
return;
|
|
78
|
+
}
|
|
79
|
+
e.preventDefault();
|
|
80
|
+
applyStep(e.key === "ArrowUp" ? 1 : -1);
|
|
81
|
+
}, [applyStep]);
|
|
82
|
+
const handleStepUp = useCallback(() => {
|
|
83
|
+
applyStep(1);
|
|
84
|
+
}, [applyStep]);
|
|
85
|
+
const handleStepDown = useCallback(() => {
|
|
86
|
+
applyStep(-1);
|
|
87
|
+
}, [applyStep]);
|
|
88
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
89
|
+
className: styles.osdkNumberInputWrapper
|
|
90
|
+
}, /*#__PURE__*/React.createElement(Input, {
|
|
91
|
+
id: id,
|
|
92
|
+
className: styles.osdkNumberInputField,
|
|
93
|
+
type: "text",
|
|
94
|
+
inputMode: "decimal",
|
|
95
|
+
value: displayValue,
|
|
96
|
+
onValueChange: handleValueChange,
|
|
97
|
+
onKeyDown: handleKeyDown,
|
|
98
|
+
placeholder: placeholder
|
|
99
|
+
}), /*#__PURE__*/React.createElement("div", {
|
|
100
|
+
className: styles.osdkNumberInputStepper
|
|
101
|
+
}, /*#__PURE__*/React.createElement(Button, {
|
|
102
|
+
className: styles.osdkNumberInputStepButton,
|
|
103
|
+
"aria-label": "Increment",
|
|
104
|
+
tabIndex: -1,
|
|
105
|
+
onClick: handleStepUp
|
|
106
|
+
}, /*#__PURE__*/React.createElement(ChevronUp, {
|
|
107
|
+
size: CHEVRON_SIZE
|
|
108
|
+
})), /*#__PURE__*/React.createElement(Button, {
|
|
109
|
+
className: styles.osdkNumberInputStepButton,
|
|
110
|
+
"aria-label": "Decrement",
|
|
111
|
+
tabIndex: -1,
|
|
112
|
+
onClick: handleStepDown
|
|
113
|
+
}, /*#__PURE__*/React.createElement(ChevronDown, {
|
|
114
|
+
size: CHEVRON_SIZE
|
|
115
|
+
}))));
|
|
116
|
+
}
|
|
117
|
+
function isValidInput(text) {
|
|
118
|
+
return VALID_NUMERIC_REGEX.test(text);
|
|
119
|
+
}
|
|
120
|
+
function parseNumericValue(text) {
|
|
121
|
+
if (text === "") {
|
|
122
|
+
return null;
|
|
123
|
+
}
|
|
124
|
+
const parsed = Number(text);
|
|
125
|
+
return Number.isNaN(parsed) ? null : parsed;
|
|
126
|
+
}
|
|
127
|
+
function formatNumberForDisplay(value) {
|
|
128
|
+
return value != null ? String(value) : "";
|
|
129
|
+
}
|
|
130
|
+
//# sourceMappingURL=NumberInputField.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"NumberInputField.js","names":["Button","Input","ChevronDown","ChevronUp","React","useCallback","useRef","useState","styles","VALID_NUMERIC_REGEX","DEFAULT_STEP","CHEVRON_SIZE","NumberInputField","id","value","onChange","placeholder","min","_min","max","_max","step","displayValue","setDisplayValue","formatNumberForDisplay","prevValueRef","current","currentParsed","parseNumericValue","handleValueChange","newValue","isValidInput","applyStep","direction","next","formatted","handleKeyDown","e","key","preventDefault","handleStepUp","handleStepDown","createElement","className","osdkNumberInputWrapper","osdkNumberInputField","type","inputMode","onValueChange","onKeyDown","osdkNumberInputStepper","osdkNumberInputStepButton","tabIndex","onClick","size","text","test","parsed","Number","isNaN","String"],"sources":["NumberInputField.tsx"],"sourcesContent":["/*\n * Copyright 2026 Palantir Technologies, Inc. All rights reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { Button } from \"@base-ui/react/button\";\nimport { Input } from \"@base-ui/react/input\";\nimport { ChevronDown, ChevronUp } from \"@blueprintjs/icons\";\nimport React, { useCallback, useRef, useState } from \"react\";\nimport type { NumberInputFieldProps } from \"../FormFieldApi.js\";\nimport styles from \"./NumberInputField.module.css\";\n\n/**\n * Structural regex for valid numeric input.\n *\n * Allows intermediate typing states that will become valid numbers:\n * \"\" — user cleared the field (all groups are optional)\n * \"-\" — user started typing a negative number\n * \".\" — user started typing a decimal like \".5\"\n * \"+\" — user started typing an explicitly positive number\n * \"1.\", \"1e\", \"1e+\" — partial but structurally valid\n *\n * Rejects obviously invalid strings like \"1.2.3\" or \"+-5\".\n */\nconst VALID_NUMERIC_REGEX = /^[+-.]?(\\d+\\.?\\d*|\\d*\\.?\\d+)?([eE][+-]?\\d*)?$/;\n\nconst DEFAULT_STEP = 1;\nconst CHEVRON_SIZE = 12;\n\n// TODO: Add min/max validation so the field can surface\n// out-of-range errors through the form validation system.\nexport function NumberInputField({\n id,\n value,\n onChange,\n placeholder,\n min: _min,\n max: _max,\n step,\n}: NumberInputFieldProps): React.ReactElement {\n const [displayValue, setDisplayValue] = useState<string>(() =>\n formatNumberForDisplay(value)\n );\n\n const prevValueRef = useRef(value);\n\n // Sync external value → internal display string\n if (prevValueRef.current !== value) {\n prevValueRef.current = value;\n const currentParsed = parseNumericValue(displayValue);\n\n if (value !== currentParsed) {\n setDisplayValue(formatNumberForDisplay(value));\n }\n }\n\n const handleValueChange = useCallback(\n (newValue: string) => {\n if (!isValidInput(newValue)) {\n return;\n }\n\n setDisplayValue(newValue);\n onChange?.(parseNumericValue(newValue));\n },\n [onChange],\n );\n\n const applyStep = useCallback(\n (direction: 1 | -1) => {\n const current = parseNumericValue(displayValue) ?? 0;\n const delta = direction * (step ?? DEFAULT_STEP);\n const next = current + delta;\n const formatted = formatNumberForDisplay(next);\n setDisplayValue(formatted);\n onChange?.(next);\n },\n [displayValue, onChange, step],\n );\n\n const handleKeyDown = useCallback(\n (e: React.KeyboardEvent<HTMLInputElement>) => {\n if (e.key !== \"ArrowUp\" && e.key !== \"ArrowDown\") {\n return;\n }\n e.preventDefault();\n applyStep(e.key === \"ArrowUp\" ? 1 : -1);\n },\n [applyStep],\n );\n\n const handleStepUp = useCallback(() => {\n applyStep(1);\n }, [applyStep]);\n\n const handleStepDown = useCallback(() => {\n applyStep(-1);\n }, [applyStep]);\n\n return (\n <div className={styles.osdkNumberInputWrapper}>\n <Input\n id={id}\n className={styles.osdkNumberInputField}\n type=\"text\"\n inputMode=\"decimal\"\n value={displayValue}\n onValueChange={handleValueChange}\n onKeyDown={handleKeyDown}\n placeholder={placeholder}\n />\n <div className={styles.osdkNumberInputStepper}>\n <Button\n className={styles.osdkNumberInputStepButton}\n aria-label=\"Increment\"\n tabIndex={-1}\n onClick={handleStepUp}\n >\n <ChevronUp size={CHEVRON_SIZE} />\n </Button>\n <Button\n className={styles.osdkNumberInputStepButton}\n aria-label=\"Decrement\"\n tabIndex={-1}\n onClick={handleStepDown}\n >\n <ChevronDown size={CHEVRON_SIZE} />\n </Button>\n </div>\n </div>\n );\n}\n\nfunction isValidInput(text: string): boolean {\n return VALID_NUMERIC_REGEX.test(text);\n}\n\nfunction parseNumericValue(text: string): number | null {\n if (text === \"\") {\n return null;\n }\n const parsed = Number(text);\n return Number.isNaN(parsed) ? null : parsed;\n}\n\nfunction formatNumberForDisplay(value: number | null): string {\n return value != null ? String(value) : \"\";\n}\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1,96 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* Copyright 2026 Palantir Technologies, Inc. All rights reserved.
|
|
3
|
+
*
|
|
4
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
5
|
+
* you may not use this file except in compliance with the License.
|
|
6
|
+
* You may obtain a copy of the License at
|
|
7
|
+
*
|
|
8
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
9
|
+
*
|
|
10
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
11
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
12
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
13
|
+
* See the License for the specific language governing permissions and
|
|
14
|
+
* limitations under the License.
|
|
15
|
+
*/
|
|
16
|
+
|
|
17
|
+
.osdkNumberInputWrapper {
|
|
18
|
+
display: flex;
|
|
19
|
+
border-radius: var(--osdk-input-border-radius);
|
|
20
|
+
border: var(--osdk-input-border-width) solid var(--osdk-input-border-color);
|
|
21
|
+
background-color: var(--osdk-input-bg);
|
|
22
|
+
transition:
|
|
23
|
+
background-color var(--osdk-input-transition-duration)
|
|
24
|
+
var(--osdk-input-transition-ease),
|
|
25
|
+
border-color var(--osdk-input-transition-duration)
|
|
26
|
+
var(--osdk-input-transition-ease);
|
|
27
|
+
|
|
28
|
+
&:hover {
|
|
29
|
+
background-color: var(--osdk-input-bg-hover);
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
&:focus-within {
|
|
33
|
+
outline: var(--osdk-input-focus-width) solid var(--osdk-input-focus-color);
|
|
34
|
+
outline-offset: var(--osdk-input-focus-offset);
|
|
35
|
+
border-color: var(--osdk-input-border-color-focus);
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.osdkNumberInputField {
|
|
40
|
+
flex: 1;
|
|
41
|
+
min-width: 0;
|
|
42
|
+
min-height: var(--osdk-input-min-height);
|
|
43
|
+
padding: var(--osdk-input-padding);
|
|
44
|
+
border: none;
|
|
45
|
+
border-radius: var(--osdk-input-border-radius) 0 0
|
|
46
|
+
var(--osdk-input-border-radius);
|
|
47
|
+
background: transparent;
|
|
48
|
+
color: var(--osdk-input-color);
|
|
49
|
+
font-family: var(--osdk-input-font-family);
|
|
50
|
+
font-size: var(--osdk-input-font-size);
|
|
51
|
+
line-height: var(
|
|
52
|
+
--osdk-input-line-height,
|
|
53
|
+
var(--osdk-typography-line-height-default)
|
|
54
|
+
);
|
|
55
|
+
|
|
56
|
+
&::placeholder {
|
|
57
|
+
color: var(--osdk-input-placeholder-color);
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
&:focus-visible {
|
|
61
|
+
outline: none;
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
.osdkNumberInputStepper {
|
|
66
|
+
display: flex;
|
|
67
|
+
flex-direction: column;
|
|
68
|
+
border-left: var(--osdk-input-border-width) solid
|
|
69
|
+
var(--osdk-input-border-color);
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.osdkNumberInputStepButton {
|
|
73
|
+
display: flex;
|
|
74
|
+
align-items: center;
|
|
75
|
+
justify-content: center;
|
|
76
|
+
flex: 1;
|
|
77
|
+
padding: 0 calc(var(--osdk-surface-spacing) * 1.5);
|
|
78
|
+
border: none;
|
|
79
|
+
background: transparent;
|
|
80
|
+
color: var(--osdk-input-color);
|
|
81
|
+
cursor: pointer;
|
|
82
|
+
line-height: 0;
|
|
83
|
+
|
|
84
|
+
&:hover {
|
|
85
|
+
background-color: var(--osdk-input-bg-hover);
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
&:active {
|
|
89
|
+
background-color: var(--osdk-input-border-color);
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
& + & {
|
|
93
|
+
border-top: var(--osdk-input-border-width) solid
|
|
94
|
+
var(--osdk-input-border-color);
|
|
95
|
+
}
|
|
96
|
+
}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
// CSS Module proxy for NumberInputField.module.css
|
|
2
|
+
const styles = {
|
|
3
|
+
"osdkNumberInputWrapper": "NumberInputField-module__osdkNumberInputWrapper___PBHjZuTx",
|
|
4
|
+
"osdkNumberInputField": "NumberInputField-module__osdkNumberInputField___OM0FqPcU",
|
|
5
|
+
"osdkNumberInputStepper": "NumberInputField-module__osdkNumberInputStepper___b-Wz8qtc",
|
|
6
|
+
"osdkNumberInputStepButton": "NumberInputField-module__osdkNumberInputStepButton___QtDrvQJL"
|
|
7
|
+
};
|
|
8
|
+
|
|
9
|
+
export default styles;
|
|
@@ -16,23 +16,27 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
|
|
|
16
16
|
*/
|
|
17
17
|
|
|
18
18
|
import { Checkbox as BaseUICheckbox } from "@base-ui/react/checkbox";
|
|
19
|
-
import { Minus, Tick } from "@blueprintjs/icons";
|
|
19
|
+
import { Cross, Minus, Tick } from "@blueprintjs/icons";
|
|
20
20
|
import classnames from "classnames";
|
|
21
21
|
import React from "react";
|
|
22
22
|
import styles from "./Checkbox.module.css.js";
|
|
23
23
|
export function Checkbox({
|
|
24
24
|
indeterminate,
|
|
25
25
|
className,
|
|
26
|
+
isExcluding,
|
|
26
27
|
indicatorProps,
|
|
27
28
|
...rest
|
|
28
29
|
}) {
|
|
29
30
|
return /*#__PURE__*/React.createElement(BaseUICheckbox.Root, _extends({
|
|
30
31
|
className: classnames(styles.osdkCheckboxRoot, className),
|
|
31
|
-
indeterminate: indeterminate
|
|
32
|
+
indeterminate: indeterminate,
|
|
33
|
+
"data-excluding": isExcluding || undefined
|
|
32
34
|
}, rest), /*#__PURE__*/React.createElement(BaseUICheckbox.Indicator, _extends({}, indicatorProps, {
|
|
33
35
|
className: classnames(styles.osdkCheckboxIndicator, indicatorProps?.className)
|
|
34
36
|
}), indeterminate ? /*#__PURE__*/React.createElement(Minus, {
|
|
35
37
|
size: 16
|
|
38
|
+
}) : isExcluding ? /*#__PURE__*/React.createElement(Cross, {
|
|
39
|
+
size: 16
|
|
36
40
|
}) : /*#__PURE__*/React.createElement(Tick, {
|
|
37
41
|
size: 16
|
|
38
42
|
})));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.js","names":["Checkbox","BaseUICheckbox","Minus","Tick","classnames","React","styles","indeterminate","className","indicatorProps","rest","createElement","Root","_extends","osdkCheckboxRoot","Indicator","osdkCheckboxIndicator","size"],"sources":["Checkbox.tsx"],"sourcesContent":["/*\n * Copyright 2025 Palantir Technologies, Inc. All rights reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport {\n Checkbox as BaseUICheckbox,\n type CheckboxIndicatorProps,\n type CheckboxRootProps,\n} from \"@base-ui/react/checkbox\";\nimport { Minus, Tick } from \"@blueprintjs/icons\";\nimport classnames from \"classnames\";\nimport React from \"react\";\nimport styles from \"./Checkbox.module.css\";\n\ninterface CheckboxProps extends Omit<CheckboxRootProps, \"className\"> {\n className?: string;\n indicatorProps?: Omit<CheckboxIndicatorProps, \"className\"> & {\n className?: string;\n };\n}\n\nexport function Checkbox(\n {\n indeterminate,\n className,\n indicatorProps,\n ...rest\n }: CheckboxProps,\n): React.ReactElement {\n return (\n <BaseUICheckbox.Root\n className={classnames(styles.osdkCheckboxRoot, className)}\n indeterminate={indeterminate}\n {...rest}\n >\n <BaseUICheckbox.Indicator\n {...indicatorProps}\n className={classnames(\n styles.osdkCheckboxIndicator,\n indicatorProps?.className,\n )}\n >\n {/* Color is used as the \"fill\" attribute on the svg */}\n {indeterminate\n ?
|
|
1
|
+
{"version":3,"file":"Checkbox.js","names":["Checkbox","BaseUICheckbox","Cross","Minus","Tick","classnames","React","styles","indeterminate","className","isExcluding","indicatorProps","rest","createElement","Root","_extends","osdkCheckboxRoot","undefined","Indicator","osdkCheckboxIndicator","size"],"sources":["Checkbox.tsx"],"sourcesContent":["/*\n * Copyright 2025 Palantir Technologies, Inc. All rights reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport {\n Checkbox as BaseUICheckbox,\n type CheckboxIndicatorProps,\n type CheckboxRootProps,\n} from \"@base-ui/react/checkbox\";\nimport { Cross, Minus, Tick } from \"@blueprintjs/icons\";\nimport classnames from \"classnames\";\nimport React from \"react\";\nimport styles from \"./Checkbox.module.css\";\n\ninterface CheckboxProps extends Omit<CheckboxRootProps, \"className\"> {\n className?: string;\n isExcluding?: boolean;\n indicatorProps?: Omit<CheckboxIndicatorProps, \"className\"> & {\n className?: string;\n };\n}\n\nexport function Checkbox(\n {\n indeterminate,\n className,\n isExcluding,\n indicatorProps,\n ...rest\n }: CheckboxProps,\n): React.ReactElement {\n return (\n <BaseUICheckbox.Root\n className={classnames(styles.osdkCheckboxRoot, className)}\n indeterminate={indeterminate}\n data-excluding={isExcluding || undefined}\n {...rest}\n >\n <BaseUICheckbox.Indicator\n {...indicatorProps}\n className={classnames(\n styles.osdkCheckboxIndicator,\n indicatorProps?.className,\n )}\n >\n {/* Color is used as the \"fill\" attribute on the svg */}\n {indeterminate\n ? <Minus size={16} />\n : isExcluding\n ? <Cross size={16} />\n : <Tick size={16} />}\n </BaseUICheckbox.Indicator>\n </BaseUICheckbox.Root>\n );\n}\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SACEA,QAAQ,IAAIC,cAAc,QAGrB,yBAAyB;AAChC,SAASC,KAAK,EAAEC,KAAK,EAAEC,IAAI,QAAQ,oBAAoB;AACvD,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,KAAK,MAAM,OAAO;AACzB,OAAOC,MAAM,MAAM,uBAAuB;AAU1C,OAAO,SAASP,QAAQA,CACtB;EACEQ,aAAa;EACbC,SAAS;EACTC,WAAW;EACXC,cAAc;EACd,GAAGC;AACU,CAAC,EACI;EACpB,oBACEN,KAAA,CAAAO,aAAA,CAACZ,cAAc,CAACa,IAAI,EAAAC,QAAA;IAClBN,SAAS,EAAEJ,UAAU,CAACE,MAAM,CAACS,gBAAgB,EAAEP,SAAS,CAAE;IAC1DD,aAAa,EAAEA,aAAc;IAC7B,kBAAgBE,WAAW,IAAIO;EAAU,GACrCL,IAAI,gBAERN,KAAA,CAAAO,aAAA,CAACZ,cAAc,CAACiB,SAAS,EAAAH,QAAA,KACnBJ,cAAc;IAClBF,SAAS,EAAEJ,UAAU,CACnBE,MAAM,CAACY,qBAAqB,EAC5BR,cAAc,EAAEF,SAClB;EAAE,IAGDD,aAAa,gBACVF,KAAA,CAAAO,aAAA,CAACV,KAAK;IAACiB,IAAI,EAAE;EAAG,CAAE,CAAC,GACnBV,WAAW,gBACXJ,KAAA,CAAAO,aAAA,CAACX,KAAK;IAACkB,IAAI,EAAE;EAAG,CAAE,CAAC,gBACnBd,KAAA,CAAAO,aAAA,CAACT,IAAI;IAACgB,IAAI,EAAE;EAAG,CAAE,CACG,CACP,CAAC;AAE1B","ignoreList":[]}
|
|
@@ -18,12 +18,13 @@
|
|
|
18
18
|
display: flex;
|
|
19
19
|
align-items: center;
|
|
20
20
|
justify-content: center;
|
|
21
|
-
|
|
21
|
+
width: calc(
|
|
22
22
|
var(--osdk-checkbox-icon-size) + var(--osdk-checkbox-padding) * 2
|
|
23
23
|
);
|
|
24
|
-
|
|
24
|
+
height: calc(
|
|
25
25
|
var(--osdk-checkbox-icon-size) + var(--osdk-checkbox-padding) * 2
|
|
26
26
|
);
|
|
27
|
+
flex-shrink: 0;
|
|
27
28
|
padding: var(--osdk-checkbox-padding);
|
|
28
29
|
cursor: pointer;
|
|
29
30
|
border-radius: var(--osdk-surface-border-radius);
|
|
@@ -54,6 +55,18 @@
|
|
|
54
55
|
}
|
|
55
56
|
}
|
|
56
57
|
|
|
58
|
+
&[data-excluding][data-checked] {
|
|
59
|
+
background-color: var(--osdk-checkbox-bg-checked);
|
|
60
|
+
|
|
61
|
+
&:hover {
|
|
62
|
+
background-color: var(--osdk-checkbox-bg-checked-hover);
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
&:active {
|
|
66
|
+
background-color: var(--osdk-checkbox-bg-checked-active);
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
|
|
57
70
|
&:focus-visible {
|
|
58
71
|
outline: var(--osdk-focus-outline);
|
|
59
72
|
outline-offset: calc(-1 * var(--osdk-focus-visible-outline-offset));
|
|
@@ -16,7 +16,7 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
|
|
|
16
16
|
*/
|
|
17
17
|
|
|
18
18
|
import { Combobox as BaseUICombobox } from "@base-ui/react/combobox";
|
|
19
|
-
import { Cross, Search } from "@blueprintjs/icons";
|
|
19
|
+
import { Cross, Search, Tick } from "@blueprintjs/icons";
|
|
20
20
|
import classnames from "classnames";
|
|
21
21
|
import React from "react";
|
|
22
22
|
import styles from "./Combobox.module.css.js";
|
|
@@ -122,6 +122,18 @@ function ComboboxList({
|
|
|
122
122
|
className: classnames(styles.osdkComboboxList, className)
|
|
123
123
|
}, rest), children);
|
|
124
124
|
}
|
|
125
|
+
function ComboboxItemIndicator({
|
|
126
|
+
className,
|
|
127
|
+
children,
|
|
128
|
+
...rest
|
|
129
|
+
}) {
|
|
130
|
+
return /*#__PURE__*/React.createElement(BaseUICombobox.ItemIndicator, _extends({
|
|
131
|
+
className: classnames(styles.osdkComboboxItemIndicator, className),
|
|
132
|
+
keepMounted: true
|
|
133
|
+
}, rest), children ?? /*#__PURE__*/React.createElement(Tick, {
|
|
134
|
+
size: 16
|
|
135
|
+
}));
|
|
136
|
+
}
|
|
125
137
|
export const Combobox = {
|
|
126
138
|
Root: BaseUICombobox.Root,
|
|
127
139
|
SearchInput: ComboboxSearchInput,
|
|
@@ -131,6 +143,7 @@ export const Combobox = {
|
|
|
131
143
|
Popup: ComboboxPopup,
|
|
132
144
|
List: ComboboxList,
|
|
133
145
|
Item: ComboboxItem,
|
|
146
|
+
ItemIndicator: ComboboxItemIndicator,
|
|
134
147
|
Chips: ComboboxChips,
|
|
135
148
|
Chip: ComboboxChip,
|
|
136
149
|
ChipRemove: ComboboxChipRemove,
|