carbon-react 141.0.8 → 141.1.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.
Files changed (5) hide show
  1. package/esm/components/select/option-group-header/option-group-header.component.d.ts +6 -1
  2. package/esm/components/select/option-group-header/option-group-header.component.js +9 -3
  3. package/lib/components/select/option-group-header/option-group-header.component.d.ts +6 -1
  4. package/lib/components/select/option-group-header/option-group-header.component.js +9 -3
  5. package/package.json +1 -1
package/esm/components/select/option-group-header/option-group-header.component.d.ts CHANGED
@@ -9,7 +9,7 @@ export interface OptionGroupHeaderProps extends TagProps {
9
9
  */
10
10
  id?: string;
11
11
  /** Heading text */
12
- label: string;
12
+ label?: string;
13
13
  /** Any valid Carbon icon name */
14
14
  icon?: IconProps["type"];
15
15
  /**
@@ -17,6 +17,11 @@ export interface OptionGroupHeaderProps extends TagProps {
17
17
  * @ignore
18
18
  * object containing CSS styles to be passed to the underlying DOM element */
19
19
  style?: CSSProperties;
20
+ /**
21
+ * Content to be rendered inside the OptionGroupHeader.
22
+ * When the `children` prop is passed it will take precedence over the `label` and
23
+ * `icon` props meaning they will not be rendered */
24
+ children?: React.ReactNode;
20
25
  }
21
26
  declare const OptionGroupHeader: React.ForwardRefExoticComponent<OptionGroupHeaderProps & React.RefAttributes<HTMLDivElement>>;
22
27
  export default OptionGroupHeader;
package/esm/components/select/option-group-header/option-group-header.component.js CHANGED
@@ -9,26 +9,32 @@ const OptionGroupHeader = /*#__PURE__*/React.forwardRef(({
9
9
  icon,
10
10
  style,
11
11
  id,
12
+ children,
12
13
  ...rest
13
14
  }, ref) => {
14
15
  const internalIdRef = useRef(id || guid());
16
+ if (!(children || label)) {
17
+ // eslint-disable-next-line no-console
18
+ console.warn("OptionGroupHeader requires either a label or children to be provided");
19
+ }
15
20
  return /*#__PURE__*/React.createElement(StyledOptionGroupHeader, _extends({
16
21
  style: style,
17
22
  id: internalIdRef.current
18
23
  }, rest, {
19
24
  ref: ref
20
- }), icon && /*#__PURE__*/React.createElement(Icon, {
25
+ }), children || /*#__PURE__*/React.createElement(React.Fragment, null, icon && /*#__PURE__*/React.createElement(Icon, {
21
26
  type: icon
22
- }), /*#__PURE__*/React.createElement("h4", null, label));
27
+ }), /*#__PURE__*/React.createElement("h4", null, label)));
23
28
  });
