@patternfly/react-core 4.227.7 → 4.228.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.
- package/CHANGELOG.md +27 -0
- package/dist/esm/components/Menu/MenuItem.d.ts +3 -1
- package/dist/esm/components/Menu/MenuItem.d.ts.map +1 -1
- package/dist/esm/components/Menu/MenuItem.js +2 -2
- package/dist/esm/components/Menu/MenuItem.js.map +1 -1
- package/dist/esm/components/MenuToggle/MenuToggle.d.ts +6 -12
- package/dist/esm/components/MenuToggle/MenuToggle.d.ts.map +1 -1
- package/dist/esm/components/MenuToggle/MenuToggle.js +12 -8
- package/dist/esm/components/MenuToggle/MenuToggle.js.map +1 -1
- package/dist/esm/components/Tabs/OverflowTab.d.ts +16 -0
- package/dist/esm/components/Tabs/OverflowTab.d.ts.map +1 -0
- package/dist/esm/components/Tabs/OverflowTab.js +74 -0
- package/dist/esm/components/Tabs/OverflowTab.js.map +1 -0
- package/dist/esm/components/Tabs/Tabs.d.ts +12 -0
- package/dist/esm/components/Tabs/Tabs.d.ts.map +1 -1
- package/dist/esm/components/Tabs/Tabs.js +36 -13
- package/dist/esm/components/Tabs/Tabs.js.map +1 -1
- package/dist/esm/components/TextInputGroup/TextInputGroup.d.ts +2 -0
- package/dist/esm/components/TextInputGroup/TextInputGroup.d.ts.map +1 -1
- package/dist/esm/components/TextInputGroup/TextInputGroup.js +2 -2
- package/dist/esm/components/TextInputGroup/TextInputGroup.js.map +1 -1
- package/dist/esm/components/TextInputGroup/TextInputGroupMain.d.ts +1 -1
- package/dist/esm/components/TextInputGroup/TextInputGroupMain.d.ts.map +1 -1
- package/dist/esm/components/TreeView/TreeView.d.ts +2 -0
- package/dist/esm/components/TreeView/TreeView.d.ts.map +1 -1
- package/dist/esm/components/TreeView/TreeView.js +3 -3
- package/dist/esm/components/TreeView/TreeView.js.map +1 -1
- package/dist/esm/components/TreeView/TreeViewListItem.d.ts +2 -0
- package/dist/esm/components/TreeView/TreeViewListItem.d.ts.map +1 -1
- package/dist/esm/components/TreeView/TreeViewListItem.js +23 -14
- package/dist/esm/components/TreeView/TreeViewListItem.js.map +1 -1
- package/dist/js/components/Menu/MenuItem.d.ts +3 -1
- package/dist/js/components/Menu/MenuItem.d.ts.map +1 -1
- package/dist/js/components/Menu/MenuItem.js +2 -2
- package/dist/js/components/Menu/MenuItem.js.map +1 -1
- package/dist/js/components/MenuToggle/MenuToggle.d.ts +6 -12
- package/dist/js/components/MenuToggle/MenuToggle.d.ts.map +1 -1
- package/dist/js/components/MenuToggle/MenuToggle.js +12 -8
- package/dist/js/components/MenuToggle/MenuToggle.js.map +1 -1
- package/dist/js/components/Tabs/OverflowTab.d.ts +16 -0
- package/dist/js/components/Tabs/OverflowTab.d.ts.map +1 -0
- package/dist/js/components/Tabs/OverflowTab.js +78 -0
- package/dist/js/components/Tabs/OverflowTab.js.map +1 -0
- package/dist/js/components/Tabs/Tabs.d.ts +12 -0
- package/dist/js/components/Tabs/Tabs.d.ts.map +1 -1
- package/dist/js/components/Tabs/Tabs.js +36 -13
- package/dist/js/components/Tabs/Tabs.js.map +1 -1
- package/dist/js/components/TextInputGroup/TextInputGroup.d.ts +2 -0
- package/dist/js/components/TextInputGroup/TextInputGroup.d.ts.map +1 -1
- package/dist/js/components/TextInputGroup/TextInputGroup.js +2 -2
- package/dist/js/components/TextInputGroup/TextInputGroup.js.map +1 -1
- package/dist/js/components/TextInputGroup/TextInputGroupMain.d.ts +1 -1
- package/dist/js/components/TextInputGroup/TextInputGroupMain.d.ts.map +1 -1
- package/dist/js/components/TreeView/TreeView.d.ts +2 -0
- package/dist/js/components/TreeView/TreeView.d.ts.map +1 -1
- package/dist/js/components/TreeView/TreeView.js +3 -3
- package/dist/js/components/TreeView/TreeView.js.map +1 -1
- package/dist/js/components/TreeView/TreeViewListItem.d.ts +2 -0
- package/dist/js/components/TreeView/TreeViewListItem.d.ts.map +1 -1
- package/dist/js/components/TreeView/TreeViewListItem.js +23 -14
- package/dist/js/components/TreeView/TreeViewListItem.js.map +1 -1
- package/dist/styles/base-no-reset.css +9 -0
- package/dist/styles/base.css +9 -0
- package/dist/umd/react-core.css +21 -31
- package/dist/umd/react-core.js +149 -48
- package/dist/umd/react-core.min.css +21 -31
- package/dist/umd/react-core.min.js +5 -5
- package/package.json +6 -6
- package/src/components/Menu/MenuItem.tsx +4 -0
- package/src/components/MenuToggle/MenuToggle.tsx +63 -25
- package/src/components/Page/examples/Page.md +10 -615
- package/src/components/Page/examples/PageCenteredSection.tsx +76 -0
- package/src/components/Page/examples/PageGroupSection.tsx +106 -0
- package/src/components/Page/examples/PageHorizontalNav.tsx +43 -0
- package/src/components/Page/examples/PageMainSectionPadding.tsx +72 -0
- package/src/components/Page/examples/PageTertiaryNav.tsx +42 -0
- package/src/components/Page/examples/PageUncontrolledNav.tsx +53 -0
- package/src/components/Page/examples/PageVerticalNav.tsx +65 -0
- package/src/components/Page/examples/PageVerticalNavUsingPageHeaderComponent.tsx +44 -0
- package/src/components/Page/examples/PageWithOrWithoutFill.tsx +67 -0
- package/src/components/Switch/examples/Switch.md +6 -153
- package/src/components/Switch/examples/SwitchBasic.tsx +20 -0
- package/src/components/Switch/examples/SwitchCheckedWithLabel.tsx +22 -0
- package/src/components/Switch/examples/SwitchDisabled.tsx +28 -0
- package/src/components/Switch/examples/SwitchReversed.tsx +21 -0
- package/src/components/Switch/examples/SwitchUncontrolled.tsx +14 -0
- package/src/components/Switch/examples/SwitchWithoutLabel.tsx +12 -0
- package/src/components/Tabs/OverflowTab.tsx +141 -0
- package/src/components/Tabs/Tabs.tsx +72 -25
- package/src/components/Tabs/examples/Tabs.md +6 -1
- package/src/components/Tabs/examples/TabsHorizontalOverflow.tsx +67 -0
- package/src/components/TextInputGroup/TextInputGroup.tsx +9 -1
- package/src/components/TextInputGroup/TextInputGroupMain.tsx +1 -1
- package/src/components/TreeView/TreeView.tsx +5 -0
- package/src/components/TreeView/TreeViewListItem.tsx +31 -17
- package/src/components/TreeView/__tests__/__snapshots__/TreeView.test.tsx.snap +299 -299
- package/src/components/TreeView/examples/TreeView.md +125 -7
- package/src/demos/ComposableMenu/ComposableMenu.md +8 -0
- package/src/demos/ComposableMenu/examples/ComposableTypeaheadSelect.tsx +196 -0
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,33 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
# 4.228.0 (2022-07-29)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Features
|
|
10
|
+
|
|
11
|
+
* **Tabs:** add horizontal overflow option ([#7742](https://github.com/patternfly/patternfly-react/issues/7742)) ([2745cd1](https://github.com/patternfly/patternfly-react/commit/2745cd199669b0c0a5cdbd5c3d4e7453c6e1c435))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
## 4.227.9 (2022-07-28)
|
|
18
|
+
|
|
19
|
+
**Note:** Version bump only for package @patternfly/react-core
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
## 4.227.8 (2022-07-28)
|
|
26
|
+
|
|
27
|
+
**Note:** Version bump only for package @patternfly/react-core
|
|
28
|
+
|
|
29
|
+
|
|
30
|
+
|
|
31
|
+
|
|
32
|
+
|
|
6
33
|
## 4.227.7 (2022-07-28)
|
|
7
34
|
|
|
8
35
|
**Note:** Version bump only for package @patternfly/react-core
|
|
@@ -34,6 +34,8 @@ export interface MenuItemProps extends Omit<React.HTMLProps<HTMLLIElement>, 'onC
|
|
|
34
34
|
isExternalLink?: boolean;
|
|
35
35
|
/** Flag indicating if the option is selected */
|
|
36
36
|
isSelected?: boolean;
|
|
37
|
+
/** Flag indicating the item is focused */
|
|
38
|
+
isFocused?: boolean;
|
|
37
39
|
/** @beta Flyout menu */
|
|
38
40
|
flyoutMenu?: React.ReactElement;
|
|
39
41
|
/** @beta Callback function when mouse leaves trigger */
|
|
@@ -49,5 +51,5 @@ export interface MenuItemProps extends Omit<React.HTMLProps<HTMLLIElement>, 'onC
|
|
|
49
51
|
/** @hide Forwarded ref */
|
|
50
52
|
innerRef?: React.Ref<HTMLAnchorElement | HTMLButtonElement>;
|
|
51
53
|
}
|
|
52
|
-
export declare const MenuItem: React.ForwardRefExoticComponent<Pick<MenuItemProps, "children" | "className" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "cite" | "classID" | "cols" | "colSpan" | "content" | "controls" | "coords" | "crossOrigin" | "data" | "dateTime" | "default" | "defer" | "disabled" | "download" | "encType" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "height" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "label" | "list" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "multiple" | "muted" | "name" | "nonce" | "noValidate" | "open" | "optimum" | "pattern" | "placeholder" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "size" | "sizes" | "span" | "src" | "srcDoc" | "srcLang" | "srcSet" | "start" | "step" | "summary" | "target" | "type" | "useMap" | "value" | "width" | "wmode" | "wrap" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "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" | "key" | "direction" | "component" | "isActive" | "isDisabled" | "isLoading" | "icon" | "innerRef" | "description" | "to" | "isSelected" | "actions" | "isFavorited" | "itemId" | "hasCheck" | "isLoadButton" | "flyoutMenu" | "isExternalLink" | "onShowFlyout" | "drilldownMenu" | "isOnPath"> & React.RefAttributes<any>>;
|
|
54
|
+
export declare const MenuItem: React.ForwardRefExoticComponent<Pick<MenuItemProps, "children" | "className" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "cite" | "classID" | "cols" | "colSpan" | "content" | "controls" | "coords" | "crossOrigin" | "data" | "dateTime" | "default" | "defer" | "disabled" | "download" | "encType" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "height" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "label" | "list" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "multiple" | "muted" | "name" | "nonce" | "noValidate" | "open" | "optimum" | "pattern" | "placeholder" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "size" | "sizes" | "span" | "src" | "srcDoc" | "srcLang" | "srcSet" | "start" | "step" | "summary" | "target" | "type" | "useMap" | "value" | "width" | "wmode" | "wrap" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "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" | "key" | "direction" | "component" | "isActive" | "isDisabled" | "isLoading" | "icon" | "innerRef" | "description" | "to" | "isSelected" | "isFocused" | "actions" | "isFavorited" | "itemId" | "hasCheck" | "isLoadButton" | "flyoutMenu" | "isExternalLink" | "onShowFlyout" | "drilldownMenu" | "isOnPath"> & React.RefAttributes<any>>;
|
|
53
55
|
//# sourceMappingURL=MenuItem.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MenuItem.d.ts","sourceRoot":"","sources":["../../../../src/components/Menu/MenuItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAiB/B,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,aAAa,CAAC,EAAE,SAAS,CAAC;IACpF,kDAAkD;IAClD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,qDAAqD;IACrD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8EAA8E;IAC9E,MAAM,CAAC,EAAE,GAAG,CAAC;IACb,6BAA6B;IAC7B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,oDAAoD;IACpD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iDAAiD;IACjD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+CAA+C;IAC/C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,gDAAgD;IAChD,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,sCAAsC;IACtC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,8BAA8B;IAC9B,OAAO,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;IAChC,6CAA6C;IAC7C,SAAS,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;IAC9D,qCAAqC;IACrC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,4BAA4B;IAC5B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,2CAA2C;IAC3C,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,mCAAmC;IACnC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,gCAAgC;IAChC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,gDAAgD;IAChD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,wBAAwB;IACxB,UAAU,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAChC,wDAAwD;IACxD,YAAY,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;IACrC,gFAAgF;IAChF,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,MAAM,KAAK,CAAC,SAAS,CAAC,CAAC;IAC1D,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,sDAAsD;IACtD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0BAA0B;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,CAAC;CAC7D;
|
|
1
|
+
{"version":3,"file":"MenuItem.d.ts","sourceRoot":"","sources":["../../../../src/components/Menu/MenuItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAiB/B,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,aAAa,CAAC,EAAE,SAAS,CAAC;IACpF,kDAAkD;IAClD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,qDAAqD;IACrD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8EAA8E;IAC9E,MAAM,CAAC,EAAE,GAAG,CAAC;IACb,6BAA6B;IAC7B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,oDAAoD;IACpD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iDAAiD;IACjD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+CAA+C;IAC/C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,gDAAgD;IAChD,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,sCAAsC;IACtC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,8BAA8B;IAC9B,OAAO,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;IAChC,6CAA6C;IAC7C,SAAS,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;IAC9D,qCAAqC;IACrC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,4BAA4B;IAC5B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,2CAA2C;IAC3C,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,mCAAmC;IACnC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,gCAAgC;IAChC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,gDAAgD;IAChD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,wBAAwB;IACxB,UAAU,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAChC,wDAAwD;IACxD,YAAY,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;IACrC,gFAAgF;IAChF,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,MAAM,KAAK,CAAC,SAAS,CAAC,CAAC;IAC1D,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,sDAAsD;IACtD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0BAA0B;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,CAAC;CAC7D;AAgUD,eAAO,MAAM,QAAQ,slMAEnB,CAAC"}
|
|
@@ -19,7 +19,7 @@ const FlyoutContext = React.createContext({
|
|
|
19
19
|
direction: 'right'
|
|
20
20
|
});
|
|
21
21
|
const MenuItemBase = (_a) => {
|
|
22
|
-
var { children, className, itemId = null, to, hasCheck = false, isActive = null, isFavorited = null, isLoadButton = false, isLoading = false, flyoutMenu, direction, description = null, onClick = () => { }, component = 'button', isDisabled = false, isExternalLink = false, isSelected = null, icon, actions, onShowFlyout, drilldownMenu, isOnPath, innerRef } = _a, props = __rest(_a, ["children", "className", "itemId", "to", "hasCheck", "isActive", "isFavorited", "isLoadButton", "isLoading", "flyoutMenu", "direction", "description", "onClick", "component", "isDisabled", "isExternalLink", "isSelected", "icon", "actions", "onShowFlyout", "drilldownMenu", "isOnPath", "innerRef"]);
|
|
22
|
+
var { children, className, itemId = null, to, hasCheck = false, isActive = null, isFavorited = null, isLoadButton = false, isLoading = false, flyoutMenu, direction, description = null, onClick = () => { }, component = 'button', isDisabled = false, isExternalLink = false, isSelected = null, isFocused, icon, actions, onShowFlyout, drilldownMenu, isOnPath, innerRef } = _a, props = __rest(_a, ["children", "className", "itemId", "to", "hasCheck", "isActive", "isFavorited", "isLoadButton", "isLoading", "flyoutMenu", "direction", "description", "onClick", "component", "isDisabled", "isExternalLink", "isSelected", "isFocused", "icon", "actions", "onShowFlyout", "drilldownMenu", "isOnPath", "innerRef"]);
|
|
23
23
|
const { menuId, parentMenu, onSelect, onActionClick, activeItemId, selected, drilldownItemPath, onDrillIn, onDrillOut, flyoutRef, setFlyoutRef, disableHover } = React.useContext(MenuContext);
|
|
24
24
|
let Component = (to ? 'a' : component);
|
|
25
25
|
if (hasCheck && !to) {
|
|
@@ -188,7 +188,7 @@ const MenuItemBase = (_a) => {
|
|
|
188
188
|
setFlyoutRef(null);
|
|
189
189
|
}
|
|
190
190
|
};
|
|
191
|
-
return (React.createElement("li", Object.assign({ className: css(styles.menuListItem, isDisabled && styles.modifiers.disabled, _isOnPath && styles.modifiers.currentPath, isLoadButton && styles.modifiers.load, isLoading && styles.modifiers.loading, className), onMouseOver: onMouseOver }, (flyoutMenu && { onKeyDown: handleFlyout }), { ref: ref, role: !hasCheck ? 'none' : 'menuitem' }, props),
|
|
191
|
+
return (React.createElement("li", Object.assign({ className: css(styles.menuListItem, isDisabled && styles.modifiers.disabled, _isOnPath && styles.modifiers.currentPath, isLoadButton && styles.modifiers.load, isLoading && styles.modifiers.loading, isFocused && styles.modifiers.focus, className), onMouseOver: onMouseOver }, (flyoutMenu && { onKeyDown: handleFlyout }), { ref: ref, role: !hasCheck ? 'none' : 'menuitem' }, props),
|
|
192
192
|
React.createElement(GenerateId, null, randomId => (React.createElement(Component, Object.assign({ tabIndex: -1, className: css(styles.menuItem, getIsSelected() && !hasCheck && styles.modifiers.selected, className), "aria-current": getAriaCurrent() }, (!hasCheck && { disabled: isDisabled }), (!hasCheck && { role: 'menuitem' }), { ref: innerRef }, (!hasCheck && {
|
|
193
193
|
onClick: (event) => {
|
|
194
194
|
onItemSelect(event, onSelect);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MenuItem.js","sourceRoot":"","sources":["../../../../src/components/Menu/MenuItem.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,MAAM,MAAM,mDAAmD,CAAC;AACvE,OAAO,EAAE,GAAG,EAAE,MAAM,0BAA0B,CAAC;AAC/C,OAAO,SAAS,MAAM,oEAAoE,CAAC;AAC3F,OAAO,WAAW,MAAM,6EAA6E,CAAC;AACtG,OAAO,UAAU,MAAM,qEAAqE,CAAC;AAC7F,OAAO,mBAAmB,MAAM,+DAA+D,CAAC;AAChG,OAAO,cAAc,MAAM,yDAAyD,CAAC;AACrF,OAAO,aAAa,MAAM,wDAAwD,CAAC;AACnF,OAAO,SAAS,MAAM,mDAAmD,CAAC;AAC1E,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAC7D,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,EAAE,yBAAyB,EAAE,MAAM,mCAAmC,CAAC;AAC9E,OAAO,EAAE,UAAU,EAAE,MAAM,qCAAqC,CAAC;
|
|
1
|
+
{"version":3,"file":"MenuItem.js","sourceRoot":"","sources":["../../../../src/components/Menu/MenuItem.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { BadgeProps } from '../Badge';
|
|
3
|
-
export
|
|
3
|
+
export declare type MenuToggleElement = HTMLDivElement | HTMLButtonElement;
|
|
4
|
+
export interface MenuToggleProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<MenuToggleElement>, MenuToggleElement>, 'ref'> {
|
|
4
5
|
/** Content rendered inside the toggle */
|
|
5
6
|
children?: React.ReactNode;
|
|
6
7
|
/** Additional classes added to the toggle */
|
|
@@ -14,25 +15,18 @@ export interface MenuToggleProps extends Omit<React.DetailedHTMLProps<React.Butt
|
|
|
14
15
|
/** Flag indicating the toggle takes up the full width of its parent */
|
|
15
16
|
isFullWidth?: boolean;
|
|
16
17
|
/** Variant styles of the menu toggle */
|
|
17
|
-
variant?: 'default' | 'plain' | 'primary' | 'plainText' | 'secondary';
|
|
18
|
+
variant?: 'default' | 'plain' | 'primary' | 'plainText' | 'secondary' | 'typeahead';
|
|
18
19
|
/** Optional icon rendered inside the toggle, before the children content */
|
|
19
20
|
icon?: React.ReactNode;
|
|
20
21
|
/** Optional badge rendered inside the toggle, after the children content */
|
|
21
22
|
badge?: BadgeProps | React.ReactNode;
|
|
22
23
|
/** Forwarded ref */
|
|
23
|
-
innerRef?: React.Ref<
|
|
24
|
+
innerRef?: React.Ref<MenuToggleElement>;
|
|
24
25
|
}
|
|
25
26
|
export declare class MenuToggleBase extends React.Component<MenuToggleProps> {
|
|
26
27
|
displayName: string;
|
|
27
|
-
static defaultProps:
|
|
28
|
-
className: string;
|
|
29
|
-
isExpanded: boolean;
|
|
30
|
-
isDisabled: boolean;
|
|
31
|
-
isFullWidth: boolean;
|
|
32
|
-
isFullHeight: boolean;
|
|
33
|
-
variant: string;
|
|
34
|
-
};
|
|
28
|
+
static defaultProps: MenuToggleProps;
|
|
35
29
|
render(): JSX.Element;
|
|
36
30
|
}
|
|
37
|
-
export declare const MenuToggle: React.ForwardRefExoticComponent<MenuToggleProps & React.RefAttributes<
|
|
31
|
+
export declare const MenuToggle: React.ForwardRefExoticComponent<MenuToggleProps & React.RefAttributes<MenuToggleElement>>;
|
|
38
32
|
//# sourceMappingURL=MenuToggle.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MenuToggle.d.ts","sourceRoot":"","sources":["../../../../src/components/MenuToggle/MenuToggle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAEtC,MAAM,WAAW,eACf,SAAQ,IAAI,CAAC,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,
|
|
1
|
+
{"version":3,"file":"MenuToggle.d.ts","sourceRoot":"","sources":["../../../../src/components/MenuToggle/MenuToggle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAEtC,oBAAY,iBAAiB,GAAG,cAAc,GAAG,iBAAiB,CAAC;AAEnE,MAAM,WAAW,eACf,SAAQ,IAAI,CAAC,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC,EAAE,iBAAiB,CAAC,EAAE,KAAK,CAAC;IACxG,yCAAyC;IACzC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,6CAA6C;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sDAAsD;IACtD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,6CAA6C;IAC7C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,gDAAgD;IAChD,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,uEAAuE;IACvE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,wCAAwC;IACxC,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,WAAW,GAAG,WAAW,GAAG,WAAW,CAAC;IACpF,4EAA4E;IAC5E,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,4EAA4E;IAC5E,KAAK,CAAC,EAAE,UAAU,GAAG,KAAK,CAAC,SAAS,CAAC;IACrC,oBAAoB;IACpB,QAAQ,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;CACzC;AAED,qBAAa,cAAe,SAAQ,KAAK,CAAC,SAAS,CAAC,eAAe,CAAC;IAClE,WAAW,SAAoB;IAC/B,MAAM,CAAC,YAAY,EAAE,eAAe,CAOlC;IAEF,MAAM;CA2FP;AAED,eAAO,MAAM,UAAU,2FAErB,CAAC"}
|
|
@@ -9,19 +9,23 @@ export class MenuToggleBase extends React.Component {
|
|
|
9
9
|
this.displayName = 'MenuToggleBase';
|
|
10
10
|
}
|
|
11
11
|
render() {
|
|
12
|
-
const _a = this.props, { children, className, icon, badge, isExpanded, isDisabled, isFullHeight, isFullWidth, variant, innerRef } = _a,
|
|
12
|
+
const _a = this.props, { children, className, icon, badge, isExpanded, isDisabled, isFullHeight, isFullWidth, variant, innerRef, onClick, 'aria-label': ariaLabel } = _a, otherProps = __rest(_a, ["children", "className", "icon", "badge", "isExpanded", "isDisabled", "isFullHeight", "isFullWidth", "variant", "innerRef", "onClick", 'aria-label']);
|
|
13
13
|
const isPlain = variant === 'plain';
|
|
14
14
|
const isPlainText = variant === 'plainText';
|
|
15
|
+
const isTypeahead = variant === 'typeahead';
|
|
16
|
+
const toggleControls = (React.createElement("span", { className: css(styles.menuToggleControls) },
|
|
17
|
+
React.createElement("span", { className: css(styles.menuToggleToggleIcon) },
|
|
18
|
+
React.createElement(CaretDownIcon, { "aria-hidden": true }))));
|
|
15
19
|
const content = (React.createElement(React.Fragment, null,
|
|
16
20
|
icon && React.createElement("span", { className: css(styles.menuToggleIcon) }, icon),
|
|
17
|
-
React.createElement("span", { className: "pf-c-menu-toggle__text" }, children),
|
|
21
|
+
isTypeahead ? children : React.createElement("span", { className: "pf-c-menu-toggle__text" }, children),
|
|
18
22
|
badge && React.createElement("span", { className: css(styles.menuToggleCount) }, badge),
|
|
19
|
-
React.createElement("
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
23
|
+
isTypeahead ? (React.createElement("button", { type: "button", className: css(styles.menuToggleButton), "aria-expanded": isExpanded, onClick: onClick, "aria-label": "Menu toggle" }, toggleControls)) : (toggleControls)));
|
|
24
|
+
const componentProps = Object.assign(Object.assign({ className: css(styles.menuToggle, isExpanded && styles.modifiers.expanded, variant === 'primary' && styles.modifiers.primary, (isPlain || isPlainText) && styles.modifiers.plain, isPlainText && styles.modifiers.text, isFullHeight && styles.modifiers.fullHeight, isTypeahead && styles.modifiers.typeahead, isFullWidth && styles.modifiers.fullWidth, className), children: isPlain ? children : content }, (isDisabled && { disabled: true })), otherProps);
|
|
25
|
+
if (isTypeahead) {
|
|
26
|
+
return React.createElement("div", Object.assign({ ref: innerRef }, componentProps));
|
|
27
|
+
}
|
|
28
|
+
return (React.createElement("button", Object.assign({ className: css(styles.menuToggle, isExpanded && styles.modifiers.expanded, variant === 'primary' && styles.modifiers.primary, variant === 'secondary' && styles.modifiers.secondary, (isPlain || isPlainText) && styles.modifiers.plain, isPlainText && styles.modifiers.text, isFullHeight && styles.modifiers.fullHeight, isFullWidth && styles.modifiers.fullWidth, className), ref: innerRef, type: "button", "aria-label": ariaLabel, "aria-expanded": isExpanded, onClick: onClick }, componentProps)));
|
|
25
29
|
}
|
|
26
30
|
}
|
|
27
31
|
MenuToggleBase.defaultProps = {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MenuToggle.js","sourceRoot":"","sources":["../../../../src/components/MenuToggle/MenuToggle.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,MAAM,MAAM,gEAAgE,CAAC;AACpF,OAAO,EAAE,GAAG,EAAE,MAAM,0BAA0B,CAAC;AAC/C,OAAO,aAAa,MAAM,wDAAwD,CAAC;
|
|
1
|
+
{"version":3,"file":"MenuToggle.js","sourceRoot":"","sources":["../../../../src/components/MenuToggle/MenuToggle.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { TabProps } from './Tab';
|
|
3
|
+
export interface OverflowTabProps extends React.HTMLProps<HTMLLIElement> {
|
|
4
|
+
/** Additional classes added to the overflow tab */
|
|
5
|
+
className?: string;
|
|
6
|
+
/** The tabs that should be displayed in the menu */
|
|
7
|
+
overflowingTabs?: TabProps[];
|
|
8
|
+
/** Flag which shows the count of overflowing tabs when enabled */
|
|
9
|
+
showTabCount?: boolean;
|
|
10
|
+
/** The text which displays when an overflowing tab isn't selected */
|
|
11
|
+
defaultTitleText?: string;
|
|
12
|
+
/** The aria label applied to the button which toggles the tab overflow menu */
|
|
13
|
+
toggleAriaLabel?: string;
|
|
14
|
+
}
|
|
15
|
+
export declare const OverflowTab: React.FunctionComponent<OverflowTabProps>;
|
|
16
|
+
//# sourceMappingURL=OverflowTab.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"OverflowTab.d.ts","sourceRoot":"","sources":["../../../../src/components/Tabs/OverflowTab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGjC,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,SAAS,CAAC,aAAa,CAAC;IACtE,mDAAmD;IACnD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oDAAoD;IACpD,eAAe,CAAC,EAAE,QAAQ,EAAE,CAAC;IAC7B,kEAAkE;IAClE,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,qEAAqE;IACrE,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,+EAA+E;IAC/E,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAmHjE,CAAC"}
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
import { __rest } from "tslib";
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import styles from '@patternfly/react-styles/css/components/Tabs/tabs';
|
|
4
|
+
import { css } from '@patternfly/react-styles';
|
|
5
|
+
import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
|
|
6
|
+
import { Popper } from '../../helpers';
|
|
7
|
+
import { Menu, MenuContent, MenuList, MenuItem } from '../Menu';
|
|
8
|
+
import { TabsContext } from './TabsContext';
|
|
9
|
+
import { TabTitleText } from './TabTitleText';
|
|
10
|
+
export const OverflowTab = (_a) => {
|
|
11
|
+
var { className, overflowingTabs = [], showTabCount, defaultTitleText = 'More', toggleAriaLabel } = _a, props = __rest(_a, ["className", "overflowingTabs", "showTabCount", "defaultTitleText", "toggleAriaLabel"]);
|
|
12
|
+
const menuRef = React.useRef();
|
|
13
|
+
const overflowTabRef = React.useRef();
|
|
14
|
+
const overflowLIRef = React.useRef();
|
|
15
|
+
const [isExpanded, setIsExpanded] = React.useState(false);
|
|
16
|
+
const { localActiveKey, handleTabClick } = React.useContext(TabsContext);
|
|
17
|
+
const closeMenu = () => {
|
|
18
|
+
setIsExpanded(false);
|
|
19
|
+
overflowTabRef.current.focus();
|
|
20
|
+
};
|
|
21
|
+
const handleMenuKeys = (ev) => {
|
|
22
|
+
var _a;
|
|
23
|
+
const menuContainsEventTarget = (_a = menuRef === null || menuRef === void 0 ? void 0 : menuRef.current) === null || _a === void 0 ? void 0 : _a.contains(ev.target);
|
|
24
|
+
if (isExpanded && menuContainsEventTarget && ev.key === 'Escape') {
|
|
25
|
+
closeMenu();
|
|
26
|
+
}
|
|
27
|
+
};
|
|
28
|
+
const handleClick = (ev) => {
|
|
29
|
+
var _a, _b;
|
|
30
|
+
const clickIsOutsideMenu = !((_a = menuRef === null || menuRef === void 0 ? void 0 : menuRef.current) === null || _a === void 0 ? void 0 : _a.contains(ev.target));
|
|
31
|
+
const clickIsOutsideOverflowTab = !((_b = overflowTabRef === null || overflowTabRef === void 0 ? void 0 : overflowTabRef.current) === null || _b === void 0 ? void 0 : _b.contains(ev.target));
|
|
32
|
+
if (isExpanded && clickIsOutsideMenu && clickIsOutsideOverflowTab) {
|
|
33
|
+
closeMenu();
|
|
34
|
+
}
|
|
35
|
+
};
|
|
36
|
+
React.useEffect(() => {
|
|
37
|
+
window.addEventListener('click', handleClick);
|
|
38
|
+
window.addEventListener('keydown', handleMenuKeys);
|
|
39
|
+
return () => {
|
|
40
|
+
window.removeEventListener('click', handleClick);
|
|
41
|
+
window.removeEventListener('keydown', handleMenuKeys);
|
|
42
|
+
};
|
|
43
|
+
}, [isExpanded, menuRef, overflowTabRef]);
|
|
44
|
+
const selectedTab = overflowingTabs.find(tab => tab.eventKey === localActiveKey);
|
|
45
|
+
const tabTitle = (selectedTab === null || selectedTab === void 0 ? void 0 : selectedTab.title) ? selectedTab.title : defaultTitleText;
|
|
46
|
+
const toggleMenu = () => {
|
|
47
|
+
setIsExpanded(prevIsExpanded => !prevIsExpanded);
|
|
48
|
+
setTimeout(() => {
|
|
49
|
+
if (menuRef === null || menuRef === void 0 ? void 0 : menuRef.current) {
|
|
50
|
+
const firstElement = menuRef.current.querySelector('li > button,input:not(:disabled)');
|
|
51
|
+
firstElement && firstElement.focus();
|
|
52
|
+
}
|
|
53
|
+
}, 0);
|
|
54
|
+
};
|
|
55
|
+
const overflowTab = (React.createElement("li", Object.assign({ className: css(styles.tabsItem, 'pf-m-overflow', selectedTab && styles.modifiers.current, className), role: "presentation", ref: overflowLIRef }, props),
|
|
56
|
+
React.createElement("button", { className: css(styles.tabsLink, isExpanded && styles.modifiers.expanded), onClick: () => toggleMenu(), "aria-label": toggleAriaLabel, "aria-haspopup": "menu", "aria-expanded": isExpanded, role: "tab", ref: overflowTabRef },
|
|
57
|
+
React.createElement(TabTitleText, null,
|
|
58
|
+
tabTitle,
|
|
59
|
+
showTabCount && tabTitle === defaultTitleText && ` (${overflowingTabs.length})`),
|
|
60
|
+
React.createElement("span", { className: styles.tabsLinkToggleIcon },
|
|
61
|
+
React.createElement(AngleRightIcon, null)))));
|
|
62
|
+
const tabs = overflowingTabs.map(tab => (React.createElement(MenuItem, { key: tab.eventKey, itemId: tab.eventKey, isSelected: localActiveKey === tab.eventKey }, tab.title)));
|
|
63
|
+
const onTabSelect = (event, key) => {
|
|
64
|
+
closeMenu();
|
|
65
|
+
const selectedTabRef = overflowingTabs.find(tab => tab.eventKey === key).tabContentRef;
|
|
66
|
+
handleTabClick(event, key, selectedTabRef);
|
|
67
|
+
};
|
|
68
|
+
const overflowMenu = (React.createElement(Menu, { ref: menuRef, onSelect: (ev, itemId) => onTabSelect(ev, itemId) },
|
|
69
|
+
React.createElement(MenuContent, null,
|
|
70
|
+
React.createElement(MenuList, null, tabs))));
|
|
71
|
+
return (React.createElement(Popper, { trigger: overflowTab, popper: overflowMenu, isVisible: isExpanded, popperMatchesTriggerWidth: false, appendTo: overflowLIRef.current }));
|
|
72
|
+
};
|
|
73
|
+
OverflowTab.displayName = 'OverflowTab';
|
|
74
|
+
//# sourceMappingURL=OverflowTab.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"OverflowTab.js","sourceRoot":"","sources":["../../../../src/components/Tabs/OverflowTab.tsx"],"names":[],"mappings":"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"}
|
|
@@ -6,6 +6,14 @@ export declare enum TabsComponent {
|
|
|
6
6
|
div = "div",
|
|
7
7
|
nav = "nav"
|
|
8
8
|
}
|
|
9
|
+
export interface HorizontalOverflowObject {
|
|
10
|
+
/** Flag which shows the count of overflowing tabs when enabled */
|
|
11
|
+
showTabCount?: boolean;
|
|
12
|
+
/** The text which displays when an overflowing tab isn't selected */
|
|
13
|
+
defaultTitleText?: string;
|
|
14
|
+
/** The aria label applied to the button which toggles the tab overflow menu */
|
|
15
|
+
toggleAriaLabel?: string;
|
|
16
|
+
}
|
|
9
17
|
export interface TabsProps extends Omit<React.HTMLProps<HTMLElement | HTMLDivElement>, 'onSelect'>, OUIAProps {
|
|
10
18
|
/** Content rendered inside the tabs component. Must be React.ReactElement<TabProps>[] */
|
|
11
19
|
children: React.ReactNode;
|
|
@@ -81,6 +89,8 @@ export interface TabsProps extends Omit<React.HTMLProps<HTMLElement | HTMLDivEle
|
|
|
81
89
|
toggleAriaLabel?: string;
|
|
82
90
|
/** Callback function to toggle the expandable tabs. */
|
|
83
91
|
onToggle?: (isExpanded: boolean) => void;
|
|
92
|
+
/** @beta Flag which places overflowing tabs into a menu triggered by the last tab. Additionally an object can be passed with custom settings for the overflow tab. */
|
|
93
|
+
isOverflowHorizontal?: boolean | HorizontalOverflowObject;
|
|
84
94
|
}
|
|
85
95
|
interface TabsState {
|
|
86
96
|
showScrollButtons: boolean;
|
|
@@ -90,6 +100,7 @@ interface TabsState {
|
|
|
90
100
|
uncontrolledActiveKey: number | string;
|
|
91
101
|
uncontrolledIsExpandedLocal: boolean;
|
|
92
102
|
ouiaStateId: string;
|
|
103
|
+
overflowingTabCount: number;
|
|
93
104
|
}
|
|
94
105
|
export declare class Tabs extends React.Component<TabsProps, TabsState> {
|
|
95
106
|
static displayName: string;
|
|
@@ -98,6 +109,7 @@ export declare class Tabs extends React.Component<TabsProps, TabsState> {
|
|
|
98
109
|
scrollTimeout: NodeJS.Timeout;
|
|
99
110
|
static defaultProps: PickOptional<TabsProps>;
|
|
100
111
|
handleTabClick(event: React.MouseEvent<HTMLElement, MouseEvent>, eventKey: number | string, tabContentRef: React.RefObject<any>): void;
|
|
112
|
+
countOverflowingElements: (container: HTMLUListElement) => number;
|
|
101
113
|
handleScrollButtons: () => void;
|
|
102
114
|
scrollLeft: () => void;
|
|
103
115
|
scrollRight: () => void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../../src/components/Tabs/Tabs.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;
|
|
1
|
+
{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../../src/components/Tabs/Tabs.tsx"],"names":[],"mappings":"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"}
|
|
@@ -9,6 +9,7 @@ import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon';
|
|
|
9
9
|
import { getUniqueId, isElementInView, formatBreakpointMods } from '../../helpers/util';
|
|
10
10
|
import { TabContent } from './TabContent';
|
|
11
11
|
import { TabsContextProvider } from './TabsContext';
|
|
12
|
+
import { OverflowTab } from './OverflowTab';
|
|
12
13
|
import { Button } from '../Button';
|
|
13
14
|
import { getOUIAProps, getDefaultOUIAId, canUseDOM } from '../../helpers';
|
|
14
15
|
import { GenerateId } from '../../helpers/GenerateId/GenerateId';
|
|
@@ -26,7 +27,12 @@ export class Tabs extends React.Component {
|
|
|
26
27
|
super(props);
|
|
27
28
|
this.tabList = React.createRef();
|
|
28
29
|
this.scrollTimeout = null;
|
|
30
|
+
this.countOverflowingElements = (container) => {
|
|
31
|
+
const elements = Array.from(container.children);
|
|
32
|
+
return elements.filter(element => !isElementInView(container, element, false)).length;
|
|
33
|
+
};
|
|
29
34
|
this.handleScrollButtons = () => {
|
|
35
|
+
const { isOverflowHorizontal: isOverflowHorizontal } = this.props;
|
|
30
36
|
// add debounce to the scroll event
|
|
31
37
|
clearTimeout(this.scrollTimeout);
|
|
32
38
|
this.scrollTimeout = setTimeout(() => {
|
|
@@ -34,7 +40,8 @@ export class Tabs extends React.Component {
|
|
|
34
40
|
let disableLeftScrollButton = true;
|
|
35
41
|
let disableRightScrollButton = true;
|
|
36
42
|
let showScrollButtons = false;
|
|
37
|
-
|
|
43
|
+
let overflowingTabCount = 0;
|
|
44
|
+
if (container && !this.props.isVertical && !isOverflowHorizontal) {
|
|
38
45
|
// get first element and check if it is in view
|
|
39
46
|
const overflowOnLeft = !isElementInView(container, container.firstChild, false);
|
|
40
47
|
// get last element and check if it is in view
|
|
@@ -43,10 +50,14 @@ export class Tabs extends React.Component {
|
|
|
43
50
|
disableLeftScrollButton = !overflowOnLeft;
|
|
44
51
|
disableRightScrollButton = !overflowOnRight;
|
|
45
52
|
}
|
|
53
|
+
if (isOverflowHorizontal) {
|
|
54
|
+
overflowingTabCount = this.countOverflowingElements(container);
|
|
55
|
+
}
|
|
46
56
|
this.setState({
|
|
47
57
|
showScrollButtons,
|
|
48
58
|
disableLeftScrollButton,
|
|
49
|
-
disableRightScrollButton
|
|
59
|
+
disableRightScrollButton,
|
|
60
|
+
overflowingTabCount
|
|
50
61
|
});
|
|
51
62
|
}, 100);
|
|
52
63
|
};
|
|
@@ -94,7 +105,8 @@ export class Tabs extends React.Component {
|
|
|
94
105
|
shownKeys: this.props.defaultActiveKey !== undefined ? [this.props.defaultActiveKey] : [this.props.activeKey],
|
|
95
106
|
uncontrolledActiveKey: this.props.defaultActiveKey,
|
|
96
107
|
uncontrolledIsExpandedLocal: this.props.defaultIsExpanded,
|
|
97
|
-
ouiaStateId: getDefaultOUIAId(Tabs.displayName)
|
|
108
|
+
ouiaStateId: getDefaultOUIAId(Tabs.displayName),
|
|
109
|
+
overflowingTabCount: 0
|
|
98
110
|
};
|
|
99
111
|
if (this.props.isVertical && this.props.expandable !== undefined) {
|
|
100
112
|
if (!this.props.toggleAriaLabel && !this.props.toggleText) {
|
|
@@ -150,8 +162,8 @@ export class Tabs extends React.Component {
|
|
|
150
162
|
clearTimeout(this.scrollTimeout);
|
|
151
163
|
}
|
|
152
164
|
componentDidUpdate(prevProps) {
|
|
153
|
-
const { activeKey, mountOnEnter, children } = this.props;
|
|
154
|
-
const { shownKeys } = this.state;
|
|
165
|
+
const { activeKey, mountOnEnter, isOverflowHorizontal, children } = this.props;
|
|
166
|
+
const { shownKeys, overflowingTabCount } = this.state;
|
|
155
167
|
if (prevProps.activeKey !== activeKey && mountOnEnter && shownKeys.indexOf(activeKey) < 0) {
|
|
156
168
|
this.setState({
|
|
157
169
|
shownKeys: shownKeys.concat(activeKey)
|
|
@@ -162,13 +174,20 @@ export class Tabs extends React.Component {
|
|
|
162
174
|
React.Children.toArray(prevProps.children).length !== React.Children.toArray(children).length) {
|
|
163
175
|
this.handleScrollButtons();
|
|
164
176
|
}
|
|
177
|
+
const currentOverflowingTabCount = this.countOverflowingElements(this.tabList.current);
|
|
178
|
+
if (isOverflowHorizontal && currentOverflowingTabCount) {
|
|
179
|
+
this.setState({ overflowingTabCount: currentOverflowingTabCount + overflowingTabCount });
|
|
180
|
+
}
|
|
165
181
|
}
|
|
166
182
|
render() {
|
|
167
|
-
const _a = this.props, { className, children, activeKey, defaultActiveKey, id, isFilled, isSecondary, isVertical, isBox, hasBorderBottom, hasSecondaryBorderBottom, leftScrollAriaLabel, rightScrollAriaLabel, 'aria-label': ariaLabel, component, ouiaId, ouiaSafe, mountOnEnter, unmountOnExit, usePageInsets, inset, variant, expandable, isExpanded, defaultIsExpanded, toggleText, toggleAriaLabel, addButtonAriaLabel, onToggle, onClose, onAdd } = _a, props = __rest(_a, ["className", "children", "activeKey", "defaultActiveKey", "id", "isFilled", "isSecondary", "isVertical", "isBox", "hasBorderBottom", "hasSecondaryBorderBottom", "leftScrollAriaLabel", "rightScrollAriaLabel", 'aria-label', "component", "ouiaId", "ouiaSafe", "mountOnEnter", "unmountOnExit", "usePageInsets", "inset", "variant", "expandable", "isExpanded", "defaultIsExpanded", "toggleText", "toggleAriaLabel", "addButtonAriaLabel", "onToggle", "onClose", "onAdd"]);
|
|
168
|
-
const { showScrollButtons, disableLeftScrollButton, disableRightScrollButton, shownKeys, uncontrolledActiveKey, uncontrolledIsExpandedLocal } = this.state;
|
|
183
|
+
const _a = this.props, { className, children, activeKey, defaultActiveKey, id, isFilled, isSecondary, isVertical, isBox, hasBorderBottom, hasSecondaryBorderBottom, leftScrollAriaLabel, rightScrollAriaLabel, 'aria-label': ariaLabel, component, ouiaId, ouiaSafe, mountOnEnter, unmountOnExit, usePageInsets, inset, variant, expandable, isExpanded, defaultIsExpanded, toggleText, toggleAriaLabel, addButtonAriaLabel, onToggle, onClose, onAdd, isOverflowHorizontal: isOverflowHorizontal } = _a, props = __rest(_a, ["className", "children", "activeKey", "defaultActiveKey", "id", "isFilled", "isSecondary", "isVertical", "isBox", "hasBorderBottom", "hasSecondaryBorderBottom", "leftScrollAriaLabel", "rightScrollAriaLabel", 'aria-label', "component", "ouiaId", "ouiaSafe", "mountOnEnter", "unmountOnExit", "usePageInsets", "inset", "variant", "expandable", "isExpanded", "defaultIsExpanded", "toggleText", "toggleAriaLabel", "addButtonAriaLabel", "onToggle", "onClose", "onAdd", "isOverflowHorizontal"]);
|
|
184
|
+
const { showScrollButtons, disableLeftScrollButton, disableRightScrollButton, shownKeys, uncontrolledActiveKey, uncontrolledIsExpandedLocal, overflowingTabCount } = this.state;
|
|
169
185
|
const filteredChildren = React.Children.toArray(children)
|
|
170
186
|
.filter(Boolean)
|
|
171
187
|
.filter(child => !child.props.isHidden);
|
|
188
|
+
const filteredChildrenWithoutOverflow = filteredChildren.slice(0, filteredChildren.length - overflowingTabCount);
|
|
189
|
+
const filteredChildrenOverflowing = filteredChildren.slice(filteredChildren.length - overflowingTabCount);
|
|
190
|
+
const overflowingTabProps = filteredChildrenOverflowing.map((child) => child.props);
|
|
172
191
|
const uniqueId = id || getUniqueId();
|
|
173
192
|
const Component = component === TabsComponent.nav ? 'nav' : 'div';
|
|
174
193
|
const localActiveKey = defaultActiveKey !== undefined ? uncontrolledActiveKey : activeKey;
|
|
@@ -182,6 +201,8 @@ export class Tabs extends React.Component {
|
|
|
182
201
|
onToggle(newValue);
|
|
183
202
|
}
|
|
184
203
|
};
|
|
204
|
+
const hasOverflowTab = isOverflowHorizontal && overflowingTabCount > 0;
|
|
205
|
+
const overflowObjectProps = typeof isOverflowHorizontal === 'object' ? Object.assign({}, isOverflowHorizontal) : {};
|
|
185
206
|
return (React.createElement(TabsContextProvider, { value: {
|
|
186
207
|
variant,
|
|
187
208
|
mountOnEnter,
|
|
@@ -191,18 +212,20 @@ export class Tabs extends React.Component {
|
|
|
191
212
|
handleTabClick: (...args) => this.handleTabClick(...args),
|
|
192
213
|
handleTabClose: onClose
|
|
193
214
|
} },
|
|
194
|
-
React.createElement(Component, Object.assign({ "aria-label": ariaLabel, className: css(styles.tabs, isFilled && styles.modifiers.fill, isSecondary && styles.modifiers.secondary, isVertical && styles.modifiers.vertical, isVertical && expandable && formatBreakpointMods(expandable, styles), isVertical && expandable && isExpandedLocal && styles.modifiers.expanded, isBox && styles.modifiers.box, showScrollButtons && !isVertical && styles.modifiers.scrollable, usePageInsets && styles.modifiers.pageInsets, !hasBorderBottom && styles.modifiers.noBorderBottom, hasSecondaryBorderBottom && styles.modifiers.borderBottom, formatBreakpointMods(inset, styles), variantStyle[variant], className) }, getOUIAProps(Tabs.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe), { id: id && id }, props),
|
|
215
|
+
React.createElement(Component, Object.assign({ "aria-label": ariaLabel, className: css(styles.tabs, isFilled && styles.modifiers.fill, isSecondary && styles.modifiers.secondary, isVertical && styles.modifiers.vertical, isVertical && expandable && formatBreakpointMods(expandable, styles), isVertical && expandable && isExpandedLocal && styles.modifiers.expanded, isBox && styles.modifiers.box, showScrollButtons && !isVertical && styles.modifiers.scrollable, usePageInsets && styles.modifiers.pageInsets, !hasBorderBottom && styles.modifiers.noBorderBottom, hasSecondaryBorderBottom && styles.modifiers.borderBottom, formatBreakpointMods(inset, styles), variantStyle[variant], hasOverflowTab && styles.modifiers.overflow, className) }, getOUIAProps(Tabs.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe), { id: id && id }, props),
|
|
195
216
|
expandable && isVertical && (React.createElement(GenerateId, null, randomId => (React.createElement("div", { className: css(styles.tabsToggle) },
|
|
196
217
|
React.createElement("div", { className: css(styles.tabsToggleButton) },
|
|
197
218
|
React.createElement(Button, { onClick: () => toggleTabs(!isExpandedLocal), variant: "plain", "aria-label": toggleAriaLabel, "aria-expanded": isExpandedLocal, id: `${randomId}-button`, "aria-labelledby": `${randomId}-text ${randomId}-button` },
|
|
198
219
|
React.createElement("span", { className: css(styles.tabsToggleIcon) },
|
|
199
220
|
React.createElement(AngleRightIcon, { "arian-hidden": "true" })),
|
|
200
221
|
toggleText && (React.createElement("span", { className: css('pf-c-tabs__toggle-text'), id: `${randomId}-text` }, toggleText)))))))),
|
|
201
|
-
React.createElement("button", { className: css(styles.tabsScrollButton, isSecondary && buttonStyles.modifiers.secondary), "aria-label": leftScrollAriaLabel, onClick: this.scrollLeft, disabled: disableLeftScrollButton, "aria-hidden": disableLeftScrollButton },
|
|
202
|
-
React.createElement(AngleLeftIcon, null)),
|
|
203
|
-
React.createElement("ul", { className: css(styles.tabsList), ref: this.tabList, onScroll: this.handleScrollButtons, role: "tablist" },
|
|
204
|
-
|
|
205
|
-
React.createElement(
|
|
222
|
+
!isOverflowHorizontal && (React.createElement("button", { className: css(styles.tabsScrollButton, isSecondary && buttonStyles.modifiers.secondary), "aria-label": leftScrollAriaLabel, onClick: this.scrollLeft, disabled: disableLeftScrollButton, "aria-hidden": disableLeftScrollButton },
|
|
223
|
+
React.createElement(AngleLeftIcon, null))),
|
|
224
|
+
React.createElement("ul", { className: css(styles.tabsList), ref: this.tabList, onScroll: this.handleScrollButtons, role: "tablist" },
|
|
225
|
+
isOverflowHorizontal ? filteredChildrenWithoutOverflow : filteredChildren,
|
|
226
|
+
hasOverflowTab && React.createElement(OverflowTab, Object.assign({ overflowingTabs: overflowingTabProps }, overflowObjectProps))),
|
|
227
|
+
!isOverflowHorizontal && (React.createElement("button", { className: css(styles.tabsScrollButton, isSecondary && buttonStyles.modifiers.secondary), "aria-label": rightScrollAriaLabel, onClick: this.scrollRight, disabled: disableRightScrollButton, "aria-hidden": disableRightScrollButton },
|
|
228
|
+
React.createElement(AngleRightIcon, null))),
|
|
206
229
|
onAdd !== undefined && (React.createElement("span", { className: css(styles.tabsAdd) },
|
|
207
230
|
React.createElement(Button, { variant: "plain", "aria-label": addButtonAriaLabel || 'Add tab', onClick: onAdd },
|
|
208
231
|
React.createElement(PlusIcon, null))))),
|