@utahdts/utah-design-system 0.0.1

package/react/components/table/TableWrapper.jsx

@@ -0,0 +1,128 @@
+import { useMemo } from 'react';
+import { useImmer } from 'use-immer';
+import PropTypes from 'prop-types';
+import RefShape from '../../propTypesShapes/RefShape';
+import TableContext from './TableContext';
+import joinClassNames from '../../util/joinClassNames';
+import useRefAlways from '../../hooks/useRefAlways';
+import tableSortingRuleFieldType from '../../enums/tableSortingRuleFieldType';
+import valueAtPath from '../../util/state/valueAtPath';
+
+const propTypes = {
+  children: PropTypes.node.isRequired,
+  className: PropTypes.string,
+  innerRef: RefShape,
+  id: PropTypes.string,
+};
+const defaultProps = {
+  className: null,
+  innerRef: null,
+  id: null,
+};
+
+function TableWrapper({
+  children,
+  className,
+  innerRef,
+  id,
+  ...rest
+}) {
+  const [state, setState] = useImmer({
+    // when sorting, should the sort order for a rule be the "default"
+    // ie a rule defaults to ascending so when currentSortingOrderIsDefault is true then sort that rule ascending
+    currentSortingOrderIsDefault: true,
+    // [recordFieldPath]: filterValue <== the current filtering values from <TableFilter... /> components
+    filterValues: {
+      // context level values from a <TableFilters /> component (<TableFilter... /> child components would override/chain these values)
+      // defaultValue - object of [recordFieldPath]:value pairs for filtering inputs
+      defaultValue: null,
+      // onChange to call for any filter change
+      onChange: null,
+      // value - object of [recordFieldPath]:value pairs for filtering inputs
+      value: null,
+    },
+    // these are the sorting rules to which a <TableHeadCell> connects assumes order is add order
+    sortingRules: {},
+    // (func) when table sorting changes, this callback will be called: from <TableSortingRules>
+    tableSortingOnChange: null,
+    // (string | [string]) the current recordFieldPath name for the current header being sorted
+    // array if <TableHeadCell> specifies sort order; otherwise, sort fields in registration order
+    // set when a TableHeadCell is selected and sets its tableSortingFieldPaths as the tableSortingFieldPath
+    // TableBodyData uses this value to sort its records
+    tableSortingFieldPath: null,
+    // a TableHeadCell can provide tableSortingFieldPaths to customize which sorters to use in which order
+    tableSortingFieldPaths: null,
+  });
+  const stateRef = useRefAlways(state);
+
+  const contextValue = useMemo(
+    () => ({
+      // register a new rule for sorting, generally from a <TableSortingRule>
+      registerSortingRule: (sortingRule) => setState((draftState) => {
+        draftState.sortingRules[sortingRule.recordFieldPath] = {
+          ...sortingRule,
+          sorter: (
+            (recordA, recordB, records) => {
+              const fieldValueA = valueAtPath({ object: recordA.record, path: sortingRule.recordFieldPath });
+              const fieldValueB = valueAtPath({ object: recordB.record, path: sortingRule.recordFieldPath });
+
+              let result;
+              if (sortingRule.customSort) {
+                // custom sorting
+                result = sortingRule.customSort({
+                  fieldValueA,
+                  fieldValueB,
+                  recordA: recordA.record,
+                  recordAIndex: recordA.recordIndex,
+                  recordB: recordB.record,
+                  recordBIndex: recordB.recordIndex,
+                  records,
+                });
+              } else {
+                // sort by field type
+                switch (sortingRule.fieldType) {
+                  case tableSortingRuleFieldType.DATE:
+                    result = (fieldValueA?.getTime() || 0) - (fieldValueB?.getTime() || 0);
+                    break;
+
+                  case tableSortingRuleFieldType.NUMBER:
+                    result = Number(fieldValueA || 0) - Number(fieldValueB || 0);
+                    break;
+
+                  case tableSortingRuleFieldType.STRING:
+                    result = (fieldValueA || '').localeCompare(fieldValueB || '');
+                    break;
+
+                  default:
+                    throw new Error(`Unknown tableSortingRuleFieldType '${sortingRule.fieldType}'`);
+                }
+              }
+
+              // return sort result modified for sort order
+              return result * (stateRef.current.currentSortingOrderIsDefault ? 1 : -1) * (sortingRule.defaultIsAscending ? 1 : -1);
+            }
+          ),
+        };
+      }),
+      // unregister a rule for sorting, generally when a <TableSortingRule> unmounts
+      unregisterSortingRule: (recordFieldPath) => setState((draftState) => { delete draftState.sortingRules[recordFieldPath]; }),
+
+      setState,
+      state,
+    }),
+    [state]
+  );
+
+  return (
+    <TableContext.Provider value={contextValue}>
+      <div className={joinClassNames('some-table-wrapper-classname', className)} id={id} ref={innerRef} {...rest}>
+        {children}
+      </div>
+    </TableContext.Provider>
+  );
+}
+
+TableWrapper.propTypes = propTypes;
+TableWrapper.defaultProps = defaultProps;
+
+export default TableWrapper;

package/react/components/table/useCurrentValuesFromStateContext.js

