@okta/odyssey-react-mui 1.25.0 → 1.27.0

package/dist/labs/OdysseyPickers/PickerVirtualizationListBox.js

@@ -0,0 +1,132 @@
+/*!
+ * 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 { Children, createContext, forwardRef, memo, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { VariableSizeList } from "react-window";
+import styled from "@emotion/styled";
+import { createElement as _createElement } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+const ListboxContainer = styled.div({
+  width: "100%",
+  height: "100%"
+});
+const Row = ({
+  data,
+  index,
+  setItemSize,
+  style
+}) => {
+  const rowRef = useRef(null);
+  useEffect(() => {
+    if (rowRef.current) {
+      const firstChild = rowRef.current.firstElementChild;
+      const height = firstChild ? firstChild.clientHeight : rowRef.current.clientHeight;
+      setItemSize(height);
+    }
+  }, [index, rowRef, setItemSize]);
+  const baseOption = data[index];
+  const {
+    key,
+    props
+  } = baseOption;
+  const styles = useMemo(() => ({
+    ...style,
+    height: "auto"
+  }), [style]);
+  return _jsx("div", {
+    ref: rowRef,
+    children: _createElement("li", {
+      ...props,
+      key: key,
+      style: styles
+    })
+  });
+};
+const OuterListboxContext = createContext({});
+const OuterListboxElementType = forwardRef((props, ref) => {
+  const outerProps = useContext(OuterListboxContext);
+  return _jsx("div", {
+    ref: ref,
+    ...props,
+    ...outerProps
+  });
+});
+const useResetCache = length => {
+  const resetCacheRef = useRef(null);
+  useEffect(() => {
+    if (resetCacheRef.current) {
+      resetCacheRef.current.resetAfterIndex(0, true);
+    }
+  }, [length]);
+  return resetCacheRef;
+};
+const PickerVirtualizationListBox = forwardRef((props = {}, ref) => {
+  const [listHeight, setListHeight] = useState(0);
+  const {
+    children,
+    ...other
+  } = props;
+  const itemData = Children.toArray(children).flatMap(child => typeof child === "number" || typeof child === "string" ? [child] : [child].concat("children" in child ? Children.toArray(children) : []));
+  const sizeMapRef = useRef([]);
+  const getListBoxHeight = useCallback(() => {
+    const COMBINED_LISTBOX_PADDING = 16;
+    if (itemData.length > OVERSCAN_ROW_COUNT) {
+      return 9999;
+    } else {
+      const itemsHeightCalculated = sizeMapRef.current.slice(0, itemData.length - 1).map((_, index) => sizeMapRef.current[index] || 0).reduce((prevItemHeight, nextItemHeight) => prevItemHeight + nextItemHeight, 0);
+      return COMBINED_LISTBOX_PADDING + itemsHeightCalculated;
+    }
+  }, [itemData, sizeMapRef]);
+  useEffect(() => {
+    if (sizeMapRef.current.length && itemData.length) {
+      setListHeight(getListBoxHeight());
+    }
+  }, [getListBoxHeight, itemData, sizeMapRef]);
+  const OVERSCAN_ROW_COUNT = 8;
+  const gridRef = useResetCache(itemData.length);
+  const setItemSize = useCallback(size => {
+    gridRef?.current?.resetAfterIndex(0, true);
+    sizeMapRef.current = sizeMapRef.current.concat(size);
+  }, [gridRef, sizeMapRef]);
+  const getItemSize = useCallback(index => sizeMapRef.current[index] || 45, [sizeMapRef]);
+  return _jsx(ListboxContainer, {
+    ref: ref,
+    children: _jsx(OuterListboxContext.Provider, {
+      value: other,
+      children: _jsx(VariableSizeList, {
+        innerElementType: "ul",
+        itemData: itemData,
+        itemCount: itemData.length,
+        itemSize: getItemSize,
+        height: listHeight,
+        width: "100%",
+        ref: gridRef,
+        outerElementType: OuterListboxElementType,
+        overscanCount: OVERSCAN_ROW_COUNT,
+        children: ({
+          data,
+          index,
+          style
+        }) => _jsx(Row, {
+          data: data,
+          index: index,
+          style: style,
+          setItemSize: setItemSize
+        })
+      })
+    })
+  });
+});
+const MemoizedPickerVirtualizationListBox = memo(PickerVirtualizationListBox);
+MemoizedPickerVirtualizationListBox.displayName = "PickerVirtualizationListBox";
+export { MemoizedPickerVirtualizationListBox as PickerVirtualizationListBox };
+//# sourceMappingURL=PickerVirtualizationListBox.js.map

package/dist/labs/OdysseyPickers/PickerVirtualizationListBox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PickerVirtualizationListBox.js","names":["Children","createContext","forwardRef","memo","useCallback","useContext","useEffect","useMemo","useRef","useState","VariableSizeList","styled","createElement","_createElement","jsx","_jsx","ListboxContainer","div","width","height","Row","data","index","setItemSize","style","rowRef","current","firstChild","firstElementChild","clientHeight","baseOption","key","props","styles","ref","children","OuterListboxContext","OuterListboxElementType","outerProps","useResetCache","length","resetCacheRef","resetAfterIndex","PickerVirtualizationListBox","listHeight","setListHeight","other","itemData","toArray","flatMap","child","concat","sizeMapRef","getListBoxHeight","COMBINED_LISTBOX_PADDING","OVERSCAN_ROW_COUNT","itemsHeightCalculated","slice","map","_","reduce","prevItemHeight","nextItemHeight","gridRef","size","getItemSize","Provider","value","innerElementType","itemCount","itemSize","outerElementType","overscanCount","MemoizedPickerVirtualizationListBox","displayName"],"sources":["../../../src/labs/OdysseyPickers/PickerVirtualizationListBox.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  Children,\n  createContext,\n  forwardRef,\n  memo,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { VariableSizeList, ListChildComponentProps } from \"react-window\";\nimport styled from \"@emotion/styled\";\nimport { AutocompleteProps } from \"@mui/material\";\n\ntype SetItemSize = (size: number) => void;\n\nconst ListboxContainer = styled.div({\n  width: \"100%\",\n  height: \"100%\",\n});\n\nconst Row = ({\n  data,\n  index,\n  setItemSize,\n  style,\n}: ListChildComponentProps & { setItemSize: SetItemSize }) => {\n  const rowRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    if (rowRef.current) {\n      /**\n       * Checking for child height to workaround a bug where the clientHeight of the row isn't updated correctly\n       * @see here if you need to know more: https://github.com/bvaughn/react-window/issues/582#issuecomment-1883074908\n       */\n      const firstChild = rowRef.current.firstElementChild;\n      const height = firstChild\n        ? firstChild.clientHeight\n        : rowRef.current.clientHeight;\n\n      setItemSize(height);\n    }\n  }, [index, rowRef, setItemSize]);\n\n  const baseOption = data[index];\n  const { key, props } = baseOption;\n\n  /**\n   * react-window calculates the absolute positions of the list items, via an inline style, so\n   * we need to add it to each list item that is being rendered in the viewable list window.\n   * @see here if you need to know more: https://github.com/bvaughn/react-window?tab=readme-ov-file#why-is-my-list-blank-when-i-scroll\n   */\n  const styles = useMemo(\n    () => ({\n      ...style,\n      height: \"auto\",\n    }),\n    [style],\n  );\n\n  return (\n    <div ref={rowRef}>\n      <li {...props} key={key} style={styles} />\n    </div>\n  );\n};\n\nconst OuterListboxContext = createContext({});\n\nconst OuterListboxElementType = forwardRef<HTMLDivElement>((props, ref) => {\n  const outerProps = useContext(OuterListboxContext);\n  return <div ref={ref} {...props} {...outerProps} />;\n});\n\nconst useResetCache = (length: number) => {\n  const resetCacheRef = useRef<VariableSizeList>(null);\n  useEffect(() => {\n    if (resetCacheRef.current) {\n      resetCacheRef.current.resetAfterIndex(0, true);\n    }\n  }, [length]);\n  return resetCacheRef;\n};\n\nconst PickerVirtualizationListBox = forwardRef<\n  HTMLDivElement,\n  AutocompleteProps<undefined, undefined, undefined, undefined>[\"ListboxProps\"]\n>((props = {}, ref) => {\n  const [listHeight, setListHeight] = useState(0);\n\n  const { children, ...other } = props;\n\n  const itemData = Children.toArray(children).flatMap<typeof children>(\n    (child) =>\n      typeof child === \"number\" || typeof child === \"string\"\n        ? [child]\n        : [child].concat(\"children\" in child ? Children.toArray(children) : []),\n  );\n\n  const sizeMapRef = useRef<number[]>([]);\n\n  const getListBoxHeight = useCallback(() => {\n    // 8px of padding top/bottom applied by MUI\n    const COMBINED_LISTBOX_PADDING = 16;\n\n    if (itemData.length > OVERSCAN_ROW_COUNT) {\n      // has a max-height of 40vh set in CSS. This is only set because height needs to be a number\n      return 9999;\n    } else {\n      const itemsHeightCalculated = sizeMapRef.current\n        .slice(0, itemData.length - 1)\n        .map((_, index) => sizeMapRef.current[index] || 0)\n        .reduce(\n          (prevItemHeight, nextItemHeight) => prevItemHeight + nextItemHeight,\n          0,\n        );\n      return COMBINED_LISTBOX_PADDING + itemsHeightCalculated;\n    }\n  }, [itemData, sizeMapRef]);\n\n  useEffect(() => {\n    if (sizeMapRef.current.length && itemData.length) {\n      setListHeight(getListBoxHeight());\n    }\n  }, [getListBoxHeight, itemData, sizeMapRef]);\n\n  // The number of items (rows or columns) to render outside of the visible area for performance and scrolling reasons\n  const OVERSCAN_ROW_COUNT = 8;\n\n  const gridRef = useResetCache(itemData.length);\n\n  const setItemSize = useCallback<SetItemSize>(\n    (size) => {\n      gridRef?.current?.resetAfterIndex(0, true);\n      sizeMapRef.current = sizeMapRef.current.concat(size);\n    },\n    [gridRef, sizeMapRef],\n  );\n  const getItemSize = useCallback(\n    // using 45px as a sane default here to avoid a lot of content shift on repaint\n    (index: number) => sizeMapRef.current[index] || 45,\n    [sizeMapRef],\n  );\n\n  return (\n    <ListboxContainer ref={ref}>\n      <OuterListboxContext.Provider value={other}>\n        <VariableSizeList\n          innerElementType=\"ul\"\n          itemData={itemData}\n          itemCount={itemData.length}\n          itemSize={getItemSize}\n          height={listHeight}\n          width=\"100%\"\n          ref={gridRef}\n          outerElementType={OuterListboxElementType}\n          overscanCount={OVERSCAN_ROW_COUNT}\n        >\n          {({ data, index, style }) => (\n            <Row\n              data={data}\n              index={index}\n              style={style}\n              setItemSize={setItemSize}\n            />\n          )}\n        </VariableSizeList>\n      </OuterListboxContext.Provider>\n    </ListboxContainer>\n  );\n});\n\nconst MemoizedPickerVirtualizationListBox = memo(PickerVirtualizationListBox);\n\nMemoizedPickerVirtualizationListBox.displayName = \"PickerVirtualizationListBox\";\n\nexport { MemoizedPickerVirtualizationListBox as PickerVirtualizationListBox };\n"],"mappings":"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"}

package/dist/labs/OdysseyPickers/PickerWithOptionAdornment.js

@@ -0,0 +1,291 @@
+/*!
+ * 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, useCallback } from "react";
+import styled from "@emotion/styled";
+import { Box } from "../../Box.js";
+import { ComposablePicker } from "./ComposablePicker.js";
+import { useOdysseyDesignTokens } from "../../OdysseyDesignTokensContext.js";
+import { Option, OptionDescriptionComponent, OptionLabelContainer, OptionMetadataComponent } from "./Picker.js";
+import { Heading6 } from "../../Typography.js";
+import { Tag } from "../../Tag.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const OptionAdornmentContainer = styled("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "adornmentSize" && prop !== "isTagContainer"
+})(({
+  adornmentSize = "small",
+  isTagContainer = false,
+  odysseyDesignTokens
+}) => ({
+  position: "relative",
+  bottom: "1px",
+  alignSelf: "flex-start",
+  width: odysseyDesignTokens.Spacing5,
+  height: odysseyDesignTokens.Spacing5,
+  overflow: "hidden",
+  marginInlineEnd: odysseyDesignTokens.Spacing3,
+  svg: {
+    width: "100%",
+    height: "auto"
+  },
+  img: {
+    position: "absolute",
+    top: "50%",
+    left: "50%",
+    width: "100%",
+    transform: "translate(-50%, -50%)"
+  },
+  ...(adornmentSize === "large" && !isTagContainer && {
+    bottom: 0,
+    width: odysseyDesignTokens.Spacing8,
+    height: odysseyDesignTokens.Spacing8
+  }),
+  ...(isTagContainer && {
+    bottom: 0,
+    alignSelf: "center",
+    width: odysseyDesignTokens.Spacing4,
+    height: "auto",
+    maxHeight: odysseyDesignTokens.Spacing4,
+    marginInlineEnd: odysseyDesignTokens.Spacing2,
+    svg: {
+      display: "flex",
+      width: "100%",
+      height: "auto"
+    }
+  })
+}));
+const OptionAdornment = ({
+  adornment,
+  adornmentSize,
+  odysseyDesignTokens
+}) => {
+  const isImageAdornment = typeof adornment === "string";
+  if (isImageAdornment) {
+    return _jsx(OptionAdornmentContainer, {
+      adornmentSize: adornmentSize,
+      odysseyDesignTokens: odysseyDesignTokens,
+      children: _jsx("img", {
+        src: adornment,
+        alt: "",
+        role: "presentation"
+      })
+    });
+  } else {
+    return _jsx(OptionAdornmentContainer, {
+      adornmentSize: adornmentSize,
+      odysseyDesignTokens: odysseyDesignTokens,
+      children: adornment
+    });
+  }
+};
+const OptionWithLabelDescriptionOnly = ({
+  adornmentSize,
+  muiProps,
+  odysseyDesignTokens,
+  option
+}) => {
+  const {
+    adornment,
+    description,
+    label,
+    value
+  } = option;
+  return _jsxs(Option, {
+    hasAdornment: true,
+    muiProps: muiProps,
+    children: [_jsx(OptionAdornment, {
+      adornment: adornment,
+      adornmentSize: adornmentSize,
+      odysseyDesignTokens: odysseyDesignTokens
+    }), _jsxs(OptionLabelContainer, {
+      odysseyDesignTokens: odysseyDesignTokens,
+      children: [_jsx(Heading6, {
+        component: "p",
+        children: label
+      }), _jsx(OptionDescriptionComponent, {
+        description: description,
+        odysseyDesignTokens: odysseyDesignTokens
+      })]
+    })]
+  }, value);
+};
+const OptionWithLabelDescriptionMetadata = ({
+  adornmentSize,
+  muiProps,
+  odysseyDesignTokens,
+  option
+}) => {
+  const {
+    adornment,
+    description,
+    label,
+    metaData,
+    value
+  } = option;
+  return _jsxs(Option, {
+    hasAdornment: true,
+    muiProps: muiProps,
+    children: [_jsx(OptionAdornment, {
+      adornment: adornment,
+      adornmentSize: adornmentSize,
+      odysseyDesignTokens: odysseyDesignTokens
+    }), _jsxs("div", {
+      children: [_jsxs(OptionLabelContainer, {
+        odysseyDesignTokens: odysseyDesignTokens,
+        children: [_jsx(Heading6, {
+          component: "p",
+          children: label
+        }), _jsx(OptionDescriptionComponent, {
+          description: description,
+          odysseyDesignTokens: odysseyDesignTokens
+        })]
+      }), _jsx(OptionMetadataComponent, {
+        metaData: metaData,
+        odysseyDesignTokens: odysseyDesignTokens
+      })]
+    })]
+  }, value);
+};
+const TagAdornment = ({
+  adornment
+}) => {
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+  const isImageAdornment = typeof adornment === "string";
+  if (isImageAdornment) {
+    return _jsx(OptionAdornmentContainer, {
+      isTagContainer: true,
+      odysseyDesignTokens: odysseyDesignTokens,
+      children: _jsx("img", {
+        src: adornment,
+        alt: "",
+        role: "presentation"
+      })
+    });
+  }
+  return _jsx(OptionAdornmentContainer, {
+    isTagContainer: true,
+    odysseyDesignTokens: odysseyDesignTokens,
+    children: adornment
+  });
+};
+const PickerWithOptionAdornment = ({
+  adornmentSize = "small",
+  ariaDescribedBy,
+  defaultValue,
+  errorMessage,
+  errorMessageList,
+  getIsOptionEqualToValue,
+  groupOptionsBy,
+  hasMultipleChoices,
+  id: idOverride,
+  inputValue,
+  isCustomValueAllowed,
+  isDisabled,
+  isFullWidth = false,
+  isLoading,
+  isOptional = false,
+  isReadOnly,
+  isVirtualized: isVirtualizedProp = false,
+  hint,
+  HintLinkComponent,
+  label,
+  name: nameOverride,
+  onBlur,
+  onChange: onChangeProp,
+  onInputChange: onInputChangeProp,
+  onFocus,
+  options,
+  value,
+  testId,
+  translate
+}) => {
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+  const customTagRender = useCallback((values, getTagProps) => values.map((value, index) => {
+    const {
+      key,
+      onDelete
+    } = getTagProps({
+      index
+    });
+    const {
+      adornment,
+      label
+    } = value;
+    return _jsx(Box, {
+      sx: {
+        margin: odysseyDesignTokens.Spacing1,
+        marginInlineEnd: 0
+      },
+      children: _jsx(Tag, {
+        icon: _jsx(TagAdornment, {
+          adornment: adornment
+        }),
+        label: label,
+        onRemove: onDelete
+      })
+    }, key);
+  }), [odysseyDesignTokens]);
+  const customOptionRender = useCallback((muiProps, option) => {
+    const hasMetadata = "metaData" in option && option.metaData;
+    if (hasMetadata) {
+      return _jsx(OptionWithLabelDescriptionMetadata, {
+        adornmentSize: adornmentSize,
+        muiProps: muiProps,
+        odysseyDesignTokens: odysseyDesignTokens,
+        option: option
+      });
+    }
+    return _jsx(OptionWithLabelDescriptionOnly, {
+      adornmentSize: adornmentSize,
+      muiProps: muiProps,
+      odysseyDesignTokens: odysseyDesignTokens,
+      option: option
+    });
+  }, [adornmentSize, odysseyDesignTokens]);
+  return _jsx(ComposablePicker, {
+    ariaDescribedBy: ariaDescribedBy,
+    defaultValue: defaultValue,
+    errorMessage: errorMessage,
+    errorMessageList: errorMessageList,
+    getIsOptionEqualToValue: getIsOptionEqualToValue,
+    groupOptionsBy: groupOptionsBy,
+    hasMultipleChoices: hasMultipleChoices,
+    id: idOverride,
+    inputValue: inputValue,
+    isCustomValueAllowed: isCustomValueAllowed,
+    isDisabled: isDisabled,
+    isFullWidth: isFullWidth,
+    isLoading: isLoading,
+    isOptional: isOptional,
+    isReadOnly: isReadOnly,
+    isVirtualized: isVirtualizedProp,
+    hint: hint,
+    HintLinkComponent: HintLinkComponent,
+    label: label,
+    name: nameOverride,
+    onBlur: onBlur,
+    onChange: onChangeProp,
+    onInputChange: onInputChangeProp,
+    onFocus: onFocus,
+    options: options,
+    renderOption: customOptionRender,
+    renderTags: customTagRender,
+    value: value,
+    testId: testId,
+    translate: translate
+  });
+};
+const MemoizedPickerWithOptionAdornment = memo(PickerWithOptionAdornment);
+MemoizedPickerWithOptionAdornment.displayName = "PickerWithOptionAdornment";
+export { MemoizedPickerWithOptionAdornment as PickerWithOptionAdornment };
+//# sourceMappingURL=PickerWithOptionAdornment.js.map

package/dist/labs/OdysseyPickers/PickerWithOptionAdornment.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PickerWithOptionAdornment.js","names":["memo","useCallback","styled","Box","ComposablePicker","useOdysseyDesignTokens","Option","OptionDescriptionComponent","OptionLabelContainer","OptionMetadataComponent","Heading6","Tag","jsx","_jsx","jsxs","_jsxs","OptionAdornmentContainer","shouldForwardProp","prop","adornmentSize","isTagContainer","odysseyDesignTokens","position","bottom","alignSelf","width","Spacing5","height","overflow","marginInlineEnd","Spacing3","svg","img","top","left","transform","Spacing8","Spacing4","maxHeight","Spacing2","display","OptionAdornment","adornment","isImageAdornment","children","src","alt","role","OptionWithLabelDescriptionOnly","muiProps","option","description","label","value","hasAdornment","component","OptionWithLabelDescriptionMetadata","metaData","TagAdornment","PickerWithOptionAdornment","ariaDescribedBy","defaultValue","errorMessage","errorMessageList","getIsOptionEqualToValue","groupOptionsBy","hasMultipleChoices","id","idOverride","inputValue","isCustomValueAllowed","isDisabled","isFullWidth","isLoading","isOptional","isReadOnly","isVirtualized","isVirtualizedProp","hint","HintLinkComponent","name","nameOverride","onBlur","onChange","onChangeProp","onInputChange","onInputChangeProp","onFocus","options","testId","translate","customTagRender","values","getTagProps","map","index","key","onDelete","sx","margin","Spacing1","icon","onRemove","customOptionRender","hasMetadata","renderOption","renderTags","MemoizedPickerWithOptionAdornment","displayName"],"sources":["../../../src/labs/OdysseyPickers/PickerWithOptionAdornment.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  HTMLAttributes,\n  memo,\n  ReactElement,\n  ReactNode,\n  useCallback,\n} from \"react\";\nimport styled from \"@emotion/styled\";\n\nimport { Box } from \"../../Box\";\nimport {\n  ComposablePicker,\n  ComposablePickerProps,\n  type AdornmentSize,\n  type BasePickerProps,\n  type BasePickerType,\n} from \"./ComposablePicker\";\nimport {\n  useOdysseyDesignTokens,\n  DesignTokens,\n} from \"../../OdysseyDesignTokensContext\";\nimport {\n  type BaseOptionProps,\n  type LabelDescription,\n  type Metadata,\n  Option,\n  OptionDescriptionComponent,\n  OptionLabelContainer,\n  OptionMetadataComponent,\n  OptionProps,\n} from \"./Picker\";\nimport { Heading6 } from \"../../Typography\";\nimport { Tag } from \"../../Tag\";\n\ntype Adornment = ReactNode | string;\n\ntype AdornmentLabelDescription = LabelDescription & {\n  adornment: Adornment;\n};\n\ntype AdornmentLabelDescriptionMetadata = AdornmentLabelDescription & Metadata;\n\nexport type AdornmentOptionType =\n  | AdornmentLabelDescription\n  | AdornmentLabelDescriptionMetadata;\n\nconst OptionAdornmentContainer = styled(\"div\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" &&\n    prop !== \"adornmentSize\" &&\n    prop !== \"isTagContainer\",\n})<{\n  adornmentSize?: AdornmentSize;\n  isTagContainer?: boolean;\n  odysseyDesignTokens: DesignTokens;\n}>(\n  ({\n    adornmentSize = \"small\",\n    isTagContainer = false,\n    odysseyDesignTokens,\n  }) => ({\n    position: \"relative\",\n    // push icon up by one px for better visual alignment\n    bottom: \"1px\",\n    alignSelf: \"flex-start\",\n    width: odysseyDesignTokens.Spacing5,\n    height: odysseyDesignTokens.Spacing5,\n    overflow: \"hidden\",\n    marginInlineEnd: odysseyDesignTokens.Spacing3,\n\n    svg: {\n      width: \"100%\",\n      height: \"auto\",\n    },\n\n    img: {\n      position: \"absolute\",\n      top: \"50%\",\n      left: \"50%\",\n      width: \"100%\",\n      transform: \"translate(-50%, -50%)\",\n    },\n\n    ...(adornmentSize === \"large\" &&\n      !isTagContainer && {\n        bottom: 0,\n        width: odysseyDesignTokens.Spacing8,\n        height: odysseyDesignTokens.Spacing8,\n      }),\n\n    ...(isTagContainer && {\n      bottom: 0,\n      alignSelf: \"center\",\n      width: odysseyDesignTokens.Spacing4,\n      height: \"auto\",\n      maxHeight: odysseyDesignTokens.Spacing4,\n      marginInlineEnd: odysseyDesignTokens.Spacing2,\n\n      svg: {\n        display: \"flex\",\n        width: \"100%\",\n        height: \"auto\",\n      },\n    }),\n  }),\n);\n\ntype OptionAdornmentProps = {\n  adornment: Adornment;\n  adornmentSize: AdornmentSize;\n  odysseyDesignTokens: DesignTokens;\n};\n\nconst OptionAdornment = ({\n  adornment,\n  adornmentSize,\n  odysseyDesignTokens,\n}: OptionAdornmentProps) => {\n  const isImageAdornment = typeof adornment === \"string\";\n\n  if (isImageAdornment) {\n    return (\n      <OptionAdornmentContainer\n        adornmentSize={adornmentSize}\n        odysseyDesignTokens={odysseyDesignTokens}\n      >\n        {/* NOTE: Intentionally leaving alt as an empty string here so screen readers will ignore this image */}\n        {/* Image should be suffciently described by the adjacent title and/or description of the option */}\n        <img src={adornment} alt=\"\" role=\"presentation\" />\n      </OptionAdornmentContainer>\n    );\n  } else {\n    return (\n      <OptionAdornmentContainer\n        adornmentSize={adornmentSize}\n        odysseyDesignTokens={odysseyDesignTokens}\n      >\n        {adornment}\n      </OptionAdornmentContainer>\n    );\n  }\n};\n\nconst OptionWithLabelDescriptionOnly = <\n  OptionType extends AdornmentLabelDescription,\n>({\n  adornmentSize,\n  muiProps,\n  odysseyDesignTokens,\n  option,\n}: BaseOptionProps &\n  OptionProps<OptionType> & { adornmentSize: AdornmentSize }) => {\n  const { adornment, description, label, value } = option;\n  return (\n    <Option hasAdornment key={value} muiProps={muiProps}>\n      <OptionAdornment\n        adornment={adornment}\n        adornmentSize={adornmentSize}\n        odysseyDesignTokens={odysseyDesignTokens}\n      />\n      <OptionLabelContainer odysseyDesignTokens={odysseyDesignTokens}>\n        <Heading6 component=\"p\">{label}</Heading6>\n        <OptionDescriptionComponent\n          description={description}\n          odysseyDesignTokens={odysseyDesignTokens}\n        />\n      </OptionLabelContainer>\n    </Option>\n  );\n};\n\nconst OptionWithLabelDescriptionMetadata = <\n  OptionType extends AdornmentLabelDescriptionMetadata,\n>({\n  adornmentSize,\n  muiProps,\n  odysseyDesignTokens,\n  option,\n}: BaseOptionProps &\n  OptionProps<OptionType> & {\n    adornmentSize: AdornmentSize;\n  }) => {\n  const { adornment, description, label, metaData, value } = option;\n\n  return (\n    <Option hasAdornment key={value} muiProps={muiProps}>\n      <OptionAdornment\n        adornment={adornment}\n        adornmentSize={adornmentSize}\n        odysseyDesignTokens={odysseyDesignTokens}\n      />\n      <div>\n        <OptionLabelContainer odysseyDesignTokens={odysseyDesignTokens}>\n          <Heading6 component=\"p\">{label}</Heading6>\n          <OptionDescriptionComponent\n            description={description}\n            odysseyDesignTokens={odysseyDesignTokens}\n          />\n        </OptionLabelContainer>\n        <OptionMetadataComponent\n          metaData={metaData}\n          odysseyDesignTokens={odysseyDesignTokens}\n        />\n      </div>\n    </Option>\n  );\n};\n\ntype TagAdornmentProps = {\n  adornment: Adornment;\n};\n\nconst TagAdornment = ({ adornment }: TagAdornmentProps) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n  const isImageAdornment = typeof adornment === \"string\";\n\n  if (isImageAdornment) {\n    return (\n      <OptionAdornmentContainer\n        isTagContainer\n        odysseyDesignTokens={odysseyDesignTokens}\n      >\n        <img src={adornment} alt=\"\" role=\"presentation\" />\n      </OptionAdornmentContainer>\n    );\n  }\n\n  return (\n    <OptionAdornmentContainer\n      isTagContainer\n      odysseyDesignTokens={odysseyDesignTokens}\n    >\n      {adornment}\n    </OptionAdornmentContainer>\n  );\n};\n\nexport type PickerWithOptionAdornmentProps<\n  OptionType extends AdornmentOptionType,\n  HasMultipleChoices extends boolean | undefined,\n  IsCustomValueAllowed extends boolean | undefined,\n> = BasePickerProps<OptionType, HasMultipleChoices, IsCustomValueAllowed> & {\n  adornmentSize?: AdornmentSize;\n};\n\ntype PickerWithOptionAdornmentComponentType = {\n  <\n    OptionType extends AdornmentLabelDescription,\n    HasMultipleChoices extends boolean | undefined,\n    IsCustomValueAllowed extends boolean | undefined,\n  >(\n    props: PickerWithOptionAdornmentProps<\n      OptionType,\n      HasMultipleChoices,\n      IsCustomValueAllowed\n    >,\n  ): ReactElement;\n  <\n    OptionType extends AdornmentLabelDescriptionMetadata,\n    HasMultipleChoices extends boolean | undefined,\n    IsCustomValueAllowed extends boolean | undefined,\n  >(\n    props: PickerWithOptionAdornmentProps<\n      OptionType,\n      HasMultipleChoices,\n      IsCustomValueAllowed\n    >,\n  ): ReactElement;\n};\n\nconst PickerWithOptionAdornment: PickerWithOptionAdornmentComponentType = <\n  OptionType extends AdornmentOptionType,\n  HasMultipleChoices extends boolean | undefined,\n  IsCustomValueAllowed extends boolean | undefined,\n>({\n  adornmentSize = \"small\",\n  ariaDescribedBy,\n  defaultValue,\n  errorMessage,\n  errorMessageList,\n  getIsOptionEqualToValue,\n  groupOptionsBy,\n  hasMultipleChoices,\n  id: idOverride,\n  inputValue,\n  isCustomValueAllowed,\n  isDisabled,\n  isFullWidth = false,\n  isLoading,\n  isOptional = false,\n  isReadOnly,\n  isVirtualized: isVirtualizedProp = false,\n  hint,\n  HintLinkComponent,\n  label,\n  name: nameOverride,\n  onBlur,\n  onChange: onChangeProp,\n  onInputChange: onInputChangeProp,\n  onFocus,\n  options,\n  value,\n  testId,\n  translate,\n}: PickerWithOptionAdornmentProps<\n  OptionType,\n  HasMultipleChoices,\n  IsCustomValueAllowed\n>) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  const customTagRender = useCallback<\n    NonNullable<\n      ComposablePickerProps<\n        OptionType,\n        HasMultipleChoices,\n        IsCustomValueAllowed\n      >[\"renderTags\"]\n    >\n  >(\n    (values, getTagProps) =>\n      values.map((value, index) => {\n        const { key, onDelete } = getTagProps({ index });\n        const { adornment, label } = value;\n\n        return (\n          <Box\n            key={key}\n            sx={{\n              margin: odysseyDesignTokens.Spacing1,\n              marginInlineEnd: 0,\n            }}\n          >\n            <Tag\n              icon={<TagAdornment adornment={adornment} />}\n              label={label}\n              onRemove={onDelete}\n            />\n          </Box>\n        );\n      }),\n    [odysseyDesignTokens],\n  );\n\n  const customOptionRender = useCallback<\n    (props: HTMLAttributes<HTMLLIElement>, option: OptionType) => ReactNode\n  >(\n    (muiProps, option) => {\n      const hasMetadata = \"metaData\" in option && option.metaData;\n\n      if (hasMetadata) {\n        return (\n          <OptionWithLabelDescriptionMetadata\n            adornmentSize={adornmentSize}\n            muiProps={muiProps}\n            odysseyDesignTokens={odysseyDesignTokens}\n            option={option}\n          />\n        );\n      }\n\n      return (\n        <OptionWithLabelDescriptionOnly\n          adornmentSize={adornmentSize}\n          muiProps={muiProps}\n          odysseyDesignTokens={odysseyDesignTokens}\n          option={option}\n        />\n      );\n    },\n    [adornmentSize, odysseyDesignTokens],\n  );\n\n  return (\n    <ComposablePicker<OptionType, HasMultipleChoices, IsCustomValueAllowed>\n      ariaDescribedBy={ariaDescribedBy}\n      defaultValue={defaultValue}\n      errorMessage={errorMessage}\n      errorMessageList={errorMessageList}\n      getIsOptionEqualToValue={getIsOptionEqualToValue}\n      groupOptionsBy={groupOptionsBy}\n      hasMultipleChoices={hasMultipleChoices}\n      id={idOverride}\n      inputValue={inputValue}\n      isCustomValueAllowed={isCustomValueAllowed}\n      isDisabled={isDisabled}\n      isFullWidth={isFullWidth}\n      isLoading={isLoading}\n      isOptional={isOptional}\n      isReadOnly={isReadOnly}\n      isVirtualized={isVirtualizedProp}\n      hint={hint}\n      HintLinkComponent={HintLinkComponent}\n      label={label}\n      name={nameOverride}\n      onBlur={onBlur}\n      onChange={onChangeProp}\n      onInputChange={onInputChangeProp}\n      onFocus={onFocus}\n      options={options}\n      renderOption={customOptionRender}\n      renderTags={customTagRender}\n      value={value}\n      testId={testId}\n      translate={translate}\n    />\n  );\n};\n\n// Need the `as BasePickerType` because generics don't get passed through\nconst MemoizedPickerWithOptionAdornment = memo(\n  PickerWithOptionAdornment,\n) as BasePickerType;\n\nMemoizedPickerWithOptionAdornment.displayName = \"PickerWithOptionAdornment\";\n\nexport { MemoizedPickerWithOptionAdornment as PickerWithOptionAdornment };\n"],"mappings":"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"}

