@okta/odyssey-react-mui 0.14.2 → 0.14.3

package/src/components/Icon/index.tsx

@@ -0,0 +1,170 @@
+/*!
+ * 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.
+ */
+
+// Code automatically generated by svgr; DO NOT EDIT.
+
+export * from "./Icon";
+
+import { AddCircleIcon } from "./AddCircle";
+export * from "./AddCircle";
+
+import { AddIcon } from "./Add";
+export * from "./Add";
+
+import { AlertCircleFilledIcon } from "./AlertCircleFilled";
+export * from "./AlertCircleFilled";
+
+import { AlertCircleIcon } from "./AlertCircle";
+export * from "./AlertCircle";
+
+import { AlertTriangleFilledIcon } from "./AlertTriangleFilled";
+export * from "./AlertTriangleFilled";
+
+import { AnchorIcon } from "./Anchor";
+export * from "./Anchor";
+
+import { ArrowDownIcon } from "./ArrowDown";
+export * from "./ArrowDown";
+
+import { ArrowLeftIcon } from "./ArrowLeft";
+export * from "./ArrowLeft";
+
+import { ArrowRightIcon } from "./ArrowRight";
+export * from "./ArrowRight";
+
+import { ArrowUpIcon } from "./ArrowUp";
+export * from "./ArrowUp";
+
+import { CalendarIcon } from "./Calendar";
+export * from "./Calendar";
+
+import { CheckCircleFilledIcon } from "./CheckCircleFilled";
+export * from "./CheckCircleFilled";
+
+import { CheckIcon } from "./Check";
+export * from "./Check";
+
+import { ChevronDownIcon } from "./ChevronDown";
+export * from "./ChevronDown";
+
+import { ChevronUpIcon } from "./ChevronUp";
+export * from "./ChevronUp";
+
+import { CloseCircleFilledIcon } from "./CloseCircleFilled";
+export * from "./CloseCircleFilled";
+
+import { CloseIcon } from "./Close";
+export * from "./Close";
+
+import { CopyIcon } from "./Copy";
+export * from "./Copy";
+
+import { DeleteIcon } from "./Delete";
+export * from "./Delete";
+
+import { DownloadIcon } from "./Download";
+export * from "./Download";
+
+import { DragHandleIcon } from "./DragHandle";
+export * from "./DragHandle";
+
+import { EditIcon } from "./Edit";
+export * from "./Edit";
+
+import { ExternalLinkIcon } from "./ExternalLink";
+export * from "./ExternalLink";
+
+import { EyeOffIcon } from "./EyeOff";
+export * from "./EyeOff";
+
+import { EyeIcon } from "./Eye";
+export * from "./Eye";
+
+import { FilterIcon } from "./Filter";
+export * from "./Filter";
+
+import { GlobeIcon } from "./Globe";
+export * from "./Globe";
+
+import { HomeIcon } from "./Home";
+export * from "./Home";
+
+import { InformationCircleFilledIcon } from "./InformationCircleFilled";
+export * from "./InformationCircleFilled";
+
+import { InformationCircleIcon } from "./InformationCircle";
+export * from "./InformationCircle";
+
+import { NotificationIcon } from "./Notification";
+export * from "./Notification";
+
+import { OverflowVerticalIcon } from "./OverflowVertical";
+export * from "./OverflowVertical";
+
+import { QuestionCircleFilledIcon } from "./QuestionCircleFilled";
+export * from "./QuestionCircleFilled";
+
+import { QuestionCircleIcon } from "./QuestionCircle";
+export * from "./QuestionCircle";
+
+import { SearchIcon } from "./Search";
+export * from "./Search";
+
+import { SettingsIcon } from "./Settings";
+export * from "./Settings";
+
+import { SubtractIcon } from "./Subtract";
+export * from "./Subtract";
+
+import { UserIcon } from "./User";
+export * from "./User";
+
+export const iconDictionary = {
+  "add-circle": AddCircleIcon,
+  add: AddIcon,
+  "alert-circle-filled": AlertCircleFilledIcon,
+  "alert-circle": AlertCircleIcon,
+  "alert-triangle-filled": AlertTriangleFilledIcon,
+  anchor: AnchorIcon,
+  "arrow-down": ArrowDownIcon,
+  "arrow-left": ArrowLeftIcon,
+  "arrow-right": ArrowRightIcon,
+  "arrow-up": ArrowUpIcon,
+  calendar: CalendarIcon,
+  "check-circle-filled": CheckCircleFilledIcon,
+  check: CheckIcon,
+  "chevron-down": ChevronDownIcon,
+  "chevron-up": ChevronUpIcon,
+  "close-circle-filled": CloseCircleFilledIcon,
+  close: CloseIcon,
+  copy: CopyIcon,
+  delete: DeleteIcon,
+  download: DownloadIcon,
+  "drag-handle": DragHandleIcon,
+  edit: EditIcon,
+  "external-link": ExternalLinkIcon,
+  "eye-off": EyeOffIcon,
+  eye: EyeIcon,
+  filter: FilterIcon,
+  globe: GlobeIcon,
+  home: HomeIcon,
+  "information-circle-filled": InformationCircleFilledIcon,
+  "information-circle": InformationCircleIcon,
+  notification: NotificationIcon,
+  "overflow-vertical": OverflowVerticalIcon,
+  "question-circle-filled": QuestionCircleFilledIcon,
+  "question-circle": QuestionCircleIcon,
+  search: SearchIcon,
+  settings: SettingsIcon,
+  subtract: SubtractIcon,
+  user: UserIcon,
+};

