npm - @okta/odyssey-react-mui - Versions diffs - 1.28.1 → 1.29.0 - Mend

@okta/odyssey-react-mui 1.28.1 → 1.29.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (326) hide show

package/dist/labs/{useOdysseyDateFields.js → DatePickers/useOdysseyDateFields.js} RENAMED Viewed

@@ -13,7 +13,8 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { DateTime } from "luxon";
 import { useTranslation } from "react-i18next";
-import { ComponentControlledState, getControlState } from "../inputUtils.js";
+import { ArrowLeftIcon, ArrowRightIcon, CalendarIcon, ChevronDownIcon } from "../../icons.generated/index.js";
+import { ComponentControlledState, getControlState } from "../../inputUtils.js";
 import { useDateFieldsTranslations } from "./useDateFieldsTranslations.js";
 const {
   CONTROLLED
@@ -27,11 +28,14 @@ export const useOdysseyDateFields = ({
   isYearEnabled = () => true,
   minDate: minDateProp,
   maxDate: maxDateProp,
+  onInputChange: onInputChangeProp,
   timeZone = "system",
   value
 }) => {
-  const internalValueRef = useRef(null);
+  const [isOpen, setIsOpen] = useState(false);
+  const [popperElement, setPopperElement] = useState();
   const [internalTimeZone, setInternalTimeZone] = useState(timeZone);
+  const internalValueRef = useRef(null);
   const [validationDateRanges, setValidationDateRanges] = useState({
     minDate: undefined,
     maxDate: undefined
@@ -82,20 +86,49 @@ export const useOdysseyDateFields = ({
     }
     return null;
   }, [defaultValue, validationDateRanges, value]);
+  const onTimeZoneChange = useCallback(timeZone => {
+    if (timeZone && isValidTimeZone(timeZone)) {
+      setInternalTimeZone(timeZone);
+    }
+  }, [isValidTimeZone, setInternalTimeZone]);
+  const toggleCalendarVisibility = useCallback(() => setIsOpen(!isOpen), [isOpen, setIsOpen]);
+  const closeCalendar = useCallback(() => {
+    setIsOpen(false);
+  }, [setIsOpen]);
+  const formatDayOfWeek = date => date.toFormat("EEE");
+  const onInputChange = useCallback(value => {
+    onInputChangeProp?.(value);
+  }, [onInputChangeProp]);
+  const commonIcons = {
+    ArrowLeftIcon: ArrowLeftIcon,
+    ArrowRightIcon: ArrowRightIcon,
+    CalendarIcon: CalendarIcon,
+    ChevronDownIcon: ChevronDownIcon
+  };
   return {
+    closeCalendar,
+    commonIcons,
     defaultedLanguageCode,
     formatDateTimeToUtcIsoDateString,
+    formatDayOfWeek,
     inputValues,
     internalTimeZone,
     internalValueRef,
+    isOpen,
     isValidTimeZone,
     localeText,
     maxDate: validationDateRanges.maxDate,
     minDate: validationDateRanges.minDate,
+    popperElement,
+    onInputChange,
+    onTimeZoneChange,
     setInternalTimeZone,
+    setIsOpen,
+    setPopperElement,
     shouldDisableDate,
     shouldDisableMonth,
-    shouldDisableYear
+    shouldDisableYear,
+    toggleCalendarVisibility
   };
 };
 //# sourceMappingURL=useOdysseyDateFields.js.map

package/dist/labs/DatePickers/useOdysseyDateFields.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"useOdysseyDateFields.js","names":["useCallback","useEffect","useMemo","useRef","useState","DateTime","useTranslation","ArrowLeftIcon","ArrowRightIcon","CalendarIcon","ChevronDownIcon","ComponentControlledState","getControlState","useDateFieldsTranslations","CONTROLLED","isValidDateTime","dateTime","isValid","utcDateTimeFromIsoString","dateString","fromISO","toUTC","useOdysseyDateFields","defaultValue","isDateEnabled","isMonthEnabled","isYearEnabled","minDate","minDateProp","maxDate","maxDateProp","onInputChange","onInputChangeProp","timeZone","value","isOpen","setIsOpen","popperElement","setPopperElement","internalTimeZone","setInternalTimeZone","internalValueRef","validationDateRanges","setValidationDateRanges","undefined","startOf","i18n","language","invalidLocales","isInvalidLocale","includes","localeText","controlledStateRef","controlledValue","uncontrolledValue","defaultedLanguageCode","replaceAll","isValidTimeZone","local","setZone","formatDateTimeToUtcIsoDateString","toISO","shouldDisableDate","date","Date","toJSDate","shouldDisableMonth","shouldDisableYear","inputValues","current","valueAsUTCDateTime","defaultValueAsUTCDateTime","onTimeZoneChange","toggleCalendarVisibility","closeCalendar","formatDayOfWeek","toFormat","commonIcons"],"sources":["../../../src/labs/DatePickers/useOdysseyDateFields.ts"],"sourcesContent":["/*!\n * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport {\n FocusEventHandler,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport { DateTime } from \"luxon\";\nimport { useTranslation } from \"react-i18next\";\n\nimport { FieldComponentProps } from \"../../FieldComponentProps\";\nimport {\n ArrowLeftIcon,\n ArrowRightIcon,\n CalendarIcon,\n ChevronDownIcon,\n} from \"../../icons.generated\";\nimport { ComponentControlledState, getControlState } from \"../../inputUtils\";\nimport { TimeZoneOption, TimeZonePickerProps } from \"../TimeZonePicker\";\nimport { useDateFieldsTranslations } from \"./useDateFieldsTranslations\";\n\nconst { CONTROLLED } = ComponentControlledState;\n\nconst isValidDateTime = (dateTime: DateTime) => dateTime.isValid;\n\nconst utcDateTimeFromIsoString = (dateString: string) =>\n DateTime.fromISO(dateString).toUTC();\n\nexport type OdysseyDateFieldProps = {\n /**\n * default value when uncontrolled.\n *\n * NOTE: Must be a date string in ISO format\n */\n defaultValue?: string;\n /**\n * Disable specific date(s).\n *\n * Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.\n */\n isDateEnabled?: (date: Date) => boolean;\n /**\n * Disable specific month(s).\n */\n isMonthEnabled?: (date: Date) => boolean;\n /**\n * Disable specific year(s).\n */\n isYearEnabled?: (date: Date) => boolean;\n /**\n * The label for the `input` element.\n */\n label: string;\n /**\n * Minimum date allowed.\n *\n * NOTE: If not a valid date string in ISO format, `minDate` will not apply\n */\n minDate?: string;\n /**\n * Maximum date allowed.\n *\n * NOTE: If not a valid date string in ISO format, `maxDate` will not apply\n */\n maxDate?: string;\n /**\n * Callback fired when the a date field loses focus\n */\n onBlur?: FocusEventHandler<HTMLInputElement>;\n /**\n * Callback fired when the a date is selected with the calendar.\n */\n onCalendarDateChange?: ({\n value,\n timeZone,\n }: {\n value: string | undefined;\n timeZone: string;\n }) => void;\n /**\n * Callback fired when the date/text input changes.\n */\n onInputChange?: (value: string) => void;\n /**\n * a default timezone for the picker\n */\n timeZone?: string;\n /**\n * If provided, a `TimeZonePicker` will be rendered below the DatePicker. These options will populate as the Autocomplete options\n */\n timeZoneOptions?: TimeZoneOption[];\n /**\n * label for `TimeZonePicker`\n */\n timeZonePickerLabel?: TimeZonePickerProps[\"label\"];\n /**\n * value when controlled.\n *\n * NOTE: Must be a date string in ISO format or it will not be applied\n */\n value?: string;\n};\n\ntype FormatDateTimeToUtcIsoDateString = (value: DateTime) => string | undefined;\n\ntype ValidationDateRanges = {\n minDate?: DateTime;\n maxDate?: DateTime;\n};\n\nexport const useOdysseyDateFields = ({\n defaultValue,\n isDateEnabled = () => true,\n isMonthEnabled = () => true,\n isYearEnabled = () => true,\n minDate: minDateProp,\n maxDate: maxDateProp,\n onInputChange: onInputChangeProp,\n timeZone = \"system\",\n value,\n}: Pick<\n OdysseyDateFieldProps,\n | \"defaultValue\"\n | \"isDateEnabled\"\n | \"isMonthEnabled\"\n | \"isYearEnabled\"\n | \"minDate\"\n | \"maxDate\"\n | \"onInputChange\"\n | \"timeZone\"\n | \"value\"\n> &\n Pick<FieldComponentProps, \"errorMessage\">) => {\n const [isOpen, setIsOpen] = useState(false);\n const [popperElement, setPopperElement] = useState<HTMLInputElement | null>();\n const [internalTimeZone, setInternalTimeZone] = useState(timeZone);\n\n const internalValueRef = useRef<DateTime | null>(null);\n\n const [validationDateRanges, setValidationDateRanges] =\n useState<ValidationDateRanges>({\n minDate: undefined,\n maxDate: undefined,\n });\n\n useEffect(() => {\n const minDate = minDateProp ? DateTime.fromISO(minDateProp) : undefined;\n const maxDate = maxDateProp ? DateTime.fromISO(maxDateProp) : undefined;\n\n setValidationDateRanges({\n minDate:\n minDate && isValidDateTime(minDate)\n ? minDate.startOf(\"day\")\n : undefined,\n maxDate:\n maxDate && isValidDateTime(maxDate)\n ? maxDate.startOf(\"day\")\n : undefined,\n });\n }, [minDateProp, maxDateProp]);\n\n const { i18n } = useTranslation();\n const { language } = i18n;\n\n const invalidLocales = [\"ok_PL\", \"ok_SK\"];\n // In the Applitools env the language code is `en-us@posix`. Need to check for that\n const isInvalidLocale =\n invalidLocales.includes(language) || language.includes(\"@\");\n\n const localeText = useDateFieldsTranslations();\n\n const controlledStateRef = useRef(\n getControlState({\n controlledValue: value,\n uncontrolledValue: defaultValue,\n }),\n );\n\n const defaultedLanguageCode = isInvalidLocale\n ? \"en-US\"\n : language.replaceAll(\"_\", \"-\");\n\n const isValidTimeZone = (timeZone: string) =>\n DateTime.local().setZone(timeZone).isValid;\n\n const formatDateTimeToUtcIsoDateString =\n useCallback<FormatDateTimeToUtcIsoDateString>(\n (value) => value.toUTC().toISO() || undefined,\n [],\n );\n\n const shouldDisableDate = useCallback(\n (date: DateTime) => !isDateEnabled(new Date(date?.toJSDate())) || false,\n [isDateEnabled],\n );\n\n const shouldDisableMonth = useCallback(\n (date: DateTime) => !isMonthEnabled(new Date(date?.toJSDate())) || false,\n [isMonthEnabled],\n );\n\n const shouldDisableYear = useCallback(\n (date: DateTime) => !isYearEnabled(new Date(date?.toJSDate())) || false,\n [isYearEnabled],\n );\n\n const inputValues = useMemo(() => {\n if (value && controlledStateRef.current === CONTROLLED) {\n const valueAsUTCDateTime = utcDateTimeFromIsoString(value);\n\n if (isValidDateTime(valueAsUTCDateTime)) {\n return {\n value: valueAsUTCDateTime,\n };\n }\n }\n\n if (defaultValue) {\n const defaultValueAsUTCDateTime = utcDateTimeFromIsoString(defaultValue);\n\n if (isValidDateTime(defaultValueAsUTCDateTime)) {\n return {\n defaultValue: defaultValueAsUTCDateTime,\n };\n }\n }\n\n return null;\n }, [defaultValue, validationDateRanges, value]);\n\n const onTimeZoneChange = useCallback(\n (timeZone: string | undefined) => {\n if (timeZone && isValidTimeZone(timeZone)) {\n setInternalTimeZone(timeZone);\n }\n },\n [isValidTimeZone, setInternalTimeZone],\n );\n\n const toggleCalendarVisibility = useCallback(\n () => setIsOpen(!isOpen),\n [isOpen, setIsOpen],\n );\n\n const closeCalendar = useCallback(() => {\n setIsOpen(false);\n }, [setIsOpen]);\n\n const formatDayOfWeek = (date: DateTime) => date.toFormat(\"EEE\");\n\n const onInputChange = useCallback<(value: string) => void>(\n (value) => {\n onInputChangeProp?.(value);\n },\n [onInputChangeProp],\n );\n\n const commonIcons = {\n ArrowLeftIcon: ArrowLeftIcon,\n ArrowRightIcon: ArrowRightIcon,\n CalendarIcon: CalendarIcon,\n ChevronDownIcon: ChevronDownIcon,\n };\n\n return {\n closeCalendar,\n commonIcons,\n defaultedLanguageCode,\n formatDateTimeToUtcIsoDateString,\n formatDayOfWeek,\n inputValues,\n internalTimeZone,\n internalValueRef,\n isOpen,\n isValidTimeZone,\n localeText,\n maxDate: validationDateRanges.maxDate,\n minDate: validationDateRanges.minDate,\n popperElement,\n onInputChange,\n onTimeZoneChange,\n setInternalTimeZone,\n setIsOpen,\n setPopperElement,\n shouldDisableDate,\n shouldDisableMonth,\n shouldDisableYear,\n toggleCalendarVisibility,\n };\n};\n"],"mappings":"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"}

package/dist/labs/PageTemplate.js CHANGED Viewed

@@ -16,7 +16,7 @@ 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 { useHasUiShell } from "../ui-shell/UiShell/useHasUiShell.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const TemplateContainer = styled("div", {

package/dist/labs/PageTemplate.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"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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"}
1	+ {"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 \"../ui-shell/UiShell/useHasUiShell\";\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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"}

