@muraldevkit/ui-toolkit 2.4.2 → 2.6.0

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 (39) hide show
  1. package/README.md +27 -1
  2. package/dist/components/button/MrlAnimatedIconButton/MrlAnimatedIconButton.d.ts +1 -1
  3. package/dist/components/button/MrlButton/MrlButton.d.ts +1 -1
  4. package/dist/components/button/MrlIconButton/MrlIconButton.d.ts +1 -1
  5. package/dist/components/focus-trap/MrlFocusTrap/MrlFocusTrap.d.ts +1 -1
  6. package/dist/components/form/radio/MrlRadioButton/MrlRadioButton.d.ts +46 -0
  7. package/dist/components/form/radio/MrlRadioButton/index.d.ts +1 -0
  8. package/dist/components/form/utils.d.ts +12 -0
  9. package/dist/components/grid/MrlCol/MrlCol.d.ts +3 -8
  10. package/dist/components/grid/MrlGrid/MrlGrid.d.ts +3 -10
  11. package/dist/components/grid/MrlRow/MrlRow.d.ts +4 -8
  12. package/dist/components/index.d.ts +1 -0
  13. package/dist/components/layout/MrlMain/MrlMain.d.ts +9 -0
  14. package/dist/components/layout/MrlMain/index.d.ts +1 -0
  15. package/dist/components/layout/MrlPage/MrlPage.d.ts +11 -0
  16. package/dist/components/layout/MrlPage/index.d.ts +11 -0
  17. package/dist/components/layout/MrlSidebar/MrlSidebar.d.ts +11 -0
  18. package/dist/components/layout/MrlSidebar/index.d.ts +1 -0
  19. package/dist/components/layout/MrlTopbar/MrlTopbar.d.ts +11 -0
  20. package/dist/components/layout/MrlTopbar/index.d.ts +1 -0
  21. package/dist/components/layout/constants.d.ts +16 -0
  22. package/dist/components/layout/context/LayoutContext.d.ts +24 -0
  23. package/dist/components/layout/index.d.ts +4 -0
  24. package/dist/components/layout/utils.d.ts +15 -0
  25. package/dist/components/svg/config.d.ts +1 -1
  26. package/dist/hooks/index.d.ts +1 -0
  27. package/dist/hooks/useBreakpoint/index.d.ts +15 -0
  28. package/dist/index.js +1 -1
  29. package/dist/styles/MrlMain/module.scss +26 -0
  30. package/dist/styles/MrlMain/variables.scss +5 -0
  31. package/dist/styles/MrlPage/module.scss +13 -0
  32. package/dist/styles/MrlRadioButton/module.scss +8 -0
  33. package/dist/styles/MrlRadioButtonStandalone/module.scss +2 -2
  34. package/dist/styles/MrlSidebar/module.scss +61 -0
  35. package/dist/styles/MrlTopbar/module.scss +12 -0
  36. package/dist/styles/grid/global.scss +5 -1
  37. package/dist/styles/grid/variables.scss +6 -5
  38. package/dist/styles/layout/variables.scss +3 -0
  39. package/package.json +2 -1
package/README.md CHANGED
@@ -1,5 +1,31 @@
1
1
  # Mural's UI Toolkit
2
2
  Shared React components for use across the Mural platform.
3
3
 
