@helsenorge/designsystem-react 5.1.2 → 5.1.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,3 +1,7 @@
1
+ ## [5.1.3](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv5.1.2&targetVersion=GTv5.1.3) (2023-10-31)
2
+
3
+ ## [5.1.2](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv5.1.1&targetVersion=GTv5.1.2) (2023-10-31)
4
+
1
5
  ## [5.1.1](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv5.1.0&targetVersion=GTv5.1.1) (2023-10-30)
2
6
 
3
7
  ### Bug Fixes
package/Input.js CHANGED
@@ -1,2 +1,2 @@
1
- import r,{useRef as $,useState as A}from"react";import x from"classnames";import{FormMode as l,FormVariant as he,IconSize as K,AnalyticsId as ge,AVERAGE_CHARACTER_WIDTH_PX as Ce}from"./constants.js";import{useBreakpoint as ve,Breakpoint as xe}from"./hooks/useBreakpoint.js";import{useUuid as ye}from"./hooks/useUuid.js";import{getColor as D}from"./theme/currys/color.js";import{E as ke}from"./ErrorWrapper.js";import{Icon as we}from"./components/Icons/Icon.js";import{a as Ee}from"./Label.js";import{M as _e}from"./MaxCharacters.js";import n from"./components/Input/styles.module.scss";var Ie=(e=>(e.text="text",e.number="number",e.email="email",e.password="password",e.search="search",e.tel="tel",e.url="url",e.date="date",e.time="time",e))(Ie||{});const Ne=(e,s,f)=>{const u=s?"1.5rem":"2rem",b=s?`${f}px`:"0px",d="4px";return`calc(${e*Ce}px + ${u} + ${b} + ${d})`},F=r.forwardRef((e,s)=>{const{className:f,defaultValue:u,placeholder:b,type:d="text",name:M,transparent:z=!1,icon:i,iconRight:h,inputId:B,inputWrapperRef:P,mode:o=l.onwhite,baseIncrementValue:y,variant:U,label:H,error:O,errorText:k,testId:X,disabled:c,readOnly:q,autoComplete:G,afterInputChildren:L,rightOfInput:j,width:w,required:J,onChange:E,onKeyDown:_,autoFocus:Q,maxCharacters:m,maxText:Y,...Z}=e,T=ve(),p=$(null),I=ye(B),[N,ee]=A(u||""),[te,ne]=A(void 0),g=$(!1),R=/^[0-9]$/,re=o===l.ondark,ae=o===l.onblueberry,oe=!!m&&N.toString().length>m,C=o===l.oninvalid||!!k||!!O||oe,v=U===he.bigform,ie=z&&o!==l.ondark&&!C,ce=x(n["input-wrapper"],f),le=x(n["input-container"],{[n["input-container--transparent"]]:ie,[n["input-container--on-blueberry"]]:ae,[n["input-container--on-dark"]]:re,[n["input-container--invalid"]]:C,[n["input-container--bigform"]]:v,[n["input-container--disabled"]]:c,[n["input-container--with-icon"]]:i}),se=x(n["input-container__input"],{[n["input-container__input--bigform"]]:v,[n["input-container__input--disabled"]]:c}),ue=c?D("neutral",500):D("black"),S=T===xe.xs||!v?K.XSmall:K.Small,W=()=>i!==void 0?r.createElement(we,{className:n["input-container__input__icon"],color:ue,size:S,svgIcon:i}):null,de=t=>{if(p&&p.current&&i){const a=h?0:1;p.current.children[a].focus(),e.onClick&&e.onClick(t)}},me=t=>{const a=pe(t);E&&E(t),ee(a),ne(a)},pe=t=>{if(typeof y>"u"||d!=="number")return t.target.value;const a=Number(t.target.value);return!te&&!g.current&&(a===1||a===-1)&&(t.target.value=y+""),t.target.value},fe=t=>{R.test(t.key)&&(g.current=!0),_&&_(t)},be=t=>{R.test(t.key)&&(g.current=!1)},V=w?Ne(w,!!i,S):void 0;return r.createElement(ke,{errorText:k},r.createElement("div",{"data-testid":X,"data-analyticsid":ge.Input,className:ce,ref:P},Ee(H,I,o,c),r.createElement("div",{className:n["content-wrapper"],style:{width:V}},r.createElement("div",{onClick:de,ref:p,className:le},!h&&W(),r.createElement("input",{onChange:me,onKeyDown:fe,onKeyUp:be,name:M,type:d,defaultValue:u,id:I,className:se,ref:s,"aria-labelledby":e["aria-labelledby"]??void 0,"aria-describedby":e["aria-describedby"]??void 0,"aria-invalid":!!C,disabled:c,placeholder:b,readOnly:q,autoComplete:G||"off",required:J,autoFocus:Q,...Z}),h&&W()),j),m&&r.createElement(_e,{maxCharacters:m,length:N.toString().length,maxText:Y,mode:o,maxWidth:V}),L))});F.displayName="Input";const Pe=F;export{Pe as I,Ie as a};
1
+ import r,{useRef as $,useState as A}from"react";import x from"classnames";import{FormMode as s,FormVariant as he,IconSize as K,AnalyticsId as ge,AVERAGE_CHARACTER_WIDTH_PX as ve}from"./constants.js";import{useBreakpoint as Ce,Breakpoint as xe}from"./hooks/useBreakpoint.js";import{useUuid as ye}from"./hooks/useUuid.js";import{getColor as D}from"./theme/currys/color.js";import{E as Ee}from"./ErrorWrapper.js";import{Icon as _e}from"./components/Icons/Icon.js";import{a as ke}from"./Label.js";import{M as we}from"./MaxCharacters.js";import t from"./components/Input/styles.module.scss";var Ie=(e=>(e.text="text",e.number="number",e.email="email",e.password="password",e.search="search",e.tel="tel",e.url="url",e.date="date",e.time="time",e))(Ie||{});const Ne=(e,l,f)=>{const u=l?"1.5rem":"2rem",b=l?`${f}px`:"0px",d="4px";return`calc(${e*ve}px + ${u} + ${b} + ${d})`},F=r.forwardRef((e,l)=>{const{className:f,defaultValue:u,placeholder:b,type:d="text",name:M,transparent:z=!1,icon:i,iconRight:h,inputId:B,inputWrapperRef:P,mode:o=s.onwhite,baseIncrementValue:y,variant:U,label:H,error:O,errorText:E,testId:X,disabled:c,readOnly:q,autoComplete:G,afterInputChildren:L,rightOfInput:j,width:_,required:J,onChange:k,onKeyDown:w,autoFocus:Q,maxCharacters:m,maxText:Y,...Z}=e,T=Ce(),p=$(null),I=ye(B),[N,ee]=A(u||""),[te,ne]=A(void 0),g=$(!1),R=/^[0-9]$/,re=o===s.ondark,ae=o===s.onblueberry,oe=!!m&&N.toString().length>m,v=o===s.oninvalid||!!E||!!O||oe,C=U===he.bigform,ie=z&&o!==s.ondark&&!v,ce=x(t["input-wrapper"],f),se=x(t["input-container"],{[t["input-container--transparent"]]:ie,[t["input-container--on-blueberry"]]:ae,[t["input-container--on-dark"]]:re,[t["input-container--invalid"]]:v,[t["input-container--bigform"]]:C,[t["input-container--disabled"]]:c,[t["input-container--with-icon"]]:i}),le=x(t["input-container__input"],{[t["input-container__input--bigform"]]:C,[t["input-container__input--disabled"]]:c}),ue=c?D("neutral",500):D("black"),W=T===xe.xs||!C?K.XSmall:K.Small,S=()=>i!==void 0?r.createElement(_e,{className:t["input-container__input__icon"],color:ue,size:W,svgIcon:i}):null,de=n=>{if(p&&p.current&&i){const a=h?0:1;p.current.children[a].focus(),e.onClick&&e.onClick(n)}},me=n=>{const a=pe(n);k&&k(n),ee(a),ne(a)},pe=n=>{if(typeof y>"u"||d!=="number")return n.target.value;const a=Number(n.target.value);return!te&&!g.current&&(a===1||a===-1)&&(n.target.value=y+""),n.target.value},fe=n=>{R.test(n.key)&&(g.current=!0),w&&w(n)},be=n=>{R.test(n.key)&&(g.current=!1)},V=_?Ne(_,!!i,W):void 0;return r.createElement(Ee,{errorText:E},r.createElement("div",{"data-testid":X,"data-analyticsid":ge.Input,className:ce,ref:P},ke(H,I,o,c),r.createElement("div",{className:t["content-wrapper"]},r.createElement("div",{onClick:de,ref:p,className:se,style:{maxWidth:V}},!h&&S(),r.createElement("input",{onChange:me,onKeyDown:fe,onKeyUp:be,name:M,type:d,defaultValue:u,id:I,className:le,ref:l,"aria-labelledby":e["aria-labelledby"]??void 0,"aria-describedby":e["aria-describedby"]??void 0,"aria-invalid":!!v,disabled:c,placeholder:b,readOnly:q,autoComplete:G||"off",required:J,autoFocus:Q,...Z}),h&&S()),r.createElement("div",{className:t["content-wrapper__right-of-input"]},j)),m&&r.createElement(we,{maxCharacters:m,length:N.toString().length,maxText:Y,mode:o,maxWidth:V}),L))});F.displayName="Input";const Pe=F;export{Pe as I,Ie as a};
2
2
  //# sourceMappingURL=Input.js.map
