@okta/odyssey-react-mui 1.32.0 → 1.33.0

package/src/labs/DataView/testSupportData.tsx

@@ -1,301 +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 { Status } from "../../Status.js";
-import { DataColumns, DataFilter, DataGetDataType } from "../index.js";
-
-export type Person = {
-  order: number;
-  id: string;
-  name: string;
-  city: string;
-  state: string;
-  age: number;
-  risk: "high" | "medium" | "low";
-};
-
-export const columns: DataColumns<Person> = [
-  {
-    accessorKey: "order",
-    header: "ID",
-    enableColumnFilter: false,
-    size: 120,
-  },
-  {
-    accessorKey: "name",
-    header: "Name",
-    enableHiding: false,
-  },
-  {
-    accessorKey: "city",
-    header: "City",
-  },
-  {
-    accessorKey: "state",
-    header: "State",
-  },
-  {
-    accessorKey: "age",
-    header: "Age",
-    size: 80,
-    filterVariant: "range",
-  },
-  {
-    accessorKey: "risk",
-    header: "Risk level",
-    Cell: ({ cell }) => {
-      const value = cell.getValue<string>();
-      const severity =
-        value === "low" ? "success" : value === "medium" ? "warning" : "error";
-      return (
-        <Status
-          label={value.charAt(0).toUpperCase() + value.slice(1)}
-          severity={severity}
-        />
-      );
-    },
-    filterVariant: "multi-select",
-    filterSelectOptions: [
-      {
-        label: "Low",
-        value: "low",
-      },
-      {
-        label: "Medium",
-        value: "medium",
-      },
-      {
-        label: "High",
-        value: "high",
-      },
-    ],
-  },
-];
-
-export const data: Person[] = [
-  {
-    order: 1,
-    id: "1",
-    name: "Luke Skywalker",
-    city: "Mos Eisley",
-    state: "Tatooine",
-    age: 19,
-    risk: "low",
-  },
-  {
-    order: 2,
-    id: "2",
-    name: "Han Solo",
-    city: "Corellia",
-    state: "Corellia",
-    age: 40,
-    risk: "medium",
-  },
-  {
-    order: 3,
-    id: "3",
-    name: "Leia Organa",
-    city: "Alderaan City",
-    state: "Alderaan",
-    age: 19,
-    risk: "low",
-  },
-  {
-    order: 4,
-    id: "4",
-    name: "Chewbacca",
-    city: "Kashyyyk City",
-    state: "Kashyyyk",
-    age: 50,
-    risk: "high",
-  },
-  {
-    order: 5,
-    id: "5",
-    name: "C-3P0",
-    city: "Mos Espa",
-    state: "Tatooine",
-    age: 25,
-    risk: "low",
-  },
-  {
-    order: 6,
-    id: "6",
-    name: "R2-D2",
-    city: "Theed",
-    state: "Naboo",
-    age: 25,
-    risk: "low",
-  },
-];
-
-let result: Person[] = [];
-for (let i = 0; i < 50; i++) {
-  result = result.concat(data);
-}
-export const lotsOfData = result;
-
-export const filterData = ({
-  data,
-  ...args
-}: {
-  data: Person[];
-} & DataGetDataType) => {
-  const { search, filters, sort, page = 1, resultsPerPage = 20 } = args;
-
-  const searchFiltered = search
-    ? data.filter((row) =>
-        Object.values(row).some((value) =>
-          value.toString().toLowerCase().includes(search.toLowerCase()),
-        ),
-      )
-    : data;
-
-  const personKeys: (keyof Person)[] = [
-    "order",
-    "id",
-    "name",
-    "city",
-    "state",
-    "age",
-    "risk",
-  ];
-
-  const isKeyOfPerson = (key: string): key is keyof Person => {
-    return personKeys.includes(key as keyof Person);
-  };
-
-  const handleStartLetterFilter = (
-    row: Person,
-    value: DataFilter["value"],
-  ): boolean => {
-    if (typeof row.name !== "string") return true;
-    const firstLetter = row.name[0]?.toLowerCase();
-    if (value === "vowel") return "aeiou".includes(firstLetter);
-    if (value === "consonant") return !"aeiou".includes(firstLetter);
-    return true;
-  };
-
-  const handleStandardFilter = (
-    row: Person,
-    id: keyof Person,
-    value: DataFilter["value"],
-  ): boolean => {
-    const rowValue = String(row[id]).toLowerCase();
-
-    if (value === null || value === undefined) {
-      return true;
-    }
-
-    if (typeof value === "string" || typeof value === "number") {
-      return rowValue.includes(String(value).toLowerCase());
-    }
-
-    if (Array.isArray(value)) {
-      return value.some((arrayValue) => {
-        const filterValue =
-          typeof arrayValue === "object" ? arrayValue.value : arrayValue;
-        return row[id]
-          ?.toString()
-          .toLowerCase()
-          .includes(filterValue.toString().toLowerCase());
-      });
-    }
-
-    return false;
-  };
-
-  const compareValues = (
-    a: string | number,
-    b: string | number,
-    desc: boolean,
-  ): number => {
-    if (a < b) return desc ? 1 : -1;
-    if (a > b) return desc ? -1 : 1;
-    return 0;
-  };
-
-  // In a real-world scenario, the consumer would provide their own backend
-  // filtering/searching logic. This is a demo of what that could look like
-  // for the provided sample data and demo filters.
-  const columnFiltered = filters
-    ? searchFiltered.filter((row) =>
-        filters.every(({ id, value }: DataFilter) => {
-          // If the filter value is null, return all the data
-          if (value === null || value === undefined) {
-            return true;
-          }
-
-          // Handle custom filters
-          if (id === "startLetter") {
-            return handleStartLetterFilter(row, value);
-          }
-
-          // Handle standard Person properties
-          if (isKeyOfPerson(id)) {
-            return handleStandardFilter(row, id, value);
-          }
-
-          return true;
-        }),
-      )
-    : searchFiltered;
-
-  const sorted =
-    sort && sort.length > 0
-      ? [...columnFiltered].sort((a, b) =>
-          sort.reduce((result, { id, desc }) => {
-            if (result !== 0) return result;
-
-            if (isKeyOfPerson(id)) {
-              const aValue = a[id];
-              const bValue = b[id];
-              return compareValues(aValue, bValue, desc);
-            }
-
-            // Handle custom sort fields if needed
-            return 0;
-          }, 0),
-        )
-      : columnFiltered;
-
-  const startRow = (page - 1) * resultsPerPage;
-  const endRow = startRow + resultsPerPage;
-
-  return sorted.slice(startRow, endRow);
-};
-
-export const reorderData = <Data extends Person>({
-  data,
-  rowId,
-  newRowIndex,
-}: {
-  data: Data[];
-  rowId: string | number;
-  newRowIndex: number;
-}): Data[] => {
-  const rowIndex = data.findIndex((row) => row.id === rowId);
-
-  if (rowIndex === -1) {
-    return data;
-  }
-
-  const [removedRow] = data.splice(rowIndex, 1);
-
-  const reorderedData = [
-    ...data.slice(0, newRowIndex),
-    removedRow,
-    ...data.slice(newRowIndex),
-  ];
-
-  return reorderedData;
-};

