carbon-react 114.1.0 → 114.2.1

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.
@@ -14,10 +14,12 @@ export interface InlineInputsProps extends StyledContentContainerProps, StyledIn
14
14
  htmlFor?: string;
15
15
  /** Defines the label text for the heading. */
16
16
  label?: string;
17
+ /** Flag to configure component as mandatory. */
18
+ required?: boolean;
17
19
  }
18
20
  export declare const InlineInputsContext: React.Context<InlineInputsContextProps>;
19
21
  declare const InlineInputs: {
20
- ({ adaptiveLabelBreakpoint, label, htmlFor, children, className, gutter, inputWidth, labelInline, labelWidth, }: InlineInputsProps): JSX.Element;
22
+ ({ adaptiveLabelBreakpoint, label, htmlFor, children, className, gutter, inputWidth, labelInline, labelWidth, required, }: InlineInputsProps): JSX.Element;
21
23
  displayName: string;
22
24
  };
23
25
  export default InlineInputs;
@@ -28,7 +28,8 @@ const InlineInputs = ({
28
28
  gutter = "none",
29
29
  inputWidth,
30
30
  labelInline = true,
31
- labelWidth
31
+ labelWidth,
32
+ required
32
33
  }) => {
33
34
  const labelId = useRef(createGuid());
34
35
  const largeScreen = useIsAboveBreakpoint(adaptiveLabelBreakpoint);
@@ -43,7 +44,8 @@ const InlineInputs = ({
43
44
  return /*#__PURE__*/React.createElement(Label, {
44
45
  labelId: labelId.current,
45
46
  inline: inlineLabel,
46
- htmlFor: htmlFor
47
+ htmlFor: htmlFor,
48
+ isRequired: required
47
49
  }, label);
48
50
  }
49
51
 
@@ -69,7 +71,8 @@ InlineInputs.propTypes = {
69
71
  "inputWidth": PropTypes.number,
70
72
  "label": PropTypes.string,
71
73
  "labelInline": PropTypes.bool,
72
- "labelWidth": PropTypes.number
74
+ "labelWidth": PropTypes.number,
75
+ "required": PropTypes.bool
73
76
  };
74
77
  InlineInputs.displayName = "InlineInputs";
75
78
  export default InlineInputs;
@@ -60,7 +60,11 @@ const Note = ({
60
60
  width: width
61
61
  }, rest, {
62
62
  "data-component": "note"
63
- }), title && /*#__PURE__*/React.createElement(StyledTitle, null, title), inlineControl && /*#__PURE__*/React.createElement(StyledInlineControl, null, inlineControl), /*#__PURE__*/React.createElement(StyledNoteContent, null, /*#__PURE__*/React.createElement(Editor, {
63
+ }), title && /*#__PURE__*/React.createElement(StyledTitle, {
64
+ hasInlineControl: !!inlineControl
65
+ }, title), inlineControl && /*#__PURE__*/React.createElement(StyledInlineControl, null, inlineControl), /*#__PURE__*/React.createElement(StyledNoteContent, {
66
+ hasInlineControl: !!inlineControl
67
+ }, /*#__PURE__*/React.createElement(Editor, {
64
68
  readOnly: true,
65
69
  editorState: getDecoratedValue(noteContent),
66
70
  onChange:
@@ -70,7 +74,8 @@ const Note = ({
70
74
  as: "a",
71
75
  onClose: undefined
72
76
  }) : preview), createdDate && /*#__PURE__*/React.createElement(StyledNoteContent, {
73
- hasPreview: !!React.Children.count(previews)
77
+ hasPreview: !!React.Children.count(previews),
78
+ hasInlineControl: !!inlineControl
74
79
  }, /*#__PURE__*/React.createElement(StyledFooter, null, name && /*#__PURE__*/React.createElement(StyledFooterContent, {
75
80
  hasName: !!name
76
81
  }, name), /*#__PURE__*/React.createElement(StyledFooterContent, {
@@ -1,8 +1,11 @@
1
1
  declare const StyledNoteContent: import("styled-components").StyledComponent<"div", any, {
2
+ hasInlineControl: boolean;
2
3
  hasPreview?: boolean | undefined;
3
4
  }, never>;
4
5
  declare const StyledInlineControl: import("styled-components").StyledComponent<"div", any, {}, never>;
5
- declare const StyledTitle: import("styled-components").StyledComponent<"header", any, {}, never>;
6
+ declare const StyledTitle: import("styled-components").StyledComponent<"header", any, {
7
+ hasInlineControl: boolean;
8
+ }, never>;
6
9
  declare const StyledFooterContent: import("styled-components").StyledComponent<"div", any, {
7
10
  hasName: boolean;
8
11
  }, never>;
@@ -34,6 +34,10 @@ const StyledNoteContent = styled.div`
34
34
  margin-top: var(--spacing200);
35
35
  `}
36
36
  `}
37
+
38
+ ${({
39
+ hasInlineControl
40
+ }) => hasInlineControl && "margin-right: 24px;"}
37
41
  `;
38
42
  const StyledInlineControl = styled.div`
39
43
  position: absolute;
@@ -46,6 +50,10 @@ const StyledTitle = styled.header`
46
50
  font-size: 16px;
47
51
  line-height: 21px;
48
52
  padding-bottom: 16px;
53
+
54
+ ${({
55
+ hasInlineControl
56
+ }) => hasInlineControl && "margin-right: 24px;"}
49
57
  `;
50
58
  const StyledFooterContent = styled.div`
51
59
  line-height: 21px;
@@ -140,6 +140,10 @@ declare const _default: {
140
140
  colorsReadOnly400: string;
141
141
  colorsReadOnly500: string;
142
142
  colorsReadOnly600: string;
143
+ colorsComponentsLeftnavWinterStandardBackground: string;
144
+ colorsComponentsLeftnavWinterStandardHover: string;
145
+ colorsComponentsLeftnavWinterStandardSelected: string;
146
+ colorsComponentsLeftnavWinterStandardContent: string;
143
147
  colorsComponentsMenuSpringStandard500: string;
144
148
  colorsComponentsMenuSpringStandard600: string;
145
149
  colorsComponentsMenuSpringStandard700: string;
@@ -213,6 +217,7 @@ declare const _default: {
213
217
  colorsComponentsMenuYin090: string;
214
218
  colorsComponentsMenuYang100: string;
215
219
  colorsComponentsMenuYang080: string;
220
+ colorsComponentsMenuYang030: string;
216
221
  colorsComponentsMenuTransparent: string;
217
222
  sizing100: string;
218
223
  sizing125: string;
@@ -245,6 +250,7 @@ declare const _default: {
245
250
  spacing110: string;
246
251
  spacing125: string;
247
252
  spacing150: string;
253
+ spacing175: string;
248
254
  spacing200: string;
249
255
  spacing250: string;
250
256
  spacing300: string;
@@ -305,12 +311,12 @@ declare const _default: {
305
311
  fontFamiliesOther: string;
306
312
  borderRadius100: string;
307
313
  borderRadius200: string;
308
- borderRadius300: string;
309
314
  borderRadius400: string;
310
315
  borderRadiusCircle: string;
316
+ borderRadius000: string;
317
+ borderRadius010: string;
311
318
  borderRadius025: string;
312
319
  borderRadius050: string;
313
- borderRadius000: string;
314
320
  typographyAccordionTitleM: string;
315
321
  typographyAccordionTitleS: string;
316
322
  typographyAccordionSubtitleM: string;
@@ -396,6 +402,9 @@ declare const _default: {
396
402
  typographyMessageHeadingL: string;
397
403
  typographyMessageTextM: string;
398
404
  typographyMessageTextL: string;
405
+ typographyPageStateTitleM: string;
406
+ typographyPageStateSubtitleM: string;
407
+ typographyPageStateParagraphM: string;
399
408
  typographyPaginationLabelM: string;
400
409
  typographyPillLabelS: string;
401
410
  typographyPillLabelM: string;
@@ -140,6 +140,10 @@ declare var _default: {
140
140
  colorsReadOnly400: string;
141
141
  colorsReadOnly500: string;
142
142
  colorsReadOnly600: string;
143
+ colorsComponentsLeftnavWinterStandardBackground: string;
144
+ colorsComponentsLeftnavWinterStandardHover: string;
145
+ colorsComponentsLeftnavWinterStandardSelected: string;
146
+ colorsComponentsLeftnavWinterStandardContent: string;
143
147
  colorsComponentsMenuSpringStandard500: string;
144
148
  colorsComponentsMenuSpringStandard600: string;
145
149
  colorsComponentsMenuSpringStandard700: string;
@@ -213,6 +217,7 @@ declare var _default: {
213
217
  colorsComponentsMenuYin090: string;
214
218
  colorsComponentsMenuYang100: string;
215
219
  colorsComponentsMenuYang080: string;
220
+ colorsComponentsMenuYang030: string;
216
221
  colorsComponentsMenuTransparent: string;
217
222
  sizing100: string;
218
223
  sizing125: string;
@@ -245,6 +250,7 @@ declare var _default: {
245
250
  spacing110: string;
246
251
  spacing125: string;
247
252
  spacing150: string;
253
+ spacing175: string;
248
254
  spacing200: string;
249
255
  spacing250: string;
250
256
  spacing300: string;
@@ -305,12 +311,12 @@ declare var _default: {
305
311
  fontFamiliesOther: string;
306
312
  borderRadius100: string;
307
313
  borderRadius200: string;
308
- borderRadius300: string;
309
314
  borderRadius400: string;
310
315
  borderRadiusCircle: string;
316
+ borderRadius000: string;
317
+ borderRadius010: string;
311
318
  borderRadius025: string;
312
319
  borderRadius050: string;
313
- borderRadius000: string;
314
320
  typographyAccordionTitleM: string;
315
321
  typographyAccordionTitleS: string;
316
322
  typographyAccordionSubtitleM: string;
@@ -396,6 +402,9 @@ declare var _default: {
396
402
  typographyMessageHeadingL: string;
397
403
  typographyMessageTextM: string;
398
404
  typographyMessageTextL: string;
405
+ typographyPageStateTitleM: string;
406
+ typographyPageStateSubtitleM: string;
407
+ typographyPageStateParagraphM: string;
399
408
  typographyPaginationLabelM: string;
400
409
  typographyPillLabelS: string;
401
410
  typographyPillLabelM: string;
@@ -14,10 +14,12 @@ export interface InlineInputsProps extends StyledContentContainerProps, StyledIn
14
14
  htmlFor?: string;
15
15
  /** Defines the label text for the heading. */
16
16
  label?: string;
17
+ /** Flag to configure component as mandatory. */
18
+ required?: boolean;
17
19
  }
18
20
  export declare const InlineInputsContext: React.Context<InlineInputsContextProps>;
19
21
  declare const InlineInputs: {
20
- ({ adaptiveLabelBreakpoint, label, htmlFor, children, className, gutter, inputWidth, labelInline, labelWidth, }: InlineInputsProps): JSX.Element;
22
+ ({ adaptiveLabelBreakpoint, label, htmlFor, children, className, gutter, inputWidth, labelInline, labelWidth, required, }: InlineInputsProps): JSX.Element;
21
23
  displayName: string;
22
24
  };
23
25
  export default InlineInputs;
@@ -49,7 +49,8 @@ const InlineInputs = ({
49
49
  gutter = "none",
50
50
  inputWidth,
51
51
  labelInline = true,
52
- labelWidth
52
+ labelWidth,
53
+ required
53
54
  }) => {
54
55
  const labelId = (0, _react.useRef)((0, _guid.default)());
55
56
  const largeScreen = (0, _useIsAboveBreakpoint.default)(adaptiveLabelBreakpoint);
@@ -64,7 +65,8 @@ const InlineInputs = ({
64
65
  return /*#__PURE__*/_react.default.createElement(_label.default, {
65
66
  labelId: labelId.current,
66
67
  inline: inlineLabel,
67
- htmlFor: htmlFor
68
+ htmlFor: htmlFor,
69
+ isRequired: required
68
70
  }, label);
69
71
  }
70
72
 
@@ -90,7 +92,8 @@ InlineInputs.propTypes = {
90
92
  "inputWidth": _propTypes.default.number,
91
93
  "label": _propTypes.default.string,
92
94
  "labelInline": _propTypes.default.bool,
93
- "labelWidth": _propTypes.default.number
95
+ "labelWidth": _propTypes.default.number,
96
+ "required": _propTypes.default.bool
94
97
  };
95
98
  InlineInputs.displayName = "InlineInputs";
96
99
  var _default = InlineInputs;
@@ -78,7 +78,11 @@ const Note = ({
78
78
  width: width
79
79
  }, rest, {
80
80
  "data-component": "note"
81
- }), title && /*#__PURE__*/_react.default.createElement(_note.StyledTitle, null, title), inlineControl && /*#__PURE__*/_react.default.createElement(_note.StyledInlineControl, null, inlineControl), /*#__PURE__*/_react.default.createElement(_note.StyledNoteContent, null, /*#__PURE__*/_react.default.createElement(_draftJs.Editor, {
81
+ }), title && /*#__PURE__*/_react.default.createElement(_note.StyledTitle, {
82
+ hasInlineControl: !!inlineControl
83
+ }, title), inlineControl && /*#__PURE__*/_react.default.createElement(_note.StyledInlineControl, null, inlineControl), /*#__PURE__*/_react.default.createElement(_note.StyledNoteContent, {
84
+ hasInlineControl: !!inlineControl
85
+ }, /*#__PURE__*/_react.default.createElement(_draftJs.Editor, {
82
86
  readOnly: true,
83
87
  editorState: (0, _utils.getDecoratedValue)(noteContent),
84
88
  onChange:
@@ -88,7 +92,8 @@ const Note = ({
88
92
  as: "a",
89
93
  onClose: undefined
90
94
  }) : preview), createdDate && /*#__PURE__*/_react.default.createElement(_note.StyledNoteContent, {
91
- hasPreview: !!_react.default.Children.count(previews)
95
+ hasPreview: !!_react.default.Children.count(previews),
96
+ hasInlineControl: !!inlineControl
92
97
  }, /*#__PURE__*/_react.default.createElement(_note.StyledFooter, null, name && /*#__PURE__*/_react.default.createElement(_note.StyledFooterContent, {
93
98
  hasName: !!name
94
99
  }, name), /*#__PURE__*/_react.default.createElement(_note.StyledFooterContent, {
@@ -1,8 +1,11 @@
1
1
  declare const StyledNoteContent: import("styled-components").StyledComponent<"div", any, {
2
+ hasInlineControl: boolean;
2
3
  hasPreview?: boolean | undefined;
3
4
  }, never>;
4
5
  declare const StyledInlineControl: import("styled-components").StyledComponent<"div", any, {}, never>;
5
- declare const StyledTitle: import("styled-components").StyledComponent<"header", any, {}, never>;
6
+ declare const StyledTitle: import("styled-components").StyledComponent<"header", any, {
7
+ hasInlineControl: boolean;
8
+ }, never>;
6
9
  declare const StyledFooterContent: import("styled-components").StyledComponent<"div", any, {
7
10
  hasName: boolean;
8
11
  }, never>;
@@ -51,6 +51,10 @@ const StyledNoteContent = _styledComponents.default.div`
51
51
  margin-top: var(--spacing200);
52
52
  `}
53
53
  `}
54
+
55
+ ${({
56
+ hasInlineControl
57
+ }) => hasInlineControl && "margin-right: 24px;"}
54
58
  `;
55
59
  exports.StyledNoteContent = StyledNoteContent;
56
60
  const StyledInlineControl = _styledComponents.default.div`
@@ -65,6 +69,10 @@ const StyledTitle = _styledComponents.default.header`
65
69
  font-size: 16px;
66
70
  line-height: 21px;
67
71
  padding-bottom: 16px;
72
+
73
+ ${({
74
+ hasInlineControl
75
+ }) => hasInlineControl && "margin-right: 24px;"}
68
76
  `;
69
77
  exports.StyledTitle = StyledTitle;
70
78
  const StyledFooterContent = _styledComponents.default.div`
@@ -140,6 +140,10 @@ declare const _default: {
140
140
  colorsReadOnly400: string;
141
141
  colorsReadOnly500: string;
142
142
  colorsReadOnly600: string;
143
+ colorsComponentsLeftnavWinterStandardBackground: string;
144
+ colorsComponentsLeftnavWinterStandardHover: string;
145
+ colorsComponentsLeftnavWinterStandardSelected: string;
146
+ colorsComponentsLeftnavWinterStandardContent: string;
143
147
  colorsComponentsMenuSpringStandard500: string;
144
148
  colorsComponentsMenuSpringStandard600: string;
145
149
  colorsComponentsMenuSpringStandard700: string;
@@ -213,6 +217,7 @@ declare const _default: {
213
217
  colorsComponentsMenuYin090: string;
214
218
  colorsComponentsMenuYang100: string;
215
219
  colorsComponentsMenuYang080: string;
220
+ colorsComponentsMenuYang030: string;
216
221
  colorsComponentsMenuTransparent: string;
217
222
  sizing100: string;
218
223
  sizing125: string;
@@ -245,6 +250,7 @@ declare const _default: {
245
250
  spacing110: string;
246
251
  spacing125: string;
247
252
  spacing150: string;
253
+ spacing175: string;
248
254
  spacing200: string;
249
255
  spacing250: string;
250
256
  spacing300: string;
@@ -305,12 +311,12 @@ declare const _default: {
305
311
  fontFamiliesOther: string;
306
312
  borderRadius100: string;
307
313
  borderRadius200: string;
308
- borderRadius300: string;
309
314
  borderRadius400: string;
310
315
  borderRadiusCircle: string;
316
+ borderRadius000: string;
317
+ borderRadius010: string;
311
318
  borderRadius025: string;
312
319
  borderRadius050: string;
313
- borderRadius000: string;
314
320
  typographyAccordionTitleM: string;
315
321
  typographyAccordionTitleS: string;
316
322
  typographyAccordionSubtitleM: string;
@@ -396,6 +402,9 @@ declare const _default: {
396
402
  typographyMessageHeadingL: string;
397
403
  typographyMessageTextM: string;
398
404
  typographyMessageTextL: string;
405
+ typographyPageStateTitleM: string;
406
+ typographyPageStateSubtitleM: string;
407
+ typographyPageStateParagraphM: string;
399
408
  typographyPaginationLabelM: string;
400
409
  typographyPillLabelS: string;
401
410
  typographyPillLabelM: string;
@@ -140,6 +140,10 @@ declare var _default: {
140
140
  colorsReadOnly400: string;
141
141
  colorsReadOnly500: string;
142
142
  colorsReadOnly600: string;
143
+ colorsComponentsLeftnavWinterStandardBackground: string;
144
+ colorsComponentsLeftnavWinterStandardHover: string;
145
+ colorsComponentsLeftnavWinterStandardSelected: string;
146
+ colorsComponentsLeftnavWinterStandardContent: string;
143
147
  colorsComponentsMenuSpringStandard500: string;
144
148
  colorsComponentsMenuSpringStandard600: string;
145
149
  colorsComponentsMenuSpringStandard700: string;
@@ -213,6 +217,7 @@ declare var _default: {
213
217
  colorsComponentsMenuYin090: string;
214
218
  colorsComponentsMenuYang100: string;
215
219
  colorsComponentsMenuYang080: string;
220
+ colorsComponentsMenuYang030: string;
216
221
  colorsComponentsMenuTransparent: string;
217
222
  sizing100: string;
218
223
  sizing125: string;
@@ -245,6 +250,7 @@ declare var _default: {
245
250
  spacing110: string;
246
251
  spacing125: string;
247
252
  spacing150: string;
253
+ spacing175: string;
248
254
  spacing200: string;
249
255
  spacing250: string;
250
256
  spacing300: string;
@@ -305,12 +311,12 @@ declare var _default: {
305
311
  fontFamiliesOther: string;
306
312
  borderRadius100: string;
307
313
  borderRadius200: string;
308
- borderRadius300: string;
309
314
  borderRadius400: string;
310
315
  borderRadiusCircle: string;
316
+ borderRadius000: string;
317
+ borderRadius010: string;
311
318
  borderRadius025: string;
312
319
  borderRadius050: string;
313
- borderRadius000: string;
314
320
  typographyAccordionTitleM: string;
315
321
  typographyAccordionTitleS: string;
316
322
  typographyAccordionSubtitleM: string;
@@ -396,6 +402,9 @@ declare var _default: {
396
402
  typographyMessageHeadingL: string;
397
403
  typographyMessageTextM: string;
398
404
  typographyMessageTextL: string;
405
+ typographyPageStateTitleM: string;
406
+ typographyPageStateSubtitleM: string;
407
+ typographyPageStateParagraphM: string;
399
408
  typographyPaginationLabelM: string;
400
409
  typographyPillLabelS: string;
401
410
  typographyPillLabelM: string;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "carbon-react",
3
- "version": "114.1.0",
3
+ "version": "114.2.1",
4
4
  "description": "A library of reusable React components for easily building user interfaces.",
5
5
  "files": [
6
6
  "lib",
@@ -44,7 +44,7 @@
44
44
  },
45
45
  "homepage": "https://carbon.sage.com",
46
46
  "peerDependencies": {
47
- "@sage/design-tokens": "^2.52.0",
47
+ "@sage/design-tokens": "^2.65.0",
48
48
  "draft-js": "^0.11.5",
49
49
  "react": "^17.0.2",
50
50
  "react-dom": "^17.0.2",
@@ -62,7 +62,7 @@
62
62
  "@babel/types": "^7.16.0",
63
63
  "@commitlint/cli": "^11.0.0",
64
64
  "@commitlint/config-conventional": "^11.0.0",
65
- "@sage/design-tokens": "^2.52.0",
65
+ "@sage/design-tokens": "^2.65.0",
66
66
  "@semantic-release/changelog": "^6.0.1",
67
67
  "@semantic-release/exec": "^6.0.2",
68
68
  "@semantic-release/git": "^10.0.1",