@deque/cauldron-react 2.0.0-canary.a379427c → 2.0.0-canary.c598b999

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.
@@ -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;
@@ -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: string;
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
4
  export interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
4
- icon: string;
5
+ icon: IconType;
5
6
  label: string;
6
7
  tooltipPlacement?: TooltipProps['placement'];
7
8
  tooltipVariant?: TooltipProps['variant'];
@@ -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" | "type" | "name" | "target" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "controls" | "coords" | "crossOrigin" | "dateTime" | "download" | "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>>;
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;
@@ -1,5 +1,7 @@
1
1
  import React from 'react';
2
2
  interface TabProps extends React.HTMLAttributes<HTMLLIElement> {
3
+ target: React.RefObject<HTMLDivElement> | HTMLElement;
4
+ id?: string;
3
5
  children?: React.ReactNode;
4
6
  }
5
7
  declare const Tab: React.ForwardRefExoticComponent<TabProps & React.RefAttributes<HTMLLIElement>>;
@@ -1,15 +1,8 @@
1
1
  import React from 'react';
2
- import PropTypes from 'prop-types';
3
2
  interface TabPanelProps extends React.HTMLAttributes<HTMLDivElement> {
3
+ id?: string;
4
4
  children?: React.ReactNode;
5
5
  className?: string;
6
6
  }
7
- declare const TabPanel: {
8
- ({ children, ...other }: TabPanelProps): JSX.Element;
9
- displayName: string;
10
- Proptypes: {
11
- children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
12
- className: PropTypes.Requireable<string>;
13
- };
14
- };
7
+ declare const TabPanel: React.ForwardRefExoticComponent<TabPanelProps & React.RefAttributes<HTMLDivElement>>;
15
8
  export default TabPanel;
@@ -1,6 +1,5 @@
1
1
  import React from 'react';
2
2
  import PropTypes from 'prop-types';
3
- declare type TabsVariant = 'full-width';
4
3
  declare type LabelProps = {
5
4
  'aria-label': string;
6
5
  } | {
@@ -9,23 +8,19 @@ declare type LabelProps = {
9
8
  declare type TabsProps = {
10
9
  children: React.ReactNode;
11
10
  initialActiveIndex?: number;
12
- id?: string;
13
11
  thin?: boolean;
14
12
  className?: string;
15
- variant?: TabsVariant;
16
13
  } & LabelProps;
17
14
  declare const Tabs: {
18
- ({ children, thin, id: propId, initialActiveIndex, variant, className, ...labelProp }: TabsProps): JSX.Element;
15
+ ({ children, thin, initialActiveIndex, className, ...labelProp }: TabsProps): JSX.Element;
19
16
  displayName: string;
20
17
  propTypes: {
21
18
  children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
22
- label: PropTypes.Requireable<string>;
23
- labelledby: PropTypes.Requireable<string>;
24
- id: PropTypes.Requireable<string>;
19
+ 'aria-label': PropTypes.Requireable<string>;
20
+ 'aria-labelledby': PropTypes.Requireable<string>;
25
21
  initialActiveIndex: PropTypes.Requireable<number>;
26
22
  thin: PropTypes.Requireable<boolean>;
27
23
  className: PropTypes.Requireable<string>;
28
- variant: PropTypes.Requireable<string>;
29
24
  };
30
25
  };
31
26
  export default Tabs;
@@ -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';
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-2bb052ac.js'); });
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-ignore
1571
+ // @ts-expect-error
1491
1572
  tooltipPlacement: PropTypes.string,
1492
- // @ts-ignore
1573
+ // @ts-expect-error
1493
1574
  tooltipVariant: PropTypes.string,
1494
1575
  tooltipPortal: PropTypes.any,
1495
- // @ts-ignore
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('Card', className) }, other)));
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) {
@@ -2374,7 +2459,7 @@ function PanelTrigger(_a) {
2374
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"]);
2375
2460
  return (React__default.createElement("button", tslib.__assign({}, other, { className: classNames('ExpandCollapse__trigger', fullWidth ? 'fullWidth' : '', className), type: "button", "aria-expanded": open, onClick: onClick }),
2376
2461
  React__default.createElement("div", { className: "ExpandCollapse__trigger-title" }, typeof children === 'function' ? children({ open: !!open }) : children),
2377
- React__default.createElement(Icon, { type: "chevron-" + (open ? 'down' : 'right') })));
2462
+ React__default.createElement(Icon, { type: open ? 'chevron-down' : 'chevron-right' })));
2378
2463
  }
