@uniformdev/design-system 13.0.1-alpha.278 → 16.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/esm/index.js +148 -110
- package/dist/index.d.ts +236 -154
- package/dist/index.js +149 -111
- package/package.json +2 -2
package/dist/index.d.ts
CHANGED
|
@@ -3,157 +3,206 @@ import React__default, { ReactNode } from 'react';
|
|
|
3
3
|
import * as _emotion_react from '@emotion/react';
|
|
4
4
|
import { SerializedStyles } from '@emotion/react';
|
|
5
5
|
import * as _emotion_react_types_jsx_namespace from '@emotion/react/types/jsx-namespace';
|
|
6
|
+
import * as reakit_ts from 'reakit/ts';
|
|
6
7
|
import { ButtonProps as ButtonProps$1 } from 'reakit/Button';
|
|
7
|
-
import {
|
|
8
|
+
import { IconType as IconType$1, IconBaseProps } from 'react-icons';
|
|
8
9
|
import { GroupBase } from 'react-select';
|
|
9
10
|
import { StateManagerProps } from 'react-select/dist/declarations/src/useStateManager';
|
|
10
11
|
import InternalSelect from 'react-select/dist/declarations/src/Select';
|
|
11
12
|
import { MenuHTMLProps, MenuProps as MenuProps$1, MenuStateReturn } from 'reakit/Menu';
|
|
12
|
-
import { MenuItemHTMLProps } from 'reakit';
|
|
13
|
+
import { MenuItemHTMLProps, MenuProps as MenuProps$2 } from 'reakit';
|
|
13
14
|
|
|
15
|
+
/** @todo: line 144 onwards will be brought into a title, paragraph, list and link components */
|
|
14
16
|
declare type ThemeProps = {
|
|
17
|
+
/** sets whether to disable a provided reset stylesheet or not
|
|
18
|
+
* @default false
|
|
19
|
+
*/
|
|
15
20
|
disableReset?: boolean;
|
|
16
21
|
};
|
|
22
|
+
/**
|
|
23
|
+
* Uniform CSS Variables, font provider and optional reset stylesheet
|
|
24
|
+
* @example <Theme disableReset={true} /> */
|
|
17
25
|
declare const Theme: React__default.ElementType;
|
|
18
26
|
|
|
27
|
+
/** Breakpoint label values */
|
|
28
|
+
declare type breakpointSizeProps = 'sm' | 'md' | 'lg' | 'xl' | '2xl';
|
|
29
|
+
declare type breakpointsProps = Record<breakpointSizeProps, string>;
|
|
30
|
+
/** Object of breakpoints and the pixel values */
|
|
31
|
+
declare const breakpoints: breakpointsProps;
|
|
32
|
+
/**
|
|
33
|
+
* Media Query Helper Function
|
|
34
|
+
* @function
|
|
35
|
+
* @param {string} size - The responsive breakpoint value
|
|
36
|
+
* @returns {string} - compiled media query e.g. (min-width: 640px)
|
|
37
|
+
* @example `${mq('md')} { background: red; }`
|
|
38
|
+
*/
|
|
39
|
+
declare const mq: (size: breakpointSizeProps) => string;
|
|
40
|
+
|
|
19
41
|
declare const labelText: _emotion_react.SerializedStyles;
|
|
20
42
|
declare const input: _emotion_react.SerializedStyles;
|
|
21
43
|
declare const inputError: _emotion_react.SerializedStyles;
|
|
22
44
|
declare const inputSelect: _emotion_react.SerializedStyles;
|
|
23
45
|
|
|
46
|
+
/** Custom scrollbar styles */
|
|
24
47
|
declare const scrollbarStyles: _emotion_react.SerializedStyles;
|
|
25
48
|
|
|
26
49
|
declare type UniformLogoProps = {
|
|
50
|
+
/** sets a light or dark theme for the uniform badge or logo component */
|
|
27
51
|
theme?: 'light' | 'dark';
|
|
28
52
|
};
|
|
29
53
|
|
|
30
54
|
/**
|
|
31
|
-
*
|
|
32
|
-
*
|
|
33
|
-
* @component
|
|
34
|
-
* @param {'light' | 'dark'} theme - sets a light or dark theme for the uniform badge
|
|
35
|
-
* @param {React.SVGAttributes<SVGElement>} props - sets react svg element attribute props
|
|
55
|
+
* Uniform Badge Logo
|
|
56
|
+
* @param props - sets react svg element attribute props
|
|
36
57
|
* @example <UniformBadge theme="dark" />
|
|
37
58
|
*/
|
|
38
59
|
declare const UniformBadge: ({ theme, ...props }: React__default.SVGAttributes<SVGElement> & UniformLogoProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
|
|
39
60
|
|
|
40
61
|
/**
|
|
41
|
-
*
|
|
42
|
-
*
|
|
43
|
-
* @component
|
|
44
|
-
* @param {'light' | 'dark'} theme - sets a light or dark theme for the uniform logo
|
|
45
|
-
* @example <UniformLogo theme="light" />
|
|
46
|
-
*/
|
|
62
|
+
* Uniform Logo
|
|
63
|
+
* @example <UniformLogo theme="light" /> */
|
|
47
64
|
declare const UniformLogo: ({ theme }: UniformLogoProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
|
|
48
65
|
|
|
66
|
+
/** Button themes that are available to use with our brand */
|
|
49
67
|
declare type ButtonThemeProps = 'primary' | 'secondary' | 'tertiary' | 'unimportant' | 'ghost';
|
|
68
|
+
/** Button sizes that are available to use with our brand */
|
|
50
69
|
declare type ButtonSizeProps = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
|
|
51
70
|
declare type ButtonProps = ButtonProps$1 & {
|
|
71
|
+
/** sets the theme of the button
|
|
72
|
+
* @default "primary"
|
|
73
|
+
*/
|
|
52
74
|
buttonType?: ButtonThemeProps;
|
|
75
|
+
/** React child node */
|
|
76
|
+
children?: React$1.ReactNode;
|
|
53
77
|
/**
|
|
54
|
-
* @
|
|
55
|
-
*/
|
|
78
|
+
* @default "md"
|
|
79
|
+
* @deprecated size might no longer be used as we are trying to consolidate button designs */
|
|
56
80
|
size?: ButtonSizeProps;
|
|
57
|
-
/**
|
|
58
|
-
* @deprecated rounded is no longer used
|
|
59
|
-
*/
|
|
81
|
+
/** @deprecated rounded is no longer used */
|
|
60
82
|
rounded?: boolean;
|
|
61
83
|
};
|
|
62
84
|
/**
|
|
63
|
-
* Button
|
|
64
|
-
*
|
|
65
|
-
* @component
|
|
66
|
-
* @param {string} buttonType - sets the theme of the button
|
|
85
|
+
* Uniform Button Component
|
|
67
86
|
* @param {BaseButtonProps} props - object of button props from reakit
|
|
68
|
-
* @param {React.ReactNode} children - react child elements
|
|
69
87
|
* @example <Button buttonType="secondary" size="md" onClick={() => alert('hello world')}>Click me</Button>
|
|
70
88
|
*/
|
|
71
|
-
declare const Button: React$1.
|
|
89
|
+
declare const Button: React$1.ForwardRefExoticComponent<Pick<reakit_ts.RoleOptions & {
|
|
90
|
+
disabled?: boolean | undefined;
|
|
91
|
+
focusable?: boolean | undefined;
|
|
92
|
+
} & {
|
|
93
|
+
unstable_clickOnEnter?: boolean | undefined;
|
|
94
|
+
unstable_clickOnSpace?: boolean | undefined;
|
|
95
|
+
} & React$1.HTMLAttributes<any> & React$1.RefAttributes<any> & {
|
|
96
|
+
wrapElement?: ((element: React$1.ReactNode) => React$1.ReactNode) | undefined;
|
|
97
|
+
} & {
|
|
98
|
+
disabled?: boolean | undefined;
|
|
99
|
+
} & React$1.ButtonHTMLAttributes<any> & {
|
|
100
|
+
/** sets the theme of the button
|
|
101
|
+
* @default "primary"
|
|
102
|
+
*/
|
|
103
|
+
buttonType?: ButtonThemeProps | undefined;
|
|
104
|
+
/** React child node */
|
|
105
|
+
children?: React$1.ReactNode;
|
|
106
|
+
/**
|
|
107
|
+
* @default "md"
|
|
108
|
+
* @deprecated size might no longer be used as we are trying to consolidate button designs */
|
|
109
|
+
size?: ButtonSizeProps | undefined;
|
|
110
|
+
/** @deprecated rounded is no longer used */
|
|
111
|
+
rounded?: boolean | undefined;
|
|
112
|
+
}, "form" | "slot" | "style" | "title" | "className" | "key" | "type" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "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" | "name" | "focusable" | "buttonType" | "size" | "unstable_system" | "disabled" | "unstable_clickOnEnter" | "unstable_clickOnSpace" | "wrapElement" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "value" | "rounded"> & React$1.RefAttributes<HTMLButtonElement>>;
|
|
72
113
|
|
|
73
|
-
declare const iconNames: readonly ["add-r", "add", "airplane", "alarm", "album", "align-bottom", "align-center", "align-left", "align-middle", "align-right", "align-top", "anchor", "apple-watch", "arrange-back", "arrange-front", "arrow-align-h", "arrow-align-v", "arrow-bottom-left-o", "arrow-bottom-left-r", "arrow-bottom-left", "arrow-bottom-right-o", "arrow-bottom-right-r", "arrow-bottom-right", "arrow-down-o", "arrow-down-r", "arrow-down", "arrow-left-o", "arrow-left-r", "arrow-left", "arrow-long-down-c", "arrow-long-down-e", "arrow-long-down-l", "arrow-long-down-r", "arrow-long-down", "arrow-long-left-c", "arrow-long-left-e", "arrow-long-left-l", "arrow-long-left-r", "arrow-long-left", "arrow-long-right-c", "arrow-long-right-e", "arrow-long-right-l", "arrow-long-right-r", "arrow-long-right", "arrow-long-up-c", "arrow-long-up-e", "arrow-long-up-l", "arrow-long-up-r", "arrow-long-up", "arrow-right-o", "arrow-right-r", "arrow-right", "arrow-top-left-o", "arrow-top-left-r", "arrow-top-left", "arrow-top-right-o", "arrow-top-right-r", "arrow-top-right", "arrow-up-o", "arrow-up-r", "arrow-up", "arrows-breake-h", "arrows-breake-v", "arrows-exchange-alt-v", "arrows-exchange-alt", "arrows-exchange-v", "arrows-exchange", "arrows-expand-down-left", "arrows-expand-down-right", "arrows-expand-left-alt", "arrows-expand-left", "arrows-expand-right-alt", "arrows-expand-right", "arrows-expand-up-left", "arrows-expand-up-right", "arrows-h-alt", "arrows-h", "arrows-merge-alt-h", "arrows-merge-alt-v", "arrows-scroll-h", "arrows-scroll-v", "arrows-shrink-h", "arrows-shrink-v", "arrows-v-alt", "arrows-v", "assign", "asterisk", "attachment", "attribution", "awards", "backspace", "band-aid", "battery-empty", "battery-full", "battery", "bee", "bell", "bitbucket", "block", "board", "bolt", "bookmark", "border-all", "border-bottom", "border-left", "border-right", "border-style-dashed", "border-style-dotted", "border-style-solid", "border-top", "bot", "bowl", "box", "boy", "briefcase", "browse", "browser", "brush", "bulb", "c-plus-plus", "calculator", "calendar-dates", "calendar-due", "calendar-next", "calendar-today", "calendar-two", "calendar", "calibrate", "camera", "cap", "captions", "card-clubs", "card-diamonds", "card-hearts", "card-spades", "carousel", "cast", "chart", "check-o", "check-r", "check", "chevron-double-down-o", "chevron-double-down-r", "chevron-double-down", "chevron-double-left-o", "chevron-double-left-r", "chevron-double-left", "chevron-double-right-o", "chevron-double-right-r", "chevron-double-right", "chevron-double-up-o", "chevron-double-up-r", "chevron-double-up", "chevron-down-o", "chevron-down-r", "chevron-down", "chevron-left-o", "chevron-left-r", "chevron-left", "chevron-right-o", "chevron-right-r", "chevron-right", "chevron-up-o", "chevron-up-r", "chevron-up", "clapper-board", "clipboard", "close-o", "close-r", "close", "cloud", "code-slash", "code", "coffee", "collage", "color-bucket", "color-picker", "comment", "community", "components", "compress-left", "compress-right", "compress-v", "compress", "controller", "copy", "copyright", "corner-double-down-left", "corner-double-down-right", "corner-double-left-down", "corner-double-left-up", "corner-double-right-down", "corner-double-right-up", "corner-double-up-left", "corner-double-up-right", "corner-down-left", "corner-down-right", "corner-left-down", "corner-left-up", "corner-right-down", "corner-right-up", "corner-up-left", "corner-up-right", "credit-card", "crop", "cross", "crown", "danger", "dark-mode", "data", "database", "debug", "desktop", "details-less", "details-more", "dialpad", "disc", "display-flex", "display-fullwidth", "display-grid", "display-spacing", "distribute-horizontal", "distribute-vertical", "dock-bottom", "dock-left", "dock-right", "dock-window", "dollar", "drive", "drop-invert", "drop-opacity", "drop", "duplicate", "edit-black-point", "edit-contrast", "edit-exposure", "edit-fade", "edit-flip-h", "edit-flip-v", "edit-highlight", "edit-markup", "edit-mask", "edit-noise", "edit-shadows", "edit-straight", "edit-unmask", "eject", "enter", "erase", "ereader", "ericsson", "ethernet", "euro", "expand", "export", "extension-add", "extension-alt", "extension-remove", "extension", "external", "eye-alt", "eye", "feed", "file-add", "file-document", "file-remove", "file", "film", "filters", "flag-alt", "flag", "folder-add", "folder-remove", "folder", "font-height", "font-spacing", "format-bold", "format-center", "format-color", "format-heading", "format-indent-decrease", "format-indent-increase", "format-italic", "format-justify", "format-left", "format-line-height", "format-right", "format-separator", "format-slash", "format-strike", "format-text", "format-underline", "format-uppercase", "games", "gender-female", "gender-male", "ghost-character", "gift", "girl", "git-branch", "git-commit", "git-fork", "git-pull", "glass-alt", "glass", "globe-alt", "globe", "gym", "hashtag", "headset", "heart", "home-alt", "home-screen", "home", "icecream", "image", "import", "inbox", "infinity", "info", "inpicture", "insert-after-o", "insert-after-r", "insert-after", "insert-before-o", "insert-before-r", "insert-before", "insights", "internal", "key", "keyboard", "keyhole", "laptop", "layout-grid-small", "layout-grid", "layout-list", "layout-pin", "link", "list-tree", "list", "live-photo", "loadbar-alt", "loadbar-doc", "loadbar-sound", "loadbar", "lock-unlock", "lock", "log-in", "log-off", "log-out", "loupe", "magnet", "mail-forward", "mail-open", "mail-reply", "mail", "math-divide", "math-equal", "math-minus", "math-percent", "math-plus", "maximize-alt", "maximize", "media-live", "media-podcast", "menu-boxed", "menu-cake", "menu-cheese", "menu-grid-o", "menu-grid-r", "menu-hotdog", "menu-left-alt", "menu-left", "menu-motion", "menu-oreos", "menu-right-alt", "menu-right", "menu-round", "menu", "merge-horizontal", "merge-vertical", "mic", "mini-player", "minimize-alt", "minimize", "modem", "moon", "more-alt", "more-o", "more-r", "more-vertical-alt", "more-vertical-o", "more-vertical-r", "more-vertical", "more", "mouse", "move-down", "move-left", "move-right", "move-task", "move-up", "music-note", "music-speaker", "music", "nametag", "notes", "notifications", "options", "organisation", "password", "path-back", "path-crop", "path-divide", "path-exclude", "path-front", "path-intersect", "path-outline", "path-trim", "path-unite", "pen", "pentagon-bottom-left", "pentagon-bottom-right", "pentagon-down", "pentagon-left", "pentagon-right", "pentagon-top-left", "pentagon-top-right", "pentagon-up", "performance", "phone", "photoscan", "piano", "pill", "pin-alt", "pin-bottom", "pin-top", "pin", "play-backwards", "play-button-o", "play-button-r", "play-button", "play-forwards", "play-list-add", "play-list-check", "play-list-remove", "play-list-search", "play-list", "play-pause-o", "play-pause-r", "play-pause", "play-stop-o", "play-stop-r", "play-stop", "play-track-next-o", "play-track-next-r", "play-track-next", "play-track-prev-o", "play-track-prev-r", "play-track-prev", "plug", "polaroid", "poll", "presentation", "printer", "profile", "pull-clear", "push-chevron-down-o", "push-chevron-down-r", "push-chevron-down", "push-chevron-left-o", "push-chevron-left-r", "push-chevron-left", "push-chevron-right-o", "push-chevron-right-r", "push-chevron-right", "push-chevron-up-o", "push-chevron-up-r", "push-chevron-up", "push-down", "push-left", "push-right", "push-up", "qr", "quote-o", "quote", "radio-check", "radio-checked", "ratio", "read", "readme", "record", "redo", "remote", "remove-r", "remove", "rename", "reorder", "repeat", "ring", "row-first", "row-last", "ruler", "sand-clock", "scan", "screen-mirror", "screen-shot", "screen-wide", "screen", "scroll-h", "scroll-v", "search-found", "search-loading", "search", "select-o", "select-r", "select", "server", "shape-circle", "shape-half-circle", "shape-hexagon", "shape-rhombus", "shape-square", "shape-triangle", "shape-zigzag", "share", "shield", "shopping-bag", "shopping-cart", "shortcut", "sidebar-open", "sidebar-right", "sidebar", "signal", "size", "sleep", "smart-home-boiler", "smart-home-cooker", "smart-home-heat", "smart-home-light", "smart-home-refrigerator", "smart-home-wash-machine", "smartphone-chip", "smartphone-ram", "smartphone-shake", "smartphone", "smile-mouth-open", "smile-neutral", "smile-no-mouth", "smile-none", "smile-sad", "smile-upside", "smile", "software-download", "software-upload", "sort-az", "sort-za", "space-between-v", "space-between", "spinner-alt", "spinner-two-alt", "spinner-two", "spinner", "stack", "stopwatch", "stories", "style", "sun", "support", "swap-vertical", "swap", "sweden", "swiss", "sync", "tab", "tag", "tap-double", "tap-single", "template", "tennis", "terminal", "terrain", "thermometer", "thermostat", "tikcode", "time", "timelapse", "timer", "today", "toggle-off", "toggle-on", "toggle-square-off", "toggle-square", "toolbar-bottom", "toolbar-left", "toolbar-right", "toolbar-top", "toolbox", "touchpad", "track", "transcript", "trash-empty", "trash", "tree", "trees", "trending-down", "trending", "trophy", "tv", "ui-kit", "umbrella", "unavailable", "unblock", "undo", "unsplash", "usb-c", "usb", "user-add", "user-list", "user-remove", "user", "view-cols", "view-comfortable", "view-day", "view-grid", "view-list", "view-month", "view-split", "vinyl", "voicemail-o", "voicemail-r", "voicemail", "volume", "webcam", "website", "work-alt", "yinyang", "zoom-in", "zoom-out"];
|
|
114
|
+
declare const iconNames: readonly ["add-r", "add", "airplane", "alarm", "album", "align-bottom", "align-center", "align-left", "align-middle", "align-right", "align-top", "anchor", "apple-watch", "arrange-back", "arrange-front", "arrow-align-h", "arrow-align-v", "arrow-bottom-left-o", "arrow-bottom-left-r", "arrow-bottom-left", "arrow-bottom-right-o", "arrow-bottom-right-r", "arrow-bottom-right", "arrow-down-o", "arrow-down-r", "arrow-down", "arrow-left-o", "arrow-left-r", "arrow-left", "arrow-long-down-c", "arrow-long-down-e", "arrow-long-down-l", "arrow-long-down-r", "arrow-long-down", "arrow-long-left-c", "arrow-long-left-e", "arrow-long-left-l", "arrow-long-left-r", "arrow-long-left", "arrow-long-right-c", "arrow-long-right-e", "arrow-long-right-l", "arrow-long-right-r", "arrow-long-right", "arrow-long-up-c", "arrow-long-up-e", "arrow-long-up-l", "arrow-long-up-r", "arrow-long-up", "arrow-right-o", "arrow-right-r", "arrow-right", "arrow-top-left-o", "arrow-top-left-r", "arrow-top-left", "arrow-top-right-o", "arrow-top-right-r", "arrow-top-right", "arrow-up-o", "arrow-up-r", "arrow-up", "arrows-breake-h", "arrows-breake-v", "arrows-exchange-alt-v", "arrows-exchange-alt", "arrows-exchange-v", "arrows-exchange", "arrows-expand-down-left", "arrows-expand-down-right", "arrows-expand-left-alt", "arrows-expand-left", "arrows-expand-right-alt", "arrows-expand-right", "arrows-expand-up-left", "arrows-expand-up-right", "arrows-h-alt", "arrows-h", "arrows-merge-alt-h", "arrows-merge-alt-v", "arrows-scroll-h", "arrows-scroll-v", "arrows-shrink-h", "arrows-shrink-v", "arrows-v-alt", "arrows-v", "assign", "asterisk", "attachment", "attribution", "awards", "backspace", "band-aid", "battery-empty", "battery-full", "battery", "bee", "bell", "bitbucket", "block", "board", "bolt", "bookmark", "border-all", "border-bottom", "border-left", "border-right", "border-style-dashed", "border-style-dotted", "border-style-solid", "border-top", "bot", "bowl", "box", "boy", "briefcase", "browse", "browser", "brush", "bulb", "c-plus-plus", "calculator", "calendar-dates", "calendar-due", "calendar-next", "calendar-today", "calendar-two", "calendar", "calibrate", "camera", "cap", "captions", "card-clubs", "card-diamonds", "card-hearts", "card-spades", "carousel", "cast", "chart", "check-o", "check-r", "check", "chevron-double-down-o", "chevron-double-down-r", "chevron-double-down", "chevron-double-left-o", "chevron-double-left-r", "chevron-double-left", "chevron-double-right-o", "chevron-double-right-r", "chevron-double-right", "chevron-double-up-o", "chevron-double-up-r", "chevron-double-up", "chevron-down-o", "chevron-down-r", "chevron-down", "chevron-left-o", "chevron-left-r", "chevron-left", "chevron-right-o", "chevron-right-r", "chevron-right", "chevron-up-o", "chevron-up-r", "chevron-up", "clapper-board", "clipboard", "close-o", "close-r", "close", "cloud", "code-slash", "code", "coffee", "collage", "color-bucket", "color-picker", "comment", "community", "components", "compress-left", "compress-right", "compress-v", "compress", "controller", "copy", "copyright", "corner-double-down-left", "corner-double-down-right", "corner-double-left-down", "corner-double-left-up", "corner-double-right-down", "corner-double-right-up", "corner-double-up-left", "corner-double-up-right", "corner-down-left", "corner-down-right", "corner-left-down", "corner-left-up", "corner-right-down", "corner-right-up", "corner-up-left", "corner-up-right", "credit-card", "crop", "cross", "crown", "danger", "dark-mode", "data", "database", "debug", "desktop", "details-less", "details-more", "dialpad", "dice-1", "dice-2", "dice-3", "dice-4", "dice-5", "dice-6", "disc", "display-flex", "display-fullwidth", "display-grid", "display-spacing", "distribute-horizontal", "distribute-vertical", "dock-bottom", "dock-left", "dock-right", "dock-window", "dollar", "drive", "drop-invert", "drop-opacity", "drop", "duplicate", "edit-black-point", "edit-contrast", "edit-exposure", "edit-fade", "edit-flip-h", "edit-flip-v", "edit-highlight", "edit-markup", "edit-mask", "edit-noise", "edit-shadows", "edit-straight", "edit-unmask", "eject", "enter", "erase", "ereader", "ericsson", "ethernet", "euro", "expand", "export", "extension-add", "extension-alt", "extension-remove", "extension", "external", "eye-alt", "eye", "feed", "file-add", "file-document", "file-remove", "file", "film", "filters", "flag-alt", "flag", "folder-add", "folder-remove", "folder", "font-height", "font-spacing", "format-bold", "format-center", "format-color", "format-heading", "format-indent-decrease", "format-indent-increase", "format-italic", "format-justify", "format-left", "format-line-height", "format-right", "format-separator", "format-slash", "format-strike", "format-text", "format-underline", "format-uppercase", "games", "gender-female", "gender-male", "ghost-character", "gift", "girl", "git-branch", "git-commit", "git-fork", "git-pull", "glass-alt", "glass", "globe-alt", "globe", "gym", "hashtag", "headset", "heart", "home-alt", "home-screen", "home", "icecream", "image", "import", "inbox", "infinity", "info", "inpicture", "insert-after-o", "insert-after-r", "insert-after", "insert-before-o", "insert-before-r", "insert-before", "insights", "internal", "key", "keyboard", "keyhole", "laptop", "layout-grid-small", "layout-grid", "layout-list", "layout-pin", "link", "list-tree", "list", "live-photo", "loadbar-alt", "loadbar-doc", "loadbar-sound", "loadbar", "lock-unlock", "lock", "log-in", "log-off", "log-out", "loupe", "magnet", "mail-forward", "mail-open", "mail-reply", "mail", "math-divide", "math-equal", "math-minus", "math-percent", "math-plus", "maximize-alt", "maximize", "media-live", "media-podcast", "menu-boxed", "menu-cake", "menu-cheese", "menu-grid-o", "menu-grid-r", "menu-hotdog", "menu-left-alt", "menu-left", "menu-motion", "menu-oreos", "menu-right-alt", "menu-right", "menu-round", "menu", "merge-horizontal", "merge-vertical", "mic", "mini-player", "minimize-alt", "minimize", "modem", "moon", "more-alt", "more-o", "more-r", "more-vertical-alt", "more-vertical-o", "more-vertical-r", "more-vertical", "more", "mouse", "move-down", "move-left", "move-right", "move-task", "move-up", "music-note", "music-speaker", "music", "nametag", "notes", "notifications", "options", "organisation", "password", "path-back", "path-crop", "path-divide", "path-exclude", "path-front", "path-intersect", "path-outline", "path-trim", "path-unite", "pen", "pentagon-bottom-left", "pentagon-bottom-right", "pentagon-down", "pentagon-left", "pentagon-right", "pentagon-top-left", "pentagon-top-right", "pentagon-up", "performance", "phone", "photoscan", "piano", "pill", "pin-alt", "pin-bottom", "pin-top", "pin", "play-backwards", "play-button-o", "play-button-r", "play-button", "play-forwards", "play-list-add", "play-list-check", "play-list-remove", "play-list-search", "play-list", "play-pause-o", "play-pause-r", "play-pause", "play-stop-o", "play-stop-r", "play-stop", "play-track-next-o", "play-track-next-r", "play-track-next", "play-track-prev-o", "play-track-prev-r", "play-track-prev", "plug", "polaroid", "poll", "presentation", "printer", "profile", "pull-clear", "push-chevron-down-o", "push-chevron-down-r", "push-chevron-down", "push-chevron-left-o", "push-chevron-left-r", "push-chevron-left", "push-chevron-right-o", "push-chevron-right-r", "push-chevron-right", "push-chevron-up-o", "push-chevron-up-r", "push-chevron-up", "push-down", "push-left", "push-right", "push-up", "qr", "quote-o", "quote", "radio-check", "radio-checked", "ratio", "read", "readme", "record", "redo", "remote", "remove-r", "remove", "rename", "reorder", "repeat", "ring", "row-first", "row-last", "ruler", "sand-clock", "scan", "screen-mirror", "screen-shot", "screen-wide", "screen", "scroll-h", "scroll-v", "search-found", "search-loading", "search", "select-o", "select-r", "select", "server", "shape-circle", "shape-half-circle", "shape-hexagon", "shape-rhombus", "shape-square", "shape-triangle", "shape-zigzag", "share", "shield", "shopping-bag", "shopping-cart", "shortcut", "sidebar-open", "sidebar-right", "sidebar", "signal", "size", "sleep", "smart-home-boiler", "smart-home-cooker", "smart-home-heat", "smart-home-light", "smart-home-refrigerator", "smart-home-wash-machine", "smartphone-chip", "smartphone-ram", "smartphone-shake", "smartphone", "smile-mouth-open", "smile-neutral", "smile-no-mouth", "smile-none", "smile-sad", "smile-upside", "smile", "software-download", "software-upload", "sort-az", "sort-za", "space-between-v", "space-between", "spinner-alt", "spinner-two-alt", "spinner-two", "spinner", "stack", "stopwatch", "stories", "style", "sun", "support", "swap-vertical", "swap", "sweden", "swiss", "sync", "tab", "tag", "tap-double", "tap-single", "template", "tennis", "terminal", "terrain", "thermometer", "thermostat", "tikcode", "time", "timelapse", "timer", "today", "toggle-off", "toggle-on", "toggle-square-off", "toggle-square", "toolbar-bottom", "toolbar-left", "toolbar-right", "toolbar-top", "toolbox", "touchpad", "track", "transcript", "trash-empty", "trash", "tree", "trees", "trending-down", "trending", "trophy", "tv", "ui-kit", "umbrella", "unavailable", "unblock", "undo", "unsplash", "usb-c", "usb", "user-add", "user-list", "user-remove", "user", "view-cols", "view-comfortable", "view-day", "view-grid", "view-list", "view-month", "view-split", "vinyl", "voicemail-o", "voicemail-r", "voicemail", "volume", "webcam", "website", "work-alt", "yinyang", "zoom-in", "zoom-out"];
|
|
115
|
+
/** A list of available icon names that can be used with the Uniform brand */
|
|
74
116
|
declare type IconName = typeof iconNames[number];
|
|
75
117
|
|
|
76
|
-
|
|
118
|
+
/** sets fill color of the svg icon */
|
|
119
|
+
declare type IconColor = 'green' | 'red' | 'gray' | 'currentColor';
|
|
120
|
+
/** sets the type of icon to use from the available list */
|
|
121
|
+
declare type IconType = IconName | IconType$1;
|
|
77
122
|
interface IconProps extends IconBaseProps {
|
|
78
|
-
icon
|
|
79
|
-
|
|
123
|
+
/** sets the icon to be used */
|
|
124
|
+
icon: IconType;
|
|
125
|
+
/** sets the icon color to be used */
|
|
126
|
+
iconColor?: IconColor;
|
|
127
|
+
/** sets additional icon props provided by "react-icons" */
|
|
128
|
+
otherProps?: IconBaseProps;
|
|
80
129
|
}
|
|
81
130
|
/**
|
|
82
131
|
* Component that renders icons
|
|
83
|
-
*
|
|
84
|
-
* @component
|
|
85
|
-
* @param {IconName | IconType} icon - sets the type of icon to use from the available list
|
|
86
|
-
* @param {'green' | 'red' | 'gray' | 'currentColor'} iconColorClass - sets fill color of the svg icon
|
|
87
|
-
* @param {IconBaseProps} otherProps - sets additional icon props provided by "react-icons"
|
|
88
|
-
* @example <Icon icon="add-r" iconColorClass="currentColor" />
|
|
132
|
+
* @example <Icon icon="add-r" iconColor="currentColor" />
|
|
89
133
|
*/
|
|
90
|
-
declare const Icon: React__default.
|
|
134
|
+
declare const Icon: React__default.MemoExoticComponent<({ icon, iconColor, size, ...otherProps }: IconProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element | null>;
|
|
91
135
|
|
|
92
|
-
declare type IconsMap = Record<string, IconType>;
|
|
136
|
+
declare type IconsMap = Record<string, IconType$1>;
|
|
93
137
|
declare function useIconContext(): {
|
|
94
138
|
iconsMap: IconsMap;
|
|
95
139
|
isLoading: boolean;
|
|
96
140
|
};
|
|
97
141
|
/**
|
|
98
142
|
* Provider to the Icon component
|
|
99
|
-
*
|
|
100
143
|
* @example <IconsProvider><Icon icon="add-r" /></IconsProvider>
|
|
101
144
|
*/
|
|
102
145
|
declare function IconsProvider({ children }: {
|
|
103
146
|
children: ReactNode;
|
|
104
147
|
}): _emotion_react_types_jsx_namespace.EmotionJSX.Element;
|
|
105
148
|
|
|
149
|
+
declare type CaptionProps = {
|
|
150
|
+
/** allows users to add child elements */
|
|
151
|
+
children: React$1.ReactNode;
|
|
152
|
+
};
|
|
106
153
|
/**
|
|
107
154
|
* Component that provides caption text to input fields
|
|
108
|
-
*
|
|
109
|
-
* @component
|
|
110
|
-
* @param {React.ReactNode} children - allows users to add child elements
|
|
111
155
|
* @example <Caption>some help text here</Caption>
|
|
112
156
|
*/
|
|
113
|
-
declare const Caption:
|
|
157
|
+
declare const Caption: ({ children }: CaptionProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
|
|
114
158
|
|
|
115
159
|
declare type ErrorMessageProps = {
|
|
160
|
+
/** sets the error message value */
|
|
116
161
|
message?: string;
|
|
117
162
|
};
|
|
118
163
|
/**
|
|
119
164
|
* Component that provides error messaging to input fields
|
|
120
|
-
*
|
|
121
|
-
* @component
|
|
122
|
-
* @param {string} message - sets the error message value
|
|
123
165
|
* @example <ErrorMessage>something went wrong, please try again</ErrorMessage>
|
|
124
166
|
*/
|
|
125
167
|
declare const ErrorMessage: ({ message }: ErrorMessageProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element | null;
|
|
126
168
|
|
|
127
169
|
declare type InputProps = React$1.InputHTMLAttributes<HTMLInputElement> & {
|
|
170
|
+
/** (optional) sets the label value */
|
|
128
171
|
label?: string;
|
|
172
|
+
/** (optional) sets caption text value */
|
|
129
173
|
caption?: string;
|
|
174
|
+
/** (optional) add an input icon to the input field */
|
|
130
175
|
icon?: React$1.ReactElement;
|
|
176
|
+
/** (optional) sets whether to show the label or hide it and add a aria-label attributes to the input field directly */
|
|
131
177
|
showLabel?: boolean;
|
|
178
|
+
/** (optional) sets and shows the the error message value */
|
|
132
179
|
errorMessage?: string;
|
|
133
180
|
capture?: boolean | 'user' | 'environment';
|
|
134
|
-
/**
|
|
181
|
+
/**
|
|
182
|
+
* (optional) sets an overriding classname on the container element
|
|
183
|
+
* @deprecated */
|
|
135
184
|
classNameContainer?: string | SerializedStyles;
|
|
136
|
-
/**
|
|
185
|
+
/**
|
|
186
|
+
* (optional) sets an overriding classname on the input element
|
|
187
|
+
* @deprecated */
|
|
137
188
|
classNameControl?: string | SerializedStyles;
|
|
138
|
-
/**
|
|
189
|
+
/**
|
|
190
|
+
* (optional) sets an overriding classname on the label element
|
|
191
|
+
* @deprecated */
|
|
139
192
|
classNameLabel?: string | SerializedStyles;
|
|
140
193
|
};
|
|
141
194
|
/**
|
|
142
195
|
* Input Component
|
|
143
|
-
*
|
|
144
|
-
* @component
|
|
145
|
-
* @param {string} label - sets the label value
|
|
146
|
-
* @param {string} caption - sets help text value
|
|
147
|
-
* @param {boolean} showLabel - sets whether to hide the label and use aria-label on the input itself
|
|
148
|
-
* @param {React.ReactElement} icon - add an input icon to the input field
|
|
149
|
-
* @param {string} errorMessage - sets shows the the error message value
|
|
150
196
|
* @example - <Input label="my label" id="some-id" name="some-name" caption="some help text" errorMessage={hasError ? 'something went wrong' : undefined} />
|
|
151
197
|
*/
|
|
152
198
|
declare const Input: ({ label, icon, id, caption, showLabel, errorMessage, classNameContainer, classNameControl, classNameLabel, ...props }: InputProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
|
|
153
199
|
|
|
154
200
|
declare type InputComboBoxOption = {
|
|
201
|
+
/** sets the label value */
|
|
155
202
|
label: string;
|
|
203
|
+
/** sets the input value */
|
|
156
204
|
value: string;
|
|
205
|
+
/** (optional) sets the disabled value on the input */
|
|
157
206
|
isDisabled?: boolean;
|
|
158
207
|
};
|
|
159
208
|
declare type InputComboBoxProps<TOption, IsMulti extends boolean, TGroup extends GroupBase<TOption> = GroupBase<TOption>> = StateManagerProps<TOption, IsMulti, TGroup> & React$1.RefAttributes<InternalSelect<TOption, IsMulti, TGroup>>;
|
|
@@ -164,140 +213,151 @@ declare type ComboBoxGroupBase<TOption> = GroupBase<TOption>;
|
|
|
164
213
|
* @example <InputComboBox name="name" id="combo-box" options=[{ value: 'chocolate', label: 'Chocolate' }, { value: 'strawberry', label: 'Strawberry' }, { value: 'vanilla', label: 'Vanilla' }] /> */
|
|
165
214
|
declare function InputComboBox<TOption = InputComboBoxOption, IsMulti extends boolean = false, TGroup extends ComboBoxGroupBase<TOption> = ComboBoxGroupBase<TOption>>(props: InputComboBoxProps<TOption, IsMulti, TGroup>): _emotion_react_types_jsx_namespace.EmotionJSX.Element;
|
|
166
215
|
|
|
167
|
-
declare type
|
|
216
|
+
declare type InputInlineSelectOption = {
|
|
217
|
+
/** sets the display name of the option */
|
|
168
218
|
label: string;
|
|
219
|
+
/** sets the option value attribute */
|
|
169
220
|
value: string;
|
|
170
221
|
};
|
|
171
|
-
declare type
|
|
222
|
+
declare type InputInlineSelectProps = Omit<React$1.HTMLAttributes<HTMLButtonElement>, 'onChange'> & {
|
|
223
|
+
/** sets the selected value */
|
|
172
224
|
value: string;
|
|
173
|
-
options
|
|
174
|
-
|
|
225
|
+
/** sets the available options within the dropdown */
|
|
226
|
+
options: Array<InputInlineSelectOption>;
|
|
227
|
+
/** function that takes an option argument and sets the new value */
|
|
228
|
+
onChange: (option: InputInlineSelectOption) => void;
|
|
229
|
+
/** sets the disabled state of the button */
|
|
175
230
|
disabled?: boolean;
|
|
231
|
+
/** override existing styles by passing new emotion styles or a string of css props */
|
|
176
232
|
classNameContainer?: SerializedStyles | string;
|
|
177
233
|
};
|
|
178
234
|
/**
|
|
179
235
|
* Input Inline Select
|
|
180
|
-
* @
|
|
181
|
-
* @param {string} value - sets the selected value
|
|
182
|
-
* @param {Array<InlineSelectInputOption>} options - sets the available options within the dropdown
|
|
183
|
-
* @param {(option: InlineSelectInputOption) => void} onChange - function that takes an option argument and sets the new value
|
|
184
|
-
* @param {boolean} disabled - sets the disabled state of the button
|
|
185
|
-
* @param {SerializedStyles | string} classNameContainer - override existing styles by passing new emotion styles or a string of css props
|
|
186
|
-
* @example <InlineSelectInput disabled={index > 1} value={currentValue ?? '&'} options={[{ label: 'AND', value: '&' }, { label: 'OR', value: '|' }]} onChange={(s) => {setState(s.value)}} />
|
|
236
|
+
* @example <InputInlineSelect disabled={index > 1} value={currentValue ?? '&'} options={[{ label: 'AND', value: '&' }, { label: 'OR', value: '|' }]} onChange={(s) => {setState(s.value)}} />
|
|
187
237
|
*/
|
|
188
|
-
declare const InputInlineSelect: ({ classNameContainer, options, value, onChange, disabled, ...props }:
|
|
238
|
+
declare const InputInlineSelect: ({ classNameContainer, options, value, onChange, disabled, ...props }: InputInlineSelectProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
|
|
189
239
|
|
|
190
240
|
interface InputKeywordSearchProps {
|
|
241
|
+
/** function that takes a string value */
|
|
191
242
|
onSearchTextChanged: (searchText: string) => void;
|
|
243
|
+
/** (optional) sets the input field disabled state
|
|
244
|
+
* @default false
|
|
245
|
+
*/
|
|
192
246
|
disabled?: boolean;
|
|
247
|
+
/** (optional) props that allows users to set the placeholder text value
|
|
248
|
+
* @default "Keyword search"
|
|
249
|
+
*/
|
|
193
250
|
placeholder?: string;
|
|
251
|
+
/** (optional) allows users to set the "name" attribute value
|
|
252
|
+
* @default "keywordSearch"
|
|
253
|
+
*/
|
|
194
254
|
inputFieldName?: string;
|
|
255
|
+
/** (optional) allows users to prevent default form field submission
|
|
256
|
+
* @default false
|
|
257
|
+
*/
|
|
195
258
|
disabledFieldSubmission?: boolean;
|
|
259
|
+
/** (optional) prop that sets the value of the input field */
|
|
196
260
|
value?: string;
|
|
197
261
|
}
|
|
198
262
|
/**
|
|
199
263
|
* Component used for keyword search functionality
|
|
200
|
-
* @component
|
|
201
|
-
* @param {function} onSearchTextChanged - function that takes a string value
|
|
202
|
-
* @param {boolean} disabled - sets the input field disabled state
|
|
203
|
-
* @param {string} placeholder - optional props that allows users to set the placeholder text value
|
|
204
|
-
* @param {boolean} disabledFieldSubmission - allows users to prevent default form field submission
|
|
205
|
-
* @param {string} value - optional prop that sets the value of the input field
|
|
206
264
|
* @example <InlineSelectInput disabled={index > 1} value={currentValue ?? '&'} options={[{ label: 'AND', value: '&' }, { label: 'OR', value: '|' }]} onChange={(s) => {setState(s.value)}} />
|
|
207
265
|
*/
|
|
208
266
|
declare const InputKeywordSearch: ({ onSearchTextChanged, disabled, placeholder, inputFieldName, disabledFieldSubmission, value, }: InputKeywordSearchProps) => React$1.ReactElement;
|
|
209
267
|
|
|
210
268
|
declare type InputSelectProps = React.SelectHTMLAttributes<HTMLSelectElement> & {
|
|
269
|
+
/** (optional) sets the first item in the options list with empty value */
|
|
211
270
|
defaultOption?: string;
|
|
271
|
+
/** sets an array of select options with value and text value */
|
|
212
272
|
options: Array<React.OptionHTMLAttributes<HTMLOptionElement> & {
|
|
213
273
|
label: string;
|
|
214
274
|
}>;
|
|
275
|
+
/** (optional) sets caption text value */
|
|
215
276
|
caption?: string;
|
|
277
|
+
/** sets the label value */
|
|
216
278
|
label: string;
|
|
279
|
+
/** (optional) sets whether to hide the label and use aria-label on the input field
|
|
280
|
+
* @default false
|
|
281
|
+
*/
|
|
217
282
|
showLabel?: boolean;
|
|
283
|
+
/** (optional) sets and shows the the error message value */
|
|
218
284
|
errorMessage?: string;
|
|
219
|
-
/**
|
|
285
|
+
/** (optional) allows react components to be added inline with the label element */
|
|
220
286
|
labelCta?: JSX.Element;
|
|
221
|
-
/**
|
|
287
|
+
/**
|
|
288
|
+
* (optional) sets an overriding classname on the container element
|
|
289
|
+
* @deprecated */
|
|
222
290
|
classNameContainer?: string;
|
|
223
|
-
/**
|
|
291
|
+
/**
|
|
292
|
+
* (optional) sets an overriding classname on the input element
|
|
293
|
+
* @deprecated */
|
|
224
294
|
classNameControl?: string;
|
|
225
|
-
/**
|
|
295
|
+
/**
|
|
296
|
+
* (optional) sets an overriding classname on the label element
|
|
297
|
+
* @deprecated */
|
|
226
298
|
classNameLabel?: string;
|
|
227
299
|
};
|
|
228
300
|
/**
|
|
229
301
|
* Input Select Component
|
|
230
|
-
* @component
|
|
231
|
-
* @param {string} label - sets the label value
|
|
232
|
-
* @param {boolean} showLabel - sets whether to hide the label and use aria-label on the input itself
|
|
233
|
-
* @param {string} defaultOption - sets the first item in the options list with empty value
|
|
234
|
-
* @param {Array<React.OptionHTMLAttributes<HTMLOptionElement> & { label: string }>} options - sets an array of select options with value and text value
|
|
235
|
-
* @param {string} caption - sets help text value
|
|
236
|
-
* @param {string} errorMessage - sets and shows the the error message value
|
|
237
302
|
* @example <InputSelect label="my label" options={[{label: "option 1"}, {label: "option 2"}]} />
|
|
238
303
|
*/
|
|
239
304
|
declare const InputSelect: ({ label, defaultOption, options, caption, errorMessage, showLabel, labelCta, classNameContainer, classNameControl, classNameLabel, ...props }: InputSelectProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
|
|
240
305
|
|
|
241
306
|
declare type InputToggleProps = React$1.HTMLAttributes<HTMLInputElement> & {
|
|
307
|
+
/** sets the label value */
|
|
242
308
|
label: string;
|
|
309
|
+
/** sets the type of input to use, either radio or checkbox */
|
|
243
310
|
type: 'radio' | 'checkbox';
|
|
311
|
+
/** sets the name value of the radio/checkbox input */
|
|
244
312
|
name: string;
|
|
313
|
+
/** (optional) sets the disabled state */
|
|
245
314
|
disabled?: boolean;
|
|
315
|
+
/** (optional) sets the checked state of the input */
|
|
246
316
|
checked?: boolean;
|
|
317
|
+
/** (optional) sets caption text value */
|
|
247
318
|
caption?: string;
|
|
319
|
+
/** (optional) sets shows the the error message value */
|
|
248
320
|
errorMessage?: string;
|
|
249
321
|
};
|
|
250
322
|
/**
|
|
251
323
|
* Component that creates a checkbox or radio input field
|
|
252
|
-
*
|
|
253
|
-
* @component
|
|
254
|
-
* @param {string} label - sets the label value
|
|
255
|
-
* @param {'radio' | 'checkbox'} type - sets the type of input to use, either radio or checkbox
|
|
256
|
-
* @param {string} name - sets the name value of the radio/checkbox input
|
|
257
|
-
* @param {disabled} disabled - (optional) sets the disabled state
|
|
258
|
-
* @param {boolean} checked - (optional) sets the checked state of the input
|
|
259
|
-
* @param {string} caption - (optional) sets help text value
|
|
260
|
-
* @param {string} errorMessage - (optional) sets shows the the error message value
|
|
261
324
|
* @example <InputToggle label="Do you like ice cream?" type="checkbox" name="ice-cream" />
|
|
262
325
|
*/
|
|
263
326
|
declare const InputToggle: ({ label, type, disabled, checked, name, caption, errorMessage, ...props }: InputToggleProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
|
|
264
327
|
|
|
265
328
|
declare type TextareaProps = React$1.TextareaHTMLAttributes<HTMLTextAreaElement> & {
|
|
329
|
+
/** (optional) sets the label value */
|
|
266
330
|
label?: string;
|
|
331
|
+
/** (optional) sets caption text value */
|
|
267
332
|
caption?: string;
|
|
333
|
+
/** (optional) add an input icon to the input field */
|
|
268
334
|
icon?: React$1.ReactElement;
|
|
335
|
+
/** (optional) sets whether to hide the label and use aria-label on the input field */
|
|
269
336
|
showLabel?: boolean;
|
|
337
|
+
/** (optional) sets shows the the error message value */
|
|
270
338
|
errorMessage?: string;
|
|
271
339
|
capture?: boolean | 'user' | 'environment';
|
|
272
340
|
};
|
|
273
341
|
/**
|
|
274
|
-
*
|
|
275
|
-
*
|
|
276
|
-
* @component
|
|
277
|
-
* @param {string} label - sets the label value
|
|
278
|
-
* @param {string} caption - sets help text value
|
|
279
|
-
* @param {boolean} showLabel - sets whether to hide the label and use aria-label on the input itself
|
|
280
|
-
* @param {React.ReactElement} icon - add an input icon to the input field
|
|
281
|
-
* @param {string} errorMessage - sets shows the the error message value
|
|
282
|
-
* @example - <Input label="my label" id="some-id" name="some-name" caption="some help text" errorMessage={hasError ? 'something went wrong' : undefined} />
|
|
342
|
+
* Textarea Component
|
|
343
|
+
* @example - <Textarea label="my label" id="some-id" name="some-name" caption="some help text" errorMessage={hasError ? 'something went wrong' : undefined} />
|
|
283
344
|
*/
|
|
284
345
|
declare const Textarea: ({ label, icon, id, caption, showLabel, errorMessage, ...props }: TextareaProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
|
|
285
346
|
|
|
286
347
|
interface MenuProps extends MenuHTMLProps {
|
|
287
|
-
|
|
348
|
+
/** sets aria-label attribute */
|
|
288
349
|
menuLabel: string;
|
|
350
|
+
/** the component that triggers the menu functionality */
|
|
351
|
+
menuTrigger: React$1.ReactElement & React$1.RefAttributes<any>;
|
|
352
|
+
/** (optional) reakit placements options for the expandable menu */
|
|
289
353
|
placement?: MenuProps$1['placement'];
|
|
354
|
+
/** (optional) allows users to add child elements */
|
|
355
|
+
children?: React$1.ReactNode;
|
|
290
356
|
}
|
|
291
357
|
declare const MenuContext: React$1.Context<MenuStateReturn>;
|
|
292
358
|
declare const useMenuContext: () => MenuStateReturn;
|
|
293
359
|
/**
|
|
294
360
|
* Component used for creating clickable menus
|
|
295
|
-
*
|
|
296
|
-
* @component
|
|
297
|
-
* @param {string} menuLabel - sets aria-label attribute
|
|
298
|
-
* @param {React.ReactElement & React.RefAttributes<any>} menuTrigger - the component that triggers the menu functionality
|
|
299
|
-
* @param {BaseMenuProps['placement']} placement - (optional) reakit placements options for the expandable menu
|
|
300
|
-
* @param {React.ReactNode} children - allows users to add child elements
|
|
301
361
|
* @example
|
|
302
362
|
* <Menu
|
|
303
363
|
* menuTrigger={<button type="button">Click me</button>}
|
|
@@ -305,138 +365,160 @@ declare const useMenuContext: () => MenuStateReturn;
|
|
|
305
365
|
* menuLabel="Linked environment management options">
|
|
306
366
|
* </Menu>
|
|
307
367
|
*/
|
|
308
|
-
declare const Menu:
|
|
368
|
+
declare const Menu: ({ menuLabel, menuTrigger, placement, children }: MenuProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
|
|
309
369
|
|
|
310
370
|
declare type MenuItemProps = MenuItemHTMLProps & {
|
|
311
|
-
|
|
371
|
+
/** sets child elements within the component */
|
|
312
372
|
children: ChildFunction | React$1.ReactNode;
|
|
373
|
+
/** (optional) set whether to hide the menu after a click action */
|
|
313
374
|
hideMenuOnClick?: boolean;
|
|
375
|
+
/** (optional) set an icon along side the item text */
|
|
314
376
|
icon?: React$1.ReactElement;
|
|
377
|
+
/** When an element is disabled, it may still be focusable. It works similarly to readOnly on form elements. In this case, only aria-disabled will be set. */
|
|
378
|
+
focusable?: boolean;
|
|
315
379
|
};
|
|
316
380
|
declare type ChildFunction = (menuItemProps: MenuItemHTMLProps) => React$1.ReactElement | null;
|
|
317
381
|
/**
|
|
318
382
|
* MenuItem Component used along side <Menu /> component
|
|
319
|
-
*
|
|
320
|
-
* @component
|
|
321
|
-
* @param {ChildFunction | React.ReactNode} children - sets child elements within the component
|
|
322
|
-
* @param {boolean} hideMenuOnClick - (optional) set whether to hide the menu after a click action
|
|
323
|
-
* @param {React.ReactElement} icon - (optional) set an icon along side the item text
|
|
324
383
|
* @example <MenuItem onClick={() => alert('menu item was clicked')} icon={<RedClose />}>Remove Link</MenuItem>
|
|
325
384
|
*/
|
|
326
385
|
declare const MenuItem: React$1.FC<MenuItemProps>;
|
|
327
386
|
|
|
387
|
+
/** Callout button types available to use with our brand */
|
|
328
388
|
declare type CalloutType = 'caution' | 'danger' | 'info' | 'note' | 'success' | 'tip' | 'error';
|
|
329
389
|
interface CalloutProps {
|
|
390
|
+
/** sets the type of callout to use and it's styles
|
|
391
|
+
* @default "info"
|
|
392
|
+
*/
|
|
330
393
|
type: CalloutType;
|
|
394
|
+
/** (optional) sets the title of the callout */
|
|
331
395
|
title?: React$1.ReactNode;
|
|
396
|
+
/** add child elements to the callout */
|
|
332
397
|
children: React$1.ReactNode;
|
|
398
|
+
/** sets additional css classes or emotion styles on the callout */
|
|
333
399
|
className?: SerializedStyles | string;
|
|
334
400
|
}
|
|
335
401
|
/**
|
|
336
|
-
*
|
|
337
|
-
*
|
|
338
|
-
* @component
|
|
339
|
-
* @param {CalloutType} type - sets the type of callout to be used
|
|
340
|
-
* @param {React.ReactNode} title - sets the title of the callout
|
|
341
|
-
* @param {React.ReactNode} children - adds child components to the callout body
|
|
342
|
-
* @param {SerializedStyles | string} className - sets a string value className or a emotion css style property for custom overrides
|
|
402
|
+
* Uniform Callout Component
|
|
343
403
|
* @example <Callout title="my title" type="caution"><p>callout body copy</p></Callout>
|
|
344
404
|
*/
|
|
345
|
-
declare const Callout:
|
|
405
|
+
declare const Callout: ({ type, title, children, className }: CalloutProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element | null;
|
|
346
406
|
|
|
347
407
|
/**
|
|
348
408
|
* Loading Indicator
|
|
349
|
-
* @component
|
|
350
409
|
* @example <LoadingIndicator />
|
|
351
410
|
*/
|
|
352
411
|
declare const LoadingIndicator: () => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
|
|
353
412
|
|
|
354
413
|
interface LoadingOverlayProps {
|
|
414
|
+
/** sets whether to display the loading overlay components */
|
|
355
415
|
isActive: boolean;
|
|
416
|
+
/** (optional) type that sets a text value or React component under the loading icon */
|
|
356
417
|
statusMessage?: string | JSX.Element;
|
|
357
418
|
}
|
|
358
419
|
/**
|
|
359
420
|
* Loading Overlay
|
|
360
|
-
* @component
|
|
361
|
-
* @param {boolean} isActive - sets whether to display the loading overlay components
|
|
362
|
-
* @param {string | JSX.Element} statusMessage - optional type that sets a text value or React component under the loading icon
|
|
363
421
|
* @example <LoadingOverlay isActive={true} statusMessage="Loading..." />
|
|
364
422
|
*/
|
|
365
|
-
declare const LoadingOverlay:
|
|
423
|
+
declare const LoadingOverlay: ({ isActive, statusMessage }: LoadingOverlayProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
|
|
366
424
|
interface LoadingIconProps {
|
|
425
|
+
/** (optional) prop that sets a number value for the height of the icon */
|
|
367
426
|
width?: number;
|
|
427
|
+
/** (optional) prop that sets a number value for the width of the icon */
|
|
368
428
|
height?: number;
|
|
369
429
|
}
|
|
370
430
|
/**
|
|
371
431
|
* Loading Icon
|
|
372
|
-
* @component
|
|
373
|
-
* @param {number} height - option prop that sets a number value for the height of the icon
|
|
374
|
-
* @param {number} width - option prop that sets a number value for the width of the icon
|
|
375
432
|
* @example <LoadingIcon height={128} width={128} />
|
|
376
433
|
*/
|
|
377
|
-
declare const LoadingIcon:
|
|
434
|
+
declare const LoadingIcon: ({ height, width }: LoadingIconProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
|
|
378
435
|
|
|
436
|
+
/** Available heading weights e.g. 1 - 6 */
|
|
379
437
|
declare type LevelProps = 1 | 2 | 3 | 4 | 5 | 6;
|
|
380
438
|
declare type HeadingProps = {
|
|
439
|
+
/** sets the type of heading tag between h1 to h6, defaults to <h2>
|
|
440
|
+
* @default 2
|
|
441
|
+
*/
|
|
381
442
|
level?: LevelProps;
|
|
443
|
+
/** sets the title value */
|
|
444
|
+
children: React$1.ReactNode;
|
|
382
445
|
};
|
|
383
446
|
/**
|
|
384
447
|
* Component that sets the heading tag
|
|
385
|
-
* @component
|
|
386
|
-
* @param {number} level - sets the type of heading tag between h1 to h6, defaults to <h2>
|
|
387
|
-
* @param {children} children - adds child elements to the heading tag
|
|
388
448
|
* @example <Heading level={1}>Blog Post Title</Heading>
|
|
389
449
|
*/
|
|
390
|
-
declare const Heading:
|
|
450
|
+
declare const Heading: ({ level, children }: HeadingProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
|
|
391
451
|
|
|
392
452
|
declare type ParagraphProps = {
|
|
453
|
+
/** adds child elements to the paragraph tag */
|
|
393
454
|
children: React$1.ReactNode;
|
|
455
|
+
/** (optional) allows user to set overriding class names or emotion styles */
|
|
394
456
|
className?: SerializedStyles | string;
|
|
395
457
|
};
|
|
396
458
|
/**
|
|
397
459
|
* Component for generic paragraph tags
|
|
398
|
-
* @component
|
|
399
|
-
* @param {number} className - allows user to set overriding class names or emotion styles
|
|
400
|
-
* @param {children} children - adds child elements to the paragraph tag
|
|
401
460
|
* @example <Paragraph>This is the text that was be inside the paragraph tag.</Paragraph>
|
|
402
461
|
*/
|
|
403
462
|
declare const Paragraph: ({ className, children }: ParagraphProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
|
|
404
463
|
|
|
405
464
|
declare type ScrollableListProps = {
|
|
465
|
+
/** (optional) sets the label value */
|
|
406
466
|
label?: string;
|
|
467
|
+
/** (optional) allows users to add child components within the container */
|
|
407
468
|
children?: React$1.ReactNode;
|
|
408
469
|
};
|
|
409
470
|
/**
|
|
410
471
|
* Component that sets the base structure for scrollable content in a max height container
|
|
411
|
-
* @componet
|
|
412
|
-
* @param {string} label - sets the label value
|
|
413
|
-
* @param {React.ReactNode} children - allows users to add child components within the container
|
|
414
472
|
* @example <ScrollableList label="allowed content types"><button>say hello</button></ScrollableList>
|
|
415
473
|
*/
|
|
416
474
|
declare const ScrollableList: ({ label, children }: ScrollableListProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
|
|
417
475
|
|
|
418
476
|
declare type ScrollableListItemProps = React$1.HTMLAttributes<HTMLButtonElement> & {
|
|
477
|
+
/** sets the button text value */
|
|
419
478
|
buttonText: string;
|
|
479
|
+
/** sets the active style of the button */
|
|
420
480
|
active: boolean;
|
|
421
481
|
};
|
|
422
482
|
/**
|
|
423
483
|
* Component used within <ScrollableList /> for adding interactive button components with predefined styles
|
|
424
|
-
* @componet
|
|
425
|
-
* @param {string} buttonText - sets the button text value
|
|
426
|
-
* @param {boolean} active - sets the active style of the button
|
|
427
484
|
* @example <ScrollableListItem buttontext="my button" active={false} />
|
|
428
485
|
*/
|
|
429
486
|
declare const ScrollableListItem: ({ buttonText, active, ...props }: ScrollableListItemProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
|
|
430
487
|
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
488
|
+
interface ActionButtonsProps {
|
|
489
|
+
/** Takes a function for the visible button */
|
|
490
|
+
onButtonClick: () => void;
|
|
491
|
+
/** (optional) reakit placements options for the expandable menu */
|
|
492
|
+
placement?: MenuProps$2['placement'];
|
|
493
|
+
/** sets the button text value */
|
|
494
|
+
buttonText: string;
|
|
495
|
+
/** adds child components to the ButtonWithMenu component */
|
|
496
|
+
children: React$1.ReactNode;
|
|
497
|
+
}
|
|
498
|
+
/** ButtonWithMenuProps combines the ActionButtonsProps with React HTMLButtonElement attributes */
|
|
499
|
+
declare type ButtonWithMenuProps = ActionButtonsProps & React$1.ButtonHTMLAttributes<HTMLButtonElement>;
|
|
434
500
|
/**
|
|
435
|
-
*
|
|
436
|
-
* @
|
|
437
|
-
|
|
438
|
-
|
|
501
|
+
* Uniform ButtonWithMenu Component
|
|
502
|
+
* @example
|
|
503
|
+
<ButtonWithMenu
|
|
504
|
+
disabled={isDisabled}
|
|
505
|
+
buttonText="Save and close"
|
|
506
|
+
onButtonClick={() => someFunction()}
|
|
507
|
+
placement="bottom-end"
|
|
508
|
+
>
|
|
509
|
+
<MenuItem
|
|
510
|
+
disabled={isDisabled}
|
|
511
|
+
onClick={() => someFunction()}
|
|
512
|
+
key="save"
|
|
513
|
+
className="flex gap-2 items-center"
|
|
514
|
+
data-testid="save-menu-item-button"
|
|
515
|
+
>
|
|
516
|
+
<span className="whitespace-nowrap" data-test-id="save-menu-item">
|
|
517
|
+
Save
|
|
518
|
+
</span>
|
|
519
|
+
</MenuItem>
|
|
520
|
+
</ButtonWithMenu>
|
|
439
521
|
*/
|
|
440
|
-
declare const
|
|
522
|
+
declare const ButtonWithMenu: ({ onButtonClick, buttonText, disabled, children, placement, ...buttonProps }: ButtonWithMenuProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
|
|
441
523
|
|
|
442
|
-
export { Button, ButtonProps, ButtonSizeProps, ButtonThemeProps, Callout, CalloutProps, CalloutType, Caption, ChildFunction, ComboBoxGroupBase, ErrorMessage, ErrorMessageProps, Heading, HeadingProps, Icon,
|
|
524
|
+
export { ActionButtonsProps, Button, ButtonProps, ButtonSizeProps, ButtonThemeProps, ButtonWithMenu, ButtonWithMenuProps, Callout, CalloutProps, CalloutType, Caption, CaptionProps, ChildFunction, ComboBoxGroupBase, ErrorMessage, ErrorMessageProps, Heading, HeadingProps, Icon, IconColor, IconProps, IconType, IconsProvider, Input, InputComboBox, InputComboBoxOption, InputComboBoxProps, InputInlineSelect, InputInlineSelectOption, InputInlineSelectProps, InputKeywordSearch, InputKeywordSearchProps, InputProps, InputSelect, InputSelectProps, InputToggle, InputToggleProps, LevelProps, LoadingIcon, LoadingIconProps, LoadingIndicator, LoadingOverlay, LoadingOverlayProps, Menu, MenuContext, MenuItem, MenuItemProps, MenuProps, Paragraph, ParagraphProps, ScrollableList, ScrollableListItem, ScrollableListItemProps, ScrollableListProps, Textarea, TextareaProps, Theme, ThemeProps, UniformBadge, UniformLogo, UniformLogoProps, breakpointSizeProps, breakpoints, breakpointsProps, input, inputError, inputSelect, labelText, mq, scrollbarStyles, useIconContext, useMenuContext };
|