Merge pull request #410 from utahdts/dev

v2.0.3
utahdts · Sep 9, 2024 · 3b61a97 · 3b61a97
2 parents af3d4b8 + 7a693fd
commit 3b61a97
Show file tree

Hide file tree

Showing 14 changed files with 58 additions and 21 deletions.
diff --git a/@utahdts/utah-design-system-header/package.json b/@utahdts/utah-design-system-header/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@utahdts/utah-design-system-header",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "description": "Utah Header for the Utah Design System",
   "exports": {
     ".": {

diff --git a/@utahdts/utah-design-system/package.json b/@utahdts/utah-design-system/package.json
@@ -2,7 +2,7 @@
   "name": "@utahdts/utah-design-system",
   "description": "Utah Design System React Library",
   "displayName": "Utah Design System React Library",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "exports": {
     ".": {
       "development-local": "./index.js",
@@ -69,7 +69,7 @@
   },
   "homepage": "https://github.com/utahdts/utah-design-system",
   "dependencies": {
-    "@utahdts/utah-design-system-header": "2.0.2",
+    "@utahdts/utah-design-system-header": "2.0.3",
     "date-fns": "3.6.0",
     "immer": "10.1.1",
     "lodash": "4.17.21",

diff --git a/@utahdts/utah-design-system/react/components/containers/tabs/TabGroup.jsx b/@utahdts/utah-design-system/react/components/containers/tabs/TabGroup.jsx
@@ -1,4 +1,4 @@
-import { useCallback, useId, useMemo, useRef } from 'react';
+import { useCallback, useEffect, useId, useMemo, useRef } from 'react';
 import { useImmer } from 'use-immer';
 import { joinClassNames } from '../../../util/joinClassNames';
 import { TabGroupContext } from './context/TabGroupContext';
@@ -29,7 +29,7 @@ export function TabGroup({
   const [tabGroupState, setTabGroupState] = useImmer(() => ({
     selectedTabId: defaultValue || '',
     tabGroupId,
-    tabs: /** @type {NodeList | []} */ [],
+    tabs: /** @type {NodeList | []} */[],
   }));
   const navigateTab = useCallback((/** @type {HTMLButtonElement | null} */ tab) => {
     if (tab) {
@@ -69,6 +69,18 @@ export function TabGroup({
     []
   );
 
+  // check if "controlled" component's value changed
+  useEffect(
+    () => {
+      if (value !== undefined) {
+        setTabGroupState((draftState) => {
+          draftState.selectedTabId = value;
+        });
+      }
+    },
+    [value]
+  );
+
   /** @type {TabGroupContextValue} */
   const contextValue = useMemo(
     () => ({

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,9 +5,13 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+# [2.0.3] 9/9/2024
+## Fixed
+- Make TabGroup respond to controlled changes
+
 # [2.0.2] 8/13/2024
 ## Fixed
-- Utah Header should have a white background color (just not on the main .utah-design-system css class).
+- Utah Header should have a white background color (just not on the main .utah-design-system css class)
 
 # [2.0.1] 8/5/2024
 ## Fixed

diff --git a/examples/design-system/vite-react/package.json b/examples/design-system/vite-react/package.json
@@ -10,7 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@utahdts/utah-design-system": "2.0.2",
+    "@utahdts/utah-design-system": "2.0.3",
     "react": "18.3.1",
     "react-dom": "18.3.1"
   },

diff --git a/examples/typed/typed-utah-header/package.json b/examples/typed/typed-utah-header/package.json
@@ -12,7 +12,7 @@
     "tscw": "tsc --watch --skipLibCheck"
   },
   "dependencies": {
-    "@utahdts/utah-design-system-header": "2.0.2",
+    "@utahdts/utah-design-system-header": "2.0.3",
     "react": "18.3.1",
     "react-dom": "18.3.1"
   },

diff --git a/examples/utah-header/vite/package.json b/examples/utah-header/vite/package.json
@@ -12,6 +12,6 @@
     "vite": "5.3.4"
   },
   "dependencies": {
-    "@utahdts/utah-design-system-header": "2.0.2"
+    "@utahdts/utah-design-system-header": "2.0.3"
   }
 }
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "design-system-packages",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "workspaces": [
     "@utahdts/utah-design-system-header",
     "@utahdts/utah-design-system",
@@ -24,6 +24,7 @@
     "cleanExampleTypedUtahHeader": "rimraf ./examples/typed/typed-utah-header/dist",
     "cleanExampleUtahHeaderCreateReactApp": "rimraf ./examples/utah-header/create-react-app/node_modules & rimraf ./examples/utah-header/create-react-app/package-lock.json",
     "cleanExampleDesignSystemViteReact": "rimraf ./examples/design-system/vite-react/node_modules & rimraf ./examples/design-system/vite-react/package-lock.json",
+    "cleanExampleAngular": "rimraf ./examples/utah-header/angular/.angular",
     "cleanTypedTypedUtahHeader": "rimraf ./examples/typed/typed-utah-header/node_modules & rimraf ./examples/typed/typed-utah-header/package-lock.json",
     "cleanExampleUtahHeaderVite": "rimraf ./examples/utah-header/vite/node_modules & rimraf ./examples/utah-header/vite/package-lock.json",
     "cleanNodeModules": "rimraf ./utah-design-system-website/node_modules & rimraf ./@utahdts/utah-design-system/node_modules & rimraf ./@utahdts/utah-design-system-header/node_modules & rimraf node_modules",
@@ -56,7 +57,7 @@
     "build": "run-s buildTypes buildHeader buildLibrary buildWebsite",
     "buildtest": "run-s build test:ci",
     "clean": "run-s cleanexamples cleanPackageLock cleanCoverage cleanDist cleanSitemap cleanNodeModules",
-    "cleanexamples": "run-s cleanExampleTypedUtahHeader cleanExampleUtahHeaderCreateReactApp cleanExampleUtahHeaderVite cleanExampleDesignSystemViteReact cleanTypedTypedUtahHeader",
+    "cleanexamples": "run-s cleanExampleTypedUtahHeader cleanExampleUtahHeaderCreateReactApp cleanExampleUtahHeaderVite cleanExampleDesignSystemViteReact cleanTypedTypedUtahHeader cleanExampleAngular",
     "cleanbuild": "run-s cleani build",
     "cleani": "run-s clean npmi",
     "dev": "npm run websiteDev",

diff --git a/utah-design-system-website/package.json b/utah-design-system-website/package.json
@@ -1,7 +1,7 @@
 {
   "name": "utah-design-system-website",
   "private": true,
-  "version": "2.0.2",
+  "version": "2.0.3",
   "type": "module",
   "scripts": {
     "dev": "vite --mode development-local",
@@ -21,8 +21,8 @@
   },
   "dependencies": {
     "@popperjs/core": "2.11.8",
-    "@utahdts/utah-design-system": "2.0.2",
-    "@utahdts/utah-design-system-header": "2.0.2",
+    "@utahdts/utah-design-system": "2.0.3",
+    "@utahdts/utah-design-system-header": "2.0.3",
     "date-fns": "3.6.0",
     "js-beautify": "1.15.1",
     "lodash": "4.17.21",

diff --git a/utah-design-system-website/src/@types/jsDocTypes.d.js b/utah-design-system-website/src/@types/jsDocTypes.d.js
@@ -355,11 +355,12 @@
 
 /**
  * @typedef TabGroupExamplePropsShape {
- *  @property {string} tabA
- *  @property {string} tabB
+ *  @property {boolean} isVertical
  *  @property {string} panelA
  *  @property {string} panelB
- *  @property {boolean} isVertical
+ *  @property {string} selectedTab
+ *  @property {string} tabA
+ *  @property {string} tabB
  * }
  */
 

diff --git a/...omponents/websiteContent/library/components/containers/TabGroup/TabGroupDocumentation.jsx b/...omponents/websiteContent/library/components/containers/TabGroup/TabGroupDocumentation.jsx
@@ -26,6 +26,7 @@ export function TabGroupDocumentation() {
           isVertical: false,
           panelA: 'Here is the first panel.',
           panelB: 'Here is the second panel.',
+          selectedTab: 'tab-A',
           tabA: 'Tab A',
           tabB: 'Tab B',
         }}

diff --git a/...onents/websiteContent/library/components/containers/TabGroup/TabGroupExampleCodeReact.jsx b/...onents/websiteContent/library/components/containers/TabGroup/TabGroupExampleCodeReact.jsx
@@ -15,6 +15,7 @@ export function TabGroupExampleCodeReact({
       isVertical,
       panelA,
       panelB,
+      selectedTab,
       tabA,
       tabB,
     },
@@ -23,7 +24,10 @@ export function TabGroupExampleCodeReact({
   return (
     <>
       &lt;TabGroup
-      <ExampleCodeReactProp displayProp={` isVertical="${isVertical}">`} indentLevel={0} />
+      <br />
+      <ExampleCodeReactProp displayProp={`isVertical="${isVertical}"`} indentLevel={1} />
+      <ExampleCodeReactProp displayProp={`selectedTab="${selectedTab}"`} indentLevel={1} />
+      <ExampleCodeReactProp displayProp=">" indentLevel={0} />
       <ExampleCodeReactProp displayProp="<TabList>" indentLevel={1} />
       <ExampleCodeReactProp displayProp={`<Tab id="tab-A">${tabA}</Tab>`} indentLevel={2} />
       <ExampleCodeReactProp displayProp={`<Tab id="tab-B">${tabB}</Tab>`} indentLevel={2} />

diff --git a/...components/websiteContent/library/components/containers/TabGroup/TabGroupExampleProps.jsx b/...components/websiteContent/library/components/containers/TabGroup/TabGroupExampleProps.jsx
@@ -1,4 +1,4 @@
-import { Form, Switch, TextInput } from '@utahdts/utah-design-system';
+import { Form, Select, SelectOption, Switch, TextInput } from '@utahdts/utah-design-system';
 
 /** @typedef {import('utah-design-system-website').TabGroupExamplePropsShape} TabGroupExamplePropsShape */
 
@@ -21,6 +21,10 @@ export function TabGroupExampleProps({ setState, state }) {
       <TextInput id="props.panelA" label="First Panel" className="input--height-small1x" />
       <TextInput id="props.panelB" label="Second Panel" className="input--height-small1x" />
       <Switch id="props.isVertical" label="Vertical" width={20} />
+      <Select id="props.selectedTab" label="Selected Tab">
+        <SelectOption label="Tab A" value="tab-A" />
+        <SelectOption label="Tab B" value="tab-B" />
+      </Select>
     </Form>
   );
 }
diff --git a/...omponents/websiteContent/library/components/containers/TabGroup/TabGroupExampleRender.jsx b/...omponents/websiteContent/library/components/containers/TabGroup/TabGroupExampleRender.jsx
@@ -5,16 +5,19 @@ import { Tab, TabGroup, TabList, TabPanel, TabPanels } from '@utahdts/utah-desig
 /**
  * @param {object} props
  * @param {import('react').RefObject<HTMLDivElement>} props.innerRef
+ * @param {import('use-immer').Updater<{props: TabGroupExamplePropsShape}>} props.setState
  * @param {object} props.state
  * @param {TabGroupExamplePropsShape} props.state.props
  * @returns {import('react').JSX.Element}
  */
 export function TabGroupExampleRender({
+  setState,
   state: {
     props: {
+      isVertical,
       panelA,
       panelB,
-      isVertical,
+      selectedTab,
       tabA,
       tabB,
     },
@@ -23,7 +26,14 @@ export function TabGroupExampleRender({
 }) {
   return (
     <div style={{ width: '80%' }} ref={innerRef}>
-      <TabGroup defaultValue="tab-A" isVertical={isVertical}>
+      <TabGroup
+        defaultValue="tab-A"
+        isVertical={isVertical}
+        onChange={(newValue) => setState((draftState) => {
+          draftState.props.selectedTab = newValue;
+        })}
+        value={selectedTab}
+      >
         <TabList>
           <Tab id="tab-A">{tabA}</Tab>
           <Tab id="tab-B">{tabB}</Tab>