@okta/odyssey-react-mui 1.15.9 → 1.21.0

package/dist/labs/DataComponents/RowActions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RowActions.js","names":["memo","useCallback","useTranslation","ArrowBottomIcon","ArrowDownIcon","ArrowTopIcon","ArrowUpIcon","MenuItem","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","RowActions","isRowReorderingDisabled","row","rowActionMenuItems","rowIndex","totalRows","updateRowOrder","t","handleToFrontClick","rowId","id","newRowIndex","handleForwardClick","Math","max","handleBackwardClick","handleToBackClick","children","isDisabled","onClick","MemoizedRowActions","displayName"],"sources":["../../../src/labs/DataComponents/RowActions.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2023-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 { Fragment, ReactElement, memo, useCallback } from \"react\";\nimport { MRT_Row, MRT_RowData } from \"material-react-table\";\nimport { useTranslation } from \"react-i18next\";\n\nimport {\n  ArrowBottomIcon,\n  ArrowDownIcon,\n  ArrowTopIcon,\n  ArrowUpIcon,\n} from \"../../icons.generated\";\nimport { Button } from \"../../Button\";\nimport { MenuItem } from \"../../MenuItem\";\nimport { DataTableProps } from \"./DataTable\";\nimport { MenuButtonProps } from \"../../MenuButton\";\n\nexport type RowActionsProps = {\n  isRowReorderingDisabled?: boolean;\n  row: MRT_Row<MRT_RowData> | MRT_RowData;\n  rowActionButtons?: (\n    row: MRT_RowData,\n  ) => ReactElement<typeof Button> | ReactElement<typeof Fragment>;\n  rowActionMenuItems?: (row: MRT_RowData) => MenuButtonProps[\"children\"];\n  rowIndex: number;\n  totalRows?: DataTableProps[\"totalRows\"];\n  updateRowOrder?: ({\n    newRowIndex,\n    rowId,\n  }: {\n    newRowIndex: number;\n    rowId: string;\n  }) => void;\n};\n\nconst RowActions = ({\n  isRowReorderingDisabled,\n  row,\n  rowActionMenuItems,\n  rowIndex,\n  totalRows,\n  updateRowOrder,\n}: RowActionsProps) => {\n  const { t } = useTranslation();\n\n  const handleToFrontClick = useCallback(() => {\n    updateRowOrder && updateRowOrder({ rowId: row.id, newRowIndex: 0 });\n  }, [row.id, updateRowOrder]);\n\n  const handleForwardClick = useCallback(() => {\n    updateRowOrder &&\n      updateRowOrder({ rowId: row.id, newRowIndex: Math.max(0, rowIndex - 1) });\n  }, [row.id, rowIndex, updateRowOrder]);\n\n  const handleBackwardClick = useCallback(() => {\n    updateRowOrder &&\n      updateRowOrder({ rowId: row.id, newRowIndex: rowIndex + 1 });\n  }, [row.id, rowIndex, updateRowOrder]);\n\n  const handleToBackClick = useCallback(() => {\n    updateRowOrder &&\n      updateRowOrder({\n        rowId: row.id,\n        newRowIndex: totalRows ? totalRows - 1 : rowIndex,\n      });\n  }, [row.id, rowIndex, totalRows, updateRowOrder]);\n\n  return (\n    <>\n      {rowActionMenuItems && rowActionMenuItems(row)}\n      {rowActionMenuItems && updateRowOrder && <hr />}\n      {updateRowOrder && (\n        <>\n          <MenuItem\n            isDisabled={rowIndex <= 0 || isRowReorderingDisabled}\n            onClick={handleToFrontClick}\n          >\n            <ArrowTopIcon /> {t(\"table.reorder.tofront\")}\n          </MenuItem>\n          <MenuItem\n            isDisabled={rowIndex <= 0 || isRowReorderingDisabled}\n            onClick={handleForwardClick}\n          >\n            <ArrowUpIcon /> {t(\"table.reorder.forward\")}\n          </MenuItem>\n          <MenuItem\n            isDisabled={\n              (totalRows ? rowIndex >= totalRows - 1 : false) ||\n              isRowReorderingDisabled\n            }\n            onClick={handleBackwardClick}\n          >\n            <ArrowDownIcon /> {t(\"table.reorder.backward\")}\n          </MenuItem>\n          {totalRows && (\n            <MenuItem\n              isDisabled={rowIndex >= totalRows - 1 || isRowReorderingDisabled}\n              onClick={handleToBackClick}\n            >\n              <ArrowBottomIcon /> {t(\"table.reorder.toback\")}\n            </MenuItem>\n          )}\n        </>\n      )}\n    </>\n  );\n};\n\nconst MemoizedRowActions = memo(RowActions);\nMemoizedRowActions.displayName = \"RowActions\";\n\nexport { MemoizedRowActions as RowActions };\n"],"mappings":"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"}

