@thecb/components 9.2.4-beta.8 → 9.2.5-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "9.2.4-beta.8",
+  "version": "9.2.5-beta.0",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "typings": "dist/index.d.ts",

package/src/components/atoms/dropdown/Dropdown.js

@@ -262,13 +262,13 @@ const Dropdown = ({
   useEffect(() => {
     if (autoEraseTypeAhead) {
       clearTimeout(timer);
-      setTimer(setTimeout(() => setInputValue(""), 3000));
+      setTimer(setTimeout(() => setInputValue(""), 20000));
     }
     setFilteredOptions(
       options.filter(
         option =>
-          option.value.toLowerCase().startsWith(inputValue.toLowerCase()) ||
-          option.text.toLowerCase().startsWith(inputValue.toLowerCase())
+          option.value.toLowerCase().match(inputValue.toLowerCase()) ||
+          option.text.toLowerCase().match(inputValue.toLowerCase())
       )
     );
   }, [inputValue]);

package/src/components/molecules/modal/Modal.js

@@ -67,7 +67,8 @@ const Modal = ({
             alignItems: "center"
           }}
           dialogStyle={{
-            width: customWidth || "615px"
+            width: customWidth || "615px",
+            overflow: "auto"
           }}
           underlayClickExits={underlayClickExits}
         >

package/src/components/molecules/radio-section/RadioSection.js

@@ -47,8 +47,7 @@ const RadioSection = ({
   initiallyOpen = true,
   openHeight = "auto",
   containerStyles = "",
-  ariaDescribedBy,
-  isSectionRequired = false
+  ariaDescribedBy
 }) => {
   const handleKeyDown = (id, e) => {
     if (e?.keyCode === 13 || e?.keyCode === 32) {
@@ -106,7 +105,7 @@ const RadioSection = ({
       borderRadius="4px"
       extraStyles={containerStyles}
     >
-      <Stack childGap="0" role="radiogroup" aria-required={isSectionRequired}>
+      <Stack childGap="0" role="radiogroup">
         {sections
           .filter(section => !section.hidden)
           .map(section => (
@@ -125,7 +124,6 @@ const RadioSection = ({
               role="radio"
               aria-checked={openSection === section.id}
               aria-disabled={section.disabled}
-              aria-required={!!section?.required}
             >
               <Stack childGap="0">
                 <Box
@@ -179,7 +177,6 @@ const RadioSection = ({
                                 : () => toggleOpenSection(section.id)
                             }
                             tabIndex="-1"
-                            aria-required={!!section?.required}
                           />
                         </Box>
                       )}

package/src/components/molecules/radio-section/RadioSection.stories.js

@@ -49,10 +49,9 @@ const sections = [
     title: "New Card",
     content: <p>The form to add a credit card would go here.</p>,
     rightIconsLabel: cardIconsLabel,
-    rightIcons: cardIcons,
-    required: true
+    rightIcons: cardIcons
   },
-  { id: "bar", title: "Bar", content: <div>Content 1</div>, required: true },
+  { id: "bar", title: "Bar", content: <div>Content 1</div> },
   { id: "baz", title: "Baz", content: <div>Content 2</div> }
 ];
 
@@ -66,7 +65,6 @@ export const radioSection = () => {
       openSection={openSection}
       staggeredAnimation={boolean("staggeredAnimation", false, "props")}
       sections={sections}
-      isSectionRequired={true}
     />
   );
 };

package/src/components/molecules/radio-section/radio-button/RadioButton.js

@@ -19,8 +19,7 @@ const RadioButton = ({
   ariaDescribedBy = "",
   themeValues,
   ariaLabelledBy = "",
-  ariaLabel = null,
-  ...rest
+  ariaLabel = null
 }) => {
   const buttonBorder = {
     onFocused: {
@@ -65,7 +64,7 @@ const RadioButton = ({
       width: "0px"
     }
   };
-  const extraProps = rest?.length ? rest : {};
+  const extraProps = {};
   if (ariaLabelledBy && ariaLabelledBy.length) {
     extraProps["aria-labelledby"] = ariaLabelledBy;
   } else if (ariaLabel && ariaLabel !== null) {