From 548cdad59c6636bbbd6b0a220c19e706f331406a Mon Sep 17 00:00:00 2001
From: roman <bonchevskyi@gmail.com>
Date: Tue, 4 Aug 2026 14:39:38 +0200
Subject: [PATCH] refactor(select): migrate Select from Flow to TypeScript

---
 src/components/index.ts                       |   3 +
 .../select/{Select.js => Select.js.flow}      |   2 +-
 .../{Select.stories.js => Select.stories.tsx} |   1 -
 src/components/select/Select.tsx              | 107 ++++++++++++++++++
 .../{Select.test.js => Select.test.tsx}       |  21 ++--
 ...lect.test.js.snap => Select.test.tsx.snap} |   0
 .../select/{index.js => index.js.flow}        |   0
 src/components/select/index.ts                |   2 +
 .../select/{messages.js => messages.js.flow}  |   0
 src/components/select/messages.ts             |  11 ++
 10 files changed, 134 insertions(+), 13 deletions(-)
 rename src/components/select/{Select.js => Select.js.flow} (99%)
 rename src/components/select/{Select.stories.js => Select.stories.tsx} (99%)
 create mode 100644 src/components/select/Select.tsx
 rename src/components/select/__tests__/{Select.test.js => Select.test.tsx} (86%)
 rename src/components/select/__tests__/__snapshots__/{Select.test.js.snap => Select.test.tsx.snap} (100%)
 rename src/components/select/{index.js => index.js.flow} (100%)
 create mode 100644 src/components/select/index.ts
 rename src/components/select/{messages.js => messages.js.flow} (100%)
 create mode 100644 src/components/select/messages.ts

diff --git a/src/components/index.ts b/src/components/index.ts
index 0186feb291..31e7e2ecf6 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -113,6 +113,9 @@ export * from './radio';
 export { default as Section } from './section';
 export * from './section';
 
+export { default as Select } from './select';
+export * from './select';
+
 export { default as TimeInput } from './time-input';
 export * from './time-input';
 
