@laerdal/life-react-components 3.2.3-dev.8.full → 3.3.0

package/dist/InputFields/TextField.cjs.map

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

package/dist/InputFields/TextField.d.ts

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

package/dist/InputFields/TextField.js

@@ -1,7 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _pt from "prop-types";
-var _excluded = ["id", "disabled", "readOnly", "onChange", "value", "validationMessage", "type", "autoComplete", "placeholder", "required", "pattern", "maxLength", "withoutBorder", "state", "size", "margin", "note", "className", "dataTestId"];
+var _excluded = ["id", "disabled", "readOnly", "onChange", "value", "validationMessage", "type", "autoComplete", "placeholder", "required", "pattern", "maxLength", "withoutBorder", "state", "size", "margin", "overflowTooltipPosition", "note", "className", "dataTestId"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import * as React from 'react';
@@ -31,6 +31,7 @@ var TextField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     state = _ref.state,
     size = _ref.size,
     margin = _ref.margin,
+    overflowTooltipPosition = _ref.overflowTooltipPosition,
     note = _ref.note,
     className = _ref.className,
     dataTestId = _ref.dataTestId,
@@ -73,12 +74,12 @@ var TextField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         withoutBorder: withoutBorder
       }, rest)), /*#__PURE__*/_jsx(TooltipOverflow, {
         value: value,
+        position: overflowTooltipPosition,
         input: elementRef,
         withArrow: true,
         maxWidth: "100%",
         size: size,
         align: "end",
-        position: "bottom",
         children: value
       }), validationMessage && /*#__PURE__*/_jsxs(ValidationMessage, {
         className: size || '',
@@ -113,6 +114,7 @@ TextField.propTypes = {
   pattern: _pt.string,
   maxLength: _pt.number,
   withoutBorder: _pt.bool,
+  overflowTooltipPosition: _pt.oneOf(['top', 'bottom']),
   margin: _pt.string
 };
 export default TextField;

package/dist/InputFields/TextField.js.map

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

@@ -20,7 +20,7 @@ var InputWrapper = _styledComponents.default.div(_templateObject || (_templateOb
   return props.readOnly || props.disabled ? 'cursor: not-allowed;' : '';
 }, function (props) {
   return props.margin ? "margin: ".concat(props.margin, ";") : '';
-}, (0, _TooltipStyles.TooltipTrigger)());
+}, (0, _TooltipStyles.TooltipTrigger)('hover'));
 exports.InputWrapper = InputWrapper;
 var readOnlyState = (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n  box-shadow: inset 0 0 0 1px ", " !important;\n  color: ", " !important;\n  pointer-events: none;\n  outline: none;\n  cursor: not-allowed;\n"])), _styles.COLORS.neutral_100, _styles.COLORS.neutral_300, _styles.COLORS.neutral_600);
 exports.readOnlyState = readOnlyState;

package/dist/InputFields/styling.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"styling.cjs","names":["InputWrapper","styled","div","props","readOnly","disabled","margin","TooltipTrigger","readOnlyState","css","COLORS","neutral_100","neutral_300","neutral_600","activeErrorMessageState","critical_400","InputFieldStyling","input","withoutBorder","neutral_400","extraRightPadding","ComponentSStyling","ComponentTextStyle","Italic","neutral_500","BREAKPOINTS","MEDIUM","ComponentMStyling","black","activeErrorMessage","suppressReadOnlyStyles","primary_800","focusStyles","correct_500","primary_700","ValidationStyling","ComponentXXSStyling","Regular","Warning","ComponentXSStyling","ErrorMessage","critical_500","StateColors","States","Default","Valid","Invalid","ValidationMessage","type","NoteMessage","AutofilledMessage","StyledIcon","SearchIconWrapper"],"sources":["../../src/InputFields/styling.ts"],"sourcesContent":["import { TooltipTrigger } from '../Tooltips/TooltipStyles';\nimport styled, { css } from 'styled-components';\nimport { BREAKPOINTS, COLORS, focusStyles } from '../styles';\nimport { ComponentXXSStyling, ComponentTextStyle, ComponentSStyling, ComponentMStyling, ComponentXSStyling } from '../styles/typography';\nimport {Size, States} from '../types';\n\nexport const InputWrapper = styled.div<{ readOnly?: boolean; disabled?: boolean; margin?: string }>`\n  outline: none;\n  ${(props) => (props.readOnly || props.disabled ? 'cursor: not-allowed;' : '')};\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n  position: relative;\n  \n  ${TooltipTrigger()}\n\n`;\n\nexport const readOnlyState = css`\n  background-color: ${COLORS.neutral_100};\n  box-shadow: inset 0 0 0 1px ${COLORS.neutral_300} !important;\n  color: ${COLORS.neutral_600} !important;\n  pointer-events: none;\n  outline: none;\n  cursor: not-allowed;\n`;\nexport const activeErrorMessageState = css`\n  box-shadow: inset 0 0 0 2px ${COLORS.critical_400};\n`;\n\nconst InputFieldStyling = styled.input<{\n  activeErrorMessage?: boolean;\n  active?: boolean;\n  withoutBorder?: boolean;\n  size?: string;\n  suppressReadOnlyStyles?: boolean;\n  extraRightPadding?: number;\n}>`\n  height: 48px;\n  width: 100%;\n  border-radius: 4px;\n  margin-bottom: 4px;\n\n  border: 0;\n  -webkit-appearance: none;\n  ${(props) =>\n    props.withoutBorder\n      ? `-webkit-box-shadow: none;\n      -moz-box-shadow: none;\n      box-shadow: none;\n      `\n      : `-webkit-box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};\n      -moz-box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};\n      box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};`}\n  background-color: #fff;\n  box-sizing: border-box;\n  padding: 0 ${props => 16 + (props.extraRightPadding ?? 0)}px 0 16px !important;\n  text-overflow: ellipsis;\n\n  outline: none;\n  position: relative;\n\n  font-size: 16px;\n\n  &::placeholder {\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    font-size: 18px;\n    line-height: 18px;\n    height: 56px;\n    padding: 0 16px !important;\n\n    &::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n    }\n  }\n\n  &.small {\n    font-size: 16px;\n    height: 48px;\n    &::placeholder {\n      font-size: 16px;\n    }\n  }\n  &.medium {\n    font-size: 18px;\n    height: 56px;\n    &::placeholder {\n      font-size: 18px;\n    }\n  }\n\n  color: ${COLORS.black} !important;\n\n  ${(props) => (props.activeErrorMessage ? activeErrorMessageState : '')}\n\n  &:read-only:not(:disabled) {\n    ${(props) => (props.suppressReadOnlyStyles ? '' : readOnlyState)}\n  }\n\n  &:disabled {\n    border: 1px solid ${COLORS.neutral_100};\n    pointer-events: none;\n    box-shadow: none !important;\n    outline: none;\n    cursor: not-allowed;\n    color: ${COLORS.neutral_300} !important;\n  }\n  &:focus:not(.focus-visible) {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n  }\n\n  &.focus-visible {\n    ${focusStyles}\n  }\n\n  &.invalid {\n    box-shadow: inset 0 0 0 2px ${COLORS.critical_400};\n  }\n  &.valid {\n    box-shadow: inset 0 0 0 2px ${COLORS.correct_500};\n  }\n\n  &:not(.placeholder) {\n    line-height: 40px;\n  }\n\n  &:hover {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_700};\n  }\n\n  &.active {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n  }\n\n  &.show-checkmark.valid {\n    background-image: none;\n  }\n\n  &.show-checkmark.pending {\n    background-image: none;\n  }\n`;\n\nconst ValidationStyling = css`\n  &.error-msg {\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    text-align: center;\n    font-weight: 400;\n    box-sizing: border-box;\n  }\n\n  &.error-msg {\n    padding-top: 8px;\n    padding-bottom: 0;\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, '#e76468')}\n    font-weight: 700;\n    line-height: 15px;\n  }\n`;\n\nexport const Warning = styled.div`\n  display: flex;\n  align-items: center;\n  margin-bottom: 4px;\n  ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\n\n  svg {\n    width: 16px;\n    height: 16px;\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n    svg {\n      width: 20px;\n      height: 20px;\n    }\n  }\n\n  &.small {\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\n    svg {\n      width: 16px;\n      height: 16px;\n    }\n  }\n  &.medium {\n    ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n    svg {\n      width: 20px;\n      height: 20px;\n    }\n  }\n\n  & * {\n    vertical-align: middle;\n    display: inline-block;\n  }\n\n  svg {\n    margin-right: 4px;\n  }\n`;\nexport const ErrorMessage = styled(Warning)`\n  color: ${COLORS.critical_500};\n`;\n\nconst StateColors = {\n  [States.Default]: COLORS.neutral_500,\n  [States.Valid]: COLORS.correct_500,\n  [States.Invalid]: COLORS.critical_500,\n}\n\nexport const ValidationMessage = styled(Warning)<{ type: States.Valid | States.Invalid | States.Default}>`\n  color: ${(props) => StateColors[props.type]};\n`;\n\nexport const NoteMessage = styled(Warning)`\n  color: ${COLORS.neutral_500};\n`;\nexport const AutofilledMessage = styled(Warning)`\n  color: ${COLORS.neutral_600};\n`;\n\nexport { ValidationStyling, InputFieldStyling };\n\nexport const StyledIcon = styled.div`\n  border-radius: 50%;\n`;\n\nexport const SearchIconWrapper = styled(StyledIcon)`\n  position: absolute;\n  border-radius: 50%;\n`;\n"],"mappings":"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"}
+{"version":3,"file":"styling.cjs","names":["InputWrapper","styled","div","props","readOnly","disabled","margin","TooltipTrigger","readOnlyState","css","COLORS","neutral_100","neutral_300","neutral_600","activeErrorMessageState","critical_400","InputFieldStyling","input","withoutBorder","neutral_400","extraRightPadding","ComponentSStyling","ComponentTextStyle","Italic","neutral_500","BREAKPOINTS","MEDIUM","ComponentMStyling","black","activeErrorMessage","suppressReadOnlyStyles","primary_800","focusStyles","correct_500","primary_700","ValidationStyling","ComponentXXSStyling","Regular","Warning","ComponentXSStyling","ErrorMessage","critical_500","StateColors","States","Default","Valid","Invalid","ValidationMessage","type","NoteMessage","AutofilledMessage","StyledIcon","SearchIconWrapper"],"sources":["../../src/InputFields/styling.ts"],"sourcesContent":["import { TooltipTrigger } from '../Tooltips/TooltipStyles';\nimport styled, { css } from 'styled-components';\nimport { BREAKPOINTS, COLORS, focusStyles } from '../styles';\nimport { ComponentXXSStyling, ComponentTextStyle, ComponentSStyling, ComponentMStyling, ComponentXSStyling } from '../styles/typography';\nimport {Size, States} from '../types';\n\nexport const InputWrapper = styled.div<{ readOnly?: boolean; disabled?: boolean; margin?: string }>`\n  outline: none;\n  ${(props) => (props.readOnly || props.disabled ? 'cursor: not-allowed;' : '')};\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n  position: relative;\n  \n  ${TooltipTrigger('hover')}\n\n`;\n\nexport const readOnlyState = css`\n  background-color: ${COLORS.neutral_100};\n  box-shadow: inset 0 0 0 1px ${COLORS.neutral_300} !important;\n  color: ${COLORS.neutral_600} !important;\n  pointer-events: none;\n  outline: none;\n  cursor: not-allowed;\n`;\nexport const activeErrorMessageState = css`\n  box-shadow: inset 0 0 0 2px ${COLORS.critical_400};\n`;\n\nconst InputFieldStyling = styled.input<{\n  activeErrorMessage?: boolean;\n  active?: boolean;\n  withoutBorder?: boolean;\n  size?: string;\n  suppressReadOnlyStyles?: boolean;\n  extraRightPadding?: number;\n}>`\n  height: 48px;\n  width: 100%;\n  border-radius: 4px;\n  margin-bottom: 4px;\n\n  border: 0;\n  -webkit-appearance: none;\n  ${(props) =>\n    props.withoutBorder\n      ? `-webkit-box-shadow: none;\n      -moz-box-shadow: none;\n      box-shadow: none;\n      `\n      : `-webkit-box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};\n      -moz-box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};\n      box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};`}\n  background-color: #fff;\n  box-sizing: border-box;\n  padding: 0 ${props => 16 + (props.extraRightPadding ?? 0)}px 0 16px !important;\n  text-overflow: ellipsis;\n\n  outline: none;\n  position: relative;\n\n  font-size: 16px;\n\n  &::placeholder {\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    font-size: 18px;\n    line-height: 18px;\n    height: 56px;\n    padding: 0 16px !important;\n\n    &::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n    }\n  }\n\n  &.small {\n    font-size: 16px;\n    height: 48px;\n    &::placeholder {\n      font-size: 16px;\n    }\n  }\n  &.medium {\n    font-size: 18px;\n    height: 56px;\n    &::placeholder {\n      font-size: 18px;\n    }\n  }\n\n  color: ${COLORS.black} !important;\n\n  ${(props) => (props.activeErrorMessage ? activeErrorMessageState : '')}\n\n  &:read-only:not(:disabled) {\n    ${(props) => (props.suppressReadOnlyStyles ? '' : readOnlyState)}\n  }\n\n  &:disabled {\n    border: 1px solid ${COLORS.neutral_100};\n    pointer-events: none;\n    box-shadow: none !important;\n    outline: none;\n    cursor: not-allowed;\n    color: ${COLORS.neutral_300} !important;\n  }\n  &:focus:not(.focus-visible) {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n  }\n\n  &.focus-visible {\n    ${focusStyles}\n  }\n\n  &.invalid {\n    box-shadow: inset 0 0 0 2px ${COLORS.critical_400};\n  }\n  &.valid {\n    box-shadow: inset 0 0 0 2px ${COLORS.correct_500};\n  }\n\n  &:not(.placeholder) {\n    line-height: 40px;\n  }\n\n  &:hover {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_700};\n  }\n\n  &.active {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n  }\n\n  &.show-checkmark.valid {\n    background-image: none;\n  }\n\n  &.show-checkmark.pending {\n    background-image: none;\n  }\n`;\n\nconst ValidationStyling = css`\n  &.error-msg {\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    text-align: center;\n    font-weight: 400;\n    box-sizing: border-box;\n  }\n\n  &.error-msg {\n    padding-top: 8px;\n    padding-bottom: 0;\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, '#e76468')}\n    font-weight: 700;\n    line-height: 15px;\n  }\n`;\n\nexport const Warning = styled.div`\n  display: flex;\n  align-items: center;\n  margin-bottom: 4px;\n  ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\n\n  svg {\n    width: 16px;\n    height: 16px;\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n    svg {\n      width: 20px;\n      height: 20px;\n    }\n  }\n\n  &.small {\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\n    svg {\n      width: 16px;\n      height: 16px;\n    }\n  }\n  &.medium {\n    ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n    svg {\n      width: 20px;\n      height: 20px;\n    }\n  }\n\n  & * {\n    vertical-align: middle;\n    display: inline-block;\n  }\n\n  svg {\n    margin-right: 4px;\n  }\n`;\nexport const ErrorMessage = styled(Warning)`\n  color: ${COLORS.critical_500};\n`;\n\nconst StateColors = {\n  [States.Default]: COLORS.neutral_500,\n  [States.Valid]: COLORS.correct_500,\n  [States.Invalid]: COLORS.critical_500,\n}\n\nexport const ValidationMessage = styled(Warning)<{ type: States.Valid | States.Invalid | States.Default}>`\n  color: ${(props) => StateColors[props.type]};\n`;\n\nexport const NoteMessage = styled(Warning)`\n  color: ${COLORS.neutral_500};\n`;\nexport const AutofilledMessage = styled(Warning)`\n  color: ${COLORS.neutral_600};\n`;\n\nexport { ValidationStyling, InputFieldStyling };\n\nexport const StyledIcon = styled.div`\n  border-radius: 50%;\n`;\n\nexport const SearchIconWrapper = styled(StyledIcon)`\n  position: absolute;\n  border-radius: 50%;\n`;\n"],"mappings":"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"}

