diff --git a/packages/odyssey-react-mui/src/labs/DataView/DataView.tsx b/packages/odyssey-react-mui/src/labs/DataView/DataView.tsx index d4e6a4ab7..79d6e8fb6 100644 --- a/packages/odyssey-react-mui/src/labs/DataView/DataView.tsx +++ b/packages/odyssey-react-mui/src/labs/DataView/DataView.tsx @@ -35,7 +35,7 @@ import { DataFilters } from "../DataFilters"; import { EmptyState } from "../../EmptyState"; import { fetchData } from "./fetchData"; import { LayoutSwitcher } from "./LayoutSwitcher"; -import { MenuButton } from "../.."; +import { MenuButton } from "../../MenuButton"; import { MoreIcon } from "../../icons.generated"; import { TableSettings } from "./TableSettings"; import { Pagination, usePagination } from "../../Pagination"; @@ -43,6 +43,7 @@ import { TableLayoutContent } from "./TableLayoutContent"; import { CardLayoutContent } from "./CardLayoutContent"; import { useFilterConversion } from "./useFilterConversion"; import { useRowReordering } from "../../DataTable/useRowReordering"; +import { Typography } from "../../Typography"; import { DesignTokens, useOdysseyDesignTokens, @@ -72,6 +73,20 @@ const AdditionalActionsContainer = styled("div", { gap: odysseyDesignTokens.Spacing2, })); +const AdditionalActionsInner = styled("div", { + shouldForwardProp: (prop) => prop !== "odysseyDesignTokens", +})<{ odysseyDesignTokens: DesignTokens }>(({ odysseyDesignTokens }) => ({ + display: "flex", + alignItems: "center", + gap: odysseyDesignTokens.Spacing2, +})); + +const MetaTextContainer = styled("div", { + shouldForwardProp: (prop) => prop !== "odysseyDesignTokens", +})<{ odysseyDesignTokens: DesignTokens }>(({ odysseyDesignTokens }) => ({ + marginInlineEnd: odysseyDesignTokens.Spacing2, +})); + const DataView = ({ additionalActionButton, additionalActionMenuItems, @@ -96,6 +111,7 @@ const DataView = ({ isNoResults: isNoResultsProp, isPaginationMoreDisabled, isRowReorderingDisabled, + metaText, noResultsPlaceholder, onChangeRowSelection, onReorderRows, @@ -266,49 +282,62 @@ const DataView = ({ return; }, [noResultsPlaceholder, t, isEmpty, isNoResults, emptyPlaceholder]); - const additionalActions = useMemo( - () => ( - <> - {currentLayout === "table" && tableLayoutOptions && ( - - )} - - {availableLayouts.length > 1 && ( - - )} - - {additionalActionButton} - - {additionalActionMenuItems && ( - } - ariaLabel={t("table.moreactions.arialabel")} - buttonVariant="secondary" - menuAlignment="right" - > - {additionalActionMenuItems} - - )} - - ), - [ - currentLayout, - tableLayoutOptions, - tableState, - availableLayouts, - additionalActionButton, - additionalActionMenuItems, - t, - ], - ); + const additionalActions = useMemo(() => { + return ( + (metaText || + (currentLayout === "table" && tableLayoutOptions) || + availableLayouts.length > 1 || + additionalActionButton || + additionalActionMenuItems) && ( + + {metaText && ( + + {metaText} + + )} + + {currentLayout === "table" && tableLayoutOptions && ( + + )} + + {availableLayouts.length > 1 && ( + + )} + + {additionalActionButton} + + {additionalActionMenuItems && ( + } + ariaLabel={t("table.moreactions.arialabel")} + buttonVariant="secondary" + menuAlignment="right" + > + {additionalActionMenuItems} + + )} + + ) + ); + }, [ + additionalActionButton, + additionalActionMenuItems, + availableLayouts, + currentLayout, + metaText, + odysseyDesignTokens, + tableLayoutOptions, + tableState, + t, + ]); const enableVirtualization = useMemo( () => enableVirtualizationProp ?? paginationType === "loadMore", @@ -365,11 +394,14 @@ const DataView = ({ )} - {!shouldShowFilters && !bulkActionMenuItems && !hasRowSelection && ( - - {additionalActions} - - )} + {!shouldShowFilters && + !bulkActionMenuItems && + !hasRowSelection && + additionalActions && ( + + {additionalActions} + + )} {currentLayout === "table" && tableLayoutOptions && ( void; onReorderRows?: ({ rowId, newRowIndex }: DataOnReorderRowsType) => void; diff --git a/packages/odyssey-storybook/src/components/odyssey-labs/DataView/DataView.stories.tsx b/packages/odyssey-storybook/src/components/odyssey-labs/DataView/DataView.stories.tsx index a67815c37..0b49457ca 100644 --- a/packages/odyssey-storybook/src/components/odyssey-labs/DataView/DataView.stories.tsx +++ b/packages/odyssey-storybook/src/components/odyssey-labs/DataView/DataView.stories.tsx @@ -118,6 +118,9 @@ const storybookMeta: Meta = { currentPage: { control: "number", }, + metaText: { + control: "text", + }, paginationType: { control: "select", options: paginationTypeValues, @@ -417,6 +420,7 @@ const BaseStory: StoryObj = { hasSearch={args.hasSearch} hasSearchSubmitButton={args.hasSearchSubmitButton} isPaginationMoreDisabled={args.isPaginationMoreDisabled} + metaText={args.metaText} searchDelayTime={args.searchDelayTime} errorMessage={args.errorMessage} initialLayout={args.initialLayout} @@ -506,6 +510,7 @@ export const Everything: StoryObj = { hasRowSelection: true, hasAdditionalActionButton: true, hasAdditionalActionMenuItems: true, + metaText: "Last updated 12 hours ago", }, };