@okta/odyssey-react-mui 1.28.1 → 1.32.0

package/dist/esm/labs/DataView/DataCard.js

@@ -0,0 +1,227 @@
+import _Card from "@mui/material/Card";
+import _CardActionArea from "@mui/material/CardActionArea";
+import _CardActions from "@mui/material/CardActions";
+import _Tooltip from "@mui/material/Tooltip";
+import _IconButton from "@mui/material/IconButton";
+/*!
+ * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import { memo, useMemo, useState } from "react";
+import styled from "@emotion/styled";
+import { useTranslation } from "react-i18next";
+import { Box } from "../../Box.js";
+import { ButtonContext, MenuButton } from "../../Buttons/index.js";
+import { useOdysseyDesignTokens } from "../../OdysseyDesignTokensContext.js";
+import { Heading5, Paragraph, Support } from "../../Typography.js";
+import { ChevronDownIcon, ChevronUpIcon, MoreIcon } from "../../icons.generated/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const CARD_IMAGE_SIZE = "64px";
+export const CARD_IMAGE_SIZE_COMPACT = "48px";
+export const cardVariantValues = ["tile", "stack", "compact"];
+const AccessoryContainer = styled("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "variant"
+})(({
+  odysseyDesignTokens,
+  variant
+}) => ({
+  display: "flex",
+  flexDirection: variant === "compact" ? "row" : "column",
+  alignItems: "center",
+  gap: odysseyDesignTokens.Spacing2,
+  height: variant === "compact" ? CARD_IMAGE_SIZE_COMPACT : "auto"
+}));
+const ImageContainer = styled("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "hasMenuButtonChildren" && prop !== "variant"
+})(({
+  odysseyDesignTokens,
+  hasMenuButtonChildren,
+  variant
+}) => ({
+  display: "flex",
+  alignItems: "flex-start",
+  height: variant === "compact" ? CARD_IMAGE_SIZE_COMPACT : CARD_IMAGE_SIZE,
+  maxHeight: variant === "compact" ? CARD_IMAGE_SIZE_COMPACT : CARD_IMAGE_SIZE,
+  marginBlockEnd: variant === "tile" ? odysseyDesignTokens.Spacing5 : 0,
+  paddingRight: hasMenuButtonChildren ? odysseyDesignTokens.Spacing5 : 0
+}));
+const MenuButtonContainer = styled("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens"
+})(({
+  odysseyDesignTokens,
+  variant
+}) => ({
+  position: "absolute",
+  right: odysseyDesignTokens.Spacing3,
+  top: variant === "compact" ? odysseyDesignTokens.Spacing4 : odysseyDesignTokens.Spacing3,
+  height: variant === "compact" ? CARD_IMAGE_SIZE_COMPACT : "auto",
+  display: "flex",
+  alignItems: "center"
+}));
+const CardInnerContainer = styled("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens"
+})(({
+  odysseyDesignTokens
+}) => ({
+  display: "flex",
+  gap: odysseyDesignTokens.Spacing3
+}));
+const CardImageAndContentContainer = styled("div", {
+  shouldForwardProp: prop => prop !== "variant" && prop !== "centerContent"
+})(({
+  variant,
+  centerContent
+}) => ({
+  display: "flex",
+  flexDirection: variant === "tile" ? "column" : "row",
+  alignItems: centerContent ? "center" : "flex-start"
+}));
+const CardContent = styled("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens"
+})(({
+  odysseyDesignTokens,
+  variant
+}) => ({
+  "& > .MuiTypography-h5:not(:last-child)": {
+    marginBlockEnd: `${variant === "compact" ? odysseyDesignTokens.Spacing1 : odysseyDesignTokens.Spacing3} !important`
+  },
+  "& > *:last-child": {
+    marginBlockEnd: 0
+  }
+}));
+const CardChildrenContainer = styled("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens"
+})(({
+  odysseyDesignTokens
+}) => ({
+  ["&:not(:first-child)"]: {
+    marginBlockStart: odysseyDesignTokens.Spacing3
+  }
+}));
+const AccessoryPlaceholder = styled(_IconButton)({
+  visibility: "hidden"
+});
+const buttonProviderValue = {
+  isFullWidth: true
+};
+const DataCard = ({
+  Accessory: AccessoryProp,
+  button,
+  children,
+  description,
+  image,
+  menuButtonChildren,
+  onClick,
+  overline,
+  renderDetailPanel,
+  row,
+  title,
+  variant = "tile"
+}) => {
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+  const {
+    t
+  } = useTranslation();
+  const [isDetailPanelOpen, setIsDetailPanelOpen] = useState(false);
+  const ExpansionToggle = useMemo(() => {
+    return renderDetailPanel?.({
+      row
+    }) ? _jsx(_Tooltip, {
+      title: isDetailPanelOpen ? t("table.rowexpansion.collapse") : t("table.rowexpansion.expand"),
+      children: _jsx(_IconButton, {
+        children: isDetailPanelOpen ? _jsx(ChevronUpIcon, {}) : _jsx(ChevronDownIcon, {}),
+        onClick: () => setIsDetailPanelOpen(!isDetailPanelOpen),
+        "aria-label": isDetailPanelOpen ? t("table.rowexpansion.collapse") : t("table.rowexpansion.expand")
+      })
+    }) : _jsx(AccessoryPlaceholder, {
+      disabled: true,
+      children: _jsx(ChevronDownIcon, {})
+    });
+  }, [isDetailPanelOpen, renderDetailPanel, row, t]);
+  const Accessory = useMemo(() => {
+    return _jsxs(AccessoryContainer, {
+      odysseyDesignTokens: odysseyDesignTokens,
+      variant: variant,
+      children: [AccessoryProp, renderDetailPanel && ExpansionToggle]
+    });
+  }, [AccessoryProp, ExpansionToggle, odysseyDesignTokens, renderDetailPanel, variant]);
+  const cardContent = useMemo(() => {
+    const countDefinedProps = props => {
+      return props.filter(prop => prop !== undefined).length;
+    };
+    const shouldCenterContent = variant === "compact" && (!renderDetailPanel || !isDetailPanelOpen) && countDefinedProps([title, description, overline, button, children]) <= 2;
+    return _jsxs(CardInnerContainer, {
+      odysseyDesignTokens: odysseyDesignTokens,
+      children: [(AccessoryProp || renderDetailPanel) && _jsx(Box, {
+        children: Accessory
+      }), _jsxs(CardImageAndContentContainer, {
+        variant: variant,
+        centerContent: shouldCenterContent,
+        children: [image && _jsx(ImageContainer, {
+          odysseyDesignTokens: odysseyDesignTokens,
+          hasMenuButtonChildren: Boolean(menuButtonChildren),
+          variant: variant,
+          children: image
+        }), _jsxs(CardContent, {
+          odysseyDesignTokens: odysseyDesignTokens,
+          variant: variant,
+          children: [overline && _jsx(Support, {
+            component: "div",
+            children: overline
+          }), title && _jsx(Heading5, {
+            component: "div",
+            children: title
+          }), description && _jsx(Paragraph, {
+            color: "textSecondary",
+            children: description
+          }), button && _jsx(_CardActions, {
+            children: _jsx(ButtonContext.Provider, {
+              value: buttonProviderValue,
+              children: button
+            })
+          }), children && _jsx(CardChildrenContainer, {
+            odysseyDesignTokens: odysseyDesignTokens,
+            children: children
+          }), renderDetailPanel && isDetailPanelOpen && _jsx(CardChildrenContainer, {
+            odysseyDesignTokens: odysseyDesignTokens,
+            children: renderDetailPanel({
+              row
+            })
+          })]
+        })]
+      })]
+    });
+  }, [odysseyDesignTokens, AccessoryProp, renderDetailPanel, Accessory, variant, image, menuButtonChildren, overline, title, description, button, children, isDetailPanelOpen, row]);
+  return _jsxs(_Card, {
+    className: `${onClick ? "isClickable" : ""} ${Accessory ? "hasAccessory" : ""} ods-card-${variant}`,
+    role: "listitem",
+    children: [onClick ? _jsx(_CardActionArea, {
+      onClick: onClick,
+      children: cardContent
+    }) : cardContent, menuButtonChildren && _jsx(MenuButtonContainer, {
+      odysseyDesignTokens: odysseyDesignTokens,
+      variant: variant,
+      children: _jsx(MenuButton, {
+        endIcon: _jsx(MoreIcon, {}),
+        ariaLabel: t("table.moreactions.arialabel"),
+        buttonVariant: "floating",
+        menuAlignment: "right",
+        size: "small",
+        tooltipText: t("table.actions"),
+        children: menuButtonChildren
+      })
+    })]
+  });
+};
+const MemoizedDataCard = memo(DataCard);
+MemoizedDataCard.displayName = "DataCard";
+export { MemoizedDataCard as DataCard };
+//# sourceMappingURL=DataCard.js.map

package/dist/esm/labs/DataView/DataCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataCard.js","names":["memo","useMemo","useState","styled","useTranslation","Box","ButtonContext","MenuButton","useOdysseyDesignTokens","Heading5","Paragraph","Support","ChevronDownIcon","ChevronUpIcon","MoreIcon","jsx","_jsx","jsxs","_jsxs","CARD_IMAGE_SIZE","CARD_IMAGE_SIZE_COMPACT","cardVariantValues","AccessoryContainer","shouldForwardProp","prop","odysseyDesignTokens","variant","display","flexDirection","alignItems","gap","Spacing2","height","ImageContainer","hasMenuButtonChildren","maxHeight","marginBlockEnd","Spacing5","paddingRight","MenuButtonContainer","position","right","Spacing3","top","Spacing4","CardInnerContainer","CardImageAndContentContainer","centerContent","CardContent","Spacing1","CardChildrenContainer","marginBlockStart","AccessoryPlaceholder","_IconButton","visibility","buttonProviderValue","isFullWidth","DataCard","Accessory","AccessoryProp","button","children","description","image","menuButtonChildren","onClick","overline","renderDetailPanel","row","title","t","isDetailPanelOpen","setIsDetailPanelOpen","ExpansionToggle","_Tooltip","disabled","cardContent","countDefinedProps","props","filter","undefined","length","shouldCenterContent","Boolean","component","color","_CardActions","Provider","value","_Card","className","role","_CardActionArea","endIcon","ariaLabel","buttonVariant","menuAlignment","size","tooltipText","MemoizedDataCard","displayName"],"sources":["../../../../src/labs/DataView/DataCard.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport {\n  MouseEventHandler,\n  ReactElement,\n  memo,\n  useMemo,\n  ReactNode,\n  useState,\n} from \"react\";\nimport {\n  IconButton as MuiIconButton,\n  Card as MuiCard,\n  CardActions as MuiCardActions,\n  CardActionArea as MuiCardActionArea,\n  Tooltip as MuiTooltip,\n} from \"@mui/material\";\nimport styled from \"@emotion/styled\";\nimport { useTranslation } from \"react-i18next\";\n\nimport { Box } from \"../../Box.js\";\nimport {\n  Button,\n  ButtonContext,\n  MenuButton,\n  MenuButtonProps,\n} from \"../../Buttons/index.js\";\nimport {\n  DesignTokens,\n  useOdysseyDesignTokens,\n} from \"../../OdysseyDesignTokensContext.js\";\nimport { Heading5, Paragraph, Support } from \"../../Typography.js\";\nimport {\n  ChevronDownIcon,\n  ChevronUpIcon,\n  MoreIcon,\n} from \"../../icons.generated/index.js\";\nimport { CardLayoutProps } from \"./componentTypes.js\";\nimport { MRT_RowData } from \"material-react-table\";\n\nexport const CARD_IMAGE_SIZE = \"64px\";\nexport const CARD_IMAGE_SIZE_COMPACT = \"48px\";\n\nexport const cardVariantValues = [\"tile\", \"stack\", \"compact\"] as const;\n\nexport type DataCardProps<TData extends MRT_RowData> = {\n  children?: ReactNode;\n  description?: string;\n  image?: ReactElement;\n  overline?: string;\n  renderDetailPanel?: CardLayoutProps<TData>[\"renderDetailPanel\"];\n  row: TData;\n  title?: string;\n  variant?: (typeof cardVariantValues)[number];\n} & (\n  | {\n      Accessory?: never;\n      button?: never;\n      menuButtonChildren?: never;\n      onClick: MouseEventHandler;\n    }\n  | {\n      Accessory?: ReactNode;\n      button?: ReactElement<typeof Button>;\n      menuButtonChildren?: MenuButtonProps[\"children\"];\n      onClick?: never;\n    }\n);\n\ntype DataCardComponent = (<TData extends MRT_RowData>(\n  props: DataCardProps<TData>,\n) => JSX.Element) & {\n  displayName?: string;\n};\n\nconst AccessoryContainer = styled(\"div\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" && prop !== \"variant\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n  variant: (typeof cardVariantValues)[number];\n}>(({ odysseyDesignTokens, variant }) => ({\n  display: \"flex\",\n  flexDirection: variant === \"compact\" ? \"row\" : \"column\",\n  alignItems: \"center\",\n  gap: odysseyDesignTokens.Spacing2,\n  height: variant === \"compact\" ? CARD_IMAGE_SIZE_COMPACT : \"auto\",\n}));\n\nconst ImageContainer = styled(\"div\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" &&\n    prop !== \"hasMenuButtonChildren\" &&\n    prop !== \"variant\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n  hasMenuButtonChildren: boolean;\n  variant: (typeof cardVariantValues)[number];\n}>(({ odysseyDesignTokens, hasMenuButtonChildren, variant }) => ({\n  display: \"flex\",\n  alignItems: \"flex-start\",\n  height: variant === \"compact\" ? CARD_IMAGE_SIZE_COMPACT : CARD_IMAGE_SIZE,\n  maxHeight: variant === \"compact\" ? CARD_IMAGE_SIZE_COMPACT : CARD_IMAGE_SIZE,\n  marginBlockEnd: variant === \"tile\" ? odysseyDesignTokens.Spacing5 : 0,\n  paddingRight: hasMenuButtonChildren ? odysseyDesignTokens.Spacing5 : 0,\n}));\n\nconst MenuButtonContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n  variant: (typeof cardVariantValues)[number];\n}>(({ odysseyDesignTokens, variant }) => ({\n  position: \"absolute\",\n  right: odysseyDesignTokens.Spacing3,\n  top:\n    variant === \"compact\"\n      ? odysseyDesignTokens.Spacing4\n      : odysseyDesignTokens.Spacing3,\n  height: variant === \"compact\" ? CARD_IMAGE_SIZE_COMPACT : \"auto\",\n  display: \"flex\",\n  alignItems: \"center\",\n}));\n\nconst CardInnerContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{ odysseyDesignTokens: DesignTokens }>(({ odysseyDesignTokens }) => ({\n  display: \"flex\",\n  gap: odysseyDesignTokens.Spacing3,\n}));\n\nconst CardImageAndContentContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"variant\" && prop !== \"centerContent\",\n})<{ variant: (typeof cardVariantValues)[number]; centerContent: boolean }>(\n  ({ variant, centerContent }) => ({\n    display: \"flex\",\n    flexDirection: variant === \"tile\" ? \"column\" : \"row\",\n    alignItems: centerContent ? \"center\" : \"flex-start\",\n  }),\n);\n\nconst CardContent = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n  variant: (typeof cardVariantValues)[number];\n}>(({ odysseyDesignTokens, variant }) => ({\n  \"& > .MuiTypography-h5:not(:last-child)\": {\n    marginBlockEnd: `${variant === \"compact\" ? odysseyDesignTokens.Spacing1 : odysseyDesignTokens.Spacing3} !important`,\n  },\n  \"& > *:last-child\": {\n    marginBlockEnd: 0,\n  },\n}));\n\nconst CardChildrenContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{ odysseyDesignTokens: DesignTokens }>(({ odysseyDesignTokens }) => ({\n  [\"&:not(:first-child)\"]: {\n    marginBlockStart: odysseyDesignTokens.Spacing3,\n  },\n}));\n\nconst AccessoryPlaceholder = styled(MuiIconButton)({\n  visibility: \"hidden\",\n});\n\nconst buttonProviderValue = { isFullWidth: true };\n\nconst DataCard: DataCardComponent = <TData extends MRT_RowData>({\n  Accessory: AccessoryProp,\n  button,\n  children,\n  description,\n  image,\n  menuButtonChildren,\n  onClick,\n  overline,\n  renderDetailPanel,\n  row,\n  title,\n  variant = \"tile\",\n}: DataCardProps<TData>) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n  const { t } = useTranslation();\n\n  const [isDetailPanelOpen, setIsDetailPanelOpen] = useState<boolean>(false);\n\n  const ExpansionToggle = useMemo(() => {\n    return renderDetailPanel?.({ row }) ? (\n      <MuiTooltip\n        title={\n          isDetailPanelOpen\n            ? t(\"table.rowexpansion.collapse\")\n            : t(\"table.rowexpansion.expand\")\n        }\n      >\n        <MuiIconButton\n          children={isDetailPanelOpen ? <ChevronUpIcon /> : <ChevronDownIcon />}\n          onClick={() => setIsDetailPanelOpen(!isDetailPanelOpen)}\n          aria-label={\n            isDetailPanelOpen\n              ? t(\"table.rowexpansion.collapse\")\n              : t(\"table.rowexpansion.expand\")\n          }\n        />\n      </MuiTooltip>\n    ) : (\n      <AccessoryPlaceholder disabled>\n        <ChevronDownIcon />\n      </AccessoryPlaceholder>\n    );\n  }, [isDetailPanelOpen, renderDetailPanel, row, t]);\n\n  const Accessory = useMemo(() => {\n    return (\n      <AccessoryContainer\n        odysseyDesignTokens={odysseyDesignTokens}\n        variant={variant}\n      >\n        {AccessoryProp}\n        {renderDetailPanel && ExpansionToggle}\n      </AccessoryContainer>\n    );\n  }, [\n    AccessoryProp,\n    ExpansionToggle,\n    odysseyDesignTokens,\n    renderDetailPanel,\n    variant,\n  ]);\n\n  const cardContent = useMemo(() => {\n    const countDefinedProps = (\n      props: Array<string | ReactNode | undefined>,\n    ) => {\n      return props.filter((prop) => prop !== undefined).length;\n    };\n\n    const shouldCenterContent =\n      variant === \"compact\" &&\n      (!renderDetailPanel || !isDetailPanelOpen) &&\n      countDefinedProps([title, description, overline, button, children]) <= 2;\n\n    return (\n      <CardInnerContainer odysseyDesignTokens={odysseyDesignTokens}>\n        {(AccessoryProp || renderDetailPanel) && <Box>{Accessory}</Box>}\n        <CardImageAndContentContainer\n          variant={variant}\n          centerContent={shouldCenterContent}\n        >\n          {image && (\n            <ImageContainer\n              odysseyDesignTokens={odysseyDesignTokens}\n              hasMenuButtonChildren={Boolean(menuButtonChildren)}\n              variant={variant}\n            >\n              {image}\n            </ImageContainer>\n          )}\n\n          <CardContent\n            odysseyDesignTokens={odysseyDesignTokens}\n            variant={variant}\n          >\n            {overline && <Support component=\"div\">{overline}</Support>}\n            {title && <Heading5 component=\"div\">{title}</Heading5>}\n            {description && (\n              <Paragraph color=\"textSecondary\">{description}</Paragraph>\n            )}\n\n            {button && (\n              <MuiCardActions>\n                <ButtonContext.Provider value={buttonProviderValue}>\n                  {button}\n                </ButtonContext.Provider>\n              </MuiCardActions>\n            )}\n\n            {children && (\n              <CardChildrenContainer odysseyDesignTokens={odysseyDesignTokens}>\n                {children}\n              </CardChildrenContainer>\n            )}\n\n            {renderDetailPanel && isDetailPanelOpen && (\n              <CardChildrenContainer odysseyDesignTokens={odysseyDesignTokens}>\n                {renderDetailPanel({ row })}\n              </CardChildrenContainer>\n            )}\n          </CardContent>\n        </CardImageAndContentContainer>\n      </CardInnerContainer>\n    );\n  }, [\n    odysseyDesignTokens,\n    AccessoryProp,\n    renderDetailPanel,\n    Accessory,\n    variant,\n    image,\n    menuButtonChildren,\n    overline,\n    title,\n    description,\n    button,\n    children,\n    isDetailPanelOpen,\n    row,\n  ]);\n\n  return (\n    <MuiCard\n      className={`${onClick ? \"isClickable\" : \"\"} ${Accessory ? \"hasAccessory\" : \"\"} ods-card-${variant}`}\n      role=\"listitem\"\n    >\n      {onClick ? (\n        <MuiCardActionArea onClick={onClick}>{cardContent}</MuiCardActionArea>\n      ) : (\n        cardContent\n      )}\n\n      {menuButtonChildren && (\n        <MenuButtonContainer\n          odysseyDesignTokens={odysseyDesignTokens}\n          variant={variant}\n        >\n          <MenuButton\n            endIcon={<MoreIcon />}\n            ariaLabel={t(\"table.moreactions.arialabel\")}\n            buttonVariant=\"floating\"\n            menuAlignment=\"right\"\n            size=\"small\"\n            tooltipText={t(\"table.actions\")}\n          >\n            {menuButtonChildren}\n          </MenuButton>\n        </MenuButtonContainer>\n      )}\n    </MuiCard>\n  );\n};\n\nconst MemoizedDataCard = memo(DataCard) as DataCardComponent;\nMemoizedDataCard.displayName = \"DataCard\";\n\nexport { MemoizedDataCard as DataCard };\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/labs/DataView/DataTable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTable.js","names":["memo","useMemo","DataView","jsx","_jsx","DataTable","additionalActionButton","additionalActionMenuItems","bulkActionMenuItems","columns","currentPage","emptyPlaceholder","errorMessage","filters","getData","hasChangeableDensity","hasColumnResizing","hasColumnVisibility","initialDensity","hasFilters","hasPagination","hasRowReordering","hasRowSelection","hasSearch","hasSearchSubmitButton","hasSorting","isLoading","isEmpty","isNoResults","isPaginationMoreDisabled","isRowReorderingDisabled","maxResultsPerPage","maxPages","noResultsPlaceholder","onChangeRowSelection","paginationType","renderDetailPanel","resultsPerPage","rowActionButtons","rowActionMenuItems","searchDelayTime","totalRows","tableLayoutOptions","availableLayouts","MemoizedDataTable","displayName"],"sources":["../../../../src/labs/DataView/DataTable.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { memo, useMemo } from \"react\";\n\nimport { DataView } from \"./DataView.js\";\nimport { TableLayoutProps, UniversalProps } from \"./componentTypes.js\";\nimport { MRT_RowData } from \"material-react-table\";\n\nexport type DataTableProps<TData extends MRT_RowData> = UniversalProps<TData> &\n  TableLayoutProps<TData>;\ntype DataTableComponent = (<TData extends MRT_RowData>(\n  props: DataTableProps<TData>,\n) => JSX.Element) & {\n  displayName?: string;\n};\n\nconst DataTable = <TData extends MRT_RowData>({\n  additionalActionButton,\n  additionalActionMenuItems,\n  bulkActionMenuItems,\n  columns,\n  currentPage,\n  emptyPlaceholder,\n  errorMessage,\n  filters,\n  getData,\n  hasChangeableDensity,\n  hasColumnResizing,\n  hasColumnVisibility,\n  initialDensity,\n  hasFilters,\n  hasPagination,\n  hasRowReordering,\n  hasRowSelection,\n  hasSearch,\n  hasSearchSubmitButton,\n  hasSorting,\n  isLoading,\n  isEmpty,\n  isNoResults,\n  isPaginationMoreDisabled,\n  isRowReorderingDisabled,\n  maxResultsPerPage,\n  maxPages,\n  noResultsPlaceholder,\n  onChangeRowSelection,\n  paginationType,\n  renderDetailPanel,\n  resultsPerPage,\n  rowActionButtons,\n  rowActionMenuItems,\n  searchDelayTime,\n  totalRows,\n}: DataTableProps<TData>) => {\n  const tableLayoutOptions = useMemo(\n    () => ({\n      columns,\n      hasChangeableDensity,\n      hasColumnResizing,\n      hasColumnVisibility,\n      hasSorting,\n      initialDensity,\n      renderDetailPanel,\n      rowActionButtons,\n      rowActionMenuItems,\n    }),\n    [\n      columns,\n      hasChangeableDensity,\n      hasColumnResizing,\n      hasColumnVisibility,\n      hasSorting,\n      initialDensity,\n      renderDetailPanel,\n      rowActionButtons,\n      rowActionMenuItems,\n    ],\n  );\n\n  return (\n    <DataView\n      additionalActionButton={additionalActionButton}\n      additionalActionMenuItems={additionalActionMenuItems}\n      availableLayouts={[\"table\"]}\n      bulkActionMenuItems={bulkActionMenuItems}\n      currentPage={currentPage}\n      emptyPlaceholder={emptyPlaceholder}\n      errorMessage={errorMessage}\n      filters={filters}\n      getData={getData}\n      hasFilters={hasFilters}\n      hasPagination={hasPagination}\n      hasRowReordering={hasRowReordering}\n      hasRowSelection={hasRowSelection}\n      hasSearch={hasSearch}\n      hasSearchSubmitButton={hasSearchSubmitButton}\n      isEmpty={isEmpty}\n      isLoading={isLoading}\n      isNoResults={isNoResults}\n      isPaginationMoreDisabled={isPaginationMoreDisabled}\n      isRowReorderingDisabled={isRowReorderingDisabled}\n      maxPages={maxPages}\n      maxResultsPerPage={maxResultsPerPage}\n      noResultsPlaceholder={noResultsPlaceholder}\n      onChangeRowSelection={onChangeRowSelection}\n      paginationType={paginationType}\n      resultsPerPage={resultsPerPage}\n      searchDelayTime={searchDelayTime}\n      tableLayoutOptions={tableLayoutOptions}\n      totalRows={totalRows}\n    />\n  );\n};\n\nconst MemoizedDataTable = memo(DataTable) as DataTableComponent;\nMemoizedDataTable.displayName = \"DataTable\";\n\nexport { MemoizedDataTable as DataTable };\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,IAAI,EAAEC,OAAO,QAAQ,OAAO;AAErC,SAASC,QAAQ,QAAQ,eAAe;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAYzC,MAAMC,SAAS,GAAGA,CAA4B;EAC5CC,sBAAsB;EACtBC,yBAAyB;EACzBC,mBAAmB;EACnBC,OAAO;EACPC,WAAW;EACXC,gBAAgB;EAChBC,YAAY;EACZC,OAAO;EACPC,OAAO;EACPC,oBAAoB;EACpBC,iBAAiB;EACjBC,mBAAmB;EACnBC,cAAc;EACdC,UAAU;EACVC,aAAa;EACbC,gBAAgB;EAChBC,eAAe;EACfC,SAAS;EACTC,qBAAqB;EACrBC,UAAU;EACVC,SAAS;EACTC,OAAO;EACPC,WAAW;EACXC,wBAAwB;EACxBC,uBAAuB;EACvBC,iBAAiB;EACjBC,QAAQ;EACRC,oBAAoB;EACpBC,oBAAoB;EACpBC,cAAc;EACdC,iBAAiB;EACjBC,cAAc;EACdC,gBAAgB;EAChBC,kBAAkB;EAClBC,eAAe;EACfC;AACqB,CAAC,KAAK;EAC3B,MAAMC,kBAAkB,GAAGzC,OAAO,CAChC,OAAO;IACLQ,OAAO;IACPM,oBAAoB;IACpBC,iBAAiB;IACjBC,mBAAmB;IACnBQ,UAAU;IACVP,cAAc;IACdkB,iBAAiB;IACjBE,gBAAgB;IAChBC;EACF,CAAC,CAAC,EACF,CACE9B,OAAO,EACPM,oBAAoB,EACpBC,iBAAiB,EACjBC,mBAAmB,EACnBQ,UAAU,EACVP,cAAc,EACdkB,iBAAiB,EACjBE,gBAAgB,EAChBC,kBAAkB,CAEtB,CAAC;EAED,OACEnC,IAAA,CAACF,QAAQ;IACPI,sBAAsB,EAAEA,sBAAuB;IAC/CC,yBAAyB,EAAEA,yBAA0B;IACrDoC,gBAAgB,EAAE,CAAC,OAAO,CAAE;IAC5BnC,mBAAmB,EAAEA,mBAAoB;IACzCE,WAAW,EAAEA,WAAY;IACzBC,gBAAgB,EAAEA,gBAAiB;IACnCC,YAAY,EAAEA,YAAa;IAC3BC,OAAO,EAAEA,OAAQ;IACjBC,OAAO,EAAEA,OAAQ;IACjBK,UAAU,EAAEA,UAAW;IACvBC,aAAa,EAAEA,aAAc;IAC7BC,gBAAgB,EAAEA,gBAAiB;IACnCC,eAAe,EAAEA,eAAgB;IACjCC,SAAS,EAAEA,SAAU;IACrBC,qBAAqB,EAAEA,qBAAsB;IAC7CG,OAAO,EAAEA,OAAQ;IACjBD,SAAS,EAAEA,SAAU;IACrBE,WAAW,EAAEA,WAAY;IACzBC,wBAAwB,EAAEA,wBAAyB;IACnDC,uBAAuB,EAAEA,uBAAwB;IACjDE,QAAQ,EAAEA,QAAS;IACnBD,iBAAiB,EAAEA,iBAAkB;IACrCE,oBAAoB,EAAEA,oBAAqB;IAC3CC,oBAAoB,EAAEA,oBAAqB;IAC3CC,cAAc,EAAEA,cAAe;IAC/BE,cAAc,EAAEA,cAAe;IAC/BG,eAAe,EAAEA,eAAgB;IACjCE,kBAAkB,EAAEA,kBAAmB;IACvCD,SAAS,EAAEA;EAAU,CACtB,CAAC;AAEN,CAAC;AAED,MAAMG,iBAAiB,GAAG5C,IAAI,CAACK,SAAS,CAAuB;AAC/DuC,iBAAiB,CAACC,WAAW,GAAG,WAAW;AAE3C,SAASD,iBAAiB,IAAIvC,SAAS","ignoreList":[]}

package/dist/esm/labs/DataView/DataView.js

@@ -0,0 +1,346 @@
+/*!
+ * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import { memo, useCallback, useEffect, useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { availableLayouts as allAvailableLayouts, densityValues } from "./constants.js";
+import { Box } from "../../Box.js";
+import { BulkActionsMenu } from "./BulkActionsMenu.js";
+import { Callout } from "../../Callout.js";
+import { DataFilters } from "../DataFilters.js";
+import { EmptyState } from "../../EmptyState.js";
+import { fetchData } from "./fetchData.js";
+import { LayoutSwitcher } from "./LayoutSwitcher.js";
+import { MenuButton } from "../../Buttons/index.js";
+import { MoreIcon } from "../../icons.generated/index.js";
+import { TableSettings } from "./TableSettings.js";
+import { Pagination, usePagination } from "../../Pagination/index.js";
+import { TableLayoutContent } from "./TableLayoutContent.js";
+import { CardLayoutContent } from "./CardLayoutContent.js";
+import { useFilterConversion } from "./useFilterConversion.js";
+import { useRowReordering } from "../../DataTable/useRowReordering.js";
+import { Typography } from "../../Typography.js";
+import { useOdysseyDesignTokens } from "../../OdysseyDesignTokensContext.js";
+import styled from "@emotion/styled";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const DataViewContainer = styled("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens"
+})(({
+  odysseyDesignTokens
+}) => ({
+  display: "flex",
+  flexDirection: "column",
+  gap: odysseyDesignTokens.Spacing4
+}));
+const BulkActionsContainer = styled("div")(() => ({
+  display: "flex",
+  justifyContent: "space-between"
+}));
+const AdditionalActionsContainer = styled("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens"
+})(({
+  odysseyDesignTokens
+}) => ({
+  display: "flex",
+  justifyContent: "flex-end",
+  gap: odysseyDesignTokens.Spacing2
+}));
+const AdditionalActionsInner = styled("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens"
+})(({
+  odysseyDesignTokens
+}) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: odysseyDesignTokens.Spacing2
+}));
+const MetaTextContainer = styled("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens"
+})(({
+  odysseyDesignTokens
+}) => ({
+  marginInlineEnd: odysseyDesignTokens.Spacing2
+}));
+const DataView = ({
+  additionalActionButton,
+  additionalActionMenuItems,
+  availableLayouts = allAvailableLayouts,
+  bulkActionMenuItems,
+  currentPage = 1,
+  emptyPlaceholder,
+  enableVirtualization: enableVirtualizationProp,
+  errorMessage: errorMessageProp,
+  filters: filtersProp,
+  getData,
+  getRowId: getRowIdProp,
+  hasFilters,
+  hasPagination,
+  hasPageInput,
+  hasRowCountInput,
+  hasRowCountLabel,
+  hasSearch,
+  hasSearchSubmitButton,
+  hasRowReordering,
+  hasRowSelection,
+  initialLayout,
+  isEmpty: isEmptyProp,
+  isLoading: isLoadingProp,
+  isNoResults: isNoResultsProp,
+  isPaginationMoreDisabled,
+  isRowReorderingDisabled,
+  metaText,
+  noResultsPlaceholder,
+  onChangeRowSelection,
+  onReorderRows,
+  paginationType = "paged",
+  resultsPerPage = 20,
+  searchDelayTime,
+  cardLayoutOptions,
+  tableLayoutOptions,
+  totalRows,
+  maxPages,
+  maxResultsPerPage,
+  onPaginationChange
+}) => {
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+  const {
+    t
+  } = useTranslation();
+  const [currentLayout, setCurrentLayout] = useState(initialLayout ?? availableLayouts[0]);
+  const [data, setData] = useState([]);
+  const [isLoading, setIsLoading] = useState(isLoadingProp ?? true);
+  const [isEmpty, setIsEmpty] = useState(isEmptyProp ?? true);
+  const [isNoResults, setIsNoResults] = useState(isNoResultsProp ?? false);
+  const [errorMessage, setErrorMessage] = useState(errorMessageProp);
+  const [search, setSearch] = useState("");
+  const [initialFilters, setInitialFilters] = useState(filtersProp);
+  const [filters, setFilters] = useState(filtersProp);
+  const [draggingRow, setDraggingRow] = useState();
+  const [rowSelection, setRowSelection] = useState({});
+  useEffect(() => {
+    onChangeRowSelection?.(rowSelection);
+  }, [rowSelection, onChangeRowSelection]);
+  const [pagination, setPagination] = useState({
+    pageIndex: currentPage,
+    pageSize: resultsPerPage
+  });
+  const [tableState, setTableState] = useState({
+    columnSorting: [],
+    columnVisibility: {},
+    rowDensity: tableLayoutOptions?.initialDensity ?? densityValues[0]
+  });
+  const shouldShowFilters = hasSearch || hasFilters || additionalActionButton || additionalActionMenuItems;
+  const availableFilters = useFilterConversion({
+    filters: filters,
+    columns: tableLayoutOptions?.columns
+  });
+  useEffect(() => {
+    if (!initialFilters && availableFilters) {
+      setInitialFilters(availableFilters);
+    }
+  }, [availableFilters, initialFilters]);
+  const dataQueryParams = useMemo(() => ({
+    page: pagination.pageIndex,
+    resultsPerPage: pagination.pageSize,
+    search,
+    filters: availableFilters,
+    sort: tableState?.columnSorting
+  }), [pagination.pageIndex, pagination.pageSize, search, availableFilters, tableState?.columnSorting]);
+  const getRowId = useCallback(originalRow => originalRow.id, []);
+  useEffect(() => {
+    setPagination({
+      pageIndex: currentPage,
+      pageSize: resultsPerPage
+    });
+  }, [currentPage, resultsPerPage]);
+  useEffect(() => {
+    setPagination(prev => ({
+      pageIndex: 1,
+      pageSize: paginationType == "loadMore" ? resultsPerPage : prev.pageSize
+    }));
+  }, [filters, paginationType, resultsPerPage, search]);
+  useEffect(() => {
+    onPaginationChange?.(pagination);
+  }, [onPaginationChange, pagination]);
+  useEffect(() => {
+    fetchData({
+      dataQueryParams,
+      errorMessageProp,
+      getData,
+      setData,
+      setErrorMessage,
+      setIsLoading: isLoadingProp ? undefined : setIsLoading
+    });
+  }, [dataQueryParams, errorMessageProp, getData, isLoadingProp]);
+  useEffect(() => {
+    setIsEmpty(pagination.pageIndex === currentPage && pagination.pageSize === resultsPerPage && search === "" && (!hasFilters || filters === initialFilters) && data.length === 0);
+  }, [currentPage, data, filters, hasFilters, initialFilters, pagination, resultsPerPage, search]);
+  useEffect(() => {
+    setIsLoading(prevValue => isLoadingProp ?? prevValue);
+  }, [isLoadingProp]);
+  useEffect(() => {
+    setIsEmpty(prevValue => isEmptyProp ?? prevValue);
+  }, [isEmptyProp]);
+  useEffect(() => {
+    setIsNoResults(prevValue => isNoResultsProp ?? prevValue);
+  }, [isNoResultsProp]);
+  const emptyState = useMemo(() => {
+    const noResultsInnerContent = noResultsPlaceholder || _jsx(EmptyState, {
+      description: t("table.noresults.text"),
+      heading: t("table.noresults.heading")
+    });
+    if (isEmpty) {
+      return emptyPlaceholder || noResultsInnerContent;
+    }
+    if (isNoResults) {
+      return noResultsInnerContent;
+    }
+    return;
+  }, [noResultsPlaceholder, t, isEmpty, isNoResults, emptyPlaceholder]);
+  const additionalActions = useMemo(() => {
+    return (metaText || currentLayout === "table" && tableLayoutOptions || availableLayouts.length > 1 || additionalActionButton || additionalActionMenuItems) && _jsxs(AdditionalActionsInner, {
+      odysseyDesignTokens: odysseyDesignTokens,
+      children: [metaText && _jsx(MetaTextContainer, {
+        odysseyDesignTokens: odysseyDesignTokens,
+        children: _jsx(Typography, {
+          color: "textSecondary",
+          children: metaText
+        })
+      }), currentLayout === "table" && tableLayoutOptions && _jsx(TableSettings, {
+        setTableState: setTableState,
+        tableLayoutOptions: tableLayoutOptions,
+        tableState: tableState
+      }), availableLayouts.length > 1 && _jsx(LayoutSwitcher, {
+        availableLayouts: availableLayouts,
+        currentLayout: currentLayout,
+        setCurrentLayout: setCurrentLayout
+      }), additionalActionButton, additionalActionMenuItems && _jsx(MenuButton, {
+        endIcon: _jsx(MoreIcon, {}),
+        ariaLabel: t("table.moreactions.arialabel"),
+        buttonVariant: "secondary",
+        menuAlignment: "right",
+        children: additionalActionMenuItems
+      })]
+    });
+  }, [additionalActionButton, additionalActionMenuItems, availableLayouts, currentLayout, metaText, odysseyDesignTokens, tableLayoutOptions, tableState, t]);
+  const enableVirtualization = useMemo(() => enableVirtualizationProp ?? paginationType === "loadMore", [enableVirtualizationProp, paginationType]);
+  const {
+    lastRow: lastRowOnPage
+  } = usePagination({
+    currentRowsCount: data.length,
+    pageIndex: pagination.pageIndex,
+    pageSize: pagination.pageSize,
+    totalRows
+  });
+  const rowReorderingUtilities = useRowReordering({
+    totalRows,
+    onReorderRows,
+    data,
+    setData,
+    draggingRow,
+    setDraggingRow,
+    resultsPerPage: pagination.pageSize,
+    page: pagination.pageIndex
+  });
+  return _jsxs(DataViewContainer, {
+    odysseyDesignTokens: odysseyDesignTokens,
+    children: [errorMessage && _jsx(Box, {
+      children: _jsx(Callout, {
+        severity: "error",
+        text: errorMessage
+      })
+    }), shouldShowFilters && _jsx(DataFilters, {
+      additionalActions: additionalActions,
+      filters: hasFilters ? availableFilters : undefined,
+      hasSearchSubmitButton: hasSearchSubmitButton,
+      isDisabled: isEmpty,
+      onChangeFilters: hasFilters ? setFilters : undefined,
+      onChangeSearch: hasSearch ? setSearch : undefined,
+      searchDelayTime: searchDelayTime
+    }), (bulkActionMenuItems || hasRowSelection) && _jsxs(BulkActionsContainer, {
+      children: [_jsx(BulkActionsMenu, {
+        data: data,
+        menuItems: bulkActionMenuItems,
+        rowSelection: rowSelection,
+        setRowSelection: setRowSelection
+      }), !shouldShowFilters && additionalActions]
+    }), !shouldShowFilters && !bulkActionMenuItems && !hasRowSelection && additionalActions && _jsx(AdditionalActionsContainer, {
+      odysseyDesignTokens: odysseyDesignTokens,
+      children: additionalActions
+    }), currentLayout === "table" && tableLayoutOptions && _jsx(TableLayoutContent, {
+      columns: tableLayoutOptions.columns,
+      data: data,
+      draggingRow: draggingRow,
+      emptyState: emptyState,
+      enableVirtualization: enableVirtualization,
+      getRowId: getRowIdProp || getRowId,
+      hasRowReordering: hasRowReordering,
+      hasRowSelection: hasRowSelection,
+      isEmpty: isEmpty,
+      isLoading: isLoading,
+      isNoResults: isNoResults,
+      isRowReorderingDisabled: isRowReorderingDisabled,
+      onReorderRows: onReorderRows,
+      pagination: pagination,
+      rowReorderingUtilities: rowReorderingUtilities,
+      rowSelection: rowSelection,
+      setRowSelection: setRowSelection,
+      setTableState: setTableState,
+      tableLayoutOptions: tableLayoutOptions,
+      tableState: tableState,
+      totalRows: totalRows
+    }), (currentLayout === "list" || currentLayout === "grid") && cardLayoutOptions && _jsx(CardLayoutContent, {
+      currentLayout: currentLayout,
+      data: data,
+      draggingRow: draggingRow,
+      emptyState: emptyState,
+      getRowId: getRowIdProp || getRowId,
+      hasRowReordering: hasRowReordering,
+      hasRowSelection: hasRowSelection,
+      isEmpty: isEmpty,
+      isLoading: isLoading,
+      isNoResults: isNoResults,
+      isRowReorderingDisabled: isRowReorderingDisabled,
+      onReorderRows: onReorderRows,
+      pagination: pagination,
+      rowReorderingUtilities: rowReorderingUtilities,
+      rowSelection: rowSelection,
+      setRowSelection: setRowSelection,
+      cardLayoutOptions: cardLayoutOptions,
+      totalRows: totalRows
+    }), hasPagination && _jsx(Pagination, {
+      currentPageLabel: t("pagination.page"),
+      hasPageInput: hasPageInput,
+      hasRowCountInput: hasRowCountInput,
+      hasRowCountLabel: hasRowCountLabel,
+      isDisabled: isEmpty,
+      isMoreDisabled: isPaginationMoreDisabled,
+      lastRow: lastRowOnPage,
+      loadMoreLabel: t("pagination.loadmore"),
+      maxPageIndex: maxPages,
+      maxPageSize: maxResultsPerPage,
+      nextLabel: t("pagination.next"),
+      onPaginationChange: setPagination,
+      pageIndex: pagination.pageIndex,
+      pageSize: pagination.pageSize,
+      previousLabel: t("pagination.previous"),
+      rowsPerPageLabel: t("pagination.rowsperpage"),
+      totalRows: totalRows,
+      currentRowsCount: data.length,
+      variant: paginationType
+    })]
+  });
+};
+const MemoizedDataView = memo(DataView);
+MemoizedDataView.displayName = "DataView";
+export { MemoizedDataView as DataView };
+//# sourceMappingURL=DataView.js.map