@utahdts/utah-design-system 4.2.1 → 5.0.0

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": "4.2.1",
+  "version": "5.0.0",
   "exports": {
     ".": {
       "development-local": "./index.js",
@@ -58,7 +58,7 @@
     "utah",
     "components"
   ],
-  "author": "DTS Digital Experience <dtsui@utah.gov>",
+  "author": "DTS Digital Experience <dxp@utah.gov>",
   "license": "Apache 2.0",
   "bugs": {
     "url": "https://github.com/utahdts/utah-design-system/issues"
@@ -68,26 +68,26 @@
     "react": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "@floating-ui/react-dom": "2.1.6",
-    "@utahdts/utah-design-system-header": "4.2.1",
+    "@floating-ui/react-dom": "^2.1.8",
+    "@utahdts/utah-design-system-header": "5.0.0",
     "date-fns": "4.1.0",
-    "immer": "10.2.0",
-    "lodash-es": "4.17.21",
+    "immer": "11.1.4",
+    "lodash-es": "4.17.23",
     "use-immer": "0.11.0",
     "uuid": "13.0.0"
   },
   "devDependencies": {
     "@types/lodash-es": "4.17.12",
-    "@types/react": "^19.2.6",
-    "@vitejs/plugin-react": "5.1.1",
-    "@vitest/coverage-istanbul": "4.0.10",
-    "@vitest/ui": "4.0.10",
-    "jsdom": "27.2.0",
+    "@types/react": "^19.2.13",
+    "@vitejs/plugin-react": "^6.0.1",
+    "@vitest/coverage-istanbul": "^4.1.2",
+    "@vitest/ui": "^4.1.2",
+    "jsdom": "^29.0.1",
     "prop-types": "15.8.1",
-    "sass": "1.94.1",
-    "typescript": "5.9.3",
-    "vite": "7.2.2",
-    "vitest": "4.0.10"
+    "sass": "^1.98.0",
+    "typescript": "^6.0.2",
+    "vite": "^8.0.3",
+    "vitest": "^4.1.2"
   },
   "type": "module"
 }

package/react/components/containers/accordion/Accordion.jsx

