@apify/ui-library 1.138.0 → 1.138.1

package/src/components/code/one_line_code/one_line_code.tsx

@@ -23,10 +23,7 @@ export const oneLineCodeClassNames = {
     buttons: 'OneLineCode-Buttons',
 };
 
-type ThemeType = keyof Pick<
-    (typeof theme)['color'],
-    'primary' | 'success' | 'warning' | 'danger' | 'neutral'
->;
+type ThemeType = keyof Pick<(typeof theme)['color'], 'primary' | 'success' | 'warning' | 'danger' | 'neutral'>;
 
 const HTML_METHOD_CHIP_STYLES: Record<HttpMethod, ThemeType> = {
     GET: 'primary',
@@ -56,14 +53,18 @@ type OneLineCodeWrapperProps = SyntaxHighlighterBaseStylesWrapperProps & {
 const OneLineCodeWrapper = styled(SyntaxHighlighterBaseStylesWrapper)<OneLineCodeWrapperProps>`
     display: flex;
     padding-right: ${theme.space.space16} !important;
-    ${({ $fitContent }) => $fitContent && css`
-        width: fit-content;
-    `}
-
-    ${({ $disabled }) => $disabled && css`
-        opacity: 0.5;
-        cursor: not-allowed;
-    `}
+    ${({ $fitContent }) =>
+        $fitContent &&
+        css`
+            width: fit-content;
+        `}
+
+    ${({ $disabled }) =>
+        $disabled &&
+        css`
+            opacity: 0.5;
+            cursor: not-allowed;
+        `}
 
     height: 4.6rem;
 
@@ -95,11 +96,7 @@ const OneLineCodeWrapper = styled(SyntaxHighlighterBaseStylesWrapper)<OneLineCod
             bottom: 0;
             width: 4rem;
             z-index: 5;
-            background: linear-gradient(
-                to right,
-                transparent,
-                ${theme.color.neutral.backgroundMuted} 3rem
-            );
+            background: linear-gradient(to right, transparent, ${theme.color.neutral.backgroundMuted} 3rem);
         }
     }
 
@@ -117,7 +114,6 @@ const OneLineCodeWrapper = styled(SyntaxHighlighterBaseStylesWrapper)<OneLineCod
         scrollbar-width: thin;
         scrollbar-color: ${theme.color.neutral.border} transparent;
 
-
         pre {
             display: flex;
             flex: 1;
@@ -142,10 +138,7 @@ export type TrackingBundleDataObject = {
     trackingData?: Record<string, unknown>;
 };
 
-export type OneLineCodeTrackingBundle = Record<
-    'secret' | 'copy' | 'action',
-    TrackingBundleDataObject
->;
+export type OneLineCodeTrackingBundle = Record<'secret' | 'copy' | 'action', TrackingBundleDataObject>;
 
 export type OneLineCodeProps = Omit<BoxProps, 'children'> & {
     children: string;
@@ -203,7 +196,7 @@ export function OneLineCode({
             <div className={oneLineCodeClassNames.gradientWrapper}>
                 <div className={oneLineCodeClassNames.scrollableWrapper}>
                     {httpMethod && (
-                        <Text className={oneLineCodeClassNames.methodChip} as='div'>
+                        <Text className={oneLineCodeClassNames.methodChip} as="div">
                             {httpMethod}
                         </Text>
                     )}
@@ -223,13 +216,9 @@ export function OneLineCode({
                         onClick={() => setShowSecret((prev) => !prev)}
                         trackingId={trackingBundle?.secret?.trackingId}
                         trackingData={trackingBundle?.secret?.trackingData}
-                        data-test='toggle-visibility-button'
+                        data-test="toggle-visibility-button"
                     >
-                        {showSecret ? (
-                            <EyeOffIcon size="16" />
-                        ) : (
-                            <EyeIcon size="16" />
-                        )}
+                        {showSecret ? <EyeOffIcon size="16" /> : <EyeIcon size="16" />}
                     </ActionButton>
                 )}
                 {!hideCopyButton && (
@@ -249,6 +238,6 @@ export function OneLineCode({
                     </ActionButton>
                 )}
             </div>
-        </OneLineCodeWrapper >
+        </OneLineCodeWrapper>
     );
 }

package/src/components/code/prism_highlighter.tsx

@@ -51,38 +51,39 @@ void loadLanguages();
  * Detects the language of the code based on common keywords. We need it for user-generated content
  * @param code The code to analyze.
  */
-const useDetectedLanguage = (code: string, passedLanguage?: string) => useMemo(() => {
-    if (passedLanguage) return passedLanguage;
-    const tests = [
-        { lang: 'rust', keywords: ['fn main()', 'let mut', 'println!', 'pub struct', 'use std::'] },
-        { lang: 'http', keywords: ['GET /', 'POST /', 'HTTP/1.1', 'Host:', 'Content-Type:'] },
-        { lang: 'bash', keywords: ['#!/bin/bash', 'echo ', 'cd ', 'ls'] },
-        { lang: 'markup', keywords: ['<div', '<span', '<html', '<!DOCTYPE', '</'] },
-        { lang: 'xml-doc', keywords: ['<?xml', '<doc', '<summary', '</doc>'] },
-        { lang: 'yaml', keywords: ['version:', 'services:', 'name:'] },
-        { lang: 'docker', keywords: ['FROM ', 'RUN ', 'CMD ', 'ENTRYPOINT', 'EXPOSE'] },
-        { lang: 'python', keywords: ['def ', 'import ', 'print(', 'self', 'None'] },
-        { lang: 'javascript', keywords: ['function', 'const', 'let', '=>', 'console.log', 'var'] },
-        { lang: 'typescript', keywords: ['interface ', 'type ', ': string', ': number', 'as const'] },
-    ];
-
-    const scored = tests.map((test) => {
-        let score = 0;
-        for (const kw of test.keywords) {
-            if (code.includes(kw)) score += 1;
-        }
-        return { lang: test.lang, score };
-    });
+const useDetectedLanguage = (code: string, passedLanguage?: string) =>
+    useMemo(() => {
+        if (passedLanguage) return passedLanguage;
+        const tests = [
+            { lang: 'rust', keywords: ['fn main()', 'let mut', 'println!', 'pub struct', 'use std::'] },
+            { lang: 'http', keywords: ['GET /', 'POST /', 'HTTP/1.1', 'Host:', 'Content-Type:'] },
+            { lang: 'bash', keywords: ['#!/bin/bash', 'echo ', 'cd ', 'ls'] },
+            { lang: 'markup', keywords: ['<div', '<span', '<html', '<!DOCTYPE', '</'] },
+            { lang: 'xml-doc', keywords: ['<?xml', '<doc', '<summary', '</doc>'] },
+            { lang: 'yaml', keywords: ['version:', 'services:', 'name:'] },
+            { lang: 'docker', keywords: ['FROM ', 'RUN ', 'CMD ', 'ENTRYPOINT', 'EXPOSE'] },
+            { lang: 'python', keywords: ['def ', 'import ', 'print(', 'self', 'None'] },
+            { lang: 'javascript', keywords: ['function', 'const', 'let', '=>', 'console.log', 'var'] },
+            { lang: 'typescript', keywords: ['interface ', 'type ', ': string', ': number', 'as const'] },
+        ];
+
+        const scored = tests.map((test) => {
+            let score = 0;
+            for (const kw of test.keywords) {
+                if (code.includes(kw)) score += 1;
+            }
+            return { lang: test.lang, score };
+        });
 
-    const max = _.maxBy(scored, 'score');
+        const max = _.maxBy(scored, 'score');
 
-    if (max?.score && max.score > 0) return max.lang;
-    return undefined;
-}, [code, passedLanguage]);
+        if (max?.score && max.score > 0) return max.lang;
+        return undefined;
+    }, [code, passedLanguage]);
 
 type PreWrapperProps = {
-    $hasLinePrefixes: boolean,
-    $isSingleLine: boolean
+    $hasLinePrefixes: boolean;
+    $isSingleLine: boolean;
 };
 
 const PreWrapper = styled.pre<PreWrapperProps>`
@@ -99,13 +100,16 @@ const PreWrapper = styled.pre<PreWrapperProps>`
         vertical-align: middle;
 
         /* The following CSS deal with https://github.com/apify/apify-core/issues/20920 */
-        ${({ $isSingleLine }) => ($isSingleLine ? css`
-            overflow-y: hidden;
-            scrollbar-width: none;
-        ` : css`
-            scrollbar-width: thin;
-            overflow: hidden;
-        `)};
+        ${({ $isSingleLine }) =>
+            $isSingleLine
+                ? css`
+                      overflow-y: hidden;
+                      scrollbar-width: none;
+                  `
+                : css`
+                      scrollbar-width: thin;
+                      overflow: hidden;
+                  `};
 
         *,
         *::before,
@@ -128,27 +132,33 @@ const PreWrapper = styled.pre<PreWrapperProps>`
                 padding-left: ${({ $hasLinePrefixes }) => ($hasLinePrefixes ? '0.2' : '1')}rem;
             }
 
-            ${({ $isSingleLine }) => !$isSingleLine && css<{ $hasLinePrefixes: boolean }>`
-                &:hover {
-                    background-color: ${HIGHLIGHT_BACKGROUND_COLOR} !important;
-                    border-left: 6px solid ${theme.color.neutral.border} !important;
-                    padding-left: ${({ $hasLinePrefixes }) => ($hasLinePrefixes ? '0.2' : '1')}rem;
-                }
-            `}
-
-            ${({ $isSingleLine }) => ($isSingleLine ? css<PreWrapperProps>`
-                white-space: nowrap;
-                vertical-align: text-top;
-            ` : css<PreWrapperProps>`
-                padding-left: ${({ $hasLinePrefixes }) => ($hasLinePrefixes ? theme.space.space8 : theme.space.space16)};
-                padding-right: ${theme.space.space16};
-
-                &:hover {
-                    background-color: ${HIGHLIGHT_BACKGROUND_COLOR} !important;
-                    border-left: 6px solid ${theme.color.neutral.border} !important;
-                    padding-left: ${({ $hasLinePrefixes }) => ($hasLinePrefixes ? '0.2' : '1')}rem;
-                }
-            `)}
+            ${({ $isSingleLine }) =>
+                !$isSingleLine &&
+                css<{ $hasLinePrefixes: boolean }>`
+                    &:hover {
+                        background-color: ${HIGHLIGHT_BACKGROUND_COLOR} !important;
+                        border-left: 6px solid ${theme.color.neutral.border} !important;
+                        padding-left: ${({ $hasLinePrefixes }) => ($hasLinePrefixes ? '0.2' : '1')}rem;
+                    }
+                `}
+
+            ${({ $isSingleLine }) =>
+                $isSingleLine
+                    ? css<PreWrapperProps>`
+                          white-space: nowrap;
+                          vertical-align: text-top;
+                      `
+                    : css<PreWrapperProps>`
+                          padding-left: ${({ $hasLinePrefixes }) =>
+                              $hasLinePrefixes ? theme.space.space8 : theme.space.space16};
+                          padding-right: ${theme.space.space16};
+
+                          &:hover {
+                              background-color: ${HIGHLIGHT_BACKGROUND_COLOR} !important;
+                              border-left: 6px solid ${theme.color.neutral.border} !important;
+                              padding-left: ${({ $hasLinePrefixes }) => ($hasLinePrefixes ? '0.2' : '1')}rem;
+                          }
+                      `}
         }
     }
 `;
@@ -168,59 +178,57 @@ export const CodeHighlighterLineBashPrefix = styled(CodeHighlighterLinePrefix)<{
 `;
 
 type SyntaxHighlighterProps = Omit<HighlightProps, 'children' | 'language'> & {
-    size?: SharedTextSize,
-    linePrefixes?: Record<string, ReactNode>,
-    highlightLines?: number[],
-    language?: string,
-    className?: string,
-    isSingleLine: boolean,
+    size?: SharedTextSize;
+    linePrefixes?: Record<string, ReactNode>;
+    highlightLines?: number[];
+    language?: string;
+    className?: string;
+    isSingleLine: boolean;
 };
 
