@okta/odyssey-react-mui 1.21.2 → 1.23.0

package/dist/labs/FileUploadPreview.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"FileUploadPreview.js","names":["memo","useCallback","styled","useTranslation","useOdysseyDesignTokens","DeleteIcon","MuiPropsContext","Tooltip","jsx","_jsx","jsxs","_jsxs","PreviewContainer","div","isDisabled","odysseyDesignTokens","color","TypographyColorDisabled","marginBlockStart","Spacing2","pointerEvents","UploadedFileContainer","display","justifyContent","alignItems","button","transform","padding","Spacing1","borderRadius","BorderRadiusMain","transition","TransitionTimingMain","backgroundColor","HueNeutral100","borderColor","FocusOutlineColorPrimary","boxShadow","outline","FocusOutlineWidthMain","FocusOutlineStyle","UploadedFile","name","onFileRemove","t","deleteHandler","renderDeleteButton","muiProps","_IconButton","onClick","size","children","tabIndex","ariaType","placement","text","Consumer","FileUploadPreview","fileNames","map","index","MemoizedFileUploadPreview","displayName"],"sources":["../../src/labs/FileUploadPreview.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { memo, useCallback } from \"react\";\nimport styled from \"@emotion/styled\";\nimport { IconButton } from \"@mui/material\";\nimport { useTranslation } from \"react-i18next\";\n\nimport { FileUploadProps } from \"./FileUpload\";\nimport {\n  useOdysseyDesignTokens,\n  DesignTokens,\n} from \"../OdysseyDesignTokensContext\";\nimport { DeleteIcon } from \"../icons.generated\";\nimport { MuiPropsContext, MuiPropsContextType } from \"../MuiPropsContext\";\nimport { Tooltip } from \"../Tooltip\";\n\nconst PreviewContainer = styled.div<{\n  isDisabled: FileUploadProps[\"isDisabled\"];\n  odysseyDesignTokens: DesignTokens;\n}>(({ isDisabled, odysseyDesignTokens }) => ({\n  color: isDisabled ? odysseyDesignTokens.TypographyColorDisabled : \"inherit\",\n  marginBlockStart: odysseyDesignTokens.Spacing2,\n  pointerEvents: isDisabled ? \"none\" : \"auto\",\n}));\n\nconst UploadedFileContainer = styled.div<{ odysseyDesignTokens: DesignTokens }>(\n  {\n    display: \"flex\",\n    justifyContent: \"space-between\",\n    alignItems: \"center\",\n\n    button: {\n      transform: \"scale(0)\",\n    },\n\n    \"&:hover, &:focus-within, &:focus\": {\n      button: {\n        transform: \"scale(1)\",\n      },\n    },\n  },\n  ({ odysseyDesignTokens }) => ({\n    padding: `${odysseyDesignTokens.Spacing1} ${odysseyDesignTokens.Spacing2}`,\n    borderRadius: odysseyDesignTokens.BorderRadiusMain,\n    transition: `background-color ${odysseyDesignTokens.TransitionTimingMain}`,\n\n    \"&:hover, &:focus-within\": {\n      backgroundColor: odysseyDesignTokens.HueNeutral100,\n    },\n\n    \"&:focus\": {\n      borderColor: odysseyDesignTokens.FocusOutlineColorPrimary,\n      boxShadow: `0 0 0 2px ${odysseyDesignTokens.FocusOutlineColorPrimary}`,\n      outline: `${odysseyDesignTokens.FocusOutlineWidthMain} ${odysseyDesignTokens.FocusOutlineStyle} transparent`,\n    },\n  }),\n);\n\ntype UploadedFileProps = {\n  name: string;\n  onFileRemove?: (name: string) => void;\n};\n\nconst UploadedFile = ({ name, onFileRemove }: UploadedFileProps) => {\n  const { t } = useTranslation();\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  const deleteHandler = useCallback(() => {\n    onFileRemove?.(name);\n  }, [onFileRemove, name]);\n\n  const renderDeleteButton = useCallback(\n    (muiProps: MuiPropsContextType) => {\n      return (\n        <IconButton\n          {...muiProps}\n          aria-label={t(\"fileupload.removefile.text\")}\n          onClick={deleteHandler}\n          size=\"small\"\n        >\n          <DeleteIcon />\n        </IconButton>\n      );\n    },\n    [deleteHandler, t],\n  );\n\n  return (\n    <UploadedFileContainer\n      // tabindex added to make this element focusable\n      tabIndex={0}\n      odysseyDesignTokens={odysseyDesignTokens}\n    >\n      {name}\n      <Tooltip\n        ariaType=\"description\"\n        placement=\"top\"\n        text={t(\"fileupload.removefile.text\")}\n      >\n        <MuiPropsContext.Consumer>\n          {renderDeleteButton}\n        </MuiPropsContext.Consumer>\n      </Tooltip>\n    </UploadedFileContainer>\n  );\n};\n\ntype FileUploadPreviewProps = {\n  fileNames: string[];\n  isDisabled: FileUploadProps[\"isDisabled\"];\n  onFileRemove?: (name: string) => void;\n};\n\nconst FileUploadPreview = ({\n  fileNames,\n  isDisabled,\n  onFileRemove,\n}: FileUploadPreviewProps) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  return (\n    <PreviewContainer\n      data-file-preview-container=\"true\"\n      isDisabled={isDisabled}\n      odysseyDesignTokens={odysseyDesignTokens}\n    >\n      {fileNames?.map((name, index) => (\n        <UploadedFile\n          key={`${index}-${name}`}\n          onFileRemove={onFileRemove}\n          name={name}\n        />\n      ))}\n    </PreviewContainer>\n  );\n};\n\nconst MemoizedFileUploadPreview = memo(FileUploadPreview);\nMemoizedFileUploadPreview.displayName = \"FileUploadPreview\";\n\nexport { MemoizedFileUploadPreview as FileUploadPreview };\n"],"mappings":"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"}

package/dist/labs/SideNav.js

