@laerdal/life-react-components 2.1.0-dev.7 → 2.1.0-dev.8.full

package/dist/InputFields/QuickSearch.js.map

@@ -1 +1 @@
-{"version":3,"file":"QuickSearch.js","names":["React","styled","IconButton","SearchIconWrapper","StyledIcon","Size","COLORS","LoadingIndicator","Search","SearchIcon","Clear","ClearIcon","SearchBarInput","SearchField","StyledSearchField","Wrapper","div","white","neutral_400","primary_800","QuickSearch","id","searchTerm","setSearchTerm","enterSearch","removeSearch","placeholder","performSearchLabel","disabled","onKeyDown","size","margin","loading","searchFieldRef","useRef","searchFieldInputRef","useState","visible","searchFieldVisible","setSearchFieldVisible","handleClickOutside","e","current","contains","target","length","handleKeyDown","key","handleBlur","relatedTarget","handleSearchIconAction","focus","detail","useEffect","document","addEventListener","removeEventListener","focusVisible","term","neutral_300","neutral_600","Small"],"sources":["../../src/InputFields/QuickSearch.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport IconButton from '../Button/Iconbutton';\nimport { SearchIconWrapper, StyledIcon } from './styling';\nimport { Size } from '../types';\nimport { COLORS, LoadingIndicator } from '..';\nimport { Search as SearchIcon, Clear as ClearIcon } from '../icons/systemicons/SystemIcons';\nimport SearchBarInput from './components/SearchBarInput';\nimport SearchField, { StyledSearchField } from './components/SearchField';\n\nconst Wrapper = styled.div`\n  width: 100%;\n\n  ${StyledSearchField} {\n    transition: box-shadow 0.2s ease-in-out, width 0.2s ease-in-out;\n\n    background-color: transparent;\n\n    &.small {\n      width: 48px;\n    }\n\n    &.medium {\n      width: 56px;\n    }\n\n    &.expanded {\n      width: 100%;\n    }\n\n    box-shadow: none;\n\n    &:hover {\n      box-shadow: none;\n    }\n\n    &.expanded {\n      background-color: ${COLORS.white};\n      box-shadow: inset 0 0 0 1px ${COLORS.neutral_400};\n    }\n\n    &.expanded:hover,\n    &.expanded:focus-within {\n      box-shadow: inset 0 0 0 2px ${COLORS.primary_800};\n    }\n  }\n`;\n\ntype QuickSearchProps = {\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  onKeyDown?: (e: React.KeyboardEvent) => void;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n  loading?: boolean;\n};\n\nconst QuickSearch: React.FunctionComponent<QuickSearchProps> = ({\n  id,\n  searchTerm,\n  setSearchTerm,\n  enterSearch,\n  removeSearch,\n  placeholder,\n  performSearchLabel,\n  disabled,\n  onKeyDown,\n  size,\n  margin,\n  loading,\n}: QuickSearchProps) => {\n  const searchFieldRef = React.useRef<HTMLDivElement>(null);\n  const searchFieldInputRef = React.useRef<HTMLInputElement>(null);\n\n  const [searchFieldVisible, setSearchFieldVisible] = React.useState<{ visible: boolean; focus?: boolean }>({\n    visible: false,\n  });\n\n  const handleClickOutside = (e: any) => {\n    if (searchFieldRef?.current && !searchFieldRef.current.contains(e.target)) {\n      if (searchFieldVisible?.visible && !searchTerm?.length) {\n        setSearchFieldVisible({ visible: false });\n      }\n    }\n  };\n\n  const handleKeyDown = (e: any) => {\n    if (onKeyDown) {\n      onKeyDown(e);\n    }\n    if (e.key === 'Escape') {\n      if (searchFieldVisible?.visible && !searchTerm?.length) {\n        setSearchFieldVisible({ visible: false });\n      }\n    }\n  };\n\n  const handleBlur = (e: any) => {\n    if (!searchTerm && (!e.relatedTarget || !searchFieldRef.current?.contains(e.relatedTarget))) {\n      setSearchFieldVisible({ visible: false });\n    }\n  };\n\n  const handleSearchIconAction = (e: any) => {\n    if (!searchFieldVisible?.visible) {\n      setSearchFieldVisible({\n        visible: !searchFieldVisible.visible,\n        focus: !searchFieldVisible.visible && e?.detail !== 1,\n      });\n    }\n  };\n\n  // set search field visibility on search term change\n  React.useEffect(() => {\n    if (!!searchTerm?.length && !searchFieldVisible?.visible) {\n      setSearchFieldVisible({ visible: true, focus: false });\n    }\n  }, [searchTerm, searchFieldVisible]);\n\n  // register click outside handler\n  React.useEffect(() => {\n    document.addEventListener('click', handleClickOutside);\n    return () => {\n      document.removeEventListener('click', handleClickOutside);\n    };\n  }, []);\n\n  // focus search input on visibility change\n  React.useEffect(() => {\n    if (searchFieldVisible?.visible) {\n      searchFieldInputRef?.current?.focus({ focusVisible: searchFieldVisible.focus } as any);\n    }\n  }, [searchFieldVisible.visible, searchFieldInputRef]);\n\n  return (\n    <Wrapper>\n      <SearchField\n        ref={searchFieldRef}\n        id={id}\n        size={size}\n        searchTerm={searchTerm}\n        style={{\n          margin: margin,\n        }}\n        onBlur={handleBlur}\n        className={searchFieldVisible?.visible ? 'expanded' : ''}>\n        {searchFieldVisible?.visible && (\n          <SearchBarInput\n            placeholder={disabled ? '' : placeholder}\n            id={id}\n            ref={searchFieldInputRef}\n            disabled={disabled}\n            onKeyDown={handleKeyDown}\n            size={size}\n            setSearchTerm={(term: string) => setSearchTerm(term)}\n            searchTerm={searchTerm}\n            enterSearch={enterSearch}\n            focusParentRefs={[searchFieldRef]}\n          />\n        )}\n        <SearchIconWrapper className={size ? size : ''} role=\"button\" aria-label={performSearchLabel}>\n          <IconButton\n            shouldNotInteract={searchFieldVisible?.visible}\n            id={`${id}_Searchbutton`}\n            variant=\"secondary\"\n            shape=\"circular\"\n            tabIndex={searchFieldVisible?.visible ? -1 : 0}\n            action={handleSearchIconAction}>\n            <SearchIcon size=\"24px\" color={disabled ? COLORS.neutral_300 : COLORS.neutral_600} />\n          </IconButton>\n        </SearchIconWrapper>\n        <StyledIcon className={size ? size : ''} role=\"button\" hidden={!searchTerm || !searchFieldVisible?.visible}>\n          <IconButton\n            id={`${id}_Clearicon`}\n            variant=\"secondary\"\n            shape=\"circular\"\n            action={(e) => {\n              removeSearch(e);\n              searchFieldInputRef?.current?.focus();\n            }}>\n            <ClearIcon size=\"24px\" color={disabled ? COLORS.neutral_300 : COLORS.neutral_600} />\n          </IconButton>\n        </StyledIcon>\n        {loading && searchFieldVisible?.visible && (\n          <StyledIcon className={size ? size : ''}>\n            <LoadingIndicator size={Size.Small} color={COLORS.neutral_600} />\n          </StyledIcon>\n        )}\n      </SearchField>\n    </Wrapper>\n  );\n};\n\nexport default QuickSearch;\n"],"mappings":"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"}
+{"version":3,"file":"QuickSearch.js","names":["React","styled","IconButton","SearchIconWrapper","StyledIcon","Size","COLORS","LoadingIndicator","Search","SearchIcon","Clear","ClearIcon","SearchBarInput","SearchField","StyledSearchField","Wrapper","div","white","neutral_400","primary_800","QuickSearch","id","searchTerm","setSearchTerm","enterSearch","removeSearch","placeholder","performSearchLabel","disabled","onKeyDown","size","margin","loading","searchFieldRef","useRef","searchFieldInputRef","useState","visible","searchFieldVisible","setSearchFieldVisible","handleClickOutside","e","current","contains","target","length","handleKeyDown","key","handleBlur","relatedTarget","handleSearchIconAction","focus","detail","useEffect","document","addEventListener","removeEventListener","focusVisible","term","neutral_300","neutral_600","Small"],"sources":["../../src/InputFields/QuickSearch.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport IconButton from '../Button/Iconbutton';\nimport { SearchIconWrapper, StyledIcon } from './styling';\nimport { Size } from '../types';\nimport { COLORS, LoadingIndicator } from '..';\nimport { Search as SearchIcon, Clear as ClearIcon } from '../icons/systemicons/SystemIcons';\nimport SearchBarInput from './components/SearchBarInput';\nimport SearchField, { StyledSearchField } from './components/SearchField';\n\nconst Wrapper = styled.div`\n  width: 100%;\n\n  ${StyledSearchField} {\n    transition: box-shadow 0.2s ease-in-out, width 0.2s ease-in-out;\n\n    background-color: transparent;\n\n    &.small {\n      width: 48px;\n    }\n\n    &.medium {\n      width: 56px;\n    }\n\n    &.expanded {\n      width: 100%;\n    }\n\n    box-shadow: none;\n\n    &:hover {\n      box-shadow: none;\n    }\n\n    &.expanded {\n      background-color: ${COLORS.white};\n      box-shadow: inset 0 0 0 1px ${COLORS.neutral_400};\n    }\n\n    &.expanded:hover,\n    &.expanded:focus-within {\n      box-shadow: inset 0 0 0 2px ${COLORS.primary_800};\n    }\n  }\n`;\n\ntype QuickSearchProps = {\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  onKeyDown?: (e: React.KeyboardEvent) => void;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n  loading?: boolean;\n};\n\nconst QuickSearch: React.FunctionComponent<QuickSearchProps> = ({\n  id,\n  searchTerm,\n  setSearchTerm,\n  enterSearch,\n  removeSearch,\n  placeholder,\n  performSearchLabel,\n  disabled,\n  onKeyDown,\n  size,\n  margin,\n  loading,\n}: QuickSearchProps) => {\n  const searchFieldRef = React.useRef<HTMLDivElement>(null);\n  const searchFieldInputRef = React.useRef<HTMLInputElement>(null);\n\n  const [searchFieldVisible, setSearchFieldVisible] = React.useState<{ visible: boolean; focus?: boolean }>({\n    visible: false,\n  });\n\n  const handleClickOutside = (e: any) => {\n    if (searchFieldRef?.current && !searchFieldRef.current.contains(e.target)) {\n      if (searchFieldVisible?.visible && !searchTerm?.length) {\n        setSearchFieldVisible({ visible: false });\n      }\n    }\n  };\n\n  const handleKeyDown = (e: any) => {\n    if (onKeyDown) {\n      onKeyDown(e);\n    }\n    if (e.key === 'Escape') {\n      if (searchFieldVisible?.visible && !searchTerm?.length) {\n        setSearchFieldVisible({ visible: false });\n      }\n    }\n  };\n\n  const handleBlur = (e: any) => {\n    if (!searchTerm && (!e.relatedTarget || !searchFieldRef.current?.contains(e.relatedTarget))) {\n      setSearchFieldVisible({ visible: false });\n    }\n  };\n\n  const handleSearchIconAction = (e: any) => {\n    if (!searchFieldVisible?.visible) {\n      setSearchFieldVisible({\n        visible: !searchFieldVisible.visible,\n        focus: !searchFieldVisible.visible && e?.detail !== 1,\n      });\n    }\n  };\n\n  // set search field visibility on search term change\n  React.useEffect(() => {\n    if (!!searchTerm?.length && !searchFieldVisible?.visible) {\n      setSearchFieldVisible({ visible: true, focus: false });\n    }\n  }, [searchTerm, searchFieldVisible]);\n\n  // register click outside handler\n  React.useEffect(() => {\n    document.addEventListener('click', handleClickOutside);\n    return () => {\n      document.removeEventListener('click', handleClickOutside);\n    };\n  }, []);\n\n  // focus search input on visibility change\n  React.useEffect(() => {\n    if (searchFieldVisible?.visible) {\n      searchFieldInputRef?.current?.focus({ focusVisible: searchFieldVisible.focus } as any);\n    }\n  }, [searchFieldVisible.visible, searchFieldInputRef]);\n\n  return (\n    <Wrapper>\n      <SearchField\n        ref={searchFieldRef}\n        id={id}\n        size={size}\n        searchTerm={searchTerm}\n        style={{\n          margin: margin,\n        }}\n        onBlur={handleBlur}\n        className={searchFieldVisible?.visible ? 'expanded' : ''}>\n        {searchFieldVisible?.visible && (\n          <SearchBarInput\n            placeholder={disabled ? '' : placeholder}\n            id={id}\n            ref={searchFieldInputRef}\n            disabled={disabled}\n            onKeyDown={handleKeyDown}\n            size={size}\n            setSearchTerm={(term: string) => setSearchTerm(term)}\n            searchTerm={searchTerm}\n            enterSearch={enterSearch}\n            focusParentRefs={[searchFieldRef]}\n          />\n        )}\n        <SearchIconWrapper className={size ? size : ''} role=\"button\" aria-label={performSearchLabel}>\n          <IconButton\n            shouldNotInteract={searchFieldVisible?.visible}\n            id={`${id}_Searchbutton`}\n            dataTestId={`${id}_Searchbutton`}\n            variant=\"secondary\"\n            shape=\"circular\"\n            tabIndex={searchFieldVisible?.visible ? -1 : 0}\n            action={handleSearchIconAction}>\n            <SearchIcon size=\"24px\" color={disabled ? COLORS.neutral_300 : COLORS.neutral_600} />\n          </IconButton>\n        </SearchIconWrapper>\n        <StyledIcon className={size ? size : ''} role=\"button\" hidden={!searchTerm || !searchFieldVisible?.visible}>\n          <IconButton\n            id={`${id}_Clearicon`}\n            dataTestId={`${id}_Clearicon`}\n            variant=\"secondary\"\n            shape=\"circular\"\n            action={(e) => {\n              removeSearch(e);\n              searchFieldInputRef?.current?.focus();\n            }}>\n            <ClearIcon size=\"24px\" color={disabled ? COLORS.neutral_300 : COLORS.neutral_600} />\n          </IconButton>\n        </StyledIcon>\n        {loading && searchFieldVisible?.visible && (\n          <StyledIcon className={size ? size : ''}>\n            <LoadingIndicator size={Size.Small} color={COLORS.neutral_600} />\n          </StyledIcon>\n        )}\n      </SearchField>\n    </Wrapper>\n  );\n};\n\nexport default QuickSearch;\n"],"mappings":"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"}