package/dist/{src/createShadowDomElements.d.ts → labs/OdysseyPickers/index.js}

@@ -9,10 +9,7 @@
  *
  * See the License for the specific language governing permissions and limitations under the License.
  */
-export declare const createShadowDomElements: (containerElement: HTMLElement) => {
-    emotionRootElement: HTMLDivElement;
-    shadowRootElement: HTMLDivElement;
-};
-/** @deprecated Use `createShadowDomElements` instead. */
-export declare const createShadowRootElement: (containerElement: HTMLElement) => [HTMLStyleElement, HTMLDivElement];
-//# sourceMappingURL=createShadowDomElements.d.ts.map
+export { adornmentSizeValues } from "./ComposablePicker.js";
+export * from "./Picker.js";
+export * from "./PickerWithOptionAdornment.js";
+//# sourceMappingURL=index.js.map

package/dist/labs/OdysseyPickers/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["adornmentSizeValues"],"sources":["../../../src/labs/OdysseyPickers/index.ts"],"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\nexport { adornmentSizeValues } from \"./ComposablePicker\";\nexport * from \"./Picker\";\nexport * from \"./PickerWithOptionAdornment\";\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAVA,SAYSA,mBAAmB;AAAA;AAAA"}

package/dist/labs/PageTemplate.js