-export const PrismSyntaxHighlighter = forwardRef<HTMLPreElement, SyntaxHighlighterProps>(({
-    size = 'regular',
-    linePrefixes = {},
-    highlightLines = [],
-    language,
-    className,
-    isSingleLine,
-    ...rest
-}, ref) => {
-    const { uiTheme } = useSharedUiDependencies();
-    const hasLinePrefixes = !_.isEmpty(linePrefixes);
-    const highlightedLinesObject = useRef<Record<number, boolean>>(Object.fromEntries(highlightLines.map((e) => [e, true])));
-
-    const effectiveLanguage = useDetectedLanguage(rest.code || '', language) ?? 'javascript';
-
-    return (
-        <Highlight
-            theme={uiTheme === 'DARK' ? themes.nightOwl : oneLightTheme}
-            language={effectiveLanguage}
-            {...rest}
-        >
-            {({ className: prismClassName, tokens, getLineProps, getTokenProps }) => (
-                <PreWrapper
-                    tabIndex={0}
-                    className={clsx(className, prismClassName)}
-                    $hasLinePrefixes={hasLinePrefixes}
-                    $isSingleLine={isSingleLine}
-                    ref={ref}
-                >
-                    <Text
-                        size={size}
-                        type='code'
-                        as='code'
+export const PrismSyntaxHighlighter = forwardRef<HTMLPreElement, SyntaxHighlighterProps>(
+    ({ size = 'regular', linePrefixes = {}, highlightLines = [], language, className, isSingleLine, ...rest }, ref) => {
+        const { uiTheme } = useSharedUiDependencies();
+        const hasLinePrefixes = !_.isEmpty(linePrefixes);
+        const highlightedLinesObject = useRef<Record<number, boolean>>(
+            Object.fromEntries(highlightLines.map((e) => [e, true])),
+        );
+
+        const effectiveLanguage = useDetectedLanguage(rest.code || '', language) ?? 'javascript';
+
+        return (
+            <Highlight
+                theme={uiTheme === 'DARK' ? themes.nightOwl : oneLightTheme}
+                language={effectiveLanguage}
+                {...rest}
+            >
+                {({ className: prismClassName, tokens, getLineProps, getTokenProps }) => (
+                    <PreWrapper
+                        tabIndex={0}
+                        className={clsx(className, prismClassName)}
+                        $hasLinePrefixes={hasLinePrefixes}
+                        $isSingleLine={isSingleLine}
+                        ref={ref}
                     >
-                        {tokens.map((line, i) => (
-                            <div key={i} {...getLineProps({ line, className: highlightedLinesObject.current[i + 1] ? 'highlighted' : '' })}>
-                                {hasLinePrefixes && (linePrefixes[i + 1] || <CodeHighlighterLinePrefix />)}
-                                {line.map((token, key) => (
-                                    <span key={key} {...getTokenProps({ token })} />
-                                ))}
-                            </div>
-                        ))}
-                    </Text>
-                </PreWrapper>
-            )}
-        </Highlight>
-    );
-});
+                        <Text size={size} type="code" as="code">
+                            {tokens.map((line, i) => (
+                                <div
+                                    key={i}
+                                    {...getLineProps({
+                                        line,
+                                        className: highlightedLinesObject.current[i + 1] ? 'highlighted' : '',
+                                    })}
+                                >
+                                    {hasLinePrefixes && (linePrefixes[i + 1] || <CodeHighlighterLinePrefix />)}
+                                    {line.map((token, key) => (
+                                        <span key={key} {...getTokenProps({ token })} />
+                                    ))}
+                                </div>
+                            ))}
+                        </Text>
+                    </PreWrapper>
+                )}
+            </Highlight>
+        );
+    },
+);

