@okta/odyssey-react-mui 1.28.1 → 1.29.0

package/src/labs/DatePickers/DateTimePicker.tsx

@@ -0,0 +1,303 @@
+/*!
+ * 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";
+import { DateFieldActionBar } from "./DateFieldActionBar";
+import { DateFieldLocalizationProvider } from "./DateFieldLocalizationProvider";
+import { DateTimeField, DateTimeFieldProps } from "./DateTimeField";
+import { dateTimePickerTheme } from "./dateTimePickerTheme";
+import { FieldComponentProps } from "../../FieldComponentProps";
+import { CalendarIcon, ClockIcon } from "../../icons.generated";
+import {
+  useOdysseyDesignTokens,
+  DesignTokens,
+} from "../../OdysseyDesignTokensContext";
+import { OdysseyThemeProvider } from "../../OdysseyThemeProvider";
+import { TimeZonePicker } from "../TimeZonePicker";
+
+import {
+  useOdysseyDateFields,
+  OdysseyDateFieldProps,
+} from "./useOdysseyDateFields";
+
+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 }: { odysseyDesignTokens: DesignTokens }) => ({
+  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) => 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/{datePickerTheme.tsx → DatePickers/datePickerTheme.tsx}

@@ -11,7 +11,7 @@
  */
 
 import { CSSInterpolation } from "@mui/material/styles";
-import { createOdysseyMuiTheme } from "../theme";
+import { createOdysseyMuiTheme } from "../../theme";
 import { ThemeOptions } from "@mui/material";
 import * as odysseyTokens from "@okta/odyssey-design-tokens";
 
@@ -27,7 +27,7 @@ type ThemeStyles = ({
 
 type StateStyles = Record<string, ThemeStyles>;
 
-const dateStyles: StateStyles = {
+export const dateStyles: StateStyles = {
   default: ({ theme }) => ({
     color: theme.palette.text.primary,
   }),

package/src/labs/DatePickers/dateTimePickerTheme.ts

@@ -0,0 +1,213 @@
+/*!
+ * 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 "./datePickerTheme";
+
+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

@@ -0,0 +1,15 @@
+/*!
+ * 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 "./DatePicker";
+export * from "./DateTimePicker";
+export * from "./datePickerTheme";