@okta/odyssey-react-mui 1.42.0 → 1.44.0

package/dist/cjs/labs/AppTile.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"AppTile.cjs","names":["_react","require","_styled","_interopRequireDefault","_index","_OdysseyDesignTokensContext","_Typography","_Box","_jsxRuntime","e","__esModule","default","APP_TILE_COMPACT_IMAGE_HEIGHT","exports","APP_TILE_IMAGE_HEIGHT","APP_TILE_PLACEHOLDER_IMAGE_WIDTH","appTileVariantValues","ImageContainerStyles","styled","shouldForwardProp","prop","odysseyDesignTokens","variant","display","alignItems","justifyContent","maxHeight","marginBlockEnd","Spacing4","Spacing3","height","width","maxWidth","ActionContainerStyles","minHeight","Spacing6","position","right","Spacing2","top","gap","Spacing1","zIndex","marginInlineEnd","ContentContainerStyles","hasTopSection","paddingBlockStart","fontSize","TypographySizeSubordinate","textAlign","ChildrenContainerStyles","marginBlockStart","StyledMuiCardStyles","_Card2","isPlaceholder","isCompact","boxShadow","overflow","padding","border","BorderWidthMain","HueNeutral200","BorderStyleMain","borderRadius","BorderRadiusMain","transition","TransitionDurationMain","TransitionTimingMain","left","opacity","DepthMedium","content","borderColor","StyledMuiCardActionAreaStyles","_CardActionArea2","margin","LoadingTile","image","title","description","children","useOdysseyDesignTokens","jsx","jsxs","Subordinate","_Skeleton2","Box","sx","Heading5","Paragraph","AppTile","actionAriaControls","actionAriaHasPopup","actionAriaExpanded","actionLabel","actionIcon","auxiliaryText","isLoading","onActionClick","onClick","tileContent","useMemo","Boolean","component","color","Button","endIcon","ariaLabel","size","tooltipText","ariaControls","ariaExpanded","ariaHasPopup","MemoizedAppTile","memo","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  Skeleton as MuiSkeleton,\n} from \"@mui/material\";\nimport styled from \"@emotion/styled\";\n\nimport { Button } from \"../Buttons/index.js\";\nimport {\n  DesignTokens,\n  useOdysseyDesignTokens,\n} from \".././OdysseyDesignTokensContext.js\";\nimport { Heading5, Paragraph, Subordinate } from \".././Typography.js\";\nimport { Box } from \".././Box.js\";\n\nexport const APP_TILE_COMPACT_IMAGE_HEIGHT = \"2.85714286rem\"; // 40px\nexport const APP_TILE_IMAGE_HEIGHT = \"4.57142857rem\"; // 64px\nexport const APP_TILE_PLACEHOLDER_IMAGE_WIDTH = \"4.57142857rem\"; // 64px\n\nexport const appTileVariantValues = [\"comfortable\", \"compact\"] as const;\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  // If true, the AppTile is loading\n  isLoading?: boolean;\n  // Event handler for when the user clicks the tile\n  onClick: MouseEventHandler;\n  // A string for the tile title\n  title?: string;\n  // Whether the tile is comfortable or compact\n  variant?: (typeof appTileVariantValues)[number];\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\ntype LoadingTileProps = {\n  children: boolean;\n  description: boolean;\n  hasTopSection: boolean;\n  image: boolean;\n  title: boolean;\n  variant: AppTileProps[\"variant\"];\n};\n\nconst ImageContainerStyles = styled(\"div\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" && prop !== \"variant\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n  variant: AppTileProps[\"variant\"];\n}>(({ odysseyDesignTokens, variant }) => ({\n  display: \"flex\",\n  alignItems: \"flex-start\",\n  justifyContent: variant === \"compact\" ? \"center\" : \"flex-start\",\n  maxHeight:\n    variant === \"compact\"\n      ? APP_TILE_COMPACT_IMAGE_HEIGHT\n      : APP_TILE_IMAGE_HEIGHT,\n  marginBlockEnd:\n    variant === \"compact\"\n      ? odysseyDesignTokens.Spacing4\n      : odysseyDesignTokens.Spacing3,\n\n  [\"img\"]: {\n    height:\n      variant === \"compact\"\n        ? APP_TILE_COMPACT_IMAGE_HEIGHT\n        : APP_TILE_IMAGE_HEIGHT,\n    width: variant === \"compact\" ? \"100%\" : \"auto\",\n    maxWidth: \"100%\",\n  },\n}));\n\nconst ActionContainerStyles = styled(\"div\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" && prop !== \"variant\",\n})<{ odysseyDesignTokens: DesignTokens; variant: AppTileProps[\"variant\"] }>(\n  ({ odysseyDesignTokens, variant = \"comfortable\" }) => ({\n    alignItems: \"center\",\n    display: \"flex\",\n    minHeight: odysseyDesignTokens.Spacing6,\n    position: \"absolute\",\n    right: variant === \"compact\" ? 0 : odysseyDesignTokens.Spacing2,\n    top: variant === \"compact\" ? 0 : odysseyDesignTokens.Spacing2,\n    gap: odysseyDesignTokens.Spacing1,\n    zIndex: 1,\n\n    [\"& > .MuiTypography-root:last-child\"]: {\n      marginInlineEnd: odysseyDesignTokens.Spacing2,\n    },\n  }),\n);\n\nconst ContentContainerStyles = styled(\"div\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" &&\n    prop !== \"hasTopSection\" &&\n    prop !== \"variant\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n  hasTopSection: boolean;\n  variant: AppTileProps[\"variant\"];\n}>(({ odysseyDesignTokens, hasTopSection, variant }) => ({\n  alignItems: \"flex-start\",\n  paddingBlockStart: hasTopSection ? odysseyDesignTokens.Spacing4 : 0,\n  height: \"100%\",\n\n  [\".MuiTypography-root\"]: {\n    fontSize:\n      variant === \"compact\"\n        ? odysseyDesignTokens.TypographySizeSubordinate\n        : \"auto\",\n    textAlign: variant === \"compact\" ? \"center\" : \"left\",\n  },\n\n  [\"& :last-child\"]: {\n    marginBlockEnd: \"0 !important\",\n  },\n}));\n\nconst ChildrenContainerStyles = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{ odysseyDesignTokens: DesignTokens }>(({ odysseyDesignTokens }) => ({\n  [\"&:not(:first-child)\"]: {\n    marginBlockStart: odysseyDesignTokens.Spacing4,\n  },\n}));\n\nconst StyledMuiCardStyles = styled(MuiCard, {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" &&\n    prop !== \"isPlaceholder\" &&\n    prop !== \"isCompact\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n  isPlaceholder?: boolean;\n  isCompact: boolean;\n}>(({ odysseyDesignTokens, isPlaceholder = false, isCompact = false }) => ({\n  position: \"relative\",\n  boxShadow: \"none\",\n  overflow: \"unset\",\n  display: \"flex\",\n  justifyContent: isPlaceholder && isCompact ? \"center\" : \"flex-start\",\n  padding: odysseyDesignTokens.Spacing4,\n  border: `${odysseyDesignTokens.BorderWidthMain} ${odysseyDesignTokens.HueNeutral200} ${odysseyDesignTokens.BorderStyleMain}`,\n  borderRadius: odysseyDesignTokens.BorderRadiusMain,\n  transition: `border ${odysseyDesignTokens.TransitionDurationMain} ${odysseyDesignTokens.TransitionTimingMain}`,\n\n  \"&::after\": {\n    position: \"absolute\",\n    top: 0,\n    left: 0,\n    width: \"100%\",\n    height: \"100%\",\n    opacity: 0,\n    boxShadow: odysseyDesignTokens.DepthMedium,\n    borderRadius: odysseyDesignTokens.BorderRadiusMain,\n    transition: `opacity ${odysseyDesignTokens.TransitionDurationMain} ${odysseyDesignTokens.TransitionTimingMain}`,\n    zIndex: \"-1\",\n    content: '\"\"',\n  },\n\n  \"&:hover\": {\n    borderColor: \"transparent\",\n\n    \"&::after\": {\n      opacity: 1,\n    },\n  },\n}));\n\nconst StyledMuiCardActionAreaStyles = styled(MuiCardActionArea, {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{ odysseyDesignTokens: DesignTokens }>(({ odysseyDesignTokens }) => ({\n  margin: `-${odysseyDesignTokens.Spacing4}`,\n  padding: odysseyDesignTokens.Spacing4,\n}));\n\nconst LoadingTile = ({\n  image,\n  title,\n  description,\n  children,\n  hasTopSection,\n  variant,\n}: LoadingTileProps) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  return (\n    <StyledMuiCardStyles\n      odysseyDesignTokens={odysseyDesignTokens}\n      isPlaceholder\n      isCompact={variant === \"compact\"}\n    >\n      <ContentContainerStyles\n        odysseyDesignTokens={odysseyDesignTokens}\n        hasTopSection={hasTopSection}\n        variant={variant}\n      >\n        {hasTopSection && (\n          <ActionContainerStyles\n            odysseyDesignTokens={odysseyDesignTokens}\n            variant={variant}\n          >\n            <Subordinate>\n              {variant !== \"compact\" && <MuiSkeleton width={50} />}\n            </Subordinate>\n          </ActionContainerStyles>\n        )}\n        <Box sx={{ width: \"100%\" }}>\n          {image && (\n            <ImageContainerStyles\n              odysseyDesignTokens={odysseyDesignTokens}\n              variant={variant}\n            >\n              <MuiSkeleton\n                height={\n                  variant === \"compact\"\n                    ? APP_TILE_COMPACT_IMAGE_HEIGHT\n                    : APP_TILE_IMAGE_HEIGHT\n                }\n                width={\n                  variant === \"compact\"\n                    ? APP_TILE_COMPACT_IMAGE_HEIGHT\n                    : APP_TILE_PLACEHOLDER_IMAGE_WIDTH\n                }\n                variant=\"rectangular\"\n              />\n            </ImageContainerStyles>\n          )}\n\n          {title && (\n            <Heading5>\n              <MuiSkeleton />\n            </Heading5>\n          )}\n          {description && variant !== \"compact\" && (\n            <Paragraph>\n              <MuiSkeleton />\n            </Paragraph>\n          )}\n          {children && (\n            <ChildrenContainerStyles odysseyDesignTokens={odysseyDesignTokens}>\n              <MuiSkeleton\n                variant=\"rounded\"\n                width=\"100%\"\n                height={odysseyDesignTokens.Spacing6}\n              />\n            </ChildrenContainerStyles>\n          )}\n        </Box>\n      </ContentContainerStyles>\n    </StyledMuiCardStyles>\n  );\n};\n\nconst AppTile = ({\n  actionAriaControls,\n  actionAriaHasPopup,\n  actionAriaExpanded,\n  actionLabel,\n  actionIcon,\n  auxiliaryText,\n  children,\n  description,\n  image,\n  isLoading,\n  onActionClick,\n  onClick,\n  title,\n  variant = \"comfortable\",\n}: AppTileProps) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  const tileContent = useMemo(\n    () => (\n      <ContentContainerStyles\n        odysseyDesignTokens={odysseyDesignTokens}\n        hasTopSection={\n          typeof onActionClick === \"function\" || Boolean(auxiliaryText)\n        }\n        variant={variant}\n      >\n        {image && (\n          <ImageContainerStyles\n            odysseyDesignTokens={odysseyDesignTokens}\n            variant={variant}\n          >\n            {image}\n          </ImageContainerStyles>\n        )}\n\n        {title && <Heading5 component=\"div\">{title}</Heading5>}\n        {description && variant !== \"compact\" && (\n          <Paragraph color=\"textSecondary\">{description}</Paragraph>\n        )}\n\n        {children && (\n          <ChildrenContainerStyles odysseyDesignTokens={odysseyDesignTokens}>\n            {children}\n          </ChildrenContainerStyles>\n        )}\n      </ContentContainerStyles>\n    ),\n    [\n      auxiliaryText,\n      children,\n      description,\n      image,\n      odysseyDesignTokens,\n      onActionClick,\n      title,\n      variant,\n    ],\n  );\n\n  return isLoading ? (\n    <LoadingTile\n      image={Boolean(image)}\n      title={Boolean(title)}\n      description={Boolean(description)}\n      children={Boolean(children)}\n      hasTopSection={\n        typeof onActionClick === \"function\" || Boolean(auxiliaryText)\n      }\n      variant={variant}\n    />\n  ) : (\n    <StyledMuiCardStyles\n      odysseyDesignTokens={odysseyDesignTokens}\n      isCompact={variant === \"compact\"}\n    >\n      {(onActionClick || auxiliaryText) && (\n        <ActionContainerStyles\n          odysseyDesignTokens={odysseyDesignTokens}\n          variant={variant}\n        >\n          {auxiliaryText && !isLoading && (\n            <Subordinate>{auxiliaryText}</Subordinate>\n          )}\n\n          {onActionClick && !isLoading && (\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        </ActionContainerStyles>\n      )}\n\n      <StyledMuiCardActionAreaStyles\n        odysseyDesignTokens={odysseyDesignTokens}\n        onClick={onClick}\n      >\n        {tileContent}\n      </StyledMuiCardActionAreaStyles>\n    </StyledMuiCardStyles>\n  );\n};\n\nconst MemoizedAppTile = memo(AppTile);\nMemoizedAppTile.displayName = \"AppTile\";\n\nexport { MemoizedAppTile as AppTile };\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"AppTile.cjs","names":["_styled","_interopRequireDefault","require","_react","_Box","_OdysseyDesignTokensContext","_Typography","_index","_jsxRuntime","e","__esModule","default","APP_TILE_COMPACT_IMAGE_HEIGHT","exports","APP_TILE_IMAGE_HEIGHT","APP_TILE_PLACEHOLDER_IMAGE_WIDTH","appTileVariantValues","ImageContainerStyles","styled","shouldForwardProp","prop","odysseyDesignTokens","variant","display","alignItems","justifyContent","maxHeight","marginBlockEnd","Spacing4","Spacing3","height","width","maxWidth","ActionContainerStyles","minHeight","Spacing6","position","right","Spacing2","top","gap","Spacing1","zIndex","marginInlineEnd","ContentContainerStyles","hasTopSection","paddingBlockStart","fontSize","TypographySizeSubordinate","textAlign","ChildrenContainerStyles","marginBlockStart","StyledMuiCardStyles","_Card2","isPlaceholder","isCompact","boxShadow","overflow","padding","border","BorderWidthMain","HueNeutral200","BorderStyleMain","borderRadius","BorderRadiusMain","transition","TransitionDurationMain","TransitionTimingMain","left","opacity","DepthMedium","content","borderColor","StyledMuiCardActionAreaStyles","_CardActionArea2","margin","LoadingTile","image","title","description","children","useOdysseyDesignTokens","jsx","jsxs","Subordinate","_Skeleton2","Box","sx","Heading5","Paragraph","AppTile","actionAriaControls","actionAriaHasPopup","actionAriaExpanded","actionLabel","actionIcon","auxiliaryText","isLoading","onActionClick","onClick","tileContent","useMemo","Boolean","component","color","Button","ariaControls","ariaExpanded","ariaHasPopup","ariaLabel","endIcon","size","tooltipText","MemoizedAppTile","memo","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 styled from \"@emotion/styled\";\nimport {\n  Card as MuiCard,\n  CardActionArea as MuiCardActionArea,\n  Skeleton as MuiSkeleton,\n} from \"@mui/material\";\nimport {\n  HTMLAttributes,\n  memo,\n  MouseEventHandler,\n  ReactElement,\n  ReactNode,\n  useMemo,\n} from \"react\";\n\nimport { Box } from \".././Box.js\";\nimport {\n  DesignTokens,\n  useOdysseyDesignTokens,\n} from \".././OdysseyDesignTokensContext.js\";\nimport { Heading5, Paragraph, Subordinate } from \".././Typography.js\";\nimport { Button } from \"../Buttons/index.js\";\n\nexport const APP_TILE_COMPACT_IMAGE_HEIGHT = \"2.85714286rem\"; // 40px\nexport const APP_TILE_IMAGE_HEIGHT = \"4.57142857rem\"; // 64px\nexport const APP_TILE_PLACEHOLDER_IMAGE_WIDTH = \"4.57142857rem\"; // 64px\n\nexport const appTileVariantValues = [\"comfortable\", \"compact\"] as const;\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  // If true, the AppTile is loading\n  isLoading?: boolean;\n  // Event handler for when the user clicks the tile\n  onClick: MouseEventHandler;\n  // A string for the tile title\n  title?: string;\n  // Whether the tile is comfortable or compact\n  variant?: (typeof appTileVariantValues)[number];\n} & (\n  | {\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 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      // Should be filled if the button controls a popup element such as a Drawer or Dialog\n      actionAriaHasPopup?: HTMLAttributes<HTMLElement>[\"aria-haspopup\"];\n      // An icon for the action button\n      actionIcon: ReactElement;\n      // The label for the button, used as the aria-label and tooltip\n      actionLabel: string;\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    }\n  | {\n      actionAriaControls?: never;\n      actionAriaExpanded?: never;\n      actionAriaHasPopup?: never;\n      actionIcon?: never;\n      actionLabel?: never;\n      onActionClick?: never;\n    }\n);\n\ntype LoadingTileProps = {\n  children: boolean;\n  description: boolean;\n  hasTopSection: boolean;\n  image: boolean;\n  title: boolean;\n  variant: AppTileProps[\"variant\"];\n};\n\nconst ImageContainerStyles = styled(\"div\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" && prop !== \"variant\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n  variant: AppTileProps[\"variant\"];\n}>(({ odysseyDesignTokens, variant }) => ({\n  display: \"flex\",\n  alignItems: \"flex-start\",\n  justifyContent: variant === \"compact\" ? \"center\" : \"flex-start\",\n  maxHeight:\n    variant === \"compact\"\n      ? APP_TILE_COMPACT_IMAGE_HEIGHT\n      : APP_TILE_IMAGE_HEIGHT,\n  marginBlockEnd:\n    variant === \"compact\"\n      ? odysseyDesignTokens.Spacing4\n      : odysseyDesignTokens.Spacing3,\n\n  [\"img\"]: {\n    height:\n      variant === \"compact\"\n        ? APP_TILE_COMPACT_IMAGE_HEIGHT\n        : APP_TILE_IMAGE_HEIGHT,\n    width: variant === \"compact\" ? \"100%\" : \"auto\",\n    maxWidth: \"100%\",\n  },\n}));\n\nconst ActionContainerStyles = styled(\"div\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" && prop !== \"variant\",\n})<{ odysseyDesignTokens: DesignTokens; variant: AppTileProps[\"variant\"] }>(\n  ({ odysseyDesignTokens, variant = \"comfortable\" }) => ({\n    alignItems: \"center\",\n    display: \"flex\",\n    minHeight: odysseyDesignTokens.Spacing6,\n    position: \"absolute\",\n    right: variant === \"compact\" ? 0 : odysseyDesignTokens.Spacing2,\n    top: variant === \"compact\" ? 0 : odysseyDesignTokens.Spacing2,\n    gap: odysseyDesignTokens.Spacing1,\n    zIndex: 1,\n\n    [\"& > .MuiTypography-root:last-child\"]: {\n      marginInlineEnd: odysseyDesignTokens.Spacing2,\n    },\n  }),\n);\n\nconst ContentContainerStyles = styled(\"div\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" &&\n    prop !== \"hasTopSection\" &&\n    prop !== \"variant\",\n})<{\n  hasTopSection: boolean;\n  odysseyDesignTokens: DesignTokens;\n  variant: AppTileProps[\"variant\"];\n}>(({ odysseyDesignTokens, hasTopSection, variant }) => ({\n  alignItems: \"flex-start\",\n  paddingBlockStart: hasTopSection ? odysseyDesignTokens.Spacing4 : 0,\n  height: \"100%\",\n\n  [\".MuiTypography-root\"]: {\n    fontSize:\n      variant === \"compact\"\n        ? odysseyDesignTokens.TypographySizeSubordinate\n        : \"auto\",\n    textAlign: variant === \"compact\" ? \"center\" : \"left\",\n  },\n\n  [\"& :last-child\"]: {\n    marginBlockEnd: \"0 !important\",\n  },\n}));\n\nconst ChildrenContainerStyles = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{ odysseyDesignTokens: DesignTokens }>(({ odysseyDesignTokens }) => ({\n  [\"&:not(:first-child)\"]: {\n    marginBlockStart: odysseyDesignTokens.Spacing4,\n  },\n}));\n\nconst StyledMuiCardStyles = styled(MuiCard, {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" &&\n    prop !== \"isPlaceholder\" &&\n    prop !== \"isCompact\",\n})<{\n  isCompact: boolean;\n  isPlaceholder?: boolean;\n  odysseyDesignTokens: DesignTokens;\n}>(({ odysseyDesignTokens, isPlaceholder = false, isCompact = false }) => ({\n  position: \"relative\",\n  boxShadow: \"none\",\n  overflow: \"unset\",\n  display: \"flex\",\n  justifyContent: isPlaceholder && isCompact ? \"center\" : \"flex-start\",\n  padding: odysseyDesignTokens.Spacing4,\n  border: `${odysseyDesignTokens.BorderWidthMain} ${odysseyDesignTokens.HueNeutral200} ${odysseyDesignTokens.BorderStyleMain}`,\n  borderRadius: odysseyDesignTokens.BorderRadiusMain,\n  transition: `border ${odysseyDesignTokens.TransitionDurationMain} ${odysseyDesignTokens.TransitionTimingMain}`,\n\n  \"&::after\": {\n    position: \"absolute\",\n    top: 0,\n    left: 0,\n    width: \"100%\",\n    height: \"100%\",\n    opacity: 0,\n    boxShadow: odysseyDesignTokens.DepthMedium,\n    borderRadius: odysseyDesignTokens.BorderRadiusMain,\n    transition: `opacity ${odysseyDesignTokens.TransitionDurationMain} ${odysseyDesignTokens.TransitionTimingMain}`,\n    zIndex: \"-1\",\n    content: '\"\"',\n  },\n\n  \"&:hover\": {\n    borderColor: \"transparent\",\n\n    \"&::after\": {\n      opacity: 1,\n    },\n  },\n}));\n\nconst StyledMuiCardActionAreaStyles = styled(MuiCardActionArea, {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{ odysseyDesignTokens: DesignTokens }>(({ odysseyDesignTokens }) => ({\n  margin: `-${odysseyDesignTokens.Spacing4}`,\n  padding: odysseyDesignTokens.Spacing4,\n}));\n\nconst LoadingTile = ({\n  image,\n  title,\n  description,\n  children,\n  hasTopSection,\n  variant,\n}: LoadingTileProps) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  return (\n    <StyledMuiCardStyles\n      isCompact={variant === \"compact\"}\n      isPlaceholder\n      odysseyDesignTokens={odysseyDesignTokens}\n    >\n      <ContentContainerStyles\n        hasTopSection={hasTopSection}\n        odysseyDesignTokens={odysseyDesignTokens}\n        variant={variant}\n      >\n        {hasTopSection && (\n          <ActionContainerStyles\n            odysseyDesignTokens={odysseyDesignTokens}\n            variant={variant}\n          >\n            <Subordinate>\n              {variant !== \"compact\" && <MuiSkeleton width={50} />}\n            </Subordinate>\n          </ActionContainerStyles>\n        )}\n        <Box sx={{ width: \"100%\" }}>\n          {image && (\n            <ImageContainerStyles\n              odysseyDesignTokens={odysseyDesignTokens}\n              variant={variant}\n            >\n              <MuiSkeleton\n                height={\n                  variant === \"compact\"\n                    ? APP_TILE_COMPACT_IMAGE_HEIGHT\n                    : APP_TILE_IMAGE_HEIGHT\n                }\n                variant=\"rectangular\"\n                width={\n                  variant === \"compact\"\n                    ? APP_TILE_COMPACT_IMAGE_HEIGHT\n                    : APP_TILE_PLACEHOLDER_IMAGE_WIDTH\n                }\n              />\n            </ImageContainerStyles>\n          )}\n\n          {title && (\n            <Heading5>\n              <MuiSkeleton />\n            </Heading5>\n          )}\n          {description && variant !== \"compact\" && (\n            <Paragraph>\n              <MuiSkeleton />\n            </Paragraph>\n          )}\n          {children && (\n            <ChildrenContainerStyles odysseyDesignTokens={odysseyDesignTokens}>\n              <MuiSkeleton\n                height={odysseyDesignTokens.Spacing6}\n                variant=\"rounded\"\n                width=\"100%\"\n              />\n            </ChildrenContainerStyles>\n          )}\n        </Box>\n      </ContentContainerStyles>\n    </StyledMuiCardStyles>\n  );\n};\n\nconst AppTile = ({\n  actionAriaControls,\n  actionAriaHasPopup,\n  actionAriaExpanded,\n  actionLabel,\n  actionIcon,\n  auxiliaryText,\n  children,\n  description,\n  image,\n  isLoading,\n  onActionClick,\n  onClick,\n  title,\n  variant = \"comfortable\",\n}: AppTileProps) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  const tileContent = useMemo(\n    () => (\n      <ContentContainerStyles\n        hasTopSection={\n          typeof onActionClick === \"function\" || Boolean(auxiliaryText)\n        }\n        odysseyDesignTokens={odysseyDesignTokens}\n        variant={variant}\n      >\n        {image && (\n          <ImageContainerStyles\n            odysseyDesignTokens={odysseyDesignTokens}\n            variant={variant}\n          >\n            {image}\n          </ImageContainerStyles>\n        )}\n\n        {title && <Heading5 component=\"div\">{title}</Heading5>}\n        {description && variant !== \"compact\" && (\n          <Paragraph color=\"textSecondary\">{description}</Paragraph>\n        )}\n\n        {children && (\n          <ChildrenContainerStyles odysseyDesignTokens={odysseyDesignTokens}>\n            {children}\n          </ChildrenContainerStyles>\n        )}\n      </ContentContainerStyles>\n    ),\n    [\n      auxiliaryText,\n      children,\n      description,\n      image,\n      odysseyDesignTokens,\n      onActionClick,\n      title,\n      variant,\n    ],\n  );\n\n  return isLoading ? (\n    <LoadingTile\n      children={Boolean(children)}\n      description={Boolean(description)}\n      hasTopSection={\n        typeof onActionClick === \"function\" || Boolean(auxiliaryText)\n      }\n      image={Boolean(image)}\n      title={Boolean(title)}\n      variant={variant}\n    />\n  ) : (\n    <StyledMuiCardStyles\n      isCompact={variant === \"compact\"}\n      odysseyDesignTokens={odysseyDesignTokens}\n    >\n      {(onActionClick || auxiliaryText) && (\n        <ActionContainerStyles\n          odysseyDesignTokens={odysseyDesignTokens}\n          variant={variant}\n        >\n          {auxiliaryText && !isLoading && (\n            <Subordinate>{auxiliaryText}</Subordinate>\n          )}\n\n          {onActionClick && !isLoading && (\n            <Button\n              ariaControls={actionAriaControls}\n              ariaExpanded={actionAriaExpanded}\n              ariaHasPopup={actionAriaHasPopup}\n              ariaLabel={actionLabel}\n              endIcon={actionIcon}\n              onClick={onActionClick}\n              size=\"small\"\n              tooltipText={actionLabel}\n              variant=\"floating\"\n            />\n          )}\n        </ActionContainerStyles>\n      )}\n\n      <StyledMuiCardActionAreaStyles\n        odysseyDesignTokens={odysseyDesignTokens}\n        onClick={onClick}\n      >\n        {tileContent}\n      </StyledMuiCardActionAreaStyles>\n    </StyledMuiCardStyles>\n  );\n};\n\nconst MemoizedAppTile = memo(AppTile);\nMemoizedAppTile.displayName = \"AppTile\";\n\nexport { MemoizedAppTile as AppTile };\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/labs/DataFilters.cjs

@@ -9,18 +9,18 @@ var _IconButton2 = _interopRequireDefault(require("@mui/material/IconButton"));
 var _Menu2 = _interopRequireDefault(require("@mui/material/Menu"));
 var _MenuItem2 = _interopRequireDefault(require("@mui/material/MenuItem"));
 var _Typography2 = _interopRequireDefault(require("@mui/material/Typography"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _react = require("react");
 var _reactI18next = require("react-i18next");
-var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _Autocomplete = require("../Autocomplete.cjs");
 var _Box = require("../Box.cjs");
 var _index = require("../Buttons/index.cjs");
-var _CheckboxGroup = require("../CheckboxGroup.cjs");
 var _Checkbox = require("../Checkbox.cjs");
+var _CheckboxGroup = require("../CheckboxGroup.cjs");
 var _index2 = require("../icons.generated/index.cjs");
 var _OdysseyDesignTokensContext = require("../OdysseyDesignTokensContext.cjs");
-var _RadioGroup = require("../RadioGroup.cjs");
 var _Radio = require("../Radio.cjs");
+var _RadioGroup = require("../RadioGroup.cjs");
 var _SearchField = require("../SearchField.cjs");
 var _Tag = require("../Tag.cjs");
 var _TagList = require("../TagList.cjs");
@@ -241,8 +241,8 @@ const DataFilters = ({
         ariaExpanded: isFiltersMenuOpen ? "true" : undefined,
         ariaHasPopup: "true",
         ariaLabel: t("filters.filters.arialabel"),
-        isDisabled: isDisabled,
         endIcon: (0, _jsxRuntime.jsx)(_index2.FilterIcon, {}),
+        isDisabled: isDisabled,
         onClick: event => {
           setFiltersMenuAnchorElement(event.currentTarget);
           setIsFiltersMenuOpen(true);
@@ -250,32 +250,32 @@ const DataFilters = ({
         variant: "secondary"
       })
     }), (0, _jsxRuntime.jsx)(_Menu2.default, {
+      anchorEl: filtersMenuAnchorElement,
       anchorOrigin: {
         horizontal: "left",
         vertical: "bottom"
       },
-      transformOrigin: {
-        horizontal: "left",
-        vertical: "top"
-      },
       id: "filters-menu",
-      anchorEl: filtersMenuAnchorElement,
       onClose: () => setIsFiltersMenuOpen(false),
       open: isFiltersMenuOpen,
       PaperProps: {
         ref: menuRef
       },
+      transformOrigin: {
+        horizontal: "left",
+        vertical: "top"
+      },
       children: filtersProp.map(filter => {
         const latestFilterValue = filters.find(f => f.id === filter.id)?.value;
         return (0, _jsxRuntime.jsx)(_MenuItem2.default, {
           "aria-controls": isFilterPopoverOpen ? "filter-form" : undefined,
+          className: filterPopoverCurrentFilter === filter && isFilterPopoverOpen === true ? "isVisiblySelected" : undefined,
           onClick: event => {
             setIsFilterPopoverOpen(true);
             setFilterPopoverAnchorElement(event.currentTarget);
             setFilterPopoverCurrentFilter(filter);
           },
           selected: filterPopoverCurrentFilter === filter && isFilterPopoverOpen === true,
-          className: filterPopoverCurrentFilter === filter && isFilterPopoverOpen === true ? "isVisiblySelected" : undefined,
           children: (0, _jsxRuntime.jsxs)(_Box.Box, {
             sx: {
               display: "flex",
@@ -333,18 +333,13 @@ const DataFilters = ({
         },
         children: [filters.length > 0 && (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
           children: [filterMenu, (0, _jsxRuntime.jsx)(_Popover2.default, {
-            id: "filter-form",
             anchorEl: filterPopoverAnchorElement,
-            elevation: 2,
-            sx: {
-              marginLeft: 2,
-              marginTop: -1
-            },
-            open: isFilterPopoverOpen,
             anchorOrigin: {
               vertical: "top",
               horizontal: "right"
             },
+            elevation: 2,
+            id: "filter-form",
             onClose: ev => {
               if (menuRef.current) {
                 const menuRect = menuRef.current.getBoundingClientRect();
@@ -356,19 +351,24 @@ const DataFilters = ({
               handleFilterSubmit();
               setIsFilterPopoverOpen(false);
             },
+            open: isFilterPopoverOpen,
+            sx: {
+              marginLeft: 2,
+              marginTop: -1
+            },
             children: (0, _jsxRuntime.jsx)(_Box.Box, {
               sx: {
                 padding: 4,
                 minWidth: 320
               },
               children: (0, _jsxRuntime.jsx)("form", {
+                noValidate: true,
                 onSubmit: ev => {
                   ev.preventDefault();
                   handleFilterSubmit();
                   setIsFilterPopoverOpen(false);
                   setIsFiltersMenuOpen(false);
                 },
-                noValidate: true,
                 children: filterPopoverCurrentFilter?.render ? filterPopoverCurrentFilter.render(updateFilters) : (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
                   children: [filterPopoverCurrentFilter?.variant === "autocomplete" && filterPopoverCurrentFilter?.options && (0, _jsxRuntime.jsxs)(StyledAutocompleteOuterContainer, {
                     odysseyDesignTokens: odysseyDesignTokens,
@@ -377,17 +377,17 @@ const DataFilters = ({
                         hasMultipleChoices: true,
                         isCustomValueAllowed: filterPopoverCurrentFilter?.isCustomValueAllowed,
                         label: filterPopoverCurrentFilter.label,
-                        value: autoCompleteValue,
                         onChange: (_, value) => {
                           handleAutocompleteFilterChange(filterPopoverCurrentFilter.id, value);
                         },
-                        options: autocompleteOptions
+                        options: autocompleteOptions,
+                        value: autoCompleteValue
                       })
                     }), (0, _jsxRuntime.jsx)(_index.Button, {
-                      variant: "primary",
+                      ariaLabel: t("filters.submit.label"),
                       endIcon: (0, _jsxRuntime.jsx)(_index2.CheckIcon, {}),
                       type: "submit",
-                      ariaLabel: t("filters.submit.label")
+                      variant: "primary"
                     })]
                   }), (filterPopoverCurrentFilter?.variant === "text" || filterPopoverCurrentFilter?.variant === "range" || filterPopoverCurrentFilter && filterPopoverCurrentFilter?.variant == undefined) && (0, _jsxRuntime.jsxs)(_Box.Box, {
                     sx: {
@@ -400,16 +400,7 @@ const DataFilters = ({
                         width: "100%"
                       },
                       children: (0, _jsxRuntime.jsx)(_TextField.TextField, {
-                        hasInitialFocus: true,
-                        label: filterPopoverCurrentFilter.label,
-                        type: filterPopoverCurrentFilter.variant === "range" ? "number" : "text",
-                        value: inputValues[filterPopoverCurrentFilter.id] ?? "",
-                        onChange: ev => updateInputValue({
-                          filterId: filterPopoverCurrentFilter.id,
-                          value: ev.currentTarget.value
-                        }),
                         endAdornment: inputValues[filterPopoverCurrentFilter.id] && (0, _jsxRuntime.jsx)(_IconButton2.default, {
-                          size: "small",
                           "aria-label": t("filters.filter.clear"),
                           onClick: () => {
                             updateInputValue({
@@ -421,28 +412,37 @@ const DataFilters = ({
                               value: undefined
                             });
                           },
+                          size: "small",
                           children: (0, _jsxRuntime.jsx)(_index2.CloseCircleFilledIcon, {})
-                        })
+                        }),
+                        hasInitialFocus: true,
+                        label: filterPopoverCurrentFilter.label,
+                        onChange: ev => updateInputValue({
+                          filterId: filterPopoverCurrentFilter.id,
+                          value: ev.currentTarget.value
+                        }),
+                        type: filterPopoverCurrentFilter.variant === "range" ? "number" : "text",
+                        value: inputValues[filterPopoverCurrentFilter.id] ?? ""
                       })
                     }), (0, _jsxRuntime.jsx)(_index.Button, {
-                      variant: "primary",
+                      ariaLabel: t("filters.submit.label"),
                       endIcon: (0, _jsxRuntime.jsx)(_index2.CheckIcon, {}),
                       type: "submit",
-                      ariaLabel: t("filters.submit.label")
+                      variant: "primary"
                     })]
                   }), filterPopoverCurrentFilter?.variant === "multi-select" && filterPopoverCurrentFilter?.options && (0, _jsxRuntime.jsx)(_CheckboxGroup.CheckboxGroup, {
-                    label: filterPopoverCurrentFilter.label,
                     isRequired: true,
+                    label: filterPopoverCurrentFilter.label,
                     children: filterPopoverCurrentFilter.options.map(option => {
                       const checkFilterInputValuesAsArray = inputValues[filterPopoverCurrentFilter.id] || [];
                       const isOptionValueInInputValues = checkFilterInputValuesAsArray.some(inputValue => inputValue.value === option.value);
                       return (0, _jsxRuntime.jsx)(_Checkbox.Checkbox, {
-                        label: option.label,
-                        value: option.value,
                         isChecked: isOptionValueInInputValues,
+                        label: option.label,
                         onChange: (_, checked) => {
                           handleCheckboxFilterAndInputValueChange(filterPopoverCurrentFilter.id, option, checked);
-                        }
+                        },
+                        value: option.value
                       }, option.value);
                     })
                   }), filterPopoverCurrentFilter?.variant === "select" && filterPopoverCurrentFilter?.options && (0, _jsxRuntime.jsxs)(_RadioGroup.RadioGroup, {
@@ -454,14 +454,14 @@ const DataFilters = ({
                       });
                     },
                     children: [(0, _jsxRuntime.jsx)(_Radio.Radio, {
+                      isChecked: !inputValues[filterPopoverCurrentFilter.id],
                       label: t("filters.filter.any"),
-                      value: "",
-                      isChecked: !inputValues[filterPopoverCurrentFilter.id]
+                      value: ""
                     }), (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
                       children: filterPopoverCurrentFilter.options.map(option => (0, _jsxRuntime.jsx)(_Radio.Radio, {
+                        isChecked: inputValues[filterPopoverCurrentFilter.id] === option.value,
                         label: option.label,
-                        value: option.value,
-                        isChecked: inputValues[filterPopoverCurrentFilter.id] === option.value
+                        value: option.value
                       }, option.value))
                     })]
                   })]
@@ -470,15 +470,15 @@ const DataFilters = ({
             })
           })]
         }), onChangeSearch && (0, _jsxRuntime.jsx)("form", {
-          style: {
-            width: "100%"
-          },
           onSubmit: event => {
             event.preventDefault();
             if (hasSearchSubmitButton) {
               onChangeSearch(searchValue);
             }
           },
+          style: {
+            width: "100%"
+          },
           children: (0, _jsxRuntime.jsxs)(_Box.Box, {
             sx: {
               display: "flex",
@@ -486,20 +486,21 @@ const DataFilters = ({
               width: "100%"
             },
             children: [(0, _jsxRuntime.jsx)(_SearchField.SearchField, {
-              value: searchValue,
-              label: t("filters.search.label"),
-              placeholder: t("filters.search.label"),
               isDisabled: isDisabled,
+              label: t("filters.search.label"),
+              onChange: ev => setSearchValue(ev.target.value),
               onClear: () => {
                 setSearchValue("");
                 onChangeSearch("");
               },
-              onChange: ev => setSearchValue(ev.target.value)
+              placeholder: t("filters.search.label"),
+              value: searchValue
             }), hasSearchSubmitButton && (0, _jsxRuntime.jsx)(_Box.Box, {
               children: (0, _jsxRuntime.jsx)(_index.Button, {
-                variant: "primary",
+                isDisabled: isDisabled,
                 label: t("filters.search.label"),
-                onClick: () => onChangeSearch(searchValue)
+                onClick: () => onChangeSearch(searchValue),
+                variant: "primary"
               })
             })]
           })
@@ -511,9 +512,9 @@ const DataFilters = ({
         },
         children: [activeFilters.length > 0 && (0, _jsxRuntime.jsx)(_Box.Box, {
           children: (0, _jsxRuntime.jsx)(_index.Button, {
-            variant: "secondary",
             label: t("filters.clear.label"),
-            onClick: clearAllFilters
+            onClick: clearAllFilters,
+            variant: "secondary"
           })
         }), additionalActions]
       })]