@@ -1,478 +0,0 @@
-/*!
- * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.
- * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
- *
- * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *
- * See the License for the specific language governing permissions and limitations under the License.
- */
-
-import styled from "@emotion/styled";
-import { memo, useMemo, useState, useCallback } from "react";
-import { Box } from "../Box.js";
-import { Button } from "../Button.js";
-import { CollapseLeftIcon, ExpandLeftIcon } from "../icons.generated/index.js";
-import { Link } from "../Link.js";
-import { NavAccordion } from "./NavAccordion.js";
-import { useOdysseyDesignTokens } from "../OdysseyDesignTokensContext.js";
-import { Status } from "../Status.js";
-import { Heading6 } from "../Typography.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
-const SideNavCollapsedContainer = styled("div", {
-  shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "isSideNavCollapsed"
-})(({
-  odysseyDesignTokens,
-  isSideNavCollapsed
-}) => ({
-  backgroundColor: odysseyDesignTokens.HueNeutral300,
-  paddingTop: odysseyDesignTokens.Spacing5,
-  cursor: "pointer",
-  width: isSideNavCollapsed ? "auto" : 0,
-  opacity: isSideNavCollapsed ? 1 : 0,
-  visibility: isSideNavCollapsed ? "visible" : "hidden",
-  transitionProperty: "opacity",
-  transitionDuration: odysseyDesignTokens.TransitionDurationMain,
-  transitionTimingFunction: odysseyDesignTokens.TransitionTimingMain
-}));
-const SideNavExpandContainer = styled("div", {
-  shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "isSideNavCollapsed"
-})(({
-  odysseyDesignTokens,
-  isSideNavCollapsed
-}) => ({
-  backgroundColor: odysseyDesignTokens.HueNeutralWhite,
-  flexDirection: "column",
-  display: "flex",
-  opacity: isSideNavCollapsed ? 0 : 1,
-  visibility: isSideNavCollapsed ? "hidden" : "visible",
-  width: isSideNavCollapsed ? "0" : "100%",
-  transitionProperty: "opacity, width",
-  transitionDuration: odysseyDesignTokens.TransitionDurationMain,
-  transitionTimingFunction: odysseyDesignTokens.TransitionTimingMain
-}));
-const SideNavHeaderContainer = styled("div", {
-  shouldForwardProp: prop => prop !== "odysseyDesignTokens"
-})(({
-  odysseyDesignTokens
-}) => ({
-  display: "flex",
-  justifyContent: "space-between",
-  alignItems: "center",
-  paddingLeft: odysseyDesignTokens.Spacing4,
-  paddingRight: odysseyDesignTokens.Spacing4,
-  paddingTop: odysseyDesignTokens.Spacing3,
-  paddingBottom: odysseyDesignTokens.Spacing3
-}));
-const CollapseIcon = ({
-  onClick
-}) => {
-  const odysseyDesignTokens = useOdysseyDesignTokens();
-  const collapseButtonStyles = useMemo(() => ({
-    "& > button": {
-      height: odysseyDesignTokens.Spacing6,
-      width: odysseyDesignTokens.Spacing6,
-      color: odysseyDesignTokens.HueNeutral400
-    }
-  }), [odysseyDesignTokens]);
-  return _jsx(Box, {
-    sx: collapseButtonStyles,
-    children: _jsx(Button, {
-      tabIndex: 0,
-      variant: "secondary",
-      onClick: onClick,
-      startIcon: _jsx(CollapseLeftIcon, {}),
-      ariaLabel: "collapse side navigation"
-    })
-  });
-};
-const SideNavHeader = ({
-  navHeaderText,
-  isCollapsible,
-  onCollapse
-}) => {
-  const odysseyDesignTokens = useOdysseyDesignTokens();
-  const sideNavHeaderStyles = useMemo(() => ({
-    marginTop: odysseyDesignTokens.Spacing2
-  }), [odysseyDesignTokens]);
-  return _jsxs(SideNavHeaderContainer, {
-    odysseyDesignTokens: odysseyDesignTokens,
-    children: [_jsx(Box, {
-      sx: sideNavHeaderStyles,
-      children: _jsx(Heading6, {
-        children: navHeaderText
-      })
-    }), isCollapsible && _jsx(CollapseIcon, {
-      onClick: onCollapse
-    })]
-  });
-};
-const SideNavListContainer = styled.ul({
-  padding: 0,
-  listStyle: "none",
-  listStyleType: "none"
-});
-const SectionHeader = styled("li", {
-  shouldForwardProp: prop => prop !== "odysseyDesignTokens"
-})(({
-  odysseyDesignTokens
-}) => ({
-  fontSize: odysseyDesignTokens.TypographySizeOverline,
-  fontWeight: odysseyDesignTokens.TypographyWeightHeadingBold,
-  color: odysseyDesignTokens.HueNeutral600,
-  paddingTop: odysseyDesignTokens.Spacing3,
-  paddingBottom: odysseyDesignTokens.Spacing3,
-  paddingLeft: odysseyDesignTokens.Spacing4,
-  textTransform: "uppercase"
-}));
-const SideNavItemLabelContainer = styled("div", {
-  shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "isIconVisible"
-})(({
-  odysseyDesignTokens,
-  isIconVisible
-}) => ({
-  width: "100%",
-  display: "flex",
-  flexWrap: "wrap",
-  alignItems: "center",
-  fontSize: odysseyDesignTokens.TypographyScale0,
-  fontWeight: odysseyDesignTokens.TypographyWeightHeading,
-  marginLeft: isIconVisible ? odysseyDesignTokens.Spacing2 : 0,
-  "& a": {
-    color: `${odysseyDesignTokens.TypographyColorHeading} !important`,
-    fontSize: odysseyDesignTokens.TypographyScale0
-  },
-  "& a:hover": {
-    textDecoration: "none",
-    cursor: "pointer"
-  }
-}));
-const SideNavListItemContainer = styled("li", {
-  shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "isSelected" && prop !== "isDisabled"
-})(({
-  odysseyDesignTokens,
-  isSelected,
-  isDisabled
-}) => ({
-  display: "flex",
-  alignItems: "center",
-  cursor: isDisabled ? "default" : "pointer",
-  pointerEvents: isDisabled ? "none" : "auto",
-  backgroundColor: isSelected ? odysseyDesignTokens.HueNeutral50 : "unset",
-  margin: `${odysseyDesignTokens.Spacing1} 0`,
-  "&:last-child": {
-    marginBottom: odysseyDesignTokens.Spacing2
-  },
-  "& a": {
-    display: "flex",
-    alignItems: "center",
-    width: "100%",
-    minHeight: "48px",
-    padding: `${odysseyDesignTokens.Spacing3} ${odysseyDesignTokens.Spacing4}`,
-    color: `${odysseyDesignTokens.TypographyColorHeading} !important`,
-    pointerEvents: isDisabled ? "none" : "auto"
-  },
-  "& a:hover": {
-    textDecoration: "none",
-    cursor: isDisabled ? "default" : "pointer",
-    backgroundColor: !isDisabled ? odysseyDesignTokens.HueNeutral50 : "inherit"
-  },
-  "& a:focus-visible": {
-    outlineOffset: 0,
-    borderRadius: 0,
-    outlineWidth: odysseyDesignTokens.FocusOutlineWidthMain,
-    backgroundColor: !isDisabled ? odysseyDesignTokens.HueNeutral50 : "inherit"
-  }
-}));
-const SideNavFooterContainer = styled("div", {
-  shouldForwardProp: prop => prop !== "odysseyDesignTokens"
-})(({
-  odysseyDesignTokens
-}) => ({
-  paddingTop: odysseyDesignTokens.Spacing2,
-  paddingBottom: odysseyDesignTokens.Spacing2,
-  display: "flex",
-  justifyContent: "center",
-  flexWrap: "wrap",
-  alignItems: "center",
-  fontSize: odysseyDesignTokens.TypographySizeOverline,
-  "& a": {
-    color: `${odysseyDesignTokens.TypographyColorHeading} !important`
-  },
-  "& a:hover": {
-    textDecoration: "none"
-  },
-  "& a:visited": {
-    color: odysseyDesignTokens.TypographyColorHeading
-  }
-}));
-const SideNavItemLinkContent = ({
-  label,
-  startIcon,
-  endIcon,
-  severity,
-  statusLabel
-}) => {
-  const odysseyDesignTokens = useOdysseyDesignTokens();
-  const sideNavItemContentStyles = useMemo(() => ({
-    marginLeft: odysseyDesignTokens.Spacing2
-  }), [odysseyDesignTokens]);
-  return _jsxs(_Fragment, {
-    children: [startIcon && startIcon, _jsxs(SideNavItemLabelContainer, {
-      odysseyDesignTokens: odysseyDesignTokens,
-      isIconVisible: Boolean(startIcon),
-      children: [label, severity && _jsx(Box, {
-        sx: sideNavItemContentStyles,
-        children: _jsx(Status, {
-          severity: severity,
-          label: statusLabel || ""
-        })
-      })]
-    }), endIcon && endIcon]
-  });
-};
-const SideNavItemContent = ({
-  id,
-  label,
-  href,
-  target,
-  startIcon,
-  severity,
-  statusLabel,
-  endIcon,
-  onClick,
-  isSelected,
-  isDisabled
-}) => {
-  const odysseyDesignTokens = useOdysseyDesignTokens();
-  const NavItemContentClickContainer = styled("div", {
-    shouldForwardProp: prop => prop !== "odysseyDesignTokens"
-  })(() => ({
-    display: "flex",
-    alignItems: "center",
-    width: "100%",
-    minHeight: "48px",
-    padding: `${odysseyDesignTokens.Spacing3} ${odysseyDesignTokens.Spacing4}`,
-    color: `${isDisabled ? odysseyDesignTokens.TypographyColorDisabled : odysseyDesignTokens.TypographyColorHeading} !important`,
-    "&:focus-visible": {
-      borderRadius: 0,
-      outlineColor: odysseyDesignTokens.FocusOutlineColorPrimary,
-      outlineStyle: odysseyDesignTokens.FocusOutlineStyle,
-      outlineWidth: odysseyDesignTokens.FocusOutlineWidthMain,
-      backgroundColor: odysseyDesignTokens.HueNeutral50,
-      textDecoration: "none"
-    }
-  }));
-  const sideNavItemContentKeyHandler = useCallback(event => {
-    if (event?.key === "Enter") {
-      event.preventDefault();
-      onClick?.();
-    }
-  }, [onClick]);
-  const sideNavItemContent = useMemo(() => {
-    return _jsx(SideNavListItemContainer, {
-      id: id,
-      disabled: isDisabled,
-      "aria-disabled": isDisabled,
-      isDisabled: isDisabled,
-      isSelected: isSelected,
-      odysseyDesignTokens: odysseyDesignTokens,
-      children: isDisabled ? _jsx(NavItemContentClickContainer, {
-        children: _jsx(SideNavItemLinkContent, {
-          label: label,
-          startIcon: startIcon,
-          endIcon: endIcon,
-          statusLabel: statusLabel,
-          severity: severity
-        })
-      }) : !href ? _jsx(NavItemContentClickContainer, {
-        role: "button",
-        tabIndex: 0,
-        onClick: onClick,
-        onKeyDown: sideNavItemContentKeyHandler,
-        children: _jsx(SideNavItemLinkContent, {
-          label: label,
-          startIcon: startIcon,
-          endIcon: endIcon,
-          statusLabel: statusLabel,
-          severity: severity
-        })
-      }) : _jsx(Link, {
-        href: href,
-        target: target,
-        onClick: onClick,
-        children: _jsx(SideNavItemLinkContent, {
-          label: label,
-          startIcon: startIcon,
-          endIcon: endIcon,
-          statusLabel: statusLabel,
-          severity: severity
-        })
-      })
-    }, id);
-  }, [id, label, href, target, startIcon, severity, statusLabel, endIcon, onClick, isSelected, isDisabled, NavItemContentClickContainer, sideNavItemContentKeyHandler, odysseyDesignTokens]);
-  return sideNavItemContent;
-};
-const SideNavFooterContent = footerItems => {
-  const odysseyDesignTokens = useOdysseyDesignTokens();
-  const footerContent = useMemo(() => {
-    return footerItems?.map((item, index) => _jsxs(Box, {
-      sx: {
-        display: "flex"
-      },
-      children: [item.href ? _jsx(Link, {
-        href: item.href,
-        children: item.label
-      }, item.id) : _jsx(Box, {
-        component: "span",
-        children: item.label
-      }, item.id), index < footerItems.length - 1 && _jsx(Box, {
-        sx: {
-          marginLeft: odysseyDesignTokens.Spacing4,
-          marginRight: odysseyDesignTokens.Spacing4,
-          color: odysseyDesignTokens.HueNeutral300
-        },
-        children: "|"
-      }, `${item.id}-separator`)]
-    }, `${item.id}-wrapper`));
-  }, [footerItems, odysseyDesignTokens]);
-  return footerContent;
-};
-const SideNav = ({
-  navHeaderText,
-  isCollapsible,
-  onCollapse,
-  onExpand,
-  sideNavItems,
-  footerItems
-}) => {
-  const [isSideNavCollapsed, setSideNavCollapsed] = useState(false);
-  const odysseyDesignTokens = useOdysseyDesignTokens();
-  const processedSideNavItems = useMemo(() => sideNavItems.map(item => ({
-    ...item,
-    children: item.children?.map(childProps => _jsx(SideNavItemContent, {
-      ...childProps
-    }, childProps.id))
-  })), [sideNavItems]);
-  const sideNavCollapseHandler = useCallback(() => {
-    setSideNavCollapsed(!isSideNavCollapsed);
-    onCollapse?.();
-  }, [isSideNavCollapsed, setSideNavCollapsed, onCollapse]);
-  const sideNavExpandClickHandler = useCallback(() => {
-    setSideNavCollapsed(!isSideNavCollapsed);
-    onExpand?.();
-  }, [isSideNavCollapsed, setSideNavCollapsed, onExpand]);
-  const sideNavExpandKeyHandler = useCallback(event => {
-    if (event?.key === "Enter" || event?.code === "Space") {
-      event.preventDefault();
-      setSideNavCollapsed(!isSideNavCollapsed);
-      onExpand?.();
-    }
-  }, [isSideNavCollapsed, setSideNavCollapsed, onExpand]);
-  const sideNavStyles = useMemo(() => ({
-    display: "flex",
-    height: "100vh"
-  }), []);
-  const sideNavHeaderContainerStyles = useMemo(() => ({
-    position: "sticky",
-    top: 0
-  }), []);
-  const sideNavListContainerStyles = useMemo(() => ({
-    flex: 1,
-    overflowY: "auto"
-  }), []);
-  const sideNavFooterContainerStyles = useMemo(() => ({
-    position: "sticky",
-    bottom: 0,
-    paddingTop: odysseyDesignTokens.Spacing2
-  }), [odysseyDesignTokens]);
-  const expandLeftIconStyles = useMemo(() => ({
-    fontSize: "1em",
-    margin: `0 ${odysseyDesignTokens.Spacing1}`
-  }), [odysseyDesignTokens]);
-  return _jsxs(Box, {
-    sx: sideNavStyles,
-    children: [_jsx(SideNavCollapsedContainer, {
-      tabIndex: 0,
-      role: "button",
-      odysseyDesignTokens: odysseyDesignTokens,
-      isSideNavCollapsed: isSideNavCollapsed,
-      onClick: sideNavExpandClickHandler,
-      onKeyDown: sideNavExpandKeyHandler,
-      "data-testid": "collapsed-region",
-      "data-aria-label": "expand side navigation",
-      children: _jsx(ExpandLeftIcon, {
-        sx: expandLeftIconStyles
-      })
-    }), _jsxs(SideNavExpandContainer, {
-      odysseyDesignTokens: odysseyDesignTokens,
-      isSideNavCollapsed: isSideNavCollapsed,
-      "data-testid": "expanded-region",
-      children: [_jsx(Box, {
-        sx: sideNavHeaderContainerStyles,
-        children: _jsx(SideNavHeader, {
-          navHeaderText: navHeaderText,
-          isCollapsible: isCollapsible,
-          onCollapse: sideNavCollapseHandler
-        })
-      }), _jsx(Box, {
-        sx: sideNavListContainerStyles,
-        children: _jsx(SideNavListContainer, {
-          children: processedSideNavItems?.map(item => {
-            const {
-              id,
-              label,
-              isSectionHeader,
-              startIcon,
-              children,
-              isDefaultExpanded,
-              isDisabled,
-              isExpanded
-            } = item;
-            if (isSectionHeader) {
-              return _jsx(SectionHeader, {
-                id: id,
-                odysseyDesignTokens: odysseyDesignTokens,
-                children: label
-              }, id);
-            } else if (children) {
-              return _jsx(SideNavListItemContainer, {
-                id: id,
-                odysseyDesignTokens: odysseyDesignTokens,
-                children: _jsx(NavAccordion, {
-                  label: label,
-                  isDefaultExpanded: isDefaultExpanded,
-                  isExpanded: isExpanded,
-                  startIcon: startIcon,
-                  isDisabled: isDisabled,
-                  children: _jsx(SideNavListContainer, {
-                    id: `${id}-list`,
-                    children: children
-                  })
-                })
-              }, id);
-            } else {
-              return _jsx(SideNavItemContent, {
-                ...item
-              }, item.id);
-            }
-          })
-        })
-      }), footerItems && _jsx(Box, {
-        sx: sideNavFooterContainerStyles,
-        children: _jsx(SideNavFooterContainer, {
-          odysseyDesignTokens: odysseyDesignTokens,
-          children: SideNavFooterContent(footerItems)
-        })
-      })]
-    })]
-  });
-};
-const MemoizedSideNav = memo(SideNav);
-MemoizedSideNav.displayName = "SideNav";
-export { MemoizedSideNav as SideNav };
-//# sourceMappingURL=SideNav.js.map

