@apify/ui-library 1.127.10 → 1.128.1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@apify/ui-library",
-    "version": "1.127.10",
+    "version": "1.128.1",
     "description": "React UI library used by apify.com",
     "license": "Apache-2.0",
     "type": "module",
@@ -27,10 +27,11 @@
         "It's not nice, but helps us to get around the problem of multiple react instances."
     ],
     "dependencies": {
-        "@apify/ui-icons": "^1.29.2",
+        "@apify/ui-icons": "^1.30.0",
         "@floating-ui/react": "^0.26.2",
         "@radix-ui/react-checkbox": "^1.3.3",
         "@radix-ui/react-collapsible": "^1.0.0",
+        "@radix-ui/react-switch": "^1.2.6",
         "@react-hook/resize-observer": "^2.0.2",
         "clsx": "^2.0.0",
         "dayjs": "1.11.9",
@@ -42,6 +43,7 @@
         "prismjs": "^1.30.0",
         "query-string": "^8.1.0",
         "react-markdown": "^10.1.0",
+        "react-select": "^5.10.2",
         "rehype-raw": "^7.0.0",
         "rehype-sanitize": "^6.0.0",
         "remark-gfm": "^4.0.1",
@@ -68,5 +70,5 @@
         "src",
         "style"
     ],
-    "gitHead": "0bec6b696f986df3fa2f677f3b2a11023b02077d"
+    "gitHead": "de01e121f513532624987e05ef32f8ab73445a21"
 }

package/src/components/checkbox/checkbox.stories.tsx

