carbon-react 111.5.0 → 111.5.2

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.
Files changed (57) hide show
  1. package/esm/__internal__/utils/helpers/tags/tags.d.ts +7 -7
  2. package/esm/components/alert/alert.component.js +3 -3
  3. package/esm/components/carbon-provider/carbon-provider.component.js +2 -1
  4. package/esm/components/carbon-provider/top-modal-context.d.ts +9 -0
  5. package/esm/components/carbon-provider/top-modal-context.js +36 -0
  6. package/esm/components/checkbox/checkbox-group.component.d.ts +29 -0
  7. package/esm/components/checkbox/checkbox-group.component.js +169 -47
  8. package/esm/components/checkbox/checkbox-group.style.d.ts +4 -0
  9. package/esm/components/checkbox/checkbox-group.style.js +46 -0
  10. package/esm/components/checkbox/checkbox-svg.component.d.ts +3 -0
  11. package/esm/components/checkbox/checkbox-svg.component.js +11 -12
  12. package/esm/components/checkbox/checkbox.component.d.ts +30 -0
  13. package/esm/components/checkbox/checkbox.component.js +519 -103
  14. package/esm/components/checkbox/checkbox.style.d.ts +13 -3
  15. package/esm/components/checkbox/checkbox.style.js +3 -61
  16. package/esm/components/checkbox/index.d.ts +4 -2
  17. package/esm/components/checkbox/index.js +2 -2
  18. package/esm/components/dialog/dialog.component.d.ts +4 -1
  19. package/esm/components/dialog/dialog.component.js +9 -5
  20. package/esm/components/dialog-full-screen/dialog-full-screen.component.js +6 -2
  21. package/esm/components/dialog-full-screen/dialog-full-screen.d.ts +1 -1
  22. package/esm/components/modal/__internal__/modal-manager.d.ts +2 -0
  23. package/esm/components/modal/__internal__/modal-manager.js +16 -0
  24. package/esm/components/sidebar/sidebar.component.d.ts +8 -5
  25. package/esm/components/sidebar/sidebar.component.js +11 -6
  26. package/esm/components/textbox/textbox.component.js +1 -3
  27. package/lib/__internal__/utils/helpers/tags/tags.d.ts +7 -7
  28. package/lib/components/alert/alert.component.js +3 -3
  29. package/lib/components/carbon-provider/carbon-provider.component.js +3 -1
  30. package/lib/components/carbon-provider/top-modal-context.d.ts +9 -0
  31. package/lib/components/carbon-provider/top-modal-context.js +52 -0
  32. package/lib/components/checkbox/checkbox-group.component.d.ts +29 -0
  33. package/lib/components/checkbox/checkbox-group.component.js +171 -51
  34. package/lib/components/checkbox/checkbox-group.style.d.ts +4 -0
  35. package/lib/components/checkbox/checkbox-group.style.js +66 -0
  36. package/lib/components/checkbox/checkbox-svg.component.d.ts +3 -0
  37. package/lib/components/checkbox/checkbox-svg.component.js +12 -12
  38. package/lib/components/checkbox/checkbox.component.d.ts +30 -0
  39. package/lib/components/checkbox/checkbox.component.js +520 -106
  40. package/lib/components/checkbox/checkbox.style.d.ts +13 -3
  41. package/lib/components/checkbox/checkbox.style.js +4 -65
  42. package/lib/components/checkbox/index.d.ts +4 -2
  43. package/lib/components/checkbox/index.js +6 -6
  44. package/lib/components/dialog/dialog.component.d.ts +4 -1
  45. package/lib/components/dialog/dialog.component.js +9 -4
  46. package/lib/components/dialog-full-screen/dialog-full-screen.component.js +6 -1
  47. package/lib/components/dialog-full-screen/dialog-full-screen.d.ts +1 -1
  48. package/lib/components/modal/__internal__/modal-manager.d.ts +2 -0
  49. package/lib/components/modal/__internal__/modal-manager.js +16 -0
  50. package/lib/components/sidebar/sidebar.component.d.ts +8 -5
  51. package/lib/components/sidebar/sidebar.component.js +10 -5
  52. package/lib/components/textbox/textbox.component.js +1 -3
  53. package/package.json +1 -1
  54. package/esm/components/checkbox/checkbox-group.d.ts +0 -28
  55. package/esm/components/checkbox/checkbox.d.ts +0 -24
  56. package/lib/components/checkbox/checkbox-group.d.ts +0 -28
  57. package/lib/components/checkbox/checkbox.d.ts +0 -24