package/src/components/code/prism_python.ts

@@ -61,9 +61,11 @@ Prism.languages.python = {
         },
     },
     // eslint-disable-next-line @stylistic/max-len
-    keyword: /\b(?:_(?=\s*:)|and|as|assert|async|await|break|case|class|continue|def|del|elif|else|except|exec|finally|for|from|global|if|import|in|is|lambda|match|nonlocal|not|or|pass|print|raise|return|try|while|with|yield)\b/,
+    keyword:
+        /\b(?:_(?=\s*:)|and|as|assert|async|await|break|case|class|continue|def|del|elif|else|except|exec|finally|for|from|global|if|import|in|is|lambda|match|nonlocal|not|or|pass|print|raise|return|try|while|with|yield)\b/,
     // eslint-disable-next-line @stylistic/max-len
-    builtin: /\b(?:__import__|abs|all|any|apply|ascii|basestring|bin|bool|buffer|bytearray|bytes|callable|chr|classmethod|cmp|coerce|compile|complex|delattr|dict|dir|divmod|enumerate|eval|execfile|file|filter|float|format|frozenset|getattr|globals|hasattr|hash|help|hex|id|input|int|intern|isinstance|issubclass|iter|len|list|locals|long|map|max|memoryview|min|next|object|oct|open|ord|pow|property|range|raw_input|reduce|reload|repr|reversed|round|set|setattr|slice|sorted|staticmethod|str|sum|super|tuple|type|unichr|unicode|vars|xrange|zip)\b/,
+    builtin:
+        /\b(?:__import__|abs|all|any|apply|ascii|basestring|bin|bool|buffer|bytearray|bytes|callable|chr|classmethod|cmp|coerce|compile|complex|delattr|dict|dir|divmod|enumerate|eval|execfile|file|filter|float|format|frozenset|getattr|globals|hasattr|hash|help|hex|id|input|int|intern|isinstance|issubclass|iter|len|list|locals|long|map|max|memoryview|min|next|object|oct|open|ord|pow|property|range|raw_input|reduce|reload|repr|reversed|round|set|setattr|slice|sorted|staticmethod|str|sum|super|tuple|type|unichr|unicode|vars|xrange|zip)\b/,
     boolean: /\b(?:False|None|True)\b/,
     number: /\b0(?:b(?:_?[01])+|o(?:_?[0-7])+|x(?:_?[a-f0-9])+)\b|(?:\b\d+(?:_\d+)*(?:\.(?:\d+(?:_\d+)*)?)?|\B\.\d+(?:_\d+)*)(?:e[+-]?\d+(?:_\d+)*)?j?(?!\w)/i,
     operator: /[-+%=]=?|!=|:=|\*\*?=?|\/\/?=?|<[<=>]?|>[=>]?|[&|^~]/,

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

