@okta/odyssey-react-mui 1.21.2 → 1.23.0

package/dist/index.scss

@@ -1,7 +1,7 @@
 
 /**
  * Do not edit directly
- * Generated on Fri, 09 Aug 2024 19:25:30 GMT
+ * Generated on Tue, 24 Sep 2024 20:24:06 GMT
  */
 
 $border-color-control: #8d8d8d !default;
@@ -46,7 +46,7 @@ $hue-blue-200: #c1c9f6 !default;
 $hue-blue-300: #9daaf1 !default;
 $hue-blue-400: #7286eb !default;
 $hue-blue-500: #546be7 !default;
-$hue-blue-600: #4c64e1 !default;
+$hue-blue-600: #3f59e4 !default;
 $hue-blue-700: #2e40a5 !default;
 $hue-blue-800: #22307c !default;
 $hue-blue-900: #182257 !default;
@@ -70,8 +70,8 @@ $hue-red-600: #d92300 !default;
 $hue-red-700: #951800 !default;
 $hue-red-800: #711200 !default;
 $hue-red-900: #500d00 !default;
-$hue-yellow-50: #fcf6ac !default;
-$hue-yellow-100: #fce101 !default;
+$hue-yellow-50: #fdfad9 !default;
+$hue-yellow-100: #ffe01a !default;
 $hue-yellow-200: #f9c503 !default;
 $hue-yellow-300: #eb9e05 !default;
 $hue-yellow-400: #bf8004 !default;
@@ -80,12 +80,52 @@ $hue-yellow-600: #966603 !default;
 $hue-yellow-700: #664402 !default;
 $hue-yellow-800: #4c3302 !default;
 $hue-yellow-900: #352401 !default;
+$hue-accent-one-50: #F5F2FD !default;
+$hue-accent-one-100: #E4DFF1 !default;
+$hue-accent-one-200: #D2C2FF !default;
+$hue-accent-one-300: #B89FFE !default;
+$hue-accent-one-400: #9777F9 !default;
+$hue-accent-one-500: #8951FB !default;
+$hue-accent-one-600: #6E47C9 !default;
+$hue-accent-one-700: #5227BE !default;
+$hue-accent-one-800: #401895 !default;
+$hue-accent-one-900: #2B0679 !default;
+$hue-accent-two-50: #FCF2E8 !default;
+$hue-accent-two-100: #F7DCD6 !default;
+$hue-accent-two-200: #F2C299 !default;
+$hue-accent-two-300: #ED9B58 !default;
+$hue-accent-two-400: #E06C07 !default;
+$hue-accent-two-500: #C25608 !default;
+$hue-accent-two-600: #964E1E !default;
+$hue-accent-two-700: #964E1E !default;
+$hue-accent-two-800: #50301B !default;
+$hue-accent-two-900: #3E1F09 !default;
+$hue-accent-three-50: #E1F7F7 !default;
+$hue-accent-three-100: #BCEBEA !default;
+$hue-accent-three-200: #89D9D9 !default;
+$hue-accent-three-300: #5CBDBD !default;
+$hue-accent-three-400: #269C9C !default;
+$hue-accent-three-500: #008585 !default;
+$hue-accent-three-600: #1B6C6C !default;
+$hue-accent-three-700: #255157 !default;
+$hue-accent-three-800: #1C3D3D !default;
+$hue-accent-three-900: #12282B !default;
+$hue-accent-four-50: #FFF2E6 !default;
+$hue-accent-four-100: #EBDFCA !default;
+$hue-accent-four-200: #D6C9AD !default;
+$hue-accent-four-300: #C2AB84 !default;
+$hue-accent-four-400: #A18A60 !default;
+$hue-accent-four-500: #87744D !default;
+$hue-accent-four-600: #696803 !default;
+$hue-accent-four-700: #574931 !default;
+$hue-accent-four-800: #403727 !default;
+$hue-accent-four-900: #2E2618 !default;
 $palette-primary-lighter: #f2f3fd !default;
 $palette-primary-light: #9daaf1 !default;
 $palette-primary-main: #546be7 !default;
 $palette-primary-dark: #2e40a5 !default;
 $palette-primary-darker: #22307c !default;
