@utahdts/utah-design-system 1.15.5 → 1.16.1

package/index.js

@@ -45,6 +45,7 @@ export { SelectOption } from './react/components/forms/SelectOption';
 export { Switch } from './react/components/forms/Switch';
 export { TextArea } from './react/components/forms/TextArea';
 export { TextInput } from './react/components/forms/TextInput';
+export { TimeInput } from './react/components/forms/TimeInput';
 export { Icons } from './react/components/icons/Icons';
 export { ExternalLink } from './react/components/navigation/ExternalLink';
 export { HorizontalMenu } from './react/components/navigation/HorizontalMenu';
@@ -103,6 +104,7 @@ export { BANNER_PLACEMENT } from './react/enums/bannerPlacement';
 export { BUTTON_APPEARANCE, BUTTON_TYPES, ICON_BUTTON_APPEARANCE } from './react/enums/buttonEnums';
 export { componentColors } from './react/enums/componentColors';
 export { formElementSizesEnum } from './react/enums/formElementSizesEnum';
+export { menuTypes } from './react/enums/menuTypes';
 export { popupPlacement } from './react/enums/popupPlacement';
 export { tableSortingRuleFieldType } from './react/enums/tableSortingRuleFieldType';
 export { useGlobalKeyEvent } from './react/hooks/useGlobalKeyEvent';

package/package.json

@@ -2,7 +2,7 @@
   "name": "@utahdts/utah-design-system",
   "description": "Utah Design System React Library",
   "displayName": "Utah Design System React Library",
-  "version": "1.15.5",
+  "version": "1.16.1",
   "exports": {
     ".": {
       "development-local": "./index.js",
@@ -28,7 +28,7 @@
   ],
   "peerDependencies": {
     "react": "18.x",
-    "react-router-dom": "6.21.2"
+    "react-router-dom": "6.21.3"
   },
   "scripts": {
     "build": "vite build",
@@ -65,29 +65,29 @@
   },
   "homepage": "https://github.com/utahdts/utah-design-system",
   "dependencies": {
-    "@utahdts/utah-design-system-header": "1.15.5",
+    "@utahdts/utah-design-system-header": "1.16.1",
     "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"
   },
   "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"
   },
   "type": "module"
 }

package/react/components/forms/ComboBox/ComboBox.jsx

@@ -1,4 +1,4 @@
-import { useId, useRef } from 'react';
+import { useId, useState } from 'react';
 import { joinClassNames } from '../../../util/joinClassNames';
 import { ComboBoxContextProvider } from './context/ComboBoxContextProvider';
 import { CombBoxListBox } from './internal/CombBoxListBox';
@@ -17,6 +17,7 @@ import { ComboBoxTextInput } from './internal/ComboBoxTextInput';
  * @param {string} [props.className]
  * @param {string} [props.defaultValue]
  * @param {string} [props.errorMessage]
+ * @param {(isOptionsExpanded: boolean) => React.ReactNode} [props.iconCallback] Can provide a custom icon to show for the popup icon
  * @param {string} props.id
  * @param {MutableRef<HTMLDivElement | null>} [props.innerRef]
  * @param {boolean} [props.isClearable]
