@okta/odyssey-contribution-tooling 1.48.0 → 1.49.0

package/dist/cjs/ui-shell/SideNav/SideNavToggleButton.cjs

@@ -0,0 +1,165 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SideNavToggleButton = exports.SIDE_NAV_TOGGLE_ICON_SIZE = exports.SIDE_NAV_TOGGLE_ICON_HALF_SIZE = void 0;
+var _Button2 = _interopRequireDefault(require("@mui/material/Button"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _react = require("react");
+var _i18n = require("../../i18n.generated/i18n.cjs");
+var _ChevronRight = require("../../icons.generated/ChevronRight.cjs");
+var _MuiPropsContext = require("../../MuiPropsContext.cjs");
+var _OdysseyDesignTokensContext = require("../../OdysseyDesignTokensContext.cjs");
+var _Tooltip = require("../../Tooltip.cjs");
+var _uiShellSharedConstants = require("../uiShellSharedConstants.cjs");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/*!
+ * 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.
+ */
+
+const SIDE_NAV_TOGGLE_ICON_SIZE = exports.SIDE_NAV_TOGGLE_ICON_SIZE = 24;
+const SIDE_NAV_TOGGLE_ICON_HALF_SIZE = exports.SIDE_NAV_TOGGLE_ICON_HALF_SIZE = SIDE_NAV_TOGGLE_ICON_SIZE / 2;
+const StyledToggleButton = (0, _styled.default)(_Button2.default, {
+  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: _uiShellSharedConstants.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 = (0, _styled.default)(_ChevronRight.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 = (0, _OdysseyDesignTokensContext.useOdysseyDesignTokens)();
+  const {
+    t
+  } = (0, _i18n.useTranslation)();
+  const buttonRef = (0, _react.useRef)(defaultLocalButton);
+  (0, _react.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 = (0, _react.useMemo)(() => isSideNavCollapsed ? t("sidenav.toggle.expand") : t("sidenav.toggle.collapse"), [isSideNavCollapsed, t]);
+  const renderButton = (0, _react.useCallback)(muiProps => {
+    return (0, _jsxRuntime.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: (0, _jsxRuntime.jsx)(StyledChevronRightIcon, {
+        isSideNavCollapsed: isSideNavCollapsed,
+        odysseyDesignTokens: odysseyDesignTokens
+      })
+    });
+  }, [ariaControls, clickAreaPadding, id, isSideNavCollapsed, odysseyDesignTokens, onClick, tabIndex, toggleLabel]);
+  return (0, _jsxRuntime.jsx)(_Tooltip.Tooltip, {
+    ariaType: "description",
+    placement: "right",
+    text: toggleLabel,
+    children: (0, _jsxRuntime.jsx)(_MuiPropsContext.MuiPropsContext.Consumer, {
+      children: renderButton
+    })
+  });
+};
+const MemoizedSideNavToggleButton = exports.SideNavToggleButton = (0, _react.memo)(SideNavToggleButton);
+MemoizedSideNavToggleButton.displayName = "SideNavToggleButton";
+//# sourceMappingURL=SideNavToggleButton.cjs.map

package/dist/cjs/ui-shell/SideNav/SideNavToggleButton.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SideNavToggleButton.cjs","names":["_styled","_interopRequireDefault","require","_react","_i18n","_ChevronRight","_MuiPropsContext","_OdysseyDesignTokensContext","_Tooltip","_uiShellSharedConstants","_jsxRuntime","e","__esModule","default","SIDE_NAV_TOGGLE_ICON_SIZE","exports","SIDE_NAV_TOGGLE_ICON_HALF_SIZE","StyledToggleButton","styled","_Button2","shouldForwardProp","prop","clickAreaPadding","odysseyDesignTokens","border","height","left","padding","position","width","zIndex","UI_SHELL_OVERLAY_Z_INDEX","backgroundColor","borderColor","boxShadow","color","PalettePrimaryText","outline","HueNeutralWhite","borderRadius","ShadowScale1","content","top","StyledChevronRightIcon","ChevronRightIcon","isSideNavCollapsed","fontSize","undefined","right","transform","transitionDuration","TransitionDurationMain","transitionProperty","transitionTimingFunction","defaultLocalButton","window","document","createElement","SideNavToggleButton","ariaControls","id","onClick","onHighlight","tabIndex","useOdysseyDesignTokens","t","useTranslation","buttonRef","useRef","useEffect","setHighlighted","setUnhighlighted","setFocusHighlighted","Boolean","current","matches","addEventListener","removeEventListener","toggleLabel","useMemo","renderButton","useCallback","muiProps","jsx","ref","element","variant","children","Tooltip","ariaType","placement","text","MuiPropsContext","Consumer","MemoizedSideNavToggleButton","memo","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/cjs/ui-shell/SideNav/SortableList/SortableItem.cjs

@@ -0,0 +1,186 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SortableItem = exports.DragHandle = void 0;
+var _sortable = require("@dnd-kit/sortable");
+var _utilities = require("@dnd-kit/utilities");
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _react = require("react");
+var _i18n = require("../../../i18n.generated/i18n.cjs");
+var _OdysseyDesignTokensContext = require("../../../OdysseyDesignTokensContext.cjs");
+var _UiShellProvider = require("../../../ui-shell/UiShellProvider.cjs");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/*!
+ * 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.
+ */
+
+const SortableItemContext = (0, _react.createContext)({
+  attributes: {},
+  listeners: undefined,
+  ref: (0, _react.createRef)()
+});
+const StyledSortableListItem = (0, _styled.default)("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 = (0, _styled.default)("ul")({
+  padding: 0,
+  listStyle: "none",
+  listStyleType: "none"
+});
+const StyledDragHandleButton = (0, _styled.default)("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}`
+    })
+  }
+}));
+const DragHandle = ({
+  isDragging
+}) => {
+  const {
+    attributes,
+    listeners,
+    ref
+  } = (0, _react.useContext)(SortableItemContext);
+  const odysseyDesignTokens = (0, _OdysseyDesignTokensContext.useOdysseyDesignTokens)();
+  const {
+    t
+  } = (0, _i18n.useTranslation)();
+  const uiShellContext = (0, _UiShellProvider.useUiShellContext)();
+  return (0, _jsxRuntime.jsx)(StyledDragHandleButton, {
+    ...attributes,
+    ...listeners,
+    "aria-label": t("navigation.drag.handle"),
+    focusRingColor: uiShellContext?.sideNavContrastColors?.focusRingColor,
+    isDragging: isDragging,
+    odysseyDesignTokens: odysseyDesignTokens,
+    ref: ref,
+    children: (0, _jsxRuntime.jsx)("svg", {
+      fill: "none",
+      height: "16",
+      viewBox: "0 0 16 16",
+      width: "16",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: (0, _jsxRuntime.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"
+      })
+    })
+  });
+};
+exports.DragHandle = DragHandle;
+const SortableItem = ({
+  id,
+  isDisabled,
+  isSelected,
+  isSortable = true,
+  children
+}) => {
+  const {
+    attributes,
+    isDragging,
+    listeners,
+    setNodeRef,
+    setActivatorNodeRef,
+    transform,
+    transition
+  } = (0, _sortable.useSortable)({
+    id
+  });
+  const context = (0, _react.useMemo)(() => ({
+    attributes,
+    listeners,
+    ref: setActivatorNodeRef
+  }), [attributes, listeners, setActivatorNodeRef]);
+  const style = {
+    opacity: isDragging ? 0.4 : undefined,
+    transform: _utilities.CSS.Translate.toString(transform),
+    transition
+  };
+  const uiShellContext = (0, _UiShellProvider.useUiShellContext)();
+  const odysseyDesignTokens = (0, _OdysseyDesignTokensContext.useOdysseyDesignTokens)();
+  return (0, _jsxRuntime.jsx)(SortableItemContext.Provider, {
+    value: context,
+    children: (0, _jsxRuntime.jsxs)(StyledSortableListItem, {
+      isSelected: isSelected,
+      odysseyDesignTokens: odysseyDesignTokens,
+      ref: setNodeRef,
+      sideNavContrastColors: uiShellContext?.sideNavContrastColors,
+      style: style,
+      children: [!isDisabled && isSortable && (0, _jsxRuntime.jsx)(DragHandle, {
+        isDragging: isDragging
+      }), (0, _jsxRuntime.jsx)(StyledUl, {
+        children: children
+      })]
+    })
+  });
+};
+exports.SortableItem = SortableItem;
+//# sourceMappingURL=SortableItem.cjs.map

