@chayns-components/core 5.4.13 → 5.4.14-alpha.0

package/lib/cjs/components/context-menu/context-menu-content/ContextMenuContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContextMenuContent.js","names":["_react","_interopRequireWildcard","require","_Icon","_interopRequireDefault","_ContextMenuContent","_ContextMenu","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ContextMenuContent","React","forwardRef","alignment","coordinates","items","zIndex","shouldHidePopupArrow","headline","onKeySelect","focusedIndex","onMouseEnter","onMouseLeave","ref","isBottomLeftAlignment","ContextMenuAlignment","BottomLeft","isTopLeftAlignment","TopLeft","isTopRightAlignment","TopRight","isTopCenterAlignment","TopCenter","isBottomCenterAlignment","BottomCenter","percentageOffsetX","useMemo","anchorOffsetX","percentageOffsetY","anchorOffsetY","exitAndInitialY","content","map","onClick","key","text","icons","shouldShowSpacer","index","isFocused","iconElement","isValidElement","Array","isArray","length","createElement","StyledContextMenuContentItemIconWrapper","StyledContextMenuContentItem","StyledContextMenuContentItemWrapper","event","preventDefault","stopPropagation","tabIndex","$shouldHidePopupArrow","$isFocused","onKeyDown","StyledContextMenuContentItemText","StyledContextMenuContentItemSpacer","StyledMotionContextMenuContent","animate","opacity","y","exit","initial","$position","$zIndex","style","left","x","top","transition","ease","transformTemplate","StyledContextMenuContentHeadline","displayName","_default","exports"],"sources":["../../../../../src/components/context-menu/context-menu-content/ContextMenuContent.tsx"],"sourcesContent":["import React, { isValidElement, useMemo } from 'react';\nimport Icon from '../../icon/Icon';\nimport {\n    StyledContextMenuContentHeadline,\n    StyledContextMenuContentItem,\n    StyledContextMenuContentItemIconWrapper,\n    StyledContextMenuContentItemSpacer,\n    StyledContextMenuContentItemText,\n    StyledContextMenuContentItemWrapper,\n    StyledMotionContextMenuContent,\n} from './ContextMenuContent.styles';\nimport {\n    ContextMenuAlignment,\n    type ContextMenuCoordinates,\n    type ContextMenuItem,\n} from '../ContextMenu.types';\n\ntype ContextMenuContentProps = {\n    alignment: ContextMenuAlignment;\n    coordinates: ContextMenuCoordinates;\n    items: ContextMenuItem[];\n    shouldHidePopupArrow: boolean;\n    headline?: string;\n    zIndex: number;\n    focusedIndex: number;\n    onKeySelect: (index: number) => void;\n    onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;\n    onMouseLeave?: React.MouseEventHandler<HTMLDivElement>;\n};\n\nconst ContextMenuContent = React.forwardRef<HTMLDivElement, ContextMenuContentProps>(\n    (\n        {\n            alignment,\n            coordinates,\n            items,\n            zIndex,\n            shouldHidePopupArrow,\n            headline,\n            onKeySelect,\n            focusedIndex,\n            onMouseEnter,\n            onMouseLeave,\n        },\n        ref,\n    ) => {\n        const isBottomLeftAlignment = alignment === ContextMenuAlignment.BottomLeft;\n        const isTopLeftAlignment = alignment === ContextMenuAlignment.TopLeft;\n        const isTopRightAlignment = alignment === ContextMenuAlignment.TopRight;\n        const isTopCenterAlignment = alignment === ContextMenuAlignment.TopCenter;\n        const isBottomCenterAlignment = alignment === ContextMenuAlignment.BottomCenter;\n\n        const percentageOffsetX = useMemo(() => {\n            if (isBottomLeftAlignment || isTopLeftAlignment) {\n                return -100;\n            }\n\n            if (isBottomCenterAlignment || isTopCenterAlignment) {\n                return -50;\n            }\n\n            return 0;\n        }, [\n            isBottomCenterAlignment,\n            isBottomLeftAlignment,\n            isTopCenterAlignment,\n            isTopLeftAlignment,\n        ]);\n\n        const anchorOffsetX = useMemo(() => {\n            if (isBottomLeftAlignment || isTopLeftAlignment) {\n                return 15;\n            }\n\n            if (isBottomCenterAlignment || isTopCenterAlignment) {\n                return 0;\n            }\n\n            return -15;\n        }, [\n            isBottomCenterAlignment,\n            isBottomLeftAlignment,\n            isTopCenterAlignment,\n            isTopLeftAlignment,\n        ]);\n\n        const percentageOffsetY =\n            isTopRightAlignment || isTopLeftAlignment || isTopCenterAlignment ? -100 : 0;\n\n        const anchorOffsetY =\n            isTopRightAlignment || isTopLeftAlignment || isTopCenterAlignment ? -21 : 21;\n\n        const exitAndInitialY = isTopLeftAlignment || isTopRightAlignment ? -16 : 16;\n\n        const content = useMemo(\n            () =>\n                items.map(({ onClick, key, text, icons, shouldShowSpacer }, index) => {\n                    const isFocused = index === focusedIndex;\n\n                    let iconElement = null;\n\n                    if (isValidElement(icons)) {\n                        iconElement = icons;\n                    } else if (Array.isArray(icons) && icons.length > 0) {\n                        iconElement = (\n                            <StyledContextMenuContentItemIconWrapper>\n                                <Icon icons={icons} />\n                            </StyledContextMenuContentItemIconWrapper>\n                        );\n                    }\n\n                    return (\n                        <StyledContextMenuContentItem\n                            key={`context-menu-item-${key}`}\n                            data-index={index}\n                        >\n                            <StyledContextMenuContentItemWrapper\n                                key={key}\n                                onClick={(event) => {\n                                    event.preventDefault();\n                                    event.stopPropagation();\n                                    void onClick(event);\n                                }}\n                                tabIndex={0}\n                                $shouldHidePopupArrow={shouldHidePopupArrow}\n                                $isFocused={isFocused}\n                                onKeyDown={(e) => {\n                                    if (e.key === 'Enter') {\n                                        e.preventDefault();\n                                        onKeySelect(index);\n                                    }\n                                }}\n                            >\n                                {iconElement}\n                                <StyledContextMenuContentItemText>\n                                    {text}\n                                </StyledContextMenuContentItemText>\n                            </StyledContextMenuContentItemWrapper>\n                            {shouldShowSpacer && <StyledContextMenuContentItemSpacer />}\n                        </StyledContextMenuContentItem>\n                    );\n                }),\n            [items, focusedIndex, shouldHidePopupArrow, onKeySelect],\n        );\n\n        return (\n            <StyledMotionContextMenuContent\n                animate={{ opacity: 1, y: 0 }}\n                exit={{ opacity: 0, y: exitAndInitialY }}\n                initial={{ opacity: 0, y: exitAndInitialY }}\n                $position={alignment}\n                $shouldHidePopupArrow={shouldHidePopupArrow}\n                $zIndex={zIndex}\n                ref={ref}\n                style={{ left: coordinates.x, top: coordinates.y }}\n                transition={{ ease: 'anticipate' }}\n                transformTemplate={({ y = '0px' }) => `\n                    translateX(${percentageOffsetX}%)\n                    translateY(${percentageOffsetY}%)\n                    translateX(${anchorOffsetX}px)\n                    translateY(${anchorOffsetY}px)\n                    translateY(${y})\n                `}\n                onMouseEnter={onMouseEnter}\n                onMouseLeave={onMouseLeave}\n            >\n                {headline && (\n                    <StyledContextMenuContentHeadline>{headline}</StyledContextMenuContentHeadline>\n                )}\n                {content}\n            </StyledMotionContextMenuContent>\n        );\n    },\n);\n\nContextMenuContent.displayName = 'ContextMenuContent';\n\nexport default ContextMenuContent;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ContextMenuContent.js","names":["_react","_interopRequireWildcard","require","_Icon","_interopRequireDefault","_ContextMenuContent","_ContextMenu","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ContextMenuContent","React","forwardRef","alignment","coordinates","items","zIndex","shouldHidePopupArrow","headline","onItemFocus","focusedIndex","onMouseEnter","onMouseLeave","ref","isBottomLeftAlignment","ContextMenuAlignment","BottomLeft","isTopLeftAlignment","TopLeft","isTopRightAlignment","TopRight","isTopCenterAlignment","TopCenter","isBottomCenterAlignment","BottomCenter","percentageOffsetX","useMemo","anchorOffsetX","percentageOffsetY","anchorOffsetY","exitAndInitialY","content","map","onClick","key","text","icons","shouldShowSpacer","index","isFocused","iconElement","isValidElement","Array","isArray","length","createElement","StyledContextMenuContentItemIconWrapper","StyledContextMenuContentItem","StyledContextMenuContentItemWrapper","event","preventDefault","stopPropagation","tabIndex","$shouldHidePopupArrow","$isFocused","onFocus","StyledContextMenuContentItemText","StyledContextMenuContentItemSpacer","StyledMotionContextMenuContent","animate","opacity","y","exit","initial","$position","$zIndex","style","left","x","top","transition","ease","transformTemplate","StyledContextMenuContentHeadline","displayName","_default","exports"],"sources":["../../../../../src/components/context-menu/context-menu-content/ContextMenuContent.tsx"],"sourcesContent":["import React, { isValidElement, useMemo } from 'react';\nimport Icon from '../../icon/Icon';\nimport {\n    StyledContextMenuContentHeadline,\n    StyledContextMenuContentItem,\n    StyledContextMenuContentItemIconWrapper,\n    StyledContextMenuContentItemSpacer,\n    StyledContextMenuContentItemText,\n    StyledContextMenuContentItemWrapper,\n    StyledMotionContextMenuContent,\n} from './ContextMenuContent.styles';\nimport {\n    ContextMenuAlignment,\n    type ContextMenuCoordinates,\n    type ContextMenuItem,\n} from '../ContextMenu.types';\n\ntype ContextMenuContentProps = {\n    alignment: ContextMenuAlignment;\n    coordinates: ContextMenuCoordinates;\n    items: ContextMenuItem[];\n    shouldHidePopupArrow: boolean;\n    headline?: string;\n    zIndex: number;\n    focusedIndex: number;\n    onItemFocus: (index: number) => void;\n    onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;\n    onMouseLeave?: React.MouseEventHandler<HTMLDivElement>;\n};\n\nconst ContextMenuContent = React.forwardRef<HTMLDivElement, ContextMenuContentProps>(\n    (\n        {\n            alignment,\n            coordinates,\n            items,\n            zIndex,\n            shouldHidePopupArrow,\n            headline,\n            onItemFocus,\n            focusedIndex,\n            onMouseEnter,\n            onMouseLeave,\n        },\n        ref,\n    ) => {\n        const isBottomLeftAlignment = alignment === ContextMenuAlignment.BottomLeft;\n        const isTopLeftAlignment = alignment === ContextMenuAlignment.TopLeft;\n        const isTopRightAlignment = alignment === ContextMenuAlignment.TopRight;\n        const isTopCenterAlignment = alignment === ContextMenuAlignment.TopCenter;\n        const isBottomCenterAlignment = alignment === ContextMenuAlignment.BottomCenter;\n\n        const percentageOffsetX = useMemo(() => {\n            if (isBottomLeftAlignment || isTopLeftAlignment) {\n                return -100;\n            }\n\n            if (isBottomCenterAlignment || isTopCenterAlignment) {\n                return -50;\n            }\n\n            return 0;\n        }, [\n            isBottomCenterAlignment,\n            isBottomLeftAlignment,\n            isTopCenterAlignment,\n            isTopLeftAlignment,\n        ]);\n\n        const anchorOffsetX = useMemo(() => {\n            if (isBottomLeftAlignment || isTopLeftAlignment) {\n                return 15;\n            }\n\n            if (isBottomCenterAlignment || isTopCenterAlignment) {\n                return 0;\n            }\n\n            return -15;\n        }, [\n            isBottomCenterAlignment,\n            isBottomLeftAlignment,\n            isTopCenterAlignment,\n            isTopLeftAlignment,\n        ]);\n\n        const percentageOffsetY =\n            isTopRightAlignment || isTopLeftAlignment || isTopCenterAlignment ? -100 : 0;\n\n        const anchorOffsetY =\n            isTopRightAlignment || isTopLeftAlignment || isTopCenterAlignment ? -21 : 21;\n\n        const exitAndInitialY = isTopLeftAlignment || isTopRightAlignment ? -16 : 16;\n\n        const content = useMemo(\n            () =>\n                items.map(({ onClick, key, text, icons, shouldShowSpacer }, index) => {\n                    const isFocused = index === focusedIndex;\n\n                    let iconElement = null;\n\n                    if (isValidElement(icons)) {\n                        iconElement = icons;\n                    } else if (Array.isArray(icons) && icons.length > 0) {\n                        iconElement = (\n                            <StyledContextMenuContentItemIconWrapper>\n                                <Icon icons={icons} />\n                            </StyledContextMenuContentItemIconWrapper>\n                        );\n                    }\n\n                    return (\n                        <StyledContextMenuContentItem\n                            key={`context-menu-item-${key}`}\n                            data-index={index}\n                        >\n                            <StyledContextMenuContentItemWrapper\n                                key={key}\n                                onClick={(event) => {\n                                    event.preventDefault();\n                                    event.stopPropagation();\n                                    void onClick(event);\n                                }}\n                                tabIndex={0}\n                                $shouldHidePopupArrow={shouldHidePopupArrow}\n                                $isFocused={isFocused}\n                                onFocus={() => onItemFocus(index)}\n                            >\n                                {iconElement}\n                                <StyledContextMenuContentItemText>\n                                    {text}\n                                </StyledContextMenuContentItemText>\n                            </StyledContextMenuContentItemWrapper>\n                            {shouldShowSpacer && <StyledContextMenuContentItemSpacer />}\n                        </StyledContextMenuContentItem>\n                    );\n                }),\n            [items, focusedIndex, shouldHidePopupArrow, onItemFocus],\n        );\n\n        return (\n            <StyledMotionContextMenuContent\n                animate={{ opacity: 1, y: 0 }}\n                exit={{ opacity: 0, y: exitAndInitialY }}\n                initial={{ opacity: 0, y: exitAndInitialY }}\n                $position={alignment}\n                $shouldHidePopupArrow={shouldHidePopupArrow}\n                $zIndex={zIndex}\n                ref={ref}\n                style={{ left: coordinates.x, top: coordinates.y }}\n                transition={{ ease: 'anticipate' }}\n                transformTemplate={({ y = '0px' }) => `\n                    translateX(${percentageOffsetX}%)\n                    translateY(${percentageOffsetY}%)\n                    translateX(${anchorOffsetX}px)\n                    translateY(${anchorOffsetY}px)\n                    translateY(${y})\n                `}\n                onMouseEnter={onMouseEnter}\n                onMouseLeave={onMouseLeave}\n            >\n                {headline && (\n                    <StyledContextMenuContentHeadline>{headline}</StyledContextMenuContentHeadline>\n                )}\n                {content}\n            </StyledMotionContextMenuContent>\n        );\n    },\n);\n\nContextMenuContent.displayName = 'ContextMenuContent';\n\nexport default ContextMenuContent;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,KAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,mBAAA,GAAAH,OAAA;AASA,IAAAI,YAAA,GAAAJ,OAAA;AAI8B,SAAAE,uBAAAG,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAAA,SAAAN,wBAAAM,CAAA,EAAAG,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAV,uBAAA,YAAAA,CAAAM,CAAA,EAAAG,CAAA,SAAAA,CAAA,IAAAH,CAAA,IAAAA,CAAA,CAAAC,UAAA,SAAAD,CAAA,MAAAO,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAR,OAAA,EAAAF,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAS,CAAA,MAAAF,CAAA,GAAAJ,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAE,CAAA,CAAAI,GAAA,CAAAX,CAAA,UAAAO,CAAA,CAAAK,GAAA,CAAAZ,CAAA,GAAAO,CAAA,CAAAM,GAAA,CAAAb,CAAA,EAAAS,CAAA,gBAAAN,CAAA,IAAAH,CAAA,gBAAAG,CAAA,OAAAW,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAG,CAAA,OAAAK,CAAA,IAAAD,CAAA,GAAAS,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAG,CAAA,OAAAK,CAAA,CAAAI,GAAA,IAAAJ,CAAA,CAAAK,GAAA,IAAAN,CAAA,CAAAE,CAAA,EAAAN,CAAA,EAAAK,CAAA,IAAAC,CAAA,CAAAN,CAAA,IAAAH,CAAA,CAAAG,CAAA,WAAAM,CAAA,KAAAT,CAAA,EAAAG,CAAA;AAe9B,MAAMgB,kBAAkB,gBAAGC,cAAK,CAACC,UAAU,CACvC,CACI;EACIC,SAAS;EACTC,WAAW;EACXC,KAAK;EACLC,MAAM;EACNC,oBAAoB;EACpBC,QAAQ;EACRC,WAAW;EACXC,YAAY;EACZC,YAAY;EACZC;AACJ,CAAC,EACDC,GAAG,KACF;EACD,MAAMC,qBAAqB,GAAGX,SAAS,KAAKY,iCAAoB,CAACC,UAAU;EAC3E,MAAMC,kBAAkB,GAAGd,SAAS,KAAKY,iCAAoB,CAACG,OAAO;EACrE,MAAMC,mBAAmB,GAAGhB,SAAS,KAAKY,iCAAoB,CAACK,QAAQ;EACvE,MAAMC,oBAAoB,GAAGlB,SAAS,KAAKY,iCAAoB,CAACO,SAAS;EACzE,MAAMC,uBAAuB,GAAGpB,SAAS,KAAKY,iCAAoB,CAACS,YAAY;EAE/E,MAAMC,iBAAiB,GAAG,IAAAC,cAAO,EAAC,MAAM;IACpC,IAAIZ,qBAAqB,IAAIG,kBAAkB,EAAE;MAC7C,OAAO,CAAC,GAAG;IACf;IAEA,IAAIM,uBAAuB,IAAIF,oBAAoB,EAAE;MACjD,OAAO,CAAC,EAAE;IACd;IAEA,OAAO,CAAC;EACZ,CAAC,EAAE,CACCE,uBAAuB,EACvBT,qBAAqB,EACrBO,oBAAoB,EACpBJ,kBAAkB,CACrB,CAAC;EAEF,MAAMU,aAAa,GAAG,IAAAD,cAAO,EAAC,MAAM;IAChC,IAAIZ,qBAAqB,IAAIG,kBAAkB,EAAE;MAC7C,OAAO,EAAE;IACb;IAEA,IAAIM,uBAAuB,IAAIF,oBAAoB,EAAE;MACjD,OAAO,CAAC;IACZ;IAEA,OAAO,CAAC,EAAE;EACd,CAAC,EAAE,CACCE,uBAAuB,EACvBT,qBAAqB,EACrBO,oBAAoB,EACpBJ,kBAAkB,CACrB,CAAC;EAEF,MAAMW,iBAAiB,GACnBT,mBAAmB,IAAIF,kBAAkB,IAAII,oBAAoB,GAAG,CAAC,GAAG,GAAG,CAAC;EAEhF,MAAMQ,aAAa,GACfV,mBAAmB,IAAIF,kBAAkB,IAAII,oBAAoB,GAAG,CAAC,EAAE,GAAG,EAAE;EAEhF,MAAMS,eAAe,GAAGb,kBAAkB,IAAIE,mBAAmB,GAAG,CAAC,EAAE,GAAG,EAAE;EAE5E,MAAMY,OAAO,GAAG,IAAAL,cAAO,EACnB,MACIrB,KAAK,CAAC2B,GAAG,CAAC,CAAC;IAAEC,OAAO;IAAEC,GAAG;IAAEC,IAAI;IAAEC,KAAK;IAAEC;EAAiB,CAAC,EAAEC,KAAK,KAAK;IAClE,MAAMC,SAAS,GAAGD,KAAK,KAAK5B,YAAY;IAExC,IAAI8B,WAAW,GAAG,IAAI;IAEtB,iBAAI,IAAAC,qBAAc,EAACL,KAAK,CAAC,EAAE;MACvBI,WAAW,GAAGJ,KAAK;IACvB,CAAC,MAAM,IAAIM,KAAK,CAACC,OAAO,CAACP,KAAK,CAAC,IAAIA,KAAK,CAACQ,MAAM,GAAG,CAAC,EAAE;MACjDJ,WAAW,gBACPlE,MAAA,CAAAS,OAAA,CAAA8D,aAAA,CAAClE,mBAAA,CAAAmE,uCAAuC,qBACpCxE,MAAA,CAAAS,OAAA,CAAA8D,aAAA,CAACpE,KAAA,CAAAM,OAAI;QAACqD,KAAK,EAAEA;MAAM,CAAE,CACgB,CAC5C;IACL;IAEA,oBACI9D,MAAA,CAAAS,OAAA,CAAA8D,aAAA,CAAClE,mBAAA,CAAAoE,4BAA4B;MACzBb,GAAG,EAAE,qBAAqBA,GAAG,EAAG;MAChC,cAAYI;IAAM,gBAElBhE,MAAA,CAAAS,OAAA,CAAA8D,aAAA,CAAClE,mBAAA,CAAAqE,mCAAmC;MAChCd,GAAG,EAAEA,GAAI;MACTD,OAAO,EAAGgB,KAAK,IAAK;QAChBA,KAAK,CAACC,cAAc,CAAC,CAAC;QACtBD,KAAK,CAACE,eAAe,CAAC,CAAC;QACvB,KAAKlB,OAAO,CAACgB,KAAK,CAAC;MACvB,CAAE;MACFG,QAAQ,EAAE,CAAE;MACZC,qBAAqB,EAAE9C,oBAAqB;MAC5C+C,UAAU,EAAEf,SAAU;MACtBgB,OAAO,EAAEA,CAAA,KAAM9C,WAAW,CAAC6B,KAAK;IAAE,GAEjCE,WAAW,eACZlE,MAAA,CAAAS,OAAA,CAAA8D,aAAA,CAAClE,mBAAA,CAAA6E,gCAAgC,QAC5BrB,IAC6B,CACD,CAAC,EACrCE,gBAAgB,iBAAI/D,MAAA,CAAAS,OAAA,CAAA8D,aAAA,CAAClE,mBAAA,CAAA8E,kCAAkC,MAAE,CAChC,CAAC;EAEvC,CAAC,CAAC,EACN,CAACpD,KAAK,EAAEK,YAAY,EAAEH,oBAAoB,EAAEE,WAAW,CAC3D,CAAC;EAED,oBACInC,MAAA,CAAAS,OAAA,CAAA8D,aAAA,CAAClE,mBAAA,CAAA+E,8BAA8B;IAC3BC,OAAO,EAAE;MAAEC,OAAO,EAAE,CAAC;MAAEC,CAAC,EAAE;IAAE,CAAE;IAC9BC,IAAI,EAAE;MAAEF,OAAO,EAAE,CAAC;MAAEC,CAAC,EAAE/B;IAAgB,CAAE;IACzCiC,OAAO,EAAE;MAAEH,OAAO,EAAE,CAAC;MAAEC,CAAC,EAAE/B;IAAgB,CAAE;IAC5CkC,SAAS,EAAE7D,SAAU;IACrBkD,qBAAqB,EAAE9C,oBAAqB;IAC5C0D,OAAO,EAAE3D,MAAO;IAChBO,GAAG,EAAEA,GAAI;IACTqD,KAAK,EAAE;MAAEC,IAAI,EAAE/D,WAAW,CAACgE,CAAC;MAAEC,GAAG,EAAEjE,WAAW,CAACyD;IAAE,CAAE;IACnDS,UAAU,EAAE;MAAEC,IAAI,EAAE;IAAa,CAAE;IACnCC,iBAAiB,EAAEA,CAAC;MAAEX,CAAC,GAAG;IAAM,CAAC,KAAK;AACtD,iCAAiCpC,iBAAiB;AAClD,iCAAiCG,iBAAiB;AAClD,iCAAiCD,aAAa;AAC9C,iCAAiCE,aAAa;AAC9C,iCAAiCgC,CAAC;AAClC,iBAAkB;IACFlD,YAAY,EAAEA,YAAa;IAC3BC,YAAY,EAAEA;EAAa,GAE1BJ,QAAQ,iBACLlC,MAAA,CAAAS,OAAA,CAAA8D,aAAA,CAAClE,mBAAA,CAAA8F,gCAAgC,QAAEjE,QAA2C,CACjF,EACAuB,OAC2B,CAAC;AAEzC,CACJ,CAAC;AAED/B,kBAAkB,CAAC0E,WAAW,GAAG,oBAAoB;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAA7F,OAAA,GAEvCiB,kBAAkB","ignoreList":[]}

