@okta/odyssey-react-mui 1.13.11 → 1.14.2

package/dist/labs/Drawer.js

@@ -0,0 +1,172 @@
+import _Drawer from "@mui/material/Drawer";
+/*!
+ * 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 { memo, useState, useEffect, useMemo, useRef } from "react";
+import styled from "@emotion/styled";
+import { useTranslation } from "react-i18next";
+import { Button } from "../Button.js";
+import { CloseIcon } from "../icons.generated/index.js";
+import { Heading5 } from "../Typography.js";
+import { useOdysseyDesignTokens } from "../OdysseyDesignTokensContext.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export const variantValues = ["temporary", "persistent"];
+const DrawerHeader = styled("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens"
+})`
+  position: sticky;
+  top: 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 0;
+  padding: ${({
+  odysseyDesignTokens
+}) => odysseyDesignTokens.Spacing4}
+    ${({
+  odysseyDesignTokens
+}) => odysseyDesignTokens.Spacing5};
+  color: ${({
+  odysseyDesignTokens
+}) => odysseyDesignTokens.HueNeutral900};
+  background-color: ${({
+  odysseyDesignTokens
+}) => odysseyDesignTokens.HueNeutralWhite};
+  border-bottom: ${({
+  showDividers,
+  odysseyDesignTokens
+}) => showDividers ? `1px solid ${odysseyDesignTokens.HueNeutral200}` : "none"};
+`;
+const DrawerContentWrapper = styled("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens"
+})`
+  overflow-y: auto;
+`;
+const DrawerContent = styled("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens"
+})`
+  padding: ${({
+  showDividers,
+  odysseyDesignTokens
+}) => showDividers ? `${odysseyDesignTokens.Spacing5}` : `0 ${odysseyDesignTokens.Spacing5}`};
+`;
+const DrawerFooter = styled("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens"
+})`
+  position: sticky;
+  bottom: 0;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  align-content: center;
+  padding: ${({
+  odysseyDesignTokens
+}) => odysseyDesignTokens.Spacing4};
+  border-top: ${({
+  showDividers,
+  odysseyDesignTokens
+}) => showDividers ? `1px solid ${odysseyDesignTokens.HueNeutral200}` : "none"};
+  background-color: ${({
+  odysseyDesignTokens
+}) => odysseyDesignTokens.HueNeutralWhite};
+`;
+const Drawer = ({
+  ariaLabel,
+  children,
+  isOpen,
+  onClose,
+  primaryCallToActionComponent,
+  secondaryCallToActionComponent,
+  showDividers = false,
+  tertiaryCallToActionComponent,
+  testId,
+  title,
+  translate,
+  variant = "temporary"
+}) => {
+  const [isContentScrollable, setIsContentScrollable] = useState(false);
+  const drawerContentRef = useRef(null);
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+  const {
+    i18n
+  } = useTranslation();
+  const anchorDirection = i18n.dir() === "rtl" ? "left" : "right";
+  useEffect(() => {
+    let frameId;
+    const handleContentScroll = () => {
+      const drawerContentElement = drawerContentRef.current;
+      if (drawerContentElement) {
+        cancelAnimationFrame(frameId);
+        setIsContentScrollable(drawerContentElement.scrollHeight > drawerContentElement.clientHeight);
+      }
+      frameId = requestAnimationFrame(handleContentScroll);
+    };
+    if (isOpen) {
+      frameId = requestAnimationFrame(handleContentScroll);
+    }
+    return () => {
+      cancelAnimationFrame(frameId);
+    };
+  }, [isOpen]);
+  const dividersVisible = useMemo(() => {
+    return showDividers || isContentScrollable;
+  }, [showDividers, isContentScrollable]);
+  const hasFooter = useMemo(() => primaryCallToActionComponent || secondaryCallToActionComponent || tertiaryCallToActionComponent, [primaryCallToActionComponent, secondaryCallToActionComponent, tertiaryCallToActionComponent]);
+  return _jsxs(_Drawer, {
+    "data-se": testId,
+    anchor: anchorDirection,
+    open: isOpen,
+    onClose: onClose,
+    variant: variant,
+    sx: {
+      ...(variant === "persistent" && {
+        "& .MuiDrawer-paper": {
+          transition: "none"
+        }
+      })
+    },
+    children: [_jsxs(DrawerContentWrapper, {
+      ...(isContentScrollable && {
+        tabIndex: 0
+      }),
+      odysseyDesignTokens: odysseyDesignTokens,
+      ref: drawerContentRef,
+      children: [_jsxs(DrawerHeader, {
+        translate: translate,
+        odysseyDesignTokens: odysseyDesignTokens,
+        showDividers: dividersVisible,
+        children: [_jsx(Heading5, {
+          children: title
+        }), _jsx(Button, {
+          ariaLabel: ariaLabel,
+          onClick: onClose,
+          size: "small",
+          startIcon: _jsx(CloseIcon, {}),
+          variant: "floating"
+        })]
+      }), _jsx(DrawerContent, {
+        showDividers: dividersVisible,
+        odysseyDesignTokens: odysseyDesignTokens,
+        children: children
+      })]
+    }), hasFooter && _jsxs(DrawerFooter, {
+      odysseyDesignTokens: odysseyDesignTokens,
+      showDividers: dividersVisible,
+      children: [tertiaryCallToActionComponent, secondaryCallToActionComponent, primaryCallToActionComponent]
+    })]
+  });
+};
+const MemoizedDrawer = memo(Drawer);
+MemoizedDrawer.displayName = "Drawer";
+export { MemoizedDrawer as Drawer };
+//# sourceMappingURL=Drawer.js.map

package/dist/labs/Drawer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.js","names":["memo","useState","useEffect","useMemo","useRef","styled","useTranslation","Button","CloseIcon","Heading5","useOdysseyDesignTokens","jsx","_jsx","jsxs","_jsxs","variantValues","DrawerHeader","shouldForwardProp","prop","odysseyDesignTokens","Spacing4","Spacing5","HueNeutral900","HueNeutralWhite","showDividers","HueNeutral200","DrawerContentWrapper","DrawerContent","DrawerFooter","Drawer","ariaLabel","children","isOpen","onClose","primaryCallToActionComponent","secondaryCallToActionComponent","tertiaryCallToActionComponent","testId","title","translate","variant","isContentScrollable","setIsContentScrollable","drawerContentRef","i18n","anchorDirection","dir","frameId","handleContentScroll","drawerContentElement","current","cancelAnimationFrame","scrollHeight","clientHeight","requestAnimationFrame","dividersVisible","hasFooter","_Drawer","anchor","open","sx","transition","tabIndex","ref","onClick","size","startIcon","MemoizedDrawer","displayName"],"sources":["../../src/labs/Drawer.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2024-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  ReactNode,\n  useState,\n  useEffect,\n  useMemo,\n  useRef,\n  ReactElement,\n} from \"react\";\nimport styled from \"@emotion/styled\";\nimport { useTranslation } from \"react-i18next\";\nimport { Drawer as MuiDrawer } from \"@mui/material\";\n\nimport type { HtmlProps } from \"../HtmlProps\";\nimport { Button } from \"../Button\";\nimport { CloseIcon } from \"../icons.generated\";\nimport { Heading5 } from \"../Typography\";\nimport {\n  useOdysseyDesignTokens,\n  DesignTokens,\n} from \"../OdysseyDesignTokensContext\";\n\nexport const variantValues = [\"temporary\", \"persistent\"] as const;\n\nexport type DrawerProps = {\n  /**\n   * An optional Button object to be situated in the Drawerfooter. Should almost always be of variant `primary`.\n   */\n  primaryCallToActionComponent?: ReactElement<typeof Button>;\n  /**\n   * An optional Button object to be situated in the Drawer footer, alongside the `callToActionPrimaryComponent`.\n   */\n  secondaryCallToActionComponent?: ReactElement<typeof Button>;\n  /**\n   * An optional Button object to be situated in the Drawer footer, alongside the other two `callToAction` components.\n   */\n  tertiaryCallToActionComponent?: ReactElement<typeof Button>;\n  /**\n   * The content of the Drawer. May be a `string` or any other `ReactNode` or array of `ReactNode`s.\n   */\n  children?: ReactNode;\n  /**\n   * When set to `true`, the Drawer will be visible.\n   */\n  isOpen?: boolean;\n  /**\n   * Callback that controls what happens when the Drawer is dismissed\n   */\n  onClose: () => void;\n  /**\n   * Shows divider lines separating header, content, and footer (if using action buttons)\n   */\n  showDividers: boolean;\n  /**\n   * The title of the Drawer\n   */\n  title?: string;\n  /**\n   * Type of Drawer\n   */\n  variant?: (typeof variantValues)[number];\n} & Pick<HtmlProps, \"ariaLabel\" | \"testId\" | \"translate\">;\n\ninterface DrawerStyleProps {\n  odysseyDesignTokens: DesignTokens;\n  showDividers: boolean;\n}\nconst DrawerHeader = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<DrawerStyleProps>`\n  position: sticky;\n  top: 0;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin: 0;\n  padding: ${({ odysseyDesignTokens }) => odysseyDesignTokens.Spacing4}\n    ${({ odysseyDesignTokens }) => odysseyDesignTokens.Spacing5};\n  color: ${({ odysseyDesignTokens }) => odysseyDesignTokens.HueNeutral900};\n  background-color: ${({ odysseyDesignTokens }) =>\n    odysseyDesignTokens.HueNeutralWhite};\n  border-bottom: ${({ showDividers, odysseyDesignTokens }) =>\n    showDividers ? `1px solid ${odysseyDesignTokens.HueNeutral200}` : \"none\"};\n`;\n\nconst DrawerContentWrapper = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n}>`\n  overflow-y: auto;\n`;\n\nconst DrawerContent = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<DrawerStyleProps>`\n  padding: ${({ showDividers, odysseyDesignTokens }) =>\n    showDividers\n      ? `${odysseyDesignTokens.Spacing5}`\n      : `0 ${odysseyDesignTokens.Spacing5}`};\n`;\n\nconst DrawerFooter = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<DrawerStyleProps>`\n  position: sticky;\n  bottom: 0;\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n  align-content: center;\n  padding: ${({ odysseyDesignTokens }) => odysseyDesignTokens.Spacing4};\n  border-top: ${({ showDividers, odysseyDesignTokens }) =>\n    showDividers ? `1px solid ${odysseyDesignTokens.HueNeutral200}` : \"none\"};\n  background-color: ${({ odysseyDesignTokens }) =>\n    odysseyDesignTokens.HueNeutralWhite};\n`;\n\nconst Drawer = ({\n  ariaLabel,\n  children,\n  isOpen,\n  onClose,\n  primaryCallToActionComponent,\n  secondaryCallToActionComponent,\n  showDividers = false,\n  tertiaryCallToActionComponent,\n  testId,\n  title,\n  translate,\n  variant = \"temporary\",\n}: DrawerProps) => {\n  const [isContentScrollable, setIsContentScrollable] = useState(false);\n  const drawerContentRef = useRef<HTMLDivElement>(null);\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  //If RTL is set in the theme, align the drawer on the left side of the screen, uses right by default.\n  const { i18n } = useTranslation();\n  const anchorDirection = i18n.dir() === \"rtl\" ? \"left\" : \"right\";\n\n  useEffect(() => {\n    let frameId: number;\n\n    const handleContentScroll = () => {\n      const drawerContentElement = drawerContentRef.current;\n      if (drawerContentElement) {\n        cancelAnimationFrame(frameId);\n        setIsContentScrollable(\n          drawerContentElement.scrollHeight > drawerContentElement.clientHeight,\n        );\n      }\n      frameId = requestAnimationFrame(handleContentScroll);\n    };\n\n    if (isOpen) {\n      frameId = requestAnimationFrame(handleContentScroll);\n    }\n\n    return () => {\n      cancelAnimationFrame(frameId);\n    };\n  }, [isOpen]);\n\n  const dividersVisible = useMemo(() => {\n    return showDividers || isContentScrollable;\n  }, [showDividers, isContentScrollable]);\n\n  const hasFooter = useMemo(\n    () =>\n      primaryCallToActionComponent ||\n      secondaryCallToActionComponent ||\n      tertiaryCallToActionComponent,\n    [\n      primaryCallToActionComponent,\n      secondaryCallToActionComponent,\n      tertiaryCallToActionComponent,\n    ],\n  );\n\n  return (\n    <MuiDrawer\n      data-se={testId}\n      anchor={anchorDirection}\n      open={isOpen}\n      onClose={onClose}\n      variant={variant}\n      sx={{\n        //Overrides defualt MUI inline style\n        ...(variant === \"persistent\" && {\n          \"& .MuiDrawer-paper\": {\n            transition: \"none\",\n          },\n        }),\n      }}\n    >\n      <DrawerContentWrapper\n        {...(isContentScrollable && {\n          //Sets tabIndex on content element if scrollable so content is easier to navigate with the keyboard\n          tabIndex: 0,\n        })}\n        odysseyDesignTokens={odysseyDesignTokens}\n        ref={drawerContentRef}\n      >\n        <DrawerHeader\n          translate={translate}\n          odysseyDesignTokens={odysseyDesignTokens}\n          showDividers={dividersVisible}\n        >\n          <Heading5>{title}</Heading5>\n          <Button\n            ariaLabel={ariaLabel}\n            onClick={onClose}\n            size=\"small\"\n            startIcon={<CloseIcon />}\n            variant=\"floating\"\n          />\n        </DrawerHeader>\n        <DrawerContent\n          showDividers={dividersVisible}\n          odysseyDesignTokens={odysseyDesignTokens}\n        >\n          {children}\n        </DrawerContent>\n      </DrawerContentWrapper>\n      {hasFooter && (\n        <DrawerFooter\n          odysseyDesignTokens={odysseyDesignTokens}\n          showDividers={dividersVisible}\n        >\n          {tertiaryCallToActionComponent}\n          {secondaryCallToActionComponent}\n          {primaryCallToActionComponent}\n        </DrawerFooter>\n      )}\n    </MuiDrawer>\n  );\n};\n\nconst MemoizedDrawer = memo(Drawer);\nMemoizedDrawer.displayName = \"Drawer\";\n\nexport { MemoizedDrawer as Drawer };\n"],"mappings":"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"}

