@okta/odyssey-react-mui 1.14.4 → 1.14.6

package/src/Fieldset.tsx

@@ -10,15 +10,32 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { Box } from "@mui/material";
 import { memo, ReactElement, useMemo } from "react";
+import styled from "@emotion/styled";
 
 import { Callout } from "./Callout";
 import { FieldsetContext } from "./FieldsetContext";
+import type { HtmlProps } from "./HtmlProps";
 import { Legend, Support } from "./Typography";
-import { useOdysseyDesignTokens } from "./OdysseyDesignTokensContext";
+import {
+  useOdysseyDesignTokens,
+  DesignTokens,
+} from "./OdysseyDesignTokensContext";
 import { useUniqueId } from "./useUniqueId";
-import type { HtmlProps } from "./HtmlProps";
+
+const StyledFieldset = styled.fieldset<{
+  odysseyDesignTokens: DesignTokens;
+}>(({ odysseyDesignTokens }) => ({
+  border: "0",
+  margin: odysseyDesignTokens.Spacing0,
+  marginBlockEnd: odysseyDesignTokens.Spacing6,
+  maxWidth: odysseyDesignTokens.TypographyLineLengthMax,
+  padding: odysseyDesignTokens.Spacing0,
+
+  "&:last-child": {
+    marginBlockEnd: odysseyDesignTokens.Spacing0,
+  },
+}));
 
 export type FieldsetProps = {
   /**
@@ -73,23 +90,12 @@ const Fieldset = ({
   );
 
   return (
-    <Box
-      component="fieldset"
+    <StyledFieldset
       data-se={testId}
       disabled={isDisabled}
-      name={name}
       id={id}
-      sx={{
-        border: "0",
-        margin: odysseyDesignTokens.Spacing0,
-        marginBlockEnd: odysseyDesignTokens.Spacing6,
-        maxWidth: odysseyDesignTokens.TypographyLineLengthMax,
-        padding: odysseyDesignTokens.Spacing0,
-
-        "&:last-child": {
-          marginBlockEnd: odysseyDesignTokens.Spacing0,
-        },
-      }}
+      name={name}
+      odysseyDesignTokens={odysseyDesignTokens}
     >
       <Legend translate={translate}>{legend}</Legend>
 
@@ -100,7 +106,7 @@ const Fieldset = ({
       <FieldsetContext.Provider value={fieldsetContextValue}>
         {children}
       </FieldsetContext.Provider>
-    </Box>
+    </StyledFieldset>
   );
 };
 

package/src/Form.tsx

@@ -11,7 +11,7 @@
  */
 
 import { FormEventHandler, memo, ReactElement } from "react";
-import { Box } from "@mui/material";
+import styled from "@emotion/styled";
 
 import { Button } from "./Button";
 import { Callout } from "./Callout";
@@ -19,6 +19,10 @@ import { FieldComponentProps } from "./FieldComponentProps";
 import type { HtmlProps } from "./HtmlProps";
 import { Heading4, Support } from "./Typography";
 import { useUniqueId } from "./useUniqueId";
+import {
+  useOdysseyDesignTokens,
+  DesignTokens,
+} from "./OdysseyDesignTokensContext";
 
 export const formEncodingTypeValues = [
   "application/x-www-form-urlencoded",
@@ -29,6 +33,34 @@ export const formEncodingTypeValues = [
 export const formAutoCompleteTypeValues = ["on", "off"] as const;
 export const formMethodValues = ["post", "get", "dialog"] as const;
 
+const StyledForm = styled.form<{
+  isFullWidth?: boolean;
+  odysseyDesignTokens: DesignTokens;
+}>(({ isFullWidth, odysseyDesignTokens }) => ({
+  maxWidth: isFullWidth ? "100%" : odysseyDesignTokens.TypographyLineLengthMax,
+  margin: 0,
+  padding: 0,
+}));
+
+const TitleContainer = styled.div<{
+  odysseyDesignTokens: DesignTokens;
+}>(({ odysseyDesignTokens }) => ({
+  marginBlockEnd: odysseyDesignTokens.Spacing4,
+}));
+
+const FormActionContainer = styled.div<{
+  odysseyDesignTokens: DesignTokens;
+}>(
+  {
+    display: "flex",
+    justifyContent: "flex-end",
+  },
+  ({ odysseyDesignTokens }) => ({
+    gap: odysseyDesignTokens.Spacing1,
+    marginBlockStart: odysseyDesignTokens.Spacing7,
+  }),
+);
+
 export type FormProps = {
   /**
    * A Callout indicating a Form-wide error or status update.
@@ -112,31 +144,23 @@ const Form = ({
   translate,
 }: FormProps) => {
   const id = useUniqueId(idOverride);
+  const odysseyDesignTokens = useOdysseyDesignTokens();
 
   return (
-    <Box
+    <StyledForm
       autoComplete={autoCompleteType}
-      component="form"
       data-se={testId}
       encType={encodingType}
       id={id}
+      isFullWidth={isFullWidth}
       method={method}
       name={name}
       noValidate={noValidate}
+      odysseyDesignTokens={odysseyDesignTokens}
       onSubmit={onSubmit}
       target={target}
-      sx={{
-        maxWidth: (theme) => (isFullWidth ? "100%" : theme.mixins.maxWidth),
-        margin: (theme) => theme.spacing(0),
-        padding: (theme) => theme.spacing(0),
-      }}
     >
-      <Box
-        component="div"
-        sx={{
-          marginBlockEnd: (theme) => theme.spacing(4),
-        }}
-      >
+      <TitleContainer odysseyDesignTokens={odysseyDesignTokens}>
         {title && (
           <Heading4 component="h1" translate={translate}>
             {title}
@@ -144,22 +168,14 @@ const Form = ({
         )}
         {description && <Support translate={translate}>{description}</Support>}
         {alert}
-      </Box>
-      <Box component="div">{children}</Box>
+      </TitleContainer>
+      <div>{children}</div>
       {formActions && (
-        <Box
-          component="div"
-          sx={{
-            display: "flex",
-            justifyContent: "flex-end",
-            gap: (theme) => theme.spacing(1),
-            marginBlockStart: (theme) => theme.spacing(7),
-          }}
-        >
+        <FormActionContainer odysseyDesignTokens={odysseyDesignTokens}>
           {formActions}
-        </Box>
+        </FormActionContainer>
       )}
-    </Box>
+    </StyledForm>
   );
 };
 

package/src/MenuButton.tsx

@@ -179,7 +179,7 @@ const MenuButton = ({
         ariaDescribedBy={ariaDescribedBy}
         ariaLabel={ariaLabel}
         ariaLabelledBy={ariaLabelledBy}
-        data-se={testId}
+        testId={testId}
         endIcon={endIcon}
         id={`${uniqueId}-button`}
         isDisabled={isDisabled}

package/src/SearchField.tsx

@@ -158,7 +158,7 @@ const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(
           autoFocus={hasInitialFocus}
           data-se={testId}
           endAdornment={
-            defaultValue && (
+            (inputValues?.defaultValue || inputValues?.value) && (
               <InputAdornment position="end">
                 <IconButton
                   aria-label="Clear"
@@ -191,7 +191,6 @@ const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(
       ),
       [
         autoCompleteType,
-        defaultValue,
         hasInitialFocus,
         inputValues,
         isDisabled,

package/src/labs/DataFilters.tsx

@@ -118,6 +118,10 @@ export type DataFiltersProps = {
    * the filter menu won't be shown.
    */
   filters?: Array<DataFilter>;
+  /**
+   * If true, the filter and search will be disabled
+   */
+  isDisabled?: boolean;
 };
 
 const DataFilters = ({
@@ -128,6 +132,7 @@ const DataFilters = ({
   defaultSearchTerm = "",
   additionalActions,
   filters: filtersProp = [],
+  isDisabled,
 }: DataFiltersProps) => {
   const [filters, setFilters] = useState<DataFilter[]>(filtersProp);
   const { t } = useTranslation();
@@ -311,6 +316,7 @@ const DataFilters = ({
             aria-expanded={isFiltersMenuOpen ? "true" : undefined}
             aria-haspopup="true"
             ariaLabel={t("filters.filters.arialabel")}
+            isDisabled={isDisabled}
             endIcon={<FilterIcon />}
             onClick={(event) => {
               setFiltersMenuAnchorElement(event.currentTarget);
@@ -406,6 +412,7 @@ const DataFilters = ({
     ),
     [
       isFiltersMenuOpen,
+      isDisabled,
       filterPopoverCurrentFilter,
       isFilterPopoverOpen,
       filtersMenuAnchorElement,
@@ -659,6 +666,8 @@ const DataFilters = ({
                 <SearchField
                   value={searchValue}
                   label={t("filters.search.label")}
+                  placeholder={t("filters.search.label")}
+                  isDisabled={isDisabled}
                   onClear={() => {
                     setSearchValue("");
                     onChangeSearch("");

package/src/labs/DataTable.tsx

@@ -12,7 +12,7 @@
 
 import {
   MRT_Updater,
-  MRT_Virtualizer,
+  MRT_RowVirtualizer,
   MRT_RowData,
   MRT_TableOptions,
   useMaterialReactTable,
@@ -426,12 +426,9 @@ const DataTable = ({
   );
 
   const rowVirtualizerInstanceRef =
-    useRef<MRT_Virtualizer<HTMLDivElement, HTMLTableRowElement>>(null);
+    useRef<MRT_RowVirtualizer<HTMLDivElement, HTMLTableRowElement>>(null);
 
-  const getRowFromTableAndSetHovered = (
-    table: TableType,
-    id: MRT_RowData["id"],
-  ) => {
+  const setHoveredRow = (table: TableType, id: MRT_RowData["id"]) => {
     if (id) {
       const nextRow: MRT_RowData = table.getRow(id);
 
@@ -501,12 +498,12 @@ const DataTable = ({
 
           if (isArrowDown || isArrowUp) {
             const nextIndex = isArrowDown ? index + 1 : index - 1;
-            getRowFromTableAndSetHovered(table, data[nextIndex]?.id);
+            setHoveredRow(table, data[nextIndex]?.id);
           }
         } else {
           if (isArrowDown || isArrowUp) {
             const nextIndex = isArrowDown ? row.index + 1 : row.index - 1;
-            getRowFromTableAndSetHovered(table, data[nextIndex]?.id);
+            setHoveredRow(table, data[nextIndex]?.id);
           }
         }
       } else {
@@ -605,7 +602,6 @@ const DataTable = ({
           align: "right",
           sx: {
             width: "unset",
-            // TODO: Make the right padding here 16px (and possibly adapt it to the density padding)
           },
         },
       },

package/src/labs/FileUpload.tsx

@@ -0,0 +1,301 @@
+/*!
+ * 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 {
+  memo,
+  ChangeEvent,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+import styled from "@emotion/styled";
+import { useTranslation } from "react-i18next";
+
+import { Button } from "../Button";
+import { UploadIcon } from "../icons.generated";
+import { Field, RenderFieldComponentProps } from "../Field";
+import { FieldComponentProps } from "../FieldComponentProps";
+import { FileUploadPreview } from "./FileUploadPreview";
+import { FileUploadIllustration } from "./FileUploadIllustration";
+import {
+  useOdysseyDesignTokens,
+  DesignTokens,
+} from "../OdysseyDesignTokensContext";
+import { Support } from "../Typography";
+
+export const fileUploadTypes = ["single", "multiple"] as const;
+export const fileUploadVariants = [
+  "button",
+  "dragAndDrop",
+  "dragAndDropWithIcon",
+] as const;
+
+const BaseInputWrapper = styled.div({
+  position: "relative",
+  alignSelf: "flex-start",
+
+  input: {
+    position: "absolute",
+    width: "100%",
+    height: "100%",
+    opacity: 0,
+  },
+});
+
+const InputContainer = styled(BaseInputWrapper)<{
+  odysseyDesignTokens: DesignTokens;
+}>(
+  {
+    display: "flex",
+    alignSelf: "unset",
+    alignItems: "center",
+    justifyContent: "center",
+
+    "&:has(input:focus)": {
+      borderStyle: "solid",
+    },
+  },
+  ({ odysseyDesignTokens }) => ({
+    padding: `${odysseyDesignTokens.Spacing6} ${odysseyDesignTokens.Spacing3}`,
+    border: `1px dashed ${odysseyDesignTokens.HueNeutral300}`,
+    borderRadius: odysseyDesignTokens.BorderRadiusMain,
+    transition: `border-color ${odysseyDesignTokens.TransitionTimingMain}, box-shadow ${odysseyDesignTokens.TransitionTimingMain}`,
+
+    "&:hover": {
+      borderColor: odysseyDesignTokens.HueNeutral700,
+    },
+
+    "&:has(input:focus)": {
+      borderColor: odysseyDesignTokens.FocusOutlineColorPrimary,
+      boxShadow: `0 0 0 1px ${odysseyDesignTokens.FocusOutlineColorPrimary}`,
+      outline: `${odysseyDesignTokens.FocusOutlineWidthMain} ${odysseyDesignTokens.FocusOutlineStyle} transparent`,
+      outlineOffset: odysseyDesignTokens.FocusOutlineOffsetTight,
+    },
+
+    "&:has(input:disabled)": {
+      backgroundColor: odysseyDesignTokens.HueNeutral50,
+      border: `1px solid ${odysseyDesignTokens.BorderColorDisabled}`,
+      color: odysseyDesignTokens.TypographyColorDisabled,
+
+      "&:hover": {
+        borderColor: odysseyDesignTokens.BorderColorDisabled,
+      },
+    },
+  }),
+);
+
+const ButtonAndInfoContainer = styled.div({
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  justifyContent: "center",
+});
+
+export type FileUploadProps = {
+  /**
+   * an array of file types the user is able to upload. @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept#unique_file_type_specifiers for examples
+   */
+  acceptedFileTypes?: string[];
+  /**
+   * The label for the `input` element.
+   */
+  label: string;
+  /**
+   * Function that is called when the list of ifles to upload is changed
+   */
+  onChange: (files: File[]) => void;
+  /**
+   * Either `single` or `multiple`. If `multiple`, multiple files can be uploaded
+   */
+  type?: (typeof fileUploadTypes)[number];
+  /**
+   * Either `button`, `dragAndDrop` or `dragAndDropWithIcon`. Will determine how component appears visually
+   */
+  variant: (typeof fileUploadVariants)[number];
+} & Pick<
+  FieldComponentProps,
+  | "errorMessage"
+  | "hint"
+  | "HintLinkComponent"
+  | "id"
+  | "isDisabled"
+  | "isOptional"
+>;
+
+const FileUpload = ({
+  acceptedFileTypes,
+  errorMessage,
+  id,
+  isDisabled = false,
+  isOptional,
+  hint,
+  HintLinkComponent,
+  label,
+  onChange,
+  type,
+  variant,
+}: FileUploadProps) => {
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+  const { t } = useTranslation();
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [filesToUpload, setFilesToUpload] = useState<File[]>([]);
+
+  useEffect(() => {
+    onChange(filesToUpload);
+  }, [filesToUpload, onChange]);
+
+  const updateFilesToUpload = useCallback(
+    (event: ChangeEvent<HTMLInputElement>) => {
+      const { files } = event.target;
+
+      if (files && files.length > 0) {
+        const mergedFiles =
+          type === "multiple"
+            ? [...filesToUpload, ...files]
+            : ([...files] satisfies File[] as File[]);
+
+        setFilesToUpload(mergedFiles);
+      }
+
+      // reset input value to allow re-upload of a file with the same name
+      event.target.value = "";
+    },
+    [type, filesToUpload],
+  );
+
+  const triggerFileInputClick = useCallback(() => {
+    inputRef.current?.focus();
+  }, [inputRef]);
+
+  const removeFileFromFilesToUploadList = useCallback<(name: string) => void>(
+    (name) => {
+      const deletedFileFilteredOut = filesToUpload.filter(
+        (file) => file.name !== name,
+      );
+      setFilesToUpload(deletedFileFilteredOut);
+    },
+    [filesToUpload],
+  );
+
+  const renderFileInput = useCallback(
+    ({
+      ariaDescribedBy,
+      errorMessageElementId,
+      id,
+      labelElementId,
+    }: RenderFieldComponentProps) => {
+      const fileNames = filesToUpload.map((file) => file.name);
+      const acceptedFileTypesAsString = acceptedFileTypes?.join(",");
+
+      const Input = () => (
+        <input
+          accept={acceptedFileTypesAsString}
+          aria-describedby={ariaDescribedBy}
+          aria-errormessage={errorMessageElementId}
+          aria-labelledby={labelElementId}
+          disabled={isDisabled}
+          id={id}
+          multiple={type === "multiple"}
+          onChange={updateFilesToUpload}
+          ref={inputRef}
+          title=""
+          type="file"
+        />
+      );
+
+      if (variant === "button") {
+        return (
+          <>
+            <BaseInputWrapper>
+              <Input />
+              <Button
+                isDisabled={isDisabled}
+                label={t("fileupload.button.text")}
+                onClick={triggerFileInputClick}
+                startIcon={<UploadIcon />}
+                variant="secondary"
+              />
+            </BaseInputWrapper>
+            <FileUploadPreview
+              fileNames={fileNames}
+              onFileRemove={removeFileFromFilesToUploadList}
+              isDisabled={isDisabled}
+            />
+          </>
+        );
+      }
+
+      return (
+        <>
+          <InputContainer odysseyDesignTokens={odysseyDesignTokens}>
+            <Input />
+            <ButtonAndInfoContainer>
+              {variant === "dragAndDropWithIcon" && <FileUploadIllustration />}
+              <Support color="textSecondary">
+                {t("fileupload.prompt.text")}
+              </Support>
+              <Button
+                isDisabled={isDisabled}
+                label={t("fileupload.button.text")}
+                onClick={triggerFileInputClick}
+                startIcon={<UploadIcon />}
+                variant="secondary"
+              />
+            </ButtonAndInfoContainer>
+          </InputContainer>
+          <FileUploadPreview
+            fileNames={fileNames}
+            onFileRemove={removeFileFromFilesToUploadList}
+            isDisabled={isDisabled}
+          />
+        </>
+      );
+    },
+    [
+      acceptedFileTypes,
+      filesToUpload,
+      isDisabled,
+      inputRef,
+      odysseyDesignTokens,
+      removeFileFromFilesToUploadList,
+      triggerFileInputClick,
+      t,
+      type,
+      updateFilesToUpload,
+      variant,
+    ],
+  );
+
+  return (
+    <>
+      <Field
+        errorMessage={errorMessage}
+        fieldType="single"
+        hasVisibleLabel
+        hint={hint}
+        HintLinkComponent={HintLinkComponent}
+        id={id}
+        isDisabled={isDisabled}
+        isFullWidth
+        isOptional={isOptional}
+        label={label}
+        renderFieldComponent={renderFileInput}
+      />
+    </>
+  );
+};
+
+const MemoizedFileUpload = memo(FileUpload);
+MemoizedFileUpload.displayName = "FileUpload";
+
+export { MemoizedFileUpload as FileUpload };

package/src/labs/FileUploadIllustration.tsx

@@ -0,0 +1,66 @@
+/*!
+ * 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 { memo } from "react";
+import styled from "@emotion/styled";
+
+import {
+  useOdysseyDesignTokens,
+  DesignTokens,
+} from "../OdysseyDesignTokensContext";
+
+const UploadIllustrationContainer = styled.div<{
+  odysseyDesignTokens: DesignTokens;
+}>(({ odysseyDesignTokens }) => ({
+  marginBlockEnd: odysseyDesignTokens.Spacing2,
+  padding: odysseyDesignTokens.Spacing3,
+  backgroundColor: odysseyDesignTokens.HueNeutral50,
+  borderRadius: "50%",
+
+  svg: {
+    display: "flex",
+    width: odysseyDesignTokens.Spacing8,
+    height: odysseyDesignTokens.Spacing8,
+  },
+}));
+
+const FileUploadIllustration = () => {
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+
+  return (
+    <UploadIllustrationContainer
+      aria-hidden="true"
+      odysseyDesignTokens={odysseyDesignTokens}
+    >
+      <svg
+        aria-hidden="true"
+        viewBox="0 0 44 45"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M32.0763 11.001C29.3564 3.7855 21.6595 -0.565827 13.7765 0.726748C5.35441 2.10773 -0.676662 9.50714 0.0603005 17.8612C0.441865 22.1865 2.56458 25.9787 5.71703 28.614L8.28246 25.545C5.90122 23.5544 4.32811 20.7209 4.04483 17.5097C3.50262 11.3633 7.94433 5.73648 14.4238 4.67404C20.9164 3.60944 27.0806 7.52016 28.6895 13.5191C28.9239 14.3932 29.7162 15.001 30.6212 15.001H32.9114C36.8985 15.001 39.9997 18.0938 39.9997 21.7505C39.9997 24.3423 38.4576 26.6352 36.1259 27.7678L37.8736 31.3658C41.4737 29.6171 43.9997 25.9917 43.9997 21.7505C43.9997 15.7428 38.963 11.001 32.9114 11.001H32.0763Z"
+          fill={odysseyDesignTokens.HueNeutral200}
+        />
+        <path
+          d="M23.9994 29.3277V44.5H19.9994V29.3289L14.4142 34.9141L11.5858 32.0857L19.7373 23.9342C20.9869 22.6845 23.0131 22.6845 24.2627 23.9342L32.4142 32.0857L29.5858 34.9141L23.9994 29.3277Z"
+          fill={odysseyDesignTokens.HueNeutral200}
+        />
+      </svg>
+    </UploadIllustrationContainer>
+  );
+};
+
+const MemoizedFileUploadIllustration = memo(FileUploadIllustration);
+MemoizedFileUploadIllustration.displayName = "FileUploadIllustration";
+
+export { MemoizedFileUploadIllustration as FileUploadIllustration };