package/dist/InputFields/styling.js

@@ -10,7 +10,7 @@ export var InputWrapper = styled.div(_templateObject || (_templateObject = _tagg
   return props.readOnly || props.disabled ? 'cursor: not-allowed;' : '';
 }, function (props) {
   return props.margin ? "margin: ".concat(props.margin, ";") : '';
-}, TooltipTrigger());
+}, TooltipTrigger('hover'));
 export var readOnlyState = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  box-shadow: inset 0 0 0 1px ", " !important;\n  color: ", " !important;\n  pointer-events: none;\n  outline: none;\n  cursor: not-allowed;\n"])), COLORS.neutral_100, COLORS.neutral_300, COLORS.neutral_600);
 export var activeErrorMessageState = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  box-shadow: inset 0 0 0 2px ", ";\n"])), COLORS.critical_400);
 var InputFieldStyling = styled.input(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  height: 48px;\n  width: 100%;\n  border-radius: 4px;\n  margin-bottom: 4px;\n\n  border: 0;\n  -webkit-appearance: none;\n  ", "\n  background-color: #fff;\n  box-sizing: border-box;\n  padding: 0 ", "px 0 16px !important;\n  text-overflow: ellipsis;\n\n  outline: none;\n  position: relative;\n\n  font-size: 16px;\n\n  &::placeholder {\n    ", "\n  }\n\n  ", " {\n    font-size: 18px;\n    line-height: 18px;\n    height: 56px;\n    padding: 0 16px !important;\n\n    &::placeholder {\n      ", "\n    }\n  }\n\n  &.small {\n    font-size: 16px;\n    height: 48px;\n    &::placeholder {\n      font-size: 16px;\n    }\n  }\n  &.medium {\n    font-size: 18px;\n    height: 56px;\n    &::placeholder {\n      font-size: 18px;\n    }\n  }\n\n  color: ", " !important;\n\n  ", "\n\n  &:read-only:not(:disabled) {\n    ", "\n  }\n\n  &:disabled {\n    border: 1px solid ", ";\n    pointer-events: none;\n    box-shadow: none !important;\n    outline: none;\n    cursor: not-allowed;\n    color: ", " !important;\n  }\n  &:focus:not(.focus-visible) {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n\n  &.focus-visible {\n    ", "\n  }\n\n  &.invalid {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n  &.valid {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &:not(.placeholder) {\n    line-height: 40px;\n  }\n\n  &:hover {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n\n  &.active {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n\n  &.show-checkmark.valid {\n    background-image: none;\n  }\n\n  &.show-checkmark.pending {\n    background-image: none;\n  }\n"])), function (props) {

package/dist/InputFields/styling.js.map

@@ -1 +1 @@
-{"version":3,"file":"styling.js","names":["TooltipTrigger","styled","css","BREAKPOINTS","COLORS","focusStyles","ComponentXXSStyling","ComponentTextStyle","ComponentSStyling","ComponentMStyling","ComponentXSStyling","States","InputWrapper","div","props","readOnly","disabled","margin","readOnlyState","neutral_100","neutral_300","neutral_600","activeErrorMessageState","critical_400","InputFieldStyling","input","withoutBorder","neutral_400","extraRightPadding","Italic","neutral_500","MEDIUM","black","activeErrorMessage","suppressReadOnlyStyles","primary_800","correct_500","primary_700","ValidationStyling","Regular","Warning","ErrorMessage","critical_500","StateColors","Default","Valid","Invalid","ValidationMessage","type","NoteMessage","AutofilledMessage","StyledIcon","SearchIconWrapper"],"sources":["../../src/InputFields/styling.ts"],"sourcesContent":["import { TooltipTrigger } from '../Tooltips/TooltipStyles';\nimport styled, { css } from 'styled-components';\nimport { BREAKPOINTS, COLORS, focusStyles } from '../styles';\nimport { ComponentXXSStyling, ComponentTextStyle, ComponentSStyling, ComponentMStyling, ComponentXSStyling } from '../styles/typography';\nimport {Size, States} from '../types';\n\nexport const InputWrapper = styled.div<{ readOnly?: boolean; disabled?: boolean; margin?: string }>`\n  outline: none;\n  ${(props) => (props.readOnly || props.disabled ? 'cursor: not-allowed;' : '')};\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n  position: relative;\n  \n  ${TooltipTrigger()}\n\n`;\n\nexport const readOnlyState = css`\n  background-color: ${COLORS.neutral_100};\n  box-shadow: inset 0 0 0 1px ${COLORS.neutral_300} !important;\n  color: ${COLORS.neutral_600} !important;\n  pointer-events: none;\n  outline: none;\n  cursor: not-allowed;\n`;\nexport const activeErrorMessageState = css`\n  box-shadow: inset 0 0 0 2px ${COLORS.critical_400};\n`;\n\nconst InputFieldStyling = styled.input<{\n  activeErrorMessage?: boolean;\n  active?: boolean;\n  withoutBorder?: boolean;\n  size?: string;\n  suppressReadOnlyStyles?: boolean;\n  extraRightPadding?: number;\n}>`\n  height: 48px;\n  width: 100%;\n  border-radius: 4px;\n  margin-bottom: 4px;\n\n  border: 0;\n  -webkit-appearance: none;\n  ${(props) =>\n    props.withoutBorder\n      ? `-webkit-box-shadow: none;\n      -moz-box-shadow: none;\n      box-shadow: none;\n      `\n      : `-webkit-box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};\n      -moz-box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};\n      box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};`}\n  background-color: #fff;\n  box-sizing: border-box;\n  padding: 0 ${props => 16 + (props.extraRightPadding ?? 0)}px 0 16px !important;\n  text-overflow: ellipsis;\n\n  outline: none;\n  position: relative;\n\n  font-size: 16px;\n\n  &::placeholder {\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    font-size: 18px;\n    line-height: 18px;\n    height: 56px;\n    padding: 0 16px !important;\n\n    &::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n    }\n  }\n\n  &.small {\n    font-size: 16px;\n    height: 48px;\n    &::placeholder {\n      font-size: 16px;\n    }\n  }\n  &.medium {\n    font-size: 18px;\n    height: 56px;\n    &::placeholder {\n      font-size: 18px;\n    }\n  }\n\n  color: ${COLORS.black} !important;\n\n  ${(props) => (props.activeErrorMessage ? activeErrorMessageState : '')}\n\n  &:read-only:not(:disabled) {\n    ${(props) => (props.suppressReadOnlyStyles ? '' : readOnlyState)}\n  }\n\n  &:disabled {\n    border: 1px solid ${COLORS.neutral_100};\n    pointer-events: none;\n    box-shadow: none !important;\n    outline: none;\n    cursor: not-allowed;\n    color: ${COLORS.neutral_300} !important;\n  }\n  &:focus:not(.focus-visible) {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n  }\n\n  &.focus-visible {\n    ${focusStyles}\n  }\n\n  &.invalid {\n    box-shadow: inset 0 0 0 2px ${COLORS.critical_400};\n  }\n  &.valid {\n    box-shadow: inset 0 0 0 2px ${COLORS.correct_500};\n  }\n\n  &:not(.placeholder) {\n    line-height: 40px;\n  }\n\n  &:hover {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_700};\n  }\n\n  &.active {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n  }\n\n  &.show-checkmark.valid {\n    background-image: none;\n  }\n\n  &.show-checkmark.pending {\n    background-image: none;\n  }\n`;\n\nconst ValidationStyling = css`\n  &.error-msg {\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    text-align: center;\n    font-weight: 400;\n    box-sizing: border-box;\n  }\n\n  &.error-msg {\n    padding-top: 8px;\n    padding-bottom: 0;\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, '#e76468')}\n    font-weight: 700;\n    line-height: 15px;\n  }\n`;\n\nexport const Warning = styled.div`\n  display: flex;\n  align-items: center;\n  margin-bottom: 4px;\n  ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\n\n  svg {\n    width: 16px;\n    height: 16px;\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n    svg {\n      width: 20px;\n      height: 20px;\n    }\n  }\n\n  &.small {\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\n    svg {\n      width: 16px;\n      height: 16px;\n    }\n  }\n  &.medium {\n    ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n    svg {\n      width: 20px;\n      height: 20px;\n    }\n  }\n\n  & * {\n    vertical-align: middle;\n    display: inline-block;\n  }\n\n  svg {\n    margin-right: 4px;\n  }\n`;\nexport const ErrorMessage = styled(Warning)`\n  color: ${COLORS.critical_500};\n`;\n\nconst StateColors = {\n  [States.Default]: COLORS.neutral_500,\n  [States.Valid]: COLORS.correct_500,\n  [States.Invalid]: COLORS.critical_500,\n}\n\nexport const ValidationMessage = styled(Warning)<{ type: States.Valid | States.Invalid | States.Default}>`\n  color: ${(props) => StateColors[props.type]};\n`;\n\nexport const NoteMessage = styled(Warning)`\n  color: ${COLORS.neutral_500};\n`;\nexport const AutofilledMessage = styled(Warning)`\n  color: ${COLORS.neutral_600};\n`;\n\nexport { ValidationStyling, InputFieldStyling };\n\nexport const StyledIcon = styled.div`\n  border-radius: 50%;\n`;\n\nexport const SearchIconWrapper = styled(StyledIcon)`\n  position: absolute;\n  border-radius: 50%;\n`;\n"],"mappings":"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"}
+{"version":3,"file":"styling.js","names":["TooltipTrigger","styled","css","BREAKPOINTS","COLORS","focusStyles","ComponentXXSStyling","ComponentTextStyle","ComponentSStyling","ComponentMStyling","ComponentXSStyling","States","InputWrapper","div","props","readOnly","disabled","margin","readOnlyState","neutral_100","neutral_300","neutral_600","activeErrorMessageState","critical_400","InputFieldStyling","input","withoutBorder","neutral_400","extraRightPadding","Italic","neutral_500","MEDIUM","black","activeErrorMessage","suppressReadOnlyStyles","primary_800","correct_500","primary_700","ValidationStyling","Regular","Warning","ErrorMessage","critical_500","StateColors","Default","Valid","Invalid","ValidationMessage","type","NoteMessage","AutofilledMessage","StyledIcon","SearchIconWrapper"],"sources":["../../src/InputFields/styling.ts"],"sourcesContent":["import { TooltipTrigger } from '../Tooltips/TooltipStyles';\nimport styled, { css } from 'styled-components';\nimport { BREAKPOINTS, COLORS, focusStyles } from '../styles';\nimport { ComponentXXSStyling, ComponentTextStyle, ComponentSStyling, ComponentMStyling, ComponentXSStyling } from '../styles/typography';\nimport {Size, States} from '../types';\n\nexport const InputWrapper = styled.div<{ readOnly?: boolean; disabled?: boolean; margin?: string }>`\n  outline: none;\n  ${(props) => (props.readOnly || props.disabled ? 'cursor: not-allowed;' : '')};\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n  position: relative;\n  \n  ${TooltipTrigger('hover')}\n\n`;\n\nexport const readOnlyState = css`\n  background-color: ${COLORS.neutral_100};\n  box-shadow: inset 0 0 0 1px ${COLORS.neutral_300} !important;\n  color: ${COLORS.neutral_600} !important;\n  pointer-events: none;\n  outline: none;\n  cursor: not-allowed;\n`;\nexport const activeErrorMessageState = css`\n  box-shadow: inset 0 0 0 2px ${COLORS.critical_400};\n`;\n\nconst InputFieldStyling = styled.input<{\n  activeErrorMessage?: boolean;\n  active?: boolean;\n  withoutBorder?: boolean;\n  size?: string;\n  suppressReadOnlyStyles?: boolean;\n  extraRightPadding?: number;\n}>`\n  height: 48px;\n  width: 100%;\n  border-radius: 4px;\n  margin-bottom: 4px;\n\n  border: 0;\n  -webkit-appearance: none;\n  ${(props) =>\n    props.withoutBorder\n      ? `-webkit-box-shadow: none;\n      -moz-box-shadow: none;\n      box-shadow: none;\n      `\n      : `-webkit-box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};\n      -moz-box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};\n      box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};`}\n  background-color: #fff;\n  box-sizing: border-box;\n  padding: 0 ${props => 16 + (props.extraRightPadding ?? 0)}px 0 16px !important;\n  text-overflow: ellipsis;\n\n  outline: none;\n  position: relative;\n\n  font-size: 16px;\n\n  &::placeholder {\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    font-size: 18px;\n    line-height: 18px;\n    height: 56px;\n    padding: 0 16px !important;\n\n    &::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n    }\n  }\n\n  &.small {\n    font-size: 16px;\n    height: 48px;\n    &::placeholder {\n      font-size: 16px;\n    }\n  }\n  &.medium {\n    font-size: 18px;\n    height: 56px;\n    &::placeholder {\n      font-size: 18px;\n    }\n  }\n\n  color: ${COLORS.black} !important;\n\n  ${(props) => (props.activeErrorMessage ? activeErrorMessageState : '')}\n\n  &:read-only:not(:disabled) {\n    ${(props) => (props.suppressReadOnlyStyles ? '' : readOnlyState)}\n  }\n\n  &:disabled {\n    border: 1px solid ${COLORS.neutral_100};\n    pointer-events: none;\n    box-shadow: none !important;\n    outline: none;\n    cursor: not-allowed;\n    color: ${COLORS.neutral_300} !important;\n  }\n  &:focus:not(.focus-visible) {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n  }\n\n  &.focus-visible {\n    ${focusStyles}\n  }\n\n  &.invalid {\n    box-shadow: inset 0 0 0 2px ${COLORS.critical_400};\n  }\n  &.valid {\n    box-shadow: inset 0 0 0 2px ${COLORS.correct_500};\n  }\n\n  &:not(.placeholder) {\n    line-height: 40px;\n  }\n\n  &:hover {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_700};\n  }\n\n  &.active {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n  }\n\n  &.show-checkmark.valid {\n    background-image: none;\n  }\n\n  &.show-checkmark.pending {\n    background-image: none;\n  }\n`;\n\nconst ValidationStyling = css`\n  &.error-msg {\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    text-align: center;\n    font-weight: 400;\n    box-sizing: border-box;\n  }\n\n  &.error-msg {\n    padding-top: 8px;\n    padding-bottom: 0;\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, '#e76468')}\n    font-weight: 700;\n    line-height: 15px;\n  }\n`;\n\nexport const Warning = styled.div`\n  display: flex;\n  align-items: center;\n  margin-bottom: 4px;\n  ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\n\n  svg {\n    width: 16px;\n    height: 16px;\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n    svg {\n      width: 20px;\n      height: 20px;\n    }\n  }\n\n  &.small {\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\n    svg {\n      width: 16px;\n      height: 16px;\n    }\n  }\n  &.medium {\n    ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n    svg {\n      width: 20px;\n      height: 20px;\n    }\n  }\n\n  & * {\n    vertical-align: middle;\n    display: inline-block;\n  }\n\n  svg {\n    margin-right: 4px;\n  }\n`;\nexport const ErrorMessage = styled(Warning)`\n  color: ${COLORS.critical_500};\n`;\n\nconst StateColors = {\n  [States.Default]: COLORS.neutral_500,\n  [States.Valid]: COLORS.correct_500,\n  [States.Invalid]: COLORS.critical_500,\n}\n\nexport const ValidationMessage = styled(Warning)<{ type: States.Valid | States.Invalid | States.Default}>`\n  color: ${(props) => StateColors[props.type]};\n`;\n\nexport const NoteMessage = styled(Warning)`\n  color: ${COLORS.neutral_500};\n`;\nexport const AutofilledMessage = styled(Warning)`\n  color: ${COLORS.neutral_600};\n`;\n\nexport { ValidationStyling, InputFieldStyling };\n\nexport const StyledIcon = styled.div`\n  border-radius: 50%;\n`;\n\nexport const SearchIconWrapper = styled(StyledIcon)`\n  position: absolute;\n  border-radius: 50%;\n`;\n"],"mappings":"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"}

package/dist/Table/TableBody.cjs

@@ -8,6 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Button = require("../Button");
 var _types = require("../types");
@@ -19,11 +20,14 @@ var _TableStyles = require("./TableStyles");
 var _common = require("../common");
 var _icons = require("../icons");
 var _rooks = require("rooks");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _jsxRuntime = require("react/jsx-runtime");
+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; }
 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) { (0, _defineProperty2.default)(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; }
+var ColumnLabel = _styledComponents.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n"])));
 var TableBody = function TableBody(props) {
   var _props$noRowsLabel;
   var _useDimensionsRef = (0, _rooks.useDimensionsRef)({
@@ -114,8 +118,15 @@ var TableBody = function TableBody(props) {
         return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
           children: [column.icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_TableStyles.StyledTableCellIcon, {
             children: column.icon
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TableStyles.StyledTableCellText, {
-            children: row[column.key]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_TableStyles.StyledTableCellTextWrapper, {
+            textWrap: !column.shortenText,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TableStyles.StyledTableCellText, {
+              children: row[column.key]
+            }), Boolean(column.noteKey) && Boolean(row[column.noteKey]) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TableStyles.StyledTableCellNoteText, {
+                children: row[column.noteKey]
+              })
+            })]
           })]
         });
     }
