@apify/ui-library 1.138.0 → 1.138.1

package/src/components/select/select.tsx

@@ -35,9 +35,7 @@ export type SelectOption = {
 export const withReactSelectTheme = (Component: FC<any>) => {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const EnhancedComponent = (props: any) => {
-        return (
-            <Component {...props} theme={defaultTheme} />
-        );
+        return <Component {...props} theme={defaultTheme} />;
     };
     const displayName = Component.name || (Component as { displayName?: string }).displayName;
     EnhancedComponent.displayName = `withReactSelectTheme${displayName}`;
@@ -174,7 +172,7 @@ export const selectDefaultGetIsSelected: GetIsSelectedFn = (options, value, isMu
 };
 
 const StyledIndicatorsContainer = styled(withReactSelectTheme(selectComponents.IndicatorsContainer))`
-    & > div{
+    & > div {
         padding: 6px !important;
     }
 
@@ -183,7 +181,7 @@ const StyledIndicatorsContainer = styled(withReactSelectTheme(selectComponents.I
         display: flex;
         align-items: center;
 
-        svg:not(.error-svg){
+        svg:not(.error-svg) {
             color: ${theme.color.neutral.icon};
         }
     }
@@ -193,7 +191,7 @@ const StyledIndicatorsContainer = styled(withReactSelectTheme(selectComponents.I
 type ReactSelectStyledProps = Record<string, any>;
 
 const getMenuPortalZIndex = (props: ReactSelectStyledProps) => props.selectProps?.menuPortalZIndex;
-const getMenuPortalMinWidth = (props: ReactSelectStyledProps) => (props.selectProps?.menuMinWidth || 0);
+const getMenuPortalMinWidth = (props: ReactSelectStyledProps) => props.selectProps?.menuMinWidth || 0;
 
 const StyledMenuPortal = styled(withReactSelectTheme(selectComponents.MenuPortal))`
     z-index: ${getMenuPortalZIndex} !important;
@@ -205,14 +203,16 @@ const StyledControl = styled(withReactSelectTheme(selectComponents.Control))`
     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;
+    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{
+    &:focus-within {
         border-color: ${theme.color.primary.fieldBorderActive} !important;
         background-color: ${theme.color.neutral.background} !important;
         box-shadow: var(--shadow-active) !important;
@@ -241,9 +241,7 @@ const StyledOption = styled(withReactSelectTheme(selectComponents.Option))`
 const Option: FC<OptionProps<SelectOption>> = ({ children, data: { description }, ...props }) => (
     <StyledOption {...props}>
         {children}
-        {description && (
-            <Text size="small">{description}</Text>
-        )}
+        {description && <Text size="small">{description}</Text>}
     </StyledOption>
 );
 
@@ -252,12 +250,14 @@ type SelectIndicatorsContainerProps = IndicatorsContainerProps<SelectOption> & {
 };
 
 const IndicatorsContainer: FC<SelectIndicatorsContainerProps> = ({
-    selectProps: { indicator, suffix }, children, ...props
+    selectProps: { indicator, suffix },
+    children,
+    ...props
 }) => {
     return (
         <StyledIndicatorsContainer {...props}>
             {(indicator || suffix) && (
-                <div className='indicator-slot'>
+                <div className="indicator-slot">
                     <Text color={theme.color.neutral.textSubtle}>{suffix}</Text>
                     {indicator}
                 </div>
@@ -271,7 +271,7 @@ const IndicatorsContainer: FC<SelectIndicatorsContainerProps> = ({
 const DropdownIndicator: FC<DropdownIndicatorProps<SelectOption>> = ({ innerProps, selectProps }) => (
     <IconButton
         Icon={selectProps.menuIsOpen ? CaretUpIcon : CaretDownIcon}
-        {...innerProps as React.HTMLAttributes<Element>}
+        {...(innerProps as React.HTMLAttributes<Element>)}
     />
 );
 
@@ -280,7 +280,7 @@ const ClearIndicator: FC<ClearIndicatorProps<SelectOption>> = ({ innerProps, sel
         <IconButton
             Icon={CrossIcon}
             data-test={`${selectProps?.id ?? selectProps?.name}--clear`}
-            {...innerProps as React.HTMLAttributes<Element>}
+            {...(innerProps as React.HTMLAttributes<Element>)}
         />
     );
 };
@@ -294,10 +294,7 @@ const MultiValueRemoveButton = styled(IconButton)`
 `;
 
 export const SelectMultiValueRemove: FC<Pick<MultiValueRemoveProps<SelectOption>, 'innerProps'>> = ({ innerProps }) => (
-    <MultiValueRemoveButton
-        Icon={CrossIcon}
-        {...innerProps as React.HTMLAttributes<Element>}
-    />
+    <MultiValueRemoveButton Icon={CrossIcon} {...(innerProps as React.HTMLAttributes<Element>)} />
 );
 
 const IndicatorSeparator = () => null; // we don't display anything
@@ -311,92 +308,97 @@ const IndicatorSeparator = () => null; // we don't display anything
  * 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],
-    );
+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 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 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 indicator = error && <XCircleIcon size="16" color={theme.color.danger.icon} className="error-svg" />;
 
-    const Component = as || SelectComponent;
+        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',
-            )}
-        />
-    );
-});
+        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/shortcut.stories.jsx

@@ -15,24 +15,33 @@ export default {
 };
 
 export const ShortcutComponent = () => {
-    return (<div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
-    Default:
-        <div style={{ display: 'flex', gap: '4px', padding: '16px' }}>
-            <Shortcut>F</Shortcut>
-            <Shortcut>Ctrl / ⌘</Shortcut>
-            <Shortcut>Shift</Shortcut>
+    return (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+            Default:
+            <div style={{ display: 'flex', gap: '4px', padding: '16px' }}>
+                <Shortcut>F</Shortcut>
+                <Shortcut>Ctrl / ⌘</Shortcut>
+                <Shortcut>Shift</Shortcut>
+            </div>
+            Dark:
+            <div
+                style={{
+                    display: 'flex',
+                    gap: '4px',
+                    backgroundColor: theme.colorPalette.dark.neutral950,
+                    padding: '16px',
+                }}
+            >
+                <Shortcut dark>F</Shortcut>
+                <Shortcut dark>Ctrl / ⌘</Shortcut>
+                <Shortcut dark>Shift</Shortcut>
+            </div>
         </div>
-    Dark:
-        <div style={{ display: 'flex', gap: '4px', backgroundColor: theme.colorPalette.dark.neutral950, padding: '16px' }}>
-            <Shortcut dark>F</Shortcut>
-            <Shortcut dark>Ctrl / ⌘</Shortcut>
-            <Shortcut dark>Shift</Shortcut>
-        </div>
-    </div>);
+    );
 };
 
 export const Playground = (args) => {
-    return (<Shortcut {...args}/>);
+    return <Shortcut {...args} />;
 };
 Playground.args = {
     children: 'F',

package/src/components/shortcut.tsx

@@ -36,20 +36,9 @@ const StyledShortcut = styled(Text)<{ $dark?: boolean }>`
     ${({ $dark }) => ($dark ? darkColors : adaptiveColors)}
 `;
 
-export const Shortcut = ({
-    as,
-    className,
-    children,
-    dark = false,
-}: ShortcutProps) => {
+export const Shortcut = ({ as, className, children, dark = false }: ShortcutProps) => {
     return (
-        <StyledShortcut
-            forwardedAs={as}
-            className={className}
-            $dark={dark}
-            type='code'
-            size='small'
-            weight='medium'>
+        <StyledShortcut forwardedAs={as} className={className} $dark={dark} type="code" size="small" weight="medium">
             {children}
         </StyledShortcut>
     );

package/src/components/simple_markdown/simple_markdown.stories.tsx

@@ -1,10 +1,5 @@
-import {
-    Box,
-} from '../box.js';
-import {
-    SimpleMarkdown,
-    type SimpleMarkdownProps,
-} from './simple_markdown.js';
+import { Box } from '../box.js';
+import { SimpleMarkdown, type SimpleMarkdownProps } from './simple_markdown.js';
 
 const testMarkdown = `
 Lorem ipsum **with bold** text and some *italic text*.
@@ -55,7 +50,7 @@ https://youtu.be/K76Hib0cY0k
 
 const Template = (props: SimpleMarkdownProps) => {
     return (
-        <Box px='space32' py='space40' style={{ maxWidth: '850px' }}>
+        <Box px="space32" py="space40" style={{ maxWidth: '850px' }}>
             <SimpleMarkdown {...props} />
         </Box>
     );
@@ -67,5 +62,5 @@ export default {
     component: SimpleMarkdown as any,
 };
 
-export const MarkdownRegular = () => <Template size='regular'>{testMarkdown}</Template>;
-export const MarkdownSmall = () => <Template size='small'>{testMarkdown}</Template>;
+export const MarkdownRegular = () => <Template size="regular">{testMarkdown}</Template>;
+export const MarkdownSmall = () => <Template size="small">{testMarkdown}</Template>;