@@ -4,7 +4,7 @@ import styled from 'styled-components';
 import { CheckboxPrimitive, IndeterminateCheckbox } from './checkbox.js';
 
 export default {
-    title: 'Components/Inputs/CheckboxPrimitive',
+    title: 'UI-Library/Inputs/CheckboxPrimitive',
 };
 
 const Grid = styled.div`

package/src/components/code/code_block/code_block.styled.tsx

@@ -61,6 +61,7 @@ export const CodeBlockWrapper = styled(SyntaxHighlighterBaseStylesWrapper) <{
             transform: translateY(1px);
             padding-right: ${theme.space.space32};
             padding-left: ${theme.space.space8};
+            min-height: fit-content;
             overflow-x: auto;
             overflow-y: hidden;
             gap: ${theme.space.space4};

package/src/components/collapsible_card/collapsible_card.stories.tsx

@@ -26,6 +26,10 @@ export default {
             control: 'boolean',
             description: 'Whether to hide the chevron icon',
         },
+        noDivider: {
+            control: 'boolean',
+            description: 'Whether to hide the divider between header and content',
+        },
         topSection: {
             control: 'text',
             description: 'Content rendered above the header',
@@ -120,6 +124,18 @@ export const GreyHeaderOnHover: Story = {
     },
 };
 
+/**
+ * A collapsible card without the divider between header and content.
+ */
+export const NoDivider: Story = {
+    args: {
+        header: 'No divider between header and content',
+        noDivider: true,
+        isExpanded: true,
+        children: 'This card has no divider line between the header and content areas.',
+    },
+};
+
 /**
  * A collapsible card without the outer border.
  */

package/src/components/collapsible_card/collapsible_card.tsx

@@ -29,6 +29,7 @@ export type CollapsibleCardProps = {
     isExpanded?: boolean;
     onIsExpandedChanged?: (expanded: boolean) => void;
     noChevron?: boolean;
+    noDivider?: boolean;
     topSection?: ReactNode;
     isClosedHeaderGrey?: boolean;
     isHeaderGreyOnHover?: boolean;
@@ -101,8 +102,8 @@ const StyledCardContent = styled.div`
     overflow: auto;
 `;
 
-const CollapsibleContent = styled(Collapsible.Content)`
-    border-top: 1px solid ${theme.color.neutral.border};
+const CollapsibleContent = styled(Collapsible.Content)<{ $noDivider?: boolean }>`
+    ${({ $noDivider }) => ($noDivider ? '' : `border-top: 1px solid ${theme.color.neutral.border};`)}
 `;
 
 export const CollapsibleCard: FC<CollapsibleCardProps> = ({
@@ -111,6 +112,7 @@ export const CollapsibleCard: FC<CollapsibleCardProps> = ({
     isExpanded,
     onIsExpandedChanged,
     noChevron,
+    noDivider,
     topSection,
     hideOuterBorder,
     hasShadow,
@@ -148,7 +150,7 @@ export const CollapsibleCard: FC<CollapsibleCardProps> = ({
             <Collapsible.Root
                 open={isUncontrolled ? isOpen : isExpanded}
             >
-                <CollapsibleContent className={collapsibleCardClassNames.COLLAPSIBLE_CONTENT_WRAPPER}>
+                <CollapsibleContent $noDivider={noDivider} className={collapsibleCardClassNames.COLLAPSIBLE_CONTENT_WRAPPER}>
                     <StyledCardContent className={collapsibleCardClassNames.CONTENT} data-test="card-content">
                         {children}
                     </StyledCardContent>

package/src/components/index.ts

@@ -28,3 +28,5 @@ export * from './spinner.js';
 export * from './store/index.js';
 export * from './checkbox/index.js';
 export * from './collapsible_card/index.js';
+export * from './select/index.js';
+export * from './switch/index.js';

package/src/components/select/index.ts

@@ -0,0 +1 @@
+export * from './select.js';

package/src/components/select/select.stories.tsx

@@ -0,0 +1,76 @@
+import { useState } from 'react';
+import styled from 'styled-components';
+
+import { EyeIcon } from '@apify/ui-icons';
+
+import { SelectPrimitive as Select } from './select.js';
+
+export default {
+    title: 'UI-Library/Inputs/SelectPrimitive',
+};
+
+const Grid = styled.div`
+    margin: 5rem 3rem;
+    display: grid;
+    grid-template-columns: repeat(2, auto);
+    gap: 1rem 5rem;
+
+    input{
+        width: 100%;
+    }
+`;
+
+const options = [{ label: 'Ahoj', value: 1 }, { label: 'Ondro!', value: 2 }, { label: '🚲', value: 3 }];
+
+export const SelectPrimitive = () => {
+    const [multiValue, setMultiValue] = useState([1, 2]);
+    const [value, setValue] = useState(1);
+    return (
+        <Grid>
+            <Select options={options} value={value} setValue={setValue}/> <p>singleValue</p>
+            <Select isMulti
+                options={options}
+                value={multiValue}
+                setValue={setMultiValue}
+            /> <p>multiValue</p>
+            <Select isMulti
+                error='test Error'
+                options={options}
+                value={multiValue}
+                setValue={setMultiValue}
+            /> <p>multiValue error</p>
+            <Select isMulti
+                disabled
+                options={options}
+                value={multiValue}
+                setValue={setMultiValue}
+            /> <p>multiValue disabled</p>
+            <Select options={options}
+                value={value}
+                setValue={setValue}
+                indicatorsSlot={<EyeIcon size="16" />}
+            /> <p>withIcons</p>
+            <Select options={options}
+                value={value}
+                setValue={setValue}
+                disabled={true}
+            /> <p>disabled</p>
+            <Select options={options}
+                value={value}
+                setValue={setValue}
+                placeholder="Placeholder"
+            /> <p>placeholder</p>
+            <Select options={options}
+                value={value}
+                setValue={setValue}
+                error={true}
+                placeholder='Error select'
+            /> <p>error</p>
+            <Select options={options}
+                value={null}
+                setValue={setValue}
+                placeholder='Placeholder'
+            /> <p>placeholder</p>
+        </Grid>
+    );
+};

package/src/components/select/select.tsx

@@ -0,0 +1,402 @@
+import clsx from 'clsx';
+import { type FC, forwardRef, type ReactNode, useCallback, useMemo } from 'react';
+import type {
+    ClearIndicatorProps,
+    DropdownIndicatorProps,
+    IndicatorsContainerProps,
+    MultiValueRemoveProps,
+    OptionProps,
+    StylesConfig,
+} from 'react-select';
+import SelectComponent, { components as selectComponents, defaultTheme } from 'react-select';
+import styled from 'styled-components';
+
+import { CaretDownIcon, CaretUpIcon, CrossIcon, XCircleIcon } from '@apify/ui-icons';
+
+import { theme } from '../../design_system/theme.js';
+import { IconButton } from '../icon_button.js';
+import { Text } from '../text/index.js';
+
+const DEFAULT_Z_INDEX_IN_MODAL = 99;
+const DEFAULT_Z_INDEX_OUTSIDE_MODAL = 9;
+
+export type SelectOptionValue = string | number | boolean;
+
+export type SelectOption = {
+    label: ReactNode;
+    value: SelectOptionValue;
+    description?: string;
+};
+
+// There is a prop collision in styled-components@6 and react-select. react-select uses `theme` prop but
+// styled components do not pass this prop down. Because we only use the default theme, we can manually inject it.
+// All components that just restyle the default component provided by the package MUST wrap it with this HOC.
+// eslint-disable-next-line @typescript-eslint/no-explicit-any -- react-select component props are untyped in this context
+export const withReactSelectTheme = (Component: FC<any>) => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const EnhancedComponent = (props: any) => {
+        return (
+            <Component {...props} theme={defaultTheme} />
+        );
+    };
+    const displayName = Component.name || (Component as { displayName?: string }).displayName;
+    EnhancedComponent.displayName = `withReactSelectTheme${displayName}`;
+    return EnhancedComponent;
+};
+
+// We need to use both styles and components in order to style select as we want.
+// Sadly, not all items of style receive selectProps that are crucial for determining the right style.
+// On the other hand, if styling for example multiValueLabel through its Component, it receives css classes of its parent
+const selectStyles: StylesConfig<SelectOption> = {
+    multiValue: (base) => ({
+        ...base,
+        backgroundColor: theme.color.neutral.chipBackground,
+        borderRadius: 6,
+        height: 20,
+        alignItems: 'center',
+    }),
+    multiValueLabel: (base) => ({
+        ...base,
+        color: theme.color.neutral.text,
+        fontSize: 12,
+    }),
+    multiValueRemove: (base) => ({
+        ...base,
+        backgroundColor: 'transparent !important',
+
+        '&:hover svg': {
+            color: theme.color.neutral.iconSubtle,
+        },
+    }),
+    dropdownIndicator: (base, { selectProps: { menuIsOpen, isDisabled } }) => ({
+        ...base,
+        svg: {
+            transform: menuIsOpen ? 'rotate(180deg)' : '',
+            color: isDisabled ? theme.color.neutral.iconDisabled : theme.color.neutral.icon,
+        },
+    }),
+    valueContainer: (base) => ({
+        ...base,
+        padding: '2px 6px',
+    }),
+    menu: (base) => ({
+        ...base,
+        overflow: 'hidden',
+        backgroundColor: theme.color.neutral.background,
+        border: `1px solid ${theme.color.neutral.border}`,
+        boxShadow: 'none',
+        zIndex: 3,
+    }),
+    option: (base, state) => ({
+        ...base,
+        color: state.isSelected ? theme.color.neutral.textOnPrimary : theme.color.neutral.text,
+        backgroundColor: state.isSelected ? theme.color.primary.action : theme.color.neutral.background,
+        '& > p': {
+            color: state.isSelected ? theme.color.neutral.textOnPrimary : theme.color.neutral.textSubtle,
+            a: {
+                color: state.isSelected ? theme.color.neutral.textOnPrimary : theme.color.neutral.textSubtle,
+                '&:hover': {
+                    color: state.isSelected ? theme.color.neutral.textOnPrimary : theme.color.neutral.textSubtle,
+                },
+                textDecoration: 'underline',
+            },
+        },
+
+        '&:hover': {
+            backgroundColor: state.isSelected ? undefined : theme.color.neutral.hover,
+        },
+    }),
+    noOptionsMessage: (base) => ({
+        ...base,
+        color: theme.color.neutral.textSubtle,
+    }),
+    singleValue: (base, { selectProps: { isDisabled } }) => ({
+        ...base,
+        color: isDisabled ? theme.color.neutral.textDisabled : theme.color.neutral.text,
+    }),
+    placeholder: (base) => ({
+        ...base,
+        color: theme.color.neutral.textPlaceholder,
+        fontStyle: 'italic',
+    }),
+    input: (base) => ({
+        ...base,
+        color: theme.color.neutral.text,
+    }),
+};
+
+type GetIsSelectedFn = (
+    options: SelectOption[],
+    value: SelectOptionValue | SelectOptionValue[] | null | undefined,
+    isMulti?: boolean,
+) => SelectOption | SelectOption[] | null;
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+export type SelectPrimitiveProps = {
+    options: SelectOption[];
+    value?: SelectOptionValue | SelectOptionValue[] | null;
+    setValue: (value: SelectOptionValue | SelectOptionValue[]) => void;
+    getIsSelected?: GetIsSelectedFn;
+    isMulti?: boolean;
+    isClearable?: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
+    error?: boolean | string;
+    components?: Record<string, React.ComponentType<any>>;
+    suffix?: string;
+    menuMinWidth?: number;
+    menuPosition?: 'fixed' | 'absolute';
+    className?: string;
+    as?: React.ElementType;
+    instanceId?: string;
+    /**
+     * Whether the select is rendered inside a modal. When `true`, the menu position defaults to `'fixed'`
+     * and scroll blocking is enabled to prevent the menu from scrolling away in large modals.
+     * Also affects the z-index of the menu portal (defaults to 99 inside modal, 9 outside).
+     */
+    isRenderedInsideModal?: boolean;
+    /**
+     * Custom z-index for the menu portal. When not provided, defaults to 99 when `isRenderedInsideModal`
+     * is `true`, and 9 otherwise.
+     */
+    menuPortalZIndex?: number;
+    // Allow additional props to be passed through to react-select
+    [key: string]: any;
+};
+/* eslint-enable @typescript-eslint/no-explicit-any */
+
+export const selectDefaultGetIsSelected: GetIsSelectedFn = (options, value, isMulti) => {
+    if (!isMulti) return options.find((option) => option.value === value) || null;
+    // Map the value array to options while keeping order
+    return (value as SelectOptionValue[])
+        ?.map((val) => options.find((opt) => opt.value === val))
+        .filter(Boolean) as SelectOption[];
+};
+
+const StyledIndicatorsContainer = styled(withReactSelectTheme(selectComponents.IndicatorsContainer))`
+    & > div{
+        padding: 6px !important;
+    }
+
+    .indicator-slot {
+        padding: 6px;
+        display: flex;
+        align-items: center;
+
+        svg:not(.error-svg){
+            color: ${theme.color.neutral.icon};
+        }
+    }
+`;
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type ReactSelectStyledProps = Record<string, any>;
+
+const getMenuPortalZIndex = (props: ReactSelectStyledProps) => props.selectProps?.menuPortalZIndex;
+const getMenuPortalMinWidth = (props: ReactSelectStyledProps) => (props.selectProps?.menuMinWidth || 0);
+
+const StyledMenuPortal = styled(withReactSelectTheme(selectComponents.MenuPortal))`
+    z-index: ${getMenuPortalZIndex} !important;
+    min-width: ${getMenuPortalMinWidth}px !important;
+`;
+
+const StyledControl = styled(withReactSelectTheme(selectComponents.Control))`
+    min-height: 36px !important;
+    background-color: ${theme.color.neutral.fieldBackground} !important;
+    border: 1px solid ${theme.color.neutral.fieldBorder} !important;
+    border-radius: 6px !important;
+    transition: border-color 120ms ease-out, background-color 120ms ease-out !important;
+    padding: 0 6px;
+
+    &:hover {
+        background-color: ${theme.color.neutral.hover} !important;
+    }
+
+    &:focus-within{
+        border-color: ${theme.color.primary.fieldBorderActive} !important;
+        background-color: ${theme.color.neutral.background} !important;
+        box-shadow: var(--shadow-active) !important;
+    }
+
+    .disabled & {
+        border-color: ${theme.color.neutral.disabled} !important;
+        background-color: ${theme.color.neutral.disabled} !important;
+    }
+
+    .error & {
+        background-color: ${theme.color.danger.backgroundSubtle} !important;
+        border: 1px solid ${theme.color.danger.fieldBorder} !important;
+
+        &:hover {
+            background-color: ${theme.color.danger.backgroundSubtleHover};
+            border: 1px solid ${theme.color.primary.chipText} !important;
+        }
+    }
+`;
+
+const StyledOption = styled(withReactSelectTheme(selectComponents.Option))`
+    ${theme.typography.shared.desktop.bodyM}
+`;
+
+const Option: FC<OptionProps<SelectOption>> = ({ children, data: { description }, ...props }) => (
+    <StyledOption {...props}>
+        {children}
+        {description && (
+            <Text size="small">{description}</Text>
+        )}
+    </StyledOption>
+);
+
+type SelectIndicatorsContainerProps = IndicatorsContainerProps<SelectOption> & {
+    selectProps: { indicator?: ReactNode; suffix?: string };
+};
+
+const IndicatorsContainer: FC<SelectIndicatorsContainerProps> = ({
+    selectProps: { indicator, suffix }, children, ...props
+}) => {
+    return (
+        <StyledIndicatorsContainer {...props}>
+            {(indicator || suffix) && (
+                <div className='indicator-slot'>
+                    <Text color={theme.color.neutral.textSubtle}>{suffix}</Text>
+                    {indicator}
+                </div>
+            )}
+            {children}
+        </StyledIndicatorsContainer>
+    );
+};
+
+// TODO JK: Use DropdownIcon
+const DropdownIndicator: FC<DropdownIndicatorProps<SelectOption>> = ({ innerProps, selectProps }) => (
+    <IconButton
+        Icon={selectProps.menuIsOpen ? CaretUpIcon : CaretDownIcon}
+        {...innerProps as React.HTMLAttributes<Element>}
+    />
+);
+
+const ClearIndicator: FC<ClearIndicatorProps<SelectOption>> = ({ innerProps, selectProps }) => {
+    return (
+        <IconButton
+            Icon={CrossIcon}
+            data-test={`${selectProps?.id ?? selectProps?.name}--clear`}
+            {...innerProps as React.HTMLAttributes<Element>}
+        />
+    );
+};
+
+const MultiValueRemoveButton = styled(IconButton)`
+    height: auto;
+    :hover {
+        color: ${theme.color.neutral.textSubtle};
+        background-color: transparent;
+    }
+`;
+
+export const SelectMultiValueRemove: FC<Pick<MultiValueRemoveProps<SelectOption>, 'innerProps'>> = ({ innerProps }) => (
+    <MultiValueRemoveButton
+        Icon={CrossIcon}
+        {...innerProps as React.HTMLAttributes<Element>}
+    />
+);
+
+const IndicatorSeparator = () => null; // we don't display anything
+
+/**
+ * A context-free select component built on `react-select` with Apify styling.
+ *
+ * Use the `isRenderedInsideModal` prop to control modal-aware behavior (z-index, menu positioning,
+ * scroll blocking). Use `menuPortalZIndex` to override the default z-index values.
+ *
+ * In the console frontend, prefer using the `Select` wrapper from `primitives/select` which
+ * automatically injects these props via `ModalContext`.
+ */
+export const SelectPrimitive = forwardRef<unknown, SelectPrimitiveProps>(({
+    options,
+    value,
+    setValue,
+    disabled,
+    readOnly,
+    error,
+    suffix,
+    className,
+    components,
+    isMulti,
+    isClearable = true,
+    menuPosition,
+    getIsSelected,
+    as,
+    isRenderedInsideModal = false,
+    menuPortalZIndex,
+    ...props
+}, ref) => {
+    const selectedOptions = useMemo(
+        // this enables to override default selection mechanism (which compares option.value)
+        () => (getIsSelected
+            ? getIsSelected(options, value, isMulti)
+            : selectDefaultGetIsSelected(options, value, isMulti)),
+        [getIsSelected, options, value, isMulti],
+    );
+
+    const onSelect = useCallback((selected: SelectOption | SelectOption[] | null) => {
+        if (!isMulti) {
+            // We use empty string instead of null for empty values. The reason is that SimpleSchema field type
+            // is usually string so for initial values, we set '' as initial value.
+            // If we select & cancel some value, it should go back to ''
+            setValue(selected ? (selected as SelectOption).value : '');
+            return;
+        }
+        setValue((selected as SelectOption[]).map((option) => option.value));
+    }, [setValue, isMulti]);
+
+    const effectiveMenuPosition = menuPosition || (isRenderedInsideModal ? 'fixed' : 'absolute');
+    const resolvedMenuPortalZIndex = menuPortalZIndex
+        ?? (isRenderedInsideModal ? DEFAULT_Z_INDEX_IN_MODAL : DEFAULT_Z_INDEX_OUTSIDE_MODAL);
+
+    const indicator = error && <XCircleIcon size="16" color={theme.color.danger.icon} className='error-svg' />;
+
+    const Component = as || SelectComponent;
+
+    return (
+        <Component
+            components={{
+                DropdownIndicator,
+                ClearIndicator,
+                IndicatorSeparator,
+                MultiValueRemove: SelectMultiValueRemove, // react-select slot name
+                IndicatorsContainer,
+                Option,
+                Control: StyledControl,
+                MenuPortal: StyledMenuPortal,
+                ...components,
+            }}
+            ref={ref}
+            openMenuOnFocus
+            isDisabled={disabled || readOnly}
+            error={error}
+            options={options}
+            closeMenuOnSelect={!isMulti}
+            value={selectedOptions}
+            isMulti={isMulti}
+            isClearable={isClearable}
+            onChange={onSelect}
+            isRenderedInsideModal={isRenderedInsideModal}
+            // Used by getMenuPortalZIndex fnc of StyledMenuPortal to determine z-index of the menu portal
+            menuPortalZIndex={resolvedMenuPortalZIndex}
+            menuPosition={effectiveMenuPosition}
+            // If someone decides to debug this behavior, 'overflow: auto' on .Modal-content has huge effect on how menu renders
+            menuShouldBlockScroll={isRenderedInsideModal} // Otherwise menu scrolls away in big modal
+            indicator={indicator}
+            suffix={suffix}
+            styles={selectStyles}
+            {...props}
+            className={clsx(
+                className,
+                error && 'error',
+                (disabled || readOnly) && 'disabled',
+            )}
+        />
+    );
+});
+
+SelectPrimitive.displayName = 'SelectPrimitive';

package/src/components/switch/index.ts

@@ -0,0 +1 @@
+export * from './switch.js';

package/src/components/switch/switch.stories.jsx

@@ -0,0 +1,38 @@
+import { useState } from 'react';
+import styled from 'styled-components';
+import { SwitchPrimitive as Switch } from './switch';
+
+export default {
+    title: 'UI-Library/Inputs/Switch',
+    args: {},
+};
+
+const Grid = styled.div`
+    margin: 5rem 3rem;
+    display: grid;
+    grid-template-columns: repeat(2, auto);
+    gap: 1rem 5rem;
+
+    input{
+        width: 100%;
+    }
+`;
+
+export const SwitchPrimitive = () => {
+    const [value, setValue] = useState(1);
+    return (
+        <Grid>
+            <Switch value={value} setValue={setValue}/> <p>checked vs unchecked</p>
+            <Switch name="Disabled"
+                disabled
+                value={false}
+                setValue={() => {}}
+            /> <p>disabled</p>
+            <Switch name="Error"
+                error='Test error'
+                value={value}
+                setValue={setValue}
+            /> <p>error</p>
+        </Grid>
+    );
+};