package/dist/labs/GroupPicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"GroupPicker.js","names":["avatarClasses","memo","useCallback","Field","Subordinate","Tag","useOdysseyDesignTokens","UserIcon","GridIcon","GroupIcon","jsx","_jsx","jsxs","_jsxs","createElement","_createElement","avatarImageSizeSmall","avatarImageSizeMedium","GroupPicker","hasMultipleChoices","isCustomValueAllowed","isDisabled","isLoading","isOptional","isReadOnly","hint","label","onChange","onInputChange","options","value","testId","odysseyDesignTokens","isOptionEqualToValue","sourceValue","targetValue","id","getOptionLabel","option","name","renderOption","props","key","_Box","sx","alignItems","display","flexDirection","children","paddingRight","Spacing2","_Avatar","alt","src","logo","fallback","visibility","background","height","width","description","paddingTop","Spacing1","usersCount","Spacing4","appsCount","groupPushMappingsCount","renderTags","values","getTagProps","map","index","onDelete","margin","icon","onRemove","renderInput","InputLabelProps","InputProps","params","fieldType","hasVisibleLabel","htmlFor","renderFieldComponent","ariaDescribedBy","_InputBase","required","_Autocomplete","disabled","filterSelectedOptions","freeSolo","loading","multiple","readOnly","MemoizedGroupPicker"],"sources":["../../src/labs/GroupPicker.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2023-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 type { AutocompleteGetTagProps } from \"@mui/material/useAutocomplete\";\n\nimport {\n  Autocomplete as MuiAutocomplete,\n  Avatar as MuiAvatar,\n  Box,\n  InputBase,\n} from \"@mui/material\";\nimport { avatarClasses } from \"@mui/material/Avatar\";\nimport { memo, useCallback } from \"react\";\n\nimport { AutocompleteProps } from \"../Autocomplete\";\nimport { Field } from \"../Field\";\nimport { Subordinate } from \"../Typography\";\nimport { Tag } from \"../Tag\";\nimport { useOdysseyDesignTokens } from \"../OdysseyDesignTokensContext\";\nimport { UserIcon, GridIcon, GroupIcon } from \"../icons.generated\";\n\nexport type GroupPickerOptionType = {\n  appsCount?: number;\n  description: string;\n  groupPushMappingsCount?: number;\n  id: string;\n  logo?: string;\n  name: string;\n  usersCount?: number;\n};\n\nexport type GroupPickerProps<\n  GroupPickerOptionType,\n  HasMultipleChoices extends boolean | undefined,\n  IsCustomValueAllowed extends boolean | undefined\n> = AutocompleteProps<\n  GroupPickerOptionType,\n  HasMultipleChoices,\n  IsCustomValueAllowed\n>;\n\nconst avatarImageSizeSmall = 16;\nconst avatarImageSizeMedium = 24;\n\nconst GroupPicker = <\n  OptionType extends GroupPickerOptionType,\n  HasMultipleChoices extends boolean | undefined,\n  IsCustomValueAllowed extends boolean | undefined\n>({\n  hasMultipleChoices,\n  isCustomValueAllowed,\n  isDisabled,\n  isLoading,\n  isOptional = false,\n  isReadOnly,\n  hint,\n  label,\n  onChange,\n  onInputChange,\n  options,\n  value,\n  testId,\n}: GroupPickerProps<OptionType, HasMultipleChoices, IsCustomValueAllowed>) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  const isOptionEqualToValue = useCallback((sourceValue, targetValue) => {\n    return sourceValue.id === targetValue.id;\n  }, []);\n\n  const getOptionLabel = useCallback((option) => {\n    return option.name;\n  }, []);\n\n  const renderOption = useCallback(\n    (props, option) => {\n      return (\n        <li {...props} key={option.id}>\n          <Box\n            sx={{\n              alignItems: \"top\",\n              display: \"flex\",\n              flexDirection: \"row\",\n            }}\n          >\n            <Box sx={{ paddingRight: odysseyDesignTokens.Spacing2 }}>\n              <MuiAvatar\n                alt={option.name}\n                src={option.logo}\n                sx={{\n                  [`.${avatarClasses.fallback}`]: {\n                    visibility: \"hidden\",\n                  },\n                  background: \"transparent\",\n                  height: avatarImageSizeMedium,\n                  width: avatarImageSizeMedium,\n                }}\n              />\n            </Box>\n            <Box>\n              {option.name}\n              <Subordinate>{option.description}</Subordinate>\n              <Box\n                sx={{\n                  display: \"flex\",\n                  flexDirection: \"row\",\n                  paddingTop: odysseyDesignTokens.Spacing1,\n                }}\n              >\n                {typeof option.usersCount === \"number\" && (\n                  <Box\n                    sx={{\n                      display: \"flex\",\n                      flexDirection: \"row\",\n                      paddingRight: odysseyDesignTokens.Spacing4,\n                    }}\n                  >\n                    <UserIcon />\n                    {option.usersCount}\n                  </Box>\n                )}\n                {typeof option.appsCount === \"number\" && (\n                  <Box\n                    sx={{\n                      display: \"flex\",\n                      flexDirection: \"row\",\n                      paddingRight: odysseyDesignTokens.Spacing4,\n                    }}\n                  >\n                    <GridIcon />\n                    {option.appsCount}\n                  </Box>\n                )}\n                {typeof option.groupPushMappingsCount === \"number\" && (\n                  <Box sx={{ display: \"flex\", flexDirection: \"row\" }}>\n                    <GroupIcon />\n                    {option.groupPushMappingsCount}\n                  </Box>\n                )}\n              </Box>\n            </Box>\n          </Box>\n        </li>\n      );\n    },\n    [odysseyDesignTokens]\n  );\n\n  const renderTags = useCallback(\n    (values: OptionType[], getTagProps: AutocompleteGetTagProps) =>\n      values.map((option, index) => {\n        const { key, onDelete } = getTagProps({ index });\n        return (\n          <Box\n            key={key}\n            sx={{\n              margin: odysseyDesignTokens.Spacing1,\n            }}\n          >\n            <Tag\n              icon={\n                <MuiAvatar\n                  alt={option.name}\n                  src={option.logo}\n                  sx={{\n                    [`.${avatarClasses.fallback}`]: {\n                      visibility: \"hidden\",\n                    },\n                    background: \"transparent\",\n                    height: avatarImageSizeSmall,\n                    width: avatarImageSizeSmall,\n                  }}\n                />\n              }\n              label={option.name}\n              onRemove={onDelete}\n            />\n          </Box>\n        );\n      }),\n    [odysseyDesignTokens]\n  );\n\n  const renderInput = useCallback(\n    ({ InputLabelProps, InputProps, ...params }) => (\n      <Field\n        fieldType=\"single\"\n        hasVisibleLabel\n        id={InputLabelProps.htmlFor}\n        hint={hint}\n        label={label}\n        isOptional={isOptional}\n        renderFieldComponent={({ ariaDescribedBy, id }) => (\n          <InputBase\n            {...params}\n            {...InputProps}\n            aria-describedby={ariaDescribedBy}\n            id={id}\n            required={!isOptional}\n          />\n        )}\n      />\n    ),\n    [hint, isOptional, label]\n  );\n\n  return (\n    <MuiAutocomplete\n      // AutoComplete is wrapped in a div within MUI which does not get the disabled attr. So this aria-disabled gets set in the div\n      aria-disabled={isDisabled}\n      data-se={testId}\n      disabled={isDisabled}\n      filterSelectedOptions={true}\n      freeSolo={isCustomValueAllowed}\n      getOptionLabel={getOptionLabel}\n      isOptionEqualToValue={isOptionEqualToValue}\n      loading={isLoading}\n      multiple={hasMultipleChoices}\n      onChange={onChange}\n      onInputChange={onInputChange}\n      options={options}\n      readOnly={isReadOnly}\n      renderInput={renderInput}\n      renderOption={renderOption}\n      renderTags={renderTags}\n      value={value}\n    />\n  );\n};\n\nconst MemoizedGroupPicker = memo(GroupPicker) as typeof GroupPicker;\n\nexport { MemoizedGroupPicker as GroupPicker };\n"],"mappings":"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"}
+{"version":3,"file":"GroupPicker.js","names":["avatarClasses","memo","useCallback","Field","Subordinate","Tag","useOdysseyDesignTokens","UserIcon","GridIcon","GroupIcon","jsx","_jsx","jsxs","_jsxs","createElement","_createElement","avatarImageSizeSmall","avatarImageSizeMedium","GroupPicker","hasMultipleChoices","isCustomValueAllowed","isDisabled","isLoading","isOptional","isReadOnly","hint","label","onChange","onInputChange","options","value","testId","odysseyDesignTokens","isOptionEqualToValue","sourceValue","targetValue","id","getOptionLabel","option","name","renderOption","props","key","_Box","sx","alignItems","display","flexDirection","children","paddingRight","Spacing2","_Avatar","alt","src","logo","fallback","visibility","background","height","width","description","paddingTop","Spacing1","usersCount","Spacing4","appsCount","groupPushMappingsCount","renderTags","values","getTagProps","map","index","onDelete","margin","icon","onRemove","renderInput","InputLabelProps","InputProps","params","fieldType","hasVisibleLabel","htmlFor","renderFieldComponent","ariaDescribedBy","_InputBase","required","_Autocomplete","disabled","filterSelectedOptions","freeSolo","loading","multiple","readOnly","MemoizedGroupPicker"],"sources":["../../src/labs/GroupPicker.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2023-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 type {\n  AutocompleteFreeSoloValueMapping,\n  AutocompleteGetTagProps,\n} from \"@mui/material/useAutocomplete\";\n\nimport {\n  Autocomplete as MuiAutocomplete,\n  Avatar as MuiAvatar,\n  Box,\n  InputBase,\n  AutocompleteRenderInputParams,\n} from \"@mui/material\";\nimport { avatarClasses } from \"@mui/material/Avatar\";\nimport { HTMLAttributes, memo, useCallback } from \"react\";\n\nimport { AutocompleteProps } from \"../Autocomplete\";\nimport { Field } from \"../Field\";\nimport { Subordinate } from \"../Typography\";\nimport { Tag } from \"../Tag\";\nimport { useOdysseyDesignTokens } from \"../OdysseyDesignTokensContext\";\nimport { UserIcon, GridIcon, GroupIcon } from \"../icons.generated\";\n\nexport type GroupPickerOptionType = {\n  appsCount?: number;\n  description: string;\n  groupPushMappingsCount?: number;\n  id: string;\n  logo?: string;\n  name: string;\n  usersCount?: number;\n};\n\nexport type GroupPickerProps<\n  GroupPickerOptionType,\n  HasMultipleChoices extends boolean | undefined,\n  IsCustomValueAllowed extends boolean | undefined,\n> = AutocompleteProps<\n  GroupPickerOptionType,\n  HasMultipleChoices,\n  IsCustomValueAllowed\n>;\n\nconst avatarImageSizeSmall = 16;\nconst avatarImageSizeMedium = 24;\n\nconst GroupPicker = <\n  OptionType extends GroupPickerOptionType,\n  HasMultipleChoices extends boolean | undefined,\n  IsCustomValueAllowed extends boolean | undefined,\n>({\n  hasMultipleChoices,\n  isCustomValueAllowed,\n  isDisabled,\n  isLoading,\n  isOptional = false,\n  isReadOnly,\n  hint,\n  label,\n  onChange,\n  onInputChange,\n  options,\n  value,\n  testId,\n}: GroupPickerProps<OptionType, HasMultipleChoices, IsCustomValueAllowed>) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  const isOptionEqualToValue = useCallback(\n    (sourceValue: OptionType, targetValue: OptionType) => {\n      return sourceValue.id === targetValue.id;\n    },\n    [],\n  );\n\n  const getOptionLabel = useCallback(\n    (\n      option:\n        | OptionType\n        | AutocompleteFreeSoloValueMapping<IsCustomValueAllowed>,\n    ) => {\n      return (option as OptionType).name;\n    },\n    [],\n  );\n\n  const renderOption = useCallback(\n    (props: HTMLAttributes<HTMLElement>, option: OptionType) => {\n      return (\n        <li {...props} key={option.id}>\n          <Box\n            sx={{\n              alignItems: \"top\",\n              display: \"flex\",\n              flexDirection: \"row\",\n            }}\n          >\n            <Box sx={{ paddingRight: odysseyDesignTokens.Spacing2 }}>\n              <MuiAvatar\n                alt={option.name}\n                src={option.logo}\n                sx={{\n                  [`.${avatarClasses.fallback}`]: {\n                    visibility: \"hidden\",\n                  },\n                  background: \"transparent\",\n                  height: avatarImageSizeMedium,\n                  width: avatarImageSizeMedium,\n                }}\n              />\n            </Box>\n            <Box>\n              {option.name}\n              <Subordinate>{option.description}</Subordinate>\n              <Box\n                sx={{\n                  display: \"flex\",\n                  flexDirection: \"row\",\n                  paddingTop: odysseyDesignTokens.Spacing1,\n                }}\n              >\n                {typeof option.usersCount === \"number\" && (\n                  <Box\n                    sx={{\n                      display: \"flex\",\n                      flexDirection: \"row\",\n                      paddingRight: odysseyDesignTokens.Spacing4,\n                    }}\n                  >\n                    <UserIcon />\n                    {option.usersCount}\n                  </Box>\n                )}\n                {typeof option.appsCount === \"number\" && (\n                  <Box\n                    sx={{\n                      display: \"flex\",\n                      flexDirection: \"row\",\n                      paddingRight: odysseyDesignTokens.Spacing4,\n                    }}\n                  >\n                    <GridIcon />\n                    {option.appsCount}\n                  </Box>\n                )}\n                {typeof option.groupPushMappingsCount === \"number\" && (\n                  <Box sx={{ display: \"flex\", flexDirection: \"row\" }}>\n                    <GroupIcon />\n                    {option.groupPushMappingsCount}\n                  </Box>\n                )}\n              </Box>\n            </Box>\n          </Box>\n        </li>\n      );\n    },\n    [odysseyDesignTokens],\n  );\n\n  const renderTags = useCallback(\n    (values: OptionType[], getTagProps: AutocompleteGetTagProps) =>\n      values.map((option, index) => {\n        const { key, onDelete } = getTagProps({ index });\n        return (\n          <Box\n            key={key}\n            sx={{\n              margin: odysseyDesignTokens.Spacing1,\n            }}\n          >\n            <Tag\n              icon={\n                <MuiAvatar\n                  alt={option.name}\n                  src={option.logo}\n                  sx={{\n                    [`.${avatarClasses.fallback}`]: {\n                      visibility: \"hidden\",\n                    },\n                    background: \"transparent\",\n                    height: avatarImageSizeSmall,\n                    width: avatarImageSizeSmall,\n                  }}\n                />\n              }\n              label={option.name}\n              onRemove={onDelete}\n            />\n          </Box>\n        );\n      }),\n    [odysseyDesignTokens],\n  );\n\n  const renderInput = useCallback(\n    ({\n      InputLabelProps,\n      InputProps,\n      ...params\n    }: AutocompleteRenderInputParams) => (\n      <Field\n        fieldType=\"single\"\n        hasVisibleLabel\n        //@ts-expect-error htmlFor is not available on the currently typed params\n        id={InputLabelProps.htmlFor}\n        hint={hint}\n        label={label}\n        isOptional={isOptional}\n        renderFieldComponent={({ ariaDescribedBy, id }) => (\n          <InputBase\n            {...params}\n            {...InputProps}\n            aria-describedby={ariaDescribedBy}\n            id={id}\n            required={!isOptional}\n          />\n        )}\n      />\n    ),\n    [hint, isOptional, label],\n  );\n\n  return (\n    <MuiAutocomplete\n      // AutoComplete is wrapped in a div within MUI which does not get the disabled attr. So this aria-disabled gets set in the div\n      aria-disabled={isDisabled}\n      data-se={testId}\n      disabled={isDisabled}\n      filterSelectedOptions={true}\n      freeSolo={isCustomValueAllowed}\n      getOptionLabel={getOptionLabel}\n      isOptionEqualToValue={isOptionEqualToValue}\n      loading={isLoading}\n      multiple={hasMultipleChoices}\n      onChange={onChange}\n      onInputChange={onInputChange}\n      options={options}\n      readOnly={isReadOnly}\n      renderInput={renderInput}\n      renderOption={renderOption}\n      renderTags={renderTags}\n      value={value}\n    />\n  );\n};\n\nconst MemoizedGroupPicker = memo(GroupPicker) as typeof GroupPicker;\n\nexport { MemoizedGroupPicker as GroupPicker };\n"],"mappings":"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"}

