@apify/ui-library 1.156.9 → 1.156.10

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@apify/ui-library",
-    "version": "1.156.9",
+    "version": "1.156.10",
     "description": "React UI library used by apify.com",
     "license": "Apache-2.0",
     "type": "module",
@@ -95,5 +95,5 @@
         "src",
         "style"
     ],
-    "gitHead": "1adae28ecf6ce2903ae71e4f60b59a1588290985"
+    "gitHead": "0528af4cb95e4c06c13a994b55a6e6b4be3618f5"
 }

package/src/components/select/select.test_ids.ts

@@ -1,3 +1,6 @@
+// Control (the clickable select box), keyed by the select's id, inputId, or name as fallbacks
+export const selectControlTestId = (idOrName: string | undefined): string => `${idOrName}--control`;
+
 // Clear indicator button, keyed by the select's id (or name as a fallback)
 export const selectClearTestId = (idOrName: string | undefined): string => `${idOrName}--clear`;
 

package/src/components/select/select.tsx

@@ -2,6 +2,7 @@ import clsx from 'clsx';
 import { type FC, forwardRef, type ReactNode, useCallback, useMemo } from 'react';
 import type {
     ClearIndicatorProps,
+    ControlProps,
     DropdownIndicatorProps,
     IndicatorsContainerProps,
     MultiValueGenericProps,
@@ -17,7 +18,7 @@ import { CaretDownIcon, CaretUpIcon, CrossIcon, XCircleIcon } from '@apify/ui-ic
 import { theme } from '../../design_system/theme';
 import { IconButton } from '../icon_button';
 import { Text } from '../text';
-import { selectClearTestId, selectMultiValueLabelTestId } from './select.test_ids';
+import { selectClearTestId, selectControlTestId, selectMultiValueLabelTestId } from './select.test_ids';
 
 const DEFAULT_Z_INDEX_IN_MODAL = 99;
 const DEFAULT_Z_INDEX_OUTSIDE_MODAL = 9;
@@ -255,6 +256,19 @@ const StyledOption = styled(withReactSelectTheme(selectComponents.Option))`
     ${theme.typography.shared.desktop.bodyM}
 `;
 
+const Control: FC<ControlProps<SelectOption>> = ({ innerProps, selectProps, ...props }) => (
+    <StyledControl
+        {...props}
+        selectProps={selectProps}
+        innerProps={
+            {
+                ...innerProps,
+                'data-test': selectControlTestId(selectProps?.id ?? selectProps?.inputId ?? selectProps?.name),
+            } as typeof innerProps
+        }
+    />
+);
+
 const Option: FC<OptionProps<SelectOption>> = ({ children, data: { description }, ...props }) => (
     <StyledOption {...props}>
         {children}
@@ -401,7 +415,7 @@ export const SelectPrimitive = forwardRef<unknown, SelectPrimitiveProps>(
                     MultiValueLabel: SelectMultiValueLabel,
                     IndicatorsContainer,
                     Option,
-                    Control: StyledControl,
+                    Control,
                     MenuPortal: StyledMenuPortal,
                     ...components,
                 }}

package/src/test_ids.ts

@@ -10,7 +10,11 @@ export { prismHighlighterTestIds } from './components/code/prism_highlighter.tes
 export { collapsibleCardTestIds } from './components/collapsible_card/collapsible_card.test_ids.js';
 export { dropdownTestIds } from './components/dropdown/dropdown.test_ids.js';
 export { paginationTestIds } from './components/pagination/pagination.test_ids.js';
-export { selectClearTestId, selectMultiValueLabelTestId } from './components/select/select.test_ids.js';
+export {
+    selectClearTestId,
+    selectControlTestId,
+    selectMultiValueLabelTestId,
+} from './components/select/select.test_ids.js';
 export { spinnerTestIds } from './components/spinner/spinner.test_ids.js';
 export { storeActorHeaderTestIds } from './components/store/store_actor_header.test_ids.js';
 export { tableTestIds } from './components/table/table.test_ids.js';