@frontify/fondue 12.0.0-beta.164 → 12.0.0-beta.165

package/dist/components/FrontifyPattern/FrontifyPattern.d.ts

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import { ReactElement } from 'react';
 import { PatternDesign, PatternScale, PatternScaleOrigin, PatternTheme } from '../../foundation/Pattern';
 export type FrontifyPatternProps = {
     pattern: PatternDesign;
@@ -6,4 +6,7 @@ export type FrontifyPatternProps = {
     scaleOrigin?: PatternScaleOrigin;
     foregroundColor?: PatternTheme;
 };
-export declare const FrontifyPattern: FC<FrontifyPatternProps>;
+export declare const FrontifyPattern: {
+    ({ pattern, scale, scaleOrigin, foregroundColor, }: FrontifyPatternProps): ReactElement;
+    displayName: string;
+};

package/dist/components/FrontifyPattern/FrontifyPattern.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"FrontifyPattern.es.js","sources":["../../../src/components/FrontifyPattern/FrontifyPattern.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React, { FC, cloneElement } from 'react';\nimport { merge } from '@utilities/merge';\nimport {\n    PatternDesign,\n    PatternScale,\n    PatternScaleOrigin,\n    PatternTheme,\n    patternDesigns,\n    patternScales,\n    patternThemes,\n} from '@foundation/Pattern';\n\nexport type FrontifyPatternProps = {\n    pattern: PatternDesign;\n    scale?: PatternScale;\n    scaleOrigin?: PatternScaleOrigin;\n    foregroundColor?: PatternTheme;\n};\n\nexport const FrontifyPattern: FC<FrontifyPatternProps> = ({\n    pattern = PatternDesign.DigitalAssets,\n    scale = PatternScale.SM,\n    scaleOrigin = ['top', 'left'],\n    foregroundColor = PatternTheme.Black,\n}) => {\n    return (\n        <div\n            data-test-id=\"frontify-pattern\"\n            className={merge(['tw-w-[260px]', patternThemes[foregroundColor]])}\n            style={{ transformOrigin: `${scaleOrigin.join(' ')}`, transform: `scale(${patternScales[scale]})` }}\n        >\n            {cloneElement(patternDesigns[pattern])}\n        </div>\n    );\n};\nFrontifyPattern.displayName = 'FondueFrontifyPattern';\n"],"names":["FrontifyPattern","pattern","PatternDesign","scale","PatternScale","scaleOrigin","foregroundColor","PatternTheme","React","merge","patternThemes","patternScales","cloneElement","patternDesigns"],"mappings":";;;;;AAqBO,MAAMA,IAA4C,CAAC;AAAA,EACtD,SAAAC,IAAUC,EAAc;AAAA,EACxB,OAAAC,IAAQC,EAAa;AAAA,EACrB,aAAAC,IAAc,CAAC,OAAO,MAAM;AAAA,EAC5B,iBAAAC,IAAkBC,EAAa;AACnC,MAEQ,gBAAAC,EAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,gBAAa;AAAA,IACb,WAAWC,EAAM,CAAC,gBAAgBC,EAAcJ,CAAe,CAAC,CAAC;AAAA,IACjE,OAAO,EAAE,iBAAiB,GAAGD,EAAY,KAAK,GAAG,KAAK,WAAW,SAASM,EAAcR,CAAK,KAAK;AAAA,EAAA;AAAA,EAEjGS,EAAaC,EAAeZ,CAAO,CAAC;AAAA;AAIjDD,EAAgB,cAAc;"}
+{"version":3,"file":"FrontifyPattern.es.js","sources":["../../../src/components/FrontifyPattern/FrontifyPattern.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React, { ReactElement, cloneElement } from 'react';\nimport { merge } from '@utilities/merge';\nimport {\n    PatternDesign,\n    PatternScale,\n    PatternScaleOrigin,\n    PatternTheme,\n    patternDesigns,\n    patternScales,\n    patternThemes,\n} from '@foundation/Pattern';\n\nexport type FrontifyPatternProps = {\n    pattern: PatternDesign;\n    scale?: PatternScale;\n    scaleOrigin?: PatternScaleOrigin;\n    foregroundColor?: PatternTheme;\n};\n\nexport const FrontifyPattern = ({\n    pattern = PatternDesign.DigitalAssets,\n    scale = PatternScale.SM,\n    scaleOrigin = ['top', 'left'],\n    foregroundColor = PatternTheme.Black,\n}: FrontifyPatternProps): ReactElement => {\n    return (\n        <div\n            data-test-id=\"frontify-pattern\"\n            className={merge(['tw-w-[260px]', patternThemes[foregroundColor]])}\n            style={{ transformOrigin: `${scaleOrigin.join(' ')}`, transform: `scale(${patternScales[scale]})` }}\n        >\n            {cloneElement(patternDesigns[pattern])}\n        </div>\n    );\n};\nFrontifyPattern.displayName = 'FondueFrontifyPattern';\n"],"names":["FrontifyPattern","pattern","PatternDesign","scale","PatternScale","scaleOrigin","foregroundColor","PatternTheme","React","merge","patternThemes","patternScales","cloneElement","patternDesigns"],"mappings":";;;;;AAqBO,MAAMA,IAAkB,CAAC;AAAA,EAC5B,SAAAC,IAAUC,EAAc;AAAA,EACxB,OAAAC,IAAQC,EAAa;AAAA,EACrB,aAAAC,IAAc,CAAC,OAAO,MAAM;AAAA,EAC5B,iBAAAC,IAAkBC,EAAa;AACnC,MAEQ,gBAAAC,EAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,gBAAa;AAAA,IACb,WAAWC,EAAM,CAAC,gBAAgBC,EAAcJ,CAAe,CAAC,CAAC;AAAA,IACjE,OAAO,EAAE,iBAAiB,GAAGD,EAAY,KAAK,GAAG,KAAK,WAAW,SAASM,EAAcR,CAAK,KAAK;AAAA,EAAA;AAAA,EAEjGS,EAAaC,EAAeZ,CAAO,CAAC;AAAA;AAIjDD,EAAgB,cAAc;"}

package/dist/components/InputLabel/InputLabel.d.ts

@@ -1,13 +1,17 @@
 import { TooltipProps } from '../Tooltip/Tooltip';
 import { TooltipIconProps } from '../TooltipIcon/TooltipIcon';
-import { FC, PropsWithChildren } from 'react';
+import { ReactElement, ReactNode } from 'react';
 export type InputLabelTooltipProps = (TooltipProps & Pick<TooltipIconProps, 'triggerStyle' | 'triggerIcon'>) | (TooltipProps & Pick<TooltipIconProps, 'triggerStyle' | 'triggerIcon'>)[];
-export type InputLabelProps = PropsWithChildren<{
+export type InputLabelProps = {
     htmlFor: string;
     required?: boolean;
     disabled?: boolean;
     clickable?: boolean;
     tooltip?: InputLabelTooltipProps;
     bold?: boolean;
-}>;
-export declare const InputLabel: FC<InputLabelProps>;
+    children?: ReactNode;
+};
+export declare const InputLabel: {
+    ({ children, htmlFor, required, disabled, clickable, tooltip, bold, }: InputLabelProps): ReactElement;
+    displayName: string;
+};

package/dist/components/InputLabel/InputLabel.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputLabel.es.js","sources":["../../../src/components/InputLabel/InputLabel.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { TooltipProps } from '@components/Tooltip/Tooltip';\nimport { TooltipIcon, TooltipIconProps } from '@components/TooltipIcon/TooltipIcon';\nimport { IconSize } from '@foundation/Icon/IconSize';\nimport { merge } from '@utilities/merge';\nimport React, { FC, PropsWithChildren } from 'react';\n\nexport type InputLabelTooltipProps =\n    | (TooltipProps & Pick<TooltipIconProps, 'triggerStyle' | 'triggerIcon'>)\n    | (TooltipProps & Pick<TooltipIconProps, 'triggerStyle' | 'triggerIcon'>)[];\n\nexport type InputLabelProps = PropsWithChildren<{\n    htmlFor: string;\n    required?: boolean;\n    disabled?: boolean;\n    clickable?: boolean;\n    tooltip?: InputLabelTooltipProps;\n    bold?: boolean;\n}>;\n\nexport const InputLabel: FC<InputLabelProps> = ({\n    children,\n    htmlFor,\n    required = false,\n    disabled = false,\n    clickable = false,\n    tooltip = [],\n    bold,\n}) => {\n    const tooltips = Array.isArray(tooltip) ? tooltip : [tooltip];\n\n    const tooltipsWithKeys = tooltips.map((tooltip, index) => ({\n        key: index,\n        ...tooltip,\n    }));\n\n    return (\n        <div\n            className={merge([\n                'tw-inline-flex tw-leading-4 tw-items-center tw-gap-1 tw-font-sans tw-text-s tw-max-w-full tw-min-w-0 tw-flex-initial',\n                disabled ? 'tw-text-disabled' : 'tw-text-text-weak',\n            ])}\n            data-test-id=\"input-label-container\"\n        >\n            <div className=\"tw-flex-1 tw-overflow-hidden tw-text-ellipsis tw-whitespace-nowrap\">\n                <label\n                    htmlFor={htmlFor}\n                    className={merge([\n                        'tw-select-none',\n                        bold && 'tw-font-medium',\n                        disabled || !clickable\n                            ? 'hover:tw-cursor-not-allowed tw-pointer-events-none'\n                            : 'hover:tw-cursor-pointer hover:tw-text-text group-hover:tw-text-text',\n                    ])}\n                    data-test-id=\"input-label\"\n                    title={typeof children === 'string' ? children : ''}\n                >\n                    {children}\n                </label>\n            </div>\n\n            {required && (\n                <span data-test-id=\"input-label-required\" className=\"tw-h-4 tw-text-m tw-text-text-negative\">\n                    *\n                </span>\n            )}\n            {tooltipsWithKeys.map(({ key, triggerIcon, triggerStyle, hoverDelay = 100, ...tooltipProps }) => (\n                <div key={key} className=\"tw-leading-3\">\n                    <TooltipIcon\n                        tooltip={{ ...tooltipProps, hoverDelay }}\n                        iconSize={IconSize.Size16}\n                        triggerIcon={triggerIcon}\n                        triggerStyle={triggerStyle}\n                    />\n                </div>\n            ))}\n        </div>\n    );\n};\nInputLabel.displayName = 'FondueInputLabel';\n"],"names":["InputLabel","children","htmlFor","required","disabled","clickable","tooltip","bold","tooltipsWithKeys","index","React","merge","key","triggerIcon","triggerStyle","hoverDelay","tooltipProps","TooltipIcon","IconSize"],"mappings":";;;;AAqBO,MAAMA,IAAkC,CAAC;AAAA,EAC5C,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,UAAAC,IAAW;AAAA,EACX,WAAAC,IAAY;AAAA,EACZ,SAAAC,IAAU,CAAC;AAAA,EACX,MAAAC;AACJ,MAAM;AAGF,QAAMC,KAFW,MAAM,QAAQF,CAAO,IAAIA,IAAU,CAACA,CAAO,GAE1B,IAAI,CAACA,GAASG,OAAW;AAAA,IACvD,KAAKA;AAAA,IACL,GAAGH;AAAAA,EACL,EAAA;AAGE,SAAA,gBAAAI,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAWC,EAAM;AAAA,QACb;AAAA,QACAP,IAAW,qBAAqB;AAAA,MAAA,CACnC;AAAA,MACD,gBAAa;AAAA,IAAA;AAAA,IAEb,gBAAAM,EAAA,cAAC,OAAI,EAAA,WAAU,qEACX,GAAA,gBAAAA,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,SAAAR;AAAA,QACA,WAAWS,EAAM;AAAA,UACb;AAAA,UACAJ,KAAQ;AAAA,UACRH,KAAY,CAACC,IACP,uDACA;AAAA,QAAA,CACT;AAAA,QACD,gBAAa;AAAA,QACb,OAAO,OAAOJ,KAAa,WAAWA,IAAW;AAAA,MAAA;AAAA,MAEhDA;AAAA,IAAA,CAET;AAAA,IAECE,KACI,gBAAAO,EAAA,cAAA,QAAA,EAAK,gBAAa,wBAAuB,WAAU,4CAAyC,GAE7F;AAAA,IAEHF,EAAiB,IAAI,CAAC,EAAE,KAAAI,GAAK,aAAAC,GAAa,cAAAC,GAAc,YAAAC,IAAa,KAAK,GAAGC,EAC1E,MAAA,gBAAAN,EAAA,cAAC,OAAI,EAAA,KAAAE,GAAU,WAAU,eACrB,GAAA,gBAAAF,EAAA;AAAA,MAACO;AAAA,MAAA;AAAA,QACG,SAAS,EAAE,GAAGD,GAAc,YAAAD,EAAW;AAAA,QACvC,UAAUG,EAAS;AAAA,QACnB,aAAAL;AAAA,QACA,cAAAC;AAAA,MAAA;AAAA,IAAA,CAER,CACH;AAAA,EAAA;AAGb;AACAd,EAAW,cAAc;"}
+{"version":3,"file":"InputLabel.es.js","sources":["../../../src/components/InputLabel/InputLabel.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { TooltipProps } from '@components/Tooltip/Tooltip';\nimport { TooltipIcon, TooltipIconProps } from '@components/TooltipIcon/TooltipIcon';\nimport { IconSize } from '@foundation/Icon/IconSize';\nimport { merge } from '@utilities/merge';\nimport React, { ReactElement, ReactNode } from 'react';\n\nexport type InputLabelTooltipProps =\n    | (TooltipProps & Pick<TooltipIconProps, 'triggerStyle' | 'triggerIcon'>)\n    | (TooltipProps & Pick<TooltipIconProps, 'triggerStyle' | 'triggerIcon'>)[];\n\nexport type InputLabelProps = {\n    htmlFor: string;\n    required?: boolean;\n    disabled?: boolean;\n    clickable?: boolean;\n    tooltip?: InputLabelTooltipProps;\n    bold?: boolean;\n    children?: ReactNode;\n};\n\nexport const InputLabel = ({\n    children,\n    htmlFor,\n    required = false,\n    disabled = false,\n    clickable = false,\n    tooltip = [],\n    bold,\n}: InputLabelProps): ReactElement => {\n    const tooltips = Array.isArray(tooltip) ? tooltip : [tooltip];\n\n    const tooltipsWithKeys = tooltips.map((tooltip, index) => ({\n        key: index,\n        ...tooltip,\n    }));\n\n    return (\n        <div\n            className={merge([\n                'tw-inline-flex tw-leading-4 tw-items-center tw-gap-1 tw-font-sans tw-text-s tw-max-w-full tw-min-w-0 tw-flex-initial',\n                disabled ? 'tw-text-disabled' : 'tw-text-text-weak',\n            ])}\n            data-test-id=\"input-label-container\"\n        >\n            <div className=\"tw-flex-1 tw-overflow-hidden tw-text-ellipsis tw-whitespace-nowrap\">\n                <label\n                    htmlFor={htmlFor}\n                    className={merge([\n                        'tw-select-none',\n                        bold && 'tw-font-medium',\n                        disabled || !clickable\n                            ? 'hover:tw-cursor-not-allowed tw-pointer-events-none'\n                            : 'hover:tw-cursor-pointer hover:tw-text-text group-hover:tw-text-text',\n                    ])}\n                    data-test-id=\"input-label\"\n                    title={typeof children === 'string' ? children : ''}\n                >\n                    {children}\n                </label>\n            </div>\n\n            {required && (\n                <span data-test-id=\"input-label-required\" className=\"tw-h-4 tw-text-m tw-text-text-negative\">\n                    *\n                </span>\n            )}\n            {tooltipsWithKeys.map(({ key, triggerIcon, triggerStyle, hoverDelay = 100, ...tooltipProps }) => (\n                <div key={key} className=\"tw-leading-3\">\n                    <TooltipIcon\n                        tooltip={{ ...tooltipProps, hoverDelay }}\n                        iconSize={IconSize.Size16}\n                        triggerIcon={triggerIcon}\n                        triggerStyle={triggerStyle}\n                    />\n                </div>\n            ))}\n        </div>\n    );\n};\nInputLabel.displayName = 'FondueInputLabel';\n"],"names":["InputLabel","children","htmlFor","required","disabled","clickable","tooltip","bold","tooltipsWithKeys","index","React","merge","key","triggerIcon","triggerStyle","hoverDelay","tooltipProps","TooltipIcon","IconSize"],"mappings":";;;;AAsBO,MAAMA,IAAa,CAAC;AAAA,EACvB,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,UAAAC,IAAW;AAAA,EACX,WAAAC,IAAY;AAAA,EACZ,SAAAC,IAAU,CAAC;AAAA,EACX,MAAAC;AACJ,MAAqC;AAGjC,QAAMC,KAFW,MAAM,QAAQF,CAAO,IAAIA,IAAU,CAACA,CAAO,GAE1B,IAAI,CAACA,GAASG,OAAW;AAAA,IACvD,KAAKA;AAAA,IACL,GAAGH;AAAAA,EACL,EAAA;AAGE,SAAA,gBAAAI,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAWC,EAAM;AAAA,QACb;AAAA,QACAP,IAAW,qBAAqB;AAAA,MAAA,CACnC;AAAA,MACD,gBAAa;AAAA,IAAA;AAAA,IAEb,gBAAAM,EAAA,cAAC,OAAI,EAAA,WAAU,qEACX,GAAA,gBAAAA,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,SAAAR;AAAA,QACA,WAAWS,EAAM;AAAA,UACb;AAAA,UACAJ,KAAQ;AAAA,UACRH,KAAY,CAACC,IACP,uDACA;AAAA,QAAA,CACT;AAAA,QACD,gBAAa;AAAA,QACb,OAAO,OAAOJ,KAAa,WAAWA,IAAW;AAAA,MAAA;AAAA,MAEhDA;AAAA,IAAA,CAET;AAAA,IAECE,KACI,gBAAAO,EAAA,cAAA,QAAA,EAAK,gBAAa,wBAAuB,WAAU,4CAAyC,GAE7F;AAAA,IAEHF,EAAiB,IAAI,CAAC,EAAE,KAAAI,GAAK,aAAAC,GAAa,cAAAC,GAAc,YAAAC,IAAa,KAAK,GAAGC,EAC1E,MAAA,gBAAAN,EAAA,cAAC,OAAI,EAAA,KAAAE,GAAU,WAAU,eACrB,GAAA,gBAAAF,EAAA;AAAA,MAACO;AAAA,MAAA;AAAA,QACG,SAAS,EAAE,GAAGD,GAAc,YAAAD,EAAW;AAAA,QACvC,UAAUG,EAAS;AAAA,QACnB,aAAAL;AAAA,QACA,cAAAC;AAAA,MAAA;AAAA,IAAA,CAER,CACH;AAAA,EAAA;AAGb;AACAd,EAAW,cAAc;"}

