@okta/odyssey-contribution-tooling 1.52.1 → 1.53.0

package/dist/esm/Banner.js

@@ -0,0 +1,63 @@
+import _Alert from "@mui/material/Alert";
+import _AlertTitle from "@mui/material/AlertTitle";
+/*!
+ * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+import { memo } from "react";
+import { useTranslation } from "./i18n.generated/i18n.js";
+import { Link } from "./Link.js";
+import { ScreenReaderText } from "./ScreenReaderText.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const bannerRoleValues = ["status", "alert"];
+export const bannerSeverityValues = ["success", "info", "warning", "error"];
+const Banner = ({
+  linkRel,
+  linkTarget,
+  linkText,
+  linkUrl,
+  onClose,
+  onLinkClick,
+  role,
+  severity,
+  testId,
+  text,
+  translate
+}) => {
+  const {
+    t
+  } = useTranslation();
+  return _jsxs(_Alert, {
+    "data-se": testId,
+    onClose: onClose,
+    role: role,
+    severity: severity,
+    variant: "banner",
+    children: [_jsx(ScreenReaderText, {
+      translate: translate,
+      children: t(`severity.${severity}`)
+    }), _jsx(_AlertTitle, {
+      translate: translate,
+      children: text
+    }), linkText && _jsx(Link, {
+      href: linkUrl ?? "#",
+      onClick: onLinkClick,
+      rel: linkRel,
+      target: linkTarget,
+      translate: translate,
+      variant: "monochrome",
+      children: linkText
+    })]
+  });
+};
+const MemoizedBanner = memo(Banner);
+MemoizedBanner.displayName = "Banner";
+export { MemoizedBanner as Banner };
+//# sourceMappingURL=Banner.js.map

package/dist/esm/Banner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Banner.js","names":["memo","useTranslation","Link","ScreenReaderText","jsx","_jsx","jsxs","_jsxs","bannerRoleValues","bannerSeverityValues","Banner","linkRel","linkTarget","linkText","linkUrl","onClose","onLinkClick","role","severity","testId","text","translate","t","_Alert","variant","children","_AlertTitle","href","onClick","rel","target","MemoizedBanner","displayName"],"sources":["../../src/Banner.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 { Alert, AlertColor, AlertProps, AlertTitle } from \"@mui/material\";\nimport { memo } from \"react\";\n\nimport type { HtmlProps } from \"./HtmlProps.js\";\n\nimport { useTranslation } from \"./i18n.generated/i18n.js\";\nimport { Link, LinkProps } from \"./Link.js\";\nimport { ScreenReaderText } from \"./ScreenReaderText.js\";\n\nexport const bannerRoleValues = [\"status\", \"alert\"] as const;\nexport const bannerSeverityValues: AlertColor[] = [\n  \"success\",\n  \"info\",\n  \"warning\",\n  \"error\",\n];\n\nexport type BannerProps = {\n  /**\n   * The function that's fired when the user clicks the close button. If undefined,\n   * the close button will not be shown.\n   */\n  onClose?: AlertProps[\"onClose\"];\n  /**\n   * Sets the ARIA role of the alert\n   * (\"status\" for something that dynamically updates, \"alert\" for errors, null for something\n   * unchanging)\n   */\n  role?: (typeof bannerRoleValues)[number];\n  /**\n   * Determine the color and icon of the alert\n   */\n  severity: (typeof bannerSeverityValues)[number];\n  /**\n   * The text content of the alert\n   */\n  text: string;\n} & Pick<HtmlProps, \"testId\" | \"translate\"> &\n  // if linkText is provided, either linkUrl or onLinkClick must be provided\n  (| {\n        linkRel?: LinkProps[\"rel\"];\n        linkTarget?: LinkProps[\"target\"];\n        linkText: string;\n        linkUrl: LinkProps[\"href\"];\n        onLinkClick?: never;\n      }\n    | {\n        linkRel?: never;\n        linkTarget?: never;\n        linkText: string;\n        linkUrl?: never;\n        onLinkClick: LinkProps[\"onClick\"];\n      }\n    | {\n        linkRel?: never;\n        linkTarget?: never;\n        linkText?: never;\n        linkUrl?: never;\n        onLinkClick?: never;\n      }\n  );\n\nconst Banner = ({\n  linkRel,\n  linkTarget,\n  linkText,\n  linkUrl,\n  onClose,\n  onLinkClick,\n  role,\n  severity,\n  testId,\n  text,\n  translate,\n}: BannerProps) => {\n  const { t } = useTranslation();\n\n  return (\n    <Alert\n      data-se={testId}\n      onClose={onClose}\n      role={role}\n      severity={severity}\n      variant=\"banner\"\n    >\n      <ScreenReaderText translate={translate}>\n        {t(`severity.${severity}`)}\n      </ScreenReaderText>\n      <AlertTitle translate={translate}>{text}</AlertTitle>\n      {linkText && (\n        <Link\n          href={linkUrl ?? \"#\"}\n          onClick={onLinkClick}\n          rel={linkRel}\n          target={linkTarget}\n          translate={translate}\n          variant=\"monochrome\"\n        >\n          {linkText}\n        </Link>\n      )}\n    </Alert>\n  );\n};\n\nconst MemoizedBanner = memo(Banner);\nMemoizedBanner.displayName = \"Banner\";\n\nexport { MemoizedBanner as Banner };\n"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA,SAASA,IAAI,QAAQ,OAAO;AAI5B,SAASC,cAAc,QAAQ,0BAA0B;AACzD,SAASC,IAAI,QAAmB,WAAW;AAC3C,SAASC,gBAAgB,QAAQ,uBAAuB;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAEzD,OAAO,MAAMC,gBAAgB,GAAG,CAAC,QAAQ,EAAE,OAAO,CAAU;AAC5D,OAAO,MAAMC,oBAAkC,GAAG,CAChD,SAAS,EACT,MAAM,EACN,SAAS,EACT,OAAO,CACR;AA+CD,MAAMC,MAAM,GAAGA,CAAC;EACdC,OAAO;EACPC,UAAU;EACVC,QAAQ;EACRC,OAAO;EACPC,OAAO;EACPC,WAAW;EACXC,IAAI;EACJC,QAAQ;EACRC,MAAM;EACNC,IAAI;EACJC;AACW,CAAC,KAAK;EACjB,MAAM;IAAEC;EAAE,CAAC,GAAGrB,cAAc,CAAC,CAAC;EAE9B,OACEM,KAAA,CAAAgB,MAAA;IACE,WAASJ,MAAO;IAChBJ,OAAO,EAAEA,OAAQ;IACjBE,IAAI,EAAEA,IAAK;IACXC,QAAQ,EAAEA,QAAS;IACnBM,OAAO,EAAC,QAAQ;IAAAC,QAAA,GAEhBpB,IAAA,CAACF,gBAAgB;MAACkB,SAAS,EAAEA,SAAU;MAAAI,QAAA,EACpCH,CAAC,CAAC,YAAYJ,QAAQ,EAAE;IAAC,CACV,CAAC,EACnBb,IAAA,CAAAqB,WAAA;MAAYL,SAAS,EAAEA,SAAU;MAAAI,QAAA,EAAEL;IAAI,CAAa,CAAC,EACpDP,QAAQ,IACPR,IAAA,CAACH,IAAI;MACHyB,IAAI,EAAEb,OAAO,IAAI,GAAI;MACrBc,OAAO,EAAEZ,WAAY;MACrBa,GAAG,EAAElB,OAAQ;MACbmB,MAAM,EAAElB,UAAW;MACnBS,SAAS,EAAEA,SAAU;MACrBG,OAAO,EAAC,YAAY;MAAAC,QAAA,EAEnBZ;IAAQ,CACL,CACP;EAAA,CACI,CAAC;AAEZ,CAAC;AAED,MAAMkB,cAAc,GAAG/B,IAAI,CAACU,MAAM,CAAC;AACnCqB,cAAc,CAACC,WAAW,GAAG,QAAQ;AAErC,SAASD,cAAc,IAAIrB,MAAM","ignoreList":[]}

package/dist/esm/Box.js

@@ -0,0 +1,36 @@
+import _Box from "@mui/material/Box";
+/*!
+ * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+import { forwardRef, memo } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+const Box = forwardRef(({
+  children,
+  component,
+  id,
+  role,
+  sx,
+  testId,
+  translate
+}, ref) => _jsx(_Box, {
+  children: children,
+  component: component,
+  "data-se": testId,
+  id: id,
+  ref: ref,
+  role: role,
+  sx: sx,
+  translate: translate
+}));
+const MemoizedBox = memo(Box);
+MemoizedBox.displayName = "Box";
+export { MemoizedBox as Box };
+//# sourceMappingURL=Box.js.map

package/dist/esm/Box.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Box.js","names":["forwardRef","memo","jsx","_jsx","Box","children","component","id","role","sx","testId","translate","ref","_Box","MemoizedBox","displayName"],"sources":["../../src/Box.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 { Box as MuiBox, BoxProps as MuiBoxProps } from \"@mui/material\";\nimport { AriaRole, forwardRef, memo, ReactNode } from \"react\";\n\nimport type { HtmlProps } from \"./HtmlProps.js\";\n\nexport type BoxProps = {\n  children?: ReactNode;\n  component?: MuiBoxProps[\"component\"];\n  id?: MuiBoxProps[\"id\"];\n  role?: AriaRole;\n  sx?: MuiBoxProps[\"sx\"];\n} & Pick<HtmlProps, \"testId\" | \"translate\">;\n\nconst Box = forwardRef<HTMLElement, BoxProps>(\n  ({ children, component, id, role, sx, testId, translate }, ref) => (\n    <MuiBox\n      children={children}\n      component={component}\n      data-se={testId}\n      id={id}\n      ref={ref}\n      role={role}\n      sx={sx}\n      translate={translate}\n    />\n  ),\n);\n\nconst MemoizedBox = memo(Box);\nMemoizedBox.displayName = \"Box\";\n\nexport { MemoizedBox as Box };\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA,SAAmBA,UAAU,EAAEC,IAAI,QAAmB,OAAO;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAY9D,MAAMC,GAAG,GAAGJ,UAAU,CACpB,CAAC;EAAEK,QAAQ;EAAEC,SAAS;EAAEC,EAAE;EAAEC,IAAI;EAAEC,EAAE;EAAEC,MAAM;EAAEC;AAAU,CAAC,EAAEC,GAAG,KAC5DT,IAAA,CAAAU,IAAA;EACER,QAAQ,EAAEA,QAAS;EACnBC,SAAS,EAAEA,SAAU;EACrB,WAASI,MAAO;EAChBH,EAAE,EAAEA,EAAG;EACPK,GAAG,EAAEA,GAAI;EACTJ,IAAI,EAAEA,IAAK;EACXC,EAAE,EAAEA,EAAG;EACPE,SAAS,EAAEA;AAAU,CACtB,CAEL,CAAC;AAED,MAAMG,WAAW,GAAGb,IAAI,CAACG,GAAG,CAAC;AAC7BU,WAAW,CAACC,WAAW,GAAG,KAAK;AAE/B,SAASD,WAAW,IAAIV,GAAG","ignoreList":[]}

package/dist/esm/Breadcrumbs.js

@@ -0,0 +1,176 @@
+import _Breadcrumbs from "@mui/material/Breadcrumbs";
+import _Menu from "@mui/material/Menu";
+import _ButtonBase from "@mui/material/ButtonBase";
+import _MenuItem from "@mui/material/MenuItem";
+/*!
+ * Copyright (c) 2023-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 styled from "@emotion/styled";
+import { createContext, memo, useCallback, useContext, useMemo, useState } from "react";
+import { useTranslation } from "./i18n.generated/i18n.js";
+import { GroupIcon, HomeIcon, UserIcon } from "./icons.generated/index.js";
+import { Subordinate } from "./Typography.js";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+export const BreadcrumbContext = createContext({
+  breadcrumbType: "listItem"
+});
+const BreadcrumbContent = styled.span`
+  white-space: nowrap;
+  overflow: hidden;
+  max-width: 10rem;
+  text-overflow: ellipsis;
+`;
+export const Breadcrumb = ({
+  children,
+  href,
+  iconName,
+  onClick
+}) => {
+  const {
+    breadcrumbType
+  } = useContext(BreadcrumbContext);
+  const onClickHandler = useCallback(event => {
+    if (onClick) {
+      event.preventDefault();
+      event.stopPropagation();
+      onClick(event);
+    }
+  }, [onClick]);
+  const breadcrumbContent = _jsxs(_Fragment, {
+    children: [iconName === "group" ? _jsx(GroupIcon, {}) : iconName === "user" ? _jsx(UserIcon, {}) : null, _jsx(BreadcrumbContent, {
+      children: children
+    })]
+  });
+  if (!href) {
+    return _jsx(Subordinate, {
+      color: "textPrimary",
+      children: breadcrumbContent
+    });
+  }
+  if (breadcrumbType === "menuItem") {
+    return _jsx(_MenuItem, {
+      component: "a",
+      href: href,
+      onClick: onClickHandler,
+      children: breadcrumbContent
+    });
+  }
+  if (breadcrumbType === "currentPage") {
+    return _jsx(Subordinate, {
+      ariaCurrent: "page",
+      color: "textPrimary",
+      children: breadcrumbContent
+    });
+  }
+  return _jsx(_ButtonBase, {
+    href: href,
+    onClick: onClickHandler,
+    children: breadcrumbContent
+  });
+};
+const breadcrumbProviderValue = {
+  currentPage: {
+    breadcrumbType: "currentPage"
+  },
+  listItem: {
+    breadcrumbType: "listItem"
+  },
+  menuItem: {
+    breadcrumbType: "menuItem"
+  }
+};
+const defaultTruncationValue = 5;
+const BreadcrumbList = ({
+  children,
+  homeHref,
+  maxVisibleItems: maxVisibleItemsProp = defaultTruncationValue,
+  testId,
+  translate
+}) => {
+  const {
+    t
+  } = useTranslation();
+  const [anchorEl, setAnchorEl] = useState(null);
+  const maxVisibleItems = useMemo(() => Math.min(Math.max(maxVisibleItemsProp, 0), children.length), [maxVisibleItemsProp, children]);
+  const breadcrumbSections = useMemo(() => {
+    if (children.length <= maxVisibleItems) {
+      return {
+        beforeMenu: [],
+        insideMenu: [],
+        remainingBreadcrumbs: children
+      };
+    } else {
+      const menuStart = Math.floor(maxVisibleItems / 2);
+      const menuLength = children.length - maxVisibleItems;
+      return {
+        beforeMenu: children.slice(0, menuStart),
+        insideMenu: children.slice(menuStart, menuStart + menuLength),
+        remainingBreadcrumbs: children.slice(menuStart + menuLength)
+      };
+    }
+  }, [children, maxVisibleItems]);
+  const onMenuButtonClick = useCallback(event => setAnchorEl(event.currentTarget), []);
+  const onCloseMenu = useCallback(() => {
+    setAnchorEl(null);
+  }, []);
+  return _jsxs(_Breadcrumbs, {
+    "aria-label": t("breadcrumbs.label.text"),
+    "data-se": testId,
+    maxItems: children.length + 1,
+    translate: translate,
+    children: [homeHref && _jsx(_ButtonBase, {
+      "aria-label": t("breadcrumbs.home.text"),
+      href: homeHref,
+      children: _jsx(HomeIcon, {})
+    }), breadcrumbSections.beforeMenu.map((breadcrumb, index) => _jsx(BreadcrumbContext.Provider, {
+      value: breadcrumbProviderValue.listItem,
+      children: breadcrumb
+    }, index)), breadcrumbSections.insideMenu.length > 0 && _jsxs(_Fragment, {
+      children: [_jsx(_ButtonBase, {
+        onClick: onMenuButtonClick,
+        children: "..."
+      }), _jsx(_Menu, {
+        anchorEl: anchorEl,
+        anchorOrigin: {
+          horizontal: "left",
+          vertical: "bottom"
+        },
+        MenuListProps: {
+          sx: {
+            minWidth: 180
+          }
+        },
+        onClose: onCloseMenu,
+        open: Boolean(anchorEl),
+        children: _jsx(BreadcrumbContext.Provider, {
+          value: breadcrumbProviderValue.menuItem,
+          children: breadcrumbSections.insideMenu
+        })
+      })]
+    }), breadcrumbSections.remainingBreadcrumbs.map((breadcrumb, index) => {
+      if (index === breadcrumbSections.remainingBreadcrumbs.length - 1) {
+        return _jsx(BreadcrumbContext.Provider, {
+          value: breadcrumbProviderValue.currentPage,
+          children: breadcrumb
+        }, index);
+      }
+      return _jsx(BreadcrumbContext.Provider, {
+        value: breadcrumbProviderValue.listItem,
+        children: breadcrumb
+      }, index);
+    })]
+  });
+};
+const MemoizedBreadcrumbList = memo(BreadcrumbList);
+MemoizedBreadcrumbList.displayName = "BreadcrumbList";
+export { MemoizedBreadcrumbList as BreadcrumbList };
+//# sourceMappingURL=Breadcrumbs.js.map

package/dist/esm/Breadcrumbs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumbs.js","names":["styled","createContext","memo","useCallback","useContext","useMemo","useState","useTranslation","GroupIcon","HomeIcon","UserIcon","Subordinate","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","BreadcrumbContext","breadcrumbType","BreadcrumbContent","span","Breadcrumb","children","href","iconName","onClick","onClickHandler","event","preventDefault","stopPropagation","breadcrumbContent","color","_MenuItem","component","ariaCurrent","_ButtonBase","breadcrumbProviderValue","currentPage","listItem","menuItem","defaultTruncationValue","BreadcrumbList","homeHref","maxVisibleItems","maxVisibleItemsProp","testId","translate","t","anchorEl","setAnchorEl","Math","min","max","length","breadcrumbSections","beforeMenu","insideMenu","remainingBreadcrumbs","menuStart","floor","menuLength","slice","onMenuButtonClick","currentTarget","onCloseMenu","_Breadcrumbs","maxItems","map","breadcrumb","index","Provider","value","_Menu","anchorOrigin","horizontal","vertical","MenuListProps","sx","minWidth","onClose","open","Boolean","MemoizedBreadcrumbList","displayName"],"sources":["../../src/Breadcrumbs.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 styled from \"@emotion/styled\";\nimport {\n  ButtonBase,\n  Menu,\n  MenuItem,\n  Breadcrumbs as MuiBreadcrumbs,\n} from \"@mui/material\";\nimport {\n  createContext,\n  memo,\n  MouseEventHandler,\n  ReactElement,\n  useCallback,\n  useContext,\n  useMemo,\n  useState,\n} from \"react\";\n\nimport { HtmlProps } from \"./HtmlProps.js\";\nimport { useTranslation } from \"./i18n.generated/i18n.js\";\nimport { GroupIcon, HomeIcon, UserIcon } from \"./icons.generated/index.js\";\nimport { Subordinate } from \"./Typography.js\";\n\nexport type BreadcrumbType = \"listItem\" | \"menuItem\" | \"currentPage\";\n\nexport type BreadcrumbProps = {\n  children?: string;\n  href?: string;\n  iconName?: \"user\" | \"group\";\n  onClick?: MouseEventHandler;\n};\n\nexport type BreadcrumbsProps = {\n  children: ReactElement<typeof Breadcrumb>[];\n  homeHref?: string;\n  maxVisibleItems?: number;\n} & Pick<HtmlProps, \"testId\" | \"translate\">;\n\nexport type BreadcrumbContextType = {\n  breadcrumbType: BreadcrumbType;\n};\n\nexport const BreadcrumbContext = createContext<BreadcrumbContextType>({\n  breadcrumbType: \"listItem\",\n});\n\nconst BreadcrumbContent = styled.span`\n  white-space: nowrap;\n  overflow: hidden;\n  max-width: 10rem;\n  text-overflow: ellipsis;\n`;\n\nexport const Breadcrumb = ({\n  children,\n  href,\n  iconName,\n  onClick,\n}: BreadcrumbProps) => {\n  const { breadcrumbType } = useContext(BreadcrumbContext);\n\n  const onClickHandler = useCallback<MouseEventHandler<HTMLAnchorElement>>(\n    (event) => {\n      if (onClick) {\n        event.preventDefault();\n        event.stopPropagation();\n        onClick(event);\n      }\n    },\n    [onClick],\n  );\n\n  const breadcrumbContent = (\n    <>\n      {iconName === \"group\" ? (\n        <GroupIcon />\n      ) : iconName === \"user\" ? (\n        <UserIcon />\n      ) : null}\n      <BreadcrumbContent>{children}</BreadcrumbContent>\n    </>\n  );\n\n  if (!href) {\n    return <Subordinate color=\"textPrimary\">{breadcrumbContent}</Subordinate>;\n  }\n\n  if (breadcrumbType === \"menuItem\") {\n    return (\n      <MenuItem component=\"a\" href={href} onClick={onClickHandler}>\n        {breadcrumbContent}\n      </MenuItem>\n    );\n  }\n\n  if (breadcrumbType === \"currentPage\") {\n    return (\n      <Subordinate ariaCurrent=\"page\" color=\"textPrimary\">\n        {breadcrumbContent}\n      </Subordinate>\n    );\n  }\n\n  // breadcrumbType === \"listItem\" is the default\n  // Provided here without a conditional to get TS to be quiet\n  // about potential undefined returns\n  return (\n    <ButtonBase href={href} onClick={onClickHandler}>\n      {breadcrumbContent}\n    </ButtonBase>\n  );\n};\n\nconst breadcrumbProviderValue: Record<\n  BreadcrumbType,\n  { breadcrumbType: BreadcrumbType }\n> = {\n  currentPage: {\n    breadcrumbType: \"currentPage\",\n  },\n  listItem: {\n    breadcrumbType: \"listItem\",\n  },\n  menuItem: {\n    breadcrumbType: \"menuItem\",\n  },\n};\n\nconst defaultTruncationValue = 5;\n\nconst BreadcrumbList = ({\n  children,\n  homeHref,\n  maxVisibleItems: maxVisibleItemsProp = defaultTruncationValue,\n  testId,\n  translate,\n}: BreadcrumbsProps) => {\n  const { t } = useTranslation();\n\n  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);\n\n  const maxVisibleItems = useMemo(\n    () => Math.min(Math.max(maxVisibleItemsProp, 0), children.length),\n    [maxVisibleItemsProp, children],\n  );\n\n  const breadcrumbSections = useMemo(() => {\n    if (children.length <= maxVisibleItems) {\n      return {\n        beforeMenu: [],\n        insideMenu: [],\n        remainingBreadcrumbs: children,\n      };\n    } else {\n      const menuStart = Math.floor(maxVisibleItems / 2);\n      const menuLength = children.length - maxVisibleItems;\n\n      return {\n        beforeMenu: children.slice(0, menuStart),\n        insideMenu: children.slice(menuStart, menuStart + menuLength),\n        remainingBreadcrumbs: children.slice(menuStart + menuLength),\n      };\n    }\n  }, [children, maxVisibleItems]);\n\n  const onMenuButtonClick = useCallback<MouseEventHandler<HTMLButtonElement>>(\n    (event) => setAnchorEl(event.currentTarget),\n    [],\n  );\n  const onCloseMenu = useCallback(() => {\n    setAnchorEl(null);\n  }, []);\n\n  return (\n    <MuiBreadcrumbs\n      aria-label={t(\"breadcrumbs.label.text\")}\n      data-se={testId}\n      maxItems={children.length + 1}\n      translate={translate}\n    >\n      {homeHref && (\n        <ButtonBase aria-label={t(\"breadcrumbs.home.text\")} href={homeHref}>\n          <HomeIcon />\n        </ButtonBase>\n      )}\n\n      {breadcrumbSections.beforeMenu.map((breadcrumb, index) => (\n        <BreadcrumbContext.Provider\n          key={index}\n          value={breadcrumbProviderValue.listItem}\n        >\n          {breadcrumb}\n        </BreadcrumbContext.Provider>\n      ))}\n\n      {breadcrumbSections.insideMenu.length > 0 && (\n        <>\n          <ButtonBase onClick={onMenuButtonClick}>...</ButtonBase>\n          <Menu\n            anchorEl={anchorEl}\n            anchorOrigin={{ horizontal: \"left\", vertical: \"bottom\" }}\n            MenuListProps={{\n              sx: {\n                minWidth: 180,\n              },\n            }}\n            onClose={onCloseMenu}\n            open={Boolean(anchorEl)}\n          >\n            <BreadcrumbContext.Provider\n              value={breadcrumbProviderValue.menuItem}\n            >\n              {breadcrumbSections.insideMenu}\n            </BreadcrumbContext.Provider>\n          </Menu>\n        </>\n      )}\n\n      {breadcrumbSections.remainingBreadcrumbs.map((breadcrumb, index) => {\n        if (index === breadcrumbSections.remainingBreadcrumbs.length - 1) {\n          return (\n            <BreadcrumbContext.Provider\n              key={index}\n              value={breadcrumbProviderValue.currentPage}\n            >\n              {breadcrumb}\n            </BreadcrumbContext.Provider>\n          );\n        }\n        return (\n          <BreadcrumbContext.Provider\n            key={index}\n            value={breadcrumbProviderValue.listItem}\n          >\n            {breadcrumb}\n          </BreadcrumbContext.Provider>\n        );\n      })}\n    </MuiBreadcrumbs>\n  );\n};\n\nconst MemoizedBreadcrumbList = memo(BreadcrumbList);\nMemoizedBreadcrumbList.displayName = \"BreadcrumbList\";\n\nexport { MemoizedBreadcrumbList as BreadcrumbList };\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/Buttons/BaseButton.js

@@ -0,0 +1,102 @@
+import _Button from "@mui/material/Button";
+/*!
+ * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+import { memo, useCallback, useImperativeHandle, useMemo, useRef } from "react";
+import { MuiPropsContext, useMuiProps } from "../MuiPropsContext.js";
+import { Tooltip } from "../Tooltip.js";
+import { useButton } from "./ButtonContext.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const buttonSizeValues = ["small", "medium", "large"];
+export const buttonTypeValues = ["button", "submit", "reset"];
+export const buttonVariantValues = ["primary", "secondary", "danger", "dangerSecondary", "floating", "floatingAction"];
+const BaseButton = ({
+  ariaControls,
+  ariaDescribedBy,
+  ariaExpanded,
+  ariaHasPopup,
+  ariaLabel,
+  ariaLabelledBy,
+  buttonRef,
+  children,
+  endIcon,
+  href,
+  id,
+  isDisabled,
+  isFullWidth: isFullWidthProp,
+  label = "",
+  onClick,
+  size = "medium",
+  startIcon,
+  tabIndex,
+  testId,
+  tooltipText,
+  translate,
+  type = "button",
+  variant: variantProp
+}) => {
+  const muiProps = useMuiProps();
+  const variant = variantProp === "tertiary" ? "secondary" : variantProp;
+  const localButtonRef = useRef(null);
+  const buttonContext = useButton();
+  const isFullWidth = useMemo(() => buttonContext.isFullWidth ? buttonContext.isFullWidth : isFullWidthProp, [buttonContext, isFullWidthProp]);
+  useImperativeHandle(buttonRef, () => ({
+    focus: () => {
+      localButtonRef.current?.focus();
+    }
+  }), []);
+  const renderButton = useCallback(muiProps => {
+    return _jsx(_Button, {
+      ...muiProps,
+      "aria-controls": ariaControls,
+      "aria-describedby": ariaDescribedBy,
+      "aria-expanded": ariaExpanded,
+      "aria-haspopup": ariaHasPopup,
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy,
+      "data-se": testId,
+      disabled: isDisabled,
+      endIcon: endIcon,
+      fullWidth: isFullWidth,
+      href: href,
+      id: id,
+      onClick: onClick,
+      ref: element => {
+        if (element) {
+          localButtonRef.current = element;
+          muiProps?.ref?.(element);
+        }
+      },
+      size: size,
+      startIcon: startIcon,
+      tabIndex: tabIndex,
+      translate: translate,
+      type: type,
+      variant: variant,
+      children: children ?? label
+    });
+  }, [ariaControls, ariaDescribedBy, ariaExpanded, ariaHasPopup, ariaLabel, ariaLabelledBy, endIcon, href, id, isDisabled, isFullWidth, label, children, onClick, size, startIcon, tabIndex, testId, translate, type, variant]);
+  if (tooltipText) {
+    return _jsx(Tooltip, {
+      ariaType: "description",
+      placement: "top",
+      text: tooltipText,
+      children: _jsx(MuiPropsContext.Consumer, {
+        children: renderButton
+      })
+    });
+  }
+  return renderButton(muiProps);
+};
+const MemoizedBaseButton = memo(BaseButton);
+MemoizedBaseButton.displayName = "BaseButton";
+export { MemoizedBaseButton as BaseButton };
+//# sourceMappingURL=BaseButton.js.map

package/dist/esm/Buttons/BaseButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseButton.js","names":["memo","useCallback","useImperativeHandle","useMemo","useRef","MuiPropsContext","useMuiProps","Tooltip","useButton","jsx","_jsx","buttonSizeValues","buttonTypeValues","buttonVariantValues","BaseButton","ariaControls","ariaDescribedBy","ariaExpanded","ariaHasPopup","ariaLabel","ariaLabelledBy","buttonRef","children","endIcon","href","id","isDisabled","isFullWidth","isFullWidthProp","label","onClick","size","startIcon","tabIndex","testId","tooltipText","translate","type","variant","variantProp","muiProps","localButtonRef","buttonContext","focus","current","renderButton","_Button","disabled","fullWidth","ref","element","ariaType","placement","text","Consumer","MemoizedBaseButton","displayName"],"sources":["../../../src/Buttons/BaseButton.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 type { ButtonProps as MuiButtonProps } from \"@mui/material\";\n\nimport { Button as MuiButton } from \"@mui/material\";\nimport {\n  HTMLAttributes,\n  memo,\n  ReactElement,\n  ReactNode,\n  RefObject,\n  useCallback,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n} from \"react\";\n\nimport type { HtmlProps } from \"../HtmlProps.js\";\n\nimport { FocusHandle } from \"../inputUtils.js\";\nimport {\n  MuiPropsContext,\n  MuiPropsContextType,\n  useMuiProps,\n} from \"../MuiPropsContext.js\";\nimport { Tooltip } from \"../Tooltip.js\";\nimport { useButton } from \"./ButtonContext.js\";\n\nexport const buttonSizeValues = [\"small\", \"medium\", \"large\"] as const;\nexport const buttonTypeValues = [\"button\", \"submit\", \"reset\"] as const;\nexport const buttonVariantValues = [\n  \"primary\",\n  \"secondary\",\n  \"danger\",\n  \"dangerSecondary\",\n  \"floating\",\n  \"floatingAction\",\n] as const;\n\nexport type BaseButtonProps = {\n  /**\n   * The ref forwarded to the Button\n   */\n  buttonRef?: RefObject<FocusHandle>;\n  /**\n   * The contents of the button. Only available internal to Odyssey here in BaseButton. If set, label is ignored.\n   */\n  children?: ReactNode;\n  /**\n   * The icon element to display at the end of the Button\n   */\n  endIcon?: ReactElement;\n  /**\n   * Optional href to render the button as a link\n   */\n  href?: string;\n  /**\n   * The ID of the Button\n   */\n  id?: string;\n  /**\n   * Determines whether the Button is disabled\n   */\n  isDisabled?: boolean;\n  /**\n   * Determines whether the Button should take up the full available width\n   */\n  isFullWidth?: boolean;\n  /**\n   * The text content of the Button\n   */\n  label?: string;\n  /**\n   * The click event handler for the Button\n   */\n  onClick?: MuiButtonProps[\"onClick\"];\n  /**\n   * The size of the button\n   */\n  size?: (typeof buttonSizeValues)[number];\n  /**\n   * The icon element to display at the start of the Button\n   */\n  startIcon?: ReactElement;\n  tabIndex?: HTMLAttributes<HTMLElement>[\"tabIndex\"];\n  /**\n   * The tooltip text for the Button if it's icon-only\n   */\n  tooltipText?: string;\n  /**\n   * The type of the HTML button element\n   */\n  type?: (typeof buttonTypeValues)[number];\n  /**\n   * The variant of the Button\n   */\n  variant: (typeof buttonVariantValues)[number] | \"tertiary\";\n};\n\n// These are split and exported separately from the above because wrappers of this (e.g. Button) will\n// want to omit children, which they cannot do from the combined union type. Instead, they should\n// omit from BaseButtonProps, then union with the AdditionalBaseButtonProps (as seen in Button)\nexport type AdditionalBaseButtonProps = Pick<\n  HtmlProps,\n  | \"ariaControls\"\n  | \"ariaDescribedBy\"\n  | \"ariaExpanded\"\n  | \"ariaHasPopup\"\n  | \"ariaLabel\"\n  | \"ariaLabelledBy\"\n  | \"tabIndex\"\n  | \"testId\"\n  | \"translate\"\n>;\n\nconst BaseButton = ({\n  ariaControls,\n  ariaDescribedBy,\n  ariaExpanded,\n  ariaHasPopup,\n  ariaLabel,\n  ariaLabelledBy,\n  buttonRef,\n  children,\n  endIcon,\n  href,\n  id,\n  isDisabled,\n  isFullWidth: isFullWidthProp,\n  label = \"\",\n  onClick,\n  size = \"medium\",\n  startIcon,\n  tabIndex,\n  testId,\n  tooltipText,\n  translate,\n  type = \"button\",\n  variant: variantProp,\n}: BaseButtonProps & AdditionalBaseButtonProps) => {\n  const muiProps = useMuiProps();\n\n  // We're deprecating the \"tertiary\" variant, so map it to\n  // \"secondary\" in lieu of making a breaking change\n  const variant = variantProp === \"tertiary\" ? \"secondary\" : variantProp;\n  const localButtonRef = useRef<HTMLButtonElement | HTMLAnchorElement>(null);\n  const buttonContext = useButton();\n  const isFullWidth = useMemo(\n    () =>\n      buttonContext.isFullWidth ? buttonContext.isFullWidth : isFullWidthProp,\n    [buttonContext, isFullWidthProp],\n  );\n\n  useImperativeHandle(\n    buttonRef,\n    () => ({\n      focus: () => {\n        localButtonRef.current?.focus();\n      },\n    }),\n    [],\n  );\n\n  const renderButton = useCallback(\n    (muiProps: MuiPropsContextType) => {\n      return (\n        <MuiButton\n          {...muiProps}\n          aria-controls={ariaControls}\n          aria-describedby={ariaDescribedBy}\n          aria-expanded={ariaExpanded}\n          aria-haspopup={ariaHasPopup}\n          aria-label={ariaLabel}\n          aria-labelledby={ariaLabelledBy}\n          data-se={testId}\n          disabled={isDisabled}\n          endIcon={endIcon}\n          fullWidth={isFullWidth}\n          href={href}\n          id={id}\n          onClick={onClick}\n          ref={(element) => {\n            if (element) {\n              (\n                localButtonRef as React.MutableRefObject<\n                  HTMLButtonElement | HTMLAnchorElement\n                >\n              ).current = element;\n              //@ts-expect-error ref is not an optional prop on the props context type\n              muiProps?.ref?.(element);\n            }\n          }}\n          size={size}\n          startIcon={startIcon}\n          tabIndex={tabIndex}\n          translate={translate}\n          type={type}\n          variant={variant}\n        >\n          {children ?? label}\n        </MuiButton>\n      );\n    },\n    [\n      ariaControls,\n      ariaDescribedBy,\n      ariaExpanded,\n      ariaHasPopup,\n      ariaLabel,\n      ariaLabelledBy,\n      endIcon,\n      href,\n      id,\n      isDisabled,\n      isFullWidth,\n      label,\n      children,\n      onClick,\n      size,\n      startIcon,\n      tabIndex,\n      testId,\n      translate,\n      type,\n      variant,\n    ],\n  );\n\n  if (tooltipText) {\n    return (\n      <Tooltip ariaType=\"description\" placement=\"top\" text={tooltipText}>\n        <MuiPropsContext.Consumer>{renderButton}</MuiPropsContext.Consumer>\n      </Tooltip>\n    );\n  }\n\n  return renderButton(muiProps);\n};\n\nconst MemoizedBaseButton = memo(BaseButton);\nMemoizedBaseButton.displayName = \"BaseButton\";\n\nexport { MemoizedBaseButton as BaseButton };\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/Buttons/BaseMenuButton.js

@@ -0,0 +1,170 @@
+import _Popover from "@mui/material/Popover";
+import _Menu from "@mui/material/Menu";
+/*!
+ * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import styled from "@emotion/styled";
+import { memo, useCallback, useMemo, useState } from "react";
+import { Box } from "../Box.js";
+import { ChevronDownIcon, MoreIcon } from "../icons.generated/index.js";
+import { useOdysseyDesignTokens } from "../OdysseyDesignTokensContext.js";
+import { useUniqueId } from "../useUniqueId.js";
+import { BaseButton } from "./BaseButton.js";
+import { MenuContext } from "./MenuContext.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const menuAlignmentValues = ["left", "right"];
+export const verticalDividerAlignmentValues = ["start", "end"];
+const StyledMenuButtonContainer = styled("div", {
+  shouldForwardProp: prop => prop !== "hasVerticalDivider" && prop !== "odysseyDesignTokens" && prop !== "verticalDividerAlignment"
+})(({
+  hasVerticalDivider,
+  odysseyDesignTokens,
+  verticalDividerAlignment
+}) => ({
+  position: "relative",
+  ...(hasVerticalDivider && {
+    display: "inline-block",
+    "&:before": {
+      position: "absolute",
+      top: "50%",
+      left: 0,
+      width: 1,
+      height: odysseyDesignTokens.Spacing6,
+      backgroundColor: odysseyDesignTokens.HueNeutral300,
+      content: '""',
+      transform: "translate3d(0, -50%, 0)",
+      transition: `opacity 200ms`,
+      ...(verticalDividerAlignment === "end" && {
+        left: "unset",
+        right: 0
+      })
+    },
+    ":has(> button:hover)": {
+      "&:before": {
+        opacity: 0
+      }
+    },
+    ":dir(rtl)": {
+      "&:before": {
+        left: "unset",
+        right: 0,
+        ...(verticalDividerAlignment === "end" && {
+          right: "unset",
+          left: 0
+        })
+      }
+    }
+  })
+}));
+const BaseMenuButton = ({
+  ariaLabel,
+  ariaLabelledBy,
+  ariaDescribedBy,
+  buttonChildren,
+  buttonLabel = "",
+  buttonVariant = "secondary",
+  children,
+  popoverContent,
+  endIcon: endIconProp,
+  hasVerticalDivider = false,
+  id: idOverride,
+  isDisabled,
+  isOverflow,
+  menuAlignment = "left",
+  omitEndIcon = false,
+  shouldCloseOnSelect = true,
+  size,
+  testId,
+  tooltipText,
+  translate,
+  verticalDividerAlignment = "start"
+}) => {
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+  const [anchorEl, setAnchorEl] = useState(null);
+  const isOpen = Boolean(anchorEl);
+  const closeMenu = useCallback(() => {
+    setAnchorEl(null);
+  }, []);
+  const openMenu = useCallback(event => {
+    setAnchorEl(event.currentTarget);
+  }, []);
+  const uniqueId = useUniqueId(idOverride);
+  const menuListProps = useMemo(() => ({
+    "aria-labelledby": `${uniqueId}-button`
+  }), [uniqueId]);
+  const providerValue = useMemo(() => ({
+    closeMenu,
+    openMenu,
+    shouldCloseOnSelect
+  }), [closeMenu, openMenu, shouldCloseOnSelect]);
+  const endIcon = omitEndIcon ? undefined : endIconProp ? endIconProp : isOverflow ? _jsx(MoreIcon, {}) : _jsx(ChevronDownIcon, {});
+  const anchorOrigin = useMemo(() => ({
+    horizontal: menuAlignment,
+    vertical: "bottom"
+  }), [menuAlignment]);
+  const transformOrigin = useMemo(() => ({
+    horizontal: menuAlignment,
+    vertical: "top"
+  }), [menuAlignment]);
+  return _jsxs(StyledMenuButtonContainer, {
+    hasVerticalDivider: hasVerticalDivider,
+    odysseyDesignTokens: odysseyDesignTokens,
+    verticalDividerAlignment: verticalDividerAlignment,
+    children: [_jsx(BaseButton, {
+      ariaControls: isOpen ? `${uniqueId}-menu` : undefined,
+      ariaDescribedBy: ariaDescribedBy,
+      ariaExpanded: isOpen ? "true" : undefined,
+      ariaHasPopup: "true",
+      ariaLabel: ariaLabel,
+      ariaLabelledBy: ariaLabelledBy,
+      children: buttonChildren,
+      endIcon: endIcon,
+      id: `${uniqueId}-button`,
+      isDisabled: isDisabled,
+      label: buttonLabel,
+      onClick: openMenu,
+      size: size,
+      testId: testId,
+      tooltipText: tooltipText,
+      translate: translate,
+      variant: buttonVariant
+    }), children && _jsx(_Menu, {
+      anchorEl: anchorEl,
+      anchorOrigin: anchorOrigin,
+      id: `${uniqueId}-menu`,
+      MenuListProps: menuListProps,
+      onClose: closeMenu,
+      open: isOpen,
+      transformOrigin: transformOrigin,
+      children: _jsx(MenuContext.Provider, {
+        value: providerValue,
+        children: children
+      })
+    }), popoverContent && _jsx(_Popover, {
+      anchorEl: anchorEl,
+      anchorOrigin: anchorOrigin,
+      onClose: closeMenu,
+      open: isOpen,
+      transformOrigin: transformOrigin,
+      children: _jsx(Box, {
+        sx: {
+          padding: odysseyDesignTokens.Spacing4
+        },
+        children: popoverContent
+      })
+    })]
+  });
+};
+const MemoizedBaseMenuButton = memo(BaseMenuButton);
+MemoizedBaseMenuButton.displayName = "BaseMenuButton";
+export { MemoizedBaseMenuButton as BaseMenuButton };
+//# sourceMappingURL=BaseMenuButton.js.map