fix: fix properties and methods table and fix some style

library/styleguideComponents/PropsTable/bodyRows.js

@@ -64,6 +64,10 @@ function renderValue(value, caption, row) {
         }
     }
 
+    if (caption === 'Default' && type.name === 'array') {
+        return <div className="react-rainbow-defualt-array">{value}</div>;
+    }
+
     return value;
 }
 

library/styleguideComponents/PropsTable/styles.css

@@ -114,4 +114,10 @@
 
 .react-rainbow-prop-description {
     white-space: normal;
+}
+
+.react-rainbow-defualt-array {
+    white-space: normal;
+    max-width: 300px;
+    text-align: justify;
 }

src/components/PhoneInput/countriesDropdown/hooks/index.js

@@ -2,3 +2,5 @@ export { default as useFilterCountries } from './useFilterCountries';
 export { default as useKeyboardNavigation } from './useKeyboardNavigation';
 export { default as useScrollControls } from './useScrollControls';
 export { default as useSimulatedLoading } from './useSimulatedLoading';
+export { default as useItemsRef } from './useItemsRef';
+export { default as useHandleCountryChange } from './useHandleCountryChange';

src/components/PhoneInput/countriesDropdown/hooks/useHandleCountryChange.js

@@ -0,0 +1,12 @@
+import { useCallback } from 'react';
+
+export default function useHandleCountryChange(scrollableRef, onCountryChange, setQuery) {
+    return useCallback(
+        newCountry => {
+            setQuery('');
+            scrollableRef.current.scrollTo(0, 0);
+            onCountryChange(newCountry);
+        },
+        [onCountryChange, scrollableRef, setQuery],
+    );
+}

src/components/PhoneInput/countriesDropdown/hooks/useItemsRef.js

@@ -0,0 +1,10 @@
+import { useRef, useEffect } from 'react';
+
+export default function useItemsRef(length) {
+    const itemsRef = useRef([]);
+    useEffect(() => {
+        itemsRef.current = itemsRef.current.slice(0, length);
+    }, [length]);
+
+    return itemsRef;
+}

src/components/PhoneInput/countriesDropdown/hooks/useKeyboardNavigation.js

@@ -13,11 +13,12 @@ import isOptionVisible from '../../../Picklist/helpers/isOptionVisible';
 import calculateScrollOffset from '../../../Picklist/helpers/calculateScrollOffset';
 
 export default function useKeyboardNavigation(
+    country,
     list,
     ref,
     scrollableRef,
     itemsRef,
-    onEnter,
+    handleCountryChange,
     setFocusIndex,
 ) {
     const activeIndex = useRef(0);
@@ -64,14 +65,14 @@ export default function useKeyboardNavigation(
                     [DOWN_KEY]: () => moveToOption(getNewIndex(active + 1, length)),
                     [HOME_KEY]: () => moveToOption(0),
                     [END_KEY]: () => moveToOption(length - 1),
-                    [ENTER_KEY]: () => onEnter(event, active),
+                    [ENTER_KEY]: () => handleCountryChange(list[active]),
                     [ESCAPE_KEY]: () => setFocusIndex(0),
                     [TAB_KEY]: () => setFocusIndex(2),
                 };
                 keyHandlerMap[event.keyCode]();
             }
         },