package/lib/cjs/components/file-input/FileInput.js

@@ -27,7 +27,8 @@ const FileInput = /*#__PURE__*/(0, _react.forwardRef)(({
   fileSelectionPlaceholder = 'Dateien hochladen',
   imageSelectPlaceholder,
   shouldPreventImageUpload = false,
-  shouldAllowDownload
+  shouldAllowDownload,
+  shouldEnableKeyboardHighlighting
 }, ref) => {
   const [internalFiles, setInternalFiles] = (0, _react.useState)([]);
   const [internalImages, setInternalImages] = (0, _react.useState)([]);
@@ -162,6 +163,7 @@ const FileInput = /*#__PURE__*/(0, _react.forwardRef)(({
   }, [files, internalFiles, internalImages]);
   return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_FileInput.StyledFileInput, null, /*#__PURE__*/_react.default.createElement(_FileSelect.default, {
     shouldPreventImageUpload: shouldPreventImageUpload,
+    shouldEnableKeyboardHighlighting: shouldEnableKeyboardHighlighting,
     maxFiles: maxFiles,
     fileTypes: fileTypes,
     fileSelectionIcons: fileSelectionIcons,
@@ -175,7 +177,7 @@ const FileInput = /*#__PURE__*/(0, _react.forwardRef)(({
     files: filesToDisplay,
     onRemove: handleDeleteFile,
     shouldAllowDownload: shouldAllowDownload
-  })), [shouldPreventImageUpload, maxFiles, fileTypes, fileSelectionIcons, fileSelectionPlaceholder, imageSelectIcons, imageSelectPlaceholder, maxFileSizeInMB, internalIsDisabled, handleAdd, filesToDisplay, handleDeleteFile, shouldAllowDownload]);
+  })), [shouldPreventImageUpload, shouldEnableKeyboardHighlighting, maxFiles, fileTypes, fileSelectionIcons, fileSelectionPlaceholder, imageSelectIcons, imageSelectPlaceholder, maxFileSizeInMB, internalIsDisabled, handleAdd, filesToDisplay, handleDeleteFile, shouldAllowDownload]);
 });
 FileInput.displayName = 'FileInput';
 var _default = exports.default = FileInput;

