@okta/odyssey-contribution-tooling 1.52.0 → 1.53.0

package/dist/esm/ui-shell/SideNav/SideNavItemContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SideNavItemContent.js","names":["styled","memo","useCallback","useImperativeHandle","useMemo","useRef","useState","ExternalLinkIcon","useOdysseyDesignTokens","useUiShellContext","useSideNavItemContent","SideNavItemLinkContent","jsx","_jsx","jsxs","_jsxs","StyledSideNavListItem","shouldForwardProp","prop","isSelected","odysseyDesignTokens","sideNavContrastColors","display","alignItems","backgroundColor","borderRadius","BorderRadiusMain","transition","TransitionDurationMain","color","fontColor","TypographyColorAction","itemSelectedBackgroundColor","HueBlue50","scrollToNode","node","scrollIntoView","behavior","block","inline","getBaseNavItemContentStyles","isDisabled","isActiveDropTarget","width","textDecoration","TypographyColorHeading","minHeight","paddingBlock","Spacing3","paddingInlineEnd","Spacing4","cursor","itemHoverBackgroundColor","HueNeutral50","fontWeight","TypographyWeightBodyBold","TypographyColorDisabled","itemDisabledFontColor","outline","boxShadow","focusRingColor","PalettePrimaryMain","getNavItemContentStyles","contextValue","paddingInlineStart","Spacing6","depth","isCompact","Spacing1","NavItemContentContainer","absolutePaddingStart","StyledNavItemLink","_Link","SideNavItemContent","count","id","label","href","target","startIcon","severity","statusLabel","endIcon","onClick","scrollRef","onItemSelected","translate","uiShellContext","sidenavItemContentContext","setIsActiveDropTarget","localScrollRef","current","itemClickHandler","event","sideNavItemContentKeyHandler","key","preventDefault","undefined","disabled","onDragLeave","onDragOver","onDrop","ref","children","onKeyDown","role","tabIndex","className","MemoizedSideNavItemContent","displayName"],"sources":["../../../../src/ui-shell/SideNav/SideNavItemContent.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 { Link as NavItemLink } from \"@mui/material\";\nimport {\n  KeyboardEventHandler,\n  memo,\n  MouseEventHandler,\n  useCallback,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nimport type { SideNavItem } from \"./types.js\";\n\nimport { ExternalLinkIcon } from \"../../icons.generated/index.js\";\nimport {\n  type DesignTokens,\n  useOdysseyDesignTokens,\n} from \"../../OdysseyDesignTokensContext.js\";\nimport {\n  UiShellColors,\n  useUiShellContext,\n} from \"../../ui-shell/UiShellProvider.js\";\nimport {\n  SideNavItemContentContextValue,\n  useSideNavItemContent,\n} from \"./SideNavItemContentContext.js\";\nimport { SideNavItemLinkContent } from \"./SideNavItemLinkContent.js\";\n\nexport const StyledSideNavListItem = styled(\"li\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"isSelected\" &&\n    prop !== \"odysseyDesignTokens\" &&\n    prop !== \"sideNavContrastColors\",\n})<{\n  disabled?: boolean;\n  isSelected?: boolean;\n  itemSelectedBackgroundColor?: string;\n  odysseyDesignTokens: DesignTokens;\n  sideNavContrastColors?: UiShellColors[\"sideNavContrastColors\"];\n}>(({ isSelected, odysseyDesignTokens, sideNavContrastColors }) => ({\n  display: \"flex\",\n  alignItems: \"center\",\n  backgroundColor: \"unset\",\n  borderRadius: odysseyDesignTokens.BorderRadiusMain,\n  transition: `backgroundColor ${odysseyDesignTokens.TransitionDurationMain}, color ${odysseyDesignTokens.TransitionDurationMain}`,\n\n  ...(isSelected && {\n    color: sideNavContrastColors?.fontColor\n      ? `${sideNavContrastColors.fontColor}`\n      : `${odysseyDesignTokens.TypographyColorAction}`,\n    backgroundColor:\n      sideNavContrastColors?.itemSelectedBackgroundColor ||\n      odysseyDesignTokens.HueBlue50,\n  }),\n}));\n\nconst scrollToNode = (node: HTMLElement | null) => {\n  if (node) {\n    node?.scrollIntoView({\n      behavior: \"instant\",\n      block: \"center\",\n      inline: \"nearest\",\n    });\n  }\n};\n\ntype ScrollIntoViewHandle = {\n  scrollIntoView: () => void;\n};\n\nexport const getBaseNavItemContentStyles = ({\n  isDisabled,\n  isSelected,\n  odysseyDesignTokens,\n  sideNavContrastColors,\n  isActiveDropTarget,\n}: {\n  isActiveDropTarget: boolean;\n  isDisabled?: boolean;\n  isSelected?: boolean;\n  odysseyDesignTokens: DesignTokens;\n  sideNavContrastColors: UiShellColors[\"sideNavContrastColors\"];\n}) => ({\n  display: \"flex\",\n  alignItems: \"center\",\n  width: \"100%\",\n  textDecoration: \"none\",\n  // !important needed here to override more specific base link styling\n  color: sideNavContrastColors?.fontColor\n    ? `${sideNavContrastColors?.fontColor} !important`\n    : `${odysseyDesignTokens.TypographyColorHeading} !important`,\n  minHeight: \"unset\",\n  paddingBlock: odysseyDesignTokens.Spacing3,\n  paddingInlineEnd: odysseyDesignTokens.Spacing4,\n  borderRadius: odysseyDesignTokens.BorderRadiusMain,\n  transition: `backgroundColor ${odysseyDesignTokens.TransitionDurationMain}, color ${odysseyDesignTokens.TransitionDurationMain}`,\n  cursor: \"pointer\",\n  ...(isActiveDropTarget && {\n    backgroundColor:\n      sideNavContrastColors?.itemHoverBackgroundColor ||\n      odysseyDesignTokens.HueNeutral50,\n  }),\n\n  // When hover or focus of the drag handle, apply general hover styles\n  \"&:hover, li:has(> button:hover, > button:focus, > button:focus-visible) &\": {\n    textDecoration: \"none\",\n    backgroundColor:\n      sideNavContrastColors?.itemHoverBackgroundColor ||\n      odysseyDesignTokens.HueNeutral50,\n\n    ...(isSelected && {\n      backgroundColor:\n        sideNavContrastColors?.itemSelectedBackgroundColor ||\n        odysseyDesignTokens.HueBlue50,\n      color:\n        sideNavContrastColors?.fontColor ||\n        odysseyDesignTokens.TypographyColorAction,\n    }),\n\n    ...(isDisabled && {\n      backgroundColor: \"unset\",\n    }),\n  },\n\n  ...(isSelected && {\n    color: sideNavContrastColors?.fontColor\n      ? `${sideNavContrastColors?.fontColor} !important`\n      : `${odysseyDesignTokens.TypographyColorAction} !important`,\n    fontWeight: odysseyDesignTokens.TypographyWeightBodyBold,\n  }),\n\n  ...(isDisabled && {\n    cursor: \"default\",\n    color: `${odysseyDesignTokens.TypographyColorDisabled} !important`,\n\n    ...(sideNavContrastColors?.itemDisabledFontColor && {\n      color: `${sideNavContrastColors?.itemDisabledFontColor} !important`,\n    }),\n  }),\n\n  \"&:focus-visible\": {\n    outline: \"none\",\n    boxShadow: `inset 0 0 0 2px ${sideNavContrastColors?.focusRingColor || odysseyDesignTokens.PalettePrimaryMain}`,\n  },\n});\n\nexport const getNavItemContentStyles = ({\n  odysseyDesignTokens,\n  contextValue,\n  paddingInlineStart = odysseyDesignTokens.Spacing6,\n}: {\n  contextValue: SideNavItemContentContextValue;\n  odysseyDesignTokens: DesignTokens;\n  paddingInlineStart?: string;\n}) => ({\n  paddingInlineStart: `calc(${odysseyDesignTokens.Spacing4} * ${contextValue.depth} + ${paddingInlineStart})`,\n\n  ...(contextValue.depth === 1 && {\n    paddingInlineStart: odysseyDesignTokens.Spacing4,\n  }),\n\n  ...(contextValue.isCompact && {\n    paddingBlock: odysseyDesignTokens.Spacing1,\n  }),\n});\n\nconst NavItemContentContainer = styled(\"div\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" &&\n    prop != \"contextValue\" &&\n    prop !== \"isDisabled\" &&\n    prop !== \"sideNavContrastColors\" &&\n    prop !== \"isSelected\" &&\n    prop !== \"isActiveDropTarget\",\n})<{\n  contextValue: SideNavItemContentContextValue;\n  isActiveDropTarget: boolean;\n  isDisabled?: boolean;\n  isSelected?: boolean;\n  odysseyDesignTokens: DesignTokens;\n  sideNavContrastColors: UiShellColors[\"sideNavContrastColors\"];\n}>(\n  ({\n    isDisabled,\n    isSelected,\n    contextValue,\n    odysseyDesignTokens,\n    sideNavContrastColors,\n    isActiveDropTarget,\n  }) => ({\n    ...getBaseNavItemContentStyles({\n      isDisabled,\n      isSelected,\n      odysseyDesignTokens,\n      sideNavContrastColors,\n      isActiveDropTarget,\n    }),\n\n    ...getNavItemContentStyles({\n      odysseyDesignTokens,\n      contextValue,\n      paddingInlineStart: contextValue.absolutePaddingStart,\n    }),\n  }),\n);\n\nconst StyledNavItemLink = styled(NavItemLink, {\n  shouldForwardProp: (prop) =>\n    prop != \"contextValue\" &&\n    prop !== \"isDisabled\" &&\n    prop !== \"isSelected\" &&\n    prop !== \"odysseyDesignTokens\" &&\n    prop !== \"sideNavContrastColors\" &&\n    prop !== \"isActiveDropTarget\",\n})<{\n  contextValue: SideNavItemContentContextValue;\n  isActiveDropTarget: boolean;\n  isDisabled?: boolean;\n  isSelected?: boolean;\n  odysseyDesignTokens: DesignTokens;\n  sideNavContrastColors: UiShellColors[\"sideNavContrastColors\"];\n}>(\n  ({\n    isDisabled,\n    isSelected,\n    contextValue,\n    odysseyDesignTokens,\n    sideNavContrastColors,\n    isActiveDropTarget,\n  }) => ({\n    ...getBaseNavItemContentStyles({\n      isDisabled,\n      isSelected,\n      odysseyDesignTokens,\n      sideNavContrastColors,\n      isActiveDropTarget,\n    }),\n\n    ...getNavItemContentStyles({\n      odysseyDesignTokens,\n      contextValue,\n      paddingInlineStart: contextValue.absolutePaddingStart,\n    }),\n  }),\n);\n\nconst SideNavItemContent = ({\n  count,\n  id,\n  label,\n  href,\n  target,\n  startIcon,\n  severity,\n  statusLabel,\n  endIcon,\n  onClick,\n  isDisabled,\n  isSelected,\n  scrollRef,\n  onItemSelected,\n  translate,\n}: Pick<\n  SideNavItem,\n  | \"count\"\n  | \"id\"\n  | \"label\"\n  | \"href\"\n  | \"target\"\n  | \"startIcon\"\n  | \"severity\"\n  | \"statusLabel\"\n  | \"endIcon\"\n  | \"onClick\"\n  | \"isDisabled\"\n  | \"isSelected\"\n  | \"translate\"\n> & {\n  onItemSelected?: (selectedItemId: string) => void;\n  /**\n   * The ref used to scroll to this item\n   */\n  scrollRef?: React.RefObject<ScrollIntoViewHandle>;\n}) => {\n  const uiShellContext = useUiShellContext();\n  const sidenavItemContentContext = useSideNavItemContent();\n  const contextValue = useMemo(\n    () => sidenavItemContentContext,\n    [sidenavItemContentContext],\n  );\n\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n  const [isActiveDropTarget, setIsActiveDropTarget] = useState(false);\n\n  const localScrollRef = useRef<HTMLLIElement>(null);\n  useImperativeHandle(scrollRef, () => {\n    return {\n      scrollIntoView: () => {\n        scrollToNode(localScrollRef.current);\n      },\n    };\n  }, []);\n\n  const itemClickHandler = useCallback<\n    MouseEventHandler<HTMLDivElement | HTMLAnchorElement>\n  >(\n    (event) => {\n      onItemSelected?.(id);\n      onClick?.(event);\n    },\n    [id, onClick, onItemSelected],\n  );\n\n  const sideNavItemContentKeyHandler = useCallback<\n    KeyboardEventHandler<HTMLDivElement>\n  >(\n    (event) => {\n      if (event?.key === \"Enter\") {\n        event.preventDefault();\n        onItemSelected?.(id);\n        onClick?.(event);\n      }\n    },\n    [id, onClick, onItemSelected],\n  );\n\n  return (\n    <StyledSideNavListItem\n      aria-current={isSelected ? \"page\" : undefined}\n      aria-disabled={isDisabled}\n      disabled={isDisabled}\n      id={id}\n      isSelected={isSelected}\n      key={id}\n      odysseyDesignTokens={odysseyDesignTokens}\n      onDragLeave={() => {\n        setIsActiveDropTarget(false);\n      }}\n      onDragOver={() => {\n        setIsActiveDropTarget(true);\n      }}\n      onDrop={() => {\n        setIsActiveDropTarget(false);\n      }}\n      ref={localScrollRef}\n      sideNavContrastColors={uiShellContext?.sideNavContrastColors}\n    >\n      {\n        // Use Link for nav items with links and div for disabled or non-link items\n        isDisabled ? (\n          <NavItemContentContainer\n            contextValue={contextValue}\n            data-se=\"tb--sidenav-text-container\"\n            isActiveDropTarget={false}\n            isDisabled={isDisabled}\n            isSelected={isSelected}\n            odysseyDesignTokens={odysseyDesignTokens}\n            sideNavContrastColors={uiShellContext?.sideNavContrastColors}\n          >\n            <SideNavItemLinkContent\n              count={count}\n              endIcon={endIcon}\n              label={label}\n              severity={severity}\n              startIcon={startIcon}\n              statusLabel={statusLabel}\n              translate={translate}\n            />\n          </NavItemContentContainer>\n        ) : !href ? (\n          <NavItemContentContainer\n            contextValue={contextValue}\n            data-se=\"tb--sidenav-text-container\"\n            isActiveDropTarget={isActiveDropTarget}\n            isDisabled={isDisabled}\n            isSelected={isSelected}\n            odysseyDesignTokens={odysseyDesignTokens}\n            onClick={itemClickHandler}\n            onKeyDown={sideNavItemContentKeyHandler}\n            role=\"button\"\n            sideNavContrastColors={uiShellContext?.sideNavContrastColors}\n            tabIndex={0}\n          >\n            <SideNavItemLinkContent\n              count={count}\n              endIcon={endIcon}\n              label={label}\n              severity={severity}\n              startIcon={startIcon}\n              statusLabel={statusLabel}\n              translate={translate}\n            />\n          </NavItemContentContainer>\n        ) : (\n          <StyledNavItemLink\n            contextValue={contextValue}\n            data-se=\"tb--sidenav-text-container\"\n            href={href}\n            isActiveDropTarget={isActiveDropTarget}\n            isDisabled={isDisabled}\n            isSelected={isSelected}\n            odysseyDesignTokens={odysseyDesignTokens}\n            onClick={itemClickHandler}\n            sideNavContrastColors={uiShellContext?.sideNavContrastColors}\n            target={target}\n          >\n            <SideNavItemLinkContent\n              count={count}\n              endIcon={endIcon}\n              label={label}\n              severity={severity}\n              startIcon={startIcon}\n              statusLabel={statusLabel}\n              translate={translate}\n            />\n            {target === \"_blank\" && (\n              <span className=\"Link-indicator\" role=\"presentation\">\n                <ExternalLinkIcon />\n              </span>\n            )}\n          </StyledNavItemLink>\n        )\n      }\n    </StyledSideNavListItem>\n  );\n};\n\nconst MemoizedSideNavItemContent = memo(SideNavItemContent);\nMemoizedSideNavItemContent.displayName = \"SideNavItemContent\";\n\nexport { MemoizedSideNavItemContent as SideNavItemContent };\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/ui-shell/SideNav/SideNavItemContentContext.js