-        [length, moveToOption, onEnter, setFocusIndex],
+        [handleCountryChange, length, list, moveToOption, setFocusIndex],
     );
 
     useEffect(() => {
@@ -86,7 +87,7 @@ export default function useKeyboardNavigation(
         handleActiveChange(0);
         scrollableRef.current.scrollTo(0, 0);
         activeIndex.current = 0;
-    }, [handleActiveChange, itemsRef, length, scrollableRef]);
+    }, [country, handleActiveChange, itemsRef, length, scrollableRef]);
 
     useEffect(() => {
         const currentItem = itemsRef.current[activeIndex.current];

src/components/PhoneInput/countriesDropdown/index.js

@@ -1,6 +1,12 @@
-import React, { useRef, useEffect, useCallback, memo } from 'react';
+import React, { useRef, memo } from 'react';
 import PropTypes from 'prop-types';
-import { useFilterCountries, useKeyboardNavigation, useScrollControls } from './hooks';
+import {
+    useFilterCountries,
+    useKeyboardNavigation,
+    useScrollControls,
+    useItemsRef,
+    useHandleCountryChange,
+} from './hooks';
 import {
     StyledScrollable,
     StyledUl,
@@ -30,35 +36,17 @@ const CountriesDropdown = memo(props => {
 
     const scrollableRef = useRef();
     const [query, countriesFiltered, setQuery] = useFilterCountries(countries, country);
-
-    const handleCountryChange = useCallback(
-        newCountry => {
-            setQuery('');
-            scrollableRef.current.scrollTo(0, 0);
-            onCountryChange(newCountry);
-        },
-        [onCountryChange, setQuery],
-    );
-
-    const onEnter = useCallback((event, index) => handleCountryChange(countriesFiltered[index]), [
-        handleCountryChange,
-        countriesFiltered,
-    ]);
-
-    const itemsRef = useRef([]);
-    useEffect(() => {
-        itemsRef.current = itemsRef.current.slice(0, countriesFiltered.length);
-    }, [countriesFiltered.length]);
-
+    const itemsRef = useItemsRef(countriesFiltered.length);
+    const handleCountryChange = useHandleCountryChange(scrollableRef, onCountryChange, setQuery);
     const handleActiveChange = useKeyboardNavigation(
+        country,
         countriesFiltered,
         searchRef,
         scrollableRef,
         itemsRef,
-        onEnter,
+        handleCountryChange,
         setFocusIndex,
     );
-
     const {
         showScrollUp,
         showScrollDown,

src/components/PhoneInput/hooks/useHandleCountryChange.js

@@ -11,6 +11,6 @@ export default function useHandleCountryChange(phone, onChange, setFocusIndex, i
             });
         },
         // eslint-disable-next-line react-hooks/exhaustive-deps
-        [onChange, isOpen],
+        [isOpen],
     );
 }

src/components/PhoneInput/index.js

@@ -86,9 +86,10 @@ const PhoneInput = React.forwardRef((props, ref) => {
         searchRef,
         inputRef,
     );
-    const isOpen = focusIndex === 1;
     const handleFocus = useHandleFocus(focusIndex, onFocus, setFocusIndex);
     const handleBlur = useHandleBlur(focusIndex, onBlur);
+
+    const isOpen = focusIndex === 1;
     const handleCountryChange = useHandleCountryChange(phone, onChange, setFocusIndex, isOpen);
 
     function handlePhoneChange(event) {
@@ -245,6 +246,7 @@ PhoneInput.propTypes = {
     style: PropTypes.object,
     /** The id of the outer element. */
     id: PropTypes.string,
+    /** Specifies the available countries for selection. */
     countries: PropTypes.array,
 };
 

src/components/PhoneInput/styled/flagContainer.js

@@ -2,8 +2,6 @@ import styled from 'styled-components';
 import attachThemeAttrs from '../../../styles/helpers/attachThemeAttrs';
 
 const StyledFlagContainer = attachThemeAttrs(styled.div)`
-    display: flex;
-    flex: 0 0 auto;
     padding-right: 12px;
     border-right: 1px solid ${props => props.palette.text.header};
     ${props =>

src/components/PhoneInput/styled/index.js

@@ -8,9 +8,8 @@ export const StyledCountryCode = attachThemeAttrs(styled.div)`
 `;
 
 export const StyledFlagIcon = styled.img`
-    width: 20px;
-    height: 20px;
-    flex: 0 0 auto;
+    width: 28px;
+    height: 100%;
 `;
 
 export { default as StyledIndicator } from './indicator';

src/components/PhoneInput/styled/indicator.js

@@ -4,7 +4,6 @@ const StyledIndicator = styled.span`
     z-index: 2;
     margin-top: -4px;
     margin-left: 8px;
-    flex: 0 0 auto;
 
     &::after {
         content: '';

src/components/PhoneInput/styled/trigger.js

@@ -14,7 +14,6 @@ const StyledTrigger = attachThemeAttrs(styled.button)`
     font-weight: 300;
     font-size: ${FONT_SIZE_TEXT_LARGE};
     border-radius: ${BORDER_RADIUS_2} 0 0 ${BORDER_RADIUS_2};
-    display: flex;
 
     :hover,
     :focus,