package/lib/cjs/components/file-input/FileInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileInput.js","names":["_react","_interopRequireWildcard","require","_file","_FileInput","_FileList","_interopRequireDefault","_FileSelect","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","TSIMG_FILE_TYPES","exports","STREAMINGSERVICE_FILE_TYPES","FileInput","forwardRef","fileSelectionIcons","imageSelectIcons","fileTypes","onMaxFilesReached","maxFiles","onRemove","files","isDisabled","maxFileSizeInMB","onAdd","fileSelectionPlaceholder","imageSelectPlaceholder","shouldPreventImageUpload","shouldAllowDownload","ref","internalFiles","setInternalFiles","useState","internalImages","setInternalImages","handleInputClear","useImperativeHandle","clear","handleAddImages","useCallback","images","newImages","forEach","image","filterDuplicateFileUrls","newFile","push","tmp","slice","length","prevState","handleAddFiles","newFiles","newFileItems","file","isValidFileType","types","filterDuplicateFile","handleAdd","Array","isArray","handleDeleteFile","id","fileToDelete","filteredFiles","filter","name","filteredImages","internalIsDisabled","useMemo","filesToDisplay","items","map","size","mimeType","type","source","url","createElement","StyledFileInput","displayName","_default"],"sources":["../../../../src/components/file-input/FileInput.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useImperativeHandle, useMemo, useState } from 'react';\nimport { filterDuplicateFile, filterDuplicateFileUrls, isValidFileType } from '../../utils/file';\nimport { StyledFileInput } from './FileInput.styles';\nimport FileList, { IFileItem } from '../file-list/FileList';\nimport FileSelect, { UploadedFile } from '../file-select/FileSelect';\n\nexport const TSIMG_FILE_TYPES =\n    'image/png, image/jpg, image/jpeg, image/gif, image/webp, image/svg+xml, image/avif';\n\nexport const STREAMINGSERVICE_FILE_TYPES =\n    'video/mp4, video/webm, video/avi, video/flv, video/wmv, video/mpg, video/quicktime';\n\nexport type FileInputProps = {\n    /**\n     * Already uploaded files to display.\n     */\n    files?: IFileItem[];\n    /**\n     * An array of icons that should be displayed inside the FileInput\n     */\n    fileSelectionIcons?: string[];\n    /**\n     * The text that should be displayed inside the FileInput.\n     */\n    fileSelectionPlaceholder?: string;\n    /**\n     * The filetypes that could be selected. Example for multiple types: 'image/*, video/*'.\n     */\n    fileTypes?: string;\n    /**\n     * The icon of the image selection.\n     */\n    imageSelectIcons?: string[];\n    /**\n     * If set, pictures can be select via Pixabay.\n     */\n    imageSelectPlaceholder?: string;\n    /**\n     * Whether the FileInput is disabled.\n     */\n    isDisabled?: boolean;\n    /**\n     * The maximum amount of Files that can be uploaded.\n     */\n    maxFiles?: number;\n    /**\n     * The maximum size of a file in MB.\n     */\n    maxFileSizeInMB?: number;\n    /**\n     * A function to be executed when files are added.\n     */\n    onAdd?: (files: File[] | UploadedFile[]) => void;\n    /**\n     * Function to be executed when the maximum amount of Files are reached.\n     */\n    onMaxFilesReached?: () => void;\n    /**\n     * A function to be executed when a file is removed.\n     */\n    onRemove?: (file: File | IFileItem | UploadedFile) => void;\n    /**\n     * Whether the image upload should be prevented.\n     */\n    shouldPreventImageUpload?: boolean;\n    /**\n     * Whether to show a download icon for files that have a `source` set.\n     */\n    shouldAllowDownload?: boolean;\n};\n\nexport type FileInputRef = {\n    clear: () => void;\n};\n\nconst FileInput = forwardRef<FileInputRef, FileInputProps>(\n    (\n        {\n            fileSelectionIcons = ['fa fa-upload'],\n            imageSelectIcons = ['ts-image'],\n            fileTypes,\n            onMaxFilesReached,\n            maxFiles,\n            onRemove,\n            files,\n            isDisabled,\n            maxFileSizeInMB,\n            onAdd,\n            fileSelectionPlaceholder = 'Dateien hochladen',\n            imageSelectPlaceholder,\n            shouldPreventImageUpload = false,\n            shouldAllowDownload,\n        },\n        ref,\n    ) => {\n        const [internalFiles, setInternalFiles] = useState<File[]>([]);\n        const [internalImages, setInternalImages] = useState<UploadedFile[]>([]);\n\n        const handleInputClear = () => {\n            setInternalFiles([]);\n            setInternalImages([]);\n        };\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                clear: handleInputClear,\n            }),\n            [],\n        );\n\n        const handleAddImages = useCallback(\n            (images: UploadedFile[]) => {\n                const newImages: UploadedFile[] = [];\n\n                images.forEach((image) => {\n                    if (!filterDuplicateFileUrls({ files: internalImages, newFile: image })) {\n                        newImages.push(image);\n                    }\n                });\n\n                let tmp = newImages;\n\n                if (maxFiles) {\n                    tmp = newImages.slice(\n                        0,\n                        maxFiles -\n                            (internalFiles.length + internalImages.length + (files?.length ?? 0)),\n                    );\n                }\n\n                if (tmp.length > 0 && typeof onAdd === 'function') {\n                    onAdd(tmp);\n                }\n\n                setInternalImages((prevState) => [...prevState, ...tmp]);\n            },\n            [files?.length, internalFiles.length, internalImages, maxFiles, onAdd],\n        );\n\n        const handleAddFiles = useCallback(\n            (newFiles: File[]) => {\n                const newFileItems: File[] = [];\n\n                newFiles.forEach((file) => {\n                    if (fileTypes && !isValidFileType({ file, types: fileTypes })) {\n                        return;\n                    }\n\n                    if (file && !filterDuplicateFile({ files: internalFiles, newFile: file })) {\n                        newFileItems.push(file);\n                    }\n                });\n\n                let tmp = newFileItems;\n\n                if (maxFiles) {\n                    tmp = newFileItems.slice(\n                        0,\n                        maxFiles - (internalFiles.length + (files?.length ?? 0)),\n                    );\n                }\n\n                if (tmp.length > 0 && typeof onAdd === 'function') {\n                    onAdd(tmp);\n                }\n\n                setInternalFiles((prevState) => [...prevState, ...tmp]);\n            },\n            [fileTypes, files?.length, internalFiles, maxFiles, onAdd],\n        );\n\n        const handleAdd = useCallback(\n            (newFiles: File[] | UploadedFile[]) => {\n                if (Array.isArray(newFiles) && newFiles.length > 0) {\n                    if (newFiles[0] && 'url' in newFiles[0]) {\n                        handleAddImages(newFiles as UploadedFile[]);\n                    } else {\n                        handleAddFiles(newFiles as File[]);\n                    }\n                }\n            },\n            [handleAddFiles, handleAddImages],\n        );\n\n        const handleDeleteFile = useCallback(\n            (id: string) => {\n                let fileToDelete: File | IFileItem | UploadedFile | undefined;\n\n                const filteredFiles = internalFiles.filter((file) => {\n                    const { name } = file;\n\n                    if (name === id) {\n                        fileToDelete = file;\n                    }\n\n                    return name !== id;\n                });\n\n                setInternalFiles(filteredFiles);\n\n                if (!fileToDelete) {\n                    const filteredImages = internalImages.filter((image) => {\n                        if (image.name === id) {\n                            fileToDelete = image;\n                        }\n\n                        return image.name !== id;\n                    });\n\n                    setInternalImages(filteredImages);\n                }\n\n                if (!fileToDelete) {\n                    files?.forEach((file) => {\n                        if (file.id === id || file.name === id) {\n                            fileToDelete = file;\n                        }\n                    });\n                }\n\n                if (!fileToDelete || typeof onRemove !== 'function') {\n                    return;\n                }\n\n                onRemove(fileToDelete);\n            },\n            [files, internalFiles, internalImages, onRemove],\n        );\n\n        const internalIsDisabled = useMemo(() => {\n            if (isDisabled) {\n                return true;\n            }\n\n            if (maxFiles) {\n                if (internalFiles.length + internalImages.length >= maxFiles) {\n                    if (typeof onMaxFilesReached === 'function') {\n                        onMaxFilesReached();\n                    }\n\n                    return true;\n                }\n            }\n\n            return false;\n        }, [internalFiles.length, internalImages.length, isDisabled, maxFiles, onMaxFilesReached]);\n\n        const filesToDisplay: IFileItem[] = useMemo(() => {\n            const items: IFileItem[] = internalFiles.map((file) => ({\n                id: file.name,\n                name: file.name,\n                size: file.size,\n                mimeType: file.type,\n                source: file,\n            }));\n\n            internalImages.forEach((image) => {\n                items.push({\n                    id: image.name ?? image.url,\n                    name: image.name ?? image.url,\n                    size: image.size ?? 0,\n                    mimeType: 'image/png',\n                    source: image.url,\n                });\n            });\n\n            files?.forEach((file) => {\n                items.push(file);\n            });\n\n            return items;\n        }, [files, internalFiles, internalImages]);\n\n        return useMemo(\n            () => (\n                <StyledFileInput>\n                    <FileSelect\n                        shouldPreventImageUpload={shouldPreventImageUpload}\n                        maxFiles={maxFiles}\n                        fileTypes={fileTypes}\n                        fileSelectionIcons={fileSelectionIcons}\n                        fileSelectionPlaceholder={fileSelectionPlaceholder}\n                        imageSelectIcons={imageSelectIcons}\n                        imageSelectPlaceholder={imageSelectPlaceholder}\n                        maxFileSizeInMB={maxFileSizeInMB}\n                        isDisabled={internalIsDisabled}\n                        onAdd={handleAdd}\n                    />\n                    <FileList\n                        files={filesToDisplay}\n                        onRemove={handleDeleteFile}\n                        shouldAllowDownload={shouldAllowDownload}\n                    />\n                </StyledFileInput>\n            ),\n            [\n                shouldPreventImageUpload,\n                maxFiles,\n                fileTypes,\n                fileSelectionIcons,\n                fileSelectionPlaceholder,\n                imageSelectIcons,\n                imageSelectPlaceholder,\n                maxFileSizeInMB,\n                internalIsDisabled,\n                handleAdd,\n                filesToDisplay,\n                handleDeleteFile,\n                shouldAllowDownload,\n            ],\n        );\n    },\n);\n\nFileInput.displayName = 'FileInput';\n\nexport default FileInput;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"FileInput.js","names":["_react","_interopRequireWildcard","require","_file","_FileInput","_FileList","_interopRequireDefault","_FileSelect","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","TSIMG_FILE_TYPES","exports","STREAMINGSERVICE_FILE_TYPES","FileInput","forwardRef","fileSelectionIcons","imageSelectIcons","fileTypes","onMaxFilesReached","maxFiles","onRemove","files","isDisabled","maxFileSizeInMB","onAdd","fileSelectionPlaceholder","imageSelectPlaceholder","shouldPreventImageUpload","shouldAllowDownload","shouldEnableKeyboardHighlighting","ref","internalFiles","setInternalFiles","useState","internalImages","setInternalImages","handleInputClear","useImperativeHandle","clear","handleAddImages","useCallback","images","newImages","forEach","image","filterDuplicateFileUrls","newFile","push","tmp","slice","length","prevState","handleAddFiles","newFiles","newFileItems","file","isValidFileType","types","filterDuplicateFile","handleAdd","Array","isArray","handleDeleteFile","id","fileToDelete","filteredFiles","filter","name","filteredImages","internalIsDisabled","useMemo","filesToDisplay","items","map","size","mimeType","type","source","url","createElement","StyledFileInput","displayName","_default"],"sources":["../../../../src/components/file-input/FileInput.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useImperativeHandle, useMemo, useState } from 'react';\nimport { filterDuplicateFile, filterDuplicateFileUrls, isValidFileType } from '../../utils/file';\nimport { StyledFileInput } from './FileInput.styles';\nimport FileList, { IFileItem } from '../file-list/FileList';\nimport FileSelect, { UploadedFile } from '../file-select/FileSelect';\n\nexport const TSIMG_FILE_TYPES =\n    'image/png, image/jpg, image/jpeg, image/gif, image/webp, image/svg+xml, image/avif';\n\nexport const STREAMINGSERVICE_FILE_TYPES =\n    'video/mp4, video/webm, video/avi, video/flv, video/wmv, video/mpg, video/quicktime';\n\nexport type FileInputProps = {\n    /**\n     * Already uploaded files to display.\n     */\n    files?: IFileItem[];\n    /**\n     * An array of icons that should be displayed inside the FileInput\n     */\n    fileSelectionIcons?: string[];\n    /**\n     * The text that should be displayed inside the FileInput.\n     */\n    fileSelectionPlaceholder?: string;\n    /**\n     * The filetypes that could be selected. Example for multiple types: 'image/*, video/*'.\n     */\n    fileTypes?: string;\n    /**\n     * The icon of the image selection.\n     */\n    imageSelectIcons?: string[];\n    /**\n     * If set, pictures can be select via Pixabay.\n     */\n    imageSelectPlaceholder?: string;\n    /**\n     * Whether the FileInput is disabled.\n     */\n    isDisabled?: boolean;\n    /**\n     * The maximum amount of Files that can be uploaded.\n     */\n    maxFiles?: number;\n    /**\n     * The maximum size of a file in MB.\n     */\n    maxFileSizeInMB?: number;\n    /**\n     * A function to be executed when files are added.\n     */\n    onAdd?: (files: File[] | UploadedFile[]) => void;\n    /**\n     * Function to be executed when the maximum amount of Files are reached.\n     */\n    onMaxFilesReached?: () => void;\n    /**\n     * A function to be executed when a file is removed.\n     */\n    onRemove?: (file: File | IFileItem | UploadedFile) => void;\n    /**\n     * Whether the image upload should be prevented.\n     */\n    shouldPreventImageUpload?: boolean;\n    /**\n     * Whether to show a download icon for files that have a `source` set.\n     */\n    shouldAllowDownload?: boolean;\n    /**\n     * Enables keyboard-only focus highlighting for the file selection trigger.\n     */\n    shouldEnableKeyboardHighlighting?: boolean;\n};\n\nexport type FileInputRef = {\n    clear: () => void;\n};\n\nconst FileInput = forwardRef<FileInputRef, FileInputProps>(\n    (\n        {\n            fileSelectionIcons = ['fa fa-upload'],\n            imageSelectIcons = ['ts-image'],\n            fileTypes,\n            onMaxFilesReached,\n            maxFiles,\n            onRemove,\n            files,\n            isDisabled,\n            maxFileSizeInMB,\n            onAdd,\n            fileSelectionPlaceholder = 'Dateien hochladen',\n            imageSelectPlaceholder,\n            shouldPreventImageUpload = false,\n            shouldAllowDownload,\n            shouldEnableKeyboardHighlighting,\n        },\n        ref,\n    ) => {\n        const [internalFiles, setInternalFiles] = useState<File[]>([]);\n        const [internalImages, setInternalImages] = useState<UploadedFile[]>([]);\n\n        const handleInputClear = () => {\n            setInternalFiles([]);\n            setInternalImages([]);\n        };\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                clear: handleInputClear,\n            }),\n            [],\n        );\n\n        const handleAddImages = useCallback(\n            (images: UploadedFile[]) => {\n                const newImages: UploadedFile[] = [];\n\n                images.forEach((image) => {\n                    if (!filterDuplicateFileUrls({ files: internalImages, newFile: image })) {\n                        newImages.push(image);\n                    }\n                });\n\n                let tmp = newImages;\n\n                if (maxFiles) {\n                    tmp = newImages.slice(\n                        0,\n                        maxFiles -\n                            (internalFiles.length + internalImages.length + (files?.length ?? 0)),\n                    );\n                }\n\n                if (tmp.length > 0 && typeof onAdd === 'function') {\n                    onAdd(tmp);\n                }\n\n                setInternalImages((prevState) => [...prevState, ...tmp]);\n            },\n            [files?.length, internalFiles.length, internalImages, maxFiles, onAdd],\n        );\n\n        const handleAddFiles = useCallback(\n            (newFiles: File[]) => {\n                const newFileItems: File[] = [];\n\n                newFiles.forEach((file) => {\n                    if (fileTypes && !isValidFileType({ file, types: fileTypes })) {\n                        return;\n                    }\n\n                    if (file && !filterDuplicateFile({ files: internalFiles, newFile: file })) {\n                        newFileItems.push(file);\n                    }\n                });\n\n                let tmp = newFileItems;\n\n                if (maxFiles) {\n                    tmp = newFileItems.slice(\n                        0,\n                        maxFiles - (internalFiles.length + (files?.length ?? 0)),\n                    );\n                }\n\n                if (tmp.length > 0 && typeof onAdd === 'function') {\n                    onAdd(tmp);\n                }\n\n                setInternalFiles((prevState) => [...prevState, ...tmp]);\n            },\n            [fileTypes, files?.length, internalFiles, maxFiles, onAdd],\n        );\n\n        const handleAdd = useCallback(\n            (newFiles: File[] | UploadedFile[]) => {\n                if (Array.isArray(newFiles) && newFiles.length > 0) {\n                    if (newFiles[0] && 'url' in newFiles[0]) {\n                        handleAddImages(newFiles as UploadedFile[]);\n                    } else {\n                        handleAddFiles(newFiles as File[]);\n                    }\n                }\n            },\n            [handleAddFiles, handleAddImages],\n        );\n\n        const handleDeleteFile = useCallback(\n            (id: string) => {\n                let fileToDelete: File | IFileItem | UploadedFile | undefined;\n\n                const filteredFiles = internalFiles.filter((file) => {\n                    const { name } = file;\n\n                    if (name === id) {\n                        fileToDelete = file;\n                    }\n\n                    return name !== id;\n                });\n\n                setInternalFiles(filteredFiles);\n\n                if (!fileToDelete) {\n                    const filteredImages = internalImages.filter((image) => {\n                        if (image.name === id) {\n                            fileToDelete = image;\n                        }\n\n                        return image.name !== id;\n                    });\n\n                    setInternalImages(filteredImages);\n                }\n\n                if (!fileToDelete) {\n                    files?.forEach((file) => {\n                        if (file.id === id || file.name === id) {\n                            fileToDelete = file;\n                        }\n                    });\n                }\n\n                if (!fileToDelete || typeof onRemove !== 'function') {\n                    return;\n                }\n\n                onRemove(fileToDelete);\n            },\n            [files, internalFiles, internalImages, onRemove],\n        );\n\n        const internalIsDisabled = useMemo(() => {\n            if (isDisabled) {\n                return true;\n            }\n\n            if (maxFiles) {\n                if (internalFiles.length + internalImages.length >= maxFiles) {\n                    if (typeof onMaxFilesReached === 'function') {\n                        onMaxFilesReached();\n                    }\n\n                    return true;\n                }\n            }\n\n            return false;\n        }, [internalFiles.length, internalImages.length, isDisabled, maxFiles, onMaxFilesReached]);\n\n        const filesToDisplay: IFileItem[] = useMemo(() => {\n            const items: IFileItem[] = internalFiles.map((file) => ({\n                id: file.name,\n                name: file.name,\n                size: file.size,\n                mimeType: file.type,\n                source: file,\n            }));\n\n            internalImages.forEach((image) => {\n                items.push({\n                    id: image.name ?? image.url,\n                    name: image.name ?? image.url,\n                    size: image.size ?? 0,\n                    mimeType: 'image/png',\n                    source: image.url,\n                });\n            });\n\n            files?.forEach((file) => {\n                items.push(file);\n            });\n\n            return items;\n        }, [files, internalFiles, internalImages]);\n\n        return useMemo(\n            () => (\n                <StyledFileInput>\n                    <FileSelect\n                        shouldPreventImageUpload={shouldPreventImageUpload}\n                        shouldEnableKeyboardHighlighting={shouldEnableKeyboardHighlighting}\n                        maxFiles={maxFiles}\n                        fileTypes={fileTypes}\n                        fileSelectionIcons={fileSelectionIcons}\n                        fileSelectionPlaceholder={fileSelectionPlaceholder}\n                        imageSelectIcons={imageSelectIcons}\n                        imageSelectPlaceholder={imageSelectPlaceholder}\n                        maxFileSizeInMB={maxFileSizeInMB}\n                        isDisabled={internalIsDisabled}\n                        onAdd={handleAdd}\n                    />\n                    <FileList\n                        files={filesToDisplay}\n                        onRemove={handleDeleteFile}\n                        shouldAllowDownload={shouldAllowDownload}\n                    />\n                </StyledFileInput>\n            ),\n            [\n                shouldPreventImageUpload,\n                shouldEnableKeyboardHighlighting,\n                maxFiles,\n                fileTypes,\n                fileSelectionIcons,\n                fileSelectionPlaceholder,\n                imageSelectIcons,\n                imageSelectPlaceholder,\n                maxFileSizeInMB,\n                internalIsDisabled,\n                handleAdd,\n                filesToDisplay,\n                handleDeleteFile,\n                shouldAllowDownload,\n            ],\n        );\n    },\n);\n\nFileInput.displayName = 'FileInput';\n\nexport default FileInput;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/file-list/file-item/FileItem.js

@@ -12,6 +12,7 @@ var _ListItem = _interopRequireDefault(require("../../list/list-item/ListItem"))
 var _FileItem = require("./FileItem.styles");
 var _textstring = require("@chayns-components/textstring");
 var _textStrings = _interopRequireDefault(require("../../../constants/textStrings"));
+var _useKeyboardFocusHighlighting = require("../../../hooks/useKeyboardFocusHighlighting");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const FileItem = ({
@@ -23,6 +24,27 @@ const FileItem = ({
   source,
   shouldAllowDownload
 }) => {
+  const canDownload = shouldAllowDownload && !!source;
+  const canRemove = typeof onRemove === 'function';
+  const shouldShowKeyboardHighlighting = (0, _useKeyboardFocusHighlighting.useKeyboardFocusHighlighting)(canRemove || !!canDownload);
+  const handleRemove = (0, _react.useCallback)(() => {
+    if (canRemove) {
+      onRemove(id);
+    }
+  }, [id, onRemove]);
+  const handleItemKeyDown = (0, _react.useCallback)(event => {
+    if (event.key === 'Delete') {
+      event.preventDefault();
+      handleRemove();
+    }
+  }, [handleRemove]);
+  const handleRemoveKeyDown = (0, _react.useCallback)(event => {
+    if (canRemove && (event.key === 'Enter' || event.key === ' ')) {
+      event.preventDefault();
+      event.stopPropagation();
+      handleRemove();
+    }
+  }, [handleRemove]);
   const humanFileSize = (0, _react.useMemo)(() => {
     if (typeof size === 'number') {
       return (0, _file.getHumanSize)(size);
@@ -69,8 +91,6 @@ const FileItem = ({
       });
     }
   }, [name, source]);
-  const canDownload = shouldAllowDownload && !!source;
-  const canRemove = typeof onRemove === 'function';
   const downloadText = (0, _textstring.useTextstringValue)({
     textstring: (0, _textstring.ttsToITextString)(_textStrings.default.components.fileItem.download)
   });
@@ -78,6 +98,7 @@ const FileItem = ({
     textstring: (0, _textstring.ttsToITextString)(_textStrings.default.components.fileItem.remove)
   });
   const rightElement = (0, _react.useMemo)(() => {
+    if (!canDownload && !canRemove) return undefined;
     // Both actions available → show as ContextMenu
     if (canDownload && canRemove) {
       const items = [{
@@ -95,32 +116,34 @@ const FileItem = ({
         items: items
       });
     }
-
-    // Only download
-    if (canDownload) {
-      return /*#__PURE__*/_react.default.createElement(_FileItem.StyledFileItemIcon, {
-        onClick: handleDownload
-      }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
-        icons: ['fa fa-download']
-      }));
-    }
-
-    // Only remove
-    if (canRemove) {
-      return /*#__PURE__*/_react.default.createElement(_FileItem.StyledFileItemIcon, {
-        onClick: () => onRemove(id)
-      }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
-        icons: ['ts-wrong']
-      }));
-    }
-    return undefined;
-  }, [canDownload, canRemove, downloadText, handleDownload, id, onRemove, removeText]);
-  return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_FileItem.StyledFileItem, null, /*#__PURE__*/_react.default.createElement(_ListItem.default, {
+    const handleClick = () => {
+      if (canRemove) {
+        onRemove(id);
+        return;
+      }
+      handleDownload();
+    };
+    const handleKeyDown = canRemove ? handleRemoveKeyDown : undefined;
+    const fileIcon = canRemove ? 'ts-wrong' : 'fa fa-download';
+    return /*#__PURE__*/_react.default.createElement(_FileItem.StyledFileItemIcon, {
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      role: "button",
+      tabIndex: 0
+    }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+      icons: [fileIcon]
+    }));
+  }, [canDownload, canRemove, downloadText, handleDownload, handleRemoveKeyDown, id, onRemove, removeText]);
+  return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_FileItem.StyledFileItem, null, /*#__PURE__*/_react.default.createElement(_FileItem.StyledFileItemKeyboardWrapper, {
+    onKeyDown: handleItemKeyDown,
+    tabIndex: -1
+  }, /*#__PURE__*/_react.default.createElement(_ListItem.default, {
     title: name,
     subtitle: humanFileSize,
     icons: [icon],
-    rightElements: rightElement
-  })), [humanFileSize, icon, name, rightElement]);
+    rightElements: rightElement,
+    shouldEnableKeyboardHighlighting: shouldShowKeyboardHighlighting
+  }))), [handleItemKeyDown, humanFileSize, icon, name, rightElement, shouldShowKeyboardHighlighting]);
 };
 FileItem.displayName = 'FileList';
 var _default = exports.default = FileItem;

