@okta/odyssey-react-mui 1.15.9 → 1.20.0

package/src/labs/DatePicker.tsx

@@ -10,49 +10,322 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { InputBase } from "@mui/material";
 import {
+  ChangeEvent,
+  ChangeEventHandler,
+  memo,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { useTranslation } from "react-i18next";
+import {
+  type DatePickerSlots,
   DatePicker as MuiDatePicker,
   DatePickerProps as MuiDatePickerProps,
+  LocalizationProvider,
+  PickersActionBarProps,
+  DatePickerSlotProps,
 } from "@mui/x-date-pickers";
-import { useCallback } from "react";
+import { DateTime } from "luxon";
+import { AdapterLuxon } from "@mui/x-date-pickers/AdapterLuxon";
+import { InputAdornment } from "@mui/material";
+import styled from "@emotion/styled";
+
+import { Button } from "../Button";
+import {
+  ArrowLeftIcon,
+  ArrowRightIcon,
+  CalendarIcon,
+  ChevronDownIcon,
+} from "../icons.generated";
+import { DateField, DateFieldProps } from "./DateField";
+import { datePickerTheme } from "./datePickerTheme";
+import { FieldComponentProps } from "../FieldComponentProps";
+import {
+  useOdysseyDesignTokens,
+  DesignTokens,
+} from "../OdysseyDesignTokensContext";
+import { OdysseyThemeProvider } from "../OdysseyThemeProvider";
+import { useDatePickerTranslations } from "./useDatePickerTranslations";
+
+const DatePickerContainer = styled.div({
+  display: "flex",
+
+  ".MuiFormControl-root": {
+    marginBlockEnd: 0,
+  },
+});
+
+const DatePickerWidthContainer = styled.div({
+  ".MuiInput-root": {
+    width: `${176 / 14}rem`,
+  },
+});
+
+const ActionContainer = styled.div<{ odysseyDesignTokens: DesignTokens }>(
+  ({ odysseyDesignTokens }) => ({
+    display: "flex",
+    justifyContent: "flex-end",
+    paddingInline: odysseyDesignTokens.Spacing4,
+    paddingBlockEnd: odysseyDesignTokens.Spacing4,
+  }),
+);
+
+const ActionBar = ({ actions, onAccept, onCancel }: PickersActionBarProps) => {
+  const { t } = useTranslation();
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+
+  // actions will be [] or ["accept", "cancel"]
+  if (actions && actions.length > 0) {
+    return (
+      <ActionContainer odysseyDesignTokens={odysseyDesignTokens}>
+        <Button
+          label={t("picker.labels.action.cancel")}
+          onClick={onCancel}
+          variant="floating"
+        />
+        <Button
+          label={t("picker.labels.action.apply")}
+          onClick={onAccept}
+          variant="primary"
+        />
+      </ActionContainer>
+    );
+  }
+
+  return null;
+};
+
+const MemoizedActionBar = memo(ActionBar);
+MemoizedActionBar.displayName = "ActionBar";
+
+const formatDateToDateTime = (date: Date) => DateTime.fromJSDate(date);
 
-export type DatePickerProps<TInputDate, TDate> = {
-  label: MuiDatePickerProps<TInputDate, TDate>["label"];
+const formatDayOfWeek = (date: DateTime) => date.toFormat("EEE");
+
+type RenderDateFieldProps = {
+  defaultValue: DateFieldProps["defaultValue"];
+  value: DateFieldProps["value"];
+} & MuiDatePickerProps<DateTime>;
+
+export type DatePickerProps = {
   /**
-   * If `true`, the `input` element is not required.
+   * Disable specific date(s).
+   *
+   * Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.
    */
-  isOptional?: boolean;
-  onChange: MuiDatePickerProps<TInputDate, TDate>["onChange"];
-  value: MuiDatePickerProps<TInputDate, TDate>["value"];
-};
+  isDateEnabled?: (date: Date) => boolean;
+  /**
+   * Disable specific month(s).
+   */
+  isMonthEnabled?: (date: Date) => boolean;
+  /**
+   * Disable specific year(s).
+   */
+  isYearEnabled?: (date: Date) => boolean;
+  /**
+   * The label for the `input` element.
+   */
+  label: string;
+  /**
+   * Callback fired when the a date is selected with the calendar.
+   */
+  onCalendarDateChange?: (value: Date) => void;
+  /**
+   * Callback fired when the date/text input changes.
+   */
+  onInputChange?: ChangeEventHandler<HTMLInputElement>;
+  value?: Date;
+} & Pick<FieldComponentProps, "errorMessage" | "hint" | "isDisabled"> &
+  Pick<MuiDatePickerProps<Date>, "defaultValue" | "minDate" | "maxDate">;
 
-export const DatePicker = <TInputDate, TDate>({
+const DatePicker = ({
+  defaultValue: defaultValueProp,
+  errorMessage,
+  hint,
+  isDateEnabled = () => true,
+  isDisabled,
+  isMonthEnabled = () => true,
+  isYearEnabled = () => true,
   label,
-  isOptional = false,
-  onChange,
-  value = null,
-}: DatePickerProps<TInputDate, TDate>) => {
-  const renderInput = useCallback(
-    // @ts-expect-error TEMP: This type aren't working after the upgrade, but they need to be fixed.
-    ({ InputProps, ...props }) => {
-      const combinedProps = {
-        ...InputProps,
-        ...props,
-      };
-
-      return <InputBase {...combinedProps} required={!isOptional} />;
+  minDate,
+  maxDate,
+  onCalendarDateChange,
+  onInputChange: onInputChangeProp,
+  value: valueProp,
+}: DatePickerProps) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [popperElement, setPopperElement] = useState<HTMLInputElement | null>();
+
+  const { i18n, t } = useTranslation();
+  const { language } = i18n;
+
+  const invalidLocales = ["ok_PL", "ok_SK"];
+  // In the Applitools env the language code is `en-us@posix`. Need to check for that
+  const isInvalidLocale =
+    invalidLocales.includes(language) || language.includes("@");
+
+  const containerRef = useRef<HTMLInputElement>(null);
+
+  const localeText = useDatePickerTranslations();
+
+  useEffect(() => {
+    setPopperElement(containerRef.current);
+  }, []);
+
+  const formatDateTimeToJsDateOnCalendarSelection = useCallback<
+    NonNullable<MuiDatePickerProps<DateTime>["onChange"]>
+  >(
+    (value) => {
+      if (value) {
+        const jsDateFromDateTime = new Date(value?.toJSDate());
+        onCalendarDateChange?.(jsDateFromDateTime);
+      }
     },
-    [isOptional],
+    [onCalendarDateChange],
+  );
+
+  const onInputChange = useCallback<
+    (event: ChangeEvent<HTMLInputElement>) => void
+  >((event) => onInputChangeProp?.(event), [onInputChangeProp]);
+
+  const toggleCalendarVisibility = useCallback(
+    () => setIsOpen(!isOpen),
+    [isOpen],
+  );
+
+  const shouldDisableDate = useCallback(
+    (date: DateTime) => !isDateEnabled(new Date(date?.toJSDate())) || false,
+    [isDateEnabled],
+  );
+
+  const shouldDisableMonth = useCallback(
+    (date: DateTime) => !isMonthEnabled(new Date(date?.toJSDate())) || false,
+    [isMonthEnabled],
   );
 
+  const shouldDisableYear = useCallback(
+    (date: DateTime) => !isYearEnabled(new Date(date?.toJSDate())) || false,
+    [isYearEnabled],
+  );
+
+  const renderDateField = useCallback(
+    ({ defaultValue, value }: RenderDateFieldProps) => (
+      <DateField
+        defaultValue={defaultValue}
+        endAdornment={
+          <InputAdornment position="end">
+            <Button
+              ariaLabel={t("picker.labels.date.choose")}
+              label=""
+              size="small"
+              startIcon={<CalendarIcon />}
+              variant="floating"
+              onClick={toggleCalendarVisibility}
+            />
+          </InputAdornment>
+        }
+        errorMessage={errorMessage}
+        hint={hint}
+        isDisabled={isDisabled}
+        label={label}
+        onChange={onInputChange}
+        value={value}
+      />
+    ),
+    [
+      errorMessage,
+      hint,
+      isDisabled,
+      label,
+      onInputChange,
+      t,
+      toggleCalendarVisibility,
+    ],
+  );
+
+  const resetIsOpen = useCallback(() => {
+    setIsOpen(false);
+  }, []);
+
+  const slots = useMemo<DatePickerSlots<DateTime>>(
+    () => ({
+      actionBar: MemoizedActionBar,
+      field: (muiProps) => renderDateField(muiProps),
+      leftArrowIcon: () => <ArrowLeftIcon />,
+      rightArrowIcon: () => <ArrowRightIcon />,
+      switchViewIcon: () => <ChevronDownIcon />,
+    }),
+    [renderDateField],
+  );
+
+  const slotProps = useMemo<DatePickerSlotProps<DateTime, false>>(
+    () => ({
+      actionBar: ({ wrapperVariant, onAccept, onCancel }) => ({
+        actions:
+          // This is the default behavior but felt more clear to pass them in explicitly
+          wrapperVariant === "desktop" ? [] : ["accept", "cancel"],
+        onAccept,
+        onCancel,
+      }),
+      popper: {
+        anchorEl: popperElement,
+      },
+
+      toolbar: {
+        toolbarPlaceholder: "",
+      },
+    }),
+    [popperElement],
+  );
+
+  const defaultedLanguageCode = isInvalidLocale
+    ? "en-US"
+    : language.replaceAll("_", "-");
+
   return (
-    <MuiDatePicker
-      label={label}
-      onChange={onChange}
-      // @ts-expect-error TEMP: This type aren't working after the upgrade, but they need to be fixed.
-      renderInput={renderInput}
-      value={value}
-    />
+    <OdysseyThemeProvider themeOverride={datePickerTheme}>
+      <LocalizationProvider
+        dateAdapter={AdapterLuxon}
+        adapterLocale={defaultedLanguageCode}
+        localeText={localeText}
+      >
+        <DatePickerContainer>
+          <DatePickerWidthContainer ref={containerRef}>
+            <MuiDatePicker
+              dayOfWeekFormatter={formatDayOfWeek}
+              defaultValue={
+                defaultValueProp
+                  ? formatDateToDateTime(defaultValueProp)
+                  : undefined
+              }
+              disabled={isDisabled}
+              fixedWeekNumber={6}
+              key={language}
+              label={label}
+              minDate={minDate ? formatDateToDateTime(minDate) : undefined}
+              maxDate={maxDate ? formatDateToDateTime(maxDate) : undefined}
+              onChange={formatDateTimeToJsDateOnCalendarSelection}
+              onClose={resetIsOpen}
+              open={isOpen}
+              shouldDisableDate={shouldDisableDate}
+              shouldDisableMonth={shouldDisableMonth}
+              shouldDisableYear={shouldDisableYear}
+              slots={slots}
+              slotProps={slotProps}
+              value={valueProp ? formatDateToDateTime(valueProp) : undefined}
+            />
+          </DatePickerWidthContainer>
+        </DatePickerContainer>
+      </LocalizationProvider>
+    </OdysseyThemeProvider>
   );
 };
+
+const MemoizedDatePicker = memo(DatePicker);
+MemoizedDatePicker.displayName = "DatePicker";
+
+export { MemoizedDatePicker as DatePicker };

package/src/labs/{DatePicker.types.ts → DatePicker.types.d.ts}

@@ -12,13 +12,3 @@
 
 // This has to be imported separately for theme types, so it's been separated out to make that clear.
 import "@mui/x-date-pickers/themeAugmentation";
-
-import { PickersComponentNameToClassKey } from "@mui/x-date-pickers/themeAugmentation";
-
-declare module "@mui/material/styles" {
-  interface ComponentNameToClassKey extends PickersComponentNameToClassKey {
-    PrivatePickersYear:
-      | PickersComponentNameToClassKey["PrivatePickersYear"]
-      | "button";
-  }
-}

package/src/labs/FileUpload.tsx

@@ -54,6 +54,7 @@ const BaseInputWrapper = styled.div({
 
 const InputContainer = styled(BaseInputWrapper)<{
   odysseyDesignTokens: DesignTokens;
+  hasError: boolean;
 }>(
   {
     display: "flex",
@@ -65,9 +66,11 @@ const InputContainer = styled(BaseInputWrapper)<{
       borderStyle: "solid",
     },
   },
-  ({ odysseyDesignTokens }) => ({
+  ({ hasError, odysseyDesignTokens }) => ({
     padding: `${odysseyDesignTokens.Spacing6} ${odysseyDesignTokens.Spacing3}`,
-    border: `1px dashed ${odysseyDesignTokens.HueNeutral300}`,
+    border: hasError
+      ? `1px solid ${odysseyDesignTokens.PaletteDangerMain}`
+      : `1px dashed ${odysseyDesignTokens.HueNeutral300}`,
     borderRadius: odysseyDesignTokens.BorderRadiusMain,
     transition: `border-color ${odysseyDesignTokens.TransitionTimingMain}, box-shadow ${odysseyDesignTokens.TransitionTimingMain}`,
 
@@ -101,6 +104,10 @@ const ButtonAndInfoContainer = styled.div({
   justifyContent: "center",
 });
 
+const CenterAlignedSupportText = styled.div({
+  textAlign: "center",
+});
+
 export type FileUploadProps = {
   /**
    * an array of file types the user is able to upload. @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept#unique_file_type_specifiers for examples
@@ -129,6 +136,7 @@ export type FileUploadProps = {
   | "HintLinkComponent"
   | "id"
   | "isDisabled"
+  | "isFullWidth"
   | "isOptional"
 >;
 
@@ -137,6 +145,7 @@ const FileUpload = ({
   errorMessage,
   id,
   isDisabled = false,
+  isFullWidth,
   isOptional,
   hint,
   HintLinkComponent,
@@ -174,7 +183,7 @@ const FileUpload = ({
   );
 
   const triggerFileInputClick = useCallback(() => {
-    inputRef.current?.focus();
+    inputRef.current?.click();
   }, [inputRef]);
 
   const removeFileFromFilesToUploadList = useCallback<(name: string) => void>(
@@ -194,7 +203,6 @@ const FileUpload = ({
       id,
       labelElementId,
     }: RenderFieldComponentProps) => {
-      const fileNames = filesToUpload.map((file) => file.name);
       const acceptedFileTypesAsString = acceptedFileTypes?.join(",");
 
       const Input = () => (
@@ -226,24 +234,24 @@ const FileUpload = ({
                 variant="secondary"
               />
             </BaseInputWrapper>
-            <FileUploadPreview
-              fileNames={fileNames}
-              onFileRemove={removeFileFromFilesToUploadList}
-              isDisabled={isDisabled}
-            />
           </>
         );
       }
 
       return (
         <>
-          <InputContainer odysseyDesignTokens={odysseyDesignTokens}>
+          <InputContainer
+            hasError={Boolean(errorMessage)}
+            odysseyDesignTokens={odysseyDesignTokens}
+          >
             <Input />
             <ButtonAndInfoContainer>
               {variant === "dragAndDropWithIcon" && <FileUploadIllustration />}
-              <Support color="textSecondary">
-                {t("fileupload.prompt.text")}
-              </Support>
+              <CenterAlignedSupportText>
+                <Support color="textSecondary">
+                  {t("fileupload.prompt.text")}
+                </Support>
+              </CenterAlignedSupportText>
               <Button
                 isDisabled={isDisabled}
                 label={t("fileupload.button.text")}
@@ -253,21 +261,15 @@ const FileUpload = ({
               />
             </ButtonAndInfoContainer>
           </InputContainer>
-          <FileUploadPreview
-            fileNames={fileNames}
-            onFileRemove={removeFileFromFilesToUploadList}
-            isDisabled={isDisabled}
-          />
         </>
       );
     },
     [
       acceptedFileTypes,
-      filesToUpload,
+      errorMessage,
       isDisabled,
       inputRef,
       odysseyDesignTokens,
-      removeFileFromFilesToUploadList,
       triggerFileInputClick,
       t,
       type,
@@ -286,11 +288,18 @@ const FileUpload = ({
         HintLinkComponent={HintLinkComponent}
         id={id}
         isDisabled={isDisabled}
-        isFullWidth
+        isFullWidth={isFullWidth && variant !== "button"}
         isOptional={isOptional}
         label={label}
         renderFieldComponent={renderFileInput}
       />
+      {filesToUpload.length > 0 && (
+        <FileUploadPreview
+          fileNames={filesToUpload.map((file) => file.name)}
+          onFileRemove={removeFileFromFilesToUploadList}
+          isDisabled={isDisabled}
+        />
+      )}
     </>
   );
 };

package/src/labs/FileUploadIllustration.tsx

@@ -21,7 +21,7 @@ import {
 const UploadIllustrationContainer = styled.div<{
   odysseyDesignTokens: DesignTokens;
 }>(({ odysseyDesignTokens }) => ({
-  marginBlockEnd: odysseyDesignTokens.Spacing2,
+  marginBlockEnd: odysseyDesignTokens.Spacing3,
   padding: odysseyDesignTokens.Spacing3,
   backgroundColor: odysseyDesignTokens.HueNeutral50,
   borderRadius: "50%",

package/src/labs/FileUploadPreview.tsx

@@ -130,6 +130,7 @@ const FileUploadPreview = ({
 
   return (
     <PreviewContainer
+      data-file-preview-container="true"
       isDisabled={isDisabled}
       odysseyDesignTokens={odysseyDesignTokens}
     >

package/src/labs/Layout.tsx

@@ -0,0 +1,85 @@
+/*!
+ * 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 { Children, ReactNode, memo } from "react";
+import styled from "@emotion/styled";
+
+import { Box } from "../Box";
+import {
+  DesignTokens,
+  useOdysseyDesignTokens,
+} from "../OdysseyDesignTokensContext";
+
+type SupportedRegionRatios =
+  | [1]
+  | [1, 1]
+  | [1, 2]
+  | [2, 1]
+  | [1, 3]
+  | [3, 1]
+  | [1, 1, 1]
+  | [1, 1, 1, 1];
+
+export type LayoutProps = {
+  /**
+   * The supported region ratios for the Grid. Each number is a fractional unit that is mapped to the 'fr' CSS unit.
+   * e.g. [2, 1] defines a 2/3, 1/3 layout and [1, 1, 1] defines a 1/3, 1/3, 1/3 layout
+   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout#the_fr_unit
+   */
+  regions: SupportedRegionRatios;
+  /**
+   * The content of the Grid. May be a `string` or any other `ReactNode` or array of `ReactNode`s.
+   */
+  children?: ReactNode;
+};
+
+interface LayoutContentProps {
+  odysseyDesignTokens: DesignTokens;
+  regions: string;
+}
+
+const LayoutContent = styled("div", {
+  shouldForwardProp: (prop) =>
+    !["odysseyDesignTokens", "regions"].includes(prop),
+})<LayoutContentProps>(({ odysseyDesignTokens, regions }) => ({
+  display: "grid",
+  gridTemplateColumns: regions,
+  gridColumnGap: odysseyDesignTokens.Spacing4,
+  columnGap: odysseyDesignTokens.Spacing4,
+
+  "& + &": {
+    marginBlockStart: odysseyDesignTokens.Spacing4,
+  },
+}));
+
+const Layout = ({ regions, children }: LayoutProps) => {
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+  const mappedRegions = regions
+    .map((region) => `minmax(0, ${region}fr)`)
+    .join(" ");
+
+  return (
+    <Box>
+      <LayoutContent
+        odysseyDesignTokens={odysseyDesignTokens}
+        regions={mappedRegions}
+      >
+        {Children.toArray(children).map((child) => child)}
+      </LayoutContent>
+    </Box>
+  );
+};
+
+const MemoizedLayout = memo(Layout);
+MemoizedLayout.displayName = "Layout";
+
+export { MemoizedLayout as Layout };