package/dist/labs/PaginatedTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"PaginatedTable.js","names":["Typography","useMaterialReactTable","MaterialReactTable","memo","useCallback","useEffect","useMemo","useRef","useState","Trans","useTranslation","jsx","_jsx","Fragment","_Fragment","PaginatedTable","columns","data","fetchMoreData","getRowId","hasError","hasRowSelection","initialState","isFetching","onGlobalFilterChange","onPaginationChange","onRowSelectionChange","onRowSelectionChangeProp","rowsPerPage","state","ToolbarButtons","t","rowVirtualizerInstanceRef","columnFilters","setColumnFilters","globalFilter","setGlobalFilter","undefined","current","scrollToIndex","error","console","totalFetchedRows","length","renderBottomToolbarCustomActions","children","count","i18nKey","values","totalRows","renderTopToolbarCustomActions","table","rowSelection","setRowSelection","pagination","setPagination","pageIndex","pageSize","dataLengthRef","updatePagination","paginationFunction","previousPagination","nextPagination","numberOfPages","Math","floor","modifiedInitialState","modifiedState","muiToolbarAlertBannerProps","severity","muiTablePaginationProps","rowsPerPageOptions","showFirstButton","showLastButton","muiCheckboxStyles","theme","components","MuiCheckbox","styleOverrides","root","ownerState","enableMultiRowSelection","enablePagination","enableRowSelection","enableSorting","muiSelectAllCheckboxProps","sx","muiSelectCheckboxProps","muiPaginationProps","onColumnFiltersChange","rowVirtualizerOptions","overscan","MemoizedPaginatedTable","displayName"],"sources":["../../src/labs/PaginatedTable.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 { AlertProps } from \"@mui/material\";\nimport { Typography } from \"../Typography\";\nimport {\n  MRT_PaginationState,\n  type MRT_ColumnFiltersState,\n  type MRT_RowSelectionState,\n  type MRT_TableInstance,\n  type MRT_Virtualizer,\n  useMaterialReactTable,\n  MaterialReactTable,\n} from \"material-react-table\";\nimport {\n  FunctionComponent,\n  memo,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { Trans, useTranslation } from \"react-i18next\";\n\nimport type {\n  DefaultMaterialReactTableData,\n  MaterialReactTableProps,\n} from \"./materialReactTableTypes\";\n\nexport type PaginatedTableProps<TData extends DefaultMaterialReactTableData> = {\n  columns: MaterialReactTableProps<TData>[\"columns\"];\n  data: MaterialReactTableProps<TData>[\"data\"];\n  fetchMoreData?: () => void;\n  getRowId?: MaterialReactTableProps<TData>[\"getRowId\"];\n  hasError?: boolean;\n  hasRowSelection?: boolean;\n  initialState?: MaterialReactTableProps<TData>[\"initialState\"];\n  isFetching?: boolean;\n  onGlobalFilterChange?: MaterialReactTableProps<TData>[\"onGlobalFilterChange\"];\n  onPaginationChange?: MaterialReactTableProps<TData>[\"onPaginationChange\"];\n  onRowSelectionChange?: MaterialReactTableProps<TData>[\"onRowSelectionChange\"];\n  rowsPerPage?: number;\n  state?: MaterialReactTableProps<TData>[\"state\"];\n  ToolbarButtons?: FunctionComponent<\n    { table: MRT_TableInstance<TData> } & unknown\n  >;\n};\n\nconst PaginatedTable = <TData extends DefaultMaterialReactTableData>({\n  columns = [],\n  data = [],\n  fetchMoreData,\n  getRowId,\n  hasError,\n  hasRowSelection,\n  initialState,\n  isFetching,\n  onGlobalFilterChange,\n  onPaginationChange,\n  onRowSelectionChange: onRowSelectionChangeProp,\n  rowsPerPage = 10,\n  state,\n  ToolbarButtons,\n}: PaginatedTableProps<TData>) => {\n  const { t } = useTranslation();\n\n  const rowVirtualizerInstanceRef =\n    useRef<MRT_Virtualizer<HTMLDivElement, HTMLTableRowElement>>(null);\n\n  const [columnFilters, setColumnFilters] = useState<MRT_ColumnFiltersState>(\n    []\n  );\n\n  const [globalFilter, setGlobalFilter] = useState<string>();\n\n  useEffect(() => {\n    if (globalFilter !== undefined) {\n      onGlobalFilterChange?.(globalFilter);\n    }\n  }, [globalFilter, onGlobalFilterChange]);\n\n  useEffect(() => {\n    try {\n      // Scroll to top of table when sorting or filters change.\n      rowVirtualizerInstanceRef.current?.scrollToIndex?.(0);\n    } catch (error) {\n      console.error(error);\n    }\n  }, [columnFilters, globalFilter]);\n\n  const totalFetchedRows = data.length ?? 0;\n\n  const renderBottomToolbarCustomActions = useCallback(\n    () =>\n      fetchMoreData ? (\n        <Typography>\n          <Trans\n            count={totalFetchedRows}\n            i18nKey=\"table.fetchedrows.text\"\n            values={{\n              totalRows: totalFetchedRows,\n            }}\n          />\n        </Typography>\n      ) : (\n        <Typography>\n          <Trans\n            count={totalFetchedRows}\n            i18nKey=\"table.rows.text\"\n            values={{\n              totalRows: totalFetchedRows,\n            }}\n          />\n        </Typography>\n      ),\n    [fetchMoreData, totalFetchedRows]\n  );\n\n  const renderTopToolbarCustomActions = useCallback<\n    Exclude<\n      MaterialReactTableProps<TData>[\"renderTopToolbarCustomActions\"],\n      undefined\n    >\n  >(\n    ({ table }: { table: MRT_TableInstance<TData> }) => (\n      <>{ToolbarButtons && <ToolbarButtons table={table} />}</>\n    ),\n    [ToolbarButtons]\n  );\n\n  const [rowSelection, setRowSelection] = useState<MRT_RowSelectionState>({});\n\n  useEffect(() => {\n    onRowSelectionChangeProp?.(rowSelection);\n  }, [onRowSelectionChangeProp, rowSelection]);\n\n  const [pagination, setPagination] = useState<MRT_PaginationState>(\n    initialState?.pagination || {\n      pageIndex: 0,\n      pageSize: rowsPerPage,\n    }\n  );\n\n  const dataLengthRef = useRef(data.length);\n\n  const updatePagination = useCallback(\n    (paginationFunction) => {\n      if (data.length === dataLengthRef.current) {\n        setPagination((previousPagination) => {\n          const nextPagination = paginationFunction(previousPagination);\n          return nextPagination;\n        });\n      } else {\n        dataLengthRef.current = data.length;\n      }\n    },\n    [data.length]\n  );\n\n  useEffect(() => {\n    const numberOfPages = Math.floor(data.length / pagination.pageSize);\n\n    if (!isFetching && pagination.pageIndex > numberOfPages - 1) {\n      fetchMoreData?.();\n    }\n  }, [\n    data.length,\n    fetchMoreData,\n    isFetching,\n    pagination.pageIndex,\n    pagination.pageSize,\n  ]);\n\n  useEffect(() => {\n    onPaginationChange?.({\n      pageIndex: pagination.pageIndex,\n      pageSize: pagination.pageSize,\n    });\n  }, [onPaginationChange, pagination.pageIndex, pagination.pageSize]);\n\n  const modifiedInitialState = useMemo(\n    () => ({\n      pagination,\n      ...initialState,\n    }),\n    [initialState, pagination]\n  );\n\n  const modifiedState = useMemo(\n    () => ({\n      pagination: {\n        pageIndex: pagination.pageIndex,\n        pageSize: pagination.pageSize,\n      },\n      rowSelection,\n      globalFilter,\n      columnFilters,\n      ...state,\n    }),\n    [\n      pagination.pageIndex,\n      pagination.pageSize,\n      rowSelection,\n      globalFilter,\n      columnFilters,\n      state,\n    ]\n  );\n\n  const muiToolbarAlertBannerProps: AlertProps = useMemo(\n    () =>\n      hasError\n        ? {\n            children: t(\"table.error\"),\n            severity: \"error\",\n          }\n        : {},\n    [hasError, t]\n  );\n\n  const muiTablePaginationProps = useMemo(\n    () => ({\n      rowsPerPageOptions: [],\n      showFirstButton: false,\n      showLastButton: false,\n    }),\n    []\n  );\n\n  const muiCheckboxStyles = useCallback(\n    (theme) =>\n      typeof theme.components?.MuiCheckbox?.styleOverrides?.root === \"function\"\n        ? theme.components?.MuiCheckbox?.styleOverrides?.root?.({\n            ownerState: {},\n            theme,\n          })\n        : \"\",\n    []\n  );\n\n  const table = useMaterialReactTable({\n    columns: columns,\n    data: data,\n    enableMultiRowSelection: hasRowSelection,\n    enablePagination: true,\n    enableRowSelection: hasRowSelection,\n    enableSorting: false,\n    getRowId: getRowId,\n    initialState: modifiedInitialState,\n    muiSelectAllCheckboxProps: { sx: muiCheckboxStyles },\n    muiSelectCheckboxProps: { sx: muiCheckboxStyles },\n    muiPaginationProps: muiTablePaginationProps,\n    muiToolbarAlertBannerProps: muiToolbarAlertBannerProps,\n    onColumnFiltersChange: setColumnFilters,\n    onGlobalFilterChange: setGlobalFilter,\n    onPaginationChange: updatePagination,\n    onRowSelectionChange: setRowSelection,\n    renderBottomToolbarCustomActions: renderBottomToolbarCustomActions,\n    renderTopToolbarCustomActions: renderTopToolbarCustomActions,\n    rowVirtualizerInstanceRef: rowVirtualizerInstanceRef,\n    rowVirtualizerOptions: { overscan: 4 },\n    state: modifiedState,\n  });\n\n  return <MaterialReactTable table={table} />;\n};\n\nconst MemoizedPaginatedTable = memo(PaginatedTable) as typeof PaginatedTable;\n\n// @ts-expect-error | This is going to error because the component isn't and can't be defined as a `FunctionComponent`, and therefore, doesn't have a `displayName` prop.\nMemoizedPaginatedTable.displayName = \"PaginatedTable\";\n\nexport { MemoizedPaginatedTable as PaginatedTable };\n"],"mappings":"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"}
+{"version":3,"file":"PaginatedTable.js","names":["Typography","useMaterialReactTable","MaterialReactTable","memo","useCallback","useEffect","useMemo","useRef","useState","Trans","useTranslation","jsx","_jsx","Fragment","_Fragment","PaginatedTable","columns","data","fetchMoreData","getRowId","hasError","hasRowSelection","initialState","isFetching","onGlobalFilterChange","onPaginationChange","onRowSelectionChange","onRowSelectionChangeProp","rowsPerPage","state","ToolbarButtons","t","rowVirtualizerInstanceRef","columnFilters","setColumnFilters","globalFilter","setGlobalFilter","undefined","current","scrollToIndex","error","console","totalFetchedRows","length","renderBottomToolbarCustomActions","children","count","i18nKey","values","totalRows","renderTopToolbarCustomActions","table","rowSelection","setRowSelection","pagination","setPagination","pageIndex","pageSize","dataLengthRef","updatePagination","paginationFunction","previousPagination","nextPagination","numberOfPages","Math","floor","modifiedInitialState","modifiedState","muiToolbarAlertBannerProps","severity","muiTablePaginationProps","rowsPerPageOptions","showFirstButton","showLastButton","muiCheckboxStyles","theme","components","MuiCheckbox","styleOverrides","root","ownerState","enableMultiRowSelection","enablePagination","enableRowSelection","enableSorting","muiSelectAllCheckboxProps","sx","muiSelectCheckboxProps","muiPaginationProps","onColumnFiltersChange","rowVirtualizerOptions","overscan","MemoizedPaginatedTable","displayName"],"sources":["../../src/labs/PaginatedTable.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 { AlertProps } from \"@mui/material\";\nimport { Typography } from \"../Typography\";\nimport {\n  MRT_PaginationState,\n  type MRT_ColumnFiltersState,\n  type MRT_RowSelectionState,\n  type MRT_TableInstance,\n  type MRT_Virtualizer,\n  useMaterialReactTable,\n  MaterialReactTable,\n} from \"material-react-table\";\nimport {\n  FunctionComponent,\n  memo,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { Trans, useTranslation } from \"react-i18next\";\n\nimport type {\n  DefaultMaterialReactTableData,\n  MaterialReactTableProps,\n} from \"./materialReactTableTypes\";\n\nexport type PaginatedTableProps<TData extends DefaultMaterialReactTableData> = {\n  columns: MaterialReactTableProps<TData>[\"columns\"];\n  data: MaterialReactTableProps<TData>[\"data\"];\n  fetchMoreData?: () => void;\n  getRowId?: MaterialReactTableProps<TData>[\"getRowId\"];\n  hasError?: boolean;\n  hasRowSelection?: boolean;\n  initialState?: MaterialReactTableProps<TData>[\"initialState\"];\n  isFetching?: boolean;\n  onGlobalFilterChange?: MaterialReactTableProps<TData>[\"onGlobalFilterChange\"];\n  onPaginationChange?: MaterialReactTableProps<TData>[\"onPaginationChange\"];\n  onRowSelectionChange?: MaterialReactTableProps<TData>[\"onRowSelectionChange\"];\n  rowsPerPage?: number;\n  state?: MaterialReactTableProps<TData>[\"state\"];\n  ToolbarButtons?: FunctionComponent<\n    { table: MRT_TableInstance<TData> } & unknown\n  >;\n};\n\nconst PaginatedTable = <TData extends DefaultMaterialReactTableData>({\n  columns = [],\n  data = [],\n  fetchMoreData,\n  getRowId,\n  hasError,\n  hasRowSelection,\n  initialState,\n  isFetching,\n  onGlobalFilterChange,\n  onPaginationChange,\n  onRowSelectionChange: onRowSelectionChangeProp,\n  rowsPerPage = 10,\n  state,\n  ToolbarButtons,\n}: PaginatedTableProps<TData>) => {\n  const { t } = useTranslation();\n\n  const rowVirtualizerInstanceRef =\n    useRef<MRT_Virtualizer<HTMLDivElement, HTMLTableRowElement>>(null);\n\n  const [columnFilters, setColumnFilters] = useState<MRT_ColumnFiltersState>(\n    [],\n  );\n\n  const [globalFilter, setGlobalFilter] = useState<string>();\n\n  useEffect(() => {\n    if (globalFilter !== undefined) {\n      onGlobalFilterChange?.(globalFilter);\n    }\n  }, [globalFilter, onGlobalFilterChange]);\n\n  useEffect(() => {\n    try {\n      // Scroll to top of table when sorting or filters change.\n      rowVirtualizerInstanceRef.current?.scrollToIndex?.(0);\n    } catch (error) {\n      console.error(error);\n    }\n  }, [columnFilters, globalFilter]);\n\n  const totalFetchedRows = data.length ?? 0;\n\n  const renderBottomToolbarCustomActions = useCallback(\n    () =>\n      fetchMoreData ? (\n        <Typography>\n          <Trans\n            count={totalFetchedRows}\n            i18nKey=\"table.fetchedrows.text\"\n            values={{\n              totalRows: totalFetchedRows,\n            }}\n          />\n        </Typography>\n      ) : (\n        <Typography>\n          <Trans\n            count={totalFetchedRows}\n            i18nKey=\"table.rows.text\"\n            values={{\n              totalRows: totalFetchedRows,\n            }}\n          />\n        </Typography>\n      ),\n    [fetchMoreData, totalFetchedRows],\n  );\n\n  const renderTopToolbarCustomActions = useCallback<\n    Exclude<\n      MaterialReactTableProps<TData>[\"renderTopToolbarCustomActions\"],\n      undefined\n    >\n  >(\n    ({ table }: { table: MRT_TableInstance<TData> }) => (\n      <>{ToolbarButtons && <ToolbarButtons table={table} />}</>\n    ),\n    [ToolbarButtons],\n  );\n\n  const [rowSelection, setRowSelection] = useState<MRT_RowSelectionState>({});\n\n  useEffect(() => {\n    onRowSelectionChangeProp?.(rowSelection);\n  }, [onRowSelectionChangeProp, rowSelection]);\n\n  const [pagination, setPagination] = useState<MRT_PaginationState>(\n    initialState?.pagination || {\n      pageIndex: 0,\n      pageSize: rowsPerPage,\n    },\n  );\n\n  const dataLengthRef = useRef(data.length);\n\n  const updatePagination = useCallback(\n    // @ts-expect-error TEMP: This type aren't working after the upgrade, but they need to be fixed.\n    (paginationFunction) => {\n      if (data.length === dataLengthRef.current) {\n        setPagination((previousPagination) => {\n          const nextPagination = paginationFunction(previousPagination);\n          return nextPagination;\n        });\n      } else {\n        dataLengthRef.current = data.length;\n      }\n    },\n    [data.length],\n  );\n\n  useEffect(() => {\n    const numberOfPages = Math.floor(data.length / pagination.pageSize);\n\n    if (!isFetching && pagination.pageIndex > numberOfPages - 1) {\n      fetchMoreData?.();\n    }\n  }, [\n    data.length,\n    fetchMoreData,\n    isFetching,\n    pagination.pageIndex,\n    pagination.pageSize,\n  ]);\n\n  useEffect(() => {\n    onPaginationChange?.({\n      pageIndex: pagination.pageIndex,\n      pageSize: pagination.pageSize,\n    });\n  }, [onPaginationChange, pagination.pageIndex, pagination.pageSize]);\n\n  const modifiedInitialState = useMemo(\n    () => ({\n      pagination,\n      ...initialState,\n    }),\n    [initialState, pagination],\n  );\n\n  const modifiedState = useMemo(\n    () => ({\n      pagination: {\n        pageIndex: pagination.pageIndex,\n        pageSize: pagination.pageSize,\n      },\n      rowSelection,\n      globalFilter,\n      columnFilters,\n      ...state,\n    }),\n    [\n      pagination.pageIndex,\n      pagination.pageSize,\n      rowSelection,\n      globalFilter,\n      columnFilters,\n      state,\n    ],\n  );\n\n  const muiToolbarAlertBannerProps: AlertProps = useMemo(\n    () =>\n      hasError\n        ? {\n            children: t(\"table.error\"),\n            severity: \"error\",\n          }\n        : {},\n    [hasError, t],\n  );\n\n  const muiTablePaginationProps = useMemo(\n    () => ({\n      rowsPerPageOptions: [],\n      showFirstButton: false,\n      showLastButton: false,\n    }),\n    [],\n  );\n\n  const muiCheckboxStyles = useCallback(\n    // @ts-expect-error TEMP: This type aren't working after the upgrade, but they need to be fixed.\n    (theme) =>\n      typeof theme.components?.MuiCheckbox?.styleOverrides?.root === \"function\"\n        ? theme.components?.MuiCheckbox?.styleOverrides?.root?.({\n            ownerState: {},\n            theme,\n          })\n        : \"\",\n    [],\n  );\n\n  const table = useMaterialReactTable({\n    columns: columns,\n    data: data,\n    enableMultiRowSelection: hasRowSelection,\n    enablePagination: true,\n    enableRowSelection: hasRowSelection,\n    enableSorting: false,\n    getRowId: getRowId,\n    initialState: modifiedInitialState,\n    muiSelectAllCheckboxProps: { sx: muiCheckboxStyles },\n    muiSelectCheckboxProps: { sx: muiCheckboxStyles },\n    muiPaginationProps: muiTablePaginationProps,\n    muiToolbarAlertBannerProps: muiToolbarAlertBannerProps,\n    onColumnFiltersChange: setColumnFilters,\n    onGlobalFilterChange: setGlobalFilter,\n    onPaginationChange: updatePagination,\n    onRowSelectionChange: setRowSelection,\n    renderBottomToolbarCustomActions: renderBottomToolbarCustomActions,\n    renderTopToolbarCustomActions: renderTopToolbarCustomActions,\n    rowVirtualizerInstanceRef: rowVirtualizerInstanceRef,\n    rowVirtualizerOptions: { overscan: 4 },\n    state: modifiedState,\n  });\n\n  return <MaterialReactTable table={table} />;\n};\n\nconst MemoizedPaginatedTable = memo(PaginatedTable) as typeof PaginatedTable;\n\n// @ts-expect-error | This is going to error because the component isn't and can't be defined as a `FunctionComponent`, and therefore, doesn't have a `displayName` prop.\nMemoizedPaginatedTable.displayName = \"PaginatedTable\";\n\nexport { MemoizedPaginatedTable as PaginatedTable };\n"],"mappings":"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"}

