@okta/odyssey-contribution-tooling 1.52.0 → 1.53.0

package/dist/esm/DatePickers/useDateFieldsTranslations.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDateFieldsTranslations.js","names":["useTranslation","useDateFieldsTranslations","t","calendarViewSwitchingButtonAriaLabel","view","calendarWeekNumberHeaderLabel","calendarWeekNumberHeaderText","calendarWeekNumberAriaLabelText","calendarWeekNumberText","cancelButtonLabel","clearButtonLabel","clockLabelText","time","adapter","format","datePickerToolbarTitle","dateRangePickerToolbarTitle","dateTableLabel","dateTimePickerToolbarTitle","day","empty","end","endDate","endTime","fieldClearLabel","fieldDayPlaceholder","fieldMonthPlaceholder","fieldYearPlaceholder","fieldHoursPlaceholder","fieldMinutesPlaceholder","fieldSecondsPlaceholder","fieldMeridiemPlaceholder","fieldWeekDayPlaceholder","hours","hoursClockNumberText","meridiem","minutes","minutesClockNumberText","month","nextMonth","okButtonLabel","openDatePickerDialogue","value","utils","isValid","openNextView","openPreviousView","openTimePickerDialogue","previousMonth","seconds","secondsClockNumberText","selectViewText","start","startDate","startTime","todayButtonLabel","timePickerToolbarTitle","timeTableLabel","weekDay","year"],"sources":["../../../src/DatePickers/useDateFieldsTranslations.ts"],"sourcesContent":["/*!\n * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { PickersLocaleText } from \"@mui/x-date-pickers\";\nimport { DateTime } from \"luxon\";\n\nimport { useTranslation } from \"../i18n.generated/i18n.js\";\n\nexport type DateFieldsTranslations = PickersLocaleText<DateTime>;\n\nexport const useDateFieldsTranslations = (): DateFieldsTranslations => {\n  const { t } = useTranslation();\n\n  return {\n    calendarViewSwitchingButtonAriaLabel: (view) =>\n      view === \"year\"\n        ? `${t(\"picker.view.navigation.switch.calendarview\")}`\n        : `${t(\"picker.view.navigation.switch.yearview\")}`,\n    // not translated because we aren't using it\n    calendarWeekNumberHeaderLabel: \"\",\n    calendarWeekNumberHeaderText: \"\",\n    calendarWeekNumberAriaLabelText: () => \"\",\n    calendarWeekNumberText: () => \"\",\n\n    cancelButtonLabel: `${t(\"picker.labels.action.cancel\")}`,\n    clearButtonLabel: `${t(\"clear.text\")}`,\n    clockLabelText: (view, time, adapter) =>\n      `${t(\"picker.labels.select\")} ${view}. ${\n        time === null\n          ? `${t(\"picker.labels.clock.empty\")}`\n          : `${t(\"picker.labels.clock.selected\")} ${adapter.format(time, \"fullTime\")}`\n      }`,\n    datePickerToolbarTitle: `${t(\"picker.date.toolbar.title\")}`,\n    dateRangePickerToolbarTitle: `${t(\"picker.daterange.toolbar.title\")}`,\n    dateTableLabel: `${t(\"picker.labels.table.date\")}`,\n    dateTimePickerToolbarTitle: `${t(\"picker.datetime.toolbar.title\")}`,\n    day: `${t(\"picker.view.name.day\")}`,\n    empty: `${t(\"picker.labels.empty\")}`,\n    end: `${t(\"picker.labels.range.end\")}`,\n    endDate: `${t(\"picker.labels.range.enddate\")}`,\n    endTime: `${t(\"picker.labels.range.endtime\")}`,\n    fieldClearLabel: `${t(\"picker.labels.field.clear\")}`,\n    fieldDayPlaceholder: () => `${t(\"picker.field.placeholder.day\")}`,\n    fieldMonthPlaceholder: () => `${t(\"picker.field.placeholder.month\")}`,\n    fieldYearPlaceholder: () => `${t(\"picker.field.placeholder.year\")}`,\n    fieldHoursPlaceholder: () => `${t(\"picker.field.placeholder.hours\")}`,\n    fieldMinutesPlaceholder: () => `${t(\"picker.field.placeholder.minutes\")}`,\n    fieldSecondsPlaceholder: () => `${t(\"picker.field.placeholder.seconds\")}`,\n    fieldMeridiemPlaceholder: () => `${t(\"picker.field.placeholder.meridiem\")}`,\n    // not translated because we aren't using it\n    fieldWeekDayPlaceholder: () => \"\",\n    hours: `${t(\"picker.view.name.hours\")}`,\n    hoursClockNumberText: (hours) =>\n      `${hours} ${t(\"picker.labels.clock.hours\")}`,\n    meridiem: `${t(\"picker.view.name.meridiem\")}`,\n    minutes: `${t(\"picker.view.name.minutes\")}`,\n    minutesClockNumberText: (minutes) =>\n      `${minutes} ${t(\"picker.labels.clock.minutes\")}`,\n    month: `${t(\"picker.view.name.month\")}`,\n    nextMonth: `${t(\"picker.calendar.navigation.nextmonth\")}`,\n    okButtonLabel: `${t(\"picker.labels.action.apply\")}`,\n    openDatePickerDialogue: (value, utils) =>\n      value !== null && utils.isValid(value)\n        ? `${t(\"picker.labels.date.choose\")}, ${t(\"picker.labels.date.selected\")} ${utils.format(value, \"fullDate\")}`\n        : `${t(\"picker.labels.date.choose\")}`,\n    openNextView: `${t(\"picker.view.navigation.open.nextview\")}`,\n    openPreviousView: `${t(\"picker.view.navigation.open.previousview\")}`,\n    openTimePickerDialogue: (value, utils) =>\n      value !== null && utils.isValid(value)\n        ? `${t(\"picker.labels.time.choose\")}, ${t(\"picker.labels.time.selected\")} ${utils.format(value, \"fullTime\")}`\n        : `${t(\"picker.labels.time.choose\")}`,\n    previousMonth: `${t(\"picker.calendar.navigation.previousmonth\")}`,\n    seconds: `${t(\"picker.view.name.seconds\")}`,\n    secondsClockNumberText: (seconds) =>\n      `${seconds} ${t(\"picker.labels.clock.seconds\")}`,\n    selectViewText: (view) => `${t(\"picker.labels.select\")} ${view}`,\n    start: `${t(\"picker.labels.range.start\")}`,\n    startDate: `${t(\"picker.labels.range.startdate\")}`,\n    startTime: `${t(\"picker.labels.range.starttime\")}`,\n    todayButtonLabel: `${t(\"picker.labels.action.today\")}`,\n    timePickerToolbarTitle: `${t(\"picker.time.toolbar.title\")}`,\n    timeTableLabel: `${t(\"picker.labels.table.time\")}`,\n    weekDay: `${t(\"picker.view.name.weekday\")}`,\n    year: `${t(\"picker.view.name.year\")}`,\n  };\n};\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/DatePickers/useOdysseyDateFields.js

@@ -0,0 +1,134 @@
+/*!
+ * 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 { DateTime } from "luxon";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useTranslation } from "../i18n.generated/i18n.js";
+import { ArrowLeftIcon, ArrowRightIcon, CalendarIcon, ChevronDownIcon } from "../icons.generated/index.js";
+import { ComponentControlledState, getControlState } from "../inputUtils.js";
+import { useDateFieldsTranslations } from "./useDateFieldsTranslations.js";
+const {
+  CONTROLLED
+} = ComponentControlledState;
+const isValidDateTime = dateTime => dateTime.isValid;
+const utcDateTimeFromIsoString = dateString => DateTime.fromISO(dateString).toUTC();
+export const useOdysseyDateFields = ({
+  defaultValue,
+  isDateEnabled = () => true,
+  isMonthEnabled = () => true,
+  isYearEnabled = () => true,
+  minDate: minDateProp,
+  maxDate: maxDateProp,
+  onInputChange: onInputChangeProp,
+  timeZone = "system",
+  value
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [popperElement, setPopperElement] = useState();
+  const [internalTimeZone, setInternalTimeZone] = useState(timeZone);
+  const internalValueRef = useRef(null);
+  const [validationDateRanges, setValidationDateRanges] = useState({
+    minDate: undefined,
+    maxDate: undefined
+  });
+  useEffect(() => {
+    const minDate = minDateProp ? DateTime.fromISO(minDateProp) : undefined;
+    const maxDate = maxDateProp ? DateTime.fromISO(maxDateProp) : undefined;
+    setValidationDateRanges({
+      minDate: minDate && isValidDateTime(minDate) ? minDate.startOf("day") : undefined,
+      maxDate: maxDate && isValidDateTime(maxDate) ? maxDate.startOf("day") : undefined
+    });
+  }, [minDateProp, maxDateProp]);
+  const {
+    i18n
+  } = useTranslation();
+  const {
+    language
+  } = i18n;
+  const invalidLocales = ["ok_PL", "ok_SK"];
+  const isInvalidLocale = invalidLocales.includes(language) || language.includes("@");
+  const localeText = useDateFieldsTranslations();
+  const controlledStateRef = useRef(getControlState({
+    controlledValue: value,
+    uncontrolledValue: defaultValue
+  }));
+  const defaultedLanguageCode = isInvalidLocale ? "en-US" : language.replaceAll("_", "-");
+  const isValidTimeZone = useCallback(timeZone => DateTime.local().setZone(timeZone).isValid, []);
+  const formatDateTimeToUtcIsoDateString = useCallback(value => value.toUTC().toISO() || undefined, []);
+  const shouldDisableDate = useCallback(date => !isDateEnabled(new Date(date?.toJSDate())) || false, [isDateEnabled]);
+  const shouldDisableMonth = useCallback(date => !isMonthEnabled(new Date(date?.toJSDate())) || false, [isMonthEnabled]);
+  const shouldDisableYear = useCallback(date => !isYearEnabled(new Date(date?.toJSDate())) || false, [isYearEnabled]);
+  const inputValues = useMemo(() => {
+    if (value && controlledStateRef.current === CONTROLLED) {
+      const valueAsUTCDateTime = utcDateTimeFromIsoString(value);
+      if (isValidDateTime(valueAsUTCDateTime)) {
+        return {
+          value: valueAsUTCDateTime
+        };
+      }
+    }
+    if (defaultValue) {
+      const defaultValueAsUTCDateTime = utcDateTimeFromIsoString(defaultValue);
+      if (isValidDateTime(defaultValueAsUTCDateTime)) {
+        return {
+          defaultValue: defaultValueAsUTCDateTime
+        };
+      }
+    }
+    return null;
+  }, [defaultValue, value]);
+  const onTimeZoneChange = useCallback(timeZone => {
+    if (timeZone && isValidTimeZone(timeZone)) {
+      setInternalTimeZone(timeZone);
+    }
+  }, [isValidTimeZone, setInternalTimeZone]);
+  const toggleCalendarVisibility = useCallback(() => setIsOpen(!isOpen), [isOpen, setIsOpen]);
+  const closeCalendar = useCallback(() => {
+    setIsOpen(false);
+  }, [setIsOpen]);
+  const formatDayOfWeek = date => date.toFormat("EEE");
+  const onInputChange = useCallback(value => {
+    onInputChangeProp?.(value);
+  }, [onInputChangeProp]);
+  const commonIcons = {
+    ArrowLeftIcon: ArrowLeftIcon,
+    ArrowRightIcon: ArrowRightIcon,
+    CalendarIcon: CalendarIcon,
+    ChevronDownIcon: ChevronDownIcon
+  };
+  return {
+    closeCalendar,
+    commonIcons,
+    defaultedLanguageCode,
+    formatDateTimeToUtcIsoDateString,
+    formatDayOfWeek,
+    inputValues,
+    internalTimeZone,
+    internalValueRef,
+    isOpen,
+    isValidTimeZone,
+    localeText,
+    maxDate: validationDateRanges.maxDate,
+    minDate: validationDateRanges.minDate,
+    popperElement,
+    onInputChange,
+    onTimeZoneChange,
+    setInternalTimeZone,
+    setIsOpen,
+    setPopperElement,
+    shouldDisableDate,
+    shouldDisableMonth,
+    shouldDisableYear,
+    toggleCalendarVisibility
+  };
+};
+//# sourceMappingURL=useOdysseyDateFields.js.map

package/dist/esm/DatePickers/useOdysseyDateFields.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useOdysseyDateFields.js","names":["DateTime","useCallback","useEffect","useMemo","useRef","useState","useTranslation","ArrowLeftIcon","ArrowRightIcon","CalendarIcon","ChevronDownIcon","ComponentControlledState","getControlState","useDateFieldsTranslations","CONTROLLED","isValidDateTime","dateTime","isValid","utcDateTimeFromIsoString","dateString","fromISO","toUTC","useOdysseyDateFields","defaultValue","isDateEnabled","isMonthEnabled","isYearEnabled","minDate","minDateProp","maxDate","maxDateProp","onInputChange","onInputChangeProp","timeZone","value","isOpen","setIsOpen","popperElement","setPopperElement","internalTimeZone","setInternalTimeZone","internalValueRef","validationDateRanges","setValidationDateRanges","undefined","startOf","i18n","language","invalidLocales","isInvalidLocale","includes","localeText","controlledStateRef","controlledValue","uncontrolledValue","defaultedLanguageCode","replaceAll","isValidTimeZone","local","setZone","formatDateTimeToUtcIsoDateString","toISO","shouldDisableDate","date","Date","toJSDate","shouldDisableMonth","shouldDisableYear","inputValues","current","valueAsUTCDateTime","defaultValueAsUTCDateTime","onTimeZoneChange","toggleCalendarVisibility","closeCalendar","formatDayOfWeek","toFormat","commonIcons"],"sources":["../../../src/DatePickers/useOdysseyDateFields.ts"],"sourcesContent":["/*!\n * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { DateTime } from \"luxon\";\nimport {\n  FocusEventHandler,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { FieldComponentProps } from \"../FieldComponentProps.js\";\nimport { useTranslation } from \"../i18n.generated/i18n.js\";\nimport {\n  ArrowLeftIcon,\n  ArrowRightIcon,\n  CalendarIcon,\n  ChevronDownIcon,\n} from \"../icons.generated/index.js\";\nimport { ComponentControlledState, getControlState } from \"../inputUtils.js\";\nimport { TimeZoneOption, TimeZonePickerProps } from \"./TimeZonePicker.js\";\nimport { useDateFieldsTranslations } from \"./useDateFieldsTranslations.js\";\n\nconst { CONTROLLED } = ComponentControlledState;\n\nconst isValidDateTime = (dateTime: DateTime) => dateTime.isValid;\n\nconst utcDateTimeFromIsoString = (dateString: string) =>\n  DateTime.fromISO(dateString).toUTC();\n\nexport type OdysseyDateFieldProps = {\n  /**\n   * default value when uncontrolled.\n   *\n   * NOTE: Must be a date string in ISO format\n   */\n  defaultValue?: string;\n  /**\n   * Disable specific date(s).\n   *\n   * 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.\n   */\n  isDateEnabled?: (date: Date) => boolean;\n  /**\n   * Disable specific month(s).\n   */\n  isMonthEnabled?: (date: Date) => boolean;\n  /**\n   * Disable specific year(s).\n   */\n  isYearEnabled?: (date: Date) => boolean;\n  /**\n   * The label for the `input` element.\n   */\n  label: string;\n  /**\n   * Maximum date allowed.\n   *\n   * NOTE: If not a valid date string in ISO format, `maxDate` will not apply\n   */\n  maxDate?: string;\n  /**\n   * Minimum date allowed.\n   *\n   * NOTE: If not a valid date string in ISO format, `minDate` will not apply\n   */\n  minDate?: string;\n  /**\n   * Callback fired when the a date field loses focus\n   */\n  onBlur?: FocusEventHandler<HTMLInputElement>;\n  /**\n   * Callback fired when the a date is selected with the calendar.\n   */\n  onCalendarDateChange?: ({\n    value,\n    timeZone,\n  }: {\n    timeZone: string;\n    value: string | undefined;\n  }) => void;\n  /**\n   * Callback fired when the date/text input changes.\n   */\n  onInputChange?: (value: string) => void;\n  /**\n   * a default timezone for the picker\n   */\n  timeZone?: string;\n  /**\n   * If provided, a `TimeZonePicker` will be rendered below the DatePicker. These options will populate as the Autocomplete options\n   */\n  timeZoneOptions?: TimeZoneOption[];\n  /**\n   * label for `TimeZonePicker`\n   */\n  timeZonePickerLabel?: TimeZonePickerProps[\"label\"];\n  /**\n   * value when controlled.\n   *\n   * NOTE: Must be a date string in ISO format or it will not be applied\n   */\n  value?: string;\n};\n\ntype FormatDateTimeToUtcIsoDateString = (value: DateTime) => string | undefined;\n\ntype ValidationDateRanges = {\n  maxDate?: DateTime;\n  minDate?: DateTime;\n};\n\nexport const useOdysseyDateFields = ({\n  defaultValue,\n  isDateEnabled = () => true,\n  isMonthEnabled = () => true,\n  isYearEnabled = () => true,\n  minDate: minDateProp,\n  maxDate: maxDateProp,\n  onInputChange: onInputChangeProp,\n  timeZone = \"system\",\n  value,\n}: Pick<\n  OdysseyDateFieldProps,\n  | \"defaultValue\"\n  | \"isDateEnabled\"\n  | \"isMonthEnabled\"\n  | \"isYearEnabled\"\n  | \"minDate\"\n  | \"maxDate\"\n  | \"onInputChange\"\n  | \"timeZone\"\n  | \"value\"\n> &\n  Pick<FieldComponentProps, \"errorMessage\">) => {\n  const [isOpen, setIsOpen] = useState(false);\n  const [popperElement, setPopperElement] = useState<HTMLInputElement | null>();\n  const [internalTimeZone, setInternalTimeZone] = useState(timeZone);\n\n  const internalValueRef = useRef<DateTime | null>(null);\n\n  const [validationDateRanges, setValidationDateRanges] =\n    useState<ValidationDateRanges>({\n      minDate: undefined,\n      maxDate: undefined,\n    });\n\n  useEffect(() => {\n    const minDate = minDateProp ? DateTime.fromISO(minDateProp) : undefined;\n    const maxDate = maxDateProp ? DateTime.fromISO(maxDateProp) : undefined;\n\n    setValidationDateRanges({\n      minDate:\n        minDate && isValidDateTime(minDate)\n          ? minDate.startOf(\"day\")\n          : undefined,\n      maxDate:\n        maxDate && isValidDateTime(maxDate)\n          ? maxDate.startOf(\"day\")\n          : undefined,\n    });\n  }, [minDateProp, maxDateProp]);\n\n  const { i18n } = useTranslation();\n  const { language } = i18n;\n\n  const invalidLocales = [\"ok_PL\", \"ok_SK\"];\n  // In the Applitools env the language code is `en-us@posix`. Need to check for that\n  const isInvalidLocale =\n    invalidLocales.includes(language) || language.includes(\"@\");\n\n  const localeText = useDateFieldsTranslations();\n\n  const controlledStateRef = useRef(\n    getControlState({\n      controlledValue: value,\n      uncontrolledValue: defaultValue,\n    }),\n  );\n\n  const defaultedLanguageCode = isInvalidLocale\n    ? \"en-US\"\n    : language.replaceAll(\"_\", \"-\");\n\n  const isValidTimeZone = useCallback(\n    (timeZone: string) => DateTime.local().setZone(timeZone).isValid,\n    [],\n  );\n\n  const formatDateTimeToUtcIsoDateString =\n    useCallback<FormatDateTimeToUtcIsoDateString>(\n      (value) => value.toUTC().toISO() || undefined,\n      [],\n    );\n\n  const shouldDisableDate = useCallback(\n    (date: DateTime) => !isDateEnabled(new Date(date?.toJSDate())) || false,\n    [isDateEnabled],\n  );\n\n  const shouldDisableMonth = useCallback(\n    (date: DateTime) => !isMonthEnabled(new Date(date?.toJSDate())) || false,\n    [isMonthEnabled],\n  );\n\n  const shouldDisableYear = useCallback(\n    (date: DateTime) => !isYearEnabled(new Date(date?.toJSDate())) || false,\n    [isYearEnabled],\n  );\n\n  const inputValues = useMemo(() => {\n    if (value && controlledStateRef.current === CONTROLLED) {\n      const valueAsUTCDateTime = utcDateTimeFromIsoString(value);\n\n      if (isValidDateTime(valueAsUTCDateTime)) {\n        return {\n          value: valueAsUTCDateTime,\n        };\n      }\n    }\n\n    if (defaultValue) {\n      const defaultValueAsUTCDateTime = utcDateTimeFromIsoString(defaultValue);\n\n      if (isValidDateTime(defaultValueAsUTCDateTime)) {\n        return {\n          defaultValue: defaultValueAsUTCDateTime,\n        };\n      }\n    }\n\n    return null;\n  }, [defaultValue, value]);\n\n  const onTimeZoneChange = useCallback(\n    (timeZone: string | undefined) => {\n      if (timeZone && isValidTimeZone(timeZone)) {\n        setInternalTimeZone(timeZone);\n      }\n    },\n    [isValidTimeZone, setInternalTimeZone],\n  );\n\n  const toggleCalendarVisibility = useCallback(\n    () => setIsOpen(!isOpen),\n    [isOpen, setIsOpen],\n  );\n\n  const closeCalendar = useCallback(() => {\n    setIsOpen(false);\n  }, [setIsOpen]);\n\n  const formatDayOfWeek = (date: DateTime) => date.toFormat(\"EEE\");\n\n  const onInputChange = useCallback<(value: string) => void>(\n    (value) => {\n      onInputChangeProp?.(value);\n    },\n    [onInputChangeProp],\n  );\n\n  const commonIcons = {\n    ArrowLeftIcon: ArrowLeftIcon,\n    ArrowRightIcon: ArrowRightIcon,\n    CalendarIcon: CalendarIcon,\n    ChevronDownIcon: ChevronDownIcon,\n  };\n\n  return {\n    closeCalendar,\n    commonIcons,\n    defaultedLanguageCode,\n    formatDateTimeToUtcIsoDateString,\n    formatDayOfWeek,\n    inputValues,\n    internalTimeZone,\n    internalValueRef,\n    isOpen,\n    isValidTimeZone,\n    localeText,\n    maxDate: validationDateRanges.maxDate,\n    minDate: validationDateRanges.minDate,\n    popperElement,\n    onInputChange,\n    onTimeZoneChange,\n    setInternalTimeZone,\n    setIsOpen,\n    setPopperElement,\n    shouldDisableDate,\n    shouldDisableMonth,\n    shouldDisableYear,\n    toggleCalendarVisibility,\n  };\n};\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/Dialog.js

@@ -0,0 +1,112 @@
+import _Dialog from "@mui/material/Dialog";
+import _DialogActions from "@mui/material/DialogActions";
+import _DialogContent from "@mui/material/DialogContent";
+import _DialogTitle from "@mui/material/DialogTitle";
+import _DialogContentText from "@mui/material/DialogContentText";
+/*!
+ * 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 { cloneElement, memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Button } from "./Buttons/Button.js";
+import { FullScreenOverlay } from "./FullScreenOverlay.js";
+import { useTranslation } from "./i18n.generated/i18n.js";
+import { CloseIcon } from "./icons.generated/index.js";
+import { useUniqueId } from "./useUniqueId.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const Dialog = ({
+  primaryCallToActionComponent,
+  secondaryCallToActionComponent,
+  tertiaryCallToActionComponent,
+  callToActionFirstComponent,
+  callToActionSecondComponent,
+  callToActionLastComponent,
+  children,
+  isOpen,
+  onClose,
+  testId,
+  title,
+  translate,
+  variant = "default"
+}) => {
+  const {
+    t
+  } = useTranslation();
+  const [isContentScrollable, setIsContentScrollable] = useState(false);
+  const dialogContentRef = useRef(null);
+  const dialogTitleId = useUniqueId();
+  const dialogLabelId = useUniqueId();
+  useEffect(() => {
+    let frameId;
+    const handleContentScroll = () => {
+      const dialogContentElement = dialogContentRef.current;
+      if (dialogContentElement) {
+        cancelAnimationFrame(frameId);
+        setIsContentScrollable(dialogContentElement.scrollHeight > dialogContentElement.clientHeight);
+      }
+      frameId = requestAnimationFrame(handleContentScroll);
+    };
+    if (isOpen) {
+      frameId = requestAnimationFrame(handleContentScroll);
+    }
+    return () => {
+      cancelAnimationFrame(frameId);
+    };
+  }, [isOpen]);
+  const content = typeof children === "string" ? _jsx(_DialogContentText, {
+    children: children
+  }) : children;
+  const actionButtons = [tertiaryCallToActionComponent || callToActionLastComponent, secondaryCallToActionComponent || callToActionSecondComponent, primaryCallToActionComponent || callToActionFirstComponent].filter(Boolean);
+  const handleCloseButtonClick = useCallback(event => onClose(event, "closeButtonClick"), [onClose]);
+  const slotProps = useMemo(() => ({
+    backdrop: {
+      variant: variant
+    }
+  }), [variant]);
+  return _jsx(FullScreenOverlay, {
+    overlayType: "dialog",
+    children: _jsxs(_Dialog, {
+      "aria-labelledby": dialogLabelId,
+      "data-se": testId,
+      onClose: onClose,
+      open: isOpen,
+      slotProps: slotProps,
+      children: [_jsxs(_DialogTitle, {
+        id: dialogTitleId,
+        translate: translate,
+        children: [_jsx("span", {
+          id: dialogLabelId,
+          children: title
+        }), _jsx(Button, {
+          ariaLabel: t("close.text"),
+          onClick: handleCloseButtonClick,
+          size: "small",
+          startIcon: _jsx(CloseIcon, {}),
+          variant: "floating"
+        })]
+      }), _jsx(_DialogContent, {
+        ...(isContentScrollable && {
+          tabIndex: 0
+        }),
+        dividers: isContentScrollable,
+        ref: dialogContentRef,
+        children: content
+      }), actionButtons.length > 0 && _jsx(_DialogActions, {
+        children: actionButtons.map((actionButton, index) => actionButton ? cloneElement(actionButton, {
+          key: index
+        }) : null)
+      })]
+    })
+  });
+};
+const MemoizedDialog = memo(Dialog);
+MemoizedDialog.displayName = "Dialog";
+export { MemoizedDialog as Dialog };
+//# sourceMappingURL=Dialog.js.map

package/dist/esm/Dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.js","names":["cloneElement","memo","useCallback","useEffect","useMemo","useRef","useState","Button","FullScreenOverlay","useTranslation","CloseIcon","useUniqueId","jsx","_jsx","jsxs","_jsxs","Dialog","primaryCallToActionComponent","secondaryCallToActionComponent","tertiaryCallToActionComponent","callToActionFirstComponent","callToActionSecondComponent","callToActionLastComponent","children","isOpen","onClose","testId","title","translate","variant","t","isContentScrollable","setIsContentScrollable","dialogContentRef","dialogTitleId","dialogLabelId","frameId","handleContentScroll","dialogContentElement","current","cancelAnimationFrame","scrollHeight","clientHeight","requestAnimationFrame","content","_DialogContentText","actionButtons","filter","Boolean","handleCloseButtonClick","event","slotProps","backdrop","overlayType","_Dialog","open","_DialogTitle","id","ariaLabel","onClick","size","startIcon","_DialogContent","tabIndex","dividers","ref","length","_DialogActions","map","actionButton","index","key","MemoizedDialog","displayName"],"sources":["../../src/Dialog.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport {\n  Dialog as MuiDialog,\n  DialogActions as MuiDialogActions,\n  DialogContent as MuiDialogContent,\n  DialogContentText as MuiDialogContentText,\n  DialogProps as MuiDialogProps,\n  DialogTitle as MuiDialogTitle,\n} from \"@mui/material\";\nimport {\n  cloneElement,\n  memo,\n  ReactElement,\n  ReactNode,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nimport type { HtmlProps } from \"./HtmlProps.js\";\n\nimport { Button, ButtonProps } from \"./Buttons/Button.js\";\nimport { FullScreenOverlay } from \"./FullScreenOverlay.js\";\nimport { useTranslation } from \"./i18n.generated/i18n.js\";\nimport { CloseIcon } from \"./icons.generated/index.js\";\nimport { useUniqueId } from \"./useUniqueId.js\";\n\ntype MuiOnCloseEvent = Parameters<Required<MuiDialogProps>[\"onClose\"]>[0];\ntype MuiOnCloseReason = Parameters<Required<MuiDialogProps>[\"onClose\"]>[1];\nexport type DialogOnCloseReason = MuiOnCloseReason | \"closeButtonClick\";\n\nexport type DialogProps = {\n  /**\n   * @deprecated `aria-label` for close button comes from translation file\n   */\n  ariaLabel?: string;\n\n  /**\n   * @deprecated Will be removed in a future Odyssey version. Use `primaryCallToActionComponent` instead.\n   */\n  callToActionFirstComponent?: ReactElement<typeof Button>;\n  /**\n   * @deprecated Will be removed in a future Odyssey version. Use `tertiaryCallToActionComponent` instead.\n   */\n  callToActionLastComponent?: ReactElement<typeof Button>;\n  /**\n   * @deprecated Will be removed in a future Odyssey version. Use `secondaryCallToActionComponent` instead.\n   */\n  callToActionSecondComponent?: ReactElement<typeof Button>;\n  /**\n   * The content of the Dialog. May be a `string` or any other `ReactNode` or array of `ReactNode`s.\n   */\n  children: ReactNode;\n  /**\n   * When set to `true`, the Dialog will be visible.\n   */\n  isOpen: boolean;\n  /**\n   * Callback that controls what happens when the Dialog is dismissed.\n   */\n  onClose: (event: MuiOnCloseEvent, reason: DialogOnCloseReason) => void;\n  /**\n   * An optional Button object to be situated in the Dialog footer as the primary call to action.\n   */\n  primaryCallToActionComponent?: ReactElement<typeof Button>;\n  /**\n   * An optional Button object to be situated in the Dialog footer as the secondary call to action, alongside the `primaryCallToActionComponent`.\n   */\n  secondaryCallToActionComponent?: ReactElement<typeof Button>;\n\n  /**\n   * An optional Button object to be situated in the Dialog footer as the tertiary call to action, alongside the other `callToAction` components.\n   */\n  tertiaryCallToActionComponent?: ReactElement<typeof Button>;\n\n  /**\n   * The title of the Dialog.\n   */\n  title: string;\n\n  /**\n   * When set to `security`, the Dialog backdrop will be opaque.\n   */\n  variant?: \"default\" | \"security\";\n} & Pick<HtmlProps, \"testId\" | \"translate\">;\n\nconst Dialog = ({\n  primaryCallToActionComponent,\n  secondaryCallToActionComponent,\n  tertiaryCallToActionComponent,\n  callToActionFirstComponent,\n  callToActionSecondComponent,\n  callToActionLastComponent,\n  children,\n  isOpen,\n  onClose,\n  testId,\n  title,\n  translate,\n  variant = \"default\",\n}: DialogProps) => {\n  const { t } = useTranslation();\n  const [isContentScrollable, setIsContentScrollable] = useState(false);\n  const dialogContentRef = useRef<HTMLDivElement>(null);\n  const dialogTitleId = useUniqueId();\n  const dialogLabelId = useUniqueId();\n\n  useEffect(() => {\n    let frameId: number;\n\n    const handleContentScroll = () => {\n      const dialogContentElement = dialogContentRef.current;\n      if (dialogContentElement) {\n        cancelAnimationFrame(frameId);\n        setIsContentScrollable(\n          dialogContentElement.scrollHeight > dialogContentElement.clientHeight,\n        );\n      }\n      frameId = requestAnimationFrame(handleContentScroll);\n    };\n\n    if (isOpen) {\n      frameId = requestAnimationFrame(handleContentScroll);\n    }\n\n    return () => {\n      cancelAnimationFrame(frameId);\n    };\n  }, [isOpen]);\n\n  const content =\n    typeof children === \"string\" ? (\n      <MuiDialogContentText>{children}</MuiDialogContentText>\n    ) : (\n      children\n    );\n\n  // Prioritize new action button format (|| used as a fallback)\n  const actionButtons = [\n    tertiaryCallToActionComponent || callToActionLastComponent,\n    secondaryCallToActionComponent || callToActionSecondComponent,\n    primaryCallToActionComponent || callToActionFirstComponent,\n  ].filter(Boolean);\n\n  const handleCloseButtonClick = useCallback<\n    NonNullable<ButtonProps[\"onClick\"]>\n  >((event) => onClose(event, \"closeButtonClick\"), [onClose]);\n\n  const slotProps = useMemo<MuiDialogProps[\"slotProps\"]>(\n    () => ({\n      backdrop: { variant: variant },\n    }),\n    [variant],\n  );\n\n  return (\n    <FullScreenOverlay overlayType=\"dialog\">\n      <MuiDialog\n        aria-labelledby={dialogLabelId}\n        data-se={testId}\n        onClose={onClose}\n        open={isOpen}\n        slotProps={slotProps}\n      >\n        <MuiDialogTitle\n          id={dialogTitleId} // We need to explicitly unset `id` for MUI to automatically set it based on the `aria-labelledby` prop passed to `MuiDialog`\n          translate={translate}\n        >\n          <span id={dialogLabelId}>{title}</span>\n          <Button\n            ariaLabel={t(\"close.text\")}\n            onClick={handleCloseButtonClick}\n            size=\"small\"\n            startIcon={<CloseIcon />}\n            variant=\"floating\"\n          />\n        </MuiDialogTitle>\n\n        <MuiDialogContent\n          {...(isContentScrollable && {\n            // Sets tabIndex on content element if scrollable so content is easier to navigate with the keyboard\n            tabIndex: 0,\n          })}\n          dividers={isContentScrollable}\n          ref={dialogContentRef}\n        >\n          {content}\n        </MuiDialogContent>\n\n        {actionButtons.length > 0 && (\n          <MuiDialogActions>\n            {actionButtons.map((actionButton, index) =>\n              actionButton ? cloneElement(actionButton, { key: index }) : null,\n            )}\n          </MuiDialogActions>\n        )}\n      </MuiDialog>\n    </FullScreenOverlay>\n  );\n};\n\nconst MemoizedDialog = memo(Dialog);\nMemoizedDialog.displayName = \"Dialog\";\n\nexport { MemoizedDialog as Dialog };\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/Drawer.js

@@ -0,0 +1,190 @@
+import _Drawer from "@mui/material/Drawer";
+/*!
+ * 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 styled from "@emotion/styled";
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Button } from "./Buttons/Button.js";
+import { FullScreenOverlay } from "./FullScreenOverlay.js";
+import { useTranslation } from "./i18n.generated/i18n.js";
+import { CloseIcon } from "./icons.generated/index.js";
+import { useOdysseyDesignTokens } from "./OdysseyDesignTokensContext.js";
+import { Heading5 } from "./Typography.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const variantValues = ["temporary", "persistent"];
+const DrawerHeader = styled("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "hasDividers"
+})`
+  grid-area: header;
+  position: sticky;
+  top: 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 0;
+  padding: ${({
+  odysseyDesignTokens
+}) => odysseyDesignTokens.Spacing4}
+    ${({
+  odysseyDesignTokens
+}) => odysseyDesignTokens.Spacing5};
+  color: ${({
+  odysseyDesignTokens
+}) => odysseyDesignTokens.HueNeutral900};
+  background-color: ${({
+  odysseyDesignTokens
+}) => odysseyDesignTokens.HueNeutralWhite};
+  border-bottom: ${({
+  hasDividers,
+  odysseyDesignTokens
+}) => hasDividers ? `1px solid ${odysseyDesignTokens.HueNeutral200}` : "none"};
+`;
+const DrawerContentWrapper = styled("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens"
+})({
+  display: "grid",
+  gridTemplateAreas: `
+    "header"
+    "content"
+    "footer"
+  `,
+  gridTemplateRows: "auto 1fr auto",
+  overflow: "hidden"
+});
+const DrawerContent = styled("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "hasDividers"
+})`
+  grid-area: content;
+  overflow-y: auto;
+  padding: ${({
+  hasDividers,
+  odysseyDesignTokens
+}) => hasDividers ? `${odysseyDesignTokens.Spacing5}` : `0 ${odysseyDesignTokens.Spacing5}`};
+`;
+const DrawerFooter = styled("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "hasDividers"
+})`
+  grid-area: footer;
+  position: sticky;
+  bottom: 0;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  align-content: center;
+  padding: ${({
+  odysseyDesignTokens
+}) => odysseyDesignTokens.Spacing4};
+  border-top: ${({
+  hasDividers,
+  odysseyDesignTokens
+}) => hasDividers ? `1px solid ${odysseyDesignTokens.HueNeutral200}` : "none"};
+  background-color: ${({
+  odysseyDesignTokens
+}) => odysseyDesignTokens.HueNeutralWhite};
+`;
+const Drawer = ({
+  ariaLabel,
+  children,
+  hasDividers: hasDividersProp = false,
+  isOpen,
+  onClose,
+  primaryCallToActionComponent,
+  secondaryCallToActionComponent,
+  showDividers = false,
+  tertiaryCallToActionComponent,
+  testId,
+  title,
+  translate,
+  variant = "temporary"
+}) => {
+  const [isContentScrollable, setIsContentScrollable] = useState(false);
+  const drawerContentRef = useRef(null);
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+  const hasDividers = hasDividersProp || showDividers;
+  const {
+    i18n
+  } = useTranslation();
+  const anchorDirection = i18n.dir() === "rtl" ? "left" : "right";
+  useEffect(() => {
+    let frameId;
+    const handleContentScroll = () => {
+      const drawerContentElement = drawerContentRef.current;
+      if (drawerContentElement) {
+        cancelAnimationFrame(frameId);
+        setIsContentScrollable(drawerContentElement.scrollHeight > drawerContentElement.clientHeight);
+      }
+      frameId = requestAnimationFrame(handleContentScroll);
+    };
+    if (isOpen) {
+      frameId = requestAnimationFrame(handleContentScroll);
+    }
+    return () => {
+      cancelAnimationFrame(frameId);
+    };
+  }, [isOpen]);
+  const dividersVisible = useMemo(() => {
+    return hasDividers || isContentScrollable;
+  }, [hasDividers, isContentScrollable]);
+  const hasFooter = useMemo(() => primaryCallToActionComponent || secondaryCallToActionComponent || tertiaryCallToActionComponent, [primaryCallToActionComponent, secondaryCallToActionComponent, tertiaryCallToActionComponent]);
+  const handleCloseButtonClick = useCallback(event => onClose(event, "closeButtonClick"), [onClose]);
+  const muiDrawerComponent = useMemo(() => _jsx(_Drawer, {
+    anchor: anchorDirection,
+    "data-se": testId,
+    onClose: onClose,
+    open: isOpen,
+    sx: {
+      ...(variant === "persistent" && {
+        "& .MuiDrawer-paper": {
+          transition: "none"
+        }
+      })
+    },
+    variant: variant,
+    children: _jsxs(DrawerContentWrapper, {
+      odysseyDesignTokens: odysseyDesignTokens,
+      children: [_jsxs(DrawerHeader, {
+        hasDividers: dividersVisible,
+        odysseyDesignTokens: odysseyDesignTokens,
+        translate: translate,
+        children: [_jsx(Heading5, {
+          children: title
+        }), _jsx(Button, {
+          ariaLabel: ariaLabel,
+          onClick: handleCloseButtonClick,
+          size: "small",
+          startIcon: _jsx(CloseIcon, {}),
+          variant: "floating"
+        })]
+      }), _jsx(DrawerContent, {
+        ...(isContentScrollable && {
+          tabIndex: 0
+        }),
+        hasDividers: dividersVisible,
+        odysseyDesignTokens: odysseyDesignTokens,
+        ref: drawerContentRef,
+        children: children
+      }), hasFooter && _jsxs(DrawerFooter, {
+        hasDividers: dividersVisible,
+        odysseyDesignTokens: odysseyDesignTokens,
+        children: [tertiaryCallToActionComponent, secondaryCallToActionComponent, primaryCallToActionComponent]
+      })]
+    })
+  }), [anchorDirection, ariaLabel, children, dividersVisible, handleCloseButtonClick, hasFooter, isContentScrollable, isOpen, odysseyDesignTokens, onClose, primaryCallToActionComponent, secondaryCallToActionComponent, tertiaryCallToActionComponent, testId, title, translate, variant]);
+  return variant === "temporary" ? _jsx(FullScreenOverlay, {
+    overlayType: "drawer",
+    children: muiDrawerComponent
+  }) : muiDrawerComponent;
+};
+const MemoizedDrawer = memo(Drawer);
+MemoizedDrawer.displayName = "Drawer";
+export { MemoizedDrawer as Drawer };
+//# sourceMappingURL=Drawer.js.map

package/dist/esm/Drawer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.js","names":["styled","memo","useCallback","useEffect","useMemo","useRef","useState","Button","FullScreenOverlay","useTranslation","CloseIcon","useOdysseyDesignTokens","Heading5","jsx","_jsx","jsxs","_jsxs","variantValues","DrawerHeader","shouldForwardProp","prop","odysseyDesignTokens","Spacing4","Spacing5","HueNeutral900","HueNeutralWhite","hasDividers","HueNeutral200","DrawerContentWrapper","display","gridTemplateAreas","gridTemplateRows","overflow","DrawerContent","DrawerFooter","Drawer","ariaLabel","children","hasDividersProp","isOpen","onClose","primaryCallToActionComponent","secondaryCallToActionComponent","showDividers","tertiaryCallToActionComponent","testId","title","translate","variant","isContentScrollable","setIsContentScrollable","drawerContentRef","i18n","anchorDirection","dir","frameId","handleContentScroll","drawerContentElement","current","cancelAnimationFrame","scrollHeight","clientHeight","requestAnimationFrame","dividersVisible","hasFooter","handleCloseButtonClick","event","muiDrawerComponent","_Drawer","anchor","open","sx","transition","onClick","size","startIcon","tabIndex","ref","overlayType","MemoizedDrawer","displayName"],"sources":["../../src/Drawer.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport styled from \"@emotion/styled\";\nimport {\n  Drawer as MuiDrawer,\n  DrawerProps as MuiDrawerProps,\n} from \"@mui/material\";\nimport {\n  memo,\n  ReactElement,\n  ReactNode,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nimport type { HtmlProps } from \"./HtmlProps.js\";\n\nimport { Button, ButtonProps } from \"./Buttons/Button.js\";\nimport { FullScreenOverlay } from \"./FullScreenOverlay.js\";\nimport { useTranslation } from \"./i18n.generated/i18n.js\";\nimport { CloseIcon } from \"./icons.generated/index.js\";\nimport {\n  DesignTokens,\n  useOdysseyDesignTokens,\n} from \"./OdysseyDesignTokensContext.js\";\nimport { Heading5 } from \"./Typography.js\";\n\ntype MuiOnCloseEvent = Parameters<Required<MuiDrawerProps>[\"onClose\"]>[0];\ntype MuiOnCloseReason = Parameters<Required<MuiDrawerProps>[\"onClose\"]>[1];\nexport type DrawerOnCloseReason = MuiOnCloseReason | \"closeButtonClick\";\n\nexport const variantValues = [\"temporary\", \"persistent\"] as const;\n\nexport type DrawerProps = {\n  /**\n   * The content of the Drawer. May be a `string` or any other `ReactNode` or array of `ReactNode`s.\n   */\n  children?: ReactNode;\n  /**\n   * When set to `true`, the Drawer will be visible.\n   */\n  isOpen?: boolean;\n  /**\n   * Callback that controls what happens when the Drawer is dismissed\n   */\n  onClose: (event: MuiOnCloseEvent, reason: DrawerOnCloseReason) => void;\n  /**\n   * An optional Button object to be situated in the Drawerfooter. Should almost always be of variant `primary`.\n   */\n  primaryCallToActionComponent?: ReactElement<typeof Button>;\n  /**\n   * An optional Button object to be situated in the Drawer footer, alongside the `callToActionPrimaryComponent`.\n   */\n  secondaryCallToActionComponent?: ReactElement<typeof Button>;\n  /**\n   * An optional Button object to be situated in the Drawer footer, alongside the other two `callToAction` components.\n   */\n  tertiaryCallToActionComponent?: ReactElement<typeof Button>;\n  /**\n   * The title of the Drawer\n   */\n  title?: string;\n  /**\n   * Type of Drawer\n   */\n  variant?: (typeof variantValues)[number];\n} & Pick<HtmlProps, \"ariaLabel\" | \"testId\" | \"translate\"> &\n  (\n    | {\n        /**\n         * Shows divider lines separating header, content, and footer (if using action buttons).\n         */\n        hasDividers?: never;\n        /**\n         * @deprecated use `hasDividers` instead.\n         *\n         * Shows divider lines separating header, content, and footer (if using action buttons).\n         */\n        showDividers: boolean;\n      }\n    | {\n        /**\n         * Shows divider lines separating header, content, and footer (if using action buttons).\n         */\n        hasDividers: boolean;\n        /**\n         * @deprecated use `hasDividers` instead.\n         *\n         * Shows divider lines separating header, content, and footer (if using action buttons).\n         */\n        showDividers?: never;\n      }\n  );\n\ntype DrawerStyleProps = {\n  hasDividers: boolean;\n  odysseyDesignTokens: DesignTokens;\n};\n\nconst DrawerHeader = styled(\"div\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" && prop !== \"hasDividers\",\n})<DrawerStyleProps>`\n  grid-area: header;\n  position: sticky;\n  top: 0;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin: 0;\n  padding: ${({ odysseyDesignTokens }) => odysseyDesignTokens.Spacing4}\n    ${({ odysseyDesignTokens }) => odysseyDesignTokens.Spacing5};\n  color: ${({ odysseyDesignTokens }) => odysseyDesignTokens.HueNeutral900};\n  background-color: ${({ odysseyDesignTokens }) =>\n    odysseyDesignTokens.HueNeutralWhite};\n  border-bottom: ${({ hasDividers, odysseyDesignTokens }) =>\n    hasDividers ? `1px solid ${odysseyDesignTokens.HueNeutral200}` : \"none\"};\n`;\n\nconst DrawerContentWrapper = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n}>({\n  display: \"grid\",\n  gridTemplateAreas: `\n    \"header\"\n    \"content\"\n    \"footer\"\n  `,\n  gridTemplateRows: \"auto 1fr auto\",\n  overflow: \"hidden\",\n});\n\nconst DrawerContent = styled(\"div\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" && prop !== \"hasDividers\",\n})<DrawerStyleProps>`\n  grid-area: content;\n  overflow-y: auto;\n  padding: ${({ hasDividers, odysseyDesignTokens }) =>\n    hasDividers\n      ? `${odysseyDesignTokens.Spacing5}`\n      : `0 ${odysseyDesignTokens.Spacing5}`};\n`;\n\nconst DrawerFooter = styled(\"div\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" && prop !== \"hasDividers\",\n})<DrawerStyleProps>`\n  grid-area: footer;\n  position: sticky;\n  bottom: 0;\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n  align-content: center;\n  padding: ${({ odysseyDesignTokens }) => odysseyDesignTokens.Spacing4};\n  border-top: ${({ hasDividers, odysseyDesignTokens }) =>\n    hasDividers ? `1px solid ${odysseyDesignTokens.HueNeutral200}` : \"none\"};\n  background-color: ${({ odysseyDesignTokens }) =>\n    odysseyDesignTokens.HueNeutralWhite};\n`;\n\nconst Drawer = ({\n  ariaLabel,\n  children,\n  hasDividers: hasDividersProp = false,\n  isOpen,\n  onClose,\n  primaryCallToActionComponent,\n  secondaryCallToActionComponent,\n  showDividers = false,\n  tertiaryCallToActionComponent,\n  testId,\n  title,\n  translate,\n  variant = \"temporary\",\n}: DrawerProps) => {\n  const [isContentScrollable, setIsContentScrollable] = useState(false);\n  const drawerContentRef = useRef<HTMLDivElement>(null);\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  const hasDividers = hasDividersProp || showDividers;\n\n  //If RTL is set in the theme, align the drawer on the left side of the screen, uses right by default.\n  const { i18n } = useTranslation();\n  const anchorDirection = i18n.dir() === \"rtl\" ? \"left\" : \"right\";\n\n  useEffect(() => {\n    let frameId: number;\n\n    const handleContentScroll = () => {\n      const drawerContentElement = drawerContentRef.current;\n      if (drawerContentElement) {\n        cancelAnimationFrame(frameId);\n        setIsContentScrollable(\n          drawerContentElement.scrollHeight > drawerContentElement.clientHeight,\n        );\n      }\n      frameId = requestAnimationFrame(handleContentScroll);\n    };\n\n    if (isOpen) {\n      frameId = requestAnimationFrame(handleContentScroll);\n    }\n\n    return () => {\n      cancelAnimationFrame(frameId);\n    };\n  }, [isOpen]);\n\n  const dividersVisible = useMemo(() => {\n    return hasDividers || isContentScrollable;\n  }, [hasDividers, isContentScrollable]);\n\n  const hasFooter = useMemo(\n    () =>\n      primaryCallToActionComponent ||\n      secondaryCallToActionComponent ||\n      tertiaryCallToActionComponent,\n    [\n      primaryCallToActionComponent,\n      secondaryCallToActionComponent,\n      tertiaryCallToActionComponent,\n    ],\n  );\n\n  const handleCloseButtonClick = useCallback<\n    NonNullable<ButtonProps[\"onClick\"]>\n  >((event) => onClose(event, \"closeButtonClick\"), [onClose]);\n\n  const muiDrawerComponent = useMemo(\n    () => (\n      <MuiDrawer\n        anchor={anchorDirection}\n        data-se={testId}\n        onClose={onClose}\n        open={isOpen}\n        sx={{\n          //Overrides default MUI inline style\n          ...(variant === \"persistent\" && {\n            \"& .MuiDrawer-paper\": {\n              transition: \"none\",\n            },\n          }),\n        }}\n        variant={variant}\n      >\n        <DrawerContentWrapper odysseyDesignTokens={odysseyDesignTokens}>\n          <DrawerHeader\n            hasDividers={dividersVisible}\n            odysseyDesignTokens={odysseyDesignTokens}\n            translate={translate}\n          >\n            <Heading5>{title}</Heading5>\n            <Button\n              ariaLabel={ariaLabel}\n              onClick={handleCloseButtonClick}\n              size=\"small\"\n              startIcon={<CloseIcon />}\n              variant=\"floating\"\n            />\n          </DrawerHeader>\n          <DrawerContent\n            {...(isContentScrollable && {\n              //Sets tabIndex on content element if scrollable so content is easier to navigate with the keyboard\n              tabIndex: 0,\n            })}\n            hasDividers={dividersVisible}\n            odysseyDesignTokens={odysseyDesignTokens}\n            ref={drawerContentRef}\n          >\n            {children}\n          </DrawerContent>\n          {hasFooter && (\n            <DrawerFooter\n              hasDividers={dividersVisible}\n              odysseyDesignTokens={odysseyDesignTokens}\n            >\n              {tertiaryCallToActionComponent}\n              {secondaryCallToActionComponent}\n              {primaryCallToActionComponent}\n            </DrawerFooter>\n          )}\n        </DrawerContentWrapper>\n      </MuiDrawer>\n    ),\n    [\n      anchorDirection,\n      ariaLabel,\n      children,\n      dividersVisible,\n      handleCloseButtonClick,\n      hasFooter,\n      isContentScrollable,\n      isOpen,\n      odysseyDesignTokens,\n      onClose,\n      primaryCallToActionComponent,\n      secondaryCallToActionComponent,\n      tertiaryCallToActionComponent,\n      testId,\n      title,\n      translate,\n      variant,\n    ],\n  );\n\n  return variant === \"temporary\" ? (\n    <FullScreenOverlay overlayType=\"drawer\">\n      {muiDrawerComponent}\n    </FullScreenOverlay>\n  ) : (\n    muiDrawerComponent\n  );\n};\n\nconst MemoizedDrawer = memo(Drawer);\nMemoizedDrawer.displayName = \"Drawer\";\n\nexport { MemoizedDrawer as Drawer };\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/EmptyState.js