@@ -164,13 +175,13 @@ var TableBody = function TableBody(props) {
               tabIndex: column.sortable && !props.showLoadingIndicator ? 0 : -1,
               className: "".concat(!!column.sortable ? 'sortable' : '', " ").concat(column.key === ((_props$sortProps6 = props.sortProps) === null || _props$sortProps6 === void 0 ? void 0 : _props$sortProps6.column) && !!((_props$sortProps7 = props.sortProps) !== null && _props$sortProps7 !== void 0 && _props$sortProps7.direction) ? 'sorted' : '', " ").concat(column.justify || ''),
               children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_TableStyles.StyledTableHeaderColumnContent, {
-                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ColumnLabel, {
                   children: column.name
                 }), column.key === ((_props$sortProps8 = props.sortProps) === null || _props$sortProps8 === void 0 ? void 0 : _props$sortProps8.column) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_TableStyles.StyledTableHeaderColumnSortDirection, {
                   children: ((_props$sortProps9 = props.sortProps) === null || _props$sortProps9 === void 0 ? void 0 : _props$sortProps9.direction) === 'asc' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.ArrowLineUp, {
-                    size: '24px'
+                    size: '20px'
                   }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.ArrowLineDown, {
-                    size: '24px'
+                    size: '20px'
                   })
                 })]
               })
