feat: #9990 add controlled option to tabs (#10017)

* feat: #9990 add controlled option to tabs

* feat: #9990 bump beta

packages/elements/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reapit/elements",
-  "version": "4.0.0-beta.5",
+  "version": "4.0.0-beta.6",
   "description": "A collection of React components and utilities for building apps for Reapit Marketplace",
   "homepage": "https://github.com/reapit/foundations#readme",
   "bugs": {

packages/elements/src/components/tabs/__tests__/__snapshots__/tabs.test.tsx.snap

@@ -13,6 +13,7 @@ exports[`Tabs should match a snapshot and render children 1`] = `
       >
         <mock-styled.div>
           <mock-styled.input
+            checked="true"
             id="option-1"
             name="my-cool-toggle-radio"
             type="radio"
@@ -41,6 +42,7 @@ exports[`Tabs should match a snapshot and render children 1`] = `
             </span>
           </mock-styled.label>
           <mock-styled.input
+            checked="false"
             id="option-2"
             name="my-cool-toggle-radio"
             type="radio"
@@ -69,6 +71,7 @@ exports[`Tabs should match a snapshot and render children 1`] = `
             </span>
           </mock-styled.label>
           <mock-styled.input
+            checked="false"
             id="option-3"
             name="my-cool-toggle-radio"
             type="radio"
@@ -115,6 +118,7 @@ exports[`Tabs should match a snapshot and render children 1`] = `
     >
       <mock-styled.div>
         <mock-styled.input
+          checked="true"
           id="option-1"
           name="my-cool-toggle-radio"
           type="radio"
@@ -143,6 +147,7 @@ exports[`Tabs should match a snapshot and render children 1`] = `
           </span>
         </mock-styled.label>
         <mock-styled.input
+          checked="false"
           id="option-2"
           name="my-cool-toggle-radio"
           type="radio"
@@ -171,6 +176,7 @@ exports[`Tabs should match a snapshot and render children 1`] = `
           </span>
         </mock-styled.label>
         <mock-styled.input
+          checked="false"
           id="option-3"
           name="my-cool-toggle-radio"
           type="radio"

packages/elements/src/components/tabs/__tests__/tabs.test.tsx

@@ -8,6 +8,7 @@ describe('Tabs', () => {
       <Tabs
         name="my-cool-toggle-radio"
         isFullWidth
+        isControlled
         options={[
           {
             id: 'option-1',

packages/elements/src/components/tabs/tabs.stories.mdx

@@ -3,6 +3,7 @@ import { Tabs } from './index'
 import { RenderHtmlMarkup } from '../../storybook/render-html-markup'
 import { useState } from 'react'
 import { Subtitle } from '../typography'
+import { InputGroup } from '../input-group'
 
 <Meta title="Tabs" component={Tabs} />
 
@@ -96,12 +97,14 @@ Slight variation on the above where the Tabs spans the full width of it's contai
 
 <RenderHtmlMarkup component="Tabs" story="Tabs - Full Width" />
 
-## Tabs - React Example with useState
+## Tabs - React Example uncontrolled
 
 Simple example demonstrating how to transition content using tabs. In practice, you may want to dispatch to a router or similar.
 
+The underlying radio buttons are uncontrolled by default so the `isChecked` is used to set the `defaultChecked` in this example. This is to allow the radio to behave nativele i.e. it will update the state using the `onChange` event but not vice versa.
+
 <Canvas>
-  <Story name="Tabs - React Example with useState">
+  <Story name="Tabs - React Example uncontrolled">
     {() => {
       const [tab, setTab] = useState('1')
       return (
@@ -134,10 +137,79 @@ Simple example demonstrating how to transition content using tabs. In practice,
           {tab === '1' && <Subtitle hasGreyText>Tab 1 Content</Subtitle>}
           {tab === '2' && <Subtitle hasGreyText>Tab 2 Content</Subtitle>}
           {tab === '3' && <Subtitle hasGreyText>Tab 3 Content</Subtitle>}
+          <InputGroup
+            value={tab}
+            label="The value of this input will change with the state, but updating the state of the input will not change the tab."
+            type="number"
+            min="1"
+            max="3"
+            onChange={(e) => {
+              setTab(e.target.value)
+            }}
+          />
+        </>
+      )
+    }}
+  </Story>
+</Canvas>
+
+<RenderHtmlMarkup component="Tabs" story="Tabs - React Example uncontrolled" />
+
+## Tabs - React Example controlled
+
+Simple example demonstrating how to transition content using tabs. In practice, you may want to dispatch to a router or similar.
+
+The underlying radio buttons are uncontrolled by default so the `isChecked` is used to set the `defaultChecked` in this example. This is to allow the radio to behave nativele i.e. it will update the state using the `onChange` event but not vice versa.
+
+<Canvas>
+  <Story name="Tabs - React Example controlled">
+    {() => {
+      const [tab, setTab] = useState('1')
+      return (
+        <>
+          <Tabs
+            name="my-cool-tabs-react-controlled"
+            isFullWidth
+            isControlled
+            onChange={(e) => setTab(e.target.value)}
+            options={[
+              {
+                id: 'tab-1-react-controlled',
+                value: 1,
+                text: 'Tab Content 1',
+                isChecked: tab === '1',
+              },
+              {
+                id: 'tab-2-react-controlled',
+                value: 2,
+                text: 'Tab Content 2',
+                isChecked: tab === '2',
+              },
+              {
+                id: 'tab-3-react-controlled',
+                value: 3,
+                text: 'Tab Content 3',
+                isChecked: tab === '3',
+              },
+            ]}
+          />
+          {tab === '1' && <Subtitle hasGreyText>Tab 1 Content</Subtitle>}
+          {tab === '2' && <Subtitle hasGreyText>Tab 2 Content</Subtitle>}
+          {tab === '3' && <Subtitle hasGreyText>Tab 3 Content</Subtitle>}
+          <InputGroup
+            value={tab}
+            label="The value of this input will change with the state and updating the input will change the tab"
+            type="number"
+            min="1"
+            max="3"
+            onChange={(e) => {
+              setTab(e.target.value)
+            }}
+          />
         </>
       )
     }}
   </Story>
 </Canvas>
 
-<RenderHtmlMarkup component="Tabs" story="Tabs - React Example with useState" />
+<RenderHtmlMarkup component="Tabs" story="Tabs - React Example controlled" />

packages/elements/src/components/tabs/tabs.tsx

@@ -21,17 +21,26 @@ export interface TabsOption {
 export interface TabsProps extends HTMLAttributes<HTMLInputElement> {
   options: TabsOption[]
   name: string
+  isControlled?: boolean
   isFullWidth?: boolean
   hasNoBorder?: boolean
 }
 
-export const Tabs: FC<TabsProps> = ({ className, isFullWidth, hasNoBorder, name, options, ...rest }) => {
+export const Tabs: FC<TabsProps> = ({ className, isFullWidth, hasNoBorder, isControlled, name, options, ...rest }) => {
   return (
     <ElTabsWrap className={cx(className, isFullWidth && elTabsFullWidth)}>
       <ElTabsOptionsWrap>
         {options.map(({ id, value, text, isChecked }) => (
           <Fragment key={id}>
-            <ElTabs id={id} name={name} value={value} type="radio" {...rest} defaultChecked={isChecked} />
+            <ElTabs
+              id={id}
+              name={name}
+              value={value}
+              type="radio"
+              {...rest}
+              checked={isControlled ? isChecked : undefined}
+              defaultChecked={isControlled ? undefined : isChecked}
+            />
             <ElTabsLabel htmlFor={id}>
               <span className={elTabsItem}>{text}</span>
             </ElTabsLabel>