@okta/odyssey-react-mui 1.26.0 → 1.27.0

package/src/labs/SideNav/SideNavItemContent.tsx

@@ -44,17 +44,12 @@ export const StyledSideNavListItem = styled("li", {
   alignItems: "center",
   backgroundColor: "unset",
   borderRadius: odysseyDesignTokens.BorderRadiusMain,
-  lineHeight: 1.5,
   transition: `backgroundColor ${odysseyDesignTokens.TransitionDurationMain}, color ${odysseyDesignTokens.TransitionDurationMain}`,
 
   ...(isSelected && {
     color: `${odysseyDesignTokens.TypographyColorAction} !important`,
     backgroundColor: odysseyDesignTokens.HueBlue50,
   }),
-
-  "&:last-child": {
-    marginBottom: odysseyDesignTokens.Spacing2,
-  },
 }));
 
 const scrollToNode = (node: HTMLElement | null) => {
@@ -71,68 +66,76 @@ type ScrollIntoViewHandle = {
   scrollIntoView: () => void;
 };
 
-const GetNavItemContentStyles = ({
+export const getBaseNavItemContentStyles = ({
   odysseyDesignTokens,
-  contextValue,
   isDisabled,
   isSelected,
 }: {
   odysseyDesignTokens: DesignTokens;
-  contextValue: SideNavItemContentContextValue;
   isDisabled?: boolean;
   isSelected?: boolean;
-}) => {
-  return {
-    display: "flex",
-    alignItems: "center",
-    width: "100%",
-    textDecoration: "none",
-    color: `${odysseyDesignTokens.TypographyColorHeading} !important`,
-    minHeight: odysseyDesignTokens.Spacing7,
-    paddingBlock: odysseyDesignTokens.Spacing4,
-    paddingInline: `calc(${odysseyDesignTokens.Spacing4} * ${contextValue.depth})`,
-    borderRadius: odysseyDesignTokens.BorderRadiusMain,
-    transition: `backgroundColor ${odysseyDesignTokens.TransitionDurationMain}, color ${odysseyDesignTokens.TransitionDurationMain}`,
+}) => ({
+  display: "flex",
+  alignItems: "center",
+  width: "100%",
+  textDecoration: "none",
+  color: `${odysseyDesignTokens.TypographyColorHeading} !important`,
+  minHeight: "unset",
+  paddingBlock: odysseyDesignTokens.Spacing3,
+  paddingInlineEnd: odysseyDesignTokens.Spacing4,
+  borderRadius: odysseyDesignTokens.BorderRadiusMain,
+  transition: `backgroundColor ${odysseyDesignTokens.TransitionDurationMain}, color ${odysseyDesignTokens.TransitionDurationMain}`,
+  cursor: "pointer",
 
-    "&:hover": {
+  // `[data-sortable-container='true']:has(button:hover) &` - when the sortable item's drag handle is hovered we want to trigger the same hover behavior as if you were hovering the actual item
+  "&:hover, [data-sortable-container='true']:has(button:hover, button:focus, button:focus-visible) &":
+    {
       textDecoration: "none",
-      cursor: "pointer",
-      backgroundColor: !isDisabled
-        ? odysseyDesignTokens.HueNeutral50
-        : "inherit",
+      backgroundColor: odysseyDesignTokens.HueNeutral50,
 
-      ...(isDisabled && {
-        color: "inherit",
-        cursor: "default",
+      ...(isSelected && {
+        backgroundColor: odysseyDesignTokens.HueBlue50,
+        color: odysseyDesignTokens.TypographyColorAction,
       }),
 
-      ...(isSelected && {
-        "&:hover": {
-          backgroundColor: odysseyDesignTokens.HueBlue50,
-        },
+      ...(isDisabled && {
+        backgroundColor: "unset",
       }),
     },
 
-    ...(isSelected && {
-      color: `${odysseyDesignTokens.TypographyColorAction} !important`,
-      fontWeight: odysseyDesignTokens.TypographyWeightBodyBold,
-    }),
+  ...(isSelected && {
+    color: `${odysseyDesignTokens.TypographyColorAction}`,
+    fontWeight: odysseyDesignTokens.TypographyWeightBodyBold,
+  }),
 
-    ...(isDisabled && {
-      color: `${odysseyDesignTokens.TypographyColorDisabled} !important`,
-    }),
+  ...(isDisabled && {
+    cursor: "default",
+    color: `${odysseyDesignTokens.TypographyColorDisabled} !important`,
+  }),
 
-    ...(contextValue.isCompact && {
-      paddingBlock: odysseyDesignTokens.Spacing1,
-      minHeight: odysseyDesignTokens.Spacing6,
-    }),
+  "&:focus-visible, &:focus": {
+    outline: "none",
+    boxShadow: `inset 0 0 0 2px ${odysseyDesignTokens.PalettePrimaryMain}`,
+  },
+});
 
-    "&:focus-visible": {
-      outline: "none",
-      boxShadow: `inset 0 0 0 3px ${odysseyDesignTokens.PalettePrimaryMain}`,
-    },
-  };
-};
+export const getNavItemContentStyles = ({
+  odysseyDesignTokens,
+  contextValue,
+}: {
+  odysseyDesignTokens: DesignTokens;
+  contextValue: SideNavItemContentContextValue;
+}) => ({
+  paddingInlineStart: `calc(${odysseyDesignTokens.Spacing4} * ${contextValue.depth} + ${odysseyDesignTokens.Spacing6})`,
+
+  ...(contextValue.depth === 1 && {
+    paddingInlineStart: odysseyDesignTokens.Spacing4,
+  }),
+
+  ...(contextValue.isCompact && {
+    paddingBlock: odysseyDesignTokens.Spacing1,
+  }),
+});
 
 const NavItemContentContainer = styled("div", {
   shouldForwardProp: (prop) =>
@@ -140,15 +143,47 @@ const NavItemContentContainer = styled("div", {
     prop != "contextValue" &&
     prop !== "isDisabled" &&
     prop !== "isSelected",
-})(GetNavItemContentStyles);
+})<{
+  contextValue: SideNavItemContentContextValue;
+  odysseyDesignTokens: DesignTokens;
+  isSelected?: boolean;
+  isDisabled?: boolean;
+}>(({ contextValue, odysseyDesignTokens, isDisabled, isSelected }) => ({
+  ...getBaseNavItemContentStyles({
+    odysseyDesignTokens,
+    isDisabled,
+    isSelected,
+  }),
 
-const NavItemLinkContainer = styled(NavItemLink, {
+  ...getNavItemContentStyles({
+    odysseyDesignTokens,
+    contextValue,
+  }),
+}));
+
+const StyledNavItemLink = styled(NavItemLink, {
   shouldForwardProp: (prop) =>
     prop !== "odysseyDesignTokens" &&
     prop != "contextValue" &&
     prop !== "isDisabled" &&
     prop !== "isSelected",
-})(GetNavItemContentStyles);
+})<{
+  contextValue: SideNavItemContentContextValue;
+  odysseyDesignTokens: DesignTokens;
+  isSelected?: boolean;
+  isDisabled?: boolean;
+}>(({ contextValue, odysseyDesignTokens, isDisabled, isSelected }) => ({
+  ...getBaseNavItemContentStyles({
+    odysseyDesignTokens,
+    isDisabled,
+    isSelected,
+  }),
+
+  ...getNavItemContentStyles({
+    odysseyDesignTokens,
+    contextValue,
+  }),
+}));
 
 const SideNavItemContent = ({
   count,
@@ -161,9 +196,10 @@ const SideNavItemContent = ({
   statusLabel,
   endIcon,
   onClick,
-  isSelected,
   isDisabled,
+  isSelected,
   scrollRef,
+  onItemSelected,
 }: Pick<
   SideNavItem,
   | "count"
@@ -176,13 +212,14 @@ const SideNavItemContent = ({
   | "statusLabel"
   | "endIcon"
   | "onClick"
-  | "isSelected"
   | "isDisabled"
+  | "isSelected"
 > & {
   /**
    * The ref used to scroll to this item
    */
   scrollRef?: React.RefObject<ScrollIntoViewHandle>;
+  onItemSelected?(selectedItemId: string): void;
 }) => {
   const sidenavItemContentContext = useSideNavItemContent();
   const contextValue = useMemo(
@@ -204,14 +241,25 @@ const SideNavItemContent = ({
     [],
   );
 
+  const itemClickHandler = useCallback(
+    (id: string) => {
+      return () => {
+        onItemSelected?.(id);
+        onClick?.();
+      };
+    },
+    [onClick, onItemSelected],
+  );
+
   const sideNavItemContentKeyHandler = useCallback(
-    (event: KeyboardEvent<HTMLDivElement>) => {
+    (id: string, event: KeyboardEvent<HTMLDivElement>) => {
       if (event?.key === "Enter") {
         event.preventDefault();
+        onItemSelected?.(id);
         onClick?.();
       }
     },
-    [onClick],
+    [onClick, onItemSelected],
   );
 
   return (
@@ -249,8 +297,12 @@ const SideNavItemContent = ({
             contextValue={contextValue}
             isDisabled={isDisabled}
             tabIndex={0}
-            onClick={onClick}
-            onKeyDown={sideNavItemContentKeyHandler}
+            role="button"
+            onClick={itemClickHandler(id)}
+            onKeyDown={(event: KeyboardEvent<HTMLDivElement>) =>
+              sideNavItemContentKeyHandler(id, event)
+            }
+            isSelected={isSelected}
           >
             <SideNavItemLinkContent
               count={count}
@@ -262,14 +314,14 @@ const SideNavItemContent = ({
             />
           </NavItemContentContainer>
         ) : (
-          <NavItemLinkContainer
+          <StyledNavItemLink
             odysseyDesignTokens={odysseyDesignTokens}
             contextValue={contextValue}
             isDisabled={isDisabled}
             isSelected={isSelected}
             href={href}
             target={target}
-            onClick={onClick}
+            onClick={itemClickHandler(id)}
           >
             <SideNavItemLinkContent
               count={count}
@@ -284,12 +336,13 @@ const SideNavItemContent = ({
                 <ExternalLinkIcon />
               </span>
             )}
-          </NavItemLinkContainer>
+          </StyledNavItemLink>
         )
       }
     </StyledSideNavListItem>
   );
 };
+
 const MemoizedSideNavItemContent = memo(SideNavItemContent);
 MemoizedSideNavItemContent.displayName = "SideNavItemContent";
 

package/src/labs/SideNav/SideNavItemContentContext.tsx

@@ -14,12 +14,14 @@ import { createContext, useContext } from "react";
 
 export type SideNavItemContentContextValue = {
   isCompact?: boolean;
+  isSortable?: boolean;
   depth: number;
 };
 
 export const SideNavItemContentContext =
   createContext<SideNavItemContentContextValue>({
     isCompact: false,
+    isSortable: false,
     depth: 1,
   });
 

package/src/labs/SideNav/SideNavItemLinkContent.tsx

@@ -32,8 +32,8 @@ const SideNavItemLabelContainer = styled("div", {
   display: "flex",
   flexWrap: "wrap",
   alignItems: "center",
-  fontSize: odysseyDesignTokens.TypographyScale0,
-  marginInlineStart: isIconVisible ? odysseyDesignTokens.Spacing2 : 0,
+  fontSize: odysseyDesignTokens.TypographySizeBody,
+  marginInlineStart: isIconVisible ? odysseyDesignTokens.Spacing3 : 0,
 }));
 
 const SideNavItemLinkContent = ({

package/src/labs/SideNav/SideNavToggleButton.tsx

@@ -58,8 +58,7 @@ const StyledToggleButton = styled(MuiButton, {
       backgroundColor: "transparent",
 
       "#lineOne": {
-        animation:
-          "lineOne-animate-to-collapse 250ms cubic-bezier(0, 0, 0.2, 1)",
+        animation: `lineOne-animate-to-collapse ${odysseyDesignTokens.TransitionDurationMain} cubic-bezier(0, 0, 0.2, 1)`,
         animationFillMode: "forwards",
         "@keyframes lineOne-animate-to-collapse": {
           "0%": {
@@ -75,8 +74,7 @@ const StyledToggleButton = styled(MuiButton, {
       },
 
       "#lineTwo": {
-        animation:
-          "lineTwo-animate-to-collapse 250ms cubic-bezier(0, 0, 0.2, 1)",
+        animation: `lineTwo-animate-to-collapse ${odysseyDesignTokens.TransitionDurationMain} cubic-bezier(0, 0, 0.2, 1)`,
         animationFillMode: "forwards",
         "@keyframes lineTwo-animate-to-collapse": {
           "0%": {
@@ -93,8 +91,7 @@ const StyledToggleButton = styled(MuiButton, {
 
       ...(isSideNavCollapsed && {
         "#lineOne": {
-          animation:
-            "lineOne-animate-to-expand 250ms cubic-bezier(0, 0, 0.2, 1)",
+          animation: `lineOne-animate-to-expand ${odysseyDesignTokens.TransitionDurationMain} cubic-bezier(0, 0, 0.2, 1)`,
           animationFillMode: "forwards",
           "@keyframes lineOne-animate-to-expand": {
             "0%": {
@@ -111,8 +108,7 @@ const StyledToggleButton = styled(MuiButton, {
         },
 
         "#lineTwo": {
-          animation:
-            "lineTwo-animate-to-expand 250ms cubic-bezier(0, 0, 0.2, 1)",
+          animation: `lineTwo-animate-to-expand ${odysseyDesignTokens.TransitionDurationMain} cubic-bezier(0, 0, 0.2, 1)`,
           animationFillMode: "forwards",
           "@keyframes lineTwo-animate-to-expand": {
             "0%": {
@@ -135,7 +131,7 @@ const StyledToggleButton = styled(MuiButton, {
       left: "50%",
       width: "2px",
       height: odysseyDesignTokens.Spacing4,
-      backgroundColor: odysseyDesignTokens.HueNeutral500,
+      backgroundColor: odysseyDesignTokens.HueNeutral600,
       transform: "translate3d(-50%, -50%, 0)",
       transition: `transform ${odysseyDesignTokens.TransitionDurationMain}`,
     },

package/src/labs/SideNav/SortableList/SortableItem.tsx

@@ -0,0 +1,202 @@
+/*!
+ * 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 type { CSSProperties, PropsWithChildren } from "react";
+import type {
+  DraggableSyntheticListeners,
+  UniqueIdentifier,
+} from "@dnd-kit/core";
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { useSortable } from "@dnd-kit/sortable";
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { CSS } from "@dnd-kit/utilities";
+import styled from "@emotion/styled";
+import {
+  DesignTokens,
+  useOdysseyDesignTokens,
+} from "../../../OdysseyDesignTokensContext";
+import { useTranslation } from "react-i18next";
+
+type ItemProps = {
+  id: UniqueIdentifier;
+  isDisabled?: boolean;
+  isSelected?: boolean;
+};
+
+interface Context {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  attributes: Record<string, any>;
+  listeners: DraggableSyntheticListeners;
+  ref(node: HTMLElement | null): void;
+}
+
+const SortableItemContext = createContext<Context>({
+  attributes: {},
+  listeners: undefined,
+  ref() {},
+});
+
+const StyledSortableListItem = styled("li", {
+  shouldForwardProp: (prop) =>
+    prop !== "odysseyDesignTokens" && prop !== "isSelected",
+})<{
+  odysseyDesignTokens: DesignTokens;
+  isSelected?: boolean;
+}>(({ 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: DesignTokens;
+  isDragging?: boolean;
+}>(({ odysseyDesignTokens, isDragging }) => ({
+  position: "absolute",
+  opacity: 0,
+  // paddingInlineStart: odysseyDesignTokens.Spacing4,
+  padding: odysseyDesignTokens.Spacing2,
+  // paddingBlock: 0,
+  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}`,
+  },
+}));
+
+type DragHandleProps = {
+  isDisabled?: boolean;
+  isDragging?: boolean;
+};
+
+export const DragHandle = ({ isDragging }: DragHandleProps) => {
+  const { attributes, listeners, ref } = useContext(SortableItemContext);
+  const odysseyDesignTokens: DesignTokens = useOdysseyDesignTokens();
+  const { t } = useTranslation();
+
+  return (
+    <StyledDragHandleButton
+      {...attributes}
+      {...listeners}
+      odysseyDesignTokens={odysseyDesignTokens}
+      isDragging={isDragging}
+      ref={ref}
+      aria-label={t("navigation.drag.handle")}
+    >
+      <svg
+        width="16"
+        height="16"
+        viewBox="0 0 16 16"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <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"
+        />
+      </svg>
+    </StyledDragHandleButton>
+  );
+};
+
+export const SortableItem = ({
+  id,
+  isDisabled,
+  isSelected,
+  children,
+}: PropsWithChildren<ItemProps>) => {
+  const {
+    attributes,
+    isDragging,
+    listeners,
+    setNodeRef,
+    setActivatorNodeRef,
+    transform,
+    transition,
+  } = useSortable({ id });
+  const context: Context = useMemo(
+    () => ({
+      attributes,
+      listeners,
+      ref: setActivatorNodeRef,
+    }),
+    [attributes, listeners, setActivatorNodeRef],
+  );
+  const style: CSSProperties = {
+    opacity: isDragging ? 0.4 : undefined,
+    transform: CSS.Translate.toString(transform),
+    transition,
+  };
+
+  const odysseyDesignTokens: DesignTokens = useOdysseyDesignTokens();
+  return (
+    <SortableItemContext.Provider value={context}>
+      <StyledSortableListItem
+        data-sortable-container="true"
+        ref={setNodeRef}
+        style={style}
+        odysseyDesignTokens={odysseyDesignTokens}
+        isSelected={isSelected}
+      >
+        {!isDisabled && <DragHandle isDragging={isDragging} />}
+        <StyledUl>{children}</StyledUl>
+      </StyledSortableListItem>
+    </SortableItemContext.Provider>
+  );
+};

package/src/labs/SideNav/SortableList/SortableList.tsx

@@ -0,0 +1,122 @@
+/*!
+ * 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 type { ReactNode } from "react";
+// eslint-disable-next-line import/no-extraneous-dependencies
+import {
+  DndContext,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+} from "@dnd-kit/core";
+import type { Active, Announcements, UniqueIdentifier } from "@dnd-kit/core";
+// eslint-disable-next-line import/no-extraneous-dependencies
+import {
+  SortableContext,
+  sortableKeyboardCoordinates,
+} from "@dnd-kit/sortable";
+
+import { SortableItem } from "./SortableItem";
+import { SortableOverlay } from "./SortableOverlay";
+import { useTranslation } from "react-i18next";
+
+export interface BaseItem {
+  id: UniqueIdentifier;
+  isDisabled: boolean | undefined;
+  isSelected: boolean | undefined;
+  navItem: ReactNode;
+}
+
+interface ListProps<T extends BaseItem> {
+  parentId: string;
+  items: T[];
+  onChange(parentId: string, activeIndex: number, overIndex: number): void;
+  renderItem(item: T): ReactNode;
+}
+
+export const SortableList = <T extends BaseItem>({
+  parentId,
+  items,
+  onChange,
+  renderItem,
+}: ListProps<T>) => {
+  const [active, setActive] = useState<Active | null>(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: 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 (
+    <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);
+      }}
+    >
+      <SortableContext items={items}>
+        {items.map((item) => (
+          <React.Fragment key={item.id}>{renderItem(item)}</React.Fragment>
+        ))}
+      </SortableContext>
+      <SortableOverlay>
+        {activeItem ? renderItem(activeItem) : null}
+      </SortableOverlay>
+    </DndContext>
+  );
+};
+
+SortableList.Item = SortableItem;