@czi-sds/components 21.3.0 → 21.5.0

package/dist/index.cjs.d.ts

@@ -447,7 +447,7 @@ interface IconNameToSizes {
     BarChartHorizontal3: "xs" | "s";
     BarChartVertical3: "xs" | "s";
     BarChartVertical4: "xs" | "s";
-    Book: "l" | "xl";
+    Book: "xs" | "s" | "l" | "xl";
     Check: "xs" | "s";
     CheckCircle: "xs" | "s" | "l" | "xl";
     ChevronDown: "xs" | "s" | "l" | "xl";
@@ -628,7 +628,7 @@ type MenuItemProps<IconName extends keyof IconNameToSmallSizes> = MenuItemExtraP
 /**
  * @see https://mui.com/material-ui/react-menu/
  */
-declare const MenuItem: React.ForwardRefExoticComponent<Omit<MenuItemProps<"Bacteria" | "BarChartHorizontal3" | "BarChartVertical3" | "BarChartVertical4" | "Check" | "CheckCircle" | "ChevronDown" | "ChevronDown2" | "ChevronLeft2" | "ChevronLeft" | "ChevronRight2" | "ChevronRight" | "ChevronUp" | "ChevronUp2" | "CirclesOverlap2" | "Code" | "Copy" | "Cube" | "Document" | "DotsHorizontal" | "Download" | "Edit" | "Envelope" | "ExclamationMarkCircle" | "EyeClosed" | "EyeOpen" | "Filter" | "FlagCheck" | "FlagOutline" | "FlagQuestionMark" | "FlagXMark" | "Gear" | "Globe" | "House" | "InfoCircle" | "LifeRing" | "LightBulb" | "LinesDashed3Solid1" | "LinesHorizontal3" | "Link" | "List" | "Loading" | "Lock" | "LockCircle" | "Minus" | "Open" | "People" | "Percentage" | "Person" | "Pin" | "PinLocation" | "Plus" | "PlusCircle" | "PuzzlePiece" | "Refresh" | "RotateLeft" | "RotateRight" | "Scale" | "Search" | "SearchLinesHorizontal3" | "Starburst" | "Table" | "ThumbsDown" | "ThumbsUp" | "TrashCan" | "TreeHorizontal" | "TreeVertical" | "TriangleDown" | "TriangleLeft" | "TriangleRight" | "TriangleUp" | "XMark" | "XMarkCircle">, "ref"> & React.RefAttributes<HTMLLIElement | null>>;
+declare const MenuItem: React.ForwardRefExoticComponent<Omit<MenuItemProps<"Bacteria" | "BarChartHorizontal3" | "BarChartVertical3" | "BarChartVertical4" | "Book" | "Check" | "CheckCircle" | "ChevronDown" | "ChevronDown2" | "ChevronLeft2" | "ChevronLeft" | "ChevronRight2" | "ChevronRight" | "ChevronUp" | "ChevronUp2" | "CirclesOverlap2" | "Code" | "Copy" | "Cube" | "Document" | "DotsHorizontal" | "Download" | "Edit" | "Envelope" | "ExclamationMarkCircle" | "EyeClosed" | "EyeOpen" | "Filter" | "FlagCheck" | "FlagOutline" | "FlagQuestionMark" | "FlagXMark" | "Gear" | "Globe" | "House" | "InfoCircle" | "LifeRing" | "LightBulb" | "LinesDashed3Solid1" | "LinesHorizontal3" | "Link" | "List" | "Loading" | "Lock" | "LockCircle" | "Minus" | "Open" | "People" | "Percentage" | "Person" | "Pin" | "PinLocation" | "Plus" | "PlusCircle" | "PuzzlePiece" | "Refresh" | "RotateLeft" | "RotateRight" | "Scale" | "Search" | "SearchLinesHorizontal3" | "Starburst" | "Table" | "ThumbsDown" | "ThumbsUp" | "TrashCan" | "TreeHorizontal" | "TreeVertical" | "TriangleDown" | "TriangleLeft" | "TriangleRight" | "TriangleUp" | "XMark" | "XMarkCircle">, "ref"> & React.RefAttributes<HTMLLIElement | null>>;
 interface StyleProps extends CommonThemeProps {
     count?: number;
     icon?: ReactElement;
@@ -1365,17 +1365,17 @@ declare const Panel: React.ForwardRefExoticComponent<(Omit<BasicPanelProps, "ref
 // one prop is array of objects: with icon name and tooltip text. They need to make
 // first item in array first button, etc
 interface SingleButtonDefinition {
+    disabled?: boolean;
     icon: keyof IconNameToSizes | React.ReactElement<CustomSVGProps>;
     tooltipText?: string;
     value: string;
 }
-interface SegmentedControlExtraProps extends ToggleButtonGroupProps {
+interface SegmentedControlProps extends ToggleButtonGroupProps {
     buttonDefinition: SingleButtonDefinition[];
 }
 /**
  * @see https://mui.com/material-ui/react-toggle-button/
  */
-type SegmentedControlProps = SegmentedControlExtraProps & ToggleButtonGroupProps;
 declare const SegmentedControl: (props: SegmentedControlProps) => import("react/jsx-runtime").JSX.Element;
 interface SdsTableProps {
     children: React.ReactNode;

package/dist/index.cjs.js

@@ -1330,14 +1330,14 @@ var StyledSubtitle = styled("p")(templateObject_4$o || (templateObject_4$o = __m
 });
 var templateObject_1$V, templateObject_2$A, templateObject_3$s, templateObject_4$o;
 
-var _path$2a, _path2$D, _path3$6;
-function _extends$2f() { _extends$2f = 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$2f.apply(this, arguments); }
+var _path$2b, _path2$D, _path3$6;
+function _extends$2g() { _extends$2g = 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$2g.apply(this, arguments); }
 var SvgIconBacteriaLarge = function SvgIconBacteriaLarge(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$2f({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$2g({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24
-  }, props), _path$2a || (_path$2a = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$2b || (_path$2b = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     d: "M12.205 14.698a1.956 1.956 0 1 1-3.911 0 1.956 1.956 0 0 1 3.911 0m-1.955.756a.756.756 0 1 0 0-1.512.756.756 0 0 0 0 1.512"
   })), _path2$D || (_path2$D = /*#__PURE__*/React__namespace.createElement("path", {
@@ -1348,14 +1348,14 @@ var SvgIconBacteriaLarge = function SvgIconBacteriaLarge(props) {
   })));
 };
 
-var _path$29, _path2$C;
-function _extends$2e() { _extends$2e = 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$2e.apply(this, arguments); }
+var _path$2a, _path2$C;
+function _extends$2f() { _extends$2f = 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$2f.apply(this, arguments); }
 var SvgIconBacteriaSmall = function SvgIconBacteriaSmall(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$2e({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$2f({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16
-  }, props), _path$29 || (_path$29 = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$2a || (_path$2a = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M7.766 7.265a1.484 1.484 0 1 0-.001-2.968 1.484 1.484 0 0 0 .001 2.968m-1.725 4.287a1.478 1.478 0 1 0-.001-2.955 1.478 1.478 0 0 0 .001 2.955"
   })), _path2$C || (_path2$C = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
@@ -1363,54 +1363,68 @@ var SvgIconBacteriaSmall = function SvgIconBacteriaSmall(props) {
   })));
 };
 
+var _path$29;
+function _extends$2e() { _extends$2e = 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$2e.apply(this, arguments); }
+var SvgIconBarChartHorizontal3Small = function SvgIconBarChartHorizontal3Small(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$2e({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16
+  }, props), _path$29 || (_path$29 = /*#__PURE__*/React__namespace.createElement("path", {
+    fillRule: "evenodd",
+    d: "M1.143 2.434c0-.63.512-1.143 1.143-1.143H9.6c.631 0 1.143.512 1.143 1.143v.857c0 .632-.512 1.143-1.143 1.143H2.286a1.143 1.143 0 0 1-1.143-1.143zm0 5.143c0-.63.512-1.143 1.143-1.143h11.428c.631 0 1.143.512 1.143 1.143v.857c0 .632-.511 1.143-1.143 1.143H2.286a1.143 1.143 0 0 1-1.143-1.143zm0 5.143c0-.63.512-1.143 1.143-1.143h3.2c.63 0 1.142.512 1.142 1.143v.857c0 .632-.511 1.143-1.143 1.143h-3.2a1.143 1.143 0 0 1-1.142-1.143z"
+  })));
+};
+
 var _path$28;
 function _extends$2d() { _extends$2d = 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$2d.apply(this, arguments); }
-var SvgIconBarChartHorizontal3Small = function SvgIconBarChartHorizontal3Small(props) {
+var SvgIconBarChartVertical3Small = function SvgIconBarChartVertical3Small(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$2d({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16
   }, props), _path$28 || (_path$28 = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
-    d: "M1.143 2.434c0-.63.512-1.143 1.143-1.143H9.6c.631 0 1.143.512 1.143 1.143v.857c0 .632-.512 1.143-1.143 1.143H2.286a1.143 1.143 0 0 1-1.143-1.143zm0 5.143c0-.63.512-1.143 1.143-1.143h11.428c.631 0 1.143.512 1.143 1.143v.857c0 .632-.511 1.143-1.143 1.143H2.286a1.143 1.143 0 0 1-1.143-1.143zm0 5.143c0-.63.512-1.143 1.143-1.143h3.2c.63 0 1.142.512 1.142 1.143v.857c0 .632-.511 1.143-1.143 1.143h-3.2a1.143 1.143 0 0 1-1.142-1.143z"
+    d: "M1.291 13.714V6.4c0-.631.512-1.143 1.143-1.143h.857c.632 0 1.143.512 1.143 1.143v7.314c0 .631-.511 1.143-1.143 1.143h-.857a1.143 1.143 0 0 1-1.143-1.143m5.143 0V2.286c0-.631.512-1.143 1.143-1.143h.857c.632 0 1.143.512 1.143 1.143v11.428c0 .631-.511 1.143-1.143 1.143h-.857a1.143 1.143 0 0 1-1.143-1.143m5.143 0v-3.2c0-.63.512-1.142 1.143-1.142h.857c.632 0 1.143.511 1.143 1.143v3.2c0 .63-.511 1.142-1.143 1.142h-.857a1.143 1.143 0 0 1-1.143-1.143"
   })));
 };
 
 var _path$27;
 function _extends$2c() { _extends$2c = 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$2c.apply(this, arguments); }
-var SvgIconBarChartVertical3Small = function SvgIconBarChartVertical3Small(props) {
+var SvgIconBarChartVertical4Small = function SvgIconBarChartVertical4Small(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$2c({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16
   }, props), _path$27 || (_path$27 = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
-    d: "M1.291 13.714V6.4c0-.631.512-1.143 1.143-1.143h.857c.632 0 1.143.512 1.143 1.143v7.314c0 .631-.511 1.143-1.143 1.143h-.857a1.143 1.143 0 0 1-1.143-1.143m5.143 0V2.286c0-.631.512-1.143 1.143-1.143h.857c.632 0 1.143.512 1.143 1.143v11.428c0 .631-.511 1.143-1.143 1.143h-.857a1.143 1.143 0 0 1-1.143-1.143m5.143 0v-3.2c0-.63.512-1.142 1.143-1.142h.857c.632 0 1.143.511 1.143 1.143v3.2c0 .63-.511 1.142-1.143 1.142h-.857a1.143 1.143 0 0 1-1.143-1.143"
+    d: "M6.412 3.094c.545 0 .987.442.987.987v9.96a.987.987 0 1 1-1.974 0v-9.96c0-.545.442-.987.987-.987m-3.14 2.549c.546 0 .988.442.988.987v7.399a.987.987 0 0 1-1.974 0v-7.4c0-.544.442-.986.987-.986Zm6.28-4.614c.545 0 .986.441.986.986V14.03a.987.987 0 1 1-1.973 0V2.015c0-.545.441-.986.987-.986m3.139 4.823c.545 0 .987.442.987.987v7.19a.987.987 0 0 1-1.974 0v-7.19c0-.545.442-.987.987-.987"
   })));
 };
 
 var _path$26;
 function _extends$2b() { _extends$2b = 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$2b.apply(this, arguments); }
