docs: resolve nesting button issue in dropdown and multiselect compon…

…ents (#911)
trendmicro-frontend · Aug 12, 2024 · 807bfc0 · 807bfc0
1 parent 272869f
commit 807bfc0
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 28 deletions.
diff --git a/packages/react-docs/components/Dropdown.js b/packages/react-docs/components/Dropdown.js
@@ -1,10 +1,10 @@
 import {
   Menu,
-  MenuToggle,
   MenuItem,
   MenuList,
+  MenuToggle,
 } from '@tonic-ui/react';
-import { noop } from '@tonic-ui/utils';
+import { noop, runIfFn } from '@tonic-ui/utils';
 import { ensureFunction } from 'ensure-type';
 import React, { forwardRef, useCallback, useEffect, useState } from 'react';
 
@@ -47,7 +47,9 @@ const Dropdown = forwardRef((
       {...rest}
     >
       <MenuToggle>
-        {children}
+        {({ getMenuToggleProps }) => {
+          return runIfFn(children, { getToggleProps: getMenuToggleProps });
+        }}
       </MenuToggle>
       <MenuList
         width="max-content"

diff --git a/packages/react-docs/components/Multiselect.js b/packages/react-docs/components/Multiselect.js
@@ -4,16 +4,16 @@ import {
   CheckboxGroup,
   LinkButton,
   Menu,
-  MenuToggle,
   MenuItem,
   MenuList,
+  MenuToggle,
   Scrollbar,
   SearchInput,
   useColorMode,
   useColorStyle,
   useTheme,
 } from '@tonic-ui/react';
-import { noop } from '@tonic-ui/utils';
+import { noop, runIfFn } from '@tonic-ui/utils';
 import { ensureArray, ensureFunction, ensureString } from 'ensure-type';
 import React, { forwardRef, useCallback, useEffect, useRef, useState } from 'react';
 import Highlight from 'react-highlight-words';
@@ -95,7 +95,9 @@ const Multiselect = forwardRef((
       {...rest}
     >
       <MenuToggle>
-        {children}
+        {({ getMenuToggleProps }) => {
+          return runIfFn(children, { getToggleProps: getMenuToggleProps });
+        }}
       </MenuToggle>
       <MenuList
         width="max-content"

diff --git a/packages/react-docs/pages/components/menu/dropdown.js b/packages/react-docs/pages/components/menu/dropdown.js
@@ -49,21 +49,21 @@ const App = () => {
   return (
     <Dropdown
       value={value}
-      onChange={(value) => {
-        console.log('## change:', value);
-        setValue(value);
-      }}
+      onChange={setValue}
       options={options}
       renderOption={renderOption}
     >
-      <MenuButton
-        variant="secondary"
-        width={width}
-      >
-        <Flex maxWidth={maxWidth}>
-          {renderLabel(value)}
-        </Flex>
-      </MenuButton>
+      {({ getToggleProps }) => (
+        <MenuButton
+          {...getToggleProps()}
+          variant="secondary"
+          width={width}
+        >
+          <Flex maxWidth={maxWidth}>
+            {renderLabel(value)}
+          </Flex>
+        </MenuButton>
+      )}
     </Dropdown>
   );
 };

diff --git a/packages/react-docs/pages/components/menu/index.page.mdx b/packages/react-docs/pages/components/menu/index.page.mdx
@@ -191,15 +191,15 @@ You can also use the `Scrollbar` component to override the default scrollbar.
 
 Use the `Dropdown` component when you need to select one option from a list of options.
 
-The component is available on GitHub at the [link](https://github.com/trendmicro-frontend/tonic-ui/tree/master/packages/react-docs/components/Dropdown.jsx).
+The component is available on GitHub at the [link](https://github.com/trendmicro-frontend/tonic-ui/blob/master/packages/react-docs/components/Dropdown.js).
 
 {render('./dropdown')}
 
 ### Multiselect
 
 Use the `Multiselect` component when you need to select multiple options from a list or to filter information.
 
-The component is available on GitHub at the [link](https://github.com/trendmicro-frontend/tonic-ui/tree/master/packages/react-docs/components/Multiselect.jsx).
+The component is available on GitHub at the [link](https://github.com/trendmicro-frontend/tonic-ui/blob/master/packages/react-docs/components/Multiselect.js)
 
 {render('./multiselect')}
 

diff --git a/packages/react-docs/pages/components/menu/multiselect.js b/packages/react-docs/pages/components/menu/multiselect.js
@@ -109,14 +109,17 @@ const App = () => {
       renderOption={renderOption}
       shouldSelectAllIfNoneSelected={true}
     >
-      <MenuButton
-        variant="secondary"
-        width={width}
-      >
-        <Flex maxWidth={maxWidth}>
-          {renderLabel(value)}
-        </Flex>
-      </MenuButton>
+      {({ getToggleProps }) => (
+        <MenuButton
+          {...getToggleProps()}
+          variant="secondary"
+          width={width}
+        >
+          <Flex maxWidth={maxWidth}>
+            {renderLabel(value)}
+          </Flex>
+        </MenuButton>
+      )}
     </Multiselect>
   );
 };