4
+ ## Table of contents
5
+ - [Quick start](#quick-start)
6
+ - [Documentation](#documentation)
4
7
  - [Component standards](./docs/component-standards.md)
5
- - [Contribution Guide](./CONTRIBUTING.md)
8
+ - [Contribution Guide](./CONTRIBUTING.md)
9
+ ## Quick start
10
+
11
+ We use Storybook as both a living documentation site and dev environment. To get started:
12
+
13
+ - Clone the repo
14
+ - `npm install`
15
+ - `npm run dev`
16
+
17
+ To run tests locally:
18
+ - `npm run test`
19
+
20
+ If you need to verify your local changes in an external project see our [Local Enviroment Guide](./docs/local-development.md).
21
+ ## What's included
22
+
23
+ Within the project you'll find the `src/` directory, which logically groups components together. For more information on our components see our [Component standards](./docs/component-standards.md).
24
+
25
+ ## Documentation
26
+ Our doc site uses Storybook as living documentation and dev environment. We support [mdx](https://mdxjs.com/) files and standard Storybook files, we use [CSF version 3](https://storybook.js.org/blog/component-story-format-3-0/). You can find examples on how to add markdown docs to the doc section of our site in the `src/storybookds_docs`. For documentation on how to write [Storybook stories](https://storybook.js.org/docs/react/writing-stories/introduction).
27
+
28
+ *During deployments we remove the docs and strip comments.*
29
+
30
+
31
+
@@ -5,5 +5,5 @@ import './MrlAnimatedIconButton.scss';
5
5
  interface MrlAnimatedIconButtonProps extends Omit<MrlIconButtonProps, 'icon'> {
6
6
  icon: MrlSvgAnimateProps;
7
7
  }
8
- export declare const MrlAnimatedIconButton: React.ForwardRefExoticComponent<Pick<MrlAnimatedIconButtonProps, "form" | "slot" | "style" | "title" | "text" | "dir" | "disabled" | "className" | "color" | "size" | "attrs" | "onClick" | "children" | "id" | "defaultValue" | "state" | "kind" | "defaultChecked" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "hidden" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "inputMode" | "is" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "name" | "type" | "key" | "value" | "client" | "icon" | "badge" | "disableEvents" | "position" | "tipAnchor" | "toggleAria" | "toggleStyle" | "wrapperClassName" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget"> & React.RefAttributes<HTMLButtonElement>>;
8
+ export declare const MrlAnimatedIconButton: React.ForwardRefExoticComponent<Pick<MrlAnimatedIconButtonProps, "form" | "slot" | "style" | "title" | "text" | "dir" | "disabled" | "id" | "defaultValue" | "state" | "children" | "kind" | "size" | "attrs" | "defaultChecked" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "draggable" | "hidden" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "inputMode" | "is" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "name" | "type" | "key" | "value" | "client" | "icon" | "badge" | "disableEvents" | "position" | "tipAnchor" | "toggleAria" | "toggleStyle" | "wrapperClassName" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget"> & React.RefAttributes<HTMLButtonElement>>;
9
9
  export {};
@@ -67,4 +67,4 @@ export interface MrlButtonProps extends Omit<MrlComponentProps, 'style'>, React.
67
67
  */
68
68
  toggleStyle?: ToggleStyle;
69
69
  }
70
- export declare const MrlButton: React.ForwardRefExoticComponent<Pick<MrlButtonProps, "form" | "slot" | "style" | "title" | "text" | "dir" | "disabled" | "className" | "color" | "size" | "attrs" | "onClick" | "children" | "id" | "defaultValue" | "state" | "kind" | "defaultChecked" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "hidden" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "inputMode" | "is" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "name" | "type" | "key" | "value" | "icon" | "badge" | "disableEvents" | "toggleAria" | "toggleStyle" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "iconPos"> & React.RefAttributes<HTMLButtonElement>>;
70
+ export declare const MrlButton: React.ForwardRefExoticComponent<Pick<MrlButtonProps, "form" | "slot" | "style" | "title" | "text" | "dir" | "disabled" | "id" | "defaultValue" | "state" | "children" | "kind" | "size" | "attrs" | "defaultChecked" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "draggable" | "hidden" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "inputMode" | "is" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "name" | "type" | "key" | "value" | "icon" | "badge" | "disableEvents" | "toggleAria" | "toggleStyle" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "iconPos"> & React.RefAttributes<HTMLButtonElement>>;
@@ -79,4 +79,4 @@ export interface MrlIconButtonProps extends Omit<MrlComponentProps, 'style'>, Re
79
79
  */
80
80
  wrapperClassName?: string;
81
81
  }
82
- export declare const MrlIconButton: React.ForwardRefExoticComponent<Pick<MrlIconButtonProps, "form" | "slot" | "style" | "title" | "text" | "dir" | "disabled" | "className" | "color" | "size" | "attrs" | "onClick" | "children" | "id" | "defaultValue" | "state" | "kind" | "defaultChecked" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "hidden" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "inputMode" | "is" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "name" | "type" | "key" | "value" | "client" | "icon" | "badge" | "disableEvents" | "position" | "tipAnchor" | "toggleAria" | "toggleStyle" | "wrapperClassName" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget"> & React.RefAttributes<HTMLButtonElement>>;
82
+ export declare const MrlIconButton: React.ForwardRefExoticComponent<Pick<MrlIconButtonProps, "form" | "slot" | "style" | "title" | "text" | "dir" | "disabled" | "id" | "defaultValue" | "state" | "children" | "kind" | "size" | "attrs" | "defaultChecked" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "draggable" | "hidden" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "inputMode" | "is" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "name" | "type" | "key" | "value" | "client" | "icon" | "badge" | "disableEvents" | "position" | "tipAnchor" | "toggleAria" | "toggleStyle" | "wrapperClassName" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget"> & React.RefAttributes<HTMLButtonElement>>;
@@ -3,7 +3,7 @@ interface PropTypes {
3
3
  /**
4
4
  * Elements to be rendered within the focus trap
5
5
  */
6
- children: ((ref: React.RefObject<HTMLElement>) => JSX.Element) | React.ReactElement | React.ReactElement[];
6
+ children: React.ReactNode;
7
7
  /**
8
8
  * Specifies whether the focus trap should be disabled
9
9
  */
@@ -0,0 +1,46 @@
1
+ import React from 'react';
2
+ import { StaticIconConfig } from '../../constants';
3
+ interface MrlRadioButtonProps extends React.ComponentPropsWithoutRef<'input'> {
4
+ /** Additional class to add to the container element */
5
+ className?: string;
6
+ /** Adjusts the styles of the label, icon and description when the label is multiline */
7
+ hasMultilineLabel?: boolean;
8
+ /** The text to display as the radio button's label */
9
+ label: string;
10
+ /** The radio button's name that will group it with others in a radio group */
11
+ name: string;
12
+ /** The radio button's value */
13
+ value: string;
14
+ /** Indicates if the radio button is disabled */
15
+ disabled?: boolean;
16
+ /** Indicates if the radio button has an error */
17
+ hasError?: boolean;
18
+ /** Leading label icon */
19
+ icon?: StaticIconConfig;
20
+ /** Styles applied to the container element */
21
+ style?: React.CSSProperties;
22
+ /**
23
+ * Description, additional context text for the user.
24
+ * It can be a string or a React component for custom render.
25
+ * When using a React component it's necessary to add an id to the custom element and
26
+ * pass it to the MrlRadioButton through "aria-describedby" to make it accessible
27
+ * to screen readers.
28
+ * Custom description should also implement the disabled state styles
29
+ * for text when the input is disabled or set color: inherit.
30
+ *
31
+ * @example
32
+ * <MrlRadioButton aria-describedby={customId} description={
33
+ * <p id={customId}>description</p>
34
+ * }>
35
+ */
36
+ description?: string | React.ReactNode;
37
+ }
38
+ /**
39
+ * Form element with an associated text label and description that allows the user to select one
40
+ * option from a provided list
41
+ *
42
+ * @param {MrlRadioButtonProps} props - the component props
43
+ * @returns an input with type "radio" with an associated label
44
+ */
45
+ export declare function MrlRadioButton({ className, description, hasMultilineLabel, name, value, icon, disabled, hasError, label, style, ...rest }: MrlRadioButtonProps): JSX.Element;
46
+ export {};
@@ -0,0 +1 @@
1
+ export * from './MrlRadioButton';
@@ -79,4 +79,16 @@ type CallbackType = (_debounce: number) => void;
79
79
  * @todo - 4969 investigate combining this debounce function with the modal debounce function
80
80
  */
81
81
  export declare const debounce: (func: () => void, timeout: number | undefined, debounce: DebounceType, callback: CallbackType) => (() => void);
82
+ type GetAriaDescribedByReturn = {
83
+ ['aria-describedby']?: string;
84
+ } | {
85
+ ['aria-describedby']: string;
86
+ };
87
+ /**
88
+ * Generates the 'aria-describedby' attribute from multiple ids
89
+ *
90
+ * @param {Array<string | undefined>} args ids
91
+ * @returns {GetAriaDescribedByReturn} an object with aria-describedby
92
+ */
93
+ export declare function getDescribedby(...args: Array<string | undefined>): GetAriaDescribedByReturn;
82
94
  export {};
@@ -1,12 +1,7 @@
1
- import React from 'react';
1
+ /// <reference types="react" />
2
+ import { LayoutComponent } from '../../layout/constants';
2
3
  import { GridColumns } from '../constants';
3
- interface MrlCol extends GridColumns {
4
- /**
5
- * Children to be rendered within the component.
6
- */
7
- children: React.ReactNode;
8
- className?: string;
9
- }
4
+ type MrlCol = LayoutComponent & GridColumns;
10
5
  /**
11
6
  * MrlCol React component.
12
7
  *
@@ -1,18 +1,11 @@
1
- import React from 'react';
1
+ /// <reference types="react" />
2
+ import { LayoutComponent } from '../../layout/constants';
2
3
  import '../grid.variables.scss';
3
4
  import '../grid.global.scss';
4
- interface MrlGrid {
5
- /**
6
- * Children to be rendered within the component.
7
- */
8
- children: React.ReactNode;
9
- className?: string;
10
- }
11
5
  /**
12
6
  * MrlCol React component.
13
7
  *
14
8
  * @param props - component props
15
9
  * @returns a MrlCol React component.
16
10
  */
17
- export declare function MrlGrid({ children, className }: MrlGrid): JSX.Element;
18
- export {};
11
+ export declare function MrlGrid({ children, className }: LayoutComponent): JSX.Element;
@@ -1,15 +1,11 @@
1
- import React from 'react';
1
+ /// <reference types="react" />
2
+ import { LayoutComponent } from '../../layout/constants';
2
3
  import { AlignOptions, GutterSizes, JustifyOptions } from '../constants';
3
- interface MrlRow {
4
+ interface MrlRow extends LayoutComponent {
4
5
  /**
5
6
  * Flex alignment of the children within the component.
6
7
  */
7
8
  align?: AlignOptions;
8
- /**
9
- * Children to be rendered within the component.
10
- */
11
- children: React.ReactNode;
12
- className?: string;
13
9
  /**
14
10
  * Gutter size for columns within the row
15
11
  */
@@ -25,5 +21,5 @@ interface MrlRow {
25
21
  * @param props - component props
26
22
  * @returns a MrlRow React component.
27
23
  */
28
- export declare function MrlRow({ align, children, className, gutter, justify }: MrlRow): JSX.Element;
24
+ export declare function MrlRow({ align, children, className, justify }: MrlRow): JSX.Element;
29
25
  export {};
@@ -3,6 +3,7 @@ export * from './divider';
3
3
  export * from './focus-trap';
4
4
  export * from './form';
5
5
  export * from './grid';
6
+ export * from './layout';
6
7
  export * from './link';
7
8
  export * from './modal';
8
9
  export * from './notification';
@@ -0,0 +1,9 @@
1
+ /// <reference types="react" />
2
+ import { LayoutComponent } from '../constants';
3
+ /**
4
+ * MrlMain React component.
5
+ *
6
+ * @param props - component props
7
+ * @returns a MrlMain React component.
8
+ */
9
+ export declare function MrlMain({ children, className }: LayoutComponent): JSX.Element;
@@ -0,0 +1 @@
1
+ export { MrlMain } from './MrlMain';
@@ -0,0 +1,11 @@
1
+ /// <reference types="react" />
2
+ import { LayoutComponent } from '../constants';
3
+ type MrlPage = LayoutComponent;
4
+ /**
5
+ * MrlPage React component.
6
+ *
7
+ * @param props - component props
8
+ * @returns a MrlPage React component.
9
+ */
10
+ export declare function MrlPage({ children, className }: MrlPage): JSX.Element;
11
+ export {};
@@ -0,0 +1,11 @@
1
+ /// <reference types="react" />
2
+ import { LayoutComponent } from '../constants';
3
+ type MrlPage = LayoutComponent;
4
+ /**
5
+ * MrlPage Provider
6
+ *
7
+ * @param props - component props
8
+ * @returns a MrlPage React component.
9
+ */
10
+ export declare function MrlPage({ ...rest }: MrlPage): JSX.Element;
11
+ export {};
@@ -0,0 +1,11 @@
1
+ /// <reference types="react" />
2
+ import { LayoutComponent, LayoutSection } from '../constants';
3
+ type MrlSidebar = LayoutComponent & LayoutSection;
4
+ /**
5
+ * MrlSidebar React component.
6
+ *
7
+ * @param props - component props
8
+ * @returns a MrlSidebar React component.
9
+ */
10
+ export declare function MrlSidebar({ children, className }: MrlSidebar): JSX.Element;
11
+ export {};
@@ -0,0 +1 @@
1
+ export { MrlSidebar } from './MrlSidebar';
@@ -0,0 +1,11 @@
1
+ /// <reference types="react" />
2
+ import { LayoutComponent, LayoutSection } from '../constants';
3
+ type MrlTopbar = LayoutComponent & LayoutSection;
4
+ /**
5
+ * MrlTopbar React component.
6
+ *
7
+ * @param props - component props
8
+ * @returns a MrlTopbar React component.
9
+ */
10
+ export declare function MrlTopbar({ children, className }: MrlTopbar): JSX.Element;
11
+ export {};
@@ -0,0 +1 @@
1
+ export { MrlTopbar } from './MrlTopbar';
@@ -0,0 +1,16 @@
1
+ /// <reference types="react" />
2
+ export interface LayoutComponent {
3
+ /**
4
+ * Children to be rendered within the component.
5
+ */
6
+ children: React.ReactNode;
7
+ className?: string;
8
+ }
9
+ export interface LayoutSection {
10
+ /**
11
+ * Label to apply to region of the page
12
+ */
13
+ ariaLabel: React.ReactNode;
14
+ }
15
+ export declare const TOPBAR_SELECTOR = "mrl-topbar";
16
+ export declare const SIDEBAR_SELECTOR = "mrl-sidebar";
@@ -0,0 +1,24 @@
1
+ import React, { ReactElement } from 'react';
2
+ type LayoutContextType = {
3
+ isSidebarRendered: boolean;
4
+ isTopbarRendered: boolean;
5
+ };
6
+ type LayoutProviderProps = {
7
+ children: React.ReactNode;
8
+ };
9
+ /**
10
+ * Provides layout-related context values to child components.
11
+ *
12
+ * @param {LayoutProviderProps} props - The props for the component.
13
+ * @returns A React element that provides the layout context to children.
14
+ */
15
+ export declare function LayoutProvider({ children }: LayoutProviderProps): ReactElement;
16
+ /**
17
+ * Custom hook to access layout context values.
18
+ * This hook ensures that the component using it is wrapped within a LayoutProvider.
19
+ *
20
+ * @throws Will throw an error if not used within a `LayoutProvider`.
21
+ * @returns The layout context containing isSidebarRendered and isTopbarRendered.
22
+ */
23
+ export declare const useLayoutContext: () => LayoutContextType;
24
+ export {};
@@ -0,0 +1,4 @@
1
+ export * from './MrlMain';
2
+ export * from './MrlPage';
3
+ export * from './MrlTopbar';
4
+ export * from './MrlSidebar';
@@ -0,0 +1,15 @@
1
+ /**
2
+ * Returns true/false depending on if we are in a mobile view
3
+ *
4
+ * @param {string} breakpoint - The breakpoint value
5
+ * @returns {boolean} Returns `true` if the breakpoint corresponds to a mobile size ('xs', 'sm', or 'md')
6
+ */
7
+ export declare const isMobile: (breakpoint: string) => boolean;
8
+ /**
9
+ * Returns true/false if the topbar is present within the given element
10
+ *
11
+ * @param element - The element to search for the topbar
12
+ * @param selector - The selector to search for the topbar
13
+ * @returns true/false if the topbar is present within the element
14
+ */
15
+ export declare const hasElement: (element: HTMLElement | null, selector: string) => boolean;
@@ -115,7 +115,7 @@ export declare const colorPictoStoryData: {
115
115
  export declare const animateStoryData: {
116
116
  args: {
117
117
  delay: number;
118
- state: "stop" | "play";
118
+ state: "play" | "stop";
119
119
  };
120
120
  argTypes: {
121
121
  delay: {
@@ -1,2 +1,3 @@
1
1
  export * from './useVirtualKeyboard';
2
2
  export * from './useCoordinate';
3
+ export * from './useBreakpoint';
@@ -0,0 +1,15 @@
1
+ type Breakpoints = {
2
+ xs: number;
3
+ sm: number;
4
+ md: number;
5
+ lg: number;
6
+ xl: number;
7
+ xxl: number;
8
+ };
9
+ /**
10
+ * React Hook to return the current breakpoint
11
+ *
12
+ * @returns {keyof Breakpoints} - the current breakpoint
13
+ */
14
+ export declare const useBreakpoint: () => keyof Breakpoints;
15
+ export default useBreakpoint;