@digital-ai/dot-components 2.14.0 → 2.15.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGE_LOG.md CHANGED
@@ -1,5 +1,22 @@
1
1
  # Changelog
2
2
 
3
+ ## [2.15.0](https://www.npmjs.com/package/@digital-ai/dot-components) (09/18/2023)
4
+
5
+ [Full Changelog](https://digital-ai.github.io/dot-components/?path=/story/introduction--page/digital-ai/dot-components/compare/2.14.1...2.15.0)
6
+
7
+ **Misc:**
8
+
9
+ - D-26605: addressing issues found during k6i-ui a11y updates [\#1612](https://github.com/digital-ai/dot-components/pull/1612) ([CWSites](https://github.com/CWSites))
10
+ - S-95283 `DotDialog` style improvements [\#1606](https://github.com/digital-ai/dot-components/pull/1606) ([dmiletic85](https://github.com/dmiletic85))
11
+
12
+ ## [2.14.1](https://www.npmjs.com/package/@digital-ai/dot-components) (09/01/2023)
13
+
14
+ [Full Changelog](https://digital-ai.github.io/dot-components/?path=/story/introduction--page/digital-ai/dot-components/compare/2.14.0...2.14.1)
15
+
16
+ **Fixed bugs:**
17
+
18
+ - D-26312 Fix wrong style selector for read-only autocomplete [\#1603](https://github.com/digital-ai/dot-components/pull/1603) ([angel-git](https://github.com/angel-git))
19
+
3
20
  ## [2.14.0](https://www.npmjs.com/package/@digital-ai/dot-components) (08/25/2023)
4
21
 
5
22
  [Full Changelog](https://digital-ai.github.io/dot-components/?path=/story/introduction--page/digital-ai/dot-components/compare/2.13.0...2.14.0)
@@ -441,6 +458,7 @@
441
458
 
442
459
  - CI: bumps version to 2.2.1 \[skip ci\] \(\#1371\) [\#1372](https://github.com/digital-ai/dot-components/pull/1372) ([CWSites](https://github.com/CWSites))
443
460
  - resolving more warnings [\#1369](https://github.com/digital-ai/dot-components/pull/1369) ([CWSites](https://github.com/CWSites))
461
+ - GitHub Action Troubleshooting [\#1368](https://github.com/digital-ai/dot-components/pull/1368) ([CWSites](https://github.com/CWSites))
444
462
 
445
463
  ## [2.2.1](https://www.npmjs.com/package/@digital-ai/dot-components) (02/08/2023)
446
464
 
@@ -460,7 +478,6 @@
460
478
 
461
479
  **Misc:**
462
480
 
463
- - GitHub Action Troubleshooting [\#1368](https://github.com/digital-ai/dot-components/pull/1368) ([CWSites](https://github.com/CWSites))
464
481
  - Upload drip echo icon [\#1366](https://github.com/digital-ai/dot-components/pull/1366) ([pauldigitalai](https://github.com/pauldigitalai))
465
482
  - S-90007 Add missing test [\#1362](https://github.com/digital-ai/dot-components/pull/1362) ([angel-git](https://github.com/angel-git))
466
483
  - icons-pin-update-Jan-27th [\#1354](https://github.com/digital-ai/dot-components/pull/1354) ([pauldigitalai](https://github.com/pauldigitalai))
@@ -545,7 +562,6 @@
545
562
  - S-88324: Updated the Brand logo for dark theme [\#1315](https://github.com/digital-ai/dot-components/pull/1315) ([csmathguy](https://github.com/csmathguy))
546
563
  - D-23353: `DotMenu` items inside the menu should have 14px font size [\#1314](https://github.com/digital-ai/dot-components/pull/1314) ([dmiletic85](https://github.com/dmiletic85))
547
564
  - D-23298: `NavigationRail` Fix badges issue [\#1303](https://github.com/digital-ai/dot-components/pull/1303) ([dmiletic85](https://github.com/dmiletic85))
548
- - D-23069: add react-router-dom as a dependency for developing Storybook [\#1293](https://github.com/digital-ai/dot-components/pull/1293) ([CWSites](https://github.com/CWSites))
549
565
 
550
566
  **Misc:**
551
567
 
@@ -568,6 +584,7 @@
568
584
  - D-23289: \[DOT 2.0\] Double checkbox on `DotSwitch` [\#1299](https://github.com/digital-ai/dot-components/pull/1299) ([dmiletic85](https://github.com/dmiletic85))
569
585
  - D-21921: `DotTabs` color and border styles [\#1296](https://github.com/digital-ai/dot-components/pull/1296) ([CWSites](https://github.com/CWSites))
570
586
  - D-23229: update icon colors to inherit properly from various components [\#1295](https://github.com/digital-ai/dot-components/pull/1295) ([CWSites](https://github.com/CWSites))
587
+ - D-23069: add react-router-dom as a dependency for developing Storybook [\#1293](https://github.com/digital-ai/dot-components/pull/1293) ([CWSites](https://github.com/CWSites))
571
588
 
572
589
  ## [2.0.0](https://www.npmjs.com/package/@digital-ai/dot-components) (11/02/2022)
573
590
 
@@ -646,6 +663,7 @@
646
663
  **Fixed bugs:**
647
664
 
648
665
  - S-86692: component cleanup [\#1238](https://github.com/digital-ai/dot-components/pull/1238) ([CWSites](https://github.com/CWSites))
666
+ - S-84151: fix e2e tests for Release 2.0 [\#1146](https://github.com/digital-ai/dot-components/pull/1146) ([CWSites](https://github.com/CWSites))
649
667
 
650
668
  **Misc:**
651
669
 
@@ -672,7 +690,6 @@
672
690
  - S-86128: `DotAutocomplete`: Support error/warning icons with the tooltip [\#1237](https://github.com/digital-ai/dot-components/pull/1237) ([dmiletic85](https://github.com/dmiletic85))
673
691
  - S-86683: `DotAutocomplete`: expose `onBlur` [\#1236](https://github.com/digital-ai/dot-components/pull/1236) ([dmiletic85](https://github.com/dmiletic85))
674
692
  - S-86581: `DotAutocomplete` should allow to pass `readOnly` property into the inner `TextField` [\#1235](https://github.com/digital-ai/dot-components/pull/1235) ([dmiletic85](https://github.com/dmiletic85))
675
- - Issue \#1210: add prop for noMargin to typography [\#1222](https://github.com/digital-ai/dot-components/pull/1222) ([CWSites](https://github.com/CWSites))
676
693
 
677
694
  **Fixed bugs:**
678
695
 
@@ -692,6 +709,7 @@
692
709
 
693
710
  - S-86369: input field success [\#1226](https://github.com/digital-ai/dot-components/pull/1226) ([CWSites](https://github.com/CWSites))
694
711
  - S-84069: expose shrink prop to input fields [\#1223](https://github.com/digital-ai/dot-components/pull/1223) ([CWSites](https://github.com/CWSites))
712
+ - Issue \#1210: add prop for noMargin to typography [\#1222](https://github.com/digital-ai/dot-components/pull/1222) ([CWSites](https://github.com/CWSites))
695
713
  - S-83952: persistent label for text field and select field [\#1219](https://github.com/digital-ai/dot-components/pull/1219) ([CWSites](https://github.com/CWSites))
696
714
  - S-85811: `NavigationRail` Allow badges [\#1215](https://github.com/digital-ai/dot-components/pull/1215) ([dmiletic85](https://github.com/dmiletic85))
697
715
 
@@ -761,10 +779,6 @@
761
779
 
762
780
  [Full Changelog](https://digital-ai.github.io/dot-components/?path=/story/introduction--page/digital-ai/dot-components/compare/1.17.0...1.17.1)
763
781
 
764
- **Features:**
765
-
766
- - S-84947: `DotButtonToggle`: Add tooltip support [\#1166](https://github.com/digital-ai/dot-components/pull/1166) ([dmiletic85](https://github.com/dmiletic85))
767
-
768
782
  **Fixed bugs:**
769
783
 
770
784
  - 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))
@@ -773,6 +787,10 @@
773
787
 
774
788
  [Full Changelog](https://digital-ai.github.io/dot-components/?path=/story/introduction--page/digital-ai/dot-components/compare/1.16.1...1.17.0)
775
789
 
790
+ **Features:**
791
+
792
+ - S-84947: `DotButtonToggle`: Add tooltip support [\#1166](https://github.com/digital-ai/dot-components/pull/1166) ([dmiletic85](https://github.com/dmiletic85))
793
+
776
794
  **Fixed bugs:**
777
795
 
778
796
  - 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))
@@ -789,7 +807,6 @@
789
807
 
790
808
  - S-84816: `InlineEdit`: Disable Save button when value contains only spaces [\#1156](https://github.com/digital-ai/dot-components/pull/1156) ([dmiletic85](https://github.com/dmiletic85))
791
809
  - D-20958: Safari animation jitter [\#1154](https://github.com/digital-ai/dot-components/pull/1154) ([CWSites](https://github.com/CWSites))
792
- - S-84151: fix e2e tests for Release 2.0 [\#1146](https://github.com/digital-ai/dot-components/pull/1146) ([CWSites](https://github.com/CWSites))
793
810
 
794
811
  **Misc:**
795
812
 
@@ -844,10 +861,6 @@
844
861
 
845
862
  [Full Changelog](https://digital-ai.github.io/dot-components/?path=/story/introduction--page/digital-ai/dot-components/compare/1.12.0...1.13.0)
846
863
 
847
- **Breaking changes:**
848
-
849
- - S-82342: Upgrade MUI to v5 [\#1079](https://github.com/digital-ai/dot-components/pull/1079) ([CWSites](https://github.com/CWSites))
850
-
851
864
  **Features:**
852
865
 
853
866
  - S-82940: `DotProgress`: Add more Storybook examples [\#1098](https://github.com/digital-ai/dot-components/pull/1098) ([dmiletic85](https://github.com/dmiletic85))
@@ -861,6 +874,10 @@
861
874
 
862
875
  [Full Changelog](https://digital-ai.github.io/dot-components/?path=/story/introduction--page/digital-ai/dot-components/compare/1.11.3...1.12.0)
863
876
 
877
+ **Breaking changes:**
878
+
879
+ - S-82342: Upgrade MUI to v5 [\#1079](https://github.com/digital-ai/dot-components/pull/1079) ([CWSites](https://github.com/CWSites))
880
+
864
881
  **Features:**
865
882
 
866
883
  - S-82910: `DotTypography`: Add more Storybook examples [\#1092](https://github.com/digital-ai/dot-components/pull/1092) ([dmiletic85](https://github.com/dmiletic85))
package/index.esm.js CHANGED
@@ -33,8 +33,8 @@ const DotTooltip = ({
33
33
  }) => {
34
34
  const rootClasses = useStylesWithRootClass('dot-tooltip', className);
35
35
  return title ? jsx(Tooltip, Object.assign({
36
- "aria-hidden": open ? false : true,
37
- "aria-label": ariaLabel,
36
+ "aria-hidden": false,
37
+ "aria-label": ariaLabel || title.toString(),
38
38
  className: rootClasses,
39
39
  "data-testid": dataTestId,
40
40
  leaveDelay: leaveDelay,
@@ -44,9 +44,11 @@ const DotTooltip = ({
44
44
  role: _ariaRole,
45
45
  title: title
46
46
  }, {
47
- children: jsx("span", {
47
+ children: jsx("span", Object.assign({
48
+ tabIndex: -1
49
+ }, {
48
50
  children: children
49
- }, void 0)
51
+ }), void 0)
50
52
  }), void 0) : children;
51
53
  };
52
54
 
@@ -243,7 +245,7 @@ const StyledTextField = styled(TextField).withConfig({
243
245
  })(["", ""], ({
244
246
  theme,
245
247
  InputProps
246
- }) => css(["&.", "{.MuiInputBase-root{margin-bottom:0;}.MuiInputBase-input{box-sizing:content-box;}.MuiOutlinedInput-input{padding:", ";}.MuiInputBase-inputSizeSmall{padding-top:10.5px;padding-bottom:10.5px;&:not(textarea){height:19px;}}.MuiInputBase-inputMultiline{padding:0;}.MuiInputLabel-root.Mui-disabled{color:", ";}}.dot-select,.dot-input{&.", ",&.Mui-disabled{", ";}}&.", " .", "{margin-right:", ";}&.", ",&.", "{.", "{color:", ";p{font-size:", "px;margin:0;}.dot-icon i{margin-top:-2px;}}.MuiInputBase-root{margin-bottom:0;}.MuiInputBase-inputSizeSmall:not(textarea){height:19px;padding-top:10.5px;padding-bottom:10.5px;}select.dot-select{padding-left:", ";}.MuiSelect-select:focus:not(.", "){background-color:transparent;}.MuiSelect-icon{right:", ";}&.", "{.MuiOutlinedInput-notchedOutline{border-color:", ";}.MuiFormLabel-root.Mui-focused{color:", ";}.", " .dot-icon{color:", ";}}&.", "{.MuiInputLabel-outlined.MuiInputLabel-shrink{color:", ";}.", " .dot-icon{color:", ";}}&.", "{.MuiOutlinedInput-notchedOutline{border-color:", ";}.MuiInputLabel-outlined.MuiInputLabel-shrink{color:", ";}.", " .dot-icon{color:", ";}}.MuiOutlinedInput-adornedStart{padding-left:12px;&.", " .", "{border-color:", ";}}.MuiInputLabel-outlined.MuiInputLabel-shrink{color:", ";}.MuiInputBase-inputAdornedStart{padding-left:12px;}.MuiInputBase-inputAdornedEnd{padding-right:12px;}.MuiFormHelperText-root{", ";}}"], rootClassName$13, InputProps.startAdornment ? `18px 12px 18px 0px` : `18px 12px`, theme.palette.layer.n500, readOnlyClassName$1, readOnlyStyles(theme), rootSelectClassName, adornmentIconClassName, theme.spacing(2), rootSelectClassName, rootClassName$13, adornmentIconClassName, theme.palette.layer.n700, theme.typography.body2.fontSize, theme.spacing(1.5), readOnlyClassName$1, InputProps.endAdornment ? `44px` : `12px`, successClassName, theme.palette.secondary.main, theme.palette.grey[700], adornmentIconClassName, theme.palette.secondary.main, errorClassName, theme.palette.error.main, adornmentIconClassName, theme.palette.error.main, warningClassName, theme.palette.warning.main, theme.palette.grey[700], adornmentIconClassName, theme.palette.warning.main, warningClassName, fieldsetClassName, theme.palette.warning[500], theme.palette.grey[700], formHelperTextRootStyles(theme)));
248
+ }) => css(["&.", "{.MuiInputBase-root{margin-bottom:0;}.MuiInputBase-input{box-sizing:content-box;}.MuiOutlinedInput-input{padding:", ";}.MuiInputBase-inputSizeSmall{padding-top:10.5px;padding-bottom:10.5px;&:not(textarea){height:19px;}}.MuiInputBase-inputMultiline{padding:0;}.MuiInputLabel-root.Mui-disabled{color:", ";}&.", " .MuiInputBase-root,.MuiInputBase-root.Mui-disabled{", ";}}.dot-select,.dot-input{&.", ",&.Mui-disabled{", ";}}&.", " .", "{margin-right:", ";}&.", ",&.", "{.", "{color:", ";p{font-size:", "px;margin:0;}.dot-icon i{margin-top:-2px;}}.MuiInputBase-root{margin-bottom:0;}.MuiInputBase-inputSizeSmall:not(textarea){height:19px;padding-top:10.5px;padding-bottom:10.5px;}select.dot-select{padding-left:", ";}.MuiSelect-select:focus:not(.", "){background-color:transparent;}.MuiSelect-icon{right:", ";}&.", "{.MuiOutlinedInput-notchedOutline{border-color:", ";}.MuiFormLabel-root.Mui-focused{color:", ";}.", " .dot-icon{color:", ";}}&.", "{.MuiInputLabel-outlined.MuiInputLabel-shrink{color:", ";}.", " .dot-icon{color:", ";}}&.", "{.MuiOutlinedInput-notchedOutline{border-color:", ";}.MuiInputLabel-outlined.MuiInputLabel-shrink{color:", ";}.", " .dot-icon{color:", ";}}.MuiOutlinedInput-adornedStart{padding-left:12px;&.", " .", "{border-color:", ";}}.MuiInputLabel-outlined.MuiInputLabel-shrink{color:", ";}.MuiInputBase-inputAdornedStart{padding-left:12px;}.MuiInputBase-inputAdornedEnd{padding-right:12px;}.MuiFormHelperText-root{", ";}}"], rootClassName$13, InputProps.startAdornment ? `18px 12px 18px 0px` : `18px 12px`, theme.palette.layer.n500, readOnlyClassName$1, readOnlyStyles(theme), readOnlyClassName$1, readOnlyStyles(theme), rootSelectClassName, adornmentIconClassName, theme.spacing(2), rootSelectClassName, rootClassName$13, adornmentIconClassName, theme.palette.layer.n700, theme.typography.body2.fontSize, theme.spacing(1.5), readOnlyClassName$1, InputProps.endAdornment ? `44px` : `12px`, successClassName, theme.palette.secondary.main, theme.palette.grey[700], adornmentIconClassName, theme.palette.secondary.main, errorClassName, theme.palette.error.main, adornmentIconClassName, theme.palette.error.main, warningClassName, theme.palette.warning.main, theme.palette.grey[700], adornmentIconClassName, theme.palette.warning.main, warningClassName, fieldsetClassName, theme.palette.warning[500], theme.palette.grey[700], formHelperTextRootStyles(theme)));
247
249
 
248
250
  const rootClassName$12 = 'dot-action-toolbar';
249
251
  const StyledToolbar = styled(Toolbar).withConfig({
@@ -2544,10 +2546,11 @@ const DotListDivider = ({
2544
2546
  }) => {
2545
2547
  if (item.text) {
2546
2548
  return jsx(ListSubheader, Object.assign({
2547
- disableSticky: true,
2548
- role: "heading"
2549
+ disableSticky: true
2549
2550
  }, {
2550
2551
  children: jsx(DotTypography, Object.assign({
2552
+ ariaRole: "heading",
2553
+ ariaLevel: 3,
2551
2554
  variant: "overline"
2552
2555
  }, {
2553
2556
  children: item.text
@@ -2627,6 +2630,7 @@ const DotList = ({
2627
2630
  }, `divider-${index}`);
2628
2631
  }
2629
2632
  return jsx(DotListItem, {
2633
+ ariaLabel: item.text || item.primaryText,
2630
2634
  className: item.className,
2631
2635
  component: item.component,
2632
2636
  "data-testid": `${dataTestId}-item-${index}`,
@@ -2704,18 +2708,17 @@ const DotListItem = ({
2704
2708
  return endIcon;
2705
2709
  };
2706
2710
  const renderListItemLink = jsxs(DotLink, Object.assign({
2707
- href: href,
2708
2711
  className: listItemLinkClassName,
2709
- underline: "none",
2710
- target: target
2712
+ href: href,
2713
+ target: target,
2714
+ underline: "none"
2711
2715
  }, {
2712
2716
  children: [startIcon && jsx(ListItemIcon, {
2713
2717
  children: startIcon
2714
2718
  }, void 0), renderListItemText(), showEndIcon && renderListItemEndIcon()]
2715
2719
  }), void 0);
2716
2720
  return jsx(StyledListItem, Object.assign({
2717
- "aria-label": ariaLabel,
2718
- button: true,
2721
+ "aria-label": ariaLabel || tooltip,
2719
2722
  classes: {
2720
2723
  root: rootClasses
2721
2724
  },
@@ -2724,7 +2727,7 @@ const DotListItem = ({
2724
2727
  divider: _divider,
2725
2728
  href: onClick ? null : href,
2726
2729
  onClick: onClick || !href ? handleClick : null,
2727
- role: onClick ? 'button' : _ariaRole2,
2730
+ role: _ariaRole2,
2728
2731
  selected: isFlyout ? isOpened : selected,
2729
2732
  target: target
2730
2733
  }, {
@@ -3655,7 +3658,6 @@ const DotAppSwitcherView = ({
3655
3658
  role: "contentinfo"
3656
3659
  }, {
3657
3660
  children: [jsx(DotList, {
3658
- ariaRole: "presentation",
3659
3661
  items: appTypeMenuItems === null || appTypeMenuItems === void 0 ? void 0 : appTypeMenuItems.map(item => ({
3660
3662
  child: item.children
3661
3663
  })),
@@ -3691,17 +3693,19 @@ const DotAppSwitcherView = ({
3691
3693
  };
3692
3694
  return jsx(StyledAppSwitcher, Object.assign({
3693
3695
  ariaLabel: "App Switcher",
3696
+ ariaRole: "dialog",
3697
+ "aria-modal": "true",
3694
3698
  className: rootClasses,
3699
+ drawerHeaderProps: header,
3695
3700
  ModalProps: {
3696
3701
  style: {
3697
3702
  zIndex: _zIndex
3698
3703
  }
3699
3704
  },
3700
- drawerHeaderProps: header,
3701
- variant: "temporary",
3702
- width: "340px",
3703
3705
  open: open,
3704
- onClose: closeHandler
3706
+ onClose: closeHandler,
3707
+ width: "340px",
3708
+ variant: "temporary"
3705
3709
  }, {
3706
3710
  children: content()
3707
3711
  }), void 0);
@@ -4021,6 +4025,7 @@ const DotSidebar = ({
4021
4025
  onClick: backItem.onClick,
4022
4026
  tooltip: backItem.title || backItem.text
4023
4027
  }, void 0), jsx(DotTypography, Object.assign({
4028
+ ariaLevel: 4,
4024
4029
  className: "back-button-text",
4025
4030
  variant: "h4",
4026
4031
  noWrap: true
@@ -4304,7 +4309,7 @@ const StyledAutocomplete = styled(Autocomplete).withConfig({
4304
4309
  componentId: "j2sgjy-0"
4305
4310
  })(["", ""], ({
4306
4311
  theme
4307
- }) => css(["&.", "{&.", " .dot-text-field .", "{height:56px;padding-left:", ";}.MuiInputBase-root.Mui-disabled,.", "{", ";}.", "{padding-top:", ";padding-bottom:", ";}.dot-chip:first-child{margin-left:", ";}.dot-text-field{.", "{min-height:", ";}.warning-icon{color:", ";}.error-icon{color:", ";}}}"], rootClassName$I, inputMediumClassName, inputRootClassName, theme.spacing(2), readOnlyClassName$1, readOnlyStyles(theme), inputRootClassName, theme.spacing(0), theme.spacing(0), theme.spacing(0), inputRootClassName, theme.spacing(5), theme.palette.warning.main, theme.palette.error.main));
4312
+ }) => css(["&.", "{&.", " .dot-text-field .", "{height:56px;padding-left:", ";}.MuiInputBase-root.Mui-disabled,.", " .MuiInputBase-root{", ";}.", "{padding-top:", ";padding-bottom:", ";}.dot-chip:first-child{margin-left:", ";}.dot-text-field{.", "{min-height:", ";}.warning-icon{color:", ";}.error-icon{color:", ";}}}"], rootClassName$I, inputMediumClassName, inputRootClassName, theme.spacing(2), readOnlyClassName$1, readOnlyStyles(theme), inputRootClassName, theme.spacing(0), theme.spacing(0), theme.spacing(0), inputRootClassName, theme.spacing(5), theme.palette.warning.main, theme.palette.error.main));
4308
4313
 
4309
4314
  const rootClassName$H = 'dot-chip';
4310
4315
  const StyledChip = styled(Chip).withConfig({
@@ -5560,7 +5565,7 @@ const StyledDialog = styled(Dialog).withConfig({
5560
5565
  componentId: "sc-1tkr4ex-0"
5561
5566
  })(["", ""], ({
5562
5567
  theme
5563
- }) => css(["&.", "{.MuiDialog-paper{min-width:280px;max-height:80vh;max-width:80vw;}.MuiDialogTitle-root,.dot-dialog-title{align-items:center;display:flex;flex-wrap:nowrap;padding:", ";h2{flex-grow:1;}.dot-icon-button{margin-left:", ";}}.dot-dialog-content{padding:", ";overflow-y:auto;}.dot-dialog-actions{padding:", ";.cancel-button{color:inherit;}}}"], rootClassName$x, theme.spacing(1, 2), theme.spacing(1), theme.spacing(1, 2), theme.spacing(1)));
5568
+ }) => css(["&.", "{.MuiDialog-paper{min-width:280px;max-height:80vh;max-width:80vw;}.MuiDialogTitle-root,.dot-dialog-title{align-items:center;display:flex;flex-wrap:nowrap;padding:", ";h2{flex-grow:1;}.dot-icon-button{margin-left:", ";}}.dot-dialog-content{padding:", ";overflow-y:auto;}.dot-dialog-actions{padding:", ";.cancel-button{color:inherit;}}}"], rootClassName$x, theme.spacing(2, 3), theme.spacing(1), theme.spacing(1, 3), theme.spacing(1, 3, 2, 3)));
5564
5569
 
5565
5570
  const DotDialog = ({
5566
5571
  ariaLabel,
@@ -5607,7 +5612,7 @@ const DotDialog = ({
5607
5612
  };
5608
5613
  return jsxs(StyledDialog, Object.assign({
5609
5614
  "aria-label": ariaLabel,
5610
- "aria-labelledby": "MuiDialogTitle-root",
5615
+ "aria-labelledby": "dialogTitle",
5611
5616
  classes: {
5612
5617
  root: rootClasses
5613
5618
  },
@@ -5616,7 +5621,9 @@ const DotDialog = ({
5616
5621
  open: isOpen
5617
5622
  }, {
5618
5623
  children: [jsxs("div", Object.assign({
5619
- className: "dot-dialog-title"
5624
+ id: "dialogTitle",
5625
+ className: "dot-dialog-title",
5626
+ tabIndex: -1
5620
5627
  }, {
5621
5628
  children: [renderNodeOrTypography(title, 'h2'), closeIconVisible && jsx(DotIconButton, {
5622
5629
  ariaLabel: "close dialog",
package/index.umd.js CHANGED
@@ -163,8 +163,8 @@
163
163
  title = _a.title;
164
164
  var rootClasses = useStylesWithRootClass('dot-tooltip', className);
165
165
  return title ? jsxRuntime.jsx(material.Tooltip, __assign({
166
- "aria-hidden": open ? false : true,
167
- "aria-label": ariaLabel,
166
+ "aria-hidden": false,
167
+ "aria-label": ariaLabel || title.toString(),
168
168
  className: rootClasses,
169
169
  "data-testid": dataTestId,
170
170
  leaveDelay: leaveDelay,
@@ -174,9 +174,11 @@
174
174
  role: ariaRole,
175
175
  title: title
176
176
  }, {
177
- children: jsxRuntime.jsx("span", {
177
+ children: jsxRuntime.jsx("span", __assign({
178
+ tabIndex: -1
179
+ }, {
178
180
  children: children
179
- }, void 0)
181
+ }), void 0)
180
182
  }), void 0) : children;
181
183
  };
182
184
 
@@ -395,7 +397,7 @@
395
397
  })(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
396
398
  var theme = _a.theme,
397
399
  InputProps = _a.InputProps;
398
- return styled.css(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject(["\n &.", " {\n .MuiInputBase-root {\n margin-bottom: 0;\n }\n .MuiInputBase-input {\n box-sizing: content-box;\n }\n .MuiOutlinedInput-input {\n padding: ", ";\n }\n .MuiInputBase-inputSizeSmall {\n padding-top: 10.5px;\n padding-bottom: 10.5px;\n\n &:not(textarea) {\n /* padding above and below together is 21px, and total height should be 40px */\n height: 19px;\n }\n }\n .MuiInputBase-inputMultiline {\n padding: 0;\n }\n .MuiInputLabel-root.Mui-disabled {\n color: ", ";\n }\n }\n\n .dot-select,\n .dot-input {\n &.", ", &.Mui-disabled {\n ", ";\n }\n }\n\n &.", " .", " {\n // inputSelect has an arrow so we need spacing for end adornment\n margin-right: ", ";\n }\n\n &.", ", &.", " {\n .", " {\n color: ", ";\n p {\n font-size: ", "px;\n margin: 0;\n }\n\n .dot-icon i {\n margin-top: -2px;\n }\n }\n\n .MuiInputBase-root {\n margin-bottom: 0;\n }\n\n .MuiInputBase-inputSizeSmall:not(textarea) {\n height: 19px;\n padding-top: 10.5px;\n padding-bottom: 10.5px;\n }\n\n select.dot-select {\n padding-left: ", ";\n }\n\n .MuiSelect-select:focus:not(.", ") {\n background-color: transparent;\n }\n\n .MuiSelect-icon {\n right: ", ";\n }\n\n &.", " {\n .MuiOutlinedInput-notchedOutline {\n border-color: ", ";\n }\n\n .MuiFormLabel-root.Mui-focused {\n color: ", ";\n }\n\n .", " .dot-icon {\n color: ", ";\n }\n }\n\n &.", " {\n .MuiInputLabel-outlined.MuiInputLabel-shrink {\n color: ", ";\n }\n\n .", " .dot-icon {\n color: ", ";\n }\n }\n\n &.", " {\n .MuiOutlinedInput-notchedOutline {\n border-color: ", ";\n }\n\n .MuiInputLabel-outlined.MuiInputLabel-shrink {\n color: ", ";\n }\n\n .", " .dot-icon {\n color: ", ";\n }\n }\n\n .MuiOutlinedInput-adornedStart {\n padding-left: 12px;\n\n &.", " .", " {\n border-color: ", ";\n }\n }\n\n .MuiInputLabel-outlined.MuiInputLabel-shrink {\n color: ", ";\n }\n\n .MuiInputBase-inputAdornedStart {\n padding-left: 12px;\n }\n .MuiInputBase-inputAdornedEnd {\n padding-right: 12px;\n }\n .MuiFormHelperText-root {\n ", ";\n }\n }\n "], ["\n &.", " {\n .MuiInputBase-root {\n margin-bottom: 0;\n }\n .MuiInputBase-input {\n box-sizing: content-box;\n }\n .MuiOutlinedInput-input {\n padding: ", ";\n }\n .MuiInputBase-inputSizeSmall {\n padding-top: 10.5px;\n padding-bottom: 10.5px;\n\n &:not(textarea) {\n /* padding above and below together is 21px, and total height should be 40px */\n height: 19px;\n }\n }\n .MuiInputBase-inputMultiline {\n padding: 0;\n }\n .MuiInputLabel-root.Mui-disabled {\n color: ", ";\n }\n }\n\n .dot-select,\n .dot-input {\n &.", ", &.Mui-disabled {\n ", ";\n }\n }\n\n &.", " .", " {\n // inputSelect has an arrow so we need spacing for end adornment\n margin-right: ", ";\n }\n\n &.", ", &.", " {\n .", " {\n color: ", ";\n p {\n font-size: ", "px;\n margin: 0;\n }\n\n .dot-icon i {\n margin-top: -2px;\n }\n }\n\n .MuiInputBase-root {\n margin-bottom: 0;\n }\n\n .MuiInputBase-inputSizeSmall:not(textarea) {\n height: 19px;\n padding-top: 10.5px;\n padding-bottom: 10.5px;\n }\n\n select.dot-select {\n padding-left: ", ";\n }\n\n .MuiSelect-select:focus:not(.", ") {\n background-color: transparent;\n }\n\n .MuiSelect-icon {\n right: ", ";\n }\n\n &.", " {\n .MuiOutlinedInput-notchedOutline {\n border-color: ", ";\n }\n\n .MuiFormLabel-root.Mui-focused {\n color: ", ";\n }\n\n .", " .dot-icon {\n color: ", ";\n }\n }\n\n &.", " {\n .MuiInputLabel-outlined.MuiInputLabel-shrink {\n color: ", ";\n }\n\n .", " .dot-icon {\n color: ", ";\n }\n }\n\n &.", " {\n .MuiOutlinedInput-notchedOutline {\n border-color: ", ";\n }\n\n .MuiInputLabel-outlined.MuiInputLabel-shrink {\n color: ", ";\n }\n\n .", " .dot-icon {\n color: ", ";\n }\n }\n\n .MuiOutlinedInput-adornedStart {\n padding-left: 12px;\n\n &.", " .", " {\n border-color: ", ";\n }\n }\n\n .MuiInputLabel-outlined.MuiInputLabel-shrink {\n color: ", ";\n }\n\n .MuiInputBase-inputAdornedStart {\n padding-left: 12px;\n }\n .MuiInputBase-inputAdornedEnd {\n padding-right: 12px;\n }\n .MuiFormHelperText-root {\n ", ";\n }\n }\n "])), rootClassName$13, InputProps.startAdornment ? "18px 12px 18px 0px" : "18px 12px", theme.palette.layer.n500, readOnlyClassName$1, readOnlyStyles(theme), rootSelectClassName, adornmentIconClassName, theme.spacing(2), rootSelectClassName, rootClassName$13, adornmentIconClassName, theme.palette.layer.n700, theme.typography.body2.fontSize, theme.spacing(1.5), readOnlyClassName$1, InputProps.endAdornment ? "44px" : "12px", successClassName, theme.palette.secondary.main, theme.palette.grey[700], adornmentIconClassName, theme.palette.secondary.main, errorClassName, theme.palette.error.main, adornmentIconClassName, theme.palette.error.main, warningClassName, theme.palette.warning.main, theme.palette.grey[700], adornmentIconClassName, theme.palette.warning.main, warningClassName, fieldsetClassName, theme.palette.warning[500], theme.palette.grey[700], formHelperTextRootStyles(theme));
400
+ return styled.css(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject(["\n &.", " {\n .MuiInputBase-root {\n margin-bottom: 0;\n }\n .MuiInputBase-input {\n box-sizing: content-box;\n }\n .MuiOutlinedInput-input {\n padding: ", ";\n }\n .MuiInputBase-inputSizeSmall {\n padding-top: 10.5px;\n padding-bottom: 10.5px;\n\n &:not(textarea) {\n /* padding above and below together is 21px, and total height should be 40px */\n height: 19px;\n }\n }\n .MuiInputBase-inputMultiline {\n padding: 0;\n }\n .MuiInputLabel-root.Mui-disabled {\n color: ", ";\n }\n &.", " .MuiInputBase-root,\n .MuiInputBase-root.Mui-disabled {\n ", ";\n }\n }\n\n .dot-select,\n .dot-input {\n &.", ", &.Mui-disabled {\n ", ";\n }\n }\n\n &.", " .", " {\n // inputSelect has an arrow so we need spacing for end adornment\n margin-right: ", ";\n }\n\n &.", ", &.", " {\n .", " {\n color: ", ";\n p {\n font-size: ", "px;\n margin: 0;\n }\n\n .dot-icon i {\n margin-top: -2px;\n }\n }\n\n .MuiInputBase-root {\n margin-bottom: 0;\n }\n\n .MuiInputBase-inputSizeSmall:not(textarea) {\n height: 19px;\n padding-top: 10.5px;\n padding-bottom: 10.5px;\n }\n\n select.dot-select {\n padding-left: ", ";\n }\n\n .MuiSelect-select:focus:not(.", ") {\n background-color: transparent;\n }\n\n .MuiSelect-icon {\n right: ", ";\n }\n\n &.", " {\n .MuiOutlinedInput-notchedOutline {\n border-color: ", ";\n }\n\n .MuiFormLabel-root.Mui-focused {\n color: ", ";\n }\n\n .", " .dot-icon {\n color: ", ";\n }\n }\n\n &.", " {\n .MuiInputLabel-outlined.MuiInputLabel-shrink {\n color: ", ";\n }\n\n .", " .dot-icon {\n color: ", ";\n }\n }\n\n &.", " {\n .MuiOutlinedInput-notchedOutline {\n border-color: ", ";\n }\n\n .MuiInputLabel-outlined.MuiInputLabel-shrink {\n color: ", ";\n }\n\n .", " .dot-icon {\n color: ", ";\n }\n }\n\n .MuiOutlinedInput-adornedStart {\n padding-left: 12px;\n\n &.", " .", " {\n border-color: ", ";\n }\n }\n\n .MuiInputLabel-outlined.MuiInputLabel-shrink {\n color: ", ";\n }\n\n .MuiInputBase-inputAdornedStart {\n padding-left: 12px;\n }\n .MuiInputBase-inputAdornedEnd {\n padding-right: 12px;\n }\n .MuiFormHelperText-root {\n ", ";\n }\n }\n "], ["\n &.", " {\n .MuiInputBase-root {\n margin-bottom: 0;\n }\n .MuiInputBase-input {\n box-sizing: content-box;\n }\n .MuiOutlinedInput-input {\n padding: ", ";\n }\n .MuiInputBase-inputSizeSmall {\n padding-top: 10.5px;\n padding-bottom: 10.5px;\n\n &:not(textarea) {\n /* padding above and below together is 21px, and total height should be 40px */\n height: 19px;\n }\n }\n .MuiInputBase-inputMultiline {\n padding: 0;\n }\n .MuiInputLabel-root.Mui-disabled {\n color: ", ";\n }\n &.", " .MuiInputBase-root,\n .MuiInputBase-root.Mui-disabled {\n ", ";\n }\n }\n\n .dot-select,\n .dot-input {\n &.", ", &.Mui-disabled {\n ", ";\n }\n }\n\n &.", " .", " {\n // inputSelect has an arrow so we need spacing for end adornment\n margin-right: ", ";\n }\n\n &.", ", &.", " {\n .", " {\n color: ", ";\n p {\n font-size: ", "px;\n margin: 0;\n }\n\n .dot-icon i {\n margin-top: -2px;\n }\n }\n\n .MuiInputBase-root {\n margin-bottom: 0;\n }\n\n .MuiInputBase-inputSizeSmall:not(textarea) {\n height: 19px;\n padding-top: 10.5px;\n padding-bottom: 10.5px;\n }\n\n select.dot-select {\n padding-left: ", ";\n }\n\n .MuiSelect-select:focus:not(.", ") {\n background-color: transparent;\n }\n\n .MuiSelect-icon {\n right: ", ";\n }\n\n &.", " {\n .MuiOutlinedInput-notchedOutline {\n border-color: ", ";\n }\n\n .MuiFormLabel-root.Mui-focused {\n color: ", ";\n }\n\n .", " .dot-icon {\n color: ", ";\n }\n }\n\n &.", " {\n .MuiInputLabel-outlined.MuiInputLabel-shrink {\n color: ", ";\n }\n\n .", " .dot-icon {\n color: ", ";\n }\n }\n\n &.", " {\n .MuiOutlinedInput-notchedOutline {\n border-color: ", ";\n }\n\n .MuiInputLabel-outlined.MuiInputLabel-shrink {\n color: ", ";\n }\n\n .", " .dot-icon {\n color: ", ";\n }\n }\n\n .MuiOutlinedInput-adornedStart {\n padding-left: 12px;\n\n &.", " .", " {\n border-color: ", ";\n }\n }\n\n .MuiInputLabel-outlined.MuiInputLabel-shrink {\n color: ", ";\n }\n\n .MuiInputBase-inputAdornedStart {\n padding-left: 12px;\n }\n .MuiInputBase-inputAdornedEnd {\n padding-right: 12px;\n }\n .MuiFormHelperText-root {\n ", ";\n }\n }\n "])), rootClassName$13, InputProps.startAdornment ? "18px 12px 18px 0px" : "18px 12px", theme.palette.layer.n500, readOnlyClassName$1, readOnlyStyles(theme), readOnlyClassName$1, readOnlyStyles(theme), rootSelectClassName, adornmentIconClassName, theme.spacing(2), rootSelectClassName, rootClassName$13, adornmentIconClassName, theme.palette.layer.n700, theme.typography.body2.fontSize, theme.spacing(1.5), readOnlyClassName$1, InputProps.endAdornment ? "44px" : "12px", successClassName, theme.palette.secondary.main, theme.palette.grey[700], adornmentIconClassName, theme.palette.secondary.main, errorClassName, theme.palette.error.main, adornmentIconClassName, theme.palette.error.main, warningClassName, theme.palette.warning.main, theme.palette.grey[700], adornmentIconClassName, theme.palette.warning.main, warningClassName, fieldsetClassName, theme.palette.warning[500], theme.palette.grey[700], formHelperTextRootStyles(theme));
399
401
  });
400
402
  var templateObject_1$19, templateObject_2$14, templateObject_3$c, templateObject_4$a, templateObject_5$3, templateObject_6$1;
401
403
 
@@ -2848,10 +2850,11 @@
2848
2850
  index = _a.index;
2849
2851
  if (item.text) {
2850
2852
  return jsxRuntime.jsx(material.ListSubheader, __assign({
2851
- disableSticky: true,
2852
- role: "heading"
2853
+ disableSticky: true
2853
2854
  }, {
2854
2855
  children: jsxRuntime.jsx(DotTypography, __assign({
2856
+ ariaRole: "heading",
2857
+ ariaLevel: 3,
2855
2858
  variant: "overline"
2856
2859
  }, {
2857
2860
  children: item.text
@@ -2941,6 +2944,7 @@
2941
2944
  }, "divider-" + index);
2942
2945
  }
2943
2946
  return jsxRuntime.jsx(DotListItem, {
2947
+ ariaLabel: item.text || item.primaryText,
2944
2948
  className: item.className,
2945
2949
  component: item.component,
2946
2950
  "data-testid": dataTestId + "-item-" + index,
@@ -3030,18 +3034,17 @@
3030
3034
  return endIcon;
3031
3035
  };
3032
3036
  var renderListItemLink = jsxRuntime.jsxs(DotLink, __assign({
3033
- href: href,
3034
3037
  className: listItemLinkClassName,
3035
- underline: "none",
3036
- target: target
3038
+ href: href,
3039
+ target: target,
3040
+ underline: "none"
3037
3041
  }, {
3038
3042
  children: [startIcon && jsxRuntime.jsx(material.ListItemIcon, {
3039
3043
  children: startIcon
3040
3044
  }, void 0), renderListItemText(), showEndIcon && renderListItemEndIcon()]
3041
3045
  }), void 0);
3042
3046
  return jsxRuntime.jsx(StyledListItem, __assign({
3043
- "aria-label": ariaLabel,
3044
- button: true,
3047
+ "aria-label": ariaLabel || tooltip,
3045
3048
  classes: {
3046
3049
  root: rootClasses
3047
3050
  },
@@ -3050,7 +3053,7 @@
3050
3053
  divider: divider,
3051
3054
  href: onClick ? null : href,
3052
3055
  onClick: onClick || !href ? handleClick : null,
3053
- role: onClick ? 'button' : ariaRole,
3056
+ role: ariaRole,
3054
3057
  selected: isFlyout ? isOpened : selected,
3055
3058
  target: target
3056
3059
  }, {
@@ -4049,7 +4052,6 @@
4049
4052
  role: "contentinfo"
4050
4053
  }, {
4051
4054
  children: [jsxRuntime.jsx(DotList, {
4052
- ariaRole: "presentation",
4053
4055
  items: appTypeMenuItems === null || appTypeMenuItems === void 0 ? void 0 : appTypeMenuItems.map(function (item) {
4054
4056
  return {
4055
4057
  child: item.children
@@ -4087,17 +4089,19 @@
4087
4089
  };
4088
4090
  return jsxRuntime.jsx(StyledAppSwitcher, __assign({
4089
4091
  ariaLabel: "App Switcher",
4092
+ ariaRole: "dialog",
4093
+ "aria-modal": "true",
4090
4094
  className: rootClasses,
4095
+ drawerHeaderProps: header,
4091
4096
  ModalProps: {
4092
4097
  style: {
4093
4098
  zIndex: zIndex
4094
4099
  }
4095
4100
  },
4096
- drawerHeaderProps: header,
4097
- variant: "temporary",
4098
- width: "340px",
4099
4101
  open: open,
4100
- onClose: closeHandler
4102
+ onClose: closeHandler,
4103
+ width: "340px",
4104
+ variant: "temporary"
4101
4105
  }, {
4102
4106
  children: content()
4103
4107
  }), void 0);
@@ -4433,6 +4437,7 @@
4433
4437
  onClick: backItem.onClick,
4434
4438
  tooltip: backItem.title || backItem.text
4435
4439
  }, void 0), jsxRuntime.jsx(DotTypography, __assign({
4440
+ ariaLevel: 4,
4436
4441
  className: "back-button-text",
4437
4442
  variant: "h4",
4438
4443
  noWrap: true
@@ -4735,7 +4740,7 @@
4735
4740
  componentId: "j2sgjy-0"
4736
4741
  })(templateObject_2$I || (templateObject_2$I = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
4737
4742
  var theme = _a.theme;
4738
- return styled.css(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n &.", " {\n &.", " .dot-text-field .", " {\n height: 56px;\n padding-left: ", ";\n }\n\n .MuiInputBase-root.Mui-disabled,\n .", " {\n ", ";\n }\n\n .", " {\n /* Override only top/bottom, but preserve left/right padding */\n padding-top: ", ";\n padding-bottom: ", ";\n }\n\n .dot-chip:first-child {\n margin-left: ", ";\n }\n\n .dot-text-field {\n .", " {\n min-height: ", ";\n }\n\n .warning-icon {\n color: ", ";\n }\n .error-icon {\n color: ", ";\n }\n }\n }\n "], ["\n &.", " {\n &.", " .dot-text-field .", " {\n height: 56px;\n padding-left: ", ";\n }\n\n .MuiInputBase-root.Mui-disabled,\n .", " {\n ", ";\n }\n\n .", " {\n /* Override only top/bottom, but preserve left/right padding */\n padding-top: ", ";\n padding-bottom: ", ";\n }\n\n .dot-chip:first-child {\n margin-left: ", ";\n }\n\n .dot-text-field {\n .", " {\n min-height: ", ";\n }\n\n .warning-icon {\n color: ", ";\n }\n .error-icon {\n color: ", ";\n }\n }\n }\n "])), rootClassName$I, inputMediumClassName, inputRootClassName, theme.spacing(2), readOnlyClassName$1, readOnlyStyles(theme), inputRootClassName, theme.spacing(0), theme.spacing(0), theme.spacing(0), inputRootClassName, theme.spacing(5), theme.palette.warning.main, theme.palette.error.main);
4743
+ return styled.css(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n &.", " {\n &.", " .dot-text-field .", " {\n height: 56px;\n padding-left: ", ";\n }\n\n .MuiInputBase-root.Mui-disabled,\n .", " .MuiInputBase-root {\n ", ";\n }\n\n .", " {\n /* Override only top/bottom, but preserve left/right padding */\n padding-top: ", ";\n padding-bottom: ", ";\n }\n\n .dot-chip:first-child {\n margin-left: ", ";\n }\n\n .dot-text-field {\n .", " {\n min-height: ", ";\n }\n\n .warning-icon {\n color: ", ";\n }\n .error-icon {\n color: ", ";\n }\n }\n }\n "], ["\n &.", " {\n &.", " .dot-text-field .", " {\n height: 56px;\n padding-left: ", ";\n }\n\n .MuiInputBase-root.Mui-disabled,\n .", " .MuiInputBase-root {\n ", ";\n }\n\n .", " {\n /* Override only top/bottom, but preserve left/right padding */\n padding-top: ", ";\n padding-bottom: ", ";\n }\n\n .dot-chip:first-child {\n margin-left: ", ";\n }\n\n .dot-text-field {\n .", " {\n min-height: ", ";\n }\n\n .warning-icon {\n color: ", ";\n }\n .error-icon {\n color: ", ";\n }\n }\n }\n "])), rootClassName$I, inputMediumClassName, inputRootClassName, theme.spacing(2), readOnlyClassName$1, readOnlyStyles(theme), inputRootClassName, theme.spacing(0), theme.spacing(0), theme.spacing(0), inputRootClassName, theme.spacing(5), theme.palette.warning.main, theme.palette.error.main);
4739
4744
  });
4740
4745
  var templateObject_1$L, templateObject_2$I;
4741
4746
 
@@ -6079,7 +6084,7 @@
6079
6084
  componentId: "sc-1tkr4ex-0"
6080
6085
  })(templateObject_2$z || (templateObject_2$z = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
6081
6086
  var theme = _a.theme;
6082
- return styled.css(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n &.", " {\n .MuiDialog-paper {\n min-width: 280px;\n max-height: 80vh;\n max-width: 80vw;\n }\n\n .MuiDialogTitle-root,\n .dot-dialog-title {\n align-items: center;\n display: flex;\n flex-wrap: nowrap;\n padding: ", ";\n\n h2 {\n flex-grow: 1;\n }\n\n .dot-icon-button {\n margin-left: ", ";\n }\n }\n\n .dot-dialog-content {\n padding: ", ";\n overflow-y: auto;\n }\n\n .dot-dialog-actions {\n padding: ", ";\n\n .cancel-button {\n color: inherit;\n }\n }\n }\n "], ["\n &.", " {\n .MuiDialog-paper {\n min-width: 280px;\n max-height: 80vh;\n max-width: 80vw;\n }\n\n .MuiDialogTitle-root,\n .dot-dialog-title {\n align-items: center;\n display: flex;\n flex-wrap: nowrap;\n padding: ", ";\n\n h2 {\n flex-grow: 1;\n }\n\n .dot-icon-button {\n margin-left: ", ";\n }\n }\n\n .dot-dialog-content {\n padding: ", ";\n overflow-y: auto;\n }\n\n .dot-dialog-actions {\n padding: ", ";\n\n .cancel-button {\n color: inherit;\n }\n }\n }\n "])), rootClassName$x, theme.spacing(1, 2), theme.spacing(1), theme.spacing(1, 2), theme.spacing(1));
6087
+ return styled.css(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n &.", " {\n .MuiDialog-paper {\n min-width: 280px;\n max-height: 80vh;\n max-width: 80vw;\n }\n\n .MuiDialogTitle-root,\n .dot-dialog-title {\n align-items: center;\n display: flex;\n flex-wrap: nowrap;\n padding: ", ";\n\n h2 {\n flex-grow: 1;\n }\n\n .dot-icon-button {\n margin-left: ", ";\n }\n }\n\n .dot-dialog-content {\n padding: ", ";\n overflow-y: auto;\n }\n\n .dot-dialog-actions {\n padding: ", ";\n\n .cancel-button {\n color: inherit;\n }\n }\n }\n "], ["\n &.", " {\n .MuiDialog-paper {\n min-width: 280px;\n max-height: 80vh;\n max-width: 80vw;\n }\n\n .MuiDialogTitle-root,\n .dot-dialog-title {\n align-items: center;\n display: flex;\n flex-wrap: nowrap;\n padding: ", ";\n\n h2 {\n flex-grow: 1;\n }\n\n .dot-icon-button {\n margin-left: ", ";\n }\n }\n\n .dot-dialog-content {\n padding: ", ";\n overflow-y: auto;\n }\n\n .dot-dialog-actions {\n padding: ", ";\n\n .cancel-button {\n color: inherit;\n }\n }\n }\n "])), rootClassName$x, theme.spacing(2, 3), theme.spacing(1), theme.spacing(1, 3), theme.spacing(1, 3, 2, 3));
6083
6088
  });
6084
6089
  var templateObject_1$A, templateObject_2$z;
6085
6090
 
@@ -6133,7 +6138,7 @@
6133
6138
  };
6134
6139
  return jsxRuntime.jsxs(StyledDialog, __assign({
6135
6140
  "aria-label": ariaLabel,
6136
- "aria-labelledby": "MuiDialogTitle-root",
6141
+ "aria-labelledby": "dialogTitle",
6137
6142
  classes: {
6138
6143
  root: rootClasses
6139
6144
  },
@@ -6142,7 +6147,9 @@
6142
6147
  open: isOpen
6143
6148
  }, {
6144
6149
  children: [jsxRuntime.jsxs("div", __assign({
6145
- className: "dot-dialog-title"
6150
+ id: "dialogTitle",
6151
+ className: "dot-dialog-title",
6152
+ tabIndex: -1
6146
6153
  }, {
6147
6154
  children: [renderNodeOrTypography(title, 'h2'), closeIconVisible && jsxRuntime.jsx(DotIconButton, {
6148
6155
  ariaLabel: "close dialog",
@@ -17,6 +17,8 @@ export interface BaseButtonProps extends CommonProps {
17
17
  onClick?: (event: MouseEvent<Element> | KeyboardEvent<Element>) => void;
18
18
  /** The size of the button */
19
19
  size?: ButtonSize;
20
+ /** Tab order for the button. */
21
+ tabIndex?: number;
20
22
  /** Help text to be displayed on hover */
21
23
  tooltip?: string;
22
24
  /** The type of button */
@@ -8,8 +8,6 @@ export interface ButtonProps extends BaseButtonProps {
8
8
  onKeyDown?: KeyboardEventHandler;
9
9
  /** Icon placed before the children. */
10
10
  startIcon?: ReactNode;
11
- /** Tab order for the button. */
12
- tabIndex?: number;
13
11
  }
14
12
  /** This component wraps the Button component from @material-ui. */
15
13
  export declare const DotButton: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@digital-ai/dot-components",
3
- "version": "2.14.0",
3
+ "version": "2.15.0",
4
4
  "private": false,
5
5
  "license": "SEE LICENSE IN <LICENSE.md>",
6
6
  "contributors": [