@digital-ai/dot-components 2.12.1 → 2.14.0

package/CHANGE_LOG.md

@@ -1,5 +1,37 @@
 # Changelog
 
+## [2.14.0](https://www.npmjs.com/package/@digital-ai/dot-components) (08/25/2023)
+
+[Full Changelog](https://digital-ai.github.io/dot-components/?path=/story/introduction--page/digital-ai/dot-components/compare/2.13.0...2.14.0)
+
+**Features:**
+
+- S-85164: `DotInputText` - support native `min` and `max` properties [\#1593](https://github.com/digital-ai/dot-components/pull/1593) ([dmiletic85](https://github.com/dmiletic85))
+- S-95238 `DotAutocomplete` - Expose native `isOptionEqualToValue` [\#1592](https://github.com/digital-ai/dot-components/pull/1592) ([dmiletic85](https://github.com/dmiletic85))
+
+**Fixed bugs:**
+
+- D-26285: Fix DotDraggable items: wrong position [\#1599](https://github.com/digital-ai/dot-components/pull/1599) ([angel-git](https://github.com/angel-git))
+- D-26238 `DotTable`, `DotTableActions`: duplicated actions and incorrect `onRowClick` triggering [\#1591](https://github.com/digital-ai/dot-components/pull/1591) ([dmiletic85](https://github.com/dmiletic85))
+- D-23137: update read-only styles for various input fields [\#1580](https://github.com/digital-ai/dot-components/pull/1580) ([CWSites](https://github.com/CWSites))
+
+**Misc:**
+
+- S-94771: modifying placement of modules and interfaces [\#1588](https://github.com/digital-ai/dot-components/pull/1588) ([CWSites](https://github.com/CWSites))
+
+## [2.13.0](https://www.npmjs.com/package/@digital-ai/dot-components) (08/13/2023)
+
+[Full Changelog](https://digital-ai.github.io/dot-components/?path=/story/introduction--page/digital-ai/dot-components/compare/2.12.1...2.13.0)
+
+**Features:**
+
+- S-95094: `DotTable` - Expose `rowsPerPageOptions` and `labelRowsPerPage` [\#1583](https://github.com/digital-ai/dot-components/pull/1583) ([dmiletic85](https://github.com/dmiletic85))
+
+**Fixed bugs:**
+
+- D-26200: `DotMenu` has an extra empty space [\#1585](https://github.com/digital-ai/dot-components/pull/1585) ([dmiletic85](https://github.com/dmiletic85))
+- D-26197: `DotTable`, `DotTableActions`: Hovered action buttons are not displayed properly within list item [\#1584](https://github.com/digital-ai/dot-components/pull/1584) ([dmiletic85](https://github.com/dmiletic85))
+
 ## [2.12.1](https://www.npmjs.com/package/@digital-ai/dot-components) (08/07/2023)
 
 [Full Changelog](https://digital-ai.github.io/dot-components/?path=/story/introduction--page/digital-ai/dot-components/compare/2.12.0...2.12.1)
@@ -513,6 +545,7 @@
 - S-88324: Updated the Brand logo for dark theme [\#1315](https://github.com/digital-ai/dot-components/pull/1315) ([csmathguy](https://github.com/csmathguy))
 - 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))
 - D-23298: `NavigationRail` Fix badges issue [\#1303](https://github.com/digital-ai/dot-components/pull/1303) ([dmiletic85](https://github.com/dmiletic85))
+- 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))
 
 **Misc:**
 
@@ -535,7 +568,6 @@
 - D-23289: \[DOT 2.0\] Double checkbox on `DotSwitch` [\#1299](https://github.com/digital-ai/dot-components/pull/1299) ([dmiletic85](https://github.com/dmiletic85))
 - D-21921: `DotTabs` color and border styles [\#1296](https://github.com/digital-ai/dot-components/pull/1296) ([CWSites](https://github.com/CWSites))
 - 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))
-- 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))
 
 ## [2.0.0](https://www.npmjs.com/package/@digital-ai/dot-components) (11/02/2022)
 
@@ -614,7 +646,6 @@
 **Fixed bugs:**
 
 - S-86692: component cleanup [\#1238](https://github.com/digital-ai/dot-components/pull/1238) ([CWSites](https://github.com/CWSites))
-- S-84151: fix e2e tests for Release 2.0 [\#1146](https://github.com/digital-ai/dot-components/pull/1146) ([CWSites](https://github.com/CWSites))
 
 **Misc:**
 
@@ -641,6 +672,7 @@
 - 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))
 - S-86683: `DotAutocomplete`: expose `onBlur` [\#1236](https://github.com/digital-ai/dot-components/pull/1236) ([dmiletic85](https://github.com/dmiletic85))
 - 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))
+- Issue \#1210: add prop for noMargin to typography [\#1222](https://github.com/digital-ai/dot-components/pull/1222) ([CWSites](https://github.com/CWSites))
 
 **Fixed bugs:**
 
@@ -660,7 +692,6 @@
 
 - S-86369: input field success [\#1226](https://github.com/digital-ai/dot-components/pull/1226) ([CWSites](https://github.com/CWSites))
 - S-84069: expose shrink prop to input fields [\#1223](https://github.com/digital-ai/dot-components/pull/1223) ([CWSites](https://github.com/CWSites))
-- Issue \#1210: add prop for noMargin to typography [\#1222](https://github.com/digital-ai/dot-components/pull/1222) ([CWSites](https://github.com/CWSites))
 - 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))
 - S-85811: `NavigationRail` Allow badges [\#1215](https://github.com/digital-ai/dot-components/pull/1215) ([dmiletic85](https://github.com/dmiletic85))
 
@@ -688,7 +719,6 @@
 **Features:**
 
 - S-85293: `SplitButton` Improvements [\#1201](https://github.com/digital-ai/dot-components/pull/1201) ([dmiletic85](https://github.com/dmiletic85))
-- 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))
 
 **Fixed bugs:**
 
@@ -720,6 +750,7 @@
 **Features:**
 
 - 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))
+- 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))
 
 **Fixed bugs:**
 
@@ -730,10 +761,6 @@
 
 [Full Changelog](https://digital-ai.github.io/dot-components/?path=/story/introduction--page/digital-ai/dot-components/compare/1.17.0...1.17.1)
 
-## [1.17.0](https://www.npmjs.com/package/@digital-ai/dot-components) (05/18/2022)
-
-[Full Changelog](https://digital-ai.github.io/dot-components/?path=/story/introduction--page/digital-ai/dot-components/compare/1.16.1...1.17.0)
-
 **Features:**
 
 - S-84947: `DotButtonToggle`: Add tooltip support [\#1166](https://github.com/digital-ai/dot-components/pull/1166) ([dmiletic85](https://github.com/dmiletic85))
@@ -741,6 +768,13 @@
 **Fixed bugs:**
 
 - 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://www.npmjs.com/package/@digital-ai/dot-components) (05/18/2022)
+
+[Full Changelog](https://digital-ai.github.io/dot-components/?path=/story/introduction--page/digital-ai/dot-components/compare/1.16.1...1.17.0)
+
+**Fixed bugs:**
+
 - 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))
 
 **Misc:**
@@ -755,6 +789,7 @@
 
 - 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))
 - D-20958: Safari animation jitter [\#1154](https://github.com/digital-ai/dot-components/pull/1154) ([CWSites](https://github.com/CWSites))
+- S-84151: fix e2e tests for Release 2.0 [\#1146](https://github.com/digital-ai/dot-components/pull/1146) ([CWSites](https://github.com/CWSites))
 
 **Misc:**
 
@@ -809,6 +844,10 @@
 
 [Full Changelog](https://digital-ai.github.io/dot-components/?path=/story/introduction--page/digital-ai/dot-components/compare/1.12.0...1.13.0)
 
+**Breaking changes:**
+
+- S-82342: Upgrade MUI to v5 [\#1079](https://github.com/digital-ai/dot-components/pull/1079) ([CWSites](https://github.com/CWSites))
+
 **Features:**
 
 - S-82940: `DotProgress`: Add more Storybook examples [\#1098](https://github.com/digital-ai/dot-components/pull/1098) ([dmiletic85](https://github.com/dmiletic85))
@@ -1050,6 +1089,7 @@
 - D-19378: `AutoComplete` doesn't have `required` property [\#914](https://github.com/digital-ai/dot-components/pull/914) ([dmiletic85](https://github.com/dmiletic85))
 - D-19376: `Menu`: `maxVisibleItems` prop does not control visible items anymore [\#911](https://github.com/digital-ai/dot-components/pull/911) ([dmiletic85](https://github.com/dmiletic85))
 - D-19366: `Menu`: Circular dependency [\#909](https://github.com/digital-ai/dot-components/pull/909) ([dmiletic85](https://github.com/dmiletic85))
+- D-19355: `Breadcrumbs`: invalid combination of props [\#907](https://github.com/digital-ai/dot-components/pull/907) ([dmiletic85](https://github.com/dmiletic85))
 - D-19129: `Table`: Cells in the Table component should be wrapped by `DotTypography` [\#900](https://github.com/digital-ai/dot-components/pull/900) ([dmiletic85](https://github.com/dmiletic85))
 
 ## [1.5.4](https://www.npmjs.com/package/@digital-ai/dot-components) (12/28/2021)
@@ -1064,7 +1104,6 @@
 
 **Fixed bugs:**
 
-- D-19355: `Breadcrumbs`: invalid combination of props [\#907](https://github.com/digital-ai/dot-components/pull/907) ([dmiletic85](https://github.com/dmiletic85))
 - D-19337: `List`: Circular dependency [\#897](https://github.com/digital-ai/dot-components/pull/897) ([dmiletic85](https://github.com/dmiletic85))
 - D-19330: `AppToolbar` shouldn't have grey dividers [\#891](https://github.com/digital-ai/dot-components/pull/891) ([dmiletic85](https://github.com/dmiletic85))
 - D-19200: `List` Nested list drawer is not rendering correctly [\#869](https://github.com/digital-ai/dot-components/pull/869) ([dmiletic85](https://github.com/dmiletic85))
@@ -1495,6 +1534,7 @@
 - S-76838: address Sonarcloud code issues [\#608](https://github.com/digital-ai/dot-components/pull/608) ([CWSites](https://github.com/CWSites))
 - S-77317: Add 'height' prop to DotDrawer component [\#603](https://github.com/digital-ai/dot-components/pull/603) ([selsemore](https://github.com/selsemore))
 - Update GitHub prerelease [\#599](https://github.com/digital-ai/dot-components/pull/599) ([CWSites](https://github.com/CWSites))
+- S-76917: remove progressionBoard styles from theme provider [\#597](https://github.com/digital-ai/dot-components/pull/597) ([CWSites](https://github.com/CWSites))
 
 ## [1.0.3](https://www.npmjs.com/package/@digital-ai/dot-components) (07/27/2021)
 
@@ -1504,17 +1544,12 @@
 
 [Full Changelog](https://digital-ai.github.io/dot-components/?path=/story/introduction--page/digital-ai/dot-components/compare/1.0.1...1.0.2)
 
-**Breaking changes:**
-
-- S-76919: cleaning up props used with various form elements [\#606](https://github.com/digital-ai/dot-components/pull/606) ([CWSites](https://github.com/CWSites))
-
 **Features:**
 
 - S-76914: optional prop for truncating accordion summary to one line [\#590](https://github.com/digital-ai/dot-components/pull/590) ([CWSites](https://github.com/CWSites))
 
 **Misc:**
 
-- S-76917: remove progressionBoard styles from theme provider [\#597](https://github.com/digital-ai/dot-components/pull/597) ([CWSites](https://github.com/CWSites))
 - S-76905: add disablePortal prop to SplitButton and set z-index for SplitButton menu [\#596](https://github.com/digital-ai/dot-components/pull/596) ([selsemore](https://github.com/selsemore))
 - S-76905: fix error upon selection of split button option with non-numeric key [\#595](https://github.com/digital-ai/dot-components/pull/595) ([selsemore](https://github.com/selsemore))
 - updating github workflow to default to patch release [\#593](https://github.com/digital-ai/dot-components/pull/593) ([CWSites](https://github.com/CWSites))

package/index.d.ts

@@ -3,3 +3,4 @@ export * as lightColors from './lib/theme-provider/colors/light-theme-colors';
 export * as themeVariables from './lib/theme-provider/common/variables';
 export type { ThemeProviderProps } from './lib/theme-provider/ThemeProvider';
 export { avatarColors, DotThemeProvider, typographyOptions, } from './lib/theme-provider/ThemeProvider';
+export * from './lib/theme-provider/interfaces';

package/index.esm.js

@@ -212,6 +212,7 @@ const DotAccordion = ({
 const formHelperTextRootStyles = theme => css(["font-family:", ";font-size:", "px;font-weight:400;margin:", ";display:flex;align-items:flex-end;&:not(.Mui-error){color:", ";}&.read-only .MuiOutlinedInput-root:hover > fieldset{border-color:", ";}"], theme.typography.fontFamily, theme.typography.body2.fontSize, theme.spacing(0.5, 0, 0, 1.5), theme.palette.grey[400], theme.palette.layer.n200);
 const adornmentIconStyles = () => css(["font-size:24px;height:24px;padding:0;width:24px;"]);
 const pickerInputStyles = theme => css(["label:not(.MuiInputLabel-shrink){top:-5px;}.MuiInputBase-root{margin-bottom:0;.dot-error-icon{margin-right:", ";color:", ";}.dot-icon{", ";}}.MuiInputBase-input{height:", ";padding:", ";}.MuiFormHelperText-root{", ";}"], theme.spacing(0.5), theme.palette.error.main, adornmentIconStyles(), theme.spacing(2), theme.spacing(1.5, 0, 1.5, 2), formHelperTextRootStyles(theme));
+const readOnlyStyles = theme => css(["background:", ";color:", ";border-color:", ";-webkit-text-fill-color:", ";input.Mui-disabled{-webkit-text-fill-color:", ";}.dot-chip{background:", ";opacity:1;}"], theme.palette.grey[50], theme.palette.grey[500], theme.palette.grey[300], theme.palette.grey[500], theme.palette.grey[500], theme.palette.layer.n0);
 
 const rootClassName$13 = 'dot-text-field';
 const rootSelectClassName = 'dot-select-field';
@@ -221,6 +222,7 @@ const warningClassName = 'dot-warning';
 const successClassName = 'dot-success';
 const adornmentIconClassName = 'dot-adornment-icon';
 const fieldsetClassName = 'MuiOutlinedInput-notchedOutline';
+const readOnlyClassName$1 = 'read-only';
 const StyledAdornment = styled(InputAdornment).withConfig({
   displayName: "InputFormFieldsstyles__StyledAdornment",
   componentId: "sc-1mbn9f0-0"
@@ -230,7 +232,7 @@ const StyledInputLabel = styled(InputLabel).withConfig({
   componentId: "sc-1mbn9f0-1"
 })(["", ""], ({
   theme
-}) => css(["&.", "{margin-bottom:", ";transform:none;&.Mui-disabled .dot-typography{color:rgba(0,0,0,0.38);}&.Mui-error .dot-typography{color:", ";}.dot-typography{display:inline;}}"], labelClassName, theme.spacing(0.5), theme.palette.error.main));
+}) => css(["&.", "{margin-bottom:", ";transform:none;&.Mui-disabled .dot-typography{color:", ";}&.Mui-error .dot-typography{color:", ";}.dot-typography{display:inline;}}"], labelClassName, theme.spacing(0.5), theme.palette.layer.n700, theme.palette.error.main));
 const StyledTextFieldContainer = styled.div.withConfig({
   displayName: "InputFormFieldsstyles__StyledTextFieldContainer",
   componentId: "sc-1mbn9f0-2"
@@ -241,7 +243,7 @@ const StyledTextField = styled(TextField).withConfig({
 })(["", ""], ({
   theme,
   InputProps
-}) => 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;}}&.", " .", "{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{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`, rootSelectClassName, adornmentIconClassName, theme.spacing(2), rootSelectClassName, rootClassName$13, adornmentIconClassName, theme.palette.layer.n700, theme.typography.body2.fontSize, theme.spacing(1.5), 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)));
+}) => 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)));
 
 const rootClassName$12 = 'dot-action-toolbar';
 const StyledToolbar = styled(Toolbar).withConfig({
@@ -2051,8 +2053,7 @@ const calculateMaxHeight = ({
     height
   }) => {
     const customItemHeight = height ? height : itemHeight;
-    // + 3 is for bottom margin of menuItem
-    maxHeight += customItemHeight + 3;
+    maxHeight += customItemHeight;
   });
   return maxHeight;
 };
@@ -2937,7 +2938,9 @@ const DotInputText = ({
   id,
   inputRef,
   label,
+  max,
   maxRows,
+  min,
   minRows,
   multiline: _multiline = false,
   name,
@@ -2964,7 +2967,7 @@ const DotInputText = ({
   const hasEndAdornmentIcon = endIcon || _error || hasWarning || hasSuccess;
   // This state is used only with debounce feature enabled
   const [inputTextState, setInputTextState] = useState(hasDebounce && getInitialState(value));
-  const rootStyles = useStylesWithRootClass(rootClassName$13, hasError, hasWarning, hasSuccess, _readOnly ? 'read-only' : '');
+  const rootStyles = useStylesWithRootClass(rootClassName$13, hasError, hasWarning, hasSuccess, _readOnly && readOnlyClassName$1);
   // Used to control text value from the consumer component
   // when debounce feature is enabled
   useEffect(() => {
@@ -3017,6 +3020,7 @@ const DotInputText = ({
     }), void 0);
   };
   const wrapperClassName = useStylesWithRootClass(_fullWidth !== false ? 'dot-input-text--fullwidth' : '', className);
+  const inputClassName = useStylesWithRootClass('dot-input', _readOnly && readOnlyClassName$1);
   return jsxs(StyledTextFieldContainer, Object.assign({
     className: wrapperClassName
   }, {
@@ -3040,7 +3044,6 @@ const DotInputText = ({
       defaultValue: defaultInputValue,
       disabled: _disabled,
       error: _error,
-      focused: _readOnly ? false : undefined,
       fullWidth: _fullWidth,
       helperText: helperText,
       id: id,
@@ -3049,8 +3052,10 @@ const DotInputText = ({
       },
       inputProps: {
         'data-testid': dataTestId,
-        className: 'dot-input',
-        readOnly: _readOnly
+        className: inputClassName,
+        readOnly: _readOnly,
+        max,
+        min
       },
       inputRef: inputRef,
       label: persistentLabel ? null : label,
@@ -4299,7 +4304,7 @@ const StyledAutocomplete = styled(Autocomplete).withConfig({
   componentId: "j2sgjy-0"
 })(["", ""], ({
   theme
-}) => css(["&.", "{&.", " .dot-text-field .", "{height:56px;padding-left:", ";}.", "{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), inputRootClassName, theme.spacing(0), theme.spacing(0), theme.spacing(0), inputRootClassName, theme.spacing(5), theme.palette.warning.main, theme.palette.error.main));
+}) => 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));
 
 const rootClassName$H = 'dot-chip';
 const StyledChip = styled(Chip).withConfig({
@@ -4441,6 +4446,7 @@ const DotAutoComplete = ({
   inputId,
   inputRef,
   inputValue,
+  isOptionEqualToValue,
   label,
   loading,
   maxHeight,
@@ -4474,7 +4480,7 @@ const DotAutoComplete = ({
   const preventDuplicateInsertion = actionItem === null || actionItem === void 0 ? void 0 : actionItem.preventDuplicateInsertion;
   const textFieldWarningClassName = !_error && _warning && warningClassName;
   const rootClasses = useStylesWithRootClass(rootClassName$I, _size === 'medium' && inputMediumClassName, className);
-  const textFieldRootClasses = useStylesWithRootClass(rootClassName$13, _readOnly && 'read-only', textFieldWarningClassName);
+  const textFieldRootClasses = useStylesWithRootClass(rootClassName$13, _readOnly && readOnlyClassName$1, textFieldWarningClassName);
   const inputRootClasses = useStylesWithRootClass(inputRootClassName, !_dense && inputMediumClassName);
   let highlightedOption = null;
   let textFieldInput;
@@ -4660,6 +4666,7 @@ const DotAutoComplete = ({
     getOptionDisabled: checkIfOptionDisabled,
     groupBy: _group ? option => option.group : undefined,
     inputValue: inputValue,
+    isOptionEqualToValue: isOptionEqualToValue,
     ListboxComponent: ListboxComponent,
     loading: loading,
     multiple: _multiple,
@@ -4712,7 +4719,6 @@ const DotAutoComplete = ({
               root: textFieldRootClasses
             },
             error: _error,
-            focused: _readOnly ? false : undefined,
             helperText: helperText,
             id: inputId,
             inputProps: Object.assign(Object.assign({}, inputProps), {
@@ -6214,7 +6220,8 @@ const DotInputSelect = ({
   const hasWarning = !_error && _warning && warningClassName;
   const hasSuccess = !_error && !_warning && success && successClassName;
   const endAdornment = endIcon || endText;
-  const rootStyles = useStylesWithRootClass(rootSelectClassName, hasSuccess, hasWarning, _readOnly ? 'read-only' : '');
+  const inputStyles = useStylesWithRootClass('dot-select', _readOnly && readOnlyClassName$1);
+  const rootStyles = useStylesWithRootClass(rootSelectClassName, hasSuccess, hasWarning);
   const getOption = option => {
     return typeof option === 'string' ? option : option.option;
   };
@@ -6250,12 +6257,12 @@ const DotInputSelect = ({
         readOnly: _readOnly,
         open: _readOnly ? false : undefined
       },
+      "aria-label": ariaLabel || label,
       autoFocus: autoFocus,
       className: rootStyles,
       defaultValue: defaultValue,
       disabled: _disabled,
       error: _error,
-      focused: _readOnly ? false : undefined,
       fullWidth: _fullWidth,
       helperText: helperText,
       id: id,
@@ -6265,7 +6272,7 @@ const DotInputSelect = ({
       inputProps: {
         'aria-label': ariaLabel,
         'data-testid': dataTestId,
-        className: 'dot-select',
+        className: inputStyles,
         readOnly: _readOnly
       },
       inputRef: inputRef,
@@ -6277,6 +6284,7 @@ const DotInputSelect = ({
       onFocus: onFocus,
       onKeyDown: onKeyDown,
       required: required,
+      role: "textbox",
       select: true,
       size: _size,
       value: value,
@@ -7424,7 +7432,7 @@ const DotInlineEdit = ({
     onKeyDown: !readOnly ? event => handleKeyPress(event) : undefined,
     ref: inlineEditRef,
     role: _ariaRole,
-    tabIndex: !readOnly ? _tabIndex : undefined,
+    tabIndex: _tabIndex,
     typography: _typography
   }, {
     children: editing ? renderEditMode() : renderViewMode()
@@ -8844,6 +8852,7 @@ const DotTable = ({
   emptyMessage,
   footerTypography: _footerTypography = TABLE_TYPOGRAPHY_VARIANT,
   headerTypography: _headerTypography = TABLE_TYPOGRAPHY_VARIANT,
+  labelRowsPerPage,
   loading: _loading = false,
   maxHeight,
   multiSelect,
@@ -8853,6 +8862,7 @@ const DotTable = ({
   onUpdateData,
   page: _page = 0,
   rowsPerPage,
+  rowsPerPageOptions,
   stickyHeader: _stickyHeader = true,
   sortable: _sortable = true,
   toolbar
@@ -9007,10 +9017,12 @@ const DotTable = ({
       }), void 0)
     }), void 0), rowsPerPage && jsx(DotTablePagination, {
       count: getTotalCount(),
+      labelRowsPerPage: labelRowsPerPage,
       onPageChange: onPageChange,
       onRowsPerPageChange: onRowsPerPageChange,
       page: tablePage,
       rowsPerPage: tableRowsPerPage,
+      rowsPerPageOptions: rowsPerPageOptions,
       typography: _footerTypography
     }, void 0)]
   }), void 0);
@@ -9025,7 +9037,6 @@ const getMenuItem = action => {
     "data-testid": action['data-testid'],
     disabled: action.disabled,
     startIcon: startIcon,
-    onClick: action.onClick,
     type: "text"
   }, {
     children: action.label
@@ -9058,9 +9069,7 @@ const TableActionsContainer = styled.div.withConfig({
 const StyledMenu = styled(DotMenu).withConfig({
   displayName: "TableActionsstyles__StyledMenu",
   componentId: "sc-8lo813-1"
-})(["", ""], ({
-  theme
-}) => css(["&.dot-menu .table-menu-button{margin-left:0;padding-left:0;&:hover{background-color:", ";}}"], theme.palette.grey[50]));
+})(["", ""], () => css(["&.dot-menu .table-menu-button{margin-left:0;padding-left:0;&:hover{background-color:transparent;}}"]));
 
 const DotTableActions = ({
   actions,
@@ -9100,21 +9109,27 @@ const DotTableActions = ({
     }
   };
   const toggleMenu = event => {
+    event.stopPropagation();
     setAnchorEl(event.currentTarget);
     setMenuOpen(!menuOpen);
   };
-  const onSelect = (_event, _menuId, itemKey) => {
+  const onSelect = (event, _menuId, itemKey) => {
+    event.stopPropagation();
     selectionMap[itemKey].onClick(null);
   };
   const onLeave = () => {
     setMenuOpen(false);
   };
+  const handleTableActionClick = (event, action) => {
+    event.stopPropagation();
+    action.onClick(event);
+  };
   const renderTableActions = () => {
     return actions && actions.map((action, index) => index < 2 && jsx(DotTableAction, {
       iconId: action.iconId,
       label: action.label,
       tooltip: action.tooltip || action.label,
-      onClick: action.onClick
+      onClick: e => handleTableActionClick(e, action)
     }, `action-${index}`));
   };
   return jsxs(Fragment, {
@@ -9125,6 +9140,7 @@ const DotTableActions = ({
       children: [!showMenu && renderTableActions(), (showMenu || actions.length > 2) && jsx(DotIconButton, {
         ariaLabel: "more options",
         className: "dot-table-action-icon",
+        "data-testid": "dot-table-action-icon",
         iconId: "options",
         iconSize: "small",
         onClick: toggleMenu,
@@ -9579,7 +9595,7 @@ const StyledDraggableList = styled.div.withConfig({
 })(["", ""], ({
   theme,
   draggableHandle
-}) => css(["&.", "{padding:", ";.", "{.dot-icon{color:", ";}&.react-draggable-dragging{background-color:", ";}&.with-default-cursor{cursor:default;}&.with-handle-grab-cursor ", "{cursor:grab;}}}"], rootClassName$3, theme.spacing(1, 0), listItemClassName, theme.palette.layer.n700, theme.palette.grey[50], draggableHandle));
+}) => css(["&.", "{padding:", ";position:relative;.", "{.dot-icon{color:", ";}&.react-draggable-dragging{background-color:", ";}&.with-default-cursor{cursor:default;}&.with-handle-grab-cursor ", "{cursor:grab;}}}"], rootClassName$3, theme.spacing(1, 0), listItemClassName, theme.palette.layer.n700, theme.palette.grey[50], draggableHandle));
 
 const getOrderedListItems = (layout, listItems) => {
   if (!listItems || !layout) return [];
@@ -9732,7 +9748,7 @@ const StyledDatePicker = styled(DatePicker).withConfig({
   componentId: "sc-1to4suu-1"
 })(["", ""], ({
   theme
-}) => css(["&.", "{", ";}"], rootClassName$1, pickerInputStyles(theme)));
+}) => css(["&.", "{", ";.Mui-disabled.MuiInputBase-root,&.read-only .MuiInputBase-root{", ";}.MuiFormLabel-root{color:", ";}}"], rootClassName$1, pickerInputStyles(theme), readOnlyStyles(theme), theme.palette.layer.n500));
 const StyledPickersDay = styled(PickersDay).withConfig({
   displayName: "DatePickerstyles__StyledPickersDay",
   componentId: "sc-1to4suu-2"
@@ -10015,7 +10031,7 @@ const StyledTimePicker = styled(TimePicker).withConfig({
   componentId: "sc-17aptuh-1"
 })(["", ""], ({
   theme
-}) => css(["&.", "{", ";}"], rootClassName, pickerInputStyles(theme)));
+}) => css(["&.", "{", ";.Mui-disabled.MuiInputBase-root,&.read-only .MuiInputBase-root{", ";}.MuiFormLabel-root{color:", ";}}"], rootClassName, pickerInputStyles(theme), readOnlyStyles(theme), theme.palette.layer.n500));
 
 dayjs.extend(utc);
 const DEFAULT_PICKER_TIME_FORMAT = 'HH:mm';
@@ -10312,7 +10328,6 @@ const DotTimePicker = ({
             required: _required,
             helperText,
             error,
-            focused: isComponentReadOnly ? false : undefined,
             InputProps: {
               endAdornment: jsxs(Fragment, {
                 children: [error && jsx(DotIcon, {

package/index.umd.js

@@ -360,7 +360,10 @@
     var pickerInputStyles = function pickerInputStyles(theme) {
       return styled.css(templateObject_3$d || (templateObject_3$d = __makeTemplateObject(["\n  label:not(.MuiInputLabel-shrink) {\n    top: -5px;\n  }\n\n  .MuiInputBase-root {\n    margin-bottom: 0;\n\n    .dot-error-icon {\n      margin-right: ", ";\n      color: ", ";\n    }\n\n    .dot-icon {\n      ", ";\n    }\n  }\n\n  .MuiInputBase-input {\n    height: ", ";\n    padding: ", ";\n  }\n\n  .MuiFormHelperText-root {\n    ", ";\n  }\n"], ["\n  label:not(.MuiInputLabel-shrink) {\n    top: -5px;\n  }\n\n  .MuiInputBase-root {\n    margin-bottom: 0;\n\n    .dot-error-icon {\n      margin-right: ", ";\n      color: ", ";\n    }\n\n    .dot-icon {\n      ", ";\n    }\n  }\n\n  .MuiInputBase-input {\n    height: ", ";\n    padding: ", ";\n  }\n\n  .MuiFormHelperText-root {\n    ", ";\n  }\n"])), theme.spacing(0.5), theme.palette.error.main, adornmentIconStyles(), theme.spacing(2), theme.spacing(1.5, 0, 1.5, 2), formHelperTextRootStyles(theme));
     };
-    var templateObject_1$1a, templateObject_2$15, templateObject_3$d;
+    var readOnlyStyles = function readOnlyStyles(theme) {
+      return styled.css(templateObject_4$b || (templateObject_4$b = __makeTemplateObject(["\n  background: ", ";\n  color: ", ";\n  border-color: ", ";\n  -webkit-text-fill-color: ", ";\n\n  input.Mui-disabled {\n    -webkit-text-fill-color: ", ";\n  }\n\n  .dot-chip {\n    background: ", ";\n    opacity: 1;\n  }\n"], ["\n  background: ", ";\n  color: ", ";\n  border-color: ", ";\n  -webkit-text-fill-color: ", ";\n\n  input.Mui-disabled {\n    -webkit-text-fill-color: ", ";\n  }\n\n  .dot-chip {\n    background: ", ";\n    opacity: 1;\n  }\n"])), theme.palette.grey[50], theme.palette.grey[500], theme.palette.grey[300], theme.palette.grey[500], theme.palette.grey[500], theme.palette.layer.n0);
+    };
+    var templateObject_1$1a, templateObject_2$15, templateObject_3$d, templateObject_4$b;
 
     var rootClassName$13 = 'dot-text-field';
     var rootSelectClassName = 'dot-select-field';
@@ -370,6 +373,7 @@
     var successClassName = 'dot-success';
     var adornmentIconClassName = 'dot-adornment-icon';
     var fieldsetClassName = 'MuiOutlinedInput-notchedOutline';
+    var readOnlyClassName$1 = 'read-only';
     var StyledAdornment = styled__default["default"](material.InputAdornment).withConfig({
       displayName: "InputFormFieldsstyles__StyledAdornment",
       componentId: "sc-1mbn9f0-0"
@@ -379,7 +383,7 @@
       componentId: "sc-1mbn9f0-1"
     })(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
       var theme = _a.theme;
-      return styled.css(templateObject_2$14 || (templateObject_2$14 = __makeTemplateObject(["\n    &.", " {\n      margin-bottom: ", ";\n      transform: none;\n\n      &.Mui-disabled .dot-typography {\n        color: rgba(0, 0, 0, 0.38);\n      }\n\n      &.Mui-error .dot-typography {\n        color: ", ";\n      }\n\n      .dot-typography {\n        display: inline;\n      }\n    }\n  "], ["\n    &.", " {\n      margin-bottom: ", ";\n      transform: none;\n\n      &.Mui-disabled .dot-typography {\n        color: rgba(0, 0, 0, 0.38);\n      }\n\n      &.Mui-error .dot-typography {\n        color: ", ";\n      }\n\n      .dot-typography {\n        display: inline;\n      }\n    }\n  "])), labelClassName, theme.spacing(0.5), theme.palette.error.main);
+      return styled.css(templateObject_2$14 || (templateObject_2$14 = __makeTemplateObject(["\n    &.", " {\n      margin-bottom: ", ";\n      transform: none;\n\n      &.Mui-disabled .dot-typography {\n        color: ", ";\n      }\n\n      &.Mui-error .dot-typography {\n        color: ", ";\n      }\n\n      .dot-typography {\n        display: inline;\n      }\n    }\n  "], ["\n    &.", " {\n      margin-bottom: ", ";\n      transform: none;\n\n      &.Mui-disabled .dot-typography {\n        color: ", ";\n      }\n\n      &.Mui-error .dot-typography {\n        color: ", ";\n      }\n\n      .dot-typography {\n        display: inline;\n      }\n    }\n  "])), labelClassName, theme.spacing(0.5), theme.palette.layer.n700, theme.palette.error.main);
     });
     var StyledTextFieldContainer = styled__default["default"].div.withConfig({
       displayName: "InputFormFieldsstyles__StyledTextFieldContainer",
@@ -391,7 +395,7 @@
     })(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
       var theme = _a.theme,
         InputProps = _a.InputProps;
-      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    }\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 {\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    }\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 {\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", rootSelectClassName, adornmentIconClassName, theme.spacing(2), rootSelectClassName, rootClassName$13, adornmentIconClassName, theme.palette.layer.n700, theme.typography.body2.fontSize, theme.spacing(1.5), 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));
+      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));
     });
     var templateObject_1$19, templateObject_2$14, templateObject_3$c, templateObject_4$a, templateObject_5$3, templateObject_6$1;
 
@@ -2312,8 +2316,7 @@
       visibleItems.forEach(function (_a) {
         var height = _a.height;
         var customItemHeight = height ? height : itemHeight;
-        // + 3 is for bottom margin of menuItem
-        maxHeight += customItemHeight + 3;
+        maxHeight += customItemHeight;
       });
       return maxHeight;
     };
@@ -3267,7 +3270,9 @@
         id = _a.id,
         inputRef = _a.inputRef,
         label = _a.label,
+        max = _a.max,
         maxRows = _a.maxRows,
+        min = _a.min,
         minRows = _a.minRows,
         _f = _a.multiline,
         multiline = _f === void 0 ? false : _f,
@@ -3301,7 +3306,7 @@
       var _m = React.useState(hasDebounce && getInitialState(value)),
         inputTextState = _m[0],
         setInputTextState = _m[1];
-      var rootStyles = useStylesWithRootClass(rootClassName$13, hasError, hasWarning, hasSuccess, readOnly ? 'read-only' : '');
+      var rootStyles = useStylesWithRootClass(rootClassName$13, hasError, hasWarning, hasSuccess, readOnly && readOnlyClassName$1);
       // Used to control text value from the consumer component
       // when debounce feature is enabled
       React.useEffect(function () {
@@ -3356,6 +3361,7 @@
         }), void 0);
       };
       var wrapperClassName = useStylesWithRootClass(fullWidth !== false ? 'dot-input-text--fullwidth' : '', className);
+      var inputClassName = useStylesWithRootClass('dot-input', readOnly && readOnlyClassName$1);
       return jsxRuntime.jsxs(StyledTextFieldContainer, __assign({
         className: wrapperClassName
       }, {
@@ -3379,7 +3385,6 @@
           defaultValue: defaultInputValue,
           disabled: disabled,
           error: error,
-          focused: readOnly ? false : undefined,
           fullWidth: fullWidth,
           helperText: helperText,
           id: id,
@@ -3388,8 +3393,10 @@
           },
           inputProps: {
             'data-testid': dataTestId,
-            className: 'dot-input',
-            readOnly: readOnly
+            className: inputClassName,
+            readOnly: readOnly,
+            max: max,
+            min: min
           },
           inputRef: inputRef,
           label: persistentLabel ? null : label,
@@ -4728,7 +4735,7 @@
       componentId: "j2sgjy-0"
     })(templateObject_2$I || (templateObject_2$I = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
       var theme = _a.theme;
-      return styled.css(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n    &.", " {\n      &.", " .dot-text-field .", " {\n        height: 56px;\n        padding-left: ", ";\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      .", " {\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), inputRootClassName, theme.spacing(0), theme.spacing(0), theme.spacing(0), inputRootClassName, theme.spacing(5), theme.palette.warning.main, theme.palette.error.main);
+      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);
     });
     var templateObject_1$L, templateObject_2$I;
 
@@ -4895,6 +4902,7 @@
         inputId = _a.inputId,
         inputRef = _a.inputRef,
         inputValue = _a.inputValue,
+        isOptionEqualToValue = _a.isOptionEqualToValue,
         label = _a.label,
         loading = _a.loading,
         maxHeight = _a.maxHeight,
@@ -4939,7 +4947,7 @@
       var preventDuplicateInsertion = actionItem === null || actionItem === void 0 ? void 0 : actionItem.preventDuplicateInsertion;
       var textFieldWarningClassName = !error && warning && warningClassName;
       var rootClasses = useStylesWithRootClass(rootClassName$I, size === 'medium' && inputMediumClassName, className);
-      var textFieldRootClasses = useStylesWithRootClass(rootClassName$13, readOnly && 'read-only', textFieldWarningClassName);
+      var textFieldRootClasses = useStylesWithRootClass(rootClassName$13, readOnly && readOnlyClassName$1, textFieldWarningClassName);
       var inputRootClasses = useStylesWithRootClass(inputRootClassName, !dense && inputMediumClassName);
       var highlightedOption = null;
       var textFieldInput;
@@ -5132,6 +5140,7 @@
           return option.group;
         } : undefined,
         inputValue: inputValue,
+        isOptionEqualToValue: isOptionEqualToValue,
         ListboxComponent: ListboxComponent,
         loading: loading,
         multiple: multiple,
@@ -5186,7 +5195,6 @@
                   root: textFieldRootClasses
                 },
                 error: error,
-                focused: readOnly ? false : undefined,
                 helperText: helperText,
                 id: inputId,
                 inputProps: __assign(__assign({}, inputProps), {
@@ -6763,7 +6771,8 @@
       var hasWarning = !error && warning && warningClassName;
       var hasSuccess = !error && !warning && success && successClassName;
       var endAdornment = endIcon || endText;
-      var rootStyles = useStylesWithRootClass(rootSelectClassName, hasSuccess, hasWarning, readOnly ? 'read-only' : '');
+      var inputStyles = useStylesWithRootClass('dot-select', readOnly && readOnlyClassName$1);
+      var rootStyles = useStylesWithRootClass(rootSelectClassName, hasSuccess, hasWarning);
       var getOption = function getOption(option) {
         return typeof option === 'string' ? option : option.option;
       };
@@ -6799,12 +6808,12 @@
             readOnly: readOnly,
             open: readOnly ? false : undefined
           },
+          "aria-label": ariaLabel || label,
           autoFocus: autoFocus,
           className: rootStyles,
           defaultValue: defaultValue,
           disabled: disabled,
           error: error,
-          focused: readOnly ? false : undefined,
           fullWidth: fullWidth,
           helperText: helperText,
           id: id,
@@ -6814,7 +6823,7 @@
           inputProps: {
             'aria-label': ariaLabel,
             'data-testid': dataTestId,
-            className: 'dot-select',
+            className: inputStyles,
             readOnly: readOnly
           },
           inputRef: inputRef,
@@ -6826,6 +6835,7 @@
           onFocus: onFocus,
           onKeyDown: onKeyDown,
           required: required,
+          role: "textbox",
           select: true,
           size: size,
           value: value,
@@ -8059,7 +8069,7 @@
         } : undefined,
         ref: inlineEditRef,
         role: ariaRole,
-        tabIndex: !readOnly ? tabIndex : undefined,
+        tabIndex: tabIndex,
         typography: typography
       }, {
         children: editing ? renderEditMode() : renderViewMode()
@@ -9600,6 +9610,7 @@
         footerTypography = _c === void 0 ? TABLE_TYPOGRAPHY_VARIANT : _c,
         _d = _a.headerTypography,
         headerTypography = _d === void 0 ? TABLE_TYPOGRAPHY_VARIANT : _d,
+        labelRowsPerPage = _a.labelRowsPerPage,
         _e = _a.loading,
         loading = _e === void 0 ? false : _e,
         maxHeight = _a.maxHeight,
@@ -9612,6 +9623,7 @@
         _g = _a.page,
         page = _g === void 0 ? 0 : _g,
         rowsPerPage = _a.rowsPerPage,
+        rowsPerPageOptions = _a.rowsPerPageOptions,
         _h = _a.stickyHeader,
         stickyHeader = _h === void 0 ? true : _h,
         _j = _a.sortable,
@@ -9777,10 +9789,12 @@
           }), void 0)
         }), void 0), rowsPerPage && jsxRuntime.jsx(DotTablePagination, {
           count: getTotalCount(),
+          labelRowsPerPage: labelRowsPerPage,
           onPageChange: onPageChange,
           onRowsPerPageChange: onRowsPerPageChange,
           page: tablePage,
           rowsPerPage: tableRowsPerPage,
+          rowsPerPageOptions: rowsPerPageOptions,
           typography: footerTypography
         }, void 0)]
       }), void 0);
@@ -9795,7 +9809,6 @@
         "data-testid": action['data-testid'],
         disabled: action.disabled,
         startIcon: startIcon,
-        onClick: action.onClick,
         type: "text"
       }, {
         children: action.label
@@ -9828,9 +9841,8 @@
     var StyledMenu = styled__default["default"](DotMenu).withConfig({
       displayName: "TableActionsstyles__StyledMenu",
       componentId: "sc-8lo813-1"
-    })(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
-      var theme = _a.theme;
-      return styled.css(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n    &.dot-menu .table-menu-button {\n      margin-left: 0;\n      padding-left: 0;\n      &:hover {\n        background-color: ", ";\n      }\n    }\n  "], ["\n    &.dot-menu .table-menu-button {\n      margin-left: 0;\n      padding-left: 0;\n      &:hover {\n        background-color: ", ";\n      }\n    }\n  "])), theme.palette.grey[50]);
+    })(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function () {
+      return styled.css(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n    &.dot-menu .table-menu-button {\n      margin-left: 0;\n      padding-left: 0;\n      &:hover {\n        background-color: transparent;\n      }\n    }\n  "], ["\n    &.dot-menu .table-menu-button {\n      margin-left: 0;\n      padding-left: 0;\n      &:hover {\n        background-color: transparent;\n      }\n    }\n  "])));
     });
     var templateObject_1$8, templateObject_2$7, templateObject_3$3;
 
@@ -9883,22 +9895,30 @@
         }
       };
       var toggleMenu = function toggleMenu(event) {
+        event.stopPropagation();
         setAnchorEl(event.currentTarget);
         setMenuOpen(!menuOpen);
       };
-      var onSelect = function onSelect(_event, _menuId, itemKey) {
+      var onSelect = function onSelect(event, _menuId, itemKey) {
+        event.stopPropagation();
         selectionMap[itemKey].onClick(null);
       };
       var onLeave = function onLeave() {
         setMenuOpen(false);
       };
+      var handleTableActionClick = function handleTableActionClick(event, action) {
+        event.stopPropagation();
+        action.onClick(event);
+      };
       var renderTableActions = function renderTableActions() {
         return actions && actions.map(function (action, index) {
           return index < 2 && jsxRuntime.jsx(DotTableAction, {
             iconId: action.iconId,
             label: action.label,
             tooltip: action.tooltip || action.label,
-            onClick: action.onClick
+            onClick: function (e) {
+              return handleTableActionClick(e, action);
+            }
           }, "action-" + index);
         });
       };
@@ -9910,6 +9930,7 @@
           children: [!showMenu && renderTableActions(), (showMenu || actions.length > 2) && jsxRuntime.jsx(DotIconButton, {
             ariaLabel: "more options",
             className: "dot-table-action-icon",
+            "data-testid": "dot-table-action-icon",
             iconId: "options",
             iconSize: "small",
             onClick: toggleMenu,
@@ -10416,7 +10437,7 @@
     })(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
       var theme = _a.theme,
         draggableHandle = _a.draggableHandle;
-      return styled.css(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n    &.", " {\n      padding: ", ";\n\n      .", " {\n        .dot-icon {\n          color: ", ";\n        }\n\n        &.react-draggable-dragging {\n          background-color: ", ";\n        }\n\n        &.with-default-cursor {\n          cursor: default;\n        }\n\n        &.with-handle-grab-cursor ", " {\n          cursor: grab;\n        }\n      }\n    }\n  "], ["\n    &.", " {\n      padding: ", ";\n\n      .", " {\n        .dot-icon {\n          color: ", ";\n        }\n\n        &.react-draggable-dragging {\n          background-color: ", ";\n        }\n\n        &.with-default-cursor {\n          cursor: default;\n        }\n\n        &.with-handle-grab-cursor ", " {\n          cursor: grab;\n        }\n      }\n    }\n  "])), rootClassName$3, theme.spacing(1, 0), listItemClassName, theme.palette.layer.n700, theme.palette.grey[50], draggableHandle);
+      return styled.css(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n    &.", " {\n      padding: ", ";\n      position: relative;\n\n      .", " {\n        .dot-icon {\n          color: ", ";\n        }\n\n        &.react-draggable-dragging {\n          background-color: ", ";\n        }\n\n        &.with-default-cursor {\n          cursor: default;\n        }\n\n        &.with-handle-grab-cursor ", " {\n          cursor: grab;\n        }\n      }\n    }\n  "], ["\n    &.", " {\n      padding: ", ";\n      position: relative;\n\n      .", " {\n        .dot-icon {\n          color: ", ";\n        }\n\n        &.react-draggable-dragging {\n          background-color: ", ";\n        }\n\n        &.with-default-cursor {\n          cursor: default;\n        }\n\n        &.with-handle-grab-cursor ", " {\n          cursor: grab;\n        }\n      }\n    }\n  "])), rootClassName$3, theme.spacing(1, 0), listItemClassName, theme.palette.layer.n700, theme.palette.grey[50], draggableHandle);
     });
     var templateObject_1$3, templateObject_2$2;
 
@@ -10588,7 +10609,7 @@
       componentId: "sc-1to4suu-1"
     })(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
       var theme = _a.theme;
-      return styled.css(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n    &.", " {\n      ", ";\n    }\n  "], ["\n    &.", " {\n      ", ";\n    }\n  "])), rootClassName$1, pickerInputStyles(theme));
+      return styled.css(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n    &.", " {\n      ", ";\n\n      .Mui-disabled.MuiInputBase-root,\n      &.read-only .MuiInputBase-root {\n        ", ";\n      }\n\n      .MuiFormLabel-root {\n        color: ", ";\n      }\n    }\n  "], ["\n    &.", " {\n      ", ";\n\n      .Mui-disabled.MuiInputBase-root,\n      &.read-only .MuiInputBase-root {\n        ", ";\n      }\n\n      .MuiFormLabel-root {\n        color: ", ";\n      }\n    }\n  "])), rootClassName$1, pickerInputStyles(theme), readOnlyStyles(theme), theme.palette.layer.n500);
     });
     var StyledPickersDay = styled__default["default"](xDatePickers.PickersDay).withConfig({
       displayName: "DatePickerstyles__StyledPickersDay",
@@ -10911,7 +10932,7 @@
       componentId: "sc-17aptuh-1"
     })(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
       var theme = _a.theme;
-      return styled.css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    &.", " {\n      ", ";\n    }\n  "], ["\n    &.", " {\n      ", ";\n    }\n  "])), rootClassName, pickerInputStyles(theme));
+      return styled.css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    &.", " {\n      ", ";\n\n      .Mui-disabled.MuiInputBase-root,\n      &.read-only .MuiInputBase-root {\n        ", ";\n      }\n\n      .MuiFormLabel-root {\n        color: ", ";\n      }\n    }\n  "], ["\n    &.", " {\n      ", ";\n\n      .Mui-disabled.MuiInputBase-root,\n      &.read-only .MuiInputBase-root {\n        ", ";\n      }\n\n      .MuiFormLabel-root {\n        color: ", ";\n      }\n    }\n  "])), rootClassName, pickerInputStyles(theme), readOnlyStyles(theme), theme.palette.layer.n500);
     });
     var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
 
@@ -11244,7 +11265,6 @@
                 required: required,
                 helperText: helperText,
                 error: error,
-                focused: isComponentReadOnly ? false : undefined,
                 InputProps: {
                   endAdornment: jsxRuntime.jsxs(jsxRuntime.Fragment, {
                     children: [error && jsxRuntime.jsx(DotIcon, {

package/lib/components/auto-complete/AutoComplete.d.ts

@@ -44,6 +44,7 @@ export interface AutoCompleteProps<T extends AutoCompleteOption = AutoCompleteOp
     inputRef?: Ref<HTMLInputElement>;
     /** The value of the input field. */
     inputValue?: string;
+    isOptionEqualToValue?: (option: T, value: T) => boolean;
     /** Label displayed above the input field */
     label?: string;
     /** If true, the component will be in a loading state. */
@@ -85,4 +86,4 @@ export interface AutoCompleteProps<T extends AutoCompleteOption = AutoCompleteOp
     /** If true, the label will be displayed in a warning state. */
     warning?: boolean;
 }
-export declare const DotAutoComplete: <T extends AutoCompleteOption>({ ListboxComponent, actionItem, ariaLabel, autoFocus, className, "data-testid": dataTestId, defaultValue, dense, disabled, disablePortal, endAdornmentTooltip, error, filterOptions, filterSelectedOptions, freesolo, checkIfOptionDisabled, group, helperText, inputId, inputRef, inputValue, label, loading, maxHeight, multiple, onBlur, onChange, onClose, onInputChange, onOpen, open, options, persistentLabel, placeholder, readOnly, renderOption, renderTags, required, size, value, warning, }: AutoCompleteProps<T>) => JSX.Element;
+export declare const DotAutoComplete: <T extends AutoCompleteOption>({ ListboxComponent, actionItem, ariaLabel, autoFocus, className, "data-testid": dataTestId, defaultValue, dense, disabled, disablePortal, endAdornmentTooltip, error, filterOptions, filterSelectedOptions, freesolo, checkIfOptionDisabled, group, helperText, inputId, inputRef, inputValue, isOptionEqualToValue, label, loading, maxHeight, multiple, onBlur, onChange, onClose, onInputChange, onOpen, open, options, persistentLabel, placeholder, readOnly, renderOption, renderTags, required, size, value, warning, }: AutoCompleteProps<T>) => JSX.Element;

package/lib/components/auto-complete/AutoComplete.stories.d.ts

@@ -2,7 +2,7 @@ import { ComponentMeta, Story } from '@storybook/react';
 import { AutoCompleteProps } from './AutoComplete';
 import { AutoCompleteOption } from './utils/interface';
 import { AutoCompleteWithRenderOption } from './Autocomplete.stories.data';
-declare const _default: ComponentMeta<(<T extends AutoCompleteOption>({ ListboxComponent, actionItem, ariaLabel, autoFocus, className, "data-testid": dataTestId, defaultValue, dense, disabled, disablePortal, endAdornmentTooltip, error, filterOptions, filterSelectedOptions, freesolo, checkIfOptionDisabled, group, helperText, inputId, inputRef, inputValue, label, loading, maxHeight, multiple, onBlur, onChange, onClose, onInputChange, onOpen, open, options, persistentLabel, placeholder, readOnly, renderOption, renderTags, required, size, value, warning, }: AutoCompleteProps<T>) => JSX.Element)>;
+declare const _default: ComponentMeta<(<T extends AutoCompleteOption>({ ListboxComponent, actionItem, ariaLabel, autoFocus, className, "data-testid": dataTestId, defaultValue, dense, disabled, disablePortal, endAdornmentTooltip, error, filterOptions, filterSelectedOptions, freesolo, checkIfOptionDisabled, group, helperText, inputId, inputRef, inputValue, isOptionEqualToValue, label, loading, maxHeight, multiple, onBlur, onChange, onClose, onInputChange, onOpen, open, options, persistentLabel, placeholder, readOnly, renderOption, renderTags, required, size, value, warning, }: AutoCompleteProps<T>) => JSX.Element)>;
 export default _default;
 export declare const Default: any;
 export declare const WithActionItem: any;

package/lib/components/date-picker/DatePicker.d.ts

@@ -18,7 +18,7 @@ export interface DatePickerProps extends CommonProps {
     disablePast?: boolean;
     /** Disable the portal behavior. If true, children stay within parent DOM hierarchy. */
     disablePortal?: boolean;
-    /** If `true`, the picker and text field are disabled. */
+    /** If `true`, the picker and text field are disabled. DOES NOT WORK WITH SCREEN READERS, we recommend using `readOnly` instead. */
     disabled?: boolean;
     /** If `true`, 'Clear' button will be displayed in the calendar popper. `True` by default. */
     displayClearButton?: boolean;

package/lib/components/input-form-fields/InputFormFields.propTypes.d.ts

@@ -6,7 +6,7 @@ export interface InputProps extends CommonProps {
     autoFocus?: boolean;
     /** default value of the input element */
     defaultValue?: string;
-    /** If true, the input will be disabled. */
+    /** If true, the input will be disabled. DOES NOT WORK WITH SCREEN READERS, we recommend using `readOnly` instead. */
     disabled?: boolean;
     /** Icon placed after the children. */
     endIcon?: ReactNode;
@@ -27,6 +27,8 @@ export interface InputProps extends CommonProps {
     inputRef?: Ref<HTMLInputElement>;
     /** The label content. */
     label?: string;
+    max?: number | string;
+    min?: number | string;
     /** The name of input element */
     name: string;
     /** A function that should be executed when the input loses focus */

package/lib/components/input-form-fields/InputFormFields.styles.d.ts

@@ -7,6 +7,7 @@ export declare const warningClassName = "dot-warning";
 export declare const successClassName = "dot-success";
 export declare const adornmentIconClassName = "dot-adornment-icon";
 export declare const fieldsetClassName = "MuiOutlinedInput-notchedOutline";
+export declare const readOnlyClassName = "read-only";
 export declare const StyledAdornment: import("styled-components").StyledComponent<import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").InputAdornmentTypeMap<{}, "div">>, any, {}, never>;
 export declare const StyledInputLabel: import("styled-components").StyledComponent<import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").InputLabelTypeMap<{}, "label">>, any, {}, never>;
 export declare const StyledTextFieldContainer: import("styled-components").StyledComponent<"div", any, {}, never>;

package/lib/components/input-form-fields/InputText.d.ts

@@ -9,7 +9,7 @@ export interface InputTextProps extends InputProps {
      **/
     autoComplete?: string;
     endAdornmentTooltip?: string;
-    /** If true, the input will use debounce functionality. **/
+    /** If true, the input will use debounce functionality. */
     hasDebounce?: boolean;
     /** max of rows for multiline line */
     maxRows?: number;
@@ -31,4 +31,4 @@ export interface EndIconProps {
     success?: boolean;
     warning?: boolean;
 }
-export declare const DotInputText: ({ autoComplete, autoFocus, className, defaultValue, "data-testid": dataTestId, disabled, error, endAdornmentTooltip, fullWidth, hasDebounce, helperText, endIcon, endText, id, inputRef, label, maxRows, minRows, multiline, name, onBlur, onChange, onFocus, onKeyDown, onMouseUp, persistentLabel, placeholder, readOnly, required, shrink, startIcon, size, success, type, value, warning, }: InputTextProps) => JSX.Element;
+export declare const DotInputText: ({ autoComplete, autoFocus, className, defaultValue, "data-testid": dataTestId, disabled, error, endAdornmentTooltip, fullWidth, hasDebounce, helperText, endIcon, endText, id, inputRef, label, max, maxRows, min, minRows, multiline, name, onBlur, onChange, onFocus, onKeyDown, onMouseUp, persistentLabel, placeholder, readOnly, required, shrink, startIcon, size, success, type, value, warning, }: InputTextProps) => JSX.Element;

package/lib/components/input-form-fields/InputText.stories.d.ts

@@ -1,6 +1,6 @@
 import { ComponentMeta, Story } from '@storybook/react';
 import { InputTextProps } from './InputText';
-declare const _default: ComponentMeta<({ autoComplete, autoFocus, className, defaultValue, "data-testid": dataTestId, disabled, error, endAdornmentTooltip, fullWidth, hasDebounce, helperText, endIcon, endText, id, inputRef, label, maxRows, minRows, multiline, name, onBlur, onChange, onFocus, onKeyDown, onMouseUp, persistentLabel, placeholder, readOnly, required, shrink, startIcon, size, success, type, value, warning, }: InputTextProps) => JSX.Element>;
+declare const _default: ComponentMeta<({ autoComplete, autoFocus, className, defaultValue, "data-testid": dataTestId, disabled, error, endAdornmentTooltip, fullWidth, hasDebounce, helperText, endIcon, endText, id, inputRef, label, max, maxRows, min, minRows, multiline, name, onBlur, onChange, onFocus, onKeyDown, onMouseUp, persistentLabel, placeholder, readOnly, required, shrink, startIcon, size, success, type, value, warning, }: InputTextProps) => JSX.Element>;
 export default _default;
 export declare const Default: Story<InputTextProps>;
 export declare const WithPersistentLabel: Story<InputTextProps>;
@@ -13,3 +13,5 @@ export declare const WithWarningTooltip: Story<InputTextProps>;
 export declare const WithReadOnly: Story<InputTextProps>;
 export declare const WithMultiline: Story<InputTextProps>;
 export declare const WithEndText: Story<InputTextProps>;
+export declare const WithMinMaxNumber: Story<InputTextProps>;
+export declare const WithMinMaxDate: Story<InputTextProps>;

package/lib/components/input-form-fields/common.styles.d.ts

@@ -1,4 +1,5 @@
-import { Theme } from '@mui/material';
-export declare const formHelperTextRootStyles: (theme: Theme) => import("styled-components").FlattenSimpleInterpolation;
+import { lightTheme as Theme } from '../../../lib/theme-provider/ThemeProvider';
+export declare const formHelperTextRootStyles: (theme: typeof Theme) => import("styled-components").FlattenSimpleInterpolation;
 export declare const adornmentIconStyles: () => import("styled-components").FlattenSimpleInterpolation;
-export declare const pickerInputStyles: (theme: Theme) => import("styled-components").FlattenSimpleInterpolation;
+export declare const pickerInputStyles: (theme: typeof Theme) => import("styled-components").FlattenSimpleInterpolation;
+export declare const readOnlyStyles: (theme: typeof Theme) => import("styled-components").FlattenSimpleInterpolation;

package/lib/components/table/Table.d.ts

@@ -32,6 +32,8 @@ export interface TableProps extends CommonProps {
     footerTypography?: TypographyVariant;
     /** Typography variant which will be used for table header cell values **/
     headerTypography?: TypographyVariant;
+    /** Customize the rows per page label. Default is 'Rows per page:' */
+    labelRowsPerPage?: ReactNode;
     /** Table is loading */
     loading?: boolean;
     /** Maximum height of table container */
@@ -50,6 +52,8 @@ export interface TableProps extends CommonProps {
     page?: number;
     /** Rows per page for paginated table */
     rowsPerPage?: RowsPerPageOption;
+    /** Customizes the options of the rows per page select field. Default: [10, 25, 50, 100, 150, 200] */
+    rowsPerPageOptions?: number[];
     /** Table is sortable */
     sortable?: boolean;
     /** Table header is sticky */
@@ -64,4 +68,4 @@ export declare function stableSort<T>(array: T[], comparator: (order: T, orderBy
  * A wrapper component around the Table component from @material-ui. This component can be used for
  *  creating a common structure for tables in the system.
  */
-export declare const DotTable: ({ ariaLabel, bodyTypography, className, columns, count, data, "data-testid": dataTestId, emptyMessage, footerTypography, headerTypography, loading, maxHeight, multiSelect, order, orderBy, onRowClick, onUpdateData, page, rowsPerPage, stickyHeader, sortable, toolbar, }: TableProps) => JSX.Element;
+export declare const DotTable: ({ ariaLabel, bodyTypography, className, columns, count, data, "data-testid": dataTestId, emptyMessage, footerTypography, headerTypography, labelRowsPerPage, loading, maxHeight, multiSelect, order, orderBy, onRowClick, onUpdateData, page, rowsPerPage, rowsPerPageOptions, stickyHeader, sortable, toolbar, }: TableProps) => JSX.Element;

package/lib/components/table/Table.stories.d.ts

@@ -1,6 +1,6 @@
 import { Story, ComponentMeta } from '@storybook/react';
 import { TableProps } from './Table';
-declare const _default: ComponentMeta<({ ariaLabel, bodyTypography, className, columns, count, data, "data-testid": dataTestId, emptyMessage, footerTypography, headerTypography, loading, maxHeight, multiSelect, order, orderBy, onRowClick, onUpdateData, page, rowsPerPage, stickyHeader, sortable, toolbar, }: TableProps) => JSX.Element>;
+declare const _default: ComponentMeta<({ ariaLabel, bodyTypography, className, columns, count, data, "data-testid": dataTestId, emptyMessage, footerTypography, headerTypography, labelRowsPerPage, loading, maxHeight, multiSelect, order, orderBy, onRowClick, onUpdateData, page, rowsPerPage, rowsPerPageOptions, stickyHeader, sortable, toolbar, }: TableProps) => JSX.Element>;
 export default _default;
 export declare const Default: Story;
 export declare const LocallyPaginatedTable: Story;
@@ -8,3 +8,4 @@ export declare const RemotelyPaginatedTable: Story;
 export declare const WithActionMenu: Story;
 export declare const WithCheckboxSelection: Story;
 export declare const EmptyTable: Story;
+export declare const WithCustomPaginationOptions: Story;

package/lib/components/time-picker/TimePicker.d.ts

@@ -13,7 +13,7 @@ export interface TimePickerProps extends CommonProps {
     disableClickAwayListener?: boolean;
     /** If `true`, the open picker button will not be rendered (renders only the field). */
     disableOpenPicker?: boolean;
-    /** If `true`, the picker and text field are disabled. */
+    /** If `true`, the picker and text field are disabled. DOES NOT WORK WITH SCREEN READERS, we recommend using `readOnly` instead. */
     disabled?: boolean;
     /** If true, the label will be displayed in an error state. */
     error?: boolean;

package/lib/theme-provider/ThemeProvider.d.ts

@@ -1,7 +1,19 @@
 import { ReactNode } from 'react';
 import { Theme } from '@mui/material';
 import { TypographyOptions } from '@mui/material/styles/createTypography';
-import { AvatarPaletteColorOptions } from '../../../../../typings/material';
+import { AvatarPaletteColorOptions, IconPaletteColorOptions, LayerPaletteColorOptions } from './interfaces';
+declare module '@mui/material/styles/createPalette' {
+    interface Palette {
+        layer: LayerPaletteColorOptions;
+        purple?: PaletteColorOptions;
+    }
+    interface PaletteOptions {
+        avatarColors: AvatarPaletteColorOptions;
+        icon: IconPaletteColorOptions;
+        layer: LayerPaletteColorOptions;
+        purple?: PaletteColorOptions;
+    }
+}
 export declare type ThemeOptions = 'light' | 'dark';
 export declare const typographyOptions: TypographyOptions;
 export declare const avatarColors: AvatarPaletteColorOptions;
@@ -17,12 +29,3 @@ declare module '@mui/material/LinearProgress' {
         purple: true;
     }
 }
-declare module '@mui/material/styles/createPalette' {
-    interface Palette {
-        layer: LayerPaletteColorOptions;
-        purple?: PaletteColorOptions;
-    }
-    interface PaletteOptions {
-        purple?: PaletteColorOptions;
-    }
-}

package/lib/theme-provider/interfaces.d.ts

@@ -0,0 +1,56 @@
+export interface AvatarPaletteColorOption {
+    backgroundColor: string;
+    color: string;
+}
+export interface AvatarPaletteColorOptions {
+    blue: AvatarPaletteColorOption;
+    darkGrey: AvatarPaletteColorOption;
+    default: AvatarPaletteColorOption;
+    green: AvatarPaletteColorOption;
+    inherit: AvatarPaletteColorOption;
+    lightGrey: AvatarPaletteColorOption;
+    orange: AvatarPaletteColorOption;
+    purple: AvatarPaletteColorOption;
+    red: AvatarPaletteColorOption;
+    transparent: AvatarPaletteColorOption;
+    white: AvatarPaletteColorOption;
+    yellow: AvatarPaletteColorOption;
+}
+export interface BreakpointOptions {
+    values: {
+        lg: number;
+        md: number;
+        sm: number;
+        xl: number;
+        xs: number;
+    };
+}
+export interface AvatarPaletteColorOption {
+    backgroundColor: string;
+    color: string;
+}
+export interface LayerPaletteColorOptions {
+    n0: string;
+    n100: string;
+    n200: string;
+    n300: string;
+    n400: string;
+    n50: string;
+    n500: string;
+    n600: string;
+    n700: string;
+    n800: string;
+    n900: string;
+}
+export interface IconPaletteColorOptions {
+    checkOutline: string;
+    emphasized: string;
+    fileDotted: string;
+    improve: string;
+    improveHover: string;
+    maintain: string;
+    maintainHover: string;
+    rogueCommits: string;
+    unknown: string;
+    unknownHover: string;
+}

package/package.json

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