@@ -0,0 +1,73 @@
+import { useContext, useEffect } from 'react';
+import { useImmer } from 'use-immer';
+import setValueAtPath from '../../util/state/setValueAtPath';
+import valueAtPath from '../../util/state/valueAtPath';
+
+/**
+ * An input can be controlled, uncontrolled, default value, or controlled by a parent context
+ * This function takes these values in to account and provides a current value and onChange event
+ * The passed in values trump those of the parent context. A local state is used if neither passed in nor
+ * context have a value.
+ *
+ * @param {context} React.createContext from which to pull state/setState
+ * @param {contextStatePath} string the path to the data inside the state; ie {filterValues:{...}} where filterValues is actual state in the context
+ * @param {defaultValue} string starting value for this component (controlled and uncontrolled)
+ * @param {onChange} func when the value changes, call this function; ie (e) => { do something with e }
+ * @param {value} any the current value of this item
+ */
+export default function useCurrentValuesFromStateContext({
+  // the React.createContext being questioned
+  context,
+  // the path in the state object of the context to the data being used
+  contextStatePath,
+  // if onChange is not found on context nor passed in, then use this onChange to get the value
+  defaultOnChange,
+  // the defaultValue the child component was given
+  defaultValue,
+  // the onChange the child component was given
+  onChange,
+  // the value the child component was given
+  value,
+}) {
+  const { setState: setStateContext, state: stateContext } = useContext(context);
+  const [stateLocal, setStateLocal] = useImmer(defaultValue);
+
+  const fullContextStatePath = `filterValues.value.${contextStatePath}`;
+
+  // put default value in to current filter value on mount if there is one
+  useEffect(
+    () => {
+      if (defaultValue) {
+        setStateContext((draftStateContext) => {
+          setValueAtPath({ object: draftStateContext, path: fullContextStatePath, value: defaultValue });
+        });
+      }
+    },
+    [defaultValue]
+  );
+
+  return {
+    currentOnChange: (
+      // use passed in onChange
+      onChange
+      // use onChange from context (controlled by <TableFilters />)
+      || (stateContext?.filterValues?.onChange && ((e) => (
+        stateContext?.filterValues?.onChange({ recordFieldPath: contextStatePath, value: defaultOnChange(e) })
+      )))
+      // set context filterValues directly (not controlled by <TableFilters />)
+      || (setStateContext && ((e) => setStateContext((draftStateContext) => {
+        setValueAtPath({ object: draftStateContext, path: fullContextStatePath, value: defaultOnChange(e) });
+      })))
+      // no context, so use local state
+      || ((newValue) => setStateLocal(defaultOnChange(newValue)))
+    ),
+    currentValue: (
+      // passed in value (controlled)
+      value
+      // context's value (context controlled)
+      ?? valueAtPath({ object: stateContext, path: fullContextStatePath })
+      // pull from local state (which defaults to defaultValue)
+      ?? stateLocal
+    ),
+  };
+}

package/react/components/templates/DocumentationTemplate.jsx