-var SvgIconBarChartVertical4Small = function SvgIconBarChartVertical4Small(props) {
+var SvgIconBookLarge = function SvgIconBookLarge(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$2b({
     xmlns: "http://www.w3.org/2000/svg",
-    width: 16,
-    height: 16
+    width: 24,
+    height: 24
   }, props), _path$26 || (_path$26 = /*#__PURE__*/React__namespace.createElement("path", {
-    fillRule: "evenodd",
-    d: "M6.412 3.094c.545 0 .987.442.987.987v9.96a.987.987 0 1 1-1.974 0v-9.96c0-.545.442-.987.987-.987m-3.14 2.549c.546 0 .988.442.988.987v7.399a.987.987 0 0 1-1.974 0v-7.4c0-.544.442-.986.987-.986Zm6.28-4.614c.545 0 .986.441.986.986V14.03a.987.987 0 1 1-1.973 0V2.015c0-.545.441-.986.987-.986m3.139 4.823c.545 0 .987.442.987.987v7.19a.987.987 0 0 1-1.974 0v-7.19c0-.545.442-.987.987-.987"
+    d: "M18.897 1.55H5.867a3.04 3.04 0 0 0-3.042 3.04v14.948a1 1 0 0 0 .025.122 3.04 3.04 0 0 0 3.016 2.798h13.03a2.28 2.28 0 0 0 2.281-2.28V3.83a2.28 2.28 0 0 0-2.28-2.28m.76 2.28v12.668H8.238V3.07h10.659a.76.76 0 0 1 .76.76m-13.79-.76h.85v13.428h-.85a3 3 0 0 0-1.521.423V4.591a1.52 1.52 0 0 1 1.52-1.521Zm13.03 17.868H5.867a1.462 1.462 0 1 1 0-2.92h13.79v2.16c0 .42-.34.76-.76.76M10.896 6.226c0-.42.34-.76.76-.76h4.583a.76.76 0 1 1 0 1.52h-4.583a.76.76 0 0 1-.76-.76"
   })));
 };
 
 var _path$25;
 function _extends$2a() { _extends$2a = 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$2a.apply(this, arguments); }
