@dt-dds/react-select 1.0.0-beta.48 → 1.0.0-beta.50

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 (6) hide show
  1. package/CHANGELOG.md +30 -0
  2. package/dist/index.d.mts +51 -0
  3. package/dist/index.d.ts +1 -1
  4. package/dist/index.js +17 -17
  5. package/dist/index.mjs +14 -14
  6. package/package.json +10 -10
package/CHANGELOG.md CHANGED
@@ -1,5 +1,35 @@
1
1
  # @dt-ui/react-select
2
2
 
3
+ ## 1.0.0-beta.50
4
+
5
+ ### Patch Changes
6
+
7
+ - chore(dependencies): upgrade builders versions
8
+ - Updated dependencies
9
+ - @dt-dds/react-checkbox@1.0.0-beta.44
10
+ - @dt-dds/react-core@1.0.0-beta.45
11
+ - @dt-dds/react-icon@1.0.0-beta.46
12
+ - @dt-dds/react-icon-button@1.0.0-beta.13
13
+ - @dt-dds/react-label-field@1.0.0-beta.41
14
+ - @dt-dds/react-tooltip@1.0.0-beta.53
15
+ - @dt-dds/react-typography@1.0.0-beta.36
16
+ - @dt-dds/themes@1.0.0-beta.5
17
+
18
+ ## 1.0.0-beta.49
19
+
20
+ ### Patch Changes
21
+
22
+ - refactor(themes): consolidate theme structure
23
+ - Updated dependencies
24
+ - @dt-dds/react-checkbox@1.0.0-beta.43
25
+ - @dt-dds/react-core@1.0.0-beta.44
26
+ - @dt-dds/react-icon@1.0.0-beta.45
27
+ - @dt-dds/react-icon-button@1.0.0-beta.12
28
+ - @dt-dds/react-label-field@1.0.0-beta.40
29
+ - @dt-dds/react-tooltip@1.0.0-beta.52
30
+ - @dt-dds/react-typography@1.0.0-beta.35
31
+ - @dt-dds/themes@1.0.0-beta.4
32
+
3
33
  ## 1.0.0-beta.48
4
34
 
5
35
  ### Minor Changes
package/dist/index.d.mts ADDED
@@ -0,0 +1,51 @@
1
+ import { CustomTheme } from '@dt-dds/themes';
2
+ import { BaseProps } from '@dt-dds/react-core';
3
+ import * as react_jsx_runtime from 'react/jsx-runtime';
4
+
5
+ interface SelectOptionProps extends BaseProps {
6
+ value: string;
7
+ label?: string;
8
+ index: number;
9
+ disabled?: boolean;
10
+ }
11
+
12
+ type SelectOptionValue = {
13
+ label?: string;
14
+ value: string;
15
+ disabled?: boolean;
16
+ };
17
+ type SelectVariant = 'outlined' | 'bottom-line';
18
+ type SelectFill = 'default' | 'contrast' | 'light';
19
+
20
+ interface BaseSelectProps extends BaseProps {
21
+ helperText?: string;
22
+ hasError?: boolean;
23
+ label: string;
24
+ isRequired?: boolean;
25
+ errorMessage?: string;
26
+ isDisabled?: boolean;
27
+ variant?: SelectVariant;
28
+ fill?: SelectFill;
29
+ }
30
+ interface SingleSelectProps extends BaseSelectProps {
31
+ isMulti?: false;
32
+ initialValue?: string;
33
+ onChange?: (value: string) => void;
34
+ }
35
+ interface MultiSelectProps extends BaseSelectProps {
36
+ isMulti: true;
37
+ initialValue?: string[];
38
+ onChange?: (value: string[]) => void;
39
+ }
40
+ type SelectProps = SingleSelectProps | MultiSelectProps;
41
+ declare const Select: {
42
+ ({ dataTestId, style, helperText, hasError, initialValue, label, isMulti, isRequired, errorMessage, children, isDisabled, variant, fill, onChange, }: SelectProps): react_jsx_runtime.JSX.Element;
43
+ Option: ({ dataTestId, index, children, style, value, label, disabled, }: SelectOptionProps) => react_jsx_runtime.JSX.Element;
44
+ };
45
+
46
+ declare module '@emotion/react' {
47
+ interface Theme extends CustomTheme {
48
+ }
49
+ }
50
+
51
+ export { Select, type SelectFill, type SelectOptionValue, type SelectProps, type SelectVariant };
package/dist/index.d.ts CHANGED
@@ -48,4 +48,4 @@ declare module '@emotion/react' {
48
48
  }
