@sats-group/ui-lib 81.6.0 → 82.0.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/package.json
CHANGED
package/react/select/select.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";var
|
|
1
|
+
"use client";var j=Object.defineProperty;var r=Object.getOwnPropertySymbols;var b=Object.prototype.hasOwnProperty,C=Object.prototype.propertyIsEnumerable;var x=(e,s,t)=>s in e?j(e,s,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[s]=t,f=(e,s)=>{for(var t in s||(s={}))b.call(s,t)&&x(e,t,s[t]);if(r)for(var t of r(s))C.call(s,t)&&x(e,t,s[t]);return e};var E=(e,s)=>{var t={};for(var n in e)b.call(e,n)&&s.indexOf(n)<0&&(t[n]=e[n]);if(e!=null&&r)for(var n of r(e))s.indexOf(n)<0&&C.call(e,n)&&(t[n]=e[n]);return t};import c from"classnames";import*as l from"react";import A from"../use-input-validation";import D from"../select-option/select-option";import i from"../text";import F from"../icons/18/arrow-down";import{labelPositions as w,themes as W,variants as h}from"./select.types";const y=l.forwardRef((G,k)=>{var S=G,{children:e,className:s,id:t,isLabelVisible:n=!0,label:m,labelPosition:$=w.stacked,name:O,onChange:P=()=>{},onChangeOption:T=()=>{},options:u=[],required:_,theme:a,variant:N=h.large,wide:p}=S,v=E(S,["children","className","id","isLabelVisible","label","labelPosition","name","onChange","onChangeOption","options","required","theme","variant","wide"]);const[z,H,d]=A(),M=o=>{P(o),T(u.find(({value:L})=>L===o.target.value)),z(o)},g=_?l.createElement("span",{className:"select__asterisk"},"*"):null;return l.createElement("div",{className:c("select",s,{"select--error":d})},l.createElement("div",{className:c(`select__content select__content--position-${$}`,{"select__content--wide":p,[`select__content--theme-${a}`]:a})},n?l.createElement("label",{className:"select__label",htmlFor:t},m||e?l.createElement("div",{className:c("select__label-text",{[`select__label-text--theme-${a}`]:a})},l.createElement(i,{size:N===h.small?i.sizes.small:i.sizes.basic,theme:a===I.themes.ghost?i.themes.normal:i.themes.emphasis},m),g,e):_?g:null):null,l.createElement("div",{className:c("select__native-wrapper",{"select__native-wrapper--wide":p})},l.createElement("select",f({"aria-label":n?void 0:m,className:c(`select__select select__select--variant-${N}`,{"select__select--wide":p,[`select__select--theme-${a}`]:a}),id:t,name:O,onChange:M,onInvalid:o=>{v.onInvalid&&v.onInvalid(o),H(o)},ref:k,required:_},v),u.map(o=>l.createElement(D,f({key:o.value},o)))),l.createElement("span",{className:c("select__chevron",{[`select__chevron--theme-${a}`]:a})},l.createElement(F,null))),d?l.createElement("div",{"aria-hidden":"true",className:"select__error"},d):null))});y.displayName="Select";const B=y,I=Object.assign(B,{labelPositions:w,variants:h,themes:W});var q=I;export{q 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
|
|
5
|
-
"mappings": "wgBAEA,OAAOA,MAAQ,aACf,UAAYC,MAAW,QAEvB,OAAOC,MAAwB,0BAE/B,OAAOC,MAAY,iCACnB,OAAOC,MAAU,UACjB,OAAOC,MAAkB,yBAEzB,OACE,kBAAAC,EAEA,UAAAC,EACA,YAAAC,MACK,iBAGP,MAAMC,EAAYR,EAAM,WAItB,CACES,
|
|
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", "
|
|
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}\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", "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"]
|
|
7
7
|
}
|
package/react/select/select.scss
CHANGED
|
@@ -23,12 +23,11 @@
|
|
|
23
23
|
flex-wrap: nowrap;
|
|
24
24
|
}
|
|
25
25
|
|
|
26
|
-
&--space-between {
|
|
27
|
-
justify-content: space-between;
|
|
28
|
-
}
|
|
29
|
-
|
|
30
26
|
&--theme-ghost {
|
|
31
|
-
|
|
27
|
+
align-items: center;
|
|
28
|
+
display: flex;
|
|
29
|
+
flex-direction: row;
|
|
30
|
+
gap: spacing.$xs;
|
|
32
31
|
}
|
|
33
32
|
}
|
|
34
33
|
|
|
@@ -101,6 +100,7 @@
|
|
|
101
100
|
padding-top: spacing.$xs;
|
|
102
101
|
padding-bottom: spacing.$xs;
|
|
103
102
|
padding-left: spacing.$xs;
|
|
103
|
+
background-color: var(--surface-secondary-default);
|
|
104
104
|
}
|
|
105
105
|
|
|
106
106
|
@media (hover: hover) {
|
|
@@ -140,11 +140,15 @@
|
|
|
140
140
|
|
|
141
141
|
&__asterisk {
|
|
142
142
|
color: var(--on-surface-featured);
|
|
143
|
-
margin-left: spacing.$
|
|
143
|
+
margin-left: spacing.$xxs;
|
|
144
144
|
}
|
|
145
145
|
|
|
146
146
|
&__label-text {
|
|
147
147
|
display: flex;
|
|
148
148
|
flex-direction: row;
|
|
149
|
+
|
|
150
|
+
&--theme-ghost {
|
|
151
|
+
color: var(--on-background-primary-alternate);
|
|
152
|
+
}
|
|
149
153
|
}
|
|
150
154
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
const
|
|
1
|
+
const i={inline:"inline",stacked:"stacked"},a={small:"small",large:"large"},l={ghost:"ghost"};export{i as labelPositions,l as themes,a 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
|
|
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
5
|
"mappings": "AAIO,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
|
}
|