package/dist/cjs/ui-shell/SideNav/SortableList/SortableItem.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SortableItem.cjs","names":["_sortable","require","_utilities","_styled","_interopRequireDefault","_react","_i18n","_OdysseyDesignTokensContext","_UiShellProvider","_jsxRuntime","e","__esModule","default","SortableItemContext","createContext","attributes","listeners","undefined","ref","createRef","StyledSortableListItem","styled","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","useContext","useOdysseyDesignTokens","t","useTranslation","uiShellContext","useUiShellContext","jsx","children","height","viewBox","width","xmlns","clipRule","d","fillRule","exports","SortableItem","id","isDisabled","isSortable","setNodeRef","setActivatorNodeRef","useSortable","context","useMemo","style","CSS","Translate","toString","Provider","value","jsxs"],"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":[]}

package/dist/cjs/ui-shell/SideNav/SortableList/SortableList.cjs

@@ -0,0 +1,126 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SortableList = void 0;
+var _core = require("@dnd-kit/core");
+var _sortable = require("@dnd-kit/sortable");
+var _react = require("react");
+var _i18n = require("../../../i18n.generated/i18n.cjs");
+var _SortableItem = require("./SortableItem.cjs");
+var _SortableOverlay = require("./SortableOverlay.cjs");
+var _jsxRuntime = require("react/jsx-runtime");
+/*!
+ * 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.
+ */
+
+const SortableList = ({
+  parentId,
+  items,
+  onChange,
+  renderItem
+}) => {
+  const [active, setActive] = (0, _react.useState)(null);
+  const activeItem = (0, _react.useMemo)(() => items.find(item => item.id === active?.id), [active, items]);
+  const sensors = (0, _core.useSensors)((0, _core.useSensor)(_core.PointerSensor), (0, _core.useSensor)(_core.KeyboardSensor, {
+    coordinateGetter: _sortable.sortableKeyboardCoordinates
+  }));
+  const {
+    t
+  } = (0, _i18n.useTranslation)();
+  const announcements = (0, _react.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 (0, _jsxRuntime.jsxs)(_core.DndContext, {
+    accessibility: {
+      announcements: announcements
+    },
+    onDragCancel: () => {
+      setActive(null);
+    },
+    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);
+        if (items[overIndex].isSortable !== false) {
+          onChange(parentId, active.id, activeIndex, overIndex);
+        }
+      }
+      setActive(null);
+    },
+    onDragStart: ({
+      active
+    }) => {
+      setActive(active);
+    },
+    sensors: sensors,
+    children: [(0, _jsxRuntime.jsx)(_sortable.SortableContext, {
+      items: items,
+      children: items.map(item => (0, _jsxRuntime.jsx)(_react.Fragment, {
+        children: renderItem(item)
+      }, item.id))
+    }), (0, _jsxRuntime.jsx)(_SortableOverlay.SortableOverlay, {
+      children: activeItem ? renderItem(activeItem) : null
+    })]
+  });
+};
+exports.SortableList = SortableList;
+SortableList.Item = _SortableItem.SortableItem;
+//# sourceMappingURL=SortableList.cjs.map

