npm - @laerdal/life-react-components - Versions diffs - 6.1.0 → 6.1.2-dev.1 - Mend

@laerdal/life-react-components 6.1.0 → 6.1.2-dev.1

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.

Files changed (28) hide show

package/dist/InputFields/RichTextField.cjs +19 -3
package/dist/InputFields/RichTextField.cjs.map +1 -1
package/dist/InputFields/RichTextField.js +19 -3
package/dist/InputFields/RichTextField.js.map +1 -1
package/dist/List/ListRow.cjs +5 -1
package/dist/List/ListRow.cjs.map +1 -1
package/dist/List/ListRow.js +5 -1
package/dist/List/ListRow.js.map +1 -1
package/dist/Modals/ModalContainer.cjs +0 -3
package/dist/Modals/ModalContainer.cjs.map +1 -1
package/dist/Modals/ModalContainer.d.ts +0 -1
package/dist/Modals/ModalContainer.js +0 -3
package/dist/Modals/ModalContainer.js.map +1 -1
package/dist/Modals/ModalDialog.cjs +1 -7
package/dist/Modals/ModalDialog.cjs.map +1 -1
package/dist/Modals/ModalDialog.d.ts +0 -2
package/dist/Modals/ModalDialog.js +1 -7
package/dist/Modals/ModalDialog.js.map +1 -1
package/dist/Popover/Popover.cjs +36 -16
package/dist/Popover/Popover.cjs.map +1 -1
package/dist/Popover/Popover.d.ts +4 -4
package/dist/Popover/Popover.js +36 -16
package/dist/Popover/Popover.js.map +1 -1
package/dist/Table/Table.cjs +9 -3
package/dist/Table/Table.cjs.map +1 -1
package/dist/Table/Table.js +9 -3
package/dist/Table/Table.js.map +1 -1
package/package.json +1 -1

package/dist/InputFields/RichTextField.cjs CHANGED Viewed

@@ -26,7 +26,8 @@ const RichTextFieldContainer = exports.RichTextFieldContainer = _styledComponent
   .quill {
     width: 100%;
     margin-bottom: 4px;
-    overflow: hidden;
+    overflow: visible;
+    position: relative;
     box-shadow: inset 0 0 0 1px ${props => _styles.COLORS.generateToken({
   componentType: 'border',
@@ -103,6 +104,20 @@ const RichTextFieldContainer = exports.RichTextFieldContainer = _styledComponent
   componentType: 'border',
   defaultVariant: 'subtle'
 }, props.theme)};
+    position: relative;
+    z-index: 1;
+  }
+  .ql-tooltip {
+    z-index: 1000 !important;
+    position: absolute !important;
+    left: 0 !important;
+    right: auto !important;
+    transform: none !important;
+  }
+  .ql-tooltip.ql-editing {
+    left: 8px !important;
   }
   .quill.valid .ql-toolbar,
@@ -119,7 +134,7 @@ const RichTextFieldContainer = exports.RichTextFieldContainer = _styledComponent
   .ql-container.ql-snow {
     border: none;
-    overflow-y: hidden;
+    overflow-y: visible;
     padding: 8px;
   }
@@ -135,12 +150,13 @@ const RichTextFieldContainer = exports.RichTextFieldContainer = _styledComponent
     .quill {
       flex: none;
-      overflow: initial;
+      overflow: visible;
     }
     .ql-container {
       flex: none;
       resize: vertical;
+      overflow-y: hidden;
     }
     .ql-editor {

package/dist/InputFields/RichTextField.cjs.map CHANGED Viewed

	@@ -1 +1 @@
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-new/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	+ {"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-new/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: visible;\r\n position: relative;\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 position: relative;\r\n z-index: 1;\r\n }\r\n\r\n .ql-tooltip {\r\n z-index: 1000 !important;\r\n position: absolute !important;\r\n left: 0 !important;\r\n right: auto !important;\r\n transform: none !important;\r\n }\r\n\r\n .ql-tooltip.ql-editing {\r\n left: 8px !important;\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: visible;\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: visible;\r\n }\r\n\r\n .ql-container {\r\n flex: none;\r\n resize: vertical;\r\n overflow-y: hidden;\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":[]}

package/dist/InputFields/RichTextField.js CHANGED Viewed

@@ -17,7 +17,8 @@ export const RichTextFieldContainer = styled.div`
   .quill {
     width: 100%;
     margin-bottom: 4px;
-    overflow: hidden;
+    overflow: visible;
+    position: relative;
     box-shadow: inset 0 0 0 1px ${props => COLORS.generateToken({
   componentType: 'border',
@@ -94,6 +95,20 @@ export const RichTextFieldContainer = styled.div`
   componentType: 'border',
   defaultVariant: 'subtle'
 }, props.theme)};
+    position: relative;
+    z-index: 1;
+  }
+  .ql-tooltip {
+    z-index: 1000 !important;
+    position: absolute !important;
+    left: 0 !important;
+    right: auto !important;
+    transform: none !important;
+  }
+  .ql-tooltip.ql-editing {
+    left: 8px !important;
   }
   .quill.valid .ql-toolbar,