2379
2464
  PanelTrigger.propTypes = {
2380
2465
  children: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
@@ -7862,42 +7947,31 @@ TableRow.propTypes = {
7862
7947
  className: PropTypes.string
7863
7948
  };
7864
7949
 
7865
- var TabPanel = function (_a) {
7866
- var children = _a.children, other = tslib.__rest(_a, ["children"]);
7867
- return (React__default.createElement("div", tslib.__assign({ role: "tabpanel" }, other), children));
7868
- };
7869
- TabPanel.displayName = 'TabPanel';
7870
- TabPanel.Proptypes = {
7871
- children: PropTypes.node,
7872
- className: PropTypes.string
7873
- };
7874
-
7875
7950
  var Tab = React__default.forwardRef(function (_a, ref) {
7876
- var children = _a.children, other = tslib.__rest(_a, ["children"]);
7877
- return (React__default.createElement("li", tslib.__assign({ ref: ref, role: "tab" }, other), children));
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));
7878
7953
  });
7879
7954
  Tab.displayName = 'Tab';
7880
7955
  Tab.propTypes = {
7956
+ target: PropTypes.any.isRequired,
7957
+ id: PropTypes.string,
7881
7958
  children: PropTypes.node
7882
7959
  };
7883
7960
 
7884
- var _a$1 = [37, 39, 36, 35], left = _a$1[0], right = _a$1[1], home = _a$1[2], end = _a$1[3];
7885
7961
  var Tabs = function (_a) {
7886
- var children = _a.children, thin = _a.thin, propId = _a.id, _b = _a.initialActiveIndex, initialActiveIndex = _b === void 0 ? 0 : _b, variant = _a.variant, className = _a.className, labelProp = tslib.__rest(_a, ["children", "thin", "id", "initialActiveIndex", "variant", "className"]);
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"]);
7887
7963
  var _c = React.useState(initialActiveIndex), activeIndex = _c[0], setActiveIndex = _c[1];
7888
- var id = (propId ? [propId] : nextId.useId(1, 'tabs'))[0];
7889
7964
  var focusedTabRef = React.useRef(null);
7890
7965
  var tabs = React__default.Children.toArray(children).filter(function (child) { return child.type === Tab; });
7891
- var panels = React__default.Children.toArray(children).filter(function (child) { return child.type === TabPanel; });
7892
7966
  var tabCount = tabs.length;
7893
7967
  var handleClick = function (index) {
7894
7968
  setActiveIndex(index);
7895
7969
  };
7896
7970
  var handleKeyDown = function (event) {
7897
- var which = event.which;
7971
+ var key = event.key;
7898
7972
  var newIndex = activeIndex;
7899
- switch (which) {
7900
- case left: {
7973
+ switch (key) {
7974
+ case 'ArrowLeft': {
7901
7975
  newIndex = activeIndex - 1;
7902
7976
  // circularity
7903
7977
  if (newIndex === -1) {
@@ -7906,7 +7980,7 @@ var Tabs = function (_a) {
7906
7980
  setActiveIndex(newIndex);
7907
7981
  break;
7908
7982
  }
7909
- case right: {
7983
+ case 'ArrowRight': {
7910
7984
  newIndex = activeIndex + 1;
7911
7985
  // circularity
7912
7986
  if (newIndex === tabCount) {
@@ -7915,12 +7989,13 @@ var Tabs = function (_a) {
7915
7989
  setActiveIndex(newIndex);
7916
7990
  break;
7917
7991
  }
7918
- case home: {
7992
+ case 'Home': {
7919
7993
  newIndex = 0;
7920
7994
  setActiveIndex(newIndex);
7921
7995
  break;
7922
7996
  }
7923
- case end: {
7997
+ case 'End': {
7998
+ event.preventDefault();
7924
7999
  newIndex = tabCount - 1;
7925
8000
  setActiveIndex(newIndex);
7926
8001
  break;
@@ -7929,22 +8004,24 @@ var Tabs = function (_a) {
7929
8004
  };
7930
8005
  var tabComponents = tabs.map(function (child, index) {
7931
8006
  var _a;
7932
- var other = tslib.__rest(child.props, []);
8007
+ var _b;
8008
+ var _c = child.props, target = _c.target, propId = _c.id, other = tslib.__rest(_c, ["target", "id"]);
7933
8009
  var selected = index === activeIndex;
7934
- var config = tslib.__assign((_a = { id: id + "-" + index, className: classNames('Tab', {
7935
- 'Tab--active': selected,
7936
- 'Tab--full-width': variant === 'full-width'
7937
- }), tabIndex: index === activeIndex ? 0 : -1 }, _a['aria-controls'] = id + "-panel-" + index, _a['aria-selected'] = selected, _a.ref = index === activeIndex ? focusedTabRef : null, _a.onClick = function () { return handleClick(index); }, _a), other);
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);
7938
8023
  return React__default.cloneElement(child, config);
7939
8024
  });
7940
- var tabPanelComponents = panels.map(function (child, index) {
7941
- var _a;
7942
- var _b = child.props, className = _b.className, other = tslib.__rest(_b, ["className"]);
7943
- var panelId = id + "-panel-" + index;
7944
- return React__default.cloneElement(child, tslib.__assign((_a = { id: panelId }, _a['aria-labelledby'] = id + "-" + index, _a.className = classNames('TabPanel', className, {
7945
- 'TabPanel--hidden': activeIndex !== index
7946
- }), _a), other));
7947
- });
7948
8025
  useDidUpdate(function () {
7949
8026
  var _a;
7950
8027
  (_a = focusedTabRef.current) === null || _a === void 0 ? void 0 : _a.focus();
@@ -7952,21 +8029,28 @@ var Tabs = function (_a) {
7952
8029
  return (React__default.createElement("div", { className: classNames('Tabs', className, {
7953
8030
  'Tabs--thin': thin
7954
8031
  }) },
7955
- React__default.createElement("ul", tslib.__assign({ role: "tablist", className: classNames('Tablist', {
7956
- 'Tablist--full-width': variant === 'full-width'
7957
- }) }, labelProp, { onKeyDown: handleKeyDown }), tabComponents),
7958
- tabPanelComponents));
8032
+ React__default.createElement("ul", tslib.__assign({ role: "tablist", className: "Tablist" }, labelProp, { onKeyDown: handleKeyDown }), tabComponents)));
7959
8033
  };
7960
8034
  Tabs.displayName = 'Tabs';
7961
8035
  Tabs.propTypes = {
7962
8036
  children: PropTypes.node.isRequired,
7963
- label: PropTypes.string,
7964
- labelledby: PropTypes.string,
7965
- id: PropTypes.string,
8037
+ 'aria-label': PropTypes.string,
8038
+ 'aria-labelledby': PropTypes.string,
7966
8039
  initialActiveIndex: PropTypes.number,
7967
8040
  thin: PropTypes.bool,
7968
- className: PropTypes.string,
7969
- variant: PropTypes.string
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
7970
8054
  };
7971
8055
 
7972
8056
  var commonPropTypes = {
@@ -8192,5 +8276,6 @@ exports.TopBarMenu = TopBarMenu;
8192
8276
  exports.TopBarTrigger = TopBarTrigger;
8193
8277
  exports.Workspace = Workspace;
8194
8278
  exports.focusableSelector = focusableSelector;
8279
+ exports.iconTypes = iconTypes;
8195
8280
  exports.useDidUpdate = useDidUpdate;
8196
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("defs", null, /*#__PURE__*/React.createElement("path", {
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, _ref2, _ref3);
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;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@deque/cauldron-react",
3
- "version": "2.0.0-canary.a379427c",
3
+ "version": "2.0.0-canary.c598b999",
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'",