carbon-react 107.1.5 → 107.1.6
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/esm/__internal__/input/input.component.js +3 -0
- package/esm/__internal__/label/icon-wrapper.style.d.ts +2 -0
- package/esm/__internal__/label/icon-wrapper.style.js +4 -4
- package/esm/__internal__/label/index.d.ts +2 -1
- package/esm/__internal__/label/label.component.d.ts +27 -0
- package/esm/__internal__/label/label.component.js +42 -80
- package/esm/__internal__/label/label.style.d.ts +23 -3
- package/esm/__internal__/label/label.style.js +4 -19
- package/esm/__internal__/utils/helpers/events/events.d.ts +0 -58
- package/esm/__internal__/utils/helpers/events/events.js +12 -128
- package/esm/__spec_helper__/test-utils.d.ts +4 -25
- package/esm/__spec_helper__/test-utils.js +12 -25
- package/esm/components/action-popover/action-popover-menu/action-popover-menu.component.js +2 -2
- package/esm/components/anchor-navigation/anchor-navigation-item/anchor-navigation-item.component.d.ts +19 -0
- package/esm/components/anchor-navigation/anchor-navigation-item/anchor-navigation-item.component.js +14 -21
- package/esm/components/anchor-navigation/anchor-navigation-item/anchor-navigation-item.style.d.ts +5 -0
- package/esm/components/anchor-navigation/anchor-navigation-item/anchor-navigation-item.style.js +0 -4
- package/esm/components/anchor-navigation/anchor-navigation.component.d.ts +14 -0
- package/esm/components/anchor-navigation/anchor-navigation.component.js +55 -72
- package/esm/components/anchor-navigation/anchor-navigation.style.d.ts +4 -0
- package/esm/components/anchor-navigation/anchor-section-divider.component.d.ts +4 -0
- package/esm/components/anchor-navigation/{anchor-section-divider/anchor-section-divider.style.js → anchor-section-divider.component.js} +3 -2
- package/esm/components/anchor-navigation/index.d.ts +5 -3
- package/esm/components/anchor-navigation/index.js +1 -1
- package/esm/components/flat-table/flat-table-cell/flat-table-cell.component.js +1 -0
- package/esm/components/flat-table/flat-table-checkbox/flat-table-checkbox.component.js +1 -0
- package/esm/components/flat-table/flat-table-header/flat-table-header.component.js +1 -0
- package/esm/components/flat-table/flat-table-row/flat-table-row.component.js +3 -3
- package/esm/components/flat-table/flat-table-row-header/flat-table-row-header.component.js +1 -0
- package/esm/components/help/help.style.d.ts +2 -0
- package/esm/components/menu/__internal__/spec-helper/index.js +1 -2
- package/esm/components/menu/__internal__/submenu/submenu.component.js +1 -1
- package/esm/components/multi-action-button/multi-action-button.component.js +3 -0
- package/esm/components/numeral-date/numeral-date.component.js +1 -1
- package/esm/components/search/search.component.js +1 -2
- package/lib/__internal__/input/input.component.js +3 -0
- package/lib/__internal__/label/icon-wrapper.style.d.ts +2 -0
- package/lib/__internal__/label/icon-wrapper.style.js +2 -2
- package/lib/__internal__/label/index.d.ts +2 -1
- package/lib/__internal__/label/label.component.d.ts +27 -0
- package/lib/__internal__/label/label.component.js +40 -78
- package/lib/__internal__/label/label.style.d.ts +23 -3
- package/lib/__internal__/label/label.style.js +4 -22
- package/lib/__internal__/utils/helpers/events/events.d.ts +0 -58
- package/lib/__internal__/utils/helpers/events/events.js +12 -128
- package/lib/__spec_helper__/test-utils.d.ts +4 -25
- package/lib/__spec_helper__/test-utils.js +12 -25
- package/lib/components/action-popover/action-popover-menu/action-popover-menu.component.js +2 -2
- package/lib/components/anchor-navigation/anchor-navigation-item/anchor-navigation-item.component.d.ts +19 -0
- package/lib/components/anchor-navigation/anchor-navigation-item/anchor-navigation-item.component.js +14 -21
- package/lib/components/anchor-navigation/anchor-navigation-item/anchor-navigation-item.style.d.ts +5 -0
- package/lib/components/anchor-navigation/anchor-navigation-item/anchor-navigation-item.style.js +0 -7
- package/lib/components/anchor-navigation/anchor-navigation.component.d.ts +14 -0
- package/lib/components/anchor-navigation/anchor-navigation.component.js +57 -73
- package/lib/components/anchor-navigation/anchor-navigation.style.d.ts +4 -0
- package/lib/components/anchor-navigation/anchor-section-divider.component.d.ts +4 -0
- package/lib/components/anchor-navigation/{anchor-section-divider/anchor-section-divider.style.js → anchor-section-divider.component.js} +3 -2
- package/lib/components/anchor-navigation/index.d.ts +5 -3
- package/lib/components/anchor-navigation/index.js +1 -1
- package/lib/components/flat-table/flat-table-cell/flat-table-cell.component.js +1 -0
- package/lib/components/flat-table/flat-table-checkbox/flat-table-checkbox.component.js +1 -0
- package/lib/components/flat-table/flat-table-header/flat-table-header.component.js +1 -0
- package/lib/components/flat-table/flat-table-row/flat-table-row.component.js +2 -4
- package/lib/components/flat-table/flat-table-row-header/flat-table-row-header.component.js +1 -0
- package/lib/components/help/help.style.d.ts +2 -0
- package/lib/components/menu/__internal__/spec-helper/index.js +1 -2
- package/lib/components/menu/__internal__/submenu/submenu.component.js +1 -1
- package/lib/components/multi-action-button/multi-action-button.component.js +3 -0
- package/lib/components/numeral-date/numeral-date.component.js +1 -1
- package/lib/components/search/search.component.js +1 -3
- package/package.json +1 -1
- package/esm/__internal__/label/label.d.ts +0 -43
- package/esm/components/anchor-navigation/anchor-navigation-item/anchor-navigation-item.d.ts +0 -23
- package/esm/components/anchor-navigation/anchor-navigation.d.ts +0 -11
- package/esm/components/anchor-navigation/anchor-section-divider/anchor-section-divider.d.ts +0 -12
- package/lib/__internal__/label/label.d.ts +0 -43
- package/lib/components/anchor-navigation/anchor-navigation-item/anchor-navigation-item.d.ts +0 -23
- package/lib/components/anchor-navigation/anchor-navigation.d.ts +0 -11
- package/lib/components/anchor-navigation/anchor-section-divider/anchor-section-divider.d.ts +0 -12
|
@@ -221,6 +221,9 @@ Input.propTypes = {
|
|
|
221
221
|
"contentEditable": PropTypes.oneOfType([PropTypes.oneOf(["false", "inherit", "true"]), PropTypes.bool]),
|
|
222
222
|
"contextMenu": PropTypes.string,
|
|
223
223
|
"crossOrigin": PropTypes.string,
|
|
224
|
+
"css": PropTypes.oneOfType([PropTypes.func, PropTypes.number, PropTypes.object, PropTypes.shape({
|
|
225
|
+
"__emotion_styles": PropTypes.any.isRequired
|
|
226
|
+
}), PropTypes.string, PropTypes.bool]),
|
|
224
227
|
"dangerouslySetInnerHTML": PropTypes.shape({
|
|
225
228
|
"__html": PropTypes.string.isRequired
|
|
226
229
|
}),
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import styled from "styled-components";
|
|
2
|
-
import
|
|
2
|
+
import StyledValidationIcon from "../validations/validation-icon.style";
|
|
3
3
|
import StyledHelp from "../../components/help/help.style";
|
|
4
|
-
const
|
|
4
|
+
const StyledIconWrapper = styled.div`
|
|
5
5
|
display: inline-block;
|
|
6
6
|
margin: 0;
|
|
7
7
|
margin-left: 4px;
|
|
@@ -16,8 +16,8 @@ const IconWrapperStyle = styled.div`
|
|
|
16
16
|
outline: 2px solid var(--colorsSemanticFocus500);
|
|
17
17
|
}
|
|
18
18
|
|
|
19
|
-
${
|
|
19
|
+
${StyledValidationIcon}, ${StyledHelp} {
|
|
20
20
|
position: static;
|
|
21
21
|
}
|
|
22
22
|
`;
|
|
23
|
-
export default
|
|
23
|
+
export default StyledIconWrapper;
|
|
@@ -1 +1,2 @@
|
|
|
1
|
-
export { default } from "./label";
|
|
1
|
+
export { default } from "./label.component";
|
|
2
|
+
export type { LabelProps } from "./label.component";
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { StyledLabelProps, StyledLabelContainerProps } from "./label.style";
|
|
3
|
+
import { ValidationProps } from "../validations";
|
|
4
|
+
import { IconType } from "../../components/icon";
|
|
5
|
+
export interface LabelProps extends ValidationProps, StyledLabelProps, StyledLabelContainerProps {
|
|
6
|
+
/** Children elements */
|
|
7
|
+
children?: React.ReactNode;
|
|
8
|
+
/** A message that the Help component will display */
|
|
9
|
+
help?: React.ReactNode;
|
|
10
|
+
/** Icon type */
|
|
11
|
+
helpIcon?: IconType;
|
|
12
|
+
/** Overrides the default tabindex of the Help component */
|
|
13
|
+
helpTabIndex?: string;
|
|
14
|
+
/** A string that represents the ID of another form element */
|
|
15
|
+
htmlFor?: string;
|
|
16
|
+
/** The unique id of the label element */
|
|
17
|
+
labelId?: string;
|
|
18
|
+
/** The unique id of the Help component tooltip, used for accessibility */
|
|
19
|
+
tooltipId?: string;
|
|
20
|
+
/** Whether to show the validation icon */
|
|
21
|
+
useValidationIcon?: boolean;
|
|
22
|
+
/** Id of the validation icon */
|
|
23
|
+
validationIconId?: string;
|
|
24
|
+
}
|
|
25
|
+
export declare const Label: ({ align, children, disabled, error, help, helpIcon, helpTabIndex, htmlFor, info, inline, isRequired, labelId, optional, pr, pl, tooltipId, useValidationIcon, validationIconId, warning, width, }: LabelProps) => JSX.Element;
|
|
26
|
+
declare const _default: React.MemoExoticComponent<({ align, children, disabled, error, help, helpIcon, helpTabIndex, htmlFor, info, inline, isRequired, labelId, optional, pr, pl, tooltipId, useValidationIcon, validationIconId, warning, width, }: LabelProps) => JSX.Element>;
|
|
27
|
+
export default _default;
|
|
@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
|
|
|
3
3
|
import Help from "../../components/help";
|
|
4
4
|
import StyledLabel, { StyledLabelContainer } from "./label.style";
|
|
5
5
|
import ValidationIcon from "../validations/validation-icon.component";
|
|
6
|
-
import
|
|
6
|
+
import StyledIconWrapper from "./icon-wrapper.style";
|
|
7
7
|
import { InputContext, InputGroupContext } from "../input-behaviour";
|
|
8
8
|
|
|
9
9
|
const shouldDisplayValidationIcon = ({
|
|
@@ -22,30 +22,30 @@ const tooltipPosition = ({
|
|
|
22
22
|
info,
|
|
23
23
|
inline
|
|
24
24
|
}) => {
|
|
25
|
-
return (error || warning || info) && inline
|
|
25
|
+
return (error || warning || info) && inline ? "top" : "right";
|
|
26
26
|
};
|
|
27
27
|
|
|
28
28
|
const Label = ({
|
|
29
|
-
disabled,
|
|
30
|
-
inline,
|
|
31
29
|
align = "right",
|
|
32
|
-
width,
|
|
33
|
-
optional,
|
|
34
|
-
labelId,
|
|
35
|
-
tooltipId,
|
|
36
30
|
children,
|
|
31
|
+
disabled,
|
|
37
32
|
error,
|
|
38
|
-
warning,
|
|
39
|
-
info,
|
|
40
33
|
help,
|
|
41
34
|
helpIcon,
|
|
42
35
|
helpTabIndex,
|
|
43
|
-
useValidationIcon = true,
|
|
44
36
|
htmlFor,
|
|
37
|
+
info,
|
|
38
|
+
inline,
|
|
39
|
+
isRequired,
|
|
40
|
+
labelId,
|
|
41
|
+
optional,
|
|
45
42
|
pr,
|
|
46
43
|
pl,
|
|
47
|
-
|
|
48
|
-
|
|
44
|
+
tooltipId,
|
|
45
|
+
useValidationIcon = true,
|
|
46
|
+
validationIconId,
|
|
47
|
+
warning,
|
|
48
|
+
width = 30
|
|
49
49
|
}) => {
|
|
50
50
|
const [isFocused, setFocus] = useState(false);
|
|
51
51
|
const {
|
|
@@ -57,14 +57,14 @@ const Label = ({
|
|
|
57
57
|
onMouseLeave: onGroupMouseLeave
|
|
58
58
|
} = useContext(InputGroupContext);
|
|
59
59
|
|
|
60
|
-
const handleMouseEnter =
|
|
61
|
-
if (onMouseEnter) onMouseEnter(
|
|
62
|
-
if (onGroupMouseEnter) onGroupMouseEnter(
|
|
60
|
+
const handleMouseEnter = () => {
|
|
61
|
+
if (onMouseEnter) onMouseEnter();
|
|
62
|
+
if (onGroupMouseEnter) onGroupMouseEnter();
|
|
63
63
|
};
|
|
64
64
|
|
|
65
|
-
const handleMouseLeave =
|
|
66
|
-
if (onMouseLeave) onMouseLeave(
|
|
67
|
-
if (onGroupMouseLeave) onGroupMouseLeave(
|
|
65
|
+
const handleMouseLeave = () => {
|
|
66
|
+
if (onMouseLeave) onMouseLeave();
|
|
67
|
+
if (onGroupMouseLeave) onGroupMouseLeave();
|
|
68
68
|
};
|
|
69
69
|
|
|
70
70
|
const icon = () => {
|
|
@@ -85,7 +85,7 @@ const Label = ({
|
|
|
85
85
|
info,
|
|
86
86
|
inline
|
|
87
87
|
});
|
|
88
|
-
return /*#__PURE__*/React.createElement(
|
|
88
|
+
return /*#__PURE__*/React.createElement(StyledIconWrapper, null, /*#__PURE__*/React.createElement(ValidationIcon, {
|
|
89
89
|
iconId: validationIconId,
|
|
90
90
|
tooltipId: tooltipId,
|
|
91
91
|
error: error,
|
|
@@ -96,7 +96,7 @@ const Label = ({
|
|
|
96
96
|
}));
|
|
97
97
|
}
|
|
98
98
|
|
|
99
|
-
return help && /*#__PURE__*/React.createElement(
|
|
99
|
+
return help && /*#__PURE__*/React.createElement(StyledIconWrapper, wrapperProps, /*#__PURE__*/React.createElement(Help, {
|
|
100
100
|
tooltipId: tooltipId,
|
|
101
101
|
tabIndex: helpTabIndex,
|
|
102
102
|
type: helpIcon,
|
|
@@ -123,64 +123,26 @@ const Label = ({
|
|
|
123
123
|
};
|
|
124
124
|
|
|
125
125
|
Label.propTypes = {
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
/** Children elements */
|
|
148
|
-
children: PropTypes.node,
|
|
149
|
-
|
|
150
|
-
/** Status of error validations */
|
|
151
|
-
error: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
|
|
152
|
-
|
|
153
|
-
/** Status of warnings */
|
|
154
|
-
warning: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
|
|
155
|
-
|
|
156
|
-
/** Status of info */
|
|
157
|
-
info: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
|
|
158
|
-
|
|
159
|
-
/** A message that the Help component will display */
|
|
160
|
-
help: PropTypes.node,
|
|
161
|
-
|
|
162
|
-
/** Icon type */
|
|
163
|
-
helpIcon: PropTypes.string,
|
|
164
|
-
|
|
165
|
-
/** Overrides the default tabindex of the Help component */
|
|
166
|
-
helpTabIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
|
|
167
|
-
|
|
168
|
-
/** Whether to show the validation icon */
|
|
169
|
-
useValidationIcon: PropTypes.bool,
|
|
170
|
-
|
|
171
|
-
/** A string that represents the ID of another form element */
|
|
172
|
-
htmlFor: PropTypes.string,
|
|
173
|
-
|
|
174
|
-
/** Padding right, integer multiplied by base spacing constant (8) */
|
|
175
|
-
pr: PropTypes.oneOf([1, 2]),
|
|
176
|
-
|
|
177
|
-
/** Padding left, integer multiplied by base spacing constant (8) */
|
|
178
|
-
pl: PropTypes.oneOf([1, 2]),
|
|
179
|
-
|
|
180
|
-
/** Flag to configure component as mandatory */
|
|
181
|
-
isRequired: PropTypes.bool,
|
|
182
|
-
|
|
183
|
-
/** Id of the validation icon */
|
|
184
|
-
validationIconId: PropTypes.string
|
|
126
|
+
"align": PropTypes.oneOf(["left", "right"]),
|
|
127
|
+
"children": PropTypes.node,
|
|
128
|
+
"disabled": PropTypes.bool,
|
|
129
|
+
"error": PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
|
|
130
|
+
"help": PropTypes.node,
|
|
131
|
+
"helpIcon": PropTypes.oneOf(["add", "alert", "analysis", "arrow_down", "arrow_left_boxed", "arrow_left_right_small", "arrow_left_small", "arrow_left", "arrow_right_small", "arrow_right", "arrow_up", "attach", "bank", "basket_with_squares", "basket", "bin", "block_arrow_right", "blocked_square", "blocked", "bold", "boxed_shapes", "bulk_destroy", "bullet_list_dotted", "bullet_list_numbers", "bullet_list", "business", "calendar_today", "calendar", "call", "camera", "card_view", "caret_down", "caret_large_down", "caret_large_left", "caret_large_right", "caret_large_up", "caret_left", "caret_right", "caret_up", "cart", "chart_bar", "chart_line", "chart_pie", "chat_notes", "chat", "chevron_down_thick", "chevron_down", "chevron_left_thick", "chevron_left", "chevron_right_thick", "chevron_right", "chevron_up_thick", "chevron_up", "circle_with_dots", "circles_connection", "clock", "close", "coins", "collaborate", "computer_clock", "connect", "copy", "credit_card_slash", "credit_card", "cross_circle", "cross", "csv", "delete", "delivery", "disconnect", "disputed", "document_right_align", "document_tick", "document_vertical_lines", "download", "draft", "drag_vertical", "drag", "dropdown", "duplicate", "edit", "edited", "ellipsis_horizontal", "ellipsis_vertical", "email_switch", "email", "error_square", "error", "euro", "expand", "factory", "favourite_lined", "favourite", "fax", "feedback", "file_excel", "file_generic", "file_image", "file_pdf", "file_word", "files_leaning", "filter_new", "filter", "fit_height", "fit_width", "flag", "folder", "gift", "graph", "grid", "help", "hide", "home", "image", "in_progress", "in_transit", "individual", "info", "italic", "key", "ledger_arrow_left", "ledger_arrow_right", "ledger", "link", "list_view", "location", "locked", "logout", "lookup", "marker", "message", "messages", "minus_large", "minus", "mobile", "money_bag", "pause_circle", "pause", "pdf", "people_switch", "people", "person_info", "person_tick", "person", "phone", "play_circle", "play", "plus_large", "plus", "pound", "print", "progress", "progressed", "question", "refresh_clock", "refresh", "remove", "sage_coin", "save", "scan", "search", "services", "settings", "share", "shop", "sort_down", "sort_up", "spanner", "split_container", "split", "square_dot", "squares_nine", "stacked_boxes", "stacked_squares", "submitted", "sync", "tag", "three_boxes", "tick_circle", "tick", "unlocked", "upload", "uploaded", "video", "view", "warning"]),
|
|
132
|
+
"helpTabIndex": PropTypes.string,
|
|
133
|
+
"htmlFor": PropTypes.string,
|
|
134
|
+
"info": PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
|
|
135
|
+
"inline": PropTypes.bool,
|
|
136
|
+
"isRequired": PropTypes.bool,
|
|
137
|
+
"labelId": PropTypes.string,
|
|
138
|
+
"optional": PropTypes.bool,
|
|
139
|
+
"pl": PropTypes.oneOf([1, 2]),
|
|
140
|
+
"pr": PropTypes.oneOf([1, 2]),
|
|
141
|
+
"tooltipId": PropTypes.string,
|
|
142
|
+
"useValidationIcon": PropTypes.bool,
|
|
143
|
+
"validationIconId": PropTypes.string,
|
|
144
|
+
"warning": PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
|
|
145
|
+
"width": PropTypes.number
|
|
185
146
|
};
|
|
147
|
+
export { Label };
|
|
186
148
|
export default /*#__PURE__*/React.memo(Label);
|
|
@@ -1,3 +1,23 @@
|
|
|
1
|
-
export
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
export interface StyledLabelProps {
|
|
2
|
+
/** If true, the component will be disabled */
|
|
3
|
+
disabled?: boolean;
|
|
4
|
+
/** Flag to configure component as mandatory */
|
|
5
|
+
isRequired?: boolean;
|
|
6
|
+
}
|
|
7
|
+
declare const StyledLabel: import("styled-components").StyledComponent<"label", any, StyledLabelProps, never>;
|
|
8
|
+
export interface StyledLabelContainerProps {
|
|
9
|
+
/** Label alignment */
|
|
10
|
+
align?: "left" | "right";
|
|
11
|
+
/** When true, label is placed in line an input */
|
|
12
|
+
inline?: boolean;
|
|
13
|
+
/** Flag to configure component as optional in Form */
|
|
14
|
+
optional?: boolean;
|
|
15
|
+
/** Padding right, integer multiplied by base spacing constant (8) */
|
|
16
|
+
pr?: 1 | 2;
|
|
17
|
+
/** Padding left, integer multiplied by base spacing constant (8) */
|
|
18
|
+
pl?: 1 | 2;
|
|
19
|
+
/** Label width */
|
|
20
|
+
width?: number;
|
|
21
|
+
}
|
|
22
|
+
export declare const StyledLabelContainer: import("styled-components").StyledComponent<"div", any, StyledLabelContainerProps, never>;
|
|
23
|
+
export default StyledLabel;
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import styled, { css } from "styled-components";
|
|
2
|
-
|
|
3
|
-
const LabelStyle = styled.label`
|
|
2
|
+
const StyledLabel = styled.label`
|
|
4
3
|
color: var(--colorsUtilityYin090);
|
|
5
4
|
display: block;
|
|
6
5
|
font-weight: 600; //TODO: (tokens) use token var(--fontWeights500)
|
|
@@ -22,10 +21,7 @@ const LabelStyle = styled.label`
|
|
|
22
21
|
color: var(--colorsUtilityYin030);
|
|
23
22
|
`}
|
|
24
23
|
`;
|
|
25
|
-
|
|
26
|
-
disabled: PropTypes.bool,
|
|
27
|
-
isRequired: PropTypes.bool
|
|
28
|
-
};
|
|
24
|
+
const DEFAULT_CONTAINER_WIDTH = 30;
|
|
29
25
|
export const StyledLabelContainer = styled.div`
|
|
30
26
|
display: flex;
|
|
31
27
|
align-items: center;
|
|
@@ -47,7 +43,7 @@ export const StyledLabelContainer = styled.div`
|
|
|
47
43
|
padding-left: var(${pl === 1 ? "--spacing100" : "--spacing200"});
|
|
48
44
|
`};
|
|
49
45
|
justify-content: ${align === "right" ? "flex-end" : "flex-start"};
|
|
50
|
-
width: ${width
|
|
46
|
+
width: ${width || DEFAULT_CONTAINER_WIDTH}%;
|
|
51
47
|
`}
|
|
52
48
|
|
|
53
49
|
${({
|
|
@@ -60,15 +56,4 @@ export const StyledLabelContainer = styled.div`
|
|
|
60
56
|
}
|
|
61
57
|
`}
|
|
62
58
|
`;
|
|
63
|
-
|
|
64
|
-
align: "right",
|
|
65
|
-
width: 30
|
|
66
|
-
};
|
|
67
|
-
StyledLabelContainer.propTypes = {
|
|
68
|
-
align: PropTypes.oneOf(["left", "right"]),
|
|
69
|
-
inline: PropTypes.bool,
|
|
70
|
-
width: PropTypes.number,
|
|
71
|
-
pr: PropTypes.number,
|
|
72
|
-
pl: PropTypes.number
|
|
73
|
-
};
|
|
74
|
-
export default LabelStyle;
|
|
59
|
+
export default StyledLabel;
|
|
@@ -13,41 +13,11 @@ declare const Events: {
|
|
|
13
13
|
* A method to determine if an event is of a particular type
|
|
14
14
|
* */
|
|
15
15
|
isEventType: (ev: React.SyntheticEvent | Event, type: string) => boolean;
|
|
16
|
-
/**
|
|
17
|
-
* A method to determine whether a key down event was an arrow key
|
|
18
|
-
* */
|
|
19
|
-
isNavigationKeyup: (ev: React.KeyboardEvent | KeyboardEvent) => boolean;
|
|
20
|
-
/**
|
|
21
|
-
* A method to determine whether a key down event was an enter key
|
|
22
|
-
* */
|
|
23
|
-
isEnterKeyup: (ev: React.KeyboardEvent | KeyboardEvent) => boolean;
|
|
24
|
-
/**
|
|
25
|
-
* A method to determine whether a key up event is allowed or not.
|
|
26
|
-
* */
|
|
27
|
-
isValidKeypress: (ev: React.KeyboardEvent | KeyboardEvent) => boolean;
|
|
28
16
|
/**
|
|
29
17
|
* Determines if a number key along the top of the keyboard or a number key on the
|
|
30
18
|
* keypad is pressed
|
|
31
19
|
* */
|
|
32
20
|
isNumberKey: (ev: React.KeyboardEvent | KeyboardEvent) => boolean;
|
|
33
|
-
/**
|
|
34
|
-
* Determines if the key pressed is part of the numpad
|
|
35
|
-
* includes symbols
|
|
36
|
-
* */
|
|
37
|
-
isNumpadKey: (ev: React.KeyboardEvent | KeyboardEvent) => boolean;
|
|
38
|
-
/**
|
|
39
|
-
* Determines if the key pressed is a alphabet key
|
|
40
|
-
* Case insensitive
|
|
41
|
-
* */
|
|
42
|
-
isAlphabetKey: (ev: React.KeyboardEvent | KeyboardEvent) => boolean;
|
|
43
|
-
/**
|
|
44
|
-
* Determines if the key pressed is a valid symbol
|
|
45
|
-
* */
|
|
46
|
-
isSymbolKey: (ev: React.KeyboardEvent | KeyboardEvent) => boolean;
|
|
47
|
-
/**
|
|
48
|
-
* Determines if the key pressed is a navigation key
|
|
49
|
-
* */
|
|
50
|
-
isNavigationKey: (ev: React.KeyboardEvent | KeyboardEvent) => boolean;
|
|
51
21
|
/**
|
|
52
22
|
* Determines if the key pressed is a navigation left key
|
|
53
23
|
* */
|
|
@@ -64,10 +34,6 @@ declare const Events: {
|
|
|
64
34
|
* Determines if the key pressed is a navigation down key
|
|
65
35
|
* */
|
|
66
36
|
isDownKey: (ev: React.KeyboardEvent | KeyboardEvent) => boolean;
|
|
67
|
-
/**
|
|
68
|
-
* Determines if the key pressed is a meta key
|
|
69
|
-
* */
|
|
70
|
-
isMetaKey: (ev: React.KeyboardEvent | KeyboardEvent) => boolean;
|
|
71
37
|
/**
|
|
72
38
|
* Determines if the key pressed is the escape key
|
|
73
39
|
* */
|
|
@@ -80,18 +46,6 @@ declare const Events: {
|
|
|
80
46
|
* Determines if the key pressed is the tab key
|
|
81
47
|
* */
|
|
82
48
|
isTabKey: (ev: React.KeyboardEvent | KeyboardEvent) => boolean;
|
|
83
|
-
/**
|
|
84
|
-
* Determines if the key pressed is the backspace key
|
|
85
|
-
* */
|
|
86
|
-
isBackspaceKey: (ev: React.KeyboardEvent | KeyboardEvent) => boolean;
|
|
87
|
-
/**
|
|
88
|
-
* Determines if the key pressed is the delete key
|
|
89
|
-
* */
|
|
90
|
-
isDeleteKey: (ev: React.KeyboardEvent | KeyboardEvent) => boolean;
|
|
91
|
-
/**
|
|
92
|
-
* Determines if the key pressed is the backspace or delete key
|
|
93
|
-
* */
|
|
94
|
-
isDeletingKey: (ev: React.KeyboardEvent | KeyboardEvent) => boolean;
|
|
95
49
|
/**
|
|
96
50
|
* Determines if the key pressed is the shift key
|
|
97
51
|
* */
|
|
@@ -104,18 +58,6 @@ declare const Events: {
|
|
|
104
58
|
* Determines if the key pressed is the space key or enter key
|
|
105
59
|
* */
|
|
106
60
|
isEnterOrSpaceKey: (ev: React.KeyboardEvent | KeyboardEvent) => boolean;
|
|
107
|
-
/**
|
|
108
|
-
* Determines if the key pressed is the period key
|
|
109
|
-
* */
|
|
110
|
-
isPeriodKey: (ev: React.KeyboardEvent | KeyboardEvent) => boolean;
|
|
111
|
-
/**
|
|
112
|
-
* Determines if the key pressed is the comma key
|
|
113
|
-
* */
|
|
114
|
-
isCommaKey: (ev: React.KeyboardEvent | KeyboardEvent) => boolean;
|
|
115
|
-
/**
|
|
116
|
-
* Determines if the key pressed is the minus key
|
|
117
|
-
* */
|
|
118
|
-
isMinusKey: (ev: React.KeyboardEvent | KeyboardEvent) => boolean;
|
|
119
61
|
/**
|
|
120
62
|
* Determines if the key pressed is the home key
|
|
121
63
|
* */
|
|
@@ -18,43 +18,6 @@ const Events = {
|
|
|
18
18
|
return ev.type === type;
|
|
19
19
|
},
|
|
20
20
|
|
|
21
|
-
/**
|
|
22
|
-
* A method to determine whether a key down event was an arrow key
|
|
23
|
-
* */
|
|
24
|
-
isNavigationKeyup: ev => {
|
|
25
|
-
if (!Events.isEventType(ev, "keyup")) {
|
|
26
|
-
return false;
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
return Events.isNavigationKey(ev);
|
|
30
|
-
},
|
|
31
|
-
|
|
32
|
-
/**
|
|
33
|
-
* A method to determine whether a key down event was an enter key
|
|
34
|
-
* */
|
|
35
|
-
isEnterKeyup: ev => {
|
|
36
|
-
if (!Events.isEventType(ev, "keyup")) {
|
|
37
|
-
return false;
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
return Events.isEnterKey(ev);
|
|
41
|
-
},
|
|
42
|
-
|
|
43
|
-
/**
|
|
44
|
-
* A method to determine whether a key up event is allowed or not.
|
|
45
|
-
* */
|
|
46
|
-
isValidKeypress: ev => {
|
|
47
|
-
if (!Events.isEventType(ev, "keyup")) {
|
|
48
|
-
return false;
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
if (Events.isNumberKey(ev) || Events.isAlphabetKey(ev) || Events.isNumpadKey(ev) || Events.isSymbolKey(ev) || Events.isSpaceKey(ev) || Events.isDeletingKey(ev) || Events.isBackspaceKey(ev)) {
|
|
52
|
-
return true;
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
return false;
|
|
56
|
-
},
|
|
57
|
-
|
|
58
21
|
/**
|
|
59
22
|
* Determines if a number key along the top of the keyboard or a number key on the
|
|
60
23
|
* keypad is pressed
|
|
@@ -66,167 +29,88 @@ const Events = {
|
|
|
66
29
|
return charCode !== undefined && charCode >= 48 && charCode <= 57;
|
|
67
30
|
},
|
|
68
31
|
|
|
69
|
-
/**
|
|
70
|
-
* Determines if the key pressed is part of the numpad
|
|
71
|
-
* includes symbols
|
|
72
|
-
* */
|
|
73
|
-
isNumpadKey: ev => {
|
|
74
|
-
return ev.which !== undefined && ev.which >= 96 && ev.which <= 111;
|
|
75
|
-
},
|
|
76
|
-
|
|
77
|
-
/**
|
|
78
|
-
* Determines if the key pressed is a alphabet key
|
|
79
|
-
* Case insensitive
|
|
80
|
-
* */
|
|
81
|
-
isAlphabetKey: ev => {
|
|
82
|
-
return ev.which !== undefined && ev.which >= 65 && ev.which <= 90;
|
|
83
|
-
},
|
|
84
|
-
|
|
85
|
-
/**
|
|
86
|
-
* Determines if the key pressed is a valid symbol
|
|
87
|
-
* */
|
|
88
|
-
isSymbolKey: ev => {
|
|
89
|
-
return ev.which !== undefined && (ev.which >= 58 && ev.which <= 64 || ev.which >= 106 && ev.which <= 107 || ev.which >= 186 && ev.which <= 192 || ev.which >= 219 && ev.which <= 222);
|
|
90
|
-
},
|
|
91
|
-
|
|
92
|
-
/**
|
|
93
|
-
* Determines if the key pressed is a navigation key
|
|
94
|
-
* */
|
|
95
|
-
isNavigationKey: ev => {
|
|
96
|
-
return ev.which !== undefined && ev.which >= 37 && ev.which <= 40;
|
|
97
|
-
},
|
|
98
|
-
|
|
99
32
|
/**
|
|
100
33
|
* Determines if the key pressed is a navigation left key
|
|
101
34
|
* */
|
|
102
35
|
isLeftKey: ev => {
|
|
103
|
-
return ev.
|
|
36
|
+
return ev.key === "ArrowLeft";
|
|
104
37
|
},
|
|
105
38
|
|
|
106
39
|
/**
|
|
107
40
|
* Determines if the key pressed is a navigation up key
|
|
108
41
|
* */
|
|
109
42
|
isUpKey: ev => {
|
|
110
|
-
return ev.
|
|
43
|
+
return ev.key === "ArrowUp";
|
|
111
44
|
},
|
|
112
45
|
|
|
113
46
|
/**
|
|
114
47
|
* Determines if the key pressed is a navigation right key
|
|
115
48
|
* */
|
|
116
49
|
isRightKey: ev => {
|
|
117
|
-
return ev.
|
|
50
|
+
return ev.key === "ArrowRight";
|
|
118
51
|
},
|
|
119
52
|
|
|
120
53
|
/**
|
|
121
54
|
* Determines if the key pressed is a navigation down key
|
|
122
55
|
* */
|
|
123
56
|
isDownKey: ev => {
|
|
124
|
-
return ev.
|
|
125
|
-
},
|
|
126
|
-
|
|
127
|
-
/**
|
|
128
|
-
* Determines if the key pressed is a meta key
|
|
129
|
-
* */
|
|
130
|
-
isMetaKey: ev => {
|
|
131
|
-
return !!ev.metaKey;
|
|
57
|
+
return ev.key === "ArrowDown";
|
|
132
58
|
},
|
|
133
59
|
|
|
134
60
|
/**
|
|
135
61
|
* Determines if the key pressed is the escape key
|
|
136
62
|
* */
|
|
137
63
|
isEscKey: ev => {
|
|
138
|
-
return ev.
|
|
64
|
+
return ev.key === "Escape";
|
|
139
65
|
},
|
|
140
66
|
|
|
141
67
|
/**
|
|
142
68
|
* Determines if the key pressed is the enter key
|
|
143
69
|
* */
|
|
144
70
|
isEnterKey: ev => {
|
|
145
|
-
return ev.
|
|
71
|
+
return ev.key === "Enter";
|
|
146
72
|
},
|
|
147
73
|
|
|
148
74
|
/**
|
|
149
75
|
* Determines if the key pressed is the tab key
|
|
150
76
|
* */
|
|
151
77
|
isTabKey: ev => {
|
|
152
|
-
return ev.
|
|
153
|
-
},
|
|
154
|
-
|
|
155
|
-
/**
|
|
156
|
-
* Determines if the key pressed is the backspace key
|
|
157
|
-
* */
|
|
158
|
-
isBackspaceKey: ev => {
|
|
159
|
-
return ev.key === "Backspace";
|
|
160
|
-
},
|
|
161
|
-
|
|
162
|
-
/**
|
|
163
|
-
* Determines if the key pressed is the delete key
|
|
164
|
-
* */
|
|
165
|
-
isDeleteKey: ev => {
|
|
166
|
-
return ev.key === "Delete";
|
|
167
|
-
},
|
|
168
|
-
|
|
169
|
-
/**
|
|
170
|
-
* Determines if the key pressed is the backspace or delete key
|
|
171
|
-
* */
|
|
172
|
-
isDeletingKey: ev => {
|
|
173
|
-
return Events.isDeleteKey(ev) || Events.isBackspaceKey(ev);
|
|
78
|
+
return ev.key === "Tab";
|
|
174
79
|
},
|
|
175
80
|
|
|
176
81
|
/**
|
|
177
82
|
* Determines if the key pressed is the shift key
|
|
178
83
|
* */
|
|
179
84
|
isShiftKey: ev => {
|
|
180
|
-
return ev.shiftKey
|
|
85
|
+
return ev.shiftKey;
|
|
181
86
|
},
|
|
182
87
|
|
|
183
88
|
/**
|
|
184
89
|
* Determines if the key pressed is the space key
|
|
185
90
|
* */
|
|
186
91
|
isSpaceKey: ev => {
|
|
187
|
-
return ev.
|
|
92
|
+
return ev.key === " ";
|
|
188
93
|
},
|
|
189
94
|
|
|
190
95
|
/**
|
|
191
96
|
* Determines if the key pressed is the space key or enter key
|
|
192
97
|
* */
|
|
193
98
|
isEnterOrSpaceKey: ev => {
|
|
194
|
-
return ev.
|
|
195
|
-
},
|
|
196
|
-
|
|
197
|
-
/**
|
|
198
|
-
* Determines if the key pressed is the period key
|
|
199
|
-
* */
|
|
200
|
-
isPeriodKey: ev => {
|
|
201
|
-
return ev.which === 190;
|
|
202
|
-
},
|
|
203
|
-
|
|
204
|
-
/**
|
|
205
|
-
* Determines if the key pressed is the comma key
|
|
206
|
-
* */
|
|
207
|
-
isCommaKey: ev => {
|
|
208
|
-
return ev.which === 188;
|
|
209
|
-
},
|
|
210
|
-
|
|
211
|
-
/**
|
|
212
|
-
* Determines if the key pressed is the minus key
|
|
213
|
-
* */
|
|
214
|
-
isMinusKey: ev => {
|
|
215
|
-
return ev.key === "-" || ev.key === "Subtract";
|
|
99
|
+
return ev.key === "Enter" || ev.key === " ";
|
|
216
100
|
},
|
|
217
101
|
|
|
218
102
|
/**
|
|
219
103
|
* Determines if the key pressed is the home key
|
|
220
104
|
* */
|
|
221
105
|
isHomeKey: ev => {
|
|
222
|
-
return ev.
|
|
106
|
+
return ev.key === "Home";
|
|
223
107
|
},
|
|
224
108
|
|
|
225
109
|
/**
|
|
226
110
|
* Determines if the key pressed is the end key
|
|
227
111
|
* */
|
|
228
112
|
isEndKey: ev => {
|
|
229
|
-
return ev.
|
|
113
|
+
return ev.key === "End";
|
|
230
114
|
},
|
|
231
115
|
|
|
232
116
|
/**
|
|
@@ -8,32 +8,11 @@ declare const assertStyleMatch: <Props>(styleSpec: {
|
|
|
8
8
|
[key: string]: string | number | undefined;
|
|
9
9
|
}, component: ReactWrapper<Props, {}, import("react").Component<{}, {}, any>> | ShallowWrapper<Props, {}, import("react").Component<{}, {}, any>> | ReactTestRendererJSON | ReactTestRendererJSON[] | null, opts?: jest.Options | undefined) => void;
|
|
10
10
|
declare const makeArrayKeys: (n: number) => number[];
|
|
11
|
-
declare const
|
|
12
|
-
readonly UpArrow: 38;
|
|
13
|
-
readonly DownArrow: 40;
|
|
14
|
-
readonly RightArrow: 39;
|
|
15
|
-
readonly LeftArrow: 37;
|
|
16
|
-
readonly Enter: 13;
|
|
17
|
-
readonly Tab: 9;
|
|
18
|
-
readonly Space: 32;
|
|
19
|
-
readonly Escape: 27;
|
|
20
|
-
readonly End: 35;
|
|
21
|
-
readonly Home: 36;
|
|
22
|
-
readonly D: 68;
|
|
23
|
-
readonly E: 69;
|
|
24
|
-
readonly P: 80;
|
|
25
|
-
readonly Z: 90;
|
|
26
|
-
readonly 1: 49;
|
|
27
|
-
};
|
|
28
|
-
declare type Keys = keyof typeof keyMap;
|
|
29
|
-
declare type MappedKeys = `press${Keys}`;
|
|
30
|
-
declare type KeyboardAccumulatorType = Record<MappedKeys, () => void>;
|
|
31
|
-
declare const keyboard: KeyboardAccumulatorType;
|
|
32
|
-
declare type KeydownAccumulatorType = Record<MappedKeys, (wrapper: ReactWrapper<any>, options?: {
|
|
33
|
-
shiftKey: boolean;
|
|
34
|
-
}) => void>;
|
|
11
|
+
declare const keyboard: Record<string, () => void>;
|
|
35
12
|
declare const simulate: {
|
|
36
|
-
keydown:
|
|
13
|
+
keydown: Record<string, (target: ReactWrapper<any>, { shiftKey }?: {
|
|
14
|
+
shiftKey: boolean;
|
|
15
|
+
} | undefined) => void>;
|
|
37
16
|
};
|
|
38
17
|
declare const listFrom: (wrapper: ReactWrapper) => ReactWrapper<import("enzyme").HTMLAttributes, any, import("react").Component<{}, {}, any>>;
|
|
39
18
|
declare const childrenFrom: (node: ReactWrapper) => ReactWrapper<any, any, import("react").Component<{}, {}, any>>;
|