@utahdts/utah-design-system 1.15.5 → 1.16.0

package/dist/utah-design-system.es.js

@@ -23,7 +23,7 @@ var __privateSet = (obj, member, value, setter) => {
   return value;
 };
 var _popupTimeoutId, _noPopupTimeoutId, _isImmediatePopup;
-import { getUtahHeaderSettings, setUtahHeaderSettings } from "@utahdts/utah-design-system-header";
+import { childrenMenuTypes, getUtahHeaderSettings, setUtahHeaderSettings } from "@utahdts/utah-design-system-header";
 import { events, renderDOMSingle } from "@utahdts/utah-design-system-header";
 import * as React from "react";
 import React__default, { useRef, useState, useEffect, createContext, useCallback, useContext, useId, useMemo, useLayoutEffect } from "react";
@@ -31,7 +31,7 @@ import { useLocation, NavLink } from "react-router-dom";
 const name = "@utahdts/utah-design-system";
 const description = "Utah Design System React Library";
 const displayName = "Utah Design System React Library";
-const version$1 = "1.15.5";
+const version$1 = "1.16.0";
 const exports = {
   ".": {
     "development-local": "./index.js",
@@ -57,7 +57,7 @@ const files = [
 ];
 const peerDependencies = {
   react: "18.x",
-  "react-router-dom": "6.21.2"
+  "react-router-dom": "6.21.3"
 };
 const scripts = {
   build: "vite build",
@@ -94,29 +94,29 @@ const bugs = {
 };
 const homepage = "https://github.com/utahdts/utah-design-system";
 const dependencies = {
-  "@utahdts/utah-design-system-header": "1.15.5",
+  "@utahdts/utah-design-system-header": "1.16.0",
   "date-fns": "3.3.1",
   lodash: "4.17.21",
   "prop-types": "15.8.1",
   react: "18.x",
   "react-popper": "2.3.0",
-  "react-router-dom": "6.21.2",
+  "react-router-dom": "6.21.3",
   "use-immer": "0.9.0",
   uuid: "9.0.1"
 };
 const devDependencies = {
   "@types/lodash": "4.14.202",
-  "@types/react": "18.2.48",
+  "@types/react": "18.2.79",
   "@types/react-dom": "18.2.18",
-  "@types/uuid": "9.0.7",
+  "@types/uuid": "9.0.8",
   "@vitejs/plugin-react": "4.2.1",
-  "@vitest/coverage-istanbul": "1.2.0",
-  "@vitest/ui": "1.2.0",
-  jsdom: "23.2.0",
-  sass: "1.69.7",
+  "@vitest/coverage-istanbul": "1.2.2",
+  "@vitest/ui": "1.2.2",
+  jsdom: "24.0.0",
+  sass: "1.70.0",
   typescript: "5.3.3",
-  vite: "5.0.11",
-  vitest: "1.2.0"
+  vite: "5.0.12",
+  vitest: "1.2.2"
 };
 const type = "module";
 const packageJson = {
@@ -41771,10 +41771,13 @@ function useFormContextInputValue({
         /** @type {any} */
         onChange ?? (contextOnChange && internalOnChange) ?? setInternalState
       ),
-      onClear: (
-        /** @type {any} */
-        onClear ?? (contextOnChange && internalOnClear)
-      ),
+      onClear: () => {
+        (onClear ?? internalOnClear)();
+        setInternalState(
+          /** @type {ValueT} */
+          ""
+        );
+      },
       // direct access to form internals to do whatever you want, though be careful to allow
       // your input's passed in props to trump the form's props
       setState: (
@@ -42493,6 +42496,14 @@ function ComboBoxContextProvider({
     },
     [comboBoxImmer[0].isOptionsExpanded]
   );
+  useEffect(
+    () => {
+      comboBoxImmer[1]((draftContext) => {
+        draftContext.onClear = onClear;
+      });
+    },
+    [onClear]
+  );
   return /* @__PURE__ */ jsxRuntimeExports.jsx(ComboBoxContext.Provider, { value: providerValue, children });
 }
 function useDebounceFunc(func, delay = 1e3) {
@@ -42517,7 +42528,7 @@ function useDebounceFunc(func, delay = 1e3) {
           clearTimeout(timeoutRef.current);
           timeoutRef.current = window.setTimeout(
             () => {
-              func(lastVarArgsRef.current);
+              func(...lastVarArgsRef.current || []);
               lastVarArgsRef.current = null;
               lastInvocationRef.current = NaN;
               resolve(varArgs);
@@ -42742,6 +42753,15 @@ function ComboBoxOption({
     },
     [optionValueFocused, value]
   );
+  useEffect(
+    () => {
+      var _a;
+      if (isOptionsExpanded && isSelected) {
+        (_a = optionRef.current) == null ? void 0 : _a.scrollIntoView({ block: "nearest" });
+      }
+    },
+    [isOptionsExpanded, isSelected]
+  );
   return isVisible ? /* @__PURE__ */ jsxRuntimeExports.jsx(
     "li",
     {
@@ -42844,10 +42864,17 @@ function CombBoxListBox({
       ]
     }
   );
+  const lastMessageRef = useRef(
+    /** @type {string | null} */
+    null
+  );
   const addPoliteMessageDebounced = useDebounceFunc(
     useCallback(
       (message2) => {
-        addPoliteMessage(message2);
+        if (lastMessageRef.current !== message2) {
+          addPoliteMessage(message2);
+          lastMessageRef.current = message2;
+        }
       },
       [addPoliteMessage]
     ),
@@ -42885,9 +42912,7 @@ function CombBoxListBox({
         if (allowCustomEntry && filterValue && !options.some((option) => option.labelLowerCase === filterValue.toLocaleLowerCase())) {
           message2.push(`Press Enter to add ${filterValue} to the combo box list.`);
         }
-        if (!isOptionsExpanded) {
-          message2.push("Use the down arrow key to begin selecting.");
-        }
+        message2.push("Use the down arrow key to begin selecting.");
         addPoliteMessageDebounced(message2.join(" "));
       }
     },
@@ -42981,7 +43006,7 @@ function TextInput({
     useRef(null)
   );
   const onChangeSetCursorPosition = useRememberCursorPosition(inputRef, value || "");
-  const { addAssertiveMessage } = useAriaMessaging();
+  const { addPoliteMessage } = useAriaMessaging();
   const showClearIcon = isShowingClearableIcon ?? !!((isClearable || onClear) && currentValue);
   const clearInput = useCallback(
     /** @param {import('react').UIEvent<HTMLInputElement>} e */
@@ -42992,10 +43017,10 @@ function TextInput({
       } else if (inputRef.current) {
         inputRef.current.value = "";
       }
-      addAssertiveMessage(`${label} input was cleared`);
+      addPoliteMessage(`${label} input was cleared`);
       (_a = inputRef.current) == null ? void 0 : _a.focus();
     },
-    [addAssertiveMessage, currentOnClear, label]
+    [addPoliteMessage, currentOnClear, label]
   );
   const checkKeyPressed = useCallback(
     /** @param {import('react').KeyboardEvent<HTMLInputElement>} e */
@@ -43069,6 +43094,7 @@ function ComboBoxTextInput({
   className,
   comboBoxListId,
   errorMessage,
+  iconCallback,
   id,
   innerRef: draftInnerRef,
   isClearable,
@@ -43262,7 +43288,13 @@ function ComboBoxTextInput({
         {
           "aria-hidden": "true",
           className: "combo-box-input__chevron icon-button--borderless icon-button--small1x",
-          icon: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: isOptionsExpanded ? "utds-icon-before-chevron-up" : "utds-icon-before-chevron-down", "aria-hidden": "true" }),
+          icon: (iconCallback == null ? void 0 : iconCallback(isOptionsExpanded)) ?? /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: isOptionsExpanded ? "utds-icon-before-chevron-up" : "utds-icon-before-chevron-down"
+            }
+          ),
           isDisabled,
           onClick: (e) => {
             e.stopPropagation();
@@ -43288,6 +43320,7 @@ function ComboBox({
   className,
   defaultValue,
   errorMessage,
+  iconCallback,
   id,
   innerRef: draftInnerRef,
   isClearable,
@@ -43312,8 +43345,8 @@ function ComboBox({
   wrapperClassName,
   ...rest
 }) {
-  const comboBoxListId = useId();
-  const contentRef = useRef(
+  const comboBoxListId = `${id}__${useId()}`;
+  const [contentRefState, setContentRefState] = useState(
     /** @type {HTMLInputElement | null} */
     null
   );
@@ -43326,9 +43359,10 @@ function ComboBox({
         className: textInputClassName,
         comboBoxListId,
         errorMessage,
+        iconCallback,
         id,
         innerRef: (ref) => {
-          contentRef.current = ref;
+          setContentRefState(ref);
         },
         isClearable,
         isShowingClearableIcon,
@@ -43348,7 +43382,7 @@ function ComboBox({
         allowCustomEntry,
         id: comboBoxListId,
         ariaLabelledById: id,
-        popperReferenceElement: popperContentRef ?? contentRef.current ?? null,
+        popperReferenceElement: popperContentRef ?? contentRefState ?? null,
         children
       }
     )
@@ -44031,6 +44065,7 @@ function MultiSelectTags({ isDisabled }) {
   });
 }
 function MultiSelectComboBox({
+  allowCustomEntry,
   children,
   className,
   errorMessage,
@@ -44041,6 +44076,7 @@ function MultiSelectComboBox({
   label,
   labelClassName,
   name: name2,
+  onCustomEntry,
   placeholder,
   wrapperClassName,
   ...rest
@@ -44105,6 +44141,7 @@ function MultiSelectComboBox({
               /* @__PURE__ */ jsxRuntimeExports.jsx(
                 ComboBox,
                 {
+                  allowCustomEntry,
                   className: "multi-select__combo-box",
                   id: multiSelectContextValue.multiSelectId,
                   isDisabled,
@@ -44117,6 +44154,7 @@ function MultiSelectComboBox({
                   onChange: (newValue) => {
                     multiSelectContextValue.onChange(lodashExports.uniq(selectedValuesRef.current.concat(newValue)));
                   },
+                  onCustomEntry,
                   onKeyUp: (e, currentFilter) => {
                     let eventIsHandled = false;
                     if (!currentFilter && multiSelectContextValueRef.current.selectedValues.length) {
@@ -44248,6 +44286,7 @@ function MultiSelectContextProvider({
   return /* @__PURE__ */ jsxRuntimeExports.jsx(MultiSelectContext.Provider, { value: providerValue, children });
 }
 function MultiSelect({
+  allowCustomEntry,
   children,
   className,
   defaultValues,
@@ -44262,6 +44301,7 @@ function MultiSelect({
   name: name2,
   onChange,
   onClear,
+  onCustomEntry,
   placeholder,
   values,
   wrapperClassName,
@@ -44278,6 +44318,7 @@ function MultiSelect({
       children: /* @__PURE__ */ jsxRuntimeExports.jsx(
         MultiSelectComboBox,
         {
+          allowCustomEntry,
           className,
           errorMessage,
           innerRef,
@@ -44287,6 +44328,7 @@ function MultiSelect({
           label,
           labelClassName,
           name: name2,
+          onCustomEntry,
           placeholder,
           wrapperClassName,
           ...rest,
@@ -44372,9 +44414,11 @@ function PlainText({
   wrapperClassName,
   ...rest
 }) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: joinClassNames("plain-text-wrapper", "plain-text-wrapper--plain-text", wrapperClassName), ref: innerRef, children: [
+  const internalId = useId();
+  const { value: currentValue } = useFormContextInput({ id: id || internalId, value });
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: joinClassNames("input-wrapper", "input-wrapper--plain-text", wrapperClassName), ref: innerRef, children: [
     isLabelSkipped ? null : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: labelClassName ?? void 0, children: label }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "plain-text__inner-wrapper", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: joinClassNames(className), id, ...rest, children: value }) })
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "plain-text__inner-wrapper", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: joinClassNames(className), id, ...rest, children: currentValue || /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: " " }) }) })
   ] });
 }
 const RadioButtonGroupContext = (
@@ -44583,16 +44627,16 @@ function Select({
     /** @type {typeof useRef<HTMLSelectElement>} */
     useRef(null)
   );
-  const { addAssertiveMessage } = useAriaMessaging();
+  const { addPoliteMessage } = useAriaMessaging();
   const clearInput = useCallback(
     /** @param {import('react').MouseEvent} e */
     (e) => {
       var _a;
       currentOnClear == null ? void 0 : currentOnClear(e);
-      addAssertiveMessage(`${label} input was cleared`);
+      addPoliteMessage(`${label} input was cleared`);
       (_a = selectInputRef.current) == null ? void 0 : _a.focus();
     },
-    [addAssertiveMessage, currentOnClear, label]
+    [addPoliteMessage, currentOnClear, label]
   );
   const showClearIcon = !!((isClearable || onClear) && currentValue);
   const onChangeCallback = useCallback(
@@ -44802,17 +44846,17 @@ function TextArea({
     useRef(null)
   );
   const onChangeSetCursorPosition = useRememberCursorPosition(inputRef, value || "");
-  const { addAssertiveMessage } = useAriaMessaging();
+  const { addPoliteMessage } = useAriaMessaging();
   const showClearIcon = !!((isClearable || onClear) && currentValue);
   const clearInput = useCallback(
     /** @param {import('react').UIEvent} e */
     (e) => {
       var _a;
       currentOnClear == null ? void 0 : currentOnClear(e);
-      addAssertiveMessage(`${label} input was cleared`);
+      addPoliteMessage(`${label} input was cleared`);
       (_a = inputRef.current) == null ? void 0 : _a.focus();
     },
-    [addAssertiveMessage, currentOnClear, label]
+    [addPoliteMessage, currentOnClear, label]
   );
   const checkKeyPressed = useCallback(
     /** @param {import('react').KeyboardEvent} e */
@@ -44871,6 +44915,111 @@ function TextArea({
     /* @__PURE__ */ jsxRuntimeExports.jsx(ErrorMessage, { errorMessage, id })
   ] });
 }
+function TimeInput({
+  allowCustomEntry,
+  className,
+  defaultValue,
+  errorMessage,
+  hasTimePopup = true,
+  id,
+  innerRef,
+  isClearable,
+  isDisabled,
+  isRequired,
+  label,
+  labelClassName,
+  name: name2,
+  onChange,
+  onClear,
+  placeholder,
+  timeFormat = "h:mm aaa",
+  timeRangeBegin,
+  timeRangeEnd,
+  timeRangeIncrement = 15,
+  value,
+  wrapperClassName,
+  ...rest
+}) {
+  const {
+    onChange: currentOnChange,
+    onClear: currentOnClear,
+    value: currentValue
+  } = useFormContextInputValue({
+    defaultValue,
+    id,
+    onChange,
+    onClear,
+    value
+  });
+  const timeOptions = useMemo(
+    () => {
+      const defaultStartDate = new Date((/* @__PURE__ */ new Date()).setHours(0, 0, 0, 0));
+      const defaultEndDate = new Date((/* @__PURE__ */ new Date()).setHours(23, 59, 0, 0));
+      let optionsBeginDate = timeRangeBegin && parse(timeRangeBegin, timeFormat, /* @__PURE__ */ new Date()) || null;
+      optionsBeginDate = optionsBeginDate && isValid(optionsBeginDate) ? optionsBeginDate : defaultStartDate;
+      let optionsEndDate = timeRangeEnd && parse(timeRangeEnd, timeFormat, /* @__PURE__ */ new Date()) || null;
+      optionsEndDate = optionsEndDate && isValid(optionsEndDate) ? optionsEndDate : defaultEndDate;
+      const timeOptionsRet = [];
+      for (let loopDate = optionsBeginDate; loopDate.getTime() <= optionsEndDate.getTime(); loopDate = add(loopDate, { minutes: timeRangeIncrement })) {
+        timeOptionsRet.push(format(loopDate, timeFormat));
+      }
+      return timeOptionsRet;
+    },
+    [timeRangeBegin, timeRangeEnd, timeRangeIncrement]
+  );
+  const clockIcon = useMemo(
+    () => /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: joinClassNames("utds-icon-before-clock", "time-input__clock-icon", isDisabled && "time-input__clock-icon--is-disabled", !hasTimePopup && "time-input__clock-icon--static"), "aria-hidden": "true" }),
+    [isDisabled, hasTimePopup]
+  );
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: joinClassNames("time-input__wrapper", wrapperClassName), ref: innerRef, children: hasTimePopup ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+    ComboBox,
+    {
+      className,
+      errorMessage,
+      id,
+      isClearable,
+      isDisabled,
+      isRequired,
+      label,
+      labelClassName,
+      name: name2 || id,
+      onClear: isClearable ? currentOnClear : void 0,
+      placeholder,
+      value: currentValue,
+      allowCustomEntry,
+      iconCallback: () => clockIcon,
+      onChange: currentOnChange,
+      ...rest,
+      children: timeOptions.map((timeOption) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+        ComboBoxOption,
+        {
+          label: timeOption,
+          value: timeOption
+        },
+        `time-input__${id}__${timeOption}`
+      ))
+    }
+  ) : /* @__PURE__ */ jsxRuntimeExports.jsx(
+    TextInput,
+    {
+      className,
+      errorMessage,
+      id,
+      isClearable,
+      isDisabled,
+      isRequired,
+      label,
+      labelClassName,
+      name: name2 || id,
+      onClear: isClearable ? currentOnClear : void 0,
+      placeholder,
+      value: currentValue,
+      onChange: (e) => currentOnChange(e.target.value),
+      rightContent: clockIcon,
+      ...rest
+    }
+  ) });
+}
 const Icons = {
   IconArrowLeft: (
     /** @type {IconFunc} */
@@ -44931,7 +45080,21 @@ function ExternalLink({ children, href, ...rest }) {
     ] })
   ] });
 }
-function MenuItem({ currentMenuItem, menuItem }) {
+const menuTypes = {
+  VERTICAL: (
+    /** @type {MenuTypes} */
+    "vertical"
+  ),
+  HORIZONTAL: (
+    /** @type {MenuTypes} */
+    "horizontal"
+  )
+};
+function MenuItemInline({
+  currentMenuItem,
+  menuItem,
+  menuType = menuTypes.VERTICAL
+}) {
   var _a, _b, _c;
   const { pathname } = useLocation();
   const [isChildrenOpen, setIsChildrenOpen] = i(() => {
@@ -44965,7 +45128,7 @@ function MenuItem({ currentMenuItem, menuItem }) {
   if ((!(menuItem == null ? void 0 : menuItem.link) || ((_a = menuItem == null ? void 0 : menuItem.link) == null ? void 0 : _a.includes("::")) || menuItem.children) && !menuItem.id) {
     console.error("A parent MenuItem requires an `id` to empower aria-labelledby", menuItem);
   }
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("li", { className: "menu-item", children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("li", { className: menuType === menuTypes.VERTICAL ? "vertical-menu__item" : "menu-item", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "menu-item__title", children: [
       !(menuItem == null ? void 0 : menuItem.link) || ((_b = menuItem == null ? void 0 : menuItem.link) == null ? void 0 : _b.includes("::")) ? /* @__PURE__ */ jsxRuntimeExports.jsx(
         "button",
@@ -44983,6 +45146,7 @@ function MenuItem({ currentMenuItem, menuItem }) {
           className: (navData) => {
             var _a2, _b2;
             return joinClassNames(
+              "menu-item__link-title",
               (((_a2 = currentMenuItem == null ? void 0 : currentMenuItem.parentLinks) == null ? void 0 : _a2.includes(menuItem.link ?? "")) || navData.isActive) && (((_b2 = currentMenuItem == null ? void 0 : currentMenuItem.children) == null ? void 0 : _b2.length) ? "menu-item--selected_parent" : "menu-item--selected")
             );
           },
@@ -45009,13 +45173,25 @@ function MenuItem({ currentMenuItem, menuItem }) {
       ) : null,
       /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "menu-chiclet" })
     ] }),
-    menuItem.children ? /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { className: joinClassNames("menu-item__sub-menu", isChildrenOpen ? "menu-item__sub-menu--open" : ""), role: "menu", children: (_c = menuItem.children) == null ? void 0 : _c.map((menuItemChild) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-      MenuItem,
+    menuItem.children ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "ul",
       {
-        menuItem: menuItemChild
-      },
-      `menu-item__child__${menuItemChild.link}-${menuItemChild.title}}`
-    )) }) : null
+        role: "menu",
+        className: joinClassNames(
+          "menu-item__sub-menu",
+          menuType === menuTypes.VERTICAL ? "vertical-menu" : "",
+          isChildrenOpen ? "menu-item__sub-menu--open" : ""
+        ),
+        children: (_c = menuItem.children) == null ? void 0 : _c.map((menuItemChild) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+          MenuItemInline,
+          {
+            menuItem: menuItemChild,
+            menuType
+          },
+          `menu-item__child__${menuItemChild.link}-${menuItemChild.title}}`
+        ))
+      }
+    ) : null
   ] });
 }
 function HorizontalMenu({
@@ -45029,7 +45205,7 @@ function HorizontalMenu({
   var _a;
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("nav", { className: joinClassNames(className, "horizontal-menu"), "aria-labelledby": id, children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(TitleTagName, { id, className: titleTagClassName, children: "Main Menu" }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { children: (_a = menu == null ? void 0 : menu.menuItems) == null ? void 0 : _a.map((menuItem) => /* @__PURE__ */ jsxRuntimeExports.jsx(MenuItem, { menuItem, currentMenuItem }, `horizontal-menu__nav-link__${menuItem.link}-${menuItem.title}}`)) })
+    /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { children: (_a = menu == null ? void 0 : menu.menuItems) == null ? void 0 : _a.map((menuItem) => /* @__PURE__ */ jsxRuntimeExports.jsx(MenuItemInline, { menuItem, currentMenuItem }, `horizontal-menu__nav-link__${menuItem.link}-${menuItem.title}}`)) })
   ] });
 }
 function LinkCallback({
@@ -45122,20 +45298,224 @@ function OnThisPage({ contentRef }) {
     /* @__PURE__ */ jsxRuntimeExports.jsx(OnThisPageHeadersLevel, { headersLevel: headersTree })
   ] }) : null });
 }
-function VerticalMenu({ currentMenuItem, menus }) {
+function MenuItemPlain({
+  currentMenuItem,
+  menuItem,
+  menuType
+}) {
+  var _a, _b;
+  const navLinkRef = useRef(
+    /** @type {HTMLAnchorElement | null} */
+    null
+  );
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("li", { className: menuType === menuTypes.VERTICAL ? "vertical-menu__item" : "menu-item", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: menuType === menuTypes.VERTICAL ? "vertical-menu__title" : "menu-item__title", children: [
+      !(menuItem == null ? void 0 : menuItem.link) || ((_a = menuItem == null ? void 0 : menuItem.link) == null ? void 0 : _a.includes("::")) ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: menuType === menuTypes.VERTICAL ? "vertical-menu__title__plain" : "menu-item__title__plain", children: menuItem.title }) : /* @__PURE__ */ jsxRuntimeExports.jsx(
+        NavLink,
+        {
+          className: (navData) => {
+            var _a2, _b2;
+            return joinClassNames(
+              menuType === menuTypes.VERTICAL ? "vertical-menu__link-title" : "menu-item__link-title",
+              (((_a2 = currentMenuItem == null ? void 0 : currentMenuItem.parentLinks) == null ? void 0 : _a2.includes(menuItem.link ?? "")) || navData.isActive) && (((_b2 = currentMenuItem == null ? void 0 : currentMenuItem.children) == null ? void 0 : _b2.length) ? "menu-item--selected_parent" : "menu-item--selected")
+            );
+          },
+          end: true,
+          to: menuItem.link,
+          ref: navLinkRef,
+          children: menuItem.title
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "menu-chiclet" })
+    ] }),
+    ((_b = menuItem.children) == null ? void 0 : _b.length) ? /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { role: "menu", className: menuType === menuTypes.VERTICAL ? "vertical-menu" : "", children: menuItem.children.map((menuItemChild) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+      MenuItemPlain,
+      {
+        menuItem: menuItemChild,
+        menuType
+      },
+      `menu-item__child__${menuItemChild.link}-${menuItemChild.title}}`
+    )) }) : null
+  ] });
+}
+function useClickOutside(ref, handler, isDisabled = false) {
+  useEffect(
+    () => {
+      let retVal;
+      if (!isDisabled) {
+        let startedInside = false;
+        let startedWhenMounted = false;
+        const listener = (event) => {
+          if (
+            // Do nothing if `mousedown` or `touchstart` started inside ref element
+            !startedInside && startedWhenMounted && (ref.current && !ref.current.contains(event.target))
+          ) {
+            handler(event);
+          }
+        };
+        const validateEventStart = (event) => {
+          var _a, _b;
+          startedWhenMounted = !!ref.current;
+          startedInside = !!((_b = (_a = ref.current) == null ? void 0 : _a.contains) == null ? void 0 : _b.call(_a, event.target));
+        };
+        document.addEventListener("mousedown", validateEventStart);
+        document.addEventListener("touchstart", validateEventStart);
+        document.addEventListener("click", listener);
+        retVal = () => {
+          document.removeEventListener("mousedown", validateEventStart);
+          document.removeEventListener("touchstart", validateEventStart);
+          document.removeEventListener("click", listener);
+        };
+      }
+      return retVal;
+    },
+    [ref.current, handler, isDisabled]
+  );
+}
+function MenuItemFlyout({
+  currentMenuItem,
+  menuItem,
+  menuType
+}) {
+  var _a, _b;
+  const [isChildrenOpen, setIsChildrenOpen] = i(false);
+  const referenceElement = useRef(
+    /** @type {HTMLLIElement | null} */
+    null
+  );
+  const popperRef = useRef(
+    /** @type {HTMLDivElement | null} */
+    null
+  );
+  const { styles, attributes } = usePopper(referenceElement.current, popperRef.current, { placement: "right-start" });
+  const navLinkRef = useRef(
+    /** @type {HTMLAnchorElement | null} */
+    null
+  );
+  useClickOutside(popperRef, () => setIsChildrenOpen(false), !isChildrenOpen);
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("li", { className: menuType === menuTypes.VERTICAL ? "vertical-menu__item" : "menu-item", ref: referenceElement, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: menuType === menuTypes.VERTICAL ? "vertical-menu__title" : "menu-item__title", children: [
+      !(menuItem == null ? void 0 : menuItem.link) || ((_a = menuItem == null ? void 0 : menuItem.link) == null ? void 0 : _a.includes("::")) ? /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        "button",
+        {
+          "aria-expanded": isChildrenOpen ? "true" : "false",
+          "aria-controls": `menu-item-${menuItem.id}-${menuItem.link}-popup`,
+          "aria-haspopup": "dialog",
+          className: "menu-item__button-title",
+          id: `menu-item-${menuItem.id}-${menuItem.link}`,
+          onClick: () => setIsChildrenOpen((previouslyOpen) => !previouslyOpen),
+          type: "button",
+          title: menuItem.children ? "Expand sub-menu" : "",
+          children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: menuType === menuTypes.VERTICAL ? "vertical-menu__link-text" : "menu__link-text", children: menuItem.title }),
+            menuItem.children ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "utds-icon-before-chevron-right vertical-menu__chevron is-closed", "aria-hidden": "true" }) : null
+          ]
+        }
+      ) : /* @__PURE__ */ jsxRuntimeExports.jsx(
+        NavLink,
+        {
+          className: (navData) => {
+            var _a2, _b2;
+            return joinClassNames(
+              menuType === menuTypes.VERTICAL ? "vertical-menu__link-title" : "menu-item__link-title",
+              (((_a2 = currentMenuItem == null ? void 0 : currentMenuItem.parentLinks) == null ? void 0 : _a2.includes(menuItem.link ?? "")) || navData.isActive) && (((_b2 = currentMenuItem == null ? void 0 : currentMenuItem.children) == null ? void 0 : _b2.length) ? "menu-item--selected_parent" : "menu-item--selected")
+            );
+          },
+          end: true,
+          to: menuItem.link,
+          ref: navLinkRef,
+          children: menuItem.title
+        }
+      ),
+      menuItem.children && (menuItem == null ? void 0 : menuItem.link) ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+        IconButton,
+        {
+          appearance: ICON_BUTTON_APPEARANCE.BORDERLESS,
+          "aria-labelledby": `menu-item-${menuItem.id}-${menuItem.link}`,
+          "aria-expanded": isChildrenOpen ? "true" : "false",
+          className: "menu-item__chevron",
+          onClick: () => setIsChildrenOpen((previouslyOpen) => !previouslyOpen),
+          icon: /* @__PURE__ */ jsxRuntimeExports.jsx(Icons.IconChevron, {}),
+          title: "Expand sub-menu"
+        }
+      ) : null,
+      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "menu-chiclet" })
+    ] }),
+    menuItem.children ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "div",
+      {
+        "aria-labelledby": `menu-item-${menuItem.id}-${menuItem.link}`,
+        className: joinClassNames(
+          "popup__wrapper",
+          isChildrenOpen ? "popup__wrapper--visible" : "popup__wrapper--hidden"
+        ),
+        id: `menu-item-${menuItem.id}-${menuItem.link}-popup`,
+        ref: popperRef,
+        style: styles.popper,
+        ...attributes.popper,
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "popup__content flyout-menu", children: /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { role: "menu", className: menuType === menuTypes.VERTICAL ? "vertical-menu" : "", children: (_b = menuItem.children) == null ? void 0 : _b.map((menuItemChild) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+          MenuItemFlyout,
+          {
+            menuItem: menuItemChild,
+            menuType
+          },
+          `menu-item__child__${menuItemChild.link}-${menuItemChild.title}}`
+        )) }) })
+      }
+    ) : null
+  ] });
+}
+function VerticalMenu({ className, currentMenuItem, menus }) {
   return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: menus.map((menu) => {
     const TitleTagName = menu.titleTagName || "h2";
-    return /* @__PURE__ */ jsxRuntimeExports.jsxs("nav", { className: "menu-side-panel", "aria-labelledby": menu.id, children: [
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs("nav", { className, "aria-labelledby": menu.id, children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         TitleTagName,
         {
           id: menu.id,
-          className: joinClassNames(menu.titleTagClassName, "menu-side-panel__header"),
+          className: joinClassNames(menu.titleTagClassName, "vertical-menu__header"),
           children: menu.header
         }
       ),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { role: "menu", children: menu.menuItems.map((menuItem) => /* @__PURE__ */ jsxRuntimeExports.jsx(MenuItem, { currentMenuItem, menuItem }, `menu-side-panel__menu-item__${menuItem.link}-${menuItem.title}}`)) }, `side-panel-navigation-menu__${menu.id}`)
-    ] }, `side-panel-navigation-menu__${menu.id}`);
+      /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { role: "menu", className: "vertical-menu", children: menu.menuItems.map((menuItem) => {
+        let result;
+        switch (menuItem.childrenMenuType) {
+          case childrenMenuTypes.INLINE:
+            result = /* @__PURE__ */ jsxRuntimeExports.jsx(
+              MenuItemInline,
+              {
+                menuType: menuTypes.VERTICAL,
+                currentMenuItem,
+                menuItem
+              },
+              `vertical-menu__menu-item__${menuItem.link}-${menuItem.title}}`
+            );
+            break;
+          case childrenMenuTypes.FLYOUT:
+            result = /* @__PURE__ */ jsxRuntimeExports.jsx(
+              MenuItemFlyout,
+              {
+                menuType: menuTypes.VERTICAL,
+                currentMenuItem,
+                menuItem
+              },
+              `vertical-menu__menu-item__${menuItem.link}-${menuItem.title}}`
+            );
+            break;
+          default:
+            result = /* @__PURE__ */ jsxRuntimeExports.jsx(
+              MenuItemPlain,
+              {
+                menuType: menuTypes.VERTICAL,
+                menuItem,
+                currentMenuItem
+              },
+              `vertical-menu__menu-item__${menuItem.link}-${menuItem.title}}`
+            );
+        }
+        return result;
+      }) }, `vertical-menu__list__${menu.id}`)
+    ] }, `vertical-menu__${menu.id}`);
   }) });
 }
 function PaginationLink({
@@ -45603,40 +45983,6 @@ function ModalTitle({
     }
   );
 }
-function useClickOutside(ref, handler, isDisabled = false) {
-  useEffect(
-    () => {
-      let retVal;
-      if (!isDisabled) {
-        let startedInside = false;
-        let startedWhenMounted = false;
-        const listener = (event) => {
-          if (
-            // Do nothing if `mousedown` or `touchstart` started inside ref element
-            !startedInside && startedWhenMounted && (ref.current && !ref.current.contains(event.target))
-          ) {
-            handler(event);
-          }
-        };
-        const validateEventStart = (event) => {
-          var _a, _b;
-          startedWhenMounted = !!ref.current;
-          startedInside = !!((_b = (_a = ref.current) == null ? void 0 : _a.contains) == null ? void 0 : _b.call(_a, event.target));
-        };
-        document.addEventListener("mousedown", validateEventStart);
-        document.addEventListener("touchstart", validateEventStart);
-        document.addEventListener("click", listener);
-        retVal = () => {
-          document.removeEventListener("mousedown", validateEventStart);
-          document.removeEventListener("touchstart", validateEventStart);
-          document.removeEventListener("click", listener);
-        };
-      }
-      return retVal;
-    },
-    [ref.current, handler, isDisabled]
-  );
-}
 function useGlobalKeyEvent({ whichKeyCode, onKeyDown, onKeyUp }) {
   const [keyPressed, setKeyPressed] = useState(false);
   const keydownFuncRef = useRef(
@@ -47323,6 +47669,7 @@ export {
   Tag,
   TextArea,
   TextInput,
+  TimeInput,
   Tooltip,
   UtahDesignSystemContext,
   UtahDesignSystemContextProvider,
@@ -47336,6 +47683,7 @@ export {
   handleEvent,
   handleKeyPress,
   joinClassNames,
+  menuTypes,
   popupPlacement,
   rectContainsPoint,
   renderDOMSingle,