@@ -0,0 +1,52 @@
+import PropTypes from 'prop-types';
+import MenuItemShape from '../../propTypesShapes/MenuItemShape';
+import MenuShape from '../../propTypesShapes/MenuShape';
+import UtahHeader from '../utahHeader/UtahHeader';
+import MainMenu from '../navigation/MainMenu';
+import RefShape from '../../propTypesShapes/RefShape';
+
+const propTypes = {
+  content: PropTypes.element.isRequired,
+  contentRef: RefShape.isRequired,
+  currentMenuItem: MenuItemShape,
+  mainMenu: MenuShape.isRequired,
+  sidePanelRightContent: PropTypes.element.isRequired,
+  sidePanelLeftContent: PropTypes.element.isRequired,
+};
+const defaultProps = {
+  currentMenuItem: null,
+};
+
+function DocumentationTemplate({
+  content,
+  contentRef,
+  currentMenuItem,
+  mainMenu,
+  sidePanelRightContent,
+  sidePanelLeftContent,
+}) {
+  return (
+    <>
+      <UtahHeader />
+      <MainMenu currentMenuItem={currentMenuItem} menu={mainMenu} />
+      <div className="documentation-template__wrapper">
+        <div className="documentation-template">
+          <div className="documentation-template__side-panel-left">
+            {sidePanelLeftContent}
+          </div>
+          <main className="documentation-template__content" ref={contentRef}>
+            {content}
+          </main>
+          <div className="documentation-template__side-panel-right">
+            {sidePanelRightContent}
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
+
+DocumentationTemplate.propTypes = propTypes;
+DocumentationTemplate.defaultProps = defaultProps;
+
+export default DocumentationTemplate;

package/react/components/templates/LandingTemplate.jsx

@@ -0,0 +1,29 @@
+import PropTypes from 'prop-types';
+import MenuItemShape from '../../propTypesShapes/MenuItemShape';
+import MenuShape from '../../propTypesShapes/MenuShape';
+import MainMenu from '../navigation/MainMenu';
+import UtahHeader from '../utahHeader/UtahHeader';
+
+const propTypes = {
+  content: PropTypes.element.isRequired,
+  currentMenuItem: MenuItemShape,
+  mainMenu: MenuShape.isRequired,
+};
+const defaultProps = {
+  currentMenuItem: null,
+};
+
+function LandingTemplate({ content, currentMenuItem, mainMenu }) {
+  return (
+    <>
+      <UtahHeader />
+      <MainMenu currentMenuItem={currentMenuItem} menu={mainMenu} />
+      {content}
+    </>
+  );
+}
+
+LandingTemplate.propTypes = propTypes;
+LandingTemplate.defaultProps = defaultProps;
+
+export default LandingTemplate;

package/react/components/utahHeader/UtahHeader.jsx

@@ -0,0 +1,25 @@
+import UtahUnbrand from './UtahUnbrand';
+
+const propTypes = {};
+const defaultProps = {};
+
+function UtahHeader() {
+  return (
+    <div className="header">
+      <UtahUnbrand className="header__utah-brand" />
+
+      <span className="header__vertical-rule" />
+      <span className="header__department">
+        Utah Design System
+      </span>
+      <button className="header__sign-in button--solid" type="button">
+        Sign In
+      </button>
+    </div>
+  );
+}
+
+UtahHeader.propTypes = propTypes;
+UtahHeader.defaultProps = defaultProps;
+
+export default UtahHeader;

package/react/components/utahHeader/UtahUnbrand.jsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import joinClassNames from '../../util/joinClassNames';
+
+const propTypes = {
+  className: PropTypes.string,
+};
+const defaultProps = {
+  className: undefined,
+};
+
+function UtahUnbrand({ className }) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 137.363 52.7618" className={joinClassNames(['utah-brand', className])}>
+      <g>
+        <g>
+          <path d="M15.972,39.161c-5.4,0-9.4127-1.5667-12.038-4.7C1.3087,31.3277-.0027,26.466,0,19.876V0H10.175V21.06c0,3.4313,.4633,5.847,1.39,7.247,.9909,1.434,2.669,2.2337,4.407,2.1,1.7525,.124,3.4436-.6712,4.466-2.1,.966-1.4,1.449-3.8157,1.449-7.247V0h9.82V19.876c0,6.586-1.2817,11.4467-3.845,14.582-2.5633,3.1353-6.5267,4.703-11.89,4.703Zm31.353-.711V8.518h-10.175V0h30.525V8.518h-10.175v29.932h-10.175Zm33.6-18.693l-.651,2.662h7.1l-.651-2.662c-.4733-1.8533-.9467-3.8647-1.42-6.034-.4733-2.1693-.945-4.2197-1.415-6.151h-.237c-.434,1.972-.8777,4.0327-1.331,6.182s-.918,4.1507-1.394,6.004l-.001-.001Zm-14.788,18.693L77.85,0h12.3l11.717,38.45h-10.767l-1.893-8.162h-10.766l-1.893,8.162h-10.411Zm39.4,0V0h10.175V14.316h11.476V0h10.175V38.45h-10.175v-15.261h-11.479v15.261h-10.172Z" />
+        </g>
+        <g>
+          <path d="M.0839,52.5939l3.1079-9.1841h1.3159l3.1084,9.1841h-1.2461l-.8682-2.7998H2.1557l-.8818,2.7998H.0839Zm2.7998-5.1382l-.4336,1.4004h2.7578l-.4341-1.4004c-.168-.5132-.3267-1.0239-.4761-1.5327s-.2988-1.0293-.4478-1.561h-.0562c-.1401,.5317-.2847,1.0522-.4341,1.561s-.3081,1.0195-.4761,1.5327Z" />
+          <path d="M8.8056,52.5939v-6.8042h.9521l.0981,.98h.042c.3262-.3262,.6694-.5996,1.0288-.8188s.7769-.3291,1.2529-.3291c.7188,0,1.2437,.2241,1.5752,.6724,.3311,.4478,.4971,1.1108,.4971,1.9878v4.312h-1.1484v-4.1582c0-.6436-.1025-1.1079-.3076-1.3926-.2056-.2847-.5322-.4272-.98-.4272-.355,0-.6675,.0889-.938,.2661-.271,.1772-.5791,.439-.9243,.7837v4.9282h-1.1479Z" />
+          <path d="M21.9096,52.7618c-.4199,0-.8188-.0796-1.1968-.2378-.3779-.1587-.7119-.3896-1.001-.6934-.2896-.3032-.5205-.6763-.6934-1.1196s-.2588-.9453-.2588-1.5054c0-.5688,.0859-1.0752,.2588-1.519,.1729-.4429,.4038-.8188,.6934-1.127,.2891-.3076,.623-.541,1.001-.6997s.7769-.2383,1.1968-.2383,.8188,.0796,1.1973,.2383c.3779,.1587,.7114,.3921,1.001,.6997,.2891,.3081,.52,.6841,.6929,1.127,.1724,.4438,.2588,.9502,.2588,1.519,0,.5601-.0864,1.062-.2588,1.5054-.1729,.4434-.4038,.8164-.6929,1.1196-.2896,.3037-.623,.5347-1.001,.6934-.3784,.1582-.7773,.2378-1.1973,.2378Zm0-.9521c.2891,0,.5552-.063,.7979-.189s.4502-.3032,.623-.5317,.3057-.502,.3989-.8193c.0933-.3169,.1401-.6719,.1401-1.064,0-.3916-.0469-.749-.1401-1.0708s-.2261-.5996-.3989-.833-.3804-.4131-.623-.5391-.5088-.189-.7979-.189c-.2896,0-.5552,.063-.7979,.189s-.4507,.3057-.623,.5391c-.1729,.2334-.3057,.5112-.3989,.833-.0938,.3218-.1401,.6792-.1401,1.0708,0,.3921,.0464,.7471,.1401,1.064,.0933,.3174,.2261,.5908,.3989,.8193,.1724,.2285,.3804,.4058,.623,.5317s.5083,.189,.7979,.189Z" />
+          <path d="M31.0375,52.5939v-5.8662h-2.8418v5.8662h-1.1479v-5.8662h-.9243v-.8677l.9243-.0703v-.896c0-.709,.1748-1.269,.5249-1.6797s.8794-.6162,1.5889-.6162c.2241,0,.4458,.0234,.665,.0703,.2192,.0464,.4131,.1074,.5811,.1816l-.2383,.8682c-.2798-.1211-.583-.1821-.9097-.1821-.3359,0-.5977,.1191-.7842,.3569-.187,.2383-.2798,.5811-.2798,1.0293v.8677h2.8418v-1.0776c0-.7002,.1611-1.251,.4829-1.6523,.3223-.4009,.8237-.6021,1.5049-.6021,.2148,0,.418,.021,.6094,.063,.1909,.0425,.3662,.0962,.5249,.1611l-.252,.8823c-.252-.1123-.5088-.1685-.77-.1685-.6348,0-.9521,.439-.9521,1.3164v1.0776h1.4419v.938h-1.4419v5.8662h-1.1479Z" />
+          <path d="M35.5175,44.3898c-.2236,0-.4126-.0698-.5669-.21-.1538-.1401-.231-.3169-.231-.5317,0-.2241,.0771-.4038,.231-.5391,.1543-.1353,.3433-.2031,.5669-.2031,.2241,0,.4131,.0679,.5674,.2031,.1538,.1353,.231,.3149,.231,.5391,0,.2148-.0771,.3916-.231,.5317-.1543,.1401-.3433,.21-.5674,.21Zm-.5879,8.2041v-6.8042h1.1479v6.8042h-1.1479Z" />
+          <path d="M41.0614,52.7618c-.4478,0-.8682-.0796-1.2598-.2378-.3921-.1587-.7305-.3896-1.0151-.6934-.2847-.3032-.5088-.6763-.6719-1.1196-.1636-.4434-.2451-.9453-.2451-1.5054,0-.5688,.0884-1.0752,.2661-1.519,.1772-.4429,.415-.8188,.7139-1.127,.2983-.3076,.646-.541,1.043-.6997,.3965-.1587,.814-.2383,1.2529-.2383,.4482,0,.8306,.0796,1.1479,.2383s.5972,.3452,.8403,.5601l-.5884,.7559c-.1958-.1772-.4038-.3223-.623-.4341s-.4644-.168-.7349-.168c-.3081,0-.5928,.063-.854,.189s-.4854,.3057-.6719,.5391c-.187,.2334-.334,.5112-.4409,.833-.1074,.3218-.1611,.6792-.1611,1.0708,0,.3921,.0513,.7471,.1538,1.064,.103,.3174,.2451,.5908,.4272,.8193s.4033,.4058,.665,.5317c.2612,.126,.5459,.189,.854,.189,.3169,0,.6089-.0674,.875-.2026s.5063-.2964,.7207-.4834l.5044,.77c-.3081,.271-.6489,.4834-1.022,.6372-.3735,.1538-.7656,.231-1.1763,.231Z" />
+          <path d="M45.3451,44.3898c-.2236,0-.4126-.0698-.5669-.21-.1538-.1401-.231-.3169-.231-.5317,0-.2241,.0771-.4038,.231-.5391,.1543-.1353,.3433-.2031,.5669-.2031,.2241,0,.4131,.0679,.5674,.2031,.1533,.1353,.2314,.3149,.2314,.5391,0,.2148-.0781,.3916-.2314,.5317-.1543,.1401-.3433,.21-.5674,.21Zm-.5879,8.2041v-6.8042h1.1484v6.8042h-1.1484Z" />
+          <path d="M49.769,52.7618c-.5693,0-1.043-.168-1.4209-.5039s-.5674-.812-.5674-1.4282c0-.7466,.332-1.3179,.9941-1.7148,.6631-.3965,1.7227-.6743,3.1787-.833,0-.2144-.0215-.4248-.0635-.6299s-.1143-.3872-.2168-.5459-.2451-.2871-.4268-.3853c-.1826-.0981-.4131-.147-.6934-.147-.3916,0-.7607,.0747-1.1064,.2241-.3447,.1494-.6533,.3174-.9238,.5039l-.4473-.7979c.3164-.2056,.7041-.4038,1.1611-.5952,.458-.1909,.9619-.2871,1.5127-.2871,.8301,0,1.4326,.2544,1.8057,.7632s.5596,1.188,.5596,2.0371v4.1719h-.9512l-.0986-.812h-.042c-.3262,.271-.6768,.502-1.0498,.6929-.373,.1914-.7744,.2871-1.2041,.2871Zm.3359-.9238c.3271,0,.6348-.0771,.9238-.231,.29-.1543,.5977-.3804,.9248-.6792v-1.8901c-.5693,.0752-1.0479,.1636-1.4355,.2661-.3877,.103-.7002,.2241-.9375,.3643-.2383,.1396-.4111,.3008-.5186,.4829-.1074,.1816-.1611,.3804-.1611,.5947,0,.3921,.1172,.6724,.3506,.8403s.5176,.252,.8535,.252Z" />
+          <path d="M56.475,52.7618c-.4395,0-.752-.1309-.9385-.3921s-.2793-.644-.2793-1.1479v-8.5957h1.1475v8.6797c0,.187,.0322,.3174,.0977,.3921s.1406,.1118,.2246,.1118h.1045c.0332,0,.082-.0088,.1475-.0278l.1543,.8682c-.0752,.0371-.1641,.0649-.2666,.084-.1025,.0186-.2334,.0278-.3916,.0278Z" />
+          <path d="M63.4047,52.7618c-.4854,0-.9473-.0889-1.3857-.2661s-.8213-.4009-1.1484-.6719l.5742-.77c.2988,.2427,.6045,.439,.917,.5879,.3125,.1494,.6748,.2241,1.085,.2241,.4482,0,.7842-.1025,1.0078-.3081,.2246-.2051,.3359-.457,.3359-.7559,0-.1772-.0459-.3311-.1396-.4619s-.2119-.2451-.3564-.3433c-.1455-.0977-.3105-.1841-.4971-.2588-.1875-.0747-.374-.1494-.5605-.2241-.2422-.084-.4854-.1797-.7275-.2871-.2432-.1069-.46-.2378-.6514-.3916-.1914-.1543-.3477-.334-.4688-.5391-.1211-.2056-.1826-.4526-.1826-.7422,0-.2705,.0537-.5249,.1611-.7632,.1074-.2378,.2617-.4429,.4619-.6157,.2012-.1729,.4463-.3081,.7354-.4062,.2891-.0977,.6162-.147,.9805-.147,.4287,0,.8232,.0752,1.1826,.2241,.3594,.1494,.6699,.3315,.9307,.5459l-.5459,.728c-.2334-.1772-.4756-.3218-.7275-.4341-.252-.1118-.5273-.168-.8262-.168-.4297,0-.7441,.0981-.9453,.2939-.2002,.1963-.3008,.4248-.3008,.686,0,.1592,.042,.2964,.126,.4131s.1963,.2197,.3359,.3081c.1396,.0889,.3008,.168,.4834,.2378,.1816,.0703,.3711,.1426,.5664,.2173,.2432,.0933,.4883,.1914,.7354,.2939,.2471,.103,.4688,.231,.665,.3848,.1963,.1543,.3564,.3433,.4824,.5674,.127,.2236,.1895,.4946,.1895,.812,0,.2798-.0537,.541-.1611,.7837-.1074,.2432-.2656,.4575-.4756,.644-.21,.187-.4717,.334-.7842,.4409-.3125,.1074-.6699,.1611-1.0713,.1611Z" />
+          <path d="M69.3549,52.7618c-.3643,0-.6699-.0562-.917-.168s-.4482-.2661-.6016-.4619c-.1543-.1963-.2646-.4341-.3291-.7139-.0654-.2803-.0986-.5884-.0986-.9243v-3.7661h-1.0078v-.8677l1.0645-.0703,.1396-1.9038h.9658v1.9038h1.834v.938h-1.834v3.7803c0,.4199,.0771,.7441,.2314,.9731,.1533,.2285,.4268,.3428,.8184,.3428,.1211,0,.252-.0186,.3926-.0562,.1396-.0371,.2656-.0791,.3779-.126l.2236,.8682c-.1865,.0654-.3896,.1235-.6084,.1748-.2197,.0513-.4365,.0771-.6514,.0771Z" />
+          <path d="M73.2192,52.7618c-.5693,0-1.043-.168-1.4209-.5039s-.5674-.812-.5674-1.4282c0-.7466,.332-1.3179,.9941-1.7148,.6631-.3965,1.7227-.6743,3.1787-.833,0-.2144-.0215-.4248-.0635-.6299s-.1143-.3872-.2168-.5459-.2451-.2871-.4268-.3853c-.1826-.0981-.4131-.147-.6934-.147-.3916,0-.7607,.0747-1.1064,.2241-.3447,.1494-.6533,.3174-.9238,.5039l-.4473-.7979c.3164-.2056,.7041-.4038,1.1611-.5952,.458-.1909,.9619-.2871,1.5127-.2871,.8301,0,1.4326,.2544,1.8057,.7632s.5596,1.188,.5596,2.0371v4.1719h-.9512l-.0986-.812h-.042c-.3262,.271-.6768,.502-1.0498,.6929-.373,.1914-.7744,.2871-1.2041,.2871Zm.3359-.9238c.3271,0,.6348-.0771,.9238-.231,.29-.1543,.5977-.3804,.9248-.6792v-1.8901c-.5693,.0752-1.0479,.1636-1.4355,.2661-.3877,.103-.7002,.2241-.9375,.3643-.2383,.1396-.4111,.3008-.5186,.4829-.1074,.1816-.1611,.3804-.1611,.5947,0,.3921,.1172,.6724,.3506,.8403s.5176,.252,.8535,.252Z" />
+          <path d="M80.6528,52.7618c-.3643,0-.6699-.0562-.917-.168s-.4482-.2661-.6016-.4619c-.1543-.1963-.2646-.4341-.3291-.7139-.0654-.2803-.0986-.5884-.0986-.9243v-3.7661h-1.0078v-.8677l1.0645-.0703,.1396-1.9038h.9658v1.9038h1.834v.938h-1.834v3.7803c0,.4199,.0771,.7441,.2314,.9731,.1533,.2285,.4268,.3428,.8184,.3428,.1211,0,.252-.0186,.3926-.0562,.1396-.0371,.2656-.0791,.3779-.126l.2236,.8682c-.1865,.0654-.3896,.1235-.6084,.1748-.2197,.0513-.4365,.0771-.6514,.0771Z" />
+          <path d="M85.8051,52.7618c-.458,0-.8848-.0815-1.2812-.2451-.3965-.1631-.7422-.3965-1.0361-.6997s-.5244-.6743-.6924-1.1133c-.1689-.4385-.2529-.938-.2529-1.498s.0869-1.0615,.2598-1.5049c.1719-.4434,.4004-.8188,.6855-1.127s.6094-.5435,.9727-.707c.3643-.1631,.7422-.2451,1.1348-.2451,.4287,0,.8135,.0752,1.1543,.2241,.3408,.1494,.626,.3643,.8545,.644s.4033,.6162,.5254,1.0078c.1211,.3921,.1816,.8311,.1816,1.3164,0,.1211-.0029,.2402-.0068,.3569-.0049,.1167-.0166,.2168-.0352,.3008h-4.5918c.0459,.728,.2725,1.3047,.6787,1.729,.4062,.4248,.9355,.6372,1.5889,.6372,.3271,0,.6279-.0493,.9033-.147,.2754-.0981,.5391-.2266,.791-.3853l.4062,.7559c-.2988,.187-.6309,.3501-.9941,.4902-.3643,.1401-.7793,.21-1.2461,.21Zm-2.1426-4.1162h3.6406c0-.6904-.1475-1.2153-.4414-1.5747s-.707-.5391-1.2393-.5391c-.2422,0-.4736,.0469-.6924,.1401-.2197,.0933-.418,.231-.5957,.4131-.1768,.1816-.3242,.4038-.4404,.6646-.1172,.2617-.1943,.5601-.2314,.896Z" />
+          <path d="M93.8686,52.5939l-1.8896-6.8042h1.1758l1.0078,3.9341c.0752,.3271,.1455,.644,.2109,.9521,.0645,.3081,.1299,.6206,.1953,.938h.0566c.0742-.3174,.1484-.6323,.2236-.9448,.0742-.313,.1543-.6279,.2383-.9453l1.0498-3.9341h1.1201l1.0635,3.9341c.084,.3271,.166,.644,.2451,.9521s.1562,.6206,.2314,.938h.0557c.0742-.3174,.1445-.6299,.21-.938s.1357-.625,.21-.9521l.9941-3.9341h1.0918l-1.8193,6.8042h-1.4004l-.9805-3.6538c-.084-.3267-.1602-.6489-.2305-.9663-.0703-.3169-.1475-.6484-.2314-.9937h-.0557c-.0752,.3452-.1494,.6787-.2236,1.001-.0752,.3218-.1592,.646-.252,.9727l-.9521,3.6401h-1.3447Z" />
+          <path d="M105.5453,52.7618c-.458,0-.8848-.0815-1.2812-.2451-.3965-.1631-.7422-.3965-1.0361-.6997s-.5244-.6743-.6924-1.1133c-.1689-.4385-.2529-.938-.2529-1.498s.0869-1.0615,.2598-1.5049c.1719-.4434,.4004-.8188,.6855-1.127s.6094-.5435,.9727-.707c.3643-.1631,.7422-.2451,1.1348-.2451,.4287,0,.8135,.0752,1.1543,.2241,.3408,.1494,.626,.3643,.8545,.644s.4033,.6162,.5254,1.0078c.1211,.3921,.1816,.8311,.1816,1.3164,0,.1211-.0029,.2402-.0068,.3569-.0049,.1167-.0166,.2168-.0352,.3008h-4.5918c.0459,.728,.2725,1.3047,.6787,1.729,.4062,.4248,.9355,.6372,1.5889,.6372,.3271,0,.6279-.0493,.9033-.147,.2754-.0981,.5391-.2266,.791-.3853l.4062,.7559c-.2988,.187-.6309,.3501-.9941,.4902-.3643,.1401-.7793,.21-1.2461,.21Zm-2.1426-4.1162h3.6406c0-.6904-.1475-1.2153-.4414-1.5747s-.707-.5391-1.2393-.5391c-.2422,0-.4736,.0469-.6924,.1401-.2197,.0933-.418,.231-.5957,.4131-.1768,.1816-.3242,.4038-.4404,.6646-.1172,.2617-.1943,.5601-.2314,.896Z" />
+          <path d="M112.7406,52.7618c-.3174,0-.6465-.0771-.9873-.231s-.6602-.3662-.959-.6372h-.042l-.0977,.7002h-.9238v-9.9678h1.1475v2.7158l-.0283,1.2319c.3086-.2705,.6445-.4971,1.0088-.6792,.3633-.1816,.7373-.2729,1.1201-.2729,.4385,0,.8252,.082,1.1611,.2451,.3359,.1636,.6182,.397,.8477,.7002,.2285,.3032,.4014,.6675,.5176,1.0918,.1172,.4248,.1748,.8984,.1748,1.4209,0,.5791-.0791,1.0972-.2373,1.5542-.1592,.4575-.374,.8447-.6445,1.1621s-.583,.5576-.9375,.7207c-.3555,.1636-.7285,.2451-1.1201,.2451Zm-.1963-.9658c.2803,0,.5391-.063,.7773-.189,.2373-.126,.4434-.3032,.6162-.5322,.1719-.2285,.3076-.5107,.4053-.8472,.0986-.3359,.1475-.7139,.1475-1.1338,0-.373-.0332-.7139-.0986-1.022s-.1699-.5718-.3145-.791-.3311-.3896-.5605-.5112c-.2285-.1211-.501-.1816-.8184-.1816-.5508,0-1.1572,.3076-1.8203,.9238v3.5698c.2988,.2617,.5947,.4458,.8887,.5532s.5537,.1611,.7773,.1611Z" />
+          <path d="M119.2504,52.7618c-.4854,0-.9473-.0889-1.3857-.2661s-.8213-.4009-1.1484-.6719l.5742-.77c.2988,.2427,.6045,.439,.917,.5879,.3125,.1494,.6748,.2241,1.085,.2241,.4482,0,.7842-.1025,1.0078-.3081,.2246-.2051,.3359-.457,.3359-.7559,0-.1772-.0459-.3311-.1396-.4619s-.2119-.2451-.3564-.3433c-.1455-.0977-.3105-.1841-.4971-.2588-.1875-.0747-.374-.1494-.5605-.2241-.2422-.084-.4854-.1797-.7275-.2871-.2432-.1069-.46-.2378-.6514-.3916-.1914-.1543-.3477-.334-.4688-.5391-.1211-.2056-.1826-.4526-.1826-.7422,0-.2705,.0537-.5249,.1611-.7632,.1074-.2378,.2617-.4429,.4619-.6157,.2012-.1729,.4463-.3081,.7354-.4062,.2891-.0977,.6162-.147,.9805-.147,.4287,0,.8232,.0752,1.1826,.2241,.3594,.1494,.6699,.3315,.9307,.5459l-.5459,.728c-.2334-.1772-.4756-.3218-.7275-.4341-.252-.1118-.5273-.168-.8262-.168-.4297,0-.7441,.0981-.9453,.2939-.2002,.1963-.3008,.4248-.3008,.686,0,.1592,.042,.2964,.126,.4131s.1963,.2197,.3359,.3081c.1396,.0889,.3008,.168,.4834,.2378,.1816,.0703,.3711,.1426,.5664,.2173,.2432,.0933,.4883,.1914,.7354,.2939,.2471,.103,.4688,.231,.665,.3848,.1963,.1543,.3564,.3433,.4824,.5674,.127,.2236,.1895,.4946,.1895,.812,0,.2798-.0537,.541-.1611,.7837-.1074,.2432-.2656,.4575-.4756,.644-.21,.187-.4717,.334-.7842,.4409-.3125,.1074-.6699,.1611-1.0713,.1611Z" />
+          <path d="M123.9262,44.3898c-.2246,0-.4131-.0698-.5674-.21s-.2305-.3169-.2305-.5317c0-.2241,.0762-.4038,.2305-.5391s.3428-.2031,.5674-.2031c.2236,0,.4131,.0679,.5664,.2031,.1543,.1353,.2314,.3149,.2314,.5391,0,.2148-.0771,.3916-.2314,.5317-.1533,.1401-.3428,.21-.5664,.21Zm-.5879,8.2041v-6.8042h1.1475v6.8042h-1.1475Z" />
+          <path d="M128.9242,52.7618c-.3643,0-.6699-.0562-.917-.168s-.4482-.2661-.6016-.4619c-.1543-.1963-.2646-.4341-.3291-.7139-.0654-.2803-.0986-.5884-.0986-.9243v-3.7661h-1.0078v-.8677l1.0645-.0703,.1396-1.9038h.9658v1.9038h1.834v.938h-1.834v3.7803c0,.4199,.0771,.7441,.2314,.9731,.1533,.2285,.4268,.3428,.8184,.3428,.1211,0,.252-.0186,.3926-.0562,.1396-.0371,.2656-.0791,.3779-.126l.2236,.8682c-.1865,.0654-.3896,.1235-.6084,.1748-.2197,.0513-.4365,.0771-.6514,.0771Z" />
+          <path d="M134.0766,52.7618c-.458,0-.8848-.0815-1.2812-.2451-.3965-.1631-.7422-.3965-1.0361-.6997s-.5244-.6743-.6924-1.1133c-.1689-.4385-.2529-.938-.2529-1.498s.0869-1.0615,.2598-1.5049c.1719-.4434,.4004-.8188,.6855-1.127s.6094-.5435,.9727-.707c.3643-.1631,.7422-.2451,1.1348-.2451,.4287,0,.8135,.0752,1.1543,.2241,.3408,.1494,.626,.3643,.8545,.644s.4033,.6162,.5254,1.0078c.1211,.3921,.1816,.8311,.1816,1.3164,0,.1211-.0029,.2402-.0068,.3569-.0049,.1167-.0166,.2168-.0352,.3008h-4.5918c.0459,.728,.2725,1.3047,.6787,1.729,.4062,.4248,.9355,.6372,1.5889,.6372,.3271,0,.6279-.0493,.9033-.147,.2754-.0981,.5391-.2266,.791-.3853l.4062,.7559c-.2988,.187-.6309,.3501-.9941,.4902-.3643,.1401-.7793,.21-1.2461,.21Zm-2.1426-4.1162h3.6406c0-.6904-.1475-1.2153-.4414-1.5747s-.707-.5391-1.2393-.5391c-.2422,0-.4736,.0469-.6924,.1401-.2197,.0933-.418,.231-.5957,.4131-.1768,.1816-.3242,.4038-.4404,.6646-.1172,.2617-.1943,.5601-.2314,.896Z" />
+        </g>
+      </g>
+    </svg>
+  );
+}
+
+UtahUnbrand.propTypes = propTypes;
+UtahUnbrand.defaultProps = defaultProps;
+
+export default UtahUnbrand;

