@okta/odyssey-react-mui 1.21.2 → 1.22.0

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

@@ -1 +1 @@
-export const translation = {"breadcrumbs.home.text":"首頁","breadcrumbs.label.text":"軌跡","close.text":"關閉","clear.text":"清除","picker.calendar.navigation.nextmonth":"下個月","picker.calendar.navigation.previousmonth":"上個月","picker.date.toolbar.title":"已選取日期","picker.daterange.toolbar.title":"選取日期範圍","picker.datetime.toolbar.title":"選取日期與時間","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":"套用","picker.labels.action.cancel":"取消","picker.labels.action.today":"今天","picker.labels.clock.empty":"沒有選取時間","picker.labels.clock.hours":"小時","picker.labels.clock.minutes":"秒","picker.labels.clock.selected":"選取的時間是","picker.labels.date.choose":"選擇日期","picker.labels.date.selected":"選取的日期是","picker.labels.empty":"空白","picker.labels.field.clear":"清除值","picker.labels.range.end":"結束","picker.labels.range.enddate":"結束日期","picker.labels.range.endtime":"結束時間","picker.labels.range.start":"開始","picker.labels.range.startdate":"開始日期","picker.labels.range.starttime":"開始時間","picker.labels.select":"選取","picker.labels.table.date":"挑選日期","picker.labels.table.time":"挑選時間","picker.labels.time.choose":"選擇時間","picker.time.toolbar.title":"選取時間","picker.view.name.day":"天","picker.view.name.hours":"小時","picker.view.name.meridiem":"十二小時制","picker.view.name.minutes":"分鐘","picker.view.name.month":"個月","picker.view.name.seconds":"秒","picker.view.name.weekday":"星期幾","picker.view.name.year":"年","picker.view.navigation.open.nextview":"開啟下一個檢視","picker.view.navigation.open.previousview":"開啟上一個檢視","picker.view.navigation.switch.calendarview":"年檢視已開啟，切換至行事曆檢視","picker.view.navigation.switch.yearview":"行事曆檢視已開啟，切換至年檢視","fielderror.screenreader.text":"錯誤","fieldlabel.optional.text":"選擇性","fieldlabel.required.text":"必要","filters.clear.label":"清除篩選條件","filters.filter.any":"任何","filters.filter.clear":"清除篩選條件","filters.filters.arialabel":"篩選條件","filters.menuitem.any":"任何 {{label}}","filters.menuitem.selected":"已選取 {{selected}}","filters.search.label":"搜尋","fileupload.button.text":"新增檔案","fileupload.prompt.text":"將檔案拖放到此處或按一下以新增檔案","fileupload.removefile.text":"移除檔案","passwordfield.icon.label.hide":"隱藏密碼","passwordfield.icon.label.show":"顯示密碼","severity.error":"錯誤","severity.info":"資訊","severity.success":"成功","severity.warning":"警告","switch.active":"作用中","switch.inactive":"非作用中","table.actions":"動作","table.columnvisibility.arialabel":"顯示/隱藏欄","table.density.arialabel":"表格密度","table.draghandle.arialabel":"拖曳列以重新排序。或者按下空白鍵或 Enter 鍵以開始和停止重新排序，按下 Esc 鍵可取消。","table.draghandle.tooltip":"拖曳列或按下空白鍵/Enter 鍵即可開始和停止重新排序","table.error":"載入資料時發生錯誤。","table.fetchedrows.text":"已擷取 {{totalRows}} 列","table.fetchedrows.text_plural":"已擷取總共 {{totalRows}} 列","table.moreactions.arialabel":"更多動作","table.noresults.heading":"沒有結果。","table.noresults.text":"請嘗試不同的查詢。","table.reorder.backward":"往後傳送","table.reorder.forward":"往前帶","table.reorder.toback":"向後傳送","table.reorder.tofront":"向前帶","table.rows.text":"{{totalRows}} 列","table.rows.text_plural":"{{totalRows}} 列","pagination.loadmore":"顯示更多","pagination.next":"下一頁","pagination.previous":"上一頁","pagination.page":"頁面","pagination.rowsperpage":"每頁列數","pagination.rowswithtotal":"第 {{firstRow}}-{{lastRow}} 列，總共 {{totalRows}} 列","pagination.rowswithouttotal":"第 {{firstRow}}-{{lastRow}} 列"};
+export const translation = {"breadcrumbs.home.text":"首頁","breadcrumbs.label.text":"軌跡","close.text":"關閉","clear.text":"清除","open.text":"開啟","picker.calendar.navigation.nextmonth":"下個月","picker.calendar.navigation.previousmonth":"上個月","picker.date.toolbar.title":"已選取日期","picker.daterange.toolbar.title":"選取日期範圍","picker.datetime.toolbar.title":"選取日期與時間","picker.error.invalid":"修正日期格式，或從行事曆中選取日期。","picker.error.mindate":"輸入的日期早於允許的日期。從行事曆中的可用範圍選取日期。","picker.error.maxdate":"輸入的日期晚於允許的日期。從行事曆中的可用範圍選取日期。","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":"套用","picker.labels.action.cancel":"取消","picker.labels.action.today":"今天","picker.labels.clock.empty":"沒有選取時間","picker.labels.clock.hours":"小時","picker.labels.clock.minutes":"秒","picker.labels.clock.selected":"選取的時間是","picker.labels.date.choose":"選擇日期","picker.labels.date.selected":"選取的日期是","picker.labels.empty":"空白","picker.labels.field.clear":"清除值","picker.labels.range.end":"結束","picker.labels.range.enddate":"結束日期","picker.labels.range.endtime":"結束時間","picker.labels.range.start":"開始","picker.labels.range.startdate":"開始日期","picker.labels.range.starttime":"開始時間","picker.labels.select":"選取","picker.labels.table.date":"挑選日期","picker.labels.table.time":"挑選時間","picker.labels.time.choose":"選擇時間","picker.time.toolbar.title":"選取時間","picker.view.name.day":"天","picker.view.name.hours":"小時","picker.view.name.meridiem":"十二小時制","picker.view.name.minutes":"分鐘","picker.view.name.month":"個月","picker.view.name.seconds":"秒","picker.view.name.weekday":"星期幾","picker.view.name.year":"年","picker.view.navigation.open.nextview":"開啟下一個檢視","picker.view.navigation.open.previousview":"開啟上一個檢視","picker.view.navigation.switch.calendarview":"年檢視已開啟，切換至行事曆檢視","picker.view.navigation.switch.yearview":"行事曆檢視已開啟，切換至年檢視","fielderror.screenreader.text":"錯誤","fieldlabel.optional.text":"選擇性","fieldlabel.required.text":"必要","filters.clear.label":"清除篩選條件","filters.filter.any":"任何","filters.filter.clear":"清除篩選條件","filters.filters.arialabel":"篩選條件","filters.menuitem.any":"任何 {{label}}","filters.menuitem.selected":"已選取 {{selected}}","filters.search.label":"搜尋","fileupload.button.text":"新增檔案","fileupload.prompt.text":"將檔案拖放到此處或按一下以新增檔案","fileupload.removefile.text":"移除檔案","passwordfield.icon.label.hide":"隱藏密碼","passwordfield.icon.label.show":"顯示密碼","severity.error":"錯誤","severity.info":"資訊","severity.success":"成功","severity.warning":"警告","switch.active":"作用中","switch.inactive":"非作用中","table.columnvisibility.arialabel":"顯示/隱藏欄","table.density.arialabel":"表格密度","table.draghandle.arialabel":"拖曳列以重新排序。或者按下空白鍵或 Enter 鍵以開始和停止重新排序，按下 Esc 鍵可取消。","table.draghandle.tooltip":"拖曳列或按下空白鍵/Enter 鍵即可開始和停止重新排序","table.actions":"動作","table.error":"載入資料時發生錯誤。","table.fetchedrows.text":"已擷取 {{totalRows}} 列","table.fetchedrows.text_plural":"已擷取總共 {{totalRows}} 列","table.moreactions.arialabel":"更多動作","table.noresults.heading":"沒有結果。","table.noresults.text":"請嘗試不同的查詢。","table.reorder.backward":"往後傳送","table.reorder.forward":"往前帶","table.reorder.toback":"向後傳送","table.reorder.tofront":"向前帶","table.rows.text":"{{totalRows}} 列","table.rows.text_plural":"{{totalRows}} 列","pagination.loadmore":"顯示更多","pagination.next":"下一頁","pagination.previous":"上一頁","pagination.page":"頁面","pagination.rowsperpage":"每頁列數","pagination.rowswithtotal":"第 {{firstRow}}-{{lastRow}} 列，總共 {{totalRows}} 列","pagination.rowswithouttotal":"第 {{firstRow}}-{{lastRow}} 列","table.actions.selectall":"全選","table.actions.selectnone":"沒有選取","table.actions.selectsome":"已選取 {{selectedRowCount}} 個","table.rowexpansion.expand":"展開","table.rowexpansion.expandall":"全部展開","table.rowexpansion.collapse":"摺疊","table.rowexpansion.collapseall":"全部摺疊","dataview.layout.table":"表格","dataview.layout.grid":"網格","dataview.layout.list":"清單"};