diff --git a/src/components/select/Select.js b/src/components/select/Select.js.flow
similarity index 99%
rename from src/components/select/Select.js
rename to src/components/select/Select.js.flow
index 02bd2953c1..91d9f820e1 100644
--- a/src/components/select/Select.js
+++ b/src/components/select/Select.js.flow
@@ -22,7 +22,7 @@ type Props = {
     /** Label displayed for the input */
     label: React.Node,
     labelTooltip?: string,
-    name: string,
+    name?: string,
     /** Handler for the change event on the select element */
     onChange?: Function,
     showErrorOutline?: boolean,
diff --git a/src/components/select/Select.stories.js b/src/components/select/Select.stories.tsx
similarity index 99%
rename from src/components/select/Select.stories.js
rename to src/components/select/Select.stories.tsx
index ec330e7f49..3b9734092a 100644
--- a/src/components/select/Select.stories.js
+++ b/src/components/select/Select.stories.tsx
@@ -1,4 +1,3 @@
-// @flow
 import * as React from 'react';
 
 import Select from './Select';
diff --git a/src/components/select/Select.tsx b/src/components/select/Select.tsx
new file mode 100644
index 0000000000..431095b5da
--- /dev/null
+++ b/src/components/select/Select.tsx
@@ -0,0 +1,107 @@
+import React, { useState } from 'react';
+import classNames from 'classnames';
+import { FormattedMessage } from 'react-intl';
+
+import IconInfo from '../../icons/general/IconInfo';
+import type { Icon } from '../../icons/iconTypes';
+
+import { ButtonType } from '../button';
+import Tooltip, { TooltipPosition, TooltipTheme } from '../tooltip';
+import Label from '../label';
+import PlainButton from '../plain-button';
+import messages from './messages';
+import './Select.scss';
+
+export interface SelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {
+    /** Input `<option />`'s */
+    children?: React.ReactNode;
+    /** Custom class name for the select container */
+    className?: string;
+    /** Error displayed in a tooltip */
+    error?: React.ReactNode;
+    /** Props forwarded to the information icon */
+    infoIconProps?: Partial<Icon> & Record<string, unknown>;
+    /** Content displayed in the information tooltip */
+    infoTooltip?: React.ReactNode;
+    /** Whether the select is disabled */
+    isDisabled?: boolean;
+    /** Label displayed for the input */
+    label: React.ReactNode;
+    /** Tooltip displayed for the label */
+    labelTooltip?: string;
+    /** Name of the select input */
+    name?: string;
+    /** Handler for the change event on the select element */
+    onChange?: React.ChangeEventHandler<HTMLSelectElement>;
+    /** Whether to show the error outline without error content */
+    showErrorOutline?: boolean;
+    /** Whether to visibly display the label */
+    showLabel?: boolean;
+}
+
+const Select = ({
+    children,
+    className = '',
+    error,
+    infoTooltip,
+    infoIconProps,
+    isDisabled,
+    label,
+    name,
+    labelTooltip,
+    onChange,
+    showErrorOutline = false,
+    showLabel = true,
+    ...rest
+}: SelectProps) => {
+    const classes = classNames(className, 'select-input-container', {
+        'show-error': !!error || showErrorOutline,
+        'is-disabled': isDisabled,
+        'bdl-is-disabled': isDisabled,
+    });
+    const [infoTooltipIsOpen, setInfoTooltipIsOpen] = useState(false);
+    return (
+        <div className={classes}>
+            <Label hideLabel={!showLabel} text={label} tooltip={labelTooltip}>
+                <Tooltip
+                    isShown={!!error}
+                    position={TooltipPosition.MIDDLE_RIGHT}
+                    text={error || ''}
+                    theme={TooltipTheme.ERROR}
+                >
+                    <span className="select-container">
+                        <span className="select-container-inner">
+                            {/* eslint-disable-next-line jsx-a11y/no-onchange */}
+                            <select disabled={isDisabled} name={name} onChange={onChange} {...rest}>
+                                {children}
+                            </select>
+                            <span className="select-overlay" />
+                        </span>
+                        {infoTooltip && (
+                            <Tooltip
+                                targetWrapperClassName="tooltip-icon-container"
+                                isShown={infoTooltipIsOpen}
+                                position={TooltipPosition.MIDDLE_RIGHT}
+                                text={infoTooltip}
+                            >
+                                <PlainButton
+                                    type={ButtonType.BUTTON}
+                                    onClick={() => setInfoTooltipIsOpen(!infoTooltipIsOpen)}
+                                >
+                                    <IconInfo
+                                        height={16}
+                                        width={16}
+                                        title={<FormattedMessage {...messages.moreInfo} />}
+                                        {...infoIconProps}
+                                    />
+                                </PlainButton>
+                            </Tooltip>
+                        )}
+                    </span>
+                </Tooltip>
+            </Label>
+        </div>
+    );
+};
+
+export default Select;
diff --git a/src/components/select/__tests__/Select.test.js b/src/components/select/__tests__/Select.test.tsx
similarity index 86%
rename from src/components/select/__tests__/Select.test.js
rename to src/components/select/__tests__/Select.test.tsx
index 501927d7e4..fa1af112a6 100644
--- a/src/components/select/__tests__/Select.test.js
+++ b/src/components/select/__tests__/Select.test.tsx
@@ -1,6 +1,9 @@
 import * as React from 'react';
+import { shallow } from 'enzyme';
 import sinon from 'sinon';
 
+import PlainButton from '../../plain-button';
+import Tooltip from '../../tooltip';
 import Select from '..';
 
 const sandbox = sinon.sandbox.create();
@@ -74,20 +77,16 @@ describe('components/select/Select', () => {
         const wrapper = shallow(
             <Select infoIconProps={{ title: 'hello' }} infoTooltip="hello!!!" label="Album" name="select" />,
         );
-        const getButton = () => wrapper.find('PlainButton');
-        const getInfoTooltip = () => wrapper.find('Tooltip[text="hello!!!"]');
-        expect(getInfoTooltip().props().isShown).toBe(false);
+        const getButton = () => wrapper.find(PlainButton);
+        const getInfoTooltip = () => wrapper.find(Tooltip).filterWhere(node => node.prop('text') === 'hello!!!');
+        expect(getInfoTooltip().prop('isShown')).toBe(false);
         // Toggle on
-        getButton()
-            .props()
-            .onClick();
-        expect(getInfoTooltip().props().isShown).toBe(true);
+        getButton().simulate('click');
+        expect(getInfoTooltip().prop('isShown')).toBe(true);
         // Toggle off
-        getButton()
-            .props()
-            .onClick();
+        getButton().simulate('click');
 
-        expect(getInfoTooltip().props().isShown).toBe(false);
+        expect(getInfoTooltip().prop('isShown')).toBe(false);
     });
 
     test('should show Tooltip when error exists', () => {
diff --git a/src/components/select/__tests__/__snapshots__/Select.test.js.snap b/src/components/select/__tests__/__snapshots__/Select.test.tsx.snap
similarity index 100%
rename from src/components/select/__tests__/__snapshots__/Select.test.js.snap
rename to src/components/select/__tests__/__snapshots__/Select.test.tsx.snap
diff --git a/src/components/select/index.js b/src/components/select/index.js.flow
similarity index 100%
rename from src/components/select/index.js
rename to src/components/select/index.js.flow
diff --git a/src/components/select/index.ts b/src/components/select/index.ts
new file mode 100644
index 0000000000..d78e8779a2
--- /dev/null
+++ b/src/components/select/index.ts
@@ -0,0 +1,2 @@
+export { default } from './Select';
+export type { SelectProps } from './Select';
diff --git a/src/components/select/messages.js b/src/components/select/messages.js.flow
similarity index 100%
rename from src/components/select/messages.js
rename to src/components/select/messages.js.flow
diff --git a/src/components/select/messages.ts b/src/components/select/messages.ts
new file mode 100644
index 0000000000..67eb5a9c31
--- /dev/null
+++ b/src/components/select/messages.ts
@@ -0,0 +1,11 @@
+import { defineMessages } from 'react-intl';
+
+const messages = defineMessages({
+    moreInfo: {
+        defaultMessage: 'More Info',
+        description: 'Alt text for info icon',
+        id: 'boxui.select.moreInfo',
+    },
+});
+
+export default messages;