@dt-dds/react-dropdown 1.0.0-beta.35 → 1.0.0-beta.37
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 +28 -0
- package/dist/index.d.mts +78 -0
- package/dist/index.d.ts +1 -1
- package/dist/index.js +13 -13
- package/dist/index.mjs +10 -10
- package/package.json +8 -8
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,33 @@
|
|
|
1
1
|
# @dt-ui/react-dropdown
|
|
2
2
|
|
|
3
|
+
## 1.0.0-beta.37
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- chore(dependencies): upgrade builders versions
|
|
8
|
+
- Updated dependencies
|
|
9
|
+
- Updated dependencies [223664b]
|
|
10
|
+
- @dt-dds/react-box@1.0.0-beta.16
|
|
11
|
+
- @dt-dds/react-core@1.0.0-beta.45
|
|
12
|
+
- @dt-dds/react-icon@1.0.0-beta.46
|
|
13
|
+
- @dt-dds/react-icon-button@1.0.0-beta.13
|
|
14
|
+
- @dt-dds/react-typography@1.0.0-beta.36
|
|
15
|
+
- @dt-dds/themes@1.0.0-beta.5
|
|
16
|
+
|
|
17
|
+
## 1.0.0-beta.36
|
|
18
|
+
|
|
19
|
+
### Patch Changes
|
|
20
|
+
|
|
21
|
+
- refactor(themes): consolidate theme structure
|
|
22
|
+
- Updated dependencies
|
|
23
|
+
- Updated dependencies [223664b]
|
|
24
|
+
- @dt-dds/react-core@1.0.0-beta.44
|
|
25
|
+
- @dt-dds/react-icon@1.0.0-beta.45
|
|
26
|
+
- @dt-dds/react-icon-button@1.0.0-beta.12
|
|
27
|
+
- @dt-dds/react-typography@1.0.0-beta.35
|
|
28
|
+
- @dt-dds/themes@1.0.0-beta.4
|
|
29
|
+
- @dt-dds/react-box@1.0.0-beta.15
|
|
30
|
+
|
|
3
31
|
## 1.0.0-beta.35
|
|
4
32
|
|
|
5
33
|
### Patch Changes
|
package/dist/index.d.mts
ADDED
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
import { CustomTheme } from '@dt-dds/themes';
|
|
2
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
3
|
+
import { BaseProps } from '@dt-dds/react-core';
|
|
4
|
+
import * as react from 'react';
|
|
5
|
+
import { MouseEvent, ReactNode } from 'react';
|
|
6
|
+
|
|
7
|
+
interface DropdownDetailProps extends BaseProps {
|
|
8
|
+
isDisabled?: boolean;
|
|
9
|
+
hasError?: boolean;
|
|
10
|
+
}
|
|
11
|
+
declare const DropdownDetail: ({ dataTestId, isDisabled, hasError, children, }: DropdownDetailProps) => react_jsx_runtime.JSX.Element;
|
|
12
|
+
|
|
13
|
+
type DropdownOptionValue = {
|
|
14
|
+
text?: string;
|
|
15
|
+
value: string;
|
|
16
|
+
};
|
|
17
|
+
type DropdownVariant = 'outlined' | 'bottom-line';
|
|
18
|
+
type DropdownFill = 'default' | 'contrast' | 'light';
|
|
19
|
+
|
|
20
|
+
interface DropdownOptionProps extends BaseProps {
|
|
21
|
+
fill?: DropdownFill;
|
|
22
|
+
option: DropdownOptionValue;
|
|
23
|
+
isDisabled?: boolean;
|
|
24
|
+
onClick?: (option: string, name: string | undefined, event: MouseEvent<HTMLLIElement>) => void;
|
|
25
|
+
}
|
|
26
|
+
declare const DropdownOption: ({ dataTestId, option, children, style, isDisabled, onClick, }: DropdownOptionProps) => react_jsx_runtime.JSX.Element;
|
|
27
|
+
|
|
28
|
+
type DropdownSelectProps = {
|
|
29
|
+
label?: string;
|
|
30
|
+
isDisabled?: boolean;
|
|
31
|
+
isRequired?: boolean;
|
|
32
|
+
hasBorder?: boolean;
|
|
33
|
+
hasError?: boolean;
|
|
34
|
+
hasDeselect?: boolean;
|
|
35
|
+
variant?: DropdownVariant;
|
|
36
|
+
fill?: DropdownFill;
|
|
37
|
+
} & BaseProps;
|
|
38
|
+
declare const DropdownSelect: ({ children, label, style, dataTestId, isDisabled, isRequired, hasBorder, hasError, hasDeselect, variant, fill, }: DropdownSelectProps) => react_jsx_runtime.JSX.Element;
|
|
39
|
+
|
|
40
|
+
declare const DropdownContainer: ({ children, style, dataTestId, }: BaseProps) => react_jsx_runtime.JSX.Element;
|
|
41
|
+
|
|
42
|
+
declare const DropdownMenu: ({ children, dataTestId, style }: BaseProps) => react_jsx_runtime.JSX.Element;
|
|
43
|
+
|
|
44
|
+
interface DropdownProps extends BaseProps {
|
|
45
|
+
defaultValue?: DropdownOptionValue;
|
|
46
|
+
name?: string;
|
|
47
|
+
}
|
|
48
|
+
declare const Dropdown: {
|
|
49
|
+
({ children, defaultValue, style, name, dataTestId, }: DropdownProps): react_jsx_runtime.JSX.Element;
|
|
50
|
+
Container: ({ children, style, dataTestId, }: BaseProps) => react_jsx_runtime.JSX.Element;
|
|
51
|
+
Detail: ({ dataTestId, isDisabled, hasError, children, }: DropdownDetailProps) => react_jsx_runtime.JSX.Element;
|
|
52
|
+
Select: ({ children, label, style, dataTestId, isDisabled, isRequired, hasBorder, hasError, hasDeselect, variant, fill, }: DropdownSelectProps) => react_jsx_runtime.JSX.Element;
|
|
53
|
+
Option: ({ dataTestId, option, children, style, isDisabled, onClick, }: DropdownOptionProps) => react_jsx_runtime.JSX.Element;
|
|
54
|
+
Menu: ({ children, dataTestId, style }: BaseProps) => react_jsx_runtime.JSX.Element;
|
|
55
|
+
};
|
|
56
|
+
|
|
57
|
+
interface DropdownContextState {
|
|
58
|
+
state: DropdownOptionValue;
|
|
59
|
+
isOpen: boolean;
|
|
60
|
+
name?: string;
|
|
61
|
+
setState: React.Dispatch<React.SetStateAction<DropdownOptionValue>>;
|
|
62
|
+
setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
|
|
63
|
+
}
|
|
64
|
+
interface DropdownContextProviderProps {
|
|
65
|
+
children: ReactNode;
|
|
66
|
+
defaultValue?: DropdownOptionValue;
|
|
67
|
+
name?: string;
|
|
68
|
+
}
|
|
69
|
+
declare const DropdownContext: react.Context<DropdownContextState>;
|
|
70
|
+
declare const DropdownContextProvider: ({ children, defaultValue, name, }: DropdownContextProviderProps) => react_jsx_runtime.JSX.Element;
|
|
71
|
+
declare const useDropdownContext: () => DropdownContextState;
|
|
72
|
+
|
|
73
|
+
declare module '@emotion/react' {
|
|
74
|
+
interface Theme extends CustomTheme {
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
export { Dropdown, DropdownContainer, DropdownContext, DropdownContextProvider, DropdownDetail, type DropdownDetailProps, type DropdownFill, DropdownMenu, DropdownOption, type DropdownOptionProps, type DropdownOptionValue, DropdownSelect, type DropdownSelectProps, type DropdownVariant, useDropdownContext };
|
package/dist/index.d.ts
CHANGED
|
@@ -75,4 +75,4 @@ declare module '@emotion/react' {
|
|
|
75
75
|
}
|
|
76
76
|
}
|
|
77
77
|
|
|
78
|
-
export { Dropdown, DropdownContainer, DropdownContext, DropdownContextProvider, DropdownDetail, DropdownDetailProps, DropdownFill, DropdownMenu, DropdownOption, DropdownOptionProps, DropdownOptionValue, DropdownSelect, DropdownSelectProps, DropdownVariant, useDropdownContext };
|
|
78
|
+
export { Dropdown, DropdownContainer, DropdownContext, DropdownContextProvider, DropdownDetail, type DropdownDetailProps, type DropdownFill, DropdownMenu, DropdownOption, type DropdownOptionProps, type DropdownOptionValue, DropdownSelect, type DropdownSelectProps, type DropdownVariant, useDropdownContext };
|
package/dist/index.js
CHANGED
|
@@ -28,8 +28,8 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
|
|
|
28
28
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
29
|
|
|
30
30
|
// index.ts
|
|
31
|
-
var
|
|
32
|
-
__export(
|
|
31
|
+
var index_exports = {};
|
|
32
|
+
__export(index_exports, {
|
|
33
33
|
Dropdown: () => Dropdown_default,
|
|
34
34
|
DropdownContainer: () => DropdownContainer,
|
|
35
35
|
DropdownContext: () => DropdownContext,
|
|
@@ -40,7 +40,7 @@ __export(dropdown_exports, {
|
|
|
40
40
|
DropdownSelect: () => DropdownSelect,
|
|
41
41
|
useDropdownContext: () => useDropdownContext
|
|
42
42
|
});
|
|
43
|
-
module.exports = __toCommonJS(
|
|
43
|
+
module.exports = __toCommonJS(index_exports);
|
|
44
44
|
|
|
45
45
|
// src/components/detail/DropdownDetail.tsx
|
|
46
46
|
var import_react_typography = require("@dt-dds/react-typography");
|
|
@@ -68,7 +68,7 @@ var DropdownDetail = ({
|
|
|
68
68
|
{
|
|
69
69
|
color: hasError ? "error.default" : messageColor,
|
|
70
70
|
element: "span",
|
|
71
|
-
fontStyles: "
|
|
71
|
+
fontStyles: "bodySmRegular",
|
|
72
72
|
children
|
|
73
73
|
}
|
|
74
74
|
) });
|
|
@@ -123,10 +123,10 @@ var useDropdownContext = () => {
|
|
|
123
123
|
var import_styled2 = __toESM(require("@emotion/styled"));
|
|
124
124
|
var DropdownOptionStyled = import_styled2.default.li`
|
|
125
125
|
${({ theme, disabled, isSelected }) => `
|
|
126
|
-
${theme.fontStyles[isSelected ? "
|
|
126
|
+
${theme.fontStyles[isSelected ? "bodyMdBold" : "bodyMdRegular"]};
|
|
127
127
|
color: ${theme.palette.content.default};
|
|
128
128
|
list-style: none;
|
|
129
|
-
padding: ${theme.spacing
|
|
129
|
+
padding: ${theme.spacing.spacing_30} ${theme.spacing.spacing_50};
|
|
130
130
|
text-overflow: ellipsis;
|
|
131
131
|
overflow-x: hidden;
|
|
132
132
|
|
|
@@ -199,8 +199,8 @@ var DropdownMenuStyled = import_styled3.default.ul`
|
|
|
199
199
|
border: 1px solid ${theme.palette.border.default};
|
|
200
200
|
border-radius: ${theme.shape.dropdown};
|
|
201
201
|
width: 100%;
|
|
202
|
-
padding:${theme.spacing
|
|
203
|
-
margin: ${theme.spacing
|
|
202
|
+
padding:${theme.spacing.spacing_50} ${theme.spacing.spacing_0};
|
|
203
|
+
margin: ${theme.spacing.spacing_20} ${theme.spacing.spacing_0};
|
|
204
204
|
position: absolute;
|
|
205
205
|
right: 0;
|
|
206
206
|
z-index: ${import_react_core.DROPDOWN_MENU_Z_INDEX};
|
|
@@ -243,7 +243,7 @@ var SelectDropdownStyled = import_styled4.default.button`
|
|
|
243
243
|
const errorBorderColor = theme.palette.error.default;
|
|
244
244
|
return `
|
|
245
245
|
background: ${theme.palette.surface.contrast};
|
|
246
|
-
padding: ${theme.spacing.
|
|
246
|
+
padding: ${theme.spacing.spacing_30} ${hasBorder ? theme.spacing.spacing_50 : "0"};
|
|
247
247
|
position: relative;
|
|
248
248
|
display: flex;
|
|
249
249
|
align-items: center;
|
|
@@ -346,7 +346,7 @@ var DropdownSelect = ({
|
|
|
346
346
|
import_react_typography2.Typography,
|
|
347
347
|
{
|
|
348
348
|
color: disabled ? "content.light" : "content.default",
|
|
349
|
-
fontStyles: "
|
|
349
|
+
fontStyles: "bodySmRegular",
|
|
350
350
|
children: [
|
|
351
351
|
label,
|
|
352
352
|
isRequired ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
@@ -354,7 +354,7 @@ var DropdownSelect = ({
|
|
|
354
354
|
{
|
|
355
355
|
color: "error.default",
|
|
356
356
|
element: "span",
|
|
357
|
-
fontStyles: "
|
|
357
|
+
fontStyles: "bodySmRegular",
|
|
358
358
|
children: "*"
|
|
359
359
|
}
|
|
360
360
|
) : null
|
|
@@ -365,7 +365,7 @@ var DropdownSelect = ({
|
|
|
365
365
|
import_react_typography2.Typography,
|
|
366
366
|
{
|
|
367
367
|
color: disabled ? "content.light" : "content.default",
|
|
368
|
-
fontStyles: "
|
|
368
|
+
fontStyles: "bodyMdRegular",
|
|
369
369
|
style: { textOverflow: "ellipsis", overflow: "hidden" },
|
|
370
370
|
children: !state.value ? "Select an option" : state.text
|
|
371
371
|
}
|
|
@@ -416,7 +416,7 @@ var DropdownContainer = ({
|
|
|
416
416
|
var import_styled5 = __toESM(require("@emotion/styled"));
|
|
417
417
|
var DropdownStyled = import_styled5.default.div`
|
|
418
418
|
${({ theme, style }) => `
|
|
419
|
-
margin: ${theme.spacing.
|
|
419
|
+
margin: ${theme.spacing.spacing_0};
|
|
420
420
|
display: inline-block;
|
|
421
421
|
position: relative;
|
|
422
422
|
width: 100%;
|
package/dist/index.mjs
CHANGED
|
@@ -24,7 +24,7 @@ var DropdownDetail = ({
|
|
|
24
24
|
{
|
|
25
25
|
color: hasError ? "error.default" : messageColor,
|
|
26
26
|
element: "span",
|
|
27
|
-
fontStyles: "
|
|
27
|
+
fontStyles: "bodySmRegular",
|
|
28
28
|
children
|
|
29
29
|
}
|
|
30
30
|
) });
|
|
@@ -84,10 +84,10 @@ var useDropdownContext = () => {
|
|
|
84
84
|
import styled2 from "@emotion/styled";
|
|
85
85
|
var DropdownOptionStyled = styled2.li`
|
|
86
86
|
${({ theme, disabled, isSelected }) => `
|
|
87
|
-
${theme.fontStyles[isSelected ? "
|
|
87
|
+
${theme.fontStyles[isSelected ? "bodyMdBold" : "bodyMdRegular"]};
|
|
88
88
|
color: ${theme.palette.content.default};
|
|
89
89
|
list-style: none;
|
|
90
|
-
padding: ${theme.spacing
|
|
90
|
+
padding: ${theme.spacing.spacing_30} ${theme.spacing.spacing_50};
|
|
91
91
|
text-overflow: ellipsis;
|
|
92
92
|
overflow-x: hidden;
|
|
93
93
|
|
|
@@ -160,8 +160,8 @@ var DropdownMenuStyled = styled3.ul`
|
|
|
160
160
|
border: 1px solid ${theme.palette.border.default};
|
|
161
161
|
border-radius: ${theme.shape.dropdown};
|
|
162
162
|
width: 100%;
|
|
163
|
-
padding:${theme.spacing
|
|
164
|
-
margin: ${theme.spacing
|
|
163
|
+
padding:${theme.spacing.spacing_50} ${theme.spacing.spacing_0};
|
|
164
|
+
margin: ${theme.spacing.spacing_20} ${theme.spacing.spacing_0};
|
|
165
165
|
position: absolute;
|
|
166
166
|
right: 0;
|
|
167
167
|
z-index: ${DROPDOWN_MENU_Z_INDEX};
|
|
@@ -204,7 +204,7 @@ var SelectDropdownStyled = styled4.button`
|
|
|
204
204
|
const errorBorderColor = theme.palette.error.default;
|
|
205
205
|
return `
|
|
206
206
|
background: ${theme.palette.surface.contrast};
|
|
207
|
-
padding: ${theme.spacing.
|
|
207
|
+
padding: ${theme.spacing.spacing_30} ${hasBorder ? theme.spacing.spacing_50 : "0"};
|
|
208
208
|
position: relative;
|
|
209
209
|
display: flex;
|
|
210
210
|
align-items: center;
|
|
@@ -307,7 +307,7 @@ var DropdownSelect = ({
|
|
|
307
307
|
Typography2,
|
|
308
308
|
{
|
|
309
309
|
color: disabled ? "content.light" : "content.default",
|
|
310
|
-
fontStyles: "
|
|
310
|
+
fontStyles: "bodySmRegular",
|
|
311
311
|
children: [
|
|
312
312
|
label,
|
|
313
313
|
isRequired ? /* @__PURE__ */ jsx5(
|
|
@@ -315,7 +315,7 @@ var DropdownSelect = ({
|
|
|
315
315
|
{
|
|
316
316
|
color: "error.default",
|
|
317
317
|
element: "span",
|
|
318
|
-
fontStyles: "
|
|
318
|
+
fontStyles: "bodySmRegular",
|
|
319
319
|
children: "*"
|
|
320
320
|
}
|
|
321
321
|
) : null
|
|
@@ -326,7 +326,7 @@ var DropdownSelect = ({
|
|
|
326
326
|
Typography2,
|
|
327
327
|
{
|
|
328
328
|
color: disabled ? "content.light" : "content.default",
|
|
329
|
-
fontStyles: "
|
|
329
|
+
fontStyles: "bodyMdRegular",
|
|
330
330
|
style: { textOverflow: "ellipsis", overflow: "hidden" },
|
|
331
331
|
children: !state.value ? "Select an option" : state.text
|
|
332
332
|
}
|
|
@@ -377,7 +377,7 @@ var DropdownContainer = ({
|
|
|
377
377
|
import styled5 from "@emotion/styled";
|
|
378
378
|
var DropdownStyled = styled5.div`
|
|
379
379
|
${({ theme, style }) => `
|
|
380
|
-
margin: ${theme.spacing.
|
|
380
|
+
margin: ${theme.spacing.spacing_0};
|
|
381
381
|
display: inline-block;
|
|
382
382
|
position: relative;
|
|
383
383
|
width: 100%;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dt-dds/react-dropdown",
|
|
3
|
-
"version": "1.0.0-beta.
|
|
3
|
+
"version": "1.0.0-beta.37",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"exports": {
|
|
6
6
|
".": "./dist/index.js"
|
|
@@ -20,12 +20,12 @@
|
|
|
20
20
|
"test:update:snapshot": "jest -u"
|
|
21
21
|
},
|
|
22
22
|
"dependencies": {
|
|
23
|
-
"@dt-dds/react-box": "1.0.0-beta.
|
|
24
|
-
"@dt-dds/react-core": "1.0.0-beta.
|
|
25
|
-
"@dt-dds/react-icon": "1.0.0-beta.
|
|
26
|
-
"@dt-dds/react-icon-button": "1.0.0-beta.
|
|
27
|
-
"@dt-dds/react-typography": "1.0.0-beta.
|
|
28
|
-
"@dt-dds/themes": "1.0.0-beta.
|
|
23
|
+
"@dt-dds/react-box": "1.0.0-beta.16",
|
|
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-typography": "1.0.0-beta.36",
|
|
28
|
+
"@dt-dds/themes": "1.0.0-beta.5"
|
|
29
29
|
},
|
|
30
30
|
"devDependencies": {
|
|
31
31
|
"@babel/core": "^7.22.9",
|
|
@@ -46,7 +46,7 @@
|
|
|
46
46
|
"react": "^18.1.0",
|
|
47
47
|
"react-dom": "^18.2.0",
|
|
48
48
|
"tsconfig": "*",
|
|
49
|
-
"tsup": "^
|
|
49
|
+
"tsup": "^8.5.0",
|
|
50
50
|
"typescript": "^4.5.3"
|
|
51
51
|
},
|
|
52
52
|
"peerDependencies": {
|