package/dist/cjs/ui-shell/SideNav/SortableList/SortableList.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SortableList.cjs","names":["_core","require","_sortable","_react","_i18n","_SortableItem","_SortableOverlay","_jsxRuntime","SortableList","parentId","items","onChange","renderItem","active","setActive","useState","activeItem","useMemo","find","item","id","sensors","useSensors","useSensor","PointerSensor","KeyboardSensor","coordinateGetter","sortableKeyboardCoordinates","t","useTranslation","announcements","onDragStart","activeId","onDragOver","over","overId","onDragEnd","onDragCancel","jsxs","DndContext","accessibility","activeIndex","findIndex","overIndex","isSortable","children","jsx","SortableContext","map","Fragment","SortableOverlay","exports","Item","SortableItem"],"sources":["../../../../../src/ui-shell/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 type { ReactNode } from \"react\";\n\nimport {\n  Active,\n  Announcements,\n  DndContext,\n  KeyboardSensor,\n  PointerSensor,\n  UniqueIdentifier,\n  useSensor,\n  useSensors,\n} from \"@dnd-kit/core\";\nimport {\n  SortableContext,\n  sortableKeyboardCoordinates,\n} from \"@dnd-kit/sortable\";\nimport { Fragment, useMemo, useState } from \"react\";\n\nimport { useTranslation } from \"../../../i18n.generated/i18n.js\";\nimport { SortableItem } from \"./SortableItem.js\";\nimport { SortableOverlay } from \"./SortableOverlay.js\";\n\nexport interface BaseItem {\n  id: UniqueIdentifier;\n  isDisabled: boolean | undefined;\n  isSelected: boolean | undefined;\n  isSortable: boolean | undefined;\n  navItem: ReactNode;\n}\n\ninterface ListProps<T extends BaseItem> {\n  items: T[];\n  onChange: (\n    parentId: string,\n    activeId: UniqueIdentifier,\n    activeIndex: number,\n    overIndex: number,\n  ) => void;\n  parentId: string;\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\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      onDragCancel={() => {\n        setActive(null);\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          // allow sorting by default except when isSortable is set to false explicitly\n          if (items[overIndex].isSortable !== false) {\n            onChange(parentId, active.id, activeIndex, overIndex);\n          }\n        }\n        setActive(null);\n      }}\n      onDragStart={({ active }) => {\n        setActive(active);\n      }}\n      sensors={sensors}\n    >\n      <SortableContext items={items}>\n        {items.map((item) => (\n          <Fragment key={item.id}>{renderItem(item)}</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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","ignoreList":[]}

