@deque/cauldron-react 4.5.0-canary.16adb900 → 4.5.0-canary.21294bb6
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 +0 -1
- package/lib/components/Accordion/Accordion.d.ts +42 -0
- package/lib/components/Accordion/index.d.ts +3 -0
- package/lib/components/Breadcrumb/BreadcrumbLink.d.ts +1 -1
- package/lib/components/Button/index.d.ts +1 -1
- package/lib/components/ExpandCollapsePanel/PanelTrigger.d.ts +9 -7
- package/lib/components/Icon/types.d.ts +1 -1
- package/lib/components/Select/index.d.ts +1 -1
- package/lib/filter-solid.js +24 -0
- package/lib/index.d.ts +1 -0
- package/lib/index.js +214 -147
- package/lib/play.js +25 -0
- package/lib/recycle-square.js +24 -0
- package/package.json +3 -3
package/lib/cauldron.css
CHANGED
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { ExpandCollapsePanelProps } from '../ExpandCollapsePanel';
|
|
3
|
+
import PropTypes from 'prop-types';
|
|
4
|
+
export interface AccordionTriggerProps extends React.HTMLAttributes<HTMLButtonElement> {
|
|
5
|
+
children: React.ReactElement;
|
|
6
|
+
heading?: React.ReactElement | {
|
|
7
|
+
level: string | undefined;
|
|
8
|
+
};
|
|
9
|
+
}
|
|
10
|
+
declare const AccordionTrigger: {
|
|
11
|
+
({ children, ...triggerProps }: AccordionTriggerProps): JSX.Element;
|
|
12
|
+
displayName: string;
|
|
13
|
+
propTypes: {
|
|
14
|
+
children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
|
|
15
|
+
heading: PropTypes.Requireable<string | undefined>;
|
|
16
|
+
};
|
|
17
|
+
};
|
|
18
|
+
interface AccordionContentProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
19
|
+
children: React.ReactNode | React.ReactNode[];
|
|
20
|
+
className?: string;
|
|
21
|
+
}
|
|
22
|
+
declare const AccordionContent: {
|
|
23
|
+
({ children, className, ...otherProps }: AccordionContentProps): JSX.Element;
|
|
24
|
+
displayName: string;
|
|
25
|
+
propTypes: {
|
|
26
|
+
children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
|
|
27
|
+
className: PropTypes.Requireable<string>;
|
|
28
|
+
};
|
|
29
|
+
};
|
|
30
|
+
interface AccordionProps extends ExpandCollapsePanelProps {
|
|
31
|
+
children: React.ReactNode;
|
|
32
|
+
}
|
|
33
|
+
declare const Accordion: {
|
|
34
|
+
({ children }: AccordionProps): JSX.Element | null;
|
|
35
|
+
displayName: string;
|
|
36
|
+
propTypes: {
|
|
37
|
+
children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
|
|
38
|
+
className: PropTypes.Requireable<string>;
|
|
39
|
+
};
|
|
40
|
+
};
|
|
41
|
+
export default Accordion;
|
|
42
|
+
export { Accordion, AccordionTrigger, AccordionContent };
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
interface BreadcrumbLinkProps extends React.
|
|
2
|
+
interface BreadcrumbLinkProps extends Omit<React.LinkHTMLAttributes<HTMLLinkElement>, 'as'> {
|
|
3
3
|
as?: React.ElementType;
|
|
4
4
|
}
|
|
5
5
|
declare const BreadcrumbLink: React.ForwardRefExoticComponent<BreadcrumbLinkProps & React.RefAttributes<HTMLElement>>;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React, { ButtonHTMLAttributes, Ref } from 'react';
|
|
2
2
|
export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|
3
3
|
buttonRef?: Ref<HTMLButtonElement>;
|
|
4
|
-
variant?: 'primary' | 'secondary' | 'error' | 'link';
|
|
4
|
+
variant?: 'primary' | 'secondary' | 'error' | 'link' | 'tag';
|
|
5
5
|
thin?: boolean;
|
|
6
6
|
}
|
|
7
7
|
declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
|
|
@@ -10,17 +10,19 @@ export interface PanelTriggerProps extends Omit<React.ButtonHTMLAttributes<HTMLB
|
|
|
10
10
|
onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
|
|
11
11
|
iconExpanded?: IconType;
|
|
12
12
|
iconCollapsed?: IconType;
|
|
13
|
+
heading?: React.ReactElement | {
|
|
14
|
+
level: string | undefined;
|
|
15
|
+
};
|
|
13
16
|
}
|
|
14
|
-
declare
|
|
15
|
-
|
|
16
|
-
|
|
17
|
+
declare const _default: React.MemoExoticComponent<{
|
|
18
|
+
({ children, className, open, fullWidth, onClick, iconExpanded, iconCollapsed, heading, ...otherProps }: PanelTriggerProps): JSX.Element;
|
|
19
|
+
propTypes: {
|
|
17
20
|
children: PropTypes.Requireable<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
|
|
18
21
|
open: PropTypes.Requireable<boolean>;
|
|
19
|
-
onClick: PropTypes.Requireable<(...args: any[]) => any>;
|
|
20
|
-
className: PropTypes.Requireable<string>;
|
|
21
22
|
iconExpanded: PropTypes.Requireable<string>;
|
|
22
23
|
iconCollapsed: PropTypes.Requireable<string>;
|
|
24
|
+
heading: PropTypes.Requireable<number>;
|
|
23
25
|
};
|
|
24
|
-
|
|
25
|
-
|
|
26
|
+
displayName: string;
|
|
27
|
+
}>;
|
|
26
28
|
export default _default;
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
* GENERATED CODE. DO NOT EDIT DIRECTLY!
|
|
3
3
|
*/
|
|
4
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' | 'copy' | 'download' | 'dropper' | 'exchange' | 'external-link' | 'eye' | 'filter' | 'flag' | 'gears' | 'grid' | 'hamburger-menu' | 'highlight' | 'info-circle-alt' | 'info-circle' | 'info-square' | 'kabob' | 'list' | 'lock' | 'magnifying-glass' | 'menu' | 'minus' | 'new-releases' | 'new' | 'no' | 'pencil' | 'plus' | 'question-circle' | 'radio-checked' | 'radio-unchecked' | 'recycle' | 'resend' | 'robot' | 'run-again' | 'save' | 'share' | 'sort-triangle' | 'sort' | 'star' | 'sun' | 'tag' | 'target' | 'trash' | 'triangle-up' | 'triangle-down' | 'triangle-left' | 'triangle-right' | 'upload';
|
|
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' | 'copy' | 'download' | 'dropper' | 'exchange' | 'external-link' | 'eye' | 'filter-solid' | 'filter' | 'flag' | 'gears' | 'grid' | 'hamburger-menu' | 'highlight' | 'info-circle-alt' | 'info-circle' | 'info-square' | 'kabob' | 'list' | 'lock' | 'magnifying-glass' | 'menu' | 'minus' | 'new-releases' | 'new' | 'no' | 'pencil' | 'play' | 'plus' | 'question-circle' | 'radio-checked' | 'radio-unchecked' | 'recycle-square' | 'recycle' | 'resend' | 'robot' | 'run-again' | 'save' | 'share' | 'sort-triangle' | 'sort' | 'star' | 'sun' | 'tag' | 'target' | 'trash' | 'triangle-up' | 'triangle-down' | 'triangle-left' | 'triangle-right' | 'upload';
|
|
6
6
|
/** iconTypes holds each valid icon type. */
|
|
7
7
|
export declare const iconTypes: string[];
|
|
@@ -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, "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "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" | "form" | "list" | "step" | "cite" | "data" | "label" | "span" | "summary" | "pattern" | "type" | "key" | "download" | "target" | "name" | "
|
|
18
|
+
declare const Select: React.ForwardRefExoticComponent<Pick<SelectProps, "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "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" | "form" | "list" | "step" | "cite" | "data" | "label" | "span" | "summary" | "pattern" | "type" | "key" | "download" | "target" | "name" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "value" | "open" | "error" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "async" | "autoComplete" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "content" | "controls" | "coords" | "crossOrigin" | "dateTime" | "default" | "defer" | "encType" | "frameBorder" | "headers" | "height" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "multiple" | "muted" | "nonce" | "noValidate" | "optimum" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "size" | "sizes" | "src" | "srcDoc" | "srcLang" | "srcSet" | "start" | "useMap" | "width" | "wmode" | "wrap" | "options" | "requiredText"> & React.RefAttributes<HTMLSelectElement>>;
|
|
19
19
|
export default Select;
|
|
@@ -0,0 +1,24 @@
|
|
|
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
|
+
var _path;
|
|
9
|
+
|
|
10
|
+
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); }
|
|
11
|
+
|
|
12
|
+
const SvgFilterSolid = props => /*#__PURE__*/React.createElement("svg", _extends({
|
|
13
|
+
overflow: "visible",
|
|
14
|
+
preserveAspectRatio: "none",
|
|
15
|
+
viewBox: "0 0 24 24",
|
|
16
|
+
height: 24,
|
|
17
|
+
width: 24
|
|
18
|
+
}, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
|
|
19
|
+
d: "M18.65 4.67H5.34a.616.616 0 0 0-.62.41c-.12.24-.06.55.16.73L10 10.94V16c0 .18.07.35.2.47l2.67 2.67c.12.13.29.2.47.2.09 0 .18-.02.26-.05.26-.1.42-.35.4-.63v-7.72l5.13-5.13c.21-.18.28-.48.15-.73a.628.628 0 0 0-.63-.41z",
|
|
20
|
+
vectorEffect: "non-scaling-stroke",
|
|
21
|
+
fill: "currentColor"
|
|
22
|
+
})));
|
|
23
|
+
|
|
24
|
+
exports.default = SvgFilterSolid;
|
package/lib/index.d.ts
CHANGED
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
*/
|
|
4
4
|
export { default as Workspace } from './components/Workspace';
|
|
5
5
|
export { default as Main } from './components/Main';
|
|
6
|
+
export { default as Accordion, AccordionTrigger, AccordionContent } from './components/Accordion';
|
|
6
7
|
export { default as Layout } from './components/Layout';
|
|
7
8
|
export { default as Icon, IconType, iconTypes } from './components/Icon';
|
|
8
9
|
export { default as Offscreen } from './components/Offscreen';
|
package/lib/index.js
CHANGED
|
@@ -9,9 +9,9 @@ var React = require('react');
|
|
|
9
9
|
var React__default = _interopDefault(React);
|
|
10
10
|
var PropTypes = _interopDefault(require('prop-types'));
|
|
11
11
|
var classNames = _interopDefault(require('classnames'));
|
|
12
|
-
var keyname = _interopDefault(require('keyname'));
|
|
13
12
|
var nextId = require('react-id-generator');
|
|
14
13
|
var nextId__default = _interopDefault(nextId);
|
|
14
|
+
var keyname = _interopDefault(require('keyname'));
|
|
15
15
|
var reactDom = require('react-dom');
|
|
16
16
|
var FocusTrap = _interopDefault(require('focus-trap-react'));
|
|
17
17
|
var reactPopper = require('react-popper');
|
|
@@ -151,6 +151,7 @@ var iconTypes = [
|
|
|
151
151
|
'exchange',
|
|
152
152
|
'external-link',
|
|
153
153
|
'eye',
|
|
154
|
+
'filter-solid',
|
|
154
155
|
'filter',
|
|
155
156
|
'flag',
|
|
156
157
|
'gears',
|
|
@@ -170,10 +171,12 @@ var iconTypes = [
|
|
|
170
171
|
'new',
|
|
171
172
|
'no',
|
|
172
173
|
'pencil',
|
|
174
|
+
'play',
|
|
173
175
|
'plus',
|
|
174
176
|
'question-circle',
|
|
175
177
|
'radio-checked',
|
|
176
178
|
'radio-unchecked',
|
|
179
|
+
'recycle-square',
|
|
177
180
|
'recycle',
|
|
178
181
|
'resend',
|
|
179
182
|
'robot',
|
|
@@ -218,6 +221,7 @@ function __variableDynamicImportRuntime0__(path) {
|
|
|
218
221
|
case './icons/exchange.svg': return Promise.resolve().then(function () { return require('./exchange.js'); });
|
|
219
222
|
case './icons/external-link.svg': return Promise.resolve().then(function () { return require('./external-link.js'); });
|
|
220
223
|
case './icons/eye.svg': return Promise.resolve().then(function () { return require('./eye.js'); });
|
|
224
|
+
case './icons/filter-solid.svg': return Promise.resolve().then(function () { return require('./filter-solid.js'); });
|
|
221
225
|
case './icons/filter.svg': return Promise.resolve().then(function () { return require('./filter.js'); });
|
|
222
226
|
case './icons/flag.svg': return Promise.resolve().then(function () { return require('./flag.js'); });
|
|
223
227
|
case './icons/gears.svg': return Promise.resolve().then(function () { return require('./gears.js'); });
|
|
@@ -237,10 +241,12 @@ function __variableDynamicImportRuntime0__(path) {
|
|
|
237
241
|
case './icons/new.svg': return Promise.resolve().then(function () { return require('./new.js'); });
|
|
238
242
|
case './icons/no.svg': return Promise.resolve().then(function () { return require('./no.js'); });
|
|
239
243
|
case './icons/pencil.svg': return Promise.resolve().then(function () { return require('./pencil.js'); });
|
|
244
|
+
case './icons/play.svg': return Promise.resolve().then(function () { return require('./play.js'); });
|
|
240
245
|
case './icons/plus.svg': return Promise.resolve().then(function () { return require('./plus.js'); });
|
|
241
246
|
case './icons/question-circle.svg': return Promise.resolve().then(function () { return require('./question-circle.js'); });
|
|
242
247
|
case './icons/radio-checked.svg': return Promise.resolve().then(function () { return require('./radio-checked.js'); });
|
|
243
248
|
case './icons/radio-unchecked.svg': return Promise.resolve().then(function () { return require('./radio-unchecked.js'); });
|
|
249
|
+
case './icons/recycle-square.svg': return Promise.resolve().then(function () { return require('./recycle-square.js'); });
|
|
244
250
|
case './icons/recycle.svg': return Promise.resolve().then(function () { return require('./recycle.js'); });
|
|
245
251
|
case './icons/resend.svg': return Promise.resolve().then(function () { return require('./resend.js'); });
|
|
246
252
|
case './icons/robot.svg': return Promise.resolve().then(function () { return require('./robot.js'); });
|
|
@@ -305,6 +311,207 @@ Icon.propTypes = {
|
|
|
305
311
|
};
|
|
306
312
|
Icon.displayName = 'Icon';
|
|
307
313
|
|
|
314
|
+
var PanelTrigger = function (_a) {
|
|
315
|
+
var children = _a.children, className = _a.className, open = _a.open, fullWidth = _a.fullWidth, onClick = _a.onClick, _b = _a.iconExpanded, iconExpanded = _b === void 0 ? 'chevron-down' : _b, _c = _a.iconCollapsed, iconCollapsed = _c === void 0 ? 'chevron-right' : _c, heading = _a.heading, otherProps = tslib.__rest(_a, ["children", "className", "open", "fullWidth", "onClick", "iconExpanded", "iconCollapsed", "heading"]);
|
|
316
|
+
var Header = typeof heading === 'object' && 'level' in heading && !!heading.level
|
|
317
|
+
? "h".concat(heading.level)
|
|
318
|
+
: React__default.Fragment;
|
|
319
|
+
return (React__default.createElement(Header, null,
|
|
320
|
+
React__default.createElement("button", tslib.__assign({ className: classNames(className, 'ExpandCollapse__trigger', {
|
|
321
|
+
fullWidth: fullWidth
|
|
322
|
+
}), type: "button", "aria-expanded": open, onClick: onClick }, otherProps),
|
|
323
|
+
React__default.createElement("div", { className: "ExpandCollapse__trigger-title" }, typeof children === 'function'
|
|
324
|
+
? children({ open: !!open })
|
|
325
|
+
: children),
|
|
326
|
+
React__default.createElement(Icon, { type: open ? iconExpanded : iconCollapsed }))));
|
|
327
|
+
};
|
|
328
|
+
PanelTrigger.propTypes = {
|
|
329
|
+
children: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
|
|
330
|
+
open: PropTypes.bool,
|
|
331
|
+
iconExpanded: PropTypes.string,
|
|
332
|
+
iconCollapsed: PropTypes.string,
|
|
333
|
+
heading: PropTypes.number
|
|
334
|
+
};
|
|
335
|
+
PanelTrigger.displayName = 'PanelTrigger';
|
|
336
|
+
var PanelTrigger$1 = React__default.memo(PanelTrigger);
|
|
337
|
+
|
|
338
|
+
var injectStyleTag = function () {
|
|
339
|
+
var style = document.createElement('style');
|
|
340
|
+
document.head.appendChild(style);
|
|
341
|
+
return style;
|
|
342
|
+
};
|
|
343
|
+
var setStyle = function (tag, cssString) {
|
|
344
|
+
tag.textContent = cssString;
|
|
345
|
+
};
|
|
346
|
+
var removeStyleTag = function (tag) {
|
|
347
|
+
document.head.removeChild(tag);
|
|
348
|
+
};
|
|
349
|
+
|
|
350
|
+
var ExpandCollapsePanel = /** @class */ (function (_super) {
|
|
351
|
+
tslib.__extends(ExpandCollapsePanel, _super);
|
|
352
|
+
function ExpandCollapsePanel() {
|
|
353
|
+
var _this = _super !== null && _super.apply(this, arguments) || this;
|
|
354
|
+
_this.state = {
|
|
355
|
+
controlled: typeof _this.props.open !== 'undefined',
|
|
356
|
+
isOpen: typeof _this.props.open !== 'undefined' ? _this.props.open : false
|
|
357
|
+
};
|
|
358
|
+
_this.panel = React__default.createRef();
|
|
359
|
+
_this.handleToggle = function (e) {
|
|
360
|
+
var onToggle = _this.props.onToggle;
|
|
361
|
+
var _a = _this.state, isOpen = _a.isOpen, controlled = _a.controlled;
|
|
362
|
+
onToggle(e);
|
|
363
|
+
if (!controlled) {
|
|
364
|
+
_this.setState({ isOpen: !isOpen, isAnimating: true });
|
|
365
|
+
}
|
|
366
|
+
};
|
|
367
|
+
_this.animateOpen = function () {
|
|
368
|
+
var panel = _this.panel.current;
|
|
369
|
+
var animationTiming = _this.props.animationTiming;
|
|
370
|
+
if (!animationTiming) {
|
|
371
|
+
_this.setState({ isAnimating: false });
|
|
372
|
+
return;
|
|
373
|
+
}
|
|
374
|
+
var rect = panel === null || panel === void 0 ? void 0 : panel.getBoundingClientRect();
|
|
375
|
+
if (!rect) {
|
|
376
|
+
return;
|
|
377
|
+
}
|
|
378
|
+
if (!_this.styleTag) {
|
|
379
|
+
_this.styleTag = injectStyleTag();
|
|
380
|
+
}
|
|
381
|
+
setStyle(_this.styleTag, "\n @keyframes expandOpenAnimation {\n 0% { opacity: 0; height: 0; }\n 100% { opacity: 1; height: ".concat(rect.height, "px; }\n }\n\n .cauldron-expand-open {\n will-change: opacity, height;\n overflow: hidden;\n animation: expandOpenAnimation ease-in-out ").concat(animationTiming, "ms forwards;\n }\n "));
|
|
382
|
+
_this.setState({ animationClass: 'cauldron-expand-open' }, function () {
|
|
383
|
+
setTimeout(function () {
|
|
384
|
+
_this.setState({ animationClass: '', isAnimating: false });
|
|
385
|
+
setStyle(_this.styleTag, '');
|
|
386
|
+
}, animationTiming);
|
|
387
|
+
});
|
|
388
|
+
};
|
|
389
|
+
_this.animateClose = function () {
|
|
390
|
+
var panel = _this.panel.current;
|
|
391
|
+
var animationTiming = _this.props.animationTiming;
|
|
392
|
+
if (!animationTiming) {
|
|
393
|
+
_this.setState({ isAnimating: false });
|
|
394
|
+
return;
|
|
395
|
+
}
|
|
396
|
+
if (!_this.styleTag) {
|
|
397
|
+
_this.styleTag = injectStyleTag();
|
|
398
|
+
}
|
|
399
|
+
var rect = panel === null || panel === void 0 ? void 0 : panel.getBoundingClientRect();
|
|
400
|
+
if (!rect)
|
|
401
|
+
return;
|
|
402
|
+
setStyle(_this.styleTag, "\n @keyframes collapseCloseAnimation {\n 0% { opacity: 1; height: ".concat(rect.height, "px; }\n 100% { opacity: 0; height: 0; }\n }\n\n .cauldron-collapse-close {\n will-change: opacity, height;\n overflow: hidden;\n animation: collapseCloseAnimation ease-in-out ").concat(animationTiming, "ms forwards;\n }\n "));
|
|
403
|
+
_this.setState({ animationClass: 'cauldron-collapse-close' }, function () {
|
|
404
|
+
setTimeout(function () {
|
|
405
|
+
_this.setState({ animationClass: '', isAnimating: false });
|
|
406
|
+
setStyle(_this.styleTag, '');
|
|
407
|
+
}, animationTiming);
|
|
408
|
+
});
|
|
409
|
+
};
|
|
410
|
+
return _this;
|
|
411
|
+
}
|
|
412
|
+
ExpandCollapsePanel.prototype.componentWillUnmount = function () {
|
|
413
|
+
var styleTag = this.styleTag;
|
|
414
|
+
if (styleTag) {
|
|
415
|
+
removeStyleTag(styleTag);
|
|
416
|
+
}
|
|
417
|
+
};
|
|
418
|
+
ExpandCollapsePanel.prototype.componentDidUpdate = function (prevProps, prevState) {
|
|
419
|
+
var _a = this.state, openState = _a.isOpen, controlled = _a.controlled;
|
|
420
|
+
var openProp = this.props.open;
|
|
421
|
+
if (controlled && openState !== openProp) {
|
|
422
|
+
this.setState({ isOpen: !!openProp, isAnimating: true });
|
|
423
|
+
}
|
|
424
|
+
if (typeof openProp !== typeof prevProps.open) {
|
|
425
|
+
this.setState({ controlled: typeof openProp !== 'undefined' });
|
|
426
|
+
}
|
|
427
|
+
if (prevState.isOpen !== openState && openState) {
|
|
428
|
+
this.animateOpen();
|
|
429
|
+
}
|
|
430
|
+
else if (prevState.isOpen !== openState && !openState) {
|
|
431
|
+
this.animateClose();
|
|
432
|
+
}
|
|
433
|
+
};
|
|
434
|
+
ExpandCollapsePanel.prototype.render = function () {
|
|
435
|
+
var _a = this.props, children = _a.children, animationTiming = _a.animationTiming, className = _a.className, onToggle = _a.onToggle, open = _a.open, otherProps = tslib.__rest(_a, ["children", "animationTiming", "className", "onToggle", "open"]);
|
|
436
|
+
var _b = this.state, isOpen = _b.isOpen, isAnimating = _b.isAnimating, animationClass = _b.animationClass;
|
|
437
|
+
var trigger = React__default.Children.toArray(children).find(function (child) { return child.type === PanelTrigger$1; });
|
|
438
|
+
var panelElements = React__default.Children.toArray(children).filter(function (child) {
|
|
439
|
+
return typeof child === 'string' ||
|
|
440
|
+
child.type !== PanelTrigger$1;
|
|
441
|
+
});
|
|
442
|
+
return (React__default.createElement(React__default.Fragment, null,
|
|
443
|
+
trigger &&
|
|
444
|
+
React__default.cloneElement(trigger, {
|
|
445
|
+
open: isOpen,
|
|
446
|
+
onClick: this.handleToggle
|
|
447
|
+
}),
|
|
448
|
+
React__default.createElement("div", tslib.__assign({ className: classNames(className, 'ExpandCollapse__panel', animationClass, {
|
|
449
|
+
'is--hidden': !isOpen && !isAnimating
|
|
450
|
+
}), ref: this.panel }, otherProps), panelElements)));
|
|
451
|
+
};
|
|
452
|
+
ExpandCollapsePanel.defaultProps = {
|
|
453
|
+
animationTiming: 250,
|
|
454
|
+
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
455
|
+
onToggle: function () { }
|
|
456
|
+
};
|
|
457
|
+
ExpandCollapsePanel.propTypes = {
|
|
458
|
+
open: PropTypes.bool,
|
|
459
|
+
children: PropTypes.node.isRequired,
|
|
460
|
+
className: PropTypes.string,
|
|
461
|
+
animationTiming: PropTypes.oneOfType([PropTypes.number, PropTypes.bool]),
|
|
462
|
+
onToggle: PropTypes.func
|
|
463
|
+
};
|
|
464
|
+
return ExpandCollapsePanel;
|
|
465
|
+
}(React__default.Component));
|
|
466
|
+
|
|
467
|
+
var AccordionTrigger = function (_a) {
|
|
468
|
+
var children = _a.children, triggerProps = tslib.__rest(_a, ["children"]);
|
|
469
|
+
return React__default.createElement(React__default.Fragment, null, children);
|
|
470
|
+
};
|
|
471
|
+
var AccordionContent = function (_a) {
|
|
472
|
+
var children = _a.children, className = _a.className, otherProps = tslib.__rest(_a, ["children", "className"]);
|
|
473
|
+
return (React__default.createElement("div", tslib.__assign({ className: classNames('Accordion__panel', className) }, otherProps), children));
|
|
474
|
+
};
|
|
475
|
+
var Accordion = function (_a) {
|
|
476
|
+
var children = _a.children;
|
|
477
|
+
var childrenArray = React__default.Children.toArray(children);
|
|
478
|
+
var trigger = childrenArray.find(function (child) { return child.type === AccordionTrigger; });
|
|
479
|
+
var panelElement = childrenArray.find(function (child) {
|
|
480
|
+
return typeof child === 'string' ||
|
|
481
|
+
child.type === AccordionContent;
|
|
482
|
+
});
|
|
483
|
+
var isValid = !!(React__default.isValidElement(trigger) && React__default.isValidElement(panelElement));
|
|
484
|
+
if (!isValid) {
|
|
485
|
+
console.warn('Must provide <AccordionTrigger /> and <AccordionContent /> element(s). You provided:', {
|
|
486
|
+
trigger: trigger,
|
|
487
|
+
panelElement: panelElement,
|
|
488
|
+
isValid: isValid
|
|
489
|
+
});
|
|
490
|
+
return null;
|
|
491
|
+
}
|
|
492
|
+
var _b = trigger.props, triggerClassName = _b.className, triggerProps = tslib.__rest(_b, ["className"]);
|
|
493
|
+
var elementId = nextId.useId();
|
|
494
|
+
return (React__default.createElement("div", { className: "Accordion" },
|
|
495
|
+
React__default.createElement(ExpandCollapsePanel, tslib.__assign({ id: panelElement.props.id || "".concat(elementId, "-panel") }, panelElement.props),
|
|
496
|
+
React__default.createElement(PanelTrigger$1, tslib.__assign({ iconCollapsed: "triangle-right", iconExpanded: "triangle-down", className: classNames('Accordion__trigger', trigger.props.className), "aria-controls": panelElement.props.id || "".concat(elementId, "-panel"), heading: trigger.props.heading }, trigger.props), trigger),
|
|
497
|
+
panelElement)));
|
|
498
|
+
};
|
|
499
|
+
Accordion.displayName = 'Accordion';
|
|
500
|
+
AccordionContent.displayName = 'AccordionContent';
|
|
501
|
+
AccordionTrigger.displayName = 'AccordionTrigger';
|
|
502
|
+
Accordion.propTypes = {
|
|
503
|
+
children: PropTypes.node,
|
|
504
|
+
className: PropTypes.string
|
|
505
|
+
};
|
|
506
|
+
AccordionTrigger.propTypes = {
|
|
507
|
+
children: PropTypes.node,
|
|
508
|
+
heading: PropTypes.oneOf(['h1', 'h2', 'h3', 'h4', 'h5', 'h6', undefined])
|
|
509
|
+
};
|
|
510
|
+
AccordionContent.propTypes = {
|
|
511
|
+
children: PropTypes.node.isRequired,
|
|
512
|
+
className: PropTypes.string
|
|
513
|
+
};
|
|
514
|
+
|
|
308
515
|
var Scrim = /** @class */ (function (_super) {
|
|
309
516
|
tslib.__extends(Scrim, _super);
|
|
310
517
|
function Scrim(props) {
|
|
@@ -1483,6 +1690,8 @@ var Button = React.forwardRef(function (_a, ref) {
|
|
|
1483
1690
|
'Button--secondary': variant === 'secondary',
|
|
1484
1691
|
'Button--error': variant === 'error',
|
|
1485
1692
|
Link: variant === 'link',
|
|
1693
|
+
Tag: variant === 'tag',
|
|
1694
|
+
'Button--tag': variant === 'tag',
|
|
1486
1695
|
'Button--thin': thin
|
|
1487
1696
|
}), ref: ref || buttonRef }, other), children));
|
|
1488
1697
|
});
|
|
@@ -2674,152 +2883,6 @@ var TextField = /** @class */ (function (_super) {
|
|
|
2674
2883
|
return TextField;
|
|
2675
2884
|
}(React__default.Component));
|
|
2676
2885
|
|
|
2677
|
-
function PanelTrigger(_a) {
|
|
2678
|
-
var children = _a.children, className = _a.className, open = _a.open, fullWidth = _a.fullWidth, onClick = _a.onClick, _b = _a.iconExpanded, iconExpanded = _b === void 0 ? 'chevron-down' : _b, _c = _a.iconCollapsed, iconCollapsed = _c === void 0 ? 'chevron-right' : _c, other = tslib.__rest(_a, ["children", "className", "open", "fullWidth", "onClick", "iconExpanded", "iconCollapsed"]);
|
|
2679
|
-
return (React__default.createElement("button", tslib.__assign({}, other, { className: classNames('ExpandCollapse__trigger', fullWidth ? 'fullWidth' : '', className), type: "button", "aria-expanded": open, onClick: onClick }),
|
|
2680
|
-
React__default.createElement("div", { className: "ExpandCollapse__trigger-title" }, typeof children === 'function' ? children({ open: !!open }) : children),
|
|
2681
|
-
React__default.createElement(Icon, { type: open ? iconExpanded : iconCollapsed })));
|
|
2682
|
-
}
|
|
2683
|
-
PanelTrigger.propTypes = {
|
|
2684
|
-
children: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
|
|
2685
|
-
open: PropTypes.bool,
|
|
2686
|
-
onClick: PropTypes.func,
|
|
2687
|
-
className: PropTypes.string,
|
|
2688
|
-
iconExpanded: PropTypes.string,
|
|
2689
|
-
iconCollapsed: PropTypes.string
|
|
2690
|
-
};
|
|
2691
|
-
var PanelTrigger$1 = React__default.memo(PanelTrigger);
|
|
2692
|
-
|
|
2693
|
-
var injectStyleTag = function () {
|
|
2694
|
-
var style = document.createElement('style');
|
|
2695
|
-
document.head.appendChild(style);
|
|
2696
|
-
return style;
|
|
2697
|
-
};
|
|
2698
|
-
var setStyle = function (tag, cssString) {
|
|
2699
|
-
tag.textContent = cssString;
|
|
2700
|
-
};
|
|
2701
|
-
var removeStyleTag = function (tag) {
|
|
2702
|
-
document.head.removeChild(tag);
|
|
2703
|
-
};
|
|
2704
|
-
|
|
2705
|
-
var ExpandCollapsePanel = /** @class */ (function (_super) {
|
|
2706
|
-
tslib.__extends(ExpandCollapsePanel, _super);
|
|
2707
|
-
function ExpandCollapsePanel() {
|
|
2708
|
-
var _this = _super !== null && _super.apply(this, arguments) || this;
|
|
2709
|
-
_this.state = {
|
|
2710
|
-
controlled: typeof _this.props.open !== 'undefined',
|
|
2711
|
-
isOpen: typeof _this.props.open !== 'undefined' ? _this.props.open : false
|
|
2712
|
-
};
|
|
2713
|
-
_this.panel = React__default.createRef();
|
|
2714
|
-
_this.handleToggle = function (e) {
|
|
2715
|
-
var onToggle = _this.props.onToggle;
|
|
2716
|
-
var _a = _this.state, isOpen = _a.isOpen, controlled = _a.controlled;
|
|
2717
|
-
onToggle(e);
|
|
2718
|
-
if (!controlled) {
|
|
2719
|
-
_this.setState({ isOpen: !isOpen, isAnimating: true });
|
|
2720
|
-
}
|
|
2721
|
-
};
|
|
2722
|
-
_this.animateOpen = function () {
|
|
2723
|
-
var panel = _this.panel.current;
|
|
2724
|
-
var animationTiming = _this.props.animationTiming;
|
|
2725
|
-
if (!animationTiming) {
|
|
2726
|
-
_this.setState({ isAnimating: false });
|
|
2727
|
-
return;
|
|
2728
|
-
}
|
|
2729
|
-
var rect = panel === null || panel === void 0 ? void 0 : panel.getBoundingClientRect();
|
|
2730
|
-
if (!rect) {
|
|
2731
|
-
return;
|
|
2732
|
-
}
|
|
2733
|
-
if (!_this.styleTag) {
|
|
2734
|
-
_this.styleTag = injectStyleTag();
|
|
2735
|
-
}
|
|
2736
|
-
setStyle(_this.styleTag, "\n @keyframes expandOpenAnimation {\n 0% { opacity: 0; height: 0; }\n 100% { opacity: 1; height: ".concat(rect.height, "px; }\n }\n\n .cauldron-expand-open {\n will-change: opacity, height;\n overflow: hidden;\n animation: expandOpenAnimation ease-in-out ").concat(animationTiming, "ms forwards;\n }\n "));
|
|
2737
|
-
_this.setState({ animationClass: 'cauldron-expand-open' }, function () {
|
|
2738
|
-
setTimeout(function () {
|
|
2739
|
-
_this.setState({ animationClass: '', isAnimating: false });
|
|
2740
|
-
setStyle(_this.styleTag, '');
|
|
2741
|
-
}, animationTiming);
|
|
2742
|
-
});
|
|
2743
|
-
};
|
|
2744
|
-
_this.animateClose = function () {
|
|
2745
|
-
var panel = _this.panel.current;
|
|
2746
|
-
var animationTiming = _this.props.animationTiming;
|
|
2747
|
-
if (!animationTiming) {
|
|
2748
|
-
_this.setState({ isAnimating: false });
|
|
2749
|
-
return;
|
|
2750
|
-
}
|
|
2751
|
-
if (!_this.styleTag) {
|
|
2752
|
-
_this.styleTag = injectStyleTag();
|
|
2753
|
-
}
|
|
2754
|
-
var rect = panel === null || panel === void 0 ? void 0 : panel.getBoundingClientRect();
|
|
2755
|
-
if (!rect)
|
|
2756
|
-
return;
|
|
2757
|
-
setStyle(_this.styleTag, "\n @keyframes collapseCloseAnimation {\n 0% { opacity: 1; height: ".concat(rect.height, "px; }\n 100% { opacity: 0; height: 0; }\n }\n\n .cauldron-collapse-close {\n will-change: opacity, height;\n overflow: hidden;\n animation: collapseCloseAnimation ease-in-out ").concat(animationTiming, "ms forwards;\n }\n "));
|
|
2758
|
-
_this.setState({ animationClass: 'cauldron-collapse-close' }, function () {
|
|
2759
|
-
setTimeout(function () {
|
|
2760
|
-
_this.setState({ animationClass: '', isAnimating: false });
|
|
2761
|
-
setStyle(_this.styleTag, '');
|
|
2762
|
-
}, animationTiming);
|
|
2763
|
-
});
|
|
2764
|
-
};
|
|
2765
|
-
return _this;
|
|
2766
|
-
}
|
|
2767
|
-
ExpandCollapsePanel.prototype.componentWillUnmount = function () {
|
|
2768
|
-
var styleTag = this.styleTag;
|
|
2769
|
-
if (styleTag) {
|
|
2770
|
-
removeStyleTag(styleTag);
|
|
2771
|
-
}
|
|
2772
|
-
};
|
|
2773
|
-
ExpandCollapsePanel.prototype.componentDidUpdate = function (prevProps, prevState) {
|
|
2774
|
-
var _a = this.state, openState = _a.isOpen, controlled = _a.controlled;
|
|
2775
|
-
var openProp = this.props.open;
|
|
2776
|
-
if (controlled && openState !== openProp) {
|
|
2777
|
-
this.setState({ isOpen: !!openProp, isAnimating: true });
|
|
2778
|
-
}
|
|
2779
|
-
if (typeof openProp !== typeof prevProps.open) {
|
|
2780
|
-
this.setState({ controlled: typeof openProp !== 'undefined' });
|
|
2781
|
-
}
|
|
2782
|
-
if (prevState.isOpen !== openState && openState) {
|
|
2783
|
-
this.animateOpen();
|
|
2784
|
-
}
|
|
2785
|
-
else if (prevState.isOpen !== openState && !openState) {
|
|
2786
|
-
this.animateClose();
|
|
2787
|
-
}
|
|
2788
|
-
};
|
|
2789
|
-
ExpandCollapsePanel.prototype.render = function () {
|
|
2790
|
-
/* eslint-disable no-unused-vars */
|
|
2791
|
-
var _a = this.props, children = _a.children, animationTiming = _a.animationTiming, className = _a.className, onToggle = _a.onToggle, open = _a.open, other = tslib.__rest(_a, ["children", "animationTiming", "className", "onToggle", "open"]);
|
|
2792
|
-
/* eslint-enable no-unused-vars */
|
|
2793
|
-
var _b = this.state, isOpen = _b.isOpen, isAnimating = _b.isAnimating, animationClass = _b.animationClass;
|
|
2794
|
-
var trigger = React__default.Children.toArray(children).find(function (child) { return child.type === PanelTrigger$1; });
|
|
2795
|
-
var panelElements = React__default.Children.toArray(children).filter(function (child) {
|
|
2796
|
-
return typeof child === 'string' ||
|
|
2797
|
-
child.type !== PanelTrigger$1;
|
|
2798
|
-
});
|
|
2799
|
-
return (React__default.createElement(React__default.Fragment, null,
|
|
2800
|
-
trigger &&
|
|
2801
|
-
React__default.cloneElement(trigger, {
|
|
2802
|
-
open: isOpen,
|
|
2803
|
-
onClick: this.handleToggle
|
|
2804
|
-
}),
|
|
2805
|
-
React__default.createElement("div", tslib.__assign({}, other, { className: classNames('ExpandCollapse__panel', animationClass, className, {
|
|
2806
|
-
'is--hidden': !isOpen && !isAnimating
|
|
2807
|
-
}), ref: this.panel }), panelElements)));
|
|
2808
|
-
};
|
|
2809
|
-
ExpandCollapsePanel.defaultProps = {
|
|
2810
|
-
animationTiming: 250,
|
|
2811
|
-
onToggle: function () { }
|
|
2812
|
-
};
|
|
2813
|
-
ExpandCollapsePanel.propTypes = {
|
|
2814
|
-
open: PropTypes.bool,
|
|
2815
|
-
children: PropTypes.node.isRequired,
|
|
2816
|
-
className: PropTypes.string,
|
|
2817
|
-
animationTiming: PropTypes.oneOfType([PropTypes.number, PropTypes.bool]),
|
|
2818
|
-
onToggle: PropTypes.func
|
|
2819
|
-
};
|
|
2820
|
-
return ExpandCollapsePanel;
|
|
2821
|
-
}(React__default.Component));
|
|
2822
|
-
|
|
2823
2886
|
function _objectWithoutPropertiesLoose(source, excluded) {
|
|
2824
2887
|
if (source == null) return {};
|
|
2825
2888
|
var target = {};
|
|
@@ -8681,6 +8744,7 @@ var BreadcrumbLink = React.forwardRef(function (_a, ref) {
|
|
|
8681
8744
|
var className = _a.className, _b = _a.as, ElementType = _b === void 0 ? 'a' : _b, children = _a.children, props = tslib.__rest(_a, ["className", "as", "children"]);
|
|
8682
8745
|
return (React__default.createElement(ElementType, tslib.__assign({ className: classNames('Link', 'Breadcrumb__Link', className), ref: ref }, props), children));
|
|
8683
8746
|
});
|
|
8747
|
+
BreadcrumbLink.displayName = 'BreadcrumbLink';
|
|
8684
8748
|
|
|
8685
8749
|
var ColumnLeft = React.forwardRef(function (_a, ref) {
|
|
8686
8750
|
var className = _a.className, children = _a.children, props = tslib.__rest(_a, ["className", "children"]);
|
|
@@ -8909,6 +8973,9 @@ ThemeProvider.propTypes = {
|
|
|
8909
8973
|
initialTheme: PropTypes.string
|
|
8910
8974
|
};
|
|
8911
8975
|
|
|
8976
|
+
exports.Accordion = Accordion;
|
|
8977
|
+
exports.AccordionContent = AccordionContent;
|
|
8978
|
+
exports.AccordionTrigger = AccordionTrigger;
|
|
8912
8979
|
exports.Address = Address;
|
|
8913
8980
|
exports.AddressCityStateZip = AddressCityStateZip;
|
|
8914
8981
|
exports.AddressLine = AddressLine;
|
package/lib/play.js
ADDED
|
@@ -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
|
+
var _path;
|
|
9
|
+
|
|
10
|
+
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); }
|
|
11
|
+
|
|
12
|
+
const SvgPlay = props => /*#__PURE__*/React.createElement("svg", _extends({
|
|
13
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
14
|
+
overflow: "visible",
|
|
15
|
+
preserveAspectRatio: "none",
|
|
16
|
+
viewBox: "0 0 24 24",
|
|
17
|
+
height: 24,
|
|
18
|
+
width: 24
|
|
19
|
+
}, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
|
|
20
|
+
d: "M8 5v14l11-7z",
|
|
21
|
+
fill: "currentColor",
|
|
22
|
+
vectorEffect: "non-scaling-stroke"
|
|
23
|
+
})));
|
|
24
|
+
|
|
25
|
+
exports.default = SvgPlay;
|
|
@@ -0,0 +1,24 @@
|
|
|
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
|
+
var _path;
|
|
9
|
+
|
|
10
|
+
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); }
|
|
11
|
+
|
|
12
|
+
const SvgRecycleSquare = props => /*#__PURE__*/React.createElement("svg", _extends({
|
|
13
|
+
overflow: "visible",
|
|
14
|
+
preserveAspectRatio: "none",
|
|
15
|
+
viewBox: "0 0 24 24",
|
|
16
|
+
height: 24,
|
|
17
|
+
width: 24
|
|
18
|
+
}, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
|
|
19
|
+
d: "M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4z",
|
|
20
|
+
vectorEffect: "non-scaling-stroke",
|
|
21
|
+
fill: "currentColor"
|
|
22
|
+
})));
|
|
23
|
+
|
|
24
|
+
exports.default = SvgRecycleSquare;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@deque/cauldron-react",
|
|
3
|
-
"version": "4.5.0-canary.
|
|
3
|
+
"version": "4.5.0-canary.21294bb6",
|
|
4
4
|
"description": "Fully accessible react components library for Deque Cauldron",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
@@ -88,8 +88,8 @@
|
|
|
88
88
|
"url": "git+https://github.com/dequelabs/cauldron-react.git"
|
|
89
89
|
},
|
|
90
90
|
"peerDependencies": {
|
|
91
|
-
"react": "
|
|
92
|
-
"react-dom": "
|
|
91
|
+
"react": ">=16.6 <= 18",
|
|
92
|
+
"react-dom": ">=16.6 <= 18"
|
|
93
93
|
},
|
|
94
94
|
"nyc": {
|
|
95
95
|
"checkCoverage": true,
|