@@ -0,0 +1,20 @@
+/*!
+ * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import { createContext, useContext } from "react";
+export const SideNavItemContentContext = createContext({
+  isCompact: false,
+  isSortable: false,
+  depth: 1
+});
+export const useSideNavItemContent = () => useContext(SideNavItemContentContext);
+//# sourceMappingURL=SideNavItemContentContext.js.map

package/dist/esm/ui-shell/SideNav/SideNavItemContentContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SideNavItemContentContext.js","names":["createContext","useContext","SideNavItemContentContext","isCompact","isSortable","depth","useSideNavItemContent"],"sources":["../../../../src/ui-shell/SideNav/SideNavItemContentContext.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 { createContext, useContext } from \"react\";\n\nexport type SideNavItemContentContextValue = {\n  absolutePaddingStart?: string;\n  depth: number;\n  isCompact?: boolean;\n  isSortable?: boolean;\n};\n\nexport const SideNavItemContentContext =\n  createContext<SideNavItemContentContextValue>({\n    isCompact: false,\n    isSortable: false,\n    depth: 1,\n  });\n\nexport const useSideNavItemContent = () =>\n  useContext(SideNavItemContentContext);\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,aAAa,EAAEC,UAAU,QAAQ,OAAO;AASjD,OAAO,MAAMC,yBAAyB,GACpCF,aAAa,CAAiC;EAC5CG,SAAS,EAAE,KAAK;EAChBC,UAAU,EAAE,KAAK;EACjBC,KAAK,EAAE;AACT,CAAC,CAAC;AAEJ,OAAO,MAAMC,qBAAqB,GAAGA,CAAA,KACnCL,UAAU,CAACC,yBAAyB,CAAC","ignoreList":[]}

package/dist/esm/ui-shell/SideNav/SideNavItemLinkContent.js

@@ -0,0 +1,72 @@
+/*!
+ * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import styled from "@emotion/styled";
+import { memo, useMemo } from "react";
+import { Badge } from "../../Badge.js";
+import { Box } from "../../Box.js";
+import { useOdysseyDesignTokens } from "../../OdysseyDesignTokensContext.js";
+import { Status } from "../../Status.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const SideNavItemLabelContainer = styled("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "isIconVisible"
+})(({
+  odysseyDesignTokens,
+  isIconVisible
+}) => ({
+  width: "100%",
+  marginInlineStart: isIconVisible ? odysseyDesignTokens.Spacing3 : 0,
+  alignItems: "center",
+  display: "flex",
+  fontSize: odysseyDesignTokens.TypographySizeBody,
+  overflowWrap: "anywhere"
+}));
+const SideNavItemLinkContent = ({
+  count,
+  label,
+  startIcon,
+  endIcon,
+  severity,
+  statusLabel,
+  translate
+}) => {
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+  const sideNavItemContentStyles = useMemo(() => ({
+    alignItems: "center",
+    display: "flex",
+    gap: odysseyDesignTokens.Spacing1,
+    marginInlineStart: odysseyDesignTokens.Spacing2
+  }), [odysseyDesignTokens]);
+  return _jsxs(_Fragment, {
+    children: [startIcon && startIcon, _jsxs(SideNavItemLabelContainer, {
+      isIconVisible: Boolean(startIcon),
+      odysseyDesignTokens: odysseyDesignTokens,
+      translate: translate,
+      children: [label, !count && severity && _jsx(Box, {
+        sx: sideNavItemContentStyles,
+        children: severity && _jsx(Status, {
+          label: statusLabel || "",
+          severity: severity
+        })
+      }), !severity && count && _jsx(Box, {
+        sx: sideNavItemContentStyles,
+        children: count && _jsx(Badge, {
+          badgeContent: count
+        })
+      })]
+    }), endIcon && endIcon]
+  });
+};
+const MemoizedSideNavItemLinkContent = memo(SideNavItemLinkContent);
+MemoizedSideNavItemLinkContent.displayName = "SideNavItemLinkContent";
+export { MemoizedSideNavItemLinkContent as SideNavItemLinkContent };
+//# sourceMappingURL=SideNavItemLinkContent.js.map

package/dist/esm/ui-shell/SideNav/SideNavItemLinkContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SideNavItemLinkContent.js","names":["styled","memo","useMemo","Badge","Box","useOdysseyDesignTokens","Status","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","SideNavItemLabelContainer","shouldForwardProp","prop","odysseyDesignTokens","isIconVisible","width","marginInlineStart","Spacing3","alignItems","display","fontSize","TypographySizeBody","overflowWrap","SideNavItemLinkContent","count","label","startIcon","endIcon","severity","statusLabel","translate","sideNavItemContentStyles","gap","Spacing1","Spacing2","children","Boolean","sx","badgeContent","MemoizedSideNavItemLinkContent","displayName"],"sources":["../../../../src/ui-shell/SideNav/SideNavItemLinkContent.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 { memo, ReactNode, useMemo } from \"react\";\n\nimport type { SideNavItem } from \"./types.js\";\n\nimport { Badge } from \"../../Badge.js\";\nimport { Box } from \"../../Box.js\";\nimport {\n  type DesignTokens,\n  useOdysseyDesignTokens,\n} from \"../../OdysseyDesignTokensContext.js\";\nimport { Status } from \"../../Status.js\";\n\nconst SideNavItemLabelContainer = styled(\"div\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" && prop !== \"isIconVisible\",\n})<{\n  isIconVisible: boolean;\n  odysseyDesignTokens: DesignTokens;\n}>(({ odysseyDesignTokens, isIconVisible }) => ({\n  width: \"100%\",\n  marginInlineStart: isIconVisible ? odysseyDesignTokens.Spacing3 : 0,\n  alignItems: \"center\",\n  display: \"flex\",\n  fontSize: odysseyDesignTokens.TypographySizeBody,\n  overflowWrap: \"anywhere\", // New way to do `wordBreak: \"break-word\"`. Source: https://developer.mozilla.org/en-US/docs/Web/CSS/word-break#break-word\n}));\n\nconst SideNavItemLinkContent = ({\n  count,\n  label,\n  startIcon,\n  endIcon,\n  severity,\n  statusLabel,\n  translate,\n}: Pick<\n  SideNavItem,\n  | \"count\"\n  | \"label\"\n  | \"startIcon\"\n  | \"endIcon\"\n  | \"severity\"\n  | \"statusLabel\"\n  | \"translate\"\n>): ReactNode => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  const sideNavItemContentStyles = useMemo(\n    () => ({\n      alignItems: \"center\",\n      display: \"flex\",\n      gap: odysseyDesignTokens.Spacing1,\n      marginInlineStart: odysseyDesignTokens.Spacing2,\n    }),\n    [odysseyDesignTokens],\n  );\n\n  return (\n    <>\n      {startIcon && startIcon}\n      <SideNavItemLabelContainer\n        isIconVisible={Boolean(startIcon)}\n        odysseyDesignTokens={odysseyDesignTokens}\n        translate={translate}\n      >\n        {label}\n        {!count && severity && (\n          <Box sx={sideNavItemContentStyles}>\n            {severity && (\n              <Status label={statusLabel || \"\"} severity={severity} />\n            )}\n          </Box>\n        )}\n        {!severity && count && (\n          <Box sx={sideNavItemContentStyles}>\n            {count && <Badge badgeContent={count} />}\n          </Box>\n        )}\n      </SideNavItemLabelContainer>\n      {endIcon && endIcon}\n    </>\n  );\n};\nconst MemoizedSideNavItemLinkContent = memo(SideNavItemLinkContent);\nMemoizedSideNavItemLinkContent.displayName = \"SideNavItemLinkContent\";\n\nexport { MemoizedSideNavItemLinkContent as SideNavItemLinkContent };\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,OAAOA,MAAM,MAAM,iBAAiB;AACpC,SAASC,IAAI,EAAaC,OAAO,QAAQ,OAAO;AAIhD,SAASC,KAAK,QAAQ,gBAAgB;AACtC,SAASC,GAAG,QAAQ,cAAc;AAClC,SAEEC,sBAAsB,QACjB,qCAAqC;AAC5C,SAASC,MAAM,QAAQ,iBAAiB;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA,EAAAC,QAAA,IAAAC,SAAA;AAEzC,MAAMC,yBAAyB,GAAGb,MAAM,CAAC,KAAK,EAAE;EAC9Cc,iBAAiB,EAAGC,IAAI,IACtBA,IAAI,KAAK,qBAAqB,IAAIA,IAAI,KAAK;AAC/C,CAAC,CAAC,CAGC,CAAC;EAAEC,mBAAmB;EAAEC;AAAc,CAAC,MAAM;EAC9CC,KAAK,EAAE,MAAM;EACbC,iBAAiB,EAAEF,aAAa,GAAGD,mBAAmB,CAACI,QAAQ,GAAG,CAAC;EACnEC,UAAU,EAAE,QAAQ;EACpBC,OAAO,EAAE,MAAM;EACfC,QAAQ,EAAEP,mBAAmB,CAACQ,kBAAkB;EAChDC,YAAY,EAAE;AAChB,CAAC,CAAC,CAAC;AAEH,MAAMC,sBAAsB,GAAGA,CAAC;EAC9BC,KAAK;EACLC,KAAK;EACLC,SAAS;EACTC,OAAO;EACPC,QAAQ;EACRC,WAAW;EACXC;AAUF,CAAC,KAAgB;EACf,MAAMjB,mBAAmB,GAAGX,sBAAsB,CAAC,CAAC;EAEpD,MAAM6B,wBAAwB,GAAGhC,OAAO,CACtC,OAAO;IACLmB,UAAU,EAAE,QAAQ;IACpBC,OAAO,EAAE,MAAM;IACfa,GAAG,EAAEnB,mBAAmB,CAACoB,QAAQ;IACjCjB,iBAAiB,EAAEH,mBAAmB,CAACqB;EACzC,CAAC,CAAC,EACF,CAACrB,mBAAmB,CACtB,CAAC;EAED,OACEN,KAAA,CAAAE,SAAA;IAAA0B,QAAA,GACGT,SAAS,IAAIA,SAAS,EACvBnB,KAAA,CAACG,yBAAyB;MACxBI,aAAa,EAAEsB,OAAO,CAACV,SAAS,CAAE;MAClCb,mBAAmB,EAAEA,mBAAoB;MACzCiB,SAAS,EAAEA,SAAU;MAAAK,QAAA,GAEpBV,KAAK,EACL,CAACD,KAAK,IAAII,QAAQ,IACjBvB,IAAA,CAACJ,GAAG;QAACoC,EAAE,EAAEN,wBAAyB;QAAAI,QAAA,EAC/BP,QAAQ,IACPvB,IAAA,CAACF,MAAM;UAACsB,KAAK,EAAEI,WAAW,IAAI,EAAG;UAACD,QAAQ,EAAEA;QAAS,CAAE;MACxD,CACE,CACN,EACA,CAACA,QAAQ,IAAIJ,KAAK,IACjBnB,IAAA,CAACJ,GAAG;QAACoC,EAAE,EAAEN,wBAAyB;QAAAI,QAAA,EAC/BX,KAAK,IAAInB,IAAA,CAACL,KAAK;UAACsC,YAAY,EAAEd;QAAM,CAAE;MAAC,CACrC,CACN;IAAA,CACwB,CAAC,EAC3BG,OAAO,IAAIA,OAAO;EAAA,CACnB,CAAC;AAEP,CAAC;AACD,MAAMY,8BAA8B,GAAGzC,IAAI,CAACyB,sBAAsB,CAAC;AACnEgB,8BAA8B,CAACC,WAAW,GAAG,wBAAwB;AAErE,SAASD,8BAA8B,IAAIhB,sBAAsB","ignoreList":[]}

package/dist/esm/ui-shell/SideNav/SideNavSortableList.js

@@ -0,0 +1,42 @@
+/*!
+ * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import { memo, useCallback, useMemo } from "react";
+import { SortableList } from "./SortableList/SortableList.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const SideNavSortableList = ({
+  items,
+  onChange,
+  parentId,
+  processSideNavItems,
+  depth = 1
+}) => {
+  const processedItems = useMemo(() => processSideNavItems(items, depth), [processSideNavItems, items, depth]);
+  const sortableItems = useMemo(() => processedItems.map(item => item.sortableItem), [processedItems]);
+  const renderItem = useCallback(sortableItem => _jsx(SortableList.Item, {
+    id: sortableItem.id,
+    isDisabled: sortableItem.isDisabled,
+    isSelected: sortableItem.isSelected,
+    isSortable: sortableItem.isSortable,
+    children: sortableItem.navItem
+  }), []);
+  return _jsx(SortableList, {
+    items: sortableItems,
+    onChange: onChange,
+    parentId: parentId,
+    renderItem: renderItem
+  });
+};
+const MemoizedSideNavSortableList = memo(SideNavSortableList);
+MemoizedSideNavSortableList.displayName = "SideNavSortableList";
+export { MemoizedSideNavSortableList as SideNavSortableList };
+//# sourceMappingURL=SideNavSortableList.js.map

package/dist/esm/ui-shell/SideNav/SideNavSortableList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SideNavSortableList.js","names":["memo","useCallback","useMemo","SortableList","jsx","_jsx","SideNavSortableList","items","onChange","parentId","processSideNavItems","depth","processedItems","sortableItems","map","item","sortableItem","renderItem","Item","id","isDisabled","isSelected","isSortable","children","navItem","MemoizedSideNavSortableList","displayName"],"sources":["../../../../src/ui-shell/SideNav/SideNavSortableList.tsx"],"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 { UniqueIdentifier } from \"@dnd-kit/core\";\nimport { memo, useCallback, useMemo } from \"react\";\n\nimport type { SideNavItem } from \"./types.js\";\n\nimport { BaseItem, SortableList } from \"./SortableList/SortableList.js\";\n\nexport type SideNavSortableListProps = {\n  /**\n   * The depth level for nested items\n   */\n  depth?: number;\n  /**\n   * The nav items to render as sortable list\n   */\n  items: SideNavItem[];\n  /**\n   * Callback when items are reordered\n   */\n  onChange: (\n    parentId: string,\n    activeId: UniqueIdentifier,\n    activeIndex: number,\n    overIndex: number,\n  ) => void;\n  /**\n   * The parent ID for the sortable list\n   */\n  parentId: string;\n  /**\n   * Function to process nav items into sortable items\n   */\n  processSideNavItems: (\n    items: SideNavItem[],\n    depth?: number,\n  ) => (SideNavItem & { sortableItem: BaseItem })[];\n};\n\nconst SideNavSortableList = ({\n  items,\n  onChange,\n  parentId,\n  processSideNavItems,\n  depth = 1,\n}: SideNavSortableListProps) => {\n  const processedItems = useMemo(\n    () => processSideNavItems(items, depth),\n    [processSideNavItems, items, depth],\n  );\n\n  const sortableItems = useMemo(\n    () => processedItems.map((item) => item.sortableItem),\n    [processedItems],\n  );\n\n  const renderItem = useCallback(\n    (sortableItem: BaseItem) => (\n      <SortableList.Item\n        id={sortableItem.id}\n        isDisabled={sortableItem.isDisabled}\n        isSelected={sortableItem.isSelected}\n        isSortable={sortableItem.isSortable}\n      >\n        {sortableItem.navItem}\n      </SortableList.Item>\n    ),\n    [],\n  );\n\n  return (\n    <SortableList\n      items={sortableItems}\n      onChange={onChange}\n      parentId={parentId}\n      renderItem={renderItem}\n    />\n  );\n};\n\nconst MemoizedSideNavSortableList = memo(SideNavSortableList);\nMemoizedSideNavSortableList.displayName = \"SideNavSortableList\";\n\nexport { MemoizedSideNavSortableList as SideNavSortableList };\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAGA,SAASA,IAAI,EAAEC,WAAW,EAAEC,OAAO,QAAQ,OAAO;AAIlD,SAAmBC,YAAY,QAAQ,gCAAgC;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAiCxE,MAAMC,mBAAmB,GAAGA,CAAC;EAC3BC,KAAK;EACLC,QAAQ;EACRC,QAAQ;EACRC,mBAAmB;EACnBC,KAAK,GAAG;AACgB,CAAC,KAAK;EAC9B,MAAMC,cAAc,GAAGV,OAAO,CAC5B,MAAMQ,mBAAmB,CAACH,KAAK,EAAEI,KAAK,CAAC,EACvC,CAACD,mBAAmB,EAAEH,KAAK,EAAEI,KAAK,CACpC,CAAC;EAED,MAAME,aAAa,GAAGX,OAAO,CAC3B,MAAMU,cAAc,CAACE,GAAG,CAAEC,IAAI,IAAKA,IAAI,CAACC,YAAY,CAAC,EACrD,CAACJ,cAAc,CACjB,CAAC;EAED,MAAMK,UAAU,GAAGhB,WAAW,CAC3Be,YAAsB,IACrBX,IAAA,CAACF,YAAY,CAACe,IAAI;IAChBC,EAAE,EAAEH,YAAY,CAACG,EAAG;IACpBC,UAAU,EAAEJ,YAAY,CAACI,UAAW;IACpCC,UAAU,EAAEL,YAAY,CAACK,UAAW;IACpCC,UAAU,EAAEN,YAAY,CAACM,UAAW;IAAAC,QAAA,EAEnCP,YAAY,CAACQ;EAAO,CACJ,CACpB,EACD,EACF,CAAC;EAED,OACEnB,IAAA,CAACF,YAAY;IACXI,KAAK,EAAEM,aAAc;IACrBL,QAAQ,EAAEA,QAAS;IACnBC,QAAQ,EAAEA,QAAS;IACnBQ,UAAU,EAAEA;EAAW,CACxB,CAAC;AAEN,CAAC;AAED,MAAMQ,2BAA2B,GAAGzB,IAAI,CAACM,mBAAmB,CAAC;AAC7DmB,2BAA2B,CAACC,WAAW,GAAG,qBAAqB;AAE/D,SAASD,2BAA2B,IAAInB,mBAAmB","ignoreList":[]}

