diff --git a/package.json b/package.json index 51db27352..26a694319 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "suomifi-ui-components", - "version": "10.0.2", + "version": "10.0.3", "description": "Suomi.fi UI component library", "main": "dist/cjs/index.js", "module": "dist/esm/index.js", diff --git a/src/core/Dropdown/Dropdown/Dropdown.tsx b/src/core/Dropdown/Dropdown/Dropdown.tsx index 2cda24134..e5141e3f3 100644 --- a/src/core/Dropdown/Dropdown/Dropdown.tsx +++ b/src/core/Dropdown/Dropdown/Dropdown.tsx @@ -12,7 +12,6 @@ import { SuomifiThemeProp, SuomifiThemeConsumer } from '../../theme'; import { forkRefs, getOwnerDocument, - getRecursiveChildText, HTMLAttributesIncludingDataAttributes, } from '../../../utils/common/common'; import { Popover } from '../../../core/Popover/Popover'; @@ -77,7 +76,7 @@ const { Provider: DropdownProvider, Consumer: DropdownConsumer } = interface DropdownState { selectedValue: string | undefined | null; - selectedValueText: string | undefined | null; + selectedValueNode: ReactNode | undefined | null; ariaExpanded: boolean; showPopover: boolean; focusedDescendantId: string | null | undefined; @@ -168,7 +167,7 @@ class BaseDropdown extends Component { : 'defaultValue' in this.props ? this.props.defaultValue : undefined, - selectedValueText: BaseDropdown.parseSelectedValueText( + selectedValueNode: BaseDropdown.getSelectedValueNode( 'value' in this.props ? this.props.value : 'defaultValue' in this.props @@ -207,7 +206,7 @@ class BaseDropdown extends Component { if ('value' in nextProps && value !== prevState.selectedValue) { return { selectedValue: value, - selectedValueText: BaseDropdown.parseSelectedValueText( + selectedValueNode: BaseDropdown.getSelectedValueNode( value, nextProps.children, ), @@ -216,24 +215,24 @@ class BaseDropdown extends Component { return null; } - static parseSelectedValueText( + static getSelectedValueNode( selectedValue: string | undefined, children: | Array> | ReactElement | undefined, - ): string | undefined { + ): ReactNode | undefined { if (selectedValue === undefined || children === undefined) return undefined; if (Array.isArray(children)) { for (let index = 0; index < children.length; index += 1) { const element = children[index]; if (element.props.value === selectedValue) { - return getRecursiveChildText(element); + return element.props.children; } } } else { - return getRecursiveChildText(children); + return children.props.children; } } @@ -258,7 +257,7 @@ class BaseDropdown extends Component { } this.setState({ selectedValue: itemValue, - selectedValueText: BaseDropdown.parseSelectedValueText( + selectedValueNode: BaseDropdown.getSelectedValueNode( itemValue, this.props.children, ), @@ -429,7 +428,7 @@ class BaseDropdown extends Component { if (this.props.alwaysShowVisualPlaceholder) { return this.props.visualPlaceholder; } - return this.state.selectedValueText ?? this.props.visualPlaceholder; + return this.state.selectedValueNode ?? this.props.visualPlaceholder; } private focusToButtonAndClosePopover() { diff --git a/src/utils/common/common.ts b/src/utils/common/common.ts index 7325358bf..bb084ee2f 100644 --- a/src/utils/common/common.ts +++ b/src/utils/common/common.ts @@ -1,4 +1,4 @@ -import React, { MutableRefObject, ReactElement, Ref } from 'react'; +import React, { MutableRefObject, Ref } from 'react'; import { getLogger } from '../../utils/log'; export function windowAvailable() { @@ -47,34 +47,6 @@ export const forkRefs = }); }; -export const getRecursiveChildText = (reactNode: ReactElement): any => { - const children = reactNode.props?.children || undefined; - if (Array.isArray(reactNode)) { - // Multiple children - const joinedNodes: Array = []; - reactNode.forEach((node) => { - if (typeof node === 'object') { - joinedNodes.push(getRecursiveChildText(node)); - } else if (typeof node === 'string') { - joinedNodes.push(node); - } - }); - return joinedNodes.join(' '); - } - if (children === undefined) { - if (typeof reactNode === 'string') return reactNode; - return ''; - } - if (typeof children === 'object') { - // Found direct child - return getRecursiveChildText(children); - } - if (typeof children === 'string' || typeof children === 'number') { - // Found searchable string - return children; - } -}; - /** * The following interface allows data-* attributes. * The basic React.HTMLAttributes interface throws errors when trying to do something like