package/dist/labs/SideNav.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"SideNav.js","names":["styled","memo","useMemo","useState","useCallback","Box","Button","CollapseLeftIcon","ExpandLeftIcon","Link","NavAccordion","useOdysseyDesignTokens","Status","Heading6","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","SideNavCollapsedContainer","shouldForwardProp","prop","odysseyDesignTokens","isSideNavCollapsed","backgroundColor","HueNeutral300","paddingTop","Spacing5","cursor","width","opacity","visibility","transitionProperty","transitionDuration","TransitionDurationMain","transitionTimingFunction","TransitionTimingMain","SideNavExpandContainer","HueNeutralWhite","flexDirection","display","SideNavHeaderContainer","justifyContent","alignItems","paddingLeft","Spacing4","paddingRight","Spacing3","paddingBottom","CollapseIcon","onClick","collapseButtonStyles","height","Spacing6","color","HueNeutral400","sx","children","tabIndex","variant","startIcon","ariaLabel","SideNavHeader","navHeaderText","isCollapsible","onCollapse","sideNavHeaderStyles","marginTop","Spacing2","SideNavListContainer","ul","padding","listStyle","listStyleType","SectionHeader","fontSize","TypographySizeOverline","fontWeight","TypographyWeightHeadingBold","HueNeutral600","textTransform","SideNavItemLabelContainer","isIconVisible","flexWrap","TypographyScale0","TypographyWeightHeading","marginLeft","TypographyColorHeading","textDecoration","SideNavListItemContainer","isSelected","isDisabled","pointerEvents","HueNeutral50","margin","Spacing1","marginBottom","minHeight","outlineOffset","borderRadius","outlineWidth","FocusOutlineWidthMain","SideNavFooterContainer","SideNavItemLinkContent","label","endIcon","severity","statusLabel","sideNavItemContentStyles","Boolean","SideNavItemContent","id","href","target","NavItemContentClickContainer","TypographyColorDisabled","outlineColor","FocusOutlineColorPrimary","outlineStyle","FocusOutlineStyle","sideNavItemContentKeyHandler","event","key","preventDefault","sideNavItemContent","disabled","role","onKeyDown","SideNavFooterContent","footerItems","footerContent","map","item","index","component","length","marginRight","SideNav","onExpand","sideNavItems","setSideNavCollapsed","processedSideNavItems","childProps","sideNavCollapseHandler","sideNavExpandClickHandler","sideNavExpandKeyHandler","code","sideNavStyles","sideNavHeaderContainerStyles","position","top","sideNavListContainerStyles","flex","overflowY","sideNavFooterContainerStyles","bottom","expandLeftIconStyles","isSectionHeader","isDefaultExpanded","isExpanded","MemoizedSideNav","displayName"],"sources":["../../src/labs/SideNav.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-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  memo,\n  useMemo,\n  useState,\n  ReactElement,\n  ReactNode,\n  useCallback,\n  KeyboardEvent,\n} from \"react\";\n\nimport { Box } from \"../Box\";\nimport { Button } from \"../Button\";\nimport type { HtmlProps } from \"../HtmlProps\";\nimport { CollapseLeftIcon, ExpandLeftIcon } from \"../icons.generated\";\nimport { Link } from \"../Link\";\nimport { NavAccordion } from \"./NavAccordion\";\nimport {\n  DesignTokens,\n  useOdysseyDesignTokens,\n} from \"../OdysseyDesignTokensContext\";\nimport { Status, statusSeverityValues } from \"../Status\";\nimport { Heading6 } from \"../Typography\";\n\nexport type SideNavItem = {\n  id: string;\n  label: string;\n  /**\n   * The icon element to display at the end of the Nav Item\n   */\n  endIcon?: ReactElement;\n  /**\n   * Whether the item is disabled. When set to true the nav item is set to Disabled color,\n   * the link/item is not clickable, and item with children is not expandable.\n   */\n  isDisabled?: boolean;\n  /**\n   * Whether the item is active/selected\n   */\n  isSelected?: boolean;\n  /**\n   * Event fired when the nav item is clicked\n   */\n  onClick?(): void;\n  /**\n   * The status element to display after the label\n   */\n  severity?: (typeof statusSeverityValues)[number];\n  /**\n   * The icon element to display at the start of the Nav Item\n   */\n  startIcon?: ReactElement;\n  /**\n   * The label to display inside the status\n   */\n  statusLabel?: string;\n  /**\n   * The link target prop. e.g., \"_blank\"\n   */\n  target?: string;\n} & (\n  | {\n      /**\n       * Determines if the side nav item is a section header\n       */\n      isSectionHeader: true;\n      href?: never;\n      children?: never;\n      isDefaultExpanded?: never;\n      isExpanded?: never;\n    }\n  | {\n      /**\n       * link added to the nav item. if it is undefined, static text will be displayed.\n       * fires onClick event when it is passed\n       */\n      href: string;\n      children?: never;\n      isSectionHeader?: never;\n      isDefaultExpanded?: never;\n      isExpanded?: never;\n    }\n  | {\n      /**\n       * An array of side nav items to be displayed as children within Accordion\n       */\n      children?: SideNavItem[];\n      /**\n       * Whether the accordion (nav item with children) is expanded by default\n       */\n      isDefaultExpanded?: boolean;\n      /**\n       * If true, expands the accordion, otherwise collapse it.\n       * Setting this prop enables control over the accordion.\n       */\n      isExpanded?: boolean;\n      isSectionHeader?: never;\n      href?: never;\n    }\n);\n\nexport type SideNavFooterItem = {\n  href?: string;\n  id: string;\n  label: string;\n};\n\nexport type SideNavProps = {\n  /**\n   * Side Nav header text that is usually reserved to show the App name\n   */\n  navHeaderText: string;\n  /**\n   *  Determines whether the side nav is collapsible\n   */\n  isCollapsible?: boolean;\n  /**\n   * Footer items in the side nav\n   */\n  footerItems?: SideNavFooterItem[];\n  /**\n   *  Triggers when the side nav is collapsed\n   */\n  onCollapse?(): void;\n  /**\n   *  Triggers when the side nav is expanded\n   */\n  onExpand?(): void;\n  /**\n   * Nav items in the side nav\n   */\n  sideNavItems: SideNavItem[];\n} & Pick<HtmlProps, \"testId\">;\n\nconst SideNavCollapsedContainer = styled(\"div\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" && prop !== \"isSideNavCollapsed\",\n})(\n  ({\n    odysseyDesignTokens,\n    isSideNavCollapsed,\n  }: {\n    odysseyDesignTokens: DesignTokens;\n    isSideNavCollapsed: boolean;\n  }) => ({\n    backgroundColor: odysseyDesignTokens.HueNeutral300,\n    paddingTop: odysseyDesignTokens.Spacing5,\n    cursor: \"pointer\",\n    width: isSideNavCollapsed ? \"auto\" : 0,\n    opacity: isSideNavCollapsed ? 1 : 0,\n    visibility: isSideNavCollapsed ? \"visible\" : \"hidden\",\n    transitionProperty: \"opacity\",\n    transitionDuration: odysseyDesignTokens.TransitionDurationMain,\n    transitionTimingFunction: odysseyDesignTokens.TransitionTimingMain,\n  }),\n);\n\nconst SideNavExpandContainer = styled(\"div\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" && prop !== \"isSideNavCollapsed\",\n})(\n  ({\n    odysseyDesignTokens,\n    isSideNavCollapsed,\n  }: {\n    odysseyDesignTokens: DesignTokens;\n    isSideNavCollapsed: boolean;\n  }) => ({\n    backgroundColor: odysseyDesignTokens.HueNeutralWhite,\n    flexDirection: \"column\",\n    display: \"flex\",\n    opacity: isSideNavCollapsed ? 0 : 1,\n    visibility: isSideNavCollapsed ? \"hidden\" : \"visible\",\n    width: isSideNavCollapsed ? \"0\" : \"100%\",\n    transitionProperty: \"opacity, width\",\n    transitionDuration: odysseyDesignTokens.TransitionDurationMain,\n    transitionTimingFunction: odysseyDesignTokens.TransitionTimingMain,\n  }),\n);\n\nconst SideNavHeaderContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})(({ odysseyDesignTokens }: { odysseyDesignTokens: DesignTokens }) => ({\n  display: \"flex\",\n  justifyContent: \"space-between\",\n  alignItems: \"center\",\n  paddingLeft: odysseyDesignTokens.Spacing4,\n  paddingRight: odysseyDesignTokens.Spacing4,\n  paddingTop: odysseyDesignTokens.Spacing3,\n  paddingBottom: odysseyDesignTokens.Spacing3,\n}));\n\nconst CollapseIcon = ({ onClick }: { onClick?(): void }): ReactElement => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  const collapseButtonStyles = useMemo(\n    () => ({\n      \"& > button\": {\n        height: odysseyDesignTokens.Spacing6,\n        width: odysseyDesignTokens.Spacing6,\n        color: odysseyDesignTokens.HueNeutral400,\n      },\n    }),\n    [odysseyDesignTokens],\n  );\n\n  return (\n    <Box sx={collapseButtonStyles}>\n      <Button\n        tabIndex={0}\n        variant=\"secondary\"\n        onClick={onClick}\n        startIcon={<CollapseLeftIcon />}\n        ariaLabel=\"collapse side navigation\"\n      />\n    </Box>\n  );\n};\n\nconst SideNavHeader = ({\n  navHeaderText,\n  isCollapsible,\n  onCollapse,\n}: Pick<\n  SideNavProps,\n  \"navHeaderText\" | \"isCollapsible\" | \"onCollapse\"\n>): ReactNode => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  const sideNavHeaderStyles = useMemo(\n    () => ({\n      marginTop: odysseyDesignTokens.Spacing2,\n    }),\n    [odysseyDesignTokens],\n  );\n\n  return (\n    <SideNavHeaderContainer odysseyDesignTokens={odysseyDesignTokens}>\n      <Box sx={sideNavHeaderStyles}>\n        <Heading6>{navHeaderText}</Heading6>\n      </Box>\n      {isCollapsible && <CollapseIcon onClick={onCollapse} />}\n    </SideNavHeaderContainer>\n  );\n};\n\nconst SideNavListContainer = styled.ul({\n  padding: 0,\n  listStyle: \"none\",\n  listStyleType: \"none\",\n});\n\nconst SectionHeader = styled(\"li\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})(({ odysseyDesignTokens }: { odysseyDesignTokens: DesignTokens }) => ({\n  fontSize: odysseyDesignTokens.TypographySizeOverline,\n  fontWeight: odysseyDesignTokens.TypographyWeightHeadingBold,\n  color: odysseyDesignTokens.HueNeutral600,\n  paddingTop: odysseyDesignTokens.Spacing3,\n  paddingBottom: odysseyDesignTokens.Spacing3,\n  paddingLeft: odysseyDesignTokens.Spacing4,\n  textTransform: \"uppercase\",\n}));\n\nconst SideNavItemLabelContainer = styled(\"div\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" && prop !== \"isIconVisible\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n  isIconVisible: boolean;\n}>(({ odysseyDesignTokens, isIconVisible }) => ({\n  width: \"100%\",\n  display: \"flex\",\n  flexWrap: \"wrap\",\n  alignItems: \"center\",\n  fontSize: odysseyDesignTokens.TypographyScale0,\n  fontWeight: odysseyDesignTokens.TypographyWeightHeading,\n  marginLeft: isIconVisible ? odysseyDesignTokens.Spacing2 : 0,\n  \"& a\": {\n    color: `${odysseyDesignTokens.TypographyColorHeading} !important`,\n    fontSize: odysseyDesignTokens.TypographyScale0,\n  },\n  \"& a:hover\": {\n    textDecoration: \"none\",\n    cursor: \"pointer\",\n  },\n}));\n\nconst SideNavListItemContainer = styled(\"li\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" &&\n    prop !== \"isSelected\" &&\n    prop !== \"isDisabled\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n  isSelected?: boolean;\n  disabled?: boolean;\n  isDisabled?: boolean;\n}>(({ odysseyDesignTokens, isSelected, isDisabled }) => ({\n  display: \"flex\",\n  alignItems: \"center\",\n  cursor: isDisabled ? \"default\" : \"pointer\",\n  pointerEvents: isDisabled ? \"none\" : \"auto\",\n  backgroundColor: isSelected ? odysseyDesignTokens.HueNeutral50 : \"unset\",\n  margin: `${odysseyDesignTokens.Spacing1} 0`,\n  \"&:last-child\": {\n    marginBottom: odysseyDesignTokens.Spacing2,\n  },\n  \"& a\": {\n    display: \"flex\",\n    alignItems: \"center\",\n    width: \"100%\",\n    minHeight: \"48px\",\n    padding: `${odysseyDesignTokens.Spacing3} ${odysseyDesignTokens.Spacing4}`,\n    color: `${odysseyDesignTokens.TypographyColorHeading} !important`,\n    pointerEvents: isDisabled ? \"none\" : \"auto\",\n  },\n  \"& a:hover\": {\n    textDecoration: \"none\",\n    cursor: isDisabled ? \"default\" : \"pointer\",\n    backgroundColor: !isDisabled ? odysseyDesignTokens.HueNeutral50 : \"inherit\",\n  },\n  \"& a:focus-visible\": {\n    outlineOffset: 0,\n    borderRadius: 0,\n    outlineWidth: odysseyDesignTokens.FocusOutlineWidthMain,\n    backgroundColor: !isDisabled ? odysseyDesignTokens.HueNeutral50 : \"inherit\",\n  },\n}));\n\nconst SideNavFooterContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})(({ odysseyDesignTokens }: { odysseyDesignTokens: DesignTokens }) => ({\n  paddingTop: odysseyDesignTokens.Spacing2,\n  paddingBottom: odysseyDesignTokens.Spacing2,\n  display: \"flex\",\n  justifyContent: \"center\",\n  flexWrap: \"wrap\",\n  alignItems: \"center\",\n  fontSize: odysseyDesignTokens.TypographySizeOverline,\n  \"& a\": {\n    color: `${odysseyDesignTokens.TypographyColorHeading} !important`,\n  },\n  \"& a:hover\": {\n    textDecoration: \"none\",\n  },\n  \"& a:visited\": {\n    color: odysseyDesignTokens.TypographyColorHeading,\n  },\n}));\n\nconst SideNavItemLinkContent = ({\n  label,\n  startIcon,\n  endIcon,\n  severity,\n  statusLabel,\n}: Pick<\n  SideNavItem,\n  \"label\" | \"startIcon\" | \"endIcon\" | \"severity\" | \"statusLabel\"\n>): ReactNode => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  const sideNavItemContentStyles = useMemo(\n    () => ({\n      marginLeft: odysseyDesignTokens.Spacing2,\n    }),\n    [odysseyDesignTokens],\n  );\n\n  return (\n    <>\n      {startIcon && startIcon}\n      <SideNavItemLabelContainer\n        odysseyDesignTokens={odysseyDesignTokens}\n        isIconVisible={Boolean(startIcon)}\n      >\n        {label}\n        {severity && (\n          <Box sx={sideNavItemContentStyles}>\n            <Status severity={severity} label={statusLabel || \"\"} />\n          </Box>\n        )}\n      </SideNavItemLabelContainer>\n      {endIcon && endIcon}\n    </>\n  );\n};\n\nconst SideNavItemContent = ({\n  id,\n  label,\n  href,\n  target,\n  startIcon,\n  severity,\n  statusLabel,\n  endIcon,\n  onClick,\n  isSelected,\n  isDisabled,\n}: Pick<\n  SideNavItem,\n  | \"id\"\n  | \"label\"\n  | \"href\"\n  | \"target\"\n  | \"startIcon\"\n  | \"severity\"\n  | \"statusLabel\"\n  | \"endIcon\"\n  | \"onClick\"\n  | \"isSelected\"\n  | \"isDisabled\"\n>) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  const NavItemContentClickContainer = styled(\"div\", {\n    shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n  })(() => ({\n    display: \"flex\",\n    alignItems: \"center\",\n    width: \"100%\",\n    minHeight: \"48px\",\n    padding: `${odysseyDesignTokens.Spacing3} ${odysseyDesignTokens.Spacing4}`,\n    color: `${isDisabled ? odysseyDesignTokens.TypographyColorDisabled : odysseyDesignTokens.TypographyColorHeading} !important`,\n    \"&:focus-visible\": {\n      borderRadius: 0,\n      outlineColor: odysseyDesignTokens.FocusOutlineColorPrimary,\n      outlineStyle: odysseyDesignTokens.FocusOutlineStyle,\n      outlineWidth: odysseyDesignTokens.FocusOutlineWidthMain,\n      backgroundColor: odysseyDesignTokens.HueNeutral50,\n      textDecoration: \"none\",\n    },\n  }));\n\n  const sideNavItemContentKeyHandler = useCallback(\n    (event: KeyboardEvent<HTMLDivElement>) => {\n      if (event?.key === \"Enter\") {\n        event.preventDefault();\n        onClick?.();\n      }\n    },\n    [onClick],\n  );\n\n  const sideNavItemContent = useMemo(() => {\n    return (\n      <SideNavListItemContainer\n        id={id}\n        key={id}\n        disabled={isDisabled}\n        aria-disabled={isDisabled}\n        isDisabled={isDisabled}\n        isSelected={isSelected}\n        odysseyDesignTokens={odysseyDesignTokens}\n      >\n        {\n          // Use Link for nav items with links and div for disabled or non-link items\n          isDisabled ? (\n            <NavItemContentClickContainer>\n              <SideNavItemLinkContent\n                label={label}\n                startIcon={startIcon}\n                endIcon={endIcon}\n                statusLabel={statusLabel}\n                severity={severity}\n              />\n            </NavItemContentClickContainer>\n          ) : !href ? (\n            <NavItemContentClickContainer\n              role=\"button\"\n              tabIndex={0}\n              onClick={onClick}\n              onKeyDown={sideNavItemContentKeyHandler}\n            >\n              <SideNavItemLinkContent\n                label={label}\n                startIcon={startIcon}\n                endIcon={endIcon}\n                statusLabel={statusLabel}\n                severity={severity}\n              />\n            </NavItemContentClickContainer>\n          ) : (\n            <Link href={href} target={target} onClick={onClick}>\n              <SideNavItemLinkContent\n                label={label}\n                startIcon={startIcon}\n                endIcon={endIcon}\n                statusLabel={statusLabel}\n                severity={severity}\n              />\n            </Link>\n          )\n        }\n      </SideNavListItemContainer>\n    );\n  }, [\n    id,\n    label,\n    href,\n    target,\n    startIcon,\n    severity,\n    statusLabel,\n    endIcon,\n    onClick,\n    isSelected,\n    isDisabled,\n    NavItemContentClickContainer,\n    sideNavItemContentKeyHandler,\n    odysseyDesignTokens,\n  ]);\n\n  return sideNavItemContent;\n};\n\nconst SideNavFooterContent = (footerItems: SideNavFooterItem[]): ReactNode => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  const footerContent = useMemo(() => {\n    return footerItems?.map((item, index) => (\n      <Box\n        key={`${item.id}-wrapper`}\n        sx={{\n          display: \"flex\",\n        }}\n      >\n        {item.href ? (\n          <Link key={item.id} href={item.href}>\n            {item.label}\n          </Link>\n        ) : (\n          <Box component=\"span\" key={item.id}>\n            {item.label}\n          </Box>\n        )}\n        {index < footerItems.length - 1 && (\n          <Box\n            key={`${item.id}-separator`}\n            sx={{\n              marginLeft: odysseyDesignTokens.Spacing4,\n              marginRight: odysseyDesignTokens.Spacing4,\n              color: odysseyDesignTokens.HueNeutral300,\n            }}\n          >\n            |\n          </Box>\n        )}\n      </Box>\n    ));\n  }, [footerItems, odysseyDesignTokens]);\n\n  return footerContent;\n};\n\nconst SideNav = ({\n  navHeaderText,\n  isCollapsible,\n  onCollapse,\n  onExpand,\n  sideNavItems,\n  footerItems,\n}: SideNavProps) => {\n  const [isSideNavCollapsed, setSideNavCollapsed] = useState(false);\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  const processedSideNavItems = useMemo(\n    () =>\n      sideNavItems.map((item) => ({\n        ...item,\n        children: item.children?.map((childProps) => (\n          <SideNavItemContent key={childProps.id} {...childProps} />\n        )),\n      })),\n    [sideNavItems],\n  );\n\n  const sideNavCollapseHandler = useCallback(() => {\n    setSideNavCollapsed(!isSideNavCollapsed);\n    onCollapse?.();\n  }, [isSideNavCollapsed, setSideNavCollapsed, onCollapse]);\n\n  const sideNavExpandClickHandler = useCallback(() => {\n    setSideNavCollapsed(!isSideNavCollapsed);\n    onExpand?.();\n  }, [isSideNavCollapsed, setSideNavCollapsed, onExpand]);\n\n  const sideNavExpandKeyHandler = useCallback(\n    (event: KeyboardEvent<HTMLDivElement>) => {\n      if (event?.key === \"Enter\" || event?.code === \"Space\") {\n        event.preventDefault();\n        setSideNavCollapsed(!isSideNavCollapsed);\n        onExpand?.();\n      }\n    },\n    [isSideNavCollapsed, setSideNavCollapsed, onExpand],\n  );\n\n  const sideNavStyles = useMemo(\n    () => ({\n      display: \"flex\",\n      height: \"100vh\",\n    }),\n    [],\n  );\n\n  const sideNavHeaderContainerStyles = useMemo(\n    () => ({\n      position: \"sticky\",\n      top: 0,\n    }),\n    [],\n  );\n\n  const sideNavListContainerStyles = useMemo(\n    () => ({\n      flex: 1,\n      overflowY: \"auto\",\n    }),\n    [],\n  );\n\n  const sideNavFooterContainerStyles = useMemo(\n    () => ({\n      position: \"sticky\",\n      bottom: 0,\n      paddingTop: odysseyDesignTokens.Spacing2,\n    }),\n    [odysseyDesignTokens],\n  );\n\n  const expandLeftIconStyles = useMemo(\n    () => ({\n      fontSize: \"1em\",\n      margin: `0 ${odysseyDesignTokens.Spacing1}`,\n    }),\n    [odysseyDesignTokens],\n  );\n\n  return (\n    <Box sx={sideNavStyles}>\n      <SideNavCollapsedContainer\n        tabIndex={0}\n        role=\"button\"\n        odysseyDesignTokens={odysseyDesignTokens}\n        isSideNavCollapsed={isSideNavCollapsed}\n        onClick={sideNavExpandClickHandler}\n        onKeyDown={sideNavExpandKeyHandler}\n        data-testid=\"collapsed-region\"\n        data-aria-label=\"expand side navigation\"\n      >\n        <ExpandLeftIcon sx={expandLeftIconStyles} />\n      </SideNavCollapsedContainer>\n      <SideNavExpandContainer\n        odysseyDesignTokens={odysseyDesignTokens}\n        isSideNavCollapsed={isSideNavCollapsed}\n        data-testid=\"expanded-region\"\n      >\n        <Box sx={sideNavHeaderContainerStyles}>\n          <SideNavHeader\n            navHeaderText={navHeaderText}\n            isCollapsible={isCollapsible}\n            onCollapse={sideNavCollapseHandler}\n          />\n        </Box>\n        <Box sx={sideNavListContainerStyles}>\n          <SideNavListContainer>\n            {processedSideNavItems?.map((item) => {\n              const {\n                id,\n                label,\n                isSectionHeader,\n                startIcon,\n                children,\n                isDefaultExpanded,\n                isDisabled,\n                isExpanded,\n              } = item;\n\n              if (isSectionHeader) {\n                return (\n                  <SectionHeader\n                    id={id}\n                    key={id}\n                    odysseyDesignTokens={odysseyDesignTokens}\n                  >\n                    {label}\n                  </SectionHeader>\n                );\n              } else if (children) {\n                return (\n                  <SideNavListItemContainer\n                    id={id}\n                    key={id}\n                    odysseyDesignTokens={odysseyDesignTokens}\n                  >\n                    <NavAccordion\n                      label={label}\n                      isDefaultExpanded={isDefaultExpanded}\n                      isExpanded={isExpanded}\n                      startIcon={startIcon}\n                      isDisabled={isDisabled}\n                    >\n                      <SideNavListContainer id={`${id}-list`}>\n                        {children}\n                      </SideNavListContainer>\n                    </NavAccordion>\n                  </SideNavListItemContainer>\n                );\n              } else {\n                return <SideNavItemContent key={item.id} {...item} />;\n              }\n            })}\n          </SideNavListContainer>\n        </Box>\n        {footerItems && (\n          <Box sx={sideNavFooterContainerStyles}>\n            <SideNavFooterContainer odysseyDesignTokens={odysseyDesignTokens}>\n              {SideNavFooterContent(footerItems)}\n            </SideNavFooterContainer>\n          </Box>\n        )}\n      </SideNavExpandContainer>\n    </Box>\n  );\n};\n\nconst MemoizedSideNav = memo(SideNav);\nMemoizedSideNav.displayName = \"SideNav\";\n\nexport { MemoizedSideNav as SideNav };\n"],"mappings":"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"}

