@okta/odyssey-react-mui 0.21.3 → 0.22.0

package/src/index.ts

@@ -14,9 +14,7 @@ export {
   Alert,
   AlertTitle,
   Box,
-  Button,
   Chip,
-  CircularProgress,
   createTheme,
   CssBaseline,
   Dialog,
@@ -67,9 +65,7 @@ export type {
   AlertProps,
   AlertTitleProps,
   BoxProps,
-  ButtonProps,
   ChipProps,
-  CircularProgressProps,
   CssBaselineProps,
   DialogProps,
   DialogActionsProps,
@@ -124,10 +120,16 @@ export { default as FavoriteIcon } from "@mui/icons-material/Favorite";
 
 export { deepmerge, visuallyHidden } from "@mui/utils";
 
+export * from "./Autocomplete";
 export * from "./Banner";
+export * from "./Button";
 export * from "./Checkbox";
 export * from "./CheckboxGroup";
+export * from "./CircularProgress";
 export * from "./createUniqueId";
+export * from "./FieldError";
+export * from "./FieldHint";
+export * from "./FieldLabel";
 export * from "./Icon";
 export * from "./iconDictionary";
 export * from "./Infobox";
@@ -136,10 +138,14 @@ export * from "./MenuButton";
 export * from "./MenuItem";
 export * from "./OdysseyCacheProvider";
 export * from "./OdysseyThemeProvider";
-export * from "./PasswordInput";
+export * from "./PasswordField";
 export * from "./Radio";
 export * from "./RadioGroup";
+export * from "./ScreenReaderText";
+export * from "./SearchField";
 export * from "./Status";
+export * from "./Tag";
+export * from "./TagList";
 export * from "./TextField";
 export * from "./theme";
 export * from "./ThemeProvider";

package/src/theme/components.tsx

@@ -36,6 +36,7 @@ import {
   CheckCircleFilledIcon,
   ChevronDownIcon,
   CloseCircleFilledIcon,
+  CloseIcon,
   InformationCircleFilledIcon,
   SubtractIcon,
 } from "../iconDictionary";
@@ -144,6 +145,68 @@ export const components: ThemeOptions["components"] = {
       }),
     },
   },