package/lib/cjs/components/file-list/file-item/FileItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileItem.js","names":["_react","_interopRequireWildcard","require","_file","_Icon","_interopRequireDefault","_ContextMenu","_ListItem","_FileItem","_textstring","_textStrings","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","FileItem","mimeType","onRemove","size","name","id","source","shouldAllowDownload","humanFileSize","useMemo","getHumanSize","undefined","icon","getIconByMimeType","handleDownload","useCallback","File","url","URL","createObjectURL","a","document","createElement","href","download","body","appendChild","click","removeChild","revokeObjectURL","fetch","then","res","ok","Error","blob","catch","rel","target","canDownload","canRemove","downloadText","useTextstringValue","textstring","ttsToITextString","textStrings","components","fileItem","removeText","remove","rightElement","items","icons","key","onClick","text","StyledFileItemIcon","StyledFileItem","title","subtitle","rightElements","displayName","_default","exports"],"sources":["../../../../../src/components/file-list/file-item/FileItem.tsx"],"sourcesContent":["import React, { FC, useCallback, useMemo } from 'react';\nimport { getHumanSize, getIconByMimeType } from '../../../utils/file';\nimport Icon from '../../icon/Icon';\nimport ContextMenu from '../../context-menu/ContextMenu';\nimport type { ContextMenuItem } from '../../context-menu/ContextMenu.types';\nimport ListItem from '../../list/list-item/ListItem';\nimport type { IFileItem } from '../FileList';\nimport { StyledFileItem, StyledFileItemIcon } from './FileItem.styles';\nimport { ttsToITextString, useTextstringValue } from '@chayns-components/textstring';\nimport textStrings from '../../../constants/textStrings';\n\nexport type FileItemProps = IFileItem & {\n    onRemove?: (name: string) => void;\n    shouldAllowDownload?: boolean;\n};\n\nconst FileItem: FC<FileItemProps> = ({\n    mimeType,\n    onRemove,\n    size,\n    name,\n    id,\n    source,\n    shouldAllowDownload,\n}) => {\n    const humanFileSize = useMemo(() => {\n        if (typeof size === 'number') {\n            return getHumanSize(size);\n        }\n\n        return undefined;\n    }, [size]);\n\n    const icon = useMemo(() => getIconByMimeType(mimeType), [mimeType]);\n\n    const handleDownload = useCallback(() => {\n        if (!source) return;\n\n        if (source instanceof File) {\n            const url = URL.createObjectURL(source);\n            const a = document.createElement('a');\n            a.href = url;\n            a.download = name;\n            document.body.appendChild(a);\n            a.click();\n            document.body.removeChild(a);\n            URL.revokeObjectURL(url);\n        } else {\n            // Try fetching as blob to force download. If CORS blocks it,\n            // fall back to opening the URL directly.\n            fetch(source)\n                .then((res) => {\n                    if (!res.ok) throw new Error('fetch failed');\n                    return res.blob();\n                })\n                .then((blob) => {\n                    const url = URL.createObjectURL(blob);\n                    const a = document.createElement('a');\n                    a.href = url;\n                    a.download = name;\n                    document.body.appendChild(a);\n                    a.click();\n                    document.body.removeChild(a);\n                    URL.revokeObjectURL(url);\n                })\n                .catch(() => {\n                    // CORS or network error: fall back to direct link\n                    const a = document.createElement('a');\n                    a.href = source;\n                    a.download = name;\n                    a.rel = 'noopener noreferrer';\n                    a.target = '_blank';\n                    document.body.appendChild(a);\n                    a.click();\n                    document.body.removeChild(a);\n                });\n        }\n    }, [name, source]);\n\n    const canDownload = shouldAllowDownload && !!source;\n    const canRemove = typeof onRemove === 'function';\n\n    const downloadText = useTextstringValue({\n        textstring: ttsToITextString(textStrings.components.fileItem.download),\n    });\n    const removeText = useTextstringValue({\n        textstring: ttsToITextString(textStrings.components.fileItem.remove),\n    });\n\n    const rightElement = useMemo(() => {\n        // Both actions available → show as ContextMenu\n        if (canDownload && canRemove) {\n            const items: ContextMenuItem[] = [\n                {\n                    icons: ['fa fa-download'],\n                    key: 'download',\n                    onClick: handleDownload,\n                    text: downloadText,\n                },\n                {\n                    icons: ['fa fa-trash'],\n                    key: 'remove',\n                    onClick: () => onRemove(id),\n                    text: removeText,\n                },\n            ];\n\n            return <ContextMenu items={items} />;\n        }\n\n        // Only download\n        if (canDownload) {\n            return (\n                <StyledFileItemIcon onClick={handleDownload}>\n                    <Icon icons={['fa fa-download']} />\n                </StyledFileItemIcon>\n            );\n        }\n\n        // Only remove\n        if (canRemove) {\n            return (\n                <StyledFileItemIcon onClick={() => onRemove(id)}>\n                    <Icon icons={['ts-wrong']} />\n                </StyledFileItemIcon>\n            );\n        }\n\n        return undefined;\n    }, [canDownload, canRemove, downloadText, handleDownload, id, onRemove, removeText]);\n\n    return useMemo(\n        () => (\n            <StyledFileItem>\n                <ListItem\n                    title={name}\n                    subtitle={humanFileSize}\n                    icons={[icon]}\n                    rightElements={rightElement}\n                />\n            </StyledFileItem>\n        ),\n        [humanFileSize, icon, name, rightElement],\n    );\n};\n\nFileItem.displayName = 'FileList';\n\nexport default FileItem;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"FileItem.js","names":["_react","_interopRequireWildcard","require","_file","_Icon","_interopRequireDefault","_ContextMenu","_ListItem","_FileItem","_textstring","_textStrings","_useKeyboardFocusHighlighting","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","FileItem","mimeType","onRemove","size","name","id","source","shouldAllowDownload","canDownload","canRemove","shouldShowKeyboardHighlighting","useKeyboardFocusHighlighting","handleRemove","useCallback","handleItemKeyDown","event","key","preventDefault","handleRemoveKeyDown","stopPropagation","humanFileSize","useMemo","getHumanSize","undefined","icon","getIconByMimeType","handleDownload","File","url","URL","createObjectURL","a","document","createElement","href","download","body","appendChild","click","removeChild","revokeObjectURL","fetch","then","res","ok","Error","blob","catch","rel","target","downloadText","useTextstringValue","textstring","ttsToITextString","textStrings","components","fileItem","removeText","remove","rightElement","items","icons","onClick","text","handleClick","handleKeyDown","fileIcon","StyledFileItemIcon","onKeyDown","role","tabIndex","StyledFileItem","StyledFileItemKeyboardWrapper","title","subtitle","rightElements","shouldEnableKeyboardHighlighting","displayName","_default","exports"],"sources":["../../../../../src/components/file-list/file-item/FileItem.tsx"],"sourcesContent":["import React, { FC, KeyboardEventHandler, useCallback, useMemo } from 'react';\nimport { getHumanSize, getIconByMimeType } from '../../../utils/file';\nimport Icon from '../../icon/Icon';\nimport ContextMenu from '../../context-menu/ContextMenu';\nimport type { ContextMenuItem } from '../../context-menu/ContextMenu.types';\nimport ListItem from '../../list/list-item/ListItem';\nimport type { IFileItem } from '../FileList';\nimport {\n    StyledFileItem,\n    StyledFileItemActions,\n    StyledFileItemKeyboardWrapper,\n    StyledFileItemRemoveButton,\n    StyledFileItemIcon,\n} from './FileItem.styles';\nimport { ttsToITextString, useTextstringValue } from '@chayns-components/textstring';\nimport textStrings from '../../../constants/textStrings';\nimport { useKeyboardFocusHighlighting } from '../../../hooks/useKeyboardFocusHighlighting';\n\nexport type FileItemProps = IFileItem & {\n    onRemove?: (name: string) => void;\n    shouldAllowDownload?: boolean;\n};\n\nconst FileItem: FC<FileItemProps> = ({\n    mimeType,\n    onRemove,\n    size,\n    name,\n    id,\n    source,\n    shouldAllowDownload,\n}) => {\n    const canDownload = shouldAllowDownload && !!source;\n    const canRemove = typeof onRemove === 'function';\n\n    const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(canRemove || !!canDownload);\n\n    const handleRemove = useCallback(() => {\n        if (canRemove) {\n            onRemove(id);\n        }\n    }, [id, onRemove]);\n\n    const handleItemKeyDown = useCallback<KeyboardEventHandler<HTMLDivElement>>(\n        (event) => {\n            if (event.key === 'Delete') {\n                event.preventDefault();\n                handleRemove();\n            }\n        },\n        [handleRemove],\n    );\n\n    const handleRemoveKeyDown = useCallback<KeyboardEventHandler<HTMLSpanElement>>(\n        (event) => {\n            if (canRemove && (event.key === 'Enter' || event.key === ' ')) {\n                event.preventDefault();\n                event.stopPropagation();\n                handleRemove();\n            }\n        },\n        [handleRemove],\n    );\n\n    const humanFileSize = useMemo(() => {\n        if (typeof size === 'number') {\n            return getHumanSize(size);\n        }\n\n        return undefined;\n    }, [size]);\n\n    const icon = useMemo(() => getIconByMimeType(mimeType), [mimeType]);\n\n    const handleDownload = useCallback(() => {\n        if (!source) return;\n\n        if (source instanceof File) {\n            const url = URL.createObjectURL(source);\n            const a = document.createElement('a');\n            a.href = url;\n            a.download = name;\n            document.body.appendChild(a);\n            a.click();\n            document.body.removeChild(a);\n            URL.revokeObjectURL(url);\n        } else {\n            // Try fetching as blob to force download. If CORS blocks it,\n            // fall back to opening the URL directly.\n            fetch(source)\n                .then((res) => {\n                    if (!res.ok) throw new Error('fetch failed');\n                    return res.blob();\n                })\n                .then((blob) => {\n                    const url = URL.createObjectURL(blob);\n                    const a = document.createElement('a');\n                    a.href = url;\n                    a.download = name;\n                    document.body.appendChild(a);\n                    a.click();\n                    document.body.removeChild(a);\n                    URL.revokeObjectURL(url);\n                })\n                .catch(() => {\n                    // CORS or network error: fall back to direct link\n                    const a = document.createElement('a');\n                    a.href = source;\n                    a.download = name;\n                    a.rel = 'noopener noreferrer';\n                    a.target = '_blank';\n                    document.body.appendChild(a);\n                    a.click();\n                    document.body.removeChild(a);\n                });\n        }\n    }, [name, source]);\n\n    const downloadText = useTextstringValue({\n        textstring: ttsToITextString(textStrings.components.fileItem.download),\n    });\n    const removeText = useTextstringValue({\n        textstring: ttsToITextString(textStrings.components.fileItem.remove),\n    });\n\n    const rightElement = useMemo(() => {\n        if (!canDownload && !canRemove) return undefined;\n        // Both actions available → show as ContextMenu\n        if (canDownload && canRemove) {\n            const items: ContextMenuItem[] = [\n                {\n                    icons: ['fa fa-download'],\n                    key: 'download',\n                    onClick: handleDownload,\n                    text: downloadText,\n                },\n                {\n                    icons: ['fa fa-trash'],\n                    key: 'remove',\n                    onClick: () => onRemove(id),\n                    text: removeText,\n                },\n            ];\n\n            return <ContextMenu items={items} />;\n        }\n\n        const handleClick = () => {\n            if (canRemove) {\n                onRemove(id);\n                return;\n            }\n\n            handleDownload();\n        };\n\n        const handleKeyDown = canRemove ? handleRemoveKeyDown : undefined;\n\n        const fileIcon = canRemove ? 'ts-wrong' : 'fa fa-download';\n\n        return (\n            <StyledFileItemIcon\n                onClick={handleClick}\n                onKeyDown={handleKeyDown}\n                role=\"button\"\n                tabIndex={0}\n            >\n                <Icon icons={[fileIcon]} />\n            </StyledFileItemIcon>\n        );\n    }, [\n        canDownload,\n        canRemove,\n        downloadText,\n        handleDownload,\n        handleRemoveKeyDown,\n        id,\n        onRemove,\n        removeText,\n    ]);\n\n    return useMemo(\n        () => (\n            <StyledFileItem>\n                <StyledFileItemKeyboardWrapper onKeyDown={handleItemKeyDown} tabIndex={-1}>\n                    <ListItem\n                        title={name}\n                        subtitle={humanFileSize}\n                        icons={[icon]}\n                        rightElements={rightElement}\n                        shouldEnableKeyboardHighlighting={shouldShowKeyboardHighlighting}\n                    />\n                </StyledFileItemKeyboardWrapper>\n            </StyledFileItem>\n        ),\n        [\n            handleItemKeyDown,\n            humanFileSize,\n            icon,\n            name,\n            rightElement,\n            shouldShowKeyboardHighlighting,\n        ],\n    );\n};\n\nFileItem.displayName = 'FileList';\n\nexport default FileItem;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/file-list/file-item/FileItem.styles.js

@@ -3,8 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledFileItemIcon = exports.StyledFileItem = void 0;
+exports.StyledFileItemRemoveButton = exports.StyledFileItemKeyboardWrapper = exports.StyledFileItemIcon = exports.StyledFileItemActions = exports.StyledFileItem = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _keyboardFocusHighlighting = require("../../../utils/keyboardFocusHighlighting.styles");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const StyledFileItem = exports.StyledFileItem = _styledComponents.default.div``;
 const StyledFileItemIcon = exports.StyledFileItemIcon = _styledComponents.default.div`
@@ -15,5 +16,28 @@ const StyledFileItemIcon = exports.StyledFileItemIcon = _styledComponents.defaul
     border-radius: 3px;
     padding: 6px;
     transition: background-color 0.3s ease;
+
+    &:focus-visible {
+        outline: none;
+        color: inherit;
+        ${_keyboardFocusHighlighting.keyboardFocusHighlightingCircleRingCss};
+    }
+`;
+const StyledFileItemKeyboardWrapper = exports.StyledFileItemKeyboardWrapper = _styledComponents.default.div`
+    &:focus-visible {
+        ${_keyboardFocusHighlighting.keyboardFocusHighlightingRingCss}
+    }
+`;
+const StyledFileItemActions = exports.StyledFileItemActions = _styledComponents.default.span`
+    display: flex;
+    gap: 8px;
+    align-items: center;
+`;
+const StyledFileItemRemoveButton = exports.StyledFileItemRemoveButton = _styledComponents.default.span`
+    display: inline-flex;
+
+    &:focus-visible {
+        ${_keyboardFocusHighlighting.keyboardFocusHighlightingRingCss}
+    }
 `;
 //# sourceMappingURL=FileItem.styles.js.map

package/lib/cjs/components/file-list/file-item/FileItem.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileItem.styles.js","names":["_styledComponents","_interopRequireDefault","require","e","__esModule","default","StyledFileItem","exports","styled","div","StyledFileItemIcon"],"sources":["../../../../../src/components/file-list/file-item/FileItem.styles.ts"],"sourcesContent":["import styled from 'styled-components';\n\nexport const StyledFileItem = styled.div``;\nexport const StyledFileItemIcon = styled.div`\n    align-items: center;\n    cursor: pointer;\n    display: flex;\n    background-color: transparent;\n    border-radius: 3px;\n    padding: 6px;\n    transition: background-color 0.3s ease;\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAuC,SAAAD,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAEhC,MAAMG,cAAc,GAAAC,OAAA,CAAAD,cAAA,GAAGE,yBAAM,CAACC,GAAG,EAAE;AACnC,MAAMC,kBAAkB,GAAAH,OAAA,CAAAG,kBAAA,GAAGF,yBAAM,CAACC,GAAG;AAC5C;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
+{"version":3,"file":"FileItem.styles.js","names":["_styledComponents","_interopRequireDefault","require","_keyboardFocusHighlighting","e","__esModule","default","StyledFileItem","exports","styled","div","StyledFileItemIcon","keyboardFocusHighlightingCircleRingCss","StyledFileItemKeyboardWrapper","keyboardFocusHighlightingRingCss","StyledFileItemActions","span","StyledFileItemRemoveButton"],"sources":["../../../../../src/components/file-list/file-item/FileItem.styles.ts"],"sourcesContent":["import styled from 'styled-components';\nimport {\n    keyboardFocusHighlightingCircleRingCss,\n    keyboardFocusHighlightingRingCss,\n} from '../../../utils/keyboardFocusHighlighting.styles';\n\nexport const StyledFileItem = styled.div``;\nexport const StyledFileItemIcon = styled.div`\n    align-items: center;\n    cursor: pointer;\n    display: flex;\n    background-color: transparent;\n    border-radius: 3px;\n    padding: 6px;\n    transition: background-color 0.3s ease;\n\n    &:focus-visible {\n        outline: none;\n        color: inherit;\n        ${keyboardFocusHighlightingCircleRingCss};\n    }\n`;\n\nexport const StyledFileItemKeyboardWrapper = styled.div`\n    &:focus-visible {\n        ${keyboardFocusHighlightingRingCss}\n    }\n`;\n\nexport const StyledFileItemActions = styled.span`\n    display: flex;\n    gap: 8px;\n    align-items: center;\n`;\n\nexport const StyledFileItemRemoveButton = styled.span`\n    display: inline-flex;\n\n    &:focus-visible {\n        ${keyboardFocusHighlightingRingCss}\n    }\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,0BAAA,GAAAD,OAAA;AAGyD,SAAAD,uBAAAG,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAElD,MAAMG,cAAc,GAAAC,OAAA,CAAAD,cAAA,GAAGE,yBAAM,CAACC,GAAG,EAAE;AACnC,MAAMC,kBAAkB,GAAAH,OAAA,CAAAG,kBAAA,GAAGF,yBAAM,CAACC,GAAG;AAC5C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,UAAUE,iEAAsC;AAChD;AACA,CAAC;AAEM,MAAMC,6BAA6B,GAAAL,OAAA,CAAAK,6BAAA,GAAGJ,yBAAM,CAACC,GAAG;AACvD;AACA,UAAUI,2DAAgC;AAC1C;AACA,CAAC;AAEM,MAAMC,qBAAqB,GAAAP,OAAA,CAAAO,qBAAA,GAAGN,yBAAM,CAACO,IAAI;AAChD;AACA;AACA;AACA,CAAC;AAEM,MAAMC,0BAA0B,GAAAT,OAAA,CAAAS,0BAAA,GAAGR,yBAAM,CAACO,IAAI;AACrD;AACA;AACA;AACA,UAAUF,2DAAgC;AAC1C;AACA,CAAC","ignoreList":[]}

package/lib/cjs/components/file-select/FileSelect.js

@@ -8,6 +8,7 @@ var _chaynsApi = require("chayns-api");
 var _react = _interopRequireWildcard(require("react"));
 var _file = require("../../utils/file");
 var _fileDialog = require("../../utils/fileDialog");
+var _useKeyboardFocusHighlighting = require("../../hooks/useKeyboardFocusHighlighting");
 var _Icon = _interopRequireDefault(require("../icon/Icon"));
 var _FileSelect = require("./FileSelect.styles");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -26,8 +27,10 @@ const FileSelect = ({
   onAdd,
   fileSelectionPlaceholder = 'Dateien hochladen',
   imageSelectPlaceholder,
-  shouldPreventImageUpload = false
+  shouldPreventImageUpload = false,
+  shouldEnableKeyboardHighlighting
 }) => {
+  const shouldShowKeyboardHighlighting = (0, _useKeyboardFocusHighlighting.useKeyboardFocusHighlighting)(shouldEnableKeyboardHighlighting && !isDisabled);
   const handleAddImages = (0, _react.useCallback)(images => {
     if (typeof onAdd === 'function') {
       onAdd(images);
@@ -114,20 +117,40 @@ const FileSelect = ({
     }
     handleAddFiles(draggedFiles);
   }, [shouldPreventImageUpload, handleAddFiles, fileTypes, maxFileSizeInMB, handleOpenEditor]);
+  const handleFileSelectionKeyDown = (0, _react.useCallback)(event => {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      void handleFileSelectionClick();
+    }
+  }, [handleFileSelectionClick]);
+  const handleImageSelectionKeyDown = (0, _react.useCallback)(event => {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      void handleImageSelectionClick();
+    }
+  }, [handleImageSelectionClick]);
   return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_FileSelect.StyledFileSelect, null, /*#__PURE__*/_react.default.createElement(_FileSelect.StyledFileSelectWrapper, {
     $isDisabled: isDisabled
   }, /*#__PURE__*/_react.default.createElement(_FileSelect.StyledFileSelectContainer, {
+    $shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting,
     onClick: () => void handleFileSelectionClick(),
+    onKeyDown: handleFileSelectionKeyDown,
     onDragOver: e => e.preventDefault(),
-    onDrop: handleDrop
+    onDrop: handleDrop,
+    role: "button",
+    tabIndex: isDisabled ? -1 : 0
   }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
     icons: fileSelectionIcons
   }), /*#__PURE__*/_react.default.createElement(_FileSelect.StyledFileSelectText, null, fileSelectionPlaceholder)), imageSelectPlaceholder && /*#__PURE__*/_react.default.createElement(_FileSelect.StyledFileSelectContainer, {
     $isImageSelection: true,
-    onClick: () => void handleImageSelectionClick()
+    $shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting,
+    onClick: () => void handleImageSelectionClick(),
+    onKeyDown: handleImageSelectionKeyDown,
+    role: "button",
+    tabIndex: isDisabled ? -1 : 0
   }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
     icons: imageSelectIcons
-  }), /*#__PURE__*/_react.default.createElement(_FileSelect.StyledFileSelectText, null, imageSelectPlaceholder)))), [isDisabled, fileSelectionIcons, fileSelectionPlaceholder, imageSelectPlaceholder, imageSelectIcons, handleFileSelectionClick, handleDrop, handleImageSelectionClick]);
+  }), /*#__PURE__*/_react.default.createElement(_FileSelect.StyledFileSelectText, null, imageSelectPlaceholder)))), [isDisabled, fileSelectionIcons, fileSelectionPlaceholder, imageSelectPlaceholder, imageSelectIcons, shouldShowKeyboardHighlighting, handleFileSelectionClick, handleDrop, handleFileSelectionKeyDown, handleImageSelectionClick, handleImageSelectionKeyDown]);
 };
 FileSelect.displayName = 'FileSelect';
 var _default = exports.default = FileSelect;