package/react/components/widgetsIndicators/Spinner.jsx

@@ -0,0 +1,71 @@
+import PropTypes from 'prop-types';
+import RefShape from '../../propTypesShapes/RefShape';
+import joinClassNames from '../../util/joinClassNames';
+
+const propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  id: PropTypes.string,
+  innerRef: RefShape,
+  size: PropTypes.number,
+  strokeWidth: PropTypes.number,
+  value: (props, propName, componentName) => {
+    const number = Number(props[propName]);
+    if (!Number.isNaN(props[propName]) && Number.isNaN(number)) {
+      throw new Error(`Invalid prop '${propName}' passed to ${componentName}. Must be a number.`);
+    }
+    if (number !== undefined && (number < 0 || number > 1)) {
+      throw new Error(`Invalid prop '${propName}' passed to ${componentName}. Must be a number between 0 and 1 (inclusive).`);
+    }
+    return false;
+  },
+};
+const defaultProps = {
+  children: null,
+  className: null,
+  id: null,
+  innerRef: null,
+  size: 60,
+  strokeWidth: 10,
+  value: NaN,
+};
+
+function Spinner({
+  children,
+  className,
+  id,
+  innerRef,
+  size,
+  strokeWidth,
+  value,
+}) {
+  return (
+    <div
+      aria-valuemax="100"
+      aria-valuemin="0"
+      aria-valuenow="20.000000000000004"
+      className={joinClassNames(
+        className,
+        'spinner'
+      )}
+      id={id}
+      ref={innerRef}
+      role="progressbar"
+      aria-label={Number.isNaN(value) ? 'Loading...' : `Loading ${(value * 100).toFixed(2)}% complete`}
+      size="50"
+    >
+      <div className="spinner__animation">
+        <svg width={size} height={size} strokeWidth={strokeWidth} viewBox="-10.00 -10.00 120.00 120.00" role="presentation">
+          <path className="spinner__track" d="M 50,50 m 0,-45 a 45,45 0 1 1 0,90 a 45,45 0 1 1 0,-90" />
+          <path className="spinner__value" d="M 50,50 m 0,-45 a 45,45 0 1 1 0,90 a 45,45 0 1 1 0,-90" pathLength="280" strokeDasharray="280 280" strokeDashoffset={Number.isNaN(value) ? 0 : (280 * (1 - value))} />
+        </svg>
+      </div>
+      {children}
+    </div>
+  );
+}
+
+Spinner.propTypes = propTypes;
+Spinner.defaultProps = defaultProps;
+
+export default Spinner;

