@bikdotai/bik-component-library 0.0.830-beta.2 → 0.0.830-beta.3
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/dist/cjs/components/dropdown/Dropdown.js +1 -1
- package/dist/cjs/components/dropdown/Dropdown.js.map +1 -1
- package/dist/cjs/components/input/Input.js +1 -1
- package/dist/cjs/components/input/Input.js.map +1 -1
- package/dist/cjs/components/input/Input.styled.js +16 -10
- package/dist/cjs/components/input/Input.styled.js.map +1 -1
- package/dist/esm/components/dropdown/Dropdown.d.ts +2 -0
- package/dist/esm/components/dropdown/Dropdown.js +108 -102
- package/dist/esm/components/dropdown/Dropdown.js.map +1 -1
- package/dist/esm/components/input/Input.js +130 -127
- package/dist/esm/components/input/Input.js.map +1 -1
- package/dist/esm/components/input/Input.model.d.ts +2 -0
- package/dist/esm/components/input/Input.styled.d.ts +2 -0
- package/dist/esm/components/input/Input.styled.js +31 -25
- package/dist/esm/components/input/Input.styled.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-dev-runtime"),o=require("react"),n=require("../../constants/Theme.js"),B=require("../../assets/icons/chevronDown.svg.js"),_=require("../input/context/InputStyleProvider.js"),G=require("./ChipInput.js"),J=require("./DropdownPopover/index.js"),K=require("./OpenedDropdown/utils/iterationOnOptions.js"),Q=require("../input/Input.js");function O(){}const S=({placeHolder:d,size:y,onSelect:D,defaultOptions:c,disabled:i,solidDisabled:l,noErrorHint:C,placeHolderHeight:b,showPlaceholderWhenSelected:W=!1,inputStyle:E={},inputType:x="default",onDeleteChip:R,truncatedText:I,showLeadingIconInPlaceholder:L=!1,showTrailingIconPlaceholder:V=!1,showLabelsOnMoreHover:j=!1,value:u,showSelected:p=!1,onDropdownVisbilityChange:U,...e})=>{const[v,q]=o.useState(!1),[w,g]=o.useState(!1),s=y??"default",M=o.useRef(),[a,m]=o.useState(c??[]);function T(r){Array.isArray(r)?m([...r]):m([r]),D?.(r)}o.useEffect(()=>{const r=[];e?.options?.forEach(h=>{h.options?h.options.forEach(k=>{k.selected&&r.push({...k,label:k.label})}):h.selected&&r.push(h)}),m([...r])},[e.options]),o.useEffect(()=>{c&&m([...c])},[c]);const A=K.getSelectedOptionsAsText(a),F=W?d:A??d??"Select an option",f=e.buttonWidth,N=f??e.width??"100%",z=e.dropdownWidth??N;return t.jsxDEV(t.Fragment,{children:t.jsxDEV(_.InputStyleContext.Provider,{value:{InputWrapper:{height:b||(s==="x-small"?24:s==="small"?32:48),width:N,...f?{maxWidth:f}:{},zIndex:1,cursor:"pointer",padding:s==="x-small"?"4px 8px":"6px 8px",backgroundColor:i&&l?n.COLORS.background.base:e.version==="3.0"?v||w?n.COLORS.surface.hovered:n.COLORS.surface.standard:p&&u!==void 0?n.BASE_COLORS.positive[100]:w?n.COLORS.background.inactive:n.COLORS.surface.standard,transition:"background-color 0.3s ease",...E},input:{minHeight:"100%",maxWidth:"100%",color:i&&l?n.COLORS.content.secondary:p&&u!==void 0?n.COLORS.content.positive:"inherit"}},children:t.jsxDEV("div",{onMouseEnter:()=>g(!0),onMouseLeave:()=>g(!1),style:e.width?{width:e.width}:void 0,children:t.jsxDEV(J.DropdownPopover,{"data-test":e["data-test"],ref:M,onSelect:T,disabled:i,...e,onDropdownVisbilityChange:r=>{q(r),U?.(r)},width:z,children:[x=="default"&&t.jsxDEV(Q.Input,{version:e.version,noErrorHint:C,state:i?"disabled":"none",solidDisabled:l,value:u===void 0?F:u,errorMessage:e.error,variant:s,placeholder:d??"Select an option",onChangeText:O,leftIcon:L&&a[0]?.leadingIcon?{icon:()=>t.jsxDEV(t.Fragment,{children:a[0]?.leadingIcon},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/dropdown/Dropdown.tsx",lineNumber:211,columnNumber:25},void 0)}:void 0,rightIcon:{icon:()=>t.jsxDEV("div",{style:{display:"flex"},children:[V&&a[0]?.trailingIcon,t.jsxDEV(B.default,{style:{transform:v?"rotate(180deg)":"rotate(0deg)"},onClick:O,width:s==="x-small"?16:s==="small"?20:24,height:s==="x-small"?16:s==="small"?20:24,color:p?n.COLORS.content.positive:n.COLORS.content.primary},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/dropdown/Dropdown.tsx",lineNumber:224,columnNumber:12},void 0)]},void 0,!0,{fileName:"/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/dropdown/Dropdown.tsx",lineNumber:217,columnNumber:11},void 0)},truncateText:I??!0},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/dropdown/Dropdown.tsx",lineNumber:198,columnNumber:8},void 0),x=="chip"&&t.jsxDEV(G.default,{placeholder:d??"Select options",chips:a,onDeleteChip:r=>{R?.(r)},errorMessage:e.error,isDropdownOpened:v,sizeToUse:s,containerStyle:{width:e.width??"100%",cursor:"pointer",...i&&l?{backgroundColor:n.COLORS.background.base,pointerEvents:"none"}:{}},showLabelsOnMoreHover:j},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/dropdown/Dropdown.tsx",lineNumber:258,columnNumber:8},void 0)]},void 0,!0,{fileName:"/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/dropdown/Dropdown.tsx",lineNumber:179,columnNumber:6},void 0)},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/dropdown/Dropdown.tsx",lineNumber:170,columnNumber:5},void 0)},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/dropdown/Dropdown.tsx",lineNumber:128,columnNumber:4},void 0)},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/dropdown/Dropdown.tsx",lineNumber:127,columnNumber:3},void 0)};S.displayName="Dropdown";exports.Dropdown=S;
|
|
2
2
|
//# sourceMappingURL=Dropdown.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dropdown.js","sources":["../../../../src/components/dropdown/Dropdown.tsx"],"sourcesContent":["import React, { Ref, useEffect, useRef, useState } from 'react';\nimport { BASE_COLORS, COLORS } from '@src/constants/Theme';\nimport DownIcon from '../../assets/icons/chevronDown.svg';\nimport { Input } from '../input';\nimport { InputStyleContext } from '../input/context/InputStyleProvider';\nimport ChipInput from './ChipInput';\nimport { DropdownPopover } from './DropdownPopover';\nimport { getSelectedOptionsAsText } from './OpenedDropdown/utils/iterationOnOptions';\nimport {\n\tDropdownOption,\n\tGroupedOption,\n\tOpenDropdownProps,\n\tSingleOption,\n} from './type';\n\nexport type DropdownProps = OpenDropdownProps & {\n\tplaceHolder?: string;\n\tsize?: 'default' | 'small' | 'x-small';\n\tdisabled?: boolean;\n\tnoErrorHint?: boolean;\n\tbuttonWidth?: string;\n\tplaceHolderHeight?: string;\n\tshowPlaceholderWhenSelected?: boolean;\n\tinputStyle?: React.CSSProperties;\n\tinputType?: 'chip' | 'default';\n\tonDeleteChip?: (chip: SingleOption) => void;\n\ttruncatedText?: boolean;\n\t'data-test'?: string;\n\tshowLeadingIconInPlaceholder?: boolean;\n\tshowTrailingIconPlaceholder?: boolean;\n\tshowLabelsOnMoreHover?: boolean;\n\tbackgroundColor?: string;\n\tvalue?: string;\n\tshowSelected?: boolean;\n\t/** Fired when the dropdown opens/closes. Runs alongside internal open state. */\n\tonDropdownVisbilityChange?: (isOpen: boolean) => void;\n};\n\nfunction noop() {\n\t/** empty */\n}\n\nexport const Dropdown: React.FC<DropdownProps> = ({\n\tplaceHolder,\n\tsize,\n\tonSelect,\n\tdefaultOptions,\n\tdisabled,\n\tnoErrorHint,\n\tplaceHolderHeight,\n\tshowPlaceholderWhenSelected = false,\n\tinputStyle = {},\n\tinputType = 'default',\n\tonDeleteChip,\n\ttruncatedText,\n\tshowLeadingIconInPlaceholder = false,\n\tshowTrailingIconPlaceholder = false,\n\tshowLabelsOnMoreHover = false,\n\tvalue,\n\tshowSelected = false,\n\tonDropdownVisbilityChange,\n\t...openDropdownProps\n}) => {\n\tconst [isDropdownOpened, setDropdownOpenFlag] = useState(false);\n\tconst [isHovering, setIsHovering] = useState(false);\n\tconst sizeToUse = size ?? 'default';\n\tconst dropdownVisibilityRef = useRef<{\n\t\topenDropdown: boolean;\n\t}>();\n\tconst [selectedOption, setSelectedOption] = useState<DropdownOption[]>(\n\t\tdefaultOptions ?? [],\n\t);\n\tfunction handleSelection(option: DropdownOption | DropdownOption[]) {\n\t\tif (Array.isArray(option)) {\n\t\t\tsetSelectedOption([...option]);\n\t\t} else {\n\t\t\tsetSelectedOption([...[option]]);\n\t\t}\n\t\tonSelect?.(option);\n\t}\n\n\tuseEffect(() => {\n\t\tconst flatSelectedOption: SingleOption[] = [];\n\t\topenDropdownProps?.options?.forEach((option) => {\n\t\t\tif ((option as GroupedOption).options) {\n\t\t\t\t(option as GroupedOption).options.forEach((op) => {\n\t\t\t\t\tif (op.selected) {\n\t\t\t\t\t\tflatSelectedOption.push({\n\t\t\t\t\t\t\t...op,\n\t\t\t\t\t\t\tlabel: op.label,\n\t\t\t\t\t\t});\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t} else {\n\t\t\t\tif ((option as SingleOption).selected) {\n\t\t\t\t\tflatSelectedOption.push(option as SingleOption);\n\t\t\t\t}\n\t\t\t}\n\t\t});\n\n\t\tsetSelectedOption([...flatSelectedOption]);\n\t}, [openDropdownProps.options]);\n\n\tuseEffect(() => {\n\t\tif (defaultOptions) {\n\t\t\tsetSelectedOption([...defaultOptions]);\n\t\t}\n\t}, [defaultOptions]);\n\n\tconst textVal = getSelectedOptionsAsText(selectedOption);\n\tconst displayText = showPlaceholderWhenSelected\n\t\t? placeHolder\n\t\t: textVal ?? placeHolder ?? 'Select an option';\n\n\tconst configuredMaxWidth = openDropdownProps.buttonWidth;\n\n\t// Shared width for the input wrapper and dropdown popover\n\tconst inputWidth = configuredMaxWidth ?? openDropdownProps.width ?? '100%';\n\n\t// Width passed to dropdown popover — matches input box width\n\tconst dropdownWidth = openDropdownProps.dropdownWidth ?? inputWidth;\n\n\treturn (\n\t\t<>\n\t\t\t<InputStyleContext.Provider\n\t\t\t\tvalue={{\n\t\t\t\t\tInputWrapper: {\n\t\t\t\t\t\theight: placeHolderHeight\n\t\t\t\t\t\t\t? placeHolderHeight\n\t\t\t\t\t\t\t: sizeToUse === 'x-small'\n\t\t\t\t\t\t\t? 24\n\t\t\t\t\t\t\t: sizeToUse === 'small'\n\t\t\t\t\t\t\t? 32\n\t\t\t\t\t\t\t: 48,\n\t\t\t\t\t\twidth: inputWidth,\n\t\t\t\t\t\t...(configuredMaxWidth ? { maxWidth: configuredMaxWidth } : {}),\n\t\t\t\t\t\tzIndex: 1,\n\t\t\t\t\t\tcursor: 'pointer',\n\t\t\t\t\t\tpadding: sizeToUse === 'x-small' ? '4px 8px' : '6px 8px',\n\t\t\t\t\t\tbackgroundColor:\n\t\t\t\t\t\t\topenDropdownProps.version === '3.0'\n\t\t\t\t\t\t\t\t? isDropdownOpened || isHovering\n\t\t\t\t\t\t\t\t\t? COLORS.surface.hovered\n\t\t\t\t\t\t\t\t\t: COLORS.surface.standard\n\t\t\t\t\t\t\t\t: showSelected && value !== undefined\n\t\t\t\t\t\t\t\t? BASE_COLORS.positive['100']\n\t\t\t\t\t\t\t\t: isHovering\n\t\t\t\t\t\t\t\t? COLORS.background.inactive\n\t\t\t\t\t\t\t\t: COLORS.surface.standard,\n\t\t\t\t\t\ttransition: 'background-color 0.3s ease',\n\t\t\t\t\t\t...inputStyle,\n\t\t\t\t\t},\n\t\t\t\t\tinput: {\n\t\t\t\t\t\tminHeight: '100%',\n\t\t\t\t\t\tmaxWidth: '100%',\n\t\t\t\t\t\tcolor:\n\t\t\t\t\t\t\tshowSelected && value !== undefined\n\t\t\t\t\t\t\t\t? COLORS.content.positive\n\t\t\t\t\t\t\t\t: 'inherit',\n\t\t\t\t\t},\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tonMouseEnter={() => setIsHovering(true)}\n\t\t\t\t\tonMouseLeave={() => setIsHovering(false)}\n\t\t\t\t\tstyle={\n\t\t\t\t\t\topenDropdownProps.width\n\t\t\t\t\t\t\t? { width: openDropdownProps.width }\n\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t}\n\t\t\t\t>\n\t\t\t\t\t<DropdownPopover\n\t\t\t\t\t\tdata-test={openDropdownProps['data-test']}\n\t\t\t\t\t\tref={\n\t\t\t\t\t\t\tdropdownVisibilityRef as Ref<{\n\t\t\t\t\t\t\t\topenDropdown: boolean;\n\t\t\t\t\t\t\t}>\n\t\t\t\t\t\t}\n\t\t\t\t\t\tonSelect={handleSelection}\n\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\t{...openDropdownProps}\n\t\t\t\t\t\tonDropdownVisbilityChange={(isOpen) => {\n\t\t\t\t\t\t\t// Keep the internal open flag (carat/open styling) AND forward\n\t\t\t\t\t\t\t// to a consumer-provided handler so callers can react to open state.\n\t\t\t\t\t\t\tsetDropdownOpenFlag(isOpen);\n\t\t\t\t\t\t\tonDropdownVisbilityChange?.(isOpen);\n\t\t\t\t\t\t}}\n\t\t\t\t\t\twidth={dropdownWidth}\n\t\t\t\t\t>\n\t\t\t\t\t\t{inputType == 'default' && (\n\t\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\t\tversion={openDropdownProps.version}\n\t\t\t\t\t\t\t\tnoErrorHint={noErrorHint}\n\t\t\t\t\t\t\t\tstate={disabled ? 'disabled' : 'none'}\n\t\t\t\t\t\t\t\tvalue={value === undefined ? displayText : value}\n\t\t\t\t\t\t\t\terrorMessage={openDropdownProps.error}\n\t\t\t\t\t\t\t\tvariant={sizeToUse}\n\t\t\t\t\t\t\t\tplaceholder={placeHolder ?? 'Select an option'}\n\t\t\t\t\t\t\t\tonChangeText={noop}\n\t\t\t\t\t\t\t\tleftIcon={\n\t\t\t\t\t\t\t\t\tshowLeadingIconInPlaceholder && selectedOption[0]?.leadingIcon\n\t\t\t\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\t\t\t\ticon: () => <>{selectedOption[0]?.leadingIcon}</>,\n\t\t\t\t\t\t\t\t\t\t }\n\t\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\trightIcon={{\n\t\t\t\t\t\t\t\t\ticon: () => (\n\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{showTrailingIconPlaceholder &&\n\t\t\t\t\t\t\t\t\t\t\t\t(selectedOption[0] as SingleOption)?.trailingIcon}\n\t\t\t\t\t\t\t\t\t\t\t<DownIcon\n\t\t\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\t\t\ttransform: isDropdownOpened\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? 'rotate(180deg)'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: 'rotate(0deg)',\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\tonClick={noop}\n\t\t\t\t\t\t\t\t\t\t\t\twidth={\n\t\t\t\t\t\t\t\t\t\t\t\t\tsizeToUse === 'x-small'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? 16\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: sizeToUse === 'small'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? 20\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: 24\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\theight={\n\t\t\t\t\t\t\t\t\t\t\t\t\tsizeToUse === 'x-small'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? 16\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: sizeToUse === 'small'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? 20\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: 24\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\tcolor={\n\t\t\t\t\t\t\t\t\t\t\t\t\tshowSelected\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? COLORS.content.positive\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: COLORS.content.primary\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\ttruncateText={truncatedText ?? true}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{inputType == 'chip' && (\n\t\t\t\t\t\t\t<ChipInput\n\t\t\t\t\t\t\t\tplaceholder={placeHolder ?? 'Select options'}\n\t\t\t\t\t\t\t\tchips={selectedOption as SingleOption[]}\n\t\t\t\t\t\t\t\tonDeleteChip={(chip) => {\n\t\t\t\t\t\t\t\t\tonDeleteChip?.(chip);\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\terrorMessage={openDropdownProps.error}\n\t\t\t\t\t\t\t\tisDropdownOpened={isDropdownOpened}\n\t\t\t\t\t\t\t\tsizeToUse={sizeToUse}\n\t\t\t\t\t\t\t\tcontainerStyle={{\n\t\t\t\t\t\t\t\t\twidth: openDropdownProps.width ?? '100%',\n\t\t\t\t\t\t\t\t\tcursor: 'pointer',\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tshowLabelsOnMoreHover={showLabelsOnMoreHover}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</DropdownPopover>\n\t\t\t\t</div>\n\t\t\t</InputStyleContext.Provider>\n\t\t</>\n\t);\n};\n\nDropdown.displayName = 'Dropdown';\n"],"names":["noop","Dropdown","placeHolder","size","onSelect","defaultOptions","disabled","noErrorHint","placeHolderHeight","showPlaceholderWhenSelected","inputStyle","inputType","onDeleteChip","truncatedText","showLeadingIconInPlaceholder","showTrailingIconPlaceholder","showLabelsOnMoreHover","value","showSelected","onDropdownVisbilityChange","openDropdownProps","isDropdownOpened","setDropdownOpenFlag","useState","isHovering","setIsHovering","sizeToUse","dropdownVisibilityRef","useRef","selectedOption","setSelectedOption","handleSelection","option","useEffect","flatSelectedOption","op","textVal","getSelectedOptionsAsText","displayText","configuredMaxWidth","inputWidth","dropdownWidth","jsxDEV","Fragment","InputStyleContext","COLORS","BASE_COLORS","DropdownPopover","isOpen","Input","this","DownIcon","ChipInput","chip"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Dropdown.js","sources":["../../../../src/components/dropdown/Dropdown.tsx"],"sourcesContent":["import React, { Ref, useEffect, useRef, useState } from 'react';\nimport { BASE_COLORS, COLORS } from '@src/constants/Theme';\nimport DownIcon from '../../assets/icons/chevronDown.svg';\nimport { Input } from '../input';\nimport { InputStyleContext } from '../input/context/InputStyleProvider';\nimport ChipInput from './ChipInput';\nimport { DropdownPopover } from './DropdownPopover';\nimport { getSelectedOptionsAsText } from './OpenedDropdown/utils/iterationOnOptions';\nimport {\n\tDropdownOption,\n\tGroupedOption,\n\tOpenDropdownProps,\n\tSingleOption,\n} from './type';\n\nexport type DropdownProps = OpenDropdownProps & {\n\tplaceHolder?: string;\n\tsize?: 'default' | 'small' | 'x-small';\n\tdisabled?: boolean;\n\t/** When disabled, render a solid grey box (background.base) with secondary text and no opacity wash. */\n\tsolidDisabled?: boolean;\n\tnoErrorHint?: boolean;\n\tbuttonWidth?: string;\n\tplaceHolderHeight?: string;\n\tshowPlaceholderWhenSelected?: boolean;\n\tinputStyle?: React.CSSProperties;\n\tinputType?: 'chip' | 'default';\n\tonDeleteChip?: (chip: SingleOption) => void;\n\ttruncatedText?: boolean;\n\t'data-test'?: string;\n\tshowLeadingIconInPlaceholder?: boolean;\n\tshowTrailingIconPlaceholder?: boolean;\n\tshowLabelsOnMoreHover?: boolean;\n\tbackgroundColor?: string;\n\tvalue?: string;\n\tshowSelected?: boolean;\n\t/** Fired when the dropdown opens/closes. Runs alongside internal open state. */\n\tonDropdownVisbilityChange?: (isOpen: boolean) => void;\n};\n\nfunction noop() {\n\t/** empty */\n}\n\nexport const Dropdown: React.FC<DropdownProps> = ({\n\tplaceHolder,\n\tsize,\n\tonSelect,\n\tdefaultOptions,\n\tdisabled,\n\tsolidDisabled,\n\tnoErrorHint,\n\tplaceHolderHeight,\n\tshowPlaceholderWhenSelected = false,\n\tinputStyle = {},\n\tinputType = 'default',\n\tonDeleteChip,\n\ttruncatedText,\n\tshowLeadingIconInPlaceholder = false,\n\tshowTrailingIconPlaceholder = false,\n\tshowLabelsOnMoreHover = false,\n\tvalue,\n\tshowSelected = false,\n\tonDropdownVisbilityChange,\n\t...openDropdownProps\n}) => {\n\tconst [isDropdownOpened, setDropdownOpenFlag] = useState(false);\n\tconst [isHovering, setIsHovering] = useState(false);\n\tconst sizeToUse = size ?? 'default';\n\tconst dropdownVisibilityRef = useRef<{\n\t\topenDropdown: boolean;\n\t}>();\n\tconst [selectedOption, setSelectedOption] = useState<DropdownOption[]>(\n\t\tdefaultOptions ?? [],\n\t);\n\tfunction handleSelection(option: DropdownOption | DropdownOption[]) {\n\t\tif (Array.isArray(option)) {\n\t\t\tsetSelectedOption([...option]);\n\t\t} else {\n\t\t\tsetSelectedOption([...[option]]);\n\t\t}\n\t\tonSelect?.(option);\n\t}\n\n\tuseEffect(() => {\n\t\tconst flatSelectedOption: SingleOption[] = [];\n\t\topenDropdownProps?.options?.forEach((option) => {\n\t\t\tif ((option as GroupedOption).options) {\n\t\t\t\t(option as GroupedOption).options.forEach((op) => {\n\t\t\t\t\tif (op.selected) {\n\t\t\t\t\t\tflatSelectedOption.push({\n\t\t\t\t\t\t\t...op,\n\t\t\t\t\t\t\tlabel: op.label,\n\t\t\t\t\t\t});\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t} else {\n\t\t\t\tif ((option as SingleOption).selected) {\n\t\t\t\t\tflatSelectedOption.push(option as SingleOption);\n\t\t\t\t}\n\t\t\t}\n\t\t});\n\n\t\tsetSelectedOption([...flatSelectedOption]);\n\t}, [openDropdownProps.options]);\n\n\tuseEffect(() => {\n\t\tif (defaultOptions) {\n\t\t\tsetSelectedOption([...defaultOptions]);\n\t\t}\n\t}, [defaultOptions]);\n\n\tconst textVal = getSelectedOptionsAsText(selectedOption);\n\tconst displayText = showPlaceholderWhenSelected\n\t\t? placeHolder\n\t\t: textVal ?? placeHolder ?? 'Select an option';\n\n\tconst configuredMaxWidth = openDropdownProps.buttonWidth;\n\n\t// Shared width for the input wrapper and dropdown popover\n\tconst inputWidth = configuredMaxWidth ?? openDropdownProps.width ?? '100%';\n\n\t// Width passed to dropdown popover — matches input box width\n\tconst dropdownWidth = openDropdownProps.dropdownWidth ?? inputWidth;\n\n\treturn (\n\t\t<>\n\t\t\t<InputStyleContext.Provider\n\t\t\t\tvalue={{\n\t\t\t\t\tInputWrapper: {\n\t\t\t\t\t\theight: placeHolderHeight\n\t\t\t\t\t\t\t? placeHolderHeight\n\t\t\t\t\t\t\t: sizeToUse === 'x-small'\n\t\t\t\t\t\t\t? 24\n\t\t\t\t\t\t\t: sizeToUse === 'small'\n\t\t\t\t\t\t\t? 32\n\t\t\t\t\t\t\t: 48,\n\t\t\t\t\t\twidth: inputWidth,\n\t\t\t\t\t\t...(configuredMaxWidth ? { maxWidth: configuredMaxWidth } : {}),\n\t\t\t\t\t\tzIndex: 1,\n\t\t\t\t\t\tcursor: 'pointer',\n\t\t\t\t\t\tpadding: sizeToUse === 'x-small' ? '4px 8px' : '6px 8px',\n\t\t\t\t\t\tbackgroundColor:\n\t\t\t\t\t\t\tdisabled && solidDisabled\n\t\t\t\t\t\t\t\t? COLORS.background.base\n\t\t\t\t\t\t\t\t: openDropdownProps.version === '3.0'\n\t\t\t\t\t\t\t\t? isDropdownOpened || isHovering\n\t\t\t\t\t\t\t\t\t? COLORS.surface.hovered\n\t\t\t\t\t\t\t\t\t: COLORS.surface.standard\n\t\t\t\t\t\t\t\t: showSelected && value !== undefined\n\t\t\t\t\t\t\t\t? BASE_COLORS.positive['100']\n\t\t\t\t\t\t\t\t: isHovering\n\t\t\t\t\t\t\t\t? COLORS.background.inactive\n\t\t\t\t\t\t\t\t: COLORS.surface.standard,\n\t\t\t\t\t\ttransition: 'background-color 0.3s ease',\n\t\t\t\t\t\t...inputStyle,\n\t\t\t\t\t},\n\t\t\t\t\tinput: {\n\t\t\t\t\t\tminHeight: '100%',\n\t\t\t\t\t\tmaxWidth: '100%',\n\t\t\t\t\t\tcolor:\n\t\t\t\t\t\t\tdisabled && solidDisabled\n\t\t\t\t\t\t\t\t? COLORS.content.secondary\n\t\t\t\t\t\t\t\t: showSelected && value !== undefined\n\t\t\t\t\t\t\t\t? COLORS.content.positive\n\t\t\t\t\t\t\t\t: 'inherit',\n\t\t\t\t\t},\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tonMouseEnter={() => setIsHovering(true)}\n\t\t\t\t\tonMouseLeave={() => setIsHovering(false)}\n\t\t\t\t\tstyle={\n\t\t\t\t\t\topenDropdownProps.width\n\t\t\t\t\t\t\t? { width: openDropdownProps.width }\n\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t}\n\t\t\t\t>\n\t\t\t\t\t<DropdownPopover\n\t\t\t\t\t\tdata-test={openDropdownProps['data-test']}\n\t\t\t\t\t\tref={\n\t\t\t\t\t\t\tdropdownVisibilityRef as Ref<{\n\t\t\t\t\t\t\t\topenDropdown: boolean;\n\t\t\t\t\t\t\t}>\n\t\t\t\t\t\t}\n\t\t\t\t\t\tonSelect={handleSelection}\n\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\t{...openDropdownProps}\n\t\t\t\t\t\tonDropdownVisbilityChange={(isOpen) => {\n\t\t\t\t\t\t\t// Keep the internal open flag (carat/open styling) AND forward\n\t\t\t\t\t\t\t// to a consumer-provided handler so callers can react to open state.\n\t\t\t\t\t\t\tsetDropdownOpenFlag(isOpen);\n\t\t\t\t\t\t\tonDropdownVisbilityChange?.(isOpen);\n\t\t\t\t\t\t}}\n\t\t\t\t\t\twidth={dropdownWidth}\n\t\t\t\t\t>\n\t\t\t\t\t\t{inputType == 'default' && (\n\t\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\t\tversion={openDropdownProps.version}\n\t\t\t\t\t\t\t\tnoErrorHint={noErrorHint}\n\t\t\t\t\t\t\t\tstate={disabled ? 'disabled' : 'none'}\n\t\t\t\t\t\t\t\tsolidDisabled={solidDisabled}\n\t\t\t\t\t\t\t\tvalue={value === undefined ? displayText : value}\n\t\t\t\t\t\t\t\terrorMessage={openDropdownProps.error}\n\t\t\t\t\t\t\t\tvariant={sizeToUse}\n\t\t\t\t\t\t\t\tplaceholder={placeHolder ?? 'Select an option'}\n\t\t\t\t\t\t\t\tonChangeText={noop}\n\t\t\t\t\t\t\t\tleftIcon={\n\t\t\t\t\t\t\t\t\tshowLeadingIconInPlaceholder && selectedOption[0]?.leadingIcon\n\t\t\t\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\t\t\t\ticon: () => <>{selectedOption[0]?.leadingIcon}</>,\n\t\t\t\t\t\t\t\t\t\t }\n\t\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\trightIcon={{\n\t\t\t\t\t\t\t\t\ticon: () => (\n\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{showTrailingIconPlaceholder &&\n\t\t\t\t\t\t\t\t\t\t\t\t(selectedOption[0] as SingleOption)?.trailingIcon}\n\t\t\t\t\t\t\t\t\t\t\t<DownIcon\n\t\t\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\t\t\ttransform: isDropdownOpened\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? 'rotate(180deg)'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: 'rotate(0deg)',\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\tonClick={noop}\n\t\t\t\t\t\t\t\t\t\t\t\twidth={\n\t\t\t\t\t\t\t\t\t\t\t\t\tsizeToUse === 'x-small'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? 16\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: sizeToUse === 'small'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? 20\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: 24\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\theight={\n\t\t\t\t\t\t\t\t\t\t\t\t\tsizeToUse === 'x-small'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? 16\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: sizeToUse === 'small'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? 20\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: 24\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\tcolor={\n\t\t\t\t\t\t\t\t\t\t\t\t\tshowSelected\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? COLORS.content.positive\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: COLORS.content.primary\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\ttruncateText={truncatedText ?? true}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{inputType == 'chip' && (\n\t\t\t\t\t\t\t<ChipInput\n\t\t\t\t\t\t\t\tplaceholder={placeHolder ?? 'Select options'}\n\t\t\t\t\t\t\t\tchips={selectedOption as SingleOption[]}\n\t\t\t\t\t\t\t\tonDeleteChip={(chip) => {\n\t\t\t\t\t\t\t\t\tonDeleteChip?.(chip);\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\terrorMessage={openDropdownProps.error}\n\t\t\t\t\t\t\t\tisDropdownOpened={isDropdownOpened}\n\t\t\t\t\t\t\t\tsizeToUse={sizeToUse}\n\t\t\t\t\t\t\t\tcontainerStyle={{\n\t\t\t\t\t\t\t\t\twidth: openDropdownProps.width ?? '100%',\n\t\t\t\t\t\t\t\t\tcursor: 'pointer',\n\t\t\t\t\t\t\t\t\t...(disabled && solidDisabled\n\t\t\t\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\t\t\t\tbackgroundColor: COLORS.background.base,\n\t\t\t\t\t\t\t\t\t\t\t\tpointerEvents: 'none',\n\t\t\t\t\t\t\t\t\t\t }\n\t\t\t\t\t\t\t\t\t\t: {}),\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tshowLabelsOnMoreHover={showLabelsOnMoreHover}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</DropdownPopover>\n\t\t\t\t</div>\n\t\t\t</InputStyleContext.Provider>\n\t\t</>\n\t);\n};\n\nDropdown.displayName = 'Dropdown';\n"],"names":["noop","Dropdown","placeHolder","size","onSelect","defaultOptions","disabled","solidDisabled","noErrorHint","placeHolderHeight","showPlaceholderWhenSelected","inputStyle","inputType","onDeleteChip","truncatedText","showLeadingIconInPlaceholder","showTrailingIconPlaceholder","showLabelsOnMoreHover","value","showSelected","onDropdownVisbilityChange","openDropdownProps","isDropdownOpened","setDropdownOpenFlag","useState","isHovering","setIsHovering","sizeToUse","dropdownVisibilityRef","useRef","selectedOption","setSelectedOption","handleSelection","option","useEffect","flatSelectedOption","op","textVal","getSelectedOptionsAsText","displayText","configuredMaxWidth","inputWidth","dropdownWidth","jsxDEV","Fragment","InputStyleContext","COLORS","BASE_COLORS","DropdownPopover","isOpen","Input","this","DownIcon","ChipInput","chip"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-dev-runtime"),Ee=require("../../assets/icons/info.svg.js"),r=require("react"),f=require("./Input-helper.js"),te=require("../TypographyStyle.js"),ne=require("../../constants/Theme.js"),we=require("../../assets/icons/errorInfo.svg.js"),Ce=require("./context/InputStyleProvider.js"),s=require("./Input.styled.js"),ie=require("../button/Button.js"),Te=require("../tooltips/Tooltip.js"),re=r.forwardRef((e,se)=>{const{placeholder:T,leftIcon:V,rightIcon:W,labelText:N,maxCharLimit:a,isRequired:U,hintText:j,type:l,state:y,validate:oe,variant:u,button:c,suffixText:S,prefixText:M,onChangeText:L,value:h,noErrorHint:ae,reset:H,rangeValidation:ue,noKeyDownChange:le,version:me,noMaxCharCheck:R,labelElement:_,autoGrow:I,minHeight:D,maxHeight:ce,labelTextBold:pe,truncateText:de,maxCharLimitPosition:A,maxCharStyle:O,hightlightInputColor:he,onKeyDownEvent:B,hideInputHeader:ke,hideBorder:ve,inputWrapperStyles:fe,minCharsToTrigger:F,maxCharAlignment:be,isDisabled:q=!1,allowUnsafeInput:xe,leftIconStyle:Ne}={maxCharLimit:0,type:"text",variant:"default",maxCharLimitPosition:"TOP",minCharsToTrigger:0,maxCharAlignment:!1,...e},P=V?.icon,z=W?.icon,[g,b]=r.useState(!1),[ye,E]=r.useState(!1),[p,K]=r.useState(),X=u==="x-small"?"12px":u==="small"?"18px":"22px",x=r.useContext(Ce.InputStyleContext),[G,w]=r.useState(""),Ie=r.useRef(null),o=se??Ie;r.useEffect(()=>{w(h||""),!h&&I&&(o.current.style.height=D||"48px")},[h]),r.useEffect(()=>{o.current&&e.onReferenceInit?.(o.current)},[o]),r.useEffect(()=>{const t=o.current;if(t&&["phonenumber","zip","number"].includes(l))return t.addEventListener("wheel",J,{passive:!1}),()=>{t.removeEventListener("wheel",J)}},[]),r.useEffect(()=>{H&&w("")},[H]),r.useEffect(()=>{E(!!e.isActive),e.isActive&&o.current?.focus()},[e.isActive]),r.useEffect(()=>{K(e.errorMessage)},[e.errorMessage]),r.useEffect(()=>{b(!1),(e.state==="invalid"||p||e.state==="disabled-invalid")&&b(!0),e.state==="active"&&o.current?.focus()},[e.state,p]),r.useEffect(()=>{b(!!p||e.state==="invalid")},[p,e.state]);const d=(t,...i)=>{f.isFunction(t)&&t(...i)},Y=()=>l==="zip"?6:2e3,$=t=>{const i=a!==0?a:Y(),k=[8],v=F,m=t.target.value;B&&(!m.length||m.length>=v)&&B(t),!le&&(!m.length||m.length>=v)&&L(h||"",t),!R&&!k.includes(t.which)&&i>0&&m.length>=i&&t.preventDefault()},J=t=>{t.preventDefault()},Q=t=>{let i=t.target.value;const k=a!==0?a+1:Y(),v=F;if(!xe&&f.shouldSanitizeForType(l)&&(i=f.sanitizeUnsafeInput(i)),!R&&k>0&&i.length>=k&&(i=i.substring(0,k-1)),e.textControl||w(i||""),v&&i&&i.length<v)return;L(i,t),I&&(o.current.style.height=`${o.current.scrollHeight}px`,i||(o.current.style.height=D||"48px"));const m=oe||f.validateInput;if(!m||!f.isFunction(m))return;const[De,ge]=m(i,l,ue);b(!De),K(e.errorMessage?e.errorMessage:ge)},Z=t=>{e.skipFocus||E(!0),d(e.onFocus?.(t))},ee=t=>{e.skipFocus||E(!1),d(e.onBlur?.(t))},C=()=>n.jsxDEV(n.Fragment,{children:[l!=="multiline"&&n.jsxDEV("input",{className:de?"truncate-class":"","data-test":e["data-test"],id:e.id,style:x?.input??{},ref:o,disabled:q,type:["phonenumber","zip","number"].includes(l)?"number":l,value:G,onFocus:t=>Z(t),onBlur:t=>ee(t),placeholder:T||"Enter here",onChange:Q,onClick:t=>d(e.onClick),onKeyDown:t=>$(t)},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/input/Input.tsx",lineNumber:271,columnNumber:7},void 0),l==="multiline"&&n.jsxDEV("textarea",{"data-test":e["data-test"],value:G,ref:o,onFocus:t=>Z(t),onBlur:t=>ee(t),onClick:t=>d(e.onClick),disabled:q,placeholder:T||"Enter here",onChange:Q,onKeyDown:t=>$(t),maxLength:a>0?a:void 0},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/input/Input.tsx",lineNumber:293,columnNumber:7},void 0)]},void 0,!0,{fileName:"/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/input/Input.tsx",lineNumber:269,columnNumber:5},void 0);return n.jsxDEV(s.RootContainer,{width:e.width,height:e.height,state:y,type:l,style:x?.RootContainer??{},children:[n.jsxDEV("div",{className:"flex-align-center",children:[!ae&&(!!j||!!p)&&n.jsxDEV(s.InputFooter,{invalid:!!p,children:[!!p&&n.jsxDEV(we.default,{width:16,height:16},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/input/Input.tsx",lineNumber:322,columnNumber:27},void 0),p||j]},void 0,!0,{fileName:"/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/input/Input.tsx",lineNumber:321,columnNumber:7},void 0),a>0&&A==="BOTTOM"&&n.jsxDEV(s.MaxCharStyle,{position:"BOTTOM",style:O,children:[(h??"").toString()?.length??0,"/",a]},void 0,!0,{fileName:"/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/input/Input.tsx",lineNumber:327,columnNumber:7},void 0)]},void 0,!0,{fileName:"/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/input/Input.tsx",lineNumber:319,columnNumber:5},void 0),n.jsxDEV(s.InputWrapper,{variant:u,state:y,width:e.width,isActive:y==="active"||ye,isInvalid:g,style:x?.InputWrapper??fe??{},version:me,height:e.height,hightlightInputColor:he,hideBorder:ve,children:[!!P&&n.jsxDEV(s.IconHolder,{variant:u,iconSize:X,onClick:()=>d(V?.callback),isLeft:!0,style:{...x?.IconHolder??{},...Ne},children:n.jsxDEV(P,{},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/input/Input.tsx",lineNumber:355,columnNumber:8},void 0)},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/input/Input.tsx",lineNumber:345,columnNumber:7},void 0),!!M&&n.jsxDEV(s.PrefixHolder,{variant:u,children:M},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/input/Input.tsx",lineNumber:359,columnNumber:7},void 0),u==="default"&&n.jsxDEV(s.InputContainer,{height:e.height,type:e.type,minHeight:D,maxHeight:ce,autoGrow:I,children:C()},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/input/Input.tsx",lineNumber:362,columnNumber:7},void 0),u==="small"&&n.jsxDEV(s.InputContainerSmall,{height:e.height,type:e.type,children:C()},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/input/Input.tsx",lineNumber:373,columnNumber:7},void 0),u==="x-small"&&n.jsxDEV(s.InputContainerXSmall,{height:e.height,type:e.type,children:C()},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/input/Input.tsx",lineNumber:378,columnNumber:7},void 0),!!z&&n.jsxDEV(s.IconHolder,{variant:u,iconSize:X,onClick:()=>d(W?.callback),isLeft:!1,children:n.jsxDEV(z,{},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/input/Input.tsx",lineNumber:389,columnNumber:8},void 0)},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/input/Input.tsx",lineNumber:383,columnNumber:7},void 0),!!S&&n.jsxDEV(s.SuffixHolder,{variant:u,children:S},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/input/Input.tsx",lineNumber:393,columnNumber:7},void 0),c&&c.text&&n.jsxDEV(ie.Button,{buttonText:c.text,buttonType:c.buttonType,onClick:()=>d(c?.onClick)},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/input/Input.tsx",lineNumber:396,columnNumber:7},void 0),c&&c.buttonProps&&n.jsxDEV(ie.Button,{...c.buttonProps},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/input/Input.tsx",lineNumber:402,columnNumber:39},void 0)]},void 0,!0,{fileName:"/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/input/Input.tsx",lineNumber:332,columnNumber:5},void 0),!ke&&(!!N||!!a)&&n.jsxDEV(s.InputHeader,{invalid:g,maxCharAlignment:be,children:[_&&_,n.jsxDEV("div",{className:"label__container",children:[pe?n.jsxDEV(te.TitleSmall,{children:[N,U?n.jsxDEV("span",{children:"*"},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/input/Input.tsx",lineNumber:414,columnNumber:24},void 0):""]},void 0,!0,{fileName:"/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/input/Input.tsx",lineNumber:412,columnNumber:9},void 0):n.jsxDEV(te.BodySecondary,{children:[N,U?n.jsxDEV("span",{children:"*"},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/input/Input.tsx",lineNumber:419,columnNumber:24},void 0):""]},void 0,!0,{fileName:"/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/input/Input.tsx",lineNumber:417,columnNumber:9},void 0),e.tooltipText&&n.jsxDEV(Te.Tooltip,{body:e.tooltipText,placement:"top",children:n.jsxDEV("span",{children:n.jsxDEV(Ee.default,{style:{marginTop:-3},width:18,height:18,color:g?ne.COLORS.content.negative:ne.COLORS.content.primary},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/input/Input.tsx",lineNumber:425,columnNumber:11},void 0)},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/input/Input.tsx",lineNumber:424,columnNumber:10},void 0)},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/input/Input.tsx",lineNumber:423,columnNumber:9},void 0)]},void 0,!0,{fileName:"/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/input/Input.tsx",lineNumber:410,columnNumber:7},void 0),a>0&&A==="TOP"&&n.jsxDEV(s.MaxCharStyle,{style:O,children:[(h??"").toString()?.length??0,"/",a]},void 0,!0,{fileName:"/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/input/Input.tsx",lineNumber:440,columnNumber:8},void 0)]},void 0,!0,{fileName:"/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/input/Input.tsx",lineNumber:405,columnNumber:6},void 0)]},void 0,!0,{fileName:"/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/input/Input.tsx",lineNumber:312,columnNumber:4},void 0)});re.displayName="Input";exports.Input=re;
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-dev-runtime"),we=require("../../assets/icons/info.svg.js"),r=require("react"),f=require("./Input-helper.js"),ne=require("../TypographyStyle.js"),ie=require("../../constants/Theme.js"),Ce=require("../../assets/icons/errorInfo.svg.js"),Te=require("./context/InputStyleProvider.js"),s=require("./Input.styled.js"),re=require("../button/Button.js"),Ve=require("../tooltips/Tooltip.js"),se=r.forwardRef((e,oe)=>{const{placeholder:T,leftIcon:V,rightIcon:W,labelText:N,maxCharLimit:a,isRequired:U,hintText:j,type:l,state:y,validate:ae,variant:u,button:c,suffixText:S,prefixText:M,onChangeText:L,value:h,noErrorHint:ue,reset:H,rangeValidation:le,noKeyDownChange:me,version:ce,noMaxCharCheck:R,labelElement:_,autoGrow:I,minHeight:D,maxHeight:pe,labelTextBold:de,truncateText:he,maxCharLimitPosition:A,maxCharStyle:O,hightlightInputColor:ke,onKeyDownEvent:B,hideInputHeader:ve,hideBorder:fe,inputWrapperStyles:be,minCharsToTrigger:F,maxCharAlignment:xe,isDisabled:q=!1,solidDisabled:P=!1,allowUnsafeInput:Ne,leftIconStyle:ye}={maxCharLimit:0,type:"text",variant:"default",maxCharLimitPosition:"TOP",minCharsToTrigger:0,maxCharAlignment:!1,...e},z=V?.icon,K=W?.icon,[g,b]=r.useState(!1),[Ie,E]=r.useState(!1),[p,X]=r.useState(),G=u==="x-small"?"12px":u==="small"?"18px":"22px",x=r.useContext(Te.InputStyleContext),[Y,w]=r.useState(""),De=r.useRef(null),o=oe??De;r.useEffect(()=>{w(h||""),!h&&I&&(o.current.style.height=D||"48px")},[h]),r.useEffect(()=>{o.current&&e.onReferenceInit?.(o.current)},[o]),r.useEffect(()=>{const t=o.current;if(t&&["phonenumber","zip","number"].includes(l))return t.addEventListener("wheel",Q,{passive:!1}),()=>{t.removeEventListener("wheel",Q)}},[]),r.useEffect(()=>{H&&w("")},[H]),r.useEffect(()=>{E(!!e.isActive),e.isActive&&o.current?.focus()},[e.isActive]),r.useEffect(()=>{X(e.errorMessage)},[e.errorMessage]),r.useEffect(()=>{b(!1),(e.state==="invalid"||p||e.state==="disabled-invalid")&&b(!0),e.state==="active"&&o.current?.focus()},[e.state,p]),r.useEffect(()=>{b(!!p||e.state==="invalid")},[p,e.state]);const d=(t,...i)=>{f.isFunction(t)&&t(...i)},$=()=>l==="zip"?6:2e3,J=t=>{const i=a!==0?a:$(),k=[8],v=F,m=t.target.value;B&&(!m.length||m.length>=v)&&B(t),!me&&(!m.length||m.length>=v)&&L(h||"",t),!R&&!k.includes(t.which)&&i>0&&m.length>=i&&t.preventDefault()},Q=t=>{t.preventDefault()},Z=t=>{let i=t.target.value;const k=a!==0?a+1:$(),v=F;if(!Ne&&f.shouldSanitizeForType(l)&&(i=f.sanitizeUnsafeInput(i)),!R&&k>0&&i.length>=k&&(i=i.substring(0,k-1)),e.textControl||w(i||""),v&&i&&i.length<v)return;L(i,t),I&&(o.current.style.height=`${o.current.scrollHeight}px`,i||(o.current.style.height=D||"48px"));const m=ae||f.validateInput;if(!m||!f.isFunction(m))return;const[ge,Ee]=m(i,l,le);b(!ge),X(e.errorMessage?e.errorMessage:Ee)},ee=t=>{e.skipFocus||E(!0),d(e.onFocus?.(t))},te=t=>{e.skipFocus||E(!1),d(e.onBlur?.(t))},C=()=>n.jsxDEV(n.Fragment,{children:[l!=="multiline"&&n.jsxDEV("input",{className:he?"truncate-class":"","data-test":e["data-test"],id:e.id,style:x?.input??{},ref:o,disabled:q,type:["phonenumber","zip","number"].includes(l)?"number":l,value:Y,onFocus:t=>ee(t),onBlur:t=>te(t),placeholder:T||"Enter here",onChange:Z,onClick:t=>d(e.onClick),onKeyDown:t=>J(t)},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/input/Input.tsx",lineNumber:272,columnNumber:7},void 0),l==="multiline"&&n.jsxDEV("textarea",{"data-test":e["data-test"],value:Y,ref:o,onFocus:t=>ee(t),onBlur:t=>te(t),onClick:t=>d(e.onClick),disabled:q,placeholder:T||"Enter here",onChange:Z,onKeyDown:t=>J(t),maxLength:a>0?a:void 0},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/input/Input.tsx",lineNumber:294,columnNumber:7},void 0)]},void 0,!0,{fileName:"/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/input/Input.tsx",lineNumber:270,columnNumber:5},void 0);return n.jsxDEV(s.RootContainer,{width:e.width,height:e.height,state:y,solidDisabled:P,type:l,style:x?.RootContainer??{},children:[n.jsxDEV("div",{className:"flex-align-center",children:[!ue&&(!!j||!!p)&&n.jsxDEV(s.InputFooter,{invalid:!!p,children:[!!p&&n.jsxDEV(Ce.default,{width:16,height:16},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/input/Input.tsx",lineNumber:324,columnNumber:27},void 0),p||j]},void 0,!0,{fileName:"/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/input/Input.tsx",lineNumber:323,columnNumber:7},void 0),a>0&&A==="BOTTOM"&&n.jsxDEV(s.MaxCharStyle,{position:"BOTTOM",style:O,children:[(h??"").toString()?.length??0,"/",a]},void 0,!0,{fileName:"/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/input/Input.tsx",lineNumber:329,columnNumber:7},void 0)]},void 0,!0,{fileName:"/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/input/Input.tsx",lineNumber:321,columnNumber:5},void 0),n.jsxDEV(s.InputWrapper,{variant:u,state:y,solidDisabled:P,width:e.width,isActive:y==="active"||Ie,isInvalid:g,style:x?.InputWrapper??be??{},version:ce,height:e.height,hightlightInputColor:ke,hideBorder:fe,children:[!!z&&n.jsxDEV(s.IconHolder,{variant:u,iconSize:G,onClick:()=>d(V?.callback),isLeft:!0,style:{...x?.IconHolder??{},...ye},children:n.jsxDEV(z,{},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/input/Input.tsx",lineNumber:358,columnNumber:8},void 0)},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/input/Input.tsx",lineNumber:348,columnNumber:7},void 0),!!M&&n.jsxDEV(s.PrefixHolder,{variant:u,children:M},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/input/Input.tsx",lineNumber:362,columnNumber:7},void 0),u==="default"&&n.jsxDEV(s.InputContainer,{height:e.height,type:e.type,minHeight:D,maxHeight:pe,autoGrow:I,children:C()},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/input/Input.tsx",lineNumber:365,columnNumber:7},void 0),u==="small"&&n.jsxDEV(s.InputContainerSmall,{height:e.height,type:e.type,children:C()},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/input/Input.tsx",lineNumber:376,columnNumber:7},void 0),u==="x-small"&&n.jsxDEV(s.InputContainerXSmall,{height:e.height,type:e.type,children:C()},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/input/Input.tsx",lineNumber:381,columnNumber:7},void 0),!!K&&n.jsxDEV(s.IconHolder,{variant:u,iconSize:G,onClick:()=>d(W?.callback),isLeft:!1,children:n.jsxDEV(K,{},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/input/Input.tsx",lineNumber:392,columnNumber:8},void 0)},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/input/Input.tsx",lineNumber:386,columnNumber:7},void 0),!!S&&n.jsxDEV(s.SuffixHolder,{variant:u,children:S},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/input/Input.tsx",lineNumber:396,columnNumber:7},void 0),c&&c.text&&n.jsxDEV(re.Button,{buttonText:c.text,buttonType:c.buttonType,onClick:()=>d(c?.onClick)},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/input/Input.tsx",lineNumber:399,columnNumber:7},void 0),c&&c.buttonProps&&n.jsxDEV(re.Button,{...c.buttonProps},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/input/Input.tsx",lineNumber:405,columnNumber:39},void 0)]},void 0,!0,{fileName:"/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/input/Input.tsx",lineNumber:334,columnNumber:5},void 0),!ve&&(!!N||!!a)&&n.jsxDEV(s.InputHeader,{invalid:g,maxCharAlignment:xe,children:[_&&_,n.jsxDEV("div",{className:"label__container",children:[de?n.jsxDEV(ne.TitleSmall,{children:[N,U?n.jsxDEV("span",{children:"*"},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/input/Input.tsx",lineNumber:417,columnNumber:24},void 0):""]},void 0,!0,{fileName:"/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/input/Input.tsx",lineNumber:415,columnNumber:9},void 0):n.jsxDEV(ne.BodySecondary,{children:[N,U?n.jsxDEV("span",{children:"*"},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/input/Input.tsx",lineNumber:422,columnNumber:24},void 0):""]},void 0,!0,{fileName:"/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/input/Input.tsx",lineNumber:420,columnNumber:9},void 0),e.tooltipText&&n.jsxDEV(Ve.Tooltip,{body:e.tooltipText,placement:"top",children:n.jsxDEV("span",{children:n.jsxDEV(we.default,{style:{marginTop:-3},width:18,height:18,color:g?ie.COLORS.content.negative:ie.COLORS.content.primary},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/input/Input.tsx",lineNumber:428,columnNumber:11},void 0)},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/input/Input.tsx",lineNumber:427,columnNumber:10},void 0)},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/input/Input.tsx",lineNumber:426,columnNumber:9},void 0)]},void 0,!0,{fileName:"/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/input/Input.tsx",lineNumber:413,columnNumber:7},void 0),a>0&&A==="TOP"&&n.jsxDEV(s.MaxCharStyle,{style:O,children:[(h??"").toString()?.length??0,"/",a]},void 0,!0,{fileName:"/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/input/Input.tsx",lineNumber:443,columnNumber:8},void 0)]},void 0,!0,{fileName:"/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/input/Input.tsx",lineNumber:408,columnNumber:6},void 0)]},void 0,!0,{fileName:"/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/input/Input.tsx",lineNumber:313,columnNumber:4},void 0)});se.displayName="Input";exports.Input=se;
|
|
2
2
|
//# sourceMappingURL=Input.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.js","sources":["../../../../src/components/input/Input.tsx"],"sourcesContent":["import InfoIcon from '@src/assets/icons/info.svg';\nimport React, {\n\tforwardRef,\n\tMutableRefObject,\n\tRef,\n\tuseContext,\n\tuseEffect,\n\tuseRef,\n\tuseState,\n} from 'react';\nimport { Button } from '@src/components/button';\nimport {\n\tisFunction,\n\tsanitizeUnsafeInput,\n\tshouldSanitizeForType,\n\tvalidateInput,\n} from '@src/components/input/Input-helper';\nimport { Tooltip } from '@src/components/tooltips';\nimport { BodySecondary, TitleSmall } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport ErrorIcon from '../../assets/icons/errorInfo.svg';\nimport { InputStyleContext } from './context/InputStyleProvider';\nimport { InputProps, InputTypeI, InputVariant } from './Input.model';\nimport * as SC from './Input.styled';\nimport { PrefixHolder, SuffixHolder } from './Input.styled';\n\nexport const Input = forwardRef(\n\t(\n\t\tprops: InputProps,\n\t\tfRef: React.ForwardedRef<HTMLInputElement | HTMLTextAreaElement | null>,\n\t) => {\n\t\tconst {\n\t\t\tplaceholder,\n\t\t\tleftIcon,\n\t\t\trightIcon,\n\t\t\tlabelText,\n\t\t\tmaxCharLimit,\n\t\t\tisRequired,\n\t\t\thintText,\n\t\t\ttype,\n\t\t\tstate,\n\t\t\tvalidate,\n\t\t\tvariant,\n\t\t\tbutton,\n\t\t\tsuffixText,\n\t\t\tprefixText,\n\t\t\tonChangeText,\n\t\t\tvalue,\n\t\t\tnoErrorHint,\n\t\t\treset,\n\t\t\trangeValidation,\n\t\t\tnoKeyDownChange,\n\t\t\tversion,\n\t\t\tnoMaxCharCheck,\n\t\t\tlabelElement,\n\t\t\tautoGrow,\n\t\t\tminHeight,\n\t\t\tmaxHeight,\n\t\t\tlabelTextBold,\n\t\t\ttruncateText,\n\t\t\tmaxCharLimitPosition,\n\t\t\tmaxCharStyle,\n\t\t\thightlightInputColor,\n\t\t\tonKeyDownEvent,\n\t\t\thideInputHeader,\n\t\t\thideBorder,\n\t\t\tinputWrapperStyles,\n\t\t\tminCharsToTrigger,\n\t\t\tmaxCharAlignment,\n\t\t\tisDisabled = false,\n\t\t\tallowUnsafeInput,\n\t\t\tleftIconStyle,\n\t\t} = {\n\t\t\tmaxCharLimit: 0,\n\t\t\ttype: 'text' as InputTypeI,\n\t\t\tvariant: 'default' as InputVariant,\n\t\t\tmaxCharLimitPosition: 'TOP',\n\t\t\tminCharsToTrigger: 0,\n\t\t\tmaxCharAlignment: false,\n\t\t\t...props,\n\t\t};\n\t\tconst LeftIcon = leftIcon?.icon;\n\t\tconst RightIcon = rightIcon?.icon;\n\t\tconst [isInvalid, setIsInvalid] = useState<boolean>(false);\n\t\tconst [isActive, setIsActive] = useState<boolean>(false);\n\t\tconst [errorMessage, setErrorMessage] = useState<string>();\n\t\tconst iconSize =\n\t\t\tvariant === 'x-small' ? '12px' : variant === 'small' ? '18px' : '22px';\n\t\tconst stylesFromOutside = useContext(InputStyleContext);\n\t\tconst [inputValue, setInputValue] = useState<string>('');\n\t\tconst _ref = useRef<HTMLInputElement | HTMLTextAreaElement>(null);\n\t\tconst inputRef: MutableRefObject<HTMLInputElement | HTMLTextAreaElement> =\n\t\t\t(fRef ?? _ref) as MutableRefObject<\n\t\t\t\tHTMLInputElement | HTMLTextAreaElement\n\t\t\t>;\n\n\t\tuseEffect(() => {\n\t\t\tsetInputValue(value || '');\n\t\t\tif (!value && autoGrow) {\n\t\t\t\tinputRef.current.style.height = minHeight || '48px';\n\t\t\t}\n\t\t}, [value]);\n\n\t\tuseEffect(() => {\n\t\t\tif (!inputRef.current) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tprops.onReferenceInit?.(inputRef.current);\n\t\t}, [inputRef]);\n\n\t\tuseEffect(() => {\n\t\t\tconst numberInput = inputRef.current;\n\t\t\tif (numberInput && ['phonenumber', 'zip', 'number'].includes(type)) {\n\t\t\t\tnumberInput.addEventListener('wheel', onWheel, { passive: false });\n\n\t\t\t\treturn () => {\n\t\t\t\t\tnumberInput.removeEventListener('wheel', onWheel);\n\t\t\t\t};\n\t\t\t}\n\t\t}, []);\n\n\t\tuseEffect(() => {\n\t\t\tif (!reset) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tsetInputValue('');\n\t\t}, [reset]);\n\n\t\tuseEffect(() => {\n\t\t\tsetIsActive(!!props.isActive);\n\t\t\tif (props.isActive) {\n\t\t\t\tinputRef.current?.focus();\n\t\t\t}\n\t\t}, [props.isActive]);\n\n\t\tuseEffect(() => {\n\t\t\tsetErrorMessage(props.errorMessage);\n\t\t}, [props.errorMessage]);\n\n\t\tuseEffect(() => {\n\t\t\tsetIsInvalid(false);\n\t\t\tif (\n\t\t\t\tprops.state === 'invalid' ||\n\t\t\t\terrorMessage ||\n\t\t\t\tprops.state === 'disabled-invalid'\n\t\t\t) {\n\t\t\t\tsetIsInvalid(true);\n\t\t\t}\n\t\t\tif (props.state === 'active') {\n\t\t\t\tinputRef.current?.focus();\n\t\t\t}\n\t\t}, [props.state, errorMessage]);\n\n\t\tuseEffect(() => {\n\t\t\tsetIsInvalid(!!errorMessage || props.state === 'invalid');\n\t\t}, [errorMessage, props.state]);\n\n\t\tconst executeCallback = (cb: any, ...params: any[]): void => {\n\t\t\tif (!isFunction(cb)) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tcb(...params);\n\t\t};\n\n\t\tconst getMaxChar = () => {\n\t\t\tif (type === 'zip') {\n\t\t\t\treturn 6;\n\t\t\t}\n\t\t\treturn 2000;\n\t\t};\n\n\t\tconst onKeyDown = (e) => {\n\t\t\tconst MAX_CHAR_LIMIT = maxCharLimit !== 0 ? maxCharLimit : getMaxChar();\n\t\t\tconst KEY_CODES_TO_BE_EXCLUDED = [8];\n\t\t\tconst MIN_CHAR_LIMIT = minCharsToTrigger;\n\t\t\tconst inputText = e.target.value;\n\t\t\tif (\n\t\t\t\tonKeyDownEvent &&\n\t\t\t\t(!inputText.length || inputText.length >= MIN_CHAR_LIMIT)\n\t\t\t) {\n\t\t\t\tonKeyDownEvent(e);\n\t\t\t}\n\n\t\t\tif (\n\t\t\t\t!noKeyDownChange &&\n\t\t\t\t(!inputText.length || inputText.length >= MIN_CHAR_LIMIT)\n\t\t\t) {\n\t\t\t\tonChangeText(value || '', e);\n\t\t\t}\n\t\t\tif (noMaxCharCheck) return;\n\n\t\t\tif (\n\t\t\t\t!KEY_CODES_TO_BE_EXCLUDED.includes(e.which) &&\n\t\t\t\tMAX_CHAR_LIMIT > 0 &&\n\t\t\t\tinputText.length >= MAX_CHAR_LIMIT\n\t\t\t) {\n\t\t\t\te.preventDefault();\n\t\t\t}\n\t\t};\n\n\t\tconst onWheel = (event) => {\n\t\t\tevent.preventDefault(); // Prevent the default scroll behavior\n\t\t};\n\n\t\tconst onChange = (e) => {\n\t\t\tlet inputText = e.target.value;\n\t\t\tconst MAX_CHAR_LIMIT =\n\t\t\t\tmaxCharLimit !== 0 ? maxCharLimit + 1 : getMaxChar();\n\t\t\tconst MIN_CHAR_LIMIT = minCharsToTrigger;\n\n\t\t\tif (!allowUnsafeInput && shouldSanitizeForType(type)) {\n\t\t\t\tinputText = sanitizeUnsafeInput(inputText);\n\t\t\t}\n\n\t\t\tif (\n\t\t\t\t!noMaxCharCheck &&\n\t\t\t\tMAX_CHAR_LIMIT > 0 &&\n\t\t\t\tinputText.length >= MAX_CHAR_LIMIT\n\t\t\t) {\n\t\t\t\t// letting user to copy paste text upto max limit instead of blank action\n\t\t\t\tinputText = inputText.substring(0, MAX_CHAR_LIMIT - 1);\n\t\t\t}\n\n\t\t\tif (!props.textControl) {\n\t\t\t\tsetInputValue(inputText || '');\n\t\t\t}\n\t\t\tif (MIN_CHAR_LIMIT && inputText && inputText.length < MIN_CHAR_LIMIT) {\n\t\t\t\t// if minCharsToTrigger exists and is not reached, do nothing\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tonChangeText(inputText, e);\n\t\t\tif (autoGrow) {\n\t\t\t\tinputRef.current.style.height = `${inputRef.current.scrollHeight}px`;\n\t\t\t\tif (!inputText) {\n\t\t\t\t\tinputRef.current.style.height = minHeight || '48px';\n\t\t\t\t}\n\t\t\t}\n\t\t\tconst validateFunction = validate || validateInput;\n\t\t\tif (!validateFunction || !isFunction(validateFunction)) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tconst [isValid, error] = validateFunction(\n\t\t\t\tinputText,\n\t\t\t\ttype,\n\t\t\t\trangeValidation,\n\t\t\t);\n\n\t\t\tsetIsInvalid(!isValid);\n\t\t\tsetErrorMessage(props.errorMessage ? props.errorMessage : error);\n\t\t};\n\n\t\tconst onFocus = (e) => {\n\t\t\tif (!props.skipFocus) {\n\t\t\t\tsetIsActive(true);\n\t\t\t}\n\t\t\texecuteCallback(props.onFocus?.(e));\n\t\t};\n\n\t\tconst onBlur = (e) => {\n\t\t\tif (!props.skipFocus) {\n\t\t\t\tsetIsActive(false);\n\t\t\t}\n\t\t\texecuteCallback(props.onBlur?.(e));\n\t\t};\n\n\t\tconst getInputHTML = () => {\n\t\t\treturn (\n\t\t\t\t<>\n\t\t\t\t\t{type !== 'multiline' && (\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\tclassName={truncateText ? 'truncate-class' : ''}\n\t\t\t\t\t\t\tdata-test={props['data-test']}\n\t\t\t\t\t\t\tid={props.id}\n\t\t\t\t\t\t\tstyle={stylesFromOutside?.input ?? {}}\n\t\t\t\t\t\t\tref={inputRef as Ref<HTMLInputElement>}\n\t\t\t\t\t\t\tdisabled={isDisabled}\n\t\t\t\t\t\t\ttype={\n\t\t\t\t\t\t\t\t['phonenumber', 'zip', 'number'].includes(type)\n\t\t\t\t\t\t\t\t\t? 'number'\n\t\t\t\t\t\t\t\t\t: type\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tvalue={inputValue}\n\t\t\t\t\t\t\tonFocus={(e) => onFocus(e)}\n\t\t\t\t\t\t\tonBlur={(e) => onBlur(e)}\n\t\t\t\t\t\t\tplaceholder={placeholder || 'Enter here'}\n\t\t\t\t\t\t\tonChange={onChange}\n\t\t\t\t\t\t\tonClick={(e) => executeCallback(props.onClick)}\n\t\t\t\t\t\t\tonKeyDown={(e) => onKeyDown(e)}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t\t{type === 'multiline' && (\n\t\t\t\t\t\t<textarea\n\t\t\t\t\t\t\tdata-test={props['data-test']}\n\t\t\t\t\t\t\tvalue={inputValue}\n\t\t\t\t\t\t\tref={inputRef as Ref<HTMLTextAreaElement>}\n\t\t\t\t\t\t\tonFocus={(e) => onFocus(e)}\n\t\t\t\t\t\t\tonBlur={(e) => onBlur(e)}\n\t\t\t\t\t\t\tonClick={(e) => executeCallback(props.onClick)}\n\t\t\t\t\t\t\tdisabled={isDisabled}\n\t\t\t\t\t\t\tplaceholder={placeholder || 'Enter here'}\n\t\t\t\t\t\t\tonChange={onChange}\n\t\t\t\t\t\t\tonKeyDown={(e) => onKeyDown(e)}\n\t\t\t\t\t\t\tmaxLength={maxCharLimit > 0 ? maxCharLimit : undefined}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t</>\n\t\t\t);\n\t\t};\n\n\t\treturn (\n\t\t\t<SC.RootContainer\n\t\t\t\twidth={props.width}\n\t\t\t\theight={props.height}\n\t\t\t\tstate={state}\n\t\t\t\ttype={type}\n\t\t\t\tstyle={stylesFromOutside?.RootContainer ?? {}}\n\t\t\t>\n\t\t\t\t<div className=\"flex-align-center\">\n\t\t\t\t\t{!noErrorHint && (!!hintText || !!errorMessage) && (\n\t\t\t\t\t\t<SC.InputFooter invalid={!!errorMessage}>\n\t\t\t\t\t\t\t{!!errorMessage && <ErrorIcon width={16} height={16} />}\n\t\t\t\t\t\t\t{errorMessage || hintText}\n\t\t\t\t\t\t</SC.InputFooter>\n\t\t\t\t\t)}\n\t\t\t\t\t{maxCharLimit > 0 && maxCharLimitPosition === 'BOTTOM' && (\n\t\t\t\t\t\t<SC.MaxCharStyle position={'BOTTOM'} style={maxCharStyle}>\n\t\t\t\t\t\t\t{(value ?? '').toString()?.length ?? 0}/{maxCharLimit}\n\t\t\t\t\t\t</SC.MaxCharStyle>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t\t<SC.InputWrapper\n\t\t\t\t\tvariant={variant}\n\t\t\t\t\tstate={state}\n\t\t\t\t\twidth={props.width}\n\t\t\t\t\tisActive={state === 'active' || isActive}\n\t\t\t\t\tisInvalid={isInvalid}\n\t\t\t\t\tstyle={stylesFromOutside?.InputWrapper ?? inputWrapperStyles ?? {}}\n\t\t\t\t\tversion={version}\n\t\t\t\t\theight={props.height}\n\t\t\t\t\thightlightInputColor={hightlightInputColor}\n\t\t\t\t\thideBorder={hideBorder}\n\t\t\t\t>\n\t\t\t\t\t{!!LeftIcon && (\n\t\t\t\t\t\t<SC.IconHolder\n\t\t\t\t\t\t\tvariant={variant}\n\t\t\t\t\t\t\ticonSize={iconSize}\n\t\t\t\t\t\t\tonClick={() => executeCallback(leftIcon?.callback)}\n\t\t\t\t\t\t\tisLeft={true}\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t...(stylesFromOutside?.IconHolder ?? {}),\n\t\t\t\t\t\t\t\t...leftIconStyle,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<LeftIcon />\n\t\t\t\t\t\t</SC.IconHolder>\n\t\t\t\t\t)}\n\t\t\t\t\t{!!prefixText && (\n\t\t\t\t\t\t<PrefixHolder variant={variant}>{prefixText}</PrefixHolder>\n\t\t\t\t\t)}\n\t\t\t\t\t{variant === 'default' && (\n\t\t\t\t\t\t<SC.InputContainer\n\t\t\t\t\t\t\theight={props.height}\n\t\t\t\t\t\t\ttype={props.type}\n\t\t\t\t\t\t\tminHeight={minHeight}\n\t\t\t\t\t\t\tmaxHeight={maxHeight}\n\t\t\t\t\t\t\tautoGrow={autoGrow}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{getInputHTML()}\n\t\t\t\t\t\t</SC.InputContainer>\n\t\t\t\t\t)}\n\t\t\t\t\t{variant === 'small' && (\n\t\t\t\t\t\t<SC.InputContainerSmall height={props.height} type={props.type}>\n\t\t\t\t\t\t\t{getInputHTML()}\n\t\t\t\t\t\t</SC.InputContainerSmall>\n\t\t\t\t\t)}\n\t\t\t\t\t{variant === 'x-small' && (\n\t\t\t\t\t\t<SC.InputContainerXSmall height={props.height} type={props.type}>\n\t\t\t\t\t\t\t{getInputHTML()}\n\t\t\t\t\t\t</SC.InputContainerXSmall>\n\t\t\t\t\t)}\n\t\t\t\t\t{!!RightIcon && (\n\t\t\t\t\t\t<SC.IconHolder\n\t\t\t\t\t\t\tvariant={variant}\n\t\t\t\t\t\t\ticonSize={iconSize}\n\t\t\t\t\t\t\tonClick={() => executeCallback(rightIcon?.callback)}\n\t\t\t\t\t\t\tisLeft={false}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<RightIcon />\n\t\t\t\t\t\t</SC.IconHolder>\n\t\t\t\t\t)}\n\t\t\t\t\t{!!suffixText && (\n\t\t\t\t\t\t<SuffixHolder variant={variant}>{suffixText}</SuffixHolder>\n\t\t\t\t\t)}\n\t\t\t\t\t{button && button.text && (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tbuttonText={button.text}\n\t\t\t\t\t\t\tbuttonType={button.buttonType}\n\t\t\t\t\t\t\tonClick={() => executeCallback(button?.onClick)}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t\t{button && button.buttonProps && <Button {...button.buttonProps} />}\n\t\t\t\t</SC.InputWrapper>\n\t\t\t\t{!hideInputHeader && (!!labelText || !!maxCharLimit) && (\n\t\t\t\t\t<SC.InputHeader\n\t\t\t\t\t\tinvalid={isInvalid}\n\t\t\t\t\t\tmaxCharAlignment={maxCharAlignment}\n\t\t\t\t\t>\n\t\t\t\t\t\t{labelElement && labelElement}\n\t\t\t\t\t\t<div className=\"label__container\">\n\t\t\t\t\t\t\t{labelTextBold ? (\n\t\t\t\t\t\t\t\t<TitleSmall>\n\t\t\t\t\t\t\t\t\t{labelText}\n\t\t\t\t\t\t\t\t\t{isRequired ? <span>*</span> : ''}\n\t\t\t\t\t\t\t\t</TitleSmall>\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<BodySecondary>\n\t\t\t\t\t\t\t\t\t{labelText}\n\t\t\t\t\t\t\t\t\t{isRequired ? <span>*</span> : ''}\n\t\t\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t{props.tooltipText && (\n\t\t\t\t\t\t\t\t<Tooltip body={props.tooltipText} placement={'top'}>\n\t\t\t\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t\t\t\t<InfoIcon\n\t\t\t\t\t\t\t\t\t\t\tstyle={{ marginTop: -3 }}\n\t\t\t\t\t\t\t\t\t\t\twidth={18}\n\t\t\t\t\t\t\t\t\t\t\theight={18}\n\t\t\t\t\t\t\t\t\t\t\tcolor={\n\t\t\t\t\t\t\t\t\t\t\t\tisInvalid\n\t\t\t\t\t\t\t\t\t\t\t\t\t? COLORS.content.negative\n\t\t\t\t\t\t\t\t\t\t\t\t\t: COLORS.content.primary\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t{maxCharLimit > 0 && maxCharLimitPosition === 'TOP' && (\n\t\t\t\t\t\t\t<SC.MaxCharStyle style={maxCharStyle}>\n\t\t\t\t\t\t\t\t{(value ?? '').toString()?.length ?? 0}/{maxCharLimit}\n\t\t\t\t\t\t\t</SC.MaxCharStyle>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</SC.InputHeader>\n\t\t\t\t)}\n\t\t\t</SC.RootContainer>\n\t\t);\n\t},\n);\n\nInput.displayName = 'Input';\n"],"names":["Input","forwardRef","props","fRef","placeholder","leftIcon","rightIcon","labelText","maxCharLimit","isRequired","hintText","type","state","validate","variant","button","suffixText","prefixText","onChangeText","value","noErrorHint","reset","rangeValidation","noKeyDownChange","version","noMaxCharCheck","labelElement","autoGrow","minHeight","maxHeight","labelTextBold","truncateText","maxCharLimitPosition","maxCharStyle","hightlightInputColor","onKeyDownEvent","hideInputHeader","hideBorder","inputWrapperStyles","minCharsToTrigger","maxCharAlignment","isDisabled","allowUnsafeInput","leftIconStyle","LeftIcon","RightIcon","isInvalid","setIsInvalid","useState","isActive","setIsActive","errorMessage","setErrorMessage","iconSize","stylesFromOutside","useContext","InputStyleContext","inputValue","setInputValue","_ref","useRef","inputRef","useEffect","numberInput","onWheel","executeCallback","cb","params","isFunction","getMaxChar","onKeyDown","e","MAX_CHAR_LIMIT","KEY_CODES_TO_BE_EXCLUDED","MIN_CHAR_LIMIT","inputText","event","onChange","shouldSanitizeForType","sanitizeUnsafeInput","validateFunction","validateInput","isValid","error","onFocus","onBlur","getInputHTML","jsxDEV","Fragment","this","SC.RootContainer","SC.InputFooter","ErrorIcon","SC.MaxCharStyle","SC.InputWrapper","SC.IconHolder","PrefixHolder","SC.InputContainer","SC.InputContainerSmall","SC.InputContainerXSmall","SuffixHolder","Button","SC.InputHeader","TitleSmall","BodySecondary","Tooltip","InfoIcon","COLORS"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Input.js","sources":["../../../../src/components/input/Input.tsx"],"sourcesContent":["import InfoIcon from '@src/assets/icons/info.svg';\nimport React, {\n\tforwardRef,\n\tMutableRefObject,\n\tRef,\n\tuseContext,\n\tuseEffect,\n\tuseRef,\n\tuseState,\n} from 'react';\nimport { Button } from '@src/components/button';\nimport {\n\tisFunction,\n\tsanitizeUnsafeInput,\n\tshouldSanitizeForType,\n\tvalidateInput,\n} from '@src/components/input/Input-helper';\nimport { Tooltip } from '@src/components/tooltips';\nimport { BodySecondary, TitleSmall } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport ErrorIcon from '../../assets/icons/errorInfo.svg';\nimport { InputStyleContext } from './context/InputStyleProvider';\nimport { InputProps, InputTypeI, InputVariant } from './Input.model';\nimport * as SC from './Input.styled';\nimport { PrefixHolder, SuffixHolder } from './Input.styled';\n\nexport const Input = forwardRef(\n\t(\n\t\tprops: InputProps,\n\t\tfRef: React.ForwardedRef<HTMLInputElement | HTMLTextAreaElement | null>,\n\t) => {\n\t\tconst {\n\t\t\tplaceholder,\n\t\t\tleftIcon,\n\t\t\trightIcon,\n\t\t\tlabelText,\n\t\t\tmaxCharLimit,\n\t\t\tisRequired,\n\t\t\thintText,\n\t\t\ttype,\n\t\t\tstate,\n\t\t\tvalidate,\n\t\t\tvariant,\n\t\t\tbutton,\n\t\t\tsuffixText,\n\t\t\tprefixText,\n\t\t\tonChangeText,\n\t\t\tvalue,\n\t\t\tnoErrorHint,\n\t\t\treset,\n\t\t\trangeValidation,\n\t\t\tnoKeyDownChange,\n\t\t\tversion,\n\t\t\tnoMaxCharCheck,\n\t\t\tlabelElement,\n\t\t\tautoGrow,\n\t\t\tminHeight,\n\t\t\tmaxHeight,\n\t\t\tlabelTextBold,\n\t\t\ttruncateText,\n\t\t\tmaxCharLimitPosition,\n\t\t\tmaxCharStyle,\n\t\t\thightlightInputColor,\n\t\t\tonKeyDownEvent,\n\t\t\thideInputHeader,\n\t\t\thideBorder,\n\t\t\tinputWrapperStyles,\n\t\t\tminCharsToTrigger,\n\t\t\tmaxCharAlignment,\n\t\t\tisDisabled = false,\n\t\t\tsolidDisabled = false,\n\t\t\tallowUnsafeInput,\n\t\t\tleftIconStyle,\n\t\t} = {\n\t\t\tmaxCharLimit: 0,\n\t\t\ttype: 'text' as InputTypeI,\n\t\t\tvariant: 'default' as InputVariant,\n\t\t\tmaxCharLimitPosition: 'TOP',\n\t\t\tminCharsToTrigger: 0,\n\t\t\tmaxCharAlignment: false,\n\t\t\t...props,\n\t\t};\n\t\tconst LeftIcon = leftIcon?.icon;\n\t\tconst RightIcon = rightIcon?.icon;\n\t\tconst [isInvalid, setIsInvalid] = useState<boolean>(false);\n\t\tconst [isActive, setIsActive] = useState<boolean>(false);\n\t\tconst [errorMessage, setErrorMessage] = useState<string>();\n\t\tconst iconSize =\n\t\t\tvariant === 'x-small' ? '12px' : variant === 'small' ? '18px' : '22px';\n\t\tconst stylesFromOutside = useContext(InputStyleContext);\n\t\tconst [inputValue, setInputValue] = useState<string>('');\n\t\tconst _ref = useRef<HTMLInputElement | HTMLTextAreaElement>(null);\n\t\tconst inputRef: MutableRefObject<HTMLInputElement | HTMLTextAreaElement> =\n\t\t\t(fRef ?? _ref) as MutableRefObject<\n\t\t\t\tHTMLInputElement | HTMLTextAreaElement\n\t\t\t>;\n\n\t\tuseEffect(() => {\n\t\t\tsetInputValue(value || '');\n\t\t\tif (!value && autoGrow) {\n\t\t\t\tinputRef.current.style.height = minHeight || '48px';\n\t\t\t}\n\t\t}, [value]);\n\n\t\tuseEffect(() => {\n\t\t\tif (!inputRef.current) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tprops.onReferenceInit?.(inputRef.current);\n\t\t}, [inputRef]);\n\n\t\tuseEffect(() => {\n\t\t\tconst numberInput = inputRef.current;\n\t\t\tif (numberInput && ['phonenumber', 'zip', 'number'].includes(type)) {\n\t\t\t\tnumberInput.addEventListener('wheel', onWheel, { passive: false });\n\n\t\t\t\treturn () => {\n\t\t\t\t\tnumberInput.removeEventListener('wheel', onWheel);\n\t\t\t\t};\n\t\t\t}\n\t\t}, []);\n\n\t\tuseEffect(() => {\n\t\t\tif (!reset) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tsetInputValue('');\n\t\t}, [reset]);\n\n\t\tuseEffect(() => {\n\t\t\tsetIsActive(!!props.isActive);\n\t\t\tif (props.isActive) {\n\t\t\t\tinputRef.current?.focus();\n\t\t\t}\n\t\t}, [props.isActive]);\n\n\t\tuseEffect(() => {\n\t\t\tsetErrorMessage(props.errorMessage);\n\t\t}, [props.errorMessage]);\n\n\t\tuseEffect(() => {\n\t\t\tsetIsInvalid(false);\n\t\t\tif (\n\t\t\t\tprops.state === 'invalid' ||\n\t\t\t\terrorMessage ||\n\t\t\t\tprops.state === 'disabled-invalid'\n\t\t\t) {\n\t\t\t\tsetIsInvalid(true);\n\t\t\t}\n\t\t\tif (props.state === 'active') {\n\t\t\t\tinputRef.current?.focus();\n\t\t\t}\n\t\t}, [props.state, errorMessage]);\n\n\t\tuseEffect(() => {\n\t\t\tsetIsInvalid(!!errorMessage || props.state === 'invalid');\n\t\t}, [errorMessage, props.state]);\n\n\t\tconst executeCallback = (cb: any, ...params: any[]): void => {\n\t\t\tif (!isFunction(cb)) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tcb(...params);\n\t\t};\n\n\t\tconst getMaxChar = () => {\n\t\t\tif (type === 'zip') {\n\t\t\t\treturn 6;\n\t\t\t}\n\t\t\treturn 2000;\n\t\t};\n\n\t\tconst onKeyDown = (e) => {\n\t\t\tconst MAX_CHAR_LIMIT = maxCharLimit !== 0 ? maxCharLimit : getMaxChar();\n\t\t\tconst KEY_CODES_TO_BE_EXCLUDED = [8];\n\t\t\tconst MIN_CHAR_LIMIT = minCharsToTrigger;\n\t\t\tconst inputText = e.target.value;\n\t\t\tif (\n\t\t\t\tonKeyDownEvent &&\n\t\t\t\t(!inputText.length || inputText.length >= MIN_CHAR_LIMIT)\n\t\t\t) {\n\t\t\t\tonKeyDownEvent(e);\n\t\t\t}\n\n\t\t\tif (\n\t\t\t\t!noKeyDownChange &&\n\t\t\t\t(!inputText.length || inputText.length >= MIN_CHAR_LIMIT)\n\t\t\t) {\n\t\t\t\tonChangeText(value || '', e);\n\t\t\t}\n\t\t\tif (noMaxCharCheck) return;\n\n\t\t\tif (\n\t\t\t\t!KEY_CODES_TO_BE_EXCLUDED.includes(e.which) &&\n\t\t\t\tMAX_CHAR_LIMIT > 0 &&\n\t\t\t\tinputText.length >= MAX_CHAR_LIMIT\n\t\t\t) {\n\t\t\t\te.preventDefault();\n\t\t\t}\n\t\t};\n\n\t\tconst onWheel = (event) => {\n\t\t\tevent.preventDefault(); // Prevent the default scroll behavior\n\t\t};\n\n\t\tconst onChange = (e) => {\n\t\t\tlet inputText = e.target.value;\n\t\t\tconst MAX_CHAR_LIMIT =\n\t\t\t\tmaxCharLimit !== 0 ? maxCharLimit + 1 : getMaxChar();\n\t\t\tconst MIN_CHAR_LIMIT = minCharsToTrigger;\n\n\t\t\tif (!allowUnsafeInput && shouldSanitizeForType(type)) {\n\t\t\t\tinputText = sanitizeUnsafeInput(inputText);\n\t\t\t}\n\n\t\t\tif (\n\t\t\t\t!noMaxCharCheck &&\n\t\t\t\tMAX_CHAR_LIMIT > 0 &&\n\t\t\t\tinputText.length >= MAX_CHAR_LIMIT\n\t\t\t) {\n\t\t\t\t// letting user to copy paste text upto max limit instead of blank action\n\t\t\t\tinputText = inputText.substring(0, MAX_CHAR_LIMIT - 1);\n\t\t\t}\n\n\t\t\tif (!props.textControl) {\n\t\t\t\tsetInputValue(inputText || '');\n\t\t\t}\n\t\t\tif (MIN_CHAR_LIMIT && inputText && inputText.length < MIN_CHAR_LIMIT) {\n\t\t\t\t// if minCharsToTrigger exists and is not reached, do nothing\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tonChangeText(inputText, e);\n\t\t\tif (autoGrow) {\n\t\t\t\tinputRef.current.style.height = `${inputRef.current.scrollHeight}px`;\n\t\t\t\tif (!inputText) {\n\t\t\t\t\tinputRef.current.style.height = minHeight || '48px';\n\t\t\t\t}\n\t\t\t}\n\t\t\tconst validateFunction = validate || validateInput;\n\t\t\tif (!validateFunction || !isFunction(validateFunction)) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tconst [isValid, error] = validateFunction(\n\t\t\t\tinputText,\n\t\t\t\ttype,\n\t\t\t\trangeValidation,\n\t\t\t);\n\n\t\t\tsetIsInvalid(!isValid);\n\t\t\tsetErrorMessage(props.errorMessage ? props.errorMessage : error);\n\t\t};\n\n\t\tconst onFocus = (e) => {\n\t\t\tif (!props.skipFocus) {\n\t\t\t\tsetIsActive(true);\n\t\t\t}\n\t\t\texecuteCallback(props.onFocus?.(e));\n\t\t};\n\n\t\tconst onBlur = (e) => {\n\t\t\tif (!props.skipFocus) {\n\t\t\t\tsetIsActive(false);\n\t\t\t}\n\t\t\texecuteCallback(props.onBlur?.(e));\n\t\t};\n\n\t\tconst getInputHTML = () => {\n\t\t\treturn (\n\t\t\t\t<>\n\t\t\t\t\t{type !== 'multiline' && (\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\tclassName={truncateText ? 'truncate-class' : ''}\n\t\t\t\t\t\t\tdata-test={props['data-test']}\n\t\t\t\t\t\t\tid={props.id}\n\t\t\t\t\t\t\tstyle={stylesFromOutside?.input ?? {}}\n\t\t\t\t\t\t\tref={inputRef as Ref<HTMLInputElement>}\n\t\t\t\t\t\t\tdisabled={isDisabled}\n\t\t\t\t\t\t\ttype={\n\t\t\t\t\t\t\t\t['phonenumber', 'zip', 'number'].includes(type)\n\t\t\t\t\t\t\t\t\t? 'number'\n\t\t\t\t\t\t\t\t\t: type\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tvalue={inputValue}\n\t\t\t\t\t\t\tonFocus={(e) => onFocus(e)}\n\t\t\t\t\t\t\tonBlur={(e) => onBlur(e)}\n\t\t\t\t\t\t\tplaceholder={placeholder || 'Enter here'}\n\t\t\t\t\t\t\tonChange={onChange}\n\t\t\t\t\t\t\tonClick={(e) => executeCallback(props.onClick)}\n\t\t\t\t\t\t\tonKeyDown={(e) => onKeyDown(e)}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t\t{type === 'multiline' && (\n\t\t\t\t\t\t<textarea\n\t\t\t\t\t\t\tdata-test={props['data-test']}\n\t\t\t\t\t\t\tvalue={inputValue}\n\t\t\t\t\t\t\tref={inputRef as Ref<HTMLTextAreaElement>}\n\t\t\t\t\t\t\tonFocus={(e) => onFocus(e)}\n\t\t\t\t\t\t\tonBlur={(e) => onBlur(e)}\n\t\t\t\t\t\t\tonClick={(e) => executeCallback(props.onClick)}\n\t\t\t\t\t\t\tdisabled={isDisabled}\n\t\t\t\t\t\t\tplaceholder={placeholder || 'Enter here'}\n\t\t\t\t\t\t\tonChange={onChange}\n\t\t\t\t\t\t\tonKeyDown={(e) => onKeyDown(e)}\n\t\t\t\t\t\t\tmaxLength={maxCharLimit > 0 ? maxCharLimit : undefined}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t</>\n\t\t\t);\n\t\t};\n\n\t\treturn (\n\t\t\t<SC.RootContainer\n\t\t\t\twidth={props.width}\n\t\t\t\theight={props.height}\n\t\t\t\tstate={state}\n\t\t\t\tsolidDisabled={solidDisabled}\n\t\t\t\ttype={type}\n\t\t\t\tstyle={stylesFromOutside?.RootContainer ?? {}}\n\t\t\t>\n\t\t\t\t<div className=\"flex-align-center\">\n\t\t\t\t\t{!noErrorHint && (!!hintText || !!errorMessage) && (\n\t\t\t\t\t\t<SC.InputFooter invalid={!!errorMessage}>\n\t\t\t\t\t\t\t{!!errorMessage && <ErrorIcon width={16} height={16} />}\n\t\t\t\t\t\t\t{errorMessage || hintText}\n\t\t\t\t\t\t</SC.InputFooter>\n\t\t\t\t\t)}\n\t\t\t\t\t{maxCharLimit > 0 && maxCharLimitPosition === 'BOTTOM' && (\n\t\t\t\t\t\t<SC.MaxCharStyle position={'BOTTOM'} style={maxCharStyle}>\n\t\t\t\t\t\t\t{(value ?? '').toString()?.length ?? 0}/{maxCharLimit}\n\t\t\t\t\t\t</SC.MaxCharStyle>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t\t<SC.InputWrapper\n\t\t\t\t\tvariant={variant}\n\t\t\t\t\tstate={state}\n\t\t\t\t\tsolidDisabled={solidDisabled}\n\t\t\t\t\twidth={props.width}\n\t\t\t\t\tisActive={state === 'active' || isActive}\n\t\t\t\t\tisInvalid={isInvalid}\n\t\t\t\t\tstyle={stylesFromOutside?.InputWrapper ?? inputWrapperStyles ?? {}}\n\t\t\t\t\tversion={version}\n\t\t\t\t\theight={props.height}\n\t\t\t\t\thightlightInputColor={hightlightInputColor}\n\t\t\t\t\thideBorder={hideBorder}\n\t\t\t\t>\n\t\t\t\t\t{!!LeftIcon && (\n\t\t\t\t\t\t<SC.IconHolder\n\t\t\t\t\t\t\tvariant={variant}\n\t\t\t\t\t\t\ticonSize={iconSize}\n\t\t\t\t\t\t\tonClick={() => executeCallback(leftIcon?.callback)}\n\t\t\t\t\t\t\tisLeft={true}\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t...(stylesFromOutside?.IconHolder ?? {}),\n\t\t\t\t\t\t\t\t...leftIconStyle,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<LeftIcon />\n\t\t\t\t\t\t</SC.IconHolder>\n\t\t\t\t\t)}\n\t\t\t\t\t{!!prefixText && (\n\t\t\t\t\t\t<PrefixHolder variant={variant}>{prefixText}</PrefixHolder>\n\t\t\t\t\t)}\n\t\t\t\t\t{variant === 'default' && (\n\t\t\t\t\t\t<SC.InputContainer\n\t\t\t\t\t\t\theight={props.height}\n\t\t\t\t\t\t\ttype={props.type}\n\t\t\t\t\t\t\tminHeight={minHeight}\n\t\t\t\t\t\t\tmaxHeight={maxHeight}\n\t\t\t\t\t\t\tautoGrow={autoGrow}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{getInputHTML()}\n\t\t\t\t\t\t</SC.InputContainer>\n\t\t\t\t\t)}\n\t\t\t\t\t{variant === 'small' && (\n\t\t\t\t\t\t<SC.InputContainerSmall height={props.height} type={props.type}>\n\t\t\t\t\t\t\t{getInputHTML()}\n\t\t\t\t\t\t</SC.InputContainerSmall>\n\t\t\t\t\t)}\n\t\t\t\t\t{variant === 'x-small' && (\n\t\t\t\t\t\t<SC.InputContainerXSmall height={props.height} type={props.type}>\n\t\t\t\t\t\t\t{getInputHTML()}\n\t\t\t\t\t\t</SC.InputContainerXSmall>\n\t\t\t\t\t)}\n\t\t\t\t\t{!!RightIcon && (\n\t\t\t\t\t\t<SC.IconHolder\n\t\t\t\t\t\t\tvariant={variant}\n\t\t\t\t\t\t\ticonSize={iconSize}\n\t\t\t\t\t\t\tonClick={() => executeCallback(rightIcon?.callback)}\n\t\t\t\t\t\t\tisLeft={false}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<RightIcon />\n\t\t\t\t\t\t</SC.IconHolder>\n\t\t\t\t\t)}\n\t\t\t\t\t{!!suffixText && (\n\t\t\t\t\t\t<SuffixHolder variant={variant}>{suffixText}</SuffixHolder>\n\t\t\t\t\t)}\n\t\t\t\t\t{button && button.text && (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tbuttonText={button.text}\n\t\t\t\t\t\t\tbuttonType={button.buttonType}\n\t\t\t\t\t\t\tonClick={() => executeCallback(button?.onClick)}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t\t{button && button.buttonProps && <Button {...button.buttonProps} />}\n\t\t\t\t</SC.InputWrapper>\n\t\t\t\t{!hideInputHeader && (!!labelText || !!maxCharLimit) && (\n\t\t\t\t\t<SC.InputHeader\n\t\t\t\t\t\tinvalid={isInvalid}\n\t\t\t\t\t\tmaxCharAlignment={maxCharAlignment}\n\t\t\t\t\t>\n\t\t\t\t\t\t{labelElement && labelElement}\n\t\t\t\t\t\t<div className=\"label__container\">\n\t\t\t\t\t\t\t{labelTextBold ? (\n\t\t\t\t\t\t\t\t<TitleSmall>\n\t\t\t\t\t\t\t\t\t{labelText}\n\t\t\t\t\t\t\t\t\t{isRequired ? <span>*</span> : ''}\n\t\t\t\t\t\t\t\t</TitleSmall>\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<BodySecondary>\n\t\t\t\t\t\t\t\t\t{labelText}\n\t\t\t\t\t\t\t\t\t{isRequired ? <span>*</span> : ''}\n\t\t\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t{props.tooltipText && (\n\t\t\t\t\t\t\t\t<Tooltip body={props.tooltipText} placement={'top'}>\n\t\t\t\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t\t\t\t<InfoIcon\n\t\t\t\t\t\t\t\t\t\t\tstyle={{ marginTop: -3 }}\n\t\t\t\t\t\t\t\t\t\t\twidth={18}\n\t\t\t\t\t\t\t\t\t\t\theight={18}\n\t\t\t\t\t\t\t\t\t\t\tcolor={\n\t\t\t\t\t\t\t\t\t\t\t\tisInvalid\n\t\t\t\t\t\t\t\t\t\t\t\t\t? COLORS.content.negative\n\t\t\t\t\t\t\t\t\t\t\t\t\t: COLORS.content.primary\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t{maxCharLimit > 0 && maxCharLimitPosition === 'TOP' && (\n\t\t\t\t\t\t\t<SC.MaxCharStyle style={maxCharStyle}>\n\t\t\t\t\t\t\t\t{(value ?? '').toString()?.length ?? 0}/{maxCharLimit}\n\t\t\t\t\t\t\t</SC.MaxCharStyle>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</SC.InputHeader>\n\t\t\t\t)}\n\t\t\t</SC.RootContainer>\n\t\t);\n\t},\n);\n\nInput.displayName = 'Input';\n"],"names":["Input","forwardRef","props","fRef","placeholder","leftIcon","rightIcon","labelText","maxCharLimit","isRequired","hintText","type","state","validate","variant","button","suffixText","prefixText","onChangeText","value","noErrorHint","reset","rangeValidation","noKeyDownChange","version","noMaxCharCheck","labelElement","autoGrow","minHeight","maxHeight","labelTextBold","truncateText","maxCharLimitPosition","maxCharStyle","hightlightInputColor","onKeyDownEvent","hideInputHeader","hideBorder","inputWrapperStyles","minCharsToTrigger","maxCharAlignment","isDisabled","solidDisabled","allowUnsafeInput","leftIconStyle","LeftIcon","RightIcon","isInvalid","setIsInvalid","useState","isActive","setIsActive","errorMessage","setErrorMessage","iconSize","stylesFromOutside","useContext","InputStyleContext","inputValue","setInputValue","_ref","useRef","inputRef","useEffect","numberInput","onWheel","executeCallback","cb","params","isFunction","getMaxChar","onKeyDown","e","MAX_CHAR_LIMIT","KEY_CODES_TO_BE_EXCLUDED","MIN_CHAR_LIMIT","inputText","event","onChange","shouldSanitizeForType","sanitizeUnsafeInput","validateFunction","validateInput","isValid","error","onFocus","onBlur","getInputHTML","jsxDEV","Fragment","this","SC.RootContainer","SC.InputFooter","ErrorIcon","SC.MaxCharStyle","SC.InputWrapper","SC.IconHolder","PrefixHolder","SC.InputContainer","SC.InputContainerSmall","SC.InputContainerXSmall","SuffixHolder","Button","SC.InputHeader","TitleSmall","BodySecondary","Tooltip","InfoIcon","COLORS"],"mappings":"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"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("styled-components"),n=require("../TypographyStyle.js"),e=require("../../constants/Theme.js"),d=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},i=d(a),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("styled-components"),n=require("../TypographyStyle.js"),e=require("../../constants/Theme.js"),d=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},i=d(a),s=({isActive:t,isInvalid:r,hightlightInputColor:o})=>t?o||e.COLORS.stroke.brand:r?e.COLORS.stroke.negative.vibrant:e.COLORS.stroke.primary,h=t=>t.hideBorder?0:t.version==="2.0"?.5:1,x=i.default.div`
|
|
2
2
|
border-radius: ${t=>t.version==="2.0"?8:4}px;
|
|
3
3
|
background: ${t=>["disabled","read-only","disabled-invalid"].includes(t.state)?e.COLORS.background.base:"#fff"};
|
|
4
|
-
border: ${t=>
|
|
5
|
-
${t=>
|
|
4
|
+
border: ${t=>h(t)}px solid
|
|
5
|
+
${t=>s({isActive:t.isActive,isInvalid:t.isInvalid,hightlightInputColor:t.hightlightInputColor})};
|
|
6
6
|
${t=>t.isActive?`box-shadow: inset 0px 0px 0px 1px ${t.hightlightInputColor?t.hightlightInputColor:e.COLORS.stroke.brand};`:""};
|
|
7
7
|
padding: ${t=>t.variant==="small"?"6px":"8px"};
|
|
8
8
|
height: ${t=>t.height||"100%"};
|
|
@@ -13,9 +13,15 @@
|
|
|
13
13
|
gap: 8px;
|
|
14
14
|
overflow: hidden;
|
|
15
15
|
|
|
16
|
-
${t=>t.state==="read-only"?"opacity: 0.7":""};
|
|
16
|
+
${t=>t.state==="read-only"&&!t.solidDisabled?"opacity: 0.7":""};
|
|
17
17
|
${t=>t.state==="read-only"?"pointer-events: none":""};
|
|
18
|
-
|
|
18
|
+
${t=>t.solidDisabled&&["disabled","read-only","disabled-invalid"].includes(t.state)?a.css`
|
|
19
|
+
input,
|
|
20
|
+
textarea {
|
|
21
|
+
color: ${e.COLORS.content.secondary};
|
|
22
|
+
}
|
|
23
|
+
`:""};
|
|
24
|
+
`,c=i.default.div`
|
|
19
25
|
min-height: ${t=>t.iconSize};
|
|
20
26
|
min-width: ${t=>t.iconSize};
|
|
21
27
|
display: flex;
|
|
@@ -60,7 +66,7 @@
|
|
|
60
66
|
min-height: 100px;
|
|
61
67
|
resize: none;
|
|
62
68
|
}
|
|
63
|
-
`,
|
|
69
|
+
`,g=i.default(n.BodyPrimary)`
|
|
64
70
|
${l};
|
|
65
71
|
${t=>t.height&&t.type!=="multiline"?{height:t.height}:{}};
|
|
66
72
|
|
|
@@ -82,7 +88,7 @@
|
|
|
82
88
|
}
|
|
83
89
|
}
|
|
84
90
|
${t=>t.height&&t.type!=="multiline"?{height:t.height}:{}};
|
|
85
|
-
`,
|
|
91
|
+
`,m=i.default(n.BodyCaption)`
|
|
86
92
|
${l};
|
|
87
93
|
input {
|
|
88
94
|
min-height: 16px;
|
|
@@ -93,7 +99,7 @@
|
|
|
93
99
|
}
|
|
94
100
|
}
|
|
95
101
|
${t=>t.height&&t.type!=="multiline"?{height:t.height}:{}};
|
|
96
|
-
`,
|
|
102
|
+
`,p=i.default.div`
|
|
97
103
|
display: flex;
|
|
98
104
|
justify-content: space-between;
|
|
99
105
|
${t=>t.maxCharAlignment?"align-items: flex-end;":""}
|
|
@@ -132,7 +138,7 @@
|
|
|
132
138
|
${t=>t.width?`width: ${t.width}`:""};
|
|
133
139
|
${t=>t.height&&t.type=="multiline"?`height: ${t.height}`:""};
|
|
134
140
|
${t=>t.state==="disabled"||t.state==="disabled-invalid"?a.css`
|
|
135
|
-
opacity:
|
|
141
|
+
opacity: ${t.solidDisabled?1:.5};
|
|
136
142
|
pointer-events: none;
|
|
137
143
|
`:""};
|
|
138
144
|
display: flex;
|
|
@@ -159,5 +165,5 @@
|
|
|
159
165
|
margin-right: ${t=>t.variant&&["small","x-small"].includes(t.variant)?"":"16px"};
|
|
160
166
|
font-size: ${t=>t.variant==="x-small"?"12px":t.variant==="small"?"14px":"16px"};
|
|
161
167
|
line-height: ${t=>t.variant==="x-small"?"16px":t.variant==="small"?"20px":"24px"};
|
|
162
|
-
`;exports.IconHolder=
|
|
168
|
+
`;exports.IconHolder=c;exports.InputContainer=g;exports.InputContainerSmall=u;exports.InputContainerXSmall=m;exports.InputFooter=v;exports.InputHeader=p;exports.InputWrapper=x;exports.MaxCharStyle=f;exports.PrefixHolder=$;exports.RootContainer=y;exports.SuffixHolder=b;
|
|
163
169
|
//# sourceMappingURL=Input.styled.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.styled.js","sources":["../../../../src/components/input/Input.styled.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport {\n\tBodyCaption,\n\tBodyPrimary,\n\tBodySecondary,\n} from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport { InputStateI, InputTypeI, InputVariant } from './Input.model';\n\nconst getBorderColor = ({ isActive, isInvalid, hightlightInputColor }) => {\n\tif (isActive) {\n\t\treturn hightlightInputColor ? hightlightInputColor : COLORS.stroke.brand;\n\t} else if (isInvalid) {\n\t\treturn COLORS.stroke.negative.vibrant;\n\t}\n\treturn COLORS.stroke.primary;\n};\n\nconst getBorderWidth = (props: {\n\tversion?: '1.0' | '2.0' | '3.0';\n\thideBorder?: boolean;\n}) => {\n\treturn props.hideBorder ? 0 : props.version === '2.0' ? 0.5 : 1;\n};\n\nexport const InputWrapper = styled.div<{\n\twidth?: string;\n\theight?: string;\n\tisActive?: boolean;\n\tisInvalid?: boolean;\n\tstate?: InputStateI;\n\tvariant?: InputVariant;\n\tversion?: '1.0' | '2.0' | '3.0';\n\thightlightInputColor?: string;\n\thideBorder?: boolean;\n}>`\n\tborder-radius: ${(props) => (props.version === '2.0' ? 8 : 4)}px;\n\tbackground: ${(props) =>\n\t\t['disabled', 'read-only', 'disabled-invalid'].includes(props.state!)\n\t\t\t? COLORS.background.base\n\t\t\t: '#fff'};\n\tborder: ${(props) => getBorderWidth(props)}px solid\n\t\t${(props) =>\n\t\t\tgetBorderColor({\n\t\t\t\tisActive: props.isActive,\n\t\t\t\tisInvalid: props.isInvalid,\n\t\t\t\thightlightInputColor: props.hightlightInputColor,\n\t\t\t})};\n\t${(props) =>\n\t\tprops.isActive\n\t\t\t? `box-shadow: inset 0px 0px 0px 1px ${\n\t\t\t\t\tprops.hightlightInputColor\n\t\t\t\t\t\t? props.hightlightInputColor\n\t\t\t\t\t\t: COLORS.stroke.brand\n\t\t\t };`\n\t\t\t: ''};\n\tpadding: ${(props) => (props.variant === 'small' ? '6px' : '8px')};\n\theight: ${(props) => props.height || '100%'};\n\t${(props) =>\n\t\tprops.variant && ['small', 'x-small'].includes(props.variant)\n\t\t\t? 'max-height: 44px'\n\t\t\t: 'min-height: 48px'};\n\tdisplay: flex;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tgap: 8px;\n\toverflow: hidden;\n\n\t${(props) => (props.state === 'read-only' ? 'opacity: 0.7' : '')};\n\t${(props) => (props.state === 'read-only' ? 'pointer-events: none' : '')};\n`;\n\nexport const IconHolder = styled.div<{\n\tisLeft?: boolean;\n\ticonSize?: string;\n\tvariant?: InputVariant;\n}>`\n\tmin-height: ${(props) => props.iconSize};\n\tmin-width: ${(props) => props.iconSize};\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\toverflow: hidden;\n\t${(props) =>\n\t\tprops.isLeft\n\t\t\t? `margin-left:${\n\t\t\t\t\tprops.variant && ['small', 'x-small'].includes(props.variant)\n\t\t\t\t\t\t? '0px'\n\t\t\t\t\t\t: '8px'\n\t\t\t }`\n\t\t\t: `margin-right: ${\n\t\t\t\t\tprops.variant && ['small', 'x-small'].includes(props.variant)\n\t\t\t\t\t\t? '0px'\n\t\t\t\t\t\t: '8px'\n\t\t\t }`};\n`;\n\nconst inputCss = css`\n\tflex-grow: 1;\n\toverflow: hidden;\n\theight: 100%;\n\n\tinput,\n\ttextarea {\n\t\tdisplay: block;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tborder: none;\n\t\tmin-height: 24px;\n\t\toutline: none;\n\t\tfont-size: inherit;\n\t\tline-height: inherit;\n\t\tfont-weight: inherit;\n\t\tpadding: 0px;\n\t\tmargin: 0px;\n\t\tbackground: transparent;\n\t\t&::placeholder {\n\t\t\tfont-family: Inter;\n\t\t\tcolor: ${COLORS.content.placeholder};\n\t\t}\n\n\t\t&::-webkit-outer-spin-button,\n\t\t&::-webkit-inner-spin-button {\n\t\t\t-webkit-appearance: none;\n\t\t\tmargin: 0;\n\t\t}\n\t}\n\n\ttextarea {\n\t\theight: 100%;\n\t\tfont-family: Inter;\n\t\tmin-height: 100px;\n\t\tresize: none;\n\t}\n`;\n\nexport const InputContainer = styled(BodyPrimary)<{\n\theight?: string;\n\ttype?: InputTypeI;\n\tautoGrow?: boolean;\n\tminHeight?: string;\n\tmaxHeight?: string;\n}>`\n\t${inputCss};\n\t${(props) =>\n\t\tprops.height && props.type !== 'multiline' ? { height: props.height } : {}};\n\n\t${(props) =>\n\t\tprops.autoGrow &&\n\t\tprops.minHeight &&\n\t\t`\n\ttextarea {\n\t\theight: ${props.minHeight};\n\t\tmin-height: ${props.minHeight};\n\t\tmax-height: ${props.maxHeight || '100px'};\n\t}\n\t`}\n`;\n\nexport const InputContainerSmall = styled(BodySecondary)<{\n\theight?: string;\n\ttype?: InputTypeI;\n}>`\n\t${inputCss};\n\tinput {\n\t\tmin-height: 20px;\n\t\t&::-webkit-outer-spin-button,\n\t\t&::-webkit-inner-spin-button {\n\t\t\t-webkit-appearance: none;\n\t\t\tmargin: 0;\n\t\t}\n\t}\n\t${(props) =>\n\t\tprops.height && props.type !== 'multiline' ? { height: props.height } : {}};\n`;\n\nexport const InputContainerXSmall = styled(BodyCaption)<{\n\theight?: string;\n\ttype?: InputTypeI;\n}>`\n\t${inputCss};\n\tinput {\n\t\tmin-height: 16px;\n\t\t&::-webkit-outer-spin-button,\n\t\t&::-webkit-inner-spin-button {\n\t\t\t-webkit-appearance: none;\n\t\t\tmargin: 0;\n\t\t}\n\t}\n\t${(props) =>\n\t\tprops.height && props.type !== 'multiline' ? { height: props.height } : {}};\n`;\n\nexport const InputHeader = styled.div<{\n\tinvalid?: boolean;\n\tmaxCharAlignment?: boolean;\n}>`\n\tdisplay: flex;\n\tjustify-content: space-between;\n\t${(props) => (props.maxCharAlignment ? 'align-items: flex-end;' : '')}\n\tmargin-bottom: 8px;\n\t.label__container {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tgap: 2px;\n\t\t> div:first-of-type {\n\t\t\t${(props) =>\n\t\t\t\tprops.invalid ? `color: ${COLORS.content.negative} !important` : ''};\n\t\t}\n\t}\n\n\tspan {\n\t\tcolor: ${COLORS.content.negative};\n\t\tpadding-left: 4px;\n\t}\n`;\n\nexport const MaxCharStyle = styled(BodySecondary)<{ position?: string }>`\n\tcolor: ${COLORS.content.secondary} !important;\n\tmargin-top: ${(props) => (props.position === 'BOTTOM' ? '8px' : '0px')};\n`;\n\nexport const InputFooter = styled(BodyCaption)<{ invalid?: boolean }>`\n\twhite-space: pre-wrap;\n\tmargin-top: 8px;\n\tcolor: ${(props) =>\n\t\tprops.invalid\n\t\t\t? COLORS.content.negative\n\t\t\t: COLORS.content.secondary} !important;\n\t/* position: absolute; */\n\t/* left: 0px;\n\ttop: 100%; */\n\tdisplay: flex !important;\n\tgap: 6px;\n\tmin-height: 16px;\n\t> svg {\n\t\twidth: 16px;\n\t\theight: 16px;\n\t}\n`;\n\nexport const RootContainer = styled.div<{\n\twidth?: string;\n\theight?: string;\n\tstate?: InputStateI;\n\ttype: InputTypeI;\n}>`\n\t${(props) => (props.width ? `width: ${props.width}` : '')};\n\t${(props) =>\n\t\tprops.height && props.type == 'multiline' ? `height: ${props.height}` : ''};\n\t${(props) =>\n\t\tprops.state === 'disabled' || props.state === 'disabled-invalid'\n\t\t\t? css`\n\t\t\t\t\topacity: 0.5;\n\t\t\t\t\tpointer-events: none;\n\t\t\t `\n\t\t\t: ''};\n\tdisplay: flex;\n\tflex-direction: column-reverse;\n\tposition: relative;\n\t.truncate-class {\n\t\tmax-width: 180px;\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t}\n\t.flex-align-center {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: space-between;\n\t}\n`;\n\nexport const PrefixHolder = styled(BodyPrimary)<{ variant?: InputVariant }>`\n\toverflow: unset;\n\tmargin-left: ${(props) =>\n\t\tprops.variant && ['small', 'x-small'].includes(props.variant)\n\t\t\t? ''\n\t\t\t: '16px'};\n\tfont-size: ${(props) =>\n\t\tprops.variant === 'x-small'\n\t\t\t? '12px'\n\t\t\t: props.variant === 'small'\n\t\t\t? '14px'\n\t\t\t: '16px'};\n\tline-height: ${(props) =>\n\t\tprops.variant === 'x-small'\n\t\t\t? '16px'\n\t\t\t: props.variant === 'small'\n\t\t\t? '20px'\n\t\t\t: '24px'};\n`;\n\nexport const SuffixHolder = styled(BodyPrimary)<{ variant?: InputVariant }>`\n\toverflow: unset;\n\tmargin-right: ${(props) =>\n\t\tprops.variant && ['small', 'x-small'].includes(props.variant)\n\t\t\t? ''\n\t\t\t: '16px'};\n\tfont-size: ${(props) =>\n\t\tprops.variant === 'x-small'\n\t\t\t? '12px'\n\t\t\t: props.variant === 'small'\n\t\t\t? '14px'\n\t\t\t: '16px'};\n\tline-height: ${(props) =>\n\t\tprops.variant === 'x-small'\n\t\t\t? '16px'\n\t\t\t: props.variant === 'small'\n\t\t\t? '20px'\n\t\t\t: '24px'};\n`;\n"],"names":["getBorderColor","isActive","isInvalid","hightlightInputColor","COLORS","getBorderWidth","props","InputWrapper","styled","IconHolder","inputCss","css","InputContainer","BodyPrimary","InputContainerSmall","BodySecondary","InputContainerXSmall","BodyCaption","InputHeader","MaxCharStyle","InputFooter","RootContainer","PrefixHolder","SuffixHolder"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Input.styled.js","sources":["../../../../src/components/input/Input.styled.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport {\n\tBodyCaption,\n\tBodyPrimary,\n\tBodySecondary,\n} from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport { InputStateI, InputTypeI, InputVariant } from './Input.model';\n\nconst getBorderColor = ({ isActive, isInvalid, hightlightInputColor }) => {\n\tif (isActive) {\n\t\treturn hightlightInputColor ? hightlightInputColor : COLORS.stroke.brand;\n\t} else if (isInvalid) {\n\t\treturn COLORS.stroke.negative.vibrant;\n\t}\n\treturn COLORS.stroke.primary;\n};\n\nconst getBorderWidth = (props: {\n\tversion?: '1.0' | '2.0' | '3.0';\n\thideBorder?: boolean;\n}) => {\n\treturn props.hideBorder ? 0 : props.version === '2.0' ? 0.5 : 1;\n};\n\nexport const InputWrapper = styled.div<{\n\twidth?: string;\n\theight?: string;\n\tisActive?: boolean;\n\tisInvalid?: boolean;\n\tstate?: InputStateI;\n\tvariant?: InputVariant;\n\tversion?: '1.0' | '2.0' | '3.0';\n\thightlightInputColor?: string;\n\thideBorder?: boolean;\n\tsolidDisabled?: boolean;\n}>`\n\tborder-radius: ${(props) => (props.version === '2.0' ? 8 : 4)}px;\n\tbackground: ${(props) =>\n\t\t['disabled', 'read-only', 'disabled-invalid'].includes(props.state!)\n\t\t\t? COLORS.background.base\n\t\t\t: '#fff'};\n\tborder: ${(props) => getBorderWidth(props)}px solid\n\t\t${(props) =>\n\t\t\tgetBorderColor({\n\t\t\t\tisActive: props.isActive,\n\t\t\t\tisInvalid: props.isInvalid,\n\t\t\t\thightlightInputColor: props.hightlightInputColor,\n\t\t\t})};\n\t${(props) =>\n\t\tprops.isActive\n\t\t\t? `box-shadow: inset 0px 0px 0px 1px ${\n\t\t\t\t\tprops.hightlightInputColor\n\t\t\t\t\t\t? props.hightlightInputColor\n\t\t\t\t\t\t: COLORS.stroke.brand\n\t\t\t };`\n\t\t\t: ''};\n\tpadding: ${(props) => (props.variant === 'small' ? '6px' : '8px')};\n\theight: ${(props) => props.height || '100%'};\n\t${(props) =>\n\t\tprops.variant && ['small', 'x-small'].includes(props.variant)\n\t\t\t? 'max-height: 44px'\n\t\t\t: 'min-height: 48px'};\n\tdisplay: flex;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tgap: 8px;\n\toverflow: hidden;\n\n\t${(props) =>\n\t\tprops.state === 'read-only' && !props.solidDisabled ? 'opacity: 0.7' : ''};\n\t${(props) => (props.state === 'read-only' ? 'pointer-events: none' : '')};\n\t${(props) =>\n\t\tprops.solidDisabled &&\n\t\t['disabled', 'read-only', 'disabled-invalid'].includes(props.state!)\n\t\t\t? css`\n\t\t\t\t\tinput,\n\t\t\t\t\ttextarea {\n\t\t\t\t\t\tcolor: ${COLORS.content.secondary};\n\t\t\t\t\t}\n\t\t\t `\n\t\t\t: ''};\n`;\n\nexport const IconHolder = styled.div<{\n\tisLeft?: boolean;\n\ticonSize?: string;\n\tvariant?: InputVariant;\n}>`\n\tmin-height: ${(props) => props.iconSize};\n\tmin-width: ${(props) => props.iconSize};\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\toverflow: hidden;\n\t${(props) =>\n\t\tprops.isLeft\n\t\t\t? `margin-left:${\n\t\t\t\t\tprops.variant && ['small', 'x-small'].includes(props.variant)\n\t\t\t\t\t\t? '0px'\n\t\t\t\t\t\t: '8px'\n\t\t\t }`\n\t\t\t: `margin-right: ${\n\t\t\t\t\tprops.variant && ['small', 'x-small'].includes(props.variant)\n\t\t\t\t\t\t? '0px'\n\t\t\t\t\t\t: '8px'\n\t\t\t }`};\n`;\n\nconst inputCss = css`\n\tflex-grow: 1;\n\toverflow: hidden;\n\theight: 100%;\n\n\tinput,\n\ttextarea {\n\t\tdisplay: block;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tborder: none;\n\t\tmin-height: 24px;\n\t\toutline: none;\n\t\tfont-size: inherit;\n\t\tline-height: inherit;\n\t\tfont-weight: inherit;\n\t\tpadding: 0px;\n\t\tmargin: 0px;\n\t\tbackground: transparent;\n\t\t&::placeholder {\n\t\t\tfont-family: Inter;\n\t\t\tcolor: ${COLORS.content.placeholder};\n\t\t}\n\n\t\t&::-webkit-outer-spin-button,\n\t\t&::-webkit-inner-spin-button {\n\t\t\t-webkit-appearance: none;\n\t\t\tmargin: 0;\n\t\t}\n\t}\n\n\ttextarea {\n\t\theight: 100%;\n\t\tfont-family: Inter;\n\t\tmin-height: 100px;\n\t\tresize: none;\n\t}\n`;\n\nexport const InputContainer = styled(BodyPrimary)<{\n\theight?: string;\n\ttype?: InputTypeI;\n\tautoGrow?: boolean;\n\tminHeight?: string;\n\tmaxHeight?: string;\n}>`\n\t${inputCss};\n\t${(props) =>\n\t\tprops.height && props.type !== 'multiline' ? { height: props.height } : {}};\n\n\t${(props) =>\n\t\tprops.autoGrow &&\n\t\tprops.minHeight &&\n\t\t`\n\ttextarea {\n\t\theight: ${props.minHeight};\n\t\tmin-height: ${props.minHeight};\n\t\tmax-height: ${props.maxHeight || '100px'};\n\t}\n\t`}\n`;\n\nexport const InputContainerSmall = styled(BodySecondary)<{\n\theight?: string;\n\ttype?: InputTypeI;\n}>`\n\t${inputCss};\n\tinput {\n\t\tmin-height: 20px;\n\t\t&::-webkit-outer-spin-button,\n\t\t&::-webkit-inner-spin-button {\n\t\t\t-webkit-appearance: none;\n\t\t\tmargin: 0;\n\t\t}\n\t}\n\t${(props) =>\n\t\tprops.height && props.type !== 'multiline' ? { height: props.height } : {}};\n`;\n\nexport const InputContainerXSmall = styled(BodyCaption)<{\n\theight?: string;\n\ttype?: InputTypeI;\n}>`\n\t${inputCss};\n\tinput {\n\t\tmin-height: 16px;\n\t\t&::-webkit-outer-spin-button,\n\t\t&::-webkit-inner-spin-button {\n\t\t\t-webkit-appearance: none;\n\t\t\tmargin: 0;\n\t\t}\n\t}\n\t${(props) =>\n\t\tprops.height && props.type !== 'multiline' ? { height: props.height } : {}};\n`;\n\nexport const InputHeader = styled.div<{\n\tinvalid?: boolean;\n\tmaxCharAlignment?: boolean;\n}>`\n\tdisplay: flex;\n\tjustify-content: space-between;\n\t${(props) => (props.maxCharAlignment ? 'align-items: flex-end;' : '')}\n\tmargin-bottom: 8px;\n\t.label__container {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tgap: 2px;\n\t\t> div:first-of-type {\n\t\t\t${(props) =>\n\t\t\t\tprops.invalid ? `color: ${COLORS.content.negative} !important` : ''};\n\t\t}\n\t}\n\n\tspan {\n\t\tcolor: ${COLORS.content.negative};\n\t\tpadding-left: 4px;\n\t}\n`;\n\nexport const MaxCharStyle = styled(BodySecondary)<{ position?: string }>`\n\tcolor: ${COLORS.content.secondary} !important;\n\tmargin-top: ${(props) => (props.position === 'BOTTOM' ? '8px' : '0px')};\n`;\n\nexport const InputFooter = styled(BodyCaption)<{ invalid?: boolean }>`\n\twhite-space: pre-wrap;\n\tmargin-top: 8px;\n\tcolor: ${(props) =>\n\t\tprops.invalid\n\t\t\t? COLORS.content.negative\n\t\t\t: COLORS.content.secondary} !important;\n\t/* position: absolute; */\n\t/* left: 0px;\n\ttop: 100%; */\n\tdisplay: flex !important;\n\tgap: 6px;\n\tmin-height: 16px;\n\t> svg {\n\t\twidth: 16px;\n\t\theight: 16px;\n\t}\n`;\n\nexport const RootContainer = styled.div<{\n\twidth?: string;\n\theight?: string;\n\tstate?: InputStateI;\n\ttype: InputTypeI;\n\tsolidDisabled?: boolean;\n}>`\n\t${(props) => (props.width ? `width: ${props.width}` : '')};\n\t${(props) =>\n\t\tprops.height && props.type == 'multiline' ? `height: ${props.height}` : ''};\n\t${(props) =>\n\t\tprops.state === 'disabled' || props.state === 'disabled-invalid'\n\t\t\t? css`\n\t\t\t\t\topacity: ${props.solidDisabled ? 1 : 0.5};\n\t\t\t\t\tpointer-events: none;\n\t\t\t `\n\t\t\t: ''};\n\tdisplay: flex;\n\tflex-direction: column-reverse;\n\tposition: relative;\n\t.truncate-class {\n\t\tmax-width: 180px;\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t}\n\t.flex-align-center {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: space-between;\n\t}\n`;\n\nexport const PrefixHolder = styled(BodyPrimary)<{ variant?: InputVariant }>`\n\toverflow: unset;\n\tmargin-left: ${(props) =>\n\t\tprops.variant && ['small', 'x-small'].includes(props.variant)\n\t\t\t? ''\n\t\t\t: '16px'};\n\tfont-size: ${(props) =>\n\t\tprops.variant === 'x-small'\n\t\t\t? '12px'\n\t\t\t: props.variant === 'small'\n\t\t\t? '14px'\n\t\t\t: '16px'};\n\tline-height: ${(props) =>\n\t\tprops.variant === 'x-small'\n\t\t\t? '16px'\n\t\t\t: props.variant === 'small'\n\t\t\t? '20px'\n\t\t\t: '24px'};\n`;\n\nexport const SuffixHolder = styled(BodyPrimary)<{ variant?: InputVariant }>`\n\toverflow: unset;\n\tmargin-right: ${(props) =>\n\t\tprops.variant && ['small', 'x-small'].includes(props.variant)\n\t\t\t? ''\n\t\t\t: '16px'};\n\tfont-size: ${(props) =>\n\t\tprops.variant === 'x-small'\n\t\t\t? '12px'\n\t\t\t: props.variant === 'small'\n\t\t\t? '14px'\n\t\t\t: '16px'};\n\tline-height: ${(props) =>\n\t\tprops.variant === 'x-small'\n\t\t\t? '16px'\n\t\t\t: props.variant === 'small'\n\t\t\t? '20px'\n\t\t\t: '24px'};\n`;\n"],"names":["getBorderColor","isActive","isInvalid","hightlightInputColor","COLORS","getBorderWidth","props","InputWrapper","styled","css","IconHolder","inputCss","InputContainer","BodyPrimary","InputContainerSmall","BodySecondary","InputContainerXSmall","BodyCaption","InputHeader","MaxCharStyle","InputFooter","RootContainer","PrefixHolder","SuffixHolder"],"mappings":"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"}
|
|
@@ -4,6 +4,8 @@ export type DropdownProps = OpenDropdownProps & {
|
|
|
4
4
|
placeHolder?: string;
|
|
5
5
|
size?: 'default' | 'small' | 'x-small';
|
|
6
6
|
disabled?: boolean;
|
|
7
|
+
/** When disabled, render a solid grey box (background.base) with secondary text and no opacity wash. */
|
|
8
|
+
solidDisabled?: boolean;
|
|
7
9
|
noErrorHint?: boolean;
|
|
8
10
|
buttonWidth?: string;
|
|
9
11
|
placeHolderHeight?: string;
|