@@ -203,8 +214,9 @@ var TableBody = function TableBody(props) {
                 style: {
                   maxWidth: column.width
                 },
-                title: column.shortenText && row[column.key],
+                title: column.shortenText ? "".concat(row[column.key], " \n ").concat(column.noteKey ? row[column.noteKey] : '') : '',
                 children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TableStyles.StyledTableCellContent, {
+                  withNote: Boolean(column.noteKey),
                   className: "".concat(column.shortenText ? "truncate-text" : '', " ").concat(column.justify || ''),
                   style: {
                     color: column.colorFn && column.colorFn(row, column.key)

package/dist/Table/TableBody.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TableBody.cjs","names":["TableBody","props","useDimensionsRef","updateOnResize","scrollContainerRef","dimensions","node","React","useState","scrollable","setScrollable","useEffect","clientWidth","scrollWidth","columns","rows","renderCellBody","column","row","type","tmp","variant","href","tabIndex","showLoadingIndicator","additionalProps","colorFn","color","key","e","preventDefault","stopPropagation","action","iconColor","shape","useTransparentBackground","icon","size","Size","Small","customContent","isSelected","multiSelect","selected","indexOf","keyExpr","layout","selectAllState","onSelectAllClick","map","defaultOnMouseDownHandler","sortable","sortByColumn","sortProps","direction","undefined","width","justify","name","currentPageRows","length","index","selectable","onRowClick","maxWidth","shortenText","noRowsLabel"],"sources":["../../src/Table/TableBody.tsx"],"sourcesContent":["import {TableColumn, TableProps} from './TableTypes';\nimport {Button} from '../Button';\nimport {Size} from '../types';\nimport * as React from 'react';\nimport {Checkbox} from '../InputFields';\nimport {ButtonProps} from '../Button/Button';\nimport IconButton, {IconButtonProps} from '../Button/Iconbutton';\nimport {HyperlinkProps} from '../HyperLink/HyperLink';\nimport {HyperLink} from '../HyperLink';\nimport {\n  StyledTableBody,\n  StyledTableBodyRow,\n  StyledTableCell,\n  StyledTableCellContent,\n  StyledTableCellIcon,\n  StyledTableCellText,\n  StyledTableHeaderColumn,\n  StyledTableHeaderColumnContent,\n  StyledTableHeaderColumns,\n  StyledTableNoRowsLabelRow,\n  StyledTable, StyledTableBodyWrapper, StyledTableHeaderRow, StyledTableHeaderColumnSortDirection,\n} from './TableStyles';\nimport {defaultOnMouseDownHandler} from '../common';\nimport {SystemIcons} from \"../icons\";\nimport {useDimensionsRef} from \"rooks\";\n\n\ninterface TableBodyProps extends TableProps {\n  currentPageRows: any[];\n  onRowClick?: (row: any) => void;\n  selected?: any | any[];\n  sortByColumn: (column: TableColumn) => void;\n  onSelectAllClick: () => void;\n  selectAllState: 'all' | 'some' | 'none';\n}\n\nconst TableBody: React.FC<TableBodyProps> = (props) => {\n\n  const [scrollContainerRef, dimensions, node] = useDimensionsRef({updateOnResize: true});\n  const [scrollable, setScrollable] = React.useState(false);\n\n  React.useEffect(() => {\n    const clientWidth = node?.clientWidth ?? 0;\n    const scrollWidth = node?.scrollWidth ?? 0;\n    setScrollable(scrollWidth > clientWidth);\n  }, [dimensions, node, props.columns, props.rows]);\n\n\n  const renderCellBody = (column: TableColumn, row: any) => {\n      switch (column.type) {\n        case 'link': {\n          const tmp = ({\n            variant: 'default',\n            href: '#',\n            tabIndex: props.showLoadingIndicator ? -1 : 0,\n            ...column.additionalProps\n          }) as HyperlinkProps;\n          return (\n            <HyperLink style={column.colorFn && {color: column.colorFn(row, column.key)}}\n                       {...tmp}\n                       onClick={(e) => {\n                         e.preventDefault();\n                         e.stopPropagation();\n                         column.action && column.action(row, e);\n                       }}>\n              {row[column.key]}\n            </HyperLink>\n          );\n        }\n        case 'icon': {\n          const tmp = ({\n            iconColor: column.colorFn && column.colorFn(row, column.key),\n            variant: 'secondary',\n            shape: 'circular',\n            tabIndex: props.showLoadingIndicator ? -1 : 0,\n            useTransparentBackground: true,\n            ...column.additionalProps\n          }) as IconButtonProps;\n          return <IconButton  {...tmp}\n                              action={(e) => {\n                                e?.stopPropagation();\n                                column.action && column.action(row, e);\n                              }}>\n            {column.icon}\n          </IconButton>\n        }\n        case 'button': {\n          const tmp = ({\n            variant: 'tertiary',\n            size: Size.Small,\n            tabIndex: props.showLoadingIndicator ? -1 : 0,\n            ...column.additionalProps\n          }) as ButtonProps;\n          return <Button style={column.colorFn && {color: column.colorFn(row, column.key)}}\n                         {...tmp}\n                         onClick={(e) => {\n                           e?.stopPropagation();\n                           column.action && column.action(row, e);\n                         }}>\n            {row[column.key]}\n          </Button>\n        }\n        case 'boolean':\n          return <Checkbox selected={!!row[column.key]} readOnly={true}/>;\n        case 'custom':\n          return column.customContent && column.customContent(row, column.key);\n        case 'number':\n        case 'text':\n        default:\n          return (\n            <>\n              {\n                column.icon &&\n                  <StyledTableCellIcon>{column.icon}</StyledTableCellIcon>\n              }\n              <StyledTableCellText>{row[column.key]}</StyledTableCellText>\n            </>\n          );\n      }\n    }\n\n  const isSelected = (row: any) => {\n    return (props.multiSelect && props.selected?.indexOf(props.keyExpr ? row[props.keyExpr] : row) > -1) ||\n      (!props.multiSelect && props.selected === (props.keyExpr ? row[props.keyExpr] : row));\n  }\n\n  return (\n      <StyledTableBodyWrapper ref={scrollContainerRef as any} className={scrollable ? 'scrollable' : ''}>\n          <StyledTable cellPadding=\"0\" cellSpacing=\"0\" data-testid=\"TestTable\" className={`table ${props.layout || ''}`}>\n          <StyledTableHeaderRow>\n            <StyledTableHeaderColumns data-testid=\"TestTableColumnHeaderRow\">\n            {\n              props.multiSelect &&\n                <StyledTableHeaderColumn>\n                    <StyledTableHeaderColumnContent>\n                        <Checkbox selected={props.selectAllState === 'all'}\n                                  disabled={props.showLoadingIndicator}\n                                  semiSelected={props.selectAllState === 'some'}\n                                  select={props.onSelectAllClick}/>\n                    </StyledTableHeaderColumnContent>\n                </StyledTableHeaderColumn>\n            }\n            {props.columns.map((column: TableColumn) => (\n              <StyledTableHeaderColumn key={column.key}\n                                       onMouseDown={defaultOnMouseDownHandler}\n                                       onClick={(e) => column.sortable && props.sortByColumn(column)}\n                                       onKeyPress={(e) => {\n                                         if (e.key === 'Enter' || e.key === ' ') {\n                                           column.sortable && props.sortByColumn(column)\n                                         }\n                                       }}\n                                       aria-pressed={column.key === props.sortProps?.column && !!props.sortProps?.direction ? true : undefined}\n                                       aria-sort={column.key === props.sortProps?.column && !!props.sortProps?.direction ? \n                                          (props.sortProps?.direction == 'asc' ? 'ascending' : 'descending' )  \n                                          : undefined}\n                                       style={{width: column.width}}\n                                       tabIndex={column.sortable && !props.showLoadingIndicator ? 0 : -1}\n                                       className={`${!!column.sortable ? 'sortable' : ''} ${column.key === props.sortProps?.column && !!props.sortProps?.direction ? 'sorted' : ''} ${column.justify || ''}`}>\n                <StyledTableHeaderColumnContent>\n                <span>\n                  {column.name}\n                </span>\n                  {\n                    column.key === props.sortProps?.column &&\n                    (\n                      <StyledTableHeaderColumnSortDirection>\n                        {\n                          props.sortProps?.direction === 'asc'\n                            ?  <SystemIcons.ArrowLineUp size={'24px'}/>\n                            : <SystemIcons.ArrowLineDown size={'24px'}/>\n                        }\n                      </StyledTableHeaderColumnSortDirection>\n                    )\n                  }\n                </StyledTableHeaderColumnContent>\n              </StyledTableHeaderColumn>\n            ))}\n          </StyledTableHeaderColumns>\n          </StyledTableHeaderRow>\n          <StyledTableBody>\n            {props.currentPageRows.length > 0 ? (\n              props.currentPageRows.map((row: any, index: number) => (\n                <StyledTableBodyRow key={`row_${index}`}\n                                    className={`${props.selectable ? 'selectable' : ''} ${isSelected(row) ? 'selected' : ''}`}\n                                    onClick={() => props.onRowClick && props.onRowClick(row)}\n                                    onMouseDown={defaultOnMouseDownHandler}\n                                    onKeyPress={(e) => {\n                                      if (e.key === 'Enter') {\n                                        props.onRowClick && props.onRowClick(row);\n                                      }\n                                    }}\n                                    tabIndex={props.selectable && !props.showLoadingIndicator ? 0 : undefined}\n                                    data-testid=\"TestTableDataRow\">\n                  {\n                    props.multiSelect &&\n                      <StyledTableCell>\n                          <StyledTableCellContent>\n                              <Checkbox selected={isSelected(row)}/>\n                          </StyledTableCellContent>\n                      </StyledTableCell>\n                  }\n                  {props.columns.map((column: TableColumn) => (\n                    <StyledTableCell key={`row_${index}_${column.key}`}\n                                     style={{maxWidth: column.width}}\n                                     title={column.shortenText && row[column.key]}>\n                      <StyledTableCellContent\n                        className={`${column.shortenText ? `truncate-text` : ''} ${column.justify || ''}`}\n                        style={{\n                          color: column.colorFn && column.colorFn(row, column.key),\n                        }}>\n                        {renderCellBody(column, row)}\n                      </StyledTableCellContent>\n                    </StyledTableCell>\n                  ))}\n                </StyledTableBodyRow>\n              ))\n            ) : (\n              <StyledTableNoRowsLabelRow data-testid=\"TestTableNoDataRow\">\n                <StyledTableCell colSpan={props.columns.length + (props.multiSelect ? 1 : 0)}>\n                  <StyledTableCellContent className={'center'}>\n                    {props.noRowsLabel ?? 'There are no rows to display'}\n                  </StyledTableCellContent>\n                </StyledTableCell>\n              </StyledTableNoRowsLabelRow>\n            )}\n\n          </StyledTableBody>\n        </StyledTable>\n      </StyledTableBodyWrapper>\n    );\n  }\n;\n\nexport default TableBody;\n"],"mappings":"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"}
+{"version":3,"file":"TableBody.cjs","names":["ColumnLabel","styled","span","TableBody","props","useDimensionsRef","updateOnResize","scrollContainerRef","dimensions","node","React","useState","scrollable","setScrollable","useEffect","clientWidth","scrollWidth","columns","rows","renderCellBody","column","row","type","tmp","variant","href","tabIndex","showLoadingIndicator","additionalProps","colorFn","color","key","e","preventDefault","stopPropagation","action","iconColor","shape","useTransparentBackground","icon","size","Size","Small","customContent","shortenText","Boolean","noteKey","isSelected","multiSelect","selected","indexOf","keyExpr","layout","selectAllState","onSelectAllClick","map","defaultOnMouseDownHandler","sortable","sortByColumn","sortProps","direction","undefined","width","justify","name","currentPageRows","length","index","selectable","onRowClick","maxWidth","noRowsLabel"],"sources":["../../src/Table/TableBody.tsx"],"sourcesContent":["import { TableColumn, TableProps } from './TableTypes';\nimport { Button } from '../Button';\nimport { Size } from '../types';\nimport * as React from 'react';\nimport { Checkbox } from '../InputFields';\nimport { ButtonProps } from '../Button/Button';\nimport IconButton, { IconButtonProps } from '../Button/Iconbutton';\nimport { HyperlinkProps } from '../HyperLink/HyperLink';\nimport { HyperLink } from '../HyperLink';\nimport {\n  StyledTableBody,\n  StyledTableBodyRow,\n  StyledTableCell,\n  StyledTableCellContent,\n  StyledTableCellIcon,\n  StyledTableCellText,\n  StyledTableHeaderColumn,\n  StyledTableHeaderColumnContent,\n  StyledTableHeaderColumns,\n  StyledTableNoRowsLabelRow,\n  StyledTable,\n  StyledTableBodyWrapper,\n  StyledTableHeaderRow,\n  StyledTableHeaderColumnSortDirection,\n  StyledTableCellNoteText,\n  StyledTableCellTextWrapper,\n} from './TableStyles';\nimport { defaultOnMouseDownHandler } from '../common';\nimport { SystemIcons } from '../icons';\nimport { useDimensionsRef } from 'rooks';\nimport styled from 'styled-components';\n\ninterface TableBodyProps extends TableProps {\n  currentPageRows: any[];\n  onRowClick?: (row: any) => void;\n  selected?: any | any[];\n  sortByColumn: (column: TableColumn) => void;\n  onSelectAllClick: () => void;\n  selectAllState: 'all' | 'some' | 'none';\n}\n\nconst ColumnLabel = styled.span`\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n`;\n\nconst TableBody: React.FC<TableBodyProps> = (props) => {\n  const [scrollContainerRef, dimensions, node] = useDimensionsRef({ updateOnResize: true });\n  const [scrollable, setScrollable] = React.useState(false);\n\n  React.useEffect(() => {\n    const clientWidth = node?.clientWidth ?? 0;\n    const scrollWidth = node?.scrollWidth ?? 0;\n    setScrollable(scrollWidth > clientWidth);\n  }, [dimensions, node, props.columns, props.rows]);\n\n  const renderCellBody = (column: TableColumn, row: any) => {\n    switch (column.type) {\n      case 'link': {\n        const tmp = {\n          variant: 'default',\n          href: '#',\n          tabIndex: props.showLoadingIndicator ? -1 : 0,\n          ...column.additionalProps,\n        } as HyperlinkProps;\n        return (\n          <HyperLink\n            style={column.colorFn && { color: column.colorFn(row, column.key) }}\n            {...tmp}\n            onClick={(e) => {\n              e.preventDefault();\n              e.stopPropagation();\n              column.action && column.action(row, e);\n            }}>\n            {row[column.key]}\n          </HyperLink>\n        );\n      }\n      case 'icon': {\n        const tmp = {\n          iconColor: column.colorFn && column.colorFn(row, column.key),\n          variant: 'secondary',\n          shape: 'circular',\n          tabIndex: props.showLoadingIndicator ? -1 : 0,\n          useTransparentBackground: true,\n          ...column.additionalProps,\n        } as IconButtonProps;\n        return (\n          <IconButton\n            {...tmp}\n            action={(e) => {\n              e?.stopPropagation();\n              column.action && column.action(row, e);\n            }}>\n            {column.icon}\n          </IconButton>\n        );\n      }\n      case 'button': {\n        const tmp = {\n          variant: 'tertiary',\n          size: Size.Small,\n          tabIndex: props.showLoadingIndicator ? -1 : 0,\n          ...column.additionalProps,\n        } as ButtonProps;\n        return (\n          <Button\n            style={column.colorFn && { color: column.colorFn(row, column.key) }}\n            {...tmp}\n            onClick={(e) => {\n              e?.stopPropagation();\n              column.action && column.action(row, e);\n            }}>\n            {row[column.key]}\n          </Button>\n        );\n      }\n      case 'boolean':\n        return <Checkbox selected={!!row[column.key]} readOnly={true} />;\n      case 'custom':\n        return column.customContent && column.customContent(row, column.key);\n      case 'number':\n      case 'text':\n      default:\n        return (\n          <>\n            {column.icon && <StyledTableCellIcon>{column.icon}</StyledTableCellIcon>}\n            <StyledTableCellTextWrapper textWrap={!column.shortenText}>\n              <StyledTableCellText>{row[column.key]}</StyledTableCellText>\n              {Boolean(column.noteKey) && Boolean(row[column.noteKey!]) && (\n                <>\n                  <StyledTableCellNoteText>{row[column.noteKey!]}</StyledTableCellNoteText>\n                </>\n              )}\n            </StyledTableCellTextWrapper>\n          </>\n        );\n    }\n  };\n\n  const isSelected = (row: any) => {\n    return (\n      (props.multiSelect && props.selected?.indexOf(props.keyExpr ? row[props.keyExpr] : row) > -1) ||\n      (!props.multiSelect && props.selected === (props.keyExpr ? row[props.keyExpr] : row))\n    );\n  };\n\n  return (\n    <StyledTableBodyWrapper ref={scrollContainerRef as any} className={scrollable ? 'scrollable' : ''}>\n      <StyledTable cellPadding=\"0\" cellSpacing=\"0\" data-testid=\"TestTable\" className={`table ${props.layout || ''}`}>\n        <StyledTableHeaderRow>\n          <StyledTableHeaderColumns data-testid=\"TestTableColumnHeaderRow\">\n            {props.multiSelect && (\n              <StyledTableHeaderColumn>\n                <StyledTableHeaderColumnContent>\n                  <Checkbox\n                    selected={props.selectAllState === 'all'}\n                    disabled={props.showLoadingIndicator}\n                    semiSelected={props.selectAllState === 'some'}\n                    select={props.onSelectAllClick}\n                  />\n                </StyledTableHeaderColumnContent>\n              </StyledTableHeaderColumn>\n            )}\n            {props.columns.map((column: TableColumn) => (\n              <StyledTableHeaderColumn\n                key={column.key}\n                onMouseDown={defaultOnMouseDownHandler}\n                onClick={(e) => column.sortable && props.sortByColumn(column)}\n                onKeyPress={(e) => {\n                  if (e.key === 'Enter' || e.key === ' ') {\n                    column.sortable && props.sortByColumn(column);\n                  }\n                }}\n                aria-pressed={column.key === props.sortProps?.column && !!props.sortProps?.direction ? true : undefined}\n                aria-sort={column.key === props.sortProps?.column && !!props.sortProps?.direction ? (props.sortProps?.direction == 'asc' ? 'ascending' : 'descending') : undefined}\n                style={{ width: column.width }}\n                tabIndex={column.sortable && !props.showLoadingIndicator ? 0 : -1}\n                className={`${!!column.sortable ? 'sortable' : ''} ${column.key === props.sortProps?.column && !!props.sortProps?.direction ? 'sorted' : ''} ${\n                  column.justify || ''\n                }`}>\n                <StyledTableHeaderColumnContent>\n                  <ColumnLabel>{column.name}</ColumnLabel>\n                  {column.key === props.sortProps?.column && (\n                    <StyledTableHeaderColumnSortDirection>\n                      {props.sortProps?.direction === 'asc' ? <SystemIcons.ArrowLineUp size={'20px'} /> : <SystemIcons.ArrowLineDown size={'20px'} />}\n                    </StyledTableHeaderColumnSortDirection>\n                  )}\n                </StyledTableHeaderColumnContent>\n              </StyledTableHeaderColumn>\n            ))}\n          </StyledTableHeaderColumns>\n        </StyledTableHeaderRow>\n        <StyledTableBody>\n          {props.currentPageRows.length > 0 ? (\n            props.currentPageRows.map((row: any, index: number) => (\n              <StyledTableBodyRow\n                key={`row_${index}`}\n                className={`${props.selectable ? 'selectable' : ''} ${isSelected(row) ? 'selected' : ''}`}\n                onClick={() => props.onRowClick && props.onRowClick(row)}\n                onMouseDown={defaultOnMouseDownHandler}\n                onKeyPress={(e) => {\n                  if (e.key === 'Enter') {\n                    props.onRowClick && props.onRowClick(row);\n                  }\n                }}\n                tabIndex={props.selectable && !props.showLoadingIndicator ? 0 : undefined}\n                data-testid=\"TestTableDataRow\">\n                {props.multiSelect && (\n                  <StyledTableCell>\n                    <StyledTableCellContent>\n                      <Checkbox selected={isSelected(row)} />\n                    </StyledTableCellContent>\n                  </StyledTableCell>\n                )}\n                {props.columns.map((column: TableColumn) => (\n                  <StyledTableCell key={`row_${index}_${column.key}`} style={{ maxWidth: column.width }} title={column.shortenText ? `${row[column.key]} \\n ${column.noteKey ? row[column.noteKey!] : ''}` : ''}>\n                    <StyledTableCellContent\n                      withNote={Boolean(column.noteKey)}\n                      className={`${column.shortenText ? `truncate-text` : ''} ${column.justify || ''}`}\n                      style={{\n                        color: column.colorFn && column.colorFn(row, column.key),\n                      }}>\n                      {renderCellBody(column, row)}\n                    </StyledTableCellContent>\n                  </StyledTableCell>\n                ))}\n              </StyledTableBodyRow>\n            ))\n          ) : (\n            <StyledTableNoRowsLabelRow data-testid=\"TestTableNoDataRow\">\n              <StyledTableCell colSpan={props.columns.length + (props.multiSelect ? 1 : 0)}>\n                <StyledTableCellContent className={'center'}>{props.noRowsLabel ?? 'There are no rows to display'}</StyledTableCellContent>\n              </StyledTableCell>\n            </StyledTableNoRowsLabelRow>\n          )}\n        </StyledTableBody>\n      </StyledTable>\n    </StyledTableBodyWrapper>\n  );\n};\nexport default TableBody;\n"],"mappings":"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"}

package/dist/Table/TableBody.js

@@ -1,6 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 import _pt from "prop-types";
+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; }
 import { Button } from '../Button';
