@digital-ai/dot-components 1.17.0 → 1.17.1

package/CHANGE_LOG.md

@@ -1,5 +1,14 @@
 # Changelog
 
+## [1.17.1](https://github.com/digital-ai/dot-components/tree/1.17.1) (05/19/2022)
+
+[Full Changelog](https://github.com/digital-ai/dot-components/compare/1.17.0...1.17.1)
+
+**Fixed bugs:**
+
+- `DotButtonToggle`: Button size is not respected after tooltip change [\#1170](https://github.com/digital-ai/dot-components/issues/1170)
+- D-21287: `DotButtonToggle`: Button size is not respected after tooltip change [\#1171](https://github.com/digital-ai/dot-components/pull/1171) ([dmiletic85](https://github.com/dmiletic85))
+
 ## [1.17.0](https://github.com/digital-ai/dot-components/tree/1.17.0) (05/18/2022)
 
 [Full Changelog](https://github.com/digital-ai/dot-components/compare/1.16.1...1.17.0)
@@ -130,7 +139,6 @@
 - S-82519: `Snackbar` Allow positioning [\#1064](https://github.com/digital-ai/dot-components/pull/1064) ([dmiletic85](https://github.com/dmiletic85))
 - S-82617: `DotInputText` Expose mouse up event [\#1063](https://github.com/digital-ai/dot-components/pull/1063) ([dmiletic85](https://github.com/dmiletic85))
 - S-76904: `InlineEdit` improvements [\#1053](https://github.com/digital-ai/dot-components/pull/1053) ([dmiletic85](https://github.com/dmiletic85))
-- S-82059: `DraggableList`: Create and export the component [\#1003](https://github.com/digital-ai/dot-components/pull/1003) ([dmiletic85](https://github.com/dmiletic85))
 
 **Fixed bugs:**
 
@@ -262,6 +270,7 @@
 - Add class prop into `ButtonToggleProps` [\#990](https://github.com/digital-ai/dot-components/issues/990)
 - Expose `Divider` [\#989](https://github.com/digital-ai/dot-components/issues/989)
 - Expose `Popper` [\#975](https://github.com/digital-ai/dot-components/issues/975)
+- S-82059: `DraggableList`: Create and export the component [\#1003](https://github.com/digital-ai/dot-components/pull/1003) ([dmiletic85](https://github.com/dmiletic85))
 - S-81968: `ButtonToggle`: Add class prop into `ButtonToggleProps` and export relevant types and interfaces [\#993](https://github.com/digital-ai/dot-components/pull/993) ([dmiletic85](https://github.com/dmiletic85))
 - S-81966: `Divider`: Create and expose `Divider` component [\#992](https://github.com/digital-ai/dot-components/pull/992) ([dmiletic85](https://github.com/dmiletic85))
 - S-81656: `Popper`: Create and expose `Popper` component [\#988](https://github.com/digital-ai/dot-components/pull/988) ([dmiletic85](https://github.com/dmiletic85))
@@ -773,6 +782,7 @@
 - S-79291: update nested dependencies [\#700](https://github.com/digital-ai/dot-components/pull/700) ([CWSites](https://github.com/CWSites))
 - S-78832: Agility icon & badge updates [\#698](https://github.com/digital-ai/dot-components/pull/698) ([CWSites](https://github.com/CWSites))
 - S-79251: add workflow for sonarqube scan when code merged to develop [\#697](https://github.com/digital-ai/dot-components/pull/697) ([CWSites](https://github.com/CWSites))
+- pass value to tab [\#694](https://github.com/digital-ai/dot-components/pull/694) ([kmmarsh](https://github.com/kmmarsh))
 - S-76906: table action column [\#692](https://github.com/digital-ai/dot-components/pull/692) ([monapatel91](https://github.com/monapatel91))
 
 ## [1.1.0](https://github.com/digital-ai/dot-components/tree/1.1.0) (09/29/2021)
@@ -786,7 +796,6 @@
 **Merged pull requests:**
 
 - MINOR release [\#695](https://github.com/digital-ai/dot-components/pull/695) ([CWSites](https://github.com/CWSites))
-- pass value to tab [\#694](https://github.com/digital-ai/dot-components/pull/694) ([kmmarsh](https://github.com/kmmarsh))
 - S-78831: update AppToolbar component for Agility [\#691](https://github.com/digital-ai/dot-components/pull/691) ([CWSites](https://github.com/CWSites))
 
 ## [1.0.12](https://github.com/digital-ai/dot-components/tree/1.0.12) (09/23/2021)

package/index.esm.js

@@ -3510,13 +3510,50 @@ const DotBreadcrumbs = ({
   }));
 };
 
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
+function __awaiter(thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+}
+
 const rootClassName$C = 'dot-button-toggle';
 const StyledToggleButtonGroup = styled(ToggleButtonGroup).withConfig({
   displayName: "ButtonTogglestyles__StyledToggleButtonGroup",
   componentId: "sc-1oh4ljv-0"
 })(["", ""], ({
   theme
-}) => css(["&.", "{.MuiToggleButton-root{padding:0;}.toggle-button-children-wrapper{display:flex;padding:", "px;}.dot-icon{+ p{margin-left:", "px;}i{height:auto;}}.MuiToggleButton-label{color:", ";p{margin-bottom:0;}}.MuiToggleButtonGroup-groupedHorizontal{border:1px solid ", ";border-radius:0;:first-child{border-top-left-radius:4px;border-bottom-left-radius:4px;margin-left:0;}:last-child{border-top-right-radius:4px;border-bottom-right-radius:4px;margin-right:0;}}}.MuiButtonBase-root{&.Mui-disabled p,&.Mui-disabled .dot-icon{color:", ";}}"], rootClassName$C, theme.spacing(1.375), theme.spacing(1), theme.palette.layer.n700, theme.palette.layer.n300, theme.palette.grey[200]));
+}) => css(["&.", "{.dot-icon{+ p{margin-left:", "px;}i{height:auto;}}.MuiToggleButton-label{color:", ";p{margin-bottom:0;}}.MuiToggleButtonGroup-groupedHorizontal{border:1px solid ", ";border-radius:0;:first-child{border-top-left-radius:4px;border-bottom-left-radius:4px;margin-left:0;}:last-child{border-top-right-radius:4px;border-bottom-right-radius:4px;margin-right:0;}}}.MuiButtonBase-root{&.Mui-disabled p,&.Mui-disabled .dot-icon{color:", ";}}"], rootClassName$C, theme.spacing(1), theme.palette.layer.n700, theme.palette.layer.n300, theme.palette.grey[200]));
 
 const DotButtonToggle = ({
   ariaLabel,
@@ -3533,22 +3570,34 @@ const DotButtonToggle = ({
 }) => {
   const rootClasses = useStylesWithRootClass(rootClassName$C, className);
 
-  const renderToggleButtonChildren = ({
+  const renderToggleButton = ({
+    ariaLabel: optionAriaLabel,
+    className: optionClassName,
+    disabled: optionDisabled,
     iconId: optionIconId,
     text: optionText,
-    tooltip: optionTooltip
-  }) => {
-    const children = /*#__PURE__*/React__default.createElement("div", {
-      "data-testid": dataTestId && `${dataTestId}-children-wrapper`,
-      className: "toggle-button-children-wrapper"
-    }, optionIconId && /*#__PURE__*/React__default.createElement(DotIcon, {
+    tooltip: optionTooltip,
+    value: optionValue
+  }, key) => {
+    const commonProps = {
+      'aria-label': optionAriaLabel,
+      className: optionClassName,
+      disableFocusRipple: _disableFocusRipple,
+      disableRipple: _disableRipple,
+      disabled: optionDisabled,
+      key,
+      value: optionValue
+    };
+    const children = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, optionIconId && /*#__PURE__*/React__default.createElement(DotIcon, {
       className: "dot-toggle-icon",
       iconId: optionIconId
     }), optionText && /*#__PURE__*/React__default.createElement(DotTypography, null, optionText));
-    return optionTooltip ? /*#__PURE__*/React__default.createElement(DotTooltip, {
-      className: "toggle-button-tooltip",
-      title: optionTooltip
-    }, children) : children;
+    return optionTooltip ? /*#__PURE__*/React__default.createElement(TooltipToggleButton, Object.assign({}, commonProps, {
+      CustomTooltipProps: {
+        title: optionTooltip
+      },
+      value: optionValue
+    }), children) : /*#__PURE__*/React__default.createElement(ToggleButton, Object.assign({}, commonProps), children);
   };
 
   return /*#__PURE__*/React__default.createElement(StyledToggleButtonGroup, {
@@ -3563,23 +3612,21 @@ const DotButtonToggle = ({
     size: _size,
     value: value
   }, buttonOptions.map((option, key) => {
-    const {
-      ariaLabel: optionAriaLabel,
-      className: optionClassName,
-      disabled: optionDisabled,
-      value: optionValue
-    } = option;
-    return /*#__PURE__*/React__default.createElement(ToggleButton, {
-      "aria-label": optionAriaLabel,
-      className: optionClassName,
-      disableFocusRipple: _disableFocusRipple,
-      disableRipple: _disableRipple,
-      disabled: optionDisabled,
-      key: key,
-      value: optionValue
-    }, renderToggleButtonChildren(option));
+    return renderToggleButton(option, key);
   }));
 };
+/** Catch props and forward to ToggleButton */
+
+const TooltipToggleButton = /*#__PURE__*/forwardRef((_a, ref) => {
+  var {
+    CustomTooltipProps
+  } = _a,
+      props = __rest(_a, ["CustomTooltipProps"]);
+
+  return /*#__PURE__*/React__default.createElement(Tooltip, Object.assign({}, CustomTooltipProps), /*#__PURE__*/React__default.createElement(ToggleButton, Object.assign({
+    ref: ref
+  }, props)));
+});
 
 const DotCard = ({
   ariaLabel,
@@ -5577,31 +5624,6 @@ const DotDynamicForm = ({
   }, buildFormControls(config.controls));
 };
 
-/*! *****************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-
-function __awaiter(thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-}
-
 const rootClassName$n = 'dot-inline-edit';
 const editModeClassName = 'dot-edit-mode';
 const viewModeClassName = 'dot-view-mode';

package/index.umd.js

@@ -55,6 +55,18 @@
         return __assign.apply(this, arguments);
     };
 
+    function __rest(s, e) {
+        var t = {};
+        for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+            t[p] = s[p];
+        if (s != null && typeof Object.getOwnPropertySymbols === "function")
+            for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+                if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                    t[p[i]] = s[p[i]];
+            }
+        return t;
+    }
+
     function __awaiter(thisArg, _arguments, P, generator) {
         function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
         return new (P || (P = Promise))(function (resolve, reject) {
@@ -3840,7 +3852,7 @@
       componentId: "sc-1oh4ljv-0"
     })(templateObject_2$D || (templateObject_2$D = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
       var theme = _a.theme;
-      return styled.css(templateObject_1$F || (templateObject_1$F = __makeTemplateObject(["\n    &.", " {\n      .MuiToggleButton-root {\n        padding: 0;\n      }\n\n      .toggle-button-children-wrapper {\n        display: flex;\n        // This will replace default padding from MuiToggleButton-root\n        // so that tooltip works when hovering whole button area\n        // (instead of just text within the button)\n        padding: ", "px;\n      }\n\n      .dot-icon {\n        + p {\n          margin-left: ", "px;\n        }\n        i {\n          height: auto;\n        }\n      }\n      .MuiToggleButton-label {\n        color: ", ";\n        p {\n          margin-bottom: 0;\n        }\n      }\n      .MuiToggleButtonGroup-groupedHorizontal {\n        border: 1px solid ", ";\n        border-radius: 0;\n\n        :first-child {\n          border-top-left-radius: 4px;\n          border-bottom-left-radius: 4px;\n          margin-left: 0;\n        }\n        :last-child {\n          border-top-right-radius: 4px;\n          border-bottom-right-radius: 4px;\n          margin-right: 0;\n        }\n      }\n    }\n\n    .MuiButtonBase-root {\n      &.Mui-disabled p,\n      &.Mui-disabled .dot-icon {\n        color: ", ";\n      }\n    }\n  "], ["\n    &.", " {\n      .MuiToggleButton-root {\n        padding: 0;\n      }\n\n      .toggle-button-children-wrapper {\n        display: flex;\n        // This will replace default padding from MuiToggleButton-root\n        // so that tooltip works when hovering whole button area\n        // (instead of just text within the button)\n        padding: ", "px;\n      }\n\n      .dot-icon {\n        + p {\n          margin-left: ", "px;\n        }\n        i {\n          height: auto;\n        }\n      }\n      .MuiToggleButton-label {\n        color: ", ";\n        p {\n          margin-bottom: 0;\n        }\n      }\n      .MuiToggleButtonGroup-groupedHorizontal {\n        border: 1px solid ", ";\n        border-radius: 0;\n\n        :first-child {\n          border-top-left-radius: 4px;\n          border-bottom-left-radius: 4px;\n          margin-left: 0;\n        }\n        :last-child {\n          border-top-right-radius: 4px;\n          border-bottom-right-radius: 4px;\n          margin-right: 0;\n        }\n      }\n    }\n\n    .MuiButtonBase-root {\n      &.Mui-disabled p,\n      &.Mui-disabled .dot-icon {\n        color: ", ";\n      }\n    }\n  "])), rootClassName$C, theme.spacing(1.375), theme.spacing(1), theme.palette.layer.n700, theme.palette.layer.n300, theme.palette.grey[200]);
+      return styled.css(templateObject_1$F || (templateObject_1$F = __makeTemplateObject(["\n    &.", " {\n      .dot-icon {\n        + p {\n          margin-left: ", "px;\n        }\n        i {\n          height: auto;\n        }\n      }\n      .MuiToggleButton-label {\n        color: ", ";\n        p {\n          margin-bottom: 0;\n        }\n      }\n      .MuiToggleButtonGroup-groupedHorizontal {\n        border: 1px solid ", ";\n        border-radius: 0;\n\n        :first-child {\n          border-top-left-radius: 4px;\n          border-bottom-left-radius: 4px;\n          margin-left: 0;\n        }\n        :last-child {\n          border-top-right-radius: 4px;\n          border-bottom-right-radius: 4px;\n          margin-right: 0;\n        }\n      }\n    }\n\n    .MuiButtonBase-root {\n      &.Mui-disabled p,\n      &.Mui-disabled .dot-icon {\n        color: ", ";\n      }\n    }\n  "], ["\n    &.", " {\n      .dot-icon {\n        + p {\n          margin-left: ", "px;\n        }\n        i {\n          height: auto;\n        }\n      }\n      .MuiToggleButton-label {\n        color: ", ";\n        p {\n          margin-bottom: 0;\n        }\n      }\n      .MuiToggleButtonGroup-groupedHorizontal {\n        border: 1px solid ", ";\n        border-radius: 0;\n\n        :first-child {\n          border-top-left-radius: 4px;\n          border-bottom-left-radius: 4px;\n          margin-left: 0;\n        }\n        :last-child {\n          border-top-right-radius: 4px;\n          border-bottom-right-radius: 4px;\n          margin-right: 0;\n        }\n      }\n    }\n\n    .MuiButtonBase-root {\n      &.Mui-disabled p,\n      &.Mui-disabled .dot-icon {\n        color: ", ";\n      }\n    }\n  "])), rootClassName$C, theme.spacing(1), theme.palette.layer.n700, theme.palette.layer.n300, theme.palette.grey[200]);
     });
     var templateObject_1$F, templateObject_2$D;
 
@@ -3864,21 +3876,33 @@
           value = _a.value;
       var rootClasses = useStylesWithRootClass(rootClassName$C, className);
 
-      var renderToggleButtonChildren = function renderToggleButtonChildren(_a) {
-        var optionIconId = _a.iconId,
+      var renderToggleButton = function renderToggleButton(_a, key) {
+        var optionAriaLabel = _a.ariaLabel,
+            optionClassName = _a.className,
+            optionDisabled = _a.disabled,
+            optionIconId = _a.iconId,
             optionText = _a.text,
-            optionTooltip = _a.tooltip;
-        var children = /*#__PURE__*/React__default["default"].createElement("div", {
-          "data-testid": dataTestId && dataTestId + "-children-wrapper",
-          className: "toggle-button-children-wrapper"
-        }, optionIconId && /*#__PURE__*/React__default["default"].createElement(DotIcon, {
+            optionTooltip = _a.tooltip,
+            optionValue = _a.value;
+        var commonProps = {
+          'aria-label': optionAriaLabel,
+          className: optionClassName,
+          disableFocusRipple: disableFocusRipple,
+          disableRipple: disableRipple,
+          disabled: optionDisabled,
+          key: key,
+          value: optionValue
+        };
+        var children = /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, optionIconId && /*#__PURE__*/React__default["default"].createElement(DotIcon, {
           className: "dot-toggle-icon",
           iconId: optionIconId
         }), optionText && /*#__PURE__*/React__default["default"].createElement(DotTypography, null, optionText));
-        return optionTooltip ? /*#__PURE__*/React__default["default"].createElement(DotTooltip, {
-          className: "toggle-button-tooltip",
-          title: optionTooltip
-        }, children) : children;
+        return optionTooltip ? /*#__PURE__*/React__default["default"].createElement(TooltipToggleButton, __assign({}, commonProps, {
+          CustomTooltipProps: {
+            title: optionTooltip
+          },
+          value: optionValue
+        }), children) : /*#__PURE__*/React__default["default"].createElement(lab.ToggleButton, __assign({}, commonProps), children);
       };
 
       return /*#__PURE__*/React__default["default"].createElement(StyledToggleButtonGroup, {
@@ -3893,21 +3917,19 @@
         size: size,
         value: value
       }, buttonOptions.map(function (option, key) {
-        var optionAriaLabel = option.ariaLabel,
-            optionClassName = option.className,
-            optionDisabled = option.disabled,
-            optionValue = option.value;
-        return /*#__PURE__*/React__default["default"].createElement(lab.ToggleButton, {
-          "aria-label": optionAriaLabel,
-          className: optionClassName,
-          disableFocusRipple: disableFocusRipple,
-          disableRipple: disableRipple,
-          disabled: optionDisabled,
-          key: key,
-          value: optionValue
-        }, renderToggleButtonChildren(option));
+        return renderToggleButton(option, key);
       }));
     };
+    /** Catch props and forward to ToggleButton */
+
+    var TooltipToggleButton = /*#__PURE__*/React.forwardRef(function (_a, ref) {
+      var CustomTooltipProps = _a.CustomTooltipProps,
+          props = __rest(_a, ["CustomTooltipProps"]);
+
+      return /*#__PURE__*/React__default["default"].createElement(core.Tooltip, __assign({}, CustomTooltipProps), /*#__PURE__*/React__default["default"].createElement(lab.ToggleButton, __assign({
+        ref: ref
+      }, props)));
+    });
 
     var DotCard = function DotCard(_a) {
       var ariaLabel = _a.ariaLabel,

package/lib/components/button-toggle/ButtonToggle.stories.data.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { ButtonToggleProps } from './';
+export declare const CommonButtonToggleStory: (args: ButtonToggleProps) => JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digital-ai/dot-components",
-  "version": "1.17.0",
+  "version": "1.17.1",
   "private": false,
   "license": "SEE LICENSE IN <LICENSE.md>",
   "contributors": [