@@ -1,16 +1,16 @@
1
- interface DataProps {
1
+ interface RestProps {
2
+ [restKeys: string]: any;
3
+ }
4
+ export interface TagProps {
5
+ /** @private @ignore Identifier used for testing purposes, applied to the root element of the component. */
6
+ "data-component"?: string;
2
7
  /** Identifier used for testing purposes, applied to the root element of the component. */
3
8
  "data-element"?: string;
4
9
  /** Identifier used for testing purposes, applied to the root element of the component. */
5
10
  "data-role"?: string;
6
- [restKeys: string]: any;
7
- }
8
- export interface TagProps extends DataProps {
9
- /** Identifier used for testing purposes, applied to the root element of the component. */
10
- "data-component"?: string;
11
11
  }
12
12
  /**
13
13
  * Builds props object containing top level data tags
14
14
  */
15
- declare function tagComponent(componentName: string | undefined, props: DataProps): TagProps;
15
+ declare function tagComponent(componentName: string | undefined, props: TagProps & RestProps): TagProps;
16
16
  export default tagComponent;
@@ -36,13 +36,13 @@ Alert.propTypes = {
36
36
  "disableFocusTrap": PropTypes.bool,
37
37
  "enableBackgroundUI": PropTypes.bool,
38
38
  "focusableContainers": PropTypes.arrayOf(PropTypes.shape({
39
- "current": PropTypes.oneOfType([PropTypes.oneOf([null]), function (props, propName) {
39
+ "current": function (props, propName) {
40
40
  if (props[propName] == null) {
41
- return new Error("Prop '" + propName + "' is required but wasn't specified");
41
+ return null;
42
42
  } else if (typeof props[propName] !== 'object' || props[propName].nodeType !== 1) {
43
43
  return new Error("Expected prop '" + propName + "' to be of type Element");
44
44
  }
45
- }]).isRequired
45
+ }
46
46
  })),
47
47
  "focusFirstElement": PropTypes.shape({
48
48
  "current": PropTypes.oneOfType([PropTypes.oneOf([null]), function (props, propName) {
@@ -3,6 +3,7 @@ import PropTypes from "prop-types";
3
3
  import { ThemeProvider } from "styled-components";
4
4
  import mintTheme from "../../style/themes/mint";
5
5
  import CarbonScopedTokensProvider from "../../style/design-tokens/carbon-scoped-tokens-provider";
6
+ import { TopModalContextProvider } from "./top-modal-context";
6
7
  export const NewValidationContext = /*#__PURE__*/createContext({});
7
8
 
8
9
  const CarbonProvider = ({
@@ -15,7 +16,7 @@ const CarbonProvider = ({
15
16
  value: {
16
17
  validationRedesignOptIn
17
18
  }
18
- }, children)));
19
+ }, /*#__PURE__*/React.createElement(TopModalContextProvider, null, children))));
19
20
 
20
21
  CarbonProvider.propTypes = {
21
22
  "children": PropTypes.node,
@@ -0,0 +1,9 @@
1
+ import React, { ReactNode } from "react";
2
+ declare type TopModalContextProps = {
3
+ topModal: HTMLElement | null;
4
+ };
5
+ declare const TopModalContext: React.Context<TopModalContextProps>;
6
+ export declare const TopModalContextProvider: ({ children, }: {
7
+ children: ReactNode;
8
+ }) => JSX.Element;
9
+ export default TopModalContext;
@@ -0,0 +1,36 @@
1
+ import React, { createContext, useState, useEffect, useRef } from "react";
2
+ const TopModalContext = /*#__PURE__*/createContext({
3
+ topModal: null
4
+ });
5
+ export const TopModalContextProvider = ({
6
+ children
7
+ }) => {
8
+ const [topModal, setTopModal] = useState(null); // can't add the setter to the global list inside useEffect because that doesn't run until
9
+ // after the render. We use a ref to ensure it only runs once.
10
+
11
+ const isFirstRender = useRef(true);
12
+
13
+ if (isFirstRender.current) {
14
+ if (!window.__CARBON_INTERNALS_MODAL_SETTER_LIST) {
15
+ window.__CARBON_INTERNALS_MODAL_SETTER_LIST = [];
16
+ }
17
+
18
+ window.__CARBON_INTERNALS_MODAL_SETTER_LIST.push(setTopModal);
19
+
20
+ isFirstRender.current = false;
21
+ }
22
+
23
+ useEffect(() => {
24
+ return () => {
25
+ var _window$__CARBON_INTE;
26
+
27
+ window.__CARBON_INTERNALS_MODAL_SETTER_LIST = (_window$__CARBON_INTE = window.__CARBON_INTERNALS_MODAL_SETTER_LIST) === null || _window$__CARBON_INTE === void 0 ? void 0 : _window$__CARBON_INTE.filter(setter => setter !== setTopModal);
28
+ };
29
+ }, []);
30
+ return /*#__PURE__*/React.createElement(TopModalContext.Provider, {
31
+ value: {
32
+ topModal
33
+ }
34
+ }, children);
35
+ };
36
+ export default TopModalContext;
@@ -0,0 +1,29 @@
1
+ import React from "react";
2
+ import { MarginProps } from "styled-system";
3
+ import { ValidationProps } from "../../__internal__/validations";
4
+ export interface CheckboxGroupProps extends ValidationProps, MarginProps {
5
+ /** The content for the CheckboxGroup Legend */
6
+ legend?: string;
7
+ /** When true, legend is placed inline with the checkboxes */
8
+ legendInline?: boolean;
9
+ /** Percentage width of legend (only when legend is inline) */
10
+ legendWidth?: number;
11
+ /** Text alignment of legend when inline */
12
+ legendAlign?: "left" | "right";
13
+ /** Spacing between legend and field for inline legend, number multiplied by base spacing unit (8) */
14
+ legendSpacing?: 1 | 2;
15
+ /** The Checkboxes to be rendered in the group */
16
+ children: React.ReactNode;
17
+ /** Spacing between label and a field for inline label, given number will be multiplied by base spacing unit (8) */
18
+ labelSpacing?: 1 | 2;
19
+ /** Flag to configure component as mandatory */
20
+ required?: boolean;
21
+ /** Overrides the default tooltip */
22
+ tooltipPosition?: "top" | "bottom" | "left" | "right";
23
+ }
24
+ export declare const CheckboxGroupContext: React.Context<ValidationProps>;
25
+ export declare const CheckboxGroup: {
26
+ (props: CheckboxGroupProps): JSX.Element;
27
+ displayName: string;
28
+ };
29
+ export default CheckboxGroup;
@@ -2,13 +2,11 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
2
2
 
3
3
  import React from "react";
4
4
  import PropTypes from "prop-types";
5
- import styledSystemPropTypes from "@styled-system/prop-types";
6
5
  import tagComponent from "../../__internal__/utils/helpers/tags/tags";
7
- import { StyledCheckboxGroup } from "./checkbox.style";
6
+ import StyledCheckboxGroup from "./checkbox-group.style";
8
7
  import Fieldset from "../../__internal__/fieldset";
9
8
  import { filterStyledSystemMarginProps } from "../../style/utils";
10
9
  import { TooltipProvider } from "../../__internal__/tooltip-provider";
11
- const marginPropTypes = filterStyledSystemMarginProps(styledSystemPropTypes.space);
12
10
  export const CheckboxGroupContext = /*#__PURE__*/React.createContext({});
13
11
 
14
12
  const CheckboxGroup = props => {
@@ -52,49 +50,173 @@ const CheckboxGroup = props => {
52
50
  };
53
51
 
54
52
  CheckboxGroup.propTypes = {
55
- /** Filtered styled system margin props */
56
- ...marginPropTypes,
57
-
58
- /** The content for the CheckboxGroup Legend */
59
- legend: PropTypes.string,
60
-
61
- /** When true, legend is placed in line with the checkboxes */
62
- legendInline: PropTypes.bool,
63
-
64
- /** Percentage width of legend (only when legend is inline) */
65
- legendWidth: PropTypes.number,
66
-
67
- /** Text alignment of legend when inline */
68
- legendAlign: PropTypes.oneOf(["left", "right"]),
69
-
70
- /** Spacing between legend and field for inline legend, number multiplied by base spacing unit (8) */
71
- legendSpacing: PropTypes.oneOf([1, 2]),
72
-
73
- /** The Checkboxes to be rendered in the group */
74
- children: PropTypes.node.isRequired,
75
-
76
- /** Indicate that error has occurred
77
- Pass string to display icon, tooltip and red border
78
- Pass true boolean to only display red border */
79
- error: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
80
-
81
- /** Indicate that warning has occurred
82
- Pass string to display icon, tooltip and orange border
83
- Pass true boolean to only display orange border */
84
- warning: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
85
-
86
- /** Indicate additional information
87
- Pass string to display icon, tooltip and blue border
88
- Pass true boolean to only display blue border */
89
- info: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
90
-
91
- /** Spacing between label and a field for inline label, given number will be multiplied by base spacing unit (8) */
92
- labelSpacing: PropTypes.oneOf([1, 2]),
93
-
94
- /** Flag to configure component as mandatory */
95
- required: PropTypes.bool,
96
-
97
- /** Overrides the default tooltip position */
98
- tooltipPosition: PropTypes.oneOf(["top", "bottom", "left", "right"])
53
+ "children": PropTypes.node,
54
+ "error": PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
55
+ "info": PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
56
+ "labelSpacing": PropTypes.oneOf([1, 2]),
57
+ "legend": PropTypes.string,
58
+ "legendAlign": PropTypes.oneOf(["left", "right"]),
59
+ "legendInline": PropTypes.bool,
60
+ "legendSpacing": PropTypes.oneOf([1, 2]),
61
+ "legendWidth": PropTypes.number,
62
+ "m": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
63
+ "__@toStringTag": PropTypes.string.isRequired,
64
+ "description": PropTypes.string,
65
+ "toString": PropTypes.func.isRequired,
66
+ "valueOf": PropTypes.func.isRequired
67
+ }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
68
+ "__@toStringTag": PropTypes.string.isRequired,
69
+ "description": PropTypes.string,
70
+ "toString": PropTypes.func.isRequired,
71
+ "valueOf": PropTypes.func.isRequired
72
+ }), PropTypes.string]),
73
+ "margin": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
74
+ "__@toStringTag": PropTypes.string.isRequired,
75
+ "description": PropTypes.string,
76
+ "toString": PropTypes.func.isRequired,
77
+ "valueOf": PropTypes.func.isRequired
78
+ }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
79
+ "__@toStringTag": PropTypes.string.isRequired,
80
+ "description": PropTypes.string,
81
+ "toString": PropTypes.func.isRequired,
82
+ "valueOf": PropTypes.func.isRequired
83
+ }), PropTypes.string]),
84
+ "marginBottom": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
85
+ "__@toStringTag": PropTypes.string.isRequired,
86
+ "description": PropTypes.string,
87
+ "toString": PropTypes.func.isRequired,
88
+ "valueOf": PropTypes.func.isRequired
89
+ }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
90
+ "__@toStringTag": PropTypes.string.isRequired,
91
+ "description": PropTypes.string,
92
+ "toString": PropTypes.func.isRequired,
93
+ "valueOf": PropTypes.func.isRequired
94
+ }), PropTypes.string]),
95
+ "marginLeft": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
96
+ "__@toStringTag": PropTypes.string.isRequired,
97
+ "description": PropTypes.string,
98
+ "toString": PropTypes.func.isRequired,
99
+ "valueOf": PropTypes.func.isRequired
100
+ }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
101
+ "__@toStringTag": PropTypes.string.isRequired,
102
+ "description": PropTypes.string,
103
+ "toString": PropTypes.func.isRequired,
104
+ "valueOf": PropTypes.func.isRequired
105
+ }), PropTypes.string]),
106
+ "marginRight": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
107
+ "__@toStringTag": PropTypes.string.isRequired,
108
+ "description": PropTypes.string,
109
+ "toString": PropTypes.func.isRequired,
110
+ "valueOf": PropTypes.func.isRequired
111
+ }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
112
+ "__@toStringTag": PropTypes.string.isRequired,
113
+ "description": PropTypes.string,
114
+ "toString": PropTypes.func.isRequired,
115
+ "valueOf": PropTypes.func.isRequired
116
+ }), PropTypes.string]),
117
+ "marginTop": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
118
+ "__@toStringTag": PropTypes.string.isRequired,
119
+ "description": PropTypes.string,
120
+ "toString": PropTypes.func.isRequired,
121
+ "valueOf": PropTypes.func.isRequired
122
+ }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
123
+ "__@toStringTag": PropTypes.string.isRequired,
124
+ "description": PropTypes.string,
125
+ "toString": PropTypes.func.isRequired,
126
+ "valueOf": PropTypes.func.isRequired
127
+ }), PropTypes.string]),
128
+ "marginX": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
129
+ "__@toStringTag": PropTypes.string.isRequired,
130
+ "description": PropTypes.string,
131
+ "toString": PropTypes.func.isRequired,
132
+ "valueOf": PropTypes.func.isRequired
133
+ }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
134
+ "__@toStringTag": PropTypes.string.isRequired,
135
+ "description": PropTypes.string,
136
+ "toString": PropTypes.func.isRequired,
137
+ "valueOf": PropTypes.func.isRequired
138
+ }), PropTypes.string]),
139
+ "marginY": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
140
+ "__@toStringTag": PropTypes.string.isRequired,
141
+ "description": PropTypes.string,
142
+ "toString": PropTypes.func.isRequired,
143
+ "valueOf": PropTypes.func.isRequired
144
+ }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
145
+ "__@toStringTag": PropTypes.string.isRequired,
146
+ "description": PropTypes.string,
147
+ "toString": PropTypes.func.isRequired,
148
+ "valueOf": PropTypes.func.isRequired
149
+ }), PropTypes.string]),
150
+ "mb": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
151
+ "__@toStringTag": PropTypes.string.isRequired,
152
+ "description": PropTypes.string,
153
+ "toString": PropTypes.func.isRequired,
154
+ "valueOf": PropTypes.func.isRequired
155
+ }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
156
+ "__@toStringTag": PropTypes.string.isRequired,
157
+ "description": PropTypes.string,
158
+ "toString": PropTypes.func.isRequired,
159
+ "valueOf": PropTypes.func.isRequired
160
+ }), PropTypes.string]),
161
+ "ml": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
162
+ "__@toStringTag": PropTypes.string.isRequired,
163
+ "description": PropTypes.string,
164
+ "toString": PropTypes.func.isRequired,
165
+ "valueOf": PropTypes.func.isRequired
166
+ }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
167
+ "__@toStringTag": PropTypes.string.isRequired,
168
+ "description": PropTypes.string,
169
+ "toString": PropTypes.func.isRequired,
170
+ "valueOf": PropTypes.func.isRequired
171
+ }), PropTypes.string]),
172
+ "mr": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
173
+ "__@toStringTag": PropTypes.string.isRequired,
174
+ "description": PropTypes.string,
175
+ "toString": PropTypes.func.isRequired,
176
+ "valueOf": PropTypes.func.isRequired
177
+ }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
178
+ "__@toStringTag": PropTypes.string.isRequired,
179
+ "description": PropTypes.string,
180
+ "toString": PropTypes.func.isRequired,
181
+ "valueOf": PropTypes.func.isRequired
182
+ }), PropTypes.string]),
183
+ "mt": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
184
+ "__@toStringTag": PropTypes.string.isRequired,
185
+ "description": PropTypes.string,
186
+ "toString": PropTypes.func.isRequired,
187
+ "valueOf": PropTypes.func.isRequired
188
+ }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
189
+ "__@toStringTag": PropTypes.string.isRequired,
190
+ "description": PropTypes.string,
191
+ "toString": PropTypes.func.isRequired,
192
+ "valueOf": PropTypes.func.isRequired
193
+ }), PropTypes.string]),
194
+ "mx": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
195
+ "__@toStringTag": PropTypes.string.isRequired,
196
+ "description": PropTypes.string,
197
+ "toString": PropTypes.func.isRequired,
198
+ "valueOf": PropTypes.func.isRequired
199
+ }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
200
+ "__@toStringTag": PropTypes.string.isRequired,
201
+ "description": PropTypes.string,
202
+ "toString": PropTypes.func.isRequired,
203
+ "valueOf": PropTypes.func.isRequired
204
+ }), PropTypes.string]),
205
+ "my": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
206
+ "__@toStringTag": PropTypes.string.isRequired,
207
+ "description": PropTypes.string,
208
+ "toString": PropTypes.func.isRequired,
209
+ "valueOf": PropTypes.func.isRequired
210
+ }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
211
+ "__@toStringTag": PropTypes.string.isRequired,
212
+ "description": PropTypes.string,
213
+ "toString": PropTypes.func.isRequired,
214
+ "valueOf": PropTypes.func.isRequired
215
+ }), PropTypes.string]),
216
+ "required": PropTypes.bool,
217
+ "tooltipPosition": PropTypes.oneOf(["bottom", "left", "right", "top"]),
218
+ "warning": PropTypes.oneOfType([PropTypes.string, PropTypes.bool])
99
219
  };