package/lib/cjs/components/file-select/FileSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileSelect.js","names":["_chaynsApi","require","_react","_interopRequireWildcard","_file","_fileDialog","_Icon","_interopRequireDefault","_FileSelect","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","DialogView","FileSelect","fileSelectionIcons","imageSelectIcons","fileTypes","isDisabled","maxFileSizeInMB","onAdd","fileSelectionPlaceholder","imageSelectPlaceholder","shouldPreventImageUpload","handleAddImages","useCallback","images","handleAddFiles","newFiles","handleOpenEditor","file","buttonType","result","createDialog","dialogInput","upload","initialView","EDITOR","imageArrayBuffer","type","DialogType","MODULE","system","url","scope","module","buttons","open","size","name","handleImageSelectionClick","PIXABAY","handleFileSelectionClick","selectFiles","multiple","length","startsWith","handleDrop","preventDefault","draggedFiles","Array","from","dataTransfer","files","filter","isValidFileType","types","useMemo","createElement","StyledFileSelect","StyledFileSelectWrapper","$isDisabled","StyledFileSelectContainer","onClick","onDragOver","onDrop","icons","StyledFileSelectText","$isImageSelection","displayName","_default","exports"],"sources":["../../../../src/components/file-select/FileSelect.tsx"],"sourcesContent":["import { createDialog, DialogType } from 'chayns-api';\nimport React, { DragEvent, FC, useCallback, useMemo } from 'react';\nimport type { ImageDialogResult } from '../../types/fileInput';\nimport { isValidFileType } from '../../utils/file';\nimport { selectFiles } from '../../utils/fileDialog';\nimport Icon from '../icon/Icon';\nimport {\n    StyledFileSelect,\n    StyledFileSelectContainer,\n    StyledFileSelectText,\n    StyledFileSelectWrapper,\n} from './FileSelect.styles';\n\nenum DialogView {\n    PIXABAY = 'pixabay',\n    EDITOR = 'editor',\n}\n\ntype DialogInput = {\n    upload: boolean;\n    initialView: DialogView;\n    imageArrayBuffer?: File;\n};\n\nexport interface UploadedFile {\n    url: string;\n    size?: number;\n    name?: string;\n}\n\nexport type FileSelectProps = {\n    /**\n     * An array of icons that should be displayed inside the FileInput\n     */\n    fileSelectionIcons?: string[];\n    /**\n     * The text that should be displayed inside the FileInput.\n     */\n    fileSelectionPlaceholder?: string;\n    /**\n     * The filetypes that could be selected. Example for multiple types: 'image/*, video/*'.\n     */\n    fileTypes?: string;\n    /**\n     * The icon of the image selection.\n     */\n    imageSelectIcons?: string[];\n    /**\n     * If set, pictures can be select via Pixabay.\n     */\n    imageSelectPlaceholder?: string;\n    /**\n     * Whether the FileInput is disabled.\n     */\n    isDisabled?: boolean;\n    /**\n     * The maximum amount of Files that can be uploaded.\n     */\n    maxFiles?: number;\n    /**\n     * The maximum size of a file in MB.\n     */\n    maxFileSizeInMB?: number;\n    /**\n     * A function to be executed when files are added.\n     */\n    onAdd?: (files: File[] | UploadedFile[]) => void;\n    /**\n     * Whether the image upload should be prevented.\n     */\n    shouldPreventImageUpload?: boolean;\n};\n\nconst FileSelect: FC<FileSelectProps> = ({\n    fileSelectionIcons = ['fa fa-upload'],\n    imageSelectIcons = ['ts-image'],\n    fileTypes,\n    isDisabled,\n    maxFileSizeInMB,\n    onAdd,\n    fileSelectionPlaceholder = 'Dateien hochladen',\n    imageSelectPlaceholder,\n    shouldPreventImageUpload = false,\n}) => {\n    const handleAddImages = useCallback(\n        (images: UploadedFile[]) => {\n            if (typeof onAdd === 'function') {\n                onAdd(images);\n            }\n        },\n        [onAdd],\n    );\n\n    const handleAddFiles = useCallback(\n        (newFiles: File[]) => {\n            if (typeof onAdd === 'function') {\n                onAdd(newFiles);\n            }\n        },\n        [onAdd],\n    );\n\n    const handleOpenEditor = useCallback(\n        async (file: File) => {\n            const { buttonType, result } = (await createDialog<DialogInput>({\n                dialogInput: {\n                    upload: true,\n                    initialView: DialogView.EDITOR,\n                    imageArrayBuffer: file,\n                },\n                type: DialogType.MODULE,\n                system: {\n                    url: 'https://tapp.chayns-static.space/api/dialog-image-editor/v1/remoteEntry.js',\n                    scope: 'dialog_image_editor',\n                    module: './ImageEditorEntry',\n                },\n                buttons: [],\n            }).open()) as ImageDialogResult;\n\n            if (buttonType === 1 && result?.url)\n                handleAddImages([\n                    {\n                        url: result.url,\n                        size: file.size,\n                        name: file.name,\n                    },\n                ]);\n        },\n        [handleAddImages],\n    );\n\n    const handleImageSelectionClick = useCallback(async () => {\n        if (isDisabled) return;\n\n        const { buttonType, result } = (await createDialog<DialogInput>({\n            dialogInput: { upload: true, initialView: DialogView.PIXABAY },\n            type: DialogType.MODULE,\n            system: {\n                url: 'https://tapp.chayns-static.space/api/dialog-image-editor/v1/remoteEntry.js',\n                scope: 'dialog_image_editor',\n                module: './ImageEditorEntry',\n            },\n            buttons: [],\n        }).open()) as ImageDialogResult;\n\n        if (buttonType === 1 && result?.url) handleAddImages([{ url: result.url }]);\n    }, [handleAddImages, isDisabled]);\n\n    const handleFileSelectionClick = useCallback(async () => {\n        if (isDisabled) return;\n\n        const newFiles = await selectFiles({ multiple: true, type: fileTypes, maxFileSizeInMB });\n\n        if (\n            newFiles.length === 1 &&\n            newFiles[0] &&\n            newFiles[0].type.startsWith('image') &&\n            !shouldPreventImageUpload\n        ) {\n            void handleOpenEditor(newFiles[0]);\n\n            return;\n        }\n\n        handleAddFiles(newFiles);\n    }, [\n        fileTypes,\n        handleAddFiles,\n        handleOpenEditor,\n        isDisabled,\n        maxFileSizeInMB,\n        shouldPreventImageUpload,\n    ]);\n\n    const handleDrop = useCallback(\n        (e: DragEvent<HTMLDivElement>) => {\n            e.preventDefault();\n\n            const draggedFiles = Array.from(e.dataTransfer.files).filter((file) => {\n                if (fileTypes && !isValidFileType({ file, types: fileTypes })) {\n                    return false;\n                }\n\n                return !(maxFileSizeInMB && file.size > maxFileSizeInMB * 1024 * 1024);\n            });\n\n            if (\n                draggedFiles.length === 1 &&\n                draggedFiles[0] &&\n                draggedFiles[0].type.startsWith('image') &&\n                !shouldPreventImageUpload\n            ) {\n                void handleOpenEditor(draggedFiles[0]);\n\n                return;\n            }\n\n            handleAddFiles(draggedFiles);\n        },\n        [shouldPreventImageUpload, handleAddFiles, fileTypes, maxFileSizeInMB, handleOpenEditor],\n    );\n\n    return useMemo(\n        () => (\n            <StyledFileSelect>\n                <StyledFileSelectWrapper $isDisabled={isDisabled}>\n                    <StyledFileSelectContainer\n                        onClick={() => void handleFileSelectionClick()}\n                        onDragOver={(e) => e.preventDefault()}\n                        onDrop={handleDrop}\n                    >\n                        <Icon icons={fileSelectionIcons} />\n                        <StyledFileSelectText>{fileSelectionPlaceholder}</StyledFileSelectText>\n                    </StyledFileSelectContainer>\n                    {imageSelectPlaceholder && (\n                        <StyledFileSelectContainer\n                            $isImageSelection\n                            onClick={() => void handleImageSelectionClick()}\n                        >\n                            <Icon icons={imageSelectIcons} />\n                            <StyledFileSelectText>{imageSelectPlaceholder}</StyledFileSelectText>\n                        </StyledFileSelectContainer>\n                    )}\n                </StyledFileSelectWrapper>\n            </StyledFileSelect>\n        ),\n        [\n            isDisabled,\n            fileSelectionIcons,\n            fileSelectionPlaceholder,\n            imageSelectPlaceholder,\n            imageSelectIcons,\n            handleFileSelectionClick,\n            handleDrop,\n            handleImageSelectionClick,\n        ],\n    );\n};\n\nFileSelect.displayName = 'FileSelect';\n\nexport default FileSelect;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"FileSelect.js","names":["_chaynsApi","require","_react","_interopRequireWildcard","_file","_fileDialog","_useKeyboardFocusHighlighting","_Icon","_interopRequireDefault","_FileSelect","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","DialogView","FileSelect","fileSelectionIcons","imageSelectIcons","fileTypes","isDisabled","maxFileSizeInMB","onAdd","fileSelectionPlaceholder","imageSelectPlaceholder","shouldPreventImageUpload","shouldEnableKeyboardHighlighting","shouldShowKeyboardHighlighting","useKeyboardFocusHighlighting","handleAddImages","useCallback","images","handleAddFiles","newFiles","handleOpenEditor","file","buttonType","result","createDialog","dialogInput","upload","initialView","EDITOR","imageArrayBuffer","type","DialogType","MODULE","system","url","scope","module","buttons","open","size","name","handleImageSelectionClick","PIXABAY","handleFileSelectionClick","selectFiles","multiple","length","startsWith","handleDrop","preventDefault","draggedFiles","Array","from","dataTransfer","files","filter","isValidFileType","types","handleFileSelectionKeyDown","event","key","handleImageSelectionKeyDown","useMemo","createElement","StyledFileSelect","StyledFileSelectWrapper","$isDisabled","StyledFileSelectContainer","$shouldShowKeyboardHighlighting","onClick","onKeyDown","onDragOver","onDrop","role","tabIndex","icons","StyledFileSelectText","$isImageSelection","displayName","_default","exports"],"sources":["../../../../src/components/file-select/FileSelect.tsx"],"sourcesContent":["import { createDialog, DialogType } from 'chayns-api';\nimport React, { DragEvent, FC, KeyboardEventHandler, useCallback, useMemo } from 'react';\nimport type { ImageDialogResult } from '../../types/fileInput';\nimport { isValidFileType } from '../../utils/file';\nimport { selectFiles } from '../../utils/fileDialog';\nimport { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';\nimport Icon from '../icon/Icon';\nimport {\n    StyledFileSelect,\n    StyledFileSelectContainer,\n    StyledFileSelectText,\n    StyledFileSelectWrapper,\n} from './FileSelect.styles';\n\nenum DialogView {\n    PIXABAY = 'pixabay',\n    EDITOR = 'editor',\n}\n\ntype DialogInput = {\n    upload: boolean;\n    initialView: DialogView;\n    imageArrayBuffer?: File;\n};\n\nexport interface UploadedFile {\n    url: string;\n    size?: number;\n    name?: string;\n}\n\nexport type FileSelectProps = {\n    /**\n     * An array of icons that should be displayed inside the FileInput\n     */\n    fileSelectionIcons?: string[];\n    /**\n     * The text that should be displayed inside the FileInput.\n     */\n    fileSelectionPlaceholder?: string;\n    /**\n     * The filetypes that could be selected. Example for multiple types: 'image/*, video/*'.\n     */\n    fileTypes?: string;\n    /**\n     * The icon of the image selection.\n     */\n    imageSelectIcons?: string[];\n    /**\n     * If set, pictures can be select via Pixabay.\n     */\n    imageSelectPlaceholder?: string;\n    /**\n     * Whether the FileInput is disabled.\n     */\n    isDisabled?: boolean;\n    /**\n     * The maximum amount of Files that can be uploaded.\n     */\n    maxFiles?: number;\n    /**\n     * The maximum size of a file in MB.\n     */\n    maxFileSizeInMB?: number;\n    /**\n     * A function to be executed when files are added.\n     */\n    onAdd?: (files: File[] | UploadedFile[]) => void;\n    /**\n     * Whether the image upload should be prevented.\n     */\n    shouldPreventImageUpload?: boolean;\n    /**\n     * Enables keyboard-only focus highlighting for selection triggers.\n     */\n    shouldEnableKeyboardHighlighting?: boolean;\n};\n\nconst FileSelect: FC<FileSelectProps> = ({\n    fileSelectionIcons = ['fa fa-upload'],\n    imageSelectIcons = ['ts-image'],\n    fileTypes,\n    isDisabled,\n    maxFileSizeInMB,\n    onAdd,\n    fileSelectionPlaceholder = 'Dateien hochladen',\n    imageSelectPlaceholder,\n    shouldPreventImageUpload = false,\n    shouldEnableKeyboardHighlighting,\n}) => {\n    const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n        shouldEnableKeyboardHighlighting && !isDisabled,\n    );\n\n    const handleAddImages = useCallback(\n        (images: UploadedFile[]) => {\n            if (typeof onAdd === 'function') {\n                onAdd(images);\n            }\n        },\n        [onAdd],\n    );\n\n    const handleAddFiles = useCallback(\n        (newFiles: File[]) => {\n            if (typeof onAdd === 'function') {\n                onAdd(newFiles);\n            }\n        },\n        [onAdd],\n    );\n\n    const handleOpenEditor = useCallback(\n        async (file: File) => {\n            const { buttonType, result } = (await createDialog<DialogInput>({\n                dialogInput: {\n                    upload: true,\n                    initialView: DialogView.EDITOR,\n                    imageArrayBuffer: file,\n                },\n                type: DialogType.MODULE,\n                system: {\n                    url: 'https://tapp.chayns-static.space/api/dialog-image-editor/v1/remoteEntry.js',\n                    scope: 'dialog_image_editor',\n                    module: './ImageEditorEntry',\n                },\n                buttons: [],\n            }).open()) as ImageDialogResult;\n\n            if (buttonType === 1 && result?.url)\n                handleAddImages([\n                    {\n                        url: result.url,\n                        size: file.size,\n                        name: file.name,\n                    },\n                ]);\n        },\n        [handleAddImages],\n    );\n\n    const handleImageSelectionClick = useCallback(async () => {\n        if (isDisabled) return;\n\n        const { buttonType, result } = (await createDialog<DialogInput>({\n            dialogInput: { upload: true, initialView: DialogView.PIXABAY },\n            type: DialogType.MODULE,\n            system: {\n                url: 'https://tapp.chayns-static.space/api/dialog-image-editor/v1/remoteEntry.js',\n                scope: 'dialog_image_editor',\n                module: './ImageEditorEntry',\n            },\n            buttons: [],\n        }).open()) as ImageDialogResult;\n\n        if (buttonType === 1 && result?.url) handleAddImages([{ url: result.url }]);\n    }, [handleAddImages, isDisabled]);\n\n    const handleFileSelectionClick = useCallback(async () => {\n        if (isDisabled) return;\n\n        const newFiles = await selectFiles({ multiple: true, type: fileTypes, maxFileSizeInMB });\n\n        if (\n            newFiles.length === 1 &&\n            newFiles[0] &&\n            newFiles[0].type.startsWith('image') &&\n            !shouldPreventImageUpload\n        ) {\n            void handleOpenEditor(newFiles[0]);\n\n            return;\n        }\n\n        handleAddFiles(newFiles);\n    }, [\n        fileTypes,\n        handleAddFiles,\n        handleOpenEditor,\n        isDisabled,\n        maxFileSizeInMB,\n        shouldPreventImageUpload,\n    ]);\n\n    const handleDrop = useCallback(\n        (e: DragEvent<HTMLDivElement>) => {\n            e.preventDefault();\n\n            const draggedFiles = Array.from(e.dataTransfer.files).filter((file) => {\n                if (fileTypes && !isValidFileType({ file, types: fileTypes })) {\n                    return false;\n                }\n\n                return !(maxFileSizeInMB && file.size > maxFileSizeInMB * 1024 * 1024);\n            });\n\n            if (\n                draggedFiles.length === 1 &&\n                draggedFiles[0] &&\n                draggedFiles[0].type.startsWith('image') &&\n                !shouldPreventImageUpload\n            ) {\n                void handleOpenEditor(draggedFiles[0]);\n\n                return;\n            }\n\n            handleAddFiles(draggedFiles);\n        },\n        [shouldPreventImageUpload, handleAddFiles, fileTypes, maxFileSizeInMB, handleOpenEditor],\n    );\n\n    const handleFileSelectionKeyDown = useCallback<KeyboardEventHandler<HTMLDivElement>>(\n        (event) => {\n            if (event.key === 'Enter' || event.key === ' ') {\n                event.preventDefault();\n                void handleFileSelectionClick();\n            }\n        },\n        [handleFileSelectionClick],\n    );\n\n    const handleImageSelectionKeyDown = useCallback<KeyboardEventHandler<HTMLDivElement>>(\n        (event) => {\n            if (event.key === 'Enter' || event.key === ' ') {\n                event.preventDefault();\n                void handleImageSelectionClick();\n            }\n        },\n        [handleImageSelectionClick],\n    );\n\n    return useMemo(\n        () => (\n            <StyledFileSelect>\n                <StyledFileSelectWrapper $isDisabled={isDisabled}>\n                    <StyledFileSelectContainer\n                        $shouldShowKeyboardHighlighting={shouldShowKeyboardHighlighting}\n                        onClick={() => void handleFileSelectionClick()}\n                        onKeyDown={handleFileSelectionKeyDown}\n                        onDragOver={(e) => e.preventDefault()}\n                        onDrop={handleDrop}\n                        role=\"button\"\n                        tabIndex={isDisabled ? -1 : 0}\n                    >\n                        <Icon icons={fileSelectionIcons} />\n                        <StyledFileSelectText>{fileSelectionPlaceholder}</StyledFileSelectText>\n                    </StyledFileSelectContainer>\n                    {imageSelectPlaceholder && (\n                        <StyledFileSelectContainer\n                            $isImageSelection\n                            $shouldShowKeyboardHighlighting={shouldShowKeyboardHighlighting}\n                            onClick={() => void handleImageSelectionClick()}\n                            onKeyDown={handleImageSelectionKeyDown}\n                            role=\"button\"\n                            tabIndex={isDisabled ? -1 : 0}\n                        >\n                            <Icon icons={imageSelectIcons} />\n                            <StyledFileSelectText>{imageSelectPlaceholder}</StyledFileSelectText>\n                        </StyledFileSelectContainer>\n                    )}\n                </StyledFileSelectWrapper>\n            </StyledFileSelect>\n        ),\n        [\n            isDisabled,\n            fileSelectionIcons,\n            fileSelectionPlaceholder,\n            imageSelectPlaceholder,\n            imageSelectIcons,\n            shouldShowKeyboardHighlighting,\n            handleFileSelectionClick,\n            handleDrop,\n            handleFileSelectionKeyDown,\n            handleImageSelectionClick,\n            handleImageSelectionKeyDown,\n        ],\n    );\n};\n\nFileSelect.displayName = 'FileSelect';\n\nexport default FileSelect;\n"],"mappings":";;;;;;AAAA,IAAAA,UAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAC,uBAAA,CAAAF,OAAA;AAEA,IAAAG,KAAA,GAAAH,OAAA;AACA,IAAAI,WAAA,GAAAJ,OAAA;AACA,IAAAK,6BAAA,GAAAL,OAAA;AACA,IAAAM,KAAA,GAAAC,sBAAA,CAAAP,OAAA;AACA,IAAAQ,WAAA,GAAAR,OAAA;AAK6B,SAAAO,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAAA,SAAAP,wBAAAO,CAAA,EAAAG,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAX,uBAAA,YAAAA,CAAAO,CAAA,EAAAG,CAAA,SAAAA,CAAA,IAAAH,CAAA,IAAAA,CAAA,CAAAC,UAAA,SAAAD,CAAA,MAAAO,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAR,OAAA,EAAAF,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAS,CAAA,MAAAF,CAAA,GAAAJ,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAE,CAAA,CAAAI,GAAA,CAAAX,CAAA,UAAAO,CAAA,CAAAK,GAAA,CAAAZ,CAAA,GAAAO,CAAA,CAAAM,GAAA,CAAAb,CAAA,EAAAS,CAAA,gBAAAN,CAAA,IAAAH,CAAA,gBAAAG,CAAA,OAAAW,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAG,CAAA,OAAAK,CAAA,IAAAD,CAAA,GAAAS,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAG,CAAA,OAAAK,CAAA,CAAAI,GAAA,IAAAJ,CAAA,CAAAK,GAAA,IAAAN,CAAA,CAAAE,CAAA,EAAAN,CAAA,EAAAK,CAAA,IAAAC,CAAA,CAAAN,CAAA,IAAAH,CAAA,CAAAG,CAAA,WAAAM,CAAA,KAAAT,CAAA,EAAAG,CAAA;AAAA,IAExBgB,UAAU,0BAAVA,UAAU;EAAVA,UAAU;EAAVA,UAAU;EAAA,OAAVA,UAAU;AAAA,EAAVA,UAAU;AAgEf,MAAMC,UAA+B,GAAGA,CAAC;EACrCC,kBAAkB,GAAG,CAAC,cAAc,CAAC;EACrCC,gBAAgB,GAAG,CAAC,UAAU,CAAC;EAC/BC,SAAS;EACTC,UAAU;EACVC,eAAe;EACfC,KAAK;EACLC,wBAAwB,GAAG,mBAAmB;EAC9CC,sBAAsB;EACtBC,wBAAwB,GAAG,KAAK;EAChCC;AACJ,CAAC,KAAK;EACF,MAAMC,8BAA8B,GAAG,IAAAC,0DAA4B,EAC/DF,gCAAgC,IAAI,CAACN,UACzC,CAAC;EAED,MAAMS,eAAe,GAAG,IAAAC,kBAAW,EAC9BC,MAAsB,IAAK;IACxB,IAAI,OAAOT,KAAK,KAAK,UAAU,EAAE;MAC7BA,KAAK,CAACS,MAAM,CAAC;IACjB;EACJ,CAAC,EACD,CAACT,KAAK,CACV,CAAC;EAED,MAAMU,cAAc,GAAG,IAAAF,kBAAW,EAC7BG,QAAgB,IAAK;IAClB,IAAI,OAAOX,KAAK,KAAK,UAAU,EAAE;MAC7BA,KAAK,CAACW,QAAQ,CAAC;IACnB;EACJ,CAAC,EACD,CAACX,KAAK,CACV,CAAC;EAED,MAAMY,gBAAgB,GAAG,IAAAJ,kBAAW,EAChC,MAAOK,IAAU,IAAK;IAClB,MAAM;MAAEC,UAAU;MAAEC;IAAO,CAAC,GAAI,MAAM,IAAAC,uBAAY,EAAc;MAC5DC,WAAW,EAAE;QACTC,MAAM,EAAE,IAAI;QACZC,WAAW,EAAE1B,UAAU,CAAC2B,MAAM;QAC9BC,gBAAgB,EAAER;MACtB,CAAC;MACDS,IAAI,EAAEC,qBAAU,CAACC,MAAM;MACvBC,MAAM,EAAE;QACJC,GAAG,EAAE,4EAA4E;QACjFC,KAAK,EAAE,qBAAqB;QAC5BC,MAAM,EAAE;MACZ,CAAC;MACDC,OAAO,EAAE;IACb,CAAC,CAAC,CAACC,IAAI,CAAC,CAAuB;IAE/B,IAAIhB,UAAU,KAAK,CAAC,IAAIC,MAAM,aAANA,MAAM,eAANA,MAAM,CAAEW,GAAG,EAC/BnB,eAAe,CAAC,CACZ;MACImB,GAAG,EAAEX,MAAM,CAACW,GAAG;MACfK,IAAI,EAAElB,IAAI,CAACkB,IAAI;MACfC,IAAI,EAAEnB,IAAI,CAACmB;IACf,CAAC,CACJ,CAAC;EACV,CAAC,EACD,CAACzB,eAAe,CACpB,CAAC;EAED,MAAM0B,yBAAyB,GAAG,IAAAzB,kBAAW,EAAC,YAAY;IACtD,IAAIV,UAAU,EAAE;IAEhB,MAAM;MAAEgB,UAAU;MAAEC;IAAO,CAAC,GAAI,MAAM,IAAAC,uBAAY,EAAc;MAC5DC,WAAW,EAAE;QAAEC,MAAM,EAAE,IAAI;QAAEC,WAAW,EAAE1B,UAAU,CAACyC;MAAQ,CAAC;MAC9DZ,IAAI,EAAEC,qBAAU,CAACC,MAAM;MACvBC,MAAM,EAAE;QACJC,GAAG,EAAE,4EAA4E;QACjFC,KAAK,EAAE,qBAAqB;QAC5BC,MAAM,EAAE;MACZ,CAAC;MACDC,OAAO,EAAE;IACb,CAAC,CAAC,CAACC,IAAI,CAAC,CAAuB;IAE/B,IAAIhB,UAAU,KAAK,CAAC,IAAIC,MAAM,aAANA,MAAM,eAANA,MAAM,CAAEW,GAAG,EAAEnB,eAAe,CAAC,CAAC;MAAEmB,GAAG,EAAEX,MAAM,CAACW;IAAI,CAAC,CAAC,CAAC;EAC/E,CAAC,EAAE,CAACnB,eAAe,EAAET,UAAU,CAAC,CAAC;EAEjC,MAAMqC,wBAAwB,GAAG,IAAA3B,kBAAW,EAAC,YAAY;IACrD,IAAIV,UAAU,EAAE;IAEhB,MAAMa,QAAQ,GAAG,MAAM,IAAAyB,uBAAW,EAAC;MAAEC,QAAQ,EAAE,IAAI;MAAEf,IAAI,EAAEzB,SAAS;MAAEE;IAAgB,CAAC,CAAC;IAExF,IACIY,QAAQ,CAAC2B,MAAM,KAAK,CAAC,IACrB3B,QAAQ,CAAC,CAAC,CAAC,IACXA,QAAQ,CAAC,CAAC,CAAC,CAACW,IAAI,CAACiB,UAAU,CAAC,OAAO,CAAC,IACpC,CAACpC,wBAAwB,EAC3B;MACE,KAAKS,gBAAgB,CAACD,QAAQ,CAAC,CAAC,CAAC,CAAC;MAElC;IACJ;IAEAD,cAAc,CAACC,QAAQ,CAAC;EAC5B,CAAC,EAAE,CACCd,SAAS,EACTa,cAAc,EACdE,gBAAgB,EAChBd,UAAU,EACVC,eAAe,EACfI,wBAAwB,CAC3B,CAAC;EAEF,MAAMqC,UAAU,GAAG,IAAAhC,kBAAW,EACzBlC,CAA4B,IAAK;IAC9BA,CAAC,CAACmE,cAAc,CAAC,CAAC;IAElB,MAAMC,YAAY,GAAGC,KAAK,CAACC,IAAI,CAACtE,CAAC,CAACuE,YAAY,CAACC,KAAK,CAAC,CAACC,MAAM,CAAElC,IAAI,IAAK;MACnE,IAAIhB,SAAS,IAAI,CAAC,IAAAmD,qBAAe,EAAC;QAAEnC,IAAI;QAAEoC,KAAK,EAAEpD;MAAU,CAAC,CAAC,EAAE;QAC3D,OAAO,KAAK;MAChB;MAEA,OAAO,EAAEE,eAAe,IAAIc,IAAI,CAACkB,IAAI,GAAGhC,eAAe,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1E,CAAC,CAAC;IAEF,IACI2C,YAAY,CAACJ,MAAM,KAAK,CAAC,IACzBI,YAAY,CAAC,CAAC,CAAC,IACfA,YAAY,CAAC,CAAC,CAAC,CAACpB,IAAI,CAACiB,UAAU,CAAC,OAAO,CAAC,IACxC,CAACpC,wBAAwB,EAC3B;MACE,KAAKS,gBAAgB,CAAC8B,YAAY,CAAC,CAAC,CAAC,CAAC;MAEtC;IACJ;IAEAhC,cAAc,CAACgC,YAAY,CAAC;EAChC,CAAC,EACD,CAACvC,wBAAwB,EAAEO,cAAc,EAAEb,SAAS,EAAEE,eAAe,EAAEa,gBAAgB,CAC3F,CAAC;EAED,MAAMsC,0BAA0B,GAAG,IAAA1C,kBAAW,EACzC2C,KAAK,IAAK;IACP,IAAIA,KAAK,CAACC,GAAG,KAAK,OAAO,IAAID,KAAK,CAACC,GAAG,KAAK,GAAG,EAAE;MAC5CD,KAAK,CAACV,cAAc,CAAC,CAAC;MACtB,KAAKN,wBAAwB,CAAC,CAAC;IACnC;EACJ,CAAC,EACD,CAACA,wBAAwB,CAC7B,CAAC;EAED,MAAMkB,2BAA2B,GAAG,IAAA7C,kBAAW,EAC1C2C,KAAK,IAAK;IACP,IAAIA,KAAK,CAACC,GAAG,KAAK,OAAO,IAAID,KAAK,CAACC,GAAG,KAAK,GAAG,EAAE;MAC5CD,KAAK,CAACV,cAAc,CAAC,CAAC;MACtB,KAAKR,yBAAyB,CAAC,CAAC;IACpC;EACJ,CAAC,EACD,CAACA,yBAAyB,CAC9B,CAAC;EAED,OAAO,IAAAqB,cAAO,EACV,mBACIxF,MAAA,CAAAU,OAAA,CAAA+E,aAAA,CAAClF,WAAA,CAAAmF,gBAAgB,qBACb1F,MAAA,CAAAU,OAAA,CAAA+E,aAAA,CAAClF,WAAA,CAAAoF,uBAAuB;IAACC,WAAW,EAAE5D;EAAW,gBAC7ChC,MAAA,CAAAU,OAAA,CAAA+E,aAAA,CAAClF,WAAA,CAAAsF,yBAAyB;IACtBC,+BAA+B,EAAEvD,8BAA+B;IAChEwD,OAAO,EAAEA,CAAA,KAAM,KAAK1B,wBAAwB,CAAC,CAAE;IAC/C2B,SAAS,EAAEZ,0BAA2B;IACtCa,UAAU,EAAGzF,CAAC,IAAKA,CAAC,CAACmE,cAAc,CAAC,CAAE;IACtCuB,MAAM,EAAExB,UAAW;IACnByB,IAAI,EAAC,QAAQ;IACbC,QAAQ,EAAEpE,UAAU,GAAG,CAAC,CAAC,GAAG;EAAE,gBAE9BhC,MAAA,CAAAU,OAAA,CAAA+E,aAAA,CAACpF,KAAA,CAAAK,OAAI;IAAC2F,KAAK,EAAExE;EAAmB,CAAE,CAAC,eACnC7B,MAAA,CAAAU,OAAA,CAAA+E,aAAA,CAAClF,WAAA,CAAA+F,oBAAoB,QAAEnE,wBAA+C,CAC/C,CAAC,EAC3BC,sBAAsB,iBACnBpC,MAAA,CAAAU,OAAA,CAAA+E,aAAA,CAAClF,WAAA,CAAAsF,yBAAyB;IACtBU,iBAAiB;IACjBT,+BAA+B,EAAEvD,8BAA+B;IAChEwD,OAAO,EAAEA,CAAA,KAAM,KAAK5B,yBAAyB,CAAC,CAAE;IAChD6B,SAAS,EAAET,2BAA4B;IACvCY,IAAI,EAAC,QAAQ;IACbC,QAAQ,EAAEpE,UAAU,GAAG,CAAC,CAAC,GAAG;EAAE,gBAE9BhC,MAAA,CAAAU,OAAA,CAAA+E,aAAA,CAACpF,KAAA,CAAAK,OAAI;IAAC2F,KAAK,EAAEvE;EAAiB,CAAE,CAAC,eACjC9B,MAAA,CAAAU,OAAA,CAAA+E,aAAA,CAAClF,WAAA,CAAA+F,oBAAoB,QAAElE,sBAA6C,CAC7C,CAEV,CACX,CACrB,EACD,CACIJ,UAAU,EACVH,kBAAkB,EAClBM,wBAAwB,EACxBC,sBAAsB,EACtBN,gBAAgB,EAChBS,8BAA8B,EAC9B8B,wBAAwB,EACxBK,UAAU,EACVU,0BAA0B,EAC1BjB,yBAAyB,EACzBoB,2BAA2B,CAEnC,CAAC;AACL,CAAC;AAED3D,UAAU,CAAC4E,WAAW,GAAG,YAAY;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAhG,OAAA,GAEvBkB,UAAU","ignoreList":[]}

package/lib/cjs/components/file-select/FileSelect.styles.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.StyledUploadedFilesList = exports.StyledMotionFileSelectList = exports.StyledFileSelectWrapper = exports.StyledFileSelectText = exports.StyledFileSelectContainer = exports.StyledFileSelect = void 0;
 var _react = require("motion/react");
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _keyboardFocusHighlighting = require("../../utils/keyboardFocusHighlighting.styles");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const StyledFileSelect = exports.StyledFileSelect = _styledComponents.default.div``;
 const StyledFileSelectWrapper = exports.StyledFileSelectWrapper = _styledComponents.default.div`
@@ -42,6 +43,15 @@ const StyledFileSelectContainer = exports.StyledFileSelectContainer = _styledCom
 }) => $isImageSelection && (0, _styledComponents.css)`
             border-left: none;
         `}
+
+    ${({
+  $shouldShowKeyboardHighlighting
+}) => $shouldShowKeyboardHighlighting && (0, _styledComponents.css)`
+            &:focus-visible {
+                transition: none;
+                ${_keyboardFocusHighlighting.keyboardFocusHighlightingRingCss}
+            }
+        `}
 `;
 const StyledFileSelectText = exports.StyledFileSelectText = _styledComponents.default.p`
     color: ${({