package/dist/labs/DataComponents/StackCard.js

@@ -0,0 +1,163 @@
+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 } from "../../ButtonContext.js";
+import { useOdysseyDesignTokens } from "../../OdysseyDesignTokensContext.js";
+import { Heading5, Paragraph, Support } from "../../Typography.js";
+import { MenuButton } from "../../MenuButton.js";
+import { ChevronDownIcon, ChevronUpIcon, MoreIcon } from "../../icons.generated/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export const CARD_IMAGE_HEIGHT = "64px";
+const AccessoryContainer = styled("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens"
+})(({
+  odysseyDesignTokens
+}) => ({
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  gap: odysseyDesignTokens.Spacing2
+}));
+const ImageContainer = styled("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "hasMenuButtonChildren"
+})(({
+  odysseyDesignTokens,
+  hasMenuButtonChildren
+}) => ({
+  display: "flex",
+  alignItems: "flex-start",
+  maxHeight: `${CARD_IMAGE_HEIGHT}`,
+  marginBlockEnd: odysseyDesignTokens.Spacing5,
+  paddingRight: hasMenuButtonChildren ? odysseyDesignTokens.Spacing5 : 0
+}));
+const MenuButtonContainer = styled("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens"
+})(({
+  odysseyDesignTokens
+}) => ({
+  position: "absolute",
+  right: odysseyDesignTokens.Spacing3,
+  top: odysseyDesignTokens.Spacing3
+}));
+const CardContentContainer = styled("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens"
+})(({
+  odysseyDesignTokens
+}) => ({
+  display: "flex",
+  gap: odysseyDesignTokens.Spacing3
+}));
+const CardChildrenContainer = styled("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens"
+})(({
+  odysseyDesignTokens
+}) => ({
+  ["div + &"]: {
+    marginBlockStart: odysseyDesignTokens.Spacing3
+  }
+}));
+const buttonProviderValue = {
+  isFullWidth: true
+};
+const StackCard = ({
+  Accessory: AccessoryProp,
+  button,
+  children,
+  description,
+  detailPanel,
+  image,
+  menuButtonChildren,
+  onClick,
+  overline,
+  title
+}) => {
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+  const {
+    t
+  } = useTranslation();
+  const [isDetailPanelOpen, setIsDetailPanelOpen] = useState(false);
+  const Accessory = useMemo(() => _jsxs(AccessoryContainer, {
+    odysseyDesignTokens: odysseyDesignTokens,
+    children: [AccessoryProp, detailPanel && _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")
+      })
+    })]
+  }), [AccessoryProp, detailPanel, isDetailPanelOpen, odysseyDesignTokens, t]);
+  const cardContent = useMemo(() => _jsxs(CardContentContainer, {
+    odysseyDesignTokens: odysseyDesignTokens,
+    children: [(AccessoryProp || detailPanel) && _jsx(Box, {
+      children: Accessory
+    }), _jsxs(Box, {
+      children: [image && _jsx(ImageContainer, {
+        odysseyDesignTokens: odysseyDesignTokens,
+        hasMenuButtonChildren: Boolean(menuButtonChildren),
+        children: image
+      }), 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
+      }), detailPanel && isDetailPanelOpen && _jsx(CardChildrenContainer, {
+        odysseyDesignTokens: odysseyDesignTokens,
+        children: detailPanel
+      })]
+    })]
+  }), [odysseyDesignTokens, AccessoryProp, detailPanel, Accessory, image, menuButtonChildren, overline, title, description, button, children, isDetailPanelOpen]);
+  return _jsxs(_Card, {
+    className: `${onClick ? "isClickable" : ""} ${Accessory ? "hasAccessory" : ""}`,
+    children: [onClick ? _jsx(_CardActionArea, {
+      onClick: onClick,
+      children: cardContent
+    }) : cardContent, menuButtonChildren && _jsx(MenuButtonContainer, {
+      odysseyDesignTokens: odysseyDesignTokens,
+      children: _jsx(MenuButton, {
+        endIcon: _jsx(MoreIcon, {}),
+        ariaLabel: t("table.moreactions.arialabel"),
+        buttonVariant: "floating",
+        menuAlignment: "right",
+        size: "small",
+        tooltipText: t("table.actions"),
+        children: menuButtonChildren
+      })
+    })]
+  });
+};
+const MemoizedStackCard = memo(StackCard);
+MemoizedStackCard.displayName = "StackCard";
+export { MemoizedStackCard as StackCard };
+//# sourceMappingURL=StackCard.js.map