package/dist/components/LinkChooser/LinkChooser.d.ts

@@ -1,8 +1,8 @@
-import { FC, ReactElement } from 'react';
+import { ReactElement } from 'react';
 import { IconName, LinkChooserProps } from './types';
 export declare const IconOptions: Record<IconName | string, ReactElement>;
 export declare const DEFAULT_ICON = IconName.Link;
 export declare const CUSTOM_LINK_ID = "custom-link";
 export declare const MAX_STORED_ITEMS = 5;
 export declare const QUERIES_STORAGE_KEY = "queries";
-export declare const LinkChooser: FC<LinkChooserProps>;
+export declare const LinkChooser: ({ getGlobalByQuery, openPreview, clipboardOptions, selectedResult, openInNewTab, ariaLabel, extraSections, label, placeholder, onOpenInNewTabChange, onLinkChange, disabled, clearable, required, validation, }: LinkChooserProps) => ReactElement;

package/dist/components/LinkChooser/LinkChooser.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"LinkChooser.es.js","sources":["../../../src/components/LinkChooser/LinkChooser.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { mapToAriaProps } from '@components/ActionMenu/Aria/helper';\nimport { Checkbox, CheckboxState } from '@components/Checkbox/Checkbox';\nimport { useDropdownAutoHeight } from '@components/Dropdown/useDropdownAutoHeight';\nimport {\n    IconArrowOutExternal,\n    IconBuildingBlock,\n    IconDocument,\n    IconDocumentStack,\n    IconLayersSingle,\n    IconLink,\n} from '@foundation/Icon/Generated';\nimport { useComboBox } from '@react-aria/combobox';\nimport { DismissButton } from '@react-aria/overlays';\nimport { scrollIntoView } from '@react-aria/utils';\nimport { useComboBoxState } from '@react-stately/combobox';\nimport { Validation } from '@utilities/validation';\nimport { useMachine } from '@xstate/react';\nimport { AnimatePresence, motion } from 'framer-motion';\nimport React, { FC, Key, MouseEvent, ReactElement, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { NavigationMenu } from './NavigationMenu';\nimport { Popover } from './Popover';\nimport { SearchInput } from './SearchInput';\nimport { SearchResultsList } from './SearchResultsList';\nimport { defaultSection } from './sections';\nimport { linkChooserMachine } from './state/machine';\nimport { LinkChooserState } from './state/types';\nimport { IconName, LinkChooserProps, SearchMenuBlock } from './types';\nimport { decoratedResults, doesContainSubstring, findSection, getDefaultData } from './utils/helpers';\nimport { closeBoxState, isLoaded, openBoxState, queryMatchesSelection, shouldGoBack } from './utils/state';\nimport { createCustomLink } from './utils/transformers';\nimport { useManualComboBoxEventHandlers } from './utils/useManualComboBoxHandlers';\n\nexport const IconOptions: Record<IconName | string, ReactElement> = {\n    [IconName.Document]: <IconDocument />,\n    [IconName.Library]: <IconDocumentStack />,\n    [IconName.Link]: <IconLink />,\n    [IconName.External]: <IconArrowOutExternal />,\n    [IconName.Template]: <IconLayersSingle />,\n    [IconName.Block]: <IconBuildingBlock />,\n};\n\nexport const DEFAULT_ICON = IconName.Link;\nexport const CUSTOM_LINK_ID = 'custom-link';\nexport const MAX_STORED_ITEMS = 5;\nexport const QUERIES_STORAGE_KEY = 'queries';\n\nexport const LinkChooser: FC<LinkChooserProps> = ({\n    getGlobalByQuery = getDefaultData,\n    openPreview = window.open,\n    clipboardOptions = navigator.clipboard,\n    selectedResult = null,\n    openInNewTab = false,\n    ariaLabel = 'Menu',\n    extraSections = [],\n    label,\n    placeholder,\n    onOpenInNewTabChange,\n    onLinkChange,\n    disabled,\n    clearable,\n    required,\n    validation = Validation.Default,\n}) => {\n    const [{ context, matches, value }, send, service] = useMachine(() =>\n        linkChooserMachine.withContext({\n            searchResults: [],\n            selectedResult,\n            query: '',\n            interruptedFetch: false,\n            getExtraResultsByQuery: null,\n            currentSectionId: defaultSection.id,\n            extraSections,\n            clipboardOptions,\n            openPreview,\n            getGlobalByQuery,\n            onLinkChange,\n        }),\n    );\n\n    const [searchInput, setSearchInput] = useState(selectedResult?.title);\n    const isDefault = !shouldGoBack(matches);\n    const searchResultMenuBlocks = useMemo(\n        () =>\n            [\n                !isDefault && { id: 'menu-top', menuItems: [findSection(extraSections, context.currentSectionId)] },\n                {\n                    id: 'search',\n                    menuItems: decoratedResults(context.searchResults),\n                },\n                isDefault && { id: 'menu-bottom', menuItems: extraSections.map(({ id, title }) => ({ id, title })) },\n            ].filter(Boolean),\n        [isDefault, extraSections, context.currentSectionId, context.searchResults],\n    ) as SearchMenuBlock[];\n\n    const props = mapToAriaProps(ariaLabel, searchResultMenuBlocks);\n\n    const triggerRef = useRef<HTMLDivElement | null>(null);\n    const inputRef = useRef<HTMLInputElement | null>(null);\n    const listBoxRef = useRef<HTMLUListElement | null>(null);\n    const popoverRef = useRef<HTMLDivElement | null>(null);\n\n    const handleSelectionChange = (key: Key) => {\n        const foundItem = context.searchResults.find((item) => item.id === key);\n        if (foundItem) {\n            setSearchInput(foundItem.title);\n            send({ type: 'SET_SELECTED_SEARCH_RESULT', data: { selectedResult: foundItem } });\n        }\n        closeBoxState(state);\n        setSelectedKey(key);\n    };\n\n    const handleInputChange = useCallback(\n        (query: string) => {\n            setSearchInput(query);\n            send({ type: 'TYPING', data: { query } });\n        },\n        [send],\n    );\n\n    const [selectedKey, setSelectedKey] = useState<Key | undefined>(context.selectedResult?.id);\n\n    const state = useComboBoxState({\n        ...props,\n        defaultFilter: (textValue, inputValue) => doesContainSubstring(textValue, inputValue, extraSections),\n        inputValue: searchInput,\n        onInputChange: handleInputChange,\n        onSelectionChange: handleSelectionChange,\n        menuTrigger: 'manual',\n        shouldCloseOnBlur: false,\n        allowsEmptyCollection: true,\n        selectedKey,\n    });\n\n    const { inputProps, listBoxProps, labelProps } = useComboBox(\n        {\n            ...props,\n            inputRef,\n            listBoxRef,\n            popoverRef,\n            isRequired: required,\n            placeholder,\n        },\n        state,\n    );\n\n    const handleClearClick = useCallback(() => {\n        state.setInputValue('');\n        setSelectedKey('');\n        send({ type: 'CLEARING', data: { query: '' } });\n    }, [send, state]);\n\n    const handleDropdownOpen = () => {\n        send('OPEN_DROPDOWN');\n        openBoxState(state);\n    };\n\n    const handleWrapperClick = () => {\n        if (document.activeElement !== inputRef.current) {\n            inputRef.current?.focus();\n        }\n        handleDropdownOpen();\n    };\n\n    const handleWrapperMouseDown = (event: MouseEvent<HTMLDivElement>) => {\n        if (matches(LinkChooserState.Focused) && event.target !== inputRef.current) {\n            event.preventDefault();\n        }\n    };\n\n    const handleDropdownClose = () => {\n        let selectedResult = null;\n        if (context.query) {\n            if (queryMatchesSelection(context.selectedResult, context.query)) {\n                selectedResult = context.selectedResult;\n            } else {\n                selectedResult = createCustomLink(state.inputValue);\n            }\n        }\n        send({ type: 'CLOSE_DROPDOWN', data: { selectedResult } });\n        if (selectedResult && selectedKey !== selectedResult.id) {\n            setSelectedKey(selectedResult.id);\n        }\n        closeBoxState(state);\n    };\n\n    const manualInputProps = useManualComboBoxEventHandlers(\n        { inputProps, inputRef, popoverRef, state },\n        {\n            onOpen: handleDropdownOpen,\n            onClose: handleDropdownClose,\n            onNavigate: (id) => {\n                if (isDefault) {\n                    send({\n                        type: 'SELECT_EXTRA_SECTION',\n                        data: {\n                            getExtraResultsByQuery: findSection(extraSections, id)?.getResults || null,\n                            currentSectionId: id.toString(),\n                        },\n                    });\n                } else {\n                    send({\n                        type: 'BACK_TO_DEFAULT',\n                        data: { getExtraResultsByQuery: null },\n                    });\n                }\n            },\n            onSelect: handleSelectionChange,\n        },\n    );\n\n    useEffect(() => {\n        if (isLoaded(matches) && context.interruptedFetch) {\n            send({ type: 'TYPING', data: { query: context.query } });\n        }\n    }, [context.interruptedFetch, context.query, matches, send, value]);\n\n    const { maxHeight } = useDropdownAutoHeight(inputRef, {\n        isOpen: matches(LinkChooserState.Focused),\n        autoResize: true,\n    });\n\n    const {\n        isOpen,\n        selectionManager: { focusedKey },\n    } = state;\n\n    useEffect(() => {\n        if (focusedKey && popoverRef.current && isOpen) {\n            const dropdownItem = popoverRef.current.querySelector(`[data-key=\"${focusedKey}\"]`);\n            if (dropdownItem) {\n                scrollIntoView(popoverRef.current, dropdownItem as HTMLElement);\n            }\n        }\n    }, [focusedKey, isOpen]);\n\n    const [flyoutWidth, setFlyoutWidth] = useState(0);\n\n    const calcFlyoutWidth = () => {\n        setFlyoutWidth(triggerRef.current?.getBoundingClientRect().width || 0);\n    };\n\n    useEffect(() => {\n        calcFlyoutWidth();\n        window.addEventListener('resize', calcFlyoutWidth, false);\n    }, []);\n\n    return (\n        <div data-test-id=\"link-chooser\" ref={triggerRef} className=\"tw-w-full tw-font-sans tw-text-s\">\n            {!!label && (\n                <label\n                    {...labelProps}\n                    data-test-id=\"link-chooser-label\"\n                    className=\"tw-text-black-80 tw-mb-1 tw-flex tw-align-items-center\"\n                >\n                    {label}\n                    {required && (\n                        <span\n                            data-test-id=\"link-chooser-label-required\"\n                            className=\"tw-h-4 tw-text-m tw-text-red-60 dark:tw-text-red-50 tw-ml-1\"\n                        >\n                            *\n                        </span>\n                    )}\n                </label>\n            )}\n            <SearchInput\n                ariaProps={manualInputProps}\n                selectedResult={context.selectedResult}\n                ref={inputRef}\n                disabled={disabled}\n                decorator={IconOptions[context.selectedResult?.icon || DEFAULT_ICON]}\n                clearable={clearable}\n                onClear={handleClearClick}\n                machineService={service}\n                validation={validation}\n                onClick={handleWrapperClick}\n                onMouseDown={handleWrapperMouseDown}\n            />\n            <AnimatePresence>\n                {matches(LinkChooserState.Focused) && (\n                    <motion.div\n                        style={{\n                            width: flyoutWidth,\n                        }}\n                        className=\"tw-absolute tw-left-auto tw-w-full tw-overflow-hidden tw-p-0 tw-shadow-mid tw-list-none tw-m-0 tw-mt-2 tw-z-20\"\n                        key=\"content\"\n                        initial={{ height: 0 }}\n                        animate={{ height: 'auto' }}\n                        exit={{ height: 0 }}\n                        transition={{ ease: [0.04, 0.62, 0.23, 0.98], duration: 0.5 }}\n                        data-test-id=\"link-chooser-dropdown\"\n                    >\n                        <DismissButton onDismiss={handleDropdownClose} />\n                        <Popover\n                            popoverRef={popoverRef}\n                            isOpen={matches(LinkChooserState.Focused)}\n                            onClose={handleDropdownClose}\n                            maxHeight={maxHeight}\n                        >\n                            <SearchResultsList\n                                {...listBoxProps}\n                                listBoxRef={listBoxRef}\n                                state={state}\n                                menuBlocks={searchResultMenuBlocks}\n                                border={false}\n                                machineService={service}\n                            />\n                            <div data-test-id=\"link-chooser-action-menu\" className=\"tw-border-t tw-border-black-10\">\n                                <NavigationMenu machineService={service} state={state} />\n                            </div>\n                        </Popover>\n                        <DismissButton onDismiss={handleDropdownClose} />\n                    </motion.div>\n                )}\n            </AnimatePresence>\n            <div className=\"tw-my-2\" data-test-id=\"link-chooser-new-tab\">\n                <Checkbox\n                    value=\"new-tab\"\n                    disabled={disabled}\n                    state={openInNewTab ? CheckboxState.Checked : CheckboxState.Unchecked}\n                    onChange={onOpenInNewTabChange}\n                    label=\"Open in New Tab\"\n                />\n            </div>\n        </div>\n    );\n};\n"],"names":["IconOptions","IconName","IconDocument","IconDocumentStack","IconLink","IconArrowOutExternal","IconLayersSingle","IconBuildingBlock","DEFAULT_ICON","CUSTOM_LINK_ID","MAX_STORED_ITEMS","QUERIES_STORAGE_KEY","LinkChooser","getGlobalByQuery","getDefaultData","openPreview","clipboardOptions","selectedResult","openInNewTab","ariaLabel","extraSections","label","placeholder","onOpenInNewTabChange","onLinkChange","disabled","clearable","required","validation","Validation","context","matches","value","send","service","useMachine","linkChooserMachine","defaultSection","searchInput","setSearchInput","useState","isDefault","shouldGoBack","searchResultMenuBlocks","useMemo","findSection","decoratedResults","id","title","props","mapToAriaProps","triggerRef","useRef","inputRef","listBoxRef","popoverRef","handleSelectionChange","key","foundItem","item","closeBoxState","state","setSelectedKey","handleInputChange","useCallback","query","selectedKey","_a","useComboBoxState","textValue","inputValue","doesContainSubstring","inputProps","listBoxProps","labelProps","useComboBox","handleClearClick","handleDropdownOpen","openBoxState","handleWrapperClick","handleWrapperMouseDown","event","LinkChooserState","handleDropdownClose","queryMatchesSelection","createCustomLink","manualInputProps","useManualComboBoxEventHandlers","useEffect","isLoaded","maxHeight","useDropdownAutoHeight","isOpen","focusedKey","dropdownItem","scrollIntoView","flyoutWidth","setFlyoutWidth","calcFlyoutWidth","React","SearchInput","_b","AnimatePresence","motion","DismissButton","Popover","SearchResultsList","NavigationMenu","Checkbox","CheckboxState"],"mappings":"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"}
+{"version":3,"file":"LinkChooser.es.js","sources":["../../../src/components/LinkChooser/LinkChooser.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { mapToAriaProps } from '@components/ActionMenu/Aria/helper';\nimport { Checkbox, CheckboxState } from '@components/Checkbox/Checkbox';\nimport { useDropdownAutoHeight } from '@components/Dropdown/useDropdownAutoHeight';\nimport {\n    IconArrowOutExternal,\n    IconBuildingBlock,\n    IconDocument,\n    IconDocumentStack,\n    IconLayersSingle,\n    IconLink,\n} from '@foundation/Icon/Generated';\nimport { useComboBox } from '@react-aria/combobox';\nimport { DismissButton } from '@react-aria/overlays';\nimport { scrollIntoView } from '@react-aria/utils';\nimport { useComboBoxState } from '@react-stately/combobox';\nimport { Validation } from '@utilities/validation';\nimport { useMachine } from '@xstate/react';\nimport { AnimatePresence, motion } from 'framer-motion';\nimport React, { Key, MouseEvent, ReactElement, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { NavigationMenu } from './NavigationMenu';\nimport { Popover } from './Popover';\nimport { SearchInput } from './SearchInput';\nimport { SearchResultsList } from './SearchResultsList';\nimport { defaultSection } from './sections';\nimport { linkChooserMachine } from './state/machine';\nimport { LinkChooserState } from './state/types';\nimport { IconName, LinkChooserProps, SearchMenuBlock } from './types';\nimport { decoratedResults, doesContainSubstring, findSection, getDefaultData } from './utils/helpers';\nimport { closeBoxState, isLoaded, openBoxState, queryMatchesSelection, shouldGoBack } from './utils/state';\nimport { createCustomLink } from './utils/transformers';\nimport { useManualComboBoxEventHandlers } from './utils/useManualComboBoxHandlers';\n\nexport const IconOptions: Record<IconName | string, ReactElement> = {\n    [IconName.Document]: <IconDocument />,\n    [IconName.Library]: <IconDocumentStack />,\n    [IconName.Link]: <IconLink />,\n    [IconName.External]: <IconArrowOutExternal />,\n    [IconName.Template]: <IconLayersSingle />,\n    [IconName.Block]: <IconBuildingBlock />,\n};\n\nexport const DEFAULT_ICON = IconName.Link;\nexport const CUSTOM_LINK_ID = 'custom-link';\nexport const MAX_STORED_ITEMS = 5;\nexport const QUERIES_STORAGE_KEY = 'queries';\n\nexport const LinkChooser = ({\n    getGlobalByQuery = getDefaultData,\n    openPreview = window.open,\n    clipboardOptions = navigator.clipboard,\n    selectedResult = null,\n    openInNewTab = false,\n    ariaLabel = 'Menu',\n    extraSections = [],\n    label,\n    placeholder,\n    onOpenInNewTabChange,\n    onLinkChange,\n    disabled,\n    clearable,\n    required,\n    validation = Validation.Default,\n}: LinkChooserProps): ReactElement => {\n    const [{ context, matches, value }, send, service] = useMachine(() =>\n        linkChooserMachine.withContext({\n            searchResults: [],\n            selectedResult,\n            query: '',\n            interruptedFetch: false,\n            getExtraResultsByQuery: null,\n            currentSectionId: defaultSection.id,\n            extraSections,\n            clipboardOptions,\n            openPreview,\n            getGlobalByQuery,\n            onLinkChange,\n        }),\n    );\n\n    const [searchInput, setSearchInput] = useState(selectedResult?.title);\n    const isDefault = !shouldGoBack(matches);\n    const searchResultMenuBlocks = useMemo(\n        () =>\n            [\n                !isDefault && { id: 'menu-top', menuItems: [findSection(extraSections, context.currentSectionId)] },\n                {\n                    id: 'search',\n                    menuItems: decoratedResults(context.searchResults),\n                },\n                isDefault && { id: 'menu-bottom', menuItems: extraSections.map(({ id, title }) => ({ id, title })) },\n            ].filter(Boolean),\n        [isDefault, extraSections, context.currentSectionId, context.searchResults],\n    ) as SearchMenuBlock[];\n\n    const props = mapToAriaProps(ariaLabel, searchResultMenuBlocks);\n\n    const triggerRef = useRef<HTMLDivElement | null>(null);\n    const inputRef = useRef<HTMLInputElement | null>(null);\n    const listBoxRef = useRef<HTMLUListElement | null>(null);\n    const popoverRef = useRef<HTMLDivElement | null>(null);\n\n    const handleSelectionChange = (key: Key) => {\n        const foundItem = context.searchResults.find((item) => item.id === key);\n        if (foundItem) {\n            setSearchInput(foundItem.title);\n            send({ type: 'SET_SELECTED_SEARCH_RESULT', data: { selectedResult: foundItem } });\n        }\n        closeBoxState(state);\n        setSelectedKey(key);\n    };\n\n    const handleInputChange = useCallback(\n        (query: string) => {\n            setSearchInput(query);\n            send({ type: 'TYPING', data: { query } });\n        },\n        [send],\n    );\n\n    const [selectedKey, setSelectedKey] = useState<Key | undefined>(context.selectedResult?.id);\n\n    const state = useComboBoxState({\n        ...props,\n        defaultFilter: (textValue, inputValue) => doesContainSubstring(textValue, inputValue, extraSections),\n        inputValue: searchInput,\n        onInputChange: handleInputChange,\n        onSelectionChange: handleSelectionChange,\n        menuTrigger: 'manual',\n        shouldCloseOnBlur: false,\n        allowsEmptyCollection: true,\n        selectedKey,\n    });\n\n    const { inputProps, listBoxProps, labelProps } = useComboBox(\n        {\n            ...props,\n            inputRef,\n            listBoxRef,\n            popoverRef,\n            isRequired: required,\n            placeholder,\n        },\n        state,\n    );\n\n    const handleClearClick = useCallback(() => {\n        state.setInputValue('');\n        setSelectedKey('');\n        send({ type: 'CLEARING', data: { query: '' } });\n    }, [send, state]);\n\n    const handleDropdownOpen = () => {\n        send('OPEN_DROPDOWN');\n        openBoxState(state);\n    };\n\n    const handleWrapperClick = () => {\n        if (document.activeElement !== inputRef.current) {\n            inputRef.current?.focus();\n        }\n        handleDropdownOpen();\n    };\n\n    const handleWrapperMouseDown = (event: MouseEvent<HTMLDivElement>) => {\n        if (matches(LinkChooserState.Focused) && event.target !== inputRef.current) {\n            event.preventDefault();\n        }\n    };\n\n    const handleDropdownClose = () => {\n        let selectedResult = null;\n        if (context.query) {\n            if (queryMatchesSelection(context.selectedResult, context.query)) {\n                selectedResult = context.selectedResult;\n            } else {\n                selectedResult = createCustomLink(state.inputValue);\n            }\n        }\n        send({ type: 'CLOSE_DROPDOWN', data: { selectedResult } });\n        if (selectedResult && selectedKey !== selectedResult.id) {\n            setSelectedKey(selectedResult.id);\n        }\n        closeBoxState(state);\n    };\n\n    const manualInputProps = useManualComboBoxEventHandlers(\n        { inputProps, inputRef, popoverRef, state },\n        {\n            onOpen: handleDropdownOpen,\n            onClose: handleDropdownClose,\n            onNavigate: (id) => {\n                if (isDefault) {\n                    send({\n                        type: 'SELECT_EXTRA_SECTION',\n                        data: {\n                            getExtraResultsByQuery: findSection(extraSections, id)?.getResults || null,\n                            currentSectionId: id.toString(),\n                        },\n                    });\n                } else {\n                    send({\n                        type: 'BACK_TO_DEFAULT',\n                        data: { getExtraResultsByQuery: null },\n                    });\n                }\n            },\n            onSelect: handleSelectionChange,\n        },\n    );\n\n    useEffect(() => {\n        if (isLoaded(matches) && context.interruptedFetch) {\n            send({ type: 'TYPING', data: { query: context.query } });\n        }\n    }, [context.interruptedFetch, context.query, matches, send, value]);\n\n    const { maxHeight } = useDropdownAutoHeight(inputRef, {\n        isOpen: matches(LinkChooserState.Focused),\n        autoResize: true,\n    });\n\n    const {\n        isOpen,\n        selectionManager: { focusedKey },\n    } = state;\n\n    useEffect(() => {\n        if (focusedKey && popoverRef.current && isOpen) {\n            const dropdownItem = popoverRef.current.querySelector(`[data-key=\"${focusedKey}\"]`);\n            if (dropdownItem) {\n                scrollIntoView(popoverRef.current, dropdownItem as HTMLElement);\n            }\n        }\n    }, [focusedKey, isOpen]);\n\n    const [flyoutWidth, setFlyoutWidth] = useState(0);\n\n    const calcFlyoutWidth = () => {\n        setFlyoutWidth(triggerRef.current?.getBoundingClientRect().width || 0);\n    };\n\n    useEffect(() => {\n        calcFlyoutWidth();\n        window.addEventListener('resize', calcFlyoutWidth, false);\n    }, []);\n\n    return (\n        <div data-test-id=\"link-chooser\" ref={triggerRef} className=\"tw-w-full tw-font-sans tw-text-s\">\n            {!!label && (\n                <label\n                    {...labelProps}\n                    data-test-id=\"link-chooser-label\"\n                    className=\"tw-text-black-80 tw-mb-1 tw-flex tw-align-items-center\"\n                >\n                    {label}\n                    {required && (\n                        <span\n                            data-test-id=\"link-chooser-label-required\"\n                            className=\"tw-h-4 tw-text-m tw-text-red-60 dark:tw-text-red-50 tw-ml-1\"\n                        >\n                            *\n                        </span>\n                    )}\n                </label>\n            )}\n            <SearchInput\n                ariaProps={manualInputProps}\n                selectedResult={context.selectedResult}\n                ref={inputRef}\n                disabled={disabled}\n                decorator={IconOptions[context.selectedResult?.icon || DEFAULT_ICON]}\n                clearable={clearable}\n                onClear={handleClearClick}\n                machineService={service}\n                validation={validation}\n                onClick={handleWrapperClick}\n                onMouseDown={handleWrapperMouseDown}\n            />\n            <AnimatePresence>\n                {matches(LinkChooserState.Focused) && (\n                    <motion.div\n                        style={{\n                            width: flyoutWidth,\n                        }}\n                        className=\"tw-absolute tw-left-auto tw-w-full tw-overflow-hidden tw-p-0 tw-shadow-mid tw-list-none tw-m-0 tw-mt-2 tw-z-20\"\n                        key=\"content\"\n                        initial={{ height: 0 }}\n                        animate={{ height: 'auto' }}\n                        exit={{ height: 0 }}\n                        transition={{ ease: [0.04, 0.62, 0.23, 0.98], duration: 0.5 }}\n                        data-test-id=\"link-chooser-dropdown\"\n                    >\n                        <DismissButton onDismiss={handleDropdownClose} />\n                        <Popover\n                            popoverRef={popoverRef}\n                            isOpen={matches(LinkChooserState.Focused)}\n                            onClose={handleDropdownClose}\n                            maxHeight={maxHeight}\n                        >\n                            <SearchResultsList\n                                {...listBoxProps}\n                                listBoxRef={listBoxRef}\n                                state={state}\n                                menuBlocks={searchResultMenuBlocks}\n                                border={false}\n                                machineService={service}\n                            />\n                            <div data-test-id=\"link-chooser-action-menu\" className=\"tw-border-t tw-border-black-10\">\n                                <NavigationMenu machineService={service} state={state} />\n                            </div>\n                        </Popover>\n                        <DismissButton onDismiss={handleDropdownClose} />\n                    </motion.div>\n                )}\n            </AnimatePresence>\n            <div className=\"tw-my-2\" data-test-id=\"link-chooser-new-tab\">\n                <Checkbox\n                    value=\"new-tab\"\n                    disabled={disabled}\n                    state={openInNewTab ? CheckboxState.Checked : CheckboxState.Unchecked}\n                    onChange={onOpenInNewTabChange}\n                    label=\"Open in New Tab\"\n                />\n            </div>\n        </div>\n    );\n};\n"],"names":["IconOptions","IconName","IconDocument","IconDocumentStack","IconLink","IconArrowOutExternal","IconLayersSingle","IconBuildingBlock","DEFAULT_ICON","CUSTOM_LINK_ID","MAX_STORED_ITEMS","QUERIES_STORAGE_KEY","LinkChooser","getGlobalByQuery","getDefaultData","openPreview","clipboardOptions","selectedResult","openInNewTab","ariaLabel","extraSections","label","placeholder","onOpenInNewTabChange","onLinkChange","disabled","clearable","required","validation","Validation","context","matches","value","send","service","useMachine","linkChooserMachine","defaultSection","searchInput","setSearchInput","useState","isDefault","shouldGoBack","searchResultMenuBlocks","useMemo","findSection","decoratedResults","id","title","props","mapToAriaProps","triggerRef","useRef","inputRef","listBoxRef","popoverRef","handleSelectionChange","key","foundItem","item","closeBoxState","state","setSelectedKey","handleInputChange","useCallback","query","selectedKey","_a","useComboBoxState","textValue","inputValue","doesContainSubstring","inputProps","listBoxProps","labelProps","useComboBox","handleClearClick","handleDropdownOpen","openBoxState","handleWrapperClick","handleWrapperMouseDown","event","LinkChooserState","handleDropdownClose","queryMatchesSelection","createCustomLink","manualInputProps","useManualComboBoxEventHandlers","useEffect","isLoaded","maxHeight","useDropdownAutoHeight","isOpen","focusedKey","dropdownItem","scrollIntoView","flyoutWidth","setFlyoutWidth","calcFlyoutWidth","React","SearchInput","_b","AnimatePresence","motion","DismissButton","Popover","SearchResultsList","NavigationMenu","Checkbox","CheckboxState"],"mappings":"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"}