-$palette-primary-text: #4c64e1 !default;
+$palette-primary-text: #3f59e4 !default;
 $palette-primary-heading: #182257 !default;
 $palette-primary-highlight: #dbe0fa !default;
 $palette-danger-lighter: #fff0ee !default;
@@ -96,14 +136,14 @@ $palette-danger-darker: #711200 !default;
 $palette-danger-text: #d92300 !default;
 $palette-danger-heading: #500d00 !default;
 $palette-danger-highlight: #ffd8d1 !default;
-$palette-warning-lighter: #fcf6ac !default;
+$palette-warning-lighter: #fdfad9 !default;
 $palette-warning-light: #eb9e05 !default;
 $palette-warning-main: #a16c03 !default;
 $palette-warning-dark: #664402 !default;
 $palette-warning-darker: #4c3302 !default;
 $palette-warning-text: #966603 !default;
 $palette-warning-heading: #352401 !default;
-$palette-warning-highlight: #fce101 !default;
+$palette-warning-highlight: #ffe01a !default;
 $palette-success-lighter: #defae7 !default;
 $palette-success-light: #59c282 !default;
 $palette-success-main: #16884a !default;
@@ -137,7 +177,7 @@ $typography-color-inverse: #ffffff !default; // Inverse text color typically use
 $typography-color-support: #4b4b4b !default;
 $typography-color-subordinate: #6e6e6e !default; // Text color for subordinate text like captions
 $typography-color-disabled: #aeaeae !default;
-$typography-color-action: #4c64e1 !default;
+$typography-color-action: #3f59e4 !default;
 $typography-color-danger: #d92300 !default;
 $typography-color-success: #197f48 !default;
 $typography-color-warning: #966603 !default;
