fix(odyssey-react-mui): allow noOptionsText and translate clear text

okta · Jun 5, 2024 · a68f0e0 · a68f0e0
1 parent 4f2f66d
commit a68f0e0
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 3 deletions.
diff --git a/packages/odyssey-react-mui/src/Autocomplete.tsx b/packages/odyssey-react-mui/src/Autocomplete.tsx
@@ -37,6 +37,7 @@ import _AutoSizer, {
   Props as AutoSizerProps,
   Size as AutoSizerSize,
 } from "react-virtualized-auto-sizer";
+import { useTranslation } from "react-i18next";
 
 // This is required to get around a react-types issue for "AutoSizer is not a valid JSX element."
 // @see https://github.com/bvaughn/react-virtualized/issues/1739#issuecomment-1291444246
@@ -123,6 +124,12 @@ export type AutocompleteProps<
    * The label text for the autocomplete input
    */
   label: string;
+  /**
+   * The text to display when no options are available
+   *
+   * default: "No Options"
+   */
+  noOptionsText?: string;
   /**
    * Callback fired when the autocomplete loses focus.
    */
@@ -230,6 +237,7 @@ const Autocomplete = <
   HintLinkComponent,
   label,
   name: nameOverride,
+  noOptionsText,
   onBlur,
   onChange: onChangeProp,
   onInputChange: onInputChangeProp,
@@ -240,6 +248,7 @@ const Autocomplete = <
   testId,
   translate,
 }: AutocompleteProps<OptionType, HasMultipleChoices, IsCustomValueAllowed>) => {
+  const { t } = useTranslation();
   const controlledStateRef = useRef(
     getControlState({
       controlledValue: value,
@@ -461,6 +470,7 @@ const Autocomplete = <
       {...(isVirtualized.current && { ListboxComponent })}
       // AutoComplete is wrapped in a div within MUI which does not get the disabled attr. So this aria-disabled gets set in the div
       aria-disabled={isDisabled}
+      clearText={t("clear.text")}
       disableCloseOnSelect={hasMultipleChoices}
       disabled={isDisabled}
       freeSolo={isCustomValueAllowed}
@@ -469,6 +479,7 @@ const Autocomplete = <
       fullWidth={isFullWidth}
       loading={isLoading}
       multiple={hasMultipleChoices}
+      noOptionsText={noOptionsText}
       onBlur={onBlur}
       onChange={onChange}
       onInputChange={onInputChange}

diff --git a/packages/odyssey-react-mui/src/labs/useDatePickerTranslations.ts b/packages/odyssey-react-mui/src/labs/useDatePickerTranslations.ts
@@ -29,7 +29,7 @@ export const useDatePickerTranslations = (): PickersLocaleText<DateTime> => {
     calendarWeekNumberText: () => "",
 
     cancelButtonLabel: `${t("picker.labels.action.cancel")}`,
-    clearButtonLabel: `${t("picker.labels.action.clear")}`,
+    clearButtonLabel: `${t("clear.text")}`,
     clockLabelText: (view, time, adapter) =>
       `${t("picker.labels.select")} ${view}. ${
         time === null

diff --git a/packages/odyssey-react-mui/src/properties/odyssey-react-mui.properties b/packages/odyssey-react-mui/src/properties/odyssey-react-mui.properties
@@ -1,7 +1,7 @@
 breadcrumbs.home.text = Home
 breadcrumbs.label.text = Breadcrumbs
 close.text = close
-
+clear.text = Clear
 picker.calendar.navigation.nextmonth = Next month
 picker.calendar.navigation.previousmonth = Previous month
 picker.date.toolbar.title = Selected date
@@ -23,7 +23,6 @@ picker.field.placeholder.seconds = ss
 picker.field.placeholder.year = YYYY
 picker.labels.action.apply = Apply
 picker.labels.action.cancel = Cancel
-picker.labels.action.clear = Clear
 picker.labels.action.today = Today
 picker.labels.clock.empty = No time selected
 picker.labels.clock.hours = hours