package/dist/components/LinkChooser/NavigationMenu.d.ts

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import { ReactElement } from 'react';
 import { NavigationMenuItemProps, NavigationMenuProps } from './types';
-export declare const NavigationMenu: FC<NavigationMenuProps>;
-export declare const NavigationMenuItem: FC<NavigationMenuItemProps>;
+export declare const NavigationMenu: ({ machineService, state }: NavigationMenuProps) => Nullable<ReactElement>;
+export declare const NavigationMenuItem: ({ section: { id, title }, onPress, state, direction, }: NavigationMenuItemProps) => ReactElement;

package/dist/components/LinkChooser/NavigationMenu.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationMenu.es.js","sources":["../../../src/components/LinkChooser/NavigationMenu.tsx"],"sourcesContent":["/* eslint-disable jsx-a11y/click-events-have-key-events */\n/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { MenuItem, MenuItemContentSize, SelectionIndicatorIcon } from '@components/MenuItem';\nimport { IconArrowLeft } from '@foundation/Icon/Generated';\nimport { getInteractionModality } from '@react-aria/interactions';\nimport { useOption } from '@react-aria/listbox';\nimport { merge } from '@utilities/merge';\nimport { useActor } from '@xstate/react';\nimport React, { FC, useMemo, useRef } from 'react';\nimport { defaultSection } from './sections';\nimport { DropdownState, LinkChooserState } from './state/types';\nimport { NavigationMenuItemProps, NavigationMenuProps } from './types';\n\nexport const NavigationMenu: FC<NavigationMenuProps> = ({ machineService, state }) => {\n    const [{ matches, context }, send] = useActor(machineService);\n\n    return matches(`${LinkChooserState.Focused}.${DropdownState.Default}`) ? (\n        <ul className=\"tw-py-2\">\n            {context.extraSections.map((section) => (\n                <NavigationMenuItem\n                    key={section.id}\n                    section={section}\n                    state={state}\n                    onPress={() => {\n                        send({\n                            type: 'SELECT_EXTRA_SECTION',\n                            data: { getExtraResultsByQuery: section.getResults, currentSectionId: section.id },\n                        });\n                    }}\n                />\n            ))}\n        </ul>\n    ) : null;\n};\n\nexport const NavigationMenuItem: FC<NavigationMenuItemProps> = ({\n    section: { id, title },\n    onPress,\n    state,\n    direction = 'right',\n}) => {\n    const ref = useRef<HTMLLIElement>(null);\n    const { isFocused } = useOption(\n        {\n            key: id,\n            shouldFocusOnHover: false,\n        },\n        state,\n        ref,\n    );\n\n    const itemTitle = useMemo(\n        () => (id === defaultSection.id ? <p className=\"tw-ml-1 tw-text-black-80 tw-capitalize\">{title}</p> : title),\n        [id, title],\n    );\n\n    const isFocusVisible = getInteractionModality() !== 'pointer';\n\n    return (\n        <div\n            onClick={onPress}\n            tabIndex={0}\n            role=\"menuitem\"\n            aria-label={`Navigate to ${id} section of search results.`}\n            data-key={id}\n            data-test-id=\"link-chooser-navigation-menu-item\"\n            className={merge(['hover:tw-bg-black-10', isFocused && isFocusVisible && 'tw-bg-black-10'])}\n        >\n            <MenuItem\n                title={itemTitle}\n                selectionIndicator={direction === 'right' ? SelectionIndicatorIcon.CaretRight : undefined}\n                decorator={direction === 'left' ? <IconArrowLeft /> : undefined}\n                size={MenuItemContentSize.XSmall}\n            />\n        </div>\n    );\n};\n"],"names":["NavigationMenu","machineService","state","matches","context","send","useActor","LinkChooserState","DropdownState","React","section","NavigationMenuItem","id","title","onPress","direction","ref","useRef","isFocused","useOption","itemTitle","useMemo","defaultSection","isFocusVisible","getInteractionModality","merge","MenuItem","SelectionIndicatorIcon","IconArrowLeft","MenuItemContentSize"],"mappings":";;;;;;;;;;AAcO,MAAMA,IAA0C,CAAC,EAAE,gBAAAC,GAAgB,OAAAC,QAAY;AAC5E,QAAA,CAAC,EAAE,SAAAC,GAAS,SAAAC,EAAA,GAAWC,CAAI,IAAIC,EAASL,CAAc;AAE5D,SAAOE,EAAQ,GAAGI,EAAiB,WAAWC,EAAc,SAAS,IAChE,gBAAAC,EAAA,cAAA,MAAA,EAAG,WAAU,aACTL,EAAQ,cAAc,IAAI,CAACM,MACxB,gBAAAD,EAAA;AAAA,IAACE;AAAA,IAAA;AAAA,MACG,KAAKD,EAAQ;AAAA,MACb,SAAAA;AAAA,MACA,OAAAR;AAAA,MACA,SAAS,MAAM;AACN,QAAAG,EAAA;AAAA,UACD,MAAM;AAAA,UACN,MAAM,EAAE,wBAAwBK,EAAQ,YAAY,kBAAkBA,EAAQ,GAAG;AAAA,QAAA,CACpF;AAAA,MACL;AAAA,IAAA;AAAA,EAAA,CAEP,CACL,IACA;AACR,GAEaC,IAAkD,CAAC;AAAA,EAC5D,SAAS,EAAE,IAAAC,GAAI,OAAAC,EAAM;AAAA,EACrB,SAAAC;AAAA,EACA,OAAAZ;AAAA,EACA,WAAAa,IAAY;AAChB,MAAM;AACI,QAAAC,IAAMC,EAAsB,IAAI,GAChC,EAAE,WAAAC,MAAcC;AAAA,IAClB;AAAA,MACI,KAAKP;AAAA,MACL,oBAAoB;AAAA,IACxB;AAAA,IACAV;AAAA,IACAc;AAAA,EAAA,GAGEI,IAAYC;AAAA,IACd,MAAOT,MAAOU,EAAe,qCAAM,KAAE,EAAA,WAAU,4CAA0CT,CAAM,IAAOA;AAAA,IACtG,CAACD,GAAIC,CAAK;AAAA,EAAA,GAGRU,IAAiBC,EAA6B,MAAA;AAGhD,SAAA,gBAAAf,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,SAASK;AAAA,MACT,UAAU;AAAA,MACV,MAAK;AAAA,MACL,cAAY,eAAeF;AAAA,MAC3B,YAAUA;AAAA,MACV,gBAAa;AAAA,MACb,WAAWa,EAAM,CAAC,wBAAwBP,KAAaK,KAAkB,gBAAgB,CAAC;AAAA,IAAA;AAAA,IAE1F,gBAAAd,EAAA;AAAA,MAACiB;AAAA,MAAA;AAAA,QACG,OAAON;AAAA,QACP,oBAAoBL,MAAc,UAAUY,EAAuB,aAAa;AAAA,QAChF,WAAWZ,MAAc,SAAS,gBAAAN,EAAA,cAACmB,OAAc,IAAK;AAAA,QACtD,MAAMC,EAAoB;AAAA,MAAA;AAAA,IAC9B;AAAA,EAAA;AAGZ;"}
+{"version":3,"file":"NavigationMenu.es.js","sources":["../../../src/components/LinkChooser/NavigationMenu.tsx"],"sourcesContent":["/* eslint-disable jsx-a11y/click-events-have-key-events */\n/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { MenuItem, MenuItemContentSize, SelectionIndicatorIcon } from '@components/MenuItem';\nimport { IconArrowLeft } from '@foundation/Icon/Generated';\nimport { getInteractionModality } from '@react-aria/interactions';\nimport { useOption } from '@react-aria/listbox';\nimport { merge } from '@utilities/merge';\nimport { useActor } from '@xstate/react';\nimport React, { ReactElement, useMemo, useRef } from 'react';\nimport { defaultSection } from './sections';\nimport { DropdownState, LinkChooserState } from './state/types';\nimport { NavigationMenuItemProps, NavigationMenuProps } from './types';\n\nexport const NavigationMenu = ({ machineService, state }: NavigationMenuProps): Nullable<ReactElement> => {\n    const [{ matches, context }, send] = useActor(machineService);\n\n    return matches(`${LinkChooserState.Focused}.${DropdownState.Default}`) ? (\n        <ul className=\"tw-py-2\">\n            {context.extraSections.map((section) => (\n                <NavigationMenuItem\n                    key={section.id}\n                    section={section}\n                    state={state}\n                    onPress={() => {\n                        send({\n                            type: 'SELECT_EXTRA_SECTION',\n                            data: { getExtraResultsByQuery: section.getResults, currentSectionId: section.id },\n                        });\n                    }}\n                />\n            ))}\n        </ul>\n    ) : null;\n};\n\nexport const NavigationMenuItem = ({\n    section: { id, title },\n    onPress,\n    state,\n    direction = 'right',\n}: NavigationMenuItemProps): ReactElement => {\n    const ref = useRef<HTMLLIElement>(null);\n    const { isFocused } = useOption(\n        {\n            key: id,\n            shouldFocusOnHover: false,\n        },\n        state,\n        ref,\n    );\n\n    const itemTitle = useMemo(\n        () => (id === defaultSection.id ? <p className=\"tw-ml-1 tw-text-black-80 tw-capitalize\">{title}</p> : title),\n        [id, title],\n    );\n\n    const isFocusVisible = getInteractionModality() !== 'pointer';\n\n    return (\n        <div\n            onClick={onPress}\n            tabIndex={0}\n            role=\"menuitem\"\n            aria-label={`Navigate to ${id} section of search results.`}\n            data-key={id}\n            data-test-id=\"link-chooser-navigation-menu-item\"\n            className={merge(['hover:tw-bg-black-10', isFocused && isFocusVisible && 'tw-bg-black-10'])}\n        >\n            <MenuItem\n                title={itemTitle}\n                selectionIndicator={direction === 'right' ? SelectionIndicatorIcon.CaretRight : undefined}\n                decorator={direction === 'left' ? <IconArrowLeft /> : undefined}\n                size={MenuItemContentSize.XSmall}\n            />\n        </div>\n    );\n};\n"],"names":["NavigationMenu","machineService","state","matches","context","send","useActor","LinkChooserState","DropdownState","React","section","NavigationMenuItem","id","title","onPress","direction","ref","useRef","isFocused","useOption","itemTitle","useMemo","defaultSection","isFocusVisible","getInteractionModality","merge","MenuItem","SelectionIndicatorIcon","IconArrowLeft","MenuItemContentSize"],"mappings":";;;;;;;;;;AAcO,MAAMA,IAAiB,CAAC,EAAE,gBAAAC,GAAgB,OAAAC,QAAyD;AAChG,QAAA,CAAC,EAAE,SAAAC,GAAS,SAAAC,EAAA,GAAWC,CAAI,IAAIC,EAASL,CAAc;AAE5D,SAAOE,EAAQ,GAAGI,EAAiB,WAAWC,EAAc,SAAS,IAChE,gBAAAC,EAAA,cAAA,MAAA,EAAG,WAAU,aACTL,EAAQ,cAAc,IAAI,CAACM,MACxB,gBAAAD,EAAA;AAAA,IAACE;AAAA,IAAA;AAAA,MACG,KAAKD,EAAQ;AAAA,MACb,SAAAA;AAAA,MACA,OAAAR;AAAA,MACA,SAAS,MAAM;AACN,QAAAG,EAAA;AAAA,UACD,MAAM;AAAA,UACN,MAAM,EAAE,wBAAwBK,EAAQ,YAAY,kBAAkBA,EAAQ,GAAG;AAAA,QAAA,CACpF;AAAA,MACL;AAAA,IAAA;AAAA,EAAA,CAEP,CACL,IACA;AACR,GAEaC,IAAqB,CAAC;AAAA,EAC/B,SAAS,EAAE,IAAAC,GAAI,OAAAC,EAAM;AAAA,EACrB,SAAAC;AAAA,EACA,OAAAZ;AAAA,EACA,WAAAa,IAAY;AAChB,MAA6C;AACnC,QAAAC,IAAMC,EAAsB,IAAI,GAChC,EAAE,WAAAC,MAAcC;AAAA,IAClB;AAAA,MACI,KAAKP;AAAA,MACL,oBAAoB;AAAA,IACxB;AAAA,IACAV;AAAA,IACAc;AAAA,EAAA,GAGEI,IAAYC;AAAA,IACd,MAAOT,MAAOU,EAAe,qCAAM,KAAE,EAAA,WAAU,4CAA0CT,CAAM,IAAOA;AAAA,IACtG,CAACD,GAAIC,CAAK;AAAA,EAAA,GAGRU,IAAiBC,EAA6B,MAAA;AAGhD,SAAA,gBAAAf,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,SAASK;AAAA,MACT,UAAU;AAAA,MACV,MAAK;AAAA,MACL,cAAY,eAAeF;AAAA,MAC3B,YAAUA;AAAA,MACV,gBAAa;AAAA,MACb,WAAWa,EAAM,CAAC,wBAAwBP,KAAaK,KAAkB,gBAAgB,CAAC;AAAA,IAAA;AAAA,IAE1F,gBAAAd,EAAA;AAAA,MAACiB;AAAA,MAAA;AAAA,QACG,OAAON;AAAA,QACP,oBAAoBL,MAAc,UAAUY,EAAuB,aAAa;AAAA,QAChF,WAAWZ,MAAc,SAAS,gBAAAN,EAAA,cAACmB,OAAc,IAAK;AAAA,QACtD,MAAMC,EAAoB;AAAA,MAAA;AAAA,IAC9B;AAAA,EAAA;AAGZ;"}

