@alixpartners/ui-components 2.3.0 → 2.3.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +99 -99
- package/dist/assets/Creatable.css +1 -1
- package/dist/assets/FilePicker.css +1 -1
- package/dist/components/FilePicker/FilePicker.d.ts +82 -21
- package/dist/components/FilePicker/FilePicker.js +234 -145
- package/dist/components/FilePicker/FilePicker.test.js +153 -6
- package/dist/main.d.ts +2 -2
- package/dist/main.js +42 -41
- package/dist/web.config +8 -8
- package/package.json +87 -87
package/README.md
CHANGED
|
@@ -1,99 +1,99 @@
|
|
|
1
|
-
# AlixPartners UI Component Library
|
|
2
|
-
|
|
3
|
-
A modern, reusable component library built with **[ReactJS](https://react.dev/)**.
|
|
4
|
-
|
|
5
|
-
Version **2.0** has been **rebuilt from the ground up** to align with the latest **AlixPartners Design System** and deliver improved developer experience, accessibility, and performance.
|
|
6
|
-
|
|
7
|
-
‼️ **BETA Notice**: This release is **not yet production-ready**. While stable for development and testing, expect ongoing refinements, new components, and breaking changes before the full release.
|
|
8
|
-
|
|
9
|
-
## ✨ What’s New in 2.0
|
|
10
|
-
|
|
11
|
-
- Completely redesigned architecture with modern build tooling ([Vite](https://vitejs.dev/))
|
|
12
|
-
- Updated design tokens and styles aligned with AlixPartners Design System
|
|
13
|
-
- Improved accessibility (a11y) and semantic HTML usage
|
|
14
|
-
- Streamlined props API for cleaner integration
|
|
15
|
-
- Enhanced Storybook documentation
|
|
16
|
-
- Faster build & development workflows
|
|
17
|
-
|
|
18
|
-
### Version Support
|
|
19
|
-
|
|
20
|
-
- v2.x — Active development (BETA)
|
|
21
|
-
- v1.x — Maintained for legacy projects (no new features, critical fixes only)
|
|
22
|
-
|
|
23
|
-
---
|
|
24
|
-
|
|
25
|
-
## 🚀 Installation
|
|
26
|
-
|
|
27
|
-
```bash
|
|
28
|
-
npm install @alixpartners/ui-components
|
|
29
|
-
```
|
|
30
|
-
|
|
31
|
-
## 🔧 Usage
|
|
32
|
-
|
|
33
|
-
```tsx
|
|
34
|
-
import { YourComponent } from '@alixpartners/ui-components'
|
|
35
|
-
|
|
36
|
-
function App() {
|
|
37
|
-
return <YourComponent />
|
|
38
|
-
}
|
|
39
|
-
```
|
|
40
|
-
|
|
41
|
-
## 🧱 Components
|
|
42
|
-
|
|
43
|
-
Explore all available components and documentation in Storybook.
|
|
44
|
-
|
|
45
|
-
To run it locally:
|
|
46
|
-
|
|
47
|
-
```bash
|
|
48
|
-
npm run storybook
|
|
49
|
-
```
|
|
50
|
-
|
|
51
|
-
---
|
|
52
|
-
|
|
53
|
-
## 📦 Build
|
|
54
|
-
|
|
55
|
-
To bundle the library for publishing:
|
|
56
|
-
|
|
57
|
-
```bash
|
|
58
|
-
npm run build
|
|
59
|
-
```
|
|
60
|
-
|
|
61
|
-
The output will be in the `dist/` directory.
|
|
62
|
-
|
|
63
|
-
### Usage in projects while developing
|
|
64
|
-
|
|
65
|
-
When working on the library and testing it in another project:
|
|
66
|
-
|
|
67
|
-
```bash
|
|
68
|
-
# In the component library root:
|
|
69
|
-
npm link
|
|
70
|
-
|
|
71
|
-
# In the consuming project's root:
|
|
72
|
-
npm link alix-partners-react-components-test
|
|
73
|
-
```
|
|
74
|
-
|
|
75
|
-
Then import components using the `alix-partners-react-components-test` import.
|
|
76
|
-
|
|
77
|
-
## 🧪 Testing
|
|
78
|
-
|
|
79
|
-
```bash
|
|
80
|
-
npm run test
|
|
81
|
-
```
|
|
82
|
-
|
|
83
|
-
#### 🧪 Test Coverage
|
|
84
|
-
|
|
85
|
-
```bash
|
|
86
|
-
npm run coverage
|
|
87
|
-
```
|
|
88
|
-
|
|
89
|
-
## 📚 Publish
|
|
90
|
-
|
|
91
|
-
To publish to npm:
|
|
92
|
-
|
|
93
|
-
1. Bump the version in `package.json`
|
|
94
|
-
2. Create a pull request in Azure DevOps to the `main` branch
|
|
95
|
-
3. This will automatically publish the library to `npm` once approved
|
|
96
|
-
|
|
97
|
-
## 🤝 Contributing
|
|
98
|
-
|
|
99
|
-
The **AlixPartners UI Component Library** is a collaborative, community-driven project where contributions from all team members are encouraged and valued. If you’d like to add new components or improve existing ones, please see the CONTRIBUTING.md file.
|
|
1
|
+
# AlixPartners UI Component Library
|
|
2
|
+
|
|
3
|
+
A modern, reusable component library built with **[ReactJS](https://react.dev/)**.
|
|
4
|
+
|
|
5
|
+
Version **2.0** has been **rebuilt from the ground up** to align with the latest **AlixPartners Design System** and deliver improved developer experience, accessibility, and performance.
|
|
6
|
+
|
|
7
|
+
‼️ **BETA Notice**: This release is **not yet production-ready**. While stable for development and testing, expect ongoing refinements, new components, and breaking changes before the full release.
|
|
8
|
+
|
|
9
|
+
## ✨ What’s New in 2.0
|
|
10
|
+
|
|
11
|
+
- Completely redesigned architecture with modern build tooling ([Vite](https://vitejs.dev/))
|
|
12
|
+
- Updated design tokens and styles aligned with AlixPartners Design System
|
|
13
|
+
- Improved accessibility (a11y) and semantic HTML usage
|
|
14
|
+
- Streamlined props API for cleaner integration
|
|
15
|
+
- Enhanced Storybook documentation
|
|
16
|
+
- Faster build & development workflows
|
|
17
|
+
|
|
18
|
+
### Version Support
|
|
19
|
+
|
|
20
|
+
- v2.x — Active development (BETA)
|
|
21
|
+
- v1.x — Maintained for legacy projects (no new features, critical fixes only)
|
|
22
|
+
|
|
23
|
+
---
|
|
24
|
+
|
|
25
|
+
## 🚀 Installation
|
|
26
|
+
|
|
27
|
+
```bash
|
|
28
|
+
npm install @alixpartners/ui-components
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
## 🔧 Usage
|
|
32
|
+
|
|
33
|
+
```tsx
|
|
34
|
+
import { YourComponent } from '@alixpartners/ui-components'
|
|
35
|
+
|
|
36
|
+
function App() {
|
|
37
|
+
return <YourComponent />
|
|
38
|
+
}
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
## 🧱 Components
|
|
42
|
+
|
|
43
|
+
Explore all available components and documentation in Storybook.
|
|
44
|
+
|
|
45
|
+
To run it locally:
|
|
46
|
+
|
|
47
|
+
```bash
|
|
48
|
+
npm run storybook
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
---
|
|
52
|
+
|
|
53
|
+
## 📦 Build
|
|
54
|
+
|
|
55
|
+
To bundle the library for publishing:
|
|
56
|
+
|
|
57
|
+
```bash
|
|
58
|
+
npm run build
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
The output will be in the `dist/` directory.
|
|
62
|
+
|
|
63
|
+
### Usage in projects while developing
|
|
64
|
+
|
|
65
|
+
When working on the library and testing it in another project:
|
|
66
|
+
|
|
67
|
+
```bash
|
|
68
|
+
# In the component library root:
|
|
69
|
+
npm link
|
|
70
|
+
|
|
71
|
+
# In the consuming project's root:
|
|
72
|
+
npm link alix-partners-react-components-test
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
Then import components using the `alix-partners-react-components-test` import.
|
|
76
|
+
|
|
77
|
+
## 🧪 Testing
|
|
78
|
+
|
|
79
|
+
```bash
|
|
80
|
+
npm run test
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
#### 🧪 Test Coverage
|
|
84
|
+
|
|
85
|
+
```bash
|
|
86
|
+
npm run coverage
|
|
87
|
+
```
|
|
88
|
+
|
|
89
|
+
## 📚 Publish
|
|
90
|
+
|
|
91
|
+
To publish to npm:
|
|
92
|
+
|
|
93
|
+
1. Bump the version in `package.json`
|
|
94
|
+
2. Create a pull request in Azure DevOps to the `main` branch
|
|
95
|
+
3. This will automatically publish the library to `npm` once approved
|
|
96
|
+
|
|
97
|
+
## 🤝 Contributing
|
|
98
|
+
|
|
99
|
+
The **AlixPartners UI Component Library** is a collaborative, community-driven project where contributions from all team members are encouraged and valued. If you’d like to add new components or improve existing ones, please see the CONTRIBUTING.md file.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.Creatable-module__dropdownContainer___y0ptC{display:flex;flex-direction:column;gap:4px;width:100%;min-width:0;position:relative;gap:6px}.Creatable-module__dropdownLabel___RyuSY{font-size:14px;font-weight:500;color:#4a4a4a;line-height:1.2;display:flex;align-items:center;gap:4px}.Creatable-module__dropdownLabel___RyuSY .Creatable-module__label-text___jlV2x{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.Creatable-module__dropdownLabel___RyuSY.Creatable-module__dropdownLabelDisabled___nhYc0{pointer-events:none;color:#b2b2b2}.Creatable-module__dropdownLabel___RyuSY.Creatable-module__dropdownLabelDisabled___nhYc0 .Creatable-module__label-tooltip-icon___G7Bou{color:#ccc}.Creatable-module__required___g26DB{color:#cb282e;font-weight:600}.Creatable-module__label-tooltip-icon___G7Bou{color:#4a4a4a;font-size:16px;cursor:pointer}.Creatable-module__dropdownWrapper___wu-B3{position:relative;width:100%;min-width:0}.Creatable-module__dropdown-menu-trigger___se8sO{display:inline-block;width:100%}.Creatable-module__dropdownTrigger___6yi8Y{width:100%;height:32px;padding:6px 8px;background-color:#fff;border:1px solid #cccccc;border-radius:4px;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:240px;box-sizing:border-box}.Creatable-module__dropdownTrigger___6yi8Y:hover:not(.Creatable-module__dropdownTriggerDisabled___T9yC0){border-color:#5cb335}.Creatable-module__dropdownTrigger___6yi8Y:focus{outline:none;border-color:#5cb335}.Creatable-module__dropdownTrigger___6yi8Y.Creatable-module__dropdownTriggerOpen___acLIm{border-color:#5cb335;border-radius:4px}.Creatable-module__dropdownTrigger___6yi8Y.Creatable-module__dropdownTriggerDisabled___T9yC0{background-color:#f5f5f5;border-color:#ccc;cursor:not-allowed}.Creatable-module__dropdownTrigger___6yi8Y.Creatable-module__dropdownTriggerError___Kx1v-{border-color:#bf494e}.Creatable-module__selectedItemsCreatable___P0mME{display:flex;align-items:center;gap:4px;flex:1;min-width:0}.Creatable-module__selectedItemsCreatable___P0mME .Creatable-module__selectedItem___0LADh{border-radius:240px;height:20px;padding:0 5px 0 9px;max-width:120px}.Creatable-module__selectedItemsCreatable___P0mME .Creatable-module__selectedItem___0LADh .Creatable-module__selectedItemLabel___m0LSV{color:#3f7b25}.Creatable-module__selectedItemsCreatable___P0mME .Creatable-module__selectedItem___0LADh .Creatable-module__removeButton___tjxwh{border:none;background:none;cursor:pointer;padding:0;margin:0;display:flex;align-items:center}.Creatable-module__selectedItemsCreatable___P0mME .Creatable-module__selectedItem___0LADh .Creatable-module__removeIcon___KQKbD{font-size:12px;height:12px;width:12px;color:#727272}.Creatable-module__selectedItemsCreatable___P0mME .Creatable-module__singleSelectedCreatableItem___tanxX{display:flex;justify-content:space-between;align-items:center;flex:1;min-width:0;border-right:solid 1px #cccccc;padding-right:3px}.Creatable-module__selectedItemsCreatable___P0mME .Creatable-module__singleSelectedCreatableItem___tanxX .Creatable-module__selectedItemLabel___m0LSV{color:#28292c;font-size:14px}.Creatable-module__singleSelectedCreatableItemRemoveButton___Qi9Si{transform:rotate(45deg)}.Creatable-module__selectedItem___0LADh{display:inline-flex;align-items:center;gap:4px;padding:2px 6px;background-color:#dff0db;border:1px solid #dff0db;border-radius:12px;font-size:12px;color:#4a4a4a;max-width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.Creatable-module__selectedItemLabel___m0LSV{display:inline-block;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.Creatable-module__selectedOptionLabel___nzo1b{color:#28292c;font-size:14px}.Creatable-module__placeholder___cH4oH{color:#878787;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.Creatable-module__dropdownActions___FmHZe{display:flex;align-items:center;gap:4px;flex-shrink:0}.Creatable-module__dropdownArrow___SJmKg{color:#4a4a4a;font-size:16px!important;transition:transform .2s ease}.Creatable-module__dropdownArrow___SJmKg.Creatable-module__dropdownArrowOpen___T3E0S{transform:rotate(180deg)}.Creatable-module__dropdownMenu___HEhC3{background-color:#fff;border:1px solid #cccccc;border-radius:4px;z-index:1000;max-height:300px;overflow:hidden;display:flex;flex-direction:column;width:100%;max-width:640px;min-width:80x;box-sizing:border-box;box-shadow:0 0 4px #00000029}.Creatable-module__dropdown-container-grouped___gZle- .Creatable-module__dropdownMenu___HEhC3{min-width:212px}.Creatable-module__dropdown-container-multi-select___1U1U4 .Creatable-module__dropdownMenu___HEhC3{min-width:224px}.Creatable-module__dropdownMenuToolbar___Hqezv{display:flex;flex-direction:column;gap:16px;padding:8px 12px;border-bottom:1px solid #cccccc}.Creatable-module__searchContainer___zaiNa{position:relative;display:flex;align-items:center;gap:16px}.Creatable-module__searchContainer___zaiNa .Creatable-module__search___dphw1{flex:1}.Creatable-module__dropdownCreatableSearchContainer___AgXA3{box-sizing:border-box;width:100%;min-width:0;display:flex;align-items:center;flex-wrap:wrap;gap:4px;background:#fff;border:1px solid #cccccc;border-radius:4px;height:32px;padding:0 8px}.Creatable-module__dropdownCreatableSearchContainer___AgXA3:focus{border-color:#5cb335;outline:none}.Creatable-module__dropdownCreatableSearchContainer___AgXA3:focus-within{border-color:#5cb335}.Creatable-module__dropdownCreatableSearchContainer___AgXA3.Creatable-module__disabled___ZIdus{cursor:not-allowed;opacity:.6}.Creatable-module__dropdownCreatableError___FYVla{border-color:#bf494e}.Creatable-module__creatableInput___KaKxv{flex:1 1 120px;min-width:80px;border:none;outline:none;background:transparent;height:20px;padding:6px 0;color:#28292c;font-size:14px}.Creatable-module__creatableInput___KaKxv::placeholder{color:#878787}.Creatable-module__creatableInput___KaKxv:disabled{color:#b2b2b2}.Creatable-module__searchInput___03a1-{width:100%;padding:8px 32px 8px 12px;border:1px solid #cccccc;border-radius:4px;font-size:14px;color:#28292c;background-color:#fff}.Creatable-module__searchInput___03a1-:focus{outline:none;border-color:#5cb335}.Creatable-module__searchInput___03a1-::placeholder{color:#878787}.Creatable-module__searchIcon___TA3Y3{position:absolute;right:20px;top:50%;transform:translateY(-50%);color:#4a4a4a;font-size:16px;pointer-events:none}.Creatable-module__optionsList___VZgJf{padding:8px;flex:1;overflow-y:auto;max-height:200px}.Creatable-module__categoryGroup___g8f-g{display:flex;flex-direction:column}.Creatable-module__optionsList___VZgJf .Creatable-module__categoryGroup___g8f-g:first-child .Creatable-module__categoryDivider___QUgR9{border-top:none}.Creatable-module__categoryDivider___QUgR9{padding:8px;border-top:1px solid #cccccc;background-color:#fff;display:flex;align-items:center}.Creatable-module__categoryLabel___YhGp9{font-size:12px;font-weight:600;color:#727272;text-transform:uppercase;letter-spacing:.5px}.Creatable-module__optionItem___Ys808{width:100%;padding:8px;border:none;background:none;cursor:pointer;display:flex;align-items:center;text-align:left;font-size:14px;color:#4a4a4a;min-height:32px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:4px;box-sizing:border-box}.Creatable-module__optionItem___Ys808:hover:not(.Creatable-module__optionItemDisabled___jvfGz){background-color:#dff0db}.Creatable-module__optionItem___Ys808:focus{outline:none}.Creatable-module__optionItem___Ys808.Creatable-module__optionItemDisabled___jvfGz{color:#b2b2b2;cursor:not-allowed;opacity:.6}.Creatable-module__optionItem___Ys808.Creatable-module__optionItemFocused___OfIQd{background-color:#dff0db}.Creatable-module__optionContent___9RCsJ{display:flex;align-items:center;justify-content:space-between;width:100%}.Creatable-module__optionLabel___FJfM1{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:Roboto,sans-serif!important}.Creatable-module__tickIcon___VjpDN{color:inherit;font-size:14px;flex-shrink:0;margin-left:8px}.Creatable-module__creatableIcon___MQ0Ak{color:inherit;font-size:14px;flex-shrink:0;margin-right:8px}.Creatable-module__noOptions___H8Kbu{padding:8px;text-align:center;color:#878787;font-size:14px;font-style:italic}.Creatable-module__maxItemsWarning___-qcUr{padding:8px;border-top:1px solid #cccccc;background-color:#f8f9fa;font-size:12px;color:#727272;text-align:center}.Creatable-module__helpers___GmPY4{height:14px;display:flex;justify-content:space-between;align-items:center;gap:6px;min-width:0}.Creatable-module__helpText___89mXU{font-size:12px;color:#727272;line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.Creatable-module__helpTextDisabled___shU6E{color:#b2b2b2}.Creatable-module__helpLink___IdU0g{color:#0369a3;font-size:12px;font-weight:500;line-height:1;text-decoration:none;flex-shrink:0}.Creatable-module__helpLink___IdU0g:hover{text-decoration:underline}.Creatable-module__helpLinkDisabled___B8rpy{color:#878787}.Creatable-module__errorMessage___HRKr5{font-size:12px;color:#bf494e;line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.Creatable-module__optionsList___VZgJf::-webkit-scrollbar{width:4px}.Creatable-module__optionsList___VZgJf::-webkit-scrollbar-track{background:transparent}.Creatable-module__optionsList___VZgJf::-webkit-scrollbar-thumb{background-color:#ccc;border-radius:240px}.Creatable-module__optionsList___VZgJf::-webkit-scrollbar-thumb:hover{background-color:#878787}.Creatable-module__optionsList___VZgJf::-webkit-scrollbar-thumb:active{background-color:#4a4a4a}.Creatable-module__selectAllContainer___l9hbm{display:flex;gap:16px;background-color:#fff;justify-content:space-between;align-items:center;padding-bottom:8px}.Creatable-module__searchContainer___zaiNa:has(+.Creatable-module__selectAllContainer___l9hbm){border-bottom:none}.Creatable-module__actionButtons___tlqG9{display:flex;justify-content:space-between;gap:8px;padding:12px;border-top:1px solid #cccccc;background-color:#fff}
|
|
1
|
+
.Creatable-module__dropdownContainer___y0ptC{display:flex;flex-direction:column;gap:4px;width:100%;min-width:0;position:relative;gap:6px}.Creatable-module__dropdownLabel___RyuSY{font-size:14px;font-weight:500;color:#4a4a4a;line-height:1.2;display:flex;align-items:center;gap:4px}.Creatable-module__dropdownLabel___RyuSY .Creatable-module__label-text___jlV2x{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.Creatable-module__dropdownLabel___RyuSY.Creatable-module__dropdownLabelDisabled___nhYc0{pointer-events:none;color:#b2b2b2}.Creatable-module__dropdownLabel___RyuSY.Creatable-module__dropdownLabelDisabled___nhYc0 .Creatable-module__label-tooltip-icon___G7Bou{color:#ccc}.Creatable-module__required___g26DB{color:#cb282e;font-weight:600}.Creatable-module__label-tooltip-icon___G7Bou{color:#4a4a4a;font-size:16px;cursor:pointer}.Creatable-module__dropdownWrapper___wu-B3{position:relative;width:100%;min-width:0}.Creatable-module__dropdown-menu-trigger___se8sO{display:inline-block;width:100%}.Creatable-module__dropdownTrigger___6yi8Y{width:100%;height:32px;padding:6px 8px;background-color:#fff;border:1px solid #cccccc;border-radius:4px;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:240px;box-sizing:border-box}.Creatable-module__dropdownTrigger___6yi8Y:hover:not(.Creatable-module__dropdownTriggerDisabled___T9yC0){border-color:#5cb335}.Creatable-module__dropdownTrigger___6yi8Y:focus{outline:none;border-color:#5cb335}.Creatable-module__dropdownTrigger___6yi8Y.Creatable-module__dropdownTriggerOpen___acLIm{border-color:#5cb335;border-radius:4px}.Creatable-module__dropdownTrigger___6yi8Y.Creatable-module__dropdownTriggerDisabled___T9yC0{background-color:#f5f5f5;border-color:#ccc;cursor:not-allowed}.Creatable-module__dropdownTrigger___6yi8Y.Creatable-module__dropdownTriggerError___Kx1v-{border-color:#bf494e}.Creatable-module__selectedItemsCreatable___P0mME{display:flex;align-items:center;gap:4px;flex:1;min-width:0}.Creatable-module__selectedItemsCreatable___P0mME .Creatable-module__selectedItem___0LADh{border-radius:240px;height:20px;padding:0 5px 0 9px;max-width:120px}.Creatable-module__selectedItemsCreatable___P0mME .Creatable-module__selectedItem___0LADh .Creatable-module__selectedItemLabel___m0LSV{color:#3f7b25}.Creatable-module__selectedItemsCreatable___P0mME .Creatable-module__selectedItem___0LADh .Creatable-module__removeButton___tjxwh{border:none;background:none;cursor:pointer;padding:0;margin:0;display:flex;align-items:center}.Creatable-module__selectedItemsCreatable___P0mME .Creatable-module__selectedItem___0LADh .Creatable-module__removeIcon___KQKbD{font-size:12px;height:12px;width:12px;color:#727272}.Creatable-module__selectedItemsCreatable___P0mME .Creatable-module__singleSelectedCreatableItem___tanxX{display:flex;justify-content:space-between;align-items:center;flex:1;min-width:0;border-right:solid 1px #cccccc;padding-right:3px}.Creatable-module__selectedItemsCreatable___P0mME .Creatable-module__singleSelectedCreatableItem___tanxX .Creatable-module__selectedItemLabel___m0LSV{color:#28292c;font-size:14px}.Creatable-module__singleSelectedCreatableItemRemoveButton___Qi9Si{transform:rotate(45deg)}.Creatable-module__selectedItem___0LADh{display:inline-flex;align-items:center;gap:4px;padding:2px 6px;background-color:#dff0db;border:1px solid #dff0db;border-radius:12px;font-size:12px;color:#4a4a4a;max-width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.Creatable-module__selectedItemLabel___m0LSV{min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1}.Creatable-module__selectedOptionLabel___nzo1b{color:#28292c;font-size:14px}.Creatable-module__placeholder___cH4oH{color:#878787;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.Creatable-module__dropdownActions___FmHZe{display:flex;align-items:center;gap:4px;flex-shrink:0}.Creatable-module__dropdownArrow___SJmKg{color:#4a4a4a;font-size:16px!important;transition:transform .2s ease}.Creatable-module__dropdownArrow___SJmKg.Creatable-module__dropdownArrowOpen___T3E0S{transform:rotate(180deg)}.Creatable-module__dropdownMenu___HEhC3{background-color:#fff;border:1px solid #cccccc;border-radius:4px;z-index:1000;max-height:300px;overflow:hidden;display:flex;flex-direction:column;width:100%;max-width:640px;min-width:80x;box-sizing:border-box;box-shadow:0 0 4px #00000029}.Creatable-module__dropdown-container-grouped___gZle- .Creatable-module__dropdownMenu___HEhC3{min-width:212px}.Creatable-module__dropdown-container-multi-select___1U1U4 .Creatable-module__dropdownMenu___HEhC3{min-width:224px}.Creatable-module__dropdownMenuToolbar___Hqezv{display:flex;flex-direction:column;gap:16px;padding:8px 12px;border-bottom:1px solid #cccccc}.Creatable-module__searchContainer___zaiNa{position:relative;display:flex;align-items:center;gap:16px}.Creatable-module__searchContainer___zaiNa .Creatable-module__search___dphw1{flex:1}.Creatable-module__dropdownCreatableSearchContainer___AgXA3{box-sizing:border-box;width:100%;min-width:0;display:flex;align-items:center;flex-wrap:wrap;gap:4px;background:#fff;border:1px solid #cccccc;border-radius:4px;height:32px;padding:0 8px}.Creatable-module__dropdownCreatableSearchContainer___AgXA3:focus{border-color:#5cb335;outline:none}.Creatable-module__dropdownCreatableSearchContainer___AgXA3:focus-within{border-color:#5cb335}.Creatable-module__dropdownCreatableSearchContainer___AgXA3.Creatable-module__disabled___ZIdus{cursor:not-allowed;opacity:.6}.Creatable-module__dropdownCreatableError___FYVla{border-color:#bf494e}.Creatable-module__creatableInput___KaKxv{flex:1 1 120px;min-width:80px;border:none;outline:none;background:transparent;height:20px;padding:6px 0;color:#28292c;font-size:14px}.Creatable-module__creatableInput___KaKxv::placeholder{color:#878787}.Creatable-module__creatableInput___KaKxv:disabled{color:#b2b2b2}.Creatable-module__searchInput___03a1-{width:100%;padding:8px 32px 8px 12px;border:1px solid #cccccc;border-radius:4px;font-size:14px;color:#28292c;background-color:#fff}.Creatable-module__searchInput___03a1-:focus{outline:none;border-color:#5cb335}.Creatable-module__searchInput___03a1-::placeholder{color:#878787}.Creatable-module__searchIcon___TA3Y3{position:absolute;right:20px;top:50%;transform:translateY(-50%);color:#4a4a4a;font-size:16px;pointer-events:none}.Creatable-module__optionsList___VZgJf{padding:8px;flex:1;overflow-y:auto;max-height:200px}.Creatable-module__categoryGroup___g8f-g{display:flex;flex-direction:column}.Creatable-module__optionsList___VZgJf .Creatable-module__categoryGroup___g8f-g:first-child .Creatable-module__categoryDivider___QUgR9{border-top:none}.Creatable-module__categoryDivider___QUgR9{padding:8px;border-top:1px solid #cccccc;background-color:#fff;display:flex;align-items:center}.Creatable-module__categoryLabel___YhGp9{font-size:12px;font-weight:600;color:#727272;text-transform:uppercase;letter-spacing:.5px}.Creatable-module__optionItem___Ys808{width:100%;padding:8px;border:none;background:none;cursor:pointer;display:flex;align-items:center;text-align:left;font-size:14px;color:#4a4a4a;min-height:32px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:4px;box-sizing:border-box}.Creatable-module__optionItem___Ys808:hover:not(.Creatable-module__optionItemDisabled___jvfGz){background-color:#dff0db}.Creatable-module__optionItem___Ys808:focus{outline:none}.Creatable-module__optionItem___Ys808.Creatable-module__optionItemDisabled___jvfGz{color:#b2b2b2;cursor:not-allowed;opacity:.6}.Creatable-module__optionItem___Ys808.Creatable-module__optionItemFocused___OfIQd{background-color:#dff0db}.Creatable-module__optionContent___9RCsJ{display:flex;align-items:center;justify-content:space-between;width:100%}.Creatable-module__optionLabel___FJfM1{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:Roboto,sans-serif!important}.Creatable-module__tickIcon___VjpDN{color:inherit;font-size:14px;flex-shrink:0;margin-left:8px}.Creatable-module__creatableIcon___MQ0Ak{color:inherit;font-size:14px;flex-shrink:0;margin-right:8px}.Creatable-module__noOptions___H8Kbu{padding:8px;text-align:center;color:#878787;font-size:14px;font-style:italic}.Creatable-module__maxItemsWarning___-qcUr{padding:8px;border-top:1px solid #cccccc;background-color:#f8f9fa;font-size:12px;color:#727272;text-align:center}.Creatable-module__helpers___GmPY4{height:14px;display:flex;justify-content:space-between;align-items:center;gap:6px;min-width:0}.Creatable-module__helpText___89mXU{font-size:12px;color:#727272;line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.Creatable-module__helpTextDisabled___shU6E{color:#b2b2b2}.Creatable-module__helpLink___IdU0g{color:#0369a3;font-size:12px;font-weight:500;line-height:1;text-decoration:none;flex-shrink:0}.Creatable-module__helpLink___IdU0g:hover{text-decoration:underline}.Creatable-module__helpLinkDisabled___B8rpy{color:#878787}.Creatable-module__errorMessage___HRKr5{font-size:12px;color:#bf494e;line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.Creatable-module__optionsList___VZgJf::-webkit-scrollbar{width:4px}.Creatable-module__optionsList___VZgJf::-webkit-scrollbar-track{background:transparent}.Creatable-module__optionsList___VZgJf::-webkit-scrollbar-thumb{background-color:#ccc;border-radius:240px}.Creatable-module__optionsList___VZgJf::-webkit-scrollbar-thumb:hover{background-color:#878787}.Creatable-module__optionsList___VZgJf::-webkit-scrollbar-thumb:active{background-color:#4a4a4a}.Creatable-module__selectAllContainer___l9hbm{display:flex;gap:16px;background-color:#fff;justify-content:space-between;align-items:center;padding-bottom:8px}.Creatable-module__searchContainer___zaiNa:has(+.Creatable-module__selectAllContainer___l9hbm){border-bottom:none}.Creatable-module__actionButtons___tlqG9{display:flex;justify-content:space-between;gap:8px;padding:12px;border-top:1px solid #cccccc;background-color:#fff}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.FilePicker-module__container___knCCi{display:flex;flex-direction:column;gap:6px}.FilePicker-module__label___al7Xe{color:#4a4a4a;font-size:14px;font-weight:500;line-height:1.2;display:flex;align-items:center;gap:4px;min-width:0}.FilePicker-module__required___41Vjd{color:#cb282e}.FilePicker-module__labelTooltipIcon___Cc1QF{color:#4a4a4a;font-size:16px;cursor:pointer}.FilePicker-module__helpers___79-g5{display:flex;justify-content:space-between;align-items:center;min-width:0;height:14px}.FilePicker-module__helperText___ja9Rr{color:#727272;font-size:12px;font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.2}.FilePicker-module__errorMessage___TvHrL{color:#bf494e;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.2}.FilePicker-module__singleFileHelpLinkContainer___mpjUf{display:flex;align-items:center;gap:6px}.FilePicker-module__singleFileHelpLinkReservedSpace___r8j2b{width:32px;flex-shrink:0}.FilePicker-module__helpLink___uu45D{color:#0369a3;font-size:12px;font-weight:500;text-decoration:none;flex-shrink:0;margin-left:auto;line-height:1.2}.FilePicker-module__helpLink___uu45D:hover{text-decoration:underline}.FilePicker-module__input___cL1Hs{display:none}.FilePicker-module__singleFileContainer___OFSDt{display:flex;align-items:center;gap:4px}.FilePicker-module__singleFileInputContainer___MOkES{display:flex;align-items:center;width:100%;height:32px;border:1px solid #cccccc;border-radius:4px;background-color:#fff}.FilePicker-module__singleFileInputContainer___MOkES:focus,.FilePicker-module__singleFileInputContainer___MOkES:focus-within{border-color:#5cb335;outline:none}.FilePicker-module__inputFileName___sMs7R{display:flex;align-items:center;flex:1;height:100%;font-size:14px;font-weight:400;color:#28292c;border-right:1px solid #cccccc;padding-left:6px}.FilePicker-module__inputFileNamePlaceholder___-mkDD{color:#878787}.FilePicker-module__inputButton___ghLlD{margin-left:6px;margin-right:6px}.FilePicker-module__multipleHelpText___5tnnn{color:#727272;text-align:center;font-family:Roboto;font-size:13px;font-style:normal;font-weight:400;line-height:100%}.FilePicker-module__multipleInputButton___WCJp9{align-self:flex-start}ul.FilePicker-module__multipleFilesList___Kim0I{display:flex;flex-direction:column;list-style:none;padding-left:0;margin:0}.FilePicker-module__multipleFilesListItem___01PDS{padding-bottom:12px;padding-top:12px}.FilePicker-module__multipleFilesListItem___01PDS:first-child{padding-top:0}.FilePicker-module__multipleFilesListItem___01PDS .FilePicker-module__multipleFilesListItemContent___pKbho{display:flex;align-items:start;gap:8px}.FilePicker-module__multipleFilesListItem___01PDS .FilePicker-module__multipleFilesListItemContentData___5GC-C{display:flex;align-items:center;justify-content:space-between;width:100%}.FilePicker-module__multipleFilesListItem___01PDS .FilePicker-module__multipleFilesListItemIconContainer___7sUL5{background-color:#f1f1f1;border-radius:4px}.FilePicker-module__multipleFilesListItem___01PDS .FilePicker-module__multipleFilesListItemIcon___nfMX9{display:flex;align-items:center;justify-content:center;color:#878787;font-size:20px;height:34px;width:32px}.FilePicker-module__multipleFilesListItem___01PDS .FilePicker-module__multipleFilesListItemText___nPqrL{display:flex;flex-direction:column;gap:3px}.FilePicker-module__multipleFilesListItem___01PDS .FilePicker-module__multipleFilesListItemName___NjHhX{color:#4a4a4a;font-size:14px}.FilePicker-module__multipleFilesListItem___01PDS .FilePicker-module__multipleFilesListItemSize___wc8LJ{color:#727272;font-size:12px}.FilePicker-module__multipleFilesListItem___01PDS .FilePicker-module__multipleFilesListItemError___x9qkT{display:flex;align-items:center;gap:3px;color:#cb282e;font-size:12px;font-weight:500}.FilePicker-module__multipleFilesListItem___01PDS .FilePicker-module__multipleFilesListItemIconError___0RO46{color:#cb282e;font-size:16px}.FilePicker-module__multipleFilesListItem___01PDS:not(:last-child){border-bottom:2px solid #cccccc}.FilePicker-module__multipleFilesListItemIconDelete___9Z9Dl{font-size:20px!important}.FilePicker-module__disabled___szMiq .FilePicker-module__label___al7Xe,.FilePicker-module__disabled___szMiq .FilePicker-module__required___41Vjd{color:#b2b2b2}.FilePicker-module__disabled___szMiq .FilePicker-module__labelTooltipIcon___Cc1QF{color:#ccc}.FilePicker-module__disabled___szMiq .FilePicker-module__inputFileName___sMs7R,.FilePicker-module__disabled___szMiq .FilePicker-module__helperText___ja9Rr{color:#b2b2b2}.FilePicker-module__disabled___szMiq .FilePicker-module__helpLink___uu45D{pointer-events:none;color:#878787}.FilePicker-module__disabled___szMiq .FilePicker-module__errorMessage___TvHrL{color:#b2b2b2}.FilePicker-module__disabled___szMiq .FilePicker-module__singleFileInputContainer___MOkES:focus,.FilePicker-module__disabled___szMiq .FilePicker-module__singleFileInputContainer___MOkES:focus-within{border:1px solid #cccccc;border-color:none;outline:none}.FilePicker-module__disabled___szMiq .FilePicker-module__multipleHelpText___5tnnn{color:#b2b2b2}
|
|
1
|
+
.FilePicker-module__container___knCCi{display:flex;flex-direction:column;gap:6px}.FilePicker-module__label___al7Xe{color:#4a4a4a;font-size:14px;font-weight:500;line-height:1.2;display:flex;align-items:center;gap:4px;min-width:0}.FilePicker-module__required___41Vjd{color:#cb282e}.FilePicker-module__labelTooltipIcon___Cc1QF{color:#4a4a4a;font-size:16px;cursor:pointer}.FilePicker-module__helpers___79-g5{display:flex;justify-content:space-between;align-items:center;min-width:0;height:14px}.FilePicker-module__helperText___ja9Rr{color:#727272;font-size:12px;font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.2}.FilePicker-module__errorMessage___TvHrL{color:#bf494e;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.2}.FilePicker-module__singleFileHelpLinkContainer___mpjUf{display:flex;align-items:center;gap:6px}.FilePicker-module__singleFileHelpLinkReservedSpace___r8j2b{width:32px;flex-shrink:0}.FilePicker-module__helpLink___uu45D{color:#0369a3;font-size:12px;font-weight:500;text-decoration:none;flex-shrink:0;margin-left:auto;line-height:1.2}.FilePicker-module__helpLink___uu45D:hover{text-decoration:underline}.FilePicker-module__input___cL1Hs{display:none}.FilePicker-module__singleFileContainer___OFSDt{display:flex;align-items:center;gap:4px}.FilePicker-module__singleFileInputContainer___MOkES{display:flex;align-items:center;width:100%;height:32px;border:1px solid #cccccc;border-radius:4px;background-color:#fff}.FilePicker-module__singleFileInputContainer___MOkES:focus,.FilePicker-module__singleFileInputContainer___MOkES:focus-within{border-color:#5cb335;outline:none}.FilePicker-module__inputFileName___sMs7R{display:flex;align-items:center;flex:1;height:100%;font-size:14px;font-weight:400;color:#28292c;border-right:1px solid #cccccc;padding-left:6px}.FilePicker-module__inputFileNamePlaceholder___-mkDD{color:#878787}.FilePicker-module__inputButton___ghLlD{margin-left:6px;margin-right:6px}.FilePicker-module__multipleHelpText___5tnnn{color:#727272;text-align:center;font-family:Roboto;font-size:13px;font-style:normal;font-weight:400;line-height:100%}.FilePicker-module__multipleInputButton___WCJp9{align-self:flex-start}ul.FilePicker-module__multipleFilesList___Kim0I{display:flex;flex-direction:column;list-style:none;padding-left:0;margin:0}.FilePicker-module__multipleFilesListItem___01PDS{padding-bottom:12px;padding-top:12px}.FilePicker-module__multipleFilesListItem___01PDS:first-child{padding-top:0}.FilePicker-module__multipleFilesListItem___01PDS .FilePicker-module__multipleFilesListItemContent___pKbho{display:flex;align-items:start;gap:8px}.FilePicker-module__multipleFilesListItem___01PDS .FilePicker-module__multipleFilesListItemContentData___5GC-C{display:flex;align-items:center;justify-content:space-between;width:100%}.FilePicker-module__multipleFilesListItem___01PDS .FilePicker-module__multipleFilesListItemIconContainer___7sUL5{background-color:#f1f1f1;border-radius:4px}.FilePicker-module__multipleFilesListItem___01PDS .FilePicker-module__multipleFilesListItemIcon___nfMX9{display:flex;align-items:center;justify-content:center;color:#878787;font-size:20px;height:34px;width:32px}.FilePicker-module__multipleFilesListItem___01PDS .FilePicker-module__multipleFilesListItemText___nPqrL{display:flex;flex-direction:column;gap:3px}.FilePicker-module__multipleFilesListItem___01PDS .FilePicker-module__multipleFilesListItemName___NjHhX{color:#4a4a4a;font-size:14px}.FilePicker-module__multipleFilesListItem___01PDS .FilePicker-module__multipleFilesListItemSize___wc8LJ{color:#727272;font-size:12px}.FilePicker-module__multipleFilesListItem___01PDS .FilePicker-module__multipleFilesListItemError___x9qkT{display:flex;align-items:center;gap:3px;color:#cb282e;font-size:12px;font-weight:500}.FilePicker-module__multipleFilesListItem___01PDS .FilePicker-module__multipleFilesListItemIconError___0RO46{color:#cb282e;font-size:16px}.FilePicker-module__multipleFilesListItem___01PDS:not(:last-child){border-bottom:2px solid #cccccc}.FilePicker-module__multipleFilesListItemIconDelete___9Z9Dl{font-size:20px!important}.FilePicker-module__disabled___szMiq .FilePicker-module__label___al7Xe,.FilePicker-module__disabled___szMiq .FilePicker-module__required___41Vjd{color:#b2b2b2}.FilePicker-module__disabled___szMiq .FilePicker-module__labelTooltipIcon___Cc1QF{color:#ccc}.FilePicker-module__disabled___szMiq .FilePicker-module__inputFileName___sMs7R,.FilePicker-module__disabled___szMiq .FilePicker-module__helperText___ja9Rr{color:#b2b2b2}.FilePicker-module__disabled___szMiq .FilePicker-module__helpLink___uu45D{pointer-events:none;color:#878787}.FilePicker-module__disabled___szMiq .FilePicker-module__errorMessage___TvHrL{color:#b2b2b2}.FilePicker-module__disabled___szMiq .FilePicker-module__singleFileInputContainer___MOkES:focus,.FilePicker-module__disabled___szMiq .FilePicker-module__singleFileInputContainer___MOkES:focus-within{border:1px solid #cccccc;border-color:none;outline:none}.FilePicker-module__disabled___szMiq .FilePicker-module__multipleHelpText___5tnnn{color:#b2b2b2}.FilePicker-module__flex___l1rtG{display:flex}
|
|
@@ -1,15 +1,47 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
1
2
|
import { InteractiveEventHandlers } from '../../types/native-events';
|
|
2
3
|
import { InputLabelTooltipProps } from '../Input/Input';
|
|
3
4
|
export type UploadFile = {
|
|
4
5
|
file: File;
|
|
5
6
|
error?: string;
|
|
6
7
|
};
|
|
8
|
+
export type FilePickerContextValue = {
|
|
9
|
+
id: string;
|
|
10
|
+
type: 'single' | 'multiple';
|
|
11
|
+
maxFiles: number;
|
|
12
|
+
fileExtensionsAllowed: string[];
|
|
13
|
+
fileExtensionsAllowedText: string;
|
|
14
|
+
maxSize: number;
|
|
15
|
+
queueFiles: boolean;
|
|
16
|
+
disabled: boolean;
|
|
17
|
+
isUploadDisabled: boolean;
|
|
18
|
+
uploadedFiles: UploadFile[];
|
|
19
|
+
isMaxFilesExceeded: boolean;
|
|
20
|
+
label: string;
|
|
21
|
+
required: boolean;
|
|
22
|
+
placeholder?: string;
|
|
23
|
+
errorMessage?: string;
|
|
24
|
+
helpText?: string;
|
|
25
|
+
helpLink?: string;
|
|
26
|
+
helpLinkText?: string;
|
|
27
|
+
multipleHelpText?: string;
|
|
28
|
+
multipleButtonHelpText?: string;
|
|
29
|
+
labelTooltip?: InputLabelTooltipProps;
|
|
30
|
+
accept: string;
|
|
31
|
+
inputRef: React.RefObject<HTMLInputElement | null>;
|
|
32
|
+
triggerInput: () => void;
|
|
33
|
+
handleKeyDown: (e: React.KeyboardEvent<HTMLDivElement>) => void;
|
|
34
|
+
handleRemoveFile: (fileName: string) => void;
|
|
35
|
+
displayFileSize: (size: number) => string;
|
|
36
|
+
};
|
|
37
|
+
declare function useFilePickerContext(): FilePickerContextValue;
|
|
7
38
|
type FilePickerProps = {
|
|
8
39
|
type?: 'single' | 'multiple';
|
|
9
40
|
maxFiles?: number;
|
|
10
41
|
fileExtensionsAllowed: string[];
|
|
11
42
|
maxSize: number;
|
|
12
43
|
queueFiles?: boolean;
|
|
44
|
+
isUploadDisabled?: boolean;
|
|
13
45
|
disabled?: boolean;
|
|
14
46
|
value?: File[];
|
|
15
47
|
label: string;
|
|
@@ -19,28 +51,57 @@ type FilePickerProps = {
|
|
|
19
51
|
helpText?: string;
|
|
20
52
|
helpLink?: string;
|
|
21
53
|
helpLinkText?: string;
|
|
54
|
+
multipleHelpText?: string;
|
|
55
|
+
multipleButtonHelpText?: string;
|
|
22
56
|
labelTooltip?: InputLabelTooltipProps;
|
|
57
|
+
onUpload?: (files: UploadFile[]) => void;
|
|
58
|
+
onRemoveFile?: (fileName: string) => void;
|
|
59
|
+
children?: ReactNode;
|
|
23
60
|
} & InteractiveEventHandlers;
|
|
24
61
|
/**
|
|
25
|
-
* FilePicker
|
|
26
|
-
*
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
*
|
|
42
|
-
*
|
|
43
|
-
|
|
62
|
+
* FilePicker root. Use with no children for default layout, or compose with
|
|
63
|
+
* FilePicker.Label, FilePicker.BrowseButton, FilePicker.HelpText, FilePicker.UploadedFilesList, etc.
|
|
64
|
+
*/
|
|
65
|
+
declare function FilePickerRoot({ type, maxFiles, fileExtensionsAllowed, maxSize, queueFiles, disabled, isUploadDisabled, value, label, required, placeholder, errorMessage, helpText, helpLink, helpLinkText, multipleHelpText, multipleButtonHelpText, labelTooltip, onUpload, onRemoveFile, children, }: FilePickerProps): import("react/jsx-runtime").JSX.Element;
|
|
66
|
+
type FilePickerLabelProps = {
|
|
67
|
+
/** Override label text. If not provided, uses FilePicker's label prop. */
|
|
68
|
+
children?: ReactNode;
|
|
69
|
+
};
|
|
70
|
+
declare function FilePickerLabel({ children }: FilePickerLabelProps): import("react/jsx-runtime").JSX.Element;
|
|
71
|
+
type FilePickerBrowseButtonProps = {
|
|
72
|
+
/** Override button content (e.g. "Browse file" or "Browse files (max 5)"). */
|
|
73
|
+
children?: ReactNode;
|
|
74
|
+
className?: string;
|
|
75
|
+
};
|
|
76
|
+
declare function FilePickerBrowseButton({ children, className }: FilePickerBrowseButtonProps): import("react/jsx-runtime").JSX.Element;
|
|
77
|
+
/**
|
|
78
|
+
* Wrapper for single-file mode: groups the input row and optional delete action.
|
|
79
|
+
* Use with FilePicker.SingleFileRow and FilePicker.SingleFileActions as children.
|
|
80
|
+
*/
|
|
81
|
+
declare function FilePickerSingleFileContainer({ children }: {
|
|
82
|
+
children?: ReactNode;
|
|
83
|
+
}): import("react/jsx-runtime").JSX.Element | null;
|
|
84
|
+
/**
|
|
85
|
+
* Single-file mode: shows filename/placeholder and a slot for the browse button.
|
|
86
|
+
* Put FilePicker.BrowseButton (optionally wrapped in Tooltip) as children.
|
|
44
87
|
*/
|
|
45
|
-
|
|
46
|
-
|
|
88
|
+
declare function FilePickerSingleFileRow({ children }: {
|
|
89
|
+
children?: ReactNode;
|
|
90
|
+
}): import("react/jsx-runtime").JSX.Element | null;
|
|
91
|
+
/** Renders the reserved space and delete button for single-file mode (for use in composed layout). */
|
|
92
|
+
declare function FilePickerSingleFileActions(): import("react/jsx-runtime").JSX.Element | null;
|
|
93
|
+
declare function FilePickerSingleFileDeleteButton(): import("react/jsx-runtime").JSX.Element | null;
|
|
94
|
+
declare function FilePickerHelpText(): import("react/jsx-runtime").JSX.Element;
|
|
95
|
+
declare function FilePickerUploadedFilesList(): import("react/jsx-runtime").JSX.Element | null;
|
|
96
|
+
declare const FilePicker: typeof FilePickerRoot & {
|
|
97
|
+
Label: typeof FilePickerLabel;
|
|
98
|
+
BrowseButton: typeof FilePickerBrowseButton;
|
|
99
|
+
HelpText: typeof FilePickerHelpText;
|
|
100
|
+
UploadedFilesList: typeof FilePickerUploadedFilesList;
|
|
101
|
+
SingleFileContainer: typeof FilePickerSingleFileContainer;
|
|
102
|
+
SingleFileRow: typeof FilePickerSingleFileRow;
|
|
103
|
+
SingleFileActions: typeof FilePickerSingleFileActions;
|
|
104
|
+
SingleFileDeleteButton: typeof FilePickerSingleFileDeleteButton;
|
|
105
|
+
};
|
|
106
|
+
export { useFilePickerContext };
|
|
107
|
+
export default FilePicker;
|