@laerdal/life-react-components 2.2.1-dev.23.full → 2.2.1-dev.25

package/dist/InputFields/PasswordField.js

@@ -16,9 +16,9 @@ import { useFocusVisibleRef } from '../common';
 import { IconButton } from '../Button';
 import { SystemIcons } from '../icons';
 import { TechnicalWarning } from '../icons/systemicons/SystemIcons';
-import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
 var StyledPassSwitch = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  z-index: ", ";\n  right: 0;\n  position: absolute;\n"])), Z_INDEXES.badge);
 var PasswordRow = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n"])));
 var PasswordField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
@@ -58,50 +58,56 @@ var PasswordField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       disabled: disabled,
       readOnly: readOnly,
       margin: margin,
-      children: /*#__PURE__*/_jsxs(PasswordRow, {
-        children: [/*#__PURE__*/_jsx(InputFieldStyling, _objectSpread({
-          id: id,
-          "data-testId": dataTestId,
-          ref: inputRef,
-          type: passwordHidden ? 'password' : 'text',
-          name: name,
-          value: value,
-          className: cls,
-          tabIndex: disabled || readOnly ? -1 : 0,
-          autoComplete: autoComplete,
-          activeErrorMessage: !!validationMessage,
-          placeholder: placeholder,
-          disabled: disabled,
-          required: required,
-          readOnly: readOnly,
-          onChange: function onChange(e) {
-            var _e$target;
-            return _onChange && _onChange((e === null || e === void 0 ? void 0 : (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.value) || '');
-          }
-        }, rest)), /*#__PURE__*/_jsx(StyledPassSwitch, {
-          className: size ? size : '',
-          children: !disabled && !readOnly ? passwordHidden ? /*#__PURE__*/_jsx(IconButton, {
-            id: "".concat(id, "_Visible"),
-            iconColor: '#666666',
-            variant: 'secondary',
-            shape: 'circular',
-            onKeyPress: handleKeyDown,
-            action: function action() {
-              return setPasswordHidden(!passwordHidden);
-            },
-            children: /*#__PURE__*/_jsx(SystemIcons.VisibleOff, {})
-          }) : /*#__PURE__*/_jsx(IconButton, {
-            id: "".concat(id, "_NotVisible"),
-            iconColor: '#666666',
-            variant: 'secondary',
-            shape: 'circular',
-            onKeyPress: handleKeyDown,
-            action: function action() {
-              return setPasswordHidden(!passwordHidden);
-            },
-            children: /*#__PURE__*/_jsx(SystemIcons.VisibleOn, {})
-          }) : null
-        })]
+      children: /*#__PURE__*/_jsx("div", {
+        style: {
+          display: 'block',
+          margin: '4px 0px'
+        },
+        children: /*#__PURE__*/_jsxs(PasswordRow, {
+          children: [/*#__PURE__*/_jsx(InputFieldStyling, _objectSpread({
+            id: id,
+            "data-testId": dataTestId,
+            ref: inputRef,
+            type: passwordHidden ? 'password' : 'text',
+            name: name,
+            value: value,
+            className: cls,
+            tabIndex: disabled || readOnly ? -1 : 0,
+            autoComplete: autoComplete,
+            activeErrorMessage: !!validationMessage,
+            placeholder: placeholder,
+            disabled: disabled,
+            required: required,
+            readOnly: readOnly,
+            onChange: function onChange(e) {
+              var _e$target;
+              return _onChange && _onChange((e === null || e === void 0 ? void 0 : (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.value) || '');
+            }
+          }, rest)), /*#__PURE__*/_jsx(StyledPassSwitch, {
+            className: size ? size : '',
+            children: !disabled && !readOnly ? passwordHidden ? /*#__PURE__*/_jsx(IconButton, {
+              id: "".concat(id, "_Visible"),
+              iconColor: '#666666',
+              variant: 'secondary',
+              shape: 'circular',
+              onKeyPress: handleKeyDown,
+              action: function action() {
+                return setPasswordHidden(!passwordHidden);
+              },
+              children: /*#__PURE__*/_jsx(SystemIcons.VisibleOff, {})
+            }) : /*#__PURE__*/_jsx(IconButton, {
+              id: "".concat(id, "_NotVisible"),
+              iconColor: '#666666',
+              variant: 'secondary',
+              shape: 'circular',
+              onKeyPress: handleKeyDown,
+              action: function action() {
+                return setPasswordHidden(!passwordHidden);
+              },
+              children: /*#__PURE__*/_jsx(SystemIcons.VisibleOn, {})
+            }) : null
+          })]
+        })
       })
     }), validationMessage && /*#__PURE__*/_jsxs(ErrorMessage, {
       className: size || '',

package/dist/InputFields/PasswordField.js.map

@@ -1 +1 @@
-{"version":3,"file":"PasswordField.js","names":["React","styled","COLORS","InputFieldStyling","InputWrapper","ErrorMessage","Z_INDEXES","useFocusVisibleRef","IconButton","SystemIcons","TechnicalWarning","StyledPassSwitch","div","badge","PasswordRow","PasswordField","forwardRef","ref","id","disabled","onChange","invalid","value","validationMessage","autoComplete","placeholder","required","readOnly","size","margin","className","dataTestId","name","rest","useState","passwordHidden","setPasswordHidden","inputRef","useImperativeHandle","current","handleKeyDown","e","keyCode","cls","target","critical_400"],"sources":["../../src/InputFields/PasswordField.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS } from '../styles';\nimport { Size, Testable } from '../types';\nimport { InputFieldStyling, InputWrapper, ErrorMessage } from './styling';\nimport { Z_INDEXES } from '../styles';\nimport { useFocusVisibleRef } from '../common';\nimport { IconButton } from '../Button';\nimport { SystemIcons } from '../icons';\nimport { TechnicalWarning } from '../icons/systemicons/SystemIcons';\n\ntype PasswordFieldProps =\n  Testable & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'id' | 'onChange' | 'readOnly' | 'required' | 'placeholder' | 'autoComplete' | 'value' | 'disabled' | 'tabIndex' | 'type'>\n  & {\n  id: string;\n  disabled?: boolean;\n  onChange?: (text: string) => void;\n  invalid?: boolean;\n  value?: string;\n  validationMessage?: string;\n  autoComplete?: string;\n  placeholder?: string;\n  required?: boolean;\n  readOnly?: boolean;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n};\n\nconst StyledPassSwitch = styled.div`\n  z-index: ${Z_INDEXES.badge};\n  right: 0;\n  position: absolute;\n`;\n\nconst PasswordRow = styled.div`\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n`;\n\nconst PasswordField = React.forwardRef(({\n                                          id,\n                                          disabled,\n                                          onChange,\n                                          invalid,\n                                          value,\n                                          validationMessage,\n                                          autoComplete,\n                                          placeholder,\n                                          required,\n                                          readOnly,\n                                          size,\n                                          margin,\n                                          className,\n                                          dataTestId,\n                                          name = 'password',\n                                          ...rest\n                                        }: PasswordFieldProps, ref) => {\n  const [passwordHidden, setPasswordHidden] = React.useState<Boolean>(true);\n  const inputRef = useFocusVisibleRef();\n\n  React.useImperativeHandle(ref, () => inputRef.current, [inputRef]);\n\n  const handleKeyDown = (e: any) => {\n    if (e.keyCode === 13) {\n      setPasswordHidden(!passwordHidden);\n    }\n  };\n\n  const cls = `${invalid ? 'invalid' : ''}  ${size || ''} ${className}`;\n\n  return (\n    <>\n      <InputWrapper disabled={disabled} readOnly={readOnly} margin={margin}>\n        <PasswordRow>\n            <InputFieldStyling\n              id={id}\n              data-testId={dataTestId}\n              ref={inputRef}\n              type={passwordHidden ? 'password' : 'text'}\n              name={name}\n              value={value}\n              className={cls}\n              tabIndex={disabled || readOnly ? -1 : 0}\n              autoComplete={autoComplete}\n              activeErrorMessage={!!validationMessage}\n              placeholder={placeholder}\n              disabled={disabled}\n              required={required}\n              readOnly={readOnly}\n              onChange={(e: any) => onChange && onChange(e?.target?.value || '')}\n              {...rest}\n            />\n            <StyledPassSwitch className={size ? size : ''}>\n              {!disabled && !readOnly ? (\n                passwordHidden ? (\n                  <IconButton\n                    id={`${id}_Visible`}\n                    iconColor={'#666666'}\n                    variant={'secondary'}\n                    shape={'circular'}\n                    onKeyPress={handleKeyDown}\n                    action={() => setPasswordHidden(!passwordHidden)}>\n                    <SystemIcons.VisibleOff />\n                  </IconButton>\n                ) : (\n                  <IconButton\n                    id={`${id}_NotVisible`}\n                    iconColor={'#666666'}\n                    variant={'secondary'}\n                    shape={'circular'}\n                    onKeyPress={handleKeyDown}\n                    action={() => setPasswordHidden(!passwordHidden)}>\n                    <SystemIcons.VisibleOn />\n                  </IconButton>\n                )\n              ) : null}\n            </StyledPassSwitch>\n        </PasswordRow>\n      </InputWrapper>\n      {validationMessage && (\n        <ErrorMessage className={size || ''}>\n          <TechnicalWarning color={COLORS.critical_400} />\n          <span>{validationMessage}</span>\n        </ErrorMessage>\n      )}\n    </>\n  );\n});\n\nexport default PasswordField;\n"],"mappings":"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"}
+{"version":3,"file":"PasswordField.js","names":["React","styled","COLORS","InputFieldStyling","InputWrapper","ErrorMessage","Z_INDEXES","useFocusVisibleRef","IconButton","SystemIcons","TechnicalWarning","StyledPassSwitch","div","badge","PasswordRow","PasswordField","forwardRef","ref","id","disabled","onChange","invalid","value","validationMessage","autoComplete","placeholder","required","readOnly","size","margin","className","dataTestId","name","rest","useState","passwordHidden","setPasswordHidden","inputRef","useImperativeHandle","current","handleKeyDown","e","keyCode","cls","display","target","critical_400"],"sources":["../../src/InputFields/PasswordField.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS } from '../styles';\nimport { Size, Testable } from '../types';\nimport { InputFieldStyling, InputWrapper, ErrorMessage } from './styling';\nimport { Z_INDEXES } from '../styles';\nimport { useFocusVisibleRef } from '../common';\nimport { IconButton } from '../Button';\nimport { SystemIcons } from '../icons';\nimport { TechnicalWarning } from '../icons/systemicons/SystemIcons';\n\ntype PasswordFieldProps =\n  Testable & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'id' | 'onChange' | 'readOnly' | 'required' | 'placeholder' | 'autoComplete' | 'value' | 'disabled' | 'tabIndex' | 'type'>\n  & {\n  id: string;\n  disabled?: boolean;\n  onChange?: (text: string) => void;\n  invalid?: boolean;\n  value?: string;\n  validationMessage?: string;\n  autoComplete?: string;\n  placeholder?: string;\n  required?: boolean;\n  readOnly?: boolean;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n};\n\nconst StyledPassSwitch = styled.div`\n  z-index: ${Z_INDEXES.badge};\n  right: 0;\n  position: absolute;\n`;\n\nconst PasswordRow = styled.div`\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n`;\n\nconst PasswordField = React.forwardRef(({\n                                          id,\n                                          disabled,\n                                          onChange,\n                                          invalid,\n                                          value,\n                                          validationMessage,\n                                          autoComplete,\n                                          placeholder,\n                                          required,\n                                          readOnly,\n                                          size,\n                                          margin,\n                                          className,\n                                          dataTestId,\n                                          name = 'password',\n                                          ...rest\n                                        }: PasswordFieldProps, ref) => {\n  const [passwordHidden, setPasswordHidden] = React.useState<Boolean>(true);\n  const inputRef = useFocusVisibleRef();\n\n  React.useImperativeHandle(ref, () => inputRef.current, [inputRef]);\n\n  const handleKeyDown = (e: any) => {\n    if (e.keyCode === 13) {\n      setPasswordHidden(!passwordHidden);\n    }\n  };\n\n  const cls = `${invalid ? 'invalid' : ''}  ${size || ''} ${className}`;\n\n  return (\n    <>\n      <InputWrapper disabled={disabled} readOnly={readOnly} margin={margin}>\n        <div style={{ display: 'block', margin: '4px 0px'}}>\n          <PasswordRow>\n            <InputFieldStyling\n              id={id}\n              data-testId={dataTestId}\n              ref={inputRef}\n              type={passwordHidden ? 'password' : 'text'}\n              name={name}\n              value={value}\n              className={cls}\n              tabIndex={disabled || readOnly ? -1 : 0}\n              autoComplete={autoComplete}\n              activeErrorMessage={!!validationMessage}\n              placeholder={placeholder}\n              disabled={disabled}\n              required={required}\n              readOnly={readOnly}\n              onChange={(e: any) => onChange && onChange(e?.target?.value || '')}\n              {...rest}\n            />\n            <StyledPassSwitch className={size ? size : ''}>\n              {!disabled && !readOnly ? (\n                passwordHidden ? (\n                  <IconButton\n                    id={`${id}_Visible`}\n                    iconColor={'#666666'}\n                    variant={'secondary'}\n                    shape={'circular'}\n                    onKeyPress={handleKeyDown}\n                    action={() => setPasswordHidden(!passwordHidden)}>\n                    <SystemIcons.VisibleOff />\n                  </IconButton>\n                ) : (\n                  <IconButton\n                    id={`${id}_NotVisible`}\n                    iconColor={'#666666'}\n                    variant={'secondary'}\n                    shape={'circular'}\n                    onKeyPress={handleKeyDown}\n                    action={() => setPasswordHidden(!passwordHidden)}>\n                    <SystemIcons.VisibleOn />\n                  </IconButton>\n                )\n              ) : null}\n            </StyledPassSwitch>\n          </PasswordRow>\n        </div>\n      </InputWrapper>\n      {validationMessage && (\n        <ErrorMessage className={size || ''}>\n          <TechnicalWarning color={COLORS.critical_400} />\n          <span>{validationMessage}</span>\n        </ErrorMessage>\n      )}\n    </>\n  );\n});\n\nexport default PasswordField;\n"],"mappings":"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"}

package/dist/InputFields/SearchBar.cjs

@@ -33,7 +33,8 @@ var SearchBar = function SearchBar(_ref) {
     validationMessage = _ref.validationMessage,
     onKeyDown = _ref.onKeyDown,
     size = _ref.size,
-    margin = _ref.margin,
+    _ref$margin = _ref.margin,
+    margin = _ref$margin === void 0 ? '4px 0' : _ref$margin,
     showDropdown = _ref.showDropdown,
     dropdownButtonIcon = _ref.dropdownButtonIcon,
     dropdownButtonLabel = _ref.dropdownButtonLabel,

package/dist/InputFields/SearchBar.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SearchBar.cjs","names":["ClearIconWrapper","styled","div","SearchBar","id","searchTerm","setSearchTerm","enterSearch","removeSearch","placeholder","performSearchLabel","disabled","validationMessage","onKeyDown","size","margin","showDropdown","dropdownButtonIcon","dropdownButtonLabel","dropdownButtonVariant","dropdownButtonAction","searchList","addToSearchList","dropdownScrollable","containerRef","React","useRef","useState","isOpen","setIsOpen","dropdownRef","useClickOutsideRef","isPressingEnter","e","key","preventDefault","stopPropagation","enteredSearchTerm","value","target","dropdownAction","term","concat","items","action","actionLabel","actionIcon","actionVariant","onValueUpdate","scrollable","pinTopItem","COLORS","critical_400"],"sources":["../../src/InputFields/SearchBar.tsx"],"sourcesContent":["import React from 'react';\nimport {COLORS} from '../styles/index';\nimport {Search as SearchIcon, Clear as ClearIcon, TechnicalWarning} from '../icons/systemicons/SystemIcons';\nimport {ErrorMessage, InputWrapper, SearchIconWrapper} from './styling';\nimport {IconButton} from '../Button';\nimport SearchBarInput from './components/SearchBarInput';\nimport SearchField from './components/SearchField';\nimport {Size} from '../types';\nimport styled from 'styled-components';\nimport { DropdownContent, DropdownItem } from '../Dropdown';\nimport { useClickOutsideRef } from '../common';\n\ntype SeachBarProps = {\n  id: string;\n  searchTerm?: string;\n  setSearchTerm: (term: string) => void;\n  enterSearch: (e: any) => void;\n  removeSearch: (e: any) => void;\n  placeholder?: string;\n  performSearchLabel?: string;\n  disabled?: boolean;\n  validationMessage?: string;\n  onKeyDown?: (e: React.KeyboardEvent) => void;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n  showDropdown?: boolean;\n  dropdownButtonIcon?: React.ReactNode;\n  dropdownButtonLabel?: string;\n  dropdownButtonVariant?: 'primary' | 'secondary' | 'tertiary';\n  dropdownButtonAction?: () => boolean | void | undefined;\n  searchList?: DropdownItem[];\n  addToSearchList?: (e: DropdownItem) => void;\n  dropdownScrollable?: boolean;\n};\n\nconst ClearIconWrapper = styled.div`\n  display: flex;\n  align-items: center;\n\n  &.hidden {\n    display: none !important;\n  }\n`;\n\nconst SearchBar: React.FunctionComponent<SeachBarProps> = ({\n                                                             id,\n                                                             searchTerm,\n                                                             setSearchTerm,\n                                                             enterSearch,\n                                                             removeSearch,\n                                                             placeholder,\n                                                             performSearchLabel,\n                                                             disabled,\n                                                             validationMessage,\n                                                             onKeyDown,\n                                                             size,\n                                                             margin,\n                                                             showDropdown,\n                                                             dropdownButtonIcon,\n                                                             dropdownButtonLabel,\n                                                             dropdownButtonVariant,\n                                                             dropdownButtonAction,\n                                                             searchList=[],\n                                                             addToSearchList,\n                                                             dropdownScrollable\n                                                           }) => {\n  const containerRef = React.useRef<any>(null);\n\n  const [isOpen, setIsOpen] = React.useState(false);\n  const dropdownRef = useClickOutsideRef(()=>setIsOpen(false), [containerRef]);\n\n  const isPressingEnter = (e: any) => {\n    if (e.key === 'Enter') {\n      e.preventDefault();\n      e.stopPropagation();\n      return true;\n    }\n    return false;\n  };\n\n  const enteredSearchTerm = (e: any) => {\n    addToSearchList && addToSearchList({value:e.target.value});\n    enterSearch(e);\n  }\n\n  const dropdownAction = () => {\n    if(dropdownButtonAction)\n      dropdownButtonAction();    \n  }\n\n  return (\n    <>\n      <InputWrapper\n        disabled={disabled}\n        margin={margin}>\n        <SearchField id={'id'} size={size}\n                     ref={containerRef}\n                     searchTerm={searchTerm}\n                     disabled={disabled}\n                     validationMessage={validationMessage}>\n          <SearchBarInput\n            placeholder={disabled ? '' : placeholder}\n            id={id}\n            size={size}\n            disabled={disabled}\n            setSearchTerm={(term: string) => setSearchTerm(term)}\n            searchTerm={searchTerm}\n            onKeyDown={onKeyDown}\n            enterSearch={enteredSearchTerm}\n            focusParentRefs={[containerRef]}\n            onClick={()=>setIsOpen(!isOpen)}\n            ref={dropdownRef}\n          />\n          <SearchIconWrapper className={size ? size : ''} aria-label={performSearchLabel}>\n            <IconButton id={`${id}_Search`}\n                        variant=\"secondary\"\n                        shape=\"circular\"\n                        action={enterSearch}\n                        disabled={disabled}\n                        onKeyPress={(e: any) => (isPressingEnter(e) ? enterSearch(e) : null)}>\n              <SearchIcon size=\"24px\"/>\n            </IconButton>\n          </SearchIconWrapper>\n          <ClearIconWrapper className={(size ? size : '').concat(!searchTerm ? ' hidden' : '')}>\n            <IconButton id={`${id}_Clear`}\n                        variant=\"secondary\"\n                        shape=\"circular\"\n                        action={removeSearch}\n                        disabled={disabled}\n                        onKeyPress={(e: any) => (isPressingEnter(e) ? removeSearch(e) : null)}>\n              <ClearIcon size=\"24px\"/>\n            </IconButton>\n          </ClearIconWrapper>\n        </SearchField>\n\n      {showDropdown && <DropdownContent id={'search'}\n                                        containerRef={containerRef}\n          size={size}\n          isButton={false}\n          ariaRolesType=\"input\"\n          customizationProps={{\n            items:searchList,\n            action: dropdownAction,\n            actionLabel: dropdownButtonLabel,\n            actionIcon: dropdownButtonIcon,\n            actionVariant: dropdownButtonVariant,\n            onValueUpdate:(e)=>{},\n            scrollable: dropdownScrollable,\n            pinTopItem: true\n          }}\n          isOpen={isOpen}\n          setIsOpen={setIsOpen}\n          filter={''}\n          selectedValues={searchTerm ? [searchTerm] : []}\n          setSelectedValues={(e)=>setSearchTerm(e[0])}\n          messageOnNoResults={''}\n          focused={null}\n          setFocused={()=>{}}\n        />}\n\n      </InputWrapper>\n      {validationMessage && (\n        <ErrorMessage className={size || ''}>\n          <TechnicalWarning color={COLORS.critical_400} className={size || ''}/>\n          <span>{validationMessage}</span>\n        </ErrorMessage>\n      )}\n    </>\n  );\n};\n\nexport default SearchBar;\n"],"mappings":"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"}
+{"version":3,"file":"SearchBar.cjs","names":["ClearIconWrapper","styled","div","SearchBar","id","searchTerm","setSearchTerm","enterSearch","removeSearch","placeholder","performSearchLabel","disabled","validationMessage","onKeyDown","size","margin","showDropdown","dropdownButtonIcon","dropdownButtonLabel","dropdownButtonVariant","dropdownButtonAction","searchList","addToSearchList","dropdownScrollable","containerRef","React","useRef","useState","isOpen","setIsOpen","dropdownRef","useClickOutsideRef","isPressingEnter","e","key","preventDefault","stopPropagation","enteredSearchTerm","value","target","dropdownAction","term","concat","items","action","actionLabel","actionIcon","actionVariant","onValueUpdate","scrollable","pinTopItem","COLORS","critical_400"],"sources":["../../src/InputFields/SearchBar.tsx"],"sourcesContent":["import React from 'react';\nimport {COLORS} from '../styles/index';\nimport {Search as SearchIcon, Clear as ClearIcon, TechnicalWarning} from '../icons/systemicons/SystemIcons';\nimport {ErrorMessage, InputWrapper, SearchIconWrapper} from './styling';\nimport {IconButton} from '../Button';\nimport SearchBarInput from './components/SearchBarInput';\nimport SearchField from './components/SearchField';\nimport {Size} from '../types';\nimport styled from 'styled-components';\nimport { DropdownContent, DropdownItem } from '../Dropdown';\nimport { useClickOutsideRef } from '../common';\n\ntype SeachBarProps = {\n  id: string;\n  searchTerm?: string;\n  setSearchTerm: (term: string) => void;\n  enterSearch: (e: any) => void;\n  removeSearch: (e: any) => void;\n  placeholder?: string;\n  performSearchLabel?: string;\n  disabled?: boolean;\n  validationMessage?: string;\n  onKeyDown?: (e: React.KeyboardEvent) => void;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n  showDropdown?: boolean;\n  dropdownButtonIcon?: React.ReactNode;\n  dropdownButtonLabel?: string;\n  dropdownButtonVariant?: 'primary' | 'secondary' | 'tertiary';\n  dropdownButtonAction?: () => boolean | void | undefined;\n  searchList?: DropdownItem[];\n  addToSearchList?: (e: DropdownItem) => void;\n  dropdownScrollable?: boolean;\n};\n\nconst ClearIconWrapper = styled.div`\n  display: flex;\n  align-items: center;\n\n  &.hidden {\n    display: none !important;\n  }\n`;\n\nconst SearchBar: React.FunctionComponent<SeachBarProps> = ({\n                                                             id,\n                                                             searchTerm,\n                                                             setSearchTerm,\n                                                             enterSearch,\n                                                             removeSearch,\n                                                             placeholder,\n                                                             performSearchLabel,\n                                                             disabled,\n                                                             validationMessage,\n                                                             onKeyDown,\n                                                             size,\n                                                             margin = '4px 0',\n                                                             showDropdown,\n                                                             dropdownButtonIcon,\n                                                             dropdownButtonLabel,\n                                                             dropdownButtonVariant,\n                                                             dropdownButtonAction,\n                                                             searchList=[],\n                                                             addToSearchList,\n                                                             dropdownScrollable\n                                                           }) => {\n  const containerRef = React.useRef<any>(null);\n\n  const [isOpen, setIsOpen] = React.useState(false);\n  const dropdownRef = useClickOutsideRef(()=>setIsOpen(false), [containerRef]);\n\n  const isPressingEnter = (e: any) => {\n    if (e.key === 'Enter') {\n      e.preventDefault();\n      e.stopPropagation();\n      return true;\n    }\n    return false;\n  };\n\n  const enteredSearchTerm = (e: any) => {\n    addToSearchList && addToSearchList({value:e.target.value});\n    enterSearch(e);\n  }\n\n  const dropdownAction = () => {\n    if(dropdownButtonAction)\n      dropdownButtonAction();    \n  }\n\n  return (\n    <>\n      <InputWrapper\n        disabled={disabled}\n        margin={margin}>\n        <SearchField id={'id'} size={size}\n                     ref={containerRef}\n                     searchTerm={searchTerm}\n                     disabled={disabled}\n                     validationMessage={validationMessage}>\n          <SearchBarInput\n            placeholder={disabled ? '' : placeholder}\n            id={id}\n            size={size}\n            disabled={disabled}\n            setSearchTerm={(term: string) => setSearchTerm(term)}\n            searchTerm={searchTerm}\n            onKeyDown={onKeyDown}\n            enterSearch={enteredSearchTerm}\n            focusParentRefs={[containerRef]}\n            onClick={()=>setIsOpen(!isOpen)}\n            ref={dropdownRef}\n          />\n          <SearchIconWrapper className={size ? size : ''} aria-label={performSearchLabel}>\n            <IconButton id={`${id}_Search`}\n                        variant=\"secondary\"\n                        shape=\"circular\"\n                        action={enterSearch}\n                        disabled={disabled}\n                        onKeyPress={(e: any) => (isPressingEnter(e) ? enterSearch(e) : null)}>\n              <SearchIcon size=\"24px\"/>\n            </IconButton>\n          </SearchIconWrapper>\n          <ClearIconWrapper className={(size ? size : '').concat(!searchTerm ? ' hidden' : '')}>\n            <IconButton id={`${id}_Clear`}\n                        variant=\"secondary\"\n                        shape=\"circular\"\n                        action={removeSearch}\n                        disabled={disabled}\n                        onKeyPress={(e: any) => (isPressingEnter(e) ? removeSearch(e) : null)}>\n              <ClearIcon size=\"24px\"/>\n            </IconButton>\n          </ClearIconWrapper>\n        </SearchField>\n\n      {showDropdown && <DropdownContent id={'search'}\n                                        containerRef={containerRef}\n          size={size}\n          isButton={false}\n          ariaRolesType=\"input\"\n          customizationProps={{\n            items:searchList,\n            action: dropdownAction,\n            actionLabel: dropdownButtonLabel,\n            actionIcon: dropdownButtonIcon,\n            actionVariant: dropdownButtonVariant,\n            onValueUpdate:(e)=>{},\n            scrollable: dropdownScrollable,\n            pinTopItem: true\n          }}\n          isOpen={isOpen}\n          setIsOpen={setIsOpen}\n          filter={''}\n          selectedValues={searchTerm ? [searchTerm] : []}\n          setSelectedValues={(e)=>setSearchTerm(e[0])}\n          messageOnNoResults={''}\n          focused={null}\n          setFocused={()=>{}}\n        />}\n\n      </InputWrapper>\n      {validationMessage && (\n        <ErrorMessage className={size || ''}>\n          <TechnicalWarning color={COLORS.critical_400} className={size || ''}/>\n          <span>{validationMessage}</span>\n        </ErrorMessage>\n      )}\n    </>\n  );\n};\n\nexport default SearchBar;\n"],"mappings":"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"}

package/dist/InputFields/SearchBar.js

@@ -12,9 +12,9 @@ import SearchField from './components/SearchField';
 import styled from 'styled-components';
 import { DropdownContent } from '../Dropdown';
 import { useClickOutsideRef } from '../common';
-import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
 var ClearIconWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n\n  &.hidden {\n    display: none !important;\n  }\n"])));
 var SearchBar = function SearchBar(_ref) {
   var id = _ref.id,
@@ -28,7 +28,8 @@ var SearchBar = function SearchBar(_ref) {
     validationMessage = _ref.validationMessage,
     onKeyDown = _ref.onKeyDown,
     size = _ref.size,
-    margin = _ref.margin,
+    _ref$margin = _ref.margin,
+    margin = _ref$margin === void 0 ? '4px 0' : _ref$margin,
     showDropdown = _ref.showDropdown,
     dropdownButtonIcon = _ref.dropdownButtonIcon,
     dropdownButtonLabel = _ref.dropdownButtonLabel,

package/dist/InputFields/SearchBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchBar.js","names":["React","COLORS","Search","SearchIcon","Clear","ClearIcon","TechnicalWarning","ErrorMessage","InputWrapper","SearchIconWrapper","IconButton","SearchBarInput","SearchField","styled","DropdownContent","useClickOutsideRef","ClearIconWrapper","div","SearchBar","id","searchTerm","setSearchTerm","enterSearch","removeSearch","placeholder","performSearchLabel","disabled","validationMessage","onKeyDown","size","margin","showDropdown","dropdownButtonIcon","dropdownButtonLabel","dropdownButtonVariant","dropdownButtonAction","searchList","addToSearchList","dropdownScrollable","containerRef","useRef","useState","isOpen","setIsOpen","dropdownRef","isPressingEnter","e","key","preventDefault","stopPropagation","enteredSearchTerm","value","target","dropdownAction","term","concat","items","action","actionLabel","actionIcon","actionVariant","onValueUpdate","scrollable","pinTopItem","critical_400"],"sources":["../../src/InputFields/SearchBar.tsx"],"sourcesContent":["import React from 'react';\nimport {COLORS} from '../styles/index';\nimport {Search as SearchIcon, Clear as ClearIcon, TechnicalWarning} from '../icons/systemicons/SystemIcons';\nimport {ErrorMessage, InputWrapper, SearchIconWrapper} from './styling';\nimport {IconButton} from '../Button';\nimport SearchBarInput from './components/SearchBarInput';\nimport SearchField from './components/SearchField';\nimport {Size} from '../types';\nimport styled from 'styled-components';\nimport { DropdownContent, DropdownItem } from '../Dropdown';\nimport { useClickOutsideRef } from '../common';\n\ntype SeachBarProps = {\n  id: string;\n  searchTerm?: string;\n  setSearchTerm: (term: string) => void;\n  enterSearch: (e: any) => void;\n  removeSearch: (e: any) => void;\n  placeholder?: string;\n  performSearchLabel?: string;\n  disabled?: boolean;\n  validationMessage?: string;\n  onKeyDown?: (e: React.KeyboardEvent) => void;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n  showDropdown?: boolean;\n  dropdownButtonIcon?: React.ReactNode;\n  dropdownButtonLabel?: string;\n  dropdownButtonVariant?: 'primary' | 'secondary' | 'tertiary';\n  dropdownButtonAction?: () => boolean | void | undefined;\n  searchList?: DropdownItem[];\n  addToSearchList?: (e: DropdownItem) => void;\n  dropdownScrollable?: boolean;\n};\n\nconst ClearIconWrapper = styled.div`\n  display: flex;\n  align-items: center;\n\n  &.hidden {\n    display: none !important;\n  }\n`;\n\nconst SearchBar: React.FunctionComponent<SeachBarProps> = ({\n                                                             id,\n                                                             searchTerm,\n                                                             setSearchTerm,\n                                                             enterSearch,\n                                                             removeSearch,\n                                                             placeholder,\n                                                             performSearchLabel,\n                                                             disabled,\n                                                             validationMessage,\n                                                             onKeyDown,\n                                                             size,\n                                                             margin,\n                                                             showDropdown,\n                                                             dropdownButtonIcon,\n                                                             dropdownButtonLabel,\n                                                             dropdownButtonVariant,\n                                                             dropdownButtonAction,\n                                                             searchList=[],\n                                                             addToSearchList,\n                                                             dropdownScrollable\n                                                           }) => {\n  const containerRef = React.useRef<any>(null);\n\n  const [isOpen, setIsOpen] = React.useState(false);\n  const dropdownRef = useClickOutsideRef(()=>setIsOpen(false), [containerRef]);\n\n  const isPressingEnter = (e: any) => {\n    if (e.key === 'Enter') {\n      e.preventDefault();\n      e.stopPropagation();\n      return true;\n    }\n    return false;\n  };\n\n  const enteredSearchTerm = (e: any) => {\n    addToSearchList && addToSearchList({value:e.target.value});\n    enterSearch(e);\n  }\n\n  const dropdownAction = () => {\n    if(dropdownButtonAction)\n      dropdownButtonAction();    \n  }\n\n  return (\n    <>\n      <InputWrapper\n        disabled={disabled}\n        margin={margin}>\n        <SearchField id={'id'} size={size}\n                     ref={containerRef}\n                     searchTerm={searchTerm}\n                     disabled={disabled}\n                     validationMessage={validationMessage}>\n          <SearchBarInput\n            placeholder={disabled ? '' : placeholder}\n            id={id}\n            size={size}\n            disabled={disabled}\n            setSearchTerm={(term: string) => setSearchTerm(term)}\n            searchTerm={searchTerm}\n            onKeyDown={onKeyDown}\n            enterSearch={enteredSearchTerm}\n            focusParentRefs={[containerRef]}\n            onClick={()=>setIsOpen(!isOpen)}\n            ref={dropdownRef}\n          />\n          <SearchIconWrapper className={size ? size : ''} aria-label={performSearchLabel}>\n            <IconButton id={`${id}_Search`}\n                        variant=\"secondary\"\n                        shape=\"circular\"\n                        action={enterSearch}\n                        disabled={disabled}\n                        onKeyPress={(e: any) => (isPressingEnter(e) ? enterSearch(e) : null)}>\n              <SearchIcon size=\"24px\"/>\n            </IconButton>\n          </SearchIconWrapper>\n          <ClearIconWrapper className={(size ? size : '').concat(!searchTerm ? ' hidden' : '')}>\n            <IconButton id={`${id}_Clear`}\n                        variant=\"secondary\"\n                        shape=\"circular\"\n                        action={removeSearch}\n                        disabled={disabled}\n                        onKeyPress={(e: any) => (isPressingEnter(e) ? removeSearch(e) : null)}>\n              <ClearIcon size=\"24px\"/>\n            </IconButton>\n          </ClearIconWrapper>\n        </SearchField>\n\n      {showDropdown && <DropdownContent id={'search'}\n                                        containerRef={containerRef}\n          size={size}\n          isButton={false}\n          ariaRolesType=\"input\"\n          customizationProps={{\n            items:searchList,\n            action: dropdownAction,\n            actionLabel: dropdownButtonLabel,\n            actionIcon: dropdownButtonIcon,\n            actionVariant: dropdownButtonVariant,\n            onValueUpdate:(e)=>{},\n            scrollable: dropdownScrollable,\n            pinTopItem: true\n          }}\n          isOpen={isOpen}\n          setIsOpen={setIsOpen}\n          filter={''}\n          selectedValues={searchTerm ? [searchTerm] : []}\n          setSelectedValues={(e)=>setSearchTerm(e[0])}\n          messageOnNoResults={''}\n          focused={null}\n          setFocused={()=>{}}\n        />}\n\n      </InputWrapper>\n      {validationMessage && (\n        <ErrorMessage className={size || ''}>\n          <TechnicalWarning color={COLORS.critical_400} className={size || ''}/>\n          <span>{validationMessage}</span>\n        </ErrorMessage>\n      )}\n    </>\n  );\n};\n\nexport default SearchBar;\n"],"mappings":"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"}
+{"version":3,"file":"SearchBar.js","names":["React","COLORS","Search","SearchIcon","Clear","ClearIcon","TechnicalWarning","ErrorMessage","InputWrapper","SearchIconWrapper","IconButton","SearchBarInput","SearchField","styled","DropdownContent","useClickOutsideRef","ClearIconWrapper","div","SearchBar","id","searchTerm","setSearchTerm","enterSearch","removeSearch","placeholder","performSearchLabel","disabled","validationMessage","onKeyDown","size","margin","showDropdown","dropdownButtonIcon","dropdownButtonLabel","dropdownButtonVariant","dropdownButtonAction","searchList","addToSearchList","dropdownScrollable","containerRef","useRef","useState","isOpen","setIsOpen","dropdownRef","isPressingEnter","e","key","preventDefault","stopPropagation","enteredSearchTerm","value","target","dropdownAction","term","concat","items","action","actionLabel","actionIcon","actionVariant","onValueUpdate","scrollable","pinTopItem","critical_400"],"sources":["../../src/InputFields/SearchBar.tsx"],"sourcesContent":["import React from 'react';\nimport {COLORS} from '../styles/index';\nimport {Search as SearchIcon, Clear as ClearIcon, TechnicalWarning} from '../icons/systemicons/SystemIcons';\nimport {ErrorMessage, InputWrapper, SearchIconWrapper} from './styling';\nimport {IconButton} from '../Button';\nimport SearchBarInput from './components/SearchBarInput';\nimport SearchField from './components/SearchField';\nimport {Size} from '../types';\nimport styled from 'styled-components';\nimport { DropdownContent, DropdownItem } from '../Dropdown';\nimport { useClickOutsideRef } from '../common';\n\ntype SeachBarProps = {\n  id: string;\n  searchTerm?: string;\n  setSearchTerm: (term: string) => void;\n  enterSearch: (e: any) => void;\n  removeSearch: (e: any) => void;\n  placeholder?: string;\n  performSearchLabel?: string;\n  disabled?: boolean;\n  validationMessage?: string;\n  onKeyDown?: (e: React.KeyboardEvent) => void;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n  showDropdown?: boolean;\n  dropdownButtonIcon?: React.ReactNode;\n  dropdownButtonLabel?: string;\n  dropdownButtonVariant?: 'primary' | 'secondary' | 'tertiary';\n  dropdownButtonAction?: () => boolean | void | undefined;\n  searchList?: DropdownItem[];\n  addToSearchList?: (e: DropdownItem) => void;\n  dropdownScrollable?: boolean;\n};\n\nconst ClearIconWrapper = styled.div`\n  display: flex;\n  align-items: center;\n\n  &.hidden {\n    display: none !important;\n  }\n`;\n\nconst SearchBar: React.FunctionComponent<SeachBarProps> = ({\n                                                             id,\n                                                             searchTerm,\n                                                             setSearchTerm,\n                                                             enterSearch,\n                                                             removeSearch,\n                                                             placeholder,\n                                                             performSearchLabel,\n                                                             disabled,\n                                                             validationMessage,\n                                                             onKeyDown,\n                                                             size,\n                                                             margin = '4px 0',\n                                                             showDropdown,\n                                                             dropdownButtonIcon,\n                                                             dropdownButtonLabel,\n                                                             dropdownButtonVariant,\n                                                             dropdownButtonAction,\n                                                             searchList=[],\n                                                             addToSearchList,\n                                                             dropdownScrollable\n                                                           }) => {\n  const containerRef = React.useRef<any>(null);\n\n  const [isOpen, setIsOpen] = React.useState(false);\n  const dropdownRef = useClickOutsideRef(()=>setIsOpen(false), [containerRef]);\n\n  const isPressingEnter = (e: any) => {\n    if (e.key === 'Enter') {\n      e.preventDefault();\n      e.stopPropagation();\n      return true;\n    }\n    return false;\n  };\n\n  const enteredSearchTerm = (e: any) => {\n    addToSearchList && addToSearchList({value:e.target.value});\n    enterSearch(e);\n  }\n\n  const dropdownAction = () => {\n    if(dropdownButtonAction)\n      dropdownButtonAction();    \n  }\n\n  return (\n    <>\n      <InputWrapper\n        disabled={disabled}\n        margin={margin}>\n        <SearchField id={'id'} size={size}\n                     ref={containerRef}\n                     searchTerm={searchTerm}\n                     disabled={disabled}\n                     validationMessage={validationMessage}>\n          <SearchBarInput\n            placeholder={disabled ? '' : placeholder}\n            id={id}\n            size={size}\n            disabled={disabled}\n            setSearchTerm={(term: string) => setSearchTerm(term)}\n            searchTerm={searchTerm}\n            onKeyDown={onKeyDown}\n            enterSearch={enteredSearchTerm}\n            focusParentRefs={[containerRef]}\n            onClick={()=>setIsOpen(!isOpen)}\n            ref={dropdownRef}\n          />\n          <SearchIconWrapper className={size ? size : ''} aria-label={performSearchLabel}>\n            <IconButton id={`${id}_Search`}\n                        variant=\"secondary\"\n                        shape=\"circular\"\n                        action={enterSearch}\n                        disabled={disabled}\n                        onKeyPress={(e: any) => (isPressingEnter(e) ? enterSearch(e) : null)}>\n              <SearchIcon size=\"24px\"/>\n            </IconButton>\n          </SearchIconWrapper>\n          <ClearIconWrapper className={(size ? size : '').concat(!searchTerm ? ' hidden' : '')}>\n            <IconButton id={`${id}_Clear`}\n                        variant=\"secondary\"\n                        shape=\"circular\"\n                        action={removeSearch}\n                        disabled={disabled}\n                        onKeyPress={(e: any) => (isPressingEnter(e) ? removeSearch(e) : null)}>\n              <ClearIcon size=\"24px\"/>\n            </IconButton>\n          </ClearIconWrapper>\n        </SearchField>\n\n      {showDropdown && <DropdownContent id={'search'}\n                                        containerRef={containerRef}\n          size={size}\n          isButton={false}\n          ariaRolesType=\"input\"\n          customizationProps={{\n            items:searchList,\n            action: dropdownAction,\n            actionLabel: dropdownButtonLabel,\n            actionIcon: dropdownButtonIcon,\n            actionVariant: dropdownButtonVariant,\n            onValueUpdate:(e)=>{},\n            scrollable: dropdownScrollable,\n            pinTopItem: true\n          }}\n          isOpen={isOpen}\n          setIsOpen={setIsOpen}\n          filter={''}\n          selectedValues={searchTerm ? [searchTerm] : []}\n          setSelectedValues={(e)=>setSearchTerm(e[0])}\n          messageOnNoResults={''}\n          focused={null}\n          setFocused={()=>{}}\n        />}\n\n      </InputWrapper>\n      {validationMessage && (\n        <ErrorMessage className={size || ''}>\n          <TechnicalWarning color={COLORS.critical_400} className={size || ''}/>\n          <span>{validationMessage}</span>\n        </ErrorMessage>\n      )}\n    </>\n  );\n};\n\nexport default SearchBar;\n"],"mappings":"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"}

package/dist/InputFields/TextField.cjs

@@ -15,8 +15,9 @@ var _styles = require("../styles");
 var _types = require("../types");
 var _styling = require("./styling");
 var _common = require("../common");
+var _TooltipOverflow = _interopRequireDefault(require("../Tooltips/TooltipOverflow"));
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["id", "disabled", "readOnly", "onChange", "value", "validationMessage", "type", "autoComplete", "placeholder", "required", "pattern", "maxLength", "withoutBorder", "state", "size", "margin", "note", "className", "dataTestId"];
+var _excluded = ["id", "disabled", "readOnly", "onChange", "value", "validationMessage", "type", "autoComplete", "placeholder", "required", "pattern", "maxLength", "withoutBorder", "state", "size", "margin", "overflowTooltipPosition", "note", "className", "dataTestId"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -39,6 +40,7 @@ var TextField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     size = _ref.size,
     _ref$margin = _ref.margin,
     margin = _ref$margin === void 0 ? '4px 0' : _ref$margin,
+    overflowTooltipPosition = _ref.overflowTooltipPosition,
     note = _ref.note,
     className = _ref.className,
     dataTestId = _ref.dataTestId,
@@ -79,7 +81,16 @@ var TextField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         pattern: pattern,
         maxLength: maxLength,
         withoutBorder: withoutBorder
-      }, rest)), validationMessage && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styling.ValidationMessage, {
+      }, rest)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TooltipOverflow.default, {
+        value: value,
+        position: overflowTooltipPosition,
+        input: elementRef,
+        withArrow: true,
+        maxWidth: "100%",
+        size: size,
+        align: "end",
+        children: value
+      }), validationMessage && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styling.ValidationMessage, {
         className: size || '',
         type: state !== null && state !== void 0 ? state : _types.States.Invalid,
         children: [state === _types.States.Valid ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.CheckMark, {
@@ -112,6 +123,7 @@ TextField.propTypes = {
   pattern: _propTypes.default.string,
   maxLength: _propTypes.default.number,
   withoutBorder: _propTypes.default.bool,
+  overflowTooltipPosition: _propTypes.default.oneOf(['top', 'bottom']),
   margin: _propTypes.default.string
 };
 var _default = TextField;

package/dist/InputFields/TextField.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.cjs","names":["TextField","React","forwardRef","ref","id","disabled","readOnly","onChange","value","validationMessage","type","autoComplete","placeholder","required","pattern","maxLength","withoutBorder","state","size","margin","note","className","dataTestId","rest","elementRef","useFocusVisibleRef","useImperativeHandle","current","cls","States","Invalid","e","preventDefault","undefined","target","Valid","COLORS","correct_400","critical_400","icon","message"],"sources":["../../src/InputFields/TextField.tsx"],"sourcesContent":["import * as React from 'react';\nimport {CheckMark, TechnicalWarning} from '../icons/systemicons/SystemIcons';\nimport {COLORS} from '../styles';\nimport {Size, States, Testable} from '../types';\nimport {ErrorMessage, InputFieldStyling, InputWrapper, NoteMessage, ValidationMessage} from './styling';\nimport {useFocusVisibleRef} from '../common';\nimport {TextFieldNote} from './types';\n\ntype TextFieldProps =\n  Testable & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'onChange' | 'value' | 'disabled' | 'id'  | 'type' | 'readOnly' | 'autoComplete' | 'pattern' | 'maxLength'>\n  & {\n  id?: string;\n  disabled?: boolean;\n  readOnly?: boolean;\n  onChange?: (text: string) => void;\n  value?: string;\n  validationMessage?: string;\n  type?: string;\n  state?: States.Invalid | States.Valid;\n  autoComplete?: string;\n  placeholder?: string;\n  required?: boolean;\n  pattern?: string;\n  maxLength?: number;\n  withoutBorder?: boolean;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n  note?: TextFieldNote;\n};\n\nconst TextField = React.forwardRef(({\n                                      id,\n                                      disabled,\n                                      readOnly,\n                                      onChange,\n                                      value,\n                                      validationMessage,\n                                      type,\n                                      autoComplete,\n                                      placeholder,\n                                      required,\n                                      pattern,\n                                      maxLength,\n                                      withoutBorder,\n                                      state,\n                                      size,\n                                      margin = '4px 0',\n                                      note,\n                                      className,\n                                      dataTestId,\n                                      ...rest\n                                    }: TextFieldProps, ref) => {\n  const elementRef = useFocusVisibleRef();\n\n  React.useImperativeHandle(ref, () => elementRef.current, [elementRef]);\n\n  const cls = `${state || (validationMessage ? States.Invalid : '')} ${size || ''}`;\n\n  return (\n    <>\n      <InputWrapper\n        readOnly={readOnly}\n        disabled={disabled}\n        margin={margin}\n        onClick={(e: any) => {\n          if (disabled || readOnly) {\n            e.preventDefault();\n          }\n        }}>\n        <InputFieldStyling\n          id={id}\n          data-testId={dataTestId}\n          ref={elementRef}\n          type={type || 'text'}\n          value={value}\n          className={cls}\n          tabIndex={readOnly || disabled ? -1 : 0}\n          autoComplete={autoComplete}\n          placeholder={disabled ? undefined : placeholder}\n          disabled={disabled}\n          readOnly={readOnly}\n          onChange={(e: any) => onChange && onChange(e?.target?.value || '')}\n          activeErrorMessage={!!validationMessage && state !== States.Valid}\n          required={required}\n          pattern={pattern}\n          maxLength={maxLength}\n          withoutBorder={withoutBorder}\n          {...rest}\n        />\n        {validationMessage && (\n          <ValidationMessage className={size || ''} type={state ?? States.Invalid}>\n            {state === States.Valid ? <CheckMark color={COLORS.correct_400}/> :\n              <TechnicalWarning color={COLORS.critical_400}/>}\n            <span>{validationMessage}</span>\n          </ValidationMessage>\n        )}\n        {note && !disabled && (\n          <NoteMessage className={size}>\n            {note.icon}\n            <span>{note.message}</span>\n          </NoteMessage>\n        )}\n      </InputWrapper>\n    </>\n  );\n});\n\nexport default TextField;\n"],"mappings":";;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AAA6C;AAAA;AAAA;AAAA;AAAA;AAAA;AAyB7C,IAAMA,SAAS,gBAAGC,KAAK,CAACC,UAAU,CAAC,gBAqBoBC,GAAG,EAAK;EAAA,IApBzBC,EAAE,QAAFA,EAAE;IACFC,QAAQ,QAARA,QAAQ;IACRC,QAAQ,QAARA,QAAQ;IACRC,SAAQ,QAARA,QAAQ;IACRC,KAAK,QAALA,KAAK;IACLC,iBAAiB,QAAjBA,iBAAiB;IACjBC,IAAI,QAAJA,IAAI;IACJC,YAAY,QAAZA,YAAY;IACZC,WAAW,QAAXA,WAAW;IACXC,QAAQ,QAARA,QAAQ;IACRC,OAAO,QAAPA,OAAO;IACPC,SAAS,QAATA,SAAS;IACTC,aAAa,QAAbA,aAAa;IACbC,KAAK,QAALA,KAAK;IACLC,IAAI,QAAJA,IAAI;IAAA,mBACJC,MAAM;IAANA,MAAM,4BAAG,OAAO;IAChBC,IAAI,QAAJA,IAAI;IACJC,SAAS,QAATA,SAAS;IACTC,UAAU,QAAVA,UAAU;IACPC,IAAI;EAE3C,IAAMC,UAAU,GAAG,IAAAC,0BAAkB,GAAE;EAEvCxB,KAAK,CAACyB,mBAAmB,CAACvB,GAAG,EAAE;IAAA,OAAMqB,UAAU,CAACG,OAAO;EAAA,GAAE,CAACH,UAAU,CAAC,CAAC;EAEtE,IAAMI,GAAG,aAAMX,KAAK,KAAKR,iBAAiB,GAAGoB,aAAM,CAACC,OAAO,GAAG,EAAE,CAAC,cAAIZ,IAAI,IAAI,EAAE,CAAE;EAEjF,oBACE;IAAA,uBACE,sBAAC,qBAAY;MACX,QAAQ,EAAEZ,QAAS;MACnB,QAAQ,EAAED,QAAS;MACnB,MAAM,EAAEc,MAAO;MACf,OAAO,EAAE,iBAACY,CAAM,EAAK;QACnB,IAAI1B,QAAQ,IAAIC,QAAQ,EAAE;UACxByB,CAAC,CAACC,cAAc,EAAE;QACpB;MACF,CAAE;MAAA,wBACF,qBAAC,0BAAiB;QAChB,EAAE,EAAE5B,EAAG;QACP,eAAakB,UAAW;QACxB,GAAG,EAAEE,UAAW;QAChB,IAAI,EAAEd,IAAI,IAAI,MAAO;QACrB,KAAK,EAAEF,KAAM;QACb,SAAS,EAAEoB,GAAI;QACf,QAAQ,EAAEtB,QAAQ,IAAID,QAAQ,GAAG,CAAC,CAAC,GAAG,CAAE;QACxC,YAAY,EAAEM,YAAa;QAC3B,WAAW,EAAEN,QAAQ,GAAG4B,SAAS,GAAGrB,WAAY;QAChD,QAAQ,EAAEP,QAAS;QACnB,QAAQ,EAAEC,QAAS;QACnB,QAAQ,EAAE,kBAACyB,CAAM;UAAA;UAAA,OAAKxB,SAAQ,IAAIA,SAAQ,CAAC,CAAAwB,CAAC,aAADA,CAAC,oCAADA,CAAC,CAAEG,MAAM,8CAAT,UAAW1B,KAAK,KAAI,EAAE,CAAC;QAAA,CAAC;QACnE,kBAAkB,EAAE,CAAC,CAACC,iBAAiB,IAAIQ,KAAK,KAAKY,aAAM,CAACM,KAAM;QAClE,QAAQ,EAAEtB,QAAS;QACnB,OAAO,EAAEC,OAAQ;QACjB,SAAS,EAAEC,SAAU;QACrB,aAAa,EAAEC;MAAc,GACzBO,IAAI,EACR,EACDd,iBAAiB,iBAChB,sBAAC,0BAAiB;QAAC,SAAS,EAAES,IAAI,IAAI,EAAG;QAAC,IAAI,EAAED,KAAK,aAALA,KAAK,cAALA,KAAK,GAAIY,aAAM,CAACC,OAAQ;QAAA,WACrEb,KAAK,KAAKY,aAAM,CAACM,KAAK,gBAAG,qBAAC,sBAAS;UAAC,KAAK,EAAEC,cAAM,CAACC;QAAY,EAAE,gBAC/D,qBAAC,6BAAgB;UAAC,KAAK,EAAED,cAAM,CAACE;QAAa,EAAE,eACjD;UAAA,UAAO7B;QAAiB,EAAQ;MAAA,EAEnC,EACAW,IAAI,IAAI,CAACf,QAAQ,iBAChB,sBAAC,oBAAW;QAAC,SAAS,EAAEa,IAAK;QAAA,WAC1BE,IAAI,CAACmB,IAAI,eACV;UAAA,UAAOnB,IAAI,CAACoB;QAAO,EAAQ;MAAA,EAE9B;IAAA;EACY,EACd;AAEP,CAAC,CAAC;AAAC;EA9FDpC,EAAE;EACFC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,KAAK;EACLC,iBAAiB;EACjBC,IAAI;EAEJC,YAAY;EACZC,WAAW;EACXC,QAAQ;EACRC,OAAO;EACPC,SAAS;EACTC,aAAa;EAEbG,MAAM;AAAA;AAAA,eAiFOnB,SAAS;AAAA"}
+{"version":3,"file":"TextField.cjs","names":["TextField","React","forwardRef","ref","id","disabled","readOnly","onChange","value","validationMessage","type","autoComplete","placeholder","required","pattern","maxLength","withoutBorder","state","size","margin","overflowTooltipPosition","note","className","dataTestId","rest","elementRef","useFocusVisibleRef","useImperativeHandle","current","cls","States","Invalid","e","preventDefault","undefined","target","Valid","COLORS","correct_400","critical_400","icon","message"],"sources":["../../src/InputFields/TextField.tsx"],"sourcesContent":["import * as React from 'react';\nimport {CheckMark, TechnicalWarning} from '../icons/systemicons/SystemIcons';\nimport {COLORS} from '../styles';\nimport {Size, States, Testable} from '../types';\nimport {ErrorMessage, InputFieldStyling, InputWrapper, NoteMessage, ValidationMessage} from './styling';\nimport {useFocusVisibleRef} from '../common';\nimport {TextFieldNote} from './types';\nimport TooltipOverflow from '../Tooltips/TooltipOverflow';\n\ntype TextFieldProps =\n  Testable & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'onChange' | 'value' | 'disabled' | 'id'  | 'type' | 'readOnly' | 'autoComplete' | 'pattern' | 'maxLength'>\n  & {\n  id?: string;\n  disabled?: boolean;\n  readOnly?: boolean;\n  onChange?: (text: string) => void;\n  value?: string;\n  validationMessage?: string;\n  type?: string;\n  state?: States.Invalid | States.Valid;\n  autoComplete?: string;\n  placeholder?: string;\n  required?: boolean;\n  pattern?: string;\n  maxLength?: number;\n  withoutBorder?: boolean;\n  overflowTooltipPosition?: 'top' | 'bottom';\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n  note?: TextFieldNote;\n};\n\nconst TextField = React.forwardRef(({\n                                      id,\n                                      disabled,\n                                      readOnly,\n                                      onChange,\n                                      value,\n                                      validationMessage,\n                                      type,\n                                      autoComplete,\n                                      placeholder,\n                                      required,\n                                      pattern,\n                                      maxLength,\n                                      withoutBorder,\n                                      state,\n                                      size,\n                                      margin = '4px 0',\n                                      overflowTooltipPosition,\n                                      note,\n                                      className,\n                                      dataTestId,\n                                      ...rest\n                                    }: TextFieldProps, ref) => {\n  const elementRef = useFocusVisibleRef();\n\n  React.useImperativeHandle(ref, () => elementRef.current, [elementRef]);\n\n  const cls = `${state || (validationMessage ? States.Invalid : '')} ${size || ''}`;\n\n  return (\n    <>\n      <InputWrapper\n        readOnly={readOnly}\n        disabled={disabled}\n        margin={margin}\n        onClick={(e: any) => {\n          if (disabled || readOnly) {\n            e.preventDefault();\n          }\n        }}>\n        <InputFieldStyling\n          id={id}\n          data-testId={dataTestId}\n          ref={elementRef}\n          type={type || 'text'}\n          value={value}\n          className={cls}\n          tabIndex={readOnly || disabled ? -1 : 0}\n          autoComplete={autoComplete}\n          placeholder={disabled ? undefined : placeholder}\n          disabled={disabled}\n          readOnly={readOnly}\n          onChange={(e: any) => onChange && onChange(e?.target?.value || '')}\n          activeErrorMessage={!!validationMessage && state !== States.Valid}\n          required={required}\n          pattern={pattern}\n          maxLength={maxLength}\n          withoutBorder={withoutBorder}\n          {...rest}\n        />\n        <TooltipOverflow value={value} position={overflowTooltipPosition} input={elementRef} withArrow={true} maxWidth=\"100%\" size={size} align='end'>\n          {value}\n        </TooltipOverflow>\n\n        {validationMessage && (\n          <ValidationMessage className={size || ''} type={state ?? States.Invalid}>\n            {state === States.Valid ? <CheckMark color={COLORS.correct_400}/> :\n              <TechnicalWarning color={COLORS.critical_400}/>}\n            <span>{validationMessage}</span>\n          </ValidationMessage>\n        )}\n        {note && !disabled && (\n          <NoteMessage className={size}>\n            {note.icon}\n            <span>{note.message}</span>\n          </NoteMessage>\n        )}\n      </InputWrapper>\n    </>\n  );\n});\n\nexport default TextField;\n"],"mappings":"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"}

package/dist/InputFields/TextField.d.ts

@@ -16,6 +16,7 @@ declare const TextField: React.ForwardRefExoticComponent<Testable & Omit<React.I
     pattern?: string | undefined;
     maxLength?: number | undefined;
     withoutBorder?: boolean | undefined;
+    overflowTooltipPosition?: "top" | "bottom" | undefined;
     size?: Size.Small | Size.Medium | undefined;
     margin?: string | undefined;
     note?: TextFieldNote | undefined;

package/dist/InputFields/TextField.js

@@ -1,7 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _pt from "prop-types";
-var _excluded = ["id", "disabled", "readOnly", "onChange", "value", "validationMessage", "type", "autoComplete", "placeholder", "required", "pattern", "maxLength", "withoutBorder", "state", "size", "margin", "note", "className", "dataTestId"];
+var _excluded = ["id", "disabled", "readOnly", "onChange", "value", "validationMessage", "type", "autoComplete", "placeholder", "required", "pattern", "maxLength", "withoutBorder", "state", "size", "margin", "overflowTooltipPosition", "note", "className", "dataTestId"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import * as React from 'react';
@@ -10,9 +10,10 @@ import { COLORS } from '../styles';
 import { States } from '../types';
 import { InputFieldStyling, InputWrapper, NoteMessage, ValidationMessage } from './styling';
 import { useFocusVisibleRef } from '../common';
-import { Fragment as _Fragment } from "react/jsx-runtime";
+import TooltipOverflow from '../Tooltips/TooltipOverflow';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
 var TextField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var id = _ref.id,
     disabled = _ref.disabled,
@@ -31,6 +32,7 @@ var TextField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     size = _ref.size,
     _ref$margin = _ref.margin,
     margin = _ref$margin === void 0 ? '4px 0' : _ref$margin,
+    overflowTooltipPosition = _ref.overflowTooltipPosition,
     note = _ref.note,
     className = _ref.className,
     dataTestId = _ref.dataTestId,
@@ -71,7 +73,16 @@ var TextField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         pattern: pattern,
         maxLength: maxLength,
         withoutBorder: withoutBorder
-      }, rest)), validationMessage && /*#__PURE__*/_jsxs(ValidationMessage, {
+      }, rest)), /*#__PURE__*/_jsx(TooltipOverflow, {
+        value: value,
+        position: overflowTooltipPosition,
+        input: elementRef,
+        withArrow: true,
+        maxWidth: "100%",
+        size: size,
+        align: "end",
+        children: value
+      }), validationMessage && /*#__PURE__*/_jsxs(ValidationMessage, {
         className: size || '',
         type: state !== null && state !== void 0 ? state : States.Invalid,
         children: [state === States.Valid ? /*#__PURE__*/_jsx(CheckMark, {
@@ -104,6 +115,7 @@ TextField.propTypes = {
   pattern: _pt.string,
   maxLength: _pt.number,
   withoutBorder: _pt.bool,
+  overflowTooltipPosition: _pt.oneOf(['top', 'bottom']),
   margin: _pt.string
 };
 export default TextField;

package/dist/InputFields/TextField.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.js","names":["React","CheckMark","TechnicalWarning","COLORS","States","InputFieldStyling","InputWrapper","NoteMessage","ValidationMessage","useFocusVisibleRef","TextField","forwardRef","ref","id","disabled","readOnly","onChange","value","validationMessage","type","autoComplete","placeholder","required","pattern","maxLength","withoutBorder","state","size","margin","note","className","dataTestId","rest","elementRef","useImperativeHandle","current","cls","Invalid","e","preventDefault","undefined","target","Valid","correct_400","critical_400","icon","message"],"sources":["../../src/InputFields/TextField.tsx"],"sourcesContent":["import * as React from 'react';\nimport {CheckMark, TechnicalWarning} from '../icons/systemicons/SystemIcons';\nimport {COLORS} from '../styles';\nimport {Size, States, Testable} from '../types';\nimport {ErrorMessage, InputFieldStyling, InputWrapper, NoteMessage, ValidationMessage} from './styling';\nimport {useFocusVisibleRef} from '../common';\nimport {TextFieldNote} from './types';\n\ntype TextFieldProps =\n  Testable & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'onChange' | 'value' | 'disabled' | 'id'  | 'type' | 'readOnly' | 'autoComplete' | 'pattern' | 'maxLength'>\n  & {\n  id?: string;\n  disabled?: boolean;\n  readOnly?: boolean;\n  onChange?: (text: string) => void;\n  value?: string;\n  validationMessage?: string;\n  type?: string;\n  state?: States.Invalid | States.Valid;\n  autoComplete?: string;\n  placeholder?: string;\n  required?: boolean;\n  pattern?: string;\n  maxLength?: number;\n  withoutBorder?: boolean;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n  note?: TextFieldNote;\n};\n\nconst TextField = React.forwardRef(({\n                                      id,\n                                      disabled,\n                                      readOnly,\n                                      onChange,\n                                      value,\n                                      validationMessage,\n                                      type,\n                                      autoComplete,\n                                      placeholder,\n                                      required,\n                                      pattern,\n                                      maxLength,\n                                      withoutBorder,\n                                      state,\n                                      size,\n                                      margin = '4px 0',\n                                      note,\n                                      className,\n                                      dataTestId,\n                                      ...rest\n                                    }: TextFieldProps, ref) => {\n  const elementRef = useFocusVisibleRef();\n\n  React.useImperativeHandle(ref, () => elementRef.current, [elementRef]);\n\n  const cls = `${state || (validationMessage ? States.Invalid : '')} ${size || ''}`;\n\n  return (\n    <>\n      <InputWrapper\n        readOnly={readOnly}\n        disabled={disabled}\n        margin={margin}\n        onClick={(e: any) => {\n          if (disabled || readOnly) {\n            e.preventDefault();\n          }\n        }}>\n        <InputFieldStyling\n          id={id}\n          data-testId={dataTestId}\n          ref={elementRef}\n          type={type || 'text'}\n          value={value}\n          className={cls}\n          tabIndex={readOnly || disabled ? -1 : 0}\n          autoComplete={autoComplete}\n          placeholder={disabled ? undefined : placeholder}\n          disabled={disabled}\n          readOnly={readOnly}\n          onChange={(e: any) => onChange && onChange(e?.target?.value || '')}\n          activeErrorMessage={!!validationMessage && state !== States.Valid}\n          required={required}\n          pattern={pattern}\n          maxLength={maxLength}\n          withoutBorder={withoutBorder}\n          {...rest}\n        />\n        {validationMessage && (\n          <ValidationMessage className={size || ''} type={state ?? States.Invalid}>\n            {state === States.Valid ? <CheckMark color={COLORS.correct_400}/> :\n              <TechnicalWarning color={COLORS.critical_400}/>}\n            <span>{validationMessage}</span>\n          </ValidationMessage>\n        )}\n        {note && !disabled && (\n          <NoteMessage className={size}>\n            {note.icon}\n            <span>{note.message}</span>\n          </NoteMessage>\n        )}\n      </InputWrapper>\n    </>\n  );\n});\n\nexport default TextField;\n"],"mappings":"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"}
+{"version":3,"file":"TextField.js","names":["React","CheckMark","TechnicalWarning","COLORS","States","InputFieldStyling","InputWrapper","NoteMessage","ValidationMessage","useFocusVisibleRef","TooltipOverflow","TextField","forwardRef","ref","id","disabled","readOnly","onChange","value","validationMessage","type","autoComplete","placeholder","required","pattern","maxLength","withoutBorder","state","size","margin","overflowTooltipPosition","note","className","dataTestId","rest","elementRef","useImperativeHandle","current","cls","Invalid","e","preventDefault","undefined","target","Valid","correct_400","critical_400","icon","message"],"sources":["../../src/InputFields/TextField.tsx"],"sourcesContent":["import * as React from 'react';\nimport {CheckMark, TechnicalWarning} from '../icons/systemicons/SystemIcons';\nimport {COLORS} from '../styles';\nimport {Size, States, Testable} from '../types';\nimport {ErrorMessage, InputFieldStyling, InputWrapper, NoteMessage, ValidationMessage} from './styling';\nimport {useFocusVisibleRef} from '../common';\nimport {TextFieldNote} from './types';\nimport TooltipOverflow from '../Tooltips/TooltipOverflow';\n\ntype TextFieldProps =\n  Testable & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'onChange' | 'value' | 'disabled' | 'id'  | 'type' | 'readOnly' | 'autoComplete' | 'pattern' | 'maxLength'>\n  & {\n  id?: string;\n  disabled?: boolean;\n  readOnly?: boolean;\n  onChange?: (text: string) => void;\n  value?: string;\n  validationMessage?: string;\n  type?: string;\n  state?: States.Invalid | States.Valid;\n  autoComplete?: string;\n  placeholder?: string;\n  required?: boolean;\n  pattern?: string;\n  maxLength?: number;\n  withoutBorder?: boolean;\n  overflowTooltipPosition?: 'top' | 'bottom';\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n  note?: TextFieldNote;\n};\n\nconst TextField = React.forwardRef(({\n                                      id,\n                                      disabled,\n                                      readOnly,\n                                      onChange,\n                                      value,\n                                      validationMessage,\n                                      type,\n                                      autoComplete,\n                                      placeholder,\n                                      required,\n                                      pattern,\n                                      maxLength,\n                                      withoutBorder,\n                                      state,\n                                      size,\n                                      margin = '4px 0',\n                                      overflowTooltipPosition,\n                                      note,\n                                      className,\n                                      dataTestId,\n                                      ...rest\n                                    }: TextFieldProps, ref) => {\n  const elementRef = useFocusVisibleRef();\n\n  React.useImperativeHandle(ref, () => elementRef.current, [elementRef]);\n\n  const cls = `${state || (validationMessage ? States.Invalid : '')} ${size || ''}`;\n\n  return (\n    <>\n      <InputWrapper\n        readOnly={readOnly}\n        disabled={disabled}\n        margin={margin}\n        onClick={(e: any) => {\n          if (disabled || readOnly) {\n            e.preventDefault();\n          }\n        }}>\n        <InputFieldStyling\n          id={id}\n          data-testId={dataTestId}\n          ref={elementRef}\n          type={type || 'text'}\n          value={value}\n          className={cls}\n          tabIndex={readOnly || disabled ? -1 : 0}\n          autoComplete={autoComplete}\n          placeholder={disabled ? undefined : placeholder}\n          disabled={disabled}\n          readOnly={readOnly}\n          onChange={(e: any) => onChange && onChange(e?.target?.value || '')}\n          activeErrorMessage={!!validationMessage && state !== States.Valid}\n          required={required}\n          pattern={pattern}\n          maxLength={maxLength}\n          withoutBorder={withoutBorder}\n          {...rest}\n        />\n        <TooltipOverflow value={value} position={overflowTooltipPosition} input={elementRef} withArrow={true} maxWidth=\"100%\" size={size} align='end'>\n          {value}\n        </TooltipOverflow>\n\n        {validationMessage && (\n          <ValidationMessage className={size || ''} type={state ?? States.Invalid}>\n            {state === States.Valid ? <CheckMark color={COLORS.correct_400}/> :\n              <TechnicalWarning color={COLORS.critical_400}/>}\n            <span>{validationMessage}</span>\n          </ValidationMessage>\n        )}\n        {note && !disabled && (\n          <NoteMessage className={size}>\n            {note.icon}\n            <span>{note.message}</span>\n          </NoteMessage>\n        )}\n      </InputWrapper>\n    </>\n  );\n});\n\nexport default TextField;\n"],"mappings":"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"}

package/dist/InputFields/Textarea.cjs

@@ -15,7 +15,6 @@ var _styling = require("./styling");
 var _types = require("../types");
 var _SystemIcons = require("../icons/systemicons/SystemIcons");
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _common = require("../common");
 var _jsxRuntime = require("react/jsx-runtime");
 var _excluded = ["id", "placeholder", "state", "value", "size", "disabled", "validationMessage", "onChange", "margin", "autoHeight", "note", "required", "className", "dataTestId"];
 var _templateObject, _templateObject2;
@@ -27,9 +26,9 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 var TextareaWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  ", "\n"])), function (props) {
   return props.margin ? "margin: ".concat(props.margin, ";") : '';
 });
-var TextArea = _styledComponents.default.textarea(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: block;\n  background: ", ";\n  border-radius: 4px;\n  outline: none;\n  margin-bottom: 4px;\n  padding: 16px;\n  border: none;\n  box-shadow: inset 0 0 0 1px ", ";\n\n  resize: ", ";\n\n  ", "\n  &.small {\n    ", "\n    width: 304px;\n\n    &::placeholder {\n      ", "\n    }\n  }\n\n  &.medium {\n    ", "\n    width: 344px;\n  }\n\n  &:focus:not(.focus-visible) {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &.focus-visible {\n    ", "\n  }\n\n  &.invalid {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &.valid {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &:hover {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &.active {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &:read-only:not(:disabled) {\n    ", "\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n    border: 1px solid ", ";\n    box-shadow: none !important;\n    color: ", " !important;\n\n    &::placeholder {\n      color: ", ";\n    }\n  }\n\n  &::placeholder {\n    ", "\n  }\n"])), _styles.COLORS.white, _styles.COLORS.neutral_400, function (props) {
+var TextArea = _styledComponents.default.textarea(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  border: 1px solid ", ";\n  background: ", ";\n  border-radius: 4px;\n  outline: none;\n  margin: 4px 0px;\n  padding: 16px;\n\n  resize: ", ";\n\n  ", "\n\n  &.small {\n    ", "\n    width: 304px;\n    &::placeholder {\n      ", "\n    }\n  }\n\n  &.medium {\n    ", "\n    width: 344px;\n  }\n\n  &:hover {\n    border: 2px solid ", ";\n    margin: 3px -1px;\n  }\n\n  &:active,\n  &:focus {\n    border: 2px solid ", ";\n    margin: 3px -1px;\n  }\n\n  &.invalid,\n  &.invalid:hover,\n  &.invalid:focus,\n  &.invalid:active {\n    border: none;\n    margin: 4px 0px;\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n\n  &.valid {\n    border: none;\n    margin: 4px 0px;\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &:disabled,\n  &:disabled:hover,\n  &:disabled:focus {\n    cursor: not-allowed;\n    border: 1px solid ", ";\n    margin: 4px 0px;\n    box-shadow: none;\n\n    &::placeholder {\n      color: ", ";\n    }\n  }\n\n  &::placeholder {\n    ", "\n  }\n"])), _styles.COLORS.neutral_400, _styles.COLORS.white, function (props) {
   return props.autoHeight ? 'none' : '';
-}, (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.black), (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.black), (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.neutral_500), (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.black), _styles.COLORS.primary_800, _styles.focusStyles, _styles.COLORS.critical_500, _styles.COLORS.correct_500, _styles.COLORS.primary_700, _styles.COLORS.primary_800, _styling.readOnlyState, _styles.COLORS.neutral_100, _styles.COLORS.neutral_300, _styles.COLORS.neutral_300, (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.neutral_500));
+}, (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.black), (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.black), (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.neutral_500), (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.black), _styles.COLORS.primary_700, _styles.COLORS.primary_800, _styles.COLORS.critical_500, _styles.COLORS.correct_500, _styles.COLORS.neutral_100, _styles.COLORS.neutral_300, (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.neutral_500));
 var Textarea = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var id = _ref.id,
     placeholder = _ref.placeholder,
@@ -46,16 +45,12 @@ var Textarea = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     className = _ref.className,
     dataTestId = _ref.dataTestId,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var elementRef = (0, _common.useFocusVisibleRef)();
-  React.useImperativeHandle(ref, function () {
-    return elementRef.current;
-  }, [elementRef]);
   var cls = "".concat(size, " ").concat(state || (validationMessage ? _types.States.Invalid : ''), " ").concat(className || '');
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(TextareaWrapper, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(TextArea, _objectSpread({
       id: id,
       "data-testId": dataTestId,
-      ref: elementRef,
+      ref: ref,
       value: value,
       placeholder: disabled ? undefined : placeholder,
       autoHeight: autoHeight,