-var SvgIconBookLarge = function SvgIconBookLarge(props) {
+var SvgIconBookSmall = function SvgIconBookSmall(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$2a({
     xmlns: "http://www.w3.org/2000/svg",
-    width: 24,
-    height: 24
+    width: 16,
+    height: 16
   }, props), _path$25 || (_path$25 = /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M18.897 1.55H5.867a3.04 3.04 0 0 0-3.042 3.04v14.948a1 1 0 0 0 .025.122 3.04 3.04 0 0 0 3.016 2.798h13.03a2.28 2.28 0 0 0 2.281-2.28V3.83a2.28 2.28 0 0 0-2.28-2.28m.76 2.28v12.668H8.238V3.07h10.659a.76.76 0 0 1 .76.76m-13.79-.76h.85v13.428h-.85a3 3 0 0 0-1.521.423V4.591a1.52 1.52 0 0 1 1.52-1.521Zm13.03 17.868H5.867a1.462 1.462 0 1 1 0-2.92h13.79v2.16c0 .42-.34.76-.76.76M10.896 6.226c0-.42.34-.76.76-.76h4.583a.76.76 0 1 1 0 1.52h-4.583a.76.76 0 0 1-.76-.76"
+    fillRule: "evenodd",
+    d: "M12.365.75h-8.73a2 2 0 0 0-2 2v10.5a2 2 0 0 0 2 2h8.73a2 2 0 0 0 1.825-1.18c.067-.15-.055-.305-.212-.353-.379-.113-.668-.428-.668-.866 0-.415.24-.69.566-.822.256-.103.489-.315.489-.59V2.75a2 2 0 0 0-2-2m-9.232 9.851a2.45 2.45 0 0 1 1.085-.255V2.251c-.288 0-.564.097-.767.269a.85.85 0 0 0-.318.648zm8.007-6.708h-3.7a.65.65 0 0 0 0 1.3h3.7a.65.65 0 1 0 0-1.3m1.29 8.058a1.028 1.028 0 0 0 0 1.8H4.033a.9.9 0 1 1 0-1.8z",
+    clipRule: "evenodd"
   })));
 };
 
