@okta/odyssey-react-mui 1.26.0 → 1.27.1

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

@@ -0,0 +1,34 @@
+/*!
+ * 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 type { PropsWithChildren } from "react";
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { DragOverlay, defaultDropAnimationSideEffects } from "@dnd-kit/core";
+import type { DropAnimation } from "@dnd-kit/core";
+
+const dropAnimationConfig: DropAnimation = {
+  sideEffects: defaultDropAnimationSideEffects({
+    styles: {
+      active: {
+        opacity: "0.4",
+      },
+    },
+  }),
+};
+
+interface Props {}
+
+export function SortableOverlay({ children }: PropsWithChildren<Props>) {
+  return (
+    <DragOverlay dropAnimation={dropAnimationConfig}>{children}</DragOverlay>
+  );
+}

package/src/labs/SideNav/types.ts

@@ -78,6 +78,10 @@ export type SideNavProps = {
    *  Triggers when the side nav is expanded
    */
   onExpand?(): void;
+  /**
+   *  Triggers when the item is reordered
+   */
+  onSort?(reorderedItems: SideNavItem[]): void;
   /**
    * Nav items in the side nav
    */
@@ -114,7 +118,7 @@ export type SideNavItem = {
   id: string;
   /**
    * Whether the item is disabled. When set to true the nav item is set to Disabled color,
-   * the link/item is not clickable, and item with children is not expandable.
+   * the link/item is not clickable, and item with nestedNavItems is not expandable.
    */
   isDisabled?: boolean;
   /**
@@ -144,7 +148,7 @@ export type SideNavItem = {
   target?: string;
 } & (
   | {
-      children?: never;
+      nestedNavItems?: never;
       href?: never;
       isDefaultExpanded?: never;
       isExpanded?: never;
@@ -152,9 +156,10 @@ export type SideNavItem = {
        * Determines if the side nav item is a section header
        */
       isSectionHeader: true;
+      isSortable?: never;
     }
   | {
-      children?: never;
+      nestedNavItems?: never;
       /**
        * link added to the nav item. if it is undefined, static text will be displayed.
        * fires onClick event when it is passed
@@ -163,16 +168,17 @@ export type SideNavItem = {
       isDefaultExpanded?: never;
       isExpanded?: never;
       isSectionHeader?: never;
+      isSortable?: never;
     }
   | {
       /**
-       * An array of side nav items to be displayed as children within Accordion
+       * An array of side nav items to be displayed as nestedNavItems within Accordion
        */
-      children?: Array<Omit<SideNavItem, "startIcon" | "endIcon">>;
+      nestedNavItems?: Array<Omit<SideNavItem, "startIcon" | "nestedNavItems">>;
       endIcon?: never;
       href?: never;
       /**
-       * Whether the accordion (nav item with children) is expanded by default
+       * Whether the accordion (nav item with nestedNavItems) is expanded by default
        */
       isDefaultExpanded?: boolean;
       /**
@@ -180,7 +186,11 @@ export type SideNavItem = {
        * Setting this prop enables control over the accordion.
        */
       isExpanded?: boolean;
+      /**
+       * If true, enables sorting for the accordion items
+       */
       isSectionHeader?: never;
+      isSortable?: boolean;
     }
 );
 

package/src/labs/TopNav/TopNav.tsx

@@ -47,7 +47,7 @@ const StyledTopNavContainer = styled("div", {
   maxHeight: TOP_NAV_HEIGHT,
   minHeight: TOP_NAV_HEIGHT,
   paddingBlock: odysseyDesignTokens.Spacing2,
-  paddingInline: odysseyDesignTokens.Spacing6,
+  paddingInline: odysseyDesignTokens.Spacing8,
   transition: `box-shadow ${odysseyDesignTokens.TransitionDurationMain} ${odysseyDesignTokens.TransitionTimingMain}`,
   zIndex: 1,
 }));

package/src/labs/UiShell/UiShellContent.tsx

