@okta/odyssey-react-mui 1.32.0 → 1.32.4

package/src/labs/DatePickers/DateTimePicker.test.tsx

@@ -1,70 +0,0 @@
-/*!
- * 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 { render, screen } from "@testing-library/react";
-import { DateTimePicker } from "./DateTimePicker.js";
-
-describe("DateTimePicker", () => {
-  afterEach(() => {
-    vi.clearAllMocks();
-  });
-
-  vitest.mock("react-i18next", () => ({
-    // this mock makes sure any components using the translate hook can use it without a warning being shown
-    useTranslation: () => {
-      return {
-        t: vi.fn((value: string) => value),
-        i18n: {
-          language: "en",
-        },
-      };
-    },
-    initReactI18next: {
-      type: "3rdParty",
-      init: () => {},
-    },
-  }));
-
-  it("displays the DateTimePicker", () => {
-    render(<DateTimePicker label="date time picker label" />);
-
-    const input = screen.getByLabelText("date time picker label");
-    expect(input).toBeInTheDocument();
-  });
-
-  it("displays the correct date and time when a value is passed in ", () => {
-    render(
-      <DateTimePicker
-        label="date time picker label"
-        value="2024-07-11T03:00:00.000Z"
-        timeZone="America/New_York"
-      />,
-    );
-
-    const input = screen.getByLabelText("date time picker label");
-    expect(input).toBeInTheDocument();
-    expect(input).toHaveDisplayValue("07/10/2024 11:00 PM");
-  });
-
-  it("displays the correct date and time when timezone is changed", () => {
-    render(
-      <DateTimePicker
-        label="date time picker label"
-        value="2024-07-11T03:00:00.000Z"
-        timeZone="America/Los_Angeles"
-      />,
-    );
-
-    const input = screen.getByLabelText("date time picker label");
-    expect(input).toHaveDisplayValue("07/10/2024 08:00 PM");
-  });
-});

package/src/labs/DatePickers/DateTimePicker.tsx

@@ -1,303 +0,0 @@
-/*!
- * Copyright (c) 2023-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 { memo, useCallback, useEffect, useMemo, useRef } from "react";
-import { useTranslation } from "react-i18next";
-import {
-  type DateTimePickerSlots,
-  DateTimePicker as MuiDateTimePicker,
-  DateTimePickerProps as MuiDateTimePickerProps,
-  DateTimePickerSlotProps,
-} from "@mui/x-date-pickers";
-import { DateTime } from "luxon";
-import styled from "@emotion/styled";
-
-import { Button } from "../../Buttons/index.js";
-import { DateFieldActionBar } from "../../DatePickers/DateFieldActionBar.js";
-import { DateFieldLocalizationProvider } from "../../DatePickers/DateFieldLocalizationProvider.js";
-import { TimeZonePicker } from "../../DatePickers/TimeZonePicker.js";
-import {
-  useOdysseyDateFields,
-  OdysseyDateFieldProps,
-} from "../../DatePickers/useOdysseyDateFields.js";
-import { DateTimeField, DateTimeFieldProps } from "./DateTimeField.js";
-import { dateTimePickerTheme } from "./dateTimePickerTheme.js";
-import { FieldComponentProps } from "../../FieldComponentProps.js";
-import { CalendarIcon, ClockIcon } from "../../icons.generated/index.js";
-import {
-  useOdysseyDesignTokens,
-  DesignTokens,
-} from "../../OdysseyDesignTokensContext.js";
-import { OdysseyThemeProvider } from "../../OdysseyThemeProvider.js";
-
-const DatePickerContainer = styled.div({
-  ".MuiFormControl-root": {
-    marginBlockEnd: 0,
-  },
-});
-
-const DatePickerWidthContainer = styled.div<{
-  odysseyDesignTokens: DesignTokens;
-}>(({ odysseyDesignTokens }) => ({
-  ".MuiInput-root": {
-    width: "100%",
-    maxWidth: odysseyDesignTokens.TypographyLineLengthMax,
-  },
-}));
-
-const TimeZonePickerContainer = styled("div", {
-  shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
-})<{ odysseyDesignTokens: DesignTokens }>(({ odysseyDesignTokens }) => ({
-  marginBlockStart: odysseyDesignTokens.Spacing3,
-}));
-
-type RenderDateTimeFieldProps = {
-  defaultValue: DateTimeFieldProps["defaultValue"];
-  value: DateTimeFieldProps["value"];
-} & MuiDateTimePickerProps<DateTime>;
-
-export type DateTimePickerProps = OdysseyDateFieldProps &
-  Pick<
-    FieldComponentProps,
-    | "errorMessage"
-    | "hint"
-    | "HintLinkComponent"
-    | "isDisabled"
-    | "isReadOnly"
-    | "isOptional"
-  >;
-
-const DateTimePicker = ({
-  defaultValue: defaultValueProp,
-  errorMessage,
-  hint,
-  HintLinkComponent,
-  isDateEnabled = () => true,
-  isDisabled,
-  isOptional,
-  isReadOnly,
-  isMonthEnabled = () => true,
-  isYearEnabled = () => true,
-  label,
-  minDate: minDateProp,
-  maxDate: maxDateProp,
-  onBlur,
-  onCalendarDateChange,
-  onInputChange: onInputChangeProp,
-  timeZone,
-  timeZonePickerLabel,
-  timeZoneOptions,
-  value: valueProp,
-}: DateTimePickerProps) => {
-  const { i18n, t } = useTranslation();
-  const inputRef = useRef<HTMLInputElement>(null);
-  const odysseyDesignTokens = useOdysseyDesignTokens();
-
-  const {
-    closeCalendar,
-    commonIcons,
-    defaultedLanguageCode,
-    formatDateTimeToUtcIsoDateString,
-    formatDayOfWeek,
-    inputValues,
-    internalTimeZone,
-    isOpen,
-    localeText,
-    minDate,
-    maxDate,
-    onInputChange,
-    onTimeZoneChange,
-    popperElement,
-    setPopperElement,
-    shouldDisableDate,
-    shouldDisableMonth,
-    shouldDisableYear,
-    toggleCalendarVisibility,
-  } = useOdysseyDateFields({
-    defaultValue: defaultValueProp,
-    errorMessage,
-    isDateEnabled,
-    isMonthEnabled,
-    isYearEnabled,
-    minDate: minDateProp,
-    maxDate: maxDateProp,
-    onInputChange: onInputChangeProp,
-    timeZone,
-    value: valueProp,
-  });
-
-  const { language } = i18n;
-  const containerRef = useRef<HTMLInputElement>(null);
-
-  useEffect(() => {
-    setPopperElement(containerRef.current);
-  }, [setPopperElement]);
-
-  const formatDateTimeToJsDateStringOnCalendarSelection = useCallback<
-    NonNullable<MuiDateTimePickerProps<DateTime>["onChange"]>
-  >(
-    (value) => {
-      if (value) {
-        const dateStringFromDateTime = formatDateTimeToUtcIsoDateString(value);
-
-        if (dateStringFromDateTime) {
-          onCalendarDateChange?.({
-            value: dateStringFromDateTime,
-            timeZone: internalTimeZone,
-          });
-        }
-      }
-    },
-    [formatDateTimeToUtcIsoDateString, internalTimeZone, onCalendarDateChange],
-  );
-
-  const renderDateTimeField = useCallback(
-    ({ defaultValue, inputRef, value }: RenderDateTimeFieldProps) => {
-      return (
-        <DateTimeField
-          defaultValue={defaultValue}
-          endAdornment={
-            <Button
-              ariaLabel={t("picker.labels.date.choose")}
-              label=""
-              onClick={toggleCalendarVisibility}
-              size="small"
-              startIcon={<commonIcons.CalendarIcon />}
-              variant="floating"
-            />
-          }
-          errorMessage={errorMessage}
-          hint={hint}
-          HintLinkComponent={HintLinkComponent}
-          inputRef={inputRef}
-          isDisabled={isDisabled}
-          isOptional={isOptional}
-          isReadOnly={isReadOnly}
-          label={label}
-          onBlur={onBlur}
-          minDate={minDate}
-          maxDate={maxDate}
-          onChange={onInputChange}
-          timezone={internalTimeZone}
-          value={value}
-        />
-      );
-    },
-    [
-      commonIcons,
-      errorMessage,
-      hint,
-      HintLinkComponent,
-      internalTimeZone,
-      isDisabled,
-      isOptional,
-      isReadOnly,
-      label,
-      onBlur,
-      onInputChange,
-      minDate,
-      maxDate,
-      t,
-      toggleCalendarVisibility,
-    ],
-  );
-
-  const slots = useMemo<DateTimePickerSlots<DateTime>>(
-    () => ({
-      actionBar: DateFieldActionBar,
-      field: (muiProps: RenderDateTimeFieldProps) =>
-        renderDateTimeField(muiProps),
-      leftArrowIcon: () => <commonIcons.ArrowLeftIcon />,
-      rightArrowIcon: () => <commonIcons.ArrowRightIcon />,
-      switchViewIcon: () => <commonIcons.ChevronDownIcon />,
-    }),
-    [commonIcons, renderDateTimeField],
-  );
-
-  const slotProps = useMemo<DateTimePickerSlotProps<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,
-      },
-      tabs: {
-        dateIcon: <CalendarIcon />,
-        timeIcon: <ClockIcon />,
-      },
-      toolbar: {
-        toolbarPlaceholder: "",
-      },
-    }),
-    [popperElement],
-  );
-
-  return (
-    <OdysseyThemeProvider themeOverride={dateTimePickerTheme}>
-      <DateFieldLocalizationProvider
-        defaultedLanguageCode={defaultedLanguageCode}
-        localeText={localeText}
-      >
-        <DatePickerContainer>
-          <DatePickerWidthContainer
-            odysseyDesignTokens={odysseyDesignTokens}
-            ref={containerRef}
-          >
-            <MuiDateTimePicker
-              dayOfWeekFormatter={formatDayOfWeek}
-              defaultValue={inputValues?.defaultValue}
-              disabled={isDisabled}
-              fixedWeekNumber={6}
-              inputRef={inputRef}
-              key={language}
-              label={label}
-              minDate={minDate}
-              maxDate={maxDate}
-              onChange={formatDateTimeToJsDateStringOnCalendarSelection}
-              onClose={closeCalendar}
-              open={isOpen}
-              readOnly={isReadOnly}
-              shouldDisableDate={shouldDisableDate}
-              shouldDisableMonth={shouldDisableMonth}
-              shouldDisableYear={shouldDisableYear}
-              slots={slots}
-              slotProps={slotProps}
-              timezone={internalTimeZone}
-              value={inputValues?.value}
-            />
-          </DatePickerWidthContainer>
-        </DatePickerContainer>
-        {timeZoneOptions && timeZonePickerLabel && (
-          <TimeZonePickerContainer odysseyDesignTokens={odysseyDesignTokens}>
-            <TimeZonePicker
-              label={timeZonePickerLabel}
-              onTimeZoneChange={onTimeZoneChange}
-              isReadOnly={isReadOnly}
-              timeZoneOptions={timeZoneOptions}
-              value={internalTimeZone}
-            />
-          </TimeZonePickerContainer>
-        )}
-      </DateFieldLocalizationProvider>
-    </OdysseyThemeProvider>
-  );
-};
-
-const MemoizedDateTimePicker = memo(DateTimePicker);
-MemoizedDateTimePicker.displayName = "DateTimePicker";
-
-export { MemoizedDateTimePicker as DateTimePicker };

package/src/labs/DatePickers/dateTimePickerTheme.ts

@@ -1,216 +0,0 @@
-/*!
- * Copyright (c) 2022-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 { CSSInterpolation } from "@mui/material/styles";
-import { deepmerge } from "@mui/utils";
-import { ThemeOptions } from "@mui/material";
-
-import {
-  datePickerTheme,
-  dateStyles,
-} from "../../DatePickers/datePickerTheme.js";
-
-const theme: ThemeOptions = {
-  components: {
-    MuiClock: {
-      styleOverrides: {
-        clock: ({ theme }) => ({
-          width: `calc(${theme.spacing(9)} * 4)`,
-          height: `calc(${theme.spacing(9)} * 4)`,
-          backgroundColor: theme.palette.grey[50],
-        }),
-        pin: ({ theme }) => ({
-          backgroundColor: theme.palette.primary.light,
-        }),
-      },
-    },
-    MuiClockPointer: {
-      styleOverrides: {
-        root: ({ theme }) => ({
-          backgroundColor: theme.palette.primary.light,
-        }),
-        thumb: ({ theme }) => ({
-          borderColor: theme.palette.primary.light,
-          backgroundColor: theme.palette.primary.main,
-        }),
-      },
-    },
-    MuiDateCalendar: {
-      styleOverrides: {
-        root: {
-          display: "block",
-          width: "100%",
-        },
-      },
-    },
-    MuiPickersArrowSwitcher: {
-      styleOverrides: {
-        button: ({ theme }) => ({
-          display: "flex",
-          margin: 0,
-          padding: theme.spacing(2),
-          color: theme.typography.body1.color,
-
-          "& + &": {
-            marginInlineStart: theme.spacing(2),
-          },
-
-          svg: {
-            display: "flex",
-          },
-        }),
-        spacer: ({ theme }) => ({
-          width: theme.spacing(1),
-        }),
-      },
-    },
-    MuiPickersLayout: {
-      styleOverrides: {
-        contentWrapper: ({ theme }) => ({
-          padding: theme.spacing(3),
-          gridTemplateColumns: "1fr 16px auto",
-        }),
-      },
-    },
-    MuiMultiSectionDigitalClockSection: {
-      styleOverrides: {
-        root: {
-          width: "auto",
-        },
-        item: ({ theme }) => [
-          dateStyles.default({ theme }),
-          {
-            margin: 0,
-            marginInline: theme.spacing(1),
-            "& + &": {
-              marginBlockStart: theme.spacing(1),
-            },
-            "&:hover": dateStyles.hover({ theme }),
-            "&:focus": dateStyles.focus({ theme }),
-
-            "&.Mui-selected, &.Mui-selected:focus": dateStyles.selected({
-              theme,
-            }),
-            "&.Mui-selected:hover": dateStyles.hoverSelected({ theme }),
-
-            "&.Mui-disabled": dateStyles.disabled({ theme }),
-          },
-        ],
-      },
-    },
-    MuiDateTimePickerToolbar: {
-      styleOverrides: {
-        root: ({ theme }) => ({
-          padding: theme.spacing(3),
-        }),
-        dateContainer: ({ theme }) => ({
-          flexDirection: "row-reverse",
-
-          button: {
-            "+ button": {
-              marginInlineEnd: theme.spacing(2),
-            },
-          },
-        }),
-        timeDigitsContainer: {
-          alignItems: "center",
-        },
-        ampmSelection: ({ theme }) => ({
-          margin: 0,
-          marginInlineStart: theme.spacing(3),
-
-          button: {
-            padding: theme.spacing(2),
-
-            "&:has(.Mui-selected)": {
-              backgroundColor: theme.palette.primary.main,
-
-              ".Mui-selected": {
-                color: theme.palette.common.white,
-                "&::after": {
-                  display: "none",
-                },
-              },
-            },
-          },
-        }),
-        separator: ({ theme }) => ({
-          ...theme.typography.h5,
-          marginBlock: 0,
-          marginInline: theme.spacing(1),
-        }),
-      },
-    },
-    MuiPickersToolbarButton: {
-      styleOverrides: {
-        root: ({ theme }) => ({
-          height: "auto",
-          padding: 0,
-          margin: 0,
-          border: 0,
-          borderRadius: theme.mixins.borderRadius,
-          backgroundColor: "transparent",
-          color: theme.typography.subtitle1.color,
-
-          "&:hover": {
-            backgroundColor: "transparent",
-          },
-
-          "& + &": {
-            marginInlineStart: 0,
-          },
-        }),
-      },
-    },
-    MuiPickersToolbarText: {
-      styleOverrides: {
-        root: ({ theme }) => ({
-          ...theme.typography.h5,
-          position: "relative",
-          margin: 0,
-          lineHeight: 1,
-          color: "inherit",
-
-          "&::after": {
-            position: "absolute",
-            left: 0,
-            bottom: 0,
-            width: "100%",
-            height: 2,
-            backgroundColor: "currentColor",
-            opacity: 0,
-            content: "''",
-            transition: "opacity 100ms, transform 200ms",
-          },
-
-          "&.Mui-selected": {
-            color: theme.typography.body1.color,
-
-            "&::after": {
-              transform: "translateY(2px)",
-              opacity: 1,
-            },
-          },
-        }),
-      },
-    },
-    MuiTimeClock: {
-      styleOverrides: {
-        arrowSwitcher: {
-          top: 0,
-          right: 0,
-        },
-      },
-    },
-  },
-};
-export const dateTimePickerTheme = deepmerge(datePickerTheme, theme);

package/src/labs/DatePickers/index.ts

@@ -1,13 +0,0 @@
-/*!
- * Copyright (c) 2022-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.
- */
-
-export * from "./DateTimePicker.js";