package/dist/cjs/ui-shell/SideNav/SortableList/SortableOverlay.cjs

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SortableOverlay = SortableOverlay;
+var _core = require("@dnd-kit/core");
+var _jsxRuntime = require("react/jsx-runtime");
+/*!
+ * 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.
+ */
+
+const dropAnimationConfig = {
+  sideEffects: (0, _core.defaultDropAnimationSideEffects)({
+    styles: {
+      active: {
+        opacity: "0.4"
+      }
+    }
+  })
+};
+function SortableOverlay({
+  children
+}) {
+  return (0, _jsxRuntime.jsx)(_core.DragOverlay, {
+    dropAnimation: dropAnimationConfig,
+    children: children
+  });
+}
+//# sourceMappingURL=SortableOverlay.cjs.map

package/dist/cjs/ui-shell/SideNav/SortableList/SortableOverlay.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SortableOverlay.cjs","names":["_core","require","_jsxRuntime","dropAnimationConfig","sideEffects","defaultDropAnimationSideEffects","styles","active","opacity","SortableOverlay","children","jsx","DragOverlay","dropAnimation"],"sources":["../../../../../src/ui-shell/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\nimport {\n  defaultDropAnimationSideEffects,\n  DragOverlay,\n  DropAnimation,\n} from \"@dnd-kit/core\";\n\nconst dropAnimationConfig: DropAnimation = {\n  sideEffects: defaultDropAnimationSideEffects({\n    styles: {\n      active: {\n        opacity: \"0.4\",\n      },\n    },\n  }),\n};\n\nexport function SortableOverlay({ children }: PropsWithChildren<object>) {\n  return (\n    <DragOverlay dropAnimation={dropAnimationConfig}>{children}</DragOverlay>\n  );\n}\n"],"mappings":";;;;;;AAcA,IAAAA,KAAA,GAAAC,OAAA;AAIuB,IAAAC,WAAA,GAAAD,OAAA;AAlBvB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAUA,MAAME,mBAAkC,GAAG;EACzCC,WAAW,EAAE,IAAAC,qCAA+B,EAAC;IAC3CC,MAAM,EAAE;MACNC,MAAM,EAAE;QACNC,OAAO,EAAE;MACX;IACF;EACF,CAAC;AACH,CAAC;AAEM,SAASC,eAAeA,CAAC;EAAEC;AAAoC,CAAC,EAAE;EACvE,OACE,IAAAR,WAAA,CAAAS,GAAA,EAACX,KAAA,CAAAY,WAAW;IAACC,aAAa,EAAEV,mBAAoB;IAAAO,QAAA,EAAEA;EAAQ,CAAc,CAAC;AAE7E","ignoreList":[]}

package/dist/cjs/ui-shell/SideNav/types.cjs

@@ -0,0 +1,6 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+//# sourceMappingURL=types.cjs.map

