@okta/odyssey-react-mui 1.25.0 → 1.27.0

package/dist/labs/SideNav/SideNavToggleButton.js

@@ -0,0 +1,170 @@
+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 { memo, useCallback, useImperativeHandle, useMemo, useRef } from "react";
+import styled from "@emotion/styled";
+import { useTranslation } from "react-i18next";
+import { MuiPropsContext } from "../../MuiPropsContext.js";
+import { useOdysseyDesignTokens } from "../../OdysseyDesignTokensContext.js";
+import { Tooltip } from "../../Tooltip.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const StyledToggleButton = styled(_Button, {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "isSideNavCollapsed"
+})(({
+  isSideNavCollapsed,
+  odysseyDesignTokens
+}) => ({
+  backgroundColor: "transparent",
+  position: "relative",
+  width: odysseyDesignTokens.Spacing6,
+  height: odysseyDesignTokens.Spacing6,
+  border: 0,
+  zIndex: 2,
+  "&:focus-visible": {
+    boxShadow: `inset 0 0 0 2px ${odysseyDesignTokens.PalettePrimaryMain}`,
+    outline: "none"
+  },
+  "&:hover, &:focus": {
+    backgroundColor: "transparent",
+    "#lineOne": {
+      animation: `lineOne-animate-to-collapse ${odysseyDesignTokens.TransitionDurationMain} cubic-bezier(0, 0, 0.2, 1)`,
+      animationFillMode: "forwards",
+      "@keyframes lineOne-animate-to-collapse": {
+        "0%": {
+          transform: "translate3d(-50%, -50%, 0)"
+        },
+        "50%": {
+          transform: "translate3d(-50%, -50%, 0) rotate(-90deg) scaleY(.75)"
+        },
+        "100%": {
+          transform: "translate3d(-50%, -27%, 0) rotate(-45deg) scaleY(.75)"
+        }
+      }
+    },
+    "#lineTwo": {
+      animation: `lineTwo-animate-to-collapse ${odysseyDesignTokens.TransitionDurationMain} cubic-bezier(0, 0, 0.2, 1)`,
+      animationFillMode: "forwards",
+      "@keyframes lineTwo-animate-to-collapse": {
+        "0%": {
+          transform: "translate3d(-50%, -50%, 0)"
+        },
+        "50%": {
+          transform: "translate3d(-50%, -50%, 0) rotate(-90deg) scaleY(.75)"
+        },
+        "100%": {
+          transform: "translate3d(-50%, -73%, 0) rotate(-135deg) scaleY(.75)"
+        }
+      }
+    },
+    ...(isSideNavCollapsed && {
+      "#lineOne": {
+        animation: `lineOne-animate-to-expand ${odysseyDesignTokens.TransitionDurationMain} cubic-bezier(0, 0, 0.2, 1)`,
+        animationFillMode: "forwards",
+        "@keyframes lineOne-animate-to-expand": {
+          "0%": {
+            transform: "translate3d(-50%, -50%, 0)"
+          },
+          "50%": {
+            transform: "translate3d(-50%, -50%, 0) rotate(90deg) scaleY(.75)"
+          },
+          "100%": {
+            transform: "translate3d(-50%, -73%, 0) rotate(135deg) scaleY(.75)"
+          }
+        }
+      },
+      "#lineTwo": {
+        animation: `lineTwo-animate-to-expand ${odysseyDesignTokens.TransitionDurationMain} cubic-bezier(0, 0, 0.2, 1)`,
+        animationFillMode: "forwards",
+        "@keyframes lineTwo-animate-to-expand": {
+          "0%": {
+            transform: "translate3d(-50%, -50%, 0)"
+          },
+          "50%": {
+            transform: "translate3d(-50%, -50%, 0) rotate(90deg) scaleY(.75)"
+          },
+          "100%": {
+            transform: "translate3d(-50%, -27%, 0) rotate(45deg) scaleY(.75)"
+          }
+        }
+      }
+    })
+  },
+  span: {
+    position: "absolute",
+    top: "50%",
+    left: "50%",
+    width: "2px",
+    height: odysseyDesignTokens.Spacing4,
+    backgroundColor: odysseyDesignTokens.HueNeutral600,
+    transform: "translate3d(-50%, -50%, 0)",
+    transition: `transform ${odysseyDesignTokens.TransitionDurationMain}`
+  }
+}));
+const SideNavToggleButton = ({
+  ariaControls,
+  buttonRef,
+  id,
+  isSideNavCollapsed,
+  onClick,
+  tabIndex
+}) => {
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+  const {
+    t
+  } = useTranslation();
+  const localButtonRef = useRef(null);
+  useImperativeHandle(buttonRef, () => ({
+    focus: () => {
+      localButtonRef.current?.focus();
+    }
+  }), []);
+  const toggleLabel = useMemo(() => isSideNavCollapsed ? t("sidenav.toggle.expand") : t("sidenav.toggle.collapse"), [isSideNavCollapsed, t]);
+  const renderButton = useCallback(muiProps => {
+    return _jsxs(StyledToggleButton, {
+      ...muiProps,
+      "aria-controls": ariaControls,
+      "aria-expanded": !isSideNavCollapsed,
+      "aria-label": toggleLabel,
+      "data-sidenav-toggle": true,
+      id: id,
+      isSideNavCollapsed: isSideNavCollapsed,
+      odysseyDesignTokens: odysseyDesignTokens,
+      onClick: onClick,
+      ref: element => {
+        if (element) {
+          localButtonRef.current = element;
+          muiProps?.ref?.(element);
+        }
+      },
+      tabIndex: tabIndex,
+      variant: "floating",
+      children: [_jsx("span", {
+        id: "lineOne"
+      }), _jsx("span", {
+        id: "lineTwo"
+      })]
+    });
+  }, [ariaControls, 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/labs/SideNav/SideNavToggleButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SideNavToggleButton.js","names":["memo","useCallback","useImperativeHandle","useMemo","useRef","styled","useTranslation","MuiPropsContext","useOdysseyDesignTokens","Tooltip","jsx","_jsx","jsxs","_jsxs","StyledToggleButton","_Button","shouldForwardProp","prop","isSideNavCollapsed","odysseyDesignTokens","backgroundColor","position","width","Spacing6","height","border","zIndex","boxShadow","PalettePrimaryMain","outline","animation","TransitionDurationMain","animationFillMode","transform","span","top","left","Spacing4","HueNeutral600","transition","SideNavToggleButton","ariaControls","buttonRef","id","onClick","tabIndex","t","localButtonRef","focus","current","toggleLabel","renderButton","muiProps","ref","element","variant","children","ariaType","placement","text","Consumer","MemoizedSideNavToggleButton","displayName"],"sources":["../../../src/labs/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 { Button as MuiButton } from \"@mui/material\";\nimport type { ButtonProps as MuiButtonProps } from \"@mui/material\";\nimport {\n  HTMLAttributes,\n  memo,\n  useCallback,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n} from \"react\";\nimport styled from \"@emotion/styled\";\nimport { useTranslation } from \"react-i18next\";\n\nimport { FocusHandle } from \"../../inputUtils\";\nimport { MuiPropsContext, MuiPropsContextType } from \"../../MuiPropsContext\";\nimport {\n  DesignTokens,\n  useOdysseyDesignTokens,\n} from \"../../OdysseyDesignTokensContext\";\nimport { Tooltip } from \"../../Tooltip\";\n\nconst StyledToggleButton = styled(MuiButton, {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" && prop !== \"isSideNavCollapsed\",\n})(\n  ({\n    isSideNavCollapsed,\n    odysseyDesignTokens,\n  }: {\n    isSideNavCollapsed: boolean;\n    odysseyDesignTokens: DesignTokens;\n  }) => ({\n    backgroundColor: \"transparent\",\n    position: \"relative\",\n    width: odysseyDesignTokens.Spacing6,\n    height: odysseyDesignTokens.Spacing6,\n    border: 0,\n    zIndex: 2,\n\n    \"&:focus-visible\": {\n      boxShadow: `inset 0 0 0 2px ${odysseyDesignTokens.PalettePrimaryMain}`,\n      outline: \"none\",\n    },\n\n    \"&:hover, &:focus\": {\n      backgroundColor: \"transparent\",\n\n      \"#lineOne\": {\n        animation: `lineOne-animate-to-collapse ${odysseyDesignTokens.TransitionDurationMain} cubic-bezier(0, 0, 0.2, 1)`,\n        animationFillMode: \"forwards\",\n        \"@keyframes lineOne-animate-to-collapse\": {\n          \"0%\": {\n            transform: \"translate3d(-50%, -50%, 0)\",\n          },\n          \"50%\": {\n            transform: \"translate3d(-50%, -50%, 0) rotate(-90deg) scaleY(.75)\",\n          },\n          \"100%\": {\n            transform: \"translate3d(-50%, -27%, 0) rotate(-45deg) scaleY(.75)\",\n          },\n        },\n      },\n\n      \"#lineTwo\": {\n        animation: `lineTwo-animate-to-collapse ${odysseyDesignTokens.TransitionDurationMain} cubic-bezier(0, 0, 0.2, 1)`,\n        animationFillMode: \"forwards\",\n        \"@keyframes lineTwo-animate-to-collapse\": {\n          \"0%\": {\n            transform: \"translate3d(-50%, -50%, 0)\",\n          },\n          \"50%\": {\n            transform: \"translate3d(-50%, -50%, 0) rotate(-90deg) scaleY(.75)\",\n          },\n          \"100%\": {\n            transform: \"translate3d(-50%, -73%, 0) rotate(-135deg) scaleY(.75)\",\n          },\n        },\n      },\n\n      ...(isSideNavCollapsed && {\n        \"#lineOne\": {\n          animation: `lineOne-animate-to-expand ${odysseyDesignTokens.TransitionDurationMain} cubic-bezier(0, 0, 0.2, 1)`,\n          animationFillMode: \"forwards\",\n          \"@keyframes lineOne-animate-to-expand\": {\n            \"0%\": {\n              transform: \"translate3d(-50%, -50%, 0)\",\n            },\n            \"50%\": {\n              transform: \"translate3d(-50%, -50%, 0) rotate(90deg) scaleY(.75)\",\n            },\n            \"100%\": {\n              transform:\n                \"translate3d(-50%, -73%, 0) rotate(135deg) scaleY(.75)\",\n            },\n          },\n        },\n\n        \"#lineTwo\": {\n          animation: `lineTwo-animate-to-expand ${odysseyDesignTokens.TransitionDurationMain} cubic-bezier(0, 0, 0.2, 1)`,\n          animationFillMode: \"forwards\",\n          \"@keyframes lineTwo-animate-to-expand\": {\n            \"0%\": {\n              transform: \"translate3d(-50%, -50%, 0)\",\n            },\n            \"50%\": {\n              transform: \"translate3d(-50%, -50%, 0) rotate(90deg) scaleY(.75)\",\n            },\n            \"100%\": {\n              transform: \"translate3d(-50%, -27%, 0) rotate(45deg) scaleY(.75)\",\n            },\n          },\n        },\n      }),\n    },\n\n    span: {\n      position: \"absolute\",\n      top: \"50%\",\n      left: \"50%\",\n      width: \"2px\",\n      height: odysseyDesignTokens.Spacing4,\n      backgroundColor: odysseyDesignTokens.HueNeutral600,\n      transform: \"translate3d(-50%, -50%, 0)\",\n      transition: `transform ${odysseyDesignTokens.TransitionDurationMain}`,\n    },\n  }),\n);\n\nexport type SideNavToggleButtonProps = {\n  /**\n   * The ref forwarded to the Button\n   */\n  buttonRef?: React.RefObject<FocusHandle>;\n  /**\n   * The `id` of the item this button controls\n   */\n  ariaControls: string;\n  /**\n   * The ID of the Button\n   */\n  id?: string;\n  isSideNavCollapsed: boolean;\n  tabIndex?: HTMLAttributes<HTMLElement>[\"tabIndex\"];\n  /**\n   * The click event handler for the Button\n   */\n  onClick?: MuiButtonProps[\"onClick\"];\n  onKeyDown?: MuiButtonProps[\"onKeyDown\"];\n};\n\nconst SideNavToggleButton = ({\n  ariaControls,\n  buttonRef,\n  id,\n  isSideNavCollapsed,\n  onClick,\n  tabIndex,\n}: SideNavToggleButtonProps) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n  const { t } = useTranslation();\n\n  const localButtonRef = useRef<HTMLButtonElement | HTMLAnchorElement>(null);\n\n  useImperativeHandle(\n    buttonRef,\n    () => ({\n      focus: () => {\n        localButtonRef.current?.focus();\n      },\n    }),\n    [],\n  );\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          data-sidenav-toggle={true}\n          id={id}\n          isSideNavCollapsed={isSideNavCollapsed}\n          odysseyDesignTokens={odysseyDesignTokens}\n          onClick={onClick}\n          ref={(element) => {\n            if (element) {\n              (\n                localButtonRef as React.MutableRefObject<HTMLButtonElement>\n              ).current = element;\n              //@ts-expect-error ref is not an optional prop on the props context type\n              muiProps?.ref?.(element);\n            }\n          }}\n          tabIndex={tabIndex}\n          variant=\"floating\"\n        >\n          <span id=\"lineOne\" />\n          <span id=\"lineTwo\" />\n        </StyledToggleButton>\n      );\n    },\n    [\n      ariaControls,\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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"}

package/dist/labs/SideNav/SortableList/SortableItem.js

@@ -0,0 +1,162 @@
+/*!
+ * 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, useMemo } from "react";
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import styled from "@emotion/styled";
+import { useOdysseyDesignTokens } from "../../../OdysseyDesignTokensContext.js";
+import { useTranslation } from "react-i18next";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const SortableItemContext = createContext({
+  attributes: {},
+  listeners: undefined,
+  ref() {}
+});
+const StyledSortableListItem = styled("li", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "isSelected"
+})(({
+  odysseyDesignTokens,
+  isSelected
+}) => ({
+  position: "relative",
+  button: {
+    top: "50%",
+    left: odysseyDesignTokens.Spacing2,
+    transform: "translateY(-50%)"
+  },
+  svg: {
+    path: {
+      fill: "currentColor"
+    }
+  },
+  "&: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
+      }
+    }
+  })
+}));
+const StyledUl = styled("ul")({
+  padding: 0,
+  listStyle: "none",
+  listStyleType: "none"
+});
+const StyledDragHandleButton = styled("button", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "isDragging"
+})(({
+  odysseyDesignTokens,
+  isDragging
+}) => ({
+  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}`
+  }
+}));
+export const DragHandle = ({
+  isDragging
+}) => {
+  const {
+    attributes,
+    listeners,
+    ref
+  } = useContext(SortableItemContext);
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+  const {
+    t
+  } = useTranslation();
+  return _jsx(StyledDragHandleButton, {
+    ...attributes,
+    ...listeners,
+    odysseyDesignTokens: odysseyDesignTokens,
+    isDragging: isDragging,
+    ref: ref,
+    "aria-label": t("navigation.drag.handle"),
+    children: _jsx("svg", {
+      width: "16",
+      height: "16",
+      viewBox: "0 0 16 16",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: _jsx("path", {
+        fillRule: "evenodd",
+        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"
+      })
+    })
+  });
+};
+export const SortableItem = ({
+  id,
+  isDisabled,
+  isSelected,
+  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 odysseyDesignTokens = useOdysseyDesignTokens();
+  return _jsx(SortableItemContext.Provider, {
+    value: context,
+    children: _jsxs(StyledSortableListItem, {
+      "data-sortable-container": "true",
+      ref: setNodeRef,
+      style: style,
+      odysseyDesignTokens: odysseyDesignTokens,
+      isSelected: isSelected,
+      children: [!isDisabled && _jsx(DragHandle, {
+        isDragging: isDragging
+      }), _jsx(StyledUl, {
+        children: children
+      })]
+    })
+  });
+};
+//# sourceMappingURL=SortableItem.js.map

package/dist/labs/SideNav/SortableList/SortableItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SortableItem.js","names":["createContext","useContext","useMemo","useSortable","CSS","styled","useOdysseyDesignTokens","useTranslation","jsx","_jsx","jsxs","_jsxs","SortableItemContext","attributes","listeners","undefined","ref","StyledSortableListItem","shouldForwardProp","prop","odysseyDesignTokens","isSelected","position","button","top","left","Spacing2","transform","svg","path","fill","opacity","outlineWidth","TypographyColorAction","StyledUl","padding","listStyle","listStyleType","StyledDragHandleButton","isDragging","border","backgroundColor","cursor","transition","TransitionDurationMain","borderRadius","BorderRadiusMain","display","outline","boxShadow","PalettePrimaryMain","DragHandle","t","children","width","height","viewBox","xmlns","fillRule","clipRule","d","SortableItem","id","isDisabled","setNodeRef","setActivatorNodeRef","context","style","Translate","toString","Provider","value"],"sources":["../../../../src/labs/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 { createContext, useContext, useMemo } from \"react\";\nimport type { CSSProperties, PropsWithChildren } from \"react\";\nimport type {\n  DraggableSyntheticListeners,\n  UniqueIdentifier,\n} from \"@dnd-kit/core\";\n// eslint-disable-next-line import/no-extraneous-dependencies\nimport { useSortable } from \"@dnd-kit/sortable\";\n// eslint-disable-next-line import/no-extraneous-dependencies\nimport { CSS } from \"@dnd-kit/utilities\";\nimport styled from \"@emotion/styled\";\nimport {\n  DesignTokens,\n  useOdysseyDesignTokens,\n} from \"../../../OdysseyDesignTokensContext\";\nimport { useTranslation } from \"react-i18next\";\n\ntype ItemProps = {\n  id: UniqueIdentifier;\n  isDisabled?: boolean;\n  isSelected?: boolean;\n};\n\ninterface Context {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  attributes: Record<string, any>;\n  listeners: DraggableSyntheticListeners;\n  ref(node: HTMLElement | null): void;\n}\n\nconst SortableItemContext = createContext<Context>({\n  attributes: {},\n  listeners: undefined,\n  ref() {},\n});\n\nconst StyledSortableListItem = styled(\"li\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" && prop !== \"isSelected\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n  isSelected?: boolean;\n}>(({ odysseyDesignTokens, isSelected }) => ({\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    },\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    },\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\" && prop !== \"isDragging\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n  isDragging?: boolean;\n}>(({ odysseyDesignTokens, isDragging }) => ({\n  position: \"absolute\",\n  opacity: 0,\n  // paddingInlineStart: odysseyDesignTokens.Spacing4,\n  padding: odysseyDesignTokens.Spacing2,\n  // paddingBlock: 0,\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}));\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\n  return (\n    <StyledDragHandleButton\n      {...attributes}\n      {...listeners}\n      odysseyDesignTokens={odysseyDesignTokens}\n      isDragging={isDragging}\n      ref={ref}\n      aria-label={t(\"navigation.drag.handle\")}\n    >\n      <svg\n        width=\"16\"\n        height=\"16\"\n        viewBox=\"0 0 16 16\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          fillRule=\"evenodd\"\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        />\n      </svg>\n    </StyledDragHandleButton>\n  );\n};\n\nexport const SortableItem = ({\n  id,\n  isDisabled,\n  isSelected,\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  const context: Context = useMemo(\n    () => ({\n      attributes,\n      listeners,\n      ref: setActivatorNodeRef,\n    }),\n    [attributes, listeners, setActivatorNodeRef],\n  );\n  const style: CSSProperties = {\n    opacity: isDragging ? 0.4 : undefined,\n    transform: CSS.Translate.toString(transform),\n    transition,\n  };\n\n  const odysseyDesignTokens: DesignTokens = useOdysseyDesignTokens();\n  return (\n    <SortableItemContext.Provider value={context}>\n      <StyledSortableListItem\n        data-sortable-container=\"true\"\n        ref={setNodeRef}\n        style={style}\n        odysseyDesignTokens={odysseyDesignTokens}\n        isSelected={isSelected}\n      >\n        {!isDisabled && <DragHandle isDragging={isDragging} />}\n        <StyledUl>{children}</StyledUl>\n      </StyledSortableListItem>\n    </SortableItemContext.Provider>\n  );\n};\n"],"mappings":"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"}

package/dist/labs/SideNav/SortableList/SortableList.js

@@ -0,0 +1,118 @@
+/*!
+ * 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 React, { useMemo, useState } from "react";
+import { DndContext, KeyboardSensor, PointerSensor, useSensor, useSensors } from "@dnd-kit/core";
+import { SortableContext, sortableKeyboardCoordinates } from "@dnd-kit/sortable";
+import { SortableItem } from "./SortableItem.js";
+import { SortableOverlay } from "./SortableOverlay.js";
+import { useTranslation } from "react-i18next";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export const SortableList = ({
+  parentId,
+  items,
+  onChange,
+  renderItem
+}) => {
+  const [active, setActive] = useState(null);
+  const activeItem = useMemo(() => items.find(item => item.id === active?.id), [active, items]);
+  const sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, {
+    coordinateGetter: sortableKeyboardCoordinates
+  }));
+  const {
+    t
+  } = useTranslation();
+  const announcements = useMemo(() => ({
+    onDragStart: ({
+      active
+    }) => {
+      return `${t("sortable.list.drag.start", {
+        activeId: active.id
+      })}`;
+    },
+    onDragOver: ({
+      active,
+      over
+    }) => {
+      if (over) {
+        return `${t("sortable.list.drag.moved.over", {
+          activeId: active.id,
+          overId: over.id
+        })}`;
+      }
+      return `${t("sortable.list.drag.nolonger.over", {
+        activeId: active.id
+      })}`;
+    },
+    onDragEnd: ({
+      active,
+      over
+    }) => {
+      if (over) {
+        return `${t("sortable.list.drag.end.dropped.over", {
+          activeId: active.id,
+          overId: over.id
+        })}`;
+      }
+      return `${t("sortable.list.drag.end.dropped", {
+        activeId: active.id
+      })}`;
+    },
+    onDragCancel: ({
+      active
+    }) => {
+      return `${t("sortable.list.drag.cancel", {
+        activeId: active.id
+      })}`;
+    }
+  }), [t]);
+  return _jsxs(DndContext, {
+    accessibility: {
+      announcements: announcements
+    },
+    sensors: sensors,
+    onDragStart: ({
+      active
+    }) => {
+      setActive(active);
+    },
+    onDragEnd: ({
+      active,
+      over
+    }) => {
+      if (over && active.id !== over?.id) {
+        const activeIndex = items.findIndex(({
+          id
+        }) => id === active.id);
+        const overIndex = items.findIndex(({
+          id
+        }) => id === over.id);
+        onChange(parentId, activeIndex, overIndex);
+      }
+      setActive(null);
+    },
+    onDragCancel: () => {
+      setActive(null);
+    },
+    children: [_jsx(SortableContext, {
+      items: items,
+      children: items.map(item => _jsx(React.Fragment, {
+        children: renderItem(item)
+      }, item.id))
+    }), _jsx(SortableOverlay, {
+      children: activeItem ? renderItem(activeItem) : null
+    })]
+  });
+};
+SortableList.Item = SortableItem;
+//# sourceMappingURL=SortableList.js.map

package/dist/labs/SideNav/SortableList/SortableList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SortableList.js","names":["React","useMemo","useState","DndContext","KeyboardSensor","PointerSensor","useSensor","useSensors","SortableContext","sortableKeyboardCoordinates","SortableItem","SortableOverlay","useTranslation","jsx","_jsx","jsxs","_jsxs","SortableList","parentId","items","onChange","renderItem","active","setActive","activeItem","find","item","id","sensors","coordinateGetter","t","announcements","onDragStart","activeId","onDragOver","over","overId","onDragEnd","onDragCancel","accessibility","activeIndex","findIndex","overIndex","children","map","Fragment","Item"],"sources":["../../../../src/labs/SideNav/SortableList/SortableList.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 React, { useMemo, useState } from \"react\";\nimport type { ReactNode } from \"react\";\n// eslint-disable-next-line import/no-extraneous-dependencies\nimport {\n  DndContext,\n  KeyboardSensor,\n  PointerSensor,\n  useSensor,\n  useSensors,\n} from \"@dnd-kit/core\";\nimport type { Active, Announcements, UniqueIdentifier } from \"@dnd-kit/core\";\n// eslint-disable-next-line import/no-extraneous-dependencies\nimport {\n  SortableContext,\n  sortableKeyboardCoordinates,\n} from \"@dnd-kit/sortable\";\n\nimport { SortableItem } from \"./SortableItem\";\nimport { SortableOverlay } from \"./SortableOverlay\";\nimport { useTranslation } from \"react-i18next\";\n\nexport interface BaseItem {\n  id: UniqueIdentifier;\n  isDisabled: boolean | undefined;\n  isSelected: boolean | undefined;\n  navItem: ReactNode;\n}\n\ninterface ListProps<T extends BaseItem> {\n  parentId: string;\n  items: T[];\n  onChange(parentId: string, activeIndex: number, overIndex: number): void;\n  renderItem(item: T): ReactNode;\n}\n\nexport const SortableList = <T extends BaseItem>({\n  parentId,\n  items,\n  onChange,\n  renderItem,\n}: ListProps<T>) => {\n  const [active, setActive] = useState<Active | null>(null);\n  const activeItem = useMemo(\n    () => items.find((item) => item.id === active?.id),\n    [active, items],\n  );\n  const sensors = useSensors(\n    useSensor(PointerSensor),\n    useSensor(KeyboardSensor, {\n      coordinateGetter: sortableKeyboardCoordinates,\n    }),\n  );\n\n  const { t } = useTranslation();\n  const announcements: Announcements = useMemo(\n    () => ({\n      onDragStart: ({ active }) => {\n        return `${t(\"sortable.list.drag.start\", { activeId: active.id })}`;\n      },\n      onDragOver: ({ active, over }) => {\n        if (over) {\n          return `${t(\"sortable.list.drag.moved.over\", { activeId: active.id, overId: over.id })}`;\n        }\n        return `${t(\"sortable.list.drag.nolonger.over\", { activeId: active.id })}`;\n      },\n      onDragEnd: ({ active, over }) => {\n        if (over) {\n          return `${t(\"sortable.list.drag.end.dropped.over\", { activeId: active.id, overId: over.id })}`;\n        }\n        return `${t(\"sortable.list.drag.end.dropped\", { activeId: active.id })}`;\n      },\n      onDragCancel: ({ active }) => {\n        return `${t(\"sortable.list.drag.cancel\", { activeId: active.id })}`;\n      },\n    }),\n    [t],\n  );\n\n  return (\n    <DndContext\n      accessibility={{ announcements: announcements }}\n      sensors={sensors}\n      onDragStart={({ active }) => {\n        setActive(active);\n      }}\n      onDragEnd={({ active, over }) => {\n        if (over && active.id !== over?.id) {\n          const activeIndex = items.findIndex(({ id }) => id === active.id);\n          const overIndex = items.findIndex(({ id }) => id === over.id);\n          onChange(parentId, activeIndex, overIndex);\n        }\n        setActive(null);\n      }}\n      onDragCancel={() => {\n        setActive(null);\n      }}\n    >\n      <SortableContext items={items}>\n        {items.map((item) => (\n          <React.Fragment key={item.id}>{renderItem(item)}</React.Fragment>\n        ))}\n      </SortableContext>\n      <SortableOverlay>\n        {activeItem ? renderItem(activeItem) : null}\n      </SortableOverlay>\n    </DndContext>\n  );\n};\n\nSortableList.Item = SortableItem;\n"],"mappings":"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"}

package/dist/labs/SideNav/SortableList/SortableOverlay.js

@@ -0,0 +1,30 @@
+/*!
+ * 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 { DragOverlay, defaultDropAnimationSideEffects } from "@dnd-kit/core";
+import { jsx as _jsx } from "react/jsx-runtime";
+const dropAnimationConfig = {
+  sideEffects: defaultDropAnimationSideEffects({
+    styles: {
+      active: {
+        opacity: "0.4"
+      }
+    }
+  })
+};
+export function SortableOverlay({
+  children
+}) {
+  return _jsx(DragOverlay, {
+    dropAnimation: dropAnimationConfig,
+    children: children
+  });
+}
+//# sourceMappingURL=SortableOverlay.js.map

package/dist/labs/SideNav/SortableList/SortableOverlay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SortableOverlay.js","names":["DragOverlay","defaultDropAnimationSideEffects","jsx","_jsx","dropAnimationConfig","sideEffects","styles","active","opacity","SortableOverlay","children","dropAnimation"],"sources":["../../../../src/labs/SideNav/SortableList/SortableOverlay.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 { PropsWithChildren } from \"react\";\n// eslint-disable-next-line import/no-extraneous-dependencies\nimport { DragOverlay, defaultDropAnimationSideEffects } from \"@dnd-kit/core\";\nimport type { DropAnimation } from \"@dnd-kit/core\";\n\nconst dropAnimationConfig: DropAnimation = {\n  sideEffects: defaultDropAnimationSideEffects({\n    styles: {\n      active: {\n        opacity: \"0.4\",\n      },\n    },\n  }),\n};\n\ninterface Props {}\n\nexport function SortableOverlay({ children }: PropsWithChildren<Props>) {\n  return (\n    <DragOverlay dropAnimation={dropAnimationConfig}>{children}</DragOverlay>\n  );\n}\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAIA,SAASA,WAAW,EAAEC,+BAA+B,QAAQ,eAAe;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAG7E,MAAMC,mBAAkC,GAAG;EACzCC,WAAW,EAAEJ,+BAA+B,CAAC;IAC3CK,MAAM,EAAE;MACNC,MAAM,EAAE;QACNC,OAAO,EAAE;MACX;IACF;EACF,CAAC;AACH,CAAC;AAID,OAAO,SAASC,eAAeA,CAAC;EAAEC;AAAmC,CAAC,EAAE;EACtE,OACEP,IAAA,CAACH,WAAW;IAACW,aAAa,EAAEP,mBAAoB;IAAAM,QAAA,EAAEA;EAAQ,CAAc,CAAC;AAE7E"}

package/dist/labs/SideNav/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":[],"sources":["../../../src/labs/SideNav/types.ts"],"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 { ReactElement } from \"react\";\nimport type { HtmlProps } from \"../../HtmlProps\";\nimport type { statusSeverityValues } from \"../../Status\";\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   *  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  /**\n   * A CSS length string indicating the customizable expanded width of the SideNav container.\n   * (it will be smaller if isCollapsible and collapsed)\n   */\n  expandedWidth?: string;\n  /**\n   * An optional logo to display in the header. If not provided, will default to the Okta logo\n   */\n  logo?: ReactElement;\n} & (\n  | {\n      /**\n       * Footer items in the side nav\n       */\n      footerItems?: SideNavFooterItem[];\n      /**\n       * footerComponent cannot be used if footerItems are defined\n       */\n      footerComponent?: never;\n    }\n  | {\n      /**\n       * footerItems cannot be used if footerComponent is defined\n       */\n      footerItems?: never;\n      /**\n       * The component to display as the footer; if present the `footerItems` are ignored and not rendered.\n       */\n      footerComponent?: ReactElement;\n    }\n) &\n  Pick<HtmlProps, \"testId\">;\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"],"mappings":""}
+{"version":3,"file":"types.js","names":[],"sources":["../../../src/labs/SideNav/types.ts"],"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 { ReactElement } from \"react\";\nimport type { HtmlProps } from \"../../HtmlProps\";\nimport type { statusSeverityValues } from \"../../Status\";\n\nexport type SideNavLogoProps = {\n  href?: string;\n} & (\n  | {\n      /**\n       * a component to render as the logo\n       */\n      logoComponent: ReactElement;\n      imageAltText?: never;\n      imageUrl?: never;\n    }\n  | {\n      /**\n       * The src url to render in an `img` tag\n       */\n      imageUrl: string;\n      /**\n       * alt text for the img logo\n       */\n      imageAltText: string;\n      logoComponent?: never;\n    }\n  | {\n      /**\n       * The src url to render in an `img` tag\n       */\n      imageUrl?: never;\n      /**\n       * alt text for the img logo\n       */\n      imageAltText?: never;\n      logoComponent?: never;\n    }\n);\n\nexport type SideNavProps = {\n  /**\n   * Side Nav header text that is usually reserved to show the App name\n   */\n  appName: string;\n  /**\n   *  Determines whether the side nav is collapsible\n   */\n  isCollapsible?: boolean;\n  /**\n   *  Determines whether the side nav items use compact layout\n   */\n  isCompact?: boolean;\n  /**\n   *  Before the side nav has items, it will be in a loading state.\n   */\n  isLoading?: boolean;\n  /**\n   * An optional logo component or src string for an img to display in the header. If not provided, will default to the Okta logo\n   */\n  logoProps?: SideNavLogoProps;\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   *  Triggers when the item is reordered\n   */\n  onSort?(reorderedItems: SideNavItem[]): void;\n  /**\n   * Nav items in the side nav\n   */\n  sideNavItems: SideNavItem[];\n} & (\n  | {\n      /**\n       * The component to display as the footer; if present the `footerItems` are ignored and not rendered.\n       */\n      footerComponent?: ReactElement;\n      footerItems?: never;\n      hasCustomFooter: true;\n    }\n  | {\n      footerComponent?: never;\n      /**\n       * Footer items in the side nav\n       */\n      footerItems?: SideNavFooterItem[];\n      hasCustomFooter?: false;\n    }\n) &\n  Pick<HtmlProps, \"testId\">;\n\nexport type SideNavItem = {\n  /**\n   * The number to display as a count alongside the nav item\n   */\n  count?: number;\n  /**\n   * The icon element to display at the end of the Nav Item\n   */\n  endIcon?: ReactElement;\n  id: string;\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 nestedNavItems is not expandable.\n   */\n  isDisabled?: boolean;\n  /**\n   * Whether the item is active/selected\n   */\n  isSelected?: boolean;\n  label: string;\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      nestedNavItems?: never;\n      href?: never;\n      isDefaultExpanded?: never;\n      isExpanded?: never;\n      /**\n       * Determines if the side nav item is a section header\n       */\n      isSectionHeader: true;\n      isSortable?: never;\n    }\n  | {\n      nestedNavItems?: never;\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      isDefaultExpanded?: never;\n      isExpanded?: never;\n      isSectionHeader?: never;\n      isSortable?: never;\n    }\n  | {\n      /**\n       * An array of side nav items to be displayed as nestedNavItems within Accordion\n       */\n      nestedNavItems?: Array<Omit<SideNavItem, \"startIcon\" | \"nestedNavItems\">>;\n      endIcon?: never;\n      href?: never;\n      /**\n       * Whether the accordion (nav item with nestedNavItems) 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      /**\n       * If true, enables sorting for the accordion items\n       */\n      isSectionHeader?: never;\n      isSortable?: boolean;\n    }\n);\n\nexport type SideNavFooterItem = {\n  href?: string;\n  id: string;\n  label: string;\n};\n"],"mappings":""}