package/Input.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Input.js","sources":["../src/components/Input/Input.tsx"],"sourcesContent":["import React, { useRef, useState } from 'react';\n\nimport cn from 'classnames';\n\nimport { FormMode, FormVariant, AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX } from '../../constants';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getColor } from '../../theme/currys';\nimport ErrorWrapper from '../ErrorWrapper';\nimport Icon, { IconSize, SvgIcon } from '../Icons';\nimport { renderLabel } from '../Label';\nimport MaxCharacters from '../MaxCharacters/MaxCharacters';\n\nimport styles from './styles.module.scss';\n\nexport interface InputProps\n extends Pick<\n React.InputHTMLAttributes<HTMLInputElement>,\n | 'disabled'\n | 'readOnly'\n | 'autoComplete'\n | 'name'\n | 'placeholder'\n | 'defaultValue'\n | 'required'\n | 'value'\n | 'min'\n | 'max'\n | 'aria-describedby'\n | 'aria-labelledby'\n | 'onBlur'\n | 'onClick'\n | 'onChange'\n | 'onFocus'\n | 'onKeyDown'\n | 'autoFocus'\n > {\n /** The number at which the input field starts when you increment or decrement it */\n baseIncrementValue?: number;\n /** Adds custom classes to the element. */\n className?: string;\n /** HMTL Input type */\n type?: keyof typeof InputTypes;\n /** input id */\n inputId?: string;\n /** Width of input field in characters (approximate) */\n width?: number;\n /** If true, the component will be transparent. */\n transparent?: boolean;\n /** Icon to be displayed next to the input field */\n icon?: SvgIcon;\n /** Places the icon to the right */\n iconRight?: boolean;\n /** Ref that is placed on the inputWrapper */\n inputWrapperRef?: React.RefObject<HTMLDivElement>;\n /** Changes the color profile of the input */\n mode?: keyof typeof FormMode;\n /** Changes the visuals of the input */\n variant?: keyof typeof FormVariant;\n /** Label of the input */\n label?: React.ReactNode;\n /** Activates Error style for the input */\n error?: boolean;\n /** Error text to show above the component */\n errorText?: string;\n /** Sets the data-testid attribute. */\n testId?: string;\n /** Component shown after input */\n afterInputChildren?: React.ReactNode;\n /** Component shown to the right of input */\n rightOfInput?: React.ReactNode;\n /** max character limit in input */\n maxCharacters?: number;\n /** The text is displayed in the end of the text-counter */\n maxText?: string;\n}\n\nexport enum InputTypes {\n text = 'text',\n number = 'number',\n email = 'email',\n password = 'password',\n search = 'search',\n tel = 'tel',\n url = 'url',\n date = 'date',\n time = 'time',\n}\n\nconst getInputMaxWidth = (characters: number, hasIcon: boolean, iconSize: number): string => {\n const paddingWidth = hasIcon ? '1.5rem' : '2rem';\n const iconWidth = hasIcon ? `${iconSize}px` : '0px';\n const borderWidth = '4px';\n\n return `calc(${characters * AVERAGE_CHARACTER_WIDTH_PX}px + ${paddingWidth} + ${iconWidth} + ${borderWidth})`;\n};\n\nconst Input = React.forwardRef((props: InputProps, ref: React.Ref<HTMLInputElement>) => {\n const {\n className,\n defaultValue,\n placeholder,\n type = InputTypes.text,\n name,\n transparent = false,\n icon,\n iconRight,\n inputId,\n inputWrapperRef,\n mode = FormMode.onwhite,\n baseIncrementValue,\n variant,\n label,\n error,\n errorText,\n testId,\n disabled,\n readOnly,\n autoComplete,\n afterInputChildren,\n rightOfInput,\n width,\n required,\n onChange,\n onKeyDown,\n autoFocus,\n maxCharacters,\n maxText,\n ...rest\n } = props;\n const breakpoint = useBreakpoint();\n const inputContainerRef = useRef<HTMLDivElement>(null);\n const inputIdState = useUuid(inputId);\n const [input, setInput] = useState(defaultValue || '');\n const [prevValue, setPrevValue] = useState<string | number | undefined>(undefined);\n const numKeyPressed = useRef<boolean>(false);\n const numRegex = /^[0-9]$/;\n\n const onDark = mode === FormMode.ondark;\n const onBlueberry = mode === FormMode.onblueberry;\n const maxCharactersExceeded = !!maxCharacters && input.toString().length > maxCharacters;\n const onError = mode === FormMode.oninvalid || !!errorText || !!error || maxCharactersExceeded;\n const bigForm = variant === FormVariant.bigform;\n const isTransparent = transparent && mode !== FormMode.ondark && !onError;\n\n const inputWrapperClass = cn(styles['input-wrapper'], className);\n\n const inputContainer = cn(styles['input-container'], {\n [styles['input-container--transparent']]: isTransparent,\n [styles['input-container--on-blueberry']]: onBlueberry,\n [styles['input-container--on-dark']]: onDark,\n [styles['input-container--invalid']]: onError,\n [styles['input-container--bigform']]: bigForm,\n [styles['input-container--disabled']]: disabled,\n [styles['input-container--with-icon']]: icon,\n });\n\n const inputClass = cn(styles['input-container__input'], {\n [styles['input-container__input--bigform']]: bigForm,\n [styles['input-container__input--disabled']]: disabled,\n });\n\n const iconColor = disabled ? getColor('neutral', 500) : getColor('black');\n const iconSize = breakpoint === Breakpoint.xs || !bigForm ? IconSize.XSmall : IconSize.Small;\n\n const renderIcon = (): React.ReactNode => {\n return icon !== undefined ? (\n <Icon className={styles['input-container__input__icon']} color={iconColor} size={iconSize} svgIcon={icon} />\n ) : null;\n };\n\n // eslint-disable-next-line\n const handleClick = (e: React.MouseEvent<any>): void => {\n if (inputContainerRef && inputContainerRef.current && icon) {\n const selectedChild = iconRight ? 0 : 1;\n const input = inputContainerRef.current.children[selectedChild] as HTMLInputElement;\n input.focus();\n\n props.onClick && props.onClick(e);\n }\n };\n\n const handleChange = (e: React.ChangeEvent<HTMLInputElement>): void => {\n const newValue = getIncrementValue(e);\n\n if (onChange) {\n onChange(e);\n }\n\n setInput(newValue);\n setPrevValue(newValue);\n };\n\n // Hvis bruker endrer number value med 1 og det skal startes på en annen verdi enn 0\n const getIncrementValue = (e: React.ChangeEvent<HTMLInputElement>): string => {\n if (typeof baseIncrementValue === 'undefined' || type !== 'number') return e.target.value;\n\n const valueAsNumber = Number(e.target.value);\n\n if (!prevValue && !numKeyPressed.current && (valueAsNumber === 1 || valueAsNumber === -1)) {\n e.target.value = baseIncrementValue + '';\n }\n\n return e.target.value;\n };\n\n const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>): void => {\n if (numRegex.test(e.key)) {\n numKeyPressed.current = true;\n }\n onKeyDown && onKeyDown(e);\n };\n\n const handleKeyUp = (e: React.KeyboardEvent<HTMLInputElement>): void => {\n if (numRegex.test(e.key)) {\n numKeyPressed.current = false;\n }\n };\n\n const widthStyling = width ? getInputMaxWidth(width, !!icon, iconSize) : undefined;\n\n return (\n <ErrorWrapper errorText={errorText}>\n <div data-testid={testId} data-analyticsid={AnalyticsId.Input} className={inputWrapperClass} ref={inputWrapperRef}>\n {renderLabel(label, inputIdState, mode as FormMode, disabled)}\n {/* input-elementet tillater keyboard-interaksjon */}\n <div className={styles['content-wrapper']} style={{ width: widthStyling }}>\n {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */}\n <div onClick={handleClick} ref={inputContainerRef} className={inputContainer}>\n {!iconRight && renderIcon()}\n <input\n onChange={handleChange}\n onKeyDown={handleKeyDown}\n onKeyUp={handleKeyUp}\n name={name}\n type={type}\n defaultValue={defaultValue}\n id={inputIdState}\n className={inputClass}\n ref={ref}\n aria-labelledby={props['aria-labelledby'] ?? undefined}\n aria-describedby={props['aria-describedby'] ?? undefined}\n aria-invalid={!!onError}\n disabled={disabled}\n placeholder={placeholder}\n readOnly={readOnly}\n autoComplete={autoComplete || 'off'}\n required={required}\n // eslint-disable-next-line jsx-a11y/no-autofocus\n autoFocus={autoFocus}\n {...rest}\n />\n {iconRight && renderIcon()}\n </div>\n {rightOfInput}\n </div>\n {maxCharacters && (\n <MaxCharacters\n maxCharacters={maxCharacters}\n length={input.toString().length}\n maxText={maxText}\n mode={mode}\n maxWidth={widthStyling}\n />\n )}\n {afterInputChildren}\n </div>\n </ErrorWrapper>\n );\n});\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"names":["InputTypes","getInputMaxWidth","characters","hasIcon","iconSize","paddingWidth","iconWidth","borderWidth","AVERAGE_CHARACTER_WIDTH_PX","Input","React","props","ref","className","defaultValue","placeholder","type","name","transparent","icon","iconRight","inputId","inputWrapperRef","mode","FormMode","baseIncrementValue","variant","label","error","errorText","testId","disabled","readOnly","autoComplete","afterInputChildren","rightOfInput","width","required","onChange","onKeyDown","autoFocus","maxCharacters","maxText","rest","breakpoint","useBreakpoint","inputContainerRef","useRef","inputIdState","useUuid","input","setInput","useState","prevValue","setPrevValue","numKeyPressed","numRegex","onDark","onBlueberry","maxCharactersExceeded","onError","bigForm","FormVariant","isTransparent","inputWrapperClass","cn","styles","inputContainer","inputClass","iconColor","getColor","Breakpoint","IconSize","renderIcon","Icon","handleClick","e","selectedChild","handleChange","newValue","getIncrementValue","valueAsNumber","handleKeyDown","handleKeyUp","widthStyling","ErrorWrapper","AnalyticsId","renderLabel","MaxCharacters","Input$1"],"mappings":"0kBA6EY,IAAAA,IAAAA,IACVA,EAAA,KAAO,OACPA,EAAA,OAAS,SACTA,EAAA,MAAQ,QACRA,EAAA,SAAW,WACXA,EAAA,OAAS,SACTA,EAAA,IAAM,MACNA,EAAA,IAAM,MACNA,EAAA,KAAO,OACPA,EAAA,KAAO,OATGA,IAAAA,IAAA,CAAA,CAAA,EAYZ,MAAMC,GAAmB,CAACC,EAAoBC,EAAkBC,IAA6B,CACrF,MAAAC,EAAeF,EAAU,SAAW,OACpCG,EAAYH,EAAU,GAAGC,CAAQ,KAAO,MACxCG,EAAc,MAEb,MAAA,QAAQL,EAAaM,EAA0B,QAAQH,CAAY,MAAMC,CAAS,MAAMC,CAAW,GAC5G,EAEME,EAAQC,EAAM,WAAW,CAACC,EAAmBC,IAAqC,CAChF,KAAA,CACJ,UAAAC,EACA,aAAAC,EACA,YAAAC,EACA,KAAAC,EAAO,OACP,KAAAC,EACA,YAAAC,EAAc,GACd,KAAAC,EACA,UAAAC,EACA,QAAAC,EACA,gBAAAC,EACA,KAAAC,EAAOC,EAAS,QAChB,mBAAAC,EACA,QAAAC,EACA,MAAAC,EACA,MAAAC,EACA,UAAAC,EACA,OAAAC,EACA,SAAAC,EACA,SAAAC,EACA,aAAAC,EACA,mBAAAC,EACA,aAAAC,EACA,MAAAC,EACA,SAAAC,EACA,SAAAC,EACA,UAAAC,EACA,UAAAC,EACA,cAAAC,EACA,QAAAC,EACA,GAAGC,CACD,EAAAhC,EACEiC,EAAaC,KACbC,EAAoBC,EAAuB,IAAI,EAC/CC,EAAeC,GAAQ5B,CAAO,EAC9B,CAAC6B,EAAOC,EAAQ,EAAIC,EAAStC,GAAgB,EAAE,EAC/C,CAACuC,GAAWC,EAAY,EAAIF,EAAsC,MAAS,EAC3EG,EAAgBR,EAAgB,EAAK,EACrCS,EAAW,UAEXC,GAASlC,IAASC,EAAS,OAC3BkC,GAAcnC,IAASC,EAAS,YAChCmC,GAAwB,CAAC,CAAClB,GAAiBS,EAAM,WAAW,OAAST,EACrEmB,EAAUrC,IAASC,EAAS,WAAa,CAAC,CAACK,GAAa,CAAC,CAACD,GAAS+B,GACnEE,EAAUnC,IAAYoC,GAAY,QAClCC,GAAgB7C,GAAeK,IAASC,EAAS,QAAU,CAACoC,EAE5DI,GAAoBC,EAAGC,EAAO,eAAe,EAAGrD,CAAS,EAEzDsD,GAAiBF,EAAGC,EAAO,iBAAiB,EAAG,CACnD,CAACA,EAAO,8BAA8B,CAAC,EAAGH,GAC1C,CAACG,EAAO,+BAA+B,CAAC,EAAGR,GAC3C,CAACQ,EAAO,0BAA0B,CAAC,EAAGT,GACtC,CAACS,EAAO,0BAA0B,CAAC,EAAGN,EACtC,CAACM,EAAO,0BAA0B,CAAC,EAAGL,EACtC,CAACK,EAAO,2BAA2B,CAAC,EAAGnC,EACvC,CAACmC,EAAO,4BAA4B,CAAC,EAAG/C,CAAA,CACzC,EAEKiD,GAAaH,EAAGC,EAAO,wBAAwB,EAAG,CACtD,CAACA,EAAO,iCAAiC,CAAC,EAAGL,EAC7C,CAACK,EAAO,kCAAkC,CAAC,EAAGnC,CAAA,CAC/C,EAEKsC,GAAYtC,EAAWuC,EAAS,UAAW,GAAG,EAAIA,EAAS,OAAO,EAClElE,EAAWwC,IAAe2B,GAAW,IAAM,CAACV,EAAUW,EAAS,OAASA,EAAS,MAEjFC,EAAa,IACVtD,IAAS,OACbT,EAAA,cAAAgE,GAAA,CAAK,UAAWR,EAAO,8BAA8B,EAAG,MAAOG,GAAW,KAAMjE,EAAU,QAASe,EAAM,EACxG,KAIAwD,GAAeC,GAAmC,CAClD,GAAA9B,GAAqBA,EAAkB,SAAW3B,EAAM,CACpD,MAAA0D,EAAgBzD,EAAY,EAAI,EACxB0B,EAAkB,QAAQ,SAAS+B,CAAa,EACxD,MAAM,EAENlE,EAAA,SAAWA,EAAM,QAAQiE,CAAC,CAClC,CAAA,EAGIE,GAAgBF,GAAiD,CAC/D,MAAAG,EAAWC,GAAkBJ,CAAC,EAEhCtC,GACFA,EAASsC,CAAC,EAGZzB,GAAS4B,CAAQ,EACjBzB,GAAayB,CAAQ,CAAA,EAIjBC,GAAqBJ,GAAmD,CACxE,GAAA,OAAOnD,EAAuB,KAAeT,IAAS,SAAU,OAAO4D,EAAE,OAAO,MAEpF,MAAMK,EAAgB,OAAOL,EAAE,OAAO,KAAK,EAEvC,MAAA,CAACvB,IAAa,CAACE,EAAc,UAAY0B,IAAkB,GAAKA,IAAkB,MAClFL,EAAA,OAAO,MAAQnD,EAAqB,IAGjCmD,EAAE,OAAO,KAAA,EAGZM,GAAiBN,GAAmD,CACpEpB,EAAS,KAAKoB,EAAE,GAAG,IACrBrB,EAAc,QAAU,IAE1BhB,GAAaA,EAAUqC,CAAC,CAAA,EAGpBO,GAAeP,GAAmD,CAClEpB,EAAS,KAAKoB,EAAE,GAAG,IACrBrB,EAAc,QAAU,GAC1B,EAGI6B,EAAehD,EAAQnC,GAAiBmC,EAAO,CAAC,CAACjB,EAAMf,CAAQ,EAAI,OAEzE,uBACGiF,GAAa,CAAA,UAAAxD,CAAA,kBACX,MAAI,CAAA,cAAaC,EAAQ,mBAAkBwD,GAAY,MAAO,UAAWtB,GAAmB,IAAK1C,CAC/F,EAAAiE,GAAY5D,EAAOqB,EAAczB,EAAkBQ,CAAQ,EAE5DrB,EAAA,cAAC,MAAI,CAAA,UAAWwD,EAAO,iBAAiB,EAAG,MAAO,CAAE,MAAOkB,EAEzD,EAAA1E,EAAA,cAAC,OAAI,QAASiE,GAAa,IAAK7B,EAAmB,UAAWqB,IAC3D,CAAC/C,GAAaqD,EACf,EAAA/D,EAAA,cAAC,QAAA,CACC,SAAUoE,GACV,UAAWI,GACX,QAASC,GACT,KAAAlE,EACA,KAAAD,EACA,aAAAF,EACA,GAAIkC,EACJ,UAAWoB,GACX,IAAAxD,EACA,kBAAiBD,EAAM,iBAAiB,GAAK,OAC7C,mBAAkBA,EAAM,kBAAkB,GAAK,OAC/C,eAAc,CAAC,CAACiD,EAChB,SAAA7B,EACA,YAAAhB,EACA,SAAAiB,EACA,aAAcC,GAAgB,MAC9B,SAAAI,EAEA,UAAAG,EACC,GAAGG,CAAA,CAAA,EAELvB,GAAaqD,GAChB,EACCtC,CACH,EACCM,GACC/B,EAAA,cAAC8E,GAAA,CACC,cAAA/C,EACA,OAAQS,EAAM,SAAA,EAAW,OACzB,QAAAR,EACA,KAAAnB,EACA,SAAU6D,CAAA,CAAA,EAGblD,CACH,CACF,CAEJ,CAAC,EAEDzB,EAAM,YAAc,QAEpB,MAAAgF,GAAehF"}
1
+ {"version":3,"file":"Input.js","sources":["../src/components/Input/Input.tsx"],"sourcesContent":["import React, { useRef, useState } from 'react';\n\nimport cn from 'classnames';\n\nimport { FormMode, FormVariant, AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX } from '../../constants';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getColor } from '../../theme/currys';\nimport ErrorWrapper from '../ErrorWrapper';\nimport Icon, { IconSize, SvgIcon } from '../Icons';\nimport { renderLabel } from '../Label';\nimport MaxCharacters from '../MaxCharacters/MaxCharacters';\n\nimport styles from './styles.module.scss';\n\nexport interface InputProps\n extends Pick<\n React.InputHTMLAttributes<HTMLInputElement>,\n | 'disabled'\n | 'readOnly'\n | 'autoComplete'\n | 'name'\n | 'placeholder'\n | 'defaultValue'\n | 'required'\n | 'value'\n | 'min'\n | 'max'\n | 'aria-describedby'\n | 'aria-labelledby'\n | 'onBlur'\n | 'onClick'\n | 'onChange'\n | 'onFocus'\n | 'onKeyDown'\n | 'autoFocus'\n > {\n /** The number at which the input field starts when you increment or decrement it */\n baseIncrementValue?: number;\n /** Adds custom classes to the element. */\n className?: string;\n /** HMTL Input type */\n type?: keyof typeof InputTypes;\n /** input id */\n inputId?: string;\n /** Width of input field in characters (approximate) */\n width?: number;\n /** If true, the component will be transparent. */\n transparent?: boolean;\n /** Icon to be displayed next to the input field */\n icon?: SvgIcon;\n /** Places the icon to the right */\n iconRight?: boolean;\n /** Ref that is placed on the inputWrapper */\n inputWrapperRef?: React.RefObject<HTMLDivElement>;\n /** Changes the color profile of the input */\n mode?: keyof typeof FormMode;\n /** Changes the visuals of the input */\n variant?: keyof typeof FormVariant;\n /** Label of the input */\n label?: React.ReactNode;\n /** Activates Error style for the input */\n error?: boolean;\n /** Error text to show above the component */\n errorText?: string;\n /** Sets the data-testid attribute. */\n testId?: string;\n /** Component shown after input */\n afterInputChildren?: React.ReactNode;\n /** Component shown to the right of input */\n rightOfInput?: React.ReactNode;\n /** max character limit in input */\n maxCharacters?: number;\n /** The text is displayed in the end of the text-counter */\n maxText?: string;\n}\n\nexport enum InputTypes {\n text = 'text',\n number = 'number',\n email = 'email',\n password = 'password',\n search = 'search',\n tel = 'tel',\n url = 'url',\n date = 'date',\n time = 'time',\n}\n\nconst getInputMaxWidth = (characters: number, hasIcon: boolean, iconSize: number): string => {\n const paddingWidth = hasIcon ? '1.5rem' : '2rem';\n const iconWidth = hasIcon ? `${iconSize}px` : '0px';\n const borderWidth = '4px';\n\n return `calc(${characters * AVERAGE_CHARACTER_WIDTH_PX}px + ${paddingWidth} + ${iconWidth} + ${borderWidth})`;\n};\n\nconst Input = React.forwardRef((props: InputProps, ref: React.Ref<HTMLInputElement>) => {\n const {\n className,\n defaultValue,\n placeholder,\n type = InputTypes.text,\n name,\n transparent = false,\n icon,\n iconRight,\n inputId,\n inputWrapperRef,\n mode = FormMode.onwhite,\n baseIncrementValue,\n variant,\n label,\n error,\n errorText,\n testId,\n disabled,\n readOnly,\n autoComplete,\n afterInputChildren,\n rightOfInput,\n width,\n required,\n onChange,\n onKeyDown,\n autoFocus,\n maxCharacters,\n maxText,\n ...rest\n } = props;\n const breakpoint = useBreakpoint();\n const inputContainerRef = useRef<HTMLDivElement>(null);\n const inputIdState = useUuid(inputId);\n const [input, setInput] = useState(defaultValue || '');\n const [prevValue, setPrevValue] = useState<string | number | undefined>(undefined);\n const numKeyPressed = useRef<boolean>(false);\n const numRegex = /^[0-9]$/;\n\n const onDark = mode === FormMode.ondark;\n const onBlueberry = mode === FormMode.onblueberry;\n const maxCharactersExceeded = !!maxCharacters && input.toString().length > maxCharacters;\n const onError = mode === FormMode.oninvalid || !!errorText || !!error || maxCharactersExceeded;\n const bigForm = variant === FormVariant.bigform;\n const isTransparent = transparent && mode !== FormMode.ondark && !onError;\n\n const inputWrapperClass = cn(styles['input-wrapper'], className);\n\n const inputContainer = cn(styles['input-container'], {\n [styles['input-container--transparent']]: isTransparent,\n [styles['input-container--on-blueberry']]: onBlueberry,\n [styles['input-container--on-dark']]: onDark,\n [styles['input-container--invalid']]: onError,\n [styles['input-container--bigform']]: bigForm,\n [styles['input-container--disabled']]: disabled,\n [styles['input-container--with-icon']]: icon,\n });\n\n const inputClass = cn(styles['input-container__input'], {\n [styles['input-container__input--bigform']]: bigForm,\n [styles['input-container__input--disabled']]: disabled,\n });\n\n const iconColor = disabled ? getColor('neutral', 500) : getColor('black');\n const iconSize = breakpoint === Breakpoint.xs || !bigForm ? IconSize.XSmall : IconSize.Small;\n\n const renderIcon = (): React.ReactNode => {\n return icon !== undefined ? (\n <Icon className={styles['input-container__input__icon']} color={iconColor} size={iconSize} svgIcon={icon} />\n ) : null;\n };\n\n // eslint-disable-next-line\n const handleClick = (e: React.MouseEvent<any>): void => {\n if (inputContainerRef && inputContainerRef.current && icon) {\n const selectedChild = iconRight ? 0 : 1;\n const input = inputContainerRef.current.children[selectedChild] as HTMLInputElement;\n input.focus();\n\n props.onClick && props.onClick(e);\n }\n };\n\n const handleChange = (e: React.ChangeEvent<HTMLInputElement>): void => {\n const newValue = getIncrementValue(e);\n\n if (onChange) {\n onChange(e);\n }\n\n setInput(newValue);\n setPrevValue(newValue);\n };\n\n // Hvis bruker endrer number value med 1 og det skal startes på en annen verdi enn 0\n const getIncrementValue = (e: React.ChangeEvent<HTMLInputElement>): string => {\n if (typeof baseIncrementValue === 'undefined' || type !== 'number') return e.target.value;\n\n const valueAsNumber = Number(e.target.value);\n\n if (!prevValue && !numKeyPressed.current && (valueAsNumber === 1 || valueAsNumber === -1)) {\n e.target.value = baseIncrementValue + '';\n }\n\n return e.target.value;\n };\n\n const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>): void => {\n if (numRegex.test(e.key)) {\n numKeyPressed.current = true;\n }\n onKeyDown && onKeyDown(e);\n };\n\n const handleKeyUp = (e: React.KeyboardEvent<HTMLInputElement>): void => {\n if (numRegex.test(e.key)) {\n numKeyPressed.current = false;\n }\n };\n\n const maxWidth = width ? getInputMaxWidth(width, !!icon, iconSize) : undefined;\n\n return (\n <ErrorWrapper errorText={errorText}>\n <div data-testid={testId} data-analyticsid={AnalyticsId.Input} className={inputWrapperClass} ref={inputWrapperRef}>\n {renderLabel(label, inputIdState, mode as FormMode, disabled)}\n {/* input-elementet tillater keyboard-interaksjon */}\n <div className={styles['content-wrapper']}>\n {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */}\n <div onClick={handleClick} ref={inputContainerRef} className={inputContainer} style={{ maxWidth }}>\n {!iconRight && renderIcon()}\n <input\n onChange={handleChange}\n onKeyDown={handleKeyDown}\n onKeyUp={handleKeyUp}\n name={name}\n type={type}\n defaultValue={defaultValue}\n id={inputIdState}\n className={inputClass}\n ref={ref}\n aria-labelledby={props['aria-labelledby'] ?? undefined}\n aria-describedby={props['aria-describedby'] ?? undefined}\n aria-invalid={!!onError}\n disabled={disabled}\n placeholder={placeholder}\n readOnly={readOnly}\n autoComplete={autoComplete || 'off'}\n required={required}\n // eslint-disable-next-line jsx-a11y/no-autofocus\n autoFocus={autoFocus}\n {...rest}\n />\n {iconRight && renderIcon()}\n </div>\n <div className={styles['content-wrapper__right-of-input']}>{rightOfInput}</div>\n </div>\n {maxCharacters && (\n <MaxCharacters maxCharacters={maxCharacters} length={input.toString().length} maxText={maxText} mode={mode} maxWidth={maxWidth} />\n )}\n {afterInputChildren}\n </div>\n </ErrorWrapper>\n );\n});\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"names":["InputTypes","getInputMaxWidth","characters","hasIcon","iconSize","paddingWidth","iconWidth","borderWidth","AVERAGE_CHARACTER_WIDTH_PX","Input","React","props","ref","className","defaultValue","placeholder","type","name","transparent","icon","iconRight","inputId","inputWrapperRef","mode","FormMode","baseIncrementValue","variant","label","error","errorText","testId","disabled","readOnly","autoComplete","afterInputChildren","rightOfInput","width","required","onChange","onKeyDown","autoFocus","maxCharacters","maxText","rest","breakpoint","useBreakpoint","inputContainerRef","useRef","inputIdState","useUuid","input","setInput","useState","prevValue","setPrevValue","numKeyPressed","numRegex","onDark","onBlueberry","maxCharactersExceeded","onError","bigForm","FormVariant","isTransparent","inputWrapperClass","cn","styles","inputContainer","inputClass","iconColor","getColor","Breakpoint","IconSize","renderIcon","Icon","handleClick","e","selectedChild","handleChange","newValue","getIncrementValue","valueAsNumber","handleKeyDown","handleKeyUp","maxWidth","ErrorWrapper","AnalyticsId","renderLabel","MaxCharacters","Input$1"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../src/components/Input/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAIhD,OAAO,EAAE,QAAQ,EAAE,WAAW,EAA2C,MAAM,iBAAiB,CAAC;AAKjG,OAAa,EAAY,OAAO,EAAE,MAAM,UAAU,CAAC;AAMnD,MAAM,WAAW,UACf,SAAQ,IAAI,CACV,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EACzC,UAAU,GACV,UAAU,GACV,cAAc,GACd,MAAM,GACN,aAAa,GACb,cAAc,GACd,UAAU,GACV,OAAO,GACP,KAAK,GACL,KAAK,GACL,kBAAkB,GAClB,iBAAiB,GACjB,QAAQ,GACR,SAAS,GACT,UAAU,GACV,SAAS,GACT,WAAW,GACX,WAAW,CACd;IACD,oFAAoF;IACpF,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uBAAuB;IACvB,IAAI,CAAC,EAAE,MAAM,OAAO,UAAU,CAAC;IAC/B,eAAe;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kDAAkD;IAClD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,mDAAmD;IACnD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,mCAAmC;IACnC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,6CAA6C;IAC7C,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAClD,6CAA6C;IAC7C,IAAI,CAAC,EAAE,MAAM,OAAO,QAAQ,CAAC;IAC7B,uCAAuC;IACvC,OAAO,CAAC,EAAE,MAAM,OAAO,WAAW,CAAC;IACnC,yBAAyB;IACzB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,0CAA0C;IAC1C,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,6CAA6C;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,kCAAkC;IAClC,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACrC,4CAA4C;IAC5C,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,oCAAoC;IACpC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,2DAA2D;IAC3D,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,oBAAY,UAAU;IACpB,IAAI,SAAS;IACb,MAAM,WAAW;IACjB,KAAK,UAAU;IACf,QAAQ,aAAa;IACrB,MAAM,WAAW;IACjB,GAAG,QAAQ;IACX,GAAG,QAAQ;IACX,IAAI,SAAS;IACb,IAAI,SAAS;CACd;AAUD,QAAA,MAAM,KAAK,qFA4KT,CAAC;AAIH,eAAe,KAAK,CAAC"}
1
+ {"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../src/components/Input/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAIhD,OAAO,EAAE,QAAQ,EAAE,WAAW,EAA2C,MAAM,iBAAiB,CAAC;AAKjG,OAAa,EAAY,OAAO,EAAE,MAAM,UAAU,CAAC;AAMnD,MAAM,WAAW,UACf,SAAQ,IAAI,CACV,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EACzC,UAAU,GACV,UAAU,GACV,cAAc,GACd,MAAM,GACN,aAAa,GACb,cAAc,GACd,UAAU,GACV,OAAO,GACP,KAAK,GACL,KAAK,GACL,kBAAkB,GAClB,iBAAiB,GACjB,QAAQ,GACR,SAAS,GACT,UAAU,GACV,SAAS,GACT,WAAW,GACX,WAAW,CACd;IACD,oFAAoF;IACpF,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uBAAuB;IACvB,IAAI,CAAC,EAAE,MAAM,OAAO,UAAU,CAAC;IAC/B,eAAe;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kDAAkD;IAClD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,mDAAmD;IACnD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,mCAAmC;IACnC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,6CAA6C;IAC7C,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAClD,6CAA6C;IAC7C,IAAI,CAAC,EAAE,MAAM,OAAO,QAAQ,CAAC;IAC7B,uCAAuC;IACvC,OAAO,CAAC,EAAE,MAAM,OAAO,WAAW,CAAC;IACnC,yBAAyB;IACzB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,0CAA0C;IAC1C,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,6CAA6C;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,kCAAkC;IAClC,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACrC,4CAA4C;IAC5C,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,oCAAoC;IACpC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,2DAA2D;IAC3D,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,oBAAY,UAAU;IACpB,IAAI,SAAS;IACb,MAAM,WAAW;IACjB,KAAK,UAAU;IACf,QAAQ,aAAa;IACrB,MAAM,WAAW;IACjB,GAAG,QAAQ;IACX,GAAG,QAAQ;IACX,IAAI,SAAS;IACb,IAAI,SAAS;CACd;AAUD,QAAA,MAAM,KAAK,qFAsKT,CAAC;AAIH,eAAe,KAAK,CAAC"}
@@ -23,6 +23,11 @@
23
23
  display: flex;
24
24
  position: relative;
25
25
  width: 100%;
26
+
27
+ &__right-of-input {
28
+ display: flex;
29
+ position: relative;
30
+ }
26
31
  }
27
32
 
28
33
  .input-container {
@@ -1,5 +1,6 @@
1
1
  export type Styles = {
2
2
  'content-wrapper': string;
3
+ 'content-wrapper__right-of-input': string;
3
4
  'input-container': string;
4
5
  'input-container__input': string;
5
6
  'input-container__input__icon': string;
package/package.json CHANGED
@@ -7,7 +7,7 @@
7
7
  "url": "https://github.com/helsenorge/designsystem"
8
8
  },
9
9
  "homepage": "https://helsenorge.design",
10
- "version": "5.1.2",
10
+ "version": "5.1.4",
11
11
  "author": "Helsenorge",
12
12
  "license": "MIT",
13
13
  "dependencies": {