@@ -59,6 +59,7 @@ export function Accordion({
       <div
         aria-hidden={!stateIsOpen}
         aria-labelledby={`accordion-button__${id}`}
+        inert={!stateIsOpen}
         className={joinClassNames(['accordion__content', contentClassName, stateIsOpen ? 'accordion__content--open' : ''])}
         id={`accordion-content__${id}`}
         role="region"

package/react/components/containers/tabs/TabPanel.jsx

@@ -24,6 +24,7 @@ export function TabPanel({ children, className, tabId }) {
       id={`tabpanel__${tabGroupId}__${tabId}`}
       role="tabpanel"
       tabIndex={selectedTabId === tabId ? 0 : -1}
+      inert={selectedTabId !== tabId}
     >
       {children}
     </div>

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

@@ -202,7 +202,6 @@ export function MultiSelectComboBox({
           </ComboBox>
           <MultiSelectClearIcon isClearable={isClearable} isDisabled={isDisabled} />
           <IconButton
-            aria-hidden="true"
             className={joinClassNames(
               'multi-select__chevron',
               'icon-button--borderless',

package/react/components/navigation/pagination/Pagination.jsx

@@ -84,26 +84,28 @@ export function Pagination({
     // eslint-disable-next-line react/jsx-props-no-spreading
     <WrapInElement ref={innerRef} className={joinClassNames('pagination', className)} id={id} aria-label={ariaLabel} {...rest}>
       <ul>
-        <IconButton
-          appearance={ICON_BUTTON_APPEARANCE.BORDERLESS}
-          className="pagination__prev"
-          icon={<span className="utds-icon-before-arrow-left" aria-hidden="true" />}
-          isDisabled={currentPageIndex === 0}
-          onClick={useCallback(() => currentOnChange(currentPageIndexRef.current - 1), [currentOnChange, currentPageIndexRef])}
-          title="Previous page"
-        />
+        <li>
+          <IconButton
+            appearance={ICON_BUTTON_APPEARANCE.BORDERLESS}
+            className="pagination__prev"
+            icon={<span className="utds-icon-before-arrow-left" aria-hidden="true" />}
+            isDisabled={currentPageIndex === 0}
+            onClick={useCallback(() => currentOnChange(currentPageIndexRef.current - 1), [currentOnChange, currentPageIndexRef])}
+            title="Previous page"
+          />
+        </li>
 
         {
           paginationLinks.map((paginationLink, paginationLinkIndex) => (
             paginationLink.isEllipsis
               ? (
-                <span
-                  className="pagination__ellipsis"
-                  // eslint-disable-next-line react/no-array-index-key
-                  key={`pagination-link__ellipsis__${paginationLinkIndex}`}
-                >
-                  <span className="utds-icon-before-more-horizontal" aria-hidden="true" />
-                </span>
+                <li key={`pagination-link__ellipsis__${paginationLinkIndex}`}>
+                  <span
+                    className="pagination__ellipsis"
+                  >
+                    <span className="utds-icon-before-more-horizontal" aria-hidden="true" />
+                  </span>
+                </li>
               )
               : (
                 <PaginationLink
@@ -118,14 +120,16 @@ export function Pagination({
           ))
         }
 
-        <IconButton
-          appearance={ICON_BUTTON_APPEARANCE.BORDERLESS}
-          className="pagination__next"
-          icon={<span className="utds-icon-before-arrow-right" aria-hidden="true" />}
-          isDisabled={currentPageIndex === numberOfPages - 1}
-          onClick={useCallback(() => currentOnChange(currentPageIndexRef.current + 1), [currentOnChange, currentPageIndexRef])}
-          title="Next page"
-        />
+        <li>
+          <IconButton
+            appearance={ICON_BUTTON_APPEARANCE.BORDERLESS}
+            className="pagination__next"
+            icon={<span className="utds-icon-before-arrow-right" aria-hidden="true" />}
+            isDisabled={currentPageIndex === numberOfPages - 1}
+            onClick={useCallback(() => currentOnChange(currentPageIndexRef.current + 1), [currentOnChange, currentPageIndexRef])}
+            title="Next page"
+          />
+        </li>
       </ul>
     </WrapInElement>
   );

package/react/components/popups/Popup.jsx

@@ -93,6 +93,7 @@ export function Popup({
       )}
       role={role}
       data-popup-placement={middlewareData?.offset?.placement || placement}
+      inert={!isVisible}
       {...rest}
     >
       <div className="popup__content">

package/react/components/table/TableWrapper.jsx

@@ -57,6 +57,8 @@ function sortByFieldType(sortingRule, fieldValueA, fieldValueB) {
 /**
  * @template TableDataT extends TableDataT & { [x: string]: any; }
  * @param {object} props
+ * @param {boolean} [props.allowScrollOverflow]
+ * @param {string} [props.ariaLabelledBy]
  * @param {import('react').ReactNode} props.children
  * @param {string} [props.className]
  * @param {import('react').RefObject<HTMLDivElement>} [props.innerRef]
@@ -64,12 +66,17 @@ function sortByFieldType(sortingRule, fieldValueA, fieldValueB) {
  * @returns {import('react').JSX.Element}
  */
 export function TableWrapper({
+  allowScrollOverflow,
+  ariaLabelledBy,
   children,
   className,
   id,
   innerRef,
   ...rest
 }) {
+  if (allowScrollOverflow && !ariaLabelledBy) {
+    console.warn(`allowScrollOverflow: TableWrapper is missing a valid ariaLabelledBy attribute`);
+  }
   const internalId = useId();
   /** @type {[TableContextState<TableDataT>, import('use-immer').Updater<import('@utahdts/utah-design-system').TableContextState<TableDataT>>]} */
   const [state, setState] = useImmer(
@@ -212,7 +219,14 @@ export function TableWrapper({
 
   return (
     <TableContext.Provider value={contextValue}>
-      <div className={joinClassNames('table__wrapper', className)} id={id} ref={innerRef} {...rest}>
+      <div
+        aria-labelledby={ariaLabelledBy}
+        className={joinClassNames('table__wrapper', className)}
+        id={id} ref={innerRef}
+        tabIndex={allowScrollOverflow ? 0 : undefined}
+        role={allowScrollOverflow ? 'region' : undefined}
+        {...rest}
+      >
         {children}
       </div>
     </TableContext.Provider>

package/react/components/table/useCurrentValuesFromStateContext.js

@@ -100,6 +100,7 @@ export function useCurrentValuesFromStateContext({
     currentValue = defaultValueRef.current;
   }
 
+  // @ts-expect-error I dont know how to fix this Austin
   return useMemo(
     () => ({
       currentOnChange: (
@@ -126,7 +127,6 @@ export function useCurrentValuesFromStateContext({
           setStateLocal(defaultOnChange(e));
         })
       ),
-      // @ts-expect-error hacked for missing currentValue that shouldn't be?
       currentValue: currentValue ?? '',
       setValue,
     }),