@@ -16,17 +16,19 @@ import { useOdysseyDesignTokens } from "../OdysseyDesignTokensContext.js";
 import { DocumentationIcon } from "../icons.generated/index.js";
 import { Heading4, Subordinate } from "../Typography.js";
 import { Link } from "../Link.js";
+import { useHasUiShell } from "./UiShell/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const TemplateContainer = styled("div", {
-  shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "isFullWidth"
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "hasUiShell" && prop !== "isFullWidth"
 })(({
-  odysseyDesignTokens,
-  isFullWidth
+  hasUiShell,
+  isFullWidth,
+  odysseyDesignTokens
 }) => ({
   maxWidth: isFullWidth ? "100%" : `calc(1440px + ${odysseyDesignTokens.Spacing6} + ${odysseyDesignTokens.Spacing6})`,
-  marginInline: isFullWidth ? odysseyDesignTokens.Spacing6 : "auto",
-  padding: odysseyDesignTokens.Spacing6
+  marginInline: isFullWidth && !hasUiShell ? odysseyDesignTokens.Spacing6 : "auto",
+  padding: hasUiShell ? 0 : odysseyDesignTokens.Spacing6
 }));
 const TemplateHeader = styled("div")(() => ({
   display: "flex",
@@ -89,25 +91,27 @@ const TemplateContent = styled("div", {
   animation: drawerVariant === "persistent" && isDrawerOpen ? "animate-drawer-open 225ms cubic-bezier(0, 0, 0.2, 1)" : "animate-drawer-close 225ms cubic-bezier(0, 0, 0.2, 1)"
 }));
 const PageTemplate = ({
-  title,
+  children,
   description,
   documentationLink,
   documentationText,
+  drawer,
+  isFullWidth = false,
   primaryCallToActionComponent,
   secondaryCallToActionComponent,
   tertiaryCallToActionComponent,
-  children,
-  drawer,
-  isFullWidth = false
+  title
 }) => {
   const odysseyDesignTokens = useOdysseyDesignTokens();
   const {
     isOpen: isDrawerOpen,
     variant: drawerVariant
   } = drawer?.props ?? {};
+  const hasUiShell = useHasUiShell();
   return _jsxs(TemplateContainer, {
-    odysseyDesignTokens: odysseyDesignTokens,
+    hasUiShell: hasUiShell,
     isFullWidth: isFullWidth,
+    odysseyDesignTokens: odysseyDesignTokens,
     children: [_jsxs(TemplateHeader, {
       children: [_jsxs(TemplateHeaderPrimaryContent, {
         children: [title && _jsx(Heading4, {

package/dist/labs/PageTemplate.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageTemplate.js","names":["memo","styled","useOdysseyDesignTokens","DocumentationIcon","Heading4","Subordinate","Link","jsx","_jsx","jsxs","_jsxs","TemplateContainer","shouldForwardProp","prop","odysseyDesignTokens","isFullWidth","maxWidth","Spacing6","marginInline","padding","TemplateHeader","display","alignItems","justifyContent","TemplateHeaderPrimaryContent","marginBlockEnd","TemplateHeaderSecondaryContent","flexDirection","gap","Spacing2","minHeight","Spacing7","TemplateHeaderButtons","TemplateContent","includes","isDrawerOpen","drawerVariant","gridTemplateColumns","gridGap","Spacing4","marginBlock","animation","PageTemplate","title","description","documentationLink","documentationText","primaryCallToActionComponent","secondaryCallToActionComponent","tertiaryCallToActionComponent","children","drawer","isOpen","variant","props","href","icon","MemoizedPageTemplate","displayName"],"sources":["../../src/labs/PageTemplate.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 { memo, ReactElement, ReactNode } from \"react\";\nimport styled from \"@emotion/styled\";\n\nimport {\n  DesignTokens,\n  useOdysseyDesignTokens,\n} from \"../OdysseyDesignTokensContext\";\nimport { DocumentationIcon } from \"../icons.generated\";\nimport { Heading4, Subordinate } from \"../Typography\";\nimport { Link } from \"../Link\";\n\nexport type PageTemplateProps = {\n  /**\n   * The title of the layout to be situated in the layout header\n   */\n  title?: string;\n  /**\n   * A supplementary description to be situated in the layout header\n   */\n  description?: string;\n  /**\n   * The destination for a documentation `Link` to be situated in the layout header\n   */\n  documentationLink?: string;\n  /**\n   * The text for a documentation `Link` to be situated in the layout header\n   */\n  documentationText?: string;\n  /**\n   * An optional `Drawer` object. Can be of variant 'temporary' or 'persistent'.\n   */\n  drawer?: ReactElement;\n  /**\n   * An optional `Button` object to be situated in the layout header. Should almost always be of variant `primary`.\n   */\n  primaryCallToActionComponent?: ReactElement;\n  /**\n   * An optional `Button` object to be situated in the layout header, alongside the `callToActionPrimaryComponent`.\n   */\n  secondaryCallToActionComponent?: ReactElement;\n  /**\n   * An optional `Button` object to be situated in the layout header, alongside the other two `callToAction` components.\n   */\n  tertiaryCallToActionComponent?: ReactElement;\n  /**\n   * The content of the layout. May be a `string` or any other `ReactNode` or array of `ReactNode`s. Will often be `Grid` objects.\n   */\n  children?: ReactNode;\n  /**\n   * When set to `true`, the layout expands past its max width of 1440px and spans the entire available screen width.\n   */\n  isFullWidth?: boolean;\n};\n\ntype TemplateContentProps = {\n  odysseyDesignTokens: DesignTokens;\n  isDrawerOpen?: boolean;\n  drawerVariant?: string;\n};\n\nconst TemplateContainer = styled(\"div\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" && prop !== \"isFullWidth\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n  isFullWidth: boolean;\n}>(({ odysseyDesignTokens, isFullWidth }) => ({\n  maxWidth: isFullWidth\n    ? \"100%\"\n    : `calc(1440px + ${odysseyDesignTokens.Spacing6} + ${odysseyDesignTokens.Spacing6})`,\n  marginInline: isFullWidth ? odysseyDesignTokens.Spacing6 : \"auto\",\n  padding: odysseyDesignTokens.Spacing6,\n}));\n\nconst TemplateHeader = styled(\"div\")(() => ({\n  display: \"flex\",\n  alignItems: \"flex-end\",\n  justifyContent: \"space-between\",\n}));\n\nconst TemplateHeaderPrimaryContent = styled(\"div\")(() => ({\n  [\".MuiTypography-root:last-child\"]: {\n    marginBlockEnd: \"0\",\n  },\n}));\n\nconst TemplateHeaderSecondaryContent = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n}>(({ odysseyDesignTokens }) => ({\n  alignItems: \"flex-end\",\n  display: \"flex\",\n  flexDirection: \"column\",\n  gap: odysseyDesignTokens.Spacing2,\n  minHeight: odysseyDesignTokens.Spacing7,\n  justifyContent: \"center\",\n}));\n\nconst TemplateHeaderButtons = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n}>(({ odysseyDesignTokens }) => ({\n  display: \"flex\",\n  gap: odysseyDesignTokens.Spacing2,\n}));\n\nconst TemplateContent = styled(\"div\", {\n  shouldForwardProp: (prop) =>\n    ![\"odysseyDesignTokens\", \"isDrawerOpen\", \"drawerVariant\"].includes(prop),\n})<TemplateContentProps>(\n  ({ odysseyDesignTokens, isDrawerOpen, drawerVariant }) => ({\n    \"@keyframes animate-drawer-open\": {\n      \"0%\": {\n        gridTemplateColumns: \"minmax(0, 1fr) 0\",\n      },\n      \"100%\": {\n        gridTemplateColumns: \"minmax(0, 1fr) 360px\",\n      },\n    },\n    \"@keyframes animate-drawer-close\": {\n      \"0%\": {\n        gridTemplateColumns: \"minmax(0, 1fr) 360px\",\n      },\n      \"100%\": {\n        gridTemplateColumns: \"minmax(0, 1fr) 0\",\n      },\n    },\n    display: \"grid\",\n    gridGap:\n      drawerVariant === \"persistent\" && !isDrawerOpen\n        ? 0\n        : odysseyDesignTokens.Spacing4,\n    gap:\n      drawerVariant === \"persistent\" && !isDrawerOpen\n        ? 0\n        : odysseyDesignTokens.Spacing4,\n    marginBlock: odysseyDesignTokens.Spacing4,\n    gridTemplateColumns:\n      drawerVariant === \"persistent\"\n        ? isDrawerOpen\n          ? \"minmax(0, 1fr) 360px\"\n          : \"minmax(0, 1fr) 0\"\n        : \"minmax(0, 1fr)\",\n    animation:\n      drawerVariant === \"persistent\" && isDrawerOpen\n        ? \"animate-drawer-open 225ms cubic-bezier(0, 0, 0.2, 1)\"\n        : \"animate-drawer-close 225ms cubic-bezier(0, 0, 0.2, 1)\",\n  }),\n);\n\nconst PageTemplate = ({\n  title,\n  description,\n  documentationLink,\n  documentationText,\n  primaryCallToActionComponent,\n  secondaryCallToActionComponent,\n  tertiaryCallToActionComponent,\n  children,\n  drawer,\n  isFullWidth = false,\n}: PageTemplateProps) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n  const { isOpen: isDrawerOpen, variant: drawerVariant } = drawer?.props ?? {};\n\n  return (\n    <TemplateContainer\n      odysseyDesignTokens={odysseyDesignTokens}\n      isFullWidth={isFullWidth}\n    >\n      <TemplateHeader>\n        <TemplateHeaderPrimaryContent>\n          {title && <Heading4>{title}</Heading4>}\n          {description && <Subordinate>{description}</Subordinate>}\n        </TemplateHeaderPrimaryContent>\n\n        <TemplateHeaderSecondaryContent\n          odysseyDesignTokens={odysseyDesignTokens}\n        >\n          {documentationLink && (\n            <Link href={documentationLink} icon={<DocumentationIcon />}>\n              {documentationText}\n            </Link>\n          )}\n          {(primaryCallToActionComponent ||\n            secondaryCallToActionComponent ||\n            tertiaryCallToActionComponent) && (\n            <TemplateHeaderButtons odysseyDesignTokens={odysseyDesignTokens}>\n              {tertiaryCallToActionComponent}\n              {secondaryCallToActionComponent}\n              {primaryCallToActionComponent}\n            </TemplateHeaderButtons>\n          )}\n        </TemplateHeaderSecondaryContent>\n      </TemplateHeader>\n      <TemplateContent\n        odysseyDesignTokens={odysseyDesignTokens}\n        isDrawerOpen={isDrawerOpen}\n        drawerVariant={drawerVariant}\n      >\n        {children}\n        {drawer}\n      </TemplateContent>\n    </TemplateContainer>\n  );\n};\n\nconst MemoizedPageTemplate = memo(PageTemplate);\nMemoizedPageTemplate.displayName = \"PageTemplate\";\n\nexport { MemoizedPageTemplate as PageTemplate };\n"],"mappings":"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"}
+{"version":3,"file":"PageTemplate.js","names":["memo","styled","useOdysseyDesignTokens","DocumentationIcon","Heading4","Subordinate","Link","useHasUiShell","jsx","_jsx","jsxs","_jsxs","TemplateContainer","shouldForwardProp","prop","hasUiShell","isFullWidth","odysseyDesignTokens","maxWidth","Spacing6","marginInline","padding","TemplateHeader","display","alignItems","justifyContent","TemplateHeaderPrimaryContent","marginBlockEnd","TemplateHeaderSecondaryContent","flexDirection","gap","Spacing2","minHeight","Spacing7","TemplateHeaderButtons","TemplateContent","includes","isDrawerOpen","drawerVariant","gridTemplateColumns","gridGap","Spacing4","marginBlock","animation","PageTemplate","children","description","documentationLink","documentationText","drawer","primaryCallToActionComponent","secondaryCallToActionComponent","tertiaryCallToActionComponent","title","isOpen","variant","props","href","icon","MemoizedPageTemplate","displayName"],"sources":["../../src/labs/PageTemplate.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 { memo, ReactElement, ReactNode } from \"react\";\nimport styled from \"@emotion/styled\";\n\nimport {\n  DesignTokens,\n  useOdysseyDesignTokens,\n} from \"../OdysseyDesignTokensContext\";\nimport { DocumentationIcon } from \"../icons.generated\";\nimport { Heading4, Subordinate } from \"../Typography\";\nimport { Link } from \"../Link\";\nimport { useHasUiShell } from \"./UiShell\";\n\nexport type PageTemplateProps = {\n  /**\n   * The title of the layout to be situated in the layout header\n   */\n  title?: string;\n  /**\n   * A supplementary description to be situated in the layout header\n   */\n  description?: string;\n  /**\n   * The destination for a documentation `Link` to be situated in the layout header\n   */\n  documentationLink?: string;\n  /**\n   * The text for a documentation `Link` to be situated in the layout header\n   */\n  documentationText?: string;\n  /**\n   * An optional `Drawer` object. Can be of variant 'temporary' or 'persistent'.\n   */\n  drawer?: ReactElement;\n  /**\n   * An optional `Button` object to be situated in the layout header. Should almost always be of variant `primary`.\n   */\n  primaryCallToActionComponent?: ReactElement;\n  /**\n   * An optional `Button` object to be situated in the layout header, alongside the `callToActionPrimaryComponent`.\n   */\n  secondaryCallToActionComponent?: ReactElement;\n  /**\n   * An optional `Button` object to be situated in the layout header, alongside the other two `callToAction` components.\n   */\n  tertiaryCallToActionComponent?: ReactElement;\n  /**\n   * The content of the layout. May be a `string` or any other `ReactNode` or array of `ReactNode`s. Will often be `Grid` objects.\n   */\n  children?: ReactNode;\n  /**\n   * When set to `true`, the layout expands past its max width of 1440px and spans the entire available screen width.\n   */\n  isFullWidth?: boolean;\n};\n\ntype TemplateContentProps = {\n  odysseyDesignTokens: DesignTokens;\n  isDrawerOpen?: boolean;\n  drawerVariant?: string;\n};\n\nconst TemplateContainer = styled(\"div\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" &&\n    prop !== \"hasUiShell\" &&\n    prop !== \"isFullWidth\",\n})<{\n  hasUiShell: boolean;\n  isFullWidth: boolean;\n  odysseyDesignTokens: DesignTokens;\n}>(({ hasUiShell, isFullWidth, odysseyDesignTokens }) => ({\n  maxWidth: isFullWidth\n    ? \"100%\"\n    : `calc(1440px + ${odysseyDesignTokens.Spacing6} + ${odysseyDesignTokens.Spacing6})`,\n  marginInline:\n    isFullWidth && !hasUiShell ? odysseyDesignTokens.Spacing6 : \"auto\",\n  padding: hasUiShell ? 0 : odysseyDesignTokens.Spacing6,\n}));\n\nconst TemplateHeader = styled(\"div\")(() => ({\n  display: \"flex\",\n  alignItems: \"flex-end\",\n  justifyContent: \"space-between\",\n}));\n\nconst TemplateHeaderPrimaryContent = styled(\"div\")(() => ({\n  [\".MuiTypography-root:last-child\"]: {\n    marginBlockEnd: \"0\",\n  },\n}));\n\nconst TemplateHeaderSecondaryContent = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n}>(({ odysseyDesignTokens }) => ({\n  alignItems: \"flex-end\",\n  display: \"flex\",\n  flexDirection: \"column\",\n  gap: odysseyDesignTokens.Spacing2,\n  minHeight: odysseyDesignTokens.Spacing7,\n  justifyContent: \"center\",\n}));\n\nconst TemplateHeaderButtons = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n}>(({ odysseyDesignTokens }) => ({\n  display: \"flex\",\n  gap: odysseyDesignTokens.Spacing2,\n}));\n\nconst TemplateContent = styled(\"div\", {\n  shouldForwardProp: (prop) =>\n    ![\"odysseyDesignTokens\", \"isDrawerOpen\", \"drawerVariant\"].includes(prop),\n})<TemplateContentProps>(\n  ({ odysseyDesignTokens, isDrawerOpen, drawerVariant }) => ({\n    \"@keyframes animate-drawer-open\": {\n      \"0%\": {\n        gridTemplateColumns: \"minmax(0, 1fr) 0\",\n      },\n      \"100%\": {\n        gridTemplateColumns: \"minmax(0, 1fr) 360px\",\n      },\n    },\n    \"@keyframes animate-drawer-close\": {\n      \"0%\": {\n        gridTemplateColumns: \"minmax(0, 1fr) 360px\",\n      },\n      \"100%\": {\n        gridTemplateColumns: \"minmax(0, 1fr) 0\",\n      },\n    },\n    display: \"grid\",\n    gridGap:\n      drawerVariant === \"persistent\" && !isDrawerOpen\n        ? 0\n        : odysseyDesignTokens.Spacing4,\n    gap:\n      drawerVariant === \"persistent\" && !isDrawerOpen\n        ? 0\n        : odysseyDesignTokens.Spacing4,\n    marginBlock: odysseyDesignTokens.Spacing4,\n    gridTemplateColumns:\n      drawerVariant === \"persistent\"\n        ? isDrawerOpen\n          ? \"minmax(0, 1fr) 360px\"\n          : \"minmax(0, 1fr) 0\"\n        : \"minmax(0, 1fr)\",\n    animation:\n      drawerVariant === \"persistent\" && isDrawerOpen\n        ? \"animate-drawer-open 225ms cubic-bezier(0, 0, 0.2, 1)\"\n        : \"animate-drawer-close 225ms cubic-bezier(0, 0, 0.2, 1)\",\n  }),\n);\n\nconst PageTemplate = ({\n  children,\n  description,\n  documentationLink,\n  documentationText,\n  drawer,\n  isFullWidth = false,\n  primaryCallToActionComponent,\n  secondaryCallToActionComponent,\n  tertiaryCallToActionComponent,\n  title,\n}: PageTemplateProps) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n  const { isOpen: isDrawerOpen, variant: drawerVariant } = drawer?.props ?? {};\n\n  const hasUiShell = useHasUiShell();\n\n  return (\n    <TemplateContainer\n      hasUiShell={hasUiShell}\n      isFullWidth={isFullWidth}\n      odysseyDesignTokens={odysseyDesignTokens}\n    >\n      <TemplateHeader>\n        <TemplateHeaderPrimaryContent>\n          {title && <Heading4>{title}</Heading4>}\n          {description && <Subordinate>{description}</Subordinate>}\n        </TemplateHeaderPrimaryContent>\n\n        <TemplateHeaderSecondaryContent\n          odysseyDesignTokens={odysseyDesignTokens}\n        >\n          {documentationLink && (\n            <Link href={documentationLink} icon={<DocumentationIcon />}>\n              {documentationText}\n            </Link>\n          )}\n          {(primaryCallToActionComponent ||\n            secondaryCallToActionComponent ||\n            tertiaryCallToActionComponent) && (\n            <TemplateHeaderButtons odysseyDesignTokens={odysseyDesignTokens}>\n              {tertiaryCallToActionComponent}\n              {secondaryCallToActionComponent}\n              {primaryCallToActionComponent}\n            </TemplateHeaderButtons>\n          )}\n        </TemplateHeaderSecondaryContent>\n      </TemplateHeader>\n      <TemplateContent\n        odysseyDesignTokens={odysseyDesignTokens}\n        isDrawerOpen={isDrawerOpen}\n        drawerVariant={drawerVariant}\n      >\n        {children}\n        {drawer}\n      </TemplateContent>\n    </TemplateContainer>\n  );\n};\n\nconst MemoizedPageTemplate = memo(PageTemplate);\nMemoizedPageTemplate.displayName = \"PageTemplate\";\n\nexport { MemoizedPageTemplate as PageTemplate };\n"],"mappings":"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"}