@okta/odyssey-react-mui 1.7.0 → 1.7.1

package/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.7.1](https://github.com/okta/odyssey/compare/v1.7.0...v1.7.1) (2023-12-01)
+
+**Note:** Version bump only for package @okta/odyssey-react-mui
+
 ## [1.7.0](https://github.com/okta/odyssey/compare/v1.6.21...v1.7.0) (2023-12-01)
 
 **Note:** Version bump only for package @okta/odyssey-react-mui

package/dist/Badge.js

@@ -0,0 +1,73 @@
+/*!
+ * 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 { memo, useMemo } from "react";
+import { useOdysseyDesignTokens } from "./OdysseyDesignTokensContext.js";
+import { Box } from "./Box.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const badgeTypeValues = ["default", "attention", "danger"];
+const badgeTypeColors = odysseyTokens => ({
+  default: {
+    background: odysseyTokens.HueNeutral200,
+    font: odysseyTokens.TypographyColorBody
+  },
+  attention: {
+    background: odysseyTokens.PalettePrimaryMain,
+    font: odysseyTokens.TypographyColorInverse
+  },
+  danger: {
+    background: odysseyTokens.PaletteDangerMain,
+    font: odysseyTokens.TypographyColorInverse
+  }
+});
+const Badge = _ref => {
+  let {
+    badgeContent,
+    badgeContentMax = 999,
+    type = "default"
+  } = _ref;
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+  const greaterThanZeroContentMax = badgeContentMax > 0 ? badgeContentMax : 1;
+  const threeDigitLimitedMax = greaterThanZeroContentMax > 999 ? 999 : greaterThanZeroContentMax;
+  const isOverContentMax = Boolean(badgeContent && badgeContent > threeDigitLimitedMax);
+  const overContentMaxMessage = `${greaterThanZeroContentMax}+`;
+  const formattedContent = isOverContentMax ? overContentMaxMessage : badgeContent;
+  const contentIsLongerThanOneChar = formattedContent?.toString()?.length > 1;
+  const badgeStyles = useMemo(() => ({
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    minWidth: `calc(${odysseyDesignTokens.Spacing4} + ${odysseyDesignTokens.Spacing1})`,
+    height: `calc(${odysseyDesignTokens.Spacing4} + ${odysseyDesignTokens.Spacing1})`,
+    minHeight: `calc(${odysseyDesignTokens.Spacing4} + ${odysseyDesignTokens.Spacing1})`,
+    padding: `0 calc(${odysseyDesignTokens.Spacing1} * 1.5)`,
+    backgroundColor: badgeTypeColors(odysseyDesignTokens)[type].background,
+    color: badgeTypeColors(odysseyDesignTokens)[type].font,
+    borderRadius: contentIsLongerThanOneChar ? `${odysseyDesignTokens.BorderRadiusOuter}` : "50%",
+    fontSize: `${odysseyDesignTokens.TypographyScale0}`,
+    fontFamily: `${odysseyDesignTokens.TypographyFamilyMono}`,
+    fontWeight: `${odysseyDesignTokens.TypographyWeightBodyBold}`,
+    lineHeight: 1
+  }), [type, contentIsLongerThanOneChar, odysseyDesignTokens]);
+  const shouldHideBadge = badgeContent <= 0 || !badgeContent;
+  if (shouldHideBadge) {
+    return null;
+  }
+  return _jsx(Box, {
+    sx: badgeStyles,
+    children: formattedContent
+  });
+};
+const MemoizedBadge = memo(Badge);
+MemoizedBadge.displayName = "Badge";
+export { MemoizedBadge as Badge };
+//# sourceMappingURL=Badge.js.map

package/dist/Badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.js","names":["memo","useMemo","useOdysseyDesignTokens","Box","jsx","_jsx","badgeTypeValues","badgeTypeColors","odysseyTokens","default","background","HueNeutral200","font","TypographyColorBody","attention","PalettePrimaryMain","TypographyColorInverse","danger","PaletteDangerMain","Badge","_ref","badgeContent","badgeContentMax","type","odysseyDesignTokens","greaterThanZeroContentMax","threeDigitLimitedMax","isOverContentMax","Boolean","overContentMaxMessage","formattedContent","contentIsLongerThanOneChar","toString","length","badgeStyles","display","alignItems","justifyContent","minWidth","Spacing4","Spacing1","height","minHeight","padding","backgroundColor","color","borderRadius","BorderRadiusOuter","fontSize","TypographyScale0","fontFamily","TypographyFamilyMono","fontWeight","TypographyWeightBodyBold","lineHeight","shouldHideBadge","sx","children","MemoizedBadge","displayName"],"sources":["../src/Badge.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 { CSSProperties, memo, useMemo } from \"react\";\n\nimport {\n  useOdysseyDesignTokens,\n  DesignTokens,\n} from \"./OdysseyDesignTokensContext\";\nimport { Box } from \"./Box\";\nimport type { SeleniumProps } from \"./SeleniumProps\";\n\nexport const badgeTypeValues = [\"default\", \"attention\", \"danger\"] as const;\n\nexport type BadgeProps = {\n  badgeContent: number;\n  badgeContentMax?: number;\n  type?: (typeof badgeTypeValues)[number];\n} & SeleniumProps;\n\nconst badgeTypeColors = (odysseyTokens: DesignTokens) => ({\n  default: {\n    background: odysseyTokens.HueNeutral200,\n    font: odysseyTokens.TypographyColorBody,\n  },\n  attention: {\n    background: odysseyTokens.PalettePrimaryMain,\n    font: odysseyTokens.TypographyColorInverse,\n  },\n  danger: {\n    background: odysseyTokens.PaletteDangerMain,\n    font: odysseyTokens.TypographyColorInverse,\n  },\n});\n\nconst Badge = ({\n  badgeContent,\n  badgeContentMax = 999,\n  type = \"default\",\n}: BadgeProps) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  const greaterThanZeroContentMax = badgeContentMax > 0 ? badgeContentMax : 1;\n  const threeDigitLimitedMax =\n    greaterThanZeroContentMax > 999 ? 999 : greaterThanZeroContentMax;\n  const isOverContentMax = Boolean(\n    badgeContent && badgeContent > threeDigitLimitedMax\n  );\n  const overContentMaxMessage = `${greaterThanZeroContentMax}+`;\n  const formattedContent = isOverContentMax\n    ? overContentMaxMessage\n    : badgeContent;\n  const contentIsLongerThanOneChar = formattedContent?.toString()?.length > 1;\n\n  const badgeStyles = useMemo<CSSProperties>(\n    () => ({\n      display: \"inline-flex\",\n      alignItems: \"center\",\n      justifyContent: \"center\",\n      minWidth: `calc(${odysseyDesignTokens.Spacing4} + ${odysseyDesignTokens.Spacing1})`,\n      height: `calc(${odysseyDesignTokens.Spacing4} + ${odysseyDesignTokens.Spacing1})`,\n      minHeight: `calc(${odysseyDesignTokens.Spacing4} + ${odysseyDesignTokens.Spacing1})`,\n      // 6px horizontal padding per design requirements\n      padding: `0 calc(${odysseyDesignTokens.Spacing1} * 1.5)`,\n      backgroundColor: badgeTypeColors(odysseyDesignTokens)[type].background,\n      color: badgeTypeColors(odysseyDesignTokens)[type].font,\n      borderRadius: contentIsLongerThanOneChar\n        ? `${odysseyDesignTokens.BorderRadiusOuter}`\n        : \"50%\",\n      fontSize: `${odysseyDesignTokens.TypographyScale0}`,\n      fontFamily: `${odysseyDesignTokens.TypographyFamilyMono}`,\n      fontWeight: `${odysseyDesignTokens.TypographyWeightBodyBold}`,\n      lineHeight: 1,\n    }),\n    [type, contentIsLongerThanOneChar, odysseyDesignTokens]\n  );\n\n  const shouldHideBadge = badgeContent <= 0 || !badgeContent;\n\n  if (shouldHideBadge) {\n    return null;\n  }\n\n  return <Box sx={badgeStyles}>{formattedContent}</Box>;\n};\n\nconst MemoizedBadge = memo(Badge);\nMemoizedBadge.displayName = \"Badge\";\n\nexport { MemoizedBadge as Badge };\n"],"mappings":"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"}

package/dist/OdysseyDesignTokensContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"OdysseyDesignTokensContext.js","names":["Tokens","createContext","useContext","OdysseyDesignTokensContext","useOdysseyDesignTokens"],"sources":["../src/OdysseyDesignTokensContext.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 * as Tokens from \"@okta/odyssey-design-tokens\";\nimport { createContext, useContext } from \"react\";\n\nexport const OdysseyDesignTokensContext = createContext<typeof Tokens>(Tokens);\n\nexport const useOdysseyDesignTokens = () =>\n  useContext(OdysseyDesignTokensContext);\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,OAAO,KAAKA,MAAM,MAAM,6BAA6B;AACrD,SAASC,aAAa,EAAEC,UAAU,QAAQ,OAAO;AAEjD,OAAO,MAAMC,0BAA0B,GAAGF,aAAa,CAAgBD,MAAM,CAAC;AAE9E,OAAO,MAAMI,sBAAsB,GAAGA,CAAA,KACpCF,UAAU,CAACC,0BAA0B,CAAC"}
+{"version":3,"file":"OdysseyDesignTokensContext.js","names":["Tokens","createContext","useContext","OdysseyDesignTokensContext","useOdysseyDesignTokens"],"sources":["../src/OdysseyDesignTokensContext.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 * as Tokens from \"@okta/odyssey-design-tokens\";\nimport { createContext, useContext } from \"react\";\n\nexport type DesignTokens = typeof Tokens;\nexport const OdysseyDesignTokensContext = createContext<DesignTokens>(Tokens);\n\nexport const useOdysseyDesignTokens = () =>\n  useContext(OdysseyDesignTokensContext);\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,OAAO,KAAKA,MAAM,MAAM,6BAA6B;AACrD,SAASC,aAAa,EAAEC,UAAU,QAAQ,OAAO;AAGjD,OAAO,MAAMC,0BAA0B,GAAGF,aAAa,CAAeD,MAAM,CAAC;AAE7E,OAAO,MAAMI,sBAAsB,GAAGA,CAAA,KACpCF,UAAU,CAACC,0BAA0B,CAAC"}

package/dist/src/Badge.d.ts

@@ -0,0 +1,22 @@
+/*!
+ * 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.
+ */
+/// <reference types="react" />
+import type { SeleniumProps } from "./SeleniumProps";
+export declare const badgeTypeValues: readonly ["default", "attention", "danger"];
+export type BadgeProps = {
+    badgeContent: number;
+    badgeContentMax?: number;
+    type?: (typeof badgeTypeValues)[number];
+} & SeleniumProps;
+declare const MemoizedBadge: import("react").MemoExoticComponent<({ badgeContent, badgeContentMax, type, }: BadgeProps) => JSX.Element | null>;
+export { MemoizedBadge as Badge };
+//# sourceMappingURL=Badge.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../src/Badge.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;;AASH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAErD,eAAO,MAAM,eAAe,6CAA8C,CAAC;AAE3E,MAAM,MAAM,UAAU,GAAG;IACvB,YAAY,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,IAAI,CAAC,EAAE,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,CAAC,CAAC;CACzC,GAAG,aAAa,CAAC;AAoElB,QAAA,MAAM,aAAa,iFA/ChB,UAAU,wBA+CoB,CAAC;AAGlC,OAAO,EAAE,aAAa,IAAI,KAAK,EAAE,CAAC"}

package/dist/src/OdysseyDesignTokensContext.d.ts

@@ -11,6 +11,7 @@
  */
 /// <reference types="react" />
 import * as Tokens from "@okta/odyssey-design-tokens";
+export type DesignTokens = typeof Tokens;
 export declare const OdysseyDesignTokensContext: import("react").Context<typeof Tokens>;
 export declare const useOdysseyDesignTokens: () => typeof Tokens;
 //# sourceMappingURL=OdysseyDesignTokensContext.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"OdysseyDesignTokensContext.d.ts","sourceRoot":"","sources":["../../src/OdysseyDesignTokensContext.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;;AAEH,OAAO,KAAK,MAAM,MAAM,6BAA6B,CAAC;AAGtD,eAAO,MAAM,0BAA0B,wCAAuC,CAAC;AAE/E,eAAO,MAAM,sBAAsB,qBACK,CAAC"}
+{"version":3,"file":"OdysseyDesignTokensContext.d.ts","sourceRoot":"","sources":["../../src/OdysseyDesignTokensContext.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;;AAEH,OAAO,KAAK,MAAM,MAAM,6BAA6B,CAAC;AAGtD,MAAM,MAAM,YAAY,GAAG,OAAO,MAAM,CAAC;AACzC,eAAO,MAAM,0BAA0B,wCAAsC,CAAC;AAE9E,eAAO,MAAM,sBAAsB,qBACK,CAAC"}