package/dist/InputFields/RadioButton.cjs

@@ -17,7 +17,7 @@ var _styles = require("../styles");
 var _types = require("../types");
 var _common = require("../common");
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["id", "selected", "label", "additionalLabel", "invalid", "select", "disabled", "margin", "iconPointerEventsTransparent", "size", "tabIndexVal", "className"];
+var _excluded = ["id", "selected", "label", "additionalLabel", "invalid", "select", "disabled", "margin", "iconPointerEventsTransparent", "size", "tabIndexVal", "className", "dataTestId"];
 var _templateObject;
 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; }
@@ -42,6 +42,7 @@ var RadioButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     size = _ref.size,
     tabIndexVal = _ref.tabIndexVal,
     className = _ref.className,
+    dataTestId = _ref.dataTestId,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var onKeyPress = function onKeyPress(e) {
     if (e.keyCode === 13 && !disabled) {
@@ -67,6 +68,7 @@ var RadioButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: 'radio-button-icon',
       id: id,
+      "data-testId": dataTestId,
       children: [selected && /*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.RadioButtonOn, {
         className: iconPointerEventsTransparent ? 'pointerTransparent' : '',
         size: "24px"

package/dist/InputFields/RadioButton.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"RadioButton.cjs","names":["StyledRadioButton","styled","div","props","margin","COLORS","black","selected","primary_500","invalid","critical_400","neutral_600","ComponentXXSStyling","ComponentTextStyle","Regular","ComponentSStyling","ComponentMStyling","ComponentLStyling","focusStyles","primary_20","primary_700","primary_100","primary_800","neutral_300","white","RadioButton","React","forwardRef","ref","id","label","additionalLabel","select","disabled","iconPointerEventsTransparent","size","tabIndexVal","className","rest","onKeyPress","e","keyCode","Size","Medium","cls","defaultOnMouseDownHandler","undefined"],"sources":["../../src/InputFields/RadioButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {RadioButtonOff, RadioButtonOn} from '../icons/systemicons/SystemIcons';\nimport {COLORS, ComponentTextStyle, focusStyles} from '../styles';\nimport {Size} from '../types';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXXSStyling} from '../styles';\nimport {defaultOnMouseDownHandler} from '../common';\n\nconst StyledRadioButton = styled.div<{ margin?: string, disabled?: boolean, invalid?: boolean, selected?: boolean }>`\n  display: flex;\n  width: 100%;\n  min-height: 48px;\n  min-width: 48px;\n\n  ${props => (props.margin ? `margin: ${props.margin};` : '')}\n  cursor: pointer;\n\n  color: ${COLORS.black};\n\n  .pointerTransparent {\n    pointer-events: none;\n  }\n\n  .radio-button-icon {\n    margin: 6px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    height: 36px;\n    min-width: 36px;\n    border-radius: 50%;\n\n    svg {\n      color: ${props => (props.selected ? COLORS.primary_500 : props.invalid ? COLORS.critical_400 : COLORS.neutral_600)};\n    }\n  }\n\n  .radio-button-label {\n    user-select: none;\n    display: flex;\n    flex-direction: column;\n\n    label {\n      cursor: inherit;\n    }\n\n    span {\n      ${ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    }\n  }\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .radio-button-label {\n      padding-top: 14px;\n    }\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .radio-button-label {\n      padding-top: 12px;\n    }\n  }\n\n  &.large {\n    ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .radio-button-label {\n      padding-top: 12px;\n    }\n  }\n\n  &:not(.disabled):focus {\n    ${focusStyles}\n  }\n\n  &:not(.disabled):hover {\n    .radio-button-icon {\n      background-color: ${COLORS.primary_20};\n\n      svg {\n        color: ${COLORS.primary_700};\n      }\n    }\n  }\n\n  &:not(.disabled):active {\n    .radio-button-icon {\n      background: ${COLORS.primary_100};\n\n      svg {\n        color: ${COLORS.primary_800};\n      }\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n\n    color: ${COLORS.neutral_300};\n\n    .radio-button-icon,\n    .radio-button-label {\n      pointer-events: none;\n    }\n\n    .radio-button-icon {\n      background-color: ${COLORS.white};\n    }\n\n    .radio-button-icon svg {\n      color: ${COLORS.neutral_300};\n    }\n  }\n\n  &.dropdown-hover:not(.disabled) {\n    .radio-button-icon {\n      background-color: ${COLORS.primary_20};\n\n      svg {\n        color: ${COLORS.primary_700};\n      }\n    }\n  }\n`;\n\ninterface Props extends Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'className' | 'onClick' | 'onMouseDown' | 'onKeyDown'>{\n  id?: string;\n  selected: boolean;\n  select: (selected: boolean) => void;\n  label?: string;\n  additionalLabel?: string;\n  invalid?: boolean;\n  disabled?: boolean;\n  iconPointerEventsTransparent?: boolean;\n  margin?: string;\n  size?: Size;\n  tabIndexVal?: number;\n  className?: string;\n}\n\nconst RadioButton = React.forwardRef<HTMLDivElement, Props>(({\n                                                               id,\n                                                               selected,\n                                                               label,\n                                                               additionalLabel,\n                                                               invalid,\n                                                               select,\n                                                               disabled,\n                                                               margin,\n                                                               iconPointerEventsTransparent,\n                                                               size,\n                                                               tabIndexVal,\n                                                               className,\n                                                               ...rest\n                                                             }: Props, ref) => {\n  const onKeyPress = (e: any) => {\n    if (e.keyCode === 13 && !disabled) {\n      select(!selected);\n    }\n  };\n\n  size = size ?? Size.Medium;\n\n  const cls = `${size} ${className || ''} ${disabled ? ' disabled' : ''}`;\n\n  return (\n    <StyledRadioButton key={id}\n                       margin={margin}\n                       ref={ref}\n                       onClick={() => !disabled && select(!selected)}\n                       onMouseDown={defaultOnMouseDownHandler}\n                       onKeyDown={onKeyPress}\n                       disabled={disabled}\n                       className={cls}\n                       tabIndex={disabled ? -1 : (tabIndexVal ? tabIndexVal : 0)}\n                       invalid={invalid}\n                       selected={selected}\n                       {...rest}>\n      <div className={'radio-button-icon'} id={id}>\n        {selected && <RadioButtonOn className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>}\n        {!selected &&\n          <RadioButtonOff className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>}\n      </div>\n      <div className={'radio-button-label'}>\n        {label && <label htmlFor={id}>{label}</label>}\n        {additionalLabel !== undefined && <span>{additionalLabel}</span>}\n      </div>\n    </StyledRadioButton>\n  );\n});\n\nexport default RadioButton;\n"],"mappings":"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"}
+{"version":3,"file":"RadioButton.cjs","names":["StyledRadioButton","styled","div","props","margin","COLORS","black","selected","primary_500","invalid","critical_400","neutral_600","ComponentXXSStyling","ComponentTextStyle","Regular","ComponentSStyling","ComponentMStyling","ComponentLStyling","focusStyles","primary_20","primary_700","primary_100","primary_800","neutral_300","white","RadioButton","React","forwardRef","ref","id","label","additionalLabel","select","disabled","iconPointerEventsTransparent","size","tabIndexVal","className","dataTestId","rest","onKeyPress","e","keyCode","Size","Medium","cls","defaultOnMouseDownHandler","undefined"],"sources":["../../src/InputFields/RadioButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {RadioButtonOff, RadioButtonOn} from '../icons/systemicons/SystemIcons';\nimport {COLORS, ComponentTextStyle, focusStyles} from '../styles';\nimport {Size, Testable} from '../types';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXXSStyling} from '../styles';\nimport {defaultOnMouseDownHandler} from '../common';\n\nconst StyledRadioButton = styled.div<{ margin?: string, disabled?: boolean, invalid?: boolean, selected?: boolean }>`\n  display: flex;\n  width: 100%;\n  min-height: 48px;\n  min-width: 48px;\n\n  ${props => (props.margin ? `margin: ${props.margin};` : '')}\n  cursor: pointer;\n\n  color: ${COLORS.black};\n\n  .pointerTransparent {\n    pointer-events: none;\n  }\n\n  .radio-button-icon {\n    margin: 6px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    height: 36px;\n    min-width: 36px;\n    border-radius: 50%;\n\n    svg {\n      color: ${props => (props.selected ? COLORS.primary_500 : props.invalid ? COLORS.critical_400 : COLORS.neutral_600)};\n    }\n  }\n\n  .radio-button-label {\n    user-select: none;\n    display: flex;\n    flex-direction: column;\n\n    label {\n      cursor: inherit;\n    }\n\n    span {\n      ${ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    }\n  }\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .radio-button-label {\n      padding-top: 14px;\n    }\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .radio-button-label {\n      padding-top: 12px;\n    }\n  }\n\n  &.large {\n    ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .radio-button-label {\n      padding-top: 12px;\n    }\n  }\n\n  &:not(.disabled):focus {\n    ${focusStyles}\n  }\n\n  &:not(.disabled):hover {\n    .radio-button-icon {\n      background-color: ${COLORS.primary_20};\n\n      svg {\n        color: ${COLORS.primary_700};\n      }\n    }\n  }\n\n  &:not(.disabled):active {\n    .radio-button-icon {\n      background: ${COLORS.primary_100};\n\n      svg {\n        color: ${COLORS.primary_800};\n      }\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n\n    color: ${COLORS.neutral_300};\n\n    .radio-button-icon,\n    .radio-button-label {\n      pointer-events: none;\n    }\n\n    .radio-button-icon {\n      background-color: ${COLORS.white};\n    }\n\n    .radio-button-icon svg {\n      color: ${COLORS.neutral_300};\n    }\n  }\n\n  &.dropdown-hover:not(.disabled) {\n    .radio-button-icon {\n      background-color: ${COLORS.primary_20};\n\n      svg {\n        color: ${COLORS.primary_700};\n      }\n    }\n  }\n`;\n\ninterface Props extends Testable, Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'className' | 'onClick' | 'onMouseDown' | 'onKeyDown'>{\n  id?: string;\n  selected: boolean;\n  select: (selected: boolean) => void;\n  label?: string;\n  additionalLabel?: string;\n  invalid?: boolean;\n  disabled?: boolean;\n  iconPointerEventsTransparent?: boolean;\n  margin?: string;\n  size?: Size;\n  tabIndexVal?: number;\n  className?: string;\n}\n\nconst RadioButton = React.forwardRef<HTMLDivElement, Props>(({\n                                                               id,\n                                                               selected,\n                                                               label,\n                                                               additionalLabel,\n                                                               invalid,\n                                                               select,\n                                                               disabled,\n                                                               margin,\n                                                               iconPointerEventsTransparent,\n                                                               size,\n                                                               tabIndexVal,\n                                                               className,\n                                                               dataTestId,\n                                                               ...rest\n                                                             }: Props, ref) => {\n  const onKeyPress = (e: any) => {\n    if (e.keyCode === 13 && !disabled) {\n      select(!selected);\n    }\n  };\n\n  size = size ?? Size.Medium;\n\n  const cls = `${size} ${className || ''} ${disabled ? ' disabled' : ''}`;\n\n  return (\n    <StyledRadioButton key={id}\n                       margin={margin}\n                       ref={ref}\n                       onClick={() => !disabled && select(!selected)}\n                       onMouseDown={defaultOnMouseDownHandler}\n                       onKeyDown={onKeyPress}\n                       disabled={disabled}\n                       className={cls}\n                       tabIndex={disabled ? -1 : (tabIndexVal ? tabIndexVal : 0)}\n                       invalid={invalid}\n                       selected={selected}\n                       {...rest}>\n      <div className={'radio-button-icon'} id={id} data-testId={dataTestId}>\n        {selected && <RadioButtonOn className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>}\n        {!selected &&\n          <RadioButtonOff className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>}\n      </div>\n      <div className={'radio-button-label'}>\n        {label && <label htmlFor={id}>{label}</label>}\n        {additionalLabel !== undefined && <span>{additionalLabel}</span>}\n      </div>\n    </StyledRadioButton>\n  );\n});\n\nexport default RadioButton;\n"],"mappings":"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"}

package/dist/InputFields/RadioButton.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { Size } from '../types';
-interface Props extends Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'className' | 'onClick' | 'onMouseDown' | 'onKeyDown'> {
+import { Size, Testable } from '../types';
+interface Props extends Testable, Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'className' | 'onClick' | 'onMouseDown' | 'onKeyDown'> {
     id?: string;
     selected: boolean;
     select: (selected: boolean) => void;

package/dist/InputFields/RadioButton.js

@@ -2,7 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 import _pt from "prop-types";
-var _excluded = ["id", "selected", "label", "additionalLabel", "invalid", "select", "disabled", "margin", "iconPointerEventsTransparent", "size", "tabIndexVal", "className"];
+var _excluded = ["id", "selected", "label", "additionalLabel", "invalid", "select", "disabled", "margin", "iconPointerEventsTransparent", "size", "tabIndexVal", "className", "dataTestId"];
 var _templateObject;
 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; }
@@ -34,6 +34,7 @@ var RadioButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     size = _ref.size,
     tabIndexVal = _ref.tabIndexVal,
     className = _ref.className,
+    dataTestId = _ref.dataTestId,
     rest = _objectWithoutProperties(_ref, _excluded);
   var onKeyPress = function onKeyPress(e) {
     if (e.keyCode === 13 && !disabled) {
@@ -59,6 +60,7 @@ var RadioButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     children: [/*#__PURE__*/_jsxs("div", {
       className: 'radio-button-icon',
       id: id,
+      "data-testId": dataTestId,
       children: [selected && /*#__PURE__*/_jsx(RadioButtonOn, {
         className: iconPointerEventsTransparent ? 'pointerTransparent' : '',
         size: "24px"

package/dist/InputFields/RadioButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioButton.js","names":["React","styled","RadioButtonOff","RadioButtonOn","COLORS","ComponentTextStyle","focusStyles","Size","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentXXSStyling","defaultOnMouseDownHandler","StyledRadioButton","div","props","margin","black","selected","primary_500","invalid","critical_400","neutral_600","Regular","primary_20","primary_700","primary_100","primary_800","neutral_300","white","RadioButton","forwardRef","ref","id","label","additionalLabel","select","disabled","iconPointerEventsTransparent","size","tabIndexVal","className","rest","onKeyPress","e","keyCode","Medium","cls","undefined"],"sources":["../../src/InputFields/RadioButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {RadioButtonOff, RadioButtonOn} from '../icons/systemicons/SystemIcons';\nimport {COLORS, ComponentTextStyle, focusStyles} from '../styles';\nimport {Size} from '../types';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXXSStyling} from '../styles';\nimport {defaultOnMouseDownHandler} from '../common';\n\nconst StyledRadioButton = styled.div<{ margin?: string, disabled?: boolean, invalid?: boolean, selected?: boolean }>`\n  display: flex;\n  width: 100%;\n  min-height: 48px;\n  min-width: 48px;\n\n  ${props => (props.margin ? `margin: ${props.margin};` : '')}\n  cursor: pointer;\n\n  color: ${COLORS.black};\n\n  .pointerTransparent {\n    pointer-events: none;\n  }\n\n  .radio-button-icon {\n    margin: 6px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    height: 36px;\n    min-width: 36px;\n    border-radius: 50%;\n\n    svg {\n      color: ${props => (props.selected ? COLORS.primary_500 : props.invalid ? COLORS.critical_400 : COLORS.neutral_600)};\n    }\n  }\n\n  .radio-button-label {\n    user-select: none;\n    display: flex;\n    flex-direction: column;\n\n    label {\n      cursor: inherit;\n    }\n\n    span {\n      ${ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    }\n  }\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .radio-button-label {\n      padding-top: 14px;\n    }\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .radio-button-label {\n      padding-top: 12px;\n    }\n  }\n\n  &.large {\n    ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .radio-button-label {\n      padding-top: 12px;\n    }\n  }\n\n  &:not(.disabled):focus {\n    ${focusStyles}\n  }\n\n  &:not(.disabled):hover {\n    .radio-button-icon {\n      background-color: ${COLORS.primary_20};\n\n      svg {\n        color: ${COLORS.primary_700};\n      }\n    }\n  }\n\n  &:not(.disabled):active {\n    .radio-button-icon {\n      background: ${COLORS.primary_100};\n\n      svg {\n        color: ${COLORS.primary_800};\n      }\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n\n    color: ${COLORS.neutral_300};\n\n    .radio-button-icon,\n    .radio-button-label {\n      pointer-events: none;\n    }\n\n    .radio-button-icon {\n      background-color: ${COLORS.white};\n    }\n\n    .radio-button-icon svg {\n      color: ${COLORS.neutral_300};\n    }\n  }\n\n  &.dropdown-hover:not(.disabled) {\n    .radio-button-icon {\n      background-color: ${COLORS.primary_20};\n\n      svg {\n        color: ${COLORS.primary_700};\n      }\n    }\n  }\n`;\n\ninterface Props extends Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'className' | 'onClick' | 'onMouseDown' | 'onKeyDown'>{\n  id?: string;\n  selected: boolean;\n  select: (selected: boolean) => void;\n  label?: string;\n  additionalLabel?: string;\n  invalid?: boolean;\n  disabled?: boolean;\n  iconPointerEventsTransparent?: boolean;\n  margin?: string;\n  size?: Size;\n  tabIndexVal?: number;\n  className?: string;\n}\n\nconst RadioButton = React.forwardRef<HTMLDivElement, Props>(({\n                                                               id,\n                                                               selected,\n                                                               label,\n                                                               additionalLabel,\n                                                               invalid,\n                                                               select,\n                                                               disabled,\n                                                               margin,\n                                                               iconPointerEventsTransparent,\n                                                               size,\n                                                               tabIndexVal,\n                                                               className,\n                                                               ...rest\n                                                             }: Props, ref) => {\n  const onKeyPress = (e: any) => {\n    if (e.keyCode === 13 && !disabled) {\n      select(!selected);\n    }\n  };\n\n  size = size ?? Size.Medium;\n\n  const cls = `${size} ${className || ''} ${disabled ? ' disabled' : ''}`;\n\n  return (\n    <StyledRadioButton key={id}\n                       margin={margin}\n                       ref={ref}\n                       onClick={() => !disabled && select(!selected)}\n                       onMouseDown={defaultOnMouseDownHandler}\n                       onKeyDown={onKeyPress}\n                       disabled={disabled}\n                       className={cls}\n                       tabIndex={disabled ? -1 : (tabIndexVal ? tabIndexVal : 0)}\n                       invalid={invalid}\n                       selected={selected}\n                       {...rest}>\n      <div className={'radio-button-icon'} id={id}>\n        {selected && <RadioButtonOn className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>}\n        {!selected &&\n          <RadioButtonOff className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>}\n      </div>\n      <div className={'radio-button-label'}>\n        {label && <label htmlFor={id}>{label}</label>}\n        {additionalLabel !== undefined && <span>{additionalLabel}</span>}\n      </div>\n    </StyledRadioButton>\n  );\n});\n\nexport default RadioButton;\n"],"mappings":"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"}
+{"version":3,"file":"RadioButton.js","names":["React","styled","RadioButtonOff","RadioButtonOn","COLORS","ComponentTextStyle","focusStyles","Size","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentXXSStyling","defaultOnMouseDownHandler","StyledRadioButton","div","props","margin","black","selected","primary_500","invalid","critical_400","neutral_600","Regular","primary_20","primary_700","primary_100","primary_800","neutral_300","white","RadioButton","forwardRef","ref","id","label","additionalLabel","select","disabled","iconPointerEventsTransparent","size","tabIndexVal","className","dataTestId","rest","onKeyPress","e","keyCode","Medium","cls","undefined"],"sources":["../../src/InputFields/RadioButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {RadioButtonOff, RadioButtonOn} from '../icons/systemicons/SystemIcons';\nimport {COLORS, ComponentTextStyle, focusStyles} from '../styles';\nimport {Size, Testable} from '../types';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXXSStyling} from '../styles';\nimport {defaultOnMouseDownHandler} from '../common';\n\nconst StyledRadioButton = styled.div<{ margin?: string, disabled?: boolean, invalid?: boolean, selected?: boolean }>`\n  display: flex;\n  width: 100%;\n  min-height: 48px;\n  min-width: 48px;\n\n  ${props => (props.margin ? `margin: ${props.margin};` : '')}\n  cursor: pointer;\n\n  color: ${COLORS.black};\n\n  .pointerTransparent {\n    pointer-events: none;\n  }\n\n  .radio-button-icon {\n    margin: 6px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    height: 36px;\n    min-width: 36px;\n    border-radius: 50%;\n\n    svg {\n      color: ${props => (props.selected ? COLORS.primary_500 : props.invalid ? COLORS.critical_400 : COLORS.neutral_600)};\n    }\n  }\n\n  .radio-button-label {\n    user-select: none;\n    display: flex;\n    flex-direction: column;\n\n    label {\n      cursor: inherit;\n    }\n\n    span {\n      ${ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    }\n  }\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .radio-button-label {\n      padding-top: 14px;\n    }\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .radio-button-label {\n      padding-top: 12px;\n    }\n  }\n\n  &.large {\n    ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .radio-button-label {\n      padding-top: 12px;\n    }\n  }\n\n  &:not(.disabled):focus {\n    ${focusStyles}\n  }\n\n  &:not(.disabled):hover {\n    .radio-button-icon {\n      background-color: ${COLORS.primary_20};\n\n      svg {\n        color: ${COLORS.primary_700};\n      }\n    }\n  }\n\n  &:not(.disabled):active {\n    .radio-button-icon {\n      background: ${COLORS.primary_100};\n\n      svg {\n        color: ${COLORS.primary_800};\n      }\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n\n    color: ${COLORS.neutral_300};\n\n    .radio-button-icon,\n    .radio-button-label {\n      pointer-events: none;\n    }\n\n    .radio-button-icon {\n      background-color: ${COLORS.white};\n    }\n\n    .radio-button-icon svg {\n      color: ${COLORS.neutral_300};\n    }\n  }\n\n  &.dropdown-hover:not(.disabled) {\n    .radio-button-icon {\n      background-color: ${COLORS.primary_20};\n\n      svg {\n        color: ${COLORS.primary_700};\n      }\n    }\n  }\n`;\n\ninterface Props extends Testable, Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'className' | 'onClick' | 'onMouseDown' | 'onKeyDown'>{\n  id?: string;\n  selected: boolean;\n  select: (selected: boolean) => void;\n  label?: string;\n  additionalLabel?: string;\n  invalid?: boolean;\n  disabled?: boolean;\n  iconPointerEventsTransparent?: boolean;\n  margin?: string;\n  size?: Size;\n  tabIndexVal?: number;\n  className?: string;\n}\n\nconst RadioButton = React.forwardRef<HTMLDivElement, Props>(({\n                                                               id,\n                                                               selected,\n                                                               label,\n                                                               additionalLabel,\n                                                               invalid,\n                                                               select,\n                                                               disabled,\n                                                               margin,\n                                                               iconPointerEventsTransparent,\n                                                               size,\n                                                               tabIndexVal,\n                                                               className,\n                                                               dataTestId,\n                                                               ...rest\n                                                             }: Props, ref) => {\n  const onKeyPress = (e: any) => {\n    if (e.keyCode === 13 && !disabled) {\n      select(!selected);\n    }\n  };\n\n  size = size ?? Size.Medium;\n\n  const cls = `${size} ${className || ''} ${disabled ? ' disabled' : ''}`;\n\n  return (\n    <StyledRadioButton key={id}\n                       margin={margin}\n                       ref={ref}\n                       onClick={() => !disabled && select(!selected)}\n                       onMouseDown={defaultOnMouseDownHandler}\n                       onKeyDown={onKeyPress}\n                       disabled={disabled}\n                       className={cls}\n                       tabIndex={disabled ? -1 : (tabIndexVal ? tabIndexVal : 0)}\n                       invalid={invalid}\n                       selected={selected}\n                       {...rest}>\n      <div className={'radio-button-icon'} id={id} data-testId={dataTestId}>\n        {selected && <RadioButtonOn className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>}\n        {!selected &&\n          <RadioButtonOff className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>}\n      </div>\n      <div className={'radio-button-label'}>\n        {label && <label htmlFor={id}>{label}</label>}\n        {additionalLabel !== undefined && <span>{additionalLabel}</span>}\n      </div>\n    </StyledRadioButton>\n  );\n});\n\nexport default RadioButton;\n"],"mappings":";;;;;;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAAQC,cAAc,EAAEC,aAAa,QAAO,kCAAkC;AAC9E,SAAQC,MAAM,EAAEC,kBAAkB,EAAEC,WAAW,QAAO,WAAW;AACjE,SAAQC,IAAI,QAAiB,UAAU;AACvC,SAAQC,iBAAiB,EAAEC,iBAAiB,EAAEC,iBAAiB,EAAEC,mBAAmB,QAAO,WAAW;AACtG,SAAQC,yBAAyB,QAAO,WAAW;AAAC;AAAA;AAEpD,IAAMC,iBAAiB,GAAGZ,MAAM,CAACa,GAAG,ysDAMhC,UAAAC,KAAK;EAAA,OAAKA,KAAK,CAACC,MAAM,qBAAcD,KAAK,CAACC,MAAM,SAAM,EAAE;AAAA,CAAC,EAGlDZ,MAAM,CAACa,KAAK,EAiBR,UAAAF,KAAK;EAAA,OAAKA,KAAK,CAACG,QAAQ,GAAGd,MAAM,CAACe,WAAW,GAAGJ,KAAK,CAACK,OAAO,GAAGhB,MAAM,CAACiB,YAAY,GAAGjB,MAAM,CAACkB,WAAW;AAAA,CAAC,EAchHX,mBAAmB,CAACN,kBAAkB,CAACkB,OAAO,EAAEnB,MAAM,CAACa,KAAK,CAAC,EAK/DP,iBAAiB,CAACL,kBAAkB,CAACkB,OAAO,EAAEnB,MAAM,CAACa,KAAK,CAAC,EAO3DR,iBAAiB,CAACJ,kBAAkB,CAACkB,OAAO,EAAEnB,MAAM,CAACa,KAAK,CAAC,EAO3DT,iBAAiB,CAACH,kBAAkB,CAACkB,OAAO,EAAEnB,MAAM,CAACa,KAAK,CAAC,EAO3DX,WAAW,EAKSF,MAAM,CAACoB,UAAU,EAG1BpB,MAAM,CAACqB,WAAW,EAOfrB,MAAM,CAACsB,WAAW,EAGrBtB,MAAM,CAACuB,WAAW,EAQtBvB,MAAM,CAACwB,WAAW,EAQLxB,MAAM,CAACyB,KAAK,EAIvBzB,MAAM,CAACwB,WAAW,EAMPxB,MAAM,CAACoB,UAAU,EAG1BpB,MAAM,CAACqB,WAAW,CAIlC;AAiBD,IAAMK,WAAW,gBAAG9B,KAAK,CAAC+B,UAAU,CAAwB,gBAeWC,GAAG,EAAK;EAAA;EAAA,IAdhBC,EAAE,QAAFA,EAAE;IACFf,QAAQ,QAARA,QAAQ;IACRgB,KAAK,QAALA,KAAK;IACLC,eAAe,QAAfA,eAAe;IACff,OAAO,QAAPA,OAAO;IACPgB,MAAM,QAANA,MAAM;IACNC,QAAQ,QAARA,QAAQ;IACRrB,MAAM,QAANA,MAAM;IACNsB,4BAA4B,QAA5BA,4BAA4B;IAC5BC,IAAI,QAAJA,IAAI;IACJC,WAAW,QAAXA,WAAW;IACXC,SAAS,QAATA,SAAS;IACTC,UAAU,QAAVA,UAAU;IACPC,IAAI;EAEpE,IAAMC,UAAU,GAAG,SAAbA,UAAU,CAAIC,CAAM,EAAK;IAC7B,IAAIA,CAAC,CAACC,OAAO,KAAK,EAAE,IAAI,CAACT,QAAQ,EAAE;MACjCD,MAAM,CAAC,CAAClB,QAAQ,CAAC;IACnB;EACF,CAAC;EAEDqB,IAAI,YAAGA,IAAI,yCAAIhC,IAAI,CAACwC,MAAM;EAE1B,IAAMC,GAAG,aAAMT,IAAI,cAAIE,SAAS,IAAI,EAAE,cAAIJ,QAAQ,GAAG,WAAW,GAAG,EAAE,CAAE;EAEvE,oBACE,MAAC,iBAAiB;IACC,MAAM,EAAErB,MAAO;IACf,GAAG,EAAEgB,GAAI;IACT,OAAO,EAAE;MAAA,OAAM,CAACK,QAAQ,IAAID,MAAM,CAAC,CAAClB,QAAQ,CAAC;IAAA,CAAC;IAC9C,WAAW,EAAEN,yBAA0B;IACvC,SAAS,EAAEgC,UAAW;IACtB,QAAQ,EAAEP,QAAS;IACnB,SAAS,EAAEW,GAAI;IACf,QAAQ,EAAEX,QAAQ,GAAG,CAAC,CAAC,GAAIG,WAAW,GAAGA,WAAW,GAAG,CAAG;IAC1D,OAAO,EAAEpB,OAAQ;IACjB,QAAQ,EAAEF;EAAS,GACfyB,IAAI;IAAA,wBACzB;MAAK,SAAS,EAAE,mBAAoB;MAAC,EAAE,EAAEV,EAAG;MAAC,eAAaS,UAAW;MAAA,WAClExB,QAAQ,iBAAI,KAAC,aAAa;QAAC,SAAS,EAAEoB,4BAA4B,GAAG,oBAAoB,GAAG,EAAG;QAAC,IAAI,EAAC;MAAM,EAAE,EAC7G,CAACpB,QAAQ,iBACR,KAAC,cAAc;QAAC,SAAS,EAAEoB,4BAA4B,GAAG,oBAAoB,GAAG,EAAG;QAAC,IAAI,EAAC;MAAM,EAAE;IAAA,EAChG,eACN;MAAK,SAAS,EAAE,oBAAqB;MAAA,WAClCJ,KAAK,iBAAI;QAAO,OAAO,EAAED,EAAG;QAAA,UAAEC;MAAK,EAAS,EAC5CC,eAAe,KAAKc,SAAS,iBAAI;QAAA,UAAOd;MAAe,EAAQ;IAAA,EAC5D;EAAA,IApBgBF,EAAE,CAqBN;AAExB,CAAC,CAAC;AAAC;EAhEDA,EAAE;EACFf,QAAQ;EACRkB,MAAM;EACNF,KAAK;EACLC,eAAe;EACff,OAAO;EACPiB,QAAQ;EACRC,4BAA4B;EAC5BtB,MAAM;EAENwB,WAAW;EACXC,SAAS;AAAA;AAuDX,eAAeX,WAAW"}

package/dist/InputFields/TextField.cjs

@@ -16,7 +16,7 @@ var _types = require("../types");
 var _styling = require("./styling");
 var _common = require("../common");
 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"];
+var _excluded = ["id", "disabled", "readOnly", "onChange", "value", "validationMessage", "type", "autoComplete", "placeholder", "required", "pattern", "maxLength", "withoutBorder", "state", "size", "margin", "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; }
@@ -41,6 +41,7 @@ var TextField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     margin = _ref$margin === void 0 ? '4px 0' : _ref$margin,
     note = _ref.note,
     className = _ref.className,
+    dataTestId = _ref.dataTestId,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var elementRef = (0, _common.useFocusVisibleRef)();
   React.useImperativeHandle(ref, function () {
@@ -59,6 +60,7 @@ var TextField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       },
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styling.InputFieldStyling, _objectSpread({
         id: id,
+        "data-testId": dataTestId,
         ref: elementRef,
         type: type || 'text',
         value: value,

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","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} from '../types';\nimport {ErrorMessage, InputFieldStyling, InputWrapper, NoteMessage, ValidationMessage} from './styling';\nimport {useFocusVisibleRef} from '../common';\nimport {TextFieldNote} from './types';\n\ntype TextFieldProps =\n  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                                      ...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          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.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":"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"}

package/dist/InputFields/TextField.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { Size, States } from '../types';
+import { Size, States, Testable } from '../types';
 import { TextFieldNote } from './types';
-declare const TextField: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "pattern" | "type" | "id" | "onChange" | "disabled" | "value" | "autoComplete" | "maxLength" | "readOnly" | "size"> & {
+declare const TextField: React.ForwardRefExoticComponent<Testable & Omit<React.InputHTMLAttributes<HTMLInputElement>, "pattern" | "type" | "id" | "onChange" | "disabled" | "value" | "autoComplete" | "maxLength" | "readOnly" | "size"> & {
     id?: string | undefined;
     disabled?: boolean | undefined;
     readOnly?: boolean | 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"];
+var _excluded = ["id", "disabled", "readOnly", "onChange", "value", "validationMessage", "type", "autoComplete", "placeholder", "required", "pattern", "maxLength", "withoutBorder", "state", "size", "margin", "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';
@@ -33,6 +33,7 @@ var TextField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     margin = _ref$margin === void 0 ? '4px 0' : _ref$margin,
     note = _ref.note,
     className = _ref.className,
+    dataTestId = _ref.dataTestId,
     rest = _objectWithoutProperties(_ref, _excluded);
   var elementRef = useFocusVisibleRef();
   React.useImperativeHandle(ref, function () {
@@ -51,6 +52,7 @@ var TextField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       },
       children: [/*#__PURE__*/_jsx(InputFieldStyling, _objectSpread({
         id: id,
+        "data-testId": dataTestId,
         ref: elementRef,
         type: type || 'text',
         value: value,

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","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} from '../types';\nimport {ErrorMessage, InputFieldStyling, InputWrapper, NoteMessage, ValidationMessage} from './styling';\nimport {useFocusVisibleRef} from '../common';\nimport {TextFieldNote} from './types';\n\ntype TextFieldProps =\n  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                                      ...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          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","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":";;;;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAAQC,SAAS,EAAEC,gBAAgB,QAAO,kCAAkC;AAC5E,SAAQC,MAAM,QAAO,WAAW;AAChC,SAAcC,MAAM,QAAiB,UAAU;AAC/C,SAAsBC,iBAAiB,EAAEC,YAAY,EAAEC,WAAW,EAAEC,iBAAiB,QAAO,WAAW;AACvG,SAAQC,kBAAkB,QAAO,WAAW;AAAC;AAAA;AAAA;AAyB7C,IAAMC,SAAS,gBAAGV,KAAK,CAACW,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,GAAGxB,kBAAkB,EAAE;EAEvCT,KAAK,CAACkC,mBAAmB,CAACtB,GAAG,EAAE;IAAA,OAAMqB,UAAU,CAACE,OAAO;EAAA,GAAE,CAACF,UAAU,CAAC,CAAC;EAEtE,IAAMG,GAAG,aAAMV,KAAK,KAAKR,iBAAiB,GAAGd,MAAM,CAACiC,OAAO,GAAG,EAAE,CAAC,cAAIV,IAAI,IAAI,EAAE,CAAE;EAEjF,oBACE;IAAA,uBACE,MAAC,YAAY;MACX,QAAQ,EAAEZ,QAAS;MACnB,QAAQ,EAAED,QAAS;MACnB,MAAM,EAAEc,MAAO;MACf,OAAO,EAAE,iBAACU,CAAM,EAAK;QACnB,IAAIxB,QAAQ,IAAIC,QAAQ,EAAE;UACxBuB,CAAC,CAACC,cAAc,EAAE;QACpB;MACF,CAAE;MAAA,wBACF,KAAC,iBAAiB;QAChB,EAAE,EAAE1B,EAAG;QACP,eAAakB,UAAW;QACxB,GAAG,EAAEE,UAAW;QAChB,IAAI,EAAEd,IAAI,IAAI,MAAO;QACrB,KAAK,EAAEF,KAAM;QACb,SAAS,EAAEmB,GAAI;QACf,QAAQ,EAAErB,QAAQ,IAAID,QAAQ,GAAG,CAAC,CAAC,GAAG,CAAE;QACxC,YAAY,EAAEM,YAAa;QAC3B,WAAW,EAAEN,QAAQ,GAAG0B,SAAS,GAAGnB,WAAY;QAChD,QAAQ,EAAEP,QAAS;QACnB,QAAQ,EAAEC,QAAS;QACnB,QAAQ,EAAE,kBAACuB,CAAM;UAAA;UAAA,OAAKtB,SAAQ,IAAIA,SAAQ,CAAC,CAAAsB,CAAC,aAADA,CAAC,oCAADA,CAAC,CAAEG,MAAM,8CAAT,UAAWxB,KAAK,KAAI,EAAE,CAAC;QAAA,CAAC;QACnE,kBAAkB,EAAE,CAAC,CAACC,iBAAiB,IAAIQ,KAAK,KAAKtB,MAAM,CAACsC,KAAM;QAClE,QAAQ,EAAEpB,QAAS;QACnB,OAAO,EAAEC,OAAQ;QACjB,SAAS,EAAEC,SAAU;QACrB,aAAa,EAAEC;MAAc,GACzBO,IAAI,EACR,EACDd,iBAAiB,iBAChB,MAAC,iBAAiB;QAAC,SAAS,EAAES,IAAI,IAAI,EAAG;QAAC,IAAI,EAAED,KAAK,aAALA,KAAK,cAALA,KAAK,GAAItB,MAAM,CAACiC,OAAQ;QAAA,WACrEX,KAAK,KAAKtB,MAAM,CAACsC,KAAK,gBAAG,KAAC,SAAS;UAAC,KAAK,EAAEvC,MAAM,CAACwC;QAAY,EAAE,gBAC/D,KAAC,gBAAgB;UAAC,KAAK,EAAExC,MAAM,CAACyC;QAAa,EAAE,eACjD;UAAA,UAAO1B;QAAiB,EAAQ;MAAA,EAEnC,EACAW,IAAI,IAAI,CAACf,QAAQ,iBAChB,MAAC,WAAW;QAAC,SAAS,EAAEa,IAAK;QAAA,WAC1BE,IAAI,CAACgB,IAAI,eACV;UAAA,UAAOhB,IAAI,CAACiB;QAAO,EAAQ;MAAA,EAE9B;IAAA;EACY,EACd;AAEP,CAAC,CAAC;AAAC;EA9FDjC,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;AAiFR,eAAelB,SAAS"}

package/dist/InputFields/Textarea.cjs

@@ -16,7 +16,7 @@ var _types = require("../types");
 var _SystemIcons = require("../icons/systemicons/SystemIcons");
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["id", "placeholder", "state", "value", "size", "disabled", "validationMessage", "onChange", "margin", "autoHeight", "note", "required", "className"];
+var _excluded = ["id", "placeholder", "state", "value", "size", "disabled", "validationMessage", "onChange", "margin", "autoHeight", "note", "required", "className", "dataTestId"];
 var _templateObject, _templateObject2;
 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; }
@@ -43,11 +43,13 @@ var Textarea = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     note = _ref.note,
     required = _ref.required,
     className = _ref.className,
+    dataTestId = _ref.dataTestId,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   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: ref,
       value: value,
       placeholder: disabled ? undefined : placeholder,

package/dist/InputFields/Textarea.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.cjs","names":["TextareaWrapper","styled","div","props","margin","TextArea","textarea","COLORS","neutral_400","white","autoHeight","ComponentMStyling","ComponentTextStyle","Italic","black","ComponentSStyling","neutral_500","primary_700","primary_800","critical_500","correct_500","neutral_100","neutral_300","Textarea","React","forwardRef","ref","id","placeholder","state","value","size","disabled","validationMessage","onChange","note","required","className","rest","cls","States","Invalid","undefined","e","target","Valid","correct_400","critical_400","icon","message"],"sources":["../../src/InputFields/Textarea.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n\n/**\n * Import custom styles.\n */\nimport { COLORS, ComponentSStyling } from '../styles';\nimport { ErrorMessage, NoteMessage, ValidationMessage } from './styling';\nimport { Size, States } from '../types';\n\n/**\n * Import custom components.\n */\nimport { CheckMark, TechnicalWarning } from '../icons/systemicons/SystemIcons';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\nimport { ComponentMStyling, ComponentTextStyle } from '../styles';\nimport { TextareaProps, TextFieldNote } from './types';\n\n// Add component-specific styles.\nconst TextareaWrapper = styled.div<{ margin?: string }>`\n  width: 100%;\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n`;\nconst TextArea = styled.textarea<{ autoHeight?: boolean }>`\n  border: 1px solid ${COLORS.neutral_400};\n  background: ${COLORS.white};\n  border-radius: 4px;\n  outline: none;\n  margin: 4px 0px;\n  padding: 16px;\n\n  resize: ${(props) => (props.autoHeight ? 'none' : '')};\n\n  ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.black)}\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.black)}\n    width: 304px;\n    &::placeholder {\n      ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n    }\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.black)}\n    width: 344px;\n  }\n\n  &:hover {\n    border: 2px solid ${COLORS.primary_700};\n    margin: 3px -1px;\n  }\n\n  &:active,\n  &:focus {\n    border: 2px solid ${COLORS.primary_800};\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 ${COLORS.critical_500};\n  }\n\n  &.valid {\n    border: none;\n    margin: 4px 0px;\n    box-shadow: inset 0 0 0 2px ${COLORS.correct_500};\n  }\n\n  &:disabled,\n  &:disabled:hover,\n  &:disabled:focus {\n    cursor: not-allowed;\n    border: 1px solid ${COLORS.neutral_100};\n    margin: 4px 0px;\n    box-shadow: none;\n\n    &::placeholder {\n      color: ${COLORS.neutral_300};\n    }\n  }\n\n  &::placeholder {\n    ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n  }\n`;\n\nconst Textarea = React.forwardRef<any, TextareaProps>(({\n  id,\n  placeholder,\n  state,\n  value,\n  size,\n  disabled,\n  validationMessage,\n  onChange,\n  margin,\n  autoHeight,\n  note,\n  required,\n  className,\n  ...rest\n}: TextareaProps, ref) => {\n\n  const cls = `${size} ${state || (validationMessage ? States.Invalid : '')} ${className || ''}`;\n  return (\n    <TextareaWrapper>\n      <TextArea\n        id={id}\n        ref={ref}\n        value={value}\n        placeholder={disabled ? undefined : placeholder}\n        autoHeight={autoHeight}\n        className={cls}\n        disabled={disabled}\n        onChange={(e: any) => onChange && onChange(e?.target?.value || '')}\n        required={required}\n        {...rest}\n      />\n      {validationMessage && (\n        <ValidationMessage className={size || ''} type={state ?? States.Invalid}>\n          {state === States.Valid ? <CheckMark color={COLORS.correct_400} /> : <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    </TextareaWrapper>\n  );\n});\n\nexport default Textarea;\n"],"mappings":"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"}
+{"version":3,"file":"Textarea.cjs","names":["TextareaWrapper","styled","div","props","margin","TextArea","textarea","COLORS","neutral_400","white","autoHeight","ComponentMStyling","ComponentTextStyle","Italic","black","ComponentSStyling","neutral_500","primary_700","primary_800","critical_500","correct_500","neutral_100","neutral_300","Textarea","React","forwardRef","ref","id","placeholder","state","value","size","disabled","validationMessage","onChange","note","required","className","dataTestId","rest","cls","States","Invalid","undefined","e","target","Valid","correct_400","critical_400","icon","message"],"sources":["../../src/InputFields/Textarea.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n\n/**\n * Import custom styles.\n */\nimport { COLORS, ComponentSStyling } from '../styles';\nimport { ErrorMessage, NoteMessage, ValidationMessage } from './styling';\nimport { Size, States } from '../types';\n\n/**\n * Import custom components.\n */\nimport { CheckMark, TechnicalWarning } from '../icons/systemicons/SystemIcons';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\nimport { ComponentMStyling, ComponentTextStyle } from '../styles';\nimport { TextareaProps, TextFieldNote } from './types';\n\n// Add component-specific styles.\nconst TextareaWrapper = styled.div<{ margin?: string }>`\n  width: 100%;\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n`;\nconst TextArea = styled.textarea<{ autoHeight?: boolean }>`\n  border: 1px solid ${COLORS.neutral_400};\n  background: ${COLORS.white};\n  border-radius: 4px;\n  outline: none;\n  margin: 4px 0px;\n  padding: 16px;\n\n  resize: ${(props) => (props.autoHeight ? 'none' : '')};\n\n  ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.black)}\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.black)}\n    width: 304px;\n    &::placeholder {\n      ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n    }\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.black)}\n    width: 344px;\n  }\n\n  &:hover {\n    border: 2px solid ${COLORS.primary_700};\n    margin: 3px -1px;\n  }\n\n  &:active,\n  &:focus {\n    border: 2px solid ${COLORS.primary_800};\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 ${COLORS.critical_500};\n  }\n\n  &.valid {\n    border: none;\n    margin: 4px 0px;\n    box-shadow: inset 0 0 0 2px ${COLORS.correct_500};\n  }\n\n  &:disabled,\n  &:disabled:hover,\n  &:disabled:focus {\n    cursor: not-allowed;\n    border: 1px solid ${COLORS.neutral_100};\n    margin: 4px 0px;\n    box-shadow: none;\n\n    &::placeholder {\n      color: ${COLORS.neutral_300};\n    }\n  }\n\n  &::placeholder {\n    ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n  }\n`;\n\nconst Textarea = React.forwardRef<any, TextareaProps>(({\n  id,\n  placeholder,\n  state,\n  value,\n  size,\n  disabled,\n  validationMessage,\n  onChange,\n  margin,\n  autoHeight,\n  note,\n  required,\n  className,\n  dataTestId,\n  ...rest\n}: TextareaProps, ref) => {\n\n  const cls = `${size} ${state || (validationMessage ? States.Invalid : '')} ${className || ''}`;\n  return (\n    <TextareaWrapper>\n      <TextArea\n        id={id}\n        data-testId={dataTestId}\n        ref={ref}\n        value={value}\n        placeholder={disabled ? undefined : placeholder}\n        autoHeight={autoHeight}\n        className={cls}\n        disabled={disabled}\n        onChange={(e: any) => onChange && onChange(e?.target?.value || '')}\n        required={required}\n        {...rest}\n      />\n      {validationMessage && (\n        <ValidationMessage className={size || ''} type={state ?? States.Invalid}>\n          {state === States.Valid ? <CheckMark color={COLORS.correct_400} /> : <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    </TextareaWrapper>\n  );\n});\n\nexport default Textarea;\n"],"mappings":"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"}

package/dist/InputFields/Textarea.d.ts

@@ -4,7 +4,7 @@
 import * as React from 'react';
 import { Size } from '../types';
 import { TextFieldNote } from './types';
-declare const Textarea: React.ForwardRefExoticComponent<Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "placeholder" | "onChange" | "disabled" | "value" | "required"> & {
+declare const Textarea: React.ForwardRefExoticComponent<import("../types").Testable & Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "placeholder" | "onChange" | "disabled" | "value" | "required"> & {
     id: string;
     placeholder: string;
     value?: string | undefined;

package/dist/InputFields/Textarea.js

@@ -1,7 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-var _excluded = ["id", "placeholder", "state", "value", "size", "disabled", "validationMessage", "onChange", "margin", "autoHeight", "note", "required", "className"];
+var _excluded = ["id", "placeholder", "state", "value", "size", "disabled", "validationMessage", "onChange", "margin", "autoHeight", "note", "required", "className", "dataTestId"];
 var _templateObject, _templateObject2;
 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; }
@@ -50,11 +50,13 @@ var Textarea = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     note = _ref.note,
     required = _ref.required,
     className = _ref.className,
+    dataTestId = _ref.dataTestId,
     rest = _objectWithoutProperties(_ref, _excluded);
   var cls = "".concat(size, " ").concat(state || (validationMessage ? States.Invalid : ''), " ").concat(className || '');
   return /*#__PURE__*/_jsxs(TextareaWrapper, {
     children: [/*#__PURE__*/_jsx(TextArea, _objectSpread({
       id: id,
+      "data-testId": dataTestId,
       ref: ref,
       value: value,
       placeholder: disabled ? undefined : placeholder,

package/dist/InputFields/Textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.js","names":["React","COLORS","ComponentSStyling","NoteMessage","ValidationMessage","States","CheckMark","TechnicalWarning","styled","ComponentMStyling","ComponentTextStyle","TextareaWrapper","div","props","margin","TextArea","textarea","neutral_400","white","autoHeight","Italic","black","neutral_500","primary_700","primary_800","critical_500","correct_500","neutral_100","neutral_300","Textarea","forwardRef","ref","id","placeholder","state","value","size","disabled","validationMessage","onChange","note","required","className","rest","cls","Invalid","undefined","e","target","Valid","correct_400","critical_400","icon","message"],"sources":["../../src/InputFields/Textarea.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n\n/**\n * Import custom styles.\n */\nimport { COLORS, ComponentSStyling } from '../styles';\nimport { ErrorMessage, NoteMessage, ValidationMessage } from './styling';\nimport { Size, States } from '../types';\n\n/**\n * Import custom components.\n */\nimport { CheckMark, TechnicalWarning } from '../icons/systemicons/SystemIcons';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\nimport { ComponentMStyling, ComponentTextStyle } from '../styles';\nimport { TextareaProps, TextFieldNote } from './types';\n\n// Add component-specific styles.\nconst TextareaWrapper = styled.div<{ margin?: string }>`\n  width: 100%;\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n`;\nconst TextArea = styled.textarea<{ autoHeight?: boolean }>`\n  border: 1px solid ${COLORS.neutral_400};\n  background: ${COLORS.white};\n  border-radius: 4px;\n  outline: none;\n  margin: 4px 0px;\n  padding: 16px;\n\n  resize: ${(props) => (props.autoHeight ? 'none' : '')};\n\n  ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.black)}\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.black)}\n    width: 304px;\n    &::placeholder {\n      ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n    }\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.black)}\n    width: 344px;\n  }\n\n  &:hover {\n    border: 2px solid ${COLORS.primary_700};\n    margin: 3px -1px;\n  }\n\n  &:active,\n  &:focus {\n    border: 2px solid ${COLORS.primary_800};\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 ${COLORS.critical_500};\n  }\n\n  &.valid {\n    border: none;\n    margin: 4px 0px;\n    box-shadow: inset 0 0 0 2px ${COLORS.correct_500};\n  }\n\n  &:disabled,\n  &:disabled:hover,\n  &:disabled:focus {\n    cursor: not-allowed;\n    border: 1px solid ${COLORS.neutral_100};\n    margin: 4px 0px;\n    box-shadow: none;\n\n    &::placeholder {\n      color: ${COLORS.neutral_300};\n    }\n  }\n\n  &::placeholder {\n    ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n  }\n`;\n\nconst Textarea = React.forwardRef<any, TextareaProps>(({\n  id,\n  placeholder,\n  state,\n  value,\n  size,\n  disabled,\n  validationMessage,\n  onChange,\n  margin,\n  autoHeight,\n  note,\n  required,\n  className,\n  ...rest\n}: TextareaProps, ref) => {\n\n  const cls = `${size} ${state || (validationMessage ? States.Invalid : '')} ${className || ''}`;\n  return (\n    <TextareaWrapper>\n      <TextArea\n        id={id}\n        ref={ref}\n        value={value}\n        placeholder={disabled ? undefined : placeholder}\n        autoHeight={autoHeight}\n        className={cls}\n        disabled={disabled}\n        onChange={(e: any) => onChange && onChange(e?.target?.value || '')}\n        required={required}\n        {...rest}\n      />\n      {validationMessage && (\n        <ValidationMessage className={size || ''} type={state ?? States.Invalid}>\n          {state === States.Valid ? <CheckMark color={COLORS.correct_400} /> : <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    </TextareaWrapper>\n  );\n});\n\nexport default Textarea;\n"],"mappings":"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"}
+{"version":3,"file":"Textarea.js","names":["React","COLORS","ComponentSStyling","NoteMessage","ValidationMessage","States","CheckMark","TechnicalWarning","styled","ComponentMStyling","ComponentTextStyle","TextareaWrapper","div","props","margin","TextArea","textarea","neutral_400","white","autoHeight","Italic","black","neutral_500","primary_700","primary_800","critical_500","correct_500","neutral_100","neutral_300","Textarea","forwardRef","ref","id","placeholder","state","value","size","disabled","validationMessage","onChange","note","required","className","dataTestId","rest","cls","Invalid","undefined","e","target","Valid","correct_400","critical_400","icon","message"],"sources":["../../src/InputFields/Textarea.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n\n/**\n * Import custom styles.\n */\nimport { COLORS, ComponentSStyling } from '../styles';\nimport { ErrorMessage, NoteMessage, ValidationMessage } from './styling';\nimport { Size, States } from '../types';\n\n/**\n * Import custom components.\n */\nimport { CheckMark, TechnicalWarning } from '../icons/systemicons/SystemIcons';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\nimport { ComponentMStyling, ComponentTextStyle } from '../styles';\nimport { TextareaProps, TextFieldNote } from './types';\n\n// Add component-specific styles.\nconst TextareaWrapper = styled.div<{ margin?: string }>`\n  width: 100%;\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n`;\nconst TextArea = styled.textarea<{ autoHeight?: boolean }>`\n  border: 1px solid ${COLORS.neutral_400};\n  background: ${COLORS.white};\n  border-radius: 4px;\n  outline: none;\n  margin: 4px 0px;\n  padding: 16px;\n\n  resize: ${(props) => (props.autoHeight ? 'none' : '')};\n\n  ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.black)}\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.black)}\n    width: 304px;\n    &::placeholder {\n      ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n    }\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.black)}\n    width: 344px;\n  }\n\n  &:hover {\n    border: 2px solid ${COLORS.primary_700};\n    margin: 3px -1px;\n  }\n\n  &:active,\n  &:focus {\n    border: 2px solid ${COLORS.primary_800};\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 ${COLORS.critical_500};\n  }\n\n  &.valid {\n    border: none;\n    margin: 4px 0px;\n    box-shadow: inset 0 0 0 2px ${COLORS.correct_500};\n  }\n\n  &:disabled,\n  &:disabled:hover,\n  &:disabled:focus {\n    cursor: not-allowed;\n    border: 1px solid ${COLORS.neutral_100};\n    margin: 4px 0px;\n    box-shadow: none;\n\n    &::placeholder {\n      color: ${COLORS.neutral_300};\n    }\n  }\n\n  &::placeholder {\n    ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n  }\n`;\n\nconst Textarea = React.forwardRef<any, TextareaProps>(({\n  id,\n  placeholder,\n  state,\n  value,\n  size,\n  disabled,\n  validationMessage,\n  onChange,\n  margin,\n  autoHeight,\n  note,\n  required,\n  className,\n  dataTestId,\n  ...rest\n}: TextareaProps, ref) => {\n\n  const cls = `${size} ${state || (validationMessage ? States.Invalid : '')} ${className || ''}`;\n  return (\n    <TextareaWrapper>\n      <TextArea\n        id={id}\n        data-testId={dataTestId}\n        ref={ref}\n        value={value}\n        placeholder={disabled ? undefined : placeholder}\n        autoHeight={autoHeight}\n        className={cls}\n        disabled={disabled}\n        onChange={(e: any) => onChange && onChange(e?.target?.value || '')}\n        required={required}\n        {...rest}\n      />\n      {validationMessage && (\n        <ValidationMessage className={size || ''} type={state ?? States.Invalid}>\n          {state === States.Valid ? <CheckMark color={COLORS.correct_400} /> : <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    </TextareaWrapper>\n  );\n});\n\nexport default Textarea;\n"],"mappings":"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"}

package/dist/InputFields/types.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"types.cjs","names":[],"sources":["../../src/InputFields/types.ts"],"sourcesContent":["import { Size } from '../types';\nimport React from 'react';\n\nexport type TextFieldProps = {\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?: 'invalid' | '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\nexport type TextareaProps =\n  Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'value' | 'placeholder' | 'disabled' | 'required' | 'onChange'>\n  & {\n  id: string;\n  placeholder: string;\n  value?: string;\n  disabled?: boolean;\n  state?: 'invalid' | 'valid';\n  onChange?: (text: string) => void;\n  validationMessage?: string;\n  size: Size.Small | Size.Medium;\n  autoHeight?: boolean;\n  margin?: string;\n  note?: TextFieldNote;\n  required: boolean;\n};\n\nexport type TextFieldNote = {\n  message: string;\n  icon: React.ReactNode;\n};\n\nexport interface CheckboxProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick' | 'onKeyDown' | 'onMouseDown' | 'tabIndex'>{\n  id?: string;\n  selected: boolean;\n  select?: (selected: boolean) => void;\n  label?: string;\n  invalid?: boolean;\n  disabled?: boolean;\n  margin?: string;\n  size?: Size;\n  iconPointerEventsTransparent?: boolean;\n  semiSelected?: boolean;\n  readOnly?: boolean;\n  tabIndexVal?: number;\n  className?: string;\n};"],"mappings":";;;;;AA2DC"}
+{"version":3,"file":"types.cjs","names":[],"sources":["../../src/InputFields/types.ts"],"sourcesContent":["import { Size, Testable } from '../types';\nimport React from 'react';\n\nexport type TextFieldProps = {\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?: 'invalid' | '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\nexport type TextareaProps =\n  Testable & Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'value' | 'placeholder' | 'disabled' | 'required' | 'onChange'>\n  & {\n  id: string;\n  placeholder: string;\n  value?: string;\n  disabled?: boolean;\n  state?: 'invalid' | 'valid';\n  onChange?: (text: string) => void;\n  validationMessage?: string;\n  size: Size.Small | Size.Medium;\n  autoHeight?: boolean;\n  margin?: string;\n  note?: TextFieldNote;\n  required: boolean;\n};\n\nexport type TextFieldNote = {\n  message: string;\n  icon: React.ReactNode;\n};\n\nexport interface CheckboxProps extends Testable, Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick' | 'onKeyDown' | 'onMouseDown' | 'tabIndex'>{\n  id?: string;\n  selected: boolean;\n  select?: (selected: boolean) => void;\n  label?: string;\n  invalid?: boolean;\n  disabled?: boolean;\n  margin?: string;\n  size?: Size;\n  iconPointerEventsTransparent?: boolean;\n  semiSelected?: boolean;\n  readOnly?: boolean;\n  tabIndexVal?: number;\n  className?: string;\n};"],"mappings":";;;;;AA2DC"}

package/dist/InputFields/types.d.ts

@@ -1,4 +1,4 @@
-import { Size } from '../types';
+import { Size, Testable } from '../types';
 import React from 'react';
 export type TextFieldProps = {
     id: string;
@@ -19,7 +19,7 @@ export type TextFieldProps = {
     margin?: string;
     note?: TextFieldNote;
 };
-export type TextareaProps = Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'value' | 'placeholder' | 'disabled' | 'required' | 'onChange'> & {
+export type TextareaProps = Testable & Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'value' | 'placeholder' | 'disabled' | 'required' | 'onChange'> & {
     id: string;
     placeholder: string;
     value?: string;
@@ -37,7 +37,7 @@ export type TextFieldNote = {
     message: string;
     icon: React.ReactNode;
 };
-export interface CheckboxProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick' | 'onKeyDown' | 'onMouseDown' | 'tabIndex'> {
+export interface CheckboxProps extends Testable, Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick' | 'onKeyDown' | 'onMouseDown' | 'tabIndex'> {
     id?: string;
     selected: boolean;
     select?: (selected: boolean) => void;

package/dist/InputFields/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":[],"sources":["../../src/InputFields/types.ts"],"sourcesContent":["import { Size } from '../types';\nimport React from 'react';\n\nexport type TextFieldProps = {\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?: 'invalid' | '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\nexport type TextareaProps =\n  Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'value' | 'placeholder' | 'disabled' | 'required' | 'onChange'>\n  & {\n  id: string;\n  placeholder: string;\n  value?: string;\n  disabled?: boolean;\n  state?: 'invalid' | 'valid';\n  onChange?: (text: string) => void;\n  validationMessage?: string;\n  size: Size.Small | Size.Medium;\n  autoHeight?: boolean;\n  margin?: string;\n  note?: TextFieldNote;\n  required: boolean;\n};\n\nexport type TextFieldNote = {\n  message: string;\n  icon: React.ReactNode;\n};\n\nexport interface CheckboxProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick' | 'onKeyDown' | 'onMouseDown' | 'tabIndex'>{\n  id?: string;\n  selected: boolean;\n  select?: (selected: boolean) => void;\n  label?: string;\n  invalid?: boolean;\n  disabled?: boolean;\n  margin?: string;\n  size?: Size;\n  iconPointerEventsTransparent?: boolean;\n  semiSelected?: boolean;\n  readOnly?: boolean;\n  tabIndexVal?: number;\n  className?: string;\n};"],"mappings":"AA2DC;AAAC"}
+{"version":3,"file":"types.js","names":[],"sources":["../../src/InputFields/types.ts"],"sourcesContent":["import { Size, Testable } from '../types';\nimport React from 'react';\n\nexport type TextFieldProps = {\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?: 'invalid' | '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\nexport type TextareaProps =\n  Testable & Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'value' | 'placeholder' | 'disabled' | 'required' | 'onChange'>\n  & {\n  id: string;\n  placeholder: string;\n  value?: string;\n  disabled?: boolean;\n  state?: 'invalid' | 'valid';\n  onChange?: (text: string) => void;\n  validationMessage?: string;\n  size: Size.Small | Size.Medium;\n  autoHeight?: boolean;\n  margin?: string;\n  note?: TextFieldNote;\n  required: boolean;\n};\n\nexport type TextFieldNote = {\n  message: string;\n  icon: React.ReactNode;\n};\n\nexport interface CheckboxProps extends Testable, Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick' | 'onKeyDown' | 'onMouseDown' | 'tabIndex'>{\n  id?: string;\n  selected: boolean;\n  select?: (selected: boolean) => void;\n  label?: string;\n  invalid?: boolean;\n  disabled?: boolean;\n  margin?: string;\n  size?: Size;\n  iconPointerEventsTransparent?: boolean;\n  semiSelected?: boolean;\n  readOnly?: boolean;\n  tabIndexVal?: number;\n  className?: string;\n};"],"mappings":"AA2DC;AAAC"}

package/dist/Modals/ModalContent.cjs

@@ -140,6 +140,7 @@ var ModalContent = function ModalContent(props) {
           })]
         }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(HeaderActions, {
           children: [tooltip(), headerActions(), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
+            dataTestId: 'content-modal-close-button',
             id: 'content-modal-close-button',
             variant: "secondary",
             shape: "circular",