@@ -47,6 +48,7 @@ export function ComboBox({
   className,
   defaultValue,
   errorMessage,
+  iconCallback,
   id,
   innerRef: draftInnerRef,
   isClearable,
@@ -71,8 +73,9 @@ export function ComboBox({
   wrapperClassName,
   ...rest
 }) {
-  const comboBoxListId = useId();
-  const contentRef = useRef(/** @type {HTMLInputElement | null} */(null));
+  const comboBoxListId = `${id}__${useId()}`;
+  // useState (instead of useRef) so changes update ComboBoxListBox
+  const [contentRefState, setContentRefState] = useState(/** @type {HTMLInputElement | null} */(null));
 
   const child = (
     <div className={joinClassNames('combo-box-input__inner-wrapper', className)}>
@@ -82,9 +85,10 @@ export function ComboBox({
         className={textInputClassName}
         comboBoxListId={comboBoxListId}
         errorMessage={errorMessage}
+        iconCallback={iconCallback}
         id={id}
         innerRef={(ref) => {
-          contentRef.current = ref;
+          setContentRefState(ref);
         }}
         isClearable={isClearable}
         isShowingClearableIcon={isShowingClearableIcon}
@@ -102,7 +106,7 @@ export function ComboBox({
         allowCustomEntry={allowCustomEntry}
         id={comboBoxListId}
         ariaLabelledById={id}
-        popperReferenceElement={popperContentRef ?? contentRef.current ?? null}
+        popperReferenceElement={popperContentRef ?? contentRefState ?? null}
       >
         {children}
       </CombBoxListBox>

package/react/components/forms/ComboBox/ComboBoxOption.jsx

@@ -155,6 +155,16 @@ export function ComboBoxOption({
     [optionValueFocused, value]
   );
 
+  // scroll in to view
+  useEffect(
+    () => {
+      if (isOptionsExpanded && isSelected) {
+        optionRef.current?.scrollIntoView({ block: 'nearest' });
+      }
+    },
+    [isOptionsExpanded, isSelected]
+  );
+
   return (
     isVisible
       ? (

package/react/components/forms/ComboBox/context/ComboBoxContextProvider.jsx

@@ -195,6 +195,16 @@ export function ComboBoxContextProvider({
     [comboBoxImmer[0].isOptionsExpanded]
   );
 
+  // update onClear on change
+  useEffect(
+    () => {
+      comboBoxImmer[1]((draftContext) => {
+        draftContext.onClear = onClear;
+      });
+    },
+    [onClear]
+  );
+
   return (
     <ComboBoxContext.Provider value={providerValue}>
       {children}

package/react/components/forms/ComboBox/internal/CombBoxListBox.jsx

@@ -53,10 +53,14 @@ export function CombBoxListBox({
     }
   );
 
+  const lastMessageRef = useRef(/** @type {string | null} */(null));
   const addPoliteMessageDebounced = useDebounceFunc(
     useCallback(
       (message) => {
-        addPoliteMessage(message);
+        if (lastMessageRef.current !== message) {
+          addPoliteMessage(message);
+          lastMessageRef.current = message;
+        }
       },
       [addPoliteMessage]
     ),
@@ -105,9 +109,7 @@ export function CombBoxListBox({
         if (allowCustomEntry && filterValue && !options.some((option) => option.labelLowerCase === filterValue.toLocaleLowerCase())) {
           message.push(`Press Enter to add ${filterValue} to the combo box list.`);
         }
-        if (!isOptionsExpanded) {
-          message.push('Use the down arrow key to begin selecting.');
-        }
+        message.push('Use the down arrow key to begin selecting.');
         addPoliteMessageDebounced(message.join(' '));
       }
     },

package/react/components/forms/ComboBox/internal/ComboBoxTextInput.jsx

@@ -23,6 +23,7 @@ import { moveComboBoxSelectionUp } from '../functions/moveComboBoxSelectionUp';
  * @param {string} [props.className]
  * @param {string} props.comboBoxListId
  * @param {string} [props.errorMessage]
+ * @param {(isOptionsExpanded: boolean) => React.ReactNode} [props.iconCallback] Can provide a custom icon to show for the popup icon
  * @param {string} props.id
  * @param {MutableRef<HTMLInputElement | null>} [props.innerRef]
  * @param {boolean} [props.isClearable]
@@ -46,6 +47,7 @@ export function ComboBoxTextInput({
   className,
   comboBoxListId,
   errorMessage,
+  iconCallback,
   id,
   innerRef: draftInnerRef,
   isClearable,
@@ -264,7 +266,15 @@ export function ComboBoxTextInput({
           <IconButton
             aria-hidden="true"
             className="combo-box-input__chevron icon-button--borderless icon-button--small1x"
-            icon={<span className={isOptionsExpanded ? 'utds-icon-before-chevron-up' : 'utds-icon-before-chevron-down'} aria-hidden="true" />}
+            icon={
+              iconCallback?.(isOptionsExpanded)
+              ?? (
+                <span
+                  aria-hidden="true"
+                  className={isOptionsExpanded ? 'utds-icon-before-chevron-up' : 'utds-icon-before-chevron-down'}
+                />
+              )
+            }
             isDisabled={isDisabled}
             onClick={(e) => {
               e.stopPropagation();

package/react/components/forms/FormContext/useFormContextInputValue.js

@@ -95,7 +95,10 @@ export function useFormContextInputValue({
         ?? (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

package/react/components/forms/MultiSelect/MultiSelect.jsx

@@ -3,6 +3,7 @@ import MultiSelectContextProvider from './context/MultiSelectContextProvider';
 
 /**
  * @param {object} props
+ * @param {boolean} [props.allowCustomEntry] can the user type in their own items to add to the list?
  * @param {import('react').ReactNode} [props.children]
  * @param {string} [props.className]
  * @param {string[]} [props.defaultValues]
@@ -17,12 +18,14 @@ import MultiSelectContextProvider from './context/MultiSelectContextProvider';
  * @param {string} [props.name]
  * @param {((newValue: string[]) => void)} [props.onChange]
  * @param {() => void} [props.onClear]
+ * @param {(customValue: string) => void} [props.onCustomEntry] caller is responsible for adding options when they are added
  * @param {string} [props.placeholder]
  * @param {string[]} [props.values]
  * @param {string} [props.wrapperClassName]
  * @returns {import('react').JSX.Element}
  */
 export function MultiSelect({
+  allowCustomEntry,
   children,
   className,
   defaultValues,
@@ -37,6 +40,7 @@ export function MultiSelect({
   name,
   onChange,
   onClear,
+  onCustomEntry,
   placeholder,
   values,
   wrapperClassName,
@@ -51,6 +55,7 @@ export function MultiSelect({
       values={values}
     >
       <MultiSelectComboBox
+        allowCustomEntry={allowCustomEntry}
         className={className}
         errorMessage={errorMessage}
         innerRef={innerRef}
@@ -60,6 +65,7 @@ export function MultiSelect({
         label={label}
         labelClassName={labelClassName}
         name={name}
+        onCustomEntry={onCustomEntry}
         placeholder={placeholder}
         wrapperClassName={wrapperClassName}
         // eslint-disable-next-line react/jsx-props-no-spreading

package/react/components/forms/MultiSelect/MultiSelectComboBox.jsx

@@ -18,6 +18,7 @@ import { useMultiSelectContext } from './context/useMultiSelectContext';
 
 /**
  * @param {object} props
+ * @param {boolean} [props.allowCustomEntry] can the user type in their own items to add to the list?
  * @param {import('react').ReactNode} [props.children]
  * @param {string} [props.className]
  * @param {string} [props.errorMessage]
@@ -28,11 +29,13 @@ import { useMultiSelectContext } from './context/useMultiSelectContext';
  * @param {string} props.label
  * @param {string} [props.labelClassName]
  * @param {string} [props.name]
+ * @param {(customValue: string) => void} [props.onCustomEntry] caller is responsible for adding options when they are added
  * @param {string} [props.placeholder]
  * @param {string} [props.wrapperClassName]
  * @returns {import('react').JSX.Element}
  */
 export function MultiSelectComboBox({
+  allowCustomEntry,
   children,
   className,
   errorMessage,
@@ -43,6 +46,7 @@ export function MultiSelectComboBox({
   label,
   labelClassName,
   name,
+  onCustomEntry,
   placeholder,
   wrapperClassName,
   ...rest
@@ -110,6 +114,7 @@ export function MultiSelectComboBox({
         >
           <MultiSelectTags isDisabled={isDisabled} />
           <ComboBox
+            allowCustomEntry={allowCustomEntry}
             className="multi-select__combo-box"
             id={multiSelectContextValue.multiSelectId}
             isDisabled={isDisabled}
@@ -122,6 +127,7 @@ export function MultiSelectComboBox({
             onChange={(newValue) => {
               multiSelectContextValue.onChange(uniq(selectedValuesRef.current.concat(newValue)));
             }}
+            onCustomEntry={onCustomEntry}
             onKeyUp={(e, currentFilter) => {
               let eventIsHandled = false;
               // check that filter is blank and that there are options selected

package/react/components/forms/PlainText.jsx

@@ -1,4 +1,6 @@
+import { useId } from 'react';
 import { joinClassNames } from '../../util/joinClassNames';
+import { useFormContextInput } from './FormContext/useFormContextInput';
 
 /**
  * Sometimes you want a label that has static text next to it that looks and fits in to the
@@ -26,8 +28,10 @@ export function PlainText({
   wrapperClassName,
   ...rest
 }) {
+  const internalId = useId();
+  const { value: currentValue } = useFormContextInput({ id: id || internalId, value });
   return (
-    <div className={joinClassNames('plain-text-wrapper', 'plain-text-wrapper--plain-text', wrapperClassName)} ref={innerRef}>
+    <div className={joinClassNames('input-wrapper', 'input-wrapper--plain-text', wrapperClassName)} ref={innerRef}>
       {
         isLabelSkipped
           ? null
@@ -39,7 +43,8 @@ export function PlainText({
       }
       <div className="plain-text__inner-wrapper">
         <div className={joinClassNames(className)} id={id} {...rest}>
-          {value}
+          {/* empty div doesn't take up space. the UI was jumping up and down when there wasn't a value. if there is nothing then put something */}
+          {currentValue || <>&nbsp;</>}
         </div>
       </div>
     </div>

package/react/components/forms/Select.jsx

@@ -65,16 +65,16 @@ export function Select({
   });
   const selectInputRef = /** @type {typeof useRef<HTMLSelectElement>} */ (useRef)(null);
 
-  const { addAssertiveMessage } = useAriaMessaging();
+  const { addPoliteMessage } = useAriaMessaging();
 
   const clearInput = useCallback(
     /** @param {import('react').MouseEvent} e */
     (e) => {
       currentOnClear?.(e);
-      addAssertiveMessage(`${label} input was cleared`);
+      addPoliteMessage(`${label} input was cleared`);
       selectInputRef.current?.focus();
     },
-    [addAssertiveMessage, currentOnClear, label]
+    [addPoliteMessage, currentOnClear, label]
   );
 
   const showClearIcon = !!((isClearable || onClear) && currentValue);

package/react/components/forms/TextArea.jsx

@@ -65,7 +65,7 @@ export function TextArea({
 
   const onChangeSetCursorPosition = useRememberCursorPosition(inputRef, value || '');
 
-  const { addAssertiveMessage } = useAriaMessaging();
+  const { addPoliteMessage } = useAriaMessaging();
 
   const showClearIcon = !!((isClearable || onClear) && currentValue);
 
@@ -73,10 +73,10 @@ export function TextArea({
     /** @param {import('react').UIEvent} e */
     (e) => {
       currentOnClear?.(e);
-      addAssertiveMessage(`${label} input was cleared`);
+      addPoliteMessage(`${label} input was cleared`);
       inputRef.current?.focus();
     },
-    [addAssertiveMessage, currentOnClear, label]
+    [addPoliteMessage, currentOnClear, label]
   );
 
   const checkKeyPressed = useCallback(

package/react/components/forms/TextInput.jsx

@@ -76,7 +76,7 @@ export function TextInput({
 
   const onChangeSetCursorPosition = useRememberCursorPosition(inputRef, value || '');
 
-  const { addAssertiveMessage } = useAriaMessaging();
+  const { addPoliteMessage } = useAriaMessaging();
 
   const showClearIcon = isShowingClearableIcon ?? !!((isClearable || onClear) && currentValue);
 
@@ -88,10 +88,10 @@ export function TextInput({
       } else if (inputRef.current) {
         inputRef.current.value = '';
       }
-      addAssertiveMessage(`${label} input was cleared`);
+      addPoliteMessage(`${label} input was cleared`);
       inputRef.current?.focus();
     },
-    [addAssertiveMessage, currentOnClear, label]
+    [addPoliteMessage, currentOnClear, label]
   );
 
   const checkKeyPressed = useCallback(

package/react/components/forms/TimeInput.jsx

@@ -0,0 +1,166 @@
+import { add, format, isValid, parse } from 'date-fns';
+import { useMemo } from 'react';
+import { joinClassNames } from '../../util/joinClassNames';
+import { ComboBox } from './ComboBox/ComboBox';
+import { ComboBoxOption } from './ComboBox/ComboBoxOption';
+import { useFormContextInputValue } from './FormContext/useFormContextInputValue';
+import { TextInput } from './TextInput';
+
+/**
+ * @param {object} props
+ * @param {boolean} [props.allowCustomEntry] can the user type in their own time that is not in the popup combobox list
+ * @param {string} [props.className]
+ * @param {string} [props.defaultValue]
+ * @param {string} [props.errorMessage]
+ * @param {boolean} [props.hasTimePopup] is there a popup from which the user can select the time?
+ * @param {string} props.id when tied to a Form, the `id` is also the 'dot' path to the data in the form's state: ie person.contact.address.line1
+ * @param {import('react').Ref<HTMLDivElement>} [props.innerRef]
+ * @param {boolean} [props.isClearable] should the clearable "X" icon be shown; is auto set to true if onClear is passed in
+ * @param {boolean} [props.isDisabled]
+ * @param {boolean} [props.isRequired]
+ * @param {string} props.label
+ * @param {string} [props.labelClassName]
+ * @param {string} [props.name]
+ * @param {(newValue: string) => void} [props.onChange] can be omitted to be uncontrolled OR controlled by form
+ * @param {() => void} [props.onClear] (not needed if inside a <Form> context)
+ * @param {string} [props.placeholder]
+ * @param {string} [props.timeFormat] use `date-fns` modifiers for formatting the time options
+ * @param {number} [props.timeRangeIncrement] for popup, what increment (in minutes) for the options given to the user
+ * @param {string} [props.timeRangeBegin] options in popup can start (inclusive) at a given time; format per `props.timeFormat`
+ * @param {string} [props.timeRangeEnd] options in popup can end at the given time (inclusive); format per `props.timeFormat`
+ * @param {string} [props.value]
+ * @param {string} [props.wrapperClassName]
+ * @returns {import('react').JSX.Element}
+ */
+export function TimeInput({
+  allowCustomEntry,
+  className,
+  defaultValue,
+  errorMessage,
+  hasTimePopup = true,
+  id,
+  innerRef,
+  isClearable,
+  isDisabled,
+  isRequired,
+  label,
+  labelClassName,
+  name,
+  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(new Date().setHours(0, 0, 0, 0));
+      const defaultEndDate = new Date(new Date().setHours(23, 59, 0, 0));
+
+      let optionsBeginDate = (timeRangeBegin && parse(timeRangeBegin, timeFormat, new Date())) || null;
+      optionsBeginDate = (optionsBeginDate && isValid(optionsBeginDate)) ? optionsBeginDate : defaultStartDate;
+
+      let optionsEndDate = (timeRangeEnd && parse(timeRangeEnd, timeFormat, 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(
+    () => (
+      <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 (
+    <div className={joinClassNames('time-input__wrapper', wrapperClassName)} ref={innerRef}>
+      {
+        hasTimePopup
+          ? (
+            <ComboBox
+              // COMMON PROPS: make sure these match with TextInput
+              className={className}
+              errorMessage={errorMessage}
+              id={id}
+              isClearable={isClearable}
+              isDisabled={isDisabled}
+              isRequired={isRequired}
+              label={label}
+              labelClassName={labelClassName}
+              name={name || id}
+              onClear={isClearable ? currentOnClear : undefined}
+              placeholder={placeholder}
+              value={currentValue}
+              // END COMMON PROPS
+              allowCustomEntry={allowCustomEntry}
+              iconCallback={() => clockIcon}
+              onChange={currentOnChange}
+              // eslint-disable-next-line react/jsx-props-no-spreading
+              {...rest}
+            >
+              {
+                timeOptions.map((timeOption) => (
+                  <ComboBoxOption
+                    key={`time-input__${id}__${timeOption}`}
+                    label={timeOption}
+                    value={timeOption}
+                  />
+                ))
+              }
+            </ComboBox>
+          )
+          : (
+            <TextInput
+              // COMMON PROPS: make sure these match with ComboBox
+              className={className}
+              errorMessage={errorMessage}
+              id={id}
+              isClearable={isClearable}
+              isDisabled={isDisabled}
+              isRequired={isRequired}
+              label={label}
+              labelClassName={labelClassName}
+              name={name || id}
+              onClear={isClearable ? currentOnClear : undefined}
+              placeholder={placeholder}
+              value={currentValue}
+              // END COMMON PROPS
+              onChange={(e) => currentOnChange(e.target.value)}
+              rightContent={clockIcon}
+              // eslint-disable-next-line react/jsx-props-no-spreading
+              {...rest}
+            />
+          )
+      }
+    </div>
+  );
+}

package/react/components/navigation/HorizontalMenu.jsx

@@ -1,5 +1,5 @@
 import { joinClassNames } from '../../util/joinClassNames';
-import { MenuItem } from './MenuItem';
+import { MenuItemInline } from './items/MenuItemInline';
 
 /** @typedef {import('@utahdts/utah-design-system').WebsiteMainMenu} WebsiteMainMenu */
 /** @typedef {import('@utahdts/utah-design-system').WebsiteMainMenuItem} WebsiteMainMenuItem */
@@ -27,7 +27,7 @@ export function HorizontalMenu({
       <TitleTagName id={id} className={titleTagClassName}>Main Menu</TitleTagName>
       <ul>
         {menu?.menuItems?.map((menuItem) => (
-          <MenuItem menuItem={menuItem} key={`horizontal-menu__nav-link__${menuItem.link}-${menuItem.title}}`} currentMenuItem={currentMenuItem} />
+          <MenuItemInline menuItem={menuItem} key={`horizontal-menu__nav-link__${menuItem.link}-${menuItem.title}}`} currentMenuItem={currentMenuItem} />
         ))}
       </ul>
     </nav>