@dt-dds/react-dropdown 1.0.0-beta.31

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.
Files changed (7) hide show
  1. package/CHANGELOG.md +306 -0
  2. package/LICENSE.md +21 -0
  3. package/README.md +128 -0
  4. package/dist/index.d.ts +77 -0
  5. package/dist/index.js +453 -0
  6. package/dist/index.mjs +413 -0
  7. package/package.json +58 -0
package/CHANGELOG.md ADDED
@@ -0,0 +1,306 @@
1
+ # @dt-ui/react-dropdown
2
+
3
+ ## 1.0.0-beta.31
4
+
5
+ ### Patch Changes
6
+
7
+ - chore: fix publish after npmjs.org pkg unpublish
8
+ - Updated dependencies
9
+ - Updated dependencies [223664b]
10
+ - @dt-dds/react-box@1.0.0-beta.10
11
+
12
+ ## 1.0.0-beta.30
13
+
14
+ ### Major Changes
15
+
16
+ - refactor!: rename pkg and publish to npmjs
17
+
18
+ ### Patch Changes
19
+
20
+ - Updated dependencies
21
+ - @dt-dds/react-box@1.0.0-beta.9
22
+ - @dt-dds/react-core@1.0.0-beta.41
23
+ - @dt-dds/react-icon@1.0.0-beta.42
24
+ - @dt-dds/react-icon-button@1.0.0-beta.9
25
+ - @dt-dds/react-typography@1.0.0-beta.32
26
+
27
+ ## 0.1.0-beta.29
28
+
29
+ ### Patch Changes
30
+
31
+ - chore: fix pkg deps versions
32
+
33
+ ## 0.1.0-beta.28
34
+
35
+ ### Patch Changes
36
+
37
+ - refactor: drop icon funcional state
38
+ - Updated dependencies
39
+ - @dt-ui/react-icon@0.1.0-beta.41
40
+
41
+ ## 0.1.0-beta.27
42
+
43
+ ### Patch Changes
44
+
45
+ - refactor: theme typography values
46
+ - Updated dependencies
47
+ - @dt-ui/react-core@0.1.0-beta.40
48
+ - @dt-ui/react-icon@0.1.0-beta.40
49
+ - @dt-ui/react-typography@0.1.0-beta.31
50
+
51
+ ## 0.1.0-beta.26
52
+
53
+ ### Minor Changes
54
+
55
+ - feat: update shadow theme values
56
+
57
+ ### Patch Changes
58
+
59
+ - Updated dependencies
60
+ - @dt-ui/react-core@0.1.0-beta.39
61
+ - @dt-ui/react-icon@0.1.0-beta.39
62
+ - @dt-ui/react-typography@0.1.0-beta.30
63
+
64
+ ## 0.1.0-beta.25
65
+
66
+ ### Patch Changes
67
+
68
+ - fix: add style to dropdown props
69
+
70
+ ## 0.1.0-beta.24
71
+
72
+ ### Minor Changes
73
+
74
+ - feat: add new icon font sizes
75
+
76
+ ### Patch Changes
77
+
78
+ - Updated dependencies
79
+ - @dt-ui/react-icon@0.1.0-beta.38
80
+
81
+ ## 0.1.0-beta.23
82
+
83
+ ### Patch Changes
84
+
85
+ - chore: update theme font-styles
86
+ - Updated dependencies
87
+ - @dt-ui/react-core@0.1.0-beta.38
88
+ - @dt-ui/react-icon@0.1.0-beta.37
89
+ - @dt-ui/react-typography@0.1.0-beta.29
90
+
91
+ ## 0.1.0-beta.22
92
+
93
+ ### Patch Changes
94
+
95
+ - chore: review OSS files
96
+ - Updated dependencies
97
+ - @dt-ui/react-box@0.1.0-beta.8
98
+ - @dt-ui/react-core@0.1.0-beta.37
99
+ - @dt-ui/react-icon@0.1.0-beta.36
100
+ - @dt-ui/react-typography@0.1.0-beta.28
101
+
102
+ ## 0.1.0-beta.21
103
+
104
+ ### Patch Changes
105
+
106
+ - chore: update contextual colors
107
+ - Updated dependencies
108
+ - @dt-ui/react-core@0.1.0-beta.36
109
+ - @dt-ui/react-icon@0.1.0-beta.35
110
+ - @dt-ui/react-typography@0.1.0-beta.27
111
+
112
+ ## 0.1.0-beta.20
113
+
114
+ ### Minor Changes
115
+
116
+ - feat: implement IconButton contrast and size
117
+
118
+ ### Patch Changes
119
+
120
+ - Updated dependencies
121
+ - @dt-ui/react-icon@0.1.0-beta.34
122
+
123
+ ## 0.1.0-beta.19
124
+
125
+ ### Patch Changes
126
+
127
+ - fix: change content.light contextual color
128
+ - Updated dependencies
129
+ - @dt-ui/react-core@0.1.0-beta.35
130
+ - @dt-ui/react-icon@0.1.0-beta.33
131
+ - @dt-ui/react-typography@0.1.0-beta.26
132
+
133
+ ## 0.1.0-beta.18
134
+
135
+ ### Minor Changes
136
+
137
+ - feat: move icon-button to independent
138
+
139
+ ### Patch Changes
140
+
141
+ - Updated dependencies
142
+ - @dt-ui/react-icon@0.1.0-beta.32
143
+
144
+ ## 0.1.0-beta.17
145
+
146
+ ### Patch Changes
147
+
148
+ - fix: add accent to colors type
149
+ - Updated dependencies
150
+ - @dt-ui/react-core@0.1.0-beta.34
151
+ - @dt-ui/react-icon@0.1.0-beta.31
152
+ - @dt-ui/react-typography@0.1.0-beta.25
153
+
154
+ ## 0.1.0-beta.16
155
+
156
+ ### Patch Changes
157
+
158
+ - fix: dropdown select border color
159
+
160
+ ## 0.1.0-beta.15
161
+
162
+ ### Patch Changes
163
+
164
+ - fix: change button text according to ux
165
+ - Updated dependencies
166
+ - @dt-ui/react-core@0.1.0-beta.33
167
+ - @dt-ui/react-icon@0.1.0-beta.30
168
+ - @dt-ui/react-typography@0.1.0-beta.24
169
+
170
+ ## 0.1.0-beta.14
171
+
172
+ ### Patch Changes
173
+
174
+ - chore: update contexual colors
175
+ - Updated dependencies
176
+ - @dt-ui/react-core@0.1.0-beta.32
177
+ - @dt-ui/react-typography@0.1.0-beta.23
178
+ - @dt-ui/react-icon@0.1.0-beta.29
179
+
180
+ ## 0.1.0-beta.13
181
+
182
+ ### Minor Changes
183
+
184
+ - feat: add dropdown required
185
+
186
+ ## 0.1.0-beta.12
187
+
188
+ ### Patch Changes
189
+
190
+ - chore: add box dependency to dropdown
191
+
192
+ ## 0.1.0-beta.11
193
+
194
+ ### Minor Changes
195
+
196
+ - feat: add bg fill, variant and deselect
197
+
198
+ ## 0.1.0-beta.10
199
+
200
+ ### Patch Changes
201
+
202
+ - style: update responsive font styles
203
+ - Updated dependencies
204
+ - @dt-ui/react-core@0.1.0-beta.31
205
+ - @dt-ui/react-icon@0.1.0-beta.28
206
+ - @dt-ui/react-typography@0.1.0-beta.22
207
+
208
+ ## 0.1.0-beta.9
209
+
210
+ ### Minor Changes
211
+
212
+ - feat: add spinner size 'extra-small' & update specs
213
+
214
+ ### Patch Changes
215
+
216
+ - Updated dependencies
217
+ - @dt-ui/react-core@0.1.0-beta.30
218
+ - @dt-ui/react-icon@0.1.0-beta.27
219
+ - @dt-ui/react-typography@0.1.0-beta.21
220
+
221
+ ## 0.1.0-beta.8
222
+
223
+ ### Patch Changes
224
+
225
+ - chore: add theme breakpoints
226
+ - Updated dependencies
227
+ - @dt-ui/react-core@0.1.0-beta.29
228
+ - @dt-ui/react-icon@0.1.0-beta.26
229
+ - @dt-ui/react-typography@0.1.0-beta.20
230
+
231
+ ## 0.1.0-beta.7
232
+
233
+ ### Minor Changes
234
+
235
+ - feat: add id to base props
236
+
237
+ ### Patch Changes
238
+
239
+ - Updated dependencies
240
+ - @dt-ui/react-core@0.1.0-beta.28
241
+ - @dt-ui/react-typography@0.1.0-beta.19
242
+ - @dt-ui/react-icon@0.1.0-beta.25
243
+
244
+ ## 0.1.0-beta.6
245
+
246
+ ### Minor Changes
247
+
248
+ - feat: change breakpoints values
249
+
250
+ ### Patch Changes
251
+
252
+ - Updated dependencies
253
+ - @dt-ui/react-core@0.1.0-beta.27
254
+ - @dt-ui/react-icon@0.1.0-beta.24
255
+ - @dt-ui/react-typography@0.1.0-beta.18
256
+
257
+ ## 0.1.0-beta.5
258
+
259
+ ### Patch Changes
260
+
261
+ - fix: replace body to correct one
262
+ - Updated dependencies
263
+ - @dt-ui/react-core@0.1.0-beta.26
264
+ - @dt-ui/react-icon@0.1.0-beta.23
265
+ - @dt-ui/react-typography@0.1.0-beta.17
266
+
267
+ ## 0.1.0-beta.4
268
+
269
+ ### Patch Changes
270
+
271
+ - chore: add theme colors missing types
272
+ - Updated dependencies
273
+ - @dt-ui/react-core@0.1.0-beta.25
274
+ - @dt-ui/react-icon@0.1.0-beta.22
275
+ - @dt-ui/react-typography@0.1.0-beta.16
276
+
277
+ ## 0.1.0-beta.3
278
+
279
+ ### Patch Changes
280
+
281
+ - refactor: drop truckapi theme
282
+ - Updated dependencies
283
+ - @dt-ui/react-core@0.1.0-beta.24
284
+ - @dt-ui/react-icon@0.1.0-beta.21
285
+ - @dt-ui/react-typography@0.1.0-beta.15
286
+
287
+ ## 0.1.0-beta.2
288
+
289
+ ### Minor Changes
290
+
291
+ - feat: update core and semantic colors
292
+ - feat: remove greenlane theme
293
+
294
+ ### Patch Changes
295
+
296
+ - Updated dependencies
297
+ - Updated dependencies
298
+ - @dt-ui/react-core@0.1.0-beta.23
299
+ - @dt-ui/react-icon@0.1.0-beta.20
300
+ - @dt-ui/react-typography@0.1.0-beta.14
301
+
302
+ ## 0.1.0-beta.1
303
+
304
+ ### Patch Changes
305
+
306
+ - chore: make dropdown independent pkg
package/LICENSE.md ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2025 Daimler Truck AG.
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md ADDED
@@ -0,0 +1,128 @@
1
+ # Dropdown Package
2
+
3
+ The Dropdown Menu provide the users with a list of options on temporary surfaces.
4
+
5
+ ## Dropdown Usage
6
+
7
+ ```jsx
8
+ import { Dropdown } from '@dt-dds/react';
9
+
10
+ const OPTIONS = [
11
+ { text: 'Option 1', value: '1' },
12
+ { text: 'Option 2', value: '2' },
13
+ ];
14
+
15
+ export const App = () => {
16
+ return (
17
+ <Dropdown>
18
+ <Dropdown.Select label='Label'>
19
+ {options.map((option) => (
20
+ <Dropdown.Option key={option.value} option={option}>
21
+ {option.text ?? option.value}
22
+ </Dropdown.Option>
23
+ ))}
24
+ </Dropdown.Select>
25
+ </Dropdown>
26
+ );
27
+ };
28
+ ```
29
+
30
+ ## Properties
31
+
32
+ ### Dropdown
33
+
34
+ | Property | Type | Default | Description |
35
+ | -------------- | --------------------- | ---------- | --------------------------------------------------------- |
36
+ | `children` | `ReactNode` | - | Child components to be rendered |
37
+ | `defaultValue` | `DropdownOptionValue` | - | Initial selected option |
38
+ | `style` | `React.CSSProperties` | - | Gives the Box Dropdown css properties |
39
+ | `dataTestId` | `string` | `dropdown` | Customizable test identifier |
40
+ | `name` | `string` | - | The attribute to specify the name of the dropdown element |
41
+
42
+ ### Dropdown.Select
43
+
44
+ | Property | Type | Default | Description |
45
+ | ------------- | --------------------- | ----------------- | ---------------------------------------------------------- |
46
+ | `children` | `ReactNode` | - | Child components to be rendered |
47
+ | `label` | `string` | - | A text to help users understand the scope of the dropdown. |
48
+ | `style` | `React.CSSProperties` | - | Gives the Box Dropdown css properties |
49
+ | `dataTestId` | `string` | `dropdown-select` | Customizable test identifier |
50
+ | `isDisabled` | `boolean` | `false` | Set the dropdown disabled. |
51
+ | `hasBorder` | `boolean` | `true` | Set a border to the component. |
52
+ | `hasError` | `boolean` | `false` | Set error state for dropdown |
53
+ | `fill` | `DropdownFill` | `default` | Styles the input with a specific background color |
54
+ | `variant` | `DropdownVariant` | `outlined` | Styles the input with a specific border |
55
+ | `hasDeselect` | `boolean` | `false` | Set if dropdown has deselect X button/icon |
56
+ | `isRequired` | `boolean` | `false` | Apply required style to the label field |
57
+
58
+ ### Dropdown.Menu
59
+
60
+ | Property | Type | Default | Description |
61
+ | ------------ | ----------- | ------- | ------------------------------- |
62
+ | `children` | `ReactNode` | - | Child components to be rendered |
63
+ | `dataTestId` | `string` | `menu` | Customizable test identifier |
64
+
65
+ ### Dropdown.Option
66
+
67
+ | Property | Type | Default | Description |
68
+ | ------------ | ----------------------------------------------------------- | -------------------------------- | ------------------------------------------------- |
69
+ | `style` | `React.CSSProperties` | - | Gives the Dropdown option css properties |
70
+ | `children` | `ReactNode` | - | Child components to be rendered |
71
+ | `option` | `DropdownOptionValue` | - | The option object. |
72
+ | `dataTestId` | `string` | `dropdown-option-{option.value}` | Customizable test identifier |
73
+ | `isDisabled` | `boolean` | `false` | Set the dropdown disabled. |
74
+ | `onClick` | `(option: string, name: string, event: MouseEvent) => void` | - | The triggered function when clicked on the option |
75
+
76
+ ### Dropdown.Detail
77
+
78
+ | Property | Type | Default | Description |
79
+ | ------------ | ----------- | --------------- | ------------------------------------- |
80
+ | `children` | `ReactNode` | - | Child components to be rendered |
81
+ | `dataTestId` | `string` | `dropdown-text` | Customizable test identifier |
82
+ | `isDisabled` | `boolean` | `false` | Disable the dropdown detail text |
83
+ | `hasError` | `boolean` | `false` | Set error state for the dropdown text |
84
+
85
+ ## Stack
86
+
87
+ - [TypeScript](https://www.typescriptlang.org/) for static type checking
88
+ - [React](https://reactjs.org/) — JavaScript library for user interfaces
89
+ - [Emotion](https://emotion.sh/docs/introduction) — for writing css styles with JavaScript
90
+ - [Storybook](https://storybook.js.org/) — UI component environment powered by Vite
91
+ - [Jest](https://jestjs.io/) - JavaScript Testing Framework
92
+ - [React Testing Library](https://testing-library.com/) - to test UI components in a user-centric way
93
+ - [ESLint](https://eslint.org/) for code linting
94
+ - [Prettier](https://prettier.io) for code formatting
95
+ - [Tsup](https://github.com/egoist/tsup) — TypeScript bundler powered by esbuild
96
+ - [Yarn](https://yarnpkg.com/) from managing packages
97
+
98
+ ## Commands
99
+
100
+ - `yarn build` - Build the package
101
+ - `yarn dev` - Run the package locally
102
+ - `yarn lint` - Lint all files within this package
103
+ - `yarn test` - Run all unit tests
104
+ - `yarn test:report` - Open the test coverage report
105
+ - `yarn test:update:snapshot` - Run all unit tests and update the snapshot
106
+
107
+ ## Compilation
108
+
109
+ Running `yarn build` from the root of the package will use [tsup](https://tsup.egoist.dev/) to compile the raw TypeScript and React code to plain JavaScript.
110
+
111
+ The `/dist` folder contains the compiled output.
112
+
113
+ ```bash
114
+ dropdown
115
+ └── dist
116
+ ├── index.d.ts <-- Types
117
+ ├── index.js <-- CommonJS version
118
+ └── index.mjs <-- ES Modules version
119
+ ...
120
+ ```
121
+
122
+ ## Versioning
123
+
124
+ Follows [semantic versioning](https://semver.org/)
125
+
126
+ ## &copy; License
127
+
128
+ Licensed under [MIT License](LICENSE.md)
package/dist/index.d.ts ADDED
@@ -0,0 +1,77 @@
1
+ import { BaseProps, Theme } from '@dt-dds/react-core';
2
+ import * as react_jsx_runtime from 'react/jsx-runtime';
3
+ import * as react from 'react';
4
+ import { MouseEvent, ReactNode } from 'react';
5
+
6
+ interface DropdownDetailProps extends BaseProps {
7
+ isDisabled?: boolean;
8
+ hasError?: boolean;
9
+ }
10
+ declare const DropdownDetail: ({ dataTestId, isDisabled, hasError, children, }: DropdownDetailProps) => react_jsx_runtime.JSX.Element;
11
+
12
+ type DropdownOptionValue = {
13
+ text?: string;
14
+ value: string;
15
+ };
16
+ type DropdownVariant = 'outlined' | 'bottom-line';
17
+ type DropdownFill = 'default' | 'contrast' | 'light';
18
+
19
+ interface DropdownOptionProps extends BaseProps {
20
+ fill?: DropdownFill;
21
+ option: DropdownOptionValue;
22
+ isDisabled?: boolean;
23
+ onClick?: (option: string, name: string | undefined, event: MouseEvent<HTMLLIElement>) => void;
24
+ }
25
+ declare const DropdownOption: ({ dataTestId, option, children, style, isDisabled, onClick, }: DropdownOptionProps) => react_jsx_runtime.JSX.Element;
26
+
27
+ type DropdownSelectProps = {
28
+ label?: string;
29
+ isDisabled?: boolean;
30
+ isRequired?: boolean;
31
+ hasBorder?: boolean;
32
+ hasError?: boolean;
33
+ hasDeselect?: boolean;
34
+ variant?: DropdownVariant;
35
+ fill?: DropdownFill;
36
+ } & BaseProps;
37
+ declare const DropdownSelect: ({ children, label, style, dataTestId, isDisabled, isRequired, hasBorder, hasError, hasDeselect, variant, fill, }: DropdownSelectProps) => react_jsx_runtime.JSX.Element;
38
+
39
+ declare const DropdownContainer: ({ children, style, dataTestId, }: BaseProps) => react_jsx_runtime.JSX.Element;
40
+
41
+ declare const DropdownMenu: ({ children, dataTestId, style }: BaseProps) => react_jsx_runtime.JSX.Element;
42
+
43
+ interface DropdownProps extends BaseProps {
44
+ defaultValue?: DropdownOptionValue;
45
+ name?: string;
46
+ }
47
+ declare const Dropdown: {
48
+ ({ children, defaultValue, style, name, dataTestId, }: DropdownProps): react_jsx_runtime.JSX.Element;
49
+ Container: ({ children, style, dataTestId, }: BaseProps) => react_jsx_runtime.JSX.Element;
50
+ Detail: ({ dataTestId, isDisabled, hasError, children, }: DropdownDetailProps) => react_jsx_runtime.JSX.Element;
51
+ Select: ({ children, label, style, dataTestId, isDisabled, isRequired, hasBorder, hasError, hasDeselect, variant, fill, }: DropdownSelectProps) => react_jsx_runtime.JSX.Element;
52
+ Option: ({ dataTestId, option, children, style, isDisabled, onClick, }: DropdownOptionProps) => react_jsx_runtime.JSX.Element;
53
+ Menu: ({ children, dataTestId, style }: BaseProps) => react_jsx_runtime.JSX.Element;
54
+ };
55
+
56
+ interface DropdownContextState {
57
+ state: DropdownOptionValue;
58
+ isOpen: boolean;
59
+ name?: string;
60
+ setState: React.Dispatch<React.SetStateAction<DropdownOptionValue>>;
61
+ setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
62
+ }
63
+ interface DropdownContextProviderProps {
64
+ children: ReactNode;
65
+ defaultValue?: DropdownOptionValue;
66
+ name?: string;
67
+ }
68
+ declare const DropdownContext: react.Context<DropdownContextState>;
69
+ declare const DropdownContextProvider: ({ children, defaultValue, name, }: DropdownContextProviderProps) => react_jsx_runtime.JSX.Element;
70
+ declare const useDropdownContext: () => DropdownContextState;
71
+
72
+ declare module '@emotion/react' {
73
+ interface Theme extends Theme {
74
+ }
75
+ }
76
+
77
+ export { Dropdown, DropdownContainer, DropdownContext, DropdownContextProvider, DropdownDetail, DropdownDetailProps, DropdownFill, DropdownMenu, DropdownOption, DropdownOptionProps, DropdownOptionValue, DropdownSelect, DropdownSelectProps, DropdownVariant, useDropdownContext };