@@ -9,13 +11,15 @@ import * as React from 'react';
 import { Checkbox } from '../InputFields';
 import IconButton from '../Button/Iconbutton';
 import { HyperLink } from '../HyperLink';
-import { StyledTableBody, StyledTableBodyRow, StyledTableCell, StyledTableCellContent, StyledTableCellIcon, StyledTableCellText, StyledTableHeaderColumn, StyledTableHeaderColumnContent, StyledTableHeaderColumns, StyledTableNoRowsLabelRow, StyledTable, StyledTableBodyWrapper, StyledTableHeaderRow, StyledTableHeaderColumnSortDirection } from './TableStyles';
+import { StyledTableBody, StyledTableBodyRow, StyledTableCell, StyledTableCellContent, StyledTableCellIcon, StyledTableCellText, StyledTableHeaderColumn, StyledTableHeaderColumnContent, StyledTableHeaderColumns, StyledTableNoRowsLabelRow, StyledTable, StyledTableBodyWrapper, StyledTableHeaderRow, StyledTableHeaderColumnSortDirection, StyledTableCellNoteText, StyledTableCellTextWrapper } from './TableStyles';
 import { defaultOnMouseDownHandler } from '../common';
-import { SystemIcons } from "../icons";
-import { useDimensionsRef } from "rooks";
+import { SystemIcons } from '../icons';
+import { useDimensionsRef } from 'rooks';
+import styled from 'styled-components';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+var ColumnLabel = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n"])));
 var TableBody = function TableBody(props) {
   var _props$noRowsLabel;
   var _useDimensionsRef = useDimensionsRef({
@@ -106,8 +110,15 @@ var TableBody = function TableBody(props) {
         return /*#__PURE__*/_jsxs(_Fragment, {
           children: [column.icon && /*#__PURE__*/_jsx(StyledTableCellIcon, {
             children: column.icon
-          }), /*#__PURE__*/_jsx(StyledTableCellText, {
-            children: row[column.key]
+          }), /*#__PURE__*/_jsxs(StyledTableCellTextWrapper, {
+            textWrap: !column.shortenText,
+            children: [/*#__PURE__*/_jsx(StyledTableCellText, {
+              children: row[column.key]
+            }), Boolean(column.noteKey) && Boolean(row[column.noteKey]) && /*#__PURE__*/_jsx(_Fragment, {
+              children: /*#__PURE__*/_jsx(StyledTableCellNoteText, {
+                children: row[column.noteKey]
+              })
+            })]
           })]
         });
     }
@@ -156,13 +167,13 @@ var TableBody = function TableBody(props) {
               tabIndex: column.sortable && !props.showLoadingIndicator ? 0 : -1,
               className: "".concat(!!column.sortable ? 'sortable' : '', " ").concat(column.key === ((_props$sortProps6 = props.sortProps) === null || _props$sortProps6 === void 0 ? void 0 : _props$sortProps6.column) && !!((_props$sortProps7 = props.sortProps) !== null && _props$sortProps7 !== void 0 && _props$sortProps7.direction) ? 'sorted' : '', " ").concat(column.justify || ''),
               children: /*#__PURE__*/_jsxs(StyledTableHeaderColumnContent, {
-                children: [/*#__PURE__*/_jsx("span", {
+                children: [/*#__PURE__*/_jsx(ColumnLabel, {
                   children: column.name
                 }), column.key === ((_props$sortProps8 = props.sortProps) === null || _props$sortProps8 === void 0 ? void 0 : _props$sortProps8.column) && /*#__PURE__*/_jsx(StyledTableHeaderColumnSortDirection, {
                   children: ((_props$sortProps9 = props.sortProps) === null || _props$sortProps9 === void 0 ? void 0 : _props$sortProps9.direction) === 'asc' ? /*#__PURE__*/_jsx(SystemIcons.ArrowLineUp, {
-                    size: '24px'
+                    size: '20px'
                   }) : /*#__PURE__*/_jsx(SystemIcons.ArrowLineDown, {
-                    size: '24px'
+                    size: '20px'
                   })
                 })]
               })
@@ -195,8 +206,9 @@ var TableBody = function TableBody(props) {
                 style: {
                   maxWidth: column.width
                 },
-                title: column.shortenText && row[column.key],
+                title: column.shortenText ? "".concat(row[column.key], " \n ").concat(column.noteKey ? row[column.noteKey] : '') : '',
                 children: /*#__PURE__*/_jsx(StyledTableCellContent, {
+                  withNote: Boolean(column.noteKey),
                   className: "".concat(column.shortenText ? "truncate-text" : '', " ").concat(column.justify || ''),
                   style: {
                     color: column.colorFn && column.colorFn(row, column.key)