+  MuiAutocomplete: {
+    defaultProps: {
+      autoHighlight: true,
+      autoSelect: false,
+      blurOnSelect: false,
+      clearIcon: <CloseIcon />,
+      clearOnEscape: true,
+      disableClearable: false,
+      disabledItemsFocusable: false,
+      disableListWrap: false,
+      disablePortal: false,
+      filterSelectedOptions: false,
+      fullWidth: false,
+      handleHomeEndKeys: true,
+      includeInputInList: true,
+      limitTags: -1,
+      openOnFocus: false,
+      popupIcon: <ChevronDownIcon />,
+      selectOnFocus: true,
+    },
+    styleOverrides: {
+      clearIndicator: ({ theme }) => ({
+        marginRight: "unset",
+        padding: theme.spacing(1),
+      }),
+      endAdornment: ({ theme, ownerState }) => ({
+        display: "flex",
+        gap: theme.spacing(1),
+        top: `calc(${theme.spacing(2)} - ${theme.mixins.borderWidth})`,
+        right: theme.spacing(2),
+        maxHeight: "unset",
+        alignItems: "center",
+        whiteSpace: "nowrap",
+        color: theme.palette.action.active,
+
+        ...(ownerState.disabled === true && {
+          display: "none",
+        }),
+
+        ...(ownerState.readOnly === true && {
+          display: "none",
+        }),
+      }),
+      loading: ({ theme }) => ({
+        paddingBlock: theme.spacing(3),
+        paddingInline: theme.spacing(4),
+      }),
+      popupIndicator: ({ theme }) => ({
+        padding: theme.spacing(1),
+        marginRight: "unset",
+      }),
+      inputRoot: ({ theme, ownerState }) => ({
+        ...(ownerState.readOnly === true && {
+          backgroundColor: theme.palette.grey[50],
+
+          [`&:not(:hover)`]: {
+            borderColor: "transparent",
+          },
+        }),
+      }),
+    },
+  },
   MuiBackdrop: {
     styleOverrides: {
       root: ({ ownerState }) => ({
@@ -255,7 +318,7 @@ export const components: ThemeOptions["components"] = {
         }),
       },
       {
-        props: { size: "s" },
+        props: { size: "small" },
         style: ({ theme }) => ({
           paddingBlock: `calc(${theme.spacing(2)} - 1px)`,
           paddingInline: `calc(${theme.spacing(2)} - 1px)`,
@@ -263,7 +326,7 @@ export const components: ThemeOptions["components"] = {
         }),
       },
       {
-        props: { size: "l" },
+        props: { size: "large" },
         style: ({ theme }) => ({
           paddingBlock: `calc(${theme.spacing(4)} - 1px)`,
           paddingInline: `calc(${theme.spacing(4)} - 1px)`,
@@ -468,19 +531,6 @@ export const components: ThemeOptions["components"] = {
           paddingInlineEnd: theme.spacing(2),
         }),
 
-        [`& .${chipClasses.deleteIcon}`]: {
-          WebkitTapHighlightColor: "transparent",
-          color: theme.palette.text.secondary,
-          fontSize: "1em",
-          cursor: "pointer",
-          margin: "0",
-          marginInlineStart: theme.spacing(2),
-
-          "&:hover": {
-            color: theme.palette.text.primary,
-          },
-        },
-
         [`&.${chipClasses.disabled}`]: {
           opacity: 1,
           pointerEvents: "none",
@@ -539,10 +589,32 @@ export const components: ThemeOptions["components"] = {
             },
           },
         }),
+
+        [`.${inputBaseClasses.root}.${inputBaseClasses.disabled} &`]: {
+          backgroundColor: theme.palette.grey[200],
+        },
       }),
+
       label: {
         padding: 0,
       },
+
+      deleteIcon: ({ theme }) => ({
+        WebkitTapHighlightColor: "transparent",
+        color: theme.palette.text.secondary,
+        fontSize: "1em",
+        cursor: "pointer",
+        margin: "0",
+        marginInlineStart: theme.spacing(2),
+
+        "&:hover": {
+          color: theme.palette.text.primary,
+        },
+
+        [`.${inputBaseClasses.root}.${inputBaseClasses.disabled} &`]: {
+          display: "none",
+        },
+      }),
     },
   },
   MuiCircularProgress: {
@@ -1112,9 +1184,6 @@ export const components: ThemeOptions["components"] = {
     },
   },
   MuiInputAdornment: {
-    defaultProps: {
-      variant: "outlined",
-    },
     styleOverrides: {
       root: ({ theme, ownerState }) => ({
         display: "flex",

package/src/theme/components.types.ts

@@ -33,14 +33,6 @@ declare module "@mui/material/Button" {
     contained: false;
     outlined: false;
   }
-  interface ButtonPropsSizeOverrides {
-    s: true;
-    m: true;
-    l: true;
-    small: false;
-    medium: false;
-    large: false;
-  }
   interface ButtonPropsColorOverrides {
     inherit: false;
     primary: false;

package/dist/PasswordInput.js

@@ -1,87 +0,0 @@
-import _Box from "@mui/material/Box";
-import _OutlinedInput from "@mui/material/OutlinedInput";
-import _InputAdornment from "@mui/material/InputAdornment";
-import _Tooltip from "@mui/material/Tooltip";
-import _IconButton from "@mui/material/IconButton";
-import _Visibility from "@mui/icons-material/Visibility";
-import _VisibilityOff from "@mui/icons-material/VisibilityOff";
-import _InputLabel from "@mui/material/InputLabel";
-
-/*!
- * 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 { forwardRef, useState, useMemo } from "react";
-import { useUniqueId } from "./useUniqueId.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-export const PasswordInput = forwardRef((props, ref) => {
-  const {
-    tooltipLabel,
-    id,
-    label,
-    defaultValue: password = "",
-    inputProps,
-    ...rest
-  } = props;
-  const [values, setValues] = useState({
-    password,
-    showPassword: false
-  });
-
-  const handlePasswordChange = event => {
-    setValues({ ...values,
-      password: event.target.value
-    });
-    props.onChange?.(event);
-  };
-
-  const handleClickShowPassword = () => {
-    setValues({ ...values,
-      showPassword: !values.showPassword
-    });
-  };
-
-  const handleMouseDownPassword = event => {
-    event.preventDefault();
-  };
-
-  const tooltipTitle = useMemo(() => {
-    return typeof tooltipLabel === "function" ? tooltipLabel(values.showPassword === false) : tooltipLabel;
-  }, [values, tooltipLabel]);
-  const uniqueId = useUniqueId(id);
-  return _jsxs(_Box, {
-    children: [_jsx(_InputLabel, {
-      htmlFor: uniqueId,
-      children: label
-    }), _jsx(_OutlinedInput, { ...rest,
-      id: uniqueId,
-      inputProps: inputProps,
-      inputRef: ref,
-      onChange: handlePasswordChange,
-      type: values.showPassword ? "text" : "password",
-      value: values.password,
-      endAdornment: _jsx(_InputAdornment, {
-        position: "end",
-        children: _jsx(_Tooltip, {
-          title: tooltipTitle,
-          children: _jsx(_IconButton, {
-            "aria-label": "toggle password visibility",
-            onClick: handleClickShowPassword,
-            onMouseDown: handleMouseDownPassword,
-            edge: "end",
-            children: values.showPassword ? _jsx(_VisibilityOff, {}) : _jsx(_Visibility, {})
-          })
-        })
-      })
-    })]
-  });
-});
-//# sourceMappingURL=PasswordInput.js.map

package/dist/PasswordInput.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"PasswordInput.js","names":["forwardRef","useState","useMemo","useUniqueId","PasswordInput","props","ref","tooltipLabel","id","label","defaultValue","password","inputProps","rest","values","setValues","showPassword","handlePasswordChange","event","target","value","onChange","handleClickShowPassword","handleMouseDownPassword","preventDefault","tooltipTitle","uniqueId"],"sources":["../src/PasswordInput.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 { forwardRef, useState, useMemo } from \"react\";\nimport type { Ref, ChangeEvent, MouseEvent } from \"react\";\nimport type { OutlinedInputProps, TooltipProps } from \"@mui/material\";\nimport {\n  Tooltip,\n  IconButton,\n  Box,\n  InputLabel,\n  OutlinedInput,\n  InputAdornment,\n} from \"@mui/material\";\nimport { Visibility, VisibilityOff } from \"@mui/icons-material\";\nimport { useUniqueId } from \"./useUniqueId\";\n\ninterface State {\n  password: string;\n  showPassword: boolean;\n}\n\nexport interface PasswordInputProps\n  extends Omit<OutlinedInputProps, \"type\" | \"label\" | \"defaultValue\" | \"ref\"> {\n  ref?: Ref<HTMLInputElement>;\n  defaultValue?: string;\n  label: string;\n  tooltipLabel?:\n    | TooltipProps[\"title\"]\n    | ((isHidden: boolean) => TooltipProps[\"title\"]);\n}\n\nexport const PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>(\n  (props, ref) => {\n    const {\n      tooltipLabel,\n      id,\n      label,\n      defaultValue: password = \"\",\n      inputProps,\n      ...rest\n    } = props;\n\n    const [values, setValues] = useState<State>({\n      password,\n      showPassword: false,\n    });\n\n    const handlePasswordChange = (event: ChangeEvent<HTMLInputElement>) => {\n      setValues({ ...values, password: event.target.value });\n      props.onChange?.(event);\n    };\n\n    const handleClickShowPassword = () => {\n      setValues({\n        ...values,\n        showPassword: !values.showPassword,\n      });\n    };\n\n    const handleMouseDownPassword = (event: MouseEvent<HTMLButtonElement>) => {\n      event.preventDefault();\n    };\n\n    const tooltipTitle = useMemo(() => {\n      return typeof tooltipLabel === \"function\"\n        ? tooltipLabel(values.showPassword === false)\n        : tooltipLabel;\n    }, [values, tooltipLabel]);\n\n    const uniqueId = useUniqueId(id);\n\n    return (\n      <Box>\n        <InputLabel htmlFor={uniqueId}>{label}</InputLabel>\n        <OutlinedInput\n          {...rest}\n          id={uniqueId}\n          inputProps={inputProps}\n          inputRef={ref}\n          onChange={handlePasswordChange}\n          type={values.showPassword ? \"text\" : \"password\"}\n          value={values.password}\n          endAdornment={\n            <InputAdornment position=\"end\">\n              <Tooltip title={tooltipTitle}>\n                <IconButton\n                  aria-label=\"toggle password visibility\"\n                  onClick={handleClickShowPassword}\n                  onMouseDown={handleMouseDownPassword}\n                  edge=\"end\"\n                >\n                  {values.showPassword ? <VisibilityOff /> : <Visibility />}\n                </IconButton>\n              </Tooltip>\n            </InputAdornment>\n          }\n        />\n      </Box>\n    );\n  }\n);\n"],"mappings":";;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA,SAASA,UAAT,EAAqBC,QAArB,EAA+BC,OAA/B,QAA8C,OAA9C;SAYSC,W;;;AAiBT,OAAO,MAAMC,aAAa,GAAGJ,UAAU,CACrC,CAACK,KAAD,EAAQC,GAAR,KAAgB;EACd,MAAM;IACJC,YADI;IAEJC,EAFI;IAGJC,KAHI;IAIJC,YAAY,EAAEC,QAAQ,GAAG,EAJrB;IAKJC,UALI;IAMJ,GAAGC;EANC,IAOFR,KAPJ;EASA,MAAM,CAACS,MAAD,EAASC,SAAT,IAAsBd,QAAQ,CAAQ;IAC1CU,QAD0C;IAE1CK,YAAY,EAAE;EAF4B,CAAR,CAApC;;EAKA,MAAMC,oBAAoB,GAAIC,KAAD,IAA0C;IACrEH,SAAS,CAAC,EAAE,GAAGD,MAAL;MAAaH,QAAQ,EAAEO,KAAK,CAACC,MAAN,CAAaC;IAApC,CAAD,CAAT;IACAf,KAAK,CAACgB,QAAN,GAAiBH,KAAjB;EACD,CAHD;;EAKA,MAAMI,uBAAuB,GAAG,MAAM;IACpCP,SAAS,CAAC,EACR,GAAGD,MADK;MAERE,YAAY,EAAE,CAACF,MAAM,CAACE;IAFd,CAAD,CAAT;EAID,CALD;;EAOA,MAAMO,uBAAuB,GAAIL,KAAD,IAA0C;IACxEA,KAAK,CAACM,cAAN;EACD,CAFD;;EAIA,MAAMC,YAAY,GAAGvB,OAAO,CAAC,MAAM;IACjC,OAAO,OAAOK,YAAP,KAAwB,UAAxB,GACHA,YAAY,CAACO,MAAM,CAACE,YAAP,KAAwB,KAAzB,CADT,GAEHT,YAFJ;EAGD,CAJ2B,EAIzB,CAACO,MAAD,EAASP,YAAT,CAJyB,CAA5B;EAMA,MAAMmB,QAAQ,GAAGvB,WAAW,CAACK,EAAD,CAA5B;EAEA,OACE;IAAA,WACE;MAAY,OAAO,EAAEkB,QAArB;MAAA,UAAgCjB;IAAhC,EADF,EAEE,0BACMI,IADN;MAEE,EAAE,EAAEa,QAFN;MAGE,UAAU,EAAEd,UAHd;MAIE,QAAQ,EAAEN,GAJZ;MAKE,QAAQ,EAAEW,oBALZ;MAME,IAAI,EAAEH,MAAM,CAACE,YAAP,GAAsB,MAAtB,GAA+B,UANvC;MAOE,KAAK,EAAEF,MAAM,CAACH,QAPhB;MAQE,YAAY,EACV;QAAgB,QAAQ,EAAC,KAAzB;QAAA,UACE;UAAS,KAAK,EAAEc,YAAhB;UAAA,UACE;YACE,cAAW,4BADb;YAEE,OAAO,EAAEH,uBAFX;YAGE,WAAW,EAAEC,uBAHf;YAIE,IAAI,EAAC,KAJP;YAAA,UAMGT,MAAM,CAACE,YAAP,GAAsB,wBAAtB,GAA0C;UAN7C;QADF;MADF;IATJ,EAFF;EAAA,EADF;AA4BD,CApEoC,CAAhC"}

package/dist/src/PasswordInput.d.ts

@@ -1,21 +0,0 @@
-/*!
- * 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 type { Ref } from "react";
-import type { OutlinedInputProps, TooltipProps } from "@mui/material";
-export interface PasswordInputProps extends Omit<OutlinedInputProps, "type" | "label" | "defaultValue" | "ref"> {
-    ref?: Ref<HTMLInputElement>;
-    defaultValue?: string;
-    label: string;
-    tooltipLabel?: TooltipProps["title"] | ((isHidden: boolean) => TooltipProps["title"]);
-}
-export declare const PasswordInput: import("react").ForwardRefExoticComponent<Pick<PasswordInputProps, "label" | "name" | "onChange" | "value" | "classes" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "disabled" | "sx" | "autoFocus" | "inputProps" | "inputRef" | "readOnly" | "required" | "error" | "fullWidth" | "margin" | "size" | "autoComplete" | "rows" | "slotProps" | "slots" | "components" | "componentsProps" | "disableInjectingGlobalStyles" | "endAdornment" | "inputComponent" | "multiline" | "renderSuffix" | "maxRows" | "minRows" | "startAdornment" | "notched" | "tooltipLabel"> & import("react").RefAttributes<HTMLInputElement>>;
-//# sourceMappingURL=PasswordInput.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"PasswordInput.d.ts","sourceRoot":"","sources":["../../src/PasswordInput.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAGH,OAAO,KAAK,EAAE,GAAG,EAA2B,MAAM,OAAO,CAAC;AAC1D,OAAO,KAAK,EAAE,kBAAkB,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAiBtE,MAAM,WAAW,kBACf,SAAQ,IAAI,CAAC,kBAAkB,EAAE,MAAM,GAAG,OAAO,GAAG,cAAc,GAAG,KAAK,CAAC;IAC3E,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAC5B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EACT,YAAY,CAAC,OAAO,CAAC,GACrB,CAAC,CAAC,QAAQ,EAAE,OAAO,KAAK,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC;CACpD;AAED,eAAO,MAAM,aAAa,sgKAqEzB,CAAC"}

package/src/PasswordInput.test.tsx

@@ -1,51 +0,0 @@
-/*!
- * 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 { render, screen } from "@testing-library/react";
-
-import { a11yCheck } from "./a11yCheck";
-import { PasswordInput } from "./PasswordInput";
-
-const label = "Password";
-const tooltipOnLabel = "Show password";
-const tooltipOffLabel = "Hide password";
-
-describe("PasswordInput", () => {
-  it("renders into the document", () => {
-    render(<PasswordInput label={label} tooltipLabel={tooltipOnLabel} />);
-    expect(screen.getByLabelText(label)).toBeVisible();
-  });
-
-  it("has a button that changes the type when clicked", () => {
-    const tooltipLabel = (isHidden: boolean) => {
-      return isHidden ? tooltipOnLabel : tooltipOffLabel;
-    };
-    render(
-      <PasswordInput
-        label={label}
-        tooltipLabel={tooltipLabel}
-        defaultValue="Imma password"
-      />
-    );
-    const inputElement = screen.getByLabelText(label);
-    expect(inputElement).toHaveValue("Imma password");
-    expect(inputElement).toHaveAttribute("type", "password");
-    const eyeButton = screen.getByRole("button");
-    expect(eyeButton).toBeInTheDocument();
-    eyeButton.click();
-    expect(inputElement).toHaveAttribute("type", "text");
-  });
-
-  a11yCheck(() =>
-    render(<PasswordInput label="input label" tooltipLabel="tooltip label" />)
-  );
-});

package/src/PasswordInput.tsx

@@ -1,111 +0,0 @@
-/*!
- * 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 { forwardRef, useState, useMemo } from "react";
-import type { Ref, ChangeEvent, MouseEvent } from "react";
-import type { OutlinedInputProps, TooltipProps } from "@mui/material";
-import {
-  Tooltip,
-  IconButton,
-  Box,
-  InputLabel,
-  OutlinedInput,
-  InputAdornment,
-} from "@mui/material";
-import { Visibility, VisibilityOff } from "@mui/icons-material";
-import { useUniqueId } from "./useUniqueId";
-
-interface State {
-  password: string;
-  showPassword: boolean;
-}
-
-export interface PasswordInputProps
-  extends Omit<OutlinedInputProps, "type" | "label" | "defaultValue" | "ref"> {
-  ref?: Ref<HTMLInputElement>;
-  defaultValue?: string;
-  label: string;
-  tooltipLabel?:
-    | TooltipProps["title"]
-    | ((isHidden: boolean) => TooltipProps["title"]);
-}
-
-export const PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>(
-  (props, ref) => {
-    const {
-      tooltipLabel,
-      id,
-      label,
-      defaultValue: password = "",
-      inputProps,
-      ...rest
-    } = props;
-
-    const [values, setValues] = useState<State>({
-      password,
-      showPassword: false,
-    });
-
-    const handlePasswordChange = (event: ChangeEvent<HTMLInputElement>) => {
-      setValues({ ...values, password: event.target.value });
-      props.onChange?.(event);
-    };
-
-    const handleClickShowPassword = () => {
-      setValues({
-        ...values,
-        showPassword: !values.showPassword,
-      });
-    };
-
-    const handleMouseDownPassword = (event: MouseEvent<HTMLButtonElement>) => {
-      event.preventDefault();
-    };
-
-    const tooltipTitle = useMemo(() => {
-      return typeof tooltipLabel === "function"
-        ? tooltipLabel(values.showPassword === false)
-        : tooltipLabel;
-    }, [values, tooltipLabel]);
-
-    const uniqueId = useUniqueId(id);
-
-    return (
-      <Box>
-        <InputLabel htmlFor={uniqueId}>{label}</InputLabel>
-        <OutlinedInput
-          {...rest}
-          id={uniqueId}
-          inputProps={inputProps}
-          inputRef={ref}
-          onChange={handlePasswordChange}
-          type={values.showPassword ? "text" : "password"}
-          value={values.password}
-          endAdornment={
-            <InputAdornment position="end">
-              <Tooltip title={tooltipTitle}>
-                <IconButton
-                  aria-label="toggle password visibility"
-                  onClick={handleClickShowPassword}
-                  onMouseDown={handleMouseDownPassword}
-                  edge="end"
-                >
-                  {values.showPassword ? <VisibilityOff /> : <Visibility />}
-                </IconButton>
-              </Tooltip>
-            </InputAdornment>
-          }
-        />
-      </Box>
-    );
-  }
-);