@dotss/ui 1.0.11 → 1.1.0
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/.npmrc +1 -0
- package/Button/Button.cjs +6 -6
- package/Button/Button.d.ts +6 -5
- package/Button/Button.es.js +126 -124
- package/Button/Button.stories.d.ts +7 -1
- package/Menu/Menu.cjs +2 -2
- package/Menu/Menu.es.js +4 -4
- package/Menu/MenuButton/MenuButton.d.ts +1 -1
- package/package.json +3 -2
package/.npmrc
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
//registry.npmjs.org/:_authToken=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
|
package/Button/Button.cjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const M=require("@emotion/react/jsx-runtime"),b=require("react"),z=require("../hooks/useCheckHoverPossible/useCheckHoverPossible.cjs"),W=require("../utils/getIconLabel/getIconLabel.cjs"),j=require("@emotion/styled"),a=require("../utils/getContrastingTextColor/getContrastingTextColor.cjs"),m=l=>l&&l.__esModule?l:{default:l},_=m(j),q=_.default.button`
|
|
2
2
|
display: inline-flex;
|
|
3
3
|
align-items: center;
|
|
4
4
|
justify-content: center;
|
|
@@ -7,18 +7,18 @@
|
|
|
7
7
|
color: inherit;
|
|
8
8
|
}
|
|
9
9
|
|
|
10
|
-
${({theme:{palette:{brand:l,grey:e}},variant:
|
|
10
|
+
${({theme:{palette:{brand:l,grey:e}},variant:t,color:o})=>{let p={backgroundColor:l.primary.main,color:a.default(l.primary.main,[e.white,e[100]])};return t==="filled"&&o==="secondary"&&(p={backgroundColor:l.secondary,color:a.default(l.secondary,[e.white,e[100]])}),t==="filled"&&o==="tertiary"&&(p={backgroundColor:l.tertiary,color:a.default(l.tertiary,[e.white,e[100]])}),t==="outlined"&&(p={borderColor:e[50],backgroundColor:e.white,color:a.default(e.white,[e.white,e[100]])}),t==="text"&&o==="primary"&&(p={backgroundColor:"transparent",color:a.default("transparent",[e.white,e[100]])}),t==="text"&&o==="secondary"&&(p={backgroundColor:"transparent",color:e[70]}),p}};
|
|
11
11
|
|
|
12
|
-
${({theme:{spacing:l,typography:e},variant:
|
|
12
|
+
${({theme:{spacing:l,typography:e},variant:t,size:o,startAdornment:p,endAdornment:r,iconOnly:f})=>{let u={gap:l.content(1),padding:10,borderRadius:8,fontSize:e.b4M.size,fontWeight:e.b4M.weight,lineHeight:e.b4M.lineHeight,letterSpacing:e.b4M.letterSpacing,"& svg":{width:20,height:20}};if(o==="2xLarge"){const{h0B:i}=e;let x="26px 24px";p&&(x=t==="text"?"26px 16px 26px 12px":"26px 36px 26px 24px"),r&&(x=t==="text"?"26px 12px 26px 16px":"26px 24px 26px 36px"),p&&r&&(x=t==="text"?"26px 12px":"26px 24px"),f&&(x="26px 25px"),u={gap:l.content(3),maxHeight:100,padding:x,borderRadius:20,fontSize:i.size,fontWeight:i.weight,lineHeight:i.lineHeight,letterSpacing:i.letterSpacing,"& svg":{width:48,height:48}}}if(o==="xLarge"){const{h4B:i}=e;let x="16px 12px";p&&(x=t==="text"?"16px 8px 16px 4px":"16px 16px 16px 12px"),r&&(x=t==="text"?"16px 4px 16px 8px":"16px 12px 16px 16px"),p&&r&&(x=t==="text"?"16px 4px":"16px 12px"),f&&(x="16px 15px"),u={gap:l.content(2),maxHeight:56,padding:x,borderRadius:12,fontSize:i.size,fontWeight:i.weight,lineHeight:i.lineHeight,letterSpacing:i.letterSpacing,"& svg":{width:24,height:24}}}if(o==="large"){const{b2M:i}=e;let x="12px 8px";p&&(x=t==="text"?"12px 8px 12px 4px":"12px 12px 12px 8px"),r&&(x=t==="text"?"12px 4px 12px 8px":"12px 8px 12px 12px"),p&&r&&(x=t==="text"?"12px 4px":"12px 8px"),f&&(x="12px 11px"),u={gap:6,maxHeight:48,padding:x,borderRadius:10,fontSize:i.size,fontWeight:i.weight,lineHeight:i.lineHeight,letterSpacing:i.letterSpacing,"& svg":{width:24,height:24}}}if(o==="medium"){const{b4M:i}=e;let x="10px 8px";p&&(x=t==="text"?"10px 8px 10px 4px":"10px 10px 10px 8px"),r&&(x=t==="text"?"10px 4px 10px 8px":"10px 8px 10px 10px"),p&&r&&(x=t==="text"?"10px 4px":"10px 8px"),f&&(x="10px 9px"),u={gap:l.content(1),maxHeight:40,padding:x,borderRadius:8,fontSize:i.size,fontWeight:i.weight,lineHeight:i.lineHeight,letterSpacing:i.letterSpacing,"& svg":{width:20,height:20}}}if(o==="small"){const{c3M:i}=e;let x="8px 6px";p&&(x=t==="text"?"8px 8px 8px 4px":"8px 8px 8px 6px"),r&&(x=t==="text"?"8px 4px 8px 8px":"8px 6px 8px 8px"),p&&r&&(x=t==="text"?"8px 6px":"8px 4px"),f&&(x="8px 7px"),u={gap:l.content(1),maxHeight:32,padding:x,borderRadius:6,fontSize:i.size,fontWeight:i.weight,lineHeight:i.lineHeight,letterSpacing:i.letterSpacing,"& svg":{width:16,height:16}}}if(o==="xSmall"){const{c3M:i}=e;let x="4px 6px";p&&(x=t==="text"?"4px 8px 4px 4px":"4px 8px 4px 6px"),r&&(x=t==="text"?"4px 4px 4px 8px":"4px 6px 4px 8px"),p&&r&&(x=t==="text"?"4px":"4px 6px"),f&&(x="4px 3px"),f?u={gap:l.content(1),maxHeight:24,width:24,height:24,borderRadius:6,fontSize:i.size,fontWeight:i.weight,lineHeight:i.lineHeight,letterSpacing:i.letterSpacing,"& svg":{width:16,height:16}}:u={gap:l.content(1),maxHeight:24,padding:x,borderRadius:6,fontSize:i.size,fontWeight:i.weight,lineHeight:i.lineHeight,letterSpacing:i.letterSpacing,"& svg":{width:16,height:16}}}return t==="text"&&o==="xLarge"&&(u={...u,borderWidth:1.5}),u}};
|
|
13
13
|
|
|
14
14
|
${({rounded:l})=>l?{}:{borderRadius:"unset"}}
|
|
15
15
|
|
|
16
|
-
${({theme:{palette:{brand:l,grey:e}},variant:
|
|
16
|
+
${({theme:{palette:{brand:l,grey:e}},variant:t,color:o,isHoverPossible:p})=>{let r={'&:active:not([aria-disabled="true"])':{backgroundColor:l.primary.press},...p?{'&:hover:not([aria-disabled="true"])':{backgroundColor:l.primary.press}}:{}};return t==="filled"&&o==="secondary"&&(r={'&:active:not([aria-disabled="true"])':{backgroundColor:e[100]},...p?{'&:hover:not([aria-disabled="true"])':{backgroundColor:e[100]}}:{}}),t==="filled"&&o==="tertiary"&&(r={'&:active:not([aria-disabled="true"])':{backgroundColor:e[70]},...p?{'&:hover:not([aria-disabled="true"])':{backgroundColor:e[70]}}:{}}),(t==="outlined"||t==="text")&&(r={'&:active:not([aria-disabled="true"])':{backgroundColor:e[10]},...p?{'&:hover:not([aria-disabled="true"])':{backgroundColor:e[10]}}:{}}),r}}
|
|
17
17
|
|
|
18
18
|
&[aria-disabled="true"] {
|
|
19
19
|
cursor: not-allowed;
|
|
20
|
-
${({theme:{palette:{brand:l,grey:e}},variant:
|
|
20
|
+
${({theme:{palette:{brand:l,grey:e}},variant:t,color:o})=>{let p={backgroundColor:l.primary.disable,color:a.default(l.primary.disable,[e[30],e.white])};return t==="filled"&&o==="secondary"&&(p={backgroundColor:e[10],color:a.default(e[10],[e[30],e.white])}),t==="outlined"&&(p={borderColor:e[30],backgroundColor:e[10],color:a.default(e[30],[e[30],e.white])}),t==="text"&&(p={color:a.default(e[30],[e[30],e.white])}),p}};
|
|
21
21
|
}
|
|
22
22
|
|
|
23
23
|
${({fullWidth:l})=>l?{width:"100%"}:null};
|
|
24
|
-
|
|
24
|
+
`,$=b.forwardRef(function({tag:e="button",children:t,variant:o="filled",size:p="medium",color:r="primary",startAdornment:f,endAdornment:u,iconOnly:i,fullWidth:x,inlineCSS:n,rounded:w=!0,disabled:h,onClick:c,onKeyDown:s,...g},S){const{isHoverPossible:H}=z.default(),C=()=>{if(!i)return;if(g["aria-label"])return g["aria-label"];const d=f||u||t;if(b.isValidElement(d))return W.default(d.props.name)},k=d=>{h||c==null||c(d)},R=d=>{h||s==null||s(d)};return M.jsxs(q,{as:e,ref:S,variant:o,size:p,color:r,fullWidth:x,rounded:w,startAdornment:f,endAdornment:u,iconOnly:i,isHoverPossible:H,"aria-disabled":h,"aria-label":C(),onClick:k,onKeyDown:R,...g,css:n,children:[f,!i&&t,u]})});exports.default=$;
|
package/Button/Button.d.ts
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { ElementType, ReactNode } from 'react';
|
|
2
2
|
import { BrandColorKey } from '../typings/color';
|
|
3
|
-
import {
|
|
3
|
+
import { PolymorphicComponentProps, Size, Variant } from '../typings/component';
|
|
4
4
|
|
|
5
|
-
export
|
|
5
|
+
export type ButtonProps<T extends ElementType = 'button'> = PolymorphicComponentProps<T> & {
|
|
6
6
|
variant?: Extract<Variant, 'filled' | 'outlined' | 'text'>;
|
|
7
7
|
color?: BrandColorKey;
|
|
8
8
|
size?: Size;
|
|
@@ -11,6 +11,7 @@ export interface ButtonProps extends GeneralComponentProps<ButtonHTMLAttributes<
|
|
|
11
11
|
iconOnly?: boolean;
|
|
12
12
|
fullWidth?: boolean;
|
|
13
13
|
rounded?: boolean;
|
|
14
|
-
}
|
|
15
|
-
|
|
14
|
+
};
|
|
15
|
+
type ButtonComponent<DT extends ElementType> = <T extends ElementType = DT>(props: ButtonProps<T>) => ReactNode;
|
|
16
|
+
declare const Button: ButtonComponent<'button'>;
|
|
16
17
|
export default Button;
|
package/Button/Button.es.js
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { forwardRef as
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import
|
|
1
|
+
import { jsxs as k } from "@emotion/react/jsx-runtime";
|
|
2
|
+
import { forwardRef as z, isValidElement as R } from "react";
|
|
3
|
+
import W from "../hooks/useCheckHoverPossible/useCheckHoverPossible.es.js";
|
|
4
|
+
import M from "../utils/getIconLabel/getIconLabel.es.js";
|
|
5
|
+
import j from "@emotion/styled";
|
|
6
6
|
import c from "../utils/getContrastingTextColor/getContrastingTextColor.es.js";
|
|
7
|
-
const
|
|
7
|
+
const $ = j.button`
|
|
8
8
|
display: inline-flex;
|
|
9
9
|
align-items: center;
|
|
10
10
|
justify-content: center;
|
|
@@ -17,27 +17,27 @@ const j = M.button`
|
|
|
17
17
|
theme: {
|
|
18
18
|
palette: { brand: l, grey: e }
|
|
19
19
|
},
|
|
20
|
-
variant:
|
|
21
|
-
color:
|
|
20
|
+
variant: t,
|
|
21
|
+
color: o
|
|
22
22
|
}) => {
|
|
23
23
|
let p = {
|
|
24
24
|
backgroundColor: l.primary.main,
|
|
25
25
|
color: c(l.primary.main, [e.white, e[100]])
|
|
26
26
|
};
|
|
27
|
-
return
|
|
27
|
+
return t === "filled" && o === "secondary" && (p = {
|
|
28
28
|
backgroundColor: l.secondary,
|
|
29
29
|
color: c(l.secondary, [e.white, e[100]])
|
|
30
|
-
}),
|
|
30
|
+
}), t === "filled" && o === "tertiary" && (p = {
|
|
31
31
|
backgroundColor: l.tertiary,
|
|
32
32
|
color: c(l.tertiary, [e.white, e[100]])
|
|
33
|
-
}),
|
|
33
|
+
}), t === "outlined" && (p = {
|
|
34
34
|
borderColor: e[50],
|
|
35
35
|
backgroundColor: e.white,
|
|
36
36
|
color: c(e.white, [e.white, e[100]])
|
|
37
|
-
}),
|
|
37
|
+
}), t === "text" && o === "primary" && (p = {
|
|
38
38
|
backgroundColor: "transparent",
|
|
39
39
|
color: c("transparent", [e.white, e[100]])
|
|
40
|
-
}),
|
|
40
|
+
}), t === "text" && o === "secondary" && (p = {
|
|
41
41
|
backgroundColor: "transparent",
|
|
42
42
|
color: e[70]
|
|
43
43
|
}), p;
|
|
@@ -45,10 +45,10 @@ const j = M.button`
|
|
|
45
45
|
|
|
46
46
|
${({
|
|
47
47
|
theme: { spacing: l, typography: e },
|
|
48
|
-
variant:
|
|
49
|
-
size:
|
|
48
|
+
variant: t,
|
|
49
|
+
size: o,
|
|
50
50
|
startAdornment: p,
|
|
51
|
-
endAdornment:
|
|
51
|
+
endAdornment: r,
|
|
52
52
|
iconOnly: f
|
|
53
53
|
}) => {
|
|
54
54
|
let h = {
|
|
@@ -64,109 +64,109 @@ const j = M.button`
|
|
|
64
64
|
height: 20
|
|
65
65
|
}
|
|
66
66
|
};
|
|
67
|
-
if (
|
|
68
|
-
const { h0B:
|
|
69
|
-
let
|
|
70
|
-
p && (
|
|
67
|
+
if (o === "2xLarge") {
|
|
68
|
+
const { h0B: i } = e;
|
|
69
|
+
let x = "26px 24px";
|
|
70
|
+
p && (x = t === "text" ? "26px 16px 26px 12px" : "26px 36px 26px 24px"), r && (x = t === "text" ? "26px 12px 26px 16px" : "26px 24px 26px 36px"), p && r && (x = t === "text" ? "26px 12px" : "26px 24px"), f && (x = "26px 25px"), h = {
|
|
71
71
|
gap: l.content(3),
|
|
72
72
|
maxHeight: 100,
|
|
73
|
-
padding:
|
|
73
|
+
padding: x,
|
|
74
74
|
borderRadius: 20,
|
|
75
|
-
fontSize:
|
|
76
|
-
fontWeight:
|
|
77
|
-
lineHeight:
|
|
78
|
-
letterSpacing:
|
|
75
|
+
fontSize: i.size,
|
|
76
|
+
fontWeight: i.weight,
|
|
77
|
+
lineHeight: i.lineHeight,
|
|
78
|
+
letterSpacing: i.letterSpacing,
|
|
79
79
|
"& svg": {
|
|
80
80
|
width: 48,
|
|
81
81
|
height: 48
|
|
82
82
|
}
|
|
83
83
|
};
|
|
84
84
|
}
|
|
85
|
-
if (
|
|
86
|
-
const { h4B:
|
|
87
|
-
let
|
|
88
|
-
p && (
|
|
85
|
+
if (o === "xLarge") {
|
|
86
|
+
const { h4B: i } = e;
|
|
87
|
+
let x = "16px 12px";
|
|
88
|
+
p && (x = t === "text" ? "16px 8px 16px 4px" : "16px 16px 16px 12px"), r && (x = t === "text" ? "16px 4px 16px 8px" : "16px 12px 16px 16px"), p && r && (x = t === "text" ? "16px 4px" : "16px 12px"), f && (x = "16px 15px"), h = {
|
|
89
89
|
gap: l.content(2),
|
|
90
90
|
maxHeight: 56,
|
|
91
|
-
padding:
|
|
91
|
+
padding: x,
|
|
92
92
|
borderRadius: 12,
|
|
93
|
-
fontSize:
|
|
94
|
-
fontWeight:
|
|
95
|
-
lineHeight:
|
|
96
|
-
letterSpacing:
|
|
93
|
+
fontSize: i.size,
|
|
94
|
+
fontWeight: i.weight,
|
|
95
|
+
lineHeight: i.lineHeight,
|
|
96
|
+
letterSpacing: i.letterSpacing,
|
|
97
97
|
"& svg": {
|
|
98
98
|
width: 24,
|
|
99
99
|
height: 24
|
|
100
100
|
}
|
|
101
101
|
};
|
|
102
102
|
}
|
|
103
|
-
if (
|
|
104
|
-
const { b2M:
|
|
105
|
-
let
|
|
106
|
-
p && (
|
|
103
|
+
if (o === "large") {
|
|
104
|
+
const { b2M: i } = e;
|
|
105
|
+
let x = "12px 8px";
|
|
106
|
+
p && (x = t === "text" ? "12px 8px 12px 4px" : "12px 12px 12px 8px"), r && (x = t === "text" ? "12px 4px 12px 8px" : "12px 8px 12px 12px"), p && r && (x = t === "text" ? "12px 4px" : "12px 8px"), f && (x = "12px 11px"), h = {
|
|
107
107
|
gap: 6,
|
|
108
108
|
maxHeight: 48,
|
|
109
|
-
padding:
|
|
109
|
+
padding: x,
|
|
110
110
|
borderRadius: 10,
|
|
111
|
-
fontSize:
|
|
112
|
-
fontWeight:
|
|
113
|
-
lineHeight:
|
|
114
|
-
letterSpacing:
|
|
111
|
+
fontSize: i.size,
|
|
112
|
+
fontWeight: i.weight,
|
|
113
|
+
lineHeight: i.lineHeight,
|
|
114
|
+
letterSpacing: i.letterSpacing,
|
|
115
115
|
"& svg": {
|
|
116
116
|
width: 24,
|
|
117
117
|
height: 24
|
|
118
118
|
}
|
|
119
119
|
};
|
|
120
120
|
}
|
|
121
|
-
if (
|
|
122
|
-
const { b4M:
|
|
123
|
-
let
|
|
124
|
-
p && (
|
|
121
|
+
if (o === "medium") {
|
|
122
|
+
const { b4M: i } = e;
|
|
123
|
+
let x = "10px 8px";
|
|
124
|
+
p && (x = t === "text" ? "10px 8px 10px 4px" : "10px 10px 10px 8px"), r && (x = t === "text" ? "10px 4px 10px 8px" : "10px 8px 10px 10px"), p && r && (x = t === "text" ? "10px 4px" : "10px 8px"), f && (x = "10px 9px"), h = {
|
|
125
125
|
gap: l.content(1),
|
|
126
126
|
maxHeight: 40,
|
|
127
|
-
padding:
|
|
127
|
+
padding: x,
|
|
128
128
|
borderRadius: 8,
|
|
129
|
-
fontSize:
|
|
130
|
-
fontWeight:
|
|
131
|
-
lineHeight:
|
|
132
|
-
letterSpacing:
|
|
129
|
+
fontSize: i.size,
|
|
130
|
+
fontWeight: i.weight,
|
|
131
|
+
lineHeight: i.lineHeight,
|
|
132
|
+
letterSpacing: i.letterSpacing,
|
|
133
133
|
"& svg": {
|
|
134
134
|
width: 20,
|
|
135
135
|
height: 20
|
|
136
136
|
}
|
|
137
137
|
};
|
|
138
138
|
}
|
|
139
|
-
if (
|
|
140
|
-
const { c3M:
|
|
141
|
-
let
|
|
142
|
-
p && (
|
|
139
|
+
if (o === "small") {
|
|
140
|
+
const { c3M: i } = e;
|
|
141
|
+
let x = "8px 6px";
|
|
142
|
+
p && (x = t === "text" ? "8px 8px 8px 4px" : "8px 8px 8px 6px"), r && (x = t === "text" ? "8px 4px 8px 8px" : "8px 6px 8px 8px"), p && r && (x = t === "text" ? "8px 6px" : "8px 4px"), f && (x = "8px 7px"), h = {
|
|
143
143
|
gap: l.content(1),
|
|
144
144
|
maxHeight: 32,
|
|
145
|
-
padding:
|
|
145
|
+
padding: x,
|
|
146
146
|
borderRadius: 6,
|
|
147
|
-
fontSize:
|
|
148
|
-
fontWeight:
|
|
149
|
-
lineHeight:
|
|
150
|
-
letterSpacing:
|
|
147
|
+
fontSize: i.size,
|
|
148
|
+
fontWeight: i.weight,
|
|
149
|
+
lineHeight: i.lineHeight,
|
|
150
|
+
letterSpacing: i.letterSpacing,
|
|
151
151
|
"& svg": {
|
|
152
152
|
width: 16,
|
|
153
153
|
height: 16
|
|
154
154
|
}
|
|
155
155
|
};
|
|
156
156
|
}
|
|
157
|
-
if (
|
|
158
|
-
const { c3M:
|
|
159
|
-
let
|
|
160
|
-
p && (
|
|
157
|
+
if (o === "xSmall") {
|
|
158
|
+
const { c3M: i } = e;
|
|
159
|
+
let x = "4px 6px";
|
|
160
|
+
p && (x = t === "text" ? "4px 8px 4px 4px" : "4px 8px 4px 6px"), r && (x = t === "text" ? "4px 4px 4px 8px" : "4px 6px 4px 8px"), p && r && (x = t === "text" ? "4px" : "4px 6px"), f && (x = "4px 3px"), f ? h = {
|
|
161
161
|
gap: l.content(1),
|
|
162
162
|
maxHeight: 24,
|
|
163
163
|
width: 24,
|
|
164
164
|
height: 24,
|
|
165
165
|
borderRadius: 6,
|
|
166
|
-
fontSize:
|
|
167
|
-
fontWeight:
|
|
168
|
-
lineHeight:
|
|
169
|
-
letterSpacing:
|
|
166
|
+
fontSize: i.size,
|
|
167
|
+
fontWeight: i.weight,
|
|
168
|
+
lineHeight: i.lineHeight,
|
|
169
|
+
letterSpacing: i.letterSpacing,
|
|
170
170
|
"& svg": {
|
|
171
171
|
width: 16,
|
|
172
172
|
height: 16
|
|
@@ -174,19 +174,19 @@ const j = M.button`
|
|
|
174
174
|
} : h = {
|
|
175
175
|
gap: l.content(1),
|
|
176
176
|
maxHeight: 24,
|
|
177
|
-
padding:
|
|
177
|
+
padding: x,
|
|
178
178
|
borderRadius: 6,
|
|
179
|
-
fontSize:
|
|
180
|
-
fontWeight:
|
|
181
|
-
lineHeight:
|
|
182
|
-
letterSpacing:
|
|
179
|
+
fontSize: i.size,
|
|
180
|
+
fontWeight: i.weight,
|
|
181
|
+
lineHeight: i.lineHeight,
|
|
182
|
+
letterSpacing: i.letterSpacing,
|
|
183
183
|
"& svg": {
|
|
184
184
|
width: 16,
|
|
185
185
|
height: 16
|
|
186
186
|
}
|
|
187
187
|
};
|
|
188
188
|
}
|
|
189
|
-
return
|
|
189
|
+
return t === "text" && o === "xLarge" && (h = {
|
|
190
190
|
...h,
|
|
191
191
|
borderWidth: 1.5
|
|
192
192
|
}), h;
|
|
@@ -200,24 +200,24 @@ const j = M.button`
|
|
|
200
200
|
theme: {
|
|
201
201
|
palette: { brand: l, grey: e }
|
|
202
202
|
},
|
|
203
|
-
variant:
|
|
204
|
-
color:
|
|
203
|
+
variant: t,
|
|
204
|
+
color: o,
|
|
205
205
|
isHoverPossible: p
|
|
206
206
|
}) => {
|
|
207
|
-
let
|
|
207
|
+
let r = {
|
|
208
208
|
'&:active:not([aria-disabled="true"])': { backgroundColor: l.primary.press },
|
|
209
209
|
...p ? { '&:hover:not([aria-disabled="true"])': { backgroundColor: l.primary.press } } : {}
|
|
210
210
|
};
|
|
211
|
-
return
|
|
211
|
+
return t === "filled" && o === "secondary" && (r = {
|
|
212
212
|
'&:active:not([aria-disabled="true"])': { backgroundColor: e[100] },
|
|
213
213
|
...p ? { '&:hover:not([aria-disabled="true"])': { backgroundColor: e[100] } } : {}
|
|
214
|
-
}),
|
|
214
|
+
}), t === "filled" && o === "tertiary" && (r = {
|
|
215
215
|
'&:active:not([aria-disabled="true"])': { backgroundColor: e[70] },
|
|
216
216
|
...p ? { '&:hover:not([aria-disabled="true"])': { backgroundColor: e[70] } } : {}
|
|
217
|
-
}), (
|
|
217
|
+
}), (t === "outlined" || t === "text") && (r = {
|
|
218
218
|
'&:active:not([aria-disabled="true"])': { backgroundColor: e[10] },
|
|
219
219
|
...p ? { '&:hover:not([aria-disabled="true"])': { backgroundColor: e[10] } } : {}
|
|
220
|
-
}),
|
|
220
|
+
}), r;
|
|
221
221
|
}}
|
|
222
222
|
|
|
223
223
|
&[aria-disabled="true"] {
|
|
@@ -226,21 +226,21 @@ const j = M.button`
|
|
|
226
226
|
theme: {
|
|
227
227
|
palette: { brand: l, grey: e }
|
|
228
228
|
},
|
|
229
|
-
variant:
|
|
230
|
-
color:
|
|
229
|
+
variant: t,
|
|
230
|
+
color: o
|
|
231
231
|
}) => {
|
|
232
232
|
let p = {
|
|
233
233
|
backgroundColor: l.primary.disable,
|
|
234
234
|
color: c(l.primary.disable, [e[30], e.white])
|
|
235
235
|
};
|
|
236
|
-
return
|
|
236
|
+
return t === "filled" && o === "secondary" && (p = {
|
|
237
237
|
backgroundColor: e[10],
|
|
238
238
|
color: c(e[10], [e[30], e.white])
|
|
239
|
-
}),
|
|
239
|
+
}), t === "outlined" && (p = {
|
|
240
240
|
borderColor: e[30],
|
|
241
241
|
backgroundColor: e[10],
|
|
242
242
|
color: c(e[30], [e[30], e.white])
|
|
243
|
-
}),
|
|
243
|
+
}), t === "text" && (p = {
|
|
244
244
|
color: c(e[30], [e[30], e.white])
|
|
245
245
|
}), p;
|
|
246
246
|
}};
|
|
@@ -249,60 +249,62 @@ const j = M.button`
|
|
|
249
249
|
${({ fullWidth: l }) => l ? {
|
|
250
250
|
width: "100%"
|
|
251
251
|
} : null};
|
|
252
|
-
`,
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
252
|
+
`, q = z(function({
|
|
253
|
+
tag: e = "button",
|
|
254
|
+
children: t,
|
|
255
|
+
variant: o = "filled",
|
|
256
|
+
size: p = "medium",
|
|
257
|
+
color: r = "primary",
|
|
258
|
+
startAdornment: f,
|
|
259
|
+
endAdornment: h,
|
|
260
|
+
iconOnly: i,
|
|
260
261
|
fullWidth: x,
|
|
261
|
-
inlineCSS:
|
|
262
|
-
rounded:
|
|
262
|
+
inlineCSS: b,
|
|
263
|
+
rounded: n = !0,
|
|
263
264
|
disabled: g,
|
|
264
265
|
onClick: d,
|
|
265
266
|
onKeyDown: u,
|
|
266
267
|
...s
|
|
267
|
-
},
|
|
268
|
-
const { isHoverPossible:
|
|
269
|
-
if (!
|
|
268
|
+
}, w) {
|
|
269
|
+
const { isHoverPossible: S } = W(), H = () => {
|
|
270
|
+
if (!i) return;
|
|
270
271
|
if (s["aria-label"]) return s["aria-label"];
|
|
271
|
-
const a =
|
|
272
|
-
if (
|
|
273
|
-
return
|
|
274
|
-
}, H = (a) => {
|
|
275
|
-
g || d == null || d(a);
|
|
272
|
+
const a = f || h || t;
|
|
273
|
+
if (R(a))
|
|
274
|
+
return M(a.props.name);
|
|
276
275
|
}, C = (a) => {
|
|
276
|
+
g || d == null || d(a);
|
|
277
|
+
}, m = (a) => {
|
|
277
278
|
g || u == null || u(a);
|
|
278
279
|
};
|
|
279
|
-
return /* @__PURE__ */
|
|
280
|
-
|
|
280
|
+
return /* @__PURE__ */ k(
|
|
281
|
+
$,
|
|
281
282
|
{
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
283
|
+
as: e,
|
|
284
|
+
ref: w,
|
|
285
|
+
variant: o,
|
|
286
|
+
size: p,
|
|
287
|
+
color: r,
|
|
286
288
|
fullWidth: x,
|
|
287
|
-
rounded:
|
|
288
|
-
startAdornment:
|
|
289
|
-
endAdornment:
|
|
290
|
-
iconOnly:
|
|
291
|
-
isHoverPossible:
|
|
289
|
+
rounded: n,
|
|
290
|
+
startAdornment: f,
|
|
291
|
+
endAdornment: h,
|
|
292
|
+
iconOnly: i,
|
|
293
|
+
isHoverPossible: S,
|
|
292
294
|
"aria-disabled": g,
|
|
293
|
-
"aria-label":
|
|
294
|
-
onClick:
|
|
295
|
-
onKeyDown:
|
|
295
|
+
"aria-label": H(),
|
|
296
|
+
onClick: C,
|
|
297
|
+
onKeyDown: m,
|
|
296
298
|
...s,
|
|
297
|
-
css:
|
|
299
|
+
css: b,
|
|
298
300
|
children: [
|
|
299
|
-
|
|
300
|
-
!
|
|
301
|
-
|
|
301
|
+
f,
|
|
302
|
+
!i && t,
|
|
303
|
+
h
|
|
302
304
|
]
|
|
303
305
|
}
|
|
304
306
|
);
|
|
305
307
|
});
|
|
306
308
|
export {
|
|
307
|
-
|
|
309
|
+
q as default
|
|
308
310
|
};
|
|
@@ -2,9 +2,14 @@ import { StoryObj } from '@storybook/react';
|
|
|
2
2
|
|
|
3
3
|
declare const meta: {
|
|
4
4
|
title: string;
|
|
5
|
-
component: import('react').
|
|
5
|
+
component: <T extends import('react').ElementType = "button">(props: import('./Button').ButtonProps<T>) => import('react').ReactNode;
|
|
6
6
|
parameters: {
|
|
7
7
|
layout: string;
|
|
8
|
+
docs: {
|
|
9
|
+
description: {
|
|
10
|
+
component: string;
|
|
11
|
+
};
|
|
12
|
+
};
|
|
8
13
|
};
|
|
9
14
|
argTypes: {
|
|
10
15
|
startAdornment: {
|
|
@@ -30,3 +35,4 @@ export declare const StartAdornment: Story;
|
|
|
30
35
|
export declare const EndAdornment: Story;
|
|
31
36
|
export declare const BothAdornment: Story;
|
|
32
37
|
export declare const IconOnly: Story;
|
|
38
|
+
export declare const AnchorButton: Story;
|
package/Menu/Menu.cjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const b=require("@emotion/react/jsx-runtime"),o=require("react"),ct=require("../hooks/useCheckKeyboardMode/useCheckKeyboardMode.cjs"),G=require("../utils/getSibling/getSibling.cjs"),
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const b=require("@emotion/react/jsx-runtime"),o=require("react"),ct=require("react-dom"),dt=require("../hooks/useCheckKeyboardMode/useCheckKeyboardMode.cjs"),G=require("../utils/getSibling/getSibling.cjs"),ft=require("@emotion/styled"),lt=e=>e&&e.__esModule?e:{default:e},M=lt(ft),at=M.default.div`
|
|
2
2
|
position: fixed;
|
|
3
3
|
top: 0;
|
|
4
4
|
left: 0;
|
|
@@ -31,4 +31,4 @@
|
|
|
31
31
|
width: 100%;
|
|
32
32
|
height: 1px;
|
|
33
33
|
background-color: ${({theme:{palette:{grey:e}}})=>e[20]};
|
|
34
|
-
`,f=16,vt=o.forwardRef(function({children:p,anchorRef:i,open:h,onClose:l,spacing:v=4,transitionDuration:T=200,onChange:S,value:H,showDivider:P,placement:W="bottom-center",disablePadding:U=!1,disableClickOutside:V=!0,disableAutoPositioning:w=!1,width:q,fitToAnchorWidth:I=!0,maxHeight:O=476,style:J,inlineCSS:Q,menuProps:X,...Y},Z){const[g,z]=o.useState(0),[_,j]=o.useState("auto"),[R,K]=o.useState("auto"),[k,A]=o.useState(0),[D,L]=o.useState(!1),[tt,et]=o.useState(!1),[ot,C]=o.useState(!0),[st,y]=o.useState(null),x=o.useRef(),m=o.useRef(),E=o.useRef(null),{isKeyboardMode:ut}=
|
|
34
|
+
`,f=16,vt=o.forwardRef(function({children:p,anchorRef:i,open:h,onClose:l,spacing:v=4,transitionDuration:T=200,onChange:S,value:H,showDivider:P,placement:W="bottom-center",disablePadding:U=!1,disableClickOutside:V=!0,disableAutoPositioning:w=!1,width:q,fitToAnchorWidth:I=!0,maxHeight:O=476,style:J,inlineCSS:Q,menuProps:X,...Y},Z){const[g,z]=o.useState(0),[_,j]=o.useState("auto"),[R,K]=o.useState("auto"),[k,A]=o.useState(0),[D,L]=o.useState(!1),[tt,et]=o.useState(!1),[ot,C]=o.useState(!0),[st,y]=o.useState(null),x=o.useRef(),m=o.useRef(),E=o.useRef(null),{isKeyboardMode:ut}=dt.default(),rt=(t,s)=>n=>{n.stopPropagation(),typeof l=="function"&&l(),typeof S=="function"&&S(t,n),typeof s=="function"&&s(n)},it=t=>s=>{var r,c,d,a;if(s.key==="Tab"&&typeof l=="function"&&(l(),y(0)),(s.key==="Enter"||s.key===" ")&&typeof l=="function"&&typeof S=="function"&&(l(),S(t,s),i!=null&&i.current)){const u=i.current.querySelector("button");u&&ut&&u.focus()}const n=document.activeElement;if(n){if(s.code==="ArrowDown"){const u=G.default(n,"next",{skipDisabled:!0});u&&u.dataset.index?(y(Number(u.dataset.index)),u.focus()):(y(0),(c=(r=E.current)==null?void 0:r.querySelector('[role="menuitem"]'))==null||c.focus())}if(s.code==="ArrowUp"){const u=G.default(n,"prev",{skipDisabled:!0});u&&u.dataset.index?(y(Number(u.dataset.index)),u.focus()):(y(o.Children.count(p)-1),(a=(d=E.current)==null?void 0:d.querySelector('[role="menuitem"]:last-child'))==null||a.focus())}}};return o.useEffect(()=>{h&&(m.current&&clearTimeout(m.current),document.body.style.overflow="hidden",C(!1),x.current=setTimeout(()=>{L(!0)},100))},[h]),o.useEffect(()=>{h||(x.current&&clearTimeout(x.current),L(!1),document.body.removeAttribute("style"),m.current=setTimeout(()=>{C(!0),y(0)},T))},[h,T]),o.useEffect(()=>{const t=()=>{var B;const{offsetWidth:s=0,offsetHeight:n=0}=(i==null?void 0:i.current)||{},r=((B=i==null?void 0:i.current)==null?void 0:B.getBoundingClientRect())||{top:0,left:0,bottom:0},{offsetWidth:c=0,offsetHeight:d=0}=E.current||{},[a,u]=W.split("-");A(q||s);const $=r.top-d-v<f&&!w,nt=r.bottom+d+v+f>window.innerHeight&&!w,F=r.left+c+f>window.innerWidth&&!w,N=r.left+s-c<f&&!w;switch(a){case"top":z($?f:r.top-d-v);break;default:z(nt?"auto":r.top+n+v);break}switch(u){case"left":j(F?"auto":r.left),K(F?f:"auto");break;case"right":j(N?f:r.left+s-c),K(N?"auto":r.left);break;default:j(r.left+s/2-c/2);break}};return t(),window.addEventListener("resize",t),()=>{window.removeEventListener("resize",t)}},[i,v,W,D,p,q,w,O]),o.useEffect(()=>{et(D&&!!g&&!!_&&!!k)},[D,g,_,k]),o.useEffect(()=>()=>{x.current&&clearTimeout(x.current),m.current&&clearTimeout(m.current)},[]),ot?null:ct.createPortal(b.jsx(at,{onClick:l,disableClickOutside:V,children:b.jsx(pt,{ref:Z,open:tt,transitionDuration:T,...Y,css:Q,style:{...J,top:g,left:_,bottom:g==="auto"?f:void 0,right:R,width:I?k:void 0,maxHeight:O},children:b.jsx(yt,{role:"menu",ref:E,disablePadding:U,maxHeight:O,...X,children:o.Children.map(p,(t,s)=>{var r,c,d,a,u,$;if(!o.isValidElement(t))return null;const n=st===s;return b.jsxs(b.Fragment,{children:[o.cloneElement(t,{...t.props,"data-index":s,selected:!!((r=t==null?void 0:t.props)!=null&&r.value)&&((c=t==null?void 0:t.props)==null?void 0:c.value)===H,onClick:rt((d=t==null?void 0:t.props)==null?void 0:d.value,(a=t==null?void 0:t.props)==null?void 0:a.onClick),onKeyDown:it((u=t==null?void 0:t.props)==null?void 0:u.value),tabIndex:n?0:-1,style:{...($=t==null?void 0:t.props)==null?void 0:$.style,[q?"width":"minWidth"]:I?void 0:k,maxWidth:I?void 0:"100%"}}),P&&o.Children.count(p)!==s+1&&b.jsx(bt,{})]})})})})}),document.body)});exports.default=vt;
|
package/Menu/Menu.es.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { jsx as T, jsxs as pt, Fragment as lt } from "@emotion/react/jsx-runtime";
|
|
2
2
|
import { forwardRef as at, useState as f, useRef as q, useEffect as x, Children as F, isValidElement as yt, cloneElement as mt } from "react";
|
|
3
|
-
import bt from "
|
|
3
|
+
import { createPortal as bt } from "react-dom";
|
|
4
|
+
import vt from "../hooks/useCheckKeyboardMode/useCheckKeyboardMode.es.js";
|
|
4
5
|
import _ from "../utils/getSibling/getSibling.es.js";
|
|
5
|
-
import { createPortal as vt } from "react-dom";
|
|
6
6
|
import I from "@emotion/styled";
|
|
7
7
|
const wt = I.div`
|
|
8
8
|
position: fixed;
|
|
@@ -74,7 +74,7 @@ const wt = I.div`
|
|
|
74
74
|
menuProps: A,
|
|
75
75
|
...R
|
|
76
76
|
}, tt) {
|
|
77
|
-
const [g, j] = f(0), [z, K] = f("auto"), [ot, B] = f("auto"), [E, et] = f(0), [L, G] = f(!1), [rt, it] = f(!1), [st, H] = f(!0), [ut, y] = f(null), v = q(), w = q(), $ = q(null), { isKeyboardMode: nt } =
|
|
77
|
+
const [g, j] = f(0), [z, K] = f("auto"), [ot, B] = f("auto"), [E, et] = f(0), [L, G] = f(!1), [rt, it] = f(!1), [st, H] = f(!0), [ut, y] = f(null), v = q(), w = q(), $ = q(null), { isKeyboardMode: nt } = vt(), ct = (t, e) => (u) => {
|
|
78
78
|
u.stopPropagation(), typeof p == "function" && p(), typeof k == "function" && k(t, u), typeof e == "function" && e(u);
|
|
79
79
|
}, ft = (t) => (e) => {
|
|
80
80
|
var i, n, c, l;
|
|
@@ -143,7 +143,7 @@ const wt = I.div`
|
|
|
143
143
|
it(L && !!g && !!z && !!E);
|
|
144
144
|
}, [L, g, z, E]), x(() => () => {
|
|
145
145
|
v.current && clearTimeout(v.current), w.current && clearTimeout(w.current);
|
|
146
|
-
}, []), st ? null :
|
|
146
|
+
}, []), st ? null : bt(
|
|
147
147
|
/* @__PURE__ */ T(wt, { onClick: p, disableClickOutside: X, children: /* @__PURE__ */ T(
|
|
148
148
|
xt,
|
|
149
149
|
{
|
|
@@ -6,5 +6,5 @@ export interface MenuButtonProps extends ButtonProps {
|
|
|
6
6
|
menuId: string;
|
|
7
7
|
onClick: (e: SyntheticEvent) => void;
|
|
8
8
|
}
|
|
9
|
-
declare const MenuButton: import('react').ForwardRefExoticComponent<MenuButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
|
|
9
|
+
declare const MenuButton: import('react').ForwardRefExoticComponent<Omit<MenuButtonProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;
|
|
10
10
|
export default MenuButton;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dotss/ui",
|
|
3
|
-
"version": "1.0
|
|
3
|
+
"version": "1.1.0",
|
|
4
4
|
"description": "React UI components for Dotss",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./index.cjs",
|
|
@@ -65,10 +65,11 @@
|
|
|
65
65
|
"@emotion/serialize": "^1.1.4",
|
|
66
66
|
"@emotion/styled": "^11.11.5",
|
|
67
67
|
"@storybook/addon-a11y": "^9.1.15",
|
|
68
|
+
"@storybook/addon-docs": "^9.1.15",
|
|
68
69
|
"@storybook/addon-links": "^9.1.15",
|
|
69
70
|
"@storybook/react": "^9.1.15",
|
|
70
71
|
"@storybook/react-vite": "^9.1.15",
|
|
71
|
-
"@storybook/
|
|
72
|
+
"@storybook/test": "^8.6.14",
|
|
72
73
|
"@testing-library/jest-dom": "^6.4.2",
|
|
73
74
|
"@testing-library/react": "^15.0.0",
|
|
74
75
|
"@testing-library/user-event": "^14.5.2",
|