package/dist/labs/SideNav/SideNav.js CHANGED Viewed

@@ -23,6 +23,7 @@ import { SideNavFooterContent } from "./SideNavFooterContent.js";
 import { SideNavItemContentContext } from "./SideNavItemContentContext.js";
 import { SideNavToggleButton } from "./SideNavToggleButton.js";
 import { SortableList } from "./SortableList/SortableList.js";
+import { Overline } from "../../Typography.js";
 import { arrayMove } from "@dnd-kit/sortable";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -86,7 +87,7 @@ const StyledSideNav = styled("nav", {
     width: odysseyDesignTokens.Spacing2,
     zIndex: 2
   },
-  "&:has([data-sidenav-toggle='true']:hover), &:has([data-sidenav-toggle='true']:focus)": {
+  "&:has([data-sidenav-toggle='true']:hover), &:has([data-sidenav-toggle='true']:focus-visible)": {
     ...(isSideNavCollapsed && {
       "&::after": {
         opacity: 1,
@@ -119,15 +120,18 @@ const SideNavHeaderContainer = styled("div", {
 const SideNavListContainer = styled("ul")(() => ({
   padding: 0,
   listStyle: "none",
-  listStyleType: "none"
+  listStyleType: "none",
+  margin: 0
 }));
 const SideNavScrollableContainer = styled("div", {
   shouldForwardProp: prop => prop !== "odysseyDesignTokens"
 })(({
   odysseyDesignTokens
 }) => ({
+  display: "grid",
+  gridTemplateRows: "1fr max-content",
   flex: "1 1 100%",
-  overflowY: "auto",
+  overflowY: "scroll",
   paddingInline: odysseyDesignTokens.Spacing2
 }));
 const SectionHeaderContainer = styled("li", {
@@ -136,30 +140,29 @@ const SectionHeaderContainer = styled("li", {
   odysseyDesignTokens
 }) => ({
   paddingBlock: odysseyDesignTokens.Spacing1,
-  paddingInline: odysseyDesignTokens.Spacing4
+  paddingInline: odysseyDesignTokens.Spacing4,
+  marginBlock: `${odysseyDesignTokens.Spacing3}`,
+  color: odysseyDesignTokens.HueNeutral600
 }));
-const SectionHeader = styled("h3", {
+const SideNavFooter = styled("div", {
   shouldForwardProp: prop => prop !== "odysseyDesignTokens"
 })(({
   odysseyDesignTokens
 }) => ({
-  fontFamily: odysseyDesignTokens.TypographyFamilyHeading,
-  fontSize: odysseyDesignTokens.TypographySizeOverline,
-  fontWeight: odysseyDesignTokens.TypographyWeightHeadingBold,
-  color: odysseyDesignTokens.HueNeutral600,
-  textTransform: "uppercase"
+  flexShrink: 0,
+  padding: odysseyDesignTokens.Spacing4,
+  backgroundColor: odysseyDesignTokens.HueNeutralWhite
 }));
-const SideNavFooter = styled("div", {
+const PersistentSideNavFooter = styled(SideNavFooter, {
   shouldForwardProp: prop => prop !== "isContentScrollable" && prop !== "odysseyDesignTokens"
 })(({
   isContentScrollable,
   odysseyDesignTokens
 }) => ({
-  flexShrink: 0,
   transitionProperty: "box-shadow",
   transitionDuration: odysseyDesignTokens.TransitionDurationMain,
   transitionTiming: odysseyDesignTokens.TransitionTimingMain,
-  backgroundColor: odysseyDesignTokens.HueNeutralWhite,
+  zIndex: 2,
   ...(isContentScrollable && {
     boxShadow: "0px -8px 8px -8px rgba(39, 39, 39, 0.08)"
   })
@@ -169,19 +172,19 @@ const SideNavFooterItemsContainer = styled("div", {
 })(({
   odysseyDesignTokens
 }) => ({
-  paddingBlock: odysseyDesignTokens.Spacing4,
-  paddingInline: odysseyDesignTokens.Spacing5,
   display: "flex",
   flexWrap: "wrap",
   alignItems: "center",
   fontSize: odysseyDesignTokens.TypographySizeOverline,
-  a: {
-    color: `${odysseyDesignTokens.TypographyColorHeading} !important`,
-    "&:hover": {
-      textDecoration: "none"
-    },
+  "a, span": {
+    color: odysseyDesignTokens.HueNeutral600,
+    transition: `color ${odysseyDesignTokens.TransitionDurationMain}`,
     "&:visited": {
-      color: odysseyDesignTokens.TypographyColorHeading
+      color: odysseyDesignTokens.HueNeutral600
+    },
+    "&:hover": {
+      textDecoration: "none",
+      color: odysseyDesignTokens.HueNeutral900
     }
   }
 }));
@@ -226,8 +229,8 @@ const SideNav = ({
   sideNavItems
 }) => {
   const [isSideNavCollapsed, setSideNavCollapsed] = useState(false);
-  const [isContentScrollable, setIsContentScrollable] = useState(false);
   const [hasContentScrolled, setHasContentScrolled] = useState(false);
+  const [isContentScrollable, setIsContentScrollable] = useState(false);
   const scrollableContentRef = useRef(null);
   const resizeObserverRef = useRef(null);
   const intersectionObserverRef = useRef(null);
@@ -390,10 +393,10 @@ const SideNav = ({
               isLoading: isLoading,
               logoProps: logoProps
             })
-          }), _jsx(SideNavScrollableContainer, {
+          }), _jsxs(SideNavScrollableContainer, {
             odysseyDesignTokens: odysseyDesignTokens,
             "data-se": "scrollable-region",
-            children: _jsx(SideNavListContainer, {
+            children: [_jsx(SideNavListContainer, {
               role: "none",
               ref: scrollableContentRef,
               children: isLoading ? [...Array(6)].map((_, index) => _jsx(LoadingItem, {}, index)) : processedSideNavItems?.map(item => {
@@ -412,8 +415,8 @@ const SideNav = ({
                   return _jsx(SectionHeaderContainer, {
                     id: id,
                     odysseyDesignTokens: odysseyDesignTokens,
-                    children: _jsx(SectionHeader, {
-                      odysseyDesignTokens: odysseyDesignTokens,
+                    children: _jsx(Overline, {
+                      component: "h3",
                       children: label
                     })
                   }, id);
@@ -458,16 +461,19 @@ const SideNav = ({
                   }, item.id);
                 }
               })
-            })
-          }), !isLoading && (footerItems || hasCustomFooter) && _jsx(SideNavFooter, {
-            odysseyDesignTokens: odysseyDesignTokens,
-            isContentScrollable: isContentScrollable,
-            children: hasCustomFooter ? footerComponent : footerItems && _jsx(SideNavFooterItemsContainer, {
+            }), !isLoading && footerItems && !hasCustomFooter && _jsx(SideNavFooter, {
               odysseyDesignTokens: odysseyDesignTokens,
-              children: _jsx(SideNavFooterContent, {
-                footerItems: footerItems
+              children: _jsx(SideNavFooterItemsContainer, {
+                odysseyDesignTokens: odysseyDesignTokens,
+                children: _jsx(SideNavFooterContent, {
+                  footerItems: footerItems
+                })
               })
-            })
+            })]
+          }), !isLoading && !footerItems && hasCustomFooter && _jsx(PersistentSideNavFooter, {
+            isContentScrollable: isContentScrollable,
+            odysseyDesignTokens: odysseyDesignTokens,
+            children: footerComponent
           })]
         })
       })

package/dist/labs/SideNav/SideNav.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SideNav.js","names":["styled","memo","useMemo","useState","useCallback","useRef","useEffect","useTranslation","NavAccordion","useOdysseyDesignTokens","OdysseyThemeProvider","SideNavHeader","SideNavItemContent","StyledSideNavListItem","SideNavFooterContent","SideNavItemContentContext","SideNavToggleButton","SortableList","arrayMove","jsx","_jsx","jsxs","_jsxs","createElement","_createElement","DEFAULT_SIDE_NAV_WIDTH","SIDENAV_COLLAPSE_ICON_POSITION","StyledCollapsibleContent","shouldForwardProp","prop","odysseyDesignTokens","isSideNavCollapsed","position","display","gridTemplateColumns","height","transition","TransitionDurationMain","transitionTimingFunction","TransitionTimingMain","overflow","opacity","StyledOpacityTransitionContainer","gridTemplateRows","StyledSideNav","backgroundColor","HueNeutralWhite","HueNeutral200","content","right","top","transform","width","Spacing2","zIndex","Spacing3","SideNavHeaderContainer","hasContentScrolled","flexShrink","borderBottom","BorderWidthMain","BorderStyleMain","HueNeutral50","SideNavListContainer","padding","listStyle","listStyleType","SideNavScrollableContainer","flex","overflowY","paddingInline","SectionHeaderContainer","paddingBlock","Spacing1","Spacing4","SectionHeader","fontFamily","TypographyFamilyHeading","fontSize","TypographySizeOverline","fontWeight","TypographyWeightHeadingBold","color","HueNeutral600","textTransform","SideNavFooter","isContentScrollable","transitionProperty","transitionDuration","transitionTiming","boxShadow","SideNavFooterItemsContainer","Spacing5","flexWrap","alignItems","a","TypographyColorHeading","textDecoration","LoadingItemContainer","gap","getHasScrollableContent","scrollableContainer","scrollHeight","clientHeight","LoadingItem","children","_Skeleton","variant","SideNav","appName","footerComponent","footerItems","hasCustomFooter","isCollapsible","isCompact","isLoading","logoProps","onCollapse","onExpand","onSort","sideNavItems","setSideNavCollapsed","setIsContentScrollable","setHasContentScrolled","scrollableContentRef","resizeObserverRef","intersectionObserverRef","t","sideNavItemsList","updateSideNavItemsList","updateIsContentScrollable","current","parentElement","resizeObserverDebounceTimer","ResizeObserver","cancelAnimationFrame","requestAnimationFrame","observe","IntersectionObserver","entries","isIntersecting","slice","sort","b","time","at","root","threshold","ulElement","liElement","Array","from","disconnect","scrollIntoViewRef","firstSideNavItemIdWithIsSelected","flattenedItems","flatMap","sideNavItem","nestedNavItems","firstItemWithIsSelected","find","isSelected","id","scrollIntoView","getRefIfThisIsFirstNodeWithIsSelected","itemId","undefined","sideNavItemContentProviderValue","depth","setSelectedItem","selectedItemId","updatedSideNavItems","map","item","childItem","processedSideNavItems","childNavItems","childProps","isDisabled","navItem","Provider","value","isSortable","scrollRef","onItemSelected","sideNavExpandClickHandler","sideNavExpandKeyHandler","event","key","code","preventDefault","setSortedItems","parentId","activeIndex","overIndex","sortedSideNavItems","ariaControls","onClick","onKeyDown","role","ref","_","index","label","isSectionHeader","startIcon","isDefaultExpanded","isExpanded","disabled","items","onChange","renderItem","sortableItem","Item","MemoizedSideNav","displayName"],"sources":["../../../src/labs/SideNav/SideNav.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 styled, { CSSObject } from \"@emotion/styled\";\nimport {\n memo,\n useMemo,\n useState,\n useCallback,\n useRef,\n useEffect,\n KeyboardEventHandler,\n} from \"react\";\nimport { Skeleton } from \"@mui/material\";\nimport { useTranslation } from \"react-i18next\";\n\nimport { NavAccordion } from \"./NavAccordion\";\nimport {\n DesignTokens,\n useOdysseyDesignTokens,\n} from \"../../OdysseyDesignTokensContext\";\nimport { OdysseyThemeProvider } from \"../../OdysseyThemeProvider\";\nimport type { SideNavProps } from \"./types\";\nimport { SideNavHeader } from \"./SideNavHeader\";\nimport {\n SideNavItemContent,\n StyledSideNavListItem,\n} from \"./SideNavItemContent\";\nimport { SideNavFooterContent } from \"./SideNavFooterContent\";\nimport { SideNavItemContentContext } from \"./SideNavItemContentContext\";\nimport { SideNavToggleButton } from \"./SideNavToggleButton\";\nimport { SortableList } from \"./SortableList/SortableList\";\n// eslint-disable-next-line import/no-extraneous-dependencies\nimport { arrayMove } from \"@dnd-kit/sortable\";\n\nexport const DEFAULT_SIDE_NAV_WIDTH = \"300px\";\n\n// The side nav collapse icon is placed absolutely from the top (Logo container + nav header height)\n// to align it in the middle of the nav header text\nexport const SIDENAV_COLLAPSE_ICON_POSITION = \"77px\";\n\nconst StyledCollapsibleContent = styled(\"div\", {\n shouldForwardProp: (prop) =>\n prop !== \"odysseyDesignTokens\" && prop !== \"isSideNavCollapsed\",\n})(\n ({\n odysseyDesignTokens,\n isSideNavCollapsed,\n }: {\n odysseyDesignTokens: DesignTokens;\n isSideNavCollapsed: boolean;\n }) => ({\n position: \"relative\",\n display: \"inline-grid\",\n gridTemplateColumns: DEFAULT_SIDE_NAV_WIDTH,\n // gridTemplateRows: \"max-content 1fr max-content\",\n height: \"100%\",\n transition: `grid-template-columns ${odysseyDesignTokens.TransitionDurationMain}, opacity 300ms`,\n transitionTimingFunction: odysseyDesignTokens.TransitionTimingMain,\n overflow: \"hidden\",\n\n ...(isSideNavCollapsed && {\n gridTemplateColumns: 0,\n opacity: 0,\n }),\n }),\n);\n\nconst StyledOpacityTransitionContainer = styled(\"div\", {\n shouldForwardProp: (prop) =>\n prop !== \"odysseyDesignTokens\" && prop !== \"isSideNavCollapsed\",\n})(\n ({\n odysseyDesignTokens,\n isSideNavCollapsed,\n }: {\n odysseyDesignTokens: DesignTokens;\n isSideNavCollapsed: boolean;\n }) => ({\n display: \"inline-grid\",\n gridTemplateRows: \"max-content 1fr max-content\",\n height: \"100%\",\n transition: `opacity 50ms`,\n transitionTimingFunction: odysseyDesignTokens.TransitionTimingMain,\n overflow: \"hidden\",\n\n ...(isSideNavCollapsed && {\n opacity: 0,\n }),\n }),\n);\n\nconst StyledSideNav = styled(\"nav\", {\n shouldForwardProp: (prop) =>\n prop !== \"odysseyDesignTokens\" && prop !== \"isSideNavCollapsed\",\n})(\n ({\n odysseyDesignTokens,\n isSideNavCollapsed,\n }: {\n odysseyDesignTokens: DesignTokens;\n isSideNavCollapsed: boolean;\n }) => ({\n position: \"relative\",\n display: \"inline-block\",\n height: \"100%\",\n backgroundColor: odysseyDesignTokens.HueNeutralWhite,\n\n \"&::after\": {\n backgroundColor: odysseyDesignTokens.HueNeutral200,\n content: \"''\",\n height: \"100%\",\n opacity: 0,\n position: \"absolute\",\n right: 0,\n top: 0,\n transform: `translateX(0)`,\n transition: `opacity ${odysseyDesignTokens.TransitionDurationMain}, transform ${odysseyDesignTokens.TransitionDurationMain}`,\n width: odysseyDesignTokens.Spacing2,\n zIndex: 2,\n },\n\n \"&:has([data-sidenav-toggle='true']:hover), &:has([data-sidenav-toggle='true']:focus)\":\n {\n ...(isSideNavCollapsed && {\n \"&::after\": {\n opacity: 1,\n transform: `translateX(100%)`,\n },\n\n \"[data-sidenav-toggle='true']\": {\n transform: `translate3d(calc(100% + ${odysseyDesignTokens.Spacing3}), 0, 0)`,\n },\n }),\n },\n\n \"[data-sidenav-toggle='true']\": {\n position: \"absolute\",\n top: SIDENAV_COLLAPSE_ICON_POSITION,\n right: 0,\n transition: `transform ${odysseyDesignTokens.TransitionDurationMain}`,\n transform: `translate3d(100%, 0, 0)`,\n },\n }),\n);\n\nconst SideNavHeaderContainer = styled(\"div\", {\n shouldForwardProp: (prop) =>\n prop !== \"hasContentScrolled\" && prop !== \"odysseyDesignTokens\",\n})(\n ({\n hasContentScrolled,\n odysseyDesignTokens,\n }: {\n hasContentScrolled: boolean;\n odysseyDesignTokens: DesignTokens;\n }) => ({\n flexShrink: 0,\n // The bottom border should appear only if the scrollable region has been scrolled\n ...(hasContentScrolled &&\n ({\n borderBottom: `${odysseyDesignTokens.BorderWidthMain} ${odysseyDesignTokens.BorderStyleMain} ${odysseyDesignTokens.HueNeutral50}`,\n } satisfies CSSObject)),\n }),\n);\n\nconst SideNavListContainer = styled(\"ul\")(() => ({\n padding: 0,\n listStyle: \"none\",\n listStyleType: \"none\",\n}));\n\nconst SideNavScrollableContainer = styled(\"div\", {\n shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})(({ odysseyDesignTokens }: { odysseyDesignTokens: DesignTokens }) => ({\n flex: \"1 1 100%\",\n overflowY: \"auto\",\n paddingInline: odysseyDesignTokens.Spacing2,\n}));\n\nconst SectionHeaderContainer = styled(\"li\", {\n shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})(({ odysseyDesignTokens }: { odysseyDesignTokens: DesignTokens }) => ({\n paddingBlock: odysseyDesignTokens.Spacing1,\n paddingInline: odysseyDesignTokens.Spacing4,\n}));\n\nconst SectionHeader = styled(\"h3\", {\n shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})(({ odysseyDesignTokens }: { odysseyDesignTokens: DesignTokens }) => ({\n fontFamily: odysseyDesignTokens.TypographyFamilyHeading,\n fontSize: odysseyDesignTokens.TypographySizeOverline,\n fontWeight: odysseyDesignTokens.TypographyWeightHeadingBold,\n color: odysseyDesignTokens.HueNeutral600,\n textTransform: \"uppercase\",\n}));\n\nconst SideNavFooter = styled(\"div\", {\n shouldForwardProp: (prop) =>\n prop !== \"isContentScrollable\" && prop !== \"odysseyDesignTokens\",\n})(\n ({\n isContentScrollable,\n odysseyDesignTokens,\n }: {\n isContentScrollable: boolean;\n odysseyDesignTokens: DesignTokens;\n }) => ({\n flexShrink: 0,\n transitionProperty: \"box-shadow\",\n transitionDuration: odysseyDesignTokens.TransitionDurationMain,\n transitionTiming: odysseyDesignTokens.TransitionTimingMain,\n backgroundColor: odysseyDesignTokens.HueNeutralWhite,\n // The box shadow should appear above the footer only if the scrollable region has overflow\n ...(isContentScrollable && {\n boxShadow: \"0px -8px 8px -8px rgba(39, 39, 39, 0.08)\",\n }),\n }),\n);\n\nconst SideNavFooterItemsContainer = styled(\"div\", {\n shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})(({ odysseyDesignTokens }: { odysseyDesignTokens: DesignTokens }) => ({\n paddingBlock: odysseyDesignTokens.Spacing4,\n // paddingBlockEnd: odysseyDesignTokens.Spacing4,\n paddingInline: odysseyDesignTokens.Spacing5,\n display: \"flex\",\n flexWrap: \"wrap\",\n alignItems: \"center\",\n fontSize: odysseyDesignTokens.TypographySizeOverline,\n\n a: {\n color: `${odysseyDesignTokens.TypographyColorHeading} !important`,\n\n \"&:hover\": {\n textDecoration: \"none\",\n },\n \"&:visited\": {\n color: odysseyDesignTokens.TypographyColorHeading,\n },\n },\n}));\n\nconst LoadingItemContainer = styled(\"div\", {\n shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})(({ odysseyDesignTokens }: { odysseyDesignTokens: DesignTokens }) => ({\n alignItems: \"center\",\n display: \"flex\",\n gap: odysseyDesignTokens.Spacing2,\n paddingBlock: odysseyDesignTokens.Spacing2,\n paddingInline: odysseyDesignTokens.Spacing4,\n}));\n\nconst getHasScrollableContent = (scrollableContainer: HTMLElement) =>\n scrollableContainer.scrollHeight > scrollableContainer.clientHeight;\n\nconst LoadingItem = () => {\n const odysseyDesignTokens: DesignTokens = useOdysseyDesignTokens();\n return (\n <LoadingItemContainer odysseyDesignTokens={odysseyDesignTokens}>\n <Skeleton\n variant=\"circular\"\n width={odysseyDesignTokens.Spacing4}\n height={odysseyDesignTokens.Spacing4}\n />\n <Skeleton variant=\"rounded\" width=\"100%\" />\n </LoadingItemContainer>\n );\n};\n\nconst SideNav = ({\n appName,\n footerComponent,\n footerItems,\n hasCustomFooter,\n isCollapsible,\n isCompact,\n isLoading,\n logoProps,\n onCollapse,\n onExpand,\n onSort,\n sideNavItems,\n}: SideNavProps) => {\n const [isSideNavCollapsed, setSideNavCollapsed] = useState(false);\n const [isContentScrollable, setIsContentScrollable] = useState(false);\n const [hasContentScrolled, setHasContentScrolled] = useState(false);\n const scrollableContentRef = useRef<HTMLUListElement>(null);\n const resizeObserverRef = useRef<ResizeObserver \| null>(null);\n const intersectionObserverRef = useRef<IntersectionObserver \| null>(null);\n const odysseyDesignTokens: DesignTokens = useOdysseyDesignTokens();\n const { t } = useTranslation();\n const [sideNavItemsList, updateSideNavItemsList] = useState(sideNavItems);\n\n // The default value (sideNavItems) passed to useState is ONLY used by the useState hook for\n // the very first value. Subsequent updates to the prop (sideNavItems) need to cause the state\n // to update!\n useEffect(() => updateSideNavItemsList(sideNavItems), [sideNavItems]);\n\n useEffect(() => {\n // This is called directly in this effect AND perhaps as a result of the ResizeObserver\n const updateIsContentScrollable = () => {\n if (\n scrollableContentRef.current &&\n scrollableContentRef.current.parentElement\n ) {\n setIsContentScrollable(\n getHasScrollableContent(scrollableContentRef.current.parentElement),\n );\n }\n };\n\n // If the window is resized, we may need to re-determine if the scrollable container has overflow\n // Setup a ResizeObserver to know if the size of the scrollableContent changes\n let resizeObserverDebounceTimer: ReturnType<typeof requestAnimationFrame>;\n if (!resizeObserverRef.current) {\n resizeObserverRef.current = new ResizeObserver(() => {\n cancelAnimationFrame(resizeObserverDebounceTimer);\n resizeObserverDebounceTimer = requestAnimationFrame(\n updateIsContentScrollable,\n );\n });\n }\n\n if (resizeObserverRef.current && scrollableContentRef.current) {\n // Observe the <ul> itself (in case it changes size due to the content expanding)\n resizeObserverRef.current.observe(scrollableContentRef.current);\n if (scrollableContentRef.current.parentElement) {\n // ALSO observe the parent (<SideNavScrollableContainer>) in case the window resizes\n resizeObserverRef.current.observe(\n scrollableContentRef.current.parentElement,\n );\n }\n }\n\n // Determine if the scrollable container has overflow or not on load\n updateIsContentScrollable();\n\n // Finally, we only want to have the border on the bottom of the header iff the user has scrolled\n // the scrollable container\n if (!intersectionObserverRef.current && scrollableContentRef.current) {\n intersectionObserverRef.current = new IntersectionObserver(\n (entries) => {\n // If isIntersecting is true, then we're at the top of the scroll container\n // If isIntersecting is false, some scrolling has occurred.\n // The entries must be sorted by time and we only really need to look at the latest one\n const isIntersecting = entries\n .slice()\n .sort((a, b) => a.time - b.time)\n .at(0)?.isIntersecting;\n setHasContentScrolled(!isIntersecting);\n },\n {\n root: scrollableContentRef.current.parentElement,\n threshold: 1.0,\n },\n );\n }\n\n if (intersectionObserverRef.current && scrollableContentRef.current) {\n const ulElement = scrollableContentRef.current;\n const [liElement] = Array.from(ulElement?.children \|\| []);\n\n if (liElement) {\n intersectionObserverRef.current.observe(liElement);\n }\n }\n\n // Cleanup when unmounted:\n return () => {\n if (resizeObserverRef.current) {\n resizeObserverRef.current.disconnect();\n resizeObserverRef.current = null;\n }\n if (intersectionObserverRef.current) {\n intersectionObserverRef.current.disconnect();\n intersectionObserverRef.current = null;\n }\n cancelAnimationFrame(resizeObserverDebounceTimer); // Ensure timer is cleared on component unmount\n };\n }, [sideNavItemsList]);\n\n const scrollIntoViewRef = useRef<HTMLLIElement>(null);\n /\n Look through the sideNavItems and determine which is the first node\n * with isSelected. This should be the node we set a ref on in order to\n * call scrollIntoView in the effect\n /\n const firstSideNavItemIdWithIsSelected = useMemo(() => {\n const flattenedItems = sideNavItemsList.flatMap((sideNavItem) =>\n sideNavItem.nestedNavItems\n ? [sideNavItem, ...sideNavItem.nestedNavItems]\n : sideNavItem,\n );\n const firstItemWithIsSelected = flattenedItems.find(\n (sideNavItem) => sideNavItem.isSelected,\n );\n return firstItemWithIsSelected?.id;\n }, [sideNavItemsList]);\n /\n Once we've rendered and if we have an item to scroll to, do the scroll action.\n * This must rely on checking firstSideNavItemIdWithIsSelected or it will not run\n * once the actual ref is populated.\n /\n useEffect(() => {\n if (firstSideNavItemIdWithIsSelected && scrollIntoViewRef.current) {\n scrollIntoViewRef.current.scrollIntoView();\n }\n }, [firstSideNavItemIdWithIsSelected]);\n\n /\n We only want to put a ref on a node iff it is the first selected node.\n * This function returns the ref only if the ID provided matches the first\n * selected node, otherwise returns undefined (so that the node has no ref)\n */\n const getRefIfThisIsFirstNodeWithIsSelected = useCallback(\n (itemId: string) =>\n itemId === firstSideNavItemIdWithIsSelected\n ? scrollIntoViewRef\n : undefined,\n [firstSideNavItemIdWithIsSelected],\n );\n\n const sideNavItemContentProviderValue = useMemo(\n () => ({ isCompact, depth: 1 }),\n [isCompact],\n );\n\n const setSelectedItem = useCallback(\n (selectedItemId: string) => {\n const updatedSideNavItems = sideNavItemsList.map((item) => {\n if (item.id === selectedItemId) {\n item.isSelected = true;\n } else if (item.isSelected) {\n delete item.isSelected;\n }\n\n return item.nestedNavItems\n ? {\n ...item,\n nestedNavItems: item.nestedNavItems.map((childItem) => {\n if (childItem.id === selectedItemId) {\n childItem.isSelected = true;\n } else if (childItem.isSelected) {\n delete childItem.isSelected;\n }\n return childItem;\n }),\n }\n : item;\n });\n updateSideNavItemsList(updatedSideNavItems);\n },\n [sideNavItemsList],\n );\n\n const processedSideNavItems = useMemo(() => {\n return sideNavItemsList?.map((item) => ({\n ...item,\n childNavItems: item.nestedNavItems?.map((childProps) => {\n return {\n id: childProps.id,\n isSelected: childProps.isSelected,\n isDisabled: childProps.isDisabled,\n navItem: (\n <SideNavItemContentContext.Provider\n value={{\n ...sideNavItemContentProviderValue,\n depth: 2,\n isSortable: item.isSortable,\n }}\n key={childProps.id}\n >\n <SideNavItemContent\n {...childProps}\n scrollRef={getRefIfThisIsFirstNodeWithIsSelected(childProps.id)}\n onItemSelected={setSelectedItem}\n />\n </SideNavItemContentContext.Provider>\n ),\n };\n }),\n }));\n }, [\n getRefIfThisIsFirstNodeWithIsSelected,\n sideNavItemsList,\n sideNavItemContentProviderValue,\n setSelectedItem,\n ]);\n\n const sideNavExpandClickHandler = useCallback(() => {\n isSideNavCollapsed ? onExpand?.() : onCollapse?.();\n setSideNavCollapsed(!isSideNavCollapsed);\n }, [isSideNavCollapsed, setSideNavCollapsed, onExpand, onCollapse]);\n\n const sideNavExpandKeyHandler = useCallback<\n KeyboardEventHandler<HTMLButtonElement>\n >(\n (event) => {\n if (event?.key === \"Enter\" \|\| event?.code === \"Space\") {\n event.preventDefault();\n sideNavExpandClickHandler();\n }\n },\n [sideNavExpandClickHandler],\n );\n\n const setSortedItems = useCallback(\n (parentId: string, activeIndex: number, overIndex: number) => {\n const sortedSideNavItems = sideNavItemsList.map((item) =>\n item.id === parentId && item.nestedNavItems\n ? {\n ...item,\n nestedNavItems: arrayMove(\n item.nestedNavItems,\n activeIndex,\n overIndex,\n ),\n }\n : item,\n );\n updateSideNavItemsList(sortedSideNavItems);\n onSort?.(sortedSideNavItems);\n },\n [onSort, sideNavItemsList],\n );\n\n return (\n <StyledSideNav\n aria-label={t(\"navigation.label\")}\n id=\"side-nav-expandable\"\n isSideNavCollapsed={isSideNavCollapsed}\n odysseyDesignTokens={odysseyDesignTokens}\n >\n {isCollapsible && (\n <SideNavToggleButton\n ariaControls=\"side-nav-expandable\"\n isSideNavCollapsed={isSideNavCollapsed}\n onClick={sideNavExpandClickHandler}\n onKeyDown={sideNavExpandKeyHandler}\n />\n )}\n <OdysseyThemeProvider>\n <StyledCollapsibleContent\n data-se=\"collapsible-region\"\n isSideNavCollapsed={isSideNavCollapsed}\n odysseyDesignTokens={odysseyDesignTokens}\n >\n <StyledOpacityTransitionContainer\n isSideNavCollapsed={isSideNavCollapsed}\n odysseyDesignTokens={odysseyDesignTokens}\n >\n <SideNavHeaderContainer\n odysseyDesignTokens={odysseyDesignTokens}\n hasContentScrolled={hasContentScrolled}\n >\n <SideNavHeader\n appName={appName}\n isLoading={isLoading}\n logoProps={logoProps}\n />\n </SideNavHeaderContainer>\n <SideNavScrollableContainer\n odysseyDesignTokens={odysseyDesignTokens}\n data-se=\"scrollable-region\"\n >\n <SideNavListContainer role=\"none\" ref={scrollableContentRef}>\n {isLoading\n ? [...Array(6)].map((_, index) => <LoadingItem key={index} />)\n : processedSideNavItems?.map((item) => {\n const {\n id,\n label,\n isSectionHeader,\n startIcon,\n childNavItems,\n isSortable,\n isDefaultExpanded,\n isDisabled,\n isExpanded,\n } = item;\n\n if (isSectionHeader) {\n return (\n <SectionHeaderContainer\n id={id}\n key={id}\n odysseyDesignTokens={odysseyDesignTokens}\n >\n <SectionHeader\n odysseyDesignTokens={odysseyDesignTokens}\n >\n {label}\n </SectionHeader>\n </SectionHeaderContainer>\n );\n } else if (childNavItems) {\n return (\n <StyledSideNavListItem\n id={id}\n key={id}\n odysseyDesignTokens={odysseyDesignTokens}\n disabled={isDisabled}\n aria-disabled={isDisabled}\n >\n <NavAccordion\n label={label}\n isCompact={isCompact}\n isDefaultExpanded={isDefaultExpanded}\n isExpanded={isExpanded}\n startIcon={startIcon}\n isDisabled={isDisabled}\n >\n <SideNavListContainer role=\"none\">\n {isSortable ? (\n <SortableList\n parentId={item.id}\n items={childNavItems}\n onChange={setSortedItems}\n renderItem={(sortableItem) => (\n <SortableList.Item\n id={sortableItem.id}\n isDisabled={sortableItem.isDisabled}\n isSelected={sortableItem.isSelected}\n >\n {sortableItem.navItem}\n </SortableList.Item>\n )}\n />\n ) : (\n childNavItems.map((item) => item.navItem)\n )}\n </SideNavListContainer>\n </NavAccordion>\n </StyledSideNavListItem>\n );\n } else {\n return (\n <SideNavItemContentContext.Provider\n key={item.id}\n value={sideNavItemContentProviderValue}\n >\n <SideNavItemContent\n {...item}\n key={item.id}\n scrollRef={getRefIfThisIsFirstNodeWithIsSelected(\n item.id,\n )}\n onItemSelected={setSelectedItem}\n />\n </SideNavItemContentContext.Provider>\n );\n }\n })}\n </SideNavListContainer>\n </SideNavScrollableContainer>\n {!isLoading && (footerItems \|\| hasCustomFooter) && (\n <SideNavFooter\n odysseyDesignTokens={odysseyDesignTokens}\n isContentScrollable={isContentScrollable}\n >\n {hasCustomFooter\n ? footerComponent\n : footerItems && (\n <SideNavFooterItemsContainer\n odysseyDesignTokens={odysseyDesignTokens}\n >\n <SideNavFooterContent footerItems={footerItems} />\n </SideNavFooterItemsContainer>\n )}\n </SideNavFooter>\n )}\n </StyledOpacityTransitionContainer>\n </StyledCollapsibleContent>\n </OdysseyThemeProvider>\n </StyledSideNav>\n );\n};\n\nconst MemoizedSideNav = memo(SideNav);\nMemoizedSideNav.displayName = \"SideNav\";\n\nexport { MemoizedSideNav as SideNav };\n"],"mappings":"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"}
1	+ {"version":3,"file":"SideNav.js","names":["styled","memo","useMemo","useState","useCallback","useRef","useEffect","useTranslation","NavAccordion","useOdysseyDesignTokens","OdysseyThemeProvider","SideNavHeader","SideNavItemContent","StyledSideNavListItem","SideNavFooterContent","SideNavItemContentContext","SideNavToggleButton","SortableList","Overline","arrayMove","jsx","_jsx","jsxs","_jsxs","createElement","_createElement","DEFAULT_SIDE_NAV_WIDTH","SIDENAV_COLLAPSE_ICON_POSITION","StyledCollapsibleContent","shouldForwardProp","prop","odysseyDesignTokens","isSideNavCollapsed","position","display","gridTemplateColumns","height","transition","TransitionDurationMain","transitionTimingFunction","TransitionTimingMain","overflow","opacity","StyledOpacityTransitionContainer","gridTemplateRows","StyledSideNav","backgroundColor","HueNeutralWhite","HueNeutral200","content","right","top","transform","width","Spacing2","zIndex","Spacing3","SideNavHeaderContainer","hasContentScrolled","flexShrink","borderBottom","BorderWidthMain","BorderStyleMain","HueNeutral50","SideNavListContainer","padding","listStyle","listStyleType","margin","SideNavScrollableContainer","flex","overflowY","paddingInline","SectionHeaderContainer","paddingBlock","Spacing1","Spacing4","marginBlock","color","HueNeutral600","SideNavFooter","PersistentSideNavFooter","isContentScrollable","transitionProperty","transitionDuration","transitionTiming","boxShadow","SideNavFooterItemsContainer","flexWrap","alignItems","fontSize","TypographySizeOverline","textDecoration","HueNeutral900","LoadingItemContainer","gap","getHasScrollableContent","scrollableContainer","scrollHeight","clientHeight","LoadingItem","children","_Skeleton","variant","SideNav","appName","footerComponent","footerItems","hasCustomFooter","isCollapsible","isCompact","isLoading","logoProps","onCollapse","onExpand","onSort","sideNavItems","setSideNavCollapsed","setHasContentScrolled","setIsContentScrollable","scrollableContentRef","resizeObserverRef","intersectionObserverRef","t","sideNavItemsList","updateSideNavItemsList","updateIsContentScrollable","current","parentElement","resizeObserverDebounceTimer","ResizeObserver","cancelAnimationFrame","requestAnimationFrame","observe","IntersectionObserver","entries","isIntersecting","slice","sort","a","b","time","at","root","threshold","ulElement","liElement","Array","from","disconnect","scrollIntoViewRef","firstSideNavItemIdWithIsSelected","flattenedItems","flatMap","sideNavItem","nestedNavItems","firstItemWithIsSelected","find","isSelected","id","scrollIntoView","getRefIfThisIsFirstNodeWithIsSelected","itemId","undefined","sideNavItemContentProviderValue","depth","setSelectedItem","selectedItemId","updatedSideNavItems","map","item","childItem","processedSideNavItems","childNavItems","childProps","isDisabled","navItem","Provider","value","isSortable","scrollRef","onItemSelected","sideNavExpandClickHandler","sideNavExpandKeyHandler","event","key","code","preventDefault","setSortedItems","parentId","activeIndex","overIndex","sortedSideNavItems","ariaControls","onClick","onKeyDown","role","ref","_","index","label","isSectionHeader","startIcon","isDefaultExpanded","isExpanded","component","disabled","items","onChange","renderItem","sortableItem","Item","MemoizedSideNav","displayName"],"sources":["../../../src/labs/SideNav/SideNav.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 styled, { CSSObject } from \"@emotion/styled\";\nimport {\n memo,\n useMemo,\n useState,\n useCallback,\n useRef,\n useEffect,\n KeyboardEventHandler,\n} from \"react\";\nimport { Skeleton } from \"@mui/material\";\nimport { useTranslation } from \"react-i18next\";\n\nimport { NavAccordion } from \"./NavAccordion\";\nimport {\n DesignTokens,\n useOdysseyDesignTokens,\n} from \"../../OdysseyDesignTokensContext\";\nimport { OdysseyThemeProvider } from \"../../OdysseyThemeProvider\";\nimport type { SideNavProps } from \"./types\";\nimport { SideNavHeader } from \"./SideNavHeader\";\nimport {\n SideNavItemContent,\n StyledSideNavListItem,\n} from \"./SideNavItemContent\";\nimport { SideNavFooterContent } from \"./SideNavFooterContent\";\nimport { SideNavItemContentContext } from \"./SideNavItemContentContext\";\nimport { SideNavToggleButton } from \"./SideNavToggleButton\";\nimport { SortableList } from \"./SortableList/SortableList\";\nimport { Overline } from \"../../Typography\";\n// eslint-disable-next-line import/no-extraneous-dependencies\nimport { arrayMove } from \"@dnd-kit/sortable\";\n\nexport const DEFAULT_SIDE_NAV_WIDTH = \"300px\";\n\n// The side nav collapse icon is placed absolutely from the top (Logo container + nav header height)\n// to align it in the middle of the nav header text\nexport const SIDENAV_COLLAPSE_ICON_POSITION = \"77px\";\n\nconst StyledCollapsibleContent = styled(\"div\", {\n shouldForwardProp: (prop) =>\n prop !== \"odysseyDesignTokens\" && prop !== \"isSideNavCollapsed\",\n})(\n ({\n odysseyDesignTokens,\n isSideNavCollapsed,\n }: {\n odysseyDesignTokens: DesignTokens;\n isSideNavCollapsed: boolean;\n }) => ({\n position: \"relative\",\n display: \"inline-grid\",\n gridTemplateColumns: DEFAULT_SIDE_NAV_WIDTH,\n height: \"100%\",\n transition: `grid-template-columns ${odysseyDesignTokens.TransitionDurationMain}, opacity 300ms`,\n transitionTimingFunction: odysseyDesignTokens.TransitionTimingMain,\n overflow: \"hidden\",\n\n ...(isSideNavCollapsed && {\n gridTemplateColumns: 0,\n opacity: 0,\n }),\n }),\n);\n\nconst StyledOpacityTransitionContainer = styled(\"div\", {\n shouldForwardProp: (prop) =>\n prop !== \"odysseyDesignTokens\" && prop !== \"isSideNavCollapsed\",\n})(\n ({\n odysseyDesignTokens,\n isSideNavCollapsed,\n }: {\n odysseyDesignTokens: DesignTokens;\n isSideNavCollapsed: boolean;\n }) => ({\n display: \"inline-grid\",\n gridTemplateRows: \"max-content 1fr max-content\",\n height: \"100%\",\n transition: `opacity 50ms`,\n transitionTimingFunction: odysseyDesignTokens.TransitionTimingMain,\n overflow: \"hidden\",\n\n ...(isSideNavCollapsed && {\n opacity: 0,\n }),\n }),\n);\n\nconst StyledSideNav = styled(\"nav\", {\n shouldForwardProp: (prop) =>\n prop !== \"odysseyDesignTokens\" && prop !== \"isSideNavCollapsed\",\n})(\n ({\n odysseyDesignTokens,\n isSideNavCollapsed,\n }: {\n odysseyDesignTokens: DesignTokens;\n isSideNavCollapsed: boolean;\n }) => ({\n position: \"relative\",\n display: \"inline-block\",\n height: \"100%\",\n backgroundColor: odysseyDesignTokens.HueNeutralWhite,\n\n \"&::after\": {\n backgroundColor: odysseyDesignTokens.HueNeutral200,\n content: \"''\",\n height: \"100%\",\n opacity: 0,\n position: \"absolute\",\n right: 0,\n top: 0,\n transform: `translateX(0)`,\n transition: `opacity ${odysseyDesignTokens.TransitionDurationMain}, transform ${odysseyDesignTokens.TransitionDurationMain}`,\n width: odysseyDesignTokens.Spacing2,\n zIndex: 2,\n },\n\n \"&:has([data-sidenav-toggle='true']:hover), &:has([data-sidenav-toggle='true']:focus-visible)\":\n {\n ...(isSideNavCollapsed && {\n \"&::after\": {\n opacity: 1,\n transform: `translateX(100%)`,\n },\n\n \"[data-sidenav-toggle='true']\": {\n transform: `translate3d(calc(100% + ${odysseyDesignTokens.Spacing3}), 0, 0)`,\n },\n }),\n },\n\n \"[data-sidenav-toggle='true']\": {\n position: \"absolute\",\n top: SIDENAV_COLLAPSE_ICON_POSITION,\n right: 0,\n transition: `transform ${odysseyDesignTokens.TransitionDurationMain}`,\n transform: `translate3d(100%, 0, 0)`,\n },\n }),\n);\n\nconst SideNavHeaderContainer = styled(\"div\", {\n shouldForwardProp: (prop) =>\n prop !== \"hasContentScrolled\" && prop !== \"odysseyDesignTokens\",\n})(\n ({\n hasContentScrolled,\n odysseyDesignTokens,\n }: {\n hasContentScrolled: boolean;\n odysseyDesignTokens: DesignTokens;\n }) => ({\n flexShrink: 0,\n // The bottom border should appear only if the scrollable region has been scrolled\n ...(hasContentScrolled &&\n ({\n borderBottom: `${odysseyDesignTokens.BorderWidthMain} ${odysseyDesignTokens.BorderStyleMain} ${odysseyDesignTokens.HueNeutral50}`,\n } satisfies CSSObject)),\n }),\n);\n\nconst SideNavListContainer = styled(\"ul\")(() => ({\n padding: 0,\n listStyle: \"none\",\n listStyleType: \"none\",\n margin: 0,\n}));\n\nconst SideNavScrollableContainer = styled(\"div\", {\n shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})(({ odysseyDesignTokens }: { odysseyDesignTokens: DesignTokens }) => ({\n display: \"grid\",\n gridTemplateRows: \"1fr max-content\",\n flex: \"1 1 100%\",\n overflowY: \"scroll\",\n paddingInline: odysseyDesignTokens.Spacing2,\n}));\n\nconst SectionHeaderContainer = styled(\"li\", {\n shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})(({ odysseyDesignTokens }: { odysseyDesignTokens: DesignTokens }) => ({\n paddingBlock: odysseyDesignTokens.Spacing1,\n paddingInline: odysseyDesignTokens.Spacing4,\n marginBlock: `${odysseyDesignTokens.Spacing3}`,\n color: odysseyDesignTokens.HueNeutral600,\n}));\n\nconst SideNavFooter = styled(\"div\", {\n shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})(({ odysseyDesignTokens }: { odysseyDesignTokens: DesignTokens }) => ({\n flexShrink: 0,\n padding: odysseyDesignTokens.Spacing4,\n backgroundColor: odysseyDesignTokens.HueNeutralWhite,\n}));\n\nconst PersistentSideNavFooter = styled(SideNavFooter, {\n shouldForwardProp: (prop) =>\n prop !== \"isContentScrollable\" && prop !== \"odysseyDesignTokens\",\n})(\n ({\n isContentScrollable,\n odysseyDesignTokens,\n }: {\n isContentScrollable: boolean;\n odysseyDesignTokens: DesignTokens;\n }) => ({\n transitionProperty: \"box-shadow\",\n transitionDuration: odysseyDesignTokens.TransitionDurationMain,\n transitionTiming: odysseyDesignTokens.TransitionTimingMain,\n zIndex: 2,\n // The box shadow should appear above the footer only if the scrollable region has overflow\n ...(isContentScrollable && {\n boxShadow: \"0px -8px 8px -8px rgba(39, 39, 39, 0.08)\",\n }),\n }),\n);\n\nconst SideNavFooterItemsContainer = styled(\"div\", {\n shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})(({ odysseyDesignTokens }: { odysseyDesignTokens: DesignTokens }) => ({\n display: \"flex\",\n flexWrap: \"wrap\",\n alignItems: \"center\",\n fontSize: odysseyDesignTokens.TypographySizeOverline,\n\n \"a, span\": {\n color: odysseyDesignTokens.HueNeutral600,\n transition: `color ${odysseyDesignTokens.TransitionDurationMain}`,\n\n \"&:visited\": {\n color: odysseyDesignTokens.HueNeutral600,\n },\n\n \"&:hover\": {\n textDecoration: \"none\",\n color: odysseyDesignTokens.HueNeutral900,\n },\n },\n}));\n\nconst LoadingItemContainer = styled(\"div\", {\n shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})(({ odysseyDesignTokens }: { odysseyDesignTokens: DesignTokens }) => ({\n alignItems: \"center\",\n display: \"flex\",\n gap: odysseyDesignTokens.Spacing2,\n paddingBlock: odysseyDesignTokens.Spacing2,\n paddingInline: odysseyDesignTokens.Spacing4,\n}));\n\nconst getHasScrollableContent = (scrollableContainer: HTMLElement) =>\n scrollableContainer.scrollHeight > scrollableContainer.clientHeight;\n\nconst LoadingItem = () => {\n const odysseyDesignTokens: DesignTokens = useOdysseyDesignTokens();\n return (\n <LoadingItemContainer odysseyDesignTokens={odysseyDesignTokens}>\n <Skeleton\n variant=\"circular\"\n width={odysseyDesignTokens.Spacing4}\n height={odysseyDesignTokens.Spacing4}\n />\n <Skeleton variant=\"rounded\" width=\"100%\" />\n </LoadingItemContainer>\n );\n};\n\nconst SideNav = ({\n appName,\n footerComponent,\n footerItems,\n hasCustomFooter,\n isCollapsible,\n isCompact,\n isLoading,\n logoProps,\n onCollapse,\n onExpand,\n onSort,\n sideNavItems,\n}: SideNavProps) => {\n const [isSideNavCollapsed, setSideNavCollapsed] = useState(false);\n const [hasContentScrolled, setHasContentScrolled] = useState(false);\n const [isContentScrollable, setIsContentScrollable] = useState(false);\n const scrollableContentRef = useRef<HTMLUListElement>(null);\n const resizeObserverRef = useRef<ResizeObserver \| null>(null);\n const intersectionObserverRef = useRef<IntersectionObserver \| null>(null);\n const odysseyDesignTokens: DesignTokens = useOdysseyDesignTokens();\n const { t } = useTranslation();\n const [sideNavItemsList, updateSideNavItemsList] = useState(sideNavItems);\n\n // The default value (sideNavItems) passed to useState is ONLY used by the useState hook for\n // the very first value. Subsequent updates to the prop (sideNavItems) need to cause the state\n // to update!\n useEffect(() => updateSideNavItemsList(sideNavItems), [sideNavItems]);\n\n useEffect(() => {\n // This is called directly in this effect AND perhaps as a result of the ResizeObserver\n const updateIsContentScrollable = () => {\n if (\n scrollableContentRef.current &&\n scrollableContentRef.current.parentElement\n ) {\n setIsContentScrollable(\n getHasScrollableContent(scrollableContentRef.current.parentElement),\n );\n }\n };\n\n // If the window is resized, we may need to re-determine if the scrollable container has overflow\n // Setup a ResizeObserver to know if the size of the scrollableContent changes\n let resizeObserverDebounceTimer: ReturnType<typeof requestAnimationFrame>;\n if (!resizeObserverRef.current) {\n resizeObserverRef.current = new ResizeObserver(() => {\n cancelAnimationFrame(resizeObserverDebounceTimer);\n resizeObserverDebounceTimer = requestAnimationFrame(\n updateIsContentScrollable,\n );\n });\n }\n\n if (resizeObserverRef.current && scrollableContentRef.current) {\n // Observe the <ul> itself (in case it changes size due to the content expanding)\n resizeObserverRef.current.observe(scrollableContentRef.current);\n if (scrollableContentRef.current.parentElement) {\n // ALSO observe the parent (<SideNavScrollableContainer>) in case the window resizes\n resizeObserverRef.current.observe(\n scrollableContentRef.current.parentElement,\n );\n }\n }\n\n // Determine if the scrollable container has overflow or not on load\n updateIsContentScrollable();\n\n // Finally, we only want to have the border on the bottom of the header iff the user has scrolled\n // the scrollable container\n if (!intersectionObserverRef.current && scrollableContentRef.current) {\n intersectionObserverRef.current = new IntersectionObserver(\n (entries) => {\n // If isIntersecting is true, then we're at the top of the scroll container\n // If isIntersecting is false, some scrolling has occurred.\n // The entries must be sorted by time and we only really need to look at the latest one\n const isIntersecting = entries\n .slice()\n .sort((a, b) => a.time - b.time)\n .at(0)?.isIntersecting;\n setHasContentScrolled(!isIntersecting);\n },\n {\n root: scrollableContentRef.current.parentElement,\n threshold: 1.0,\n },\n );\n }\n\n if (intersectionObserverRef.current && scrollableContentRef.current) {\n const ulElement = scrollableContentRef.current;\n const [liElement] = Array.from(ulElement?.children \|\| []);\n\n if (liElement) {\n intersectionObserverRef.current.observe(liElement);\n }\n }\n\n // Cleanup when unmounted:\n return () => {\n if (resizeObserverRef.current) {\n resizeObserverRef.current.disconnect();\n resizeObserverRef.current = null;\n }\n if (intersectionObserverRef.current) {\n intersectionObserverRef.current.disconnect();\n intersectionObserverRef.current = null;\n }\n cancelAnimationFrame(resizeObserverDebounceTimer); // Ensure timer is cleared on component unmount\n };\n }, [sideNavItemsList]);\n\n const scrollIntoViewRef = useRef<HTMLLIElement>(null);\n /\n Look through the sideNavItems and determine which is the first node\n * with isSelected. This should be the node we set a ref on in order to\n * call scrollIntoView in the effect\n /\n const firstSideNavItemIdWithIsSelected = useMemo(() => {\n const flattenedItems = sideNavItemsList.flatMap((sideNavItem) =>\n sideNavItem.nestedNavItems\n ? [sideNavItem, ...sideNavItem.nestedNavItems]\n : sideNavItem,\n );\n const firstItemWithIsSelected = flattenedItems.find(\n (sideNavItem) => sideNavItem.isSelected,\n );\n return firstItemWithIsSelected?.id;\n }, [sideNavItemsList]);\n /\n Once we've rendered and if we have an item to scroll to, do the scroll action.\n * This must rely on checking firstSideNavItemIdWithIsSelected or it will not run\n * once the actual ref is populated.\n /\n useEffect(() => {\n if (firstSideNavItemIdWithIsSelected && scrollIntoViewRef.current) {\n scrollIntoViewRef.current.scrollIntoView();\n }\n }, [firstSideNavItemIdWithIsSelected]);\n\n /\n We only want to put a ref on a node iff it is the first selected node.\n * This function returns the ref only if the ID provided matches the first\n * selected node, otherwise returns undefined (so that the node has no ref)\n */\n const getRefIfThisIsFirstNodeWithIsSelected = useCallback(\n (itemId: string) =>\n itemId === firstSideNavItemIdWithIsSelected\n ? scrollIntoViewRef\n : undefined,\n [firstSideNavItemIdWithIsSelected],\n );\n\n const sideNavItemContentProviderValue = useMemo(\n () => ({ isCompact, depth: 1 }),\n [isCompact],\n );\n\n const setSelectedItem = useCallback(\n (selectedItemId: string) => {\n const updatedSideNavItems = sideNavItemsList.map((item) => {\n if (item.id === selectedItemId) {\n item.isSelected = true;\n } else if (item.isSelected) {\n delete item.isSelected;\n }\n\n return item.nestedNavItems\n ? {\n ...item,\n nestedNavItems: item.nestedNavItems.map((childItem) => {\n if (childItem.id === selectedItemId) {\n childItem.isSelected = true;\n } else if (childItem.isSelected) {\n delete childItem.isSelected;\n }\n return childItem;\n }),\n }\n : item;\n });\n updateSideNavItemsList(updatedSideNavItems);\n },\n [sideNavItemsList],\n );\n\n const processedSideNavItems = useMemo(() => {\n return sideNavItemsList?.map((item) => ({\n ...item,\n childNavItems: item.nestedNavItems?.map((childProps) => {\n return {\n id: childProps.id,\n isSelected: childProps.isSelected,\n isDisabled: childProps.isDisabled,\n navItem: (\n <SideNavItemContentContext.Provider\n value={{\n ...sideNavItemContentProviderValue,\n depth: 2,\n isSortable: item.isSortable,\n }}\n key={childProps.id}\n >\n <SideNavItemContent\n {...childProps}\n scrollRef={getRefIfThisIsFirstNodeWithIsSelected(childProps.id)}\n onItemSelected={setSelectedItem}\n />\n </SideNavItemContentContext.Provider>\n ),\n };\n }),\n }));\n }, [\n getRefIfThisIsFirstNodeWithIsSelected,\n sideNavItemsList,\n sideNavItemContentProviderValue,\n setSelectedItem,\n ]);\n\n const sideNavExpandClickHandler = useCallback(() => {\n isSideNavCollapsed ? onExpand?.() : onCollapse?.();\n setSideNavCollapsed(!isSideNavCollapsed);\n }, [isSideNavCollapsed, setSideNavCollapsed, onExpand, onCollapse]);\n\n const sideNavExpandKeyHandler = useCallback<\n KeyboardEventHandler<HTMLButtonElement>\n >(\n (event) => {\n if (event?.key === \"Enter\" \|\| event?.code === \"Space\") {\n event.preventDefault();\n sideNavExpandClickHandler();\n }\n },\n [sideNavExpandClickHandler],\n );\n\n const setSortedItems = useCallback(\n (parentId: string, activeIndex: number, overIndex: number) => {\n const sortedSideNavItems = sideNavItemsList.map((item) =>\n item.id === parentId && item.nestedNavItems\n ? {\n ...item,\n nestedNavItems: arrayMove(\n item.nestedNavItems,\n activeIndex,\n overIndex,\n ),\n }\n : item,\n );\n updateSideNavItemsList(sortedSideNavItems);\n onSort?.(sortedSideNavItems);\n },\n [onSort, sideNavItemsList],\n );\n\n return (\n <StyledSideNav\n aria-label={t(\"navigation.label\")}\n id=\"side-nav-expandable\"\n isSideNavCollapsed={isSideNavCollapsed}\n odysseyDesignTokens={odysseyDesignTokens}\n >\n {isCollapsible && (\n <SideNavToggleButton\n ariaControls=\"side-nav-expandable\"\n isSideNavCollapsed={isSideNavCollapsed}\n onClick={sideNavExpandClickHandler}\n onKeyDown={sideNavExpandKeyHandler}\n />\n )}\n <OdysseyThemeProvider>\n <StyledCollapsibleContent\n data-se=\"collapsible-region\"\n isSideNavCollapsed={isSideNavCollapsed}\n odysseyDesignTokens={odysseyDesignTokens}\n >\n <StyledOpacityTransitionContainer\n isSideNavCollapsed={isSideNavCollapsed}\n odysseyDesignTokens={odysseyDesignTokens}\n >\n <SideNavHeaderContainer\n odysseyDesignTokens={odysseyDesignTokens}\n hasContentScrolled={hasContentScrolled}\n >\n <SideNavHeader\n appName={appName}\n isLoading={isLoading}\n logoProps={logoProps}\n />\n </SideNavHeaderContainer>\n <SideNavScrollableContainer\n odysseyDesignTokens={odysseyDesignTokens}\n data-se=\"scrollable-region\"\n >\n <SideNavListContainer role=\"none\" ref={scrollableContentRef}>\n {isLoading\n ? [...Array(6)].map((_, index) => <LoadingItem key={index} />)\n : processedSideNavItems?.map((item) => {\n const {\n id,\n label,\n isSectionHeader,\n startIcon,\n childNavItems,\n isSortable,\n isDefaultExpanded,\n isDisabled,\n isExpanded,\n } = item;\n\n if (isSectionHeader) {\n return (\n <SectionHeaderContainer\n id={id}\n key={id}\n odysseyDesignTokens={odysseyDesignTokens}\n >\n <Overline component=\"h3\">{label}</Overline>\n </SectionHeaderContainer>\n );\n } else if (childNavItems) {\n return (\n <StyledSideNavListItem\n id={id}\n key={id}\n odysseyDesignTokens={odysseyDesignTokens}\n disabled={isDisabled}\n aria-disabled={isDisabled}\n >\n <NavAccordion\n label={label}\n isCompact={isCompact}\n isDefaultExpanded={isDefaultExpanded}\n isExpanded={isExpanded}\n startIcon={startIcon}\n isDisabled={isDisabled}\n >\n <SideNavListContainer role=\"none\">\n {isSortable ? (\n <SortableList\n parentId={item.id}\n items={childNavItems}\n onChange={setSortedItems}\n renderItem={(sortableItem) => (\n <SortableList.Item\n id={sortableItem.id}\n isDisabled={sortableItem.isDisabled}\n isSelected={sortableItem.isSelected}\n >\n {sortableItem.navItem}\n </SortableList.Item>\n )}\n />\n ) : (\n childNavItems.map((item) => item.navItem)\n )}\n </SideNavListContainer>\n </NavAccordion>\n </StyledSideNavListItem>\n );\n } else {\n return (\n <SideNavItemContentContext.Provider\n key={item.id}\n value={sideNavItemContentProviderValue}\n >\n <SideNavItemContent\n {...item}\n key={item.id}\n scrollRef={getRefIfThisIsFirstNodeWithIsSelected(\n item.id,\n )}\n onItemSelected={setSelectedItem}\n />\n </SideNavItemContentContext.Provider>\n );\n }\n })}\n </SideNavListContainer>\n {!isLoading && footerItems && !hasCustomFooter && (\n <SideNavFooter odysseyDesignTokens={odysseyDesignTokens}>\n <SideNavFooterItemsContainer\n odysseyDesignTokens={odysseyDesignTokens}\n >\n <SideNavFooterContent footerItems={footerItems} />\n </SideNavFooterItemsContainer>\n </SideNavFooter>\n )}\n </SideNavScrollableContainer>\n {!isLoading && !footerItems && hasCustomFooter && (\n <PersistentSideNavFooter\n isContentScrollable={isContentScrollable}\n odysseyDesignTokens={odysseyDesignTokens}\n >\n {footerComponent}\n </PersistentSideNavFooter>\n )}\n </StyledOpacityTransitionContainer>\n </StyledCollapsibleContent>\n </OdysseyThemeProvider>\n </StyledSideNav>\n );\n};\n\nconst MemoizedSideNav = memo(SideNav);\nMemoizedSideNav.displayName = \"SideNav\";\n\nexport { MemoizedSideNav as SideNav };\n"],"mappings":"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"}

package/dist/labs/SideNav/SideNavHeader.js CHANGED Viewed

@@ -15,7 +15,7 @@ import styled from "@emotion/styled";
 import { memo } from "react";
 import { useOdysseyDesignTokens } from "../../OdysseyDesignTokensContext.js";
 import { SideNavLogo } from "./SideNavLogo.js";
-import { Heading6 } from "../../Typography.js";
+import { Heading5 } from "../../Typography.js";
 import { TOP_NAV_HEIGHT } from "../TopNav/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -38,7 +38,8 @@ const SideNavLogoContainer = styled("div", {
   display: "flex",
   alignItems: "center",
   height: TOP_NAV_HEIGHT,
-  padding: odysseyDesignTokens.Spacing4,
+  paddingBlock: odysseyDesignTokens.Spacing4,
+  paddingInline: odysseyDesignTokens.Spacing5,
   "svg, img": {
     maxHeight: "100%",
     width: "auto",
@@ -53,7 +54,8 @@ const SideNavHeadingContainer = styled("div", {
   display: "flex",
   justifyContent: "space-between",
   alignItems: "center",
-  padding: odysseyDesignTokens.Spacing4,
+  paddingBlock: odysseyDesignTokens.Spacing4,
+  paddingInline: odysseyDesignTokens.Spacing5,
   width: "100%",
   ["& .MuiTypography-root"]: {
     margin: 0,
@@ -79,7 +81,7 @@ const SideNavHeader = ({
       })
     }), _jsx(SideNavHeadingContainer, {
       odysseyDesignTokens: odysseyDesignTokens,
-      children: _jsx(Heading6, {
+      children: _jsx(Heading5, {
         component: "h2",
         children: isLoading ? _jsx(_Skeleton, {}) : appName
       })