220
+ export { CheckboxGroup };
221
+ CheckboxGroup.displayName = "CheckboxGroup";
100
222
  export default CheckboxGroup;
@@ -0,0 +1,4 @@
1
+ declare const StyledCheckboxGroup: import("styled-components").StyledComponent<"div", any, {
2
+ legendInline?: boolean | undefined;
3
+ }, never>;
4
+ export default StyledCheckboxGroup;
@@ -0,0 +1,46 @@
1
+ import styled, { css } from "styled-components";
2
+ import StyledFormField from "../../__internal__/form-field/form-field.style";
3
+ import StyledIcon from "../icon/icon.style";
4
+ import CheckboxStyle from "./checkbox.style";
5
+ import { StyledLabelContainer } from "../../__internal__/label/label.style";
6
+ import StyledValidationIcon from "../../__internal__/validations/validation-icon.style";
7
+ const StyledCheckboxGroup = styled.div`
8
+ display: flex;
9
+ flex-direction: column;
10
+
11
+ ${StyledIcon}::before {
12
+ font-size: 16px;
13
+ }
14
+
15
+ && ${StyledFormField} {
16
+ margin: 0;
17
+ }
18
+
19
+ & ${CheckboxStyle} {
20
+ margin-bottom: var(--spacing150);
21
+
22
+ :last-of-type {
23
+ margin-bottom: 0;
24
+ }
25
+ }
26
+
27
+ & > ${StyledFormField} {
28
+ & > ${StyledLabelContainer} {
29
+ margin-bottom: 4px;
30
+ vertical-align: middle;
31
+
32
+ ${StyledValidationIcon} {
33
+ display: inline-block;
34
+ }
35
+ }
36
+ }
37
+
38
+ ${({
39
+ legendInline
40
+ }) => legendInline && css`
41
+ ${CheckboxStyle}:first-child {
42
+ padding-top: 4px;
43
+ }
44
+ `}
45
+ `;
46
+ export default StyledCheckboxGroup;
@@ -0,0 +1,3 @@
1
+ /// <reference types="react" />
2
+ declare const CheckboxSvg: () => JSX.Element;
3
+ export default CheckboxSvg;
@@ -1,17 +1,16 @@
1
1
  import React from "react";
