@digital-ai/dot-components 4.8.0 → 4.9.1

package/index.esm.js

@@ -175,7 +175,7 @@ const readOnlyStyles = theme => css`
   }
 `;
 
-const rootClassName$1l = 'dot-text-field';
+const rootClassName$1m = 'dot-text-field';
 const rootSelectClassName = 'dot-select-field';
 const wrapperClassName$2 = 'dot-label-wrapper';
 const labelClassName = 'dot-input-label';
@@ -228,7 +228,7 @@ const StyledTextField = styled(TextField)`
   $maxRows,
   $minRows
 }) => css`
-    &.${rootClassName$1l} {
+    &.${rootClassName$1m} {
       .MuiInputBase-root {
         margin-bottom: 0;
 
@@ -312,7 +312,7 @@ const StyledTextField = styled(TextField)`
       margin-right: ${theme.spacing(2)};
     }
 
-    &.${rootSelectClassName}, &.${rootClassName$1l} {
+    &.${rootSelectClassName}, &.${rootClassName$1m} {
       .${adornmentIconClassName} {
         color: ${theme.palette.figma.icon.black};
         p {
@@ -402,12 +402,12 @@ const StyledTextField = styled(TextField)`
   `}
 `;
 
-const rootClassName$1k = 'dot-icon';
+const rootClassName$1l = 'dot-icon';
 const StyledIcon = styled(Icon)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$1k} {
+    &.${rootClassName$1l} {
       color: ${theme.palette.figma.icon.black};
       font-size: 20px;
 
@@ -448,7 +448,7 @@ const DotIcon = ({
   iconId,
   tooltip
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$1k, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1l, className);
   return jsx(DotTooltip, {
     title: tooltip,
     children: jsx(StyledIcon, {
@@ -509,7 +509,7 @@ const DotTypography = ({
   });
 };
 
-const rootClassName$1j = 'dot-accordion';
+const rootClassName$1k = 'dot-accordion';
 const summaryClassName = 'dot-accordion-summary';
 const detailClassName = 'dot-accordion-details';
 const StyledAccordion = styled(Accordion)`
@@ -520,7 +520,7 @@ const StyledAccordion = styled(Accordion)`
       background: ${theme.palette.figma.background.level1.white};
     }
 
-    &.${rootClassName$1j} .${summaryClassName} {
+    &.${rootClassName$1k} .${summaryClassName} {
       align-items: center;
       background: ${theme.palette.figma.background.level1.white};
       color: ${theme.palette.figma.typography.black};
@@ -565,7 +565,7 @@ const DotAccordion = ({
   ariaLabel,
   children,
   className,
-  'data-pendoid': dataPendoId = rootClassName$1j,
+  'data-pendoid': dataPendoId = rootClassName$1k,
   'data-testid': dataTestId = 'dot-accordion',
   disabled = false,
   expanded,
@@ -576,7 +576,7 @@ const DotAccordion = ({
   summary,
   noWrap = true
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$1j, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1k, className);
   const [elevation, setElevation] = useState();
   useEffect(() => {
     if (onChange && expanded === undefined) {
@@ -627,15 +627,15 @@ const DotAccordion = ({
   });
 };
 
-const rootClassName$1i = 'dot-action-toolbar';
+const rootClassName$1j = 'dot-action-toolbar';
 const StyledToolbar = styled(Toolbar)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$1i} {
+    &.${rootClassName$1j} {
       border-bottom: 1px solid ${theme.palette.figma.border.default};
 
-      .${rootClassName$1l} .MuiInputBase-root {
+      .${rootClassName$1m} .MuiInputBase-root {
         margin-bottom: 0;
       }
     }
@@ -649,7 +649,7 @@ const DotActionToolbar = ({
   'data-testid': dataTestId,
   variant = 'dense'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$1i, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1j, className);
   return jsx(StyledToolbar, {
     "aria-label": ariaLabel,
     className: rootClasses,
@@ -1719,12 +1719,12 @@ const renderNodeOrTypography = (content, typographyVariant = 'body1') => {
 const checkIfArrowUpPressed = event => event.key === 'ArrowUp';
 const checkIfArrowDownPressed = event => event.key === 'ArrowDown';
 
-const rootClassName$1h = 'dot-alert-banner';
+const rootClassName$1i = 'dot-alert-banner';
 const StyledAlertBanner = styled(Alert)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$1h} {
+    &.${rootClassName$1i} {
       align-items: center;
       box-sizing: border-box;
       min-height: 48px;
@@ -1759,7 +1759,7 @@ const DotAlertBanner = ({
   ariaLabel,
   children,
   className,
-  'data-pendoid': dataPendoId = rootClassName$1h,
+  'data-pendoid': dataPendoId = rootClassName$1i,
   'data-testid': dataTestId,
   onClose,
   roundedCorners = true,
@@ -1767,7 +1767,7 @@ const DotAlertBanner = ({
   textVariant = 'body1',
   width
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$1h, severity, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1i, severity, className);
   /* For simple string use default component, for everything else use 'div' */
   const typographyComponent = isString$2(children) ? undefined : 'div';
   return jsx(StyledAlertBanner, {
@@ -1810,6 +1810,53 @@ const DotAppLogo = ({
   });
 };
 
+const rootClassName$1h = 'dot-annotation';
+const StyledAnnotation = styled.kbd`
+  ${({
+  theme
+}) => css`
+    &.${rootClassName$1h} {
+      font-family: inherit;
+      background-color: ${theme.palette.figma.background.level0.bckgGray};
+      color: ${theme.palette.figma.typography.disabled};
+      padding: ${theme.spacing(0.5)};
+      margin: ${theme.spacing(0, 0.5)};
+      display: inline-flex;
+      justify-content: center;
+      font-weight: bold;
+      border-radius: ${theme.spacing(0.5)};
+      min-width: 18px;
+
+      .dot-icon {
+        color: inherit;
+      }
+
+      &.secondary {
+        background-color: ${theme.palette.figma.typography.disabled};
+        color: ${theme.palette.figma.typography.white};
+      }
+    }
+  `}
+`;
+
+const DotAnnotation = ({
+  ariaLabel,
+  'data-pendoid': dataPendoId = rootClassName$1h,
+  'data-testid': dataTestId,
+  className,
+  content,
+  type = 'primary'
+}) => {
+  const rootClasses = useStylesWithRootClass(rootClassName$1h, className, type === 'secondary' ? 'secondary' : '');
+  return jsx(StyledAnnotation, {
+    "aria-label": ariaLabel,
+    className: rootClasses,
+    "data-pendoid": dataPendoId,
+    "data-testid": dataTestId,
+    children: content
+  });
+};
+
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
 
@@ -4571,7 +4618,7 @@ const DotInputText = ({
   autoFocus,
   className,
   defaultValue,
-  'data-pendoid': dataPendoId = rootClassName$1l,
+  'data-pendoid': dataPendoId = rootClassName$1m,
   'data-testid': dataTestId,
   disabled = false,
   error = false,
@@ -4619,7 +4666,7 @@ const DotInputText = ({
   const internalInputRef = useRef(null);
   const textFieldInputRef = inputRef || internalInputRef;
   const [inputTextState, setInputTextState] = useState(getInitialState(value));
-  const rootStyles = useStylesWithRootClass(rootClassName$1l, hasError, hasWarning, hasSuccess, readOnly && readOnlyClassName$1);
+  const rootStyles = useStylesWithRootClass(rootClassName$1m, hasError, hasWarning, hasSuccess, readOnly && readOnlyClassName$1);
   useEffect(() => {
     if (value !== inputTextState.inputValue) {
       setInputTextState(getInitialState(value, defaultValue));
@@ -6671,7 +6718,7 @@ const isEmptyValue = value => {
   }
 };
 const getRootClassNames = (className, size) => useStylesWithRootClass(rootClassName$X, size === 'medium' && inputMediumClassName, className);
-const getTextFieldRootClassNames = (textFieldWarningClassName, isReadOnly) => useStylesWithRootClass(rootClassName$1l, isReadOnly && readOnlyClassName$1, textFieldWarningClassName);
+const getTextFieldRootClassNames = (textFieldWarningClassName, isReadOnly) => useStylesWithRootClass(rootClassName$1m, isReadOnly && readOnlyClassName$1, textFieldWarningClassName);
 const getInputRootClassNames = isDense => useStylesWithRootClass(inputRootClassName, !isDense && inputMediumClassName);
 const getDefaultAutoCompleteValue = (hasMultiple, defaultValue) => hasMultiple && isString$2(defaultValue) ? [defaultValue] : defaultValue;
 const getAutoCompleteGroupBy = group => group ? option => option.group : undefined;
@@ -8665,10 +8712,10 @@ const CssGrid = _a => {
     };
   }, [lastElement]);
   // Adds the lastElement ref to the last Element of the grid
-  const gridItemsWithLastElement = useMemo(() => [...gridItems.slice(0, -1), jsx("div", {
+  const gridItemsWithLastElement = useMemo(() => loadMoreData ? [...gridItems.slice(0, -1), jsx("div", {
     ref: setLastElement,
     children: gridItems[gridItems.length - 1]
-  }, "last-grid-item")], [gridItems]);
+  }, "last-grid-item")] : gridItems, [gridItems]);
   return jsx(StyledGrid, Object.assign({}, gridArgs, {
     isLoading: isLoading,
     children: gridItemsWithLastElement
@@ -10391,7 +10438,7 @@ const StyledSnackbar = styled(Snackbar)`
       .MuiAlert-message {
         word-break: break-word;
       }
-      .${rootClassName$1h} {
+      .${rootClassName$1i} {
         align-items: flex-start;
       }
       &.MuiSnackbar-anchorOriginTopLeft,
@@ -13158,7 +13205,7 @@ const StyledFormContainer = styled.div`
 
       .${rootClassName$N},
         .${rootClassName$P},
-        .${rootClassName$1l},
+        .${rootClassName$1m},
         .${rootSelectClassName},
         .${rootClassName$A},
         .${rootClassName$z} {
@@ -13166,7 +13213,7 @@ const StyledFormContainer = styled.div`
       }
 
       .${wrapperClassName$2} {
-        + .${rootClassName$1l},
+        + .${rootClassName$1m},
         .${wrapperClassName$2}
         + .${rootSelectClassName},
         .${wrapperClassName$2}
@@ -14399,6 +14446,17 @@ const StyledInlineEdit = styled.div`
     }
   `}
 `;
+const StyledInlineViewMode = styled.div`
+  ${({
+  theme,
+  maxRows,
+  typography
+}) => css`
+    white-space: pre-wrap;
+    max-height: ${theme.typography[typography].lineHeight.substring(0, theme.typography[typography].lineHeight.length - 2) * (maxRows + 1)}px;
+    overflow: auto;
+  `}
+`;
 
 const getCounterAdornment = (currentLength, maxLength, dataTestId) => {
   if (currentLength === undefined || typeof currentLength !== 'number' || !maxLength || typeof maxLength !== 'number') return;
@@ -14473,6 +14531,9 @@ const DotInlineEdit = ({
   name,
   onChange,
   onEditStateChange,
+  maxRows = 4,
+  minRows = 2,
+  multiline = false,
   placeholder,
   readOnly,
   selectTextOnEdit,
@@ -14547,7 +14608,11 @@ const DotInlineEdit = ({
           handleInlineEditClick();
           return;
         }
-        // Save only when Enter is pressed within input field
+        // Allow new line when Ctrl is pressed in multiline mode
+        if (multiline && event.shiftKey) {
+          return;
+        }
+        // Save only when shift is pressed within input field
         if (inputRef.current !== event.target) return;
         yield handleSave();
         break;
@@ -14577,7 +14642,9 @@ const DotInlineEdit = ({
     const bindingsValue = bindings ? applyBindings(bindings, inputValue) : null;
     const typographyClasses = useStylesWithRootClass('dot-view-mode-typography', !inputValue && placeholderClassName);
     const viewModeClasses = useStylesWithRootClass(viewModeClassName, readOnly && readOnlyClassName);
-    const viewModeChildren = jsxs(Fragment, {
+    const viewModeChildren = jsxs(StyledInlineViewMode, {
+      maxRows: maxRows,
+      typography: typography,
       children: [jsx(DotTypography, {
         className: typographyClasses,
         "data-testid": dataTestId && `${dataTestId}-view-mode-typography`,
@@ -14622,10 +14689,13 @@ const DotInlineEdit = ({
           maxLength: charactersLimit === null || charactersLimit === void 0 ? void 0 : charactersLimit.maxLength
         },
         inputRef: inputRef,
-        multiline: false,
+        multiline: multiline,
+        maxRows: multiline ? maxRows : undefined,
+        minRows: multiline ? minRows : undefined,
         name: name,
         onChange: event => setInputValue(event.target.value),
         onFocus: selectTextOnEdit ? event => event.target.select() : undefined,
+        placeholder: placeholder,
         size: "small",
         type: "text",
         value: inputValue,
@@ -15787,6 +15857,36 @@ const StyledPaper = styled(Paper)`
           display: none;
         }
       }
+
+      &.with-multiselect-over-table-header {
+        position: relative;
+
+        .dot-table-multiselect-header {
+          position: absolute;
+          width: 100%;
+
+          .dot-table-selection-toolbar {
+            padding: ${theme.spacing(0, 1)};
+            min-height: unset;
+            height: 56px;
+          }
+        }
+
+        .dot-thead {
+          // hide table header row when multiselect toolbar is shown over it
+          visibility: hidden;
+        }
+
+        &.hidden-multiselect {
+          .dot-table-multiselect-header {
+            display: none;
+          }
+
+          .dot-thead {
+            visibility: unset;
+          }
+        }
+      }
     }
   `}
 `;
@@ -15992,6 +16092,9 @@ const parseCellMaxWidth = width => {
   // if contains 'px' or 'vw' then pass as is
   return width;
 };
+const checkIsMultiselectOverTableHeaderRow = (multiSelect, hasToolbar) => {
+  return !hasToolbar && !!(multiSelect === null || multiSelect === void 0 ? void 0 : multiSelect.showOverTableHeaderRow);
+};
 
 const rootClassName$k = 'dot-td';
 const StyledTableCell = styled(TableCell)`
@@ -16193,46 +16296,75 @@ const TABLE_TYPOGRAPHY_VARIANT = 'body1';
 const TABLE_DEFAULT_SKELETON_ROWS = 4;
 
 const rootClassName$i = 'dot-th-checkbox';
-const StyledTableHeaderCheckboxCell = styled(TableCell)`
-  ${({
-  theme
-}) => css`
-    &.${rootClassName$i} {
-      background: ${theme.palette.figma.background.level0.componentsBackground};
-      padding: ${theme.spacing(0, 1)};
-      width: ${theme.spacing(5)};
+const styledTableHeaderCheckboxElement = (isCell = true) => {
+  return styled(isCell ? TableCell : 'div')`
+    ${({
+    theme
+  }) => css`
+      &.${rootClassName$i} {
+        background: ${theme.palette.figma.background.level0.componentsBackground};
+        padding: ${theme.spacing(0, 1)};
+        width: ${theme.spacing(5)};
 
-      .dot-form-control-label {
-        margin: 0;
+        &.table-selection-toolbar-checkbox {
+          background: unset;
+          padding: ${theme.spacing(0, 3, 0, 0)};
+          width: ${theme.spacing(4.5)};
+        }
+
+        .dot-form-control-label {
+          margin: 0;
+        }
       }
-    }
-  `}
-`;
+    `}
+  `;
+};
+const StyledTableHeaderCheckboxCell = styledTableHeaderCheckboxElement();
+const StyledTableHeaderCheckbox = styledTableHeaderCheckboxElement(false);
 
 const DotHeaderCheckboxCell = ({
   ariaLabel,
   className,
   'data-testid': dataTestId,
-  multiSelectState,
-  onCheckAllChange
+  isFromTableSelectionToolbar,
+  multiSelectHeader
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$i, className);
-  const [checkboxState, setCheckboxState] = useState('unchecked');
+  const rootClasses = useStylesWithRootClass(rootClassName$i, className, isFromTableSelectionToolbar ? 'table-selection-toolbar-checkbox' : '');
+  const [multiSelectState, setMultiSelectState] = useState('unchecked');
+  const {
+    onCheckAllChange,
+    pageData,
+    selectedTableRowIds
+  } = multiSelectHeader || {};
   useEffect(() => {
-    setCheckboxState(multiSelectState);
-  }, [multiSelectState]);
+    if (!multiSelectHeader) return;
+    if (selectedTableRowIds && selectedTableRowIds.length > 0 && pageData) {
+      const itemsNumber = pageData.length;
+      const checkedItemsNumber = pageData.filter(row => selectedTableRowIds.includes(row.id)).length;
+      if (itemsNumber === checkedItemsNumber) {
+        setMultiSelectState('checked');
+        return;
+      }
+      if (checkedItemsNumber > 0) {
+        setMultiSelectState('indeterminate');
+        return;
+      }
+    }
+    setMultiSelectState('unchecked');
+  }, [multiSelectHeader]);
   const getNextCheckboxState = currentCheckboxState => {
-    if (currentCheckboxState === 'indeterminate' || currentCheckboxState === 'checked') return 'unchecked';
+    if (currentCheckboxState === 'indeterminate' && !isFromTableSelectionToolbar || currentCheckboxState === 'checked') return 'unchecked';
     return 'checked';
   };
-  const isIndeterminate = checkboxState === 'indeterminate';
-  const isCheckboxChecked = checkboxState === 'checked';
+  const isIndeterminate = multiSelectState === 'indeterminate';
+  const isCheckboxChecked = multiSelectState === 'checked';
   const handleChange = () => {
-    const nextState = getNextCheckboxState(checkboxState);
-    setCheckboxState(nextState);
+    const nextState = getNextCheckboxState(multiSelectState);
+    setMultiSelectState(nextState);
     onCheckAllChange(nextState === 'checked', []);
   };
-  return jsx(StyledTableHeaderCheckboxCell, {
+  const StyledTableHeaderCheckboxElement = isFromTableSelectionToolbar ? StyledTableHeaderCheckbox : StyledTableHeaderCheckboxCell;
+  return jsx(StyledTableHeaderCheckboxElement, {
     align: "left",
     className: rootClasses,
     "data-testid": dataTestId,
@@ -16337,33 +16469,10 @@ const DotHeaderRow = ({
   const createSortHandler = property => _event => {
     onRequestSort(property);
   };
-  const [multiSelectState, setMultiSelectState] = useState('unchecked');
-  const {
-    onCheckAllChange,
-    pageData,
-    selectedTableRowIds
-  } = multiSelectHeader || {};
-  useEffect(() => {
-    if (!multiSelectHeader) return;
-    if (selectedTableRowIds && selectedTableRowIds.length > 0 && pageData) {
-      const itemsNumber = pageData.length;
-      const checkedItemsNumber = pageData.filter(row => selectedTableRowIds.includes(row.id)).length;
-      if (itemsNumber === checkedItemsNumber) {
-        setMultiSelectState('checked');
-        return;
-      }
-      if (checkedItemsNumber > 0) {
-        setMultiSelectState('indeterminate');
-        return;
-      }
-    }
-    setMultiSelectState('unchecked');
-  }, [multiSelectHeader]);
   const renderMultiSelectCell = () => {
     return jsx(DotHeaderCheckboxCell, {
       ariaLabel: "Click to select all table page rows",
-      multiSelectState: multiSelectState,
-      onCheckAllChange: onCheckAllChange
+      multiSelectHeader: multiSelectHeader
     });
   };
   return jsx(TableHead, {
@@ -16423,7 +16532,8 @@ const CollapsibleTableBody = ({
             typography: nestedTableBodyTypography,
             noWrap: column.truncate,
             style: {
-              maxWidth: parseCellMaxWidth(column.width)
+              maxWidth: parseCellMaxWidth(column.width),
+              minWidth: parseCellMaxWidth(column.minWidth)
             },
             value: row[colId]
           }, colId);
@@ -16448,7 +16558,7 @@ const StyledCollapsibleTableWrapper = styled.div`
       .dot-table-container {
         th.MuiTableCell-root:first-child,
         td.MuiTableCell-root:first-child {
-          padding-left: ${theme.spacing(9)};
+          max-width: 40px;
         }
       }
 
@@ -16717,7 +16827,8 @@ const DotTableRow = ({
           noWrap: column.truncate,
           onActionMenuTrigger: (menuRef, menuItem) => onActionMenuTrigger(menuRef, menuItem),
           style: {
-            maxWidth: parseCellMaxWidth(column.width)
+            maxWidth: parseCellMaxWidth(column.width),
+            minWidth: parseCellMaxWidth(column.minWidth)
           },
           value: rowData[column.id]
         }, column.id);
@@ -16817,10 +16928,6 @@ const StyledTableSelectionToolbar = styled(DotActionToolbar)`
         .dot-link {
           color: ${theme.palette.figma.overlay.table.text};
           padding: ${theme.spacing(0.25, 0.25, 0, 0.5)};
-
-          &:hover {
-            color: ${theme.palette.figma.typography.white};
-          }
         }
       }
 
@@ -16852,6 +16959,7 @@ const DotTableSelectionToolbar = ({
   className,
   'data-testid': dataTestId,
   onClearAll,
+  multiSelectHeader,
   selectedRowsNumber
 }) => {
   const rootClasses = useStylesWithRootClass(rootClassName$f, className);
@@ -16862,7 +16970,11 @@ const DotTableSelectionToolbar = ({
     variant: "regular",
     children: [jsxs("div", {
       className: "dot-selected-rows-container",
-      children: [jsxs(DotTypography, {
+      children: [multiSelectHeader && jsx(DotHeaderCheckboxCell, {
+        ariaLabel: "Click to select all table page rows",
+        isFromTableSelectionToolbar: true,
+        multiSelectHeader: multiSelectHeader
+      }), jsxs(DotTypography, {
         className: "dot-selected-rows-heading",
         variant: "h3",
         children: [selectedRowsNumber, " selected"]
@@ -16944,11 +17056,13 @@ const DotTable = ({
   const [tableRowsPerPage, setRowsPerPage] = useState(rowsPerPage);
   const [selectedRowIds, setSelectedRowIds] = useState([]);
   const [expandedRowIds, setExpandedRowIds] = useState([]);
+  const selectedRowsNumber = selectedRowIds.length;
+  const showMultiselectOverTableHeaderRow = checkIsMultiselectOverTableHeaderRow(multiSelect, !!toolbar);
   const getSortedData = () => {
     return onUpdateData ? data : stableSort(data, getComparator(order, orderBy));
   };
   const [pageData, setPageData] = useState(getSortedData().slice(0, rowsPerPage ? rowsPerPage : data.length));
-  const rootClasses = useStylesWithRootClass(rootClassName$m, className, loading ? 'loading' : '');
+  const rootClasses = useStylesWithRootClass(rootClassName$m, className, loading ? 'loading' : '', showMultiselectOverTableHeaderRow ? 'with-multiselect-over-table-header' : '', showMultiselectOverTableHeaderRow && !selectedRowsNumber ? 'hidden-multiselect' : '');
   const updateData = (newOrder, newOrderBy, newPage, newRowsPerPage) => {
     const newData = stableSort(data, getComparator(newOrder, newOrderBy));
     setPageData(newRowsPerPage ? newData.slice(newPage * newRowsPerPage, newPage * newRowsPerPage + newRowsPerPage) : newData);
@@ -17042,7 +17156,6 @@ const DotTable = ({
     pageData: onUpdateData ? data : pageData,
     selectedTableRowIds: selectedRowIds
   };
-  const selectedRowsNumber = selectedRowIds.length;
   const handleRowExpandCollapseTable = (isExpanded, rowId, setLoading) => {
     setExpandedRowIds(prevRowIds => {
       const newIds = getExpandedRowIds(prevRowIds, rowId, isExpanded);
@@ -17056,21 +17169,28 @@ const DotTable = ({
     onRowExpandCollapseTable: handleRowExpandCollapseTable,
     expandedTableRowIds: expandedRowIds
   });
-  const renderToolbar = () => {
+  const renderTableSelectionToolbar = () => {
     const {
       bulkActions
     } = multiSelect || {};
-    return multiSelect && selectedRowsNumber ? jsx(DotTableSelectionToolbar, {
+    return jsx(DotTableSelectionToolbar, {
       ariaLabel: "Selected table rows with bulk actions",
       onClearAll: (multiSelect === null || multiSelect === void 0 ? void 0 : multiSelect.onClearAllChange) && handleClearAll,
+      multiSelectHeader: showMultiselectOverTableHeaderRow ? multiSelectHeader : undefined,
       selectedRowsNumber: selectedRowsNumber,
       bulkActions: bulkActions
-    }) : toolbar;
+    });
+  };
+  const renderToolbar = () => {
+    return multiSelect && selectedRowsNumber ? renderTableSelectionToolbar() : toolbar;
   };
   return jsxs(StyledPaper, {
     className: rootClasses,
     elevation: 0,
-    children: [renderToolbar(), jsx(StyledTableContainer, {
+    children: [showMultiselectOverTableHeaderRow ? jsx("div", {
+      className: "dot-table-multiselect-header",
+      children: renderTableSelectionToolbar()
+    }) : renderToolbar(), jsx(StyledTableContainer, {
       className: "dot-table-container",
       "data-testid": dataTestId,
       style: {
@@ -19443,4 +19563,4 @@ const BoardColumnSummary = ({
   });
 };
 
-export { ApiError$1 as ApiError, BoardStatusProvider, Cell, ColumnStatusProvider, CreateUUID, CssCell, CssGrid, CssGridDebug, DashboardAppTypeOptions, DashboardView, DatePickerKeydownContext, Daytime, DotAccordion, DotActionToolbar, DotAlertBanner, DotAppLogo, DotAppSwitcher, DotAppToolbar, DotAutoComplete, DotAvatar, DotAvatarGroup, DotAvatarWithDetails, DotBadge, Board as DotBoard, BoardColumn as DotBoardColumn, BoardColumnActionBar as DotBoardColumnActionBar, BoardColumnCollapse as DotBoardColumnCollapse, BoardColumnExpand as DotBoardColumnExpand, BoardColumnHeader as DotBoardColumnHeader, BoardColumnItems as DotBoardColumnItems, BoardColumnSummary as DotBoardColumnSummary, DotBreadcrumbs, DotButton, DotButtonToggle, DotCard, DotCardContent, DotCardFooter, DotCardHeader, DotCarousel, DotCheckbox, DotCheckboxGroup, DotChip, DotChipList, DotClickAwayListener, DotConfirmationDialog, DotCopyButton, DotCoreApiProvider, DotDashboardActions, DotDashboardDetails, DotDashboardDialog, DotDashboardHeader, DotDashboardOptionsMenu, DotDashboardPublishConfirm, DotDashboardStatusPill, DotDatePicker, DotDialog, DotDivider, DotDraggableList, DotDrawer, DotDynamicForm, DotEmptyFilterState, DotEmptyState, DotFileListItem, DotFileUpload, DotForm, DotFormGroup, DotHeaderRow, DotIcon, DotIconButton, DotIllustration, DotImpactDialog, DotInlineEdit, DotInputLabel, DotInputSelect, DotInputText, DotLinearProgress, DotLink, DotList, DotMenu, DotMetadataApiProvider, DotNavigationRail, DotPill, DotPopper, DotProgress, DotProgressButton, DotRadioButton, DotRadioGroup, DotSidebar, DotSkeleton, DotSnackbar, DotSnackbarContainer, DotSnackbarProvider, DotSplitButton, DotStepper, DotStickyWithBorder, DotSwitch, DotTable, DotTableAction, DotTableActions, DotTablePagination, DotTabs, DotThemeProvider, DotTimePicker, DotTooltip, DotTruncateWithTooltip, DotTypography, avatarColors, breakpointOptions, checkIfValidDate, darkFigmaColors, lightThemeColors as lightColors, lightFigmaColors, mockScrollIntoView, parseAutoCompleteValue, variables as themeVariables, typographyOptions, useBoardStatus, useColumnStatus, useDotCoreApiContext, useDotMetadataApiContext, useDotSnackbarContext, useEnqueueErrorMessage, useKeyPress };
+export { ApiError$1 as ApiError, BoardStatusProvider, Cell, ColumnStatusProvider, CreateUUID, CssCell, CssGrid, CssGridDebug, DashboardAppTypeOptions, DashboardView, DatePickerKeydownContext, Daytime, DotAccordion, DotActionToolbar, DotAlertBanner, DotAnnotation, DotAppLogo, DotAppSwitcher, DotAppToolbar, DotAutoComplete, DotAvatar, DotAvatarGroup, DotAvatarWithDetails, DotBadge, Board as DotBoard, BoardColumn as DotBoardColumn, BoardColumnActionBar as DotBoardColumnActionBar, BoardColumnCollapse as DotBoardColumnCollapse, BoardColumnExpand as DotBoardColumnExpand, BoardColumnHeader as DotBoardColumnHeader, BoardColumnItems as DotBoardColumnItems, BoardColumnSummary as DotBoardColumnSummary, DotBreadcrumbs, DotButton, DotButtonToggle, DotCard, DotCardContent, DotCardFooter, DotCardHeader, DotCarousel, DotCheckbox, DotCheckboxGroup, DotChip, DotChipList, DotClickAwayListener, DotConfirmationDialog, DotCopyButton, DotCoreApiProvider, DotDashboardActions, DotDashboardDetails, DotDashboardDialog, DotDashboardHeader, DotDashboardOptionsMenu, DotDashboardPublishConfirm, DotDashboardStatusPill, DotDatePicker, DotDialog, DotDivider, DotDraggableList, DotDrawer, DotDynamicForm, DotEmptyFilterState, DotEmptyState, DotFileListItem, DotFileUpload, DotForm, DotFormGroup, DotHeaderRow, DotIcon, DotIconButton, DotIllustration, DotImpactDialog, DotInlineEdit, DotInputLabel, DotInputSelect, DotInputText, DotLinearProgress, DotLink, DotList, DotMenu, DotMetadataApiProvider, DotNavigationRail, DotPill, DotPopper, DotProgress, DotProgressButton, DotRadioButton, DotRadioGroup, DotSidebar, DotSkeleton, DotSnackbar, DotSnackbarContainer, DotSnackbarProvider, DotSplitButton, DotStepper, DotStickyWithBorder, DotSwitch, DotTable, DotTableAction, DotTableActions, DotTablePagination, DotTabs, DotThemeProvider, DotTimePicker, DotTooltip, DotTruncateWithTooltip, DotTypography, avatarColors, breakpointOptions, checkIfValidDate, darkFigmaColors, lightThemeColors as lightColors, lightFigmaColors, mockScrollIntoView, parseAutoCompleteValue, variables as themeVariables, typographyOptions, useBoardStatus, useColumnStatus, useDotCoreApiContext, useDotMetadataApiContext, useDotSnackbarContext, useEnqueueErrorMessage, useKeyPress };

package/package.json

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

package/src/lib/components/annotation/Annotation.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+import { CommonProps } from '../CommonProps';
+export type AnnotationType = 'primary' | 'secondary';
+export interface AnnotationProps extends CommonProps {
+    /** The content shown in the annotation (e.g. text, icon). The annotation is meant to be used inside text, mainly to highlight the keyboard shortcuts. */
+    content: ReactNode;
+    /** The type of the annotation. Can be `primary` (default) or `secondary` (styled for using in the tooltip). */
+    type?: AnnotationType;
+}
+export declare const DotAnnotation: ({ ariaLabel, "data-pendoid": dataPendoId, "data-testid": dataTestId, className, content, type, }: AnnotationProps) => import("react/jsx-runtime").JSX.Element;

package/src/lib/components/annotation/Annotation.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const rootClassName = "dot-annotation";
+export declare const StyledAnnotation: import("styled-components").StyledComponent<"kbd", any, {}, never>;

package/src/lib/components/index.d.ts

@@ -1,5 +1,6 @@
 export * from './CommonProps';
 export { ApiError } from './core-api/openapi/core/ApiError';
+export type { AnnotationProps, AnnotationType } from './annotation/Annotation';
 export type { AppToolbarProps } from './app-toolbar/AppToolbar';
 export type { AutoCompleteOption, AutoCompleteProps, AutoCompleteValue, AutocompleteRenderGroupParams, AutocompleteRenderOptionState, FilterOptionsState, } from './auto-complete';
 export type { AvatarProps } from './avatar/Avatar';
@@ -50,6 +51,7 @@ export { DotAccordion } from './accordion/Accordion';
 export { DotActionToolbar } from './action-toolbar/ActionToolbar';
 export { DotAlertBanner } from './alert-banner/AlertBanner';
 export { DotAppLogo } from './app-logo/AppLogo';
+export { DotAnnotation } from './annotation/Annotation';
 export { DotAppSwitcher } from './app-switcher/AppSwitcher';
 export { DotAppToolbar } from './app-toolbar/AppToolbar';
 export { DotAutoComplete, parseAutoCompleteValue } from './auto-complete';

package/src/lib/components/inline-edit/InlineEdit.d.ts

@@ -10,6 +10,12 @@ export interface InlineEditProps extends CommonProps {
     fullWidth?: boolean;
     /** If true, `Cancel` and `Save` buttons will be hidden */
     hideActionButtons?: boolean;
+    /** if multiline is true will default to 4 */
+    maxRows?: number;
+    /** if multiline is true will default to 2 */
+    minRows?: number;
+    /** If true, the input will be multiline */
+    multiline?: boolean;
     /** The name of input element */
     name: string;
     /** An async function which should be executed when the value of the input changes */
@@ -36,4 +42,4 @@ export interface InlineEditProps extends CommonProps {
 /**
  * @experimental This component is still in development
  */
-export declare const DotInlineEdit: ({ ariaLabel, ariaRole, bindings, charactersLimit, className, "data-pendoid": dataPendoId, "data-testid": dataTestId, fullWidth, hideActionButtons, name, onChange, onEditStateChange, placeholder, readOnly, selectTextOnEdit, startEditable, tabIndex, tooltip, typography, value, }: InlineEditProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DotInlineEdit: ({ ariaLabel, ariaRole, bindings, charactersLimit, className, "data-pendoid": dataPendoId, "data-testid": dataTestId, fullWidth, hideActionButtons, name, onChange, onEditStateChange, maxRows, minRows, multiline, placeholder, readOnly, selectTextOnEdit, startEditable, tabIndex, tooltip, typography, value, }: InlineEditProps) => import("react/jsx-runtime").JSX.Element;

package/src/lib/components/inline-edit/InlineEdit.styles.d.ts

@@ -11,3 +11,8 @@ export interface StyledInlineEditProps {
     typography?: TypographyVariant;
 }
 export declare const StyledInlineEdit: import("styled-components").StyledComponent<"div", any, StyledInlineEditProps, never>;
+export interface StyledInlineViewModeProps {
+    maxRows: number;
+    typography: TypographyVariant;
+}
+export declare const StyledInlineViewMode: import("styled-components").StyledComponent<"div", any, StyledInlineViewModeProps, never>;

package/src/lib/components/table/TableHeaderCheckboxCell.d.ts

@@ -1,8 +1,8 @@
 import { ReactElement } from 'react';
 import { CommonProps } from '../CommonProps';
-import { MultiSelectState, TableRowSelectChangeHandler } from './utils/models';
+import { MultiSelectHeader } from './utils/models';
 export interface DotHeaderCheckboxCellProps extends CommonProps {
-    multiSelectState: MultiSelectState;
-    onCheckAllChange: TableRowSelectChangeHandler;
+    isFromTableSelectionToolbar?: boolean;
+    multiSelectHeader: MultiSelectHeader;
 }
-export declare const DotHeaderCheckboxCell: ({ ariaLabel, className, "data-testid": dataTestId, multiSelectState, onCheckAllChange, }: DotHeaderCheckboxCellProps) => ReactElement;
+export declare const DotHeaderCheckboxCell: ({ ariaLabel, className, "data-testid": dataTestId, isFromTableSelectionToolbar, multiSelectHeader, }: DotHeaderCheckboxCellProps) => ReactElement;

package/src/lib/components/table/TableHeaderCheckboxCell.styles.d.ts

@@ -1,3 +1,4 @@
 import { TableCell } from '@mui/material';
 export declare const rootClassName = "dot-th-checkbox";
-export declare const StyledTableHeaderCheckboxCell: import("styled-components").StyledComponent<typeof TableCell, any, {}, never>;
+export declare const StyledTableHeaderCheckboxCell: import("styled-components").StyledComponent<"div" | typeof TableCell, any, {}, never>;
+export declare const StyledTableHeaderCheckbox: import("styled-components").StyledComponent<"div" | typeof TableCell, any, {}, never>;

package/src/lib/components/table/TableSelectionToolbar.d.ts

@@ -1,8 +1,10 @@
 import { ReactNode } from 'react';
 import { CommonProps } from '../CommonProps';
+import { MultiSelectHeader } from './utils/models';
 export interface TableSelectionToolbarProps extends CommonProps {
     bulkActions?: ReactNode;
+    multiSelectHeader?: MultiSelectHeader;
     onClearAll?: () => void;
     selectedRowsNumber: number;
 }
-export declare const DotTableSelectionToolbar: ({ ariaLabel, bulkActions, className, "data-testid": dataTestId, onClearAll, selectedRowsNumber, }: TableSelectionToolbarProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DotTableSelectionToolbar: ({ ariaLabel, bulkActions, className, "data-testid": dataTestId, onClearAll, multiSelectHeader, selectedRowsNumber, }: TableSelectionToolbarProps) => import("react/jsx-runtime").JSX.Element;

package/src/lib/components/table/utils/helpers.d.ts

@@ -1,6 +1,7 @@
 import { ReactNode } from 'react';
 import { TypographyVariant } from '../../typography/Typography';
 import { TableRowProps } from './interfaces';
+import { MultiSelect } from './models';
 import { AvatarWithTextCell } from '../TableCell';
 import { InlineEditProps } from '../../inline-edit';
 export declare const getFormattedTableCellValue: (value: any, typographyVariant: TypographyVariant) => ReactNode;
@@ -15,3 +16,4 @@ export declare const getSelectedRowIds: (id: string, isChecked: boolean, selecte
 export declare const getBulkSelectedRowIds: (isChecked: boolean, selectedIds: string[], pageData: TableRowProps[]) => string[];
 export declare const getExpandedRowIds: (expandedIds: string[], id: string, isExpand: boolean) => string[];
 export declare const parseCellMaxWidth: (width: string) => string;
+export declare const checkIsMultiselectOverTableHeaderRow: (multiSelect: MultiSelect | undefined, hasToolbar: boolean) => boolean;

package/src/lib/components/table/utils/interfaces.d.ts

@@ -70,6 +70,7 @@ export interface DotColumnHeader {
     align?: TextAlignment;
     id: string;
     label?: string;
+    minWidth?: string;
     sortable?: boolean;
     truncate?: boolean;
     width?: string;

package/src/lib/components/table/utils/models.d.ts

@@ -11,6 +11,7 @@ export interface MultiSelect {
     onCheckAllChange?: TableRowSelectChangeHandler;
     onCheckRowChange?: TableRowSelectChangeHandler;
     onClearAllChange?: TableRowSelectChangeHandler;
+    showOverTableHeaderRow?: boolean;
 }
 interface MultiSelectTableBase {
     selectedTableRowIds: string[];