@@ -3592,7 +3606,7 @@ var iconMap = {
     },
     Book: {
         largeIcon: SvgIconBookLarge,
-        smallIcon: null,
+        smallIcon: SvgIconBookSmall,
     },
     Check: {
         largeIcon: null,
@@ -7865,36 +7879,40 @@ var doNotForwardProps$1 = ["buttonDefinition"];
 var StyledSegmentedControl = styled(material.ToggleButtonGroup, {
     shouldForwardProp: function (prop) { return !doNotForwardProps$1.includes(prop); },
 })(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
     var spaces = getSpaces(props);
     var semanticColors = getSemanticColors(props);
-    return "\n      .".concat(material.toggleButtonClasses.root, ".").concat(material.toggleButtonClasses.selected, " {\n        background-color: ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.fillOpen, ";\n        color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _b === void 0 ? void 0 : _b.iconSelected, ";\n        border-color: ").concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.border, ";\n\n        &:hover {\n          background-color: ").concat((_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.fillHover, ";\n        }\n      }\n\n      .").concat(material.toggleButtonClasses.root, " {\n        ").concat(focusVisibleA11yStyle(props), "\n        background-color: ").concat((_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.fillPrimary, ";\n        border-color: ").concat((_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.border, ";\n        line-height: 0px;\n        color: ").concat((_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.iconSecondary, ";\n        padding: ").concat(((_h = spaces === null || spaces === void 0 ? void 0 : spaces.xs) !== null && _h !== void 0 ? _h : 6) - 1, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n\n        &:hover {\n          border-color: ").concat((_j = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _j === void 0 ? void 0 : _j.border, ";\n          background-color: ").concat((_k = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _k === void 0 ? void 0 : _k.fillHover, ";\n        }\n      }\n    ");
+    return "\n      .".concat(material.toggleButtonClasses.root, ".").concat(material.toggleButtonClasses.disabled, " {\n        border-color: ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.border, ";\n      }\n\n      .").concat(material.toggleButtonClasses.root, ".").concat(material.toggleButtonClasses.selected, " {\n        background-color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.fillOpen, ";\n        color: ").concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _c === void 0 ? void 0 : _c.iconSelected, ";\n        border-color: ").concat((_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.border, ";\n\n        &:hover {\n          background-color: ").concat((_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.fillHover, ";\n        }\n      }\n\n      .").concat(material.toggleButtonClasses.root, " {\n        ").concat(focusVisibleA11yStyle(props), "\n        background-color: ").concat((_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.fillPrimary, ";\n        border-color: ").concat((_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.border, ";\n        line-height: 0px;\n        color: ").concat((_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _h === void 0 ? void 0 : _h.iconSecondary, ";\n        padding: ").concat(((_j = spaces === null || spaces === void 0 ? void 0 : spaces.xs) !== null && _j !== void 0 ? _j : 6) - 1, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n\n        &:hover {\n          border-color: ").concat((_k = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _k === void 0 ? void 0 : _k.border, ";\n          background-color: ").concat((_l = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _l === void 0 ? void 0 : _l.fillHover, ";\n        }\n      }\n    ");
 });
 var templateObject_1$8;
 
+/**
+ * @see https://mui.com/material-ui/react-toggle-button/
+ */
 var SegmentedControl = function (props) {
     var _a;
-    var buttonDefinition = props.buttonDefinition;
-    var leftmost = (_a = buttonDefinition[0]) === null || _a === void 0 ? void 0 : _a.value;
-    var _b = React.useState(leftmost), active = _b[0], setActive = _b[1];
+    var buttonDefinition = props.buttonDefinition, valueProp = props.value, onChangeProp = props.onChange, restProps = __rest(props, ["buttonDefinition", "value", "onChange"]);
+    var initialValue = ((_a = buttonDefinition.find(function (button) { return !button.disabled; })) === null || _a === void 0 ? void 0 : _a.value) || null;
+    var _b = React.useState(initialValue), active = _b[0], setActive = _b[1];
+    // (masoudmanson): Add Controlled/Uncontrolled Component pattern
+    var isControlled = valueProp !== undefined;
+    var value = isControlled ? valueProp : active;
     var handleActive = function (event, newActive) {
         if (newActive !== null) {
-            setActive(newActive);
+            if (!isControlled) {
+                setActive(newActive);
+            }
+            if (onChangeProp) {
+                onChangeProp(event, newActive);
+            }
         }
     };
-    return (jsxRuntime.jsxs(StyledSegmentedControl, __assign({ "aria-label": "Segmented Control", size: "small", value: active, exclusive: true, onChange: handleActive }, props, { children: [buttonDefinition.map(function (button) {
-                var icon = button.icon, tooltipText = button.tooltipText, value = button.value;
-                var iconItem = function () {
-                    if (icon) {
-                        if (typeof icon !== "string") {
-                            return icon;
-                        }
-                        else {
-                            return jsxRuntime.jsx(Icon, { sdsIcon: icon, sdsSize: "s", sdsType: "button" });
-                        }
-                    }
-                };
-                return (jsxRuntime.jsx(Tooltip, { title: tooltipText !== null && tooltipText !== void 0 ? tooltipText : value, sdsStyle: "dark", arrow: true, children: jsxRuntime.jsx(material.ToggleButton, { "aria-label": tooltipText, value: value, children: jsxRuntime.jsx("span", { tabIndex: -1, children: iconItem() }) }) }, value));
+    return (jsxRuntime.jsxs(StyledSegmentedControl, __assign({ "aria-label": "Segmented Control", size: "small", value: value, exclusive: true, onChange: handleActive }, restProps, { children: [buttonDefinition.map(function (button) {
+                var icon = button.icon, tooltipText = button.tooltipText, buttonValue = button.value, _a = button.disabled, disabled = _a === void 0 ? false : _a;
+                var iconItem = icon ? (typeof icon !== "string" ? (icon) : (jsxRuntime.jsx(Icon, { sdsIcon: icon, sdsSize: "s", sdsType: "button" }))) : null;
+                var toggleButton = (jsxRuntime.jsx(material.ToggleButton, { "aria-label": tooltipText !== null && tooltipText !== void 0 ? tooltipText : buttonValue, value: buttonValue, disabled: disabled, children: jsxRuntime.jsx("span", { tabIndex: -1, children: iconItem }) }, buttonValue));
+                // (masoudmanson): If the button is disabled, we don't want to show the tooltip.
+                return disabled ? (toggleButton) : (jsxRuntime.jsx(Tooltip, { title: tooltipText !== null && tooltipText !== void 0 ? tooltipText : buttonValue, sdsStyle: "dark", arrow: true, children: toggleButton }, buttonValue));
             }), ";"] })));
 };
 

package/dist/index.esm.d.ts

@@ -447,7 +447,7 @@ interface IconNameToSizes {
     BarChartHorizontal3: "xs" | "s";
     BarChartVertical3: "xs" | "s";
     BarChartVertical4: "xs" | "s";
-    Book: "l" | "xl";
+    Book: "xs" | "s" | "l" | "xl";
     Check: "xs" | "s";
     CheckCircle: "xs" | "s" | "l" | "xl";
     ChevronDown: "xs" | "s" | "l" | "xl";
@@ -628,7 +628,7 @@ type MenuItemProps<IconName extends keyof IconNameToSmallSizes> = MenuItemExtraP
 /**
  * @see https://mui.com/material-ui/react-menu/
  */
-declare const MenuItem: React.ForwardRefExoticComponent<Omit<MenuItemProps<"Bacteria" | "BarChartHorizontal3" | "BarChartVertical3" | "BarChartVertical4" | "Check" | "CheckCircle" | "ChevronDown" | "ChevronDown2" | "ChevronLeft2" | "ChevronLeft" | "ChevronRight2" | "ChevronRight" | "ChevronUp" | "ChevronUp2" | "CirclesOverlap2" | "Code" | "Copy" | "Cube" | "Document" | "DotsHorizontal" | "Download" | "Edit" | "Envelope" | "ExclamationMarkCircle" | "EyeClosed" | "EyeOpen" | "Filter" | "FlagCheck" | "FlagOutline" | "FlagQuestionMark" | "FlagXMark" | "Gear" | "Globe" | "House" | "InfoCircle" | "LifeRing" | "LightBulb" | "LinesDashed3Solid1" | "LinesHorizontal3" | "Link" | "List" | "Loading" | "Lock" | "LockCircle" | "Minus" | "Open" | "People" | "Percentage" | "Person" | "Pin" | "PinLocation" | "Plus" | "PlusCircle" | "PuzzlePiece" | "Refresh" | "RotateLeft" | "RotateRight" | "Scale" | "Search" | "SearchLinesHorizontal3" | "Starburst" | "Table" | "ThumbsDown" | "ThumbsUp" | "TrashCan" | "TreeHorizontal" | "TreeVertical" | "TriangleDown" | "TriangleLeft" | "TriangleRight" | "TriangleUp" | "XMark" | "XMarkCircle">, "ref"> & React.RefAttributes<HTMLLIElement | null>>;
+declare const MenuItem: React.ForwardRefExoticComponent<Omit<MenuItemProps<"Bacteria" | "BarChartHorizontal3" | "BarChartVertical3" | "BarChartVertical4" | "Book" | "Check" | "CheckCircle" | "ChevronDown" | "ChevronDown2" | "ChevronLeft2" | "ChevronLeft" | "ChevronRight2" | "ChevronRight" | "ChevronUp" | "ChevronUp2" | "CirclesOverlap2" | "Code" | "Copy" | "Cube" | "Document" | "DotsHorizontal" | "Download" | "Edit" | "Envelope" | "ExclamationMarkCircle" | "EyeClosed" | "EyeOpen" | "Filter" | "FlagCheck" | "FlagOutline" | "FlagQuestionMark" | "FlagXMark" | "Gear" | "Globe" | "House" | "InfoCircle" | "LifeRing" | "LightBulb" | "LinesDashed3Solid1" | "LinesHorizontal3" | "Link" | "List" | "Loading" | "Lock" | "LockCircle" | "Minus" | "Open" | "People" | "Percentage" | "Person" | "Pin" | "PinLocation" | "Plus" | "PlusCircle" | "PuzzlePiece" | "Refresh" | "RotateLeft" | "RotateRight" | "Scale" | "Search" | "SearchLinesHorizontal3" | "Starburst" | "Table" | "ThumbsDown" | "ThumbsUp" | "TrashCan" | "TreeHorizontal" | "TreeVertical" | "TriangleDown" | "TriangleLeft" | "TriangleRight" | "TriangleUp" | "XMark" | "XMarkCircle">, "ref"> & React.RefAttributes<HTMLLIElement | null>>;
 interface StyleProps extends CommonThemeProps {
     count?: number;
     icon?: ReactElement;
@@ -1365,17 +1365,17 @@ declare const Panel: React.ForwardRefExoticComponent<(Omit<BasicPanelProps, "ref
 // one prop is array of objects: with icon name and tooltip text. They need to make
 // first item in array first button, etc
 interface SingleButtonDefinition {
+    disabled?: boolean;
     icon: keyof IconNameToSizes | React.ReactElement<CustomSVGProps>;
     tooltipText?: string;
     value: string;
 }
-interface SegmentedControlExtraProps extends ToggleButtonGroupProps {
+interface SegmentedControlProps extends ToggleButtonGroupProps {
     buttonDefinition: SingleButtonDefinition[];
 }
 /**
  * @see https://mui.com/material-ui/react-toggle-button/
  */
-type SegmentedControlProps = SegmentedControlExtraProps & ToggleButtonGroupProps;
 declare const SegmentedControl: (props: SegmentedControlProps) => import("react/jsx-runtime").JSX.Element;
 interface SdsTableProps {
     children: React.ReactNode;

package/dist/index.esm.js

@@ -1310,14 +1310,14 @@ var StyledSubtitle = styled("p")(templateObject_4$o || (templateObject_4$o = __m
 });
 var templateObject_1$V, templateObject_2$A, templateObject_3$s, templateObject_4$o;
 
-var _path$2a, _path2$D, _path3$6;
-function _extends$2f() { _extends$2f = 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$2f.apply(this, arguments); }
+var _path$2b, _path2$D, _path3$6;
+function _extends$2g() { _extends$2g = 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$2g.apply(this, arguments); }
 var SvgIconBacteriaLarge = function SvgIconBacteriaLarge(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$2f({
+  return /*#__PURE__*/React.createElement("svg", _extends$2g({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24
-  }, props), _path$2a || (_path$2a = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$2b || (_path$2b = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M12.205 14.698a1.956 1.956 0 1 1-3.911 0 1.956 1.956 0 0 1 3.911 0m-1.955.756a.756.756 0 1 0 0-1.512.756.756 0 0 0 0 1.512"
   })), _path2$D || (_path2$D = /*#__PURE__*/React.createElement("path", {
@@ -1328,14 +1328,14 @@ var SvgIconBacteriaLarge = function SvgIconBacteriaLarge(props) {
   })));
 };
 
-var _path$29, _path2$C;
-function _extends$2e() { _extends$2e = 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$2e.apply(this, arguments); }
+var _path$2a, _path2$C;
+function _extends$2f() { _extends$2f = 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$2f.apply(this, arguments); }
 var SvgIconBacteriaSmall = function SvgIconBacteriaSmall(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$2e({
+  return /*#__PURE__*/React.createElement("svg", _extends$2f({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16
-  }, props), _path$29 || (_path$29 = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$2a || (_path$2a = /*#__PURE__*/React.createElement("path", {
     d: "M7.766 7.265a1.484 1.484 0 1 0-.001-2.968 1.484 1.484 0 0 0 .001 2.968m-1.725 4.287a1.478 1.478 0 1 0-.001-2.955 1.478 1.478 0 0 0 .001 2.955"
   })), _path2$C || (_path2$C = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
@@ -1343,54 +1343,68 @@ var SvgIconBacteriaSmall = function SvgIconBacteriaSmall(props) {
   })));
 };
 
+var _path$29;
+function _extends$2e() { _extends$2e = 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$2e.apply(this, arguments); }
+var SvgIconBarChartHorizontal3Small = function SvgIconBarChartHorizontal3Small(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$2e({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16
+  }, props), _path$29 || (_path$29 = /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    d: "M1.143 2.434c0-.63.512-1.143 1.143-1.143H9.6c.631 0 1.143.512 1.143 1.143v.857c0 .632-.512 1.143-1.143 1.143H2.286a1.143 1.143 0 0 1-1.143-1.143zm0 5.143c0-.63.512-1.143 1.143-1.143h11.428c.631 0 1.143.512 1.143 1.143v.857c0 .632-.511 1.143-1.143 1.143H2.286a1.143 1.143 0 0 1-1.143-1.143zm0 5.143c0-.63.512-1.143 1.143-1.143h3.2c.63 0 1.142.512 1.142 1.143v.857c0 .632-.511 1.143-1.143 1.143h-3.2a1.143 1.143 0 0 1-1.142-1.143z"
+  })));
+};
+
 var _path$28;
 function _extends$2d() { _extends$2d = 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$2d.apply(this, arguments); }
-var SvgIconBarChartHorizontal3Small = function SvgIconBarChartHorizontal3Small(props) {
+var SvgIconBarChartVertical3Small = function SvgIconBarChartVertical3Small(props) {
   return /*#__PURE__*/React.createElement("svg", _extends$2d({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16
   }, props), _path$28 || (_path$28 = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
-    d: "M1.143 2.434c0-.63.512-1.143 1.143-1.143H9.6c.631 0 1.143.512 1.143 1.143v.857c0 .632-.512 1.143-1.143 1.143H2.286a1.143 1.143 0 0 1-1.143-1.143zm0 5.143c0-.63.512-1.143 1.143-1.143h11.428c.631 0 1.143.512 1.143 1.143v.857c0 .632-.511 1.143-1.143 1.143H2.286a1.143 1.143 0 0 1-1.143-1.143zm0 5.143c0-.63.512-1.143 1.143-1.143h3.2c.63 0 1.142.512 1.142 1.143v.857c0 .632-.511 1.143-1.143 1.143h-3.2a1.143 1.143 0 0 1-1.142-1.143z"
+    d: "M1.291 13.714V6.4c0-.631.512-1.143 1.143-1.143h.857c.632 0 1.143.512 1.143 1.143v7.314c0 .631-.511 1.143-1.143 1.143h-.857a1.143 1.143 0 0 1-1.143-1.143m5.143 0V2.286c0-.631.512-1.143 1.143-1.143h.857c.632 0 1.143.512 1.143 1.143v11.428c0 .631-.511 1.143-1.143 1.143h-.857a1.143 1.143 0 0 1-1.143-1.143m5.143 0v-3.2c0-.63.512-1.142 1.143-1.142h.857c.632 0 1.143.511 1.143 1.143v3.2c0 .63-.511 1.142-1.143 1.142h-.857a1.143 1.143 0 0 1-1.143-1.143"
   })));
 };
 
 var _path$27;
 function _extends$2c() { _extends$2c = 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$2c.apply(this, arguments); }
-var SvgIconBarChartVertical3Small = function SvgIconBarChartVertical3Small(props) {
+var SvgIconBarChartVertical4Small = function SvgIconBarChartVertical4Small(props) {
   return /*#__PURE__*/React.createElement("svg", _extends$2c({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16
   }, props), _path$27 || (_path$27 = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
-    d: "M1.291 13.714V6.4c0-.631.512-1.143 1.143-1.143h.857c.632 0 1.143.512 1.143 1.143v7.314c0 .631-.511 1.143-1.143 1.143h-.857a1.143 1.143 0 0 1-1.143-1.143m5.143 0V2.286c0-.631.512-1.143 1.143-1.143h.857c.632 0 1.143.512 1.143 1.143v11.428c0 .631-.511 1.143-1.143 1.143h-.857a1.143 1.143 0 0 1-1.143-1.143m5.143 0v-3.2c0-.63.512-1.142 1.143-1.142h.857c.632 0 1.143.511 1.143 1.143v3.2c0 .63-.511 1.142-1.143 1.142h-.857a1.143 1.143 0 0 1-1.143-1.143"
+    d: "M6.412 3.094c.545 0 .987.442.987.987v9.96a.987.987 0 1 1-1.974 0v-9.96c0-.545.442-.987.987-.987m-3.14 2.549c.546 0 .988.442.988.987v7.399a.987.987 0 0 1-1.974 0v-7.4c0-.544.442-.986.987-.986Zm6.28-4.614c.545 0 .986.441.986.986V14.03a.987.987 0 1 1-1.973 0V2.015c0-.545.441-.986.987-.986m3.139 4.823c.545 0 .987.442.987.987v7.19a.987.987 0 0 1-1.974 0v-7.19c0-.545.442-.987.987-.987"
   })));
 };
 
 var _path$26;
 function _extends$2b() { _extends$2b = 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$2b.apply(this, arguments); }
-var SvgIconBarChartVertical4Small = function SvgIconBarChartVertical4Small(props) {
+var SvgIconBookLarge = function SvgIconBookLarge(props) {
   return /*#__PURE__*/React.createElement("svg", _extends$2b({
     xmlns: "http://www.w3.org/2000/svg",
-    width: 16,
-    height: 16
+    width: 24,
+    height: 24
   }, props), _path$26 || (_path$26 = /*#__PURE__*/React.createElement("path", {
-    fillRule: "evenodd",
-    d: "M6.412 3.094c.545 0 .987.442.987.987v9.96a.987.987 0 1 1-1.974 0v-9.96c0-.545.442-.987.987-.987m-3.14 2.549c.546 0 .988.442.988.987v7.399a.987.987 0 0 1-1.974 0v-7.4c0-.544.442-.986.987-.986Zm6.28-4.614c.545 0 .986.441.986.986V14.03a.987.987 0 1 1-1.973 0V2.015c0-.545.441-.986.987-.986m3.139 4.823c.545 0 .987.442.987.987v7.19a.987.987 0 0 1-1.974 0v-7.19c0-.545.442-.987.987-.987"
+    d: "M18.897 1.55H5.867a3.04 3.04 0 0 0-3.042 3.04v14.948a1 1 0 0 0 .025.122 3.04 3.04 0 0 0 3.016 2.798h13.03a2.28 2.28 0 0 0 2.281-2.28V3.83a2.28 2.28 0 0 0-2.28-2.28m.76 2.28v12.668H8.238V3.07h10.659a.76.76 0 0 1 .76.76m-13.79-.76h.85v13.428h-.85a3 3 0 0 0-1.521.423V4.591a1.52 1.52 0 0 1 1.52-1.521Zm13.03 17.868H5.867a1.462 1.462 0 1 1 0-2.92h13.79v2.16c0 .42-.34.76-.76.76M10.896 6.226c0-.42.34-.76.76-.76h4.583a.76.76 0 1 1 0 1.52h-4.583a.76.76 0 0 1-.76-.76"
   })));
 };
 
 var _path$25;
 function _extends$2a() { _extends$2a = 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$2a.apply(this, arguments); }
-var SvgIconBookLarge = function SvgIconBookLarge(props) {
+var SvgIconBookSmall = function SvgIconBookSmall(props) {
   return /*#__PURE__*/React.createElement("svg", _extends$2a({
     xmlns: "http://www.w3.org/2000/svg",
-    width: 24,
-    height: 24
+    width: 16,
+    height: 16
   }, props), _path$25 || (_path$25 = /*#__PURE__*/React.createElement("path", {
-    d: "M18.897 1.55H5.867a3.04 3.04 0 0 0-3.042 3.04v14.948a1 1 0 0 0 .025.122 3.04 3.04 0 0 0 3.016 2.798h13.03a2.28 2.28 0 0 0 2.281-2.28V3.83a2.28 2.28 0 0 0-2.28-2.28m.76 2.28v12.668H8.238V3.07h10.659a.76.76 0 0 1 .76.76m-13.79-.76h.85v13.428h-.85a3 3 0 0 0-1.521.423V4.591a1.52 1.52 0 0 1 1.52-1.521Zm13.03 17.868H5.867a1.462 1.462 0 1 1 0-2.92h13.79v2.16c0 .42-.34.76-.76.76M10.896 6.226c0-.42.34-.76.76-.76h4.583a.76.76 0 1 1 0 1.52h-4.583a.76.76 0 0 1-.76-.76"
+    fillRule: "evenodd",
+    d: "M12.365.75h-8.73a2 2 0 0 0-2 2v10.5a2 2 0 0 0 2 2h8.73a2 2 0 0 0 1.825-1.18c.067-.15-.055-.305-.212-.353-.379-.113-.668-.428-.668-.866 0-.415.24-.69.566-.822.256-.103.489-.315.489-.59V2.75a2 2 0 0 0-2-2m-9.232 9.851a2.45 2.45 0 0 1 1.085-.255V2.251c-.288 0-.564.097-.767.269a.85.85 0 0 0-.318.648zm8.007-6.708h-3.7a.65.65 0 0 0 0 1.3h3.7a.65.65 0 1 0 0-1.3m1.29 8.058a1.028 1.028 0 0 0 0 1.8H4.033a.9.9 0 1 1 0-1.8z",
+    clipRule: "evenodd"
   })));
 };
 
@@ -3572,7 +3586,7 @@ var iconMap = {
     },
     Book: {
         largeIcon: SvgIconBookLarge,
-        smallIcon: null,
+        smallIcon: SvgIconBookSmall,
     },
     Check: {
         largeIcon: null,
@@ -7845,36 +7859,40 @@ var doNotForwardProps$1 = ["buttonDefinition"];
 var StyledSegmentedControl = styled(ToggleButtonGroup, {
     shouldForwardProp: function (prop) { return !doNotForwardProps$1.includes(prop); },
 })(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
     var spaces = getSpaces(props);
     var semanticColors = getSemanticColors(props);
-    return "\n      .".concat(toggleButtonClasses.root, ".").concat(toggleButtonClasses.selected, " {\n        background-color: ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.fillOpen, ";\n        color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _b === void 0 ? void 0 : _b.iconSelected, ";\n        border-color: ").concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.border, ";\n\n        &:hover {\n          background-color: ").concat((_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.fillHover, ";\n        }\n      }\n\n      .").concat(toggleButtonClasses.root, " {\n        ").concat(focusVisibleA11yStyle(props), "\n        background-color: ").concat((_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.fillPrimary, ";\n        border-color: ").concat((_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.border, ";\n        line-height: 0px;\n        color: ").concat((_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.iconSecondary, ";\n        padding: ").concat(((_h = spaces === null || spaces === void 0 ? void 0 : spaces.xs) !== null && _h !== void 0 ? _h : 6) - 1, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n\n        &:hover {\n          border-color: ").concat((_j = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _j === void 0 ? void 0 : _j.border, ";\n          background-color: ").concat((_k = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _k === void 0 ? void 0 : _k.fillHover, ";\n        }\n      }\n    ");
+    return "\n      .".concat(toggleButtonClasses.root, ".").concat(toggleButtonClasses.disabled, " {\n        border-color: ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.border, ";\n      }\n\n      .").concat(toggleButtonClasses.root, ".").concat(toggleButtonClasses.selected, " {\n        background-color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.fillOpen, ";\n        color: ").concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _c === void 0 ? void 0 : _c.iconSelected, ";\n        border-color: ").concat((_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.border, ";\n\n        &:hover {\n          background-color: ").concat((_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.fillHover, ";\n        }\n      }\n\n      .").concat(toggleButtonClasses.root, " {\n        ").concat(focusVisibleA11yStyle(props), "\n        background-color: ").concat((_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.fillPrimary, ";\n        border-color: ").concat((_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.border, ";\n        line-height: 0px;\n        color: ").concat((_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _h === void 0 ? void 0 : _h.iconSecondary, ";\n        padding: ").concat(((_j = spaces === null || spaces === void 0 ? void 0 : spaces.xs) !== null && _j !== void 0 ? _j : 6) - 1, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n\n        &:hover {\n          border-color: ").concat((_k = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _k === void 0 ? void 0 : _k.border, ";\n          background-color: ").concat((_l = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _l === void 0 ? void 0 : _l.fillHover, ";\n        }\n      }\n    ");
 });
 var templateObject_1$8;
 
+/**
+ * @see https://mui.com/material-ui/react-toggle-button/
+ */
 var SegmentedControl = function (props) {
     var _a;
-    var buttonDefinition = props.buttonDefinition;
-    var leftmost = (_a = buttonDefinition[0]) === null || _a === void 0 ? void 0 : _a.value;
-    var _b = React__default.useState(leftmost), active = _b[0], setActive = _b[1];
+    var buttonDefinition = props.buttonDefinition, valueProp = props.value, onChangeProp = props.onChange, restProps = __rest(props, ["buttonDefinition", "value", "onChange"]);
+    var initialValue = ((_a = buttonDefinition.find(function (button) { return !button.disabled; })) === null || _a === void 0 ? void 0 : _a.value) || null;
+    var _b = React__default.useState(initialValue), active = _b[0], setActive = _b[1];
+    // (masoudmanson): Add Controlled/Uncontrolled Component pattern
+    var isControlled = valueProp !== undefined;
+    var value = isControlled ? valueProp : active;
     var handleActive = function (event, newActive) {
         if (newActive !== null) {
-            setActive(newActive);
+            if (!isControlled) {
+                setActive(newActive);
+            }
+            if (onChangeProp) {
+                onChangeProp(event, newActive);
+            }
         }
     };
-    return (jsxs(StyledSegmentedControl, __assign({ "aria-label": "Segmented Control", size: "small", value: active, exclusive: true, onChange: handleActive }, props, { children: [buttonDefinition.map(function (button) {
-                var icon = button.icon, tooltipText = button.tooltipText, value = button.value;
-                var iconItem = function () {
-                    if (icon) {
-                        if (typeof icon !== "string") {
-                            return icon;
-                        }
-                        else {
-                            return jsx(Icon, { sdsIcon: icon, sdsSize: "s", sdsType: "button" });
-                        }
-                    }
-                };
-                return (jsx(Tooltip, { title: tooltipText !== null && tooltipText !== void 0 ? tooltipText : value, sdsStyle: "dark", arrow: true, children: jsx(ToggleButton, { "aria-label": tooltipText, value: value, children: jsx("span", { tabIndex: -1, children: iconItem() }) }) }, value));
+    return (jsxs(StyledSegmentedControl, __assign({ "aria-label": "Segmented Control", size: "small", value: value, exclusive: true, onChange: handleActive }, restProps, { children: [buttonDefinition.map(function (button) {
+                var icon = button.icon, tooltipText = button.tooltipText, buttonValue = button.value, _a = button.disabled, disabled = _a === void 0 ? false : _a;
+                var iconItem = icon ? (typeof icon !== "string" ? (icon) : (jsx(Icon, { sdsIcon: icon, sdsSize: "s", sdsType: "button" }))) : null;
+                var toggleButton = (jsx(ToggleButton, { "aria-label": tooltipText !== null && tooltipText !== void 0 ? tooltipText : buttonValue, value: buttonValue, disabled: disabled, children: jsx("span", { tabIndex: -1, children: iconItem }) }, buttonValue));
+                // (masoudmanson): If the button is disabled, we don't want to show the tooltip.
+                return disabled ? (toggleButton) : (jsx(Tooltip, { title: tooltipText !== null && tooltipText !== void 0 ? tooltipText : buttonValue, sdsStyle: "dark", arrow: true, children: toggleButton }, buttonValue));
             }), ";"] })));
 };