@digital-ai/dot-components 1.16.1 → 1.17.2

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.
package/CHANGE_LOG.md CHANGED
@@ -1,5 +1,49 @@
1
1
  # Changelog
2
2
 
3
+ ## [1.17.2](https://github.com/digital-ai/dot-components/tree/1.17.2) (06/10/2022)
4
+
5
+ [Full Changelog](https://github.com/digital-ai/dot-components/compare/1.17.1...1.17.2)
6
+
7
+ **Features:**
8
+
9
+ - `InlineEdit` component should provide a tooltip out the box [\#1179](https://github.com/digital-ai/dot-components/issues/1179)
10
+ - S-84117: As a customer admin, I want the IdP creation flow to be more intuitive, as I find the existing user flow a little overwhelming [\#1185](https://github.com/digital-ai/dot-components/pull/1185) ([ryangamble](https://github.com/ryangamble))
11
+ - S-85283: `InlineEdit` component should provide a tooltip out the box [\#1181](https://github.com/digital-ai/dot-components/pull/1181) ([dmiletic85](https://github.com/dmiletic85))
12
+
13
+ **Fixed bugs:**
14
+
15
+ - Sidebar drawer/expanded does not have a data-testid prop supplied [\#1162](https://github.com/digital-ai/dot-components/issues/1162)
16
+ - D-21245: make sure `data-testid` is passed to nested lists [\#1182](https://github.com/digital-ai/dot-components/pull/1182) ([CWSites](https://github.com/CWSites))
17
+ - D-21267: adjust color of helper text [\#1174](https://github.com/digital-ai/dot-components/pull/1174) ([CWSites](https://github.com/CWSites))
18
+
19
+ ## [1.17.1](https://github.com/digital-ai/dot-components/tree/1.17.1) (05/19/2022)
20
+
21
+ [Full Changelog](https://github.com/digital-ai/dot-components/compare/1.17.0...1.17.1)
22
+
23
+ **Fixed bugs:**
24
+
25
+ - `DotButtonToggle`: Button size is not respected after tooltip change [\#1170](https://github.com/digital-ai/dot-components/issues/1170)
26
+ - 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))
27
+
28
+ ## [1.17.0](https://github.com/digital-ai/dot-components/tree/1.17.0) (05/18/2022)
29
+
30
+ [Full Changelog](https://github.com/digital-ai/dot-components/compare/1.16.1...1.17.0)
31
+
32
+ **Features:**
33
+
34
+ - `DotButtonToggle`: Add tooltip support [\#1164](https://github.com/digital-ai/dot-components/issues/1164)
35
+ - S-84947: `DotButtonToggle`: Add tooltip support [\#1166](https://github.com/digital-ai/dot-components/pull/1166) ([dmiletic85](https://github.com/dmiletic85))
36
+
37
+ **Fixed bugs:**
38
+
39
+ - `helperText` on input fields shouldn't be bold [\#1165](https://github.com/digital-ai/dot-components/issues/1165)
40
+ - `DotMenu` popup appears to be flickering on Safari [\#1123](https://github.com/digital-ai/dot-components/issues/1123)
41
+ - D-21265: `helperText` on input fields shouldn't be bold [\#1167](https://github.com/digital-ai/dot-components/pull/1167) ([dmiletic85](https://github.com/dmiletic85))
42
+
43
+ **Merged pull requests:**
44
+
45
+ - update release template with task for marking stories as done [\#1161](https://github.com/digital-ai/dot-components/pull/1161) ([CWSites](https://github.com/CWSites))
46
+
3
47
  ## [1.16.1](https://github.com/digital-ai/dot-components/tree/1.16.1) (05/12/2022)
4
48
 
5
49
  [Full Changelog](https://github.com/digital-ai/dot-components/compare/1.16.0...1.16.1)
@@ -847,7 +891,6 @@
847
891
  - S-78497: Add 'page' prop to DotTable [\#662](https://github.com/digital-ai/dot-components/pull/662) ([selsemore](https://github.com/selsemore))
848
892
  - Issue \#632: Add aria-label property [\#659](https://github.com/digital-ai/dot-components/pull/659) ([dmiletic85](https://github.com/dmiletic85))
849
893
  - S-78464: SonarQube [\#657](https://github.com/digital-ai/dot-components/pull/657) ([CWSites](https://github.com/CWSites))
850
- - S-78388: Export interfaces and types needed for table pagination and sorting [\#654](https://github.com/digital-ai/dot-components/pull/654) ([selsemore](https://github.com/selsemore))
851
894
  - S-77872: gather test coverage in sonarcloud [\#653](https://github.com/digital-ai/dot-components/pull/653) ([CWSites](https://github.com/CWSites))
852
895
 
853
896
  ## [1.0.8](https://github.com/digital-ai/dot-components/tree/1.0.8) (08/23/2021)
@@ -860,6 +903,7 @@
860
903
 
861
904
  **Merged pull requests:**
862
905
 
906
+ - S-78388: Export interfaces and types needed for table pagination and sorting [\#654](https://github.com/digital-ai/dot-components/pull/654) ([selsemore](https://github.com/selsemore))
863
907
  - add export back to component library [\#652](https://github.com/digital-ai/dot-components/pull/652) ([CWSites](https://github.com/CWSites))
864
908
  - add back missing items from export [\#651](https://github.com/digital-ai/dot-components/pull/651) ([TheKeithStewart](https://github.com/TheKeithStewart))
865
909
 
package/index.esm.js CHANGED
@@ -2084,6 +2084,7 @@ const DotListItem = ({
2084
2084
  }, showStartIcon && renderListItemStartIcon(), renderListItemText()), showEndIcon && renderListItemEndIcon())), hasChildren && /*#__PURE__*/React__default.createElement(NestedList, {
2085
2085
  anchorEl: anchorEl,
2086
2086
  ariaLabel: "nested list",
2087
+ "data-testid": "nestedList",
2087
2088
  items: _items2,
2088
2089
  menuPlacement: menuPlacement,
2089
2090
  nestedDrawerLeftSpacing: nestedDrawerLeftSpacing,
@@ -2095,6 +2096,7 @@ const DotListItem = ({
2095
2096
  const NestedList = ({
2096
2097
  ariaLabel,
2097
2098
  anchorEl,
2099
+ 'data-testid': dataTestId,
2098
2100
  items,
2099
2101
  menuPlacement,
2100
2102
  nestedDrawerLeftSpacing,
@@ -2121,6 +2123,7 @@ const NestedList = ({
2121
2123
  ariaLabel: ariaLabel,
2122
2124
  className: nestedListClassName,
2123
2125
  component: "div",
2126
+ "data-testid": dataTestId,
2124
2127
  disablePadding: true,
2125
2128
  items: items,
2126
2129
  key: parentItemIndex
@@ -2145,6 +2148,7 @@ const NestedList = ({
2145
2148
  }, /*#__PURE__*/React__default.createElement(StyledListItem, {
2146
2149
  className: flyoutItemClasses,
2147
2150
  component: href && !onClick ? 'a' : null,
2151
+ "data-testid": `${dataTestId}-item-${index}`,
2148
2152
  href: href,
2149
2153
  key: `${parentItemIndex}-${index}`,
2150
2154
  onClick: onClick,
@@ -2162,6 +2166,7 @@ const NestedList = ({
2162
2166
  anchorEl: anchorEl,
2163
2167
  ariaLabel: ariaLabel,
2164
2168
  className: flyoutMenuClassName,
2169
+ "data-testid": dataTestId,
2165
2170
  id: CreateUUID(),
2166
2171
  key: parentItemIndex,
2167
2172
  menuItemHeight: "auto",
@@ -2188,6 +2193,7 @@ const NestedList = ({
2188
2193
  ariaLabel: ariaLabel,
2189
2194
  className: nestedListClassName,
2190
2195
  component: "div",
2196
+ "data-testid": dataTestId,
2191
2197
  disablePadding: true,
2192
2198
  items: items,
2193
2199
  key: parentItemIndex,
@@ -2678,7 +2684,7 @@ const StyledTextField = styled(TextField).withConfig({
2678
2684
  })(["", ""], ({
2679
2685
  theme,
2680
2686
  InputProps
2681
- }) => css(["&.", "{.MuiInputBase-root{background:", "}.MuiInputBase-input{box-sizing:content-box;}.MuiOutlinedInput-notchedOutline{border-color:", "}.MuiOutlinedInput-input{padding:", ";}.MuiOutlinedInput-inputMarginDense{padding-top:10.5px;padding-bottom:10.5px;}.MuiOutlinedInput-inputMultiline{padding:0;}}&.", ",&.", "{.dot-adornment-icon .dot-icon i{margin-top:-2px;}.MuiFormLabel-root.Mui-focused{color:", "}select.dot-select{background:", ";}.MuiSelect-select:focus{background-color:transparent;}.Mui-error .", "{color:", ";}.MuiSelect-icon{right:", ";}&.", "{.MuiOutlinedInput-notchedOutline{border-color:", ";}.MuiInputLabel-outlined.MuiInputLabel-shrink{color:", ";}.", "{color:", ";}}.MuiOutlinedInput-adornedStart{padding-left:12px;}.MuiOutlinedInput-adornedEnd{padding-right:12px;}.MuiFormHelperText-root{font-size:", "px;margin:", ";display:flex;align-items:flex-end;&:not(.Mui-error){color:", ";}}.Mui-focused .MuiOutlinedInput-notchedOutline{border-color:", ";}"], rootClassName$G, theme.palette.product === 'agility' && theme.palette.layer.n0, theme.palette.product === 'agility' && theme.palette.layer.n100, InputProps.startAdornment ? `18px 12px 18px 0px` : `18px 12px`, rootSelectClassName, rootClassName$G, theme.palette.product === 'agility' && theme.palette.layer.n700, theme.palette.product === 'agility' && theme.palette.layer.n0, adornmentIconClassName, theme.palette.error[500], InputProps.endAdornment ? `44px` : `12px`, warningClassName, theme.palette.warning[500], theme.palette.grey[700], adornmentIconClassName, theme.palette.warning[500], theme.typography.body2.fontSize, theme.spacing(0, 0, 0, 2), theme.palette.grey[700], theme.palette.product === 'agility' && agilityGreen));
2687
+ }) => css(["&.", "{.MuiInputBase-root{background:", "}.MuiInputBase-input{box-sizing:content-box;}.MuiOutlinedInput-notchedOutline{border-color:", "}.MuiOutlinedInput-input{padding:", ";}.MuiOutlinedInput-inputMarginDense{padding-top:10.5px;padding-bottom:10.5px;}.MuiOutlinedInput-inputMultiline{padding:0;}}&.", ",&.", "{.dot-adornment-icon .dot-icon i{margin-top:-2px;}.MuiFormLabel-root.Mui-focused{color:", "}select.dot-select{background:", ";}.MuiSelect-select:focus{background-color:transparent;}.Mui-error .", "{color:", ";}.MuiSelect-icon{right:", ";}&.", "{.MuiOutlinedInput-notchedOutline{border-color:", ";}.MuiInputLabel-outlined.MuiInputLabel-shrink{color:", ";}.", "{color:", ";}}.MuiOutlinedInput-adornedStart{padding-left:12px;}.MuiOutlinedInput-adornedEnd{padding-right:12px;}.MuiFormHelperText-root{font-family:", ";font-size:", "px;margin:", ";display:flex;align-items:flex-end;&:not(.Mui-error){color:", ";}}.Mui-focused .MuiOutlinedInput-notchedOutline{border-color:", ";}"], rootClassName$G, theme.palette.product === 'agility' && theme.palette.layer.n0, theme.palette.product === 'agility' && theme.palette.layer.n100, InputProps.startAdornment ? `18px 12px 18px 0px` : `18px 12px`, rootSelectClassName, rootClassName$G, theme.palette.product === 'agility' && theme.palette.layer.n700, theme.palette.product === 'agility' && theme.palette.layer.n0, adornmentIconClassName, theme.palette.error[500], InputProps.endAdornment ? `44px` : `12px`, warningClassName, theme.palette.warning[500], theme.palette.grey[700], adornmentIconClassName, theme.palette.warning[500], theme.typography.body2.fontFamily, theme.typography.body2.fontSize, theme.spacing(0, 0, 0, 2), theme.palette.grey[400], theme.palette.product === 'agility' && agilityGreen));
2682
2688
 
2683
2689
  const rootClassName$F = 'dot-button';
2684
2690
  const StyledButton = styled(Button).withConfig({
@@ -3510,13 +3516,50 @@ const DotBreadcrumbs = ({
3510
3516
  }));
3511
3517
  };
3512
3518
 
3519
+ /*! *****************************************************************************
3520
+ Copyright (c) Microsoft Corporation.
3521
+
3522
+ Permission to use, copy, modify, and/or distribute this software for any
3523
+ purpose with or without fee is hereby granted.
3524
+
3525
+ THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
3526
+ REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
3527
+ AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
3528
+ INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
3529
+ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
3530
+ OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
3531
+ PERFORMANCE OF THIS SOFTWARE.
3532
+ ***************************************************************************** */
3533
+
3534
+ function __rest(s, e) {
3535
+ var t = {};
3536
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
3537
+ t[p] = s[p];
3538
+ if (s != null && typeof Object.getOwnPropertySymbols === "function")
3539
+ for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
3540
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
3541
+ t[p[i]] = s[p[i]];
3542
+ }
3543
+ return t;
3544
+ }
3545
+
3546
+ function __awaiter(thisArg, _arguments, P, generator) {
3547
+ function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
3548
+ return new (P || (P = Promise))(function (resolve, reject) {
3549
+ function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
3550
+ function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
3551
+ function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
3552
+ step((generator = generator.apply(thisArg, _arguments || [])).next());
3553
+ });
3554
+ }
3555
+
3513
3556
  const rootClassName$C = 'dot-button-toggle';
3514
3557
  const StyledToggleButtonGroup = styled(ToggleButtonGroup).withConfig({
3515
3558
  displayName: "ButtonTogglestyles__StyledToggleButtonGroup",
3516
3559
  componentId: "sc-1oh4ljv-0"
3517
3560
  })(["", ""], ({
3518
3561
  theme
3519
- }) => css(["&.", "{.dot-icon{+ p{margin-left:", "px;}i{height:auto;}}.MuiToggleButton-label{color:", ";p{margin-bottom:0;}}.MuiToggleButtonGroup-groupedHorizontal{border:1px solid ", ";border-radius:0px;: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]));
3562
+ }) => 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]));
3520
3563
 
3521
3564
  const DotButtonToggle = ({
3522
3565
  ariaLabel,
@@ -3532,6 +3575,37 @@ const DotButtonToggle = ({
3532
3575
  value
3533
3576
  }) => {
3534
3577
  const rootClasses = useStylesWithRootClass(rootClassName$C, className);
3578
+
3579
+ const renderToggleButton = ({
3580
+ ariaLabel: optionAriaLabel,
3581
+ className: optionClassName,
3582
+ disabled: optionDisabled,
3583
+ iconId: optionIconId,
3584
+ text: optionText,
3585
+ tooltip: optionTooltip,
3586
+ value: optionValue
3587
+ }, key) => {
3588
+ const commonProps = {
3589
+ 'aria-label': optionAriaLabel,
3590
+ className: optionClassName,
3591
+ disableFocusRipple: _disableFocusRipple,
3592
+ disableRipple: _disableRipple,
3593
+ disabled: optionDisabled,
3594
+ key,
3595
+ value: optionValue
3596
+ };
3597
+ const children = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, optionIconId && /*#__PURE__*/React__default.createElement(DotIcon, {
3598
+ className: "dot-toggle-icon",
3599
+ iconId: optionIconId
3600
+ }), optionText && /*#__PURE__*/React__default.createElement(DotTypography, null, optionText));
3601
+ return optionTooltip ? /*#__PURE__*/React__default.createElement(TooltipToggleButton, Object.assign({}, commonProps, {
3602
+ CustomTooltipProps: {
3603
+ title: optionTooltip
3604
+ },
3605
+ value: optionValue
3606
+ }), children) : /*#__PURE__*/React__default.createElement(ToggleButton, Object.assign({}, commonProps), children);
3607
+ };
3608
+
3535
3609
  return /*#__PURE__*/React__default.createElement(StyledToggleButtonGroup, {
3536
3610
  "aria-label": ariaLabel,
3537
3611
  classes: {
@@ -3544,28 +3618,21 @@ const DotButtonToggle = ({
3544
3618
  size: _size,
3545
3619
  value: value
3546
3620
  }, buttonOptions.map((option, key) => {
3547
- const {
3548
- ariaLabel: optionAriaLabel,
3549
- className: optionClassName,
3550
- disabled: optionDisabled,
3551
- iconId: optionIconId,
3552
- text: optionText,
3553
- value: optionValue
3554
- } = option;
3555
- return /*#__PURE__*/React__default.createElement(ToggleButton, {
3556
- "aria-label": optionAriaLabel,
3557
- className: optionClassName,
3558
- disableFocusRipple: _disableFocusRipple,
3559
- disableRipple: _disableRipple,
3560
- disabled: optionDisabled,
3561
- key: key,
3562
- value: optionValue
3563
- }, optionIconId && /*#__PURE__*/React__default.createElement(DotIcon, {
3564
- className: "dot-toggle-icon",
3565
- iconId: optionIconId
3566
- }), optionText && /*#__PURE__*/React__default.createElement(DotTypography, null, optionText));
3621
+ return renderToggleButton(option, key);
3567
3622
  }));
3568
3623
  };
3624
+ /** Catch props and forward to ToggleButton */
3625
+
3626
+ const TooltipToggleButton = /*#__PURE__*/forwardRef((_a, ref) => {
3627
+ var {
3628
+ CustomTooltipProps
3629
+ } = _a,
3630
+ props = __rest(_a, ["CustomTooltipProps"]);
3631
+
3632
+ return /*#__PURE__*/React__default.createElement(Tooltip, Object.assign({}, CustomTooltipProps), /*#__PURE__*/React__default.createElement(ToggleButton, Object.assign({
3633
+ ref: ref
3634
+ }, props)));
3635
+ });
3569
3636
 
3570
3637
  const DotCard = ({
3571
3638
  ariaLabel,
@@ -4508,6 +4575,7 @@ const getInitialState = value => ({
4508
4575
  });
4509
4576
 
4510
4577
  const DotInputText = ({
4578
+ autoComplete: _autoComplete = 'off',
4511
4579
  autoFocus,
4512
4580
  className,
4513
4581
  defaultValue,
@@ -4596,7 +4664,7 @@ const DotInputText = ({
4596
4664
  }, endAdornmentIcon)
4597
4665
  },
4598
4666
  "aria-label": name,
4599
- autoComplete: "off",
4667
+ autoComplete: _autoComplete,
4600
4668
  autoFocus: autoFocus,
4601
4669
  classes: {
4602
4670
  root: rootStyles
@@ -5563,31 +5631,6 @@ const DotDynamicForm = ({
5563
5631
  }, buildFormControls(config.controls));
5564
5632
  };
5565
5633
 
5566
- /*! *****************************************************************************
5567
- Copyright (c) Microsoft Corporation.
5568
-
5569
- Permission to use, copy, modify, and/or distribute this software for any
5570
- purpose with or without fee is hereby granted.
5571
-
5572
- THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
5573
- REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
5574
- AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
5575
- INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
5576
- LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
5577
- OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
5578
- PERFORMANCE OF THIS SOFTWARE.
5579
- ***************************************************************************** */
5580
-
5581
- function __awaiter(thisArg, _arguments, P, generator) {
5582
- function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
5583
- return new (P || (P = Promise))(function (resolve, reject) {
5584
- function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
5585
- function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
5586
- function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
5587
- step((generator = generator.apply(thisArg, _arguments || [])).next());
5588
- });
5589
- }
5590
-
5591
5634
  const rootClassName$n = 'dot-inline-edit';
5592
5635
  const editModeClassName = 'dot-edit-mode';
5593
5636
  const viewModeClassName = 'dot-view-mode';
@@ -5690,6 +5733,7 @@ const DotInlineEdit = ({
5690
5733
  onChange,
5691
5734
  onEditStateChange,
5692
5735
  readOnly,
5736
+ tooltip,
5693
5737
  typography: _typography = 'body1',
5694
5738
  value: _value = ''
5695
5739
  }) => {
@@ -5773,10 +5817,7 @@ const DotInlineEdit = ({
5773
5817
 
5774
5818
  const renderViewMode = () => {
5775
5819
  const viewModeClasses = useStylesWithRootClass(viewModeClassName, readOnly ? readOnlyClassName : '');
5776
- return /*#__PURE__*/React__default.createElement("div", {
5777
- className: viewModeClasses,
5778
- "data-testid": dataTestId && `${dataTestId}-view-mode-wrapper`
5779
- }, /*#__PURE__*/React__default.createElement(DotTypography, {
5820
+ const viewModeChildren = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(DotTypography, {
5780
5821
  className: "dot-view-mode-typography",
5781
5822
  "data-testid": dataTestId && `${dataTestId}-view-mode-typography`,
5782
5823
  variant: _typography
@@ -5785,6 +5826,14 @@ const DotInlineEdit = ({
5785
5826
  "data-testid": dataTestId && `${dataTestId}-edit-icon`,
5786
5827
  iconId: "edit"
5787
5828
  }));
5829
+ return tooltip ? /*#__PURE__*/React__default.createElement(DotTooltip, {
5830
+ title: tooltip,
5831
+ className: viewModeClasses,
5832
+ "data-testid": dataTestId && `${dataTestId}-view-mode-tooltip-wrapper`
5833
+ }, viewModeChildren) : /*#__PURE__*/React__default.createElement("div", {
5834
+ className: viewModeClasses,
5835
+ "data-testid": dataTestId && `${dataTestId}-view-mode-wrapper`
5836
+ }, viewModeChildren);
5788
5837
  };
5789
5838
 
5790
5839
  const renderEditMode = () => {
package/index.umd.js CHANGED
@@ -55,6 +55,18 @@
55
55
  return __assign.apply(this, arguments);
56
56
  };
57
57
 
58
+ function __rest(s, e) {
59
+ var t = {};
60
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
61
+ t[p] = s[p];
62
+ if (s != null && typeof Object.getOwnPropertySymbols === "function")
63
+ for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
64
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
65
+ t[p[i]] = s[p[i]];
66
+ }
67
+ return t;
68
+ }
69
+
58
70
  function __awaiter(thisArg, _arguments, P, generator) {
59
71
  function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
60
72
  return new (P || (P = Promise))(function (resolve, reject) {
@@ -2288,6 +2300,7 @@
2288
2300
  }, showStartIcon && renderListItemStartIcon(), renderListItemText()), showEndIcon && renderListItemEndIcon())), hasChildren && /*#__PURE__*/React__default["default"].createElement(NestedList, {
2289
2301
  anchorEl: anchorEl,
2290
2302
  ariaLabel: "nested list",
2303
+ "data-testid": "nestedList",
2291
2304
  items: items,
2292
2305
  menuPlacement: menuPlacement,
2293
2306
  nestedDrawerLeftSpacing: nestedDrawerLeftSpacing,
@@ -2299,6 +2312,7 @@
2299
2312
  var NestedList = function NestedList(_a) {
2300
2313
  var ariaLabel = _a.ariaLabel,
2301
2314
  anchorEl = _a.anchorEl,
2315
+ dataTestId = _a["data-testid"],
2302
2316
  items = _a.items,
2303
2317
  menuPlacement = _a.menuPlacement,
2304
2318
  nestedDrawerLeftSpacing = _a.nestedDrawerLeftSpacing,
@@ -2324,6 +2338,7 @@
2324
2338
  ariaLabel: ariaLabel,
2325
2339
  className: nestedListClassName,
2326
2340
  component: "div",
2341
+ "data-testid": dataTestId,
2327
2342
  disablePadding: true,
2328
2343
  items: items,
2329
2344
  key: parentItemIndex
@@ -2346,6 +2361,7 @@
2346
2361
  }, /*#__PURE__*/React__default["default"].createElement(StyledListItem, {
2347
2362
  className: flyoutItemClasses,
2348
2363
  component: href && !onClick ? 'a' : null,
2364
+ "data-testid": dataTestId + "-item-" + index,
2349
2365
  href: href,
2350
2366
  key: parentItemIndex + "-" + index,
2351
2367
  onClick: onClick,
@@ -2363,6 +2379,7 @@
2363
2379
  anchorEl: anchorEl,
2364
2380
  ariaLabel: ariaLabel,
2365
2381
  className: flyoutMenuClassName,
2382
+ "data-testid": dataTestId,
2366
2383
  id: CreateUUID(),
2367
2384
  key: parentItemIndex,
2368
2385
  menuItemHeight: "auto",
@@ -2389,6 +2406,7 @@
2389
2406
  ariaLabel: ariaLabel,
2390
2407
  className: nestedListClassName,
2391
2408
  component: "div",
2409
+ "data-testid": dataTestId,
2392
2410
  disablePadding: true,
2393
2411
  items: items,
2394
2412
  key: parentItemIndex,
@@ -2917,7 +2935,7 @@
2917
2935
  })(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
2918
2936
  var theme = _a.theme,
2919
2937
  InputProps = _a.InputProps;
2920
- return styled.css(templateObject_2$H || (templateObject_2$H = __makeTemplateObject(["\n &.", " {\n .MuiInputBase-root {\n background: ", "\n }\n .MuiInputBase-input {\n box-sizing: content-box;\n }\n .MuiOutlinedInput-notchedOutline {\n border-color: ", "\n }\n .MuiOutlinedInput-input {\n padding: ", ";\n }\n .MuiOutlinedInput-inputMarginDense {\n padding-top: 10.5px;\n padding-bottom: 10.5px;\n }\n .MuiOutlinedInput-inputMultiline {\n padding: 0;\n }\n }\n &.", ", &.", " {\n .dot-adornment-icon .dot-icon i {\n margin-top: -2px;\n }\n .MuiFormLabel-root.Mui-focused {\n color: ", "\n }\n select.dot-select {\n background: ", ";\n }\n .MuiSelect-select:focus {\n background-color: transparent;\n }\n .Mui-error .", " {\n color: ", ";\n }\n .MuiSelect-icon {\n right: ", ";\n }\n &.", " {\n .MuiOutlinedInput-notchedOutline {\n border-color: ", ";\n }\n .MuiInputLabel-outlined.MuiInputLabel-shrink {\n color: ", ";\n }\n .", " {\n color: ", ";\n }\n }\n .MuiOutlinedInput-adornedStart {\n padding-left: 12px;\n }\n .MuiOutlinedInput-adornedEnd {\n padding-right: 12px;\n }\n .MuiFormHelperText-root {\n font-size: ", "px;\n margin: ", ";\n display: flex;\n align-items: flex-end;\n &:not(.Mui-error) {\n color: ", ";\n }\n }\n .Mui-focused .MuiOutlinedInput-notchedOutline {\n border-color: ", ";\n }\n "], ["\n &.", " {\n .MuiInputBase-root {\n background: ", "\n }\n .MuiInputBase-input {\n box-sizing: content-box;\n }\n .MuiOutlinedInput-notchedOutline {\n border-color: ", "\n }\n .MuiOutlinedInput-input {\n padding: ", ";\n }\n .MuiOutlinedInput-inputMarginDense {\n padding-top: 10.5px;\n padding-bottom: 10.5px;\n }\n .MuiOutlinedInput-inputMultiline {\n padding: 0;\n }\n }\n &.", ", &.", " {\n .dot-adornment-icon .dot-icon i {\n margin-top: -2px;\n }\n .MuiFormLabel-root.Mui-focused {\n color: ", "\n }\n select.dot-select {\n background: ", ";\n }\n .MuiSelect-select:focus {\n background-color: transparent;\n }\n .Mui-error .", " {\n color: ", ";\n }\n .MuiSelect-icon {\n right: ", ";\n }\n &.", " {\n .MuiOutlinedInput-notchedOutline {\n border-color: ", ";\n }\n .MuiInputLabel-outlined.MuiInputLabel-shrink {\n color: ", ";\n }\n .", " {\n color: ", ";\n }\n }\n .MuiOutlinedInput-adornedStart {\n padding-left: 12px;\n }\n .MuiOutlinedInput-adornedEnd {\n padding-right: 12px;\n }\n .MuiFormHelperText-root {\n font-size: ", "px;\n margin: ", ";\n display: flex;\n align-items: flex-end;\n &:not(.Mui-error) {\n color: ", ";\n }\n }\n .Mui-focused .MuiOutlinedInput-notchedOutline {\n border-color: ", ";\n }\n "])), rootClassName$G, theme.palette.product === 'agility' && theme.palette.layer.n0, theme.palette.product === 'agility' && theme.palette.layer.n100, InputProps.startAdornment ? "18px 12px 18px 0px" : "18px 12px", rootSelectClassName, rootClassName$G, theme.palette.product === 'agility' && theme.palette.layer.n700, theme.palette.product === 'agility' && theme.palette.layer.n0, adornmentIconClassName, theme.palette.error[500], InputProps.endAdornment ? "44px" : "12px", warningClassName, theme.palette.warning[500], theme.palette.grey[700], adornmentIconClassName, theme.palette.warning[500], theme.typography.body2.fontSize, theme.spacing(0, 0, 0, 2), theme.palette.grey[700], theme.palette.product === 'agility' && agilityGreen);
2938
+ return styled.css(templateObject_2$H || (templateObject_2$H = __makeTemplateObject(["\n &.", " {\n .MuiInputBase-root {\n background: ", "\n }\n .MuiInputBase-input {\n box-sizing: content-box;\n }\n .MuiOutlinedInput-notchedOutline {\n border-color: ", "\n }\n .MuiOutlinedInput-input {\n padding: ", ";\n }\n .MuiOutlinedInput-inputMarginDense {\n padding-top: 10.5px;\n padding-bottom: 10.5px;\n }\n .MuiOutlinedInput-inputMultiline {\n padding: 0;\n }\n }\n &.", ", &.", " {\n .dot-adornment-icon .dot-icon i {\n margin-top: -2px;\n }\n .MuiFormLabel-root.Mui-focused {\n color: ", "\n }\n select.dot-select {\n background: ", ";\n }\n .MuiSelect-select:focus {\n background-color: transparent;\n }\n .Mui-error .", " {\n color: ", ";\n }\n .MuiSelect-icon {\n right: ", ";\n }\n &.", " {\n .MuiOutlinedInput-notchedOutline {\n border-color: ", ";\n }\n .MuiInputLabel-outlined.MuiInputLabel-shrink {\n color: ", ";\n }\n .", " {\n color: ", ";\n }\n }\n .MuiOutlinedInput-adornedStart {\n padding-left: 12px;\n }\n .MuiOutlinedInput-adornedEnd {\n padding-right: 12px;\n }\n .MuiFormHelperText-root {\n font-family: ", ";\n font-size: ", "px;\n margin: ", ";\n display: flex;\n align-items: flex-end;\n &:not(.Mui-error) {\n color: ", ";\n }\n }\n .Mui-focused .MuiOutlinedInput-notchedOutline {\n border-color: ", ";\n }\n "], ["\n &.", " {\n .MuiInputBase-root {\n background: ", "\n }\n .MuiInputBase-input {\n box-sizing: content-box;\n }\n .MuiOutlinedInput-notchedOutline {\n border-color: ", "\n }\n .MuiOutlinedInput-input {\n padding: ", ";\n }\n .MuiOutlinedInput-inputMarginDense {\n padding-top: 10.5px;\n padding-bottom: 10.5px;\n }\n .MuiOutlinedInput-inputMultiline {\n padding: 0;\n }\n }\n &.", ", &.", " {\n .dot-adornment-icon .dot-icon i {\n margin-top: -2px;\n }\n .MuiFormLabel-root.Mui-focused {\n color: ", "\n }\n select.dot-select {\n background: ", ";\n }\n .MuiSelect-select:focus {\n background-color: transparent;\n }\n .Mui-error .", " {\n color: ", ";\n }\n .MuiSelect-icon {\n right: ", ";\n }\n &.", " {\n .MuiOutlinedInput-notchedOutline {\n border-color: ", ";\n }\n .MuiInputLabel-outlined.MuiInputLabel-shrink {\n color: ", ";\n }\n .", " {\n color: ", ";\n }\n }\n .MuiOutlinedInput-adornedStart {\n padding-left: 12px;\n }\n .MuiOutlinedInput-adornedEnd {\n padding-right: 12px;\n }\n .MuiFormHelperText-root {\n font-family: ", ";\n font-size: ", "px;\n margin: ", ";\n display: flex;\n align-items: flex-end;\n &:not(.Mui-error) {\n color: ", ";\n }\n }\n .Mui-focused .MuiOutlinedInput-notchedOutline {\n border-color: ", ";\n }\n "])), rootClassName$G, theme.palette.product === 'agility' && theme.palette.layer.n0, theme.palette.product === 'agility' && theme.palette.layer.n100, InputProps.startAdornment ? "18px 12px 18px 0px" : "18px 12px", rootSelectClassName, rootClassName$G, theme.palette.product === 'agility' && theme.palette.layer.n700, theme.palette.product === 'agility' && theme.palette.layer.n0, adornmentIconClassName, theme.palette.error[500], InputProps.endAdornment ? "44px" : "12px", warningClassName, theme.palette.warning[500], theme.palette.grey[700], adornmentIconClassName, theme.palette.warning[500], theme.typography.body2.fontFamily, theme.typography.body2.fontSize, theme.spacing(0, 0, 0, 2), theme.palette.grey[400], theme.palette.product === 'agility' && agilityGreen);
2921
2939
  });
2922
2940
  var templateObject_1$J, templateObject_2$H, templateObject_3$7;
2923
2941
 
@@ -3840,7 +3858,7 @@
3840
3858
  componentId: "sc-1oh4ljv-0"
3841
3859
  })(templateObject_2$D || (templateObject_2$D = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
3842
3860
  var theme = _a.theme;
3843
- 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: 0px;\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: 0px;\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]);
3861
+ 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]);
3844
3862
  });
3845
3863
  var templateObject_1$F, templateObject_2$D;
3846
3864
 
@@ -3863,6 +3881,36 @@
3863
3881
  size = _g === void 0 ? 'medium' : _g,
3864
3882
  value = _a.value;
3865
3883
  var rootClasses = useStylesWithRootClass(rootClassName$C, className);
3884
+
3885
+ var renderToggleButton = function renderToggleButton(_a, key) {
3886
+ var optionAriaLabel = _a.ariaLabel,
3887
+ optionClassName = _a.className,
3888
+ optionDisabled = _a.disabled,
3889
+ optionIconId = _a.iconId,
3890
+ optionText = _a.text,
3891
+ optionTooltip = _a.tooltip,
3892
+ optionValue = _a.value;
3893
+ var commonProps = {
3894
+ 'aria-label': optionAriaLabel,
3895
+ className: optionClassName,
3896
+ disableFocusRipple: disableFocusRipple,
3897
+ disableRipple: disableRipple,
3898
+ disabled: optionDisabled,
3899
+ key: key,
3900
+ value: optionValue
3901
+ };
3902
+ var children = /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, optionIconId && /*#__PURE__*/React__default["default"].createElement(DotIcon, {
3903
+ className: "dot-toggle-icon",
3904
+ iconId: optionIconId
3905
+ }), optionText && /*#__PURE__*/React__default["default"].createElement(DotTypography, null, optionText));
3906
+ return optionTooltip ? /*#__PURE__*/React__default["default"].createElement(TooltipToggleButton, __assign({}, commonProps, {
3907
+ CustomTooltipProps: {
3908
+ title: optionTooltip
3909
+ },
3910
+ value: optionValue
3911
+ }), children) : /*#__PURE__*/React__default["default"].createElement(lab.ToggleButton, __assign({}, commonProps), children);
3912
+ };
3913
+
3866
3914
  return /*#__PURE__*/React__default["default"].createElement(StyledToggleButtonGroup, {
3867
3915
  "aria-label": ariaLabel,
3868
3916
  classes: {
@@ -3875,26 +3923,19 @@
3875
3923
  size: size,
3876
3924
  value: value
3877
3925
  }, buttonOptions.map(function (option, key) {
3878
- var optionAriaLabel = option.ariaLabel,
3879
- optionClassName = option.className,
3880
- optionDisabled = option.disabled,
3881
- optionIconId = option.iconId,
3882
- optionText = option.text,
3883
- optionValue = option.value;
3884
- return /*#__PURE__*/React__default["default"].createElement(lab.ToggleButton, {
3885
- "aria-label": optionAriaLabel,
3886
- className: optionClassName,
3887
- disableFocusRipple: disableFocusRipple,
3888
- disableRipple: disableRipple,
3889
- disabled: optionDisabled,
3890
- key: key,
3891
- value: optionValue
3892
- }, optionIconId && /*#__PURE__*/React__default["default"].createElement(DotIcon, {
3893
- className: "dot-toggle-icon",
3894
- iconId: optionIconId
3895
- }), optionText && /*#__PURE__*/React__default["default"].createElement(DotTypography, null, optionText));
3926
+ return renderToggleButton(option, key);
3896
3927
  }));
3897
3928
  };
3929
+ /** Catch props and forward to ToggleButton */
3930
+
3931
+ var TooltipToggleButton = /*#__PURE__*/React.forwardRef(function (_a, ref) {
3932
+ var CustomTooltipProps = _a.CustomTooltipProps,
3933
+ props = __rest(_a, ["CustomTooltipProps"]);
3934
+
3935
+ return /*#__PURE__*/React__default["default"].createElement(core.Tooltip, __assign({}, CustomTooltipProps), /*#__PURE__*/React__default["default"].createElement(lab.ToggleButton, __assign({
3936
+ ref: ref
3937
+ }, props)));
3938
+ });
3898
3939
 
3899
3940
  var DotCard = function DotCard(_a) {
3900
3941
  var ariaLabel = _a.ariaLabel,
@@ -4889,24 +4930,26 @@
4889
4930
  };
4890
4931
 
4891
4932
  var DotInputText = function DotInputText(_a) {
4892
- var autoFocus = _a.autoFocus,
4933
+ var _b = _a.autoComplete,
4934
+ autoComplete = _b === void 0 ? 'off' : _b,
4935
+ autoFocus = _a.autoFocus,
4893
4936
  className = _a.className,
4894
4937
  defaultValue = _a.defaultValue,
4895
4938
  dataTestId = _a["data-testid"],
4896
- _b = _a.disabled,
4897
- disabled = _b === void 0 ? false : _b,
4898
- _c = _a.error,
4899
- error = _c === void 0 ? false : _c,
4900
- _d = _a.fullWidth,
4901
- fullWidth = _d === void 0 ? true : _d,
4939
+ _c = _a.disabled,
4940
+ disabled = _c === void 0 ? false : _c,
4941
+ _d = _a.error,
4942
+ error = _d === void 0 ? false : _d,
4943
+ _e = _a.fullWidth,
4944
+ fullWidth = _e === void 0 ? true : _e,
4902
4945
  hasDebounce = _a.hasDebounce,
4903
4946
  helperText = _a.helperText,
4904
4947
  endIcon = _a.endIcon,
4905
4948
  id = _a.id,
4906
4949
  inputRef = _a.inputRef,
4907
4950
  label = _a.label,
4908
- _e = _a.multiline,
4909
- multiline = _e === void 0 ? false : _e,
4951
+ _f = _a.multiline,
4952
+ multiline = _f === void 0 ? false : _f,
4910
4953
  name = _a.name,
4911
4954
  onBlur = _a.onBlur,
4912
4955
  onChange = _a.onChange,
@@ -4914,25 +4957,25 @@
4914
4957
  onKeyDown = _a.onKeyDown,
4915
4958
  onMouseUp = _a.onMouseUp,
4916
4959
  placeholder = _a.placeholder,
4917
- _f = _a.readOnly,
4918
- readOnly = _f === void 0 ? false : _f,
4919
- _g = _a.required,
4920
- required = _g === void 0 ? false : _g,
4960
+ _g = _a.readOnly,
4961
+ readOnly = _g === void 0 ? false : _g,
4962
+ _h = _a.required,
4963
+ required = _h === void 0 ? false : _h,
4921
4964
  rows = _a.rows,
4922
4965
  rowsMax = _a.rowsMax,
4923
4966
  startIcon = _a.startIcon,
4924
- _h = _a.size,
4925
- size = _h === void 0 ? 'small' : _h,
4926
- _j = _a.type,
4927
- type = _j === void 0 ? 'text' : _j,
4967
+ _j = _a.size,
4968
+ size = _j === void 0 ? 'small' : _j,
4969
+ _k = _a.type,
4970
+ type = _k === void 0 ? 'text' : _k,
4928
4971
  value = _a.value,
4929
- _k = _a.warning,
4930
- warning = _k === void 0 ? false : _k;
4972
+ _l = _a.warning,
4973
+ warning = _l === void 0 ? false : _l;
4931
4974
  var hasWarning = !error && warning ? warningClassName : ''; // This state is used only with debounce feature enabled
4932
4975
 
4933
- var _l = React.useState(hasDebounce && getInitialState(value)),
4934
- inputTextState = _l[0],
4935
- setInputTextState = _l[1];
4976
+ var _m = React.useState(hasDebounce && getInitialState(value)),
4977
+ inputTextState = _m[0],
4978
+ setInputTextState = _m[1];
4936
4979
 
4937
4980
  var renderIcon = function renderIcon(iconType) {
4938
4981
  return /*#__PURE__*/React__default["default"].createElement(DotIcon, {
@@ -4989,7 +5032,7 @@
4989
5032
  }, endAdornmentIcon)
4990
5033
  },
4991
5034
  "aria-label": name,
4992
- autoComplete: "off",
5035
+ autoComplete: autoComplete,
4993
5036
  autoFocus: autoFocus,
4994
5037
  classes: {
4995
5038
  root: rootStyles
@@ -6086,6 +6129,7 @@
6086
6129
  onChange = _a.onChange,
6087
6130
  onEditStateChange = _a.onEditStateChange,
6088
6131
  readOnly = _a.readOnly,
6132
+ tooltip = _a.tooltip,
6089
6133
  _c = _a.typography,
6090
6134
  typography = _c === void 0 ? 'body1' : _c,
6091
6135
  _d = _a.value,
@@ -6267,10 +6311,7 @@
6267
6311
 
6268
6312
  var renderViewMode = function renderViewMode() {
6269
6313
  var viewModeClasses = useStylesWithRootClass(viewModeClassName, readOnly ? readOnlyClassName : '');
6270
- return /*#__PURE__*/React__default["default"].createElement("div", {
6271
- className: viewModeClasses,
6272
- "data-testid": dataTestId && dataTestId + "-view-mode-wrapper"
6273
- }, /*#__PURE__*/React__default["default"].createElement(DotTypography, {
6314
+ var viewModeChildren = /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(DotTypography, {
6274
6315
  className: "dot-view-mode-typography",
6275
6316
  "data-testid": dataTestId && dataTestId + "-view-mode-typography",
6276
6317
  variant: typography
@@ -6279,6 +6320,14 @@
6279
6320
  "data-testid": dataTestId && dataTestId + "-edit-icon",
6280
6321
  iconId: "edit"
6281
6322
  }));
6323
+ return tooltip ? /*#__PURE__*/React__default["default"].createElement(DotTooltip, {
6324
+ title: tooltip,
6325
+ className: viewModeClasses,
6326
+ "data-testid": dataTestId && dataTestId + "-view-mode-tooltip-wrapper"
6327
+ }, viewModeChildren) : /*#__PURE__*/React__default["default"].createElement("div", {
6328
+ className: viewModeClasses,
6329
+ "data-testid": dataTestId && dataTestId + "-view-mode-wrapper"
6330
+ }, viewModeChildren);
6282
6331
  };
6283
6332
 
6284
6333
  var renderEditMode = function renderEditMode() {
@@ -0,0 +1,3 @@
1
+ /// <reference types="react" />
2
+ import { ButtonToggleProps } from './';
3
+ export declare const CommonButtonToggleStory: (args: ButtonToggleProps) => JSX.Element;
@@ -8,5 +8,6 @@ export interface ButtonToggleOption extends CommonProps {
8
8
  disabled?: boolean;
9
9
  iconId?: string;
10
10
  text?: string;
11
+ tooltip?: string;
11
12
  value: ButtonToggleValue;
12
13
  }
@@ -19,6 +19,8 @@ export interface InlineEditProps extends CommonProps {
19
19
  onEditStateChange?: (editing: boolean) => void;
20
20
  /** If true, component will behave like a regular text (editing functionality will be disabled). */
21
21
  readOnly?: boolean;
22
+ /** Tooltip text displayed on hover */
23
+ tooltip?: string;
22
24
  /** Typography variant to be used */
23
25
  typography?: TypographyVariant;
24
26
  /** default value that is displayed on load */
@@ -27,4 +29,4 @@ export interface InlineEditProps extends CommonProps {
27
29
  /**
28
30
  * @experimental This component is still in development
29
31
  */
30
- export declare const DotInlineEdit: ({ ariaLabel, bindings, charactersLimit, className, "data-testid": dataTestId, fullWidth, hideActionButtons, name, onChange, onEditStateChange, readOnly, typography, value, }: InlineEditProps) => JSX.Element;
32
+ export declare const DotInlineEdit: ({ ariaLabel, bindings, charactersLimit, className, "data-testid": dataTestId, fullWidth, hideActionButtons, name, onChange, onEditStateChange, readOnly, tooltip, typography, value, }: InlineEditProps) => JSX.Element;
@@ -2,6 +2,11 @@
2
2
  import { InputProps } from './InputFormFields.propTypes';
3
3
  export declare const DELAY_MS = 300;
4
4
  export interface InputTextProps extends InputProps {
5
+ /** The HTML autocomplete property to pass along to the input tag. Used for
6
+ controlling autofill behavior in forms. This property follows this HTML spec:
7
+ https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill
8
+ **/
9
+ autoComplete?: string;
5
10
  /** If true, the input will use debounce functionality. **/
6
11
  hasDebounce?: boolean;
7
12
  /** if multiline it wil render multiple lines */
@@ -17,4 +22,4 @@ export interface InputTextProps extends InputProps {
17
22
  /** value of the InputText */
18
23
  value?: string;
19
24
  }
20
- export declare const DotInputText: ({ autoFocus, className, defaultValue, "data-testid": dataTestId, disabled, error, fullWidth, hasDebounce, helperText, endIcon, id, inputRef, label, multiline, name, onBlur, onChange, onFocus, onKeyDown, onMouseUp, placeholder, readOnly, required, rows, rowsMax, startIcon, size, type, value, warning, }: InputTextProps) => JSX.Element;
25
+ export declare const DotInputText: ({ autoComplete, autoFocus, className, defaultValue, "data-testid": dataTestId, disabled, error, fullWidth, hasDebounce, helperText, endIcon, id, inputRef, label, multiline, name, onBlur, onChange, onFocus, onKeyDown, onMouseUp, placeholder, readOnly, required, rows, rowsMax, startIcon, size, type, value, warning, }: InputTextProps) => JSX.Element;
@@ -2,4 +2,4 @@
2
2
  import { ListItemProps, ListProps, NestedListProps } from './utils/models';
3
3
  export declare const DotList: ({ ariaLabel, children, className, component, "data-testid": dataTestId, dense, disablePadding, items, menuPlacement, nestedDrawerLeftSpacing, nestedListType, width, }: ListProps) => JSX.Element;
4
4
  export declare const DotListItem: ({ ariaLabel, className, component, "data-testid": dataTestId, divider, endIcon, endIconId, href, isOpened, onClick, onMenuLeave, index, items, menuPlacement, nestedDrawerLeftSpacing, nestedListType, primaryText, secondaryText, selected, startIcon, startIconId, target, text, title, tooltip, }: ListItemProps) => JSX.Element;
5
- export declare const NestedList: ({ ariaLabel, anchorEl, items, menuPlacement, nestedDrawerLeftSpacing, onMenuLeave, open, parentItemIndex, type, }: NestedListProps) => JSX.Element;
5
+ export declare const NestedList: ({ ariaLabel, anchorEl, "data-testid": dataTestId, items, menuPlacement, nestedDrawerLeftSpacing, onMenuLeave, open, parentItemIndex, type, }: NestedListProps) => JSX.Element;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@digital-ai/dot-components",
3
- "version": "1.16.1",
3
+ "version": "1.17.2",
4
4
  "private": false,
5
5
  "license": "SEE LICENSE IN <LICENSE.md>",
6
6
  "contributors": [