24
29
  if (process.env.NODE_ENV !== "production") {
25
30
  OptionGroupHeader.propTypes = {
31
+ "children": PropTypes.node,
26
32
  "data-component": PropTypes.string,
27
33
  "data-element": PropTypes.string,
28
34
  "data-role": PropTypes.string,
29
35
  "icon": PropTypes.oneOf(["accessibility_web", "add", "admin", "alert_on", "alert", "analysis", "app_facebook", "app_instagram", "app_tiktok", "app_twitter", "app_youtube", "apps", "arrow_bottom_right_circle", "arrow_down", "arrow_left_boxed", "arrow_left_right_small", "arrow_left_small", "arrow_left", "arrow_right_small", "arrow_right", "arrow_top_left_circle", "arrow_up", "arrow", "arrows_left_right", "attach", "bank_with_card", "bank", "basket_with_squares", "basket", "bed", "bill_paid", "bill_unpaid", "bin", "biometric", "block_arrow_right", "blocked_square", "blocked", "bold", "box_arrow_left", "box_arrow_right", "boxed_shapes", "bulk_destroy", "bullet_list_dotted", "bullet_list_numbers", "bullet_list", "business", "calendar_pay_date", "calendar_today", "calendar", "call", "camera", "car_lock", "car_money", "car_repair", "card_view", "card_wallet", "caret_down", "caret_large_down", "caret_large_left", "caret_large_right", "caret_large_up", "caret_left", "caret_right", "caret_up", "cart", "cash", "chart_bar", "chart_line", "chart_pie", "chat_notes", "chat", "check_all", "check_none", "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", "cloud_co2", "coins", "collaborate", "computer_clock", "connect_off", "connect", "construction", "contact_card", "contacts", "copy", "create", "credit_card_slash", "credit_card", "cross_circle", "cross", "csv", "dashboard", "delete", "delivery", "disconnect", "disputed", "document_right_align", "document_tick", "document_vertical_lines", "download", "draft", "drag_vertical", "drag", "drill", "dropdown", "duplicate", "edit", "edited", "ellipsis_horizontal", "ellipsis_vertical", "email_switch", "email", "entry", "envelope_dollar", "envelope_euro", "error_square", "error", "euro", "expand", "export", "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", "form_refresh", "gift", "go", "graduation_hat", "graph", "grid", "hand_cash_coins", "hand_cash_note", "heart_pulse", "help", "hide", "home", "image", "import", "in_progress", "in_transit", "individual", "info", "intranet", "italic", "job_seeked", "key", "laptop", "leaf", "ledger_arrow_left", "ledger_arrow_right", "ledger", "lightbulb_off", "lightbulb_on", "like_no", "like", "link_cloud", "link_on", "link", "list_view", "location", "locked", "logout", "lookup", "maintenance", "marker", "message", "messages", "microphone", "minimise", "minus_large", "minus", "mobile", "money_bag", "new", "none", "old_warning", "palm_tree", "pause_circle", "pause", "pdf", "people_switch", "people", "percentage_boxed", "person_info", "person_tick", "person", "petrol_pump", "phone", "piggy_bank", "pin", "plane", "play_circle", "play", "plus_large", "plus", "pound", "print", "progress", "progressed", "protect", "question_hollow", "question_mark", "question", "recruiting", "refresh_clock", "refresh", "remove", "sage_coin", "save", "scan", "search", "send", "services", "settings_old", "settings", "share", "shop", "sort_down", "sort_up", "spanner", "split_container", "split", "square_dot", "squares_nine", "stacked_boxes", "stacked_squares", "submitted", "success", "support_online", "sync", "tag", "talk", "target_man", "target", "theatre_masks", "three_boxes", "tick_circle", "tick_thick", "tick", "true_tick", "u_turn_left", "u_turn_right", "undo", "unlocked", "upload", "uploaded", "video", "view", "volunteering", "warning", "website", "welfare"]),
30
36
  "id": PropTypes.string,
31
- "label": PropTypes.string.isRequired,
37
+ "label": PropTypes.string,
32
38
  "style": PropTypes.object
33
39
  };
34
40
  }
package/lib/components/select/option-group-header/option-group-header.component.d.ts CHANGED
@@ -9,7 +9,7 @@ export interface OptionGroupHeaderProps extends TagProps {
9
9
  */
10
10
  id?: string;
11
11
  /** Heading text */
12
- label: string;
12
+ label?: string;
13
13
  /** Any valid Carbon icon name */
14
14
  icon?: IconProps["type"];
15
15
  /**
@@ -17,6 +17,11 @@ export interface OptionGroupHeaderProps extends TagProps {
17
17
  * @ignore
18
18
  * object containing CSS styles to be passed to the underlying DOM element */
19
19
  style?: CSSProperties;
20
+ /**
21
+ * Content to be rendered inside the OptionGroupHeader.
22
+ * When the `children` prop is passed it will take precedence over the `label` and
23
+ * `icon` props meaning they will not be rendered */
24
+ children?: React.ReactNode;
20
25
  }
21
26
  declare const OptionGroupHeader: React.ForwardRefExoticComponent<OptionGroupHeaderProps & React.RefAttributes<HTMLDivElement>>;
22
27
  export default OptionGroupHeader;
package/lib/components/select/option-group-header/option-group-header.component.js CHANGED
@@ -18,26 +18,32 @@ const OptionGroupHeader = /*#__PURE__*/_react.default.forwardRef(({
18
18
  icon,
19
19
  style,
20
20
  id,
21
+ children,
21
22
  ...rest
22
23
  }, ref) => {
23
24
  const internalIdRef = (0, _react.useRef)(id || (0, _guid.default)());
25
+ if (!(children || label)) {
26
+ // eslint-disable-next-line no-console
27
+ console.warn("OptionGroupHeader requires either a label or children to be provided");
28
+ }
24
29
  return /*#__PURE__*/_react.default.createElement(_optionGroupHeader.default, _extends({
25
30
  style: style,
26
31
  id: internalIdRef.current
27
32
  }, rest, {
28
33
  ref: ref
29
- }), icon && /*#__PURE__*/_react.default.createElement(_icon.default, {
34
+ }), children || /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, icon && /*#__PURE__*/_react.default.createElement(_icon.default, {
30
35
  type: icon
31
- }), /*#__PURE__*/_react.default.createElement("h4", null, label));
36
+ }), /*#__PURE__*/_react.default.createElement("h4", null, label)));
32
37
  });
