@okta/odyssey-react-mui 1.32.0 → 1.33.0

package/src/DatePickers/DateField.tsx

@@ -1,267 +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 {
-  FocusEventHandler,
-  memo,
-  useCallback,
-  useEffect,
-  useImperativeHandle,
-  useRef,
-  useState,
-} from "react";
-import { InputAdornment } from "@mui/material";
-import {
-  DateField as MuiDateField,
-  DateFieldProps as MuiDateFieldProps,
-  DateValidationError,
-} from "@mui/x-date-pickers";
-import { DateTime } from "luxon";
-import { useTranslation } from "react-i18next";
-
-import { Field, RenderFieldComponentProps } from "../Field.js";
-import { TextFieldProps } from "../TextField.js";
-
-export type DateFieldProps = {
-  onChange?: (value: string) => void;
-} & Pick<
-  MuiDateFieldProps<DateTime>,
-  "defaultValue" | "inputRef" | "minDate" | "maxDate" | "timezone" | "value"
-> &
-  Pick<
-    TextFieldProps,
-    | "endAdornment"
-    | "errorMessage"
-    | "hasInitialFocus"
-    | "hint"
-    | "HintLinkComponent"
-    | "id"
-    | "isDisabled"
-    | "isOptional"
-    | "isReadOnly"
-    | "label"
-    | "onBlur"
-    | "onFocus"
-  >;
-
-const useOdysseyDateError = () => {
-  const { t } = useTranslation();
-
-  return new Map<DateValidationError, string>([
-    ["invalidDate", t("picker.error.invalid")],
-    ["maxDate", t("picker.error.maxdate")],
-    ["minDate", t("picker.error.mindate")],
-  ]);
-};
-
-const formatDateTimeToUtcIsoDateString = (value: DateTime) =>
-  value.toUTC().toISO();
-
-const DateField = ({
-  defaultValue,
-  endAdornment,
-  errorMessage,
-  hasInitialFocus,
-  hint,
-  HintLinkComponent,
-  id: idOverride,
-  inputRef,
-  isDisabled = false,
-  isOptional = false,
-  isReadOnly,
-  label,
-  minDate,
-  maxDate,
-  onBlur,
-  onChange,
-  onFocus,
-  timezone,
-  value,
-}: DateFieldProps) => {
-  const errorMap = useOdysseyDateError();
-  const [displayedErrorMessage, setDisplayedErrorMessage] =
-    useState(errorMessage);
-
-  const internalValidationError = useRef<string | undefined>();
-  const localInputRef = useRef<HTMLInputElement>(null);
-
-  useImperativeHandle(inputRef, () => {
-    return {
-      focus: () => {
-        localInputRef.current?.focus();
-      },
-    };
-  }, []);
-
-  const checkMinMaxValidity = useCallback(
-    (value: DateTime) => {
-      const hasMinError = minDate && value.toUTC() < minDate.toUTC();
-      const hasMaxError = maxDate && value.toUTC() > maxDate.toUTC();
-
-      if (hasMinError || hasMaxError) {
-        if (hasMinError) {
-          setDisplayedErrorMessage(errorMap.get("minDate"));
-        }
-
-        if (hasMaxError) {
-          setDisplayedErrorMessage(errorMap.get("maxDate"));
-        }
-
-        return false;
-      }
-
-      return true;
-    },
-    [errorMap, minDate, maxDate],
-  );
-
-  useEffect(() => {
-    if (value) {
-      checkMinMaxValidity(value);
-    }
-
-    if (defaultValue) {
-      checkMinMaxValidity(defaultValue);
-    }
-  }, [checkMinMaxValidity, defaultValue, minDate, maxDate, value]);
-
-  const clearErrorMessages = useCallback(() => {
-    setDisplayedErrorMessage(undefined);
-    internalValidationError.current = undefined;
-  }, [internalValidationError, setDisplayedErrorMessage]);
-
-  const validateAndCallOnChange = useCallback<
-    NonNullable<MuiDateFieldProps<DateTime>["onChange"]>
-  >(
-    (value, validationContext) => {
-      clearErrorMessages();
-      const { validationError } = validationContext;
-      const hasEnteredFullYear = value?.year.toString().length === 4;
-
-      if (validationError) {
-        const odysseyValidationError = errorMap.get(validationError);
-
-        if (odysseyValidationError) {
-          internalValidationError.current = odysseyValidationError;
-
-          if (value?.isValid && hasEnteredFullYear) {
-            setDisplayedErrorMessage(odysseyValidationError);
-          }
-        }
-      }
-
-      if (value?.isValid && !validationError) {
-        const dateStringFromDateTime = formatDateTimeToUtcIsoDateString(value);
-
-        if (dateStringFromDateTime && checkMinMaxValidity(value)) {
-          onChange?.(dateStringFromDateTime);
-        }
-      }
-    },
-    [checkMinMaxValidity, clearErrorMessages, errorMap, onChange],
-  );
-
-  const checkFieldValidityAndSetError = useCallback<
-    FocusEventHandler<HTMLInputElement>
-  >(
-    (event) => {
-      if (internalValidationError?.current && !displayedErrorMessage) {
-        setDisplayedErrorMessage(internalValidationError.current);
-      }
-      onBlur?.(event);
-    },
-    [displayedErrorMessage, internalValidationError, onBlur],
-  );
-
-  const hasVisibleAdornment = !isReadOnly && !isDisabled;
-
-  const renderFieldComponent = useCallback(
-    ({
-      ariaDescribedBy,
-      errorMessageElementId,
-      id,
-      labelElementId,
-    }: RenderFieldComponentProps) => (
-      <MuiDateField
-        /* eslint-disable-next-line jsx-a11y/no-autofocus */
-        autoFocus={hasInitialFocus}
-        defaultValue={defaultValue}
-        disabled={isDisabled}
-        id={id}
-        inputProps={{
-          "aria-describedby": ariaDescribedBy,
-          "aria-errormessage": errorMessageElementId,
-          "aria-labelledby": labelElementId,
-        }}
-        InputProps={{
-          error: Boolean(displayedErrorMessage || errorMessage),
-          endAdornment: (
-            <>
-              {hasVisibleAdornment && (
-                <InputAdornment position="end">{endAdornment}</InputAdornment>
-              )}
-            </>
-          ),
-        }}
-        inputRef={localInputRef}
-        minDate={minDate}
-        maxDate={maxDate}
-        name={id}
-        onBlur={checkFieldValidityAndSetError}
-        onChange={validateAndCallOnChange}
-        onFocus={onFocus}
-        readOnly={isReadOnly}
-        timezone={timezone}
-        value={value}
-        variant="standard"
-      />
-    ),
-    [
-      checkFieldValidityAndSetError,
-      defaultValue,
-      displayedErrorMessage,
-      endAdornment,
-      errorMessage,
-      hasInitialFocus,
-      hasVisibleAdornment,
-      isDisabled,
-      localInputRef,
-      minDate,
-      maxDate,
-      onFocus,
-      isReadOnly,
-      timezone,
-      validateAndCallOnChange,
-      value,
-    ],
-  );
-
-  return (
-    <Field
-      errorMessage={displayedErrorMessage || errorMessage}
-      fieldType="single"
-      hasVisibleLabel
-      hint={hint}
-      HintLinkComponent={HintLinkComponent}
-      id={idOverride}
-      isDisabled={isDisabled}
-      isOptional={isOptional}
-      label={label}
-      renderFieldComponent={renderFieldComponent}
-    />
-  );
-};
-
-const MemoizedDateField = memo(DateField);
-MemoizedDateField.displayName = "DateField";
-
-export { MemoizedDateField as DateField };

