@equinor/roma-ui 0.1.0 → 0.2.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/index.d.ts +1 -0
- package/index.js +1 -1
- package/index.mjs +8 -6
- package/lib/NumberField/NumberField.d.ts +3 -0
- package/lib/select/styled-comps.d.ts +3 -0
- package/number.js +15 -0
- package/number.mjs +875 -0
- package/package.json +6 -1
- package/select.js +35 -34
- package/select.mjs +76 -81
- package/switch.js +1 -1
- package/switch.mjs +55 -79
- package/useControlledState-D0L6S_5r.js +1 -0
- package/useControlledState-u436Wbp1.mjs +30 -0
package/package.json
CHANGED
|
@@ -1,11 +1,16 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@equinor/roma-ui",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.2.0",
|
|
4
4
|
"exports": {
|
|
5
5
|
".": {
|
|
6
6
|
"import": "./index.mjs",
|
|
7
7
|
"require": "./index.js"
|
|
8
8
|
},
|
|
9
|
+
"./number": {
|
|
10
|
+
"types": "./lib/NumberField/NumberField.d.ts",
|
|
11
|
+
"import": "./NumberField.mjs",
|
|
12
|
+
"require": "./NumberField.js"
|
|
13
|
+
},
|
|
9
14
|
"./switch": {
|
|
10
15
|
"types": "./lib/switch/Switch.d.ts",
|
|
11
16
|
"import": "./switch.mjs",
|
package/select.js
CHANGED
|
@@ -1,20 +1,21 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),i=require("react-aria-components"),u=require("@equinor/eds-core-react"),A=require("@equinor/eds-icons"),n=require("react"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),i=require("react-aria-components"),u=require("@equinor/eds-core-react"),A=require("@equinor/eds-icons"),n=require("react"),e=require("@equinor/eds-tokens"),r=require("styled-components"),W=r(u.Typography)`
|
|
2
2
|
variant={'helper'};
|
|
3
3
|
group={$group};
|
|
4
4
|
margin-left: 8px;
|
|
5
5
|
margin-top: 8px;
|
|
6
|
-
|
|
6
|
+
color: ${e.tokens.colors.text.static_icons__tertiary.rgba}
|
|
7
|
+
`,_=({helperText:t})=>t?o.jsx(W,{group:"input",variant:"helper",children:t}):null,F=r(i.Select)`
|
|
7
8
|
--focus-ring-color: red;
|
|
8
|
-
--text-color-placeholder: ${
|
|
9
|
-
--highlight-background: ${
|
|
10
|
-
--highlight-foreground: ${
|
|
9
|
+
--text-color-placeholder: ${e.tokens.colors.text.static_icons__tertiary.rgba};
|
|
10
|
+
--highlight-background: ${e.tokens.colors.ui.background__light.rgba};
|
|
11
|
+
--highlight-foreground: ${e.tokens.colors.ui.background__light.rgba};
|
|
11
12
|
--trigger-width: 300px;
|
|
12
|
-
--text-color: ${({$variant:
|
|
13
|
-
--label-color: ${({$variant:
|
|
14
|
-
--outline-color: ${({$variant:
|
|
13
|
+
--text-color: ${({$variant:t})=>t==="error"?e.tokens.colors.interactive.danger__text.rgba:t==="success"?e.tokens.colors.interactive.success__text.rgba:t==="warning"?e.tokens.colors.interactive.warning__text.rgba:"#000"};
|
|
14
|
+
--label-color: ${({$variant:t})=>t==="error"?e.tokens.colors.interactive.danger__text.rgba:t==="success"?e.tokens.colors.interactive.success__text.rgba:t==="warning"?e.tokens.colors.interactive.warning__text.rgba:e.tokens.colors.text.static_icons__tertiary.rgba};
|
|
15
|
+
--outline-color: ${({$variant:t})=>t==="error"?e.tokens.colors.interactive.danger__resting.rgba:t==="success"?e.tokens.colors.interactive.success__resting.rgba:t==="warning"?e.tokens.colors.interactive.warning__resting.rgba:e.tokens.colors.interactive.primary__resting.rgba};
|
|
15
16
|
outline: none;
|
|
16
|
-
`,
|
|
17
|
-
--shadow: inset 0px -1px 0px 0px ${
|
|
17
|
+
`,K=r(i.Button)`
|
|
18
|
+
--shadow: inset 0px -1px 0px 0px ${e.tokens.colors.text.static_icons__tertiary.rgba};
|
|
18
19
|
cursor: pointer;
|
|
19
20
|
max-width: 100%;
|
|
20
21
|
width: 100%;
|
|
@@ -26,25 +27,25 @@
|
|
|
26
27
|
overflow: hidden;
|
|
27
28
|
text-overflow: ellipsis;
|
|
28
29
|
white-space: nowrap;
|
|
29
|
-
background-color: ${({$readonly:
|
|
30
|
+
background-color: ${({$readonly:t})=>t?e.tokens.colors.ui.background__default.rgba:e.tokens.colors.ui.background__light.rgba};
|
|
30
31
|
> span {
|
|
31
32
|
overflow: hidden;
|
|
32
33
|
text-overflow: ellipsis;
|
|
33
34
|
white-space: nowrap;
|
|
34
35
|
}
|
|
35
|
-
font-family: ${
|
|
36
|
-
${({$variant:
|
|
36
|
+
font-family: ${e.tokens.typography.input.text.fontFamily};
|
|
37
|
+
${({$variant:t,$readonly:a})=>t!=="error"&&!a&&"box-shadow: var(--shadow);"}
|
|
37
38
|
span[data-placeholder] {
|
|
38
|
-
color: ${
|
|
39
|
+
color: ${e.tokens.colors.text.static_icons__tertiary.rgba};
|
|
39
40
|
}
|
|
40
|
-
height: ${({$density:
|
|
41
|
+
height: ${({$density:t})=>t==="compact"?"24px":"36px"};
|
|
41
42
|
|
|
42
43
|
&:not([data-focused], [data-pressed]) {
|
|
43
|
-
${({$variant:
|
|
44
|
+
${({$variant:t})=>t==="error"&&"outline: 1px solid var(--outline-color) !important;"}
|
|
44
45
|
}
|
|
45
46
|
&:focus-visible,
|
|
46
47
|
&[data-pressed] {
|
|
47
|
-
${({$hasLabel:
|
|
48
|
+
${({$hasLabel:t})=>!t&&`background-color: ${e.tokens.colors.ui.background__medium.rgba};`}
|
|
48
49
|
}
|
|
49
50
|
&:focus-within,
|
|
50
51
|
&[data-pressed] {
|
|
@@ -56,7 +57,7 @@
|
|
|
56
57
|
color: var(--text-color) !important;
|
|
57
58
|
cursor: default;
|
|
58
59
|
}
|
|
59
|
-
`,
|
|
60
|
+
`,N=r(i.ListBox)`
|
|
60
61
|
box-shadow: rgba(0, 0, 0, 0.2) 0px 7px 8px, rgba(0, 0, 0, 0.12) 0px 5px 22px,
|
|
61
62
|
rgba(0, 0, 0, 0.14) 0px 12px 17px;
|
|
62
63
|
background-color: var(--eds_ui_background__default, rgba(255, 255, 255, 1));
|
|
@@ -77,7 +78,7 @@
|
|
|
77
78
|
cursor: pointer;
|
|
78
79
|
outline: none;
|
|
79
80
|
padding: 0 24px;
|
|
80
|
-
height: ${({$density:
|
|
81
|
+
height: ${({$density:t})=>t==="compact"?"32px":"48px"};
|
|
81
82
|
display: flex;
|
|
82
83
|
min-width: calc(var(--trigger-width) - 63px);
|
|
83
84
|
align-items: center;
|
|
@@ -90,7 +91,7 @@
|
|
|
90
91
|
text-overflow: ellipsis;
|
|
91
92
|
}
|
|
92
93
|
&:hover:not([data-disabled]) {
|
|
93
|
-
background-color: ${
|
|
94
|
+
background-color: ${e.tokens.colors.ui.background__medium.rgba};
|
|
94
95
|
}
|
|
95
96
|
|
|
96
97
|
&[data-focus-visible] {
|
|
@@ -116,34 +117,34 @@
|
|
|
116
117
|
background: var(--highlight-background);
|
|
117
118
|
color: var(--highlight-foreground);
|
|
118
119
|
}
|
|
119
|
-
`,
|
|
120
|
-
font-size: ${
|
|
121
|
-
font-family: ${
|
|
122
|
-
font-weight: ${
|
|
123
|
-
line-height: ${
|
|
124
|
-
text-align: ${
|
|
125
|
-
color: ${
|
|
120
|
+
`,O=r(i.Label)`
|
|
121
|
+
font-size: ${e.tokens.typography.input.label.fontSize};
|
|
122
|
+
font-family: ${e.tokens.typography.input.label.fontFamily};
|
|
123
|
+
font-weight: ${e.tokens.typography.input.label.fontWeight};
|
|
124
|
+
line-height: ${e.tokens.typography.input.label.lineHeight};
|
|
125
|
+
text-align: ${e.tokens.typography.input.label.textAlign};
|
|
126
|
+
color: ${e.tokens.colors.text.static_icons__tertiary.rgba};
|
|
126
127
|
|
|
127
128
|
display: flex;
|
|
128
129
|
justify-content: space-between;
|
|
129
130
|
position: relative;
|
|
130
131
|
margin: 0 8px;
|
|
131
|
-
`,
|
|
132
|
-
--text-color: ${
|
|
133
|
-
--text-color-placeholder: ${
|
|
134
|
-
--highlight-background: ${
|
|
132
|
+
`,U=r(i.Popover)`
|
|
133
|
+
--text-color: ${e.tokens.colors.text.static_icons__default.rgba};
|
|
134
|
+
--text-color-placeholder: ${e.tokens.colors.text.static_icons__tertiary.rgba};
|
|
135
|
+
--highlight-background: ${e.tokens.colors.ui.background__medium.rgba};
|
|
135
136
|
--highlight-foreground: var(--text-color);
|
|
136
137
|
font-family: Equinor;
|
|
137
138
|
max-width: var(--trigger-width);
|
|
138
139
|
width: 100%;
|
|
139
140
|
border-radius: 10px;
|
|
140
141
|
outline: none;
|
|
141
|
-
`;f.displayName="StyledListBoxItem";const s={ListBox:
|
|
142
|
+
`;f.displayName="StyledListBoxItem";const s={ListBox:N,ListBoxItem:f,Trigger:K,Wrapper:F,Label:O,Popover:U,HelperText:_},V=r.div`
|
|
142
143
|
width: 24px;
|
|
143
144
|
height: 24px;
|
|
144
145
|
min-width: 18px;
|
|
145
146
|
margin-right: 2px;
|
|
146
147
|
cursor: pointer;
|
|
147
148
|
border-radius: 50%;
|
|
148
|
-
background-color: ${({$isHover:
|
|
149
|
-
`,
|
|
149
|
+
background-color: ${({$isHover:t})=>t?e.tokens.colors.interactive.primary__hover_alt.rgba:""};
|
|
150
|
+
`,G=n.forwardRef(function({children:t,variant:a,selected:d,onSelectedChange:l,label:g,helperText:y,placeholder:k,items:v,ariaLabel:w,disabledKeys:Q,disabled:m,readOnly:p,getValueText:$,onChange:h,showClearButton:X,...S},L){const[x,j]=n.useState(),{density:B,rootElement:I}=u.useEds(),T=n.useMemo(()=>d?`select-option-${d}`:x?`select-option-${x}`:"",[x,d]),q=n.useCallback(D=>{let c=(D??"").toString().replace("select-option-","");c===""&&(c=null),l?l(c):h?h({target:{value:c},currentTarget:{value:c}}):j(c)},[h,l]),E=n.useRef(),C=L??E,[H,M]=n.useState(!1),[R,b]=n.useState(!1),P=()=>{b(!0)},z=()=>{b(!1)};return o.jsxs(s.Wrapper,{onSelectionChange:q,selectedKey:T,$variant:a,autoComplete:"text",placeholder:k??" ",isOpen:p?!1:H,onOpenChange:M,isDisabled:m??p,"aria-label":w,...S,children:[g&&o.jsx(s.Label,{elementType:"label",children:g}),o.jsxs(s.Trigger,{ref:C,$density:B,$variant:a,$readonly:p??!1,"data-readonly":p,$hasLabel:!!g,children:[o.jsx(i.SelectValue,{children:$}),!p&&o.jsx(V,{onMouseEnter:P,onMouseLeave:z,$isHover:R,children:o.jsx(u.Icon,{size:24,data:A.arrow_drop_down,color:e.tokens.colors.interactive.primary__resting.rgba})})]}),o.jsx(s.Popover,{offset:4,UNSTABLE_portalContainer:I??document.body,children:o.jsx(s.ListBox,{items:v,children:t})}),o.jsx(_,{helperText:y})]})}),J=({value:t,children:a,item:d,...l})=>{const{density:g}=u.useEds();return o.jsx(s.ListBoxItem,{$density:g,id:`select-option-${t}`,value:d,isDisabled:l.disabled,...l,children:a})};exports.Option=J;exports.Select=G;exports.Styled=s;
|
package/select.mjs
CHANGED
|
@@ -1,33 +1,28 @@
|
|
|
1
1
|
import { jsx as t, jsxs as b } from "react/jsx-runtime";
|
|
2
|
-
import { Select as
|
|
3
|
-
import { Typography as
|
|
4
|
-
import { arrow_drop_down as
|
|
5
|
-
import { forwardRef as
|
|
2
|
+
import { Select as A, Button as F, ListBox as K, ListBoxItem as N, Label as q, Popover as U, SelectValue as V } from "react-aria-components";
|
|
3
|
+
import { Typography as G, useEds as x, Icon as J } from "@equinor/eds-core-react";
|
|
4
|
+
import { arrow_drop_down as Q } from "@equinor/eds-icons";
|
|
5
|
+
import { forwardRef as X, useState as u, useMemo as Y, useCallback as Z, useRef as O } from "react";
|
|
6
|
+
import { tokens as e } from "@equinor/eds-tokens";
|
|
6
7
|
import r from "styled-components";
|
|
7
|
-
|
|
8
|
-
const O = r(V)`
|
|
8
|
+
const ee = r(G)`
|
|
9
9
|
variant={'helper'};
|
|
10
10
|
group={$group};
|
|
11
11
|
margin-left: 8px;
|
|
12
12
|
margin-top: 8px;
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
{
|
|
16
|
-
group: "input",
|
|
17
|
-
children: e
|
|
18
|
-
}
|
|
19
|
-
) : null, ee = r(W)`
|
|
13
|
+
color: ${e.colors.text.static_icons__tertiary.rgba}
|
|
14
|
+
`, _ = ({ helperText: o }) => o ? /* @__PURE__ */ t(ee, { group: "input", variant: "helper", children: o }) : null, oe = r(A)`
|
|
20
15
|
--focus-ring-color: red;
|
|
21
|
-
--text-color-placeholder: ${
|
|
22
|
-
--highlight-background: ${
|
|
23
|
-
--highlight-foreground: ${
|
|
16
|
+
--text-color-placeholder: ${e.colors.text.static_icons__tertiary.rgba};
|
|
17
|
+
--highlight-background: ${e.colors.ui.background__light.rgba};
|
|
18
|
+
--highlight-foreground: ${e.colors.ui.background__light.rgba};
|
|
24
19
|
--trigger-width: 300px;
|
|
25
|
-
--text-color: ${({ $variant:
|
|
26
|
-
--label-color: ${({ $variant:
|
|
27
|
-
--outline-color: ${({ $variant:
|
|
20
|
+
--text-color: ${({ $variant: o }) => o === "error" ? e.colors.interactive.danger__text.rgba : o === "success" ? e.colors.interactive.success__text.rgba : o === "warning" ? e.colors.interactive.warning__text.rgba : "#000"};
|
|
21
|
+
--label-color: ${({ $variant: o }) => o === "error" ? e.colors.interactive.danger__text.rgba : o === "success" ? e.colors.interactive.success__text.rgba : o === "warning" ? e.colors.interactive.warning__text.rgba : e.colors.text.static_icons__tertiary.rgba};
|
|
22
|
+
--outline-color: ${({ $variant: o }) => o === "error" ? e.colors.interactive.danger__resting.rgba : o === "success" ? e.colors.interactive.success__resting.rgba : o === "warning" ? e.colors.interactive.warning__resting.rgba : e.colors.interactive.primary__resting.rgba};
|
|
28
23
|
outline: none;
|
|
29
|
-
`,
|
|
30
|
-
--shadow: inset 0px -1px 0px 0px ${
|
|
24
|
+
`, te = r(F)`
|
|
25
|
+
--shadow: inset 0px -1px 0px 0px ${e.colors.text.static_icons__tertiary.rgba};
|
|
31
26
|
cursor: pointer;
|
|
32
27
|
max-width: 100%;
|
|
33
28
|
width: 100%;
|
|
@@ -39,25 +34,25 @@ const O = r(V)`
|
|
|
39
34
|
overflow: hidden;
|
|
40
35
|
text-overflow: ellipsis;
|
|
41
36
|
white-space: nowrap;
|
|
42
|
-
background-color: ${({ $readonly:
|
|
37
|
+
background-color: ${({ $readonly: o }) => o ? e.colors.ui.background__default.rgba : e.colors.ui.background__light.rgba};
|
|
43
38
|
> span {
|
|
44
39
|
overflow: hidden;
|
|
45
40
|
text-overflow: ellipsis;
|
|
46
41
|
white-space: nowrap;
|
|
47
42
|
}
|
|
48
|
-
font-family: ${
|
|
49
|
-
${({ $variant:
|
|
43
|
+
font-family: ${e.typography.input.text.fontFamily};
|
|
44
|
+
${({ $variant: o, $readonly: i }) => o !== "error" && !i && "box-shadow: var(--shadow);"}
|
|
50
45
|
span[data-placeholder] {
|
|
51
|
-
color: ${
|
|
46
|
+
color: ${e.colors.text.static_icons__tertiary.rgba};
|
|
52
47
|
}
|
|
53
|
-
height: ${({ $density:
|
|
48
|
+
height: ${({ $density: o }) => o === "compact" ? "24px" : "36px"};
|
|
54
49
|
|
|
55
50
|
&:not([data-focused], [data-pressed]) {
|
|
56
|
-
${({ $variant:
|
|
51
|
+
${({ $variant: o }) => o === "error" && "outline: 1px solid var(--outline-color) !important;"}
|
|
57
52
|
}
|
|
58
53
|
&:focus-visible,
|
|
59
54
|
&[data-pressed] {
|
|
60
|
-
${({ $hasLabel:
|
|
55
|
+
${({ $hasLabel: o }) => !o && `background-color: ${e.colors.ui.background__medium.rgba};`}
|
|
61
56
|
}
|
|
62
57
|
&:focus-within,
|
|
63
58
|
&[data-pressed] {
|
|
@@ -69,7 +64,7 @@ const O = r(V)`
|
|
|
69
64
|
color: var(--text-color) !important;
|
|
70
65
|
cursor: default;
|
|
71
66
|
}
|
|
72
|
-
`,
|
|
67
|
+
`, re = r(K)`
|
|
73
68
|
box-shadow: rgba(0, 0, 0, 0.2) 0px 7px 8px, rgba(0, 0, 0, 0.12) 0px 5px 22px,
|
|
74
69
|
rgba(0, 0, 0, 0.14) 0px 12px 17px;
|
|
75
70
|
background-color: var(--eds_ui_background__default, rgba(255, 255, 255, 1));
|
|
@@ -86,11 +81,11 @@ const O = r(V)`
|
|
|
86
81
|
.react-aria-Header {
|
|
87
82
|
padding-left: 1.571rem;
|
|
88
83
|
}
|
|
89
|
-
`, f = r(
|
|
84
|
+
`, f = r(N)`
|
|
90
85
|
cursor: pointer;
|
|
91
86
|
outline: none;
|
|
92
87
|
padding: 0 24px;
|
|
93
|
-
height: ${({ $density:
|
|
88
|
+
height: ${({ $density: o }) => o === "compact" ? "32px" : "48px"};
|
|
94
89
|
display: flex;
|
|
95
90
|
min-width: calc(var(--trigger-width) - 63px);
|
|
96
91
|
align-items: center;
|
|
@@ -103,7 +98,7 @@ const O = r(V)`
|
|
|
103
98
|
text-overflow: ellipsis;
|
|
104
99
|
}
|
|
105
100
|
&:hover:not([data-disabled]) {
|
|
106
|
-
background-color: ${
|
|
101
|
+
background-color: ${e.colors.ui.background__medium.rgba};
|
|
107
102
|
}
|
|
108
103
|
|
|
109
104
|
&[data-focus-visible] {
|
|
@@ -129,22 +124,22 @@ const O = r(V)`
|
|
|
129
124
|
background: var(--highlight-background);
|
|
130
125
|
color: var(--highlight-foreground);
|
|
131
126
|
}
|
|
132
|
-
`,
|
|
133
|
-
font-size: ${
|
|
134
|
-
font-family: ${
|
|
135
|
-
font-weight: ${
|
|
136
|
-
line-height: ${
|
|
137
|
-
text-align: ${
|
|
138
|
-
color: ${
|
|
127
|
+
`, ie = r(q)`
|
|
128
|
+
font-size: ${e.typography.input.label.fontSize};
|
|
129
|
+
font-family: ${e.typography.input.label.fontFamily};
|
|
130
|
+
font-weight: ${e.typography.input.label.fontWeight};
|
|
131
|
+
line-height: ${e.typography.input.label.lineHeight};
|
|
132
|
+
text-align: ${e.typography.input.label.textAlign};
|
|
133
|
+
color: ${e.colors.text.static_icons__tertiary.rgba};
|
|
139
134
|
|
|
140
135
|
display: flex;
|
|
141
136
|
justify-content: space-between;
|
|
142
137
|
position: relative;
|
|
143
138
|
margin: 0 8px;
|
|
144
|
-
`,
|
|
145
|
-
--text-color: ${
|
|
146
|
-
--text-color-placeholder: ${
|
|
147
|
-
--highlight-background: ${
|
|
139
|
+
`, ae = r(U)`
|
|
140
|
+
--text-color: ${e.colors.text.static_icons__default.rgba};
|
|
141
|
+
--text-color-placeholder: ${e.colors.text.static_icons__tertiary.rgba};
|
|
142
|
+
--highlight-background: ${e.colors.ui.background__medium.rgba};
|
|
148
143
|
--highlight-foreground: var(--text-color);
|
|
149
144
|
font-family: Equinor;
|
|
150
145
|
max-width: var(--trigger-width);
|
|
@@ -154,91 +149,91 @@ const O = r(V)`
|
|
|
154
149
|
`;
|
|
155
150
|
f.displayName = "StyledListBoxItem";
|
|
156
151
|
const s = {
|
|
157
|
-
ListBox:
|
|
152
|
+
ListBox: re,
|
|
158
153
|
ListBoxItem: f,
|
|
159
|
-
Trigger:
|
|
160
|
-
Wrapper:
|
|
161
|
-
Label:
|
|
162
|
-
Popover:
|
|
154
|
+
Trigger: te,
|
|
155
|
+
Wrapper: oe,
|
|
156
|
+
Label: ie,
|
|
157
|
+
Popover: ae,
|
|
163
158
|
HelperText: _
|
|
164
|
-
},
|
|
159
|
+
}, ne = r.div`
|
|
165
160
|
width: 24px;
|
|
166
161
|
height: 24px;
|
|
167
162
|
min-width: 18px;
|
|
168
163
|
margin-right: 2px;
|
|
169
164
|
cursor: pointer;
|
|
170
165
|
border-radius: 50%;
|
|
171
|
-
background-color: ${({ $isHover:
|
|
172
|
-
`,
|
|
173
|
-
children:
|
|
166
|
+
background-color: ${({ $isHover: o }) => o ? e.colors.interactive.primary__hover_alt.rgba : ""};
|
|
167
|
+
`, _e = X(function({
|
|
168
|
+
children: o,
|
|
174
169
|
variant: i,
|
|
175
170
|
selected: l,
|
|
176
171
|
onSelectedChange: a,
|
|
177
172
|
label: c,
|
|
178
173
|
helperText: m,
|
|
179
174
|
placeholder: y,
|
|
180
|
-
items:
|
|
181
|
-
ariaLabel:
|
|
182
|
-
disabledKeys:
|
|
175
|
+
items: v,
|
|
176
|
+
ariaLabel: w,
|
|
177
|
+
disabledKeys: se,
|
|
183
178
|
disabled: $,
|
|
184
179
|
readOnly: d,
|
|
185
180
|
getValueText: k,
|
|
186
181
|
onChange: p,
|
|
187
|
-
showClearButton:
|
|
182
|
+
showClearButton: le,
|
|
188
183
|
...L
|
|
189
184
|
}, S) {
|
|
190
|
-
const [g, B] = u(), { density: I } = x(),
|
|
191
|
-
(
|
|
192
|
-
let n = (
|
|
185
|
+
const [g, B] = u(), { density: I, rootElement: T } = x(), E = Y(() => l ? `select-option-${l}` : g ? `select-option-${g}` : "", [g, l]), H = Z(
|
|
186
|
+
(W) => {
|
|
187
|
+
let n = (W ?? "").toString().replace("select-option-", "");
|
|
193
188
|
n === "" && (n = null), a ? a(n) : p ? p({
|
|
194
189
|
target: { value: n },
|
|
195
190
|
currentTarget: { value: n }
|
|
196
191
|
}) : B(n);
|
|
197
192
|
},
|
|
198
193
|
[p, a]
|
|
199
|
-
),
|
|
194
|
+
), M = O(), j = S ?? M, [z, C] = u(!1), [D, h] = u(!1), P = () => {
|
|
200
195
|
h(!0);
|
|
201
|
-
},
|
|
196
|
+
}, R = () => {
|
|
202
197
|
h(!1);
|
|
203
198
|
};
|
|
204
199
|
return /* @__PURE__ */ b(
|
|
205
200
|
s.Wrapper,
|
|
206
201
|
{
|
|
207
202
|
onSelectionChange: H,
|
|
208
|
-
selectedKey:
|
|
203
|
+
selectedKey: E,
|
|
209
204
|
$variant: i,
|
|
210
205
|
autoComplete: "text",
|
|
211
206
|
placeholder: y ?? " ",
|
|
212
|
-
isOpen: d ? !1 :
|
|
213
|
-
onOpenChange:
|
|
207
|
+
isOpen: d ? !1 : z,
|
|
208
|
+
onOpenChange: C,
|
|
214
209
|
isDisabled: $ ?? d,
|
|
215
|
-
"aria-label":
|
|
210
|
+
"aria-label": w,
|
|
216
211
|
...L,
|
|
217
212
|
children: [
|
|
218
213
|
c && /* @__PURE__ */ t(s.Label, { elementType: "label", children: c }),
|
|
219
214
|
/* @__PURE__ */ b(
|
|
220
215
|
s.Trigger,
|
|
221
216
|
{
|
|
222
|
-
ref:
|
|
217
|
+
ref: j,
|
|
223
218
|
$density: I,
|
|
224
219
|
$variant: i,
|
|
225
220
|
$readonly: d ?? !1,
|
|
226
221
|
"data-readonly": d,
|
|
227
222
|
$hasLabel: !!c,
|
|
228
223
|
children: [
|
|
229
|
-
/* @__PURE__ */ t(
|
|
224
|
+
/* @__PURE__ */ t(V, { children: k }),
|
|
230
225
|
!d && /* @__PURE__ */ t(
|
|
231
|
-
|
|
226
|
+
ne,
|
|
232
227
|
{
|
|
233
|
-
onMouseEnter:
|
|
234
|
-
onMouseLeave:
|
|
235
|
-
$isHover:
|
|
228
|
+
onMouseEnter: P,
|
|
229
|
+
onMouseLeave: R,
|
|
230
|
+
$isHover: D,
|
|
236
231
|
children: /* @__PURE__ */ t(
|
|
237
|
-
|
|
232
|
+
J,
|
|
238
233
|
{
|
|
239
234
|
size: 24,
|
|
240
|
-
data:
|
|
241
|
-
color:
|
|
235
|
+
data: Q,
|
|
236
|
+
color: e.colors.interactive.primary__resting.rgba
|
|
242
237
|
}
|
|
243
238
|
)
|
|
244
239
|
}
|
|
@@ -250,16 +245,16 @@ const s = {
|
|
|
250
245
|
s.Popover,
|
|
251
246
|
{
|
|
252
247
|
offset: 4,
|
|
253
|
-
UNSTABLE_portalContainer:
|
|
254
|
-
children: /* @__PURE__ */ t(s.ListBox, { items:
|
|
248
|
+
UNSTABLE_portalContainer: T ?? document.body,
|
|
249
|
+
children: /* @__PURE__ */ t(s.ListBox, { items: v, children: o })
|
|
255
250
|
}
|
|
256
251
|
),
|
|
257
252
|
/* @__PURE__ */ t(_, { helperText: m })
|
|
258
253
|
]
|
|
259
254
|
}
|
|
260
255
|
);
|
|
261
|
-
}),
|
|
262
|
-
value:
|
|
256
|
+
}), fe = ({
|
|
257
|
+
value: o,
|
|
263
258
|
children: i,
|
|
264
259
|
item: l,
|
|
265
260
|
...a
|
|
@@ -269,7 +264,7 @@ const s = {
|
|
|
269
264
|
s.ListBoxItem,
|
|
270
265
|
{
|
|
271
266
|
$density: c,
|
|
272
|
-
id: `select-option-${
|
|
267
|
+
id: `select-option-${o}`,
|
|
273
268
|
value: l,
|
|
274
269
|
isDisabled: a.disabled,
|
|
275
270
|
...a,
|
|
@@ -278,7 +273,7 @@ const s = {
|
|
|
278
273
|
);
|
|
279
274
|
};
|
|
280
275
|
export {
|
|
281
|
-
|
|
282
|
-
|
|
276
|
+
fe as Option,
|
|
277
|
+
_e as Select,
|
|
283
278
|
s as Styled
|
|
284
279
|
};
|
package/switch.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),o=require("react-aria"),f=require("react"),c=require("@equinor/eds-tokens"),y=require("@equinor/eds-core-react"),_=require("./useControlledState-D0L6S_5r.js");function k(t={}){let{isReadOnly:e}=t,[i,l]=_.$458b0a5536c1a7cf$export$40bfa8c7b0832715(t.isSelected,t.defaultSelected||!1,t.onChange);function d(u){e||l(u)}function h(){e||l(!i)}return{isSelected:i,setSelected:d,toggle:h}}const g={close:"M8.21967 9.28033C8.51256 9.57322 8.98744 9.57322 9.28033 9.28033C9.57322 8.98744 9.57322 8.51256 9.28033 8.21967L6.06066 5L9.28033 1.78033C9.57322 1.48744 9.57322 1.01256 9.28033 0.71967C8.98744 0.426777 8.51256 0.426777 8.21967 0.71967L5 3.93934L1.78033 0.71967C1.48744 0.426777 1.01256 0.426777 0.71967 0.71967C0.426777 1.01256 0.426777 1.48744 0.71967 1.78033L3.93934 5L0.71967 8.21967C0.426777 8.51256 0.426777 8.98744 0.71967 9.28033C1.01256 9.57322 1.48744 9.57322 1.78033 9.28033L5 6.06066L8.21967 9.28033Z",check:"M13.0303 4.21967C13.3232 4.51256 13.3232 4.98744 13.0303 5.28033L6.78033 11.5303C6.48744 11.8232 6.01256 11.8232 5.71967 11.5303L2.96967 8.78033C2.67678 8.48744 2.67678 8.01256 2.96967 7.71967C3.26256 7.42678 3.73744 7.42678 4.03033 7.71967L6.25 9.93934L11.9697 4.21967C12.2626 3.92678 12.7374 3.92678 13.0303 4.21967Z"};function v(t){const e={...t,isDisabled:t.isDisabled??t.disabled,isReadOnly:t.isReadOnly??t.readOnly,isSelected:t.isSelected??t.checked,defaultSelected:t.defaultSelected??t.defaultChecked},i=k(e),l=f.useRef(null),{inputProps:d}=o.useSwitch(e,i,l),{isFocusVisible:h,focusProps:u}=o.useFocusRing(),{isHovered:x,hoverProps:S}=o.useHover({isDisabled:!1}),{density:b}=y.useEds(),n=b==="compact",r=f.useMemo(()=>({ripple:c.tokens.colors.interactive.primary__hover_alt.rgba,background:i.isSelected?c.tokens.colors.interactive.primary__resting.hex:"rgba(220, 220, 220, 1)",circle:i.isSelected?c.tokens.colors.interactive.primary__hover_alt.hex:"rgba(111, 111, 111, 1)",icon:i.isSelected?c.tokens.colors.interactive.primary__resting.hex:"white",focus:c.tokens.colors.interactive.primary__resting.hex}),[i.isSelected]),p=n?32:48,C=n?4:12,a=n?0:8;return s.jsxs(y.Typography,{as:"label",variant:"text",group:"input",style:{display:"flex",alignItems:"center",width:"fit-content",color:e.isReadOnly||e.isDisabled?c.tokens.colors.text.static_icons__tertiary.rgba:c.tokens.colors.text.static_icons__default.rgba,cursor:e.isReadOnly||e.isDisabled?"not-allowed":"pointer"},children:[s.jsx(o.VisuallyHidden,{children:s.jsx("input",{...d,...u,ref:l})}),s.jsx("div",{style:{display:"inline",height:n?32:48},...S,children:s.jsxs("svg",{width:60,height:p,"aria-hidden":"true",style:{marginRight:4,opacity:e.isDisabled||e.isReadOnly?.4:1},children:[x&&!e.isDisabled&&!e.isReadOnly&&s.jsx("circle",{cx:i.isSelected?42:20,cy:16+a,r:n?16:20,fill:r.ripple}),s.jsx("rect",{x:8,y:C,width:46,height:24,rx:12,fill:r.background}),s.jsx("circle",{cx:i.isSelected?42:20,cy:16+a,r:9.5,fill:r.circle}),s.jsx("path",{fillRule:"evenodd",clipRule:"evenodd",d:i.isSelected?g.check:g.close,transform:`translate(${i.isSelected?32:14},${(i.isSelected?6:10)+a}) scale(1.2)`,fill:r.icon,style:{pointerEvents:"none"}}),h&&s.jsx("rect",{x:6,y:a,width:50,height:32,rx:12,fill:"none",strokeDasharray:2,stroke:r.focus,strokeWidth:2})]})}),e.children??e.label]})}exports.Switch=v;
|