@@ -31,7 +31,7 @@ const StyledAppContainer = styled("div", {
   overflowX: "hidden",
   overflowY: "auto",
   paddingBlock: odysseyDesignTokens.Spacing5,
-  paddingInline: odysseyDesignTokens.Spacing6,
+  paddingInline: odysseyDesignTokens.Spacing8,
 }));
 
 const StyledBannersContainer = styled("div")(() => ({

package/src/properties/odyssey-react-mui.properties

@@ -1,5 +1,12 @@
 navigation.label = Main navigation
 navigation.footer = Navigation secondary links
+navigation.drag.handle = Drag handle
+sortable.list.drag.start = Picked up draggable item {{activeId}}
+sortable.list.drag.moved.over = Draggable item {{activeId}} was moved over droppable area {{overId}}
+sortable.list.drag.nolonger.over = Draggable item {{activeId}} is no longer over a droppable area
+sortable.list.drag.end.dropped.over = Draggable item {{activeId}} was dropped over droppable area {{overId}}
+sortable.list.drag.end.dropped = Draggable item {{activeId}} was dropped
+sortable.list.drag.cancel = Dragging was cancelled. Draggable item {{activeId}} was dropped
 
 breadcrumbs.home.text = Home
 breadcrumbs.label.text = Breadcrumbs

package/src/properties/ts/odyssey-react-mui.ts

@@ -1 +1 @@
-export const translation = {"navigation.label":"Main navigation","navigation.footer":"Navigation secondary links","breadcrumbs.home.text":"Home","breadcrumbs.label.text":"Breadcrumbs","close.text":"Close","clear.text":"Clear","open.text":"Open","picker.calendar.navigation.nextmonth":"Next month","picker.calendar.navigation.previousmonth":"Previous month","picker.date.toolbar.title":"Selected date","picker.daterange.toolbar.title":"Select date range","picker.datetime.toolbar.title":"Select date & time","picker.error.invalid":"Correct the date format or select the date from the calendar.","picker.error.mindate":"Date entered is earlier than allowed dates. Select a date from the range available in the calendar.","picker.error.maxdate":"Date entered is later than the allowed dates. Select a date from the range available in the calendar.","picker.field.placeholder.day":"DD","picker.field.placeholder.hours":"hh","picker.field.placeholder.meridiem":"aa","picker.field.placeholder.minutes":"mm","picker.field.placeholder.month":"MM","picker.field.placeholder.seconds":"ss","picker.field.placeholder.year":"YYYY","picker.labels.action.apply":"Apply","picker.labels.action.cancel":"Cancel","picker.labels.action.today":"Today","picker.labels.clock.empty":"No time selected","picker.labels.clock.hours":"hours","picker.labels.clock.minutes":"minutes","picker.labels.clock.seconds":"seconds","picker.labels.clock.selected":"Selected time is","picker.labels.date.choose":"Choose date","picker.labels.date.selected":"Selected date is","picker.labels.empty":"Empty","picker.labels.field.clear":"Clear value","picker.labels.range.end":"End","picker.labels.range.enddate":"End date","picker.labels.range.endtime":"End time","picker.labels.range.start":"Start","picker.labels.range.startdate":"Start date","picker.labels.range.starttime":"Start time","picker.labels.select":"Select","picker.labels.table.date":"pick date","picker.labels.table.time":"pick time","picker.labels.time.choose":"Choose time","picker.labels.time.selected":"selected time is","picker.time.toolbar.title":"Select time","picker.view.name.day":"Day","picker.view.name.hours":"Hours","picker.view.name.meridiem":"Meridiem","picker.view.name.minutes":"Minutes","picker.view.name.month":"Month","picker.view.name.seconds":"Seconds","picker.view.name.weekday":"Week day","picker.view.name.year":"Year","picker.view.navigation.open.nextview":"Open next view","picker.view.navigation.open.previousview":"Open previous view","picker.view.navigation.switch.calendarview":"year view is open, switch to calendar view","picker.view.navigation.switch.yearview":"calendar view is open, switch to year view","fielderror.screenreader.text":"Error","fieldlabel.optional.text":"Optional","fieldlabel.required.text":"Required","filters.clear.label":"Clear filters","filters.filter.any":"Any","filters.filter.clear":"Clear filter","filters.filters.arialabel":"Filters","filters.menuitem.any":"Any {{label}}","filters.menuitem.selected":"{{selected}} selected","filters.search.label":"Search","fileupload.button.text":"Add files","fileupload.prompt.text":"Drag and drop files here or click to add files","fileupload.removefile.text":"Remove file","passwordfield.icon.label.hide":"Hide password","passwordfield.icon.label.show":"Show password","severity.error":"error","severity.info":"info","severity.success":"success","severity.warning":"warning","sidenav.toggle.expand":"Open navigation","sidenav.toggle.collapse":"Close navigation","switch.active":"Active","switch.inactive":"Inactive","table.columnvisibility.arialabel":"Show/hide columns","table.density.arialabel":"Table density","table.draghandle.arialabel":"Drag row to reorder. Or, press space or enter to start and stop reordering and esc to cancel.","table.draghandle.tooltip":"Drag row or press space/enter key to start and stop reordering","table.actions":"Actions","table.error":"Error loading data.","table.fetchedrows.text":"Fetched {{totalRows}} row","table.fetchedrows.text_plural":"Fetched {{totalRows}} total rows","table.moreactions.arialabel":"More actions","table.noresults.heading":"There are no results.","table.noresults.text":"Try a different query.","table.reorder.backward":"Send backward","table.reorder.forward":"Bring forward","table.reorder.toback":"Send to back","table.reorder.tofront":"Bring to front","table.rows.text":"{{totalRows}} row","table.rows.text_plural":"{{totalRows}} rows","pagination.loadmore":"Show more","pagination.next":"Next page","pagination.previous":"Previous page","pagination.page":"Page","pagination.rowsperpage":"Rows per page","pagination.rowswithtotal":"{{firstRow}}-{{lastRow}} of {{totalRows}} rows","pagination.rowswithouttotal":"{{firstRow}}-{{lastRow}} rows","table.actions.selectall":"Select all","table.actions.selectnone":"Select none","table.actions.selectsome":"{{selectedRowCount}} selected","table.rowexpansion.expand":"Expand","table.rowexpansion.expandall":"Expand all","table.rowexpansion.collapse":"Collapse","table.rowexpansion.collapseall":"Collapse all","dataview.layout.table":"Table","dataview.layout.grid":"Grid","dataview.layout.list":"List","topnav.helpicon":"help page","topnav.settingsicon":"settings page"};
+export const translation = {"navigation.label":"Main navigation","navigation.footer":"Navigation secondary links","navigation.drag.handle":"Drag handle","sortable.list.drag.start":"Picked up draggable item {{activeId}}","sortable.list.drag.moved.over":"Draggable item {{activeId}} was moved over droppable area {{overId}}","sortable.list.drag.nolonger.over":"Draggable item {{activeId}} is no longer over a droppable area","sortable.list.drag.end.dropped.over":"Draggable item {{activeId}} was dropped over droppable area {{overId}}","sortable.list.drag.end.dropped":"Draggable item {{activeId}} was dropped","sortable.list.drag.cancel":"Dragging was cancelled. Draggable item {{activeId}} was dropped","breadcrumbs.home.text":"Home","breadcrumbs.label.text":"Breadcrumbs","close.text":"Close","clear.text":"Clear","open.text":"Open","picker.calendar.navigation.nextmonth":"Next month","picker.calendar.navigation.previousmonth":"Previous month","picker.date.toolbar.title":"Selected date","picker.daterange.toolbar.title":"Select date range","picker.datetime.toolbar.title":"Select date & time","picker.error.invalid":"Correct the date format or select the date from the calendar.","picker.error.mindate":"Date entered is earlier than allowed dates. Select a date from the range available in the calendar.","picker.error.maxdate":"Date entered is later than the allowed dates. Select a date from the range available in the calendar.","picker.field.placeholder.day":"DD","picker.field.placeholder.hours":"hh","picker.field.placeholder.meridiem":"aa","picker.field.placeholder.minutes":"mm","picker.field.placeholder.month":"MM","picker.field.placeholder.seconds":"ss","picker.field.placeholder.year":"YYYY","picker.labels.action.apply":"Apply","picker.labels.action.cancel":"Cancel","picker.labels.action.today":"Today","picker.labels.clock.empty":"No time selected","picker.labels.clock.hours":"hours","picker.labels.clock.minutes":"minutes","picker.labels.clock.seconds":"seconds","picker.labels.clock.selected":"Selected time is","picker.labels.date.choose":"Choose date","picker.labels.date.selected":"Selected date is","picker.labels.empty":"Empty","picker.labels.field.clear":"Clear value","picker.labels.range.end":"End","picker.labels.range.enddate":"End date","picker.labels.range.endtime":"End time","picker.labels.range.start":"Start","picker.labels.range.startdate":"Start date","picker.labels.range.starttime":"Start time","picker.labels.select":"Select","picker.labels.table.date":"pick date","picker.labels.table.time":"pick time","picker.labels.time.choose":"Choose time","picker.labels.time.selected":"selected time is","picker.time.toolbar.title":"Select time","picker.view.name.day":"Day","picker.view.name.hours":"Hours","picker.view.name.meridiem":"Meridiem","picker.view.name.minutes":"Minutes","picker.view.name.month":"Month","picker.view.name.seconds":"Seconds","picker.view.name.weekday":"Week day","picker.view.name.year":"Year","picker.view.navigation.open.nextview":"Open next view","picker.view.navigation.open.previousview":"Open previous view","picker.view.navigation.switch.calendarview":"year view is open, switch to calendar view","picker.view.navigation.switch.yearview":"calendar view is open, switch to year view","fielderror.screenreader.text":"Error","fieldlabel.optional.text":"Optional","fieldlabel.required.text":"Required","filters.clear.label":"Clear filters","filters.filter.any":"Any","filters.filter.clear":"Clear filter","filters.filters.arialabel":"Filters","filters.menuitem.any":"Any {{label}}","filters.menuitem.selected":"{{selected}} selected","filters.search.label":"Search","fileupload.button.text":"Add files","fileupload.prompt.text":"Drag and drop files here or click to add files","fileupload.removefile.text":"Remove file","passwordfield.icon.label.hide":"Hide password","passwordfield.icon.label.show":"Show password","severity.error":"error","severity.info":"info","severity.success":"success","severity.warning":"warning","sidenav.toggle.expand":"Open navigation","sidenav.toggle.collapse":"Close navigation","switch.active":"Active","switch.inactive":"Inactive","table.columnvisibility.arialabel":"Show/hide columns","table.density.arialabel":"Table density","table.draghandle.arialabel":"Drag row to reorder. Or, press space or enter to start and stop reordering and esc to cancel.","table.draghandle.tooltip":"Drag row or press space/enter key to start and stop reordering","table.actions":"Actions","table.error":"Error loading data.","table.fetchedrows.text":"Fetched {{totalRows}} row","table.fetchedrows.text_plural":"Fetched {{totalRows}} total rows","table.moreactions.arialabel":"More actions","table.noresults.heading":"There are no results.","table.noresults.text":"Try a different query.","table.reorder.backward":"Send backward","table.reorder.forward":"Bring forward","table.reorder.toback":"Send to back","table.reorder.tofront":"Bring to front","table.rows.text":"{{totalRows}} row","table.rows.text_plural":"{{totalRows}} rows","pagination.loadmore":"Show more","pagination.next":"Next page","pagination.previous":"Previous page","pagination.page":"Page","pagination.rowsperpage":"Rows per page","pagination.rowswithtotal":"{{firstRow}}-{{lastRow}} of {{totalRows}} rows","pagination.rowswithouttotal":"{{firstRow}}-{{lastRow}} rows","table.actions.selectall":"Select all","table.actions.selectnone":"Select none","table.actions.selectsome":"{{selectedRowCount}} selected","table.rowexpansion.expand":"Expand","table.rowexpansion.expandall":"Expand all","table.rowexpansion.collapse":"Collapse","table.rowexpansion.collapseall":"Collapse all","dataview.layout.table":"Table","dataview.layout.grid":"Grid","dataview.layout.list":"List","topnav.helpicon":"help page","topnav.settingsicon":"settings page"};

package/src/theme/components.tsx

@@ -2686,7 +2686,7 @@ export const components = ({
       styleOverrides: {
         root: ({ ownerState }) => ({
           display: "table",
-          width: "auto",
+          width: "100%",
           borderCollapse: "separate",
           borderSpacing: 0,
           marginBlock: odysseyTokens.Spacing0,