@@ -301,6 +341,54 @@ $ods-tokens: (
       '700': $hue-yellow-700,
       '800': $hue-yellow-800,
       '900': $hue-yellow-900
+    ),
+    'accentOne': (
+      '50': $hue-accent-one-50,
+      '100': $hue-accent-one-100,
+      '200': $hue-accent-one-200,
+      '300': $hue-accent-one-300,
+      '400': $hue-accent-one-400,
+      '500': $hue-accent-one-500,
+      '600': $hue-accent-one-600,
+      '700': $hue-accent-one-700,
+      '800': $hue-accent-one-800,
+      '900': $hue-accent-one-900
+    ),
+    'accentTwo': (
+      '50': $hue-accent-two-50,
+      '100': $hue-accent-two-100,
+      '200': $hue-accent-two-200,
+      '300': $hue-accent-two-300,
+      '400': $hue-accent-two-400,
+      '500': $hue-accent-two-500,
+      '600': $hue-accent-two-600,
+      '700': $hue-accent-two-700,
+      '800': $hue-accent-two-800,
+      '900': $hue-accent-two-900
+    ),
+    'accentThree': (
+      '50': $hue-accent-three-50,
+      '100': $hue-accent-three-100,
+      '200': $hue-accent-three-200,
+      '300': $hue-accent-three-300,
+      '400': $hue-accent-three-400,
+      '500': $hue-accent-three-500,
+      '600': $hue-accent-three-600,
+      '700': $hue-accent-three-700,
+      '800': $hue-accent-three-800,
+      '900': $hue-accent-three-900
+    ),
+    'accentFour': (
+      '50': $hue-accent-four-50,
+      '100': $hue-accent-four-100,
+      '200': $hue-accent-four-200,
+      '300': $hue-accent-four-300,
+      '400': $hue-accent-four-400,
+      '500': $hue-accent-four-500,
+      '600': $hue-accent-four-600,
+      '700': $hue-accent-four-700,
+      '800': $hue-accent-four-800,
+      '900': $hue-accent-four-900
     )
   ),
   'palette': (

package/dist/labs/AppTile.js

@@ -0,0 +1,124 @@
+import _Card from "@mui/material/Card";
+import _CardActionArea from "@mui/material/CardActionArea";
+/*!
+ * 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 styled from "@emotion/styled";
+import { Button } from ".././Button.js";
+import { useOdysseyDesignTokens } from ".././OdysseyDesignTokensContext.js";
+import { Heading5, Paragraph, Subordinate, Support } from ".././Typography.js";
+import { Box } from ".././Box.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export const APP_TILE_IMAGE_HEIGHT = "64px";
+const ImageContainer = styled("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "hasAction"
+})(({
+  odysseyDesignTokens,
+  hasAction
+}) => ({
+  display: "flex",
+  alignItems: "flex-start",
+  maxHeight: APP_TILE_IMAGE_HEIGHT,
+  marginBlockEnd: odysseyDesignTokens.Spacing5,
+  paddingRight: hasAction ? odysseyDesignTokens.Spacing5 : 0
+}));
+const ActionContainer = styled("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens"
+})(({
+  odysseyDesignTokens
+}) => ({
+  alignItems: "center",
+  display: "flex",
+  minHeight: odysseyDesignTokens.Spacing6,
+  gap: odysseyDesignTokens.Spacing1,
+  position: "absolute",
+  right: odysseyDesignTokens.Spacing3,
+  top: odysseyDesignTokens.Spacing3
+}));
+const ContentContainer = styled("div")(() => ({
+  display: "flex"
+}));
+const ChildrenContainer = styled("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens"
+})(({
+  odysseyDesignTokens
+}) => ({
+  ["&:not(:first-child)"]: {
+    marginBlockStart: odysseyDesignTokens.Spacing3
+  }
+}));
+const AppTile = ({
+  actionAriaControls,
+  actionAriaHasPopup,
+  actionAriaExpanded,
+  actionLabel,
+  actionIcon,
+  auxiliaryText,
+  children,
+  description,
+  image,
+  onActionClick,
+  onClick,
+  overline,
+  title
+}) => {
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+  const tileContent = useMemo(() => _jsx(ContentContainer, {
+    children: _jsxs(Box, {
+      children: [image && _jsx(ImageContainer, {
+        odysseyDesignTokens: odysseyDesignTokens,
+        hasAction: Boolean(onActionClick),
+        children: image
+      }), overline && _jsx(Support, {
+        component: "div",
+        children: overline
+      }), title && _jsx(Heading5, {
+        component: "div",
+        children: title
+      }), description && _jsx(Paragraph, {
+        color: "textSecondary",
+        children: description
+      }), children && _jsx(ChildrenContainer, {
+        odysseyDesignTokens: odysseyDesignTokens,
+        children: children
+      })]
+    })
+  }), [image, odysseyDesignTokens, onActionClick, overline, title, description, children]);
+  return _jsxs(_Card, {
+    className: "isClickable",
+    children: [_jsx(_CardActionArea, {
+      onClick: onClick,
+      children: tileContent
+    }), (onActionClick || auxiliaryText) && _jsxs(ActionContainer, {
+      odysseyDesignTokens: odysseyDesignTokens,
+      children: [auxiliaryText && _jsx(Subordinate, {
+        children: auxiliaryText
+      }), onActionClick && _jsx(Button, {
+        endIcon: actionIcon,
+        ariaLabel: actionLabel,
+        variant: "floating",
+        size: "small",
+        tooltipText: actionLabel,
+        ariaControls: actionAriaControls,
+        ariaExpanded: actionAriaExpanded,
+        ariaHasPopup: actionAriaHasPopup,
+        onClick: onActionClick
+      })]
+    })]
+  });
+};
+const MemoizedAppTile = memo(AppTile);
+MemoizedAppTile.displayName = "AppTile";
+export { MemoizedAppTile as AppTile };
+//# sourceMappingURL=AppTile.js.map

package/dist/labs/AppTile.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppTile.js","names":["memo","useMemo","styled","Button","useOdysseyDesignTokens","Heading5","Paragraph","Subordinate","Support","Box","jsx","_jsx","jsxs","_jsxs","APP_TILE_IMAGE_HEIGHT","ImageContainer","shouldForwardProp","prop","odysseyDesignTokens","hasAction","display","alignItems","maxHeight","marginBlockEnd","Spacing5","paddingRight","ActionContainer","minHeight","Spacing6","gap","Spacing1","position","right","Spacing3","top","ContentContainer","ChildrenContainer","marginBlockStart","AppTile","actionAriaControls","actionAriaHasPopup","actionAriaExpanded","actionLabel","actionIcon","auxiliaryText","children","description","image","onActionClick","onClick","overline","title","tileContent","Boolean","component","color","_Card","className","_CardActionArea","endIcon","ariaLabel","variant","size","tooltipText","ariaControls","ariaExpanded","ariaHasPopup","MemoizedAppTile","displayName"],"sources":["../../src/labs/AppTile.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  HTMLAttributes,\n} from \"react\";\nimport {\n  Card as MuiCard,\n  CardActionArea as MuiCardActionArea,\n} from \"@mui/material\";\nimport styled from \"@emotion/styled\";\n\nimport { Button } from \".././Button\";\nimport {\n  DesignTokens,\n  useOdysseyDesignTokens,\n} from \".././OdysseyDesignTokensContext\";\nimport { Heading5, Paragraph, Subordinate, Support } from \".././Typography\";\nimport { Box } from \".././Box\";\n\nexport const APP_TILE_IMAGE_HEIGHT = \"64px\";\n\nexport type AppTileProps = {\n  // Text that appears in the upper right corner of the tile\n  auxiliaryText?: string;\n  // Arbitrary content to render underneath any other tile content\n  children?: ReactNode;\n  // A string description\n  description?: string;\n  // An image or icon at the top of the tile\n  image?: ReactElement;\n  // Event handler for when the user clicks the tile\n  onClick: MouseEventHandler;\n  // An 'eyebrow' of text above the title\n  overline?: string;\n  // A string for the tile title\n  title?: string;\n} & (\n  | {\n      // Event that fires when the user clicks the action button in the upper-right corner\n      // If this isn't set, the other action props can't be set either\n      onActionClick: MouseEventHandler;\n      // The ID of the element which the button controls (for instance, a drawer or dialog), if any.\n      actionAriaControls?: HTMLAttributes<HTMLElement>[\"aria-controls\"];\n      // Should be filled if the button controls a popup element such as a Drawer or Dialog\n      actionAriaHasPopup?: HTMLAttributes<HTMLElement>[\"aria-haspopup\"];\n      // Should be true if the button controls a popup element that is currently expanded. Should be synced to\n      // the state of the popup element\n      actionAriaExpanded?: HTMLAttributes<HTMLElement>[\"aria-expanded\"];\n      // The label for the button, used as the aria-label and tooltip\n      actionLabel: string;\n      // An icon for the action button\n      actionIcon: ReactElement;\n    }\n  | {\n      onActionClick?: never;\n      actionAriaControls?: never;\n      actionAriaHasPopup?: never;\n      actionAriaExpanded?: never;\n      actionLabel?: never;\n      actionIcon?: never;\n    }\n);\n\nconst ImageContainer = styled(\"div\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" && prop !== \"hasAction\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n  hasAction: boolean;\n}>(({ odysseyDesignTokens, hasAction }) => ({\n  display: \"flex\",\n  alignItems: \"flex-start\",\n  maxHeight: APP_TILE_IMAGE_HEIGHT,\n  marginBlockEnd: odysseyDesignTokens.Spacing5,\n  paddingRight: hasAction ? odysseyDesignTokens.Spacing5 : 0,\n}));\n\nconst ActionContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{ odysseyDesignTokens: DesignTokens }>(({ odysseyDesignTokens }) => ({\n  alignItems: \"center\",\n  display: \"flex\",\n  minHeight: odysseyDesignTokens.Spacing6,\n  gap: odysseyDesignTokens.Spacing1,\n  position: \"absolute\",\n  right: odysseyDesignTokens.Spacing3,\n  top: odysseyDesignTokens.Spacing3,\n}));\n\nconst ContentContainer = styled(\"div\")(() => ({\n  display: \"flex\",\n}));\n\nconst ChildrenContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{ odysseyDesignTokens: DesignTokens }>(({ odysseyDesignTokens }) => ({\n  [\"&:not(:first-child)\"]: {\n    marginBlockStart: odysseyDesignTokens.Spacing3,\n  },\n}));\n\nconst AppTile = ({\n  actionAriaControls,\n  actionAriaHasPopup,\n  actionAriaExpanded,\n  actionLabel,\n  actionIcon,\n  auxiliaryText,\n  children,\n  description,\n  image,\n  onActionClick,\n  onClick,\n  overline,\n  title,\n}: AppTileProps) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  const tileContent = useMemo(\n    () => (\n      <ContentContainer>\n        <Box>\n          {image && (\n            <ImageContainer\n              odysseyDesignTokens={odysseyDesignTokens}\n              hasAction={Boolean(onActionClick)}\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          {children && (\n            <ChildrenContainer odysseyDesignTokens={odysseyDesignTokens}>\n              {children}\n            </ChildrenContainer>\n          )}\n        </Box>\n      </ContentContainer>\n    ),\n    [\n      image,\n      odysseyDesignTokens,\n      onActionClick,\n      overline,\n      title,\n      description,\n      children,\n    ],\n  );\n\n  return (\n    <MuiCard className=\"isClickable\">\n      <MuiCardActionArea onClick={onClick}>{tileContent}</MuiCardActionArea>\n\n      {(onActionClick || auxiliaryText) && (\n        <ActionContainer odysseyDesignTokens={odysseyDesignTokens}>\n          {auxiliaryText && <Subordinate>{auxiliaryText}</Subordinate>}\n          {onActionClick && (\n            <Button\n              endIcon={actionIcon}\n              ariaLabel={actionLabel}\n              variant=\"floating\"\n              size=\"small\"\n              tooltipText={actionLabel}\n              ariaControls={actionAriaControls}\n              ariaExpanded={actionAriaExpanded}\n              ariaHasPopup={actionAriaHasPopup}\n              onClick={onActionClick}\n            />\n          )}\n        </ActionContainer>\n      )}\n    </MuiCard>\n  );\n};\n\nconst MemoizedAppTile = memo(AppTile);\nMemoizedAppTile.displayName = \"AppTile\";\n\nexport { MemoizedAppTile as AppTile };\n"],"mappings":"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"}

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

@@ -0,0 +1 @@
+{"version":3,"file":"BulkActionsMenu.js","names":["memo","useCallback","styled","useTranslation","Box","Button","ChevronDownIcon","MenuButton","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 { memo, useCallback, Dispatch, SetStateAction } from \"react\";\nimport { MRT_RowData, MRT_RowSelectionState } from \"material-react-table\";\nimport styled from \"@emotion/styled\";\nimport { useTranslation } from \"react-i18next\";\n\nimport { Box } from \"../../Box\";\nimport { Button } from \"../../Button\";\nimport { ChevronDownIcon } from \"../../icons.generated\";\nimport { MenuButton } from \"../../MenuButton\";\nimport { UniversalProps } from \"./componentTypes\";\nimport {\n  DesignTokens,\n  useOdysseyDesignTokens,\n} from \"../../OdysseyDesignTokensContext\";\n\nexport type BulkActionsMenuProps = {\n  data: MRT_RowData[];\n  menuItems: UniversalProps[\"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 = ({\n  data,\n  menuItems,\n  rowSelection,\n  setRowSelection,\n}: BulkActionsMenuProps) => {\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(data.map((row) => [row.id, true]));\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=\"More actions\"\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":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,IAAI,EAAEC,WAAW,QAAkC,OAAO;AAEnE,OAAOC,MAAM,MAAM,iBAAiB;AACpC,SAASC,cAAc,QAAQ,eAAe;AAAC,SAEtCC,GAAG;AAAA,SACHC,MAAM;AAAA,SACNC,eAAe;AAAA,SACfC,UAAU;AAAA,SAIjBC,sBAAsB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAUxB,MAAMC,oBAAoB,GAAGX,MAAM,CAAC,KAAK,EAAE;EACzCY,iBAAiB,EAAGC,IAAI,IAAKA,IAAI,KAAK;AACxC,CAAC,CAAC,CAEC,CAAC;EAAEC;AAAoB,CAAC,MAAM;EAC/BC,OAAO,EAAE,MAAM;EACfC,GAAG,EAAEF,mBAAmB,CAACG;AAC3B,CAAC,CAAC,CAAC;AAEH,MAAMC,eAAe,GAAGA,CAAC;EACvBC,IAAI;EACJC,SAAS;EACTC,YAAY;EACZC;AACoB,CAAC,KAAK;EAC1B,MAAMR,mBAAmB,GAAGR,sBAAsB,CAAC,CAAC;EACpD,MAAM;IAAEiB;EAAE,CAAC,GAAGtB,cAAc,CAAC,CAAC;EAE9B,MAAMuB,gBAAgB,GAAGC,MAAM,CAACC,MAAM,CAACL,YAAY,CAAC,CAACM,MAAM,CAACC,OAAO,CAAC,CAACC,MAAM;EAE3E,MAAMC,eAAe,GAAG/B,WAAW,CAAC,MAAM;IACxC,MAAMgC,IAAI,GAAGN,MAAM,CAACO,WAAW,CAACb,IAAI,CAACc,GAAG,CAAEC,GAAG,IAAK,CAACA,GAAG,CAACC,EAAE,EAAE,IAAI,CAAC,CAAC,CAAC;IAClEb,eAAe,CAACS,IAAI,CAAC;EACvB,CAAC,EAAE,CAACZ,IAAI,EAAEG,eAAe,CAAC,CAAC;EAE3B,MAAMc,gBAAgB,GAAGrC,WAAW,CAAC,MAAM;IACzCuB,eAAe,CAAC,CAAC,CAAC,CAAC;EACrB,CAAC,EAAE,CAACA,eAAe,CAAC,CAAC;EAErB,OACEZ,KAAA,CAACC,oBAAoB;IAACG,mBAAmB,EAAEA,mBAAoB;IAAAuB,QAAA,GAC5Db,gBAAgB,GAAG,CAAC,IACnBhB,IAAA,CAACH,UAAU;MACTiC,SAAS,EAAC,cAAc;MACxBC,WAAW,EAAEhB,CAAC,CAAC,0BAA0B,EAAE;QAAEC;MAAiB,CAAC,CAAE;MACjEgB,aAAa,EAAC,SAAS;MACvBC,OAAO,EAAEjC,IAAA,CAACJ,eAAe,IAAE,CAAE;MAAAiC,QAAA,EAE5BjB,SAAS,GAAGC,YAAY;IAAC,CAChB,CACb,EACDX,KAAA,CAACR,GAAG;MAAAmC,QAAA,GACF7B,IAAA,CAACL,MAAM;QACLuC,UAAU,EAAElB,gBAAgB,KAAKL,IAAI,CAACU,MAAO;QAC7Cc,KAAK,EAAEpB,CAAC,CAAC,yBAAyB,CAAE;QACpCqB,OAAO,EAAEd,eAAgB;QACzBe,OAAO,EAAC;MAAW,CACpB,CAAC,EACFrC,IAAA,CAACL,MAAM;QACLuC,UAAU,EAAElB,gBAAgB,KAAK,CAAE;QACnCmB,KAAK,EAAEpB,CAAC,CAAC,0BAA0B,CAAE;QACrCqB,OAAO,EAAER,gBAAiB;QAC1BS,OAAO,EAAC;MAAW,CACpB,CAAC;IAAA,CACC,CAAC;EAAA,CACc,CAAC;AAE3B,CAAC;AAED,MAAMC,uBAAuB,GAAGhD,IAAI,CAACoB,eAAe,CAAC;AACrD4B,uBAAuB,CAACC,WAAW,GAAG,iBAAiB;AAEvD,SAASD,uBAAuB,IAAI5B,eAAe"}

package/dist/labs/{DataComponents/StackContent.js → DataView/CardLayoutContent.js}

@@ -17,7 +17,7 @@ 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 { DataCard } from "./DataCard.js";
 import { DetailPanel } from "./DetailPanel.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -61,7 +61,7 @@ const CheckboxContainer = styled("div", {
 }) => ({
   marginBlockStart: `-${odysseyDesignTokens.Spacing1}`
 }));
-const StackContent = ({
+const CardLayoutContent = ({
   currentLayout,
   data,
   emptyState,
@@ -76,7 +76,7 @@ const StackContent = ({
   rowReorderingUtilities,
   rowSelection,
   setRowSelection,
-  stackOptions,
+  cardLayoutOptions,
   totalRows
 }) => {
   const odysseyDesignTokens = useOdysseyDesignTokens();
@@ -89,7 +89,7 @@ const StackContent = ({
   return _jsx(StackContainer, {
     odysseyDesignTokens: odysseyDesignTokens,
     currentLayout: currentLayout,
-    maxGridColumns: stackOptions.maxGridColumns ?? 3,
+    maxGridColumns: cardLayoutOptions.maxGridColumns ?? 3,
     children: isLoading ? _jsx(LoadingContainer, {
       odysseyDesignTokens: odysseyDesignTokens,
       children: _jsx(CircularProgress, {})
@@ -104,9 +104,9 @@ const StackContent = ({
             description,
             image,
             children
-          } = stackOptions.cardProps(row);
+          } = cardLayoutOptions.itemProps(row);
           const currentIndex = index + (pagination.pageIndex - 1) * pagination.pageSize;
-          return _jsx(StackCard, {
+          return _jsx(DataCard, {
             Accessory: hasRowSelection && _jsx(CheckboxContainer, {
               odysseyDesignTokens: odysseyDesignTokens,
               children: _jsx(_Checkbox, {
@@ -116,15 +116,15 @@ const StackContent = ({
             }),
             children: children,
             description: description,
-            detailPanel: stackOptions.renderDetailPanel ? _jsx(DetailPanel, {
+            detailPanel: cardLayoutOptions.renderDetailPanel ? _jsx(DetailPanel, {
               row: row,
-              renderDetailPanel: stackOptions.renderDetailPanel
+              renderDetailPanel: cardLayoutOptions.renderDetailPanel
             }) : undefined,
             image: image,
-            menuButtonChildren: (stackOptions.rowActionMenuItems || hasRowReordering) && _jsx(RowActions, {
+            menuButtonChildren: (cardLayoutOptions.rowActionMenuItems || hasRowReordering) && _jsx(RowActions, {
               row: row,
               rowIndex: currentIndex,
-              rowActionMenuItems: stackOptions.rowActionMenuItems,
+              rowActionMenuItems: cardLayoutOptions.rowActionMenuItems,
               isRowReorderingDisabled: isRowReorderingDisabled,
               totalRows: totalRows,
               updateRowOrder: hasRowReordering && onReorderRows ? updateRowOrder : undefined
@@ -137,7 +137,7 @@ const StackContent = ({
     })
   });
 };
-const MemoizedStackContent = memo(StackContent);
-MemoizedStackContent.displayName = "StackContent";
-export { MemoizedStackContent as StackContent };
-//# sourceMappingURL=StackContent.js.map
+const MemoizedCardLayoutContent = memo(CardLayoutContent);
+MemoizedCardLayoutContent.displayName = "CardLayoutContent";
+export { MemoizedCardLayoutContent as CardLayoutContent };
+//# sourceMappingURL=CardLayoutContent.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CardLayoutContent.js","names":["memo","useCallback","styled","Box","CircularProgress","useOdysseyDesignTokens","RowActions","DataCard","DetailPanel","jsx","_jsx","Fragment","_Fragment","StackContainer","shouldForwardProp","prop","odysseyDesignTokens","currentLayout","maxGridColumns","display","flexDirection","gap","Spacing5","gridTemplateColumns","LoadingContainer","alignItems","justifyContent","width","paddingBlock","CheckboxContainer","marginBlockStart","Spacing1","CardLayoutContent","data","emptyState","hasRowReordering","hasRowSelection","isEmpty","isLoading","isNoResults","isRowReorderingDisabled","onReorderRows","pagination","rowReorderingUtilities","rowSelection","setRowSelection","cardLayoutOptions","totalRows","handleRowSelectionChange","row","Object","fromEntries","id","entries","filter","key","concat","updateRowOrder","children","length","map","index","overline","title","description","image","itemProps","currentIndex","pageIndex","pageSize","Accessory","_Checkbox","checked","onChange","detailPanel","renderDetailPanel","undefined","menuButtonChildren","rowActionMenuItems","rowIndex","MemoizedCardLayoutContent","displayName"],"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 { 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 { DataCard } from \"./DataCard\";\nimport { CardLayout, CardLayoutProps, UniversalProps } from \"./componentTypes\";\nimport { DetailPanel } from \"./DetailPanel\";\n\nexport type CardLayoutContentProps = {\n  currentLayout: CardLayout;\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  cardLayoutOptions: CardLayoutProps;\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: CardLayout;\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 CardLayoutContent = ({\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) => {\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={cardLayoutOptions.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                  cardLayoutOptions.itemProps(row);\n                const currentIndex =\n                  index + (pagination.pageIndex - 1) * pagination.pageSize;\n\n                return (\n                  <DataCard\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                      cardLayoutOptions.renderDetailPanel ? (\n                        <DetailPanel\n                          row={row}\n                          renderDetailPanel={\n                            cardLayoutOptions.renderDetailPanel\n                          }\n                        />\n                      ) : undefined\n                    }\n                    image={image}\n                    key={row.id}\n                    menuButtonChildren={\n                      (cardLayoutOptions.rowActionMenuItems ||\n                        hasRowReordering) && (\n                        <RowActions\n                          row={row}\n                          rowIndex={currentIndex}\n                          rowActionMenuItems={\n                            cardLayoutOptions.rowActionMenuItems\n                          }\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 MemoizedCardLayoutContent = memo(CardLayoutContent);\nMemoizedCardLayoutContent.displayName = \"CardLayoutContent\";\n\nexport { MemoizedCardLayoutContent as CardLayoutContent };\n"],"mappings":"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"}

package/dist/labs/{DataComponents/StackCard.js → DataView/DataCard.js}

@@ -71,14 +71,14 @@ const CardChildrenContainer = styled("div", {
 })(({
   odysseyDesignTokens
 }) => ({
-  ["div + &"]: {
+  ["&:not(:first-child)"]: {
     marginBlockStart: odysseyDesignTokens.Spacing3
   }
 }));
 const buttonProviderValue = {
   isFullWidth: true
 };
-const StackCard = ({
+const DataCard = ({
   Accessory: AccessoryProp,
   button,
   children,
@@ -157,7 +157,7 @@ const StackCard = ({
     })]
   });
 };
-const MemoizedStackCard = memo(StackCard);
-MemoizedStackCard.displayName = "StackCard";
-export { MemoizedStackCard as StackCard };
-//# sourceMappingURL=StackCard.js.map
+const MemoizedDataCard = memo(DataCard);
+MemoizedDataCard.displayName = "DataCard";
+export { MemoizedDataCard as DataCard };
+//# sourceMappingURL=DataCard.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DataCard.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","DataCard","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","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\";\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 DataCardProps = {\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  [\"&:not(:first-child)\"]: {\n    marginBlockStart: odysseyDesignTokens.Spacing3,\n  },\n}));\n\nconst buttonProviderValue = { isFullWidth: true };\n\nconst DataCard = ({\n  Accessory: AccessoryProp,\n  button,\n  children,\n  description,\n  detailPanel,\n  image,\n  menuButtonChildren,\n  onClick,\n  overline,\n  title,\n}: DataCardProps) => {\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 MemoizedDataCard = memo(DataCard);\nMemoizedDataCard.displayName = \"DataCard\";\n\nexport { MemoizedDataCard as DataCard };\n"],"mappings":"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"}

package/dist/labs/{DataComponents → DataView}/DataTable.js

@@ -14,6 +14,8 @@ 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,
@@ -49,7 +51,7 @@ const DataTable = ({
   searchDelayTime,
   totalRows
 }) => {
-  const tableOptions = useMemo(() => ({
+  const tableLayoutOptions = useMemo(() => ({
     columns,
     hasChangeableDensity,
     hasColumnResizing,
@@ -61,6 +63,8 @@ const DataTable = ({
     rowActionMenuItems
   }), [columns, hasChangeableDensity, hasColumnResizing, hasColumnVisibility, hasSorting, initialDensity, renderDetailPanel, rowActionButtons, rowActionMenuItems]);
   return _jsx(DataView, {
+    additionalActionButton: additionalActionButton,
+    additionalActionMenuItems: additionalActionMenuItems,
     availableLayouts: ["table"],
     bulkActionMenuItems: bulkActionMenuItems,
     currentPage: currentPage,
@@ -86,7 +90,7 @@ const DataTable = ({
     paginationType: paginationType,
     resultsPerPage: resultsPerPage,
     searchDelayTime: searchDelayTime,
-    tableOptions: tableOptions,
+    tableLayoutOptions: tableLayoutOptions,
     totalRows: totalRows
   });
 };

package/dist/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\";\nimport { TableLayoutProps, UniversalProps } from \"./componentTypes\";\n\nexport type DataTableProps = UniversalProps & TableLayoutProps;\n\nconst DataTable = ({\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) => {\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);\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;AAAC,SAE7BC,QAAQ;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAKjB,MAAMC,SAAS,GAAGA,CAAC;EACjBC,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;AACc,CAAC,KAAK;EACpB,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,CAAC;AACzCuC,iBAAiB,CAACC,WAAW,GAAG,WAAW;AAE3C,SAASD,iBAAiB,IAAIvC,SAAS"}