49
49
  }
50
50
 
51
- export { Select, SelectFill, SelectOptionValue, SelectProps, SelectVariant };
51
+ export { Select, type SelectFill, type SelectOptionValue, type SelectProps, type SelectVariant };
package/dist/index.js CHANGED
@@ -57,11 +57,11 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
57
57
  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
58
58
 
59
59
  // index.ts
60
- var select_exports = {};
61
- __export(select_exports, {
60
+ var index_exports = {};
61
+ __export(index_exports, {
62
62
  Select: () => Select
63
63
  });
64
- module.exports = __toCommonJS(select_exports);
64
+ module.exports = __toCommonJS(index_exports);
65
65
 
66
66
  // src/Select.tsx
67
67
  var import_react_core2 = require("@dt-dds/react-core");
@@ -115,15 +115,15 @@ var SelectOptionStyled = import_styled.default.li`
115
115
  ${({ theme, isMulti, isHighlighted }) => `
116
116
  cursor:pointer;
117
117
  align-items: center;
118
- ${!isMulti && `padding: ${theme.spacing["4xs"]} ${theme.spacing["2xs"]}`};
119
- gap: ${isMulti ? theme.spacing["4xs"] : theme.spacing["5xs"]};
118
+ ${!isMulti && `padding: ${theme.spacing.spacing_30} ${theme.spacing.spacing_50}`};
119
+ gap: ${isMulti ? theme.spacing.spacing_30 : theme.spacing.spacing_20};
120
120
  background-color: ${isHighlighted && !isMulti ? theme.palette.primary.light : theme.palette.surface.contrast};
121
121
 
122
122
  color: ${theme.palette.content.default};
123
- ${theme.fontStyles.body2}
123
+ ${theme.fontStyles.bodyMdRegular}
124
124
 
125
125
  & > label {
126
- ${isMulti && `padding: ${theme.spacing["4xs"]} ${theme.spacing["2xs"]}`};
126
+ ${isMulti && `padding: ${theme.spacing.spacing_30} ${theme.spacing.spacing_50}`};
127
127
  }
128
128
 
129
129
  &:hover,&:focus-within {
@@ -146,7 +146,7 @@ var SelectOptionContentStyled = import_styled.default.div`
146
146
  width: 100%;
147
147
 
148
148
  ${({ theme, isSelected }) => `
149
- ${theme.fontStyles[isSelected ? "body2Bold" : "body2"]};
149
+ ${theme.fontStyles[isSelected ? "bodyMdBold" : "bodyMdRegular"]};
150
150
  `}
151
151
  `;
152
152
 
@@ -219,12 +219,12 @@ var SelectMenuStyled = import_styled2.default.ul`
219
219
  overflow: auto;
220
220
 
221
221
  ${({ isOpen, theme }) => `
222
- margin-top:${theme.spacing["5xs"]};
223
- padding: ${theme.spacing["2xs"]} ${theme.spacing.none};
222
+ margin-top:${theme.spacing.spacing_20};
223
+ padding: ${theme.spacing.spacing_50} ${theme.spacing.spacing_0};
224
224
  background-color: ${theme.palette.surface.contrast};
225
225
  display: ${isOpen ? "block" : "none"};
226
226
  border-radius: ${theme.shape.formField};
227
- box-shadow: ${theme.shadows.s};
227
+ box-shadow: ${theme.shadows.elevation_200};
228
228
  `}
229
229
  `;
230
230
  var SelectValueContainerStyled = import_styled2.default.div`
@@ -239,7 +239,7 @@ var SelectValueStyled = import_styled2.default.div`
239
239
  white-space: nowrap;
240
240
 
241
241
  ${({ theme }) => `
242
- ${theme.fontStyles.body2}
242
+ ${theme.fontStyles.bodyMdRegular}
243
243
  color: ${theme.palette.content.default};
244
244
  `}
245
245
  `;
@@ -259,10 +259,10 @@ var SelectContainerStyled = import_styled2.default.div`
259
259
  variant = "outlined",
260
260
  fill = "default"
261
261
  }) => `
262
- ${theme.fontStyles.body2}
262
+ ${theme.fontStyles.bodyMdRegular}
263
263
  color: ${disabled ? theme.palette.content.light : theme.palette.content.default};
264
- padding: ${theme.spacing["4xs"]} ${theme.spacing["3xs"]};
265
- gap: ${theme.spacing["4xs"]} ;
264
+ padding: ${theme.spacing.spacing_30} ${theme.spacing.spacing_40};
265
+ gap: ${theme.spacing.spacing_30} ;
266
266
  background-color: ${getThemedBackgroundFill(fill, theme)};
267
267
  border-radius: ${theme.shape.formField};
268
268
  cursor: ${disabled ? "not-allowed" : "pointer"};
@@ -283,7 +283,7 @@ var SelectActionContainerStyled = import_styled2.default.div`
283
283
  `;
284
284
  var HelperSelectFieldMessageStyled = import_styled2.default.div`
285
285
  ${({ theme }) => `
286
- padding-left: ${theme.spacing["2xs"]};
286
+ padding-left: ${theme.spacing.spacing_50};
287
287
  `}
288
288
  `;
289
289
 
@@ -493,7 +493,7 @@ var Select = ({
493
493
  {
494
494
  color: hasError ? "error.default" : "content.light",
495
495
  element: "span",
496
- fontStyles: "body3",
496
+ fontStyles: "bodySmRegular",
497
497
  children: helperMessage
498
498
  }
499
499
  ) }) : null
package/dist/index.mjs CHANGED
@@ -90,15 +90,15 @@ var SelectOptionStyled = styled.li`
90
90
  ${({ theme, isMulti, isHighlighted }) => `
91
91
  cursor:pointer;
92
92
  align-items: center;
93
- ${!isMulti && `padding: ${theme.spacing["4xs"]} ${theme.spacing["2xs"]}`};
94
- gap: ${isMulti ? theme.spacing["4xs"] : theme.spacing["5xs"]};
93
+ ${!isMulti && `padding: ${theme.spacing.spacing_30} ${theme.spacing.spacing_50}`};
94
+ gap: ${isMulti ? theme.spacing.spacing_30 : theme.spacing.spacing_20};
95
95
  background-color: ${isHighlighted && !isMulti ? theme.palette.primary.light : theme.palette.surface.contrast};
96
96
 
97
97
  color: ${theme.palette.content.default};
98
- ${theme.fontStyles.body2}
98
+ ${theme.fontStyles.bodyMdRegular}
99
99
 
100
100
  & > label {
101
- ${isMulti && `padding: ${theme.spacing["4xs"]} ${theme.spacing["2xs"]}`};
101
+ ${isMulti && `padding: ${theme.spacing.spacing_30} ${theme.spacing.spacing_50}`};
102
102
  }
103
103
 
104
104
  &:hover,&:focus-within {
@@ -121,7 +121,7 @@ var SelectOptionContentStyled = styled.div`
121
121
  width: 100%;
122
122
 
123
123
  ${({ theme, isSelected }) => `
124
- ${theme.fontStyles[isSelected ? "body2Bold" : "body2"]};
124
+ ${theme.fontStyles[isSelected ? "bodyMdBold" : "bodyMdRegular"]};
125
125
  `}
126
126
  `;
127
127
 
@@ -194,12 +194,12 @@ var SelectMenuStyled = styled2.ul`
194
194
  overflow: auto;
195
195
 
196
196
  ${({ isOpen, theme }) => `
197
- margin-top:${theme.spacing["5xs"]};
198
- padding: ${theme.spacing["2xs"]} ${theme.spacing.none};
197
+ margin-top:${theme.spacing.spacing_20};
198
+ padding: ${theme.spacing.spacing_50} ${theme.spacing.spacing_0};
199
199
  background-color: ${theme.palette.surface.contrast};
200
200
  display: ${isOpen ? "block" : "none"};
201
201
  border-radius: ${theme.shape.formField};
202
- box-shadow: ${theme.shadows.s};
202
+ box-shadow: ${theme.shadows.elevation_200};
203
203
  `}
204
204
  `;
205
205
  var SelectValueContainerStyled = styled2.div`
@@ -214,7 +214,7 @@ var SelectValueStyled = styled2.div`
214
214
  white-space: nowrap;
215
215
 
216
216
  ${({ theme }) => `
217
- ${theme.fontStyles.body2}
217
+ ${theme.fontStyles.bodyMdRegular}
218
218
  color: ${theme.palette.content.default};
219
219
  `}
220
220
  `;
@@ -234,10 +234,10 @@ var SelectContainerStyled = styled2.div`
234
234
  variant = "outlined",
235
235
  fill = "default"
236
236
  }) => `
237
- ${theme.fontStyles.body2}
237
+ ${theme.fontStyles.bodyMdRegular}
238
238
  color: ${disabled ? theme.palette.content.light : theme.palette.content.default};
239
- padding: ${theme.spacing["4xs"]} ${theme.spacing["3xs"]};
240
- gap: ${theme.spacing["4xs"]} ;
239
+ padding: ${theme.spacing.spacing_30} ${theme.spacing.spacing_40};
240
+ gap: ${theme.spacing.spacing_30} ;
241
241
  background-color: ${getThemedBackgroundFill(fill, theme)};
242
242
  border-radius: ${theme.shape.formField};
243
243
  cursor: ${disabled ? "not-allowed" : "pointer"};
@@ -258,7 +258,7 @@ var SelectActionContainerStyled = styled2.div`
258
258
  `;
259
259
  var HelperSelectFieldMessageStyled = styled2.div`
260
260
  ${({ theme }) => `
261
- padding-left: ${theme.spacing["2xs"]};
261
+ padding-left: ${theme.spacing.spacing_50};
262
262
  `}
263
263
  `;
264
264
 
@@ -468,7 +468,7 @@ var Select = ({
468
468
  {
469
469
  color: hasError ? "error.default" : "content.light",
470
470
  element: "span",
471
- fontStyles: "body3",
471
+ fontStyles: "bodySmRegular",
472
472
  children: helperMessage
473
473
  }
474
474
  ) }) : null
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dt-dds/react-select",
3
- "version": "1.0.0-beta.48",
3
+ "version": "1.0.0-beta.50",
4
4
  "license": "MIT",
5
5
  "exports": {
6
6
  ".": "./dist/index.js"
@@ -20,14 +20,14 @@
20
20
  "test:update:snapshot": "jest -u"
21
21
  },
22
22
  "dependencies": {
23
- "@dt-dds/react-checkbox": "1.0.0-beta.42",
24
- "@dt-dds/react-core": "1.0.0-beta.43",
25
- "@dt-dds/react-icon": "1.0.0-beta.44",
26
- "@dt-dds/react-icon-button": "1.0.0-beta.11",
27
- "@dt-dds/react-label-field": "1.0.0-beta.39",
28
- "@dt-dds/react-tooltip": "1.0.0-beta.51",
29
- "@dt-dds/react-typography": "1.0.0-beta.34",
30
- "@dt-dds/themes": "1.0.0-beta.3",
23
+ "@dt-dds/react-checkbox": "1.0.0-beta.44",
24
+ "@dt-dds/react-core": "1.0.0-beta.45",
25
+ "@dt-dds/react-icon": "1.0.0-beta.46",
26
+ "@dt-dds/react-icon-button": "1.0.0-beta.13",
27
+ "@dt-dds/react-label-field": "1.0.0-beta.41",
28
+ "@dt-dds/react-tooltip": "1.0.0-beta.53",
29
+ "@dt-dds/react-typography": "1.0.0-beta.36",
30
+ "@dt-dds/themes": "1.0.0-beta.5",
31
31
  "downshift": "^9.0.4"
32
32
  },
33
33
  "devDependencies": {
@@ -49,7 +49,7 @@
49
49
  "react": "^18.1.0",
50
50
  "react-dom": "^18.2.0",
51
51
  "tsconfig": "*",
52
- "tsup": "^6.6.3",
52
+ "tsup": "^8.5.0",
53
53
  "typescript": "^4.5.3"
54
54
  },
55
55
  "peerDependencies": {