package/dist/cjs/ui-shell/SideNav/types.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.cjs","names":[],"sources":["../../../../src/ui-shell/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, SyntheticEvent } from \"react\";\n\nimport { UniqueIdentifier } from \"@dnd-kit/core\";\n\nimport type { HtmlProps } from \"../../HtmlProps.js\";\nimport type { DesignTokens } from \"../../OdysseyDesignTokensContext.js\";\nimport type { statusSeverityValues } from \"../../Status.js\";\n\n/**\n * Type representing spacing values from the design tokens.\n * odysseyDesignTokens.Spacing0, odysseyDesignTokens.Spacing1, etc.\n */\nexport type OdysseySpacingValue = DesignTokens[keyof Pick<\n  DesignTokens,\n  | \"Spacing0\"\n  | \"Spacing1\"\n  | \"Spacing2\"\n  | \"Spacing3\"\n  | \"Spacing4\"\n  | \"Spacing5\"\n  | \"Spacing6\"\n  | \"Spacing7\"\n  | \"Spacing8\"\n  | \"Spacing9\"\n>];\n\ntype LogoWithLink = {\n  ariaLabel: string;\n  href: string;\n};\ntype LogoWithNoLink = {\n  ariaLabel?: never;\n  href?: never;\n};\n\nexport type SideNavLogoProps = {\n  isSameBackgroundAsMain?: boolean;\n  /**\n   * Event fired when the logo is clicked\n   */\n  onClick?: (event: SyntheticEvent) => void;\n} & (LogoWithLink | LogoWithNoLink) &\n  (\n    | {\n        imageAltText?: never;\n        imageUrl?: never;\n        /**\n         * a component to render as the logo\n         */\n        logoComponent: ReactElement;\n      }\n    | {\n        /**\n         * alt text for the img logo\n         */\n        imageAltText: string;\n        /**\n         * The src url to render in an `img` tag\n         */\n        imageUrl: string;\n        logoComponent?: never;\n      }\n    | {\n        /**\n         * alt text for the img logo\n         */\n        imageAltText?: never;\n        /**\n         * The src url to render in an `img` tag\n         */\n        imageUrl?: 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   *  If we want the collapse state to be based on session storage, then this needs to be `true`.\n   */\n  hasSessionStorageState?: boolean;\n  /**\n   *  Determines whether the side nav is collapsed by default. When `true`, side nav also closes once and item is clicked.\n   */\n  isCollapsed?: boolean;\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   *  If the side nav is up too much screen real estate. For instance, if you're in a narrower view, and it displays next to the content.\n   *\n   * When `true`, side nav will close itself after nav items are clicked.\n   */\n  isObtrusive?: boolean;\n  /**\n   * Optional padding to apply to the start of the leaves (items which are not expanded).\n   * Should be one of the Odyssey design token spacing values (e.g., odysseyDesignTokens.Spacing1, odysseyDesignTokens.Spacing2, etc.)\n   */\n  leavesPaddingStart?: OdysseySpacingValue;\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?: (\n    reorderedItems: SideNavItem[],\n    parentId: string,\n    activeId: UniqueIdentifier,\n    activeIndex: number,\n    overIndex: number,\n  ) => 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 after the nav item text. Only use this with images that don't have React context. Even the official Odyssey Icons use MUI which references the MUI theme in context and will error when rendered in Unified UI Shell.\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  /**\n   * Whether the item is sortable within a sortable list\n   */\n  isSortable?: boolean;\n  label: string;\n  /**\n   * Event fired when the nav item is changed (for instance, capturing clicks on Accordion)\n   */\n  onChange?: (event: SyntheticEvent) => void;\n  /**\n   * Event fired when the nav item is clicked\n   */\n  onClick?: (event: SyntheticEvent) => void;\n  /**\n   * The status element to display after the label\n   */\n  severity?: (typeof statusSeverityValues)[number];\n  /**\n   * The icon element to display before the nav item text. Only use this with images that don't have React context. Even the official Odyssey Icons use MUI which references the MUI theme in context and will error when rendered in Unified UI Shell.\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      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      nestedNavItems?: 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      isDefaultExpanded?: never;\n      isExpanded?: never;\n      isSectionHeader?: never;\n      nestedNavItems?: never;\n    }\n  | {\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      /**\n       * An array of side nav items to be displayed as nestedNavItems within Accordion\n       */\n      nestedNavItems: Array<SideNavItem>;\n    }\n  | {\n      href: string;\n      isDefaultExpanded?: never;\n      isExpanded?: never;\n      isSectionHeader?: never;\n      /**\n       * An array of side nav items to be displayed as nestedNavItems within Accordion\n       */\n      nestedNavItems: Array<SideNavItem>;\n    }\n) &\n  Pick<HtmlProps, \"translate\">;\n\nexport type SideNavFooterItem = {\n  href?: string;\n  id: string;\n  label: string;\n};\n"],"mappings":"","ignoreList":[]}