2
+ import PropTypes from "prop-types";
2
3
  import StyledCheckableInputSvgWrapper from "../../__internal__/checkable-input/checkable-input-svg-wrapper.style";
3
4
 
4
- const CheckboxSvg = () => {
5
- return /*#__PURE__*/React.createElement(StyledCheckableInputSvgWrapper, null, /*#__PURE__*/React.createElement("svg", {
6
- focusable: "false",
7
- width: "12",
8
- height: "10",
9
- viewBox: "0 0 12 10"
10
- }, /*#__PURE__*/React.createElement("path", {
11
- d: "M.237 6.477A.752.752 0 0 1 .155 5.47l.851-1.092a.63.63 0 0 1 .934-.088l2.697 1.964, " + "4.674-6a.63.63 0 0 1 .933-.088l1.015.917c.28.254.317.703.081 1.005L6.353 8.492a.725.725, " + "0 0 1-.095.16l-.85 1.093a.637.637 0 0 1-.626.244.638.638 0 0 1-.335-.16L.237 6.476z",
12
- fill: "#FFFFFF",
13
- fillRule: "evenodd"
14
- })));
15
- };
5
+ const CheckboxSvg = () => /*#__PURE__*/React.createElement(StyledCheckableInputSvgWrapper, null, /*#__PURE__*/React.createElement("svg", {
6
+ focusable: "false",
7
+ width: "12",
8
+ height: "10",
9
+ viewBox: "0 0 12 10"
10
+ }, /*#__PURE__*/React.createElement("path", {
11
+ d: "M.237 6.477A.752.752 0 0 1 .155 5.47l.851-1.092a.63.63 0 0 1 .934-.088l2.697 1.964, " + "4.674-6a.63.63 0 0 1 .933-.088l1.015.917c.28.254.317.703.081 1.005L6.353 8.492a.725.725, " + "0 0 1-.095.16l-.85 1.093a.637.637 0 0 1-.626.244.638.638 0 0 1-.335-.16L.237 6.476z",
12
+ fill: "#FFFFFF",
13
+ fillRule: "evenodd"
14
+ })));
16
15
 