package/react/enums/formElementSizesEnum.js

@@ -0,0 +1,9 @@
+export default {
+  SMALL3X: 'small3x',
+  SMALL2X: 'small2x',
+  SMALL1X: 'small1x',
+  SMALL: 'small',
+  MEDIUM: 'medium',
+  LARGE: 'large',
+  LARGE1X: 'large1x',
+};

package/react/enums/tableSortingRuleFieldType.js

@@ -0,0 +1,9 @@
+export default {
+  // compares dates as Date() objects
+  // dates represented by an ISO string should use the STRING enum value
+  DATE: 'date',
+  // compares numbers (does do Number(fieldValue)) conversion so it is safe to pass strings as numbers)
+  NUMBER: 'number',
+  // does simple localeCompare() string comparison; is safe for null strings
+  STRING: 'string',
+};

package/react/hooks/forms/useCurrentValuesFromForm.js

@@ -0,0 +1,44 @@
+import { useContext } from 'react';
+import FormContext from '../../components/forms/FormContext';
+import valueAtPath from '../../util/state/valueAtPath';
+import onKeyPress from '../../util/onKeyPress';
+
+/**
+ * A component can be
+ *  • uncontrolled (no value/onchange)
+ *  • controlled by form (<Form> has onChange and state, but Component itself does not)
+ *  • controlled by component (<Form> may or may not have onChange and state, but Component itself specifies overriding value and onChange)
+ *
+ * @param {string} object.errorMessage errorMessage from the component that overrides the one from the form context
+ * @param {string|number} object.id id of the component that is also the path to the data for the component in the form context
+ * @param {func} object.onChange when component changes, call this function, overrides the one from the form context
+ * @param {func} object.onSubmit when enter key pressed ,or some other submitting event, call this function, overrides the one from the form context
+ * @param {string|bool|number|any} object.value current value of the component, overrides the one from the form context
+ * @returns the same passed in parameters but checking if the component overrides the form's context values
+ */
+export default function useCurrentValuesFromForm({
+  errorMessage,
+  id,
+  onChange,
+  onSubmit,
+  value,
+}) {
+  if (!id) {
+    console.error('useCurrentValuesFromForm: `id` is required');
+  }
+  const {
+    onChange: contextOnChange,
+    onSubmit: contextOnSubmit,
+    state,
+    validationErrors,
+  } = useContext(FormContext) || {};
+
+  const currentOnSubmit = onSubmit ?? contextOnSubmit;
+  return {
+    currentErrorMessage: errorMessage ?? (validationErrors && validationErrors[id]),
+    currentOnChange: onChange ?? (contextOnChange && ((e, newValue) => contextOnChange({ e, id, newValue }))),
+    currentOnSubmit,
+    currentValue: (value ?? (state && valueAtPath({ object: state, path: id }))) || '',
+    currentOnFormKeyPress: onKeyPress({ targetKey: 'Enter', func: (e) => currentOnSubmit && currentOnSubmit(e) }),
+  };
+}

