@laerdal/life-react-components 6.0.0-dev.27.full → 6.0.0-dev.30
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +42 -0
- package/dist/Button/Button.cjs +469 -0
- package/dist/Button/Button.cjs.map +1 -0
- package/dist/Button/Button.d.ts +70 -0
- package/dist/Button/Button.js +461 -0
- package/dist/Button/Button.js.map +1 -0
- package/dist/Card/HorizontalCard/__tests__/VerticalCard.test.tsx +124 -0
- package/dist/Card/VerticalCard/Card.cjs +187 -0
- package/dist/Card/VerticalCard/Card.cjs.map +1 -0
- package/dist/Card/VerticalCard/Card.d.ts +25 -0
- package/dist/Card/VerticalCard/Card.js +178 -0
- package/dist/Card/VerticalCard/Card.js.map +1 -0
- package/dist/Card/VerticalCard/CardBottomSection.cjs +261 -0
- package/dist/Card/VerticalCard/CardBottomSection.cjs.map +1 -0
- package/dist/Card/VerticalCard/CardBottomSection.d.ts +53 -0
- package/dist/Card/VerticalCard/CardBottomSection.js +252 -0
- package/dist/Card/VerticalCard/CardBottomSection.js.map +1 -0
- package/dist/Card/VerticalCard/CardMiddleSection.cjs +145 -0
- package/dist/Card/VerticalCard/CardMiddleSection.cjs.map +1 -0
- package/dist/Card/VerticalCard/CardMiddleSection.d.ts +42 -0
- package/dist/Card/VerticalCard/CardMiddleSection.js +136 -0
- package/dist/Card/VerticalCard/CardMiddleSection.js.map +1 -0
- package/dist/Card/VerticalCard/CardTopSection.cjs +165 -0
- package/dist/Card/VerticalCard/CardTopSection.cjs.map +1 -0
- package/dist/Card/VerticalCard/CardTopSection.d.ts +45 -0
- package/dist/Card/VerticalCard/CardTopSection.js +156 -0
- package/dist/Card/VerticalCard/CardTopSection.js.map +1 -0
- package/dist/Card/__tests__/Card.test.tsx +146 -0
- package/dist/Footer/Components/FooterNewsletterAndSocialSection.cjs +0 -1
- package/dist/Footer/Components/FooterNewsletterAndSocialSection.cjs.map +1 -1
- package/dist/Footer/Components/FooterNewsletterAndSocialSection.js +0 -1
- package/dist/Footer/Components/FooterNewsletterAndSocialSection.js.map +1 -1
- package/dist/Footer/Components/FooterTop.cjs.map +1 -1
- package/dist/Footer/Components/FooterTop.js.map +1 -1
- package/dist/InputFields/RichTextField.cjs +3 -2
- package/dist/InputFields/RichTextField.cjs.map +1 -1
- package/dist/InputFields/RichTextField.d.ts +4 -5
- package/dist/InputFields/RichTextField.js +2 -1
- package/dist/InputFields/RichTextField.js.map +1 -1
- package/dist/InputFields/TextField.cjs +2 -5
- package/dist/InputFields/TextField.cjs.map +1 -1
- package/dist/InputFields/TextField.d.ts +0 -8
- package/dist/InputFields/TextField.js +2 -5
- package/dist/InputFields/TextField.js.map +1 -1
- package/dist/InputFields/styling.cjs +1 -4
- package/dist/InputFields/styling.cjs.map +1 -1
- package/dist/InputFields/styling.d.ts +0 -1
- package/dist/InputFields/styling.js +1 -4
- package/dist/InputFields/styling.js.map +1 -1
- package/package.json +148 -152
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RichTextField.cjs","names":["_react","_interopRequireDefault","require","_reactQuill","_styledComponents","_interopRequireWildcard","_styling","_types","_styles","_systemicons","_jsxRuntime","_excluded","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ownKeys","keys","getOwnPropertySymbols","o","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","RichTextFieldContainer","exports","styled","div","props","COLORS","generateToken","componentType","defaultVariant","theme","state","ComponentSStyling","ComponentTextStyle","Regular","Italic","ComponentMStyling","scrollBarStyling","Size","Small","readOnlyState","RichTextFieldFormats","defaultToolBarOptions","header","RichTextField","React","forwardRef","_ref","ref","readOnly","disabled","validationMessage","note","size","Medium","resizable","modules","formats","rest","_objectWithoutProperties2","useTheme","m","toolbar","f","values","Image","Video","Formula","jsxs","className","children","jsx","ValidationMessage","type","States","Invalid","Valid","CheckMark","color","TechnicalWarning","NoteMessage","icon","message","propTypes","id","_propTypes","string","placeholder","bool","arrayOf","oneOf","onKeyDown","func","onKeyPress","onKeyUp","value","any","isRequired","onChange"],"sources":["../../src/InputFields/RichTextField.tsx"],"sourcesContent":["import React from 'react';\r\nimport ReactQuill, {Range, UnprivilegedEditor} from \"react-quill\";\r\nimport {TextFieldNote} from \"./types\";\r\nimport styled, { useTheme } from \"styled-components\";\r\nimport {NoteMessage, readOnlyState, ValidationMessage} from \"./styling\";\r\nimport {Size, States} from \"../types\";\r\nimport {COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, scrollBarStyling} from \"../styles\";\r\nimport {CheckMark, TechnicalWarning} from \"../icons/systemicons\";\r\nimport {Sources, StringMap} from \"quill\";\r\nimport 'react-quill/dist/quill.snow.css';\r\n\r\nexport const RichTextFieldContainer = styled.div`\r\n .quill {\r\n width: 100%;\r\n margin-bottom: 4px;\r\n overflow: hidden;\r\n\r\n box-shadow: inset 0 0 0 1px ${props => COLORS.generateToken({componentType:'border', defaultVariant:'default'}, props.theme)};\r\n border-radius: 4px;\r\n }\r\n\r\n .quill.valid {\r\n box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({componentType:'border', defaultVariant:'positive'}, props.theme)};\r\n }\r\n\r\n .quill.invalid {\r\n box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({componentType:'border', defaultVariant:'critical'}, props.theme)};\r\n }\r\n\r\n .quill:hover {\r\n box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({componentType:'border', state:'hover'}, props.theme)};\r\n }\r\n\r\n .quill:focus-within {\r\n box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({componentType:'border', state:'hover'}, props.theme)};\r\n }\r\n\r\n .ql-editor,\r\n .ql-editor p{\r\n ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.generateToken({componentType:'text', defaultVariant:'default'}, props.theme))}\r\n }\r\n\r\n .ql-editor.ql-blank::before {\r\n ${props => ComponentSStyling(ComponentTextStyle.Italic, COLORS.generateToken({componentType:'text', defaultVariant:'subtle'}, props.theme))}\r\n }\r\n\r\n &.medium {\r\n .ql-editor,\r\n .ql-editor p{\r\n ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.generateToken({componentType:'text', defaultVariant:'default'}, props.theme))}\r\n }\r\n\r\n .ql-editor.ql-blank::before {\r\n ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.generateToken({componentType:'text', defaultVariant:'subtle'}, props.theme))}\r\n }\r\n }\r\n\r\n .ql-toolbar.ql-snow {\r\n border: none;\r\n padding: 8px 7px;\r\n margin: 0 1px;\r\n border-bottom: 1px solid ${props => COLORS.generateToken({componentType:'border', defaultVariant:'subtle'}, props.theme)};\r\n }\r\n\r\n .quill.valid .ql-toolbar,\r\n .quill.invalid .ql-toolbar,\r\n .quill:hover .ql-toolbar,\r\n .quill:focus-within .ql-toolbar {\r\n padding: 8px 6px;\r\n margin: 0 2px;\r\n }\r\n\r\n .ql-container {\r\n font-family: unset !important;\r\n }\r\n\r\n .ql-container.ql-snow {\r\n border: none;\r\n overflow-y: hidden;\r\n padding: 8px;\r\n }\r\n\r\n .ql-editor {\r\n padding: 8px;\r\n overflow-y: auto;\r\n\r\n ${scrollBarStyling(Size.Small)}\r\n }\r\n\r\n &.resizable {\r\n height: initial;\r\n\r\n .quill {\r\n flex: none;\r\n overflow: initial;\r\n }\r\n\r\n .ql-container {\r\n flex: none;\r\n resize: vertical;\r\n }\r\n\r\n .ql-editor {\r\n height: 100%;\r\n }\r\n }\r\n\r\n &.readonly {\r\n .quill {\r\n ${readOnlyState}\r\n }\r\n }\r\n\r\n &.disabled {\r\n cursor: not-allowed;\r\n\r\n .quill {\r\n pointer-events: none;\r\n box-shadow: inset 0 0 0 1px ${props => COLORS.generateToken({componentType:'border', state:'disabled'}, props.theme)};\r\n color: ${props => COLORS.generateToken({componentType:'text', state:'disabled'}, props.theme)};\r\n\r\n .ql-editor.ql-blank::before {\r\n color: ${props => COLORS.generateToken({componentType:'text', state:'disabled'}, props.theme)};\r\n }\r\n }\r\n }\r\n`;\r\n\r\nexport enum RichTextFieldFormats {\r\n Background = 'background',\r\n Bold = 'bold',\r\n Color = 'color',\r\n Font = 'font',\r\n Code = 'code',\r\n Italic = 'italic',\r\n Link = 'link',\r\n Size = 'size',\r\n Strike = 'strike',\r\n Script = 'script',\r\n Underline = 'underline',\r\n Blockquote = 'blockquote',\r\n Header = 'header',\r\n Indent = 'indent',\r\n List = 'list',\r\n Align = 'align',\r\n Direction = 'direction',\r\n CodeBlock = 'code-block',\r\n Formula = 'formula',\r\n Image = 'image',\r\n Video = 'video'\r\n}\r\n\r\nconst defaultToolBarOptions = [\r\n [{header: [1, 2, 3, false]}],\r\n ['bold', 'italic', 'underline', 'strike'],\r\n [{'list': 'ordered'}, {'list': 'bullet'}],\r\n ['link'],\r\n ['clean']\r\n];\r\n\r\nexport interface RichTextFieldProps {\r\n /**\r\n * Optional. The ID of the rich text field.\r\n */\r\n id?: string;\r\n\r\n /**\r\n * Optional. The CSS class name of the rich text field.\r\n */\r\n className?: string;\r\n\r\n /**\r\n * Optional. The placeholder text to be displayed in the rich text field when it is empty.\r\n */\r\n placeholder?: string;\r\n\r\n /**\r\n * Optional. A boolean indicating whether the rich text field is read-only.\r\n */\r\n readOnly?: boolean;\r\n\r\n /**\r\n * Optional. A boolean indicating whether the rich text field is disabled.\r\n */\r\n disabled?: boolean;\r\n\r\n /**\r\n * Optional. A boolean indicating whether the rich text field is resizable.\r\n */\r\n resizable?: boolean;\r\n\r\n /**\r\n * Optional. An object containing the modules to be used by the rich text field.\r\n */\r\n modules?: StringMap;\r\n\r\n /**\r\n * Optional. An array of formats to be used by the rich text field.\r\n */\r\n formats?: RichTextFieldFormats[];\r\n\r\n /**\r\n * Optional. A function to be called when the rich text field gains focus.\r\n */\r\n onFocus?(selection: Range, source: Sources, editor: UnprivilegedEditor): void;\r\n\r\n /**\r\n * Optional. A function to be called when the rich text field loses focus.\r\n */\r\n onBlur?(previousSelection: Range, source: Sources, editor: UnprivilegedEditor): void;\r\n\r\n /**\r\n * Optional. A function to be called when a keydown event occurs in the rich text field.\r\n */\r\n onKeyDown?: React.EventHandler<any>;\r\n\r\n /**\r\n * Optional. A function to be called when a keypress event occurs in the rich text field.\r\n */\r\n onKeyPress?: React.EventHandler<any>;\r\n\r\n /**\r\n * Optional. A function to be called when a keyup event occurs in the rich text field.\r\n */\r\n onKeyUp?: React.EventHandler<any>;\r\n\r\n /**\r\n * Required. The current value of the rich text field.\r\n */\r\n value: any;\r\n\r\n /**\r\n * Required. A function to be called when the value of the rich text field changes.\r\n */\r\n onChange: (value: any) => void;\r\n\r\n /**\r\n * Optional. The validation message to be displayed when the rich text field is in an error state.\r\n */\r\n validationMessage?: string;\r\n\r\n /**\r\n * Optional. A note to be displayed below the rich text field.\r\n */\r\n note?: TextFieldNote;\r\n\r\n /**\r\n * Optional. The size of the rich text field. Can be 'Small' or 'Medium'.\r\n */\r\n size?: Size.Small | Size.Medium;\r\n\r\n /**\r\n * Optional. The state of the rich text field. Can be 'Invalid' or 'Valid'.\r\n */\r\n state?: States.Invalid | States.Valid;\r\n}\r\n\r\nexport const RichTextField = React.forwardRef<any, RichTextFieldProps>(({\r\n readOnly,\r\n disabled,\r\n validationMessage,\r\n note,\r\n size = Size.Medium,\r\n state,\r\n resizable,\r\n modules,\r\n formats,\r\n ...rest\r\n }: RichTextFieldProps, ref) => {\r\n\r\n const theme = useTheme();\r\n let m = {...(modules ?? {}), toolbar: modules?.toolbar ?? defaultToolBarOptions};\r\n let f = formats ?? Object.values(RichTextFieldFormats).filter(a => a !== RichTextFieldFormats.Image && a !== RichTextFieldFormats.Video && a !== RichTextFieldFormats.Formula);\r\n\r\n return (\r\n <RichTextFieldContainer\r\n className={`${resizable ? 'resizable' : ''} ${size} ${state || ''} ${readOnly ? 'readonly' : ''} ${disabled ? 'disabled' : ''}`}>\r\n <ReactQuill ref={ref}\r\n readOnly={readOnly || disabled}\r\n modules={m}\r\n theme={'snow'}\r\n formats={f}\r\n {...rest}\r\n />\r\n {validationMessage && (\r\n <ValidationMessage className={size || ''} type={state ?? States.Invalid}>\r\n {\r\n state === States.Valid\r\n ? <CheckMark color={COLORS.generateToken({componentType:'text', defaultVariant:'positive'}, theme)}/>\r\n : <TechnicalWarning color={COLORS.generateToken({componentType:'text', defaultVariant:'critical'}, theme)}/>\r\n }\r\n <span>{validationMessage}</span>\r\n </ValidationMessage>\r\n )}\r\n {note && !disabled && (\r\n <NoteMessage className={size}>\r\n {note.icon}\r\n <span>{note.message}</span>\r\n </NoteMessage>\r\n )}\r\n </RichTextFieldContainer>\r\n )\r\n});"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"RichTextField.cjs","names":["_react","_interopRequireDefault","require","_reactQuillNew","_styledComponents","_interopRequireWildcard","_styling","_types","_styles","_systemicons","_jsxRuntime","_excluded","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ownKeys","keys","getOwnPropertySymbols","o","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","RichTextFieldContainer","exports","styled","div","props","COLORS","generateToken","componentType","defaultVariant","theme","state","ComponentSStyling","ComponentTextStyle","Regular","Italic","ComponentMStyling","scrollBarStyling","Size","Small","readOnlyState","RichTextFieldFormats","defaultToolBarOptions","header","RichTextField","React","forwardRef","_ref","ref","readOnly","disabled","validationMessage","note","size","Medium","resizable","modules","formats","rest","_objectWithoutProperties2","useTheme","m","toolbar","f","values","Image","Video","Formula","jsxs","className","children","jsx","ValidationMessage","type","States","Invalid","Valid","CheckMark","color","TechnicalWarning","NoteMessage","icon","message","propTypes","id","_propTypes","string","placeholder","bool","objectOf","any","arrayOf","oneOf","onKeyDown","func","onKeyPress","onKeyUp","value","isRequired","onChange"],"sources":["../../src/InputFields/RichTextField.tsx"],"sourcesContent":["import React from 'react';\r\nimport ReactQuill, { EmitterSource } from \"react-quill-new\";\r\nimport {TextFieldNote} from \"./types\";\r\nimport styled, { useTheme } from \"styled-components\";\r\nimport {NoteMessage, readOnlyState, ValidationMessage} from \"./styling\";\r\nimport {Size, States} from \"../types\";\r\nimport {COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, scrollBarStyling} from \"../styles\";\r\nimport {CheckMark, TechnicalWarning} from \"../icons/systemicons\";\r\nimport 'react-quill/dist/quill.snow.css';\r\n\r\nexport const RichTextFieldContainer = styled.div`\r\n .quill {\r\n width: 100%;\r\n margin-bottom: 4px;\r\n overflow: hidden;\r\n\r\n box-shadow: inset 0 0 0 1px ${props => COLORS.generateToken({componentType:'border', defaultVariant:'default'}, props.theme)};\r\n border-radius: 4px;\r\n }\r\n\r\n .quill.valid {\r\n box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({componentType:'border', defaultVariant:'positive'}, props.theme)};\r\n }\r\n\r\n .quill.invalid {\r\n box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({componentType:'border', defaultVariant:'critical'}, props.theme)};\r\n }\r\n\r\n .quill:hover {\r\n box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({componentType:'border', state:'hover'}, props.theme)};\r\n }\r\n\r\n .quill:focus-within {\r\n box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({componentType:'border', state:'hover'}, props.theme)};\r\n }\r\n\r\n .ql-editor,\r\n .ql-editor p{\r\n ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.generateToken({componentType:'text', defaultVariant:'default'}, props.theme))}\r\n }\r\n\r\n .ql-editor.ql-blank::before {\r\n ${props => ComponentSStyling(ComponentTextStyle.Italic, COLORS.generateToken({componentType:'text', defaultVariant:'subtle'}, props.theme))}\r\n }\r\n\r\n &.medium {\r\n .ql-editor,\r\n .ql-editor p{\r\n ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.generateToken({componentType:'text', defaultVariant:'default'}, props.theme))}\r\n }\r\n\r\n .ql-editor.ql-blank::before {\r\n ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.generateToken({componentType:'text', defaultVariant:'subtle'}, props.theme))}\r\n }\r\n }\r\n\r\n .ql-toolbar.ql-snow {\r\n border: none;\r\n padding: 8px 7px;\r\n margin: 0 1px;\r\n border-bottom: 1px solid ${props => COLORS.generateToken({componentType:'border', defaultVariant:'subtle'}, props.theme)};\r\n }\r\n\r\n .quill.valid .ql-toolbar,\r\n .quill.invalid .ql-toolbar,\r\n .quill:hover .ql-toolbar,\r\n .quill:focus-within .ql-toolbar {\r\n padding: 8px 6px;\r\n margin: 0 2px;\r\n }\r\n\r\n .ql-container {\r\n font-family: unset !important;\r\n }\r\n\r\n .ql-container.ql-snow {\r\n border: none;\r\n overflow-y: hidden;\r\n padding: 8px;\r\n }\r\n\r\n .ql-editor {\r\n padding: 8px;\r\n overflow-y: auto;\r\n\r\n ${scrollBarStyling(Size.Small)}\r\n }\r\n\r\n &.resizable {\r\n height: initial;\r\n\r\n .quill {\r\n flex: none;\r\n overflow: initial;\r\n }\r\n\r\n .ql-container {\r\n flex: none;\r\n resize: vertical;\r\n }\r\n\r\n .ql-editor {\r\n height: 100%;\r\n }\r\n }\r\n\r\n &.readonly {\r\n .quill {\r\n ${readOnlyState}\r\n }\r\n }\r\n\r\n &.disabled {\r\n cursor: not-allowed;\r\n\r\n .quill {\r\n pointer-events: none;\r\n box-shadow: inset 0 0 0 1px ${props => COLORS.generateToken({componentType:'border', state:'disabled'}, props.theme)};\r\n color: ${props => COLORS.generateToken({componentType:'text', state:'disabled'}, props.theme)};\r\n\r\n .ql-editor.ql-blank::before {\r\n color: ${props => COLORS.generateToken({componentType:'text', state:'disabled'}, props.theme)};\r\n }\r\n }\r\n }\r\n`;\r\n\r\nexport enum RichTextFieldFormats {\r\n Background = 'background',\r\n Bold = 'bold',\r\n Color = 'color',\r\n Font = 'font',\r\n Code = 'code',\r\n Italic = 'italic',\r\n Link = 'link',\r\n Size = 'size',\r\n Strike = 'strike',\r\n Script = 'script',\r\n Underline = 'underline',\r\n Blockquote = 'blockquote',\r\n Header = 'header',\r\n Indent = 'indent',\r\n List = 'list',\r\n Align = 'align',\r\n Direction = 'direction',\r\n CodeBlock = 'code-block',\r\n Formula = 'formula',\r\n Image = 'image',\r\n Video = 'video'\r\n}\r\n\r\nconst defaultToolBarOptions = [\r\n [{header: [1, 2, 3, false]}],\r\n ['bold', 'italic', 'underline', 'strike'],\r\n [{'list': 'ordered'}, {'list': 'bullet'}],\r\n ['link'],\r\n ['clean']\r\n];\r\n\r\nexport interface RichTextFieldProps {\r\n /**\r\n * Optional. The ID of the rich text field.\r\n */\r\n id?: string;\r\n\r\n /**\r\n * Optional. The CSS class name of the rich text field.\r\n */\r\n className?: string;\r\n\r\n /**\r\n * Optional. The placeholder text to be displayed in the rich text field when it is empty.\r\n */\r\n placeholder?: string;\r\n\r\n /**\r\n * Optional. A boolean indicating whether the rich text field is read-only.\r\n */\r\n readOnly?: boolean;\r\n\r\n /**\r\n * Optional. A boolean indicating whether the rich text field is disabled.\r\n */\r\n disabled?: boolean;\r\n\r\n /**\r\n * Optional. A boolean indicating whether the rich text field is resizable.\r\n */\r\n resizable?: boolean;\r\n\r\n /**\r\n * Optional. An object containing the modules to be used by the rich text field.\r\n */\r\n modules?: Record<string, unknown>;\r\n\r\n /**\r\n * Optional. An array of formats to be used by the rich text field.\r\n */\r\n formats?: RichTextFieldFormats[];\r\n\r\n /**\r\n * Optional. A function to be called when the rich text field gains focus.\r\n */\r\n onFocus?(selection: ReactQuill.Range, source: EmitterSource, editor: ReactQuill.UnprivilegedEditor): void;\r\n\r\n /**\r\n * Optional. A function to be called when the rich text field loses focus.\r\n */\r\n onBlur?(previousSelection: ReactQuill.Range, source: EmitterSource, editor: ReactQuill.UnprivilegedEditor): void;\r\n\r\n /**\r\n * Optional. A function to be called when a keydown event occurs in the rich text field.\r\n */\r\n onKeyDown?: React.EventHandler<any>;\r\n\r\n /**\r\n * Optional. A function to be called when a keypress event occurs in the rich text field.\r\n */\r\n onKeyPress?: React.EventHandler<any>;\r\n\r\n /**\r\n * Optional. A function to be called when a keyup event occurs in the rich text field.\r\n */\r\n onKeyUp?: React.EventHandler<any>;\r\n\r\n /**\r\n * Required. The current value of the rich text field.\r\n */\r\n value: any;\r\n\r\n /**\r\n * Required. A function to be called when the value of the rich text field changes.\r\n */\r\n onChange: (value: any) => void;\r\n\r\n /**\r\n * Optional. The validation message to be displayed when the rich text field is in an error state.\r\n */\r\n validationMessage?: string;\r\n\r\n /**\r\n * Optional. A note to be displayed below the rich text field.\r\n */\r\n note?: TextFieldNote;\r\n\r\n /**\r\n * Optional. The size of the rich text field. Can be 'Small' or 'Medium'.\r\n */\r\n size?: Size.Small | Size.Medium;\r\n\r\n /**\r\n * Optional. The state of the rich text field. Can be 'Invalid' or 'Valid'.\r\n */\r\n state?: States.Invalid | States.Valid;\r\n}\r\n\r\nexport const RichTextField = React.forwardRef<any, RichTextFieldProps>(({\r\n readOnly,\r\n disabled,\r\n validationMessage,\r\n note,\r\n size = Size.Medium,\r\n state,\r\n resizable,\r\n modules,\r\n formats,\r\n ...rest\r\n }: RichTextFieldProps, ref) => {\r\n\r\n const theme = useTheme();\r\n let m = {...(modules ?? {}), toolbar: modules?.toolbar ?? defaultToolBarOptions};\r\n let f = formats ?? Object.values(RichTextFieldFormats).filter(a => a !== RichTextFieldFormats.Image && a !== RichTextFieldFormats.Video && a !== RichTextFieldFormats.Formula);\r\n\r\n return (\r\n <RichTextFieldContainer\r\n className={`${resizable ? 'resizable' : ''} ${size} ${state || ''} ${readOnly ? 'readonly' : ''} ${disabled ? 'disabled' : ''}`}>\r\n <ReactQuill ref={ref}\r\n readOnly={readOnly || disabled}\r\n modules={m}\r\n theme={'snow'}\r\n formats={f}\r\n {...rest}\r\n />\r\n {validationMessage && (\r\n <ValidationMessage className={size || ''} type={state ?? States.Invalid}>\r\n {\r\n state === States.Valid\r\n ? <CheckMark color={COLORS.generateToken({componentType:'text', defaultVariant:'positive'}, theme)}/>\r\n : <TechnicalWarning color={COLORS.generateToken({componentType:'text', defaultVariant:'critical'}, theme)}/>\r\n }\r\n <span>{validationMessage}</span>\r\n </ValidationMessage>\r\n )}\r\n {note && !disabled && (\r\n <NoteMessage className={size}>\r\n {note.icon}\r\n <span>{note.message}</span>\r\n </NoteMessage>\r\n )}\r\n </RichTextFieldContainer>\r\n )\r\n});"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import ReactQuill, { EmitterSource } from "react-quill-new";
|
|
3
3
|
import { TextFieldNote } from "./types";
|
|
4
4
|
import { Size, States } from "../types";
|
|
5
|
-
import { Sources, StringMap } from "quill";
|
|
6
5
|
import 'react-quill/dist/quill.snow.css';
|
|
7
6
|
export declare const RichTextFieldContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
8
7
|
export declare enum RichTextFieldFormats {
|
|
@@ -56,7 +55,7 @@ export interface RichTextFieldProps {
|
|
|
56
55
|
/**
|
|
57
56
|
* Optional. An object containing the modules to be used by the rich text field.
|
|
58
57
|
*/
|
|
59
|
-
modules?:
|
|
58
|
+
modules?: Record<string, unknown>;
|
|
60
59
|
/**
|
|
61
60
|
* Optional. An array of formats to be used by the rich text field.
|
|
62
61
|
*/
|
|
@@ -64,11 +63,11 @@ export interface RichTextFieldProps {
|
|
|
64
63
|
/**
|
|
65
64
|
* Optional. A function to be called when the rich text field gains focus.
|
|
66
65
|
*/
|
|
67
|
-
onFocus?(selection: Range, source:
|
|
66
|
+
onFocus?(selection: ReactQuill.Range, source: EmitterSource, editor: ReactQuill.UnprivilegedEditor): void;
|
|
68
67
|
/**
|
|
69
68
|
* Optional. A function to be called when the rich text field loses focus.
|
|
70
69
|
*/
|
|
71
|
-
onBlur?(previousSelection: Range, source:
|
|
70
|
+
onBlur?(previousSelection: ReactQuill.Range, source: EmitterSource, editor: ReactQuill.UnprivilegedEditor): void;
|
|
72
71
|
/**
|
|
73
72
|
* Optional. A function to be called when a keydown event occurs in the rich text field.
|
|
74
73
|
*/
|
|
@@ -5,7 +5,7 @@ const _excluded = ["readOnly", "disabled", "validationMessage", "note", "size",
|
|
|
5
5
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
6
6
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
7
7
|
import React from 'react';
|
|
8
|
-
import ReactQuill from "react-quill";
|
|
8
|
+
import ReactQuill from "react-quill-new";
|
|
9
9
|
import styled, { useTheme } from "styled-components";
|
|
10
10
|
import { NoteMessage, readOnlyState, ValidationMessage } from "./styling";
|
|
11
11
|
import { Size, States } from "../types";
|
|
@@ -256,6 +256,7 @@ RichTextField.propTypes = {
|
|
|
256
256
|
readOnly: _pt.bool,
|
|
257
257
|
disabled: _pt.bool,
|
|
258
258
|
resizable: _pt.bool,
|
|
259
|
+
modules: _pt.objectOf(_pt.any),
|
|
259
260
|
formats: _pt.arrayOf(_pt.oneOf(["background", "bold", "color", "font", "code", "italic", "link", "size", "strike", "script", "underline", "blockquote", "header", "indent", "list", "align", "direction", "code-block", "formula", "image", "video"])),
|
|
260
261
|
onKeyDown: _pt.func,
|
|
261
262
|
onKeyPress: _pt.func,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RichTextField.js","names":["React","ReactQuill","styled","useTheme","NoteMessage","readOnlyState","ValidationMessage","Size","States","COLORS","ComponentMStyling","ComponentSStyling","ComponentTextStyle","scrollBarStyling","CheckMark","TechnicalWarning","jsx","_jsx","jsxs","_jsxs","RichTextFieldContainer","div","props","generateToken","componentType","defaultVariant","theme","state","Regular","Italic","Small","RichTextFieldFormats","defaultToolBarOptions","header","RichTextField","forwardRef","_ref","ref","readOnly","disabled","validationMessage","note","size","Medium","resizable","modules","formats","rest","_objectWithoutProperties","_excluded","m","_objectSpread","toolbar","f","Object","values","filter","a","Image","Video","Formula","className","children","type","Invalid","Valid","color","icon","message","propTypes","id","_pt","string","placeholder","bool","arrayOf","oneOf","onKeyDown","func","onKeyPress","onKeyUp","value","any","isRequired","onChange"],"sources":["../../src/InputFields/RichTextField.tsx"],"sourcesContent":["import React from 'react';\r\nimport ReactQuill, {Range, UnprivilegedEditor} from \"react-quill\";\r\nimport {TextFieldNote} from \"./types\";\r\nimport styled, { useTheme } from \"styled-components\";\r\nimport {NoteMessage, readOnlyState, ValidationMessage} from \"./styling\";\r\nimport {Size, States} from \"../types\";\r\nimport {COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, scrollBarStyling} from \"../styles\";\r\nimport {CheckMark, TechnicalWarning} from \"../icons/systemicons\";\r\nimport {Sources, StringMap} from \"quill\";\r\nimport 'react-quill/dist/quill.snow.css';\r\n\r\nexport const RichTextFieldContainer = styled.div`\r\n .quill {\r\n width: 100%;\r\n margin-bottom: 4px;\r\n overflow: hidden;\r\n\r\n box-shadow: inset 0 0 0 1px ${props => COLORS.generateToken({componentType:'border', defaultVariant:'default'}, props.theme)};\r\n border-radius: 4px;\r\n }\r\n\r\n .quill.valid {\r\n box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({componentType:'border', defaultVariant:'positive'}, props.theme)};\r\n }\r\n\r\n .quill.invalid {\r\n box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({componentType:'border', defaultVariant:'critical'}, props.theme)};\r\n }\r\n\r\n .quill:hover {\r\n box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({componentType:'border', state:'hover'}, props.theme)};\r\n }\r\n\r\n .quill:focus-within {\r\n box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({componentType:'border', state:'hover'}, props.theme)};\r\n }\r\n\r\n .ql-editor,\r\n .ql-editor p{\r\n ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.generateToken({componentType:'text', defaultVariant:'default'}, props.theme))}\r\n }\r\n\r\n .ql-editor.ql-blank::before {\r\n ${props => ComponentSStyling(ComponentTextStyle.Italic, COLORS.generateToken({componentType:'text', defaultVariant:'subtle'}, props.theme))}\r\n }\r\n\r\n &.medium {\r\n .ql-editor,\r\n .ql-editor p{\r\n ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.generateToken({componentType:'text', defaultVariant:'default'}, props.theme))}\r\n }\r\n\r\n .ql-editor.ql-blank::before {\r\n ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.generateToken({componentType:'text', defaultVariant:'subtle'}, props.theme))}\r\n }\r\n }\r\n\r\n .ql-toolbar.ql-snow {\r\n border: none;\r\n padding: 8px 7px;\r\n margin: 0 1px;\r\n border-bottom: 1px solid ${props => COLORS.generateToken({componentType:'border', defaultVariant:'subtle'}, props.theme)};\r\n }\r\n\r\n .quill.valid .ql-toolbar,\r\n .quill.invalid .ql-toolbar,\r\n .quill:hover .ql-toolbar,\r\n .quill:focus-within .ql-toolbar {\r\n padding: 8px 6px;\r\n margin: 0 2px;\r\n }\r\n\r\n .ql-container {\r\n font-family: unset !important;\r\n }\r\n\r\n .ql-container.ql-snow {\r\n border: none;\r\n overflow-y: hidden;\r\n padding: 8px;\r\n }\r\n\r\n .ql-editor {\r\n padding: 8px;\r\n overflow-y: auto;\r\n\r\n ${scrollBarStyling(Size.Small)}\r\n }\r\n\r\n &.resizable {\r\n height: initial;\r\n\r\n .quill {\r\n flex: none;\r\n overflow: initial;\r\n }\r\n\r\n .ql-container {\r\n flex: none;\r\n resize: vertical;\r\n }\r\n\r\n .ql-editor {\r\n height: 100%;\r\n }\r\n }\r\n\r\n &.readonly {\r\n .quill {\r\n ${readOnlyState}\r\n }\r\n }\r\n\r\n &.disabled {\r\n cursor: not-allowed;\r\n\r\n .quill {\r\n pointer-events: none;\r\n box-shadow: inset 0 0 0 1px ${props => COLORS.generateToken({componentType:'border', state:'disabled'}, props.theme)};\r\n color: ${props => COLORS.generateToken({componentType:'text', state:'disabled'}, props.theme)};\r\n\r\n .ql-editor.ql-blank::before {\r\n color: ${props => COLORS.generateToken({componentType:'text', state:'disabled'}, props.theme)};\r\n }\r\n }\r\n }\r\n`;\r\n\r\nexport enum RichTextFieldFormats {\r\n Background = 'background',\r\n Bold = 'bold',\r\n Color = 'color',\r\n Font = 'font',\r\n Code = 'code',\r\n Italic = 'italic',\r\n Link = 'link',\r\n Size = 'size',\r\n Strike = 'strike',\r\n Script = 'script',\r\n Underline = 'underline',\r\n Blockquote = 'blockquote',\r\n Header = 'header',\r\n Indent = 'indent',\r\n List = 'list',\r\n Align = 'align',\r\n Direction = 'direction',\r\n CodeBlock = 'code-block',\r\n Formula = 'formula',\r\n Image = 'image',\r\n Video = 'video'\r\n}\r\n\r\nconst defaultToolBarOptions = [\r\n [{header: [1, 2, 3, false]}],\r\n ['bold', 'italic', 'underline', 'strike'],\r\n [{'list': 'ordered'}, {'list': 'bullet'}],\r\n ['link'],\r\n ['clean']\r\n];\r\n\r\nexport interface RichTextFieldProps {\r\n /**\r\n * Optional. The ID of the rich text field.\r\n */\r\n id?: string;\r\n\r\n /**\r\n * Optional. The CSS class name of the rich text field.\r\n */\r\n className?: string;\r\n\r\n /**\r\n * Optional. The placeholder text to be displayed in the rich text field when it is empty.\r\n */\r\n placeholder?: string;\r\n\r\n /**\r\n * Optional. A boolean indicating whether the rich text field is read-only.\r\n */\r\n readOnly?: boolean;\r\n\r\n /**\r\n * Optional. A boolean indicating whether the rich text field is disabled.\r\n */\r\n disabled?: boolean;\r\n\r\n /**\r\n * Optional. A boolean indicating whether the rich text field is resizable.\r\n */\r\n resizable?: boolean;\r\n\r\n /**\r\n * Optional. An object containing the modules to be used by the rich text field.\r\n */\r\n modules?: StringMap;\r\n\r\n /**\r\n * Optional. An array of formats to be used by the rich text field.\r\n */\r\n formats?: RichTextFieldFormats[];\r\n\r\n /**\r\n * Optional. A function to be called when the rich text field gains focus.\r\n */\r\n onFocus?(selection: Range, source: Sources, editor: UnprivilegedEditor): void;\r\n\r\n /**\r\n * Optional. A function to be called when the rich text field loses focus.\r\n */\r\n onBlur?(previousSelection: Range, source: Sources, editor: UnprivilegedEditor): void;\r\n\r\n /**\r\n * Optional. A function to be called when a keydown event occurs in the rich text field.\r\n */\r\n onKeyDown?: React.EventHandler<any>;\r\n\r\n /**\r\n * Optional. A function to be called when a keypress event occurs in the rich text field.\r\n */\r\n onKeyPress?: React.EventHandler<any>;\r\n\r\n /**\r\n * Optional. A function to be called when a keyup event occurs in the rich text field.\r\n */\r\n onKeyUp?: React.EventHandler<any>;\r\n\r\n /**\r\n * Required. The current value of the rich text field.\r\n */\r\n value: any;\r\n\r\n /**\r\n * Required. A function to be called when the value of the rich text field changes.\r\n */\r\n onChange: (value: any) => void;\r\n\r\n /**\r\n * Optional. The validation message to be displayed when the rich text field is in an error state.\r\n */\r\n validationMessage?: string;\r\n\r\n /**\r\n * Optional. A note to be displayed below the rich text field.\r\n */\r\n note?: TextFieldNote;\r\n\r\n /**\r\n * Optional. The size of the rich text field. Can be 'Small' or 'Medium'.\r\n */\r\n size?: Size.Small | Size.Medium;\r\n\r\n /**\r\n * Optional. The state of the rich text field. Can be 'Invalid' or 'Valid'.\r\n */\r\n state?: States.Invalid | States.Valid;\r\n}\r\n\r\nexport const RichTextField = React.forwardRef<any, RichTextFieldProps>(({\r\n readOnly,\r\n disabled,\r\n validationMessage,\r\n note,\r\n size = Size.Medium,\r\n state,\r\n resizable,\r\n modules,\r\n formats,\r\n ...rest\r\n }: RichTextFieldProps, ref) => {\r\n\r\n const theme = useTheme();\r\n let m = {...(modules ?? {}), toolbar: modules?.toolbar ?? defaultToolBarOptions};\r\n let f = formats ?? Object.values(RichTextFieldFormats).filter(a => a !== RichTextFieldFormats.Image && a !== RichTextFieldFormats.Video && a !== RichTextFieldFormats.Formula);\r\n\r\n return (\r\n <RichTextFieldContainer\r\n className={`${resizable ? 'resizable' : ''} ${size} ${state || ''} ${readOnly ? 'readonly' : ''} ${disabled ? 'disabled' : ''}`}>\r\n <ReactQuill ref={ref}\r\n readOnly={readOnly || disabled}\r\n modules={m}\r\n theme={'snow'}\r\n formats={f}\r\n {...rest}\r\n />\r\n {validationMessage && (\r\n <ValidationMessage className={size || ''} type={state ?? States.Invalid}>\r\n {\r\n state === States.Valid\r\n ? <CheckMark color={COLORS.generateToken({componentType:'text', defaultVariant:'positive'}, theme)}/>\r\n : <TechnicalWarning color={COLORS.generateToken({componentType:'text', defaultVariant:'critical'}, theme)}/>\r\n }\r\n <span>{validationMessage}</span>\r\n </ValidationMessage>\r\n )}\r\n {note && !disabled && (\r\n <NoteMessage className={size}>\r\n {note.icon}\r\n <span>{note.message}</span>\r\n </NoteMessage>\r\n )}\r\n </RichTextFieldContainer>\r\n )\r\n});"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"RichTextField.js","names":["React","ReactQuill","styled","useTheme","NoteMessage","readOnlyState","ValidationMessage","Size","States","COLORS","ComponentMStyling","ComponentSStyling","ComponentTextStyle","scrollBarStyling","CheckMark","TechnicalWarning","jsx","_jsx","jsxs","_jsxs","RichTextFieldContainer","div","props","generateToken","componentType","defaultVariant","theme","state","Regular","Italic","Small","RichTextFieldFormats","defaultToolBarOptions","header","RichTextField","forwardRef","_ref","ref","readOnly","disabled","validationMessage","note","size","Medium","resizable","modules","formats","rest","_objectWithoutProperties","_excluded","m","_objectSpread","toolbar","f","Object","values","filter","a","Image","Video","Formula","className","children","type","Invalid","Valid","color","icon","message","propTypes","id","_pt","string","placeholder","bool","objectOf","any","arrayOf","oneOf","onKeyDown","func","onKeyPress","onKeyUp","value","isRequired","onChange"],"sources":["../../src/InputFields/RichTextField.tsx"],"sourcesContent":["import React from 'react';\r\nimport ReactQuill, { EmitterSource } from \"react-quill-new\";\r\nimport {TextFieldNote} from \"./types\";\r\nimport styled, { useTheme } from \"styled-components\";\r\nimport {NoteMessage, readOnlyState, ValidationMessage} from \"./styling\";\r\nimport {Size, States} from \"../types\";\r\nimport {COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, scrollBarStyling} from \"../styles\";\r\nimport {CheckMark, TechnicalWarning} from \"../icons/systemicons\";\r\nimport 'react-quill/dist/quill.snow.css';\r\n\r\nexport const RichTextFieldContainer = styled.div`\r\n .quill {\r\n width: 100%;\r\n margin-bottom: 4px;\r\n overflow: hidden;\r\n\r\n box-shadow: inset 0 0 0 1px ${props => COLORS.generateToken({componentType:'border', defaultVariant:'default'}, props.theme)};\r\n border-radius: 4px;\r\n }\r\n\r\n .quill.valid {\r\n box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({componentType:'border', defaultVariant:'positive'}, props.theme)};\r\n }\r\n\r\n .quill.invalid {\r\n box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({componentType:'border', defaultVariant:'critical'}, props.theme)};\r\n }\r\n\r\n .quill:hover {\r\n box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({componentType:'border', state:'hover'}, props.theme)};\r\n }\r\n\r\n .quill:focus-within {\r\n box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({componentType:'border', state:'hover'}, props.theme)};\r\n }\r\n\r\n .ql-editor,\r\n .ql-editor p{\r\n ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.generateToken({componentType:'text', defaultVariant:'default'}, props.theme))}\r\n }\r\n\r\n .ql-editor.ql-blank::before {\r\n ${props => ComponentSStyling(ComponentTextStyle.Italic, COLORS.generateToken({componentType:'text', defaultVariant:'subtle'}, props.theme))}\r\n }\r\n\r\n &.medium {\r\n .ql-editor,\r\n .ql-editor p{\r\n ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.generateToken({componentType:'text', defaultVariant:'default'}, props.theme))}\r\n }\r\n\r\n .ql-editor.ql-blank::before {\r\n ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.generateToken({componentType:'text', defaultVariant:'subtle'}, props.theme))}\r\n }\r\n }\r\n\r\n .ql-toolbar.ql-snow {\r\n border: none;\r\n padding: 8px 7px;\r\n margin: 0 1px;\r\n border-bottom: 1px solid ${props => COLORS.generateToken({componentType:'border', defaultVariant:'subtle'}, props.theme)};\r\n }\r\n\r\n .quill.valid .ql-toolbar,\r\n .quill.invalid .ql-toolbar,\r\n .quill:hover .ql-toolbar,\r\n .quill:focus-within .ql-toolbar {\r\n padding: 8px 6px;\r\n margin: 0 2px;\r\n }\r\n\r\n .ql-container {\r\n font-family: unset !important;\r\n }\r\n\r\n .ql-container.ql-snow {\r\n border: none;\r\n overflow-y: hidden;\r\n padding: 8px;\r\n }\r\n\r\n .ql-editor {\r\n padding: 8px;\r\n overflow-y: auto;\r\n\r\n ${scrollBarStyling(Size.Small)}\r\n }\r\n\r\n &.resizable {\r\n height: initial;\r\n\r\n .quill {\r\n flex: none;\r\n overflow: initial;\r\n }\r\n\r\n .ql-container {\r\n flex: none;\r\n resize: vertical;\r\n }\r\n\r\n .ql-editor {\r\n height: 100%;\r\n }\r\n }\r\n\r\n &.readonly {\r\n .quill {\r\n ${readOnlyState}\r\n }\r\n }\r\n\r\n &.disabled {\r\n cursor: not-allowed;\r\n\r\n .quill {\r\n pointer-events: none;\r\n box-shadow: inset 0 0 0 1px ${props => COLORS.generateToken({componentType:'border', state:'disabled'}, props.theme)};\r\n color: ${props => COLORS.generateToken({componentType:'text', state:'disabled'}, props.theme)};\r\n\r\n .ql-editor.ql-blank::before {\r\n color: ${props => COLORS.generateToken({componentType:'text', state:'disabled'}, props.theme)};\r\n }\r\n }\r\n }\r\n`;\r\n\r\nexport enum RichTextFieldFormats {\r\n Background = 'background',\r\n Bold = 'bold',\r\n Color = 'color',\r\n Font = 'font',\r\n Code = 'code',\r\n Italic = 'italic',\r\n Link = 'link',\r\n Size = 'size',\r\n Strike = 'strike',\r\n Script = 'script',\r\n Underline = 'underline',\r\n Blockquote = 'blockquote',\r\n Header = 'header',\r\n Indent = 'indent',\r\n List = 'list',\r\n Align = 'align',\r\n Direction = 'direction',\r\n CodeBlock = 'code-block',\r\n Formula = 'formula',\r\n Image = 'image',\r\n Video = 'video'\r\n}\r\n\r\nconst defaultToolBarOptions = [\r\n [{header: [1, 2, 3, false]}],\r\n ['bold', 'italic', 'underline', 'strike'],\r\n [{'list': 'ordered'}, {'list': 'bullet'}],\r\n ['link'],\r\n ['clean']\r\n];\r\n\r\nexport interface RichTextFieldProps {\r\n /**\r\n * Optional. The ID of the rich text field.\r\n */\r\n id?: string;\r\n\r\n /**\r\n * Optional. The CSS class name of the rich text field.\r\n */\r\n className?: string;\r\n\r\n /**\r\n * Optional. The placeholder text to be displayed in the rich text field when it is empty.\r\n */\r\n placeholder?: string;\r\n\r\n /**\r\n * Optional. A boolean indicating whether the rich text field is read-only.\r\n */\r\n readOnly?: boolean;\r\n\r\n /**\r\n * Optional. A boolean indicating whether the rich text field is disabled.\r\n */\r\n disabled?: boolean;\r\n\r\n /**\r\n * Optional. A boolean indicating whether the rich text field is resizable.\r\n */\r\n resizable?: boolean;\r\n\r\n /**\r\n * Optional. An object containing the modules to be used by the rich text field.\r\n */\r\n modules?: Record<string, unknown>;\r\n\r\n /**\r\n * Optional. An array of formats to be used by the rich text field.\r\n */\r\n formats?: RichTextFieldFormats[];\r\n\r\n /**\r\n * Optional. A function to be called when the rich text field gains focus.\r\n */\r\n onFocus?(selection: ReactQuill.Range, source: EmitterSource, editor: ReactQuill.UnprivilegedEditor): void;\r\n\r\n /**\r\n * Optional. A function to be called when the rich text field loses focus.\r\n */\r\n onBlur?(previousSelection: ReactQuill.Range, source: EmitterSource, editor: ReactQuill.UnprivilegedEditor): void;\r\n\r\n /**\r\n * Optional. A function to be called when a keydown event occurs in the rich text field.\r\n */\r\n onKeyDown?: React.EventHandler<any>;\r\n\r\n /**\r\n * Optional. A function to be called when a keypress event occurs in the rich text field.\r\n */\r\n onKeyPress?: React.EventHandler<any>;\r\n\r\n /**\r\n * Optional. A function to be called when a keyup event occurs in the rich text field.\r\n */\r\n onKeyUp?: React.EventHandler<any>;\r\n\r\n /**\r\n * Required. The current value of the rich text field.\r\n */\r\n value: any;\r\n\r\n /**\r\n * Required. A function to be called when the value of the rich text field changes.\r\n */\r\n onChange: (value: any) => void;\r\n\r\n /**\r\n * Optional. The validation message to be displayed when the rich text field is in an error state.\r\n */\r\n validationMessage?: string;\r\n\r\n /**\r\n * Optional. A note to be displayed below the rich text field.\r\n */\r\n note?: TextFieldNote;\r\n\r\n /**\r\n * Optional. The size of the rich text field. Can be 'Small' or 'Medium'.\r\n */\r\n size?: Size.Small | Size.Medium;\r\n\r\n /**\r\n * Optional. The state of the rich text field. Can be 'Invalid' or 'Valid'.\r\n */\r\n state?: States.Invalid | States.Valid;\r\n}\r\n\r\nexport const RichTextField = React.forwardRef<any, RichTextFieldProps>(({\r\n readOnly,\r\n disabled,\r\n validationMessage,\r\n note,\r\n size = Size.Medium,\r\n state,\r\n resizable,\r\n modules,\r\n formats,\r\n ...rest\r\n }: RichTextFieldProps, ref) => {\r\n\r\n const theme = useTheme();\r\n let m = {...(modules ?? {}), toolbar: modules?.toolbar ?? defaultToolBarOptions};\r\n let f = formats ?? Object.values(RichTextFieldFormats).filter(a => a !== RichTextFieldFormats.Image && a !== RichTextFieldFormats.Video && a !== RichTextFieldFormats.Formula);\r\n\r\n return (\r\n <RichTextFieldContainer\r\n className={`${resizable ? 'resizable' : ''} ${size} ${state || ''} ${readOnly ? 'readonly' : ''} ${disabled ? 'disabled' : ''}`}>\r\n <ReactQuill ref={ref}\r\n readOnly={readOnly || disabled}\r\n modules={m}\r\n theme={'snow'}\r\n formats={f}\r\n {...rest}\r\n />\r\n {validationMessage && (\r\n <ValidationMessage className={size || ''} type={state ?? States.Invalid}>\r\n {\r\n state === States.Valid\r\n ? <CheckMark color={COLORS.generateToken({componentType:'text', defaultVariant:'positive'}, theme)}/>\r\n : <TechnicalWarning color={COLORS.generateToken({componentType:'text', defaultVariant:'critical'}, theme)}/>\r\n }\r\n <span>{validationMessage}</span>\r\n </ValidationMessage>\r\n )}\r\n {note && !disabled && (\r\n <NoteMessage className={size}>\r\n {note.icon}\r\n <span>{note.message}</span>\r\n </NoteMessage>\r\n )}\r\n </RichTextFieldContainer>\r\n )\r\n});"],"mappings":"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","ignoreList":[]}
|
|
@@ -17,7 +17,7 @@ var _common = require("../common");
|
|
|
17
17
|
var _TooltipOverflow = _interopRequireDefault(require("../Tooltips/TooltipOverflow"));
|
|
18
18
|
var _styledComponents = require("styled-components");
|
|
19
19
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
20
|
-
const _excluded = ["id", "disabled", "readOnly", "onChange", "value", "validationMessage", "type", "autoComplete", "placeholder", "required", "pattern", "maxLength", "
|
|
20
|
+
const _excluded = ["id", "disabled", "readOnly", "onChange", "value", "validationMessage", "type", "autoComplete", "placeholder", "required", "pattern", "maxLength", "state", "size", "margin", "overflowTooltipPosition", "note", "className", "dataTestId"];
|
|
21
21
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
22
22
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
23
23
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
@@ -36,7 +36,6 @@ const TextField = /*#__PURE__*/React.forwardRef((_ref, ref) => {
|
|
|
36
36
|
required,
|
|
37
37
|
pattern,
|
|
38
38
|
maxLength,
|
|
39
|
-
withoutBorder,
|
|
40
39
|
state,
|
|
41
40
|
size,
|
|
42
41
|
margin,
|
|
@@ -76,8 +75,7 @@ const TextField = /*#__PURE__*/React.forwardRef((_ref, ref) => {
|
|
|
76
75
|
$activeErrorMessage: !!validationMessage && state !== _types.States.Valid,
|
|
77
76
|
required: required,
|
|
78
77
|
pattern: pattern,
|
|
79
|
-
maxLength: maxLength
|
|
80
|
-
$withoutBorder: withoutBorder
|
|
78
|
+
maxLength: maxLength
|
|
81
79
|
}, rest)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TooltipOverflow.default, {
|
|
82
80
|
value: value,
|
|
83
81
|
position: overflowTooltipPosition,
|
|
@@ -125,7 +123,6 @@ TextField.propTypes = {
|
|
|
125
123
|
required: _propTypes.default.bool,
|
|
126
124
|
pattern: _propTypes.default.string,
|
|
127
125
|
maxLength: _propTypes.default.number,
|
|
128
|
-
withoutBorder: _propTypes.default.bool,
|
|
129
126
|
overflowTooltipPosition: _propTypes.default.oneOf(['top', 'bottom']),
|
|
130
127
|
margin: _propTypes.default.string
|
|
131
128
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextField.cjs","names":["React","_interopRequireWildcard","require","_icons","_styles","_types","_styling","_common","_TooltipOverflow","_interopRequireDefault","_styledComponents","_jsxRuntime","_excluded","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ownKeys","keys","getOwnPropertySymbols","o","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","TextField","forwardRef","_ref","ref","id","disabled","readOnly","onChange","value","validationMessage","type","autoComplete","placeholder","required","pattern","maxLength","withoutBorder","state","size","margin","overflowTooltipPosition","note","className","dataTestId","rest","_objectWithoutProperties2","elementRef","useFocusVisibleRef","theme","useTheme","useImperativeHandle","current","cls","States","Invalid","jsx","Fragment","children","jsxs","InputWrapper","$readOnly","$disabled","$margin","onClick","preventDefault","InputFieldStyling","tabIndex","undefined","target","$activeErrorMessage","Valid","$withoutBorder","position","input","withArrow","maxWidth","align","ValidationMessage","SystemIcons","CheckMark","color","COLORS","generateToken","componentType","defaultVariant","TechnicalWarning","NoteMessage","icon","message","propTypes","_propTypes","string","bool","func","number","oneOf","_default","exports"],"sources":["../../src/InputFields/TextField.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport {SystemIcons} from '../icons';\r\nimport {COLORS} from '../styles';\r\nimport {Size, States, Testable} from '../types';\r\nimport {InputFieldStyling, InputWrapper, NoteMessage, ValidationMessage} from './styling';\r\nimport {useFocusVisibleRef} from '../common';\r\nimport {TextFieldNote} from './types';\r\nimport TooltipOverflow from '../Tooltips/TooltipOverflow';\r\nimport { useTheme } from 'styled-components';\r\n\r\nexport type TextFieldProps =\r\n Testable & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'onChange' | 'value' | 'disabled' | 'id' | 'type' | 'readOnly' | 'autoComplete' | 'pattern' | 'maxLength'>\r\n & {\r\n /**\r\n * Optional. The ID of the text field.\r\n */\r\n id?: string;\r\n\r\n /**\r\n * Optional. A boolean indicating whether the text field is disabled.\r\n */\r\n disabled?: boolean;\r\n\r\n /**\r\n * Optional. A boolean indicating whether the text field is read-only.\r\n */\r\n readOnly?: boolean;\r\n\r\n /**\r\n * Optional. A function to be called when the text in the text field changes.\r\n * It should take a string representing the new text.\r\n */\r\n onChange?: (text: string) => void;\r\n\r\n /**\r\n * Optional. The current value of the text field.\r\n */\r\n value?: string;\r\n\r\n /**\r\n * Optional. The validation message to be displayed when the text field is in an error state.\r\n */\r\n validationMessage?: string;\r\n\r\n /**\r\n * Optional. The type of the text field. Can be any valid HTML input type.\r\n */\r\n type?: string;\r\n\r\n /**\r\n * Optional. The state of the text field. Can be 'Invalid' or 'Valid'.\r\n */\r\n state?: States.Invalid | States.Valid;\r\n\r\n /**\r\n * Optional. The autocomplete attribute of the text field. Can be any valid HTML autocomplete value.\r\n */\r\n autoComplete?: string;\r\n\r\n /**\r\n * Optional. The placeholder text to be displayed in the text field when it is empty.\r\n */\r\n placeholder?: string;\r\n\r\n /**\r\n * Optional. A boolean indicating whether the text field is required.\r\n */\r\n required?: boolean;\r\n\r\n /**\r\n * Optional. The pattern attribute of the text field. Can be any valid HTML pattern value.\r\n */\r\n pattern?: string;\r\n\r\n /**\r\n * Optional. The maximum length of the text that can be entered in the text field.\r\n */\r\n maxLength?: number;\r\n\r\n /**\r\n * Optional. A boolean indicating whether the text field should be displayed without a border.\r\n */\r\n withoutBorder?: boolean;\r\n\r\n /**\r\n * Optional. The position of the overflow tooltip. Can be 'top' or 'bottom'.\r\n */\r\n overflowTooltipPosition?: 'top' | 'bottom';\r\n\r\n /**\r\n * Optional. The size of the text field. Can be 'Small' or 'Medium'.\r\n */\r\n size?: Size.Small | Size.Medium;\r\n\r\n /**\r\n * Optional. The margin of the text field. Can be any valid CSS margin value.\r\n */\r\n margin?: string;\r\n\r\n /**\r\n * Optional. A note to be displayed below the text field.\r\n */\r\n note?: TextFieldNote;\r\n};\r\n\r\nconst TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(({\r\n id,\r\n disabled,\r\n readOnly,\r\n onChange,\r\n value,\r\n validationMessage,\r\n type,\r\n autoComplete,\r\n placeholder,\r\n required,\r\n pattern,\r\n maxLength,\r\n withoutBorder,\r\n state,\r\n size,\r\n margin,\r\n overflowTooltipPosition,\r\n note,\r\n className,\r\n dataTestId,\r\n ...rest\r\n }: TextFieldProps, ref) => {\r\n const elementRef = useFocusVisibleRef();\r\n const theme = useTheme();\r\n\r\n React.useImperativeHandle(ref, () => elementRef.current, [elementRef]);\r\n\r\n const cls = `${state || (validationMessage ? States.Invalid : '')} ${size || ''}`;\r\n\r\n return (\r\n <>\r\n <InputWrapper\r\n $readOnly={readOnly}\r\n $disabled={disabled}\r\n $margin={margin}\r\n onClick={(e: any) => {\r\n if (disabled || readOnly) {\r\n e.preventDefault();\r\n }\r\n }}>\r\n <InputFieldStyling\r\n id={id}\r\n data-testid={dataTestId}\r\n ref={elementRef}\r\n type={type || 'text'}\r\n value={value ?? ''}\r\n className={cls}\r\n tabIndex={readOnly || disabled ? -1 : 0}\r\n autoComplete={autoComplete}\r\n placeholder={disabled ? undefined : placeholder}\r\n disabled={disabled}\r\n readOnly={readOnly}\r\n onChange={(e: any) => onChange && onChange(e?.target?.value || '')}\r\n $activeErrorMessage={!!validationMessage && state !== States.Valid}\r\n required={required}\r\n pattern={pattern}\r\n maxLength={maxLength}\r\n $withoutBorder={withoutBorder}\r\n {...rest}\r\n />\r\n <TooltipOverflow value={value} position={overflowTooltipPosition} input={elementRef} withArrow={true} maxWidth=\"100%\" size={size} align='end'>\r\n {value}\r\n </TooltipOverflow>\r\n\r\n {validationMessage && (\r\n <ValidationMessage className={size || ''} type={state ?? States.Invalid}>\r\n {state === States.Valid ? <SystemIcons.CheckMark color={COLORS.generateToken({componentType:'text', defaultVariant:'positive'}, theme)}/> :\r\n <SystemIcons.TechnicalWarning color={COLORS.generateToken({componentType:'text', defaultVariant:'critical'}, theme)}/>}\r\n <span>{validationMessage}</span>\r\n </ValidationMessage>\r\n )}\r\n {note && !disabled && (\r\n <NoteMessage className={size}>\r\n {note.icon}\r\n <span>{note.message}</span>\r\n </NoteMessage>\r\n )}\r\n </InputWrapper>\r\n </>\r\n );\r\n});\r\n\r\nexport default TextField;\r\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"TextField.cjs","names":["React","_interopRequireWildcard","require","_icons","_styles","_types","_styling","_common","_TooltipOverflow","_interopRequireDefault","_styledComponents","_jsxRuntime","_excluded","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ownKeys","keys","getOwnPropertySymbols","o","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","TextField","forwardRef","_ref","ref","id","disabled","readOnly","onChange","value","validationMessage","type","autoComplete","placeholder","required","pattern","maxLength","state","size","margin","overflowTooltipPosition","note","className","dataTestId","rest","_objectWithoutProperties2","elementRef","useFocusVisibleRef","theme","useTheme","useImperativeHandle","current","cls","States","Invalid","jsx","Fragment","children","jsxs","InputWrapper","$readOnly","$disabled","$margin","onClick","preventDefault","InputFieldStyling","tabIndex","undefined","target","$activeErrorMessage","Valid","position","input","withArrow","maxWidth","align","ValidationMessage","SystemIcons","CheckMark","color","COLORS","generateToken","componentType","defaultVariant","TechnicalWarning","NoteMessage","icon","message","propTypes","_propTypes","string","bool","func","number","oneOf","_default","exports"],"sources":["../../src/InputFields/TextField.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport {SystemIcons} from '../icons';\r\nimport {COLORS} from '../styles';\r\nimport {Size, States, Testable} from '../types';\r\nimport {InputFieldStyling, InputWrapper, NoteMessage, ValidationMessage} from './styling';\r\nimport {useFocusVisibleRef} from '../common';\r\nimport {TextFieldNote} from './types';\r\nimport TooltipOverflow from '../Tooltips/TooltipOverflow';\r\nimport { useTheme } from 'styled-components';\r\n\r\nexport type TextFieldProps =\r\n Testable & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'onChange' | 'value' | 'disabled' | 'id' | 'type' | 'readOnly' | 'autoComplete' | 'pattern' | 'maxLength'>\r\n & {\r\n /**\r\n * Optional. The ID of the text field.\r\n */\r\n id?: string;\r\n\r\n /**\r\n * Optional. A boolean indicating whether the text field is disabled.\r\n */\r\n disabled?: boolean;\r\n\r\n /**\r\n * Optional. A boolean indicating whether the text field is read-only.\r\n */\r\n readOnly?: boolean;\r\n\r\n /**\r\n * Optional. A function to be called when the text in the text field changes.\r\n * It should take a string representing the new text.\r\n */\r\n onChange?: (text: string) => void;\r\n\r\n /**\r\n * Optional. The current value of the text field.\r\n */\r\n value?: string;\r\n\r\n /**\r\n * Optional. The validation message to be displayed when the text field is in an error state.\r\n */\r\n validationMessage?: string;\r\n\r\n /**\r\n * Optional. The type of the text field. Can be any valid HTML input type.\r\n */\r\n type?: string;\r\n\r\n /**\r\n * Optional. The state of the text field. Can be 'Invalid' or 'Valid'.\r\n */\r\n state?: States.Invalid | States.Valid;\r\n\r\n /**\r\n * Optional. The autocomplete attribute of the text field. Can be any valid HTML autocomplete value.\r\n */\r\n autoComplete?: string;\r\n\r\n /**\r\n * Optional. The placeholder text to be displayed in the text field when it is empty.\r\n */\r\n placeholder?: string;\r\n\r\n /**\r\n * Optional. A boolean indicating whether the text field is required.\r\n */\r\n required?: boolean;\r\n\r\n /**\r\n * Optional. The pattern attribute of the text field. Can be any valid HTML pattern value.\r\n */\r\n pattern?: string;\r\n\r\n /**\r\n * Optional. The maximum length of the text that can be entered in the text field.\r\n */\r\n maxLength?: number;\r\n\r\n /**\r\n * Optional. The position of the overflow tooltip. Can be 'top' or 'bottom'.\r\n */\r\n overflowTooltipPosition?: 'top' | 'bottom';\r\n\r\n /**\r\n * Optional. The size of the text field. Can be 'Small' or 'Medium'.\r\n */\r\n size?: Size.Small | Size.Medium;\r\n\r\n /**\r\n * Optional. The margin of the text field. Can be any valid CSS margin value.\r\n */\r\n margin?: string;\r\n\r\n /**\r\n * Optional. A note to be displayed below the text field.\r\n */\r\n note?: TextFieldNote;\r\n};\r\n\r\nconst TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(({\r\n id,\r\n disabled,\r\n readOnly,\r\n onChange,\r\n value,\r\n validationMessage,\r\n type,\r\n autoComplete,\r\n placeholder,\r\n required,\r\n pattern,\r\n maxLength,\r\n state,\r\n size,\r\n margin,\r\n overflowTooltipPosition,\r\n note,\r\n className,\r\n dataTestId,\r\n ...rest\r\n }: TextFieldProps, ref) => {\r\n const elementRef = useFocusVisibleRef();\r\n const theme = useTheme();\r\n\r\n React.useImperativeHandle(ref, () => elementRef.current, [elementRef]);\r\n\r\n const cls = `${state || (validationMessage ? States.Invalid : '')} ${size || ''}`;\r\n\r\n return (\r\n <>\r\n <InputWrapper\r\n $readOnly={readOnly}\r\n $disabled={disabled}\r\n $margin={margin}\r\n onClick={(e: any) => {\r\n if (disabled || readOnly) {\r\n e.preventDefault();\r\n }\r\n }}>\r\n <InputFieldStyling\r\n id={id}\r\n data-testid={dataTestId}\r\n ref={elementRef}\r\n type={type || 'text'}\r\n value={value ?? ''}\r\n className={cls}\r\n tabIndex={readOnly || disabled ? -1 : 0}\r\n autoComplete={autoComplete}\r\n placeholder={disabled ? undefined : placeholder}\r\n disabled={disabled}\r\n readOnly={readOnly}\r\n onChange={(e: any) => onChange && onChange(e?.target?.value || '')}\r\n $activeErrorMessage={!!validationMessage && state !== States.Valid}\r\n required={required}\r\n pattern={pattern}\r\n maxLength={maxLength}\r\n {...rest}\r\n />\r\n <TooltipOverflow value={value} position={overflowTooltipPosition} input={elementRef} withArrow={true} maxWidth=\"100%\" size={size} align='end'>\r\n {value}\r\n </TooltipOverflow>\r\n\r\n {validationMessage && (\r\n <ValidationMessage className={size || ''} type={state ?? States.Invalid}>\r\n {state === States.Valid ? <SystemIcons.CheckMark color={COLORS.generateToken({componentType:'text', defaultVariant:'positive'}, theme)}/> :\r\n <SystemIcons.TechnicalWarning color={COLORS.generateToken({componentType:'text', defaultVariant:'critical'}, theme)}/>}\r\n <span>{validationMessage}</span>\r\n </ValidationMessage>\r\n )}\r\n {note && !disabled && (\r\n <NoteMessage className={size}>\r\n {note.icon}\r\n <span>{note.message}</span>\r\n </NoteMessage>\r\n )}\r\n </InputWrapper>\r\n </>\r\n );\r\n});\r\n\r\nexport default TextField;\r\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -55,10 +55,6 @@ export type TextFieldProps = Testable & Omit<React.InputHTMLAttributes<HTMLInput
|
|
|
55
55
|
* Optional. The maximum length of the text that can be entered in the text field.
|
|
56
56
|
*/
|
|
57
57
|
maxLength?: number;
|
|
58
|
-
/**
|
|
59
|
-
* Optional. A boolean indicating whether the text field should be displayed without a border.
|
|
60
|
-
*/
|
|
61
|
-
withoutBorder?: boolean;
|
|
62
58
|
/**
|
|
63
59
|
* Optional. The position of the overflow tooltip. Can be 'top' or 'bottom'.
|
|
64
60
|
*/
|
|
@@ -130,10 +126,6 @@ declare const TextField: React.ForwardRefExoticComponent<Testable & Omit<React.I
|
|
|
130
126
|
* Optional. The maximum length of the text that can be entered in the text field.
|
|
131
127
|
*/
|
|
132
128
|
maxLength?: number;
|
|
133
|
-
/**
|
|
134
|
-
* Optional. A boolean indicating whether the text field should be displayed without a border.
|
|
135
|
-
*/
|
|
136
|
-
withoutBorder?: boolean;
|
|
137
129
|
/**
|
|
138
130
|
* Optional. The position of the overflow tooltip. Can be 'top' or 'bottom'.
|
|
139
131
|
*/
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
2
2
|
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
|
3
3
|
import _pt from "prop-types";
|
|
4
|
-
const _excluded = ["id", "disabled", "readOnly", "onChange", "value", "validationMessage", "type", "autoComplete", "placeholder", "required", "pattern", "maxLength", "
|
|
4
|
+
const _excluded = ["id", "disabled", "readOnly", "onChange", "value", "validationMessage", "type", "autoComplete", "placeholder", "required", "pattern", "maxLength", "state", "size", "margin", "overflowTooltipPosition", "note", "className", "dataTestId"];
|
|
5
5
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
6
6
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
7
7
|
import * as React from 'react';
|
|
@@ -27,7 +27,6 @@ const TextField = /*#__PURE__*/React.forwardRef((_ref, ref) => {
|
|
|
27
27
|
required,
|
|
28
28
|
pattern,
|
|
29
29
|
maxLength,
|
|
30
|
-
withoutBorder,
|
|
31
30
|
state,
|
|
32
31
|
size,
|
|
33
32
|
margin,
|
|
@@ -67,8 +66,7 @@ const TextField = /*#__PURE__*/React.forwardRef((_ref, ref) => {
|
|
|
67
66
|
$activeErrorMessage: !!validationMessage && state !== States.Valid,
|
|
68
67
|
required: required,
|
|
69
68
|
pattern: pattern,
|
|
70
|
-
maxLength: maxLength
|
|
71
|
-
$withoutBorder: withoutBorder
|
|
69
|
+
maxLength: maxLength
|
|
72
70
|
}, rest)), /*#__PURE__*/_jsx(TooltipOverflow, {
|
|
73
71
|
value: value,
|
|
74
72
|
position: overflowTooltipPosition,
|
|
@@ -116,7 +114,6 @@ TextField.propTypes = {
|
|
|
116
114
|
required: _pt.bool,
|
|
117
115
|
pattern: _pt.string,
|
|
118
116
|
maxLength: _pt.number,
|
|
119
|
-
withoutBorder: _pt.bool,
|
|
120
117
|
overflowTooltipPosition: _pt.oneOf(['top', 'bottom']),
|
|
121
118
|
margin: _pt.string
|
|
122
119
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextField.js","names":["React","SystemIcons","COLORS","States","InputFieldStyling","InputWrapper","NoteMessage","ValidationMessage","useFocusVisibleRef","TooltipOverflow","useTheme","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","TextField","forwardRef","_ref","ref","id","disabled","readOnly","onChange","value","validationMessage","type","autoComplete","placeholder","required","pattern","maxLength","withoutBorder","state","size","margin","overflowTooltipPosition","note","className","dataTestId","rest","_objectWithoutProperties","_excluded","elementRef","theme","useImperativeHandle","current","cls","Invalid","children","$readOnly","$disabled","$margin","onClick","e","preventDefault","_objectSpread","tabIndex","undefined","target","$activeErrorMessage","Valid","$withoutBorder","position","input","withArrow","maxWidth","align","CheckMark","color","generateToken","componentType","defaultVariant","TechnicalWarning","icon","message","propTypes","_pt","string","bool","func","number","oneOf"],"sources":["../../src/InputFields/TextField.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport {SystemIcons} from '../icons';\r\nimport {COLORS} from '../styles';\r\nimport {Size, States, Testable} from '../types';\r\nimport {InputFieldStyling, InputWrapper, NoteMessage, ValidationMessage} from './styling';\r\nimport {useFocusVisibleRef} from '../common';\r\nimport {TextFieldNote} from './types';\r\nimport TooltipOverflow from '../Tooltips/TooltipOverflow';\r\nimport { useTheme } from 'styled-components';\r\n\r\nexport type TextFieldProps =\r\n Testable & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'onChange' | 'value' | 'disabled' | 'id' | 'type' | 'readOnly' | 'autoComplete' | 'pattern' | 'maxLength'>\r\n & {\r\n /**\r\n * Optional. The ID of the text field.\r\n */\r\n id?: string;\r\n\r\n /**\r\n * Optional. A boolean indicating whether the text field is disabled.\r\n */\r\n disabled?: boolean;\r\n\r\n /**\r\n * Optional. A boolean indicating whether the text field is read-only.\r\n */\r\n readOnly?: boolean;\r\n\r\n /**\r\n * Optional. A function to be called when the text in the text field changes.\r\n * It should take a string representing the new text.\r\n */\r\n onChange?: (text: string) => void;\r\n\r\n /**\r\n * Optional. The current value of the text field.\r\n */\r\n value?: string;\r\n\r\n /**\r\n * Optional. The validation message to be displayed when the text field is in an error state.\r\n */\r\n validationMessage?: string;\r\n\r\n /**\r\n * Optional. The type of the text field. Can be any valid HTML input type.\r\n */\r\n type?: string;\r\n\r\n /**\r\n * Optional. The state of the text field. Can be 'Invalid' or 'Valid'.\r\n */\r\n state?: States.Invalid | States.Valid;\r\n\r\n /**\r\n * Optional. The autocomplete attribute of the text field. Can be any valid HTML autocomplete value.\r\n */\r\n autoComplete?: string;\r\n\r\n /**\r\n * Optional. The placeholder text to be displayed in the text field when it is empty.\r\n */\r\n placeholder?: string;\r\n\r\n /**\r\n * Optional. A boolean indicating whether the text field is required.\r\n */\r\n required?: boolean;\r\n\r\n /**\r\n * Optional. The pattern attribute of the text field. Can be any valid HTML pattern value.\r\n */\r\n pattern?: string;\r\n\r\n /**\r\n * Optional. The maximum length of the text that can be entered in the text field.\r\n */\r\n maxLength?: number;\r\n\r\n /**\r\n * Optional. A boolean indicating whether the text field should be displayed without a border.\r\n */\r\n withoutBorder?: boolean;\r\n\r\n /**\r\n * Optional. The position of the overflow tooltip. Can be 'top' or 'bottom'.\r\n */\r\n overflowTooltipPosition?: 'top' | 'bottom';\r\n\r\n /**\r\n * Optional. The size of the text field. Can be 'Small' or 'Medium'.\r\n */\r\n size?: Size.Small | Size.Medium;\r\n\r\n /**\r\n * Optional. The margin of the text field. Can be any valid CSS margin value.\r\n */\r\n margin?: string;\r\n\r\n /**\r\n * Optional. A note to be displayed below the text field.\r\n */\r\n note?: TextFieldNote;\r\n};\r\n\r\nconst TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(({\r\n id,\r\n disabled,\r\n readOnly,\r\n onChange,\r\n value,\r\n validationMessage,\r\n type,\r\n autoComplete,\r\n placeholder,\r\n required,\r\n pattern,\r\n maxLength,\r\n withoutBorder,\r\n state,\r\n size,\r\n margin,\r\n overflowTooltipPosition,\r\n note,\r\n className,\r\n dataTestId,\r\n ...rest\r\n }: TextFieldProps, ref) => {\r\n const elementRef = useFocusVisibleRef();\r\n const theme = useTheme();\r\n\r\n React.useImperativeHandle(ref, () => elementRef.current, [elementRef]);\r\n\r\n const cls = `${state || (validationMessage ? States.Invalid : '')} ${size || ''}`;\r\n\r\n return (\r\n <>\r\n <InputWrapper\r\n $readOnly={readOnly}\r\n $disabled={disabled}\r\n $margin={margin}\r\n onClick={(e: any) => {\r\n if (disabled || readOnly) {\r\n e.preventDefault();\r\n }\r\n }}>\r\n <InputFieldStyling\r\n id={id}\r\n data-testid={dataTestId}\r\n ref={elementRef}\r\n type={type || 'text'}\r\n value={value ?? ''}\r\n className={cls}\r\n tabIndex={readOnly || disabled ? -1 : 0}\r\n autoComplete={autoComplete}\r\n placeholder={disabled ? undefined : placeholder}\r\n disabled={disabled}\r\n readOnly={readOnly}\r\n onChange={(e: any) => onChange && onChange(e?.target?.value || '')}\r\n $activeErrorMessage={!!validationMessage && state !== States.Valid}\r\n required={required}\r\n pattern={pattern}\r\n maxLength={maxLength}\r\n $withoutBorder={withoutBorder}\r\n {...rest}\r\n />\r\n <TooltipOverflow value={value} position={overflowTooltipPosition} input={elementRef} withArrow={true} maxWidth=\"100%\" size={size} align='end'>\r\n {value}\r\n </TooltipOverflow>\r\n\r\n {validationMessage && (\r\n <ValidationMessage className={size || ''} type={state ?? States.Invalid}>\r\n {state === States.Valid ? <SystemIcons.CheckMark color={COLORS.generateToken({componentType:'text', defaultVariant:'positive'}, theme)}/> :\r\n <SystemIcons.TechnicalWarning color={COLORS.generateToken({componentType:'text', defaultVariant:'critical'}, theme)}/>}\r\n <span>{validationMessage}</span>\r\n </ValidationMessage>\r\n )}\r\n {note && !disabled && (\r\n <NoteMessage className={size}>\r\n {note.icon}\r\n <span>{note.message}</span>\r\n </NoteMessage>\r\n )}\r\n </InputWrapper>\r\n </>\r\n );\r\n});\r\n\r\nexport default TextField;\r\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"TextField.js","names":["React","SystemIcons","COLORS","States","InputFieldStyling","InputWrapper","NoteMessage","ValidationMessage","useFocusVisibleRef","TooltipOverflow","useTheme","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","TextField","forwardRef","_ref","ref","id","disabled","readOnly","onChange","value","validationMessage","type","autoComplete","placeholder","required","pattern","maxLength","state","size","margin","overflowTooltipPosition","note","className","dataTestId","rest","_objectWithoutProperties","_excluded","elementRef","theme","useImperativeHandle","current","cls","Invalid","children","$readOnly","$disabled","$margin","onClick","e","preventDefault","_objectSpread","tabIndex","undefined","target","$activeErrorMessage","Valid","position","input","withArrow","maxWidth","align","CheckMark","color","generateToken","componentType","defaultVariant","TechnicalWarning","icon","message","propTypes","_pt","string","bool","func","number","oneOf"],"sources":["../../src/InputFields/TextField.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport {SystemIcons} from '../icons';\r\nimport {COLORS} from '../styles';\r\nimport {Size, States, Testable} from '../types';\r\nimport {InputFieldStyling, InputWrapper, NoteMessage, ValidationMessage} from './styling';\r\nimport {useFocusVisibleRef} from '../common';\r\nimport {TextFieldNote} from './types';\r\nimport TooltipOverflow from '../Tooltips/TooltipOverflow';\r\nimport { useTheme } from 'styled-components';\r\n\r\nexport type TextFieldProps =\r\n Testable & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'onChange' | 'value' | 'disabled' | 'id' | 'type' | 'readOnly' | 'autoComplete' | 'pattern' | 'maxLength'>\r\n & {\r\n /**\r\n * Optional. The ID of the text field.\r\n */\r\n id?: string;\r\n\r\n /**\r\n * Optional. A boolean indicating whether the text field is disabled.\r\n */\r\n disabled?: boolean;\r\n\r\n /**\r\n * Optional. A boolean indicating whether the text field is read-only.\r\n */\r\n readOnly?: boolean;\r\n\r\n /**\r\n * Optional. A function to be called when the text in the text field changes.\r\n * It should take a string representing the new text.\r\n */\r\n onChange?: (text: string) => void;\r\n\r\n /**\r\n * Optional. The current value of the text field.\r\n */\r\n value?: string;\r\n\r\n /**\r\n * Optional. The validation message to be displayed when the text field is in an error state.\r\n */\r\n validationMessage?: string;\r\n\r\n /**\r\n * Optional. The type of the text field. Can be any valid HTML input type.\r\n */\r\n type?: string;\r\n\r\n /**\r\n * Optional. The state of the text field. Can be 'Invalid' or 'Valid'.\r\n */\r\n state?: States.Invalid | States.Valid;\r\n\r\n /**\r\n * Optional. The autocomplete attribute of the text field. Can be any valid HTML autocomplete value.\r\n */\r\n autoComplete?: string;\r\n\r\n /**\r\n * Optional. The placeholder text to be displayed in the text field when it is empty.\r\n */\r\n placeholder?: string;\r\n\r\n /**\r\n * Optional. A boolean indicating whether the text field is required.\r\n */\r\n required?: boolean;\r\n\r\n /**\r\n * Optional. The pattern attribute of the text field. Can be any valid HTML pattern value.\r\n */\r\n pattern?: string;\r\n\r\n /**\r\n * Optional. The maximum length of the text that can be entered in the text field.\r\n */\r\n maxLength?: number;\r\n\r\n /**\r\n * Optional. The position of the overflow tooltip. Can be 'top' or 'bottom'.\r\n */\r\n overflowTooltipPosition?: 'top' | 'bottom';\r\n\r\n /**\r\n * Optional. The size of the text field. Can be 'Small' or 'Medium'.\r\n */\r\n size?: Size.Small | Size.Medium;\r\n\r\n /**\r\n * Optional. The margin of the text field. Can be any valid CSS margin value.\r\n */\r\n margin?: string;\r\n\r\n /**\r\n * Optional. A note to be displayed below the text field.\r\n */\r\n note?: TextFieldNote;\r\n};\r\n\r\nconst TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(({\r\n id,\r\n disabled,\r\n readOnly,\r\n onChange,\r\n value,\r\n validationMessage,\r\n type,\r\n autoComplete,\r\n placeholder,\r\n required,\r\n pattern,\r\n maxLength,\r\n state,\r\n size,\r\n margin,\r\n overflowTooltipPosition,\r\n note,\r\n className,\r\n dataTestId,\r\n ...rest\r\n }: TextFieldProps, ref) => {\r\n const elementRef = useFocusVisibleRef();\r\n const theme = useTheme();\r\n\r\n React.useImperativeHandle(ref, () => elementRef.current, [elementRef]);\r\n\r\n const cls = `${state || (validationMessage ? States.Invalid : '')} ${size || ''}`;\r\n\r\n return (\r\n <>\r\n <InputWrapper\r\n $readOnly={readOnly}\r\n $disabled={disabled}\r\n $margin={margin}\r\n onClick={(e: any) => {\r\n if (disabled || readOnly) {\r\n e.preventDefault();\r\n }\r\n }}>\r\n <InputFieldStyling\r\n id={id}\r\n data-testid={dataTestId}\r\n ref={elementRef}\r\n type={type || 'text'}\r\n value={value ?? ''}\r\n className={cls}\r\n tabIndex={readOnly || disabled ? -1 : 0}\r\n autoComplete={autoComplete}\r\n placeholder={disabled ? undefined : placeholder}\r\n disabled={disabled}\r\n readOnly={readOnly}\r\n onChange={(e: any) => onChange && onChange(e?.target?.value || '')}\r\n $activeErrorMessage={!!validationMessage && state !== States.Valid}\r\n required={required}\r\n pattern={pattern}\r\n maxLength={maxLength}\r\n {...rest}\r\n />\r\n <TooltipOverflow value={value} position={overflowTooltipPosition} input={elementRef} withArrow={true} maxWidth=\"100%\" size={size} align='end'>\r\n {value}\r\n </TooltipOverflow>\r\n\r\n {validationMessage && (\r\n <ValidationMessage className={size || ''} type={state ?? States.Invalid}>\r\n {state === States.Valid ? <SystemIcons.CheckMark color={COLORS.generateToken({componentType:'text', defaultVariant:'positive'}, theme)}/> :\r\n <SystemIcons.TechnicalWarning color={COLORS.generateToken({componentType:'text', defaultVariant:'critical'}, theme)}/>}\r\n <span>{validationMessage}</span>\r\n </ValidationMessage>\r\n )}\r\n {note && !disabled && (\r\n <NoteMessage className={size}>\r\n {note.icon}\r\n <span>{note.message}</span>\r\n </NoteMessage>\r\n )}\r\n </InputWrapper>\r\n </>\r\n );\r\n});\r\n\r\nexport default TextField;\r\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -51,10 +51,7 @@ const InputFieldStyling = exports.InputFieldStyling = _styledComponents.default.
|
|
|
51
51
|
|
|
52
52
|
border: 0;
|
|
53
53
|
-webkit-appearance: none;
|
|
54
|
-
${props =>
|
|
55
|
-
-moz-box-shadow: none;
|
|
56
|
-
box-shadow: none;
|
|
57
|
-
` : `-webkit-box-shadow: inset 0px 0px 0px 1px ${_styles.COLORS.generateToken({
|
|
54
|
+
${props => `-webkit-box-shadow: inset 0px 0px 0px 1px ${_styles.COLORS.generateToken({
|
|
58
55
|
componentType: 'border',
|
|
59
56
|
defaultVariant: 'default'
|
|
60
57
|
}, props.theme)};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styling.cjs","names":["_TooltipStyles","require","_styledComponents","_interopRequireWildcard","_styles","_typography","_types","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","InputWrapper","exports","styled","div","props","$readOnly","$disabled","$margin","TooltipTrigger","readOnlyState","css","COLORS","generateToken","componentType","state","theme","defaultVariant","activeErrorMessageState","InputFieldStyling","input","$withoutBorder","$extraRightPadding","ComponentSStyling","ComponentTextStyle","Italic","BREAKPOINTS","MEDIUM","ComponentMStyling","$activeErrorMessage","$suppressReadOnlyStyles","focusStyles","Warning","ComponentXXSStyling","Regular","ComponentXSStyling","ErrorMessage","getStateColor","type","States","Valid","Default","ValidationMessage","NoteMessage","AutofilledMessage","StyledIcon","SearchIconWrapper"],"sources":["../../src/InputFields/styling.ts"],"sourcesContent":["import { TooltipTrigger } from '../Tooltips/TooltipStyles';\r\nimport styled, { css } from 'styled-components';\r\nimport { BREAKPOINTS, COLORS, focusStyles } from '../styles';\r\nimport { ComponentXXSStyling, ComponentTextStyle, ComponentSStyling, ComponentMStyling, ComponentXSStyling } from '../styles/typography';\r\nimport {Size, States} from '../types';\r\n\r\nexport const InputWrapper = styled.div<{ $readOnly?: boolean; $disabled?: boolean; $margin?: string }>`\r\n outline: none;\r\n ${(props) => (props.$readOnly || props.$disabled ? 'cursor: not-allowed;' : '')};\r\n ${(props) => (props.$margin ? `margin: ${props.$margin};` : '')}\r\n position: relative;\r\n \r\n ${TooltipTrigger('hover')}\r\n\r\n`;\r\n\r\nexport const readOnlyState = css`\r\n background-color: ${props => COLORS.generateToken({componentType:'bg-surface', state:'disabled'}, props.theme)};\r\n box-shadow: inset 0 0 0 1px ${props => COLORS.generateToken({componentType:'border', defaultVariant:'default'}, props.theme)} !important;\r\n color: ${props => COLORS.generateToken({componentType: 'text', defaultVariant:'subtle'}, props.theme)} !important;\r\n pointer-events: none;\r\n outline: none;\r\n cursor: not-allowed;\r\n`;\r\nexport const activeErrorMessageState = css`\r\n box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({ componentType: 'border', defaultVariant: 'critical' }, props.theme)};\r\n`;\r\n\r\nconst InputFieldStyling = styled.input<{\r\n $activeErrorMessage?: boolean;\r\n $active?: boolean;\r\n $withoutBorder?: boolean;\r\n $size?: string;\r\n $suppressReadOnlyStyles?: boolean;\r\n $extraRightPadding?: number;\r\n}>`\r\n height: 48px;\r\n width: 100%;\r\n border-radius: 4px;\r\n margin-bottom: 4px;\r\n\r\n border: 0;\r\n -webkit-appearance: none;\r\n ${(props) =>\r\n props.$withoutBorder\r\n ? `-webkit-box-shadow: none;\r\n -moz-box-shadow: none;\r\n box-shadow: none;\r\n `\r\n : `-webkit-box-shadow: inset 0px 0px 0px 1px ${COLORS.generateToken({componentType: 'border', defaultVariant: 'default'}, props.theme)};\r\n -moz-box-shadow: inset 0px 0px 0px 1px ${COLORS.generateToken({componentType: 'border', defaultVariant: 'default'}, props.theme)};\r\n box-shadow: inset 0px 0px 0px 1px ${COLORS.generateToken({componentType: 'border', defaultVariant: 'default'}, props.theme)};`}\r\n background-color: ${props => COLORS.generateToken({ componentType: 'bg-surface', defaultVariant: 'default' }, props.theme)};\r\n box-sizing: border-box;\r\n padding: 0 ${props => 16 + (props.$extraRightPadding ?? 0)}px 0 16px !important;\r\n text-overflow: ellipsis;\r\n\r\n outline: none;\r\n overflow: hidden;\r\n position: relative;\r\n\r\n font-size: 16px;\r\n\r\n &::placeholder {\r\n ${props => ComponentSStyling(ComponentTextStyle.Italic, COLORS.generateToken({componentType:'text', defaultVariant: 'subtle'}, props.theme))}\r\n }\r\n\r\n ${BREAKPOINTS.MEDIUM} {\r\n font-size: 18px;\r\n line-height: 18px;\r\n height: 56px;\r\n padding: 0 16px !important;\r\n\r\n &::placeholder {\r\n ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.generateToken({componentType:'text', defaultVariant: 'subtle'}, props.theme))}\r\n }\r\n }\r\n\r\n &.small {\r\n font-size: 16px;\r\n height: 48px;\r\n &::placeholder {\r\n font-size: 16px;\r\n }\r\n }\r\n &.medium {\r\n font-size: 18px;\r\n height: 56px;\r\n &::placeholder {\r\n font-size: 18px;\r\n }\r\n }\r\n\r\n color: ${props => COLORS.generateToken({componentType: 'text'}, props.theme)} !important;\r\n\r\n ${(props) => (props.$activeErrorMessage ? activeErrorMessageState : '')}\r\n\r\n &:read-only:not(:disabled) {\r\n ${(props) => (props.$suppressReadOnlyStyles ? '' : readOnlyState)}\r\n }\r\n\r\n &:disabled {\r\n border: 1px solid ${props => COLORS.generateToken({componentType: 'border', state: 'disabled'}, props.theme)};\r\n pointer-events: none;\r\n box-shadow: none !important;\r\n outline: none;\r\n cursor: not-allowed;\r\n color: ${props => COLORS.generateToken({componentType: 'text', state: 'disabled'}, props.theme)} !important;\r\n }\r\n\r\n &:focus:not(.focus-visible) {\r\n box-shadow: inset 0px 0px 0px 2px ${props => COLORS.generateToken({componentType: 'border', defaultVariant: 'critical'}, props.theme)};\r\n }\r\n\r\n &.focus-visible {\r\n ${focusStyles}\r\n }\r\n\r\n &.invalid {\r\n box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({componentType: 'border', defaultVariant: 'critical'}, props.theme)};\r\n }\r\n &.valid {\r\n box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({componentType: 'border', defaultVariant: 'positive'}, props.theme)};\r\n }\r\n\r\n &:not(.placeholder) {\r\n line-height: 40px;\r\n }\r\n\r\n &:hover {\r\n box-shadow: inset 0px 0px 0px 2px ${props => COLORS.generateToken({componentType: 'border', state: 'hover'}, props.theme)};\r\n }\r\n\r\n &.active {\r\n box-shadow: inset 0px 0px 0px 2px ${props => COLORS.generateToken({componentType: 'border', state: 'active'}, props.theme)};\r\n }\r\n\r\n &.show-checkmark.valid {\r\n background-image: none;\r\n }\r\n\r\n &.show-checkmark.pending {\r\n background-image: none;\r\n }\r\n`;\r\n\r\nexport const Warning = styled.div`\r\n display: flex;\r\n align-items: center;\r\n margin-bottom: 4px;\r\n ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\r\n\r\n svg {\r\n width: 16px;\r\n height: 16px;\r\n }\r\n\r\n ${BREAKPOINTS.MEDIUM} {\r\n ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\r\n svg {\r\n width: 20px;\r\n height: 20px;\r\n }\r\n }\r\n\r\n &.small {\r\n ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\r\n svg {\r\n width: 16px;\r\n height: 16px;\r\n }\r\n }\r\n &.medium {\r\n ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\r\n svg {\r\n width: 20px;\r\n height: 20px;\r\n }\r\n }\r\n\r\n & * {\r\n vertical-align: middle;\r\n display: inline-block;\r\n }\r\n\r\n svg {\r\n margin-right: 4px;\r\n }\r\n`;\r\nexport const ErrorMessage = styled(Warning)`\r\n color: ${props => COLORS.generateToken({componentType:'text', defaultVariant: 'critical'}, props.theme)};\r\n`;\r\n\r\nconst getStateColor = (type: States, theme: any) => {\r\n if(type === States.Valid) \r\n return COLORS.generateToken({componentType: 'text', defaultVariant: 'positive'}, theme);\r\n else if (type === States.Default)\r\n return COLORS.generateToken({componentType: 'text', defaultVariant: 'default'}, theme);\r\n else \r\n return COLORS.generateToken({componentType: 'text', defaultVariant: 'critical'}, theme);\r\n};\r\n \r\nexport const ValidationMessage = styled(Warning)<{ type: States.Valid | States.Invalid | States.Default}>`\r\n color: ${(props) => getStateColor(props.type, props.theme)};\r\n`;\r\n\r\nexport const NoteMessage = styled(Warning)`\r\n color: ${props => COLORS.generateToken({componentType: 'text', defaultVariant: 'default'}, props.theme)};\r\n`;\r\nexport const AutofilledMessage = styled(Warning)`\r\n color: ${props => COLORS.generateToken({componentType: 'text', defaultVariant: 'subtle'}, props.theme)};\r\n`;\r\n\r\nexport { InputFieldStyling };\r\n\r\nexport const StyledIcon = styled.div`\r\n border-radius: 50%;\r\n`;\r\n\r\nexport const SearchIconWrapper = styled(StyledIcon)`\r\n position: absolute;\r\n border-radius: 50%;\r\n`;\r\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"styling.cjs","names":["_TooltipStyles","require","_styledComponents","_interopRequireWildcard","_styles","_typography","_types","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","InputWrapper","exports","styled","div","props","$readOnly","$disabled","$margin","TooltipTrigger","readOnlyState","css","COLORS","generateToken","componentType","state","theme","defaultVariant","activeErrorMessageState","InputFieldStyling","input","$extraRightPadding","ComponentSStyling","ComponentTextStyle","Italic","BREAKPOINTS","MEDIUM","ComponentMStyling","$activeErrorMessage","$suppressReadOnlyStyles","focusStyles","Warning","ComponentXXSStyling","Regular","ComponentXSStyling","ErrorMessage","getStateColor","type","States","Valid","Default","ValidationMessage","NoteMessage","AutofilledMessage","StyledIcon","SearchIconWrapper"],"sources":["../../src/InputFields/styling.ts"],"sourcesContent":["import { TooltipTrigger } from '../Tooltips/TooltipStyles';\r\nimport styled, { css } from 'styled-components';\r\nimport { BREAKPOINTS, COLORS, focusStyles } from '../styles';\r\nimport { ComponentXXSStyling, ComponentTextStyle, ComponentSStyling, ComponentMStyling, ComponentXSStyling } from '../styles/typography';\r\nimport {Size, States} from '../types';\r\n\r\nexport const InputWrapper = styled.div<{ $readOnly?: boolean; $disabled?: boolean; $margin?: string }>`\r\n outline: none;\r\n ${(props) => (props.$readOnly || props.$disabled ? 'cursor: not-allowed;' : '')};\r\n ${(props) => (props.$margin ? `margin: ${props.$margin};` : '')}\r\n position: relative;\r\n \r\n ${TooltipTrigger('hover')}\r\n\r\n`;\r\n\r\nexport const readOnlyState = css`\r\n background-color: ${props => COLORS.generateToken({componentType:'bg-surface', state:'disabled'}, props.theme)};\r\n box-shadow: inset 0 0 0 1px ${props => COLORS.generateToken({componentType:'border', defaultVariant:'default'}, props.theme)} !important;\r\n color: ${props => COLORS.generateToken({componentType: 'text', defaultVariant:'subtle'}, props.theme)} !important;\r\n pointer-events: none;\r\n outline: none;\r\n cursor: not-allowed;\r\n`;\r\nexport const activeErrorMessageState = css`\r\n box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({ componentType: 'border', defaultVariant: 'critical' }, props.theme)};\r\n`;\r\n\r\nconst InputFieldStyling = styled.input<{\r\n $activeErrorMessage?: boolean;\r\n $active?: boolean;\r\n $size?: string;\r\n $suppressReadOnlyStyles?: boolean;\r\n $extraRightPadding?: number;\r\n}>`\r\n height: 48px;\r\n width: 100%;\r\n border-radius: 4px;\r\n margin-bottom: 4px;\r\n\r\n border: 0;\r\n -webkit-appearance: none;\r\n ${(props) =>\r\n `-webkit-box-shadow: inset 0px 0px 0px 1px ${COLORS.generateToken({componentType: 'border', defaultVariant: 'default'}, props.theme)};\r\n -moz-box-shadow: inset 0px 0px 0px 1px ${COLORS.generateToken({componentType: 'border', defaultVariant: 'default'}, props.theme)};\r\n box-shadow: inset 0px 0px 0px 1px ${COLORS.generateToken({componentType: 'border', defaultVariant: 'default'}, props.theme)};`}\r\n background-color: ${props => COLORS.generateToken({ componentType: 'bg-surface', defaultVariant: 'default' }, props.theme)};\r\n box-sizing: border-box;\r\n padding: 0 ${props => 16 + (props.$extraRightPadding ?? 0)}px 0 16px !important;\r\n text-overflow: ellipsis;\r\n\r\n outline: none;\r\n overflow: hidden;\r\n position: relative;\r\n\r\n font-size: 16px;\r\n\r\n &::placeholder {\r\n ${props => ComponentSStyling(ComponentTextStyle.Italic, COLORS.generateToken({componentType:'text', defaultVariant: 'subtle'}, props.theme))}\r\n }\r\n\r\n ${BREAKPOINTS.MEDIUM} {\r\n font-size: 18px;\r\n line-height: 18px;\r\n height: 56px;\r\n padding: 0 16px !important;\r\n\r\n &::placeholder {\r\n ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.generateToken({componentType:'text', defaultVariant: 'subtle'}, props.theme))}\r\n }\r\n }\r\n\r\n &.small {\r\n font-size: 16px;\r\n height: 48px;\r\n &::placeholder {\r\n font-size: 16px;\r\n }\r\n }\r\n &.medium {\r\n font-size: 18px;\r\n height: 56px;\r\n &::placeholder {\r\n font-size: 18px;\r\n }\r\n }\r\n\r\n color: ${props => COLORS.generateToken({componentType: 'text'}, props.theme)} !important;\r\n\r\n ${(props) => (props.$activeErrorMessage ? activeErrorMessageState : '')}\r\n\r\n &:read-only:not(:disabled) {\r\n ${(props) => (props.$suppressReadOnlyStyles ? '' : readOnlyState)}\r\n }\r\n\r\n &:disabled {\r\n border: 1px solid ${props => COLORS.generateToken({componentType: 'border', state: 'disabled'}, props.theme)};\r\n pointer-events: none;\r\n box-shadow: none !important;\r\n outline: none;\r\n cursor: not-allowed;\r\n color: ${props => COLORS.generateToken({componentType: 'text', state: 'disabled'}, props.theme)} !important;\r\n }\r\n\r\n &:focus:not(.focus-visible) {\r\n box-shadow: inset 0px 0px 0px 2px ${props => COLORS.generateToken({componentType: 'border', defaultVariant: 'critical'}, props.theme)};\r\n }\r\n\r\n &.focus-visible {\r\n ${focusStyles}\r\n }\r\n\r\n &.invalid {\r\n box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({componentType: 'border', defaultVariant: 'critical'}, props.theme)};\r\n }\r\n &.valid {\r\n box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({componentType: 'border', defaultVariant: 'positive'}, props.theme)};\r\n }\r\n\r\n &:not(.placeholder) {\r\n line-height: 40px;\r\n }\r\n\r\n &:hover {\r\n box-shadow: inset 0px 0px 0px 2px ${props => COLORS.generateToken({componentType: 'border', state: 'hover'}, props.theme)};\r\n }\r\n\r\n &.active {\r\n box-shadow: inset 0px 0px 0px 2px ${props => COLORS.generateToken({componentType: 'border', state: 'active'}, props.theme)};\r\n }\r\n\r\n &.show-checkmark.valid {\r\n background-image: none;\r\n }\r\n\r\n &.show-checkmark.pending {\r\n background-image: none;\r\n }\r\n`;\r\n\r\nexport const Warning = styled.div`\r\n display: flex;\r\n align-items: center;\r\n margin-bottom: 4px;\r\n ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\r\n\r\n svg {\r\n width: 16px;\r\n height: 16px;\r\n }\r\n\r\n ${BREAKPOINTS.MEDIUM} {\r\n ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\r\n svg {\r\n width: 20px;\r\n height: 20px;\r\n }\r\n }\r\n\r\n &.small {\r\n ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\r\n svg {\r\n width: 16px;\r\n height: 16px;\r\n }\r\n }\r\n &.medium {\r\n ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\r\n svg {\r\n width: 20px;\r\n height: 20px;\r\n }\r\n }\r\n\r\n & * {\r\n vertical-align: middle;\r\n display: inline-block;\r\n }\r\n\r\n svg {\r\n margin-right: 4px;\r\n }\r\n`;\r\nexport const ErrorMessage = styled(Warning)`\r\n color: ${props => COLORS.generateToken({componentType:'text', defaultVariant: 'critical'}, props.theme)};\r\n`;\r\n\r\nconst getStateColor = (type: States, theme: any) => {\r\n if(type === States.Valid) \r\n return COLORS.generateToken({componentType: 'text', defaultVariant: 'positive'}, theme);\r\n else if (type === States.Default)\r\n return COLORS.generateToken({componentType: 'text', defaultVariant: 'default'}, theme);\r\n else \r\n return COLORS.generateToken({componentType: 'text', defaultVariant: 'critical'}, theme);\r\n};\r\n \r\nexport const ValidationMessage = styled(Warning)<{ type: States.Valid | States.Invalid | States.Default}>`\r\n color: ${(props) => getStateColor(props.type, props.theme)};\r\n`;\r\n\r\nexport const NoteMessage = styled(Warning)`\r\n color: ${props => COLORS.generateToken({componentType: 'text', defaultVariant: 'default'}, props.theme)};\r\n`;\r\nexport const AutofilledMessage = styled(Warning)`\r\n color: ${props => COLORS.generateToken({componentType: 'text', defaultVariant: 'subtle'}, props.theme)};\r\n`;\r\n\r\nexport { InputFieldStyling };\r\n\r\nexport const StyledIcon = styled.div`\r\n border-radius: 50%;\r\n`;\r\n\r\nexport const SearchIconWrapper = styled(StyledIcon)`\r\n position: absolute;\r\n border-radius: 50%;\r\n`;\r\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -9,7 +9,6 @@ export declare const activeErrorMessageState: import("styled-components").RuleSe
|
|
|
9
9
|
declare const InputFieldStyling: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {
|
|
10
10
|
$activeErrorMessage?: boolean;
|
|
11
11
|
$active?: boolean;
|
|
12
|
-
$withoutBorder?: boolean;
|
|
13
12
|
$size?: string;
|
|
14
13
|
$suppressReadOnlyStyles?: boolean;
|
|
15
14
|
$extraRightPadding?: number;
|
|
@@ -43,10 +43,7 @@ const InputFieldStyling = styled.input`
|
|
|
43
43
|
|
|
44
44
|
border: 0;
|
|
45
45
|
-webkit-appearance: none;
|
|
46
|
-
${props =>
|
|
47
|
-
-moz-box-shadow: none;
|
|
48
|
-
box-shadow: none;
|
|
49
|
-
` : `-webkit-box-shadow: inset 0px 0px 0px 1px ${COLORS.generateToken({
|
|
46
|
+
${props => `-webkit-box-shadow: inset 0px 0px 0px 1px ${COLORS.generateToken({
|
|
50
47
|
componentType: 'border',
|
|
51
48
|
defaultVariant: 'default'
|
|
52
49
|
}, props.theme)};
|