package/dist/labs/DataComponents/StackCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StackCard.js","names":["memo","useMemo","useState","styled","useTranslation","Box","ButtonContext","useOdysseyDesignTokens","Heading5","Paragraph","Support","MenuButton","ChevronDownIcon","ChevronUpIcon","MoreIcon","jsx","_jsx","jsxs","_jsxs","CARD_IMAGE_HEIGHT","AccessoryContainer","shouldForwardProp","prop","odysseyDesignTokens","display","flexDirection","alignItems","gap","Spacing2","ImageContainer","hasMenuButtonChildren","maxHeight","marginBlockEnd","Spacing5","paddingRight","MenuButtonContainer","position","right","Spacing3","top","CardContentContainer","CardChildrenContainer","marginBlockStart","buttonProviderValue","isFullWidth","StackCard","Accessory","AccessoryProp","button","children","description","detailPanel","image","menuButtonChildren","onClick","overline","title","t","isDetailPanelOpen","setIsDetailPanelOpen","_Tooltip","_IconButton","cardContent","Boolean","component","color","_CardActions","Provider","value","_Card","className","_CardActionArea","endIcon","ariaLabel","buttonVariant","menuAlignment","size","tooltipText","MemoizedStackCard","displayName"],"sources":["../../../src/labs/DataComponents/StackCard.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\";\nimport { Button } from \"../../Button\";\nimport { ButtonContext } from \"../../ButtonContext\";\nimport {\n  DesignTokens,\n  useOdysseyDesignTokens,\n} from \"../../OdysseyDesignTokensContext\";\nimport { Heading5, Paragraph, Support } from \"../../Typography\";\nimport { MenuButton, MenuButtonProps } from \"../../MenuButton\";\nimport {\n  ChevronDownIcon,\n  ChevronUpIcon,\n  MoreIcon,\n} from \"../../icons.generated\";\n\nexport const CARD_IMAGE_HEIGHT = \"64px\";\n\nexport type StackCardProps = {\n  children?: ReactNode;\n  description?: string;\n  detailPanel?: ReactNode;\n  image?: ReactElement;\n  overline?: string;\n  title?: string;\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\nconst AccessoryContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n}>(({ odysseyDesignTokens }) => ({\n  display: \"flex\",\n  flexDirection: \"column\",\n  alignItems: \"center\",\n  gap: odysseyDesignTokens.Spacing2,\n}));\n\nconst ImageContainer = styled(\"div\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" && prop !== \"hasMenuButtonChildren\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n  hasMenuButtonChildren: boolean;\n}>(({ odysseyDesignTokens, hasMenuButtonChildren }) => ({\n  display: \"flex\",\n  alignItems: \"flex-start\",\n  maxHeight: `${CARD_IMAGE_HEIGHT}`,\n  marginBlockEnd: odysseyDesignTokens.Spacing5,\n  paddingRight: hasMenuButtonChildren ? odysseyDesignTokens.Spacing5 : 0,\n}));\n\nconst MenuButtonContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{ odysseyDesignTokens: DesignTokens }>(({ odysseyDesignTokens }) => ({\n  position: \"absolute\",\n  right: odysseyDesignTokens.Spacing3,\n  top: odysseyDesignTokens.Spacing3,\n}));\n\nconst CardContentContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{ odysseyDesignTokens: DesignTokens }>(({ odysseyDesignTokens }) => ({\n  display: \"flex\",\n  gap: odysseyDesignTokens.Spacing3,\n}));\n\nconst CardChildrenContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{ odysseyDesignTokens: DesignTokens }>(({ odysseyDesignTokens }) => ({\n  [\"div + &\"]: {\n    marginBlockStart: odysseyDesignTokens.Spacing3,\n  },\n}));\n\nconst buttonProviderValue = { isFullWidth: true };\n\nconst StackCard = ({\n  Accessory: AccessoryProp,\n  button,\n  children,\n  description,\n  detailPanel,\n  image,\n  menuButtonChildren,\n  onClick,\n  overline,\n  title,\n}: StackCardProps) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n  const { t } = useTranslation();\n\n  const [isDetailPanelOpen, setIsDetailPanelOpen] = useState<boolean>(false);\n\n  const Accessory = useMemo(\n    () => (\n      <AccessoryContainer odysseyDesignTokens={odysseyDesignTokens}>\n        {AccessoryProp}\n        {detailPanel && (\n          <MuiTooltip\n            title={\n              isDetailPanelOpen\n                ? t(\"table.rowexpansion.collapse\")\n                : t(\"table.rowexpansion.expand\")\n            }\n          >\n            <MuiIconButton\n              children={\n                isDetailPanelOpen ? <ChevronUpIcon /> : <ChevronDownIcon />\n              }\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      </AccessoryContainer>\n    ),\n    [AccessoryProp, detailPanel, isDetailPanelOpen, odysseyDesignTokens, t],\n  );\n\n  const cardContent = useMemo(\n    () => (\n      <CardContentContainer odysseyDesignTokens={odysseyDesignTokens}>\n        {(AccessoryProp || detailPanel) && <Box>{Accessory}</Box>}\n        <Box>\n          {image && (\n            <ImageContainer\n              odysseyDesignTokens={odysseyDesignTokens}\n              hasMenuButtonChildren={Boolean(menuButtonChildren)}\n            >\n              {image}\n            </ImageContainer>\n          )}\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          {detailPanel && isDetailPanelOpen && (\n            <CardChildrenContainer odysseyDesignTokens={odysseyDesignTokens}>\n              {detailPanel}\n            </CardChildrenContainer>\n          )}\n        </Box>\n      </CardContentContainer>\n    ),\n    [\n      odysseyDesignTokens,\n      AccessoryProp,\n      detailPanel,\n      Accessory,\n      image,\n      menuButtonChildren,\n      overline,\n      title,\n      description,\n      button,\n      children,\n      isDetailPanelOpen,\n    ],\n  );\n\n  return (\n    <MuiCard\n      className={`${onClick ? \"isClickable\" : \"\"} ${Accessory ? \"hasAccessory\" : \"\"}`}\n    >\n      {onClick ? (\n        <MuiCardActionArea onClick={onClick}>{cardContent}</MuiCardActionArea>\n      ) : (\n        cardContent\n      )}\n\n      {menuButtonChildren && (\n        <MenuButtonContainer odysseyDesignTokens={odysseyDesignTokens}>\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 MemoizedStackCard = memo(StackCard);\nMemoizedStackCard.displayName = \"StackCard\";\n\nexport { MemoizedStackCard as StackCard };\n"],"mappings":"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"}

