@laerdal/life-react-components 3.0.1-dev.20.full → 3.0.1-dev.21.full

package/dist/InputFields/Textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.js","names":["React","COLORS","ComponentSStyling","focusStyles","NoteMessage","readOnlyState","ValidationMessage","States","SystemIcons","styled","ComponentMStyling","ComponentTextStyle","useFocusVisibleRef","TextareaWrapper","div","props","margin","TextArea","textarea","white","neutral_400","autoHeight","Italic","black","neutral_500","primary_800","critical_500","correct_500","primary_700","neutral_100","neutral_300","Textarea","forwardRef","ref","id","placeholder","state","value","size","disabled","validationMessage","onChange","note","required","className","dataTestId","rest","elementRef","useImperativeHandle","current","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, focusStyles} from '../styles';\nimport {NoteMessage, readOnlyState, ValidationMessage} from './styling';\nimport { States } from '../types';\n\n/**\n * Import custom components.\n */\nimport { SystemIcons } from '../icons';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\nimport { ComponentMStyling, ComponentTextStyle } from '../styles';\nimport { TextareaProps, TextFieldNote } from './types';\nimport {useFocusVisibleRef} from \"../common\";\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  display: block;\n  background: ${COLORS.white};\n  border-radius: 4px;\n  outline: none;\n  margin-bottom: 4px;\n  padding: 16px;\n  border: none;\n  box-shadow: inset 0 0 0 1px ${COLORS.neutral_400};\n\n  resize: ${(props) => (props.autoHeight ? 'none' : '')};\n\n  ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.black)}\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.black)}\n    width: 304px;\n\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  &:focus:not(.focus-visible) {\n    box-shadow: inset 0 0 0 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_500};\n  }\n\n  &.valid {\n    box-shadow: inset 0 0 0 2px ${COLORS.correct_500};\n  }\n\n  &:hover {\n    box-shadow: inset 0 0 0 2px ${COLORS.primary_700};\n  }\n\n  &.active {\n    box-shadow: inset 0 0 0 2px ${COLORS.primary_800};\n  }\n\n  &:read-only:not(:disabled) {\n    ${readOnlyState}\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n    border: 1px solid ${COLORS.neutral_100};\n    box-shadow: none !important;\n    color: ${COLORS.neutral_300} !important;\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 elementRef = useFocusVisibleRef();\n\n  React.useImperativeHandle(ref, () => elementRef.current, [elementRef]);\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={elementRef}\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 ? <SystemIcons.CheckMark color={COLORS.correct_400} /> : <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    </TextareaWrapper>\n  );\n});\n\nexport default Textarea;\n"],"mappings":"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"}
+{"version":3,"file":"Textarea.js","names":["React","COLORS","ComponentSStyling","focusStyles","NoteMessage","readOnlyState","ValidationMessage","States","SystemIcons","styled","ComponentMStyling","ComponentTextStyle","useFocusVisibleRef","TextareaWrapper","div","props","margin","TextArea","textarea","white","neutral_400","autoHeight","Italic","black","neutral_500","primary_800","critical_500","correct_500","primary_700","neutral_100","neutral_300","Textarea","forwardRef","ref","id","placeholder","state","value","size","disabled","validationMessage","onChange","note","required","className","dataTestId","rest","elementRef","useImperativeHandle","current","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, focusStyles} from '../styles';\nimport {NoteMessage, readOnlyState, ValidationMessage} from './styling';\nimport { States } from '../types';\n\n/**\n * Import custom components.\n */\nimport { SystemIcons } from '../icons';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\nimport { ComponentMStyling, ComponentTextStyle } from '../styles';\nimport { TextareaProps, TextFieldNote } from './types';\nimport {useFocusVisibleRef} from \"../common\";\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  display: block;\n  background: ${COLORS.white};\n  border-radius: 4px;\n  outline: none;\n  margin-bottom: 4px;\n  padding: 16px;\n  border: none;\n  box-shadow: inset 0 0 0 1px ${COLORS.neutral_400};\n\n  resize: ${(props) => (props.autoHeight ? 'none' : '')};\n\n  ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.black)}\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.black)}\n    width: 304px;\n\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  &:focus:not(.focus-visible) {\n    box-shadow: inset 0 0 0 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_500};\n  }\n\n  &.valid {\n    box-shadow: inset 0 0 0 2px ${COLORS.correct_500};\n  }\n\n  &:hover {\n    box-shadow: inset 0 0 0 2px ${COLORS.primary_700};\n  }\n\n  &.active {\n    box-shadow: inset 0 0 0 2px ${COLORS.primary_800};\n  }\n\n  &:read-only:not(:disabled) {\n    ${readOnlyState}\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n    border: 1px solid ${COLORS.neutral_100};\n    box-shadow: none !important;\n    color: ${COLORS.neutral_300} !important;\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 elementRef = useFocusVisibleRef();\n\n  React.useImperativeHandle(ref, () => elementRef.current, [elementRef]);\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={elementRef}\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 ? <SystemIcons.CheckMark color={COLORS.correct_400} /> : <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    </TextareaWrapper>\n  );\n});\n\nexport default Textarea;\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@laerdal/life-react-components",
-  "version": "3.0.1-dev.20.full",
+  "version": "3.0.1-dev.21.full",
   "private": false,
   "author": "Erik Martirosyan <erik.martirosyan@laerdal.com>",
   "contributors": [],