@okta/odyssey-react-mui 1.42.0 → 1.44.0

package/dist/esm/inputUtils.js.map

@@ -1 +1 @@
-{"version":3,"file":"inputUtils.js","names":["useMemo","ComponentControlledState","CONTROLLED","UNCONTROLLED","getControlState","controlledValue","uncontrolledValue","undefined","useInputValues","defaultValue","value","controlState","inputValues"],"sources":["../../src/inputUtils.ts"],"sourcesContent":["/*!\n * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { useMemo } from \"react\";\n\nexport type FocusHandle = {\n  focus: () => void;\n};\n\ntype UseControlledStateProps<Value> = {\n  controlledValue?: Value;\n  uncontrolledValue?: Value;\n};\n\nexport const ComponentControlledState = {\n  CONTROLLED: \"CONTROLLED\",\n  UNCONTROLLED: \"UNCONTROLLED\",\n};\n\nexport type ModeType = keyof typeof ComponentControlledState;\nexport type ModeTypeValue = (typeof ComponentControlledState)[ModeType];\n\nexport const getControlState = <Value>({\n  controlledValue,\n  uncontrolledValue,\n}: UseControlledStateProps<Value>): ModeTypeValue => {\n  if (uncontrolledValue !== undefined || controlledValue === undefined) {\n    return ComponentControlledState.UNCONTROLLED;\n  }\n  return ComponentControlledState.CONTROLLED;\n};\n\ntype InputValueProps<Value> = {\n  defaultValue?: Value;\n  value?: Value;\n  controlState: ModeTypeValue;\n};\n\ntype InputValue<Value> =\n  | {\n      defaultValue: Value | undefined;\n      value?: undefined;\n    }\n  | {\n      value: Value | undefined;\n      defaultValue?: undefined;\n    };\n\n/**\n * In components that support being used in a controlled or uncontrolled way, the defaultValue and value props need\n * to be supplied values in a mutually exclusive way.\n * If a `value` is being provided to the component, then it is being used in a controlled manner and `defaultValue` needs to be undefined.\n * If `value` is undefined, then that means the component is being used in an uncontrolled way and `defaultValue` is either Value or undefined.\n * This helper helps ensure this mutual exclusivity between the 2 props so the component can operate as expected.\n *\n * @param {InputValueProps<Value>}: { defaultValue: Value | undefined, value: Value | undefined }\n * @returns {InputValue<Value>}: { defaultValue: Value | undefined, value?: undefined } | { defaultValue?: undefined, value: Value }\n */\nexport const useInputValues = <Value>({\n  defaultValue,\n  value,\n  controlState,\n}: InputValueProps<Value>): InputValue<Value> => {\n  const inputValues = useMemo(() => {\n    if (controlState === ComponentControlledState.CONTROLLED) {\n      return { value };\n    }\n    return { defaultValue };\n  }, [controlState, defaultValue, value]);\n  return inputValues;\n};\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,OAAO,QAAQ,OAAO;AAW/B,OAAO,MAAMC,wBAAwB,GAAG;EACtCC,UAAU,EAAE,YAAY;EACxBC,YAAY,EAAE;AAChB,CAAC;AAKD,OAAO,MAAMC,eAAe,GAAGA,CAAQ;EACrCC,eAAe;EACfC;AAC8B,CAAC,KAAoB;EACnD,IAAIA,iBAAiB,KAAKC,SAAS,IAAIF,eAAe,KAAKE,SAAS,EAAE;IACpE,OAAON,wBAAwB,CAACE,YAAY;EAC9C;EACA,OAAOF,wBAAwB,CAACC,UAAU;AAC5C,CAAC;AA4BD,OAAO,MAAMM,cAAc,GAAGA,CAAQ;EACpCC,YAAY;EACZC,KAAK;EACLC;AACsB,CAAC,KAAwB;EAC/C,MAAMC,WAAW,GAAGZ,OAAO,CAAC,MAAM;IAChC,IAAIW,YAAY,KAAKV,wBAAwB,CAACC,UAAU,EAAE;MACxD,OAAO;QAAEQ;MAAM,CAAC;IAClB;IACA,OAAO;MAAED;IAAa,CAAC;EACzB,CAAC,EAAE,CAACE,YAAY,EAAEF,YAAY,EAAEC,KAAK,CAAC,CAAC;EACvC,OAAOE,WAAW;AACpB,CAAC","ignoreList":[]}
+{"version":3,"file":"inputUtils.js","names":["useMemo","ComponentControlledState","CONTROLLED","UNCONTROLLED","getControlState","controlledValue","uncontrolledValue","undefined","useInputValues","defaultValue","value","controlState","inputValues"],"sources":["../../src/inputUtils.ts"],"sourcesContent":["/*!\n * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { useMemo } from \"react\";\n\nexport type FocusHandle = {\n  focus: () => void;\n};\n\ntype UseControlledStateProps<Value> = {\n  controlledValue?: Value;\n  uncontrolledValue?: Value;\n};\n\nexport const ComponentControlledState = {\n  CONTROLLED: \"CONTROLLED\",\n  UNCONTROLLED: \"UNCONTROLLED\",\n};\n\nexport type ModeType = keyof typeof ComponentControlledState;\nexport type ModeTypeValue = (typeof ComponentControlledState)[ModeType];\n\nexport const getControlState = <Value>({\n  controlledValue,\n  uncontrolledValue,\n}: UseControlledStateProps<Value>): ModeTypeValue => {\n  if (uncontrolledValue !== undefined || controlledValue === undefined) {\n    return ComponentControlledState.UNCONTROLLED;\n  }\n  return ComponentControlledState.CONTROLLED;\n};\n\ntype InputValueProps<Value> = {\n  controlState: ModeTypeValue;\n  defaultValue?: Value;\n  value?: Value;\n};\n\ntype InputValue<Value> =\n  | {\n      defaultValue: Value | undefined;\n      value?: undefined;\n    }\n  | {\n      defaultValue?: undefined;\n      value: Value | undefined;\n    };\n\n/**\n * In components that support being used in a controlled or uncontrolled way, the defaultValue and value props need\n * to be supplied values in a mutually exclusive way.\n * If a `value` is being provided to the component, then it is being used in a controlled manner and `defaultValue` needs to be undefined.\n * If `value` is undefined, then that means the component is being used in an uncontrolled way and `defaultValue` is either Value or undefined.\n * This helper helps ensure this mutual exclusivity between the 2 props so the component can operate as expected.\n *\n * @param {InputValueProps<Value>}: { defaultValue: Value | undefined, value: Value | undefined }\n * @returns {InputValue<Value>}: { defaultValue: Value | undefined, value?: undefined } | { defaultValue?: undefined, value: Value }\n */\nexport const useInputValues = <Value>({\n  defaultValue,\n  value,\n  controlState,\n}: InputValueProps<Value>): InputValue<Value> => {\n  const inputValues = useMemo(() => {\n    if (controlState === ComponentControlledState.CONTROLLED) {\n      return { value };\n    }\n    return { defaultValue };\n  }, [controlState, defaultValue, value]);\n  return inputValues;\n};\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,OAAO,QAAQ,OAAO;AAW/B,OAAO,MAAMC,wBAAwB,GAAG;EACtCC,UAAU,EAAE,YAAY;EACxBC,YAAY,EAAE;AAChB,CAAC;AAKD,OAAO,MAAMC,eAAe,GAAGA,CAAQ;EACrCC,eAAe;EACfC;AAC8B,CAAC,KAAoB;EACnD,IAAIA,iBAAiB,KAAKC,SAAS,IAAIF,eAAe,KAAKE,SAAS,EAAE;IACpE,OAAON,wBAAwB,CAACE,YAAY;EAC9C;EACA,OAAOF,wBAAwB,CAACC,UAAU;AAC5C,CAAC;AA4BD,OAAO,MAAMM,cAAc,GAAGA,CAAQ;EACpCC,YAAY;EACZC,KAAK;EACLC;AACsB,CAAC,KAAwB;EAC/C,MAAMC,WAAW,GAAGZ,OAAO,CAAC,MAAM;IAChC,IAAIW,YAAY,KAAKV,wBAAwB,CAACC,UAAU,EAAE;MACxD,OAAO;QAAEQ;MAAM,CAAC;IAClB;IACA,OAAO;MAAED;IAAa,CAAC;EACzB,CAAC,EAAE,CAACE,YAAY,EAAEF,YAAY,EAAEC,KAAK,CAAC,CAAC;EACvC,OAAOE,WAAW;AACpB,CAAC","ignoreList":[]}

package/dist/esm/labs/AppTile.js

@@ -13,12 +13,12 @@ import _Card from "@mui/material/Card";
  * 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 "../Buttons/index.js";
+import { memo, useMemo } from "react";
+import { Box } from ".././Box.js";
 import { useOdysseyDesignTokens } from ".././OdysseyDesignTokensContext.js";
 import { Heading5, Paragraph, Subordinate } from ".././Typography.js";
-import { Box } from ".././Box.js";
+import { Button } from "../Buttons/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const APP_TILE_COMPACT_IMAGE_HEIGHT = "2.85714286rem";
 export const APP_TILE_IMAGE_HEIGHT = "4.57142857rem";
@@ -140,12 +140,12 @@ const LoadingTile = ({
 }) => {
   const odysseyDesignTokens = useOdysseyDesignTokens();
   return _jsx(StyledMuiCardStyles, {
-    odysseyDesignTokens: odysseyDesignTokens,
-    isPlaceholder: true,
     isCompact: variant === "compact",
+    isPlaceholder: true,
+    odysseyDesignTokens: odysseyDesignTokens,
     children: _jsxs(ContentContainerStyles, {
-      odysseyDesignTokens: odysseyDesignTokens,
       hasTopSection: hasTopSection,
+      odysseyDesignTokens: odysseyDesignTokens,
       variant: variant,
       children: [hasTopSection && _jsx(ActionContainerStyles, {
         odysseyDesignTokens: odysseyDesignTokens,
@@ -164,8 +164,8 @@ const LoadingTile = ({
           variant: variant,
           children: _jsx(_Skeleton, {
             height: variant === "compact" ? APP_TILE_COMPACT_IMAGE_HEIGHT : APP_TILE_IMAGE_HEIGHT,
-            width: variant === "compact" ? APP_TILE_COMPACT_IMAGE_HEIGHT : APP_TILE_PLACEHOLDER_IMAGE_WIDTH,
-            variant: "rectangular"
+            variant: "rectangular",
+            width: variant === "compact" ? APP_TILE_COMPACT_IMAGE_HEIGHT : APP_TILE_PLACEHOLDER_IMAGE_WIDTH
           })
         }), title && _jsx(Heading5, {
           children: _jsx(_Skeleton, {})
@@ -174,9 +174,9 @@ const LoadingTile = ({
         }), children && _jsx(ChildrenContainerStyles, {
           odysseyDesignTokens: odysseyDesignTokens,
           children: _jsx(_Skeleton, {
+            height: odysseyDesignTokens.Spacing6,
             variant: "rounded",
-            width: "100%",
-            height: odysseyDesignTokens.Spacing6
+            width: "100%"
           })
         })]
       })]
@@ -201,8 +201,8 @@ const AppTile = ({
 }) => {
   const odysseyDesignTokens = useOdysseyDesignTokens();
   const tileContent = useMemo(() => _jsxs(ContentContainerStyles, {
-    odysseyDesignTokens: odysseyDesignTokens,
     hasTopSection: typeof onActionClick === "function" || Boolean(auxiliaryText),
+    odysseyDesignTokens: odysseyDesignTokens,
     variant: variant,
     children: [image && _jsx(ImageContainerStyles, {
       odysseyDesignTokens: odysseyDesignTokens,
@@ -220,30 +220,30 @@ const AppTile = ({
     })]
   }), [auxiliaryText, children, description, image, odysseyDesignTokens, onActionClick, title, variant]);
   return isLoading ? _jsx(LoadingTile, {
-    image: Boolean(image),
-    title: Boolean(title),
-    description: Boolean(description),
     children: Boolean(children),
+    description: Boolean(description),
     hasTopSection: typeof onActionClick === "function" || Boolean(auxiliaryText),
+    image: Boolean(image),
+    title: Boolean(title),
     variant: variant
   }) : _jsxs(StyledMuiCardStyles, {
-    odysseyDesignTokens: odysseyDesignTokens,
     isCompact: variant === "compact",
+    odysseyDesignTokens: odysseyDesignTokens,
     children: [(onActionClick || auxiliaryText) && _jsxs(ActionContainerStyles, {
       odysseyDesignTokens: odysseyDesignTokens,
       variant: variant,
       children: [auxiliaryText && !isLoading && _jsx(Subordinate, {
         children: auxiliaryText
       }), onActionClick && !isLoading && _jsx(Button, {
-        endIcon: actionIcon,
-        ariaLabel: actionLabel,
-        variant: "floating",
-        size: "small",
-        tooltipText: actionLabel,
         ariaControls: actionAriaControls,
         ariaExpanded: actionAriaExpanded,
         ariaHasPopup: actionAriaHasPopup,
-        onClick: onActionClick
+        ariaLabel: actionLabel,
+        endIcon: actionIcon,
+        onClick: onActionClick,
+        size: "small",
+        tooltipText: actionLabel,
+        variant: "floating"
       })]
     }), _jsx(StyledMuiCardActionAreaStyles, {
       odysseyDesignTokens: odysseyDesignTokens,

package/dist/esm/labs/AppTile.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppTile.js","names":["memo","useMemo","styled","Button","useOdysseyDesignTokens","Heading5","Paragraph","Subordinate","Box","jsx","_jsx","jsxs","_jsxs","APP_TILE_COMPACT_IMAGE_HEIGHT","APP_TILE_IMAGE_HEIGHT","APP_TILE_PLACEHOLDER_IMAGE_WIDTH","appTileVariantValues","ImageContainerStyles","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","_Card","isPlaceholder","isCompact","boxShadow","overflow","padding","border","BorderWidthMain","HueNeutral200","BorderStyleMain","borderRadius","BorderRadiusMain","transition","TransitionDurationMain","TransitionTimingMain","left","opacity","DepthMedium","content","borderColor","StyledMuiCardActionAreaStyles","_CardActionArea","margin","LoadingTile","image","title","description","children","_Skeleton","sx","AppTile","actionAriaControls","actionAriaHasPopup","actionAriaExpanded","actionLabel","actionIcon","auxiliaryText","isLoading","onActionClick","onClick","tileContent","Boolean","component","color","endIcon","ariaLabel","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  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.js","names":["styled","memo","useMemo","Box","useOdysseyDesignTokens","Heading5","Paragraph","Subordinate","Button","jsx","_jsx","jsxs","_jsxs","APP_TILE_COMPACT_IMAGE_HEIGHT","APP_TILE_IMAGE_HEIGHT","APP_TILE_PLACEHOLDER_IMAGE_WIDTH","appTileVariantValues","ImageContainerStyles","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","_Card","isPlaceholder","isCompact","boxShadow","overflow","padding","border","BorderWidthMain","HueNeutral200","BorderStyleMain","borderRadius","BorderRadiusMain","transition","TransitionDurationMain","TransitionTimingMain","left","opacity","DepthMedium","content","borderColor","StyledMuiCardActionAreaStyles","_CardActionArea","margin","LoadingTile","image","title","description","children","_Skeleton","sx","AppTile","actionAriaControls","actionAriaHasPopup","actionAriaExpanded","actionLabel","actionIcon","auxiliaryText","isLoading","onActionClick","onClick","tileContent","Boolean","component","color","ariaControls","ariaExpanded","ariaHasPopup","ariaLabel","endIcon","size","tooltipText","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 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/esm/labs/DataFilters.js

@@ -15,18 +15,18 @@ import _Typography from "@mui/material/Typography";
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
+import styled from "@emotion/styled";
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Trans, useTranslation } from "react-i18next";
-import styled from "@emotion/styled";
 import { Autocomplete } from "../Autocomplete.js";
 import { Box } from "../Box.js";
 import { Button } from "../Buttons/index.js";
-import { CheckboxGroup } from "../CheckboxGroup.js";
 import { Checkbox } from "../Checkbox.js";
+import { CheckboxGroup } from "../CheckboxGroup.js";
 import { CheckIcon, ChevronRightIcon, CloseCircleFilledIcon, FilterIcon } from "../icons.generated/index.js";
 import { useOdysseyDesignTokens } from "../OdysseyDesignTokensContext.js";
-import { RadioGroup } from "../RadioGroup.js";
 import { Radio } from "../Radio.js";
+import { RadioGroup } from "../RadioGroup.js";
 import { SearchField } from "../SearchField.js";
 import { Tag } from "../Tag.js";
 import { TagList } from "../TagList.js";
@@ -234,8 +234,8 @@ const DataFilters = ({
         ariaExpanded: isFiltersMenuOpen ? "true" : undefined,
         ariaHasPopup: "true",
         ariaLabel: t("filters.filters.arialabel"),
-        isDisabled: isDisabled,
         endIcon: _jsx(FilterIcon, {}),
+        isDisabled: isDisabled,
         onClick: event => {
           setFiltersMenuAnchorElement(event.currentTarget);
           setIsFiltersMenuOpen(true);
@@ -243,32 +243,32 @@ const DataFilters = ({
         variant: "secondary"
       })
     }), _jsx(_Menu, {
+      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 _jsx(_MenuItem, {
           "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: _jsxs(Box, {
             sx: {
               display: "flex",
@@ -326,18 +326,13 @@ const DataFilters = ({
         },
         children: [filters.length > 0 && _jsxs(_Fragment, {
           children: [filterMenu, _jsx(_Popover, {
-            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();
@@ -349,19 +344,24 @@ const DataFilters = ({
               handleFilterSubmit();
               setIsFilterPopoverOpen(false);
             },
+            open: isFilterPopoverOpen,
+            sx: {
+              marginLeft: 2,
+              marginTop: -1
+            },
             children: _jsx(Box, {
               sx: {
                 padding: 4,
                 minWidth: 320
               },
               children: _jsx("form", {
+                noValidate: true,
                 onSubmit: ev => {
                   ev.preventDefault();
                   handleFilterSubmit();
                   setIsFilterPopoverOpen(false);
                   setIsFiltersMenuOpen(false);
                 },
-                noValidate: true,
                 children: filterPopoverCurrentFilter?.render ? filterPopoverCurrentFilter.render(updateFilters) : _jsxs(_Fragment, {
                   children: [filterPopoverCurrentFilter?.variant === "autocomplete" && filterPopoverCurrentFilter?.options && _jsxs(StyledAutocompleteOuterContainer, {
                     odysseyDesignTokens: odysseyDesignTokens,
@@ -370,17 +370,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
                       })
                     }), _jsx(Button, {
-                      variant: "primary",
+                      ariaLabel: t("filters.submit.label"),
                       endIcon: _jsx(CheckIcon, {}),
                       type: "submit",
-                      ariaLabel: t("filters.submit.label")
+                      variant: "primary"
                     })]
                   }), (filterPopoverCurrentFilter?.variant === "text" || filterPopoverCurrentFilter?.variant === "range" || filterPopoverCurrentFilter && filterPopoverCurrentFilter?.variant == undefined) && _jsxs(Box, {
                     sx: {
@@ -393,16 +393,7 @@ const DataFilters = ({
                         width: "100%"
                       },
                       children: _jsx(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] && _jsx(_IconButton, {
-                          size: "small",
                           "aria-label": t("filters.filter.clear"),
                           onClick: () => {
                             updateInputValue({
@@ -414,28 +405,37 @@ const DataFilters = ({
                               value: undefined
                             });
                           },
+                          size: "small",
                           children: _jsx(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] ?? ""
                       })
                     }), _jsx(Button, {
-                      variant: "primary",
+                      ariaLabel: t("filters.submit.label"),
                       endIcon: _jsx(CheckIcon, {}),
                       type: "submit",
-                      ariaLabel: t("filters.submit.label")
+                      variant: "primary"
                     })]
                   }), filterPopoverCurrentFilter?.variant === "multi-select" && filterPopoverCurrentFilter?.options && _jsx(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 _jsx(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 && _jsxs(RadioGroup, {
@@ -447,14 +447,14 @@ const DataFilters = ({
                       });
                     },
                     children: [_jsx(Radio, {
+                      isChecked: !inputValues[filterPopoverCurrentFilter.id],
                       label: t("filters.filter.any"),
-                      value: "",
-                      isChecked: !inputValues[filterPopoverCurrentFilter.id]
+                      value: ""
                     }), _jsx(_Fragment, {
                       children: filterPopoverCurrentFilter.options.map(option => _jsx(Radio, {
+                        isChecked: inputValues[filterPopoverCurrentFilter.id] === option.value,
                         label: option.label,
-                        value: option.value,
-                        isChecked: inputValues[filterPopoverCurrentFilter.id] === option.value
+                        value: option.value
                       }, option.value))
                     })]
                   })]
@@ -463,15 +463,15 @@ const DataFilters = ({
             })
           })]
         }), onChangeSearch && _jsx("form", {
-          style: {
-            width: "100%"
-          },
           onSubmit: event => {
             event.preventDefault();
             if (hasSearchSubmitButton) {
               onChangeSearch(searchValue);
             }
           },
+          style: {
+            width: "100%"
+          },
           children: _jsxs(Box, {
             sx: {
               display: "flex",
@@ -479,20 +479,21 @@ const DataFilters = ({
               width: "100%"
             },
             children: [_jsx(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 && _jsx(Box, {
               children: _jsx(Button, {
-                variant: "primary",
+                isDisabled: isDisabled,
                 label: t("filters.search.label"),
-                onClick: () => onChangeSearch(searchValue)
+                onClick: () => onChangeSearch(searchValue),
+                variant: "primary"
               })
             })]
           })
@@ -504,9 +505,9 @@ const DataFilters = ({
         },
         children: [activeFilters.length > 0 && _jsx(Box, {
           children: _jsx(Button, {
-            variant: "secondary",
             label: t("filters.clear.label"),
-            onClick: clearAllFilters
+            onClick: clearAllFilters,
+            variant: "secondary"
           })
         }), additionalActions]
       })]