@apify/ui-library 1.138.0 → 1.138.1

package/src/components/readme_renderer/table_of_contents.stories.tsx

@@ -34,7 +34,9 @@ const StoryWrapper = styled.div`
 const ContentArea = styled.div`
     padding: 2rem;
 
-    h1, h2, h3 {
+    h1,
+    h2,
+    h3 {
         margin-top: 3rem;
         margin-bottom: 1rem;
     }
@@ -285,7 +287,9 @@ export const Default: Story = {
             <TOCContainer>
                 <TableOfContents {...args} />
             </TOCContainer>
-            <ContentArea dangerouslySetInnerHTML={{ __html: `
+            <ContentArea
+                dangerouslySetInnerHTML={{
+                    __html: `
                 <h1 id="getting-started">Getting Started</h1>
                 <p>This is the introduction section with some content.</p>
 
@@ -312,7 +316,9 @@ export const Default: Story = {
 
                 <h2 id="api-reference">API Reference</h2>
                 <p>Details about the API.</p>
-            ` }} />
+            `,
+                }}
+            />
         </StoryWrapper>
     ),
 };
@@ -329,7 +335,9 @@ export const WithoutH1Heading: Story = {
             <TOCContainer>
                 <TableOfContents {...args} />
             </TOCContainer>
-            <ContentArea dangerouslySetInnerHTML={{ __html: `
+            <ContentArea
+                dangerouslySetInnerHTML={{
+                    __html: `
                 <h2 id="overview">Overview</h2>
                 <p>This document starts with H2 headings.</p>
 
@@ -350,7 +358,9 @@ export const WithoutH1Heading: Story = {
 
                 <h3 id="steps">Steps</h3>
                 <p>Installation steps.</p>
-            ` }} />
+            `,
+                }}
+            />
         </StoryWrapper>
     ),
 };
@@ -369,8 +379,8 @@ export const ManySection: Story = {
             </TOCContainer>
             <ContentArea>
                 <p style={{ marginBottom: '2rem' }}>
-                    Scroll down to see the table of contents highlighting different sections.
-                    The TOC stays sticky while scrolling through content.
+                    Scroll down to see the table of contents highlighting different sections. The TOC stays sticky while
+                    scrolling through content.
                 </p>
                 {Array.from({ length: 7 }, (_, i) => (
                     <div key={i}>
@@ -378,10 +388,17 @@ export const ManySection: Story = {
                         <p>Content for section {i + 1}.</p>
                         {Array.from({ length: 3 }, (__, j) => (
                             <div key={j}>
-                                <h3 id={`subsection-${i + 1}-${j + 1}`}>Subsection {i + 1}.{j + 1}</h3>
-                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-                                    Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
-                                <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+                                <h3 id={`subsection-${i + 1}-${j + 1}`}>
+                                    Subsection {i + 1}.{j + 1}
+                                </h3>
+                                <p>
+                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor
+                                    incididunt ut labore et dolore magna aliqua.
+                                </p>
+                                <p>
+                                    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
+                                    ex ea commodo consequat.
+                                </p>
                             </div>
                         ))}
                     </div>
@@ -403,7 +420,9 @@ export const WithCodeInHeadings: Story = {
             <TOCContainer>
                 <TableOfContents {...args} />
             </TOCContainer>
-            <ContentArea dangerouslySetInnerHTML={{ __html: `
+            <ContentArea
+                dangerouslySetInnerHTML={{
+                    __html: `
                 <h1 id="api-documentation">API Documentation</h1>
                 <p>Documentation with code examples in headings.</p>
 
@@ -427,7 +446,9 @@ export const WithCodeInHeadings: Story = {
 
                 <h2 id="usage-examples">Usage Examples</h2>
                 <p>How to use the API.</p>
-            ` }} />
+            `,
+                }}
+            />
         </StoryWrapper>
     ),
 };
@@ -444,7 +465,9 @@ export const SimpleFlat: Story = {
             <TOCContainer>
                 <TableOfContents {...args} />
             </TOCContainer>
-            <ContentArea dangerouslySetInnerHTML={{ __html: `
+            <ContentArea
+                dangerouslySetInnerHTML={{
+                    __html: `
                 <h1 id="quick-start">Quick Start</h1>
                 <p>A simple document.</p>
 
@@ -456,7 +479,9 @@ export const SimpleFlat: Story = {
 
                 <h2 id="step-3">Step 3</h2>
                 <p>Third step.</p>
-            ` }} />
+            `,
+                }}
+            />
         </StoryWrapper>
     ),
 };

package/src/components/readme_renderer/table_of_contents.tsx

@@ -1,8 +1,5 @@
 import _ from 'lodash';
-import React, {
-    useCallback,
-    useMemo,
-} from 'react';
+import React, { useCallback, useMemo } from 'react';
 import ReactMarkdown, { type AllowElement } from 'react-markdown';
 import remarkToc from 'remark-toc';
 import styled from 'styled-components';
@@ -13,7 +10,8 @@ import { Link } from '../link.js';
 import { Text } from '../text/index.js';
 import { cleanMarkdown, slugifyHeadingChildren } from './utils.js';
 
-export const useShowTableOfContents = (markdown: string | null | undefined) => useMemo(() => markdown && !!markdown.match(/^(#{1,3})\s.+$/m), [markdown]);
+export const useShowTableOfContents = (markdown: string | null | undefined) =>
+    useMemo(() => markdown && !!markdown.match(/^(#{1,3})\s.+$/m), [markdown]);
 
 const TOC_HEADING_ID = 'Contents';
 
@@ -29,12 +27,13 @@ const StyledTOCLink = styled(Text)`
         font-weight: inherit !important;
     }
 
-    &:hover, &.selected {
+    &:hover,
+    &.selected {
         color: ${theme.color.primary.text} !important;
     }
 
     &:before {
-        content: " ";
+        content: ' ';
         display: inline-block;
         height: 100%;
         left: 0;
@@ -71,7 +70,7 @@ const StyledTableOfContents = styled.div`
             padding-left: ${theme.space.space16} !important;
             max-height: 0;
             overflow: hidden;
-            transition: all .3s ease-in-out;
+            transition: all 0.3s ease-in-out;
 
             &.expanded {
                 max-height: 1000px;
@@ -92,7 +91,12 @@ interface CustomHTMLAnchorElement extends Omit<HTMLAnchorElement, 'children' | '
     parentNode: any;
 }
 
-const handleScroll = (anchors: CustomHTMLAnchorElement[], headlines: HTMLElement[], anchorLists: HTMLUListElement[] | null, headingOffsetPx: number) => {
+const handleScroll = (
+    anchors: CustomHTMLAnchorElement[],
+    headlines: HTMLElement[],
+    anchorLists: HTMLUListElement[] | null,
+    headingOffsetPx: number,
+) => {
     if (!anchors || !headlines) return;
 
     // Items that are past scroll
@@ -101,7 +105,8 @@ const handleScroll = (anchors: CustomHTMLAnchorElement[], headlines: HTMLElement
     });
 
     // Last item that is past the scroll is current in view. If no headline is past the scroll, let's select the first one
-    const currentHeadlineId = headlinesPastScrollPosition[headlinesPastScrollPosition.length - 1]?.id || headlines[0]?.id;
+    const currentHeadlineId =
+        headlinesPastScrollPosition[headlinesPastScrollPosition.length - 1]?.id || headlines[0]?.id;
 
     // Highlighting anchor of current headline
     if (currentHeadlineId) {
@@ -121,7 +126,11 @@ const handleScroll = (anchors: CustomHTMLAnchorElement[], headlines: HTMLElement
                 // by tag and className of neighboring nodes. There are two cases:
 
                 // 1) If h2 is selected, we want to expand its section with h3 headings
-                if (grandparent?.tagName === 'LI' && grandparent.children[1]?.tagName === 'UL' && grandparent.children[1]?.classList.contains('level-3')) {
+                if (
+                    grandparent?.tagName === 'LI' &&
+                    grandparent.children[1]?.tagName === 'UL' &&
+                    grandparent.children[1]?.classList.contains('level-3')
+                ) {
                     grandparent.children[1].classList.add('expanded');
                 }
 
@@ -141,9 +150,9 @@ const assignHeadingLevelsRecursively = (
         properties,
     }: {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        children: any[],
-        tagName: string,
-        properties: { className: string }
+        children: any[];
+        tagName: string;
+        properties: { className: string };
     },
     level: number,
 ) => {
@@ -170,12 +179,7 @@ export interface TableOfContentsProps {
     allowElement?: AllowElement;
 }
 
-const TableOfContentsComponent = ({
-    markdown,
-    headingOffsetPx = 10,
-    allowElement,
-    ...rest
-}: TableOfContentsProps) => {
+const TableOfContentsComponent = ({ markdown, headingOffsetPx = 10, allowElement, ...rest }: TableOfContentsProps) => {
     const cleanedMarkdown = useMemo(() => {
         const cleanedMarkdownString = cleanMarkdown(markdown);
         return `### ${TOC_HEADING_ID}\n${cleanedMarkdownString}`;
@@ -183,23 +187,26 @@ const TableOfContentsComponent = ({
 
     const hasTopLevelHeading = useMemo(() => !!cleanedMarkdown.match(/^#\s.+$/m), [cleanedMarkdown]);
 
-    const tocRef = useCallback((node: HTMLElement | null) => {
-        const anchors = node ? Array.from(node.querySelectorAll('a')) : [];
-        const anchorLists = node ? Array.from(node.querySelectorAll('ul')) : null;
-        const headlines = (anchors)
-            .map((anchor) => document.getElementById(anchor.hash.substr(1)))
-            .filter((headline) => headline !== undefined && headline !== null) as HTMLElement[];
-
-        const scrollHandler = () => handleScroll(anchors, headlines, anchorLists, headingOffsetPx);
-
-        // Callback refs cannot return cleanup functions - but they are called again with null on unmount
-        if (node) {
-            window.addEventListener('scroll', scrollHandler);
-        } else {
-            window.removeEventListener('scroll', scrollHandler);
-        }
-        scrollHandler(); // call for the first time so we select the first heading without scrolling
-    }, [headingOffsetPx]);
+    const tocRef = useCallback(
+        (node: HTMLElement | null) => {
+            const anchors = node ? Array.from(node.querySelectorAll('a')) : [];
+            const anchorLists = node ? Array.from(node.querySelectorAll('ul')) : null;
+            const headlines = anchors
+                .map((anchor) => document.getElementById(anchor.hash.substr(1)))
+                .filter((headline) => headline !== undefined && headline !== null) as HTMLElement[];
+
+            const scrollHandler = () => handleScroll(anchors, headlines, anchorLists, headingOffsetPx);
+
+            // Callback refs cannot return cleanup functions - but they are called again with null on unmount
+            if (node) {
+                window.addEventListener('scroll', scrollHandler);
+            } else {
+                window.removeEventListener('scroll', scrollHandler);
+            }
+            scrollHandler(); // call for the first time so we select the first heading without scrolling
+        },
+        [headingOffsetPx],
+    );
 
     return (
         <StyledTableOfContents ref={tocRef} {...rest}>
@@ -207,65 +214,58 @@ const TableOfContentsComponent = ({
                 allowElement={allowElement}
                 remarkPlugins={[
                     [remarkToc, { heading: TOC_HEADING_ID, maxDepth: 3 }],
-                    () => ({ children, ...nodeRest }) => {
-                        // TOC plug-ins only inject content table to existing markdown documents - only generating it is not a common use-case
-                        // To make is happen, we can just take the generated node where toc is located and throw away the rest.
-                        // children[0] is the heading where toc is placed (that's plug-in's requirement)
-                        // children[1] is the generated table of contents we can simply pick
-
-                        let tocContentNode = children[1];
-
-                        // If there is no H1 heading in the readme then assignHeadingLevelsRecursively does not work correctly.
-                        // We need to 'normalize' the final node to have all the levels we expect
-                        // - solution is to wrap the content in extra node that mimic this H1 group that remarkToc would normally create
-                        if (!hasTopLevelHeading) {
-                            tocContentNode = {
-                                type: 'list',
-                                ordered: false,
-                                spread: false,
-                                children: [
-                                    {
-                                        type: 'listItem',
-                                        spread: true,
-                                        children: [
-                                            tocContentNode,
-                                        ],
-                                    },
-                                ],
+                    () =>
+                        ({ children, ...nodeRest }) => {
+                            // TOC plug-ins only inject content table to existing markdown documents - only generating it is not a common use-case
+                            // To make is happen, we can just take the generated node where toc is located and throw away the rest.
+                            // children[0] is the heading where toc is placed (that's plug-in's requirement)
+                            // children[1] is the generated table of contents we can simply pick
+
+                            let tocContentNode = children[1];
+
+                            // If there is no H1 heading in the readme then assignHeadingLevelsRecursively does not work correctly.
+                            // We need to 'normalize' the final node to have all the levels we expect
+                            // - solution is to wrap the content in extra node that mimic this H1 group that remarkToc would normally create
+                            if (!hasTopLevelHeading) {
+                                tocContentNode = {
+                                    type: 'list',
+                                    ordered: false,
+                                    spread: false,
+                                    children: [
+                                        {
+                                            type: 'listItem',
+                                            spread: true,
+                                            children: [tocContentNode],
+                                        },
+                                    ],
+                                };
+                            }
+
+                            return {
+                                ...nodeRest,
+                                children: [tocContentNode],
                             };
-                        }
-
-                        return {
-                            ...nodeRest,
-                            children: [
-                                tocContentNode,
-                            ],
-                        };
+                        },
+                ]}
+                rehypePlugins={[
+                    () => (input) => {
+                        // this plug-in already works with html node representation so we can assign classNames that we need
+                        // in order to allow hiding blocks with h3 headings that are out of the viewport
+                        assignHeadingLevelsRecursively(input.children[0], 1);
+                        return input;
                     },
                 ]}
-                rehypePlugins={[() => (input) => {
-                    // this plug-in already works with html node representation so we can assign classNames that we need
-                    // in order to allow hiding blocks with h3 headings that are out of the viewport
-                    assignHeadingLevelsRecursively(input.children[0], 1);
-                    return input;
-                }]}
                 components={{
                     a: ({ children }) => {
                         const { search } = window.location;
                         const hash = `#${slugifyHeadingChildren(children)}`;
                         return (
-                            <StyledTOCLink
-                                forwardedAs={Link}
-                                to={`${search}${hash}`}
-                                py={'space4'}
-                            >
+                            <StyledTOCLink forwardedAs={Link} to={`${search}${hash}`} py={'space4'}>
                                 {children}
                             </StyledTOCLink>
                         );
                     },
-                    code: ({ children }) => (
-                        <code className="inline-code">{children}</code>
-                    ),
+                    code: ({ children }) => <code className="inline-code">{children}</code>,
                 }}
             >
                 {cleanedMarkdown}
@@ -274,4 +274,6 @@ const TableOfContentsComponent = ({
     );
 };
 
-export const TableOfContents = React.memo(TableOfContentsComponent, (prevProps, nextProps) => _.isEqual(prevProps, nextProps));
+export const TableOfContents = React.memo(TableOfContentsComponent, (prevProps, nextProps) =>
+    _.isEqual(prevProps, nextProps),
+);

package/src/components/readme_renderer/utils.tsx

@@ -2,9 +2,7 @@ import React, { type ReactElement, type ReactNode, useCallback } from 'react';
 import type { AllowElement } from 'react-markdown';
 import slugify from 'slugify';
 
-export const slugifyHeadingChildren = (
-    headingChildren: React.ReactNode,
-): string | undefined => {
+export const slugifyHeadingChildren = (headingChildren: React.ReactNode): string | undefined => {
     if (!headingChildren) return undefined;
 
     const slugs: string[] = [];
@@ -38,14 +36,20 @@ export const cleanMarkdown = (markdown: string, removeFirstH1?: boolean): string
 // This removes the first element if it's a `h1` containing exactly the Actor title
 // Allows undefined `actorTitle` for ease of use.
 export const useActorTitleHeadingFilter = (actorTitle: string | undefined): AllowElement => {
-    return useCallback((element, index, parent) => {
-        if (!actorTitle) return true;
-        if (parent?.type === 'root'
-            && index === 0
-            && element.tagName === 'h1'
-            && element.children.length === 1
-            && element.children[0].type === 'text'
-            && element.children[0].value?.toLowerCase() === actorTitle.toLowerCase()) return false;
-        return true;
-    }, [actorTitle]);
+    return useCallback(
+        (element, index, parent) => {
+            if (!actorTitle) return true;
+            if (
+                parent?.type === 'root' &&
+                index === 0 &&
+                element.tagName === 'h1' &&
+                element.children.length === 1 &&
+                element.children[0].type === 'text' &&
+                element.children[0].value?.toLowerCase() === actorTitle.toLowerCase()
+            )
+                return false;
+            return true;
+        },
+        [actorTitle],
+    );
 };

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

@@ -15,62 +15,35 @@ const Grid = styled.div`
     grid-template-columns: repeat(2, auto);
     gap: 1rem 5rem;
 
-    input{
+    input {
         width: 100%;
     }
 `;
 
-const options = [{ label: 'Ahoj', value: 1 }, { label: 'Ondro!', value: 2 }, { label: '🚲', value: 3 }];
+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>
+            <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>
     );
 };