package/dist/labs/DataComponents/StackContent.js

@@ -0,0 +1,143 @@
+import _Checkbox from "@mui/material/Checkbox";
+/*!
+ * 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 } from "react";
+import styled from "@emotion/styled";
+import { Box } from "../../Box.js";
+import { CircularProgress } from "../../CircularProgress.js";
+import { useOdysseyDesignTokens } from "../../OdysseyDesignTokensContext.js";
+import { RowActions } from "./RowActions.js";
+import { StackCard } from "./StackCard.js";
+import { DetailPanel } from "./DetailPanel.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+const StackContainer = styled("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "currentLayout" && prop !== "maxGridColumns"
+})(({
+  odysseyDesignTokens,
+  currentLayout,
+  maxGridColumns
+}) => ({
+  display: currentLayout === "list" ? "flex" : "grid",
+  flexDirection: "column",
+  gap: odysseyDesignTokens.Spacing5,
+  ...(currentLayout === "grid" && {
+    [`@media (max-width: 720px)`]: {
+      gridTemplateColumns: "repeat(1, 1fr)"
+    },
+    [`@media (min-width: 720px) and (max-width: 960px)`]: {
+      gridTemplateColumns: "repeat(2, 1fr)"
+    },
+    [`@media (min-width: 960px)`]: {
+      gridTemplateColumns: `repeat(${maxGridColumns}, 1fr)`
+    }
+  })
+}));
+const LoadingContainer = styled("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens"
+})(({
+  odysseyDesignTokens
+}) => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  width: "100%",
+  paddingBlock: odysseyDesignTokens.Spacing5
+}));
+const CheckboxContainer = styled("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens"
+})(({
+  odysseyDesignTokens
+}) => ({
+  marginBlockStart: `-${odysseyDesignTokens.Spacing1}`
+}));
+const StackContent = ({
+  currentLayout,
+  data,
+  emptyState,
+  hasRowReordering,
+  hasRowSelection,
+  isEmpty,
+  isLoading,
+  isNoResults,
+  isRowReorderingDisabled,
+  onReorderRows,
+  pagination,
+  rowReorderingUtilities,
+  rowSelection,
+  setRowSelection,
+  stackOptions,
+  totalRows
+}) => {
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+  const handleRowSelectionChange = useCallback(row => {
+    setRowSelection(rowSelection => Object.fromEntries(row.id in rowSelection ? Object.entries(rowSelection).filter(([key]) => key !== row.id) : Object.entries(rowSelection).concat([[row.id, true]])));
+  }, [setRowSelection]);
+  const {
+    updateRowOrder
+  } = rowReorderingUtilities;
+  return _jsx(StackContainer, {
+    odysseyDesignTokens: odysseyDesignTokens,
+    currentLayout: currentLayout,
+    maxGridColumns: stackOptions.maxGridColumns ?? 3,
+    children: isLoading ? _jsx(LoadingContainer, {
+      odysseyDesignTokens: odysseyDesignTokens,
+      children: _jsx(CircularProgress, {})
+    }) : _jsx(_Fragment, {
+      children: !data || data.length === 0 || isEmpty || isNoResults ? _jsx(Box, {
+        children: emptyState
+      }) : _jsx(_Fragment, {
+        children: data.map((row, index) => {
+          const {
+            overline,
+            title,
+            description,
+            image,
+            children
+          } = stackOptions.cardProps(row);
+          const currentIndex = index + (pagination.pageIndex - 1) * pagination.pageSize;
+          return _jsx(StackCard, {
+            Accessory: hasRowSelection && _jsx(CheckboxContainer, {
+              odysseyDesignTokens: odysseyDesignTokens,
+              children: _jsx(_Checkbox, {
+                checked: rowSelection[row.id] ?? false,
+                onChange: () => handleRowSelectionChange(row)
+              })
+            }),
+            children: children,
+            description: description,
+            detailPanel: stackOptions.renderDetailPanel ? _jsx(DetailPanel, {
+              row: row,
+              renderDetailPanel: stackOptions.renderDetailPanel
+            }) : undefined,
+            image: image,
+            menuButtonChildren: (stackOptions.rowActionMenuItems || hasRowReordering) && _jsx(RowActions, {
+              row: row,
+              rowIndex: currentIndex,
+              rowActionMenuItems: stackOptions.rowActionMenuItems,
+              isRowReorderingDisabled: isRowReorderingDisabled,
+              totalRows: totalRows,
+              updateRowOrder: hasRowReordering && onReorderRows ? updateRowOrder : undefined
+            }),
+            overline: overline,
+            title: title
+          }, row.id);
+        })
+      })
+    })
+  });
+};
+const MemoizedStackContent = memo(StackContent);
+MemoizedStackContent.displayName = "StackContent";
+export { MemoizedStackContent as StackContent };
+//# sourceMappingURL=StackContent.js.map

package/dist/labs/DataComponents/StackContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StackContent.js","names":["memo","useCallback","styled","Box","CircularProgress","useOdysseyDesignTokens","RowActions","StackCard","DetailPanel","jsx","_jsx","Fragment","_Fragment","StackContainer","shouldForwardProp","prop","odysseyDesignTokens","currentLayout","maxGridColumns","display","flexDirection","gap","Spacing5","gridTemplateColumns","LoadingContainer","alignItems","justifyContent","width","paddingBlock","CheckboxContainer","marginBlockStart","Spacing1","StackContent","data","emptyState","hasRowReordering","hasRowSelection","isEmpty","isLoading","isNoResults","isRowReorderingDisabled","onReorderRows","pagination","rowReorderingUtilities","rowSelection","setRowSelection","stackOptions","totalRows","handleRowSelectionChange","row","Object","fromEntries","id","entries","filter","key","concat","updateRowOrder","children","length","map","index","overline","title","description","image","cardProps","currentIndex","pageIndex","pageSize","Accessory","_Checkbox","checked","onChange","detailPanel","renderDetailPanel","undefined","menuButtonChildren","rowActionMenuItems","rowIndex","MemoizedStackContent","displayName"],"sources":["../../../src/labs/DataComponents/StackContent.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 { Dispatch, ReactNode, SetStateAction, memo, useCallback } from \"react\";\nimport styled, { CSSObject } from \"@emotion/styled\";\nimport {\n  MRT_Row,\n  MRT_RowData,\n  MRT_RowSelectionState,\n  MRT_TableInstance,\n} from \"material-react-table\";\n\nimport { Box } from \"../../Box\";\nimport { Checkbox as MuiCheckbox } from \"@mui/material\";\nimport { CircularProgress } from \"../../CircularProgress\";\nimport {\n  DesignTokens,\n  useOdysseyDesignTokens,\n} from \"../../OdysseyDesignTokensContext\";\nimport { RowActions } from \"./RowActions\";\nimport { StackCard } from \"./StackCard\";\nimport { StackLayout, StackProps, UniversalProps } from \"./componentTypes\";\nimport { DetailPanel } from \"./DetailPanel\";\n\nexport type StackContentProps = {\n  currentLayout: StackLayout;\n  data: MRT_RowData[];\n  draggingRow?: MRT_Row<MRT_RowData> | null;\n  emptyState: ReactNode;\n  getRowId: UniversalProps[\"getRowId\"];\n  hasRowReordering: UniversalProps[\"hasRowReordering\"];\n  hasRowSelection: UniversalProps[\"hasRowSelection\"];\n  isEmpty?: boolean;\n  isLoading: boolean;\n  isNoResults?: boolean;\n  isRowReorderingDisabled?: boolean;\n  onReorderRows: UniversalProps[\"onReorderRows\"];\n  pagination: { pageIndex: number; pageSize: number };\n  rowReorderingUtilities: {\n    dragHandleStyles: CSSObject;\n    dragHandleText: {\n      title: string;\n      \"aria-label\": string;\n    };\n    draggableTableBodyRowClassName: ({\n      currentRowId,\n      draggingRowId,\n      hoveredRowId,\n    }: {\n      currentRowId: string;\n      draggingRowId?: string;\n      hoveredRowId?: string;\n    }) => string | undefined;\n    handleDragHandleKeyDown: ({\n      table,\n      row,\n      event,\n    }: {\n      table: MRT_TableInstance<MRT_RowData>;\n      row: MRT_Row<MRT_RowData>;\n      event: React.KeyboardEvent<HTMLButtonElement>;\n    }) => void;\n    handleDragHandleOnDragCapture: (\n      table: MRT_TableInstance<MRT_RowData>,\n    ) => void;\n    handleDragHandleOnDragEnd: (table: MRT_TableInstance<MRT_RowData>) => void;\n    resetDraggingAndHoveredRow: (table: MRT_TableInstance<MRT_RowData>) => void;\n    updateRowOrder: ({\n      rowId,\n      newRowIndex,\n    }: {\n      rowId: string;\n      newRowIndex: number;\n    }) => void;\n  };\n  rowSelection: MRT_RowSelectionState;\n  setRowSelection: Dispatch<SetStateAction<MRT_RowSelectionState>>;\n  stackOptions: StackProps;\n  totalRows: UniversalProps[\"totalRows\"];\n};\n\nconst StackContainer = styled(\"div\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" &&\n    prop !== \"currentLayout\" &&\n    prop !== \"maxGridColumns\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n  currentLayout: StackLayout;\n  maxGridColumns: number;\n}>(({ odysseyDesignTokens, currentLayout, maxGridColumns }) => ({\n  display: currentLayout === \"list\" ? \"flex\" : \"grid\",\n  flexDirection: \"column\",\n  gap: odysseyDesignTokens.Spacing5,\n\n  ...(currentLayout === \"grid\" && {\n    [`@media (max-width: 720px)`]: {\n      gridTemplateColumns: \"repeat(1, 1fr)\",\n    },\n    [`@media (min-width: 720px) and (max-width: 960px)`]: {\n      gridTemplateColumns: \"repeat(2, 1fr)\",\n    },\n    [`@media (min-width: 960px)`]: {\n      gridTemplateColumns: `repeat(${maxGridColumns}, 1fr)`,\n    },\n  }),\n}));\n\nconst LoadingContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n}>(({ odysseyDesignTokens }) => ({\n  display: \"flex\",\n  alignItems: \"center\",\n  justifyContent: \"center\",\n  width: \"100%\",\n  paddingBlock: odysseyDesignTokens.Spacing5,\n}));\n\nconst CheckboxContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n}>(({ odysseyDesignTokens }) => ({\n  marginBlockStart: `-${odysseyDesignTokens.Spacing1}`,\n}));\n\nconst StackContent = ({\n  currentLayout,\n  data,\n  emptyState,\n  hasRowReordering,\n  hasRowSelection,\n  isEmpty,\n  isLoading,\n  isNoResults,\n  isRowReorderingDisabled,\n  onReorderRows,\n  pagination,\n  rowReorderingUtilities,\n  rowSelection,\n  setRowSelection,\n  stackOptions,\n  totalRows,\n}: StackContentProps) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  const handleRowSelectionChange = useCallback(\n    (row: MRT_RowData) => {\n      setRowSelection((rowSelection) =>\n        Object.fromEntries(\n          row.id in rowSelection\n            ? Object.entries(rowSelection).filter(([key]) => key !== row.id)\n            : Object.entries(rowSelection).concat([[row.id, true]]),\n        ),\n      );\n    },\n    [setRowSelection],\n  );\n\n  const { updateRowOrder } = rowReorderingUtilities;\n\n  return (\n    <StackContainer\n      odysseyDesignTokens={odysseyDesignTokens}\n      currentLayout={currentLayout}\n      maxGridColumns={stackOptions.maxGridColumns ?? 3}\n    >\n      {isLoading ? (\n        <LoadingContainer odysseyDesignTokens={odysseyDesignTokens}>\n          <CircularProgress />\n        </LoadingContainer>\n      ) : (\n        <>\n          {!data || data.length === 0 || isEmpty || isNoResults ? (\n            <Box>{emptyState}</Box>\n          ) : (\n            <>\n              {data.map((row: MRT_RowData, index: number) => {\n                const { overline, title, description, image, children } =\n                  stackOptions.cardProps(row);\n                const currentIndex =\n                  index + (pagination.pageIndex - 1) * pagination.pageSize;\n\n                return (\n                  <StackCard\n                    Accessory={\n                      hasRowSelection && (\n                        // Negative margin to counteract the checkbox's inbuilt spacing\n                        <CheckboxContainer\n                          odysseyDesignTokens={odysseyDesignTokens}\n                        >\n                          <MuiCheckbox\n                            checked={rowSelection[row.id] ?? false}\n                            onChange={() => handleRowSelectionChange(row)}\n                          />\n                        </CheckboxContainer>\n                      )\n                    }\n                    children={children}\n                    description={description}\n                    detailPanel={\n                      stackOptions.renderDetailPanel ? (\n                        <DetailPanel\n                          row={row}\n                          renderDetailPanel={stackOptions.renderDetailPanel}\n                        />\n                      ) : undefined\n                    }\n                    image={image}\n                    key={row.id}\n                    menuButtonChildren={\n                      (stackOptions.rowActionMenuItems || hasRowReordering) && (\n                        <RowActions\n                          row={row}\n                          rowIndex={currentIndex}\n                          rowActionMenuItems={stackOptions.rowActionMenuItems}\n                          isRowReorderingDisabled={isRowReorderingDisabled}\n                          totalRows={totalRows}\n                          updateRowOrder={\n                            hasRowReordering && onReorderRows\n                              ? updateRowOrder\n                              : undefined\n                          }\n                        />\n                      )\n                    }\n                    overline={overline}\n                    title={title}\n                  />\n                );\n              })}\n            </>\n          )}\n        </>\n      )}\n    </StackContainer>\n  );\n};\n\nconst MemoizedStackContent = memo(StackContent);\nMemoizedStackContent.displayName = \"StackContent\";\n\nexport { MemoizedStackContent as StackContent };\n"],"mappings":"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"}