@okta/odyssey-react-mui 1.14.4 → 1.14.6

package/dist/labs/FileUpload.js

@@ -0,0 +1,195 @@
+/*!
+ * 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, useCallback, useEffect, useRef, useState } from "react";
+import styled from "@emotion/styled";
+import { useTranslation } from "react-i18next";
+import { Button } from "../Button.js";
+import { UploadIcon } from "../icons.generated/index.js";
+import { Field } from "../Field.js";
+import { FileUploadPreview } from "./FileUploadPreview.js";
+import { FileUploadIllustration } from "./FileUploadIllustration.js";
+import { useOdysseyDesignTokens } from "../OdysseyDesignTokensContext.js";
+import { Support } from "../Typography.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+export const fileUploadTypes = ["single", "multiple"];
+export const fileUploadVariants = ["button", "dragAndDrop", "dragAndDropWithIcon"];
+const BaseInputWrapper = styled.div({
+  position: "relative",
+  alignSelf: "flex-start",
+  input: {
+    position: "absolute",
+    width: "100%",
+    height: "100%",
+    opacity: 0
+  }
+});
+const InputContainer = styled(BaseInputWrapper)({
+  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"
+});
+const FileUpload = ({
+  acceptedFileTypes,
+  errorMessage,
+  id,
+  isDisabled = false,
+  isOptional,
+  hint,
+  HintLinkComponent,
+  label,
+  onChange,
+  type,
+  variant
+}) => {
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+  const {
+    t
+  } = useTranslation();
+  const inputRef = useRef(null);
+  const [filesToUpload, setFilesToUpload] = useState([]);
+  useEffect(() => {
+    onChange(filesToUpload);
+  }, [filesToUpload, onChange]);
+  const updateFilesToUpload = useCallback(event => {
+    const {
+      files
+    } = event.target;
+    if (files && files.length > 0) {
+      const mergedFiles = type === "multiple" ? [...filesToUpload, ...files] : [...files];
+      setFilesToUpload(mergedFiles);
+    }
+    event.target.value = "";
+  }, [type, filesToUpload]);
+  const triggerFileInputClick = useCallback(() => {
+    inputRef.current?.focus();
+  }, [inputRef]);
+  const removeFileFromFilesToUploadList = useCallback(name => {
+    const deletedFileFilteredOut = filesToUpload.filter(file => file.name !== name);
+    setFilesToUpload(deletedFileFilteredOut);
+  }, [filesToUpload]);
+  const renderFileInput = useCallback(({
+    ariaDescribedBy,
+    errorMessageElementId,
+    id,
+    labelElementId
+  }) => {
+    const fileNames = filesToUpload.map(file => file.name);
+    const acceptedFileTypesAsString = acceptedFileTypes?.join(",");
+    const Input = () => _jsx("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 _jsxs(_Fragment, {
+        children: [_jsxs(BaseInputWrapper, {
+          children: [_jsx(Input, {}), _jsx(Button, {
+            isDisabled: isDisabled,
+            label: t("fileupload.button.text"),
+            onClick: triggerFileInputClick,
+            startIcon: _jsx(UploadIcon, {}),
+            variant: "secondary"
+          })]
+        }), _jsx(FileUploadPreview, {
+          fileNames: fileNames,
+          onFileRemove: removeFileFromFilesToUploadList,
+          isDisabled: isDisabled
+        })]
+      });
+    }
+    return _jsxs(_Fragment, {
+      children: [_jsxs(InputContainer, {
+        odysseyDesignTokens: odysseyDesignTokens,
+        children: [_jsx(Input, {}), _jsxs(ButtonAndInfoContainer, {
+          children: [variant === "dragAndDropWithIcon" && _jsx(FileUploadIllustration, {}), _jsx(Support, {
+            color: "textSecondary",
+            children: t("fileupload.prompt.text")
+          }), _jsx(Button, {
+            isDisabled: isDisabled,
+            label: t("fileupload.button.text"),
+            onClick: triggerFileInputClick,
+            startIcon: _jsx(UploadIcon, {}),
+            variant: "secondary"
+          })]
+        })]
+      }), _jsx(FileUploadPreview, {
+        fileNames: fileNames,
+        onFileRemove: removeFileFromFilesToUploadList,
+        isDisabled: isDisabled
+      })]
+    });
+  }, [acceptedFileTypes, filesToUpload, isDisabled, inputRef, odysseyDesignTokens, removeFileFromFilesToUploadList, triggerFileInputClick, t, type, updateFilesToUpload, variant]);
+  return _jsx(_Fragment, {
+    children: _jsx(Field, {
+      errorMessage: errorMessage,
+      fieldType: "single",
+      hasVisibleLabel: true,
+      hint: hint,
+      HintLinkComponent: HintLinkComponent,
+      id: id,
+      isDisabled: isDisabled,
+      isFullWidth: true,
+      isOptional: isOptional,
+      label: label,
+      renderFieldComponent: renderFileInput
+    })
+  });
+};
+const MemoizedFileUpload = memo(FileUpload);
+MemoizedFileUpload.displayName = "FileUpload";
+export { MemoizedFileUpload as FileUpload };
+//# sourceMappingURL=FileUpload.js.map

package/dist/labs/FileUpload.js.map

@@ -0,0 +1 @@
+{"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","odysseyDesignTokens","padding","Spacing6","Spacing3","border","HueNeutral300","borderRadius","BorderRadiusMain","transition","TransitionTimingMain","borderColor","HueNeutral700","FocusOutlineColorPrimary","boxShadow","outline","FocusOutlineWidthMain","FocusOutlineStyle","outlineOffset","FocusOutlineOffsetTight","backgroundColor","HueNeutral50","BorderColorDisabled","color","TypographyColorDisabled","ButtonAndInfoContainer","flexDirection","FileUpload","acceptedFileTypes","errorMessage","id","isDisabled","isOptional","hint","HintLinkComponent","label","onChange","type","variant","t","inputRef","filesToUpload","setFilesToUpload","updateFilesToUpload","event","files","target","length","mergedFiles","value","triggerFileInputClick","current","focus","removeFileFromFilesToUploadList","name","deletedFileFilteredOut","filter","file","renderFileInput","ariaDescribedBy","errorMessageElementId","labelElementId","fileNames","map","acceptedFileTypesAsString","join","Input","accept","disabled","multiple","ref","title","children","onClick","startIcon","onFileRemove","fieldType","hasVisibleLabel","isFullWidth","renderFieldComponent","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}>(\n  {\n    display: \"flex\",\n    alignSelf: \"unset\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n\n    \"&:has(input:focus)\": {\n      borderStyle: \"solid\",\n    },\n  },\n  ({ odysseyDesignTokens }) => ({\n    padding: `${odysseyDesignTokens.Spacing6} ${odysseyDesignTokens.Spacing3}`,\n    border: `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\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  | \"isOptional\"\n>;\n\nconst FileUpload = ({\n  acceptedFileTypes,\n  errorMessage,\n  id,\n  isDisabled = false,\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?.focus();\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 fileNames = filesToUpload.map((file) => file.name);\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            <FileUploadPreview\n              fileNames={fileNames}\n              onFileRemove={removeFileFromFilesToUploadList}\n              isDisabled={isDisabled}\n            />\n          </>\n        );\n      }\n\n      return (\n        <>\n          <InputContainer odysseyDesignTokens={odysseyDesignTokens}>\n            <Input />\n            <ButtonAndInfoContainer>\n              {variant === \"dragAndDropWithIcon\" && <FileUploadIllustration />}\n              <Support color=\"textSecondary\">\n                {t(\"fileupload.prompt.text\")}\n              </Support>\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          <FileUploadPreview\n            fileNames={fileNames}\n            onFileRemove={removeFileFromFilesToUploadList}\n            isDisabled={isDisabled}\n          />\n        </>\n      );\n    },\n    [\n      acceptedFileTypes,\n      filesToUpload,\n      isDisabled,\n      inputRef,\n      odysseyDesignTokens,\n      removeFileFromFilesToUploadList,\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\n        isOptional={isOptional}\n        label={label}\n        renderFieldComponent={renderFileInput}\n      />\n    </>\n  );\n};\n\nconst MemoizedFileUpload = memo(FileUpload);\nMemoizedFileUpload.displayName = \"FileUpload\";\n\nexport { MemoizedFileUpload as FileUpload };\n"],"mappings":"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"}

package/dist/labs/FileUploadIllustration.js

@@ -0,0 +1,54 @@
+/*!
+ * 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 } from "../OdysseyDesignTokensContext.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const UploadIllustrationContainer = styled.div(({
+  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 _jsx(UploadIllustrationContainer, {
+    "aria-hidden": "true",
+    odysseyDesignTokens: odysseyDesignTokens,
+    children: _jsxs("svg", {
+      "aria-hidden": "true",
+      viewBox: "0 0 44 45",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [_jsx("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
+      }), _jsx("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
+      })]
+    })
+  });
+};
+const MemoizedFileUploadIllustration = memo(FileUploadIllustration);
+MemoizedFileUploadIllustration.displayName = "FileUploadIllustration";
+export { MemoizedFileUploadIllustration as FileUploadIllustration };
+//# sourceMappingURL=FileUploadIllustration.js.map

package/dist/labs/FileUploadIllustration.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileUploadIllustration.js","names":["memo","styled","useOdysseyDesignTokens","jsx","_jsx","jsxs","_jsxs","UploadIllustrationContainer","div","odysseyDesignTokens","marginBlockEnd","Spacing2","padding","Spacing3","backgroundColor","HueNeutral50","borderRadius","svg","display","width","Spacing8","height","FileUploadIllustration","children","viewBox","fill","xmlns","d","HueNeutral200","MemoizedFileUploadIllustration","displayName"],"sources":["../../src/labs/FileUploadIllustration.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 { memo } from \"react\";\nimport styled from \"@emotion/styled\";\n\nimport {\n  useOdysseyDesignTokens,\n  DesignTokens,\n} from \"../OdysseyDesignTokensContext\";\n\nconst UploadIllustrationContainer = styled.div<{\n  odysseyDesignTokens: DesignTokens;\n}>(({ odysseyDesignTokens }) => ({\n  marginBlockEnd: odysseyDesignTokens.Spacing2,\n  padding: odysseyDesignTokens.Spacing3,\n  backgroundColor: odysseyDesignTokens.HueNeutral50,\n  borderRadius: \"50%\",\n\n  svg: {\n    display: \"flex\",\n    width: odysseyDesignTokens.Spacing8,\n    height: odysseyDesignTokens.Spacing8,\n  },\n}));\n\nconst FileUploadIllustration = () => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  return (\n    <UploadIllustrationContainer\n      aria-hidden=\"true\"\n      odysseyDesignTokens={odysseyDesignTokens}\n    >\n      <svg\n        aria-hidden=\"true\"\n        viewBox=\"0 0 44 45\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          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\"\n          fill={odysseyDesignTokens.HueNeutral200}\n        />\n        <path\n          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\"\n          fill={odysseyDesignTokens.HueNeutral200}\n        />\n      </svg>\n    </UploadIllustrationContainer>\n  );\n};\n\nconst MemoizedFileUploadIllustration = memo(FileUploadIllustration);\nMemoizedFileUploadIllustration.displayName = \"FileUploadIllustration\";\n\nexport { MemoizedFileUploadIllustration as FileUploadIllustration };\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,IAAI,QAAQ,OAAO;AAC5B,OAAOC,MAAM,MAAM,iBAAiB;AAAC,SAGnCC,sBAAsB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAIxB,MAAMC,2BAA2B,GAAGN,MAAM,CAACO,GAAG,CAE3C,CAAC;EAAEC;AAAoB,CAAC,MAAM;EAC/BC,cAAc,EAAED,mBAAmB,CAACE,QAAQ;EAC5CC,OAAO,EAAEH,mBAAmB,CAACI,QAAQ;EACrCC,eAAe,EAAEL,mBAAmB,CAACM,YAAY;EACjDC,YAAY,EAAE,KAAK;EAEnBC,GAAG,EAAE;IACHC,OAAO,EAAE,MAAM;IACfC,KAAK,EAAEV,mBAAmB,CAACW,QAAQ;IACnCC,MAAM,EAAEZ,mBAAmB,CAACW;EAC9B;AACF,CAAC,CAAC,CAAC;AAEH,MAAME,sBAAsB,GAAGA,CAAA,KAAM;EACnC,MAAMb,mBAAmB,GAAGP,sBAAsB,CAAC,CAAC;EAEpD,OACEE,IAAA,CAACG,2BAA2B;IAC1B,eAAY,MAAM;IAClBE,mBAAmB,EAAEA,mBAAoB;IAAAc,QAAA,EAEzCjB,KAAA;MACE,eAAY,MAAM;MAClBkB,OAAO,EAAC,WAAW;MACnBC,IAAI,EAAC,MAAM;MACXC,KAAK,EAAC,4BAA4B;MAAAH,QAAA,GAElCnB,IAAA;QACEuB,CAAC,EAAC,ilBAAilB;QACnlBF,IAAI,EAAEhB,mBAAmB,CAACmB;MAAc,CACzC,CAAC,EACFxB,IAAA;QACEuB,CAAC,EAAC,wLAAwL;QAC1LF,IAAI,EAAEhB,mBAAmB,CAACmB;MAAc,CACzC,CAAC;IAAA,CACC;EAAC,CACqB,CAAC;AAElC,CAAC;AAED,MAAMC,8BAA8B,GAAG7B,IAAI,CAACsB,sBAAsB,CAAC;AACnEO,8BAA8B,CAACC,WAAW,GAAG,wBAAwB;AAErE,SAASD,8BAA8B,IAAIP,sBAAsB"}

package/dist/labs/FileUploadPreview.js

@@ -0,0 +1,109 @@
+import _IconButton from "@mui/material/IconButton";
+/*!
+ * 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, useCallback } from "react";
+import styled from "@emotion/styled";
+import { useTranslation } from "react-i18next";
+import { useOdysseyDesignTokens } from "../OdysseyDesignTokensContext.js";
+import { DeleteIcon } from "../icons.generated/index.js";
+import { MuiPropsContext } from "../MuiPropsContext.js";
+import { Tooltip } from "../Tooltip.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const PreviewContainer = styled.div(({
+  isDisabled,
+  odysseyDesignTokens
+}) => ({
+  color: isDisabled ? odysseyDesignTokens.TypographyColorDisabled : "inherit",
+  marginBlockStart: odysseyDesignTokens.Spacing2,
+  pointerEvents: isDisabled ? "none" : "auto"
+}));
+const UploadedFileContainer = styled.div({
+  display: "flex",
+  justifyContent: "space-between",
+  alignItems: "center",
+  button: {
+    transform: "scale(0)"
+  },
+  "&:hover, &:focus-within, &:focus": {
+    button: {
+      transform: "scale(1)"
+    }
+  }
+}, ({
+  odysseyDesignTokens
+}) => ({
+  padding: `${odysseyDesignTokens.Spacing1} ${odysseyDesignTokens.Spacing2}`,
+  borderRadius: odysseyDesignTokens.BorderRadiusMain,
+  transition: `background-color ${odysseyDesignTokens.TransitionTimingMain}`,
+  "&:hover, &:focus-within": {
+    backgroundColor: odysseyDesignTokens.HueNeutral100
+  },
+  "&:focus": {
+    borderColor: odysseyDesignTokens.FocusOutlineColorPrimary,
+    boxShadow: `0 0 0 2px ${odysseyDesignTokens.FocusOutlineColorPrimary}`,
+    outline: `${odysseyDesignTokens.FocusOutlineWidthMain} ${odysseyDesignTokens.FocusOutlineStyle} transparent`
+  }
+}));
+const UploadedFile = ({
+  name,
+  onFileRemove
+}) => {
+  const {
+    t
+  } = useTranslation();
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+  const deleteHandler = useCallback(() => {
+    onFileRemove?.(name);
+  }, [onFileRemove, name]);
+  const renderDeleteButton = useCallback(muiProps => {
+    return _jsx(_IconButton, {
+      ...muiProps,
+      "aria-label": t("fileupload.removefile.text"),
+      onClick: deleteHandler,
+      size: "small",
+      children: _jsx(DeleteIcon, {})
+    });
+  }, [deleteHandler, t]);
+  return _jsxs(UploadedFileContainer, {
+    tabIndex: 0,
+    odysseyDesignTokens: odysseyDesignTokens,
+    children: [name, _jsx(Tooltip, {
+      ariaType: "description",
+      placement: "top",
+      text: t("fileupload.removefile.text"),
+      children: _jsx(MuiPropsContext.Consumer, {
+        children: renderDeleteButton
+      })
+    })]
+  });
+};
+const FileUploadPreview = ({
+  fileNames,
+  isDisabled,
+  onFileRemove
+}) => {
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+  return _jsx(PreviewContainer, {
+    isDisabled: isDisabled,
+    odysseyDesignTokens: odysseyDesignTokens,
+    children: fileNames?.map((name, index) => _jsx(UploadedFile, {
+      onFileRemove: onFileRemove,
+      name: name
+    }, `${index}-${name}`))
+  });
+};
+const MemoizedFileUploadPreview = memo(FileUploadPreview);
+MemoizedFileUploadPreview.displayName = "FileUploadPreview";
+export { MemoizedFileUploadPreview as FileUploadPreview };
+//# sourceMappingURL=FileUploadPreview.js.map

package/dist/labs/FileUploadPreview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileUploadPreview.js","names":["memo","useCallback","styled","useTranslation","useOdysseyDesignTokens","DeleteIcon","MuiPropsContext","Tooltip","jsx","_jsx","jsxs","_jsxs","PreviewContainer","div","isDisabled","odysseyDesignTokens","color","TypographyColorDisabled","marginBlockStart","Spacing2","pointerEvents","UploadedFileContainer","display","justifyContent","alignItems","button","transform","padding","Spacing1","borderRadius","BorderRadiusMain","transition","TransitionTimingMain","backgroundColor","HueNeutral100","borderColor","FocusOutlineColorPrimary","boxShadow","outline","FocusOutlineWidthMain","FocusOutlineStyle","UploadedFile","name","onFileRemove","t","deleteHandler","renderDeleteButton","muiProps","_IconButton","onClick","size","children","tabIndex","ariaType","placement","text","Consumer","FileUploadPreview","fileNames","map","index","MemoizedFileUploadPreview","displayName"],"sources":["../../src/labs/FileUploadPreview.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 { memo, useCallback } from \"react\";\nimport styled from \"@emotion/styled\";\nimport { IconButton } from \"@mui/material\";\nimport { useTranslation } from \"react-i18next\";\n\nimport { FileUploadProps } from \"./FileUpload\";\nimport {\n  useOdysseyDesignTokens,\n  DesignTokens,\n} from \"../OdysseyDesignTokensContext\";\nimport { DeleteIcon } from \"../icons.generated\";\nimport { MuiPropsContext, MuiPropsContextType } from \"../MuiPropsContext\";\nimport { Tooltip } from \"../Tooltip\";\n\nconst PreviewContainer = styled.div<{\n  isDisabled: FileUploadProps[\"isDisabled\"];\n  odysseyDesignTokens: DesignTokens;\n}>(({ isDisabled, odysseyDesignTokens }) => ({\n  color: isDisabled ? odysseyDesignTokens.TypographyColorDisabled : \"inherit\",\n  marginBlockStart: odysseyDesignTokens.Spacing2,\n  pointerEvents: isDisabled ? \"none\" : \"auto\",\n}));\n\nconst UploadedFileContainer = styled.div<{ odysseyDesignTokens: DesignTokens }>(\n  {\n    display: \"flex\",\n    justifyContent: \"space-between\",\n    alignItems: \"center\",\n\n    button: {\n      transform: \"scale(0)\",\n    },\n\n    \"&:hover, &:focus-within, &:focus\": {\n      button: {\n        transform: \"scale(1)\",\n      },\n    },\n  },\n  ({ odysseyDesignTokens }) => ({\n    padding: `${odysseyDesignTokens.Spacing1} ${odysseyDesignTokens.Spacing2}`,\n    borderRadius: odysseyDesignTokens.BorderRadiusMain,\n    transition: `background-color ${odysseyDesignTokens.TransitionTimingMain}`,\n\n    \"&:hover, &:focus-within\": {\n      backgroundColor: odysseyDesignTokens.HueNeutral100,\n    },\n\n    \"&:focus\": {\n      borderColor: odysseyDesignTokens.FocusOutlineColorPrimary,\n      boxShadow: `0 0 0 2px ${odysseyDesignTokens.FocusOutlineColorPrimary}`,\n      outline: `${odysseyDesignTokens.FocusOutlineWidthMain} ${odysseyDesignTokens.FocusOutlineStyle} transparent`,\n    },\n  }),\n);\n\ntype UploadedFileProps = {\n  name: string;\n  onFileRemove?: (name: string) => void;\n};\n\nconst UploadedFile = ({ name, onFileRemove }: UploadedFileProps) => {\n  const { t } = useTranslation();\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  const deleteHandler = useCallback(() => {\n    onFileRemove?.(name);\n  }, [onFileRemove, name]);\n\n  const renderDeleteButton = useCallback(\n    (muiProps: MuiPropsContextType) => {\n      return (\n        <IconButton\n          {...muiProps}\n          aria-label={t(\"fileupload.removefile.text\")}\n          onClick={deleteHandler}\n          size=\"small\"\n        >\n          <DeleteIcon />\n        </IconButton>\n      );\n    },\n    [deleteHandler, t],\n  );\n\n  return (\n    <UploadedFileContainer\n      // tabindex added to make this element focusable\n      tabIndex={0}\n      odysseyDesignTokens={odysseyDesignTokens}\n    >\n      {name}\n      <Tooltip\n        ariaType=\"description\"\n        placement=\"top\"\n        text={t(\"fileupload.removefile.text\")}\n      >\n        <MuiPropsContext.Consumer>\n          {renderDeleteButton}\n        </MuiPropsContext.Consumer>\n      </Tooltip>\n    </UploadedFileContainer>\n  );\n};\n\ntype FileUploadPreviewProps = {\n  fileNames: string[];\n  isDisabled: FileUploadProps[\"isDisabled\"];\n  onFileRemove?: (name: string) => void;\n};\n\nconst FileUploadPreview = ({\n  fileNames,\n  isDisabled,\n  onFileRemove,\n}: FileUploadPreviewProps) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  return (\n    <PreviewContainer\n      isDisabled={isDisabled}\n      odysseyDesignTokens={odysseyDesignTokens}\n    >\n      {fileNames?.map((name, index) => (\n        <UploadedFile\n          key={`${index}-${name}`}\n          onFileRemove={onFileRemove}\n          name={name}\n        />\n      ))}\n    </PreviewContainer>\n  );\n};\n\nconst MemoizedFileUploadPreview = memo(FileUploadPreview);\nMemoizedFileUploadPreview.displayName = \"FileUploadPreview\";\n\nexport { MemoizedFileUploadPreview as FileUploadPreview };\n"],"mappings":"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"}

package/dist/labs/index.js

@@ -17,6 +17,7 @@ export * from "./datePickerTheme.js";
 export * from "./DataTablePagination.js";
 export * from "./DataFilters.js";
 export * from "./Drawer.js";
+export * from "./FileUpload.js";
 export * from "./materialReactTableTypes.js";
 export * from "./StaticTable.js";
 export * from "./PaginatedTable.js";

package/dist/labs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["AdapterDateFns","LocalizationProvider"],"sources":["../../src/labs/index.ts"],"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\nexport { AdapterDateFns } from \"@mui/x-date-pickers/AdapterDateFns\";\nexport { LocalizationProvider } from \"@mui/x-date-pickers\";\nexport type { LocalizationProviderProps } from \"@mui/x-date-pickers\";\n\nexport * from \"./DatePicker\";\nexport * from \"./datePickerTheme\";\n\nexport * from \"./DataTablePagination\";\nexport * from \"./DataFilters\";\n\nexport * from \"./Drawer\";\n\nexport * from \"./materialReactTableTypes\";\nexport * from \"./StaticTable\";\nexport * from \"./PaginatedTable\";\n\nexport * from \"./GroupPicker\";\nexport * from \"./VirtualizedAutocomplete\";\n\nexport * from \"./Switch\";\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,cAAc,QAAQ,oCAAoC;AACnE,SAASC,oBAAoB,QAAQ,qBAAqB;AAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA"}
+{"version":3,"file":"index.js","names":["AdapterDateFns","LocalizationProvider"],"sources":["../../src/labs/index.ts"],"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\nexport { AdapterDateFns } from \"@mui/x-date-pickers/AdapterDateFns\";\nexport { LocalizationProvider } from \"@mui/x-date-pickers\";\nexport type { LocalizationProviderProps } from \"@mui/x-date-pickers\";\n\nexport * from \"./DatePicker\";\nexport * from \"./datePickerTheme\";\n\n/** @deprecated Will be removed in a future Odyssey version in lieu of the one shipping with DataTable */\nexport * from \"./DataTablePagination\";\nexport * from \"./DataFilters\";\nexport * from \"./Drawer\";\nexport * from \"./FileUpload\";\nexport * from \"./materialReactTableTypes\";\n/** @deprecated Will be removed in a future Odyssey version in lieu of DataTable */\nexport * from \"./StaticTable\";\n/** @deprecated Will be removed in a future Odyssey version in lieu of DataTable */\nexport * from \"./PaginatedTable\";\n\nexport * from \"./GroupPicker\";\nexport * from \"./VirtualizedAutocomplete\";\n\nexport * from \"./Switch\";\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,cAAc,QAAQ,oCAAoC;AACnE,SAASC,oBAAoB,QAAQ,qBAAqB;AAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA"}

