@sats-group/ui-lib 88.2.0 → 88.3.1
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/package.json +1 -1
- package/react/form-content/form-content.js +1 -1
- package/react/form-content/form-content.js.map +2 -2
- package/react/form-content/form-content.scss +10 -24
- package/react/modal/modal.scss +2 -2
- package/react/select/select.js +1 -1
- package/react/select/select.js.map +3 -3
- package/react/select/select.scss +9 -2
- package/react/select/select.types.d.ts +3 -0
- package/react/select/select.types.js +1 -1
- package/react/select/select.types.js.map +2 -2
package/package.json
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
var
|
|
1
|
+
var v=Object.defineProperty;var n=Object.getOwnPropertySymbols;var _=Object.prototype.hasOwnProperty,N=Object.prototype.propertyIsEnumerable;var l=(m,s,r)=>s in m?v(m,s,{enumerable:!0,configurable:!0,writable:!0,value:r}):m[s]=r,e=(m,s)=>{for(var r in s||(s={}))_.call(s,r)&&l(m,r,s[r]);if(n)for(var r of n(s))N.call(s,r)&&l(m,r,s[r]);return m};import*as o from"react";import C from"classnames";import t from"../button";import u from"../icons/24/close";import a from"../text";import b from"./form-content.checkbox-list";import h from"./form-content.radio-list";import x from"./form-content.range";import{ContentKeys as i}from"../form-content/form-content.types";import y from"../modal/tab-trapper";const k=m=>{switch(m.key){case i.Checkbox:return o.createElement(b,e({},m));case i.Range:return o.createElement(x,e({},m));case i.Radio:return o.createElement(h,e({},m))}},z=({content:m,closeLabel:s,isOpen:r=!1,close:d,onSubmit:c,submitLabel:f,title:p})=>o.createElement("div",{className:"form-content"},r?o.createElement("div",{className:"form-content__background-overlay"}):null,o.createElement(y,{isActive:r},o.createElement("div",{className:C("form-content__modal",{"form-content__modal--open":r}),"data-test-modal":!0},o.createElement("div",{className:"form-content__modal-header"},o.createElement(a,{elementName:"span",theme:a.themes.emphasis,size:a.sizes.large,className:"form-content__modal-title"},p),o.createElement("div",{className:"form-content__modal-close-small"},o.createElement(t,{iconOnly:!0,leadingIcon:o.createElement(u,null),onClick:d,size:t.sizes.small,text:s,variant:t.variants.secondary}))),o.createElement("div",{className:"form-content__modal-content"},k(m)),o.createElement("div",{className:"form-content__modal-action-wrapper"},o.createElement("div",{className:"form-content__modal-actions"},o.createElement(t,{className:"form-content__submit",variant:t.variants.primary,size:t.sizes.basic,type:"submit",text:f,onClick:c}))))));var D=z;export{D as default};
|
|
2
2
|
//# sourceMappingURL=form-content.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../react/form-content/form-content.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nimport classNames from 'classnames';\n\nimport Button from '../button';\nimport Close from '../icons/24/close';\nimport Text from '../text';\n\nimport CheckboxList from './form-content.checkbox-list';\nimport RadioList from './form-content.radio-list';\nimport Range from './form-content.range';\n\nimport { FormContent as Props } from './form-content.types';\n\nimport { ContentKeys } from '../form-content/form-content.types';\nimport TabTrapper from '../modal/tab-trapper';\n\nconst Content = (content: Props['content']) => {\n switch (content.key) {\n case ContentKeys.Checkbox: {\n return <CheckboxList {...content} />;\n }\n case ContentKeys.Range: {\n return <Range {...content} />;\n }\n case ContentKeys.Radio: {\n return <RadioList {...content} />;\n }\n }\n};\n\nconst FormContent: React.FC<Props> = ({\n content,\n closeLabel,\n isOpen = false,\n close,\n onSubmit,\n submitLabel,\n title,\n}) => (\n <div className=\"form-content\">\n {isOpen ? <div className=\"form-content__background-overlay\"></div> : null}\n <TabTrapper isActive={isOpen}>\n <div\n className={classNames('form-content__modal', {\n 'form-content__modal--open': isOpen,\n })}\n data-test-modal\n >\n <div className=\"form-content__modal-header\">\n <Text\n elementName=\"span\"\n theme={Text.themes.emphasis}\n size={Text.sizes.
|
|
5
|
-
"mappings": "yVAAA,UAAYA,MAAW,QACvB,OAAOC,MAAgB,aAEvB,OAAOC,MAAY,YACnB,OAAOC,MAAW,oBAClB,OAAOC,MAAU,UAEjB,OAAOC,MAAkB,+BACzB,OAAOC,MAAe,4BACtB,OAAOC,MAAW,uBAIlB,OAAS,eAAAC,MAAmB,qCAC5B,OAAOC,MAAgB,uBAEvB,MAAMC,EAAWC,GAA8B,CAC7C,OAAQA,EAAQ,IAAK,CACnB,KAAKH,EAAY,SACf,OAAOR,EAAA,cAACK,EAAAO,EAAA,GAAiBD,EAAS,EAEpC,KAAKH,EAAY,MACf,OAAOR,EAAA,cAACO,EAAAK,EAAA,GAAUD,EAAS,EAE7B,KAAKH,EAAY,MACf,OAAOR,EAAA,cAACM,EAAAM,EAAA,GAAcD,EAAS,CAEnC,CACF,EAEME,EAA+B,CAAC,CACpC,QAAAF,EACA,WAAAG,EACA,OAAAC,EAAS,GACT,MAAAC,EACA,SAAAC,EACA,YAAAC,EACA,MAAAC,CACF,IACEnB,EAAA,cAAC,OAAI,UAAU,gBACZe,EAASf,EAAA,cAAC,OAAI,UAAU,mCAAmC,EAAS,KACrEA,EAAA,cAACS,EAAA,CAAW,SAAUM,GACpBf,EAAA,cAAC,OACC,UAAWC,EAAW,sBAAuB,CAC3C,4BAA6Bc,CAC/B,CAAC,EACD,kBAAe,IAEff,EAAA,cAAC,OAAI,UAAU,8BACbA,EAAA,cAACI,EAAA,CACC,YAAY,OACZ,MAAOA,EAAK,OAAO,SACnB,KAAMA,EAAK,MAAM,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nimport classNames from 'classnames';\n\nimport Button from '../button';\nimport Close from '../icons/24/close';\nimport Text from '../text';\n\nimport CheckboxList from './form-content.checkbox-list';\nimport RadioList from './form-content.radio-list';\nimport Range from './form-content.range';\n\nimport { FormContent as Props } from './form-content.types';\n\nimport { ContentKeys } from '../form-content/form-content.types';\nimport TabTrapper from '../modal/tab-trapper';\n\nconst Content = (content: Props['content']) => {\n switch (content.key) {\n case ContentKeys.Checkbox: {\n return <CheckboxList {...content} />;\n }\n case ContentKeys.Range: {\n return <Range {...content} />;\n }\n case ContentKeys.Radio: {\n return <RadioList {...content} />;\n }\n }\n};\n\nconst FormContent: React.FC<Props> = ({\n content,\n closeLabel,\n isOpen = false,\n close,\n onSubmit,\n submitLabel,\n title,\n}) => (\n <div className=\"form-content\">\n {isOpen ? <div className=\"form-content__background-overlay\"></div> : null}\n <TabTrapper isActive={isOpen}>\n <div\n className={classNames('form-content__modal', {\n 'form-content__modal--open': isOpen,\n })}\n data-test-modal\n >\n <div className=\"form-content__modal-header\">\n <Text\n elementName=\"span\"\n theme={Text.themes.emphasis}\n size={Text.sizes.large}\n className=\"form-content__modal-title\"\n >\n {title}\n </Text>\n <div className=\"form-content__modal-close-small\">\n <Button\n iconOnly\n leadingIcon={<Close />}\n onClick={close}\n size={Button.sizes.small}\n text={closeLabel}\n variant={Button.variants.secondary}\n />\n </div>\n </div>\n <div className=\"form-content__modal-content\">{Content(content)}</div>\n <div className=\"form-content__modal-action-wrapper\">\n <div className=\"form-content__modal-actions\">\n <Button\n className=\"form-content__submit\"\n variant={Button.variants.primary}\n size={Button.sizes.basic}\n type=\"submit\"\n text={submitLabel}\n onClick={onSubmit}\n />\n </div>\n </div>\n </div>\n </TabTrapper>\n </div>\n);\n\nexport default FormContent;\n"],
|
|
5
|
+
"mappings": "yVAAA,UAAYA,MAAW,QACvB,OAAOC,MAAgB,aAEvB,OAAOC,MAAY,YACnB,OAAOC,MAAW,oBAClB,OAAOC,MAAU,UAEjB,OAAOC,MAAkB,+BACzB,OAAOC,MAAe,4BACtB,OAAOC,MAAW,uBAIlB,OAAS,eAAAC,MAAmB,qCAC5B,OAAOC,MAAgB,uBAEvB,MAAMC,EAAWC,GAA8B,CAC7C,OAAQA,EAAQ,IAAK,CACnB,KAAKH,EAAY,SACf,OAAOR,EAAA,cAACK,EAAAO,EAAA,GAAiBD,EAAS,EAEpC,KAAKH,EAAY,MACf,OAAOR,EAAA,cAACO,EAAAK,EAAA,GAAUD,EAAS,EAE7B,KAAKH,EAAY,MACf,OAAOR,EAAA,cAACM,EAAAM,EAAA,GAAcD,EAAS,CAEnC,CACF,EAEME,EAA+B,CAAC,CACpC,QAAAF,EACA,WAAAG,EACA,OAAAC,EAAS,GACT,MAAAC,EACA,SAAAC,EACA,YAAAC,EACA,MAAAC,CACF,IACEnB,EAAA,cAAC,OAAI,UAAU,gBACZe,EAASf,EAAA,cAAC,OAAI,UAAU,mCAAmC,EAAS,KACrEA,EAAA,cAACS,EAAA,CAAW,SAAUM,GACpBf,EAAA,cAAC,OACC,UAAWC,EAAW,sBAAuB,CAC3C,4BAA6Bc,CAC/B,CAAC,EACD,kBAAe,IAEff,EAAA,cAAC,OAAI,UAAU,8BACbA,EAAA,cAACI,EAAA,CACC,YAAY,OACZ,MAAOA,EAAK,OAAO,SACnB,KAAMA,EAAK,MAAM,MACjB,UAAU,6BAETe,CACH,EACAnB,EAAA,cAAC,OAAI,UAAU,mCACbA,EAAA,cAACE,EAAA,CACC,SAAQ,GACR,YAAaF,EAAA,cAACG,EAAA,IAAM,EACpB,QAASa,EACT,KAAMd,EAAO,MAAM,MACnB,KAAMY,EACN,QAASZ,EAAO,SAAS,UAC3B,CACF,CACF,EACAF,EAAA,cAAC,OAAI,UAAU,+BAA+BU,EAAQC,CAAO,CAAE,EAC/DX,EAAA,cAAC,OAAI,UAAU,sCACbA,EAAA,cAAC,OAAI,UAAU,+BACbA,EAAA,cAACE,EAAA,CACC,UAAU,uBACV,QAASA,EAAO,SAAS,QACzB,KAAMA,EAAO,MAAM,MACnB,KAAK,SACL,KAAMgB,EACN,QAASD,EACX,CACF,CACF,CACF,CACF,CACF,EAGF,IAAOG,EAAQP",
|
|
6
6
|
"names": ["React", "classNames", "Button", "Close", "Text", "CheckboxList", "RadioList", "Range", "ContentKeys", "TabTrapper", "Content", "content", "__spreadValues", "FormContent", "closeLabel", "isOpen", "close", "onSubmit", "submitLabel", "title", "form_content_default"]
|
|
7
7
|
}
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
@use '../../tokens/spacing';
|
|
5
5
|
|
|
6
6
|
.form-content {
|
|
7
|
-
$breakpoint:
|
|
7
|
+
$breakpoint: 800px;
|
|
8
8
|
|
|
9
9
|
&__background-overlay {
|
|
10
10
|
pointer-events: none;
|
|
@@ -37,7 +37,7 @@
|
|
|
37
37
|
background-color: var(--surface-primary-default);
|
|
38
38
|
z-index: 500;
|
|
39
39
|
|
|
40
|
-
border-radius: corner-radius.$
|
|
40
|
+
border-radius: corner-radius.$m;
|
|
41
41
|
@include elevation.level(2);
|
|
42
42
|
|
|
43
43
|
@media (min-width: $breakpoint) {
|
|
@@ -45,7 +45,7 @@
|
|
|
45
45
|
left: 50%;
|
|
46
46
|
bottom: unset;
|
|
47
47
|
transform: translateX(-50%);
|
|
48
|
-
max-width:
|
|
48
|
+
max-width: 640px; // NOTE: To make the modal more compact on larger screens.
|
|
49
49
|
min-height: 40vh;
|
|
50
50
|
max-height: 80vh;
|
|
51
51
|
}
|
|
@@ -55,6 +55,7 @@
|
|
|
55
55
|
&__modal-content {
|
|
56
56
|
overflow-y: auto;
|
|
57
57
|
height: 100%;
|
|
58
|
+
padding-bottom: spacing.$m;
|
|
58
59
|
|
|
59
60
|
border-radius: corner-radius.$s corner-radius.$s 0 0;
|
|
60
61
|
|
|
@@ -77,34 +78,23 @@
|
|
|
77
78
|
grid-template-columns: 1fr auto;
|
|
78
79
|
align-items: center;
|
|
79
80
|
border-bottom: 1px solid var(--ge-divider-default);
|
|
80
|
-
padding: spacing.$s;
|
|
81
|
+
padding: spacing.$s spacing.$m;
|
|
81
82
|
|
|
82
|
-
@media (min-width: $breakpoint) {
|
|
83
|
-
grid-template-columns: 1fr;
|
|
84
|
-
}
|
|
85
83
|
}
|
|
86
84
|
|
|
87
85
|
&__modal-close-small {
|
|
88
|
-
@media (min-width: $breakpoint) {
|
|
89
|
-
display: none;
|
|
90
|
-
}
|
|
91
|
-
}
|
|
92
|
-
|
|
93
|
-
&__modal-close-large {
|
|
94
|
-
display: none;
|
|
95
|
-
|
|
96
86
|
@media (min-width: $breakpoint) {
|
|
97
87
|
display: block;
|
|
98
88
|
}
|
|
99
89
|
}
|
|
100
90
|
|
|
101
91
|
&__modal-title {
|
|
102
|
-
text-align:
|
|
92
|
+
text-align:left;
|
|
103
93
|
}
|
|
104
94
|
|
|
105
95
|
&__modal-action-wrapper {
|
|
106
96
|
border-top: 1px solid var(--ge-divider-default);
|
|
107
|
-
padding: spacing.$
|
|
97
|
+
padding: spacing.$m;
|
|
108
98
|
}
|
|
109
99
|
|
|
110
100
|
&__modal-actions {
|
|
@@ -113,10 +103,6 @@
|
|
|
113
103
|
grid-auto-flow: column;
|
|
114
104
|
margin: auto;
|
|
115
105
|
width: 100%;
|
|
116
|
-
|
|
117
|
-
@media (min-width: $breakpoint) {
|
|
118
|
-
width: fit-content;
|
|
119
|
-
}
|
|
120
106
|
}
|
|
121
107
|
|
|
122
108
|
&__fieldset {
|
|
@@ -133,7 +119,7 @@
|
|
|
133
119
|
&__radio-button {
|
|
134
120
|
// NOTE: Purposefully different from `&__checkbox-button` and `&__content-title`,
|
|
135
121
|
// ref. https://hfnswedenab.atlassian.net/browse/IAT-3537
|
|
136
|
-
margin: spacing.$
|
|
122
|
+
margin: spacing.$m spacing.$m 0;
|
|
137
123
|
}
|
|
138
124
|
|
|
139
125
|
&__checkbox-button {
|
|
@@ -143,8 +129,7 @@
|
|
|
143
129
|
}
|
|
144
130
|
|
|
145
131
|
&__search {
|
|
146
|
-
padding:
|
|
147
|
-
padding-top: spacing.$m;
|
|
132
|
+
padding: spacing.$l spacing.$m spacing.$xxs spacing.$m;
|
|
148
133
|
}
|
|
149
134
|
|
|
150
135
|
&__chevron-button-wrapper {
|
|
@@ -226,6 +211,7 @@
|
|
|
226
211
|
width: 21px;
|
|
227
212
|
border-bottom: 1px solid var(--ge-divider-alternate);
|
|
228
213
|
margin: 0 spacing.$m;
|
|
214
|
+
padding-top: spacing.$l;
|
|
229
215
|
}
|
|
230
216
|
|
|
231
217
|
&__range-input {
|
package/react/modal/modal.scss
CHANGED
|
@@ -107,7 +107,7 @@
|
|
|
107
107
|
width: 100%;
|
|
108
108
|
display: flex;
|
|
109
109
|
flex-direction: column;
|
|
110
|
-
gap: spacing.$
|
|
110
|
+
gap: spacing.$xxs;
|
|
111
111
|
}
|
|
112
112
|
|
|
113
113
|
&__title {
|
|
@@ -171,7 +171,7 @@
|
|
|
171
171
|
display: flex;
|
|
172
172
|
gap: spacing.$m;
|
|
173
173
|
justify-content: space-between;
|
|
174
|
-
padding: spacing.$l spacing.$m
|
|
174
|
+
padding: spacing.$l spacing.$m spacing.$s;
|
|
175
175
|
height: min-content;
|
|
176
176
|
|
|
177
177
|
@include break {
|
package/react/select/select.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";var
|
|
1
|
+
"use client";var F=Object.defineProperty;var r=Object.getOwnPropertySymbols;var y=Object.prototype.hasOwnProperty,I=Object.prototype.propertyIsEnumerable;var w=(t,l,e)=>l in t?F(t,l,{enumerable:!0,configurable:!0,writable:!0,value:e}):t[l]=e,f=(t,l)=>{for(var e in l||(l={}))y.call(l,e)&&w(t,e,l[e]);if(r)for(var e of r(l))I.call(l,e)&&w(t,e,l[e]);return t};var T=(t,l)=>{var e={};for(var s in t)y.call(t,s)&&l.indexOf(s)<0&&(e[s]=t[s]);if(t!=null&&r)for(var s of r(t))l.indexOf(s)<0&&I.call(t,s)&&(e[s]=t[s]);return e};import c from"classnames";import*as n from"react";import W from"../use-input-validation";import B from"../select-option/select-option";import o from"../text";import G from"../icons/18/arrow-down";import J from"../icons/16/error";import{labelPositions as $,themes as K,variants as h}from"./select.types";const g=n.forwardRef((U,H)=>{var b=U,{children:t,className:l,customErrorMessages:e,hasError:s,id:S,isLabelVisible:u=!0,label:m,labelPosition:O=$.stacked,name:P,onChange:E=()=>{},onChangeOption:k=()=>{},options:N=[],required:p,theme:a,variant:x=h.large,wide:_}=b,v=T(b,["children","className","customErrorMessages","hasError","id","isLabelVisible","label","labelPosition","name","onChange","onChangeOption","options","required","theme","variant","wide"]);const[L,j,d]=W(e,e==null?void 0:e.defaultError,s),A=i=>{E(i),k(N.find(({value:D})=>D===i.target.value)),L(i)},C=p?n.createElement("span",{className:"select__asterisk"},"*"):null;return n.createElement("div",{className:c("select",l,{"select--error":d})},n.createElement("div",{className:c(`select__content select__content--position-${O}`,{"select__content--wide":_,[`select__content--theme-${a}`]:a})},u?n.createElement("label",{className:"select__label",htmlFor:S},m||t?n.createElement("div",{className:c("select__label-text",{[`select__label-text--theme-${a}`]:a})},n.createElement(o,{size:x===h.small?o.sizes.small:o.sizes.basic,theme:a===z.themes.ghost?o.themes.normal:o.themes.emphasis},m),C,t):p?C:null):null,n.createElement("div",{className:c("select__native-wrapper",{"select__native-wrapper--wide":_})},n.createElement("select",f({"aria-label":u?void 0:m,className:c(`select__select select__select--variant-${x}`,{"select__select--wide":_,[`select__select--theme-${a}`]:a}),id:S,name:P,onChange:A,onInvalid:i=>{v.onInvalid&&v.onInvalid(i),j(i)},ref:H,required:p},v),N.map(i=>n.createElement(B,f({key:i.value},i)))),n.createElement("span",{className:c("select__chevron",{[`select__chevron--theme-${a}`]:a})},n.createElement(G,null))),d?n.createElement("div",{"aria-hidden":"true",className:"select__error"},n.createElement(J,null),n.createElement(o,{size:o.sizes.interface},d)):null))});g.displayName="Select";const Q=g,z=Object.assign(Q,{labelPositions:$,variants:h,themes:K});var le=z;export{le as default};
|
|
2
2
|
//# sourceMappingURL=select.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../react/select/select.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client';\n\nimport cn from 'classnames';\nimport * as React from 'react';\n\nimport useInputValidation from '../use-input-validation';\n\nimport Option from '../select-option/select-option';\nimport Text from '../text';\nimport SvgArrowDown from '../icons/18/arrow-down';\n\nimport {\n labelPositions,\n Select as Props,\n themes,\n variants,\n} from './select.types';\n\n// NOTE: `onChangeOption` works like `onChange` but returns the props for that option instead of an event object.\nconst RefSelect = React.forwardRef<\n HTMLSelectElement,\n React.PropsWithChildren<Props>\n>(\n (\n {\n children,\n className,\n id,\n isLabelVisible = true,\n label,\n labelPosition = labelPositions.stacked,\n name,\n onChange = () => {},\n onChangeOption = () => {},\n options = [],\n required,\n theme,\n variant = variants.large,\n wide,\n ...restProps\n },\n ref,\n ) => {\n const [validationOnChange, onInvalid, error] = useInputValidation();\n\n const onInputChange = (e: React.ChangeEvent<HTMLSelectElement>) => {\n onChange(e);\n onChangeOption(options.find(({ value }) => value === e.target.value));\n validationOnChange(e);\n };\n\n const asterix = required ? (\n <span className=\"select__asterisk\">*</span>\n ) : null;\n\n return (\n <div className={cn('select', className, { 'select--error': error })}>\n <div\n className={cn(\n `select__content select__content--position-${labelPosition}`,\n {\n 'select__content--wide': wide,\n [`select__content--theme-${theme}`]: theme,\n },\n )}\n >\n {isLabelVisible ? (\n <label className=\"select__label\" htmlFor={id}>\n {label || children ? (\n <div\n className={cn('select__label-text', {\n [`select__label-text--theme-${theme}`]: theme,\n })}\n >\n <Text\n size={\n variant === variants.small\n ? Text.sizes.small\n : Text.sizes.basic\n }\n theme={\n theme === Select.themes.ghost\n ? Text.themes.normal\n : Text.themes.emphasis\n }\n >\n {label}\n </Text>\n {asterix}\n {children}\n </div>\n ) : required ? (\n asterix\n ) : null}\n </label>\n ) : null}\n <div\n className={cn('select__native-wrapper', {\n 'select__native-wrapper--wide': wide,\n })}\n >\n <select\n aria-label={isLabelVisible ? undefined : label}\n className={cn(\n `select__select select__select--variant-${variant}`,\n {\n 'select__select--wide': wide,\n [`select__select--theme-${theme}`]: theme,\n },\n )}\n id={id}\n name={name}\n onChange={onInputChange}\n onInvalid={e => {\n // NOTE: To not break compatibility\n if (restProps.onInvalid) restProps.onInvalid(e);\n onInvalid(e);\n }}\n ref={ref}\n required={required}\n {...restProps}\n >\n {options.map(option => (\n <Option key={option.value} {...option} />\n ))}\n </select>\n <span\n className={cn(`select__chevron`, {\n [`select__chevron--theme-${theme}`]: theme,\n })}\n >\n <SvgArrowDown />\n </span>\n </div>\n\n {/* NOTE: This is aria-hidden because reporting of validation errors is handled by the browser */}\n {error ? (\n <div aria-hidden=\"true\" className=\"select__error\">\n {error}
|
|
5
|
-
"mappings": "wgBAEA,OAAOA,MAAQ,aACf,UAAYC,MAAW,QAEvB,OAAOC,MAAwB,0BAE/B,OAAOC,MAAY,iCACnB,OAAOC,MAAU,UACjB,OAAOC,MAAkB,
|
|
6
|
-
"names": ["cn", "React", "useInputValidation", "Option", "Text", "SvgArrowDown", "labelPositions", "themes", "variants", "RefSelect", "_a", "ref", "_b", "children", "className", "id", "isLabelVisible", "label", "labelPosition", "name", "onChange", "onChangeOption", "options", "required", "theme", "variant", "wide", "restProps", "__objRest", "validationOnChange", "onInvalid", "error", "onInputChange", "e", "value", "asterix", "Select", "__spreadValues", "option", "SelectComponent", "select_default"]
|
|
4
|
+
"sourcesContent": ["'use client';\n\nimport cn from 'classnames';\nimport * as React from 'react';\n\nimport useInputValidation from '../use-input-validation';\n\nimport Option from '../select-option/select-option';\nimport Text from '../text';\nimport SvgArrowDown from '../icons/18/arrow-down';\nimport SvgError from '../icons/16/error';\n\nimport {\n labelPositions,\n Select as Props,\n themes,\n variants,\n} from './select.types';\n\n// NOTE: `onChangeOption` works like `onChange` but returns the props for that option instead of an event object.\nconst RefSelect = React.forwardRef<\n HTMLSelectElement,\n React.PropsWithChildren<Props>\n>(\n (\n {\n children,\n className,\n customErrorMessages,\n hasError,\n id,\n isLabelVisible = true,\n label,\n labelPosition = labelPositions.stacked,\n name,\n onChange = () => {},\n onChangeOption = () => {},\n options = [],\n required,\n theme,\n variant = variants.large,\n wide,\n ...restProps\n },\n ref,\n ) => {\n const [validationOnChange, onInvalid, error] = useInputValidation(\n customErrorMessages,\n customErrorMessages?.defaultError,\n hasError,\n );\n\n const onInputChange = (e: React.ChangeEvent<HTMLSelectElement>) => {\n onChange(e);\n onChangeOption(options.find(({ value }) => value === e.target.value));\n validationOnChange(e);\n };\n\n const asterix = required ? (\n <span className=\"select__asterisk\">*</span>\n ) : null;\n\n return (\n <div className={cn('select', className, { 'select--error': error })}>\n <div\n className={cn(\n `select__content select__content--position-${labelPosition}`,\n {\n 'select__content--wide': wide,\n [`select__content--theme-${theme}`]: theme,\n },\n )}\n >\n {isLabelVisible ? (\n <label className=\"select__label\" htmlFor={id}>\n {label || children ? (\n <div\n className={cn('select__label-text', {\n [`select__label-text--theme-${theme}`]: theme,\n })}\n >\n <Text\n size={\n variant === variants.small\n ? Text.sizes.small\n : Text.sizes.basic\n }\n theme={\n theme === Select.themes.ghost\n ? Text.themes.normal\n : Text.themes.emphasis\n }\n >\n {label}\n </Text>\n {asterix}\n {children}\n </div>\n ) : required ? (\n asterix\n ) : null}\n </label>\n ) : null}\n <div\n className={cn('select__native-wrapper', {\n 'select__native-wrapper--wide': wide,\n })}\n >\n <select\n aria-label={isLabelVisible ? undefined : label}\n className={cn(\n `select__select select__select--variant-${variant}`,\n {\n 'select__select--wide': wide,\n [`select__select--theme-${theme}`]: theme,\n },\n )}\n id={id}\n name={name}\n onChange={onInputChange}\n onInvalid={e => {\n // NOTE: To not break compatibility\n if (restProps.onInvalid) restProps.onInvalid(e);\n onInvalid(e);\n }}\n ref={ref}\n required={required}\n {...restProps}\n >\n {options.map(option => (\n <Option key={option.value} {...option} />\n ))}\n </select>\n <span\n className={cn(`select__chevron`, {\n [`select__chevron--theme-${theme}`]: theme,\n })}\n >\n <SvgArrowDown />\n </span>\n </div>\n\n {/* NOTE: This is aria-hidden because reporting of validation errors is handled by the browser */}\n {error ? (\n <div aria-hidden=\"true\" className=\"select__error\">\n <SvgError />\n <Text size={Text.sizes.interface}>{error}</Text>\n </div>\n ) : null}\n </div>\n </div>\n );\n },\n);\n\n// NOTE: If this isn't set, stack traces say \"forwardRef\" instead of \"Select\"\nRefSelect.displayName = 'Select';\n\n// NOTE: Since `React.forwardRef` props aren't generic, the component is cast so that generics work as intended. See https://stackoverflow.com/a/58473012\nconst SelectComponent = RefSelect as <OptionExtra>(\n props: Props<OptionExtra> & {\n ref?: React.Ref<HTMLSelectElement>;\n },\n) => React.ReactElement;\n\nconst Select: typeof SelectComponent & {\n labelPositions: typeof labelPositions;\n variants: typeof variants;\n themes: typeof themes;\n} = Object.assign(SelectComponent, { labelPositions, variants, themes });\n\nexport default Select;\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["cn", "React", "useInputValidation", "Option", "Text", "SvgArrowDown", "SvgError", "labelPositions", "themes", "variants", "RefSelect", "_a", "ref", "_b", "children", "className", "customErrorMessages", "hasError", "id", "isLabelVisible", "label", "labelPosition", "name", "onChange", "onChangeOption", "options", "required", "theme", "variant", "wide", "restProps", "__objRest", "validationOnChange", "onInvalid", "error", "onInputChange", "e", "value", "asterix", "Select", "__spreadValues", "option", "SelectComponent", "select_default"]
|
|
7
7
|
}
|
package/react/select/select.scss
CHANGED
|
@@ -35,7 +35,8 @@
|
|
|
35
35
|
:root &--error {
|
|
36
36
|
select {
|
|
37
37
|
background-color: rgba(var(--signal-surface-error), 0.07);
|
|
38
|
-
|
|
38
|
+
outline: 2px solid var(--ge-signal-error);
|
|
39
|
+
outline-offset: -2px;
|
|
39
40
|
color: var(--on-signal-surface-error-default);
|
|
40
41
|
}
|
|
41
42
|
}
|
|
@@ -133,8 +134,14 @@
|
|
|
133
134
|
}
|
|
134
135
|
|
|
135
136
|
&__error {
|
|
137
|
+
display: flex;
|
|
138
|
+
gap: spacing.$xs;
|
|
139
|
+
align-items: center;
|
|
136
140
|
color: var(--ge-signal-error);
|
|
137
|
-
|
|
141
|
+
|
|
142
|
+
> svg {
|
|
143
|
+
flex-shrink: 0;
|
|
144
|
+
}
|
|
138
145
|
}
|
|
139
146
|
|
|
140
147
|
&__asterisk {
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { ObjectValues, SelectHtmlProps } from '../types';
|
|
2
2
|
import { SelectOption } from '../select-option/select-option.types';
|
|
3
|
+
import { Messages } from '../use-input-validation.types';
|
|
3
4
|
export declare const labelPositions: {
|
|
4
5
|
readonly inline: "inline";
|
|
5
6
|
readonly stacked: "stacked";
|
|
@@ -12,6 +13,8 @@ export declare const themes: {
|
|
|
12
13
|
readonly ghost: "ghost";
|
|
13
14
|
};
|
|
14
15
|
export type Select<OptionExtra = any> = {
|
|
16
|
+
customErrorMessages?: Messages;
|
|
17
|
+
hasError?: boolean;
|
|
15
18
|
id: string;
|
|
16
19
|
isLabelVisible?: boolean;
|
|
17
20
|
label?: string;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
const
|
|
1
|
+
const l={inline:"inline",stacked:"stacked"},r={small:"small",large:"large"},p={ghost:"ghost"};export{l as labelPositions,p as themes,r as variants};
|
|
2
2
|
//# sourceMappingURL=select.types.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../react/select/select.types.ts"],
|
|
4
|
-
"sourcesContent": ["import { ObjectValues, SelectHtmlProps } from '../types';\n\nimport { SelectOption } from '../select-option/select-option.types';\n\nexport const labelPositions = {\n inline: 'inline',\n stacked: 'stacked',\n} as const;\n\nexport const variants = {\n small: 'small',\n large: 'large',\n} as const;\n\nexport const themes = {\n ghost: 'ghost',\n} as const;\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport type Select<OptionExtra = any> = {\n id: string;\n isLabelVisible?: boolean;\n label?: string;\n labelPosition?: ObjectValues<typeof labelPositions>;\n name: string;\n onChangeOption?: (option?: SelectOption<OptionExtra>) => void;\n options?: SelectOption<OptionExtra>[];\n variant?: ObjectValues<typeof variants>;\n wide?: boolean;\n theme?: ObjectValues<typeof themes>;\n} & SelectHtmlProps;\n"],
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["import { ObjectValues, SelectHtmlProps } from '../types';\n\nimport { SelectOption } from '../select-option/select-option.types';\nimport { Messages } from '../use-input-validation.types';\n\nexport const labelPositions = {\n inline: 'inline',\n stacked: 'stacked',\n} as const;\n\nexport const variants = {\n small: 'small',\n large: 'large',\n} as const;\n\nexport const themes = {\n ghost: 'ghost',\n} as const;\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport type Select<OptionExtra = any> = {\n customErrorMessages?: Messages;\n hasError?: boolean;\n id: string;\n isLabelVisible?: boolean;\n label?: string;\n labelPosition?: ObjectValues<typeof labelPositions>;\n name: string;\n onChangeOption?: (option?: SelectOption<OptionExtra>) => void;\n options?: SelectOption<OptionExtra>[];\n variant?: ObjectValues<typeof variants>;\n wide?: boolean;\n theme?: ObjectValues<typeof themes>;\n} & SelectHtmlProps;\n"],
|
|
5
|
+
"mappings": "AAKO,MAAMA,EAAiB,CAC5B,OAAQ,SACR,QAAS,SACX,EAEaC,EAAW,CACtB,MAAO,QACP,MAAO,OACT,EAEaC,EAAS,CACpB,MAAO,OACT",
|
|
6
6
|
"names": ["labelPositions", "variants", "themes"]
|
|
7
7
|
}
|