@muraldevkit/ui-toolkit 2.68.2 → 2.69.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.
- package/dist/components/button/MrlAnimatedIconButton/MrlAnimatedIconButton.d.ts +1 -1
- package/dist/components/button/MrlButton/MrlButton.d.ts +1 -1
- package/dist/components/button/MrlIconButton/MrlIconButton.d.ts +9 -9
- package/dist/components/index.d.ts +1 -0
- package/dist/components/menu/MrlMenuItem/MrlMenuItem.d.ts +5 -5
- package/dist/components/toolbar/MrlToolbar/MrlToolbar.d.ts +38 -0
- package/dist/components/toolbar/MrlToolbar/index.d.ts +1 -0
- package/dist/components/toolbar/MrlToolbarButton/MrlToolbarButton.d.ts +58 -0
- package/dist/components/toolbar/MrlToolbarButton/index.d.ts +1 -0
- package/dist/components/toolbar/MrlToolbarItem/MrlToolbarItem.d.ts +30 -0
- package/dist/components/toolbar/MrlToolbarItem/index.d.ts +1 -0
- package/dist/components/toolbar/index.d.ts +3 -0
- package/dist/index.js +1 -1
- package/dist/styles/MrlToolbar/module.scss +53 -0
- package/dist/styles/MrlToolbarButton/module.scss +3 -0
- package/package.json +1 -1
|
@@ -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, "
|
|
8
|
+
export declare const MrlAnimatedIconButton: React.ForwardRefExoticComponent<Pick<MrlAnimatedIconButtonProps, "form" | "slot" | "style" | "title" | "text" | "dir" | "name" | "role" | "children" | "disabled" | "key" | "placeholder" | "id" | "defaultValue" | "state" | "value" | "kind" | "size" | "attrs" | "defaultChecked" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "draggable" | "hidden" | "lang" | "spellCheck" | "tabIndex" | "inputMode" | "is" | "radioGroup" | "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" | "type" | "client" | "loading" | "loadingText" | "toggleAria" | "position" | "icon" | "badge" | "disableEvents" | "tipAnchor" | "toggleStyle" | "tooltipKind" | "wrapperClassName" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget"> & React.RefAttributes<HTMLButtonElement>>;
|
|
9
9
|
export {};
|
|
@@ -102,4 +102,4 @@ export interface MrlButtonProps extends Omit<MrlComponentProps, 'style'>, React.
|
|
|
102
102
|
*/
|
|
103
103
|
toggleStyle?: ToggleStyle;
|
|
104
104
|
}
|
|
105
|
-
export declare const MrlButton: React.ForwardRefExoticComponent<Pick<MrlButtonProps, "
|
|
105
|
+
export declare const MrlButton: React.ForwardRefExoticComponent<Pick<MrlButtonProps, "form" | "slot" | "style" | "title" | "text" | "dir" | "name" | "role" | "children" | "disabled" | "key" | "placeholder" | "id" | "defaultValue" | "state" | "value" | "kind" | "size" | "attrs" | "defaultChecked" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "draggable" | "hidden" | "lang" | "spellCheck" | "tabIndex" | "inputMode" | "is" | "radioGroup" | "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" | "type" | "loading" | "loadingText" | "toggleAria" | "tooltip" | "icon" | "badge" | "disableEvents" | "toggleStyle" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "iconPos"> & React.RefAttributes<HTMLButtonElement>>;
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import React from 'react';
|
|
1
|
+
import React, { ComponentProps, KeyboardEvent, MouseEvent, ReactElement } from 'react';
|
|
2
2
|
import { MrlButtonKind, MrlButtonSize, MrlGhostIconButtonSize, ToggleAria } from '../constants';
|
|
3
3
|
import { AttrsObject, MrlComponentProps } from '../../../utils';
|
|
4
4
|
import { MrlTooltipAnchor, MrlTooltipPosition, MrlTooltipVariant } from '../../tooltip/constants';
|
|
5
5
|
import { MrlButtonState, ToggleStyle } from '../../';
|
|
6
6
|
import { MrlDeviceClient } from '../../../contexts';
|
|
7
7
|
import './MrlIconButton.scss';
|
|
8
|
-
export interface MrlIconButtonProps extends Omit<MrlComponentProps, 'style'>,
|
|
8
|
+
export interface MrlIconButtonProps extends Omit<MrlComponentProps, 'style'>, ComponentProps<'button'> {
|
|
9
9
|
/**
|
|
10
10
|
* Applies additional HTML attributes to the button element.
|
|
11
11
|
*
|
|
@@ -15,7 +15,7 @@ export interface MrlIconButtonProps extends Omit<MrlComponentProps, 'style'>, Re
|
|
|
15
15
|
/**
|
|
16
16
|
* Allow developers to add badge to buttons.
|
|
17
17
|
*/
|
|
18
|
-
badge?:
|
|
18
|
+
badge?: ReactElement;
|
|
19
19
|
/** Additional class to add to the button */
|
|
20
20
|
className?: string;
|
|
21
21
|
/**
|
|
@@ -27,7 +27,7 @@ export interface MrlIconButtonProps extends Omit<MrlComponentProps, 'style'>, Re
|
|
|
27
27
|
/**
|
|
28
28
|
* The icon that will be rendered.
|
|
29
29
|
*/
|
|
30
|
-
icon:
|
|
30
|
+
icon: ReactElement;
|
|
31
31
|
/**
|
|
32
32
|
* Changes the visual emphasis of the button.
|
|
33
33
|
*
|
|
@@ -45,15 +45,15 @@ export interface MrlIconButtonProps extends Omit<MrlComponentProps, 'style'>, Re
|
|
|
45
45
|
/**
|
|
46
46
|
* onClick event for the button.
|
|
47
47
|
*/
|
|
48
|
-
onClick?: (e:
|
|
48
|
+
onClick?: (e: MouseEvent<HTMLButtonElement>) => void;
|
|
49
49
|
/**
|
|
50
50
|
* onKeyDown event for the button.
|
|
51
51
|
*/
|
|
52
|
-
onKeyUp?: (e:
|
|
52
|
+
onKeyUp?: (e: KeyboardEvent<HTMLButtonElement>) => void;
|
|
53
53
|
/**
|
|
54
54
|
* onMouseUp event for the button.
|
|
55
55
|
*/
|
|
56
|
-
onMouseUp?: (e:
|
|
56
|
+
onMouseUp?: (e: MouseEvent<HTMLButtonElement>) => void;
|
|
57
57
|
/**
|
|
58
58
|
* The placement of the tooltip in relation to the button.
|
|
59
59
|
*/
|
|
@@ -71,7 +71,7 @@ export interface MrlIconButtonProps extends Omit<MrlComponentProps, 'style'>, Re
|
|
|
71
71
|
* the 'disabled' prop instead. Since it does not support state="disabled",
|
|
72
72
|
* it also doesn't not support state="selected-disabled".
|
|
73
73
|
*/
|
|
74
|
-
state
|
|
74
|
+
state?: MrlButtonState;
|
|
75
75
|
/**
|
|
76
76
|
* The textual label describing the button's purpose/action.
|
|
77
77
|
* Icon buttons require a text label to ensure accessibility.
|
|
@@ -104,4 +104,4 @@ export interface MrlIconButtonProps extends Omit<MrlComponentProps, 'style'>, Re
|
|
|
104
104
|
*/
|
|
105
105
|
wrapperClassName?: string;
|
|
106
106
|
}
|
|
107
|
-
export declare const MrlIconButton: React.ForwardRefExoticComponent<Pick<MrlIconButtonProps, "
|
|
107
|
+
export declare const MrlIconButton: React.ForwardRefExoticComponent<Pick<MrlIconButtonProps, "form" | "slot" | "style" | "title" | "text" | "dir" | "name" | "role" | "children" | "disabled" | "key" | "placeholder" | "id" | "defaultValue" | "state" | "value" | "kind" | "size" | "attrs" | "defaultChecked" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "draggable" | "hidden" | "lang" | "spellCheck" | "tabIndex" | "inputMode" | "is" | "radioGroup" | "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" | "type" | "client" | "loading" | "loadingText" | "toggleAria" | "position" | "icon" | "badge" | "disableEvents" | "tipAnchor" | "toggleStyle" | "tooltipKind" | "wrapperClassName" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget"> & React.RefAttributes<HTMLButtonElement>>;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { MouseEvent, ReactNode } from 'react';
|
|
2
2
|
import { DSIconType } from '../../../';
|
|
3
3
|
export interface MrlMenuItemProps {
|
|
4
4
|
/** ID for associated description */
|
|
@@ -6,7 +6,7 @@ export interface MrlMenuItemProps {
|
|
|
6
6
|
/**
|
|
7
7
|
Children to be rendered within the menu component
|
|
8
8
|
*/
|
|
9
|
-
children:
|
|
9
|
+
children: ReactNode | string;
|
|
10
10
|
/** Classname for the menu item */
|
|
11
11
|
className?: string;
|
|
12
12
|
/** If the menu item is disabled */
|
|
@@ -16,11 +16,11 @@ export interface MrlMenuItemProps {
|
|
|
16
16
|
/** Unique ID for the menu item */
|
|
17
17
|
id?: string;
|
|
18
18
|
/** Callback to be called when the menu item is clicked */
|
|
19
|
-
onClick
|
|
19
|
+
onClick?: (e?: MouseEvent<HTMLButtonElement>) => void;
|
|
20
20
|
/** Callback to be called when the menu item is hovered */
|
|
21
|
-
onMouseOver?: (e?:
|
|
21
|
+
onMouseOver?: (e?: MouseEvent) => void;
|
|
22
22
|
/** Callback to be called when the menu item is hovered out */
|
|
23
|
-
onMouseOut?: (e?:
|
|
23
|
+
onMouseOut?: (e?: MouseEvent) => void;
|
|
24
24
|
/** Data-qa attribute for the menu item */
|
|
25
25
|
dataQa?: string;
|
|
26
26
|
/** If the menu item is selected */
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import React, { ComponentPropsWithRef } from 'react';
|
|
2
|
+
import { MrlIconButtonProps, MrlMenuProps } from '../../../';
|
|
3
|
+
/**
|
|
4
|
+
* Props for the MrlToolbar component.
|
|
5
|
+
*/
|
|
6
|
+
export interface MrlToolbarProps extends ComponentPropsWithRef<'div'> {
|
|
7
|
+
children?: React.ReactNode;
|
|
8
|
+
kind?: 'default' | 'inverse' | 'skeleton';
|
|
9
|
+
/**
|
|
10
|
+
* An optional prop to apply an aria-label to the MrlToobar
|
|
11
|
+
*/
|
|
12
|
+
label?: string;
|
|
13
|
+
lastToolbarInRow?: boolean;
|
|
14
|
+
/**
|
|
15
|
+
* An optional prop to set the maximum number of visible items in a toolbar.
|
|
16
|
+
* Additional items will appear in a menu.
|
|
17
|
+
*/
|
|
18
|
+
maxVisibleItems?: number;
|
|
19
|
+
menuButtonProps?: MrlIconButtonProps;
|
|
20
|
+
menuProps?: MrlMenuProps;
|
|
21
|
+
orientation?: 'horizontal' | 'vertical';
|
|
22
|
+
/**
|
|
23
|
+
* A boolean prop that sets RovingTabindex in the MrlToolbar
|
|
24
|
+
*/
|
|
25
|
+
shouldUseRti?: boolean;
|
|
26
|
+
/**
|
|
27
|
+
* Sets the size of the toolbar - defaults to 'small'
|
|
28
|
+
*/
|
|
29
|
+
size?: 'xsmall' | 'small' | 'medium';
|
|
30
|
+
spaced?: boolean;
|
|
31
|
+
}
|
|
32
|
+
/**
|
|
33
|
+
* MrlToolbar component.
|
|
34
|
+
*
|
|
35
|
+
* @param props The MrlToolbar component properties.
|
|
36
|
+
* @returns The MrlToolbar component.
|
|
37
|
+
*/
|
|
38
|
+
export declare const MrlToolbar: (props: MrlToolbarProps) => JSX.Element;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './MrlToolbar';
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
import { MouseEvent, ReactElement } from 'react';
|
|
2
|
+
import { MrlIconButtonProps, MrlMenuItemProps } from '../../../';
|
|
3
|
+
/**
|
|
4
|
+
* Props for the MrlToolbarButton component.
|
|
5
|
+
*/
|
|
6
|
+
export interface MrlToolbarButtonProps {
|
|
7
|
+
/** Additional class to add to the Toolbar button */
|
|
8
|
+
className?: string;
|
|
9
|
+
/**
|
|
10
|
+
* The icon that will be rendered.
|
|
11
|
+
*/
|
|
12
|
+
icon: ReactElement;
|
|
13
|
+
includeInRoving?: boolean;
|
|
14
|
+
/**
|
|
15
|
+
* A prop used to set a toolbar button to never move into the menu.
|
|
16
|
+
*/
|
|
17
|
+
lockedInToolbar?: boolean;
|
|
18
|
+
/**
|
|
19
|
+
* onClick event for the button.
|
|
20
|
+
*/
|
|
21
|
+
onClick?: (e?: MouseEvent<HTMLButtonElement>) => void;
|
|
22
|
+
/**
|
|
23
|
+
* Props used to control the display of the button in the menu.
|
|
24
|
+
*/
|
|
25
|
+
menuItemProps?: Omit<MrlMenuItemProps, 'onClick'>;
|
|
26
|
+
/**
|
|
27
|
+
* A prop used to render the item in the menu instead of the toolbar.
|
|
28
|
+
*/
|
|
29
|
+
renderInMenu?: boolean;
|
|
30
|
+
text: string;
|
|
31
|
+
/**
|
|
32
|
+
* Props used to control the display of the button in the toolbar.
|
|
33
|
+
*/
|
|
34
|
+
toolbarButtonProps?: {
|
|
35
|
+
badge?: MrlIconButtonProps['badge'];
|
|
36
|
+
client?: MrlIconButtonProps['client'];
|
|
37
|
+
disableEvents?: MrlIconButtonProps['disableEvents'];
|
|
38
|
+
kind?: MrlIconButtonProps['kind'];
|
|
39
|
+
loading?: MrlIconButtonProps['loading'];
|
|
40
|
+
loadingText?: MrlIconButtonProps['loadingText'];
|
|
41
|
+
onKeyUp?: MrlIconButtonProps['onKeyUp'];
|
|
42
|
+
onMouseUp?: MrlIconButtonProps['onMouseUp'];
|
|
43
|
+
position?: MrlIconButtonProps['position'];
|
|
44
|
+
size?: MrlIconButtonProps['size'];
|
|
45
|
+
state?: MrlIconButtonProps['state'];
|
|
46
|
+
tipAnchor?: MrlIconButtonProps['tipAnchor'];
|
|
47
|
+
toggleAria?: MrlIconButtonProps['toggleAria'];
|
|
48
|
+
toggleStyle?: MrlIconButtonProps['toggleStyle'];
|
|
49
|
+
tooltipKind?: MrlIconButtonProps['tooltipKind'];
|
|
50
|
+
};
|
|
51
|
+
}
|
|
52
|
+
/**
|
|
53
|
+
* MrlToolbarButton component.
|
|
54
|
+
*
|
|
55
|
+
* @param props The MrlToolbarButton component properties.
|
|
56
|
+
* @returns The MrlToolbarButton component.
|
|
57
|
+
*/
|
|
58
|
+
export declare const MrlToolbarButton: (props: MrlToolbarButtonProps) => JSX.Element;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './MrlToolbarButton';
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
/**
|
|
3
|
+
* Props for the MrlToolbarItem component.
|
|
4
|
+
*/
|
|
5
|
+
export interface MrlToolbarItemProps {
|
|
6
|
+
/**
|
|
7
|
+
* A prop used to set a toolbar button to never move into the menu.
|
|
8
|
+
*/
|
|
9
|
+
lockedInToolbar?: boolean;
|
|
10
|
+
/**
|
|
11
|
+
* The rendered component in the overflow menu.
|
|
12
|
+
* If nothing is passed, the toolbarItem will be rendered in the menu.
|
|
13
|
+
*/
|
|
14
|
+
menuItem?: JSX.Element;
|
|
15
|
+
/**
|
|
16
|
+
* A prop used to render the item in the menu instead of the toolbar.
|
|
17
|
+
*/
|
|
18
|
+
renderInMenu?: boolean;
|
|
19
|
+
/**
|
|
20
|
+
* The rendered markup in the toolbar.
|
|
21
|
+
*/
|
|
22
|
+
toolbarItem: JSX.Element;
|
|
23
|
+
}
|
|
24
|
+
/**
|
|
25
|
+
* MrlToolbarItem component.
|
|
26
|
+
*
|
|
27
|
+
* @param props The MrlToolbarItem component properties.
|
|
28
|
+
* @returns The MrlToolbarItem component.
|
|
29
|
+
*/
|
|
30
|
+
export declare const MrlToolbarItem: (props: MrlToolbarItemProps) => JSX.Element | null;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './MrlToolbarItem';
|