@foxford/ui 2.56.0 → 2.56.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.
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
'use strict';var React=require('react');var styled=require('styled-components');var index_browser=require('../../external/.pnpm/nanoid@5.0.7/node_modules/nanoid/index.browser.js');var withMergedProps=require('../../hocs/withMergedProps.js');var constants$1=require('./constants.js');var style=require('./style.js');var require$$0=require('react/jsx-runtime');var Input_Phone=require('../Input.Phone/Input.Phone.js');var constants=require('../FormInputLabel/constants.js');var FormInputLabel=require('../FormInputLabel/FormInputLabel.js');var FormInput=require('../FormInput/FormInput.js');var IconButton=require('../IconButton/IconButton.js');const Input=Object.assign(withMergedProps.withMergedProps(React.forwardRef(((e,r)=>{const
|
|
1
|
+
'use strict';var React=require('react');var styled=require('styled-components');var index_browser=require('../../external/.pnpm/nanoid@5.0.7/node_modules/nanoid/index.browser.js');var withMergedProps=require('../../hocs/withMergedProps.js');var constants$1=require('./constants.js');var style=require('./style.js');var require$$0=require('react/jsx-runtime');var Input_Phone=require('../Input.Phone/Input.Phone.js');var constants=require('../FormInputLabel/constants.js');var FormInputLabel=require('../FormInputLabel/FormInputLabel.js');var FormInput=require('../FormInput/FormInput.js');var IconButton=require('../IconButton/IconButton.js');const Input=Object.assign(withMergedProps.withMergedProps(React.forwardRef(((e,r)=>{const t=styled.useTheme();const{size:o="m",rounded:n=!0,primary:a=!0,color:i="mineShaft",placeholderColor:s="silver",width:l=t.defaultInputControlsWidth,type:c="text",labelPosition:u="dynamic",iconProps:m={},controls:d={},addonButtonProps:g={},preset:p,className:b,style:f,sizeXXS:h,sizeXS:S,sizeS:X,sizeM:v,sizeL:L,sizeXL:C,sizeUnits:y,sizes:I,margin:R,marginXXS:B,marginXS:w,marginS:k,marginM:T,marginL:z,marginXL:M,marginTop:x,marginTopXXS:P,marginTopXS:$,marginTopS:F,marginTopM:q,marginTopL:j,marginTopXL:D,marginRight:E,marginRightXXS:O,marginRightXS:N,marginRightS:_,marginRightM:A,marginRightL:H,marginRightXL:Z,marginBottom:U,marginBottomXXS:V,marginBottomXS:W,marginBottomS:G,marginBottomM:J,marginBottomL:K,marginBottomXL:Q,marginLeft:Y,marginLeftXXS:ee,marginLeftXS:re,marginLeftS:te,marginLeftM:oe,marginLeftL:ne,marginLeftXL:ae,palette:ie,widthXXS:se,widthXS:le,widthS:ce,widthM:ue,widthL:me,widthXL:de,error:ge,success:pe,label:be,icon:fe,text:he,secondary:Se,contrast:Xe,onColored:ve,fluid:Le,disabled:Ce,inline:ye,inputRef:Ie,...Re}=e;const Be={size:o,sizeXXS:h,sizeXS:S,sizeS:X,sizeM:v,sizeL:L,sizeXL:C};const{icon:we,buttonProps:ke={}}=d.additional??{};const[Te,ze=(ke.onClick?void 0:we)]=Array.isArray(fe)?fe:[fe];const Me=g.icon??we;const xe=Boolean(Re.mask&&Re.alwaysShowMask);const Pe={color:ie.controlsColor,colorHover:ie.controlsColorHover,colorActive:ie.controlsColorActive,colorDisabled:ie.controlsColorDisabled,backgroundColor:ie.controlsBackgroundColor,backgroundColorHover:ie.controlsBackgroundColorHover,backgroundColorActive:ie.controlsBackgroundColorActive,backgroundColorDisabled:ie.controlsBackgroundColorDisabled};const $e=React.useRef(null);React.useImperativeHandle(r,(()=>$e.current),[]);const Fe=React.useRef(null);const qe=React.useRef(null);const je=React.useRef(null);const De=React.useMemo((()=>index_browser.nanoid()),[]);const[Ee,Oe]=React.useState((()=>{if(xe)return!0;const e=Re.value??Re.defaultValue;return typeof e=='string'&&e.length>0||typeof e=='number'}));const[Ne,_e]=React.useState((()=>{if(c!=='number'||Re.min===void 0)return!1;const{value:e=1/0,defaultValue:r=1/0}=Re;const t=typeof e=='number'?e:parseFloat(e);const o=typeof r=='number'?r:parseFloat(r);const n=typeof Re.min=='number'?Re.min:parseFloat(Re.min);return Math.min(t,o)<=n}));const[Ae,He]=React.useState((()=>{if(c!=='number'||Re.max===void 0)return!1;const{value:e=-1/0,defaultValue:r=-1/0}=Re;const t=typeof e=='number'?e:parseFloat(e);const o=typeof r=='number'?r:parseFloat(r);const n=typeof Re.max=='number'?Re.max:parseFloat(Re.max);return Math.max(t,o)>=n}));return React.useLayoutEffect((()=>{xe?Oe(!0):Re.value!==void 0&&Re.value!==null&&$e.current&&$e.current!==document.activeElement&&Oe(typeof Re.value=='string'&&Re.value.length>0||typeof Re.value=='number')}),[xe,Re.value]),p!=='brand'?require$$0.jsx(style.Root,{...Re,inputRef:Ie??(e=>{$e.current=e}),className:b,style:f,size:typeof o=='number'?o:void 0,rounded:n,color:i,placeholderColor:s,width:l,widthXXS:se,widthXS:le,widthS:ce,widthM:ue,widthL:me,widthXL:de,error:ge,type:c,fluid:Le,disabled:Ce}):require$$0.jsx(FormInputLabel.FormInputLabel,{...Be,className:b,style:f,sizeUnits:y,sizes:I,margin:R,marginXXS:B,marginXS:w,marginS:k,marginM:T,marginL:z,marginXL:M,marginTop:x,marginTopXXS:P,marginTopXS:$,marginTopS:F,marginTopM:q,marginTopL:j,marginTopXL:D,marginRight:E,marginRightXXS:O,marginRightXS:N,marginRightS:_,marginRightM:A,marginRightL:H,marginRightXL:Z,marginBottom:U,marginBottomXXS:V,marginBottomXS:W,marginBottomS:G,marginBottomM:J,marginBottomL:K,marginBottomXL:Q,marginLeft:Y,marginLeftXXS:ee,marginLeftXS:re,marginLeftS:te,marginLeftM:oe,marginLeftL:ne,marginLeftXL:ae,error:ge,success:pe,label:be,labelId:De,labelPosition:u,icon:[Te,ze],text:he,primary:a,secondary:Se,contrast:Xe,onColored:ve,disabled:Ce,inline:ye,active:Ee,palette:{color:Ce?ie.colorDisabled:ie.color,backgroundColor:Ce?ie.backgroundColorDisabled:ie.backgroundColor,backgroundColorHover:Ce?ie.backgroundColorDisabled:ie.backgroundColorHover,borderColor:Ce?ie.borderColorDisabled:ie.borderColor},iconProps:{color:Ce?'content-disabled':'content-onmain-tertiary',sizes:constants$1.SIZES_ICON,...Be,...m},onClick:()=>{$e.current&&$e.current.focus()},onFocus:e=>{e.target!==e.currentTarget&&Oe(!0)},onPointerDown:e=>{e.target!==$e.current&&e.target instanceof Node&&!Fe.current?.contains(e.target)&&!qe.current?.contains(e.target)&&!je.current?.contains(e.target)&&e.preventDefault()},onBlur:e=>{xe||!$e.current||e.currentTarget.contains(e.relatedTarget)||Oe(Boolean($e.current.value))},input:require$$0.jsx(FormInput.FormInput,{...Re,"aria-labelledby":be?De:void 0,ref:$e,type:c,disabled:Ce,palette:{color:ie.inputColor,placeholderColor:ie.inputPlaceholderColor,colorDisabled:ie.inputColorDisabled,placeholderColorDisabled:ie.inputPlaceholderColorDisabled},onChange:e=>{if(Re.onChange&&Re.onChange(e),c==='number'){const r=parseFloat(e.currentTarget.value);const t=r<=parseFloat(e.currentTarget.min);const o=r>=parseFloat(e.currentTarget.max);_e(t),He(o),(t||o)&&e.currentTarget.focus()}}}),addon:(g.onClick||ke.onClick)&&Me?require$$0.jsx(IconButton.IconButton,{ref:Fe,sizes:constants$1.SIZES_CONTROL,palette:Pe,...Be,...ke,...g,icon:Me,disabled:Ce||g.disabled||ke.disabled,marginLeft:12,onClick:e=>{e.stopPropagation(),Re.readOnly||(g.onClick&&g.onClick(e),ke.onClick&&ke.onClick(e))}}):void 0,controls:c==='number'?require$$0.jsxs(require$$0.Fragment,{children:[require$$0.jsx(IconButton.IconButton,{...Be,ref:qe,icon:"minus",sizes:constants$1.SIZES_CONTROL,palette:Pe,disabled:Ce||Ne,marginLeft:12,onClick:e=>{if(e.stopPropagation(),!Re.readOnly)try{if($e.current){Oe(!0);const e=$e.current.value;if($e.current.stepDown(),e!==$e.current.value){const e=new Event('input',{bubbles:!0});$e.current.dispatchEvent(e)}}}catch(e){console.error(e)}}}),require$$0.jsx(style.IconButtonSeparated,{...Be,ref:je,icon:"plus",sizes:constants$1.SIZES_CONTROL,palette:Pe,disabled:Ce||Ae,onClick:e=>{if(e.stopPropagation(),!Re.readOnly)try{if($e.current){Oe(!0);const e=$e.current.value;if($e.current.stepUp(),e!==$e.current.value){const e=new Event('input',{bubbles:!0});$e.current.dispatchEvent(e)}}}catch(e){console.error(e)}}})]}):void 0})})),{sizes:constants.SIZES,displayName:"Input"}),{Phone:Input_Phone.InputPhone});exports.COMPONENT_NAME="Input",exports.Input=Input;
|
|
2
2
|
//# sourceMappingURL=Input.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.js","sources":["../../../../src/components/Input/Input.tsx"],"sourcesContent":["import { forwardRef, useState, useImperativeHandle, useRef, useLayoutEffect, useMemo } from 'react'\nimport { useTheme } from 'styled-components'\nimport { nanoid } from 'nanoid'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport { FormInputLabel, SIZES } from 'components/FormInputLabel'\nimport { FormInput } from 'components/FormInput'\nimport { InputPhone } from 'components/Input.Phone'\nimport { IconButton } from 'components/IconButton'\nimport { SIZES_ICON, SIZES_CONTROL } from './constants'\nimport * as Styled from './style'\nimport type { InputProps } from './types'\n\nconst COMPONENT_NAME = 'Input'\n\n/**\n *\n * Компонент поддерживает все атрибуты \\<input\\> элемента и пропсы \"react-input-mask\" [v2.0.4](https://www.npmjs.com/package/react-input-mask/v/2.0.4?activeTab=readme).\n *\n * Поддерживаются пропсы определения размеров и внешних отступов в зависимости от ширины вьюпорта.\n *\n * Можно передать \"ref\", который будет ассоциирован с \\<input\\>.\n *\n * Полный интерфейс можно посмотреть [тут](https://github.com/foxford/ui/blob/master/src/components/Input/types.ts).\n */\nconst Input: React.ForwardRefExoticComponent<InputProps> & { Phone: typeof InputPhone } = Object.assign(\n withMergedProps<InputProps, HTMLInputElement>(\n forwardRef((props, forwardedRef) => {\n const theme = useTheme()\n\n const {\n size = 'm',\n rounded = true,\n primary = true,\n color = 'mineShaft',\n placeholderColor = 'silver',\n width = theme.defaultInputControlsWidth,\n type = 'text',\n labelPosition = 'dynamic',\n iconProps = {},\n controls = {},\n addonButtonProps = {},\n preset,\n className,\n style,\n sizeXXS,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n sizeUnits,\n sizes,\n margin,\n marginXXS,\n marginXS,\n marginS,\n marginM,\n marginL,\n marginXL,\n marginTop,\n marginTopXXS,\n marginTopXS,\n marginTopS,\n marginTopM,\n marginTopL,\n marginTopXL,\n marginRight,\n marginRightXXS,\n marginRightXS,\n marginRightS,\n marginRightM,\n marginRightL,\n marginRightXL,\n marginBottom,\n marginBottomXXS,\n marginBottomXS,\n marginBottomS,\n marginBottomM,\n marginBottomL,\n marginBottomXL,\n marginLeft,\n marginLeftXXS,\n marginLeftXS,\n marginLeftS,\n marginLeftM,\n marginLeftL,\n marginLeftXL,\n palette,\n widthXXS,\n widthXS,\n widthS,\n widthM,\n widthL,\n widthXL,\n error,\n success,\n label,\n icon,\n text,\n secondary,\n contrast,\n onColored,\n fluid,\n disabled,\n inline,\n inputRef,\n ...inputProps\n } = props\n\n const sizeProps = {\n size,\n sizeXXS,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n }\n\n const { icon: additionalControlIcon, buttonProps: additionalControlButtonProps = {} } = controls.additional ?? {}\n\n const [iconBefore, iconAfter = !additionalControlButtonProps.onClick ? additionalControlIcon : undefined] =\n Array.isArray(icon) ? icon : [icon]\n\n const inputAlwaysActive = Boolean(inputProps.mask && inputProps.alwaysShowMask)\n\n const controlPalette = {\n color: palette.controlsColor,\n colorHover: palette.controlsColorHover,\n colorActive: palette.controlsColorActive,\n colorDisabled: palette.controlsColorDisabled,\n backgroundColor: palette.controlsBackgroundColor,\n backgroundColorHover: palette.controlsBackgroundColorHover,\n backgroundColorActive: palette.controlsBackgroundColorActive,\n backgroundColorDisabled: palette.controlsBackgroundColorDisabled,\n }\n\n const ref = useRef<HTMLInputElement | null>(null)\n useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(forwardedRef, () => ref.current, [])\n\n const addonRef = useRef<HTMLButtonElement | null>(null)\n const minusRef = useRef<HTMLButtonElement | null>(null)\n const plusRef = useRef<HTMLButtonElement | null>(null)\n\n const inputLabelId = useMemo(() => nanoid(), [])\n\n const [inputActive, setInputActive] = useState(() => {\n if (inputAlwaysActive) return true\n\n const initValue = inputProps.value ?? inputProps.defaultValue\n\n return (typeof initValue === 'string' && initValue.length > 0) || typeof initValue === 'number'\n })\n\n const [minusDisabled, setMinusDisabled] = useState(() => {\n if (type !== 'number' || inputProps.min === undefined) return false\n\n const { value = Infinity, defaultValue = Infinity } = inputProps\n\n const initValue = typeof value === 'number' ? value : parseFloat(value)\n const initDefaultValue = typeof defaultValue === 'number' ? defaultValue : parseFloat(defaultValue)\n const minValue = typeof inputProps.min === 'number' ? inputProps.min : parseFloat(inputProps.min)\n\n return Math.min(initValue, initDefaultValue) <= minValue\n })\n\n const [plusDisabled, setPlusDisabled] = useState(() => {\n if (type !== 'number' || inputProps.max === undefined) return false\n\n const { value = -Infinity, defaultValue = -Infinity } = inputProps\n\n const initValue = typeof value === 'number' ? value : parseFloat(value)\n const initDefaultValue = typeof defaultValue === 'number' ? defaultValue : parseFloat(defaultValue)\n const maxValue = typeof inputProps.max === 'number' ? inputProps.max : parseFloat(inputProps.max)\n\n return Math.max(initValue, initDefaultValue) >= maxValue\n })\n\n useLayoutEffect(() => {\n if (inputAlwaysActive) {\n setInputActive(true)\n } else if (\n inputProps.value !== undefined &&\n inputProps.value !== null &&\n ref.current &&\n ref.current !== document.activeElement\n ) {\n setInputActive(\n (typeof inputProps.value === 'string' && inputProps.value.length > 0) ||\n typeof inputProps.value === 'number'\n )\n }\n }, [inputAlwaysActive, inputProps.value])\n\n if (preset !== 'brand') {\n return (\n <Styled.Root\n {...inputProps}\n inputRef={\n inputRef ??\n ((input) => {\n ref.current = input\n })\n }\n className={className}\n style={style}\n size={typeof size === 'number' ? size : undefined}\n rounded={rounded}\n color={color}\n placeholderColor={placeholderColor}\n width={width}\n widthXXS={widthXXS}\n widthXS={widthXS}\n widthS={widthS}\n widthM={widthM}\n widthL={widthL}\n widthXL={widthXL}\n error={error}\n type={type}\n fluid={fluid}\n disabled={disabled}\n />\n )\n }\n\n return (\n <FormInputLabel\n {...sizeProps}\n className={className}\n style={style}\n sizeUnits={sizeUnits}\n sizes={sizes}\n margin={margin}\n marginXXS={marginXXS}\n marginXS={marginXS}\n marginS={marginS}\n marginM={marginM}\n marginL={marginL}\n marginXL={marginXL}\n marginTop={marginTop}\n marginTopXXS={marginTopXXS}\n marginTopXS={marginTopXS}\n marginTopS={marginTopS}\n marginTopM={marginTopM}\n marginTopL={marginTopL}\n marginTopXL={marginTopXL}\n marginRight={marginRight}\n marginRightXXS={marginRightXXS}\n marginRightXS={marginRightXS}\n marginRightS={marginRightS}\n marginRightM={marginRightM}\n marginRightL={marginRightL}\n marginRightXL={marginRightXL}\n marginBottom={marginBottom}\n marginBottomXXS={marginBottomXXS}\n marginBottomXS={marginBottomXS}\n marginBottomS={marginBottomS}\n marginBottomM={marginBottomM}\n marginBottomL={marginBottomL}\n marginBottomXL={marginBottomXL}\n marginLeft={marginLeft}\n marginLeftXXS={marginLeftXXS}\n marginLeftXS={marginLeftXS}\n marginLeftS={marginLeftS}\n marginLeftM={marginLeftM}\n marginLeftL={marginLeftL}\n marginLeftXL={marginLeftXL}\n error={error}\n success={success}\n label={label}\n labelId={inputLabelId}\n labelPosition={labelPosition}\n icon={[iconBefore, iconAfter]}\n text={text}\n primary={primary}\n secondary={secondary}\n contrast={contrast}\n onColored={onColored}\n disabled={disabled}\n inline={inline}\n active={inputActive}\n palette={{\n color: disabled ? palette.colorDisabled : palette.color,\n backgroundColor: disabled ? palette.backgroundColorDisabled : palette.backgroundColor,\n backgroundColorHover: disabled ? palette.backgroundColorDisabled : palette.backgroundColorHover,\n borderColor: disabled ? palette.borderColorDisabled : palette.borderColor,\n }}\n iconProps={{\n color: disabled ? 'content-disabled' : 'content-onmain-tertiary',\n sizes: SIZES_ICON,\n ...sizeProps,\n ...iconProps,\n }}\n onClick={() => {\n if (ref.current) {\n ref.current.focus()\n }\n }}\n onFocus={(evt) => {\n if (evt.target !== evt.currentTarget) {\n setInputActive(true)\n }\n }}\n onPointerDown={(evt) => {\n if (\n evt.target === ref.current ||\n !(evt.target instanceof Node) ||\n addonRef.current?.contains(evt.target) ||\n minusRef.current?.contains(evt.target) ||\n plusRef.current?.contains(evt.target)\n ) {\n return\n }\n evt.preventDefault()\n }}\n onBlur={(evt) => {\n if (!inputAlwaysActive && ref.current && !evt.currentTarget.contains(evt.relatedTarget)) {\n setInputActive(Boolean(ref.current.value))\n }\n }}\n input={\n <FormInput\n {...inputProps}\n aria-labelledby={label ? inputLabelId : undefined}\n ref={ref}\n type={type}\n disabled={disabled}\n palette={{\n color: palette.inputColor,\n placeholderColor: palette.inputPlaceholderColor,\n colorDisabled: palette.inputColorDisabled,\n placeholderColorDisabled: palette.inputPlaceholderColorDisabled,\n }}\n onChange={(evt) => {\n if (inputProps.onChange) {\n inputProps.onChange(evt)\n }\n\n if (type === 'number') {\n const currentValue = parseFloat(evt.currentTarget.value)\n\n const minValueReached = currentValue <= parseFloat(evt.currentTarget.min)\n const maxValueReached = currentValue >= parseFloat(evt.currentTarget.max)\n\n setMinusDisabled(minValueReached)\n setPlusDisabled(maxValueReached)\n\n if (minValueReached || maxValueReached) {\n evt.currentTarget.focus()\n }\n }\n }}\n />\n }\n addon={\n addonButtonProps.onClick || additionalControlButtonProps.onClick ? (\n <IconButton\n ref={addonRef}\n sizes={SIZES_CONTROL}\n palette={controlPalette}\n {...sizeProps}\n {...additionalControlButtonProps}\n {...addonButtonProps}\n icon={addonButtonProps.icon || additionalControlIcon || 'unknown'}\n disabled={disabled || addonButtonProps.disabled || additionalControlButtonProps.disabled}\n marginLeft={12}\n onClick={(evt) => {\n evt.stopPropagation()\n if (inputProps.readOnly) return\n\n if (addonButtonProps.onClick) addonButtonProps.onClick(evt)\n if (additionalControlButtonProps.onClick) additionalControlButtonProps.onClick(evt)\n }}\n />\n ) : undefined\n }\n controls={\n type === 'number' ? (\n <>\n <IconButton\n {...sizeProps}\n ref={minusRef}\n icon='minus'\n sizes={SIZES_CONTROL}\n palette={controlPalette}\n disabled={disabled || minusDisabled}\n marginLeft={12}\n onClick={(evt) => {\n evt.stopPropagation()\n if (inputProps.readOnly) return\n\n try {\n if (ref.current) {\n setInputActive(true)\n\n const prev = ref.current.value\n ref.current.stepDown()\n\n const decremented = ref.current.value\n if (prev !== decremented) {\n const event = new Event('input', { bubbles: true })\n ref.current.dispatchEvent(event)\n }\n }\n } catch (err) {\n // eslint-disable-next-line no-console\n console.error(err)\n }\n }}\n />\n <Styled.IconButtonSeparated\n {...sizeProps}\n ref={plusRef}\n icon='plus'\n sizes={SIZES_CONTROL}\n palette={controlPalette}\n disabled={disabled || plusDisabled}\n onClick={(evt) => {\n evt.stopPropagation()\n if (inputProps.readOnly) return\n\n try {\n if (ref.current) {\n setInputActive(true)\n\n const prev = ref.current.value\n ref.current.stepUp()\n\n const incremented = ref.current.value\n if (prev !== incremented) {\n const event = new Event('input', { bubbles: true })\n ref.current.dispatchEvent(event)\n }\n }\n } catch (err) {\n // eslint-disable-next-line no-console\n console.error(err)\n }\n }}\n />\n </>\n ) : undefined\n }\n />\n )\n }),\n {\n sizes: SIZES,\n displayName: COMPONENT_NAME,\n }\n ),\n {\n Phone: InputPhone,\n }\n)\n\nexport { Input, COMPONENT_NAME }\n"],"names":["Input","Object","assign","withMergedProps","forwardRef","props","forwardedRef","theme","useTheme","size","rounded","primary","color","placeholderColor","width","defaultInputControlsWidth","type","labelPosition","iconProps","controls","addonButtonProps","preset","className","style","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","sizeUnits","sizes","margin","marginXXS","marginXS","marginS","marginM","marginL","marginXL","marginTop","marginTopXXS","marginTopXS","marginTopS","marginTopM","marginTopL","marginTopXL","marginRight","marginRightXXS","marginRightXS","marginRightS","marginRightM","marginRightL","marginRightXL","marginBottom","marginBottomXXS","marginBottomXS","marginBottomS","marginBottomM","marginBottomL","marginBottomXL","marginLeft","marginLeftXXS","marginLeftXS","marginLeftS","marginLeftM","marginLeftL","marginLeftXL","palette","widthXXS","widthXS","widthS","widthM","widthL","widthXL","error","success","label","icon","text","secondary","contrast","onColored","fluid","disabled","inline","inputRef","inputProps","sizeProps","additionalControlIcon","buttonProps","additionalControlButtonProps","additional","iconBefore","iconAfter","onClick","undefined","Array","isArray","inputAlwaysActive","Boolean","mask","alwaysShowMask","controlPalette","controlsColor","colorHover","controlsColorHover","colorActive","controlsColorActive","colorDisabled","controlsColorDisabled","backgroundColor","controlsBackgroundColor","backgroundColorHover","controlsBackgroundColorHover","backgroundColorActive","controlsBackgroundColorActive","backgroundColorDisabled","controlsBackgroundColorDisabled","ref","useRef","useImperativeHandle","current","addonRef","minusRef","plusRef","inputLabelId","useMemo","nanoid","inputActive","setInputActive","useState","initValue","value","defaultValue","length","minusDisabled","setMinusDisabled","min","Infinity","parseFloat","initDefaultValue","minValue","Math","plusDisabled","setPlusDisabled","max","maxValue","useLayoutEffect","document","activeElement","_jsx","Styled","input","FormInputLabel","labelId","active","borderColor","borderColorDisabled","SIZES_ICON","focus","onFocus","evt","target","currentTarget","onPointerDown","Node","contains","preventDefault","onBlur","relatedTarget","jsx","FormInput","inputColor","inputPlaceholderColor","inputColorDisabled","placeholderColorDisabled","inputPlaceholderColorDisabled","onChange","currentValue","minValueReached","maxValueReached","addon","IconButton","SIZES_CONTROL","stopPropagation","readOnly","_jsxs","_Fragment","children","prev","stepDown","event","Event","bubbles","dispatchEvent","err","console","stepUp","SIZES","displayName","Phone","InputPhone"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Input.js","sources":["../../../../src/components/Input/Input.tsx"],"sourcesContent":["import { forwardRef, useState, useImperativeHandle, useRef, useLayoutEffect, useMemo } from 'react'\nimport { useTheme } from 'styled-components'\nimport { nanoid } from 'nanoid'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport { FormInputLabel, SIZES } from 'components/FormInputLabel'\nimport { FormInput } from 'components/FormInput'\nimport { InputPhone } from 'components/Input.Phone'\nimport { IconButton } from 'components/IconButton'\nimport { SIZES_ICON, SIZES_CONTROL } from './constants'\nimport * as Styled from './style'\nimport type { InputProps } from './types'\n\nconst COMPONENT_NAME = 'Input'\n\n/**\n *\n * Компонент поддерживает все атрибуты \\<input\\> элемента и пропсы \"react-input-mask\" [v2.0.4](https://www.npmjs.com/package/react-input-mask/v/2.0.4?activeTab=readme).\n *\n * Поддерживаются пропсы определения размеров и внешних отступов в зависимости от ширины вьюпорта.\n *\n * Можно передать \"ref\", который будет ассоциирован с \\<input\\>.\n *\n * Полный интерфейс можно посмотреть [тут](https://github.com/foxford/ui/blob/master/src/components/Input/types.ts).\n */\nconst Input: React.ForwardRefExoticComponent<InputProps> & { Phone: typeof InputPhone } = Object.assign(\n withMergedProps<InputProps, HTMLInputElement>(\n forwardRef((props, forwardedRef) => {\n const theme = useTheme()\n\n const {\n size = 'm',\n rounded = true,\n primary = true,\n color = 'mineShaft',\n placeholderColor = 'silver',\n width = theme.defaultInputControlsWidth,\n type = 'text',\n labelPosition = 'dynamic',\n iconProps = {},\n controls = {},\n addonButtonProps = {},\n preset,\n className,\n style,\n sizeXXS,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n sizeUnits,\n sizes,\n margin,\n marginXXS,\n marginXS,\n marginS,\n marginM,\n marginL,\n marginXL,\n marginTop,\n marginTopXXS,\n marginTopXS,\n marginTopS,\n marginTopM,\n marginTopL,\n marginTopXL,\n marginRight,\n marginRightXXS,\n marginRightXS,\n marginRightS,\n marginRightM,\n marginRightL,\n marginRightXL,\n marginBottom,\n marginBottomXXS,\n marginBottomXS,\n marginBottomS,\n marginBottomM,\n marginBottomL,\n marginBottomXL,\n marginLeft,\n marginLeftXXS,\n marginLeftXS,\n marginLeftS,\n marginLeftM,\n marginLeftL,\n marginLeftXL,\n palette,\n widthXXS,\n widthXS,\n widthS,\n widthM,\n widthL,\n widthXL,\n error,\n success,\n label,\n icon,\n text,\n secondary,\n contrast,\n onColored,\n fluid,\n disabled,\n inline,\n inputRef,\n ...inputProps\n } = props\n\n const sizeProps = {\n size,\n sizeXXS,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n }\n\n const { icon: additionalControlIcon, buttonProps: additionalControlButtonProps = {} } = controls.additional ?? {}\n\n const [iconBefore, iconAfter = !additionalControlButtonProps.onClick ? additionalControlIcon : undefined] =\n Array.isArray(icon) ? icon : [icon]\n\n const addonControlIcon = addonButtonProps.icon ?? additionalControlIcon\n\n const inputAlwaysActive = Boolean(inputProps.mask && inputProps.alwaysShowMask)\n\n const controlPalette = {\n color: palette.controlsColor,\n colorHover: palette.controlsColorHover,\n colorActive: palette.controlsColorActive,\n colorDisabled: palette.controlsColorDisabled,\n backgroundColor: palette.controlsBackgroundColor,\n backgroundColorHover: palette.controlsBackgroundColorHover,\n backgroundColorActive: palette.controlsBackgroundColorActive,\n backgroundColorDisabled: palette.controlsBackgroundColorDisabled,\n }\n\n const ref = useRef<HTMLInputElement | null>(null)\n useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(forwardedRef, () => ref.current, [])\n\n const addonRef = useRef<HTMLButtonElement | null>(null)\n const minusRef = useRef<HTMLButtonElement | null>(null)\n const plusRef = useRef<HTMLButtonElement | null>(null)\n\n const inputLabelId = useMemo(() => nanoid(), [])\n\n const [inputActive, setInputActive] = useState(() => {\n if (inputAlwaysActive) return true\n\n const initValue = inputProps.value ?? inputProps.defaultValue\n\n return (typeof initValue === 'string' && initValue.length > 0) || typeof initValue === 'number'\n })\n\n const [minusDisabled, setMinusDisabled] = useState(() => {\n if (type !== 'number' || inputProps.min === undefined) return false\n\n const { value = Infinity, defaultValue = Infinity } = inputProps\n\n const initValue = typeof value === 'number' ? value : parseFloat(value)\n const initDefaultValue = typeof defaultValue === 'number' ? defaultValue : parseFloat(defaultValue)\n const minValue = typeof inputProps.min === 'number' ? inputProps.min : parseFloat(inputProps.min)\n\n return Math.min(initValue, initDefaultValue) <= minValue\n })\n\n const [plusDisabled, setPlusDisabled] = useState(() => {\n if (type !== 'number' || inputProps.max === undefined) return false\n\n const { value = -Infinity, defaultValue = -Infinity } = inputProps\n\n const initValue = typeof value === 'number' ? value : parseFloat(value)\n const initDefaultValue = typeof defaultValue === 'number' ? defaultValue : parseFloat(defaultValue)\n const maxValue = typeof inputProps.max === 'number' ? inputProps.max : parseFloat(inputProps.max)\n\n return Math.max(initValue, initDefaultValue) >= maxValue\n })\n\n useLayoutEffect(() => {\n if (inputAlwaysActive) {\n setInputActive(true)\n } else if (\n inputProps.value !== undefined &&\n inputProps.value !== null &&\n ref.current &&\n ref.current !== document.activeElement\n ) {\n setInputActive(\n (typeof inputProps.value === 'string' && inputProps.value.length > 0) ||\n typeof inputProps.value === 'number'\n )\n }\n }, [inputAlwaysActive, inputProps.value])\n\n if (preset !== 'brand') {\n return (\n <Styled.Root\n {...inputProps}\n inputRef={\n inputRef ??\n ((input) => {\n ref.current = input\n })\n }\n className={className}\n style={style}\n size={typeof size === 'number' ? size : undefined}\n rounded={rounded}\n color={color}\n placeholderColor={placeholderColor}\n width={width}\n widthXXS={widthXXS}\n widthXS={widthXS}\n widthS={widthS}\n widthM={widthM}\n widthL={widthL}\n widthXL={widthXL}\n error={error}\n type={type}\n fluid={fluid}\n disabled={disabled}\n />\n )\n }\n\n return (\n <FormInputLabel\n {...sizeProps}\n className={className}\n style={style}\n sizeUnits={sizeUnits}\n sizes={sizes}\n margin={margin}\n marginXXS={marginXXS}\n marginXS={marginXS}\n marginS={marginS}\n marginM={marginM}\n marginL={marginL}\n marginXL={marginXL}\n marginTop={marginTop}\n marginTopXXS={marginTopXXS}\n marginTopXS={marginTopXS}\n marginTopS={marginTopS}\n marginTopM={marginTopM}\n marginTopL={marginTopL}\n marginTopXL={marginTopXL}\n marginRight={marginRight}\n marginRightXXS={marginRightXXS}\n marginRightXS={marginRightXS}\n marginRightS={marginRightS}\n marginRightM={marginRightM}\n marginRightL={marginRightL}\n marginRightXL={marginRightXL}\n marginBottom={marginBottom}\n marginBottomXXS={marginBottomXXS}\n marginBottomXS={marginBottomXS}\n marginBottomS={marginBottomS}\n marginBottomM={marginBottomM}\n marginBottomL={marginBottomL}\n marginBottomXL={marginBottomXL}\n marginLeft={marginLeft}\n marginLeftXXS={marginLeftXXS}\n marginLeftXS={marginLeftXS}\n marginLeftS={marginLeftS}\n marginLeftM={marginLeftM}\n marginLeftL={marginLeftL}\n marginLeftXL={marginLeftXL}\n error={error}\n success={success}\n label={label}\n labelId={inputLabelId}\n labelPosition={labelPosition}\n icon={[iconBefore, iconAfter]}\n text={text}\n primary={primary}\n secondary={secondary}\n contrast={contrast}\n onColored={onColored}\n disabled={disabled}\n inline={inline}\n active={inputActive}\n palette={{\n color: disabled ? palette.colorDisabled : palette.color,\n backgroundColor: disabled ? palette.backgroundColorDisabled : palette.backgroundColor,\n backgroundColorHover: disabled ? palette.backgroundColorDisabled : palette.backgroundColorHover,\n borderColor: disabled ? palette.borderColorDisabled : palette.borderColor,\n }}\n iconProps={{\n color: disabled ? 'content-disabled' : 'content-onmain-tertiary',\n sizes: SIZES_ICON,\n ...sizeProps,\n ...iconProps,\n }}\n onClick={() => {\n if (ref.current) {\n ref.current.focus()\n }\n }}\n onFocus={(evt) => {\n if (evt.target !== evt.currentTarget) {\n setInputActive(true)\n }\n }}\n onPointerDown={(evt) => {\n if (\n evt.target === ref.current ||\n !(evt.target instanceof Node) ||\n addonRef.current?.contains(evt.target) ||\n minusRef.current?.contains(evt.target) ||\n plusRef.current?.contains(evt.target)\n ) {\n return\n }\n evt.preventDefault()\n }}\n onBlur={(evt) => {\n if (!inputAlwaysActive && ref.current && !evt.currentTarget.contains(evt.relatedTarget)) {\n setInputActive(Boolean(ref.current.value))\n }\n }}\n input={\n <FormInput\n {...inputProps}\n aria-labelledby={label ? inputLabelId : undefined}\n ref={ref}\n type={type}\n disabled={disabled}\n palette={{\n color: palette.inputColor,\n placeholderColor: palette.inputPlaceholderColor,\n colorDisabled: palette.inputColorDisabled,\n placeholderColorDisabled: palette.inputPlaceholderColorDisabled,\n }}\n onChange={(evt) => {\n if (inputProps.onChange) {\n inputProps.onChange(evt)\n }\n\n if (type === 'number') {\n const currentValue = parseFloat(evt.currentTarget.value)\n\n const minValueReached = currentValue <= parseFloat(evt.currentTarget.min)\n const maxValueReached = currentValue >= parseFloat(evt.currentTarget.max)\n\n setMinusDisabled(minValueReached)\n setPlusDisabled(maxValueReached)\n\n if (minValueReached || maxValueReached) {\n evt.currentTarget.focus()\n }\n }\n }}\n />\n }\n addon={\n (addonButtonProps.onClick || additionalControlButtonProps.onClick) && addonControlIcon ? (\n <IconButton\n ref={addonRef}\n sizes={SIZES_CONTROL}\n palette={controlPalette}\n {...sizeProps}\n {...additionalControlButtonProps}\n {...addonButtonProps}\n icon={addonControlIcon}\n disabled={disabled || addonButtonProps.disabled || additionalControlButtonProps.disabled}\n marginLeft={12}\n onClick={(evt) => {\n evt.stopPropagation()\n if (inputProps.readOnly) return\n\n if (addonButtonProps.onClick) addonButtonProps.onClick(evt)\n if (additionalControlButtonProps.onClick) additionalControlButtonProps.onClick(evt)\n }}\n />\n ) : undefined\n }\n controls={\n type === 'number' ? (\n <>\n <IconButton\n {...sizeProps}\n ref={minusRef}\n icon='minus'\n sizes={SIZES_CONTROL}\n palette={controlPalette}\n disabled={disabled || minusDisabled}\n marginLeft={12}\n onClick={(evt) => {\n evt.stopPropagation()\n if (inputProps.readOnly) return\n\n try {\n if (ref.current) {\n setInputActive(true)\n\n const prev = ref.current.value\n ref.current.stepDown()\n\n const decremented = ref.current.value\n if (prev !== decremented) {\n const event = new Event('input', { bubbles: true })\n ref.current.dispatchEvent(event)\n }\n }\n } catch (err) {\n // eslint-disable-next-line no-console\n console.error(err)\n }\n }}\n />\n <Styled.IconButtonSeparated\n {...sizeProps}\n ref={plusRef}\n icon='plus'\n sizes={SIZES_CONTROL}\n palette={controlPalette}\n disabled={disabled || plusDisabled}\n onClick={(evt) => {\n evt.stopPropagation()\n if (inputProps.readOnly) return\n\n try {\n if (ref.current) {\n setInputActive(true)\n\n const prev = ref.current.value\n ref.current.stepUp()\n\n const incremented = ref.current.value\n if (prev !== incremented) {\n const event = new Event('input', { bubbles: true })\n ref.current.dispatchEvent(event)\n }\n }\n } catch (err) {\n // eslint-disable-next-line no-console\n console.error(err)\n }\n }}\n />\n </>\n ) : undefined\n }\n />\n )\n }),\n {\n sizes: SIZES,\n displayName: COMPONENT_NAME,\n }\n ),\n {\n Phone: InputPhone,\n }\n)\n\nexport { Input, COMPONENT_NAME }\n"],"names":["Input","Object","assign","withMergedProps","forwardRef","props","forwardedRef","theme","useTheme","size","rounded","primary","color","placeholderColor","width","defaultInputControlsWidth","type","labelPosition","iconProps","controls","addonButtonProps","preset","className","style","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","sizeUnits","sizes","margin","marginXXS","marginXS","marginS","marginM","marginL","marginXL","marginTop","marginTopXXS","marginTopXS","marginTopS","marginTopM","marginTopL","marginTopXL","marginRight","marginRightXXS","marginRightXS","marginRightS","marginRightM","marginRightL","marginRightXL","marginBottom","marginBottomXXS","marginBottomXS","marginBottomS","marginBottomM","marginBottomL","marginBottomXL","marginLeft","marginLeftXXS","marginLeftXS","marginLeftS","marginLeftM","marginLeftL","marginLeftXL","palette","widthXXS","widthXS","widthS","widthM","widthL","widthXL","error","success","label","icon","text","secondary","contrast","onColored","fluid","disabled","inline","inputRef","inputProps","sizeProps","additionalControlIcon","buttonProps","additionalControlButtonProps","additional","iconBefore","iconAfter","onClick","undefined","Array","isArray","addonControlIcon","inputAlwaysActive","Boolean","mask","alwaysShowMask","controlPalette","controlsColor","colorHover","controlsColorHover","colorActive","controlsColorActive","colorDisabled","controlsColorDisabled","backgroundColor","controlsBackgroundColor","backgroundColorHover","controlsBackgroundColorHover","backgroundColorActive","controlsBackgroundColorActive","backgroundColorDisabled","controlsBackgroundColorDisabled","ref","useRef","useImperativeHandle","current","addonRef","minusRef","plusRef","inputLabelId","useMemo","nanoid","inputActive","setInputActive","useState","initValue","value","defaultValue","length","minusDisabled","setMinusDisabled","min","Infinity","parseFloat","initDefaultValue","minValue","Math","plusDisabled","setPlusDisabled","max","maxValue","useLayoutEffect","document","activeElement","_jsx","Styled","input","FormInputLabel","labelId","active","borderColor","borderColorDisabled","SIZES_ICON","focus","onFocus","evt","target","currentTarget","onPointerDown","Node","contains","preventDefault","onBlur","relatedTarget","jsx","FormInput","inputColor","inputPlaceholderColor","inputColorDisabled","placeholderColorDisabled","inputPlaceholderColorDisabled","onChange","currentValue","minValueReached","maxValueReached","addon","IconButton","SIZES_CONTROL","stopPropagation","readOnly","_jsxs","_Fragment","children","prev","stepDown","event","Event","bubbles","dispatchEvent","err","console","stepUp","SIZES","displayName","Phone","InputPhone"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{forwardRef,useRef,useImperativeHandle,useMemo,useState,useLayoutEffect}from'react';import{useTheme}from'styled-components';import{nanoid}from'../../external/.pnpm/nanoid@5.0.7/node_modules/nanoid/index.browser.mjs';import{withMergedProps}from'../../hocs/withMergedProps.mjs';import{SIZES_ICON,SIZES_CONTROL}from'./constants.mjs';import{Root,IconButtonSeparated}from'./style.mjs';import{jsx,jsxs,Fragment}from'react/jsx-runtime';import{InputPhone}from'../Input.Phone/Input.Phone.mjs';import{SIZES}from'../FormInputLabel/constants.mjs';import{FormInputLabel}from'../FormInputLabel/FormInputLabel.mjs';import{FormInput}from'../FormInput/FormInput.mjs';import{IconButton}from'../IconButton/IconButton.mjs';const COMPONENT_NAME='Input';const Input=Object.assign(withMergedProps(forwardRef(((o,r)=>{const t=useTheme();const{size:e="m",rounded:n=!0,primary:a=!0,color:i="mineShaft",placeholderColor:s="silver",width:l=t.defaultInputControlsWidth,type:m="text",labelPosition:c="dynamic",iconProps:u={},controls:d={},addonButtonProps:g={},preset:p,className:f,style:b,sizeXXS:S,sizeXS:h,sizeS:X,sizeM:L,sizeL:C,sizeXL:v,sizeUnits:I,sizes:y,margin:B,marginXXS:R,marginXS:T,marginS:k,marginM:w,marginL:M,marginXL:z,marginTop:x,marginTopXXS:P,marginTopXS:F,marginTopS:j,marginTopM:E,marginTopL:O,marginTopXL:N,marginRight:D,marginRightXXS:_,marginRightXS:A,marginRightS:H,marginRightM:Z,marginRightL:U,marginRightXL:V,marginBottom:W,marginBottomXXS:q,marginBottomXS:G,marginBottomS:J,marginBottomM:K,marginBottomL:Q,marginBottomXL:Y,marginLeft:$,marginLeftXXS:oo,marginLeftXS:ro,marginLeftS:to,marginLeftM:eo,marginLeftL:no,marginLeftXL:ao,palette:io,widthXXS:so,widthXS:lo,widthS:mo,widthM:co,widthL:uo,widthXL:go,error:po,success:fo,label:bo,icon:So,text:ho,secondary:Xo,contrast:Lo,onColored:Co,fluid:vo,disabled:Io,inline:yo,inputRef:Bo,...Ro}=o;const To={size:e,sizeXXS:S,sizeXS:h,sizeS:X,sizeM:L,sizeL:C,sizeXL:v};const{icon:ko,buttonProps:wo={}}=d.additional??{};const[Mo,zo=(wo.onClick?void 0:ko)]=Array.isArray(So)?So:[So];const xo=Boolean(Ro.mask&&Ro.alwaysShowMask);const
|
|
1
|
+
import{forwardRef,useRef,useImperativeHandle,useMemo,useState,useLayoutEffect}from'react';import{useTheme}from'styled-components';import{nanoid}from'../../external/.pnpm/nanoid@5.0.7/node_modules/nanoid/index.browser.mjs';import{withMergedProps}from'../../hocs/withMergedProps.mjs';import{SIZES_ICON,SIZES_CONTROL}from'./constants.mjs';import{Root,IconButtonSeparated}from'./style.mjs';import{jsx,jsxs,Fragment}from'react/jsx-runtime';import{InputPhone}from'../Input.Phone/Input.Phone.mjs';import{SIZES}from'../FormInputLabel/constants.mjs';import{FormInputLabel}from'../FormInputLabel/FormInputLabel.mjs';import{FormInput}from'../FormInput/FormInput.mjs';import{IconButton}from'../IconButton/IconButton.mjs';const COMPONENT_NAME='Input';const Input=Object.assign(withMergedProps(forwardRef(((o,r)=>{const t=useTheme();const{size:e="m",rounded:n=!0,primary:a=!0,color:i="mineShaft",placeholderColor:s="silver",width:l=t.defaultInputControlsWidth,type:m="text",labelPosition:c="dynamic",iconProps:u={},controls:d={},addonButtonProps:g={},preset:p,className:f,style:b,sizeXXS:S,sizeXS:h,sizeS:X,sizeM:L,sizeL:C,sizeXL:v,sizeUnits:I,sizes:y,margin:B,marginXXS:R,marginXS:T,marginS:k,marginM:w,marginL:M,marginXL:z,marginTop:x,marginTopXXS:P,marginTopXS:F,marginTopS:j,marginTopM:E,marginTopL:O,marginTopXL:N,marginRight:D,marginRightXXS:_,marginRightXS:A,marginRightS:H,marginRightM:Z,marginRightL:U,marginRightXL:V,marginBottom:W,marginBottomXXS:q,marginBottomXS:G,marginBottomS:J,marginBottomM:K,marginBottomL:Q,marginBottomXL:Y,marginLeft:$,marginLeftXXS:oo,marginLeftXS:ro,marginLeftS:to,marginLeftM:eo,marginLeftL:no,marginLeftXL:ao,palette:io,widthXXS:so,widthXS:lo,widthS:mo,widthM:co,widthL:uo,widthXL:go,error:po,success:fo,label:bo,icon:So,text:ho,secondary:Xo,contrast:Lo,onColored:Co,fluid:vo,disabled:Io,inline:yo,inputRef:Bo,...Ro}=o;const To={size:e,sizeXXS:S,sizeXS:h,sizeS:X,sizeM:L,sizeL:C,sizeXL:v};const{icon:ko,buttonProps:wo={}}=d.additional??{};const[Mo,zo=(wo.onClick?void 0:ko)]=Array.isArray(So)?So:[So];const xo=g.icon??ko;const Po=Boolean(Ro.mask&&Ro.alwaysShowMask);const Fo={color:io.controlsColor,colorHover:io.controlsColorHover,colorActive:io.controlsColorActive,colorDisabled:io.controlsColorDisabled,backgroundColor:io.controlsBackgroundColor,backgroundColorHover:io.controlsBackgroundColorHover,backgroundColorActive:io.controlsBackgroundColorActive,backgroundColorDisabled:io.controlsBackgroundColorDisabled};const jo=useRef(null);useImperativeHandle(r,(()=>jo.current),[]);const Eo=useRef(null);const Oo=useRef(null);const No=useRef(null);const Do=useMemo((()=>nanoid()),[]);const[_o,Ao]=useState((()=>{if(Po)return!0;const o=Ro.value??Ro.defaultValue;return typeof o=='string'&&o.length>0||typeof o=='number'}));const[Ho,Zo]=useState((()=>{if(m!=='number'||Ro.min===void 0)return!1;const{value:o=1/0,defaultValue:r=1/0}=Ro;const t=typeof o=='number'?o:parseFloat(o);const e=typeof r=='number'?r:parseFloat(r);const n=typeof Ro.min=='number'?Ro.min:parseFloat(Ro.min);return Math.min(t,e)<=n}));const[Uo,Vo]=useState((()=>{if(m!=='number'||Ro.max===void 0)return!1;const{value:o=-1/0,defaultValue:r=-1/0}=Ro;const t=typeof o=='number'?o:parseFloat(o);const e=typeof r=='number'?r:parseFloat(r);const n=typeof Ro.max=='number'?Ro.max:parseFloat(Ro.max);return Math.max(t,e)>=n}));return useLayoutEffect((()=>{Po?Ao(!0):Ro.value!==void 0&&Ro.value!==null&&jo.current&&jo.current!==document.activeElement&&Ao(typeof Ro.value=='string'&&Ro.value.length>0||typeof Ro.value=='number')}),[Po,Ro.value]),p!=='brand'?jsx(Root,{...Ro,inputRef:Bo??(o=>{jo.current=o}),className:f,style:b,size:typeof e=='number'?e:void 0,rounded:n,color:i,placeholderColor:s,width:l,widthXXS:so,widthXS:lo,widthS:mo,widthM:co,widthL:uo,widthXL:go,error:po,type:m,fluid:vo,disabled:Io}):jsx(FormInputLabel,{...To,className:f,style:b,sizeUnits:I,sizes:y,margin:B,marginXXS:R,marginXS:T,marginS:k,marginM:w,marginL:M,marginXL:z,marginTop:x,marginTopXXS:P,marginTopXS:F,marginTopS:j,marginTopM:E,marginTopL:O,marginTopXL:N,marginRight:D,marginRightXXS:_,marginRightXS:A,marginRightS:H,marginRightM:Z,marginRightL:U,marginRightXL:V,marginBottom:W,marginBottomXXS:q,marginBottomXS:G,marginBottomS:J,marginBottomM:K,marginBottomL:Q,marginBottomXL:Y,marginLeft:$,marginLeftXXS:oo,marginLeftXS:ro,marginLeftS:to,marginLeftM:eo,marginLeftL:no,marginLeftXL:ao,error:po,success:fo,label:bo,labelId:Do,labelPosition:c,icon:[Mo,zo],text:ho,primary:a,secondary:Xo,contrast:Lo,onColored:Co,disabled:Io,inline:yo,active:_o,palette:{color:Io?io.colorDisabled:io.color,backgroundColor:Io?io.backgroundColorDisabled:io.backgroundColor,backgroundColorHover:Io?io.backgroundColorDisabled:io.backgroundColorHover,borderColor:Io?io.borderColorDisabled:io.borderColor},iconProps:{color:Io?'content-disabled':'content-onmain-tertiary',sizes:SIZES_ICON,...To,...u},onClick:()=>{jo.current&&jo.current.focus()},onFocus:o=>{o.target!==o.currentTarget&&Ao(!0)},onPointerDown:o=>{o.target!==jo.current&&o.target instanceof Node&&!Eo.current?.contains(o.target)&&!Oo.current?.contains(o.target)&&!No.current?.contains(o.target)&&o.preventDefault()},onBlur:o=>{Po||!jo.current||o.currentTarget.contains(o.relatedTarget)||Ao(Boolean(jo.current.value))},input:jsx(FormInput,{...Ro,"aria-labelledby":bo?Do:void 0,ref:jo,type:m,disabled:Io,palette:{color:io.inputColor,placeholderColor:io.inputPlaceholderColor,colorDisabled:io.inputColorDisabled,placeholderColorDisabled:io.inputPlaceholderColorDisabled},onChange:o=>{if(Ro.onChange&&Ro.onChange(o),m==='number'){const r=parseFloat(o.currentTarget.value);const t=r<=parseFloat(o.currentTarget.min);const e=r>=parseFloat(o.currentTarget.max);Zo(t),Vo(e),(t||e)&&o.currentTarget.focus()}}}),addon:(g.onClick||wo.onClick)&&xo?jsx(IconButton,{ref:Eo,sizes:SIZES_CONTROL,palette:Fo,...To,...wo,...g,icon:xo,disabled:Io||g.disabled||wo.disabled,marginLeft:12,onClick:o=>{o.stopPropagation(),Ro.readOnly||(g.onClick&&g.onClick(o),wo.onClick&&wo.onClick(o))}}):void 0,controls:m==='number'?jsxs(Fragment,{children:[jsx(IconButton,{...To,ref:Oo,icon:"minus",sizes:SIZES_CONTROL,palette:Fo,disabled:Io||Ho,marginLeft:12,onClick:o=>{if(o.stopPropagation(),!Ro.readOnly)try{if(jo.current){Ao(!0);const o=jo.current.value;if(jo.current.stepDown(),o!==jo.current.value){const o=new Event('input',{bubbles:!0});jo.current.dispatchEvent(o)}}}catch(o){console.error(o)}}}),jsx(IconButtonSeparated,{...To,ref:No,icon:"plus",sizes:SIZES_CONTROL,palette:Fo,disabled:Io||Uo,onClick:o=>{if(o.stopPropagation(),!Ro.readOnly)try{if(jo.current){Ao(!0);const o=jo.current.value;if(jo.current.stepUp(),o!==jo.current.value){const o=new Event('input',{bubbles:!0});jo.current.dispatchEvent(o)}}}catch(o){console.error(o)}}})]}):void 0})})),{sizes:SIZES,displayName:"Input"}),{Phone:InputPhone});export{COMPONENT_NAME,Input};
|
|
2
2
|
//# sourceMappingURL=Input.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.mjs","sources":["../../../../src/components/Input/Input.tsx"],"sourcesContent":["import { forwardRef, useState, useImperativeHandle, useRef, useLayoutEffect, useMemo } from 'react'\nimport { useTheme } from 'styled-components'\nimport { nanoid } from 'nanoid'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport { FormInputLabel, SIZES } from 'components/FormInputLabel'\nimport { FormInput } from 'components/FormInput'\nimport { InputPhone } from 'components/Input.Phone'\nimport { IconButton } from 'components/IconButton'\nimport { SIZES_ICON, SIZES_CONTROL } from './constants'\nimport * as Styled from './style'\nimport type { InputProps } from './types'\n\nconst COMPONENT_NAME = 'Input'\n\n/**\n *\n * Компонент поддерживает все атрибуты \\<input\\> элемента и пропсы \"react-input-mask\" [v2.0.4](https://www.npmjs.com/package/react-input-mask/v/2.0.4?activeTab=readme).\n *\n * Поддерживаются пропсы определения размеров и внешних отступов в зависимости от ширины вьюпорта.\n *\n * Можно передать \"ref\", который будет ассоциирован с \\<input\\>.\n *\n * Полный интерфейс можно посмотреть [тут](https://github.com/foxford/ui/blob/master/src/components/Input/types.ts).\n */\nconst Input: React.ForwardRefExoticComponent<InputProps> & { Phone: typeof InputPhone } = Object.assign(\n withMergedProps<InputProps, HTMLInputElement>(\n forwardRef((props, forwardedRef) => {\n const theme = useTheme()\n\n const {\n size = 'm',\n rounded = true,\n primary = true,\n color = 'mineShaft',\n placeholderColor = 'silver',\n width = theme.defaultInputControlsWidth,\n type = 'text',\n labelPosition = 'dynamic',\n iconProps = {},\n controls = {},\n addonButtonProps = {},\n preset,\n className,\n style,\n sizeXXS,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n sizeUnits,\n sizes,\n margin,\n marginXXS,\n marginXS,\n marginS,\n marginM,\n marginL,\n marginXL,\n marginTop,\n marginTopXXS,\n marginTopXS,\n marginTopS,\n marginTopM,\n marginTopL,\n marginTopXL,\n marginRight,\n marginRightXXS,\n marginRightXS,\n marginRightS,\n marginRightM,\n marginRightL,\n marginRightXL,\n marginBottom,\n marginBottomXXS,\n marginBottomXS,\n marginBottomS,\n marginBottomM,\n marginBottomL,\n marginBottomXL,\n marginLeft,\n marginLeftXXS,\n marginLeftXS,\n marginLeftS,\n marginLeftM,\n marginLeftL,\n marginLeftXL,\n palette,\n widthXXS,\n widthXS,\n widthS,\n widthM,\n widthL,\n widthXL,\n error,\n success,\n label,\n icon,\n text,\n secondary,\n contrast,\n onColored,\n fluid,\n disabled,\n inline,\n inputRef,\n ...inputProps\n } = props\n\n const sizeProps = {\n size,\n sizeXXS,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n }\n\n const { icon: additionalControlIcon, buttonProps: additionalControlButtonProps = {} } = controls.additional ?? {}\n\n const [iconBefore, iconAfter = !additionalControlButtonProps.onClick ? additionalControlIcon : undefined] =\n Array.isArray(icon) ? icon : [icon]\n\n const inputAlwaysActive = Boolean(inputProps.mask && inputProps.alwaysShowMask)\n\n const controlPalette = {\n color: palette.controlsColor,\n colorHover: palette.controlsColorHover,\n colorActive: palette.controlsColorActive,\n colorDisabled: palette.controlsColorDisabled,\n backgroundColor: palette.controlsBackgroundColor,\n backgroundColorHover: palette.controlsBackgroundColorHover,\n backgroundColorActive: palette.controlsBackgroundColorActive,\n backgroundColorDisabled: palette.controlsBackgroundColorDisabled,\n }\n\n const ref = useRef<HTMLInputElement | null>(null)\n useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(forwardedRef, () => ref.current, [])\n\n const addonRef = useRef<HTMLButtonElement | null>(null)\n const minusRef = useRef<HTMLButtonElement | null>(null)\n const plusRef = useRef<HTMLButtonElement | null>(null)\n\n const inputLabelId = useMemo(() => nanoid(), [])\n\n const [inputActive, setInputActive] = useState(() => {\n if (inputAlwaysActive) return true\n\n const initValue = inputProps.value ?? inputProps.defaultValue\n\n return (typeof initValue === 'string' && initValue.length > 0) || typeof initValue === 'number'\n })\n\n const [minusDisabled, setMinusDisabled] = useState(() => {\n if (type !== 'number' || inputProps.min === undefined) return false\n\n const { value = Infinity, defaultValue = Infinity } = inputProps\n\n const initValue = typeof value === 'number' ? value : parseFloat(value)\n const initDefaultValue = typeof defaultValue === 'number' ? defaultValue : parseFloat(defaultValue)\n const minValue = typeof inputProps.min === 'number' ? inputProps.min : parseFloat(inputProps.min)\n\n return Math.min(initValue, initDefaultValue) <= minValue\n })\n\n const [plusDisabled, setPlusDisabled] = useState(() => {\n if (type !== 'number' || inputProps.max === undefined) return false\n\n const { value = -Infinity, defaultValue = -Infinity } = inputProps\n\n const initValue = typeof value === 'number' ? value : parseFloat(value)\n const initDefaultValue = typeof defaultValue === 'number' ? defaultValue : parseFloat(defaultValue)\n const maxValue = typeof inputProps.max === 'number' ? inputProps.max : parseFloat(inputProps.max)\n\n return Math.max(initValue, initDefaultValue) >= maxValue\n })\n\n useLayoutEffect(() => {\n if (inputAlwaysActive) {\n setInputActive(true)\n } else if (\n inputProps.value !== undefined &&\n inputProps.value !== null &&\n ref.current &&\n ref.current !== document.activeElement\n ) {\n setInputActive(\n (typeof inputProps.value === 'string' && inputProps.value.length > 0) ||\n typeof inputProps.value === 'number'\n )\n }\n }, [inputAlwaysActive, inputProps.value])\n\n if (preset !== 'brand') {\n return (\n <Styled.Root\n {...inputProps}\n inputRef={\n inputRef ??\n ((input) => {\n ref.current = input\n })\n }\n className={className}\n style={style}\n size={typeof size === 'number' ? size : undefined}\n rounded={rounded}\n color={color}\n placeholderColor={placeholderColor}\n width={width}\n widthXXS={widthXXS}\n widthXS={widthXS}\n widthS={widthS}\n widthM={widthM}\n widthL={widthL}\n widthXL={widthXL}\n error={error}\n type={type}\n fluid={fluid}\n disabled={disabled}\n />\n )\n }\n\n return (\n <FormInputLabel\n {...sizeProps}\n className={className}\n style={style}\n sizeUnits={sizeUnits}\n sizes={sizes}\n margin={margin}\n marginXXS={marginXXS}\n marginXS={marginXS}\n marginS={marginS}\n marginM={marginM}\n marginL={marginL}\n marginXL={marginXL}\n marginTop={marginTop}\n marginTopXXS={marginTopXXS}\n marginTopXS={marginTopXS}\n marginTopS={marginTopS}\n marginTopM={marginTopM}\n marginTopL={marginTopL}\n marginTopXL={marginTopXL}\n marginRight={marginRight}\n marginRightXXS={marginRightXXS}\n marginRightXS={marginRightXS}\n marginRightS={marginRightS}\n marginRightM={marginRightM}\n marginRightL={marginRightL}\n marginRightXL={marginRightXL}\n marginBottom={marginBottom}\n marginBottomXXS={marginBottomXXS}\n marginBottomXS={marginBottomXS}\n marginBottomS={marginBottomS}\n marginBottomM={marginBottomM}\n marginBottomL={marginBottomL}\n marginBottomXL={marginBottomXL}\n marginLeft={marginLeft}\n marginLeftXXS={marginLeftXXS}\n marginLeftXS={marginLeftXS}\n marginLeftS={marginLeftS}\n marginLeftM={marginLeftM}\n marginLeftL={marginLeftL}\n marginLeftXL={marginLeftXL}\n error={error}\n success={success}\n label={label}\n labelId={inputLabelId}\n labelPosition={labelPosition}\n icon={[iconBefore, iconAfter]}\n text={text}\n primary={primary}\n secondary={secondary}\n contrast={contrast}\n onColored={onColored}\n disabled={disabled}\n inline={inline}\n active={inputActive}\n palette={{\n color: disabled ? palette.colorDisabled : palette.color,\n backgroundColor: disabled ? palette.backgroundColorDisabled : palette.backgroundColor,\n backgroundColorHover: disabled ? palette.backgroundColorDisabled : palette.backgroundColorHover,\n borderColor: disabled ? palette.borderColorDisabled : palette.borderColor,\n }}\n iconProps={{\n color: disabled ? 'content-disabled' : 'content-onmain-tertiary',\n sizes: SIZES_ICON,\n ...sizeProps,\n ...iconProps,\n }}\n onClick={() => {\n if (ref.current) {\n ref.current.focus()\n }\n }}\n onFocus={(evt) => {\n if (evt.target !== evt.currentTarget) {\n setInputActive(true)\n }\n }}\n onPointerDown={(evt) => {\n if (\n evt.target === ref.current ||\n !(evt.target instanceof Node) ||\n addonRef.current?.contains(evt.target) ||\n minusRef.current?.contains(evt.target) ||\n plusRef.current?.contains(evt.target)\n ) {\n return\n }\n evt.preventDefault()\n }}\n onBlur={(evt) => {\n if (!inputAlwaysActive && ref.current && !evt.currentTarget.contains(evt.relatedTarget)) {\n setInputActive(Boolean(ref.current.value))\n }\n }}\n input={\n <FormInput\n {...inputProps}\n aria-labelledby={label ? inputLabelId : undefined}\n ref={ref}\n type={type}\n disabled={disabled}\n palette={{\n color: palette.inputColor,\n placeholderColor: palette.inputPlaceholderColor,\n colorDisabled: palette.inputColorDisabled,\n placeholderColorDisabled: palette.inputPlaceholderColorDisabled,\n }}\n onChange={(evt) => {\n if (inputProps.onChange) {\n inputProps.onChange(evt)\n }\n\n if (type === 'number') {\n const currentValue = parseFloat(evt.currentTarget.value)\n\n const minValueReached = currentValue <= parseFloat(evt.currentTarget.min)\n const maxValueReached = currentValue >= parseFloat(evt.currentTarget.max)\n\n setMinusDisabled(minValueReached)\n setPlusDisabled(maxValueReached)\n\n if (minValueReached || maxValueReached) {\n evt.currentTarget.focus()\n }\n }\n }}\n />\n }\n addon={\n addonButtonProps.onClick || additionalControlButtonProps.onClick ? (\n <IconButton\n ref={addonRef}\n sizes={SIZES_CONTROL}\n palette={controlPalette}\n {...sizeProps}\n {...additionalControlButtonProps}\n {...addonButtonProps}\n icon={addonButtonProps.icon || additionalControlIcon || 'unknown'}\n disabled={disabled || addonButtonProps.disabled || additionalControlButtonProps.disabled}\n marginLeft={12}\n onClick={(evt) => {\n evt.stopPropagation()\n if (inputProps.readOnly) return\n\n if (addonButtonProps.onClick) addonButtonProps.onClick(evt)\n if (additionalControlButtonProps.onClick) additionalControlButtonProps.onClick(evt)\n }}\n />\n ) : undefined\n }\n controls={\n type === 'number' ? (\n <>\n <IconButton\n {...sizeProps}\n ref={minusRef}\n icon='minus'\n sizes={SIZES_CONTROL}\n palette={controlPalette}\n disabled={disabled || minusDisabled}\n marginLeft={12}\n onClick={(evt) => {\n evt.stopPropagation()\n if (inputProps.readOnly) return\n\n try {\n if (ref.current) {\n setInputActive(true)\n\n const prev = ref.current.value\n ref.current.stepDown()\n\n const decremented = ref.current.value\n if (prev !== decremented) {\n const event = new Event('input', { bubbles: true })\n ref.current.dispatchEvent(event)\n }\n }\n } catch (err) {\n // eslint-disable-next-line no-console\n console.error(err)\n }\n }}\n />\n <Styled.IconButtonSeparated\n {...sizeProps}\n ref={plusRef}\n icon='plus'\n sizes={SIZES_CONTROL}\n palette={controlPalette}\n disabled={disabled || plusDisabled}\n onClick={(evt) => {\n evt.stopPropagation()\n if (inputProps.readOnly) return\n\n try {\n if (ref.current) {\n setInputActive(true)\n\n const prev = ref.current.value\n ref.current.stepUp()\n\n const incremented = ref.current.value\n if (prev !== incremented) {\n const event = new Event('input', { bubbles: true })\n ref.current.dispatchEvent(event)\n }\n }\n } catch (err) {\n // eslint-disable-next-line no-console\n console.error(err)\n }\n }}\n />\n </>\n ) : undefined\n }\n />\n )\n }),\n {\n sizes: SIZES,\n displayName: COMPONENT_NAME,\n }\n ),\n {\n Phone: InputPhone,\n }\n)\n\nexport { Input, COMPONENT_NAME }\n"],"names":["COMPONENT_NAME","Input","Object","assign","withMergedProps","forwardRef","props","forwardedRef","theme","useTheme","size","rounded","primary","color","placeholderColor","width","defaultInputControlsWidth","type","labelPosition","iconProps","controls","addonButtonProps","preset","className","style","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","sizeUnits","sizes","margin","marginXXS","marginXS","marginS","marginM","marginL","marginXL","marginTop","marginTopXXS","marginTopXS","marginTopS","marginTopM","marginTopL","marginTopXL","marginRight","marginRightXXS","marginRightXS","marginRightS","marginRightM","marginRightL","marginRightXL","marginBottom","marginBottomXXS","marginBottomXS","marginBottomS","marginBottomM","marginBottomL","marginBottomXL","marginLeft","marginLeftXXS","marginLeftXS","marginLeftS","marginLeftM","marginLeftL","marginLeftXL","palette","widthXXS","widthXS","widthS","widthM","widthL","widthXL","error","success","label","icon","text","secondary","contrast","onColored","fluid","disabled","inline","inputRef","inputProps","sizeProps","additionalControlIcon","buttonProps","additionalControlButtonProps","additional","iconBefore","iconAfter","onClick","undefined","Array","isArray","inputAlwaysActive","Boolean","mask","alwaysShowMask","controlPalette","controlsColor","colorHover","controlsColorHover","colorActive","controlsColorActive","colorDisabled","controlsColorDisabled","backgroundColor","controlsBackgroundColor","backgroundColorHover","controlsBackgroundColorHover","backgroundColorActive","controlsBackgroundColorActive","backgroundColorDisabled","controlsBackgroundColorDisabled","ref","useRef","useImperativeHandle","current","addonRef","minusRef","plusRef","inputLabelId","useMemo","nanoid","inputActive","setInputActive","useState","initValue","value","defaultValue","length","minusDisabled","setMinusDisabled","min","Infinity","parseFloat","initDefaultValue","minValue","Math","plusDisabled","setPlusDisabled","max","maxValue","useLayoutEffect","document","activeElement","_jsx","Styled","input","FormInputLabel","labelId","active","borderColor","borderColorDisabled","SIZES_ICON","focus","onFocus","evt","target","currentTarget","onPointerDown","Node","contains","preventDefault","onBlur","relatedTarget","FormInput","inputColor","inputPlaceholderColor","inputColorDisabled","placeholderColorDisabled","inputPlaceholderColorDisabled","onChange","currentValue","minValueReached","maxValueReached","addon","IconButton","SIZES_CONTROL","stopPropagation","readOnly","_jsxs","_Fragment","children","prev","stepDown","event","Event","bubbles","dispatchEvent","err","console","stepUp","SIZES","displayName","Phone","InputPhone"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Input.mjs","sources":["../../../../src/components/Input/Input.tsx"],"sourcesContent":["import { forwardRef, useState, useImperativeHandle, useRef, useLayoutEffect, useMemo } from 'react'\nimport { useTheme } from 'styled-components'\nimport { nanoid } from 'nanoid'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport { FormInputLabel, SIZES } from 'components/FormInputLabel'\nimport { FormInput } from 'components/FormInput'\nimport { InputPhone } from 'components/Input.Phone'\nimport { IconButton } from 'components/IconButton'\nimport { SIZES_ICON, SIZES_CONTROL } from './constants'\nimport * as Styled from './style'\nimport type { InputProps } from './types'\n\nconst COMPONENT_NAME = 'Input'\n\n/**\n *\n * Компонент поддерживает все атрибуты \\<input\\> элемента и пропсы \"react-input-mask\" [v2.0.4](https://www.npmjs.com/package/react-input-mask/v/2.0.4?activeTab=readme).\n *\n * Поддерживаются пропсы определения размеров и внешних отступов в зависимости от ширины вьюпорта.\n *\n * Можно передать \"ref\", который будет ассоциирован с \\<input\\>.\n *\n * Полный интерфейс можно посмотреть [тут](https://github.com/foxford/ui/blob/master/src/components/Input/types.ts).\n */\nconst Input: React.ForwardRefExoticComponent<InputProps> & { Phone: typeof InputPhone } = Object.assign(\n withMergedProps<InputProps, HTMLInputElement>(\n forwardRef((props, forwardedRef) => {\n const theme = useTheme()\n\n const {\n size = 'm',\n rounded = true,\n primary = true,\n color = 'mineShaft',\n placeholderColor = 'silver',\n width = theme.defaultInputControlsWidth,\n type = 'text',\n labelPosition = 'dynamic',\n iconProps = {},\n controls = {},\n addonButtonProps = {},\n preset,\n className,\n style,\n sizeXXS,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n sizeUnits,\n sizes,\n margin,\n marginXXS,\n marginXS,\n marginS,\n marginM,\n marginL,\n marginXL,\n marginTop,\n marginTopXXS,\n marginTopXS,\n marginTopS,\n marginTopM,\n marginTopL,\n marginTopXL,\n marginRight,\n marginRightXXS,\n marginRightXS,\n marginRightS,\n marginRightM,\n marginRightL,\n marginRightXL,\n marginBottom,\n marginBottomXXS,\n marginBottomXS,\n marginBottomS,\n marginBottomM,\n marginBottomL,\n marginBottomXL,\n marginLeft,\n marginLeftXXS,\n marginLeftXS,\n marginLeftS,\n marginLeftM,\n marginLeftL,\n marginLeftXL,\n palette,\n widthXXS,\n widthXS,\n widthS,\n widthM,\n widthL,\n widthXL,\n error,\n success,\n label,\n icon,\n text,\n secondary,\n contrast,\n onColored,\n fluid,\n disabled,\n inline,\n inputRef,\n ...inputProps\n } = props\n\n const sizeProps = {\n size,\n sizeXXS,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n }\n\n const { icon: additionalControlIcon, buttonProps: additionalControlButtonProps = {} } = controls.additional ?? {}\n\n const [iconBefore, iconAfter = !additionalControlButtonProps.onClick ? additionalControlIcon : undefined] =\n Array.isArray(icon) ? icon : [icon]\n\n const addonControlIcon = addonButtonProps.icon ?? additionalControlIcon\n\n const inputAlwaysActive = Boolean(inputProps.mask && inputProps.alwaysShowMask)\n\n const controlPalette = {\n color: palette.controlsColor,\n colorHover: palette.controlsColorHover,\n colorActive: palette.controlsColorActive,\n colorDisabled: palette.controlsColorDisabled,\n backgroundColor: palette.controlsBackgroundColor,\n backgroundColorHover: palette.controlsBackgroundColorHover,\n backgroundColorActive: palette.controlsBackgroundColorActive,\n backgroundColorDisabled: palette.controlsBackgroundColorDisabled,\n }\n\n const ref = useRef<HTMLInputElement | null>(null)\n useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(forwardedRef, () => ref.current, [])\n\n const addonRef = useRef<HTMLButtonElement | null>(null)\n const minusRef = useRef<HTMLButtonElement | null>(null)\n const plusRef = useRef<HTMLButtonElement | null>(null)\n\n const inputLabelId = useMemo(() => nanoid(), [])\n\n const [inputActive, setInputActive] = useState(() => {\n if (inputAlwaysActive) return true\n\n const initValue = inputProps.value ?? inputProps.defaultValue\n\n return (typeof initValue === 'string' && initValue.length > 0) || typeof initValue === 'number'\n })\n\n const [minusDisabled, setMinusDisabled] = useState(() => {\n if (type !== 'number' || inputProps.min === undefined) return false\n\n const { value = Infinity, defaultValue = Infinity } = inputProps\n\n const initValue = typeof value === 'number' ? value : parseFloat(value)\n const initDefaultValue = typeof defaultValue === 'number' ? defaultValue : parseFloat(defaultValue)\n const minValue = typeof inputProps.min === 'number' ? inputProps.min : parseFloat(inputProps.min)\n\n return Math.min(initValue, initDefaultValue) <= minValue\n })\n\n const [plusDisabled, setPlusDisabled] = useState(() => {\n if (type !== 'number' || inputProps.max === undefined) return false\n\n const { value = -Infinity, defaultValue = -Infinity } = inputProps\n\n const initValue = typeof value === 'number' ? value : parseFloat(value)\n const initDefaultValue = typeof defaultValue === 'number' ? defaultValue : parseFloat(defaultValue)\n const maxValue = typeof inputProps.max === 'number' ? inputProps.max : parseFloat(inputProps.max)\n\n return Math.max(initValue, initDefaultValue) >= maxValue\n })\n\n useLayoutEffect(() => {\n if (inputAlwaysActive) {\n setInputActive(true)\n } else if (\n inputProps.value !== undefined &&\n inputProps.value !== null &&\n ref.current &&\n ref.current !== document.activeElement\n ) {\n setInputActive(\n (typeof inputProps.value === 'string' && inputProps.value.length > 0) ||\n typeof inputProps.value === 'number'\n )\n }\n }, [inputAlwaysActive, inputProps.value])\n\n if (preset !== 'brand') {\n return (\n <Styled.Root\n {...inputProps}\n inputRef={\n inputRef ??\n ((input) => {\n ref.current = input\n })\n }\n className={className}\n style={style}\n size={typeof size === 'number' ? size : undefined}\n rounded={rounded}\n color={color}\n placeholderColor={placeholderColor}\n width={width}\n widthXXS={widthXXS}\n widthXS={widthXS}\n widthS={widthS}\n widthM={widthM}\n widthL={widthL}\n widthXL={widthXL}\n error={error}\n type={type}\n fluid={fluid}\n disabled={disabled}\n />\n )\n }\n\n return (\n <FormInputLabel\n {...sizeProps}\n className={className}\n style={style}\n sizeUnits={sizeUnits}\n sizes={sizes}\n margin={margin}\n marginXXS={marginXXS}\n marginXS={marginXS}\n marginS={marginS}\n marginM={marginM}\n marginL={marginL}\n marginXL={marginXL}\n marginTop={marginTop}\n marginTopXXS={marginTopXXS}\n marginTopXS={marginTopXS}\n marginTopS={marginTopS}\n marginTopM={marginTopM}\n marginTopL={marginTopL}\n marginTopXL={marginTopXL}\n marginRight={marginRight}\n marginRightXXS={marginRightXXS}\n marginRightXS={marginRightXS}\n marginRightS={marginRightS}\n marginRightM={marginRightM}\n marginRightL={marginRightL}\n marginRightXL={marginRightXL}\n marginBottom={marginBottom}\n marginBottomXXS={marginBottomXXS}\n marginBottomXS={marginBottomXS}\n marginBottomS={marginBottomS}\n marginBottomM={marginBottomM}\n marginBottomL={marginBottomL}\n marginBottomXL={marginBottomXL}\n marginLeft={marginLeft}\n marginLeftXXS={marginLeftXXS}\n marginLeftXS={marginLeftXS}\n marginLeftS={marginLeftS}\n marginLeftM={marginLeftM}\n marginLeftL={marginLeftL}\n marginLeftXL={marginLeftXL}\n error={error}\n success={success}\n label={label}\n labelId={inputLabelId}\n labelPosition={labelPosition}\n icon={[iconBefore, iconAfter]}\n text={text}\n primary={primary}\n secondary={secondary}\n contrast={contrast}\n onColored={onColored}\n disabled={disabled}\n inline={inline}\n active={inputActive}\n palette={{\n color: disabled ? palette.colorDisabled : palette.color,\n backgroundColor: disabled ? palette.backgroundColorDisabled : palette.backgroundColor,\n backgroundColorHover: disabled ? palette.backgroundColorDisabled : palette.backgroundColorHover,\n borderColor: disabled ? palette.borderColorDisabled : palette.borderColor,\n }}\n iconProps={{\n color: disabled ? 'content-disabled' : 'content-onmain-tertiary',\n sizes: SIZES_ICON,\n ...sizeProps,\n ...iconProps,\n }}\n onClick={() => {\n if (ref.current) {\n ref.current.focus()\n }\n }}\n onFocus={(evt) => {\n if (evt.target !== evt.currentTarget) {\n setInputActive(true)\n }\n }}\n onPointerDown={(evt) => {\n if (\n evt.target === ref.current ||\n !(evt.target instanceof Node) ||\n addonRef.current?.contains(evt.target) ||\n minusRef.current?.contains(evt.target) ||\n plusRef.current?.contains(evt.target)\n ) {\n return\n }\n evt.preventDefault()\n }}\n onBlur={(evt) => {\n if (!inputAlwaysActive && ref.current && !evt.currentTarget.contains(evt.relatedTarget)) {\n setInputActive(Boolean(ref.current.value))\n }\n }}\n input={\n <FormInput\n {...inputProps}\n aria-labelledby={label ? inputLabelId : undefined}\n ref={ref}\n type={type}\n disabled={disabled}\n palette={{\n color: palette.inputColor,\n placeholderColor: palette.inputPlaceholderColor,\n colorDisabled: palette.inputColorDisabled,\n placeholderColorDisabled: palette.inputPlaceholderColorDisabled,\n }}\n onChange={(evt) => {\n if (inputProps.onChange) {\n inputProps.onChange(evt)\n }\n\n if (type === 'number') {\n const currentValue = parseFloat(evt.currentTarget.value)\n\n const minValueReached = currentValue <= parseFloat(evt.currentTarget.min)\n const maxValueReached = currentValue >= parseFloat(evt.currentTarget.max)\n\n setMinusDisabled(minValueReached)\n setPlusDisabled(maxValueReached)\n\n if (minValueReached || maxValueReached) {\n evt.currentTarget.focus()\n }\n }\n }}\n />\n }\n addon={\n (addonButtonProps.onClick || additionalControlButtonProps.onClick) && addonControlIcon ? (\n <IconButton\n ref={addonRef}\n sizes={SIZES_CONTROL}\n palette={controlPalette}\n {...sizeProps}\n {...additionalControlButtonProps}\n {...addonButtonProps}\n icon={addonControlIcon}\n disabled={disabled || addonButtonProps.disabled || additionalControlButtonProps.disabled}\n marginLeft={12}\n onClick={(evt) => {\n evt.stopPropagation()\n if (inputProps.readOnly) return\n\n if (addonButtonProps.onClick) addonButtonProps.onClick(evt)\n if (additionalControlButtonProps.onClick) additionalControlButtonProps.onClick(evt)\n }}\n />\n ) : undefined\n }\n controls={\n type === 'number' ? (\n <>\n <IconButton\n {...sizeProps}\n ref={minusRef}\n icon='minus'\n sizes={SIZES_CONTROL}\n palette={controlPalette}\n disabled={disabled || minusDisabled}\n marginLeft={12}\n onClick={(evt) => {\n evt.stopPropagation()\n if (inputProps.readOnly) return\n\n try {\n if (ref.current) {\n setInputActive(true)\n\n const prev = ref.current.value\n ref.current.stepDown()\n\n const decremented = ref.current.value\n if (prev !== decremented) {\n const event = new Event('input', { bubbles: true })\n ref.current.dispatchEvent(event)\n }\n }\n } catch (err) {\n // eslint-disable-next-line no-console\n console.error(err)\n }\n }}\n />\n <Styled.IconButtonSeparated\n {...sizeProps}\n ref={plusRef}\n icon='plus'\n sizes={SIZES_CONTROL}\n palette={controlPalette}\n disabled={disabled || plusDisabled}\n onClick={(evt) => {\n evt.stopPropagation()\n if (inputProps.readOnly) return\n\n try {\n if (ref.current) {\n setInputActive(true)\n\n const prev = ref.current.value\n ref.current.stepUp()\n\n const incremented = ref.current.value\n if (prev !== incremented) {\n const event = new Event('input', { bubbles: true })\n ref.current.dispatchEvent(event)\n }\n }\n } catch (err) {\n // eslint-disable-next-line no-console\n console.error(err)\n }\n }}\n />\n </>\n ) : undefined\n }\n />\n )\n }),\n {\n sizes: SIZES,\n displayName: COMPONENT_NAME,\n }\n ),\n {\n Phone: InputPhone,\n }\n)\n\nexport { Input, COMPONENT_NAME }\n"],"names":["COMPONENT_NAME","Input","Object","assign","withMergedProps","forwardRef","props","forwardedRef","theme","useTheme","size","rounded","primary","color","placeholderColor","width","defaultInputControlsWidth","type","labelPosition","iconProps","controls","addonButtonProps","preset","className","style","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","sizeUnits","sizes","margin","marginXXS","marginXS","marginS","marginM","marginL","marginXL","marginTop","marginTopXXS","marginTopXS","marginTopS","marginTopM","marginTopL","marginTopXL","marginRight","marginRightXXS","marginRightXS","marginRightS","marginRightM","marginRightL","marginRightXL","marginBottom","marginBottomXXS","marginBottomXS","marginBottomS","marginBottomM","marginBottomL","marginBottomXL","marginLeft","marginLeftXXS","marginLeftXS","marginLeftS","marginLeftM","marginLeftL","marginLeftXL","palette","widthXXS","widthXS","widthS","widthM","widthL","widthXL","error","success","label","icon","text","secondary","contrast","onColored","fluid","disabled","inline","inputRef","inputProps","sizeProps","additionalControlIcon","buttonProps","additionalControlButtonProps","additional","iconBefore","iconAfter","onClick","undefined","Array","isArray","addonControlIcon","inputAlwaysActive","Boolean","mask","alwaysShowMask","controlPalette","controlsColor","colorHover","controlsColorHover","colorActive","controlsColorActive","colorDisabled","controlsColorDisabled","backgroundColor","controlsBackgroundColor","backgroundColorHover","controlsBackgroundColorHover","backgroundColorActive","controlsBackgroundColorActive","backgroundColorDisabled","controlsBackgroundColorDisabled","ref","useRef","useImperativeHandle","current","addonRef","minusRef","plusRef","inputLabelId","useMemo","nanoid","inputActive","setInputActive","useState","initValue","value","defaultValue","length","minusDisabled","setMinusDisabled","min","Infinity","parseFloat","initDefaultValue","minValue","Math","plusDisabled","setPlusDisabled","max","maxValue","useLayoutEffect","document","activeElement","_jsx","Styled","input","FormInputLabel","labelId","active","borderColor","borderColorDisabled","SIZES_ICON","focus","onFocus","evt","target","currentTarget","onPointerDown","Node","contains","preventDefault","onBlur","relatedTarget","FormInput","inputColor","inputPlaceholderColor","inputColorDisabled","placeholderColorDisabled","inputPlaceholderColorDisabled","onChange","currentValue","minValueReached","maxValueReached","addon","IconButton","SIZES_CONTROL","stopPropagation","readOnly","_jsxs","_Fragment","children","prev","stepDown","event","Event","bubbles","dispatchEvent","err","console","stepUp","SIZES","displayName","Phone","InputPhone"],"mappings":"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"}
|
package/dts/index.d.ts
CHANGED
|
@@ -4671,7 +4671,7 @@ interface IconProps extends ResponsiveSizeProps<Size, SizeValue>, ResponsiveMarg
|
|
|
4671
4671
|
/** Icon color */
|
|
4672
4672
|
color?: Color;
|
|
4673
4673
|
/** Built-in icon name */
|
|
4674
|
-
name?: IconName
|
|
4674
|
+
name?: IconName;
|
|
4675
4675
|
/** Custom icon element */
|
|
4676
4676
|
icon?: JSX.Element;
|
|
4677
4677
|
/** Value for vertical-align */
|
|
@@ -6066,7 +6066,7 @@ interface IconButtonProps extends ResponsiveSizeProps<IconButtonSize, IconButton
|
|
|
6066
6066
|
* @default undefined */
|
|
6067
6067
|
palette?: Partial<Record<keyof IconButtonPalette, Color>>;
|
|
6068
6068
|
/** Icon to display */
|
|
6069
|
-
icon: JSX.Element | IconName
|
|
6069
|
+
icon: JSX.Element | IconName;
|
|
6070
6070
|
/**
|
|
6071
6071
|
* Props for icon component
|
|
6072
6072
|
* @default {} */
|