package/dist/properties/ts/odyssey-react-mui.js

@@ -12,6 +12,9 @@ export const translation = {
   "filters.menuitem.any": "Any {{label}}",
   "filters.menuitem.selected": "{{selected}} selected",
   "filters.search.label": "Search",
+  "fileupload.button.text": "Add files",
+  "fileupload.prompt.text": "Drag and drop files here or click to add files",
+  "fileupload.removefile.text": "Remove file",
   "passwordfield.icon.label.hide": "Hide password",
   "passwordfield.icon.label.show": "Show password",
   "severity.error": "error",
@@ -29,6 +32,15 @@ export const translation = {
   "table.fetchedrows.text": "Fetched {{totalRows}} row",
   "table.fetchedrows.text_plural": "Fetched {{totalRows}} total rows",
   "table.moreactions.arialabel": "More actions",
+  "table.noresults.heading": "There are no results.",
+  "table.noresults.text": "Try a different query.",
+  "table.pagination.loadmore": "Show more",
+  "table.pagination.next": "Next page",
+  "table.pagination.previous": "Previous page",
+  "table.pagination.page": "Page",
+  "table.pagination.rowsperpage": "Rows per page",
+  "table.pagination.rowswithtotal": "{{firstRow}}-{{lastRow}} of {{totalRows}} rows",
+  "table.pagination.rowswithouttotal": "{{firstRow}}-{{lastRow}} rows",
   "table.reorder.backward": "Send backward",
   "table.reorder.forward": "Bring forward",
   "table.reorder.toback": "Send to back",

package/dist/properties/ts/odyssey-react-mui.js.map

@@ -1 +1 @@
-{"version":3,"file":"odyssey-react-mui.js","names":["translation"],"sources":["../../../src/properties/ts/odyssey-react-mui.ts"],"sourcesContent":["export const translation = {\"breadcrumbs.home.text\":\"Home\",\"breadcrumbs.label.text\":\"Breadcrumbs\",\"close.text\":\"close\",\"fielderror.screenreader.text\":\"Error\",\"fieldlabel.optional.text\":\"Optional\",\"fieldlabel.required.text\":\"Required\",\"filters.clear.label\":\"Clear filters\",\"filters.filter.any\":\"Any\",\"filters.filter.clear\":\"Clear filter\",\"filters.filters.arialabel\":\"Filters\",\"filters.menuitem.any\":\"Any {{label}}\",\"filters.menuitem.selected\":\"{{selected}} selected\",\"filters.search.label\":\"Search\",\"passwordfield.icon.label.hide\":\"Hide password\",\"passwordfield.icon.label.show\":\"Show password\",\"severity.error\":\"error\",\"severity.info\":\"info\",\"severity.success\":\"success\",\"severity.warning\":\"warning\",\"switch.active\":\"Active\",\"switch.inactive\":\"Inactive\",\"table.actions\":\"Actions\",\"table.columnvisibility.arialabel\":\"Show/hide columns\",\"table.density.arialabel\":\"Table density\",\"table.draghandle.arialabel\":\"Drag row to reorder. Or, press space or enter to start and stop reordering and esc to cancel.\",\"table.draghandle.tooltip\":\"Drag row or press space/enter key to start and stop reordering\",\"table.error\":\"Error loading data.\",\"table.fetchedrows.text\":\"Fetched {{totalRows}} row\",\"table.fetchedrows.text_plural\":\"Fetched {{totalRows}} total rows\",\"table.moreactions.arialabel\":\"More actions\",\"table.reorder.backward\":\"Send backward\",\"table.reorder.forward\":\"Bring forward\",\"table.reorder.toback\":\"Send to back\",\"table.reorder.tofront\":\"Bring to front\",\"table.rows.text\":\"{{totalRows}} row\",\"table.rows.text_plural\":\"{{totalRows}} rows\"};"],"mappings":"AAAA,OAAO,MAAMA,WAAW,GAAG;EAAC,uBAAuB,EAAC,MAAM;EAAC,wBAAwB,EAAC,aAAa;EAAC,YAAY,EAAC,OAAO;EAAC,8BAA8B,EAAC,OAAO;EAAC,0BAA0B,EAAC,UAAU;EAAC,0BAA0B,EAAC,UAAU;EAAC,qBAAqB,EAAC,eAAe;EAAC,oBAAoB,EAAC,KAAK;EAAC,sBAAsB,EAAC,cAAc;EAAC,2BAA2B,EAAC,SAAS;EAAC,sBAAsB,EAAC,eAAe;EAAC,2BAA2B,EAAC,uBAAuB;EAAC,sBAAsB,EAAC,QAAQ;EAAC,+BAA+B,EAAC,eAAe;EAAC,+BAA+B,EAAC,eAAe;EAAC,gBAAgB,EAAC,OAAO;EAAC,eAAe,EAAC,MAAM;EAAC,kBAAkB,EAAC,SAAS;EAAC,kBAAkB,EAAC,SAAS;EAAC,eAAe,EAAC,QAAQ;EAAC,iBAAiB,EAAC,UAAU;EAAC,eAAe,EAAC,SAAS;EAAC,kCAAkC,EAAC,mBAAmB;EAAC,yBAAyB,EAAC,eAAe;EAAC,4BAA4B,EAAC,+FAA+F;EAAC,0BAA0B,EAAC,gEAAgE;EAAC,aAAa,EAAC,qBAAqB;EAAC,wBAAwB,EAAC,2BAA2B;EAAC,+BAA+B,EAAC,kCAAkC;EAAC,6BAA6B,EAAC,cAAc;EAAC,wBAAwB,EAAC,eAAe;EAAC,uBAAuB,EAAC,eAAe;EAAC,sBAAsB,EAAC,cAAc;EAAC,uBAAuB,EAAC,gBAAgB;EAAC,iBAAiB,EAAC,mBAAmB;EAAC,wBAAwB,EAAC;AAAoB,CAAC"}
+{"version":3,"file":"odyssey-react-mui.js","names":["translation"],"sources":["../../../src/properties/ts/odyssey-react-mui.ts"],"sourcesContent":["export const translation = {\"breadcrumbs.home.text\":\"Home\",\"breadcrumbs.label.text\":\"Breadcrumbs\",\"close.text\":\"close\",\"fielderror.screenreader.text\":\"Error\",\"fieldlabel.optional.text\":\"Optional\",\"fieldlabel.required.text\":\"Required\",\"filters.clear.label\":\"Clear filters\",\"filters.filter.any\":\"Any\",\"filters.filter.clear\":\"Clear filter\",\"filters.filters.arialabel\":\"Filters\",\"filters.menuitem.any\":\"Any {{label}}\",\"filters.menuitem.selected\":\"{{selected}} selected\",\"filters.search.label\":\"Search\",\"fileupload.button.text\":\"Add files\",\"fileupload.prompt.text\":\"Drag and drop files here or click to add files\",\"fileupload.removefile.text\":\"Remove file\",\"passwordfield.icon.label.hide\":\"Hide password\",\"passwordfield.icon.label.show\":\"Show password\",\"severity.error\":\"error\",\"severity.info\":\"info\",\"severity.success\":\"success\",\"severity.warning\":\"warning\",\"switch.active\":\"Active\",\"switch.inactive\":\"Inactive\",\"table.actions\":\"Actions\",\"table.columnvisibility.arialabel\":\"Show/hide columns\",\"table.density.arialabel\":\"Table density\",\"table.draghandle.arialabel\":\"Drag row to reorder. Or, press space or enter to start and stop reordering and esc to cancel.\",\"table.draghandle.tooltip\":\"Drag row or press space/enter key to start and stop reordering\",\"table.error\":\"Error loading data.\",\"table.fetchedrows.text\":\"Fetched {{totalRows}} row\",\"table.fetchedrows.text_plural\":\"Fetched {{totalRows}} total rows\",\"table.moreactions.arialabel\":\"More actions\",\"table.noresults.heading\":\"There are no results.\",\"table.noresults.text\":\"Try a different query.\",\"table.pagination.loadmore\":\"Show more\",\"table.pagination.next\":\"Next page\",\"table.pagination.previous\":\"Previous page\",\"table.pagination.page\":\"Page\",\"table.pagination.rowsperpage\":\"Rows per page\",\"table.pagination.rowswithtotal\":\"{{firstRow}}-{{lastRow}} of {{totalRows}} rows\",\"table.pagination.rowswithouttotal\":\"{{firstRow}}-{{lastRow}} rows\",\"table.reorder.backward\":\"Send backward\",\"table.reorder.forward\":\"Bring forward\",\"table.reorder.toback\":\"Send to back\",\"table.reorder.tofront\":\"Bring to front\",\"table.rows.text\":\"{{totalRows}} row\",\"table.rows.text_plural\":\"{{totalRows}} rows\"};"],"mappings":"AAAA,OAAO,MAAMA,WAAW,GAAG;EAAC,uBAAuB,EAAC,MAAM;EAAC,wBAAwB,EAAC,aAAa;EAAC,YAAY,EAAC,OAAO;EAAC,8BAA8B,EAAC,OAAO;EAAC,0BAA0B,EAAC,UAAU;EAAC,0BAA0B,EAAC,UAAU;EAAC,qBAAqB,EAAC,eAAe;EAAC,oBAAoB,EAAC,KAAK;EAAC,sBAAsB,EAAC,cAAc;EAAC,2BAA2B,EAAC,SAAS;EAAC,sBAAsB,EAAC,eAAe;EAAC,2BAA2B,EAAC,uBAAuB;EAAC,sBAAsB,EAAC,QAAQ;EAAC,wBAAwB,EAAC,WAAW;EAAC,wBAAwB,EAAC,gDAAgD;EAAC,4BAA4B,EAAC,aAAa;EAAC,+BAA+B,EAAC,eAAe;EAAC,+BAA+B,EAAC,eAAe;EAAC,gBAAgB,EAAC,OAAO;EAAC,eAAe,EAAC,MAAM;EAAC,kBAAkB,EAAC,SAAS;EAAC,kBAAkB,EAAC,SAAS;EAAC,eAAe,EAAC,QAAQ;EAAC,iBAAiB,EAAC,UAAU;EAAC,eAAe,EAAC,SAAS;EAAC,kCAAkC,EAAC,mBAAmB;EAAC,yBAAyB,EAAC,eAAe;EAAC,4BAA4B,EAAC,+FAA+F;EAAC,0BAA0B,EAAC,gEAAgE;EAAC,aAAa,EAAC,qBAAqB;EAAC,wBAAwB,EAAC,2BAA2B;EAAC,+BAA+B,EAAC,kCAAkC;EAAC,6BAA6B,EAAC,cAAc;EAAC,yBAAyB,EAAC,uBAAuB;EAAC,sBAAsB,EAAC,wBAAwB;EAAC,2BAA2B,EAAC,WAAW;EAAC,uBAAuB,EAAC,WAAW;EAAC,2BAA2B,EAAC,eAAe;EAAC,uBAAuB,EAAC,MAAM;EAAC,8BAA8B,EAAC,eAAe;EAAC,gCAAgC,EAAC,gDAAgD;EAAC,mCAAmC,EAAC,+BAA+B;EAAC,wBAAwB,EAAC,eAAe;EAAC,uBAAuB,EAAC,eAAe;EAAC,sBAAsB,EAAC,cAAc;EAAC,uBAAuB,EAAC,gBAAgB;EAAC,iBAAiB,EAAC,mBAAmB;EAAC,wBAAwB,EAAC;AAAoB,CAAC"}

package/dist/src/DataTable/DataTable.d.ts

@@ -9,13 +9,24 @@
  *
  * See the License for the specific language governing permissions and limitations under the License.
  */
-/// <reference types="react" />
-import { MRT_RowData, MRT_SortingState, MRT_TableOptions } from "material-react-table";
-import { densityValues } from "./constants";
-import { paginationTypeValues } from "../labs/DataTablePagination";
+import { ReactNode } from "react";
+import { MRT_RowData, MRT_SortingState, MRT_TableOptions, MRT_RowSelectionState } from "material-react-table";
+import { densityValues, paginationTypeValues } from "./constants";
 import { DataFilter } from "../labs/DataFilters";
 import { DataTableRowActionsProps } from "./DataTableRowActions";
+import { MenuButtonProps } from "../MenuButton";
 import { DataTableRowSelectionState } from ".";
+export type DataTableGetDataType = {
+    page?: number;
+    resultsPerPage?: number;
+    search?: string;
+    filters?: DataFilter[];
+    sort?: MRT_SortingState;
+};
+export type DataTableOnReorderRowsType = {
+    rowId: string;
+    newRowIndex: number;
+};
 export type DataTableProps = {
     /**
      * The columns that make up the table
@@ -31,8 +42,8 @@ export type DataTableProps = {
      */
     getRowId?: MRT_TableOptions<MRT_RowData>["getRowId"];
     /**
-     * The initial density of the table. This is available even if the table density
-     * isn't changeable.
+     * The initial density (height & padding) of the table rows. This is available even if the
+     * table density isn't changeable by the end user via hasChangeableDensity.
      */
     initialDensity?: (typeof densityValues)[number];
     /**
@@ -91,21 +102,12 @@ export type DataTableProps = {
      * Callback that fires whenever the table needs to fetch new data, due to changes in
      * page, results per page, search input, filters, or sorting
      */
-    getData: ({ page, resultsPerPage, search, filters, sort, }: {
-        page?: number;
-        resultsPerPage?: number;
-        search?: string;
-        filters?: DataFilter[];
-        sort?: MRT_SortingState;
-    }) => MRT_TableOptions<MRT_RowData>["data"] | Promise<MRT_TableOptions<MRT_RowData>["data"]>;
+    getData: ({ page, resultsPerPage, search, filters, sort, }: DataTableGetDataType) => MRT_TableOptions<MRT_RowData>["data"] | Promise<MRT_TableOptions<MRT_RowData>["data"]>;
     /**
      * Callback that fires when the user reorders rows within the table. Can be used
      * to propogate order change to the backend.
      */
-    onReorderRows?: ({ rowId, newRowIndex, }: {
-        rowId: string;
-        newRowIndex: number;
-    }) => void;
+    onReorderRows?: ({ rowId, newRowIndex }: DataTableOnReorderRowsType) => void;
     /**
      * The current page number.
      */
@@ -127,7 +129,23 @@ export type DataTableProps = {
      * Menu items to include in the optional actions menu on each row.
      */
     rowActionMenuItems?: DataTableRowActionsProps["rowActionMenuItems"];
+    /**
+     * Menu items to include in the bulk actions menu, which appears above the table if a row or rows are selected
+     */
+    bulkActionMenuItems?: (selectedRows: MRT_RowSelectionState) => MenuButtonProps["children"];
+    /**
+     * If `error` is not undefined, the DataTable will indicate an error.
+     */
+    errorMessage?: string;
+    /**
+     * The component to display when the table is displaying the initial empty state
+     */
+    emptyPlaceholder?: ReactNode;
+    /**
+     * The component to display when the query returns no results
+     */
+    noResultsPlaceholder?: ReactNode;
 };
-declare const MemoizedDataTable: import("react").MemoExoticComponent<({ columns, getRowId: getRowIdProp, currentPage, initialDensity, resultsPerPage, getData, onReorderRows, totalRows, hasSearchSubmitButton, searchDelayTime, paginationType, onChangeRowSelection, rowActionButtons, rowActionMenuItems, hasChangeableDensity, hasColumnResizing, hasColumnVisibility, hasFilters, hasPagination, hasRowReordering, hasRowSelection, hasSearch, hasSorting, }: DataTableProps) => import("react/jsx-runtime").JSX.Element>;
+declare const MemoizedDataTable: import("react").MemoExoticComponent<({ columns, getRowId: getRowIdProp, currentPage, initialDensity, resultsPerPage, getData, onReorderRows, totalRows, hasSearchSubmitButton, searchDelayTime, paginationType, onChangeRowSelection, rowActionButtons, rowActionMenuItems, hasChangeableDensity, hasColumnResizing, hasColumnVisibility, hasFilters, hasPagination, hasRowReordering, hasRowSelection, hasSearch, hasSorting, bulkActionMenuItems, errorMessage: errorMessageProp, emptyPlaceholder, noResultsPlaceholder, }: DataTableProps) => import("react/jsx-runtime").JSX.Element>;
 export { MemoizedDataTable as DataTable };
 //# sourceMappingURL=DataTable.d.ts.map

package/dist/src/DataTable/DataTable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataTable.d.ts","sourceRoot":"","sources":["../../../src/DataTable/DataTable.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"DataTable.d.ts","sourceRoot":"","sources":["../../../src/DataTable/DataTable.tsx"],"names":[],"mappings":"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"}

package/dist/src/DataTable/DataTableEmptyState.d.ts

@@ -0,0 +1,21 @@
+/*!
+ * 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 { ReactNode } from "react";
+export type DataTableEmptyStateProps = {
+    heading: string;
+    text: string;
+    primaryButton?: ReactNode;
+    secondaryButton?: ReactNode;
+};
+declare const MemoizedDataTableEmptyState: import("react").MemoExoticComponent<({ heading, text, primaryButton, secondaryButton, }: DataTableEmptyStateProps) => import("react/jsx-runtime").JSX.Element>;
+export { MemoizedDataTableEmptyState as DataTableEmptyState };
+//# sourceMappingURL=DataTableEmptyState.d.ts.map

package/dist/src/DataTable/DataTableEmptyState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableEmptyState.d.ts","sourceRoot":"","sources":["../../../src/DataTable/DataTableEmptyState.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,EAAE,SAAS,EAAQ,MAAM,OAAO,CAAC;AAoBxC,MAAM,MAAM,wBAAwB,GAAG;IACrC,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,eAAe,CAAC,EAAE,SAAS,CAAC;CAC7B,CAAC;AAuBF,QAAA,MAAM,2BAA2B,2FAhB9B,wBAAwB,6CAgBkC,CAAC;AAC9D,OAAO,EAAE,2BAA2B,IAAI,mBAAmB,EAAE,CAAC"}