@okta/odyssey-react-mui 1.22.0 → 1.23.0

package/src/test-selectors/querySelector.ts

@@ -11,188 +11,239 @@
  */
 
 import {
-  queries,
-  within,
-  type BoundFunctions,
-  type ByRoleOptions,
-  type GetByText,
-  GetByRole,
-} from "@testing-library/dom";
-
-import {
-  type FeatureTestSelector,
+  type AccessibleTextSelector,
+  type AriaRole,
+  type ElementChildSelector,
   type TestSelector,
-} from "./featureTestSelector";
-import { odysseyTestSelectors } from "./odysseyTestSelectors";
-
-export const interpolateString = (
-  string: string,
-  values: Record<string, string | RegExp>,
-) => {
-  const interpolatedString = eval(`
-    ${Object.entries(values)
-      .map(
-        ([key, value]) =>
-          `const ${key} = ${
-            typeof value === "string" ? JSON.stringify(value) : value
-          };`,
-      )
-      .join("")}
-
-    \`${string}\`
-  `) as string;
-
-  if (/^\/*(.+)\/$/.test(interpolatedString)) {
-    return eval(interpolatedString) as RegExp;
-  }
+  type ElementSelector,
+} from "./testSelector";
+import { getComputedAccessibleText } from "./getComputedAccessibleText";
+import {
+  getByRoleQuerySelector,
+  getByTextQuerySelector,
+  type QueryMethod,
+} from "./getByQuerySelector";
+import { getControlledElement } from "./linkedHtmlSelectors";
+import { ElementError } from "./sanityChecks";
 
-  return interpolatedString;
-};
+export type InnerQuerySelectorProps<
+  LocalTestSelector extends TestSelector,
+  LocalQueryMethod extends QueryMethod,
+> = {
+  /**
+   * Testing Library method used to query elements.
+   */
+  queryMethod?: LocalQueryMethod;
+} & (LocalTestSelector extends ElementSelector
+  ? LocalTestSelector["elementSelector"] extends {
+      role: infer Role;
+    }
+    ? Role extends AriaRole[]
+      ? {
+          /**
+           * Role is used when you have an optional `role`; otherwise, it'd baked into the metadata.
+           */
+          role: Role[number];
+        }
+      : object
+    : object
+  : object) &
+  (LocalTestSelector extends ElementSelector
+    ? {
+        /**
+         * Helps narrow down HTML selection to the correct element.
+         */
+        options: Record<
+          keyof LocalTestSelector["elementSelector"]["options"],
+          string | RegExp
+        >;
+      }
+    : object);
 
-const getByQuerySelector = ({
-  canvas,
-  method,
-  options,
+export const captureElement = <
+  LocalTestSelector extends TestSelector,
+  QuerySelectorOptions extends Record<string, string | RegExp>,
+  LocalQueryMethod extends QueryMethod = "get",
+>({
+  containerElement,
+  queryMethod,
+  querySelectorOptions,
   role,
-  text,
+  testSelector,
 }: {
-  canvas: BoundFunctions<typeof queries>;
-  method: "ByRole" | "ByLabelText" | "ByPlaceholderText" | "ByText";
-  options?: ByRoleOptions;
-  role?: Parameters<GetByRole>[1];
-  text?: Parameters<GetByText>[1];
+  containerElement: HTMLElement;
+  queryMethod: LocalQueryMethod;
+  querySelectorOptions?: QuerySelectorOptions;
+  role?: AriaRole;
+  testSelector: LocalTestSelector;
 }) => {
-  if (method === "ByRole") {
-    return canvas.getByRole(
-      // TODO: These should eventually reference `query` as the function identifier.
-      role!,
-      options,
-    );
-  } else if (method === "ByLabelText") {
-    return canvas.getByLabelText(
-      // These should eventually reference `query` as the function identifier.
-      text!, // TODO: Use TypeScript `Infer` to ensure `label` is required when it's `ByLabelText`.
-      options,
-    );
-  } else if (method === "ByPlaceholderText") {
-    return canvas.getByPlaceholderText(
-      // These should eventually reference `query` as the function identifier.
-      text!, // TODO: Use TypeScript `Infer` to ensure `label` is required when it's `ByLabelText`.
-      options,
-    );
-  } else if (method === "ByText") {
-    return canvas.getByText(
-      // These should eventually reference `query` as the function identifier.
-      text!, // TODO: Use TypeScript `Infer` to ensure `description` is required when it's `ByLabelText`.
-      options,
-    );
+  if ("elementSelector" in testSelector && querySelectorOptions) {
+    const sharedProps = {
+      element: containerElement,
+      queryMethod,
+      queryOptions: Object.fromEntries(
+        Object.entries(testSelector.elementSelector.options).map(
+          ([testSelectorOptionKey, testingLibraryOptionKey]) => [
+            testingLibraryOptionKey,
+            querySelectorOptions[testSelectorOptionKey],
+          ],
+        ),
+      ),
+    };
+
+    if (testSelector.elementSelector.method === "ByRole") {
+      return getByRoleQuerySelector({
+        ...sharedProps,
+        role:
+          Array.isArray(testSelector.elementSelector.role) || role
+            ? role || ""
+            : testSelector.elementSelector.role,
+      });
+    }
+
+    return getByTextQuerySelector({
+      ...sharedProps,
+      selectionMethod: testSelector.elementSelector.method,
+      text: testSelector.elementSelector.text,
+    });
+  } else if (
+    "isControlledElement" in testSelector &&
+    testSelector.isControlledElement
+  ) {
+    try {
+      return getControlledElement({ element: containerElement });
+    } catch (error) {
+      if (queryMethod === "query") {
+        return null;
+      }
+
+      throw error;
+    }
   }
 
   return null;
 };
 
-export const querySelector = <TestSelectors extends FeatureTestSelector>({
-  canvas,
-  templateArgs: templateArgsProp,
-  testSelectors,
-}: {
-  /**
-   * Testing Library canvas. This is usually `screen`, but Storybook uses `within(canvas)`.
-   */
-  canvas: BoundFunctions<typeof queries>;
-  templateArgs?: TestSelectors extends TestSelector
-    ? Record<
-        TestSelectors["selector"]["templateVariableNames"][number],
+export const querySelector =
+  <LocalTestSelector extends TestSelector>(
+    /**
+     * Selectors object including children and accessible text selections.
+     */
+    testSelector: LocalTestSelector,
+  ) =>
+  <LocalQueryMethod extends QueryMethod = "get">(
+    props: {
+      /**
+       * Refers to Testing Library's canvas. This is usually `screen`, but Storybook uses `within(canvas)`.
+       */
+      element: HTMLElement;
+    } & InnerQuerySelectorProps<LocalTestSelector, LocalQueryMethod>,
+  ) => {
+    const { element: containerElement, queryMethod } = props;
+
+    const capturedElement = captureElement({
+      containerElement,
+      queryMethod: queryMethod || ("get" as const),
+      querySelectorOptions: "options" in props ? props.options : undefined,
+      role: "role" in props ? (props.role as AriaRole) : undefined,
+      testSelector,
+    });
+
+    const getAccessibleText = <
+      LabelName extends LocalTestSelector extends AccessibleTextSelector
+        ? keyof LocalTestSelector["accessibleText"]
+        : never,
+    >(
+      labelName: LabelName,
+    ) => {
+      if (!capturedElement) {
+        throw new ElementError(
+          "No child HTML element available",
+          containerElement,
+        );
+      }
+
+      if (!("accessibleText" in testSelector)) {
+        throw new Error("Missing `accessibleText` in `TestSelector`");
+      }
+
+      return getComputedAccessibleText({
+        element: capturedElement,
+        type: testSelector.accessibleText[labelName],
+      });
+    };
+
+    const selectChild = <
+      ChildName extends LocalTestSelector extends ElementChildSelector
+        ? keyof LocalTestSelector["children"]
+        : keyof ElementChildSelector,
+      ChildQueryMethod extends QueryMethod = "get",
+    >(
+      childProps: {
+        name: ChildName;
+      } & InnerQuerySelectorProps<
+        LocalTestSelector extends ElementChildSelector
+          ? LocalTestSelector["children"][ChildName]
+          : TestSelector,
+        ChildQueryMethod
+      >,
+    ) => {
+      if (!capturedElement) {
+        throw new ElementError(
+          "No child HTML element available",
+          containerElement,
+        );
+      }
+
+      if (!("children" in testSelector)) {
+        throw new Error("Missing `children` in `TestSelector`");
+      }
+
+      type Options = Record<
+        LocalTestSelector extends ElementChildSelector
+          ? LocalTestSelector["children"][ChildName] extends ElementSelector
+            ? keyof LocalTestSelector["children"][ChildName]["elementSelector"]["options"]
+            : never
+          : never,
         string | RegExp
-      >
-    : never;
-  testSelectors: TestSelectors;
-}) => {
-  const element =
-    "selector" in testSelectors
-      ? getByQuerySelector({
-          canvas,
-          method: testSelectors.selector.method,
-          options:
-            templateArgsProp && testSelectors.selector.options
-              ? Object.fromEntries(
-                  Object.entries(testSelectors.selector.options).map(
-                    ([key, value]) => [
-                      key,
-                      interpolateString(value, templateArgsProp),
-                    ],
-                  ),
-                )
-              : testSelectors.selector.options,
-          ...(testSelectors.selector.method === "ByRole"
+      >;
+
+      return querySelector(
+        testSelector.children[
+          childProps.name
+        ] as LocalTestSelector extends ElementChildSelector
+          ? LocalTestSelector["children"][ChildName]
+          : TestSelector,
+      )(
+        // @ts-expect-error: Type '{ role?: AriaRole | undefined; options?: Record<LocalTestSelector extends ElementChildSelector ? LocalTestSelector["children"][ChildName] extends TestSelector ? keyof LocalTestSelector["children"][ChildName]["selector"]["options"] : string : string, string | RegExp> | undefined; element: HTMLElement...' is not assignable to type '(LocalTestSelector extends ElementChildSelector ? LocalTestSelector["children"][ChildName] : TestSelector) extends { ...; } ? Role extends AriaRole[] ? { ...; } : object : object'.ts(2345)
+        // `as testSelector.children[ChildName]` narrows the props down enough that TypeScript errors here. We're passing the correct information, but it doesn't know that, and it's difficult to fix this. -Kevin Ghadyani
+        {
+          element: capturedElement,
+          queryMethod: childProps.queryMethod,
+          ...("options" in childProps && childProps.options
             ? {
-                role: templateArgsProp
-                  ? (interpolateString(
-                      testSelectors.selector?.role,
-                      templateArgsProp,
-                    ) as string)
-                  : testSelectors.selector?.role,
+                options: childProps.options as Options,
               }
-            : {
-                text: templateArgsProp
-                  ? interpolateString(
-                      testSelectors.selector?.text,
-                      templateArgsProp,
-                    )
-                  : testSelectors.selector?.text,
-              }),
-        })
-      : null;
-
-  const select =
-    "feature" in testSelectors
-      ? <FeatureName extends keyof (typeof testSelectors)["feature"]>(
-          featureName: FeatureName,
-          templateArgs?: (typeof testSelectors)["feature"][FeatureName] extends TestSelector
-            ? Record<
-                (typeof testSelectors)["feature"][FeatureName]["selector"]["templateVariableNames"][number],
-                string | RegExp
-              >
-            : never,
-        ) =>
-          querySelector({
-            canvas: element ? within(element) : canvas,
-            templateArgs,
-            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-            // @ts-expect-error: Type 'FeatureName' cannot be used to index type 'Record<string, FeatureTestSelector>'.ts(2536)
-            testSelectors: testSelectors.feature[featureName],
-          })
-      : null;
-
-  return {
-    element,
-    select,
-  };
-};
+            : {}),
+          ...("role" in childProps && childProps.role
+            ? {
+                role: childProps.role as AriaRole,
+              }
+            : {}),
+        },
+      );
+    };
 
-export const queryOdysseySelector = <
-  ComponentName extends keyof typeof odysseyTestSelectors,
->({
-  canvas,
-  componentName,
-  templateArgs,
-}: {
-  canvas: Parameters<
-    typeof querySelector<(typeof odysseyTestSelectors)[ComponentName]>
-  >[0]["canvas"];
-  /**
-   * Name of the component you want to select within.
-   */
-  componentName: ComponentName;
-  /**
-   * String or RegExp values required for this selector.
-   */
-  templateArgs?: Parameters<
-    typeof querySelector<(typeof odysseyTestSelectors)[ComponentName]>
-  >[0]["templateArgs"];
-}) =>
-  querySelector({
-    canvas,
-    templateArgs,
-    testSelectors: odysseyTestSelectors[componentName],
-  });
+    return {
+      element: capturedElement as LocalQueryMethod extends "get"
+        ? HTMLElement
+        : HTMLElement | null,
+      getAccessibleText:
+        getAccessibleText as LocalTestSelector extends AccessibleTextSelector
+          ? typeof getAccessibleText
+          : never,
+      selectChild: selectChild as LocalTestSelector extends ElementChildSelector
+        ? typeof selectChild
+        : never,
+    };
+  };

package/src/test-selectors/sanityChecks.ts

@@ -0,0 +1,53 @@
+/*!
+ * 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.
+ */
+
+// Code modified from: https://github.com/testing-library/jest-dom/blob/main/src/utils.js
+
+export class ElementError extends Error {
+  constructor(message: string, element: HTMLElement) {
+    super(message);
+
+    this.name = "ElementError";
+
+    console.error("ElementError", element);
+  }
+}
+
+export const normalizeText = (text: string) => {
+  return text.replace(/\s+/g, " ").trim();
+};
+
+export const getWindow = (htmlElement: HTMLElement) => {
+  if (
+    !htmlElement ||
+    !htmlElement.ownerDocument ||
+    !htmlElement.ownerDocument.defaultView
+  ) {
+    throw new ElementError("Expected element to have a `window`", htmlElement);
+  }
+
+  return htmlElement.ownerDocument.defaultView!;
+};
+
+export const validateHtmlElement = (htmlElement: HTMLElement) => {
+  const window = getWindow(htmlElement);
+
+  if (
+    !(htmlElement instanceof window.SVGElement) &&
+    !(htmlElement instanceof window.HTMLElement)
+  ) {
+    throw new ElementError(
+      "Expected element to be an HTMLElement or an SVGElement",
+      htmlElement,
+    );
+  }
+};

package/src/test-selectors/testSelector.ts

@@ -0,0 +1,143 @@
+/*!
+ * 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 {
+  type ByRoleOptions,
+  type SelectorMatcherOptions,
+} from "@testing-library/dom";
+
+import {
+  type RoleSelectorMethod,
+  type TextSelectorMethod,
+} from "./getByQuerySelector";
+
+/**
+ * We can't use React's `AriaRole` because it allows any string value. We want to be very specific. This is otherwise copied straight from React's code.
+ * @see https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts#L2815
+ */
+export type AriaRole =
+  | "alert"
+  | "alertdialog"
+  | "application"
+  | "article"
+  | "banner"
+  | "button"
+  | "cell"
+  | "checkbox"
+  | "columnheader"
+  | "combobox"
+  | "complementary"
+  | "contentinfo"
+  | "definition"
+  | "dialog"
+  | "directory"
+  | "document"
+  | "feed"
+  | "figure"
+  | "form"
+  | "grid"
+  | "gridcell"
+  | "group"
+  | "heading"
+  | "img"
+  | "link"
+  | "list"
+  | "listbox"
+  | "listitem"
+  | "log"
+  | "main"
+  | "marquee"
+  | "math"
+  | "menu"
+  | "menubar"
+  | "menuitem"
+  | "menuitemcheckbox"
+  | "menuitemradio"
+  | "navigation"
+  | "none"
+  | "note"
+  | "option"
+  | "presentation"
+  | "progressbar"
+  | "radio"
+  | "radiogroup"
+  | "region"
+  | "row"
+  | "rowgroup"
+  | "rowheader"
+  | "scrollbar"
+  | "search"
+  | "searchbox"
+  | "separator"
+  | "slider"
+  | "spinbutton"
+  | "status"
+  | "switch"
+  | "tab"
+  | "table"
+  | "tablist"
+  | "tabpanel"
+  | "term"
+  | "textbox"
+  | "timer"
+  | "toolbar"
+  | "tooltip"
+  | "tree"
+  | "treegrid"
+  | "treeitem";
+
+export type ControlledElementSelector = { isControlledElement?: true };
+
+export type RoleSelectorOptions = {
+  method: RoleSelectorMethod;
+  options: Record<string, keyof ByRoleOptions>;
+  role: AriaRole | AriaRole[];
+  // | "UNKNOWN" // This should be a `Symbol`, but it can't because this is ultimately going to be JSON stringified. This type will allow passing a custom role if the component allows it: `Box`.
+};
+
+export type TextSelectorOptions = {
+  method: TextSelectorMethod;
+  options: Record<string, keyof SelectorMatcherOptions>;
+  text: string;
+};
+
+export type ElementSelectorValue = RoleSelectorOptions | TextSelectorOptions;
+
+export type ElementSelector = {
+  elementSelector: ElementSelectorValue;
+};
+
+export type ElementChildSelectorValue = Record<
+  string,
+  TestSelector & ControlledElementSelector
+>;
+
+export type ElementChildSelector = {
+  children: ElementChildSelectorValue;
+};
+
+export type AccessibleTextSelectorValue =
+  | "description"
+  | "errorMessage"
+  | "label";
+
+export type AccessibleTextSelector = {
+  /** An "accessible -> semantic" name mapping such as "`description` -> `hint`" where "description" equates to `"aria-description"`. */
+  accessibleText: Record<string, AccessibleTextSelectorValue>;
+};
+
+export type TestSelector =
+  | ElementChildSelector
+  | ElementSelector
+  | (ElementChildSelector & ElementSelector)
+  | (AccessibleTextSelector & ElementSelector)
+  | (ElementChildSelector & AccessibleTextSelector & ElementSelector);

package/src/theme/components.tsx

@@ -253,7 +253,6 @@ export const components = ({
             justifyContent: "center",
             alignItems: "center",
             borderRadius: 0,
-            border: 0,
 
             ...(ownerState.onClose !== undefined && {
               paddingInline: odysseyTokens.Spacing6,
@@ -989,7 +988,6 @@ export const components = ({
         },
       },
     },
-
     MuiChip: {
       defaultProps: {
         deleteIcon: <CloseCircleFilledIcon />,

package/dist/labs/FileUpload.js.map

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