@deque/cauldron-react 2.0.0-canary.22e43f33 → 2.0.0-canary.2844ef8e
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/lib/cauldron.css +38 -0
- package/lib/components/Card/Card.d.ts +3 -1
- package/lib/components/ExpandCollapsePanel/PanelTrigger.d.ts +2 -1
- package/lib/components/Icon/index.d.ts +3 -1
- package/lib/components/Icon/types.d.ts +7 -0
- package/lib/components/IconButton/index.d.ts +3 -2
- package/lib/components/Panel/index.d.ts +17 -0
- package/lib/components/Select/index.d.ts +1 -1
- package/lib/components/Tabs/Tab.d.ts +8 -0
- package/lib/components/Tabs/TabPanel.d.ts +8 -0
- package/lib/components/Tabs/Tabs.d.ts +26 -0
- package/lib/components/Tabs/index.d.ts +3 -0
- package/lib/components/TextField/index.d.ts +0 -1
- package/lib/components/Toast/utils.d.ts +9 -22
- package/lib/index.d.ts +4 -1
- package/lib/index.js +244 -24
- package/lib/info-square-f193e281.js +25 -0
- package/lib/{menu-2bb052ac.js → menu-2f2be7c2.js} +2 -19
- package/lib/recycle-0198fb67.js +25 -0
- package/lib/robot-22863b2b.js +29 -0
- package/lib/utils/use-did-update/index.d.ts +10 -0
- package/package.json +2 -1
package/lib/cauldron.css
CHANGED
|
@@ -1,28 +1,66 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
--expandcollapse-trigger-background-color: transparent;
|
|
3
|
+
--expandcollapse-trigger-color: var(--gray-90);
|
|
4
|
+
--expandcollapse-panel-background-color: transparent;
|
|
5
|
+
--expandcollapse-panel-color: var(--gray-90);
|
|
6
|
+
}
|
|
7
|
+
|
|
1
8
|
.ExpandCollapse__trigger {
|
|
2
9
|
font-size: inherit;
|
|
3
10
|
display: flex;
|
|
4
11
|
align-items: center;
|
|
12
|
+
background-color: var(--expandcollapse-trigger-background-color);
|
|
13
|
+
color: var(--expandcollapse-trigger-color);
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.fullWidth {
|
|
17
|
+
width: 100%;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.ExpandCollapse__trigger-title {
|
|
21
|
+
flex-grow: 1;
|
|
22
|
+
text-align: left;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.ExpandCollapse__panel {
|
|
26
|
+
background-color: var(--expandcollapse-panel-background-color);
|
|
27
|
+
color: var(--expandcollapse-panel-color);
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
/* Dark Theme */
|
|
31
|
+
|
|
32
|
+
.cauldron--theme-dark {
|
|
33
|
+
--expandcollapse-trigger-color: var(--white);
|
|
34
|
+
--expandcollapse-panel-color: var(--accent-light);
|
|
5
35
|
}
|
|
36
|
+
|
|
6
37
|
a.Button--primary {
|
|
7
38
|
text-decoration: none;
|
|
8
39
|
padding: 9px 18px;
|
|
9
40
|
}
|
|
41
|
+
|
|
10
42
|
.Icon {
|
|
11
43
|
display: inline-block;
|
|
12
44
|
vertical-align: middle;
|
|
13
45
|
}
|
|
46
|
+
|
|
14
47
|
.Icon svg {
|
|
15
48
|
display: block;
|
|
16
49
|
}
|
|
50
|
+
|
|
17
51
|
/* Icon--right is the default orientation */
|
|
52
|
+
|
|
18
53
|
.Icon__right {
|
|
19
54
|
}
|
|
55
|
+
|
|
20
56
|
.Icon__left {
|
|
21
57
|
transform: scaleX(-1);
|
|
22
58
|
}
|
|
59
|
+
|
|
23
60
|
.Icon__up {
|
|
24
61
|
transform: rotate(-90deg);
|
|
25
62
|
}
|
|
63
|
+
|
|
26
64
|
.Icon__down {
|
|
27
65
|
transform: rotate(90deg);
|
|
28
66
|
}
|
|
@@ -1,12 +1,14 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import PropTypes from 'prop-types';
|
|
3
3
|
export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
4
|
+
variant?: 'simple';
|
|
4
5
|
}
|
|
5
6
|
declare const Card: {
|
|
6
|
-
({ className, ...other }: CardProps): JSX.Element;
|
|
7
|
+
({ className, variant, ...other }: CardProps): JSX.Element;
|
|
7
8
|
displayName: string;
|
|
8
9
|
propTypes: {
|
|
9
10
|
className: PropTypes.Requireable<string>;
|
|
11
|
+
variant: PropTypes.Requireable<string>;
|
|
10
12
|
};
|
|
11
13
|
};
|
|
12
14
|
export default Card;
|
|
@@ -5,9 +5,10 @@ export interface PanelTriggerProps extends React.ButtonHTMLAttributes<HTMLButton
|
|
|
5
5
|
open: boolean;
|
|
6
6
|
}) => React.ReactNode) | React.ReactNode;
|
|
7
7
|
open?: boolean;
|
|
8
|
+
fullWidth?: string;
|
|
8
9
|
onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
|
|
9
10
|
}
|
|
10
|
-
declare function PanelTrigger({ children, className, open, onClick, ...other }: PanelTriggerProps): JSX.Element;
|
|
11
|
+
declare function PanelTrigger({ children, className, open, fullWidth, onClick, ...other }: PanelTriggerProps): JSX.Element;
|
|
11
12
|
declare namespace PanelTrigger {
|
|
12
13
|
var propTypes: {
|
|
13
14
|
children: PropTypes.Requireable<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
|
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
+
import { IconType, iconTypes } from './types';
|
|
3
|
+
export { IconType, iconTypes };
|
|
2
4
|
export interface IconProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
3
5
|
label?: string;
|
|
4
|
-
type:
|
|
6
|
+
type: IconType;
|
|
5
7
|
}
|
|
6
8
|
declare const Icon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<HTMLDivElement>>;
|
|
7
9
|
export default Icon;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
/*!
|
|
2
|
+
* GENERATED CODE. DO NOT EDIT DIRECTLY!
|
|
3
|
+
*/
|
|
4
|
+
/** IconType represents each valid icon type. */
|
|
5
|
+
export declare type IconType = 'add-user' | 'arrow-circle-up' | 'arrow-circle-down' | 'arrow-circle-left' | 'arrow-circle-right' | 'arrow-up' | 'arrow-down' | 'arrow-left' | 'arrow-right' | 'arrows-alt' | 'bolt' | 'caution' | 'check-circle' | 'check-shield' | 'check-solid' | 'check' | 'checkbox-checked' | 'checkbox-unchecked' | 'chevron-double-up' | 'chevron-double-down' | 'chevron-double-left' | 'chevron-double-right' | 'chevron-up' | 'chevron-down' | 'chevron-left' | 'chevron-right' | 'close' | 'code' | 'download' | 'exchange' | 'external-link' | 'eye' | 'filter' | 'flag' | 'gears' | 'grid' | 'hamburger-menu' | 'highlight' | 'info-circle-alt' | 'info-circle' | 'info-square' | 'kabob' | 'list' | 'lock' | 'menu' | 'new-releases' | 'new' | 'no' | 'pencil' | 'plus' | 'question-circle' | 'radio-checked' | 'radio-unchecked' | 'recycle' | 'robot' | 'run-again' | 'save' | 'share' | 'sort' | 'star' | 'sun' | 'tag' | 'target' | 'trash' | 'triangle-up' | 'triangle-down' | 'triangle-left' | 'triangle-right' | 'upload';
|
|
6
|
+
/** iconTypes holds each valid icon type. */
|
|
7
|
+
export declare const iconTypes: string[];
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
+
import { IconType } from '../Icon';
|
|
2
3
|
import { TooltipProps } from '../Tooltip';
|
|
3
|
-
interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
4
|
-
icon:
|
|
4
|
+
export interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
5
|
+
icon: IconType;
|
|
5
6
|
label: string;
|
|
6
7
|
tooltipPlacement?: TooltipProps['placement'];
|
|
7
8
|
tooltipVariant?: TooltipProps['variant'];
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import PropTypes from 'prop-types';
|
|
3
|
+
import IconButton from '../IconButton';
|
|
4
|
+
declare const Panel: {
|
|
5
|
+
({ className, title, actions, children }: {
|
|
6
|
+
className?: string | undefined;
|
|
7
|
+
title?: string | undefined;
|
|
8
|
+
actions?: React.ForwardRefExoticComponent<import("../IconButton").IconButtonProps & React.RefAttributes<HTMLButtonElement>>[] | undefined;
|
|
9
|
+
children: React.ReactNode;
|
|
10
|
+
}): JSX.Element;
|
|
11
|
+
displayName: string;
|
|
12
|
+
propTypes: {
|
|
13
|
+
children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
|
|
14
|
+
className: PropTypes.Requireable<string>;
|
|
15
|
+
};
|
|
16
|
+
};
|
|
17
|
+
export default Panel;
|
|
@@ -15,5 +15,5 @@ export interface SelectProps extends Omit<React.HTMLProps<HTMLSelectElement>, 'c
|
|
|
15
15
|
defaultValue?: any;
|
|
16
16
|
onChange: (e: React.ChangeEvent<HTMLSelectElement>) => void;
|
|
17
17
|
}
|
|
18
|
-
declare const Select: React.ForwardRefExoticComponent<Pick<SelectProps, "max" | "required" | "default" | "high" | "low" | "disabled" | "error" | "start" | "open" | "media" | "hidden" | "cite" | "data" | "dir" | "form" | "label" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "async" | "defer" | "manifest" | "color" | "content" | "size" | "wrap" | "multiple" | "key" | "children" | "list" | "step" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "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" | "
|
|
18
|
+
declare const Select: React.ForwardRefExoticComponent<Pick<SelectProps, "max" | "required" | "default" | "high" | "low" | "disabled" | "error" | "start" | "open" | "media" | "hidden" | "cite" | "data" | "dir" | "form" | "label" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "async" | "defer" | "manifest" | "color" | "content" | "size" | "wrap" | "multiple" | "key" | "children" | "list" | "step" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "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" | "download" | "target" | "type" | "name" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "controls" | "coords" | "crossOrigin" | "dateTime" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "height" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "loop" | "marginHeight" | "marginWidth" | "maxLength" | "mediaGroup" | "method" | "min" | "minLength" | "muted" | "nonce" | "noValidate" | "optimum" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "sizes" | "src" | "srcDoc" | "srcLang" | "srcSet" | "useMap" | "value" | "width" | "wmode" | "options" | "requiredText"> & React.RefAttributes<HTMLSelectElement>>;
|
|
19
19
|
export default Select;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
interface TabProps extends React.HTMLAttributes<HTMLLIElement> {
|
|
3
|
+
target: React.RefObject<HTMLDivElement> | HTMLElement;
|
|
4
|
+
id?: string;
|
|
5
|
+
children?: React.ReactNode;
|
|
6
|
+
}
|
|
7
|
+
declare const Tab: React.ForwardRefExoticComponent<TabProps & React.RefAttributes<HTMLLIElement>>;
|
|
8
|
+
export default Tab;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
interface TabPanelProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
3
|
+
id?: string;
|
|
4
|
+
children?: React.ReactNode;
|
|
5
|
+
className?: string;
|
|
6
|
+
}
|
|
7
|
+
declare const TabPanel: React.ForwardRefExoticComponent<TabPanelProps & React.RefAttributes<HTMLDivElement>>;
|
|
8
|
+
export default TabPanel;
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import PropTypes from 'prop-types';
|
|
3
|
+
declare type LabelProps = {
|
|
4
|
+
'aria-label': string;
|
|
5
|
+
} | {
|
|
6
|
+
'aria-labelledby': string;
|
|
7
|
+
};
|
|
8
|
+
declare type TabsProps = {
|
|
9
|
+
children: React.ReactNode;
|
|
10
|
+
initialActiveIndex?: number;
|
|
11
|
+
thin?: boolean;
|
|
12
|
+
className?: string;
|
|
13
|
+
} & LabelProps;
|
|
14
|
+
declare const Tabs: {
|
|
15
|
+
({ children, thin, initialActiveIndex, className, ...labelProp }: TabsProps): JSX.Element;
|
|
16
|
+
displayName: string;
|
|
17
|
+
propTypes: {
|
|
18
|
+
children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
|
|
19
|
+
'aria-label': PropTypes.Requireable<string>;
|
|
20
|
+
'aria-labelledby': PropTypes.Requireable<string>;
|
|
21
|
+
initialActiveIndex: PropTypes.Requireable<number>;
|
|
22
|
+
thin: PropTypes.Requireable<boolean>;
|
|
23
|
+
className: PropTypes.Requireable<string>;
|
|
24
|
+
};
|
|
25
|
+
};
|
|
26
|
+
export default Tabs;
|
|
@@ -42,7 +42,6 @@ export default class TextField extends React.Component<TextFieldProps, TextField
|
|
|
42
42
|
private errorId;
|
|
43
43
|
private input;
|
|
44
44
|
constructor(props: TextFieldProps);
|
|
45
|
-
componentDidUpdate(prevProps: TextFieldProps): void;
|
|
46
45
|
render(): JSX.Element;
|
|
47
46
|
onChange(e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>): void;
|
|
48
47
|
}
|
|
@@ -1,26 +1,13 @@
|
|
|
1
|
+
import { IconType } from '../Icon';
|
|
2
|
+
interface TypeMap {
|
|
3
|
+
[name: string]: {
|
|
4
|
+
className: string;
|
|
5
|
+
icon: IconType;
|
|
6
|
+
};
|
|
7
|
+
}
|
|
1
8
|
/**
|
|
2
9
|
* Maps toast types to their classNames and icons
|
|
3
10
|
*/
|
|
4
|
-
export declare const typeMap:
|
|
5
|
-
confirmation: {
|
|
6
|
-
className: string;
|
|
7
|
-
icon: string;
|
|
8
|
-
};
|
|
9
|
-
caution: {
|
|
10
|
-
className: string;
|
|
11
|
-
icon: string;
|
|
12
|
-
};
|
|
13
|
-
'action-needed': {
|
|
14
|
-
className: string;
|
|
15
|
-
icon: string;
|
|
16
|
-
};
|
|
17
|
-
error: {
|
|
18
|
-
className: string;
|
|
19
|
-
icon: string;
|
|
20
|
-
};
|
|
21
|
-
info: {
|
|
22
|
-
className: string;
|
|
23
|
-
icon: string;
|
|
24
|
-
};
|
|
25
|
-
};
|
|
11
|
+
export declare const typeMap: TypeMap;
|
|
26
12
|
export declare const tabIndexHandler: (reset: boolean, toast: HTMLElement | null) => any;
|
|
13
|
+
export {};
|
package/lib/index.d.ts
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
export { default as Workspace } from './components/Workspace';
|
|
5
5
|
export { default as Main } from './components/Main';
|
|
6
6
|
export { default as Layout } from './components/Layout';
|
|
7
|
-
export { default as Icon } from './components/Icon';
|
|
7
|
+
export { default as Icon, IconType, iconTypes } from './components/Icon';
|
|
8
8
|
export { default as Offscreen } from './components/Offscreen';
|
|
9
9
|
export { default as Scrim } from './components/Scrim';
|
|
10
10
|
export { default as MenuItem } from './components/MenuItem';
|
|
@@ -37,13 +37,16 @@ export { default as LoaderOverlay } from './components/LoaderOverlay';
|
|
|
37
37
|
export { default as Line } from './components/Line';
|
|
38
38
|
export { default as Tag, TagLabel } from './components/Tag';
|
|
39
39
|
export { default as Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from './components/Table';
|
|
40
|
+
export { default as Tabs, Tab, TabPanel } from './components/Tabs';
|
|
40
41
|
export { DescriptionList, DescriptionListItem, DescriptionTerm, DescriptionDetails } from './components/DescriptionList';
|
|
41
42
|
export { default as Stepper, Step } from './components/Stepper';
|
|
43
|
+
export { default as Panel } from './components/Panel';
|
|
42
44
|
/**
|
|
43
45
|
* Helpers / Utils
|
|
44
46
|
*/
|
|
45
47
|
export { default as AriaIsolate } from './utils/aria-isolate';
|
|
46
48
|
export { default as focusableSelector } from './utils/focusable-selector';
|
|
49
|
+
export { default as useDidUpdate } from './utils/use-did-update';
|
|
47
50
|
/**
|
|
48
51
|
* Contexts
|
|
49
52
|
*/
|
package/lib/index.js
CHANGED
|
@@ -112,6 +112,82 @@ var Workspace = /** @class */ (function (_super) {
|
|
|
112
112
|
|
|
113
113
|
var Offscreen = function (props) { return (React__default.createElement("div", tslib.__assign({ className: "Offscreen" }, props))); };
|
|
114
114
|
|
|
115
|
+
/*!
|
|
116
|
+
* GENERATED CODE. DO NOT EDIT DIRECTLY!
|
|
117
|
+
*/
|
|
118
|
+
/** iconTypes holds each valid icon type. */
|
|
119
|
+
var iconTypes = [
|
|
120
|
+
'add-user',
|
|
121
|
+
'arrow-circle-up',
|
|
122
|
+
'arrow-circle-down',
|
|
123
|
+
'arrow-circle-left',
|
|
124
|
+
'arrow-circle-right',
|
|
125
|
+
'arrow-up',
|
|
126
|
+
'arrow-down',
|
|
127
|
+
'arrow-left',
|
|
128
|
+
'arrow-right',
|
|
129
|
+
'arrows-alt',
|
|
130
|
+
'bolt',
|
|
131
|
+
'caution',
|
|
132
|
+
'check-circle',
|
|
133
|
+
'check-shield',
|
|
134
|
+
'check-solid',
|
|
135
|
+
'check',
|
|
136
|
+
'checkbox-checked',
|
|
137
|
+
'checkbox-unchecked',
|
|
138
|
+
'chevron-double-up',
|
|
139
|
+
'chevron-double-down',
|
|
140
|
+
'chevron-double-left',
|
|
141
|
+
'chevron-double-right',
|
|
142
|
+
'chevron-up',
|
|
143
|
+
'chevron-down',
|
|
144
|
+
'chevron-left',
|
|
145
|
+
'chevron-right',
|
|
146
|
+
'close',
|
|
147
|
+
'code',
|
|
148
|
+
'download',
|
|
149
|
+
'exchange',
|
|
150
|
+
'external-link',
|
|
151
|
+
'eye',
|
|
152
|
+
'filter',
|
|
153
|
+
'flag',
|
|
154
|
+
'gears',
|
|
155
|
+
'grid',
|
|
156
|
+
'hamburger-menu',
|
|
157
|
+
'highlight',
|
|
158
|
+
'info-circle-alt',
|
|
159
|
+
'info-circle',
|
|
160
|
+
'info-square',
|
|
161
|
+
'kabob',
|
|
162
|
+
'list',
|
|
163
|
+
'lock',
|
|
164
|
+
'menu',
|
|
165
|
+
'new-releases',
|
|
166
|
+
'new',
|
|
167
|
+
'no',
|
|
168
|
+
'pencil',
|
|
169
|
+
'plus',
|
|
170
|
+
'question-circle',
|
|
171
|
+
'radio-checked',
|
|
172
|
+
'radio-unchecked',
|
|
173
|
+
'recycle',
|
|
174
|
+
'robot',
|
|
175
|
+
'run-again',
|
|
176
|
+
'save',
|
|
177
|
+
'share',
|
|
178
|
+
'sort',
|
|
179
|
+
'star',
|
|
180
|
+
'sun',
|
|
181
|
+
'tag',
|
|
182
|
+
'target',
|
|
183
|
+
'trash',
|
|
184
|
+
'triangle-up',
|
|
185
|
+
'triangle-down',
|
|
186
|
+
'triangle-left',
|
|
187
|
+
'triangle-right',
|
|
188
|
+
'upload'
|
|
189
|
+
];
|
|
190
|
+
|
|
115
191
|
function __variableDynamicImportRuntime0__(path) {
|
|
116
192
|
switch (path) {
|
|
117
193
|
case './icons/add-user.svg': return Promise.resolve().then(function () { return require('./add-user-075c63a1.js'); });
|
|
@@ -142,10 +218,11 @@ function __variableDynamicImportRuntime0__(path) {
|
|
|
142
218
|
case './icons/highlight.svg': return Promise.resolve().then(function () { return require('./highlight-81bfb759.js'); });
|
|
143
219
|
case './icons/info-circle-alt.svg': return Promise.resolve().then(function () { return require('./info-circle-alt-b1a696c7.js'); });
|
|
144
220
|
case './icons/info-circle.svg': return Promise.resolve().then(function () { return require('./info-circle-b43f7a9b.js'); });
|
|
221
|
+
case './icons/info-square.svg': return Promise.resolve().then(function () { return require('./info-square-f193e281.js'); });
|
|
145
222
|
case './icons/kabob.svg': return Promise.resolve().then(function () { return require('./kabob-692fdc00.js'); });
|
|
146
223
|
case './icons/list.svg': return Promise.resolve().then(function () { return require('./list-8fbd8209.js'); });
|
|
147
224
|
case './icons/lock.svg': return Promise.resolve().then(function () { return require('./lock-bd0122db.js'); });
|
|
148
|
-
case './icons/menu.svg': return Promise.resolve().then(function () { return require('./menu-
|
|
225
|
+
case './icons/menu.svg': return Promise.resolve().then(function () { return require('./menu-2f2be7c2.js'); });
|
|
149
226
|
case './icons/new-releases.svg': return Promise.resolve().then(function () { return require('./new-releases-ac749bdd.js'); });
|
|
150
227
|
case './icons/new.svg': return Promise.resolve().then(function () { return require('./new-6c3ac7d7.js'); });
|
|
151
228
|
case './icons/no.svg': return Promise.resolve().then(function () { return require('./no-bb3aa565.js'); });
|
|
@@ -154,6 +231,8 @@ function __variableDynamicImportRuntime0__(path) {
|
|
|
154
231
|
case './icons/question-circle.svg': return Promise.resolve().then(function () { return require('./question-circle-c3c634c4.js'); });
|
|
155
232
|
case './icons/radio-checked.svg': return Promise.resolve().then(function () { return require('./radio-checked-006112fe.js'); });
|
|
156
233
|
case './icons/radio-unchecked.svg': return Promise.resolve().then(function () { return require('./radio-unchecked-a76e2d66.js'); });
|
|
234
|
+
case './icons/recycle.svg': return Promise.resolve().then(function () { return require('./recycle-0198fb67.js'); });
|
|
235
|
+
case './icons/robot.svg': return Promise.resolve().then(function () { return require('./robot-22863b2b.js'); });
|
|
157
236
|
case './icons/run-again.svg': return Promise.resolve().then(function () { return require('./run-again-c9777075.js'); });
|
|
158
237
|
case './icons/save.svg': return Promise.resolve().then(function () { return require('./save-edf5fc68.js'); });
|
|
159
238
|
case './icons/share.svg': return Promise.resolve().then(function () { return require('./share-70e94257.js'); });
|
|
@@ -205,6 +284,7 @@ var Icon = React.forwardRef(function (_a, ref) {
|
|
|
205
284
|
Icon.propTypes = {
|
|
206
285
|
label: PropTypes.string,
|
|
207
286
|
className: PropTypes.string,
|
|
287
|
+
// @ts-expect-error
|
|
208
288
|
type: PropTypes.string.isRequired
|
|
209
289
|
};
|
|
210
290
|
Icon.displayName = 'Icon';
|
|
@@ -1485,14 +1565,15 @@ var IconButton = React.forwardRef(function (_a, ref) {
|
|
|
1485
1565
|
!disabled && (React__default.createElement(Tooltip, { target: buttonRef, placement: tooltipPlacement, variant: tooltipVariant, portal: tooltipPortal, association: "aria-labelledby", hideElementOnHidden: true }, label))));
|
|
1486
1566
|
});
|
|
1487
1567
|
IconButton.propTypes = {
|
|
1568
|
+
// @ts-expect-error
|
|
1488
1569
|
icon: PropTypes.string.isRequired,
|
|
1489
1570
|
label: PropTypes.string.isRequired,
|
|
1490
|
-
// @ts-
|
|
1571
|
+
// @ts-expect-error
|
|
1491
1572
|
tooltipPlacement: PropTypes.string,
|
|
1492
|
-
// @ts-
|
|
1573
|
+
// @ts-expect-error
|
|
1493
1574
|
tooltipVariant: PropTypes.string,
|
|
1494
1575
|
tooltipPortal: PropTypes.any,
|
|
1495
|
-
// @ts-
|
|
1576
|
+
// @ts-expect-error
|
|
1496
1577
|
variant: PropTypes.string
|
|
1497
1578
|
};
|
|
1498
1579
|
IconButton.displayName = 'IconButton';
|
|
@@ -2242,12 +2323,16 @@ function TooltipTabstop(_a) {
|
|
|
2242
2323
|
TooltipTabstop.displayName = 'TooltipTabstop';
|
|
2243
2324
|
|
|
2244
2325
|
var Card = function (_a) {
|
|
2245
|
-
var className = _a.className, other = tslib.__rest(_a, ["className"]);
|
|
2246
|
-
return (React__default.createElement("div", tslib.__assign({ className: classNames(
|
|
2326
|
+
var className = _a.className, variant = _a.variant, other = tslib.__rest(_a, ["className", "variant"]);
|
|
2327
|
+
return (React__default.createElement("div", tslib.__assign({ className: classNames(className, {
|
|
2328
|
+
'Card--simple': variant === 'simple',
|
|
2329
|
+
Card: !variant
|
|
2330
|
+
}) }, other)));
|
|
2247
2331
|
};
|
|
2248
2332
|
Card.displayName = 'Card';
|
|
2249
2333
|
Card.propTypes = {
|
|
2250
|
-
className: PropTypes.string
|
|
2334
|
+
className: PropTypes.string,
|
|
2335
|
+
variant: PropTypes.string
|
|
2251
2336
|
};
|
|
2252
2337
|
|
|
2253
2338
|
var CardHeader = function (_a) {
|
|
@@ -2291,21 +2376,12 @@ var TextField = /** @class */ (function (_super) {
|
|
|
2291
2376
|
_this.onChange = _this.onChange.bind(_this);
|
|
2292
2377
|
return _this;
|
|
2293
2378
|
}
|
|
2294
|
-
TextField.prototype.componentDidUpdate = function (prevProps) {
|
|
2295
|
-
var value = this.props.value;
|
|
2296
|
-
if (value === prevProps.value) {
|
|
2297
|
-
return;
|
|
2298
|
-
}
|
|
2299
|
-
this.setState({ value: value });
|
|
2300
|
-
};
|
|
2301
2379
|
TextField.prototype.render = function () {
|
|
2302
2380
|
var _this = this;
|
|
2303
2381
|
var isRequired = !!this.props.required;
|
|
2304
2382
|
// disabling `no-unused-vars` to prevent specific
|
|
2305
2383
|
// props from being passed through to the input
|
|
2306
|
-
var _a = this.props, label = _a.label, fieldRef = _a.fieldRef,
|
|
2307
|
-
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
2308
|
-
value = _a.value,
|
|
2384
|
+
var _a = this.props, label = _a.label, fieldRef = _a.fieldRef, value = _a.value,
|
|
2309
2385
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
2310
2386
|
onChange = _a.onChange,
|
|
2311
2387
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
@@ -2330,7 +2406,7 @@ var TextField = /** @class */ (function (_super) {
|
|
|
2330
2406
|
'Field__text-input': !multiline,
|
|
2331
2407
|
Field__textarea: multiline,
|
|
2332
2408
|
'Field--has-error': error
|
|
2333
|
-
}), id: this.inputId, value: this.state.value, onChange: this.onChange, "aria-invalid": !!error, ref: function (input) {
|
|
2409
|
+
}), id: this.inputId, value: typeof value !== 'undefined' ? value : this.state.value, onChange: this.onChange, "aria-invalid": !!error, ref: function (input) {
|
|
2334
2410
|
_this.input = input;
|
|
2335
2411
|
setRef(fieldRef, input);
|
|
2336
2412
|
} }, other, inputProps)),
|
|
@@ -2380,11 +2456,10 @@ var TextField = /** @class */ (function (_super) {
|
|
|
2380
2456
|
}(React__default.Component));
|
|
2381
2457
|
|
|
2382
2458
|
function PanelTrigger(_a) {
|
|
2383
|
-
var children = _a.children, className = _a.className, open = _a.open, onClick = _a.onClick, other = tslib.__rest(_a, ["children", "className", "open", "onClick"]);
|
|
2384
|
-
return (React__default.createElement("button", tslib.__assign({}, other, { className: classNames('ExpandCollapse__trigger', className), type: "button", "aria-expanded": open, onClick: onClick }),
|
|
2385
|
-
typeof children === 'function' ? children({ open: !!open }) : children,
|
|
2386
|
-
' '
|
|
2387
|
-
React__default.createElement(Icon, { type: "chevron-" + (open ? 'down' : 'right') })));
|
|
2459
|
+
var children = _a.children, className = _a.className, open = _a.open, fullWidth = _a.fullWidth, onClick = _a.onClick, other = tslib.__rest(_a, ["children", "className", "open", "fullWidth", "onClick"]);
|
|
2460
|
+
return (React__default.createElement("button", tslib.__assign({}, other, { className: classNames('ExpandCollapse__trigger', fullWidth ? 'fullWidth' : '', className), type: "button", "aria-expanded": open, onClick: onClick }),
|
|
2461
|
+
React__default.createElement("div", { className: "ExpandCollapse__trigger-title" }, typeof children === 'function' ? children({ open: !!open }) : children),
|
|
2462
|
+
React__default.createElement(Icon, { type: open ? 'chevron-down' : 'chevron-right' })));
|
|
2388
2463
|
}
|
|
2389
2464
|
PanelTrigger.propTypes = {
|
|
2390
2465
|
children: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
|
|
@@ -2506,7 +2581,7 @@ var ExpandCollapsePanel = /** @class */ (function (_super) {
|
|
|
2506
2581
|
open: isOpen,
|
|
2507
2582
|
onClick: this.handleToggle
|
|
2508
2583
|
}),
|
|
2509
|
-
React__default.createElement("div", tslib.__assign({}, other, { className: classNames(animationClass, className, {
|
|
2584
|
+
React__default.createElement("div", tslib.__assign({}, other, { className: classNames('ExpandCollapse__panel', animationClass, className, {
|
|
2510
2585
|
'is--hidden': !isOpen && !isAnimating
|
|
2511
2586
|
}), ref: this.panel }), panelElements)));
|
|
2512
2587
|
};
|
|
@@ -7872,6 +7947,112 @@ TableRow.propTypes = {
|
|
|
7872
7947
|
className: PropTypes.string
|
|
7873
7948
|
};
|
|
7874
7949
|
|
|
7950
|
+
var Tab = React__default.forwardRef(function (_a, ref) {
|
|
7951
|
+
var children = _a.children, propId = _a.id, target = _a.target, other = tslib.__rest(_a, ["children", "id", "target"]);
|
|
7952
|
+
return (React__default.createElement("li", tslib.__assign({ id: propId, ref: ref, role: "tab" }, other), children));
|
|
7953
|
+
});
|
|
7954
|
+
Tab.displayName = 'Tab';
|
|
7955
|
+
Tab.propTypes = {
|
|
7956
|
+
target: PropTypes.any.isRequired,
|
|
7957
|
+
id: PropTypes.string,
|
|
7958
|
+
children: PropTypes.node
|
|
7959
|
+
};
|
|
7960
|
+
|
|
7961
|
+
var Tabs = function (_a) {
|
|
7962
|
+
var children = _a.children, thin = _a.thin, _b = _a.initialActiveIndex, initialActiveIndex = _b === void 0 ? 0 : _b, className = _a.className, labelProp = tslib.__rest(_a, ["children", "thin", "initialActiveIndex", "className"]);
|
|
7963
|
+
var _c = React.useState(initialActiveIndex), activeIndex = _c[0], setActiveIndex = _c[1];
|
|
7964
|
+
var focusedTabRef = React.useRef(null);
|
|
7965
|
+
var tabs = React__default.Children.toArray(children).filter(function (child) { return child.type === Tab; });
|
|
7966
|
+
var tabCount = tabs.length;
|
|
7967
|
+
var handleClick = function (index) {
|
|
7968
|
+
setActiveIndex(index);
|
|
7969
|
+
};
|
|
7970
|
+
var handleKeyDown = function (event) {
|
|
7971
|
+
var key = event.key;
|
|
7972
|
+
var newIndex = activeIndex;
|
|
7973
|
+
switch (key) {
|
|
7974
|
+
case 'ArrowLeft': {
|
|
7975
|
+
newIndex = activeIndex - 1;
|
|
7976
|
+
// circularity
|
|
7977
|
+
if (newIndex === -1) {
|
|
7978
|
+
newIndex = tabCount - 1;
|
|
7979
|
+
}
|
|
7980
|
+
setActiveIndex(newIndex);
|
|
7981
|
+
break;
|
|
7982
|
+
}
|
|
7983
|
+
case 'ArrowRight': {
|
|
7984
|
+
newIndex = activeIndex + 1;
|
|
7985
|
+
// circularity
|
|
7986
|
+
if (newIndex === tabCount) {
|
|
7987
|
+
newIndex = 0;
|
|
7988
|
+
}
|
|
7989
|
+
setActiveIndex(newIndex);
|
|
7990
|
+
break;
|
|
7991
|
+
}
|
|
7992
|
+
case 'Home': {
|
|
7993
|
+
newIndex = 0;
|
|
7994
|
+
setActiveIndex(newIndex);
|
|
7995
|
+
break;
|
|
7996
|
+
}
|
|
7997
|
+
case 'End': {
|
|
7998
|
+
event.preventDefault();
|
|
7999
|
+
newIndex = tabCount - 1;
|
|
8000
|
+
setActiveIndex(newIndex);
|
|
8001
|
+
break;
|
|
8002
|
+
}
|
|
8003
|
+
}
|
|
8004
|
+
};
|
|
8005
|
+
var tabComponents = tabs.map(function (child, index) {
|
|
8006
|
+
var _a;
|
|
8007
|
+
var _b;
|
|
8008
|
+
var _c = child.props, target = _c.target, propId = _c.id, other = tslib.__rest(_c, ["target", "id"]);
|
|
8009
|
+
var selected = index === activeIndex;
|
|
8010
|
+
var id = (propId ? [propId] : nextId.useId(1, 'tab'))[0];
|
|
8011
|
+
React.useEffect(function () {
|
|
8012
|
+
var _a;
|
|
8013
|
+
(_a = target.current) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-labelledby', id);
|
|
8014
|
+
}, [target]);
|
|
8015
|
+
React.useEffect(function () {
|
|
8016
|
+
var _a, _b;
|
|
8017
|
+
index === activeIndex
|
|
8018
|
+
? (_a = target.current) === null || _a === void 0 ? void 0 : _a.classList.remove('TabPanel--hidden') : (_b = target.current) === null || _b === void 0 ? void 0 : _b.classList.add('TabPanel--hidden');
|
|
8019
|
+
}, [activeIndex]);
|
|
8020
|
+
var config = tslib.__assign((_a = { id: id, className: classNames('Tab', {
|
|
8021
|
+
'Tab--active': selected
|
|
8022
|
+
}), tabIndex: index === activeIndex ? 0 : -1 }, _a['aria-controls'] = (_b = target.current) === null || _b === void 0 ? void 0 : _b.id, _a['aria-selected'] = selected, _a.ref = index === activeIndex ? focusedTabRef : null, _a.onClick = function () { return handleClick(index); }, _a), other);
|
|
8023
|
+
return React__default.cloneElement(child, config);
|
|
8024
|
+
});
|
|
8025
|
+
useDidUpdate(function () {
|
|
8026
|
+
var _a;
|
|
8027
|
+
(_a = focusedTabRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
8028
|
+
}, [activeIndex]);
|
|
8029
|
+
return (React__default.createElement("div", { className: classNames('Tabs', className, {
|
|
8030
|
+
'Tabs--thin': thin
|
|
8031
|
+
}) },
|
|
8032
|
+
React__default.createElement("ul", tslib.__assign({ role: "tablist", className: "Tablist" }, labelProp, { onKeyDown: handleKeyDown }), tabComponents)));
|
|
8033
|
+
};
|
|
8034
|
+
Tabs.displayName = 'Tabs';
|
|
8035
|
+
Tabs.propTypes = {
|
|
8036
|
+
children: PropTypes.node.isRequired,
|
|
8037
|
+
'aria-label': PropTypes.string,
|
|
8038
|
+
'aria-labelledby': PropTypes.string,
|
|
8039
|
+
initialActiveIndex: PropTypes.number,
|
|
8040
|
+
thin: PropTypes.bool,
|
|
8041
|
+
className: PropTypes.string
|
|
8042
|
+
};
|
|
8043
|
+
|
|
8044
|
+
var TabPanel = React.forwardRef(function (_a, ref) {
|
|
8045
|
+
var children = _a.children, propId = _a.id, className = _a.className, other = tslib.__rest(_a, ["children", "id", "className"]);
|
|
8046
|
+
var id = (propId ? [propId] : nextId.useId(1, 'tabpanel'))[0];
|
|
8047
|
+
return (React__default.createElement("div", tslib.__assign({ role: "tabpanel", className: classNames('TabPanel', className), id: id, ref: ref }, other), children));
|
|
8048
|
+
});
|
|
8049
|
+
TabPanel.displayName = 'TabPanel';
|
|
8050
|
+
TabPanel.propTypes = {
|
|
8051
|
+
id: PropTypes.string,
|
|
8052
|
+
children: PropTypes.node,
|
|
8053
|
+
className: PropTypes.string
|
|
8054
|
+
};
|
|
8055
|
+
|
|
7875
8056
|
var commonPropTypes = {
|
|
7876
8057
|
children: PropTypes.node.isRequired,
|
|
7877
8058
|
className: PropTypes.string
|
|
@@ -7937,6 +8118,39 @@ Stepper.propTypes = {
|
|
|
7937
8118
|
className: PropTypes.string
|
|
7938
8119
|
};
|
|
7939
8120
|
|
|
8121
|
+
var Panel = function (_a) {
|
|
8122
|
+
var className = _a.className, _b = _a.title, title = _b === void 0 ? '' : _b, actions = _a.actions, children = _a.children;
|
|
8123
|
+
return (React__default.createElement("div", { className: classNames('Panel', className) },
|
|
8124
|
+
React__default.createElement("div", { className: "Panel__Header" },
|
|
8125
|
+
title && React__default.createElement("div", { className: "Panel__Header-title" }, title),
|
|
8126
|
+
actions && React__default.createElement("div", { className: "Panel__Header-actions" }, actions)),
|
|
8127
|
+
React__default.createElement("div", { className: "Panel__Content" }, children)));
|
|
8128
|
+
};
|
|
8129
|
+
Panel.displayName = 'Panel';
|
|
8130
|
+
Panel.propTypes = {
|
|
8131
|
+
children: PropTypes.node.isRequired,
|
|
8132
|
+
className: PropTypes.string
|
|
8133
|
+
};
|
|
8134
|
+
|
|
8135
|
+
/**
|
|
8136
|
+
* Hook to be used similarly to the React.Component#componentDidMount.
|
|
8137
|
+
* Executes the provided `effect` when `dependencies` change but does not
|
|
8138
|
+
* execute the effect initially (on mount) - only on update.
|
|
8139
|
+
*
|
|
8140
|
+
* @param effect {Function} function to be executed when dependencies update
|
|
8141
|
+
* @param dependencies {Any} any valid dependency argument to React.useEffect
|
|
8142
|
+
*/
|
|
8143
|
+
var useDidUpdate = function (effect, dependencies) {
|
|
8144
|
+
var mounted = React__default.useRef(false);
|
|
8145
|
+
React__default.useEffect(function () {
|
|
8146
|
+
if (!mounted.current) {
|
|
8147
|
+
mounted.current = true;
|
|
8148
|
+
return;
|
|
8149
|
+
}
|
|
8150
|
+
effect();
|
|
8151
|
+
}, dependencies);
|
|
8152
|
+
};
|
|
8153
|
+
|
|
7940
8154
|
var LIGHT_THEME_CLASS = 'cauldron--theme-light';
|
|
7941
8155
|
var DARK_THEME_CLASS = 'cauldron--theme-dark';
|
|
7942
8156
|
var ThemeContext = React.createContext({});
|
|
@@ -8025,6 +8239,7 @@ exports.OptionsMenuItem = OptionsMenuItem;
|
|
|
8025
8239
|
exports.OptionsMenuList = OptionsMenuList;
|
|
8026
8240
|
exports.OptionsMenuTrigger = OptionsMenuTrigger;
|
|
8027
8241
|
exports.OptionsMenuWrapper = OptionsMenuWrapper;
|
|
8242
|
+
exports.Panel = Panel;
|
|
8028
8243
|
exports.PanelTrigger = PanelTrigger$1;
|
|
8029
8244
|
exports.Pointout = Pointout;
|
|
8030
8245
|
exports.RadioGroup = RadioGroup;
|
|
@@ -8036,12 +8251,15 @@ exports.Sidebar = SideBar;
|
|
|
8036
8251
|
exports.SkipLink = SkipLink;
|
|
8037
8252
|
exports.Step = Step;
|
|
8038
8253
|
exports.Stepper = Stepper;
|
|
8254
|
+
exports.Tab = Tab;
|
|
8255
|
+
exports.TabPanel = TabPanel;
|
|
8039
8256
|
exports.Table = Table;
|
|
8040
8257
|
exports.TableBody = TableBody;
|
|
8041
8258
|
exports.TableCell = TableCell;
|
|
8042
8259
|
exports.TableHead = TableHead;
|
|
8043
8260
|
exports.TableHeader = TableHeader;
|
|
8044
8261
|
exports.TableRow = TableRow;
|
|
8262
|
+
exports.Tabs = Tabs;
|
|
8045
8263
|
exports.Tag = Tag;
|
|
8046
8264
|
exports.TagLabel = TagLabel;
|
|
8047
8265
|
exports.TextField = TextField;
|
|
@@ -8058,4 +8276,6 @@ exports.TopBarMenu = TopBarMenu;
|
|
|
8058
8276
|
exports.TopBarTrigger = TopBarTrigger;
|
|
8059
8277
|
exports.Workspace = Workspace;
|
|
8060
8278
|
exports.focusableSelector = focusableSelector;
|
|
8279
|
+
exports.iconTypes = iconTypes;
|
|
8280
|
+
exports.useDidUpdate = useDidUpdate;
|
|
8061
8281
|
exports.useThemeContext = useThemeContext;
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
|
|
4
|
+
|
|
5
|
+
var React = require('react');
|
|
6
|
+
var React__default = _interopDefault(React);
|
|
7
|
+
|
|
8
|
+
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
9
|
+
|
|
10
|
+
var _ref = /*#__PURE__*/React.createElement("path", {
|
|
11
|
+
d: "M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-7 9h-2V5h2v6zm0 4h-2v-2h2v2z",
|
|
12
|
+
vectorEffect: "non-scaling-stroke",
|
|
13
|
+
fill: "currentColor"
|
|
14
|
+
});
|
|
15
|
+
|
|
16
|
+
function SvgInfoSquare(props) {
|
|
17
|
+
return /*#__PURE__*/React.createElement("svg", _extends({
|
|
18
|
+
overflow: "visible",
|
|
19
|
+
preserveAspectRatio: "none",
|
|
20
|
+
width: 24,
|
|
21
|
+
height: 24
|
|
22
|
+
}, props), _ref);
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
exports.default = SvgInfoSquare;
|
|
@@ -7,24 +7,7 @@ var React__default = _interopDefault(React);
|
|
|
7
7
|
|
|
8
8
|
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
9
9
|
|
|
10
|
-
var _ref = /*#__PURE__*/React.createElement("
|
|
11
|
-
d: "M0 0h24v24H0V0z",
|
|
12
|
-
id: "menu_svg__a",
|
|
13
|
-
vectorEffect: "non-scaling-stroke",
|
|
14
|
-
fill: "currentColor"
|
|
15
|
-
}));
|
|
16
|
-
|
|
17
|
-
var _ref2 = /*#__PURE__*/React.createElement("clipPath", {
|
|
18
|
-
xmlnsXlink: "http://www.w3.org/1999/xlink",
|
|
19
|
-
id: "menu_svg__b",
|
|
20
|
-
vectorEffect: "non-scaling-stroke"
|
|
21
|
-
}, /*#__PURE__*/React.createElement("use", {
|
|
22
|
-
xlinkHref: "#menu_svg__a",
|
|
23
|
-
vectorEffect: "non-scaling-stroke"
|
|
24
|
-
}));
|
|
25
|
-
|
|
26
|
-
var _ref3 = /*#__PURE__*/React.createElement("path", {
|
|
27
|
-
clipPath: "url(#menu_svg__b)",
|
|
10
|
+
var _ref = /*#__PURE__*/React.createElement("path", {
|
|
28
11
|
d: "M20 9H4v2h16V9zM4 15h16v-2H4v2z",
|
|
29
12
|
vectorEffect: "non-scaling-stroke",
|
|
30
13
|
fill: "currentColor"
|
|
@@ -37,7 +20,7 @@ function SvgMenu(props) {
|
|
|
37
20
|
viewBox: "0 0 24 24",
|
|
38
21
|
width: 19,
|
|
39
22
|
height: 19
|
|
40
|
-
}, props), _ref
|
|
23
|
+
}, props), _ref);
|
|
41
24
|
}
|
|
42
25
|
|
|
43
26
|
exports.default = SvgMenu;
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
|
|
4
|
+
|
|
5
|
+
var React = require('react');
|
|
6
|
+
var React__default = _interopDefault(React);
|
|
7
|
+
|
|
8
|
+
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
9
|
+
|
|
10
|
+
var _ref = /*#__PURE__*/React.createElement("path", {
|
|
11
|
+
d: "M12 6v3l4-4-4-4v3c-4.42 0-8 3.58-8 8 0 1.57.46 3.03 1.24 4.26L6.7 14.8A5.87 5.87 0 016 12c0-3.31 2.69-6 6-6zm6.76 1.74L17.3 9.2c.44.84.7 1.79.7 2.8 0 3.31-2.69 6-6 6v-3l-4 4 4 4v-3c4.42 0 8-3.58 8-8 0-1.57-.46-3.03-1.24-4.26z",
|
|
12
|
+
vectorEffect: "non-scaling-stroke",
|
|
13
|
+
fill: "currentColor"
|
|
14
|
+
});
|
|
15
|
+
|
|
16
|
+
function SvgRecycle(props) {
|
|
17
|
+
return /*#__PURE__*/React.createElement("svg", _extends({
|
|
18
|
+
overflow: "visible",
|
|
19
|
+
preserveAspectRatio: "none",
|
|
20
|
+
width: 24,
|
|
21
|
+
height: 24
|
|
22
|
+
}, props), _ref);
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
exports.default = SvgRecycle;
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
|
|
4
|
+
|
|
5
|
+
var React = require('react');
|
|
6
|
+
var React__default = _interopDefault(React);
|
|
7
|
+
|
|
8
|
+
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
9
|
+
|
|
10
|
+
var _ref = /*#__PURE__*/React.createElement("circle", {
|
|
11
|
+
cx: 14.5,
|
|
12
|
+
cy: 14.5,
|
|
13
|
+
r: 13.5,
|
|
14
|
+
fill: "currentColor"
|
|
15
|
+
});
|
|
16
|
+
|
|
17
|
+
var _ref2 = /*#__PURE__*/React.createElement("path", {
|
|
18
|
+
d: "M6.23 12.58h.92v5.51h-.92a.91.91 0 01-.92-.91V13.5a.92.92 0 01.92-.92zm14.7-1.38V19a1.84 1.84 0 01-1.84 1.84H9.91A1.84 1.84 0 018.07 19v-7.8a2.29 2.29 0 012.29-2.29h3.22V7.07a.92.92 0 011.84 0v1.84h3.22a2.29 2.29 0 012.29 2.29zm-8 2.3a1.15 1.15 0 10-1.15 1.15 1.15 1.15 0 001.15-1.15zm-.23 3.68h-1.88v.91h1.84zm2.76 0h-1.88v.91h1.84zm3-3.68a1.15 1.15 0 10-1.15 1.15 1.16 1.16 0 001.15-1.15zm-.23 3.68h-1.89v.91h1.84zm5.51-3.68v3.68a.92.92 0 01-.92.91h-.92v-5.51h.92a.92.92 0 01.92.92z",
|
|
19
|
+
fill: "currentColor"
|
|
20
|
+
});
|
|
21
|
+
|
|
22
|
+
function SvgRobot(props) {
|
|
23
|
+
return /*#__PURE__*/React.createElement("svg", _extends({
|
|
24
|
+
width: 29,
|
|
25
|
+
height: 29
|
|
26
|
+
}, props), _ref, _ref2);
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
exports.default = SvgRobot;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Hook to be used similarly to the React.Component#componentDidMount.
|
|
3
|
+
* Executes the provided `effect` when `dependencies` change but does not
|
|
4
|
+
* execute the effect initially (on mount) - only on update.
|
|
5
|
+
*
|
|
6
|
+
* @param effect {Function} function to be executed when dependencies update
|
|
7
|
+
* @param dependencies {Any} any valid dependency argument to React.useEffect
|
|
8
|
+
*/
|
|
9
|
+
declare const useDidUpdate: (effect: () => void, dependencies: unknown[]) => void;
|
|
10
|
+
export default useDidUpdate;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@deque/cauldron-react",
|
|
3
|
-
"version": "2.0.0-canary.
|
|
3
|
+
"version": "2.0.0-canary.2844ef8e",
|
|
4
4
|
"description": "Fully accessible react components library for Deque Cauldron",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
@@ -13,6 +13,7 @@
|
|
|
13
13
|
],
|
|
14
14
|
"scripts": {
|
|
15
15
|
"build": "yarn build:lib && yarn build:css",
|
|
16
|
+
"prebuild:lib": "node scripts/buildIconTypes.js",
|
|
16
17
|
"build:lib": "rollup -c && tsc --declaration --emitDeclarationOnly --outDir lib",
|
|
17
18
|
"build:css": "postcss --output=lib/cauldron.css src/index.css",
|
|
18
19
|
"dev": "concurrently 'yarn build:css --watch' 'rollup -c --watch'",
|