package/react/hooks/useBanner.js

@@ -0,0 +1,6 @@
+export default function useBanner() {
+  return ({ message }) => {
+    // TODO: replace this console.log with adding the banner to the banner queue in the design system context
+    console.log(message);
+  };
+}

package/react/hooks/useCurrentMenuItem.js

@@ -0,0 +1,29 @@
+import { useLocation } from 'react-router-dom';
+import useRefAlways from './useRefAlways';
+import findMenuItemInMenusByPathname from '../util/menuItems/findMenuItemInMenusByPathname';
+import useStateEffect from './useStateEffect';
+
+/**
+ * Compares lists of menuItems against the current url location to determine which menu
+ * item is the currently visited menu item.
+ *
+ * @param menus all the known menus
+ * @returns the first menu item from all the menus that matches the current url
+ */
+function useCurrentMenuItem(menus) {
+  const { pathname } = useLocation();
+  const pathnameRef = useRefAlways(pathname);
+
+  const menusRef = useRefAlways(menus);
+  const [currentMenuItem] = useStateEffect({
+    calculateValueFn: () => findMenuItemInMenusByPathname({
+      menus: menusRef.current,
+      pathname: pathnameRef.current,
+    }),
+    dependencyList: [...menus, pathname],
+  });
+
+  return currentMenuItem;
+}
+
+export default useCurrentMenuItem;