@@ -0,0 +1,67 @@
+/*!
+ * 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 styled from "@emotion/styled";
+import { memo } from "react";
+import { Box } from "./Box.js";
+import { useOdysseyDesignTokens } from "./OdysseyDesignTokensContext.js";
+import { Heading4, Paragraph } from "./Typography.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const EmptyContainer = styled("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens"
+})(({
+  odysseyDesignTokens
+}) => ({
+  display: "flex",
+  flexDirection: "column",
+  marginBlock: odysseyDesignTokens.Spacing9,
+  padding: odysseyDesignTokens.Spacing5,
+  textAlign: "center",
+  width: "100%",
+  alignItems: "center"
+}));
+const TextContainer = styled("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens"
+})(({
+  odysseyDesignTokens
+}) => ({
+  maxWidth: odysseyDesignTokens.TypographyLineLengthMax
+}));
+const EmptyState = ({
+  heading,
+  description,
+  PrimaryCallToActionComponent,
+  SecondaryCallToActionComponent
+}) => {
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+  return _jsxs(EmptyContainer, {
+    odysseyDesignTokens: odysseyDesignTokens,
+    children: [_jsxs(TextContainer, {
+      odysseyDesignTokens: odysseyDesignTokens,
+      children: [_jsx(Heading4, {
+        children: heading
+      }), _jsx(Paragraph, {
+        children: description
+      })]
+    }), (PrimaryCallToActionComponent || SecondaryCallToActionComponent) && _jsxs(Box, {
+      sx: {
+        marginBlockStart: 5
+      },
+      children: [SecondaryCallToActionComponent, PrimaryCallToActionComponent]
+    })]
+  });
+};
+const MemoizedEmptyState = memo(EmptyState);
+MemoizedEmptyState.displayName = "EmptyState";
+export { MemoizedEmptyState as EmptyState };
+export { MemoizedEmptyState as DataTableEmptyState };
+//# sourceMappingURL=EmptyState.js.map

package/dist/esm/EmptyState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyState.js","names":["styled","memo","Box","useOdysseyDesignTokens","Heading4","Paragraph","jsx","_jsx","jsxs","_jsxs","EmptyContainer","shouldForwardProp","prop","odysseyDesignTokens","display","flexDirection","marginBlock","Spacing9","padding","Spacing5","textAlign","width","alignItems","TextContainer","maxWidth","TypographyLineLengthMax","EmptyState","heading","description","PrimaryCallToActionComponent","SecondaryCallToActionComponent","children","sx","marginBlockStart","MemoizedEmptyState","displayName","DataTableEmptyState"],"sources":["../../src/EmptyState.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport styled from \"@emotion/styled\";\nimport { memo, ReactNode } from \"react\";\n\nimport { Box } from \"./Box.js\";\nimport {\n  DesignTokens,\n  useOdysseyDesignTokens,\n} from \"./OdysseyDesignTokensContext.js\";\nimport { Heading4, Paragraph } from \"./Typography.js\";\n\nconst EmptyContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{ odysseyDesignTokens: DesignTokens }>(({ odysseyDesignTokens }) => ({\n  display: \"flex\",\n  flexDirection: \"column\",\n  marginBlock: odysseyDesignTokens.Spacing9,\n  padding: odysseyDesignTokens.Spacing5,\n  textAlign: \"center\",\n  width: \"100%\",\n  alignItems: \"center\",\n}));\n\nconst TextContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{ odysseyDesignTokens: DesignTokens }>(({ odysseyDesignTokens }) => ({\n  maxWidth: odysseyDesignTokens.TypographyLineLengthMax,\n}));\n\nexport type EmptyStateProps = {\n  /**\n   * A descriptive text explaining more context as to why we don't have data.\n   */\n  description: string;\n  /**\n   * Main heading of the empty state\n   */\n  heading: string;\n  /**\n   * Primary call to action\n   */\n  PrimaryCallToActionComponent?: ReactNode;\n  /**\n   * Secondary call to action\n   */\n  SecondaryCallToActionComponent?: ReactNode;\n};\n\nconst EmptyState = ({\n  heading,\n  description,\n  PrimaryCallToActionComponent,\n  SecondaryCallToActionComponent,\n}: EmptyStateProps) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  return (\n    <EmptyContainer odysseyDesignTokens={odysseyDesignTokens}>\n      <TextContainer odysseyDesignTokens={odysseyDesignTokens}>\n        <Heading4>{heading}</Heading4>\n        <Paragraph>{description}</Paragraph>\n      </TextContainer>\n      {(PrimaryCallToActionComponent || SecondaryCallToActionComponent) && (\n        <Box sx={{ marginBlockStart: 5 }}>\n          {SecondaryCallToActionComponent}\n          {PrimaryCallToActionComponent}\n        </Box>\n      )}\n    </EmptyContainer>\n  );\n};\n\nconst MemoizedEmptyState = memo(EmptyState);\nMemoizedEmptyState.displayName = \"EmptyState\";\n\nexport { MemoizedEmptyState as EmptyState };\nexport { MemoizedEmptyState as DataTableEmptyState };\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,OAAOA,MAAM,MAAM,iBAAiB;AACpC,SAASC,IAAI,QAAmB,OAAO;AAEvC,SAASC,GAAG,QAAQ,UAAU;AAC9B,SAEEC,sBAAsB,QACjB,iCAAiC;AACxC,SAASC,QAAQ,EAAEC,SAAS,QAAQ,iBAAiB;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAEtD,MAAMC,cAAc,GAAGV,MAAM,CAAC,KAAK,EAAE;EACnCW,iBAAiB,EAAGC,IAAI,IAAKA,IAAI,KAAK;AACxC,CAAC,CAAC,CAAwC,CAAC;EAAEC;AAAoB,CAAC,MAAM;EACtEC,OAAO,EAAE,MAAM;EACfC,aAAa,EAAE,QAAQ;EACvBC,WAAW,EAAEH,mBAAmB,CAACI,QAAQ;EACzCC,OAAO,EAAEL,mBAAmB,CAACM,QAAQ;EACrCC,SAAS,EAAE,QAAQ;EACnBC,KAAK,EAAE,MAAM;EACbC,UAAU,EAAE;AACd,CAAC,CAAC,CAAC;AAEH,MAAMC,aAAa,GAAGvB,MAAM,CAAC,KAAK,EAAE;EAClCW,iBAAiB,EAAGC,IAAI,IAAKA,IAAI,KAAK;AACxC,CAAC,CAAC,CAAwC,CAAC;EAAEC;AAAoB,CAAC,MAAM;EACtEW,QAAQ,EAAEX,mBAAmB,CAACY;AAChC,CAAC,CAAC,CAAC;AAqBH,MAAMC,UAAU,GAAGA,CAAC;EAClBC,OAAO;EACPC,WAAW;EACXC,4BAA4B;EAC5BC;AACe,CAAC,KAAK;EACrB,MAAMjB,mBAAmB,GAAGV,sBAAsB,CAAC,CAAC;EAEpD,OACEM,KAAA,CAACC,cAAc;IAACG,mBAAmB,EAAEA,mBAAoB;IAAAkB,QAAA,GACvDtB,KAAA,CAACc,aAAa;MAACV,mBAAmB,EAAEA,mBAAoB;MAAAkB,QAAA,GACtDxB,IAAA,CAACH,QAAQ;QAAA2B,QAAA,EAAEJ;MAAO,CAAW,CAAC,EAC9BpB,IAAA,CAACF,SAAS;QAAA0B,QAAA,EAAEH;MAAW,CAAY,CAAC;IAAA,CACvB,CAAC,EACf,CAACC,4BAA4B,IAAIC,8BAA8B,KAC9DrB,KAAA,CAACP,GAAG;MAAC8B,EAAE,EAAE;QAAEC,gBAAgB,EAAE;MAAE,CAAE;MAAAF,QAAA,GAC9BD,8BAA8B,EAC9BD,4BAA4B;IAAA,CAC1B,CACN;EAAA,CACa,CAAC;AAErB,CAAC;AAED,MAAMK,kBAAkB,GAAGjC,IAAI,CAACyB,UAAU,CAAC;AAC3CQ,kBAAkB,CAACC,WAAW,GAAG,YAAY;AAE7C,SAASD,kBAAkB,IAAIR,UAAU;AACzC,SAASQ,kBAAkB,IAAIE,mBAAmB","ignoreList":[]}