package/dist/labs/StaticTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"StaticTable.js","names":["useMaterialReactTable","MaterialReactTable","memo","useCallback","useEffect","useMemo","useRef","useState","useTranslation","jsx","_jsx","Fragment","_Fragment","StaticTable","columns","data","getRowId","hasError","initialState","onGlobalFilterChange","state","ToolbarButtons","t","rowVirtualizerInstanceRef","columnFilters","setColumnFilters","globalFilter","setGlobalFilter","undefined","modifiedState","renderTopToolbarCustomActions","table","children","current","scrollToIndex","error","console","enableBottomToolbar","enablePagination","enableRowVirtualization","enableSorting","muiToolbarAlertBannerProps","color","onColumnFiltersChange","rowVirtualizerOptions","overscan","MemoizedStaticTable"],"sources":["../../src/labs/StaticTable.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  useMaterialReactTable,\n  type MRT_ColumnFiltersState,\n  type MRT_TableInstance,\n  type MRT_Virtualizer,\n  MaterialReactTable,\n} from \"material-react-table\";\nimport {\n  FunctionComponent,\n  memo,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { useTranslation } from \"react-i18next\";\n\nimport type {\n  DefaultMaterialReactTableData,\n  MaterialReactTableProps,\n} from \"./materialReactTableTypes\";\n\nexport type StaticTableProps<TData extends DefaultMaterialReactTableData> = {\n  columns: MaterialReactTableProps<TData>[\"columns\"];\n  data: MaterialReactTableProps<TData>[\"data\"];\n  getRowId?: MaterialReactTableProps<TData>[\"getRowId\"];\n  hasError?: boolean;\n  initialState?: MaterialReactTableProps<TData>[\"initialState\"];\n  onGlobalFilterChange?: MaterialReactTableProps<TData>[\"onGlobalFilterChange\"];\n  state?: MaterialReactTableProps<TData>[\"state\"];\n  ToolbarButtons?: FunctionComponent<\n    { table: MRT_TableInstance<TData> } & unknown\n  >;\n};\n\nconst StaticTable = <TData extends DefaultMaterialReactTableData>({\n  columns = [],\n  data = [],\n  getRowId,\n  hasError,\n  initialState,\n  onGlobalFilterChange,\n  state,\n  ToolbarButtons,\n}: StaticTableProps<TData>) => {\n  const { t } = useTranslation();\n\n  const rowVirtualizerInstanceRef =\n    useRef<MRT_Virtualizer<HTMLDivElement, HTMLTableRowElement>>(null);\n\n  const [columnFilters, setColumnFilters] = useState<MRT_ColumnFiltersState>(\n    []\n  );\n\n  const [globalFilter, setGlobalFilter] = useState<string>();\n\n  useEffect(() => {\n    if (globalFilter !== undefined) {\n      onGlobalFilterChange?.(globalFilter);\n    }\n  }, [globalFilter, onGlobalFilterChange]);\n\n  const modifiedState = useMemo(\n    () => ({\n      globalFilter,\n      columnFilters,\n      ...state,\n    }),\n    [globalFilter, columnFilters, state]\n  );\n\n  const renderTopToolbarCustomActions = useCallback<\n    Exclude<\n      MaterialReactTableProps<TData>[\"renderTopToolbarCustomActions\"],\n      undefined\n    >\n  >(\n    ({ table }) => <>{ToolbarButtons && <ToolbarButtons table={table} />}</>,\n    [ToolbarButtons]\n  );\n\n  useEffect(() => {\n    try {\n      // Scroll to top of table when sorting or filters change.\n      rowVirtualizerInstanceRef.current?.scrollToIndex?.(0);\n    } catch (error) {\n      console.error(error);\n    }\n  }, [columnFilters, globalFilter]);\n\n  const table = useMaterialReactTable({\n    columns: columns,\n    data: data,\n    enableBottomToolbar: false,\n    enablePagination: false,\n    enableRowVirtualization: true,\n    enableSorting: false,\n    getRowId: getRowId,\n    initialState: initialState,\n    muiToolbarAlertBannerProps: hasError\n      ? { children: t(\"table.error\"), color: \"error\" }\n      : undefined,\n    onColumnFiltersChange: setColumnFilters,\n    onGlobalFilterChange: setGlobalFilter,\n    renderTopToolbarCustomActions: renderTopToolbarCustomActions,\n    rowVirtualizerInstanceRef: rowVirtualizerInstanceRef,\n    rowVirtualizerOptions: { overscan: 4 },\n    state: modifiedState,\n  });\n\n  return <MaterialReactTable table={table} />;\n};\n\nconst MemoizedStaticTable = memo(StaticTable) as typeof StaticTable;\n\nexport { MemoizedStaticTable as StaticTable };\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SACEA,qBAAqB,EAIrBC,kBAAkB,QACb,sBAAsB;AAC7B,SAEEC,IAAI,EACJC,WAAW,EACXC,SAAS,EACTC,OAAO,EACPC,MAAM,EACNC,QAAQ,QACH,OAAO;AACd,SAASC,cAAc,QAAQ,eAAe;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,QAAA,IAAAC,SAAA;AAoB/C,MAAMC,WAAW,GAAGA,CAA8C;EAChEC,OAAO,GAAG,EAAE;EACZC,IAAI,GAAG,EAAE;EACTC,QAAQ;EACRC,QAAQ;EACRC,YAAY;EACZC,oBAAoB;EACpBC,KAAK;EACLC;AACuB,CAAC,KAAK;EAC7B,MAAM;IAAEC;EAAE,CAAC,GAAGd,cAAc,CAAC,CAAC;EAE9B,MAAMe,yBAAyB,GAC7BjB,MAAM,CAAuD,IAAI,CAAC;EAEpE,MAAM,CAACkB,aAAa,EAAEC,gBAAgB,CAAC,GAAGlB,QAAQ,CAChD,EACF,CAAC;EAED,MAAM,CAACmB,YAAY,EAAEC,eAAe,CAAC,GAAGpB,QAAQ,CAAS,CAAC;EAE1DH,SAAS,CAAC,MAAM;IACd,IAAIsB,YAAY,KAAKE,SAAS,EAAE;MAC9BT,oBAAoB,GAAGO,YAAY,CAAC;IACtC;EACF,CAAC,EAAE,CAACA,YAAY,EAAEP,oBAAoB,CAAC,CAAC;EAExC,MAAMU,aAAa,GAAGxB,OAAO,CAC3B,OAAO;IACLqB,YAAY;IACZF,aAAa;IACb,GAAGJ;EACL,CAAC,CAAC,EACF,CAACM,YAAY,EAAEF,aAAa,EAAEJ,KAAK,CACrC,CAAC;EAED,MAAMU,6BAA6B,GAAG3B,WAAW,CAM/C,CAAC;IAAE4B;EAAM,CAAC,KAAKrB,IAAA,CAAAE,SAAA;IAAAoB,QAAA,EAAGX,cAAc,IAAIX,IAAA,CAACW,cAAc;MAACU,KAAK,EAAEA;IAAM,CAAE;EAAC,CAAG,CAAC,EACxE,CAACV,cAAc,CACjB,CAAC;EAEDjB,SAAS,CAAC,MAAM;IACd,IAAI;MAEFmB,yBAAyB,CAACU,OAAO,EAAEC,aAAa,GAAG,CAAC,CAAC;IACvD,CAAC,CAAC,OAAOC,KAAK,EAAE;MACdC,OAAO,CAACD,KAAK,CAACA,KAAK,CAAC;IACtB;EACF,CAAC,EAAE,CAACX,aAAa,EAAEE,YAAY,CAAC,CAAC;EAEjC,MAAMK,KAAK,GAAG/B,qBAAqB,CAAC;IAClCc,OAAO,EAAEA,OAAO;IAChBC,IAAI,EAAEA,IAAI;IACVsB,mBAAmB,EAAE,KAAK;IAC1BC,gBAAgB,EAAE,KAAK;IACvBC,uBAAuB,EAAE,IAAI;IAC7BC,aAAa,EAAE,KAAK;IACpBxB,QAAQ,EAAEA,QAAQ;IAClBE,YAAY,EAAEA,YAAY;IAC1BuB,0BAA0B,EAAExB,QAAQ,GAChC;MAAEe,QAAQ,EAAEV,CAAC,CAAC,aAAa,CAAC;MAAEoB,KAAK,EAAE;IAAQ,CAAC,GAC9Cd,SAAS;IACbe,qBAAqB,EAAElB,gBAAgB;IACvCN,oBAAoB,EAAEQ,eAAe;IACrCG,6BAA6B,EAAEA,6BAA6B;IAC5DP,yBAAyB,EAAEA,yBAAyB;IACpDqB,qBAAqB,EAAE;MAAEC,QAAQ,EAAE;IAAE,CAAC;IACtCzB,KAAK,EAAES;EACT,CAAC,CAAC;EAEF,OAAOnB,IAAA,CAACT,kBAAkB;IAAC8B,KAAK,EAAEA;EAAM,CAAE,CAAC;AAC7C,CAAC;AAED,MAAMe,mBAAmB,GAAG5C,IAAI,CAACW,WAAW,CAAuB;AAEnE,SAASiC,mBAAmB,IAAIjC,WAAW"}
+{"version":3,"file":"StaticTable.js","names":["useMaterialReactTable","MaterialReactTable","memo","useCallback","useEffect","useMemo","useRef","useState","useTranslation","jsx","_jsx","Fragment","_Fragment","StaticTable","columns","data","getRowId","hasError","initialState","onGlobalFilterChange","state","ToolbarButtons","t","rowVirtualizerInstanceRef","columnFilters","setColumnFilters","globalFilter","setGlobalFilter","undefined","modifiedState","renderTopToolbarCustomActions","table","children","current","scrollToIndex","error","console","enableBottomToolbar","enablePagination","enableRowVirtualization","enableSorting","muiToolbarAlertBannerProps","color","onColumnFiltersChange","rowVirtualizerOptions","overscan","MemoizedStaticTable"],"sources":["../../src/labs/StaticTable.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  useMaterialReactTable,\n  type MRT_ColumnFiltersState,\n  type MRT_TableInstance,\n  type MRT_Virtualizer,\n  MaterialReactTable,\n} from \"material-react-table\";\nimport {\n  FunctionComponent,\n  memo,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { useTranslation } from \"react-i18next\";\n\nimport type {\n  DefaultMaterialReactTableData,\n  MaterialReactTableProps,\n} from \"./materialReactTableTypes\";\n\nexport type StaticTableProps<TData extends DefaultMaterialReactTableData> = {\n  columns: MaterialReactTableProps<TData>[\"columns\"];\n  data: MaterialReactTableProps<TData>[\"data\"];\n  getRowId?: MaterialReactTableProps<TData>[\"getRowId\"];\n  hasError?: boolean;\n  initialState?: MaterialReactTableProps<TData>[\"initialState\"];\n  onGlobalFilterChange?: MaterialReactTableProps<TData>[\"onGlobalFilterChange\"];\n  state?: MaterialReactTableProps<TData>[\"state\"];\n  ToolbarButtons?: FunctionComponent<\n    { table: MRT_TableInstance<TData> } & unknown\n  >;\n};\n\nconst StaticTable = <TData extends DefaultMaterialReactTableData>({\n  columns = [],\n  data = [],\n  getRowId,\n  hasError,\n  initialState,\n  onGlobalFilterChange,\n  state,\n  ToolbarButtons,\n}: StaticTableProps<TData>) => {\n  const { t } = useTranslation();\n\n  const rowVirtualizerInstanceRef =\n    useRef<MRT_Virtualizer<HTMLDivElement, HTMLTableRowElement>>(null);\n\n  const [columnFilters, setColumnFilters] = useState<MRT_ColumnFiltersState>(\n    [],\n  );\n\n  const [globalFilter, setGlobalFilter] = useState<string>();\n\n  useEffect(() => {\n    if (globalFilter !== undefined) {\n      onGlobalFilterChange?.(globalFilter);\n    }\n  }, [globalFilter, onGlobalFilterChange]);\n\n  const modifiedState = useMemo(\n    () => ({\n      globalFilter,\n      columnFilters,\n      ...state,\n    }),\n    [globalFilter, columnFilters, state],\n  );\n\n  const renderTopToolbarCustomActions = useCallback<\n    Exclude<\n      MaterialReactTableProps<TData>[\"renderTopToolbarCustomActions\"],\n      undefined\n    >\n  >(\n    ({ table }) => <>{ToolbarButtons && <ToolbarButtons table={table} />}</>,\n    [ToolbarButtons],\n  );\n\n  useEffect(() => {\n    try {\n      // Scroll to top of table when sorting or filters change.\n      rowVirtualizerInstanceRef.current?.scrollToIndex?.(0);\n    } catch (error) {\n      console.error(error);\n    }\n  }, [columnFilters, globalFilter]);\n\n  const table = useMaterialReactTable({\n    columns: columns,\n    data: data,\n    enableBottomToolbar: false,\n    enablePagination: false,\n    enableRowVirtualization: true,\n    enableSorting: false,\n    getRowId: getRowId,\n    initialState: initialState,\n    muiToolbarAlertBannerProps: hasError\n      ? { children: t(\"table.error\"), color: \"error\" }\n      : undefined,\n    onColumnFiltersChange: setColumnFilters,\n    onGlobalFilterChange: setGlobalFilter,\n    renderTopToolbarCustomActions: renderTopToolbarCustomActions,\n    rowVirtualizerInstanceRef: rowVirtualizerInstanceRef,\n    rowVirtualizerOptions: { overscan: 4 },\n    state: modifiedState,\n  });\n\n  return <MaterialReactTable table={table} />;\n};\n\nconst MemoizedStaticTable = memo(StaticTable) as typeof StaticTable;\n\nexport { MemoizedStaticTable as StaticTable };\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SACEA,qBAAqB,EAIrBC,kBAAkB,QACb,sBAAsB;AAC7B,SAEEC,IAAI,EACJC,WAAW,EACXC,SAAS,EACTC,OAAO,EACPC,MAAM,EACNC,QAAQ,QACH,OAAO;AACd,SAASC,cAAc,QAAQ,eAAe;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,QAAA,IAAAC,SAAA;AAoB/C,MAAMC,WAAW,GAAGA,CAA8C;EAChEC,OAAO,GAAG,EAAE;EACZC,IAAI,GAAG,EAAE;EACTC,QAAQ;EACRC,QAAQ;EACRC,YAAY;EACZC,oBAAoB;EACpBC,KAAK;EACLC;AACuB,CAAC,KAAK;EAC7B,MAAM;IAAEC;EAAE,CAAC,GAAGd,cAAc,CAAC,CAAC;EAE9B,MAAMe,yBAAyB,GAC7BjB,MAAM,CAAuD,IAAI,CAAC;EAEpE,MAAM,CAACkB,aAAa,EAAEC,gBAAgB,CAAC,GAAGlB,QAAQ,CAChD,EACF,CAAC;EAED,MAAM,CAACmB,YAAY,EAAEC,eAAe,CAAC,GAAGpB,QAAQ,CAAS,CAAC;EAE1DH,SAAS,CAAC,MAAM;IACd,IAAIsB,YAAY,KAAKE,SAAS,EAAE;MAC9BT,oBAAoB,GAAGO,YAAY,CAAC;IACtC;EACF,CAAC,EAAE,CAACA,YAAY,EAAEP,oBAAoB,CAAC,CAAC;EAExC,MAAMU,aAAa,GAAGxB,OAAO,CAC3B,OAAO;IACLqB,YAAY;IACZF,aAAa;IACb,GAAGJ;EACL,CAAC,CAAC,EACF,CAACM,YAAY,EAAEF,aAAa,EAAEJ,KAAK,CACrC,CAAC;EAED,MAAMU,6BAA6B,GAAG3B,WAAW,CAM/C,CAAC;IAAE4B;EAAM,CAAC,KAAKrB,IAAA,CAAAE,SAAA;IAAAoB,QAAA,EAAGX,cAAc,IAAIX,IAAA,CAACW,cAAc;MAACU,KAAK,EAAEA;IAAM,CAAE;EAAC,CAAG,CAAC,EACxE,CAACV,cAAc,CACjB,CAAC;EAEDjB,SAAS,CAAC,MAAM;IACd,IAAI;MAEFmB,yBAAyB,CAACU,OAAO,EAAEC,aAAa,GAAG,CAAC,CAAC;IACvD,CAAC,CAAC,OAAOC,KAAK,EAAE;MACdC,OAAO,CAACD,KAAK,CAACA,KAAK,CAAC;IACtB;EACF,CAAC,EAAE,CAACX,aAAa,EAAEE,YAAY,CAAC,CAAC;EAEjC,MAAMK,KAAK,GAAG/B,qBAAqB,CAAC;IAClCc,OAAO,EAAEA,OAAO;IAChBC,IAAI,EAAEA,IAAI;IACVsB,mBAAmB,EAAE,KAAK;IAC1BC,gBAAgB,EAAE,KAAK;IACvBC,uBAAuB,EAAE,IAAI;IAC7BC,aAAa,EAAE,KAAK;IACpBxB,QAAQ,EAAEA,QAAQ;IAClBE,YAAY,EAAEA,YAAY;IAC1BuB,0BAA0B,EAAExB,QAAQ,GAChC;MAAEe,QAAQ,EAAEV,CAAC,CAAC,aAAa,CAAC;MAAEoB,KAAK,EAAE;IAAQ,CAAC,GAC9Cd,SAAS;IACbe,qBAAqB,EAAElB,gBAAgB;IACvCN,oBAAoB,EAAEQ,eAAe;IACrCG,6BAA6B,EAAEA,6BAA6B;IAC5DP,yBAAyB,EAAEA,yBAAyB;IACpDqB,qBAAqB,EAAE;MAAEC,QAAQ,EAAE;IAAE,CAAC;IACtCzB,KAAK,EAAES;EACT,CAAC,CAAC;EAEF,OAAOnB,IAAA,CAACT,kBAAkB;IAAC8B,KAAK,EAAEA;EAAM,CAAE,CAAC;AAC7C,CAAC;AAED,MAAMe,mBAAmB,GAAG5C,IAAI,CAACW,WAAW,CAAuB;AAEnE,SAASiC,mBAAmB,IAAIjC,WAAW"}

package/dist/labs/Switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.js","names":["memo","useCallback","useEffect","useMemo","useRef","useState","useTranslation","useOdysseyDesignTokens","Box","FieldHint","useUniqueId","ComponentControlledState","getControlState","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","CONTROLLED","SwitchLabel","checked","hint","hintId","isFullWidth","label","odysseyDesignTokens","t","children","sx","display","alignItems","flexWrap","gap","Spacing1","margin","maxWidth","TypographyLineLengthMax","fontWeight","TypographyWeightBodyBold","padding","backgroundColor","PaletteSuccessLighter","HueNeutral100","borderRadius","BorderRadiusMain","color","PaletteSuccessText","HueNeutral700","fontSize","TypographyScale0","lineHeight","TypographyLineHeightOverline","transitionProperty","transitionDuration","TransitionDurationMain","id","text","Switch","_id","isChecked","isDefaultChecked","isDisabled","name","_name","onChange","testId","value","controlledStateRef","controlledValue","uncontrolledValue","inputValues","current","defaultChecked","internalSwitchChecked","setInternalSwitchChecked","Boolean","undefined","labelElementId","handleOnChange","_","renderSwitchComponent","_Switch","disabled","disableRipple","inputProps","marginBlockEnd","Spacing2","_FormControlLabel","control","labelPlacement","justifyContent","Spacing4","width","MemoizedSwitch","displayName"],"sources":["../../src/labs/Switch.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  SyntheticEvent,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport {\n  Switch as MuiSwitch,\n  SwitchProps as MuiSwitchProps,\n  FormControlLabel,\n} from \"@mui/material\";\nimport { useTranslation } from \"react-i18next\";\n\nimport { useOdysseyDesignTokens } from \"../OdysseyDesignTokensContext\";\nimport { Box } from \"../Box\";\nimport { FieldComponentProps } from \"../FieldComponentProps\";\nimport { FieldHint } from \"../FieldHint\";\nimport type { HtmlProps } from \"../HtmlProps\";\nimport { useUniqueId } from \"../useUniqueId\";\nimport { ComponentControlledState, getControlState } from \"../inputUtils\";\nimport { CheckedFieldProps } from \"../FormCheckedProps\";\n\nconst { CONTROLLED } = ComponentControlledState;\n\ntype OnChangeCallbackArguments = {\n  checked: boolean;\n  value: string;\n};\n\nexport type SwitchProps = {\n  /**\n   * if `true`, the label and switch span entire containing element's width\n   */\n  isFullWidth?: boolean;\n  /**\n   * The label text for the Switch\n   */\n  label: string;\n  /**\n   * The change event handler for the Switch\n   */\n  onChange?: ({ checked, value }: OnChangeCallbackArguments) => void;\n  /**\n   * The value attribute of the Switch\n   */\n  value: string;\n} & Pick<\n  FieldComponentProps,\n  \"hint\" | \"id\" | \"isFullWidth\" | \"isDisabled\" | \"name\"\n> &\n  CheckedFieldProps<MuiSwitchProps> &\n  HtmlProps;\n\ntype SwitchLabelProps = {\n  checked: boolean;\n  hint: SwitchProps[\"hint\"];\n  hintId?: string;\n  isFullWidth: SwitchProps[\"isFullWidth\"];\n  label: SwitchProps[\"label\"];\n};\n\nconst SwitchLabel = ({\n  checked,\n  hint,\n  hintId,\n  isFullWidth,\n  label,\n}: SwitchLabelProps) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n  const { t } = useTranslation();\n\n  return (\n    <>\n      <Box\n        sx={{\n          display: \"flex\",\n          alignItems: \"center\",\n          flexWrap: \"wrap\",\n          gap: odysseyDesignTokens.Spacing1,\n          margin: 0,\n          maxWidth: isFullWidth\n            ? \"100%\"\n            : odysseyDesignTokens.TypographyLineLengthMax,\n          fontWeight: odysseyDesignTokens.TypographyWeightBodyBold,\n        }}\n      >\n        {label}\n        <Box\n          sx={{\n            padding: \"2px 4px\",\n            backgroundColor: checked\n              ? odysseyDesignTokens.PaletteSuccessLighter\n              : odysseyDesignTokens.HueNeutral100,\n            borderRadius: odysseyDesignTokens.BorderRadiusMain,\n            color: checked\n              ? odysseyDesignTokens.PaletteSuccessText\n              : odysseyDesignTokens.HueNeutral700,\n            fontWeight: odysseyDesignTokens.TypographyWeightBodyBold,\n            fontSize: odysseyDesignTokens.TypographyScale0,\n            lineHeight: odysseyDesignTokens.TypographyLineHeightOverline,\n            transitionProperty: \"background-color, color\",\n            transitionDuration: odysseyDesignTokens.TransitionDurationMain,\n          }}\n        >\n          {checked ? t(\"switch.active\") : t(\"switch.inactive\")}\n        </Box>\n      </Box>\n      {hint && <FieldHint id={hintId} text={hint} />}\n    </>\n  );\n};\n\nconst Switch = ({\n  hint,\n  id: _id,\n  isChecked,\n  isDefaultChecked,\n  isDisabled,\n  isFullWidth = false,\n  label,\n  name: _name,\n  onChange,\n  testId,\n  value = \"Something\",\n}: SwitchProps) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n  const controlledStateRef = useRef(\n    getControlState({\n      controlledValue: isChecked,\n      uncontrolledValue: isDefaultChecked,\n    })\n  );\n  const inputValues = useMemo(() => {\n    if (controlledStateRef.current === CONTROLLED) {\n      return { checked: isChecked };\n    }\n    return { defaultChecked: isDefaultChecked };\n  }, [isDefaultChecked, isChecked]);\n\n  const [internalSwitchChecked, setInternalSwitchChecked] = useState(\n    controlledStateRef.current === CONTROLLED\n      ? Boolean(isChecked)\n      : Boolean(isDefaultChecked)\n  );\n\n  useEffect(() => {\n    if (controlledStateRef.current === CONTROLLED) {\n      setInternalSwitchChecked(Boolean(isChecked));\n    }\n  }, [isChecked]);\n\n  const id = useUniqueId(_id);\n\n  const hintId = hint ? `${id}-hint` : undefined;\n  const labelElementId = `${id}-label`;\n\n  const handleOnChange = useCallback(\n    (_: SyntheticEvent<Element, Event>, checked: boolean) => {\n      setInternalSwitchChecked(checked);\n      onChange?.({ checked, value });\n    },\n    [onChange, setInternalSwitchChecked, value]\n  );\n\n  const renderSwitchComponent = useMemo(\n    () => (\n      <MuiSwitch\n        {...inputValues}\n        disabled={isDisabled}\n        disableRipple\n        inputProps={{\n          \"aria-checked\": internalSwitchChecked,\n          \"aria-describedby\": hintId,\n          \"aria-label\": label,\n          \"aria-labelledby\": labelElementId,\n          \"data-se\": testId,\n        }}\n        name={_name ?? id}\n        onChange={handleOnChange}\n      />\n    ),\n    [\n      handleOnChange,\n      hintId,\n      inputValues,\n      internalSwitchChecked,\n      id,\n      isDisabled,\n      label,\n      labelElementId,\n      _name,\n      testId,\n    ]\n  );\n\n  return (\n    <Box\n      sx={{\n        marginBlockEnd: odysseyDesignTokens.Spacing2,\n      }}\n    >\n      <FormControlLabel\n        checked={internalSwitchChecked}\n        control={renderSwitchComponent}\n        disabled={isDisabled}\n        id={labelElementId}\n        label={\n          <SwitchLabel\n            checked={internalSwitchChecked}\n            hint={hint}\n            hintId={hintId}\n            isFullWidth={isFullWidth}\n            label={label}\n          />\n        }\n        labelPlacement=\"start\"\n        sx={{\n          justifyContent: \"space-between\",\n          alignItems: \"flex-start\",\n          gap: odysseyDesignTokens.Spacing4,\n          width: \"100%\",\n          maxWidth: isFullWidth\n            ? \"100%\"\n            : odysseyDesignTokens.TypographyLineLengthMax,\n        }}\n        value={value}\n      />\n    </Box>\n  );\n};\n\nconst MemoizedSwitch = memo(Switch);\nMemoizedSwitch.displayName = \"Switch\";\n\nexport { MemoizedSwitch as Switch };\n"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SACEA,IAAI,EAEJC,WAAW,EACXC,SAAS,EACTC,OAAO,EACPC,MAAM,EACNC,QAAQ,QACH,OAAO;AAMd,SAASC,cAAc,QAAQ,eAAe;AAAC,SAEtCC,sBAAsB;AAAA,SACtBC,GAAG;AAAA,SAEHC,SAAS;AAAA,SAETC,WAAW;AAAA,SACXC,wBAAwB,EAAEC,eAAe;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAAA,SAAAC,QAAA,IAAAC,SAAA;AAGlD,MAAM;EAAEC;AAAW,CAAC,GAAGR,wBAAwB;AAuC/C,MAAMS,WAAW,GAAGA,CAAC;EACnBC,OAAO;EACPC,IAAI;EACJC,MAAM;EACNC,WAAW;EACXC;AACgB,CAAC,KAAK;EACtB,MAAMC,mBAAmB,GAAGnB,sBAAsB,CAAC,CAAC;EACpD,MAAM;IAAEoB;EAAE,CAAC,GAAGrB,cAAc,CAAC,CAAC;EAE9B,OACEU,KAAA,CAAAE,SAAA;IAAAU,QAAA,GACEZ,KAAA,CAACR,GAAG;MACFqB,EAAE,EAAE;QACFC,OAAO,EAAE,MAAM;QACfC,UAAU,EAAE,QAAQ;QACpBC,QAAQ,EAAE,MAAM;QAChBC,GAAG,EAAEP,mBAAmB,CAACQ,QAAQ;QACjCC,MAAM,EAAE,CAAC;QACTC,QAAQ,EAAEZ,WAAW,GACjB,MAAM,GACNE,mBAAmB,CAACW,uBAAuB;QAC/CC,UAAU,EAAEZ,mBAAmB,CAACa;MAClC,CAAE;MAAAX,QAAA,GAEDH,KAAK,EACNX,IAAA,CAACN,GAAG;QACFqB,EAAE,EAAE;UACFW,OAAO,EAAE,SAAS;UAClBC,eAAe,EAAEpB,OAAO,GACpBK,mBAAmB,CAACgB,qBAAqB,GACzChB,mBAAmB,CAACiB,aAAa;UACrCC,YAAY,EAAElB,mBAAmB,CAACmB,gBAAgB;UAClDC,KAAK,EAAEzB,OAAO,GACVK,mBAAmB,CAACqB,kBAAkB,GACtCrB,mBAAmB,CAACsB,aAAa;UACrCV,UAAU,EAAEZ,mBAAmB,CAACa,wBAAwB;UACxDU,QAAQ,EAAEvB,mBAAmB,CAACwB,gBAAgB;UAC9CC,UAAU,EAAEzB,mBAAmB,CAAC0B,4BAA4B;UAC5DC,kBAAkB,EAAE,yBAAyB;UAC7CC,kBAAkB,EAAE5B,mBAAmB,CAAC6B;QAC1C,CAAE;QAAA3B,QAAA,EAEDP,OAAO,GAAGM,CAAC,CAAC,eAAe,CAAC,GAAGA,CAAC,CAAC,iBAAiB;MAAC,CACjD,CAAC;IAAA,CACH,CAAC,EACLL,IAAI,IAAIR,IAAA,CAACL,SAAS;MAAC+C,EAAE,EAAEjC,MAAO;MAACkC,IAAI,EAAEnC;IAAK,CAAE,CAAC;EAAA,CAC9C,CAAC;AAEP,CAAC;AAED,MAAMoC,MAAM,GAAGA,CAAC;EACdpC,IAAI;EACJkC,EAAE,EAAEG,GAAG;EACPC,SAAS;EACTC,gBAAgB;EAChBC,UAAU;EACVtC,WAAW,GAAG,KAAK;EACnBC,KAAK;EACLsC,IAAI,EAAEC,KAAK;EACXC,QAAQ;EACRC,MAAM;EACNC,KAAK,GAAG;AACG,CAAC,KAAK;EACjB,MAAMzC,mBAAmB,GAAGnB,sBAAsB,CAAC,CAAC;EACpD,MAAM6D,kBAAkB,GAAGhE,MAAM,CAC/BQ,eAAe,CAAC;IACdyD,eAAe,EAAET,SAAS;IAC1BU,iBAAiB,EAAET;EACrB,CAAC,CACH,CAAC;EACD,MAAMU,WAAW,GAAGpE,OAAO,CAAC,MAAM;IAChC,IAAIiE,kBAAkB,CAACI,OAAO,KAAKrD,UAAU,EAAE;MAC7C,OAAO;QAAEE,OAAO,EAAEuC;MAAU,CAAC;IAC/B;IACA,OAAO;MAAEa,cAAc,EAAEZ;IAAiB,CAAC;EAC7C,CAAC,EAAE,CAACA,gBAAgB,EAAED,SAAS,CAAC,CAAC;EAEjC,MAAM,CAACc,qBAAqB,EAAEC,wBAAwB,CAAC,GAAGtE,QAAQ,CAChE+D,kBAAkB,CAACI,OAAO,KAAKrD,UAAU,GACrCyD,OAAO,CAAChB,SAAS,CAAC,GAClBgB,OAAO,CAACf,gBAAgB,CAC9B,CAAC;EAED3D,SAAS,CAAC,MAAM;IACd,IAAIkE,kBAAkB,CAACI,OAAO,KAAKrD,UAAU,EAAE;MAC7CwD,wBAAwB,CAACC,OAAO,CAAChB,SAAS,CAAC,CAAC;IAC9C;EACF,CAAC,EAAE,CAACA,SAAS,CAAC,CAAC;EAEf,MAAMJ,EAAE,GAAG9C,WAAW,CAACiD,GAAG,CAAC;EAE3B,MAAMpC,MAAM,GAAGD,IAAI,GAAI,GAAEkC,EAAG,OAAM,GAAGqB,SAAS;EAC9C,MAAMC,cAAc,GAAI,GAAEtB,EAAG,QAAO;EAEpC,MAAMuB,cAAc,GAAG9E,WAAW,CAChC,CAAC+E,CAAiC,EAAE3D,OAAgB,KAAK;IACvDsD,wBAAwB,CAACtD,OAAO,CAAC;IACjC4C,QAAQ,GAAG;MAAE5C,OAAO;MAAE8C;IAAM,CAAC,CAAC;EAChC,CAAC,EACD,CAACF,QAAQ,EAAEU,wBAAwB,EAAER,KAAK,CAC5C,CAAC;EAED,MAAMc,qBAAqB,GAAG9E,OAAO,CACnC,MACEW,IAAA,CAAAoE,OAAA;IAAA,GACMX,WAAW;IACfY,QAAQ,EAAErB,UAAW;IACrBsB,aAAa;IACbC,UAAU,EAAE;MACV,cAAc,EAAEX,qBAAqB;MACrC,kBAAkB,EAAEnD,MAAM;MAC1B,YAAY,EAAEE,KAAK;MACnB,iBAAiB,EAAEqD,cAAc;MACjC,SAAS,EAAEZ;IACb,CAAE;IACFH,IAAI,EAAEC,KAAK,IAAIR,EAAG;IAClBS,QAAQ,EAAEc;EAAe,CAC1B,CACF,EACD,CACEA,cAAc,EACdxD,MAAM,EACNgD,WAAW,EACXG,qBAAqB,EACrBlB,EAAE,EACFM,UAAU,EACVrC,KAAK,EACLqD,cAAc,EACdd,KAAK,EACLE,MAAM,CAEV,CAAC;EAED,OACEpD,IAAA,CAACN,GAAG;IACFqB,EAAE,EAAE;MACFyD,cAAc,EAAE5D,mBAAmB,CAAC6D;IACtC,CAAE;IAAA3D,QAAA,EAEFd,IAAA,CAAA0E,iBAAA;MACEnE,OAAO,EAAEqD,qBAAsB;MAC/Be,OAAO,EAAER,qBAAsB;MAC/BE,QAAQ,EAAErB,UAAW;MACrBN,EAAE,EAAEsB,cAAe;MACnBrD,KAAK,EACHX,IAAA,CAACM,WAAW;QACVC,OAAO,EAAEqD,qBAAsB;QAC/BpD,IAAI,EAAEA,IAAK;QACXC,MAAM,EAAEA,MAAO;QACfC,WAAW,EAAEA,WAAY;QACzBC,KAAK,EAAEA;MAAM,CACd,CACF;MACDiE,cAAc,EAAC,OAAO;MACtB7D,EAAE,EAAE;QACF8D,cAAc,EAAE,eAAe;QAC/B5D,UAAU,EAAE,YAAY;QACxBE,GAAG,EAAEP,mBAAmB,CAACkE,QAAQ;QACjCC,KAAK,EAAE,MAAM;QACbzD,QAAQ,EAAEZ,WAAW,GACjB,MAAM,GACNE,mBAAmB,CAACW;MAC1B,CAAE;MACF8B,KAAK,EAAEA;IAAM,CACd;EAAC,CACC,CAAC;AAEV,CAAC;AAED,MAAM2B,cAAc,GAAG9F,IAAI,CAAC0D,MAAM,CAAC;AACnCoC,cAAc,CAACC,WAAW,GAAG,QAAQ;AAErC,SAASD,cAAc,IAAIpC,MAAM"}
+{"version":3,"file":"Switch.js","names":["memo","useCallback","useEffect","useMemo","useRef","useState","useTranslation","useOdysseyDesignTokens","Box","FieldHint","useUniqueId","ComponentControlledState","getControlState","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","CONTROLLED","SwitchLabel","checked","hint","hintId","isFullWidth","label","odysseyDesignTokens","t","children","sx","display","alignItems","flexWrap","gap","Spacing1","margin","maxWidth","TypographyLineLengthMax","fontWeight","TypographyWeightBodyBold","padding","backgroundColor","PaletteSuccessLighter","HueNeutral100","borderRadius","BorderRadiusMain","color","PaletteSuccessText","HueNeutral700","fontSize","TypographyScale0","lineHeight","TypographyLineHeightOverline","transitionProperty","transitionDuration","TransitionDurationMain","id","text","Switch","_id","isChecked","isDefaultChecked","isDisabled","name","_name","onChange","testId","value","controlledStateRef","controlledValue","uncontrolledValue","inputValues","current","defaultChecked","internalSwitchChecked","setInternalSwitchChecked","Boolean","undefined","labelElementId","handleOnChange","_","renderSwitchComponent","_Switch","disabled","disableRipple","inputProps","marginBlockEnd","Spacing2","_FormControlLabel","control","labelPlacement","justifyContent","Spacing4","width","MemoizedSwitch","displayName"],"sources":["../../src/labs/Switch.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  SyntheticEvent,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport {\n  Switch as MuiSwitch,\n  SwitchProps as MuiSwitchProps,\n  FormControlLabel,\n} from \"@mui/material\";\nimport { useTranslation } from \"react-i18next\";\n\nimport { useOdysseyDesignTokens } from \"../OdysseyDesignTokensContext\";\nimport { Box } from \"../Box\";\nimport { FieldComponentProps } from \"../FieldComponentProps\";\nimport { FieldHint } from \"../FieldHint\";\nimport type { HtmlProps } from \"../HtmlProps\";\nimport { useUniqueId } from \"../useUniqueId\";\nimport { ComponentControlledState, getControlState } from \"../inputUtils\";\nimport { CheckedFieldProps } from \"../FormCheckedProps\";\n\nconst { CONTROLLED } = ComponentControlledState;\n\ntype OnChangeCallbackArguments = {\n  checked: boolean;\n  value: string;\n};\n\nexport type SwitchProps = {\n  /**\n   * if `true`, the label and switch span entire containing element's width\n   */\n  isFullWidth?: boolean;\n  /**\n   * The label text for the Switch\n   */\n  label: string;\n  /**\n   * The change event handler for the Switch\n   */\n  onChange?: ({ checked, value }: OnChangeCallbackArguments) => void;\n  /**\n   * The value attribute of the Switch\n   */\n  value: string;\n} & Pick<\n  FieldComponentProps,\n  \"hint\" | \"id\" | \"isFullWidth\" | \"isDisabled\" | \"name\"\n> &\n  CheckedFieldProps<MuiSwitchProps> &\n  Pick<HtmlProps, \"testId\">;\n\ntype SwitchLabelProps = {\n  checked: boolean;\n  hint: SwitchProps[\"hint\"];\n  hintId?: string;\n  isFullWidth: SwitchProps[\"isFullWidth\"];\n  label: SwitchProps[\"label\"];\n};\n\nconst SwitchLabel = ({\n  checked,\n  hint,\n  hintId,\n  isFullWidth,\n  label,\n}: SwitchLabelProps) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n  const { t } = useTranslation();\n\n  return (\n    <>\n      <Box\n        sx={{\n          display: \"flex\",\n          alignItems: \"center\",\n          flexWrap: \"wrap\",\n          gap: odysseyDesignTokens.Spacing1,\n          margin: 0,\n          maxWidth: isFullWidth\n            ? \"100%\"\n            : odysseyDesignTokens.TypographyLineLengthMax,\n          fontWeight: odysseyDesignTokens.TypographyWeightBodyBold,\n        }}\n      >\n        {label}\n        <Box\n          sx={{\n            padding: \"2px 4px\",\n            backgroundColor: checked\n              ? odysseyDesignTokens.PaletteSuccessLighter\n              : odysseyDesignTokens.HueNeutral100,\n            borderRadius: odysseyDesignTokens.BorderRadiusMain,\n            color: checked\n              ? odysseyDesignTokens.PaletteSuccessText\n              : odysseyDesignTokens.HueNeutral700,\n            fontWeight: odysseyDesignTokens.TypographyWeightBodyBold,\n            fontSize: odysseyDesignTokens.TypographyScale0,\n            lineHeight: odysseyDesignTokens.TypographyLineHeightOverline,\n            transitionProperty: \"background-color, color\",\n            transitionDuration: odysseyDesignTokens.TransitionDurationMain,\n          }}\n        >\n          {checked ? t(\"switch.active\") : t(\"switch.inactive\")}\n        </Box>\n      </Box>\n      {hint && <FieldHint id={hintId} text={hint} />}\n    </>\n  );\n};\n\nconst Switch = ({\n  hint,\n  id: _id,\n  isChecked,\n  isDefaultChecked,\n  isDisabled,\n  isFullWidth = false,\n  label,\n  name: _name,\n  onChange,\n  testId,\n  value = \"Something\",\n}: SwitchProps) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n  const controlledStateRef = useRef(\n    getControlState({\n      controlledValue: isChecked,\n      uncontrolledValue: isDefaultChecked,\n    }),\n  );\n  const inputValues = useMemo(() => {\n    if (controlledStateRef.current === CONTROLLED) {\n      return { checked: isChecked };\n    }\n    return { defaultChecked: isDefaultChecked };\n  }, [isDefaultChecked, isChecked]);\n\n  const [internalSwitchChecked, setInternalSwitchChecked] = useState(\n    controlledStateRef.current === CONTROLLED\n      ? Boolean(isChecked)\n      : Boolean(isDefaultChecked),\n  );\n\n  useEffect(() => {\n    if (controlledStateRef.current === CONTROLLED) {\n      setInternalSwitchChecked(Boolean(isChecked));\n    }\n  }, [isChecked]);\n\n  const id = useUniqueId(_id);\n\n  const hintId = hint ? `${id}-hint` : undefined;\n  const labelElementId = `${id}-label`;\n\n  const handleOnChange = useCallback(\n    (_: SyntheticEvent<Element, Event>, checked: boolean) => {\n      setInternalSwitchChecked(checked);\n      onChange?.({ checked, value });\n    },\n    [onChange, setInternalSwitchChecked, value],\n  );\n\n  const renderSwitchComponent = useMemo(\n    () => (\n      <MuiSwitch\n        {...inputValues}\n        disabled={isDisabled}\n        disableRipple\n        inputProps={{\n          \"aria-checked\": internalSwitchChecked,\n          \"aria-describedby\": hintId,\n          \"aria-label\": label,\n          \"aria-labelledby\": labelElementId,\n          \"data-se\": testId,\n        }}\n        name={_name ?? id}\n        onChange={handleOnChange}\n      />\n    ),\n    [\n      handleOnChange,\n      hintId,\n      inputValues,\n      internalSwitchChecked,\n      id,\n      isDisabled,\n      label,\n      labelElementId,\n      _name,\n      testId,\n    ],\n  );\n\n  return (\n    <Box\n      sx={{\n        marginBlockEnd: odysseyDesignTokens.Spacing2,\n      }}\n    >\n      <FormControlLabel\n        checked={internalSwitchChecked}\n        control={renderSwitchComponent}\n        disabled={isDisabled}\n        id={labelElementId}\n        label={\n          <SwitchLabel\n            checked={internalSwitchChecked}\n            hint={hint}\n            hintId={hintId}\n            isFullWidth={isFullWidth}\n            label={label}\n          />\n        }\n        labelPlacement=\"start\"\n        sx={{\n          justifyContent: \"space-between\",\n          alignItems: \"flex-start\",\n          gap: odysseyDesignTokens.Spacing4,\n          width: \"100%\",\n          maxWidth: isFullWidth\n            ? \"100%\"\n            : odysseyDesignTokens.TypographyLineLengthMax,\n        }}\n        value={value}\n      />\n    </Box>\n  );\n};\n\nconst MemoizedSwitch = memo(Switch);\nMemoizedSwitch.displayName = \"Switch\";\n\nexport { MemoizedSwitch as Switch };\n"],"mappings":"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"}

package/dist/labs/VirtualizedAutocomplete.js.map

@@ -1 +1 @@
-{"version":3,"file":"VirtualizedAutocomplete.js","names":["memo","useCallback","useMemo","useRef","Field","ComponentControlledState","getControlState","useInputValues","jsx","_jsx","VirtualizedAutocomplete","ariaDescribedBy","defaultValue","errorMessage","errorMessageList","hasMultipleChoices","id","idOverride","inputValue","isCustomValueAllowed","isDisabled","isLoading","isOptional","isReadOnly","hint","label","ListboxComponent","name","nameOverride","onBlur","onChange","onChangeProp","onInputChange","onInputChangeProp","onFocus","options","value","getIsOptionEqualToValue","testId","translate","controlledStateRef","controlledValue","uncontrolledValue","defaultValueProp","undefined","valueProps","controlState","current","inputValueProp","CONTROLLED","renderInput","InputLabelProps","InputProps","params","fieldType","hasVisibleLabel","htmlFor","renderFieldComponent","errorMessageElementId","labelElementId","_InputBase","inputProps","required","event","reason","details","_Autocomplete","disableCloseOnSelect","disabled","freeSolo","filterSelectedOptions","loading","multiple","readOnly","isOptionEqualToValue","MemoizedAutocomplete","displayName"],"sources":["../../src/labs/VirtualizedAutocomplete.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2023-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  Autocomplete as MuiAutocomplete,\n  AutocompleteProps as MuiAutocompleteProps,\n  InputBase,\n  UseAutocompleteProps,\n  AutocompleteValue,\n} from \"@mui/material\";\nimport { memo, useCallback, useMemo, useRef } from \"react\";\n\nimport { Field } from \"../Field\";\nimport { FieldComponentProps } from \"../FieldComponentProps\";\nimport type { HtmlProps } from \"../HtmlProps\";\nimport {\n  ComponentControlledState,\n  getControlState,\n  useInputValues,\n} from \"../inputUtils\";\n\nexport type AutocompleteProps<\n  OptionType,\n  HasMultipleChoices extends boolean | undefined,\n  IsCustomValueAllowed extends boolean | undefined\n> = {\n  /**\n   * The default value. Use when the component is not controlled.\n   * @default props.multiple ? [] : null\n   */\n  defaultValue?: UseAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"defaultValue\"];\n  /**\n   * Enables multiple choice selection\n   */\n  hasMultipleChoices?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"multiple\"];\n  /**\n   * The value for the input\n   */\n  inputValue?: UseAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"inputValue\"];\n  /**\n   * Allows the input of custom values\n   */\n  isCustomValueAllowed?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"freeSolo\"];\n  /**\n   * Disables the Autocomplete input\n   */\n  isDisabled?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"disabled\"];\n  /**\n   * Displays a loading indicator\n   */\n  isLoading?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"loading\"];\n  /**\n   * Makes the Autocomplete input read-only\n   */\n  isReadOnly?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"readOnly\"];\n  /**\n   * The label text for the autocomplete input\n   */\n  label: string;\n  /**\n   * The component used to render the listbox.\n   */\n  ListboxComponent?: React.JSXElementConstructor<\n    React.HTMLAttributes<HTMLElement>\n  >;\n  /**\n   * Callback fired when the autocomplete loses focus.\n   */\n  onBlur?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"onBlur\"];\n  /**\n   * Callback fired when a selection is made.\n   */\n  onChange?: UseAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"onChange\"];\n  /**\n   * Callback fired when the textbox receives typed characters.\n   */\n  onInputChange?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"onInputChange\"];\n  /**\n   * Callback fired when the autocomplete gains focus.\n   */\n  onFocus?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"onFocus\"];\n  /**\n   * The options for the Autocomplete input\n   */\n  options: ReadonlyArray<OptionType>;\n  /**\n   * The value of the Autocomplete input\n   */\n  value?: UseAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"value\"];\n\n  /**\n   * Used to determine if the option represents the given value. Uses strict equality by default if none provided.\n   * Both arguments need to be handled, an option can only match with one value.\n   * option: the option to test\n   * value: the value to test against\n   *\n   * You will need to implement this function if your `option` items are objects.\n   */\n  getIsOptionEqualToValue?: (option: OptionType, value: OptionType) => boolean;\n} & Pick<\n  FieldComponentProps,\n  | \"ariaDescribedBy\"\n  | \"errorMessage\"\n  | \"errorMessageList\"\n  | \"hint\"\n  | \"id\"\n  | \"isOptional\"\n  | \"name\"\n> &\n  HtmlProps;\n\nconst VirtualizedAutocomplete = <\n  OptionType,\n  HasMultipleChoices extends boolean | undefined,\n  IsCustomValueAllowed extends boolean | undefined\n>({\n  ariaDescribedBy,\n  defaultValue,\n  errorMessage,\n  errorMessageList,\n  hasMultipleChoices,\n  id: idOverride,\n  inputValue,\n  isCustomValueAllowed,\n  isDisabled,\n  isLoading,\n  isOptional = false,\n  isReadOnly,\n  hint,\n  label,\n  ListboxComponent,\n  name: nameOverride,\n  onBlur,\n  onChange: onChangeProp,\n  onInputChange: onInputChangeProp,\n  onFocus,\n  options,\n  value,\n  getIsOptionEqualToValue,\n  testId,\n  translate,\n}: AutocompleteProps<OptionType, HasMultipleChoices, IsCustomValueAllowed>) => {\n  const controlledStateRef = useRef(\n    getControlState({ controlledValue: value, uncontrolledValue: defaultValue })\n  );\n  const defaultValueProp = useMemo<\n    | AutocompleteValue<\n        OptionType,\n        HasMultipleChoices,\n        undefined,\n        IsCustomValueAllowed\n      >\n    | undefined\n  >(() => {\n    if (hasMultipleChoices) {\n      return defaultValue === undefined\n        ? ([] as AutocompleteValue<\n            OptionType,\n            HasMultipleChoices,\n            undefined,\n            IsCustomValueAllowed\n          >)\n        : defaultValue;\n    }\n    return defaultValue ?? undefined;\n  }, [defaultValue, hasMultipleChoices]);\n\n  const valueProps = useInputValues({\n    defaultValue: defaultValueProp,\n    value: value,\n    controlState: controlledStateRef.current,\n  });\n\n  const inputValueProp = useMemo(() => {\n    if (controlledStateRef.current === ComponentControlledState.CONTROLLED) {\n      return { inputValue };\n    }\n    return undefined;\n  }, [inputValue]);\n\n  const renderInput = useCallback(\n    ({ InputLabelProps, InputProps, ...params }) => (\n      <Field\n        ariaDescribedBy={ariaDescribedBy}\n        errorMessage={errorMessage}\n        errorMessageList={errorMessageList}\n        fieldType=\"single\"\n        hasVisibleLabel\n        id={InputLabelProps.htmlFor}\n        hint={hint}\n        label={label}\n        isOptional={isOptional}\n        renderFieldComponent={({\n          ariaDescribedBy,\n          id,\n          errorMessageElementId,\n          labelElementId,\n        }) => (\n          <InputBase\n            {...params}\n            {...InputProps}\n            inputProps={{\n              ...params.inputProps,\n              \"aria-errormessage\": errorMessageElementId,\n              \"aria-labelledby\": labelElementId,\n              \"data-se\": testId,\n            }}\n            aria-describedby={ariaDescribedBy}\n            id={id}\n            name={nameOverride ?? id}\n            required={!isOptional}\n          />\n        )}\n      />\n    ),\n    [\n      ariaDescribedBy,\n      errorMessage,\n      errorMessageList,\n      hint,\n      isOptional,\n      label,\n      nameOverride,\n      testId,\n    ]\n  );\n  const onChange = useCallback<\n    NonNullable<\n      UseAutocompleteProps<\n        OptionType,\n        HasMultipleChoices,\n        undefined,\n        IsCustomValueAllowed\n      >[\"onChange\"]\n    >\n  >(\n    (event, value, reason, details) => {\n      onChangeProp?.(event, value, reason, details);\n    },\n    [onChangeProp]\n  );\n\n  const onInputChange = useCallback<\n    NonNullable<\n      UseAutocompleteProps<\n        OptionType,\n        HasMultipleChoices,\n        undefined,\n        IsCustomValueAllowed\n      >[\"onInputChange\"]\n    >\n  >(\n    (event, value, reason) => {\n      onInputChangeProp?.(event, value, reason);\n    },\n    [onInputChangeProp]\n  );\n\n  return (\n    <MuiAutocomplete\n      {...valueProps}\n      {...inputValueProp}\n      // AutoComplete is wrapped in a div within MUI which does not get the disabled attr. So this aria-disabled gets set in the div\n      aria-disabled={isDisabled}\n      disableCloseOnSelect={hasMultipleChoices}\n      disabled={isDisabled}\n      freeSolo={isCustomValueAllowed}\n      filterSelectedOptions={true}\n      id={idOverride}\n      ListboxComponent={ListboxComponent}\n      loading={isLoading}\n      multiple={hasMultipleChoices}\n      onBlur={onBlur}\n      onChange={onChange}\n      onInputChange={onInputChange}\n      onFocus={onFocus}\n      options={options}\n      readOnly={isReadOnly}\n      renderInput={renderInput}\n      isOptionEqualToValue={getIsOptionEqualToValue}\n      translate={translate}\n    />\n  );\n};\n\n// Need the `typeof Autocomplete` because generics don't get passed through\nconst MemoizedAutocomplete = memo(\n  VirtualizedAutocomplete\n) as typeof VirtualizedAutocomplete;\n// @ts-expect-error displayName is expected to not be on `typeof Autocomplete`\nMemoizedAutocomplete.displayName = \"Autocomplete\";\n\nexport { MemoizedAutocomplete as VirtualizedAutocomplete };\n"],"mappings":"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"}
+{"version":3,"file":"VirtualizedAutocomplete.js","names":["memo","useCallback","useMemo","useRef","Field","ComponentControlledState","getControlState","useInputValues","jsx","_jsx","VirtualizedAutocomplete","ariaDescribedBy","defaultValue","errorMessage","errorMessageList","hasMultipleChoices","id","idOverride","inputValue","isCustomValueAllowed","isDisabled","isLoading","isOptional","isReadOnly","hint","label","ListboxComponent","name","nameOverride","onBlur","onChange","onChangeProp","onInputChange","onInputChangeProp","onFocus","options","value","getIsOptionEqualToValue","testId","translate","controlledStateRef","controlledValue","uncontrolledValue","defaultValueProp","undefined","valueProps","controlState","current","inputValueProp","CONTROLLED","renderInput","InputLabelProps","InputProps","params","fieldType","hasVisibleLabel","htmlFor","renderFieldComponent","errorMessageElementId","labelElementId","_InputBase","inputProps","required","event","reason","details","_Autocomplete","disableCloseOnSelect","disabled","freeSolo","filterSelectedOptions","loading","multiple","readOnly","isOptionEqualToValue","MemoizedAutocomplete","displayName"],"sources":["../../src/labs/VirtualizedAutocomplete.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2023-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  Autocomplete as MuiAutocomplete,\n  AutocompleteProps as MuiAutocompleteProps,\n  InputBase,\n  UseAutocompleteProps,\n  AutocompleteValue,\n  AutocompleteRenderInputParams,\n} from \"@mui/material\";\nimport { memo, useCallback, useMemo, useRef } from \"react\";\n\nimport { Field } from \"../Field\";\nimport { FieldComponentProps } from \"../FieldComponentProps\";\nimport type { HtmlProps } from \"../HtmlProps\";\nimport {\n  ComponentControlledState,\n  getControlState,\n  useInputValues,\n} from \"../inputUtils\";\n\nexport type AutocompleteProps<\n  OptionType,\n  HasMultipleChoices extends boolean | undefined,\n  IsCustomValueAllowed extends boolean | undefined,\n> = {\n  /**\n   * The default value. Use when the component is not controlled.\n   * @default props.multiple ? [] : null\n   */\n  defaultValue?: UseAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"defaultValue\"];\n  /**\n   * Enables multiple choice selection\n   */\n  hasMultipleChoices?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"multiple\"];\n  /**\n   * The value for the input\n   */\n  inputValue?: UseAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"inputValue\"];\n  /**\n   * Allows the input of custom values\n   */\n  isCustomValueAllowed?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"freeSolo\"];\n  /**\n   * Disables the Autocomplete input\n   */\n  isDisabled?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"disabled\"];\n  /**\n   * Displays a loading indicator\n   */\n  isLoading?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"loading\"];\n  /**\n   * Makes the Autocomplete input read-only\n   */\n  isReadOnly?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"readOnly\"];\n  /**\n   * The label text for the autocomplete input\n   */\n  label: string;\n  /**\n   * The component used to render the listbox.\n   */\n  ListboxComponent?: React.JSXElementConstructor<\n    React.HTMLAttributes<HTMLElement>\n  >;\n  /**\n   * Callback fired when the autocomplete loses focus.\n   */\n  onBlur?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"onBlur\"];\n  /**\n   * Callback fired when a selection is made.\n   */\n  onChange?: UseAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"onChange\"];\n  /**\n   * Callback fired when the textbox receives typed characters.\n   */\n  onInputChange?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"onInputChange\"];\n  /**\n   * Callback fired when the autocomplete gains focus.\n   */\n  onFocus?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"onFocus\"];\n  /**\n   * The options for the Autocomplete input\n   */\n  options: ReadonlyArray<OptionType>;\n  /**\n   * The value of the Autocomplete input\n   */\n  value?: UseAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"value\"];\n\n  /**\n   * Used to determine if the option represents the given value. Uses strict equality by default if none provided.\n   * Both arguments need to be handled, an option can only match with one value.\n   * option: the option to test\n   * value: the value to test against\n   *\n   * You will need to implement this function if your `option` items are objects.\n   */\n  getIsOptionEqualToValue?: (option: OptionType, value: OptionType) => boolean;\n} & Pick<\n  FieldComponentProps,\n  \"errorMessage\" | \"errorMessageList\" | \"hint\" | \"id\" | \"isOptional\" | \"name\"\n> &\n  Pick<HtmlProps, \"ariaDescribedBy\" | \"testId\" | \"translate\">;\n\nconst VirtualizedAutocomplete = <\n  OptionType,\n  HasMultipleChoices extends boolean | undefined,\n  IsCustomValueAllowed extends boolean | undefined,\n>({\n  ariaDescribedBy,\n  defaultValue,\n  errorMessage,\n  errorMessageList,\n  hasMultipleChoices,\n  id: idOverride,\n  inputValue,\n  isCustomValueAllowed,\n  isDisabled,\n  isLoading,\n  isOptional = false,\n  isReadOnly,\n  hint,\n  label,\n  ListboxComponent,\n  name: nameOverride,\n  onBlur,\n  onChange: onChangeProp,\n  onInputChange: onInputChangeProp,\n  onFocus,\n  options,\n  value,\n  getIsOptionEqualToValue,\n  testId,\n  translate,\n}: AutocompleteProps<OptionType, HasMultipleChoices, IsCustomValueAllowed>) => {\n  const controlledStateRef = useRef(\n    getControlState({\n      controlledValue: value,\n      uncontrolledValue: defaultValue,\n    }),\n  );\n  const defaultValueProp = useMemo<\n    | AutocompleteValue<\n        OptionType,\n        HasMultipleChoices,\n        undefined,\n        IsCustomValueAllowed\n      >\n    | undefined\n  >(() => {\n    if (hasMultipleChoices) {\n      return defaultValue === undefined\n        ? ([] as AutocompleteValue<\n            OptionType,\n            HasMultipleChoices,\n            undefined,\n            IsCustomValueAllowed\n          >)\n        : defaultValue;\n    }\n    return defaultValue ?? undefined;\n  }, [defaultValue, hasMultipleChoices]);\n\n  const valueProps = useInputValues({\n    defaultValue: defaultValueProp,\n    value: value,\n    controlState: controlledStateRef.current,\n  });\n\n  const inputValueProp = useMemo(() => {\n    if (controlledStateRef.current === ComponentControlledState.CONTROLLED) {\n      return { inputValue };\n    }\n    return undefined;\n  }, [inputValue]);\n\n  const renderInput = useCallback(\n    ({\n      InputLabelProps,\n      InputProps,\n      ...params\n    }: AutocompleteRenderInputParams) => (\n      <Field\n        ariaDescribedBy={ariaDescribedBy}\n        errorMessage={errorMessage}\n        errorMessageList={errorMessageList}\n        fieldType=\"single\"\n        hasVisibleLabel\n        //@ts-expect-error htmlFor is not available on the typed params for this callback\n        id={InputLabelProps.htmlFor}\n        hint={hint}\n        label={label}\n        isOptional={isOptional}\n        renderFieldComponent={({\n          ariaDescribedBy,\n          id,\n          errorMessageElementId,\n          labelElementId,\n        }) => (\n          <InputBase\n            {...params}\n            {...InputProps}\n            inputProps={{\n              ...params.inputProps,\n              \"aria-errormessage\": errorMessageElementId,\n              \"aria-labelledby\": labelElementId,\n              \"data-se\": testId,\n            }}\n            aria-describedby={ariaDescribedBy}\n            id={id}\n            name={nameOverride ?? id}\n            required={!isOptional}\n          />\n        )}\n      />\n    ),\n    [\n      ariaDescribedBy,\n      errorMessage,\n      errorMessageList,\n      hint,\n      isOptional,\n      label,\n      nameOverride,\n      testId,\n    ],\n  );\n  const onChange = useCallback<\n    NonNullable<\n      UseAutocompleteProps<\n        OptionType,\n        HasMultipleChoices,\n        undefined,\n        IsCustomValueAllowed\n      >[\"onChange\"]\n    >\n  >(\n    (event, value, reason, details) => {\n      onChangeProp?.(event, value, reason, details);\n    },\n    [onChangeProp],\n  );\n\n  const onInputChange = useCallback<\n    NonNullable<\n      UseAutocompleteProps<\n        OptionType,\n        HasMultipleChoices,\n        undefined,\n        IsCustomValueAllowed\n      >[\"onInputChange\"]\n    >\n  >(\n    (event, value, reason) => {\n      onInputChangeProp?.(event, value, reason);\n    },\n    [onInputChangeProp],\n  );\n\n  return (\n    <MuiAutocomplete\n      {...valueProps}\n      {...inputValueProp}\n      // AutoComplete is wrapped in a div within MUI which does not get the disabled attr. So this aria-disabled gets set in the div\n      aria-disabled={isDisabled}\n      disableCloseOnSelect={hasMultipleChoices}\n      disabled={isDisabled}\n      freeSolo={isCustomValueAllowed}\n      filterSelectedOptions={true}\n      id={idOverride}\n      ListboxComponent={ListboxComponent}\n      loading={isLoading}\n      multiple={hasMultipleChoices}\n      onBlur={onBlur}\n      onChange={onChange}\n      onInputChange={onInputChange}\n      onFocus={onFocus}\n      options={options}\n      readOnly={isReadOnly}\n      renderInput={renderInput}\n      isOptionEqualToValue={getIsOptionEqualToValue}\n      translate={translate}\n    />\n  );\n};\n\n// Need the `typeof Autocomplete` because generics don't get passed through\nconst MemoizedAutocomplete = memo(\n  VirtualizedAutocomplete,\n) as typeof VirtualizedAutocomplete;\n// @ts-expect-error displayName is expected to not be on `typeof Autocomplete`\nMemoizedAutocomplete.displayName = \"Autocomplete\";\n\nexport { MemoizedAutocomplete as VirtualizedAutocomplete };\n"],"mappings":"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"}