package/dist/esm/ui-shell/SideNav/SideNavToggleButton.js

@@ -0,0 +1,159 @@
+import _Button from "@mui/material/Button";
+/*!
+ * 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, useCallback, useEffect, useMemo, useRef } from "react";
+import { useTranslation } from "../../i18n.generated/i18n.js";
+import { ChevronRightIcon } from "../../icons.generated/ChevronRight.js";
+import { MuiPropsContext } from "../../MuiPropsContext.js";
+import { useOdysseyDesignTokens } from "../../OdysseyDesignTokensContext.js";
+import { Tooltip } from "../../Tooltip.js";
+import { UI_SHELL_OVERLAY_Z_INDEX } from "../uiShellSharedConstants.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const SIDE_NAV_TOGGLE_ICON_SIZE = 24;
+export const SIDE_NAV_TOGGLE_ICON_HALF_SIZE = SIDE_NAV_TOGGLE_ICON_SIZE / 2;
+const StyledToggleButton = styled(_Button, {
+  shouldForwardProp: prop => prop !== "clickAreaPadding" && prop !== "odysseyDesignTokens"
+})(({
+  clickAreaPadding,
+  odysseyDesignTokens
+}) => ({
+  border: 0,
+  height: `${SIDE_NAV_TOGGLE_ICON_SIZE}px`,
+  left: `-${clickAreaPadding * 2}px`,
+  padding: 0,
+  position: "relative",
+  width: `calc(${SIDE_NAV_TOGGLE_ICON_SIZE}px + (${clickAreaPadding}px * 2))`,
+  zIndex: UI_SHELL_OVERLAY_Z_INDEX,
+  "&&": {
+    backgroundColor: "transparent",
+    borderColor: "transparent",
+    boxShadow: "none",
+    color: odysseyDesignTokens.PalettePrimaryText
+  },
+  "&:focus-visible": {
+    outline: "none"
+  },
+  "&:hover, &:focus-visible": {
+    color: odysseyDesignTokens.HueNeutralWhite
+  },
+  "&::before": {
+    backgroundColor: odysseyDesignTokens.HueNeutralWhite,
+    borderColor: "transparent",
+    borderRadius: "50%",
+    boxShadow: odysseyDesignTokens.ShadowScale1,
+    color: odysseyDesignTokens.PalettePrimaryText,
+    content: "''",
+    height: `${SIDE_NAV_TOGGLE_ICON_SIZE}px`,
+    left: `${clickAreaPadding * 2}px`,
+    position: "absolute",
+    top: 0,
+    width: `${SIDE_NAV_TOGGLE_ICON_SIZE}px`
+  },
+  "&:hover::before, &:focus-visible::before": {
+    backgroundColor: odysseyDesignTokens.PalettePrimaryText
+  }
+}));
+const StyledChevronRightIcon = styled(ChevronRightIcon, {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "isSideNavCollapsed"
+})(({
+  isSideNavCollapsed,
+  odysseyDesignTokens
+}) => ({
+  fontSize: "125%",
+  left: isSideNavCollapsed ? undefined : "4px",
+  position: "absolute",
+  right: isSideNavCollapsed ? "4px" : undefined,
+  top: "3px",
+  transform: isSideNavCollapsed ? "rotate(0deg)" : "rotate(-180deg)",
+  transitionDuration: odysseyDesignTokens.TransitionDurationMain,
+  transitionProperty: "transform",
+  transitionTimingFunction: "ease-in-out"
+}));
+const defaultLocalButton = typeof window === "undefined" ? null : document.createElement("button");
+const SideNavToggleButton = ({
+  ariaControls,
+  clickAreaPadding = 0,
+  id,
+  isSideNavCollapsed,
+  onClick,
+  onHighlight,
+  tabIndex
+}) => {
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+  const {
+    t
+  } = useTranslation();
+  const buttonRef = useRef(defaultLocalButton);
+  useEffect(() => {
+    const setHighlighted = () => {
+      onHighlight?.(true);
+    };
+    const setUnhighlighted = () => {
+      onHighlight?.(false);
+    };
+    const setFocusHighlighted = () => {
+      onHighlight?.(Boolean(buttonRef.current?.matches(":focus-visible")));
+    };
+    buttonRef.current?.addEventListener("mouseenter", setHighlighted);
+    buttonRef.current?.addEventListener("mouseleave", setUnhighlighted);
+    buttonRef.current?.addEventListener("focus", setFocusHighlighted, true);
+    buttonRef.current?.addEventListener("blur", setFocusHighlighted, true);
+    setUnhighlighted();
+    return () => {
+      buttonRef.current?.removeEventListener("mouseenter", setHighlighted);
+      buttonRef.current?.removeEventListener("mouseleave", setUnhighlighted);
+      buttonRef.current?.removeEventListener("focus", setFocusHighlighted, true);
+      buttonRef.current?.removeEventListener("blur", setFocusHighlighted, true);
+    };
+  }, [onHighlight]);
+  const toggleLabel = useMemo(() => isSideNavCollapsed ? t("sidenav.toggle.expand") : t("sidenav.toggle.collapse"), [isSideNavCollapsed, t]);
+  const renderButton = useCallback(muiProps => {
+    return _jsx(StyledToggleButton, {
+      ...muiProps,
+      "aria-controls": ariaControls,
+      "aria-expanded": !isSideNavCollapsed,
+      "aria-label": toggleLabel,
+      clickAreaPadding: clickAreaPadding,
+      "data-se": "sidenav-toggle-button",
+      "data-sidenav-toggle": true,
+      id: id,
+      odysseyDesignTokens: odysseyDesignTokens,
+      onClick: onClick,
+      ref: element => {
+        if (element) {
+          buttonRef.current = element;
+          muiProps.ref?.(element);
+        }
+      },
+      tabIndex: tabIndex,
+      variant: "floating",
+      children: _jsx(StyledChevronRightIcon, {
+        isSideNavCollapsed: isSideNavCollapsed,
+        odysseyDesignTokens: odysseyDesignTokens
+      })
+    });
+  }, [ariaControls, clickAreaPadding, id, isSideNavCollapsed, odysseyDesignTokens, onClick, tabIndex, toggleLabel]);
+  return _jsx(Tooltip, {
+    ariaType: "description",
+    placement: "right",
+    text: toggleLabel,
+    children: _jsx(MuiPropsContext.Consumer, {
+      children: renderButton
+    })
+  });
+};
+const MemoizedSideNavToggleButton = memo(SideNavToggleButton);
+MemoizedSideNavToggleButton.displayName = "SideNavToggleButton";
+export { MemoizedSideNavToggleButton as SideNavToggleButton };
+//# sourceMappingURL=SideNavToggleButton.js.map

package/dist/esm/ui-shell/SideNav/SideNavToggleButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SideNavToggleButton.js","names":["styled","memo","useCallback","useEffect","useMemo","useRef","useTranslation","ChevronRightIcon","MuiPropsContext","useOdysseyDesignTokens","Tooltip","UI_SHELL_OVERLAY_Z_INDEX","jsx","_jsx","SIDE_NAV_TOGGLE_ICON_SIZE","SIDE_NAV_TOGGLE_ICON_HALF_SIZE","StyledToggleButton","_Button","shouldForwardProp","prop","clickAreaPadding","odysseyDesignTokens","border","height","left","padding","position","width","zIndex","backgroundColor","borderColor","boxShadow","color","PalettePrimaryText","outline","HueNeutralWhite","borderRadius","ShadowScale1","content","top","StyledChevronRightIcon","isSideNavCollapsed","fontSize","undefined","right","transform","transitionDuration","TransitionDurationMain","transitionProperty","transitionTimingFunction","defaultLocalButton","window","document","createElement","SideNavToggleButton","ariaControls","id","onClick","onHighlight","tabIndex","t","buttonRef","setHighlighted","setUnhighlighted","setFocusHighlighted","Boolean","current","matches","addEventListener","removeEventListener","toggleLabel","renderButton","muiProps","ref","element","variant","children","ariaType","placement","text","Consumer","MemoizedSideNavToggleButton","displayName"],"sources":["../../../../src/ui-shell/SideNav/SideNavToggleButton.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 type { ButtonProps as MuiButtonProps } from \"@mui/material\";\n\nimport styled from \"@emotion/styled\";\nimport { Button as MuiButton } from \"@mui/material\";\nimport {\n  HTMLAttributes,\n  memo,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n} from \"react\";\n\nimport { useTranslation } from \"../../i18n.generated/i18n.js\";\nimport { ChevronRightIcon } from \"../../icons.generated/ChevronRight.js\";\nimport { MuiPropsContext, MuiPropsContextType } from \"../../MuiPropsContext.js\";\nimport {\n  DesignTokens,\n  useOdysseyDesignTokens,\n} from \"../../OdysseyDesignTokensContext.js\";\nimport { Tooltip } from \"../../Tooltip.js\";\nimport { UI_SHELL_OVERLAY_Z_INDEX } from \"../uiShellSharedConstants.js\";\n\nexport const SIDE_NAV_TOGGLE_ICON_SIZE = 24;\nexport const SIDE_NAV_TOGGLE_ICON_HALF_SIZE = SIDE_NAV_TOGGLE_ICON_SIZE / 2;\n\nconst StyledToggleButton = styled(MuiButton, {\n  shouldForwardProp: (prop) =>\n    prop !== \"clickAreaPadding\" && prop !== \"odysseyDesignTokens\",\n})<{\n  clickAreaPadding: number;\n  odysseyDesignTokens: DesignTokens;\n}>(({ clickAreaPadding, odysseyDesignTokens }) => ({\n  border: 0,\n  height: `${SIDE_NAV_TOGGLE_ICON_SIZE}px`,\n  left: `-${clickAreaPadding * 2}px`,\n  padding: 0,\n  position: \"relative\",\n  width: `calc(${SIDE_NAV_TOGGLE_ICON_SIZE}px + (${clickAreaPadding}px * 2))`,\n  zIndex: UI_SHELL_OVERLAY_Z_INDEX,\n\n  // `&&` is a CSS specificity override. Used here to counteract MUI Button styles.\n  \"&&\": {\n    backgroundColor: \"transparent\",\n    borderColor: \"transparent\",\n    boxShadow: \"none\",\n    color: odysseyDesignTokens.PalettePrimaryText,\n  },\n\n  \"&:focus-visible\": {\n    outline: \"none\",\n  },\n\n  \"&:hover, &:focus-visible\": {\n    color: odysseyDesignTokens.HueNeutralWhite,\n  },\n\n  \"&::before\": {\n    backgroundColor: odysseyDesignTokens.HueNeutralWhite,\n    borderColor: \"transparent\",\n    borderRadius: \"50%\",\n    boxShadow: odysseyDesignTokens.ShadowScale1,\n    color: odysseyDesignTokens.PalettePrimaryText,\n    content: \"''\",\n    height: `${SIDE_NAV_TOGGLE_ICON_SIZE}px`,\n    left: `${clickAreaPadding * 2}px`,\n    position: \"absolute\",\n    top: 0,\n    width: `${SIDE_NAV_TOGGLE_ICON_SIZE}px`,\n  },\n\n  \"&:hover::before, &:focus-visible::before\": {\n    backgroundColor: odysseyDesignTokens.PalettePrimaryText,\n  },\n}));\n\nconst StyledChevronRightIcon = styled(ChevronRightIcon, {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" && prop !== \"isSideNavCollapsed\",\n})<{\n  isSideNavCollapsed: boolean;\n  odysseyDesignTokens: DesignTokens;\n}>(({ isSideNavCollapsed, odysseyDesignTokens }) => ({\n  fontSize: \"125%\",\n  left: isSideNavCollapsed ? undefined : \"4px\",\n  position: \"absolute\",\n  right: isSideNavCollapsed ? \"4px\" : undefined,\n  top: \"3px\",\n  transform: isSideNavCollapsed ? \"rotate(0deg)\" : \"rotate(-180deg)\", // Leave this as `-180deg` so it rotates over the top, not the bottom.\n  transitionDuration: odysseyDesignTokens.TransitionDurationMain,\n  transitionProperty: \"transform\",\n  transitionTimingFunction: \"ease-in-out\",\n}));\n\nexport type SideNavToggleButtonProps = {\n  /**\n   * The `id` of the item this button controls\n   */\n  ariaControls: string;\n  /**\n   * Left padding in pixels for the click area of the button.\n   *\n   * Useful when moving the button around when trying to click it. This ensures the click area doesn't move to the right along with the button.\n   */\n  clickAreaPadding?: number;\n  /**\n   * HTML `id` attribute for the `<button>` element.\n   */\n  id?: string;\n  isSideNavCollapsed: boolean;\n  /**\n   * Click event handler for the `<button>` element.\n   */\n  onClick?: MuiButtonProps[\"onClick\"];\n  /**\n   * Provides the hovered or focused state of the `<button>` element.\n   */\n  onHighlight?: (isHighlighted: boolean) => void;\n  onKeyDown?: MuiButtonProps[\"onKeyDown\"];\n  tabIndex?: HTMLAttributes<HTMLElement>[\"tabIndex\"];\n};\n\n// This allows us to mutate the value with TypeScript. A singleton is fine because it gets overridden on render.\nconst defaultLocalButton =\n  typeof window === \"undefined\" ? null : document.createElement(\"button\");\n\nconst SideNavToggleButton = ({\n  ariaControls,\n  clickAreaPadding = 0,\n  id,\n  isSideNavCollapsed,\n  onClick,\n  onHighlight,\n  tabIndex,\n}: SideNavToggleButtonProps) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n  const { t } = useTranslation();\n\n  const buttonRef = useRef(defaultLocalButton);\n\n  useEffect(() => {\n    const setHighlighted = () => {\n      onHighlight?.(true);\n    };\n\n    const setUnhighlighted = () => {\n      onHighlight?.(false);\n    };\n\n    const setFocusHighlighted = () => {\n      onHighlight?.(Boolean(buttonRef.current?.matches(\":focus-visible\")));\n    };\n\n    buttonRef.current?.addEventListener(\"mouseenter\", setHighlighted);\n\n    buttonRef.current?.addEventListener(\"mouseleave\", setUnhighlighted);\n\n    buttonRef.current?.addEventListener(\"focus\", setFocusHighlighted, true);\n\n    buttonRef.current?.addEventListener(\"blur\", setFocusHighlighted, true);\n\n    setUnhighlighted();\n\n    return () => {\n      buttonRef.current?.removeEventListener(\"mouseenter\", setHighlighted);\n\n      buttonRef.current?.removeEventListener(\"mouseleave\", setUnhighlighted);\n\n      buttonRef.current?.removeEventListener(\n        \"focus\",\n        setFocusHighlighted,\n        true,\n      );\n\n      buttonRef.current?.removeEventListener(\"blur\", setFocusHighlighted, true);\n    };\n  }, [onHighlight]);\n\n  const toggleLabel = useMemo(\n    () =>\n      isSideNavCollapsed\n        ? t(\"sidenav.toggle.expand\")\n        : t(\"sidenav.toggle.collapse\"),\n    [isSideNavCollapsed, t],\n  );\n\n  const renderButton = useCallback(\n    (muiProps: MuiPropsContextType) => {\n      return (\n        <StyledToggleButton\n          {...muiProps}\n          aria-controls={ariaControls}\n          aria-expanded={!isSideNavCollapsed}\n          aria-label={toggleLabel}\n          clickAreaPadding={clickAreaPadding}\n          data-se=\"sidenav-toggle-button\"\n          data-sidenav-toggle\n          id={id}\n          odysseyDesignTokens={odysseyDesignTokens}\n          onClick={onClick}\n          ref={(element: HTMLButtonElement) => {\n            if (element) {\n              buttonRef.current = element;\n              //@ts-expect-error `ref` is an optional prop, but TypeScript doesn't know this.\n              muiProps.ref?.(element);\n            }\n          }}\n          tabIndex={tabIndex}\n          variant=\"floating\"\n        >\n          <StyledChevronRightIcon\n            isSideNavCollapsed={isSideNavCollapsed}\n            odysseyDesignTokens={odysseyDesignTokens}\n          />\n        </StyledToggleButton>\n      );\n    },\n    [\n      ariaControls,\n      clickAreaPadding,\n      id,\n      isSideNavCollapsed,\n      odysseyDesignTokens,\n      onClick,\n      tabIndex,\n      toggleLabel,\n    ],\n  );\n\n  return (\n    <Tooltip ariaType=\"description\" placement=\"right\" text={toggleLabel}>\n      <MuiPropsContext.Consumer>{renderButton}</MuiPropsContext.Consumer>\n    </Tooltip>\n  );\n};\n\nconst MemoizedSideNavToggleButton = memo(SideNavToggleButton);\nMemoizedSideNavToggleButton.displayName = \"SideNavToggleButton\";\n\nexport { MemoizedSideNavToggleButton as SideNavToggleButton };\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/ui-shell/SideNav/SortableList/SortableItem.js

@@ -0,0 +1,177 @@
+/*!
+ * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import styled from "@emotion/styled";
+import { createContext, createRef, useContext, useMemo } from "react";
+import { useTranslation } from "../../../i18n.generated/i18n.js";
+import { useOdysseyDesignTokens } from "../../../OdysseyDesignTokensContext.js";
+import { useUiShellContext } from "../../../ui-shell/UiShellProvider.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const SortableItemContext = createContext({
+  attributes: {},
+  listeners: undefined,
+  ref: createRef()
+});
+const StyledSortableListItem = styled("li", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "isSelected" && prop !== "sideNavContrastColors"
+})(({
+  odysseyDesignTokens,
+  isSelected,
+  sideNavContrastColors
+}) => ({
+  position: "relative",
+  button: {
+    top: "50%",
+    left: odysseyDesignTokens.Spacing2,
+    transform: "translateY(-50%)"
+  },
+  svg: {
+    path: {
+      fill: "currentColor",
+      ...(sideNavContrastColors?.fontColor && {
+        fill: sideNavContrastColors.fontColor
+      })
+    }
+  },
+  "&:has(a:hover, button:hover, a:focus, button:focus, a:focus-visible, button:focus-visible, [role='button']:hover, [role='button']:focus, [role='button']:focus-visible)": {
+    button: {
+      opacity: 1,
+      outlineWidth: 0
+    }
+  },
+  ...(isSelected && {
+    svg: {
+      path: {
+        fill: odysseyDesignTokens.TypographyColorAction,
+        ...(sideNavContrastColors?.fontColor && {
+          fill: sideNavContrastColors.fontColor
+        })
+      }
+    }
+  })
+}));
+const StyledUl = styled("ul")({
+  padding: 0,
+  listStyle: "none",
+  listStyleType: "none"
+});
+const StyledDragHandleButton = styled("button", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "isDragging" && prop !== "focusRingColor"
+})(({
+  odysseyDesignTokens,
+  isDragging,
+  focusRingColor
+}) => ({
+  position: "absolute",
+  opacity: 0,
+  padding: odysseyDesignTokens.Spacing2,
+  border: "none",
+  backgroundColor: "transparent",
+  cursor: `${isDragging ? "grabbing" : "grab"}`,
+  transition: `opacity ${odysseyDesignTokens.TransitionDurationMain}`,
+  borderRadius: odysseyDesignTokens.BorderRadiusMain,
+  svg: {
+    display: "flex"
+  },
+  "&:focus, &:focus-visible": {
+    outline: "none",
+    boxShadow: `inset 0 0 0 2px ${odysseyDesignTokens.PalettePrimaryMain}`,
+    ...(focusRingColor && {
+      boxShadow: `inset 0 0 0 2px ${focusRingColor}`
+    })
+  }
+}));
+export const DragHandle = ({
+  isDragging
+}) => {
+  const {
+    attributes,
+    listeners,
+    ref
+  } = useContext(SortableItemContext);
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+  const {
+    t
+  } = useTranslation();
+  const uiShellContext = useUiShellContext();
+  return _jsx(StyledDragHandleButton, {
+    ...attributes,
+    ...listeners,
+    "aria-label": t("navigation.drag.handle"),
+    focusRingColor: uiShellContext?.sideNavContrastColors?.focusRingColor,
+    isDragging: isDragging,
+    odysseyDesignTokens: odysseyDesignTokens,
+    ref: ref,
+    children: _jsx("svg", {
+      fill: "none",
+      height: "16",
+      viewBox: "0 0 16 16",
+      width: "16",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: _jsx("path", {
+        clipRule: "evenodd",
+        d: "M6 2.33331C6 2.8856 5.55228 3.33331 5 3.33331C4.44772 3.33331 4 2.8856 4 2.33331C4 1.78103 4.44772 1.33331 5 1.33331C5.55228 1.33331 6 1.78103 6 2.33331ZM11 3.33331C11.5523 3.33331 12 2.8856 12 2.33331C12 1.78103 11.5523 1.33331 11 1.33331C10.4477 1.33331 10 1.78103 10 2.33331C10 2.8856 10.4477 3.33331 11 3.33331ZM11 7.11109C11.5523 7.11109 12 6.66338 12 6.11109C12 5.55881 11.5523 5.11109 11 5.11109C10.4477 5.11109 10 5.55881 10 6.11109C10 6.66338 10.4477 7.11109 11 7.11109ZM12 9.88887C12 10.4412 11.5523 10.8889 11 10.8889C10.4477 10.8889 10 10.4412 10 9.88887C10 9.33659 10.4477 8.88887 11 8.88887C11.5523 8.88887 12 9.33659 12 9.88887ZM11 14.6666C11.5523 14.6666 12 14.2189 12 13.6666C12 13.1144 11.5523 12.6666 11 12.6666C10.4477 12.6666 10 13.1144 10 13.6666C10 14.2189 10.4477 14.6666 11 14.6666ZM5 7.11109C5.55228 7.11109 6 6.66338 6 6.11109C6 5.55881 5.55228 5.11109 5 5.11109C4.44772 5.11109 4 5.55881 4 6.11109C4 6.66338 4.44772 7.11109 5 7.11109ZM6 9.88888C6 10.4412 5.55228 10.8889 5 10.8889C4.44772 10.8889 4 10.4412 4 9.88888C4 9.33659 4.44772 8.88888 5 8.88888C5.55228 8.88888 6 9.33659 6 9.88888ZM5 14.6666C5.55228 14.6666 6 14.2189 6 13.6666C6 13.1144 5.55228 12.6666 5 12.6666C4.44772 12.6666 4 13.1144 4 13.6666C4 14.2189 4.44772 14.6666 5 14.6666Z",
+        fill: "#3F59E4",
+        fillRule: "evenodd"
+      })
+    })
+  });
+};
+export const SortableItem = ({
+  id,
+  isDisabled,
+  isSelected,
+  isSortable = true,
+  children
+}) => {
+  const {
+    attributes,
+    isDragging,
+    listeners,
+    setNodeRef,
+    setActivatorNodeRef,
+    transform,
+    transition
+  } = useSortable({
+    id
+  });
+  const context = useMemo(() => ({
+    attributes,
+    listeners,
+    ref: setActivatorNodeRef
+  }), [attributes, listeners, setActivatorNodeRef]);
+  const style = {
+    opacity: isDragging ? 0.4 : undefined,
+    transform: CSS.Translate.toString(transform),
+    transition
+  };
+  const uiShellContext = useUiShellContext();
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+  return _jsx(SortableItemContext.Provider, {
+    value: context,
+    children: _jsxs(StyledSortableListItem, {
+      isSelected: isSelected,
+      odysseyDesignTokens: odysseyDesignTokens,
+      ref: setNodeRef,
+      sideNavContrastColors: uiShellContext?.sideNavContrastColors,
+      style: style,
+      children: [!isDisabled && isSortable && _jsx(DragHandle, {
+        isDragging: isDragging
+      }), _jsx(StyledUl, {
+        children: children
+      })]
+    })
+  });
+};
+//# sourceMappingURL=SortableItem.js.map

package/dist/esm/ui-shell/SideNav/SortableList/SortableItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SortableItem.js","names":["useSortable","CSS","styled","createContext","createRef","useContext","useMemo","useTranslation","useOdysseyDesignTokens","useUiShellContext","jsx","_jsx","jsxs","_jsxs","SortableItemContext","attributes","listeners","undefined","ref","StyledSortableListItem","shouldForwardProp","prop","odysseyDesignTokens","isSelected","sideNavContrastColors","position","button","top","left","Spacing2","transform","svg","path","fill","fontColor","opacity","outlineWidth","TypographyColorAction","StyledUl","padding","listStyle","listStyleType","StyledDragHandleButton","isDragging","focusRingColor","border","backgroundColor","cursor","transition","TransitionDurationMain","borderRadius","BorderRadiusMain","display","outline","boxShadow","PalettePrimaryMain","DragHandle","t","uiShellContext","children","height","viewBox","width","xmlns","clipRule","d","fillRule","SortableItem","id","isDisabled","isSortable","setNodeRef","setActivatorNodeRef","context","style","Translate","toString","Provider","value"],"sources":["../../../../../src/ui-shell/SideNav/SortableList/SortableItem.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 type {\n  DraggableSyntheticListeners,\n  UniqueIdentifier,\n} from \"@dnd-kit/core\";\n\nimport { useSortable } from \"@dnd-kit/sortable\";\nimport { CSS } from \"@dnd-kit/utilities\";\nimport styled from \"@emotion/styled\";\nimport {\n  createContext,\n  createRef,\n  CSSProperties,\n  PropsWithChildren,\n  RefObject,\n  useContext,\n  useMemo,\n} from \"react\";\n\nimport { ContrastColors } from \"../../../createContrastColors.js\";\nimport { useTranslation } from \"../../../i18n.generated/i18n.js\";\nimport {\n  DesignTokens,\n  useOdysseyDesignTokens,\n} from \"../../../OdysseyDesignTokensContext.js\";\nimport {\n  UiShellColors,\n  useUiShellContext,\n} from \"../../../ui-shell/UiShellProvider.js\";\n\ntype ItemProps = {\n  id: UniqueIdentifier;\n  isDisabled?: boolean;\n  isSelected?: boolean;\n  isSortable?: boolean;\n};\n\nexport type SortableItemContextType = {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  attributes: Record<string, any>;\n  listeners: DraggableSyntheticListeners;\n  ref: RefObject<HTMLButtonElement>;\n};\n\nconst SortableItemContext = createContext<SortableItemContextType>({\n  attributes: {},\n  listeners: undefined,\n  ref: createRef<HTMLButtonElement>(),\n});\n\nconst StyledSortableListItem = styled(\"li\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" &&\n    prop !== \"isSelected\" &&\n    prop !== \"sideNavContrastColors\",\n})<{\n  isSelected?: boolean;\n  odysseyDesignTokens: DesignTokens;\n  sideNavContrastColors: UiShellColors[\"sideNavContrastColors\"];\n}>(({ odysseyDesignTokens, isSelected, sideNavContrastColors }) => ({\n  position: \"relative\",\n\n  button: {\n    top: \"50%\",\n    left: odysseyDesignTokens.Spacing2,\n    transform: \"translateY(-50%)\",\n  },\n\n  svg: {\n    path: {\n      fill: \"currentColor\",\n      ...(sideNavContrastColors?.fontColor && {\n        fill: sideNavContrastColors.fontColor,\n      }),\n    },\n  },\n\n  \"&:has(a:hover, button:hover, a:focus, button:focus, a:focus-visible, button:focus-visible, [role='button']:hover, [role='button']:focus, [role='button']:focus-visible)\":\n    {\n      button: {\n        opacity: 1,\n        outlineWidth: 0,\n      },\n    },\n\n  ...(isSelected && {\n    svg: {\n      path: {\n        fill: odysseyDesignTokens.TypographyColorAction,\n\n        ...(sideNavContrastColors?.fontColor && {\n          fill: sideNavContrastColors.fontColor,\n        }),\n      },\n    },\n  }),\n}));\n\nconst StyledUl = styled(\"ul\")({\n  padding: 0,\n  listStyle: \"none\",\n  listStyleType: \"none\",\n});\n\nconst StyledDragHandleButton = styled(\"button\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" &&\n    prop !== \"isDragging\" &&\n    prop !== \"focusRingColor\",\n})<{\n  focusRingColor: ContrastColors[\"focusRingColor\"];\n  isDragging?: boolean;\n  odysseyDesignTokens: DesignTokens;\n}>(({ odysseyDesignTokens, isDragging, focusRingColor }) => ({\n  position: \"absolute\",\n  opacity: 0,\n  padding: odysseyDesignTokens.Spacing2,\n  border: \"none\",\n  backgroundColor: \"transparent\",\n  cursor: `${isDragging ? \"grabbing\" : \"grab\"}`,\n  transition: `opacity ${odysseyDesignTokens.TransitionDurationMain}`,\n  borderRadius: odysseyDesignTokens.BorderRadiusMain,\n\n  svg: {\n    display: \"flex\",\n  },\n\n  \"&:focus, &:focus-visible\": {\n    outline: \"none\",\n    boxShadow: `inset 0 0 0 2px ${odysseyDesignTokens.PalettePrimaryMain}`,\n\n    ...(focusRingColor && {\n      boxShadow: `inset 0 0 0 2px ${focusRingColor}`,\n    }),\n  },\n}));\n\ntype DragHandleProps = {\n  isDisabled?: boolean;\n  isDragging?: boolean;\n};\n\nexport const DragHandle = ({ isDragging }: DragHandleProps) => {\n  const { attributes, listeners, ref } = useContext(SortableItemContext);\n  const odysseyDesignTokens: DesignTokens = useOdysseyDesignTokens();\n  const { t } = useTranslation();\n  const uiShellContext = useUiShellContext();\n\n  return (\n    <StyledDragHandleButton\n      {...attributes}\n      {...listeners}\n      aria-label={t(\"navigation.drag.handle\")}\n      focusRingColor={uiShellContext?.sideNavContrastColors?.focusRingColor}\n      isDragging={isDragging}\n      odysseyDesignTokens={odysseyDesignTokens}\n      ref={ref}\n    >\n      <svg\n        fill=\"none\"\n        height=\"16\"\n        viewBox=\"0 0 16 16\"\n        width=\"16\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          clipRule=\"evenodd\"\n          d=\"M6 2.33331C6 2.8856 5.55228 3.33331 5 3.33331C4.44772 3.33331 4 2.8856 4 2.33331C4 1.78103 4.44772 1.33331 5 1.33331C5.55228 1.33331 6 1.78103 6 2.33331ZM11 3.33331C11.5523 3.33331 12 2.8856 12 2.33331C12 1.78103 11.5523 1.33331 11 1.33331C10.4477 1.33331 10 1.78103 10 2.33331C10 2.8856 10.4477 3.33331 11 3.33331ZM11 7.11109C11.5523 7.11109 12 6.66338 12 6.11109C12 5.55881 11.5523 5.11109 11 5.11109C10.4477 5.11109 10 5.55881 10 6.11109C10 6.66338 10.4477 7.11109 11 7.11109ZM12 9.88887C12 10.4412 11.5523 10.8889 11 10.8889C10.4477 10.8889 10 10.4412 10 9.88887C10 9.33659 10.4477 8.88887 11 8.88887C11.5523 8.88887 12 9.33659 12 9.88887ZM11 14.6666C11.5523 14.6666 12 14.2189 12 13.6666C12 13.1144 11.5523 12.6666 11 12.6666C10.4477 12.6666 10 13.1144 10 13.6666C10 14.2189 10.4477 14.6666 11 14.6666ZM5 7.11109C5.55228 7.11109 6 6.66338 6 6.11109C6 5.55881 5.55228 5.11109 5 5.11109C4.44772 5.11109 4 5.55881 4 6.11109C4 6.66338 4.44772 7.11109 5 7.11109ZM6 9.88888C6 10.4412 5.55228 10.8889 5 10.8889C4.44772 10.8889 4 10.4412 4 9.88888C4 9.33659 4.44772 8.88888 5 8.88888C5.55228 8.88888 6 9.33659 6 9.88888ZM5 14.6666C5.55228 14.6666 6 14.2189 6 13.6666C6 13.1144 5.55228 12.6666 5 12.6666C4.44772 12.6666 4 13.1144 4 13.6666C4 14.2189 4.44772 14.6666 5 14.6666Z\"\n          fill=\"#3F59E4\"\n          fillRule=\"evenodd\"\n        />\n      </svg>\n    </StyledDragHandleButton>\n  );\n};\n\nexport const SortableItem = ({\n  id,\n  isDisabled,\n  isSelected,\n  isSortable = true,\n  children,\n}: PropsWithChildren<ItemProps>) => {\n  const {\n    attributes,\n    isDragging,\n    listeners,\n    setNodeRef,\n    setActivatorNodeRef,\n    transform,\n    transition,\n  } = useSortable({ id });\n\n  const context: SortableItemContextType = useMemo(\n    () => ({\n      attributes,\n      listeners,\n      // This library gives us a legacy ref function, and I can't change it, so I had to override the type. --Kevin Ghadyani\n      ref: setActivatorNodeRef as unknown as RefObject<HTMLButtonElement>,\n    }),\n    [attributes, listeners, setActivatorNodeRef],\n  );\n\n  const style: CSSProperties = {\n    opacity: isDragging ? 0.4 : undefined,\n    transform: CSS.Translate.toString(transform),\n    transition,\n  };\n\n  const uiShellContext = useUiShellContext();\n  const odysseyDesignTokens: DesignTokens = useOdysseyDesignTokens();\n\n  return (\n    <SortableItemContext.Provider value={context}>\n      <StyledSortableListItem\n        isSelected={isSelected}\n        odysseyDesignTokens={odysseyDesignTokens}\n        ref={setNodeRef}\n        sideNavContrastColors={uiShellContext?.sideNavContrastColors}\n        style={style}\n      >\n        {!isDisabled && isSortable && <DragHandle isDragging={isDragging} />}\n        <StyledUl>{children}</StyledUl>\n      </StyledSortableListItem>\n    </SortableItemContext.Provider>\n  );\n};\n"],"mappings":"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","ignoreList":[]}