package/react/hooks/usePrepMenuItems.js

@@ -0,0 +1,24 @@
+import cloneDeep from 'lodash/cloneDeep';
+import calculateMenuItemsParents from '../util/menuItems/calculateMenuItemsParents';
+import useStateEffect from './useStateEffect';
+
+/**
+ * Prep menu items for display. This includes such tasks as determining `parentLinks` chaining.
+ *
+ * @param [MenuItemShape] menuItems the menu item information to interpret
+ * @returns new list of menu items with added calculated data like `parentLinks`
+ */
+function usePrepMenuItems({ menuItems }) {
+  const [menuItemsPrepped] = useStateEffect({
+    calculateValueFn: () => {
+      const newMenuItems = cloneDeep(menuItems);
+
+      return calculateMenuItemsParents({ menuItems: newMenuItems });
+    },
+    dependencyList: [menuItems],
+  });
+
+  return menuItemsPrepped;
+}
+
+export default usePrepMenuItems;

package/react/hooks/useRefAlways.js

@@ -0,0 +1,8 @@
+import { useRef } from 'react';
+
+// always sets ref to the given value
+export default (value) => {
+  const ref = useRef(value);
+  ref.current = value;
+  return ref;
+};

package/react/hooks/useRefLazy.js

@@ -0,0 +1,11 @@
+import isFunction from 'lodash/isFunction';
+import { useRef } from 'react';
+
+// lazy loads the ref like how useState() can lazy load state via a function
+export default (lazyFunc) => {
+  const ref = useRef(undefined);
+  if (ref.current === undefined) {
+    ref.current = (lazyFunc && isFunction(lazyFunc)) ? lazyFunc() : lazyFunc;
+  }
+  return ref;
+};

package/react/hooks/useScrollPosition.js

@@ -0,0 +1,18 @@
+import { useEffect, useState } from 'react';
+
+const useScrollPosition = (elementRef) => {
+  const [scrollPosition, setScrollPosition] = useState(0);
+  const ele = elementRef || window;
+  useEffect(() => {
+    const updatePosition = () => {
+      setScrollPosition(ele.scrollY);
+    };
+    ele.addEventListener('scroll', updatePosition);
+    updatePosition();
+    return () => ele.removeEventListener('scroll', updatePosition);
+  }, []);
+
+  return scrollPosition;
+};
+
+export default useScrollPosition;