@@ -109,7 +109,8 @@ export const GreyHeaderWhenClosed: Story = {
     args: {
         header: 'Muted background when closed, more prominent on hover',
         isClosedHeaderGrey: true,
-        children: 'The header has a muted background when the card is collapsed, which becomes more prominent on hover.',
+        children:
+            'The header has a muted background when the card is collapsed, which becomes more prominent on hover.',
     },
 };
 

package/src/components/collapsible_card/collapsible_card.tsx

@@ -34,7 +34,8 @@ export type CollapsibleCardProps = {
     isClosedHeaderGrey?: boolean;
     isHeaderGreyOnHover?: boolean;
     as?: React.ElementType;
-} & TransientWrapperProps & Omit<React.HTMLAttributes<HTMLElement>, 'children'>;
+} & TransientWrapperProps &
+    Omit<React.HTMLAttributes<HTMLElement>, 'children'>;
 
 export const collapsibleCardClassNames = {
     TOP_SECTION: 'CollapsibleCard-TopSection',
@@ -42,7 +43,7 @@ export const collapsibleCardClassNames = {
     CONTENT: 'Card-content',
 };
 
-const StyledCardWrapper = styled(Box) <StyledWrapperProps>`
+const StyledCardWrapper = styled(Box)<StyledWrapperProps>`
     /* consoleStyle.partialStyle.card — TODO: reuse from Card once moved out of to_consolidate */
     background-color: ${theme.color.neutral.cardBackground};
     border: 1px solid ${theme.color.neutral.border};
@@ -50,10 +51,12 @@ const StyledCardWrapper = styled(Box) <StyledWrapperProps>`
     border-radius: ${theme.radius.radius8};
     box-sizing: border-box;
 
-    ${({ $hideOuterBorder }) => $hideOuterBorder && css`
-        border: none;
-        border-radius: unset;
-    `};
+    ${({ $hideOuterBorder }) =>
+        $hideOuterBorder &&
+        css`
+            border: none;
+            border-radius: unset;
+        `};
     /* Reset padding, it is dealt with within header and content styles */
     padding: 0;
     ${({ $hasShadow }) => ($hasShadow ? '' : 'box-shadow: initial;')}
@@ -81,7 +84,8 @@ const StyledHeader = styled.header<StyledHeaderProps>`
     ${({ $hideOuterBorder }) => ($hideOuterBorder ? '' : `border-radius: ${theme.radius.radius8};`)}
 
     &:hover {
-        background-color: ${({ $isHeaderGrey, $isHeaderGreyOnHover }) => (($isHeaderGrey || $isHeaderGreyOnHover) ? theme.color.neutral.hover : 'initial')};
+        background-color: ${({ $isHeaderGrey, $isHeaderGreyOnHover }) =>
+            $isHeaderGrey || $isHeaderGreyOnHover ? theme.color.neutral.hover : 'initial'};
     }
 
     .chevron {
@@ -135,22 +139,33 @@ export const CollapsibleCard: FC<CollapsibleCardProps> = ({
             $hasShadow={hasShadow}
             {...rest}
         >
-            {topSection && <StyledTopSection className={collapsibleCardClassNames.TOP_SECTION} data-test='collapsible-card-top-section'>
-                {topSection}
-            </StyledTopSection>}
+            {topSection && (
+                <StyledTopSection
+                    className={collapsibleCardClassNames.TOP_SECTION}
+                    data-test="collapsible-card-top-section"
+                >
+                    {topSection}
+                </StyledTopSection>
+            )}
             <StyledHeader
                 $hideOuterBorder={hideOuterBorder}
                 $isHeaderGrey={isClosedHeaderGrey && !isOpen && !isExpanded}
                 $isHeaderGreyOnHover={isHeaderGreyOnHover}
                 onClick={onHeaderClick}
             >
-                {!noChevron && <ChevronDownIcon size="16" className={clsx('chevron', (isExpanded ?? isOpen) ? 'chevron-open' : 'chevron-closed')} />}
+                {!noChevron && (
+                    <ChevronDownIcon
+                        size="16"
+                        className={clsx('chevron', (isExpanded ?? isOpen) ? 'chevron-open' : 'chevron-closed')}
+                    />
+                )}
                 {header}
             </StyledHeader>
-            <Collapsible.Root
-                open={isUncontrolled ? isOpen : isExpanded}
-            >
-                <CollapsibleContent $noDivider={noDivider} className={collapsibleCardClassNames.COLLAPSIBLE_CONTENT_WRAPPER}>
+            <Collapsible.Root open={isUncontrolled ? isOpen : isExpanded}>
+                <CollapsibleContent
+                    $noDivider={noDivider}
+                    className={collapsibleCardClassNames.COLLAPSIBLE_CONTENT_WRAPPER}
+                >
                     <StyledCardContent className={collapsibleCardClassNames.CONTENT} data-test="card-content">
                         {children}
                     </StyledCardContent>

package/src/components/color_wheel_gradient.tsx

@@ -1,14 +1,15 @@
 import styled from 'styled-components';
 
 export interface ColorWheelGradientProps {
-    translateX?: number,
-    translateY?: number,
-    rotation?: number,
-    radius?: number,
-    blurSize?: number,
+    translateX?: number;
+    translateY?: number;
+    rotation?: number;
+    radius?: number;
+    blurSize?: number;
 }
 
-export const ColorWheelGradient = styled.div<ColorWheelGradientProps>`${({ radius, rotation = 0, blurSize = 40, translateX = 0, translateY = 0 }) => `
+export const ColorWheelGradient = styled.div<ColorWheelGradientProps>`
+    ${({ radius, rotation = 0, blurSize = 40, translateX = 0, translateY = 0 }) => `
     z-index: 1;
     position: absolute;
     width: ${radius ? `${radius}px` : 'auto'};
@@ -28,4 +29,5 @@ export const ColorWheelGradient = styled.div<ColorWheelGradientProps>`${({ radiu
 
     border-radius: 50%;
     filter: blur(${blurSize}px)
-`}`;
+`}
+`;

package/src/components/floating/floating_component_base.tsx

@@ -11,7 +11,14 @@ import {
     useTransitionStyles,
 } from '@floating-ui/react';
 import clsx from 'clsx';
-import { type ComponentType, type CSSProperties, forwardRef, type MouseEvent, type ReactNode, type RefObject } from 'react';
+import {
+    type ComponentType,
+    type CSSProperties,
+    forwardRef,
+    type MouseEvent,
+    type ReactNode,
+    type RefObject,
+} from 'react';
 import styled from 'styled-components';
 
 import { theme } from '../../design_system/theme.js';
@@ -35,7 +42,7 @@ export const FLOATING_PLACEMENT = {
     LEFT_END: 'left-end',
 } as const;
 
-export type FloatingPlacement = typeof FLOATING_PLACEMENT[keyof typeof FLOATING_PLACEMENT];
+export type FloatingPlacement = (typeof FLOATING_PLACEMENT)[keyof typeof FLOATING_PLACEMENT];
 
 interface FloatingComponentWrapProps {
     showInPortal?: boolean;
@@ -125,9 +132,7 @@ export const FloatingComponentBase = ({
         y,
         refs: { setReference, setFloating },
         strategy: effectiveStrategy,
-        middlewareData: {
-            hide: refHidden,
-        },
+        middlewareData: { hide: refHidden },
         context,
     } = useFloating({
         open: isOpen,
@@ -169,7 +174,7 @@ export const FloatingComponentBase = ({
             <ChildrenWrap className={clsx(classNames.CHILDREN, contentWrapClassName)} ref={setReference}>
                 {children}
             </ChildrenWrap>
-            { isMounted && (
+            {isMounted && (
                 <FloatingComponentWrap
                     className={className}
                     ref={setFloating}
@@ -185,12 +190,14 @@ export const FloatingComponentBase = ({
                     showInPortal={showInPortal}
                 >
                     <div ref={triggerRef}>
-                        {CloseButtonComponent
-                            ? <StyledPopoverBox>
+                        {CloseButtonComponent ? (
+                            <StyledPopoverBox>
                                 {content}
                                 <CloseButtonComponent />
                             </StyledPopoverBox>
-                            : content}
+                        ) : (
+                            content
+                        )}
                     </div>
                 </FloatingComponentWrap>
             )}