carbon-react 141.0.7 → 141.1.0

package/esm/components/popover-container/popover-container.component.js

@@ -1,5 +1,5 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-import React, { useCallback, useEffect, useRef, useState } from "react";
+import React, { useCallback, useEffect, useRef, useState, useMemo } from "react";
 import PropTypes from "prop-types";
 import { Transition } from "react-transition-group";
 import { flip, offset } from "@floating-ui/dom";
@@ -56,14 +56,14 @@ export const renderClose = ({
 })), /*#__PURE__*/React.createElement(Icon, {
   type: "close"
 }));
-function getPopoverMiddleware(shouldCoverButton) {
-  return [offset(shouldCoverButton ? ({
+function usePopoverMiddleware(shouldCoverButton) {
+  return useMemo(() => [offset(shouldCoverButton ? ({
     rects
   }) => ({
     mainAxis: -rects.reference.height
   }) : 6), flip({
     fallbackStrategy: "initialPlacement"
-  })];
+  })], [shouldCoverButton]);
 }
 export const PopoverContainer = ({
   children,
@@ -93,6 +93,7 @@ export const PopoverContainer = ({
   const popoverContainerId = title ? `PopoverContainer_${guid.current}` : undefined;
   const isOpen = isControlled ? open : isOpenInternal;
   const reduceMotion = !useMediaQuery("screen and (prefers-reduced-motion: no-preference)");
+  const popoverMiddleware = usePopoverMiddleware(shouldCoverButton);
   const closePopover = useCallback(ev => {
     if (!isControlled) {
       setIsOpenInternal(false);
@@ -198,7 +199,7 @@ export const PopoverContainer = ({
     reference: popoverReference,
     placement: position === "right" ? "bottom-start" : "bottom-end",
     popoverStrategy: disableAnimation || reduceMotion ? "fixed" : "absolute",
-    middleware: getPopoverMiddleware(shouldCoverButton),
+    middleware: popoverMiddleware,
     childRefOverride: popoverContentNodeRef
   }, childrenToRender(state))));
 };

package/esm/components/select/option-group-header/option-group-header.component.d.ts

@@ -9,7 +9,7 @@ export interface OptionGroupHeaderProps extends TagProps {
      */
     id?: string;
     /** Heading text */
-    label: string;
+    label?: string;
     /** Any valid Carbon icon name */
     icon?: IconProps["type"];
     /**
@@ -17,6 +17,11 @@ export interface OptionGroupHeaderProps extends TagProps {
      * @ignore
      * object containing CSS styles to be passed to the underlying DOM element */
     style?: CSSProperties;
+    /**
+     * Content to be rendered inside the OptionGroupHeader.
+     * When the `children` prop is passed it will take precedence over the `label` and
+     * `icon` props meaning they will not be rendered */
+    children?: React.ReactNode;
 }
 declare const OptionGroupHeader: React.ForwardRefExoticComponent<OptionGroupHeaderProps & React.RefAttributes<HTMLDivElement>>;
 export default OptionGroupHeader;

package/esm/components/select/option-group-header/option-group-header.component.js

@@ -9,26 +9,32 @@ const OptionGroupHeader = /*#__PURE__*/React.forwardRef(({
   icon,
   style,
   id,
+  children,
   ...rest
 }, ref) => {
   const internalIdRef = useRef(id || guid());
+  if (!(children || label)) {
+    // eslint-disable-next-line no-console
+    console.warn("OptionGroupHeader requires either a label or children to be provided");
+  }
   return /*#__PURE__*/React.createElement(StyledOptionGroupHeader, _extends({
     style: style,
     id: internalIdRef.current
   }, rest, {
     ref: ref
-  }), icon && /*#__PURE__*/React.createElement(Icon, {
+  }), children || /*#__PURE__*/React.createElement(React.Fragment, null, icon && /*#__PURE__*/React.createElement(Icon, {
     type: icon
-  }), /*#__PURE__*/React.createElement("h4", null, label));
+  }), /*#__PURE__*/React.createElement("h4", null, label)));
 });
 if (process.env.NODE_ENV !== "production") {
   OptionGroupHeader.propTypes = {
+    "children": PropTypes.node,
     "data-component": PropTypes.string,
     "data-element": PropTypes.string,
     "data-role": PropTypes.string,
     "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"]),
     "id": PropTypes.string,
-    "label": PropTypes.string.isRequired,
+    "label": PropTypes.string,
     "style": PropTypes.object
   };
 }

package/lib/components/popover-container/popover-container.component.js

@@ -67,14 +67,14 @@ const renderClose = ({
   type: "close"
 }));
 exports.renderClose = renderClose;