package/src/theme/components.tsx

@@ -62,9 +62,12 @@ const drawerSizes = {
 export const components = ({
   odysseyTokens,
   shadowDomElement,
+  shadowRootElement,
 }: {
   odysseyTokens: DesignTokens;
+  /** @deprecated use `shadowRootElement` */
   shadowDomElement?: HTMLElement;
+  shadowRootElement?: HTMLElement;
 }): ThemeOptions["components"] => {
   return {
     MuiAccordion: {
@@ -177,41 +180,45 @@ export const components = ({
           padding: odysseyTokens.Spacing4,
           gap: odysseyTokens.Spacing4,
           color: odysseyTokens.TypographyColorBody,
-          border: 0,
+          border: "1px solid",
 
           // Severity color variation
           ...(ownerState.severity === "success" && {
-            backgroundColor: odysseyTokens.HueGreen100,
+            backgroundColor: odysseyTokens.HueGreen50,
+            borderColor: odysseyTokens.HueGreen200,
 
             ...(ownerState.variant === "toast" && {
-              backgroundColor: odysseyTokens.HueGreen100.concat(
+              backgroundColor: odysseyTokens.HueGreen50.concat(
                 odysseyTokens.PaletteAlphaSemi,
               ),
             }),
           }),
           ...(ownerState.severity === "info" && {
-            backgroundColor: odysseyTokens.HueBlue100,
+            backgroundColor: odysseyTokens.HueBlue50,
+            borderColor: odysseyTokens.HueBlue200,
 
             ...(ownerState.variant === "toast" && {
-              backgroundColor: odysseyTokens.HueBlue100.concat(
+              backgroundColor: odysseyTokens.HueBlue50.concat(
                 odysseyTokens.PaletteAlphaSemi,
               ),
             }),
           }),
           ...(ownerState.severity === "error" && {
-            backgroundColor: odysseyTokens.HueRed100,
+            backgroundColor: odysseyTokens.HueRed50,
+            borderColor: odysseyTokens.HueRed200,
 
             ...(ownerState.variant === "toast" && {
-              backgroundColor: odysseyTokens.HueRed100.concat(
+              backgroundColor: odysseyTokens.HueRed50.concat(
                 odysseyTokens.PaletteAlphaSemi,
               ),
             }),
           }),
           ...(ownerState.severity === "warning" && {
-            backgroundColor: odysseyTokens.HueYellow100,
+            backgroundColor: odysseyTokens.HueYellow50,
+            borderColor: odysseyTokens.HueYellow500,
 
             ...(ownerState.variant === "toast" && {
-              backgroundColor: odysseyTokens.HueYellow100.concat(
+              backgroundColor: odysseyTokens.HueYellow50.concat(
                 odysseyTokens.PaletteAlphaSemi,
               ),
             }),
@@ -246,6 +253,7 @@ export const components = ({
             justifyContent: "center",
             alignItems: "center",
             borderRadius: 0,
+            border: 0,
 
             ...(ownerState.onClose !== undefined && {
               paddingInline: odysseyTokens.Spacing6,
@@ -481,7 +489,6 @@ export const components = ({
           background: "transparent",
           paddingBlockStart: odysseyTokens.Spacing1,
           ...(ownerState.ListboxComponent !== undefined && {
-            height: "100%",
             maxHeight: "40vh",
           }),
         }),
@@ -873,86 +880,116 @@ export const components = ({
         indeterminateIcon: <SubtractIcon />,
       },
       styleOverrides: {
-        root: ({ theme }) => ({
-          width: `${odysseyTokens.TypographyLineHeightUi}em`,
-          minWidth: `${odysseyTokens.TypographyLineHeightUi}em`,
-          height: `${odysseyTokens.TypographyLineHeightUi}em`,
-          borderRadius: odysseyTokens.BorderRadiusTight,
-          borderWidth: odysseyTokens.BorderWidthMain,
-          borderStyle: odysseyTokens.BorderStyleMain,
-          borderColor: odysseyTokens.HueNeutral500,
-          padding: 0,
-          boxShadow: `0 0 0 0 transparent`,
-          transition: theme.transitions.create(
-            ["border-color", "background-color", "box-shadow"],
-            {
-              duration: odysseyTokens.TransitionDurationMain,
+        root: ({ ownerState, theme }) => {
+          const isReadOnly = ownerState?.inputProps?.readOnly;
+
+          return {
+            width: `${odysseyTokens.TypographyLineHeightUi}em`,
+            minWidth: `${odysseyTokens.TypographyLineHeightUi}em`,
+            height: `${odysseyTokens.TypographyLineHeightUi}em`,
+            borderRadius: odysseyTokens.BorderRadiusTight,
+            border: `1px solid ${odysseyTokens.HueNeutral500}`,
+            padding: 0,
+            boxShadow: `0 0 0 0 transparent`,
+            transition: theme.transitions.create(
+              ["border-color", "background-color", "box-shadow"],
+              {
+                duration: odysseyTokens.TransitionDurationMain,
+              },
+            ),
+
+            [`.${svgIconClasses.root}`]: {
+              color: odysseyTokens.HueNeutralWhite,
+              transition: theme.transitions.create(["color"], {
+                duration: odysseyTokens.TransitionDurationMain,
+              }),
             },
-          ),
 
-          [`.${svgIconClasses.root}`]: {
-            color: odysseyTokens.HueNeutralWhite,
-            transition: theme.transitions.create(["color"], {
-              duration: odysseyTokens.TransitionDurationMain,
-            }),
-          },
+            "&.Mui-checked, &.MuiCheckbox-indeterminate": {
+              backgroundColor: odysseyTokens.PalettePrimaryMain,
+              borderColor: odysseyTokens.PalettePrimaryMain,
 
-          "&.Mui-checked, &.MuiCheckbox-indeterminate": {
-            backgroundColor: odysseyTokens.PalettePrimaryMain,
-            borderColor: odysseyTokens.PalettePrimaryMain,
+              [`.${formControlLabelClasses.root}:hover > &`]: {
+                backgroundColor: odysseyTokens.PalettePrimaryDark,
+                borderColor: odysseyTokens.PalettePrimaryDark,
+              },
+            },
 
             [`.${formControlLabelClasses.root}:hover > &`]: {
-              backgroundColor: odysseyTokens.PalettePrimaryDark,
-              borderColor: odysseyTokens.PalettePrimaryDark,
+              backgroundColor: "transparent",
+              borderColor: odysseyTokens.HueNeutral900,
             },
-          },
-
-          [`.${formControlLabelClasses.root}:hover > &`]: {
-            backgroundColor: "transparent",
-            borderColor: odysseyTokens.HueNeutral900,
-          },
-          ".Mui-error:not(.Mui-valid):hover > &": {
-            borderColor: odysseyTokens.BorderColorDangerDark,
 
-            "&.Mui-checked": {
-              backgroundColor: odysseyTokens.PaletteDangerDark,
+            ".Mui-error:not(.Mui-valid):hover > &": {
               borderColor: odysseyTokens.BorderColorDangerDark,
-            },
-          },
-          ".Mui-error:not(.Mui-valid) > &": {
-            borderColor: odysseyTokens.BorderColorDangerControl,
 
-            "&.Mui-checked": {
-              backgroundColor: odysseyTokens.PaletteDangerMain,
-              borderColor: odysseyTokens.BorderColorDangerControl,
+              "&.Mui-checked": {
+                backgroundColor: odysseyTokens.PaletteDangerDark,
+                borderColor: odysseyTokens.BorderColorDangerDark,
+              },
             },
+            ".Mui-error:not(.Mui-valid) > &": {
+              borderColor: odysseyTokens.BorderColorDangerControl,
 
+              "&.Mui-checked": {
+                backgroundColor: odysseyTokens.PaletteDangerMain,
+                borderColor: odysseyTokens.BorderColorDangerControl,
+              },
+
+              "&.Mui-focusVisible": {
+                boxShadow: `0 0 0 2px ${odysseyTokens.HueNeutralWhite}, 0 0 0 4px ${odysseyTokens.PaletteDangerMain}`,
+              },
+            },
             "&.Mui-focusVisible": {
-              boxShadow: `0 0 0 2px ${odysseyTokens.HueNeutralWhite}, 0 0 0 4px ${odysseyTokens.PaletteDangerMain}`,
+              borderColor: odysseyTokens.HueNeutral900,
+              boxShadow: `0 0 0 2px ${odysseyTokens.HueNeutralWhite}, 0 0 0 4px ${odysseyTokens.PalettePrimaryMain}`,
+              outline: "2px solid transparent",
+              outlineOffset: "1px",
             },
-          },
-          "&.Mui-focusVisible": {
-            borderColor: odysseyTokens.HueNeutral900,
-            boxShadow: `0 0 0 2px ${odysseyTokens.HueNeutralWhite}, 0 0 0 4px ${odysseyTokens.PalettePrimaryMain}`,
-            outline: "2px solid transparent",
-            outlineOffset: "1px",
-          },
-          "&.Mui-disabled": {
-            backgroundColor: odysseyTokens.HueNeutral50,
-            borderColor: odysseyTokens.HueNeutral300,
-
-            ".Mui-error:not(.Mui-valid) > &": {
+            "&.Mui-disabled": {
               backgroundColor: odysseyTokens.HueNeutral50,
               borderColor: odysseyTokens.HueNeutral300,
-            },
 
-            [`.${svgIconClasses.root}`]: {
-              color: odysseyTokens.HueNeutral300,
+              ".Mui-error:not(.Mui-valid) > &": {
+                backgroundColor: odysseyTokens.HueNeutral50,
+                borderColor: odysseyTokens.HueNeutral300,
+              },
+
+              [`.${svgIconClasses.root}`]: {
+                color: odysseyTokens.HueNeutral300,
+              },
             },
-          },
-        }),
+
+            ...(isReadOnly && {
+              // Override default styles
+              backgroundColor: odysseyTokens.HueNeutral100,
+              border: `1px solid ${odysseyTokens.HueNeutral300}`,
+              cursor: "default",
+
+              // Override checked/indeterminate styles
+              "&.Mui-checked, &.MuiCheckbox-indeterminate": {
+                backgroundColor: odysseyTokens.HueNeutral100,
+                borderColor: odysseyTokens.HueNeutral300,
+
+                [`.${formControlLabelClasses.root}:hover > &`]: {
+                  backgroundColor: odysseyTokens.HueNeutral100,
+                  borderColor: odysseyTokens.HueNeutral300,
+                },
+              },
+              [`.${formControlLabelClasses.root}:hover > &`]: {
+                backgroundColor: odysseyTokens.HueNeutral100,
+                borderColor: odysseyTokens.HueNeutral300,
+              },
+              // ReadOnly styles for SVG check icon
+              [`.${svgIconClasses.root}`]: {
+                color: odysseyTokens.HueNeutral700,
+              },
+            }),
+          };
+        },
       },
     },
+
     MuiChip: {
       defaultProps: {
         deleteIcon: <CloseCircleFilledIcon />,
@@ -2141,6 +2178,13 @@ export const components = ({
             },
           },
 
+          "&[data-empty='true']": {
+            "&:after": {
+              content: "'&nbsp;'",
+              visibility: "hidden",
+            },
+          },
+
           ...(!ownerState.disableGutters && {
             paddingInline: odysseyTokens.Spacing4,
           }),
@@ -2181,7 +2225,7 @@ export const components = ({
     },
     MuiModal: {
       defaultProps: {
-        container: shadowDomElement,
+        container: shadowRootElement || shadowDomElement,
       },
     },
     MuiNativeSelect: {
@@ -2221,7 +2265,7 @@ export const components = ({
     },
     MuiPopover: {
       defaultProps: {
-        container: shadowDomElement,
+        container: shadowRootElement || shadowDomElement,
       },
       styleOverrides: {
         paper: {
@@ -2234,7 +2278,7 @@ export const components = ({
     },
     MuiPopper: {
       defaultProps: {
-        container: shadowDomElement,
+        container: shadowRootElement || shadowDomElement,
       },
     },
     MuiRadio: {
@@ -2244,83 +2288,105 @@ export const components = ({
         checkedIcon: <></>,
       },
       styleOverrides: {
-        root: ({ theme }) => ({
-          position: "relative",
-          // to visually align input with label
-          insetBlockStart: `${2 / theme.typography.fontSize}rem`,
-          width: `${odysseyTokens.TypographyLineHeightUi}em`,
-          minWidth: `${odysseyTokens.TypographyLineHeightUi}em`,
-          height: `${odysseyTokens.TypographyLineHeightUi}em`,
-          borderRadius: `${odysseyTokens.TypographyLineHeightUi}em`,
-          borderWidth: odysseyTokens.BorderWidthMain,
-          borderStyle: odysseyTokens.BorderStyleMain,
-          borderColor: odysseyTokens.HueNeutral500,
-          padding: 0,
-          boxShadow: `0 0 0 0 transparent`,
-          transition: theme.transitions.create(
-            ["border-color", "background-color", "box-shadow"],
-            {
-              duration: odysseyTokens.TransitionDurationMain,
-            },
-          ),
-
-          "&::before": {
-            content: "''",
-            position: "absolute",
-            width: odysseyTokens.Spacing2,
-            height: odysseyTokens.Spacing2,
-            borderRadius: "50%",
-            backgroundColor: "transparent",
-            transition: theme.transitions.create(["background-color"], {
-              duration: odysseyTokens.TransitionDurationMain,
-            }),
-          },
+        root: ({ ownerState, theme }) => {
+          const isReadOnly = ownerState?.inputProps?.readOnly;
 
-          [`.${formControlLabelClasses.root}:hover > &`]: {
-            backgroundColor: "transparent",
-            borderColor: odysseyTokens.HueNeutral900,
-          },
-          ".Mui-error:hover > &": {
-            backgroundColor: "transparent",
-            borderColor: odysseyTokens.BorderColorDangerDark,
+          return {
+            position: "relative",
+            insetBlockStart: `${2 / theme.typography.fontSize}rem`,
+            width: `${odysseyTokens.TypographyLineHeightUi}em`,
+            minWidth: `${odysseyTokens.TypographyLineHeightUi}em`,
+            height: `${odysseyTokens.TypographyLineHeightUi}em`,
+            borderRadius: `${odysseyTokens.TypographyLineHeightUi}em`,
+            borderWidth: odysseyTokens.BorderWidthMain,
+            borderStyle: odysseyTokens.BorderStyleMain,
+            borderColor: odysseyTokens.HueNeutral500,
+            padding: 0,
+            boxShadow: `0 0 0 0 transparent`,
+            transition: theme.transitions.create(
+              ["border-color", "background-color", "box-shadow"],
+              {
+                duration: odysseyTokens.TransitionDurationMain,
+              },
+            ),
             "&::before": {
-              backgroundColor: odysseyTokens.PaletteDangerDark,
+              content: "''",
+              position: "absolute",
+              width: odysseyTokens.Spacing2,
+              height: odysseyTokens.Spacing2,
+              borderRadius: "50%",
+              backgroundColor: "transparent",
+              transition: theme.transitions.create(["background-color"], {
+                duration: odysseyTokens.TransitionDurationMain,
+              }),
+            },
+            [`.${formControlLabelClasses.root}:hover > &`]: {
+              backgroundColor: "transparent",
+              borderColor: odysseyTokens.HueNeutral900,
+            },
+            ".Mui-error:hover > &": {
+              backgroundColor: "transparent",
+              borderColor: odysseyTokens.BorderColorDangerDark,
+              "&::before": {
+                backgroundColor: odysseyTokens.PaletteDangerDark,
+              },
+            },
+            ".Mui-error > &": {
+              borderColor: odysseyTokens.BorderColorDangerControl,
+              "&.Mui-focusVisible": {
+                boxShadow: `0 0 0 2px ${odysseyTokens.HueNeutralWhite}, 0 0 0 4px ${odysseyTokens.PaletteDangerMain}`,
+              },
             },
-          },
-          ".Mui-error > &": {
-            borderColor: odysseyTokens.BorderColorDangerControl,
-
             "&.Mui-focusVisible": {
-              boxShadow: `0 0 0 2px ${odysseyTokens.HueNeutralWhite}, 0 0 0 4px ${odysseyTokens.PaletteDangerMain}`,
+              borderColor: odysseyTokens.HueNeutral900,
+              boxShadow: `0 0 0 2px ${odysseyTokens.HueNeutralWhite}, 0 0 0 4px ${odysseyTokens.PalettePrimaryMain}`,
+              outline: "2px solid transparent",
+              outlineOffset: "1px",
             },
-          },
-          "&.Mui-focusVisible": {
-            borderColor: odysseyTokens.HueNeutral900,
-            boxShadow: `0 0 0 2px ${odysseyTokens.HueNeutralWhite}, 0 0 0 4px ${odysseyTokens.PalettePrimaryMain}`,
-            outline: "2px solid transparent",
-            outlineOffset: "1px",
-          },
-          "&.Mui-checked": {
-            position: "relative",
-
-            "&::before": {
-              backgroundColor: odysseyTokens.PalettePrimaryMain,
+            "&.Mui-checked": {
+              position: "relative",
+              "&::before": {
+                backgroundColor: odysseyTokens.PalettePrimaryMain,
+              },
             },
-          },
-          ".Mui-error > &.Mui-checked::before": {
-            backgroundColor: odysseyTokens.PaletteDangerMain,
-          },
-          "&.Mui-disabled": {
-            backgroundColor: odysseyTokens.HueNeutral50,
-            borderColor: odysseyTokens.BorderColorDisabled,
-
-            "&.Mui-checked::before": {
-              backgroundColor: odysseyTokens.BorderColorDisabled,
+            ".Mui-error > &.Mui-checked::before": {
+              backgroundColor: odysseyTokens.PaletteDangerMain,
             },
-          },
-        }),
+            "&.Mui-disabled": {
+              backgroundColor: odysseyTokens.HueNeutral50,
+              borderColor: odysseyTokens.BorderColorDisabled,
+              "&.Mui-checked::before": {
+                backgroundColor: odysseyTokens.BorderColorDisabled,
+              },
+            },
+            ...(isReadOnly && {
+              backgroundColor: odysseyTokens.HueNeutral100,
+              borderColor: odysseyTokens.HueNeutral300,
+              cursor: "default",
+              "&::before": {
+                content: "''",
+                position: "absolute",
+                width: odysseyTokens.Spacing2,
+                height: odysseyTokens.Spacing2,
+                borderRadius: "50%",
+                backgroundColor: "transparent",
+                transition: theme.transitions.create(["background-color"], {
+                  duration: odysseyTokens.TransitionDurationMain,
+                }),
+              },
+              "&.Mui-checked::before": {
+                backgroundColor: odysseyTokens.HueNeutral700,
+              },
+              [`.${formControlLabelClasses.root}:hover > &`]: {
+                backgroundColor: odysseyTokens.HueNeutral100,
+                borderColor: odysseyTokens.HueNeutral300,
+              },
+            }),
+          };
+        },
       },
     },
+
     MuiSnackbar: {
       defaultProps: {
         anchorOrigin: {
@@ -2347,12 +2413,32 @@ export const components = ({
         },
       },
       styleOverrides: {
-        select: {
+        root: ({ ownerState }) => ({
+          ...(ownerState?.inputProps?.readOnly && {
+            "&.MuiInputBase-root": {
+              backgroundColor: odysseyTokens.HueNeutral50,
+              borderColor: odysseyTokens.HueNeutral200,
+              "&:hover": {
+                backgroundColor: odysseyTokens.HueNeutral50,
+              },
+              "&.Mui-focused": {
+                borderColor: odysseyTokens.PalettePrimaryMain,
+              },
+            },
+          }),
+          "& .MuiSelect-icon": {
+            right: "unset",
+            insetInlineEnd: odysseyTokens.Spacing3,
+            color: odysseyTokens.TypographyColorSubordinate,
+          },
+        }),
+        select: ({ ownerState }) => ({
           height: "auto",
           // We're subtracting a pixel so the total height, including borders, is 40px
           paddingBlock: `calc(${odysseyTokens.Spacing3} - ${odysseyTokens.BorderWidthMain})`,
           paddingInline: odysseyTokens.Spacing3,
-          minHeight: 0,
+          // Setting min-height to the line-height here to avoid the select shrinking in size when the value is an empty string
+          minHeight: `${odysseyTokens.TypographyLineHeightUi}em`,
 
           "&:focus": {
             backgroundColor: "transparent",
@@ -2369,12 +2455,16 @@ export const components = ({
           ["& .MuiListItemSecondaryAction-root"]: {
             display: "none",
           },
-        },
-        icon: {
-          right: "unset",
-          insetInlineEnd: odysseyTokens.Spacing3,
-          color: odysseyTokens.TypographyColorSubordinate,
-        },
+
+          ...(ownerState?.inputProps?.readOnly && {
+            color: odysseyTokens.HueNeutral700,
+            cursor: "default",
+            "&:focus": {
+              backgroundColor: "transparent",
+              borderColor: odysseyTokens.PalettePrimaryMain,
+            },
+          }),
+        }),
       },
     },
     MuiSvgIcon: {

package/src/theme/createOdysseyMuiTheme.ts

@@ -30,14 +30,17 @@ export type DesignTokensOverride = Partial<typeof Tokens>;
 export const createOdysseyMuiTheme = ({
   odysseyTokens,
   shadowDomElement,
+  shadowRootElement,
 }: {
   odysseyTokens: DesignTokens;
+  /** @deprecated Use `shadowRootElement` */
   shadowDomElement?: HTMLElement;
+  shadowRootElement?: HTMLElement;
 }) =>
   createTheme({
     components: components({
       odysseyTokens,
-      shadowDomElement,
+      shadowRootElement: shadowRootElement || shadowDomElement,
     }),
     mixins: mixins({ odysseyTokens }),
     palette: palette({ odysseyTokens }),

package/dist/createShadowRootElement.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"createShadowRootElement.js","names":["createShadowRootElement","containerElement","shadowRoot","attachShadow","mode","emotionRoot","document","createElement","setAttribute","window","cspNonce","shadowRootElement","appendChild"],"sources":["../src/createShadowRootElement.ts"],"sourcesContent":["/*!\n * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nexport const createShadowRootElement = (\n  containerElement: HTMLElement,\n): [HTMLStyleElement, HTMLDivElement] => {\n  const shadowRoot = containerElement.attachShadow({ mode: \"open\" });\n\n  // the element that styles will be cached into\n  const emotionRoot = document.createElement(\"style\");\n  emotionRoot.setAttribute(\"id\", \"style-root\");\n  emotionRoot.setAttribute(\"nonce\", window.cspNonce);\n\n  // the element that emotion renders html into\n  const shadowRootElement = document.createElement(\"div\");\n  shadowRootElement.setAttribute(\"id\", \"shadow-root\");\n\n  shadowRoot.appendChild(emotionRoot);\n  shadowRoot.appendChild(shadowRootElement);\n\n  return [emotionRoot, shadowRootElement];\n};\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,OAAO,MAAMA,uBAAuB,GAClCC,gBAA6B,IACU;EACvC,MAAMC,UAAU,GAAGD,gBAAgB,CAACE,YAAY,CAAC;IAAEC,IAAI,EAAE;EAAO,CAAC,CAAC;EAGlE,MAAMC,WAAW,GAAGC,QAAQ,CAACC,aAAa,CAAC,OAAO,CAAC;EACnDF,WAAW,CAACG,YAAY,CAAC,IAAI,EAAE,YAAY,CAAC;EAC5CH,WAAW,CAACG,YAAY,CAAC,OAAO,EAAEC,MAAM,CAACC,QAAQ,CAAC;EAGlD,MAAMC,iBAAiB,GAAGL,QAAQ,CAACC,aAAa,CAAC,KAAK,CAAC;EACvDI,iBAAiB,CAACH,YAAY,CAAC,IAAI,EAAE,aAAa,CAAC;EAEnDN,UAAU,CAACU,WAAW,CAACP,WAAW,CAAC;EACnCH,UAAU,CAACU,WAAW,CAACD,iBAAiB,CAAC;EAEzC,OAAO,CAACN,WAAW,EAAEM,iBAAiB,CAAC;AACzC,CAAC"}

package/dist/labs/DataComponents/BulkActionsMenu.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"BulkActionsMenu.js","names":["memo","useCallback","styled","useTranslation","Box","Button","ChevronDownIcon","MenuButton","useOdysseyDesignTokens","jsx","_jsx","jsxs","_jsxs","BulkActionsContainer","shouldForwardProp","prop","odysseyDesignTokens","display","gap","Spacing2","BulkActionsMenu","data","menuItems","rowSelection","setRowSelection","t","selectedRowCount","Object","values","filter","Boolean","length","handleSelectAll","rows","fromEntries","map","row","id","handleSelectNone","children","ariaLabel","buttonLabel","buttonVariant","endIcon","isDisabled","label","onClick","variant","MemoizedBulkActionsMenu","displayName"],"sources":["../../../src/labs/DataComponents/BulkActionsMenu.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 { memo, useCallback, Dispatch, SetStateAction } from \"react\";\nimport { MRT_RowData, MRT_RowSelectionState } from \"material-react-table\";\nimport styled from \"@emotion/styled\";\nimport { useTranslation } from \"react-i18next\";\n\nimport { Box } from \"../../Box\";\nimport { Button } from \"../../Button\";\nimport { ChevronDownIcon } from \"../../icons.generated\";\nimport { MenuButton } from \"../../MenuButton\";\nimport { UniversalProps } from \"./componentTypes\";\nimport {\n  DesignTokens,\n  useOdysseyDesignTokens,\n} from \"../../OdysseyDesignTokensContext\";\n\nexport type BulkActionsMenuProps = {\n  data: MRT_RowData[];\n  menuItems: UniversalProps[\"bulkActionMenuItems\"];\n  rowSelection: MRT_RowSelectionState;\n  setRowSelection: Dispatch<SetStateAction<MRT_RowSelectionState>>;\n};\n\nconst BulkActionsContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n}>(({ odysseyDesignTokens }) => ({\n  display: \"flex\",\n  gap: odysseyDesignTokens.Spacing2,\n}));\n\nconst BulkActionsMenu = ({\n  data,\n  menuItems,\n  rowSelection,\n  setRowSelection,\n}: BulkActionsMenuProps) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n  const { t } = useTranslation();\n\n  const selectedRowCount = Object.values(rowSelection).filter(Boolean).length;\n\n  const handleSelectAll = useCallback(() => {\n    const rows = Object.fromEntries(data.map((row) => [row.id, true]));\n    setRowSelection(rows);\n  }, [data, setRowSelection]);\n\n  const handleSelectNone = useCallback(() => {\n    setRowSelection({});\n  }, [setRowSelection]);\n\n  return (\n    <BulkActionsContainer odysseyDesignTokens={odysseyDesignTokens}>\n      {selectedRowCount > 0 && (\n        <MenuButton\n          ariaLabel=\"More actions\"\n          buttonLabel={t(\"table.actions.selectsome\", { selectedRowCount })}\n          buttonVariant=\"primary\"\n          endIcon={<ChevronDownIcon />}\n        >\n          {menuItems?.(rowSelection)}\n        </MenuButton>\n      )}\n      <Box>\n        <Button\n          isDisabled={selectedRowCount === data.length} // Disabled if all are selected\n          label={t(\"table.actions.selectall\")}\n          onClick={handleSelectAll}\n          variant=\"secondary\"\n        />\n        <Button\n          isDisabled={selectedRowCount === 0} // Disabled if none are selected\n          label={t(\"table.actions.selectnone\")}\n          onClick={handleSelectNone}\n          variant=\"secondary\"\n        />\n      </Box>\n    </BulkActionsContainer>\n  );\n};\n\nconst MemoizedBulkActionsMenu = memo(BulkActionsMenu);\nMemoizedBulkActionsMenu.displayName = \"BulkActionsMenu\";\n\nexport { MemoizedBulkActionsMenu as BulkActionsMenu };\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,IAAI,EAAEC,WAAW,QAAkC,OAAO;AAEnE,OAAOC,MAAM,MAAM,iBAAiB;AACpC,SAASC,cAAc,QAAQ,eAAe;AAAC,SAEtCC,GAAG;AAAA,SACHC,MAAM;AAAA,SACNC,eAAe;AAAA,SACfC,UAAU;AAAA,SAIjBC,sBAAsB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAUxB,MAAMC,oBAAoB,GAAGX,MAAM,CAAC,KAAK,EAAE;EACzCY,iBAAiB,EAAGC,IAAI,IAAKA,IAAI,KAAK;AACxC,CAAC,CAAC,CAEC,CAAC;EAAEC;AAAoB,CAAC,MAAM;EAC/BC,OAAO,EAAE,MAAM;EACfC,GAAG,EAAEF,mBAAmB,CAACG;AAC3B,CAAC,CAAC,CAAC;AAEH,MAAMC,eAAe,GAAGA,CAAC;EACvBC,IAAI;EACJC,SAAS;EACTC,YAAY;EACZC;AACoB,CAAC,KAAK;EAC1B,MAAMR,mBAAmB,GAAGR,sBAAsB,CAAC,CAAC;EACpD,MAAM;IAAEiB;EAAE,CAAC,GAAGtB,cAAc,CAAC,CAAC;EAE9B,MAAMuB,gBAAgB,GAAGC,MAAM,CAACC,MAAM,CAACL,YAAY,CAAC,CAACM,MAAM,CAACC,OAAO,CAAC,CAACC,MAAM;EAE3E,MAAMC,eAAe,GAAG/B,WAAW,CAAC,MAAM;IACxC,MAAMgC,IAAI,GAAGN,MAAM,CAACO,WAAW,CAACb,IAAI,CAACc,GAAG,CAAEC,GAAG,IAAK,CAACA,GAAG,CAACC,EAAE,EAAE,IAAI,CAAC,CAAC,CAAC;IAClEb,eAAe,CAACS,IAAI,CAAC;EACvB,CAAC,EAAE,CAACZ,IAAI,EAAEG,eAAe,CAAC,CAAC;EAE3B,MAAMc,gBAAgB,GAAGrC,WAAW,CAAC,MAAM;IACzCuB,eAAe,CAAC,CAAC,CAAC,CAAC;EACrB,CAAC,EAAE,CAACA,eAAe,CAAC,CAAC;EAErB,OACEZ,KAAA,CAACC,oBAAoB;IAACG,mBAAmB,EAAEA,mBAAoB;IAAAuB,QAAA,GAC5Db,gBAAgB,GAAG,CAAC,IACnBhB,IAAA,CAACH,UAAU;MACTiC,SAAS,EAAC,cAAc;MACxBC,WAAW,EAAEhB,CAAC,CAAC,0BAA0B,EAAE;QAAEC;MAAiB,CAAC,CAAE;MACjEgB,aAAa,EAAC,SAAS;MACvBC,OAAO,EAAEjC,IAAA,CAACJ,eAAe,IAAE,CAAE;MAAAiC,QAAA,EAE5BjB,SAAS,GAAGC,YAAY;IAAC,CAChB,CACb,EACDX,KAAA,CAACR,GAAG;MAAAmC,QAAA,GACF7B,IAAA,CAACL,MAAM;QACLuC,UAAU,EAAElB,gBAAgB,KAAKL,IAAI,CAACU,MAAO;QAC7Cc,KAAK,EAAEpB,CAAC,CAAC,yBAAyB,CAAE;QACpCqB,OAAO,EAAEd,eAAgB;QACzBe,OAAO,EAAC;MAAW,CACpB,CAAC,EACFrC,IAAA,CAACL,MAAM;QACLuC,UAAU,EAAElB,gBAAgB,KAAK,CAAE;QACnCmB,KAAK,EAAEpB,CAAC,CAAC,0BAA0B,CAAE;QACrCqB,OAAO,EAAER,gBAAiB;QAC1BS,OAAO,EAAC;MAAW,CACpB,CAAC;IAAA,CACC,CAAC;EAAA,CACc,CAAC;AAE3B,CAAC;AAED,MAAMC,uBAAuB,GAAGhD,IAAI,CAACoB,eAAe,CAAC;AACrD4B,uBAAuB,CAACC,WAAW,GAAG,iBAAiB;AAEvD,SAASD,uBAAuB,IAAI5B,eAAe"}