package/src/labs/DataView/useFilterConversion.ts

@@ -1,88 +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 { useCallback, useMemo } from "react";
-import { MRT_RowData } from "material-react-table";
-
-import { DataFilter } from "../DataFilters.js";
-import { DataTableColumn } from "../../DataTable/index.js";
-import { UniversalProps, TableLayoutProps } from "./componentTypes.js";
-
-type FilterConversionType<TData extends MRT_RowData> = {
-  columns?: TableLayoutProps<TData>["columns"];
-  filters?: UniversalProps<TData>["filters"];
-};
-
-export const useFilterConversion = <TData extends MRT_RowData>({
-  columns,
-  filters,
-}: FilterConversionType<TData>) => {
-  const convertFilterSelectOptions = useCallback(
-    (options: DataTableColumn<MRT_RowData>["filterSelectOptions"]) =>
-      options?.map((option) =>
-        typeof option === "string"
-          ? {
-              label: option,
-              value: option,
-            }
-          : {
-              // If the option isn't a string, it must have value and/or option defined
-              // If either is undefined, use the other
-              label: (option.label ?? option.value) as string,
-              value: (option.value ?? option.label) as string,
-            },
-      ),
-    [],
-  );
-
-  const convertColumnToFilter = useCallback(
-    (column: DataTableColumn<TData>) =>
-      column.enableColumnFilter !== false && column.accessorKey
-        ? {
-            id: column.accessorKey,
-            label: column.header,
-            variant: column.filterVariant,
-            options: convertFilterSelectOptions(column.filterSelectOptions),
-          }
-        : null,
-    [convertFilterSelectOptions],
-  );
-
-  const dataTableFilters = useMemo(() => {
-    // Filters may be manually set via the `filters` variable;
-    // If not, they may be inferred from `columns`
-    const providedFilters = filters || columns || [];
-
-    return providedFilters.reduce<DataFilter[]>((accumulator, item) => {
-      if (typeof item === "string") {
-        const foundColumn = columns?.find(
-          (column) => column.accessorKey === item,
-        );
-        const filter = foundColumn && convertColumnToFilter(foundColumn);
-        return filter ? accumulator.concat(filter) : accumulator;
-      }
-
-      if ("accessorKey" in item) {
-        const filter = convertColumnToFilter(item);
-        return filter ? accumulator.concat(filter) : accumulator;
-      }
-
-      if ("label" in item) {
-        return accumulator.concat(item);
-      }
-
-      return accumulator;
-    }, []);
-  }, [columns, filters]);
-
-  return dataTableFilters;
-};

package/src/labs/DatePickers/DateTimeField.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 {
-  DateTimeField as MuiDateTimeField,
-  DateTimeFieldProps as MuiDateTimeFieldProps,
-  DateTimeValidationError,
-} 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 DateTimeFieldProps = {
-  onChange?: (value: string) => void;
-} & Pick<
-  MuiDateTimeFieldProps<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<DateTimeValidationError, string>([
-    ["invalidDate", t("picker.error.invalid")],
-    ["maxDate", t("picker.error.maxdate")],
-    ["minDate", t("picker.error.mindate")],
-  ]);
-};
-
-const formatDateTimeToUtcIsoDateString = (value: DateTime) =>
-  value.toUTC().toISO();
-
-const DateTimeField = ({
-  defaultValue,
-  endAdornment,
-  errorMessage,
-  hasInitialFocus,
-  hint,
-  HintLinkComponent,
-  id: idOverride,
-  inputRef,
-  isDisabled = false,
-  isOptional = false,
-  isReadOnly,
-  label,
-  minDate,
-  maxDate,
-  onBlur,
-  onChange,
-  onFocus,
-  timezone,
-  value,
-}: DateTimeFieldProps) => {
-  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<MuiDateTimeFieldProps<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) => (
-      <MuiDateTimeField
-        /* 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 MemoizedDateTimeField = memo(DateTimeField);
-MemoizedDateTimeField.displayName = "DateTimeField";
-
-export { MemoizedDateTimeField as DateTimeField };