33
38
  if (process.env.NODE_ENV !== "production") {
34
39
  OptionGroupHeader.propTypes = {
40
+ "children": _propTypes.default.node,
35
41
  "data-component": _propTypes.default.string,
36
42
  "data-element": _propTypes.default.string,
37
43
  "data-role": _propTypes.default.string,
38
44
  "icon": _propTypes.default.oneOf(["accessibility_web", "add", "admin", "alert_on", "alert", "analysis", "app_facebook", "app_instagram", "app_tiktok", "app_twitter", "app_youtube", "apps", "arrow_bottom_right_circle", "arrow_down", "arrow_left_boxed", "arrow_left_right_small", "arrow_left_small", "arrow_left", "arrow_right_small", "arrow_right", "arrow_top_left_circle", "arrow_up", "arrow", "arrows_left_right", "attach", "bank_with_card", "bank", "basket_with_squares", "basket", "bed", "bill_paid", "bill_unpaid", "bin", "biometric", "block_arrow_right", "blocked_square", "blocked", "bold", "box_arrow_left", "box_arrow_right", "boxed_shapes", "bulk_destroy", "bullet_list_dotted", "bullet_list_numbers", "bullet_list", "business", "calendar_pay_date", "calendar_today", "calendar", "call", "camera", "car_lock", "car_money", "car_repair", "card_view", "card_wallet", "caret_down", "caret_large_down", "caret_large_left", "caret_large_right", "caret_large_up", "caret_left", "caret_right", "caret_up", "cart", "cash", "chart_bar", "chart_line", "chart_pie", "chat_notes", "chat", "check_all", "check_none", "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", "cloud_co2", "coins", "collaborate", "computer_clock", "connect_off", "connect", "construction", "contact_card", "contacts", "copy", "create", "credit_card_slash", "credit_card", "cross_circle", "cross", "csv", "dashboard", "delete", "delivery", "disconnect", "disputed", "document_right_align", "document_tick", "document_vertical_lines", "download", "draft", "drag_vertical", "drag", "drill", "dropdown", "duplicate", "edit", "edited", "ellipsis_horizontal", "ellipsis_vertical", "email_switch", "email", "entry", "envelope_dollar", "envelope_euro", "error_square", "error", "euro", "expand", "export", "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", "form_refresh", "gift", "go", "graduation_hat", "graph", "grid", "hand_cash_coins", "hand_cash_note", "heart_pulse", "help", "hide", "home", "image", "import", "in_progress", "in_transit", "individual", "info", "intranet", "italic", "job_seeked", "key", "laptop", "leaf", "ledger_arrow_left", "ledger_arrow_right", "ledger", "lightbulb_off", "lightbulb_on", "like_no", "like", "link_cloud", "link_on", "link", "list_view", "location", "locked", "logout", "lookup", "maintenance", "marker", "message", "messages", "microphone", "minimise", "minus_large", "minus", "mobile", "money_bag", "new", "none", "old_warning", "palm_tree", "pause_circle", "pause", "pdf", "people_switch", "people", "percentage_boxed", "person_info", "person_tick", "person", "petrol_pump", "phone", "piggy_bank", "pin", "plane", "play_circle", "play", "plus_large", "plus", "pound", "print", "progress", "progressed", "protect", "question_hollow", "question_mark", "question", "recruiting", "refresh_clock", "refresh", "remove", "sage_coin", "save", "scan", "search", "send", "services", "settings_old", "settings", "share", "shop", "sort_down", "sort_up", "spanner", "split_container", "split", "square_dot", "squares_nine", "stacked_boxes", "stacked_squares", "submitted", "success", "support_online", "sync", "tag", "talk", "target_man", "target", "theatre_masks", "three_boxes", "tick_circle", "tick_thick", "tick", "true_tick", "u_turn_left", "u_turn_right", "undo", "unlocked", "upload", "uploaded", "video", "view", "volunteering", "warning", "website", "welfare"]),
39
45
  "id": _propTypes.default.string,
40
- "label": _propTypes.default.string.isRequired,
46
+ "label": _propTypes.default.string,
41
47
  "style": _propTypes.default.object
42
48
  };
43
49
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "carbon-react",
3
- "version": "141.0.8",
3
+ "version": "141.1.0",
4
4
  "description": "A library of reusable React components for easily building user interfaces.",
5
5
  "files": [
6
6
  "lib",