-function getPopoverMiddleware(shouldCoverButton) {
-  return [(0, _dom.offset)(shouldCoverButton ? ({
+function usePopoverMiddleware(shouldCoverButton) {
+  return (0, _react.useMemo)(() => [(0, _dom.offset)(shouldCoverButton ? ({
     rects
   }) => ({
     mainAxis: -rects.reference.height
   }) : 6), (0, _dom.flip)({
     fallbackStrategy: "initialPlacement"
-  })];
+  })], [shouldCoverButton]);
 }
 const PopoverContainer = ({
   children,
@@ -104,6 +104,7 @@ const PopoverContainer = ({
   const popoverContainerId = title ? `PopoverContainer_${guid.current}` : undefined;
   const isOpen = isControlled ? open : isOpenInternal;
   const reduceMotion = !(0, _useMediaQuery.default)("screen and (prefers-reduced-motion: no-preference)");
+  const popoverMiddleware = usePopoverMiddleware(shouldCoverButton);
   const closePopover = (0, _react.useCallback)(ev => {
     if (!isControlled) {
       setIsOpenInternal(false);
@@ -209,7 +210,7 @@ const PopoverContainer = ({
     reference: popoverReference,
     placement: position === "right" ? "bottom-start" : "bottom-end",
     popoverStrategy: disableAnimation || reduceMotion ? "fixed" : "absolute",
-    middleware: getPopoverMiddleware(shouldCoverButton),
+    middleware: popoverMiddleware,
     childRefOverride: popoverContentNodeRef
   }, childrenToRender(state))));
 };

package/lib/components/select/option-group-header/option-group-header.component.d.ts

@@ -9,7 +9,7 @@ export interface OptionGroupHeaderProps extends TagProps {
      */
     id?: string;
     /** Heading text */
-    label: string;
+    label?: string;
     /** Any valid Carbon icon name */
     icon?: IconProps["type"];
     /**
@@ -17,6 +17,11 @@ export interface OptionGroupHeaderProps extends TagProps {
      * @ignore
      * object containing CSS styles to be passed to the underlying DOM element */
     style?: CSSProperties;
+    /**
+     * Content to be rendered inside the OptionGroupHeader.
+     * When the `children` prop is passed it will take precedence over the `label` and
+     * `icon` props meaning they will not be rendered */
+    children?: React.ReactNode;
 }
 declare const OptionGroupHeader: React.ForwardRefExoticComponent<OptionGroupHeaderProps & React.RefAttributes<HTMLDivElement>>;
 export default OptionGroupHeader;

package/lib/components/select/option-group-header/option-group-header.component.js

@@ -18,26 +18,32 @@ const OptionGroupHeader = /*#__PURE__*/_react.default.forwardRef(({
   icon,
   style,
   id,
+  children,
   ...rest
 }, ref) => {
   const internalIdRef = (0, _react.useRef)(id || (0, _guid.default)());
+  if (!(children || label)) {
+    // eslint-disable-next-line no-console
+    console.warn("OptionGroupHeader requires either a label or children to be provided");
+  }
   return /*#__PURE__*/_react.default.createElement(_optionGroupHeader.default, _extends({
     style: style,
     id: internalIdRef.current
   }, rest, {
     ref: ref
-  }), icon && /*#__PURE__*/_react.default.createElement(_icon.default, {
+  }), children || /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, icon && /*#__PURE__*/_react.default.createElement(_icon.default, {
     type: icon
-  }), /*#__PURE__*/_react.default.createElement("h4", null, label));
+  }), /*#__PURE__*/_react.default.createElement("h4", null, label)));
 });
 if (process.env.NODE_ENV !== "production") {
   OptionGroupHeader.propTypes = {
+    "children": _propTypes.default.node,
     "data-component": _propTypes.default.string,
     "data-element": _propTypes.default.string,
     "data-role": _propTypes.default.string,
     "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"]),
     "id": _propTypes.default.string,
-    "label": _propTypes.default.string.isRequired,
+    "label": _propTypes.default.string,
     "style": _propTypes.default.object
   };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "141.0.7",
+  "version": "141.1.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",