package/src/components/Icon/types.ts

@@ -0,0 +1,20 @@
+/*!
+ * Copyright (c) 2021-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 { SvgIconProps } from "./SvgIcon";
+
+export interface SvgIconNoChildrenProps extends Omit<SvgIconProps, "children"> {
+  /**
+   * Children are never rendered.
+   */
+  children?: never;
+}

package/src/components/index.ts

@@ -12,3 +12,4 @@
 
 export * from "./PasswordInput";
 export * from "./Link";
+export * from "./Icon";

package/src/themes/odyssey/components.ts

@@ -207,10 +207,9 @@ export const components: ThemeOptions["components"] = {
       },
     ],
     styleOverrides: {
-      root: () => ({
+      root: ({ theme }) => ({
         fontWeight: 600,
-        paddingBlock: "0.85714286rem",
-        paddingInline: "0.85714286rem",
+        padding: `calc(${theme.spacing(3)} - 1px) ${theme.spacing(3)}`,
         display: "inline-block",
         position: "relative",
         marginBlock: "0",
@@ -239,7 +238,7 @@ export const components: ThemeOptions["components"] = {
 
         "&:disabled": {
           cursor: "not-allowed",
-          pointerEvents: "inherit", // in order to have cursor: not-allowed, must change pointer-events from 'none'
+          pointerEvents: "inherit", // in order to have cursor: not-allowed, must change pointer-events from "none"
         },
 
         ".MuiButton-startIcon > *:nth-of-type(1)": {
@@ -312,6 +311,25 @@ export const components: ThemeOptions["components"] = {
       }),
     },
   },
+  MuiFormControl: {
+    styleOverrides: {
+      root: ({ ownerState, theme }) => ({
+        width: "100%",
+        maxWidth: "32rem",
+        ...(ownerState.margin === "normal" && {
+          marginTop: 0,
+          marginBottom: theme.spacing(4),
+        }),
+        ...(ownerState.margin === "dense" && {
+          marginTop: 0,
+          marginBottom: theme.spacing(4),
+        }),
+        ...(ownerState.fullWidth && {
+          maxWidth: "100%",
+        }),
+      }),
+    },
+  },
   MuiFormControlLabel: {
     styleOverrides: {
       root: ({ ownerState }) => ({
@@ -399,6 +417,29 @@ export const components: ThemeOptions["components"] = {
       },
     },
   },
+  MuiInputLabel: {
+    defaultProps: {
+      disableAnimation: true,
+      shrink: false,
+    },
+    styleOverrides: {
+      root: ({ ownerState }) => ({
+        // @ts-expect-error: Incorrect typing in MUI
+        ...(ownerState.formControl && {
+          position: "initial",
+          transform: "none",
+        }),
+        ...(ownerState.variant === "outlined" && {
+          pointerEvents: "initial",
+          transform: "none",
+          maxWidth: "100%",
+          ...(ownerState.size === "small" && {
+            transform: "none",
+          }),
+        }),
+      }),
+    },
+  },
   MuiLink: {
     styleOverrides: {
       root: {
@@ -469,6 +510,41 @@ export const components: ThemeOptions["components"] = {
       },
     ],
   },
+  MuiNativeSelect: {
+    defaultProps: {
+      variant: "outlined",
+    },
+    styleOverrides: {
+      icon: ({ theme }) => ({
+        color: theme.palette.text.primary,
+      }),
+    },
+  },
+  MuiOutlinedInput: {
+    defaultProps: {
+      notched: false,
+    },
+    styleOverrides: {
+      root: {
+        "&.Mui-disabled": {
+          pointerEvents: "none",
+        },
+      },
+      input: ({ theme }) => ({
+        padding: `calc(${theme.spacing(3)} - 1px) ${theme.spacing(3)}`,
+        border: "1px solid transparent",
+      }),
+      notchedOutline: ({ theme }) => ({
+        borderColor: theme.palette.grey[500],
+        ".MuiOutlinedInput-root:hover &": {
+          borderColor: theme.palette.primary.main,
+        },
+        ".MuiOutlinedInput-root.Mui-error:hover &": {
+          borderColor: theme.palette.error.dark,
+        },
+      }),
+    },
+  },
   MuiRadio: {
     defaultProps: {
       size: "small",