package/dist/components/LinkChooser/Popover.d.ts

@@ -1,3 +1,3 @@
-import { FC } from 'react';
+import { ReactElement } from 'react';
 import { PopoverProps } from './types';
-export declare const Popover: FC<PopoverProps>;
+export declare const Popover: (props: PopoverProps) => ReactElement;

package/dist/components/LinkChooser/Popover.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.es.js","sources":["../../../src/components/LinkChooser/Popover.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { DismissButton, useOverlay } from '@react-aria/overlays';\nimport { mergeProps } from '@react-aria/utils';\nimport React, { FC, MouseEvent, TouchEvent, useRef } from 'react';\nimport { PopoverProps } from './types';\n\nexport const Popover: FC<PopoverProps> = (props) => {\n    const ref = useRef<HTMLDivElement>(null);\n    const { popoverRef = ref, isOpen, onClose, children, maxHeight } = props;\n\n    const { overlayProps } = useOverlay(\n        {\n            isOpen,\n            onClose,\n            shouldCloseOnBlur: true,\n            isDismissable: false,\n        },\n        popoverRef,\n    );\n\n    /* Focus must not be shifted to the popover when any buttons are pressed since this will close the input.\n    There is a blur event fired on the input when clicking inside the popover which gets fired twice *sometimes*, \n    (once with a relatedTarget and once without). This way all blur events are prevented */\n\n    const bubblingEventProps = {\n        onMouseDown: (event: MouseEvent<HTMLDivElement>) => event.preventDefault(),\n        onTouchStart: (event: TouchEvent<HTMLDivElement>) => event.preventDefault(),\n    };\n\n    return (\n        <div\n            {...mergeProps(overlayProps, { style: { maxHeight } })}\n            ref={popoverRef}\n            className=\"tw-bg-white tw-border-black-10 tw-border tw-rounded tw-overflow-x-hidden tw-shadow-mid tw-overflow-y-auto\"\n        >\n            <div {...bubblingEventProps}>\n                {children}\n                <DismissButton onDismiss={onClose} />\n            </div>\n        </div>\n    );\n};\n"],"names":["Popover","props","ref","useRef","popoverRef","isOpen","onClose","children","maxHeight","overlayProps","useOverlay","bubblingEventProps","event","React","mergeProps","DismissButton"],"mappings":";;;AAOa,MAAAA,IAA4B,CAACC,MAAU;AAC1C,QAAAC,IAAMC,EAAuB,IAAI,GACjC,EAAE,YAAAC,IAAaF,GAAK,QAAAG,GAAQ,SAAAC,GAAS,UAAAC,GAAU,WAAAC,EAAc,IAAAP,GAE7D,EAAE,cAAAQ,MAAiBC;AAAA,IACrB;AAAA,MACI,QAAAL;AAAA,MACA,SAAAC;AAAA,MACA,mBAAmB;AAAA,MACnB,eAAe;AAAA,IACnB;AAAA,IACAF;AAAA,EAAA,GAOEO,IAAqB;AAAA,IACvB,aAAa,CAACC,MAAsCA,EAAM,eAAe;AAAA,IACzE,cAAc,CAACA,MAAsCA,EAAM,eAAe;AAAA,EAAA;AAI1E,SAAA,gBAAAC,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAGC,EAAWL,GAAc,EAAE,OAAO,EAAE,WAAAD,KAAa;AAAA,MACrD,KAAKJ;AAAA,MACL,WAAU;AAAA,IAAA;AAAA,IAEV,gBAAAS,EAAA,cAAC,SAAK,GAAGF,EAAA,GACJJ,GACA,gBAAAM,EAAA,cAAAE,GAAA,EAAc,WAAWT,EAAS,CAAA,CACvC;AAAA,EAAA;AAGZ;"}
+{"version":3,"file":"Popover.es.js","sources":["../../../src/components/LinkChooser/Popover.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { DismissButton, useOverlay } from '@react-aria/overlays';\nimport { mergeProps } from '@react-aria/utils';\nimport React, { MouseEvent, ReactElement, TouchEvent, useRef } from 'react';\nimport { PopoverProps } from './types';\n\nexport const Popover = (props: PopoverProps): ReactElement => {\n    const ref = useRef<HTMLDivElement>(null);\n    const { popoverRef = ref, isOpen, onClose, children, maxHeight } = props;\n\n    const { overlayProps } = useOverlay(\n        {\n            isOpen,\n            onClose,\n            shouldCloseOnBlur: true,\n            isDismissable: false,\n        },\n        popoverRef,\n    );\n\n    /* Focus must not be shifted to the popover when any buttons are pressed since this will close the input.\n    There is a blur event fired on the input when clicking inside the popover which gets fired twice *sometimes*,\n    (once with a relatedTarget and once without). This way all blur events are prevented */\n\n    const bubblingEventProps = {\n        onMouseDown: (event: MouseEvent<HTMLDivElement>) => event.preventDefault(),\n        onTouchStart: (event: TouchEvent<HTMLDivElement>) => event.preventDefault(),\n    };\n\n    return (\n        <div\n            {...mergeProps(overlayProps, { style: { maxHeight } })}\n            ref={popoverRef}\n            className=\"tw-bg-white tw-border-black-10 tw-border tw-rounded tw-overflow-x-hidden tw-shadow-mid tw-overflow-y-auto\"\n        >\n            <div {...bubblingEventProps}>\n                {children}\n                <DismissButton onDismiss={onClose} />\n            </div>\n        </div>\n    );\n};\n"],"names":["Popover","props","ref","useRef","popoverRef","isOpen","onClose","children","maxHeight","overlayProps","useOverlay","bubblingEventProps","event","React","mergeProps","DismissButton"],"mappings":";;;AAOa,MAAAA,IAAU,CAACC,MAAsC;AACpD,QAAAC,IAAMC,EAAuB,IAAI,GACjC,EAAE,YAAAC,IAAaF,GAAK,QAAAG,GAAQ,SAAAC,GAAS,UAAAC,GAAU,WAAAC,EAAc,IAAAP,GAE7D,EAAE,cAAAQ,MAAiBC;AAAA,IACrB;AAAA,MACI,QAAAL;AAAA,MACA,SAAAC;AAAA,MACA,mBAAmB;AAAA,MACnB,eAAe;AAAA,IACnB;AAAA,IACAF;AAAA,EAAA,GAOEO,IAAqB;AAAA,IACvB,aAAa,CAACC,MAAsCA,EAAM,eAAe;AAAA,IACzE,cAAc,CAACA,MAAsCA,EAAM,eAAe;AAAA,EAAA;AAI1E,SAAA,gBAAAC,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAGC,EAAWL,GAAc,EAAE,OAAO,EAAE,WAAAD,KAAa;AAAA,MACrD,KAAKJ;AAAA,MACL,WAAU;AAAA,IAAA;AAAA,IAEV,gBAAAS,EAAA,cAAC,SAAK,GAAGF,EAAA,GACJJ,GACA,gBAAAM,EAAA,cAAAE,GAAA,EAAc,WAAWT,EAAS,CAAA,CACvC;AAAA,EAAA;AAGZ;"}

package/dist/components/LinkChooser/SearchInput.es.js

@@ -103,7 +103,15 @@ const V = L(
   }
 );
 V.displayName = "SearchInput";
