@okta/odyssey-contribution-tooling 1.47.0

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

@@ -0,0 +1,75 @@
+/*!
+ * 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 styled from "@emotion/styled";
+import { memo, useCallback } from "react";
+import { Box } from "../../Box.js";
+import { Button, MenuButton } from "../../Buttons/index.js";
+import { useTranslation } from "../../i18n.generated/i18n.js";
+import { ChevronDownIcon } from "../../icons.generated/index.js";
+import { useOdysseyDesignTokens } from "../../OdysseyDesignTokensContext.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const BulkActionsContainer = styled("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens"
+})(({
+  odysseyDesignTokens
+}) => ({
+  display: "flex",
+  gap: odysseyDesignTokens.Spacing2
+}));
+const BulkActionsMenu = ({
+  data,
+  menuItems,
+  rowSelection,
+  setRowSelection
+}) => {
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+  const {
+    t
+  } = useTranslation();
+  const selectedRowCount = Object.values(rowSelection).filter(Boolean).length;
+  const handleSelectAll = useCallback(() => {
+    const rows = Object.fromEntries(data.map(row => [row.id, true]));
+    setRowSelection(rows);
+  }, [data, setRowSelection]);
+  const handleSelectNone = useCallback(() => {
+    setRowSelection({});
+  }, [setRowSelection]);
+  return _jsxs(BulkActionsContainer, {
+    odysseyDesignTokens: odysseyDesignTokens,
+    children: [selectedRowCount > 0 && _jsx(MenuButton, {
+      ariaLabel: t("table.actions.arialabel"),
+      buttonLabel: t("table.actions.selectsome", {
+        selectedRowCount
+      }),
+      buttonVariant: "primary",
+      endIcon: _jsx(ChevronDownIcon, {}),
+      children: menuItems?.(rowSelection)
+    }), _jsxs(Box, {
+      children: [_jsx(Button, {
+        isDisabled: selectedRowCount === data.length,
+        label: t("table.actions.selectall"),
+        onClick: handleSelectAll,
+        variant: "secondary"
+      }), _jsx(Button, {
+        isDisabled: selectedRowCount === 0,
+        label: t("table.actions.selectnone"),
+        onClick: handleSelectNone,
+        variant: "secondary"
+      })]
+    })]
+  });
+};
+const MemoizedBulkActionsMenu = memo(BulkActionsMenu);
+MemoizedBulkActionsMenu.displayName = "BulkActionsMenu";
+export { MemoizedBulkActionsMenu as BulkActionsMenu };
+//# sourceMappingURL=BulkActionsMenu.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BulkActionsMenu.js","names":["styled","memo","useCallback","Box","Button","MenuButton","useTranslation","ChevronDownIcon","useOdysseyDesignTokens","jsx","_jsx","jsxs","_jsxs","BulkActionsContainer","shouldForwardProp","prop","odysseyDesignTokens","display","gap","Spacing2","BulkActionsMenu","data","menuItems","rowSelection","setRowSelection","t","selectedRowCount","Object","values","filter","Boolean","length","handleSelectAll","rows","fromEntries","map","row","id","handleSelectNone","children","ariaLabel","buttonLabel","buttonVariant","endIcon","isDisabled","label","onClick","variant","MemoizedBulkActionsMenu","displayName"],"sources":["../../../../src/labs/DataView/BulkActionsMenu.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 styled from \"@emotion/styled\";\nimport { MRT_RowData, MRT_RowSelectionState } from \"material-react-table\";\nimport { Dispatch, memo, SetStateAction, useCallback } from \"react\";\n\nimport { Box } from \"../../Box.js\";\nimport { Button, MenuButton } from \"../../Buttons/index.js\";\nimport { useTranslation } from \"../../i18n.generated/i18n.js\";\nimport { ChevronDownIcon } from \"../../icons.generated/index.js\";\nimport {\n  DesignTokens,\n  useOdysseyDesignTokens,\n} from \"../../OdysseyDesignTokensContext.js\";\nimport { UniversalProps } from \"./componentTypes.js\";\n\nexport type BulkActionsMenuProps<TData extends MRT_RowData> = {\n  data: TData[];\n  menuItems: UniversalProps<TData>[\"bulkActionMenuItems\"];\n  rowSelection: MRT_RowSelectionState;\n  setRowSelection: Dispatch<SetStateAction<MRT_RowSelectionState>>;\n};\n\nconst BulkActionsContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n}>(({ odysseyDesignTokens }) => ({\n  display: \"flex\",\n  gap: odysseyDesignTokens.Spacing2,\n}));\n\nconst BulkActionsMenu = <TData extends MRT_RowData>({\n  data,\n  menuItems,\n  rowSelection,\n  setRowSelection,\n}: BulkActionsMenuProps<TData>) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n  const { t } = useTranslation();\n\n  const selectedRowCount = Object.values(rowSelection).filter(Boolean).length;\n\n  const handleSelectAll = useCallback(() => {\n    const rows = Object.fromEntries(\n      data.map((row) => [row.id as string, true]),\n    );\n    setRowSelection(rows);\n  }, [data, setRowSelection]);\n\n  const handleSelectNone = useCallback(() => {\n    setRowSelection({});\n  }, [setRowSelection]);\n\n  return (\n    <BulkActionsContainer odysseyDesignTokens={odysseyDesignTokens}>\n      {selectedRowCount > 0 && (\n        <MenuButton\n          ariaLabel={t(\"table.actions.arialabel\")}\n          buttonLabel={t(\"table.actions.selectsome\", { selectedRowCount })}\n          buttonVariant=\"primary\"\n          endIcon={<ChevronDownIcon />}\n        >\n          {menuItems?.(rowSelection)}\n        </MenuButton>\n      )}\n      <Box>\n        <Button\n          isDisabled={selectedRowCount === data.length} // Disabled if all are selected\n          label={t(\"table.actions.selectall\")}\n          onClick={handleSelectAll}\n          variant=\"secondary\"\n        />\n        <Button\n          isDisabled={selectedRowCount === 0} // Disabled if none are selected\n          label={t(\"table.actions.selectnone\")}\n          onClick={handleSelectNone}\n          variant=\"secondary\"\n        />\n      </Box>\n    </BulkActionsContainer>\n  );\n};\n\nconst MemoizedBulkActionsMenu = memo(BulkActionsMenu);\nMemoizedBulkActionsMenu.displayName = \"BulkActionsMenu\";\n\nexport { MemoizedBulkActionsMenu as BulkActionsMenu };\n"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,160 @@
+/*!
+ * 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 styled from "@emotion/styled";
+import { memo, useCallback, useMemo } from "react";
+import { Box } from "../../Box.js";
+import { CircularProgress } from "../../CircularProgress.js";
+import { useOdysseyDesignTokens } from "../../OdysseyDesignTokensContext.js";
+import { DataCard } from "./DataCard.js";
+import { RowActions } from "./RowActions.js";
+import { jsx as _jsx, 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",
+  columnGap: 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 RowDataCard = ({
+  cardLayoutOptions,
+  currentIndex,
+  handleRowSelectionChange,
+  hasRowReordering,
+  hasRowSelection,
+  isRowReorderingDisabled,
+  onReorderRows,
+  row,
+  rowReorderingUtilities,
+  rowSelection,
+  totalRows
+}) => {
+  const {
+    overline,
+    title,
+    description,
+    image,
+    children,
+    variant
+  } = cardLayoutOptions.itemProps(row);
+  const onSelectionChange = useCallback(() => handleRowSelectionChange(row), [handleRowSelectionChange, row]);
+  const detailPanel = useMemo(() => cardLayoutOptions.renderDetailPanel?.({
+    row
+  }), [cardLayoutOptions, row]);
+  const menuButtonChildren = useMemo(() => cardLayoutOptions.rowActionMenuItems || hasRowReordering ? _jsx(RowActions, {
+    isRowReorderingDisabled: isRowReorderingDisabled,
+    row: row,
+    rowActionMenuItems: cardLayoutOptions.rowActionMenuItems,
+    rowIndex: currentIndex,
+    totalRows: totalRows,
+    updateRowOrder: hasRowReordering && onReorderRows ? rowReorderingUtilities.updateRowOrder : undefined
+  }) : null, [cardLayoutOptions.rowActionMenuItems, currentIndex, hasRowReordering, isRowReorderingDisabled, onReorderRows, row, rowReorderingUtilities, totalRows]);
+  return _jsx(DataCard, {
+    children: children,
+    description: description,
+    detailPanel: detailPanel,
+    hasSelection: hasRowSelection,
+    image: image,
+    isSelected: rowSelection[row.id] ?? false,
+    menuButtonChildren: menuButtonChildren,
+    onSelectionChange: onSelectionChange,
+    overline: overline,
+    title: title,
+    variant: variant
+  }, row.id);
+};
+const MemoizedRowDataCard = memo(RowDataCard);
+MemoizedRowDataCard.displayName = "RowDataCard";
+const CardLayoutContent = ({
+  currentLayout,
+  data,
+  emptyState,
+  hasRowReordering,
+  hasRowSelection,
+  isEmpty,
+  isLoading,
+  isNoResults,
+  isRowReorderingDisabled,
+  onReorderRows,
+  pagination,
+  rowReorderingUtilities,
+  rowSelection,
+  setRowSelection,
+  cardLayoutOptions,
+  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]);
+  return _jsx(Box, {
+    children: isLoading ? _jsx(LoadingContainer, {
+      odysseyDesignTokens: odysseyDesignTokens,
+      children: _jsx(CircularProgress, {})
+    }) : _jsx(_Fragment, {
+      children: !data || data.length === 0 || isEmpty || isNoResults ? _jsx(Box, {
+        children: emptyState
+      }) : _jsx(StackContainer, {
+        currentLayout: currentLayout,
+        maxGridColumns: cardLayoutOptions.maxGridColumns ?? 3,
+        odysseyDesignTokens: odysseyDesignTokens,
+        role: "list",
+        children: data.map((row, index) => {
+          const currentIndex = index + (pagination.pageIndex - 1) * pagination.pageSize;
+          return _jsx(MemoizedRowDataCard, {
+            cardLayoutOptions: cardLayoutOptions,
+            currentIndex: currentIndex,
+            handleRowSelectionChange: handleRowSelectionChange,
+            hasRowReordering: hasRowReordering,
+            hasRowSelection: hasRowSelection,
+            isRowReorderingDisabled: isRowReorderingDisabled,
+            onReorderRows: onReorderRows,
+            row: row,
+            rowReorderingUtilities: rowReorderingUtilities,
+            rowSelection: rowSelection,
+            totalRows: totalRows
+          }, row.id);
+        })
+      })
+    })
+  });
+};
+const MemoizedCardLayoutContent = memo(CardLayoutContent);
+MemoizedCardLayoutContent.displayName = "CardLayoutContent";
+export { MemoizedCardLayoutContent as CardLayoutContent };
+//# sourceMappingURL=CardLayoutContent.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CardLayoutContent.js","names":["styled","memo","useCallback","useMemo","Box","CircularProgress","useOdysseyDesignTokens","DataCard","RowActions","jsx","_jsx","Fragment","_Fragment","StackContainer","shouldForwardProp","prop","odysseyDesignTokens","currentLayout","maxGridColumns","display","flexDirection","columnGap","Spacing5","gridTemplateColumns","LoadingContainer","alignItems","justifyContent","width","paddingBlock","RowDataCard","cardLayoutOptions","currentIndex","handleRowSelectionChange","hasRowReordering","hasRowSelection","isRowReorderingDisabled","onReorderRows","row","rowReorderingUtilities","rowSelection","totalRows","overline","title","description","image","children","variant","itemProps","onSelectionChange","detailPanel","renderDetailPanel","menuButtonChildren","rowActionMenuItems","rowIndex","updateRowOrder","undefined","hasSelection","isSelected","id","MemoizedRowDataCard","displayName","CardLayoutContent","data","emptyState","isEmpty","isLoading","isNoResults","pagination","setRowSelection","Object","fromEntries","entries","filter","key","concat","length","role","map","index","pageIndex","pageSize","MemoizedCardLayoutContent"],"sources":["../../../../src/labs/DataView/CardLayoutContent.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 styled, { CSSObject } from \"@emotion/styled\";\nimport {\n  MRT_Row,\n  MRT_RowData,\n  MRT_RowSelectionState,\n  MRT_TableInstance,\n} from \"material-react-table\";\nimport {\n  Dispatch,\n  memo,\n  ReactNode,\n  SetStateAction,\n  useCallback,\n  useMemo,\n} from \"react\";\n\nimport { Box } from \"../../Box.js\";\nimport { CircularProgress } from \"../../CircularProgress.js\";\nimport {\n  DesignTokens,\n  useOdysseyDesignTokens,\n} from \"../../OdysseyDesignTokensContext.js\";\nimport {\n  CardLayout,\n  CardLayoutProps,\n  UniversalProps,\n} from \"./componentTypes.js\";\nimport { DataCard } from \"./DataCard.js\";\nimport { RowActions } from \"./RowActions.js\";\n\nexport type CardLayoutContentProps<TData extends MRT_RowData> = {\n  cardLayoutOptions: CardLayoutProps<TData>;\n  currentLayout: CardLayout;\n  data: TData[];\n  draggingRow?: MRT_Row<TData> | null;\n  emptyState: ReactNode;\n  getRowId: UniversalProps<TData>[\"getRowId\"];\n  hasRowReordering: UniversalProps<TData>[\"hasRowReordering\"];\n  hasRowSelection: UniversalProps<TData>[\"hasRowSelection\"];\n  isEmpty?: boolean;\n  isLoading: boolean;\n  isNoResults?: boolean;\n  isRowReorderingDisabled?: boolean;\n  onReorderRows: UniversalProps<TData>[\"onReorderRows\"];\n  pagination: { pageIndex: number; pageSize: number };\n  rowReorderingUtilities: {\n    draggableTableBodyRowClassName: ({\n      currentRowId,\n      draggingRowId,\n      hoveredRowId,\n    }: {\n      currentRowId: string;\n      draggingRowId?: string;\n      hoveredRowId?: string;\n    }) => string | undefined;\n    dragHandleStyles: CSSObject;\n    dragHandleText: {\n      \"aria-label\": string;\n      title: string;\n    };\n    handleDragHandleKeyDown: ({\n      table,\n      row,\n      event,\n    }: {\n      event: React.KeyboardEvent<HTMLButtonElement>;\n      row: MRT_Row<TData>;\n      table: MRT_TableInstance<TData>;\n    }) => void;\n    handleDragHandleOnDragCapture: (table: MRT_TableInstance<TData>) => void;\n    handleDragHandleOnDragEnd: (table: MRT_TableInstance<TData>) => void;\n    resetDraggingAndHoveredRow: (table: MRT_TableInstance<TData>) => void;\n    updateRowOrder: ({\n      rowId,\n      newRowIndex,\n    }: {\n      newRowIndex: number;\n      rowId: string;\n    }) => void;\n  };\n  rowSelection: MRT_RowSelectionState;\n  setRowSelection: Dispatch<SetStateAction<MRT_RowSelectionState>>;\n  totalRows: UniversalProps<TData>[\"totalRows\"];\n};\ntype CardLayoutContentComponent = (<TData extends MRT_RowData>(\n  props: CardLayoutContentProps<TData>,\n) => JSX.Element) & {\n  displayName?: string;\n};\ntype RowDataCardProps<TData extends MRT_RowData> = {\n  currentIndex: number;\n  handleRowSelectionChange: (row: TData) => void;\n  row: TData;\n} & Pick<\n  CardLayoutContentProps<TData>,\n  | \"cardLayoutOptions\"\n  | \"hasRowReordering\"\n  | \"hasRowSelection\"\n  | \"isRowReorderingDisabled\"\n  | \"onReorderRows\"\n  | \"rowReorderingUtilities\"\n  | \"rowSelection\"\n  | \"totalRows\"\n>;\ntype RowDataCardComponent = (<TData extends MRT_RowData>(\n  props: RowDataCardProps<TData>,\n) => JSX.Element) & {\n  displayName?: string;\n};\n\nconst StackContainer = styled(\"div\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" &&\n    prop !== \"currentLayout\" &&\n    prop !== \"maxGridColumns\",\n})<{\n  currentLayout: CardLayout;\n  maxGridColumns: number;\n  odysseyDesignTokens: DesignTokens;\n}>(({ odysseyDesignTokens, currentLayout, maxGridColumns }) => ({\n  display: currentLayout === \"list\" ? \"flex\" : \"grid\",\n  flexDirection: \"column\",\n  columnGap: 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 RowDataCard = <TData extends MRT_RowData>({\n  cardLayoutOptions,\n  currentIndex,\n  handleRowSelectionChange,\n  hasRowReordering,\n  hasRowSelection,\n  isRowReorderingDisabled,\n  onReorderRows,\n  row,\n  rowReorderingUtilities,\n  rowSelection,\n  totalRows,\n}: RowDataCardProps<TData>) => {\n  const { overline, title, description, image, children, variant } =\n    cardLayoutOptions.itemProps(row);\n\n  const onSelectionChange = useCallback(\n    () => handleRowSelectionChange(row),\n    [handleRowSelectionChange, row],\n  );\n\n  const detailPanel = useMemo(\n    () => cardLayoutOptions.renderDetailPanel?.({ row }),\n    [cardLayoutOptions, row],\n  );\n\n  const menuButtonChildren = useMemo(\n    () =>\n      cardLayoutOptions.rowActionMenuItems || hasRowReordering ? (\n        <RowActions\n          isRowReorderingDisabled={isRowReorderingDisabled}\n          row={row}\n          rowActionMenuItems={\n            cardLayoutOptions.rowActionMenuItems as CardLayoutProps<MRT_RowData>[\"rowActionMenuItems\"]\n          }\n          rowIndex={currentIndex}\n          totalRows={totalRows}\n          updateRowOrder={\n            hasRowReordering && onReorderRows\n              ? rowReorderingUtilities.updateRowOrder\n              : undefined\n          }\n        />\n      ) : null,\n    [\n      cardLayoutOptions.rowActionMenuItems,\n      currentIndex,\n      hasRowReordering,\n      isRowReorderingDisabled,\n      onReorderRows,\n      row,\n      rowReorderingUtilities,\n      totalRows,\n    ],\n  );\n\n  return (\n    <DataCard\n      children={children}\n      description={description}\n      detailPanel={detailPanel}\n      hasSelection={hasRowSelection}\n      image={image}\n      isSelected={rowSelection[row.id as number] ?? false}\n      key={row.id as string}\n      menuButtonChildren={menuButtonChildren}\n      onSelectionChange={onSelectionChange}\n      overline={overline}\n      title={title}\n      variant={variant}\n    />\n  );\n};\n\nconst MemoizedRowDataCard = memo(RowDataCard) as RowDataCardComponent;\nMemoizedRowDataCard.displayName = \"RowDataCard\";\n\nconst CardLayoutContent = <TData extends MRT_RowData>({\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  cardLayoutOptions,\n  totalRows,\n}: CardLayoutContentProps<TData>) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  const handleRowSelectionChange = useCallback(\n    (row: TData) => {\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  return (\n    <Box>\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            <StackContainer\n              currentLayout={currentLayout}\n              maxGridColumns={cardLayoutOptions.maxGridColumns ?? 3}\n              odysseyDesignTokens={odysseyDesignTokens}\n              role=\"list\"\n            >\n              {data.map((row, index) => {\n                const currentIndex =\n                  index + (pagination.pageIndex - 1) * pagination.pageSize;\n\n                return (\n                  <MemoizedRowDataCard\n                    cardLayoutOptions={cardLayoutOptions}\n                    currentIndex={currentIndex}\n                    handleRowSelectionChange={handleRowSelectionChange}\n                    hasRowReordering={hasRowReordering}\n                    hasRowSelection={hasRowSelection}\n                    isRowReorderingDisabled={isRowReorderingDisabled}\n                    key={row.id as string}\n                    onReorderRows={onReorderRows}\n                    row={row}\n                    rowReorderingUtilities={rowReorderingUtilities}\n                    rowSelection={rowSelection}\n                    totalRows={totalRows}\n                  />\n                );\n              })}\n            </StackContainer>\n          )}\n        </>\n      )}\n    </Box>\n  );\n};\n\nconst MemoizedCardLayoutContent = memo(\n  CardLayoutContent,\n) as CardLayoutContentComponent;\nMemoizedCardLayoutContent.displayName = \"CardLayoutContent\";\n\nexport { MemoizedCardLayoutContent as CardLayoutContent };\n"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,98 @@
+import _Tooltip from "@mui/material/Tooltip";
+import _Checkbox from "@mui/material/Checkbox";
+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 styled from "@emotion/styled";
+import { memo, useId, useMemo, useState } from "react";
+import { Card } from "../../Card.js";
+import { useTranslation } from "../../i18n.generated/i18n.js";
+import { ChevronDownIcon } from "../../icons.generated/ChevronDown.js";
+import { ChevronUpIcon } from "../../icons.generated/ChevronUp.js";
+import { useOdysseyDesignTokens } from "../../OdysseyDesignTokensContext.js";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const CheckboxContainer = styled("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens"
+})(({
+  odysseyDesignTokens
+}) => ({
+  marginBlockStart: `-${odysseyDesignTokens.Spacing1}`
+}));
+const AccessoryPlaceholder = styled(_IconButton)(() => ({
+  visibility: "hidden"
+}));
+const DataCard = ({
+  children,
+  description,
+  detailPanel,
+  hasSelection,
+  image,
+  isSelected,
+  onSelectionChange,
+  overline,
+  title,
+  variant,
+  menuButtonChildren
+}) => {
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+  const {
+    t
+  } = useTranslation();
+  const titleId = useId();
+  const [isExpanded, setIsExpanded] = useState(false);
+  const SelectionCheckbox = useMemo(() => _jsx(CheckboxContainer, {
+    odysseyDesignTokens: odysseyDesignTokens,
+    children: _jsx(_Checkbox, {
+      checked: isSelected,
+      inputProps: {
+        "aria-labelledby": titleId
+      },
+      onChange: onSelectionChange
+    })
+  }), [isSelected, odysseyDesignTokens, onSelectionChange, titleId]);
+  const ExpansionToggle = useMemo(() => {
+    return detailPanel ? _jsx(_Tooltip, {
+      title: isExpanded ? t("table.rowexpansion.collapse") : t("table.rowexpansion.expand"),
+      children: _jsx(_IconButton, {
+        "aria-label": isExpanded ? t("table.rowexpansion.collapse") : t("table.rowexpansion.expand"),
+        children: isExpanded ? _jsx(ChevronUpIcon, {}) : _jsx(ChevronDownIcon, {}),
+        onClick: () => setIsExpanded(!isExpanded)
+      })
+    }) : _jsx(AccessoryPlaceholder, {
+      disabled: true,
+      children: _jsx(ChevronDownIcon, {})
+    });
+  }, [isExpanded, detailPanel, t]);
+  const Accessory = useMemo(() => {
+    return _jsxs(_Fragment, {
+      children: [hasSelection && SelectionCheckbox, ExpansionToggle]
+    });
+  }, [ExpansionToggle, SelectionCheckbox, hasSelection]);
+  return _jsx(Card, {
+    __role: "listitem",
+    accessory: Accessory,
+    children: children,
+    description: description,
+    detailPanel: isExpanded && detailPanel,
+    image: image,
+    menuButtonChildren: menuButtonChildren,
+    overline: overline,
+    title: title,
+    titleId: titleId,
+    variant: variant
+  });
+};
+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":["styled","memo","useId","useMemo","useState","Card","useTranslation","ChevronDownIcon","ChevronUpIcon","useOdysseyDesignTokens","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","CheckboxContainer","shouldForwardProp","prop","odysseyDesignTokens","marginBlockStart","Spacing1","AccessoryPlaceholder","_IconButton","visibility","DataCard","children","description","detailPanel","hasSelection","image","isSelected","onSelectionChange","overline","title","variant","menuButtonChildren","t","titleId","isExpanded","setIsExpanded","SelectionCheckbox","_Checkbox","checked","inputProps","onChange","ExpansionToggle","_Tooltip","onClick","disabled","Accessory","__role","accessory","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 styled from \"@emotion/styled\";\nimport {\n  Checkbox as MuiCheckbox,\n  IconButton as MuiIconButton,\n  Tooltip as MuiTooltip,\n} from \"@mui/material\";\nimport { memo, useId, useMemo, useState } from \"react\";\n\nimport { Card, CardProps } from \"../../Card.js\";\nimport { useTranslation } from \"../../i18n.generated/i18n.js\";\nimport { ChevronDownIcon } from \"../../icons.generated/ChevronDown.js\";\nimport { ChevronUpIcon } from \"../../icons.generated/ChevronUp.js\";\nimport {\n  DesignTokens,\n  useOdysseyDesignTokens,\n} from \"../../OdysseyDesignTokensContext.js\";\n\nexport type DataCardProps = {\n  children?: CardProps[\"children\"];\n  description?: CardProps[\"description\"];\n  detailPanel?: CardProps[\"detailPanel\"];\n  hasSelection?: boolean;\n  image?: CardProps[\"image\"];\n  isSelected?: boolean;\n  menuButtonChildren?: CardProps[\"menuButtonChildren\"];\n  onSelectionChange?: () => void;\n  overline?: CardProps[\"overline\"];\n  title?: CardProps[\"title\"];\n  variant?: CardProps[\"variant\"];\n};\n\nconst CheckboxContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n}>(({ odysseyDesignTokens }) => ({\n  marginBlockStart: `-${odysseyDesignTokens.Spacing1}`,\n}));\n\nconst AccessoryPlaceholder = styled(MuiIconButton)(() => ({\n  visibility: \"hidden\" as const,\n}));\n\nconst DataCard = ({\n  children,\n  description,\n  detailPanel,\n  hasSelection,\n  image,\n  isSelected,\n  onSelectionChange,\n  overline,\n  title,\n  variant,\n  menuButtonChildren,\n}: DataCardProps) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n  const { t } = useTranslation();\n  const titleId = useId();\n\n  const [isExpanded, setIsExpanded] = useState<boolean>(false);\n\n  const SelectionCheckbox = useMemo(\n    () => (\n      <CheckboxContainer odysseyDesignTokens={odysseyDesignTokens}>\n        <MuiCheckbox\n          checked={isSelected}\n          inputProps={{\n            \"aria-labelledby\": titleId,\n          }}\n          onChange={onSelectionChange}\n        />\n      </CheckboxContainer>\n    ),\n    [isSelected, odysseyDesignTokens, onSelectionChange, titleId],\n  );\n\n  const ExpansionToggle = useMemo(() => {\n    return detailPanel ? (\n      <MuiTooltip\n        title={\n          isExpanded\n            ? t(\"table.rowexpansion.collapse\")\n            : t(\"table.rowexpansion.expand\")\n        }\n      >\n        <MuiIconButton\n          aria-label={\n            isExpanded\n              ? t(\"table.rowexpansion.collapse\")\n              : t(\"table.rowexpansion.expand\")\n          }\n          children={isExpanded ? <ChevronUpIcon /> : <ChevronDownIcon />}\n          onClick={() => setIsExpanded(!isExpanded)}\n        />\n      </MuiTooltip>\n    ) : (\n      <AccessoryPlaceholder disabled>\n        <ChevronDownIcon />\n      </AccessoryPlaceholder>\n    );\n  }, [isExpanded, detailPanel, t]);\n\n  const Accessory = useMemo(() => {\n    return (\n      <>\n        {hasSelection && SelectionCheckbox}\n        {ExpansionToggle}\n      </>\n    );\n  }, [ExpansionToggle, SelectionCheckbox, hasSelection]);\n\n  return (\n    <Card\n      __role=\"listitem\"\n      accessory={Accessory}\n      children={children}\n      description={description}\n      detailPanel={isExpanded && detailPanel}\n      image={image}\n      menuButtonChildren={menuButtonChildren}\n      overline={overline}\n      title={title}\n      titleId={titleId}\n      variant={variant}\n    />\n  );\n};\n\nconst MemoizedDataCard = memo(DataCard);\nMemoizedDataCard.displayName = \"DataCard\";\n\nexport { MemoizedDataCard as DataCard };\n"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,100 @@
+/*!
+ * 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 } from "react";
+import { DataView } from "./DataView.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const 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
+}) => {
+  const tableLayoutOptions = useMemo(() => ({
+    columns,
+    hasChangeableDensity,
+    hasColumnResizing,
+    hasColumnVisibility,
+    hasSorting,
+    initialDensity,
+    renderDetailPanel,
+    rowActionButtons,
+    rowActionMenuItems
+  }), [columns, hasChangeableDensity, hasColumnResizing, hasColumnVisibility, hasSorting, initialDensity, renderDetailPanel, rowActionButtons, rowActionMenuItems]);
+  return _jsx(DataView, {
+    additionalActionButton: additionalActionButton,
+    additionalActionMenuItems: additionalActionMenuItems,
+    availableLayouts: ["table"],
+    bulkActionMenuItems: bulkActionMenuItems,
+    currentPage: currentPage,
+    emptyPlaceholder: emptyPlaceholder,
+    errorMessage: errorMessage,
+    filters: filters,
+    getData: getData,
+    hasFilters: hasFilters,
+    hasPagination: hasPagination,
+    hasRowReordering: hasRowReordering,
+    hasRowSelection: hasRowSelection,
+    hasSearch: hasSearch,
+    hasSearchSubmitButton: hasSearchSubmitButton,
+    isEmpty: isEmpty,
+    isLoading: isLoading,
+    isNoResults: isNoResults,
+    isPaginationMoreDisabled: isPaginationMoreDisabled,
+    isRowReorderingDisabled: isRowReorderingDisabled,
+    maxPages: maxPages,
+    maxResultsPerPage: maxResultsPerPage,
+    noResultsPlaceholder: noResultsPlaceholder,
+    onChangeRowSelection: onChangeRowSelection,
+    paginationType: paginationType,
+    resultsPerPage: resultsPerPage,
+    searchDelayTime: searchDelayTime,
+    tableLayoutOptions: tableLayoutOptions,
+    totalRows: totalRows
+  });
+};
+const MemoizedDataTable = memo(DataTable);
+MemoizedDataTable.displayName = "DataTable";
+export { MemoizedDataTable as DataTable };
+//# sourceMappingURL=DataTable.js.map

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 { MRT_RowData } from \"material-react-table\";\nimport { memo, useMemo } from \"react\";\n\nimport { TableLayoutProps, UniversalProps } from \"./componentTypes.js\";\nimport { DataView } from \"./DataView.js\";\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;;AAGA,SAASA,IAAI,EAAEC,OAAO,QAAQ,OAAO;AAGrC,SAASC,QAAQ,QAAQ,eAAe;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAUzC,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":[]}