@uniformdev/design-system 13.0.1-alpha.96 → 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 +246 -103
- package/dist/index.d.ts +374 -107
- package/dist/index.js +225 -82
- package/package.json +20 -16
package/dist/index.d.ts
CHANGED
|
@@ -2,256 +2,523 @@ import * as React$1 from 'react';
|
|
|
2
2
|
import React__default, { ReactNode } from 'react';
|
|
3
3
|
import * as _emotion_react from '@emotion/react';
|
|
4
4
|
import { SerializedStyles } from '@emotion/react';
|
|
5
|
-
import { ButtonProps as ButtonProps$1 } from 'reakit/Button';
|
|
6
|
-
import { IconBaseProps, IconType } from 'react-icons';
|
|
7
5
|
import * as _emotion_react_types_jsx_namespace from '@emotion/react/types/jsx-namespace';
|
|
6
|
+
import * as reakit_ts from 'reakit/ts';
|
|
7
|
+
import { ButtonProps as ButtonProps$1 } from 'reakit/Button';
|
|
8
|
+
import { IconType as IconType$1, IconBaseProps } from 'react-icons';
|
|
9
|
+
import { GroupBase } from 'react-select';
|
|
10
|
+
import { StateManagerProps } from 'react-select/dist/declarations/src/useStateManager';
|
|
11
|
+
import InternalSelect from 'react-select/dist/declarations/src/Select';
|
|
8
12
|
import { MenuHTMLProps, MenuProps as MenuProps$1, MenuStateReturn } from 'reakit/Menu';
|
|
9
|
-
import { MenuItemHTMLProps } from 'reakit';
|
|
13
|
+
import { MenuItemHTMLProps, MenuProps as MenuProps$2 } from 'reakit';
|
|
10
14
|
|
|
15
|
+
/** @todo: line 144 onwards will be brought into a title, paragraph, list and link components */
|
|
11
16
|
declare type ThemeProps = {
|
|
17
|
+
/** sets whether to disable a provided reset stylesheet or not
|
|
18
|
+
* @default false
|
|
19
|
+
*/
|
|
12
20
|
disableReset?: boolean;
|
|
13
21
|
};
|
|
22
|
+
/**
|
|
23
|
+
* Uniform CSS Variables, font provider and optional reset stylesheet
|
|
24
|
+
* @example <Theme disableReset={true} /> */
|
|
14
25
|
declare const Theme: React__default.ElementType;
|
|
15
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
|
+
|
|
41
|
+
declare const labelText: _emotion_react.SerializedStyles;
|
|
16
42
|
declare const input: _emotion_react.SerializedStyles;
|
|
17
43
|
declare const inputError: _emotion_react.SerializedStyles;
|
|
18
44
|
declare const inputSelect: _emotion_react.SerializedStyles;
|
|
19
45
|
|
|
46
|
+
/** Custom scrollbar styles */
|
|
20
47
|
declare const scrollbarStyles: _emotion_react.SerializedStyles;
|
|
21
48
|
|
|
49
|
+
declare type UniformLogoProps = {
|
|
50
|
+
/** sets a light or dark theme for the uniform badge or logo component */
|
|
51
|
+
theme?: 'light' | 'dark';
|
|
52
|
+
};
|
|
53
|
+
|
|
54
|
+
/**
|
|
55
|
+
* Uniform Badge Logo
|
|
56
|
+
* @param props - sets react svg element attribute props
|
|
57
|
+
* @example <UniformBadge theme="dark" />
|
|
58
|
+
*/
|
|
59
|
+
declare const UniformBadge: ({ theme, ...props }: React__default.SVGAttributes<SVGElement> & UniformLogoProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
|
|
60
|
+
|
|
61
|
+
/**
|
|
62
|
+
* Uniform Logo
|
|
63
|
+
* @example <UniformLogo theme="light" /> */
|
|
64
|
+
declare const UniformLogo: ({ theme }: UniformLogoProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
|
|
65
|
+
|
|
66
|
+
/** Button themes that are available to use with our brand */
|
|
22
67
|
declare type ButtonThemeProps = 'primary' | 'secondary' | 'tertiary' | 'unimportant' | 'ghost';
|
|
68
|
+
/** Button sizes that are available to use with our brand */
|
|
23
69
|
declare type ButtonSizeProps = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
|
|
24
70
|
declare type ButtonProps = ButtonProps$1 & {
|
|
71
|
+
/** sets the theme of the button
|
|
72
|
+
* @default "primary"
|
|
73
|
+
*/
|
|
25
74
|
buttonType?: ButtonThemeProps;
|
|
75
|
+
/** React child node */
|
|
76
|
+
children?: React$1.ReactNode;
|
|
26
77
|
/**
|
|
27
|
-
* @
|
|
28
|
-
*/
|
|
78
|
+
* @default "md"
|
|
79
|
+
* @deprecated size might no longer be used as we are trying to consolidate button designs */
|
|
29
80
|
size?: ButtonSizeProps;
|
|
30
|
-
/**
|
|
31
|
-
* @deprecated rounded is no longer used
|
|
32
|
-
*/
|
|
81
|
+
/** @deprecated rounded is no longer used */
|
|
33
82
|
rounded?: boolean;
|
|
34
83
|
};
|
|
35
84
|
/**
|
|
36
|
-
* Button
|
|
37
|
-
* @component
|
|
38
|
-
* @param {string} buttonType - sets the theme of the button
|
|
85
|
+
* Uniform Button Component
|
|
39
86
|
* @param {BaseButtonProps} props - object of button props from reakit
|
|
40
|
-
* @
|
|
41
|
-
* @returns (
|
|
42
|
-
* <Button buttonType="secondary" onClick={() => alert('hello button')}>Click me</Button>
|
|
43
|
-
* )
|
|
87
|
+
* @example <Button buttonType="secondary" size="md" onClick={() => alert('hello world')}>Click me</Button>
|
|
44
88
|
*/
|
|
45
|
-
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>>;
|
|
46
113
|
|
|
47
|
-
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 */
|
|
48
116
|
declare type IconName = typeof iconNames[number];
|
|
49
117
|
|
|
50
|
-
|
|
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;
|
|
51
122
|
interface IconProps extends IconBaseProps {
|
|
52
|
-
icon
|
|
53
|
-
|
|
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;
|
|
54
129
|
}
|
|
55
|
-
|
|
130
|
+
/**
|
|
131
|
+
* Component that renders icons
|
|
132
|
+
* @example <Icon icon="add-r" iconColor="currentColor" />
|
|
133
|
+
*/
|
|
134
|
+
declare const Icon: React__default.MemoExoticComponent<({ icon, iconColor, size, ...otherProps }: IconProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element | null>;
|
|
56
135
|
|
|
57
|
-
declare type IconsMap = Record<string, IconType>;
|
|
136
|
+
declare type IconsMap = Record<string, IconType$1>;
|
|
58
137
|
declare function useIconContext(): {
|
|
59
138
|
iconsMap: IconsMap;
|
|
60
139
|
isLoading: boolean;
|
|
61
140
|
};
|
|
141
|
+
/**
|
|
142
|
+
* Provider to the Icon component
|
|
143
|
+
* @example <IconsProvider><Icon icon="add-r" /></IconsProvider>
|
|
144
|
+
*/
|
|
62
145
|
declare function IconsProvider({ children }: {
|
|
63
146
|
children: ReactNode;
|
|
64
147
|
}): _emotion_react_types_jsx_namespace.EmotionJSX.Element;
|
|
65
148
|
|
|
66
|
-
declare
|
|
149
|
+
declare type CaptionProps = {
|
|
150
|
+
/** allows users to add child elements */
|
|
151
|
+
children: React$1.ReactNode;
|
|
152
|
+
};
|
|
153
|
+
/**
|
|
154
|
+
* Component that provides caption text to input fields
|
|
155
|
+
* @example <Caption>some help text here</Caption>
|
|
156
|
+
*/
|
|
157
|
+
declare const Caption: ({ children }: CaptionProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
|
|
67
158
|
|
|
68
159
|
declare type ErrorMessageProps = {
|
|
160
|
+
/** sets the error message value */
|
|
69
161
|
message?: string;
|
|
70
162
|
};
|
|
163
|
+
/**
|
|
164
|
+
* Component that provides error messaging to input fields
|
|
165
|
+
* @example <ErrorMessage>something went wrong, please try again</ErrorMessage>
|
|
166
|
+
*/
|
|
71
167
|
declare const ErrorMessage: ({ message }: ErrorMessageProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element | null;
|
|
72
168
|
|
|
73
|
-
declare type
|
|
169
|
+
declare type InputProps = React$1.InputHTMLAttributes<HTMLInputElement> & {
|
|
170
|
+
/** (optional) sets the label value */
|
|
74
171
|
label?: string;
|
|
172
|
+
/** (optional) sets caption text value */
|
|
75
173
|
caption?: string;
|
|
174
|
+
/** (optional) add an input icon to the input field */
|
|
76
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 */
|
|
77
177
|
showLabel?: boolean;
|
|
178
|
+
/** (optional) sets and shows the the error message value */
|
|
78
179
|
errorMessage?: string;
|
|
79
180
|
capture?: boolean | 'user' | 'environment';
|
|
80
|
-
/**
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
/**
|
|
85
|
-
|
|
181
|
+
/**
|
|
182
|
+
* (optional) sets an overriding classname on the container element
|
|
183
|
+
* @deprecated */
|
|
184
|
+
classNameContainer?: string | SerializedStyles;
|
|
185
|
+
/**
|
|
186
|
+
* (optional) sets an overriding classname on the input element
|
|
187
|
+
* @deprecated */
|
|
188
|
+
classNameControl?: string | SerializedStyles;
|
|
189
|
+
/**
|
|
190
|
+
* (optional) sets an overriding classname on the label element
|
|
191
|
+
* @deprecated */
|
|
192
|
+
classNameLabel?: string | SerializedStyles;
|
|
86
193
|
};
|
|
87
194
|
/**
|
|
88
195
|
* Input Component
|
|
89
|
-
* @
|
|
90
|
-
* @param {string} label - sets the label value
|
|
91
|
-
* @param {string} caption - sets help text value
|
|
92
|
-
* @param {boolean} showLabel - sets whether to hide the label and use aria-label on the input itself
|
|
93
|
-
* @param {React.ReactElement} icon - add an input icon to the input field
|
|
94
|
-
* @param {string} errorMessage - sets shows the the error message value
|
|
95
|
-
* @returns <Input label="my label" />
|
|
196
|
+
* @example - <Input label="my label" id="some-id" name="some-name" caption="some help text" errorMessage={hasError ? 'something went wrong' : undefined} />
|
|
96
197
|
*/
|
|
97
|
-
declare const Input: ({ label, icon, id, caption, showLabel, errorMessage, classNameContainer, classNameControl, classNameLabel, ...props }:
|
|
198
|
+
declare const Input: ({ label, icon, id, caption, showLabel, errorMessage, classNameContainer, classNameControl, classNameLabel, ...props }: InputProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
|
|
98
199
|
|
|
99
|
-
declare type
|
|
100
|
-
|
|
101
|
-
options: Array<React.OptionHTMLAttributes<HTMLOptionElement> & {
|
|
102
|
-
label: string;
|
|
103
|
-
}>;
|
|
104
|
-
caption?: string;
|
|
200
|
+
declare type InputComboBoxOption = {
|
|
201
|
+
/** sets the label value */
|
|
105
202
|
label: string;
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
/**
|
|
109
|
-
|
|
110
|
-
/** @deprecated */
|
|
111
|
-
classNameControl?: string;
|
|
112
|
-
/** @deprecated */
|
|
113
|
-
classNameLabel?: string;
|
|
203
|
+
/** sets the input value */
|
|
204
|
+
value: string;
|
|
205
|
+
/** (optional) sets the disabled value on the input */
|
|
206
|
+
isDisabled?: boolean;
|
|
114
207
|
};
|
|
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>>;
|
|
209
|
+
declare type ComboBoxGroupBase<TOption> = GroupBase<TOption>;
|
|
115
210
|
/**
|
|
116
|
-
*
|
|
211
|
+
* InputComboBox
|
|
117
212
|
* @component
|
|
118
|
-
* @
|
|
119
|
-
|
|
120
|
-
* @param {string} defaultOption - sets the first item in the options list with empty value
|
|
121
|
-
* @param {Array<React.OptionHTMLAttributes<HTMLOptionElement> & { label: string }>} options - sets an array of select options with value and text value
|
|
122
|
-
* @param {string} caption - sets help text value
|
|
123
|
-
* @param {string} errorMessage - sets and shows the the error message value
|
|
124
|
-
* @returns <InputSelect label="my label" options={[{label: "option 1"}, {label: "option 2"}]} />
|
|
125
|
-
*/
|
|
126
|
-
declare const InputSelect: ({ label, defaultOption, options, caption, errorMessage, showLabel, classNameContainer, classNameControl, classNameLabel, ...props }: InputSelectProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
|
|
213
|
+
* @example <InputComboBox name="name" id="combo-box" options=[{ value: 'chocolate', label: 'Chocolate' }, { value: 'strawberry', label: 'Strawberry' }, { value: 'vanilla', label: 'Vanilla' }] /> */
|
|
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;
|
|
127
215
|
|
|
128
|
-
declare type
|
|
216
|
+
declare type InputInlineSelectOption = {
|
|
217
|
+
/** sets the display name of the option */
|
|
129
218
|
label: string;
|
|
219
|
+
/** sets the option value attribute */
|
|
130
220
|
value: string;
|
|
131
221
|
};
|
|
132
|
-
declare type
|
|
222
|
+
declare type InputInlineSelectProps = Omit<React$1.HTMLAttributes<HTMLButtonElement>, 'onChange'> & {
|
|
223
|
+
/** sets the selected value */
|
|
133
224
|
value: string;
|
|
134
|
-
options
|
|
135
|
-
|
|
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 */
|
|
136
230
|
disabled?: boolean;
|
|
231
|
+
/** override existing styles by passing new emotion styles or a string of css props */
|
|
137
232
|
classNameContainer?: SerializedStyles | string;
|
|
138
233
|
};
|
|
139
234
|
/**
|
|
140
235
|
* Input Inline Select
|
|
141
|
-
* @
|
|
142
|
-
* @param {string} value - sets the selected value
|
|
143
|
-
* @param {Array<InlineSelectInputOption>} options - sets the available options within the dropdown
|
|
144
|
-
* @param {(option: InlineSelectInputOption) => void} onChange - function that takes an option argument and sets the new value
|
|
145
|
-
* @param {boolean} disabled - sets the disabled state of the button
|
|
146
|
-
* @param {SerializedStyles | string} classNameContainer - override existing styles by passing new emotion styles or a string of css props
|
|
147
|
-
* @returns <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)}} />
|
|
148
237
|
*/
|
|
149
|
-
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;
|
|
150
239
|
|
|
151
240
|
interface InputKeywordSearchProps {
|
|
241
|
+
/** function that takes a string value */
|
|
152
242
|
onSearchTextChanged: (searchText: string) => void;
|
|
243
|
+
/** (optional) sets the input field disabled state
|
|
244
|
+
* @default false
|
|
245
|
+
*/
|
|
153
246
|
disabled?: boolean;
|
|
247
|
+
/** (optional) props that allows users to set the placeholder text value
|
|
248
|
+
* @default "Keyword search"
|
|
249
|
+
*/
|
|
154
250
|
placeholder?: string;
|
|
251
|
+
/** (optional) allows users to set the "name" attribute value
|
|
252
|
+
* @default "keywordSearch"
|
|
253
|
+
*/
|
|
155
254
|
inputFieldName?: string;
|
|
255
|
+
/** (optional) allows users to prevent default form field submission
|
|
256
|
+
* @default false
|
|
257
|
+
*/
|
|
156
258
|
disabledFieldSubmission?: boolean;
|
|
259
|
+
/** (optional) prop that sets the value of the input field */
|
|
157
260
|
value?: string;
|
|
158
261
|
}
|
|
262
|
+
/**
|
|
263
|
+
* Component used for keyword search functionality
|
|
264
|
+
* @example <InlineSelectInput disabled={index > 1} value={currentValue ?? '&'} options={[{ label: 'AND', value: '&' }, { label: 'OR', value: '|' }]} onChange={(s) => {setState(s.value)}} />
|
|
265
|
+
*/
|
|
159
266
|
declare const InputKeywordSearch: ({ onSearchTextChanged, disabled, placeholder, inputFieldName, disabledFieldSubmission, value, }: InputKeywordSearchProps) => React$1.ReactElement;
|
|
160
267
|
|
|
268
|
+
declare type InputSelectProps = React.SelectHTMLAttributes<HTMLSelectElement> & {
|
|
269
|
+
/** (optional) sets the first item in the options list with empty value */
|
|
270
|
+
defaultOption?: string;
|
|
271
|
+
/** sets an array of select options with value and text value */
|
|
272
|
+
options: Array<React.OptionHTMLAttributes<HTMLOptionElement> & {
|
|
273
|
+
label: string;
|
|
274
|
+
}>;
|
|
275
|
+
/** (optional) sets caption text value */
|
|
276
|
+
caption?: string;
|
|
277
|
+
/** sets the label value */
|
|
278
|
+
label: string;
|
|
279
|
+
/** (optional) sets whether to hide the label and use aria-label on the input field
|
|
280
|
+
* @default false
|
|
281
|
+
*/
|
|
282
|
+
showLabel?: boolean;
|
|
283
|
+
/** (optional) sets and shows the the error message value */
|
|
284
|
+
errorMessage?: string;
|
|
285
|
+
/** (optional) allows react components to be added inline with the label element */
|
|
286
|
+
labelCta?: JSX.Element;
|
|
287
|
+
/**
|
|
288
|
+
* (optional) sets an overriding classname on the container element
|
|
289
|
+
* @deprecated */
|
|
290
|
+
classNameContainer?: string;
|
|
291
|
+
/**
|
|
292
|
+
* (optional) sets an overriding classname on the input element
|
|
293
|
+
* @deprecated */
|
|
294
|
+
classNameControl?: string;
|
|
295
|
+
/**
|
|
296
|
+
* (optional) sets an overriding classname on the label element
|
|
297
|
+
* @deprecated */
|
|
298
|
+
classNameLabel?: string;
|
|
299
|
+
};
|
|
300
|
+
/**
|
|
301
|
+
* Input Select Component
|
|
302
|
+
* @example <InputSelect label="my label" options={[{label: "option 1"}, {label: "option 2"}]} />
|
|
303
|
+
*/
|
|
304
|
+
declare const InputSelect: ({ label, defaultOption, options, caption, errorMessage, showLabel, labelCta, classNameContainer, classNameControl, classNameLabel, ...props }: InputSelectProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
|
|
305
|
+
|
|
161
306
|
declare type InputToggleProps = React$1.HTMLAttributes<HTMLInputElement> & {
|
|
307
|
+
/** sets the label value */
|
|
162
308
|
label: string;
|
|
309
|
+
/** sets the type of input to use, either radio or checkbox */
|
|
163
310
|
type: 'radio' | 'checkbox';
|
|
311
|
+
/** sets the name value of the radio/checkbox input */
|
|
164
312
|
name: string;
|
|
313
|
+
/** (optional) sets the disabled state */
|
|
165
314
|
disabled?: boolean;
|
|
315
|
+
/** (optional) sets the checked state of the input */
|
|
166
316
|
checked?: boolean;
|
|
317
|
+
/** (optional) sets caption text value */
|
|
167
318
|
caption?: string;
|
|
319
|
+
/** (optional) sets shows the the error message value */
|
|
168
320
|
errorMessage?: string;
|
|
169
321
|
};
|
|
322
|
+
/**
|
|
323
|
+
* Component that creates a checkbox or radio input field
|
|
324
|
+
* @example <InputToggle label="Do you like ice cream?" type="checkbox" name="ice-cream" />
|
|
325
|
+
*/
|
|
170
326
|
declare const InputToggle: ({ label, type, disabled, checked, name, caption, errorMessage, ...props }: InputToggleProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
|
|
171
327
|
|
|
328
|
+
declare type TextareaProps = React$1.TextareaHTMLAttributes<HTMLTextAreaElement> & {
|
|
329
|
+
/** (optional) sets the label value */
|
|
330
|
+
label?: string;
|
|
331
|
+
/** (optional) sets caption text value */
|
|
332
|
+
caption?: string;
|
|
333
|
+
/** (optional) add an input icon to the input field */
|
|
334
|
+
icon?: React$1.ReactElement;
|
|
335
|
+
/** (optional) sets whether to hide the label and use aria-label on the input field */
|
|
336
|
+
showLabel?: boolean;
|
|
337
|
+
/** (optional) sets shows the the error message value */
|
|
338
|
+
errorMessage?: string;
|
|
339
|
+
capture?: boolean | 'user' | 'environment';
|
|
340
|
+
};
|
|
341
|
+
/**
|
|
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} />
|
|
344
|
+
*/
|
|
345
|
+
declare const Textarea: ({ label, icon, id, caption, showLabel, errorMessage, ...props }: TextareaProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
|
|
346
|
+
|
|
172
347
|
interface MenuProps extends MenuHTMLProps {
|
|
173
|
-
|
|
348
|
+
/** sets aria-label attribute */
|
|
174
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 */
|
|
175
353
|
placement?: MenuProps$1['placement'];
|
|
354
|
+
/** (optional) allows users to add child elements */
|
|
355
|
+
children?: React$1.ReactNode;
|
|
176
356
|
}
|
|
177
357
|
declare const MenuContext: React$1.Context<MenuStateReturn>;
|
|
178
358
|
declare const useMenuContext: () => MenuStateReturn;
|
|
179
|
-
|
|
359
|
+
/**
|
|
360
|
+
* Component used for creating clickable menus
|
|
361
|
+
* @example
|
|
362
|
+
* <Menu
|
|
363
|
+
* menuTrigger={<button type="button">Click me</button>}
|
|
364
|
+
* menuItemsContainerCssClasses="bg-white"
|
|
365
|
+
* menuLabel="Linked environment management options">
|
|
366
|
+
* </Menu>
|
|
367
|
+
*/
|
|
368
|
+
declare const Menu: ({ menuLabel, menuTrigger, placement, children }: MenuProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
|
|
180
369
|
|
|
181
370
|
declare type MenuItemProps = MenuItemHTMLProps & {
|
|
182
|
-
|
|
371
|
+
/** sets child elements within the component */
|
|
183
372
|
children: ChildFunction | React$1.ReactNode;
|
|
373
|
+
/** (optional) set whether to hide the menu after a click action */
|
|
184
374
|
hideMenuOnClick?: boolean;
|
|
375
|
+
/** (optional) set an icon along side the item text */
|
|
185
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;
|
|
186
379
|
};
|
|
187
380
|
declare type ChildFunction = (menuItemProps: MenuItemHTMLProps) => React$1.ReactElement | null;
|
|
381
|
+
/**
|
|
382
|
+
* MenuItem Component used along side <Menu /> component
|
|
383
|
+
* @example <MenuItem onClick={() => alert('menu item was clicked')} icon={<RedClose />}>Remove Link</MenuItem>
|
|
384
|
+
*/
|
|
188
385
|
declare const MenuItem: React$1.FC<MenuItemProps>;
|
|
189
386
|
|
|
387
|
+
/** Callout button types available to use with our brand */
|
|
190
388
|
declare type CalloutType = 'caution' | 'danger' | 'info' | 'note' | 'success' | 'tip' | 'error';
|
|
191
389
|
interface CalloutProps {
|
|
390
|
+
/** sets the type of callout to use and it's styles
|
|
391
|
+
* @default "info"
|
|
392
|
+
*/
|
|
192
393
|
type: CalloutType;
|
|
394
|
+
/** (optional) sets the title of the callout */
|
|
193
395
|
title?: React$1.ReactNode;
|
|
396
|
+
/** add child elements to the callout */
|
|
194
397
|
children: React$1.ReactNode;
|
|
398
|
+
/** sets additional css classes or emotion styles on the callout */
|
|
195
399
|
className?: SerializedStyles | string;
|
|
196
400
|
}
|
|
197
401
|
/**
|
|
198
|
-
* Callout
|
|
199
|
-
* @
|
|
200
|
-
* @param {CalloutType} type - sets the type of callout to be used
|
|
201
|
-
* @param {React.ReactNode} title - sets the title of the callout
|
|
202
|
-
* @param {React.ReactNode} children - adds child components to the callout body
|
|
203
|
-
* @param {SerializedStyles | string} className - sets a string value className or a emotion css style property for custom overrides
|
|
204
|
-
* @return <Callout title="my title" type="caution"><p>callout body copy</p></Callout>
|
|
402
|
+
* Uniform Callout Component
|
|
403
|
+
* @example <Callout title="my title" type="caution"><p>callout body copy</p></Callout>
|
|
205
404
|
*/
|
|
206
|
-
declare const Callout:
|
|
405
|
+
declare const Callout: ({ type, title, children, className }: CalloutProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element | null;
|
|
207
406
|
|
|
208
407
|
/**
|
|
209
408
|
* Loading Indicator
|
|
210
|
-
* @
|
|
211
|
-
* @returns <LoadingIndicator />
|
|
409
|
+
* @example <LoadingIndicator />
|
|
212
410
|
*/
|
|
213
411
|
declare const LoadingIndicator: () => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
|
|
214
412
|
|
|
215
413
|
interface LoadingOverlayProps {
|
|
414
|
+
/** sets whether to display the loading overlay components */
|
|
216
415
|
isActive: boolean;
|
|
416
|
+
/** (optional) type that sets a text value or React component under the loading icon */
|
|
217
417
|
statusMessage?: string | JSX.Element;
|
|
218
418
|
}
|
|
219
419
|
/**
|
|
220
420
|
* Loading Overlay
|
|
221
|
-
* @
|
|
222
|
-
* @param {boolean} isActive - sets whether to display the loading overlay components
|
|
223
|
-
* @param {string | JSX.Element} statusMessage - optional type that sets a text value or React component under the loading icon
|
|
224
|
-
* @returns <LoadingOverlay isActive={true} statusMessage="Loading..." />
|
|
421
|
+
* @example <LoadingOverlay isActive={true} statusMessage="Loading..." />
|
|
225
422
|
*/
|
|
226
|
-
declare const LoadingOverlay:
|
|
423
|
+
declare const LoadingOverlay: ({ isActive, statusMessage }: LoadingOverlayProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
|
|
227
424
|
interface LoadingIconProps {
|
|
425
|
+
/** (optional) prop that sets a number value for the height of the icon */
|
|
228
426
|
width?: number;
|
|
427
|
+
/** (optional) prop that sets a number value for the width of the icon */
|
|
229
428
|
height?: number;
|
|
230
429
|
}
|
|
231
430
|
/**
|
|
232
431
|
* Loading Icon
|
|
233
|
-
* @
|
|
234
|
-
* @param {number} height - option prop that sets a number value for the height of the icon
|
|
235
|
-
* @param {number} width - option prop that sets a number value for the width of the icon
|
|
236
|
-
* @returns <LoadingIcon height={128} width={128} />
|
|
432
|
+
* @example <LoadingIcon height={128} width={128} />
|
|
237
433
|
*/
|
|
238
|
-
declare const LoadingIcon:
|
|
434
|
+
declare const LoadingIcon: ({ height, width }: LoadingIconProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
|
|
239
435
|
|
|
436
|
+
/** Available heading weights e.g. 1 - 6 */
|
|
240
437
|
declare type LevelProps = 1 | 2 | 3 | 4 | 5 | 6;
|
|
241
438
|
declare type HeadingProps = {
|
|
439
|
+
/** sets the type of heading tag between h1 to h6, defaults to <h2>
|
|
440
|
+
* @default 2
|
|
441
|
+
*/
|
|
242
442
|
level?: LevelProps;
|
|
443
|
+
/** sets the title value */
|
|
444
|
+
children: React$1.ReactNode;
|
|
243
445
|
};
|
|
244
|
-
|
|
446
|
+
/**
|
|
447
|
+
* Component that sets the heading tag
|
|
448
|
+
* @example <Heading level={1}>Blog Post Title</Heading>
|
|
449
|
+
*/
|
|
450
|
+
declare const Heading: ({ level, children }: HeadingProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
|
|
245
451
|
|
|
246
|
-
declare type
|
|
247
|
-
|
|
248
|
-
|
|
452
|
+
declare type ParagraphProps = {
|
|
453
|
+
/** adds child elements to the paragraph tag */
|
|
454
|
+
children: React$1.ReactNode;
|
|
455
|
+
/** (optional) allows user to set overriding class names or emotion styles */
|
|
456
|
+
className?: SerializedStyles | string;
|
|
457
|
+
};
|
|
249
458
|
/**
|
|
250
|
-
*
|
|
251
|
-
* @
|
|
252
|
-
* @param {string} size - The responsive breakpoint value
|
|
253
|
-
* @returns {string} - compiled media query e.g. (min-width: 640px)
|
|
459
|
+
* Component for generic paragraph tags
|
|
460
|
+
* @example <Paragraph>This is the text that was be inside the paragraph tag.</Paragraph>
|
|
254
461
|
*/
|
|
255
|
-
declare const
|
|
462
|
+
declare const Paragraph: ({ className, children }: ParagraphProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
|
|
463
|
+
|
|
464
|
+
declare type ScrollableListProps = {
|
|
465
|
+
/** (optional) sets the label value */
|
|
466
|
+
label?: string;
|
|
467
|
+
/** (optional) allows users to add child components within the container */
|
|
468
|
+
children?: React$1.ReactNode;
|
|
469
|
+
};
|
|
470
|
+
/**
|
|
471
|
+
* Component that sets the base structure for scrollable content in a max height container
|
|
472
|
+
* @example <ScrollableList label="allowed content types"><button>say hello</button></ScrollableList>
|
|
473
|
+
*/
|
|
474
|
+
declare const ScrollableList: ({ label, children }: ScrollableListProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
|
|
475
|
+
|
|
476
|
+
declare type ScrollableListItemProps = React$1.HTMLAttributes<HTMLButtonElement> & {
|
|
477
|
+
/** sets the button text value */
|
|
478
|
+
buttonText: string;
|
|
479
|
+
/** sets the active style of the button */
|
|
480
|
+
active: boolean;
|
|
481
|
+
};
|
|
482
|
+
/**
|
|
483
|
+
* Component used within <ScrollableList /> for adding interactive button components with predefined styles
|
|
484
|
+
* @example <ScrollableListItem buttontext="my button" active={false} />
|
|
485
|
+
*/
|
|
486
|
+
declare const ScrollableListItem: ({ buttonText, active, ...props }: ScrollableListItemProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
|
|
487
|
+
|
|
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>;
|
|
500
|
+
/**
|
|
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>
|
|
521
|
+
*/
|
|
522
|
+
declare const ButtonWithMenu: ({ onButtonClick, buttonText, disabled, children, placement, ...buttonProps }: ButtonWithMenuProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
|
|
256
523
|
|
|
257
|
-
export { Button, ButtonProps, ButtonSizeProps, ButtonThemeProps, Callout, CalloutProps, CalloutType, Caption, ChildFunction, 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 };
|