17
16
  export default CheckboxSvg;
@@ -0,0 +1,30 @@
1
+ import React from "react";
2
+ import { MarginProps } from "styled-system";
3
+ import { CommonCheckableInputProps } from "../../__internal__/checkable-input/checkable-input.component";
4
+ export interface CheckboxProps extends CommonCheckableInputProps, MarginProps {
5
+ /** Breakpoint for adaptive spacing (left margin changes to 0). Enables the adaptive behaviour when set */
6
+ adaptiveSpacingBreakpoint?: number;
7
+ /** Identifier used for testing purposes, applied to the root element of the component. */
8
+ "data-component"?: string;
9
+ /** Identifier used for testing purposes, applied to the root element of the component. */
10
+ "data-element"?: string;
11
+ /** Identifier used for testing purposes, applied to the root element of the component. */
12
+ "data-role"?: string;
13
+ /** Aria label for rendered help component */
14
+ helpAriaLabel?: string;
15
+ /** Text alignment of the label */
16
+ labelAlign?: "left" | "right";
17
+ /** When true label is inline */
18
+ labelInline?: boolean;
19
+ /** Accepts a callback function which is triggered on click event */
20
+ onClick?: (ev: React.MouseEvent<HTMLInputElement>) => void;
21
+ /** Overrides the default tooltip position */
22
+ tooltipPosition?: "top" | "bottom" | "left" | "right";
23
+ /** The value of the checkbox, passed on form submit */
24
+ value?: string;
25
+ }
26
+ export declare const Checkbox: {
27
+ ({ id, label, onChange, name, onClick, onBlur, onFocus, value, fieldHelp, autoFocus, labelHelp, labelSpacing, labelWidth, adaptiveSpacingBreakpoint, required, error, warning, info, fieldHelpInline, reverse, checked, disabled, inputWidth, size, tooltipPosition, "data-component": dataComponent, "data-element": dataElement, "data-role": dataRole, helpAriaLabel, ...props }: CheckboxProps): JSX.Element;
28
+ displayName: string;
29
+ };
30
+ export default Checkbox;