@@ -110,7 +125,7 @@ export const RichTextFieldContainer = styled.div`
   .ql-container.ql-snow {
     border: none;
-    overflow-y: hidden;
+    overflow-y: visible;
     padding: 8px;
   }
@@ -126,12 +141,13 @@ export const RichTextFieldContainer = styled.div`
     .quill {
       flex: none;
-      overflow: initial;
+      overflow: visible;
     }
     .ql-container {
       flex: none;
       resize: vertical;
+      overflow-y: hidden;
     }
     .ql-editor {

package/dist/InputFields/RichTextField.js.map CHANGED Viewed

	@@ -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","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-new/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	+ {"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-new/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: visible;\r\n position: relative;\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 position: relative;\r\n z-index: 1;\r\n }\r\n\r\n .ql-tooltip {\r\n z-index: 1000 !important;\r\n position: absolute !important;\r\n left: 0 !important;\r\n right: auto !important;\r\n transform: none !important;\r\n }\r\n\r\n .ql-tooltip.ql-editing {\r\n left: 8px !important;\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: visible;\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: visible;\r\n }\r\n\r\n .ql-container {\r\n flex: none;\r\n resize: vertical;\r\n overflow-y: hidden;\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":[]}

package/dist/List/ListRow.cjs CHANGED Viewed

@@ -231,13 +231,16 @@ const ListRow = _ref => {
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   const [inAction, setInAction] = React.useState(false);
   const handleKeyDown = e => {
-    if (e.key === 'Enter') {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
       action && action();
     }
   };
   const rowClassName = (inAction ? 'in-action ' : '').concat(disabled ? 'disabled ' : '').concat(!!action ? 'interactive ' : '').concat('list-item-row ').concat(`${variant} `).concat(`${size}`).concat(className ? ` ${className}` : '');
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Row, _objectSpread(_objectSpread({
     tabIndex: !action || disabled ? -1 : 0,
+    role: action ? 'button' : 'listitem',
+    "aria-disabled": disabled || undefined,
     className: rowClassName,
     onMouseDown: _common.defaultOnMouseDownHandler,
     onKeyDown: e => !disabled && handleKeyDown(e),
@@ -248,6 +251,7 @@ const ListRow = _ref => {
   }, rest), {}, {
     children: [!!icon && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: 'list-item-icon',
+      "aria-hidden": "true",
       children: icon
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: 'list-item-content',

package/dist/List/ListRow.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ListRow.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_interopRequireDefault","_styles","_Tooltips","_Dropdown","_icons","_types","_common","_Button","_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","Row","styled","div","props","COLORS","generateToken","componentType","defaultVariant","theme","state","Z_INDEXES","hover","active","focusStyles","ComponentSStyling","ComponentTextStyle","Regular","ComponentMStyling","ComponentLStyling","ComponentXXSStyling","ComponentXSStyling","RightIcon","ListRow","_ref","size","Size","Medium","variant","icon","mainText","secondaryText","dropdown","note","noteTooltip","disabled","action","rightSideIcon","rightSideAction","rightSideIconDisabled","className","rest","_objectWithoutProperties2","inAction","setInAction","useState","handleKeyDown","key","rowClassName","concat","jsxs","tabIndex","onMouseDown","defaultOnMouseDownHandler","onKeyDown","onClick","children","jsx","Fragment","TooltipWrapper","label","Large","Small","XSmall","position","withArrow","onMouseEnter","onMouseLeave","DropdownButton","type","SystemIcons","ArrowDropDown","MoreVertical","IconButton","shape","propTypes","_propTypes","oneOf","node","string","isRequired","oneOfType","bool","func","_default","exports"],"sources":["../../src/List/ListRow.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport {COLORS, ComponentTextStyle, focusStyles} from '../styles';\r\n\r\nimport {\r\n ComponentLStyling,\r\n ComponentMStyling,\r\n ComponentSStyling,\r\n ComponentXSStyling,\r\n ComponentXXSStyling\r\n} from '../styles';\r\nimport {DropdownButtonProps} from '../Dropdown/DropdownButtonTypes';\r\nimport {TooltipWrapper} from '../Tooltips';\r\nimport {DropdownButton} from '../Dropdown';\r\nimport {SystemIcons} from '../icons';\r\nimport {Size} from '../types';\r\nimport {Z_INDEXES} from '../styles';\r\nimport {defaultOnMouseDownHandler} from '../common';\r\nimport {IconButton} from '../Button';\r\n\r\nconst Row = styled.div`\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n justify-content: center;\r\n border-bottom: 1px solid ${props => COLORS.generateToken({ componentType:'border', defaultVariant:'subtle' }, props.theme)};\r\n box-sizing: border-box;\r\n\r\n color: ${props => COLORS.generateToken({componentType:'text',defaultVariant:'subtle'}, props.theme)};\r\n background-color: ${props => COLORS.generateToken({componentType:'bg-surface', defaultVariant:'default'}, props.theme)};\r\n\r\n\r\n cursor: default;\r\n\r\n &.interactive {\r\n cursor: pointer;\r\n }\r\n\r\n &.interactive.disabled {\r\n cursor: not-allowed;\r\n }\r\n\r\n &.interactive:hover:not(.in-action):not(.disabled) {\r\n background-color: ${props => COLORS.generateToken({ componentType:'bg-surface', state:'hover' }, props.theme)};\r\n color: ${props => COLORS.generateToken({ componentType: 'text', state:'hover' }, props.theme)};\r\n z-index: ${Z_INDEXES.hover};\r\n }\r\n\r\n &.interactive:active:not(.in-action):not(.disabled) {\r\n background-color: ${props => COLORS.generateToken({ componentType:'bg-surface', state:'active' }, props.theme)};\r\n color: ${props => COLORS.generateToken({ componentType:'text', state:'active' }, props.theme)};\r\n z-index: ${Z_INDEXES.active};\r\n }\r\n\r\n &.interactive:focus {\r\n ${focusStyles}\r\n }\r\n\r\n &.disabled {\r\n .list-item-icon, .list-item-content, .list-item-note, .list-item-actions {\r\n color: ${props => COLORS.generateToken({ componentType: 'text', state: 'disabled' }, props.theme)};\r\n }\r\n }\r\n\r\n\r\n &.small {\r\n min-height: 48px;\r\n padding: 0 8px;\r\n\r\n .list-item-icon {\r\n margin-right: 8px;\r\n }\r\n\r\n .list-item-main-text {\r\n ${ComponentSStyling(ComponentTextStyle.Regular, null)}\r\n }\r\n\r\n .list-item-actions {\r\n margin-right: -8px;\r\n }\r\n }\r\n\r\n &.medium {\r\n min-height: 56px;\r\n padding: 0 12px;\r\n\r\n .list-item-icon {\r\n margin-right: 12px;\r\n }\r\n\r\n .list-item-main-text {\r\n ${ComponentMStyling(ComponentTextStyle.Regular, null)}\r\n }\r\n\r\n .list-item-actions {\r\n margin-right: -12px;\r\n }\r\n }\r\n\r\n &.large {\r\n min-height: 64px;\r\n padding: 0 16px;\r\n\r\n .list-item-icon {\r\n margin-right: 16px;\r\n }\r\n\r\n .list-item-main-text {\r\n ${ComponentLStyling(ComponentTextStyle.Regular, null)}\r\n }\r\n\r\n .list-item-actions {\r\n margin-right: -16px;\r\n }\r\n }\r\n\r\n &.overlay {\r\n padding: 0 4px;\r\n\r\n .list-item-actions {\r\n margin-right: -4px;\r\n }\r\n }\r\n\r\n .list-item-icon {\r\n width: 24px;\r\n height: 24px;\r\n\r\n svg {\r\n width: 24px;\r\n height: 24px;\r\n }\r\n }\r\n\r\n .list-item-content {\r\n flex-grow: 1;\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n\r\n .list-item-main-text {\r\n }\r\n\r\n .list-item-secondary-text {\r\n ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\r\n }\r\n\r\n .list-item-note {\r\n color: ${props => COLORS.generateToken({componentType:'text',defaultVariant:'subtle'}, props.theme)};\r\n word-break: initial;\r\n ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\r\n }\r\n\r\n .list-item-note.with-tooltip {\r\n cursor: pointer;\r\n\r\n > div {\r\n text-decoration-line: underline;\r\n text-decoration-style: dashed;\r\n text-underline-offset: 1px;\r\n text-decoration-thickness: 1px;\r\n }\r\n }\r\n\r\n .list-item-actions {\r\n display: flex;\r\n align-items: center;\r\n\r\n button div {\r\n background-color: transparent;\r\n }\r\n }\r\n`;\r\n\r\nconst RightIcon = styled.div`\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n min-height: 48px;\r\n min-width: 48px;\r\n`;\r\n\r\n\r\nexport interface ListRowProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' \| 'onMouseDown' \| 'onKeyDown'> {\r\n /** Size of the ListRow. Defaults to 'medium'. /\r\n size?: Size.Small \| Size.Medium \| Size.Large;\r\n /* Variant of the ListRow. Defaults to 'normal'. /\r\n variant?: 'normal' \| 'overlay';\r\n /* Optional. Icon to be shown on the left side of the ListRow. /\r\n icon?: React.ReactNode;\r\n /* Required. Main text of the ListRow /\r\n mainText: string;\r\n /* Optional. Secondary row shown under MainText /\r\n secondaryText?: string;\r\n /* Optional. Details of the DropdownButton shown on the right side of the ListRow. /\r\n dropdown?: Pick<DropdownButtonProps, 'items' \| 'onClick' \| 'disabled' \| 'width'>;\r\n /* Optional. Note to be shown on the right side of the component. /\r\n note?: string \| React.ReactNode;\r\n /* Optional. Tooltip of the Note shown on the right side of the component. /\r\n noteTooltip?: string;\r\n /* Optional. If disabled then styles are greyed out and user can not interact with dropdown or click on the ListRow. /\r\n disabled?: boolean;\r\n /* Optional. Action to be executed when user clicks the row. /\r\n action?: () => void;\r\n /* Optional. Icon of the IconButton to show on the right side of the component /\r\n rightSideIcon?: React.ReactNode;\r\n /* Optional. Action to be executed when user clicks on the IconButton on the right /\r\n rightSideAction?: () => void;\r\n /* Optional. If disabled user will not be able to interact with IconButton shown on the right side */\r\n rightSideIconDisabled?: boolean;\r\n};\r\n\r\nconst ListRow: React.FunctionComponent<ListRowProps> = ({\r\n size = Size.Medium,\r\n variant = 'normal',\r\n icon,\r\n mainText,\r\n secondaryText,\r\n dropdown,\r\n note,\r\n noteTooltip,\r\n disabled = false,\r\n action,\r\n rightSideIcon,\r\n rightSideAction,\r\n rightSideIconDisabled,\r\n className,\r\n ...rest\r\n }: ListRowProps) => {\r\n\r\n const [inAction, setInAction] = React.useState<Boolean>(false);\r\n\r\n const handleKeyDown = (e: any) => {\r\n if (e.key === 'Enter') {\r\n action && action()\r\n }\r\n }\r\n\r\n const rowClassName = (inAction ? 'in-action ' : '')\r\n .concat(disabled ? 'disabled ' : '')\r\n .concat(!!action ? 'interactive ' : '')\r\n .concat('list-item-row ')\r\n .concat(`${variant} `)\r\n .concat(`${size}`)\r\n .concat(className ? ` ${className}` : '');\r\n\r\n return (\r\n <Row tabIndex={!action \|\| disabled ? -1 : 0}\r\n className={rowClassName}\r\n onMouseDown={defaultOnMouseDownHandler}\r\n onKeyDown={(e) => !disabled && handleKeyDown(e)}\r\n onClick={e => {\r\n !disabled && action && action();\r\n }}\r\n data-hj-suppress\r\n {...rest}>\r\n {\r\n !!icon &&\r\n <div className={'list-item-icon'}>{icon}</div>\r\n }\r\n <div className={'list-item-content'}>\r\n <div className={'list-item-main-text'}>{mainText}</div>\r\n {!!secondaryText && <div className={'list-item-secondary-text'}>{secondaryText}</div>}\r\n </div>\r\n {\r\n !!note &&\r\n <>\r\n {\r\n !!noteTooltip &&\r\n <div className={'list-item-note with-tooltip'}>\r\n <TooltipWrapper label={noteTooltip}\r\n size={size === Size.Large ? Size.Medium : size === Size.Small ? Size.XSmall : Size.Small}\r\n position={'top'}\r\n tabIndex={disabled ? -1 : 0}\r\n withArrow={true}>\r\n {note}\r\n </TooltipWrapper>\r\n </div>\r\n }\r\n {\r\n !noteTooltip &&\r\n <div className={'list-item-note'}>\r\n {note}\r\n </div>\r\n }\r\n </>\r\n }\r\n {\r\n !!dropdown &&\r\n <div className={'list-item-actions'}\r\n onMouseEnter={() => setInAction(!dropdown?.disabled)}\r\n onMouseLeave={() => setInAction(false)}>\r\n <DropdownButton {...dropdown}\r\n type={'icon'}\r\n disabled={disabled \|\| dropdown.disabled}\r\n icon={variant === 'overlay'\r\n ? <SystemIcons.ArrowDropDown/>\r\n : <SystemIcons.MoreVertical/>}\r\n />\r\n </div>\r\n }\r\n {\r\n !!rightSideIcon &&\r\n <RightIcon className={'list-item-actions'}\r\n onMouseEnter={() => rightSideAction && setInAction(!dropdown?.disabled)}\r\n onMouseLeave={() => rightSideAction && setInAction(false)}>\r\n {\r\n rightSideAction &&\r\n <IconButton action={rightSideAction} variant='secondary' shape='circular'\r\n disabled={disabled \|\| rightSideIconDisabled}>\r\n {rightSideIcon}\r\n </IconButton>\r\n }\r\n {\r\n !rightSideAction && rightSideIcon\r\n }\r\n </RightIcon>\r\n }\r\n </Row>\r\n );\r\n};\r\n\r\nexport default ListRow;\r\n\r\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"file":"ListRow.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_interopRequireDefault","_styles","_Tooltips","_Dropdown","_icons","_types","_common","_Button","_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","Row","styled","div","props","COLORS","generateToken","componentType","defaultVariant","theme","state","Z_INDEXES","hover","active","focusStyles","ComponentSStyling","ComponentTextStyle","Regular","ComponentMStyling","ComponentLStyling","ComponentXXSStyling","ComponentXSStyling","RightIcon","ListRow","_ref","size","Size","Medium","variant","icon","mainText","secondaryText","dropdown","note","noteTooltip","disabled","action","rightSideIcon","rightSideAction","rightSideIconDisabled","className","rest","_objectWithoutProperties2","inAction","setInAction","useState","handleKeyDown","key","preventDefault","rowClassName","concat","jsxs","tabIndex","role","undefined","onMouseDown","defaultOnMouseDownHandler","onKeyDown","onClick","children","jsx","Fragment","TooltipWrapper","label","Large","Small","XSmall","position","withArrow","onMouseEnter","onMouseLeave","DropdownButton","type","SystemIcons","ArrowDropDown","MoreVertical","IconButton","shape","propTypes","_propTypes","oneOf","node","string","isRequired","oneOfType","bool","func","_default","exports"],"sources":["../../src/List/ListRow.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport {COLORS, ComponentTextStyle, focusStyles} from '../styles';\r\n\r\nimport {\r\n ComponentLStyling,\r\n ComponentMStyling,\r\n ComponentSStyling,\r\n ComponentXSStyling,\r\n ComponentXXSStyling\r\n} from '../styles';\r\nimport {DropdownButtonProps} from '../Dropdown/DropdownButtonTypes';\r\nimport {TooltipWrapper} from '../Tooltips';\r\nimport {DropdownButton} from '../Dropdown';\r\nimport {SystemIcons} from '../icons';\r\nimport {Size} from '../types';\r\nimport {Z_INDEXES} from '../styles';\r\nimport {defaultOnMouseDownHandler} from '../common';\r\nimport {IconButton} from '../Button';\r\n\r\nconst Row = styled.div`\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n justify-content: center;\r\n border-bottom: 1px solid ${props => COLORS.generateToken({ componentType:'border', defaultVariant:'subtle' }, props.theme)};\r\n box-sizing: border-box;\r\n\r\n color: ${props => COLORS.generateToken({componentType:'text',defaultVariant:'subtle'}, props.theme)};\r\n background-color: ${props => COLORS.generateToken({componentType:'bg-surface', defaultVariant:'default'}, props.theme)};\r\n\r\n\r\n cursor: default;\r\n\r\n &.interactive {\r\n cursor: pointer;\r\n }\r\n\r\n &.interactive.disabled {\r\n cursor: not-allowed;\r\n }\r\n\r\n &.interactive:hover:not(.in-action):not(.disabled) {\r\n background-color: ${props => COLORS.generateToken({ componentType:'bg-surface', state:'hover' }, props.theme)};\r\n color: ${props => COLORS.generateToken({ componentType: 'text', state:'hover' }, props.theme)};\r\n z-index: ${Z_INDEXES.hover};\r\n }\r\n\r\n &.interactive:active:not(.in-action):not(.disabled) {\r\n background-color: ${props => COLORS.generateToken({ componentType:'bg-surface', state:'active' }, props.theme)};\r\n color: ${props => COLORS.generateToken({ componentType:'text', state:'active' }, props.theme)};\r\n z-index: ${Z_INDEXES.active};\r\n }\r\n\r\n &.interactive:focus {\r\n ${focusStyles}\r\n }\r\n\r\n &.disabled {\r\n .list-item-icon, .list-item-content, .list-item-note, .list-item-actions {\r\n color: ${props => COLORS.generateToken({ componentType: 'text', state: 'disabled' }, props.theme)};\r\n }\r\n }\r\n\r\n\r\n &.small {\r\n min-height: 48px;\r\n padding: 0 8px;\r\n\r\n .list-item-icon {\r\n margin-right: 8px;\r\n }\r\n\r\n .list-item-main-text {\r\n ${ComponentSStyling(ComponentTextStyle.Regular, null)}\r\n }\r\n\r\n .list-item-actions {\r\n margin-right: -8px;\r\n }\r\n }\r\n\r\n &.medium {\r\n min-height: 56px;\r\n padding: 0 12px;\r\n\r\n .list-item-icon {\r\n margin-right: 12px;\r\n }\r\n\r\n .list-item-main-text {\r\n ${ComponentMStyling(ComponentTextStyle.Regular, null)}\r\n }\r\n\r\n .list-item-actions {\r\n margin-right: -12px;\r\n }\r\n }\r\n\r\n &.large {\r\n min-height: 64px;\r\n padding: 0 16px;\r\n\r\n .list-item-icon {\r\n margin-right: 16px;\r\n }\r\n\r\n .list-item-main-text {\r\n ${ComponentLStyling(ComponentTextStyle.Regular, null)}\r\n }\r\n\r\n .list-item-actions {\r\n margin-right: -16px;\r\n }\r\n }\r\n\r\n &.overlay {\r\n padding: 0 4px;\r\n\r\n .list-item-actions {\r\n margin-right: -4px;\r\n }\r\n }\r\n\r\n .list-item-icon {\r\n width: 24px;\r\n height: 24px;\r\n\r\n svg {\r\n width: 24px;\r\n height: 24px;\r\n }\r\n }\r\n\r\n .list-item-content {\r\n flex-grow: 1;\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n\r\n .list-item-main-text {\r\n }\r\n\r\n .list-item-secondary-text {\r\n ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\r\n }\r\n\r\n .list-item-note {\r\n color: ${props => COLORS.generateToken({componentType:'text',defaultVariant:'subtle'}, props.theme)};\r\n word-break: initial;\r\n ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\r\n }\r\n\r\n .list-item-note.with-tooltip {\r\n cursor: pointer;\r\n\r\n > div {\r\n text-decoration-line: underline;\r\n text-decoration-style: dashed;\r\n text-underline-offset: 1px;\r\n text-decoration-thickness: 1px;\r\n }\r\n }\r\n\r\n .list-item-actions {\r\n display: flex;\r\n align-items: center;\r\n\r\n button div {\r\n background-color: transparent;\r\n }\r\n }\r\n`;\r\n\r\nconst RightIcon = styled.div`\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n min-height: 48px;\r\n min-width: 48px;\r\n`;\r\n\r\n\r\nexport interface ListRowProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' \| 'onMouseDown' \| 'onKeyDown'> {\r\n /** Size of the ListRow. Defaults to 'medium'. /\r\n size?: Size.Small \| Size.Medium \| Size.Large;\r\n /* Variant of the ListRow. Defaults to 'normal'. /\r\n variant?: 'normal' \| 'overlay';\r\n /* Optional. Icon to be shown on the left side of the ListRow. /\r\n icon?: React.ReactNode;\r\n /* Required. Main text of the ListRow /\r\n mainText: string;\r\n /* Optional. Secondary row shown under MainText /\r\n secondaryText?: string;\r\n /* Optional. Details of the DropdownButton shown on the right side of the ListRow. /\r\n dropdown?: Pick<DropdownButtonProps, 'items' \| 'onClick' \| 'disabled' \| 'width'>;\r\n /* Optional. Note to be shown on the right side of the component. /\r\n note?: string \| React.ReactNode;\r\n /* Optional. Tooltip of the Note shown on the right side of the component. /\r\n noteTooltip?: string;\r\n /* Optional. If disabled then styles are greyed out and user can not interact with dropdown or click on the ListRow. /\r\n disabled?: boolean;\r\n /* Optional. Action to be executed when user clicks the row. /\r\n action?: () => void;\r\n /* Optional. Icon of the IconButton to show on the right side of the component /\r\n rightSideIcon?: React.ReactNode;\r\n /* Optional. Action to be executed when user clicks on the IconButton on the right /\r\n rightSideAction?: () => void;\r\n /* Optional. If disabled user will not be able to interact with IconButton shown on the right side */\r\n rightSideIconDisabled?: boolean;\r\n};\r\n\r\nconst ListRow: React.FunctionComponent<ListRowProps> = ({\r\n size = Size.Medium,\r\n variant = 'normal',\r\n icon,\r\n mainText,\r\n secondaryText,\r\n dropdown,\r\n note,\r\n noteTooltip,\r\n disabled = false,\r\n action,\r\n rightSideIcon,\r\n rightSideAction,\r\n rightSideIconDisabled,\r\n className,\r\n ...rest\r\n }: ListRowProps) => {\r\n\r\n const [inAction, setInAction] = React.useState<Boolean>(false);\r\n\r\n const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\r\n if (e.key === 'Enter' \|\| e.key === ' ') {\r\n e.preventDefault();\r\n action && action();\r\n }\r\n }\r\n\r\n const rowClassName = (inAction ? 'in-action ' : '')\r\n .concat(disabled ? 'disabled ' : '')\r\n .concat(!!action ? 'interactive ' : '')\r\n .concat('list-item-row ')\r\n .concat(`${variant} `)\r\n .concat(`${size}`)\r\n .concat(className ? ` ${className}` : '');\r\n\r\n return (\r\n <Row tabIndex={!action \|\| disabled ? -1 : 0}\r\n role={action ? 'button' : 'listitem'}\r\n aria-disabled={disabled \|\| undefined}\r\n className={rowClassName}\r\n onMouseDown={defaultOnMouseDownHandler}\r\n onKeyDown={(e) => !disabled && handleKeyDown(e)}\r\n onClick={e => {\r\n !disabled && action && action();\r\n }}\r\n data-hj-suppress\r\n {...rest}>\r\n {\r\n !!icon &&\r\n <div className={'list-item-icon'} aria-hidden=\"true\">{icon}</div>\r\n }\r\n <div className={'list-item-content'}>\r\n <div className={'list-item-main-text'}>{mainText}</div>\r\n {!!secondaryText && <div className={'list-item-secondary-text'}>{secondaryText}</div>}\r\n </div>\r\n {\r\n !!note &&\r\n <>\r\n {\r\n !!noteTooltip &&\r\n <div className={'list-item-note with-tooltip'}>\r\n <TooltipWrapper label={noteTooltip}\r\n size={size === Size.Large ? Size.Medium : size === Size.Small ? Size.XSmall : Size.Small}\r\n position={'top'}\r\n tabIndex={disabled ? -1 : 0}\r\n withArrow={true}>\r\n {note}\r\n </TooltipWrapper>\r\n </div>\r\n }\r\n {\r\n !noteTooltip &&\r\n <div className={'list-item-note'}>\r\n {note}\r\n </div>\r\n }\r\n </>\r\n }\r\n {\r\n !!dropdown &&\r\n <div className={'list-item-actions'}\r\n onMouseEnter={() => setInAction(!dropdown?.disabled)}\r\n onMouseLeave={() => setInAction(false)}>\r\n <DropdownButton {...dropdown}\r\n type={'icon'}\r\n disabled={disabled \|\| dropdown.disabled}\r\n icon={variant === 'overlay'\r\n ? <SystemIcons.ArrowDropDown/>\r\n : <SystemIcons.MoreVertical/>}\r\n />\r\n </div>\r\n }\r\n {\r\n !!rightSideIcon &&\r\n <RightIcon className={'list-item-actions'}\r\n onMouseEnter={() => rightSideAction && setInAction(!dropdown?.disabled)}\r\n onMouseLeave={() => rightSideAction && setInAction(false)}>\r\n {\r\n rightSideAction &&\r\n <IconButton action={rightSideAction} variant='secondary' shape='circular'\r\n disabled={disabled \|\| rightSideIconDisabled}>\r\n {rightSideIcon}\r\n </IconButton>\r\n }\r\n {\r\n !rightSideAction && rightSideIcon\r\n }\r\n </RightIcon>\r\n }\r\n </Row>\r\n );\r\n};\r\n\r\nexport default ListRow;\r\n\r\n"],"mappings":"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","ignoreList":[]}

package/dist/List/ListRow.js CHANGED Viewed

@@ -224,13 +224,16 @@ const ListRow = _ref => {
     rest = _objectWithoutProperties(_ref, _excluded);
   const [inAction, setInAction] = React.useState(false);
   const handleKeyDown = e => {
-    if (e.key === 'Enter') {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
       action && action();
     }
   };
   const rowClassName = (inAction ? 'in-action ' : '').concat(disabled ? 'disabled ' : '').concat(!!action ? 'interactive ' : '').concat('list-item-row ').concat(`${variant} `).concat(`${size}`).concat(className ? ` ${className}` : '');
   return /*#__PURE__*/_jsxs(Row, _objectSpread(_objectSpread({
     tabIndex: !action || disabled ? -1 : 0,
+    role: action ? 'button' : 'listitem',
+    "aria-disabled": disabled || undefined,
     className: rowClassName,
     onMouseDown: defaultOnMouseDownHandler,
     onKeyDown: e => !disabled && handleKeyDown(e),
@@ -241,6 +244,7 @@ const ListRow = _ref => {
   }, rest), {}, {
     children: [!!icon && /*#__PURE__*/_jsx("div", {
       className: 'list-item-icon',
+      "aria-hidden": "true",
       children: icon
     }), /*#__PURE__*/_jsxs("div", {
       className: 'list-item-content',

package/dist/List/ListRow.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ListRow.js","names":["React","styled","COLORS","ComponentTextStyle","focusStyles","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentXSStyling","ComponentXXSStyling","TooltipWrapper","DropdownButton","SystemIcons","Size","Z_INDEXES","defaultOnMouseDownHandler","IconButton","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","Row","div","props","generateToken","componentType","defaultVariant","theme","state","hover","active","Regular","RightIcon","ListRow","_ref","size","Medium","variant","icon","mainText","secondaryText","dropdown","note","noteTooltip","disabled","action","rightSideIcon","rightSideAction","rightSideIconDisabled","className","rest","_objectWithoutProperties","_excluded","inAction","setInAction","useState","handleKeyDown","e","key","rowClassName","concat","_objectSpread","tabIndex","onMouseDown","onKeyDown","onClick","children","label","Large","Small","XSmall","position","withArrow","onMouseEnter","onMouseLeave","type","ArrowDropDown","MoreVertical","shape","propTypes","_pt","oneOf","node","string","isRequired","oneOfType","bool","func"],"sources":["../../src/List/ListRow.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport {COLORS, ComponentTextStyle, focusStyles} from '../styles';\r\n\r\nimport {\r\n ComponentLStyling,\r\n ComponentMStyling,\r\n ComponentSStyling,\r\n ComponentXSStyling,\r\n ComponentXXSStyling\r\n} from '../styles';\r\nimport {DropdownButtonProps} from '../Dropdown/DropdownButtonTypes';\r\nimport {TooltipWrapper} from '../Tooltips';\r\nimport {DropdownButton} from '../Dropdown';\r\nimport {SystemIcons} from '../icons';\r\nimport {Size} from '../types';\r\nimport {Z_INDEXES} from '../styles';\r\nimport {defaultOnMouseDownHandler} from '../common';\r\nimport {IconButton} from '../Button';\r\n\r\nconst Row = styled.div`\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n justify-content: center;\r\n border-bottom: 1px solid ${props => COLORS.generateToken({ componentType:'border', defaultVariant:'subtle' }, props.theme)};\r\n box-sizing: border-box;\r\n\r\n color: ${props => COLORS.generateToken({componentType:'text',defaultVariant:'subtle'}, props.theme)};\r\n background-color: ${props => COLORS.generateToken({componentType:'bg-surface', defaultVariant:'default'}, props.theme)};\r\n\r\n\r\n cursor: default;\r\n\r\n &.interactive {\r\n cursor: pointer;\r\n }\r\n\r\n &.interactive.disabled {\r\n cursor: not-allowed;\r\n }\r\n\r\n &.interactive:hover:not(.in-action):not(.disabled) {\r\n background-color: ${props => COLORS.generateToken({ componentType:'bg-surface', state:'hover' }, props.theme)};\r\n color: ${props => COLORS.generateToken({ componentType: 'text', state:'hover' }, props.theme)};\r\n z-index: ${Z_INDEXES.hover};\r\n }\r\n\r\n &.interactive:active:not(.in-action):not(.disabled) {\r\n background-color: ${props => COLORS.generateToken({ componentType:'bg-surface', state:'active' }, props.theme)};\r\n color: ${props => COLORS.generateToken({ componentType:'text', state:'active' }, props.theme)};\r\n z-index: ${Z_INDEXES.active};\r\n }\r\n\r\n &.interactive:focus {\r\n ${focusStyles}\r\n }\r\n\r\n &.disabled {\r\n .list-item-icon, .list-item-content, .list-item-note, .list-item-actions {\r\n color: ${props => COLORS.generateToken({ componentType: 'text', state: 'disabled' }, props.theme)};\r\n }\r\n }\r\n\r\n\r\n &.small {\r\n min-height: 48px;\r\n padding: 0 8px;\r\n\r\n .list-item-icon {\r\n margin-right: 8px;\r\n }\r\n\r\n .list-item-main-text {\r\n ${ComponentSStyling(ComponentTextStyle.Regular, null)}\r\n }\r\n\r\n .list-item-actions {\r\n margin-right: -8px;\r\n }\r\n }\r\n\r\n &.medium {\r\n min-height: 56px;\r\n padding: 0 12px;\r\n\r\n .list-item-icon {\r\n margin-right: 12px;\r\n }\r\n\r\n .list-item-main-text {\r\n ${ComponentMStyling(ComponentTextStyle.Regular, null)}\r\n }\r\n\r\n .list-item-actions {\r\n margin-right: -12px;\r\n }\r\n }\r\n\r\n &.large {\r\n min-height: 64px;\r\n padding: 0 16px;\r\n\r\n .list-item-icon {\r\n margin-right: 16px;\r\n }\r\n\r\n .list-item-main-text {\r\n ${ComponentLStyling(ComponentTextStyle.Regular, null)}\r\n }\r\n\r\n .list-item-actions {\r\n margin-right: -16px;\r\n }\r\n }\r\n\r\n &.overlay {\r\n padding: 0 4px;\r\n\r\n .list-item-actions {\r\n margin-right: -4px;\r\n }\r\n }\r\n\r\n .list-item-icon {\r\n width: 24px;\r\n height: 24px;\r\n\r\n svg {\r\n width: 24px;\r\n height: 24px;\r\n }\r\n }\r\n\r\n .list-item-content {\r\n flex-grow: 1;\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n\r\n .list-item-main-text {\r\n }\r\n\r\n .list-item-secondary-text {\r\n ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\r\n }\r\n\r\n .list-item-note {\r\n color: ${props => COLORS.generateToken({componentType:'text',defaultVariant:'subtle'}, props.theme)};\r\n word-break: initial;\r\n ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\r\n }\r\n\r\n .list-item-note.with-tooltip {\r\n cursor: pointer;\r\n\r\n > div {\r\n text-decoration-line: underline;\r\n text-decoration-style: dashed;\r\n text-underline-offset: 1px;\r\n text-decoration-thickness: 1px;\r\n }\r\n }\r\n\r\n .list-item-actions {\r\n display: flex;\r\n align-items: center;\r\n\r\n button div {\r\n background-color: transparent;\r\n }\r\n }\r\n`;\r\n\r\nconst RightIcon = styled.div`\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n min-height: 48px;\r\n min-width: 48px;\r\n`;\r\n\r\n\r\nexport interface ListRowProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' \| 'onMouseDown' \| 'onKeyDown'> {\r\n /** Size of the ListRow. Defaults to 'medium'. /\r\n size?: Size.Small \| Size.Medium \| Size.Large;\r\n /* Variant of the ListRow. Defaults to 'normal'. /\r\n variant?: 'normal' \| 'overlay';\r\n /* Optional. Icon to be shown on the left side of the ListRow. /\r\n icon?: React.ReactNode;\r\n /* Required. Main text of the ListRow /\r\n mainText: string;\r\n /* Optional. Secondary row shown under MainText /\r\n secondaryText?: string;\r\n /* Optional. Details of the DropdownButton shown on the right side of the ListRow. /\r\n dropdown?: Pick<DropdownButtonProps, 'items' \| 'onClick' \| 'disabled' \| 'width'>;\r\n /* Optional. Note to be shown on the right side of the component. /\r\n note?: string \| React.ReactNode;\r\n /* Optional. Tooltip of the Note shown on the right side of the component. /\r\n noteTooltip?: string;\r\n /* Optional. If disabled then styles are greyed out and user can not interact with dropdown or click on the ListRow. /\r\n disabled?: boolean;\r\n /* Optional. Action to be executed when user clicks the row. /\r\n action?: () => void;\r\n /* Optional. Icon of the IconButton to show on the right side of the component /\r\n rightSideIcon?: React.ReactNode;\r\n /* Optional. Action to be executed when user clicks on the IconButton on the right /\r\n rightSideAction?: () => void;\r\n /* Optional. If disabled user will not be able to interact with IconButton shown on the right side */\r\n rightSideIconDisabled?: boolean;\r\n};\r\n\r\nconst ListRow: React.FunctionComponent<ListRowProps> = ({\r\n size = Size.Medium,\r\n variant = 'normal',\r\n icon,\r\n mainText,\r\n secondaryText,\r\n dropdown,\r\n note,\r\n noteTooltip,\r\n disabled = false,\r\n action,\r\n rightSideIcon,\r\n rightSideAction,\r\n rightSideIconDisabled,\r\n className,\r\n ...rest\r\n }: ListRowProps) => {\r\n\r\n const [inAction, setInAction] = React.useState<Boolean>(false);\r\n\r\n const handleKeyDown = (e: any) => {\r\n if (e.key === 'Enter') {\r\n action && action()\r\n }\r\n }\r\n\r\n const rowClassName = (inAction ? 'in-action ' : '')\r\n .concat(disabled ? 'disabled ' : '')\r\n .concat(!!action ? 'interactive ' : '')\r\n .concat('list-item-row ')\r\n .concat(`${variant} `)\r\n .concat(`${size}`)\r\n .concat(className ? ` ${className}` : '');\r\n\r\n return (\r\n <Row tabIndex={!action \|\| disabled ? -1 : 0}\r\n className={rowClassName}\r\n onMouseDown={defaultOnMouseDownHandler}\r\n onKeyDown={(e) => !disabled && handleKeyDown(e)}\r\n onClick={e => {\r\n !disabled && action && action();\r\n }}\r\n data-hj-suppress\r\n {...rest}>\r\n {\r\n !!icon &&\r\n <div className={'list-item-icon'}>{icon}</div>\r\n }\r\n <div className={'list-item-content'}>\r\n <div className={'list-item-main-text'}>{mainText}</div>\r\n {!!secondaryText && <div className={'list-item-secondary-text'}>{secondaryText}</div>}\r\n </div>\r\n {\r\n !!note &&\r\n <>\r\n {\r\n !!noteTooltip &&\r\n <div className={'list-item-note with-tooltip'}>\r\n <TooltipWrapper label={noteTooltip}\r\n size={size === Size.Large ? Size.Medium : size === Size.Small ? Size.XSmall : Size.Small}\r\n position={'top'}\r\n tabIndex={disabled ? -1 : 0}\r\n withArrow={true}>\r\n {note}\r\n </TooltipWrapper>\r\n </div>\r\n }\r\n {\r\n !noteTooltip &&\r\n <div className={'list-item-note'}>\r\n {note}\r\n </div>\r\n }\r\n </>\r\n }\r\n {\r\n !!dropdown &&\r\n <div className={'list-item-actions'}\r\n onMouseEnter={() => setInAction(!dropdown?.disabled)}\r\n onMouseLeave={() => setInAction(false)}>\r\n <DropdownButton {...dropdown}\r\n type={'icon'}\r\n disabled={disabled \|\| dropdown.disabled}\r\n icon={variant === 'overlay'\r\n ? <SystemIcons.ArrowDropDown/>\r\n : <SystemIcons.MoreVertical/>}\r\n />\r\n </div>\r\n }\r\n {\r\n !!rightSideIcon &&\r\n <RightIcon className={'list-item-actions'}\r\n onMouseEnter={() => rightSideAction && setInAction(!dropdown?.disabled)}\r\n onMouseLeave={() => rightSideAction && setInAction(false)}>\r\n {\r\n rightSideAction &&\r\n <IconButton action={rightSideAction} variant='secondary' shape='circular'\r\n disabled={disabled \|\| rightSideIconDisabled}>\r\n {rightSideIcon}\r\n </IconButton>\r\n }\r\n {\r\n !rightSideAction && rightSideIcon\r\n }\r\n </RightIcon>\r\n }\r\n </Row>\r\n );\r\n};\r\n\r\nexport default ListRow;\r\n\r\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"file":"ListRow.js","names":["React","styled","COLORS","ComponentTextStyle","focusStyles","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentXSStyling","ComponentXXSStyling","TooltipWrapper","DropdownButton","SystemIcons","Size","Z_INDEXES","defaultOnMouseDownHandler","IconButton","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","Row","div","props","generateToken","componentType","defaultVariant","theme","state","hover","active","Regular","RightIcon","ListRow","_ref","size","Medium","variant","icon","mainText","secondaryText","dropdown","note","noteTooltip","disabled","action","rightSideIcon","rightSideAction","rightSideIconDisabled","className","rest","_objectWithoutProperties","_excluded","inAction","setInAction","useState","handleKeyDown","e","key","preventDefault","rowClassName","concat","_objectSpread","tabIndex","role","undefined","onMouseDown","onKeyDown","onClick","children","label","Large","Small","XSmall","position","withArrow","onMouseEnter","onMouseLeave","type","ArrowDropDown","MoreVertical","shape","propTypes","_pt","oneOf","node","string","isRequired","oneOfType","bool","func"],"sources":["../../src/List/ListRow.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport {COLORS, ComponentTextStyle, focusStyles} from '../styles';\r\n\r\nimport {\r\n ComponentLStyling,\r\n ComponentMStyling,\r\n ComponentSStyling,\r\n ComponentXSStyling,\r\n ComponentXXSStyling\r\n} from '../styles';\r\nimport {DropdownButtonProps} from '../Dropdown/DropdownButtonTypes';\r\nimport {TooltipWrapper} from '../Tooltips';\r\nimport {DropdownButton} from '../Dropdown';\r\nimport {SystemIcons} from '../icons';\r\nimport {Size} from '../types';\r\nimport {Z_INDEXES} from '../styles';\r\nimport {defaultOnMouseDownHandler} from '../common';\r\nimport {IconButton} from '../Button';\r\n\r\nconst Row = styled.div`\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n justify-content: center;\r\n border-bottom: 1px solid ${props => COLORS.generateToken({ componentType:'border', defaultVariant:'subtle' }, props.theme)};\r\n box-sizing: border-box;\r\n\r\n color: ${props => COLORS.generateToken({componentType:'text',defaultVariant:'subtle'}, props.theme)};\r\n background-color: ${props => COLORS.generateToken({componentType:'bg-surface', defaultVariant:'default'}, props.theme)};\r\n\r\n\r\n cursor: default;\r\n\r\n &.interactive {\r\n cursor: pointer;\r\n }\r\n\r\n &.interactive.disabled {\r\n cursor: not-allowed;\r\n }\r\n\r\n &.interactive:hover:not(.in-action):not(.disabled) {\r\n background-color: ${props => COLORS.generateToken({ componentType:'bg-surface', state:'hover' }, props.theme)};\r\n color: ${props => COLORS.generateToken({ componentType: 'text', state:'hover' }, props.theme)};\r\n z-index: ${Z_INDEXES.hover};\r\n }\r\n\r\n &.interactive:active:not(.in-action):not(.disabled) {\r\n background-color: ${props => COLORS.generateToken({ componentType:'bg-surface', state:'active' }, props.theme)};\r\n color: ${props => COLORS.generateToken({ componentType:'text', state:'active' }, props.theme)};\r\n z-index: ${Z_INDEXES.active};\r\n }\r\n\r\n &.interactive:focus {\r\n ${focusStyles}\r\n }\r\n\r\n &.disabled {\r\n .list-item-icon, .list-item-content, .list-item-note, .list-item-actions {\r\n color: ${props => COLORS.generateToken({ componentType: 'text', state: 'disabled' }, props.theme)};\r\n }\r\n }\r\n\r\n\r\n &.small {\r\n min-height: 48px;\r\n padding: 0 8px;\r\n\r\n .list-item-icon {\r\n margin-right: 8px;\r\n }\r\n\r\n .list-item-main-text {\r\n ${ComponentSStyling(ComponentTextStyle.Regular, null)}\r\n }\r\n\r\n .list-item-actions {\r\n margin-right: -8px;\r\n }\r\n }\r\n\r\n &.medium {\r\n min-height: 56px;\r\n padding: 0 12px;\r\n\r\n .list-item-icon {\r\n margin-right: 12px;\r\n }\r\n\r\n .list-item-main-text {\r\n ${ComponentMStyling(ComponentTextStyle.Regular, null)}\r\n }\r\n\r\n .list-item-actions {\r\n margin-right: -12px;\r\n }\r\n }\r\n\r\n &.large {\r\n min-height: 64px;\r\n padding: 0 16px;\r\n\r\n .list-item-icon {\r\n margin-right: 16px;\r\n }\r\n\r\n .list-item-main-text {\r\n ${ComponentLStyling(ComponentTextStyle.Regular, null)}\r\n }\r\n\r\n .list-item-actions {\r\n margin-right: -16px;\r\n }\r\n }\r\n\r\n &.overlay {\r\n padding: 0 4px;\r\n\r\n .list-item-actions {\r\n margin-right: -4px;\r\n }\r\n }\r\n\r\n .list-item-icon {\r\n width: 24px;\r\n height: 24px;\r\n\r\n svg {\r\n width: 24px;\r\n height: 24px;\r\n }\r\n }\r\n\r\n .list-item-content {\r\n flex-grow: 1;\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n\r\n .list-item-main-text {\r\n }\r\n\r\n .list-item-secondary-text {\r\n ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\r\n }\r\n\r\n .list-item-note {\r\n color: ${props => COLORS.generateToken({componentType:'text',defaultVariant:'subtle'}, props.theme)};\r\n word-break: initial;\r\n ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\r\n }\r\n\r\n .list-item-note.with-tooltip {\r\n cursor: pointer;\r\n\r\n > div {\r\n text-decoration-line: underline;\r\n text-decoration-style: dashed;\r\n text-underline-offset: 1px;\r\n text-decoration-thickness: 1px;\r\n }\r\n }\r\n\r\n .list-item-actions {\r\n display: flex;\r\n align-items: center;\r\n\r\n button div {\r\n background-color: transparent;\r\n }\r\n }\r\n`;\r\n\r\nconst RightIcon = styled.div`\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n min-height: 48px;\r\n min-width: 48px;\r\n`;\r\n\r\n\r\nexport interface ListRowProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' \| 'onMouseDown' \| 'onKeyDown'> {\r\n /** Size of the ListRow. Defaults to 'medium'. /\r\n size?: Size.Small \| Size.Medium \| Size.Large;\r\n /* Variant of the ListRow. Defaults to 'normal'. /\r\n variant?: 'normal' \| 'overlay';\r\n /* Optional. Icon to be shown on the left side of the ListRow. /\r\n icon?: React.ReactNode;\r\n /* Required. Main text of the ListRow /\r\n mainText: string;\r\n /* Optional. Secondary row shown under MainText /\r\n secondaryText?: string;\r\n /* Optional. Details of the DropdownButton shown on the right side of the ListRow. /\r\n dropdown?: Pick<DropdownButtonProps, 'items' \| 'onClick' \| 'disabled' \| 'width'>;\r\n /* Optional. Note to be shown on the right side of the component. /\r\n note?: string \| React.ReactNode;\r\n /* Optional. Tooltip of the Note shown on the right side of the component. /\r\n noteTooltip?: string;\r\n /* Optional. If disabled then styles are greyed out and user can not interact with dropdown or click on the ListRow. /\r\n disabled?: boolean;\r\n /* Optional. Action to be executed when user clicks the row. /\r\n action?: () => void;\r\n /* Optional. Icon of the IconButton to show on the right side of the component /\r\n rightSideIcon?: React.ReactNode;\r\n /* Optional. Action to be executed when user clicks on the IconButton on the right /\r\n rightSideAction?: () => void;\r\n /* Optional. If disabled user will not be able to interact with IconButton shown on the right side */\r\n rightSideIconDisabled?: boolean;\r\n};\r\n\r\nconst ListRow: React.FunctionComponent<ListRowProps> = ({\r\n size = Size.Medium,\r\n variant = 'normal',\r\n icon,\r\n mainText,\r\n secondaryText,\r\n dropdown,\r\n note,\r\n noteTooltip,\r\n disabled = false,\r\n action,\r\n rightSideIcon,\r\n rightSideAction,\r\n rightSideIconDisabled,\r\n className,\r\n ...rest\r\n }: ListRowProps) => {\r\n\r\n const [inAction, setInAction] = React.useState<Boolean>(false);\r\n\r\n const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\r\n if (e.key === 'Enter' \|\| e.key === ' ') {\r\n e.preventDefault();\r\n action && action();\r\n }\r\n }\r\n\r\n const rowClassName = (inAction ? 'in-action ' : '')\r\n .concat(disabled ? 'disabled ' : '')\r\n .concat(!!action ? 'interactive ' : '')\r\n .concat('list-item-row ')\r\n .concat(`${variant} `)\r\n .concat(`${size}`)\r\n .concat(className ? ` ${className}` : '');\r\n\r\n return (\r\n <Row tabIndex={!action \|\| disabled ? -1 : 0}\r\n role={action ? 'button' : 'listitem'}\r\n aria-disabled={disabled \|\| undefined}\r\n className={rowClassName}\r\n onMouseDown={defaultOnMouseDownHandler}\r\n onKeyDown={(e) => !disabled && handleKeyDown(e)}\r\n onClick={e => {\r\n !disabled && action && action();\r\n }}\r\n data-hj-suppress\r\n {...rest}>\r\n {\r\n !!icon &&\r\n <div className={'list-item-icon'} aria-hidden=\"true\">{icon}</div>\r\n }\r\n <div className={'list-item-content'}>\r\n <div className={'list-item-main-text'}>{mainText}</div>\r\n {!!secondaryText && <div className={'list-item-secondary-text'}>{secondaryText}</div>}\r\n </div>\r\n {\r\n !!note &&\r\n <>\r\n {\r\n !!noteTooltip &&\r\n <div className={'list-item-note with-tooltip'}>\r\n <TooltipWrapper label={noteTooltip}\r\n size={size === Size.Large ? Size.Medium : size === Size.Small ? Size.XSmall : Size.Small}\r\n position={'top'}\r\n tabIndex={disabled ? -1 : 0}\r\n withArrow={true}>\r\n {note}\r\n </TooltipWrapper>\r\n </div>\r\n }\r\n {\r\n !noteTooltip &&\r\n <div className={'list-item-note'}>\r\n {note}\r\n </div>\r\n }\r\n </>\r\n }\r\n {\r\n !!dropdown &&\r\n <div className={'list-item-actions'}\r\n onMouseEnter={() => setInAction(!dropdown?.disabled)}\r\n onMouseLeave={() => setInAction(false)}>\r\n <DropdownButton {...dropdown}\r\n type={'icon'}\r\n disabled={disabled \|\| dropdown.disabled}\r\n icon={variant === 'overlay'\r\n ? <SystemIcons.ArrowDropDown/>\r\n : <SystemIcons.MoreVertical/>}\r\n />\r\n </div>\r\n }\r\n {\r\n !!rightSideIcon &&\r\n <RightIcon className={'list-item-actions'}\r\n onMouseEnter={() => rightSideAction && setInAction(!dropdown?.disabled)}\r\n onMouseLeave={() => rightSideAction && setInAction(false)}>\r\n {\r\n rightSideAction &&\r\n <IconButton action={rightSideAction} variant='secondary' shape='circular'\r\n disabled={disabled \|\| rightSideIconDisabled}>\r\n {rightSideIcon}\r\n </IconButton>\r\n }\r\n {\r\n !rightSideAction && rightSideIcon\r\n }\r\n </RightIcon>\r\n }\r\n </Row>\r\n );\r\n};\r\n\r\nexport default ListRow;\r\n\r\n"],"mappings":"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","ignoreList":[]}

package/dist/Modals/ModalContainer.cjs CHANGED Viewed

@@ -119,7 +119,6 @@ class ModalContainer extends React.Component {
   render() {
     const {
       id,
-      className,
       showModal,
       closeModal,
       children,
@@ -159,7 +158,6 @@ class ModalContainer extends React.Component {
       onRequestClose: () => closeModal(),
       shouldCloseOnOverlayClick: shouldCloseOnOverlayClick,
       style: styles,
-      className: className,
       children: children
     });
   }
@@ -195,7 +193,6 @@ class ModalContainer extends React.Component {
 }
 (0, _defineProperty2.default)(ModalContainer, "propTypes", {
   id: _propTypes.default.string,
-  className: _propTypes.default.string,
   showModal: _propTypes.default.bool.isRequired,
   closeModal: _propTypes.default.func.isRequired,
   children: _propTypes.default.any.isRequired,