@okta/odyssey-react-mui 1.14.4 → 1.14.6

package/src/labs/FileUploadPreview.tsx

@@ -0,0 +1,150 @@
+/*!
+ * 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 { IconButton } from "@mui/material";
+import { useTranslation } from "react-i18next";
+
+import { FileUploadProps } from "./FileUpload";
+import {
+  useOdysseyDesignTokens,
+  DesignTokens,
+} from "../OdysseyDesignTokensContext";
+import { DeleteIcon } from "../icons.generated";
+import { MuiPropsContext, MuiPropsContextType } from "../MuiPropsContext";
+import { Tooltip } from "../Tooltip";
+
+const PreviewContainer = styled.div<{
+  isDisabled: FileUploadProps["isDisabled"];
+  odysseyDesignTokens: DesignTokens;
+}>(({ isDisabled, odysseyDesignTokens }) => ({
+  color: isDisabled ? odysseyDesignTokens.TypographyColorDisabled : "inherit",
+  marginBlockStart: odysseyDesignTokens.Spacing2,
+  pointerEvents: isDisabled ? "none" : "auto",
+}));
+
+const UploadedFileContainer = styled.div<{ odysseyDesignTokens: DesignTokens }>(
+  {
+    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`,
+    },
+  }),
+);
+
+type UploadedFileProps = {
+  name: string;
+  onFileRemove?: (name: string) => void;
+};
+
+const UploadedFile = ({ name, onFileRemove }: UploadedFileProps) => {
+  const { t } = useTranslation();
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+
+  const deleteHandler = useCallback(() => {
+    onFileRemove?.(name);
+  }, [onFileRemove, name]);
+
+  const renderDeleteButton = useCallback(
+    (muiProps: MuiPropsContextType) => {
+      return (
+        <IconButton
+          {...muiProps}
+          aria-label={t("fileupload.removefile.text")}
+          onClick={deleteHandler}
+          size="small"
+        >
+          <DeleteIcon />
+        </IconButton>
+      );
+    },
+    [deleteHandler, t],
+  );
+
+  return (
+    <UploadedFileContainer
+      // tabindex added to make this element focusable
+      tabIndex={0}
+      odysseyDesignTokens={odysseyDesignTokens}
+    >
+      {name}
+      <Tooltip
+        ariaType="description"
+        placement="top"
+        text={t("fileupload.removefile.text")}
+      >
+        <MuiPropsContext.Consumer>
+          {renderDeleteButton}
+        </MuiPropsContext.Consumer>
+      </Tooltip>
+    </UploadedFileContainer>
+  );
+};
+
+type FileUploadPreviewProps = {
+  fileNames: string[];
+  isDisabled: FileUploadProps["isDisabled"];
+  onFileRemove?: (name: string) => void;
+};
+
+const FileUploadPreview = ({
+  fileNames,
+  isDisabled,
+  onFileRemove,
+}: FileUploadPreviewProps) => {
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+
+  return (
+    <PreviewContainer
+      isDisabled={isDisabled}
+      odysseyDesignTokens={odysseyDesignTokens}
+    >
+      {fileNames?.map((name, index) => (
+        <UploadedFile
+          key={`${index}-${name}`}
+          onFileRemove={onFileRemove}
+          name={name}
+        />
+      ))}
+    </PreviewContainer>
+  );
+};
+
+const MemoizedFileUploadPreview = memo(FileUploadPreview);
+MemoizedFileUploadPreview.displayName = "FileUploadPreview";
+
+export { MemoizedFileUploadPreview as FileUploadPreview };

package/src/labs/index.ts

@@ -17,13 +17,15 @@ export type { LocalizationProviderProps } from "@mui/x-date-pickers";
 export * from "./DatePicker";
 export * from "./datePickerTheme";
 
+/** @deprecated Will be removed in a future Odyssey version in lieu of the one shipping with DataTable */
 export * from "./DataTablePagination";
 export * from "./DataFilters";
-
 export * from "./Drawer";
-
+export * from "./FileUpload";
 export * from "./materialReactTableTypes";
+/** @deprecated Will be removed in a future Odyssey version in lieu of DataTable */
 export * from "./StaticTable";
+/** @deprecated Will be removed in a future Odyssey version in lieu of DataTable */
 export * from "./PaginatedTable";
 
 export * from "./GroupPicker";

package/src/properties/odyssey-react-mui.properties

@@ -11,6 +11,10 @@ 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.hide = Hide password
 passwordfield.icon.label.show = Show password
 severity.error = error
@@ -24,10 +28,24 @@ 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.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

package/src/properties/ts/odyssey-react-mui.ts

@@ -1 +1 @@
-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"};
+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"};

package/src/theme/components.tsx

@@ -1698,6 +1698,15 @@ export const components = ({
       styleOverrides: {
         root: {
           padding: odysseyTokens.Spacing1,
+          borderRadius: odysseyTokens.BorderRadiusMain,
+          "&:hover": {
+            backgroundColor: odysseyTokens.HueNeutral100,
+          },
+          "&:focus-visible": {
+            boxShadow: `0 0 0 2px ${odysseyTokens.HueNeutralWhite}, 0 0 0 4px ${odysseyTokens.PalettePrimaryMain}`,
+            outline: "2px solid transparent",
+            outlineOffset: "1px",
+          },
         },
       },
     },