package/dist/labs/Switch.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Switch.js","names":["memo","useCallback","useEffect","useMemo","useRef","useState","useTranslation","styled","Box","FieldHint","CheckIcon","ComponentControlledState","getControlState","useOdysseyDesignTokens","stripRem","toRem","useUniqueId","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","CONTROLLED","nonForwardedProps","SwitchAndLabelContainer","shouldForwardProp","prop","includes","isFullWidth","odysseyDesignTokens","display","alignItems","justifyContent","maxWidth","TypographyLineLengthMax","SwitchContainer","div","position","StyledSwitchLabel","_FormLabel","isDisabled","margin","color","TypographyColorDisabled","PaletteNeutralDark","p","a","SwitchTrack","isChecked","width","Spacing7","height","Spacing4","Spacing1","borderRadius","BorderRadiusOuter","backgroundColor","HueNeutral200","PaletteSuccessLight","HueNeutral300","transition","TransitionDurationMain","SwitchThumb","thumbOffset","trackWidth","thumbWidth","transformDistance","top","left","BorderRadiusRound","HueNeutral50","HueNeutralWhite","transform","SwitchCheckMark","opacity","path","fill","HiddenCheckbox","input","cursor","zIndex","boxShadow","PalettePrimaryMain","SwitchLabel","hint","hintId","HintLinkComponent","inputId","label","children","htmlFor","id","text","LinkComponent","MemoizedSwitchLabel","displayName","Switch","idProp","isDefaultChecked","name","onChange","testId","value","t","controlledStateRef","controlledValue","uncontrolledValue","inputValues","current","checked","defaultChecked","internalSwitchChecked","setInternalSwitchChecked","Boolean","undefined","labelElementId","handleOnChange","event","target","sx","marginBlockEnd","Spacing2","disabled","type","MemoizedSwitch"],"sources":["../../src/labs/Switch.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-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  ChangeEventHandler,\n  memo,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { SwitchProps as MuiSwitchProps, FormLabel } from \"@mui/material\";\nimport { useTranslation } from \"react-i18next\";\nimport styled from \"@emotion/styled\";\n\nimport { Box } from \"../Box\";\nimport { FieldComponentProps } from \"../FieldComponentProps\";\nimport { FieldHint } from \"../FieldHint\";\nimport { CheckedFieldProps } from \"../FormCheckedProps\";\nimport type { HtmlProps } from \"../HtmlProps\";\nimport { CheckIcon } from \"../icons.generated\";\nimport { ComponentControlledState, getControlState } from \"../inputUtils\";\nimport {\n  DesignTokens,\n  useOdysseyDesignTokens,\n} from \"../OdysseyDesignTokensContext\";\nimport { stripRem, toRem } from \"../remUtils\";\nimport { useUniqueId } from \"../useUniqueId\";\n\nconst { CONTROLLED } = ComponentControlledState;\n\nconst nonForwardedProps = [\n  \"isChecked\",\n  \"isDisabled\",\n  \"isFullWidth\",\n  \"odysseyDesignTokens\",\n];\n\nconst SwitchAndLabelContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => !nonForwardedProps.includes(prop),\n})<\n  Pick<SwitchProps, \"isFullWidth\" | \"isDisabled\"> & {\n    odysseyDesignTokens: DesignTokens;\n  }\n>(({ isFullWidth, odysseyDesignTokens }) => ({\n  display: \"flex\",\n  alignItems: \"flex-start\",\n  justifyContent: \"space-between\",\n  maxWidth: isFullWidth ? \"100%\" : odysseyDesignTokens.TypographyLineLengthMax,\n}));\n\nconst SwitchContainer = styled.div({\n  position: \"relative\",\n});\n\nconst StyledSwitchLabel = styled(FormLabel, {\n  shouldForwardProp: (prop) => !nonForwardedProps.includes(prop),\n})<\n  Pick<SwitchLabelComponentProps, \"isDisabled\"> & {\n    odysseyDesignTokens: DesignTokens;\n  }\n>(({ isDisabled, odysseyDesignTokens }) => ({\n  display: \"block\",\n  margin: 0,\n  color: isDisabled\n    ? odysseyDesignTokens.TypographyColorDisabled\n    : odysseyDesignTokens.PaletteNeutralDark,\n\n  ...(isDisabled && {\n    p: {\n      color: odysseyDesignTokens.TypographyColorDisabled,\n    },\n    a: {\n      color: `${odysseyDesignTokens.TypographyColorDisabled} !important`,\n    },\n  }),\n}));\n\nconst SwitchTrack = styled(\"div\", {\n  shouldForwardProp: (prop) => !nonForwardedProps.includes(prop),\n})<\n  Pick<SwitchProps, \"isChecked\" | \"isDisabled\"> & {\n    odysseyDesignTokens: DesignTokens;\n  }\n>(({ isChecked, isDisabled, odysseyDesignTokens }) => ({\n  position: \"relative\",\n  width: odysseyDesignTokens.Spacing7,\n  height: `calc(${odysseyDesignTokens.Spacing4} + ${odysseyDesignTokens.Spacing1})`,\n  borderRadius: odysseyDesignTokens.BorderRadiusOuter,\n  backgroundColor: isDisabled\n    ? odysseyDesignTokens.HueNeutral200\n    : isChecked\n      ? odysseyDesignTokens.PaletteSuccessLight\n      : odysseyDesignTokens.HueNeutral300,\n  transition: `background-color ${odysseyDesignTokens.TransitionDurationMain}`,\n}));\n\nconst SwitchThumb = styled(\"span\", {\n  shouldForwardProp: (prop) => !nonForwardedProps.includes(prop),\n})<\n  Pick<SwitchProps, \"isChecked\" | \"isDisabled\"> & {\n    odysseyDesignTokens: DesignTokens;\n  }\n>(({ isChecked, isDisabled, odysseyDesignTokens }) => {\n  const thumbOffset = toRem(3);\n  const trackWidth = stripRem(odysseyDesignTokens.Spacing7);\n  const thumbWidth = stripRem(odysseyDesignTokens.Spacing4) - toRem(2);\n\n  const transformDistance = trackWidth - thumbWidth - thumbOffset * 2;\n\n  return {\n    position: \"absolute\",\n    top: \"50%\",\n    left: `${thumbOffset}rem`,\n    width: `calc(${odysseyDesignTokens.Spacing4} - ${toRem(2)}rem)`,\n    height: `calc(${odysseyDesignTokens.Spacing4} - ${toRem(2)}rem)`,\n    borderRadius: odysseyDesignTokens.BorderRadiusRound,\n    backgroundColor: isDisabled\n      ? odysseyDesignTokens.HueNeutral50\n      : odysseyDesignTokens.HueNeutralWhite,\n    transform: isChecked\n      ? `translate3d(${transformDistance}rem, -50%, 0)`\n      : \"translate3d(0, -50%, 0)\",\n    transition: `transform ${odysseyDesignTokens.TransitionDurationMain}`,\n  };\n});\n\nconst SwitchCheckMark = styled(CheckIcon, {\n  shouldForwardProp: (prop) => !nonForwardedProps.includes(prop),\n})<\n  Pick<SwitchProps, \"isChecked\" | \"isDisabled\"> & {\n    odysseyDesignTokens: DesignTokens;\n  }\n>(({ isChecked, isDisabled, odysseyDesignTokens }) => ({\n  position: \"absolute\",\n  top: \"50%\",\n  left: 3,\n  width: odysseyDesignTokens.Spacing4,\n  transform: \"translateY(-50%)\",\n  transition: `opacity ${odysseyDesignTokens.TransitionDurationMain}`,\n  opacity: isChecked ? 1 : 0,\n  path: {\n    fill: isDisabled\n      ? odysseyDesignTokens.HueNeutral50\n      : odysseyDesignTokens.HueNeutralWhite,\n  },\n}));\n\nconst HiddenCheckbox = styled.input<{\n  odysseyDesignTokens: DesignTokens;\n}>(({ odysseyDesignTokens }) => ({\n  position: \"absolute\",\n  top: 0,\n  left: 0,\n  width: \"100%\",\n  height: \"100%\",\n  margin: 0,\n  opacity: 0,\n  cursor: \"pointer\",\n  zIndex: 2,\n\n  \"&:focus-visible\": {\n    \"~ [data-switch-track='true']\": {\n      boxShadow: `0 0 0 2px ${odysseyDesignTokens.HueNeutralWhite}, 0 0 0 4px ${odysseyDesignTokens.PalettePrimaryMain}`,\n    },\n  },\n}));\n\ntype OnChangeCallbackArguments = {\n  checked: boolean;\n  value: string;\n};\n\nexport type SwitchProps = {\n  /**\n   * The label text for the Switch\n   */\n  label: string;\n  /**\n   * The change event handler for the Switch\n   */\n  onChange?: ({ checked, value }: OnChangeCallbackArguments) => void;\n  /**\n   * The value attribute of the Switch\n   */\n  value: string;\n} & Pick<\n  FieldComponentProps,\n  \"hint\" | \"HintLinkComponent\" | \"id\" | \"isFullWidth\" | \"isDisabled\" | \"name\"\n> &\n  Pick<CheckedFieldProps<MuiSwitchProps>, \"isChecked\" | \"isDefaultChecked\"> &\n  Pick<HtmlProps, \"testId\">;\n\ntype SwitchLabelComponentProps = {\n  hint: SwitchProps[\"hint\"];\n  hintId?: string;\n  HintLinkComponent: SwitchProps[\"HintLinkComponent\"];\n  inputId: string;\n  isDisabled: SwitchProps[\"isDisabled\"];\n  isFullWidth: SwitchProps[\"isFullWidth\"];\n  label: SwitchProps[\"label\"];\n};\n\nconst SwitchLabel = ({\n  hint,\n  hintId,\n  HintLinkComponent,\n  inputId,\n  isDisabled,\n  label,\n}: SwitchLabelComponentProps) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  return (\n    <>\n      <StyledSwitchLabel\n        htmlFor={inputId}\n        isDisabled={isDisabled}\n        odysseyDesignTokens={odysseyDesignTokens}\n      >\n        {label}\n        {hint && (\n          <FieldHint\n            id={hintId}\n            text={hint}\n            LinkComponent={HintLinkComponent}\n          />\n        )}\n      </StyledSwitchLabel>\n    </>\n  );\n};\n\nconst MemoizedSwitchLabel = memo(SwitchLabel);\nSwitchLabel.displayName = \"SwitchLabel\";\n\nconst Switch = ({\n  hint,\n  HintLinkComponent,\n  id: idProp,\n  isChecked,\n  isDefaultChecked,\n  isDisabled,\n  isFullWidth = false,\n  label,\n  name,\n  onChange,\n  testId,\n  value,\n}: SwitchProps) => {\n  const { t } = useTranslation();\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n  const controlledStateRef = useRef(\n    getControlState({\n      controlledValue: isChecked,\n      uncontrolledValue: isDefaultChecked,\n    }),\n  );\n  const inputValues = useMemo(() => {\n    if (controlledStateRef.current === CONTROLLED) {\n      return { checked: isChecked };\n    }\n    return { defaultChecked: isDefaultChecked };\n  }, [isDefaultChecked, isChecked]);\n\n  const [internalSwitchChecked, setInternalSwitchChecked] = useState(\n    controlledStateRef.current === CONTROLLED\n      ? Boolean(isChecked)\n      : Boolean(isDefaultChecked),\n  );\n\n  useEffect(() => {\n    if (controlledStateRef.current === CONTROLLED) {\n      setInternalSwitchChecked(Boolean(isChecked));\n    }\n  }, [isChecked]);\n\n  const inputId = useUniqueId(idProp);\n\n  const hintId = hint ? `${inputId}-hint` : undefined;\n  const labelElementId = `${inputId}-label`;\n\n  const handleOnChange = useCallback<ChangeEventHandler<HTMLInputElement>>(\n    (event) => {\n      const target = event.target;\n      const { checked, value } = target;\n      setInternalSwitchChecked(checked);\n      onChange?.({ checked, value });\n    },\n    [onChange, setInternalSwitchChecked],\n  );\n\n  return (\n    <Box\n      sx={{\n        marginBlockEnd: odysseyDesignTokens.Spacing2,\n        \"&:last-child\": {\n          marginBlockEnd: 0,\n        },\n      }}\n    >\n      <SwitchAndLabelContainer\n        isFullWidth={isFullWidth}\n        odysseyDesignTokens={odysseyDesignTokens}\n      >\n        <MemoizedSwitchLabel\n          hint={hint}\n          hintId={hintId}\n          HintLinkComponent={HintLinkComponent}\n          inputId={inputId}\n          isDisabled={isDisabled}\n          isFullWidth={isFullWidth}\n          label={label}\n        />\n        <SwitchContainer>\n          <HiddenCheckbox\n            {...inputValues}\n            aria-checked={internalSwitchChecked}\n            aria-describedby={hintId}\n            aria-label={\n              internalSwitchChecked\n                ? `${label}: ${t(\"switch.active\")}`\n                : `${label}: ${t(\"switch.inactive\")}`\n            }\n            aria-labelledby={labelElementId}\n            data-se={testId}\n            disabled={isDisabled}\n            id={inputId}\n            name={name ?? inputId}\n            onChange={handleOnChange}\n            odysseyDesignTokens={odysseyDesignTokens}\n            type=\"checkbox\"\n            value={value}\n          />\n          <SwitchTrack\n            data-switch-track\n            isChecked={internalSwitchChecked}\n            isDisabled={isDisabled}\n            odysseyDesignTokens={odysseyDesignTokens}\n          >\n            <SwitchThumb\n              isChecked={internalSwitchChecked}\n              isDisabled={isDisabled}\n              odysseyDesignTokens={odysseyDesignTokens}\n            />\n            <SwitchCheckMark\n              isChecked={internalSwitchChecked}\n              isDisabled={isDisabled}\n              odysseyDesignTokens={odysseyDesignTokens}\n            />\n          </SwitchTrack>\n        </SwitchContainer>\n      </SwitchAndLabelContainer>\n    </Box>\n  );\n};\n\nconst MemoizedSwitch = memo(Switch);\nMemoizedSwitch.displayName = \"Switch\";\n\nexport { MemoizedSwitch as Switch };\n"],"mappings":"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"}