-const k = ({ disabled: e, title: s, ariaLabel: a, testId: r, icon: n, onClick: c, isComboBoxControl: w }) => {
+const k = ({
+  disabled: e,
+  title: s,
+  ariaLabel: a,
+  testId: r,
+  icon: n,
+  onClick: c,
+  isComboBoxControl: w
+}) => {
   const { isFocusVisible: l, focusProps: m } = x(), p = (u) => {
     u.stopPropagation(), c && c();
   };

package/dist/components/LinkChooser/SearchInput.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchInput.es.js","sources":["../../../src/components/LinkChooser/SearchInput.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\n/* eslint-disable jsx-a11y/no-static-element-interactions */\n/* eslint-disable jsx-a11y/click-events-have-key-events */\n\nimport { LoadingCircle, LoadingCircleSize } from '@components/LoadingCircle';\nimport { Validation, validationClassMap } from '@utilities/validation';\nimport { useFocusRing } from '@react-aria/focus';\nimport { mergeProps } from '@react-aria/utils';\nimport { FOCUS_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\nimport { useActor } from '@xstate/react';\nimport React, { FC, MouseEvent, forwardRef } from 'react';\nimport { IconButtonProps, SearchInputProps } from './types';\nimport { IconArrowOutExternal, IconClipboard, IconCross } from '@foundation/Icon/Generated';\n\nexport const SearchInput = forwardRef<HTMLInputElement | null, SearchInputProps>(\n    (\n        {\n            disabled = false,\n            clearable = true,\n            ariaProps,\n            selectedResult,\n            decorator,\n            machineService,\n            onClear,\n            validation = Validation.Default,\n            onClick,\n            onMouseDown,\n        },\n        inputElement,\n    ) => {\n        const { value } = ariaProps;\n        const { isFocusVisible, focusProps, isFocused } = useFocusRing({ isTextInput: true });\n\n        const [, send] = useActor(machineService);\n\n        const isLoading = validation === Validation.Loading;\n\n        return (\n            <div\n                data-test-id=\"link-chooser-search-wrapper\"\n                className={merge([\n                    'tw-flex tw-items-center tw-h-9 tw-gap-2 tw-px-2.5 tw-border tw-rounded tw-text-s tw-font-sans tw-relative tw-bg-white dark:tw-bg-transparent',\n                    disabled\n                        ? 'tw-border-black-5 tw-bg-black-5 dark:tw-bg-black-90 dark:tw-border-black-90'\n                        : merge([\n                              'focus-within:tw-border-black-100',\n                              isFocusVisible && FOCUS_STYLE,\n                              validationClassMap[validation],\n                          ]),\n                ])}\n                onClick={onClick}\n                onMouseDown={onMouseDown}\n            >\n                {decorator && (\n                    <div\n                        className={merge([\n                            'tw-flex tw-items-center tw-justify-center tw-flex-none',\n                            disabled || !selectedResult ? 'tw-text-black-40' : 'tw-text-violet-60',\n                        ])}\n                        data-test-id=\"link-chooser-decorator-icon\"\n                    >\n                        {decorator}\n                    </div>\n                )}\n\n                <input\n                    {...mergeProps(focusProps, ariaProps)}\n                    readOnly={!isFocused}\n                    ref={inputElement}\n                    className={merge([\n                        'tw-flex-auto tw-border-none tw-outline-none tw-bg-transparent tw-hide-input-arrows tw-min-w-0 tw-whitespace-nowrap tw-truncate',\n                        disabled\n                            ? 'tw-text-black-40 tw-placeholder-black-30 dark:tw-text-black-30 dark:tw-placeholder-black-40'\n                            : 'tw-text-black tw-placeholder-black-60 dark:tw-text-white',\n                    ])}\n                    value={value}\n                    disabled={disabled}\n                    data-test-id=\"link-chooser-search-input\"\n                />\n                {selectedResult && !isLoading && (\n                    <IconButton\n                        disabled={disabled}\n                        testId=\"link-chooser-preview-icon\"\n                        title=\"Preview link\"\n                        ariaLabel=\"preview link\"\n                        icon={<IconArrowOutExternal />}\n                        onClick={() => send('OPEN_PREVIEW')}\n                    />\n                )}\n                {selectedResult && !isLoading && (\n                    <IconButton\n                        disabled={disabled}\n                        testId=\"link-chooser-copy-icon\"\n                        title=\"Copy text to clipboard\"\n                        ariaLabel=\"copy text to clipboard\"\n                        icon={<IconClipboard />}\n                        onClick={() => send('COPY_TO_CLIPBOARD')}\n                    />\n                )}\n                {`${value}`.length > 0 && clearable && !isLoading && (\n                    <IconButton\n                        disabled={disabled}\n                        testId=\"link-chooser-clear-icon\"\n                        title=\"Clear text input\"\n                        ariaLabel=\"clear text input\"\n                        icon={<IconCross />}\n                        isComboBoxControl\n                        onClick={onClear}\n                    />\n                )}\n                {isLoading && (\n                    <span className=\"tw-flex tw-flex-none tw-justify-center tw-align-center\">\n                        <LoadingCircle size={LoadingCircleSize.ExtraSmall} />\n                    </span>\n                )}\n            </div>\n        );\n    },\n);\nSearchInput.displayName = 'SearchInput';\n\nconst IconButton: FC<IconButtonProps> = ({ disabled, title, ariaLabel, testId, icon, onClick, isComboBoxControl }) => {\n    const { isFocusVisible, focusProps } = useFocusRing();\n\n    const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n        event.stopPropagation();\n        onClick && onClick();\n    };\n\n    return (\n        <button\n            className={merge([\n                'tw-flex tw-items-center tw-justify-center tw-transition-colors tw-rounded tw-flex-none',\n                disabled ? 'tw-cursor-default tw-text-black-40' : 'tw-text-black-80  hover:tw-text-black-100',\n                isFocusVisible && FOCUS_STYLE,\n            ])}\n            data-test-id={testId}\n            title={title}\n            aria-label={ariaLabel}\n            data-combo-box-control={isComboBoxControl}\n            disabled={disabled}\n            onClick={handleClick}\n            type=\"button\"\n            {...focusProps}\n        >\n            {icon}\n        </button>\n    );\n};\n"],"names":["SearchInput","forwardRef","disabled","clearable","ariaProps","selectedResult","decorator","machineService","onClear","validation","Validation","onClick","onMouseDown","inputElement","value","isFocusVisible","focusProps","isFocused","useFocusRing","send","useActor","isLoading","React","merge","FOCUS_STYLE","validationClassMap","mergeProps","IconButton","IconArrowOutExternal","IconClipboard","IconCross","LoadingCircle","LoadingCircleSize","title","ariaLabel","testId","icon","isComboBoxControl","handleClick","event"],"mappings":"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"}
+{"version":3,"file":"SearchInput.es.js","sources":["../../../src/components/LinkChooser/SearchInput.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\n/* eslint-disable jsx-a11y/no-static-element-interactions */\n/* eslint-disable jsx-a11y/click-events-have-key-events */\n\nimport { LoadingCircle, LoadingCircleSize } from '@components/LoadingCircle';\nimport { Validation, validationClassMap } from '@utilities/validation';\nimport { useFocusRing } from '@react-aria/focus';\nimport { mergeProps } from '@react-aria/utils';\nimport { FOCUS_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\nimport { useActor } from '@xstate/react';\nimport React, { MouseEvent, ReactElement, forwardRef } from 'react';\nimport { IconButtonProps, SearchInputProps } from './types';\nimport { IconArrowOutExternal, IconClipboard, IconCross } from '@foundation/Icon/Generated';\n\nexport const SearchInput = forwardRef<HTMLInputElement | null, SearchInputProps>(\n    (\n        {\n            disabled = false,\n            clearable = true,\n            ariaProps,\n            selectedResult,\n            decorator,\n            machineService,\n            onClear,\n            validation = Validation.Default,\n            onClick,\n            onMouseDown,\n        },\n        inputElement,\n    ) => {\n        const { value } = ariaProps;\n        const { isFocusVisible, focusProps, isFocused } = useFocusRing({ isTextInput: true });\n\n        const [, send] = useActor(machineService);\n\n        const isLoading = validation === Validation.Loading;\n\n        return (\n            <div\n                data-test-id=\"link-chooser-search-wrapper\"\n                className={merge([\n                    'tw-flex tw-items-center tw-h-9 tw-gap-2 tw-px-2.5 tw-border tw-rounded tw-text-s tw-font-sans tw-relative tw-bg-white dark:tw-bg-transparent',\n                    disabled\n                        ? 'tw-border-black-5 tw-bg-black-5 dark:tw-bg-black-90 dark:tw-border-black-90'\n                        : merge([\n                              'focus-within:tw-border-black-100',\n                              isFocusVisible && FOCUS_STYLE,\n                              validationClassMap[validation],\n                          ]),\n                ])}\n                onClick={onClick}\n                onMouseDown={onMouseDown}\n            >\n                {decorator && (\n                    <div\n                        className={merge([\n                            'tw-flex tw-items-center tw-justify-center tw-flex-none',\n                            disabled || !selectedResult ? 'tw-text-black-40' : 'tw-text-violet-60',\n                        ])}\n                        data-test-id=\"link-chooser-decorator-icon\"\n                    >\n                        {decorator}\n                    </div>\n                )}\n\n                <input\n                    {...mergeProps(focusProps, ariaProps)}\n                    readOnly={!isFocused}\n                    ref={inputElement}\n                    className={merge([\n                        'tw-flex-auto tw-border-none tw-outline-none tw-bg-transparent tw-hide-input-arrows tw-min-w-0 tw-whitespace-nowrap tw-truncate',\n                        disabled\n                            ? 'tw-text-black-40 tw-placeholder-black-30 dark:tw-text-black-30 dark:tw-placeholder-black-40'\n                            : 'tw-text-black tw-placeholder-black-60 dark:tw-text-white',\n                    ])}\n                    value={value}\n                    disabled={disabled}\n                    data-test-id=\"link-chooser-search-input\"\n                />\n                {selectedResult && !isLoading && (\n                    <IconButton\n                        disabled={disabled}\n                        testId=\"link-chooser-preview-icon\"\n                        title=\"Preview link\"\n                        ariaLabel=\"preview link\"\n                        icon={<IconArrowOutExternal />}\n                        onClick={() => send('OPEN_PREVIEW')}\n                    />\n                )}\n                {selectedResult && !isLoading && (\n                    <IconButton\n                        disabled={disabled}\n                        testId=\"link-chooser-copy-icon\"\n                        title=\"Copy text to clipboard\"\n                        ariaLabel=\"copy text to clipboard\"\n                        icon={<IconClipboard />}\n                        onClick={() => send('COPY_TO_CLIPBOARD')}\n                    />\n                )}\n                {`${value}`.length > 0 && clearable && !isLoading && (\n                    <IconButton\n                        disabled={disabled}\n                        testId=\"link-chooser-clear-icon\"\n                        title=\"Clear text input\"\n                        ariaLabel=\"clear text input\"\n                        icon={<IconCross />}\n                        isComboBoxControl\n                        onClick={onClear}\n                    />\n                )}\n                {isLoading && (\n                    <span className=\"tw-flex tw-flex-none tw-justify-center tw-align-center\">\n                        <LoadingCircle size={LoadingCircleSize.ExtraSmall} />\n                    </span>\n                )}\n            </div>\n        );\n    },\n);\nSearchInput.displayName = 'SearchInput';\n\nconst IconButton = ({\n    disabled,\n    title,\n    ariaLabel,\n    testId,\n    icon,\n    onClick,\n    isComboBoxControl,\n}: IconButtonProps): ReactElement => {\n    const { isFocusVisible, focusProps } = useFocusRing();\n\n    const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n        event.stopPropagation();\n        onClick && onClick();\n    };\n\n    return (\n        <button\n            className={merge([\n                'tw-flex tw-items-center tw-justify-center tw-transition-colors tw-rounded tw-flex-none',\n                disabled ? 'tw-cursor-default tw-text-black-40' : 'tw-text-black-80  hover:tw-text-black-100',\n                isFocusVisible && FOCUS_STYLE,\n            ])}\n            data-test-id={testId}\n            title={title}\n            aria-label={ariaLabel}\n            data-combo-box-control={isComboBoxControl}\n            disabled={disabled}\n            onClick={handleClick}\n            type=\"button\"\n            {...focusProps}\n        >\n            {icon}\n        </button>\n    );\n};\n"],"names":["SearchInput","forwardRef","disabled","clearable","ariaProps","selectedResult","decorator","machineService","onClear","validation","Validation","onClick","onMouseDown","inputElement","value","isFocusVisible","focusProps","isFocused","useFocusRing","send","useActor","isLoading","React","merge","FOCUS_STYLE","validationClassMap","mergeProps","IconButton","IconArrowOutExternal","IconClipboard","IconCross","LoadingCircle","LoadingCircleSize","title","ariaLabel","testId","icon","isComboBoxControl","handleClick","event"],"mappings":"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"}

package/dist/components/LinkChooser/SearchResultOption.d.ts

@@ -1,3 +1,3 @@
-import { FC } from 'react';
+import { ReactElement } from 'react';
 import { SearchResultOptionProps } from './types';
-export declare const SearchResultOption: FC<SearchResultOptionProps>;
+export declare const SearchResultOption: ({ item, state, keyItemRecord, machineService, }: SearchResultOptionProps) => ReactElement;

package/dist/components/LinkChooser/SearchResultOption.es.js

@@ -8,7 +8,12 @@ import { IconOptions as L } from "./LinkChooser.es.js";
 import { DropdownState as m, LinkChooserState as M, SectionState as O } from "./state/types.es.js";
 import { findSection as D } from "./utils/helpers.es.js";
 import { MenuItemContentSize as R } from "../MenuItem/types.es.js";
-const J = ({ item: t, state: n, keyItemRecord: r, machineService: w }) => {
+const J = ({
+  item: t,
+  state: n,
+  keyItemRecord: r,
+  machineService: w
+}) => {
   const a = F(null), { optionProps: p, isDisabled: d, isSelected: f, isFocused: x } = I(
     {
       key: t.key,

package/dist/components/LinkChooser/SearchResultOption.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchResultOption.es.js","sources":["../../../src/components/LinkChooser/SearchResultOption.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { MenuItemContentSize } from '@components/MenuItem';\nimport { MenuItem } from '@components/MenuItem/MenuItem';\nimport { getInteractionModality } from '@react-aria/interactions';\nimport { useOption } from '@react-aria/listbox';\nimport { merge } from '@utilities/merge';\nimport { useActor } from '@xstate/react';\nimport React, { FC, useRef } from 'react';\nimport { IconOptions } from './LinkChooser';\nimport { DropdownState, LinkChooserState, SectionState } from './state/types';\nimport { ImageMenuItemProps, SearchResult, SearchResultOptionProps } from './types';\nimport { findSection } from './utils/helpers';\n\nexport const SearchResultOption: FC<SearchResultOptionProps> = ({ item, state, keyItemRecord, machineService }) => {\n    const ref = useRef<HTMLLIElement>(null);\n    const { optionProps, isDisabled, isSelected, isFocused } = useOption(\n        {\n            key: item.key,\n            shouldFocusOnHover: false,\n        },\n        state,\n        ref,\n    );\n    const [\n        {\n            context: { extraSections, currentSectionId },\n            matches,\n        },\n    ] = useActor(machineService);\n\n    const menuItem = keyItemRecord[item.key];\n    const decorator = menuItem.icon ? IconOptions[menuItem.icon] : undefined;\n    const currentSection = findSection(extraSections, currentSectionId);\n    const isLoaded = (currentState: DropdownState) =>\n        matches(`${LinkChooserState.Focused}.${currentState}.${SectionState.Loaded}`);\n\n    const isFocusVisible = getInteractionModality() !== 'pointer';\n\n    const renderExtraSection = (menuItem: SearchResult) =>\n        currentSection?.renderPreview?.(menuItem) || <ImageMenuItem {...menuItem} />;\n\n    return (\n        <li\n            {...optionProps}\n            ref={ref}\n            className={merge([\n                'tw-relative hover:tw-bg-black-10 tw-list-none tw-outline-none',\n                isDisabled && 'tw-pointer-events-none tw-top-px',\n                isFocused && isFocusVisible && 'tw-bg-black-10',\n            ])}\n        >\n            {isLoaded(DropdownState.Default) && (\n                <MenuItem {...menuItem} active={isSelected} decorator={decorator} size={MenuItemContentSize.Large} />\n            )}\n            {isLoaded(DropdownState.ExtraSection) && renderExtraSection(menuItem)}\n        </li>\n    );\n};\n\nconst ImageMenuItem: FC<ImageMenuItemProps> = ({ title, subtitle, preview }) => (\n    <div className=\"tw-flex tw-px-5 tw-py-1.5 tw-cursor-pointer\">\n        <div className=\"tw-flex tw-flex-shrink-0 tw-w-[75px] tw-h-[75px] tw-max-w-xs tw-bg-black-0 tw-rounded\">\n            {preview && <img className=\"tw-w-full tw-object-contain\" src={preview} alt={title as string} />}\n        </div>\n        <div className=\"tw-flex tw-flex-col tw-justify-center tw-ml-4\">\n            <p className=\"tw-block tw-text-md tw-leading-tight tw-hover:underline tw-text-black-80\">{title}</p>\n            {subtitle && <p className=\"tw-text-[12px] tw-text-black-80\">{subtitle}</p>}\n        </div>\n    </div>\n);\n"],"names":["SearchResultOption","item","state","keyItemRecord","machineService","ref","useRef","optionProps","isDisabled","isSelected","isFocused","useOption","extraSections","currentSectionId","matches","useActor","menuItem","decorator","IconOptions","currentSection","findSection","isLoaded","currentState","LinkChooserState","SectionState","isFocusVisible","getInteractionModality","renderExtraSection","_a","React","ImageMenuItem","merge","DropdownState","MenuItem","MenuItemContentSize","title","subtitle","preview"],"mappings":";;;;;;;;;;AAcO,MAAMA,IAAkD,CAAC,EAAE,MAAAC,GAAM,OAAAC,GAAO,eAAAC,GAAe,gBAAAC,QAAqB;AACzG,QAAAC,IAAMC,EAAsB,IAAI,GAChC,EAAE,aAAAC,GAAa,YAAAC,GAAY,YAAAC,GAAY,WAAAC,EAAc,IAAAC;AAAA,IACvD;AAAA,MACI,KAAKV,EAAK;AAAA,MACV,oBAAoB;AAAA,IACxB;AAAA,IACAC;AAAA,IACAG;AAAA,EAAA,GAEE;AAAA,IACF;AAAA,MACI,SAAS,EAAE,eAAAO,GAAe,kBAAAC,EAAiB;AAAA,MAC3C,SAAAC;AAAA,IACJ;AAAA,EAAA,IACAC,EAASX,CAAc,GAErBY,IAAWb,EAAcF,EAAK,GAAG,GACjCgB,IAAYD,EAAS,OAAOE,EAAYF,EAAS,IAAI,IAAI,QACzDG,IAAiBC,EAAYR,GAAeC,CAAgB,GAC5DQ,IAAW,CAACC,MACdR,EAAQ,GAAGS,EAAiB,WAAWD,KAAgBE,EAAa,QAAQ,GAE1EC,IAAiBC,EAA6B,MAAA,WAE9CC,IAAqB,CAACX;;AACxB,aAAAY,IAAAT,KAAA,gBAAAA,EAAgB,kBAAhB,gBAAAS,EAAA,KAAAT,GAAgCH,OAAa,gBAAAa,EAAA,cAACC,GAAe,EAAA,GAAGd,EAAU,CAAA;AAAA;AAG1E,SAAA,gBAAAa,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAGtB;AAAA,MACJ,KAAAF;AAAA,MACA,WAAW0B,EAAM;AAAA,QACb;AAAA,QACAvB,KAAc;AAAA,QACdE,KAAae,KAAkB;AAAA,MAAA,CAClC;AAAA,IAAA;AAAA,IAEAJ,EAASW,EAAc,OAAO,KAC1B,gBAAAH,EAAA,cAAAI,GAAA,EAAU,GAAGjB,GAAU,QAAQP,GAAY,WAAAQ,GAAsB,MAAMiB,EAAoB,OAAO;AAAA,IAEtGb,EAASW,EAAc,YAAY,KAAKL,EAAmBX,CAAQ;AAAA,EAAA;AAGhF,GAEMc,IAAwC,CAAC,EAAE,OAAAK,GAAO,UAAAC,GAAU,SAAAC,QAC7D,gBAAAR,EAAA,cAAA,OAAA,EAAI,WAAU,8CACX,GAAA,gBAAAA,EAAA,cAAC,SAAI,WAAU,wFAAA,GACVQ,KAAY,gBAAAR,EAAA,cAAA,OAAA,EAAI,WAAU,+BAA8B,KAAKQ,GAAS,KAAKF,EAAiB,CAAA,CACjG,GACA,gBAAAN,EAAA,cAAC,SAAI,WAAU,gDAAA,mCACV,KAAE,EAAA,WAAU,8EAA4EM,CAAM,GAC9FC,KAAa,gBAAAP,EAAA,cAAA,KAAA,EAAE,WAAU,qCAAmCO,CAAS,CAC1E,CACJ;"}
+{"version":3,"file":"SearchResultOption.es.js","sources":["../../../src/components/LinkChooser/SearchResultOption.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { MenuItemContentSize } from '@components/MenuItem';\nimport { MenuItem } from '@components/MenuItem/MenuItem';\nimport { getInteractionModality } from '@react-aria/interactions';\nimport { useOption } from '@react-aria/listbox';\nimport { merge } from '@utilities/merge';\nimport { useActor } from '@xstate/react';\nimport React, { ReactElement, useRef } from 'react';\nimport { IconOptions } from './LinkChooser';\nimport { DropdownState, LinkChooserState, SectionState } from './state/types';\nimport { ImageMenuItemProps, SearchResult, SearchResultOptionProps } from './types';\nimport { findSection } from './utils/helpers';\n\nexport const SearchResultOption = ({\n    item,\n    state,\n    keyItemRecord,\n    machineService,\n}: SearchResultOptionProps): ReactElement => {\n    const ref = useRef<HTMLLIElement>(null);\n    const { optionProps, isDisabled, isSelected, isFocused } = useOption(\n        {\n            key: item.key,\n            shouldFocusOnHover: false,\n        },\n        state,\n        ref,\n    );\n    const [\n        {\n            context: { extraSections, currentSectionId },\n            matches,\n        },\n    ] = useActor(machineService);\n\n    const menuItem = keyItemRecord[item.key];\n    const decorator = menuItem.icon ? IconOptions[menuItem.icon] : undefined;\n    const currentSection = findSection(extraSections, currentSectionId);\n    const isLoaded = (currentState: DropdownState) =>\n        matches(`${LinkChooserState.Focused}.${currentState}.${SectionState.Loaded}`);\n\n    const isFocusVisible = getInteractionModality() !== 'pointer';\n\n    const renderExtraSection = (menuItem: SearchResult) =>\n        currentSection?.renderPreview?.(menuItem) || <ImageMenuItem {...menuItem} />;\n\n    return (\n        <li\n            {...optionProps}\n            ref={ref}\n            className={merge([\n                'tw-relative hover:tw-bg-black-10 tw-list-none tw-outline-none',\n                isDisabled && 'tw-pointer-events-none tw-top-px',\n                isFocused && isFocusVisible && 'tw-bg-black-10',\n            ])}\n        >\n            {isLoaded(DropdownState.Default) && (\n                <MenuItem {...menuItem} active={isSelected} decorator={decorator} size={MenuItemContentSize.Large} />\n            )}\n            {isLoaded(DropdownState.ExtraSection) && renderExtraSection(menuItem)}\n        </li>\n    );\n};\n\nconst ImageMenuItem = ({ title, subtitle, preview }: ImageMenuItemProps): ReactElement => (\n    <div className=\"tw-flex tw-px-5 tw-py-1.5 tw-cursor-pointer\">\n        <div className=\"tw-flex tw-flex-shrink-0 tw-w-[75px] tw-h-[75px] tw-max-w-xs tw-bg-black-0 tw-rounded\">\n            {preview && <img className=\"tw-w-full tw-object-contain\" src={preview} alt={title as string} />}\n        </div>\n        <div className=\"tw-flex tw-flex-col tw-justify-center tw-ml-4\">\n            <p className=\"tw-block tw-text-md tw-leading-tight tw-hover:underline tw-text-black-80\">{title}</p>\n            {subtitle && <p className=\"tw-text-[12px] tw-text-black-80\">{subtitle}</p>}\n        </div>\n    </div>\n);\n"],"names":["SearchResultOption","item","state","keyItemRecord","machineService","ref","useRef","optionProps","isDisabled","isSelected","isFocused","useOption","extraSections","currentSectionId","matches","useActor","menuItem","decorator","IconOptions","currentSection","findSection","isLoaded","currentState","LinkChooserState","SectionState","isFocusVisible","getInteractionModality","renderExtraSection","_a","React","ImageMenuItem","merge","DropdownState","MenuItem","MenuItemContentSize","title","subtitle","preview"],"mappings":";;;;;;;;;;AAcO,MAAMA,IAAqB,CAAC;AAAA,EAC/B,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,eAAAC;AAAA,EACA,gBAAAC;AACJ,MAA6C;AACnC,QAAAC,IAAMC,EAAsB,IAAI,GAChC,EAAE,aAAAC,GAAa,YAAAC,GAAY,YAAAC,GAAY,WAAAC,EAAc,IAAAC;AAAA,IACvD;AAAA,MACI,KAAKV,EAAK;AAAA,MACV,oBAAoB;AAAA,IACxB;AAAA,IACAC;AAAA,IACAG;AAAA,EAAA,GAEE;AAAA,IACF;AAAA,MACI,SAAS,EAAE,eAAAO,GAAe,kBAAAC,EAAiB;AAAA,MAC3C,SAAAC;AAAA,IACJ;AAAA,EAAA,IACAC,EAASX,CAAc,GAErBY,IAAWb,EAAcF,EAAK,GAAG,GACjCgB,IAAYD,EAAS,OAAOE,EAAYF,EAAS,IAAI,IAAI,QACzDG,IAAiBC,EAAYR,GAAeC,CAAgB,GAC5DQ,IAAW,CAACC,MACdR,EAAQ,GAAGS,EAAiB,WAAWD,KAAgBE,EAAa,QAAQ,GAE1EC,IAAiBC,EAA6B,MAAA,WAE9CC,IAAqB,CAACX;;AACxB,aAAAY,IAAAT,KAAA,gBAAAA,EAAgB,kBAAhB,gBAAAS,EAAA,KAAAT,GAAgCH,OAAa,gBAAAa,EAAA,cAACC,GAAe,EAAA,GAAGd,EAAU,CAAA;AAAA;AAG1E,SAAA,gBAAAa,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAGtB;AAAA,MACJ,KAAAF;AAAA,MACA,WAAW0B,EAAM;AAAA,QACb;AAAA,QACAvB,KAAc;AAAA,QACdE,KAAae,KAAkB;AAAA,MAAA,CAClC;AAAA,IAAA;AAAA,IAEAJ,EAASW,EAAc,OAAO,KAC1B,gBAAAH,EAAA,cAAAI,GAAA,EAAU,GAAGjB,GAAU,QAAQP,GAAY,WAAAQ,GAAsB,MAAMiB,EAAoB,OAAO;AAAA,IAEtGb,EAASW,EAAc,YAAY,KAAKL,EAAmBX,CAAQ;AAAA,EAAA;AAGhF,GAEMc,IAAgB,CAAC,EAAE,OAAAK,GAAO,UAAAC,GAAU,SAAAC,QACrC,gBAAAR,EAAA,cAAA,OAAA,EAAI,WAAU,8CACX,GAAA,gBAAAA,EAAA,cAAC,SAAI,WAAU,wFAAA,GACVQ,KAAY,gBAAAR,EAAA,cAAA,OAAA,EAAI,WAAU,+BAA8B,KAAKQ,GAAS,KAAKF,EAAiB,CAAA,CACjG,GACA,gBAAAN,EAAA,cAAC,SAAI,WAAU,gDAAA,mCACV,KAAE,EAAA,WAAU,8EAA4EM,CAAM,GAC9FC,KAAa,gBAAAP,EAAA,cAAA,KAAA,EAAE,WAAU,qCAAmCO,CAAS,CAC1E,CACJ;"}

package/dist/components/LinkChooser/SearchResultSection.d.ts

@@ -1,3 +1,3 @@
-import { FC } from 'react';
+import { ReactElement } from 'react';
 import { SearchResultSectionProps } from './types';
-export declare const SearchResultSection: FC<SearchResultSectionProps>;
+export declare const SearchResultSection: ({ heading, state, keyItemRecord, machineService, }: SearchResultSectionProps) => ReactElement;

package/dist/components/LinkChooser/SearchResultSection.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchResultSection.es.js","sources":["../../../src/components/LinkChooser/SearchResultSection.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useListBoxSection } from '@react-aria/listbox';\nimport React, { FC } from 'react';\nimport { SearchResultSectionProps } from './types';\nimport { SearchResultOption } from './SearchResultOption';\n\nexport const SearchResultSection: FC<SearchResultSectionProps> = ({\n    heading,\n    state,\n    keyItemRecord,\n    machineService,\n}) => {\n    const { itemProps, groupProps } = useListBoxSection({\n        heading: heading.rendered,\n        'aria-label': heading['aria-label'],\n    });\n\n    return (\n        <li {...itemProps} className=\"tw-border-b tw-border-b-black-10 last:tw-border-0\">\n            <ul\n                {...groupProps}\n                data-test-id=\"link-chooser-select-section\"\n                className=\"tw-py-2 tw-px-0 tw-m-0 tw-list-none\"\n            >\n                {[...heading.childNodes].map((node) => (\n                    <SearchResultOption\n                        key={node.key}\n                        item={node}\n                        state={state}\n                        keyItemRecord={keyItemRecord}\n                        machineService={machineService}\n                    />\n                ))}\n            </ul>\n        </li>\n    );\n};\n"],"names":["SearchResultSection","heading","state","keyItemRecord","machineService","itemProps","groupProps","useListBoxSection","React","node","SearchResultOption"],"mappings":";;;AAOO,MAAMA,IAAoD,CAAC;AAAA,EAC9D,SAAAC;AAAA,EACA,OAAAC;AAAA,EACA,eAAAC;AAAA,EACA,gBAAAC;AACJ,MAAM;AACF,QAAM,EAAE,WAAAC,GAAW,YAAAC,EAAW,IAAIC,EAAkB;AAAA,IAChD,SAASN,EAAQ;AAAA,IACjB,cAAcA,EAAQ,YAAY;AAAA,EAAA,CACrC;AAED,SACK,gBAAAO,EAAA,cAAA,MAAA,EAAI,GAAGH,GAAW,WAAU,uDACzB,gBAAAG,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAGF;AAAA,MACJ,gBAAa;AAAA,MACb,WAAU;AAAA,IAAA;AAAA,IAET,CAAC,GAAGL,EAAQ,UAAU,EAAE,IAAI,CAACQ,MAC1B,gBAAAD,EAAA;AAAA,MAACE;AAAA,MAAA;AAAA,QACG,KAAKD,EAAK;AAAA,QACV,MAAMA;AAAA,QACN,OAAAP;AAAA,QACA,eAAAC;AAAA,QACA,gBAAAC;AAAA,MAAA;AAAA,IAAA,CAEP;AAAA,EAAA,CAET;AAER;"}
+{"version":3,"file":"SearchResultSection.es.js","sources":["../../../src/components/LinkChooser/SearchResultSection.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useListBoxSection } from '@react-aria/listbox';\nimport React, { ReactElement } from 'react';\nimport { SearchResultSectionProps } from './types';\nimport { SearchResultOption } from './SearchResultOption';\n\nexport const SearchResultSection = ({\n    heading,\n    state,\n    keyItemRecord,\n    machineService,\n}: SearchResultSectionProps): ReactElement => {\n    const { itemProps, groupProps } = useListBoxSection({\n        heading: heading.rendered,\n        'aria-label': heading['aria-label'],\n    });\n\n    return (\n        <li {...itemProps} className=\"tw-border-b tw-border-b-black-10 last:tw-border-0\">\n            <ul\n                {...groupProps}\n                data-test-id=\"link-chooser-select-section\"\n                className=\"tw-py-2 tw-px-0 tw-m-0 tw-list-none\"\n            >\n                {[...heading.childNodes].map((node) => (\n                    <SearchResultOption\n                        key={node.key}\n                        item={node}\n                        state={state}\n                        keyItemRecord={keyItemRecord}\n                        machineService={machineService}\n                    />\n                ))}\n            </ul>\n        </li>\n    );\n};\n"],"names":["SearchResultSection","heading","state","keyItemRecord","machineService","itemProps","groupProps","useListBoxSection","React","node","SearchResultOption"],"mappings":";;;AAOO,MAAMA,IAAsB,CAAC;AAAA,EAChC,SAAAC;AAAA,EACA,OAAAC;AAAA,EACA,eAAAC;AAAA,EACA,gBAAAC;AACJ,MAA8C;AAC1C,QAAM,EAAE,WAAAC,GAAW,YAAAC,EAAW,IAAIC,EAAkB;AAAA,IAChD,SAASN,EAAQ;AAAA,IACjB,cAAcA,EAAQ,YAAY;AAAA,EAAA,CACrC;AAED,SACK,gBAAAO,EAAA,cAAA,MAAA,EAAI,GAAGH,GAAW,WAAU,uDACzB,gBAAAG,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAGF;AAAA,MACJ,gBAAa;AAAA,MACb,WAAU;AAAA,IAAA;AAAA,IAET,CAAC,GAAGL,EAAQ,UAAU,EAAE,IAAI,CAACQ,MAC1B,gBAAAD,EAAA;AAAA,MAACE;AAAA,MAAA;AAAA,QACG,KAAKD,EAAK;AAAA,QACV,MAAMA;AAAA,QACN,OAAAP;AAAA,QACA,eAAAC;AAAA,QACA,gBAAAC;AAAA,MAAA;AAAA,IAAA,CAEP;AAAA,EAAA,CAET;AAER;"}

package/dist/components/LinkChooser/SearchResultsList.d.ts

@@ -1,3 +1,3 @@
-import { FC } from 'react';
+import { ReactElement } from 'react';
 import { SearchResultListProps } from './types';
-export declare const SearchResultsList: FC<SearchResultListProps>;
+export declare const SearchResultsList: (props: SearchResultListProps) => ReactElement;

package/dist/components/LinkChooser/SearchResultsList.es.js

@@ -67,7 +67,9 @@ const J = (t) => {
   },
   /* @__PURE__ */ e.createElement("img", { className: "tw-w-[150px] tw-mb-5", src: s, alt: "Icon" }),
   /* @__PURE__ */ e.createElement("p", { className: "tw-text-black-60 tw-text-center" }, t)
-), K = ({ error: t = "An error occurred while fetching the results" }) => /* @__PURE__ */ e.createElement(
+), K = ({
+  error: t = "An error occurred while fetching the results"
+}) => /* @__PURE__ */ e.createElement(
   "div",
   {
     "data-test-id": "link-chooser-error",

package/dist/components/LinkChooser/SearchResultsList.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchResultsList.es.js","sources":["../../../src/components/LinkChooser/SearchResultsList.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { getKeyItemRecord, getMenuItems } from '@components/ActionMenu/Aria/helper';\nimport { useListBox } from '@react-aria/listbox';\nimport { useActor } from '@xstate/react';\nimport React, { FC, useMemo, useRef } from 'react';\nimport BackgroundIcon from './assets/background.svg';\nimport NoResultsIcon from './assets/no-results.svg';\nimport FetchingIcon from './assets/nook-animated.png';\nimport { NavigationMenuItem } from './NavigationMenu';\nimport { SearchResultSection } from './SearchResultSection';\nimport { defaultSection } from './sections';\nimport { SearchResultListProps } from './types';\nimport { findSection } from './utils/helpers';\nimport { isFetching, isUnsuccessful, shouldGoBack } from './utils/state';\n\nexport const SearchResultsList: FC<SearchResultListProps> = (props) => {\n    const ref = useRef<HTMLUListElement>(null);\n    const { listBoxRef = ref, state, menuBlocks, machineService } = props;\n    const { listBoxProps } = useListBox(props, state, listBoxRef);\n    const items = getMenuItems(menuBlocks);\n    const keyItemRecord = getKeyItemRecord(items);\n\n    const [\n        {\n            context: { extraSections, currentSectionId, searchResults, query },\n            matches,\n        },\n        send,\n    ] = useActor(machineService);\n\n    const currentSection = useMemo(\n        () => findSection(extraSections, currentSectionId) || defaultSection,\n        [currentSectionId, extraSections],\n    );\n\n    if (isFetching(matches)) {\n        return <FetchingAnimation />;\n    }\n\n    if (isUnsuccessful(matches)) {\n        return <FetchingError />;\n    }\n\n    return (\n        <div>\n            {shouldGoBack(matches) && (\n                <div className=\"tw-mt-2\">\n                    <NavigationMenuItem\n                        state={state}\n                        section={currentSection}\n                        onPress={() => {\n                            send({\n                                type: 'BACK_TO_DEFAULT',\n                                data: { getExtraResultsByQuery: null },\n                            });\n                        }}\n                        direction=\"left\"\n                    />\n                </div>\n            )}\n            <ul\n                {...listBoxProps}\n                data-test-id=\"link-chooser-results-list\"\n                ref={listBoxRef}\n                className=\"tw-list-none tw-p-0 tw-m-0 tw-bg-white tw-z-20 focus-visible:tw-outline-none\"\n            >\n                {searchResults.length > 0 ? (\n                    [...state.collection]\n                        .filter((section) => section.key === 'search')\n                        .map((item) => (\n                            <SearchResultSection\n                                key={item.key}\n                                heading={item}\n                                state={state}\n                                keyItemRecord={keyItemRecord}\n                                machineService={machineService}\n                            />\n                        ))\n                ) : (\n                    <EmptyResults\n                        prompt={\n                            query\n                                ? `We could not find any results for \"${query}\".`\n                                : 'Use the search above to discover your brand assets, or enter a URL'\n                        }\n                        icon={query ? NoResultsIcon : BackgroundIcon}\n                    />\n                )}\n            </ul>\n        </div>\n    );\n};\n\nconst EmptyResults: FC<{ prompt: string; icon: string }> = ({ prompt, icon }) => (\n    <div\n        data-test-id=\"link-chooser-empty-results\"\n        className=\"tw-flex tw-flex-col tw-justify-center tw-items-center tw-h-[278px] tw-p-3\"\n    >\n        <img className=\"tw-w-[150px] tw-mb-5\" src={icon} alt=\"Icon\" />\n        <p className=\"tw-text-black-60 tw-text-center\">{prompt}</p>\n    </div>\n);\n\nconst FetchingError: FC<{ error?: string }> = ({ error = 'An error occurred while fetching the results' }) => (\n    <div\n        data-test-id=\"link-chooser-error\"\n        className=\"tw-flex tw-flex-col tw-justify-center tw-items-center tw-h-[278px] tw-p-3\"\n    >\n        <img className=\"tw-w-[75px] tw-mb-5\" src={NoResultsIcon} alt=\"Error\" />\n        <p className=\"tw-text-black-60 tw-text-center\">{error}</p>\n    </div>\n);\n\nconst FetchingAnimation: FC = () => (\n    <div\n        data-test-id=\"link-chooser-loader\"\n        className=\"tw-flex tw-flex-col tw-justify-center tw-items-center tw-h-[278px] tw-p-3\"\n    >\n        <img className=\"tw-w-[50px]\" src={FetchingIcon} alt=\"Fetching\" />\n    </div>\n);\n"],"names":["SearchResultsList","props","ref","useRef","listBoxRef","state","menuBlocks","machineService","listBoxProps","useListBox","items","getMenuItems","keyItemRecord","getKeyItemRecord","extraSections","currentSectionId","searchResults","query","matches","send","useActor","currentSection","useMemo","findSection","defaultSection","isFetching","FetchingAnimation","isUnsuccessful","FetchingError","React","shouldGoBack","NavigationMenuItem","section","item","SearchResultSection","EmptyResults","NoResultsIcon","BackgroundIcon","prompt","icon","error","FetchingIcon"],"mappings":"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"}
+{"version":3,"file":"SearchResultsList.es.js","sources":["../../../src/components/LinkChooser/SearchResultsList.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { getKeyItemRecord, getMenuItems } from '@components/ActionMenu/Aria/helper';\nimport { useListBox } from '@react-aria/listbox';\nimport { useActor } from '@xstate/react';\nimport React, { ReactElement, useMemo, useRef } from 'react';\nimport BackgroundIcon from './assets/background.svg';\nimport NoResultsIcon from './assets/no-results.svg';\nimport FetchingIcon from './assets/nook-animated.png';\nimport { NavigationMenuItem } from './NavigationMenu';\nimport { SearchResultSection } from './SearchResultSection';\nimport { defaultSection } from './sections';\nimport { SearchResultListProps } from './types';\nimport { findSection } from './utils/helpers';\nimport { isFetching, isUnsuccessful, shouldGoBack } from './utils/state';\n\nexport const SearchResultsList = (props: SearchResultListProps): ReactElement => {\n    const ref = useRef<HTMLUListElement>(null);\n    const { listBoxRef = ref, state, menuBlocks, machineService } = props;\n    const { listBoxProps } = useListBox(props, state, listBoxRef);\n    const items = getMenuItems(menuBlocks);\n    const keyItemRecord = getKeyItemRecord(items);\n\n    const [\n        {\n            context: { extraSections, currentSectionId, searchResults, query },\n            matches,\n        },\n        send,\n    ] = useActor(machineService);\n\n    const currentSection = useMemo(\n        () => findSection(extraSections, currentSectionId) || defaultSection,\n        [currentSectionId, extraSections],\n    );\n\n    if (isFetching(matches)) {\n        return <FetchingAnimation />;\n    }\n\n    if (isUnsuccessful(matches)) {\n        return <FetchingError />;\n    }\n\n    return (\n        <div>\n            {shouldGoBack(matches) && (\n                <div className=\"tw-mt-2\">\n                    <NavigationMenuItem\n                        state={state}\n                        section={currentSection}\n                        onPress={() => {\n                            send({\n                                type: 'BACK_TO_DEFAULT',\n                                data: { getExtraResultsByQuery: null },\n                            });\n                        }}\n                        direction=\"left\"\n                    />\n                </div>\n            )}\n            <ul\n                {...listBoxProps}\n                data-test-id=\"link-chooser-results-list\"\n                ref={listBoxRef}\n                className=\"tw-list-none tw-p-0 tw-m-0 tw-bg-white tw-z-20 focus-visible:tw-outline-none\"\n            >\n                {searchResults.length > 0 ? (\n                    [...state.collection]\n                        .filter((section) => section.key === 'search')\n                        .map((item) => (\n                            <SearchResultSection\n                                key={item.key}\n                                heading={item}\n                                state={state}\n                                keyItemRecord={keyItemRecord}\n                                machineService={machineService}\n                            />\n                        ))\n                ) : (\n                    <EmptyResults\n                        prompt={\n                            query\n                                ? `We could not find any results for \"${query}\".`\n                                : 'Use the search above to discover your brand assets, or enter a URL'\n                        }\n                        icon={query ? NoResultsIcon : BackgroundIcon}\n                    />\n                )}\n            </ul>\n        </div>\n    );\n};\n\nconst EmptyResults = ({ prompt, icon }: { prompt: string; icon: string }): ReactElement => (\n    <div\n        data-test-id=\"link-chooser-empty-results\"\n        className=\"tw-flex tw-flex-col tw-justify-center tw-items-center tw-h-[278px] tw-p-3\"\n    >\n        <img className=\"tw-w-[150px] tw-mb-5\" src={icon} alt=\"Icon\" />\n        <p className=\"tw-text-black-60 tw-text-center\">{prompt}</p>\n    </div>\n);\n\nconst FetchingError = ({\n    error = 'An error occurred while fetching the results',\n}: {\n    error?: string;\n}): ReactElement => (\n    <div\n        data-test-id=\"link-chooser-error\"\n        className=\"tw-flex tw-flex-col tw-justify-center tw-items-center tw-h-[278px] tw-p-3\"\n    >\n        <img className=\"tw-w-[75px] tw-mb-5\" src={NoResultsIcon} alt=\"Error\" />\n        <p className=\"tw-text-black-60 tw-text-center\">{error}</p>\n    </div>\n);\n\nconst FetchingAnimation = (): ReactElement => (\n    <div\n        data-test-id=\"link-chooser-loader\"\n        className=\"tw-flex tw-flex-col tw-justify-center tw-items-center tw-h-[278px] tw-p-3\"\n    >\n        <img className=\"tw-w-[50px]\" src={FetchingIcon} alt=\"Fetching\" />\n    </div>\n);\n"],"names":["SearchResultsList","props","ref","useRef","listBoxRef","state","menuBlocks","machineService","listBoxProps","useListBox","items","getMenuItems","keyItemRecord","getKeyItemRecord","extraSections","currentSectionId","searchResults","query","matches","send","useActor","currentSection","useMemo","findSection","defaultSection","isFetching","FetchingAnimation","isUnsuccessful","FetchingError","React","shouldGoBack","NavigationMenuItem","section","item","SearchResultSection","EmptyResults","NoResultsIcon","BackgroundIcon","prompt","icon","error","FetchingIcon"],"mappings":";;;;;;;;;;;;AAgBa,MAAAA,IAAoB,CAACC,MAA+C;AACvE,QAAAC,IAAMC,EAAyB,IAAI,GACnC,EAAE,YAAAC,IAAaF,GAAK,OAAAG,GAAO,YAAAC,GAAY,gBAAAC,EAAmB,IAAAN,GAC1D,EAAE,cAAAO,EAAa,IAAIC,EAAWR,GAAOI,GAAOD,CAAU,GACtDM,IAAQC,EAAaL,CAAU,GAC/BM,IAAgBC,EAAiBH,CAAK,GAEtC;AAAA,IACF;AAAA,MACI,SAAS,EAAE,eAAAI,GAAe,kBAAAC,GAAkB,eAAAC,GAAe,OAAAC,EAAM;AAAA,MACjE,SAAAC;AAAA,IACJ;AAAA,IACAC;AAAA,EAAA,IACAC,EAASb,CAAc,GAErBc,IAAiBC;AAAA,IACnB,MAAMC,EAAYT,GAAeC,CAAgB,KAAKS;AAAA,IACtD,CAACT,GAAkBD,CAAa;AAAA,EAAA;AAGhC,SAAAW,EAAWP,CAAO,oCACVQ,GAAkB,IAAA,IAG1BC,EAAeT,CAAO,oCACdU,GAAc,IAAA,IAItB,gBAAAC,EAAA,cAAC,aACIC,EAAaZ,CAAO,KAChB,gBAAAW,EAAA,cAAA,OAAA,EAAI,WAAU,UACX,GAAA,gBAAAA,EAAA;AAAA,IAACE;AAAA,IAAA;AAAA,MACG,OAAA1B;AAAA,MACA,SAASgB;AAAA,MACT,SAAS,MAAM;AACN,QAAAF,EAAA;AAAA,UACD,MAAM;AAAA,UACN,MAAM,EAAE,wBAAwB,KAAK;AAAA,QAAA,CACxC;AAAA,MACL;AAAA,MACA,WAAU;AAAA,IAAA;AAAA,EAAA,CAElB,GAEJ,gBAAAU,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAGrB;AAAA,MACJ,gBAAa;AAAA,MACb,KAAKJ;AAAA,MACL,WAAU;AAAA,IAAA;AAAA,IAETY,EAAc,SAAS,IACpB,CAAC,GAAGX,EAAM,UAAU,EACf,OAAO,CAAC2B,MAAYA,EAAQ,QAAQ,QAAQ,EAC5C,IAAI,CAACC,MACF,gBAAAJ,EAAA;AAAA,MAACK;AAAA,MAAA;AAAA,QACG,KAAKD,EAAK;AAAA,QACV,SAASA;AAAA,QACT,OAAA5B;AAAA,QACA,eAAAO;AAAA,QACA,gBAAAL;AAAA,MAAA;AAAA,IAAA,CAEP,IAEL,gBAAAsB,EAAA;AAAA,MAACM;AAAA,MAAA;AAAA,QACG,QACIlB,IACM,sCAAsCA,QACtC;AAAA,QAEV,MAAMA,IAAQmB,IAAgBC;AAAA,MAAA;AAAA,IAClC;AAAA,EAAA,CAGZ;AAER,GAEMF,IAAe,CAAC,EAAE,QAAAG,GAAQ,MAAAC,EAC5B,MAAA,gBAAAV,EAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,gBAAa;AAAA,IACb,WAAU;AAAA,EAAA;AAAA,kCAET,OAAI,EAAA,WAAU,wBAAuB,KAAKU,GAAM,KAAI,QAAO;AAAA,EAC3D,gBAAAV,EAAA,cAAA,KAAA,EAAE,WAAU,kCAAA,GAAmCS,CAAO;AAC3D,GAGEV,IAAgB,CAAC;AAAA,EACnB,OAAAY,IAAQ;AACZ,MAGI,gBAAAX,EAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,gBAAa;AAAA,IACb,WAAU;AAAA,EAAA;AAAA,kCAET,OAAI,EAAA,WAAU,uBAAsB,KAAKO,GAAe,KAAI,SAAQ;AAAA,EACpE,gBAAAP,EAAA,cAAA,KAAA,EAAE,WAAU,kCAAA,GAAmCW,CAAM;AAC1D,GAGEd,IAAoB,MACtB,gBAAAG,EAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,gBAAa;AAAA,IACb,WAAU;AAAA,EAAA;AAAA,kCAET,OAAI,EAAA,WAAU,eAAc,KAAKY,GAAc,KAAI,YAAW;AACnE;"}

package/dist/components/LinkChooser/utils/helpers.d.ts

@@ -7,6 +7,7 @@ export declare const decoratedResults: (results: SearchResult[]) => {
     decorator: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
     link?: string | undefined;
     style?: import("../..").MenuItemStyle | undefined;
+    children?: import("react").ReactNode;
     disabled?: boolean | undefined;
     size?: import("../..").MenuItemContentSize | undefined;
     type?: string | undefined;

package/dist/components/LinkChooser/utils/useManualComboBoxHandlers.d.ts

@@ -49,7 +49,7 @@ export declare const useManualComboBoxEventHandlers: ({ inputProps, inputRef, po
     results?: number | undefined;
     security?: string | undefined;
     unselectable?: "off" | "on" | undefined;
-    inputMode?: "text" | "search" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+    inputMode?: "text" | "none" | "search" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
     is?: string | undefined;
     'aria-activedescendant'?: string | undefined;
     'aria-atomic'?: (boolean | "true" | "false") | undefined;

package/dist/components/LoadingCircle/LoadingCircle.d.ts

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import { ReactElement } from 'react';
 export declare enum LoadingCircleStyle {
     Progress = "Progress",
     Positive = "Positive",
@@ -16,4 +16,7 @@ export type LoadingCircleProps = {
 };
 export declare const statusClasses: Record<LoadingCircleStyle, string>;
 export declare const sizeClasses: Record<LoadingCircleSize, string>;
-export declare const LoadingCircle: FC<LoadingCircleProps>;
+export declare const LoadingCircle: {
+    ({ style, size, }: LoadingCircleProps): ReactElement;
+    displayName: string;
+};

package/dist/components/LoadingCircle/LoadingCircle.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"LoadingCircle.es.js","sources":["../../../src/components/LoadingCircle/LoadingCircle.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { merge } from '@utilities/merge';\nimport React, { FC } from 'react';\n\nexport enum LoadingCircleStyle {\n    Progress = 'Progress',\n    Positive = 'Positive',\n    Danger = 'Danger',\n}\n\nexport enum LoadingCircleSize {\n    ExtraSmall = 'ExtraSmall',\n    Small = 'Small',\n    Medium = 'Medium',\n    Large = 'Large',\n}\n\nexport type LoadingCircleProps = {\n    style?: LoadingCircleStyle;\n    size?: LoadingCircleSize;\n};\n\nexport const statusClasses: Record<LoadingCircleStyle, string> = {\n    [LoadingCircleStyle.Progress]: 'tw-border-violet-60',\n    [LoadingCircleStyle.Positive]: 'tw-border-green-60',\n    [LoadingCircleStyle.Danger]: 'tw-border-red-60',\n};\n\nexport const sizeClasses: Record<LoadingCircleSize, string> = {\n    [LoadingCircleSize.ExtraSmall]: 'tw-w-4 tw-h-4',\n    [LoadingCircleSize.Small]: 'tw-w-5 tw-h-5',\n    [LoadingCircleSize.Medium]: 'tw-w-8 tw-h-8',\n    [LoadingCircleSize.Large]: 'tw-w-16 tw-h-16',\n};\n\nexport const LoadingCircle: FC<LoadingCircleProps> = ({\n    style = LoadingCircleStyle.Progress,\n    size = LoadingCircleSize.Medium,\n}) => {\n    return (\n        <div\n            data-test-id=\"loading-circle\"\n            className={merge([\n                'tw-border-2 tw-border-solid tw-rounded-full tw-border-t-transparent tw-animate-spin',\n                statusClasses[style],\n                sizeClasses[size],\n            ])}\n        ></div>\n    );\n};\nLoadingCircle.displayName = 'FondueLoadingCircle';\n"],"names":["LoadingCircleStyle","LoadingCircleSize","statusClasses","sizeClasses","LoadingCircle","style","size","React","merge"],"mappings":";;AAKY,IAAAA,sBAAAA,OACRA,EAAA,WAAW,YACXA,EAAA,WAAW,YACXA,EAAA,SAAS,UAHDA,IAAAA,KAAA,CAAA,CAAA,GAMAC,sBAAAA,OACRA,EAAA,aAAa,cACbA,EAAA,QAAQ,SACRA,EAAA,SAAS,UACTA,EAAA,QAAQ,SAJAA,IAAAA,KAAA,CAAA,CAAA;AAYL,MAAMC,IAAoD;AAAA,EAC5D,UAA8B;AAAA,EAC9B,UAA8B;AAAA,EAC9B,QAA4B;AACjC,GAEaC,IAAiD;AAAA,EACzD,YAA+B;AAAA,EAC/B,OAA0B;AAAA,EAC1B,QAA2B;AAAA,EAC3B,OAA0B;AAC/B,GAEaC,IAAwC,CAAC;AAAA,EAClD,OAAAC,IAAQ;AAAA,EACR,MAAAC,IAAO;AAAA;AACX,MAEQ,gBAAAC,EAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,gBAAa;AAAA,IACb,WAAWC,EAAM;AAAA,MACb;AAAA,MACAN,EAAcG,CAAK;AAAA,MACnBF,EAAYG,CAAI;AAAA,IAAA,CACnB;AAAA,EAAA;AAAA;AAIbF,EAAc,cAAc;"}
+{"version":3,"file":"LoadingCircle.es.js","sources":["../../../src/components/LoadingCircle/LoadingCircle.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { merge } from '@utilities/merge';\nimport React, { ReactElement } from 'react';\n\nexport enum LoadingCircleStyle {\n    Progress = 'Progress',\n    Positive = 'Positive',\n    Danger = 'Danger',\n}\n\nexport enum LoadingCircleSize {\n    ExtraSmall = 'ExtraSmall',\n    Small = 'Small',\n    Medium = 'Medium',\n    Large = 'Large',\n}\n\nexport type LoadingCircleProps = {\n    style?: LoadingCircleStyle;\n    size?: LoadingCircleSize;\n};\n\nexport const statusClasses: Record<LoadingCircleStyle, string> = {\n    [LoadingCircleStyle.Progress]: 'tw-border-violet-60',\n    [LoadingCircleStyle.Positive]: 'tw-border-green-60',\n    [LoadingCircleStyle.Danger]: 'tw-border-red-60',\n};\n\nexport const sizeClasses: Record<LoadingCircleSize, string> = {\n    [LoadingCircleSize.ExtraSmall]: 'tw-w-4 tw-h-4',\n    [LoadingCircleSize.Small]: 'tw-w-5 tw-h-5',\n    [LoadingCircleSize.Medium]: 'tw-w-8 tw-h-8',\n    [LoadingCircleSize.Large]: 'tw-w-16 tw-h-16',\n};\n\nexport const LoadingCircle = ({\n    style = LoadingCircleStyle.Progress,\n    size = LoadingCircleSize.Medium,\n}: LoadingCircleProps): ReactElement => {\n    return (\n        <div\n            data-test-id=\"loading-circle\"\n            className={merge([\n                'tw-border-2 tw-border-solid tw-rounded-full tw-border-t-transparent tw-animate-spin',\n                statusClasses[style],\n                sizeClasses[size],\n            ])}\n        ></div>\n    );\n};\nLoadingCircle.displayName = 'FondueLoadingCircle';\n"],"names":["LoadingCircleStyle","LoadingCircleSize","statusClasses","sizeClasses","LoadingCircle","style","size","React","merge"],"mappings":";;AAKY,IAAAA,sBAAAA,OACRA,EAAA,WAAW,YACXA,EAAA,WAAW,YACXA,EAAA,SAAS,UAHDA,IAAAA,KAAA,CAAA,CAAA,GAMAC,sBAAAA,OACRA,EAAA,aAAa,cACbA,EAAA,QAAQ,SACRA,EAAA,SAAS,UACTA,EAAA,QAAQ,SAJAA,IAAAA,KAAA,CAAA,CAAA;AAYL,MAAMC,IAAoD;AAAA,EAC5D,UAA8B;AAAA,EAC9B,UAA8B;AAAA,EAC9B,QAA4B;AACjC,GAEaC,IAAiD;AAAA,EACzD,YAA+B;AAAA,EAC/B,OAA0B;AAAA,EAC1B,QAA2B;AAAA,EAC3B,OAA0B;AAC/B,GAEaC,IAAgB,CAAC;AAAA,EAC1B,OAAAC,IAAQ;AAAA,EACR,MAAAC,IAAO;AAAA;AACX,MAEQ,gBAAAC,EAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,gBAAa;AAAA,IACb,WAAWC,EAAM;AAAA,MACb;AAAA,MACAN,EAAcG,CAAK;AAAA,MACnBF,EAAYG,CAAI;AAAA,IAAA,CACnB;AAAA,EAAA;AAAA;AAIbF,EAAc,cAAc;"}

package/dist/components/Menu/Menu.d.ts

@@ -1,4 +1,4 @@
-import { PropsWithChildren, ReactNode, RefObject } from 'react';
+import { ReactNode, RefObject } from 'react';
 interface Props {
     triggerRef?: RefObject<Element>;
     open?: boolean;
@@ -6,7 +6,7 @@ interface Props {
     onClose?: () => void;
     offset?: [number, number];
 }
-export type MenuProps = PropsWithChildren<Props>;
+export type MenuProps = Props;
 export declare const Menu: {
     ({ triggerRef, children, open, offset, onClose }: MenuProps): JSX.Element;
     displayName: string;

package/dist/components/Menu/Menu.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"Menu.es.js","sources":["../../../src/components/Menu/Menu.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React, { PropsWithChildren, ReactNode, RefObject, useCallback, useEffect, useState } from 'react';\nimport { usePopper } from 'react-popper';\nimport { merge } from '@utilities/merge';\nimport { useMenuKeyboardNavigation } from '@components/Menu/useMenuKeyboardNavigation';\nimport { useClickOutside } from '@hooks/useClickOutside';\nimport { INSET_BORDER } from '@utilities/borderStyle';\n\ninterface Props {\n    triggerRef?: RefObject<Element>;\n    open?: boolean;\n    children?: ReactNode | ReactNode[];\n    onClose?: () => void;\n    offset?: [number, number];\n}\n\nexport type MenuProps = PropsWithChildren<Props>;\n\nconst CONTAINER_BASE_CLASSES = 'tw-relative tw-bg-base tw-rounded tw-py-2 tw-shadow-mid tw-z-[120000]';\nconst CONTAINER_CLASSES = merge([CONTAINER_BASE_CLASSES, INSET_BORDER]);\n\nexport const Menu = ({ triggerRef, children, open = true, offset = [0, 8], onClose }: MenuProps) => {\n    const [isMenuOpen, setIsMenuOpen] = useState(open);\n    const [menuContainerRef, setMenuContainerRef] = useState<HTMLElement | null>(null);\n    const [menuOpenerRef, setMenuOpenerRef] = useState<HTMLElement | null>(null);\n\n    const menuKeyboardNavigationAction = useMenuKeyboardNavigation(\n        isMenuOpen,\n        menuContainerRef,\n        'li > a, li > button:not(:disabled)',\n    );\n\n    const handleClickOutside = useCallback(() => {\n        if (menuOpenerRef && isMenuOpen) {\n            setIsMenuOpen(false);\n            if (onClose) {\n                onClose();\n            }\n        }\n    }, [menuOpenerRef, isMenuOpen, onClose]);\n\n    useClickOutside(menuContainerRef, handleClickOutside, [menuOpenerRef as HTMLElement]);\n\n    const popperInstance = usePopper(menuOpenerRef, menuContainerRef, {\n        placement: 'bottom-start',\n        strategy: 'fixed',\n        modifiers: [\n            {\n                name: 'flip',\n                enabled: true,\n            },\n            {\n                name: 'offset',\n                options: {\n                    offset,\n                },\n            },\n        ],\n    });\n\n    useEffect(() => {\n        const trigger = triggerRef?.current;\n\n        if (trigger) {\n            setMenuOpenerRef(trigger as HTMLElement);\n        }\n    }, [triggerRef]);\n\n    useEffect(() => {\n        setIsMenuOpen(open);\n        if (popperInstance.update && open) {\n            popperInstance.update();\n        }\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [open]);\n\n    useEffect(() => {\n        if (menuKeyboardNavigationAction === 'CLOSE_MENU' && menuOpenerRef) {\n            setIsMenuOpen(false);\n            if (onClose) {\n                onClose();\n            }\n        }\n    }, [menuKeyboardNavigationAction, onClose, menuOpenerRef]);\n\n    return (\n        <nav\n            className={merge([CONTAINER_CLASSES, isMenuOpen ? 'tw-block' : 'tw-hidden'])}\n            role={isMenuOpen ? 'dialog' : ''}\n            ref={setMenuContainerRef}\n            style={menuOpenerRef ? popperInstance.styles.popper : {}}\n            {...(menuOpenerRef ? popperInstance.attributes.popper : {})}\n            data-test-id=\"menu\"\n        >\n            <ol className=\"tw-list-none\" role=\"menu\">\n                {children}\n            </ol>\n        </nav>\n    );\n};\nMenu.displayName = 'FondueMenu';\n"],"names":["CONTAINER_BASE_CLASSES","CONTAINER_CLASSES","merge","INSET_BORDER","Menu","triggerRef","children","open","offset","onClose","isMenuOpen","setIsMenuOpen","useState","menuContainerRef","setMenuContainerRef","menuOpenerRef","setMenuOpenerRef","menuKeyboardNavigationAction","useMenuKeyboardNavigation","handleClickOutside","useCallback","useClickOutside","popperInstance","usePopper","useEffect","trigger","React"],"mappings":";;;;;;AAmBA,MAAMA,IAAyB,yEACzBC,IAAoBC,EAAM,CAACF,GAAwBG,CAAY,CAAC,GAEzDC,IAAO,CAAC,EAAE,YAAAC,GAAY,UAAAC,GAAU,MAAAC,IAAO,IAAM,QAAAC,IAAS,CAAC,GAAG,CAAC,GAAG,SAAAC,QAAyB;AAChG,QAAM,CAACC,GAAYC,CAAa,IAAIC,EAASL,CAAI,GAC3C,CAACM,GAAkBC,CAAmB,IAAIF,EAA6B,IAAI,GAC3E,CAACG,GAAeC,CAAgB,IAAIJ,EAA6B,IAAI,GAErEK,IAA+BC;AAAA,IACjCR;AAAA,IACAG;AAAA,IACA;AAAA,EAAA,GAGEM,IAAqBC,EAAY,MAAM;AACzC,IAAIL,KAAiBL,MACjBC,EAAc,EAAK,GACfF,KACQA;EAGjB,GAAA,CAACM,GAAeL,GAAYD,CAAO,CAAC;AAEvC,EAAAY,EAAgBR,GAAkBM,GAAoB,CAACJ,CAA4B,CAAC;AAE9E,QAAAO,IAAiBC,EAAUR,GAAeF,GAAkB;AAAA,IAC9D,WAAW;AAAA,IACX,UAAU;AAAA,IACV,WAAW;AAAA,MACP;AAAA,QACI,MAAM;AAAA,QACN,SAAS;AAAA,MACb;AAAA,MACA;AAAA,QACI,MAAM;AAAA,QACN,SAAS;AAAA,UACL,QAAAL;AAAA,QACJ;AAAA,MACJ;AAAA,IACJ;AAAA,EAAA,CACH;AAED,SAAAgB,EAAU,MAAM;AACZ,UAAMC,IAAUpB,KAAA,gBAAAA,EAAY;AAE5B,IAAIoB,KACAT,EAAiBS,CAAsB;AAAA,EAC3C,GACD,CAACpB,CAAU,CAAC,GAEfmB,EAAU,MAAM;AACZ,IAAAb,EAAcJ,CAAI,GACde,EAAe,UAAUf,KACzBe,EAAe,OAAO;AAAA,EAC1B,GAED,CAACf,CAAI,CAAC,GAETiB,EAAU,MAAM;AACR,IAAAP,MAAiC,gBAAgBF,MACjDJ,EAAc,EAAK,GACfF,KACQA;EAGjB,GAAA,CAACQ,GAA8BR,GAASM,CAAa,CAAC,GAGrD,gBAAAW,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAWxB,EAAM,CAACD,GAAmBS,IAAa,aAAa,WAAW,CAAC;AAAA,MAC3E,MAAMA,IAAa,WAAW;AAAA,MAC9B,KAAKI;AAAA,MACL,OAAOC,IAAgBO,EAAe,OAAO,SAAS,CAAC;AAAA,MACtD,GAAIP,IAAgBO,EAAe,WAAW,SAAS,CAAC;AAAA,MACzD,gBAAa;AAAA,IAAA;AAAA,oCAEZ,MAAG,EAAA,WAAU,gBAAe,MAAK,UAC7BhB,CACL;AAAA,EAAA;AAGZ;AACAF,EAAK,cAAc;"}
+{"version":3,"file":"Menu.es.js","sources":["../../../src/components/Menu/Menu.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React, { ReactNode, RefObject, useCallback, useEffect, useState } from 'react';\nimport { usePopper } from 'react-popper';\nimport { merge } from '@utilities/merge';\nimport { useMenuKeyboardNavigation } from '@components/Menu/useMenuKeyboardNavigation';\nimport { useClickOutside } from '@hooks/useClickOutside';\nimport { INSET_BORDER } from '@utilities/borderStyle';\n\ninterface Props {\n    triggerRef?: RefObject<Element>;\n    open?: boolean;\n    children?: ReactNode | ReactNode[];\n    onClose?: () => void;\n    offset?: [number, number];\n}\n\nexport type MenuProps = Props;\n\nconst CONTAINER_BASE_CLASSES = 'tw-relative tw-bg-base tw-rounded tw-py-2 tw-shadow-mid tw-z-[120000]';\nconst CONTAINER_CLASSES = merge([CONTAINER_BASE_CLASSES, INSET_BORDER]);\n\nexport const Menu = ({ triggerRef, children, open = true, offset = [0, 8], onClose }: MenuProps) => {\n    const [isMenuOpen, setIsMenuOpen] = useState(open);\n    const [menuContainerRef, setMenuContainerRef] = useState<HTMLElement | null>(null);\n    const [menuOpenerRef, setMenuOpenerRef] = useState<HTMLElement | null>(null);\n\n    const menuKeyboardNavigationAction = useMenuKeyboardNavigation(\n        isMenuOpen,\n        menuContainerRef,\n        'li > a, li > button:not(:disabled)',\n    );\n\n    const handleClickOutside = useCallback(() => {\n        if (menuOpenerRef && isMenuOpen) {\n            setIsMenuOpen(false);\n            if (onClose) {\n                onClose();\n            }\n        }\n    }, [menuOpenerRef, isMenuOpen, onClose]);\n\n    useClickOutside(menuContainerRef, handleClickOutside, [menuOpenerRef as HTMLElement]);\n\n    const popperInstance = usePopper(menuOpenerRef, menuContainerRef, {\n        placement: 'bottom-start',\n        strategy: 'fixed',\n        modifiers: [\n            {\n                name: 'flip',\n                enabled: true,\n            },\n            {\n                name: 'offset',\n                options: {\n                    offset,\n                },\n            },\n        ],\n    });\n\n    useEffect(() => {\n        const trigger = triggerRef?.current;\n\n        if (trigger) {\n            setMenuOpenerRef(trigger as HTMLElement);\n        }\n    }, [triggerRef]);\n\n    useEffect(() => {\n        setIsMenuOpen(open);\n        if (popperInstance.update && open) {\n            popperInstance.update();\n        }\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [open]);\n\n    useEffect(() => {\n        if (menuKeyboardNavigationAction === 'CLOSE_MENU' && menuOpenerRef) {\n            setIsMenuOpen(false);\n            if (onClose) {\n                onClose();\n            }\n        }\n    }, [menuKeyboardNavigationAction, onClose, menuOpenerRef]);\n\n    return (\n        <nav\n            className={merge([CONTAINER_CLASSES, isMenuOpen ? 'tw-block' : 'tw-hidden'])}\n            role={isMenuOpen ? 'dialog' : ''}\n            ref={setMenuContainerRef}\n            style={menuOpenerRef ? popperInstance.styles.popper : {}}\n            {...(menuOpenerRef ? popperInstance.attributes.popper : {})}\n            data-test-id=\"menu\"\n        >\n            <ol className=\"tw-list-none\" role=\"menu\">\n                {children}\n            </ol>\n        </nav>\n    );\n};\nMenu.displayName = 'FondueMenu';\n"],"names":["CONTAINER_BASE_CLASSES","CONTAINER_CLASSES","merge","INSET_BORDER","Menu","triggerRef","children","open","offset","onClose","isMenuOpen","setIsMenuOpen","useState","menuContainerRef","setMenuContainerRef","menuOpenerRef","setMenuOpenerRef","menuKeyboardNavigationAction","useMenuKeyboardNavigation","handleClickOutside","useCallback","useClickOutside","popperInstance","usePopper","useEffect","trigger","React"],"mappings":";;;;;;AAmBA,MAAMA,IAAyB,yEACzBC,IAAoBC,EAAM,CAACF,GAAwBG,CAAY,CAAC,GAEzDC,IAAO,CAAC,EAAE,YAAAC,GAAY,UAAAC,GAAU,MAAAC,IAAO,IAAM,QAAAC,IAAS,CAAC,GAAG,CAAC,GAAG,SAAAC,QAAyB;AAChG,QAAM,CAACC,GAAYC,CAAa,IAAIC,EAASL,CAAI,GAC3C,CAACM,GAAkBC,CAAmB,IAAIF,EAA6B,IAAI,GAC3E,CAACG,GAAeC,CAAgB,IAAIJ,EAA6B,IAAI,GAErEK,IAA+BC;AAAA,IACjCR;AAAA,IACAG;AAAA,IACA;AAAA,EAAA,GAGEM,IAAqBC,EAAY,MAAM;AACzC,IAAIL,KAAiBL,MACjBC,EAAc,EAAK,GACfF,KACQA;EAGjB,GAAA,CAACM,GAAeL,GAAYD,CAAO,CAAC;AAEvC,EAAAY,EAAgBR,GAAkBM,GAAoB,CAACJ,CAA4B,CAAC;AAE9E,QAAAO,IAAiBC,EAAUR,GAAeF,GAAkB;AAAA,IAC9D,WAAW;AAAA,IACX,UAAU;AAAA,IACV,WAAW;AAAA,MACP;AAAA,QACI,MAAM;AAAA,QACN,SAAS;AAAA,MACb;AAAA,MACA;AAAA,QACI,MAAM;AAAA,QACN,SAAS;AAAA,UACL,QAAAL;AAAA,QACJ;AAAA,MACJ;AAAA,IACJ;AAAA,EAAA,CACH;AAED,SAAAgB,EAAU,MAAM;AACZ,UAAMC,IAAUpB,KAAA,gBAAAA,EAAY;AAE5B,IAAIoB,KACAT,EAAiBS,CAAsB;AAAA,EAC3C,GACD,CAACpB,CAAU,CAAC,GAEfmB,EAAU,MAAM;AACZ,IAAAb,EAAcJ,CAAI,GACde,EAAe,UAAUf,KACzBe,EAAe,OAAO;AAAA,EAC1B,GAED,CAACf,CAAI,CAAC,GAETiB,EAAU,MAAM;AACR,IAAAP,MAAiC,gBAAgBF,MACjDJ,EAAc,EAAK,GACfF,KACQA;EAGjB,GAAA,CAACQ,GAA8BR,GAASM,CAAa,CAAC,GAGrD,gBAAAW,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAWxB,EAAM,CAACD,GAAmBS,IAAa,aAAa,WAAW,CAAC;AAAA,MAC3E,MAAMA,IAAa,WAAW;AAAA,MAC9B,KAAKI;AAAA,MACL,OAAOC,IAAgBO,EAAe,OAAO,SAAS,CAAC;AAAA,MACtD,GAAIP,IAAgBO,EAAe,WAAW,SAAS,CAAC;AAAA,MACzD,gBAAa;AAAA,IAAA;AAAA,oCAEZ,MAAG,EAAA,WAAU,gBAAe,MAAK,UAC7BhB,CACL;AAAA,EAAA;AAGZ;AACAF,EAAK,cAAc;"}