package/src/DatePickers/DateFieldActionBar.tsx

@@ -1,65 +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 } from "react";
-import { useTranslation } from "react-i18next";
-import { PickersActionBarProps } from "@mui/x-date-pickers";
-import styled from "@emotion/styled";
-
-import { Button } from "../Buttons/index.js";
-import {
-  useOdysseyDesignTokens,
-  DesignTokens,
-} from "../OdysseyDesignTokensContext.js";
-
-const ActionContainer = styled.div<{ odysseyDesignTokens: DesignTokens }>(
-  ({ odysseyDesignTokens }) => ({
-    display: "flex",
-    justifyContent: "flex-end",
-    paddingInline: odysseyDesignTokens.Spacing4,
-    paddingBlockEnd: odysseyDesignTokens.Spacing4,
-  }),
-);
-
-const DateFieldActionBar = ({
-  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 MemoizedDateFieldActionBar = memo(DateFieldActionBar);
-MemoizedDateFieldActionBar.displayName = "DateFieldActionBar";
-
-export { MemoizedDateFieldActionBar as DateFieldActionBar };

package/src/DatePickers/DateFieldLocalizationProvider.tsx

@@ -1,46 +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, PropsWithChildren } from "react";
-import { LocalizationProvider } from "@mui/x-date-pickers";
-import { AdapterLuxon } from "@mui/x-date-pickers/AdapterLuxon";
-
-import { DateFieldsTranslations } from "./useDateFieldsTranslations.js";
-
-type DateFieldLocalizationProviderProps = {
-  localeText: DateFieldsTranslations;
-  defaultedLanguageCode: string;
-};
-
-const DateFieldLocalizationProvider = ({
-  children,
-  defaultedLanguageCode,
-  localeText,
-}: PropsWithChildren<DateFieldLocalizationProviderProps>) => {
-  return (
-    <LocalizationProvider
-      dateAdapter={AdapterLuxon}
-      adapterLocale={defaultedLanguageCode}
-      localeText={localeText}
-    >
-      {children}
-    </LocalizationProvider>
-  );
-};
-
-const MemoizedDateFieldLocalizationProvider = memo(
-  DateFieldLocalizationProvider,
-);
-MemoizedDateFieldLocalizationProvider.displayName =
-  "DateFieldLocalizationProvider";
-
-export { MemoizedDateFieldLocalizationProvider as DateFieldLocalizationProvider };

package/src/DatePickers/DatePicker.test.tsx

@@ -1,66 +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 { DatePicker } from "./DatePicker.js";
-
-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((string: string) => string),
-      i18n: {
-        language: "en",
-      },
-    };
-  },
-  initReactI18next: {
-    type: "3rdParty",
-    init: () => {},
-  },
-}));
-
-describe("DateTimePicker", () => {
-  it("displays the DateTimePicker", () => {
-    render(<DatePicker label="date time picker label" />);
-
-    const input = screen.getByLabelText("date time picker label");
-    expect(input).toBeInTheDocument();
-  });
-
-  it("displays the correct date when a value is passed in ", () => {
-    render(
-      <DatePicker
-        label="date time picker label"
-        value="2024-07-21T03:00:00.000Z"
-        timeZone="America/New_York"
-      />,
-    );
-
-    const input = screen.getByLabelText("date time picker label");
-    expect(input).toBeInTheDocument();
-    expect(input).toHaveDisplayValue("07/20/2024");
-  });
-
-  it("displays the correct date when timezone is changed", () => {
-    render(
-      <DatePicker
-        label="date time picker label"
-        value="2024-07-21T03:00:00.000Z"
-        timeZone="Asia/Hong_Kong"
-      />,
-    );
-
-    const input = screen.getByLabelText("date time picker label");
-    expect(input).toHaveDisplayValue("07/21/2024");
-  });
-});