package/dist/src/createShadowRootElement.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"createShadowRootElement.d.ts","sourceRoot":"","sources":["../../src/createShadowRootElement.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,eAAO,MAAM,uBAAuB,qBAChB,WAAW,KAC5B,CAAC,gBAAgB,EAAE,cAAc,CAgBnC,CAAC"}

package/dist/src/labs/DataComponents/BulkActionsMenu.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"BulkActionsMenu.d.ts","sourceRoot":"","sources":["../../../../src/labs/DataComponents/BulkActionsMenu.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,EAAqB,QAAQ,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AACpE,OAAO,EAAE,WAAW,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAQ1E,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAMlD,MAAM,MAAM,oBAAoB,GAAG;IACjC,IAAI,EAAE,WAAW,EAAE,CAAC;IACpB,SAAS,EAAE,cAAc,CAAC,qBAAqB,CAAC,CAAC;IACjD,YAAY,EAAE,qBAAqB,CAAC;IACpC,eAAe,EAAE,QAAQ,CAAC,cAAc,CAAC,qBAAqB,CAAC,CAAC,CAAC;CAClE,CAAC;AA6DF,QAAA,MAAM,uBAAuB,4FA7C1B,oBAAoB,6CA6C8B,CAAC;AAGtD,OAAO,EAAE,uBAAuB,IAAI,eAAe,EAAE,CAAC"}